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

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/Modal/__snapshots__/index.css.snap

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

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'