@charcoal-ui/react 2.3.0 → 2.5.0

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "2.3.0",
+  "version": "2.5.0",
   "license": "Apache-2.0",
-  "type": "module",
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
   "exports": {
-    "require": "./dist/index.cjs",
-    "default": "./dist/index.js"
+    "require": "./dist/index.cjs.js",
+    "default": "./dist/index.esm.js"
   },
   "types": "./dist/index.d.ts",
   "sideEffects": false,
@@ -50,23 +49,24 @@
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^2.3.0",
-    "@charcoal-ui/styled": "^2.3.0",
-    "@charcoal-ui/theme": "^2.3.0",
-    "@charcoal-ui/utils": "^2.3.0",
-    "@react-aria/button": "^3.6.3",
-    "@react-aria/checkbox": "^3.2.3",
-    "@react-aria/dialog": "^3.2.1",
-    "@react-aria/focus": "^3.6.1",
-    "@react-aria/listbox": "^3.7.1",
-    "@react-aria/overlays": "^3.12.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/utils": "^3.14.2",
-    "@react-aria/visually-hidden": "^3.2.3",
+    "@charcoal-ui/icons": "^2.5.0",
+    "@charcoal-ui/styled": "^2.5.0",
+    "@charcoal-ui/theme": "^2.5.0",
+    "@charcoal-ui/utils": "^2.5.0",
+    "@react-aria/button": "^3.7.0",
+    "@react-aria/checkbox": "^3.8.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.5.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",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "react-stately": "^3.19.0",
@@ -88,5 +88,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "b6b0cd6117cf288735bdcf167098ace9b28e0072"
+  "gitHead": "f2d6f530bbc4467e9205a4e70ce65a57372860a8"
 }

package/src/components/DropdownSelector/Divider.tsx

@@ -0,0 +1,13 @@
+import styled from 'styled-components'
+
+export const Divider = styled.div.attrs({ role: 'separator' })`
+  display: flex;
+
+  &:before {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 1px;
+    background: #00000014;
+  }
+`

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -0,0 +1,72 @@
+import React, { Key, useEffect, useRef } from 'react'
+import { OverlayTriggerState } from 'react-stately'
+import { ReactNode } from 'react'
+import {
+  AriaPopoverProps,
+  DismissButton,
+  Overlay,
+  usePopover,
+} from '@react-aria/overlays'
+import styled from 'styled-components'
+import { theme } from '../../styled'
+
+const DropdownPopoverDiv = styled.div`
+  width: 100%;
+  ${theme((o) => o.margin.top(4).bottom(4))}
+`
+
+type Props = Omit<AriaPopoverProps, 'popoverRef'> & {
+  state: OverlayTriggerState
+} & {
+  children: ReactNode
+  value?: Key
+}
+
+export function DropdownPopover({ children, state, ...props }: Props) {
+  const ref = useRef<HTMLDivElement>(null)
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      ...props,
+      popoverRef: ref,
+      containerPadding: 0,
+    },
+    state
+  )
+
+  useEffect(() => {
+    if (ref.current && props.triggerRef.current) {
+      ref.current.style.width = `${props.triggerRef.current.clientWidth}px`
+    }
+  }, [props.triggerRef])
+
+  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)
+      })
+    }
+  }, [props.value, state.isOpen])
+
+  return (
+    <Overlay portalContainer={document.body}>
+      <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />
+      <DropdownPopoverDiv {...popoverProps} ref={ref}>
+        <DismissButton onDismiss={() => state.close()} />
+        {children}
+        <DismissButton onDismiss={() => state.close()} />
+      </DropdownPopoverDiv>
+    </Overlay>
+  )
+}

package/src/components/DropdownSelector/ListBoxSection.tsx

@@ -0,0 +1,60 @@
+import { useListBoxSection } from '@react-aria/listbox'
+import { useSeparator } from '@react-aria/separator'
+import { Node } from '@react-types/shared'
+import React from 'react'
+import { ListState } from 'react-stately'
+import styled from 'styled-components'
+import { Option } from './Option'
+import { Divider } from './Divider'
+import { theme } from '../../styled'
+
+export function ListBoxSection<T>(props: {
+  section: Node<T>
+  state: ListState<T>
+}) {
+  const { state } = props
+  const { itemProps, headingProps, groupProps } = useListBoxSection({
+    heading: props.section.rendered,
+    'aria-label': props.section['aria-label'],
+  })
+
+  const { separatorProps } = useSeparator({
+    elementType: 'li',
+  })
+
+  return (
+    <>
+      {props.section.key !== props.state.collection.getFirstKey() && (
+        <Divider {...separatorProps} role="separator" />
+      )}
+      <StyledLi {...itemProps}>
+        {props.section.rendered != null && (
+          <SectionSpan {...headingProps}>{props.section.rendered}</SectionSpan>
+        )}
+        <StyledUl {...groupProps}>
+          {[...props.section.childNodes].map((node) => (
+            <Option key={node.key} item={node} state={state} />
+          ))}
+        </StyledUl>
+      </StyledLi>
+    </>
+  )
+}
+
+const SectionSpan = styled.span`
+  ${theme((o) => [
+    o.font.text3,
+    o.typography(12).bold,
+    o.margin.bottom(8).left(16).top(16),
+  ])}
+`
+
+const StyledUl = styled.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+`
+
+const StyledLi = styled.li``

package/src/components/DropdownSelector/Listbox.tsx

@@ -1,16 +1,14 @@
 import React, { memo, useRef, Fragment, useMemo } from 'react'
-import styled, { css } from 'styled-components'
+import styled 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 { useListBox } from '@react-aria/listbox'
 import { theme } from '../../styled'
 
-import type { Node } from '@react-types/shared'
+import { ListBoxSection } from './ListBoxSection'
+import { Divider } from './Divider'
+import { Option } from './Option'
 
-type ListMode = 'default' | 'separator'
+export type ListMode = 'default' | 'separator'
 export type ListboxProps<T> = Omit<ListProps<T>, 'children'> & {
   state: ListState<T>
   mode?: ListMode
@@ -38,7 +36,11 @@ const Listbox = <T,>({
     <ListboxRoot ref={ref} {...listBoxProps}>
       {collection.map(({ node, last }) => (
         <Fragment key={node.key}>
-          <Option item={node} state={state} mode={mode} />
+          {node.type === 'section' ? (
+            <ListBoxSection section={node} state={state} />
+          ) : (
+            <Option item={node} state={state} mode={mode} />
+          )}
           {!last && mode === 'separator' && <Divider />}
         </Fragment>
       ))}
@@ -52,77 +54,14 @@ const ListboxRoot = styled.ul`
   margin: 0;
   box-sizing: border-box;
   list-style: none;
+  overflow: auto;
+  max-height: inherit;
 
   ${theme((o) => [
     o.bg.background1,
     o.border.default,
     o.borderRadius(8),
+    o.padding.vertical(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;
-  ${theme((o) => [o.font.text2])}
-
-  ${({ isSelected }) =>
-    isSelected &&
-    css`
-      visibility: visible;
-    `}
-`
-const OptionText = styled.span`
-  display: block;
-  ${theme((o) => [o.typography(14), o.font.text2])}
-`

package/src/components/DropdownSelector/Option.tsx

@@ -0,0 +1,66 @@
+import React, { useRef } from 'react'
+import styled, { css } from 'styled-components'
+import { ListState } from 'react-stately'
+import { 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 { Node } from '@react-types/shared'
+import { ListMode } from './Listbox'
+
+type OptionProps<T> = {
+  item: Node<T>
+  state: ListState<T>
+  mode?: ListMode
+}
+
+export function 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;
+  ${theme((o) => [o.font.text2])}
+
+  ${({ isSelected }) =>
+    isSelected &&
+    css`
+      visibility: visible;
+    `}
+`
+
+const OptionText = styled.span`
+  display: block;
+  ${theme((o) => [o.typography(14), o.font.text2])}
+`

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

@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
+import React, { useState } from 'react'
+import { Section } from 'react-stately'
 import DropdownSelector, {
   DropdownSelectorItem,
   DropdownSelectorProps,
@@ -18,16 +19,18 @@ type Props = Omit<
 >
 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>
+    <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 = {
@@ -39,6 +42,70 @@ Default.args = {
   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>
+  )
+}
+
+export const Many: Story<DropdownSelectorProps> = (props) => {
+  const [value, setValue] = useState('50')
+  return (
+    <div style={{ padding: '300px 100px' }}>
+      <DropdownSelector
+        {...props}
+        placeholder={'Drop Down menu'}
+        onChange={(v) => {
+          setValue(v.toString())
+          action('change')
+        }}
+        onOpenChange={action('open')}
+        value={value}
+      >
+        {[...(Array(100) as undefined[])].map((_, i) => {
+          return (
+            <DropdownSelectorItem textValue={i.toString()} key={i}>
+              選択肢{i}
+            </DropdownSelectorItem>
+          )
+        })}
+      </DropdownSelector>
+    </div>
+  )
+}
+
 type HasLabelProps = {
   disabled?: boolean
 }
@@ -52,17 +119,19 @@ export const HasLabel: Story<HasLabelProps> = ({ disabled }) => {
     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>
+    <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>
   )
 }
 
@@ -86,18 +155,20 @@ export const WithSeparator: Story<WithSeparatorProps> = ({
     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>
+    <div style={{ width: 288 }}>
+      <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>
+    </div>
   )
 }
 
@@ -115,17 +186,19 @@ export const Invalid: Story<InvalidProps> = ({ disabled }) => {
     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>
+    <div style={{ width: 288 }}>
+      <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>
+    </div>
   )
 }
 

package/src/components/DropdownSelector/index.tsx

@@ -7,13 +7,13 @@ import { useSelect, HiddenSelect } from '@react-aria/select'
 import { useButton } from '@react-aria/button'
 import { SelectProps } from '@react-types/select'
 import Listbox, { ListboxProps } from './Listbox'
-import Popover from './Popover'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
 import { theme } from '../../styled'
 
 import type { CollectionBase } from '@react-types/shared'
 import type { ReactNode } from 'react'
+import { DropdownPopover } from './DropdownPopover'
 
 type LabelProps = {
   readonly showLabel?: boolean
@@ -124,7 +124,11 @@ const DropdownSelector = <T extends Record<string, unknown>>({
           <DropdownButtonIcon name="16/Menu" />
         </DropdownButton>
         {state.isOpen && (
-          <DropdownPopover open={state.isOpen} onClose={() => state.close()}>
+          <DropdownPopover
+            state={state}
+            triggerRef={triggerRef}
+            value={props.value ?? props.defaultValue}
+          >
             <Listbox {...menuProps} state={state} mode={mode} />
           </DropdownPopover>
         )}
@@ -148,6 +152,7 @@ export const DropdownSelectorItem = Item
 const DropdownSelectorRoot = styled.div`
   position: relative;
   display: inline-block;
+  width: 100%;
 
   ${disabledSelector} {
     cursor: default;
@@ -171,7 +176,7 @@ const DropdownButton = styled.button<{ invalid: boolean }>`
   align-items: center;
 
   height: 40px;
-  width: 288px;
+  width: 100%;
   box-sizing: border-box;
   cursor: pointer;
 
@@ -208,11 +213,3 @@ const AssertiveText = styled.div<{ invalid: boolean }>`
       invalid ? o.font.assertive : o.font.text2,
     ])}
 `
-
-const DropdownPopover = styled(Popover)`
-  position: absolute;
-  width: 100%;
-
-  top: 100%;
-  margin-top: 2px;
-`