@charcoal-ui/react 4.0.0-beta.1 → 4.0.0-beta.12

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

@@ -0,0 +1,34 @@
+import './index.css'
+
+import MenuItem, { MenuItemProps } from '../MenuItem'
+import { MenuListContext } from '../MenuList/MenuListContext'
+import { useContext } from 'react'
+import Icon from '../../Icon'
+
+export type DropdownMenuItemProps = Omit<MenuItemProps, '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} aria-selected={isSelected}>
+      {isSelected && (
+        <Icon
+          className="charcoal-dropdown-selector-menu-item-icon"
+          name="16/Check"
+        />
+      )}
+      <span
+        className="charcoal-dropdown-selector-menu-item"
+        data-selected={isSelected}
+      >
+        {props.children}
+      </span>
+    </MenuItem>
+  )
+}

package/src/components/DropdownSelector/DropdownPopover.tsx

@@ -19,15 +19,22 @@ export function DropdownPopover({ children, ...props }: DropdownPopoverProps) {
   }, [props.triggerRef, props.isOpen])
 
   useEffect(() => {
-    if (props.isOpen && props.value !== undefined) {
-      // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する
-      const windowScrollY = window.scrollY
-      const windowScrollX = window.scrollX
-      const selectedElement = document.querySelector(
-        `[data-key="${props.value.toString()}"]`
-      ) as HTMLElement | undefined
-      selectedElement?.focus()
-      window.scrollTo(windowScrollX, windowScrollY)
+    if (props.isOpen) {
+      if (props.value !== undefined && props.value !== '') {
+        // windowのスクロールを維持したまま選択肢をPopoverの中心に表示する
+        const windowScrollY = window.scrollY
+        const windowScrollX = window.scrollX
+        const selectedElement = document.querySelector(
+          `[data-key="${props.value.toString()}"]`
+        ) as HTMLElement | undefined
+        selectedElement?.focus()
+        window.scrollTo(windowScrollX, windowScrollY)
+      } else {
+        const el = ref.current?.querySelector("[role='option']")
+        if (el instanceof HTMLElement) {
+          el.focus()
+        }
+      }
     }
   }, [props.value, props.isOpen])
 

package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot

@@ -1,244 +1,61 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests DropdownSelector/ListItem Basic 1`] = `
-.c0 {
-  list-style: none;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  min-height: 40px;
-  cursor: pointer;
-  outline: none;
-  padding-right: 16px;
-  padding-left: 16px;
-  -webkit-transition: background-color 0.2s;
-  transition: background-color 0.2s;
-}
-
-.c1:disabled,
-.c1[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c1:hover:not(disabled):not([aria-disabled='true']),
-.c1:focus:not(disabled):not([aria-disabled='true']),
-.c1:focus-within:not(disabled):not([aria-disabled='true']) {
-  background-color: var(--charcoal-surface3);
-}
-
-.c3 {
-  display: inline-grid;
-  grid-template-columns: auto 1fr;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  cursor: pointer;
-  outline: 0;
-}
-
-.c3:disabled,
-.c3[aria-disabled]:not([aria-disabled='false']) {
-  opacity: 0.32;
-  cursor: default;
-}
-
-.c4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  position: relative;
-  box-sizing: border-box;
-  width: 28px;
-  border: 2px solid transparent;
-  -webkit-transition-property: background-color,box-shadow;
-  transition-property: background-color,box-shadow;
-  -webkit-transition-duration: 0.2s;
-  transition-duration: 0.2s;
-  cursor: inherit;
-  outline: none;
-  border-radius: 16px;
-  height: 16px;
-  margin: 0;
-  background-color: var(--charcoal-text4);
-}
-
-.c4:hover {
-  background-color: var(--charcoal-text4-hover);
-}
-
-.c4:active {
-  background-color: var(--charcoal-text4-press);
-}
-
-.c4:focus {
-  outline: none;
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c4:focus:not(:focus-visible) {
-  box-shadow: none;
-}
-
-.c4:focus-visible {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
-.c4::after {
-  content: '';
-  position: absolute;
-  display: block;
-  top: 0;
-  left: 0;
-  width: 12px;
-  height: 12px;
-  -webkit-transform: translateX(0);
-  -ms-transform: translateX(0);
-  transform: translateX(0);
-  -webkit-transition: -webkit-transform 0.2s;
-  -webkit-transition: transform 0.2s;
-  transition: transform 0.2s;
-  border-radius: 1024px;
-  background-color: var(--charcoal-text5);
-}
-
-.c4::after:hover {
-  background-color: var(--charcoal-text5-hover);
-}
-
-.c4::after:active {
-  background-color: var(--charcoal-text5-press);
-}
-
-.c4:checked {
-  background-color: var(--charcoal-brand);
-}
-
-.c4:checked:hover {
-  background-color: var(--charcoal-brand-hover);
-}
-
-.c4:checked:active {
-  background-color: var(--charcoal-brand-press);
-}
-
-.c4:checked::after {
-  -webkit-transform: translateX(12px);
-  -ms-transform: translateX(12px);
-  transform: translateX(12px);
-  -webkit-transition: -webkit-transform 0.2s;
-  -webkit-transition: transform 0.2s;
-  transition: transform 0.2s;
-}
-
-.c2 {
-  color: red;
-}
-
+exports[`Storybook Tests > react/internals/ListItem > Basic 1`] = `
 <div
   data-dark={false}
 >
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
   >
-    <div
-      className="c1"
-    >
-      Item
-    </div>
+    Item
   </li>
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
   >
-    <div
-      className="c1"
-    >
-      <pixiv-icon
-        name="16/Add"
-      />
-       Add
-    </div>
+    <pixiv-icon
+      name="16/Add"
+    />
+     Add
   </li>
-  <li
-    className="c0"
-    role="option"
+  <a
+    className="charcoal-list-item"
+    href="#"
   >
-    <a
-      className="c1"
-      href="#"
-    >
-      Normal Link
-    </a>
-  </li>
-  <li
-    className="c0"
-    role="option"
+    Normal Link
+  </a>
+  <a
+    className="charcoal-list-item"
+    href="#"
+    style={
+      Object {
+        "color": "red",
+      }
+    }
   >
-    <a
-      className="c2 c1"
-      href="#"
-    >
-      Custom Link
-    </a>
-  </li>
+    Custom Link
+  </a>
   <li
-    className="c0"
-    role="option"
+    className="charcoal-list-item"
+    onClick={[Function]}
   >
+    Switch
     <div
-      className="c1"
-      onClick={[Function]}
-    >
-      Switch
-      <div
-        style={
-          Object {
-            "marginLeft": "auto",
-          }
+      style={
+        Object {
+          "marginLeft": "auto",
         }
-      >
-        <label
-          className="c3"
-        >
-          <input
-            aria-label="hello"
-            checked={false}
-            className="c4"
-            disabled={false}
-            name="hello"
-            onChange={[Function]}
-            onClick={[Function]}
-            onDragStart={[Function]}
-            onKeyDown={[Function]}
-            onKeyUp={[Function]}
-            onMouseDown={[Function]}
-            onMouseEnter={[Function]}
-            onMouseLeave={[Function]}
-            onMouseUp={[Function]}
-            onTouchCancel={[Function]}
-            onTouchEnd={[Function]}
-            onTouchMove={[Function]}
-            onTouchStart={[Function]}
-            role="switch"
-            type="checkbox"
-          />
-        </label>
-      </div>
+      }
+    >
+      <input
+        checked={false}
+        className="charcoal-switch-input"
+        id="test-id"
+        label="hello"
+        name="hello"
+        onChange={[Function]}
+        role="switch"
+        type="checkbox"
+      />
     </div>
   </li>
 </div>

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

@@ -0,0 +1,24 @@
+.charcoal-list-item {
+  list-style: none;
+  display: flex;
+  align-items: center;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+
+  padding-right: 16px;
+  padding-left: 16px;
+
+  transition: background-color 0.2s;
+}
+
+.charcoal-list-item:not([aria-disabled='true']):hover,
+.charcoal-list-item:not([aria-disabled='true']):focus,
+.charcoal-list-item:not([aria-disabled='true']):focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
+.charcoal-list-item[aria-disabled='true'] {
+  opacity: 0.32;
+  cursor: default;
+}

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

@@ -1,18 +1,24 @@
-import { useState } from 'react'
+import React, { useState } from 'react'
 import Icon from '../../Icon'
 import Switch from '../../Switch'
 import ListItem from '.'
-import styled from 'styled-components'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'DropdownSelector/ListItem',
+  title: 'react/internals/ListItem',
   component: ListItem,
 } as Meta<typeof ListItem>
 
-const CustomLink = styled.a`
-  color: red;
-`
+const CustomLink = (props: Omit<React.ComponentProps<'a'>, 'style'>) => {
+  return (
+    <a
+      style={{
+        color: 'red',
+      }}
+      {...props}
+    />
+  )
+}
 
 const BasicRender = () => {
   const [checked, setChecked] = useState(false)

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

@@ -1,64 +1,25 @@
-import { ReactNode } from 'react'
-import styled from 'styled-components'
+import './index.css'
+
+import { ForwardedRef, forwardRef, ReactNode, useMemo } from 'react'
+import { useClassNames } from '../../../_lib/useClassNames'
 
 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'> = {
+export type ListItemProps<T extends React.ElementType = 'li'> = {
   children?: ReactNode
   as?: T
-} & Omit<React.ComponentProps<T>, 'children'>
+} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>
 
-/**
- * リストのある要素を示すコンポーネント
- *
- * 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 ListItem = forwardRef(function ListItem<T extends React.ElementType>(
+  { as, className, ...props }: ListItemProps<T>,
+  ref: ForwardedRef<HTMLLIElement>
 ) {
-  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;
-
-  padding-right: 16px;
-  padding-left: 16px;
-
-  transition: background-color 0.2s;
-
-  &:disabled,
-  &[aria-disabled]:not([aria-disabled='false']) {
-    opacity: 0.32;
-    cursor: default;
-  }
+  const Component = useMemo(() => as ?? 'li', [as])
+  const classNames = useClassNames('charcoal-list-item', className)
+  return <Component className={classNames} ref={ref} {...props}></Component>
+}) as <T extends React.ElementType = 'li'>(p: ListItemProps<T>) => JSX.Element
 
-  :hover,
-  :focus,
-  :focus-within {
-    &:not(disabled):not([aria-disabled='true']) {
-      background-color: var(--charcoal-surface3);
-    }
-  }
-`
+export default ListItem

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

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

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

@@ -11,14 +11,14 @@ import { MenuListContext } from '../../MenuList/MenuListContext'
  */
 export function useMenuItemHandleKeyDown(
   value?: string
-): [(e: React.KeyboardEvent<HTMLDivElement>) => void, () => void] {
+): [(e: React.KeyboardEvent<HTMLElement>) => void, () => void] {
   const { setValue, root, propsArray } = useContext(MenuListContext)
   const setContextValue = useCallback(() => {
     if (value !== undefined) setValue(value)
   }, [value, setValue])
 
   const handleKeyDown = useCallback(
-    (e: React.KeyboardEvent<HTMLDivElement>) => {
+    (e: React.KeyboardEvent<HTMLElement>) => {
       if (e.key === 'Enter') {
         setContextValue()
       } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {

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

@@ -0,0 +1,19 @@
+.charcoal-menu-item-group {
+  display: block;
+}
+
+.charcoal-menu-item-group > span {
+  display: block;
+  color: var(--charcoal-text3);
+  font-size: 12px;
+  font-weight: bold;
+  padding: 12px 0 8px 16px;
+}
+
+.charcoal-menu-item-group > ul {
+  padding-left: 0;
+  margin: 0;
+  box-sizing: border-box;
+  list-style: none;
+  overflow: hidden;
+}

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

@@ -1,4 +1,5 @@
-import styled from 'styled-components'
+import './index.css'
+
 import MenuItem from '../MenuItem'
 import { Divider } from '../Divider'
 
@@ -9,34 +10,11 @@ export type MenuItemGroupProps = {
   children: MenuItemGroupChild | MenuItemGroupChild[]
 }
 
-/**
- * 項目のリストを分類する見出しをつけるコンテナ要素
- */
 export default function MenuItemGroup(props: MenuItemGroupProps) {
   return (
-    <StyledLi role="presentation">
-      <TextSpan>{props.text}</TextSpan>
-      <StyledUl role="group">{props.children}</StyledUl>
-    </StyledLi>
+    <li className="charcoal-menu-item-group" role="presentation">
+      <span>{props.text}</span>
+      <ul role="group">{props.children}</ul>
+    </li>
   )
 }
-
-const TextSpan = styled.span`
-  display: block;
-  color: var(--charcoal-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;
-`