@charcoal-ui/react 4.0.0-beta.8 → 4.0.0-rc.0

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

@@ -1,34 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
-.c0 {
-  display: grid;
-  gap: 24px;
-}
-
-.c1 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c1::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c1::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
+exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
 <div
   data-dark={false}
 >
@@ -64,6 +36,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
       <div
         className="charcoal-modal-dialog"
         data-bottom-sheet={false}
+        data-size="M"
         onKeyDown={[Function]}
         role="dialog"
         style={Object {}}
@@ -83,10 +56,22 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
           className="charcoal-modal-body"
         >
           <div
-            className="c0"
+            style={
+              Object {
+                "display": "grid",
+                "gap": 24,
+              }
+            }
           >
             <div
-              className="charcoal-modal-align c1"
+              style={
+                Object {
+                  "color": "var(--charcoal-text2)",
+                  "fontSize": 14,
+                  "lineHeight": "22px",
+                  "padding": "0 16px",
+                }
+              }
             >
               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.
             </div>
@@ -291,35 +276,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Modal BottomSheet 1`] = `
-.c0 {
-  display: grid;
-  gap: 24px;
-}
-
-.c1 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c1::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c1::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
+exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
 <div
   data-dark={false}
 >
@@ -340,8 +297,6 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
       onPointerDown={[Function]}
       style={
         Object {
-          "backgroundColor": "rgba(0, 0, 0, 0)",
-          "overflow": "hidden",
           "zIndex": 10,
         }
       }
@@ -349,13 +304,10 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
       <div
         className="charcoal-modal-dialog"
         data-bottom-sheet={true}
+        data-size="M"
         onKeyDown={[Function]}
         role="dialog"
-        style={
-          Object {
-            "transform": " translateY(100%)",
-          }
-        }
+        style={Object {}}
         tabIndex={-1}
       >
         <div
@@ -372,10 +324,22 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
           className="charcoal-modal-body"
         >
           <div
-            className="c0"
+            style={
+              Object {
+                "display": "grid",
+                "gap": 24,
+              }
+            }
           >
             <div
-              className="charcoal-modal-align c1"
+              style={
+                Object {
+                  "color": "var(--charcoal-text2)",
+                  "fontSize": 14,
+                  "lineHeight": "22px",
+                  "padding": "0 16px",
+                }
+              }
             >
               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.
             </div>
@@ -383,6 +347,23 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
           <div
             className="charcoal-modal-buttons"
           >
+            <label
+              className="charcoal-checkbox__label"
+              htmlFor="test-id"
+            >
+              <input
+                checked={true}
+                className="charcoal-checkbox-input"
+                id="test-id"
+                onChange={[Function]}
+                type="checkbox"
+              />
+              <div
+                className="charcoal-checkbox__label_div"
+              >
+                test checkbox
+              </div>
+            </label>
             <button
               className="charcoal-button"
               data-full-width={true}
@@ -391,6 +372,13 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
             >
               削除する
             </button>
+            <button
+              className="charcoal-button"
+              data-full-width={true}
+              onClick={[Function]}
+            >
+              キャンセル
+            </button>
           </div>
         </div>
         <button
@@ -412,35 +400,7 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Modal Default 1`] = `
-.c0 {
-  display: grid;
-  gap: 24px;
-}
-
-.c1 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c1::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c1::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
+exports[`Storybook Tests > react/Modal > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -468,6 +428,7 @@ exports[`Storybook Tests react/Modal Default 1`] = `
       <div
         className="charcoal-modal-dialog"
         data-bottom-sheet={false}
+        data-size="M"
         onKeyDown={[Function]}
         role="dialog"
         style={Object {}}
@@ -487,10 +448,22 @@ exports[`Storybook Tests react/Modal Default 1`] = `
           className="charcoal-modal-body"
         >
           <div
-            className="c0"
+            style={
+              Object {
+                "display": "grid",
+                "gap": 24,
+              }
+            }
           >
             <div
-              className="charcoal-modal-align c1"
+              style={
+                Object {
+                  "color": "var(--charcoal-text2)",
+                  "fontSize": 14,
+                  "lineHeight": "22px",
+                  "padding": "0 16px",
+                }
+              }
             >
               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.
             </div>
@@ -695,35 +668,7 @@ exports[`Storybook Tests react/Modal Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
-.c0 {
-  display: grid;
-  gap: 24px;
-}
-
-.c1 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c1::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c1::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
+exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
 <div
   data-dark={false}
 >
@@ -744,8 +689,6 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
       onPointerDown={[Function]}
       style={
         Object {
-          "backgroundColor": "rgba(0, 0, 0, 0)",
-          "overflow": "hidden",
           "zIndex": 10,
         }
       }
@@ -753,13 +696,10 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
       <div
         className="charcoal-modal-dialog"
         data-bottom-sheet="full"
+        data-size="M"
         onKeyDown={[Function]}
         role="dialog"
-        style={
-          Object {
-            "transform": " translateY(100%)",
-          }
-        }
+        style={Object {}}
         tabIndex={-1}
       >
         <div
@@ -776,10 +716,22 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
           className="charcoal-modal-body"
         >
           <div
-            className="c0"
+            style={
+              Object {
+                "display": "grid",
+                "gap": 24,
+              }
+            }
           >
             <div
-              className="charcoal-modal-align c1"
+              style={
+                Object {
+                  "color": "var(--charcoal-text2)",
+                  "fontSize": 14,
+                  "lineHeight": "22px",
+                  "padding": "0 16px",
+                }
+              }
             >
               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.
             </div>
@@ -903,27 +855,7 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Modal InternalScroll 1`] = `
-.c0 {
-  overflow: auto;
-  max-height: calc( 100vh - 184px - 56px );
-}
-
-.c1 {
-  position: relative;
-}
-
-.c1::before {
-  content: '';
-  pointer-events: none;
-  border-top: 1px solid rgba(0,0,0,0.08);
-  position: absolute;
-  left: 0;
-  top: 0;
-  width: 100%;
-  height: 100%;
-}
-
+exports[`Storybook Tests > react/Modal > NotDismmissableStory 1`] = `
 <div
   data-dark={false}
 >
@@ -951,6 +883,7 @@ exports[`Storybook Tests react/Modal InternalScroll 1`] = `
       <div
         className="charcoal-modal-dialog"
         data-bottom-sheet={false}
+        data-size="M"
         onKeyDown={[Function]}
         role="dialog"
         style={Object {}}
@@ -970,114 +903,22 @@ exports[`Storybook Tests react/Modal InternalScroll 1`] = `
           className="charcoal-modal-body"
         >
           <div
-            className="c0"
+            style={
+              Object {
+                "display": "grid",
+                "gap": 24,
+              }
+            }
           >
             <div
               style={
                 Object {
-                  "background": "linear-gradient(#e66465, #9198e5)",
-                  "height": 1000,
+                  "color": "var(--charcoal-text2)",
+                  "fontSize": 14,
+                  "lineHeight": "22px",
+                  "padding": "0 16px",
                 }
               }
-            />
-          </div>
-          <div
-            className="charcoal-modal-buttons c1"
-          >
-            <button
-              className="charcoal-button"
-              data-full-width={true}
-              onClick={[Function]}
-            >
-              Close
-            </button>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
-.c0 {
-  display: grid;
-  gap: 24px;
-}
-
-.c1 {
-  color: var(--charcoal-text2);
-  font-size: 14px;
-  line-height: 22px;
-  display: flow-root;
-}
-
-.c1::before {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-top: -4px;
-}
-
-.c1::after {
-  display: block;
-  width: 0;
-  height: 0;
-  content: '';
-  margin-bottom: -4px;
-}
-
-<div
-  data-dark={false}
->
-  <div
-    aria-hidden={null}
-    data-overlay-container={true}
-  >
-    <button
-      className="charcoal-button"
-      onClick={[Function]}
-    >
-      Open Modal
-    </button>
-    <div
-      className="charcoal-modal-background"
-      data-bottom-sheet={false}
-      onClick={[Function]}
-      onPointerDown={[Function]}
-      style={
-        Object {
-          "zIndex": 10,
-        }
-      }
-    >
-      <div
-        className="charcoal-modal-dialog"
-        data-bottom-sheet={false}
-        onKeyDown={[Function]}
-        role="dialog"
-        style={Object {}}
-        tabIndex={-1}
-      >
-        <div
-          className="charcoal-modal-header-root"
-          data-bottom-sheet={false}
-        >
-          <div
-            className="charcoal-modal-header-title"
-          >
-            react/Title
-          </div>
-        </div>
-        <div
-          className="charcoal-modal-body"
-        >
-          <div
-            className="c0"
-          >
-            <div
-              className="charcoal-modal-align c1"
             >
               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.
             </div>

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

@@ -8,10 +8,9 @@ import {
   ModalButtons,
   ModalHeader,
 } from './ModalPlumbing'
-import styled from 'styled-components'
-import { theme } from '../../styled'
 import TextField from '../TextField'
 import DropdownSelector from '../DropdownSelector'
+import Checkbox from '../Checkbox'
 import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -106,14 +105,31 @@ const M = (props: ModalProps) => {
   )
 }
 
-const ModalVStack = styled.div`
-  display: grid;
-  gap: 24px;
-`
+const ModalVStack = (props: Omit<React.ComponentProps<'div'>, 'style'>) => {
+  return (
+    <div
+      style={{
+        display: 'grid',
+        gap: 24,
+      }}
+      {...props}
+    />
+  )
+}
 
-const StyledModalText = styled(ModalAlign)`
-  ${theme((o) => [o.font.text2, o.typography(14)])}
-`
+const StyledModalText = (props: Omit<React.ComponentProps<'div'>, 'style'>) => {
+  return (
+    <div
+      style={{
+        fontSize: 14,
+        lineHeight: '22px',
+        padding: '0 16px',
+        color: 'var(--charcoal-text2)',
+      }}
+      {...props}
+    />
+  )
+}
 
 export const Default: StoryObj<typeof Modal> = {}
 
@@ -201,6 +217,7 @@ export const BottomSheet: StoryObj<typeof Modal> = {
               </StyledModalText>
             </ModalVStack>
             <ModalButtons>
+              <Checkbox checked>test checkbox</Checkbox>
               <Button variant="Danger" onClick={() => state.close()} fullWidth>
                 削除する
               </Button>
@@ -265,5 +282,3 @@ export const BackgroundScroll: StoryObj<typeof Modal> = {
     )
   },
 }
-
-export { InternalScrollStory as InternalScroll } from './__stories__/InternalScrollStory'

package/src/components/Modal/index.tsx

@@ -1,17 +1,17 @@
 import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
 import { AriaModalOverlayProps, Overlay } from '@react-aria/overlays'
-import { useTheme } from 'styled-components'
 import type { AriaDialogProps } from '@react-types/dialog'
-import { maxWidth } from '@charcoal-ui/utils'
-import { useMedia } from '@charcoal-ui/styled'
 import { animated, useTransition, easings } from 'react-spring'
 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 { useCharcoalModalOverlay } from './useCustomModalOverlay'
+import {
+  useCharcoalModalOverlay,
+  useWindowWidth,
+} from './useCustomModalOverlay'
 
 import './index.css'
 
@@ -95,8 +95,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
     ref
   )
 
-  const theme = useTheme()
-  const isMobile = useMedia(maxWidth(theme.breakpoint.screen1)) ?? false
+  const isMobile = (useWindowWidth() ?? Infinity) < 744
   const transitionEnabled = isMobile && bottomSheet !== false
   const showDismiss = !isMobile || bottomSheet !== true
 

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -46,3 +46,23 @@ export function useCharcoalModalOverlay(
     underlayProps,
   }
 }
+
+function isWindowDefined() {
+  return typeof window !== 'undefined'
+}
+
+export function useWindowWidth() {
+  const [width, setWidth] = React.useState(
+    isWindowDefined() ? window.innerWidth : null
+  )
+  React.useEffect(() => {
+    const handleResize = () => {
+      setWidth(window.innerWidth)
+    }
+    window.addEventListener('resize', handleResize)
+    return () => {
+      window.removeEventListener('resize', handleResize)
+    }
+  })
+  return width
+}