@economic/taco 2.1.2 → 2.2.0

package/dist/taco.cjs.development.js

@@ -3710,21 +3710,21 @@ const useMergedRef = ref => {
 const WHITELISTED_ELEMENTS = ['INPUT', 'TEXTAREA', 'SELECT'];
 function createShortcutKeyDownHandler(key, handler) {
   return function (event) {
-    let condition = false;
+    const keyOptions = typeof key === 'string' ? {
+      key,
+      meta: false,
+      shift: false
+    } : key;
     if (event.target !== event.currentTarget && WHITELISTED_ELEMENTS.includes(event.target.tagName)) {
       return;
     }
-    if (typeof key === 'string') {
-      condition = event.key.toLowerCase() === key.toLowerCase();
-    } else {
-      if (key.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !key.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
-        return;
-      }
-      if (key.shift && !event.shiftKey || key.shift === false && event.shiftKey) {
-        return;
-      }
-      condition = event.key.toLowerCase() === key.key.toLowerCase();
+    if (keyOptions.meta && (isMacOs() ? !event.metaKey : !event.ctrlKey) || !keyOptions.meta && (isMacOs() ? event.metaKey : event.ctrlKey)) {
+      return;
     }
+    if (keyOptions.shift && !event.shiftKey || keyOptions.shift === false && event.shiftKey) {
+      return;
+    }
+    const condition = event.key.toLowerCase() === keyOptions.key.toLowerCase();
     if (condition) {
       var _event$stopImmediateP;
       // stops react handlers bubbling up to global
@@ -4210,7 +4210,14 @@ const defaultLocalisationTexts = {
     print: {
       error: 'An error occurred while creating a print preview',
       loading: 'Creating a print preview',
-      tooltip: 'Print'
+      tooltip: 'Print',
+      warningDialog: {
+        title: 'Extra loading time',
+        description: 'Please note that printing a large amount of data may result in a slightly longer waiting time due to data loading.',
+        checkboxVisibilityLabel: "Don't show again",
+        cancelButtonText: 'Cancel',
+        printButtonText: 'Print'
+      }
     },
     rowHeight: {
       tooltip: 'Row height',
@@ -8956,7 +8963,9 @@ const SearchInput2 = /*#__PURE__*/React__default.forwardRef(function SearchInput
       setFocused(false);
     };
     return /*#__PURE__*/React__default.createElement("div", {
-      className: "relative [&_[data-taco='input-container']]:z-20",
+      className: cn('relative', {
+        "[&_[data-taco='input-container']]:z-20": focused
+      }),
       onBlur: handleSettingsBlur,
       ref: settingsRef
     }, input, focused ? /*#__PURE__*/React__default.createElement("div", {
@@ -16562,12 +16571,13 @@ function useSettingsStateListener$1(table, onChangeSettings) {
         columnVisibility: state.columnVisibility,
         excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,
         fontSize: meta.fontSize.size,
+        showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
         rowHeight: meta.rowHeight.height,
         sorting: state.sorting
       }), 250);
     }
     return () => clearTimeout(handler);
-  }, [onChangeSettings, meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, state.sorting]);
+  }, [onChangeSettings, meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
 }
 
 var Table3FilterComparator;
@@ -18010,10 +18020,13 @@ function useConvertChildrenToColumns(props, options, editing) {
   };
 }
 
-function usePrinting(isEnabled, loadAll) {
+function usePrinting(isEnabled, loadAll, showWarningWhenPrintingLargeDataset = true) {
+  const [printWarningDialogVisibility, setPrintWarningDialogVisibility] = React__default.useState(showWarningWhenPrintingLargeDataset);
   return {
     isEnabled,
-    loadAll
+    loadAll,
+    printWarningDialogVisibility,
+    setPrintWarningDialogVisibility: isEnabled ? setPrintWarningDialogVisibility : () => undefined
   };
 }
 
@@ -18124,7 +18137,7 @@ function useSearch(isEnabled, excludeUnmatchedResultsInSearch = false, loadAll)
 }
 
 function useTable$2(props) {
-  var _ref, _props$defaultSetting, _props$defaultSetting2, _props$defaultSetting3, _props$defaultSetting4, _props$defaultSetting5, _props$defaultSetting6, _props$defaultSetting7, _props$defaultSetting8, _props$length;
+  var _ref, _props$defaultSetting, _props$defaultSetting2, _props$defaultSetting3, _props$defaultSetting4, _props$defaultSetting5, _props$defaultSetting6, _props$defaultSetting7, _props$defaultSetting8, _props$defaultSetting9, _props$length;
   // options
   const options = useTablePreset(props);
   const tableOptions = {
@@ -18180,15 +18193,15 @@ function useTable$2(props) {
   const editing = useEditing(options.enableEditing, props.onSave);
   const fontSize = useFontSize(options.enableFontSize, (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.fontSize);
   const hoverState = usePauseHoverState();
-  const printing = usePrinting(options.enablePrinting, props.loadAll);
+  const printing = usePrinting(options.enablePrinting, props.loadAll, (_props$defaultSetting5 = props.defaultSettings) === null || _props$defaultSetting5 === void 0 ? void 0 : _props$defaultSetting5.showWarningWhenPrintingLargeDataset);
   const rowClick = useRowClick(props.onRowClick);
   const rowDrag = useRowDrag(options.enableRowDrag);
   const rowDrop = useRowDrop(options.enableRowDrop, props.onRowDrop);
   const rowGoto = useRowGoto(options.enableRowGoto, props.onRowGoto);
   const rowHeight = useRowHeight(options.enableRowHeight, // temporarily see if deprecated rowDensity is there
-  (_props$defaultSetting5 = (_props$defaultSetting6 = props.defaultSettings) === null || _props$defaultSetting6 === void 0 ? void 0 : _props$defaultSetting6.rowHeight) !== null && _props$defaultSetting5 !== void 0 ? _props$defaultSetting5 : (_props$defaultSetting7 = props.defaultSettings) === null || _props$defaultSetting7 === void 0 ? void 0 : _props$defaultSetting7.rowDensity);
+  (_props$defaultSetting6 = (_props$defaultSetting7 = props.defaultSettings) === null || _props$defaultSetting7 === void 0 ? void 0 : _props$defaultSetting7.rowHeight) !== null && _props$defaultSetting6 !== void 0 ? _props$defaultSetting6 : (_props$defaultSetting8 = props.defaultSettings) === null || _props$defaultSetting8 === void 0 ? void 0 : _props$defaultSetting8.rowDensity);
   const rowSelection = useRowSelection();
-  const search = useSearch(options.enableSearch, (_props$defaultSetting8 = props.defaultSettings) === null || _props$defaultSetting8 === void 0 ? void 0 : _props$defaultSetting8.excludeUnmatchedRecordsInSearch, props.loadAll);
+  const search = useSearch(options.enableSearch, (_props$defaultSetting9 = props.defaultSettings) === null || _props$defaultSetting9 === void 0 ? void 0 : _props$defaultSetting9.excludeUnmatchedRecordsInSearch, props.loadAll);
   // columns
   const {
     columns,
@@ -18198,13 +18211,13 @@ function useTable$2(props) {
   } = useConvertChildrenToColumns(props, options, editing);
   // built-in features
   const initialState = React__default.useMemo(() => {
-    var _props$defaultSetting9, _props$defaultSetting10, _props$defaultSetting11, _props$defaultSetting12, _props$defaultSetting13, _props$defaultSetting14, _props$defaultSetting15;
+    var _props$defaultSetting10, _props$defaultSetting11, _props$defaultSetting12, _props$defaultSetting13, _props$defaultSetting14, _props$defaultSetting15, _props$defaultSetting16;
     const sanitizeSortedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
     return {
-      columnOrder: ensureOrdering$1(columns, (_props$defaultSetting9 = props.defaultSettings) === null || _props$defaultSetting9 === void 0 ? void 0 : _props$defaultSetting9.columnOrder),
-      columnSizing: (_props$defaultSetting10 = (_props$defaultSetting11 = props.defaultSettings) === null || _props$defaultSetting11 === void 0 ? void 0 : _props$defaultSetting11.columnSizing) !== null && _props$defaultSetting10 !== void 0 ? _props$defaultSetting10 : defaultColumnSizing,
-      columnVisibility: (_props$defaultSetting12 = (_props$defaultSetting13 = props.defaultSettings) === null || _props$defaultSetting13 === void 0 ? void 0 : _props$defaultSetting13.columnVisibility) !== null && _props$defaultSetting12 !== void 0 ? _props$defaultSetting12 : defaultColumnVisibility,
-      sorting: (_props$defaultSetting14 = props.defaultSettings) !== null && _props$defaultSetting14 !== void 0 && _props$defaultSetting14.sorting ? (_props$defaultSetting15 = props.defaultSettings) === null || _props$defaultSetting15 === void 0 ? void 0 : _props$defaultSetting15.sorting.filter(sanitizeSortedColumns) : defaultSorting
+      columnOrder: ensureOrdering$1(columns, (_props$defaultSetting10 = props.defaultSettings) === null || _props$defaultSetting10 === void 0 ? void 0 : _props$defaultSetting10.columnOrder),
+      columnSizing: (_props$defaultSetting11 = (_props$defaultSetting12 = props.defaultSettings) === null || _props$defaultSetting12 === void 0 ? void 0 : _props$defaultSetting12.columnSizing) !== null && _props$defaultSetting11 !== void 0 ? _props$defaultSetting11 : defaultColumnSizing,
+      columnVisibility: (_props$defaultSetting13 = (_props$defaultSetting14 = props.defaultSettings) === null || _props$defaultSetting14 === void 0 ? void 0 : _props$defaultSetting14.columnVisibility) !== null && _props$defaultSetting13 !== void 0 ? _props$defaultSetting13 : defaultColumnVisibility,
+      sorting: (_props$defaultSetting15 = props.defaultSettings) !== null && _props$defaultSetting15 !== void 0 && _props$defaultSetting15.sorting ? (_props$defaultSetting16 = props.defaultSettings) === null || _props$defaultSetting16 === void 0 ? void 0 : _props$defaultSetting16.sorting.filter(sanitizeSortedColumns) : defaultSorting
     };
   }, []);
   const table = reactTable$1.useReactTable({
@@ -19373,7 +19386,7 @@ const PRINT_STYLES = `
 }
 
 @media print {
-    #root, html, body {
+    html, body, #root {
         overflow: auto !important;
         height: auto !important;
         width: auto !important;
@@ -19392,7 +19405,7 @@ const PRINT_STYLES = `
      * Summary row cells
      */
     [role="table"] [role="rowgroup"]:last-child [role="cell"] {
-        border-top-width: 1px !important;
+        border-width: 0 !important;
     }
 
     [role="table"] a {
@@ -19592,6 +19605,53 @@ function PrintIFrame({
   }, mountNode && stylesReady ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Table3, Object.assign({}, printTableProps)), mountNode) : null);
 }
 
+const WarningDialog = ({
+  onAccept,
+  onClose,
+  onVisibilityChange,
+  ...props
+}) => {
+  const [hideWarningDialog, setHideWarningDialog] = React__default.useState(false);
+  const {
+    texts
+  } = useLocalization();
+  const handleClose = () => {
+    onClose();
+    // Change visibility state when the dialog is closing
+    onVisibilityChange === null || onVisibilityChange === void 0 ? void 0 : onVisibilityChange(!hideWarningDialog);
+  };
+  return /*#__PURE__*/React__default.createElement(Dialog, Object.assign({}, props, {
+    closeOnEscape: true,
+    onClose: handleClose,
+    showCloseButton: false,
+    size: "xs"
+  }), /*#__PURE__*/React__default.createElement(Dialog.Content, {
+    "aria-label": texts.table3.print.warningDialog.title
+  }, /*#__PURE__*/React__default.createElement(Dialog.Title, {
+    className: "text-center"
+  }, /*#__PURE__*/React__default.createElement(BadgeIcon, {
+    icon: "warning",
+    color: "yellow",
+    className: "mr-2"
+  }), texts.table3.print.warningDialog.title), /*#__PURE__*/React__default.createElement("p", null, texts.table3.print.warningDialog.description), /*#__PURE__*/React__default.createElement(Dialog.Footer, {
+    className: "flex items-center justify-between"
+  }, /*#__PURE__*/React__default.createElement(Checkbox, {
+    label: texts.table3.print.warningDialog.checkboxVisibilityLabel,
+    checked: hideWarningDialog,
+    onChange: setHideWarningDialog
+  }), /*#__PURE__*/React__default.createElement(Group, null, /*#__PURE__*/React__default.createElement(Button$1, {
+    onClick: handleClose
+  }, texts.table3.print.warningDialog.cancelButtonText), /*#__PURE__*/React__default.createElement(Button$1, {
+    appearance: "primary",
+    autoFocus: true,
+    onClick: () => {
+      handleClose();
+      onAccept();
+    }
+  }, texts.table3.print.warningDialog.printButtonText)))));
+};
+
+const SAFE_PRINT_CELL_COUNT = 10000;
 function PrintButton(props) {
   const {
     table,
@@ -19602,10 +19662,14 @@ function PrintButton(props) {
   } = useLocalization();
   const toast = useToast();
   const [isPrinting, setIsPrinting] = React__default.useState(false);
+  const [showWarningDialog, setShowWarningDialog] = React__default.useState(false);
   const loadingToastRef = React__default.useRef(null);
   const buttonRef = React__default.useRef(null);
   const tableMeta = table.options.meta;
   const state = table.getState();
+  const {
+    printWarningDialogVisibility
+  } = tableMeta.printing;
   const settings = React__default.useMemo(() => ({
     columnFilters: state.columnFilters,
     columnOrder: state.columnOrder,
@@ -19618,7 +19682,6 @@ function PrintButton(props) {
   }), [state.columnFilters, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, state.sorting, tableMeta.rowHeight.height, tableMeta.columnFreezing.frozenColumnIndex]);
   const iframeTableProps = {
     ...tableProps,
-    data: tableProps.data,
     defaultSettings: settings
   };
   useGlobalKeyDown({
@@ -19642,31 +19705,63 @@ function PrintButton(props) {
   };
   const handlePrint = function () {
     try {
+      let _exit = false;
+      function _temp3(_result2) {
+        if (_exit) return _result2;
+        if (hasNonSafeCellCount && printWarningDialogVisibility) {
+          setShowWarningDialog(true);
+        } else {
+          // only set printing (mount the iframe) when the data has loaded, it prevents repaint performance slow downs
+          setIsPrinting(true);
+        }
+      }
       loadingToastRef.current = toast.loading(texts.table3.print.loading);
+      const getCellCount = data => data.length ? data.length * Object.keys(data[0]).length : 0;
+      let hasNonSafeCellCount = false;
       // if loadAll is not defined, just print with what we've got
       // don't compare length to data.length because the api might be choosing not to return all for performance
-      return Promise.resolve(function () {
+      const _temp2 = function () {
         if (!tableMeta.printing.loadAll) {
-          setIsPrinting(true);
+          const {
+            data
+          } = tableProps;
+          const cellCount = getCellCount(data);
+          hasNonSafeCellCount = cellCount > SAFE_PRINT_CELL_COUNT;
         } else {
           const _temp = _catch(function () {
             return Promise.resolve(tableMeta.printing.loadAll(table.getState().sorting, table.getState().columnFilters, tableMeta.search.query)).then(function () {
-              // only set printing (mount the iframe) when the data has loaded, it prevents repaint performance slow downs
-              setIsPrinting(true);
+              // After the loadAll call above, the data changes. Hence, it becomes essential to acquire the data after
+              // this call rather than before it.
+              const {
+                data
+              } = tableProps;
+              const cellCount = getCellCount(data);
+              hasNonSafeCellCount = cellCount > SAFE_PRINT_CELL_COUNT;
             });
           }, function (error) {
             var _loadingToastRef$curr3;
             const errorMessage = `${texts.table3.print.error}: ${error}`;
             console.error(errorMessage);
             (_loadingToastRef$curr3 = loadingToastRef.current) === null || _loadingToastRef$curr3 === void 0 ? void 0 : _loadingToastRef$curr3.error(errorMessage);
+            // in case of error, we return early
+            _exit = true;
           });
           if (_temp && _temp.then) return _temp.then(function () {});
         }
-      }());
+      }();
+      return Promise.resolve(_temp2 && _temp2.then ? _temp2.then(_temp3) : _temp3(_temp2));
     } catch (e) {
       return Promise.reject(e);
     }
   };
+  const handleWarningDialogAccept = () => {
+    setIsPrinting(true);
+  };
+  const handleWarningDialogClose = () => {
+    var _loadingToastRef$curr4;
+    (_loadingToastRef$curr4 = loadingToastRef.current) === null || _loadingToastRef$curr4 === void 0 ? void 0 : _loadingToastRef$curr4.close();
+    setShowWarningDialog(false);
+  };
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(IconButton, {
     disabled: isPrinting,
     icon: "print",
@@ -19678,6 +19773,11 @@ function PrintButton(props) {
     onAfterPrint: handleAfterPrint,
     onBeforePrint: handleBeforePrint,
     tableProps: iframeTableProps
+  }), /*#__PURE__*/React__default.createElement(WarningDialog, {
+    open: showWarningDialog,
+    onAccept: handleWarningDialogAccept,
+    onClose: handleWarningDialogClose,
+    onVisibilityChange: tableMeta.printing.setPrintWarningDialogVisibility
   }));
 }