@infonomic/uikit 5.43.1 → 6.0.0

package/src/components/notifications/toast.module.css

@@ -1,17 +1,104 @@
 @layer infonomic-base,
-  infonomic-functional,
-  infonomic-utilities,
-  infonomic-theme,
-  infonomic-typography,
-  infonomic-components;
+infonomic-functional,
+infonomic-utilities,
+infonomic-theme,
+infonomic-typography,
+infonomic-components;
 
 @layer infonomic-components {
-  /* Positions are relative to the toast viewport which is set 
-   globally in components/toast.css  */
+  /* ============================================
+     Viewport — fixed-position container for toasts.
+     Position classes are applied here.
+     ============================================ */
+
+  .viewport,
+  :global(.infonomic-toast-viewport) {
+    --viewport-padding: 16px;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    z-index: var(--z-index-toast);
+    outline: none;
+  }
+
+  /* Mobile: full-width at all positions */
+
+  .top-left,
+  :global(.infonomic-toast-top-left) {
+    top: 88px;
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  .top-right,
+  :global(.infonomic-toast-top-right) {
+    top: 88px;
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  .bottom-left,
+  :global(.infonomic-toast-bottom-left) {
+    bottom: var(--viewport-padding);
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  .bottom-right,
+  :global(.infonomic-toast-bottom-right) {
+    bottom: var(--viewport-padding);
+    right: var(--viewport-padding);
+    left: var(--viewport-padding);
+  }
+
+  @media (min-width: 48rem) {
+
+    .bottom-right,
+    :global(.infonomic-toast-bottom-right) {
+      bottom: var(--viewport-padding);
+      right: var(--viewport-padding);
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .bottom-left,
+    :global(.infonomic-toast-bottom-left) {
+      bottom: var(--viewport-padding);
+      left: var(--viewport-padding);
+      right: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-left,
+    :global(.infonomic-toast-top-left) {
+      top: 88px;
+      left: var(--viewport-padding);
+      right: auto;
+      bottom: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+
+    .top-right,
+    :global(.infonomic-toast-top-right) {
+      top: 88px;
+      right: var(--viewport-padding);
+      bottom: auto;
+      left: auto;
+      width: 100%;
+      max-width: 390px;
+    }
+  }
+
+  /* ============================================
+     Root — individual toast wrapper
+     ============================================ */
 
   .root,
   :global(.infonomic-toast-root) {
-    position: fixed;
     display: flex;
     flex-direction: column;
     gap: var(--gap-1);
@@ -23,51 +110,83 @@
     border-style: var(--border-style-solid);
     border-radius: var(--border-radius-md);
     box-shadow: var(--shadow-sm);
+    transform: translateX(var(--toast-swipe-movement-x, 0)) translateY(var(--toast-swipe-movement-y, 0));
+    transition:
+      transform 200ms ease-out,
+      opacity 150ms ease-in;
   }
 
   :global(.dark),
   :global([data-theme="dark"]) {
+
     .root,
     :global(.infonomic-toast-root) {
       background: var(--canvas-800);
     }
   }
 
-  .root[data-state="open"],
-  :global(.infonomic-toast-root[data-state="open"]) {
-    animation: slideInFromBottom 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  /* Entry animation */
+  .root[data-starting-style],
+  :global(.infonomic-toast-root[data-starting-style]) {
+    opacity: 0;
+    transform: translateY(calc(100% + var(--viewport-padding)));
+  }
+
+  @media (min-width: 48rem) {
+
+    .viewport.top-right .root[data-starting-style],
+    .viewport.bottom-right .root[data-starting-style],
+    :global(.infonomic-toast-viewport.top-right .infonomic-toast-root[data-starting-style]),
+    :global(.infonomic-toast-viewport.bottom-right .infonomic-toast-root[data-starting-style]) {
+      opacity: 0;
+      transform: translateX(calc(100% + var(--viewport-padding)));
+    }
+
+    .viewport.top-left .root[data-starting-style],
+    .viewport.bottom-left .root[data-starting-style],
+    :global(.infonomic-toast-viewport.top-left .infonomic-toast-root[data-starting-style]),
+    :global(.infonomic-toast-viewport.bottom-left .infonomic-toast-root[data-starting-style]) {
+      opacity: 0;
+      transform: translateX(calc(-100% - var(--viewport-padding)));
+    }
   }
 
-  .root[data-state="closed"],
-  :global(.infonomic-toast-root[data-state="closed"]) {
-    animation: hide 100ms ease-in;
+  /* Exit animation */
+  .root[data-ending-style],
+  :global(.infonomic-toast-root[data-ending-style]) {
+    opacity: 0;
   }
 
-  .root[data-swipe="move"],
-  :global(.infonomic-toast-root[data-swipe="move"]) {
-    transform: translateX(var(--radix-toast-swipe-move-x));
+  .root[data-ending-style][data-swipe-direction="right"],
+  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="right"]) {
+    transform: translateX(calc(var(--toast-swipe-movement-x, 0) + 100% + var(--viewport-padding)));
   }
 
-  .root[data-swipe="cancel"],
-  :global(.infonomic-toast-root[data-swipe="cancel"]) {
-    transform: translateX(0);
-    transition: transform 200ms ease-out;
+  .root[data-ending-style][data-swipe-direction="left"],
+  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="left"]) {
+    transform: translateX(calc(var(--toast-swipe-movement-x, 0) - 100% - var(--viewport-padding)));
   }
 
-  .root.top-right[data-swipe="end"],
-  .root.bottom-right[data-swipe="end"],
-  :global(.infonomic-toast-root.top-right[data-swipe="end"]),
-  :global(.infonomic-toast-root.bottom-right[data-swipe="end"]) {
-    animation: swipeOutToRight 100ms ease-out;
+  .root[data-ending-style][data-swipe-direction="down"],
+  :global(.infonomic-toast-root[data-ending-style][data-swipe-direction="down"]) {
+    transform: translateY(calc(var(--toast-swipe-movement-y, 0) + 150%));
   }
 
-  .root.top-left[data-swipe="end"],
-  .root.bottom-left[data-swipe="end"],
-  :global(.infonomic-toast-root.top-left[data-swipe="end"]),
-  :global(.infonomic-toast-root.bottom-left[data-swipe="end"]) {
-    animation: swipeOutToLeft 100ms ease-out;
+  /* ============================================
+     Content — overflow container for stacking
+     ============================================ */
+
+  .content,
+  :global(.infonomic-toast-content) {
+    display: flex;
+    flex-direction: column;
+    gap: var(--gap-1);
   }
 
+  /* ============================================
+     Header / Close / Title / Description / Action
+     ============================================ */
+
   .header,
   :global(.infonomic-toast-header) {
     display: flex;
@@ -122,149 +241,4 @@
     justify-content: end;
     padding: 0 12px 0 12px;
   }
-
-  /* Positions are relative to the toast viewport which is set 
-   globally in components/toast.css  */
-
-  .top-left,
-  :global(.infonomic-toast-top-left) {
-    top: 88px;
-    right: 16px;
-    left: 16px;
-  }
-
-  .top-right,
-  :global(.infonomic-toast-top-right) {
-    top: 88px;
-    right: 16px;
-    left: 16px;
-  }
-
-  .bottom-left,
-  :global(.infonomic-toast-bottom-left) {
-    bottom: 16px;
-    right: 16px;
-    left: 16px;
-  }
-
-  .bottom-right,
-  :global(.infonomic-toast-bottom-right) {
-    bottom: 16px;
-    right: 16px;
-    left: 16px;
-  }
-
-  @media (min-width: 48rem) {
-    .root.top-right[data-state="open"],
-    .root.bottom-right[data-state="open"],
-    :global(.infonomic-toast-root.top-right[data-state="open"]),
-    :global(.infonomic-toast-root.bottom-right[data-state="open"]) {
-      animation: slideInFromRight 150ms cubic-bezier(0.16, 1, 0.3, 1);
-    }
-
-    .root.top-left[data-state="open"],
-    .root.bottom-left[data-state="open"],
-    :global(.infonomic-toast-root.top-left[data-state="open"]),
-    :global(.infonomic-toast-root.bottom-left[data-state="open"]) {
-      animation: slideInFromLeft 150ms cubic-bezier(0.16, 1, 0.3, 1);
-    }
-
-    .bottom-right,
-    :global(.infonomic-toast-bottom-right) {
-      bottom: 16px;
-      right: 16px;
-      left: auto;
-      width: 100%;
-      max-width: 390px;
-    }
-
-    .bottom-left,
-    :global(.infonomic-toast-bottom-left) {
-      bottom: 16px;
-      left: 16px;
-      right: auto;
-      width: 100%;
-      max-width: 390px;
-    }
-
-    .top-left,
-    :global(.infonomic-toast-top-left) {
-      top: 88px;
-      left: 16px;
-      right: auto;
-      bottom: auto;
-      width: 100%;
-      max-width: 390px;
-    }
-
-    .top-right,
-    :global(.infonomic-toast-top-right) {
-      top: 88px;
-      right: 16px;
-      bottom: auto;
-      left: auto;
-      width: 100%;
-      max-width: 390px;
-    }
-  }
-
-  @keyframes slideInFromRight {
-    from {
-      transform: translateX(calc(100% + var(--viewport-padding)));
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideInFromLeft {
-    from {
-      transform: translateX(calc(-100% - var(--viewport-padding)));
-    }
-
-    to {
-      transform: translateX(0);
-    }
-  }
-
-  @keyframes slideInFromBottom {
-    from {
-      transform: translateY(calc(100% + var(--viewport-padding)));
-    }
-
-    to {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes swipeOutToRight {
-    from {
-      transform: translateX(var(--radix-toast-swipe-end-x));
-    }
-
-    to {
-      transform: translateX(calc(100% + var(--viewport-padding)));
-    }
-  }
-
-  @keyframes swipeOutToLeft {
-    from {
-      transform: translateX(var(--radix-toast-swipe-end-x));
-    }
-
-    to {
-      transform: translateX(calc(-100% - var(--viewport-padding)));
-    }
-  }
-
-  @keyframes hide {
-    from {
-      opacity: 1;
-    }
-
-    to {
-      opacity: 0;
-    }
-  }
-}
+}

package/src/components/notifications/toast.stories.tsx

@@ -1,42 +1,40 @@
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+import type React from 'react'
 
-import React from 'react'
-
-import type { Meta } from '@storybook/react-vite'
+import type { Meta, StoryObj } from '@storybook/react-vite'
 
 import { Button } from '../button/button.js'
-import { Toast as ToastComponent } from './toast.js'
+import { useToastManager } from './toast.js'
 
-export const Toast = (): React.JSX.Element => {
-  const [toast, setToast] = React.useState(false)
+function ToastDemo(): React.JSX.Element {
+  const toastManager = useToastManager()
 
   const handleOpenToastClick = (): void => {
-    setToast(!toast)
+    toastManager.add({
+      title: 'Note',
+      description:
+        'This is a test Toast notification that should appear when the button is clicked.',
+      data: {
+        intent: 'success',
+        iconType: 'success',
+        icon: true,
+        close: true,
+      },
+    })
   }
 
   return (
     <div style={{ maxWidth: '600px', margin: '2rem 0' }}>
       <Button onClick={handleOpenToastClick}>Open Toast</Button>
-      <ToastComponent
-        title="Note"
-        iconType="success"
-        intent="success"
-        position="bottom-right"
-        message="This is a test Toast modal that should appear when the button is clicked."
-        open={toast}
-        onOpenChange={setToast}
-      />
     </div>
   )
 }
 
-const meta: Meta<typeof Toast> = {
-  /* 👇 The title prop is optional.
-   * See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
-   * to learn how to generate automatic titles
-   */
+export const Toast: StoryObj = {
+  render: () => <ToastDemo />,
+}
+
+const meta: Meta = {
   title: 'Components/Toast',
-  component: ToastComponent,
 }
 
 export default meta

package/src/components/notifications/toast.tsx

@@ -2,9 +2,8 @@
 
 import React from 'react'
 
-import { useFocusTrap, useMergedRef } from '@mantine/hooks'
+import { Toast as ToastPrimitive } from '@base-ui/react/toast'
 import cx from 'classnames'
-import { Toast as ToastPrimitive } from 'radix-ui'
 
 import { CloseIcon } from '../../icons/close-icon'
 import { DangerIcon } from '../../icons/danger-icon'
@@ -13,7 +12,7 @@ import { SuccessIcon } from '../../icons/success-icon'
 import { WarningIcon } from '../../icons/warning-icon'
 import { Button } from '../button/button.js'
 import styles from './toast.module.css'
-import type { IconType, Intent, OnOpenChange, Position } from './@types/toast.js'
+import type { Position, ToastData } from './@types/toast.js'
 
 const toastIcons = {
   success: SuccessIcon,
@@ -22,105 +21,110 @@ const toastIcons = {
   danger: DangerIcon,
 }
 
-export interface ToastProps extends React.InputHTMLAttributes<HTMLLIElement> {
-  intent?: Intent
+// Re-export Base UI toast utilities
+export const useToastManager = ToastPrimitive.useToastManager<ToastData>
+export const createToastManager = ToastPrimitive.createToastManager<ToastData>
+
+export interface ToastProviderProps {
+  children: React.ReactNode
+  timeout?: number
+  limit?: number
+  toastManager?: ReturnType<typeof createToastManager>
+}
+
+export function ToastProvider({
+  children,
+  timeout = 5000,
+  limit = 3,
+  toastManager,
+}: ToastProviderProps) {
+  return (
+    <ToastPrimitive.Provider timeout={timeout} limit={limit} toastManager={toastManager}>
+      {children}
+    </ToastPrimitive.Provider>
+  )
+}
+
+export interface ToastViewportProps {
   position?: Position
-  title: string
-  message: string
-  icon?: boolean
-  iconType?: IconType
-  close?: boolean
-  open: boolean
-  onOpenChange: OnOpenChange
   className?: string
 }
 
-export const ToastProvider = ToastPrimitive.Provider
-export const ToastViewport = ToastPrimitive.Viewport
-
-// Important!: see comments in app/ui/components/notifications/styles/toast.ts regarding toast position
+export function ToastViewport({ position = 'bottom-right', className }: ToastViewportProps) {
+  const { toasts } = ToastPrimitive.useToastManager<ToastData>()
+  return (
+    <ToastPrimitive.Portal>
+      <ToastPrimitive.Viewport
+        className={cx('infonomic-toast-viewport', styles.viewport, styles[position], className)}
+      >
+        {toasts.map((toast) => (
+          <ToastItem key={toast.id} toast={toast} />
+        ))}
+      </ToastPrimitive.Viewport>
+    </ToastPrimitive.Portal>
+  )
+}
 
-export const Toast = function Toast({
-  ref,
-  intent = 'success',
-  position = 'bottom-right',
-  title,
-  message,
-  icon = true,
-  iconType = 'success',
-  close = true,
-  open,
-  onOpenChange,
-  className,
-}: ToastProps & {
-  ref?: React.RefObject<HTMLLIElement>
+function ToastItem({
+  toast,
+}: {
+  toast: ToastPrimitive.Root.ToastObject<ToastData>
 }) {
+  const {
+    intent = 'success',
+    iconType = 'success',
+    icon = true,
+    close = true,
+  } = toast.data ?? {}
   const eventDateRef = React.useRef(new Date())
-  const timerRef = React.useRef(0)
-  const focusTrapRef = useFocusTrap()
-  const mergedRef = useMergedRef(ref, focusTrapRef)
   const Icon = toastIcons[iconType as keyof typeof toastIcons]
 
-  const handleOnClose = (): void => {
-    if (onOpenChange != null) onOpenChange(false)
-  }
-
-  const _handleOnChange = (open: boolean): void => {
-    console.log('handleOnChange', { open })
-    if (open) {
-      timerRef.current = window.setTimeout(() => {
-        onOpenChange(false)
-      }, 5000)
-    } else {
-      window.clearTimeout(timerRef.current)
-    }
-  }
+  const swipeDirection = React.useMemo<
+    React.ComponentProps<typeof ToastPrimitive.Root>['swipeDirection']
+  >(() => ['down', 'right'], [])
 
   return (
     <ToastPrimitive.Root
-      ref={mergedRef}
-      className={cx('infonomic-toast', styles.root, styles[position])}
-      open={open}
-      onOpenChange={onOpenChange}
+      toast={toast}
+      swipeDirection={swipeDirection}
+      className={cx('infonomic-toast', styles.root)}
     >
-      <div className={cx('infonomic-toast-header', styles.header)}>
-        <time dateTime={eventDateRef.current.toISOString()} className="text-sm">
-          {new Intl.DateTimeFormat('default', {
-            hour12: true,
-            hour: 'numeric',
-            minute: 'numeric',
-          }).format(eventDateRef.current)}
-        </time>
-        {close === true && (
-          <ToastPrimitive.Close aria-label="Close" asChild>
-            <Button
-              intent={intent}
-              tabIndex={0}
-              variant="filled"
-              aria-label="Close"
-              className={cx('infonomic-toast-close', styles.close)}
-              type="button"
-              onClick={handleOnClose}
+      <ToastPrimitive.Content className={cx('infonomic-toast-content', styles.content)}>
+        <div className={cx('infonomic-toast-header', styles.header)}>
+          <time dateTime={eventDateRef.current.toISOString()} className="text-sm">
+            {new Intl.DateTimeFormat('default', {
+              hour12: true,
+              hour: 'numeric',
+              minute: 'numeric',
+            }).format(eventDateRef.current)}
+          </time>
+          {close && (
+            <ToastPrimitive.Close
+              render={
+                <Button
+                  intent={intent}
+                  tabIndex={0}
+                  variant="filled"
+                  aria-label="Close"
+                  className={cx('infonomic-toast-close', styles.close)}
+                  type="button"
+                />
+              }
             >
               <CloseIcon height="12px" width="12px" />
-            </Button>
-          </ToastPrimitive.Close>
-        )}
-      </div>
-      <ToastPrimitive.Title className={cx('infonomic-toast-title', styles.title)}>
-        {icon != null && <Icon />}
-        {title}
-      </ToastPrimitive.Title>
-      <ToastPrimitive.Description className={cx('infonomic-toast-description', styles.description)}>
-        {message}
-      </ToastPrimitive.Description>
-      {/* <ToastPrimitive.Action className={styles.action} asChild altText="Goto schedule to undo">
-        <div>
-          <Button intent="primary" tabIndex={0} size="sm" variant="filled">
-            Undo
-          </Button>
+            </ToastPrimitive.Close>
+          )}
         </div>
-      </ToastPrimitive.Action> */}
+        <ToastPrimitive.Title className={cx('infonomic-toast-title', styles.title)}>
+          {icon && Icon && <Icon />}
+          {toast.title}
+        </ToastPrimitive.Title>
+        <ToastPrimitive.Description
+          className={cx('infonomic-toast-description', styles.description)}
+        >
+          {toast.description}
+        </ToastPrimitive.Description>
+      </ToastPrimitive.Content>
     </ToastPrimitive.Root>
   )
 }