@infonomic/uikit 5.43.1 → 6.0.0

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

package/src/components/tabs/tabs.module.css

@@ -1,11 +1,12 @@
 @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 {
+
   .tabs-root,
   :global(.infonomic-tabs-root) {
     display: flex;
@@ -38,18 +39,8 @@
     white-space: nowrap;
     width: 100%;
 
-    /* &[data-state="active"] {
-      color: var(----primary-600);
-      box-shadow:
-        inset 0 -1px 0 0 currentColor,
-        0 1px 0 0 currentColor;
-    } */
-
     &:focus {
       position: relative;
-      /* NOTE: will override ring shadows for buttons */
-      /* Will revisit as we're going to rewrite our uikit tabs component */
-      /* box-shadow: 0 0 0 2px black; */
     }
   }
 
@@ -59,7 +50,7 @@
     padding: 6px;
     outline: none;
 
-    &[data-state="inactive"] {
+    &[data-hidden] {
       display: none;
     }
 
@@ -71,4 +62,4 @@
       outline: none;
     }
   }
-}
+}

package/src/components/tabs/tabs.stories.tsx

@@ -27,14 +27,14 @@ export const Tabs = (): React.JSX.Element => (
   >
     <TabsComponent style={{ width: '400px', minHeight: '235px' }} defaultValue="detailsTab">
       <TabsComponent.List>
-        <TabsComponent.Trigger asChild value="detailsTab">
-          <Button size="sm">Details</Button>
+        <TabsComponent.Trigger value="detailsTab" render={<Button size="sm" />}>
+          Details
         </TabsComponent.Trigger>
-        <TabsComponent.Trigger asChild value="rolesTab">
-          <Button size="sm">Roles</Button>
+        <TabsComponent.Trigger value="rolesTab" render={<Button size="sm" />}>
+          Roles
         </TabsComponent.Trigger>
       </TabsComponent.List>
-      <TabsComponent.Content value="detailsTab" forceMount={true}>
+      <TabsComponent.Content value="detailsTab" keepMounted={true}>
         <p>Details tab content here. Some more text to make this tab content area a bit longer.</p>
         <p>Details tab content here. Some more text to make this tab content area a bit longer.</p>
       </TabsComponent.Content>

package/src/components/tabs/tabs.tsx

@@ -2,8 +2,8 @@
 
 import type * as React from 'react'
 
+import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'
 import cx from 'classnames'
-import { Tabs as TabsPrimitive } from 'radix-ui'
 
 import styles from './tabs.module.css'
 
@@ -11,8 +11,8 @@ const Tabs = ({
   ref,
   className,
   ...props
-}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Root> & {
-  ref?: React.RefObject<React.ComponentRef<typeof TabsPrimitive.Root>>
+}: React.ComponentProps<typeof TabsPrimitive.Root> & {
+  ref?: React.RefObject<HTMLDivElement>
 }) => (
   <TabsPrimitive.Root
     ref={ref}
@@ -20,14 +20,14 @@ const Tabs = ({
     {...props}
   />
 )
-Tabs.displayName = TabsPrimitive.Root.displayName
+Tabs.displayName = 'Tabs'
 
 const TabsList = ({
   ref,
   className,
   ...props
-}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.List> & {
-  ref?: React.RefObject<React.ComponentRef<typeof TabsPrimitive.List>>
+}: React.ComponentProps<typeof TabsPrimitive.List> & {
+  ref?: React.RefObject<HTMLDivElement>
 }) => (
   <TabsPrimitive.List
     ref={ref}
@@ -35,38 +35,39 @@ const TabsList = ({
     {...props}
   />
 )
-TabsList.displayName = TabsPrimitive.List.displayName
+TabsList.displayName = 'TabsList'
 
 const TabsTrigger = ({
   ref,
   className,
   ...props
-}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Trigger> & {
-  ref?: React.RefObject<React.ComponentRef<typeof TabsPrimitive.Trigger>>
+}: React.ComponentProps<typeof TabsPrimitive.Tab> & {
+  ref?: React.RefObject<HTMLButtonElement>
 }) => (
-  <TabsPrimitive.Trigger
+  <TabsPrimitive.Tab
     ref={ref}
     className={cx(styles['tabs-trigger'], 'infonomic-tabs-trigger', className)}
     {...props}
   />
 )
-TabsTrigger.displayName = TabsPrimitive.Trigger.displayName
+TabsTrigger.displayName = 'TabsTrigger'
 
 const TabsContent = ({
   ref,
   className,
+  keepMounted = true,
   ...props
-}: React.ComponentPropsWithoutRef<typeof TabsPrimitive.Content> & {
-  ref?: React.RefObject<React.ComponentRef<typeof TabsPrimitive.Content>>
+}: React.ComponentProps<typeof TabsPrimitive.Panel> & {
+  ref?: React.RefObject<HTMLDivElement>
 }) => (
-  <TabsPrimitive.Content
+  <TabsPrimitive.Panel
     ref={ref}
-    forceMount={true}
+    keepMounted={keepMounted}
     className={cx(styles['tabs-content'], 'infonomic-tabs-content', className)}
     {...props}
   />
 )
-TabsContent.displayName = TabsPrimitive.Content.displayName
+TabsContent.displayName = 'TabsContent'
 
 Tabs.List = TabsList
 Tabs.Trigger = TabsTrigger