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

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

@@ -1,18 +1,15 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import DropdownSelector, { DropdownSelectorProps } from '.'
 import { Story } from '../../_lib/compat'
-import { OptionItem } from './OptionItem'
+import { Divider } from './Divider'
+import MenuItemGroup from './MenuItemGroup'
+import DropdownMenuItem from './DropdownMenuItem'
 
 export default {
   title: 'DropdownSelector',
   component: DropdownSelector,
 }
 
-type Props = Omit<
-  DropdownSelectorProps,
-  'subLabel' | 'children' | 'onOpenChange'
->
-
 const baseProps: DropdownSelectorProps = {
   label: 'Label',
   value: '',
@@ -20,9 +17,12 @@ const baseProps: DropdownSelectorProps = {
   onChange: () => {
     //
   },
+  children: <DropdownMenuItem value="item" />,
 }
 
-export const Playground: Story<Props> = (props: DropdownSelectorProps) => {
+export const Playground: Story<DropdownSelectorProps> = (
+  props: DropdownSelectorProps
+) => {
   const [selected, setSelected] = useState('50')
   return (
     <div style={{ width: 288 }}>
@@ -36,9 +36,9 @@ export const Playground: Story<Props> = (props: DropdownSelectorProps) => {
       >
         {[...(Array(100) as undefined[])].map((_, i) => {
           return (
-            <OptionItem key={i} value={i.toString()}>
+            <DropdownMenuItem key={i} value={i.toString()}>
               {i}
-            </OptionItem>
+            </DropdownMenuItem>
           )
         })}
       </DropdownSelector>
@@ -48,7 +48,9 @@ export const Playground: Story<Props> = (props: DropdownSelectorProps) => {
 
 Playground.args = { ...baseProps }
 
-export const Basic: Story<Props> = (props: DropdownSelectorProps) => {
+export const Basic: Story<DropdownSelectorProps> = (
+  props: DropdownSelectorProps
+) => {
   const [selected, setSelected] = useState('')
   return (
     <div style={{ width: 288 }}>
@@ -60,9 +62,9 @@ export const Basic: Story<Props> = (props: DropdownSelectorProps) => {
         value={selected}
         label="label"
       >
-        <OptionItem value={'10'}>Apple</OptionItem>
-        <OptionItem value={'20'}>Banana</OptionItem>
-        <OptionItem value={'30'}>Orange</OptionItem>
+        <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
+        <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
+        <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
       </DropdownSelector>
     </div>
   )
@@ -70,7 +72,9 @@ export const Basic: Story<Props> = (props: DropdownSelectorProps) => {
 
 Basic.args = { ...baseProps }
 
-export const CustomChildren: Story<Props> = (props: DropdownSelectorProps) => {
+export const CustomChildren: Story<DropdownSelectorProps> = (
+  props: DropdownSelectorProps
+) => {
   const [selected, setSelected] = useState('10')
   return (
     <div style={{ width: 288 }}>
@@ -82,7 +86,7 @@ export const CustomChildren: Story<Props> = (props: DropdownSelectorProps) => {
         value={selected}
         label="label"
       >
-        <OptionItem value={'10'}>
+        <DropdownMenuItem value={'10'}>
           <div
             style={{
               color: 'pink',
@@ -91,8 +95,8 @@ export const CustomChildren: Story<Props> = (props: DropdownSelectorProps) => {
           >
             Apple
           </div>
-        </OptionItem>
-        <OptionItem value={'20'}>
+        </DropdownMenuItem>
+        <DropdownMenuItem value={'20'}>
           <div
             style={{
               color: 'yellowgreen',
@@ -101,8 +105,8 @@ export const CustomChildren: Story<Props> = (props: DropdownSelectorProps) => {
           >
             Banana
           </div>
-        </OptionItem>
-        <OptionItem value={'30'}>
+        </DropdownMenuItem>
+        <DropdownMenuItem value={'30'}>
           <div
             style={{
               color: 'orange',
@@ -111,10 +115,41 @@ export const CustomChildren: Story<Props> = (props: DropdownSelectorProps) => {
           >
             Orange
           </div>
-        </OptionItem>
+        </DropdownMenuItem>
       </DropdownSelector>
     </div>
   )
 }
 
 CustomChildren.args = { ...baseProps }
+
+export const SectionList: Story<DropdownSelectorProps> = (
+  props: DropdownSelectorProps
+) => {
+  const [selected, setSelected] = useState('10')
+  return (
+    <div style={{ width: 288 }}>
+      <DropdownSelector
+        {...props}
+        onChange={(value) => {
+          setSelected(value)
+        }}
+        value={selected}
+        label="label"
+      >
+        <MenuItemGroup text="fruits">
+          <DropdownMenuItem value={'10'}>Apple</DropdownMenuItem>
+          <DropdownMenuItem value={'20'}>Banana</DropdownMenuItem>
+          <DropdownMenuItem value={'30'}>Orange</DropdownMenuItem>
+        </MenuItemGroup>
+        <Divider />
+        <MenuItemGroup text="vehicle">
+          <DropdownMenuItem value={'40'}>bicycle</DropdownMenuItem>
+          <DropdownMenuItem value={'50'}>car</DropdownMenuItem>
+          <DropdownMenuItem value={'60'}>train</DropdownMenuItem>
+        </MenuItemGroup>
+      </DropdownSelector>
+    </div>
+  )
+}
+SectionList.args = { ...baseProps }

package/src/components/DropdownSelector/index.tsx

@@ -1,18 +1,12 @@
-import React, { ReactNode, createContext, useRef } from 'react'
+import { ReactNode, useState, useRef } from 'react'
 import styled from 'styled-components'
-import { useOverlayTriggerState } from 'react-stately'
 import { disabledSelector } from '@charcoal-ui/utils'
 import Icon from '../Icon'
 import FieldLabel from '../FieldLabel'
 import { theme } from '../../styled'
 import { DropdownPopover } from './DropdownPopover'
-
-export const DropdownSelectorContext = createContext({
-  value: '',
-  setValue: (_v: string) => {
-    // empty
-  },
-})
+import { findPreviewRecursive } from './utils/findPreviewRecursive'
+import MenuList, { MenuListChildren } from './MenuList'
 
 export type DropdownSelectorProps = {
   label: string
@@ -25,33 +19,16 @@ export type DropdownSelectorProps = {
   required?: boolean
   requiredText?: string
   subLabel?: ReactNode
-  children?: ReactNode
+  children: MenuListChildren
   onChange: (value: string) => void
 }
 
-export type DropdownSelectorOption = {
-  label: string
-  id: string
-}
-
 const defaultRequiredText = '*必須'
 
 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
-      }
-    }
-  }
+  const [isOpen, setIsOpen] = useState(false)
+  const preview = findPreviewRecursive(props.children, props.value)
 
   return (
     <DropdownSelectorRoot aria-disabled={props.disabled}>
@@ -68,7 +45,7 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         disabled={props.disabled}
         onClick={() => {
           if (props.disabled === true) return
-          state.open()
+          setIsOpen(true)
         }}
         ref={triggerRef}
       >
@@ -79,27 +56,22 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         </DropdownButtonText>
         <DropdownButtonIcon name="16/Menu" />
       </DropdownButton>
-      {state.isOpen && (
-        <DropdownPopover
-          state={state}
-          triggerRef={triggerRef}
+      <DropdownPopover
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        triggerRef={triggerRef}
+        value={props.value}
+      >
+        <MenuList
           value={props.value}
+          onChange={(v) => {
+            props.onChange(v)
+            setIsOpen(false)
+          }}
         >
-          <ListboxRoot>
-            <DropdownSelectorContext.Provider
-              value={{
-                value: props.value,
-                setValue: (v) => {
-                  props.onChange(v)
-                  state.close()
-                },
-              }}
-            >
-              {props.children}
-            </DropdownSelectorContext.Provider>
-          </ListboxRoot>
-        </DropdownPopover>
-      )}
+          {props.children}
+        </MenuList>
+      </DropdownPopover>
       {props.assistiveText !== undefined && (
         <AssertiveText invalid={props.invalid}>
           {props.assistiveText}
@@ -109,21 +81,6 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
   )
 }
 
-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`
   display: inline-block;
   width: 100%;

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

@@ -0,0 +1,38 @@
+import React, { ReactNode } from 'react'
+
+/**
+ * DropdownSelectorの選択中の要素をレンダリングするため、
+ * 選択中のMenuItemを再帰的に探索しReactNodeを返す。
+ *
+ * @param children
+ * @param value
+ * @param values
+ * @returns
+ */
+export function findPreviewRecursive(
+  children: ReactNode,
+  value: string
+): ReactNode | undefined {
+  const childArray = React.Children.toArray(children)
+  for (let i = 0; i < childArray.length; i++) {
+    const child = childArray[i]
+    if (React.isValidElement(child)) {
+      if ('value' in child.props) {
+        const childValue = (child.props as { value: string }).value
+        if (childValue === value && 'children' in child.props) {
+          const children = (child.props as { children: ReactNode }).children
+          return children
+        }
+      }
+      if ('children' in child.props) {
+        const children = findPreviewRecursive(
+          (child.props as { children: ReactNode }).children,
+          value
+        )
+        if (children !== undefined) {
+          return children
+        }
+      }
+    }
+  }
+}

package/src/components/FieldLabel/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 import styled from 'styled-components'
 import { createTheme } from '@charcoal-ui/styled'
 

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import Icon, { IconProps } from '.'
 import { KNOWN_ICON_FILES } from '@charcoal-ui/icons'
 import { Story } from '../../_lib/compat'

package/src/components/Icon/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import * as React from 'react'
 
 import '@charcoal-ui/icons'
 import type { PixivIcon, Props } from '@charcoal-ui/icons'

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import type { Story } from '../../_lib/compat'
 import '@charcoal-ui/icons'
 import IconButton from '.'

package/src/components/IconButton/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import { forwardRef } from 'react'
 import styled from 'styled-components'
 import { theme } from '../../styled'
 import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
@@ -15,7 +15,7 @@ interface StyledProps {
 
 export type IconButtonProps = StyledProps & ClickableProps
 
-const IconButton = React.forwardRef<ClickableElement, IconButtonProps>(
+const IconButton = forwardRef<ClickableElement, IconButtonProps>(
   function IconButtonInner(
     { variant = 'Default', size = 'M', icon, ...rest }: IconButtonProps,
     ref

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

@@ -5,7 +5,7 @@ import {
   text,
   withKnobs,
 } from '@storybook/addon-knobs'
-import React, { useRef } from 'react'
+import { useRef } from 'react'
 import LoadingSpinner, {
   LoadingSpinnerIcon,
   LoadingSpinnerIconHandler,

package/src/components/LoadingSpinner/index.tsx

@@ -1,4 +1,4 @@
-import React, { useImperativeHandle, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useRef } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { theme } from '../../styled'
 
@@ -67,23 +67,22 @@ export interface LoadingSpinnerIconHandler {
   restart(): void
 }
 
-export const LoadingSpinnerIcon = React.forwardRef<
-  LoadingSpinnerIconHandler,
-  Props
->(function LoadingSpinnerIcon({ once = false }, ref) {
-  const iconRef = useRef<HTMLDivElement>(null)
+export const LoadingSpinnerIcon = forwardRef<LoadingSpinnerIconHandler, Props>(
+  function LoadingSpinnerIcon({ once = false }, ref) {
+    const iconRef = useRef<HTMLDivElement>(null)
 
-  useImperativeHandle(ref, () => ({
-    restart: () => {
-      if (!iconRef.current) {
-        return
-      }
-      iconRef.current.dataset.resetAnimation = 'true'
-      // Force reflow hack!
-      void iconRef.current.offsetWidth
-      delete iconRef.current.dataset.resetAnimation
-    },
-  }))
+    useImperativeHandle(ref, () => ({
+      restart: () => {
+        if (!iconRef.current) {
+          return
+        }
+        iconRef.current.dataset.resetAnimation = 'true'
+        // Force reflow hack!
+        void iconRef.current.offsetWidth
+        delete iconRef.current.dataset.resetAnimation
+      },
+    }))
 
-  return <Icon ref={iconRef} once={once} />
-})
+    return <Icon ref={iconRef} once={once} />
+  }
+)

package/src/components/Modal/ModalPlumbing.tsx

@@ -1,4 +1,3 @@
-import React from 'react'
 import { ModalTitle } from '.'
 import styled from 'styled-components'
 import { theme } from '../../styled'

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

@@ -1,4 +1,3 @@
-import React from 'react'
 import { Story } from '../../_lib/compat'
 import Modal, { ModalDismissButton, ModalProps } from '.'
 import { OverlayProvider } from '@react-aria/overlays'

package/src/components/Modal/index.tsx

@@ -1,4 +1,5 @@
-import React, { useContext, useRef } from 'react'
+import { useContext, useRef } from 'react'
+import * as React from 'react'
 import {
   AriaModalOverlayProps,
   Overlay,

package/src/components/MultiSelect/context.ts

@@ -5,7 +5,7 @@ type MultiSelectGroupContext = {
   selected: string[]
   disabled: boolean
   readonly: boolean
-  hasError: boolean
+  invalid: boolean
   onChange: ({ value, selected }: { value: string; selected: boolean }) => void
 }
 
@@ -14,7 +14,7 @@ export const MultiSelectGroupContext = createContext<MultiSelectGroupContext>({
   selected: [],
   disabled: false,
   readonly: false,
-  hasError: false,
+  invalid: false,
   onChange() {
     throw new Error(
       'Cannot find `onChange()` handler. Perhaps you forgot to wrap it with `<MultiSelectGroup />` ?'

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

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import { useState } from 'react'
 import { Story } from '../../_lib/compat'
 import styled from 'styled-components'
 import { MultiSelectGroup, default as MultiSelect } from '.'
@@ -12,7 +12,7 @@ export default {
         type: 'text',
       },
     },
-    ariaLabel: {
+    label: {
       control: {
         type: 'text',
       },
@@ -22,11 +22,6 @@ export default {
         type: 'boolean',
       },
     },
-    firstOptionForceChecked: {
-      control: {
-        type: 'boolean',
-      },
-    },
     disabled: {
       control: {
         type: 'boolean',
@@ -37,7 +32,7 @@ export default {
         type: 'boolean',
       },
     },
-    hasError: {
+    invalid: {
       control: {
         type: 'boolean',
       },
@@ -53,13 +48,12 @@ export default {
 
 type Props = {
   name: string
-  ariaLabel: string
+  label: string
   selected: boolean
-  firstOptionForceChecked: boolean
   onChange: (selected: string[]) => void
   disabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
   variant?: 'default' | 'overlay'
 }
 
@@ -71,35 +65,29 @@ const StyledMultiSelectGroup = styled(MultiSelectGroup)`
 
 const Template: Story<Props> = ({
   name,
-  ariaLabel,
+  label,
   selected,
-  firstOptionForceChecked,
   onChange,
   disabled,
   readonly,
-  hasError,
+  invalid,
   variant,
 }) => {
   return (
     <StyledMultiSelectGroup
       {...{
         name,
-        ariaLabel,
+        label,
         onChange,
         disabled,
         readonly,
-        hasError,
+        invalid,
       }}
       className={''}
       selected={selected ? ['選択肢1', '選択肢3'] : []}
     >
       {[1, 2, 3, 4].map((idx) => (
-        <MultiSelect
-          value={`選択肢${idx}`}
-          forceChecked={firstOptionForceChecked && idx === 1}
-          variant={variant}
-          key={idx}
-        >
+        <MultiSelect value={`選択肢${idx}`} variant={variant} key={idx}>
           選択肢{idx}
         </MultiSelect>
       ))}
@@ -110,12 +98,11 @@ const Template: Story<Props> = ({
 export const Default = Template.bind({})
 Default.args = {
   name: '',
-  ariaLabel: '',
+  label: '',
   selected: true,
-  firstOptionForceChecked: false,
   disabled: false,
   readonly: false,
-  hasError: false,
+  invalid: false,
   variant: 'default',
   // eslint-disable-next-line no-console
   onChange: (selected) => console.log(selected),
@@ -123,10 +110,10 @@ Default.args = {
 
 type PlaygroundProps = {
   name: string
-  ariaLabel: string
+  label: string
   disabled?: boolean
   readonly?: boolean
-  hasError?: boolean
+  invalid?: boolean
   variant?: 'default' | 'overlay'
 }
 
@@ -149,9 +136,9 @@ export const Playground: Story<PlaygroundProps> = (props) => {
 }
 Playground.args = {
   name: 'defaultName',
-  ariaLabel: '',
+  label: '',
   disabled: false,
   readonly: false,
-  hasError: false,
+  invalid: false,
   variant: 'default',
 }

package/src/components/MultiSelect/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 { default as MultiSelect, MultiSelectGroup } from '.'
 import { light } from '@charcoal-ui/theme'
@@ -184,7 +183,7 @@ describe('MultiSelect', () => {
     let allOptions: HTMLInputElement[]
 
     beforeEach(() => {
-      render(<TestComponent selected={['option1']} hasError={true} />)
+      render(<TestComponent selected={['option1']} invalid={true} />)
 
       option1 = screen.getByDisplayValue('option1')
       option2 = screen.getByDisplayValue('option2')
@@ -199,20 +198,6 @@ describe('MultiSelect', () => {
     })
   })
 
-  describe('option1 is force checked', () => {
-    let option1: HTMLInputElement
-
-    beforeEach(() => {
-      render(<TestComponent selected={[]} firstOptionForceChecked={true} />)
-
-      option1 = screen.getByDisplayValue('option1')
-    })
-
-    it('option1 is force checked', () => {
-      expect(option1.checked).toBeTruthy()
-    })
-  })
-
   describe('option1 is disabled', () => {
     let option1: HTMLInputElement
     let option2: HTMLInputElement
@@ -239,8 +224,7 @@ const TestComponent = ({
   childOnChange,
   parentDisabled = false,
   readonly = false,
-  hasError = false,
-  firstOptionForceChecked = false,
+  invalid = false,
   firstOptionDisabled = false,
 }: {
   selected: string[]
@@ -248,23 +232,21 @@ const TestComponent = ({
   childOnChange?: (payload: { value: string; selected: boolean }) => void
   parentDisabled?: boolean
   readonly?: boolean
-  hasError?: boolean
-  firstOptionForceChecked?: boolean
+  invalid?: boolean
   firstOptionDisabled?: boolean
 }) => {
   return (
     <ThemeProvider theme={light}>
       <MultiSelectGroup
         name="defaultName"
-        ariaLabel="defaultAriaLabel"
+        label="defaultAriaLabel"
         disabled={parentDisabled}
         onChange={parentOnChange}
-        {...{ selected, readonly, hasError }}
+        {...{ selected, readonly, invalid }}
       >
         <MultiSelect
           value="option1"
           disabled={firstOptionDisabled}
-          forceChecked={firstOptionForceChecked}
           onChange={childOnChange}
         >
           Option 1