@charcoal-ui/react 3.9.0 → 3.10.0

package/package.json

@@ -1,11 +1,13 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
   "exports": {
+    "types": "./dist/index.d.ts",
     "require": "./dist/index.cjs.js",
+    "import": "./dist/index.esm.js",
     "default": "./dist/index.esm.js"
   },
   "types": "./dist/index.d.ts",
@@ -18,7 +20,7 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^3.9.0",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^3.10.0",
     "@react-types/switch": "^3.1.2",
     "@storybook/addon-actions": "^7.4.1",
     "@storybook/addon-knobs": "^7.0.2",
@@ -52,10 +54,10 @@
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^3.9.0",
-    "@charcoal-ui/styled": "^3.9.0",
-    "@charcoal-ui/theme": "^3.9.0",
-    "@charcoal-ui/utils": "^3.9.0",
+    "@charcoal-ui/icons": "^3.10.0",
+    "@charcoal-ui/styled": "^3.10.0",
+    "@charcoal-ui/theme": "^3.10.0",
+    "@charcoal-ui/utils": "^3.10.0",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -88,5 +90,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "fe760d136886d2227013d73067544c5a42ff075b"
+  "gitHead": "f4cb1eec09bb1dc9982cb123d513c970e0184c96"
 }

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

@@ -19,6 +19,8 @@ exports[`Storybook Tests DropdownSelector/ListItem Basic 1`] = `
   outline: none;
   padding-right: 16px;
   padding-left: 16px;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
 }
 
 .c1:disabled,
@@ -27,9 +29,9 @@ exports[`Storybook Tests DropdownSelector/ListItem Basic 1`] = `
   cursor: default;
 }
 
-.c1:hover,
-.c1:focus,
-.c1:focus-within {
+.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);
 }
 

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

@@ -46,6 +46,8 @@ const ItemDiv = styled.div`
   padding-right: 16px;
   padding-left: 16px;
 
+  transition: background-color 0.2s;
+
   &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
@@ -55,6 +57,8 @@ const ItemDiv = styled.div`
   :hover,
   :focus,
   :focus-within {
-    background-color: var(--charcoal-surface3);
+    &:not(disabled):not([aria-disabled='true']) {
+      background-color: var(--charcoal-surface3);
+    }
   }
 `

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

@@ -12,7 +12,7 @@ import { MenuListContext } from '../../MenuList/MenuListContext'
 export function useMenuItemHandleKeyDown(
   value?: string
 ): [(e: React.KeyboardEvent<HTMLDivElement>) => void, () => void] {
-  const { setValue, root, values } = useContext(MenuListContext)
+  const { setValue, root, propsArray } = useContext(MenuListContext)
   const setContextValue = useCallback(() => {
     if (value !== undefined) setValue(value)
   }, [value, setValue])
@@ -22,34 +22,45 @@ export function useMenuItemHandleKeyDown(
       if (e.key === 'Enter') {
         setContextValue()
       } else if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
+        const isForward = e.key === 'ArrowDown'
         // prevent scroll
         e.preventDefault()
-        if (!values || value === undefined) return
-        const index = values.indexOf(value)
+        if (!propsArray || value === undefined) return
+        const values = propsArray
+          .map((props) => props.value)
+          .filter((v) => v) as string[]
+        let index = values.indexOf(value)
         if (index === -1) return
 
-        const focusValue =
-          e.key === 'ArrowUp'
+        for (let n = 0; n < values.length; n++) {
+          const focusValue = isForward
             ? // prev or last
-              index - 1 < 0
-              ? values[values.length - 1]
-              : values[index - 1]
+              index + 1 >= values.length
+              ? values[0]
+              : values[index + 1]
             : // next or first
-            index + 1 >= values.length
-            ? values[0]
-            : values[index + 1]
+            index - 1 < 0
+            ? values[values.length - 1]
+            : values[index - 1]
+          const next = root?.current?.querySelector(
+            `[data-key='${focusValue}']`
+          )
 
-        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)
+          if (next instanceof HTMLElement) {
+            if (next.ariaDisabled === 'true') {
+              index += isForward ? 1 : -1
+              continue
+            }
+            next.focus({ preventScroll: true })
+            if (root?.current?.parentElement) {
+              handleFocusByKeyBoard(next, root.current.parentElement)
+            }
+            break
           }
         }
       }
     },
-    [setContextValue, value, root, values]
+    [setContextValue, propsArray, value, root]
   )
   return [handleKeyDown, setContextValue]
 }

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

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

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

@@ -24,6 +24,8 @@ exports[`Storybook Tests DropdownSelector/MenuList Basic 1`] = `
   outline: none;
   padding-right: 16px;
   padding-left: 16px;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
 }
 
 .c2:disabled,
@@ -32,9 +34,9 @@ exports[`Storybook Tests DropdownSelector/MenuList Basic 1`] = `
   cursor: default;
 }
 
-.c2:hover,
-.c2:focus,
-.c2:focus-within {
+.c2:hover:not(disabled):not([aria-disabled='true']),
+.c2:focus:not(disabled):not([aria-disabled='true']),
+.c2:focus-within:not(disabled):not([aria-disabled='true']) {
   background-color: var(--charcoal-surface3);
 }
 
@@ -232,6 +234,8 @@ exports[`Storybook Tests DropdownSelector/MenuList Disabled 1`] = `
   outline: none;
   padding-right: 16px;
   padding-left: 16px;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
 }
 
 .c2:disabled,
@@ -240,9 +244,9 @@ exports[`Storybook Tests DropdownSelector/MenuList Disabled 1`] = `
   cursor: default;
 }
 
-.c2:hover,
-.c2:focus,
-.c2:focus-within {
+.c2:hover:not(disabled):not([aria-disabled='true']),
+.c2:focus:not(disabled):not([aria-disabled='true']),
+.c2:focus-within:not(disabled):not([aria-disabled='true']) {
   background-color: var(--charcoal-surface3);
 }
 
@@ -331,6 +335,8 @@ exports[`Storybook Tests DropdownSelector/MenuList Group 1`] = `
   outline: none;
   padding-right: 16px;
   padding-left: 16px;
+  -webkit-transition: background-color 0.2s;
+  transition: background-color 0.2s;
 }
 
 .c5:disabled,
@@ -339,9 +345,9 @@ exports[`Storybook Tests DropdownSelector/MenuList Group 1`] = `
   cursor: default;
 }
 
-.c5:hover,
-.c5:focus,
-.c5:focus-within {
+.c5:hover:not(disabled):not([aria-disabled='true']),
+.c5:focus:not(disabled):not([aria-disabled='true']),
+.c5:focus-within:not(disabled):not([aria-disabled='true']) {
   background-color: var(--charcoal-surface3);
 }
 

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

@@ -1,4 +1,4 @@
-import { useRef } from 'react'
+import { useMemo, useRef } from 'react'
 import styled from 'styled-components'
 import { MenuListContext } from './MenuListContext'
 import { getValuesRecursive } from './internals/getValuesRecursive'
@@ -24,8 +24,10 @@ export type MenuListProps = {
  */
 export default function MenuList(props: MenuListProps) {
   const root = useRef(null)
-  const values: string[] = []
-  getValuesRecursive(props.children, values)
+  const propsArray = useMemo(
+    () => getValuesRecursive(props.children),
+    [props.children]
+  )
 
   return (
     <StyledUl ref={root}>
@@ -33,7 +35,7 @@ export default function MenuList(props: MenuListProps) {
         value={{
           value: props.value ?? '',
           root,
-          values,
+          propsArray,
           setValue: (v) => {
             props.onChange?.(v)
           },

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

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