@infonomic/uikit 5.44.0 → 6.0.1

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

package/src/components/tooltip/tooltip.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 {
+
   .tooltip,
   :global(.infonomic-tooltip) {
     font-size: 0.75rem;
@@ -25,24 +26,56 @@
 
   /* Dark mode handled by semantic tokens in theme layer */
 
-  .tooltip[data-state="delayed-open"][data-side="top"] :global {
+  .tooltip[data-open][data-side="top"] :global {
     animation-name: slideDownAndFade;
   }
 
-  .tooltip[data-state="delayed-open"][data-side="right"] :global {
+  .tooltip[data-open][data-side="right"] :global {
     animation-name: slideLeftAndFade;
   }
 
-  .tooltip[data-state="delayed-open"][data-side="left"] :global {
+  .tooltip[data-open][data-side="left"] :global {
     animation-name: slideRightAndFade;
   }
 
-  .tooltip[data-state="delayed-open"][data-side="bottom"] :global {
+  .tooltip[data-open][data-side="bottom"] :global {
     animation-name: slideUpAndFade;
   }
 
   .tooltip-arrow,
   :global(.infonomic-tooltip-arrow) {
+    display: flex;
+
+    &[data-side='top'] {
+      bottom: -6px;
+      rotate: 180deg;
+    }
+
+    &[data-side='bottom'] {
+      top: -6px;
+      rotate: 0deg;
+    }
+
+    &[data-side='left'] {
+      right: -10px;
+      rotate: 90deg;
+    }
+
+    &[data-side='right'] {
+      left: -10px;
+      rotate: -90deg;
+    }
+  }
+
+  .arrow-fill {
+    fill: var(--surface-panel-elevated);
+  }
+
+  .arrow-outer-stroke {
     fill: var(--surface-panel-border);
   }
-}
+
+  .arrow-inner-stroke {
+    fill: var(--surface-panel-elevated);
+  }
+}

package/src/components/tooltip/tooltip.stories.tsx

@@ -21,22 +21,22 @@ export const Tooltip = (): React.JSX.Element => {
         padding: '16px',
       }}
     >
-      <TooltipComponent text="I'm a tooltip" side="top" sideOffset={5}>
+      <TooltipComponent text="I'm a tooltip" side="top" sideOffset={8}>
         <Button fullWidth={true} size="sm">
           Top
         </Button>
       </TooltipComponent>
-      <TooltipComponent text="I'm a tooltip" side="left" sideOffset={5}>
+      <TooltipComponent text="I'm a tooltip" side="left" sideOffset={8}>
         <Button fullWidth={true} size="sm">
           Left
         </Button>
       </TooltipComponent>
-      <TooltipComponent text="I'm a tooltip" side="right" sideOffset={5}>
+      <TooltipComponent text="I'm a tooltip" side="right" sideOffset={8}>
         <Button fullWidth={true} size="sm">
           Right
         </Button>
       </TooltipComponent>
-      <TooltipComponent text="I'm a tooltip" side="bottom" sideOffset={5}>
+      <TooltipComponent text="I'm a tooltip" side="bottom" sideOffset={8}>
         <Button fullWidth={true} size="sm">
           Bottom
         </Button>

package/src/components/tooltip/tooltip.tsx

@@ -2,53 +2,81 @@
 
 import type React from 'react'
 
+import { Tooltip as TooltipPrimitive } from '@base-ui/react/tooltip'
 import cx from 'classnames'
-import { Tooltip as TooltipPrimitive } from 'radix-ui'
 
-type TooltipIntrinsicProps = React.JSX.IntrinsicElements['div']
-export interface TooltipProps extends TooltipIntrinsicProps {
+import styles from './tooltip.module.css'
+
+export interface TooltipProps {
   text: string
   delay?: number
-  side?: 'bottom' | 'top' | 'right' | 'left' | undefined
+  side?: 'bottom' | 'top' | 'right' | 'left'
   sideOffset?: number
-  disableHoverableContent?: boolean
+  disableHoverablePopup?: boolean
   open?: boolean
   onOpenChange?: (open: boolean) => void
+  children: React.ReactElement
+  ref?: React.RefObject<HTMLDivElement>
 }
 
-import styles from './tooltip.module.css'
+function ArrowSvg(props: React.ComponentProps<'svg'>) {
+  return (
+    <svg width="15" height="8" viewBox="0 0 20 10" fill="none" aria-hidden role="presentation" {...props}>
+      <path
+        d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+        className={styles['arrow-fill']}
+      />
+      <path
+        d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+        className={styles['arrow-outer-stroke']}
+      />
+      <path
+        d="M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z"
+        className={styles['arrow-inner-stroke']}
+      />
+    </svg>
+  )
+}
 
 export const Tooltip = function Tooltip({
   ref,
   text,
   delay = 500,
   side = 'top',
-  sideOffset = 0,
-  disableHoverableContent,
+  sideOffset = 10,
+  disableHoverablePopup,
   open,
   onOpenChange,
   children,
-}: TooltipProps & {
-  ref?: React.RefObject<HTMLDivElement>
-}): React.JSX.Element {
+}: TooltipProps): React.JSX.Element {
   return (
-    <TooltipPrimitive.Provider
-      delayDuration={delay}
-      disableHoverableContent={disableHoverableContent}
-    >
-      <TooltipPrimitive.Root open={open} onOpenChange={onOpenChange}>
-        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Content
-          ref={ref}
-          side={side}
-          sideOffset={sideOffset}
-          className={cx(styles.tooltip, 'infonomic-tooltip')}
-        >
-          {text}
-          <TooltipPrimitive.Arrow
-            className={cx(styles['tooltip-arrow'], 'infonomic-tooltip-arrow')}
-          />
-        </TooltipPrimitive.Content>
+    <TooltipPrimitive.Provider delay={delay}>
+      <TooltipPrimitive.Root
+        open={open}
+        onOpenChange={onOpenChange}
+        disableHoverablePopup={disableHoverablePopup}
+      >
+        <TooltipPrimitive.Trigger
+          render={children}
+        />
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Positioner
+            ref={ref}
+            side={side}
+            sideOffset={sideOffset}
+          >
+            <TooltipPrimitive.Popup
+              className={cx(styles.tooltip, 'infonomic-tooltip')}
+            >
+              <TooltipPrimitive.Arrow
+                className={cx(styles['tooltip-arrow'], 'infonomic-tooltip-arrow')}
+              >
+                <ArrowSvg />
+              </TooltipPrimitive.Arrow>
+              {text}
+            </TooltipPrimitive.Popup>
+          </TooltipPrimitive.Positioner>
+        </TooltipPrimitive.Portal>
       </TooltipPrimitive.Root>
     </TooltipPrimitive.Provider>
   )

package/src/hooks/use-focus-trap/index.ts

@@ -0,0 +1 @@
+export { useFocusTrap } from './use-focus-trap.js'

package/src/hooks/use-focus-trap/scope-tab.ts

@@ -0,0 +1,48 @@
+/**
+ * Scope tab key navigation within a container.
+ *
+ * Based on use-focus-trap from Mantine (https://github.com/mantinedev/mantine)
+ * Original work licensed under the MIT License.
+ * Copyright (c) 2021 Vitaly Rtishchev
+ *
+ * Adapted for use as an internal ESM/TypeScript module.
+ */
+
+import { findTabbableDescendants } from './tabbable.js'
+
+export function scopeTab(node: HTMLElement, event: KeyboardEvent) {
+  const tabbable = findTabbableDescendants(node)
+  if (!tabbable.length) {
+    event.preventDefault()
+    return
+  }
+
+  const finalTabbable = tabbable[event.shiftKey ? 0 : tabbable.length - 1]
+  const root = node.getRootNode() as unknown as DocumentOrShadowRoot
+  let leavingFinalTabbable = finalTabbable === root.activeElement || node === root.activeElement
+
+  const activeElement = root.activeElement as Element
+  const activeElementIsRadio =
+    activeElement.tagName === 'INPUT' && activeElement.getAttribute('type') === 'radio'
+
+  if (activeElementIsRadio) {
+    const activeRadioGroup = tabbable.filter(
+      (element) =>
+        element.getAttribute('type') === 'radio' &&
+        element.getAttribute('name') === activeElement.getAttribute('name')
+    )
+    leavingFinalTabbable = activeRadioGroup.includes(finalTabbable)
+  }
+
+  if (!leavingFinalTabbable) {
+    return
+  }
+
+  event.preventDefault()
+
+  const target = tabbable[event.shiftKey ? tabbable.length - 1 : 0]
+
+  if (target) {
+    target.focus()
+  }
+}

package/src/hooks/use-focus-trap/tabbable.ts

@@ -0,0 +1,72 @@
+/**
+ * Focus-trap tabbable element utilities.
+ *
+ * Based on use-focus-trap from Mantine (https://github.com/mantinedev/mantine)
+ * Original work licensed under the MIT License.
+ * Copyright (c) 2021 Vitaly Rtishchev
+ *
+ * Adapted for use as an internal ESM/TypeScript module.
+ */
+
+const TABBABLE_NODES = /input|select|textarea|button|object/
+
+export const FOCUS_SELECTOR = 'a, input, select, textarea, button, object, [tabindex]'
+
+function hidden(element: HTMLElement) {
+  return element.style.display === 'none'
+}
+
+function visible(element: HTMLElement) {
+  const isHidden =
+    element.getAttribute('aria-hidden') ||
+    element.getAttribute('hidden') ||
+    element.getAttribute('type') === 'hidden'
+
+  if (isHidden) {
+    return false
+  }
+
+  let parentElement: HTMLElement = element
+  while (parentElement) {
+    if (parentElement === document.body || parentElement.nodeType === 11) {
+      break
+    }
+
+    if (hidden(parentElement)) {
+      return false
+    }
+
+    parentElement = parentElement.parentNode as HTMLElement
+  }
+
+  return true
+}
+
+function getElementTabIndex(element: HTMLElement) {
+  let tabIndex: string | null | undefined = element.getAttribute('tabindex')
+  if (tabIndex === null) {
+    tabIndex = undefined
+  }
+  return Number.parseInt(tabIndex as string, 10)
+}
+
+export function focusable(element: HTMLElement) {
+  const nodeName = element.nodeName.toLowerCase()
+  const isTabIndexNotNaN = !Number.isNaN(getElementTabIndex(element))
+  const res =
+    // @ts-expect-error function accepts any html element but if it is a button, it should not be disabled
+    (TABBABLE_NODES.test(nodeName) && !element.disabled) ||
+    (element instanceof HTMLAnchorElement ? element.href || isTabIndexNotNaN : isTabIndexNotNaN)
+
+  return res && visible(element)
+}
+
+export function tabbable(element: HTMLElement) {
+  const tabIndex = getElementTabIndex(element)
+  const isTabIndexNaN = Number.isNaN(tabIndex)
+  return (isTabIndexNaN || tabIndex >= 0) && focusable(element)
+}
+
+export function findTabbableDescendants(element: HTMLElement): HTMLElement[] {
+  return Array.from(element.querySelectorAll<HTMLElement>(FOCUS_SELECTOR)).filter(tabbable)
+}

package/src/hooks/use-focus-trap/use-focus-trap.ts

@@ -0,0 +1,83 @@
+/**
+ * Focus trap hook — traps keyboard focus within a container element.
+ *
+ * Based on use-focus-trap from Mantine (https://github.com/mantinedev/mantine)
+ * Original work licensed under the MIT License.
+ * Copyright (c) 2021 Vitaly Rtishchev
+ *
+ * Adapted for use as an internal ESM/TypeScript module.
+ */
+
+import { useCallback, useEffect, useRef } from 'react'
+
+import { scopeTab } from './scope-tab.js'
+import { FOCUS_SELECTOR, focusable, tabbable } from './tabbable.js'
+
+export function useFocusTrap(active = true): React.RefCallback<HTMLElement | null> {
+  const ref = useRef<HTMLElement>(null)
+
+  const focusNode = useCallback((node: HTMLElement) => {
+    let focusElement: HTMLElement | null = node.querySelector('[data-autofocus]')
+
+    if (!focusElement) {
+      const children = Array.from<HTMLElement>(node.querySelectorAll(FOCUS_SELECTOR))
+      focusElement = children.find(tabbable) || children.find(focusable) || null
+      if (!focusElement && focusable(node)) {
+        focusElement = node
+      }
+    }
+
+    if (focusElement) {
+      focusElement.focus({ preventScroll: true })
+    }
+  }, [])
+
+  const setRef = useCallback(
+    (node: HTMLElement | null) => {
+      if (!active) {
+        return
+      }
+
+      if (node === null) {
+        return
+      }
+
+      if (ref.current === node) {
+        return
+      }
+
+      if (node) {
+        // Delay processing the HTML node by a frame. This ensures focus is assigned correctly.
+        setTimeout(() => {
+          if (node.getRootNode()) {
+            focusNode(node)
+          }
+        })
+
+        ref.current = node
+      } else {
+        ref.current = null
+      }
+    },
+    [active, focusNode]
+  )
+
+  useEffect(() => {
+    if (!active) {
+      return undefined
+    }
+
+    ref.current && setTimeout(() => focusNode(ref.current!))
+
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Tab' && ref.current) {
+        scopeTab(ref.current, event)
+      }
+    }
+
+    document.addEventListener('keydown', handleKeyDown)
+    return () => document.removeEventListener('keydown', handleKeyDown)
+  }, [active, focusNode])
+
+  return setRef
+}

package/src/icons/chevron-up-icon.tsx

@@ -0,0 +1,37 @@
+import type React from 'react'
+
+import cx from 'classnames'
+
+import { IconElement } from './icon-element.js'
+import styles from './icons.module.css'
+import type { IconProps } from './types/icon.js'
+
+export const ChevronUpIcon = ({
+  className,
+  svgClassName,
+  ...rest
+}: IconProps): React.JSX.Element => {
+  const applied = cx(styles['fill-current'], svgClassName)
+
+  return (
+    <IconElement className={cx('chevron-up-icon', className)} {...rest}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className={applied}
+        role="presentation"
+        focusable="false"
+        aria-hidden="true"
+        viewBox="0 0 15 15"
+        strokeWidth={2}
+      >
+        <path
+          d="M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z"
+          fillRule="evenodd"
+          clipRule="evenodd"
+        ></path>
+      </svg>
+    </IconElement>
+  )
+}
+
+ChevronUpIcon.displayName = 'ChevronUpIcon'