@economic/taco 2.53.2 → 2.55.0-settings.0

package/dist/taco.cjs.development.js

@@ -11,9 +11,9 @@ var AlertDialogPrimitive = require('@radix-ui/react-alert-dialog');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var reactDayPicker = require('react-day-picker');
-var CheckboxPrimitive = require('@radix-ui/react-checkbox');
-var uuid = require('uuid');
+var reactAriaComponents = require('react-aria-components');
 var PopoverPrimitive = require('@radix-ui/react-popover');
+var uuid = require('uuid');
 var debounce$1 = _interopDefault(require('lodash/debounce'));
 var dateFns = require('date-fns');
 var DialogPrimitive = require('@radix-ui/react-dialog');
@@ -24,10 +24,10 @@ var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var reactUseControllableState = require('@radix-ui/react-use-controllable-state');
 var HoverCardPrimitive = require('@radix-ui/react-hover-card');
 var CollapsiblePrimitive = require('@radix-ui/react-collapsible');
-var PrimitiveSwitch = require('@radix-ui/react-switch');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ReactDOM = _interopDefault(require('react-dom'));
+var lodash = require('lodash');
 var reactTable = require('@tanstack/react-table');
 var get = _interopDefault(require('lodash/get'));
 var reactVirtual = require('@tanstack/react-virtual');
@@ -4327,10 +4327,11 @@ function isElementTriggeredFromContainer(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 (elementInDocument === container) {
       return true;
     }
@@ -5245,11 +5246,6 @@ const Card = /*#__PURE__*/React.forwardRef(function Card(props, ref) {
 });
 Card.Content = Content$2;
 
-// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
-const useId = nativeId => {
-  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
-};
-
 const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, ref) {
   const {
     delay = 350,
@@ -5292,75 +5288,53 @@ const Spinner = /*#__PURE__*/React__default.forwardRef(function Spinner(props, r
 const Checkbox = /*#__PURE__*/React.forwardRef(function Checkbox(props, ref) {
   const {
     checked,
+    className,
+    defaultChecked,
     indeterminate,
+    readOnly,
     invalid,
-    label,
-    loading,
+    disabled,
+    required,
     onChange,
+    loading,
+    label,
+    onClick,
     ...otherProps
   } = props;
-  const id = useId(props.id);
-  const className = cn('bg-white h-5 w-5 border rounded text-sm flex-shrink-0 focus-visible:yt-focus disabled:cursor-not-allowed text-white', {
+  // Converts the forwarded ref to an object ref, as required by RAC Checkbox.
+  const inputRef = useMergedRef(ref);
+  const checkboxContainerClassName = cn('group flex justify-center gap-2 data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
+  // Styling for other complex, state-driven scenarios is managed directly within the styles.css file.
+  const checkboxClassName = cn('bg-white h-5 w-5 border rounded text-sm flex flex-shrink-0 text-white cursor-pointer', {
     'self-start': !!label,
     'mt-[0.1rem]': !label
-  }, invalid ? {
-    'border-red-500 hover:border-red-700 aria-checked:border-red-500 aria-checked-mixed:border-red-500 aria-checked:bg-red-500 aria-checked-mixed:bg-red-500 aria-checked:hover:border-red-700 aria-checked-mixed:hover:border-red-700 aria-checked:hover:bg-red-700 aria-checked-mixed:hover:bg-red-700': !props.disabled,
-    'border-red-500/50 aria-checked:wcag-red-500/50 aria-checked-mixed:wcag-red-500/50': props.disabled
-  } : {
-    'border-grey-500 hover:border-grey-700 aria-checked:border-blue-500 aria-checked-mixed:border-blue-500 aria-checked:bg-blue-500 aria-checked-mixed:bg-blue-500 aria-checked:hover:border-blue-700 aria-checked-mixed:hover:border-blue-700 aria-checked:hover:bg-blue-700 aria-checked-mixed:hover:bg-blue-700': !props.disabled,
-    'border-grey-500/50 aria-checked:bg-blue-500/50 aria-checked-mixed:bg-blue-500/50': props.disabled
-  }, props.className);
-  let handleChange;
-  if (onChange) {
-    handleChange = checked => onChange(checked === 'indeterminate' ? false : checked);
-  }
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  // the enter keyboard shortcut isn't supported by default, but we want it
-  const handleKeyDown = event => {
-    if (event.key === 'Enter') {
-      event.currentTarget.click();
-    }
-  };
-  const spinnerClassname = cn(
-  //Spinner is slightly bigger then 'line' and 'tick' icons, so making it 2px smaller from each side
-  "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))]", {
-    'text-blue-500': !checked && !indeterminate
-  });
-  const element = /*#__PURE__*/React.createElement(CheckboxPrimitive.Root, Object.assign({}, otherProps, labelledByProps, {
-    "aria-invalid": invalid ? 'true' : undefined,
+  }, className);
+  return /*#__PURE__*/React.createElement(reactAriaComponents.Checkbox, Object.assign({}, otherProps, {
+    className: checkboxContainerClassName,
+    "data-taco": "checkbox-container",
+    defaultSelected: defaultChecked,
+    isDisabled: disabled,
+    isIndeterminate: indeterminate,
+    isInvalid: invalid,
+    isRequired: required,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    inputRef: inputRef,
+    onChange: onChange
+  }), ({
+    isIndeterminate,
+    isSelected
+  }) => (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: checkboxClassName,
     "data-taco": "checkbox",
-    checked: indeterminate ? 'indeterminate' : checked,
-    className: className,
-    onCheckedChange: handleChange,
-    onKeyDown: handleKeyDown,
-    ref: ref
-  }), loading ? (/*#__PURE__*/React.createElement(Spinner, {
-    className: spinnerClassname
-  })) : (/*#__PURE__*/React.createElement(CheckboxPrimitive.Indicator, {
-    className: "flex h-full w-full"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    name: indeterminate ? 'line' : 'tick',
+    onClick: onClick
+  }, loading ? (/*#__PURE__*/React.createElement(Spinner, {
+    className: "m-0.5 !h-[calc(100%-theme('spacing.1'))] !w-[calc(100%-theme('spacing.1'))] text-blue-500 group-data-[indeterminate]:text-white group-data-[selected]:text-white"
+  })) : (isIndeterminate || isSelected) && (/*#__PURE__*/React.createElement(Icon, {
+    "aria-hidden": true,
+    name: isIndeterminate ? 'line' : 'tick',
     className: "!h-full !w-full"
-  }))));
-  if (label) {
-    const labelContainerClassName = cn('flex items-center cursor-pointer gap-2', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: labelContainerClassName,
-      "data-taco": "checkbox-container"
-    }, element, /*#__PURE__*/React.createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
+  }))), label)));
 });
 Checkbox.displayName = 'Checkbox';
 
@@ -5798,10 +5772,13 @@ const ScrollableList = /*#__PURE__*/React.forwardRef(function ScrollableList(pro
   // so need to be taken out of screen reader scope.
   , {
     "aria-hidden": true,
-    tabIndex: -1,
+    excludeFromTabOrder: true,
     checked: optionProps['aria-selected'],
-    onChange: () => null,
-    className: "pointer-events-none ml-2 self-center p-px"
+    onChange: () => {
+      var _optionProps$ref, _optionProps$ref$curr;
+      (_optionProps$ref = optionProps.ref) === null || _optionProps$ref === void 0 ? void 0 : (_optionProps$ref$curr = _optionProps$ref.current) === null || _optionProps$ref$curr === void 0 ? void 0 : _optionProps$ref$curr.click();
+    },
+    className: "ml-2 self-center p-px"
   }))))) : (/*#__PURE__*/React.createElement("li", {
     className: "yt-list__empty"
   }, /*#__PURE__*/React.createElement("span", null, texts.listbox.empty))));
@@ -6001,22 +5978,23 @@ const useCombobox = ({
   const data = React.useMemo(() => shouldFilterData ? filterData(flattenedData, inputValue) : flattenedData, [shouldFilterData, inputValue, flattenedData]);
   // listbox/select change value _with_ the index, but combobox changes on select of an index (click/enter), so we need state
   const [currentIndex, setCurrentIndex] = React.useState(inputValue !== undefined ? getIndexFromValue(data, inputValue) : undefined);
-  const setInputValueByIndex = index => {
+  const setInputValueByIndex = (index, event) => {
     if (index !== undefined) {
       const option = data[index];
       if (option && !option.disabled) {
-        setInputValueByRef$1(inputRef.current, option.value, 'focusout');
+        const eventType = event !== null && event !== void 0 ? event : 'focusout';
+        setInputValueByRef$1(inputRef.current, option.value, eventType);
       }
     }
   };
-  const setCurrentValue = index => {
+  const setCurrentValue = (index, event) => {
     if (index === undefined) {
       return;
     }
     const option = data[index];
     // if the selected option is not already selected, trigger blur event
     if (option.value !== value) {
-      setInputValueByIndex(index);
+      setInputValueByIndex(index, event);
     } else {
       // if the selected option is already selected, refill input with its value
       setInputValue(convertToInputValue(value));
@@ -6112,7 +6090,8 @@ const useCombobox = ({
           }
         case 'Tab':
           {
-            setCurrentValue(currentIndex);
+            // default focusout will trigger onBlur and we don't want to trigger it twice
+            setCurrentValue(currentIndex, 'change');
             setOpen(false);
             return;
           }
@@ -6127,7 +6106,8 @@ const useCombobox = ({
               }
             }
             if (open) {
-              setCurrentValue(currentIndex);
+              // we need to focusout to trigger onBlur as we are not actually blurring the input
+              setCurrentValue(currentIndex, 'focusout');
               setOpen(false);
             }
             return;
@@ -7769,44 +7749,46 @@ const Collapsible = /*#__PURE__*/React__default.forwardRef(function Accordion(pr
 
 const Switch = /*#__PURE__*/React.forwardRef(function Switch(props, ref) {
   const {
+    checked,
+    defaultChecked,
+    readOnly,
     label,
     onChange,
+    disabled,
+    onClick,
+    className,
     ...otherProps
   } = props;
-  const id = useId(props.id);
-  const className = cn('group h-5 w-9 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus', {
-    'mr-2': !!label,
-    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
-    'bg-grey-500/50 aria-checked:bg-blue-500/50 cursor-not-allowed': props.disabled
-  }, props.className);
-  let labelledByProps = null;
-  if (label) {
-    labelledByProps = {
-      'aria-labelledby': `${id}-label`,
-      id
-    };
-  }
-  const element = /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, labelledByProps, {
-    className: className,
+  const inputRef = useMergedRef(ref);
+  const switchContainerClassName = cn('group flex self-start', 'data-[disabled]:text-grey-300 data-[disabled]:cursor-not-allowed');
+  const switchClassName = cn('h-5 w-9 flex flex-shrink-0 rounded-full inline-flex cursor-pointer bg-grey-500', 'group-data-[focus-visible]:yt-focus', {
+    'mr-2': !!label
+  }, 'group-hover:bg-grey-700',
+  // When switch is selected
+  'group-data-[selected]:bg-blue-500',
+  // When switch is selected and hovered
+  'group-hover:group-data-[selected]:bg-blue-700',
+  // When switch is disabled
+  'group-data-[disabled]:!bg-grey-500/50 group-data-[disabled]:cursor-not-allowed',
+  // When switch is disabled and selected
+  'group-data-[disabled]:group-data-[selected]:!bg-blue-500/50', className);
+  const switchThumbClassName = cn('pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform', 'group-data-[disabled]:opacity-50', 'group-data-[selected]:translate-x-[1.1rem]');
+  return /*#__PURE__*/React.createElement(reactAriaComponents.Switch, Object.assign({}, otherProps, {
+    className: switchContainerClassName,
+    "data-taco": "switch-container",
+    inputRef: inputRef,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    defaultSelected: defaultChecked,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: switchClassName,
     "data-taco": "switch",
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "pointer-events-none mt-0.5 h-4 w-4 translate-x-[0.15rem] rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[1.1rem]"
-  }));
-  if (label) {
-    const labelContainerClassName = cn('flex self-start cursor-pointer', {
-      'cursor-not-allowed text-grey-300': props.disabled
-    });
-    return /*#__PURE__*/React.createElement("span", {
-      className: labelContainerClassName,
-      "data-taco": "switch-container"
-    }, element, /*#__PURE__*/React.createElement("label", {
-      htmlFor: id,
-      id: `${id}-label`
-    }, label));
-  }
-  return element;
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement("span", {
+    className: switchThumbClassName
+  })), label);
 });
 Switch.displayName = 'Switch';
 
@@ -7864,13 +7846,18 @@ const Switch$1 = /*#__PURE__*/React__default.forwardRef(function Switch$1(props,
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
+  const controlClassName = cn(
+  // When ToggleItem is hovered
+  'group-hover/toggle:bg-grey-700',
+  // When ToggleItem is hovered and switch inside it is selected
+  'group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Switch, {
     checked: checked,
-    className: "group-hover/toggle:[&[aria-checked=false]]:bg-grey-700 group-hover/toggle:[&[aria-checked=true]]:bg-blue-700",
+    className: controlClassName,
     disabled: props.disabled,
     onChange: toggle,
     ref: switchRef,
-    tabIndex: -1
+    excludeFromTabOrder: true
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -7891,13 +7878,18 @@ const Checkbox$1 = /*#__PURE__*/React__default.forwardRef(function Switch(props,
     setChecked(!checked);
     onChange(!checked);
   }, [checked, onChange]);
+  const controlClassName = cn(
+  // When ToggleItem is hovered
+  'group-hover/toggle:border-grey-700',
+  // When ToggleItem is hovered and checkbox inside it is selected
+  'group-hover/toggle:group-data-[selected]:border-blue-700 group-hover/toggle:group-data-[selected]:bg-blue-700');
   const control = /*#__PURE__*/React__default.createElement(Checkbox, {
     checked: checked,
-    className: "group-hover/toggle:[&[aria-checked=false]]:border-grey-700 group-hover/toggle:[&[aria-checked=true]]:border-blue-700 group-hover/checkbox:[&[aria-checked=true]]:bg-blue-700",
+    className: controlClassName,
     disabled: props.disabled,
     onChange: toggle,
     ref: checkboxRef,
-    tabIndex: -1
+    excludeFromTabOrder: true
   });
   return /*#__PURE__*/React__default.createElement(ToggleItem, Object.assign({}, attributes, {
     control: control,
@@ -8844,20 +8836,41 @@ Menu$1.SubMenu = SubMenu;
 
 const ModeSwitch = /*#__PURE__*/React.forwardRef(function ModeSwitch(props, ref) {
   const {
+    checked,
+    defaultChecked,
+    readOnly,
     onChange,
+    disabled,
+    className,
     ...otherProps
   } = props;
-  const className = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex focus-visible:yt-focus p-1', {
-    'bg-grey-500 hover:bg-grey-700 aria-checked:bg-blue-500 aria-checked:hover:bg-blue-700': !props.disabled,
-    'bg-grey-500 aria-checked:bg-blue-500 cursor-not-allowed opacity-50': props.disabled
-  }, props.className);
-  return /*#__PURE__*/React.createElement(PrimitiveSwitch.Root, Object.assign({}, otherProps, {
-    className: className,
-    "data-taco": "mode",
-    onCheckedChange: onChange,
-    ref: ref
-  }), /*#__PURE__*/React.createElement(PrimitiveSwitch.Thumb, {
-    className: "pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform group-disabled:opacity-50 group-aria-checked:translate-x-[100%]"
+  const inputRef = useMergedRef(ref);
+  const switchClassName = cn('group w-14 h-8 flex flex-shrink-0 rounded-full inline-flex p-1 cursor-pointer bg-grey-500', 'data-[focus-visible]:yt-focus', 'hover:bg-grey-700',
+  // When modeswitch is selected
+  'data-[selected]:bg-blue-500',
+  // When modeswitch is selected and hovered
+  'hover:data-[selected]:bg-blue-700',
+  // When modeswitch is disabled
+  'data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 data-[disabled]:bg-grey-500 ',
+  // When modeswitch is disabled and selected
+  'data-[disabled]:data-[selected]:!bg-blue-500', className);
+  const switchThumbClassName = cn('pointer-events-none flex h-6 w-6 items-center justify-center rounded-full bg-white transition-transform will-change-transform',
+  // When modeswitch is disabled
+  'group-data-[disabled]:opacity-50',
+  // When modeswitch is selected
+  'group-data-[selected]:translate-x-full');
+  return /*#__PURE__*/React.createElement(reactAriaComponents.Switch, Object.assign({}, otherProps, {
+    className: switchClassName,
+    defaultSelected: defaultChecked,
+    id: otherProps.id,
+    inputRef: inputRef,
+    isDisabled: disabled,
+    isReadOnly: readOnly,
+    isSelected: checked,
+    onChange: onChange
+  }), /*#__PURE__*/React.createElement("span", {
+    className: switchThumbClassName,
+    "data-taco": "mode"
   }, /*#__PURE__*/React.createElement(Icon, {
     name: "edit-simple",
     className: "pointer-events-none !h-5 !w-5"
@@ -9946,16 +9959,57 @@ const ToastProvider = ({
 };
 const useToast = () => React.useContext(ToastContext);
 
-const TacoContext = /*#__PURE__*/React.createContext({
-  uniqueUserIdentifier: ''
-});
+const TacoContext = /*#__PURE__*/React.createContext({});
+
+function useTacoSettings(load, save) {
+  const saveSetting = function (path, value) {
+    try {
+      setState(currentState => lodash.setWith(currentState, path, value, Object));
+      return Promise.resolve(save(path, value)); // don't block, since we have local state
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const loadSetting = function (path) {
+    try {
+      const currentValue = lodash.get(state, path);
+      if (currentValue) {
+        return Promise.resolve(currentValue);
+      }
+      return Promise.resolve(load(path)).then(function (value) {
+        setState(currentState => lodash.setWith(currentState, path, value, Object));
+        return value;
+      });
+    } catch (e) {
+      return Promise.reject(e);
+    }
+  };
+  const [state, setState] = React.useState({});
+  function getSetting(path) {
+    return lodash.get(state, path);
+  }
+  return {
+    getSetting,
+    loadSetting,
+    saveSetting
+  };
+}
+
 const Provider = props => {
   const {
     children,
     localization,
-    settings
+    loadSetting,
+    saveSetting,
+    userId
   } = props;
-  const context = React.useMemo(() => settings, [JSON.stringify(settings)]);
+  const settings = useTacoSettings(loadSetting, saveSetting);
+  const context = React.useMemo(() => {
+    return {
+      settings,
+      userId
+    };
+  }, []);
   return /*#__PURE__*/React.createElement(LocalizationProvider, {
     localization: localization
   }, /*#__PURE__*/React.createElement(TacoContext.Provider, {
@@ -10369,6 +10423,7 @@ function getHiddenColumns(columnVisibility = {}) {
   return Object.keys(columnVisibility).filter(c => columnVisibility[c] === false);
 }
 
+const getSettingsId = tableId => `table.${tableId.replace('.', '_')}`;
 function getSettings(table) {
   const meta = table.options.meta;
   const state = table.getState();
@@ -10382,6 +10437,7 @@ function getSettings(table) {
     excludeUnmatchedRecordsInSearch: table.options.enableGlobalFilter,
     fontSize: meta.fontSize.isEnabled ? meta.fontSize.size : undefined,
     //grouping: table.options.enableGrouping ? state.grouping : undefined,
+    print: meta.printing.settings,
     rowHeight: meta.rowHeight.isEnabled ? meta.rowHeight.height : undefined,
     //searchQuery: table.options.enableGlobalFilter ? state.globalFilter : undefined,
     sorting: state.sorting
@@ -10688,8 +10744,11 @@ function useReactTableInitialState(props, columns, persistedSettings, defaults)
     if (columnPinning !== null && columnPinning !== void 0 && (_columnPinning$left = columnPinning.left) !== null && _columnPinning$left !== void 0 && _columnPinning$left.length) {
       columnPinning.left = freezeUptoExternalColumn(columnOrder.indexOf(columnPinning.left[columnPinning.left.length - 1]), columnOrder);
     } else {
-      if (props.defaultColumnFreezingIndex) {
-        columnPinning.left = freezeUptoExternalColumn(props.defaultColumnFreezingIndex, columnOrder);
+      if (props.defaultColumnFreezingIndex !== undefined) {
+        const index = typeof props.defaultColumnFreezingIndex === 'function' ? props.defaultColumnFreezingIndex(persistedSettings) : props.defaultColumnFreezingIndex;
+        if (index !== undefined) {
+          columnPinning.left = freezeUptoExternalColumn(index, columnOrder);
+        }
       } else {
         columnPinning.left = unfreezeAllExternalColumns(columnOrder);
       }
@@ -10895,53 +10954,28 @@ function useTableFontSize(isEnabled = false, defaultFontSize = 'medium') {
   };
 }
 
-function useTacoSettings() {
+function useTaco() {
   return React__default.useContext(TacoContext);
 }
 
-const useLocalStorage = (key, initialValue) => {
-  const [state, setState] = React__default.useState(() => {
-    if (!key) {
-      return initialValue;
-    }
-    try {
-      const localStorageValue = localStorage.getItem(key);
-      if (typeof localStorageValue !== 'string') {
-        localStorage.setItem(key, JSON.stringify(initialValue));
-        return initialValue;
-      } else {
-        return JSON.parse(localStorageValue || 'null');
-      }
-    } catch {
-      // If user is in private mode or has storage restriction
-      // localStorage can throw. JSON.parse and JSON.stringify
-      // can throw, too.
-      return initialValue;
-    }
-  });
-  React__default.useEffect(() => {
-    if (!key) {
-      return;
-    }
-    try {
-      const serializedState = JSON.stringify(state);
-      localStorage.setItem(key, serializedState);
-    } catch {
-      // If user is in private mode or has storage restriction
-      // localStorage can throw. Also JSON.stringify can throw.
-    }
-  }, [key, state]);
-  const clear = () => {
-    if (key) {
-      localStorage.removeItem(key);
-    }
-  };
-  return [state, setState, clear];
+const DEFAULT_PRINT_SETTINGS = {
+  size: 'A4',
+  orientation: 'portrait',
+  allRows: true,
+  splitGroups: true
 };
-
 function useTablePrinting(isEnabled = false, tableId) {
+  var _taco$settings$getSet, _taco$settings$getSet2;
   const [isPrinting, setIsPrinting] = React__default.useState(false);
-  const [settings, setSetting] = useTablePrintingSettings(tableId);
+  const taco = useTaco();
+  const key = getSettingsId(tableId);
+  const [settings, _setSettings] = React__default.useState((_taco$settings$getSet = (_taco$settings$getSet2 = taco.settings.getSetting(key)) === null || _taco$settings$getSet2 === void 0 ? void 0 : _taco$settings$getSet2.print) !== null && _taco$settings$getSet !== void 0 ? _taco$settings$getSet : DEFAULT_PRINT_SETTINGS);
+  function setSetting(path, value) {
+    _setSettings(currentSettings => ({
+      ...currentSettings,
+      [path]: value
+    }));
+  }
   return {
     isEnabled,
     isPrinting,
@@ -10950,24 +10984,6 @@ function useTablePrinting(isEnabled = false, tableId) {
     setSetting
   };
 }
-const DEFAULT_PRINT_SETTINGS = {
-  size: 'A4',
-  orientation: 'portrait',
-  allRows: true,
-  splitGroups: true
-};
-function useTablePrintingSettings(tableId) {
-  const tacoSettings = useTacoSettings();
-  const uniqueId = `taco.${tacoSettings.uniqueUserIdentifier}.table.${tableId}.print.settings`;
-  const [persistedSettings, setPersistedSettings] = useLocalStorage(uniqueId, DEFAULT_PRINT_SETTINGS);
-  function setSetting(key, value) {
-    setPersistedSettings(currentSettings => ({
-      ...currentSettings,
-      [key]: value
-    }));
-  }
-  return [persistedSettings, setSetting];
-}
 
 const DEFAULT_ROW_ACTIONS_LENGTH = 4;
 function useTableRowActions(isEnabled = false, rowActions, rowActionsLength = DEFAULT_ROW_ACTIONS_LENGTH) {
@@ -11002,8 +11018,8 @@ const useIsHoverStatePaused = () => {
   return [shouldPauseHoverState, setShouldPauseHoverState];
 };
 
-function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
-  const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
+function useTableRowActive(isEnabled = false, tableSettings, initialRowActiveIndex) {
+  const [rowActiveIndex, setRowActiveIndex] = React__default.useState(typeof initialRowActiveIndex === 'function' ? initialRowActiveIndex(tableSettings) : initialRowActiveIndex);
   const [rowHoverIndex, setRowHoverIndex] = React__default.useState(undefined);
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
   const move = (direction, length, scrollToIndex) => {
@@ -11179,10 +11195,10 @@ function useTableSearch(isEnabled = false, onChangeSearch, defaultEnableGlobalFi
     // 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
@@ -11637,69 +11653,6 @@ function useTableServerLoading(length, data, loadPage, loadAll, pages, pageSize
   };
 }
 
-const DEFAULT_ENABLED_OPTIONS = {
-  columnOrder: true,
-  columnPinning: true,
-  columnSizing: true,
-  columnVisibility: true,
-  excludeUnmatchedRecordsInSearch: true,
-  fontSize: true,
-  grouping: true,
-  rowHeight: true,
-  sorting: true
-};
-function useUniqueTableId(tableId) {
-  const tacoSettings = useTacoSettings();
-  return `taco.${tacoSettings.uniqueUserIdentifier}.table.${tableId}.settings`;
-}
-function useEnabledSettings(isEnabled) {
-  return React__default.useMemo(() => {
-    if (isEnabled === false) {
-      return [Object.keys(DEFAULT_ENABLED_OPTIONS).reduce((o, key) => ({
-        ...o,
-        [key]: false
-      }), {}), false];
-    } else if (isEnabled === true) {
-      return [DEFAULT_ENABLED_OPTIONS, true];
-    }
-    const options = {
-      ...DEFAULT_ENABLED_OPTIONS,
-      ...isEnabled
-    };
-    return [options, Object.values(options).some(o => o === true)];
-  }, [isEnabled]);
-}
-function useTableSettings(isEnabled = false, id, defaultSettings = {}, onChangeSettings) {
-  const uniqueId = useUniqueTableId(id);
-  const [enabledSettings, hasSomeEnabledSettings] = useEnabledSettings(isEnabled);
-  const [persistedSettings, _setPersistedSettings] = useLocalStorage(hasSomeEnabledSettings ? uniqueId : undefined, removeDisabledSettings(defaultSettings, enabledSettings));
-  const setPersistedSettings = React__default.useCallback(value => {
-    if (!hasSomeEnabledSettings) {
-      return;
-    }
-    const sanitizedSettings = removeDisabledSettings(value, enabledSettings);
-    _setPersistedSettings(sanitizedSettings);
-    if (typeof onChangeSettings === 'function') {
-      onChangeSettings(sanitizedSettings);
-    }
-  }, [hasSomeEnabledSettings, onChangeSettings, JSON.stringify(enabledSettings)]);
-  if (!hasSomeEnabledSettings) {
-    return [defaultSettings, () => undefined];
-  }
-  return [persistedSettings, setPersistedSettings];
-}
-function removeDisabledSettings(settings, enabledSettings) {
-  const sanitizedSettings = {
-    ...settings
-  };
-  Object.keys(enabledSettings).forEach(setting => {
-    if (!enabledSettings[setting]) {
-      delete sanitizedSettings[setting];
-    }
-  });
-  return sanitizedSettings;
-}
-
 // augments useEffect to not run on the initial mount
 function useLazyEffect(effect, deps) {
   const readyRef = React__default.useRef(false);
@@ -11831,26 +11784,73 @@ function useTableSearchListener(table) {
   }, [meta.server.loading, meta.search.isEnabled, meta.search.enableGlobalFilter, table.getRowModel().rows.length, query, JSON.stringify(table.getState().sorting)]);
 }
 
-function useTableSettingsListener(table, onChangeSettings) {
+function useTableSettingsListener(table, tableId, onChangeSettings, isEnabled = false) {
+  const [enabledSettings, hasSomeEnabledSettings] = useEnabledSettings(isEnabled);
+  const taco = useTaco();
   const meta = table.options.meta;
   const state = table.getState();
   React__default.useEffect(() => {
-    let handler;
-    if (typeof onChangeSettings === 'function') {
-      handler = setTimeout(() => {
+    const handler = setTimeout(() => {
+      if (!hasSomeEnabledSettings) {
+        return;
+      }
+      const settings = removeDisabledSettings(getSettings(table), enabledSettings);
+      if (Object.keys(settings).length) {
         // some settings shouldn't be persisted, but we comment them out here to highlight the intention
-        onChangeSettings(getSettings(table));
-      }, 250);
-    }
+        taco.settings.saveSetting(getSettingsId(tableId), settings);
+        if (onChangeSettings) {
+          onChangeSettings(getSettings(table));
+        }
+      }
+    }, 250);
     return () => clearTimeout(handler);
   }, [
   //state.columnFilters,
   state.columnOrder, state.columnPinning, state.columnSizing, state.columnVisibility, table.options.enableGlobalFilter, meta.fontSize.size,
   //state.grouping,
-  meta.rowHeight.height,
+  meta.printing.settings, meta.rowHeight.height,
   //state.globalFilter,
   state.sorting]);
 }
+const DEFAULT_ENABLED_OPTIONS = {
+  columnOrder: true,
+  columnPinning: true,
+  columnSizing: true,
+  columnVisibility: true,
+  excludeUnmatchedRecordsInSearch: true,
+  fontSize: true,
+  grouping: true,
+  rowHeight: true,
+  sorting: true
+};
+function useEnabledSettings(isEnabled) {
+  return React__default.useMemo(() => {
+    if (isEnabled === false) {
+      return [Object.keys(DEFAULT_ENABLED_OPTIONS).reduce((o, key) => ({
+        ...o,
+        [key]: false
+      }), {}), false];
+    } else if (isEnabled === true) {
+      return [DEFAULT_ENABLED_OPTIONS, true];
+    }
+    const options = {
+      ...DEFAULT_ENABLED_OPTIONS,
+      ...isEnabled
+    };
+    return [options, Object.values(options).some(o => o === true)];
+  }, [isEnabled]);
+}
+function removeDisabledSettings(settings, enabledSettings) {
+  const sanitizedSettings = {
+    ...settings
+  };
+  Object.keys(enabledSettings).forEach(setting => {
+    if (!enabledSettings[setting]) {
+      delete sanitizedSettings[setting];
+    }
+  });
+  return sanitizedSettings;
+}
 
 function useTableShortcutsListener(table, shortcuts) {
   const meta = table.options.meta;
@@ -11945,14 +11945,15 @@ function useTableRowDrop(isEnabled = false, onRowDrop) {
 // Placed this array outside the hook to avoid creating a new array reference on each hook re-render
 const DEFAULT_EMPTY_ARRAY = [];
 function useTableManager(props, meta, internalColumns) {
-  var _props$data, _props$length, _meta$editing, _instance$options$met;
+  var _ref, _taco$settings$getSet, _props$data, _props$length, _meta$editing, _instance$options$met;
+  const taco = useTaco();
   const localization = useLocalization();
   // CSS.escape would be best here, but it doesn't seem to work very well
   const safeId = props.id.replace('.', '_');
   // configure table options, merging props with presets
   const options = getTableFeaturePreset(props);
   // load any persisted table settings and merge them with any defaults
-  const [settings, setSettings] = useTableSettings(options.enableSaveSettings, safeId, props.defaultSettings, props.onChangeSettings);
+  const settings = (_ref = (_taco$settings$getSet = taco.settings.getSetting(getSettingsId(safeId))) !== null && _taco$settings$getSet !== void 0 ? _taco$settings$getSet : props.defaultSettings) !== null && _ref !== void 0 ? _ref : {};
   // ensure data is always valid
   const data = (_props$data = props.data) !== null && _props$data !== void 0 ? _props$data : DEFAULT_EMPTY_ARRAY;
   const length = (_props$length = props.length) !== null && _props$length !== void 0 ? _props$length : data.length;
@@ -11962,7 +11963,7 @@ function useTableManager(props, meta, internalColumns) {
   const fontSize = useTableFontSize(options.enableFontSize, settings.fontSize);
   const footer = useTableFooter(options.enableFooter);
   const printing = useTablePrinting(options.enablePrinting, safeId);
-  const rowActive = useTableRowActive(options.enableRowActive, props.defaultRowActiveIndex);
+  const rowActive = useTableRowActive(options.enableRowActive, settings, props.defaultRowActiveIndex);
   const rowActions = useTableRowActions(options.enableRowActions, props.rowActions, props.rowActionsLength);
   const rowClick = useTableRowClick(options.enableRowClick, props.onRowClick);
   const rowDrag = useTableRowDrag(options.enableRowDrag && !(meta !== null && meta !== void 0 && (_meta$editing = meta.editing) !== null && _meta$editing !== void 0 && _meta$editing.isEditing), props.onRowDrag);
@@ -12027,7 +12028,7 @@ function useTableManager(props, meta, internalColumns) {
   useTableRowSelectionListener(instance, props.onRowSelect);
   useTableSearchListener(instance);
   useTableServerLoadingListener(instance, server.loadPage);
-  useTableSettingsListener(instance, setSettings);
+  useTableSettingsListener(instance, safeId, props._DEPRECATED_DO_NOT_USE_onChangeSettings, options.enableSaveSettings);
   useTableShortcutsListener(instance, props.shortcuts);
   useTableSortingListener(instance, props.onChangeSort);
   return {
@@ -12500,11 +12501,14 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
   const [paddingTop, paddingBottom] = virtualItems.length > 0 ? [Math.max(0, startValue !== null && startValue !== void 0 ? startValue : 0), Math.max(0, totalSize - ((_virtualItems$end = (_virtualItems = virtualItems[virtualItems.length - 1]) === null || _virtualItems === void 0 ? void 0 : _virtualItems.end) !== null && _virtualItems$end !== void 0 ? _virtualItems$end : 0))] : [0, 0];
   // ensure default active rows are scrolled to
   React__default.useEffect(() => {
-    if (defaultRowActiveIndex) {
-      scrollToIndex(defaultRowActiveIndex, {
-        align: 'center',
-        behavior: 'auto'
-      });
+    if (defaultRowActiveIndex !== undefined) {
+      const index = typeof defaultRowActiveIndex === 'function' ? defaultRowActiveIndex(getSettings(table)) : defaultRowActiveIndex;
+      if (index !== undefined) {
+        scrollToIndex(index, {
+          align: 'center',
+          behavior: 'auto'
+        });
+      }
     }
   }, []);
   // rendered output
@@ -13868,6 +13872,7 @@ const MemoedHeader = /*#__PURE__*/React__default.memo(function MemoedHeader(prop
     "data-cell-align": isGroup ? 'center' : align,
     "data-cell-id": id,
     "data-cell-pinned": isPinned ? isPinned : undefined,
+    "data-taco": isGroup ? 'grouped-column-header' : 'column-header',
     style: style,
     ref: setRef
   }), !isPlaceholder ? (/*#__PURE__*/React__default.createElement(HeaderContent, {
@@ -14022,6 +14027,8 @@ function Body(props) {
     onKeyDown: handleKeyDown,
     onMouseLeave: handleMouseLeave,
     onMouseMove: handleMouseMove,
+    // Prevents menu dropdowns inside the row from being closed straight after being opened, wehn clicked on a menu trigger
+    onFocus: e => e.stopPropagation(),
     ref: ref
   }));
 }
@@ -14787,6 +14794,11 @@ function RowHeightMenuItem({
   }, texts.table.rowHeight.sizes.extraTall)));
 }
 
+// React 18 has this built-in, when we upgrade this hook should be removed and the uuid dependency should be removed
+const useId = nativeId => {
+  return React__default.useMemo(() => nativeId !== null && nativeId !== void 0 ? nativeId : uuid.v4(), []);
+};
+
 const isAriaSelectionKey = event => {
   if (event.key === 'Enter' || event.key === ' ' || event.key === 'Tab') {
     return true;
@@ -17178,15 +17190,16 @@ function TableToolbar(props) {
   const canPrint = table.meta.printing.isEnabled;
   const canSettings = canChangeSettings(table.instance, table.props.customSettings);
   const canSearch = table.meta.search.isEnabled;
+  const settings = getSettings(table.instance);
   return /*#__PURE__*/React__default.createElement(React__default.Fragment, null, /*#__PURE__*/React__default.createElement("div", Object.assign({}, attributes, {
     className: "mb-4 flex flex-shrink flex-grow-0 flex-wrap gap-2 print:hidden",
     "data-taco": "table-toolbar"
-  }), table.props.toolbarLeft, /*#__PURE__*/React__default.createElement(Group, {
+  }), typeof table.props.toolbarLeft === 'function' ? table.props.toolbarLeft(settings) : table.props.toolbarLeft, /*#__PURE__*/React__default.createElement(Group, {
     className: "ml-auto flex-shrink-0 items-center print:hidden"
   }, customTools, canFilter ? /*#__PURE__*/React__default.createElement(Filters, {
     length: table.meta.length,
     table: table.instance
-  }) : null, table.props.toolbarRight, canPrint ? /*#__PURE__*/React__default.createElement(Print$1, {
+  }) : null, typeof table.props.toolbarRight === 'function' ? table.props.toolbarRight(settings) : table.props.toolbarRight, canPrint ? /*#__PURE__*/React__default.createElement(Print$1, {
     table: table.instance,
     tableId: table.id,
     tableRef: table.ref
@@ -17197,9 +17210,9 @@ function TableToolbar(props) {
     scrollToIndex: table.renderer.scrollToIndex,
     table: table.instance,
     tableRef: table.ref
-  })) : null)), table.props.toolbarPanel ? /*#__PURE__*/React__default.createElement("div", {
+  })) : null)), table.props.toolbarPanel ? (/*#__PURE__*/React__default.createElement("div", {
     className: "mb-4"
-  }, table.props.toolbarPanel) : undefined);
+  }, typeof table.props.toolbarPanel === 'function' ? table.props.toolbarPanel(settings) : table.props.toolbarPanel)) : undefined);
 }
 function canChangeSettings(table, customSettings) {
   const tableMeta = table.options.meta;
@@ -17278,9 +17291,46 @@ function TableGrid(props) {
   }, footerRows) : null)))));
 }
 
-function Column$1(_) {
-  return null;
+function getLegacySetting(currentKey) {
+  try {
+    const localStorageValue = localStorage.getItem(currentKey);
+    if (localStorageValue) {
+      const value = JSON.parse(localStorageValue || 'null');
+      if (value !== null) {
+        localStorage.removeItem(currentKey);
+        return value;
+      }
+    }
+  } catch {
+    // If user is in private mode or has storage restriction
+    // localStorage can throw. JSON.parse can throw, too.
+  }
+  return undefined;
 }
+function useTableSettingsPreloader(tableId) {
+  const taco = useTaco();
+  const [loading, setLoading] = React__default.useState(true);
+  React__default.useLayoutEffect(() => {
+    const key = getSettingsId(tableId);
+    // migrate legacy settings if they exist, can be removed in the future
+    const legacySettings = getLegacySetting(`taco.${taco.userId}.table.${tableId}.settings`);
+    if (legacySettings) {
+      const legacyPrintSettings = getLegacySetting(`taco.${taco.userId}.table.${tableId}.print.settings`);
+      taco.settings.saveSetting(key, {
+        ...legacySettings,
+        print: legacyPrintSettings !== null && legacyPrintSettings !== void 0 ? legacyPrintSettings : {}
+      }).finally(() => setLoading(false));
+    } else {
+      taco.settings.loadSetting(key).finally(() => setLoading(false));
+    }
+  }, []);
+  return {
+    loading
+  };
+}
+
+const Column$1 = () => null;
+Column$1.displayName = 'Table3Column';
 function Group$4(_) {
   return null;
 }
@@ -17298,6 +17348,12 @@ const Report$1 = /*#__PURE__*/fixedForwardRef(function Report(props, ref) {
   // we force a remount (using key) when the child columns change because there are too many places to add children as an effect
   // this is cheaper from a complexity perspective, and probably performance wise as well
   const key = React__default.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);
+  const {
+    loading
+  } = useTableSettingsPreloader(props.id);
+  if (loading) {
+    return /*#__PURE__*/React__default.createElement(Spinner, null);
+  }
   return /*#__PURE__*/React__default.createElement(BaseReport, Object.assign({}, props, {
     key: key,
     ref: ref
@@ -19811,8 +19867,10 @@ function EditingControlCell(props) {
     }
   }, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex, value]);
   const blur = React__default.useCallback(function blur() {
-    tableMeta.editing.toggleDetailedMode(false);
-    tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
+    requestAnimationFrame(() => {
+      tableMeta.editing.toggleDetailedMode(false);
+      tableMeta.editing.onCellChanged(cell, rowIndex, undefined, !hasNonTextControl);
+    });
   }, [hasNonTextControl, cell.row.id, cell.column.id, cell.row.original, rowIndex]);
   const handleBlur = React__default.useCallback(event => {
     if (isElementInsideOrTriggeredFromContainer(event.relatedTarget, event.currentTarget)) {
@@ -20618,9 +20676,7 @@ function TemporaryRow(props) {
   }))));
 }
 
-function Column$3(_) {
-  return null;
-}
+const Column$3 = () => null;
 Column$3.displayName = 'Table3Column';
 function Group$5(_) {
   return null;
@@ -20679,6 +20735,12 @@ const Table3 = /*#__PURE__*/fixedForwardRef(function Table3(props, ref) {
   // we force a remount (using key) when the child columns change because there are too many places to add children as an effect
   // this is cheaper from a complexity perspective, and probably performance wise as well
   const key = React__default.useMemo(() => String('tableKey_' + stringifiedChildren), [stringifiedChildren]);
+  const {
+    loading
+  } = useTableSettingsPreloader(props.id);
+  if (loading) {
+    return /*#__PURE__*/React__default.createElement(Spinner, null);
+  }
   return /*#__PURE__*/React__default.createElement(BaseTable3, Object.assign({}, props, {
     key: key,
     ref: ref
@@ -20818,7 +20880,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, {
@@ -22214,9 +22276,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) {
@@ -22715,7 +22777,6 @@ exports.Switch = Switch;
 exports.Table = Table$1;
 exports.Table3 = Table3;
 exports.Tabs = Tabs;
-exports.TacoContext = TacoContext;
 exports.Tag = Tag$1;
 exports.Textarea = Textarea;
 exports.Title = Title$3;