@orfium/ictinus 5.7.1 → 5.8.0

package/dist/src/components/Table/components/TR/TR.d.ts

@@ -0,0 +1,17 @@
+import { CSSObject } from '@emotion/react';
+import { default as React } from 'react';
+
+export type TRProps = {
+    /** Whether the row is expandable */
+    isExpandable?: boolean;
+    /** Whether the row is expanded */
+    isExpanded?: boolean;
+    /** Whether the row is selected */
+    isSelected?: boolean;
+    /** Whether the row is selectable */
+    isSelectable?: boolean;
+    /** Style overrides */
+    sx?: CSSObject;
+};
+declare const _default: React.NamedExoticComponent<React.PropsWithChildren<TRProps & Pick<Partial<Omit<React.HTMLProps<HTMLDivElement>, "color" | "css" | "size">>, "onClick">>>;
+export default _default;

package/dist/src/components/Table/components/TR/TR.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    title: string;
+    component: import('react').NamedExoticComponent<import('react').PropsWithChildren<import('./TR').TRProps & Pick<Partial<Omit<import('react').HTMLProps<HTMLDivElement>, "color" | "css" | "size">>, "onClick">>>;
+    parameters: {
+        storyshots: {
+            disable: boolean;
+        };
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;

package/dist/src/components/Table/components/TR/TR.style.d.ts

@@ -0,0 +1,5 @@
+import { SerializedStyles } from '@emotion/react';
+import { Theme } from 'theme';
+import { TRProps } from './TR';
+
+export declare const trContainer: ({ isExpandable, isSelected, isExpanded, isSelectable, sx, }: Pick<TRProps, "sx" | "isSelectable" | "isSelected" | "isExpandable" | "isExpanded">) => (theme: Theme) => SerializedStyles;

package/dist/src/components/Table/components/TR/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TR';

package/dist/src/components/Table/components/TTitle/TTitle.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { TableProps } from '../../types';
+import { TestProps } from '../../../../utils/types';
+
+type Props = Pick<TableProps<any>, 'columnsConfig' | 'columns' | 'rowsConfig' | 'type'> & {
+    /** Element that that serves as the positioning boundary of the ColumnChooser Menu */
+    containerRef: React.MutableRefObject<any>;
+    /** Number of rows */
+    rowsCount?: number;
+} & TestProps;
+declare const _default: React.NamedExoticComponent<React.PropsWithChildren<Props>>;
+export default _default;

package/dist/src/components/Table/components/TTitle/TTitle.stories.d.ts

@@ -0,0 +1,16 @@
+declare const _default: {
+    title: string;
+    component: import('react').NamedExoticComponent<import('react').PropsWithChildren<Pick<import('../..').TableProps<any>, "type" | "columns" | "rowsConfig" | "columnsConfig"> & {
+        containerRef: import('react').MutableRefObject<any>;
+        rowsCount?: number;
+    } & import('../../../..').TestProps>>;
+    parameters: {
+        storyshots: {
+            disable: boolean;
+        };
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;

package/dist/src/components/Table/components/TTitle/TTitle.style.d.ts

@@ -0,0 +1,5 @@
+import { SerializedStyles, Theme } from '@emotion/react';
+
+export declare const tTitleContainer: () => (theme: Theme) => SerializedStyles;
+export declare const titleContent: () => (theme: Theme) => SerializedStyles;
+export declare const actionsContent: () => (theme: Theme) => SerializedStyles;

package/dist/src/components/Table/components/TTitle/components/ColumnChooser/ColumnChooser.d.ts

@@ -0,0 +1,11 @@
+import { default as React } from 'react';
+import { TableProps } from '../../../../types';
+import { TestProps } from '../../../../../../utils/types';
+
+type Props = Pick<TableProps<any>, 'columns' | 'columnsConfig'> & {
+    /** Element that that serves as the positioning boundary of the ColumnChooser Menu */
+    containerRef: React.MutableRefObject<any>;
+} & TestProps;
+/** @TODO create a generic Popover component */
+declare const ColumnChooser: React.FC<Props>;
+export default ColumnChooser;

package/dist/src/components/Table/components/TTitle/components/ColumnChooser/ColumnChooser.style.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@emotion/react';
+
+export declare const menuStyle: () => (theme: Theme) => import('@emotion/react').SerializedStyles;

package/dist/src/components/Table/components/TTitle/components/ColumnChooser/index.d.ts

@@ -0,0 +1 @@
+export { default } from './ColumnChooser';

package/dist/src/components/Table/components/TTitle/components/utils.d.ts

@@ -0,0 +1 @@
+export declare const flattenColumns: (columns: any) => any;

package/dist/src/components/Table/components/TTitle/index.d.ts

@@ -0,0 +1 @@
+export { default } from './TTitle';

package/dist/src/components/Table/components/index.d.ts

@@ -0,0 +1,7 @@
+export { default as TBody } from './TBody';
+export { default as THead } from './THead';
+export { default as TH } from './TH';
+export { default as TR } from './TR';
+export { default as TD } from './TD';
+export { default as TTitle } from './TTitle';
+export { default as TPagination } from './TPagination';

package/dist/src/components/Table/constants.d.ts

@@ -0,0 +1,35 @@
+import { SortingState } from '@tanstack/react-table';
+import { TableColumn, TableRow } from './types';
+
+export declare const ACTIONS_CELL_WIDTH = 52;
+export declare const ACTIONS_BAR_HEIGHT = 44;
+export type SimpleData = {
+    firstName: string;
+    lastName: string | undefined;
+    age: number | undefined;
+    job: string | undefined | JSX.Element;
+};
+export declare const contentAlignOptions: string[];
+export declare const simpleColumns: TableColumn<SimpleData>[];
+export declare const groupedColumns: ({
+    id: string;
+    header: string;
+    columns: {
+        id: string;
+        header: string;
+    }[];
+} | {
+    id: string;
+    header: string;
+    columns?: undefined;
+})[];
+export declare const sortDataByKey: (data: any, key: any, order?: string) => any[];
+export declare const sortedData: (data: any, sorting: SortingState) => any;
+export declare const multiSortDataByKey: (data: any, keys: any) => any;
+export declare const simpleData: (isDetailed?: boolean) => TableRow<SimpleData>[];
+export declare const moreData: (isDetailed?: boolean) => TableRow<SimpleData>[];
+export declare const contentAlignToFlex: {
+    left: string;
+    center: string;
+    right: string;
+};

package/dist/src/components/Table/docs/Basics/Basics.stories.d.ts

@@ -0,0 +1,14 @@
+declare const _default: {
+    title: string;
+    component: <TData extends import('../..').NoUndefined<TData>>({ type, rowsConfig, data, columns, rowSize, columnsConfig, sorting, hasStickyHeader, pagination, sx, dataTestPrefixId, }: import('../..').TableProps<TData>) => import("@emotion/react/jsx-runtime").JSX.Element;
+};
+export default _default;
+export declare const BasicExample: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};

package/dist/src/components/Table/docs/Columns/Columns.stories.d.ts

@@ -0,0 +1,63 @@
+import { SimpleData } from '../../constants';
+
+declare const _default: {
+    title: string;
+    component: <TData extends import('../..').NoUndefined<TData>>({ type, rowsConfig, data, columns, rowSize, columnsConfig, sorting, hasStickyHeader, pagination, sx, dataTestPrefixId, }: import('../..').TableProps<TData>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    args: {
+        isMultiSortable: boolean;
+        firstNameWidth: number;
+        lastNameWidth: number;
+        ageWidth: number;
+        jobWidth: number;
+    };
+    argTypes: {
+        isAlwaysVisible: {
+            control: string;
+            options: (keyof SimpleData)[];
+        };
+        firstNameWidth: {
+            name: string;
+            type: string;
+        };
+        lastNameWidth: {
+            name: string;
+            type: string;
+        };
+        ageWidth: {
+            name: string;
+            type: string;
+        };
+        jobWidth: {
+            name: string;
+            type: string;
+        };
+    };
+};
+export default _default;
+export declare const ColumnWidth: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};
+export declare const ColumnChooser: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};
+export declare const Sorting: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};

package/dist/src/components/Table/docs/Header/Header.stories.d.ts

@@ -0,0 +1,22 @@
+declare const _default: {
+    title: string;
+    component: <TData extends import('../../types').NoUndefined<TData>>({ type, rowsConfig, data, columns, rowSize, columnsConfig, sorting, hasStickyHeader, pagination, sx, dataTestPrefixId, }: import('../../types').TableProps<TData>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    args: {
+        maxHeight: number;
+    };
+    argTypes: {
+        maxHeight: {
+            name: string;
+        };
+    };
+};
+export default _default;
+export declare const StickyHeader: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};

package/dist/src/components/Table/docs/Pagination/Pagination.stories.d.ts

@@ -0,0 +1,29 @@
+declare const _default: {
+    title: string;
+    component: <TData extends import('../../types').NoUndefined<TData>>({ type, rowsConfig, data, columns, rowSize, columnsConfig, sorting, hasStickyHeader, pagination, sx, dataTestPrefixId, }: import('../../types').TableProps<TData>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    args: {
+        isNextPageDisabled: boolean;
+        isPrevPageDisabled: boolean;
+        isEnhancedPaginationVisible: boolean;
+        showItemsPerPageCount: boolean;
+        maxHeight: number;
+    };
+    argTypes: {
+        showItemsPerPageCount: {
+            name: string;
+        };
+        maxHeight: {
+            name: string;
+        };
+    };
+};
+export default _default;
+export declare const Pagination: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};

package/dist/src/components/Table/docs/RowsAndCells/RowsAndCells.stories.d.ts

@@ -0,0 +1,73 @@
+declare const _default: {
+    title: string;
+    component: <TData extends import('../..').NoUndefined<TData>>({ type, rowsConfig, data, columns, rowSize, columnsConfig, sorting, hasStickyHeader, pagination, sx, dataTestPrefixId, }: import('../..').TableProps<TData>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    args: {
+        rowSize: string;
+        firstNameAlign: string;
+        lastNameAlign: string;
+        ageAlign: string;
+        jobAlign: string;
+    };
+    argTypes: {
+        rowSize: {
+            name: string;
+        };
+        firstNameAlign: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        lastNameAlign: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        ageAlign: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        jobAlign: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+    };
+};
+export default _default;
+export declare const RowSizes: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};
+export declare const CellContentAlignment: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};
+export declare const RowSelection: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export declare const RowDetails: {
+    render: () => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            disable: boolean;
+        };
+    };
+};

package/dist/src/components/Table/docs/Showcase/Showcase.stories.d.ts

@@ -0,0 +1,86 @@
+declare const _default: {
+    title: string;
+    component: <TData extends import('../..').NoUndefined<TData>>({ type, rowsConfig, data, columns, rowSize, columnsConfig, sorting, hasStickyHeader, pagination, sx, dataTestPrefixId, }: import('../..').TableProps<TData>) => import("@emotion/react/jsx-runtime").JSX.Element;
+    args: {
+        firstNameAlign: string;
+        lastNameAlign: string;
+        ageAlign: string;
+        jobAlign: string;
+        rowSize: string;
+        maxHeight: number;
+    };
+    argTypes: {
+        firstNameAlign: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        lastNameAlign: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        ageAlign: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        jobAlign: {
+            name: string;
+            control: string;
+            options: string[];
+        };
+        rowSize: {
+            name: string;
+        };
+        hasRowSelection: {
+            name: string;
+            type: string;
+        };
+        hasPagination: {
+            name: string;
+            type: string;
+        };
+        hasExpandableRows: {
+            name: string;
+            type: string;
+        };
+        hasColumnChooser: {
+            name: string;
+            type: string;
+        };
+        hasSorting: {
+            name: string;
+            type: string;
+        };
+        maxHeight: {
+            name: string;
+        };
+        firstNameWidth: {
+            name: string;
+            type: string;
+        };
+        lastNameWidth: {
+            name: string;
+            type: string;
+        };
+        ageWidth: {
+            name: string;
+            type: string;
+        };
+        jobWidth: {
+            name: string;
+            type: string;
+        };
+    };
+};
+export default _default;
+export declare const Playground: {
+    render: (args: any) => import("@emotion/react/jsx-runtime").JSX.Element;
+    name: string;
+    parameters: {
+        controls: {
+            include: string[];
+        };
+    };
+};

package/dist/src/components/Table/hooks/index.d.ts

@@ -0,0 +1 @@
+export { default as useTable } from './useTable';

package/dist/src/components/Table/hooks/useTable.d.ts

@@ -0,0 +1,23 @@
+import { Column, HeaderGroup, RowModel } from '@tanstack/react-table';
+
+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>[];
+};
+declare const useTable: <TData>({ type, data, columns, sorting, rowsConfig, columnsConfig, pagination, dataTestPrefixId, ...rest }: {
+    [x: string]: any;
+    type?: string;
+    data: any;
+    columns: any;
+    sorting: any;
+    rowsConfig: any;
+    columnsConfig: any;
+    pagination: any;
+    dataTestPrefixId: any;
+}) => ReturnValue<TData>;
+export default useTable;

package/dist/src/components/Table/hooks/useTable.stories.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+    title: string;
+    component: () => boolean;
+    parameters: {
+        storyshots: {
+            disable: boolean;
+        };
+        controls: {
+            disable: boolean;
+        };
+    };
+};
+export default _default;

package/dist/src/components/Table/index.d.ts

@@ -1,3 +1,6 @@
 export { default } from './Table';
-export * 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/dist/src/components/Table/types.d.ts

@@ -1,18 +1,114 @@
-import { TooltipPlacement } from '../Tooltip/Tooltip.types';
+import { CSSObject } from '@emotion/react';
+import { SortingState, OnChangeFn, RowSelectionState, ExpandedState } from '@tanstack/react-table';
+import { SelectOptionValues } from '../Select';
+import { TestProps } from '../../utils/types';
 
-export type SortingOrder = 'asc' | 'desc';
-export type ExtendedColumn = {
-    content: {
-        label: string;
-        sortingKey: string;
-    };
-    tooltip?: {
-        content: string;
-        placement?: TooltipPlacement;
+export type NoUndefined<T> = {
+    [K in keyof T]-?: Exclude<T[K], undefined>;
+};
+export { SortingState, ExpandedState };
+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: 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?: 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;
+};
+/** Rows & Cells  */
+export type RowsConfig = {
+    /** Whether a rows counter should be displayed, regardless of row selection functionality */
+    hasRowsCount?: boolean;
+    /** State which indicated which rows are selected */
+    rowSelection?: RowSelectionState;
+    /** Callback for row selection state change */
+    setRowSelection?: (state: RowSelectionState) => void;
+    /** Default action for rows */
+    defaultAction?: JSX.Element;
+    /** Bulk actions for rows */
+    bulkActions?: 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?: JSX.Element;
 };
-export type Sort = {
-    column: string;
-    order: SortingOrder;
+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/dist/src/components/Table/utils/TableStoryComponents.d.ts

@@ -1,10 +1,14 @@
 import { default as React } from 'react';
-import { Cell, Row } from '../Table';
-import { ExtendedColumn } from '../types';
+import { TableRow, ColumnsConfig, TableColumn, RowsConfig, PaginationConfig } from '../types';
 
-/** This is just a dummy component to be used in Storybook for showing the Row type on props */
-export declare const RowStory: React.FC<Row<unknown>>;
-/** This is just a dummy component to be used in Storybook for showing the Cell type on props */
-export declare const CellStory: React.FC<Cell<unknown>>;
-/** This is just a dummy component to be used in Storybook for showing the ExtendedColumn type on props */
-export declare const ExtendedColumnStory: React.FC<ExtendedColumn>;
+/** This is just a dummy component to be used in Storybook for showing the ColumnsConfig type on props */
+export declare const ColumnsConfigStory: React.FC<ColumnsConfig<unknown>>;
+/** This is just a dummy component to be used in Storybook for showing the GroupColumn type on props */
+/** This is just a dummy component to be used in Storybook for showing the DisplayColumn type on props */
+export declare const TableColumnStory: React.FC<TableColumn<unknown>>;
+/** This is just a dummy component to be used in Storybook for showing the RowsConfig type on props */
+export declare const RowsConfigStory: React.FC<RowsConfig>;
+/** This is just a dummy component to be used in Storybook for showing the TableRow type on props */
+export declare const TableRowStory: React.FC<TableRow<unknown>>;
+/** This is just a dummy component to be used in Storybook for showing the PaginationConfig type on props */
+export declare const PaginationConfigStory: React.FC<PaginationConfig>;

package/dist/src/components/{Table → TableV4}/TableRowContext.d.ts

@@ -1,4 +1,4 @@
-import { Row, TableType } from './Table';
+import { Row, TableType } from './TableV4';
 import * as React from 'react';
 export type TableRowContextProps<T extends {
     [key: string]: unknown;