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

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

@@ -0,0 +1,69 @@
+.charcoal-snackbar-region {
+  --charcoal-snackbar-offset: 16px;
+}
+
+.charcoal-snackbar-region[data-position='top'] {
+  --charcoal-snackbar-enter-offset: calc(-1 * var(--charcoal-space-30));
+  top: calc(
+      env(safe-area-inset-top, 0px) + max(var(--charcoal-snackbar-offset), 16px)
+    );
+}
+
+.charcoal-snackbar-region[data-position='bottom'] {
+  --charcoal-snackbar-enter-offset: var(--charcoal-space-30);
+  bottom: calc(
+      env(safe-area-inset-bottom, 0px) +
+        max(var(--charcoal-snackbar-offset), 16px)
+    );
+}
+
+.charcoal-snackbar {
+  min-height: 44px;
+  padding: var(--charcoal-space-25) var(--charcoal-space-40);
+  background-color: var(--charcoal-color-container-default);
+  color: var(--charcoal-color-text-default);
+  border: var(--charcoal-border-width-m) solid
+    var(--charcoal-color-border-secondary);
+  animation: charcoal-snackbar-enter 0.3s ease-out both;
+}
+
+.charcoal-snackbar[data-exiting='true'] {
+  animation: charcoal-snackbar-exit 0.3s ease-out both;
+}
+
+.charcoal-snackbar[data-with-action='true'] {
+  min-height: 56px;
+  padding: var(--charcoal-space-25) var(--charcoal-space-30)
+      var(--charcoal-space-25) var(--charcoal-space-40);
+}
+
+.charcoal-snackbar[data-dim='true'] {
+  background-color: var(--charcoal-color-container-hud-default);
+  color: var(--charcoal-color-text-on-hud-default);
+  border-color: var(--charcoal-color-border-hud);
+}
+
+@keyframes charcoal-snackbar-enter {
+
+from {
+  opacity: 0;
+  transform: translateY(var(--charcoal-snackbar-enter-offset));
+}
+
+to {
+  opacity: 1;
+  transform: translateY(0);
+}
+}
+
+@keyframes charcoal-snackbar-exit {
+
+from {
+  opacity: 1;
+}
+
+to {
+  opacity: 0;
+}
+}
+

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

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

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

@@ -0,0 +1,213 @@
+import { useEffect, type ReactNode } from 'react'
+import { Meta, StoryObj } from '@storybook/react-vite'
+import Button from '../../Button'
+import unstable_Snackbar, {
+  useSnackbar as unstable_useSnackbar,
+  type SnackbarProps as unstable_SnackbarProps,
+} from '.'
+
+const defaultOpen = !!process.env.TEST
+
+type SnackbarStoryArgs = unstable_SnackbarProps & {
+  message: ReactNode
+  actionChildren?: string
+}
+
+export default {
+  title: 'react/unstable_Snackbar',
+  component: unstable_Snackbar,
+  parameters: {
+    layout: 'centered',
+    tokenVersion: 'v2',
+    controls: {
+      sort: 'requiredFirst',
+    },
+    docs: {
+      description: {
+        component: `同時に表示できるスナックバーは1つのみです。表示中に別のスナックバーが発生した場合は、\`order\` に応じてキューに積むか、表示中のスナックバーを置き換えます。
+
+別々の \`useSnackbar\` を呼び出した場合は互いに独立するため、同時表示数は1件に制限されません。`,
+      },
+    },
+  },
+  args: {
+    message: '保存しました',
+    order: 'queue',
+  },
+  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' },
+    },
+    dim: {
+      control: 'boolean',
+      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 },
+    },
+    message: {
+      control: 'text',
+      table: { category: 'Show' },
+    },
+    actionChildren: {
+      name: 'action',
+      control: 'text',
+      table: { category: 'Show' },
+    },
+  },
+  render: (args) => <SnackbarDemo {...args} />,
+} as Meta<SnackbarStoryArgs>
+
+function SnackbarDemo({
+  message,
+  actionChildren,
+  ...props
+}: SnackbarStoryArgs) {
+  const [snackbar, showSnackbar] = unstable_useSnackbar(props)
+  const hasAction = actionChildren !== undefined && actionChildren !== ''
+  const showOptions = {
+    ...(hasAction ? { action: <Button>{actionChildren}</Button> } : {}),
+  }
+
+  useEffect(() => {
+    if (!defaultOpen) {
+      return
+    }
+    showSnackbar(message, {
+      ...(hasAction ? { action: <Button>{actionChildren}</Button> } : {}),
+    })
+  }, [actionChildren, hasAction, message, showSnackbar])
+
+  return (
+    <>
+      {snackbar}
+      <Button
+        onClick={() => {
+          showSnackbar(message, showOptions)
+        }}
+      >
+        show
+      </Button>
+    </>
+  )
+}
+
+export const Default: StoryObj<SnackbarStoryArgs> = {
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `import { Button, unstable_useSnackbar } from '@charcoal-ui/react'
+
+export function Example() {
+  const [snackbar, showSnackbar] = unstable_useSnackbar()
+
+  return (
+    <>
+      {snackbar}
+      <Button onClick={() => showSnackbar('保存しました')}>
+        保存
+      </Button>
+    </>
+  )
+}`,
+      },
+    },
+  },
+}
+
+export const LongMessage: StoryObj<SnackbarStoryArgs> = {
+  args: {
+    message:
+      '保存した内容はすべての端末に同期され、あとから設定画面で変更できます。長いメッセージは2行を超えると省略されます',
+  },
+}
+
+export const WithLineBreak: StoryObj<SnackbarStoryArgs> = {
+  args: {
+    message: (
+      <>
+        保存に失敗しました
+        <br />
+        通信環境を確認してください
+      </>
+    ),
+  },
+}
+
+export const WithAction: StoryObj<SnackbarStoryArgs> = {
+  args: {
+    message: '保存しました',
+    actionChildren: '取り消す',
+  },
+  parameters: {
+    docs: {
+      source: {
+        language: 'tsx',
+        code: `import { Button, unstable_useSnackbar } from '@charcoal-ui/react'
+
+export function Example() {
+  const [snackbar, showSnackbar] = unstable_useSnackbar()
+
+  return (
+    <>
+      {snackbar}
+      <Button
+        onClick={() =>
+          showSnackbar('保存しました', {
+            action: <Button>取り消す</Button>,
+          })
+        }
+      >
+        保存
+      </Button>
+    </>
+  )
+}`,
+      },
+    },
+  },
+}
+
+export const Top: StoryObj<SnackbarStoryArgs> = {
+  args: {
+    position: 'top',
+    message: '上部に表示します',
+  },
+}
+
+export const Dim: StoryObj<SnackbarStoryArgs> = {
+  args: {
+    dim: true,
+    message: 'Dim の Snackbar',
+    actionChildren: '閉じる',
+  },
+}

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

@@ -0,0 +1,344 @@
+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 Snackbar, { useSnackbar, type SnackbarHandler } from '.'
+
+function renderSnackbar(props: ComponentProps<typeof Snackbar> = {}) {
+  const ref = createRef<SnackbarHandler>()
+  const result = render(<Snackbar ref={ref} {...props} />)
+  const show: SnackbarHandler['show'] = (message, options) => {
+    act(() => {
+      ref.current?.show(message, options)
+    })
+    act(() => {
+      vi.advanceTimersByTime(300)
+    })
+  }
+  return { ...result, show }
+}
+
+function finishExitAnimation(message: string) {
+  const snackbar = screen.getByText(message).closest('.charcoal-snackbar')
+  if (snackbar === null) throw new Error('Snackbar not found')
+  fireEvent(
+    snackbar,
+    Object.assign(new Event('animationend', { bubbles: true }), {
+      animationName: 'charcoal-snackbar-exit',
+    }),
+  )
+}
+
+describe('Snackbar', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('shows a message and hides after 5 seconds', () => {
+    const { show } = renderSnackbar()
+
+    expect(screen.queryByRole('region')).not.toBeInTheDocument()
+
+    show('保存しました')
+
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+    expect(
+      screen.getByText('保存しました').closest('.charcoal-snackbar'),
+    ).toHaveAttribute('data-exiting', 'true')
+
+    finishExitAnimation('保存しました')
+
+    expect(screen.queryByText('保存しました')).not.toBeInTheDocument()
+  })
+
+  it.each([0, -1])('clamps duration to zero: %s', (duration) => {
+    const { show } = renderSnackbar({ duration })
+
+    show('保存しました')
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+    expect(
+      screen.getByText('保存しました').closest('.charcoal-snackbar'),
+    ).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 } = renderSnackbar({ duration })
+
+    show('保存しました')
+    act(() => {
+      vi.advanceTimersByTime(4999)
+    })
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+    expect(
+      screen.getByText('保存しました').closest('.charcoal-snackbar'),
+    ).toHaveAttribute('data-exiting', 'true')
+  })
+
+  it('queues the next snackbar until the previous one closes', async () => {
+    const { show } = renderSnackbar()
+
+    show('first')
+    show('second')
+
+    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()
+  })
+
+  it('replaces the current snackbar immediately when requested', () => {
+    const onClose = vi.fn()
+    const { show } = renderSnackbar({ order: 'replace' })
+
+    show('first', { onClose })
+    show('second')
+
+    expect(screen.queryByText('first')).not.toBeInTheDocument()
+    expect(screen.getByText('second')).toBeInTheDocument()
+    expect(onClose).toHaveBeenCalledExactlyOnceWith('replaced')
+  })
+
+  it('reports timeout when the snackbar closes after its duration', () => {
+    const onClose = vi.fn()
+    const { show } = renderSnackbar({ duration: 0 })
+
+    show('保存しました', { onClose })
+    act(() => {
+      vi.advanceTimersByTime(1)
+    })
+
+    expect(onClose).toHaveBeenCalledExactlyOnceWith('timeout')
+  })
+
+  it('reports action when the action is clicked', () => {
+    const onClose = vi.fn()
+    const { show } = renderSnackbar()
+
+    show('保存しました', {
+      action: <button type="button">取り消す</button>,
+      onClose,
+    })
+    fireEvent.click(screen.getByRole('button', { name: '取り消す' }))
+
+    expect(onClose).toHaveBeenCalledExactlyOnceWith('action')
+  })
+
+  it('reports unmounted only for the currently displayed snackbar', () => {
+    const firstOnClose = vi.fn()
+    const secondOnClose = vi.fn()
+    const { show, unmount } = renderSnackbar()
+
+    show('first', { onClose: firstOnClose })
+    show('second', { onClose: secondOnClose })
+    unmount()
+
+    expect(firstOnClose).toHaveBeenCalledExactlyOnceWith('unmounted')
+    expect(secondOnClose).not.toHaveBeenCalled()
+  })
+
+  it('keeps the snackbar open while hovered after the timer ends, then closes on leave', () => {
+    const { show } = renderSnackbar()
+
+    show('保存しました')
+    const snackbar = screen
+      .getByText('保存しました')
+      .closest('.charcoal-snackbar')
+    if (snackbar === null) throw new Error('Snackbar not found')
+
+    fireEvent.pointerEnter(snackbar, { pointerType: 'mouse' })
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(snackbar).not.toHaveAttribute('data-exiting', 'true')
+
+    fireEvent.pointerLeave(snackbar)
+    expect(snackbar).toHaveAttribute('data-exiting', 'true')
+  })
+
+  it('keeps the snackbar open while focused', () => {
+    const { show } = renderSnackbar()
+
+    show('保存しました')
+    const snackbar = screen
+      .getByText('保存しました')
+      .closest('.charcoal-snackbar')
+    if (snackbar === null) throw new Error('Snackbar not found')
+
+    fireEvent.keyDown(document, { key: 'F6' })
+    expect(screen.getByRole('region')).toHaveFocus()
+
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(snackbar).not.toHaveAttribute('data-exiting', 'true')
+
+    fireEvent.blur(screen.getByRole('region'))
+    act(() => {
+      vi.advanceTimersByTime(5000)
+    })
+    expect(snackbar).toHaveAttribute('data-exiting', 'true')
+  })
+
+  it('places a snackbar with an action at the bottom', () => {
+    const { show } = renderSnackbar({ position: 'top' })
+
+    show('保存しました', {
+      action: <button type="button">取り消す</button>,
+    })
+
+    expect(screen.getByRole('region')).toHaveAttribute(
+      'data-position',
+      'bottom',
+    )
+  })
+
+  it('places a snackbar without an action at the top when requested', () => {
+    const { show } = renderSnackbar({ position: 'top' })
+
+    show('保存しました')
+
+    expect(screen.getByRole('region')).toHaveAttribute('data-position', 'top')
+  })
+
+  it('supports a custom z-index and portal container', () => {
+    const portalContainer = document.createElement('div')
+    document.body.append(portalContainer)
+    const { show } = renderSnackbar({ zIndex: 30, portalContainer })
+
+    show('保存しました')
+
+    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 } = renderSnackbar()
+
+    show('保存しました', {
+      action: <button type="button">取り消す</button>,
+    })
+
+    fireEvent.keyDown(document, { key: 'F6' })
+
+    expect(screen.getByRole('region')).toHaveFocus()
+  })
+
+  it('restores focus after a focused snackbar closes', () => {
+    const { show } = renderSnackbar()
+    const trigger = document.createElement('button')
+    document.body.append(trigger)
+    trigger.focus()
+
+    show('保存しました', {
+      action: <button type="button">閉じる</button>,
+    })
+
+    fireEvent.keyDown(document, { key: 'F6' })
+    expect(screen.getByRole('region')).toHaveFocus()
+
+    fireEvent.click(screen.getByRole('button', { name: '閉じる' }))
+    finishExitAnimation('保存しました')
+
+    expect(trigger).toHaveFocus()
+    trigger.remove()
+  })
+
+  it('closes on action click even while hovered', () => {
+    const { show } = renderSnackbar()
+    const trigger = document.createElement('button')
+    document.body.append(trigger)
+    trigger.focus()
+
+    show('保存しました', {
+      action: <button type="button">閉じる</button>,
+    })
+
+    const snackbar = screen
+      .getByText('保存しました')
+      .closest('.charcoal-snackbar')
+    if (snackbar === null) throw new Error('Snackbar not found')
+
+    fireEvent.pointerEnter(snackbar, { pointerType: 'mouse' })
+    fireEvent.click(screen.getByRole('button', { name: '閉じる' }))
+
+    expect(snackbar).toHaveAttribute('data-exiting', 'true')
+
+    finishExitAnimation('保存しました')
+    expect(screen.queryByText('保存しました')).not.toBeInTheDocument()
+    expect(trigger).toHaveFocus()
+    trigger.remove()
+  })
+})
+
+describe('useSnackbar', () => {
+  beforeEach(() => {
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    cleanup()
+    vi.useRealTimers()
+  })
+
+  it('shows a snackbar via the returned void function', () => {
+    let showResult: void | undefined
+
+    function HookApp() {
+      const [snackbar, show] = useSnackbar()
+      return (
+        <>
+          {snackbar}
+          <button
+            type="button"
+            onClick={() => {
+              showResult = show('hook message')
+            }}
+          >
+            open
+          </button>
+        </>
+      )
+    }
+
+    render(<HookApp />)
+    fireEvent.click(screen.getByText('open'))
+    expect(screen.getByText('hook message')).toBeInTheDocument()
+    expect(showResult).toBeUndefined()
+  })
+})