mantine-composite-filters 0.4.0 → 0.5.0

package/dist/cjs/components/CompositeFiltersInput/CompositeFiltersInput.cjs

@@ -6,6 +6,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var React = require('react');
 var core = require('@mantine/core');
 var hooks = require('@mantine/hooks');
+var useStorageState = require('../../storage/useStorageState.cjs');
 var iconsReact = require('@tabler/icons-react');
 var clsx = require('../../node_modules/clsx/dist/clsx.cjs');
 var CompositeFiltersInput_module = require('./CompositeFiltersInput.module.css.cjs');
@@ -35,6 +36,8 @@ const CompositeFiltersInputBase = ({
   disablePresets = false,
   disableHistory = false,
   storageKeyPrefix = "filters",
+  presetsStorageAdapter,
+  historyStorageAdapter,
   customActions = [],
   overflowMode = "scroll",
   styles,
@@ -42,6 +45,7 @@ const CompositeFiltersInputBase = ({
   operatorPlaceholder = "Select operator...",
   valuePlaceholder = "Enter value...",
   searchPlaceholder = "Search options...",
+  renderSavePresetModal,
   ...boxProps
 }) => {
   const theme = core.useMantineTheme();
@@ -68,12 +72,12 @@ const CompositeFiltersInputBase = ({
   const [editingPart, setEditingPart] = React.useState(null);
   const inputRef = React.useRef(null);
   const pillsContainerRef = React.useRef(null);
-  const [isCompactMode, setIsCompactMode] = hooks.useLocalStorage({
-    key: `${storageKeyPrefix}-compact-mode`,
+  const [isCompactMode, setIsCompactMode] = useStorageState.useStorageState({
+    storageKey: `${storageKeyPrefix}-compact-mode`,
     defaultValue: false
   });
-  const [showFilterCount, setShowFilterCount] = hooks.useLocalStorage({
-    key: `${storageKeyPrefix}-show-count`,
+  const [showFilterCount, setShowFilterCount] = useStorageState.useStorageState({
+    storageKey: `${storageKeyPrefix}-show-count`,
     defaultValue: true
   });
   const {
@@ -84,11 +88,13 @@ const CompositeFiltersInputBase = ({
     deletePreset
   } = useFilterPresets.useFilterPresets({
     storageKey: `${storageKeyPrefix}-saved-presets`,
-    onLoad: onChange
+    onLoad: onChange,
+    storageAdapter: presetsStorageAdapter
   });
   const { history: filterHistory } = useFilterHistory.useFilterHistory(activeFilters, {
     storageKey: `${storageKeyPrefix}-history`,
-    enabled: !disableHistory
+    enabled: !disableHistory,
+    storageAdapter: historyStorageAdapter
   });
   const combobox = core.useCombobox({
     onDropdownClose: () => combobox.resetSelectedOption(),
@@ -594,8 +600,8 @@ const CompositeFiltersInputBase = ({
     },
     [inputStep, selectedField, multiSelectValues, handleValueSubmit, inputValue, activeFilters, resetInput, combobox, handleRemoveFilter]
   );
-  const handleSavePreset = React.useCallback(() => {
-    savePreset(activeFilters);
+  const handleSavePreset = React.useCallback((name) => {
+    savePreset(activeFilters, name);
   }, [activeFilters, savePreset]);
   const showDropdown = inputStep === "field" || inputStep === "operator" || inputStep === "value" && (selectedField?.type === "select" || selectedField?.type === "multi_select");
   const shouldShowDateInput = inputStep === "value" && (selectedField?.type === "date" || selectedField?.type === "date_range");
@@ -870,7 +876,8 @@ const CompositeFiltersInputBase = ({
               filterHistory,
               customActions,
               disablePresets,
-              disableHistory
+              disableHistory,
+              renderSavePresetModal
             }
           )
         )