@astral/ui 4.92.3 → 4.94.0

package/node/components/TreeLikeList/TreeItem/useLogic/useLogic.js

@@ -3,10 +3,14 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const useToggle_1 = require("../../../useToggle");
+const useViewportType_1 = require("../../../useViewportType");
 const utils_1 = require("./utils");
 const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isInitialExpanded, expandedLevel, chainsToSelectedItem = [], disabledItems, onChange, isObjectMode, }) => {
     const { id, children } = item;
-    const [isTooltipOpen, openTooltip, closeTooltip] = (0, useToggle_1.useToggle)();
+    const [isConfirmChildrenOpen, openConfirmChildren, closeConfirmChildren] = (0, useToggle_1.useToggle)();
+    const [isMobilePanelOpen, setIsMobilePanelOpen] = (0, react_1.useState)(false);
+    const itemRef = (0, react_1.useRef)(null);
+    const { isMobile } = (0, useViewportType_1.useViewportType)();
     const childrenIds = (0, react_1.useMemo)(() => (0, utils_1.getAllChildrenId)(children, disabledItems), [children, disabledItems]);
     const isSelected = (0, utils_1.checkIsSelected)(value, id);
     const flatChainsToSelectedItem = (0, react_1.useMemo)(() => chainsToSelectedItem?.reduce((acc, chain) => acc.concat(chain), []), [chainsToSelectedItem]);
@@ -16,6 +20,16 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
     const isDisabled = Boolean(disabledItem);
     const disabledReason = disabledItem?.disabledReason;
     const nextLevel = level + 1;
+    const toggleConfirmChildren = (isOpen) => {
+        if (!isConfirmChildrenSelection) {
+            return;
+        }
+        if (isOpen) {
+            openConfirmChildren();
+            return;
+        }
+        closeConfirmChildren();
+    };
     const handleChange = () => {
         if (isDisabled) {
             return;
@@ -24,9 +38,7 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
         // Сбрасываем значение
         if (currentValueIds.includes(id)) {
             const hasSelectedChildren = childrenIds.some((childrenId) => currentValueIds.includes(childrenId));
-            if (isConfirmChildrenSelection && hasSelectedChildren) {
-                openTooltip();
-            }
+            toggleConfirmChildren(hasSelectedChildren);
             const newValue = (0, utils_1.removeItem)(value, id);
             return onChange(newValue);
         }
@@ -34,11 +46,14 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
         const newValue = (0, utils_1.addItem)(value, item, isObjectMode);
         onChange(newValue);
         const isAllChildrenSelected = childrenIds.every((childrenId) => currentValueIds.includes(childrenId));
-        if (isConfirmChildrenSelection && !isAllChildrenSelected) {
-            openTooltip();
-        }
+        toggleConfirmChildren(!isAllChildrenSelected);
     };
-    const handleConfirmChildrenSelection = () => {
+    const handleMobileOpenChange = (isOpen) => {
+        setIsMobilePanelOpen(isOpen);
+        closeConfirmChildren();
+    };
+    const handleConfirmChildrenSelection = (event) => {
+        event.stopPropagation();
         const currentValueIds = (0, utils_1.getCurrentValueIds)(value);
         if (isSelected) {
             // Элемент выбран - выбираем все дочерние элементы
@@ -52,7 +67,7 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
             const newValue = (0, utils_1.removeItemsByIds)(value, idsToRemove);
             onChange(newValue);
         }
-        closeTooltip();
+        closeConfirmChildren();
     };
     /**
      * Предотвращаем всплытие события, так как клик в области чекбокса или label вызывает обработчик на уровне всего item
@@ -60,25 +75,32 @@ const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isIniti
     const handleClick = (event) => {
         event.stopPropagation();
     };
+    const confirmChildrenExcludeNodes = (0, react_1.useMemo)(() => [itemRef], []);
     return {
         isSelected,
         isDefaultExpanded,
         isDisabled,
         disabledReason,
         nextLevel,
+        confirmChildrenExcludeNodes,
+        itemRef,
         formControlLabelProps: {
             disabled: isDisabled,
             onChange: handleChange,
             onClick: handleClick,
         },
-        tooltipProps: {
-            open: isTooltipOpen,
-            onClose: closeTooltip,
+        confirmChildrenProps: {
+            open: isConfirmChildrenOpen,
+            onClose: closeConfirmChildren,
         },
         confirmChildrenButtonProps: {
             onClick: handleConfirmChildrenSelection,
         },
         handleChange,
+        handleMobileOpenChange,
+        isMobile,
+        isMobilePanelOpen,
+        isConfirmChildrenAvailable: isMobile && isConfirmChildrenSelection,
     };
 };
 exports.useLogic = useLogic;

package/node/components/TreeLikeList/TreeLikeList.js

@@ -11,6 +11,6 @@ const INITIAL_LEVEL = 0;
 const TreeLikeList = (props) => {
     const { listProps, itemProps } = (0, useLogic_1.useLogic)(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, cn_1.cn)(className, Tree_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ListWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.List, { className: (0, cn_1.cn)(className, Tree_1.treeListClassnames.list), ...listProps, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }) }));
 };
 exports.TreeLikeList = TreeLikeList;

package/node/components/TreeLikeList/styles.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+export declare const ListWrapper: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
+    theme?: import("@emotion/react").Theme | undefined;
+    as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;
+}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
 export declare const List: import("@emotion/styled/dist/declarations/src/types").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/node/components/TreeLikeList/styles.js

@@ -1,11 +1,36 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.InnerList = exports.List = void 0;
+exports.InnerList = exports.List = exports.ListWrapper = void 0;
 const styled_1 = require("../styled");
 const mixins_1 = require("../styled/mixins");
+exports.ListWrapper = styled_1.styled.div `
+  display: contents;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: relative;
+    z-index: 0;
+
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    min-height: 0;
+
+    overflow: hidden;
+
+    transform: translateZ(0);
+  }
+`;
 exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};
   overflow: hidden;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    min-height: 0;
+
+    overflow-y: auto;
+  }
 `;
 exports.InnerList = (0, styled_1.styled)(exports.List) `
   overflow: unset;

package/node/components/useAsyncOptions/faker.d.ts

@@ -0,0 +1,3 @@
+export declare const makeFetchOptions: (options: string[]) => import("@vitest/spy").Mock<import("@vitest/spy").Procedure>;
+export declare const makeEmptyFetchOptions: () => import("@vitest/spy").Mock<import("@vitest/spy").Procedure>;
+export declare const makeErrorFetchOptions: (error: Error) => import("@vitest/spy").Mock<import("@vitest/spy").Procedure>;

package/node/components/useAsyncOptions/faker.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.makeErrorFetchOptions = exports.makeEmptyFetchOptions = exports.makeFetchOptions = void 0;
+const makeFetchOptions = (options) => vi.fn().mockResolvedValue({ options });
+exports.makeFetchOptions = makeFetchOptions;
+const makeEmptyFetchOptions = () => vi.fn().mockResolvedValue({ options: [] });
+exports.makeEmptyFetchOptions = makeEmptyFetchOptions;
+const makeErrorFetchOptions = (error) => vi.fn().mockRejectedValue(error);
+exports.makeErrorFetchOptions = makeErrorFetchOptions;

package/node/components/useAsyncOptions/index.d.ts

@@ -1 +1,2 @@
 export * from './useAsyncOptions';
+export * from './types';

package/node/components/useAsyncOptions/index.js

@@ -15,3 +15,4 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 __exportStar(require("./useAsyncOptions"), exports);
+__exportStar(require("./types"), exports);

package/node/components/useAsyncOptions/public.d.ts

@@ -1 +1,2 @@
+export * from './types';
 export * from './useAsyncOptions';

package/node/components/useAsyncOptions/public.js

@@ -14,4 +14,5 @@ var __exportStar = (this && this.__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("./types"), exports);
 __exportStar(require("./useAsyncOptions"), exports);

package/node/components/useAsyncOptions/types.d.ts

@@ -0,0 +1,7 @@
+export type ShouldFetchResult = {
+    isAllow: true;
+} | {
+    isAllow: false;
+    reason: string;
+};
+export type ShouldFetch = (inputValue: string) => ShouldFetchResult;

package/node/components/useAsyncOptions/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/node/components/useAsyncOptions/useAsyncOptions.d.ts

@@ -1,4 +1,5 @@
 import type { AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
+import { type ShouldFetch } from './types';
 type FetchResult<TOptions> = {
     options: TOptions[];
     meta?: {
@@ -37,6 +38,10 @@ type UseAsyncOptionsParams<TOptions> = {
      * Минимальное количество символов для выполнения запроса
      */
     minSymbolsToFetch: number;
+    /**
+     * Функция, задающая правила валидации запроса
+     */
+    shouldFetch?: ShouldFetch;
     /**
      * Задержка для debounce
      */
@@ -57,7 +62,7 @@ type UseAsyncOptionsParams<TOptions> = {
  * Хук для асинхронной загрузки опций в компонентах с поиском.
  * Управляет задержкой, отменой запросов и состояниями загрузки.
  */
-export declare const useAsyncOptions: <TOptions>({ fetchOptions, fetchDelayMs, minSymbolsToFetch, onDataLoadError, isSmoothLoading, }: UseAsyncOptionsParams<TOptions>) => {
+export declare const useAsyncOptions: <TOptions>({ fetchOptions, fetchDelayMs, minSymbolsToFetch, shouldFetch, onDataLoadError, isSmoothLoading, }: UseAsyncOptionsParams<TOptions>) => {
     options: TOptions[];
     meta: {
         isAllDataLoaded: boolean;
@@ -65,6 +70,8 @@ export declare const useAsyncOptions: <TOptions>({ fetchOptions, fetchDelayMs, m
     isLoadingData: boolean;
     onRetry: (search: string) => void;
     isLoadingError: boolean;
+    isAllow: boolean;
+    hintText: string;
     debouncedFetchOptions: import("debounce").DebouncedFunction<(search: string) => void>;
     onInputChange: (search: string, reason?: AutocompleteInputChangeReason) => void;
     onOpen: (defaultSearch?: string, defaultValue?: TOptions | null | undefined, isAlwaysTriggerOnOpen?: boolean) => void;

package/node/components/useAsyncOptions/useAsyncOptions.js

@@ -8,12 +8,14 @@ const useLoadingState_1 = require("../useLoadingState");
  * Хук для асинхронной загрузки опций в компонентах с поиском.
  * Управляет задержкой, отменой запросов и состояниями загрузки.
  */
-const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch, onDataLoadError, isSmoothLoading, }) => {
+const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch, shouldFetch, onDataLoadError, isSmoothLoading, }) => {
     const [isLoadingData, setIsLoadingData] = (0, react_1.useState)(false);
     const [isFirstOpen, setIsFirstOpen] = (0, react_1.useState)(true);
     const [isLoadingError, setIsLoadingError] = (0, react_1.useState)(false);
     const abortControllerRef = (0, react_1.useRef)(null);
     const { isShowLoader } = (0, useLoadingState_1.useLoadingState)(isLoadingData);
+    const [isAllow, setIsAllow] = (0, react_1.useState)(true);
+    const [hintText, setHintText] = (0, react_1.useState)('');
     const [options, setOptions] = (0, react_1.useState)({
         options: [],
     });
@@ -42,17 +44,32 @@ const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch, onData
             abortControllerRef.current = null;
         });
     }, fetchDelayMs), [fetchOptions, fetchDelayMs]);
-    const onInputChange = (search, reason) => {
+    const isAllowedSearch = (search) => {
         if ((!search.length && minSymbolsToFetch > 0) ||
             search.length < minSymbolsToFetch) {
+            setHintText('');
+            return false;
+        }
+        const shouldFetchResult = shouldFetch?.(search);
+        if (shouldFetchResult && !shouldFetchResult.isAllow) {
+            setHintText(search.length !== 0 ? shouldFetchResult.reason : '');
+            return false;
+        }
+        return true;
+    };
+    const onInputChange = (search, reason) => {
+        if (!isAllowedSearch(search)) {
             if (debouncedFetchOptions.isPending) {
                 debouncedFetchOptions.clear();
             }
             setIsLoadingData(false);
             setOptions({ options: [] });
+            setIsAllow(false);
             return;
         }
         if (!isFirstOpen) {
+            setIsAllow(true);
+            setHintText('');
             if (reason === 'input') {
                 setIsLoadingData(true);
             }
@@ -62,7 +79,7 @@ const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch, onData
     const onOpen = (defaultSearch = '', defaultValue, isAlwaysTriggerOnOpen = false) => {
         if (isFirstOpen || isAlwaysTriggerOnOpen) {
             setIsFirstOpen(false);
-            if (defaultValue || minSymbolsToFetch === 0) {
+            if (defaultValue || isAllowedSearch(defaultSearch)) {
                 setIsLoadingData(true);
                 debouncedFetchOptions(defaultSearch);
             }
@@ -81,6 +98,8 @@ const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch, onData
         isLoadingData: isSmoothLoading ? isShowLoader : isLoadingData,
         onRetry,
         isLoadingError,
+        isAllow,
+        hintText,
         debouncedFetchOptions,
         onInputChange,
         onOpen,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@astral/ui",
-  "version": "4.92.3",
+  "version": "4.94.0",
   "browser": "./index.js",
   "main": "./node/index.js",
   "dependencies": {

package/components/AsyncAutocomplete/faker.d.ts

@@ -1,2 +0,0 @@
-import { type AxiosRequestConfig } from 'axios';
-export declare const getFakeUsers: (search: string, options?: AxiosRequestConfig) => Promise<any>;

package/components/AsyncAutocomplete/faker.js

@@ -1,38 +0,0 @@
-import { faker } from '@ui/dev/faker';
-import axios from 'axios';
-import AxiosMockAdapter from 'axios-mock-adapter';
-const getRandomDelay = () => Math.random() * 100 + 100; // 200-500ms
-const axiosInstance = axios.create();
-const mock = new AxiosMockAdapter(axiosInstance, {
-    delayResponse: getRandomDelay(),
-});
-const generateFakeUsers = (count) => {
-    return Array.from({ length: count - 1 }).map(() => ({
-        id: faker.string.uuid(),
-        name: faker.person.fullName(),
-    }));
-};
-const FAKE_USERS = [
-    {
-        id: '1',
-        name: 'Иван Третьяков',
-    },
-    ...generateFakeUsers(30),
-];
-mock.onGet('/api/users').reply((config) => {
-    const search = new URLSearchParams(config.params).get('name_like') || '';
-    const users = FAKE_USERS.filter((user) => user.name.toLowerCase().includes(search.toLowerCase()));
-    return [200, users];
-});
-mock.onGet('/api/users/id').reply((config) => {
-    const userId = new URLSearchParams(config.params).get('id') || '';
-    const user = FAKE_USERS.find((fakeUser) => fakeUser.id === userId);
-    return [200, user];
-});
-export const getFakeUsers = async (search, options) => {
-    const response = await axiosInstance.get('api/users', {
-        ...options,
-        params: { ...options?.params, name_like: search },
-    });
-    return response.data;
-};

package/node/components/AsyncAutocomplete/faker.d.ts

@@ -1,2 +0,0 @@
-import { type AxiosRequestConfig } from 'axios';
-export declare const getFakeUsers: (search: string, options?: AxiosRequestConfig) => Promise<any>;

package/node/components/AsyncAutocomplete/faker.js

@@ -1,45 +0,0 @@
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.getFakeUsers = void 0;
-const faker_1 = require("@ui/dev/faker");
-const axios_1 = __importDefault(require("axios"));
-const axios_mock_adapter_1 = __importDefault(require("axios-mock-adapter"));
-const getRandomDelay = () => Math.random() * 100 + 100; // 200-500ms
-const axiosInstance = axios_1.default.create();
-const mock = new axios_mock_adapter_1.default(axiosInstance, {
-    delayResponse: getRandomDelay(),
-});
-const generateFakeUsers = (count) => {
-    return Array.from({ length: count - 1 }).map(() => ({
-        id: faker_1.faker.string.uuid(),
-        name: faker_1.faker.person.fullName(),
-    }));
-};
-const FAKE_USERS = [
-    {
-        id: '1',
-        name: 'Иван Третьяков',
-    },
-    ...generateFakeUsers(30),
-];
-mock.onGet('/api/users').reply((config) => {
-    const search = new URLSearchParams(config.params).get('name_like') || '';
-    const users = FAKE_USERS.filter((user) => user.name.toLowerCase().includes(search.toLowerCase()));
-    return [200, users];
-});
-mock.onGet('/api/users/id').reply((config) => {
-    const userId = new URLSearchParams(config.params).get('id') || '';
-    const user = FAKE_USERS.find((fakeUser) => fakeUser.id === userId);
-    return [200, user];
-});
-const getFakeUsers = async (search, options) => {
-    const response = await axiosInstance.get('api/users', {
-        ...options,
-        params: { ...options?.params, name_like: search },
-    });
-    return response.data;
-};
-exports.getFakeUsers = getFakeUsers;