@economic/taco 2.48.2 → 2.48.4

package/dist/taco.cjs.development.js

@@ -4395,12 +4395,9 @@ function shouldTriggerShortcut(event, key) {
   }
   return event.key.toLowerCase() === keyOptions.key.toLowerCase();
 }
-function createShortcutKeyDownHandler(key, handler, stopPropagation = true, element) {
+function createShortcutKeyDownHandler(key, handler, stopPropagation = true) {
   return function (event) {
-    const dialog = document.querySelector('[role="dialog"]');
-    const isOutsideDialog = element && dialog && !dialog.contains(element);
-    if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event) || isOutsideDialog // Avoid triggering shortcut if dialog is open and element is outside the dialog
-    ) {
+    if (event.target !== event.currentTarget && isElementInteractive(event.target) && !isPressingMetaKey(event)) {
       return;
     }
     const condition = shouldTriggerShortcut(event, key);
@@ -4421,11 +4418,11 @@ const isMacOs = () => {
   return (_window = window) === null || _window === void 0 ? void 0 : _window.navigator.userAgent.includes('Mac');
 };
 
-const useGlobalKeyDown = (shortcut, handler, element) => {
+const useGlobalKeyDown = (shortcut, handler) => {
   React__default.useEffect(() => {
     let handleKeyDown;
     if (shortcut) {
-      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false, element);
+      handleKeyDown = createShortcutKeyDownHandler(shortcut, handler, false);
       document.addEventListener('keydown', handleKeyDown);
     }
     return () => {
@@ -4448,8 +4445,13 @@ const Button = /*#__PURE__*/React.forwardRef(function Button(props, ref) {
   useGlobalKeyDown(shortcut, event => {
     var _internalRef$current;
     event === null || event === void 0 ? void 0 : event.preventDefault();
+    const dialog = document.querySelector('[role="dialog"]');
+    // Don't trigger the click on the button if it is outside of the dialog
+    if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+      return;
+    }
     (_internalRef$current = internalRef.current) === null || _internalRef$current === void 0 ? void 0 : _internalRef$current.click();
-  }, internalRef.current);
+  });
   const Tag = props.href ? 'a' : 'button';
   return /*#__PURE__*/React.createElement(Tag, Object.assign({}, otherProps, {
     href: disabled ? undefined : props.href,
@@ -5100,23 +5102,22 @@ const TodayButton = ({
   }, texts.calendar.actions.today);
 };
 const Calendar$1 = props => {
-  var _ref;
   const {
     onChange: handleChange,
     value,
     disabledDays,
-    visibleMonth,
     ...otherProps
   } = props;
-  const [internalVisibleMonth, setInternalVisibleMonth] = React.useState((_ref = visibleMonth !== null && visibleMonth !== void 0 ? visibleMonth : value) !== null && _ref !== void 0 ? _ref : new Date());
+  const [visibleMonth, setVisibleMonth] = React.useState(value !== null && value !== void 0 ? value : new Date());
   const {
     texts
   } = useLocalization();
   React.useEffect(() => {
-    if (visibleMonth && visibleMonth !== internalVisibleMonth) {
-      setInternalVisibleMonth(visibleMonth);
+    if (visibleMonth !== value) {
+      setVisibleMonth(value !== null && value !== void 0 ? value : new Date());
     }
-  }, [visibleMonth]);
+    // visibleMonth in deps array breaking month switching logic. It should not be in deps array.
+  }, [value]);
   const handleDayClick = (date, modifiers, event) => {
     if (modifiers.outside || modifiers.disabled) {
       return;
@@ -5130,13 +5131,13 @@ const Calendar$1 = props => {
     className: className,
     captionLayout: "dropdown-buttons",
     weekStartsOn: 1,
-    month: internalVisibleMonth,
+    month: visibleMonth,
     numberOfMonths: 1,
     components: {
-      Caption: props => (/*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
-        onMonthChange: setInternalVisibleMonth,
-        value: internalVisibleMonth
-      }))),
+      Caption: props => /*#__PURE__*/React.createElement(Navbar, Object.assign({}, props, {
+        onMonthChange: setVisibleMonth,
+        value: visibleMonth
+      })),
       Footer: () => (/*#__PURE__*/React.createElement("tfoot", null, /*#__PURE__*/React.createElement("tr", null, /*#__PURE__*/React.createElement("td", {
         colSpan: 7,
         className: "text-center"
@@ -6391,18 +6392,14 @@ const useDatepicker = ({
   } = useLocalization();
   const [internalValue, setInternalValue] = React.useState((_format = format(value, formatting.date)) !== null && _format !== void 0 ? _format : '');
   const originalValueAsDate = parse(value);
-  // Track the current view date (month/year) in the calendar
-  const [calendarViewDate, setCalendarViewDate] = React.useState(originalValueAsDate || new Date());
+  // update internal value if it changed 'externally'
   React.useEffect(() => {
-    // Only update the internal value when the input is not focused
-    // This prevents the input value from being reset while user is typing
-    if (inputRef.current !== document.activeElement) {
-      const formattedValue = format(value, formatting.date);
-      if (formattedValue !== internalValue) {
-        setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
-      }
+    const formattedValue = format(value, formatting.date);
+    if (formattedValue !== internalValue) {
+      setInternalValue(formattedValue !== null && formattedValue !== void 0 ? formattedValue : '');
     }
   }, [value]);
+  // event handlers
   const handleInputBlur = event => {
     event.persist();
     const valueAsDate = parseFromCustomString(event.target.value, 'dd.mm.yy', originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getMonth(), originalValueAsDate === null || originalValueAsDate === void 0 ? void 0 : originalValueAsDate.getFullYear());
@@ -6423,8 +6420,6 @@ const useDatepicker = ({
     setInternalValue(event.target.value);
   };
   const handleChange = date => {
-    // Update both the input value and calendar view date when selecting a date
-    setCalendarViewDate(date);
     setInputValueByRef(inputRef.current, format(date, formatting.date), 'focusout');
   };
   const handleKeyDown = event => {
@@ -6450,8 +6445,7 @@ const useDatepicker = ({
   const calendarProps = {
     ...calendar,
     onChange: handleChange,
-    value: originalValueAsDate,
-    visibleMonth: calendarViewDate
+    value: originalValueAsDate
   };
   return {
     input: inputProps,
@@ -8335,12 +8329,17 @@ const Content$8 = /*#__PURE__*/React.forwardRef(function MenuContent(props, ref)
       if (child.props.shortcut) {
         shortcuts.push(createShortcutKeyDownHandler(child.props.shortcut, event => {
           event.preventDefault();
+          const dialog = document.querySelector('[role="dialog"]');
+          // Don't trigger the shortcut if it is outside of the dialog
+          if (dialog && !(dialog !== null && dialog !== void 0 && dialog.contains(internalRef.current))) {
+            return;
+          }
           menu === null || menu === void 0 ? void 0 : menu.open();
           setTimeout(() => {
             var _childrenRefs$current, _childrenRefs$current2;
             return (_childrenRefs$current = childrenRefs.current[index]) === null || _childrenRefs$current === void 0 ? void 0 : (_childrenRefs$current2 = _childrenRefs$current.current) === null || _childrenRefs$current2 === void 0 ? void 0 : _childrenRefs$current2.click();
           }, 1);
-        }, true, childrenRefs.current[index].current));
+        }));
       }
     });
     shortcuts.forEach(handler => document.addEventListener('keydown', handler));
@@ -9949,11 +9948,6 @@ const fixedForwardRef = React__default.forwardRef;
   TableFilterComparator[TableFilterComparator["HasAllOf"] = 12] = "HasAllOf";
   TableFilterComparator[TableFilterComparator["HasNoneOf"] = 13] = "HasNoneOf";
 })(exports.TableFilterComparator || (exports.TableFilterComparator = {}));
-(function (TableServerLoadAllState) {
-  TableServerLoadAllState[TableServerLoadAllState["Incomplete"] = 0] = "Incomplete";
-  TableServerLoadAllState[TableServerLoadAllState["Loading"] = 1] = "Loading";
-  TableServerLoadAllState[TableServerLoadAllState["Completed"] = 2] = "Completed";
-})(exports.TableServerLoadAllState || (exports.TableServerLoadAllState = {}));
 
 const dataTypes = {
   auto: {
@@ -11496,10 +11490,16 @@ function useTableDataLoader(fetchPage, fetchAll, options = {
   }, invalidate];
 }
 
-function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE) {
+function useTableServerLoading(length, data, loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE) {
   const isEnabled = !!loadPage && !!loadAll;
   const [isReady, setReady] = React__default.useState(false);
-  const [loadAllStatus, setLoadedStatus] = React__default.useState(exports.TableServerLoadAllState.Incomplete);
+  const [loading, setLoading] = React__default.useState(false);
+  const hasLoadedAll = React__default.useMemo(() => {
+    if (data.length !== length || data.some(x => x === undefined)) {
+      return false;
+    }
+    return true;
+  }, [data, length]);
   let _loadPage;
   let _loadAll;
   let _loadAllIfNeeded;
@@ -11509,7 +11509,6 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
         const _temp = function () {
           if (typeof loadPage === 'function') {
             return Promise.resolve(loadPage(...args)).then(function () {
-              setLoadedStatus(exports.TableServerLoadAllState.Incomplete);
               setReady(true);
             });
           }
@@ -11525,9 +11524,9 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
       try {
         const _temp2 = function () {
           if (typeof loadAll === 'function') {
-            setLoadedStatus(exports.TableServerLoadAllState.Loading);
+            setLoading(true);
             return Promise.resolve(loadAll(...args)).then(function () {
-              setLoadedStatus(exports.TableServerLoadAllState.Completed);
+              setLoading(false);
               setReady(true);
             });
           }
@@ -11540,7 +11539,7 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
     _loadAllIfNeeded = function (...args) {
       try {
         const _temp3 = function () {
-          if (loadAllStatus === exports.TableServerLoadAllState.Incomplete) {
+          if (!hasLoadedAll) {
             var _loadAll2;
             return Promise.resolve((_loadAll2 = _loadAll) === null || _loadAll2 === void 0 ? void 0 : _loadAll2(...args)).then(function () {});
           }
@@ -11557,7 +11556,7 @@ function useTableServerLoading(loadPage, loadAll, pageSize = DEFAULT_PAGE_SIZE)
     loadPage: _loadPage,
     loadAll: _loadAll,
     loadAllIfNeeded: _loadAllIfNeeded,
-    loadAllStatus,
+    loading,
     pageSize
   };
 }
@@ -11752,7 +11751,7 @@ function useTableSearchListener(table, onChangeSearch) {
         onChangeSearch(query);
       }
     }
-  }, [meta.server.loadAllStatus, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), onChangeSearch]);
+  }, [meta.server.loading, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, table.getState().globalFilter, JSON.stringify(table.getState().sorting), onChangeSearch]);
 }
 
 function useTableSettingsListener(table, onChangeSettings) {
@@ -11894,7 +11893,7 @@ function useTableManager(props, meta, internalColumns) {
   const rowHeight = useTableRowHeight(options.enableRowHeight, settings.rowHeight);
   const rowSelection = useTableRowSelection(!!options.enableRowSelection);
   const search = useTableSearch(options.enableSearch, settings.excludeUnmatchedRecordsInSearch);
-  const server = useTableServerLoading(props.loadPage, props.loadAll, props.pageSize);
+  const server = useTableServerLoading(length, data, props.loadPage, props.loadAll, props.pageSize);
   // TODO: memoise
   // convert jsx column components into valid table columns
   const {
@@ -12732,7 +12731,7 @@ function Header$4(context) {
     className: "hover:border-blue !-mt-px",
     checked: isAllRowsSelected,
     indeterminate: isSomeRowsSelected && !isAllRowsSelected,
-    loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
+    loading: tableMeta.server.loading,
     onChange: handleChange
   }));
 }
@@ -14291,7 +14290,7 @@ function Search$1(props) {
   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,
-    loading: tableMeta.server.loadAllStatus === exports.TableServerLoadAllState.Loading,
+    loading: tableMeta.server.loading,
     name: "table-search",
     onClickFindPrevious: handlePreviousResult,
     onClickFindNext: handleNextResult,
@@ -19644,24 +19643,24 @@ function EditingControlCell(props) {
     var _cellRef$current;
     return typeof type === 'function' && !!((_cellRef$current = cellRef.current) !== null && _cellRef$current !== void 0 && _cellRef$current.querySelector('[data-taco="Select2"],[data-taco="switch"],[data-taco="checkbox"]'));
   }, [cellRef.current]);
-  const handleChange = nextValue => {
+  const handleChange = React__default.useCallback(nextValue => {
     if (nextValue !== value) {
       tableMeta.editing.setCellValue(cell, nextValue);
       if (hasNonTextControl) {
         requestAnimationFrame(() => tableMeta.editing.onCellChanged(cell, rowIndex, nextValue));
       }
     }
-  };
-  function blur() {
+  }, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]);
+  const blur = React__default.useCallback(function blur() {
     tableMeta.editing.toggleDetailedMode(false);
     tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
-  }
-  const handleBlur = event => {
+  }, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex]);
+  const handleBlur = React__default.useCallback(event => {
     if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
       return;
     }
     blur();
-  };
+  }, [blur]);
   // ensure that blur runs when the cell gets unmounted (when vertically arrow key navigating)
   React__default.useEffect(() => {
     const ref = cellRef.current;