@astral/ui 4.92.3 → 4.94.0

package/components/TreeLikeAutocomplete/OptionsModal/styles.d.ts

@@ -9,4 +9,31 @@ export declare const TreeListWrapper: import("../../styled").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 SearchFieldWrapper: import("../../styled").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 StyledPaper: import("../../styled").StyledComponent<Omit<import("../../Paper").PaperProps, "ref"> & import("react").RefAttributes<HTMLDivElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const CancelButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ResetButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
 export {};

package/components/TreeLikeAutocomplete/OptionsModal/styles.js

@@ -1,5 +1,9 @@
+import { paperClasses } from '@mui/material/Paper';
+import { DEFAULT_HEADER_HEIGHT, OFFSET_TOP_SCREEN } from '../../BottomDrawer';
+import { Button } from '../../Button';
 import { DIALOG_SIZES } from '../../Dialog';
 import { DialogContent } from '../../DialogContent';
+import { Paper } from '../../Paper';
 import { styled } from '../../styled';
 export const StyledDialogContent = styled(DialogContent, {
     shouldForwardProp: (prop) => !['$size'].includes(prop),
@@ -11,9 +15,20 @@ export const StyledDialogContent = styled(DialogContent, {
 
   width: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
   height: ${({ $size }) => DIALOG_SIZES[$size].minWidth};
-  
+
   ${({ theme }) => theme.breakpoints.down('sm')} {
     width: auto;
+    padding: 0;
+    gap: ${({ theme }) => theme.spacing(3)};
+
+    height: calc(100vh - ${OFFSET_TOP_SCREEN} - ${DEFAULT_HEADER_HEIGHT}px - 72px);
+
+    /* Причина игнора: Прогрессивное улучшение */
+    /* stylelint-disable plugin/no-unsupported-browser-features */
+    @supports (height: 100dvh) {
+      height: calc(100dvh - ${OFFSET_TOP_SCREEN} - ${DEFAULT_HEADER_HEIGHT}px - 72px);
+    }
+    /* stylelint-enable plugin/no-unsupported-browser-features */
   }
 `;
 export const TreeListWrapper = styled.div `
@@ -21,3 +36,31 @@ export const TreeListWrapper = styled.div `
 
   height: 100%;
 `;
+export const SearchFieldWrapper = styled.div `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 4, 0)};
+  }
+`;
+export const StyledPaper = styled(Paper) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    &.${paperClasses.root} {
+      border-top-left-radius: 0;
+      border-top-right-radius: 0;
+    }
+
+    border: unset;
+  }
+`;
+export const CancelButton = styled(Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: none;
+  }
+`;
+export const ResetButton = styled(Button) `
+  display: none;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    display: flex;
+    margin-left: auto;
+  }
+`;

package/components/TreeLikeAutocomplete/OptionsModal/useLogic/useLogic.d.ts

@@ -13,6 +13,7 @@ type UseLogicResult = {
     treeLikeListProps: TreeLikeListProps;
     cancelButtonProps: ButtonProps;
     confirmButtonProps: ButtonProps;
+    resetButtonProps: ButtonProps;
 };
 export declare const useLogic: ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size, }: UseLogicParams) => UseLogicResult;
 export {};

package/components/TreeLikeAutocomplete/OptionsModal/useLogic/useLogic.js

@@ -1,5 +1,6 @@
 import { useEffect, useMemo, useState, } from 'react';
 import { deepMap } from '../../../utils/array';
+import { checkIsDeepEqual } from '../../../utils/checkIsDeepEqual';
 import { findInTree } from './utils';
 export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, options, filterOptions, onChange, onClose, size = 'md', }) => {
     const [value, setValue] = useState(initialValue);
@@ -41,8 +42,16 @@ export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, opti
         onChange?.(value);
         onClose?.(event, 'escapeKeyDown');
     };
+    const handleReset = () => {
+        const isSameAsInitial = checkIsDeepEqual([...(value ?? [])].sort(), [...(initialValue ?? [])].sort());
+        if (!isSameAsInitial) {
+            setValue(initialValue);
+            return;
+        }
+        setValue(undefined);
+    };
     const isNoResult = Boolean(searchValue) && !filteredOptions.length;
-    const isDisabledButton = !value || !value.length || isNoResult;
+    const isDisabledButton = isNoResult || (!value?.length && !initialValue?.length);
     return {
         isNoResult,
         modalProps: {
@@ -66,5 +75,9 @@ export const useLogic = ({ isOpen, isLoading, isLoadingError, initialValue, opti
             disabled: isDisabledButton,
             onClick: handleClick,
         },
+        resetButtonProps: {
+            disabled: !value?.length,
+            onClick: handleReset,
+        },
     };
 };

package/components/TreeLikeList/TreeItem/TreeItem.js

@@ -1,14 +1,21 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button } from '../../Button';
+import { ClickAwayListener } from '../../ClickAwayListener';
 import { FormControlLabel } from '../../FormControlLabel';
-import { List, PopoverContent, StyledCheckbox, StyledTooltip, StyledTreeItem, } from './styles';
+import { ConfirmChildrenButton, ConfirmChildrenCollapse, List, PopoverContent, StyledCheckbox, StyledTooltip, StyledTreeItem, } from './styles';
 import { useLogic } from './useLogic';
 export const TreeItem = (props) => {
-    const { isSelected, isDefaultExpanded, disabledReason, isDisabled, nextLevel, formControlLabelProps, tooltipProps, confirmChildrenButtonProps, handleChange, } = useLogic(props);
+    const { isSelected, isDefaultExpanded, disabledReason, isDisabled, nextLevel, formControlLabelProps, confirmChildrenProps, confirmChildrenButtonProps, handleChange, handleMobileOpenChange, isMobile, isMobilePanelOpen, isConfirmChildrenAvailable, itemRef, confirmChildrenExcludeNodes, } = useLogic(props);
     const { item, prefixId, level, renderItem, value, isConfirmChildrenSelection, isInitialExpanded, expandedLevel, chainsToSelectedItem, disabledItems, onChange, isObjectMode, } = props;
     const { id, label, note, children = [], options } = item;
+    const itemLabel = renderItem ? renderItem({ label, note, id }) : label;
+    const confirmChildrenButtonLabel = !isSelected
+        ? 'Исключить дочерние'
+        : 'Выбрать дочерние';
+    const renderConfirmChildrenCollapse = () => (_jsx(ConfirmChildrenCollapse, { in: confirmChildrenProps.open, unmountOnExit: true, children: _jsx(ConfirmChildrenButton, { variant: "light", ...confirmChildrenButtonProps, children: confirmChildrenButtonLabel }) }));
     if (children.length) {
-        return (_jsx(StyledTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, disabledReason: disabledReason, isDisabled: isDisabled, note: renderItem ? null : note, isNotBlockingExpandList: true, component: "li", label: _jsx(FormControlLabel, { control: _jsx(StyledTooltip, { arrow: false, placement: "right", leaveDelay: 250, title: _jsx(PopoverContent, { children: _jsx(Button, { variant: "light", ...confirmChildrenButtonProps, children: !isSelected ? 'Исключить дочерние' : 'Выбрать дочерние' }) }), ...tooltipProps, children: _jsx(StyledCheckbox, { checked: isSelected }) }), label: renderItem ? renderItem({ label, note, id }) : label, ...formControlLabelProps }), level: level, onClick: handleChange, children: _jsx(List, { children: children.map((child) => (_jsx(TreeItem, { isObjectMode: isObjectMode, prefixId: prefixId, item: child, renderItem: renderItem, level: nextLevel, isConfirmChildrenSelection: isConfirmChildrenSelection, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, chainsToSelectedItem: chainsToSelectedItem, disabledItems: disabledItems, value: value, onChange: onChange }, child.id))) }) }));
+        const checkbox = _jsx(StyledCheckbox, { checked: isSelected });
+        return (_jsxs(_Fragment, { children: [_jsx(StyledTreeItem, { ref: itemRef, id: id, prefixId: prefixId, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, disabledReason: disabledReason, isDisabled: isDisabled, note: renderItem ? null : note, isNotBlockingExpandList: true, component: "li", label: _jsx(FormControlLabel, { control: isMobile ? (checkbox) : (_jsx(StyledTooltip, { arrow: false, placement: "right", leaveDelay: 250, title: _jsx(PopoverContent, { children: _jsx(Button, { variant: "light", ...confirmChildrenButtonProps, children: confirmChildrenButtonLabel }) }), ...confirmChildrenProps, children: checkbox })), label: itemLabel, ...formControlLabelProps }), mobileHeaderLabel: itemLabel, mobileHeaderControl: _jsx(StyledCheckbox, { checked: isSelected, disabled: isDisabled, onChange: handleChange }), mobileHeaderAdditionalContent: isConfirmChildrenAvailable && isMobilePanelOpen ? (_jsx(ClickAwayListener, { isActive: confirmChildrenProps.open, onClickAway: confirmChildrenProps.onClose, children: renderConfirmChildrenCollapse() })) : undefined, level: level, onClick: handleChange, onMobilePanelOpenChange: handleMobileOpenChange, children: _jsx(List, { children: children.map((child) => (_jsx(TreeItem, { isObjectMode: isObjectMode, prefixId: prefixId, item: child, renderItem: renderItem, level: nextLevel, isConfirmChildrenSelection: isConfirmChildrenSelection, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, chainsToSelectedItem: chainsToSelectedItem, disabledItems: disabledItems, value: value, onChange: onChange }, child.id))) }) }), isConfirmChildrenAvailable && !isMobilePanelOpen && (_jsx(ClickAwayListener, { isActive: confirmChildrenProps.open, excludeNodes: confirmChildrenExcludeNodes, onClickAway: confirmChildrenProps.onClose, children: _jsx("li", { children: renderConfirmChildrenCollapse() }) }))] }));
     }
     return (_jsx(StyledTreeItem, { id: id, prefixId: prefixId, isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: _jsx(FormControlLabel, { control: _jsx(StyledCheckbox, { checked: isSelected }), label: renderItem ? renderItem({ label, note, id }) : label, ...formControlLabelProps }), level: level, onClick: handleChange }));
 };

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

@@ -14,23 +14,7 @@ export declare const StyledCheckbox: import("../../styled").StyledComponent<impo
 } & import("react").RefAttributes<HTMLInputElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
-export declare const StyledTreeItem: import("../../styled").StyledComponent<{
-    className?: string | undefined;
-    prefixId?: string | undefined;
-    isSelected: boolean;
-    label: import("react").ReactNode;
-    note?: import("react").ReactNode;
-    renderItem?: import("../..").SyncFunctionComponent<Omit<import("../../Tree").TreeListData, "children">> | undefined;
-    children?: import("react").ReactNode;
-    component?: import("react").ElementType | undefined;
-    level: number;
-    isDisabled?: boolean | undefined;
-    disabledReason?: string | undefined;
-    isNotBlockingExpandList?: boolean | undefined;
-    isDefaultExpanded?: boolean | undefined;
-    isForceExpanded?: boolean | undefined;
-    onClick?: ((event: import("react").SyntheticEvent<Element, Event>) => void) | undefined;
-} & Omit<any, ""> & {
+export declare const StyledTreeItem: import("../../styled").StyledComponent<Omit<import("../../Tree/TreeItem").TreeItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const List: import("../../styled").StyledComponent<{
@@ -44,3 +28,16 @@ export declare const PopoverContent: import("../../styled").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 ConfirmChildrenCollapse: import("../../styled").StyledComponent<import("../../Collapse").CollapseProps & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;
+export declare const ConfirmChildrenButton: import("../../styled").StyledComponent<Omit<import("../..").WithoutEmotionSpecific<import("@mui/material").ButtonProps>, "color" | "component" | "size" | "variant" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple"> & {
+    variant?: "light" | "link" | "text" | "contained" | "outlined" | undefined;
+    loading?: boolean | undefined;
+    color?: "primary" | "success" | "warning" | "error" | "grey" | undefined;
+    component?: import("react").ElementType | undefined;
+    selected?: boolean | undefined;
+    size?: "large" | "medium" | undefined;
+} & Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, ""> & import("react").RefAttributes<HTMLButtonElement> & {
+    theme?: import("@emotion/react").Theme | undefined;
+}, {}, {}>;

package/components/TreeLikeList/TreeItem/styles.js

@@ -1,5 +1,8 @@
+import { formControlLabelClasses } from '@mui/material/FormControlLabel';
 import { tooltipClasses } from '@mui/material/Tooltip';
-import { Checkbox } from '../../Checkbox';
+import { Button } from '../../Button';
+import { Checkbox, checkboxClassnames, MOBILE_CHECKBOX_SIZE, } from '../../Checkbox';
+import { Collapse } from '../../Collapse';
 import { styled } from '../../styled';
 import { listContainer } from '../../styled/mixins';
 import { Tooltip } from '../../Tooltip';
@@ -7,6 +10,14 @@ import { TreeItem, treeClassnames } from '../../Tree';
 export const StyledCheckbox = styled(Checkbox) `
   padding-top: 0;
   padding-bottom: 0;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 20px;
+
+    & .${checkboxClassnames.iconWrapper}, & .${checkboxClassnames.input} {
+      height: 20px;
+    }
+  }
 `;
 export const StyledTreeItem = styled(TreeItem) `
   .${treeClassnames.note} {
@@ -15,6 +26,21 @@ export const StyledTreeItem = styled(TreeItem) `
     /* Добавляем к отступу ширину контейнера с чекбоксом */
     margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + 32px)`};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${formControlLabelClasses.root} {
+      margin-left: 0;
+      gap: ${({ theme }) => theme.spacing(1)};
+    }
+
+    & .${formControlLabelClasses.root} .${formControlLabelClasses.label} {
+      margin-left: 0;
+    }
+
+    & .${treeClassnames.note} {
+      margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + ${MOBILE_CHECKBOX_SIZE})`};
+    }
+  }
 `;
 export const List = styled.ul `
   ${listContainer};
@@ -29,4 +55,25 @@ export const StyledTooltip = styled(Tooltip) `
 `;
 export const PopoverContent = styled.div `
   padding: ${({ theme }) => theme.spacing(1)};
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    padding: ${({ theme }) => theme.spacing(3, 2)};
+  }
+`;
+export const ConfirmChildrenCollapse = styled(Collapse) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    border-bottom: 1px solid
+      ${({ theme }) => theme.palette.components.border.default};
+  }
+`;
+export const ConfirmChildrenButton = styled(Button) `
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    justify-content: flex-start;
+
+    width: 100%;
+    height: auto;
+    padding: ${({ theme }) => theme.spacing(3, 4)};
+
+    border-radius: 0;
+  }
 `;

package/components/TreeLikeList/TreeItem/useLogic/useLogic.d.ts

@@ -8,18 +8,24 @@ export declare const useLogic: <TValue extends MultipleValue = string[]>({ item,
     isDisabled: boolean;
     disabledReason: string | undefined;
     nextLevel: number;
+    confirmChildrenExcludeNodes: import("react").RefObject<HTMLLIElement | null>[];
+    itemRef: import("react").RefObject<HTMLLIElement | null>;
     formControlLabelProps: {
         disabled: boolean;
         onChange: () => void;
         onClick: (event: SyntheticEvent) => void;
     };
-    tooltipProps: {
+    confirmChildrenProps: {
         open: boolean;
         onClose: (...a: unknown[]) => void;
     };
     confirmChildrenButtonProps: {
-        onClick: () => void;
+        onClick: (event: SyntheticEvent) => void;
     };
     handleChange: () => void;
+    handleMobileOpenChange: (isOpen: boolean) => void;
+    isMobile: boolean;
+    isMobilePanelOpen: boolean;
+    isConfirmChildrenAvailable: boolean | undefined;
 };
 export {};

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

@@ -1,9 +1,13 @@
-import { useMemo } from 'react';
+import { useMemo, useRef, useState } from 'react';
 import { useToggle } from '../../../useToggle';
+import { useViewportType } from '../../../useViewportType';
 import { addItem, addItemsByIds, checkIsSelected, getAllChildrenId, getCurrentValueIds, removeItem, removeItemsByIds, } from './utils';
 export const useLogic = ({ item, value = [], level, isConfirmChildrenSelection, isInitialExpanded, expandedLevel, chainsToSelectedItem = [], disabledItems, onChange, isObjectMode, }) => {
     const { id, children } = item;
-    const [isTooltipOpen, openTooltip, closeTooltip] = useToggle();
+    const [isConfirmChildrenOpen, openConfirmChildren, closeConfirmChildren] = useToggle();
+    const [isMobilePanelOpen, setIsMobilePanelOpen] = useState(false);
+    const itemRef = useRef(null);
+    const { isMobile } = useViewportType();
     const childrenIds = useMemo(() => getAllChildrenId(children, disabledItems), [children, disabledItems]);
     const isSelected = checkIsSelected(value, id);
     const flatChainsToSelectedItem = useMemo(() => chainsToSelectedItem?.reduce((acc, chain) => acc.concat(chain), []), [chainsToSelectedItem]);
@@ -13,6 +17,16 @@ export const useLogic = ({ item, value = [], level, isConfirmChildrenSelection,
     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;
@@ -21,9 +35,7 @@ export const useLogic = ({ item, value = [], level, isConfirmChildrenSelection,
         // Сбрасываем значение
         if (currentValueIds.includes(id)) {
             const hasSelectedChildren = childrenIds.some((childrenId) => currentValueIds.includes(childrenId));
-            if (isConfirmChildrenSelection && hasSelectedChildren) {
-                openTooltip();
-            }
+            toggleConfirmChildren(hasSelectedChildren);
             const newValue = removeItem(value, id);
             return onChange(newValue);
         }
@@ -31,11 +43,14 @@ export const useLogic = ({ item, value = [], level, isConfirmChildrenSelection,
         const newValue = 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 = getCurrentValueIds(value);
         if (isSelected) {
             // Элемент выбран - выбираем все дочерние элементы
@@ -49,7 +64,7 @@ export const useLogic = ({ item, value = [], level, isConfirmChildrenSelection,
             const newValue = removeItemsByIds(value, idsToRemove);
             onChange(newValue);
         }
-        closeTooltip();
+        closeConfirmChildren();
     };
     /**
      * Предотвращаем всплытие события, так как клик в области чекбокса или label вызывает обработчик на уровне всего item
@@ -57,24 +72,31 @@ export const useLogic = ({ item, value = [], level, isConfirmChildrenSelection,
     const handleClick = (event) => {
         event.stopPropagation();
     };
+    const confirmChildrenExcludeNodes = 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,
     };
 };

package/components/TreeLikeList/TreeLikeList.js

@@ -1,12 +1,12 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { treeListClassnames } from '../Tree';
 import { cn } from '../utils/cn';
-import { List } from './styles';
+import { List, ListWrapper } from './styles';
 import { TreeItem } from './TreeItem';
 import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
 export const TreeLikeList = (props) => {
     const { listProps, itemProps } = useLogic(props);
     const { data, className, expandedLevel = 10, disabledItems, ...restProps } = props;
-    return (_jsx(List, { className: cn(className, treeListClassnames.list), ...listProps, children: data.map((item) => (_jsx(TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }));
+    return (_jsx(ListWrapper, { children: _jsx(List, { className: cn(className, treeListClassnames.list), ...listProps, children: data.map((item) => (_jsx(TreeItem, { item: item, level: INITIAL_LEVEL, expandedLevel: expandedLevel, ...itemProps, ...restProps }, item.id))) }) }));
 };

package/components/TreeLikeList/styles.d.ts

@@ -1,4 +1,8 @@
 /// <reference types="react" />
+export declare const ListWrapper: import("../styled").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("../styled").StyledComponent<{
     theme?: import("@emotion/react").Theme | undefined;
     as?: import("react").ElementType<any, keyof import("react").JSX.IntrinsicElements> | undefined;

package/components/TreeLikeList/styles.js

@@ -1,8 +1,33 @@
 import { styled } from '../styled';
 import { listContainer } from '../styled/mixins';
+export const ListWrapper = 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);
+  }
+`;
 export const List = styled.ul `
   ${listContainer};
   overflow: hidden;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    min-height: 0;
+
+    overflow-y: auto;
+  }
 `;
 export const InnerList = styled(List) `
   overflow: unset;

package/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/components/useAsyncOptions/faker.js

@@ -0,0 +1,3 @@
+export const makeFetchOptions = (options) => vi.fn().mockResolvedValue({ options });
+export const makeEmptyFetchOptions = () => vi.fn().mockResolvedValue({ options: [] });
+export const makeErrorFetchOptions = (error) => vi.fn().mockRejectedValue(error);

package/components/useAsyncOptions/index.d.ts

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

package/components/useAsyncOptions/index.js

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

package/components/useAsyncOptions/public.d.ts

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

package/components/useAsyncOptions/public.js

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

package/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/components/useAsyncOptions/types.js

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

package/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/components/useAsyncOptions/useAsyncOptions.js

@@ -5,12 +5,14 @@ import { useLoadingState } from '../useLoadingState';
  * Хук для асинхронной загрузки опций в компонентах с поиском.
  * Управляет задержкой, отменой запросов и состояниями загрузки.
  */
-export const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch, onDataLoadError, isSmoothLoading, }) => {
+export const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch, shouldFetch, onDataLoadError, isSmoothLoading, }) => {
     const [isLoadingData, setIsLoadingData] = useState(false);
     const [isFirstOpen, setIsFirstOpen] = useState(true);
     const [isLoadingError, setIsLoadingError] = useState(false);
     const abortControllerRef = useRef(null);
     const { isShowLoader } = useLoadingState(isLoadingData);
+    const [isAllow, setIsAllow] = useState(true);
+    const [hintText, setHintText] = useState('');
     const [options, setOptions] = useState({
         options: [],
     });
@@ -39,17 +41,32 @@ export const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch,
             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);
             }
@@ -59,7 +76,7 @@ export const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch,
     const onOpen = (defaultSearch = '', defaultValue, isAlwaysTriggerOnOpen = false) => {
         if (isFirstOpen || isAlwaysTriggerOnOpen) {
             setIsFirstOpen(false);
-            if (defaultValue || minSymbolsToFetch === 0) {
+            if (defaultValue || isAllowedSearch(defaultSearch)) {
                 setIsLoadingData(true);
                 debouncedFetchOptions(defaultSearch);
             }
@@ -78,6 +95,8 @@ export const useAsyncOptions = ({ fetchOptions, fetchDelayMs, minSymbolsToFetch,
         isLoadingData: isSmoothLoading ? isShowLoader : isLoadingData,
         onRetry,
         isLoadingError,
+        isAllow,
+        hintText,
         debouncedFetchOptions,
         onInputChange,
         onOpen,

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

@@ -9,5 +9,6 @@ export declare const AsyncAutocomplete: <TOptions, TMultiple extends boolean = f
     fetchDelayMs?: number | undefined;
     fetchOptions: (search: string, signal?: AbortSignal | undefined) => Promise<TOptions[]>;
     minSymbolsToFetch?: number | undefined;
+    shouldFetch?: import("../useAsyncOptions").ShouldFetch | undefined;
     onDataLoadError?: ((error: Error) => void) | undefined;
 } & import("react").RefAttributes<unknown>) => import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;