@economic/taco 2.70.2-search-race-condition.1 → 2.70.2

package/dist/taco.cjs

@@ -11468,7 +11468,7 @@ const Base$1 = React__namespace.forwardRef(function IconButtonBase(props, ref) {
     return null;
   }
   return createButtonWithTooltip(
-    { ...otherProps, children: /* @__PURE__ */ React__namespace.createElement(Icon$1, { name: icon, className: "m-0 p-0" }), "data-taco": "icon-button" },
+    { "data-taco": "icon-button", ...otherProps, children: /* @__PURE__ */ React__namespace.createElement(Icon$1, { name: icon, className: "m-0 p-0" }) },
     className,
     ref
   );
@@ -16981,7 +16981,7 @@ const Navbar = React__namespace.memo(({ onMonthChange, value = /* @__PURE__ */ n
       "aria-label": actions.previousMonth,
       onClick: onPreviousClick,
       rounded: true,
-      "data-action": "prev-month"
+      "data-taco": "calendar-prev-month-button"
     }
   )), /* @__PURE__ */ React__namespace.createElement(Tooltip$3, { title: actions.nextMonth }, /* @__PURE__ */ React__namespace.createElement(
     IconButton,
@@ -16991,7 +16991,7 @@ const Navbar = React__namespace.memo(({ onMonthChange, value = /* @__PURE__ */ n
       "aria-label": actions.nextMonth,
       onClick: onNextClick,
       rounded: true,
-      "data-action": "next-month"
+      "data-taco": "calendar-next-month-button"
     }
   ))));
 });
@@ -17009,7 +17009,7 @@ const TodayButton = ({ handleChange }) => {
     {
       className: "cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
       onClick: handleCalendarClickToday,
-      "data-action": "today"
+      "data-taco": "calendar-today-button"
     },
     texts.calendar.actions.today
   );
@@ -19048,6 +19048,7 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
                 {
                   type: "button",
                   className: "hover:wcag-grey-200 flex w-full items-start px-4 py-1 text-xs",
+                  "data-taco": "datepicker-shortcut",
                   onClick: (event) => {
                     event.persist();
                     shortcut2.onClick(event);
@@ -19060,6 +19061,7 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
                 {
                   type: "button",
                   className: "mx-auto my-4 mt-auto inline-flex cursor-pointer border-none bg-transparent text-xs text-blue-500 hover:text-blue-300",
+                  "data-taco": "datepicker-clear-button",
                   onClick: (event) => {
                     event.persist();
                     handleReset(event);
@@ -19070,7 +19072,8 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
               ))
             )
           )),
-          tooltip: texts.datepicker.calendar
+          tooltip: texts.datepicker.calendar,
+          "data-taco": "toggle-calendar-button"
         }
       )
     }
@@ -28045,7 +28048,7 @@ List$1.Switch = Switch;
 List$1.Checkbox = Checkbox$1;
 List$1.Group = Group$5;
 function useTimer(duration = 0, callback) {
-  const timer = React__namespace.useRef();
+  const timer = React__namespace.useRef(void 0);
   const [tracker, setTracker] = React__namespace.useState({
     remaining: duration,
     started: null
@@ -28089,7 +28092,7 @@ function useTimer(duration = 0, callback) {
   };
 }
 const useTypeahead = ({ data, currentIndex }) => {
-  const typeaheadQuery = React__namespace.useRef();
+  const typeaheadQuery = React__namespace.useRef(void 0);
   const typeaheadQueryTimer = useTimer(1e3, () => {
     typeaheadQuery.current = void 0;
   });
@@ -36093,7 +36096,7 @@ function useTableRowHeight(isEnabled = false, defaultRowHeight = "medium") {
   };
 }
 function useTableRowSelection(isEnabled = false) {
-  const lastSelectedRowIndex = React.useRef();
+  const lastSelectedRowIndex = React.useRef(void 0);
   const onKeyDown = React.useCallback(
     (event, table) => {
       var _a, _b, _c;
@@ -36161,9 +36164,9 @@ function useTableDataLoader(fetchPage, fetchAll, options = { pageSize: DEFAULT_P
   const _pendingPageRequests = React.useRef({});
   const _lastUsedSorting = React.useRef([]);
   const _lastUsedFilters = React.useRef([]);
-  const _lastUsedSearch = React.useRef();
+  const _lastUsedSearch = React.useRef(void 0);
   const _lastUsedHiddenColumns = React.useRef([]);
-  const _lastUsedPageIndex = React.useRef();
+  const _lastUsedPageIndex = React.useRef(void 0);
   const loadPage = async (pageIndex, sorting, filters, hiddenColumns) => {
     let reset = false;
     if (JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current)) {
@@ -36613,7 +36616,7 @@ function useTableShortcutsListener(table, tableRef, shortcuts, localShortcuts =
 }
 function useLazyDebouncedEffect(effect, deps, ms = 200) {
   const readyRef = React.useRef(false);
-  const timeoutRef = React.useRef();
+  const timeoutRef = React.useRef(void 0);
   React.useEffect(() => {
     if (readyRef.current) {
       timeoutRef.current = setTimeout(effect, ms);
@@ -45044,7 +45047,7 @@ function Search$1(props) {
   const { scrollToIndex, table, tableRef } = props;
   const { texts } = useLocalization();
   const ref = React.useRef(null);
-  const lastResultQuery = React.useRef();
+  const lastResultQuery = React.useRef(void 0);
   const tableMeta = table.options.meta;
   const query = table.getState().globalFilter;
   const scrollTo2 = (rowIndex) => scrollToIndex(rowIndex, { align: "center" });
@@ -45080,7 +45083,7 @@ function Search$1(props) {
     }
   };
   const [loading, setLoading] = React.useState(false);
-  const searchTimeoutRef = React.useRef();
+  const searchTimeoutRef = React.useRef(void 0);
   const handleChange = (query2) => {
     table.setGlobalFilter(String(query2 ?? ""));
     if (tableMeta.search.enableGlobalFilter && tableMeta.search.handleSearch) {
@@ -49740,7 +49743,7 @@ const Option = React.forwardRef(function Select2Option(props, ref) {
       value: props.value
     }
   ) : void 0;
-  return /* @__PURE__ */ React.createElement(Option$1, { ...otherProps, className, onClick: handleClick, onKeyDown: handleKeyDown, ref }, hasValue2 ? /* @__PURE__ */ React.createElement(Icon$1, { name: "tick", className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible" }) : null, typeof children === "string" ? isTag ? /* @__PURE__ */ React.createElement(Tag, { className: "pointer-events-none my-1", color: color2, icon: prefix2 }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, prefix2 ? typeof prefix2 === "string" ? /* @__PURE__ */ React.createElement(Icon$1, { name: prefix2, className: "!h-5 !w-5" }) : prefix2 : null, /* @__PURE__ */ React.createElement("span", { className: "flex w-full justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("span", null, children), description ? /* @__PURE__ */ React.createElement("span", { className: "text-grey-700 -mt-1.5 mb-1.5 text-xs", "data-taco": "description" }, description) : null), /* @__PURE__ */ React.createElement("span", { className: "flex flex-col self-center" }, postfix ? typeof postfix === "string" ? /* @__PURE__ */ React.createElement(Icon$1, { name: postfix, className: "!h-5 !w-5" }) : postfix : null))) : /* @__PURE__ */ React.createElement("span", { className: "w-full" }, children), popover ? /* @__PURE__ */ React.createElement(
+  return /* @__PURE__ */ React.createElement(Option$1, { ...otherProps, className, onClick: handleClick, onKeyDown: handleKeyDown, ref }, hasValue2 ? /* @__PURE__ */ React.createElement(Icon$1, { name: "tick", className: "pointer-events-none invisible -mx-0.5 !h-4 !w-4 group-aria-selected:visible" }) : /* @__PURE__ */ React.createElement("span", { className: "-mx-0.5 inline-flex h-4 w-4 flex-shrink-0", "aria-hidden": true }), typeof children === "string" ? isTag ? /* @__PURE__ */ React.createElement(Tag, { className: "pointer-events-none my-1", color: color2, icon: prefix2 }, children) : /* @__PURE__ */ React.createElement(React.Fragment, null, prefix2 ? typeof prefix2 === "string" ? /* @__PURE__ */ React.createElement(Icon$1, { name: prefix2, className: "!h-5 !w-5" }) : prefix2 : null, /* @__PURE__ */ React.createElement("span", { className: "flex w-full justify-between" }, /* @__PURE__ */ React.createElement("span", { className: "flex flex-col" }, /* @__PURE__ */ React.createElement("span", null, children), description ? /* @__PURE__ */ React.createElement("span", { className: "text-grey-700 -mt-1.5 mb-1.5 text-xs", "data-taco": "description" }, description) : null), /* @__PURE__ */ React.createElement("span", { className: "flex flex-col self-center" }, postfix ? typeof postfix === "string" ? /* @__PURE__ */ React.createElement(Icon$1, { name: postfix, className: "!h-5 !w-5" }) : postfix : null))) : /* @__PURE__ */ React.createElement("span", { className: "w-full" }, children), popover ? /* @__PURE__ */ React.createElement(
     IconButton,
     {
       icon: "ellipsis-vertical",
@@ -50355,20 +50358,18 @@ const Select22 = React.forwardRef(function Select222(props, ref) {
     (_a = listboxRef.current) == null ? void 0 : _a.dispatchEvent(createCustomKeyboardEvent(event));
   };
   const shouldFocusNextRef = React.useRef(void 0);
-  React.useEffect(() => {
-    const handleKeyDown2 = (event) => {
-      if (event.key === "ArrowLeft" || event.key === "ArrowRight") {
+  const handleHorizontalNavigation = (event) => {
+    var _a, _b;
+    if (isElementInsideTable3OrReport(internalRef.current)) {
+      const isTriggeredFromPopover = (_b = (_a = event.currentTarget).contains) == null ? void 0 : _b.call(_a, event.target);
+      if ((event.key === "ArrowLeft" || event.key === "ArrowRight") && isTriggeredFromPopover) {
+        event.preventDefault();
+        event.stopPropagation();
         shouldFocusNextRef.current = event.key === "ArrowLeft" ? -1 : 1;
         setOpen(false);
       }
-    };
-    if (isElementInsideTable3OrReport(internalRef.current)) {
-      document.addEventListener("keydown", handleKeyDown2);
     }
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown2);
-    };
-  }, []);
+  };
   const handleListboxKeyDown = (event) => {
     if (isAriaDirectionKey(event)) {
       setShouldPauseHoverState(true);
@@ -50379,6 +50380,11 @@ const Select22 = React.forwardRef(function Select222(props, ref) {
       setOpen(false);
       return;
     }
+    if (!hasSearch && event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+      return;
+    }
     if (!hasSearch && /^[a-z0-9]$/i.test(event.key)) {
       setValueIfMatched(event.key);
       return;
@@ -50448,6 +50454,7 @@ const Select22 = React.forwardRef(function Select222(props, ref) {
       asChild: true,
       align: "start",
       onCloseAutoFocus: handleCloseAutoFocus,
+      onKeyDown: handleHorizontalNavigation,
       onPointerDownOutside: otherProps.onBlur,
       sideOffset: 4,
       tabIndex: -1
@@ -50572,7 +50579,7 @@ function Print(props) {
   const { table, tableId, tableRef } = props;
   const { texts } = useLocalization();
   const ref = React.useRef(null);
-  const lastScrollTopRef = React.useRef();
+  const lastScrollTopRef = React.useRef(void 0);
   const toast = useToast();
   const tableMeta = table.options.meta;
   const { allRows, orientation, size: size2, splitGroups } = tableMeta.printing.settings;
@@ -57185,7 +57192,7 @@ const useRowSelect = (onSelectedRows) => {
         row.toggleRowSelected = () => toggleRowSelected(row.id, !row.isSelected);
       };
       hooks.prepareRow.push(prepareRow2);
-      const lastSelectedSortedIndex = React.useRef();
+      const lastSelectedSortedIndex = React.useRef(void 0);
       hooks.visibleColumns.push((columns) => [
         {
           id: "selection",
@@ -94104,7 +94111,7 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
   const _lastUsedSorting = React.useRef([]);
   const _lastUsedFilters = React.useRef([]);
   const _lastUsedHiddenColumns = React.useRef([]);
-  const _lastUsedSearch = React.useRef();
+  const _lastUsedSearch = React.useRef(void 0);
   async function loadPage(pageIndex, sorting, filters, hiddenColumns, search) {
     const hasDataChanged = JSON.stringify(sorting) !== JSON.stringify(_lastUsedSorting.current) || JSON.stringify(filters) !== JSON.stringify(_lastUsedFilters.current) || JSON.stringify(hiddenColumns) !== JSON.stringify(_lastUsedHiddenColumns.current) || search !== _lastUsedSearch.current;
     if (hasDataChanged) {