@charcoal-ui/react 2.7.0 → 3.0.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.7.0",
+  "version": "3.0.0-beta.1",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -49,10 +49,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.7.0",
-    "@charcoal-ui/styled": "^2.7.0",
-    "@charcoal-ui/theme": "^2.7.0",
-    "@charcoal-ui/utils": "^2.7.0",
+    "@charcoal-ui/icons": "^3.0.0-beta.1",
+    "@charcoal-ui/styled": "^3.0.0-beta.1",
+    "@charcoal-ui/theme": "^3.0.0-beta.1",
+    "@charcoal-ui/utils": "^3.0.0-beta.1",
     "@react-aria/button": "^3.7.0",
     "@react-aria/checkbox": "^3.8.0",
     "@react-aria/dialog": "^3.5.0",
@@ -88,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "77e32148d5a981f988e8bbc0c88aec82b0936a1a"
+  "gitHead": "b1c0225c8ad4d3a5492c0e406e8604eea8284ed8"
 }

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

@@ -58,7 +58,7 @@ Small.args = {
 
 export const Fixed: Story<ButtonProps> = DefaultStory.bind({})
 Fixed.args = {
-  fixed: true,
+  fullWidth: true,
 }
 
 export const Disabled: Story<ButtonProps> = DefaultStory.bind({})
@@ -121,10 +121,10 @@ const LayoutExampleStory = (args: ButtonProps) => (
         gap: 8px;
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         Submit
       </Button>
-      <Button {...args} variant="Default" fixed>
+      <Button {...args} variant="Default" fullWidth>
         Cancel
       </Button>
     </div>
@@ -156,10 +156,10 @@ const LayoutExampleStory = (args: ButtonProps) => (
         }
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         Submit
       </Button>
-      <Button {...args} variant="Default" fixed>
+      <Button {...args} variant="Default" fullWidth>
         Cancel
       </Button>
     </div>
@@ -174,7 +174,7 @@ const LayoutExampleStory = (args: ButtonProps) => (
         }
       `}
     >
-      <Button {...args} variant="Primary" fixed>
+      <Button {...args} variant="Primary" fullWidth>
         すべて見る
       </Button>
       <Button {...args} variant="Default">

package/src/components/Button/index.tsx

@@ -19,7 +19,7 @@ interface StyledProps {
   /**
    * 幅を最大まで広げて描画
    */
-  fixed: boolean
+  fullWidth: boolean
 }
 
 export type ButtonProps = Partial<StyledProps> & ClickableProps
@@ -29,7 +29,7 @@ const Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(
     children,
     variant = 'Default',
     size = 'M',
-    fixed = false,
+    fullWidth: fixed = false,
     disabled = false,
     ...rest
   },
@@ -41,7 +41,7 @@ const Button = React.forwardRef<ClickableElement, ButtonProps>(function Button(
       disabled={disabled}
       variant={variant}
       size={size}
-      fixed={fixed}
+      fullWidth={fixed}
       ref={ref}
     >
       {children}
@@ -54,11 +54,11 @@ const StyledButton = styled(Clickable)
   .withConfig<StyledProps>({
     shouldForwardProp(prop) {
       // fixed は <button> 要素に渡ってはいけない
-      return prop !== 'fixed'
+      return prop !== 'fullWidth'
     },
   })
   .attrs<StyledProps, ReturnType<typeof styledProps>>(styledProps)`
-  width: ${(p) => (p.fixed ? 'stretch' : 'min-content')};
+  width: ${(p) => (p.fullWidth ? 'stretch' : 'min-content')};
   display: inline-grid;
   align-items: center;
   justify-content: center;

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -41,21 +41,15 @@ export function DropdownPopover({ children, state, ...props }: Props) {
 
   useEffect(() => {
     if (state.isOpen && props.value !== undefined) {
-      // useListbox内部で現在の選択肢までスクロールする処理がある
-      // react-ariaより遅らせるためrequestAnimationFrameで呼び出す
-      window.requestAnimationFrame(() => {
-        if (props.value === undefined) return
-        // react-aria の scrollIntoViewport は 'nearest' なので
-        // listboxの中心に来るように上書きする
-        // 'center'は windowのスクロールも変更されるため戻す処理を入れている。
-        const windowScrollY = window.scrollY
-        const windowScrollX = window.scrollX
-        const selectedElement = document.querySelector(
-          `[data-key="${props.value.toString()}"]`
-        ) as HTMLElement | undefined
-        selectedElement?.scrollIntoView({ block: 'center' })
-        window.scrollTo(windowScrollX, windowScrollY)
-      })
+      // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する
+      const windowScrollY = window.scrollY
+      const windowScrollX = window.scrollX
+      const selectedElement = document.querySelector(
+        `[data-key="${props.value.toString()}"]`
+      ) as HTMLElement | undefined
+      selectedElement?.scrollIntoView({ block: 'center' })
+      selectedElement?.focus()
+      window.scrollTo(windowScrollX, windowScrollY)
     }
   }, [props.value, state.isOpen])
 

package/src/components/DropdownSelector/OptionItem.tsx

@@ -0,0 +1,85 @@
+import React, { ReactNode, useContext } from 'react'
+import styled from 'styled-components'
+import { px } from '@charcoal-ui/utils'
+import Icon from '../Icon'
+import { theme } from '../../styled'
+import { DropdownSelectorContext } from '.'
+import { focusIfHTMLLIElement } from './utils/focusIfHTMLLIElement'
+
+export type OptionItemProps = {
+  children?: ReactNode
+  value: string
+}
+
+export function OptionItem(props: OptionItemProps) {
+  const { value, setValue } = useContext(DropdownSelectorContext)
+  const isSelected = props.value === value
+  const onSelect = () => {
+    setValue(props.value)
+  }
+  return (
+    <OptionRoot
+      data-key={props.value}
+      onMouseMove={(e) => {
+        e.currentTarget.focus({ preventScroll: true })
+      }}
+      onKeyDown={(e) => {
+        if (e.key === 'Enter') {
+          onSelect()
+        } else if (e.key === 'ArrowUp') {
+          // prevent scroll
+          e.preventDefault()
+          const prev = e.currentTarget.previousElementSibling
+          if (prev === null) {
+            focusIfHTMLLIElement(e.currentTarget.parentElement?.lastChild)
+          }
+          focusIfHTMLLIElement(prev)
+        } else if (e.key === 'ArrowDown') {
+          // prevent scroll
+          e.preventDefault()
+          const next = e.currentTarget.nextElementSibling
+          if (next === null) {
+            focusIfHTMLLIElement(e.currentTarget.parentElement?.firstChild)
+          }
+          focusIfHTMLLIElement(next)
+        } else if (e.key === ' ') {
+          // prevent scroll
+          e.preventDefault()
+        }
+      }}
+      onClick={onSelect}
+      tabIndex={-1}
+    >
+      {isSelected && <OptionCheckIcon name="16/Check" />}
+      <OptionText isSelected={isSelected}>{props.children}</OptionText>
+    </OptionRoot>
+  )
+}
+
+const OptionRoot = styled.li`
+  display: flex;
+  align-items: center;
+  gap: ${({ theme }) => px(theme.spacing[4])};
+  height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  ${theme((o) => [o.padding.horizontal(8)])}
+
+  :focus {
+    ${theme((o) => [o.bg.surface3])}
+  }
+`
+
+const OptionCheckIcon = styled(Icon)`
+  ${theme((o) => [o.font.text2])}
+`
+
+/**
+ * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる
+ */
+const OptionText = styled.span<{ isSelected?: boolean }>`
+  display: block;
+  ${theme((o) => [o.typography(14), o.font.text2])}
+  margin-left: ${({ isSelected }) => (isSelected === true ? 0 : 20)}px;
+`

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

@@ -1,12 +1,7 @@
-import { action } from '@storybook/addon-actions'
 import React, { useState } from 'react'
-import { Section } from 'react-stately'
-import DropdownSelector, {
-  DropdownSelectorItem,
-  DropdownSelectorProps,
-} from '.'
+import DropdownSelector, { DropdownSelectorProps } from '.'
 import { Story } from '../../_lib/compat'
-import Clickable from '../Clickable'
+import { OptionItem } from './OptionItem'
 
 export default {
   title: 'DropdownSelector',
@@ -17,88 +12,33 @@ type Props = Omit<
   DropdownSelectorProps,
   'subLabel' | 'children' | 'onOpenChange'
 >
-export const Default: Story<Props> = (props) => {
-  return (
-    <div style={{ width: 288 }}>
-      <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>
-    </div>
-  )
-}
-Default.args = {
-  label: 'Label',
-  requiredText: '*必須',
-  required: false,
-  showLabel: false,
-  invalid: false,
-  disabled: false,
-}
 
-export const Sections: Story<DropdownSelectorProps> = (props) => {
-  return (
-    <div>
-      <DropdownSelector
-        {...props}
-        placeholder={'Drop Down menu'}
-        onChange={action('change')}
-        onOpenChange={action('open')}
-      >
-        <Section title="Section1">
-          <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
-        </Section>
-        <Section title="Section2">
-          <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
-          <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
-        </Section>
-      </DropdownSelector>
-    </div>
-  )
-}
-
-export const Bottom: Story<DropdownSelectorProps> = (props) => {
-  return (
-    <div style={{ marginTop: '1000px' }}>
-      <DropdownSelector
-        {...props}
-        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>
-    </div>
-  )
+const baseProps: DropdownSelectorProps = {
+  label: 'Label',
+  value: '',
+  placeholder: 'placeholder',
+  onChange: () => {
+    //
+  },
 }
 
-export const Many: Story<DropdownSelectorProps> = (props) => {
-  const [value, setValue] = useState('50')
+export const Playground: Story<Props> = (props: DropdownSelectorProps) => {
+  const [selected, setSelected] = useState('50')
   return (
-    <div style={{ padding: '300px 100px' }}>
+    <div style={{ width: 288 }}>
       <DropdownSelector
         {...props}
-        placeholder={'Drop Down menu'}
-        onChange={(v) => {
-          setValue(v.toString())
-          action('change')
+        onChange={(value) => {
+          setSelected(value)
         }}
-        onOpenChange={action('open')}
-        value={value}
+        value={selected}
+        label="label"
       >
         {[...(Array(100) as undefined[])].map((_, i) => {
           return (
-            <DropdownSelectorItem textValue={i.toString()} key={i}>
-              選択肢{i}
-            </DropdownSelectorItem>
+            <OptionItem key={i} value={i.toString()}>
+              {i}
+            </OptionItem>
           )
         })}
       </DropdownSelector>
@@ -106,102 +46,75 @@ export const Many: Story<DropdownSelectorProps> = (props) => {
   )
 }
 
-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 (
-    <div style={{ width: 288 }}>
-      <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>
-    </div>
-  )
-}
+Playground.args = { ...baseProps }
 
-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',
-  }
+export const Basic: Story<Props> = (props: DropdownSelectorProps) => {
+  const [selected, setSelected] = useState('')
   return (
     <div style={{ width: 288 }}>
       <DropdownSelector
-        {...defaultProps}
-        mode={mode}
-        placeholder={'Drop Down menu'}
-        onChange={action('change')}
-        onOpenChange={action('open')}
         {...props}
+        onChange={(value) => {
+          setSelected(value)
+        }}
+        value={selected}
+        label="label"
       >
-        <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
-        <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
-        <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+        <OptionItem value={'10'}>Apple</OptionItem>
+        <OptionItem value={'20'}>Banana</OptionItem>
+        <OptionItem value={'30'}>Orange</OptionItem>
       </DropdownSelector>
     </div>
   )
 }
 
-WithSeparator.args = {
-  mode: 'separator',
-}
+Basic.args = { ...baseProps }
 
-type InvalidProps = {
-  disabled?: boolean
-}
-export const Invalid: Story<InvalidProps> = ({ disabled }) => {
-  const props: Omit<DropdownSelectorProps, 'children'> = {
-    label: '',
-    assertiveText: 'error message',
-    invalid: true,
-  }
+export const CustomChildren: Story<Props> = (props: DropdownSelectorProps) => {
+  const [selected, setSelected] = useState('10')
   return (
     <div style={{ width: 288 }}>
       <DropdownSelector
         {...props}
-        disabled={disabled}
-        placeholder={'Drop Down menu'}
-        onChange={action('change')}
-        onOpenChange={action('open')}
+        onChange={(value) => {
+          setSelected(value)
+        }}
+        value={selected}
+        label="label"
       >
-        <DropdownSelectorItem key="1">選択肢1</DropdownSelectorItem>
-        <DropdownSelectorItem key="2">選択肢2</DropdownSelectorItem>
-        <DropdownSelectorItem key="3">選択肢3</DropdownSelectorItem>
+        <OptionItem value={'10'}>
+          <div
+            style={{
+              color: 'pink',
+              fontWeight: 'bold',
+            }}
+          >
+            Apple
+          </div>
+        </OptionItem>
+        <OptionItem value={'20'}>
+          <div
+            style={{
+              color: 'yellowgreen',
+              fontStyle: 'italic',
+            }}
+          >
+            Banana
+          </div>
+        </OptionItem>
+        <OptionItem value={'30'}>
+          <div
+            style={{
+              color: 'orange',
+              fontSize: '24px',
+            }}
+          >
+            Orange
+          </div>
+        </OptionItem>
       </DropdownSelector>
     </div>
   )
 }
 
-Invalid.args = {
-  disabled: false,
-}
+CustomChildren.args = { ...baseProps }