@orfium/ictinus 5.43.5 → 5.43.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@orfium/ictinus",
-  "version": "5.43.5",
+  "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/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,15 +9,21 @@ 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>;
   }
 >;
 
@@ -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,19 +187,26 @@ 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 }))
+            {(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 = table.options.meta?.getCellProps?.(row);
+              const cellProps = isTableRow(row)
+                ? table.options.meta?.getCellProps?.(row)
+                : undefined;
 
               return (
                 <DataTableRow

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';

package/src/sprinkles/properties.css.ts

@@ -1,4 +1,5 @@
 import { breakpoints, vars } from '@orfium/tokens';
+import { keyframes } from '@vanilla-extract/css';
 import { defineProperties } from '@vanilla-extract/sprinkles';
 
 import { layers } from '../layers';
@@ -233,6 +234,16 @@ const typography = {
   } as const,
 } as const;
 
+const animations = {
+  ping: keyframes({
+    '75%, 100%': { opacity: 0, scale: 2 },
+  }),
+  pulse: keyframes({
+    '0%, 100%': { opacity: 1 },
+    '50%': { opacity: 0.5 },
+  }),
+};
+
 export const responsiveProps = defineProperties({
   '@layer': layers.utilities,
   defaultCondition: 'base',
@@ -273,12 +284,78 @@ export const responsiveProps = defineProperties({
       initial: '0 1 auto',
       none: 'none',
     },
-    width: { ...vars.sizing, full: '100%', screen: '100vw' },
-    height: { ...vars.sizing, full: '100%', screen: '100vh' },
-    minWidth: { ...vars.sizing, full: '100%', screen: '100vw' },
-    minHeight: { ...vars.sizing, full: '100%', screen: '100vh' },
-    maxWidth: { ...vars.sizing, full: '100%', screen: '100vw' },
-    maxHeight: { ...vars.sizing, full: '100%', screen: '100vh' },
+    width: {
+      ...vars.sizing,
+      full: '100%',
+      screen: '100vw',
+      '1/2': '50%',
+
+      '1/3': '33.333333%',
+      '2/3': '66.666666%',
+
+      '1/4': '25%',
+      '3/4': '75%',
+    },
+    height: {
+      ...vars.sizing,
+      full: '100%',
+      screen: '100vh',
+      '1/2': '50%',
+
+      '1/3': '33.333333%',
+      '2/3': '66.666666%',
+
+      '1/4': '25%',
+      '3/4': '75%',
+    },
+    minWidth: {
+      ...vars.sizing,
+      full: '100%',
+      screen: '100vw',
+      '1/2': '50%',
+
+      '1/3': '33.333333%',
+      '2/3': '66.666666%',
+
+      '1/4': '25%',
+      '3/4': '75%',
+    },
+    minHeight: {
+      ...vars.sizing,
+      full: '100%',
+      screen: '100vh',
+      '1/2': '50%',
+
+      '1/3': '33.333333%',
+      '2/3': '66.666666%',
+
+      '1/4': '25%',
+      '3/4': '75%',
+    },
+    maxWidth: {
+      ...vars.sizing,
+      full: '100%',
+      screen: '100vw',
+      '1/2': '50%',
+
+      '1/3': '33.333333%',
+      '2/3': '66.666666%',
+
+      '1/4': '25%',
+      '3/4': '75%',
+    },
+    maxHeight: {
+      ...vars.sizing,
+      full: '100%',
+      screen: '100vh',
+      '1/2': '50%',
+
+      '1/3': '33.333333%',
+      '2/3': '66.666666%',
+
+      '1/4': '25%',
+      '3/4': '75%',
+    },
     flexDirection: ['column', 'row', 'column-reverse', 'row-reverse'] as const,
     flexShrink: ['0', '1'] as const,
     position: ['absolute', 'fixed', 'relative', 'sticky'] as const,
@@ -359,6 +436,10 @@ export const unresponsiveProps = defineProperties({
     wordBreak: ['break-all', 'break-word'] as const,
     wordWrap: ['normal', 'break-word'] as const,
     textAlign: ['end', 'start', 'center', 'justify'] as const,
+    animation: {
+      ping: `${animations.ping} 1s cubic-bezier(0, 0, 0.2, 1) infinite`,
+      pulse: `${animations.pulse} 2s ease-in-out infinite`,
+    },
     transitionProperty: {
       none: 'none',
       all: 'all',

package/src/vanilla/index.ts

@@ -1,6 +1,8 @@
 export * from '../data-table';
 export * from '../icon';
 export * from '../icons';
+export * from '../skeleton';
+export * from '../utils/cn';
 export * from './Box';
 export * from './Dialog';
 export * from './Menu';