@ozen-ui/kit 0.83.2 → 0.84.0

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStep.js

@@ -3,16 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.StepperVerticalStep = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
+var logger_1 = require("@ozen-ui/logger");
+var useDevEffect_1 = require("../../../../hooks/useDevEffect");
 var useMultiRef_1 = require("../../../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var utils_1 = require("../../../../utils");
 var Collapse_1 = require("../../../Collapse");
 var Stack_1 = require("../../../Stack");
-var Typography_1 = require("../../../Typography");
 var hooks_1 = require("../../hooks");
 var StepperVerticalContext_1 = require("../../StepperVerticalContext");
 var StepperVerticalIconIndicator_1 = require("../StepperVerticalIconIndicator");
 var classNames_1 = require("./classNames");
+var components_1 = require("./components");
 var constants_1 = require("./constants");
 var StepperVerticalStepContext_1 = require("./StepperVerticalStepContext");
 var StepperVerticalStepRootContext_1 = require("./StepperVerticalStepRootContext");
@@ -21,7 +23,20 @@ exports.StepperVerticalStep = (0, utils_1.polymorphicComponentWithRef)(function
         name: 'StepperVerticalStep',
         props: inProps,
     });
-    var _a = props.variant, variant = _a === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_VARIANT : _a, _b = props.current, current = _b === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_CURRENT : _b, ellipsisProp = props.ellipsis, hint = props.hint, children = props.children, caption = props.caption, action = props.action, _c = props.indicator, indicator = _c === void 0 ? react_1.default.createElement(StepperVerticalIconIndicator_1.StepperVerticalIconIndicator, null) : _c, className = props.className, _d = props.as, as = _d === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_TAG : _d, substeps = props.substeps, other = tslib_1.__rest(props, ["variant", "current", "ellipsis", "hint", "children", "caption", "action", "indicator", "className", "as", "substeps"]);
+    var _a = props.variant, variant = _a === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_VARIANT : _a, _b = props.current, current = _b === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_CURRENT : _b, ellipsisProp = props.ellipsis, hint = props.hint, children = props.children, caption = props.caption, action = props.action, _c = props.indicator, indicator = _c === void 0 ? react_1.default.createElement(StepperVerticalIconIndicator_1.StepperVerticalIconIndicator, null) : _c, className = props.className, _d = props.as, as = _d === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_TAG : _d, substeps = props.substeps, subcontent = props.subcontent, _e = props.custom, custom = _e === void 0 ? constants_1.STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM : _e, openSubcontent = props.openSubcontent, onOpenSubcontentChange = props.onOpenSubcontentChange, onOpenSubstepsChange = props.onOpenSubstepsChange, openSubsteps = props.openSubsteps, other = tslib_1.__rest(props, ["variant", "current", "ellipsis", "hint", "children", "caption", "action", "indicator", "className", "as", "substeps", "subcontent", "custom", "openSubcontent", "onOpenSubcontentChange", "onOpenSubstepsChange", "openSubsteps"]);
+    (0, useDevEffect_1.useDevEffect)(function () {
+        if (subcontent && substeps) {
+            logger_1.logger.error('Нельзя использовать одновременно substeps и subcontent.');
+        }
+    }, [substeps, subcontent]);
+    (0, useDevEffect_1.useDevEffect)(function () {
+        if (!custom) {
+            return;
+        }
+        if (subcontent || substeps || caption || action) {
+            logger_1.logger.error('Нельзя использовать блоки при custom === true.');
+        }
+    }, [subcontent, substeps, caption, action]);
     var stepperVerticalContext = (0, StepperVerticalContext_1.useStepperVerticalContext)();
     var rootContext = (0, StepperVerticalStepRootContext_1.useStepperVerticalStepRootContext)();
     var isSubstep = !!rootContext;
@@ -32,20 +47,40 @@ exports.StepperVerticalStep = (0, utils_1.polymorphicComponentWithRef)(function
         }
         return !!resolved;
     })();
+    var hasSubcontent = (function () {
+        var resolved = (0, utils_1.resolveChildren)(subcontent);
+        if ((0, utils_1.isArray)(resolved)) {
+            return resolved.length > 0;
+        }
+        return !!resolved;
+    })();
     var ellipsis = (function () {
         if (ellipsisProp !== undefined) {
             return ellipsisProp;
         }
         return stepperVerticalContext.ellipsis;
     })();
-    var step = (0, hooks_1.useStepperVerticalCreateStep)(rootContext === null || rootContext === void 0 ? void 0 : rootContext.root);
-    var _e = (0, hooks_1.useStepperVerticalStepHelper)(step), hasNext = _e.hasNext, hasPrevious = _e.hasPrevious;
+    var step = (0, hooks_1.useStepperVerticalCreateStep)({
+        onOpenSubcontentChange: onOpenSubcontentChange,
+        onOpenSubstepsChange: onOpenSubstepsChange,
+        openSubsteps: openSubsteps,
+        openSubcontent: openSubcontent,
+    }, rootContext === null || rootContext === void 0 ? void 0 : rootContext.root);
+    var _f = (0, hooks_1.useStepperVerticalStepHelper)(step), hasNext = _f.hasNext, hasPrevious = _f.hasPrevious;
     (0, react_1.useEffect)(function () {
         if (rootContext && !(rootContext === null || rootContext === void 0 ? void 0 : rootContext.root.isSubStepsOpen)) {
             step.setIsSubStepsOpen(false);
         }
     }, [rootContext === null || rootContext === void 0 ? void 0 : rootContext.root.isSubStepsOpen]);
-    var memoizedContext = (0, react_1.useMemo)(function () { return ({ variant: variant, current: current, hasSubsteps: hasSubsteps, step: step }); }, [variant, current, hasSubsteps, step, step.isSubStepsOpen, step.root]);
+    var memoizedContext = (0, react_1.useMemo)(function () { return ({ variant: variant, current: current, hasSubsteps: hasSubsteps, step: step, hasSubcontent: hasSubcontent }); }, [
+        variant,
+        current,
+        hasSubsteps,
+        step,
+        step.isSubStepsOpen,
+        step.root,
+        step.isSubcontentOpen,
+    ]);
     var memoizedRootContext = (0, react_1.useMemo)(function () { return ({ root: step }); }, [step, step.isSubStepsOpen, step.root]);
     return (react_1.default.createElement(react_1.default.Fragment, null,
         react_1.default.createElement(StepperVerticalStepContext_1.StepperVerticalStepContext.Provider, { value: memoizedContext },
@@ -59,12 +94,8 @@ exports.StepperVerticalStep = (0, utils_1.polymorphicComponentWithRef)(function
                 }, [className]), gap: "m" }),
                 react_1.default.createElement("div", { className: (0, classNames_1.cnStepperVerticalStep)('Path') },
                     react_1.default.createElement("div", { className: (0, classNames_1.cnStepperVerticalStep)('Indicator') }, indicator)),
-                react_1.default.createElement(Stack_1.Stack, { direction: "column", className: (0, classNames_1.cnStepperVerticalStep)('Description') },
-                    react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnStepperVerticalStep)('Info'), direction: "column", gap: "xs" },
-                        children && (react_1.default.createElement(Typography_1.Typography, { className: (0, classNames_1.cnStepperVerticalStep)('Label'), color: "primary", variant: "text-m_1" }, children)),
-                        caption && (react_1.default.createElement(Typography_1.Typography, { className: (0, classNames_1.cnStepperVerticalStep)('Caption'), color: "primary", variant: "text-s" }, caption)),
-                        hint && (react_1.default.createElement(Typography_1.Typography, { className: (0, classNames_1.cnStepperVerticalStep)('Hint'), color: "secondary", variant: "text-2xs" }, hint))),
-                    action && (react_1.default.createElement("div", { className: (0, classNames_1.cnStepperVerticalStep)('Action') }, action))))),
+                react_1.default.createElement(Stack_1.Stack, { direction: "column", className: (0, classNames_1.cnStepperVerticalStep)('Description', { custom: custom }) },
+                    react_1.default.createElement(components_1.StepperVerticalStepContent, { step: step, custom: custom, action: action, caption: caption, hasSubcontent: hasSubcontent, subcontent: subcontent, hint: hint }, children)))),
         hasSubsteps && (react_1.default.createElement(StepperVerticalStepRootContext_1.StepperVerticalStepRootContext.Provider, { value: memoizedRootContext },
             react_1.default.createElement(Collapse_1.Collapse, { className: (0, classNames_1.cnStepperVerticalStep)('Substeps'), expanded: step.isSubStepsOpen }, substeps)))));
 });

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/StepperVerticalStepContext.js

@@ -8,11 +8,16 @@ exports.StepperVerticalStepContextDefaultValue = {
     variant: constants_1.STEPPER_VERTICAL_STEP_DEFAULT_VARIANT,
     current: false,
     hasSubsteps: false,
+    hasSubcontent: false,
     step: {
         id: '',
         setIsSubStepsOpen: function () { },
+        setIsSubcontentOpen: function () { },
+        toggleSubcontent: function () { },
+        toggleSubsteps: function () { },
         ref: { current: null },
         isSubStepsOpen: false,
+        isSubcontentOpen: false,
         root: null,
         substeps: {},
         unregisterSubstep: function () { },

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/components/StepperVerticalStepContent/StepperVerticalStepContent.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepperVerticalStepContent = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var Collapse_1 = require("../../../../../Collapse");
+var Stack_1 = require("../../../../../Stack");
+var Typography_1 = require("../../../../../Typography");
+var classNames_1 = require("../../classNames");
+var StepperVerticalStepContent = function (_a) {
+    var caption = _a.caption, hint = _a.hint, children = _a.children, custom = _a.custom, step = _a.step, hasSubcontent = _a.hasSubcontent, subcontent = _a.subcontent, action = _a.action;
+    if (custom) {
+        return children;
+    }
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement(Stack_1.Stack, { className: (0, classNames_1.cnStepperVerticalStep)('Info'), direction: "column", gap: "xs" },
+            children && (react_1.default.createElement(Typography_1.Typography, { className: (0, classNames_1.cnStepperVerticalStep)('Label'), color: "primary", variant: "text-m_1" }, children)),
+            caption && (react_1.default.createElement(Typography_1.Typography, { className: (0, classNames_1.cnStepperVerticalStep)('Caption'), color: "primary", variant: "text-s" }, caption)),
+            hint && (react_1.default.createElement(Typography_1.Typography, { className: (0, classNames_1.cnStepperVerticalStep)('Hint'), color: "secondary", variant: "text-2xs" }, hint))),
+        action && (react_1.default.createElement("div", { className: (0, classNames_1.cnStepperVerticalStep)('Action') }, action)),
+        hasSubcontent && (react_1.default.createElement(Collapse_1.Collapse, { expanded: step.isSubcontentOpen, innerProps: {
+                className: (0, classNames_1.cnStepperVerticalStep)('SubcontentInner'),
+            } }, subcontent))));
+};
+exports.StepperVerticalStepContent = StepperVerticalStepContent;

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/components/StepperVerticalStepContent/index.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/components/StepperVerticalStepContent/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/components/index.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/constants.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.STEPPER_VERTICAL_STEP_DEFAULT_TAG = exports.STEPPER_VERTICAL_STEP_DEFAULT_CURRENT = exports.STEPPER_VERTICAL_STEP_DEFAULT_VARIANT = void 0;
+exports.STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM = exports.STEPPER_VERTICAL_STEP_DEFAULT_TAG = exports.STEPPER_VERTICAL_STEP_DEFAULT_CURRENT = exports.STEPPER_VERTICAL_STEP_DEFAULT_VARIANT = void 0;
 exports.STEPPER_VERTICAL_STEP_DEFAULT_VARIANT = 'awaiting';
 exports.STEPPER_VERTICAL_STEP_DEFAULT_CURRENT = false;
 exports.STEPPER_VERTICAL_STEP_DEFAULT_TAG = 'div';
+exports.STEPPER_VERTICAL_STEP_DEFAULT_CUSTOM = false;

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/entities/index.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStep/entities/onOpenChange.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/StepperVerticalStepSubcontentButton.css

@@ -0,0 +1,10 @@
+.StepperVerticalStepSubcontentButton_open {
+    --stepper-vertical-step-subcontent-button-icon-rotate: 0deg;
+  }
+  .StepperVerticalStepSubcontentButton_closed {
+    --stepper-vertical-step-subcontent-button-icon-rotate: 180deg;
+  }
+  .StepperVerticalStepSubcontentButton-Icon {
+    transform: rotate(var(--stepper-vertical-step-subcontent-button-icon-rotate));
+    transition: var(--transition-default) transform;
+  }

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/StepperVerticalStepSubcontentButton.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StepperVerticalStepSubcontentButton = exports.cnStepperVerticalStepSubcontentButton = void 0;
+var tslib_1 = require("tslib");
+var react_1 = tslib_1.__importDefault(require("react"));
+var icons_1 = require("@ozen-ui/icons");
+var useThemeProps_1 = require("../../../../hooks/useThemeProps");
+var utils_1 = require("../../../../utils");
+var StepperVerticalStep_1 = require("../StepperVerticalStep");
+var StepperVerticalStepButton_1 = require("../StepperVerticalStepButton");
+var constants_1 = require("./constants");
+exports.cnStepperVerticalStepSubcontentButton = (0, utils_1.cn)('StepperVerticalStepSubcontentButton');
+exports.StepperVerticalStepSubcontentButton = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var props = (0, useThemeProps_1.useThemeProps)({
+        name: 'StepperVerticalStepSubcontentButton',
+        props: inProps,
+    });
+    var _a = props.color, color = _a === void 0 ? constants_1.STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_COLOR : _a, className = props.className, _b = props.as, as = _b === void 0 ? constants_1.STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_TAG : _b, onClick = props.onClick, text = props.text, other = tslib_1.__rest(props, ["color", "className", "as", "onClick", "text"]);
+    var _c = (0, StepperVerticalStep_1.useStepperVerticalStepContext)(), hasSubcontent = _c.hasSubcontent, step = _c.step;
+    if (!hasSubcontent) {
+        return null;
+    }
+    return (react_1.default.createElement(StepperVerticalStepButton_1.StepperVerticalStepButton, tslib_1.__assign({}, other, { as: as, ref: ref, color: color, iconRight: react_1.default.createElement(icons_1.ChevronUpIcon, { className: (0, exports.cnStepperVerticalStepSubcontentButton)('Icon') }), className: (0, exports.cnStepperVerticalStepSubcontentButton)({ open: step.isSubcontentOpen, closed: !step.isSubcontentOpen }, [className]), onClick: function (event) {
+            step.toggleSubcontent();
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        } }), (0, utils_1.renderContent)({
+        content: text,
+        props: { isOpen: step.isSubcontentOpen },
+    })));
+});
+exports.StepperVerticalStepSubcontentButton.displayName =
+    'StepperVerticalStepSubcontentButton';

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/constants.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_TAG = exports.STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_COLOR = void 0;
+var StepperVerticalStepButton_1 = require("../StepperVerticalStepButton");
+exports.STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_COLOR = StepperVerticalStepButton_1.STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_COLOR;
+exports.STEPPER_VERTICAL_STEP_SUBCONTENT_BUTTON_DEFAULT_TAG = StepperVerticalStepButton_1.STEPPER_VERTICAL_STEP_BUTTON_DEFAULT_TAG;

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/entities/content.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/entities/index.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/index.js

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

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStepSubcontentButton/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/__inner__/cjs/components/StepperVertical/modules/StepperVerticalStepSubstepButton/StepperVerticalStepSubstepButton.js

@@ -21,11 +21,12 @@ exports.StepperVerticalStepSubstepButton = (0, utils_1.polymorphicComponentWithR
         return null;
     }
     return (react_1.default.createElement(StepperVerticalStepButton_1.StepperVerticalStepButton, tslib_1.__assign({}, other, { as: as, ref: ref, color: color, iconRight: react_1.default.createElement(icons_1.ChevronUpIcon, { className: (0, exports.cnStepperVerticalStepSubstepButton)('Icon') }), className: (0, exports.cnStepperVerticalStepSubstepButton)({ open: step.isSubStepsOpen, closed: !step.isSubStepsOpen }, [className]), onClick: function (event) {
-            step.setIsSubStepsOpen(function (prevState) { return !prevState; });
+            step.toggleSubsteps();
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
         } }), (0, utils_1.renderContent)({
         content: text,
         props: { isOpen: step.isSubStepsOpen },
     })));
 });
-exports.StepperVerticalStepSubstepButton.displayName = 'StepperVerticalStepButton';
+exports.StepperVerticalStepSubstepButton.displayName =
+    'StepperVerticalStepSubstepButton';

package/__inner__/cjs/components/StepperVertical/modules/index.js

@@ -5,4 +5,5 @@ tslib_1.__exportStar(require("./StepperVerticalIconIndicator"), exports);
 tslib_1.__exportStar(require("./StepperVerticalIndicator"), exports);
 tslib_1.__exportStar(require("./StepperVerticalStep"), exports);
 tslib_1.__exportStar(require("./StepperVerticalStepButton"), exports);
+tslib_1.__exportStar(require("./StepperVerticalStepSubcontentButton"), exports);
 tslib_1.__exportStar(require("./StepperVerticalStepSubstepButton"), exports);

package/__inner__/cjs/locale/locale.js

@@ -110,6 +110,12 @@ exports.ruRU = {
         SidebarUserOnline: {
             label: 'Онлайн',
         },
+        SidebarSizer: {
+            'aria-label': function (_a) {
+                var collapsed = _a.collapsed;
+                return collapsed ? 'Развернуть боковую панель' : 'Свернуть боковую панель';
+            },
+        },
     },
 };
 exports.kkKZ = {
@@ -220,6 +226,12 @@ exports.kkKZ = {
         SidebarUserOnline: {
             label: 'Онлайн',
         },
+        SidebarSizer: {
+            'aria-label': function (_a) {
+                var collapsed = _a.collapsed;
+                return collapsed ? 'Бүйірлік панельді кеңейту' : 'Бүйірлік панельді жинау';
+            },
+        },
     },
 };
 exports.enUS = {
@@ -331,5 +343,11 @@ exports.enUS = {
         SidebarUserOnline: {
             label: 'Online',
         },
+        SidebarSizer: {
+            'aria-label': function (_a) {
+                var collapsed = _a.collapsed;
+                return collapsed ? 'Expand sidebar' : 'Collapse sidebar';
+            },
+        },
     },
 };

package/__inner__/esm/components/AutocompleteBase/AutocompleteBase.js

@@ -13,7 +13,7 @@ export var AutocompleteBase = function (inProps) {
         props: inProps,
         name: 'AutocompleteBase',
     });
-    var dropdown = props.dropdown, input = props.input, inputValueProp = props.inputValue, _a = props.multiple, multiple = _a === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_ERROR : _g, onInputChange = props.onInputChange;
+    var dropdown = props.dropdown, input = props.input, inputValueProp = props.inputValue, _a = props.multiple, multiple = _a === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? AUTOCOMPLETE_BASE_DEFAULT_ERROR : _g, onInputChange = props.onInputChange, onOpenChange = props.onOpenChange;
     var anchorRef = useRef(null);
     var inputRef = useRef(null);
     var dropdownControl = useAutocompleteBaseDropdown({
@@ -21,6 +21,7 @@ export var AutocompleteBase = function (inProps) {
         defaultOpen: defaultOpen,
         onOpen: onOpen,
         onClose: onClose,
+        onOpenChange: onOpenChange,
     });
     var searchControl = useAutocompleteBaseSearch(searchFunctionProp);
     var prepareOption = function (option) { return (__assign(__assign({}, prepareOptionProp(option)), { raw: option })); };
@@ -55,6 +56,7 @@ export var AutocompleteBase = function (inProps) {
         filteredOptions: filteredOptions,
         valueControl: valueControl,
         multiple: multiple,
+        prepareOption: prepareOption,
     });
     var inputEventsControl = useAutocompleteBaseInputEvents({
         multiple: multiple,

package/__inner__/esm/components/AutocompleteBase/entities/open/index.js

@@ -1,2 +1,3 @@
 export * from './onClose';
 export * from './onOpen';
+export * from './onOpenChange';

package/__inner__/esm/components/AutocompleteBase/entities/open/onOpenChange.js

@@ -0,0 +1 @@
+export {};

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseDropdown/useAutocompleteBaseDropdown.js

@@ -1,7 +1,7 @@
 import { __read } from "tslib";
 import { useControlled } from '../../../../hooks/useControlled';
 export var useAutocompleteBaseDropdown = function (_a) {
-    var openProp = _a.open, defaultOpen = _a.defaultOpen, onClose = _a.onClose, onOpen = _a.onOpen;
+    var openProp = _a.open, defaultOpen = _a.defaultOpen, onClose = _a.onClose, onOpen = _a.onOpen, onOpenChange = _a.onOpenChange;
     var _b = __read(useControlled({
         value: openProp,
         defaultValue: defaultOpen,
@@ -12,11 +12,13 @@ export var useAutocompleteBaseDropdown = function (_a) {
     var close = function () {
         setIsOpen(false);
         onClose === null || onClose === void 0 ? void 0 : onClose();
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(false);
     };
     /** Открытие */
     var open = function () {
         setIsOpen(true);
         onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(true);
     };
     /** Переключатель открытия и закрытия */
     var toggle = function () {

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseOptions/useAutocompleteBaseOptions.js

@@ -1,12 +1,24 @@
-import { isMultipleInternalValue } from '../../utils';
+import { isId, isInternalOption, isMultipleInternalValue } from '../../utils';
 export var useAutocompleteBaseOptions = function (_a) {
-    var options = _a.options, filteredOptions = _a.filteredOptions, valueControl = _a.valueControl, multiple = _a.multiple;
+    var options = _a.options, filteredOptions = _a.filteredOptions, valueControl = _a.valueControl, multiple = _a.multiple, prepareOption = _a.prepareOption;
     var isSelected = function (option) {
-        var _a, _b, _c;
-        if (isMultipleInternalValue(valueControl.value, multiple)) {
-            return ((_b = (_a = valueControl.value) === null || _a === void 0 ? void 0 : _a.some(function (selectedOption) { return selectedOption.id === option.id; })) !== null && _b !== void 0 ? _b : false);
+        var valueState = valueControl.value;
+        if (valueState === null || valueState === undefined) {
+            return false;
         }
-        return ((_c = valueControl.value) === null || _c === void 0 ? void 0 : _c.id) === option.id;
+        var id = (function () {
+            if (isId(option)) {
+                return option;
+            }
+            if (isInternalOption(option)) {
+                return option.id;
+            }
+            return prepareOption(option).id;
+        })();
+        if (isMultipleInternalValue(valueState, multiple)) {
+            return valueState.some(function (option) { return option.id === id; });
+        }
+        return valueState.id === id;
     };
     var hasOptions = (filteredOptions === null || filteredOptions === void 0 ? void 0 : filteredOptions.length) > 0;
     return {

package/__inner__/esm/components/AutocompleteBase/hooks/useAutocompleteBaseValue/useAutocompleteBaseValue.js

@@ -1,4 +1,5 @@
 import { __assign, __read, __spreadArray } from "tslib";
+import { logger } from '@ozen-ui/logger';
 import { useControlled } from '../../../../hooks/useControlled';
 import { isArray } from '../../../../utils/array';
 import { isNotNil } from '../../../../utils/isNotNil';
@@ -28,9 +29,9 @@ export var useAutocompleteBaseValue = function (_a) {
         onChangeProp === null || onChangeProp === void 0 ? void 0 : onChangeProp(event, option, params);
     };
     var setValue = function (event, optionId, paramsProp) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e;
         var source = paramsProp.source;
-        var option = optionId === null
+        var option = optionId === null || isArray(optionId)
             ? null
             : options.find(function (option) { return option.id === optionId; });
         if (option === undefined) {
@@ -40,7 +41,19 @@ export var useAutocompleteBaseValue = function (_a) {
         var params = __assign(__assign({}, inProps), { onChange: onChange });
         if (isMultipleProps(params) &&
             isMultipleInternalValue(valueState, multiple)) {
-            if (option === null) {
+            if (isArray(optionId)) {
+                var preparedOptions_1 = [];
+                optionId.forEach(function (optionId) {
+                    var option = options.find(function (option) { return option.id === optionId; });
+                    if (!option) {
+                        logger.error("\u041D\u0435 \u0443\u0434\u0430\u043B\u043E\u0441\u044C \u043D\u0430\u0439\u0442\u0438 option \u0434\u043B\u044F \"".concat(optionId, "\""));
+                        return;
+                    }
+                    preparedOptions_1.push(option.raw);
+                });
+                (_a = params.onChange) === null || _a === void 0 ? void 0 : _a.call(params, event, preparedOptions_1, { source: source });
+            }
+            else if (option === null) {
                 onChange === null || onChange === void 0 ? void 0 : onChange(event, null, { source: source });
             }
             else {
@@ -61,13 +74,13 @@ export var useAutocompleteBaseValue = function (_a) {
                     }
                     return value_1.map(function (option) { return option.raw; });
                 })();
-                (_a = params.onChange) === null || _a === void 0 ? void 0 : _a.call(params, event, result, { source: source });
+                (_b = params.onChange) === null || _b === void 0 ? void 0 : _b.call(params, event, result, { source: source });
             }
             searchControl.deactivate();
         }
         else if (isSingleProps(params)) {
-            inputValue = (_b = option === null || option === void 0 ? void 0 : option.label) !== null && _b !== void 0 ? _b : '';
-            (_c = params.onChange) === null || _c === void 0 ? void 0 : _c.call(params, event, (_d = option === null || option === void 0 ? void 0 : option.raw) !== null && _d !== void 0 ? _d : null, { source: source });
+            inputValue = (_c = option === null || option === void 0 ? void 0 : option.label) !== null && _c !== void 0 ? _c : '';
+            (_d = params.onChange) === null || _d === void 0 ? void 0 : _d.call(params, event, (_e = option === null || option === void 0 ? void 0 : option.raw) !== null && _e !== void 0 ? _e : null, { source: source });
             if (option) {
                 searchControl.deactivate();
             }

package/__inner__/esm/components/AutocompleteBase/modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.js

@@ -12,7 +12,7 @@ import { useAutocompleteBaseContext } from '../../AutocompleteBaseContext';
 var cnAutocompleteBaseDropdown = cn('AutocompleteBaseDropdown');
 export var AutocompleteBaseDropdown = polymorphicComponentWithRef(function (_a, ref) {
     var children = _a.children, _b = _a.strategy, strategy = _b === void 0 ? 'absolute' : _b, _c = _a.offset, offset = _c === void 0 ? [0, 4] : _c, _d = _a.placement, placement = _d === void 0 ? 'bottom-start' : _d, _e = _a.as, as = _e === void 0 ? Paper : _e, className = _a.className, onExited = _a.onExited, popoverProps = __rest(_a, ["children", "strategy", "offset", "placement", "as", "className", "onExited"]);
-    var _f = useAutocompleteBaseContext(), size = _f.size, dropdownControl = _f.dropdownControl, searchControl = _f.searchControl, anchorRef = _f.anchorRef, inputRef = _f.inputRef;
+    var _f = useAutocompleteBaseContext(), size = _f.size, dropdownControl = _f.dropdownControl, searchControl = _f.searchControl, anchorRef = _f.anchorRef;
     var radius = getPaperSizeToFormElement(size);
     var updateStored = useStoredValue(null);
     var resizeObserver = useCreateResizeObserver(function () {
@@ -20,11 +20,11 @@ export var AutocompleteBaseDropdown = polymorphicComponentWithRef(function (_a,
         (_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
     });
     useEffect(function () {
-        var input = inputRef.current;
+        var input = anchorRef.current;
         if (input) {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(inputRef.current);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(anchorRef.current);
         }
-    }, [inputRef]);
+    }, [anchorRef]);
     return (React.createElement(Popover, __assign({ offset: offset, strategy: strategy, placement: placement, setUpdate: function (update) {
             updateStored.current = update;
         }, as: as, transitionProps: { classNames: 'AutocompleteBaseDropdown-animation' }, className: cnAutocompleteBaseDropdown('', [className]), equalAnchorWidth: true, disableReturnFocus: true, disableEnforceFocus: true, onExited: function () {

package/__inner__/esm/components/AutocompleteBase/utils/index.js

@@ -1,3 +1,5 @@
+export * from './isId';
+export * from './isInternalOption';
 export * from './isMultiple';
 export * from './isSingle';
 export * from './prepareOption';

package/__inner__/esm/components/AutocompleteBase/utils/isId.js

@@ -0,0 +1,4 @@
+import { isNumber, isString } from '../../../utils';
+export var isId = function (value) {
+    return isString(value) || isNumber(value);
+};

package/__inner__/esm/components/AutocompleteBase/utils/isInternalOption.js

@@ -0,0 +1,9 @@
+import { isPlainObject } from '../../../utils';
+export var isInternalOption = function (value) {
+    return isPlainObject(value) &&
+        Object.keys(value).length === 4 &&
+        'raw' in value &&
+        'disabled' in value &&
+        'label' in value &&
+        'id' in value;
+};

package/__inner__/esm/components/AutocompleteListCard/modules/AutocompleteListCardDropdown/AutocompleteListCardDropdown.js

@@ -15,7 +15,7 @@ export var AutocompleteListCardDropdown = polymorphicComponentWithRef(function (
         name: 'AutocompleteListCardDropdown',
     });
     var _a = props.as, as = _a === void 0 ? AUTOCOMPLETE_LIST_CARD_DEFAULT_DROPDOWN_TAG : _a, onClose = props.onClose, other = __rest(props, ["as", "onClose"]);
-    var _b = useAutocompleteListCardContext(), inputRef = _b.inputRef, size = _b.size, dropdownControl = _b.dropdownControl, multiple = _b.multiple, valueControl = _b.valueControl, disabled = _b.disabled;
+    var _b = useAutocompleteListCardContext(), anchorRef = _b.anchorRef, size = _b.size, dropdownControl = _b.dropdownControl, multiple = _b.multiple, valueControl = _b.valueControl, disabled = _b.disabled;
     var children = useAutocompleteListCardDropdownChildren();
     var updateStored = useStoredValue(null);
     var resizeObserver = useCreateResizeObserver(function () {
@@ -23,12 +23,12 @@ export var AutocompleteListCardDropdown = polymorphicComponentWithRef(function (
         (_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
     });
     useEffect(function () {
-        var input = inputRef.current;
+        var input = anchorRef.current;
         if (input) {
-            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(inputRef.current);
+            resizeObserver === null || resizeObserver === void 0 ? void 0 : resizeObserver.observe(anchorRef.current);
         }
-    }, [inputRef]);
-    return (React.createElement(DataListCard, __assign({}, other, { ref: ref, as: as, anchorRef: inputRef, size: size, open: dropdownControl.isOpen, onClose: function () {
+    }, [anchorRef]);
+    return (React.createElement(DataListCard, __assign({}, other, { ref: ref, as: as, anchorRef: anchorRef, size: size, open: dropdownControl.isOpen, onClose: function () {
             onClose === null || onClose === void 0 ? void 0 : onClose();
             dropdownControl.close();
         }, setUpdate: function (update) {

package/__inner__/esm/components/ButtonBase/index.js

@@ -1 +1,2 @@
 export * from './ButtonBase';
+export * from './constants';

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

@@ -11,7 +11,7 @@ import { DEFAULT_COLLAPSE_TIMEOUT, DEFAULT_COLLAPSED_SIZE } from './constants';
 export var cnCollapse = cn('Collapse');
 export var Collapse = forwardRef(function (inProps, ref) {
     var props = useThemeProps({ props: inProps, name: 'Collapse' });
-    var _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? DEFAULT_COLLAPSE_TIMEOUT : _b, onEnter = props.onEnter, onEntering = props.onEntering, onEntered = props.onEntered, onExit = props.onExit, onExiting = props.onExiting, onExited = props.onExited, unmountOnClosed = props.unmountOnClosed, expanded = props.expanded, appear = props.appear, children = props.children, className = props.className, style = props.style, other = __rest(props, ["collapsedSize", "timeout", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "style"]);
+    var _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? DEFAULT_COLLAPSE_TIMEOUT : _b, onEnter = props.onEnter, onEntering = props.onEntering, onEntered = props.onEntered, onExit = props.onExit, onExiting = props.onExiting, onExited = props.onExited, unmountOnClosed = props.unmountOnClosed, expanded = props.expanded, appear = props.appear, children = props.children, className = props.className, innerProps = props.innerProps, style = props.style, other = __rest(props, ["collapsedSize", "timeout", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "innerProps", "style"]);
     var rootRef = useRef(null);
     // Для высчитывания высоты Collapse
     var collapseInnerRef = useRef(null);
@@ -25,6 +25,7 @@ export var Collapse = forwardRef(function (inProps, ref) {
             ? collapsedSizeProp
             : "".concat(collapsedSizeProp, "px");
     }, [collapsedSizeProp]);
+    var innerMultiRef = useMultiRef([innerProps === null || innerProps === void 0 ? void 0 : innerProps.ref, collapseInnerRef]);
     return (React.createElement(Transition, { nodeRef: rootRef, timeout: timeout, in: expanded, unmountOnExit: unmountOnClosed, appear: appear, onEnter: function (isAppeared) { return onEnter === null || onEnter === void 0 ? void 0 : onEnter(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onEntering: function (isAppeared) { return onEntering === null || onEntering === void 0 ? void 0 : onEntering(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onEntered: function (isAppeared) { return onEntered === null || onEntered === void 0 ? void 0 : onEntered(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current, isAppeared); }, onExit: function () { return onExit === null || onExit === void 0 ? void 0 : onExit(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); }, onExiting: function () { return onExiting === null || onExiting === void 0 ? void 0 : onExiting(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); }, onExited: function () { return onExited === null || onExited === void 0 ? void 0 : onExited(rootRef === null || rootRef === void 0 ? void 0 : rootRef.current); } }, function (state) {
         var _a, _b;
         var transitionStyles = {
@@ -39,7 +40,7 @@ export var Collapse = forwardRef(function (inProps, ref) {
             exited: __assign({}, (collapsedSize === '0px' && { visibility: 'hidden' })),
         };
         return (React.createElement("div", __assign({ className: cnCollapse({ animation: state }, [className]), style: __assign(__assign({ height: collapsedSize, transitionDuration: "".concat(timeout, "ms") }, transitionStyles[state]), style) }, other, { ref: collapseRef }),
-            React.createElement("div", { ref: collapseInnerRef, className: cnCollapse('Inner') }, children)));
+            React.createElement("div", __assign({}, innerProps, { ref: innerMultiRef, className: cnCollapse('Inner', [innerProps === null || innerProps === void 0 ? void 0 : innerProps.className]) }), children)));
     }));
 });
 Collapse.displayName = 'Collapse';

package/__inner__/esm/components/Sidebar/Sidebar.css

@@ -27,9 +27,29 @@
     border-radius: var(--border-radius-l);
   }
 
+  .Sidebar-SizerWrapper {
+    position: absolute;
+    inset-block-start: 0;
+    inset-inline-end: calc(var(--sidebar-padding-inline) * -1);
+    inline-size: calc(var(--sidebar-padding-inline) * 2);
+    block-size: 100%;
+    z-index: 1;
+  }
+
+  .Sidebar-SizerWrapper:hover .Sidebar-Sizer,
+  .Sidebar-SizerWrapper:focus-within .Sidebar-Sizer {
+    opacity: 1;
+    pointer-events: auto;
+    transform: translate(0, -50%) scale(1);
+  }
+
   .Sidebar-Sizer {
     position: absolute;
-    transform: translate(0, -50%);
+    transform: translate(0, -50%) scale(0.7);
     inset-block-start: 50%;
-    inset-inline-end: calc(var(--sidebar-padding-inline) * -1);
+    inset-inline-end: 0;
+    opacity: 0;
+    pointer-events: none;
+    transition: var(--transition-default);
+    transition-property: transform, opacity;
   }