@economic/taco 2.63.2-combobox-search.0 → 2.64.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/taco.cjs CHANGED
@@ -5396,12 +5396,31 @@ const Cancel = React__namespace.forwardRef(function AlertDialogCancel(props, ref
5396
5396
  const Action$1 = React__namespace.forwardRef(function AlertDialogAction(props, ref) {
5397
5397
  return /* @__PURE__ */ React__namespace.createElement($905f4ae918aab1aa$export$e19cd5f9376f8cee, { ...props, className: props.className, ref, asChild: true });
5398
5398
  });
5399
- const Backdrop = React__namespace.forwardRef(function Backdrop2(props, ref) {
5399
+ const useMergedRef = (ref) => {
5400
+ const internalRef = React.useRef(null);
5401
+ React.useEffect(() => {
5402
+ if (ref) {
5403
+ if (typeof ref === "function") {
5404
+ ref(internalRef.current);
5405
+ } else {
5406
+ ref.current = internalRef.current;
5407
+ }
5408
+ }
5409
+ }, [ref]);
5410
+ return internalRef;
5411
+ };
5412
+ const Backdrop = React__namespace.forwardRef(function Backdrop2(props, forwardedRef) {
5413
+ const ref = useMergedRef(forwardedRef);
5400
5414
  const className = clsx(
5401
5415
  "fixed inset-0 cursor-default overflow-y-auto bg-blue-900/[0.3] aria-hidden:invisible print:overflow-visible print:absolute",
5402
5416
  props.className
5403
5417
  );
5404
- return /* @__PURE__ */ React__namespace.createElement("div", { ...props, className, "data-taco": "backdrop", ref });
5418
+ const onPointerDown = (event) => {
5419
+ if (event.target === ref.current) {
5420
+ event.preventDefault();
5421
+ }
5422
+ };
5423
+ return /* @__PURE__ */ React__namespace.createElement("div", { ...props, className, onPointerDown, "data-taco": "backdrop", ref });
5405
5424
  });
5406
5425
  const getDialogSizeClassnames = (size2) => {
5407
5426
  switch (size2) {
@@ -9759,19 +9778,6 @@ const getBannerIcon = (type) => {
9759
9778
  }
9760
9779
  })());
9761
9780
  };
9762
- const useMergedRef = (ref) => {
9763
- const internalRef = React.useRef(null);
9764
- React.useEffect(() => {
9765
- if (ref) {
9766
- if (typeof ref === "function") {
9767
- ref(internalRef.current);
9768
- } else {
9769
- ref.current = internalRef.current;
9770
- }
9771
- }
9772
- }, [ref]);
9773
- return internalRef;
9774
- };
9775
9781
  const FOCUSABLE_ELEMENTS = [
9776
9782
  '[tabindex]:not([tabindex="-1"]):not([disabled])',
9777
9783
  "input:not([disabled])",
@@ -18386,7 +18392,7 @@ const filterData = (data, value = "") => {
18386
18392
  if (value === "" || value === null) {
18387
18393
  return data;
18388
18394
  }
18389
- const filteredOptions = [];
18395
+ const filteredOptionValues = /* @__PURE__ */ new Set();
18390
18396
  const shouldFilterOption = (option) => {
18391
18397
  if (option.disabled) {
18392
18398
  return false;
@@ -18396,22 +18402,13 @@ const filterData = (data, value = "") => {
18396
18402
  data.forEach((option) => {
18397
18403
  if (shouldFilterOption(option)) {
18398
18404
  const parents = getOptionParents(data, option.path);
18399
- const index2 = option.text.toString().toLocaleLowerCase().indexOf(value.toString().toLocaleLowerCase());
18400
- filteredOptions.push({ value: option.value, score: index2 });
18405
+ filteredOptionValues.add(option.value);
18401
18406
  if (parents !== null) {
18402
- parents.forEach((option2) => filteredOptions.push({ value: option2 == null ? void 0 : option2.value }));
18407
+ parents.forEach((option2) => filteredOptionValues.add(option2 == null ? void 0 : option2.value));
18403
18408
  }
18404
18409
  }
18405
18410
  });
18406
- return data.filter(({ value: value2 }) => filteredOptions.find((x2) => x2.value === value2)).toSorted((a2, b2) => {
18407
- var _a, _b;
18408
- const scoreA = (_a = filteredOptions.find((x2) => x2.value === a2.value)) == null ? void 0 : _a.score;
18409
- const scoreB = (_b = filteredOptions.find((x2) => x2.value === b2.value)) == null ? void 0 : _b.score;
18410
- if (scoreA !== void 0 && scoreB !== void 0) {
18411
- return scoreA - scoreB;
18412
- }
18413
- return 0;
18414
- });
18411
+ return data.filter(({ value: value2 }) => filteredOptionValues.has(value2));
18415
18412
  };
18416
18413
  const debouncer = debounce$1((f2) => f2(), 200);
18417
18414
  const convertToInputValue = (value) => String(value ?? "");
@@ -18972,6 +18969,9 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
18972
18969
  const { texts } = useLocalization();
18973
18970
  const className = clsx("inline-flex w-full text-black font-normal", externalClassName);
18974
18971
  const popoverContentRef = React__namespace.useRef(null);
18972
+ const handlePopoverClick = React__namespace.useCallback((event) => {
18973
+ event.stopPropagation();
18974
+ }, []);
18975
18975
  const handleOpenAutofocus = React__namespace.useCallback(
18976
18976
  (e3) => {
18977
18977
  var _a;
@@ -19018,7 +19018,8 @@ const Datepicker = React__namespace.forwardRef(function Datepicker2(props, ref)
19018
19018
  "div",
19019
19019
  {
19020
19020
  className: '[&_button[name="day"]:focus]:yt-focus -m-3 flex',
19021
- ref: popoverContentRef
19021
+ ref: popoverContentRef,
19022
+ onClick: handlePopoverClick
19022
19023
  },
19023
19024
  /* @__PURE__ */ React__namespace.createElement(
19024
19025
  Calendar,
@@ -29717,6 +29718,7 @@ const Content$2 = React__namespace.forwardRef(function MenuContent(props, ref) {
29717
29718
  align,
29718
29719
  className,
29719
29720
  "data-taco": "menu",
29721
+ hideWhenDetached: true,
29720
29722
  side,
29721
29723
  sideOffset: 3,
29722
29724
  style: { minWidth: menu == null ? void 0 : menu.minWidth },
@@ -38189,7 +38191,7 @@ function Header$2(context) {
38189
38191
  tableMeta.search.enableGlobalFilter ? table.getState().globalFilter : void 0
38190
38192
  );
38191
38193
  }
38192
- table.toggleAllRowsSelected(checked);
38194
+ setTimeout(() => table.toggleAllRowsSelected(checked), 1);
38193
38195
  };
38194
38196
  return /* @__PURE__ */ React.createElement(Tooltip$3, { title }, /* @__PURE__ */ React.createElement(
38195
38197
  Checkbox$2,
@@ -39144,7 +39146,9 @@ function Body(props) {
39144
39146
  const focusManager = useAugmentedFocusManager();
39145
39147
  const tableMeta = table.options.meta;
39146
39148
  const handleKeyDown = (event) => {
39147
- if (event.isDefaultPrevented() || event.isPropagationStopped()) {
39149
+ var _a;
39150
+ const isEventTriggeredInsideTable = ((_a = event.target) == null ? void 0 : _a.closest("tbody")) === ref.current;
39151
+ if (event.isDefaultPrevented() || event.isPropagationStopped() || !isEventTriggeredInsideTable) {
39148
39152
  return;
39149
39153
  }
39150
39154
  if (tableMeta.rowActive.rowActiveIndex !== void 0) {
@@ -39314,20 +39318,14 @@ const MemoedFooter = React.memo(function MemoedFooter2(props) {
39314
39318
  );
39315
39319
  });
39316
39320
  function EmptyStateBody(props) {
39317
- var _a, _b;
39321
+ var _a;
39318
39322
  const { emptyState: Placeholder2, isReady, reason, ...attributes } = props;
39319
39323
  const ref = React.useRef(null);
39324
+ const rect = useBoundingClientRectListener({ current: (_a = ref.current) == null ? void 0 : _a.parentNode });
39320
39325
  if (!isReady) {
39321
39326
  return /* @__PURE__ */ React.createElement("tbody", { ...attributes, className: "!auto-rows-fr" });
39322
39327
  }
39323
- return /* @__PURE__ */ React.createElement("tbody", { ...attributes, ref, className: "!auto-rows-fr", "data-taco": "empty-state" }, /* @__PURE__ */ React.createElement("tr", { className: "!auto-rows-fr " }, /* @__PURE__ */ React.createElement(
39324
- "td",
39325
- {
39326
- style: { maxWidth: (_b = (_a = ref == null ? void 0 : ref.current) == null ? void 0 : _a.parentNode) == null ? void 0 : _b.clientWidth },
39327
- className: "col-span-full !border-0 !p-0 hover:!bg-white"
39328
- },
39329
- Placeholder2 ? /* @__PURE__ */ React.createElement(Placeholder2, { reason }) : void 0
39330
- )));
39328
+ return /* @__PURE__ */ React.createElement("tbody", { ...attributes, ref, className: "!auto-rows-fr", "data-taco": "empty-state" }, /* @__PURE__ */ React.createElement("tr", { className: "!auto-rows-fr" }, /* @__PURE__ */ React.createElement("td", { style: { maxWidth: rect == null ? void 0 : rect.width }, className: "col-span-full !border-0 !p-0 hover:!bg-white" }, Placeholder2 ? /* @__PURE__ */ React.createElement(Placeholder2, { reason }) : void 0)));
39331
39329
  }
39332
39330
  const SearchInput22 = React.forwardRef(function SearchInput222(props, ref) {
39333
39331
  const {
@@ -42954,67 +42952,6 @@ function useDroppable(_ref) {
42954
42952
  setNodeRef
42955
42953
  };
42956
42954
  }
42957
- const restrictToVerticalAxis = (_ref) => {
42958
- let {
42959
- transform
42960
- } = _ref;
42961
- return {
42962
- ...transform,
42963
- x: 0
42964
- };
42965
- };
42966
- function getContainerById(children, id2) {
42967
- var _a;
42968
- const lists = React.Children.toArray(children).filter(
42969
- (child) => child.type.displayName === "SortableList"
42970
- );
42971
- const list = lists.find(
42972
- (list2) => list2.props.id === id2
42973
- );
42974
- if (list) {
42975
- return list == null ? void 0 : list.props;
42976
- }
42977
- return (_a = lists.find((l2) => React.Children.toArray(l2.props.children).findIndex((child) => child.props.id === id2) > -1)) == null ? void 0 : _a.props;
42978
- }
42979
- function Container$1(externalProps) {
42980
- const { children, reorder, move } = externalProps;
42981
- function handleDragOver(event) {
42982
- const { active, over } = event;
42983
- if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
42984
- return;
42985
- }
42986
- const activeList = getContainerById(children, active.id);
42987
- const overList = getContainerById(children, over.id);
42988
- if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id === overList.id) {
42989
- return;
42990
- }
42991
- move(active.id, activeList == null ? void 0 : activeList.id, overList.id);
42992
- }
42993
- function handleDragEnd(event) {
42994
- const { active, over } = event;
42995
- if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
42996
- return;
42997
- }
42998
- const activeList = getContainerById(children, active.id);
42999
- const overList = getContainerById(children, over.id);
43000
- if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id !== overList.id) {
43001
- return;
43002
- }
43003
- reorder(active.id, over.id, overList.id);
43004
- }
43005
- return /* @__PURE__ */ React.createElement(
43006
- DndContext,
43007
- {
43008
- collisionDetection: closestCenter,
43009
- ...externalProps,
43010
- modifiers: [restrictToVerticalAxis],
43011
- onDragOver: handleDragOver,
43012
- onDragEnd: handleDragEnd
43013
- },
43014
- children
43015
- );
43016
- }
43017
- Container$1.displayName = "SortableContainer";
43018
42955
  function arrayMove(array2, from, to) {
43019
42956
  const newArray = array2.slice();
43020
42957
  newArray.splice(to < 0 ? newArray.length + to : to, 0, newArray.splice(from, 1)[0]);
@@ -43483,6 +43420,74 @@ function normalizeLocalDisabled(localDisabled, globalDisabled) {
43483
43420
  };
43484
43421
  }
43485
43422
  [KeyboardCode.Down, KeyboardCode.Right, KeyboardCode.Up, KeyboardCode.Left];
43423
+ function List(externalProps) {
43424
+ const { children, id: id2, ...props } = externalProps;
43425
+ const { setNodeRef } = useDroppable({ id: id2 });
43426
+ const items = React.Children.toArray(children).map((child) => child.props);
43427
+ return /* @__PURE__ */ React.createElement(SortableContext, { id: id2, items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React.createElement("div", { ...props, ref: id2 ? setNodeRef : void 0 }, children));
43428
+ }
43429
+ List.displayName = "SortableList";
43430
+ const restrictToVerticalAxis = (_ref) => {
43431
+ let {
43432
+ transform
43433
+ } = _ref;
43434
+ return {
43435
+ ...transform,
43436
+ x: 0
43437
+ };
43438
+ };
43439
+ function getContainerById(children, id2) {
43440
+ var _a;
43441
+ const lists = React.Children.toArray(children).filter(
43442
+ (child) => child.type === List
43443
+ );
43444
+ const list = lists.find(
43445
+ (list2) => list2.props.id === id2
43446
+ );
43447
+ if (list) {
43448
+ return list == null ? void 0 : list.props;
43449
+ }
43450
+ return (_a = lists.find((l2) => React.Children.toArray(l2.props.children).findIndex((child) => child.props.id === id2) > -1)) == null ? void 0 : _a.props;
43451
+ }
43452
+ function Container$1(externalProps) {
43453
+ const { children, reorder, move } = externalProps;
43454
+ function handleDragOver(event) {
43455
+ const { active, over } = event;
43456
+ if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
43457
+ return;
43458
+ }
43459
+ const activeList = getContainerById(children, active.id);
43460
+ const overList = getContainerById(children, over.id);
43461
+ if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id === overList.id) {
43462
+ return;
43463
+ }
43464
+ move == null ? void 0 : move(active.id, activeList.id, overList.id);
43465
+ }
43466
+ function handleDragEnd(event) {
43467
+ const { active, over } = event;
43468
+ if (!(active == null ? void 0 : active.id) || !(over == null ? void 0 : over.id)) {
43469
+ return;
43470
+ }
43471
+ const activeList = getContainerById(children, active.id);
43472
+ const overList = getContainerById(children, over.id);
43473
+ if (!(activeList == null ? void 0 : activeList.id) || !(overList == null ? void 0 : overList.id) || activeList.id !== overList.id) {
43474
+ return;
43475
+ }
43476
+ reorder(active.id, over.id, overList.id);
43477
+ }
43478
+ return /* @__PURE__ */ React.createElement(
43479
+ DndContext,
43480
+ {
43481
+ collisionDetection: closestCenter,
43482
+ ...externalProps,
43483
+ modifiers: [restrictToVerticalAxis],
43484
+ onDragOver: handleDragOver,
43485
+ onDragEnd: handleDragEnd
43486
+ },
43487
+ children
43488
+ );
43489
+ }
43490
+ Container$1.displayName = "SortableContainer";
43486
43491
  const isFormElement = (element) => {
43487
43492
  const formElementNodeNames = ["BUTTON", "INPUT", "TEXTAREA", "SELECT", "FIELDSET"];
43488
43493
  return formElementNodeNames.includes(element.nodeName);
@@ -43506,13 +43511,6 @@ function Item(props) {
43506
43511
  return /* @__PURE__ */ React.createElement("div", { ...elProps }, children);
43507
43512
  }
43508
43513
  Item.displayName = "SortableListItem";
43509
- function List(externalProps) {
43510
- const { children, id: id2, ...props } = externalProps;
43511
- const { setNodeRef } = useDroppable({ id: id2 });
43512
- const items = React.Children.toArray(children).map((child) => child.props);
43513
- return /* @__PURE__ */ React.createElement(SortableContext, { id: id2, items, strategy: verticalListSortingStrategy }, /* @__PURE__ */ React.createElement("div", { ...props, ref: id2 ? setNodeRef : void 0 }, children));
43514
- }
43515
- List.displayName = "SortableList";
43516
43514
  const Column$3 = React.forwardRef(function Column2(props, ref) {
43517
43515
  var _a, _b, _c;
43518
43516
  const { column, draggable = false, ...dragAttributes } = props;
@@ -45417,6 +45415,7 @@ function ManageFiltersPopover(props) {
45417
45415
  const { locale: locale2, texts } = useLocalization();
45418
45416
  const allColumns = table.getAllLeafColumns().filter((column) => !isInternalColumn(column.id)).sort(sortByHeader);
45419
45417
  const columnFilters = table.getState().columnFilters;
45418
+ const tableMeta = table.options.meta;
45420
45419
  const [filters, setFilters] = React.useState(columnFilters.length ? columnFilters : [placeholderFilter]);
45421
45420
  React.useEffect(() => {
45422
45421
  setFilters(columnFilters.length === 0 ? [placeholderFilter] : columnFilters);
@@ -45476,7 +45475,9 @@ function ManageFiltersPopover(props) {
45476
45475
  };
45477
45476
  return /* @__PURE__ */ React.createElement(Popover, { ...popoverProps, onChange: handleClose }, /* @__PURE__ */ React.createElement(Popover.Content, null, /* @__PURE__ */ React.createElement(FilterContext.Provider, { value: filters }, /* @__PURE__ */ React.createElement("div", { className: "flex w-[40rem] flex-col gap-4" }, /* @__PURE__ */ React.createElement("div", { className: "flex h-8" }, /* @__PURE__ */ React.createElement("div", { className: "flex w-full items-center gap-2" }, /* @__PURE__ */ React.createElement("h4", { className: "mb-0 inline-flex" }, texts.table.filters.button), /* @__PURE__ */ React.createElement("p", { className: "text-grey-700 mb-0 mr-auto mt-px inline-flex" }, texts.table.filters.total.replace(
45478
45477
  "[CURRENT]",
45479
- new Intl.NumberFormat(locale2).format(table.getFilteredRowModel().rows.length)
45478
+ new Intl.NumberFormat(locale2).format(
45479
+ tableMeta.server._experimentalDataLoader2 ? length : table.getFilteredRowModel().rows.length
45480
+ )
45480
45481
  ).replace("[TOTAL]", new Intl.NumberFormat(locale2).format(length))))), /* @__PURE__ */ React.createElement("div", { className: "flex flex-col gap-2" }, filters.map((filter2, index2) => /* @__PURE__ */ React.createElement(
45481
45482
  Filter,
45482
45483
  {
@@ -55527,7 +55528,7 @@ function useTableEditing(isEnabled = false, defaultToggleEditing = false, handle
55527
55528
  return;
55528
55529
  }
55529
55530
  }
55530
- const changeset = row ?? handleCreate();
55531
+ const changeset = row ?? await handleCreate();
55531
55532
  try {
55532
55533
  if (changeset) {
55533
55534
  const temporaryRows = tableMeta.editing.temporaryRows;