Merge pull request #422 from pixiv/tosuhsai/update-react-aria-packages

chore: update react-aria
pixiv · Jan 19, 2024 · 25371e0 · 25371e0
2 parents 0b66e16 + 0b6c33e
commit 25371e0
Show file tree

Hide file tree

Showing 10 changed files with 335 additions and 715 deletions.
diff --git a/packages/react/package.json b/packages/react/package.json
@@ -55,20 +55,17 @@
     "@charcoal-ui/styled": "^3.6.0",
     "@charcoal-ui/theme": "^3.6.0",
     "@charcoal-ui/utils": "^3.6.0",
-    "@react-aria/button": "^3.7.0",
-    "@react-aria/checkbox": "^3.11.0",
-    "@react-aria/dialog": "^3.5.0",
-    "@react-aria/focus": "^3.11.0",
-    "@react-aria/listbox": "^3.8.0",
-    "@react-aria/overlays": "^3.13.0",
-    "@react-aria/radio": "^3.8.0",
-    "@react-aria/select": "^3.9.0",
-    "@react-aria/separator": "^3.3.0",
-    "@react-aria/ssr": "^3.5.0",
-    "@react-aria/switch": "^3.4.0",
-    "@react-aria/textfield": "^3.9.0",
-    "@react-aria/utils": "^3.15.0",
-    "@react-aria/visually-hidden": "^3.7.0",
+    "@react-aria/button": "^3.9.1",
+    "@react-aria/checkbox": "^3.13.0",
+    "@react-aria/dialog": "^3.5.10",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/overlays": "^3.20.0",
+    "@react-aria/radio": "^3.10.0",
+    "@react-aria/ssr": "^3.9.1",
+    "@react-aria/switch": "^3.6.0",
+    "@react-aria/textfield": "^3.14.1",
+    "@react-aria/utils": "^3.23.0",
+    "@react-aria/visually-hidden": "^3.8.8",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "react-stately": "^3.26.0",

diff --git a/packages/react/src/_lib/compat.ts b/packages/react/src/_lib/compat.ts
@@ -28,4 +28,12 @@ export interface ReactAreaUseTextFieldCompat<E = Element> {
   readonly onSelect?: React.ReactEventHandler<E>
   readonly onBeforeInput?: React.FormEventHandler<E>
   readonly onInput?: React.FormEventHandler<E>
+  readonly autoCapitalize?:
+    | 'none'
+    | 'on'
+    | 'off'
+    | 'sentences'
+    | 'words'
+    | 'characters'
+    | undefined
 }
diff --git a/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot b/packages/react/src/components/DropdownSelector/__snapshots__/index.story.storyshot
@@ -685,7 +685,6 @@ exports[`Storyshots DropdownSelector In Modal 1`] = `
       <div
         className="c1"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"

diff --git a/packages/react/src/components/Modal/__snapshots__/index.story.storyshot b/packages/react/src/components/Modal/__snapshots__/index.story.storyshot
@@ -456,7 +456,6 @@ exports[`Storyshots Modal Bottom Sheet 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -1220,7 +1219,6 @@ exports[`Storyshots Modal Default 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -1280,7 +1278,9 @@ exports[`Storyshots Modal Default 1`] = `
                     onChange={[Function]}
                     placeholder="Nagisa"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -1318,7 +1318,9 @@ exports[`Storyshots Modal Default 1`] = `
                     onChange={[Function]}
                     placeholder="Tokyo"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -2021,7 +2023,6 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -2081,7 +2082,9 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
                     onChange={[Function]}
                     placeholder="Nagisa"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -2119,7 +2122,9 @@ exports[`Storyshots Modal Full Bottom Sheet 1`] = `
                     onChange={[Function]}
                     placeholder="Tokyo"
                     readOnly={false}
+                    required={false}
                     type="text"
+                    value=""
                   />
                 </div>
               </div>
@@ -2464,7 +2469,6 @@ exports[`Storyshots Modal Internal Scroll 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"
@@ -2832,7 +2836,6 @@ exports[`Storyshots Modal Not Dismmissable Story 1`] = `
       <div
         className="c3"
         onBlur={[Function]}
-        onFocus={null}
         onKeyDown={[Function]}
         role="dialog"
         size="M"

diff --git a/packages/react/src/components/SegmentedControl/RadioGroupContext.tsx b/packages/react/src/components/SegmentedControl/RadioGroupContext.tsx
@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import * as React from 'react'
-import { RadioGroupState } from 'react-stately'
+import type { RadioGroupState } from '@react-stately/radio'
 
 const RadioContext = createContext<RadioGroupState | null>(null)
 

diff --git a/packages/react/src/components/SegmentedControl/__snapshots__/index.story.storyshot b/packages/react/src/components/SegmentedControl/__snapshots__/index.story.storyshot
@@ -95,7 +95,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
     aria-label="test"
     aria-orientation="vertical"
     className="c0"
-    id="react-aria-1"
+    id="test-id"
     onBlur={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -110,7 +110,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -149,7 +149,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -188,7 +188,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -227,7 +227,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
         checked={false}
         className="c2"
         disabled={true}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -354,7 +354,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
     aria-label="test"
     aria-orientation="vertical"
     className="c0"
-    id="react-aria-5"
+    id="test-id"
     onBlur={[Function]}
     onFocus={[Function]}
     onKeyDown={[Function]}
@@ -369,7 +369,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -408,7 +408,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}
@@ -447,7 +447,7 @@ exports[`Storyshots SegmentedControl String Segments 1`] = `
         checked={false}
         className="c2"
         disabled={false}
-        name="test"
+        name="test-id"
         onChange={[Function]}
         onClick={[Function]}
         onDragStart={[Function]}

diff --git a/packages/react/src/components/SegmentedControl/index.tsx b/packages/react/src/components/SegmentedControl/index.tsx
@@ -1,6 +1,6 @@
 import { ReactNode, forwardRef, memo, useMemo, useRef } from 'react'
 import * as React from 'react'
-import { useRadioGroupState } from 'react-stately'
+import { useRadioGroupState } from '@react-stately/radio'
 import {
   AriaRadioGroupProps,
   AriaRadioProps,

diff --git a/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot b/packages/react/src/components/TextArea/__snapshots__/TextArea.story.storyshot
@@ -173,22 +173,20 @@ exports[`Storyshots TextArea Auto Height 1`] = `
           "border": 0,
           "clip": "rect(0 0 0 0)",
           "clipPath": "inset(50%)",
-          "height": 1,
-          "margin": "0 -1px -1px 0",
+          "height": "1px",
+          "margin": "-1px",
           "overflow": "hidden",
           "padding": 0,
           "position": "absolute",
           "whiteSpace": "nowrap",
-          "width": 1,
+          "width": "1px",
         }
       }
     >
       <label
         className="c3"
         htmlFor="test-id"
         id="test-id"
-        onBlur={null}
-        onFocus={null}
       >
         Label
       </label>
@@ -210,7 +208,9 @@ exports[`Storyshots TextArea Auto Height 1`] = `
         onChange={[Function]}
         placeholder="TextArea"
         readOnly={false}
+        required={false}
         rows={4}
+        value=""
       />
     </div>
   </div>
@@ -436,22 +436,20 @@ exports[`Storyshots TextArea Default 1`] = `
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
-            "height": 1,
-            "margin": "0 -1px -1px 0",
+            "height": "1px",
+            "margin": "-1px",
             "overflow": "hidden",
             "padding": 0,
             "position": "absolute",
             "whiteSpace": "nowrap",
-            "width": 1,
+            "width": "1px",
           }
         }
       >
         <label
           className="c4"
           htmlFor="test-id"
           id="test-id"
-          onBlur={null}
-          onFocus={null}
         >
           Label
         </label>
@@ -480,7 +478,9 @@ exports[`Storyshots TextArea Default 1`] = `
           onChange={[Function]}
           placeholder="Text Area"
           readOnly={false}
+          required={false}
           rows={4}
+          value=""
         />
       </div>
     </div>
@@ -716,22 +716,20 @@ exports[`Storyshots TextArea Has Count 1`] = `
             "border": 0,
             "clip": "rect(0 0 0 0)",
             "clipPath": "inset(50%)",
-            "height": 1,
-            "margin": "0 -1px -1px 0",
+            "height": "1px",
+            "margin": "-1px",
             "overflow": "hidden",
             "padding": 0,
             "position": "absolute",
             "whiteSpace": "nowrap",
-            "width": 1,
+            "width": "1px",
           }
         }
       >
         <label
           className="c4"
           htmlFor="test-id"
           id="test-id"
-          onBlur={null}
-          onFocus={null}
         >
           Label
         </label>
@@ -761,7 +759,9 @@ exports[`Storyshots TextArea Has Count 1`] = `
           onChange={[Function]}
           placeholder="Text Area"
           readOnly={false}
+          required={false}
           rows={4}
+          value=""
         />
         <span
           className="c10"
@@ -1062,7 +1062,9 @@ exports[`Storyshots TextArea Has Label 1`] = `
           onChange={[Function]}
           placeholder="Text Area"
           readOnly={false}
+          required={false}
           rows={4}
+          value=""
         />
       </div>
       <p