@charcoal-ui/react 3.7.0 → 3.9.0

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

@@ -1,4 +1,3 @@
-import { Story } from '../../_lib/compat'
 import Modal, { ModalDismissButton, ModalProps } from '.'
 import { OverlayProvider } from '@react-aria/overlays'
 import { useOverlayTriggerState } from 'react-stately'
@@ -14,6 +13,7 @@ import { theme } from '../../styled'
 import TextField from '../TextField'
 import DropdownSelector from '../DropdownSelector'
 import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Modal',
@@ -27,6 +27,7 @@ export default {
       control: {
         type: 'inline-radio',
       },
+      defaultValue: 'M',
     },
     bottomSheet: {
       options: ['full', 'true', 'false'],
@@ -34,26 +35,26 @@ export default {
       control: {
         type: 'inline-radio',
       },
+      defaultValue: false,
     },
   },
-}
-
-const DefaultStory = (args: ModalProps) => {
-  const state = useOverlayTriggerState({})
-  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>
-      <M
-        {...args}
-        isDismissable
-        isOpen={state.isOpen}
-        onClose={() => state.close()}
-      />
-    </OverlayProvider>
-  )
-}
+  render: function Render(args) {
+    const state = useOverlayTriggerState({})
+    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>
+        <M
+          {...args}
+          isDismissable
+          isOpen={state.isOpen}
+          onClose={() => state.close()}
+        />
+      </OverlayProvider>
+    )
+  },
+} as Meta<typeof Modal>
 
 const M = (props: ModalProps) => {
   return (
@@ -114,127 +115,132 @@ const StyledModalText = styled(ModalAlign)`
   ${theme((o) => [o.font.text2, o.typography(14)])}
 `
 
-export const Default: Story<ModalProps> = DefaultStory.bind({})
+export const Default: StoryObj<typeof Modal> = {}
 
-const FullBottomSheetStory = (args: ModalProps) => {
-  const state = useOverlayTriggerState({})
-  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>
+export const FullBottomSheet: StoryObj<typeof Modal> = {
+  args: {
+    bottomSheet: 'full',
+  },
+  render: function Render(args) {
+    const state = useOverlayTriggerState({})
+    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
-        bottomSheet="full"
-        isOpen={state.isOpen}
-        onClose={() => state.close()}
-      >
-        <ModalHeader />
-        <ModalBody>
-          <ModalVStack>
-            <StyledModalText>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
-              placeat tenetur, necessitatibus laudantium cumque exercitationem
-              provident. Quaerat iure enim, eveniet dolores earum odio quo
-              possimus fugiat aspernatur, numquam, commodi repellat.
-            </StyledModalText>
-            <ModalAlign>
-              <TextField
-                showLabel
-                label="Name"
-                placeholder="Nagisa"
-              ></TextField>
-            </ModalAlign>
-            <ModalAlign>
-              <TextField
-                showLabel
-                label="Country"
-                placeholder="Tokyo"
-              ></TextField>
-            </ModalAlign>
-          </ModalVStack>
-          <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fullWidth>
-              Apply
-            </Button>
-            <Button onClick={() => state.close()} fullWidth>
-              Cancel
-            </Button>
-          </ModalButtons>
-        </ModalBody>
-      </Modal>
-    </OverlayProvider>
-  )
+        <Modal
+          {...args}
+          isDismissable
+          isOpen={state.isOpen}
+          onClose={() => state.close()}
+        >
+          <ModalHeader />
+          <ModalBody>
+            <ModalVStack>
+              <StyledModalText>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+                placeat tenetur, necessitatibus laudantium cumque exercitationem
+                provident. Quaerat iure enim, eveniet dolores earum odio quo
+                possimus fugiat aspernatur, numquam, commodi repellat.
+              </StyledModalText>
+              <ModalAlign>
+                <TextField
+                  showLabel
+                  label="Name"
+                  placeholder="Nagisa"
+                ></TextField>
+              </ModalAlign>
+              <ModalAlign>
+                <TextField
+                  showLabel
+                  label="Country"
+                  placeholder="Tokyo"
+                ></TextField>
+              </ModalAlign>
+            </ModalVStack>
+            <ModalButtons>
+              <Button variant="Primary" onClick={() => state.close()} fullWidth>
+                Apply
+              </Button>
+              <Button onClick={() => state.close()} fullWidth>
+                Cancel
+              </Button>
+            </ModalButtons>
+          </ModalBody>
+        </Modal>
+      </OverlayProvider>
+    )
+  },
 }
 
-export const FullBottomSheet: Story<ModalProps> = FullBottomSheetStory.bind({})
-
-const BottomSheetStory = (args: ModalProps) => {
-  const state = useOverlayTriggerState({})
-  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>
+export const BottomSheet: StoryObj<typeof Modal> = {
+  render: function Render(args) {
+    const state = useOverlayTriggerState({})
+    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}
-        onClose={() => state.close()}
-        bottomSheet
-        isDismissable
-      >
-        <ModalHeader />
-        <ModalBody>
-          <ModalVStack>
-            <StyledModalText>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
-              placeat tenetur, necessitatibus laudantium cumque exercitationem
-              provident. Quaerat iure enim, eveniet dolores earum odio quo
-              possimus fugiat aspernatur, numquam, commodi repellat.
-            </StyledModalText>
-          </ModalVStack>
-          <ModalButtons>
-            <Button variant="Danger" onClick={() => state.close()} fullWidth>
-              削除する
-            </Button>
-            <ModalDismissButton>キャンセル</ModalDismissButton>
-          </ModalButtons>
-        </ModalBody>
-      </Modal>
-    </OverlayProvider>
-  )
+        <Modal
+          {...args}
+          isOpen={state.isOpen}
+          onClose={() => state.close()}
+          bottomSheet
+          isDismissable
+        >
+          <ModalHeader />
+          <ModalBody>
+            <ModalVStack>
+              <StyledModalText>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+                placeat tenetur, necessitatibus laudantium cumque exercitationem
+                provident. Quaerat iure enim, eveniet dolores earum odio quo
+                possimus fugiat aspernatur, numquam, commodi repellat.
+              </StyledModalText>
+            </ModalVStack>
+            <ModalButtons>
+              <Button variant="Danger" onClick={() => state.close()} fullWidth>
+                削除する
+              </Button>
+              <ModalDismissButton>キャンセル</ModalDismissButton>
+            </ModalButtons>
+          </ModalBody>
+        </Modal>
+      </OverlayProvider>
+    )
+  },
 }
 
-export const BottomSheet: Story<ModalProps> = BottomSheetStory.bind({})
+export const NotDismmissableStory: StoryObj<typeof Modal> = {
+  render: function Render(args) {
+    const state = useOverlayTriggerState({})
+    return (
+      <OverlayProvider>
+        <Button onClick={() => state.open()}>Open Modal</Button>
 
-export const NotDismmissableStory: Story<ModalProps> = (args: ModalProps) => {
-  const state = useOverlayTriggerState({})
-  return (
-    <OverlayProvider>
-      <Button onClick={() => state.open()}>Open Modal</Button>
-
-      <Modal {...args} isOpen={state.isOpen} onClose={() => state.close()}>
-        <ModalHeader />
-        <ModalBody>
-          <ModalVStack>
-            <StyledModalText>
-              Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
-              placeat tenetur, necessitatibus laudantium cumque exercitationem
-              provident. Quaerat iure enim, eveniet dolores earum odio quo
-              possimus fugiat aspernatur, numquam, commodi repellat.
-            </StyledModalText>
-          </ModalVStack>
-          <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fullWidth>
-              OK
-            </Button>
-          </ModalButtons>
-        </ModalBody>
-      </Modal>
-    </OverlayProvider>
-  )
+        <Modal {...args} isOpen={state.isOpen} onClose={() => state.close()}>
+          <ModalHeader />
+          <ModalBody>
+            <ModalVStack>
+              <StyledModalText>
+                Lorem ipsum dolor sit amet consectetur adipisicing elit. Quod
+                placeat tenetur, necessitatibus laudantium cumque exercitationem
+                provident. Quaerat iure enim, eveniet dolores earum odio quo
+                possimus fugiat aspernatur, numquam, commodi repellat.
+              </StyledModalText>
+            </ModalVStack>
+            <ModalButtons>
+              <Button variant="Primary" onClick={() => state.close()} fullWidth>
+                OK
+              </Button>
+            </ModalButtons>
+          </ModalBody>
+        </Modal>
+      </OverlayProvider>
+    )
+  },
 }
+
 export { InternalScrollStory as InternalScroll } from './__stories__/InternalScrollStory'

package/src/components/Modal/index.tsx

@@ -1,10 +1,6 @@
 import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
-import {
-  AriaModalOverlayProps,
-  Overlay,
-  useModalOverlay,
-} from '@react-aria/overlays'
+import { AriaModalOverlayProps, Overlay } from '@react-aria/overlays'
 import styled, { css, useTheme } from 'styled-components'
 import { AriaDialogProps } from '@react-types/dialog'
 import { maxWidth } from '@charcoal-ui/utils'
@@ -15,6 +11,7 @@ import IconButton from '../IconButton'
 import { useObjectRef } from '@react-aria/utils'
 import { Dialog } from './Dialog'
 import { ModalBackgroundContext } from './ModalBackgroundContext'
+import { useCharcoalModalOverlay } from './useCustomModalOverlay'
 
 export type BottomSheet = boolean | 'full'
 export type Size = 'S' | 'M' | 'L'
@@ -81,27 +78,15 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
 
   const ref = useObjectRef<HTMLDivElement>(external)
 
-  const { modalProps, underlayProps } = useModalOverlay(
+  const { modalProps, underlayProps } = useCharcoalModalOverlay(
     {
       ...props,
       isKeyboardDismissDisabled:
         isDismissable === undefined || isDismissable === false,
     },
-
     {
-      close: onClose,
-      isOpen: isOpen,
-      // these props are not used actually.
-      // https://github.com/adobe/react-spectrum/blob/df14e3fb129b94b310f0397a701b83f006b51dfe/packages/%40react-aria/overlays/src/useModalOverlay.ts
-      open: () => {
-        // nope
-      },
-      setOpen: () => {
-        // nope
-      },
-      toggle: () => {
-        // nope
-      },
+      onClose,
+      isOpen,
     },
     ref
   )
@@ -136,6 +121,15 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
 
   const bgRef = React.useRef<HTMLElement>(null)
 
+  const handleClick = React.useCallback(
+    (e: MouseEvent) => {
+      if (e.currentTarget === e.target) {
+        onClose()
+      }
+    },
+    [onClose]
+  )
+
   return transition(
     ({ backgroundColor, overflow, transform }, item) =>
       item && (
@@ -146,6 +140,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
             {...underlayProps}
             style={transitionEnabled ? { backgroundColor, overflow } : {}}
             $bottomSheet={bottomSheet}
+            onClick={handleClick}
           >
             <ModalBackgroundContext.Provider value={bgRef.current}>
               <Dialog

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -0,0 +1,42 @@
+import * as React from 'react'
+import {
+  AriaModalOverlayProps,
+  ModalOverlayAria,
+  ariaHideOutside,
+  useOverlay,
+  useOverlayFocusContain,
+} from '@react-aria/overlays'
+
+/**
+ * We want to enable scrolling on the modal background,
+ * but `useModalOverlay` (specifically, `useOverlay` within it) detects pointer events on the scrollbar.
+ * Therefore, to prevent this issue, we need to override `shouldCloseOnInteractOutside` in `useModalOverlay`.
+ */
+export function useCharcoalModalOverlay(
+  props: AriaModalOverlayProps,
+  state: { isOpen: boolean; onClose: () => void },
+  ref: React.RefObject<HTMLElement>
+): ModalOverlayAria {
+  const { overlayProps, underlayProps } = useOverlay(
+    {
+      ...props,
+      isOpen: state.isOpen,
+      onClose: state.onClose,
+      shouldCloseOnInteractOutside: () => false,
+    },
+    ref
+  )
+
+  useOverlayFocusContain()
+
+  React.useEffect(() => {
+    if (state.isOpen && ref.current) {
+      return ariaHideOutside([ref.current])
+    }
+  }, [state.isOpen, ref])
+
+  return {
+    modalProps: overlayProps,
+    underlayProps,
+  }
+}

package/src/components/MultiSelect/__snapshots__/index.story.storyshot

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots MultiSelect Default 1`] = `
+exports[`Storybook Tests MultiSelect Default 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -88,6 +88,19 @@ exports[`Storyshots MultiSelect Default 1`] = `
   background-color: var(--charcoal-text3-press);
 }
 
+.c2[type='checkbox']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c2[type='checkbox']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
 .c3 {
   position: absolute;
   top: -2px;
@@ -251,7 +264,7 @@ exports[`Storyshots MultiSelect Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots MultiSelect Invalid 1`] = `
+exports[`Storybook Tests MultiSelect Invalid 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -339,6 +352,19 @@ exports[`Storyshots MultiSelect Invalid 1`] = `
   background-color: var(--charcoal-text3-press);
 }
 
+.c2[type='checkbox']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c2[type='checkbox']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]),
 .c2[type='checkbox'][aria-disabled='false'] {
   box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
@@ -507,7 +533,7 @@ exports[`Storyshots MultiSelect Invalid 1`] = `
 </div>
 `;
 
-exports[`Storyshots MultiSelect Overlay 1`] = `
+exports[`Storybook Tests MultiSelect Overlay 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -596,6 +622,19 @@ exports[`Storyshots MultiSelect Overlay 1`] = `
   background-color: var(--charcoal-text3-press);
 }
 
+.c2[type='checkbox']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c2[type='checkbox']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
 .c3 {
   position: absolute;
   top: -2px;
@@ -762,7 +801,7 @@ exports[`Storyshots MultiSelect Overlay 1`] = `
 </div>
 `;
 
-exports[`Storyshots MultiSelect Playground 1`] = `
+exports[`Storybook Tests MultiSelect Playground 1`] = `
 .c1 {
   display: grid;
   grid-template-columns: auto 1fr;
@@ -850,6 +889,19 @@ exports[`Storyshots MultiSelect Playground 1`] = `
   background-color: var(--charcoal-text3-press);
 }
 
+.c2[type='checkbox']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c2[type='checkbox']:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
 .c3 {
   position: absolute;
   top: -2px;

package/src/components/MultiSelect/index.tsx

@@ -5,6 +5,7 @@ import warning from 'warning'
 import { px } from '@charcoal-ui/utils'
 
 import { MultiSelectGroupContext } from './context'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 export type MultiSelectProps = React.PropsWithChildren<{
   value: string
@@ -168,6 +169,8 @@ const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
       }
     }
 
+    ${focusVisibleFocusRingCss}
+
     ${({ invalid, overlay }) =>
       invalid &&
       !overlay &&