@economic/taco 2.15.0 → 2.17.0

package/dist/index.css

@@ -705,94 +705,108 @@
 }
 
 /* normal rows */
-[role='row']:not([data-selected='true']):not([data-error='true']) [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true']) [role='cell'] {
         @apply bg-white;
     }
-[role='row']:not([data-selected='true']):not([data-error='true']):hover [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true']):hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
-[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true'] [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
-[role='row']:not([data-selected='true']):not([data-error='true'])[data-current='true']:hover [role='cell'] {
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.100);
         @apply bg-grey-100;
     }
+/* Fields shouldn’t have white background when not in current row and hovered*/
+[role='row']:not([data-selected='true']):not([data-invalid='true'])[data-current='false']:hover [role='cell'] .bg-white {
+            @apply !bg-grey-100;
+        }
 /* normal rows when focus is inside the table */
 [data-taco='table2']:focus-within
-    [role='row'][data-current='true']:not([data-selected='true']):not([data-error='true'])
+    [role='row'][data-current='true']:not([data-selected='true']):not([data-invalid='true'])
     [role='cell'] {
     --table3-row-actions-shadow: theme(colors.grey.200);
     @apply bg-grey-200;
 }
 /* normal rows when hover is paused */
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.white);
         @apply !bg-white;
     }
-[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-error='true']):hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row']:not([data-selected='true']):not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.grey.200);
         @apply !bg-grey-200;
     }
 
 /* selected rows */
-[role='row'][data-selected='true']:not([data-error='true']) [role='cell'] {
+[role='row'][data-selected='true']:not([data-invalid='true']) [role='cell'] {
         @apply bg-blue-100;
     }
-[role='row'][data-selected='true']:not([data-error='true']):hover [role='cell'] {
+[role='row'][data-selected='true']:not([data-invalid='true']):hover [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
-[role='row'][data-selected='true']:not([data-error='true'])[data-current='true']:hover [role='cell'],
+[role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true']:hover [role='cell'],
     
-    [role='row'][data-selected='true']:not([data-error='true'])[data-current='true'] [role='cell'] {
+    [role='row'][data-selected='true']:not([data-invalid='true'])[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #d6e3f6;
         @apply bg-[#D6E3F6];
     }
 /* selected rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-selected='true']:not([data-error='true']) [role='cell'] {
+[data-taco='table2']:focus-within
+    [role='row'][data-current='true'][data-selected='true']:not([data-invalid='true'])
+    [role='cell'] {
     --table3-row-actions-shadow: #ccd8eb;
     @apply bg-[#CCD8EB];
 }
 /* selected rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: theme(colors.blue.100);
         @apply !bg-blue-100;
     }
-[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-error='true']):hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-selected='true']:not([data-invalid='true']):hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: #ccd8eb;
         @apply !bg-[#CCD8EB];
     }
 
 /* error rows */
-[role='row'][data-error='true'] [role='cell'] {
+[role='row'][data-invalid='true'] [role='cell'] {
         @apply bg-[#FFEDE9];
     }
-[role='row'][data-error='true']:hover [role='cell'] {
+[role='row'][data-invalid='true']:hover [role='cell'] {
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
-[role='row'][data-error='true'][data-current='true'] [role='cell'] {
+[role='row'][data-invalid='true'][data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.red.100);
         @apply bg-red-100;
     }
-[role='row'][data-error='true'][data-current='true']:hover [role='cell'] {
+[role='row'][data-invalid='true'][data-current='true']:hover [role='cell'] {
         --table3-row-actions-shadow: #ffe4de;
         @apply bg-[#FFE4DE];
     }
+/* Fields with errors shouldn’t have white background when not in current row */
+[role='row'][data-invalid='true'][data-current='false'] [role='cell'] .bg-white {
+            @apply !bg-[#FFEDE9];
+        }
+/* Request from UX: In error state, input backgroud color should be the same as row background color */
+[role='row'][data-invalid='true'][data-current='false']:hover [role='cell'] .bg-white {
+            @apply !bg-[#FFE4DE];
+        }
 /* error rows when focus is inside the table */
-[data-taco='table2']:focus-within [role='row'][data-current='true'][data-error='true'] [role='cell'] {
+[data-taco='table2']:focus-within [role='row'][data-current='true'][data-invalid='true'] [role='cell'] {
     --table3-row-actions-shadow: theme(colors.red.100);
     @apply bg-red-100;
 }
 /* error rows when hover is paused */
-[data-pause-hover='true'] [role='row'][data-error='true']:hover:not([data-current='true']) [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-invalid='true']:hover:not([data-current='true']) [role='cell'] {
         --table3-row-actions-shadow: #ffede9;
         @apply !bg-[#FFEDE9];
     }
-[data-pause-hover='true'] [role='row'][data-error='true']:hover[data-current='true'] [role='cell'] {
+[data-pause-hover='true'] [role='row'][data-invalid='true']:hover[data-current='true'] [role='cell'] {
         --table3-row-actions-shadow: theme(colors.red.100);
         @apply !bg-red-100;
     }
@@ -806,6 +820,12 @@
     @apply !wcag-blue-500;
 }
 
+/* error row */
+/*!!!!*/
+[data-taco='table2-body'] [role='row'][data-invalid='true'] [role='cell'] {
+    /*@apply !bg-[#FFF5F2];*/
+}
+
 /* cell component overrides */
 
 /* small font size */
@@ -824,7 +844,9 @@
 }
 
 [data-font-size='small'] [role='cell'] [data-taco='badge'],
-[data-font-size='small'] [role='cell'] [data-taco='badge-icon'] {
+[data-font-size='small'] [role='cell'] [data-taco='badge-icon'],
+[data-font-size='small'] [role='cell'] [data-taco='icon'],
+[data-font-size='small'] [role='cell'] [data-taco='spinner'] {
     @apply !-my-0.5 !text-xs;
 }
 
@@ -832,11 +854,21 @@
     @apply !-my-1;
 }
 
-[data-font-size='small'] [role='cell'] [data-taco='input-container'],
-[data-font-size='small'] [role='cell'] [data-taco='Select2'] {
+[data-font-size='small'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='cell'] [data-taco='input-container'] {
     @apply !-my-[3px];
 }
 
+/* from validation */
+[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='small'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='small'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-1;
+    @apply !mb-0;
+}
+/*---*/
+
 [data-font-size='small'] [role='cell'] [data-taco='input'],
 [data-font-size='small'] [role='cell'] [data-taco='Select2'],
 [data-font-size='small'] [role='cell'] [data-taco='textarea'] {
@@ -863,9 +895,18 @@
     @apply !my-0;
 }
 
-[data-font-size='small'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='small'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='small'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_6px)];
+    }
 
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='small'] [role='cell'][data-editable] [data-taco='checkbox-container'],
@@ -893,9 +934,18 @@
     @apply !-my-[5px];
 }
 
-[data-font-size='medium'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='medium'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='medium'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_8px)];
+    }
 
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='medium'] [role='cell'][data-editable] [data-taco='checkbox-container'],
@@ -904,6 +954,14 @@
     @apply !mx-[calc(var(--table3-cell-padding-x)_-_3px)] !mt-px;
 }
 
+[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='medium'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='medium'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-1.5;
+    @apply !mb-0;
+}
+
 /* large font size */
 [data-font-size='large'] [role='cell'] > [data-taco='button'],
 [data-font-size='large'] [role='cell'] > [data-taco='icon-button'] {
@@ -923,6 +981,14 @@
     @apply !-my-[7.5px];
 }
 
+[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='Select2'],
+[data-font-size='large'] [role='row'][data-invalid='true'] [role='cell'] [data-taco='input-container'],
+[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='Select2'],
+[data-font-size='large'] [role='row'] [role='cell'][data-invalid='true'] [data-taco='input-container'] {
+    @apply !-mt-2;
+    @apply !mb-0;
+}
+
 [data-font-size='large'] [role='cell'] [data-taco='input'],
 [data-font-size='large'] [role='cell'] [data-taco='Select2'],
 [data-font-size='large'] [role='cell'] [data-taco='textarea'] {
@@ -937,9 +1003,18 @@
     @apply !h-6 !w-6;
 }
 
-[data-font-size='large'] [role='cell'][data-editable] {
-    @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
-}
+/* When cell is editable, but not highlighted, then we apply cell padding to a cell itself */
+
+[data-font-size='large'] [role='cell'][data-editable]:not([data-highlighted='true']) {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+    }
+
+/* When cell is editable and highlighted, the padding should apply to highlight wrapper, 
+       because it should take all the available space in the cell */
+
+[data-font-size='large'] [role='cell'][data-editable][data-highlighted='true'] [data-taco='highlight'] {
+        @apply px-[calc(var(--table3-cell-padding-x)_-_10px)];
+    }
 
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox'],
 [data-font-size='large'] [role='cell'][data-editable] [data-taco='checkbox-container'],

package/dist/primitives/Table/types.d.ts

@@ -0,0 +1,35 @@
+import { ColumnFilter as ReactTableColumnFilter, ColumnSort as ReactTableColumnSort } from '@tanstack/react-table';
+export declare type TableRef = HTMLDivElement & {
+    instance: {
+        resetFiltering: () => void;
+        resetRowExpansion: () => void;
+        resetRowSelection: () => void;
+        resetSorting: () => void;
+    };
+};
+export declare enum TableFontSizes {
+    small = "small",
+    medium = "medium",
+    large = "large"
+}
+export declare type TableFontSize = keyof typeof TableFontSizes;
+export declare type TableColumnFilter = ReactTableColumnFilter;
+export declare type TableColumnSort = ReactTableColumnSort;
+export declare type TableRowClickHandler<TType = unknown> = (row: TType) => void;
+export declare type TableRowGotoHandler = (column: string, query: string, sorting: TableColumnSort[], filters: TableColumnFilter[], search: string | undefined) => Promise<number>;
+export declare type TableRowHeight = 'short' | 'medium' | 'tall' | 'extra-tall';
+export declare type TableRowSelectHandler<TType = unknown> = (rows: TType[]) => void;
+export declare type TableShortcutHandlerFn<TType = unknown> = (row: TType) => void;
+export declare type TableShortcutHandlerObject<TType = unknown> = {
+    handler: TableShortcutHandlerFn<TType>;
+    meta?: boolean;
+    shift?: boolean;
+};
+export declare type TableFilterHandler = (filters: TableColumnFilter[]) => void;
+export declare type TableScrollToIndexHandler = (index: number, options?: {
+    align: 'start' | 'center' | 'end' | 'auto';
+}) => void;
+export declare type TableServerLoadPageHandler = (pageIndex: number, sorting: TableColumnSort[], filters: TableColumnFilter[], search: string | undefined) => Promise<void>;
+export declare type TableServerLoadAllHandler = (sorting: TableColumnSort[], filters: TableColumnFilter[], search: string | undefined) => Promise<void>;
+export declare type TableShortcuts<TType = unknown> = Record<string, TableShortcutHandlerFn<TType> | TableShortcutHandlerObject<TType>>;
+export declare type TableSortHandler = (sorting: TableColumnSort[]) => void;

package/dist/primitives/Table/useTable/features/useTableColumnOrdering.d.ts

@@ -0,0 +1,3 @@
+export declare function useTableColumnOrdering(isEnabled?: boolean): {
+    isEnabled: boolean;
+};

package/dist/primitives/Table/useTable/features/useTableFontSize.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TableFontSize } from '../../types';
+export declare function useTableFontSize(isEnabled?: boolean, defaultFontSize?: TableFontSize): {
+    isEnabled: boolean;
+    size: "small" | "medium" | "large";
+    setSize: React.Dispatch<React.SetStateAction<"small" | "medium" | "large">>;
+};

package/dist/primitives/Table/useTable/features/useTablePrinting.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+export declare function useTablePrinting(isEnabled: boolean | undefined, defaultIsWarningVisible: boolean | undefined, id: string): {
+    isEnabled: boolean;
+    isPrinting: boolean;
+    isWarningVisibleForLargeDatasets: boolean;
+    setIsWarningVisibleForLargeDatasets: React.Dispatch<React.SetStateAction<boolean>>;
+};

package/dist/primitives/Table/useTable/features/useTableRowActive.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { TableRef, TableScrollToIndexHandler } from '../../types';
+export declare function useTableRowActive(isEnabled?: boolean, initialRowActiveIndex?: number): {
+    isEnabled: boolean;
+    rowActiveIndex: number | undefined;
+    setRowActiveIndex: React.Dispatch<React.SetStateAction<number | undefined>>;
+    isHoverStatePaused: boolean;
+    setHoverStatePaused: React.Dispatch<React.SetStateAction<boolean>>;
+    handleFocus: (event: React.FocusEvent, length: number, scrollToIndex: TableScrollToIndexHandler) => void;
+    handleKeyDown: (event: KeyboardEvent, length: number, scrollToIndex: TableScrollToIndexHandler, tableRef?: React.RefObject<TableRef> | undefined) => void;
+    handleMouseCapture: (event: React.MouseEvent, length: number) => void;
+};

package/dist/primitives/Table/useTable/features/useTableRowClick.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TableRowClickHandler } from '../../types';
+export declare function useTableRowClick<TType = unknown>(isEnabled?: boolean, onRowClick?: TableRowClickHandler<TType>): {
+    isEnabled: boolean;
+    handleClick: (event: React.MouseEvent<HTMLDivElement>, data: TType) => void;
+    handleKeyDown: <TType_1 = unknown>(event: KeyboardEvent, data: TType_1) => void;
+};

package/dist/primitives/Table/useTable/features/useTableRowGoto.d.ts

@@ -0,0 +1,5 @@
+import { TableRowGotoHandler } from '../../types';
+export declare function useTableRowGoto(isEnabled?: boolean, handler?: TableRowGotoHandler): {
+    isEnabled: boolean;
+    handleGoto: TableRowGotoHandler | (() => undefined);
+};

package/dist/primitives/Table/useTable/features/useTableRowHeight.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { TableRowHeight } from '../../types';
+export declare function useTableRowHeight(isEnabled?: boolean, defaultRowHeight?: TableRowHeight): {
+    isEnabled: boolean;
+    height: TableRowHeight;
+    setHeight: React.Dispatch<React.SetStateAction<TableRowHeight>>;
+};

package/dist/primitives/Table/useTable/features/useTableRowSelection.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { Table as ReactTable } from '@tanstack/react-table';
+export declare function useTableRowSelection(isEnabled?: boolean): {
+    handleKeyDown: <TType = unknown>(event: KeyboardEvent, table: ReactTable<TType>) => void;
+    lastSelectedRowIndex: React.MutableRefObject<number | undefined>;
+};

package/dist/primitives/Table/useTable/features/useTableServerLoading.d.ts

@@ -0,0 +1,6 @@
+import { TableServerLoadAllHandler, TableServerLoadPageHandler } from '../../types';
+export declare function useTableServerLoading(loadPage?: TableServerLoadPageHandler, loadAll?: TableServerLoadAllHandler): {
+    isEnabled: boolean;
+    loadPage: TableServerLoadPageHandler | undefined;
+    loadAll: TableServerLoadAllHandler | undefined;
+};

package/dist/primitives/Table/useTable/listeners/useTableDataListener.d.ts

@@ -0,0 +1,2 @@
+import { Table as ReactTable } from '@tanstack/react-table';
+export declare function useTableDataListener<TType = unknown>(table: ReactTable<TType>): void;

package/dist/primitives/Table/useTable/listeners/useTableFilterListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as ReactTable } from '@tanstack/react-table';
+import { TableFilterHandler } from '../../types';
+export declare function useTableFilterListener<TType = unknown>(table: ReactTable<TType>, onFilter?: TableFilterHandler): void;

package/dist/primitives/Table/useTable/listeners/useTableFontSizeListener.d.ts

@@ -0,0 +1,2 @@
+import { Table as ReactTable } from '@tanstack/react-table';
+export declare function useTableFontSizeListener<TType = unknown>(table: ReactTable<TType>): void;

package/dist/primitives/Table/useTable/listeners/useTableRowSelectionListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as ReactTable } from '@tanstack/react-table';
+import { TableRowSelectHandler } from '../../types';
+export declare function useTableRowSelectionListener<TType = unknown>(table: ReactTable<TType>, onRowSelect?: TableRowSelectHandler<TType>): void;

package/dist/primitives/Table/useTable/listeners/useTableServerLoadingListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as ReactTable } from '@tanstack/react-table';
+import { TableServerLoadPageHandler } from '../../types';
+export declare function useTableServerLoadingListener<TType = unknown>(table: ReactTable<TType>, loadPage?: TableServerLoadPageHandler): void;

package/dist/primitives/Table/useTable/listeners/useTableShortcutsListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as ReactTable } from '@tanstack/react-table';
+import { TableShortcuts } from '../../types';
+export declare function useTableShortcutsListener<TType = unknown>(table: ReactTable<TType>, shortcuts: TableShortcuts<TType> | undefined): void;

package/dist/primitives/Table/useTable/listeners/useTableSortingListener.d.ts

@@ -0,0 +1,3 @@
+import { Table as ReactTable } from '@tanstack/react-table';
+import { TableSortHandler } from '../../types';
+export declare function useTableSortingListener<TType = unknown>(table: ReactTable<TType>, onSort?: TableSortHandler): void;

package/dist/primitives/Table/useTable/util/columns.d.ts

@@ -0,0 +1,4 @@
+import { ColumnDef as ReactTableColumnDef } from '@tanstack/react-table';
+import { TableFontSize } from '../../types';
+export declare const getCellMinWidth: (fontSize?: TableFontSize) => 57 | 83 | 72;
+export declare function ensureOrdering<TType = unknown>(columns: ReactTableColumnDef<TType>[], internalColumnsPinnedToTheRight: string[], settingsOrder: string[] | undefined): string[];