@orfium/ictinus 5.43.0 → 5.43.2

package/src/data-table/DataTableRow.tsx

@@ -0,0 +1,216 @@
+import type { Row } from '@tanstack/table-core';
+import {
+  forwardRef,
+  type MouseEvent,
+  type RefObject,
+  useCallback,
+  useEffect,
+  useId,
+  useState,
+} from 'react';
+import { useDOMRef } from '../components/utils/useDOMRef';
+import type { BoxProps } from '../vanilla/Box';
+import { TableRow } from '../vanilla/Table';
+import { useDataTableContext } from './DataTableContext';
+import { DataTableRowProvider } from './DataTableRowContext';
+
+export type DataTableRowProps<TData> = BoxProps<
+  typeof TableRow,
+  {
+    /**
+     * The row index.
+     */
+    index: number;
+    /**
+     * The Row instance to render.
+     */
+    row: Row<TData>;
+  }
+>;
+
+export const DataTableRow = forwardRef<HTMLTableRowElement, DataTableRowProps<unknown>>(
+  ({ children, index, row, ...props }, ref: RefObject<HTMLTableRowElement>) => {
+    const { highlightedIndex, setHighlightedIndex, table } = useDataTableContext();
+
+    const [subHighlightedIndex, setSubHighlightedIndex] = useState(-1);
+    const labelId = useId();
+
+    const domRef = useDOMRef(ref);
+
+    useEffect(() => {
+      if (highlightedIndex !== index) {
+        return;
+      }
+
+      if (!domRef.current?.contains(document.activeElement)) {
+        domRef.current?.focus();
+      }
+
+      return () => setSubHighlightedIndex(-1);
+    }, [domRef, highlightedIndex, index]);
+
+    const [actions, setActions] = useState<
+      Array<{
+        primary: boolean | undefined;
+        ref: RefObject<HTMLDivElement>;
+      }>
+    >([]);
+    const primary = actions.find((action) => action.primary);
+    const [selector, setSelector] = useState<RefObject<HTMLLabelElement>>();
+
+    const focusManaged = Boolean(selector || primary);
+
+    const onActionMount = useCallback(
+      ({ primary, ref }: { primary: boolean | undefined; ref: RefObject<HTMLDivElement> }) => {
+        setActions((actions) => [...actions, { primary, ref }]);
+
+        return () => setActions((actions) => actions.filter((action) => action.ref !== ref));
+      },
+      []
+    );
+
+    const handleSetHighlightedIndex = useCallback(
+      (nextIndex: number) => {
+        setSubHighlightedIndex(nextIndex);
+        if (nextIndex === -1) {
+          domRef.current?.focus();
+        }
+      },
+      [domRef]
+    );
+
+    return (
+      <TableRow
+        aria-labelledby={labelId}
+        aria-selected={row.getCanSelect() ? row.getIsSelected() : undefined}
+        data-focus-visible={focusManaged ? '' : undefined}
+        data-selected={row.getIsSelected() ? '' : undefined}
+        onClick={(event) => {
+          if (selector && getAssociatedControl(event) !== selector.current) {
+            row.toggleSelected();
+          }
+        }}
+        onDoubleClick={(event) => {
+          if (
+            !primary ||
+            (event.target instanceof Element && primary.ref.current?.contains(event.target))
+          ) {
+            return;
+          }
+
+          event.preventDefault();
+          document.getSelection()?.empty();
+          primary.ref.current?.click();
+        }}
+        onFocus={(event) => {
+          if (focusManaged) {
+            setHighlightedIndex(index);
+            if (event.target === event.currentTarget) {
+              setSubHighlightedIndex(-1);
+            }
+          }
+        }}
+        onKeyDown={(event) => {
+          if (event.defaultPrevented) {
+            return;
+          }
+
+          if (
+            event.target instanceof HTMLElement &&
+            event.target !== selector?.current &&
+            (event.target.isContentEditable ||
+              ['input', 'select', 'textarea'].includes(event.target.localName))
+          ) {
+            return;
+          }
+
+          const { rows } = table.getRowModel();
+          if (focusManaged && (event.key === 'ArrowDown' || event.key === 'ArrowUp')) {
+            const nextIndex =
+              event.key === 'ArrowDown' ? highlightedIndex + 1 : highlightedIndex - 1;
+            if (nextIndex >= 0 && nextIndex <= rows.length - 1) {
+              event.preventDefault();
+              setHighlightedIndex(nextIndex);
+
+              if (selector) {
+                const nextRow = rows[nextIndex];
+                if (event.shiftKey && row.getCanMultiSelect()) {
+                  table.setRowSelection((selection) =>
+                    selection[nextRow.id]
+                      ? {
+                          ...selection,
+                          [row.id]: false,
+                        }
+                      : {
+                          ...selection,
+                          [nextRow.id]: true,
+                        }
+                  );
+                } else {
+                  table.setRowSelection({
+                    [nextRow.id]: true,
+                  });
+                }
+              }
+            }
+          } else if (
+            focusManaged &&
+            document.activeElement === event.currentTarget &&
+            event.key === 'ArrowRight'
+          ) {
+            const nextIndex = subHighlightedIndex + 1;
+            if (nextIndex <= actions.length - 1) {
+              event.preventDefault();
+              setSubHighlightedIndex(nextIndex);
+            }
+          } else if (event.currentTarget === document.activeElement) {
+            if (event.key === ' ' && selector) {
+              event.preventDefault();
+              row.toggleSelected();
+            } else if (event.key === 'Enter' && primary) {
+              event.preventDefault();
+              primary.ref.current?.click();
+            }
+          }
+        }}
+        ref={domRef}
+        tabIndex={
+          focusManaged
+            ? (highlightedIndex === -1 || highlightedIndex === index) && subHighlightedIndex === -1
+              ? 0
+              : -1
+            : undefined
+        }
+        {...props}
+      >
+        <DataTableRowProvider
+          value={{
+            actions: actions.map(({ ref }) => ref),
+            focusManaged,
+            highlightedIndex: subHighlightedIndex,
+            labelId,
+            onActionMount,
+            row,
+            setHighlightedIndex: handleSetHighlightedIndex,
+            setSelector,
+          }}
+        >
+          {children}
+        </DataTableRowProvider>
+      </TableRow>
+    );
+  }
+);
+
+DataTableRow.displayName = 'DataTableRow';
+
+const getAssociatedControl = (event: MouseEvent) => {
+  if (event.target instanceof Element) {
+    const label = event.target.closest('label');
+    if (label && event.currentTarget.contains(label) && label.control) {
+      return label.control;
+    }
+  }
+
+  return;
+};

package/src/data-table/DataTableRowContext.tsx

@@ -0,0 +1,38 @@
+import type { Row } from '@tanstack/table-core';
+import { createContext, useContext, type RefObject } from 'react';
+
+export type DataTableRowContextValue<TData = unknown> = {
+  actions: Array<RefObject<HTMLDivElement>>;
+  focusManaged: boolean | undefined;
+  highlightedIndex: number;
+  labelId: string | undefined;
+  onActionMount:
+    | ((params: { primary: boolean | undefined; ref: RefObject<HTMLDivElement> }) => () => void)
+    | undefined;
+  row: Row<TData> | undefined;
+  setHighlightedIndex: ((highlightedIndex: number) => void) | undefined;
+  setSelector: ((ref: RefObject<HTMLLabelElement> | undefined) => void) | undefined;
+};
+
+const DataTableRowContext = createContext<DataTableRowContextValue | null>({
+  actions: [],
+  focusManaged: undefined,
+  highlightedIndex: -1,
+  labelId: undefined,
+  onActionMount: undefined,
+  row: undefined,
+  setHighlightedIndex: undefined,
+  setSelector: undefined,
+});
+
+export const DataTableRowProvider = DataTableRowContext.Provider;
+
+export function useDataTableRowContext() {
+  const context = useContext(DataTableRowContext);
+
+  if (!context) {
+    throw new Error('Must be used within DataTableRow');
+  }
+
+  return context;
+}

package/src/data-table/index.ts

@@ -0,0 +1,5 @@
+export * from './DataTable';
+export * from './DataTableBody';
+export * from './DataTableCheckbox';
+export * from './DataTableEditColumns';
+export * from './DataTableHeader';

package/src/data-table/react-table.d.ts

@@ -0,0 +1,12 @@
+import '@tanstack/react-table';
+
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line no-undef, @typescript-eslint/no-unused-vars, unused-imports/no-unused-vars
+  interface ColumnMeta<TData extends RowData, TValue> {
+    align?: 'flex-start' | 'center' | 'flex-end';
+    label?: string;
+    tooltip?: string;
+    // backward compatibility with old v5 table
+    contentAlign?: 'left' | 'center' | 'right';
+  }
+}

package/src/hooks/useBreakpoints.test.ts

@@ -1,4 +1,4 @@
-import { renderHook } from '@testing-library/react-hooks';
+import { renderHook } from '~/test';
 import { useMediaQuery } from 'react-responsive';
 import type { Mock } from 'vitest';
 import { beforeEach, describe, expect, it, vi } from 'vitest';

package/src/index.ts

@@ -161,8 +161,6 @@ export * from './components/Modal/ModalContent';
 export { default as ModalContent } from './components/Modal/ModalContent';
 export * from './components/MultiTextFieldBase';
 export { default as MultiTextFieldBase } from './components/MultiTextFieldBase';
-export * from './components/Navigation';
-export { default as Navigation } from './components/Navigation';
 
 export * from './components/Notification/Banner';
 export { default as Banner } from './components/Notification/Banner';
@@ -241,10 +239,8 @@ export { default as useFieldUtils } from './hooks/useFieldUtils';
 export { default as useIsoMorphicLayoutEffect } from './hooks/useIsoMorphicLayoutEffect';
 export { KEYBOARD_EVENT_KEYS, default as useKeyboardEvents } from './hooks/useKeyboardEvents';
 export { useLoading } from './hooks/useLoading';
-export { default as useLocationToGetCurrentMenuItem } from './hooks/useLocationToGetCurrentMenuItem';
 export { useOverlayStack } from './hooks/useOverlayStack';
 export { default as usePagination } from './hooks/usePagination';
-export { default as useSearchQueryParams } from './hooks/useSearchQueryParams';
 export { default as useTheme } from './hooks/useTheme';
 export { ThemeSwitchProvider, useThemeSwitch } from './hooks/useThemeSwitch';
 export { default as useToggle } from './hooks/useToggle';
@@ -262,7 +258,6 @@ export {
   getColorFromType,
   parseCompositionToken,
 } from '@orfium/tokens';
-export { Function } from './utils/common';
 export { default as dayjs } from './utils/date';
 export { PropsValidationError, ValidationError } from './utils/errors';
 export {
@@ -290,3 +285,4 @@ export {
 
 export * from './layers';
 export * from './sprinkles';
+export { version } from './version';

package/src/sprinkles/properties.css.ts

@@ -245,6 +245,7 @@ export const responsiveProps = defineProperties({
   properties: {
     alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'] as const,
     alignSelf: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'] as const,
+    placeItems: ['center'] as const,
     justifyContent: [
       'flex-start',
       'center',
@@ -331,7 +332,7 @@ export const unresponsiveProps = defineProperties({
   properties: {
     borderColor: borderTokens,
     borderStyle: ['solid', 'dashed'],
-    borderRadius: vars['border-radius'],
+    borderRadius: { ...vars['border-radius'], inherit: 'inherit' },
     borderTopLeftRadius: vars['border-radius'],
     borderTopRightRadius: vars['border-radius'],
     borderBottomLeftRadius: vars['border-radius'],

package/src/test/setup.ts

@@ -2,6 +2,14 @@ import { createSerializer } from '@emotion/jest';
 import '@testing-library/jest-dom/vitest';
 import { expect, vi } from 'vitest';
 
+/**
+ * Mock the version module to return a fixed value in tests.
+ * This prevents snapshot changes when the package version changes.
+ */
+vi.mock('../version', () => ({
+  version: 'test-version',
+}));
+
 expect.addSnapshotSerializer(createSerializer());
 
 global.ResizeObserver = vi.fn().mockImplementation(() => ({

package/src/test/utils.tsx

@@ -1,6 +1,5 @@
 import type { RenderResult } from '@testing-library/react';
-import { render, screen } from '@testing-library/react';
-import { renderHook } from '@testing-library/react-hooks';
+import { render, screen, renderHook } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
 import ThemeProvider from '../components/ThemeProvider';

package/src/utils/common.ts

@@ -1,11 +1,5 @@
 import type * as React from 'react';
 import type { ButtonHTMLAttributes } from 'react';
-import type { NavigationMenuItem } from '~/components/Navigation';
-
-type FunctionProps = {
-  children: () => React.ReactNode;
-};
-export const Function = ({ children }: FunctionProps) => children();
 
 /** A type to turn any type optional properties to required */
 export type RequiredProperties<T> = { [K in keyof T]-?: T[K] };
@@ -40,103 +34,3 @@ export const DEFAULT_USER_MENU = {
   userAvatar: { src: 'https://mui.com/static/images/avatar/1.jpg', letter: 'PV' },
   color: 'darkGrey-600',
 };
-
-export const menuItems: NavigationMenuItem[] = [
-  {
-    name: 'Long Menu Item Name',
-    url: '/menu1',
-    iconName: 'settings',
-    isVisible: true,
-    options: [
-      {
-        name: 'SubMenu1',
-        url: '/submenu1',
-        state: {
-          test: 'hello from state',
-        },
-        isVisible: true,
-        iconName: 'catalog',
-        options: [],
-      },
-      {
-        name: 'SubMenu2',
-        url: '/submenu2',
-        isVisible: true,
-        iconName: 'verified',
-        options: [],
-      },
-      {
-        name: 'SubMenu3',
-        url: '/submenu3',
-        isVisible: true,
-        iconName: 'conflict',
-        options: [],
-      },
-      {
-        name: 'SubMenu4',
-        url: '/submenu4',
-        isVisible: true,
-        iconName: 'bookmark',
-        options: [],
-      },
-    ],
-  },
-  {
-    name: 'Menu2',
-    url: '/menu2',
-    iconName: 'catalog',
-    isVisible: true,
-    options: [
-      {
-        name: 'SubMenu5',
-        url: '/submenu5',
-        isVisible: true,
-        iconName: 'asset',
-        options: [],
-      },
-      {
-        name: 'SubMenu6',
-        url: '/submenu6',
-        isVisible: true,
-        iconName: 'asset',
-        options: [],
-      },
-    ],
-  },
-  {
-    name: 'Menu3',
-    url: '/menu3',
-    iconName: 'bookmark',
-    isVisible: true,
-    options: [
-      {
-        name: 'SubMenu7',
-        url: '/submenu7',
-        isVisible: true,
-        iconName: 'asset',
-        options: [],
-      },
-      {
-        name: 'SubMenu8',
-        url: '/submenu8',
-        isVisible: true,
-        iconName: 'catalog',
-        options: [],
-      },
-      {
-        name: 'SubMenu9',
-        url: '/submenu9',
-        isVisible: true,
-        iconName: 'conflict',
-        options: [],
-      },
-    ],
-  },
-  {
-    name: 'Menu4',
-    url: '/menu4',
-    iconName: 'asset',
-    isVisible: true,
-    options: [],
-  },
-];

package/src/vanilla/Box/Box.tsx

@@ -1,10 +1,10 @@
 import { createSlot } from '@radix-ui/react-slot';
 import { forwardRef, type ComponentPropsWithoutRef, type ElementType } from 'react';
 
-import { version } from '../../../package.json';
 import { sprinkles, type Sprinkles } from '../../sprinkles';
 import { cn } from '../../utils/cn';
 import { type ExtendProps } from '../../utils/ExtendProps';
+import { version } from '../../version';
 import { extractBoxProps } from './extractBoxProps';
 
 const Slot = createSlot('@orfium/ictinus/Box');

package/src/vanilla/Dropdown/Dropdown.css.ts

@@ -0,0 +1,11 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { sprinkles } from '../../sprinkles';
+
+export const separator = recipe({
+  base: [
+    sprinkles({
+      borderT: '1',
+      borderColor: 'decorative.default',
+    }),
+  ],
+});

package/src/vanilla/Dropdown/Dropdown.tsx

@@ -14,6 +14,8 @@ import {
   Separator,
   Text,
 } from 'react-aria-components';
+import { cn } from '../../utils/cn';
+import * as styles from './Dropdown.css';
 
 interface DropdownSectionProps<T> extends SectionProps<T> {
   title?: string;
@@ -59,7 +61,7 @@ const DropdownDescription = ({ className, ref, ...props }: DropdownDescriptionPr
 );
 
 const DropdownSeparator = ({ className, ...props }: SeparatorProps) => (
-  <Separator orientation="horizontal" className={className} {...props} />
+  <Separator orientation="horizontal" className={cn(styles.separator({}), className)} {...props} />
 );
 
 /**

package/src/vanilla/Table/Table.tsx

@@ -1,18 +1,16 @@
 import { forwardRef } from 'react';
 
 import { cn } from '../../utils/cn';
-import { Box, type BoxProps, extractBoxProps } from '../Box';
+import { Box, type BoxProps } from '../Box';
 import * as styles from './Table.css';
 
 export type TableProps = BoxProps<'table', styles.TableVariants>;
 
 export const Table = forwardRef<HTMLDivElement, TableProps>(
   ({ children, className, layout = 'auto', style, ...props }, ref) => {
-    const { boxProps, restProps } = extractBoxProps(props);
-
     return (
-      <Box ref={ref} style={style} className={cn(styles.wrapper({}), className)} {...boxProps}>
-        <Box asChild className={styles.table({ layout })} {...restProps}>
+      <Box ref={ref} style={style} className={cn(styles.wrapper({}), className)} {...props}>
+        <Box asChild className={styles.table({ layout })}>
           <table>{children}</table>
         </Box>
       </Box>

package/src/vanilla/Table/TableCell.css.ts

@@ -8,6 +8,7 @@ export const cell = recipe({
   base: [
     sprinkles({
       borderColor: 'decorative.default',
+      bg: 'default',
     }),
     style({
       textAlign: 'start',

package/src/vanilla/Table/TableCell.tsx

@@ -17,7 +17,6 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
       px = 'lg',
       py = 'md',
       p,
-      bg = 'default',
       size,
       alignItems,
       justifyContent,
@@ -39,7 +38,6 @@ export const TableCell = forwardRef<HTMLTableCellElement, TableCellProps>(
             className={cn(styles.content({ bordered, size }))}
             px={p ?? px}
             py={p ?? py}
-            bg={bg}
             alignItems={alignItems}
             justifyContent={justifyContent}
             textAlign={textAlign}

package/src/vanilla/Table/TableHeaderCell.css.ts

@@ -8,6 +8,8 @@ import * as rowStyles from './TableRow.css';
 const header = headerStyles.className;
 const row = rowStyles.className;
 
+export const className = style({});
+
 export const cell = recipe({
   base: [
     sprinkles({
@@ -16,6 +18,7 @@ export const cell = recipe({
     style({
       textAlign: 'start',
     }),
+    className,
   ],
 
   variants: {
@@ -26,15 +29,6 @@ export const cell = recipe({
       true: style({
         position: 'sticky',
         zIndex: '10',
-
-        selectors: {
-          '&:has(+ :not([data-pinned]))': {
-            borderRightWidth: '1px',
-          },
-          ':not([data-pinned]) + &': {
-            borderLeftWidth: '1px',
-          },
-        },
       }),
     },
   },

package/src/vanilla/Table/TableRow.css.ts

@@ -1,5 +1,6 @@
 import { recipe } from '@vanilla-extract/recipes';
 
+import { vars } from '@orfium/tokens';
 import { sprinkles } from '../../sprinkles';
 import { style } from '../../vanilla-extract';
 
@@ -17,7 +18,15 @@ export const row = recipe({
       selectors: {
         '&[data-focus-visible]:focus-visible': {
           outline: 'none',
-          zIndex: '10',
+          zIndex: '11',
+        },
+        '&[data-focus-visible]:focus-visible::before': {
+          border: `2px solid ${vars.color['border-color'].interactive.active}`,
+          borderRadius: vars['border-radius'][1],
+          content: '',
+          inset: '0',
+          position: 'absolute',
+          zIndex: '11',
         },
       },
     }),

package/src/vanilla/ThemeProvider/ThemeProvider.tsx

@@ -85,7 +85,7 @@ export const ThemeProvider = ({
 
 export const useTheme = () => {
   const context = useContext(ThemeContext);
-  if (!context) throw Error('Must be used within ThemeProvider');
+  if (!context) throw new Error('Must be used within ThemeProvider');
 
   return context;
 };

package/src/vanilla/index.ts

@@ -1,3 +1,4 @@
+export * from '../data-table';
 export * from '../icon';
 export * from '../icons';
 export * from './Box';

package/src/vanilla-extract/global.css.ts

@@ -95,7 +95,7 @@ globalStyle('*', {
       WebkitFontSmoothing: 'antialiased',
       MozOsxFontSmoothing: 'grayscale',
       scrollbarWidth: 'thin',
-      scrollbarColor: `${vars.color.palette.primary.muted} transparent`,
+      scrollbarColor: `${vars.color.palette.secondary.contrast} transparent`,
       border: '0 solid',
     },
   },

package/src/vanilla-extract/index.ts

@@ -1,3 +1,12 @@
 export { style } from './style';
 
+export const getVarName = (variable: string) => {
+  const matches = variable.match(/^var\((.*)\)$/);
+  if (matches) {
+    return matches[1];
+  }
+
+  return variable;
+};
+
 export * from '@vanilla-extract/css';

package/src/version/index.ts

@@ -0,0 +1 @@
+export * from './version';

package/src/version/version.ts

@@ -0,0 +1 @@
+export { version } from '../../package.json';

package/dist/_virtual/AsymmetricMatcher.js

@@ -1,4 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};

package/dist/_virtual/ConvertAnsi.js

@@ -1,4 +0,0 @@
-var r = {};
-export {
-  r as __exports
-};