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

package/src/components/{Snackbar → Notification/Snackbar}/__snapshots__/index.css.snap

@@ -1,12 +1,5 @@
 .charcoal-snackbar-region {
   --charcoal-snackbar-offset: 16px;
-  position: fixed;
-  left: 0;
-  right: 0;
-  display: grid;
-  justify-content: center;
-  pointer-events: none;
-  box-sizing: border-box;
 }
 
 .charcoal-snackbar-region[data-position='top'] {
@@ -25,17 +18,8 @@
 }
 
 .charcoal-snackbar {
-  box-sizing: border-box;
-  border-radius: var(--charcoal-radius-oval);
-  width: fit-content;
-  max-width: calc(100vw - var(--charcoal-space-46));
   min-height: 44px;
   padding: var(--charcoal-space-25) var(--charcoal-space-40);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--charcoal-space-20);
-  pointer-events: auto;
   background-color: var(--charcoal-color-container-default);
   color: var(--charcoal-color-text-default);
   border: var(--charcoal-border-width-m) solid
@@ -47,7 +31,7 @@
   animation: charcoal-snackbar-exit 0.3s ease-out both;
 }
 
-.charcoal-snackbar[data-with-button='true'] {
+.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);
@@ -59,24 +43,6 @@
   border-color: var(--charcoal-color-border-hud);
 }
 
-.charcoal-snackbar-content {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-}
-
-.charcoal-snackbar-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);
-}
-
 @keyframes charcoal-snackbar-enter {
 
 from {
@@ -101,10 +67,3 @@ to {
 }
 }
 
-@media (prefers-reduced-motion: reduce) {
-
-.charcoal-snackbar, .charcoal-snackbar[data-exiting='true'] {
-  animation: none;
-}
-}
-

package/src/components/{Snackbar → Notification/Snackbar}/index.css

@@ -1,14 +1,6 @@
 .charcoal-snackbar-region {
   --charcoal-snackbar-offset: 16px;
 
-  position: fixed;
-  left: 0;
-  right: 0;
-  display: grid;
-  justify-content: center;
-  pointer-events: none;
-  box-sizing: border-box;
-
   &[data-position='top'] {
     --charcoal-snackbar-enter-offset: calc(-1 * var(--charcoal-space-30));
 
@@ -28,17 +20,8 @@
 }
 
 .charcoal-snackbar {
-  box-sizing: border-box;
-  border-radius: var(--charcoal-radius-oval);
-  width: fit-content;
-  max-width: calc(100vw - var(--charcoal-space-46));
   min-height: 44px;
   padding: var(--charcoal-space-25) var(--charcoal-space-40);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--charcoal-space-20);
-  pointer-events: auto;
   background-color: var(--charcoal-color-container-default);
   color: var(--charcoal-color-text-default);
   border: var(--charcoal-border-width-m) solid
@@ -49,7 +32,7 @@
     animation: charcoal-snackbar-exit 0.3s ease-out both;
   }
 
-  &[data-with-button='true'] {
+  &[data-with-action='true'] {
     min-height: 56px;
     padding: var(--charcoal-space-25) var(--charcoal-space-30)
       var(--charcoal-space-25) var(--charcoal-space-40);
@@ -62,24 +45,6 @@
   }
 }
 
-.charcoal-snackbar-content {
-  display: flex;
-  align-items: center;
-  min-width: 0;
-}
-
-.charcoal-snackbar-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);
-}
-
 @keyframes charcoal-snackbar-enter {
   from {
     opacity: 0;
@@ -101,10 +66,3 @@
     opacity: 0;
   }
 }
-
-@media (prefers-reduced-motion: reduce) {
-  .charcoal-snackbar,
-  .charcoal-snackbar[data-exiting='true'] {
-    animation: none;
-  }
-}

package/src/components/{Snackbar → Notification/Snackbar}/index.story.tsx

@@ -1,52 +1,92 @@
 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 '.'
+import Button from '../../Button'
+import { useSnackbar as unstable_useSnackbar } from '.'
 
 const defaultOpen = !!process.env.TEST
 
-type SnackbarStoryArgs = unstable_SnackbarProps & {
+type SnackbarStoryArgs = NonNullable<
+  Parameters<typeof unstable_useSnackbar>[0]
+> & {
   message: ReactNode
-  buttonChildren?: string
-  duration?: number
+  actionChildren?: string
 }
 
 export default {
-  title: 'react/unstable_Snackbar',
-  component: unstable_Snackbar,
+  title: 'react/Snackbar',
+  component: SnackbarDemo,
   parameters: {
     layout: 'centered',
     tokenVersion: 'v2',
+    controls: {
+      sort: 'requiredFirst',
+    },
     docs: {
       description: {
-        component: `同時に表示できるスナックバーは1つのみです。表示中に別のスナックバーが発生した場合はキューに積み、前のスナックバーが消えてから表示します。
+        component: `\`unstable_useSnackbar\` を使用すると、表示時間やキューを含む表示制御を利用できます。同時に表示できるスナックバーは1つのみです。表示中に別のスナックバーが発生した場合は、\`order\` に応じてキューに積むか、表示中のスナックバーを置き換えます。
+
+別々の \`unstable_useSnackbar\` を呼び出した場合は互いに独立するため、同時表示数は1件に制限されません。
 
-別々の \`useSnackbar\` を呼び出した場合は互いに独立するため、同時表示数は1件に制限されません。`,
+\`UnstableSnackbar\` は表示専用のコンポーネントです。表示状態や表示時間を制御する機構を持たず、アクションの指定を必須とします。表示の切り替えは利用側で制御してください。`,
       },
     },
   },
   args: {
     message: '保存しました',
+    position: 'bottom',
+    offset: 16,
     duration: 5000,
+    order: 'queue',
+    dim: false,
+    zIndex: 20,
   },
   argTypes: {
     position: {
       options: ['top', 'bottom'],
       control: { type: 'inline-radio' },
+      table: { category: 'Hook', defaultValue: { summary: "'bottom'" } },
     },
-    message: {
-      control: 'text',
+    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'" } },
+    },
+    dim: {
+      control: 'boolean',
+      table: { category: 'Hook', defaultValue: { summary: 'false' } },
+    },
+    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 },
+    },
+    message: {
+      control: 'text',
+      table: { category: 'Show' },
     },
-    buttonChildren: {
-      name: 'button.children',
+    actionChildren: {
+      name: 'action',
       control: 'text',
+      table: { category: 'Show' },
     },
   },
   render: (args) => <SnackbarDemo {...args} />,
@@ -54,26 +94,24 @@ export default {
 
 function SnackbarDemo({
   message,
-  buttonChildren,
-  duration,
+  actionChildren,
   ...props
 }: SnackbarStoryArgs) {
   const [snackbar, showSnackbar] = unstable_useSnackbar(props)
-  const hasButton = buttonChildren !== undefined && buttonChildren !== ''
-  const showOptions = {
-    duration,
-    ...(hasButton ? { button: { children: buttonChildren } } : {}),
-  }
+  const hasAction = actionChildren !== undefined && actionChildren !== ''
+  const showOptions = hasAction
+    ? { action: <Button>{actionChildren}</Button> }
+    : undefined
 
   useEffect(() => {
     if (!defaultOpen) {
       return
     }
-    showSnackbar(message, {
-      duration: 60_000,
-      ...(hasButton ? { button: { children: buttonChildren } } : {}),
-    })
-  }, [buttonChildren, hasButton, message, showSnackbar])
+    showSnackbar(
+      message,
+      hasAction ? { action: <Button>{actionChildren}</Button> } : undefined,
+    )
+  }, [actionChildren, hasAction, message, showSnackbar])
 
   return (
     <>
@@ -132,10 +170,10 @@ export const WithLineBreak: StoryObj<SnackbarStoryArgs> = {
   },
 }
 
-export const WithButton: StoryObj<SnackbarStoryArgs> = {
+export const WithAction: StoryObj<SnackbarStoryArgs> = {
   args: {
     message: '保存しました',
-    buttonChildren: '取り消す',
+    actionChildren: '取り消す',
   },
   parameters: {
     docs: {
@@ -152,9 +190,7 @@ export function Example() {
       <Button
         onClick={() =>
           showSnackbar('保存しました', {
-            button: {
-              children: '取り消す',
-            },
+            action: <Button>取り消す</Button>,
           })
         }
       >
@@ -179,6 +215,6 @@ export const Dim: StoryObj<SnackbarStoryArgs> = {
   args: {
     dim: true,
     message: 'Dim の Snackbar',
-    buttonChildren: '閉じる',
+    actionChildren: '閉じる',
   },
 }

package/src/components/{Snackbar → Notification/Snackbar}/index.test.tsx

@@ -1,14 +1,26 @@
-import { createRef, type ComponentProps } from 'react'
+import { useEffect, type ReactNode } 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 '.'
+import Snackbar, { useSnackbar, type ShowSnackbarOptions } from '.'
+
+function renderSnackbar(props: Parameters<typeof useSnackbar>[0] = {}) {
+  let showSnackbar:
+    ((message: ReactNode, options?: ShowSnackbarOptions) => void) | undefined
+
+  function SnackbarApp() {
+    const [snackbar, show] = useSnackbar(props)
+    useEffect(() => {
+      showSnackbar = show
+    }, [show])
+    return snackbar
+  }
 
-function renderSnackbar(props: ComponentProps<typeof Snackbar> = {}) {
-  const ref = createRef<SnackbarHandler>()
-  const result = render(<Snackbar ref={ref} {...props} />)
-  const show: SnackbarHandler['show'] = (message, options) => {
+  const result = render(<SnackbarApp />)
+  function show(message: ReactNode, options?: ShowSnackbarOptions) {
+    if (showSnackbar === undefined) throw new Error('showSnackbar not found')
+    const currentShowSnackbar = showSnackbar
     act(() => {
-      ref.current?.show(message, options)
+      currentShowSnackbar(message, options)
     })
     act(() => {
       vi.advanceTimersByTime(300)
@@ -38,6 +50,25 @@ describe('Snackbar', () => {
     vi.useRealTimers()
   })
 
+  it('renders the message and required action', () => {
+    render(
+      <Snackbar
+        message="保存しました"
+        action={<button type="button">取り消す</button>}
+      />,
+    )
+
+    expect(screen.getByText('保存しました')).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: '取り消す' })).toBeInTheDocument()
+  })
+
+  it('requires a non-null action at the type level', () => {
+    // @ts-expect-error action must not be undefined
+    const undefinedAction = <Snackbar message="x" action={undefined} />
+
+    expect(undefinedAction).toBeDefined()
+  })
+
   it('shows a message and hides after 5 seconds', () => {
     const { show } = renderSnackbar()
 
@@ -62,9 +93,9 @@ describe('Snackbar', () => {
   })
 
   it.each([0, -1])('clamps duration to zero: %s', (duration) => {
-    const { show } = renderSnackbar()
+    const { show } = renderSnackbar({ duration })
 
-    show('保存しました', { duration })
+    show('保存しました')
     expect(screen.getByText('保存しました')).toBeInTheDocument()
 
     act(() => {
@@ -84,9 +115,9 @@ describe('Snackbar', () => {
     Number.NEGATIVE_INFINITY,
     'invalid' as unknown as number,
   ])('falls back to the default duration: %s', (duration) => {
-    const { show } = renderSnackbar()
+    const { show } = renderSnackbar({ duration })
 
-    show('保存しました', { duration })
+    show('保存しました')
     act(() => {
       vi.advanceTimersByTime(4999)
     })
@@ -120,6 +151,56 @@ describe('Snackbar', () => {
     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()
 
@@ -163,11 +244,11 @@ describe('Snackbar', () => {
     expect(snackbar).toHaveAttribute('data-exiting', 'true')
   })
 
-  it('places a snackbar with a button at the bottom', () => {
+  it('places a snackbar with an action at the bottom', () => {
     const { show } = renderSnackbar({ position: 'top' })
 
     show('保存しました', {
-      button: { children: '取り消す' },
+      action: <button type="button">取り消す</button>,
     })
 
     expect(screen.getByRole('region')).toHaveAttribute(
@@ -176,7 +257,7 @@ describe('Snackbar', () => {
     )
   })
 
-  it('places a snackbar without a button at the top when requested', () => {
+  it('places a snackbar without an action at the top when requested', () => {
     const { show } = renderSnackbar({ position: 'top' })
 
     show('保存しました')
@@ -201,7 +282,7 @@ describe('Snackbar', () => {
     const { show } = renderSnackbar()
 
     show('保存しました', {
-      button: { children: '取り消す' },
+      action: <button type="button">取り消す</button>,
     })
 
     fireEvent.keyDown(document, { key: 'F6' })
@@ -216,7 +297,7 @@ describe('Snackbar', () => {
     trigger.focus()
 
     show('保存しました', {
-      button: { children: '閉じる' },
+      action: <button type="button">閉じる</button>,
     })
 
     fireEvent.keyDown(document, { key: 'F6' })
@@ -229,14 +310,14 @@ describe('Snackbar', () => {
     trigger.remove()
   })
 
-  it('closes on button click even while hovered', () => {
+  it('closes on action click even while hovered', () => {
     const { show } = renderSnackbar()
     const trigger = document.createElement('button')
     document.body.append(trigger)
     trigger.focus()
 
     show('保存しました', {
-      button: { children: '閉じる' },
+      action: <button type="button">閉じる</button>,
     })
 
     const snackbar = screen

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

@@ -0,0 +1,136 @@
+import '../layout.css'
+import './index.css'
+
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { useClassNames } from '../../../_lib/useClassNames'
+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 = {
+  action?: ReactNode
+  onClose?: (reason: SnackbarCloseReason) => void
+}
+
+type SnackbarBaseProps = {
+  message: ReactNode
+  action?: ReactNode
+  dim?: boolean
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>
+
+export type SnackbarProps = Omit<SnackbarBaseProps, 'action'> & {
+  /** Snackbar の右側に表示するアクション */
+  action: NonNullable<ReactNode>
+}
+
+export type UseSnackbarProps = Omit<NotificationProps, 'position'> & {
+  position?: Position
+  dim?: boolean
+}
+
+type SnackbarContent = {
+  message: ReactNode
+  action?: ReactNode
+}
+
+const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
+  function Snackbar(props, ref) {
+    return <SnackbarBase {...props} ref={ref} />
+  },
+)
+
+export default Snackbar
+
+export function useSnackbar(props: UseSnackbarProps = {}) {
+  'use memo'
+
+  const {
+    position = 'bottom',
+    dim = false,
+    duration,
+    order,
+    ...regionProps
+  } = props
+  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)
+  }
+
+  const hasAction = state.visibleToasts.some(
+    (toast) => toast.content.action !== undefined,
+  )
+  const effectivePosition = hasAction ? 'bottom' : position
+  const element = (
+    <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 && (
+            <div onClick={() => close(toast.key, 'action')}>
+              <SnackbarAction action={toast.content.action} />
+            </div>
+          )}
+        </NotificationItem>
+      ))}
+    </NotificationRegion>
+  )
+
+  return [element, show] as const
+}
+
+const SnackbarBase = forwardRef<HTMLDivElement, SnackbarBaseProps>(
+  function SnackbarBase(
+    { message, action, dim = false, className, ...rootProps },
+    ref,
+  ) {
+    const classNames = useClassNames(
+      'charcoal-notification',
+      'charcoal-snackbar',
+      className,
+    )
+
+    return (
+      <div
+        {...rootProps}
+        ref={ref}
+        className={classNames}
+        data-dim={dim}
+        data-with-action={action !== undefined}
+      >
+        <div role="status" className="charcoal-notification-content">
+          <div className="charcoal-notification-label">{message}</div>
+        </div>
+        {action !== undefined && <SnackbarAction action={action} />}
+      </div>
+    )
+  },
+)
+
+function SnackbarAction({ action }: { action: ReactNode }) {
+  return <div>{action}</div>
+}