@charcoal-ui/react 6.1.0-beta.6 → 8.1.1-beta.0

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

@@ -11,7 +11,7 @@
  * iOS Safari は非インタラクティブな要素へのペン入力で click を合成しないため、
  * click に依存する react-aria の外側判定では overlay を閉じられない。
  */
-import { fireEvent, render, screen } from '@testing-library/react'
+import { fireEvent, render, screen, waitFor } from '@testing-library/react'
 import { vi } from 'vitest'
 import DropdownSelector from '.'
 import DropdownMenuItem from './DropdownMenuItem'
@@ -60,7 +60,7 @@ describe.each([
   ['inertWorkaround が無効', false],
   ['inertWorkaround が有効', true],
 ])('%s なとき', (_, inertWorkaround) => {
-  it('Apple Pencil で overlay の外側をタップすると閉じる', () => {
+  it('Apple Pencil で overlay の外側をタップすると閉じる', async () => {
     renderSelector(inertWorkaround)
 
     penTap(screen.getByRole('button'))
@@ -68,7 +68,9 @@ describe.each([
 
     penTap(hitTestOutsidePopover())
 
-    expect(popover()).toBeNull()
+    await waitFor(() => {
+      expect(popover()).toBeNull()
+    })
   })
 
   // 選択肢のタップは onChange 経由で閉じるのが仕様なので、余白部分を叩く
@@ -85,6 +87,79 @@ describe.each([
   })
 })
 
+it('inertWorkaround が有効なとき、開いた直後に underlay へ送られる互換 click では閉じない', () => {
+  renderSelector(true)
+
+  penTap(screen.getByRole('button'))
+  expect(popover()).not.toBeNull()
+
+  // Android Chrome はペンの pointerup 後、underlay 上の pointerdown を伴わない
+  // mouse / click イベントを新しく追加された underlay に送る。
+  const underlay = getUnderlay()
+  fireEvent.mouseDown(underlay)
+  fireEvent.mouseUp(underlay)
+  fireEvent.click(underlay)
+
+  expect(popover()).not.toBeNull()
+})
+
+it('ペンで外側をタップしたとき、下にあるクリック可能な要素をクリックせずに閉じる', async () => {
+  const handleBackgroundClick = vi.fn()
+  render(
+    <>
+      <DropdownSelector
+        label="Label"
+        value="1"
+        onChange={vi.fn()}
+        inertWorkaround
+      >
+        <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+        <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+      </DropdownSelector>
+      <button
+        type="button"
+        onClick={handleBackgroundClick}
+        style={{ position: 'fixed', right: 16, bottom: 16 }}
+      >
+        Background button
+      </button>
+    </>,
+  )
+
+  penTap(screen.getByRole('button', { name: 'Label' }))
+  expect(popover()).not.toBeNull()
+
+  const backgroundButton = screen.getByRole('button', {
+    name: 'Background button',
+  })
+  const rect = backgroundButton.getBoundingClientRect()
+  const point = {
+    x: Math.round(rect.left + rect.width / 2),
+    y: Math.round(rect.top + rect.height / 2),
+  }
+  const pointerTarget = document.elementFromPoint(point.x, point.y)
+  if (pointerTarget === null) throw new Error('pointer target not found')
+
+  fireEvent.pointerDown(pointerTarget, {
+    pointerType: 'pen',
+    button: 0,
+    composed: true,
+  })
+  // Android Chrome はこの touchstart がキャンセルされた場合、後続の互換
+  // mouse / click イベントを生成しない。
+  expect(fireEvent.touchStart(pointerTarget)).toBe(false)
+  fireEvent.pointerUp(pointerTarget, {
+    pointerType: 'pen',
+    button: 0,
+    composed: true,
+  })
+
+  await waitFor(() => {
+    expect(popover()).toBeNull()
+  })
+  expect(handleBackgroundClick).not.toHaveBeenCalled()
+})
+
 it('underlay は inertWorkaround が無効なとき inert になる', () => {
   renderSelector(false)
   penTap(screen.getByRole('button'))

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

@@ -543,3 +543,40 @@ export const WithRef: StoryObj<typeof DropdownSelector> = {
     )
   },
 }
+
+export const InertWorkaroundPenOutside: StoryObj<typeof DropdownSelector> = {
+  render: function Render() {
+    const [selected, setSelected] = useState('1')
+    const [backgroundClickCount, setBackgroundClickCount] = useState(0)
+
+    return (
+      <div style={{ display: 'flex', alignItems: 'flex-start', gap: 64 }}>
+        <div style={{ width: 288 }}>
+          <DropdownSelector
+            value={selected}
+            onChange={setSelected}
+            label="DropdownSelector"
+            inertWorkaround
+          >
+            <DropdownMenuItem value="1">Option 1</DropdownMenuItem>
+            <DropdownMenuItem value="2">Option 2</DropdownMenuItem>
+            <DropdownMenuItem value="3">Option 3</DropdownMenuItem>
+          </DropdownSelector>
+        </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
+          <Button
+            data-testid="background-button"
+            onClick={() => {
+              setBackgroundClickCount((count) => count + 1)
+            }}
+          >
+            Background button
+          </Button>
+          <div data-testid="background-click-count">
+            Background click count: {backgroundClickCount}
+          </div>
+        </div>
+      </div>
+    )
+  },
+}

package/src/components/Notification/NotificationRegion.browser.test.tsx

@@ -0,0 +1,120 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import type { ComponentType } from 'react'
+import { afterEach } from 'vitest'
+import { useSnackbar } from './Snackbar'
+import { useToast } from './Toast'
+
+const HEADER_OFFSET = 64
+const OFFSET = 24
+const MINIMUM_OFFSET = 16
+
+const notificationOptions = {
+  position: 'top',
+  headerOffset: HEADER_OFFSET,
+  duration: 60_000,
+} as const
+
+type AppProps = {
+  offset?: number
+}
+
+function ToastApp({ offset = OFFSET }: AppProps) {
+  const [toast, showToast] = useToast({ ...notificationOptions, offset })
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => showToast('保存しました', { type: 'success' })}
+      >
+        通知を表示
+      </button>
+      <div style={{ height: '200vh' }}>{toast}</div>
+    </>
+  )
+}
+
+function SnackbarApp({ offset = OFFSET }: AppProps) {
+  const [snackbar, showSnackbar] = useSnackbar({
+    ...notificationOptions,
+    offset,
+  })
+
+  return (
+    <>
+      <button type="button" onClick={() => showSnackbar('保存しました')}>
+        通知を表示
+      </button>
+      <div style={{ height: '200vh' }}>{snackbar}</div>
+    </>
+  )
+}
+
+function getRegions(regionSelector: string) {
+  const notificationRegion = screen.getByRole('region')
+  const itemRegion = notificationRegion.querySelector(regionSelector)
+
+  if (!(itemRegion instanceof HTMLElement)) {
+    throw new Error('Notification item region not found')
+  }
+
+  return { notificationRegion, itemRegion }
+}
+
+async function scrollTo(top: number) {
+  window.scrollTo(0, top)
+  await vi.waitFor(() => expect(window.scrollY).toBe(top))
+}
+
+afterEach(async () => {
+  await scrollTo(0)
+})
+
+describe.each<{
+  name: string
+  App: ComponentType<AppProps>
+  regionSelector: string
+}>([
+  {
+    name: 'Toast',
+    App: ToastApp,
+    regionSelector: '.charcoal-toast-region',
+  },
+  {
+    name: 'Snackbar',
+    App: SnackbarApp,
+    regionSelector: '.charcoal-snackbar-region',
+  },
+])('$name header offset', ({ App, regionSelector }) => {
+  it('ヘッダーと一緒にスクロールし、画面上端からoffsetの位置で固定される', async () => {
+    render(<App />)
+    fireEvent.click(screen.getByRole('button', { name: '通知を表示' }))
+
+    const { notificationRegion, itemRegion } = getRegions(regionSelector)
+
+    expect(itemRegion.getBoundingClientRect().top).toBe(HEADER_OFFSET + OFFSET)
+
+    await scrollTo(20)
+
+    expect(notificationRegion.getBoundingClientRect().top).toBe(-20)
+    expect(itemRegion.getBoundingClientRect().top).toBe(
+      HEADER_OFFSET + OFFSET - 20,
+    )
+
+    await scrollTo(HEADER_OFFSET)
+
+    expect(notificationRegion.getBoundingClientRect().top).toBe(-HEADER_OFFSET)
+    expect(itemRegion.getBoundingClientRect().top).toBe(OFFSET)
+  })
+
+  it('offsetが16未満の場合は初期表示位置に16pxの余白を確保する', () => {
+    render(<App offset={8} />)
+    fireEvent.click(screen.getByRole('button', { name: '通知を表示' }))
+
+    const { itemRegion } = getRegions(regionSelector)
+
+    expect(itemRegion.getBoundingClientRect().top).toBe(
+      HEADER_OFFSET + MINIMUM_OFFSET,
+    )
+  })
+})

package/src/components/Notification/NotificationRegion.tsx

@@ -48,6 +48,7 @@ export function NotificationRegion<TContent>({
   }
   const { regionProps } = useToastRegion({}, timerState, regionRef)
   const classNames = useClassNames('charcoal-notification-region', className)
+  const effectiveOffset = Math.max(offset, DEFAULT_OFFSET)
 
   if (state.visibleToasts.length === 0) {
     return null
@@ -62,14 +63,14 @@ export function NotificationRegion<TContent>({
         style={
           {
             zIndex,
-            [`--charcoal-${name}-offset`]: `${offset}px`,
+            [`--charcoal-${name}-offset`]: `${effectiveOffset}px`,
             justifyContent: position === 'top' ? 'flex-start' : 'flex-end',
           } as CSSProperties
         }
       >
         <div
           style={{
-            height: `${headerOffset}px`,
+            height: `calc(${headerOffset}px + env(safe-area-inset-top, 0px) + var(--charcoal-${name}-offset))`,
           }}
         />
         <div data-position={position} className={`charcoal-${name}-region`}>

package/src/components/Notification/Snackbar/__snapshots__/index.css.snap

@@ -1,21 +1,18 @@
-.charcoal-snackbar-region {
+.charcoal-notification-region {
   --charcoal-snackbar-offset: 16px;
 }
 
 .charcoal-snackbar-region[data-position='top'] {
   --charcoal-snackbar-enter-offset: calc(-1 * var(--charcoal-space-30));
   position: sticky;
-  top: calc(
-      env(safe-area-inset-top, 0px) + max(var(--charcoal-snackbar-offset), 16px)
-    );
+  top: calc(env(safe-area-inset-top, 0px) + var(--charcoal-snackbar-offset));
 }
 
 .charcoal-snackbar-region[data-position='bottom'] {
   --charcoal-snackbar-enter-offset: var(--charcoal-space-30);
   position: fixed;
   bottom: calc(
-      env(safe-area-inset-bottom, 0px) +
-        max(var(--charcoal-snackbar-offset), 16px)
+      env(safe-area-inset-bottom, 0px) + var(--charcoal-snackbar-offset)
     );
 }
 

package/src/components/Notification/Snackbar/index.css

@@ -1,13 +1,13 @@
-.charcoal-snackbar-region {
+.charcoal-notification-region {
   --charcoal-snackbar-offset: 16px;
+}
 
+.charcoal-snackbar-region {
   &[data-position='top'] {
     --charcoal-snackbar-enter-offset: calc(-1 * var(--charcoal-space-30));
 
     position: sticky;
-    top: calc(
-      env(safe-area-inset-top, 0px) + max(var(--charcoal-snackbar-offset), 16px)
-    );
+    top: calc(env(safe-area-inset-top, 0px) + var(--charcoal-snackbar-offset));
   }
 
   &[data-position='bottom'] {
@@ -15,8 +15,7 @@
 
     position: fixed;
     bottom: calc(
-      env(safe-area-inset-bottom, 0px) +
-        max(var(--charcoal-snackbar-offset), 16px)
+      env(safe-area-inset-bottom, 0px) + var(--charcoal-snackbar-offset)
     );
   }
 }

package/src/components/Notification/Snackbar/index.story.tsx

@@ -34,7 +34,6 @@ export default {
   args: {
     message: '保存しました',
     position: 'bottom',
-    offset: 16,
     duration: 5000,
     order: 'queue',
     dim: false,

package/src/components/Notification/Toast/__snapshots__/index.css.snap

@@ -1,20 +1,18 @@
-.charcoal-toast-region {
+.charcoal-notification-region {
   --charcoal-toast-offset: 16px;
 }
 
 .charcoal-toast-region[data-position='top'] {
   position: sticky;
   --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
-  top: calc(
-      env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
-    );
+  top: calc(env(safe-area-inset-top, 0px) + var(--charcoal-toast-offset));
 }
 
 .charcoal-toast-region[data-position='bottom'] {
   position: fixed;
   --charcoal-toast-enter-offset: var(--charcoal-space-30);
   bottom: calc(
-      env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)
+      env(safe-area-inset-bottom, 0px) + var(--charcoal-toast-offset)
     );
 }
 

package/src/components/Notification/Toast/index.css

@@ -1,13 +1,13 @@
-.charcoal-toast-region {
+.charcoal-notification-region {
   --charcoal-toast-offset: 16px;
+}
 
+.charcoal-toast-region {
   &[data-position='top'] {
     position: sticky;
     --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
 
-    top: calc(
-      env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
-    );
+    top: calc(env(safe-area-inset-top, 0px) + var(--charcoal-toast-offset));
   }
 
   &[data-position='bottom'] {
@@ -15,7 +15,7 @@
     --charcoal-toast-enter-offset: var(--charcoal-space-30);
 
     bottom: calc(
-      env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)
+      env(safe-area-inset-bottom, 0px) + var(--charcoal-toast-offset)
     );
   }
 }

package/src/components/Notification/Toast/index.story.tsx

@@ -34,7 +34,6 @@ export default {
   args: {
     message: '保存しました',
     position: 'top',
-    offset: 16,
     duration: 5000,
     order: 'queue',
     zIndex: 20,

package/src/components/Notification/types.ts

@@ -9,6 +9,11 @@ export type UseNotificationOptions = {
    * @default 16
    */
   offset?: number
+  /**
+   * スクロールに追従しないヘッダーの高さを指定する
+   * @default 0
+   */
+  headerOffset?: number
   /**
    * 通知を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う
    * @default 5000

package/src/components/TextField/index.tsx

@@ -26,7 +26,6 @@ export type TextFieldProps = {
   requiredText?: string
   disabled?: boolean
   subLabel?: React.ReactNode
-  rdfaPrefix?: string
 
   getCount?: (value: string) => number
 } & Omit<React.ComponentPropsWithoutRef<'input'>, 'prefix' | 'onChange'>