@ozen-ui/kit 0.11.0 → 0.13.0

package/__inner__/cjs/utils/isPlainObject.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.isPlainObject = void 0;
 function isPlainObject(item) {
     return (item !== null && typeof item === 'object' && item.constructor === Object);

package/__inner__/cjs/utils/isString.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.isString = void 0;
 var isString = function (data) {
     return typeof data === 'string';

package/__inner__/cjs/utils/mergeDeep/index.js

@@ -1,4 +1,4 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./mergeDeep"), exports);

package/__inner__/cjs/utils/mergeDeep/mergeDeep.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.mergeDeep = void 0;
 var tslib_1 = require("tslib");
 var isPlainObject_1 = require("../isPlainObject");

package/__inner__/cjs/utils/polymorphicComponentWithRef.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.polymorphicComponentWithRef = void 0;
 var react_1 = require("react");
 var defaultElement = 'div';

package/__inner__/cjs/utils/scrollContainerToElement.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.scrollContainerToElement = void 0;
 function scrollContainerToElement(_a) {
     var container = _a.container, element = _a.element, _b = _a.behavior, behavior = _b === void 0 ? 'smooth' : _b;
@@ -14,13 +14,13 @@ function scrollContainerToElement(_a) {
     if (elementBottom > scrollBottom) {
         container.scrollTo({
             behavior: behavior,
-            top: elementBottom - container.clientHeight
+            top: elementBottom - container.clientHeight,
         });
     }
     else if (element.offsetTop - element.offsetHeight < container.scrollTop) {
         container.scrollTo({
             behavior: behavior,
-            top: element.offsetTop - element.offsetHeight
+            top: element.offsetTop - element.offsetHeight,
         });
     }
 }

package/__inner__/cjs/utils/test-utils.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.render = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
@@ -7,7 +7,7 @@ var react_2 = require("@testing-library/react");
 var ThemeProvider_1 = require("../components/ThemeProvider");
 var WithProviders = function (_a) {
     var children = _a.children;
-    return (react_1["default"].createElement(ThemeProvider_1.ThemeProvider, { theme: ThemeProvider_1.themeOzenDefault }, children));
+    return (react_1.default.createElement(ThemeProvider_1.ThemeProvider, { theme: ThemeProvider_1.themeOzenDefault }, children));
 };
 var render = function (component, options) {
     return (0, react_2.render)(component, tslib_1.__assign({ wrapper: WithProviders }, options));
@@ -23,4 +23,4 @@ var matches = function () {
         ? container.children
         : container.firstChild;
 };
-exports["default"] = matches;
+exports.default = matches;

package/__inner__/esm/components/Accordion/Accordion.js

@@ -16,7 +16,7 @@ export var Accordion = forwardRef(function (inProps, ref) {
         value: expandedProp,
         defaultValue: defaultExpanded,
         name: 'Accordion',
-        state: 'open'
+        state: 'open',
     }), 2), expanded = _c[0], setExpanded = _c[1];
     var resolvedChildren = isFragment(childrenProp)
         ? childrenProp.props.children

package/__inner__/esm/components/Accordion/AccordionContext.js

@@ -3,7 +3,7 @@ import { DEFAULT_ACCORDION_SIZE } from './constants';
 export var AccordionContext = React.createContext({
     expanded: false,
     toggle: function () { return undefined; },
-    size: DEFAULT_ACCORDION_SIZE
+    size: DEFAULT_ACCORDION_SIZE,
 });
 export var useAccordionContext = function () { return useContext(AccordionContext); };
 // Именованный провайдер

package/__inner__/esm/components/Accordion/components/AccordionSummary/AccordionSummary.js

@@ -10,7 +10,7 @@ var iconSizeMapper = {
     s: 's',
     m: 's',
     l: 'm',
-    xl: 'm'
+    xl: 'm',
 };
 export var cnAccordionSummary = cn('AccordionSummary');
 export var AccordionSummary = forwardRef(function (inProps, ref) {
@@ -18,10 +18,10 @@ export var AccordionSummary = forwardRef(function (inProps, ref) {
     var _a = useAccordionContext(), size = _a.size, toggle = _a.toggle, expanded = _a.expanded;
     var children = props.children, _b = props.expandIconPosition, expandIconPosition = _b === void 0 ? DEFAULT_ACCORDION_EXPAND_ICON_POSITION : _b, className = props.className, onClick = props.onClick, other = __rest(props, ["children", "expandIconPosition", "className", "onClick"]);
     var Icon = useMemo(function () { return (React.createElement("div", { className: cnAccordionSummary('ExpandIconBox', {
-            expandIconPosition: expandIconPosition
+            expandIconPosition: expandIconPosition,
         }) },
         React.createElement(ChevronDownIcon, { size: iconSizeMapper[size], className: cnAccordionSummary('ExpandIcon', {
-                expanded: expanded
+                expanded: expanded,
             }) }))); }, [size, expanded]);
     var handleKeyDown = useCallback(function (e) {
         if (isKey(e, 'Enter') || isKey(e, 'Space')) {

package/__inner__/esm/components/Alert/Alert.js

@@ -20,18 +20,18 @@ var matchStatusToIcon = {
     info: React.createElement(InfoCircleFilledIcon, { size: "s" }),
     warning: React.createElement(WarningTriangleFilledIcon, { size: "s" }),
     success: React.createElement(CheckCircleFilledIcon, { size: "s" }),
-    error: React.createElement(WarningCircleFilledIcon, { size: "s" })
+    error: React.createElement(WarningCircleFilledIcon, { size: "s" }),
 };
 export var Alert = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'Alert'
+        name: 'Alert',
     });
     var _a = props.status, status = _a === void 0 ? ALERT_DEFAULT_STATUS : _a, _b = props.showIcon, showIcon = _b === void 0 ? ALERT_DEFAULT_SHOW_ICON : _b, _c = props.color, color = _c === void 0 ? ALERT_DEFAULT_COLOR : _c, children = props.children, actionProp = props.action, onClose = props.onClose, title = props.title, className = props.className, otherProps = __rest(props, ["status", "showIcon", "color", "children", "action", "onClose", "title", "className"]);
     var action = useMemo(function () {
         var actionProps = {
             size: '2xs',
-            className: cnAlert('Button')
+            className: cnAlert('Button'),
         };
         if (!actionProp) {
             return null;

package/__inner__/esm/components/Avatar/Avatar.js

@@ -40,7 +40,7 @@ var matchSizeIndicatorToAvatar = {
     s: 's',
     m: 's',
     l: 'm',
-    xl: 'm'
+    xl: 'm',
 };
 export var Avatar = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Avatar' });

package/__inner__/esm/components/Backdrop/Backdrop.js

@@ -10,7 +10,7 @@ export var cnBackdrop = cn('Backdrop');
 export var Backdrop = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Backdrop' });
     var _a = props.as, Tag = _a === void 0 ? BACKDROP_DEFAULT_TAG : _a, open = props.open, onClose = props.onClose, isInvisible = props.isInvisible, className = props.className, children = props.children, zIndex = props.zIndex, transitionProps = props.transitionProps, styleProp = props.style, other = __rest(props, ["as", "open", "onClose", "isInvisible", "className", "children", "zIndex", "transitionProps", "style"]);
-    return (React.createElement(CSSTransition, __assign({}, transitionProps, { classNames: cnBackdrop({ animation: true }), timeout: 300, "in": open, unmountOnExit: true, appear: true }),
+    return (React.createElement(CSSTransition, __assign({}, transitionProps, { classNames: cnBackdrop({ animation: true }), timeout: 300, in: open, unmountOnExit: true, appear: true }),
         React.createElement(Tag, __assign({ "aria-hidden": true, className: cnBackdrop({ isInvisible: isInvisible }, [className]), onClick: onClose, style: __assign({ '--backdrop-z-index': zIndex }, styleProp) }, other, { ref: ref }), children)));
 });
 Backdrop.displayName = 'Backdrop';

package/__inner__/esm/components/Badge/Badge.css

@@ -7,6 +7,7 @@
 }
 .Badge-Content {
   --badge-content-scale: 1;
+  z-index: var(--z-index-absolute);
   display: inline-flex;
   flex-shrink: 0;
   justify-content: center;
@@ -14,8 +15,10 @@
   transform: scale(var(--badge-content-scale))
     translate(var(--badge-content-translate));
   transform-origin: var(--badge-content-transform-origin);
-  transition: transform var(--transition-default),
-    color var(--transition-default), background-color var(--transition-default);
+  transition:
+    transform var(--transition-default),
+    color var(--transition-default),
+    background-color var(--transition-default);
 }
 .Badge-Content_horizontalOrigin_left.Badge-Content_verticalOrigin_top {
     --badge-content-translate: -50%, -50%;

package/__inner__/esm/components/Badge/Badge.js

@@ -47,7 +47,7 @@ export var Badge = polymorphicComponentWithRef(function (inProps, ref) {
                 horizontalOrigin: !!children && horizontalOrigin,
                 verticalOrigin: !!children && verticalOrigin,
                 invisible: invisible,
-                onlyBadge: !children
+                onlyBadge: !children,
             }, [contentProps === null || contentProps === void 0 ? void 0 : contentProps.className]) }), displayedContent)));
 });
 Badge.displayName = 'Badge';

package/__inner__/esm/components/Breadcrumbs/Breadcrumbs.js

@@ -16,7 +16,7 @@ export var Breadcrumbs = forwardRef(function (_a, ref) {
     // TODO: Подумать о возможности выбора рутового компонента
     React.createElement(BreadcrumbsContext.Provider, { value: { size: size } },
         React.createElement("nav", __assign({ className: cnBreadcrumbs({
-                size: size
+                size: size,
             }, [className]), "aria-label": "\u041D\u0430\u0432\u0438\u0433\u0430\u0446\u0438\u044F" }, other, { ref: ref }),
             React.createElement("ol", { className: cnBreadcrumbs('List') }, Children.toArray(resolvedChildren).map(function (child, index, arr) {
                 if (!isValidElement(child))

package/__inner__/esm/components/Breadcrumbs/BreadcrumbsContext.js

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import { BREADCRUMBS_DEFAULT_SIZE } from './constants';
 export var BreadcrumbsContext = React.createContext({
-    size: BREADCRUMBS_DEFAULT_SIZE
+    size: BREADCRUMBS_DEFAULT_SIZE,
 });
 export var useBreadcrumbsContext = function () { return useContext(BreadcrumbsContext); };
 // Именованный провайдер

package/__inner__/esm/components/Button/Button.js

@@ -26,7 +26,7 @@ export var cnButton = cn('Button');
 export var Button = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'Button'
+        name: 'Button',
     });
     var _a = props.as, Tag = _a === void 0 ? BUTTON_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? BUTTON_DEFAULT_VARIANT : _b, _c = props.color, color = _c === void 0 ? BUTTON_DEFAULT_COLOR : _c, _d = props.size, size = _d === void 0 ? BUTTON_DEFAULT_SIZE : _d, IconLeft = props.iconLeft, IconRight = props.iconRight, loading = props.loading, children = props.children, disabled = props.disabled, className = props.className, fullWidth = props.fullWidth, onClick = props.onClick, other = __rest(props, ["as", "variant", "color", "size", "iconLeft", "iconRight", "loading", "children", "disabled", "className", "fullWidth", "onClick"]);
     var iconSize = getIconSizeToFormElement(size);
@@ -41,7 +41,7 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
             IconLeft && React.createElement(IconLeft, { size: iconSize }),
             children,
             IconRight && React.createElement(IconRight, { size: iconSize })),
-        React.createElement(CSSTransition, { "in": loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
+        React.createElement(CSSTransition, { in: loading, timeout: 120, classNames: cnButton('Loader', { animation: true }), unmountOnExit: true },
             React.createElement(Loader, { size: iconSize, color: "var(--color-content-disabled)", className: cnButton('Loader') }))));
     return (React.createElement(Tag, __assign({ disabled: isInteractionPrevented, onClick: handleClick, type: "button", className: cnButton({
             variant: variant,
@@ -49,7 +49,7 @@ export var Button = polymorphicComponentWithRef(function (inProps, ref) {
             disabled: disabled,
             loading: loading,
             color: color,
-            fullWidth: fullWidth
+            fullWidth: fullWidth,
         }, [className]) }, (isInteractionPrevented && { tabIndex: -1 }), other, { ref: ref }), childContent));
 });
 Button.displayName = 'Button';

package/__inner__/esm/components/Card/Card.js

@@ -14,11 +14,11 @@ export var cardBackgroundColorVariant = ['standard', 'selected'];
 var matchBorderRadiusPaperToCard = {
     s: 'xs',
     m: 's',
-    l: 'l'
+    l: 'l',
 };
 var matchBackgroundColorPaperToCard = {
     selected: 'action-light',
-    standard: 'main'
+    standard: 'main',
 };
 export var Card = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Card' });
@@ -27,7 +27,7 @@ export var Card = polymorphicComponentWithRef(function (inProps, ref) {
     var shouldShowBorder = borderWidth !== 'none';
     return (React.createElement(Paper, __assign({ as: Tag, radius: matchBorderRadiusPaperToCard[size], background: matchBackgroundColorPaperToCard[backgroundColor] }, other, { ref: ref, "aria-disabled": disabled }, (shouldBeInteractive && { tabIndex: 0 }), { className: cnCard(__assign({ size: size, disabled: disabled, interactive: shouldBeInteractive, backgroundColor: backgroundColor, borderWidth: borderWidth }, (shouldShowBorder && {
             borderVariant: borderVariant,
-            borderColor: borderColor
+            borderColor: borderColor,
         })), [className]) }), children));
 });
 Card.displayName = 'Card';

package/__inner__/esm/components/Checkbox/Checkbox.js

@@ -12,7 +12,7 @@ export var cnCheckbox = cn('Checkbox');
 export var Checkbox = forwardRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'Checkbox'
+        name: 'Checkbox',
     });
     var _a = props.align, align = _a === void 0 ? CHECKBOX_DEFAULT_ALIGN : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? CHECKBOX_DEFAULT_LABEL_PLACEMENT : _b, _c = props.size, sizeProp = _c === void 0 ? CHECKBOX_DEFAULT_SIZE : _c, className = props.className, label = props.label, labelProps = props.labelProps, disabled = props.disabled, checkedProp = props.checked, inputRef = props.inputRef, indeterminate = props.indeterminate, nameProp = props.name, onChangeProp = props.onChange, other = __rest(props, ["align", "labelPlacement", "size", "className", "label", "labelProps", "disabled", "checked", "inputRef", "indeterminate", "name", "onChange"]);
     var checked = checkedProp;
@@ -39,7 +39,7 @@ export var Checkbox = forwardRef(function (inProps, ref) {
                 size: size,
                 disabled: disabled,
                 checked: checked,
-                indeterminate: indeterminate
+                indeterminate: indeterminate,
             }) },
             React.createElement("input", __assign({ type: "checkbox", className: cnCheckbox('Input'), disabled: disabled, checked: checked, onChange: onChange, name: name }, other, { ref: inputRef })),
             React.createElement("span", { className: cnCheckbox('Box') },

package/__inner__/esm/components/CheckboxGroup/CheckboxGroup.js

@@ -13,14 +13,14 @@ export var cnCheckboxGroup = cn('CheckboxGroup');
 export var CheckboxGroup = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
-        name: 'CheckboxGroup'
+        name: 'CheckboxGroup',
     });
     var _a = props.direction, direction = _a === void 0 ? CHECKBOX_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? CHECKBOX_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? CHECKBOX_GROUP_DEFAULT_AS : _c, title = props.title, className = props.className, children = props.children, name = props.name, valueProp = props.value, defaultValue = props.defaultValue, onChange = props.onChange, other = __rest(props, ["direction", "size", "as", "title", "className", "children", "name", "value", "defaultValue", "onChange"]);
     var _d = __read(useControlled({
         value: valueProp,
         defaultValue: defaultValue,
         name: 'CheckboxGroup',
-        state: 'value'
+        state: 'value',
     }), 2), valueState = _d[0], setValueState = _d[1];
     var handleChange = function (event) {
         var itemValue = event.currentTarget.value;
@@ -35,7 +35,7 @@ export var CheckboxGroup = polymorphicComponentWithRef(function (inProps, ref) {
                 value: valueState,
                 onChange: handleChange,
                 name: name,
-                size: size
+                size: size,
             } },
             title && React.createElement(FormTitle, { size: size }, title),
             React.createElement(FormGroup, { direction: direction, size: size }, children))));

package/__inner__/esm/components/Collapse/Collapse.js

@@ -22,21 +22,21 @@ export var Collapse = forwardRef(function (inProps, ref) {
             ? collapsedSizeProp
             : "".concat(collapsedSizeProp, "px");
     }, [collapsedSizeProp]);
-    return (React.createElement(Transition, { timeout: timeout, "in": expanded, unmountOnExit: unmountOnClosed, appear: appear, onEntering: onEntering, onExiting: onExiting, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited }, function (state) {
+    return (React.createElement(Transition, { timeout: timeout, in: expanded, unmountOnExit: unmountOnClosed, appear: appear, onEntering: onEntering, onExiting: onExiting, onEnter: onEnter, onEntered: onEntered, onExit: onExit, onExited: onExited }, function (state) {
         var _a, _b;
         var transitionStyles = {
             entering: {
-                height: (_a = collapseInnerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight
+                height: (_a = collapseInnerRef.current) === null || _a === void 0 ? void 0 : _a.clientHeight,
             },
             entered: {
                 height: expanded
                     ? 'auto'
-                    : (_b = collapseInnerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight
+                    : (_b = collapseInnerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight,
             },
-            exited: __assign({}, (collapsedSize === '0px' && { visibility: 'hidden' }))
+            exited: __assign({}, (collapsedSize === '0px' && { visibility: 'hidden' })),
         };
         return (React.createElement("div", __assign({ className: cnCollapse({
-                animation: state
+                animation: state,
             }, [className]), style: __assign(__assign({ height: collapsedSize, transitionDuration: "".concat(timeout, "ms") }, transitionStyles[state]), style) }, other, { ref: ref }),
             React.createElement("div", { ref: collapseInnerRef, className: cnCollapse('Inner') }, children)));
     }));

package/__inner__/esm/components/DataList/DataList.css

@@ -1,10 +1,10 @@
-.DataList {
-  --scroll-bar-size: 12px;
-}
-  .DataList::-webkit-scrollbar {
+.DataList-List {
+    --scroll-bar-size: 12px;
+  }
+    .DataList-List::-webkit-scrollbar {
     inline-size: var(--scroll-bar-size);
   }
-  .DataList::-webkit-scrollbar-thumb {
+    .DataList-List::-webkit-scrollbar-thumb {
     background-color: var(--color-background-secondary);
     border-radius: calc(var(--scroll-bar-size) / 2);
     border: calc(var(--scroll-bar-size) / 4) solid transparent;
@@ -12,56 +12,83 @@
     border-image: initial;
     min-block-size: 24px;
   }
-  .DataList::-webkit-scrollbar-thumb:hover,
-    .DataList::-webkit-scrollbar-thumb:active {
+    .DataList-List::-webkit-scrollbar-thumb:hover,
+    .DataList-List::-webkit-scrollbar-thumb:active {
       border: calc(var(--scroll-bar-size) / 4) solid transparent;
       background-clip: padding-box;
     }
-  .DataList::-webkit-scrollbar-thumb:hover {
+    .DataList-List::-webkit-scrollbar-thumb:hover {
       background-color: var(--color-background-secondary-hover);
     }
-  .DataList::-webkit-scrollbar-thumb:active {
+    .DataList-List::-webkit-scrollbar-thumb:active {
       background-color: var(--color-background-secondary-pressed);
     }
-  .DataList::-webkit-scrollbar-corner {
+    .DataList-List::-webkit-scrollbar-corner {
     background: transparent;
   }
-  .DataList {
-  scroll-behavior: smooth;
-  overflow: hidden auto;
-  max-block-size: 40vb;
+    .DataList-List {
+    overflow: hidden auto;
+    max-block-size: 40vb;
 }
-
   .DataList-Option {
     cursor: pointer;
   }
-
-  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_highlighted {
-      background-color: var(--color-background-main-hover);
-    }
-
-  .DataList-Option:not(.DataList-Option_disabled).DataList-Option_outlined {
+  .DataList-Option_focused {
       box-shadow: inset var(--shadow-outline-focused);
     }
-
+  .DataList-Option_highlighted {
+      background-color: var(--color-background-main-hover);
+    }
   .DataList-Option_disabled {
       cursor: not-allowed;
     }
-
-  .DataList-Option_disabled .ListItemText-TextPrimary {
-        color: var(--color-content-disabled);
+  .DataList-Option_disabled .ListItemText-TextPrimary,
+      .DataList-Option_disabled .ListItemText-TextSecondary {
+        color: var(--color-content-tertiary);
       }
-
   .DataList-IconWrapper {
     min-inline-size: var(--select-check-icon-size);
     min-block-size: var(--select-check-icon-size);
     display: flex;
   }
-
   .DataList-IconWrapper_size_s {
         --select-check-icon-size: 16px;
       }
-
   .DataList-IconWrapper_size_m {
         --select-check-icon-size: 24px;
       }
+.DataList_animation-enter {
+    opacity: 0;
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }
+.DataList_animation-enter-active {
+    opacity: 1;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0);
+    pointer-events: none;
+  }
+.DataList_animation-enter-done {
+    opacity: 1;
+    transform: translate(0);
+  }
+.DataList_animation-exit {
+    opacity: 1;
+    transform: translate(0);
+    pointer-events: none;
+  }
+.DataList_animation-exit-active {
+    opacity: 0;
+    transition:
+      opacity var(--transition-default),
+      transform var(--transition-default);
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }
+.DataList_animation-exit-done {
+    opacity: 0;
+    transform: translate(0, calc(var(--space-s) * -1));
+    pointer-events: none;
+  }

package/__inner__/esm/components/DataList/DataList.d.ts

@@ -1,4 +1,4 @@
 import './DataList.css';
-import type { DataListBaseProps } from './index';
+import type { DataListComponent } from './index';
 export declare const cnDataList: import("@bem-react/classname").ClassNameFormatter;
-export declare const DataList: import("../../utils/polymorphicComponentWithRef").PolymorphicComponentWithRef<DataListBaseProps, "div">;
+export declare const DataList: DataListComponent;

package/__inner__/esm/components/DataList/DataList.js

@@ -1,50 +1,88 @@
-import { __assign, __read, __rest } from "tslib";
+import { __assign, __read, __rest, __spreadArray } from "tslib";
 import './DataList.css';
-import React, { useRef } from 'react';
+import React from 'react';
+import { useBoolean } from '../../hooks/useBoolean';
 import { useControlled } from '../../hooks/useControlled';
 import { useEventListener } from '../../hooks/useEventListener';
 import { useMultiRef } from '../../hooks/useMultiRef';
 import { useThemeProps } from '../../hooks/useThemeProps';
 import { cn } from '../../utils/classname';
-import { isKey } from '../../utils/isKey';
 import { polymorphicComponentWithRef } from '../../utils/polymorphicComponentWithRef';
 import { List } from '../List';
 import { Popover } from '../Popover';
 import { DATA_LIST_DEFAULT_SIZE, DATA_LIST_DEFAULT_OPEN, DATA_LIST_DEFAULT_TAG, } from './constants';
 import { DataListContext } from './DataListProvider';
+import { isMultipleParams, isNotMultipleParams } from './index';
 import { useDataListNavigation } from './useDataListNavigation';
 export var cnDataList = cn('DataList');
-export var DataList = polymorphicComponentWithRef(function (inProps, ref) {
-    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, onSelect = _a.onSelect, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, listProps = _a.listProps, other = __rest(_a, ["open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
-    var _d = __read(useControlled({
+var DataListRender = function (inProps, ref) {
+    var _a = useThemeProps({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? DATA_LIST_DEFAULT_TAG : _d, name = _a.name, children = _a.children, anchorRef = _a.anchorRef, selectedProp = _a.selected, defaultSelected = _a.defaultSelected, onClose = _a.onClose, onEnteredProp = _a.onEntered, onExitedProp = _a.onExited, listProps = _a.listProps, other = __rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps"]);
+    // Состояние полностью представленного компонента
+    var _e = __read(useBoolean(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
+    var _g = __read(useControlled({
         name: 'DataList',
         defaultValue: defaultSelected,
         value: selectedProp,
-        state: 'selected'
-    }), 2), selected = _d[0], setSelected = _d[1];
-    var listRef = useRef(null);
-    var handleSelect = function (event, option) {
-        setSelected(option);
-        onSelect === null || onSelect === void 0 ? void 0 : onSelect(event, { name: name, value: option });
+        state: 'selected',
+    }), 2), selected = _g[0], setSelected = _g[1];
+    var handleSelect = function (event, value) {
+        var _a, _b, _c;
+        var res;
+        var props = __assign(__assign({}, inProps), { selected: selected });
+        if (isMultipleParams(props)) {
+            res = ((_a = props.selected) === null || _a === void 0 ? void 0 : _a.includes(value))
+                ? props.selected.filter(function (item) { return item !== value; })
+                : __spreadArray(__spreadArray([], __read((selected || [])), false), [value], false);
+            (_b = props.onSelect) === null || _b === void 0 ? void 0 : _b.call(props, event, { name: name, value: res });
+        }
+        if (isNotMultipleParams(props)) {
+            res = value;
+            (_c = props.onSelect) === null || _c === void 0 ? void 0 : _c.call(props, event, { name: name, value: value });
+        }
+        setSelected(res || '');
     };
-    var _e = useDataListNavigation({
+    // Фиксируем последний выбранный элемент в списке, чтобы потом переводить на него scroll в контейнере
+    var lastSelectedOption = Array.isArray(selected)
+        ? selected[selected.length - 1]
+        : selected;
+    var _h = useDataListNavigation({
         name: name,
-        listRef: listRef
-    }), onKeyDown = _e.onKeyDown, currentItem = _e.currentItem, listNavigation = __rest(_e, ["onKeyDown", "currentItem"]);
+        active: opened,
+        selected: lastSelectedOption,
+        onSelect: function (e, selectedItem) {
+            handleSelect(e, selectedItem);
+        },
+    }), onKeyDown = _h.onKeyDown, listRef = _h.ref, navigation = __rest(_h, ["onKeyDown", "ref"]);
+    // Назначает элементу контроля события управления списком с клавиатуры
     useEventListener({
         active: open,
         eventName: 'keydown',
         element: anchorRef,
-        handler: function (event) {
-            var _a;
-            onKeyDown(event);
-            if (isKey(event, 'Enter')) {
-                handleSelect(event, ((_a = currentItem === null || currentItem === void 0 ? void 0 : currentItem.dataset) === null || _a === void 0 ? void 0 : _a.value) || '');
-            }
-        }
+        handler: onKeyDown,
+    });
+    // Закрывает список как только элемент контроля теряет фокус
+    useEventListener({
+        active: open,
+        eventName: 'focusout',
+        element: anchorRef,
+        handler: function () {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        },
     });
-    return (React.createElement(Popover, __assign({ as: DATA_LIST_DEFAULT_TAG, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
-        React.createElement(DataListContext.Provider, { value: __assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
-            React.createElement(List, __assign({ as: "ul", size: size }, listProps, { ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: cnDataList('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
-});
-DataList.displayName = 'DataList';
+    return (React.createElement(Popover, __assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableClickOutside: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, transitionProps: {
+            classNames: cnDataList({ animation: true }),
+        } }, other, { onEntered: function () {
+            onEntered();
+            onEnteredProp === null || onEnteredProp === void 0 ? void 0 : onEnteredProp();
+        }, onExited: function () {
+            onExited();
+            onExitedProp === null || onExitedProp === void 0 ? void 0 : onExitedProp();
+        }, ref: ref }),
+        React.createElement(DataListContext.Provider, { value: __assign({ selected: selected, size: size }, navigation) },
+            React.createElement(List, __assign({ as: "ul", size: size }, listProps, { onMouseDown: function (e) {
+                    var _a;
+                    e.preventDefault();
+                    (_a = listProps === null || listProps === void 0 ? void 0 : listProps.onMouseDown) === null || _a === void 0 ? void 0 : _a.call(listProps, e);
+                }, ref: useMultiRef([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: cnDataList('List', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
+};
+export var DataList = polymorphicComponentWithRef(DataListRender);

package/__inner__/esm/components/DataList/DataListProvider.d.ts

@@ -1,18 +1,16 @@
 import type { SyntheticEvent, MouseEvent } from 'react';
+import type React from 'react';
 import type { FormElementSizeVariant } from '../../types/FormElementSizeVariant';
-export type DataListSelectPayload = {
-    name?: string;
-    value: string;
-};
 export type DataListContextState = {
     'data-list': string;
-    currentItem: HTMLElement | null;
-    selected?: string;
-    keyboardHighlight: boolean;
+    selected?: string | string[];
+    focused?: string | null;
+    highlighted?: string | null;
     size: FormElementSizeVariant;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
     onSelect?: (event: SyntheticEvent, option: string) => void;
-    onMouseMove?: (event: MouseEvent<HTMLLIElement>) => void;
-    onMouseLeave?: (event: MouseEvent<HTMLLIElement>) => void;
+    onMouseMove?: (event: MouseEvent<HTMLElement>) => void;
+    onMouseLeave?: (event: MouseEvent<HTMLElement>) => void;
 };
-export declare const DataListContext: import("react").Context<DataListContextState>;
+export declare const DataListContext: React.Context<DataListContextState>;
 export declare const useDataListContext: () => DataListContextState;