@charcoal-ui/react 5.1.0 → 5.3.0-beta.1

package/src/README.mdx

@@ -1,4 +1,4 @@
-import { Meta, Story, Canvas, Props } from '@storybook/addon-docs'
+import { Meta, Story, Canvas, Props } from '@storybook/addon-docs/blocks'
 
 <Meta title="react/README" />
 

package/src/SSR.mdx

@@ -1,4 +1,4 @@
-import { Meta } from '@storybook/addon-docs'
+import { Meta } from '@storybook/addon-docs/blocks'
 
 <Meta title="react/SSR Guide" />
 

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

@@ -1,5 +1,5 @@
 import Button from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/Button',

package/src/components/Checkbox/CheckboxInput/index.story.tsx

@@ -1,5 +1,5 @@
 import CheckboxInput from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 import { useState } from 'react'
 
 export default {

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

@@ -1,5 +1,5 @@
 import Checkbox from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 import { useCallback, useState } from 'react'
 
 export default {

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

@@ -1,6 +1,6 @@
-import { action } from '@storybook/addon-actions'
+import { action } from 'storybook/actions'
 import Clickable from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/Clickable',

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -44,6 +44,7 @@ export function DropdownPopover({ children, ...props }: DropdownPopoverProps) {
       onClose={props.onClose}
       popoverRef={ref}
       triggerRef={props.triggerRef}
+      inertWorkaround={props.inertWorkaround}
     >
       {children}
     </Popover>

package/src/components/DropdownSelector/ListItem/index.story.tsx

@@ -2,7 +2,7 @@ import React, { useState } from 'react'
 import Icon from '../../Icon'
 import Switch from '../../Switch'
 import ListItem from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/internals/ListItem',

package/src/components/DropdownSelector/MenuList/index.story.tsx

@@ -1,8 +1,8 @@
-import { action } from '@storybook/addon-actions'
+import { action } from 'storybook/actions'
 import MenuList from '.'
 import MenuItem from '../MenuItem'
 import MenuItemGroup from '../MenuItemGroup'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/internals/MenuList',

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

@@ -1,7 +1,7 @@
 import { useRef, CSSProperties, useState } from 'react'
 import Popover from '.'
 import Button from '../../Button'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/internals/Popover',

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

@@ -11,6 +11,15 @@ export type PopoverProps = {
   children: ReactNode
   triggerRef: RefObject<Element | null>
   popoverRef?: RefObject<HTMLDivElement | null>
+  /**
+   * A tmp workaround for react-aria above 3.27.3 setting overlay element to inert and causing background to be clickable.
+   * This may become default at next major.
+   * https://github.com/adobe/react-spectrum/pull/8796
+   * https://github.com/adobe/react-spectrum/issues/8784
+   *
+   * @default false
+   */
+  inertWorkaround?: boolean
 }
 
 const _empty = () => null
@@ -50,6 +59,10 @@ export default function Popover(props: PopoverProps) {
     <Overlay portalContainer={document.body}>
       <div
         {...underlayProps}
+        // https://github.com/adobe/react-spectrum/issues/8784#issuecomment-3234771154
+        {...(props.inertWorkaround
+          ? { 'data-react-aria-top-layer': true, onClick: props.onClose }
+          : {})}
         style={{
           position: 'fixed',
           zIndex:

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

@@ -5,7 +5,7 @@ import MenuItemGroup from './MenuItemGroup'
 import DropdownMenuItem from './DropdownMenuItem'
 import Modal from '../Modal'
 import { ModalBody, ModalHeader } from '../Modal/ModalPlumbing'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 import TextField from '../TextField'
 import TextArea from '../TextArea'
 import Button from '../Button'

package/src/components/DropdownSelector/index.tsx

@@ -11,6 +11,7 @@ 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'
 
 export type DropdownSelectorProps = {
   label: string
@@ -30,7 +31,7 @@ export type DropdownSelectorProps = {
   children: MenuListChildren
   onChange: (value: string) => void
   className?: string
-}
+} & Pick<PopoverProps, 'inertWorkaround'>
 
 export default function DropdownSelector({
   onChange,
@@ -126,6 +127,7 @@ export default function DropdownSelector({
           onClose={() => setIsOpen(false)}
           triggerRef={triggerRef}
           value={props.value}
+          inertWorkaround={props.inertWorkaround}
         >
           <MenuList
             value={props.value}

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 import HintText from '.'
 
 export default {

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

@@ -1,6 +1,6 @@
 import Icon from '.'
 import { KNOWN_ICON_FILES } from '@charcoal-ui/icons'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/Icon',

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

@@ -1,6 +1,6 @@
 import '@charcoal-ui/icons'
 import IconButton, { IconButtonProps } from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/IconButton',

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

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 import LoadingSpinner from '.'
 
 export default {

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

@@ -12,7 +12,7 @@ import TextField from '../TextField'
 import DropdownSelector from '../DropdownSelector'
 import Checkbox from '../Checkbox'
 import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/Modal',

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

@@ -4,8 +4,8 @@ import {
   default as MultiSelect,
   MultiSelectGroupProps,
 } from '.'
-import { Meta, StoryObj } from '@storybook/react'
-import { action } from '@storybook/addon-actions'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { action } from 'storybook/actions'
 
 const StyledMultiSelectGroup = (props: MultiSelectGroupProps) => {
   return (

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

@@ -1,6 +1,6 @@
 import Radio from '.'
 import { RadioGroup } from './RadioGroup'
-import { StoryObj } from '@storybook/react'
+import { StoryObj } from '@storybook/react-webpack5'
 import { useState } from 'react'
 
 export default {

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

@@ -1,5 +1,5 @@
 import SegmentedControl from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/SegmentedControl',

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

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import Switch from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/Switch',

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

@@ -1,5 +1,5 @@
 import TagItem from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/TagItem',

package/src/components/TextArea/TextArea.story.tsx

@@ -1,7 +1,7 @@
-import { action } from '@storybook/addon-actions'
+import { action } from 'storybook/actions'
 import Clickable from '../Clickable'
 import TextArea from '.'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/TextArea',

package/src/components/TextField/TextField.story.tsx

@@ -1,7 +1,7 @@
 import Clickable from '../Clickable'
 import TextField from '.'
 import { useState } from 'react'
-import { Meta, StoryObj } from '@storybook/react'
+import { Meta, StoryObj } from '@storybook/react-webpack5'
 
 export default {
   title: 'react/TextField',