@economic/taco 2.44.0 → 2.45.0-alpha.0

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;
@@ -5736,7 +5744,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 +6704,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 +6718,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 +6911,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,
@@ -13208,11 +13222,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 +13569,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 +14089,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 {
@@ -14894,7 +14908,6 @@ const Colours = props => {
   const {
     color,
     onChangeColor,
-    onClick,
     onKeyDown
   } = props;
   const {
@@ -14903,7 +14916,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
@@ -15501,19 +15513,20 @@ const filterOption = (child, searchQuery) => {
 };
 
 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];
@@ -15797,8 +15810,12 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
       setValue(nextValue);
     }
   };
-  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md outline-none', createCollectionClassName());
-  const isInlineCreation = onCreate && !createDialog;
+  const hasInlineCreation = onCreate && !createDialog;
+  const hasSearch = flattenedChildren.length > 5 || hasInlineCreation;
+  const className = cn('border-grey-300 rounded border bg-white py-1.5 shadow-md ', {
+    'focus-within:yt-focus': !hasSearch,
+    'outline-none': hasSearch
+  }, createCollectionClassName());
   return /*#__PURE__*/React__default.createElement(Select2Context.Provider, {
     value: context
   }, /*#__PURE__*/React__default.createElement(PopoverPrimitive.Root, {
@@ -15829,8 +15846,8 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     style: {
       minWidth: dimensions !== null && dimensions !== void 0 && dimensions.width ? `${dimensions.width}px` : undefined
     }
-  }, flattenedChildren.length > 5 || isInlineCreation ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
-    placeholder: isInlineCreation ? texts.select2.searchOrCreate : texts.select2.search,
+  }, hasSearch ? (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Search$2, {
+    placeholder: hasInlineCreation ? texts.select2.searchOrCreate : texts.select2.search,
     ref: searchRef,
     onTabKeyPress: () => setTabTriggeredClose(true)
   }), multiple && selectOptions.length > 1 && (/*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement(Button$1, {
@@ -15852,7 +15869,7 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     className: "text-grey-700 -mt-0.5 flex h-8 items-center px-2",
     role: "presentation"
   }, texts.listbox.empty)) : (/*#__PURE__*/React__default.createElement(Root$1, {
-    className: "flex flex-col gap-0.5",
+    className: "flex flex-col gap-0.5 focus-visible:outline-none",
     customSelector: ":scope > button",
     disabled: disabled,
     multiple: multiple,
@@ -15860,7 +15877,6 @@ const Select2 = /*#__PURE__*/React__default.forwardRef(function Select2(props, r
     readOnly: readOnly,
     ref: listboxRef,
     setValue: setValue,
-    tabIndex: -1,
     value: value
   }, searchQuery === '' ? (/*#__PURE__*/React__default.createElement(Collection$1, null, initialChildren)) : (/*#__PURE__*/React__default.createElement(Collection$1, null, filteredChildren)), onCreate ? /*#__PURE__*/React__default.createElement(Create, {
     onCreate: onCreate,
@@ -16351,6 +16367,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) {
@@ -16361,7 +16378,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'
@@ -18396,7 +18414,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) {
@@ -18405,11 +18423,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();
   }
@@ -19461,7 +19482,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 => {
@@ -19940,7 +19964,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, {
@@ -20302,13 +20326,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 {
@@ -20380,7 +20406,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]"