@economic/taco 2.4.1 → 2.4.3

package/dist/taco.cjs.development.js

@@ -2210,6 +2210,36 @@ function IconPartnerApi(props, svgRef) {
 }
 var PartnerApi = /*#__PURE__*/React.forwardRef(IconPartnerApi);
 
+function IconPaymentPaid(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.535 6.5h2.715a.25.25 0 01.25.25v2.715A3.502 3.502 0 0117.535 6.5zm-11.07 0H3.75a.25.25 0 00-.25.25v2.715A3.502 3.502 0 006.465 6.5zm1.51 0A5.002 5.002 0 013.5 10.975v2.05A5.002 5.002 0 017.975 17.5H14.5V19H3.75A1.75 1.75 0 012 17.25V6.75C2 5.784 2.784 5 3.75 5h16.5c.966 0 1.75.784 1.75 1.75v4.75h-1.5v-.525A5.002 5.002 0 0116.025 6.5h-8.05zM3.5 17.25v-2.715A3.502 3.502 0 016.465 17.5H3.75a.25.25 0 01-.25-.25zM14 12a2 2 0 11-4 0 2 2 0 014 0zm1.5 0a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm5.095 1.608a.86.86 0 011.049-.14c.344.201.467.603.306.937l-.057.098-3.118 4.152-.07.087a.859.859 0 01-1.17.059l-.079-.08-1.878-2.164-.068-.092a.713.713 0 01.194-.962.863.863 0 011.06.035l.081.082 1.169 1.345 2.51-3.268.071-.089z",
+    fill: "currentColor"
+  }));
+}
+var PaymentPaid = /*#__PURE__*/React.forwardRef(IconPaymentPaid);
+
+function IconPaymentUnpaid(props, svgRef) {
+  return /*#__PURE__*/React.createElement("svg", Object.assign({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    ref: svgRef
+  }, props), /*#__PURE__*/React.createElement("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M17.535 6.5h2.715a.25.25 0 01.25.25v2.715A3.502 3.502 0 0117.535 6.5zm-11.07 0H3.75a.25.25 0 00-.25.25v2.715A3.502 3.502 0 006.465 6.5zm1.51 0A5.002 5.002 0 013.5 10.975v2.05A5.002 5.002 0 017.975 17.5H14.5V19H3.75A1.75 1.75 0 012 17.25V6.75C2 5.784 2.784 5 3.75 5h16.5c.966 0 1.75.784 1.75 1.75v4.75h-1.5v-.525A5.002 5.002 0 0116.025 6.5h-8.05zM3.5 17.25v-2.715A3.502 3.502 0 016.465 17.5H3.75a.25.25 0 01-.25-.25zM14 12a2 2 0 11-4 0 2 2 0 014 0zm1.5 0a3.5 3.5 0 11-7 0 3.5 3.5 0 017 0zm6.297 1.203a.692.692 0 00-.901-.067l-.078.067L19 15.02l-1.818-1.818-.078-.067a.692.692 0 00-.901 1.046L18.02 16l-1.818 1.818-.067.078a.692.692 0 00.968.968l.078-.067L19 16.98l1.818 1.818.078.067a.692.692 0 00.901-1.046L19.98 16l1.818-1.818.067-.078a.692.692 0 00-.067-.901z",
+    fill: "currentColor"
+  }));
+}
+var PaymentUnpaid = /*#__PURE__*/React.forwardRef(IconPaymentUnpaid);
+
 function IconPeriod(props, svgRef) {
   return /*#__PURE__*/React.createElement("svg", Object.assign({
     xmlns: "http://www.w3.org/2000/svg",
@@ -3241,6 +3271,8 @@ const icons = {
   note: Note,
   numbers: Numbers,
   'partner-api': PartnerApi,
+  'payment-paid': PaymentPaid,
+  'payment-unpaid': PaymentUnpaid,
   period: Period,
   'person-change': PersonChange,
   'person-minus': PersonMinus,
@@ -3707,9 +3739,9 @@ const useMergedRef = ref => {
   return internalRef;
 };
 
-const INTERACTIVE_ELEMENTS = ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'];
 function isEventTriggeredOnInteractiveElement(eventTarget) {
-  return INTERACTIVE_ELEMENTS.includes(eventTarget.tagName);
+  const element = eventTarget;
+  return ['A', 'BUTTON', 'INPUT', 'TEXTAREA', 'SELECT'].includes(element.tagName) && !element.hidden && !element.disabled && !element.readOnly;
 }
 function createShortcutKeyDownHandler(key, handler) {
   return function (event) {
@@ -16632,20 +16664,20 @@ function useSettingsStateListener$1(table, onChangeSettings) {
     let handler;
     if (typeof onChangeSettings === 'function') {
       handler = setTimeout(() => onChangeSettings({
+        // adding a new setting? you need to add it to the print settings in PrintButton.tsx!
         columnFreezingIndex: meta.columnFreezing.frozenColumnIndex,
         columnOrder: state.columnOrder,
-        columnPinning: state.columnPinning,
         columnSizing: state.columnSizing,
         columnVisibility: state.columnVisibility,
         excludeUnmatchedRecordsInSearch: meta.search.excludeUnmatchedResults,
         fontSize: meta.fontSize.size,
-        showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
         rowHeight: meta.rowHeight.height,
+        showWarningWhenPrintingLargeDataset: meta.printing.printWarningDialogVisibility,
         sorting: state.sorting
       }), 250);
     }
     return () => clearTimeout(handler);
-  }, [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]);
+  }, [meta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, meta.search.excludeUnmatchedResults, meta.fontSize.size, meta.rowHeight.height, meta.printing.printWarningDialogVisibility, state.sorting]);
 }
 
 var Table3FilterComparator;
@@ -18022,7 +18054,7 @@ function useConvertChildrenToColumns(props, options, editing) {
         enableResizing: (_child$props$enableRe = child.props.enableResizing) !== null && _child$props$enableRe !== void 0 ? _child$props$enableRe : true,
         // filtering
         enableColumnFilter: (_child$props$enableFi = child.props.enableFiltering) !== null && _child$props$enableFi !== void 0 ? _child$props$enableFi : true,
-        filterFn: options.enableFiltering ? 'tacoFilter' : undefined,
+        filterFn: 'tacoFilter',
         // sorting
         enableSorting: (_child$props$enableSo = child.props.enableSorting) !== null && _child$props$enableSo !== void 0 ? _child$props$enableSo : true,
         sortingFn: getSortingFn$1(child.props.dataType, child.props.sortFn),
@@ -18263,21 +18295,27 @@ function useTable$2(props) {
   }
   // filtering
   if (tableOptions.enableColumnFilters) {
-    if (props.onFilter) {
-      tableOptions.manualFiltering = true;
-      // onFilter is called as a listener to let the consumer update their data, so we don't use onColumnFiltersChange
-    } else {
+    if (!props.onFilter) {
       tableOptions.filterFns = {
         tacoFilter: (row, columnId, filter) => columnFilterFn$1(row.getValue(columnId), filter)
       };
       tableOptions.getFilteredRowModel = reactTable$1.getFilteredRowModel();
     }
+    // we don't tableOptions.manualFiltering = true; because it breaks global filtering, server filtering still works :shrug:
   }
   // search
   if (tableOptions.enableGlobalFilter) {
+    // search is always client side, since we call loadAll when searching
     tableOptions.globalFilterFn = (row, columnId, searchQuery) => {
-      if (row.original) {
-        return globalFilterFn$1(row.getValue(columnId), searchQuery);
+      try {
+        if (row.original) {
+          var _row$_getAllCellsByCo, _row$_getAllCellsByCo2;
+          const dataType = (_row$_getAllCellsByCo = row._getAllCellsByColumnId()[columnId]) === null || _row$_getAllCellsByCo === void 0 ? void 0 : (_row$_getAllCellsByCo2 = _row$_getAllCellsByCo.column.columnDef.meta) === null || _row$_getAllCellsByCo2 === void 0 ? void 0 : _row$_getAllCellsByCo2.dataType;
+          const cellValue = getCellValueAsString(row.original[columnId], dataType);
+          return globalFilterFn$1(cellValue, searchQuery);
+        }
+      } catch {
+        //
       }
       return false;
     };
@@ -18324,14 +18362,24 @@ function useTable$2(props) {
   } = useConvertChildrenToColumns(props, options, editing);
   // built-in features
   const initialState = React__default.useMemo(() => {
-    var _defaultSettings$colu2, _defaultSettings$colu3;
+    var _defaultSettings$colu2, _defaultSettings$colu3, _props$defaultSetting, _props$defaultSetting3;
     const sanitizeSortedColumns = column => columns.find(definedColumn => definedColumn.id === column.id);
-    return {
+    const state = {
       columnOrder: ensureOrdering$1(columns, defaultSettings.columnOrder),
       columnSizing: (_defaultSettings$colu2 = defaultSettings.columnSizing) !== null && _defaultSettings$colu2 !== void 0 ? _defaultSettings$colu2 : defaultColumnSizing,
       columnVisibility: (_defaultSettings$colu3 = defaultSettings.columnVisibility) !== null && _defaultSettings$colu3 !== void 0 ? _defaultSettings$colu3 : defaultColumnVisibility,
       sorting: defaultSettings.sorting ? defaultSettings.sorting.filter(sanitizeSortedColumns) : defaultSorting
     };
+    // we don't save these outside the table, but they need to be here for print to inherit them - see PrintButton.tsx
+    if ((_props$defaultSetting = props.defaultSettings) !== null && _props$defaultSetting !== void 0 && _props$defaultSetting.columnFilters) {
+      var _props$defaultSetting2;
+      state.columnFilters = (_props$defaultSetting2 = props.defaultSettings) === null || _props$defaultSetting2 === void 0 ? void 0 : _props$defaultSetting2.columnFilters;
+    }
+    if ((_props$defaultSetting3 = props.defaultSettings) !== null && _props$defaultSetting3 !== void 0 && _props$defaultSetting3.globalFilter) {
+      var _props$defaultSetting4;
+      state.globalFilter = (_props$defaultSetting4 = props.defaultSettings) === null || _props$defaultSetting4 === void 0 ? void 0 : _props$defaultSetting4.globalFilter;
+    }
+    return state;
   }, []);
   const table = reactTable$1.useReactTable({
     data: props.data,
@@ -19810,9 +19858,7 @@ function PrintIFrame({
   // -top-60 -left-60 styles make sure that iframe is added outside of the viewport
   return /*#__PURE__*/React__default.createElement("iframe", {
     className: "fixed -left-60 -top-60 !h-0 !w-0",
-    frameBorder: "0",
     ref: setContentRef,
-    scrolling: "no",
     // Temporary fix to support printing in firefox: Find another solution while upgrading React
     src: "javascript:void(0);"
   }, mountNode && stylesReady ? /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement(Table3, Object.assign({}, printTableProps)), mountNode) : null);
@@ -19883,19 +19929,23 @@ function PrintButton(props) {
   const {
     printWarningDialogVisibility
   } = tableMeta.printing;
-  const settings = React__default.useMemo(() => ({
-    columnFilters: state.columnFilters,
+  const defaultSettings = React__default.useMemo(() => ({
+    columnFreezingIndex: tableMeta.columnFreezing.frozenColumnIndex,
     columnOrder: state.columnOrder,
-    columnPinning: state.columnPinning,
     columnSizing: state.columnSizing,
     columnVisibility: state.columnVisibility,
-    sorting: state.sorting,
+    excludeUnmatchedRecordsInSearch: tableMeta.search.excludeUnmatchedResults,
+    fontSize: tableMeta.fontSize.size,
     rowHeight: tableMeta.rowHeight.height,
-    columnFreezingIndex: tableMeta.columnFreezing.frozenColumnIndex
-  }), [state.columnFilters, state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, state.sorting, tableMeta.rowHeight.height, tableMeta.columnFreezing.frozenColumnIndex]);
+    sorting: state.sorting,
+    // we don't save these, but we must pass them to print
+    columnFilters: state.columnFilters,
+    globalFilter: state.globalFilter
+  }), [tableMeta.columnFreezing.frozenColumnIndex, state.columnOrder, state.columnSizing, state.columnVisibility, tableMeta.search.excludeUnmatchedResults, tableMeta.fontSize.size, tableMeta.rowHeight.height, state.sorting, state.columnFilters, state.globalFilter]);
   const iframeTableProps = {
     ...tableProps,
-    defaultSettings: settings
+    defaultSettings,
+    id: `${tableProps.id}_print`
   };
   useGlobalKeyDown({
     key: 'p',
@@ -20200,11 +20250,12 @@ function useTable3DataLoader(fetch, fetchAll, options = {
   const _lastUsedSorting = React__default.useRef([]);
   const _lastUsedFilters = React__default.useRef([]);
   const _lastUsedSearch = React__default.useRef();
+  const _forceReset = React__default.useRef(false);
   const loadPage = function (pageIndex, sorting, filters, search) {
     try {
       let reset = false;
       // sorting or filters changed, reset everything
-      if (search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
+      if (_forceReset.current || search !== _lastUsedSearch.current || JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
         _pendingPageRequests.current = {};
         // nuke the dataset so that we "start again" after sorting
         reset = true;
@@ -20215,6 +20266,7 @@ function useTable3DataLoader(fetch, fetchAll, options = {
       } else {
         _pendingPageRequests.current[pageIndex] = true;
       }
+      _forceReset.current = false;
       // set the sorting so we can track if it changed between loads
       _lastUsedSorting.current = sorting;
       // set the filters so we can track if it changed between loads
@@ -20274,7 +20326,14 @@ function useTable3DataLoader(fetch, fetchAll, options = {
       return Promise.reject(e);
     }
   };
-  const invalidate = () => setData(Array(length.current).fill(undefined));
+  const invalidate = function () {
+    try {
+      _forceReset.current = true;
+      return loadPage(0, _lastUsedSorting.current, _lastUsedFilters.current, _lastUsedSearch.current);
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
   // we reset the page to 0 whenever sorting, filtering or search changes
   const handleSort = function (sorting) {
     try {
@@ -20332,6 +20391,10 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   const state = table.getState();
   React__default.useEffect(() => {
     const handleKeyDown = event => {
+      // prevent global shortcuts activating while active in other elements, like inputs or buttons
+      if (isEventTriggeredOnInteractiveElement(event.target)) {
+        return;
+      }
       tableMeta.hoverState.handleKeyDown(event);
       tableMeta.currentRow.handleKeyDown(event, table.getRowModel().rows.length, scrollToIndex);
       tableMeta.rowClick.handleKeyDown(event, table);
@@ -20414,9 +20477,7 @@ const Table$1 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
     className: "group/body contents",
     "data-taco": "table2-body",
     role: "rowgroup"
-  }, renderBody(), /*#__PURE__*/React__default.createElement("span", {
-    className: "col-span-full h-16 print:hidden"
-  }))), /*#__PURE__*/React__default.createElement("div", {
+  }, renderBody())), /*#__PURE__*/React__default.createElement("div", {
     className: "group/footer contents",
     "data-taco": "table2-footer",
     role: "rowgroup"