@charcoal-ui/react 3.0.0-beta.1 → 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'
 
@@ -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;
@@ -66,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,
@@ -18,13 +19,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 +137,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 +182,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 +193,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/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 />` ?'