@charcoal-ui/react 5.11.0 → 6.0.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "5.11.0",
+  "version": "6.0.0-beta.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "./dist/index.cjs",
@@ -20,47 +20,37 @@
     "*.css"
   ],
   "devDependencies": {
-    "@react-types/dialog": "^3.5.15",
-    "@react-types/switch": "^3.1.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
     "@testing-library/user-event": "^13.5.0",
-    "@types/glob": "^8.1.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@types/react-router-dom": "^5.3.3",
     "@types/warning": "^3.0.4",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitest/browser": "^2.1.9",
     "autoprefixer": "^10.4.19",
     "jsdom": "^24.1.0",
+    "playwright": "^1.58.2",
     "postcss-nested": "^7.0.2",
     "react": "^18.3.1",
+    "react-aria": "3.48.0",
     "react-dom": "^18.3.1",
-    "react-router-dom": "^6.2.1"
+    "react-stately": "3.46.0"
   },
   "dependencies": {
-    "@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/utils": "^3.23.0",
-    "@react-aria/visually-hidden": "^3.8.8",
     "@react-spring/web": "^10",
-    "@react-stately/radio": "^3.10.2",
     "polished": "^4.1.4",
     "react-compiler-runtime": "1.0.0",
-    "react-stately": "^3.26.0",
     "warning": "^4.0.3",
-    "@charcoal-ui/foundation": "5.11.0",
-    "@charcoal-ui/icons": "5.11.0",
-    "@charcoal-ui/theme": "5.11.0",
-    "@charcoal-ui/utils": "5.11.0"
+    "@charcoal-ui/foundation": "6.0.0-beta.0",
+    "@charcoal-ui/theme": "6.0.0-beta.0",
+    "@charcoal-ui/icons": "6.0.0-beta.0",
+    "@charcoal-ui/utils": "6.0.0-beta.0"
   },
   "peerDependencies": {
-    "react": ">=17.0.0"
+    "react": ">=17.0.0",
+    "react-aria": ">=3.48.0",
+    "react-stately": ">=3.46.0"
   },
   "files": [
     "src",
@@ -81,6 +71,7 @@
     "build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
     "typecheck": "tsc --project tsconfig.build.json --pretty --noEmit",
     "clean": "rimraf dist .tsbuildinfo",
-    "test": "vitest run --passWithNoTests"
+    "test": "vitest run --passWithNoTests",
+    "test:browser": "vitest run --config vitest.browser.config.ts"
   }
 }

package/src/__tests__/css-output.test.ts

@@ -72,6 +72,7 @@ describe('CSS nesting output equivalence', () => {
       '__snapshots__',
       'index.css.snap',
     )
-    await expect(canonicalize(result.root)).toMatchFileSnapshot(snapshotPath)
+    const expected = await fs.readFile(snapshotPath, 'utf-8')
+    expect(canonicalize(result.root)).toBe(expected)
   })
 })

package/src/components/Checkbox/__snapshots__/index.css.snap

@@ -20,3 +20,4 @@
   font-size: 14px;
   line-height: 20px;
 }
+

package/src/components/Checkbox/index.tsx

@@ -1,9 +1,9 @@
 import './index.css'
 
 import { forwardRef, memo } from 'react'
-import { useId } from '@react-aria/utils'
 import CheckboxInput, { CheckboxInputProps } from './CheckboxInput'
 import { CheckboxWithLabel } from './CheckboxWithLabel'
+import { useId } from 'react-aria/useId'
 
 export type CheckboxProps = CheckboxInputProps
 

package/src/components/DropdownSelector/Popover/index.tsx

@@ -1,9 +1,10 @@
 import './index.css'
 
 import { RefObject, useContext, useRef, ReactNode } from 'react'
-import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
 import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'
 import { usePreventScroll } from './usePreventScroll'
+import { DismissButton, Overlay } from 'react-aria/Overlay'
+import { usePopover } from 'react-aria/usePopover'
 
 export type PopoverProps = {
   isOpen: boolean

package/src/components/DropdownSelector/index.tsx

@@ -7,12 +7,13 @@ import { DropdownPopover } from './DropdownPopover'
 import { findPreviewRecursive } from './utils/findPreviewRecursive'
 import MenuList, { MenuListChildren } from './MenuList'
 import { getValuesRecursive } from './MenuList/internals/getValuesRecursive'
-import { useVisuallyHidden } from '@react-aria/visually-hidden'
 import { AssistiveText } from '../TextField/AssistiveText'
 import { useClassNames } from '../../_lib/useClassNames'
-import { useId } from '@react-aria/utils'
 import { PopoverProps } from './Popover'
 
+import { useVisuallyHidden } from 'react-aria/VisuallyHidden'
+import { useId } from 'react-aria/useId'
+
 export type DropdownSelectorProps = {
   label: string
   value: string

package/src/components/Modal/Dialog/index.tsx

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react'
 import * as React from 'react'
-import { useDialog } from '@react-aria/dialog'
+import { useDialog } from 'react-aria/useDialog'
 import { useForwardedRef } from '../../../_lib/useForwardedRef'
 import { Size, BottomSheet } from '..'
 

package/src/components/Modal/index.story.tsx

@@ -1,6 +1,5 @@
 import Modal, { ModalDismissButton, ModalProps } from '.'
-import { OverlayProvider } from '@react-aria/overlays'
-import { useOverlayTriggerState } from 'react-stately'
+import { useOverlayTriggerState } from 'react-stately/useOverlayTriggerState'
 import Button from '../Button'
 import {
   ModalAlign,
@@ -13,6 +12,9 @@ import DropdownSelector from '../DropdownSelector'
 import Checkbox from '../Checkbox'
 import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
 import { Meta, StoryObj } from '@storybook/react-vite'
+import { OverlayProvider } from 'react-aria'
+
+const defaultOpen = !!process.env.TEST
 
 export default {
   title: 'react/Modal',
@@ -38,7 +40,7 @@ export default {
     },
   },
   render: function Render(args) {
-    const state = useOverlayTriggerState({})
+    const state = useOverlayTriggerState({ defaultOpen })
     return (
       // Application must be wrapped in an OverlayProvider so that it can be
       // hidden from screen readers when a modal opens.
@@ -138,13 +140,12 @@ export const FullBottomSheet: StoryObj<typeof Modal> = {
     bottomSheet: 'full',
   },
   render: function Render(args) {
-    const state = useOverlayTriggerState({})
+    const state = useOverlayTriggerState({ defaultOpen })
     return (
       // Application must be wrapped in an OverlayProvider so that it can be
       // hidden from screen readers when a modal opens.
       <OverlayProvider>
         <Button onClick={() => state.open()}>Open Modal</Button>
-
         <Modal
           {...args}
           isDismissable
@@ -184,13 +185,12 @@ export const FullBottomSheet: StoryObj<typeof Modal> = {
 
 export const BottomSheet: StoryObj<typeof Modal> = {
   render: function Render(args) {
-    const state = useOverlayTriggerState({})
+    const state = useOverlayTriggerState({ defaultOpen })
     return (
       // Application must be wrapped in an OverlayProvider so that it can be
       // hidden from screen readers when a modal opens.
       <OverlayProvider>
         <Button onClick={() => state.open()}>Open Modal</Button>
-
         <Modal
           {...args}
           isOpen={state.isOpen}
@@ -224,7 +224,7 @@ export const BottomSheet: StoryObj<typeof Modal> = {
 
 export const NotDismmissableStory: StoryObj<typeof Modal> = {
   render: function Render(args) {
-    const state = useOverlayTriggerState({})
+    const state = useOverlayTriggerState({ defaultOpen })
     return (
       <OverlayProvider>
         <Button onClick={() => state.open()}>Open Modal</Button>
@@ -254,7 +254,7 @@ export const NotDismmissableStory: StoryObj<typeof Modal> = {
 
 export const BackgroundScroll: StoryObj<typeof Modal> = {
   render: function Render(args) {
-    const state = useOverlayTriggerState({})
+    const state = useOverlayTriggerState({ defaultOpen })
     return (
       <OverlayProvider>
         <div

package/src/components/Modal/index.tsx

@@ -1,11 +1,9 @@
 import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
-import { Overlay } from '@react-aria/overlays'
-import type { AriaDialogProps } from '@react-types/dialog'
+import type { AriaDialogProps } from 'react-aria/useDialog'
 import { animated, useTransition, easings } from '@react-spring/web'
 import Button, { ButtonProps } from '../Button'
 import IconButton, { IconButtonProps } from '../IconButton'
-import { useObjectRef } from '@react-aria/utils'
 import { Dialog } from './Dialog'
 import { ModalBackgroundContext } from './ModalBackgroundContext'
 import {
@@ -16,6 +14,9 @@ import {
 
 import './index.css'
 
+import { Overlay } from 'react-aria/Overlay'
+import { useObjectRef } from 'react-aria/useObjectRef'
+
 export type BottomSheet = boolean | 'full'
 export type Size = 'S' | 'M' | 'L'
 

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -1,12 +1,13 @@
 import * as React from 'react'
+import { ariaHideOutside } from 'react-aria/private/overlays/ariaHideOutside'
+import { useOverlayFocusContain } from 'react-aria/private/overlays/Overlay'
+import { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'
+
 import {
   AriaModalOverlayProps,
   ModalOverlayAria,
-  ariaHideOutside,
-  useOverlay,
-  useOverlayFocusContain,
-} from '@react-aria/overlays'
-import { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'
+} from 'react-aria/useModalOverlay'
+import { useOverlay } from 'react-aria/useOverlay'
 
 /**
  * We want to enable scrolling on the modal background,

package/src/components/Radio/__snapshots__/index.css.snap

@@ -16,3 +16,4 @@
   line-height: 22px;
   color: var(--charcoal-text2);
 }
+

package/src/components/SegmentedControl/RadioGroupContext.tsx

@@ -1,6 +1,6 @@
 import { createContext, useContext } from 'react'
 import * as React from 'react'
-import type { RadioGroupState } from '@react-stately/radio'
+import { RadioGroupState } from 'react-stately/useRadioGroupState'
 
 const RadioContext = createContext<RadioGroupState | null>(null)
 

package/src/components/SegmentedControl/index.tsx

@@ -1,16 +1,16 @@
 import { ReactNode, forwardRef, memo, useMemo, useRef } from 'react'
 import * as React from 'react'
-import { useRadioGroupState } from '@react-stately/radio'
+import { RadioProvider, useRadioContext } from './RadioGroupContext'
+import { useClassNames } from '../../_lib/useClassNames'
+import './index.css'
 import {
   AriaRadioGroupProps,
   AriaRadioProps,
   useRadio,
   useRadioGroup,
-} from '@react-aria/radio'
-import { RadioProvider, useRadioContext } from './RadioGroupContext'
-import { useClassNames } from '../../_lib/useClassNames'
+} from 'react-aria/useRadioGroup'
 
-import './index.css'
+import { useRadioGroupState } from 'react-stately/useRadioGroupState'
 
 type SegmentedControlItem = {
   label: React.ReactNode

package/src/components/Switch/__snapshots__/index.css.snap

@@ -21,3 +21,4 @@
   line-height: 22px;
   color: var(--charcoal-text2);
 }
+

package/src/components/Switch/index.tsx

@@ -1,9 +1,9 @@
 import './index.css'
 
 import { memo, forwardRef } from 'react'
-import { useId } from '@react-aria/utils'
 import SwitchInput, { type SwitchInputProps } from './SwitchInput'
 import { SwitchWithLabel } from './SwitchWithLabel'
+import { useId } from 'react-aria/useId'
 
 export type SwitchProps = SwitchInputProps
 

package/src/components/TagItem/index.tsx

@@ -1,10 +1,10 @@
 import React, { forwardRef, memo, useMemo, ForwardedRef, type JSX } from 'react'
-import { useObjectRef } from '@react-aria/utils'
 import Icon from '../Icon'
 import { useClassNames } from '../../_lib/useClassNames'
-
 import './index.css'
 
+import { useObjectRef } from 'react-aria/useObjectRef'
+
 type SizeMap = {
   S: 32
   M: 40

package/src/components/TextArea/index.tsx

@@ -1,6 +1,5 @@
 import './index.css'
 
-import { useVisuallyHidden } from '@react-aria/visually-hidden'
 import {
   forwardRef,
   useCallback,
@@ -13,9 +12,10 @@ import {
 import FieldLabel from '../FieldLabel'
 import { countCodePointsInString, mergeRefs } from '../../_lib'
 import { useFocusWithClick } from '../TextField/useFocusWithClick'
-import { useId } from '@react-aria/utils'
 import { AssistiveText } from '../TextField/AssistiveText'
 import { useClassNames } from '../../_lib/useClassNames'
+import { useVisuallyHidden } from 'react-aria/VisuallyHidden'
+import { useId } from 'react-aria/useId'
 
 /**
  * `TextArea` を `imperativeRef` から操作するためのハンドル

package/src/components/TextEllipsis/__snapshots__/index.css.snap

@@ -18,3 +18,4 @@
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+

package/src/components/TextField/index.tsx

@@ -1,14 +1,14 @@
 import './index.css'
 
-import { useVisuallyHidden } from '@react-aria/visually-hidden'
 import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
 import * as React from 'react'
 import FieldLabel from '../FieldLabel'
-import { countCodePointsInString } from '../../_lib'
+import { countCodePointsInString, mergeRefs } from '../../_lib'
 import { useFocusWithClick } from './useFocusWithClick'
-import { mergeRefs, useId } from '@react-aria/utils'
 import { AssistiveText } from './AssistiveText'
 import { useClassNames } from '../../_lib/useClassNames'
+import { useVisuallyHidden } from 'react-aria/VisuallyHidden'
+import { useId } from 'react-aria/useId'
 
 export type TextFieldProps = {
   prefix?: ReactNode

package/src/core/OverlayProvider.tsx

@@ -1 +1 @@
-export { OverlayProvider } from '@react-aria/overlays'
+export { OverlayProvider } from 'react-aria/private/overlays/useModal'

package/src/core/SSRProvider.tsx

@@ -1,5 +1,5 @@
-import { SSRProvider as OriginSSRProvider } from '@react-aria/ssr'
 import { version, Fragment } from 'react'
+import { SSRProvider as OriginSSRProvider } from 'react-aria/SSRProvider'
 
 export function isReactVersionOver(minVersion: number): boolean {
   // version history on the react side: https://github.com/facebook/react/commits/main/packages/shared/ReactVersion.js