@astral/ui 4.92.3 → 4.93.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/node/components/BottomDrawer/index.d.ts

@@ -1,2 +1,2 @@
 export * from './BottomDrawer';
-export { bottomDrawerClassnames } from './constants';
+export { bottomDrawerClassnames, OFFSET_TOP_SCREEN, DEFAULT_HEADER_HEIGHT, } from './constants';

package/node/components/BottomDrawer/index.js

@@ -14,7 +14,9 @@ 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 });
-exports.bottomDrawerClassnames = void 0;
+exports.DEFAULT_HEADER_HEIGHT = exports.OFFSET_TOP_SCREEN = exports.bottomDrawerClassnames = void 0;
 __exportStar(require("./BottomDrawer"), exports);
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "bottomDrawerClassnames", { enumerable: true, get: function () { return constants_1.bottomDrawerClassnames; } });
+Object.defineProperty(exports, "OFFSET_TOP_SCREEN", { enumerable: true, get: function () { return constants_1.OFFSET_TOP_SCREEN; } });
+Object.defineProperty(exports, "DEFAULT_HEADER_HEIGHT", { enumerable: true, get: function () { return constants_1.DEFAULT_HEADER_HEIGHT; } });

package/node/components/ClickAwayListener/ClickAwayListener.d.ts

@@ -7,4 +7,4 @@ export type ClickAwayListenerProps = Omit<UseClickAwayListenerOptions, 'ref' | '
 /**
  * компонент предоставляющий обертку для работы с хуком useClickAwayEffect
  */
-export declare const ClickAwayListener: ({ onClickAway, preventBubbling, isActive, children, }: ClickAwayListenerProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;
+export declare const ClickAwayListener: ({ onClickAway, preventBubbling, isActive, excludeNodes, children, }: ClickAwayListenerProps) => ReactElement<any, string | import("react").JSXElementConstructor<any>>;

package/node/components/ClickAwayListener/ClickAwayListener.js

@@ -6,9 +6,15 @@ const useClickAwayEffect_1 = require("../useClickAwayEffect");
 /**
  * компонент предоставляющий обертку для работы с хуком useClickAwayEffect
  */
-const ClickAwayListener = ({ onClickAway, preventBubbling, isActive = true, children, }) => {
+const ClickAwayListener = ({ onClickAway, preventBubbling, isActive = true, excludeNodes, children, }) => {
     const ref = (0, react_1.useRef)(null);
-    (0, useClickAwayEffect_1.useClickAwayEffect)({ ref, onClickAway, preventBubbling, isActive });
+    (0, useClickAwayEffect_1.useClickAwayEffect)({
+        ref,
+        onClickAway,
+        preventBubbling,
+        isActive,
+        excludeNodes,
+    });
     // biome-ignore lint/suspicious/noExplicitAny: ReactElement имеет generic unknown по умолчанию и не содержит ref внутри
     const child = children;
     return react_1.Children.only((0, react_1.cloneElement)(child, { ref }));

package/node/components/Radio/Radio.js

@@ -11,5 +11,5 @@ const useLogic_1 = require("./useLogic");
 exports.Radio = (0, react_1.forwardRef)((props, ref) => {
     (0, useCheckControlled_1.useCheckControlled)('Radio', props);
     const { onChange, isChecked, isError, disabled, restProps, className, name, style, inputRef, value, id, } = (0, useLogic_1.useLogic)(props);
-    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, className: className, style: style, ref: ref, ...restProps, children: [(0, jsx_runtime_1.jsx)(styles_1.Input, { type: "radio", name: name, checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": isChecked, "aria-disabled": disabled, ref: inputRef, value: value, id: id }), (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.radioClassnames.iconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: constants_1.radioClassnames.icon }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(styles_1.Wrapper, { "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, className: className, style: style, ref: ref, ...restProps, children: [(0, jsx_runtime_1.jsx)(styles_1.Input, { type: "radio", className: constants_1.radioClassnames.input, name: name, checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": isChecked, "aria-disabled": disabled, ref: inputRef, value: value, id: id }), (0, jsx_runtime_1.jsx)(styles_1.IconWrapper, { className: constants_1.radioClassnames.iconWrapper, children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { className: constants_1.radioClassnames.icon }) })] }));
 });

package/node/components/Radio/constants.d.ts

@@ -1,5 +1,6 @@
 export declare const radioClassnames: {
     readonly root: string;
+    readonly input: string;
     readonly checked: string;
     readonly disabled: string;
     readonly iconWrapper: string;
@@ -7,3 +8,5 @@ export declare const radioClassnames: {
     readonly outerCircle: string;
     readonly dot: string;
 };
+export declare const RADIO_SIZE = "32px";
+export declare const MOBILE_RADIO_SIZE = "40px";

package/node/components/Radio/constants.js

@@ -1,9 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.radioClassnames = void 0;
+exports.MOBILE_RADIO_SIZE = exports.RADIO_SIZE = exports.radioClassnames = void 0;
 const createUIKitClassname_1 = require("../utils/createUIKitClassname");
 exports.radioClassnames = {
     root: (0, createUIKitClassname_1.createUIKitClassname)('radio'),
+    input: (0, createUIKitClassname_1.createUIKitClassname)('radio__input'),
     checked: (0, createUIKitClassname_1.createUIKitClassname)('radio_checked'),
     disabled: (0, createUIKitClassname_1.createUIKitClassname)('radio_disabled'),
     iconWrapper: (0, createUIKitClassname_1.createUIKitClassname)('radio__icon-wrapper'),
@@ -11,3 +12,5 @@ exports.radioClassnames = {
     outerCircle: (0, createUIKitClassname_1.createUIKitClassname)('radio__outer-circle'),
     dot: (0, createUIKitClassname_1.createUIKitClassname)('radio__dot'),
 };
+exports.RADIO_SIZE = '32px';
+exports.MOBILE_RADIO_SIZE = '40px';

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

@@ -1,3 +1,3 @@
 export { Radio } from './Radio';
-export { radioClassnames } from './constants';
+export { radioClassnames, RADIO_SIZE, MOBILE_RADIO_SIZE } from './constants';
 export type { RadioProps } from './types';

package/node/components/Radio/index.js

@@ -1,7 +1,9 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.radioClassnames = exports.Radio = void 0;
+exports.MOBILE_RADIO_SIZE = exports.RADIO_SIZE = exports.radioClassnames = exports.Radio = void 0;
 var Radio_1 = require("./Radio");
 Object.defineProperty(exports, "Radio", { enumerable: true, get: function () { return Radio_1.Radio; } });
 var constants_1 = require("./constants");
 Object.defineProperty(exports, "radioClassnames", { enumerable: true, get: function () { return constants_1.radioClassnames; } });
+Object.defineProperty(exports, "RADIO_SIZE", { enumerable: true, get: function () { return constants_1.RADIO_SIZE; } });
+Object.defineProperty(exports, "MOBILE_RADIO_SIZE", { enumerable: true, get: function () { return constants_1.MOBILE_RADIO_SIZE; } });

package/node/components/Radio/styles.js

@@ -85,15 +85,15 @@ exports.Input = styled_1.styled.input `
   
   position: absolute;
 
-  width: 32px;
-  height: 32px;
+  width: ${constants_1.RADIO_SIZE};
+  height: ${constants_1.RADIO_SIZE};
   margin: 0;
 
   opacity: 0;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 40px;
-    height: 40px;
+    width: ${constants_1.MOBILE_RADIO_SIZE};
+    height: ${constants_1.MOBILE_RADIO_SIZE};
   }
 
   &:focus-visible {
@@ -109,12 +109,12 @@ exports.IconWrapper = styled_1.styled.span `
   align-items: center;
   justify-content: center;
 
-  width: 32px;
-  height: 32px;
+  width: ${constants_1.RADIO_SIZE};
+  height: ${constants_1.RADIO_SIZE};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 40px;
-    height: 40px;
+    width: ${constants_1.MOBILE_RADIO_SIZE};
+    height: ${constants_1.MOBILE_RADIO_SIZE};
 
     .${constants_1.radioClassnames.icon} {
       width: 20px;

package/node/components/Tree/MultipleTreeList/MultipleTreeList.js

@@ -8,6 +8,6 @@ const useLogic_1 = require("./useLogic");
 const INITIAL_LEVEL = 0;
 const MultipleTreeList = ({ data, value, className, expandedLevel = 10, disabledItems, ...props }) => {
     const { formattedDisabledItems } = (0, useLogic_1.useLogic)({ disabledItems });
-    return ((0, jsx_runtime_1.jsx)(styles_1.List, { className: className, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, value: value, level: INITIAL_LEVEL, expandedLevel: expandedLevel, disabledItems: formattedDisabledItems, ...props }, item.id))) }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.ListWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.List, { className: className, children: data.map((item) => ((0, jsx_runtime_1.jsx)(TreeItem_1.TreeItem, { item: item, value: value, level: INITIAL_LEVEL, expandedLevel: expandedLevel, disabledItems: formattedDisabledItems, ...props }, item.id))) }) }));
 };
 exports.MultipleTreeList = MultipleTreeList;