@charcoal-ui/react 6.1.0-beta.3 → 6.1.0-beta.5

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

@@ -8,12 +8,16 @@ 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
+}
 
 export type ShowSnackbarOptions = {
   action?: ReactNode
   onClose?: (reason: SnackbarCloseReason) => void
+  rootAttributes?: SnackbarRootAttributes
 }
 
 type SnackbarBaseProps = {
@@ -35,6 +39,7 @@ export type UseSnackbarProps = Omit<NotificationProps, 'position'> & {
 type SnackbarContent = {
   message: ReactNode
   action?: ReactNode
+  rootAttributes?: SnackbarRootAttributes
 }
 
 const Snackbar = forwardRef<HTMLDivElement, SnackbarProps>(
@@ -56,15 +61,24 @@ export function useSnackbar(props: UseSnackbarProps = {}) {
     ...regionProps
   } = props
   const { state, itemRef, enqueue, close, onHoverStart, onHoverEnd } =
-    useNotificationQueue<SnackbarContent, SnackbarCloseReason>('snackbar', {
+    useNotificationQueue<SnackbarContent, 'action'>('snackbar', {
       duration,
       order,
-      timeoutReason: 'timeout',
-      unmountedReason: 'unmounted',
+      animateReplace: true,
     })
 
   function show(message: ReactNode, options: ShowSnackbarOptions = {}) {
-    enqueue({ message, action: options.action }, options.onClose)
+    const onClose = options.onClose
+    enqueue(
+      {
+        message,
+        action: options.action,
+        rootAttributes: options.rootAttributes,
+      },
+      onClose === undefined
+        ? undefined
+        : (reason) => onClose(reason ?? 'unmounted'),
+    )
   }
 
   const hasAction = state.visibleToasts.some(
@@ -80,6 +94,7 @@ export function useSnackbar(props: UseSnackbarProps = {}) {
     >
       {state.visibleToasts.map((toast) => (
         <NotificationItem
+          {...toast.content.rootAttributes}
           key={toast.key}
           name="snackbar"
           toast={toast}

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<
@@ -18,13 +18,11 @@ export function useNotificationQueue<
   {
     duration: durationOption,
     order = 'queue',
-    timeoutReason,
-    unmountedReason,
+    animateReplace = false,
   }: {
     duration?: number
     order?: NotificationOrder
-    timeoutReason?: TCloseReason
-    unmountedReason?: TCloseReason
+    animateReplace?: boolean
   } = {},
 ) {
   const itemRef = useRef<HTMLDivElement>(null)
@@ -34,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
   }>()
@@ -57,24 +55,17 @@ export function useNotificationQueue<
         return
       }
 
-      function notifyActive() {
-        const active = activeRef.current
-        if (active === undefined || active.notified) return
-        active.notified = true
-        const reason = active.reason ?? timeoutReason
-        if (reason !== undefined) {
-          active.onClose?.(reason)
-        }
-      }
-
       function finish() {
+        const active = activeRef.current
         activeRef.current = undefined
         update()
+        if (active !== undefined && !active.notified) {
+          active.notified = true
+          active.onClose?.(active.reason)
+        }
         playNextRef.current?.()
       }
 
-      notifyActive()
-
       if (hoverRef.current.active) {
         hoverRef.current.pending = () => wrapUpdate(update, 'remove')
         return
@@ -90,6 +81,7 @@ export function useNotificationQueue<
         finish()
         return
       }
+
       const item: HTMLDivElement = itemRef.current
 
       // allow-discreteが Newly Available で使えないので、要素の削除をアニメーション完了まで待つ
@@ -117,7 +109,7 @@ export function useNotificationQueue<
         complete()
       }
     },
-    [name, timeoutReason],
+    [name],
   )
 
   const state = useToastState<TContent>({
@@ -129,15 +121,14 @@ export function useNotificationQueue<
     return () => {
       const active = activeRef.current
       if (active !== undefined && !active.notified) {
-        if (unmountedReason !== undefined) {
-          active.onClose?.(unmountedReason)
-        }
+        active.notified = true
+        active.onClose?.(active.reason)
       }
       activeRef.current = undefined
       queueRef.current = []
       isShowingRef.current = false
     }
-  }, [unmountedReason])
+  }, [])
 
   function playNext() {
     const next = queueRef.current.shift()
@@ -162,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)
@@ -180,8 +171,7 @@ export function useNotificationQueue<
       const active = activeRef.current
       if (active === undefined) return
 
-      active.reason = 'replaced' as TCloseReason
-      replaceRef.current = true
+      replaceRef.current = !animateReplace
       hoverRef.current.active = false
       const pending = hoverRef.current.pending
       hoverRef.current.pending = undefined

package/src/components/Pagination/__snapshots__/index.css.snap

@@ -39,7 +39,6 @@
    * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
    * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
    */
-  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-transform: translateZ(0);
   color: var(--charcoal-color-text-tertiary-default);
   background-color: transparent;

package/src/components/Pagination/index.css

@@ -39,7 +39,6 @@
    * Safari doesn't correctly repaint the elements when they're reordered in response to interaction.
    * This forces it to repaint them. This doesn't work if put on the parents either, has to be here.
    */
-  /* stylelint-disable-next-line property-no-vendor-prefix */
   -webkit-transform: translateZ(0);
 
   color: var(--charcoal-color-text-tertiary-default);

package/src/index.ts

@@ -112,6 +112,7 @@ export {
   type SnackbarProps as UnstableSnackbarProps,
   type UseSnackbarProps as unstable_UseSnackbarProps,
   type SnackbarCloseReason as unstable_SnackbarCloseReason,
+  type SnackbarRootAttributes as unstable_SnackbarRootAttributes,
   type ShowSnackbarOptions as unstable_ShowSnackbarOptions,
 } from './components/Notification/Snackbar'
 export {