@charcoal-ui/react 6.1.0-beta.0 → 6.1.0-beta.2

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,177 @@
+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/Toast',
+  component: unstable_Toast,
+  parameters: {
+    layout: 'centered',
+    tokenVersion: 'v2',
+    controls: {
+      sort: 'requiredFirst',
+    },
+    docs: {
+      description: {
+        component: `同時に表示できるトーストは1つのみです。表示中に別のトーストが発生した場合は、\`order\` に応じてキューに積むか、表示中のトーストを置き換えます。
+
+別々の \`useToast\` を呼び出した場合は互いに独立するため、同時表示数は1件に制限されません。`,
+      },
+    },
+  },
+  args: {
+    message: '保存しました',
+    position: 'top',
+    offset: 16,
+    duration: 5000,
+    order: 'queue',
+    zIndex: 20,
+    type: 'success',
+  },
+  argTypes: {
+    position: {
+      options: ['top', 'bottom'],
+      control: { type: 'inline-radio' },
+      table: { category: 'Hook', defaultValue: { summary: "'top'" } },
+    },
+    offset: {
+      control: { type: 'number', min: 0, step: 1 },
+      table: { category: 'Hook', defaultValue: { summary: '16' } },
+    },
+    duration: {
+      control: { type: 'number', min: 0, step: 500 },
+      description: '表示時間（ミリ秒）',
+      table: { category: 'Hook', defaultValue: { summary: '5000' } },
+    },
+    order: {
+      options: ['queue', 'replace'],
+      control: { type: 'inline-radio' },
+      table: { category: 'Hook', defaultValue: { summary: "'queue'" } },
+    },
+    zIndex: {
+      control: { type: 'number', min: 0, step: 1 },
+      table: { category: 'Hook', defaultValue: { summary: '20' } },
+    },
+    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()
+  })
+})

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

@@ -0,0 +1,86 @@
+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 ToastType = 'success' | 'error'
+
+export type ShowToastOptions = {
+  type: ToastType
+}
+
+export type ToastHandler = {
+  show: (message: ReactNode, options: ShowToastOptions) => void
+}
+
+export type ToastProps = Omit<NotificationProps, 'position'> & {
+  /**
+   * Toast の表示位置
+   * @default 'top'
+   */
+  position?: Position
+}
+
+type ToastContent = {
+  message: ReactNode
+  type: ToastType
+}
+
+const Toast = forwardRef<ToastHandler, ToastProps>(function Toast(
+  { position = 'top', duration, order, ...regionProps },
+  ref,
+) {
+  'use memo'
+
+  const { state, itemRef, enqueue, onHoverStart, onHoverEnd } =
+    useNotificationQueue<ToastContent>('toast', { duration, order })
+
+  function show(message: ReactNode, options: ShowToastOptions) {
+    enqueue({
+      message,
+      type: options.type,
+    })
+  }
+
+  useImperativeHandle(ref, () => ({ show }))
+
+  return (
+    <NotificationRegion
+      name="toast"
+      state={state}
+      position={position}
+      {...regionProps}
+    >
+      {state.visibleToasts.map((toast) => (
+        <NotificationItem
+          key={toast.key}
+          name="toast"
+          toast={toast}
+          state={state}
+          itemRef={itemRef}
+          onHoverStart={onHoverStart}
+          onHoverEnd={onHoverEnd}
+          data-type={toast.content.type}
+        />
+      ))}
+    </NotificationRegion>
+  )
+})
+
+export default Toast
+
+export function useToast(props: ToastProps = {}) {
+  'use memo'
+
+  const toastHandlerRef = useRef<ToastHandler>(null)
+  const element = <Toast ref={toastHandlerRef} {...props} />
+  function show(message: ReactNode, options: ShowToastOptions) {
+    toastHandlerRef.current?.show(message, options)
+  }
+  return [element, show] as const
+}

package/src/components/Notification/__snapshots__/layout.css.snap

@@ -0,0 +1,47 @@
+.charcoal-notification-region {
+  position: fixed;
+  left: 0;
+  right: 0;
+  display: grid;
+  justify-content: center;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.charcoal-notification {
+  box-sizing: border-box;
+  border-radius: var(--charcoal-radius-oval);
+  width: fit-content;
+  max-width: calc(100vw - var(--charcoal-space-46));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--charcoal-space-20);
+  pointer-events: auto;
+}
+
+.charcoal-notification-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.charcoal-notification-label {
+  min-width: 0;
+  overflow: hidden;
+  overflow-wrap: break-word;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  font-size: var(--charcoal-text-font-size-caption-m);
+  font-weight: var(--charcoal-text-font-weight-bold);
+  line-height: var(--charcoal-text-line-height-caption-m);
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+.charcoal-notification, .charcoal-notification[data-exiting='true'] {
+  animation: none;
+}
+}
+