Typescript 5.5.0 upgrade

package.json

@@ -183,7 +183,7 @@
     "tailwindcss": "^3.4.0",
     "tailwindcss-animate": "^1.0.7",
     "tempy": "^0.5.0",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.0-dev.20240512",
     "typescript-strict-plugin": "^2.0.0",
     "verdaccio": "^5.13.0",
     "walk-object": "^4.0.0",

packages/@internationalized/number/src/NumberParser.ts

@@ -164,9 +164,9 @@ class NumberParserImpl {
       // extra step for rounding percents to what our formatter would output
       let options = {
         ...this.options,
-        style: 'decimal',
-        minimumFractionDigits: Math.min(this.options.minimumFractionDigits + 2, 20),
-        maximumFractionDigits: Math.min(this.options.maximumFractionDigits + 2, 20)
+        style: 'decimal' as const,
+        minimumFractionDigits: Math.min((this.options.minimumFractionDigits ?? 0) + 2, 20),
+        maximumFractionDigits: Math.min((this.options.maximumFractionDigits ?? 0) + 2, 20)
       };
       return (new NumberParser(this.locale, options)).parse(new NumberFormatter(this.locale, options).format(newValue));
     }

packages/@react-spectrum/color/src/ColorEditor.tsx

@@ -19,6 +19,12 @@ export interface SpectrumColorEditorProps {
 
 function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement>) {
   let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
+  let resolvedFormat: ColorSpace;
+  if (format === 'hex') {
+    resolvedFormat = 'rgb';
+  } else {
+    resolvedFormat = format;
+  }
   let domRef = useDOMRef(ref);
   let formatter = useLocalizedStringFormatter(intlMessages, '@react-spectrum/color');
 
@@ -32,7 +38,7 @@ function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement
         }
       </div>
       <div className={style({display: 'flex', gap: 4})()}>
-        <Picker 
+        <Picker
           aria-label={formatter.format('colorFormat')}
           isQuiet
           width="size-700"
@@ -47,7 +53,7 @@ function ColorEditor(props: SpectrumColorEditorProps, ref: DOMRef<HTMLDivElement
         {format === 'hex'
           ? <ColorField isQuiet width="size-1000" aria-label={formatter.format('hex')} />
           : getColorChannels(format).map(channel => (
-            <ColorField key={channel} colorSpace={format === 'hex' ? 'rgb' : format} channel={channel} isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />
+            <ColorField key={channel} colorSpace={resolvedFormat} channel={channel} isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />
           ))}
         {!props.hideAlphaChannel &&
           <ColorField channel="alpha" isQuiet width="size-400" flex UNSAFE_style={{'--spectrum-textfield-min-width': 0} as CSSProperties} />}

packages/@react-spectrum/meter/stories/Meter.stories.tsx

@@ -12,14 +12,15 @@
 
 import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Meter} from '../';
+import {NumberFormatOptions} from '@internationalized/number';
 import React from 'react';
 
 type MeterStory = ComponentStoryObj<typeof Meter>;
 
 const formatOptions = {
   style: 'currency',
   currency: 'JPY'
-};
+} as NumberFormatOptions;
 
 export default {
   title: 'Meter',

packages/react-aria-components/stories/ColorPicker.stories.tsx

@@ -24,8 +24,16 @@ export default {
   title: 'React Aria Components'
 };
 
+type AllColorSpaces = ColorSpace | 'hex';
+
 export const ColorPickerExample = (args) => {
-  let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
+  let [format, setFormat] = useState<AllColorSpaces>('hex');
+  let resolvedFormat: ColorSpace;
+  if (format === 'hex') {
+    resolvedFormat = 'rgb';
+  } else {
+    resolvedFormat = format;
+  }
   return (
     <ColorPicker {...args} defaultValue="rgb(255, 0, 0)">
       <ColorPickerTrigger>
@@ -42,14 +50,14 @@ export const ColorPickerExample = (args) => {
           </select>
         </label>
         <div style={{display: 'flex', gap: 4, width: 192}}>
-          {format === 'hex' 
+          {format === 'hex'
             ? (
               <ColorField style={{display: 'flex', flexDirection: 'column'}}>
                 <Label>Hex</Label>
                 <Input />
               </ColorField>
             ) : getColorChannels(format).map(channel => (
-              <ColorField key={channel} colorSpace={format === 'hex' ? 'rgb' : format} channel={channel} style={{display: 'flex', flexDirection: 'column', flex: 1}}>
+              <ColorField key={channel} colorSpace={resolvedFormat} channel={channel} style={{display: 'flex', flexDirection: 'column', flex: 1}}>
                 <Label />
                 <Input style={{width: '100%', boxSizing: 'border-box'}} />
               </ColorField>

tsconfig.json

@@ -3,7 +3,7 @@
     // we can explicitly declare `any`, but we don't want to infer `any`
     "noImplicitAny": false,
     // maybe bump to 'esNext'?
-    "target": "es6",
+    "target": "es2018",
     // allows react jsx in tsx files
     "jsx": "react",
     // Eventually turn off, one we have no more assumed default exports.

yarn.lock

@@ -22398,10 +22398,10 @@ typescript-strict-plugin@^2.0.0:
     ora "^5.4.1"
     yargs "^16.2.0"
 
-typescript@^5.3.3:
-  version "5.3.3"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.3.3.tgz#b3ce6ba258e72e6305ba66f5c9b452aaee3ffe37"
-  integrity sha512-pXWcraxM0uxAS+tN0AG/BF2TyqmHO014Z070UsJ+pFvYuRSq8KH8DmWpnbXe0pEPDHXZV3FcAbJkijJ5oNEnWw==
+typescript@^5.5.0-dev.20240512:
+  version "5.5.0-dev.20240512"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.0-dev.20240512.tgz#0125f77789f1f9cc0d1f3111523cf19ca9713e9a"
+  integrity sha512-qaBthiey39OUkoC0p3r83WKUG4KEvgTJg968MxJ548G6lYhpsFhp1Qryxrf32BonZwzfVi46Ltb9maSHVceLMg==
 
 [email protected]:
   version "0.7.17"