@economic/taco 2.26.19 → 2.27.0

package/dist/primitives/Table/Core/useTable.d.ts

@@ -17,7 +17,7 @@ export declare type useTableReturnValue<TType = unknown> = {
     };
     ref: React.RefObject<TableRef>;
     renderer: {
-        rows: JSX.Element[] | null;
+        rows: (JSX.Element | null)[] | null;
         style: React.CSSProperties;
         scrollToIndex: (index: number, options?: ReactVirtualScrollToOptions) => void;
     };

package/dist/taco.cjs.development.js

@@ -5977,7 +5977,7 @@ const format = (date, mask = 'dd.mm.yy') => {
   const pad = v => String(v).length === 1 ? `0${v}` : v.toString();
   return mask.replace('dd', pad(value.getDate())).replace('mm', pad(value.getMonth() + 1)).replace('yy', String(value.getFullYear()).slice(2));
 };
-const parseFromCustomString = (date = '', mask = 'dd.mm.yy') => {
+const parseFromCustomString = (date = '', mask = 'dd.mm.yy', defaultYear = undefined) => {
   if (!date || !date.length) {
     return undefined;
   }
@@ -6011,7 +6011,7 @@ const parseFromCustomString = (date = '', mask = 'dd.mm.yy') => {
   month = Number.parseInt(month, 10);
   year = Number.parseInt(year, 10);
   const currentDate = new Date();
-  return new Date( /* year */Object.is(year, NaN) ? currentDate.getFullYear() : year, /* month */Object.is(month, NaN) ? currentDate.getMonth() : month - 1,
+  return new Date( /* year */Object.is(year, NaN) ? defaultYear !== null && defaultYear !== void 0 ? defaultYear : currentDate.getFullYear() : year, /* month */Object.is(month, NaN) ? currentDate.getMonth() : month - 1,
   // months are zero based in javascript, so subtract a day
   /* day */
   Object.is(day, NaN) ? currentDate.getDate() : day, /* hours */12, /* minutes */0 // set to midday to avoid UTC offset causing dates to be mismatched server side
@@ -6049,7 +6049,7 @@ const useDatepicker = ({
   // event handlers
   const handleInputBlur = event => {
     event.persist();
-    const valueAsDate = parseFromCustomString(event.target.value);
+    const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', value === null || value === void 0 ? void 0 : value.getFullYear());
     const formattedValue = valueAsDate ? format(valueAsDate) || '' : '';
     event.target.value = formattedValue;
     if (onChange) {
@@ -11243,10 +11243,11 @@ function Row(props) {
 const TABLE_SCROLL_PADDING_BOTTOM = 36;
 const TABLE_PADDING_BOTTOM = 120;
 function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
-  var _table$getState$group, _virtualItems$;
+  var _table$getState$group, _ref, _virtualItems$padding, _virtualItems$padding2, _ref2, _virtualItems;
   const tableMeta = table.options.meta;
   const rows = table.getRowModel().rows;
   const HEADER_OFFSET_TOTAL = HEADER_ROW_HEIGHT_ESTIMATE * table.getHeaderGroups().length;
+  const isTableGrouped = !!((_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length);
   // expanded rows
   const {
     createRowMeasurer,
@@ -11260,7 +11261,7 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
     getScrollElement: () => tableRef.current,
     overscan: tableMeta.printing.isPrinting ? rows.length : undefined,
     rangeExtractor,
-    scrollPaddingStart: (_table$getState$group = table.getState().grouping) !== null && _table$getState$group !== void 0 && _table$getState$group.length ? HEADER_ROW_HEIGHT_ESTIMATE : undefined,
+    scrollPaddingStart: isTableGrouped ? HEADER_ROW_HEIGHT_ESTIMATE : undefined,
     scrollPaddingEnd: HEADER_OFFSET_TOTAL + TABLE_SCROLL_PADDING_BOTTOM,
     paddingEnd: TABLE_PADDING_BOTTOM
   });
@@ -11293,10 +11294,12 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
       }
     }
   }, [virtualItems.length, tableRef.current]);
+  // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
+  const paddingStartIndex = isTableGrouped && rows.length > 1 ? 1 : 0;
   // styling for offsetting rows - this "is" the virtualisation
   const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [
   // use row 1 not 0, because 0 might be sticky in grouped tables and it's start value will always be 0
-  Math.max(0, ((_virtualItems$ = virtualItems[1]) !== null && _virtualItems$ !== void 0 ? _virtualItems$ : virtualItems[0]).start - virtualiser.options.scrollMargin - virtualItems[0].size), Math.max(0, virtualiser.getTotalSize() - virtualItems[virtualItems.length - 1].end)] : [0, 0];
+  Math.max(0, (_ref = ((_virtualItems$padding = virtualItems[paddingStartIndex]) === null || _virtualItems$padding === void 0 ? void 0 : _virtualItems$padding.start) - virtualiser.options.scrollMargin - ((_virtualItems$padding2 = virtualItems[paddingStartIndex]) === null || _virtualItems$padding2 === void 0 ? void 0 : _virtualItems$padding2.size)) !== null && _ref !== void 0 ? _ref : 0), Math.max(0, (_ref2 = virtualiser.getTotalSize() - ((_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end)) !== null && _ref2 !== void 0 ? _ref2 : 0)] : [0, 0];
   // ensure default active rows are scrolled to
   React__default.useEffect(() => {
     if (defaultRowActiveIndex) {
@@ -11316,6 +11319,10 @@ function useTableRenderer(renderers, table, tableRef, defaultRowActiveIndex) {
       paddingTop
     };
     content = virtualItems.map(virtualRow => {
+      // there appears to be a react-virtual bug where it inserts a single `undefined` item at the end of the row, which crashes here
+      if (!virtualRow) {
+        return null;
+      }
       const row = rows[virtualRow.index];
       const measureRow = createRowMeasurer(virtualiser.resizeItem, virtualRow);
       return /*#__PURE__*/React__default.createElement(Row, {
@@ -12810,16 +12817,25 @@ function Summary(props) {
   }, label, "\u00A0", count);
 }
 
-function Footer$3(header) {
-  return /*#__PURE__*/React__default.createElement(MemoedFooter, {
+function Foot(props) {
+  const nonGroupedHeaders = props.table.getFooterGroups()[0].headers.filter(header => !header.column.getIsGrouped());
+  return /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, nonGroupedHeaders.map((header, index) => ( /*#__PURE__*/React__default.createElement(Footer$3, {
     key: header.id,
-    footer: header
+    header: header,
+    index: index
+  })))));
+}
+function Footer$3(props) {
+  return /*#__PURE__*/React__default.createElement(MemoedFooter, {
+    footer: props.header,
+    index: props.index
   });
 }
 const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(props) {
   var _footer$subHeaders, _footer$subHeaders$fi;
   const {
-    footer
+    footer,
+    index
   } = props;
   const columnMeta = footer.column.columnDef.meta;
   // getIsPinned returns true for split header groups, even if the split group has no pinned sub headers
@@ -12832,7 +12848,7 @@ const MemoedFooter = /*#__PURE__*/React__default.memo(function MemoedFooter(prop
   }
   let content;
   let align;
-  if (footer.index === 0) {
+  if (index === 0) {
     align = 'left';
     content = /*#__PURE__*/React__default.createElement(Summary, {
       table: footer.getContext().table
@@ -13872,6 +13888,18 @@ const createOptionClassName = (shouldPauseHoverState = false) => cn('group mb-px
   'hover:wcag-grey-200': !shouldPauseHoverState
 });
 const createCollectionClassName = () => 'flex flex-col gap-px';
+const getFontSize = fontSize => {
+  switch (fontSize) {
+    case exports.FontSizes.small:
+      return 'text-xs';
+    case exports.FontSizes.medium:
+      return 'text-sm';
+    case exports.FontSizes.large:
+      return 'text-base';
+    default:
+      return 'text-sm';
+  }
+};
 
 const Select2Context = /*#__PURE__*/React__default.createContext({});
 const useSelect2Context = () => React__default.useContext(Select2Context);
@@ -14083,11 +14111,7 @@ const Option$1 = /*#__PURE__*/React__default.forwardRef(function Select2Option(p
     value,
     fontSize = exports.FontSizes.medium
   } = useSelect2Context();
-  const className = cn(createOptionClassName(shouldPauseHoverState), {
-    'text-xs': fontSize === exports.FontSizes.small,
-    'text-sm': fontSize === exports.FontSizes.medium,
-    'text-base': fontSize === exports.FontSizes.large
-  }, cName);
+  const className = cn(createOptionClassName(shouldPauseHoverState), fontSize && getFontSize(fontSize), cName);
   const hasValue = Array.isArray(value) ? !!value.length : value !== undefined;
   const isTag = tags && !!color;
   const handleClick = () => {
@@ -14220,11 +14244,8 @@ const Button$2 = /*#__PURE__*/React__default.forwardRef(function Select2TriggerB
     highlighted,
     invalid,
     readOnly
-  }).replace('w-full', '').replace('px-2', ''), {
-    'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-')),
-    'text-xs': fontSize === exports.FontSizes.small,
-    'text-sm': fontSize === exports.FontSizes.medium,
-    'text-base': fontSize === exports.FontSizes.large
+  }).replace('w-full', '').replace('px-2', ''), fontSize && getFontSize(fontSize), {
+    'w-full': !((_props$className = props.className) !== null && _props$className !== void 0 && _props$className.includes('w-'))
   }, props.className);
   const handleClick = event => {
     if (disabled || readOnly) {
@@ -14732,6 +14753,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     tags = false,
     value: prop,
     fontSize,
+    loading,
     ...otherProps
   } = props;
   const emptyOption = React__default.useMemo(() => {
@@ -14944,7 +14966,16 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     onClick: areAllSelected ? deselectAll : selectAll
   }, selectAllText), /*#__PURE__*/React__default.createElement("div", {
     className: "border-grey-300 mx-3 rounded border-t"
-  }))))) : null, flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
+  }))))) : null, loading ? ( /*#__PURE__*/React__default.createElement("span", {
+    className: cn('text-grey-700 flex items-center italic', fontSize && getFontSize(fontSize))
+  }, /*#__PURE__*/React__default.createElement("span", null, /*#__PURE__*/React__default.createElement(Spinner, {
+    delay: 0,
+    className: cn('ml-3 mr-2 mt-1.5 h-5 w-5', {
+      '!mt-1 !h-3.5 !w-3.5': fontSize === exports.FontSizes.small,
+      '!h-4 !w-4': fontSize === exports.FontSizes.medium,
+      '!h-5 !w-5': fontSize === exports.FontSizes.large
+    })
+  })), /*#__PURE__*/React__default.createElement("span", null, texts.listbox.loading))) : flattenedChildren.length <= 0 ? ( /*#__PURE__*/React__default.createElement("div", {
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"
   }, "No results found...")) : ( /*#__PURE__*/React__default.createElement(Root$1, {
@@ -15127,12 +15158,21 @@ function Print$1(props) {
           // do this here because Safari doesn't support the beforeprint event
           togglePrinting(true);
           requestAnimationFrame(() => {
-            try {
-              // window.print doesn't always work in Safari :man_shrugging:
-              document.execCommand('print', false, undefined);
-            } catch {
-              window.print();
-            }
+            requestAnimationFrame(() => {
+              const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
+              if (isSafari) {
+                try {
+                  // Try using document.execCommand for printing in Safari
+                  document.execCommand('print', false, undefined);
+                } catch (error) {
+                  // If document.execCommand fails or throws an error, fallback to window.print()
+                  window.print();
+                }
+              } else {
+                // Execute window.print() for all other browsers
+                window.print();
+              }
+            });
           });
         }, 150);
       }
@@ -15823,7 +15863,9 @@ function TableGrid(props) {
     enableHorizontalArrowKeyNavigation: enableHorizontalArrowKeyNavigation,
     table: table.instance,
     style: table.renderer.style
-  }, table.renderer.rows), table.meta.footer.isEnabled ? ( /*#__PURE__*/React__default.createElement("tfoot", null, /*#__PURE__*/React__default.createElement("tr", null, table.instance.getFooterGroups()[0].headers.map(Footer$3)))) : null)) : ( /*#__PURE__*/React__default.createElement(EmptyStateBody, {
+  }, table.renderer.rows), table.meta.footer.isEnabled ? /*#__PURE__*/React__default.createElement(Foot, {
+    table: table.instance
+  }) : null)) : ( /*#__PURE__*/React__default.createElement(EmptyStateBody, {
     emptyState: table.props.emptyState
   })))));
 }
@@ -18438,8 +18480,8 @@ function Alert$1(props) {
     if (pendingChangesWithErrors.length > 1 && index === pendingChangesWithErrors.length - 1) {
       links.push(validationTexts.alert.messageAnd);
     }
+    const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
     const handleClick = () => {
-      const rowIndex = table.getRowModel().rows.findIndex(row => row.id === error.rowId);
       if (rowIndex > -1) {
         scrollToRow(rowIndex);
       } else {
@@ -18462,7 +18504,7 @@ function Alert$1(props) {
       className: "text-blue",
       onClick: handleClick,
       role: "button"
-    }, rowIdentityColumn ? error.pendingChange._meta.original[rowIdentityColumn.id] : error.rowId)));
+    }, rowIdentityColumn ? error.pendingChange._meta.original[rowIdentityColumn.id] : rowIndex + 1)));
     // if appropriate, concatenate the item with the text ","
     if (pendingChangesWithErrors.length > 2 && index < pendingChangesWithErrors.length - 2) {
       links.push(', ');