@orfium/ictinus 5.43.6 → 5.43.8

package/src/components/Table/hooks/useTable.tsx

@@ -1,243 +0,0 @@
-/* eslint-disable @typescript-eslint/naming-convention */
-import type { Column, HeaderGroup, RowModel } from '@tanstack/react-table';
-import {
-  createColumnHelper,
-  getCoreRowModel,
-  getExpandedRowModel,
-  useReactTable,
-} from '@tanstack/react-table';
-import useTheme from 'hooks/useTheme';
-import { concat } from 'lodash-es';
-import React, { useMemo } from 'react';
-import type { Theme } from 'theme';
-
-import { CheckBox } from 'components/Controls';
-import Icon from 'components/Icon';
-
-import { vars } from '@orfium/tokens';
-import { lineEllipsis } from 'theme/functions';
-import Typography from '~/components/Typography';
-
-type ReturnValue<TData> = {
-  getHeaderGroups: () => HeaderGroup<TData>[];
-  getRowModel: () => RowModel<TData>;
-  getIsAllRowsSelected: () => boolean;
-  getIsSomeRowsSelected: () => boolean;
-  getToggleAllRowsSelectedHandler: () => (event: unknown) => void;
-  toggleAllRowsSelected: (value: boolean) => void;
-  getAllLeafColumns: () => Column<TData, unknown>[];
-  getIsAllPageRowsSelected: () => boolean;
-  getIsSomePageRowsSelected: () => boolean;
-  getToggleAllPageRowsSelectedHandler: () => (event: unknown) => void;
-  toggleAllPageRowsSelected: (value: boolean) => void;
-};
-
-const getColumns = (
-  columns: any[],
-  hasCheckboxes: boolean,
-  hasRowDetails: boolean,
-  theme: Theme,
-  dataTestPrefixId: string
-) => {
-  const columnHelper = createColumnHelper();
-
-  const prefix = hasCheckboxes
-    ? [
-        {
-          id: 'checkbox_select',
-          header: ({ table }) => {
-            return (
-              <CheckBox
-                isSelected={table.getIsAllPageRowsSelected()}
-                isIndeterminate={
-                  table.getIsSomePageRowsSelected() && !table.getIsAllPageRowsSelected()
-                }
-                onChange={() => {
-                  // we cannot use getToggleAllPageRowsSelectedHandler because it will not work with the react-aria checkbox events
-                  const selected = table.getIsAllPageRowsSelected(); // get selected status of current row.
-                  table.toggleAllPageRowsSelected(!selected);
-                }}
-                dataTestPrefixId={`${dataTestPrefixId}_table_select_all`}
-              />
-            );
-          },
-          cell: ({ row }) => {
-            return (
-              <div className="px-1">
-                <CheckBox
-                  isSelected={row.getIsSelected()}
-                  isDisabled={!row.getCanSelect()}
-                  // isIndeterminate={row.getIsSomePageRowsSelected()}
-                  onChange={row.getToggleSelectedHandler()}
-                  dataTestPrefixId={`${dataTestPrefixId}_table_select_${row.id}`}
-                />
-              </div>
-            );
-          },
-          meta: {
-            contentAlign: 'left',
-          },
-        },
-      ]
-    : [];
-
-  const suffix = hasRowDetails
-    ? [
-        {
-          id: 'details_iconButton',
-          header: () => {
-            return <></>;
-          },
-          cell: ({ row }) => {
-            return (
-              <Icon
-                name={row.getIsExpanded() ? 'triangleDown' : 'triangleRight'}
-                size={vars.sizing['5']}
-                color={vars.color.text.default.secondary}
-                onClick={() => {
-                  const isExpanded = row.getIsExpanded();
-                  row.toggleExpanded(!isExpanded);
-                }}
-                dataTestId={`${dataTestPrefixId}_table_expand_${row.id}`}
-              />
-            );
-          },
-          meta: {
-            contentAlign: 'left',
-          },
-        },
-      ]
-    : [];
-
-  const base = columns.reduce((tColumns, column) => {
-    if ('columns' in column) {
-      const groupConfig = {
-        id: column.id,
-        header: column.header,
-        columns: getColumns(column.columns, false, false, theme, dataTestPrefixId),
-      };
-      tColumns.push(columnHelper.group(groupConfig));
-    } else {
-      tColumns.push(
-        columnHelper.accessor(column.id as any, {
-          header: column.header,
-          cell: (info) => {
-            const value = info.getValue();
-
-            if (typeof value === 'string' || typeof value === 'number') {
-              return (
-                <Typography variant="body02" component="span" css={lineEllipsis}>
-                  {value}
-                </Typography>
-              );
-            }
-
-            return value;
-          },
-          size: column.width ?? 'auto',
-          minSize: column.width,
-          enableSorting: column.isSortable ?? false,
-          meta: {
-            contentAlign: column.contentAlign ?? 'left',
-          },
-        })
-      );
-    }
-
-    return tColumns;
-  }, prefix);
-
-  return concat(base, suffix);
-};
-
-const useTable = <TData,>({
-  type = 'read-only',
-  data,
-  columns,
-  sorting,
-  rowsConfig,
-  columnsConfig,
-  dataTestPrefixId,
-  ...rest
-}): ReturnValue<TData> => {
-  const theme = useTheme();
-
-  const isTableInteractive = type === 'interactive';
-
-  const { rowSelection, setRowSelection, expanded, setExpanded } = rowsConfig ?? {};
-
-  const hasRowDetails = data.some((row) => row.details) && Boolean(expanded);
-
-  const tableData = useMemo(() => data.map((data) => data.cells), [data]);
-
-  const hasCheckboxes = Boolean(rowSelection && isTableInteractive);
-
-  const tColumns = useMemo(() => {
-    return getColumns(columns, hasCheckboxes, hasRowDetails, theme, dataTestPrefixId);
-  }, [columns, hasCheckboxes, hasRowDetails, theme, dataTestPrefixId]);
-
-  const state = React.useMemo(() => {
-    return {
-      ...(sorting && { sorting: sorting.sortingColumn }),
-      ...(rowSelection && isTableInteractive && { rowSelection }),
-      ...(columnsConfig && { columnVisibility: columnsConfig.columnVisibility }),
-      ...(expanded && { expanded }),
-    };
-  }, [columnsConfig, expanded, isTableInteractive, rowSelection, sorting]);
-
-  const table = useReactTable<TData>({
-    /** Basic Functionality */
-    data: tableData,
-    columns: tColumns,
-    getCoreRowModel: getCoreRowModel(),
-
-    /** States */
-    state,
-
-    /** States callbacks and extra config */
-
-    /** Sorting */
-    ...(sorting && {
-      manualSorting: true,
-      onSortingChange: sorting.handleSorting,
-      enableMultiSort: sorting.isMultiSortable ?? false,
-    }),
-
-    /** Row Selection */
-    ...(setRowSelection &&
-      isTableInteractive && {
-        enableRowSelection: true,
-        onRowSelectionChange: setRowSelection,
-      }),
-
-    /** Row Details */
-    ...(expanded &&
-      setExpanded && {
-        getExpandedRowModel: getExpandedRowModel(),
-        onExpandedChange: setExpanded,
-      }),
-
-    /** Column Visibility */
-    ...(columnsConfig && {
-      onColumnVisibilityChange: columnsConfig.setColumnVisibility,
-    }),
-
-    ...rest,
-  });
-
-  return {
-    getHeaderGroups: table.getHeaderGroups,
-    getRowModel: table.getRowModel,
-    getIsAllRowsSelected: table.getIsAllRowsSelected,
-    getIsSomeRowsSelected: table.getIsSomeRowsSelected,
-    getToggleAllRowsSelectedHandler: table.getToggleAllRowsSelectedHandler,
-    toggleAllRowsSelected: table.toggleAllRowsSelected,
-    getAllLeafColumns: table.getAllLeafColumns,
-    getIsAllPageRowsSelected: table.getIsAllPageRowsSelected,
-    getIsSomePageRowsSelected: table.getIsSomePageRowsSelected,
-    getToggleAllPageRowsSelectedHandler: table.getToggleAllPageRowsSelectedHandler,
-    toggleAllPageRowsSelected: table.toggleAllPageRowsSelected,
-  };
-};
-
-export default useTable;

package/src/components/Table/index.ts

@@ -1,7 +0,0 @@
-export { default } from './Table';
-export * from './components';
-export * from './hooks';
-export * from './types';
-
-/** This util is necessary to get the new state when using state callbacks. Check documentation for more info */
-export { functionalUpdate as tableFunctionalUpdate } from '@tanstack/react-table';

package/src/components/Table/types.ts

@@ -1,152 +0,0 @@
-import type { CSSObject } from '@emotion/react';
-import type {
-  ExpandedState,
-  OnChangeFn,
-  RowSelectionState,
-  SortingState,
-} from '@tanstack/react-table';
-import type { SelectOptionValues } from 'components/Select';
-import type React from 'react';
-import type { TestProps } from '~/utils/types';
-
-export type NoUndefined<T> = {
-  [K in keyof T]-?: Exclude<T[K], undefined>;
-};
-
-export { ExpandedState, SortingState };
-
-export type TableProps<TData extends NoUndefined<TData>> = {
-  /** If table is interactive, rows are selectable with actions */
-  type?: 'interactive' | 'read-only';
-  /** The Columns configuration of the Table */
-  // Columns Type for Group Headers: columns: (DisplayColumn | GroupColumn)[];
-  columns: TableColumn<TData>[];
-  /** The Data of the Table */
-  data: TableRow<TData>[];
-  /** Size of Row */
-  rowSize?: RowSize;
-  /** Columns Configuration */
-  columnsConfig?: ColumnsConfig<TData>;
-  /** Rows Configuration */
-  rowsConfig?: RowsConfig;
-  /** Sorting Configuration */
-  sorting?: SortingConfig;
-  /** Whether the table has a sticky header and scrollable tbody */
-  hasStickyHeader?: boolean;
-  /** Pagination config */
-  pagination?: PaginationConfig;
-  /** Style overrides for Table component and subcomponents */
-  sx?: {
-    table?: CSSObject;
-    thead?: CSSObject;
-    tbody?: CSSObject;
-    th?: CSSObject;
-    tr?: CSSObject;
-    td?: ((originalRow: TData) => CSSObject) | CSSObject;
-  };
-} & TestProps;
-
-export type UseTableProps<TData extends NoUndefined<TData>> = Pick<
-  TableProps<TData>,
-  'columns' | 'data' | 'sorting' | 'rowsConfig' | 'columnsConfig'
-> &
-  Partial<Omit<TableProps<TData>, 'columns' | 'data'>>;
-
-/** Columns */
-
-export type SortingConfig = {
-  /** The Sorting Column State */
-  sortingColumn: SortingState;
-  /** Callback to change the Sorting Column State */
-  handleSorting: OnChangeFn<SortingState>;
-  /** Whether multi-sorting is enabled */
-  isMultiSortable?: boolean;
-};
-
-export type ColumnsConfig<TData> = {
-  /** State that indicates which columns are visible: an object where every key is a column id and the value is a boolean indicating whether it is visible or not */
-  columnVisibility?: Record<keyof TData, boolean>;
-  /** Callback for visibility state change */
-  setColumnVisibility?: (state: Record<keyof TData, boolean>) => void;
-};
-
-export type ContentAlign = 'left' | 'center' | 'right';
-
-export type TableColumn<TData> = {
-  /** The id of the column; must be the same as the column key in the Data type */
-  id: keyof TData;
-  /** The label of the column on the table */
-  header: string;
-  /** Whether the toggle visibility functionality is disabled for this column */
-  isAlwaysVisible?: boolean;
-  /** Whether the column is sortable */
-  isSortable?: boolean;
-  /** The width of the column (value is percentage number e.g. 25) */
-  width?: number;
-  /** Content align inside the td */
-  contentAlign?: ContentAlign;
-};
-
-// export type GroupColumn<TData> = {
-//   /** The id of the group of columns */
-//   id: keyof TData;
-//   /** The label of the column on the table */
-//   header: string;
-//   /** Sub columns of the group */
-//   columns: (DisplayColumn<TData> | GroupColumn<TData>)[];
-// };
-
-/** Rows & Cells  */
-
-export type RowsConfig = {
-  /** Whether a rows counter should be displayed, regardless of row selection functionality */
-  hasRowsCount?: boolean;
-  /** The number of rows counter that will be displayed. If no number is provided it will default to the number of rows in the table */
-  rowsCount?: number | string;
-  /** Label text to display next to the row count (e.g., "items", "users", "products"). Defaults to "items" if not provided. */
-  rowsCountLabel?: string;
-  /** State which indicated which rows are selected */
-  rowSelection?: RowSelectionState;
-  /** Callback for row selection state change */
-  setRowSelection?: (state: RowSelectionState) => void;
-  /** Default action for rows */
-  defaultAction?: React.JSX.Element;
-  /** Bulk actions for rows */
-  bulkActions?: React.JSX.Element;
-  /** Expanded State */
-  expanded?: ExpandedState;
-  /** Callback for expanded state change */
-  setExpanded?: OnChangeFn<ExpandedState>;
-};
-
-export type TableRow<TData extends NoUndefined<TData>> = {
-  /** The visible cells of the row */
-  cells: TData;
-  /** Details component which is displayed when clicking the arrow button */
-  details?: React.JSX.Element;
-};
-
-export type RowSize = 'sm' | 'md' | 'lg';
-
-/** Pagination */
-
-export type PaginationConfig = {
-  /** The current page displayed */
-  page: number;
-  /** Total pages count */
-  totalPages: number;
-  /** OnChange callback for next/prev buttons */
-  onChange: (page: number) => void;
-  /** Whether go-to-first-page and go-to-last-page buttons are visible */
-  isEnhancedPaginationVisible?: boolean;
-  /** Manually disable next page */
-  isNextPageDisabled?: boolean;
-  /** Manually disable previous page */
-  isPrevPageDisabled?: boolean;
-  /** Show items per page list options */
-  showItemsOptions?: Omit<SelectOptionValues, 'iconProps'>[];
-  /** Show items per page list selected option */
-  showItems?: Omit<SelectOptionValues, 'iconProps'>;
-  /** Show items per page list change callback */
-  onShowItemsChange?: (option: Omit<SelectOptionValues, 'iconProps'>) => void;
-};

package/src/components/Table/utils/TableStoryComponents.tsx

@@ -1,21 +0,0 @@
-import type React from 'react';
-
-import type { TableRow, ColumnsConfig, TableColumn, RowsConfig, PaginationConfig } from '../types';
-
-/** This is just a dummy component to be used in Storybook for showing the ColumnsConfig type on props */
-export const ColumnsConfigStory: React.FC<ColumnsConfig<unknown>> = () => null;
-
-/** This is just a dummy component to be used in Storybook for showing the GroupColumn type on props */
-// export const GroupColumnStory: React.FC<GroupColumn> = () => null;
-
-/** This is just a dummy component to be used in Storybook for showing the DisplayColumn type on props */
-export const TableColumnStory: React.FC<TableColumn<unknown>> = () => null;
-
-/** This is just a dummy component to be used in Storybook for showing the RowsConfig type on props */
-export const RowsConfigStory: React.FC<RowsConfig> = () => null;
-
-/** This is just a dummy component to be used in Storybook for showing the TableRow type on props */
-export const TableRowStory: React.FC<TableRow<unknown>> = () => null;
-
-/** This is just a dummy component to be used in Storybook for showing the PaginationConfig type on props */
-export const PaginationConfigStory: React.FC<PaginationConfig> = () => null;

package/src/components/TableV4/TableRowContext.ts

@@ -1,37 +0,0 @@
-import * as React from 'react';
-
-import type { Row, TableType } from './types';
-
-export type TableRowContextProps<T extends { [key: string]: unknown }> = {
-  row: Row<T>;
-  columnsWithWidth: number[];
-  isPadded: boolean;
-  hasOnSelectionChange: boolean;
-  isRowSelected: boolean;
-  columnCount: number;
-  columns: string[];
-  hasFixedHeader: boolean;
-  tChange: () => void;
-  type: TableType;
-  isBordered: boolean;
-  actionWidth?: number;
-};
-
-export const TableRowContext = React.createContext<
-  TableRowContextProps<{ [key: string]: unknown }>
->({
-  row: {
-    id: 0,
-    cells: [],
-  },
-  columnsWithWidth: [],
-  isPadded: false,
-  hasOnSelectionChange: false,
-  isRowSelected: false,
-  columnCount: 0,
-  columns: [],
-  hasFixedHeader: false,
-  tChange: () => {},
-  type: 'normal',
-  isBordered: false,
-}) as React.Context<TableRowContextProps<{ [key: string]: unknown }>>;

package/src/components/TableV4/TableV4.style.ts

@@ -1,40 +0,0 @@
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
-import { rem, vars } from '@orfium/tokens';
-
-import { getBorderColor } from './utils';
-
-export const tableStyle = () => (): SerializedStyles =>
-  css({ width: '100%', borderCollapse: 'collapse', tableLayout: 'fixed' });
-
-export const tableCTAStyle = (isFixed: boolean): SerializedStyles =>
-  css({
-    width: '100%',
-    borderCollapse: 'collapse',
-    tableLayout: 'fixed',
-    position: isFixed ? 'sticky' : undefined,
-    top: isFixed ? 0 : undefined,
-    background: isFixed ? vars.color.background.default : undefined,
-    zIndex: isFixed ? 3 : undefined,
-  });
-
-export const tableRowHeadersStyle = (
-  hasExpandableRows: boolean,
-  hasOnCheck: boolean,
-  hasFixedHeader: boolean
-): SerializedStyles =>
-  css({
-    paddingTop: vars.spacing['6'],
-    paddingBottom: vars.spacing['6'],
-    borderBottomWidth: rem(hasExpandableRows || hasFixedHeader ? 0 : 1),
-    borderBottomStyle: 'solid',
-    borderBottomColor: getBorderColor(),
-
-    'th:first-of-type': {
-      paddingLeft: hasOnCheck ? undefined : vars.spacing['6'],
-    },
-
-    'th:last-child': {
-      paddingRight: hasExpandableRows ? undefined : vars.spacing['6'],
-    },
-  });