@economic/taco 2.53.0-settings.6 → 2.53.0-virtualiser.0

package/dist/taco.cjs.development.js

@@ -28,7 +28,6 @@ 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');
@@ -9947,57 +9946,16 @@ const ToastProvider = ({
 };
 const useToast = () => React.useContext(ToastContext);
 
-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 TacoContext = /*#__PURE__*/React.createContext({
+  uniqueUserIdentifier: ''
+});
 const Provider = props => {
   const {
     children,
     localization,
-    loadSetting,
-    saveSetting,
-    userId
+    settings
   } = props;
-  const settings = useTacoSettings(loadSetting, saveSetting);
-  const context = React.useMemo(() => {
-    return {
-      settings,
-      userId
-    };
-  }, []);
+  const context = React.useMemo(() => settings, [JSON.stringify(settings)]);
   return /*#__PURE__*/React.createElement(LocalizationProvider, {
     localization: localization
   }, /*#__PURE__*/React.createElement(TacoContext.Provider, {
@@ -10411,7 +10369,6 @@ 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();
@@ -10425,7 +10382,6 @@ 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
@@ -10732,11 +10688,8 @@ 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 !== undefined) {
-        const index = typeof props.defaultColumnFreezingIndex === 'function' ? props.defaultColumnFreezingIndex(persistedSettings) : props.defaultColumnFreezingIndex;
-        if (index !== undefined) {
-          columnPinning.left = freezeUptoExternalColumn(index, columnOrder);
-        }
+      if (props.defaultColumnFreezingIndex) {
+        columnPinning.left = freezeUptoExternalColumn(props.defaultColumnFreezingIndex, columnOrder);
       } else {
         columnPinning.left = unfreezeAllExternalColumns(columnOrder);
       }
@@ -10942,28 +10895,53 @@ function useTableFontSize(isEnabled = false, defaultFontSize = 'medium') {
   };
 }
 
-function useTaco() {
+function useTacoSettings() {
   return React__default.useContext(TacoContext);
 }
 
-const DEFAULT_PRINT_SETTINGS = {
-  size: 'A4',
-  orientation: 'portrait',
-  allRows: true,
-  splitGroups: true
+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];
 };
+
 function useTablePrinting(isEnabled = false, tableId) {
-  var _taco$settings$getSet, _taco$settings$getSet2;
   const [isPrinting, setIsPrinting] = React__default.useState(false);
-  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
-    }));
-  }
+  const [settings, setSetting] = useTablePrintingSettings(tableId);
   return {
     isEnabled,
     isPrinting,
@@ -10972,6 +10950,24 @@ 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) {
@@ -11006,8 +11002,8 @@ const useIsHoverStatePaused = () => {
   return [shouldPauseHoverState, setShouldPauseHoverState];
 };
 
-function useTableRowActive(isEnabled = false, tableSettings, initialRowActiveIndex) {
-  const [rowActiveIndex, setRowActiveIndex] = React__default.useState(typeof initialRowActiveIndex === 'function' ? initialRowActiveIndex(tableSettings) : initialRowActiveIndex);
+function useTableRowActive(isEnabled = false, initialRowActiveIndex) {
+  const [rowActiveIndex, setRowActiveIndex] = React__default.useState(initialRowActiveIndex);
   const [rowHoverIndex, setRowHoverIndex] = React__default.useState(undefined);
   const [isHoverStatePaused, setHoverStatePaused] = useIsHoverStatePaused();
   const move = (direction, length, scrollToIndex) => {
@@ -11641,6 +11637,69 @@ 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);
@@ -11772,73 +11831,26 @@ 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, tableId, onChangeSettings, isEnabled = false) {
-  const [enabledSettings, hasSomeEnabledSettings] = useEnabledSettings(isEnabled);
-  const taco = useTaco();
+function useTableSettingsListener(table, onChangeSettings) {
   const meta = table.options.meta;
   const state = table.getState();
   React__default.useEffect(() => {
-    const handler = setTimeout(() => {
-      if (!hasSomeEnabledSettings) {
-        return;
-      }
-      const settings = removeDisabledSettings(getSettings(table), enabledSettings);
-      if (Object.keys(settings).length) {
+    let handler;
+    if (typeof onChangeSettings === 'function') {
+      handler = setTimeout(() => {
         // some settings shouldn't be persisted, but we comment them out here to highlight the intention
-        taco.settings.saveSetting(getSettingsId(tableId), settings);
-        if (onChangeSettings) {
-          onChangeSettings(getSettings(table));
-        }
-      }
-    }, 250);
+        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.printing.settings, meta.rowHeight.height,
+  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;
@@ -11933,15 +11945,14 @@ 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 _ref, _taco$settings$getSet, _props$data, _props$length, _meta$editing, _instance$options$met;
-  const taco = useTaco();
+  var _props$data, _props$length, _meta$editing, _instance$options$met;
   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 = (_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 : {};
+  const [settings, setSettings] = useTableSettings(options.enableSaveSettings, safeId, props.defaultSettings, props.onChangeSettings);
   // 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;
@@ -11951,7 +11962,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, settings, props.defaultRowActiveIndex);
+  const rowActive = useTableRowActive(options.enableRowActive, 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);
@@ -12016,7 +12027,7 @@ function useTableManager(props, meta, internalColumns) {
   useTableRowSelectionListener(instance, props.onRowSelect);
   useTableSearchListener(instance);
   useTableServerLoadingListener(instance, server.loadPage);
-  useTableSettingsListener(instance, safeId, props._DEPRECATED_DO_NOT_USE_onChangeSettings, options.enableSaveSettings);
+  useTableSettingsListener(instance, setSettings);
   useTableShortcutsListener(instance, props.shortcuts);
   useTableSortingListener(instance, props.onChangeSort);
   return {
@@ -12459,6 +12470,9 @@ function useTableRenderer(renderers, table, tableRef, length, defaultRowActiveIn
     scrollPaddingEnd: getScrollPaddingEndOffset(table),
     paddingEnd: getPaddingEndOffset(table, options)
   });
+  useLazyEffect(() => {
+    virtualiser.measure();
+  }, [table.getState().expanded]);
   const totalSize = virtualiser.getTotalSize();
   const virtualItems = virtualiser.getVirtualItems();
   const scrollToIndex = React__default.useCallback((index, options = {
@@ -12487,14 +12501,11 @@ 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 !== undefined) {
-      const index = typeof defaultRowActiveIndex === 'function' ? defaultRowActiveIndex(getSettings(table)) : defaultRowActiveIndex;
-      if (index !== undefined) {
-        scrollToIndex(index, {
-          align: 'center',
-          behavior: 'auto'
-        });
-      }
+    if (defaultRowActiveIndex) {
+      scrollToIndex(defaultRowActiveIndex, {
+        align: 'center',
+        behavior: 'auto'
+      });
     }
   }, []);
   // rendered output
@@ -17213,16 +17224,15 @@ 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"
-  }), typeof table.props.toolbarLeft === 'function' ? table.props.toolbarLeft(settings) : table.props.toolbarLeft, /*#__PURE__*/React__default.createElement(Group, {
+  }), 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, typeof table.props.toolbarRight === 'function' ? table.props.toolbarRight(settings) : table.props.toolbarRight, canPrint ? /*#__PURE__*/React__default.createElement(Print$1, {
+  }) : null, table.props.toolbarRight, canPrint ? /*#__PURE__*/React__default.createElement(Print$1, {
     table: table.instance,
     tableId: table.id,
     tableRef: table.ref
@@ -17233,9 +17243,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"
-  }, typeof table.props.toolbarPanel === 'function' ? table.props.toolbarPanel(settings) : table.props.toolbarPanel)) : undefined);
+  }, table.props.toolbarPanel) : undefined);
 }
 function canChangeSettings(table, customSettings) {
   const tableMeta = table.options.meta;
@@ -17314,44 +17324,6 @@ function TableGrid(props) {
   }, footerRows) : 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
-  };
-}
-
 function Column$1(_) {
   return null;
 }
@@ -17372,12 +17344,6 @@ 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
@@ -20756,12 +20722,6 @@ 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
@@ -22798,6 +22758,7 @@ 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;