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

package/src/components/DropdownSelector/DropdownMenuItem.tsx

@@ -0,0 +1,40 @@
+import styled from 'styled-components'
+import MenuItem, { MenuItemProps } from './MenuItem'
+import { MenuListContext } from './MenuList/MenuListContext'
+import { useContext } from 'react'
+import { theme } from '../../styled'
+import Icon from '../Icon'
+
+export type DropdownMenuItemProps = Omit<MenuItemProps<'div'>, 'as'>
+
+/**
+ * DropdownSelectorの選択肢として使うMenuItem
+ */
+export default function DropdownMenuItem(props: DropdownMenuItemProps) {
+  const { value: ctxValue } = useContext(MenuListContext)
+  const isSelected = props.value === ctxValue
+  const { children, ...rest } = props
+
+  return (
+    <MenuItem {...rest}>
+      {isSelected && <Text2ColorIcon name="16/Check" />}
+      <StyledSpan isSelected={isSelected}>{props.children}</StyledSpan>
+    </MenuItem>
+  )
+}
+
+/**
+ * アイコンがない時を考慮して20px（16pxのwidthと4pxのgap）の余白をとる
+ */
+const StyledSpan = styled.span<{ isSelected?: boolean }>`
+  ${theme((o) => [o.typography(14), o.font.text2])};
+  display: flex;
+  align-items: center;
+  width: 100%;
+  margin-left: ${({ isSelected }) => (isSelected === true ? 0 : 20)}px;
+`
+
+const Text2ColorIcon = styled(Icon)`
+  ${theme((o) => [o.font.text2])}
+  padding-right: 4px;
+`

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -1,46 +1,25 @@
-import React, { Key, useEffect, useRef } from 'react'
-import { OverlayTriggerState } from 'react-stately'
-import { ReactNode } from 'react'
-import {
-  AriaPopoverProps,
-  DismissButton,
-  Overlay,
-  usePopover,
-} from '@react-aria/overlays'
-import styled from 'styled-components'
-import { theme } from '../../styled'
+import { Key, useEffect, useRef } from 'react'
+import Popover, { PopoverProps } from './Popover'
 
-const DropdownPopoverDiv = styled.div`
-  width: 100%;
-  ${theme((o) => o.margin.top(4).bottom(4))}
-`
-
-type Props = Omit<AriaPopoverProps, 'popoverRef'> & {
-  state: OverlayTriggerState
-} & {
-  children: ReactNode
+type DropdownPopoverProps = PopoverProps & {
   value?: Key
 }
 
-export function DropdownPopover({ children, state, ...props }: Props) {
+/**
+ * DropdownSelectorの選択肢をを表示するためのPopover
+ * triggerRefの要素と同じ幅になる
+ * 表示の際にvalueが等しいDropdownMenuItemを中央に表示する
+ */
+export function DropdownPopover({ children, ...props }: DropdownPopoverProps) {
   const ref = useRef<HTMLDivElement>(null)
-  const { popoverProps, underlayProps } = usePopover(
-    {
-      ...props,
-      popoverRef: ref,
-      containerPadding: 0,
-    },
-    state
-  )
-
   useEffect(() => {
-    if (ref.current && props.triggerRef.current) {
+    if (props.isOpen && ref.current && props.triggerRef.current) {
       ref.current.style.width = `${props.triggerRef.current.clientWidth}px`
     }
-  }, [props.triggerRef])
+  }, [props.triggerRef, props.isOpen])
 
   useEffect(() => {
-    if (state.isOpen && props.value !== undefined) {
+    if (props.isOpen && props.value !== undefined) {
       // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する
       const windowScrollY = window.scrollY
       const windowScrollX = window.scrollX
@@ -51,16 +30,16 @@ export function DropdownPopover({ children, state, ...props }: Props) {
       selectedElement?.focus()
       window.scrollTo(windowScrollX, windowScrollY)
     }
-  }, [props.value, state.isOpen])
+  }, [props.value, props.isOpen])
 
   return (
-    <Overlay portalContainer={document.body}>
-      <div {...underlayProps} style={{ position: 'fixed', inset: 0 }} />
-      <DropdownPopoverDiv {...popoverProps} ref={ref}>
-        <DismissButton onDismiss={() => state.close()} />
-        {children}
-        <DismissButton onDismiss={() => state.close()} />
-      </DropdownPopoverDiv>
-    </Overlay>
+    <Popover
+      isOpen={props.isOpen}
+      onClose={props.onClose}
+      popoverRef={ref}
+      triggerRef={props.triggerRef}
+    >
+      {children}
+    </Popover>
   )
 }

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

@@ -0,0 +1,51 @@
+import { useState } from 'react'
+import { Story } from '../../../_lib/compat'
+import Icon from '../../Icon'
+import Switch from '../../Switch'
+import ListItem, { ListItemProps } from '.'
+import styled from 'styled-components'
+
+export default {
+  title: 'DropdownSelector/ListItem',
+  component: ListItem,
+}
+
+const CustomLink = styled.a`
+  color: red;
+`
+
+export const Basic: Story<ListItemProps> = () => {
+  const [checked, setChecked] = useState(false)
+  const handleCheck = () => {
+    setChecked((v) => !v)
+  }
+  return (
+    <>
+      <ListItem>Item</ListItem>
+      <ListItem>
+        <Icon name="16/Add" /> Add
+      </ListItem>
+      <ListItem as="a" href="#">
+        Normal Link
+      </ListItem>
+      <ListItem as={CustomLink} href="#">
+        Custom Link
+      </ListItem>
+      <ListItem onClick={handleCheck}>
+        Switch
+        <div
+          style={{
+            marginLeft: 'auto',
+          }}
+        >
+          <Switch
+            label="hello"
+            name="hello"
+            onChange={handleCheck}
+            checked={checked}
+          />
+        </div>
+      </ListItem>
+    </>
+  )
+}

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

@@ -0,0 +1,58 @@
+import { ReactNode } from 'react'
+import styled from 'styled-components'
+import { theme } from '../../../styled'
+
+export type CustomJSXElement =
+  | keyof JSX.IntrinsicElements
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  | React.JSXElementConstructor<any>
+
+export type ListItemProps<T extends CustomJSXElement = 'div'> = {
+  children?: ReactNode
+  as?: T
+} & Omit<React.ComponentProps<T>, 'children'>
+
+/**
+ * リストのある要素を示すコンポーネント
+ *
+ * asを用いて拡張することができる
+ * @example
+ * ```
+ * <ListItem as="a" href="#">Link</ListItem>
+ * <ListItem as={NextLink} href="#">NextLink</ListItem>
+ * ```
+ */
+export default function ListItem<T extends CustomJSXElement = 'div'>(
+  props: ListItemProps<T>
+) {
+  const { children, ...rest } = props
+  return (
+    <StyledLi role="option">
+      <ItemDiv {...rest}>{props.children}</ItemDiv>
+    </StyledLi>
+  )
+}
+
+const StyledLi = styled.li`
+  list-style: none;
+`
+
+const ItemDiv = styled.div`
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  ${theme((o) => [o.padding.horizontal(16), o.disabled])}
+
+  &[aria-disabled="true"] {
+    cursor: default;
+  }
+
+  :hover,
+  :focus,
+  :focus-within {
+    ${theme((o) => [o.bg.surface3])}
+  }
+`

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

@@ -0,0 +1,31 @@
+import ListItem, { CustomJSXElement, ListItemProps } from '../ListItem'
+import { useMenuItemHandleKeyDown } from './internals/useMenuItemHandleKeyDown'
+
+export type MenuItemProps<T extends CustomJSXElement = never> = {
+  value?: string
+  disabled?: boolean
+} & ListItemProps<T>
+
+/**
+ * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目
+ * 基本的に`<MenuList>`, `<MenuGroup>`と合わせて使用する
+ */
+export default function MenuItem<T extends CustomJSXElement>(
+  props: MenuItemProps<T>
+) {
+  const { children, as, ...rest } = props
+  const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(props.value)
+  return (
+    <ListItem
+      {...rest}
+      as={as as CustomJSXElement}
+      data-key={props.value}
+      onKeyDown={handleKeyDown}
+      onClick={props.disabled === true ? undefined : setContextValue}
+      tabIndex={-1}
+      aria-disabled={props.disabled}
+    >
+      {props.children}
+    </ListItem>
+  )
+}

package/src/components/DropdownSelector/MenuItem/internals/handleFocusByKeyBoard.tsx

@@ -0,0 +1,43 @@
+/**
+ * elementをparentのスクロールビューに入るようにスクロールする
+ * parentがスクロール可能でなければelementが見えるようにスクロールする
+ *
+ * @param element
+ * @param parent
+ */
+export function handleFocusByKeyBoard(element: Element, parent: HTMLElement) {
+  const isScrollable = parent.scrollHeight > parent.clientHeight
+  if (isScrollable) {
+    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),
+      })
+    }
+  } else {
+    scrollIfNeeded(element)
+  }
+}
+
+/**
+ * 要素が画面外にあればスクロールする、画面内にあればスクロールしない
+ * @param element
+ */
+function scrollIfNeeded(element: Element) {
+  const elementRect = element.getBoundingClientRect()
+  const isVisible =
+    elementRect.top >= 0 &&
+    elementRect.bottom <=
+      (window.innerHeight || document.documentElement.clientHeight)
+
+  if (!isVisible) {
+    element.scrollIntoView({
+      block: 'nearest',
+    })
+  }
+}

package/src/components/DropdownSelector/MenuItem/internals/useMenuItemHandleKeyDown.tsx

@@ -0,0 +1,55 @@
+import { useCallback, useContext } from 'react'
+import { handleFocusByKeyBoard } from './handleFocusByKeyBoard'
+import { MenuListContext } from '../../MenuList/MenuListContext'
+
+/**
+ * MenuListContextに含まれるvalue間で上下キーでfocusを移動できる
+ * EnterキーでMenuListContextに値を設定する
+ * 上記2つの処理を含む処理(handleKeyDown)と、Enterキーを押下した処理(setContextValue)を配列で返す
+ * @param value
+ * @returns
+ */
+export function useMenuItemHandleKeyDown(
+  value?: string
+): [(e: React.KeyboardEvent<HTMLDivElement>) => void, () => void] {
+  const { setValue, root, values } = useContext(MenuListContext)
+  const setContextValue = useCallback(() => {
+    if (value !== undefined) setValue(value)
+  }, [value, setValue])
+
+  const handleKeyDown = useCallback(
+    (e: React.KeyboardEvent<HTMLDivElement>) => {
+      if (e.key === 'Enter') {
+        setContextValue()
+      } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        // prevent scroll
+        e.preventDefault()
+        if (!values || value === undefined) return
+        const index = values.indexOf(value)
+        if (index === -1) return
+
+        const focusValue =
+          e.key === 'ArrowUp'
+            ? // prev or last
+              index - 1 < 0
+              ? values[values.length - 1]
+              : values[index - 1]
+            : // next or first
+            index + 1 >= values.length
+            ? values[0]
+            : values[index + 1]
+
+        const next = root?.current?.querySelector(`[data-key='${focusValue}']`)
+
+        if (next instanceof HTMLElement) {
+          next.focus({ preventScroll: true })
+          if (root?.current?.parentElement) {
+            handleFocusByKeyBoard(next, root.current.parentElement)
+          }
+        }
+      }
+    },
+    [setContextValue, value, root, values]
+  )
+  return [handleKeyDown, setContextValue]
+}

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

@@ -0,0 +1,42 @@
+import styled from 'styled-components'
+import MenuItem from '../MenuItem'
+import { Divider } from '../Divider'
+
+type MenuItemGroupChild = React.ReactElement<typeof MenuItem | typeof Divider>
+
+export type MenuItemGroupProps = {
+  text: string
+  children: MenuItemGroupChild | MenuItemGroupChild[]
+}
+
+/**
+ * 項目のリストを分類する見出しをつけるコンテナ要素
+ */
+export default function MenuItemGroup(props: MenuItemGroupProps) {
+  return (
+    <StyledLi role="presentation">
+      <TextSpan>{props.text}</TextSpan>
+      <StyledUl role="group">{props.children}</StyledUl>
+    </StyledLi>
+  )
+}
+
+const TextSpan = styled.span`
+  display: block;
+  color: ${({ theme }) => theme.color.text3};
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+`
+
+const StyledUl = styled.ul`
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+`
+
+const StyledLi = styled.li`
+  display: block;
+`

package/src/components/DropdownSelector/MenuList/MenuListContext.ts

@@ -0,0 +1,17 @@
+import { RefObject, createContext } from 'react'
+
+type MenuListContextType = {
+  root?: RefObject<HTMLUListElement>
+  value?: string
+  values?: string[]
+  setValue: (v: string) => void
+}
+
+export const MenuListContext = createContext<MenuListContextType>({
+  root: undefined,
+  value: '',
+  values: [],
+  setValue: (_v: string) => {
+    // empty
+  },
+})

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

@@ -0,0 +1,51 @@
+import { action } from '@storybook/addon-actions'
+import { Story } from '../../../_lib/compat'
+import MenuList, { MenuListProps } from '.'
+import MenuItem from '../MenuItem'
+import MenuItemGroup from '../MenuItemGroup'
+
+export default {
+  title: 'DropdownSelector/MenuList',
+  component: MenuList,
+}
+
+function makeList(n: number, offset = 0) {
+  return [...(Array(n) as undefined[])].map((_, i) => {
+    const v = i + offset
+    return (
+      <MenuItem key={v} value={v.toString()}>
+        Menu {v}
+      </MenuItem>
+    )
+  })
+}
+
+export const Basic: Story<MenuListProps> = () => {
+  return (
+    <>
+      <MenuList onChange={action('onChange')}>{makeList(10)}</MenuList>
+    </>
+  )
+}
+
+export const Disabled: Story<MenuListProps> = () => {
+  return (
+    <>
+      <MenuList onChange={action('onChange')}>
+        <MenuItem value="1">MenuItem</MenuItem>
+        <MenuItem value="2" disabled>
+          Disabled MenuItem
+        </MenuItem>
+      </MenuList>
+    </>
+  )
+}
+
+export const Group: Story<MenuListProps> = () => {
+  return (
+    <MenuList onChange={action('onChange')} value="1">
+      <MenuItemGroup text="Section1">{makeList(5)}</MenuItemGroup>
+      <MenuItemGroup text="Section2">{makeList(5, 5)}</MenuItemGroup>
+    </MenuList>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { useRef } from 'react'
+import styled from 'styled-components'
+import { MenuListContext } from './MenuListContext'
+import { getValuesRecursive } from './internals/getValuesRecursive'
+import MenuItem from '../MenuItem'
+import { Divider } from '../Divider'
+import MenuItemGroup from '../MenuItemGroup'
+
+type MenuListChild = React.ReactElement<
+  typeof MenuItem | typeof MenuItemGroup | typeof Divider
+>
+
+export type MenuListChildren = MenuListChild | MenuListChild[]
+
+export type MenuListProps = {
+  children: MenuListChildren
+  value?: string
+  onChange?: (v: string) => void
+}
+
+/**
+ * 上下キーでフォーカス移動でき、エンターキーで選択できるリストの項目
+ * 基本的に`<MenuItem>`, `<MenuGroup>`と合わせて使用する
+ */
+export default function MenuList(props: MenuListProps) {
+  const root = useRef(null)
+  const values: string[] = []
+  getValuesRecursive(props.children, values)
+
+  return (
+    <StyledUl ref={root}>
+      <MenuListContext.Provider
+        value={{
+          value: props.value ?? '',
+          root,
+          values,
+          setValue: (v) => {
+            props.onChange?.(v)
+          },
+        }}
+      >
+        {props.children}
+      </MenuListContext.Provider>
+    </StyledUl>
+  )
+}
+
+const StyledUl = styled.ul`
+  padding: 0;
+  margin: 0;
+`

package/src/components/DropdownSelector/MenuList/internals/getValuesRecursive.tsx

@@ -0,0 +1,35 @@
+import * as React from 'react'
+import MenuItem from '../../MenuItem'
+import { MenuListChildren } from '..'
+import MenuItemGroup from '../../MenuItemGroup'
+
+/**
+ * valueというpropsを持つ子要素の値を再起的に探索して配列にする
+ *
+ * @param children
+ * @param value
+ * @param values
+ * @returns
+ */
+export function getValuesRecursive(
+  children: MenuListChildren,
+  values: string[] = []
+) {
+  const childArray = React.Children.toArray(children)
+  for (let i = 0; i < childArray.length; i++) {
+    const child = childArray[i]
+    if (React.isValidElement(child)) {
+      const props = child.props as {
+        value?: never
+        children?: React.ReactElement<typeof MenuItem | typeof MenuItemGroup>[]
+      }
+      if ('value' in props && typeof props.value === 'string') {
+        const childValue = props.value
+        values.push(childValue)
+      }
+      if ('children' in props && props.children) {
+        getValuesRecursive(props.children, values)
+      }
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+import { useRef, CSSProperties, useState } from 'react'
+import { Story } from '../../../_lib/compat'
+import Popover, { PopoverProps } from '.'
+import Button from '../../Button'
+
+export default {
+  title: 'DropdownSelector/Popover',
+  component: Popover,
+}
+
+function Base(props: { style?: CSSProperties }) {
+  const [isOpen, setIsOpen] = useState(false)
+  const triggerRef = useRef(null)
+  return (
+    <>
+      <Button
+        onClick={() => {
+          setIsOpen(true)
+        }}
+        style={props.style}
+        ref={triggerRef}
+      >
+        button
+      </Button>
+      <Popover
+        isOpen={isOpen}
+        onClose={() => setIsOpen(false)}
+        triggerRef={triggerRef}
+      >
+        <div style={{ margin: '8px 16px' }}>Hello</div>
+      </Popover>
+    </>
+  )
+}
+
+export const Basic: Story<PopoverProps> = () => {
+  return (
+    <>
+      <Base
+        style={{
+          position: 'absolute',
+        }}
+      />
+      <Base
+        style={{
+          position: 'absolute',
+          right: 8,
+        }}
+      />
+      <Base
+        style={{
+          position: 'absolute',
+          bottom: 8,
+        }}
+      />
+      <Base
+        style={{
+          position: 'absolute',
+          right: 8,
+          bottom: 8,
+        }}
+      />
+    </>
+  )
+}