@charcoal-ui/react 2.0.0-alpha.9 → 2.0.0-rc.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.0.0-alpha.9",
+  "version": "2.0.0-rc.0",
   "license": "Apache-2.0",
   "type": "module",
   "source": "./src/index.ts",
@@ -13,7 +13,7 @@
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "microbundle -f modern,esm,cjs --tsconfig tsconfig.build.json --jsx React.createElement --jsxFragment React.Fragment",
+    "build": "microbundle --compress=false -f modern,esm,cjs --tsconfig tsconfig.build.json --jsx React.createElement --jsxFragment React.Fragment",
     "typecheck": "tsc --noEmit --project tsconfig.build.json",
     "clean": "rimraf dist"
   },
@@ -48,16 +48,23 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^1.1.0-alpha.3",
-    "@charcoal-ui/styled": "^1.0.1-alpha.5",
-    "@charcoal-ui/theme": "^2.0.0-alpha.3",
-    "@charcoal-ui/utils": "^1.0.1-alpha.0",
+    "@charcoal-ui/icons": "^2.0.0-rc.0",
+    "@charcoal-ui/styled": "^2.0.0-rc.0",
+    "@charcoal-ui/theme": "^2.0.0-rc.0",
+    "@charcoal-ui/utils": "^2.0.0-rc.0",
+    "@react-aria/button": "^3.6.2",
     "@react-aria/checkbox": "^3.2.3",
+    "@react-aria/dialog": "^3.2.1",
+    "@react-aria/focus": "^3.6.1",
+    "@react-aria/overlays": "^3.9.1",
+    "@react-aria/radio": "^3.4.0",
+    "@react-aria/select": "^3.8.2",
+    "@react-aria/ssr": "^3.3.0",
     "@react-aria/switch": "^3.1.3",
     "@react-aria/textfield": "^3.5.0",
     "@react-aria/visually-hidden": "^3.2.3",
     "polished": "^4.1.4",
-    "react-stately": "^3.11.0",
+    "react-stately": "^3.19.0",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
@@ -76,5 +83,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "f1fcafd39b0d4c2aa970cd4fdbbc3a12147c94a4"
+  "gitHead": "01429610d6100445690d4ca8ce4b1d0fd57c00b2"
 }

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

@@ -0,0 +1,64 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import Checkbox from '.'
+import { Story } from '../../_lib/compat'
+
+export default {
+  title: 'Checkbox',
+  component: Checkbox,
+}
+
+type Props = {
+  checked: boolean
+  defaultChecked: boolean
+  disabled: boolean
+  readonly: boolean
+}
+
+export const Labelled: Story<Props> = (props) => {
+  return (
+    <div>
+      <Checkbox
+        {...props}
+        name="labelled"
+        label="label"
+        onBlur={action('blur')}
+        onClick={action('click')}
+        onChange={action('change')}
+        onFocus={action('focus')}
+      >
+        同意する
+      </Checkbox>
+    </div>
+  )
+}
+
+Labelled.args = {
+  checked: false,
+  defaultChecked: false,
+  disabled: false,
+  readonly: false,
+}
+
+export const Unlabelled: Story<Props> = (props) => {
+  return (
+    <div>
+      <Checkbox
+        {...props}
+        name="unlabelled"
+        label="label"
+        onBlur={action('blur')}
+        onClick={action('click')}
+        onChange={action('change')}
+        onFocus={action('focus')}
+      />
+    </div>
+  )
+}
+
+Unlabelled.args = {
+  checked: false,
+  defaultChecked: false,
+  disabled: false,
+  readonly: false,
+}

package/src/components/Checkbox/index.tsx

@@ -0,0 +1,122 @@
+import React, { forwardRef, memo, useMemo } from 'react'
+import styled, { css } from 'styled-components'
+import { useCheckbox } from '@react-aria/checkbox'
+import { useObjectRef } from '@react-aria/utils'
+import { useToggleState } from 'react-stately'
+import { disabledSelector, px } from '@charcoal-ui/utils'
+import { theme } from '../../styled'
+
+import type { AriaCheckboxProps } from '@react-types/checkbox'
+import Icon from '../Icon'
+
+type CheckboxLabelProps =
+  | {
+      children: React.ReactNode
+    }
+  | {
+      label: string
+    }
+
+export type CheckboxProps = CheckboxLabelProps & {
+  readonly id?: string
+  readonly name?: string
+
+  readonly checked?: boolean
+  readonly defaultChecked?: boolean
+  readonly disabled?: boolean
+  readonly readonly?: boolean
+
+  readonly onClick?: () => void
+  readonly onChange?: (isSelected: boolean) => void
+  readonly onBlur?: () => void
+  readonly onFocus?: () => void
+}
+
+const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+  function CheckboxInner(props, ref) {
+    const ariaCheckboxProps = useMemo<AriaCheckboxProps>(
+      () => ({
+        ...props,
+        isSelected: props.checked,
+        defaultSelected: props.defaultChecked,
+        // children がいない場合は aria-label をつけないといけない
+        'aria-label': 'children' in props ? undefined : props.label,
+        isDisabled: props.disabled,
+      }),
+      [props]
+    )
+    const state = useToggleState(ariaCheckboxProps)
+    const objectRef = useObjectRef(ref)
+
+    const { inputProps } = useCheckbox(ariaCheckboxProps, state, objectRef)
+    const isDisabled = (props.disabled ?? false) || (props.readonly ?? false)
+
+    return (
+      <InputRoot aria-disabled={isDisabled}>
+        <CheckboxInput type="checkbox" {...inputProps} />
+        <CheckboxInputOverlay aria-hidden={true} checked={inputProps.checked}>
+          <Icon name="24/Check" unsafeNonGuidelineScale={2 / 3} />
+        </CheckboxInputOverlay>
+
+        {'children' in props && <InputLabel>{props.children}</InputLabel>}
+      </InputRoot>
+    )
+  }
+)
+
+export default memo(Checkbox)
+
+const hiddenCss = css`
+  visibility: hidden;
+`
+
+const InputRoot = styled.label`
+  position: relative;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+  ${disabledSelector} {
+    cursor: default;
+  }
+
+  gap: ${({ theme }) => px(theme.spacing[4])};
+  ${theme((o) => [o.disabled])}
+`
+
+const CheckboxInput = styled.input`
+  &[type='checkbox'] {
+    appearance: none;
+    display: block;
+    cursor: pointer;
+    margin: 0;
+    width: 20px;
+    height: 20px;
+
+    &:checked {
+      ${theme((o) => o.bg.brand.hover.press)}
+    }
+    &:not(:checked) {
+      border-width: 2px;
+      border-style: solid;
+      border-color: ${({ theme }) => theme.color.text4};
+    }
+    ${theme((o) => [o.outline.default.focus, o.borderRadius(4)])}
+  }
+`
+const CheckboxInputOverlay = styled.div<{ checked?: boolean }>`
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  ${theme((o) => [o.width.px(24), o.height.px(24), o.font.text5])}
+
+  ${({ checked }) => checked !== true && hiddenCss};
+`
+
+const InputLabel = styled.div`
+  ${theme((o) => [o.typography(14)])}
+`

package/src/components/DropdownSelector/Listbox.tsx

@@ -0,0 +1,127 @@
+import React, { memo, useRef, Fragment, useMemo } from 'react'
+import styled, { css } from 'styled-components'
+import { ListProps, ListState } from 'react-stately'
+import { useListBox, useOption } from '@react-aria/listbox'
+import { mergeProps } from '@react-aria/utils'
+import { useFocusRing } from '@react-aria/focus'
+import { px } from '@charcoal-ui/utils'
+import Icon from '../Icon'
+import { theme } from '../../styled'
+
+import type { Node } from '@react-types/shared'
+
+type ListMode = 'default' | 'separator'
+export type ListboxProps<T> = Omit<ListProps<T>, 'children'> & {
+  state: ListState<T>
+  mode?: ListMode
+}
+
+const Listbox = <T,>({
+  state,
+  mode = 'default',
+  ...props
+}: ListboxProps<T>) => {
+  const ref = useRef<HTMLUListElement>(null)
+
+  const { listBoxProps } = useListBox(props, state, ref)
+  const collection = useMemo(
+    () =>
+      [...state.collection].map((node, index, self) => ({
+        node,
+        first: index === 0,
+        last: index === self.length - 1,
+      })),
+    [state.collection]
+  )
+
+  return (
+    <ListboxRoot ref={ref} {...listBoxProps}>
+      {collection.map(({ node, last }) => (
+        <Fragment key={node.key}>
+          <Option item={node} state={state} mode={mode} />
+          {!last && mode === 'separator' && <Divider />}
+        </Fragment>
+      ))}
+    </ListboxRoot>
+  )
+}
+export default memo(Listbox)
+
+const ListboxRoot = styled.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+
+  ${theme((o) => [
+    o.bg.background1,
+    o.border.default,
+    o.borderRadius(8),
+    o.outline.default.focus,
+  ])}
+`
+
+const Divider = styled.div.attrs({ role: 'separator' })`
+  display: flex;
+  ${theme((o) => [o.padding.horizontal(8)])}
+
+  &:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: #00000014;
+  }
+`
+
+type OptionProps<T> = {
+  item: Node<T>
+  state: ListState<T>
+  mode?: ListMode
+}
+
+const Option = <T,>({ item, state, mode }: OptionProps<T>) => {
+  const ref = useRef<HTMLLIElement>(null)
+
+  const { optionProps, isSelected } = useOption(item, state, ref)
+  const { focusProps } = useFocusRing()
+
+  return (
+    <OptionRoot {...mergeProps(optionProps, focusProps)} ref={ref} mode={mode}>
+      <OptionCheckIcon name="16/Check" isSelected={isSelected} />
+      <OptionText>{item.rendered}</OptionText>
+    </OptionRoot>
+  )
+}
+
+const OptionRoot = styled.li<{ mode?: ListMode }>`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => px(theme.spacing[4])};
+  height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  ${({ mode }) =>
+    theme((o) => [
+      o.padding.horizontal(8),
+      mode === 'separator' && o.padding.vertical(4),
+    ])}
+
+  &:focus {
+    ${theme((o) => [o.bg.surface3])}
+  }
+`
+const OptionCheckIcon = styled(Icon)<{ isSelected: boolean }>`
+  visibility: hidden;
+
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      visibility: visible;
+    `}
+`
+const OptionText = styled.span`
+  display: block;
+  ${theme((o) => [o.typography(14)])}
+`

package/src/components/DropdownSelector/Popover.tsx

@@ -0,0 +1,46 @@
+import { FocusScope } from '@react-aria/focus'
+import { DismissButton, useOverlay } from '@react-aria/overlays'
+import React, {
+  FC,
+  useRef,
+  useMemo,
+  PropsWithChildren,
+  memo,
+  CSSProperties,
+} from 'react'
+import { mergeProps } from '@react-aria/utils'
+
+type Props = PropsWithChildren<{
+  open?: boolean
+  onClose?: () => void
+  style?: CSSProperties
+  className?: string
+}>
+
+const Popover: FC<Props> = ({ open, onClose, children, ...props }) => {
+  const ref = useRef<HTMLDivElement>(null)
+
+  const { overlayProps } = useOverlay(
+    useMemo(
+      () => ({
+        isOpen: open,
+        onClose,
+        shouldCloseOnBlur: true,
+        isDismissable: true,
+      }),
+      [onClose, open]
+    ),
+    ref
+  )
+
+  return (
+    <FocusScope restoreFocus>
+      <div {...mergeProps(overlayProps, props)} ref={ref}>
+        {children}
+        <DismissButton onDismiss={onClose} />
+      </div>
+    </FocusScope>
+  )
+}
+
+export default memo(Popover)

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

@@ -0,0 +1,134 @@
+import { action } from '@storybook/addon-actions'
+import React from 'react'
+import DropdownSelector, {
+  DropdownSelectorItem,
+  DropdownSelectorProps,
+} from '.'
+import { Story } from '../../_lib/compat'
+import Clickable from '../Clickable'
+
+export default {
+  title: 'DropdownSelector',
+  component: DropdownSelector,
+}
+
+type Props = Omit<
+  DropdownSelectorProps,
+  'subLabel' | 'children' | 'onOpenChange'
+>
+export const Default: Story<Props> = (props) => {
+  return (
+    <DropdownSelector
+      {...props}
+      placeholder={props.placeholder ?? 'Drop Down menu'}
+      onChange={action('change')}
+      onOpenChange={action('open')}
+    >
+      <DropdownSelectorItem key="k:1">選択肢1</DropdownSelectorItem>
+      <DropdownSelectorItem key="k:2">選択肢2</DropdownSelectorItem>
+      <DropdownSelectorItem key="k:3">選択肢3</DropdownSelectorItem>
+    </DropdownSelector>
+  )
+}
+Default.args = {
+  label: 'Label',
+  requiredText: '*必須',
+  required: false,
+  showLabel: false,
+  invalid: false,
+  disabled: false,
+}
+
+type HasLabelProps = {
+  disabled?: boolean
+}
+export const HasLabel: Story<HasLabelProps> = ({ disabled }) => {
+  const defaultProps: Omit<DropdownSelectorProps, 'children'> = {
+    required: true,
+    showLabel: true,
+    label: 'Label',
+    requiredText: '*必須',
+    subLabel: <Clickable onClick={action('label-click')}>Text Link</Clickable>,
+    assertiveText: 'Hint',
+  }
+  return (
+    <DropdownSelector
+      {...defaultProps}
+      disabled={disabled}
+      placeholder={'Drop Down menu'}
+      onChange={action('change')}
+      onOpenChange={action('open')}
+    >
+      <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+      <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+      <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+    </DropdownSelector>
+  )
+}
+
+HasLabel.args = {
+  disabled: false,
+}
+
+type WithSeparatorProps = {
+  mode: 'default' | 'separator'
+}
+export const WithSeparator: Story<WithSeparatorProps> = ({
+  mode,
+  ...props
+}) => {
+  const defaultProps: Omit<DropdownSelectorProps, 'children'> = {
+    required: true,
+    showLabel: true,
+    label: 'Label',
+    requiredText: '*必須',
+    subLabel: <Clickable onClick={action('label-click')}>Text Link</Clickable>,
+    assertiveText: 'Hint',
+  }
+  return (
+    <DropdownSelector
+      {...defaultProps}
+      mode={mode}
+      placeholder={'Drop Down menu'}
+      onChange={action('change')}
+      onOpenChange={action('open')}
+      {...props}
+    >
+      <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+      <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+      <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+    </DropdownSelector>
+  )
+}
+
+WithSeparator.args = {
+  mode: 'separator',
+}
+
+type InvalidProps = {
+  disabled?: boolean
+}
+export const Invalid: Story<InvalidProps> = ({ disabled }) => {
+  const props: Omit<DropdownSelectorProps, 'children'> = {
+    label: '',
+    assertiveText: 'error message',
+    invalid: true,
+  }
+  return (
+    <DropdownSelector
+      {...props}
+      disabled={disabled}
+      placeholder={'Drop Down menu'}
+      onChange={action('change')}
+      onOpenChange={action('open')}
+    >
+      <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
+      <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
+      <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+    </DropdownSelector>
+  )
+}
+
+Invalid.args = {
+  disabled: false,
+}