@astral/ui 4.92.3 → 4.94.0

package/node/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/node/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/node/components/AsyncAutocomplete/useLogic/useLogic.js

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

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;

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

@@ -6,15 +6,12 @@ const FormControlLabel_1 = require("../../../FormControlLabel");
 const styles_1 = require("./styles");
 const useLogic_1 = require("./useLogic");
 const TreeItem = (props) => {
-    const { isSelected, isIndeterminate, isDefaultExpanded, disabledReason, isDisabled, handleChange, } = (0, useLogic_1.useLogic)(props);
+    const { isSelected, isIndeterminate, isDefaultExpanded, disabledReason, isDisabled, handleChange, itemLabel, handleClick, } = (0, useLogic_1.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 ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.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: (0, jsx_runtime_1.jsx)(styles_1.List, { children: children.map((child) => ((0, jsx_runtime_1.jsx)(exports.TreeItem, { item: child, renderItem: renderItem, level: level + 1, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
+        return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { id: id, isSelected: isSelected, isDefaultExpanded: isDefaultExpanded, isForceExpanded: options?.isForceExpanded, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate }), label: itemLabel, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), mobileHeaderLabel: itemLabel, mobileHeaderControl: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected, indeterminate: isSelected ? false : isIndeterminate, disabled: isDisabled, onChange: handleChange }), level: level, onClick: handleChange, children: (0, jsx_runtime_1.jsx)(styles_1.List, { children: children.map((child) => ((0, jsx_runtime_1.jsx)(exports.TreeItem, { item: child, renderItem: renderItem, level: level + 1, isInitialExpanded: isInitialExpanded, expandedLevel: expandedLevel, disabledItems: disabledItems, value: value, onChange: onChange, isObjectMode: isObjectMode }, child.id))) }) }));
     }
-    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected }), label: renderItem ? renderItem({ label, note, id }) : label, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange }));
+    return ((0, jsx_runtime_1.jsx)(styles_1.StyledTreeItem, { id: id, isSelected: isSelected, isDisabled: isDisabled, disabledReason: disabledReason, note: renderItem ? null : note, component: "li", label: (0, jsx_runtime_1.jsx)(FormControlLabel_1.FormControlLabel, { control: (0, jsx_runtime_1.jsx)(styles_1.StyledCheckbox, { checked: isSelected }), label: itemLabel, disabled: isDisabled, onChange: handleChange, onClick: handleClick }), level: level, onClick: handleChange }));
 };
 exports.TreeItem = TreeItem;

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

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

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

@@ -13,9 +13,15 @@ exports.StyledCheckbox = (0, styled_1.styled)(Checkbox_1.Checkbox) `
   & > .${Checkbox_1.checkboxClassnames.input}, .${Checkbox_1.checkboxClassnames.iconWrapper} {
     width: 32px;
     height: 16px;
+  }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    height: 20px;
+    width: ${Checkbox_1.MOBILE_CHECKBOX_SIZE};
 
-    ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${Checkbox_1.checkboxClassnames.iconWrapper}, & .${Checkbox_1.checkboxClassnames.input} {
       height: 20px;
+      width: ${Checkbox_1.MOBILE_CHECKBOX_SIZE};
     }
   }
 `;
@@ -30,6 +36,17 @@ exports.StyledTreeItem = (0, styled_1.styled)(TreeItem_1.TreeItem) `
     /* Добавляем к отступу ширину контейнера с чекбоксом */
     margin-left: ${Checkbox_1.CHECKBOX_SIZE};
   }
+
+  ${({ theme }) => theme.breakpoints.down('sm')} {
+    & .${FormControlLabel_1.formControlLabelClasses.root} {
+      margin-left: 0;
+      gap: ${({ theme }) => theme.spacing(1)};
+    }
+
+    & .${TreeItem_1.treeClassnames.note} {
+      margin-left: ${({ theme }) => `calc(${theme.spacing(1)} + ${Checkbox_1.MOBILE_CHECKBOX_SIZE})`};
+    }
+  }
 `;
 exports.List = styled_1.styled.ul `
   ${mixins_1.listContainer};

package/node/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/node/components/Tree/MultipleTreeList/TreeItem/useLogic/useLogic.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useLogic = void 0;
 const react_1 = require("react");
 const utils_1 = require("./utils");
-const useLogic = ({ item, value = [], level, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }) => {
-    const { id, children } = item;
+const useLogic = ({ item, value = [], level, renderItem, isInitialExpanded, expandedLevel, disabledItems, onChange, isObjectMode, }) => {
+    const { id, children, label, note } = item;
     const childrenIds = (0, react_1.useMemo)(() => (0, utils_1.getAllChildrenId)(children, disabledItems), [children, disabledItems]);
     const isSelected = (0, utils_1.checkIsSelected)(value, id);
     const isIndeterminate = (0, utils_1.checkIsIndeterminate)(value, childrenIds);
@@ -43,6 +43,10 @@ const useLogic = ({ item, value = [], level, isInitialExpanded, expandedLevel, d
         const newValue = value ? [...value, ...itemsToAdd] : itemsToAdd;
         onChange(newValue);
     };
+    const itemLabel = renderItem ? renderItem({ label, note, id }) : label;
+    const handleClick = (event) => {
+        event.stopPropagation();
+    };
     return {
         isSelected,
         isIndeterminate,
@@ -50,6 +54,8 @@ const useLogic = ({ item, value = [], level, isInitialExpanded, expandedLevel, d
         isDisabled,
         disabledReason,
         handleChange,
+        itemLabel,
+        handleClick,
     };
 };
 exports.useLogic = useLogic;

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

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

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

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

package/node/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/node/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanel.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSlidePanel = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const MobileSlidePanelContent_1 = require("./MobileSlidePanelContent");
+const MobileSlidePanelContext_1 = require("./MobileSlidePanelContext");
+const useLogic_1 = require("./useLogic");
+const MobileSlidePanel = ({ onClose, ...restProps }) => {
+    const { parentContext, register, closeTop, setHeader, removeHeader, activeHeader, } = (0, useLogic_1.useLogic)();
+    if (parentContext) {
+        return (0, jsx_runtime_1.jsx)(MobileSlidePanelContent_1.MobileSlidePanelContent, { onClose: onClose, ...restProps });
+    }
+    return ((0, jsx_runtime_1.jsx)(MobileSlidePanelContext_1.MobileSlidePanelContextProvider, { register: register, closeTop: closeTop, setHeader: setHeader, removeHeader: removeHeader, children: (0, jsx_runtime_1.jsx)(MobileSlidePanelContent_1.MobileSlidePanelContent, { onClose: onClose, ...restProps, isRoot: true, activeHeader: activeHeader }) }));
+};
+exports.MobileSlidePanel = MobileSlidePanel;

package/node/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/node/components/Tree/TreeItem/MobileSlidePanel/MobileSlidePanelContent/MobileSlidePanelContent.js

@@ -0,0 +1,54 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MobileSlidePanelContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ChevronLOutlineMd_1 = require("../../../../../icons/ChevronLOutlineMd");
+const cva_1 = require("../../../../utils/cva");
+const constants_1 = require("../../constants");
+const constants_2 = require("../constants");
+const styles_1 = require("./styles");
+const useLogic_1 = require("./useLogic");
+const mobilePanelCva = (0, cva_1.cva)(constants_2.mobileSlidePanelClassnames.root, {
+    variants: {
+        hasParentContext: {
+            true: constants_2.mobileSlidePanelClassnames.nested,
+        },
+    },
+});
+const headerCva = (0, cva_1.cva)(constants_2.mobileSlidePanelClassnames.header, {
+    variants: {
+        isSelected: {
+            true: constants_1.treeClassnames.selected,
+        },
+        isDisabled: {
+            true: constants_1.treeClassnames.disabled,
+        },
+    },
+});
+const parentContentCva = (0, cva_1.cva)(constants_2.mobileSlidePanelClassnames.headerParent, {
+    variants: {
+        isDisabled: {
+            true: constants_1.treeClassnames.disabled,
+        },
+    },
+});
+const slidePanelCva = (0, cva_1.cva)(constants_2.mobileSlidePanelClassnames.slidePanel, {
+    variants: {
+        isOpen: {
+            true: constants_1.treeClassnames.open,
+        },
+    },
+});
+const MobileSlidePanelContent = ({ isRoot = false, children, isOpen, ...params }) => {
+    const { isMobileMounted, closeTop, parentLabel, parentNote, parentControl, parentAdditionalContent, isParentSelected, isParentDisabled, handleParentClick, } = (0, useLogic_1.useLogic)({ isOpen, ...params });
+    if (!isMobileMounted) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(styles_1.MobilePanel, { className: mobilePanelCva({ hasParentContext: !isRoot }), children: (0, jsx_runtime_1.jsxs)(styles_1.MobilePanelSlide, { className: slidePanelCva({ isOpen }), children: [isRoot && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(styles_1.Header, { className: headerCva({
+                                isSelected: isParentSelected,
+                                isDisabled: isParentDisabled,
+                            }), children: [(0, jsx_runtime_1.jsx)(styles_1.BackButton, { className: constants_2.mobileSlidePanelClassnames.backButton, variant: "text", "aria-label": "\u041D\u0430\u0437\u0430\u0434", onClick: closeTop, children: (0, jsx_runtime_1.jsx)(ChevronLOutlineMd_1.ChevronLOutlineMd, {}) }), (0, jsx_runtime_1.jsxs)(styles_1.ParentContent, { className: parentContentCva({
+                                        isDisabled: isParentDisabled,
+                                    }), onClick: handleParentClick, children: [(0, jsx_runtime_1.jsx)(styles_1.ParentLabel, { component: "div", children: parentLabel }), parentNote && ((0, jsx_runtime_1.jsx)(styles_1.ParentNote, { variant: "caption", color: "textSecondary", children: parentNote }))] }), parentControl && ((0, jsx_runtime_1.jsx)(styles_1.HeaderControl, { className: constants_2.mobileSlidePanelClassnames.headerControl, children: parentControl }))] }), parentAdditionalContent && ((0, jsx_runtime_1.jsx)(styles_1.HeaderAdditionalContent, { className: constants_2.mobileSlidePanelClassnames.headerAdditionalContent, children: parentAdditionalContent }))] })), (0, jsx_runtime_1.jsx)(styles_1.MobilePanelContentWrapper, { children: (0, jsx_runtime_1.jsx)(styles_1.MobilePanelScrollArea, { children: children }) })] }) }));
+};
+exports.MobileSlidePanelContent = MobileSlidePanelContent;

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

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

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

@@ -0,0 +1,17 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __exportStar = (this && this.__exportStar) || function(m, exports) {
+    for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+__exportStar(require("./MobileSlidePanelContent"), exports);