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

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,6 +1,6 @@
 import { useEffect, type ReactNode } from 'react'
 import { Meta, StoryObj } from '@storybook/react-vite'
-import Button from '../Button'
+import Button from '../../Button'
 import unstable_Snackbar, {
   useSnackbar as unstable_useSnackbar,
   type SnackbarProps as unstable_SnackbarProps,
@@ -10,8 +10,7 @@ const defaultOpen = !!process.env.TEST
 
 type SnackbarStoryArgs = unstable_SnackbarProps & {
   message: ReactNode
-  buttonChildren?: string
-  duration?: number
+  actionChildren?: string
 }
 
 export default {
@@ -20,9 +19,12 @@ export default {
   parameters: {
     layout: 'centered',
     tokenVersion: 'v2',
+    controls: {
+      sort: 'requiredFirst',
+    },
     docs: {
       description: {
-        component: `同時に表示できるスナックバーは1つのみです。表示中に別のスナックバーが発生した場合はキューに積み、前のスナックバーが消えてから表示します。
+        component: `同時に表示できるスナックバーは1つのみです。表示中に別のスナックバーが発生した場合は、\`order\` に応じてキューに積むか、表示中のスナックバーを置き換えます。
 
 別々の \`useSnackbar\` を呼び出した場合は互いに独立するため、同時表示数は1件に制限されません。`,
       },
@@ -30,23 +32,55 @@ export default {
   },
   args: {
     message: '保存しました',
-    duration: 5000,
+    order: 'queue',
   },
   argTypes: {
     position: {
       options: ['top', 'bottom'],
       control: { type: 'inline-radio' },
+      table: { category: 'Hook' },
     },
-    message: {
-      control: 'text',
+    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' },
     },
-    buttonChildren: {
-      name: 'button.children',
+    actionChildren: {
+      name: 'action',
       control: 'text',
+      table: { category: 'Show' },
     },
   },
   render: (args) => <SnackbarDemo {...args} />,
@@ -54,15 +88,13 @@ export default {
 
 function SnackbarDemo({
   message,
-  buttonChildren,
-  duration,
+  actionChildren,
   ...props
 }: SnackbarStoryArgs) {
   const [snackbar, showSnackbar] = unstable_useSnackbar(props)
-  const hasButton = buttonChildren !== undefined && buttonChildren !== ''
+  const hasAction = actionChildren !== undefined && actionChildren !== ''
   const showOptions = {
-    duration,
-    ...(hasButton ? { button: { children: buttonChildren } } : {}),
+    ...(hasAction ? { action: <Button>{actionChildren}</Button> } : {}),
   }
 
   useEffect(() => {
@@ -70,10 +102,9 @@ function SnackbarDemo({
       return
     }
     showSnackbar(message, {
-      duration: 60_000,
-      ...(hasButton ? { button: { children: buttonChildren } } : {}),
+      ...(hasAction ? { action: <Button>{actionChildren}</Button> } : {}),
     })
-  }, [buttonChildren, hasButton, message, showSnackbar])
+  }, [actionChildren, hasAction, message, showSnackbar])
 
   return (
     <>
@@ -132,10 +163,10 @@ export const WithLineBreak: StoryObj<SnackbarStoryArgs> = {
   },
 }
 
-export const WithButton: StoryObj<SnackbarStoryArgs> = {
+export const WithAction: StoryObj<SnackbarStoryArgs> = {
   args: {
     message: '保存しました',
-    buttonChildren: '取り消す',
+    actionChildren: '取り消す',
   },
   parameters: {
     docs: {
@@ -152,9 +183,7 @@ export function Example() {
       <Button
         onClick={() =>
           showSnackbar('保存しました', {
-            button: {
-              children: '取り消す',
-            },
+            action: <Button>取り消す</Button>,
           })
         }
       >
@@ -179,6 +208,6 @@ export const Dim: StoryObj<SnackbarStoryArgs> = {
   args: {
     dim: true,
     message: 'Dim の Snackbar',
-    buttonChildren: '閉じる',
+    actionChildren: '閉じる',
   },
 }

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

@@ -62,9 +62,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 +84,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 +120,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 +213,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 +226,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 +251,7 @@ describe('Snackbar', () => {
     const { show } = renderSnackbar()
 
     show('保存しました', {
-      button: { children: '取り消す' },
+      action: <button type="button">取り消す</button>,
     })
 
     fireEvent.keyDown(document, { key: 'F6' })
@@ -216,7 +266,7 @@ describe('Snackbar', () => {
     trigger.focus()
 
     show('保存しました', {
-      button: { children: '閉じる' },
+      action: <button type="button">閉じる</button>,
     })
 
     fireEvent.keyDown(document, { key: 'F6' })
@@ -229,14 +279,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,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;
+  }
+}