@snack-uikit/utils 3.6.0 → 3.7.1-preview-e840ab81.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 3.7.0 (2025-01-23)
+
+
+### Features
+
+* **PDS-926:** add useDynamicList hook ([1d95c09](https://github.com/cloud-ru-tech/snack-uikit/commit/1d95c0969ef96e7b891e927543a38b0929edc760))
+
+
+
+
+
 # 3.6.0 (2024-12-12)
 
 

package/README.md

@@ -18,6 +18,11 @@
 
 Хук задерживает выполнение функции или обновление значения до тех пор,
 пока не пройдет определенный период времени без новых вызовов.
+## useDynamicList
+`React hook` 
+
+Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+в зависимости от ширины контейнера
 ## useEventHandler
 `React hook` 
 
@@ -66,6 +71,22 @@
 | value | `TValue` | - | Значение состояния |
 | defaultValue | `TValue` | - | Значение по умолчанию |
 | onChange | `(value: TValue) => void` | - | Колбек, вызываемый на смену состояния |
+## useSaveState
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| onLoadFilter* | `(filter: T) => void` | - |  |
+| filter* | `T` | - |  |
+| source | `BaseSource<T>` | - |  |
+## useSaveFilterState
+### Props
+| name | type | default value | description |
+|------|------|---------------|-------------|
+| onLoadFilter* | `(filter: TFilter) => void` | - |  |
+| filter* | `TFilter` | - |  |
+| options | `FilterStateOptions<TFilter>` | - |  |
+| parser | `(jsonFilter: string) => TFilter` | - |  |
+| encoder | `(filter: TFilter) => string` | - |  |
 ## ThemeProvider
 Провайдер, предназначенный для работы с темами
 ### Props

package/dist/cjs/hooks/index.d.ts

@@ -1,6 +1,9 @@
 export * from './useDebounce';
+export * from './useDynamicList';
 export * from './useEventHandler';
 export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';
 export * from './useThemeConfig';
 export * from './useValueControl';
+export * from './useSaveState';
+export * from './useSaveFilterState';

package/dist/cjs/hooks/index.js

@@ -23,8 +23,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 __exportStar(require("./useDebounce"), exports);
+__exportStar(require("./useDynamicList"), exports);
 __exportStar(require("./useEventHandler"), exports);
 __exportStar(require("./useIsomorphicLayoutEffect"), exports);
 __exportStar(require("./useSwipeable"), exports);
 __exportStar(require("./useThemeConfig"), exports);
-__exportStar(require("./useValueControl"), exports);
+__exportStar(require("./useValueControl"), exports);
+__exportStar(require("./useSaveState"), exports);
+__exportStar(require("./useSaveFilterState"), exports);

package/dist/cjs/hooks/useDynamicList.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+type UseDynamicListProps<T extends object> = {
+    items: T[];
+    resizingContainerRef?: RefObject<HTMLDivElement>;
+    parentContainerRef: RefObject<HTMLDivElement>;
+    maxVisibleItems?: number;
+};
+type UseDynamicListReturnType<T extends object> = {
+    visibleItems: T[];
+    hiddenItems: T[];
+};
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+export declare function useDynamicList<T extends object>({ parentContainerRef, resizingContainerRef, items, maxVisibleItems, }: UseDynamicListProps<T>): UseDynamicListReturnType<T>;
+export {};

package/dist/cjs/hooks/useDynamicList.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useDynamicList = useDynamicList;
+const react_1 = require("react");
+const useEventHandler_1 = require("./useEventHandler");
+const useIsomorphicLayoutEffect_1 = require("./useIsomorphicLayoutEffect");
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+function useDynamicList(_ref) {
+  let {
+    parentContainerRef,
+    resizingContainerRef = parentContainerRef,
+    items,
+    maxVisibleItems = Infinity
+  } = _ref;
+  const adjustAmount = value => Math.min(maxVisibleItems, value);
+  const [visibleItemsAmount, setVisibleItemsAmount] = (0, react_1.useState)(adjustAmount(items.length));
+  const [width, setWidth] = (0, react_1.useState)(Infinity);
+  const widthRef = (0, react_1.useRef)(width);
+  const handleVisibleItemsAmount = param => {
+    if (typeof param === 'number') {
+      setVisibleItemsAmount(adjustAmount(param));
+    } else {
+      setVisibleItemsAmount(v => param(adjustAmount(v)));
+    }
+  };
+  const tryHidingItem = (0, useEventHandler_1.useEventHandler)(() => {
+    const container = parentContainerRef.current;
+    if (container && container.scrollWidth - container.offsetWidth > 0) {
+      const itemToHide = items[visibleItemsAmount - 1];
+      if (itemToHide) {
+        handleVisibleItemsAmount(value => value - 1);
+      }
+    }
+  });
+  const tryShowingItem = (0, useEventHandler_1.useEventHandler)(() => {
+    const itemToShow = items[visibleItemsAmount];
+    if (itemToShow) {
+      handleVisibleItemsAmount(value => value + 1);
+    }
+  });
+  const toggleItemWidth = (0, useEventHandler_1.useEventHandler)(_ref2 => {
+    let {
+      changedWidth,
+      initialWidth
+    } = _ref2;
+    if (changedWidth > initialWidth) {
+      //try to add extra item
+      if (visibleItemsAmount < maxVisibleItems) {
+        tryShowingItem();
+      }
+    } else if (changedWidth < initialWidth) {
+      // check if item should be hidden
+      tryHidingItem();
+    }
+  });
+  (0, react_1.useEffect)(() => {
+    const listener = () => {
+      tryHidingItem();
+      if (parentContainerRef.current) {
+        setWidth(parentContainerRef.current.scrollWidth);
+      }
+    };
+    document.fonts.addEventListener('loadingdone', listener);
+    return () => document.fonts.removeEventListener('loadingdone', listener);
+  }, [parentContainerRef, tryHidingItem]);
+  (0, react_1.useEffect)(() => {
+    const container = resizingContainerRef.current;
+    if (container) {
+      const observer = new ResizeObserver(entities => entities.forEach(entity => {
+        if (entity.target === container) {
+          const [{
+            inlineSize: newWidth
+          }] = entity.contentBoxSize;
+          setWidth(Math.floor(newWidth));
+        }
+      }));
+      observer.observe(container);
+      return () => observer.disconnect();
+    }
+  }, [resizingContainerRef]);
+  (0, useIsomorphicLayoutEffect_1.useLayoutEffect)(() => {
+    if (parentContainerRef.current) {
+      toggleItemWidth({
+        initialWidth: parentContainerRef.current.scrollWidth,
+        changedWidth: widthRef.current
+      });
+    }
+  }, [items, parentContainerRef, toggleItemWidth]);
+  (0, useIsomorphicLayoutEffect_1.useLayoutEffect)(() => {
+    toggleItemWidth({
+      initialWidth: widthRef.current,
+      changedWidth: width
+    });
+    widthRef.current = width;
+  }, [width, toggleItemWidth]);
+  (0, useIsomorphicLayoutEffect_1.useLayoutEffect)(() => {
+    tryHidingItem();
+  }, [tryHidingItem, visibleItemsAmount]);
+  return {
+    visibleItems: items.slice(0, visibleItemsAmount),
+    hiddenItems: items.slice(visibleItemsAmount)
+  };
+}

package/dist/cjs/hooks/useSaveFilterState.d.ts

@@ -0,0 +1,13 @@
+import { StateProps } from './useSaveState';
+export type FilterStateOptions<T> = {
+    filterQueryKey: string;
+    filterLocalStorageKey: string;
+    validateData: (value: unknown) => value is T;
+};
+type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
+    options?: FilterStateOptions<TFilter>;
+    parser?: (jsonFilter: string) => TFilter;
+    encoder?: (filter: TFilter) => string;
+};
+export declare const useSaveFilterState: <TFilter>({ options, filter, onLoadFilter }: FilterStateProps<TFilter>) => void;
+export {};

package/dist/cjs/hooks/useSaveFilterState.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSaveFilterState = void 0;
+const react_1 = require("react");
+const useSaveState_1 = require("./useSaveState");
+const useSaveFilterState = _ref => {
+  let {
+    options,
+    filter,
+    onLoadFilter
+  } = _ref;
+  const [queryFilter, setQueryFilter] = (0, react_1.useState)(null);
+  const [localStorageFilter, setLocalStorageFilter] = (0, react_1.useState)(null);
+  const [isLoaded, setIsLoaded] = (0, react_1.useState)({
+    localStorage: false,
+    queryParams: false
+  });
+  const onLoadQueryParams = (0, react_1.useCallback)(value => {
+    setQueryFilter(value);
+    setIsLoaded(prev => Object.assign(Object.assign({}, prev), {
+      queryParams: true
+    }));
+  }, []);
+  const onLoadLocalStorage = (0, react_1.useCallback)(value => {
+    setLocalStorageFilter(value);
+    setIsLoaded(prev => Object.assign(Object.assign({}, prev), {
+      localStorage: true
+    }));
+  }, []);
+  const querySource = (0, react_1.useMemo)(() => options ? new useSaveState_1.QueryParamSource(options.filterQueryKey, options.validateData) : undefined, [options]);
+  const localStorageSource = (0, react_1.useMemo)(() => options ? new useSaveState_1.LocalStorageSource(options.filterLocalStorageKey, options.validateData) : undefined, [options]);
+  (0, useSaveState_1.useSaveState)({
+    filter,
+    onLoadFilter: onLoadQueryParams,
+    source: querySource
+  });
+  (0, useSaveState_1.useSaveState)({
+    filter,
+    onLoadFilter: onLoadLocalStorage,
+    source: localStorageSource
+  });
+  (0, react_1.useEffect)(() => {
+    if (!options) {
+      onLoadFilter(null);
+    }
+    if (isLoaded.localStorage && isLoaded.queryParams) {
+      onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
+    }
+  }, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
+};
+exports.useSaveFilterState = useSaveFilterState;

package/dist/cjs/hooks/useSaveState/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useSaveState';
+export * from './sources';

package/dist/cjs/hooks/useSaveState/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./useSaveState"), exports);
+__exportStar(require("./sources"), exports);

package/dist/cjs/hooks/useSaveState/sources/baseSource.d.ts

@@ -0,0 +1,11 @@
+export declare abstract class BaseSource<TFilter> {
+    filterKey: string;
+    private validate;
+    protected parse: (value: string) => TFilter;
+    protected encode: (value: TFilter) => string;
+    protected abstract getFormSource(): string;
+    protected abstract setToSource(value: string): void;
+    constructor(filterKey: string, validate: (value: unknown) => value is TFilter, parse?: (value: string) => TFilter, encode?: (value: TFilter) => string);
+    getFilter: () => NonNullable<TFilter> | null;
+    setFilter: (filter: TFilter) => void;
+}

package/dist/cjs/hooks/useSaveState/sources/baseSource.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.BaseSource = void 0;
+class BaseSource {
+  constructor(filterKey, validate, parse, encode) {
+    this.filterKey = filterKey;
+    this.validate = validate;
+    this.parse = JSON.parse;
+    this.encode = JSON.stringify;
+    this.getFilter = () => {
+      const filterFromQueryParams = this.getFormSource();
+      const parsedValue = filterFromQueryParams ? this.parse(filterFromQueryParams) : null;
+      const isValid = parsedValue && this.validate(parsedValue);
+      return isValid ? parsedValue : null;
+    };
+    this.setFilter = filter => {
+      const encodedValue = this.encode(filter);
+      this.setToSource(encodedValue);
+    };
+    if (parse) {
+      this.parse = parse;
+    }
+    if (encode) {
+      this.encode = encode;
+    }
+  }
+}
+exports.BaseSource = BaseSource;

package/dist/cjs/hooks/useSaveState/sources/index.d.ts

@@ -0,0 +1,3 @@
+export * from './queryParamSource';
+export * from './localStorageSource';
+export * from './baseSource';

package/dist/cjs/hooks/useSaveState/sources/index.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var __createBinding = void 0 && (void 0).__createBinding || (Object.create ? function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  var desc = Object.getOwnPropertyDescriptor(m, k);
+  if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+    desc = {
+      enumerable: true,
+      get: function () {
+        return m[k];
+      }
+    };
+  }
+  Object.defineProperty(o, k2, desc);
+} : function (o, m, k, k2) {
+  if (k2 === undefined) k2 = k;
+  o[k2] = m[k];
+});
+var __exportStar = void 0 && (void 0).__exportStar || function (m, exports) {
+  for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+__exportStar(require("./queryParamSource"), exports);
+__exportStar(require("./localStorageSource"), exports);
+__exportStar(require("./baseSource"), exports);

package/dist/cjs/hooks/useSaveState/sources/localStorageSource.d.ts

@@ -0,0 +1,5 @@
+import { BaseSource } from './baseSource';
+export declare class LocalStorageSource<TFilter> extends BaseSource<TFilter> {
+    getFormSource(): string;
+    setToSource(value: string): void;
+}

package/dist/cjs/hooks/useSaveState/sources/localStorageSource.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.LocalStorageSource = void 0;
+const utils_1 = require("../../../utils");
+const baseSource_1 = require("./baseSource");
+class LocalStorageSource extends baseSource_1.BaseSource {
+  getFormSource() {
+    if ((0, utils_1.isBrowser)()) {
+      return localStorage.getItem(this.filterKey) || '';
+    }
+    return '';
+  }
+  setToSource(value) {
+    if ((0, utils_1.isBrowser)()) {
+      localStorage.setItem(this.filterKey, value);
+    }
+  }
+}
+exports.LocalStorageSource = LocalStorageSource;

package/dist/cjs/hooks/useSaveState/sources/queryParamSource.d.ts

@@ -0,0 +1,5 @@
+import { BaseSource } from './baseSource';
+export declare class QueryParamSource<TFilter> extends BaseSource<TFilter> {
+    getFormSource(): string;
+    setToSource(value: string): void;
+}

package/dist/cjs/hooks/useSaveState/sources/queryParamSource.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.QueryParamSource = void 0;
+const utils_1 = require("../../../utils");
+const baseSource_1 = require("./baseSource");
+class QueryParamSource extends baseSource_1.BaseSource {
+  getFormSource() {
+    if ((0, utils_1.isBrowser)()) {
+      return new URL(window.location.href).searchParams.get(this.filterKey) || '';
+    }
+    return '';
+  }
+  setToSource(value) {
+    if ((0, utils_1.isBrowser)()) {
+      const url = new URL(window.location.href);
+      url.searchParams.set(this.filterKey, value);
+      history.pushState({}, '', url);
+    }
+  }
+}
+exports.QueryParamSource = QueryParamSource;

package/dist/cjs/hooks/useSaveState/useSaveState.d.ts

@@ -0,0 +1,7 @@
+import { BaseSource } from './sources/baseSource';
+export type StateProps<T> = {
+    filter: T;
+    onLoadFilter: (filter: T | null) => void;
+    source?: BaseSource<T>;
+};
+export declare const useSaveState: <T>({ filter, onLoadFilter, source }: StateProps<T>) => void;

package/dist/cjs/hooks/useSaveState/useSaveState.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSaveState = void 0;
+const react_1 = require("react");
+const useSaveState = _ref => {
+  let {
+    filter,
+    onLoadFilter,
+    source
+  } = _ref;
+  (0, react_1.useEffect)(() => {
+    if (!source) {
+      return;
+    }
+    onLoadFilter(source.getFilter());
+  }, [onLoadFilter, source]);
+  (0, react_1.useEffect)(() => {
+    if (!source) {
+      return;
+    }
+    source.setFilter(filter);
+  }, [filter, source]);
+};
+exports.useSaveState = useSaveState;

package/dist/esm/hooks/index.d.ts

@@ -1,6 +1,9 @@
 export * from './useDebounce';
+export * from './useDynamicList';
 export * from './useEventHandler';
 export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';
 export * from './useThemeConfig';
 export * from './useValueControl';
+export * from './useSaveState';
+export * from './useSaveFilterState';

package/dist/esm/hooks/index.js

@@ -1,6 +1,9 @@
 export * from './useDebounce';
+export * from './useDynamicList';
 export * from './useEventHandler';
 export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';
 export * from './useThemeConfig';
 export * from './useValueControl';
+export * from './useSaveState';
+export * from './useSaveFilterState';

package/dist/esm/hooks/useDynamicList.d.ts

@@ -0,0 +1,18 @@
+import { RefObject } from 'react';
+type UseDynamicListProps<T extends object> = {
+    items: T[];
+    resizingContainerRef?: RefObject<HTMLDivElement>;
+    parentContainerRef: RefObject<HTMLDivElement>;
+    maxVisibleItems?: number;
+};
+type UseDynamicListReturnType<T extends object> = {
+    visibleItems: T[];
+    hiddenItems: T[];
+};
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+export declare function useDynamicList<T extends object>({ parentContainerRef, resizingContainerRef, items, maxVisibleItems, }: UseDynamicListProps<T>): UseDynamicListReturnType<T>;
+export {};

package/dist/esm/hooks/useDynamicList.js

@@ -0,0 +1,94 @@
+import { useEffect, useRef, useState } from 'react';
+import { useEventHandler } from './useEventHandler';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect';
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+export function useDynamicList({ parentContainerRef, resizingContainerRef = parentContainerRef, items, maxVisibleItems = Infinity, }) {
+    const adjustAmount = (value) => Math.min(maxVisibleItems, value);
+    const [visibleItemsAmount, setVisibleItemsAmount] = useState(adjustAmount(items.length));
+    const [width, setWidth] = useState(Infinity);
+    const widthRef = useRef(width);
+    const handleVisibleItemsAmount = param => {
+        if (typeof param === 'number') {
+            setVisibleItemsAmount(adjustAmount(param));
+        }
+        else {
+            setVisibleItemsAmount(v => param(adjustAmount(v)));
+        }
+    };
+    const tryHidingItem = useEventHandler(() => {
+        const container = parentContainerRef.current;
+        if (container && container.scrollWidth - container.offsetWidth > 0) {
+            const itemToHide = items[visibleItemsAmount - 1];
+            if (itemToHide) {
+                handleVisibleItemsAmount(value => value - 1);
+            }
+        }
+    });
+    const tryShowingItem = useEventHandler(() => {
+        const itemToShow = items[visibleItemsAmount];
+        if (itemToShow) {
+            handleVisibleItemsAmount(value => value + 1);
+        }
+    });
+    const toggleItemWidth = useEventHandler(({ changedWidth, initialWidth }) => {
+        if (changedWidth > initialWidth) {
+            //try to add extra item
+            if (visibleItemsAmount < maxVisibleItems) {
+                tryShowingItem();
+            }
+        }
+        else if (changedWidth < initialWidth) {
+            // check if item should be hidden
+            tryHidingItem();
+        }
+    });
+    useEffect(() => {
+        const listener = () => {
+            tryHidingItem();
+            if (parentContainerRef.current) {
+                setWidth(parentContainerRef.current.scrollWidth);
+            }
+        };
+        document.fonts.addEventListener('loadingdone', listener);
+        return () => document.fonts.removeEventListener('loadingdone', listener);
+    }, [parentContainerRef, tryHidingItem]);
+    useEffect(() => {
+        const container = resizingContainerRef.current;
+        if (container) {
+            const observer = new ResizeObserver(entities => entities.forEach(entity => {
+                if (entity.target === container) {
+                    const [{ inlineSize: newWidth }] = entity.contentBoxSize;
+                    setWidth(Math.floor(newWidth));
+                }
+            }));
+            observer.observe(container);
+            return () => observer.disconnect();
+        }
+    }, [resizingContainerRef]);
+    useLayoutEffect(() => {
+        if (parentContainerRef.current) {
+            toggleItemWidth({
+                initialWidth: parentContainerRef.current.scrollWidth,
+                changedWidth: widthRef.current,
+            });
+        }
+    }, [items, parentContainerRef, toggleItemWidth]);
+    useLayoutEffect(() => {
+        toggleItemWidth({
+            initialWidth: widthRef.current,
+            changedWidth: width,
+        });
+        widthRef.current = width;
+    }, [width, toggleItemWidth]);
+    useLayoutEffect(() => {
+        tryHidingItem();
+    }, [tryHidingItem, visibleItemsAmount]);
+    return {
+        visibleItems: items.slice(0, visibleItemsAmount),
+        hiddenItems: items.slice(visibleItemsAmount),
+    };
+}

package/dist/esm/hooks/useSaveFilterState.d.ts

@@ -0,0 +1,13 @@
+import { StateProps } from './useSaveState';
+export type FilterStateOptions<T> = {
+    filterQueryKey: string;
+    filterLocalStorageKey: string;
+    validateData: (value: unknown) => value is T;
+};
+type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
+    options?: FilterStateOptions<TFilter>;
+    parser?: (jsonFilter: string) => TFilter;
+    encoder?: (filter: TFilter) => string;
+};
+export declare const useSaveFilterState: <TFilter>({ options, filter, onLoadFilter }: FilterStateProps<TFilter>) => void;
+export {};

package/dist/esm/hooks/useSaveFilterState.js

@@ -0,0 +1,30 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+import { LocalStorageSource, QueryParamSource, useSaveState } from './useSaveState';
+export const useSaveFilterState = ({ options, filter, onLoadFilter }) => {
+    const [queryFilter, setQueryFilter] = useState(null);
+    const [localStorageFilter, setLocalStorageFilter] = useState(null);
+    const [isLoaded, setIsLoaded] = useState({
+        localStorage: false,
+        queryParams: false,
+    });
+    const onLoadQueryParams = useCallback((value) => {
+        setQueryFilter(value);
+        setIsLoaded(prev => (Object.assign(Object.assign({}, prev), { queryParams: true })));
+    }, []);
+    const onLoadLocalStorage = useCallback((value) => {
+        setLocalStorageFilter(value);
+        setIsLoaded(prev => (Object.assign(Object.assign({}, prev), { localStorage: true })));
+    }, []);
+    const querySource = useMemo(() => (options ? new QueryParamSource(options.filterQueryKey, options.validateData) : undefined), [options]);
+    const localStorageSource = useMemo(() => (options ? new LocalStorageSource(options.filterLocalStorageKey, options.validateData) : undefined), [options]);
+    useSaveState({ filter, onLoadFilter: onLoadQueryParams, source: querySource });
+    useSaveState({ filter, onLoadFilter: onLoadLocalStorage, source: localStorageSource });
+    useEffect(() => {
+        if (!options) {
+            onLoadFilter(null);
+        }
+        if (isLoaded.localStorage && isLoaded.queryParams) {
+            onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
+        }
+    }, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
+};

package/dist/esm/hooks/useSaveState/index.d.ts

@@ -0,0 +1,2 @@
+export * from './useSaveState';
+export * from './sources';

package/dist/esm/hooks/useSaveState/index.js

@@ -0,0 +1,2 @@
+export * from './useSaveState';
+export * from './sources';

package/dist/esm/hooks/useSaveState/sources/baseSource.d.ts

@@ -0,0 +1,11 @@
+export declare abstract class BaseSource<TFilter> {
+    filterKey: string;
+    private validate;
+    protected parse: (value: string) => TFilter;
+    protected encode: (value: TFilter) => string;
+    protected abstract getFormSource(): string;
+    protected abstract setToSource(value: string): void;
+    constructor(filterKey: string, validate: (value: unknown) => value is TFilter, parse?: (value: string) => TFilter, encode?: (value: TFilter) => string);
+    getFilter: () => NonNullable<TFilter> | null;
+    setFilter: (filter: TFilter) => void;
+}

package/dist/esm/hooks/useSaveState/sources/baseSource.js

@@ -0,0 +1,24 @@
+export class BaseSource {
+    constructor(filterKey, validate, parse, encode) {
+        this.filterKey = filterKey;
+        this.validate = validate;
+        this.parse = JSON.parse;
+        this.encode = JSON.stringify;
+        this.getFilter = () => {
+            const filterFromQueryParams = this.getFormSource();
+            const parsedValue = filterFromQueryParams ? this.parse(filterFromQueryParams) : null;
+            const isValid = parsedValue && this.validate(parsedValue);
+            return isValid ? parsedValue : null;
+        };
+        this.setFilter = (filter) => {
+            const encodedValue = this.encode(filter);
+            this.setToSource(encodedValue);
+        };
+        if (parse) {
+            this.parse = parse;
+        }
+        if (encode) {
+            this.encode = encode;
+        }
+    }
+}

package/dist/esm/hooks/useSaveState/sources/index.d.ts

@@ -0,0 +1,3 @@
+export * from './queryParamSource';
+export * from './localStorageSource';
+export * from './baseSource';

package/dist/esm/hooks/useSaveState/sources/index.js

@@ -0,0 +1,3 @@
+export * from './queryParamSource';
+export * from './localStorageSource';
+export * from './baseSource';

package/dist/esm/hooks/useSaveState/sources/localStorageSource.d.ts

@@ -0,0 +1,5 @@
+import { BaseSource } from './baseSource';
+export declare class LocalStorageSource<TFilter> extends BaseSource<TFilter> {
+    getFormSource(): string;
+    setToSource(value: string): void;
+}

package/dist/esm/hooks/useSaveState/sources/localStorageSource.js

@@ -0,0 +1,15 @@
+import { isBrowser } from '../../../utils';
+import { BaseSource } from './baseSource';
+export class LocalStorageSource extends BaseSource {
+    getFormSource() {
+        if (isBrowser()) {
+            return localStorage.getItem(this.filterKey) || '';
+        }
+        return '';
+    }
+    setToSource(value) {
+        if (isBrowser()) {
+            localStorage.setItem(this.filterKey, value);
+        }
+    }
+}

package/dist/esm/hooks/useSaveState/sources/queryParamSource.d.ts

@@ -0,0 +1,5 @@
+import { BaseSource } from './baseSource';
+export declare class QueryParamSource<TFilter> extends BaseSource<TFilter> {
+    getFormSource(): string;
+    setToSource(value: string): void;
+}

package/dist/esm/hooks/useSaveState/sources/queryParamSource.js

@@ -0,0 +1,17 @@
+import { isBrowser } from '../../../utils';
+import { BaseSource } from './baseSource';
+export class QueryParamSource extends BaseSource {
+    getFormSource() {
+        if (isBrowser()) {
+            return new URL(window.location.href).searchParams.get(this.filterKey) || '';
+        }
+        return '';
+    }
+    setToSource(value) {
+        if (isBrowser()) {
+            const url = new URL(window.location.href);
+            url.searchParams.set(this.filterKey, value);
+            history.pushState({}, '', url);
+        }
+    }
+}

package/dist/esm/hooks/useSaveState/useSaveState.d.ts

@@ -0,0 +1,7 @@
+import { BaseSource } from './sources/baseSource';
+export type StateProps<T> = {
+    filter: T;
+    onLoadFilter: (filter: T | null) => void;
+    source?: BaseSource<T>;
+};
+export declare const useSaveState: <T>({ filter, onLoadFilter, source }: StateProps<T>) => void;

package/dist/esm/hooks/useSaveState/useSaveState.js

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+export const useSaveState = ({ filter, onLoadFilter, source }) => {
+    useEffect(() => {
+        if (!source) {
+            return;
+        }
+        onLoadFilter(source.getFilter());
+    }, [onLoadFilter, source]);
+    useEffect(() => {
+        if (!source) {
+            return;
+        }
+        source.setFilter(filter);
+    }, [filter, source]);
+};

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Utils",
-  "version": "3.6.0",
+  "version": "3.7.1-preview-e840ab81.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -39,5 +39,5 @@
     "react-swipeable": "7.0.2",
     "uncontrollable": "8.0.4"
   },
-  "gitHead": "ac8fa414e1a84f72594d9c509b0daca04b5e48be"
+  "gitHead": "1dc61e115ed2debadc06541b10d10df416d1d5e5"
 }

package/src/hooks/index.ts

@@ -1,6 +1,9 @@
 export * from './useDebounce';
+export * from './useDynamicList';
 export * from './useEventHandler';
 export * from './useIsomorphicLayoutEffect';
 export * from './useSwipeable';
 export * from './useThemeConfig';
 export * from './useValueControl';
+export * from './useSaveState';
+export * from './useSaveFilterState';

package/src/hooks/useDynamicList.ts

@@ -0,0 +1,135 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+
+import { useEventHandler } from './useEventHandler';
+import { useLayoutEffect } from './useIsomorphicLayoutEffect';
+
+type UseDynamicListProps<T extends object> = {
+  items: T[];
+  resizingContainerRef?: RefObject<HTMLDivElement>;
+  parentContainerRef: RefObject<HTMLDivElement>;
+  maxVisibleItems?: number;
+};
+
+type UseDynamicListReturnType<T extends object> = {
+  visibleItems: T[];
+  hiddenItems: T[];
+};
+
+/**
+ * Хук позволяет распределять элементы списка на две группы: видимые и невидимые,
+ * в зависимости от ширины контейнера
+ * @function React hook
+ */
+export function useDynamicList<T extends object>({
+  parentContainerRef,
+  resizingContainerRef = parentContainerRef,
+  items,
+  maxVisibleItems = Infinity,
+}: UseDynamicListProps<T>): UseDynamicListReturnType<T> {
+  const adjustAmount = (value: number) => Math.min(maxVisibleItems, value);
+
+  const [visibleItemsAmount, setVisibleItemsAmount] = useState<number>(adjustAmount(items.length));
+  const [width, setWidth] = useState(Infinity);
+  const widthRef = useRef(width);
+
+  const handleVisibleItemsAmount: typeof setVisibleItemsAmount = param => {
+    if (typeof param === 'number') {
+      setVisibleItemsAmount(adjustAmount(param));
+    } else {
+      setVisibleItemsAmount(v => param(adjustAmount(v)));
+    }
+  };
+
+  const tryHidingItem = useEventHandler(() => {
+    const container = parentContainerRef.current;
+
+    if (container && container.scrollWidth - container.offsetWidth > 0) {
+      const itemToHide = items[visibleItemsAmount - 1];
+
+      if (itemToHide) {
+        handleVisibleItemsAmount(value => value - 1);
+      }
+    }
+  });
+
+  const tryShowingItem = useEventHandler(() => {
+    const itemToShow = items[visibleItemsAmount];
+
+    if (itemToShow) {
+      handleVisibleItemsAmount(value => value + 1);
+    }
+  });
+
+  const toggleItemWidth = useEventHandler(
+    ({ changedWidth, initialWidth }: { changedWidth: number; initialWidth: number }) => {
+      if (changedWidth > initialWidth) {
+        //try to add extra item
+        if (visibleItemsAmount < maxVisibleItems) {
+          tryShowingItem();
+        }
+      } else if (changedWidth < initialWidth) {
+        // check if item should be hidden
+        tryHidingItem();
+      }
+    },
+  );
+
+  useEffect(() => {
+    const listener = () => {
+      tryHidingItem();
+
+      if (parentContainerRef.current) {
+        setWidth(parentContainerRef.current.scrollWidth);
+      }
+    };
+
+    document.fonts.addEventListener('loadingdone', listener);
+    return () => document.fonts.removeEventListener('loadingdone', listener);
+  }, [parentContainerRef, tryHidingItem]);
+
+  useEffect(() => {
+    const container = resizingContainerRef.current;
+
+    if (container) {
+      const observer = new ResizeObserver(entities =>
+        entities.forEach(entity => {
+          if (entity.target === container) {
+            const [{ inlineSize: newWidth }] = entity.contentBoxSize;
+            setWidth(Math.floor(newWidth));
+          }
+        }),
+      );
+
+      observer.observe(container);
+
+      return () => observer.disconnect();
+    }
+  }, [resizingContainerRef]);
+
+  useLayoutEffect(() => {
+    if (parentContainerRef.current) {
+      toggleItemWidth({
+        initialWidth: parentContainerRef.current.scrollWidth,
+        changedWidth: widthRef.current,
+      });
+    }
+  }, [items, parentContainerRef, toggleItemWidth]);
+
+  useLayoutEffect(() => {
+    toggleItemWidth({
+      initialWidth: widthRef.current,
+      changedWidth: width,
+    });
+
+    widthRef.current = width;
+  }, [width, toggleItemWidth]);
+
+  useLayoutEffect(() => {
+    tryHidingItem();
+  }, [tryHidingItem, visibleItemsAmount]);
+
+  return {
+    visibleItems: items.slice(0, visibleItemsAmount),
+    hiddenItems: items.slice(visibleItemsAmount),
+  };
+}

package/src/hooks/useSaveFilterState.ts

@@ -0,0 +1,55 @@
+import { useCallback, useEffect, useMemo, useState } from 'react';
+
+import { LocalStorageSource, QueryParamSource, StateProps, useSaveState } from './useSaveState';
+
+export type FilterStateOptions<T> = {
+  filterQueryKey: string;
+  filterLocalStorageKey: string;
+  validateData: (value: unknown) => value is T;
+};
+
+type FilterStateProps<TFilter> = Omit<StateProps<TFilter>, 'source'> & {
+  options?: FilterStateOptions<TFilter>;
+  parser?: (jsonFilter: string) => TFilter;
+  encoder?: (filter: TFilter) => string;
+};
+
+export const useSaveFilterState = <TFilter>({ options, filter, onLoadFilter }: FilterStateProps<TFilter>) => {
+  const [queryFilter, setQueryFilter] = useState<TFilter | null>(null);
+  const [localStorageFilter, setLocalStorageFilter] = useState<TFilter | null>(null);
+  const [isLoaded, setIsLoaded] = useState<{ localStorage: boolean; queryParams: boolean }>({
+    localStorage: false,
+    queryParams: false,
+  });
+
+  const onLoadQueryParams = useCallback((value: TFilter | null) => {
+    setQueryFilter(value);
+    setIsLoaded(prev => ({ ...prev, queryParams: true }));
+  }, []);
+
+  const onLoadLocalStorage = useCallback((value: TFilter | null) => {
+    setLocalStorageFilter(value);
+    setIsLoaded(prev => ({ ...prev, localStorage: true }));
+  }, []);
+
+  const querySource = useMemo(
+    () => (options ? new QueryParamSource<TFilter>(options.filterQueryKey, options.validateData) : undefined),
+    [options],
+  );
+  const localStorageSource = useMemo(
+    () => (options ? new LocalStorageSource<TFilter>(options.filterLocalStorageKey, options.validateData) : undefined),
+    [options],
+  );
+
+  useSaveState<TFilter>({ filter, onLoadFilter: onLoadQueryParams, source: querySource });
+  useSaveState<TFilter>({ filter, onLoadFilter: onLoadLocalStorage, source: localStorageSource });
+
+  useEffect(() => {
+    if (!options) {
+      onLoadFilter(null);
+    }
+    if (isLoaded.localStorage && isLoaded.queryParams) {
+      onLoadFilter(queryFilter ? queryFilter : localStorageFilter);
+    }
+  }, [queryFilter, onLoadFilter, localStorageFilter, isLoaded, options]);
+};

package/src/hooks/useSaveState/index.ts

@@ -0,0 +1,2 @@
+export * from './useSaveState';
+export * from './sources';

package/src/hooks/useSaveState/sources/baseSource.ts

@@ -0,0 +1,32 @@
+export abstract class BaseSource<TFilter> {
+  protected parse: (value: string) => TFilter = JSON.parse;
+  protected encode: (value: TFilter) => string = JSON.stringify;
+  protected abstract getFormSource(): string;
+  protected abstract setToSource(value: string): void;
+
+  constructor(
+    public filterKey: string,
+    private validate: (value: unknown) => value is TFilter,
+    parse?: (value: string) => TFilter,
+    encode?: (value: TFilter) => string,
+  ) {
+    if (parse) {
+      this.parse = parse;
+    }
+    if (encode) {
+      this.encode = encode;
+    }
+  }
+
+  getFilter = () => {
+    const filterFromQueryParams = this.getFormSource();
+    const parsedValue = filterFromQueryParams ? (this.parse(filterFromQueryParams) as TFilter) : null;
+    const isValid = parsedValue && this.validate(parsedValue);
+    return isValid ? parsedValue : null;
+  };
+
+  setFilter = (filter: TFilter) => {
+    const encodedValue = this.encode(filter);
+    this.setToSource(encodedValue);
+  };
+}

package/src/hooks/useSaveState/sources/index.ts

@@ -0,0 +1,3 @@
+export * from './queryParamSource';
+export * from './localStorageSource';
+export * from './baseSource';

package/src/hooks/useSaveState/sources/localStorageSource.ts

@@ -0,0 +1,17 @@
+import { isBrowser } from '../../../utils';
+import { BaseSource } from './baseSource';
+
+export class LocalStorageSource<TFilter> extends BaseSource<TFilter> {
+  getFormSource(): string {
+    if (isBrowser()) {
+      return localStorage.getItem(this.filterKey) || '';
+    }
+    return '';
+  }
+
+  setToSource(value: string): void {
+    if (isBrowser()) {
+      localStorage.setItem(this.filterKey, value);
+    }
+  }
+}

package/src/hooks/useSaveState/sources/queryParamSource.ts

@@ -0,0 +1,19 @@
+import { isBrowser } from '../../../utils';
+import { BaseSource } from './baseSource';
+
+export class QueryParamSource<TFilter> extends BaseSource<TFilter> {
+  getFormSource(): string {
+    if (isBrowser()) {
+      return new URL(window.location.href).searchParams.get(this.filterKey) || '';
+    }
+    return '';
+  }
+
+  setToSource(value: string): void {
+    if (isBrowser()) {
+      const url = new URL(window.location.href);
+      url.searchParams.set(this.filterKey, value);
+      history.pushState({}, '', url);
+    }
+  }
+}

package/src/hooks/useSaveState/useSaveState.ts

@@ -0,0 +1,25 @@
+import { useEffect } from 'react';
+
+import { BaseSource } from './sources/baseSource';
+
+export type StateProps<T> = {
+  filter: T;
+  onLoadFilter: (filter: T | null) => void;
+  source?: BaseSource<T>;
+};
+
+export const useSaveState = <T>({ filter, onLoadFilter, source }: StateProps<T>) => {
+  useEffect(() => {
+    if (!source) {
+      return;
+    }
+    onLoadFilter(source.getFilter());
+  }, [onLoadFilter, source]);
+
+  useEffect(() => {
+    if (!source) {
+      return;
+    }
+    source.setFilter(filter);
+  }, [filter, source]);
+};