@charcoal-ui/react 4.0.0-beta.11 → 4.0.0-beta.13

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
+exports[`Storybook Tests > react/Modal > BackgroundScroll 1`] = `
 <div
   data-dark={false}
 >
@@ -10,7 +10,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
   >
     <div
       style={
-        {
+        Object {
           "height": 1024,
         }
       }
@@ -28,7 +28,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
       onClick={[Function]}
       onPointerDown={[Function]}
       style={
-        {
+        Object {
           "zIndex": 10,
         }
       }
@@ -39,7 +39,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
         data-size="M"
         onKeyDown={[Function]}
         role="dialog"
-        style={{}}
+        style={Object {}}
         tabIndex={-1}
       >
         <div
@@ -57,7 +57,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
         >
           <div
             style={
-              {
+              Object {
                 "display": "grid",
                 "gap": 24,
               }
@@ -65,7 +65,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
           >
             <div
               style={
-                {
+                Object {
                   "color": "var(--charcoal-text2)",
                   "fontSize": 14,
                   "lineHeight": "22px",
@@ -180,7 +180,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
                 <div
                   aria-hidden="true"
                   style={
-                    {
+                    Object {
                       "border": 0,
                       "clip": "rect(0 0 0 0)",
                       "clipPath": "inset(50%)",
@@ -276,7 +276,7 @@ exports[`Storybook Tests react/Modal BackgroundScroll 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Modal BottomSheet 1`] = `
+exports[`Storybook Tests > react/Modal > BottomSheet 1`] = `
 <div
   data-dark={false}
 >
@@ -296,7 +296,7 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
       onClick={[Function]}
       onPointerDown={[Function]}
       style={
-        {
+        Object {
           "zIndex": 10,
         }
       }
@@ -307,7 +307,7 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
         data-size="M"
         onKeyDown={[Function]}
         role="dialog"
-        style={{}}
+        style={Object {}}
         tabIndex={-1}
       >
         <div
@@ -325,7 +325,7 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
         >
           <div
             style={
-              {
+              Object {
                 "display": "grid",
                 "gap": 24,
               }
@@ -333,7 +333,7 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
           >
             <div
               style={
-                {
+                Object {
                   "color": "var(--charcoal-text2)",
                   "fontSize": 14,
                   "lineHeight": "22px",
@@ -347,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}
@@ -383,7 +400,7 @@ exports[`Storybook Tests react/Modal BottomSheet 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Modal Default 1`] = `
+exports[`Storybook Tests > react/Modal > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -403,7 +420,7 @@ exports[`Storybook Tests react/Modal Default 1`] = `
       onClick={[Function]}
       onPointerDown={[Function]}
       style={
-        {
+        Object {
           "zIndex": 10,
         }
       }
@@ -414,7 +431,7 @@ exports[`Storybook Tests react/Modal Default 1`] = `
         data-size="M"
         onKeyDown={[Function]}
         role="dialog"
-        style={{}}
+        style={Object {}}
         tabIndex={-1}
       >
         <div
@@ -432,7 +449,7 @@ exports[`Storybook Tests react/Modal Default 1`] = `
         >
           <div
             style={
-              {
+              Object {
                 "display": "grid",
                 "gap": 24,
               }
@@ -440,7 +457,7 @@ exports[`Storybook Tests react/Modal Default 1`] = `
           >
             <div
               style={
-                {
+                Object {
                   "color": "var(--charcoal-text2)",
                   "fontSize": 14,
                   "lineHeight": "22px",
@@ -555,7 +572,7 @@ exports[`Storybook Tests react/Modal Default 1`] = `
                 <div
                   aria-hidden="true"
                   style={
-                    {
+                    Object {
                       "border": 0,
                       "clip": "rect(0 0 0 0)",
                       "clipPath": "inset(50%)",
@@ -651,7 +668,7 @@ exports[`Storybook Tests react/Modal Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
+exports[`Storybook Tests > react/Modal > FullBottomSheet 1`] = `
 <div
   data-dark={false}
 >
@@ -671,7 +688,7 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
       onClick={[Function]}
       onPointerDown={[Function]}
       style={
-        {
+        Object {
           "zIndex": 10,
         }
       }
@@ -682,7 +699,7 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
         data-size="M"
         onKeyDown={[Function]}
         role="dialog"
-        style={{}}
+        style={Object {}}
         tabIndex={-1}
       >
         <div
@@ -700,7 +717,7 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
         >
           <div
             style={
-              {
+              Object {
                 "display": "grid",
                 "gap": 24,
               }
@@ -708,7 +725,7 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
           >
             <div
               style={
-                {
+                Object {
                   "color": "var(--charcoal-text2)",
                   "fontSize": 14,
                   "lineHeight": "22px",
@@ -838,7 +855,7 @@ exports[`Storybook Tests react/Modal FullBottomSheet 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
+exports[`Storybook Tests > react/Modal > NotDismmissableStory 1`] = `
 <div
   data-dark={false}
 >
@@ -858,7 +875,7 @@ exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
       onClick={[Function]}
       onPointerDown={[Function]}
       style={
-        {
+        Object {
           "zIndex": 10,
         }
       }
@@ -869,7 +886,7 @@ exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
         data-size="M"
         onKeyDown={[Function]}
         role="dialog"
-        style={{}}
+        style={Object {}}
         tabIndex={-1}
       >
         <div
@@ -887,7 +904,7 @@ exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
         >
           <div
             style={
-              {
+              Object {
                 "display": "grid",
                 "gap": 24,
               }
@@ -895,7 +912,7 @@ exports[`Storybook Tests react/Modal NotDismmissableStory 1`] = `
           >
             <div
               style={
-                {
+                Object {
                   "color": "var(--charcoal-text2)",
                   "fontSize": 14,
                   "lineHeight": "22px",

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

@@ -10,6 +10,7 @@ import {
 } from './ModalPlumbing'
 import TextField from '../TextField'
 import DropdownSelector from '../DropdownSelector'
+import Checkbox from '../Checkbox'
 import DropdownMenuItem from '../DropdownSelector/DropdownMenuItem'
 import { Meta, StoryObj } from '@storybook/react'
 
@@ -216,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>

package/src/components/Modal/index.tsx

@@ -95,7 +95,7 @@ const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
     ref
   )
 
-  const isMobile = useWindowWidth() < 744
+  const isMobile = (useWindowWidth() ?? Infinity) < 744
   const transitionEnabled = isMobile && bottomSheet !== false
   const showDismiss = !isMobile || bottomSheet !== true
 

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -47,8 +47,14 @@ export function useCharcoalModalOverlay(
   }
 }
 
+function isWindowDefined() {
+  return typeof window !== 'undefined'
+}
+
 export function useWindowWidth() {
-  const [width, setWidth] = React.useState(window.innerWidth)
+  const [width, setWidth] = React.useState(
+    isWindowDefined() ? window.innerWidth : null
+  )
   React.useEffect(() => {
     const handleResize = () => {
       setWidth(window.innerWidth)

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

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Radio Default 1`] = `
+exports[`Storybook Tests > react/Radio > Default 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "display": "flex",
         "flexDirection": "column",
         "gap": 24,
@@ -87,13 +87,13 @@ exports[`Storybook Tests react/Radio Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Radio Disabled 1`] = `
+exports[`Storybook Tests > react/Radio > Disabled 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "display": "flex",
         "flexDirection": "column",
         "gap": 24,
@@ -175,13 +175,13 @@ exports[`Storybook Tests react/Radio Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Radio Invalid 1`] = `
+exports[`Storybook Tests > react/Radio > Invalid 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "display": "flex",
         "flexDirection": "column",
         "gap": 24,
@@ -263,13 +263,13 @@ exports[`Storybook Tests react/Radio Invalid 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
+exports[`Storybook Tests > react/Radio > PartialDisabled 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "display": "flex",
         "flexDirection": "column",
         "gap": 24,
@@ -350,13 +350,13 @@ exports[`Storybook Tests react/Radio PartialDisabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Radio Readonly 1`] = `
+exports[`Storybook Tests > react/Radio > Readonly 1`] = `
 <div
   data-dark={false}
 >
   <div
     style={
-      {
+      Object {
         "display": "flex",
         "flexDirection": "column",
         "gap": 24,

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

@@ -1,6 +1,7 @@
 import { fireEvent, render, screen } from '@testing-library/react'
 import Radio from '.'
 import { RadioGroup } from './RadioGroup'
+import { vi } from 'vitest'
 
 describe('Radio', () => {
   describe('development mode', () => {
@@ -11,7 +12,7 @@ describe('Radio', () => {
     describe('<Radio> is not surrounded by <RadioGroup>', () => {
       beforeEach(() => {
         // eslint-disable-next-line no-console
-        console.error = jest.fn()
+        console.error = vi.fn()
 
         render(<Radio value="option1" />)
       })
@@ -28,7 +29,7 @@ describe('Radio', () => {
   describe('value is the first option', () => {
     let option1: HTMLInputElement
     let option2: HTMLInputElement
-    const handleChange = jest.fn()
+    const handleChange = vi.fn()
 
     beforeEach(() => {
       render(<TestComponent value="option1" onChange={handleChange} />)
@@ -103,7 +104,7 @@ describe('Radio', () => {
 
 function TestComponent({
   value,
-  onChange = jest.fn(),
+  onChange = vi.fn(),
   radioGroupDisabled = false,
   readonly = false,
   invalid = false,

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/SegmentedControl ObjectSegments 1`] = `
+exports[`Storybook Tests > react/SegmentedControl > ObjectSegments 1`] = `
 <div
   data-dark={false}
 >
@@ -140,7 +140,7 @@ exports[`Storybook Tests react/SegmentedControl ObjectSegments 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/SegmentedControl StringSegments 1`] = `
+exports[`Storybook Tests > react/SegmentedControl > StringSegments 1`] = `
 <div
   data-dark={false}
 >

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/Switch Checked 1`] = `
+exports[`Storybook Tests > react/Switch > Checked 1`] = `
 <div
   data-dark={false}
 >
@@ -19,7 +19,7 @@ exports[`Storybook Tests react/Switch Checked 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Switch Default 1`] = `
+exports[`Storybook Tests > react/Switch > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -37,7 +37,7 @@ exports[`Storybook Tests react/Switch Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Switch Disabled 1`] = `
+exports[`Storybook Tests > react/Switch > Disabled 1`] = `
 <div
   data-dark={false}
 >
@@ -67,7 +67,7 @@ exports[`Storybook Tests react/Switch Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/Switch Label 1`] = `
+exports[`Storybook Tests > react/Switch > Label 1`] = `
 <div
   data-dark={false}
 >

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests react/TagItem Active 1`] = `
+exports[`Storybook Tests > react/TagItem > Active 1`] = `
 <div
   data-dark={false}
 >
@@ -10,7 +10,7 @@ exports[`Storybook Tests react/TagItem Active 1`] = `
     data-size="M"
     data-state="active"
     style={
-      {
+      Object {
         "--charcoal-tag-item-bg": "#7ACCB1",
       }
     }
@@ -33,7 +33,7 @@ exports[`Storybook Tests react/TagItem Active 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem BGColor 1`] = `
+exports[`Storybook Tests > react/TagItem > BGColor 1`] = `
 <div
   data-dark={false}
 >
@@ -43,7 +43,7 @@ exports[`Storybook Tests react/TagItem BGColor 1`] = `
     data-size="M"
     data-state="default"
     style={
-      {
+      Object {
         "--charcoal-tag-item-bg": "var(--charcoal-brand)",
       }
     }
@@ -63,7 +63,7 @@ exports[`Storybook Tests react/TagItem BGColor 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem BGImage 1`] = `
+exports[`Storybook Tests > react/TagItem > BGImage 1`] = `
 <div
   data-dark={false}
 >
@@ -73,7 +73,7 @@ exports[`Storybook Tests react/TagItem BGImage 1`] = `
     data-size="M"
     data-state="default"
     style={
-      {
+      Object {
         "--charcoal-tag-item-bg": "url(data:image/png;base64,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)",
       }
     }
@@ -93,7 +93,7 @@ exports[`Storybook Tests react/TagItem BGImage 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem Default 1`] = `
+exports[`Storybook Tests > react/TagItem > Default 1`] = `
 <div
   data-dark={false}
 >
@@ -103,7 +103,7 @@ exports[`Storybook Tests react/TagItem Default 1`] = `
     data-size="M"
     data-state="default"
     style={
-      {
+      Object {
         "--charcoal-tag-item-bg": "#7ACCB1",
       }
     }
@@ -123,7 +123,7 @@ exports[`Storybook Tests react/TagItem Default 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem Disabled 1`] = `
+exports[`Storybook Tests > react/TagItem > Disabled 1`] = `
 <div
   data-dark={false}
 >
@@ -134,7 +134,7 @@ exports[`Storybook Tests react/TagItem Disabled 1`] = `
     data-state="default"
     disabled={true}
     style={
-      {
+      Object {
         "--charcoal-tag-item-bg": "#7ACCB1",
       }
     }
@@ -154,7 +154,7 @@ exports[`Storybook Tests react/TagItem Disabled 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem InActive 1`] = `
+exports[`Storybook Tests > react/TagItem > InActive 1`] = `
 <div
   data-dark={false}
 >
@@ -164,7 +164,7 @@ exports[`Storybook Tests react/TagItem InActive 1`] = `
     data-size="M"
     data-state="inactive"
     style={
-      {
+      Object {
         "--charcoal-tag-item-bg": "#7ACCB1",
       }
     }
@@ -184,7 +184,7 @@ exports[`Storybook Tests react/TagItem InActive 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem Small 1`] = `
+exports[`Storybook Tests > react/TagItem > Small 1`] = `
 <div
   data-dark={false}
 >
@@ -194,7 +194,7 @@ exports[`Storybook Tests react/TagItem Small 1`] = `
     data-size="S"
     data-state="default"
     style={
-      {
+      Object {
         "--charcoal-tag-item-bg": "#7ACCB1",
       }
     }
@@ -214,7 +214,7 @@ exports[`Storybook Tests react/TagItem Small 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests react/TagItem TranslatedLabel 1`] = `
+exports[`Storybook Tests > react/TagItem > TranslatedLabel 1`] = `
 <div
   data-dark={false}
 >
@@ -224,7 +224,7 @@ exports[`Storybook Tests react/TagItem TranslatedLabel 1`] = `
     data-size="M"
     data-state="default"
     style={
-      {
+      Object {
         "--charcoal-tag-item-bg": "#7ACCB1",
       }
     }