@astral/ui 4.92.3 → 4.94.0

package/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;

package/components/AsyncAutocomplete/types.d.ts

@@ -1,4 +1,5 @@
 import { type AutocompleteProps } from '../Autocomplete';
+import { type ShouldFetch } from '../useAsyncOptions';
 export type AsyncAutocompleteProps<TOptions, TMultiple extends boolean = false, TDisableClearable extends boolean = false, TFreeSolo extends boolean = false> = Omit<AutocompleteProps<TOptions, TMultiple, TDisableClearable, TFreeSolo>, 'inputValue' | 'loading' | 'disabled' | 'fullWidth' | 'error' | 'required' | 'success' | 'options' | 'filterOptions'> & {
     /**
      * Если `true`, будет показан индикатор загрузки
@@ -59,6 +60,10 @@ export type AsyncAutocompleteProps<TOptions, TMultiple extends boolean = false,
      * @default 0
      */
     minSymbolsToFetch?: number;
+    /**
+     * Функция, задающая правила валидации запроса
+     */
+    shouldFetch?: ShouldFetch;
     /**
      * Функция для обработки ошибок загрузки данных
      */

package/components/AsyncAutocomplete/useLogic/useLogic.d.ts

@@ -2,7 +2,7 @@ import type { AutocompleteInputChangeReason } from '@mui/material/Autocomplete';
 import { type SyntheticEvent } from 'react';
 import { type AsyncAutocompleteProps } from '../types';
 type UseLogicParams<TOptions, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean> = AsyncAutocompleteProps<TOptions, TMultiple, TDisableClearable, TFreeSolo>;
-export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ fetchOptions, fetchDelayMs, minSymbolsToFetch, defaultValue, getOptionLabel, noOptionsText, onOpen, onInputChange, onDataLoadError, isLoadedDataError, isDisabled, isFullWidth, isSuccess, isError, isLoading, isRequired, ...restProps }: UseLogicParams<TOptions, TMultiple, TDisableClearable, TFreeSolo>) => {
+export declare const useLogic: <TOptions, TMultiple extends boolean, TDisableClearable extends boolean, TFreeSolo extends boolean>({ fetchOptions, fetchDelayMs, minSymbolsToFetch, shouldFetch, defaultValue, getOptionLabel, noOptionsText, onOpen, onInputChange, onDataLoadError, isLoadedDataError, isDisabled, isFullWidth, isSuccess, isError, isLoading, isRequired, ...restProps }: UseLogicParams<TOptions, TMultiple, TDisableClearable, TFreeSolo>) => {
     autocompleteProps: {
         classes?: Partial<import("@mui/material/Autocomplete").AutocompleteClasses> | undefined;
         defaultChecked?: boolean | undefined;

package/components/AsyncAutocomplete/useLogic/useLogic.js

@@ -3,11 +3,12 @@ import { DEFAULT_DELAY_MS, DEFAULT_EMPTY_OPTIONS_TEXT, DEFAULT_MIN_SEARCH_CHARAC
 /* Стандартный фильтр. Необходим для правильного отображения опций, при асинхронном поиске
  * см. https://track.astral.ru/soft/browse/UIKIT-2823 */
 const filterOptions = (options) => options;
-export const useLogic = ({ fetchOptions, fetchDelayMs = DEFAULT_DELAY_MS, minSymbolsToFetch = DEFAULT_MIN_SEARCH_CHARACTERS, defaultValue, getOptionLabel, noOptionsText = DEFAULT_NO_OPTIONS_TEXT, onOpen, onInputChange, onDataLoadError, isLoadedDataError, isDisabled, isFullWidth, isSuccess, isError, isLoading, isRequired, ...restProps }) => {
-    const { options, onInputChange: propsOnInputChange, onOpen: propsOnOpen, isLoadingData, isLoadingError, } = useAsyncOptions({
+export const useLogic = ({ fetchOptions, fetchDelayMs = DEFAULT_DELAY_MS, minSymbolsToFetch = DEFAULT_MIN_SEARCH_CHARACTERS, shouldFetch, defaultValue, getOptionLabel, noOptionsText = DEFAULT_NO_OPTIONS_TEXT, onOpen, onInputChange, onDataLoadError, isLoadedDataError, isDisabled, isFullWidth, isSuccess, isError, isLoading, isRequired, ...restProps }) => {
+    const { options, onInputChange: propsOnInputChange, onOpen: propsOnOpen, isLoadingData, isLoadingError, isAllow, hintText, } = useAsyncOptions({
         fetchOptions,
         fetchDelayMs,
         minSymbolsToFetch,
+        shouldFetch,
         onDataLoadError,
     });
     const handleInputChange = (event, search, reason) => {
@@ -21,7 +22,15 @@ export const useLogic = ({ fetchOptions, fetchDelayMs = DEFAULT_DELAY_MS, minSym
         propsOnOpen(defaultSearch, defaultValue);
         onOpen?.(event);
     };
-    const emptyOptionsText = options.length === 0 ? noOptionsText : DEFAULT_EMPTY_OPTIONS_TEXT;
+    const getEmptyOptionsText = () => {
+        if (isAllow) {
+            return noOptionsText;
+        }
+        if (hintText !== '') {
+            return hintText;
+        }
+        return DEFAULT_EMPTY_OPTIONS_TEXT;
+    };
     return {
         autocompleteProps: {
             options,
@@ -32,7 +41,7 @@ export const useLogic = ({ fetchOptions, fetchDelayMs = DEFAULT_DELAY_MS, minSym
             required: isRequired,
             success: isSuccess,
             onOpen: handleOpen,
-            noOptionsText: emptyOptionsText,
+            noOptionsText: getEmptyOptionsText(),
             onInputChange: handleInputChange,
             isLoadedDataError: isLoadedDataError ?? isLoadingError,
             getOptionLabel,

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

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

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

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

package/components/Radio/Radio.js

@@ -8,5 +8,5 @@ import { useLogic } from './useLogic';
 export const Radio = forwardRef((props, ref) => {
     useCheckControlled('Radio', props);
     const { onChange, isChecked, isError, disabled, restProps, className, name, style, inputRef, value, id, } = useLogic(props);
-    return (_jsxs(Wrapper, { "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, className: className, style: style, ref: ref, ...restProps, children: [_jsx(Input, { type: "radio", name: name, checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": isChecked, "aria-disabled": disabled, ref: inputRef, value: value, id: id }), _jsx(IconWrapper, { className: radioClassnames.iconWrapper, children: _jsx(Icon, { className: radioClassnames.icon }) })] }));
+    return (_jsxs(Wrapper, { "$isDisabled": disabled, "$isError": isError, "$isChecked": isChecked, className: className, style: style, ref: ref, ...restProps, children: [_jsx(Input, { type: "radio", className: radioClassnames.input, name: name, checked: isChecked, disabled: disabled, onChange: onChange, "aria-checked": isChecked, "aria-disabled": disabled, ref: inputRef, value: value, id: id }), _jsx(IconWrapper, { className: radioClassnames.iconWrapper, children: _jsx(Icon, { className: radioClassnames.icon }) })] }));
 });

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

@@ -1,6 +1,7 @@
 import { createUIKitClassname } from '../utils/createUIKitClassname';
 export const radioClassnames = {
     root: createUIKitClassname('radio'),
+    input: createUIKitClassname('radio__input'),
     checked: createUIKitClassname('radio_checked'),
     disabled: createUIKitClassname('radio_disabled'),
     iconWrapper: createUIKitClassname('radio__icon-wrapper'),
@@ -8,3 +9,5 @@ export const radioClassnames = {
     outerCircle: createUIKitClassname('radio__outer-circle'),
     dot: createUIKitClassname('radio__dot'),
 };
+export const RADIO_SIZE = '32px';
+export const MOBILE_RADIO_SIZE = '40px';

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

@@ -1,2 +1,2 @@
 export { Radio } from './Radio';
-export { radioClassnames } from './constants';
+export { radioClassnames, RADIO_SIZE, MOBILE_RADIO_SIZE } from './constants';

package/components/Radio/styles.js

@@ -1,6 +1,6 @@
 import { styled } from '../styled';
 import { easeOutBackTransition } from '../styled/mixins';
-import { radioClassnames } from './constants';
+import { MOBILE_RADIO_SIZE, RADIO_SIZE, radioClassnames } from './constants';
 const getOutlineColor = ({ theme, isHover, isDisabled, isError, isChecked, }) => {
     if (isDisabled) {
         return isChecked
@@ -82,15 +82,15 @@ export const Input = styled.input `
   
   position: absolute;
 
-  width: 32px;
-  height: 32px;
+  width: ${RADIO_SIZE};
+  height: ${RADIO_SIZE};
   margin: 0;
 
   opacity: 0;
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 40px;
-    height: 40px;
+    width: ${MOBILE_RADIO_SIZE};
+    height: ${MOBILE_RADIO_SIZE};
   }
 
   &:focus-visible {
@@ -106,12 +106,12 @@ export const IconWrapper = styled.span `
   align-items: center;
   justify-content: center;
 
-  width: 32px;
-  height: 32px;
+  width: ${RADIO_SIZE};
+  height: ${RADIO_SIZE};
 
   ${({ theme }) => theme.breakpoints.down('sm')} {
-    width: 40px;
-    height: 40px;
+    width: ${MOBILE_RADIO_SIZE};
+    height: ${MOBILE_RADIO_SIZE};
 
     .${radioClassnames.icon} {
       width: 20px;

package/components/Tree/MultipleTreeList/MultipleTreeList.js

@@ -1,9 +1,9 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { List } from './styles';
+import { List, ListWrapper } from './styles';
 import { TreeItem } from './TreeItem';
 import { useLogic } from './useLogic';
 const INITIAL_LEVEL = 0;
 export const MultipleTreeList = ({ data, value, className, expandedLevel = 10, disabledItems, ...props }) => {
     const { formattedDisabledItems } = useLogic({ disabledItems });
-    return (_jsx(List, { className: className, children: data.map((item) => (_jsx(TreeItem, { item: item, value: value, level: INITIAL_LEVEL, expandedLevel: expandedLevel, disabledItems: formattedDisabledItems, ...props }, item.id))) }));
+    return (_jsx(ListWrapper, { children: _jsx(List, { className: className, children: data.map((item) => (_jsx(TreeItem, { item: item, value: value, level: INITIAL_LEVEL, expandedLevel: expandedLevel, disabledItems: formattedDisabledItems, ...props }, item.id))) }) }));
 };

package/components/Tree/MultipleTreeList/TreeItem/TreeItem.js

@@ -3,14 +3,11 @@ import { FormControlLabel } from '../../../FormControlLabel';
 import { List, StyledCheckbox, StyledTreeItem } from './styles';
 import { useLogic } from './useLogic';
 export const TreeItem = (props) => {
-    const { isSelected, isIndeterminate, isDefaultExpanded, disabledReason, isDisabled, handleChange, } = useLogic(props);
+    const { isSelected, isIndeterminate, isDefaultExpanded, disabledReason, isDisabled, handleChange, itemLabel, handleClick, } = useLogic(props);
     const { level, renderItem, value, isInitialExpanded, expandedLevel, disabledItems, onChange, item, isObjectMode, } = props;
-    const { id, label, note, children = [], options } = item;
-    const handleClick = (event) => {
-        event.stopPropagation();
-    };
+    const { id, note, children = [], options } = item;
     if (children.length) {
-        return (_jsx(StyledTreeItem, { isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: _jsx(FormControlLabel, { control: _jsx(StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate }), label: renderItem ? renderItem({ label, note, id }) : label, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange, children: _jsx(List, { children: children.map((child) => (_jsx(TreeItem, { item: child, renderItem: renderItem, level: level + 1, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
+        return (_jsx(StyledTreeItem, { id: id, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: _jsx(FormControlLabel, { control: _jsx(StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate }), label: itemLabel, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), mobileHeaderLabel: itemLabel, mobileHeaderControl: _jsx(StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate, disabled: isDisabled, onChange: handleChange }), level: level, onClick: handleChange, children: _jsx(List, { children: children.map((child) => (_jsx(TreeItem, { item: child, renderItem: renderItem, level: level + 1, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
     }
-    return (_jsx(StyledTreeItem, { 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, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange }));
+    return (_jsx(StyledTreeItem, { id: id, isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: _jsx(FormControlLabel, { control: _jsx(StyledCheckbox, { checked: isSelected }), label: itemLabel, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange }));
 };

package/components/Tree/MultipleTreeList/TreeItem/styles.d.ts

@@ -14,23 +14,7 @@ export declare const StyledCheckbox: import("../../../styled").StyledComponent<i
 } & 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("../..").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("../../TreeItem").TreeItemProps, "ref"> & import("react").RefAttributes<HTMLLIElement> & {
     theme?: import("@emotion/react").Theme | undefined;
 }, {}, {}>;
 export declare const List: import("../../../styled").StyledComponent<{

package/components/Tree/MultipleTreeList/TreeItem/styles.js

@@ -1,5 +1,5 @@
 import { formControlLabelClasses } from '@mui/material/FormControlLabel';
-import { CHECKBOX_SIZE, Checkbox, checkboxClassnames } from '../../../Checkbox';
+import { CHECKBOX_SIZE, Checkbox, checkboxClassnames, MOBILE_CHECKBOX_SIZE, } from '../../../Checkbox';
 import { styled } from '../../../styled';
 import { listContainer } from '../../../styled/mixins';
 import { TreeItem, treeClassnames } from '../../TreeItem';
@@ -10,9 +10,15 @@ export const StyledCheckbox = styled(Checkbox) `
   & > .${checkboxClassnames.input}, .${checkboxClassnames.iconWrapper} {
     width: 32px;
     height: 16px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 20px;
+    width: ${MOBILE_CHECKBOX_SIZE};
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${checkboxClassnames.iconWrapper}, & .${checkboxClassnames.input} {
       height: 20px;
+      width: ${MOBILE_CHECKBOX_SIZE};
     }
   }
 `;
@@ -27,6 +33,17 @@ export const StyledTreeItem = styled(TreeItem) `
     /* Добавляем к отступу ширину контейнера с чекбоксом */
     margin-left: ${CHECKBOX_SIZE};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${formControlLabelClasses.root} {
+      margin-left: 0;
+      gap: ${({ theme }) => theme.spacing(1)};
+    }
+
+    & .${treeClassnames.note} {
+      margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + ${MOBILE_CHECKBOX_SIZE})`};
+    }
+  }
 `;
 export const List = styled.ul `
   ${listContainer};

package/components/Tree/MultipleTreeList/TreeItem/useLogic/useLogic.d.ts

@@ -1,12 +1,15 @@
+import { type SyntheticEvent } from 'react';
 import type { MultipleValue } from '../../types';
 import { type TreeItemProps } from '../types';
 type UseLogicProps<TValue extends MultipleValue = string[]> = TreeItemProps<TValue>;
-export declare const useLogic: <TValue extends MultipleValue = string[]>({ item, value, level, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }: UseLogicProps<TValue>) => {
+export declare const useLogic: <TValue extends MultipleValue = string[]>({ item, value, level, renderItem, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }: UseLogicProps<TValue>) => {
     isSelected: boolean;
     isIndeterminate: boolean;
     isDefaultExpanded: boolean | undefined;
     isDisabled: boolean;
     disabledReason: string | undefined;
     handleChange: () => void;
+    itemLabel: string | number | bigint | boolean | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+    handleClick: (event: SyntheticEvent) => void;
 };
 export {};

package/components/Tree/MultipleTreeList/TreeItem/useLogic/useLogic.js

@@ -1,7 +1,7 @@
 import { useEffect, useMemo } from 'react';
 import { checkIsIndeterminate, checkIsSelected, getAllChildrenId, getIdFromValue, getItemsToAdd, } from './utils';
-export const useLogic = ({ item, value = [], level, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }) => {
-    const { id, children } = item;
+export const useLogic = ({ item, value = [], level, renderItem, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }) => {
+    const { id, children, label, note } = item;
     const childrenIds = useMemo(() => getAllChildrenId(children, disabledItems), [children, disabledItems]);
     const isSelected = checkIsSelected(value, id);
     const isIndeterminate = checkIsIndeterminate(value, childrenIds);
@@ -40,6 +40,10 @@ export const useLogic = ({ item, value = [], level, isInitialExpanded, expandedL
         const newValue = value ? [...value, ...itemsToAdd] : itemsToAdd;
         onChange(newValue);
     };
+    const itemLabel = renderItem ? renderItem({ label, note, id }) : label;
+    const handleClick = (event) => {
+        event.stopPropagation();
+    };
     return {
         isSelected,
         isIndeterminate,
@@ -47,5 +51,7 @@ export const useLogic = ({ item, value = [], level, isInitialExpanded, expandedL
         isDisabled,
         disabledReason,
         handleChange,
+        itemLabel,
+        handleClick,
     };
 };

package/components/Tree/MultipleTreeList/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/Tree/MultipleTreeList/styles.js

@@ -1,6 +1,31 @@
 import { styled } from '../../styled';
 import { listContainer } from '../../styled/mixins';
+export const ListWrapper = styled.div `
+  display: contents;
+  
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    position: relative;
+
+    display: flex;
+    flex-direction: column;
+
+    height: 100%;
+    min-height: 0;
+
+    overflow: hidden;
+
+    transform: translateZ(0);
+  }
+`;
 export const List = styled.ul `
   ${listContainer};
+  position: relative;
   overflow: hidden;
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    flex-grow: 1;
+    min-height: 0;
+
+    overflow-y: auto;
+  }
 `;

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanel.d.ts

@@ -0,0 +1,2 @@
+import { type MobileSlidePanelProps } from './types';
+export declare const MobileSlidePanel: ({ onClose, ...restProps }: MobileSlidePanelProps) => import("react/jsx-runtime").JSX.Element;

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanel.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { MobileSlidePanelContent } from './MobileSlidePanelContent';
+import { MobileSlidePanelContextProvider } from './MobileSlidePanelContext';
+import { useLogic } from './useLogic';
+export const MobileSlidePanel = ({ onClose, ...restProps }) => {
+    const { parentContext, register, closeTop, setHeader, removeHeader, activeHeader, } = useLogic();
+    if (parentContext) {
+        return _jsx(MobileSlidePanelContent, { onClose: onClose, ...restProps });
+    }
+    return (_jsx(MobileSlidePanelContextProvider, { register: register, closeTop: closeTop, setHeader: setHeader, removeHeader: removeHeader, children: _jsx(MobileSlidePanelContent, { onClose: onClose, ...restProps, isRoot: true, activeHeader: activeHeader }) }));
+};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/MobileSlidePanelContent.d.ts

@@ -0,0 +1,2 @@
+import { type MobileSlidePanelContentProps } from './types';
+export declare const MobileSlidePanelContent: ({ isRoot, children, isOpen, ...params }: MobileSlidePanelContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/MobileSlidePanelContent.js

@@ -0,0 +1,50 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { ChevronLOutlineMd } from '../../../../../icons/ChevronLOutlineMd';
+import { cva } from '../../../../utils/cva';
+import { treeClassnames } from '../../constants';
+import { mobileSlidePanelClassnames } from '../constants';
+import { BackButton, Header, HeaderAdditionalContent, HeaderControl, MobilePanel, MobilePanelContentWrapper, MobilePanelScrollArea, MobilePanelSlide, ParentContent, ParentLabel, ParentNote, } from './styles';
+import { useLogic } from './useLogic';
+const mobilePanelCva = cva(mobileSlidePanelClassnames.root, {
+    variants: {
+        hasParentContext: {
+            true: mobileSlidePanelClassnames.nested,
+        },
+    },
+});
+const headerCva = cva(mobileSlidePanelClassnames.header, {
+    variants: {
+        isSelected: {
+            true: treeClassnames.selected,
+        },
+        isDisabled: {
+            true: treeClassnames.disabled,
+        },
+    },
+});
+const parentContentCva = cva(mobileSlidePanelClassnames.headerParent, {
+    variants: {
+        isDisabled: {
+            true: treeClassnames.disabled,
+        },
+    },
+});
+const slidePanelCva = cva(mobileSlidePanelClassnames.slidePanel, {
+    variants: {
+        isOpen: {
+            true: treeClassnames.open,
+        },
+    },
+});
+export const MobileSlidePanelContent = ({ isRoot = false, children, isOpen, ...params }) => {
+    const { isMobileMounted, closeTop, parentLabel, parentNote, parentControl, parentAdditionalContent, isParentSelected, isParentDisabled, handleParentClick, } = useLogic({ isOpen, ...params });
+    if (!isMobileMounted) {
+        return null;
+    }
+    return (_jsx(MobilePanel, { className: mobilePanelCva({ hasParentContext: !isRoot }), children: _jsxs(MobilePanelSlide, { className: slidePanelCva({ isOpen }), children: [isRoot && (_jsxs(_Fragment, { children: [_jsxs(Header, { className: headerCva({
+                                isSelected: isParentSelected,
+                                isDisabled: isParentDisabled,
+                            }), children: [_jsx(BackButton, { className: mobileSlidePanelClassnames.backButton, variant: "text", "aria-label": "\u041D\u0430\u0437\u0430\u0434", onClick: closeTop, children: _jsx(ChevronLOutlineMd, {}) }), _jsxs(ParentContent, { className: parentContentCva({
+                                        isDisabled: isParentDisabled,
+                                    }), onClick: handleParentClick, children: [_jsx(ParentLabel, { component: "div", children: parentLabel }), parentNote && (_jsx(ParentNote, { variant: "caption", color: "textSecondary", children: parentNote }))] }), parentControl && (_jsx(HeaderControl, { className: mobileSlidePanelClassnames.headerControl, children: parentControl }))] }), parentAdditionalContent && (_jsx(HeaderAdditionalContent, { className: mobileSlidePanelClassnames.headerAdditionalContent, children: parentAdditionalContent }))] })), _jsx(MobilePanelContentWrapper, { children: _jsx(MobilePanelScrollArea, { children: children }) })] }) }));
+};

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/index.d.ts

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

package/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/index.js

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