@ozen-ui/kit 0.11.0 → 0.13.0

package/__inner__/cjs/components/Checkbox/Checkbox.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Checkbox = exports.cnCheckbox = exports.checkboxSizeVariant = void 0;
 var tslib_1 = require("tslib");
 require("./Checkbox.css");
@@ -15,7 +15,7 @@ exports.cnCheckbox = (0, classname_1.cn)('Checkbox');
 exports.Checkbox = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
-        name: 'Checkbox'
+        name: 'Checkbox',
     });
     var _a = props.align, align = _a === void 0 ? constants_1.CHECKBOX_DEFAULT_ALIGN : _a, _b = props.labelPlacement, labelPlacement = _b === void 0 ? constants_1.CHECKBOX_DEFAULT_LABEL_PLACEMENT : _b, _c = props.size, sizeProp = _c === void 0 ? constants_1.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 = tslib_1.__rest(props, ["align", "labelPlacement", "size", "className", "label", "labelProps", "disabled", "checked", "inputRef", "indeterminate", "name", "onChange"]);
     var checked = checkedProp;
@@ -37,15 +37,15 @@ exports.Checkbox = (0, react_1.forwardRef)(function (inProps, ref) {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event);
         checkboxGroup === null || checkboxGroup === void 0 ? void 0 : checkboxGroup.onChange(event);
     };
-    return (react_1["default"].createElement(FormControlLabel_1.FormControlLabel, tslib_1.__assign({ label: label, size: size, labelPlacement: labelPlacement, disabled: disabled, align: align, className: className, ref: ref }, labelProps),
-        react_1["default"].createElement("span", { className: (0, exports.cnCheckbox)({
+    return (react_1.default.createElement(FormControlLabel_1.FormControlLabel, tslib_1.__assign({ label: label, size: size, labelPlacement: labelPlacement, disabled: disabled, align: align, className: className, ref: ref }, labelProps),
+        react_1.default.createElement("span", { className: (0, exports.cnCheckbox)({
                 size: size,
                 disabled: disabled,
                 checked: checked,
-                indeterminate: indeterminate
+                indeterminate: indeterminate,
             }) },
-            react_1["default"].createElement("input", tslib_1.__assign({ type: "checkbox", className: (0, exports.cnCheckbox)('Input'), disabled: disabled, checked: checked, onChange: onChange, name: name }, other, { ref: inputRef })),
-            react_1["default"].createElement("span", { className: (0, exports.cnCheckbox)('Box') },
-                react_1["default"].createElement(components_1.CheckboxIcon, { indeterminate: indeterminate, className: (0, exports.cnCheckbox)('Icon') })))));
+            react_1.default.createElement("input", tslib_1.__assign({ type: "checkbox", className: (0, exports.cnCheckbox)('Input'), disabled: disabled, checked: checked, onChange: onChange, name: name }, other, { ref: inputRef })),
+            react_1.default.createElement("span", { className: (0, exports.cnCheckbox)('Box') },
+                react_1.default.createElement(components_1.CheckboxIcon, { indeterminate: indeterminate, className: (0, exports.cnCheckbox)('Icon') })))));
 });
 exports.Checkbox.displayName = 'Checkbox';

package/__inner__/cjs/components/Checkbox/components/CheckIcon.js

@@ -1,8 +1,8 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckIcon = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-exports.CheckIcon = (0, react_1.forwardRef)(function (props, ref) { return (react_1["default"].createElement("svg", tslib_1.__assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
-    react_1["default"].createElement("path", { d: "M3.31479 8.85849L0.132955 5.44128C-0.0443184 5.25327 -0.0443184 4.94725 0.132955 4.75723L0.775686 4.07419C0.95296 3.88618 1.24114 3.88618 1.41842 4.07419L3.63661 6.46634L8.58118 1.14101C8.75846 0.952997 9.04664 0.952997 9.22391 1.14101L9.86664 1.82505C10.0439 2.01306 10.0439 2.32008 9.86664 2.50709L3.95752 8.85849C3.78025 9.0465 3.49206 9.0465 3.31479 8.85849Z", fill: "currentColor" }))); });
+exports.CheckIcon = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement("svg", tslib_1.__assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    react_1.default.createElement("path", { d: "M3.31479 8.85849L0.132955 5.44128C-0.0443184 5.25327 -0.0443184 4.94725 0.132955 4.75723L0.775686 4.07419C0.95296 3.88618 1.24114 3.88618 1.41842 4.07419L3.63661 6.46634L8.58118 1.14101C8.75846 0.952997 9.04664 0.952997 9.22391 1.14101L9.86664 1.82505C10.0439 2.01306 10.0439 2.32008 9.86664 2.50709L3.95752 8.85849C3.78025 9.0465 3.49206 9.0465 3.31479 8.85849Z", fill: "currentColor" }))); });
 exports.CheckIcon.displayName = 'CheckIcon';

package/__inner__/cjs/components/Checkbox/components/CheckboxIcon.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxIcon = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -7,6 +7,6 @@ var CheckIcon_1 = require("./CheckIcon");
 var IndeterminateCheckIcon_1 = require("./IndeterminateCheckIcon");
 exports.CheckboxIcon = (0, react_1.forwardRef)(function (_a, ref) {
     var indeterminate = _a.indeterminate, otherProps = tslib_1.__rest(_a, ["indeterminate"]);
-    return indeterminate ? (react_1["default"].createElement(IndeterminateCheckIcon_1.IndeterminateCheckIcon, tslib_1.__assign({ ref: ref }, otherProps))) : (react_1["default"].createElement(CheckIcon_1.CheckIcon, tslib_1.__assign({ ref: ref }, otherProps)));
+    return indeterminate ? (react_1.default.createElement(IndeterminateCheckIcon_1.IndeterminateCheckIcon, tslib_1.__assign({ ref: ref }, otherProps))) : (react_1.default.createElement(CheckIcon_1.CheckIcon, tslib_1.__assign({ ref: ref }, otherProps)));
 });
 exports.CheckboxIcon.displayName = 'CheckboxIcon';

package/__inner__/cjs/components/Checkbox/components/IndeterminateCheckIcon.js

@@ -1,8 +1,8 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.IndeterminateCheckIcon = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
-exports.IndeterminateCheckIcon = (0, react_1.forwardRef)(function (props, ref) { return (react_1["default"].createElement("svg", tslib_1.__assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
-    react_1["default"].createElement("path", { d: "M0 4.5C0 4.22386 0.223858 4 0.5 4H9.5C9.77614 4 10 4.22386 10 4.5V5.5C10 5.77614 9.77614 6 9.5 6H0.5C0.223858 6 0 5.77614 0 5.5V4.5Z", fill: "currentColor" }))); });
+exports.IndeterminateCheckIcon = (0, react_1.forwardRef)(function (props, ref) { return (react_1.default.createElement("svg", tslib_1.__assign({ width: "10", height: "10", viewBox: "0 0 10 10", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, props, { ref: ref }),
+    react_1.default.createElement("path", { d: "M0 4.5C0 4.22386 0.223858 4 0.5 4H9.5C9.77614 4 10 4.22386 10 4.5V5.5C10 5.77614 9.77614 6 9.5 6H0.5C0.223858 6 0 5.77614 0 5.5V4.5Z", fill: "currentColor" }))); });
 exports.IndeterminateCheckIcon.displayName = 'IndeterminateCheckIcon';

package/__inner__/cjs/components/Checkbox/components/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("./CheckboxIcon"), exports);

package/__inner__/cjs/components/Checkbox/constants.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CHECKBOX_DEFAULT_SIZE = exports.CHECKBOX_DEFAULT_LABEL_PLACEMENT = exports.CHECKBOX_DEFAULT_ALIGN = void 0;
 exports.CHECKBOX_DEFAULT_ALIGN = 'center';
 exports.CHECKBOX_DEFAULT_LABEL_PLACEMENT = 'right';

package/__inner__/cjs/components/Checkbox/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("./Checkbox"), exports);

package/__inner__/cjs/components/CheckboxGroup/CheckboxGroup.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxGroup = exports.cnCheckboxGroup = void 0;
 var tslib_1 = require("tslib");
 require("./CheckboxGroup.css");
@@ -16,14 +16,14 @@ exports.cnCheckboxGroup = (0, classname_1.cn)('CheckboxGroup');
 exports.CheckboxGroup = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
-        name: 'CheckboxGroup'
+        name: 'CheckboxGroup',
     });
     var _a = props.direction, direction = _a === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_DIRECTION : _a, _b = props.size, size = _b === void 0 ? constants_1.CHECKBOX_GROUP_DEFAULT_SIZE : _b, _c = props.as, Tag = _c === void 0 ? constants_1.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 = tslib_1.__rest(props, ["direction", "size", "as", "title", "className", "children", "name", "value", "defaultValue", "onChange"]);
     var _d = tslib_1.__read((0, useControlled_1.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;
@@ -33,14 +33,14 @@ exports.CheckboxGroup = (0, polymorphicComponentWithRef_1.polymorphicComponentWi
         setValueState(value);
         onChange === null || onChange === void 0 ? void 0 : onChange(value);
     };
-    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, exports.cnCheckboxGroup)({ size: size }, [className]), role: "radiogroup" }, other, { ref: ref }),
-        react_1["default"].createElement(CheckboxGroupContext_1.CheckboxGroupContext.Provider, { value: {
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, exports.cnCheckboxGroup)({ size: size }, [className]), role: "radiogroup" }, other, { ref: ref }),
+        react_1.default.createElement(CheckboxGroupContext_1.CheckboxGroupContext.Provider, { value: {
                 value: valueState,
                 onChange: handleChange,
                 name: name,
-                size: size
+                size: size,
             } },
-            title && react_1["default"].createElement(FormTitle_1.FormTitle, { size: size }, title),
-            react_1["default"].createElement(FormGroup_1.FormGroup, { direction: direction, size: size }, children))));
+            title && react_1.default.createElement(FormTitle_1.FormTitle, { size: size }, title),
+            react_1.default.createElement(FormGroup_1.FormGroup, { direction: direction, size: size }, children))));
 });
 exports.CheckboxGroup.displayName = 'CheckboxGroup';

package/__inner__/cjs/components/CheckboxGroup/CheckboxGroupContext.js

@@ -1,6 +1,6 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CheckboxGroupContext = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
-exports.CheckboxGroupContext = react_1["default"].createContext(undefined);
+exports.CheckboxGroupContext = react_1.default.createContext(undefined);

package/__inner__/cjs/components/CheckboxGroup/constants.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CHECKBOX_GROUP_DEFAULT_AS = exports.CHECKBOX_GROUP_DEFAULT_SIZE = exports.CHECKBOX_GROUP_DEFAULT_DIRECTION = void 0;
 exports.CHECKBOX_GROUP_DEFAULT_DIRECTION = 'column';
 exports.CHECKBOX_GROUP_DEFAULT_SIZE = 'm';

package/__inner__/cjs/components/CheckboxGroup/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("./CheckboxGroup"), exports);

package/__inner__/cjs/components/Chip/Chip.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Chip = exports.chipColorVariant = exports.chipSizeVariant = exports.cnChip = void 0;
 var tslib_1 = require("tslib");
 require("./Chip.css");
@@ -14,11 +14,11 @@ exports.chipColorVariant = ['primary', 'secondary'];
 exports.Chip = (0, react_1.forwardRef)(function (inProps, ref) {
     var _a = (0, useThemeProps_1.useThemeProps)({ name: 'Chip', props: inProps }), _b = _a.size, size = _b === void 0 ? constants_1.CHIP_DEFAULT_SIZE : _b, _c = _a.color, color = _c === void 0 ? constants_1.CHIP_DEFAULT_VARIANT : _c, _d = _a.disabled, disabled = _d === void 0 ? constants_1.CHIP_DEFAULT_DISABLED : _d, IconLeft = _a.iconLeft, IconRight = _a.iconRight, labelProps = _a.labelProps, inputRef = _a.inputRef, className = _a.className, children = _a.children, dataTestId = _a["data-testid"], other = tslib_1.__rest(_a, ["size", "color", "disabled", "iconLeft", "iconRight", "labelProps", "inputRef", "className", "children", 'data-testid']);
     var iconSize = (0, react_1.useMemo)(function () { return (0, getIconSizeToFormElement_1.getIconSizeToFormElement)(size); }, [size]);
-    return (react_1["default"].createElement("label", tslib_1.__assign({ ref: ref, className: (0, exports.cnChip)('', { size: size, disabled: disabled, color: color }, [className]), "data-testid": dataTestId }, labelProps),
-        react_1["default"].createElement("input", tslib_1.__assign({ ref: inputRef, className: (0, exports.cnChip)('Input'), disabled: disabled, type: "checkbox" }, other)),
-        react_1["default"].createElement("span", { className: (0, exports.cnChip)('Content') },
-            IconLeft && react_1["default"].createElement(IconLeft, { size: iconSize, className: (0, exports.cnChip)('Icon') }),
+    return (react_1.default.createElement("label", tslib_1.__assign({ ref: ref, className: (0, exports.cnChip)('', { size: size, disabled: disabled, color: color }, [className]), "data-testid": dataTestId }, labelProps),
+        react_1.default.createElement("input", tslib_1.__assign({ ref: inputRef, className: (0, exports.cnChip)('Input'), disabled: disabled, type: "checkbox" }, other)),
+        react_1.default.createElement("span", { className: (0, exports.cnChip)('Content') },
+            IconLeft && react_1.default.createElement(IconLeft, { size: iconSize, className: (0, exports.cnChip)('Icon') }),
             children,
-            IconRight && react_1["default"].createElement(IconRight, { size: iconSize, className: (0, exports.cnChip)('Icon') }))));
+            IconRight && react_1.default.createElement(IconRight, { size: iconSize, className: (0, exports.cnChip)('Icon') }))));
 });
 exports.Chip.displayName = 'Chip';

package/__inner__/cjs/components/Chip/constants.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.CHIP_DEFAULT_DISABLED = exports.CHIP_DEFAULT_SIZE = exports.CHIP_DEFAULT_VARIANT = void 0;
 exports.CHIP_DEFAULT_VARIANT = 'primary';
 exports.CHIP_DEFAULT_SIZE = 'm';

package/__inner__/cjs/components/Chip/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("./Chip"), exports);

package/__inner__/cjs/components/Collapse/Collapse.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Collapse = exports.cnCollapse = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
@@ -25,23 +25,23 @@ exports.Collapse = (0, react_1.forwardRef)(function (inProps, ref) {
             ? collapsedSizeProp
             : "".concat(collapsedSizeProp, "px");
     }, [collapsedSizeProp]);
-    return (react_1["default"].createElement(react_transition_group_1.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_1.default.createElement(react_transition_group_1.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: tslib_1.__assign({}, (collapsedSize === '0px' && { visibility: 'hidden' }))
+            exited: tslib_1.__assign({}, (collapsedSize === '0px' && { visibility: 'hidden' })),
         };
-        return (react_1["default"].createElement("div", tslib_1.__assign({ className: (0, exports.cnCollapse)({
-                animation: state
+        return (react_1.default.createElement("div", tslib_1.__assign({ className: (0, exports.cnCollapse)({
+                animation: state,
             }, [className]), style: tslib_1.__assign(tslib_1.__assign({ height: collapsedSize, transitionDuration: "".concat(timeout, "ms") }, transitionStyles[state]), style) }, other, { ref: ref }),
-            react_1["default"].createElement("div", { ref: collapseInnerRef, className: (0, exports.cnCollapse)('Inner') }, children)));
+            react_1.default.createElement("div", { ref: collapseInnerRef, className: (0, exports.cnCollapse)('Inner') }, children)));
     }));
 });
 exports.Collapse.displayName = 'Collapse';

package/__inner__/cjs/components/Collapse/constants.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DEFAULT_COLLAPSED_SIZE = exports.DEFAULT_COLLAPSE_TIMEOUT = void 0;
 exports.DEFAULT_COLLAPSE_TIMEOUT = 120;
 exports.DEFAULT_COLLAPSED_SIZE = 0;

package/__inner__/cjs/components/Collapse/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("./Collapse"), exports);

package/__inner__/cjs/components/Container/Container.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.Container = exports.cnContainer = void 0;
 var tslib_1 = require("tslib");
 require("./Container.css");
@@ -17,6 +17,6 @@ var containerPositionVariant = ['start', 'center'];
 exports.Container = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Container' });
     var children = props.children, className = props.className, maxWidth = props.maxWidth, position = props.position, gutters = props.gutters, _a = props.as, Tag = _a === void 0 ? 'div' : _a, other = tslib_1.__rest(props, ["children", "className", "maxWidth", "position", "gutters", "as"]);
-    return (react_1["default"].createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnContainer)({ position: position }), (0, useMaxWidth_1.useGenerateMaxWidthCn)(exports.cnContainer, maxWidth), (0, useGutters_1.useGenerateGuttersCn)(exports.cnContainer, gutters), className) }, other, { ref: ref }), children));
+    return (react_1.default.createElement(Tag, tslib_1.__assign({ className: (0, classnames_1.classnames)((0, exports.cnContainer)({ position: position }), (0, useMaxWidth_1.useGenerateMaxWidthCn)(exports.cnContainer, maxWidth), (0, useGutters_1.useGenerateGuttersCn)(exports.cnContainer, gutters), className) }, other, { ref: ref }), children));
 });
 exports.Container.displayName = 'Container';

package/__inner__/cjs/components/Container/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("./Container"), exports);

package/__inner__/cjs/components/Container/useGutters.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGenerateGuttersCn = void 0;
 var tslib_1 = require("tslib");
 var classnames_1 = require("@bem-react/classnames");

package/__inner__/cjs/components/Container/useMaxWidth.js

@@ -1,5 +1,5 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useGenerateMaxWidthCn = void 0;
 var tslib_1 = require("tslib");
 var classnames_1 = require("@bem-react/classnames");

package/__inner__/cjs/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__/cjs/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__/cjs/components/DataList/DataList.js

@@ -1,53 +1,91 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.DataList = exports.cnDataList = void 0;
 var tslib_1 = require("tslib");
 require("./DataList.css");
-var react_1 = tslib_1.__importStar(require("react"));
+var react_1 = tslib_1.__importDefault(require("react"));
+var useBoolean_1 = require("../../hooks/useBoolean");
 var useControlled_1 = require("../../hooks/useControlled");
 var useEventListener_1 = require("../../hooks/useEventListener");
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");
 var classname_1 = require("../../utils/classname");
-var isKey_1 = require("../../utils/isKey");
 var polymorphicComponentWithRef_1 = require("../../utils/polymorphicComponentWithRef");
 var List_1 = require("../List");
 var Popover_1 = require("../Popover");
 var constants_1 = require("./constants");
 var DataListProvider_1 = require("./DataListProvider");
+var index_1 = require("./index");
 var useDataListNavigation_1 = require("./useDataListNavigation");
 exports.cnDataList = (0, classname_1.cn)('DataList');
-exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(function (inProps, ref) {
-    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.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 = tslib_1.__rest(_a, ["open", "size", "name", "children", "anchorRef", "onSelect", "selected", "defaultSelected", "listProps"]);
-    var _d = tslib_1.__read((0, useControlled_1.useControlled)({
+var DataListRender = function (inProps, ref) {
+    var _a = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'DataList' }), _b = _a.open, open = _b === void 0 ? constants_1.DATA_LIST_DEFAULT_OPEN : _b, _c = _a.size, size = _c === void 0 ? constants_1.DATA_LIST_DEFAULT_SIZE : _c, _d = _a.as, as = _d === void 0 ? constants_1.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 = tslib_1.__rest(_a, ["open", "size", "as", "name", "children", "anchorRef", "selected", "defaultSelected", "onClose", "onEntered", "onExited", "listProps"]);
+    // Состояние полностью представленного компонента
+    var _e = tslib_1.__read((0, useBoolean_1.useBoolean)(false), 2), opened = _e[0], _f = _e[1], onEntered = _f.on, onExited = _f.off;
+    var _g = tslib_1.__read((0, useControlled_1.useControlled)({
         name: 'DataList',
         defaultValue: defaultSelected,
         value: selectedProp,
-        state: 'selected'
-    }), 2), selected = _d[0], setSelected = _d[1];
-    var listRef = (0, react_1.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 = tslib_1.__assign(tslib_1.__assign({}, inProps), { selected: selected });
+        if ((0, index_1.isMultipleParams)(props)) {
+            res = ((_a = props.selected) === null || _a === void 0 ? void 0 : _a.includes(value))
+                ? props.selected.filter(function (item) { return item !== value; })
+                : tslib_1.__spreadArray(tslib_1.__spreadArray([], tslib_1.__read((selected || [])), false), [value], false);
+            (_b = props.onSelect) === null || _b === void 0 ? void 0 : _b.call(props, event, { name: name, value: res });
+        }
+        if ((0, index_1.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 = (0, useDataListNavigation_1.useDataListNavigation)({
+    // Фиксируем последний выбранный элемент в списке, чтобы потом переводить на него scroll в контейнере
+    var lastSelectedOption = Array.isArray(selected)
+        ? selected[selected.length - 1]
+        : selected;
+    var _h = (0, useDataListNavigation_1.useDataListNavigation)({
         name: name,
-        listRef: listRef
-    }), onKeyDown = _e.onKeyDown, currentItem = _e.currentItem, listNavigation = tslib_1.__rest(_e, ["onKeyDown", "currentItem"]);
+        active: opened,
+        selected: lastSelectedOption,
+        onSelect: function (e, selectedItem) {
+            handleSelect(e, selectedItem);
+        },
+    }), onKeyDown = _h.onKeyDown, listRef = _h.ref, navigation = tslib_1.__rest(_h, ["onKeyDown", "ref"]);
+    // Назначает элементу контроля события управления списком с клавиатуры
     (0, useEventListener_1.useEventListener)({
         active: open,
         eventName: 'keydown',
         element: anchorRef,
-        handler: function (event) {
-            var _a;
-            onKeyDown(event);
-            if ((0, isKey_1.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,
+    });
+    // Закрывает список как только элемент контроля теряет фокус
+    (0, useEventListener_1.useEventListener)({
+        active: open,
+        eventName: 'focusout',
+        element: anchorRef,
+        handler: function () {
+            onClose === null || onClose === void 0 ? void 0 : onClose();
+        },
     });
-    return (react_1["default"].createElement(Popover_1.Popover, tslib_1.__assign({ as: constants_1.DATA_LIST_DEFAULT_TAG, open: open, placement: "bottom-start", disableReturnFocus: true, disableEnforceFocus: true, equalAnchorWidth: true, offset: [0, 4], anchorRef: anchorRef }, other, { ref: ref }),
-        react_1["default"].createElement(DataListProvider_1.DataListContext.Provider, { value: tslib_1.__assign({ selected: selected, size: size, onSelect: handleSelect, currentItem: currentItem }, listNavigation) },
-            react_1["default"].createElement(List_1.List, tslib_1.__assign({ as: "ul", size: size }, listProps, { ref: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: (0, exports.cnDataList)('', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
-});
-exports.DataList.displayName = 'DataList';
+    return (react_1.default.createElement(Popover_1.Popover, tslib_1.__assign({ as: as, open: open, placement: "bottom-start", disableReturnFocus: true, disableClickOutside: true, disableEnforceFocus: true, offset: [0, 4], onClose: onClose, anchorRef: anchorRef, transitionProps: {
+            classNames: (0, exports.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_1.default.createElement(DataListProvider_1.DataListContext.Provider, { value: tslib_1.__assign({ selected: selected, size: size }, navigation) },
+            react_1.default.createElement(List_1.List, tslib_1.__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: (0, useMultiRef_1.useMultiRef)([listRef, listProps === null || listProps === void 0 ? void 0 : listProps.ref]), className: (0, exports.cnDataList)('List', [listProps === null || listProps === void 0 ? void 0 : listProps.className]) }), children))));
+};
+exports.DataList = (0, polymorphicComponentWithRef_1.polymorphicComponentWithRef)(DataListRender);

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

package/__inner__/cjs/components/DataList/DataListProvider.js

@@ -1,13 +1,11 @@
 "use strict";
-exports.__esModule = true;
+Object.defineProperty(exports, "__esModule", { value: true });
 exports.useDataListContext = exports.DataListContext = void 0;
 var react_1 = require("react");
 var constants_1 = require("./constants");
 exports.DataListContext = (0, react_1.createContext)({
     'data-list': '',
-    currentItem: null,
-    keyboardHighlight: false,
-    size: constants_1.DATA_LIST_DEFAULT_SIZE
+    size: constants_1.DATA_LIST_DEFAULT_SIZE,
 });
 var useDataListContext = function () { return (0, react_1.useContext)(exports.DataListContext); };
 exports.useDataListContext = useDataListContext;