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

package/src/components/MultiSelect/index.tsx

@@ -1,4 +1,5 @@
-import React, { ChangeEvent, useCallback, useContext } from 'react'
+import { ChangeEvent, useCallback, useContext } from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import warning from 'warning'
 import { theme } from '../../styled'
@@ -8,7 +9,6 @@ import { MultiSelectGroupContext } from './context'
 
 export type MultiSelectProps = React.PropsWithChildren<{
   value: string
-  forceChecked?: boolean
   disabled?: boolean
   variant?: 'default' | 'overlay'
   onChange?: (payload: { value: string; selected: boolean }) => void
@@ -16,7 +16,6 @@ export type MultiSelectProps = React.PropsWithChildren<{
 
 export default function MultiSelect({
   value,
-  forceChecked = false,
   disabled = false,
   onChange,
   variant = 'default',
@@ -27,7 +26,7 @@ export default function MultiSelect({
     selected,
     disabled: parentDisabled,
     readonly,
-    hasError,
+    invalid,
     onChange: parentOnChange,
   } = useContext(MultiSelectGroupContext)
 
@@ -37,7 +36,7 @@ export default function MultiSelect({
     `"name" is not Provided for <MultiSelect>. Perhaps you forgot to wrap with <MultiSelectGroup> ?`
   )
 
-  const isSelected = selected.includes(value) || forceChecked
+  const isSelected = selected.includes(value)
   const isDisabled = disabled || parentDisabled || readonly
 
   const handleChange = useCallback(
@@ -57,17 +56,17 @@ export default function MultiSelect({
         {...{
           name,
           value,
-          hasError,
+          invalid,
         }}
         checked={isSelected}
         disabled={isDisabled}
         onChange={handleChange}
         overlay={variant === 'overlay'}
-        aria-invalid={hasError}
+        aria-invalid={invalid}
       />
       <MultiSelectInputOverlay
         overlay={variant === 'overlay'}
-        hasError={hasError}
+        invalid={invalid}
         aria-hidden={true}
       >
         <pixiv-icon name="24/Check" unsafe-non-guideline-scale={16 / 24} />
@@ -97,7 +96,7 @@ const MultiSelectLabel = styled.div`
 `
 
 const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
-  hasError: boolean
+  invalid: boolean
   overlay: boolean
 }>`
   &[type='checkbox'] {
@@ -111,11 +110,11 @@ const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
       ${theme((o) => o.bg.brand.hover.press)}
     }
 
-    ${({ hasError, overlay }) =>
+    ${({ invalid, overlay }) =>
       theme((o) => [
         o.bg.text3.hover.press,
         o.borderRadius('oval'),
-        hasError && !overlay && o.outline.assertive,
+        invalid && !overlay && o.outline.assertive,
         overlay && o.bg.surface4,
       ])};
   }
@@ -123,7 +122,7 @@ const MultiSelectInput = styled.input.attrs({ type: 'checkbox' })<{
 
 const MultiSelectInputOverlay = styled.div<{
   overlay: boolean
-  hasError: boolean
+  invalid: boolean
 }>`
   position: absolute;
   top: -2px;
@@ -133,13 +132,13 @@ const MultiSelectInputOverlay = styled.div<{
   align-items: center;
   justify-content: center;
 
-  ${({ hasError, overlay }) =>
+  ${({ invalid, overlay }) =>
     theme((o) => [
       o.width.px(24),
       o.height.px(24),
       o.borderRadius('oval'),
       o.font.text5,
-      hasError && overlay && o.outline.assertive,
+      invalid && overlay && o.outline.assertive,
     ])}
 
   ${({ overlay }) =>
@@ -154,23 +153,23 @@ const MultiSelectInputOverlay = styled.div<{
 export type MultiSelectGroupProps = React.PropsWithChildren<{
   className?: string
   name: string
-  ariaLabel: string
+  label: string
   selected: string[]
   onChange: (selected: string[]) => void
   disabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
 }>
 
 export function MultiSelectGroup({
   className,
   name,
-  ariaLabel,
+  label,
   selected,
   onChange,
   disabled = false,
   readonly = false,
-  hasError = false,
+  invalid = false,
   children,
 }: MultiSelectGroupProps) {
   const handleChange = useCallback(
@@ -197,15 +196,11 @@ export function MultiSelectGroup({
         selected: Array.from(new Set(selected)),
         disabled,
         readonly,
-        hasError,
+        invalid,
         onChange: handleChange,
       }}
     >
-      <div
-        className={className}
-        aria-label={ariaLabel}
-        data-testid="SelectGroup"
-      >
+      <div className={className} aria-label={label} data-testid="SelectGroup">
         {children}
       </div>
     </MultiSelectGroupContext.Provider>

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import { css } from 'styled-components'
 import { Story } from '../../_lib/compat'
 import Radio, { RadioGroup } from '.'

package/src/components/Radio/index.test.tsx

@@ -1,5 +1,4 @@
 import { fireEvent, render, screen } from '@testing-library/react'
-import React from 'react'
 import { ThemeProvider } from 'styled-components'
 import Radio, { RadioGroup } from '.'
 import { light } from '@charcoal-ui/theme'

package/src/components/Radio/index.tsx

@@ -1,4 +1,5 @@
-import React, { useCallback, useContext } from 'react'
+import { useCallback, useContext } from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 import warning from 'warning'
 import { theme } from '../../styled'

package/src/components/SegmentedControl/RadioGroupContext.tsx

@@ -1,4 +1,5 @@
-import React, { createContext, useContext } from 'react'
+import { createContext, useContext } from 'react'
+import * as React from 'react'
 import { RadioGroupState } from 'react-stately'
 
 const RadioContext = createContext<RadioGroupState | null>(null)

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import SegmentedControl, { SegmentedControlProps } from '.'
 import { Story } from '../../_lib/compat'
 

package/src/components/SegmentedControl/index.tsx

@@ -1,4 +1,5 @@
-import React, { forwardRef, memo, useMemo, useRef } from 'react'
+import { ReactNode, forwardRef, memo, useMemo, useRef } from 'react'
+import * as React from 'react'
 import { useRadioGroupState } from 'react-stately'
 import {
   AriaRadioGroupProps,
@@ -76,13 +77,18 @@ export default memo(SegmentedControl)
 type RadioProps = {
   value: string
   disabled?: boolean
+  children?: ReactNode
 }
 
-const Segmented: React.FC<RadioProps> = ({ children, ...props }) => {
+const Segmented = (props: RadioProps) => {
   const state = useRadioContext()
   const ref = useRef<HTMLInputElement>(null)
   const ariaRadioProps = useMemo<AriaRadioProps>(
-    () => ({ ...props, isDisabled: props.disabled }),
+    () => ({
+      value: props.value,
+      isDisabled: props.disabled,
+      children: props.children,
+    }),
     [props]
   )
 
@@ -99,7 +105,7 @@ const Segmented: React.FC<RadioProps> = ({ children, ...props }) => {
     >
       <SegmentedInput {...inputProps} ref={ref} />
       <RadioLabel>
-        <SegmentedLabelInner>{children}</SegmentedLabelInner>
+        <SegmentedLabelInner>{props.children}</SegmentedLabelInner>
       </RadioLabel>
     </SegmentedRoot>
   )

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

@@ -1,5 +1,5 @@
 import { action } from '@storybook/addon-actions'
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Story } from '../../_lib/compat'
 import Switch from '.'
 

package/src/components/Switch/index.tsx

@@ -1,6 +1,7 @@
 import { useSwitch } from '@react-aria/switch'
 import type { AriaSwitchProps } from '@react-types/switch'
-import React, { useRef, useMemo } from 'react'
+import { useRef, useMemo } from 'react'
+import * as React from 'react'
 import { useToggleState } from 'react-stately'
 import styled from 'styled-components'
 import { theme } from '../../styled'

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import styled from 'styled-components'
 import TagItem, { TagItemProps } from '.'
 import { Story } from '../../_lib/compat'

package/src/components/TagItem/index.tsx

@@ -1,9 +1,4 @@
-import React, {
-  forwardRef,
-  memo,
-  useMemo,
-  ComponentPropsWithoutRef,
-} from 'react'
+import { forwardRef, memo, useMemo, ComponentPropsWithoutRef } from 'react'
 import { useObjectRef } from '@react-aria/utils'
 import styled, { css } from 'styled-components'
 import { theme } from '../../styled'

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

@@ -1,5 +1,4 @@
 import { action } from '@storybook/addon-actions'
-import React from 'react'
 import styled from 'styled-components'
 import { Story } from '../../_lib/compat'
 import Clickable from '../Clickable'

package/src/components/TextField/index.tsx

@@ -1,12 +1,7 @@
 import { useTextField } from '@react-aria/textfield'
 import { useVisuallyHidden } from '@react-aria/visually-hidden'
-import React, {
-  ReactNode,
-  useCallback,
-  useEffect,
-  useRef,
-  useState,
-} from 'react'
+import { ReactNode, useCallback, useEffect, useRef, useState } from 'react'
+import * as React from 'react'
 import styled, { css } from 'styled-components'
 import FieldLabel, { FieldLabelProps } from '../FieldLabel'
 import { createTheme } from '@charcoal-ui/styled'

package/src/components/a11y.test.tsx

@@ -1,7 +1,6 @@
 import path from 'path'
 import glob from 'glob'
 import { axe, toHaveNoViolations } from 'jest-axe'
-import React from 'react'
 import { render } from '@testing-library/react'
 import { ThemeProvider } from 'styled-components'
 import { Story } from '../_lib/compat'

package/src/core/CharcoalProvider.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import { ThemeProvider } from 'styled-components'
 import ComponentAbstraction, { Components } from './ComponentAbstraction'
 import { TokenInjector } from '@charcoal-ui/styled'

package/src/core/ComponentAbstraction.tsx

@@ -1,4 +1,5 @@
-import React, { useContext } from 'react'
+import { useContext } from 'react'
+import * as React from 'react'
 
 export type LinkProps = {
   /**

package/src/index.ts

@@ -52,13 +52,16 @@ export {
 } from './components/LoadingSpinner'
 export {
   default as DropdownSelector,
-  type DropdownSelectorOption,
   type DropdownSelectorProps,
 } from './components/DropdownSelector'
 export {
-  OptionItem,
-  type OptionItemProps,
-} from './components/DropdownSelector/OptionItem'
+  default as DropdownMenuItem,
+  type DropdownMenuItemProps,
+} from './components/DropdownSelector/DropdownMenuItem'
+export {
+  default as MenuItemGroup,
+  type MenuItemGroupProps,
+} from './components/DropdownSelector/MenuItemGroup'
 export {
   default as SegmentedControl,
   type SegmentedControlProps,

package/src/components/DropdownSelector/OptionItem.tsx

@@ -1,85 +0,0 @@
-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/utils/focusIfHTMLLIElement.tsx

@@ -1,12 +0,0 @@
-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

@@ -1,20 +0,0 @@
-/**
- * スクロールスクロール領域に見えるように親要素をスクロールする
- * @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),
-    })
-  }
-}