@charcoal-ui/react 6.0.1 → 6.1.0-beta.1

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

@@ -0,0 +1,131 @@
+import '../layout.css'
+import './index.css'
+
+import { forwardRef, useImperativeHandle, useRef } from 'react'
+import type { ReactNode } from 'react'
+import { NotificationItem } from '../NotificationItem'
+import { NotificationRegion } from '../NotificationRegion'
+import { useNotificationQueue } from '../useNotificationQueue'
+import type { NotificationProps, Position } from '../types'
+
+export type SnackbarCloseReason =
+  'timeout' | 'replaced' | 'action' | 'close' | 'unmounted'
+
+export type ShowSnackbarOptions = {
+  /**
+   * Snackbar の右側に表示するアクション
+   */
+  action?: ReactNode
+  /**
+   * Snackbar が閉じるときに呼び出される
+   */
+  onClose?: (reason: SnackbarCloseReason) => void
+}
+
+export type SnackbarHandler = {
+  show: (message: ReactNode, options?: ShowSnackbarOptions) => void
+}
+
+export type SnackbarProps = Omit<NotificationProps, 'position'> & {
+  /**
+   * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される
+   * @default 'bottom'
+   */
+  position?: Position
+  /**
+   * 暗い背景色
+   * @default false
+   */
+  dim?: boolean
+}
+
+type SnackbarContent = {
+  message: ReactNode
+  action?: ReactNode
+}
+
+const Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(
+  { position = 'bottom', dim = false, duration, order, ...regionProps },
+  ref,
+) {
+  'use memo'
+
+  const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =
+    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {
+      duration,
+      order,
+      timeoutReason: 'timeout',
+      unmountedReason: 'unmounted',
+    })
+
+  function show(message: ReactNode, options: ShowSnackbarOptions = {}) {
+    enqueue(
+      {
+        message,
+        action: options.action,
+      },
+      options.onClose,
+    )
+  }
+
+  useImperativeHandle(ref, () => ({ show }))
+
+  // アクション付きの Snackbar は常に下部に表示される
+  const hasAction = state.visibleToasts.some(
+    (toast) => toast.content.action !== undefined,
+  )
+  const effectivePosition = hasAction ? 'bottom' : position
+
+  return (
+    <NotificationRegion
+      name="snackbar"
+      state={state}
+      position={effectivePosition}
+      {...regionProps}
+    >
+      {state.visibleToasts.map((toast) => (
+        <NotificationItem
+          key={toast.key}
+          name="snackbar"
+          toast={toast}
+          state={state}
+          itemRef={itemRef}
+          onHoverStart={onHoverStart}
+          onHoverEnd={onHoverEnd}
+          data-dim={dim}
+          data-with-action={toast.content.action !== undefined}
+        >
+          {toast.content.action !== undefined && (
+            <SnackbarAction
+              action={toast.content.action}
+              onClick={() => close(toast.key, 'action')}
+            />
+          )}
+        </NotificationItem>
+      ))}
+    </NotificationRegion>
+  )
+})
+
+export default Snackbar
+
+export function useSnackbar(props: SnackbarProps = {}) {
+  'use memo'
+
+  const snackbarHandlerRef = useRef<SnackbarHandler>(null)
+  const element = <Snackbar ref={snackbarHandlerRef} {...props} />
+  function show(message: ReactNode, options?: ShowSnackbarOptions) {
+    snackbarHandlerRef.current?.show(message, options)
+  }
+  return [element, show] as const
+}
+
+function SnackbarAction({
+  action,
+  onClick,
+}: {
+  action: ReactNode
+  onClick: () => void
+}) {
+  return <div onClick={onClick}>{action}</div>
+}

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

@@ -0,0 +1,62 @@
+.charcoal-toast-region {
+  --charcoal-toast-offset: 16px;
+}
+
+.charcoal-toast-region[data-position='top'] {
+  --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
+  top: calc(
+      env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
+    );
+}
+
+.charcoal-toast-region[data-position='bottom'] {
+  --charcoal-toast-enter-offset: var(--charcoal-space-30);
+  bottom: calc(
+      env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)
+    );
+}
+
+.charcoal-toast {
+  min-height: 40px;
+  padding: var(--charcoal-space-20) var(--charcoal-space-40);
+  color: var(--charcoal-color-text-on-positive-default);
+  border: var(--charcoal-border-width-m) solid var(--charcoal-color-border-hud);
+  animation: charcoal-toast-enter 0.3s ease-out both;
+}
+
+.charcoal-toast[data-exiting='true'] {
+  animation: charcoal-toast-exit 0.3s ease-out both;
+}
+
+.charcoal-toast[data-type='success'] {
+  background-color: var(--charcoal-color-container-positive-default);
+}
+
+.charcoal-toast[data-type='error'] {
+  background-color: var(--charcoal-color-container-negative-default);
+}
+
+@keyframes charcoal-toast-enter {
+
+from {
+  opacity: 0;
+  transform: translateY(var(--charcoal-toast-enter-offset));
+}
+
+to {
+  opacity: 1;
+  transform: translateY(0);
+}
+}
+
+@keyframes charcoal-toast-exit {
+
+from {
+  opacity: 1;
+}
+
+to {
+  opacity: 0;
+}
+}
+

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

@@ -0,0 +1,61 @@
+.charcoal-toast-region {
+  --charcoal-toast-offset: 16px;
+
+  &[data-position='top'] {
+    --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
+
+    top: calc(
+      env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
+    );
+  }
+
+  &[data-position='bottom'] {
+    --charcoal-toast-enter-offset: var(--charcoal-space-30);
+
+    bottom: calc(
+      env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)
+    );
+  }
+}
+
+.charcoal-toast {
+  min-height: 40px;
+  padding: var(--charcoal-space-20) var(--charcoal-space-40);
+  color: var(--charcoal-color-text-on-positive-default);
+  border: var(--charcoal-border-width-m) solid var(--charcoal-color-border-hud);
+  animation: charcoal-toast-enter 0.3s ease-out both;
+
+  &[data-exiting='true'] {
+    animation: charcoal-toast-exit 0.3s ease-out both;
+  }
+
+  &[data-type='success'] {
+    background-color: var(--charcoal-color-container-positive-default);
+  }
+
+  &[data-type='error'] {
+    background-color: var(--charcoal-color-container-negative-default);
+  }
+}
+
+@keyframes charcoal-toast-enter {
+  from {
+    opacity: 0;
+    transform: translateY(var(--charcoal-toast-enter-offset));
+  }
+
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes charcoal-toast-exit {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,174 @@
+import { useEffect, type ReactNode } from 'react'
+import { Meta, StoryObj } from '@storybook/react-vite'
+import Button from '../../Button'
+import unstable_Toast, {
+  useToast as unstable_useToast,
+  type ToastProps as unstable_ToastProps,
+  type ShowToastOptions as unstable_ShowToastOptions,
+} from '.'
+
+const defaultOpen = !!process.env.TEST
+
+type ToastStoryArgs = unstable_ToastProps & {
+  message: ReactNode
+  type: unstable_ShowToastOptions['type']
+}
+
+export default {
+  title: 'react/unstable_Toast',
+  component: unstable_Toast,
+  parameters: {
+    layout: 'centered',
+    tokenVersion: 'v2',
+    controls: {
+      sort: 'requiredFirst',
+    },
+    docs: {
+      description: {
+        component: `同時に表示できるトーストは1つのみです。表示中に別のトーストが発生した場合は、\`order\` に応じてキューに積むか、表示中のトーストを置き換えます。
+
+別々の \`useToast\` を呼び出した場合は互いに独立するため、同時表示数は1件に制限されません。`,
+      },
+    },
+  },
+  args: {
+    message: '保存しました',
+    duration: 5000,
+    order: 'queue',
+    type: 'success',
+  },
+  argTypes: {
+    position: {
+      options: ['top', 'bottom'],
+      control: { type: 'inline-radio' },
+      table: { category: 'Hook' },
+    },
+    offset: {
+      control: { type: 'number', min: 0, step: 1 },
+      table: { category: 'Hook' },
+    },
+    duration: {
+      control: { type: 'number', min: 0, step: 500 },
+      description: '表示時間（ミリ秒）',
+      table: { category: 'Hook' },
+    },
+    order: {
+      options: ['queue', 'replace'],
+      control: { type: 'inline-radio' },
+      table: { category: 'Hook' },
+    },
+    zIndex: {
+      control: { type: 'number', min: 0, step: 1 },
+      table: { category: 'Hook' },
+    },
+    className: {
+      control: 'text',
+      table: { category: 'Hook' },
+    },
+    portalContainer: {
+      control: false,
+      table: { category: 'Hook' },
+    },
+    css: {
+      table: { disable: true },
+    },
+    type: {
+      options: ['success', 'error'],
+      control: { type: 'inline-radio' },
+      table: { category: 'Show' },
+    },
+    message: {
+      control: 'text',
+      table: { category: 'Show' },
+    },
+  },
+  render: (args) => <ToastDemo {...args} />,
+} as Meta<ToastStoryArgs>
+
+function ToastDemo({ message, type, ...props }: ToastStoryArgs) {
+  const [toast, showToast] = unstable_useToast(props)
+  const showOptions = {
+    type,
+  }
+
+  useEffect(() => {
+    if (!defaultOpen) {
+      return
+    }
+    showToast(message, {
+      type,
+    })
+  }, [message, showToast, type])
+
+  return (
+    <>
+      {toast}
+      <Button
+        onClick={() => {
+          showToast(message, showOptions)
+        }}
+      >
+        show
+      </Button>
+    </>
+  )
+}
+
+export const Default: StoryObj<ToastStoryArgs> = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `import { Button, unstable_useToast } from '@charcoal-ui/react'
+
+export function Example() {
+  const [toast, showToast] = unstable_useToast()
+
+  return (
+    <>
+      {toast}
+      <Button
+        onClick={() => showToast('保存しました', { type: 'success' })}
+      >
+        保存
+      </Button>
+    </>
+  )
+}`,
+      },
+    },
+  },
+}
+
+export const Error: StoryObj<ToastStoryArgs> = {
+  args: {
+    type: 'error',
+    message: '保存に失敗しました',
+  },
+}
+
+export const LongMessage: StoryObj<ToastStoryArgs> = {
+  args: {
+    message:
+      '保存した内容はすべての端末に同期され、あとから設定画面で変更できます。長いメッセージは2行を超えると省略されます',
+  },
+}
+
+export const WithLineBreak: StoryObj<ToastStoryArgs> = {
+  args: {
+    message: (
+      <>
+        保存に失敗しました
+        <br />
+        通信環境を確認してください
+      </>
+    ),
+  },
+}
+
+export const Bottom: StoryObj<ToastStoryArgs> = {
+  args: {
+    position: 'bottom',
+    message: '下部に表示します',
+  },
+}

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

@@ -0,0 +1,263 @@
+import { createRef, type ComponentProps } from 'react'
+import { render, fireEvent, act, cleanup, screen } from '@testing-library/react'
+import { vi, describe, it, expect, afterEach, beforeEach } from 'vitest'
+import Toast, { useToast, type ToastHandler } from '.'
+
+function renderToast(props: ComponentProps<typeof Toast> = {}) {
+  const ref = createRef<ToastHandler>()
+  const result = render(<Toast ref={ref} {...props} />)
+  const show: ToastHandler['show'] = (message, options) => {
+    act(() => {
+      ref.current?.show(message, options)
+    })
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+  }
+  return { ...result, show }
+}
+
+function finishExitAnimation(message: string) {
+  const toast = screen.getByText(message).closest('.charcoal-toast')
+  if (toast === null) throw new Error('Toast not found')
+  fireEvent(
+    toast,
+    Object.assign(new Event('animationend', { bubbles: true }), {
+      animationName: 'charcoal-toast-exit',
+    }),
+  )
+}
+
+describe('Toast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('shows a message and hides after 5 seconds', () => {
+    const { show } = renderToast()
+
+    expect(screen.queryByRole('region')).not.toBeInTheDocument()
+
+    show('保存しました', { type: 'success' })
+
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+    expect(
+      screen.getByText('保存しました').closest('.charcoal-toast'),
+    ).toHaveAttribute('data-exiting', 'true')
+
+    finishExitAnimation('保存しました')
+
+    expect(screen.queryByText('保存しました')).not.toBeInTheDocument()
+  })
+
+  it.each([0, -1])('clamps duration to zero: %s', (duration) => {
+    const { show } = renderToast({ duration })
+
+    show('保存しました', { type: 'success' })
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+    expect(
+      screen.getByText('保存しました').closest('.charcoal-toast'),
+    ).toHaveAttribute('data-exiting', 'true')
+
+    finishExitAnimation('保存しました')
+    expect(screen.queryByText('保存しました')).not.toBeInTheDocument()
+  })
+
+  it.each([
+    Number.NaN,
+    Number.POSITIVE_INFINITY,
+    Number.NEGATIVE_INFINITY,
+    'invalid' as unknown as number,
+  ])('falls back to the default duration: %s', (duration) => {
+    const { show } = renderToast({ duration })
+
+    show('保存しました', { type: 'success' })
+    act(() => {
+      vi.advanceTimersByTime(4999)
+    })
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+    expect(
+      screen.getByText('保存しました').closest('.charcoal-toast'),
+    ).toHaveAttribute('data-exiting', 'true')
+  })
+
+  it('queues the next toast until the previous one closes', async () => {
+    const { show } = renderToast()
+
+    show('first', { type: 'success' })
+    show('second', { type: 'error' })
+
+    expect(screen.getByText('first')).toBeInTheDocument()
+    expect(screen.queryByText('second')).not.toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    await act(async () => {
+      finishExitAnimation('first')
+    })
+
+    expect(screen.queryByText('first')).not.toBeInTheDocument()
+    expect(screen.getByText('second')).toBeInTheDocument()
+    expect(
+      screen.getByText('second').closest('.charcoal-toast'),
+    ).toHaveAttribute('data-type', 'error')
+  })
+
+  it('replaces the current toast immediately when requested', () => {
+    const { show } = renderToast({ order: 'replace' })
+
+    show('first', { type: 'success' })
+    show('second', { type: 'error' })
+
+    expect(screen.queryByText('first')).not.toBeInTheDocument()
+    expect(screen.getByText('second')).toBeInTheDocument()
+  })
+
+  it('keeps the toast open while hovered after the timer ends, then closes on leave', () => {
+    const { show } = renderToast()
+
+    show('保存しました', { type: 'success' })
+    const toast = screen.getByText('保存しました').closest('.charcoal-toast')
+    if (toast === null) throw new Error('Toast not found')
+
+    fireEvent.pointerEnter(toast, { pointerType: 'mouse' })
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(toast).not.toHaveAttribute('data-exiting', 'true')
+
+    fireEvent.pointerLeave(toast)
+    expect(toast).toHaveAttribute('data-exiting', 'true')
+  })
+
+  it('keeps the toast open while focused', () => {
+    const { show } = renderToast()
+
+    show('保存しました', { type: 'success' })
+    const toast = screen.getByText('保存しました').closest('.charcoal-toast')
+    if (toast === null) throw new Error('Toast not found')
+
+    fireEvent.keyDown(document, { key: 'F6' })
+    expect(screen.getByRole('region')).toHaveFocus()
+
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(toast).not.toHaveAttribute('data-exiting', 'true')
+
+    fireEvent.blur(screen.getByRole('region'))
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(toast).toHaveAttribute('data-exiting', 'true')
+  })
+
+  it('places a toast at the top by default', () => {
+    const { show } = renderToast()
+
+    show('保存しました', { type: 'success' })
+
+    expect(screen.getByRole('region')).toHaveAttribute('data-position', 'top')
+  })
+
+  it('places a toast at the bottom when requested', () => {
+    const { show } = renderToast({ position: 'bottom' })
+
+    show('保存しました', { type: 'success' })
+
+    expect(screen.getByRole('region')).toHaveAttribute(
+      'data-position',
+      'bottom',
+    )
+  })
+
+  it.each(['success', 'error'] as const)('applies the %s type', (type) => {
+    const { show } = renderToast()
+
+    show('保存しました', { type })
+
+    expect(
+      screen.getByText('保存しました').closest('.charcoal-toast'),
+    ).toHaveAttribute('data-type', type)
+  })
+
+  it('supports a custom z-index and portal container', () => {
+    const portalContainer = document.createElement('div')
+    document.body.append(portalContainer)
+    const { show } = renderToast({ zIndex: 30, portalContainer })
+
+    show('保存しました', { type: 'success' })
+
+    expect(portalContainer).toContainElement(screen.getByRole('region'))
+    expect(screen.getByRole('region')).toHaveStyle({ zIndex: 30 })
+
+    portalContainer.remove()
+  })
+
+  it('moves focus to the toast region with F6', () => {
+    const { show } = renderToast()
+
+    show('保存しました', { type: 'success' })
+
+    fireEvent.keyDown(document, { key: 'F6' })
+
+    expect(screen.getByRole('region')).toHaveFocus()
+  })
+})
+
+describe('useToast', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('shows a toast via the returned void function', () => {
+    let showResult: void | undefined
+
+    function HookApp() {
+      const [toast, show] = useToast()
+      return (
+        <>
+          {toast}
+          <button
+            type="button"
+            onClick={() => {
+              showResult = show('hook message', { type: 'success' })
+            }}
+          >
+            open
+          </button>
+        </>
+      )
+    }
+
+    render(<HookApp />)
+    fireEvent.click(screen.getByText('open'))
+    expect(screen.getByText('hook message')).toBeInTheDocument()
+    expect(showResult).toBeUndefined()
+  })
+})