@economic/taco 2.25.1-alpha.13 → 2.26.0

package/dist/index.css

@@ -832,6 +832,10 @@ table[data-taco^='table'][data-table-font-size='small'] td [data-taco='switch-co
 }
 
 /* medium font size */
+table[data-taco^='table'][data-table-font-size='medium'] td > [data-taco='spinner'] {
+    @apply !h-5 !w-5;
+}
+
 table[data-taco^='table'][data-table-font-size='medium'] td > [data-taco='button'],
 table[data-taco^='table'][data-table-font-size='medium'] td > [data-taco='icon-button'] {
     @apply !-my-1.5;
@@ -877,6 +881,10 @@ table[data-taco^='table'][data-table-font-size='medium'] td [data-taco='input-co
 }
 
 /* large font size */
+table[data-taco^='table'][data-table-font-size='large'] td > [data-taco='spinner'] {
+    @apply !h-6 !w-6;
+}
+
 table[data-taco^='table'][data-table-font-size='large'] td > [data-taco='button'],
 table[data-taco^='table'][data-table-font-size='large'] td > [data-taco='icon-button'] {
     @apply !-my-1;

package/dist/packages/taco/src/components/Provider/Localization.d.ts

@@ -157,7 +157,6 @@ export declare const defaultLocalisationTexts: {
                 filter: string;
                 freezeFirstColumn: string;
                 freezeUptoColumn: string;
-                freezeColumns: (count?: number) => string;
                 gotoRow: string;
                 hideColumn: string;
                 unfreezeColumns: string;
@@ -283,21 +282,6 @@ export declare const defaultLocalisationTexts: {
             excludeUnmatchedResults: string;
             placeholder: string;
         };
-        shortcuts: {
-            tooltip: string;
-            search: string;
-            filter: string;
-            previousRow: string;
-            nextRow: string;
-            editCell: string;
-            previousColumn: string;
-            nextColumn: string;
-            rowClick: string;
-            selectRow: string;
-            selectAllRows: string;
-            expandRow: string;
-            collapseRow: string;
-        };
         otherOptions: {
             tooltip: string;
         };
@@ -315,6 +299,12 @@ export declare const defaultLocalisationTexts: {
                     tooltip: string;
                 };
             };
+            clearChangesConfirmationDialog: {
+                title: string;
+                description: string;
+                cancel: string;
+                confirm: string;
+            };
             rowIndicator: {
                 rowWillMove: string;
                 rowWillBeHidden: string;
@@ -326,25 +316,21 @@ export declare const defaultLocalisationTexts: {
                 progress: string;
                 complete: string;
             };
-            clearChangesConfirmationDialog: {
-                title: string;
-                description: string;
-                cancel: string;
-                confirm: string;
-            };
             validation: {
+                alert: {
+                    titleOne: string;
+                    titlePlural: string;
+                    messageOne: string;
+                    messagePlural: string;
+                    messageRow: string;
+                    messageAnd: string;
+                };
                 resetFiltersDialog: {
                     title: string;
                     description: string;
                     cancel: string;
                     confirm: string;
                 };
-                alertTitleOne: string;
-                alertTitlePlural: string;
-                alertMessageOne: string;
-                alertMessagePlural: string;
-                alertMessageRow: string;
-                alertMessageAnd: string;
             };
         };
     };

package/dist/packages/taco/src/components/Select2/hooks/useChildren.d.ts

@@ -1,7 +1,8 @@
 import React from 'react';
 import { Select2OptionProps } from '../components/Option';
+import { Select2GroupProps } from '../Select2';
 import { Select2Children, Select2OptionValue, Select2Value } from '../types';
-export declare const isGroup: (child: React.ReactElement) => boolean;
+export declare const isGroup: (child: React.ReactElement<Select2OptionProps> | React.ReactElement<Select2GroupProps>) => child is React.ReactElement<Select2GroupProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;
 export declare type useChildrenArgs = {
     children: Select2Children;
     emptyValue?: Select2OptionValue;

package/dist/packages/taco/src/components/Table3/__stories__/util.d.ts

@@ -21,3 +21,15 @@ export declare type Account = {
     balance: number;
 };
 export declare const accountsData: Account[];
+export declare type InboxDocument = {
+    date: Date;
+    name: string;
+    sender: string;
+    note: string;
+    amount: number;
+    approved: number;
+    analysed: number;
+    read: boolean;
+    ready: boolean;
+};
+export declare function createFakeInboxData(length: number): InboxDocument[];

package/dist/packages/taco/src/components/Table3/types.d.ts

@@ -19,6 +19,12 @@ export declare type Table3Texts = {
                 tooltip: string;
             };
         };
+        clearChangesConfirmationDialog: {
+            title: string;
+            description: string;
+            cancel: string;
+            confirm: string;
+        };
         rowIndicator: {
             rowWillMove: string;
             rowWillBeHidden: string;
@@ -30,25 +36,21 @@ export declare type Table3Texts = {
             progress: string;
             complete: string;
         };
-        clearChangesConfirmationDialog: {
-            title: string;
-            description: string;
-            cancel: string;
-            confirm: string;
-        };
         validation: {
+            alert: {
+                titleOne: string;
+                titlePlural: string;
+                messageOne: string;
+                messagePlural: string;
+                messageRow: string;
+                messageAnd: string;
+            };
             resetFiltersDialog: {
                 title: string;
                 description: string;
                 cancel: string;
                 confirm: string;
             };
-            alertTitleOne: string;
-            alertTitlePlural: string;
-            alertMessageOne: string;
-            alertMessagePlural: string;
-            alertMessageRow: string;
-            alertMessageAnd: string;
         };
     };
 };

package/dist/packages/taco/src/primitives/Table/Core/components/Toolbar/Toolbar.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useTable } from '../../useTable';
-export declare type TableToolbarProps = React.TableHTMLAttributes<HTMLDivElement> & {
+export declare type TableToolbarProps = React.HTMLAttributes<HTMLDivElement> & {
     children?: JSX.Element | null;
     table: ReturnType<typeof useTable>;
 };

package/dist/packages/taco/src/primitives/Table/Core/components/Toolbar/components/Search/Search.d.ts

@@ -1,8 +1,10 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
+import { TableRef } from '../../../../../types';
 declare type SearchProps<TType = unknown> = {
     scrollToIndex: any;
     table: ReactTable<TType>;
+    tableRef: React.RefObject<TableRef>;
 };
 export declare function Search<TType = unknown>(props: SearchProps<TType>): JSX.Element;
 export {};

package/dist/packages/taco/src/primitives/Table/types.d.ts

@@ -83,7 +83,7 @@ export declare type TableShortcutHandlerObject<TType = unknown> = {
 };
 export declare type TableFilterHandler = (filters: TableColumnFilter[]) => void;
 export declare type TableFontSize = keyof typeof FontSizes;
-export declare type TablePreset = 'lite' | 'complex';
+export declare type TablePreset = 'complex' | 'list' | 'simple';
 export declare type TableRowExpansionRenderer<TType = unknown> = (row: TType) => (() => JSX.Element) | null;
 export declare type TableScrollToIndexHandler = (index: number, options?: {
     align: 'start' | 'center' | 'end' | 'auto';
@@ -147,7 +147,7 @@ export declare type TableFeatureProps = {
     enableRowHeight?: boolean;
     enableSaveSettings?: boolean | Partial<EnableSettingsOptions>;
 };
-declare type TableCommonProps<TType = unknown> = TableFeatureProps & {
+export declare type TableCommonProps<TType = unknown> = TableFeatureProps & {
     children: (JSX.Element | boolean | null | undefined)[];
     data: TType[];
     id: string;

package/dist/taco.cjs.development.js

@@ -4411,7 +4411,6 @@ const defaultLocalisationTexts = {
         filter: 'Filter',
         freezeFirstColumn: 'Freeze the first column',
         freezeUptoColumn: `Freeze first [TOTAL] columns`,
-        freezeColumns: (count = 1) => count === 1 ? 'Freeze the first column' : `Freeze first ${count} columns`,
         gotoRow: 'Go to',
         hideColumn: 'Hide column',
         unfreezeColumns: 'Unfreeze all columns',
@@ -4537,21 +4536,6 @@ const defaultLocalisationTexts = {
       excludeUnmatchedResults: 'Show only search results',
       placeholder: 'Search...'
     },
-    shortcuts: {
-      tooltip: 'View keyboard shortcuts',
-      search: 'Search',
-      filter: 'Filter',
-      previousRow: 'Previous row',
-      nextRow: 'Next row',
-      editCell: 'Edit cell',
-      previousColumn: 'Previous column',
-      nextColumn: 'Next column',
-      rowClick: 'Activate current row',
-      selectRow: 'Select current row',
-      selectAllRows: 'Select all rows',
-      expandRow: 'Expand current row',
-      collapseRow: 'Collapse current row'
-    },
     otherOptions: {
       tooltip: 'Table settings'
     }
@@ -4569,6 +4553,12 @@ const defaultLocalisationTexts = {
           tooltip: 'Edit table'
         }
       },
+      clearChangesConfirmationDialog: {
+        title: 'Discard changes',
+        description: 'Are you sure you want to discard changes? Your changes will be lost.',
+        cancel: 'Continue editing',
+        confirm: 'Discard'
+      },
       rowIndicator: {
         rowWillMove: 'Row will move due to sorting',
         rowWillBeHidden: 'Row will hide due to filtering',
@@ -4580,25 +4570,21 @@ const defaultLocalisationTexts = {
         progress: 'Saving...',
         complete: 'Saved'
       },
-      clearChangesConfirmationDialog: {
-        title: 'Discard changes',
-        description: 'Are you sure you want to discard changes? Your changes will be lost.',
-        cancel: 'Continue editing',
-        confirm: 'Discard'
-      },
       validation: {
+        alert: {
+          titleOne: '[COUNT] unsaved entry: ',
+          titlePlural: '[COUNT] unsaved entries: ',
+          messageOne: "[COLUMN] [ROW] is incomplete and hasn't been saved.",
+          messagePlural: "[COLUMN] [ROW] are incomplete and haven't been saved.",
+          messageRow: 'Row',
+          messageAnd: ' and '
+        },
         resetFiltersDialog: {
           title: 'Row is hidden',
           description: 'The row is hidden due to filtering.',
           cancel: 'Cancel',
           confirm: 'Remove filters'
-        },
-        alertTitleOne: '[COUNT] unsaved entry: ',
-        alertTitlePlural: '[COUNT] unsaved entries: ',
-        alertMessageOne: "[COLUMN] [ROW] is incomplete and hasn't been saved.",
-        alertMessagePlural: "[COLUMN] [ROW] are incomplete and haven't been saved.",
-        alertMessageRow: 'Row',
-        alertMessageAnd: ' and '
+        }
       }
     }
   },
@@ -7905,7 +7891,7 @@ const Trigger$6 = /*#__PURE__*/React.forwardRef(function MenuTrigger(props, ref)
   const internalRef = useMergedRef(ref);
   const preventArrowDownShortcut = event => {
     var _internalRef$current;
-    const isRenderedInTable = !!((_internalRef$current = internalRef.current) !== null && _internalRef$current !== void 0 && _internalRef$current.closest('[data-taco="table-body"]'));
+    const isRenderedInTable = !!((_internalRef$current = internalRef.current) !== null && _internalRef$current !== void 0 && _internalRef$current.closest('tbody'));
     if (isRenderedInTable && event.key === 'ArrowDown') {
       var _internalRef$current2, _internalRef$current3;
       internalRef === null || internalRef === void 0 ? void 0 : (_internalRef$current2 = internalRef.current) === null || _internalRef$current2 === void 0 ? void 0 : (_internalRef$current3 = _internalRef$current2.parentNode) === null || _internalRef$current3 === void 0 ? void 0 : _internalRef$current3.dispatchEvent(createCustomKeyboardEvent(event));
@@ -9823,54 +9809,82 @@ const DEFAULT_PRESET = {
   enableSaveSettings: false
 };
 const presets = {
-  lite: {
+  // View/edit/create on page
+  complex: {
     // react-table built-in
     enableFiltering: true,
     enableSearch: true,
     enableSorting: true,
     enableColumnFreezing: true,
-    enableColumnHiding: false,
+    enableColumnHiding: true,
     enableColumnResizing: true,
     enableRowExpansion: true,
     enableRowSelection: true,
     enableRowSelectionSingle: false,
     // custom -- common between all table types
-    enableColumnOrdering: false,
-    enableFontSize: false,
+    enableColumnOrdering: true,
+    enableFontSize: true,
     enableFooter: true,
-    enablePrinting: false,
+    enablePrinting: true,
     enableRowActive: true,
     enableRowActions: true,
     enableRowClick: true,
     enableRowDrag: true,
     enableRowDrop: true,
     enableRowGoto: true,
-    enableRowHeight: false,
+    enableRowHeight: true,
     enableSaveSettings: true
   },
-  complex: {
+  // View/create in dialog
+  list: {
     // react-table built-in
-    enableFiltering: true,
+    enableFiltering: false,
     enableSearch: true,
     enableSorting: true,
-    enableColumnFreezing: true,
-    enableColumnHiding: true,
-    enableColumnResizing: true,
+    enableColumnFreezing: false,
+    enableColumnHiding: false,
+    enableColumnResizing: false,
     enableRowExpansion: true,
     enableRowSelection: true,
     enableRowSelectionSingle: false,
     // custom -- common between all table types
-    enableColumnOrdering: true,
-    enableFontSize: true,
-    enableFooter: true,
-    enablePrinting: true,
+    enableColumnOrdering: false,
+    enableFontSize: false,
+    enableFooter: false,
+    enablePrinting: false,
     enableRowActive: true,
     enableRowActions: true,
     enableRowClick: true,
-    enableRowDrag: true,
-    enableRowDrop: true,
-    enableRowGoto: true,
-    enableRowHeight: true,
+    enableRowDrag: false,
+    enableRowDrop: false,
+    enableRowGoto: false,
+    enableRowHeight: false,
+    enableSaveSettings: true
+  },
+  // View in card or dialog
+  simple: {
+    // react-table built-in
+    enableFiltering: false,
+    enableSearch: false,
+    enableSorting: true,
+    enableColumnFreezing: false,
+    enableColumnHiding: false,
+    enableColumnResizing: false,
+    enableRowExpansion: true,
+    enableRowSelection: false,
+    enableRowSelectionSingle: false,
+    // custom -- common between all table types
+    enableColumnOrdering: false,
+    enableFontSize: false,
+    enableFooter: false,
+    enablePrinting: false,
+    enableRowActive: true,
+    enableRowActions: false,
+    enableRowClick: true,
+    enableRowDrag: false,
+    enableRowDrop: false,
+    enableRowGoto: false,
+    enableRowHeight: false,
     enableSaveSettings: true
   }
 };
@@ -10108,7 +10122,7 @@ function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
     if (!isEnabled || event.isDefaultPrevented()) {
       return;
     }
-    if (event.target.closest('tbody') || event.target.closest('[data-taco="table2-body"]') || isElementInsideOrTriggeredFromContainer(event.target, event.currentTarget)) {
+    if (event.target.closest('tbody') || isElementInsideOrTriggeredFromContainer(event.target, event.currentTarget)) {
       return;
     }
     if (rowActiveIndex === undefined && length > 0) {
@@ -11512,16 +11526,16 @@ function Cell$1(context) {
   }, /*#__PURE__*/React__default.createElement(Icon, {
     "aria-label": texts.table.columns.drag.tooltip,
     name: "drag",
-    className: "text-grey-darkest invisible -mt-1 ml-[7px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
+    className: "text-grey-darkest invisible -mt-1 ml-[2px] cursor-grab active:cursor-grabbing group-hover/row:visible group-[[aria-grabbed='true']]/row:text-white"
   }));
 }
 const renderer$1 = {
   header: Header$2,
   renderer: Cell$1,
-  size: 15,
+  size: 20,
   meta: {
     align: 'center',
-    className: '!px-0 justify-end',
+    className: '!px-0 !pb-0 justify-end',
     // TODO: remove when table3 is migrated, this satisfies the legacy table3 type
     enableSearch: false,
     header: '',
@@ -12683,7 +12697,6 @@ function Body(props) {
   // this is a browser level bug and there's not much to be done about it
   const handleMouseLeave = React__default.useCallback(() => tableMeta.rowActive.setRowHoverIndex(undefined), []);
   return /*#__PURE__*/React__default.createElement("tbody", Object.assign({}, attributes, {
-    "data-taco": "table-body",
     onKeyDown: handleKeyDown,
     onMouseLeave: handleMouseLeave,
     onMouseMove: handleMouseMove,
@@ -12721,7 +12734,7 @@ function Summary(props) {
   }
   return /*#__PURE__*/React__default.createElement("div", {
     className: "sticky left-0 z-20 flex h-full w-fit items-center whitespace-nowrap bg-white pr-1 shadow-[12px_0px_6px_white]",
-    "data-taco": "table2-footer-summary"
+    "data-taco": "table-footer-summary"
   }, label, "\u00A0", count);
 }
 
@@ -13007,7 +13020,8 @@ function Search$1(props) {
   var _tableMeta$search$hig, _tableMeta$search$hig2;
   const {
     scrollToIndex,
-    table
+    table,
+    tableRef
   } = props;
   const {
     texts
@@ -13070,6 +13084,22 @@ function Search$1(props) {
     checked: !!table.options.enableGlobalFilter,
     onChange: handleToggleExcludeUnmatchedResults
   });
+  const handleKeyDown = event => {
+    if (event.key === 'Escape' && tableMeta.search.currentHighlightColumnIndex !== undefined) {
+      const [rowIndex, cellIndex] = tableMeta.search.highlightedColumnIndexes[tableMeta.search.currentHighlightColumnIndex];
+      if (rowIndex !== undefined && cellIndex !== undefined) {
+        tableMeta.rowActive.setRowActiveIndex(rowIndex);
+        requestAnimationFrame(() => {
+          var _tableRef$current;
+          const cell = (_tableRef$current = tableRef.current) === null || _tableRef$current === void 0 ? void 0 : _tableRef$current.querySelector(`tbody > tr[data-row-index="${rowIndex}"] > td[data-cell-index="${cellIndex}"]`);
+          if (cell) {
+            var _cell$focus;
+            (_cell$focus = cell.focus) === null || _cell$focus === void 0 ? void 0 : _cell$focus.call(cell);
+          }
+        });
+      }
+    }
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(SearchInput2, {
     findCurrent: tableMeta.search.currentHighlightColumnIndex !== undefined ? tableMeta.search.currentHighlightColumnIndex + 1 : null,
     findTotal: (_tableMeta$search$hig = (_tableMeta$search$hig2 = tableMeta.search.highlightedColumnIndexes) === null || _tableMeta$search$hig2 === void 0 ? void 0 : _tableMeta$search$hig2.length) !== null && _tableMeta$search$hig !== void 0 ? _tableMeta$search$hig : null,
@@ -13079,6 +13109,7 @@ function Search$1(props) {
     onClickFindNext: handleNextResult,
     onChange: handleChange,
     onFocus: handleFocus,
+    onKeyDown: handleKeyDown,
     placeholder: texts.table.search.placeholder,
     settingsContent: settings,
     ref: ref,
@@ -14759,7 +14790,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.focus();
     }
   };
-  const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.key) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.key) : child.key).flatMap(c => c) || [];
+  const selectOptions = searchQuery === '' ? flattenedChildren.map(child => child.props.value) : filteredChildren.map(child => isGroup(child) ? Array.isArray(child.props.children) && child.props.children.map(subChild => subChild.props.value) : child.props.value).flatMap(c => c) || [];
   const areAllSelected = Array.isArray(value) && selectOptions.every(option => value.includes(option));
   const selectAllText = React__default.useMemo(() => {
     if (searchQuery === '') {
@@ -15653,7 +15684,7 @@ function TableToolbar(props) {
     className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2 print:hidden",
     "data-taco": "table-toolbar"
   }), table.props.toolbarLeft, /*#__PURE__*/React__default.createElement(Group, {
-    className: "ml-auto flex-shrink-0 print:hidden"
+    className: "ml-auto flex-shrink-0 items-center print:hidden"
   }, customTools, canFilter ? /*#__PURE__*/React__default.createElement(Filters, {
     length: table.meta.length,
     table: table.instance
@@ -15664,10 +15695,11 @@ function TableToolbar(props) {
   }) : null, canSettings ? /*#__PURE__*/React__default.createElement(Settings$1, {
     customSettings: table.props.customSettings,
     table: table.instance
-  }) : null, canSearch ? /*#__PURE__*/React__default.createElement(Search$1, {
+  }) : null, canSearch ? ( /*#__PURE__*/React__default.createElement(Search$1, {
     scrollToIndex: table.renderer.scrollToIndex,
-    table: table.instance
-  }) : null)), table.props.toolbarPanel ? /*#__PURE__*/React__default.createElement("div", {
+    table: table.instance,
+    tableRef: table.ref
+  })) : null)), table.props.toolbarPanel ? /*#__PURE__*/React__default.createElement("div", {
     className: "mb-4"
   }, table.props.toolbarPanel) : undefined);
 }
@@ -18308,14 +18340,14 @@ function Alert$1(props) {
     });
   }
   // generate the "N unsaved entries" title
-  const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alertTitleOne : validationTexts.alertTitlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
+  const title = (pendingChangesWithErrors.length === 1 ? validationTexts.alert.titleOne : validationTexts.alert.titlePlural).replace('[COUNT]', String(pendingChangesWithErrors.length));
   // generate links to each invalid row, to go into the error message
   const links = [];
   const rowIdentityColumn = tableMeta.rowIdentityColumnId ? table.getColumn(tableMeta.rowIdentityColumnId) : undefined;
   pendingChangesWithErrors.forEach((error, index) => {
     // if appropriate, concatenate the item with the text "and"
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
-      links.push(validationTexts.alertMessageAnd);
+      links.push(validationTexts.alert.messageAnd);
     }
     const handleClick = () => {
       const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
@@ -18348,10 +18380,10 @@ function Alert$1(props) {
     }
   });
   // generate the "Row N is incomplete and hasn't been saved" error message
-  const message = (links.length === 1 ? validationTexts.alertMessageOne : validationTexts.alertMessagePlural).split(/(\[\w+\])/).map(part => {
+  const message = (links.length === 1 ? validationTexts.alert.messageOne : validationTexts.alert.messagePlural).split(/(\[\w+\])/).map(part => {
     if (part === '[COLUMN]') {
       var _rowIdentityColumn$co, _rowIdentityColumn$co2;
-      return (_rowIdentityColumn$co = rowIdentityColumn === null || rowIdentityColumn === void 0 ? void 0 : (_rowIdentityColumn$co2 = rowIdentityColumn.columnDef.meta) === null || _rowIdentityColumn$co2 === void 0 ? void 0 : _rowIdentityColumn$co2.header) !== null && _rowIdentityColumn$co !== void 0 ? _rowIdentityColumn$co : validationTexts.alertMessageRow;
+      return (_rowIdentityColumn$co = rowIdentityColumn === null || rowIdentityColumn === void 0 ? void 0 : (_rowIdentityColumn$co2 = rowIdentityColumn.columnDef.meta) === null || _rowIdentityColumn$co2 === void 0 ? void 0 : _rowIdentityColumn$co2.header) !== null && _rowIdentityColumn$co !== void 0 ? _rowIdentityColumn$co : validationTexts.alert.messageRow;
     }
     if (part === '[ROW]') {
       return links;