@charcoal-ui/react 3.0.0-beta.0 → 3.0.0-beta.2

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/LoadingSpinner/index.tsx

@@ -19,6 +19,7 @@ const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   padding: number
   transparent: boolean
 }>`
+  box-sizing: content-box;
   margin: auto;
   padding: ${(props) => props.padding}px;
   border-radius: 8px;

package/src/components/Modal/index.tsx

@@ -18,13 +18,16 @@ import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
 import IconButton from '../IconButton'
 
+type BottomSheet = boolean | 'full'
+type Size = 'S' | 'M' | 'L'
+
 export type ModalProps = AriaModalOverlayProps &
   AriaDialogProps & {
     children: React.ReactNode
     zIndex?: number
     title: string
-    size?: 'S' | 'M' | 'L'
-    bottomSheet?: boolean | 'full'
+    size?: Size
+    bottomSheet?: BottomSheet
     isOpen: boolean
     onClose: () => void
 
@@ -133,28 +136,30 @@ export default function Modal({
             style={transitionEnabled ? { backgroundColor } : {}}
           >
             <FocusScope contain restoreFocus autoFocus>
-              <ModalDialog
-                ref={ref}
-                {...overlayProps}
-                {...modalProps}
-                {...dialogProps}
-                style={transitionEnabled ? { transform } : {}}
-                size={size}
-                bottomSheet={bottomSheet}
-              >
-                <ModalContext.Provider
-                  value={{ titleProps, title, close: onClose, showDismiss }}
+              <DialogContainer bottomSheet={bottomSheet} size={size}>
+                <ModalDialog
+                  ref={ref}
+                  {...overlayProps}
+                  {...modalProps}
+                  {...dialogProps}
+                  style={transitionEnabled ? { transform } : {}}
+                  size={size}
+                  bottomSheet={bottomSheet}
                 >
-                  {children}
-                  {isDismissable === true && (
-                    <ModalCrossButton
-                      size="S"
-                      icon="24/Close"
-                      onClick={onClose}
-                    />
-                  )}
-                </ModalContext.Provider>
-              </ModalDialog>
+                  <ModalContext.Provider
+                    value={{ titleProps, title, close: onClose, showDismiss }}
+                  >
+                    {children}
+                    {isDismissable === true && (
+                      <ModalCrossButton
+                        size="S"
+                        icon="24/Close"
+                        onClick={onClose}
+                      />
+                    )}
+                  </ModalContext.Provider>
+                </ModalDialog>
+              </DialogContainer>
             </FocusScope>
           </ModalBackground>
         </Overlay>
@@ -176,6 +181,8 @@ const ModalContext = React.createContext<{
 
 const ModalBackground = animated(styled.div<{ zIndex: number }>`
   z-index: ${({ zIndex }) => zIndex};
+  overflow: scroll;
+  display: flex;
   position: fixed;
   top: 0;
   left: 0;
@@ -185,50 +192,61 @@ const ModalBackground = animated(styled.div<{ zIndex: number }>`
   ${theme((o) => [o.bg.surface4])}
 `)
 
+const DialogContainer = styled.div<{ bottomSheet: BottomSheet; size: Size }>`
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
+  width: ${(p) => {
+    switch (p.size) {
+      case 'S': {
+        return columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      case 'M': {
+        return columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      case 'L': {
+        return columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
+      }
+      default: {
+        return unreachable(p.size)
+      }
+    }
+  }}px;
+
+  @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
+    width: calc(100% - 48px);
+    ${(p) =>
+      p.bottomSheet !== false &&
+      css`
+        margin: 0;
+        padding: 0;
+        bottom: 0;
+        position: absolute;
+        width: 100%;
+        ${p.bottomSheet === 'full' ? 'height: 100%' : ''};
+      `}
+  }
+`
+
 const ModalDialog = animated(styled.div<{
-  size: 'S' | 'M' | 'L'
-  bottomSheet: boolean | 'full'
+  size: Size
+  bottomSheet: BottomSheet
 }>`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  width: ${(p) =>
-    p.size === 'S'
-      ? columnSystem(3, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : p.size === 'M'
-      ? columnSystem(4, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
-      p.size === 'L'
-      ? columnSystem(6, COLUMN_UNIT, GUTTER_UNIT) + GUTTER_UNIT * 2
-      : unreachable(p.size)}px;
+  position: relative;
+  margin: auto;
+  padding: 24px 0;
 
   ${theme((o) => [o.bg.background1, o.borderRadius(24)])}
-
   @media ${({ theme }) => maxWidth(theme.breakpoint.screen1)} {
     ${(p) =>
-      p.bottomSheet === 'full'
-        ? css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-            height: 100%;
-          `
-        : p.bottomSheet
-        ? css`
-            top: auto;
-            bottom: 0;
-            left: 0;
-            transform: none;
-            border-radius: 0;
-            width: 100%;
-          `
-        : css`
-            width: calc(100% - 48px);
-          `}
+      p.bottomSheet !== false &&
+      css`
+        border-radius: 0;
+        ${p.bottomSheet === 'full' &&
+        css`
+          height: 100%;
+        `}
+      `}
   }
 `)
 

package/src/components/Radio/index.tsx

@@ -82,6 +82,8 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     width: 20px;
     height: 20px;
 
+    cursor: pointer;
+
     ${({ hasError = false }) =>
       theme((o) => [
         o.borderRadius('oval'),

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

@@ -13,6 +13,7 @@ export const StringSegments: Story<SegmentedControlProps> = (props) => {
 }
 
 StringSegments.args = {
+  name: 'test',
   data: ['option1', 'option2', 'option3'],
   disabled: false,
   readonly: false,
@@ -24,6 +25,7 @@ export const ObjectSegments: Story<SegmentedControlProps> = (props) => {
 }
 
 ObjectSegments.args = {
+  name: 'test',
   data: [
     { label: '選択肢1', value: 'option1' },
     { label: '選択肢2', value: 'option2' },

package/src/components/SegmentedControl/index.tsx

@@ -41,6 +41,7 @@ const SegmentedControl = forwardRef<HTMLDivElement, SegmentedControlProps>(
         isDisabled: props.disabled,
         isReadOnly: props.readonly,
         isRequired: props.required,
+        'aria-label': props.name,
       }),
       [props]
     )

package/src/components/TextField/index.tsx

@@ -349,6 +349,7 @@ const PrefixContainer = styled.span`
   top: 50%;
   left: 8px;
   transform: translateY(-50%);
+  z-index: 1;
 `
 
 const SuffixContainer = styled.span`

package/src/index.ts

@@ -52,11 +52,16 @@ 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,
 } from './components/SegmentedControl'
-export { default as Checkbox } from './components/Checkbox'
+export { default as Checkbox, type CheckboxProps } from './components/Checkbox'
 export { default as TagItem, type TagItemProps } from './components/TagItem'

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``