@charcoal-ui/react 4.0.0-beta.2 → 4.0.0-beta.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.3",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -26,7 +26,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.2",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.3",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
@@ -60,10 +60,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^4.0.0-beta.2",
-    "@charcoal-ui/styled": "^4.0.0-beta.2",
-    "@charcoal-ui/theme": "^4.0.0-beta.2",
-    "@charcoal-ui/utils": "^4.0.0-beta.2",
+    "@charcoal-ui/icons": "^4.0.0-beta.3",
+    "@charcoal-ui/styled": "^4.0.0-beta.3",
+    "@charcoal-ui/theme": "^4.0.0-beta.3",
+    "@charcoal-ui/utils": "^4.0.0-beta.3",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -96,5 +96,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "21a8c3ad738b69cfc849a3a7ec75dbae71eb9e97"
+  "gitHead": "9b982f2d1e64be2c9b665bdeb50397dfa679d0fd"
 }

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

@@ -1,18 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Button Active 1`] = `
-<div
-  data-dark={false}
->
-  <button
-    className="charcoal-button"
-    data-active={true}
-  >
-    Button
-  </button>
-</div>
-`;
-
 exports[`Storybook Tests Button Danger 1`] = `
 <div
   data-dark={false}
@@ -21,7 +8,7 @@ exports[`Storybook Tests Button Danger 1`] = `
     className="charcoal-button"
     data-variant="Danger"
   >
-    Button
+    Danger
   </button>
 </div>
 `;
@@ -46,12 +33,12 @@ exports[`Storybook Tests Button Disabled 1`] = `
     className="charcoal-button"
     disabled={true}
   >
-    Button
+    Disabled
   </button>
 </div>
 `;
 
-exports[`Storybook Tests Button Fixed 1`] = `
+exports[`Storybook Tests Button FullWidth 1`] = `
 <div
   data-dark={false}
 >
@@ -59,33 +46,20 @@ exports[`Storybook Tests Button Fixed 1`] = `
     className="charcoal-button"
     data-full-width={true}
   >
-    Button
+    Full width
   </button>
 </div>
 `;
 
-exports[`Storybook Tests Button Focus 1`] = `
+exports[`Storybook Tests Button IsActive 1`] = `
 <div
   data-dark={false}
 >
   <button
     className="charcoal-button"
-    onMouseOver={[Function]}
-  >
-    Mouse over to focus
-  </button>
-</div>
-`;
-
-exports[`Storybook Tests Button Link 1`] = `
-<div
-  data-dark={false}
->
-  <button
-    className="charcoal-button"
-    to="#"
+    data-active={true}
   >
-    Button
+    Active
   </button>
 </div>
 `;
@@ -98,19 +72,7 @@ exports[`Storybook Tests Button Navigation 1`] = `
     className="charcoal-button"
     data-variant="Navigation"
   >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Storybook Tests Button Nihongo 1`] = `
-<div
-  data-dark={false}
->
-  <button
-    className="charcoal-button"
-  >
-    日本語だよ
+    Navigation
   </button>
 </div>
 `;
@@ -123,7 +85,7 @@ exports[`Storybook Tests Button Overlay 1`] = `
     className="charcoal-button"
     data-variant="Overlay"
   >
-    Button
+    Overlay
   </button>
 </div>
 `;
@@ -136,7 +98,7 @@ exports[`Storybook Tests Button Primary 1`] = `
     className="charcoal-button"
     data-variant="Primary"
   >
-    Button
+    Primary
   </button>
 </div>
 `;
@@ -149,7 +111,7 @@ exports[`Storybook Tests Button Small 1`] = `
     className="charcoal-button"
     data-size="S"
   >
-    Button
+    Small
   </button>
 </div>
 `;

package/src/components/Button/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> componentAs props are passed to the data-as attribute 1`] = `
+<a
+  className="charcoal-button"
+  data-as="componentAs"
+  data-full-width={true}
+  href="/"
+  target="_blank"
+/>
+`;

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

@@ -1,96 +1,43 @@
-import { useRef } from 'react'
-import { ClickableElement } from '../Clickable'
 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: '#',
-  },
-}
-
-export const Nihongo: StoryObj<typeof Button> = {
-  render: (args) => <Button {...args}>日本語だよ</Button>,
+  render: () => <Button disabled>Disabled</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 IsActive: StoryObj<typeof Button> = {
+  render: () => <Button isActive>Active</Button>,
 }

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

@@ -0,0 +1,32 @@
+import 'jest-styled-components'
+
+import renderer from 'react-test-renderer'
+import Button from '.'
+
+function Link({
+  as,
+  children,
+  ...props
+}: { as: string; children: React.ReactNode } & React.ComponentProps<'a'>) {
+  return (
+    <a {...props} data-as={as}>
+      {children}
+    </a>
+  )
+}
+
+describe('<Button />', () => {
+  test('componentAs props are passed to the data-as attribute', () => {
+    expect(
+      renderer.create(
+        <Button
+          href="/"
+          target="_blank"
+          fullWidth
+          as={Link}
+          componentAs="componentAs"
+        />
+      )
+    ).toMatchSnapshot()
+  })
+})

package/src/components/Button/index.tsx

@@ -14,8 +14,16 @@ export type ButtonProps<T extends React.ElementType = 'button'> = {
   size?: Size
   fullWidth?: boolean
   isActive?: boolean
+  /**
+   * The component used for root element.
+   * @type T extends React.ElementType = 'button'
+   */
   as?: T
-} & Omit<React.ComponentPropsWithRef<T>, 'children'>
+  /**
+   * The as property of the component specified by the Button component's as attribute.
+   */
+  componentAs?: React.ComponentPropsWithRef<T>['as']
+} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>
 
 const Button = forwardRef(function Button<T extends React.ElementType>(
   {
@@ -25,6 +33,7 @@ const Button = forwardRef(function Button<T extends React.ElementType>(
     className,
     as,
     isActive,
+    componentAs,
     ...props
   }: ButtonProps<T>,
   ref: ForwardedRef<HTMLButtonElement>
@@ -34,6 +43,7 @@ const Button = forwardRef(function Button<T extends React.ElementType>(
   return (
     <Component
       {...props}
+      as={componentAs}
       className={classNames}
       data-variant={variant}
       data-size={size}

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"
         >
@@ -949,6 +954,7 @@ exports[`Storybook Tests DropdownSelector InFormTag 1`] = `
       >
         <select
           name="exampleOption"
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -1708,6 +1714,7 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
                 }
               >
                 <select
+                  onChange={[Function]}
                   tabIndex={-1}
                   value="1"
                 >
@@ -1884,6 +1891,7 @@ exports[`Storybook Tests DropdownSelector InModal 1`] = `
                 }
               >
                 <select
+                  onChange={[Function]}
                   tabIndex={-1}
                   value="2"
                 >
@@ -2062,6 +2070,7 @@ exports[`Storybook Tests DropdownSelector Invalid 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -2248,6 +2257,7 @@ exports[`Storybook Tests DropdownSelector InvalidAssistiveText 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -2512,6 +2522,7 @@ exports[`Storybook Tests DropdownSelector Label 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -2668,6 +2679,7 @@ exports[`Storybook Tests DropdownSelector LongNames 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -2964,6 +2976,7 @@ exports[`Storybook Tests DropdownSelector RequiredText 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="1"
         >
@@ -3120,6 +3133,7 @@ exports[`Storybook Tests DropdownSelector Section 1`] = `
         }
       >
         <select
+          onChange={[Function]}
           tabIndex={-1}
           value="banana"
         >
@@ -3401,6 +3415,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

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