@astral/ui 4.86.0 → 4.87.1

package/components/NotificationList/ListItem/useLogic/useLogic.js

@@ -1,5 +1,5 @@
 import { useEffect, useRef } from 'react';
-import { useIntersection } from 'react-use';
+import { useIntersection } from '../../../useIntersection';
 export const useLogic = ({ id, onDelete, onViewNotification, isUnread, }) => {
     const ref = useRef(null);
     const entry = useIntersection(ref, {

package/components/Select/Select.js

@@ -34,7 +34,7 @@ const SelectInner = ({ required, getOptionLabel, placeholder, helperText, hideHe
     const renderValue = (selectedOptions) => {
         // Массив с выбранными опциями
         if (Array.isArray(selectedOptions) && selectedOptions.length) {
-            return (_jsx(TagsList, { data: selectedOptions, keyId: "value", getOptionLabel: getOptionLabel || ((optionLabel) => optionLabel), onChange: handleChangeArrayValue, onClick: openSelect }));
+            return (_jsx(TagsList, { data: selectedOptions, getOptionLabel: getOptionLabel || ((optionLabel) => optionLabel), onChange: handleChangeArrayValue, onClick: openSelect }));
         }
         // Пустой массив или пустая строка
         if ((Array.isArray(selectedOptions) || typeof selectedOptions === 'string') &&

package/components/Select/useLogic/useLogic.d.ts

@@ -13,7 +13,7 @@ export declare const useLogic: <TValue>({ value, onChange, children, open: exter
     isSelectedAll: boolean | undefined;
     isIndeterminate: boolean | undefined;
     optionsLength: number | null;
-    handleChangeArrayValue: (inputValue: TValue[] | undefined) => void | undefined;
+    handleChangeArrayValue: (inputValue: unknown[] | undefined) => void | undefined;
     selectAllClassName: string | undefined;
     findMenuItemsLabel: (nodes: ReactNode, selectedValue: TValue) => ReactNode;
     isShowingPlaceholder: boolean;

package/components/TagsList/types.d.ts

@@ -1,5 +1,5 @@
 import { type MouseEvent, type RefObject } from 'react';
-export type TagValue = string | Record<string, unknown>;
+export type TagValue = string | number | Record<string, unknown>;
 export type TagsListProps<TData extends TagValue = TagValue> = {
     /**
      * Название класса, применяется к корневому компоненту
@@ -17,7 +17,7 @@ export type TagsListProps<TData extends TagValue = TagValue> = {
      * Поле, используемое в качестве ключа списка.
      * Если не передано, для генерации ключа будет использоваться getOptionLabel
      */
-    keyId?: TData extends string ? never : keyof TData;
+    keyId?: TData extends object ? keyof TData : never;
     /**
      * Используется для определения строкового значения опции
      */

package/components/TagsList/useLogic/useLogic.js

@@ -79,19 +79,25 @@ export const useLogic = ({ data = [], keyId, getOptionLabel, onChange, inputCont
             resizeObserver.disconnect();
         };
     }, [data]);
+    /**
+     * Возвращает значение, по которому определяется идентичность тегов.
+     * Для примитивов сравнение идет по самому значению, keyId применим только к объектам
+     */
+    const getComparableValue = (option) => {
+        if (typeof option !== 'object' || option === null) {
+            return option;
+        }
+        if (keyId) {
+            return option[keyId];
+        }
+        return getOptionLabel(option);
+    };
     const getTagProps = (option) => {
         const label = getOptionLabel(option);
         const onDelete = () => {
-            const newValue = data.filter((value) => {
-                if (typeof value === 'string') {
-                    return value !== option;
-                }
-                if (keyId) {
-                    return value[keyId] !== option[keyId];
-                }
-                return getOptionLabel(value) !== getOptionLabel(option);
-            });
-            onChange(newValue.length ? newValue : []);
+            const deletedValue = getComparableValue(option);
+            const newValue = data.filter((value) => getComparableValue(value) !== deletedValue);
+            onChange(newValue);
         };
         return { label, shrinks: false, onDelete };
     };

package/components/TagsList/utils/getKey/getKey.js

@@ -1,10 +1,10 @@
 export const getKey = (option, keyId, getOptionLabel) => {
-    if (typeof option === 'string') {
-        return option;
+    const isObjectOption = typeof option === 'object' && option !== null;
+    if (!isObjectOption) {
+        return String(option);
     }
     if (keyId) {
-        const key = option[keyId];
-        return typeof key === 'number' ? key.toString() : key;
+        return String(option[keyId]);
     }
     return getOptionLabel(option).toString();
 };

package/components/createGlobalState/createGlobalState.d.ts

@@ -0,0 +1,6 @@
+import { type IHookStateInitAction, type IHookStateSetAction } from './utils/types';
+export declare function createGlobalState<TState>(initialState: IHookStateInitAction<TState>): () => [TState, (state: IHookStateSetAction<TState>) => void];
+export declare function createGlobalState<TState = undefined>(): () => [
+    TState,
+    (state: IHookStateSetAction<TState>) => void
+];

package/components/createGlobalState/createGlobalState.js

@@ -0,0 +1,25 @@
+import { useEffect, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { resolveHookState } from './utils/resolveHookState';
+export function createGlobalState(initialState) {
+    const store = {
+        state: initialState instanceof Function ? initialState() : initialState,
+        setState(nextState) {
+            store.state = resolveHookState(nextState, store.state);
+            store.setters.forEach((setter) => setter(store.state));
+        },
+        setters: [],
+    };
+    return () => {
+        const [globalState, stateSetter] = useState(store.state);
+        useEffect(() => () => {
+            store.setters = store.setters.filter((setter) => setter !== stateSetter);
+        }, []);
+        useIsomorphicLayoutEffect(() => {
+            if (!store.setters.includes(stateSetter)) {
+                store.setters.push(stateSetter);
+            }
+        });
+        return [globalState, store.setState];
+    };
+}

package/components/createGlobalState/index.d.ts

@@ -0,0 +1 @@
+export * from './createGlobalState';

package/components/createGlobalState/index.js

@@ -0,0 +1 @@
+export * from './createGlobalState';

package/components/createGlobalState/public.d.ts

@@ -0,0 +1 @@
+export * from './createGlobalState';

package/components/createGlobalState/public.js

@@ -0,0 +1 @@
+export * from './createGlobalState';

package/components/createGlobalState/utils/index.d.ts

@@ -0,0 +1 @@
+export * from './resolveHookState';

package/components/createGlobalState/utils/index.js

@@ -0,0 +1 @@
+export * from './resolveHookState';

package/components/createGlobalState/utils/resolveHookState/index.d.ts

@@ -0,0 +1 @@
+export * from './resolveHookState';

package/components/createGlobalState/utils/resolveHookState/index.js

@@ -0,0 +1 @@
+export * from './resolveHookState';

package/components/createGlobalState/utils/resolveHookState/resolveHookState.d.ts

@@ -0,0 +1,4 @@
+import { type IHookStateInitAction, type IHookStateResolvable, type IHookStateSetAction } from '../types';
+export declare function resolveHookState<TState>(nextState: IHookStateInitAction<TState>): TState;
+export declare function resolveHookState<TState, TCurrentState extends TState>(nextState: IHookStateSetAction<TState>, currentState?: TCurrentState): TState;
+export declare function resolveHookState<TState, TCurrentState extends TState>(nextState: IHookStateResolvable<TState>, currentState?: TCurrentState): TState;

package/components/createGlobalState/utils/resolveHookState/resolveHookState.js

@@ -0,0 +1,8 @@
+export function resolveHookState(nextState, currentState) {
+    if (typeof nextState === 'function') {
+        return nextState.length
+            ? nextState(currentState)
+            : nextState();
+    }
+    return nextState;
+}

package/components/createGlobalState/utils/types.d.ts

@@ -0,0 +1,5 @@
+export type IHookStateInitialSetter<TState> = () => TState;
+export type IHookStateInitAction<TState> = TState | IHookStateInitialSetter<TState>;
+export type IHookStateSetter<TState> = ((prevState: TState) => TState) | (() => TState);
+export type IHookStateSetAction<TState> = TState | IHookStateSetter<TState>;
+export type IHookStateResolvable<TState> = TState | IHookStateInitialSetter<TState> | IHookStateSetter<TState>;

package/components/createGlobalState/utils/types.js

@@ -0,0 +1 @@
+export {};

package/components/useDebounce/hooks/useTimeoutFn/index.d.ts

@@ -0,0 +1 @@
+export * from './useTimeoutFn';

package/components/useDebounce/hooks/useTimeoutFn/index.js

@@ -0,0 +1 @@
+export * from './useTimeoutFn';

package/components/useDebounce/hooks/useTimeoutFn/useTimeoutFn.d.ts

@@ -0,0 +1,2 @@
+export type UseTimeoutFnReturn = [() => boolean | null, () => void, () => void];
+export declare function useTimeoutFn(fn: Function, ms?: number): UseTimeoutFnReturn;

package/components/useDebounce/hooks/useTimeoutFn/useTimeoutFn.js

@@ -0,0 +1,29 @@
+import { useCallback, useEffect, useRef } from 'react';
+export function useTimeoutFn(fn, ms = 0) {
+    const ready = useRef(false);
+    const timeout = useRef(null);
+    const callback = useRef(fn);
+    const isReady = useCallback(() => ready.current, []);
+    const set = useCallback(() => {
+        ready.current = false;
+        timeout.current && clearTimeout(timeout.current);
+        timeout.current = setTimeout(() => {
+            ready.current = true;
+            callback.current();
+        }, ms);
+    }, [ms]);
+    const clear = useCallback(() => {
+        ready.current = null;
+        timeout.current && clearTimeout(timeout.current);
+    }, []);
+    // update ref when function changes
+    useEffect(() => {
+        callback.current = fn;
+    }, [fn]);
+    // set on mount, clear on unmount
+    useEffect(() => {
+        set();
+        return clear;
+    }, [ms]);
+    return [isReady, clear, set];
+}

package/components/useDebounce/index.d.ts

@@ -0,0 +1 @@
+export * from './useDebounce';

package/components/useDebounce/index.js

@@ -0,0 +1 @@
+export * from './useDebounce';

package/components/useDebounce/public.d.ts

@@ -0,0 +1 @@
+export * from './useDebounce';

package/components/useDebounce/public.js

@@ -0,0 +1 @@
+export * from './useDebounce';

package/components/useDebounce/useDebounce.d.ts

@@ -0,0 +1,6 @@
+import { type DependencyList } from 'react';
+export type UseDebounceReturn = [() => boolean | null, () => void];
+/**
+ * Хук откладывает вызов функции, пока не пройдет переданное число миллисекунд после последнего вызова debounce-функции.
+ */
+export declare function useDebounce(fn: Function, ms?: number, deps?: DependencyList): UseDebounceReturn;

package/components/useDebounce/useDebounce.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+import { useTimeoutFn } from './hooks/useTimeoutFn';
+/**
+ * Хук откладывает вызов функции, пока не пройдет переданное число миллисекунд после последнего вызова debounce-функции.
+ */
+export function useDebounce(fn, ms = 0, deps = []) {
+    const [isReady, cancel, reset] = useTimeoutFn(fn, ms);
+    useEffect(reset, deps);
+    return [isReady, cancel];
+}

package/components/useFirstMountState/index.d.ts

@@ -1 +1 @@
-export { useFirstMountState } from './useFirstMountState';
+export * from './useFirstMountState';

package/components/useFirstMountState/index.js

@@ -1 +1 @@
-export { useFirstMountState } from './useFirstMountState';
+export * from './useFirstMountState';

package/components/useFirstMountState/public.d.ts

@@ -1 +1 @@
-export { useFirstMountState } from './useFirstMountState';
+export * from './useFirstMountState';

package/components/useFirstMountState/public.js

@@ -1 +1 @@
-export { useFirstMountState } from './useFirstMountState';
+export * from './useFirstMountState';

package/components/useFirstMountState/useFirstMountState.d.ts

@@ -1 +1,4 @@
-export { useFirstMountState } from 'react-use';
+/**
+ * Хук возвращает true если компонент только монтировался (при первом рендере) и false в другом случае.
+ */
+export declare function useFirstMountState(): boolean;

package/components/useFirstMountState/useFirstMountState.js

@@ -1 +1,12 @@
-export { useFirstMountState } from 'react-use';
+import { useRef } from 'react';
+/**
+ * Хук возвращает true если компонент только монтировался (при первом рендере) и false в другом случае.
+ */
+export function useFirstMountState() {
+    const isFirst = useRef(true);
+    if (isFirst.current) {
+        isFirst.current = false;
+        return true;
+    }
+    return isFirst.current;
+}

package/components/useIntersection/index.d.ts

@@ -0,0 +1 @@
+export * from './useIntersection';

package/components/useIntersection/index.js

@@ -0,0 +1 @@
+export * from './useIntersection';

package/components/useIntersection/public.d.ts

@@ -0,0 +1 @@
+export * from './useIntersection';

package/components/useIntersection/public.js

@@ -0,0 +1 @@
+export * from './useIntersection';

package/components/useIntersection/useIntersection.d.ts

@@ -0,0 +1,5 @@
+import { type RefObject } from 'react';
+/**
+ * Хук отслеживает изменения в пересечении целевого элемента с родительским элементом или с верхним уровнем области просмотра документа.
+ */
+export declare const useIntersection: (ref: RefObject<HTMLElement | null>, options: IntersectionObserverInit) => IntersectionObserverEntry | null;

package/components/useIntersection/useIntersection.js

@@ -0,0 +1,22 @@
+import { useEffect, useState } from 'react';
+/**
+ * Хук отслеживает изменения в пересечении целевого элемента с родительским элементом или с верхним уровнем области просмотра документа.
+ */
+export const useIntersection = (ref, options) => {
+    const [intersectionObserverEntry, setIntersectionObserverEntry] = useState(null);
+    useEffect(() => {
+        if (ref.current && typeof IntersectionObserver === 'function') {
+            const handler = (entries) => {
+                setIntersectionObserverEntry(entries[0]);
+            };
+            const observer = new IntersectionObserver(handler, options);
+            observer.observe(ref.current);
+            return () => {
+                setIntersectionObserverEntry(null);
+                observer.disconnect();
+            };
+        }
+        return () => { };
+    }, [ref.current, options.threshold, options.root, options.rootMargin]);
+    return intersectionObserverEntry;
+};

package/components/useInterval/index.d.ts

@@ -1 +1 @@
-export { useInterval } from './useInterval';
+export * from './useInterval';

package/components/useInterval/index.js

@@ -1 +1 @@
-export { useInterval } from './useInterval';
+export * from './useInterval';

package/components/useInterval/public.d.ts

@@ -1 +1 @@
-export { useInterval } from './useInterval';
+export * from './useInterval';

package/components/useInterval/public.js

@@ -1 +1 @@
-export { useInterval } from './useInterval';
+export * from './useInterval';

package/components/useInterval/useInterval.d.ts

@@ -1 +1,6 @@
-export { useInterval } from 'react-use';
+/**
+ * Хук для запуска функции с заданным интервалом.
+ * Если передать null, интервал не будет запущен (или будет остановлен).
+ * Если значение не указано (undefined), используется задержка 0 мс.
+ */
+export declare const useInterval: (callback: Function, delay?: number | null) => void;

package/components/useInterval/useInterval.js

@@ -1 +1,19 @@
-export { useInterval } from 'react-use';
+import { useEffect, useRef } from 'react';
+/**
+ * Хук для запуска функции с заданным интервалом.
+ * Если передать null, интервал не будет запущен (или будет остановлен).
+ * Если значение не указано (undefined), используется задержка 0 мс.
+ */
+export const useInterval = (callback, delay) => {
+    const savedCallback = useRef(() => { });
+    useEffect(() => {
+        savedCallback.current = callback;
+    });
+    useEffect(() => {
+        if (delay !== null) {
+            const interval = setInterval(() => savedCallback.current(), delay || 0);
+            return () => clearInterval(interval);
+        }
+        return undefined;
+    }, [delay]);
+};

package/components/useIsomorphicLayoutEffect/index.d.ts

@@ -0,0 +1 @@
+export * from './useIsomorphicLayoutEffect';

package/components/useIsomorphicLayoutEffect/index.js

@@ -0,0 +1 @@
+export * from './useIsomorphicLayoutEffect';

package/components/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/components/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.js

@@ -0,0 +1,5 @@
+import { useEffect, useLayoutEffect } from 'react';
+import { isBrowser } from '../utils/isBrowser';
+export const useIsomorphicLayoutEffect = isBrowser
+    ? useLayoutEffect
+    : useEffect;

package/components/useLocalStorage/index.d.ts

@@ -1 +1 @@
-export * from './useLocalStorage';
+export { default as useLocalStorage } from './useLocalStorage';

package/components/useLocalStorage/index.js

@@ -1 +1 @@
-export * from './useLocalStorage';
+export { default as useLocalStorage } from './useLocalStorage';

package/components/useLocalStorage/public.d.ts

@@ -1 +1 @@
-export * from './useLocalStorage';
+export { default as useLocalStorage } from './useLocalStorage';

package/components/useLocalStorage/public.js

@@ -1 +1 @@
-export * from './useLocalStorage';
+export { default as useLocalStorage } from './useLocalStorage';

package/components/useLocalStorage/useLocalStorage.d.ts

@@ -1 +1,15 @@
-export { useLocalStorage } from 'react-use';
+import { type Dispatch, type SetStateAction } from 'react';
+type ParserOptions<T> = {
+    raw: true;
+} | {
+    raw: false;
+    serializer: (value: T) => string;
+    deserializer: (value: string) => T;
+};
+/**
+ * Хук управляет состоянием, которое синхронизируется с localStorage браузера.
+ * Возвращает текущее значение, функцию для его обновления и функцию для удаления значения из localStorage.
+ */
+export declare const useLocalStorage: <T>(key: string, initialValue?: T | undefined, options?: ParserOptions<T> | undefined) => [T | undefined, Dispatch<SetStateAction<T | undefined>>, () => void];
+declare const useLocalStorageExport: <T>(key: string, initialValue?: T | undefined, options?: ParserOptions<T> | undefined) => [T | undefined, Dispatch<SetStateAction<T | undefined>>, () => void];
+export default useLocalStorageExport;

package/components/useLocalStorage/useLocalStorage.js

@@ -1 +1,96 @@
-export { useLocalStorage } from 'react-use';
+import { useCallback, useLayoutEffect, useRef, useState, } from 'react';
+import { isBrowser } from '../utils/isBrowser';
+const noop = () => { };
+/**
+ * Хук управляет состоянием, которое синхронизируется с localStorage браузера.
+ * Возвращает текущее значение, функцию для его обновления и функцию для удаления значения из localStorage.
+ */
+export const useLocalStorage = (key, initialValue, options) => {
+    if (!key) {
+        throw new Error('useLocalStorage key may not be falsy');
+    }
+    const deserializer = (() => {
+        if (!options) {
+            return JSON.parse;
+        }
+        if (options.raw) {
+            return (value) => value;
+        }
+        return options.deserializer;
+    })();
+    const serializer = (() => {
+        if (!options) {
+            return JSON.stringify;
+        }
+        if (options.raw) {
+            return String;
+        }
+        return options.serializer;
+    })();
+    const initializer = useRef((newKey) => {
+        try {
+            const localStorageValue = localStorage.getItem(newKey);
+            if (localStorageValue !== null) {
+                return deserializer(localStorageValue);
+            }
+            if (initialValue) {
+                localStorage.setItem(newKey, serializer(initialValue));
+            }
+            return initialValue;
+        }
+        catch {
+            // If user is in private mode or has storage restriction
+            // localStorage can throw. JSON.parse and JSON.stringify
+            // can throw, too.
+            return initialValue;
+        }
+    });
+    const [state, setState] = useState(() => initializer.current(key));
+    useLayoutEffect(() => setState(initializer.current(key)), [key]);
+    const serializeValue = (value, parserOptions) => {
+        if (!parserOptions) {
+            return JSON.stringify(value);
+        }
+        if (parserOptions.raw) {
+            return typeof value === 'string' ? value : JSON.stringify(value);
+        }
+        return parserOptions.serializer(value);
+    };
+    const set = useCallback((valOrFunc) => {
+        try {
+            const newState = typeof valOrFunc === 'function'
+                ? valOrFunc(state)
+                : valOrFunc;
+            if (typeof newState === 'undefined') {
+                return;
+            }
+            const value = serializeValue(newState, options);
+            localStorage.setItem(key, value);
+            setState(deserializer(value));
+        }
+        catch {
+            // If user is in private mode or has storage restriction
+            // localStorage can throw. Also JSON.stringify can throw.
+        }
+    }, [key, setState]);
+    const remove = useCallback(() => {
+        try {
+            localStorage.removeItem(key);
+            setState(undefined);
+        }
+        catch {
+            // If user is in private mode or has storage restriction
+            // localStorage can throw.
+        }
+    }, [key, setState]);
+    return [state, set, remove];
+};
+const useLocalStorageFallback = ((initialValue) => [
+    initialValue,
+    noop,
+    noop,
+]);
+const useLocalStorageExport = isBrowser
+    ? useLocalStorage
+    : useLocalStorageFallback;
+export default useLocalStorageExport;

package/components/useMeasure/index.d.ts

@@ -0,0 +1 @@
+export { default as useMeasure } from './useMeasure';

package/components/useMeasure/index.js

@@ -0,0 +1 @@
+export { default as useMeasure } from './useMeasure';

package/components/useMeasure/public.d.ts

@@ -0,0 +1 @@
+export { default as useMeasure } from './useMeasure';

package/components/useMeasure/public.js

@@ -0,0 +1 @@
+export { default as useMeasure } from './useMeasure';

package/components/useMeasure/useMeasure.d.ts

@@ -0,0 +1,13 @@
+export type UseMeasureRect = Pick<DOMRectReadOnly, 'x' | 'y' | 'top' | 'left' | 'right' | 'bottom' | 'height' | 'width'>;
+export type UseMeasureRef<TElement extends Element = Element> = (element: TElement) => void;
+export type UseMeasureResult<TElement extends Element = Element> = [
+    UseMeasureRef<TElement>,
+    UseMeasureRect
+];
+/**
+ * Хук отслеживает размеры HTML-элемента с помощью Resize Observer API.
+ * Принимает ref на HTML-элемент и возвращает объект с размерами элемента.
+ */
+declare function useMeasure<TElement extends Element = Element>(): UseMeasureResult<TElement>;
+declare const useMeasureExport: typeof useMeasure;
+export default useMeasureExport;

package/components/useMeasure/useMeasure.js

@@ -0,0 +1,42 @@
+import { useMemo, useState } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect';
+import { isBrowser } from '../utils/isBrowser';
+const noop = () => { };
+const defaultState = {
+    x: 0,
+    y: 0,
+    width: 0,
+    height: 0,
+    top: 0,
+    left: 0,
+    bottom: 0,
+    right: 0,
+};
+/**
+ * Хук отслеживает размеры HTML-элемента с помощью Resize Observer API.
+ * Принимает ref на HTML-элемент и возвращает объект с размерами элемента.
+ */
+function useMeasure() {
+    const [element, ref] = useState(null);
+    const [rect, setRect] = useState(defaultState);
+    const observer = useMemo(() => new window.ResizeObserver((entries) => {
+        if (entries[0]) {
+            setRect(entries[0].contentRect);
+        }
+    }), []);
+    useIsomorphicLayoutEffect(() => {
+        if (!element) {
+            return;
+        }
+        observer.observe(element);
+        return () => {
+            observer.disconnect();
+        };
+    }, [element]);
+    return [ref, rect];
+}
+const useMeasureFallback = (() => [noop, defaultState]);
+const useMeasureExport = isBrowser && typeof window.ResizeObserver !== 'undefined'
+    ? useMeasure
+    : useMeasureFallback;
+export default useMeasureExport;

package/components/useNewToggle/index.d.ts

@@ -0,0 +1 @@
+export * from './useNewToggle';

package/components/useNewToggle/index.js

@@ -0,0 +1 @@
+export * from './useNewToggle';

package/components/useNewToggle/public.d.ts

@@ -0,0 +1 @@
+export * from './useNewToggle';