@infonomic/uikit 5.44.0 → 6.0.1

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>
   )
 }

package/src/components/pager/first-button.tsx

@@ -1,13 +1,10 @@
 'use client'
 
-/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import React from 'react'
 
-import type React from 'react'
-
-import { DoubleArrowLeftIcon } from '@radix-ui/react-icons'
-import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
 
+import { ChevronLeftDoubleIcon } from '../../icons/chevron-left-double-icon.js'
 import { usePager } from './pagination'
 import styles from './pagination.module.css'
 import type { PagerButtonProps, RefType } from './pagination'
@@ -16,7 +13,7 @@ export const FirstButton = ({
   ref,
   className,
   disabled,
-  asChild,
+  render,
   children,
   ...rest
 }: PagerButtonProps & {
@@ -24,29 +21,30 @@ export const FirstButton = ({
 }) => {
   const { variant } = usePager()
 
-  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
-
-  const aria = disabled ? { 'aria-disabled': true } : { 'aria-label': 'First' }
+  const sharedProps = {
+    className: cx(
+      styles['first-button'],
+      styles[variant],
+      styles['rounded-left'],
+      'pagination-first',
+      className
+    ),
+    disabled,
+    'data-testid': 'pagination-first',
+    title: 'First',
+    ...(disabled ? { 'aria-disabled': true } : { 'aria-label': 'First' }),
+    ...rest,
+  }
 
   return (
     <li className={styles['mobile-toggle']}>
-      <Comp
-        ref={ref}
-        className={cx(
-          styles['first-button'],
-          styles[variant],
-          styles['rounded-left'],
-          'pagination-first',
-          className
-        )}
-        disabled={disabled}
-        data-testid="pagination-first"
-        title="First"
-        {...aria}
-        {...rest}
-      >
-        {(asChild ?? false) ? children : <DoubleArrowLeftIcon />}
-      </Comp>
+      {render ? (
+        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? <ChevronLeftDoubleIcon width="18px" height="18px" />}
+        </button>
+      )}
     </li>
   )
 }

package/src/components/pager/last-button.tsx

@@ -1,13 +1,10 @@
 'use client'
 
-/* eslint-disable @typescript-eslint/strict-boolean-expressions */
+import React from 'react'
 
-import type React from 'react'
-
-import { DoubleArrowRightIcon } from '@radix-ui/react-icons'
-import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
 
+import { ChevronRightDoubleIcon } from '../../icons/chevron-right-double-icon.js'
 import { usePager } from './pagination'
 import styles from './pagination.module.css'
 import type { PagerButtonProps, RefType } from './pagination'
@@ -21,36 +18,38 @@ export const LastButton = ({
   className,
   disabled,
   count,
-  asChild,
+  render,
   children,
   ...rest
 }: LastButtonProps & {
   ref?: React.RefObject<RefType>
 }) => {
   const { variant } = usePager()
-  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
 
-  const aria = disabled ? { 'aria-disabled': true } : { 'aria-label': 'Last' }
+  const sharedProps = {
+    className: cx(
+      styles['last-button'],
+      styles[variant],
+      styles['rounded-right'],
+      'pagination-last',
+      className
+    ),
+    disabled,
+    title: 'Last',
+    'data-testid': 'pagination-last',
+    ...(disabled ? { 'aria-disabled': true } : { 'aria-label': 'Last' }),
+    ...rest,
+  }
 
   return (
     <li className={styles['mobile-toggle']}>
-      <Comp
-        ref={ref}
-        className={cx(
-          styles['last-button'],
-          styles[variant],
-          styles['rounded-right'],
-          'pagination-last',
-          className
-        )}
-        disabled={disabled}
-        title="Last"
-        data-testid="pagination-last"
-        {...aria}
-        {...rest}
-      >
-        {(asChild ?? false) ? children : <DoubleArrowRightIcon />}
-      </Comp>
+      {render ? (
+        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? <ChevronRightDoubleIcon width="18px" height="18px" />}
+        </button>
+      )}
     </li>
   )
 }

package/src/components/pager/next-button.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import type React from 'react'
+import React from 'react'
 
-import { ChevronRightIcon } from '@radix-ui/react-icons'
-import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
 
+import { ChevronRightIcon } from '../../icons/chevron-right-icon.js'
 import { usePager } from './pagination'
 import styles from './pagination.module.css'
 import type { PagerButtonProps, RefType } from './pagination'
@@ -19,36 +18,38 @@ export const NextButton = ({
   className,
   disabled,
   page,
-  asChild,
+  render,
   children,
   ...rest
 }: NextButtonProps & {
   ref?: React.RefObject<RefType>
 }) => {
-  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
   const { variant, showLastButton } = usePager()
 
-  const aria = disabled ? { 'aria-disabled': true } : { 'aria-label': 'Next' }
+  const sharedProps = {
+    className: cx(
+      styles['next-button'],
+      [styles[variant]],
+      { [styles['rounded-right']]: showLastButton == null || showLastButton === false },
+      'pagination-next',
+      className
+    ),
+    disabled,
+    title: 'Next',
+    'data-testid': 'pagination-next',
+    ...(disabled ? { 'aria-disabled': true } : { 'aria-label': 'Next' }),
+    ...rest,
+  }
 
   return (
     <li className={styles['mobile-toggle']}>
-      <Comp
-        ref={ref}
-        className={cx(
-          styles['next-button'],
-          [styles[variant]],
-          { [styles['rounded-right']]: showLastButton == null || showLastButton === false },
-          'pagination-next',
-          className
-        )}
-        disabled={disabled}
-        title="Next"
-        data-testid="pagination-next"
-        {...aria}
-        {...rest}
-      >
-        {(asChild ?? false) ? children : <ChevronRightIcon />}
-      </Comp>
+      {render ? (
+        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? <ChevronRightIcon width="18px" height="18px" />}
+        </button>
+      )}
     </li>
   )
 }

package/src/components/pager/number-button.tsx

@@ -1,8 +1,7 @@
 'use client'
 
-import type React from 'react'
+import React from 'react'
 
-import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
 
 import { useMediaQuery } from '../../hooks/use-media-query'
@@ -22,7 +21,7 @@ export const NumberButton = ({
   className,
   disabled,
   activeClassName,
-  asChild,
+  render,
   children,
   ...rest
 }: NumberButtonProps & {
@@ -39,43 +38,45 @@ export const NumberButton = ({
     hidePrevButton,
   } = usePager()
 
-  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
-
   const active = page === currentPage
 
+  const sharedProps = {
+    className: cx(
+      styles['number-button'],
+      [styles[variant]],
+      { [styles.active]: active === true, active: active === true },
+      {
+        [styles['rounded-left']]:
+          page === 1 && ((!(showFirstButton ?? false) && (hidePrevButton ?? false)) || mobile),
+      },
+      {
+        [styles['rounded-right']]:
+          page === count &&
+          ((!(showLastButton ?? false) && (hideNextButton ?? false)) || mobile),
+      },
+      'pagination-number',
+      className
+    ),
+    'data-testid':
+      cx({
+        'pager-number-active': currentPage === page,
+        [`pager-number-${page}`]: currentPage !== page,
+      }).length > 0 || undefined,
+    disabled,
+    'aria-current': currentPage === page,
+    'aria-label': currentPage === page ? `Current Page, Page ${page}` : `Page ${page}`,
+    ...rest,
+  }
+
   return (
     <li className="flex">
-      <Comp
-        ref={ref}
-        className={cx(
-          styles['number-button'],
-          [styles[variant]],
-          { [styles.active]: active === true, active: active === true },
-          {
-            [styles['rounded-left']]:
-              page === 1 && ((!(showFirstButton ?? false) && (hidePrevButton ?? false)) || mobile),
-          },
-          {
-            [styles['rounded-right']]:
-              page === count &&
-              ((!(showLastButton ?? false) && (hideNextButton ?? false)) || mobile),
-          },
-          'pagination-number',
-          className
-        )}
-        data-testid={
-          cx({
-            'pager-number-active': currentPage === page,
-            [`pager-number-${page}`]: currentPage !== page,
-          }).length > 0 || undefined
-        }
-        disabled={disabled}
-        aria-current={currentPage === page}
-        aria-label={currentPage === page ? `Current Page, Page ${page}` : `Page ${page}`}
-        {...rest}
-      >
-        {(asChild ?? false) ? children : page}
-      </Comp>
+      {render ? (
+        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? page}
+        </button>
+      )}
     </li>
   )
 }

package/src/components/pager/pagination.tsx

@@ -122,23 +122,16 @@ export function usePager(): PagerContextType {
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // First, Previous, Next, Last and Page number buttons
 
-// Define the ref type based on asChild prop
-export type RefType = React.Ref<HTMLButtonElement> | React.Ref<HTMLElement>
-
-// Your existing types...
-type AsButton = { asChild?: false } & React.ComponentRef<'button'>
-
-// Or AsSlot
-interface AsSlot {
-  asChild?: true
-}
+// Define the ref type
+export type RefType = HTMLButtonElement | HTMLElement
 
 export type PagerButtonProps = {
   className?: string
   disabled?: boolean
   children?: React.ReactNode
+  render?: React.ReactElement
   onClick?: React.ReactEventHandler<Element> | undefined
-} & (AsButton | AsSlot)
+}
 
 // ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 // Pager container component

package/src/components/pager/previous-button.tsx

@@ -1,11 +1,10 @@
 'use client'
 
-import type React from 'react'
+import React from 'react'
 
-import { ChevronLeftIcon } from '@radix-ui/react-icons'
-import { Slot } from '@radix-ui/react-slot'
 import cx from 'classnames'
 
+import { ChevronLeftIcon } from '../../icons/chevron-left-icon.js'
 import { usePager } from './pagination'
 import styles from './pagination.module.css'
 import type { PagerButtonProps, RefType } from './pagination'
@@ -14,37 +13,38 @@ export const PreviousButton = ({
   ref,
   className,
   disabled,
-  asChild,
+  render,
   children,
   ...rest
 }: PagerButtonProps & {
   ref?: React.RefObject<RefType>
 }) => {
-  const Comp = asChild != null ? Slot : ('button' as React.ElementType)
   const { showFirstButton, variant } = usePager()
 
-  const aria = disabled ? { 'aria-disabled': true } : { 'aria-label': 'Previous' }
+  const sharedProps = {
+    className: cx(
+      styles['previous-button'],
+      styles[variant],
+      { [styles['rounded-left']]: showFirstButton == null || showFirstButton === false },
+      'pagination-previous',
+      className
+    ),
+    disabled,
+    title: 'Previous',
+    'data-testid': 'pagination-previous',
+    ...(disabled ? { 'aria-disabled': true } : { 'aria-label': 'Previous' }),
+    ...rest,
+  }
 
   return (
     <li className={styles['mobile-toggle']}>
-      <Comp
-        ref={ref}
-        className={cx(
-          styles['previous-button'],
-          styles[variant],
-
-          { [styles['rounded-left']]: showFirstButton == null || showFirstButton === false },
-          'pagination-previous',
-          className
-        )}
-        disabled={disabled}
-        title="Previous"
-        data-testid="pagination-previous"
-        {...aria}
-        {...rest}
-      >
-        {(asChild ?? false) ? children : <ChevronLeftIcon />}
-      </Comp>
+      {render ? (
+        React.cloneElement(render, { ref, ...sharedProps } as React.Attributes & Record<string, unknown>, children)
+      ) : (
+        <button ref={ref as React.RefObject<HTMLButtonElement>} {...sharedProps}>
+          {children ?? <ChevronLeftIcon width="18px" height="18px" />}
+        </button>
+      )}
     </li>
   )
 }

package/src/components/scroll-area/scroll-area.tsx

@@ -1,11 +1,11 @@
 import type React from 'react'
 
+import { ScrollArea as ScrollAreaPrimitive } from '@base-ui/react/scroll-area'
 import cx from 'classnames'
-import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui'
 
 import styles from './scroll-area.module.css'
 
-interface ScrollAreaProps extends React.ComponentPropsWithoutRef<typeof ScrollAreaPrimitive.Root> {}
+interface ScrollAreaProps extends React.ComponentProps<typeof ScrollAreaPrimitive.Root> { }
 
 export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
   <ScrollAreaPrimitive.Root
@@ -13,7 +13,7 @@ export const ScrollArea = ({ children, style, className }: ScrollAreaProps) => (
     className={cx('infonomic-scroll-area', styles.root, className)}
   >
     <ScrollAreaPrimitive.Viewport className={cx('infonomic-scroll-area-viewport', styles.viewport)}>
-      {children}
+      <ScrollAreaPrimitive.Content>{children}</ScrollAreaPrimitive.Content>
     </ScrollAreaPrimitive.Viewport>
     <ScrollAreaPrimitive.Scrollbar
       className={cx('infonomic-scroll-area-scrollbar', styles.scrollbar)}