@charcoal-ui/react 6.0.0-rc.8 → 6.0.0

package/src/components/Button/index.css

@@ -1,6 +1,6 @@
 .charcoal-button {
   appearance: none;
-  background: transparent;
+  background-image: none;
   box-sizing: border-box;
   padding: 0 24px;
   border-style: none;
@@ -9,7 +9,9 @@
   letter-spacing: inherit;
   word-spacing: inherit;
   text-decoration: none;
-  font: inherit;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant: inherit;
   margin: 0;
   overflow: visible;
   text-transform: none;
@@ -25,7 +27,10 @@
   line-height: 22px;
   font-weight: bold;
   color: var(--charcoal-color-text-default);
-  background-color: var(--charcoal-color-container-secondary-default-a);
+  background-color: var(
+    --charcoal-color-container-secondary-default-a,
+    transparent
+  );
   transition:
     0.2s color,
     0.2s background-color,

package/src/components/Carousel/index.browser.test.tsx

@@ -8,7 +8,7 @@
  * document.elementFromPoint のヒットテストで検証する。
  * （pointer-events / 擬似要素のヒットテストは jsdom では再現できない）
  */
-import { userEvent } from '@vitest/browser/context'
+import { userEvent } from 'vitest/browser'
 import { render } from '@testing-library/react'
 import Carousel from '.'
 

package/src/components/Carousel/intersectionObserver.test.ts

@@ -23,18 +23,18 @@ describe('observeCenter', () => {
 
   it('同一 root の el は observer を共有し、中央交差で対象の onEnter だけ呼ぶ', () => {
     const instances: MockIO[] = []
-    globalThis.IntersectionObserver = vi.fn(
-      (cb: IntersectionObserverCallback) => {
-        const inst: MockIO = {
-          cb,
-          observe: vi.fn(),
-          unobserve: vi.fn(),
-          disconnect: vi.fn(),
-        }
-        instances.push(inst)
-        return inst
-      },
-    ) as unknown as typeof globalThis.IntersectionObserver
+    globalThis.IntersectionObserver = vi.fn(function (
+      cb: IntersectionObserverCallback,
+    ) {
+      const inst: MockIO = {
+        cb,
+        observe: vi.fn(),
+        unobserve: vi.fn(),
+        disconnect: vi.fn(),
+      }
+      instances.push(inst)
+      return inst
+    }) as unknown as typeof globalThis.IntersectionObserver
 
     const root = document.createElement('div')
     const a = document.createElement('div')

package/src/components/Carousel/resizeObserver.test.ts

@@ -23,7 +23,7 @@ describe('observeResize', () => {
 
   it('単一の observer を共有し、対象のサイズ変化で cb を呼ぶ', () => {
     const instances: MockRO[] = []
-    globalThis.ResizeObserver = vi.fn((cb: ResizeObserverCallback) => {
+    globalThis.ResizeObserver = vi.fn(function (cb: ResizeObserverCallback) {
       const inst: MockRO = {
         cb,
         observe: vi.fn(),

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

@@ -1,4 +1,4 @@
-import { ForwardedRef, forwardRef } from 'react'
+import { ForwardedRef, forwardRef, useCallback, useRef } from 'react'
 import ListItem, { ListItemProps } from '../ListItem'
 import { useMenuItemHandleKeyDown } from './internals/useMenuItemHandleKeyDown'
 
@@ -18,6 +18,42 @@ const MenuItem = forwardRef(function MenuItem<
   ref: ForwardedRef<HTMLLIElement>,
 ) {
   const [handleKeyDown, setContextValue] = useMenuItemHandleKeyDown(value)
+  const penHandledRef = useRef(false)
+  const pointerStartRef = useRef<{ x: number; y: number } | null>(null)
+
+  const handlePointerDown = useCallback(
+    (e: React.PointerEvent<HTMLLIElement>) => {
+      if (e.pointerType === 'pen') {
+        pointerStartRef.current = { x: e.clientX, y: e.clientY }
+      }
+    },
+    [],
+  )
+
+  const handlePointerUp = useCallback(
+    (e: React.PointerEvent<HTMLLIElement>) => {
+      if (e.pointerType !== 'pen' || disabled === true) return
+      const start = pointerStartRef.current
+      if (!start) return
+      const dx = Math.abs(e.clientX - start.x)
+      const dy = Math.abs(e.clientY - start.y)
+      // タップとドラッグを区別するための許容量
+      if (dx > 8 || dy > 8) return
+      penHandledRef.current = true
+      setContextValue()
+    },
+    [disabled, setContextValue],
+  )
+
+  const handleClick = useCallback(() => {
+    if (penHandledRef.current) {
+      penHandledRef.current = false
+      return
+    }
+    if (disabled === true) return
+    setContextValue()
+  }, [disabled, setContextValue])
+
   return (
     // @ts-expect-error TODO: fix mismatch between MenuItemProps and ListItemProps
     <ListItem
@@ -25,7 +61,9 @@ const MenuItem = forwardRef(function MenuItem<
       ref={ref}
       data-key={value}
       onKeyDown={handleKeyDown}
-      onClick={disabled === true ? undefined : setContextValue}
+      onPointerDown={handlePointerDown}
+      onPointerUp={handlePointerUp}
+      onClick={handleClick}
       tabIndex={-1}
       aria-disabled={disabled}
       role="option"

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

@@ -1,6 +1,6 @@
 import './index.css'
 
-import { RefObject, useContext, useRef, ReactNode } from 'react'
+import { RefObject, useContext, useEffect, useRef, ReactNode } from 'react'
 import { ModalBackgroundContext } from '../../Modal/ModalBackgroundContext'
 import { usePreventScroll } from './usePreventScroll'
 import { DismissButton, Overlay } from 'react-aria/Overlay'
@@ -54,6 +54,25 @@ export default function Popover(props: PopoverProps) {
   const modalBackground = useContext(ModalBackgroundContext)
   usePreventScroll(modalBackground, props.isOpen)
 
+  // iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、
+  // click に依存する react-aria の外側判定ではペンで閉じられない。
+  // underlay 側では拾えない: react-aria が modal 時に外側を inert にするので
+  // underlay 自身がイベントを受け取らなくなる。
+  const { isOpen, onClose } = props
+  useEffect(() => {
+    if (!isOpen) return
+    const handlePointerUp = (e: PointerEvent) => {
+      if (e.pointerType !== 'pen') return
+      const popover = finalPopoverRef.current
+      if (popover !== null && e.composedPath().includes(popover)) return
+      onClose()
+    }
+    document.addEventListener('pointerup', handlePointerUp, true)
+    return () => {
+      document.removeEventListener('pointerup', handlePointerUp, true)
+    }
+  }, [isOpen, onClose, finalPopoverRef])
+
   if (!props.isOpen) return null
 
   return (

package/src/components/DropdownSelector/index.browser.test.tsx

@@ -0,0 +1,94 @@
+/**
+ * Apple Pencil (pointerType: 'pen') での overlay 解除テスト
+ *
+ * jsdom では検証できないため実ブラウザで実行する:
+ *
+ * 1. jsdom は inert を実装していない (`'inert' in HTMLElement.prototype` が false)。
+ *    そのため react-aria の ariaHideOutside は aria-hidden にフォールバックし、
+ *    「inert 要素はポインタイベントを受け取らない」という本番の挙動が再現されない。
+ * 2. jsdom は PointerEvent を実装しておらず pointerType が落ちる。
+ *
+ * iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、
+ * click に依存する react-aria の外側判定では overlay を閉じられない。
+ */
+import { fireEvent, render, screen } from '@testing-library/react'
+import { vi } from 'vitest'
+import DropdownSelector from '.'
+import DropdownMenuItem from './DropdownMenuItem'
+
+/** Apple Pencil のタップは iOS Safari で click を伴わない */
+const penTap = (element: Element) => {
+  const init = { pointerType: 'pen', button: 0, composed: true }
+  fireEvent.pointerDown(element, init)
+  fireEvent.pointerUp(element, init)
+}
+
+const popover = () => document.querySelector('.charcoal-popover')
+
+const getUnderlay = () => {
+  const underlay = popover()?.previousElementSibling
+  if (!(underlay instanceof HTMLElement)) throw new Error('underlay not found')
+  return underlay
+}
+
+/** ブラウザが実際にヒットテストする要素。inert / pointer-events を反映する */
+const hitTestOutsidePopover = () => {
+  const rect = popover()?.getBoundingClientRect()
+  if (!rect) throw new Error('popover not found')
+  const target = document.elementFromPoint(
+    Math.round(rect.left + rect.width / 2),
+    Math.round(rect.bottom + 40),
+  )
+  if (target === null) throw new Error('no element at point')
+  return target
+}
+
+const renderSelector = (inertWorkaround: boolean) =>
+  render(
+    <DropdownSelector
+      label="Label"
+      value="1"
+      onChange={vi.fn()}
+      inertWorkaround={inertWorkaround}
+    >
+      <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+      <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+    </DropdownSelector>,
+  )
+
+describe.each([
+  ['inertWorkaround が無効', false],
+  ['inertWorkaround が有効', true],
+])('%s なとき', (_, inertWorkaround) => {
+  it('Apple Pencil で overlay の外側をタップすると閉じる', () => {
+    renderSelector(inertWorkaround)
+
+    penTap(screen.getByRole('button'))
+    expect(popover()).not.toBeNull()
+
+    penTap(hitTestOutsidePopover())
+
+    expect(popover()).toBeNull()
+  })
+
+  // 選択肢のタップは onChange 経由で閉じるのが仕様なので、余白部分を叩く
+  it('Apple Pencil で popover の余白をタップしても閉じない', () => {
+    renderSelector(inertWorkaround)
+
+    penTap(screen.getByRole('button'))
+    const inside = popover()
+    if (inside === null) throw new Error('popover not found')
+
+    penTap(inside)
+
+    expect(popover()).not.toBeNull()
+  })
+})
+
+it('underlay は inertWorkaround が無効なとき inert になる', () => {
+  renderSelector(false)
+  penTap(screen.getByRole('button'))
+
+  expect('inert' in HTMLElement.prototype).toBe(true)
+  expect(getUnderlay().inert).toBe(true)
+})

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

@@ -1,8 +1,34 @@
-import { render, screen } from '@testing-library/react'
-import { vi } from 'vitest'
+import { fireEvent, render, screen } from '@testing-library/react'
+import { beforeAll, vi } from 'vitest'
 import DropdownSelector from '.'
 import DropdownMenuItem from './DropdownMenuItem'
 
+// Apple Pencil (pointerType: 'pen') の解除は index.browser.test.tsx で検証する。
+// jsdom は inert を実装しておらず、react-aria が外側を inert にする本番の挙動を
+// 再現できないため、ここでペンを扱うと通ってしまい実機の退行を見逃す。
+
+// jsdom は PointerEvent を実装しておらず pointerType が落ちるため補う
+class PointerEventPolyfill extends MouseEvent {
+  readonly pointerType: string
+  constructor(type: string, init: PointerEventInit = {}) {
+    super(type, init)
+    this.pointerType = init.pointerType ?? ''
+  }
+}
+
+beforeAll(() => {
+  vi.stubGlobal('PointerEvent', PointerEventPolyfill)
+})
+
+const getUnderlay = () => {
+  const popover = document.querySelector('.charcoal-popover')
+  const underlay = popover?.previousElementSibling
+  if (!(underlay instanceof HTMLElement)) {
+    throw new Error('underlay not found')
+  }
+  return underlay
+}
+
 describe('DropdownSelector', () => {
   describe('when `value` does not match any child `DropdownMenuItem`', () => {
     it('keeps the DOM `<select>.value` aligned with props `value` without breaking placeholder display', () => {
@@ -27,4 +53,33 @@ describe('DropdownSelector', () => {
       expect(button.textContent).toContain('Select an option')
     })
   })
+
+  describe.each([
+    ['inertWorkaround が無効', false],
+    ['inertWorkaround が有効', true],
+  ])('%s なとき', (_, inertWorkaround) => {
+    it('マウスで overlay をクリックすると閉じる', () => {
+      render(
+        <DropdownSelector
+          label="Label"
+          value="1"
+          onChange={vi.fn()}
+          inertWorkaround={inertWorkaround}
+        >
+          <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+          <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+        </DropdownSelector>,
+      )
+
+      fireEvent.click(screen.getByRole('button'))
+      expect(document.querySelector('.charcoal-popover')).not.toBeNull()
+
+      const underlay = getUnderlay()
+      fireEvent.pointerDown(underlay, { pointerType: 'mouse', button: 0 })
+      fireEvent.pointerUp(underlay, { pointerType: 'mouse', button: 0 })
+      fireEvent.click(underlay, { button: 0 })
+
+      expect(document.querySelector('.charcoal-popover')).toBeNull()
+    })
+  })
 })

package/src/components/DropdownSelector/index.tsx

@@ -42,6 +42,7 @@ export default function DropdownSelector({
   ...props
 }: DropdownSelectorProps) {
   const triggerRef = useRef<HTMLButtonElement>(null)
+  const penHandledRef = useRef(false)
   const [isOpen, setIsOpen] = useState(false)
   const preview = findPreviewRecursive(props.children, props.value)
 
@@ -65,6 +66,38 @@ export default function DropdownSelector({
     [onChange],
   )
 
+  // Popover が document listener の登録に使うため、識別子を安定させる
+  const handleClose = useCallback(() => {
+    setIsOpen(false)
+  }, [])
+
+  const handleSelect = useCallback(
+    (v: string) => {
+      onChange(v)
+      setIsOpen(false)
+    },
+    [onChange],
+  )
+
+  const handleTriggerPointerUp = useCallback(
+    (e: React.PointerEvent<HTMLButtonElement>) => {
+      if (e.pointerType !== 'pen') return
+      if (props.disabled === true) return
+      penHandledRef.current = true
+      setIsOpen(true)
+    },
+    [props.disabled],
+  )
+
+  const handleTriggerClick = useCallback(() => {
+    if (penHandledRef.current) {
+      penHandledRef.current = false
+      return
+    }
+    if (props.disabled === true) return
+    setIsOpen(true)
+  }, [props.disabled])
+
   const labelId = useId()
   const describedbyId = useId()
 
@@ -116,10 +149,8 @@ export default function DropdownSelector({
           props.assistiveText !== undefined ? describedbyId : undefined
         }
         disabled={props.disabled}
-        onClick={() => {
-          if (props.disabled === true) return
-          setIsOpen(true)
-        }}
+        onPointerUp={handleTriggerPointerUp}
+        onClick={handleTriggerClick}
         ref={triggerRef}
         type="button"
         data-active={isOpen}
@@ -135,18 +166,12 @@ export default function DropdownSelector({
       {isOpen && (
         <DropdownPopover
           isOpen={isOpen}
-          onClose={() => setIsOpen(false)}
+          onClose={handleClose}
           triggerRef={triggerRef}
           value={props.value}
           inertWorkaround={props.inertWorkaround}
         >
-          <MenuList
-            value={props.value}
-            onChange={(v) => {
-              onChange(v)
-              setIsOpen(false)
-            }}
-          >
+          <MenuList value={props.value} onChange={handleSelect}>
             {props.children}
           </MenuList>
         </DropdownPopover>

package/src/components/FieldLabel/index.tsx

@@ -3,8 +3,7 @@ import { useClassNames } from '../../_lib/useClassNames'
 
 import './index.css'
 
-export interface FieldLabelProps
-  extends React.LabelHTMLAttributes<HTMLLabelElement> {
+export interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {
   readonly className?: string
   readonly label: string
   readonly subLabel?: React.ReactNode

package/src/components/Icon/index.tsx

@@ -24,7 +24,8 @@ export interface OwnProps {
 }
 
 export interface IconProps
-  extends OwnProps,
+  extends
+    OwnProps,
     React.PropsWithoutRef<
       Omit<Props, 'class' | 'unsafe-non-guideline-scale' | 'fixed-size' | 'css'>
     > {}

package/src/components/LoadingSpinner/__snapshots__/index.css.snap

@@ -33,8 +33,7 @@ to {
   height: 1em;
   border-radius: 1em;
   background-color: currentColor;
-  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
-  animation-iteration-count: infinite;
+  animation: charcoal-loading-spinner-icon-scale-out 1s infinite both ease-out;
 }
 
 .charcoal-loading-spinner-icon[data-reset-animation] {

package/src/components/LoadingSpinner/index.css

@@ -31,8 +31,7 @@
   height: 1em;
   border-radius: 1em;
   background-color: currentColor;
-  animation: charcoal-loading-spinner-icon-scale-out 1s both ease-out;
-  animation-iteration-count: infinite;
+  animation: charcoal-loading-spinner-icon-scale-out 1s infinite both ease-out;
 
   &[data-reset-animation] {
     animation: none;

package/src/components/Modal/__snapshots__/index.css.snap

@@ -64,3 +64,4 @@
   font-weight: inherit;
   font-size: inherit;
 }
+

package/src/components/Pagination/__snapshots__/index.css.snap

@@ -23,7 +23,9 @@
   border-style: none;
   outline: none;
   text-decoration: none;
-  font: inherit;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant: inherit;
   margin: 0;
   user-select: none;
   display: flex;

package/src/components/Pagination/index.css

@@ -22,7 +22,9 @@
   border-style: none;
   outline: none;
   text-decoration: none;
-  font: inherit;
+  font-family: inherit;
+  font-style: inherit;
+  font-variant: inherit;
   margin: 0;
   user-select: none;
 

package/src/components/TextEllipsis/TextEllipsis.story.tsx

@@ -1,4 +1,4 @@
-import { Meta, StoryObj } from '@storybook/react-webpack5'
+import { Meta, StoryObj } from '@storybook/react-vite'
 import TextEllipsis from '.'
 
 export default {

package/src/css.d.ts

@@ -0,0 +1 @@
+declare module '*.css'