@charcoal-ui/react 6.1.0-beta.4 → 6.1.0-beta.6

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

@@ -8,8 +8,7 @@ import { NotificationRegion } from '../NotificationRegion'
 import { useNotificationQueue } from '../useNotificationQueue'
 import type { NotificationProps, Position } from '../types'
 
-export type SnackbarCloseReason =
-  'timeout' | 'replaced' | 'action' | 'close' | 'unmounted'
+export type SnackbarCloseReason = 'action' | 'unmounted'
 
 export type SnackbarRootAttributes = {
   [key: `data-${string}`]: string | number | boolean | undefined
@@ -18,6 +17,7 @@ export type SnackbarRootAttributes = {
 export type ShowSnackbarOptions = {
   action?: ReactNode
   onClose?: (reason: SnackbarCloseReason) => void
+  /** スナックバー自体にdata属性を渡せる */
   rootAttributes?: SnackbarRootAttributes
 }
 
@@ -62,22 +62,23 @@ export function useSnackbar(props: UseSnackbarProps = {}) {
     ...regionProps
   } = props
   const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =
-    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {
+    useNotificationQueue<SnackbarContent, 'action'>('snackbar', {
       duration,
       order,
       animateReplace: true,
-      timeoutReason: 'timeout',
-      unmountedReason: 'unmounted',
     })
 
   function show(message: ReactNode, options: ShowSnackbarOptions = {}) {
+    const onClose = options.onClose
     enqueue(
       {
         message,
         action: options.action,
         rootAttributes: options.rootAttributes,
       },
-      options.onClose,
+      onClose === undefined
+        ? undefined
+        : (reason) => onClose(reason ?? 'unmounted'),
     )
   }
 

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

@@ -3,6 +3,7 @@
 }
 
 .charcoal-toast-region[data-position='top'] {
+  position: sticky;
   --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
   top: calc(
       env(safe-area-inset-top, 0px) + max(var(--charcoal-toast-offset), 16px)
@@ -10,6 +11,7 @@
 }
 
 .charcoal-toast-region[data-position='bottom'] {
+  position: fixed;
   --charcoal-toast-enter-offset: var(--charcoal-space-30);
   bottom: calc(
       env(safe-area-inset-bottom, 0px) + max(var(--charcoal-toast-offset), 16px)

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

@@ -2,6 +2,7 @@
   --charcoal-toast-offset: 16px;
 
   &[data-position='top'] {
+    position: sticky;
     --charcoal-toast-enter-offset: calc(-1 * var(--charcoal-space-30));
 
     top: calc(
@@ -10,6 +11,7 @@
   }
 
   &[data-position='bottom'] {
+    position: fixed;
     --charcoal-toast-enter-offset: var(--charcoal-space-30);
 
     bottom: calc(

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

@@ -50,6 +50,10 @@ export default {
       control: { type: 'number', min: 0, step: 1 },
       table: { category: 'Hook', defaultValue: { summary: '16' } },
     },
+    headerOffset: {
+      control: { type: 'number', min: 0, step: 1 },
+      table: { category: 'Hook', defaultValue: { summary: '0' } },
+    },
     duration: {
       control: { type: 'number', min: 0, step: 500 },
       description: '表示時間（ミリ秒）',

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

@@ -177,7 +177,10 @@ describe('Toast', () => {
 
     show('保存しました', { type: 'success' })
 
-    expect(screen.getByRole('region')).toHaveAttribute('data-position', 'top')
+    expect(document.querySelector('.charcoal-toast-region')).toHaveAttribute(
+      'data-position',
+      'top',
+    )
   })
 
   it('places a toast at the bottom when requested', () => {
@@ -185,7 +188,7 @@ describe('Toast', () => {
 
     show('保存しました', { type: 'success' })
 
-    expect(screen.getByRole('region')).toHaveAttribute(
+    expect(document.querySelector('.charcoal-toast-region')).toHaveAttribute(
       'data-position',
       'bottom',
     )

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

@@ -1,11 +1,15 @@
 .charcoal-notification-region {
-  position: fixed;
   left: 0;
   right: 0;
-  display: grid;
-  justify-content: center;
-  pointer-events: none;
   box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+  top: 0;
 }
 
 .charcoal-notification {

package/src/components/Notification/layout.css

@@ -1,11 +1,15 @@
 .charcoal-notification-region {
-  position: fixed;
   left: 0;
   right: 0;
-  display: grid;
-  justify-content: center;
-  pointer-events: none;
   box-sizing: border-box;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  pointer-events: none;
+  top: 0;
 }
 
 .charcoal-notification {

package/src/components/Notification/useNotificationQueue.ts

@@ -7,7 +7,7 @@ const ANIMATION_DURATION_MS = 300
 
 type QueueItem<TContent, TCloseReason> = {
   content: TContent
-  onClose?: (reason: TCloseReason) => void
+  onClose?: (reason?: TCloseReason) => void
 }
 
 export function useNotificationQueue<
@@ -19,14 +19,10 @@ export function useNotificationQueue<
     duration: durationOption,
     order = 'queue',
     animateReplace = false,
-    timeoutReason,
-    unmountedReason,
   }: {
     duration?: number
     order?: NotificationOrder
     animateReplace?: boolean
-    timeoutReason?: TCloseReason
-    unmountedReason?: TCloseReason
   } = {},
 ) {
   const itemRef = useRef<HTMLDivElement>(null)
@@ -36,7 +32,7 @@ export function useNotificationQueue<
   const isShowingRef = useRef(false)
   const activeRef = useRef<{
     key: string
-    onClose?: (reason: TCloseReason) => void
+    onClose?: (reason?: TCloseReason) => void
     reason?: TCloseReason
     notified: boolean
   }>()
@@ -65,10 +61,7 @@ export function useNotificationQueue<
         update()
         if (active !== undefined && !active.notified) {
           active.notified = true
-          const reason = active.reason ?? timeoutReason
-          if (reason !== undefined) {
-            active.onClose?.(reason)
-          }
+          active.onClose?.(active.reason)
         }
         playNextRef.current?.()
       }
@@ -116,7 +109,7 @@ export function useNotificationQueue<
         complete()
       }
     },
-    [name, timeoutReason],
+    [name],
   )
 
   const state = useToastState<TContent>({
@@ -129,16 +122,13 @@ export function useNotificationQueue<
       const active = activeRef.current
       if (active !== undefined && !active.notified) {
         active.notified = true
-        const reason = active.reason ?? unmountedReason
-        if (reason !== undefined) {
-          active.onClose?.(reason)
-        }
+        active.onClose?.(active.reason)
       }
       activeRef.current = undefined
       queueRef.current = []
       isShowingRef.current = false
     }
-  }, [unmountedReason])
+  }, [])
 
   function playNext() {
     const next = queueRef.current.shift()
@@ -163,7 +153,7 @@ export function useNotificationQueue<
 
   function enqueue(
     content: TContent,
-    onClose?: (reason: TCloseReason) => void,
+    onClose?: (reason?: TCloseReason) => void,
   ) {
     const duration =
       typeof durationOption === 'number' && Number.isFinite(durationOption)
@@ -181,7 +171,6 @@ export function useNotificationQueue<
       const active = activeRef.current
       if (active === undefined) return
 
-      active.reason = 'replaced' as TCloseReason
       replaceRef.current = !animateReplace
       hoverRef.current.active = false
       const pending = hoverRef.current.pending