@charcoal-ui/react 3.10.1-beta.0 → 3.10.1

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

@@ -1,190 +1,43 @@
-import { useRef } from 'react'
-import { ClickableElement } from '../Clickable'
-import Button, { ButtonProps } from '.'
+import Button from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Button',
   component: Button,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'inline-radio',
-        options: ['Primary', 'Default', 'Overlay', 'Danger', 'Navigation'],
-      },
-    },
-    size: {
-      control: {
-        type: 'inline-radio',
-        options: ['S', 'M'],
-      },
-    },
-  },
-  render: (args) => <Button {...args}>Button</Button>,
 } as Meta<typeof Button>
 
-export const Default: StoryObj<typeof Button> = {}
+export const Default: StoryObj<typeof Button> = {
+  render: (args) => <Button {...args}>Button</Button>,
+}
 
 export const Primary: StoryObj<typeof Button> = {
-  args: {
-    variant: 'Primary',
-  },
+  render: () => <Button variant="Primary">Primary</Button>,
 }
 
 export const Navigation: StoryObj<typeof Button> = {
-  args: {
-    variant: 'Navigation',
-  },
+  render: () => <Button variant="Navigation">Navigation</Button>,
 }
 
 export const Overlay: StoryObj<typeof Button> = {
-  args: {
-    variant: 'Overlay',
-  },
+  render: () => <Button variant="Overlay">Overlay</Button>,
 }
 
 export const Danger: StoryObj<typeof Button> = {
-  args: {
-    variant: 'Danger',
-  },
+  render: () => <Button variant="Danger">Danger</Button>,
 }
 
 export const Small: StoryObj<typeof Button> = {
-  args: {
-    size: 'S',
-  },
+  render: () => <Button size="S">Small</Button>,
 }
 
-export const Fixed: StoryObj<typeof Button> = {
-  args: {
-    fullWidth: true,
-  },
+export const FullWidth: StoryObj<typeof Button> = {
+  render: () => <Button fullWidth>Full width</Button>,
 }
 
 export const Disabled: StoryObj<typeof Button> = {
-  args: {
-    disabled: true,
-  },
-}
-
-export const Active: StoryObj<typeof Button> = {
-  args: {
-    isActive: true,
-  },
-}
-
-export const Link: StoryObj<typeof Button> = {
-  args: {
-    to: '#',
-  },
+  render: () => <Button disabled>Disabled</Button>,
 }
 
-export const Nihongo: StoryObj<typeof Button> = {
-  render: (args) => <Button {...args}>日本語だよ</Button>,
-}
-
-export const Focus: StoryObj<typeof Button> = {
-  render: function Render(args) {
-    const ref = useRef<ClickableElement>(null)
-    const focus = () => ref.current?.focus()
-    return (
-      <Button {...args} onMouseOver={focus} ref={ref}>
-        Mouse over to focus
-      </Button>
-    )
-  },
-}
-
-export const LayoutExample: StoryObj<typeof Button> = {
-  render: (args: ButtonProps) => (
-    <div
-      css={`
-        display: grid;
-        gap: 24px;
-      `}
-    >
-      <div
-        css={`
-          display: grid;
-          grid: auto / auto-flow min-content;
-          gap: 8px;
-        `}
-      >
-        <Button {...args}>Grid</Button>
-        <Button {...args} variant="Navigation">
-          Layout
-        </Button>
-        <Button {...args} variant="Danger">
-          Sample
-        </Button>
-      </div>
-      <div
-        css={`
-          display: grid;
-          grid: auto-flow auto / 392px;
-          gap: 8px;
-        `}
-      >
-        <Button {...args} variant="Primary" fullWidth>
-          Submit
-        </Button>
-        <Button {...args} variant="Default" fullWidth>
-          Cancel
-        </Button>
-      </div>
-      <div
-        css={`
-          display: flex;
-
-          & > * + * {
-            margin-left: 8px;
-          }
-        `}
-      >
-        <Button {...args}>Flex</Button>
-        <Button {...args} variant="Navigation">
-          Layout
-        </Button>
-        <Button {...args} variant="Danger">
-          Sample
-        </Button>
-      </div>
-      <div
-        css={`
-          display: flex;
-          flex-direction: column;
-          width: 392px;
-
-          & > * + * {
-            margin-top: 8px;
-          }
-        `}
-      >
-        <Button {...args} variant="Primary" fullWidth>
-          Submit
-        </Button>
-        <Button {...args} variant="Default" fullWidth>
-          Cancel
-        </Button>
-      </div>
-      <div
-        css={`
-          display: flex;
-          flex-direction: column;
-          width: 392px;
-
-          & > * + * {
-            margin-top: 8px;
-          }
-        `}
-      >
-        <Button {...args} variant="Primary" fullWidth>
-          すべて見る
-        </Button>
-        <Button {...args} variant="Default">
-          作品を投稿
-        </Button>
-      </div>
-    </div>
-  ),
+export const IsActive: StoryObj<typeof Button> = {
+  render: () => <Button isActive>Active</Button>,
 }

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/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"
                   >