@charcoal-ui/react 3.10.1-beta.1 → 3.11.0

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

@@ -1,103 +1,75 @@
 import { action } from '@storybook/addon-actions'
 import Checkbox from '.'
 import { Meta, StoryObj } from '@storybook/react'
+import { useCallback, useState } from 'react'
+import styled from 'styled-components'
 
 export default {
   title: 'Checkbox',
   component: Checkbox,
 } as Meta<typeof Checkbox>
 
-export const Labelled: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
-    invalid: false,
-  },
-  render: (props) => {
-    return (
-      <div>
-        <div style={{ marginBottom: '1em' }}>
-          <Checkbox
-            {...props}
-            name="labelled"
-            label="label"
-            onBlur={action('blur')}
-            onClick={action('click')}
-            onChange={action('change')}
-            onFocus={action('focus')}
-          >
-            同意する
-          </Checkbox>
-        </div>
-
-        <div>
-          <Checkbox
-            {...props}
-            name="labelled"
-            label="label"
-            onBlur={action('blur')}
-            onClick={action('click')}
-            onChange={action('change')}
-            onFocus={action('focus')}
-          >
-            <span style={{ width: 200, display: 'block' }}>
-              同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
-            </span>
-          </Checkbox>
-        </div>
-      </div>
-    )
-  },
-}
+const InnerText = styled.span`
+  user-select: none;
+`
 
-export const Invalid: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
-  },
+export const Default: StoryObj<typeof Checkbox> = {
   render: (props) => {
+    const [checked, setChecked] = useState(props.checked)
+    const handleChange = useCallback((isSelected: boolean) => {
+      setChecked(isSelected)
+      action('change')(isSelected)
+    }, [])
+
     return (
       <Checkbox
         {...props}
+        checked={checked ?? props.checked}
         name="labelled"
         label="label"
-        invalid
         onBlur={action('blur')}
         onClick={action('click')}
-        onChange={action('change')}
+        onChange={handleChange}
         onFocus={action('focus')}
-      >
-        同意する
+      />
+    )
+  },
+}
+
+export const Label: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return (
+      <Checkbox name="labelled">
+        <InnerText>同意する</InnerText>
       </Checkbox>
     )
   },
 }
 
-export const Unlabelled: StoryObj<typeof Checkbox> = {
-  args: {
-    checked: false,
-    defaultChecked: false,
-    disabled: false,
-    readonly: false,
-    invalid: false,
+export const Checked: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox name="labelled" label="同意する" checked />
   },
-  render: (props) => {
+}
+
+export const Disabled: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox name="labelled" label="同意する" disabled />
+  },
+}
+
+export const ReadOnly: StoryObj<typeof Checkbox> = {
+  render: () => {
+    return <Checkbox name="labelled" label="同意する" readonly />
+  },
+}
+
+export const Invalid: StoryObj<typeof Checkbox> = {
+  render: () => {
     return (
-      <div>
-        <Checkbox
-          {...props}
-          name="unlabelled"
-          label="label"
-          onBlur={action('blur')}
-          onClick={action('click')}
-          onChange={action('change')}
-          onFocus={action('focus')}
-        />
-      </div>
+      <Checkbox name="labelled" invalid>
+        同意する
+      </Checkbox>
     )
   },
 }

package/src/components/Checkbox/index.tsx

@@ -46,6 +46,7 @@ const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
         // children がいない場合は aria-label をつけないといけない
         'aria-label': 'children' in props ? undefined : props.label,
         isDisabled: props.disabled,
+        isReadOnly: props.readonly,
       }),
       [invalid, props]
     )

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

@@ -1,5 +1,4 @@
-import { RefObject, useContext, useRef } from 'react'
-import { ReactNode } from 'react'
+import { RefObject, useContext, useRef, ReactNode } from 'react'
 import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
 import styled from 'styled-components'
 import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'

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

@@ -140,6 +140,7 @@ exports[`Storybook Tests DropdownSelector AssistiveText 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -301,6 +302,7 @@ exports[`Storybook Tests DropdownSelector CustomChildren 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="bold"
         >
@@ -465,6 +467,7 @@ exports[`Storybook Tests DropdownSelector Default 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value=""
         >
@@ -622,6 +625,7 @@ exports[`Storybook Tests DropdownSelector Disabled 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -779,6 +783,7 @@ exports[`Storybook Tests DropdownSelector DisabledItem 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="2"
         >
@@ -1052,6 +1057,7 @@ exports[`Storybook Tests DropdownSelector InFormTag 1`] = `
       >
         <select
           name="exampleOption"
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -1811,6 +1817,7 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
                 }
               >
                 <select
+                  onChange={[Function]}
                   tabIndex={-1}
                   value="1"
                 >
@@ -1987,6 +1994,7 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
                 }
               >
                 <select
+                  onChange={[Function]}
                   tabIndex={-1}
                   value="2"
                 >
@@ -2165,6 +2173,7 @@ exports[`Storybook Tests DropdownSelector Invalid 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -2351,6 +2360,7 @@ exports[`Storybook Tests DropdownSelector InvalidAssistiveText 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -2615,6 +2625,7 @@ exports[`Storybook Tests DropdownSelector Label 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -2771,6 +2782,7 @@ exports[`Storybook Tests DropdownSelector LongNames 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -3067,6 +3079,7 @@ exports[`Storybook Tests DropdownSelector RequiredText 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -3223,6 +3236,7 @@ exports[`Storybook Tests DropdownSelector Section 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="banana"
         >
@@ -3504,6 +3518,7 @@ exports[`Storybook Tests DropdownSelector SubLabel 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >

package/src/components/DropdownSelector/index.tsx

@@ -1,4 +1,4 @@
-import { ReactNode, useState, useRef, useMemo } from 'react'
+import React, { ReactNode, useState, useRef, useMemo, useCallback } from 'react'
 import styled, { css } from 'styled-components'
 import { disabledSelector } from '@charcoal-ui/utils'
 import Icon from '../Icon'
@@ -31,7 +31,10 @@ export type DropdownSelectorProps = {
 
 const defaultRequiredText = '*必須'
 
-export default function DropdownSelector(props: DropdownSelectorProps) {
+export default function DropdownSelector({
+  onChange,
+  ...props
+}: DropdownSelectorProps) {
   const triggerRef = useRef<HTMLButtonElement>(null)
   const [isOpen, setIsOpen] = useState(false)
   const preview = findPreviewRecursive(props.children, props.value)
@@ -45,6 +48,13 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
 
   const { visuallyHiddenProps } = useVisuallyHidden()
 
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLSelectElement>) => {
+      onChange(e.target.value)
+    },
+    [onChange]
+  )
+
   return (
     <DropdownSelectorRoot aria-disabled={props.disabled}>
       {props.showLabel === true && (
@@ -56,7 +66,12 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         />
       )}
       <div {...visuallyHiddenProps} aria-hidden="true">
-        <select name={props.name} value={props.value} tabIndex={-1}>
+        <select
+          name={props.name}
+          value={props.value}
+          onChange={handleChange}
+          tabIndex={-1}
+        >
           {propsArray.map((itemProps) => {
             return (
               <option
@@ -96,7 +111,7 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
           <MenuList
             value={props.value}
             onChange={(v) => {
-              props.onChange(v)
+              onChange(v)
               setIsOpen(false)
             }}
           >

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests IconButton DefaultM 1`] = `
+exports[`Storybook Tests IconButton Default 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -103,10 +103,10 @@ exports[`Storybook Tests IconButton DefaultM 1`] = `
 >
   <button
     className="c0 c1"
-    title="close"
+    title="add"
   >
     <pixiv-icon
-      name="24/Close"
+      name="16/Add"
     />
   </button>
 </div>
@@ -209,16 +209,15 @@ exports[`Storybook Tests IconButton IsActive 1`] = `
 >
   <button
     className="c0 c1"
-    title="close"
   >
     <pixiv-icon
-      name="24/Close"
+      name="16/Add"
     />
   </button>
 </div>
 `;
 
-exports[`Storybook Tests IconButton OverlayM 1`] = `
+exports[`Storybook Tests IconButton Overlay 1`] = `
 .c0 {
   cursor: pointer;
   -webkit-appearance: none;
@@ -321,10 +320,9 @@ exports[`Storybook Tests IconButton OverlayM 1`] = `
 >
   <button
     className="c0 c1"
-    title="close"
   >
     <pixiv-icon
-      name="24/Close"
+      name="16/Add"
     />
   </button>
 </div>

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

@@ -1,57 +1,34 @@
 import '@charcoal-ui/icons'
 import IconButton from '.'
-import type { KnownIconType } from '@charcoal-ui/icons'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'IconButton',
   component: IconButton,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'inline-radio',
-        options: ['Default', 'Overlay'],
-      },
-    },
-    size: {
-      control: {
-        type: 'inline-radio',
-        options: ['M', 'S', 'XS'],
-      },
-    },
-    isActive: {
-      control: {
-        type: 'boolean',
-      },
-    },
-  },
-  render: (props) => {
-    const { size } = props
-    const icon: keyof KnownIconType = {
-      XS: '16/Remove' as const,
-      S: '24/Close' as const,
-      M: '24/Close' as const,
-    }[size ?? 'M']
-    return <IconButton title="close" {...props} icon={icon} />
+  parameters: {
+    layout: 'centered',
   },
 } as Meta<typeof IconButton>
 
-export const DefaultM: StoryObj<typeof IconButton> = {
+export const Default: StoryObj<typeof IconButton> = {
   args: {
-    variant: 'Default',
-    size: 'M',
+    icon: '16/Add',
+  },
+  render: (props) => {
+    const title = props.icon.split('/').at(1)?.toLocaleLowerCase()
+
+    return <IconButton title={title} {...props} />
   },
 }
 
 export const IsActive: StoryObj<typeof IconButton> = {
-  args: {
-    isActive: true,
+  render: () => {
+    return <IconButton icon="16/Add" isActive />
   },
 }
 
-export const OverlayM: StoryObj<typeof IconButton> = {
-  args: {
-    variant: 'Overlay',
-    size: 'M',
+export const Overlay: StoryObj<typeof IconButton> = {
+  render: () => {
+    return <IconButton icon="16/Add" variant="Overlay" />
   },
 }

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

@@ -34,7 +34,145 @@ exports[`Storybook Tests LoadingSpinner Default 1`] = `
   data-dark={false}
 >
   <div
-    className="c0 basic"
+    className="c0"
+    role="progressbar"
+    size={48}
+  >
+    <div
+      className="c1"
+      role="presentation"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests LoadingSpinner Padding 1`] = `
+.c0 {
+  box-sizing: content-box;
+  margin: auto;
+  padding: 24px;
+  border-radius: 8px;
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-background1);
+}
+
+.c1 {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  -webkit-animation: cNZOgq 1s both ease-out;
+  animation: cNZOgq 1s both ease-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.c1[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+    role="progressbar"
+    size={48}
+  >
+    <div
+      className="c1"
+      role="presentation"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests LoadingSpinner Size 1`] = `
+.c0 {
+  box-sizing: content-box;
+  margin: auto;
+  padding: 16px;
+  border-radius: 8px;
+  font-size: 128px;
+  width: 128px;
+  height: 128px;
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-background1);
+}
+
+.c1 {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  -webkit-animation: cNZOgq 1s both ease-out;
+  animation: cNZOgq 1s both ease-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.c1[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
+    role="progressbar"
+    size={128}
+  >
+    <div
+      className="c1"
+      role="presentation"
+    />
+  </div>
+</div>
+`;
+
+exports[`Storybook Tests LoadingSpinner Transparent 1`] = `
+.c0 {
+  box-sizing: content-box;
+  margin: auto;
+  padding: 16px;
+  border-radius: 8px;
+  font-size: 48px;
+  width: 48px;
+  height: 48px;
+  opacity: 0.84;
+  color: var(--charcoal-text4);
+  background-color: var(--charcoal-transparent);
+}
+
+.c1 {
+  width: 1em;
+  height: 1em;
+  border-radius: 1em;
+  background-color: currentColor;
+  -webkit-animation: cNZOgq 1s both ease-out;
+  animation: cNZOgq 1s both ease-out;
+  -webkit-animation-iteration-count: infinite;
+  animation-iteration-count: infinite;
+}
+
+.c1[data-reset-animation] {
+  -webkit-animation: none;
+  animation: none;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    className="c0"
     role="progressbar"
     size={48}
   >

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

@@ -4,13 +4,24 @@ import LoadingSpinner from '.'
 export default {
   title: 'LoadingSpinner',
   component: LoadingSpinner,
-  args: {
-    size: 48,
-    padding: 16,
-    transparent: false,
-    className: 'basic',
-  },
   tags: ['skip-test'],
+  parameters: {
+    layout: 'centered',
+  },
 } as Meta<typeof LoadingSpinner>
 
-export const Default: StoryObj<typeof LoadingSpinner> = {}
+export const Default: StoryObj<typeof LoadingSpinner> = {
+  render: (props) => <LoadingSpinner {...props} />,
+}
+
+export const Transparent: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner transparent />,
+}
+
+export const Size: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner size={128} />,
+}
+
+export const Padding: StoryObj<typeof LoadingSpinner> = {
+  render: () => <LoadingSpinner padding={24} />,
+}

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

@@ -881,6 +881,7 @@ exports[`Storybook Tests Modal BackgroundScroll 1`] = `
                   }
                 >
                   <select
+                    onChange={[Function]}
                     tabIndex={-1}
                     value="10"
                   >
@@ -2305,6 +2306,7 @@ exports[`Storybook Tests Modal Default 1`] = `
                   }
                 >
                   <select
+                    onChange={[Function]}
                     tabIndex={-1}
                     value="10"
                   >

package/src/components/Modal/index.tsx

@@ -2,7 +2,7 @@ import { useContext, forwardRef, memo } from 'react'
 import * as React from 'react'
 import { AriaModalOverlayProps, Overlay } from '@react-aria/overlays'
 import styled, { css, useTheme } from 'styled-components'
-import { AriaDialogProps } from '@react-types/dialog'
+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'

package/src/components/Modal/useCustomModalOverlay.tsx

@@ -5,8 +5,8 @@ import {
   ariaHideOutside,
   useOverlay,
   useOverlayFocusContain,
-  usePreventScroll,
 } from '@react-aria/overlays'
+import { usePreventScroll } from '../DropdownSelector/Popover/usePreventScroll'
 
 /**
  * We want to enable scrolling on the modal background,
@@ -28,9 +28,10 @@ export function useCharcoalModalOverlay(
     ref
   )
 
-  usePreventScroll({
-    isDisabled: !state.isOpen,
-  })
+  usePreventScroll(
+    typeof document !== 'undefined' ? document.body : null,
+    state.isOpen
+  )
 
   useOverlayFocusContain()