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

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

@@ -0,0 +1,69 @@
+import { RefObject, useRef } from 'react'
+import { ReactNode } from 'react'
+import { DismissButton, Overlay, usePopover } from '@react-aria/overlays'
+import styled from 'styled-components'
+import { theme } from '../../../styled'
+
+export type PopoverProps = {
+  isOpen: boolean
+  onClose: () => void
+  children: ReactNode
+  triggerRef: RefObject<Element>
+  popoverRef?: RefObject<HTMLDivElement>
+}
+
+const _empty = () => null
+
+/**
+ * 画面の全面に動的に開くことができるコンテナ要素
+ * 外の要素をクリックしたり、内部からフォーカスを移動した場合に自動的に閉じる
+ *
+ * triggerRefの付近に画面内に収まるように表示される
+ */
+export default function Popover(props: PopoverProps) {
+  const defaultPopoverRef = useRef<HTMLDivElement>(null)
+  const finalPopoverRef =
+    props.popoverRef === undefined ? defaultPopoverRef : props.popoverRef
+  const { popoverProps, underlayProps } = usePopover(
+    {
+      triggerRef: props.triggerRef,
+      popoverRef: finalPopoverRef,
+      containerPadding: 16,
+    },
+    {
+      close: props.onClose,
+      isOpen: props.isOpen,
+      // never used
+      open: _empty,
+      setOpen: _empty,
+      toggle: _empty,
+    }
+  )
+
+  if (!props.isOpen) return null
+
+  return (
+    <Overlay portalContainer={document.body}>
+      <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />
+      <DropdownPopoverDiv {...popoverProps} ref={finalPopoverRef}>
+        <DismissButton onDismiss={() => props.onClose()} />
+        {props.children}
+        <DismissButton onDismiss={() => props.onClose()} />
+      </DropdownPopoverDiv>
+    </Overlay>
+  )
+}
+
+const DropdownPopoverDiv = styled.div`
+  margin: 4px 0;
+  list-style: none;
+  overflow: auto;
+  max-height: inherit;
+
+  ${theme((o) => [
+    o.bg.background1,
+    o.border.default,
+    o.borderRadius(8),
+    o.padding.vertical(8),
+  ])}
+`

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,25 +56,22 @@ export default function DropdownSelector(props: DropdownSelectorProps) {
         </DropdownButtonText>
         <DropdownButtonIcon name="16/Menu" />
       </DropdownButton>
-      {state.isOpen && (
+      {isOpen && (
         <DropdownPopover
-          state={state}
+          isOpen={isOpen}
+          onClose={() => setIsOpen(false)}
           triggerRef={triggerRef}
           value={props.value}
         >
-          <ListboxRoot>
-            <DropdownSelectorContext.Provider
-              value={{
-                value: props.value,
-                setValue: (v) => {
-                  props.onChange(v)
-                  state.close()
-                },
-              }}
-            >
-              {props.children}
-            </DropdownSelectorContext.Provider>
-          </ListboxRoot>
+          <MenuList
+            value={props.value}
+            onChange={(v) => {
+              props.onChange(v)
+              setIsOpen(false)
+            }}
+          >
+            {props.children}
+          </MenuList>
         </DropdownPopover>
       )}
       {props.assistiveText !== undefined && (
@@ -109,21 +83,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,39 @@
+import { ReactNode } from 'react'
+import * as React 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,
@@ -21,9 +21,15 @@ export function Basic() {
   const size = number('size', 48)
   const padding = number('padding', 16)
   const transparent = boolean('transparent', false)
+  const className = text('className', 'basic')
 
   return (
-    <LoadingSpinner size={size} padding={padding} transparent={transparent} />
+    <LoadingSpinner
+      size={size}
+      padding={padding}
+      transparent={transparent}
+      className={className}
+    />
   )
 }
 

package/src/components/LoadingSpinner/index.tsx

@@ -1,19 +1,35 @@
-import React, { useImperativeHandle, useRef } from 'react'
+import { forwardRef, useImperativeHandle, useRef, memo } from 'react'
 import styled, { keyframes } from 'styled-components'
 import { theme } from '../../styled'
 
-export default function LoadingSpinner({
-  size = 48,
-  padding = 16,
-  transparent = false,
-}) {
-  return (
-    <LoadingSpinnerRoot size={size} padding={padding} transparent={transparent}>
-      <LoadingSpinnerIcon />
-    </LoadingSpinnerRoot>
-  )
+export type LoadingSpinnerProps = {
+  readonly size?: number
+  readonly padding?: number
+  readonly transparent?: boolean
+  readonly className?: string
 }
 
+const LoadingSpinner = forwardRef<HTMLDivElement, LoadingSpinnerProps>(
+  function LoadingSpinnerInner(
+    { size = 48, padding = 16, transparent = false, className },
+    ref
+  ) {
+    return (
+      <LoadingSpinnerRoot
+        size={size}
+        padding={padding}
+        transparent={transparent}
+        className={className}
+        ref={ref}
+      >
+        <LoadingSpinnerIcon />
+      </LoadingSpinnerRoot>
+    )
+  }
+)
+
+export default memo(LoadingSpinner)
+
 const LoadingSpinnerRoot = styled.div.attrs({ role: 'progressbar' })<{
   size: number
   padding: number
@@ -67,23 +83,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, forwardRef, memo } from 'react'
+import * as React from 'react'
 import {
   AriaModalOverlayProps,
   Overlay,
@@ -17,6 +18,7 @@ import { useMedia } from '@charcoal-ui/styled'
 import { animated, useTransition, easings } from 'react-spring'
 import Button, { ButtonProps } from '../Button'
 import IconButton from '../IconButton'
+import { useObjectRef } from '@react-aria/utils'
 
 type BottomSheet = boolean | 'full'
 type Size = 'S' | 'M' | 'L'
@@ -30,6 +32,7 @@ export type ModalProps = AriaModalOverlayProps &
     bottomSheet?: BottomSheet
     isOpen: boolean
     onClose: () => void
+    className?: string
 
     /**
      * https://github.com/adobe/react-spectrum/issues/3787
@@ -55,31 +58,32 @@ const DEFAULT_Z_INDEX = 10
  *
  * <OverlayProvider>
  *   <App>
- *     <Modal isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
+ *     <Modal title="Title" isOpen={state.isOpen} onClose={() => state.close()} isDismissable>
  *       <ModalHeader />
- *       <ModalBody>...</ModalBody>
- *       <ModalButtons>...</ModalButtons>
+ *       <ModalBody>
+ *         ...
+ *         <ModalButtons>...</ModalButtons>
+ *       </ModalBody>
  *     </Modal>
  *   </App>
  * </OverlayProvider>
  * ```
  */
-export default function Modal({
-  children,
-  zIndex = DEFAULT_Z_INDEX,
-  portalContainer,
-  ...props
-}: ModalProps) {
+const Modal = forwardRef<HTMLDivElement, ModalProps>(function ModalInner(
+  { children, zIndex = DEFAULT_Z_INDEX, portalContainer, ...props },
+  external
+) {
   const {
     title,
     size = 'M',
     bottomSheet = false,
     isDismissable,
     onClose,
+    className,
     isOpen = false,
   } = props
 
-  const ref = useRef<HTMLDivElement>(null)
+  const ref = useObjectRef<HTMLDivElement>(external)
   const { overlayProps, underlayProps } = useOverlay(props, ref)
 
   const { modalProps } = useModalOverlay(
@@ -145,6 +149,7 @@ export default function Modal({
                   style={transitionEnabled ? { transform } : {}}
                   size={size}
                   bottomSheet={bottomSheet}
+                  className={className}
                 >
                   <ModalContext.Provider
                     value={{ titleProps, title, close: onClose, showDismiss }}
@@ -165,7 +170,9 @@ export default function Modal({
         </Overlay>
       )
   )
-}
+})
+
+export default memo(Modal)
 
 const ModalContext = React.createContext<{
   titleProps: React.HTMLAttributes<HTMLElement>

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 />` ?'