@economic/taco 2.63.2-combobox-search-no-sorting.0 → 2.64.1-table-flickering.0

package/dist/taco.d.ts

@@ -3043,7 +3043,7 @@ export declare interface Table3CommonProps<TType = unknown> extends Table3Featur
 
 export declare type Table3EditingChangeHandler<TType = unknown> = (accessor: string, value: unknown, row: TType, prevRow: TType) => Promise<Partial<TType>> | undefined;
 
-export declare type Table3EditingCreateHandler<TType = unknown> = () => Partial<TType>;
+export declare type Table3EditingCreateHandler<TType = unknown> = () => Promise<Partial<TType>>;
 
 declare type Table3EditingDiscardHandler = () => void;
 
@@ -3998,7 +3998,7 @@ export declare type useTableDataAllFetcher2<TType = unknown> = (sorting: TableCo
 
 export declare function useTableDataLoader<TType = unknown>(fetchPage: useTableDataPageFetcher<TType>, fetchAll: useTableDataAllFetcher<TType>, options?: useTableDataLoaderOptions): [useTableDataLoaderValues<TType>, () => void];
 
-export declare function useTableDataLoader2<TType = unknown>(fetchPage: useTableDataPageFetcher2<TType>, fetchAll: useTableDataAllFetcher2<TType>, options?: useTableDataLoaderOptions): [useTableDataLoaderValues2<TType>, () => void];
+export declare function useTableDataLoader2<TType = unknown>(fetchPage: useTableDataPageFetcher2<TType>, fetchAll: useTableDataAllFetcher2<TType>, options?: useTableDataLoaderOptions): [useTableDataLoaderValues2<TType>, () => Promise<void>];
 
 export declare type useTableDataLoaderOptions = {
     pageSize: number;

package/dist/taco.js

@@ -5378,12 +5378,31 @@ const Cancel = React.forwardRef(function AlertDialogCancel(props, ref) {
 const Action$1 = React.forwardRef(function AlertDialogAction(props, ref) {
   return /* @__PURE__ */ React.createElement($905f4ae918aab1aa$export$e19cd5f9376f8cee, { ...props, className: props.className, ref, asChild: true });
 });
-const Backdrop = React.forwardRef(function Backdrop2(props, ref) {
+const useMergedRef = (ref) => {
+  const internalRef = React__default.useRef(null);
+  React__default.useEffect(() => {
+    if (ref) {
+      if (typeof ref === "function") {
+        ref(internalRef.current);
+      } else {
+        ref.current = internalRef.current;
+      }
+    }
+  }, [ref]);
+  return internalRef;
+};
+const Backdrop = React.forwardRef(function Backdrop2(props, forwardedRef) {
+  const ref = useMergedRef(forwardedRef);
   const className = clsx(
     "fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute",
     props.className
   );
-  return /* @__PURE__ */ React.createElement("div", { ...props, className, "data-taco": "backdrop", ref });
+  const onPointerDown = (event) => {
+    if (event.target === ref.current) {
+      event.preventDefault();
+    }
+  };
+  return /* @__PURE__ */ React.createElement("div", { ...props, className, onPointerDown, "data-taco": "backdrop", ref });
 });
 const getDialogSizeClassnames = (size2) => {
   switch (size2) {
@@ -9741,19 +9760,6 @@ const getBannerIcon = (type) => {
     }
   })());
 };
-const useMergedRef = (ref) => {
-  const internalRef = React__default.useRef(null);
-  React__default.useEffect(() => {
-    if (ref) {
-      if (typeof ref === "function") {
-        ref(internalRef.current);
-      } else {
-        ref.current = internalRef.current;
-      }
-    }
-  }, [ref]);
-  return internalRef;
-};
 const FOCUSABLE_ELEMENTS = [
   '[tabindex]:not([tabindex="-1"]):not([disabled])',
   "input:not([disabled])",
@@ -18461,7 +18467,7 @@ const useCombobox = (props, ref) => {
   React.useEffect(() => {
     const isCurrentValue = value !== void 0 && value !== null && inputValue === String(value);
     if (inputValue && data.length && !isCurrentValue) {
-      setCurrentIndex(getIndexFromValue(data, inputValue) || 0);
+      setCurrentIndex(0);
       if (!open) {
         setOpen(true);
       }
@@ -18945,6 +18951,9 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
   const { texts } = useLocalization();
   const className = clsx("inline-flex w-full text-black font-normal", externalClassName);
   const popoverContentRef = React.useRef(null);
+  const handlePopoverClick = React.useCallback((event) => {
+    event.stopPropagation();
+  }, []);
   const handleOpenAutofocus = React.useCallback(
     (e3) => {
       var _a;
@@ -18991,7 +19000,8 @@ const Datepicker = React.forwardRef(function Datepicker2(props, ref) {
               "div",
               {
                 className: '[&_button[name="day"]:focus]:yt-focus -m-3 flex',
-                ref: popoverContentRef
+                ref: popoverContentRef,
+                onClick: handlePopoverClick
               },
               /* @__PURE__ */ React.createElement(
                 Calendar,
@@ -29690,6 +29700,7 @@ const Content$2 = React.forwardRef(function MenuContent(props, ref) {
       align,
       className,
       "data-taco": "menu",
+      hideWhenDetached: true,
       side,
       sideOffset: 3,
       style: { minWidth: menu == null ? void 0 : menu.minWidth },
@@ -38162,7 +38173,7 @@ function Header$2(context) {
         tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : void 0
       );
     }
-    table.toggleAllRowsSelected(checked);
+    setTimeout(() => table.toggleAllRowsSelected(checked), 1);
   };
   return /* @__PURE__ */ React__default.createElement(Tooltip$3, { title }, /* @__PURE__ */ React__default.createElement(
     Checkbox$2,
@@ -39117,7 +39128,9 @@ function Body(props) {
   const focusManager = useAugmentedFocusManager();
   const tableMeta = table.options.meta;
   const handleKeyDown = (event) => {
-    if (event.isDefaultPrevented() || event.isPropagationStopped()) {
+    var _a;
+    const isEventTriggeredInsideTable = ((_a = event.target) == null ? void 0 : _a.closest("tbody")) === ref.current;
+    if (event.isDefaultPrevented() || event.isPropagationStopped() || !isEventTriggeredInsideTable) {
       return;
     }
     if (tableMeta.rowActive.rowActiveIndex !== void 0) {
@@ -39287,20 +39300,14 @@ const MemoedFooter = React__default.memo(function MemoedFooter2(props) {
   );
 });
 function EmptyStateBody(props) {
-  var _a, _b;
+  var _a;
   const { emptyState: Placeholder2, isReady, reason, ...attributes } = props;
   const ref = React__default.useRef(null);
+  const rect = useBoundingClientRectListener({ current: (_a = ref.current) == null ? void 0 : _a.parentNode });
   if (!isReady) {
     return /* @__PURE__ */ React__default.createElement("tbody", { ...attributes, className: "!auto-rows-fr" });
   }
-  return /* @__PURE__ */ React__default.createElement("tbody", { ...attributes, ref, className: "!auto-rows-fr", "data-taco": "empty-state" }, /* @__PURE__ */ React__default.createElement("tr", { className: "!auto-rows-fr " }, /* @__PURE__ */ React__default.createElement(
-    "td",
-    {
-      style: { maxWidth: (_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.clientWidth },
-      className: "col-span-full !border-0 !p-0 hover:!bg-white"
-    },
-    Placeholder2 ? /* @__PURE__ */ React__default.createElement(Placeholder2, { reason }) : void 0
-  )));
+  return /* @__PURE__ */ React__default.createElement("tbody", { ...attributes, ref, className: "!auto-rows-fr", "data-taco": "empty-state" }, /* @__PURE__ */ React__default.createElement("tr", { className: "!auto-rows-fr" }, /* @__PURE__ */ React__default.createElement("td", { style: { maxWidth: rect == null ? void 0 : rect.width }, className: "col-span-full !border-0 !p-0 hover:!bg-white" }, Placeholder2 ? /* @__PURE__ */ React__default.createElement(Placeholder2, { reason }) : void 0)));
 }
 const SearchInput22 = React__default.forwardRef(function SearchInput222(props, ref) {
   const {
@@ -42927,67 +42934,6 @@ function useDroppable(_ref) {
     setNodeRef
   };
 }
-const restrictToVerticalAxis = (_ref) => {
-  let {
-    transform
-  } = _ref;
-  return {
-    ...transform,
-    x: 0
-  };
-};
-function getContainerById(children, id2) {
-  var _a;
-  const lists = React__default.Children.toArray(children).filter(
-    (child) => child.type.displayName === "SortableList"
-  );
-  const list = lists.find(
-    (list2) => list2.props.id === id2
-  );
-  if (list) {
-    return list == null ? void 0 : list.props;
-  }
-  return (_a = lists.find((l2) => React__default.Children.toArray(l2.props.children).findIndex((child) => child.props.id === id2) > -1)) == null ? void 0 : _a.props;
-}
-function Container$1(externalProps) {
-  const { children, reorder, move } = externalProps;
-  function handleDragOver(event) {
-    const { active, over } = event;
-    if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
-      return;
-    }
-    const activeList = getContainerById(children, active.id);
-    const overList = getContainerById(children, over.id);
-    if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id === overList.id) {
-      return;
-    }
-    move(active.id, activeList == null ? void 0 : activeList.id, overList.id);
-  }
-  function handleDragEnd(event) {
-    const { active, over } = event;
-    if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
-      return;
-    }
-    const activeList = getContainerById(children, active.id);
-    const overList = getContainerById(children, over.id);
-    if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id !== overList.id) {
-      return;
-    }
-    reorder(active.id, over.id, overList.id);
-  }
-  return /* @__PURE__ */ React__default.createElement(
-    DndContext,
-    {
-      collisionDetection: closestCenter,
-      ...externalProps,
-      modifiers: [restrictToVerticalAxis],
-      onDragOver: handleDragOver,
-      onDragEnd: handleDragEnd
-    },
-    children
-  );
-}
-Container$1.displayName = "SortableContainer";
 function arrayMove(array2, from, to) {
   const newArray = array2.slice();
   newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
@@ -43456,6 +43402,74 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
   };
 }
 [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
+function List(externalProps) {
+  const { children, id: id2, ...props } = externalProps;
+  const { setNodeRef } = useDroppable({ id: id2 });
+  const items = React__default.Children.toArray(children).map((child) => child.props);
+  return /* @__PURE__ */ React__default.createElement(SortableContext, { id: id2, items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React__default.createElement("div", { ...props, ref: id2 ? setNodeRef : void 0 }, children));
+}
+List.displayName = "SortableList";
+const restrictToVerticalAxis = (_ref) => {
+  let {
+    transform
+  } = _ref;
+  return {
+    ...transform,
+    x: 0
+  };
+};
+function getContainerById(children, id2) {
+  var _a;
+  const lists = React__default.Children.toArray(children).filter(
+    (child) => child.type === List
+  );
+  const list = lists.find(
+    (list2) => list2.props.id === id2
+  );
+  if (list) {
+    return list == null ? void 0 : list.props;
+  }
+  return (_a = lists.find((l2) => React__default.Children.toArray(l2.props.children).findIndex((child) => child.props.id === id2) > -1)) == null ? void 0 : _a.props;
+}
+function Container$1(externalProps) {
+  const { children, reorder, move } = externalProps;
+  function handleDragOver(event) {
+    const { active, over } = event;
+    if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
+      return;
+    }
+    const activeList = getContainerById(children, active.id);
+    const overList = getContainerById(children, over.id);
+    if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id === overList.id) {
+      return;
+    }
+    move == null ? void 0 : move(active.id, activeList.id, overList.id);
+  }
+  function handleDragEnd(event) {
+    const { active, over } = event;
+    if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
+      return;
+    }
+    const activeList = getContainerById(children, active.id);
+    const overList = getContainerById(children, over.id);
+    if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id !== overList.id) {
+      return;
+    }
+    reorder(active.id, over.id, overList.id);
+  }
+  return /* @__PURE__ */ React__default.createElement(
+    DndContext,
+    {
+      collisionDetection: closestCenter,
+      ...externalProps,
+      modifiers: [restrictToVerticalAxis],
+      onDragOver: handleDragOver,
+      onDragEnd: handleDragEnd
+    },
+    children
+  );
+}
+Container$1.displayName = "SortableContainer";
 const isFormElement = (element) => {
   const formElementNodeNames = ["BUTTON", "INPUT", "TEXTAREA", "SELECT", "FIELDSET"];
   return formElementNodeNames.includes(element.nodeName);
@@ -43479,13 +43493,6 @@ function Item(props) {
   return /* @__PURE__ */ React__default.createElement("div", { ...elProps }, children);
 }
 Item.displayName = "SortableListItem";
-function List(externalProps) {
-  const { children, id: id2, ...props } = externalProps;
-  const { setNodeRef } = useDroppable({ id: id2 });
-  const items = React__default.Children.toArray(children).map((child) => child.props);
-  return /* @__PURE__ */ React__default.createElement(SortableContext, { id: id2, items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React__default.createElement("div", { ...props, ref: id2 ? setNodeRef : void 0 }, children));
-}
-List.displayName = "SortableList";
 const Column$3 = React__default.forwardRef(function Column2(props, ref) {
   var _a, _b, _c;
   const { column, draggable = false, ...dragAttributes } = props;
@@ -45390,6 +45397,7 @@ function ManageFiltersPopover(props) {
   const { locale: locale2, texts } = useLocalization();
   const allColumns = table.getAllLeafColumns().filter((column) => !isInternalColumn(column.id)).sort(sortByHeader);
   const columnFilters = table.getState().columnFilters;
+  const tableMeta = table.options.meta;
   const [filters, setFilters] = React__default.useState(columnFilters.length ? columnFilters : [placeholderFilter]);
   React__default.useEffect(() => {
     setFilters(columnFilters.length === 0 ? [placeholderFilter] : columnFilters);
@@ -45449,7 +45457,9 @@ function ManageFiltersPopover(props) {
   };
   return /* @__PURE__ */ React__default.createElement(Popover, { ...popoverProps, onChange: handleClose }, /* @__PURE__ */ React__default.createElement(Popover.Content, null, /* @__PURE__ */ React__default.createElement(FilterContext.Provider, { value: filters }, /* @__PURE__ */ React__default.createElement("div", { className: "flex w-[40rem] flex-col gap-4" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex h-8" }, /* @__PURE__ */ React__default.createElement("div", { className: "flex w-full items-center gap-2" }, /* @__PURE__ */ React__default.createElement("h4", { className: "mb-0 inline-flex" }, texts.table.filters.button), /* @__PURE__ */ React__default.createElement("p", { className: "text-grey-700 mb-0 mr-auto mt-px inline-flex" }, texts.table.filters.total.replace(
     "[CURRENT]",
-    new Intl.NumberFormat(locale2).format(table.getFilteredRowModel().rows.length)
+    new Intl.NumberFormat(locale2).format(
+      tableMeta.server._experimentalDataLoader2 ? length : table.getFilteredRowModel().rows.length
+    )
   ).replace("[TOTAL]", new Intl.NumberFormat(locale2).format(length))))), /* @__PURE__ */ React__default.createElement("div", { className: "flex flex-col gap-2" }, filters.map((filter2, index2) => /* @__PURE__ */ React__default.createElement(
     Filter,
     {
@@ -55500,7 +55510,7 @@ function useTableEditing(isEnabled = false, defaultToggleEditing = false, handle
         return;
       }
     }
-    const changeset = row ?? handleCreate();
+    const changeset = row ?? await handleCreate();
     try {
       if (changeset) {
         const temporaryRows = tableMeta.editing.temporaryRows;
@@ -88385,19 +88395,16 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
   const _lastUsedSearch = React__default.useRef();
   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;
+    const isAlreadyLoadedOrLoading = _pendingPageRequests.current[pageIndex] || data.cache[pageIndex] && data.cache[pageIndex][0];
+    if (!hasDataChanged && isAlreadyLoadedOrLoading) {
+      return;
+    }
     if (hasDataChanged) {
       _lastUsedSorting.current = sorting;
       _lastUsedFilters.current = filters;
       _lastUsedSearch.current = search;
       _lastUsedHiddenColumns.current = hiddenColumns;
       _pendingPageRequests.current = {};
-    } else {
-      if (_pendingPageRequests.current[pageIndex]) {
-        return;
-      }
-      if (data.cache[pageIndex] && data.cache[pageIndex][0]) {
-        return;
-      }
     }
     const dataKey = getDataKey(sorting, filters, hiddenColumns, search);
     _pendingPageRequests.current[pageIndex] = dataKey;
@@ -88443,6 +88450,7 @@ function useTableDataLoader2(fetchPage, fetchAll, options = { pageSize: DEFAULT_
         delete _pendingPageRequests.current[pageIndex];
       });
     } catch {
+      delete _pendingPageRequests.current[pageIndex];
     }
   }
   const loadAll = async (sorting, filters, hiddenColumns, search) => {
@@ -88552,12 +88560,14 @@ function getCurrentPage(currentPages) {
   return currentPages[middle];
 }
 function getDirection(pageIndex, currentPages) {
-  if (currentPages.length) {
-    if (pageIndex === currentPages[currentPages.length - 1] + 1) {
-      return "forward";
-    } else if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
-      return "backward";
-    }
+  if (!currentPages.length) {
+    return void 0;
+  }
+  if (pageIndex === currentPages[currentPages.length - 1] + 1) {
+    return "forward";
+  }
+  if (pageIndex === currentPages[0] - 1 || currentPages.length === 2 && currentPages[0] !== 0 && pageIndex === currentPages[0]) {
+    return "backward";
   }
   return void 0;
 }