@charcoal-ui/react 2.0.0-rc.2 → 2.0.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.0.0-rc.2",
+  "version": "2.0.1",
   "license": "Apache-2.0",
   "type": "module",
   "source": "./src/index.ts",
@@ -48,15 +48,15 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.0.0-rc.2",
-    "@charcoal-ui/styled": "^2.0.0-rc.2",
-    "@charcoal-ui/theme": "^2.0.0-rc.2",
-    "@charcoal-ui/utils": "^2.0.0-rc.2",
+    "@charcoal-ui/icons": "^2.0.1",
+    "@charcoal-ui/styled": "^2.0.1",
+    "@charcoal-ui/theme": "^2.0.1",
+    "@charcoal-ui/utils": "^2.0.1",
     "@react-aria/button": "^3.6.2",
     "@react-aria/checkbox": "^3.2.3",
     "@react-aria/dialog": "^3.2.1",
     "@react-aria/focus": "^3.6.1",
-    "@react-aria/overlays": "3.9.1",
+    "@react-aria/overlays": "^3.12.1",
     "@react-aria/radio": "^3.4.0",
     "@react-aria/select": "^3.8.2",
     "@react-aria/ssr": "^3.3.0",
@@ -64,6 +64,7 @@
     "@react-aria/textfield": "^3.5.0",
     "@react-aria/visually-hidden": "^3.2.3",
     "polished": "^4.1.4",
+    "react-spring": "^9.0.0",
     "react-stately": "^3.19.0",
     "warning": "^4.0.3"
   },
@@ -83,5 +84,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "3d3b3b10f340dcb12bebcdb846672351d6d32ff3"
+  "gitHead": "0e44e748ea47f54d7ddf6717d0abfd631d8705d6"
 }

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

@@ -46,10 +46,10 @@ const DefaultStory = (args: ModalProps) => {
       <Button onClick={() => state.open()}>Open Modal</Button>
 
       <Modal
+        {...args}
         isOpen={state.isOpen}
         onClose={() => state.close()}
         isDismissable
-        {...args}
       >
         <ModalHeader />
         <ModalBody>
@@ -109,11 +109,11 @@ const FullBottomSheetStory = (args: ModalProps) => {
       <Button onClick={() => state.open()}>Open Modal</Button>
 
       <Modal
-        isOpen={state.isOpen}
-        onClose={() => state.close()}
+        {...args}
         isDismissable
         bottomSheet="full"
-        {...args}
+        isOpen={state.isOpen}
+        onClose={() => state.close()}
       >
         <ModalHeader />
         <ModalBody>
@@ -164,11 +164,11 @@ const BottomSheetStory = (args: ModalProps) => {
       <Button onClick={() => state.open()}>Open Modal</Button>
 
       <Modal
+        {...args}
         isOpen={state.isOpen}
         onClose={() => state.close()}
         bottomSheet
         isDismissable
-        {...args}
       >
         <ModalHeader />
         <ModalBody>

package/src/components/Modal/index.tsx

@@ -1,8 +1,8 @@
 import React, { useContext, useRef } from 'react'
 import {
-  OverlayContainer,
-  OverlayProps,
-  useModal,
+  AriaModalOverlayProps,
+  Overlay,
+  useModalOverlay,
   useOverlay,
   usePreventScroll,
 } from '@react-aria/overlays'
@@ -19,13 +19,15 @@ import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
 import IconButton from '../IconButton'
 
-export type ModalProps = OverlayProps &
+export type ModalProps = AriaModalOverlayProps &
   AriaDialogProps & {
     children: React.ReactNode
     zIndex?: number
     title: string
     size?: 'S' | 'M' | 'L'
     bottomSheet?: boolean | 'full'
+    isOpen: boolean
+    onClose: () => void
 
     // NOTICE: デフォルト値を与えてはならない
     // （たとえば document.body をデフォルト値にすると SSR できなくなる）
@@ -53,7 +55,25 @@ export default function Modal({
   const { overlayProps, underlayProps } = useOverlay(props, ref)
 
   usePreventScroll()
-  const { modalProps } = useModal()
+  const { modalProps } = useModalOverlay(
+    props,
+    {
+      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
+      },
+    },
+    ref
+  )
 
   const { dialogProps, titleProps } = useDialog(props, ref)
 
@@ -82,7 +102,7 @@ export default function Modal({
   return transition(
     ({ backgroundColor, transform }, item) =>
       item && (
-        <OverlayContainer portalContainer={portalContainer}>
+        <Overlay>
           <ModalBackground
             zIndex={zIndex}
             {...underlayProps}
@@ -113,7 +133,7 @@ export default function Modal({
               </ModalDialog>
             </FocusScope>
           </ModalBackground>
-        </OverlayContainer>
+        </Overlay>
       )
   )
 }