@orfium/ictinus 5.43.4 → 5.43.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.43.4",
+  "version": "5.43.6",
   "type": "module",
   "main": "./dist/index.umd.cjs",
   "module": "./dist/index.js",

package/src/components/Controls/CheckBox/__snapshots__/CheckBox.test.tsx.snap

@@ -125,7 +125,7 @@ exports[`Checkbox Component > it renders the Checkbox correctly 1`] = `
         >
           <div>
             <svg
-              class="properties_color_inverted.primary_base__146hxcf23u properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+              class="properties_color_inverted.primary_base__146hxcf27a properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
               data-ictinus="test-version"
               data-testid="test_test_unselected"
               viewBox="0 0 20 20"

package/src/components/DatePicker/OverlayComponent/__snapshots__/OverlayComponent.test.tsx.snap

@@ -603,7 +603,7 @@ exports[`OverlayComponent > should render correctly 1`] = `
                     type="button"
                   >
                     <svg
-                      class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+                      class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
                       data-ictinus="test-version"
                       viewBox="0 0 20 20"
                       xmlns="http://www.w3.org/2000/svg"
@@ -660,7 +660,7 @@ exports[`OverlayComponent > should render correctly 1`] = `
                       type="button"
                     >
                       <svg
-                        class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+                        class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
                         data-ictinus="test-version"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg"
@@ -1945,7 +1945,7 @@ exports[`OverlayComponent > should render datepicker correctly 1`] = `
                     type="button"
                   >
                     <svg
-                      class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+                      class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
                       data-ictinus="test-version"
                       viewBox="0 0 20 20"
                       xmlns="http://www.w3.org/2000/svg"
@@ -2585,7 +2585,7 @@ exports[`OverlayComponent > should render datepicker correctly 1`] = `
                       type="button"
                     >
                       <svg
-                        class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+                        class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
                         data-ictinus="test-version"
                         viewBox="0 0 20 20"
                         xmlns="http://www.w3.org/2000/svg"

package/src/components/DatePicker/OverlayComponent/components/MonthWrapper/__snapshots__/MonthWrapper.test.tsx.snap

@@ -474,7 +474,7 @@ exports[`MonthWrapper > should render correctly 1`] = `
             type="button"
           >
             <svg
-              class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+              class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
               data-ictinus="test-version"
               viewBox="0 0 20 20"
               xmlns="http://www.w3.org/2000/svg"
@@ -531,7 +531,7 @@ exports[`MonthWrapper > should render correctly 1`] = `
               type="button"
             >
               <svg
-                class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+                class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
                 data-ictinus="test-version"
                 viewBox="0 0 20 20"
                 xmlns="http://www.w3.org/2000/svg"

package/src/components/TopAppBar/__snapshots__/TopAppBar.test.tsx.snap

@@ -367,7 +367,7 @@ exports[`TopAppBar > should render correctly 1`] = `
             Tom Cruise
           </span>
           <svg
-            class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+            class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
             data-ictinus="test-version"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"
@@ -751,7 +751,7 @@ exports[`TopAppBar > should render correctly on dark 1`] = `
             Tom Cruise
           </span>
           <svg
-            class="properties_color_active_base__146hxcf23a properties_height_5_base__146hxcf74 properties_width_5_base__146hxcf4c"
+            class="properties_color_active_base__146hxcf26q properties_height_5_base__146hxcf7q properties_width_5_base__146hxcf4e"
             data-ictinus="test-version"
             viewBox="0 0 20 20"
             xmlns="http://www.w3.org/2000/svg"

package/src/data-table/DataTable.tsx

@@ -1,3 +1,4 @@
+import type { Row, RowData } from '@tanstack/react-table';
 import type { Table } from '@tanstack/table-core';
 
 import { forwardRef, useState } from 'react';
@@ -34,3 +35,18 @@ export const DataTable = forwardRef<HTMLDivElement, DataTableProps>(
 );
 
 DataTable.displayName = 'DataTable';
+
+declare module '@tanstack/react-table' {
+  // eslint-disable-next-line @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';
+  }
+
+  interface TableMeta<TData extends RowData> {
+    getCellProps?: (row: Row<TData>) => Omit<BoxProps<'td'>, 'size'>;
+  }
+}

package/src/data-table/DataTableBody.tsx

@@ -1,7 +1,7 @@
-import { flexRender } from '@tanstack/react-table';
+import { flexRender, type Row } from '@tanstack/react-table';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import { assignInlineVars } from '@vanilla-extract/dynamic';
-import { forwardRef, type RefObject, useEffect, useRef } from 'react';
+import { forwardRef, type RefObject, useEffect, useMemo, useRef } from 'react';
 import { useDOMRef } from '~/components/utils/useDOMRef';
 import { cn } from '../utils/cn';
 import { Box, type BoxProps } from '../vanilla/Box';
@@ -9,20 +9,26 @@ import { Table, TableBody, TableCell, TableHeader, TableRow } from '../vanilla/T
 import { useDataTableContext } from './DataTableContext';
 import { DataTableHeaderCell } from './DataTableHeaderCell';
 import { DataTableRow } from './DataTableRow';
+import { fakeRow } from './DataTableRowContext';
 
 import * as styles from './DataTableBody.css';
 
+function isTableRow(row: Row<unknown> | ReturnType<typeof fakeRow>): row is Row<unknown> {
+  return 'original' in row;
+}
+
 export type DataTableBodyProps = BoxProps<
   'div',
   {
     estimatedRowHeight?: number;
     bordered?: boolean;
     size?: 'sm' | 'md' | 'lg';
+    loading?: boolean | Record<string, 'sub-rows' | false>;
   }
 >;
 
-const COL_VIRTUALIZATION_THRESHOLD = 20;
-const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const COL_VIRTUALIZATION_THRESHOLD = 25;
+const ROW_VIRTUALIZATION_THRESHOLD = 25;
 
 export const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(
   (
@@ -31,6 +37,7 @@ export const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(
       estimatedRowHeight = 44,
       bordered = false,
       size = 'sm',
+      loading,
       style,
       ...props
     }: DataTableBodyProps,
@@ -40,7 +47,24 @@ export const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(
 
     const { table } = useDataTableContext();
 
-    const rows = table.getRowModel().rows;
+    const { rows: rawRows } = table.getRowModel();
+    const rows = useMemo(() => {
+      let index = 0;
+
+      return rawRows.reduce<Array<(typeof rawRows)[number] | ReturnType<typeof fakeRow>>>(
+        (result, row) => {
+          result.push(row);
+          index++;
+          if (loading && typeof loading === 'object' && loading[row.id] === 'sub-rows') {
+            result.push(fakeRow(table, index++), fakeRow(table, index++));
+          }
+
+          return result;
+        },
+        []
+      );
+    }, [loading, rawRows, table]);
+
     const previousRowsRef = useRef(rows);
     useEffect(() => {
       previousRowsRef.current = rows;
@@ -163,115 +187,135 @@ export const DataTableBody = forwardRef<HTMLDivElement, DataTableBodyProps>(
                 : undefined
             }
           >
-            {(rowVirtualizer.options.enabled
-              ? virtualRows.length === 0 && rows.length > 0
-                ? previousRowsRef.current.map((row) => ({
-                    row,
-                    virtualRow: undefined,
-                  }))
-                : virtualRows.map((virtualRow) => ({
-                    row: rows[virtualRow.index],
-                    virtualRow,
-                  }))
-              : rows.map((row) => ({ row, virtualRow: undefined }))
-            ).map(({ row, virtualRow }, index) => (
-              <DataTableRow
-                data-index={virtualRow?.index}
-                display="flex"
-                key={row.id}
-                index={virtualRow?.index ?? index}
-                row={row}
-                ref={virtualRow ? rowVirtualizer.measureElement : undefined}
-                style={
-                  virtualRow
-                    ? {
-                        position: 'absolute',
-                        transform: `translateY(${virtualRow.start}px)`,
-                      }
-                    : undefined
-                }
-              >
-                {row.getLeftVisibleCells().map((cell) => (
-                  <TableCell
-                    bordered={bordered}
-                    size={size}
-                    justifyContent={cell.column.columnDef.meta?.align}
-                    key={cell.id}
-                    pinned
-                    style={{
-                      ...assignInlineVars({
-                        [styles.cellOffsetVar]: `${cell.column.getStart('left')}px`,
-                        [styles.cellSizeVar]: `${cell.column.getSize()}`,
-                      }),
-                    }}
-                    className={cn(
-                      styles.cell({
-                        pinned: 'left',
-                        resizable: cell.column.getCanResize(),
-                      })
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
+            {(loading === true
+              ? Array.from({ length: 10 }, (__, rowIndex) => ({
+                  row: fakeRow(table, rowIndex),
+                  virtualRow: undefined,
+                }))
+              : rowVirtualizer.options.enabled
+                ? virtualRows.length === 0 && rows.length > 0
+                  ? previousRowsRef.current.map((row) => ({
+                      row,
+                      virtualRow: undefined,
+                    }))
+                  : virtualRows.map((virtualRow) => ({
+                      row: rows[virtualRow.index],
+                      virtualRow,
+                    }))
+                : rows.map((row) => ({ row, virtualRow: undefined }))
+            ).map(({ row, virtualRow }, index) => {
+              const cellProps = isTableRow(row)
+                ? table.options.meta?.getCellProps?.(row)
+                : undefined;
 
-                {columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && (
-                  <TableCell style={{ width: virtualColumnsOffset }} />
-                )}
+              return (
+                <DataTableRow
+                  data-index={virtualRow?.index}
+                  display="flex"
+                  key={row.id}
+                  index={virtualRow?.index ?? index}
+                  row={row}
+                  ref={virtualRow ? rowVirtualizer.measureElement : undefined}
+                  style={
+                    virtualRow
+                      ? {
+                          position: 'absolute',
+                          transform: `translateY(${virtualRow.start}px)`,
+                        }
+                      : undefined
+                  }
+                >
+                  {row.getLeftVisibleCells().map((cell) => (
+                    <TableCell
+                      bordered={bordered}
+                      size={size}
+                      justifyContent={cell.column.columnDef.meta?.align}
+                      key={cell.id}
+                      pinned
+                      {...cellProps}
+                      style={{
+                        ...assignInlineVars({
+                          [styles.cellOffsetVar]: `${cell.column.getStart('left')}px`,
+                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                        }),
+                        ...cellProps?.style,
+                      }}
+                      className={cn(
+                        styles.cell({
+                          pinned: 'left',
+                          resizable: cell.column.getCanResize(),
+                        }),
+                        cellProps?.className
+                      )}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
 
-                {(columnVirtualizer.options.enabled
-                  ? virtualColumns.map((virtualCell) => {
-                      const cells = row.getCenterVisibleCells();
+                  {columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && (
+                    <TableCell style={{ width: virtualColumnsOffset }} />
+                  )}
 
-                      return cells[virtualCell.index];
-                    })
-                  : row.getCenterVisibleCells()
-                ).map((cell) => (
-                  <TableCell
-                    key={cell.id}
-                    size={size}
-                    bordered={bordered}
-                    justifyContent={cell.column.columnDef.meta?.align}
-                    style={{
-                      ...assignInlineVars({
-                        [styles.cellSizeVar]: `${cell.column.getSize()}`,
-                      }),
-                    }}
-                    className={cn(
-                      styles.cell({
-                        resizable: cell.column.getCanResize(),
-                      })
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
+                  {(columnVirtualizer.options.enabled
+                    ? virtualColumns.map((virtualCell) => {
+                        const cells = row.getCenterVisibleCells();
 
-                {row.getRightVisibleCells().map((cell) => (
-                  <TableCell
-                    key={cell.id}
-                    size={size}
-                    bordered={bordered}
-                    justifyContent={cell.column.columnDef.meta?.align}
-                    pinned
-                    style={{
-                      ...assignInlineVars({
-                        [styles.cellOffsetVar]: `${cell.column.getStart('right')}px`,
-                        [styles.cellSizeVar]: `${cell.column.getSize()}`,
-                      }),
-                    }}
-                    className={cn(
-                      styles.cell({
-                        pinned: 'right',
-                        resizable: cell.column.getCanResize(),
+                        return cells[virtualCell.index];
                       })
-                    )}
-                  >
-                    {flexRender(cell.column.columnDef.cell, cell.getContext())}
-                  </TableCell>
-                ))}
-              </DataTableRow>
-            ))}
+                    : row.getCenterVisibleCells()
+                  ).map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      size={size}
+                      bordered={bordered}
+                      justifyContent={cell.column.columnDef.meta?.align}
+                      {...cellProps}
+                      style={{
+                        ...assignInlineVars({
+                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                        }),
+                        ...cellProps?.style,
+                      }}
+                      className={cn(
+                        styles.cell({
+                          resizable: cell.column.getCanResize(),
+                        }),
+                        cellProps?.className
+                      )}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+
+                  {row.getRightVisibleCells().map((cell) => (
+                    <TableCell
+                      key={cell.id}
+                      size={size}
+                      bordered={bordered}
+                      justifyContent={cell.column.columnDef.meta?.align}
+                      pinned
+                      {...cellProps}
+                      style={{
+                        ...assignInlineVars({
+                          [styles.cellOffsetVar]: `${cell.column.getStart('right')}px`,
+                          [styles.cellSizeVar]: `${cell.column.getSize()}`,
+                        }),
+                        ...cellProps?.style,
+                      }}
+                      className={cn(
+                        styles.cell({
+                          pinned: 'right',
+                          resizable: cell.column.getCanResize(),
+                        }),
+                        cellProps?.className
+                      )}
+                    >
+                      {flexRender(cell.column.columnDef.cell, cell.getContext())}
+                    </TableCell>
+                  ))}
+                </DataTableRow>
+              );
+            })}
           </TableBody>
         </Table>
       </Box>

package/src/data-table/DataTableCounter.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from '../skeleton';
 import { Box, type BoxProps } from '../vanilla/Box';
 import { Text } from '../vanilla/Text';
 import { useDataTableContext } from './DataTableContext';
@@ -6,6 +7,7 @@ export type DataTableCounterProps = BoxProps<
   'div',
   {
     count?: number;
+    loading?: boolean;
     singular?: string;
     plural?: string;
   }
@@ -13,6 +15,7 @@ export type DataTableCounterProps = BoxProps<
 
 export function DataTableCounter({
   count: countProp,
+  loading = false,
   singular = 'item',
   plural = 'items',
   ...props
@@ -28,10 +31,16 @@ export function DataTableCounter({
 
   return (
     <Box display="flex" alignItems="center" gap="sm" {...props}>
-      <Text typography="label02" color="active">
-        {count.toLocaleString()}
-      </Text>
-      <Text typography="label02">{hasSelection ? `${label} selected` : label}</Text>
+      {loading ? (
+        <Skeleton w="20" />
+      ) : (
+        <>
+          <Text typography="label02" color="active">
+            {count.toLocaleString()}
+          </Text>
+          <Text typography="label02">{hasSelection ? `${label} selected` : label}</Text>
+        </>
+      )}
     </Box>
   );
 }

package/src/data-table/DataTableRow.tsx

@@ -1,4 +1,3 @@
-import type { Row } from '@tanstack/table-core';
 import {
   forwardRef,
   type MouseEvent,
@@ -12,9 +11,9 @@ 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';
+import { DataTableRowProvider, type fakeRow } from './DataTableRowContext';
 
-export type DataTableRowProps<TData> = BoxProps<
+export type DataTableRowProps = BoxProps<
   typeof TableRow,
   {
     /**
@@ -24,11 +23,11 @@ export type DataTableRowProps<TData> = BoxProps<
     /**
      * The Row instance to render.
      */
-    row: Row<TData>;
+    row: ReturnType<typeof fakeRow>;
   }
 >;
 
-export const DataTableRow = forwardRef<HTMLTableRowElement, DataTableRowProps<unknown>>(
+export const DataTableRow = forwardRef<HTMLTableRowElement, DataTableRowProps>(
   ({ children, index, row, ...props }, ref: RefObject<HTMLTableRowElement>) => {
     const { highlightedIndex, setHighlightedIndex, table } = useDataTableContext();
 

package/src/data-table/DataTableRowContext.tsx

@@ -1,7 +1,8 @@
-import type { Row } from '@tanstack/table-core';
-import { createContext, useContext, type RefObject } from 'react';
+import type { CellContext, Column, Table } from '@tanstack/table-core';
+import { createContext, createElement, useContext, type RefObject } from 'react';
+import { Skeleton } from '../skeleton';
 
-export type DataTableRowContextValue<TData = unknown> = {
+export type DataTableRowContextValue = {
   actions: Array<RefObject<HTMLDivElement>>;
   focusManaged: boolean | undefined;
   highlightedIndex: number;
@@ -9,7 +10,7 @@ export type DataTableRowContextValue<TData = unknown> = {
   onActionMount:
     | ((params: { primary: boolean | undefined; ref: RefObject<HTMLDivElement> }) => () => void)
     | undefined;
-  row: Row<TData> | undefined;
+  row: ReturnType<typeof fakeRow> | undefined;
   setHighlightedIndex: ((highlightedIndex: number) => void) | undefined;
   setSelector: ((ref: RefObject<HTMLLabelElement> | undefined) => void) | undefined;
 };
@@ -36,3 +37,31 @@ export function useDataTableRowContext() {
 
   return context;
 }
+
+const fakeCellsFactory = (columns: Column<unknown, unknown>[], rowIndex: number) => () =>
+  columns.map((column, columnIndex) => ({
+    column: {
+      ...column,
+      columnDef: {
+        ...column.columnDef,
+        cell: () =>
+          createElement(Skeleton, {
+            w: (['1/2', 'full', '3/4'] as const)[(rowIndex + columnIndex) % 3],
+          }),
+      },
+    } as Column<unknown, unknown>,
+    getContext: () => ({}) as CellContext<unknown, unknown>,
+    id: column.id,
+  }));
+
+export const fakeRow = (table: Table<unknown>, rowIndex: number) => ({
+  getCanMultiSelect: () => false,
+  getCanSelect: () => false,
+  getCenterVisibleCells: fakeCellsFactory(table.getCenterVisibleLeafColumns(), rowIndex),
+  getIsSelected: () => false,
+  getLeftVisibleCells: fakeCellsFactory(table.getLeftVisibleLeafColumns(), rowIndex),
+  getRightVisibleCells: fakeCellsFactory(table.getRightVisibleLeafColumns(), rowIndex),
+  getToggleSelectedHandler: () => (__event: unknown) => {},
+  id: 'loading' + rowIndex,
+  toggleSelected: (__value?: boolean) => {},
+});

package/src/skeleton/Skeleton.css.ts

@@ -0,0 +1,19 @@
+import { recipe } from '@vanilla-extract/recipes';
+import { sprinkles } from '../sprinkles';
+import { style } from '../vanilla-extract';
+
+export const skeleton = recipe({
+  base: [
+    sprinkles({
+      animation: 'pulse',
+      bg: 'alt',
+      color: 'secondary',
+      display: 'block',
+    }),
+    style({
+      selectors: {
+        '&:empty:before': { content: '"\\00a0"' },
+      },
+    }),
+  ],
+});

package/src/skeleton/Skeleton.tsx

@@ -0,0 +1,34 @@
+import { createSlot } from '@radix-ui/react-slot';
+import { forwardRef, type ReactElement } from 'react';
+
+import { cn } from '../utils/cn';
+import { Box, type BoxProps } from '../vanilla/Box';
+import * as styles from './Skeleton.css';
+
+const Slot = createSlot('@orfium/ictinus/Skeleton');
+
+export type SkeletonProps = BoxProps<
+  'span',
+  {
+    children?: ReactElement;
+    circle?: boolean;
+    rounded?: BoxProps['rounded'];
+  }
+>;
+
+export const Skeleton = forwardRef<HTMLSpanElement, SkeletonProps>(
+  ({ asChild = true, children, circle, className, rounded = '2', ...props }, ref) => {
+    return (
+      <Box
+        asChild={asChild}
+        rounded={circle || rounded === '7' ? '7' : rounded}
+        className={cn(styles.skeleton({}), className)}
+        {...props}
+      >
+        <Slot ref={ref}>{children ?? <span />}</Slot>
+      </Box>
+    );
+  }
+);
+
+Skeleton.displayName = 'Skeleton';

package/src/skeleton/index.ts

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