@charcoal-ui/react 3.6.0 → 3.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.6.0",
+  "version": "3.7.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -51,24 +51,21 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.6.0",
-    "@charcoal-ui/styled": "^3.6.0",
-    "@charcoal-ui/theme": "^3.6.0",
-    "@charcoal-ui/utils": "^3.6.0",
-    "@react-aria/button": "^3.7.0",
-    "@react-aria/checkbox": "^3.11.0",
-    "@react-aria/dialog": "^3.5.0",
-    "@react-aria/focus": "^3.11.0",
-    "@react-aria/listbox": "^3.8.0",
-    "@react-aria/overlays": "^3.13.0",
-    "@react-aria/radio": "^3.8.0",
-    "@react-aria/select": "^3.9.0",
-    "@react-aria/separator": "^3.3.0",
-    "@react-aria/ssr": "^3.5.0",
-    "@react-aria/switch": "^3.4.0",
-    "@react-aria/textfield": "^3.9.0",
-    "@react-aria/utils": "^3.15.0",
-    "@react-aria/visually-hidden": "^3.7.0",
+    "@charcoal-ui/icons": "^3.7.0",
+    "@charcoal-ui/styled": "^3.7.0",
+    "@charcoal-ui/theme": "^3.7.0",
+    "@charcoal-ui/utils": "^3.7.0",
+    "@react-aria/button": "^3.9.1",
+    "@react-aria/checkbox": "^3.13.0",
+    "@react-aria/dialog": "^3.5.10",
+    "@react-aria/focus": "^3.16.0",
+    "@react-aria/overlays": "^3.20.0",
+    "@react-aria/radio": "^3.10.0",
+    "@react-aria/ssr": "^3.9.1",
+    "@react-aria/switch": "^3.6.0",
+    "@react-aria/textfield": "^3.14.1",
+    "@react-aria/utils": "^3.23.0",
+    "@react-aria/visually-hidden": "^3.8.8",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "react-stately": "^3.26.0",
@@ -90,5 +87,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "a77b512ae91706be951d5e1fa12265522f1f54e4"
+  "gitHead": "ebb9480045faf2418cb5a2f95f69848f946e14ed"
 }

package/src/_lib/compat.ts

@@ -28,4 +28,12 @@ export interface ReactAreaUseTextFieldCompat<E = Element> {
   readonly onSelect?: React.ReactEventHandler<E>
   readonly onBeforeInput?: React.FormEventHandler<E>
   readonly onInput?: React.FormEventHandler<E>
+  readonly autoCapitalize?:
+    | 'none'
+    | 'on'
+    | 'off'
+    | 'sentences'
+    | 'words'
+    | 'characters'
+    | undefined
 }

package/src/components/Button/StyledButton.tsx

@@ -0,0 +1,66 @@
+import styled, { css } from 'styled-components'
+import Clickable from '../Clickable'
+import { variantToFont } from './lib/variantToFont'
+import { variantToBackground } from './lib/variantToBackground'
+import type { Size } from '.'
+
+const horizontalPaddingSmall = css`
+  padding-right: 16px;
+  padding-left: 16px;
+`
+
+const horizontalPaddingMedium = css`
+  padding-right: 24px;
+  padding-left: 24px;
+`
+
+type StyledButtonProps = {
+  $fullWidth: boolean
+  $size: Size
+  $background: ReturnType<typeof variantToBackground>
+  $color: ReturnType<typeof variantToFont>
+}
+
+export const StyledButton = styled(Clickable)<StyledButtonProps>`
+  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};
+  display: inline-grid;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  user-select: none;
+  white-space: nowrap;
+  border-radius: 999999px;
+  font-size: 14px;
+  line-height: 22px;
+  font-weight: bold;
+
+  ${(p) => (p.$size === 'M' ? horizontalPaddingMedium : horizontalPaddingSmall)}
+  color: var(--charcoal-${(p) => p.$color});
+  background-color: var(--charcoal-${(p) => p.$background});
+  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
+
+  &:not(:disabled):not([aria-disabled]),
+  &[aria-disabled='false'] {
+    &:active,
+    &:focus,
+    &:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+    }
+
+    &:hover {
+      color: var(--charcoal-${(p) => p.$color}-hover);
+      background-color: var(--charcoal-${(p) => p.$background}-hover);
+    }
+    &:active {
+      color: var(--charcoal-${(p) => p.$color}-press);
+      background-color: var(--charcoal-${(p) => p.$background}-press);
+    }
+  }
+
+  &:disabled,
+  &[aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+  }
+  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
+`

package/src/components/Button/index.tsx

@@ -1,16 +1,17 @@
 import { forwardRef } from 'react'
-import styled, { css } from 'styled-components'
-import { unreachable } from '../../_lib'
-import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
+import { ClickableElement, ClickableProps } from '../Clickable'
+import { variantToFont } from './lib/variantToFont'
+import { variantToBackground } from './lib/variantToBackground'
+import { StyledButton } from './StyledButton'
 
-type Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation'
-type Size = 'S' | 'M'
+export type Variant =
+  | 'Primary'
+  | 'Default'
+  | 'Overlay'
+  | 'Danger'
+  | 'Navigation'
 
-interface StyledProps {
-  $variant: Variant
-  $fullWidth: boolean
-  $size: Size
-}
+export type Size = 'S' | 'M'
 
 export type ButtonProps = Partial<{
   variant: Variant
@@ -44,98 +45,5 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
     </StyledButton>
   )
 })
-export default Button
-
-const horizontalPaddingSmall = css`
-  padding-right: 16px;
-  padding-left: 16px;
-`
-const horizontalPaddingMedium = css`
-  padding-right: 24px;
-  padding-left: 24px;
-`
-
-type StyledButtonProps = Omit<StyledProps, '$variant'> & {
-  $background: ReturnType<typeof variantToBackground>
-  $color: ReturnType<typeof variantToFont>
-}
-const StyledButton = styled(Clickable)<StyledButtonProps>`
-  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-  border-radius: 999999px;
-  font-size: 14px;
-  line-height: 22px;
-  font-weight: bold;
-
-  ${(p) => (p.$size === 'M' ? horizontalPaddingMedium : horizontalPaddingSmall)}
-
-  color: var(--charcoal-${(p) => p.$color});
-  background-color: var(--charcoal-${(p) => p.$background});
-  transition: 0.2s color, 0.2s background-color, 0.2s box-shadow;
-
-  &:not(:disabled):not([aria-disabled]),
-  &[aria-disabled='false'] {
-    &:active,
-    &:focus,
-    &:focus-visible {
-      outline: none;
-      box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-    }
 
-    &:hover {
-      color: var(--charcoal-${(p) => p.$color}-hover);
-      background-color: var(--charcoal-${(p) => p.$background}-hover);
-    }
-    &:active {
-      color: var(--charcoal-${(p) => p.$color}-press);
-      background-color: var(--charcoal-${(p) => p.$background}-press);
-    }
-  }
-
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-  }
-
-  /* よく考えたらheight=32って定義が存在しないな... */
-  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
-`
-
-function variantToBackground(variant: Variant) {
-  switch (variant) {
-    case 'Overlay':
-      return 'surface4'
-    case 'Default':
-      return 'surface3'
-    case 'Primary':
-      return 'brand'
-    case 'Navigation':
-      return 'surface6'
-    case 'Danger':
-      return 'assertive'
-    default:
-      return unreachable(variant)
-  }
-}
-
-function variantToFont(variant: Variant) {
-  switch (variant) {
-    case 'Overlay':
-      return 'text5'
-    case 'Default':
-      return 'text2'
-    case 'Primary':
-      return 'text5'
-    case 'Navigation':
-      return 'text5'
-    case 'Danger':
-      return 'text5'
-    default:
-      return unreachable(variant)
-  }
-}
+export default Button

package/src/components/Button/lib/variantToBackground.tsx

@@ -0,0 +1,19 @@
+import { unreachable } from '../../../_lib'
+import type { Variant } from '..'
+
+export function variantToBackground(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'surface4'
+    case 'Default':
+      return 'surface3'
+    case 'Primary':
+      return 'brand'
+    case 'Navigation':
+      return 'surface6'
+    case 'Danger':
+      return 'assertive'
+    default:
+      return unreachable(variant)
+  }
+}

package/src/components/Button/lib/variantToFont.tsx

@@ -0,0 +1,19 @@
+import { unreachable } from '../../../_lib'
+import type { Variant } from '..'
+
+export function variantToFont(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'text5'
+    case 'Default':
+      return 'text2'
+    case 'Primary':
+      return 'text5'
+    case 'Navigation':
+      return 'text5'
+    case 'Danger':
+      return 'text5'
+    default:
+      return unreachable(variant)
+  }
+}

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

@@ -1,109 +1,103 @@
 import { action } from '@storybook/addon-actions'
 import Checkbox from '.'
-import { Story } from '../../_lib/compat'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Checkbox',
   component: Checkbox,
-}
-
-type Props = {
-  checked: boolean
-  defaultChecked: boolean
-  disabled: boolean
-  readonly: boolean
-  className?: string
-  invalid: boolean
-}
-
-export const Labelled: Story<Props> = (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>
+} 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>
-        <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>
-  )
-}
-
-Labelled.args = {
-  checked: false,
-  defaultChecked: false,
-  disabled: false,
-  readonly: false,
-  invalid: false,
-}
+        <div style={{ marginBottom: '1em' }}>
+          <Checkbox
+            {...props}
+            name="labelled"
+            label="label"
+            onBlur={action('blur')}
+            onClick={action('click')}
+            onChange={action('change')}
+            onFocus={action('focus')}
+          >
+            同意する
+          </Checkbox>
+        </div>
 
-export const Invalid: Story<Omit<Props, 'invalid'>> = (props) => {
-  return (
-    <Checkbox
-      {...props}
-      name="labelled"
-      label="label"
-      invalid
-      onBlur={action('blur')}
-      onClick={action('click')}
-      onChange={action('change')}
-      onFocus={action('focus')}
-    >
-      同意する
-    </Checkbox>
-  )
-}
-
-Invalid.args = {
-  checked: false,
-  defaultChecked: false,
-  disabled: false,
-  readonly: false,
+        <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>
+    )
+  },
 }
 
-export const Unlabelled: Story<Props> = (props) => {
-  return (
-    <div>
+export const Invalid: StoryObj<typeof Checkbox> = {
+  args: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    readonly: false,
+  },
+  render: (props) => {
+    return (
       <Checkbox
         {...props}
-        name="unlabelled"
+        name="labelled"
         label="label"
+        invalid
         onBlur={action('blur')}
         onClick={action('click')}
         onChange={action('change')}
         onFocus={action('focus')}
-      />
-    </div>
-  )
+      >
+        同意する
+      </Checkbox>
+    )
+  },
 }
 
-Unlabelled.args = {
-  checked: false,
-  defaultChecked: false,
-  disabled: false,
-  readonly: false,
-  invalid: false,
+export const Unlabelled: StoryObj<typeof Checkbox> = {
+  args: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+  },
+  render: (props) => {
+    return (
+      <div>
+        <Checkbox
+          {...props}
+          name="unlabelled"
+          label="label"
+          onBlur={action('blur')}
+          onClick={action('click')}
+          onChange={action('change')}
+          onFocus={action('focus')}
+        />
+      </div>
+    )
+  },
 }

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

@@ -1,17 +1,20 @@
 import { action } from '@storybook/addon-actions'
 import Clickable from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Clickable',
   component: Clickable,
-}
+} as Meta<typeof Clickable>
 
-export const Button = () => (
-  <Clickable onClick={action('click')}>button</Clickable>
-)
+export const Button: StoryObj = {
+  render: () => <Clickable onClick={action('click')}>button</Clickable>,
+}
 
-export const Link = () => (
-  <Clickable to="#" onClick={action('click')}>
-    link
-  </Clickable>
-)
+export const Link: StoryObj = {
+  render: () => (
+    <Clickable to="#" onClick={action('click')}>
+      link
+    </Clickable>
+  ),
+}

package/src/components/DropdownSelector/DropdownMenuItem.tsx

@@ -29,20 +29,7 @@ const StyledSpan = styled.span<{ isSelected?: boolean }>`
   font-size: 14px;
   line-height: 22px;
   color: var(--charcoal-text2);
-  &::before {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-top: -4px;
-  }
-  &::after {
-    display: block;
-    width: 0;
-    height: 0;
-    content: '';
-    margin-bottom: -4px;
-  }
+  padding: 9px 0;
 
   display: flex;
   align-items: center;