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

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

@@ -0,0 +1,86 @@
+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 ToastType = 'success' | 'error'
+
+export type ShowToastOptions = {
+  type: ToastType
+}
+
+export type ToastHandler = {
+  show: (message: ReactNode, options: ShowToastOptions) => void
+}
+
+export type ToastProps = Omit<NotificationProps, 'position'> & {
+  /**
+   * Toast の表示位置
+   * @default 'top'
+   */
+  position?: Position
+}
+
+type ToastContent = {
+  message: ReactNode
+  type: ToastType
+}
+
+const Toast = forwardRef<ToastHandler, ToastProps>(function Toast(
+  { position = 'top', duration, order, ...regionProps },
+  ref,
+) {
+  'use memo'
+
+  const { state, itemRef, enqueue, onHoverStart, onHoverEnd } =
+    useNotificationQueue<ToastContent>('toast', { duration, order })
+
+  function show(message: ReactNode, options: ShowToastOptions) {
+    enqueue({
+      message,
+      type: options.type,
+    })
+  }
+
+  useImperativeHandle(ref, () => ({ show }))
+
+  return (
+    <NotificationRegion
+      name="toast"
+      state={state}
+      position={position}
+      {...regionProps}
+    >
+      {state.visibleToasts.map((toast) => (
+        <NotificationItem
+          key={toast.key}
+          name="toast"
+          toast={toast}
+          state={state}
+          itemRef={itemRef}
+          onHoverStart={onHoverStart}
+          onHoverEnd={onHoverEnd}
+          data-type={toast.content.type}
+        />
+      ))}
+    </NotificationRegion>
+  )
+})
+
+export default Toast
+
+export function useToast(props: ToastProps = {}) {
+  'use memo'
+
+  const toastHandlerRef = useRef<ToastHandler>(null)
+  const element = <Toast ref={toastHandlerRef} {...props} />
+  function show(message: ReactNode, options: ShowToastOptions) {
+    toastHandlerRef.current?.show(message, options)
+  }
+  return [element, show] as const
+}

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

@@ -0,0 +1,47 @@
+.charcoal-notification-region {
+  position: fixed;
+  left: 0;
+  right: 0;
+  display: grid;
+  justify-content: center;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.charcoal-notification {
+  box-sizing: border-box;
+  border-radius: var(--charcoal-radius-oval);
+  width: fit-content;
+  max-width: calc(100vw - var(--charcoal-space-46));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--charcoal-space-20);
+  pointer-events: auto;
+}
+
+.charcoal-notification-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.charcoal-notification-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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+
+.charcoal-notification, .charcoal-notification[data-exiting='true'] {
+  animation: none;
+}
+}
+

package/src/components/Notification/layout.css

@@ -0,0 +1,46 @@
+.charcoal-notification-region {
+  position: fixed;
+  left: 0;
+  right: 0;
+  display: grid;
+  justify-content: center;
+  pointer-events: none;
+  box-sizing: border-box;
+}
+
+.charcoal-notification {
+  box-sizing: border-box;
+  border-radius: var(--charcoal-radius-oval);
+  width: fit-content;
+  max-width: calc(100vw - var(--charcoal-space-46));
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--charcoal-space-20);
+  pointer-events: auto;
+}
+
+.charcoal-notification-content {
+  display: flex;
+  align-items: center;
+  min-width: 0;
+}
+
+.charcoal-notification-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);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .charcoal-notification,
+  .charcoal-notification[data-exiting='true'] {
+    animation: none;
+  }
+}

package/src/components/Notification/types.ts

@@ -0,0 +1,28 @@
+export type NotificationName = 'snackbar' | 'toast'
+export type Position = 'top' | 'bottom'
+export type NotificationOrder = 'queue' | 'replace'
+
+export type UseNotificationOptions = {
+  position?: Position
+  /**
+   * 画面端からの距離（ピクセル）
+   * @default 16
+   */
+  offset?: number
+  /**
+   * 通知を表示する時間（ミリ秒）。負の値は 0、数値でない値は 5000 として扱う
+   * @default 5000
+   */
+  duration?: number
+  /**
+   * 表示中の通知がある場合の次の通知の表示方法
+   * @default 'queue'
+   */
+  order?: NotificationOrder
+}
+
+export type NotificationProps = UseNotificationOptions & {
+  zIndex?: number
+  portalContainer?: HTMLElement
+  className?: string
+}

package/src/components/Notification/useNotificationQueue.ts

@@ -0,0 +1,235 @@
+import { useCallback, useEffect, useRef } from 'react'
+import { useToastState } from 'react-stately/useToastState'
+import type { NotificationName, NotificationOrder } from './types'
+
+const DEFAULT_DURATION_MS = 5000
+const ANIMATION_DURATION_MS = 300
+
+type QueueItem<TContent, TCloseReason> = {
+  content: TContent
+  onClose?: (reason: TCloseReason) => void
+}
+
+export function useNotificationQueue<
+  TContent,
+  TCloseReason extends string = never,
+>(
+  name: NotificationName,
+  {
+    duration: durationOption,
+    order = 'queue',
+    timeoutReason,
+    unmountedReason,
+  }: {
+    duration?: number
+    order?: NotificationOrder
+    timeoutReason?: TCloseReason
+    unmountedReason?: TCloseReason
+  } = {},
+) {
+  const itemRef = useRef<HTMLDivElement>(null)
+  const queueRef = useRef<
+    Array<QueueItem<TContent, TCloseReason> & { duration: number }>
+  >([])
+  const isShowingRef = useRef(false)
+  const activeRef = useRef<{
+    key: string
+    onClose?: (reason: TCloseReason) => void
+    reason?: TCloseReason
+    notified: boolean
+  }>()
+  const replaceRef = useRef(false)
+  const hoverRef = useRef({
+    active: false,
+    pending: undefined as (() => void) | undefined,
+  })
+  // wrapUpdate を固定したまま、後から定義する playNext の最新版を呼ぶ
+  const playNextRef = useRef<(() => void) | undefined>(undefined)
+
+  // wrapUpdate の参照が変わると useToastState が ToastQueue を作り直すため useCallback で固定する
+  const wrapUpdate = useCallback(
+    function wrapUpdate(
+      update: () => void,
+      action: 'add' | 'remove' | 'clear',
+    ) {
+      if (action !== 'remove') {
+        update()
+        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() {
+        activeRef.current = undefined
+        update()
+        playNextRef.current?.()
+      }
+
+      notifyActive()
+
+      if (hoverRef.current.active) {
+        hoverRef.current.pending = () => wrapUpdate(update, 'remove')
+        return
+      }
+
+      if (itemRef.current === null) {
+        finish()
+        return
+      }
+
+      if (replaceRef.current) {
+        replaceRef.current = false
+        finish()
+        return
+      }
+      const item: HTMLDivElement = itemRef.current
+
+      // allow-discreteが Newly Available で使えないので、要素の削除をアニメーション完了まで待つ
+      item.dataset.exiting = 'true'
+      let completed = false
+      let fallbackTimer = 0 // complete 内で clearTimeout(setTimeout(...)) すると新規タイマーを即キャンセルしてしまう
+      function handleAnimationEnd(event: AnimationEvent) {
+        if (
+          event.target === item &&
+          event.animationName === `charcoal-${name}-exit`
+        ) {
+          complete()
+        }
+      }
+      function complete() {
+        if (completed) return
+        completed = true
+        item.removeEventListener('animationend', handleAnimationEnd)
+        window.clearTimeout(fallbackTimer)
+        finish()
+      }
+      item.addEventListener('animationend', handleAnimationEnd)
+      fallbackTimer = window.setTimeout(complete, ANIMATION_DURATION_MS + 100)
+      if (window.matchMedia?.('(prefers-reduced-motion: reduce)').matches) {
+        complete()
+      }
+    },
+    [name, timeoutReason],
+  )
+
+  const state = useToastState<TContent>({
+    maxVisibleToasts: 1,
+    wrapUpdate,
+  })
+
+  useEffect(() => {
+    return () => {
+      const active = activeRef.current
+      if (active !== undefined && !active.notified) {
+        if (unmountedReason !== undefined) {
+          active.onClose?.(unmountedReason)
+        }
+      }
+      activeRef.current = undefined
+      queueRef.current = []
+      isShowingRef.current = false
+    }
+  }, [unmountedReason])
+
+  function playNext() {
+    const next = queueRef.current.shift()
+    if (next === undefined) {
+      isShowingRef.current = false
+      return
+    }
+
+    const { duration, onClose, content } = next
+    isShowingRef.current = true
+    const enterMs = window.matchMedia?.('(prefers-reduced-motion: reduce)')
+      .matches
+      ? 0
+      : ANIMATION_DURATION_MS
+    const key = state.add(content, {
+      // react-stately は 0 を「タイマーなし」と扱うため、最小の正数を渡す
+      timeout: Math.max(1, duration + enterMs),
+    })
+    activeRef.current = { key, onClose, notified: false }
+  }
+  playNextRef.current = playNext
+
+  function enqueue(
+    content: TContent,
+    onClose?: (reason: TCloseReason) => void,
+  ) {
+    const duration =
+      typeof durationOption === 'number' && Number.isFinite(durationOption)
+        ? Math.max(0, durationOption)
+        : DEFAULT_DURATION_MS
+
+    queueRef.current.push({
+      content,
+      onClose,
+      duration,
+    })
+    if (!isShowingRef.current) {
+      playNext()
+    } else if (order === 'replace') {
+      const active = activeRef.current
+      if (active === undefined) return
+
+      active.reason = 'replaced' as TCloseReason
+      replaceRef.current = true
+      hoverRef.current.active = false
+      const pending = hoverRef.current.pending
+      hoverRef.current.pending = undefined
+      if (pending !== undefined) {
+        pending()
+      } else {
+        state.close(active.key)
+      }
+    }
+  }
+
+  function close(key: string, reason: TCloseReason) {
+    const active = activeRef.current
+    if (active?.key !== key) return
+    active.reason = reason
+    hoverRef.current.active = false
+    const pending = hoverRef.current.pending
+    hoverRef.current.pending = undefined
+    if (pending !== undefined) {
+      pending()
+    } else {
+      state.close(key)
+    }
+  }
+
+  function onHoverStart() {
+    hoverRef.current.active = true
+  }
+
+  function onHoverEnd() {
+    hoverRef.current.active = false
+    const pending = hoverRef.current.pending
+    hoverRef.current.pending = undefined
+    pending?.()
+  }
+
+  function clearHover() {
+    hoverRef.current.active = false
+    hoverRef.current.pending = undefined
+  }
+
+  return {
+    state,
+    itemRef,
+    enqueue,
+    close,
+    onHoverStart,
+    onHoverEnd,
+    clearHover,
+  }
+}

package/src/index.ts

@@ -106,4 +106,23 @@ export {
   type ScrollStep,
   type ScrollStepContext,
 } from './components/Carousel'
+export {
+  default as unstable_Snackbar,
+  useSnackbar as unstable_useSnackbar,
+  type SnackbarProps as unstable_SnackbarProps,
+  type SnackbarHandler as unstable_SnackbarHandler,
+  type SnackbarCloseReason as unstable_SnackbarCloseReason,
+  type ShowSnackbarOptions as unstable_ShowSnackbarOptions,
+} from './components/Notification/Snackbar'
+export {
+  default as unstable_Toast,
+  useToast as unstable_useToast,
+  type ToastProps as unstable_ToastProps,
+  type ToastHandler as unstable_ToastHandler,
+  type ShowToastOptions as unstable_ShowToastOptions,
+} from './components/Notification/Toast'
+export {
+  type NotificationOrder as unstable_NotificationOrder,
+  type UseNotificationOptions as unstable_UseNotificationOptions,
+} from './components/Notification/types'
 import './components/FocusRing/index.css'