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

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

@@ -1,8 +1,8 @@
 import '../layout.css'
 import './index.css'
 
-import { forwardRef, useImperativeHandle, useRef } from 'react'
-import type { ReactNode } from 'react'
+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'
@@ -12,30 +12,23 @@ 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
+type SnackbarBaseProps = {
+  message: ReactNode
+  action?: ReactNode
+  dim?: boolean
+} & Omit<HTMLAttributes<HTMLDivElement>, 'children'>
+
+export type SnackbarProps = Omit<SnackbarBaseProps, 'action'> & {
+  /** Snackbar の右側に表示するアクション */
+  action: NonNullable<ReactNode>
 }
 
-export type SnackbarProps = Omit<NotificationProps, 'position'> & {
-  /**
-   * Snackbar の表示位置。ボタン付きの場合は `bottom` に固定される
-   * @default 'bottom'
-   */
+export type UseSnackbarProps = Omit<NotificationProps, 'position'> & {
   position?: Position
-  /**
-   * 暗い背景色
-   * @default false
-   */
   dim?: boolean
 }
 
@@ -44,12 +37,24 @@ type SnackbarContent = {
   action?: ReactNode
 }
 
-const Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(
-  { position = 'bottom', dim = false, duration, order, ...regionProps },
-  ref,
-) {
+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,
@@ -59,24 +64,14 @@ const Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(
     })
 
   function show(message: ReactNode, options: ShowSnackbarOptions = {}) {
-    enqueue(
-      {
-        message,
-        action: options.action,
-      },
-      options.onClose,
-    )
+    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 (
+  const element = (
     <NotificationRegion
       name="snackbar"
       state={state}
@@ -96,36 +91,46 @@ const Snackbar = forwardRef<SnackbarHandler, SnackbarProps>(function Snackbar(
           data-with-action={toast.content.action !== undefined}
         >
           {toast.content.action !== undefined && (
-            <SnackbarAction
-              action={toast.content.action}
-              onClick={() => close(toast.key, 'action')}
-            />
+            <div onClick={() => close(toast.key, 'action')}>
+              <SnackbarAction action={toast.content.action} />
+            </div>
           )}
         </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>
+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>
 }

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

@@ -15,7 +15,7 @@ type ToastStoryArgs = unstable_ToastProps & {
 }
 
 export default {
-  title: 'react/unstable_Toast',
+  title: 'react/Toast',
   component: unstable_Toast,
   parameters: {
     layout: 'centered',
@@ -33,33 +33,36 @@ export default {
   },
   args: {
     message: '保存しました',
+    position: 'top',
+    offset: 16,
     duration: 5000,
     order: 'queue',
+    zIndex: 20,
     type: 'success',
   },
   argTypes: {
     position: {
       options: ['top', 'bottom'],
       control: { type: 'inline-radio' },
-      table: { category: 'Hook' },
+      table: { category: 'Hook', defaultValue: { summary: "'top'" } },
     },
     offset: {
       control: { type: 'number', min: 0, step: 1 },
-      table: { category: 'Hook' },
+      table: { category: 'Hook', defaultValue: { summary: '16' } },
     },
     duration: {
       control: { type: 'number', min: 0, step: 500 },
       description: '表示時間（ミリ秒）',
-      table: { category: 'Hook' },
+      table: { category: 'Hook', defaultValue: { summary: '5000' } },
     },
     order: {
       options: ['queue', 'replace'],
       control: { type: 'inline-radio' },
-      table: { category: 'Hook' },
+      table: { category: 'Hook', defaultValue: { summary: "'queue'" } },
     },
     zIndex: {
       control: { type: 'number', min: 0, step: 1 },
-      table: { category: 'Hook' },
+      table: { category: 'Hook', defaultValue: { summary: '20' } },
     },
     className: {
       control: 'text',

package/src/index.ts

@@ -107,10 +107,10 @@ export {
   type ScrollStepContext,
 } from './components/Carousel'
 export {
-  default as unstable_Snackbar,
+  default as UnstableSnackbar,
   useSnackbar as unstable_useSnackbar,
-  type SnackbarProps as unstable_SnackbarProps,
-  type SnackbarHandler as unstable_SnackbarHandler,
+  type SnackbarProps as UnstableSnackbarProps,
+  type UseSnackbarProps as unstable_UseSnackbarProps,
   type SnackbarCloseReason as unstable_SnackbarCloseReason,
   type ShowSnackbarOptions as unstable_ShowSnackbarOptions,
 } from './components/Notification/Snackbar'