@economic/taco 2.44.3 → 2.45.0-alpha.1

package/dist/primitives/Table/Core/components/Toolbar/components/Print/PrintDialog.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { Select2Value } from '../../../../../../../components/Select2/Select2';
 import { RadioGroupItemValue } from '../../../../../../../components/RadioGroup/RadioGroup';
@@ -14,4 +14,4 @@ export declare type PrintDialogProps<TType = unknown> = {
     splitGroups: boolean;
     setSplitGroups: (splitGroups: boolean) => void;
 };
-export declare function PrintDialog<TType = unknown>(props: PrintDialogProps<TType>): JSX.Element;
+export declare function PrintDialog<TType = unknown>(props: PrintDialogProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Search/Search.d.ts

@@ -6,5 +6,5 @@ declare type SearchProps<TType = unknown> = {
     table: ReactTable<TType>;
     tableRef: React.RefObject<TableRef>;
 };
-export declare function Search<TType = unknown>(props: SearchProps<TType>): JSX.Element;
+export declare function Search<TType = unknown>(props: SearchProps<TType>): React.JSX.Element;
 export {};

package/dist/primitives/Table/Core/components/Toolbar/components/Settings/HideOrOrderPopover.d.ts

@@ -1,7 +1,7 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { PopoverProps } from '../../../../../../../components/Popover/Popover';
 export declare type HideOrOrderPopoverProps<TType = unknown> = PopoverProps & {
     table: ReactTable<TType>;
 };
-export declare function HideOrOrderPopover<TType = unknown>(props: HideOrOrderPopoverProps<TType>): JSX.Element;
+export declare function HideOrOrderPopover<TType = unknown>(props: HideOrOrderPopoverProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/components/Toolbar/components/Settings/Settings.d.ts

@@ -1,8 +1,8 @@
-/// <reference types="react" />
+import React from 'react';
 import { Table as ReactTable } from '@tanstack/react-table';
 import { TableCustomSettingsRenderer } from '../../../../../types';
 export declare type SettingsProps<TType = unknown> = {
     customSettings?: TableCustomSettingsRenderer;
     table: ReactTable<TType>;
 };
-export declare function Settings<TType = unknown>(props: SettingsProps<TType>): JSX.Element;
+export declare function Settings<TType = unknown>(props: SettingsProps<TType>): React.JSX.Element;

package/dist/primitives/Table/Core/features/useTableStyle.d.ts

@@ -147,7 +147,7 @@ export declare function useTableStyle<TType = unknown>(tableId: string, table: R
         gridTemplateAreas?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | undefined;
         gridTemplateColumns?: string | number | (string & {}) | undefined;
         gridTemplateRows?: string | number | (string & {}) | undefined;
-        hangingPunctuation?: (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "allow-end" | "first" | "force-end" | "last" | undefined;
+        hangingPunctuation?: (string & {}) | "first" | "last" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "allow-end" | "force-end" | undefined;
         height?: string | number | (string & {}) | undefined;
         hyphenateCharacter?: (string & {}) | "auto" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | undefined;
         hyphens?: "auto" | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "none" | "manual" | undefined;

package/dist/primitives/Table/useTableManager/util/settings.d.ts

@@ -9,4 +9,4 @@ export declare function getSettings<TType = unknown>(table: ReactTable<TType>):
     rowHeight: "medium" | "short" | "tall" | "extra-tall" | undefined;
     sorting: import("@tanstack/react-table").SortingState;
 };
-export declare function ignoreInternalColumns(data: object): {};
+export declare function ignoreInternalColumns(data: Record<string, any>): {};

package/dist/taco.cjs.development.js

@@ -4037,25 +4037,33 @@ const Accordion = props => {
   const context = React__default.useMemo(() => ({
     as
   }), [as]);
+  const type = typeof defaultId === 'string' || typeof id === 'string' ? 'single' : 'multiple';
   let valueProps;
   if (defaultId) {
-    valueProps = {
-      defaultValue: defaultId || undefined
+    valueProps = type === 'single' ? {
+      type: 'single',
+      defaultValue: defaultId
+    } : {
+      type: 'multiple',
+      defaultValue: defaultId
     };
   } else {
-    valueProps = {
+    valueProps = type === 'single' ? {
+      type: 'single',
+      onValueChange: onChange,
+      value: id || undefined
+    } : {
+      type: 'multiple',
       onValueChange: onChange,
       value: id || undefined
     };
   }
-  const type = typeof valueProps.defaultValue === 'string' || typeof valueProps.value === 'string' ? 'single' : 'multiple';
   const className = cn('divide-y divide-grey-200', props.className);
   return /*#__PURE__*/React__default.createElement(AccordionContext.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(AccordionPrimitive.Root, Object.assign({}, otherProps, valueProps, {
     "data-taco": "accordion",
-    className: className,
-    type: type
+    className: className
   })));
 };
 Accordion.Item = Item;
@@ -4209,10 +4217,11 @@ function isElementInsideOrTriggeredFromContainer(element, container) {
   var _getOverlaySelector, _element$closest;
   const selector = (_getOverlaySelector = getOverlaySelector(element)) !== null && _getOverlaySelector !== void 0 ? _getOverlaySelector : getOverlaySelector((_element$closest = element === null || element === void 0 ? void 0 : element.closest('[role=dialog],[role=menu]')) !== null && _element$closest !== void 0 ? _element$closest : null);
   if (selector) {
-    if (container !== null && container !== void 0 && container.querySelector(selector)) {
+    const escapedSelector = CSS.escape(selector);
+    if (container !== null && container !== void 0 && container.querySelector(escapedSelector)) {
       return true;
     }
-    const elementInDocument = document.querySelector(selector);
+    const elementInDocument = document.querySelector(escapedSelector);
     // if the element does exist, see if it is itself connected to somethng that was triggered from the container
     if (elementInDocument) {
       return isElementInsideOrTriggeredFromContainer(elementInDocument, container);
@@ -5736,7 +5745,13 @@ const searchForString = (child, value, strategy = 'includes') => {
       }
       return searchForString((_child$props3 = child.props) === null || _child$props3 === void 0 ? void 0 : _child$props3.children, value, strategy);
     } else {
-      return child.toString().toLowerCase()[strategy](String(value).toLowerCase());
+      const childLowerCase = child.toString().toLowerCase();
+      const valueLowerCase = String(value).toLowerCase();
+      if (strategy === 'startsWith') {
+        return childLowerCase.startsWith(valueLowerCase);
+      } else {
+        return childLowerCase.includes(valueLowerCase);
+      }
     }
   } catch {
     return false;
@@ -6690,7 +6705,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
   }), /*#__PURE__*/React.createElement("div", {
     className: containerClassName,
     "data-taco": "dialog"
-  }, output, dialog.draggable && (/*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
+  }, /*#__PURE__*/React.createElement(React.Fragment, null, output, dialog.draggable && (/*#__PURE__*/React.createElement("div", Object.assign({}, dragHandleProps, {
     role: "button",
     draggable: true,
     "aria-grabbed": dragging,
@@ -6704,7 +6719,7 @@ const Content$4 = /*#__PURE__*/React.forwardRef(function DialogContent(props, re
     "aria-label": texts.dialog.close,
     className: "absolute right-0 top-0 mr-2 mt-2 print:hidden",
     icon: "close"
-  }))) : null), dialog.elements.drawer, dialog.elements.extra))));
+  }))) : null)), dialog.elements.drawer, dialog.elements.extra))));
 });
 
 const DialogDrawer = /*#__PURE__*/React.forwardRef(function DialogDrawer(props, ref) {
@@ -6897,12 +6912,12 @@ const Bar = props => {
     className: className
   }));
 };
-const Thumb = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, Object.assign({}, props, {
+const Thumb = () => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Thumb, {
   className: "flex-[1] rounded bg-black opacity-50"
-}));
-const Corner = props => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, Object.assign({}, props, {
+});
+const Corner = () => /*#__PURE__*/React__default.createElement(ScrollAreaPrimitive.Corner, {
   className: "bg-grey-500"
-}));
+});
 const ScrollArea = props => {
   const {
     children,
@@ -10941,10 +10956,10 @@ function useTableSearch(isEnabled = false, defaultEnableGlobalFilter = false) {
     // react-table doesn't re-render when options.enableGlobalFilter changes, so for now we force it
     const currentFilter = instance.getState().globalFilter;
     if (currentFilter) {
-      setTimeout(() => {
-        instance.setGlobalFilter('');
+      instance.resetGlobalFilter(true);
+      window.requestAnimationFrame(() => {
         instance.setGlobalFilter(currentFilter);
-      }, 1);
+      });
     }
   }
   // highlighting
@@ -13208,11 +13223,11 @@ function HeaderMenu(props) {
                 return Promise.reject(e);
               }
             };
-            popoverElement = props => /*#__PURE__*/React__default.createElement(GotoPopover, Object.assign({}, props, {
+            popoverElement = props => (/*#__PURE__*/React__default.createElement(GotoPopover, Object.assign({}, props, {
               open: true,
               onChange: handleClosePopover,
               onGoto: goto
-            }));
+            })));
           }
         }
     }
@@ -13555,10 +13570,10 @@ const FOCUS_MANAGER_OPTIONS_ARROW_KEYS = {
 };
 function useAugmentedFocusManager() {
   const focusManager = focus.useFocusManager();
-  const focusPrevious = (arrowNavigation = false) => focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
-  const focusNext = (arrowNavigation = false) => focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
-  const focusFirst = () => focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
-  const focusLast = () => focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusPrevious = (arrowNavigation = false) => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusPrevious(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusNext = (arrowNavigation = false) => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusNext(arrowNavigation ? FOCUS_MANAGER_OPTIONS_ARROW_KEYS : FOCUS_MANAGER_OPTIONS_TAB);
+  const focusFirst = () => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusFirst(FOCUS_MANAGER_OPTIONS_TAB);
+  const focusLast = () => focusManager === null || focusManager === void 0 ? void 0 : focusManager.focusLast(FOCUS_MANAGER_OPTIONS_TAB);
   return {
     focusPrevious,
     focusNext,
@@ -14075,7 +14090,7 @@ function Container(externalProps) {
     if (!(activeList !== null && activeList !== void 0 && activeList.id) || !(overList !== null && overList !== void 0 && overList.id) || activeList.id === overList.id) {
       return;
     }
-    move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
+    move === null || move === void 0 ? void 0 : move(active.id, activeList === null || activeList === void 0 ? void 0 : activeList.id, overList.id);
   }
   function handleDragEnd(event) {
     const {
@@ -14903,7 +14918,6 @@ const Colours = props => {
   const {
     color,
     onChangeColor,
-    onClick,
     onKeyDown
   } = props;
   const {
@@ -14912,7 +14926,6 @@ const Colours = props => {
   return /*#__PURE__*/React__default.createElement(RadioGroupPrimitive.Root, {
     "aria-label": texts.select2.chooseColor,
     className: "grid grid-cols-4 gap-2 focus:outline-none",
-    onClick: onClick,
     onKeyDown: onKeyDown,
     onValueChange: color => onChangeColor(color),
     value: color
@@ -15500,19 +15513,20 @@ const useChildren = ({
 };
 
 const getNextColor = options => {
-  let occurrences = {};
-  AVAILABLE_COLORS.filter(color => color !== 'transparent').forEach(color => {
-    occurrences = {
-      ...occurrences,
-      [color]: 0
-    };
-  });
-  options.reduce((occurrences, option) => {
+  const occurrences = AVAILABLE_COLORS.reduce((prev, color) => {
+    if (color !== 'transparent') {
+      return {
+        ...prev,
+        [color]: 0
+      };
+    }
+    return prev;
+  }, {});
+  options.forEach(option => {
     if (option.props.color) {
       occurrences[option.props.color] = occurrences[option.props.color] ? occurrences[option.props.color] + 1 : 1;
     }
-    return occurrences;
-  }, occurrences);
+  });
   const colors = Object.keys(occurrences);
   if (colors.length) {
     return colors.sort((a, b) => occurrences[a] - occurrences[b])[0];
@@ -16376,6 +16390,7 @@ function Control(props) {
   } = props;
   const controlRenderer = column === null || column === void 0 ? void 0 : (_column$columnDef$met2 = column.columnDef.meta) === null || _column$columnDef$met2 === void 0 ? void 0 : _column$columnDef$met2.control;
   const dataType = column === null || column === void 0 ? void 0 : (_column$columnDef$met3 = column.columnDef.meta) === null || _column$columnDef$met3 === void 0 ? void 0 : _column$columnDef$met3.dataType;
+  const ref = React__default.useRef(null);
   React.useEffect(() => {
     // Set value to false only after first render of the control (when it's undefined) after setting the FilterColumn value, because we don't want to change then the value every time filter is opened
     if (controlRenderer === 'switch' && value === undefined) {
@@ -16386,7 +16401,8 @@ function Control(props) {
     return /*#__PURE__*/React__default.cloneElement(controlRenderer({
       ...attributes,
       setValue: value => onChange(value),
-      value
+      value,
+      ref
     }), {
       ['data-query-selector']: querySelector,
       className: 'focus:yt-focus'
@@ -18421,7 +18437,7 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
   if (rowIndex < rows.length - 1) {
     miniSortRows.push(rows[rowIndex + 1]);
   }
-  const resortedRows = [...miniSortRows].sort((rowA, rowB) => {
+  const sortRows = (rowA, rowB) => {
     const sortFn = cell.column.getSortingFn();
     const sortUndefined = cell.column.columnDef.sortUndefined;
     if (!table.options.manualSorting && sortUndefined) {
@@ -18430,11 +18446,14 @@ function willRowMoveAfterSorting(cell, change, rowIndex) {
       const aUndefined = aValue === undefined;
       const bUndefined = bValue === undefined;
       if (aUndefined || bUndefined) {
+        if (sortUndefined === 'first') return aUndefined ? -1 : 1;
+        if (sortUndefined === 'last') return aUndefined ? 1 : -1;
         return aUndefined && bUndefined ? 0 : aUndefined ? sortUndefined : -sortUndefined;
       }
     }
     return sortFn(rowA, rowB, cell.column.id);
-  });
+  };
+  const resortedRows = [...miniSortRows].sort(sortRows);
   if (cell.column.getIsSorted() === 'desc') {
     resortedRows.reverse();
   }
@@ -19442,7 +19461,7 @@ function SaveStatus(props) {
   React__default.useEffect(() => {
     let timeout;
     if (status === 'complete') {
-      timeout = setTimeout(() => {
+      timeout = window.setTimeout(() => {
         tableMeta.editing.setRowSaveStatus(rowId, undefined);
       }, COMPLETE_INDICATOR_DELAY);
     }
@@ -19486,7 +19505,10 @@ function Row$2(props) {
   const isActiveRow = tableMeta.rowActive.rowActiveIndex === index;
   React__default.useEffect(() => {
     if (tableMeta.editing.isEditing && isActiveRow && tableMeta.editing.lastFocusedCellIndex === undefined) {
-      setDataFocusAttribute(focusManager.focusFirst());
+      const element = focusManager.focusFirst();
+      if (element) {
+        setDataFocusAttribute(element);
+      }
     }
   }, [tableMeta.editing.isEditing, tableMeta.rowActive.rowActiveIndex, tableMeta.editing.lastFocusedCellIndex]);
   const handleFocus = React__default.useCallback(event => {
@@ -19965,7 +19987,7 @@ const Tooltip$1 = ({
     icon: "close",
     title: locale.skip,
     "aria-label": locale.skip,
-    className: "absolute top-0 right-0 mt-1 mr-1"
+    className: "absolute right-0 top-0 mr-1 mt-1"
   })), step.title && /*#__PURE__*/React.createElement("h5", null, step.title), step.content, /*#__PURE__*/React.createElement(Group, {
     className: "mt-4 justify-end"
   }, index > 0 && (/*#__PURE__*/React.createElement(Button$1, Object.assign({}, backProps, {
@@ -20327,13 +20349,15 @@ const AgreementDisplay = props => {
   }));
 };
 
-const Container$1 = props => {
+const Container$1 = ({
+  children
+}) => {
   return /*#__PURE__*/React__default.createElement("div", {
     className: "-ml-2 flex flex-shrink-0 flex-grow-0 items-center gap-2 pr-2 xl:ml-auto xl:w-64",
     "data-taco": "header-agreements"
   }, /*#__PURE__*/React__default.createElement("span", {
     className: "hidden h-8 w-px flex-shrink-0 flex-grow-0 bg-white/[0.3] xl:flex"
-  }), props.children);
+  }), children);
 };
 function AgreementSelector(props) {
   const {
@@ -20405,7 +20429,7 @@ function AgreementSelector(props) {
     }
     return button;
   })), handleAddAgreement ? (/*#__PURE__*/React__default.createElement(Button$1, {
-    className: "focus-visible:!yt-focus-dark my-1 mx-2 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
+    className: "focus-visible:!yt-focus-dark mx-2 my-1 !h-9 shrink-0 !bg-white/[0.08] !text-white hover:!bg-white/[0.16]",
     onClick: handleAddAgreement
   }, texts.header.addAgreement)) : null, /*#__PURE__*/React__default.createElement("hr", {
     className: "my-0 h-px w-full bg-white/[0.08]"
@@ -20571,9 +20595,9 @@ const Top = props => {
     setSidebarOpen
   } = React__default.useContext(LayoutContext);
   const toggleSidebar = () => setSidebarOpen(open => !open);
-  return typeof props.children === 'function' ? props.children({
+  return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, typeof props.children === 'function' ? props.children({
     toggleSidebar
-  }) : props.children;
+  }) : props.children);
 };
 
 const Page = /*#__PURE__*/React__default.forwardRef(function LayoutPage(props, ref) {