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

package/src/components/DropdownSelector/index.tsx

@@ -1,156 +1,130 @@
-import React, { Key, useMemo, useRef } from 'react'
+import React, { ReactNode, createContext, useRef } from 'react'
 import styled from 'styled-components'
-import { Item, useSelectState } from 'react-stately'
+import { useOverlayTriggerState } from 'react-stately'
 import { disabledSelector } from '@charcoal-ui/utils'
-import { useVisuallyHidden } from '@react-aria/visually-hidden'
-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 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
-  readonly label: string
-  readonly subLabel?: ReactNode
-  readonly requiredText?: string
+export const DropdownSelectorContext = createContext({
+  value: '',
+  setValue: (_v: string) => {
+    // empty
+  },
+})
+
+export type DropdownSelectorProps = {
+  label: string
+  value: string
+  disabled?: boolean
+  placeholder?: string
+  showLabel?: boolean
+  invalid?: boolean
+  assistiveText?: string
+  required?: boolean
+  requiredText?: string
+  subLabel?: ReactNode
+  children?: ReactNode
+  onChange: (value: string) => void
 }
 
-type Empty = Record<string, unknown>
-export type DropdownSelectorProps<T extends Empty = Empty> = LabelProps &
-  Readonly<CollectionBase<T>> & {
-    readonly id?: string
-    readonly name?: string
-    readonly autoComplete?: string
-    readonly placeholder?: string
-    readonly className?: string
-    readonly disabled?: boolean
-    readonly required?: boolean
-    readonly invalid?: boolean
-    readonly assertiveText?: string
-    readonly value?: Key
-    readonly defaultValue?: Key
-    readonly open?: boolean
-    readonly onOpenChange?: (isOpen?: boolean) => void
-    readonly onChange?: (key: Key) => void
-    readonly mode?: ListboxProps<T>['mode']
-  }
-
-const DropdownSelector = <T extends Record<string, unknown>>({
-  open,
-  className,
-  label = '',
-  requiredText = '',
-  subLabel,
-  assertiveText,
-  autoComplete,
-  invalid = false,
-  disabled = false,
-  required = false,
-  showLabel = false,
-  mode = 'default',
-  ...props
-}: DropdownSelectorProps<T>) => {
-  const { visuallyHiddenProps } = useVisuallyHidden()
-  const triggerRef = useRef<HTMLButtonElement>(null)
-  const selectProps = useMemo<SelectProps<T>>(
-    () => ({
-      ...props,
-      label,
-      isOpen: open,
-      isDisabled: disabled,
-      isRequired: required,
-      errorMessage: invalid && assertiveText,
-      validationState: invalid ? 'invalid' : 'valid',
-      onSelectionChange: props.onChange,
-      selectedKey: props.value,
-      defaultSelectedKey: props.defaultValue,
-    }),
-    [assertiveText, disabled, invalid, label, open, props, required]
-  )
-  const state = useSelectState<T>(selectProps)
-
-  const {
-    labelProps,
-    triggerProps,
-    valueProps,
-    menuProps,
-    errorMessageProps,
-    descriptionProps,
-  } = useSelect<T>(selectProps, state, triggerRef)
+export type DropdownSelectorOption = {
+  label: string
+  id: string
+}
 
-  const { buttonProps } = useButton(triggerProps, triggerRef)
+const defaultRequiredText = '*必須'
 
-  const hasAssertiveText =
-    assertiveText !== undefined && assertiveText.length > 0
+export default function DropdownSelector(props: DropdownSelectorProps) {
+  const triggerRef = useRef<HTMLButtonElement>(null)
+  const state = useOverlayTriggerState({})
+
+  let preview: ReactNode | undefined
+  const childArray = React.Children.toArray(props.children)
+  for (let i = 0; i < childArray.length; i++) {
+    const child = childArray[i]
+    if (React.isValidElement(child) && 'value' in child.props) {
+      const find = (child.props as { value: string }).value === props.value
+      if (find && 'children' in child.props) {
+        preview = (child.props as { children: ReactNode }).children
+        break
+      }
+    }
+  }
 
   return (
-    <DropdownSelectorRoot aria-disabled={disabled} className={className}>
-      <DropdownFieldLabel
-        label={label}
-        required={required}
-        requiredText={requiredText}
-        subLabel={subLabel}
-        {...labelProps}
-        {...(!showLabel ? visuallyHiddenProps : {})}
-      />
-      <HiddenSelect
-        state={state}
-        triggerRef={triggerRef}
-        label={label}
-        name={props.name}
-        isDisabled={disabled}
-        autoComplete={autoComplete}
-      />
-      <DropdownButtonWrapper>
-        <DropdownButton {...buttonProps} ref={triggerRef} invalid={invalid}>
-          <DropdownButtonText {...valueProps}>
-            {/*
-             * react-stately の useSelectState から取得される selectedItem の型が常に
-             * Node<T> であるが runtime では null が帰ってくることがある
-             */}
-            {/* eslint-disable-next-line @typescript-eslint/strict-boolean-expressions,@typescript-eslint/no-unnecessary-condition*/}
-            {state.selectedItem
-              ? state.selectedItem.rendered
-              : props.placeholder}
-          </DropdownButtonText>
-
-          <DropdownButtonIcon name="16/Menu" />
-        </DropdownButton>
-        {state.isOpen && (
-          <DropdownPopover
-            state={state}
-            triggerRef={triggerRef}
-            value={props.value ?? props.defaultValue}
-          >
-            <Listbox {...menuProps} state={state} mode={mode} />
-          </DropdownPopover>
-        )}
-      </DropdownButtonWrapper>
-
-      {hasAssertiveText && (
-        <AssertiveText
-          invalid={invalid}
-          {...(invalid ? errorMessageProps : descriptionProps)}
+    <DropdownSelectorRoot aria-disabled={props.disabled}>
+      {props.showLabel === true && (
+        <DropdownFieldLabel
+          label={props.label}
+          required={props.required}
+          requiredText={props.requiredText ?? defaultRequiredText}
+          subLabel={props.subLabel}
+        />
+      )}
+      <DropdownButton
+        invalid={props.invalid}
+        disabled={props.disabled}
+        onClick={() => {
+          if (props.disabled === true) return
+          state.open()
+        }}
+        ref={triggerRef}
+      >
+        <DropdownButtonText>
+          {props.placeholder !== undefined && preview === undefined
+            ? props.placeholder
+            : preview}
+        </DropdownButtonText>
+        <DropdownButtonIcon name="16/Menu" />
+      </DropdownButton>
+      {state.isOpen && (
+        <DropdownPopover
+          state={state}
+          triggerRef={triggerRef}
+          value={props.value}
         >
-          {assertiveText}
+          <ListboxRoot>
+            <DropdownSelectorContext.Provider
+              value={{
+                value: props.value,
+                setValue: (v) => {
+                  props.onChange(v)
+                  state.close()
+                },
+              }}
+            >
+              {props.children}
+            </DropdownSelectorContext.Provider>
+          </ListboxRoot>
+        </DropdownPopover>
+      )}
+      {props.assistiveText !== undefined && (
+        <AssertiveText invalid={props.invalid}>
+          {props.assistiveText}
         </AssertiveText>
       )}
     </DropdownSelectorRoot>
   )
 }
 
-export default DropdownSelector
-export const DropdownSelectorItem = Item
-
+const ListboxRoot = styled.ul`
+  padding-left: 0;
+  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),
+  ])}
+`
 const DropdownSelectorRoot = styled.div`
-  position: relative;
   display: inline-block;
   width: 100%;
 
@@ -166,11 +140,7 @@ const DropdownFieldLabel = styled(FieldLabel)`
   ${theme((o) => o.margin.bottom(8))}
 `
 
-const DropdownButtonWrapper = styled.div`
-  position: relative;
-`
-
-const DropdownButton = styled.button<{ invalid: boolean }>`
+const DropdownButton = styled.button<{ invalid?: boolean }>`
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -191,7 +161,7 @@ const DropdownButton = styled.button<{ invalid: boolean }>`
       o.outline.default.focus,
       o.bg.surface3,
       o.borderRadius(4),
-      invalid && o.outline.assertive,
+      invalid === true && o.outline.assertive,
     ])}
 `
 
@@ -205,11 +175,11 @@ const DropdownButtonIcon = styled(Icon)`
   ${theme((o) => [o.font.text2])}
 `
 
-const AssertiveText = styled.div<{ invalid: boolean }>`
+const AssertiveText = styled.div<{ invalid?: boolean }>`
   ${({ invalid }) =>
     theme((o) => [
       o.typography(14),
       o.margin.top(8),
-      invalid ? o.font.assertive : o.font.text2,
+      invalid === true ? o.font.assertive : o.font.text2,
     ])}
 `

package/src/components/DropdownSelector/utils/focusIfHTMLLIElement.tsx

@@ -0,0 +1,12 @@
+import { handleFocusByKeyBoard } from './handleFocusByKeyBoard'
+
+/**
+ * li要素ならフォーカスしてスクロールスクロール領域に見えるように親要素をスクロールする
+ * @param element
+ */
+export function focusIfHTMLLIElement(element: Node | null | undefined) {
+  if (element instanceof HTMLLIElement) {
+    element.focus({ preventScroll: true })
+    handleFocusByKeyBoard(element)
+  }
+}

package/src/components/DropdownSelector/utils/handleFocusByKeyBoard.tsx

@@ -0,0 +1,20 @@
+/**
+ * スクロールスクロール領域に見えるように親要素をスクロールする
+ * @param element
+ */
+
+export function handleFocusByKeyBoard(element: HTMLElement) {
+  const parent = element.parentElement
+  if (!parent) return
+  const rect = element.getBoundingClientRect()
+  const parentRect = parent.getBoundingClientRect()
+  if (rect.bottom > parentRect.bottom) {
+    parent.scrollTo({
+      top: parent.scrollTop + rect.bottom - parentRect.bottom,
+    })
+  } else if (rect.top < parentRect.top) {
+    parent.scrollTo({
+      top: parent.scrollTop - (parentRect.top - rect.top),
+    })
+  }
+}

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

@@ -76,10 +76,10 @@ const DefaultStory = (args: ModalProps) => {
             </ModalAlign>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fixed>
+            <Button variant="Primary" onClick={() => state.close()} fullWidth>
               Apply
             </Button>
-            <Button onClick={() => state.close()} fixed>
+            <Button onClick={() => state.close()} fullWidth>
               Cancel
             </Button>
           </ModalButtons>
@@ -140,10 +140,10 @@ const FullBottomSheetStory = (args: ModalProps) => {
             </ModalAlign>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Primary" onClick={() => state.close()} fixed>
+            <Button variant="Primary" onClick={() => state.close()} fullWidth>
               Apply
             </Button>
-            <Button onClick={() => state.close()} fixed>
+            <Button onClick={() => state.close()} fullWidth>
               Cancel
             </Button>
           </ModalButtons>
@@ -181,7 +181,7 @@ const BottomSheetStory = (args: ModalProps) => {
             </StyledModalText>
           </ModalVStack>
           <ModalButtons>
-            <Button variant="Danger" onClick={() => state.close()} fixed>
+            <Button variant="Danger" onClick={() => state.close()} fullWidth>
               削除する
             </Button>
             <ModalDismissButton>キャンセル</ModalDismissButton>

package/src/components/Modal/index.tsx

@@ -263,7 +263,7 @@ export function ModalDismissButton({ children, ...props }: ButtonProps) {
   }
 
   return (
-    <Button {...props} onClick={close} fixed>
+    <Button {...props} onClick={close} fullWidth>
       {children}
     </Button>
   )

package/src/index.ts

@@ -52,8 +52,13 @@ export {
 } from './components/LoadingSpinner'
 export {
   default as DropdownSelector,
-  DropdownSelectorItem,
+  type DropdownSelectorOption,
+  type DropdownSelectorProps,
 } from './components/DropdownSelector'
+export {
+  OptionItem,
+  type OptionItemProps,
+} from './components/DropdownSelector/OptionItem'
 export {
   default as SegmentedControl,
   type SegmentedControlProps,

package/src/components/DropdownSelector/ListBoxSection.tsx

@@ -1,60 +0,0 @@
-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,67 +0,0 @@
-import React, { memo, useRef, Fragment, useMemo } from 'react'
-import styled from 'styled-components'
-import { ListProps, ListState } from 'react-stately'
-import { useListBox } from '@react-aria/listbox'
-import { theme } from '../../styled'
-
-import { ListBoxSection } from './ListBoxSection'
-import { Divider } from './Divider'
-import { Option } from './Option'
-
-export 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}>
-          {node.type === 'section' ? (
-            <ListBoxSection section={node} state={state} />
-          ) : (
-            <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;
-  overflow: auto;
-  max-height: inherit;
-
-  ${theme((o) => [
-    o.bg.background1,
-    o.border.default,
-    o.borderRadius(8),
-    o.padding.vertical(8),
-    o.outline.default.focus,
-  ])}
-`

package/src/components/DropdownSelector/Option.tsx

@@ -1,66 +0,0 @@
-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])}
-`