@orfium/ictinus 5.43.3 → 5.43.5

package/dist/vanilla/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import react__default, { ElementType, ComponentPropsWithoutRef, ComponentProps, Ref, ReactNode } from 'react';
+import { RowData, Row } from '@tanstack/react-table';
 import { Table as Table$1 } from '@tanstack/table-core';
 import * as _emotion_react_jsx_runtime from '@emotion/react/jsx-runtime';
 import * as react_aria_components from 'react-aria-components';
@@ -1280,6 +1281,17 @@ declare const DataTable: react.ForwardRefExoticComponent<{
     asChild?: boolean;
     className?: string;
 }>, never> & Omit<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref">, "color" | "className"> & react.RefAttributes<HTMLDivElement>>;
+declare module '@tanstack/react-table' {
+    interface ColumnMeta<TData extends RowData, TValue> {
+        align?: 'flex-start' | 'center' | 'flex-end';
+        label?: string;
+        tooltip?: string;
+        contentAlign?: 'left' | 'center' | 'right';
+    }
+    interface TableMeta<TData extends RowData> {
+        getCellProps?: (row: Row<TData>) => Omit<BoxProps<'td'>, 'size'>;
+    }
+}
 
 type DataTableBodyProps = BoxProps<'div', {
     estimatedRowHeight?: number;

package/dist/vanilla/package.json.js

@@ -1,3 +1,3 @@
-var version = "5.43.3";
+var version = "5.43.5";
 
 export { version };

package/dist/vanilla/src/components/IconButton/IconButton.js

@@ -4,27 +4,36 @@ import ButtonBase from '../ButtonBase/ButtonBase.js';
 import { BUTTON_ICON_COLOR } from '../ButtonBase/constants.js';
 import { Icon } from '../../icon/Icon.js';
 
-const IconButton = React__default.forwardRef((props, ref) => {
-  const { iconName, size = "normal", type = "primary", shape = "circle", dataTestPrefixId } = props;
-  return /* @__PURE__ */ jsx(
+const IconButton = React__default.forwardRef(
+  ({
+    size = "normal",
+    type = "primary",
+    shape = "circle",
+    iconName,
+    iconColor,
+    dataTestPrefixId,
+    ...props
+  }, ref) => /* @__PURE__ */ jsx(
     ButtonBase,
     {
       ...props,
       ref,
       isIconButton: true,
       shape,
+      size,
+      type,
       dataTestPrefixId: dataTestPrefixId ? `${dataTestPrefixId}-icon-` : "icon-",
       children: /* @__PURE__ */ jsx(
         Icon,
         {
           size: size === "compact" ? "sm" : "md",
           name: iconName,
-          color: BUTTON_ICON_COLOR[type]
+          color: iconColor ?? BUTTON_ICON_COLOR[type]
         }
       )
     }
-  );
-});
+  )
+);
 IconButton.displayName = "IconButton";
 
 export { IconButton as default };

package/dist/vanilla/src/data-table/DataTableBody.js

@@ -19,8 +19,8 @@ import { DataTableHeaderCell } from './DataTableHeaderCell.js';
 import { DataTableRow } from './DataTableRow.js';
 import { cell, cellSizeVar, cellOffsetVar, root, totalSizeVar, rightTotalSizeVar, leftTotalSizeVar } from './DataTableBody-css.js';
 
-const COL_VIRTUALIZATION_THRESHOLD = 20;
-const ROW_VIRTUALIZATION_THRESHOLD = 20;
+const COL_VIRTUALIZATION_THRESHOLD = 25;
+const ROW_VIRTUALIZATION_THRESHOLD = 25;
 const DataTableBody = forwardRef(
   ({
     className,
@@ -134,93 +134,105 @@ const DataTableBody = forwardRef(
                   })) : virtualRows.map((virtualRow) => ({
                     row: rows[virtualRow.index],
                     virtualRow
-                  })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => /* @__PURE__ */ jsxs(
-                    DataTableRow,
-                    {
-                      "data-index": virtualRow?.index,
-                      display: "flex",
-                      index: virtualRow?.index ?? index,
-                      row,
-                      ref: virtualRow ? rowVirtualizer.measureElement : void 0,
-                      style: virtualRow ? {
-                        position: "absolute",
-                        transform: `translateY(${virtualRow.start}px)`
-                      } : void 0,
-                      children: [
-                        row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            bordered,
-                            size,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            pinned: true,
-                            style: {
-                              ...assignInlineVars({
-                                [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                  })) : rows.map((row) => ({ row, virtualRow: void 0 }))).map(({ row, virtualRow }, index) => {
+                    const cellProps = table.options.meta?.getCellProps?.(row);
+                    return /* @__PURE__ */ jsxs(
+                      DataTableRow,
+                      {
+                        "data-index": virtualRow?.index,
+                        display: "flex",
+                        index: virtualRow?.index ?? index,
+                        row,
+                        ref: virtualRow ? rowVirtualizer.measureElement : void 0,
+                        style: virtualRow ? {
+                          position: "absolute",
+                          transform: `translateY(${virtualRow.start}px)`
+                        } : void 0,
+                        children: [
+                          row.getLeftVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              bordered,
+                              size,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              pinned: true,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellOffsetVar]: `${cell$1.column.getStart("left")}px`,
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  pinned: "left",
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                pinned: "left",
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        )),
-                        columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
-                        (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
-                          const cells = row.getCenterVisibleCells();
-                          return cells[virtualCell.index];
-                        }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            size,
-                            bordered,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            style: {
-                              ...assignInlineVars({
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                            cell$1.id
+                          )),
+                          columnVirtualizer.options.enabled && virtualColumnsOffset > 0 && /* @__PURE__ */ jsx(TableCell, { style: { width: virtualColumnsOffset } }),
+                          (columnVirtualizer.options.enabled ? virtualColumns.map((virtualCell) => {
+                            const cells = row.getCenterVisibleCells();
+                            return cells[virtualCell.index];
+                          }) : row.getCenterVisibleCells()).map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              size,
+                              bordered,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        )),
-                        row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
-                          TableCell,
-                          {
-                            size,
-                            bordered,
-                            justifyContent: cell$1.column.columnDef.meta?.align,
-                            pinned: true,
-                            style: {
-                              ...assignInlineVars({
-                                [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
-                                [cellSizeVar]: `${cell$1.column.getSize()}`
-                              })
+                            cell$1.id
+                          )),
+                          row.getRightVisibleCells().map((cell$1) => /* @__PURE__ */ jsx(
+                            TableCell,
+                            {
+                              size,
+                              bordered,
+                              justifyContent: cell$1.column.columnDef.meta?.align,
+                              pinned: true,
+                              ...cellProps,
+                              style: {
+                                ...assignInlineVars({
+                                  [cellOffsetVar]: `${cell$1.column.getStart("right")}px`,
+                                  [cellSizeVar]: `${cell$1.column.getSize()}`
+                                }),
+                                ...cellProps?.style
+                              },
+                              className: cn(
+                                cell({
+                                  pinned: "right",
+                                  resizable: cell$1.column.getCanResize()
+                                }),
+                                cellProps?.className
+                              ),
+                              children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
                             },
-                            className: cn(
-                              cell({
-                                pinned: "right",
-                                resizable: cell$1.column.getCanResize()
-                              })
-                            ),
-                            children: flexRender(cell$1.column.columnDef.cell, cell$1.getContext())
-                          },
-                          cell$1.id
-                        ))
-                      ]
-                    },
-                    row.id
-                  ))
+                            cell$1.id
+                          ))
+                        ]
+                      },
+                      row.id
+                    );
+                  })
                 }
               )
             ]

package/package.json

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

package/src/components/Icon/Icon.tsx

@@ -24,6 +24,11 @@ export type IconProps = {
 } & DivProps &
   TestProps;
 
+/**
+ *
+ * @deprecated {@link Icon} has been deprecated; use vanilla Icon instead.
+ *
+ */
 const Icon = React.forwardRef<HTMLDivElement, IconProps>((props, ref) => {
   props = useSlotProps(props, 'icon');
   const {

package/src/components/IconButton/IconButton.tsx

@@ -5,6 +5,7 @@ import type { ButtonBaseProps } from 'components/ButtonBase/ButtonBase';
 import ButtonBase from 'components/ButtonBase/ButtonBase';
 import { BUTTON_ICON_COLOR } from 'components/ButtonBase/constants';
 import { Icon, type IconProps } from '../../icon';
+import { type BoxProps } from '../../vanilla/Box';
 
 export type IconButtonShape = 'circle' | 'square';
 
@@ -14,31 +15,44 @@ export type IconButtonProps = Omit<
 > & {
   /** This property defines the type of the IconButton */
   type?: PrimitiveButtonTypes;
-  /** This property defines witch icon to use */
-  iconName: IconProps['name'];
   /** This property defines the shape of the IconButton */
   shape?: IconButtonShape;
+  /** This property defines witch icon to use */
+  iconName: IconProps['name'];
+  /** Custom icon color */
+  iconColor?: BoxProps['color'];
 };
 
-const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>((props, ref) => {
-  const { iconName, size = 'normal', type = 'primary', shape = 'circle', dataTestPrefixId } = props;
-
-  return (
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      size = 'normal',
+      type = 'primary',
+      shape = 'circle',
+      iconName,
+      iconColor,
+      dataTestPrefixId,
+      ...props
+    },
+    ref
+  ) => (
     <ButtonBase
       {...props}
       ref={ref}
       isIconButton
       shape={shape}
+      size={size}
+      type={type}
       dataTestPrefixId={dataTestPrefixId ? `${dataTestPrefixId}-icon-` : 'icon-'}
     >
       <Icon
         size={size === 'compact' ? 'sm' : 'md'}
         name={iconName}
-        color={BUTTON_ICON_COLOR[type]}
+        color={iconColor ?? BUTTON_ICON_COLOR[type]}
       />
     </ButtonBase>
-  );
-});
+  )
+);
 
 IconButton.displayName = 'IconButton';
 

package/src/components/Menu/Menu.tsx

@@ -30,6 +30,11 @@ export type MenuProps = {
   sx?: { listProps?: { maxHeight?: number; width?: number } };
 } & TestProps;
 
+/**
+ *
+ * @deprecated {@link Menu} has been deprecated; use vanilla Menu instead.
+ *
+ */
 const Menu: React.FC<MenuProps> = ({
   selectionMode = 'single',
   rowSize = 'normal',

package/src/components/Modal/Modal.tsx

@@ -1,4 +1,3 @@
-import { vars } from '@orfium/tokens';
 import Card from 'components/Card';
 import IconButton from 'components/IconButton';
 import useEscape from 'hooks/useEscape';
@@ -72,7 +71,7 @@ const Modal: React.FCC<ModalProps> = ({
               type="tertiary"
               iconName="close"
               onClick={onClose}
-              color={vars.color.text.default.secondary}
+              iconColor="secondary"
               dataTestId="modal-close"
             />
           </div>

package/src/components/Table/components/TPagination/TPagination.tsx

@@ -1,4 +1,3 @@
-import { vars } from '@orfium/tokens';
 import IconButton from 'components/IconButton';
 import Select from 'components/Select';
 import type { TableProps } from 'components/Table/types';
@@ -64,7 +63,6 @@ const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTes
         <div css={buttonsContainer()}>
           {isEnhancedPaginationVisible && (
             <IconButton
-              color={vars.color.text.default.secondary}
               iconName="pageFirst"
               size="compact"
               type="tertiary"
@@ -74,7 +72,6 @@ const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTes
             />
           )}
           <IconButton
-            color={vars.color.text.default.secondary}
             iconName="chevronLeft"
             size="compact"
             type="tertiary"
@@ -83,7 +80,6 @@ const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTes
             dataTestPrefixId={`${dataTestPrefixId}_table_go_to_prev_page`}
           />
           <IconButton
-            color={vars.color.text.default.secondary}
             iconName="chevronRight"
             size="compact"
             type="tertiary"
@@ -93,7 +89,6 @@ const TPagination: React.FC<TPaginationProps> = ({ pagination, isSticky, dataTes
           />
           {isEnhancedPaginationVisible && (
             <IconButton
-              color={vars.color.text.default.secondary}
               iconName="pageLast"
               size="compact"
               type="tertiary"

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