@ozen-ui/kit 0.83.2 → 0.84.0

package/__inner__/cjs/components/AutocompleteBase/AutocompleteBase.js

@@ -16,7 +16,7 @@ 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 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? utils_1.autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? constants_1.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 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_MULTIPLE : _a, valueProp = props.value, defaultValue = props.defaultValue, searchFunctionProp = props.searchFunction, optionsProp = props.options, _b = props.prepareOption, prepareOptionProp = _b === void 0 ? utils_1.autocompleteBaseDefaultPrepareOption : _b, openProp = props.open, defaultOpen = props.defaultOpen, onOpen = props.onOpen, onClose = props.onClose, _c = props.size, size = _c === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_SIZE : _c, _d = props.disabled, disabled = _d === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_DISABLED : _d, onChange = props.onChange, allowCustomValue = props.allowCustomValue, _e = props.loading, loading = _e === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_LOADING : _e, _f = props.closeOnSelect, closeOnSelect = _f === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_CLOSE_ON_SELECT : _f, _g = props.error, error = _g === void 0 ? constants_1.AUTOCOMPLETE_BASE_DEFAULT_ERROR : _g, onInputChange = props.onInputChange, onOpenChange = props.onOpenChange;
     var anchorRef = (0, react_1.useRef)(null);
     var inputRef = (0, react_1.useRef)(null);
     var dropdownControl = (0, hooks_1.useAutocompleteBaseDropdown)({
@@ -24,6 +24,7 @@ var AutocompleteBase = function (inProps) {
         defaultOpen: defaultOpen,
         onOpen: onOpen,
         onClose: onClose,
+        onOpenChange: onOpenChange,
     });
     var searchControl = (0, hooks_1.useAutocompleteBaseSearch)(searchFunctionProp);
     var prepareOption = function (option) { return (tslib_1.__assign(tslib_1.__assign({}, prepareOptionProp(option)), { raw: option })); };
@@ -58,6 +59,7 @@ var AutocompleteBase = function (inProps) {
         filteredOptions: filteredOptions,
         valueControl: valueControl,
         multiple: multiple,
+        prepareOption: prepareOption,
     });
     var inputEventsControl = (0, hooks_1.useAutocompleteBaseInputEvents)({
         multiple: multiple,

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

@@ -3,3 +3,4 @@ Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./onClose"), exports);
 tslib_1.__exportStar(require("./onOpen"), exports);
+tslib_1.__exportStar(require("./onOpenChange"), exports);

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

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

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

@@ -4,7 +4,7 @@ exports.useAutocompleteBaseDropdown = void 0;
 var tslib_1 = require("tslib");
 var useControlled_1 = require("../../../../hooks/useControlled");
 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 = tslib_1.__read((0, useControlled_1.useControlled)({
         value: openProp,
         defaultValue: defaultOpen,
@@ -15,11 +15,13 @@ 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__/cjs/components/AutocompleteBase/hooks/useAutocompleteBaseOptions/useAutocompleteBaseOptions.js

@@ -3,13 +3,25 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAutocompleteBaseOptions = void 0;
 var utils_1 = require("../../utils");
 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 ((0, utils_1.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 ((0, utils_1.isId)(option)) {
+                return option;
+            }
+            if ((0, utils_1.isInternalOption)(option)) {
+                return option.id;
+            }
+            return prepareOption(option).id;
+        })();
+        if ((0, utils_1.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__/cjs/components/AutocompleteBase/hooks/useAutocompleteBaseValue/useAutocompleteBaseValue.js

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useAutocompleteBaseValue = void 0;
 var tslib_1 = require("tslib");
+var logger_1 = require("@ozen-ui/logger");
 var useControlled_1 = require("../../../../hooks/useControlled");
 var array_1 = require("../../../../utils/array");
 var isNotNil_1 = require("../../../../utils/isNotNil");
@@ -31,9 +32,9 @@ 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 || (0, array_1.isArray)(optionId)
             ? null
             : options.find(function (option) { return option.id === optionId; });
         if (option === undefined) {
@@ -43,7 +44,19 @@ var useAutocompleteBaseValue = function (_a) {
         var params = tslib_1.__assign(tslib_1.__assign({}, inProps), { onChange: onChange });
         if ((0, utils_1.isMultipleProps)(params) &&
             (0, utils_1.isMultipleInternalValue)(valueState, multiple)) {
-            if (option === null) {
+            if ((0, array_1.isArray)(optionId)) {
+                var preparedOptions_1 = [];
+                optionId.forEach(function (optionId) {
+                    var option = options.find(function (option) { return option.id === optionId; });
+                    if (!option) {
+                        logger_1.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 {
@@ -64,13 +77,13 @@ 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 ((0, utils_1.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__/cjs/components/AutocompleteBase/modules/AutocompleteBaseDropdown/AutocompleteBaseDropdown.js

@@ -15,7 +15,7 @@ var AutocompleteBaseContext_1 = require("../../AutocompleteBaseContext");
 var cnAutocompleteBaseDropdown = (0, classname_1.cn)('AutocompleteBaseDropdown');
 exports.AutocompleteBaseDropdown = (0, polymorphicComponentWithRef_1.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_1.Paper : _e, className = _a.className, onExited = _a.onExited, popoverProps = tslib_1.__rest(_a, ["children", "strategy", "offset", "placement", "as", "className", "onExited"]);
-    var _f = (0, AutocompleteBaseContext_1.useAutocompleteBaseContext)(), size = _f.size, dropdownControl = _f.dropdownControl, searchControl = _f.searchControl, anchorRef = _f.anchorRef, inputRef = _f.inputRef;
+    var _f = (0, AutocompleteBaseContext_1.useAutocompleteBaseContext)(), size = _f.size, dropdownControl = _f.dropdownControl, searchControl = _f.searchControl, anchorRef = _f.anchorRef;
     var radius = (0, getPaperSizeToFormElement_1.getPaperSizeToFormElement)(size);
     var updateStored = (0, useStoredValue_1.useStoredValue)(null);
     var resizeObserver = (0, useCreateResizeObserver_1.useCreateResizeObserver)(function () {
@@ -23,11 +23,11 @@ exports.AutocompleteBaseDropdown = (0, polymorphicComponentWithRef_1.polymorphic
         (_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
     });
     (0, react_1.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_1.default.createElement(Popover_1.Popover, tslib_1.__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__/cjs/components/AutocompleteBase/utils/index.js

@@ -1,6 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./isId"), exports);
+tslib_1.__exportStar(require("./isInternalOption"), exports);
 tslib_1.__exportStar(require("./isMultiple"), exports);
 tslib_1.__exportStar(require("./isSingle"), exports);
 tslib_1.__exportStar(require("./prepareOption"), exports);

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

@@ -0,0 +1,8 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isId = void 0;
+var utils_1 = require("../../../utils");
+var isId = function (value) {
+    return (0, utils_1.isString)(value) || (0, utils_1.isNumber)(value);
+};
+exports.isId = isId;

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

@@ -0,0 +1,13 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.isInternalOption = void 0;
+var utils_1 = require("../../../utils");
+var isInternalOption = function (value) {
+    return (0, utils_1.isPlainObject)(value) &&
+        Object.keys(value).length === 4 &&
+        'raw' in value &&
+        'disabled' in value &&
+        'label' in value &&
+        'id' in value;
+};
+exports.isInternalOption = isInternalOption;

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

@@ -18,7 +18,7 @@ exports.AutocompleteListCardDropdown = (0, polymorphicComponentWithRef_1.polymor
         name: 'AutocompleteListCardDropdown',
     });
     var _a = props.as, as = _a === void 0 ? constants_1.AUTOCOMPLETE_LIST_CARD_DEFAULT_DROPDOWN_TAG : _a, onClose = props.onClose, other = tslib_1.__rest(props, ["as", "onClose"]);
-    var _b = (0, context_1.useAutocompleteListCardContext)(), inputRef = _b.inputRef, size = _b.size, dropdownControl = _b.dropdownControl, multiple = _b.multiple, valueControl = _b.valueControl, disabled = _b.disabled;
+    var _b = (0, context_1.useAutocompleteListCardContext)(), anchorRef = _b.anchorRef, size = _b.size, dropdownControl = _b.dropdownControl, multiple = _b.multiple, valueControl = _b.valueControl, disabled = _b.disabled;
     var children = (0, hooks_1.useAutocompleteListCardDropdownChildren)();
     var updateStored = (0, useStoredValue_1.useStoredValue)(null);
     var resizeObserver = (0, useCreateResizeObserver_1.useCreateResizeObserver)(function () {
@@ -26,12 +26,12 @@ exports.AutocompleteListCardDropdown = (0, polymorphicComponentWithRef_1.polymor
         (_a = updateStored.current) === null || _a === void 0 ? void 0 : _a.call(updateStored);
     });
     (0, react_1.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_1.default.createElement(DataListCard_1.DataListCard, tslib_1.__assign({}, other, { ref: ref, as: as, anchorRef: inputRef, size: size, open: dropdownControl.isOpen, onClose: function () {
+    }, [anchorRef]);
+    return (react_1.default.createElement(DataListCard_1.DataListCard, tslib_1.__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__/cjs/components/ButtonBase/index.js

@@ -2,3 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 var tslib_1 = require("tslib");
 tslib_1.__exportStar(require("./ButtonBase"), exports);
+tslib_1.__exportStar(require("./constants"), exports);

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

@@ -14,7 +14,7 @@ var constants_1 = require("./constants");
 exports.cnCollapse = (0, classname_1.cn)('Collapse');
 exports.Collapse = (0, react_1.forwardRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({ props: inProps, name: 'Collapse' });
-    var _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? constants_1.DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? constants_1.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 = tslib_1.__rest(props, ["collapsedSize", "timeout", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "style"]);
+    var _a = props.collapsedSize, collapsedSizeProp = _a === void 0 ? constants_1.DEFAULT_COLLAPSED_SIZE : _a, _b = props.timeout, timeout = _b === void 0 ? constants_1.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 = tslib_1.__rest(props, ["collapsedSize", "timeout", "onEnter", "onEntering", "onEntered", "onExit", "onExiting", "onExited", "unmountOnClosed", "expanded", "appear", "children", "className", "innerProps", "style"]);
     var rootRef = (0, react_1.useRef)(null);
     // Для высчитывания высоты Collapse
     var collapseInnerRef = (0, react_1.useRef)(null);
@@ -28,6 +28,7 @@ exports.Collapse = (0, react_1.forwardRef)(function (inProps, ref) {
             ? collapsedSizeProp
             : "".concat(collapsedSizeProp, "px");
     }, [collapsedSizeProp]);
+    var innerMultiRef = (0, useMultiRef_1.useMultiRef)([innerProps === null || innerProps === void 0 ? void 0 : innerProps.ref, collapseInnerRef]);
     return (react_1.default.createElement(react_transition_group_1.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 = {
@@ -42,7 +43,7 @@ exports.Collapse = (0, react_1.forwardRef)(function (inProps, ref) {
             exited: tslib_1.__assign({}, (collapsedSize === '0px' && { visibility: 'hidden' })),
         };
         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: collapseRef }),
-            react_1.default.createElement("div", { ref: collapseInnerRef, className: (0, exports.cnCollapse)('Inner') }, children)));
+            react_1.default.createElement("div", tslib_1.__assign({}, innerProps, { ref: innerMultiRef, className: (0, exports.cnCollapse)('Inner', [innerProps === null || innerProps === void 0 ? void 0 : innerProps.className]) }), children)));
     }));
 });
 exports.Collapse.displayName = 'Collapse';

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

package/__inner__/cjs/components/Sidebar/Sidebar.js

@@ -27,7 +27,7 @@ exports.Sidebar = (0, utils_1.polymorphicComponentWithRef)(function (inProps, re
         name: 'Sidebar',
         props: inProps,
     });
-    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? constants_1.SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? constants_1.SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? constants_1.SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? constants_1.SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? constants_1.SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, style = props.style, other = tslib_1.__rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "style"]);
+    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? constants_1.SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? constants_1.SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? constants_1.SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? constants_1.SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? constants_1.SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, sizerWrapperProps = props.sizerWrapperProps, style = props.style, other = tslib_1.__rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "sizerWrapperProps", "style"]);
     var memoizedContextValue = (0, react_1.useMemo)(function () { return ({ variant: variant, size: size, color: color }); }, [variant, size, color]);
     var width = constants_1.SIDEBAR_WIDTH_BY_VARIANT[size][variant];
     return (react_1.default.createElement(SidebarContext_1.SidebarContext.Provider, { value: memoizedContextValue },
@@ -35,5 +35,8 @@ exports.Sidebar = (0, utils_1.polymorphicComponentWithRef)(function (inProps, re
                 _a[constants_1.SIDEBAR_CSS_VARIABLE.WIDTH] = "".concat(width, "px"),
                 _a))), className: (0, exports.cnSidebar)({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
             children,
-            sizer && react_1.default.createElement("div", { className: (0, exports.cnSidebar)('Sizer') }, sizer))));
+            sizer && (react_1.default.createElement("div", tslib_1.__assign({}, sizerWrapperProps, { className: (0, exports.cnSidebar)('SizerWrapper', [
+                    sizerWrapperProps === null || sizerWrapperProps === void 0 ? void 0 : sizerWrapperProps.className,
+                ]) }),
+                react_1.default.createElement("div", { className: (0, exports.cnSidebar)('Sizer') }, sizer))))));
 });

package/__inner__/cjs/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.css

@@ -1,6 +1,7 @@
 /* stylelint-disable */
 .SidebarHeaderLogo {
   --sidebar-collapsible-item-gap: var(--spacing-2xs);
+  --sidebar-header-logo-padding: 0;
 }
 .SidebarHeaderLogo_color_main {
     --sidebar-header-icon-background: var(--color-background-primary);
@@ -8,6 +9,12 @@
 .SidebarHeaderLogo_color_accent {
     --sidebar-header-icon-background: var(--color-accent-primary);
   }
+.SidebarHeaderLogo_size_s {
+    --sidebar-header-logo-padding: var(--spacing-2xs);
+  }
+.SidebarHeaderLogo_size_m {
+    --sidebar-header-logo-padding: var(--spacing-xs);
+  }
 .SidebarHeaderLogo-Text {
     font: var(--typography-text-m_1-font);
     letter-spacing: var(--typography-text-m_1-letter_spacing, 0);
@@ -20,5 +27,5 @@
     color: var(--sidebar-content-secondary-color);
     border-radius: var(--border-radius-m);
     flex-shrink: 0;
-    padding: var(--spacing-2xs);
+    padding: var(--sidebar-header-logo-padding);
   }

package/__inner__/cjs/components/Sidebar/modules/SidebarHeaderLogo/SidebarHeaderLogo.js

@@ -16,7 +16,7 @@ exports.SidebarHeaderLogo = (0, utils_1.polymorphicComponentWithRef)(function (i
         name: 'SidebarHeaderLogo',
     });
     var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_HEADER_LOGO_DEFAULT_TAG : _a, className = props.className, children = props.children, icon = props.icon, other = tslib_1.__rest(props, ["as", "className", "children", "icon"]);
-    var _b = (0, SidebarContext_1.useSidebarContext)(), color = _b.color, variant = _b.variant;
-    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, fixed: react_1.default.createElement(Stack_1.Stack, { className: (0, exports.cnSidebarHeaderLogo)('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: (0, exports.cnSidebarHeaderLogo)('Text') }, ref: ref, className: (0, exports.cnSidebarHeaderLogo)({ color: color }, [className]), align: "center" }), children));
+    var _b = (0, SidebarContext_1.useSidebarContext)(), color = _b.color, variant = _b.variant, size = _b.size;
+    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, fixed: react_1.default.createElement(Stack_1.Stack, { className: (0, exports.cnSidebarHeaderLogo)('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: (0, exports.cnSidebarHeaderLogo)('Text') }, ref: ref, className: (0, exports.cnSidebarHeaderLogo)({ color: color, size: size }, [className]), align: "center" }), children));
 });
 exports.SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

package/__inner__/cjs/components/Sidebar/modules/SidebarSizer/SidebarSizer.js

@@ -15,12 +15,12 @@ exports.SidebarSizer = (0, utils_1.polymorphicComponentWithRef)(function (inProp
         props: inProps,
         name: 'SidebarSizer',
     });
-    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_SIZER_DEFAULT_TAG : _a, className = props.className, _b = props.expandedVariants, expandedVariants = _b === void 0 ? constants_1.SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS : _b, onClick = props.onClick, onChange = props.onChange, other = tslib_1.__rest(props, ["as", "className", "expandedVariants", "onClick", "onChange"]);
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_SIZER_DEFAULT_TAG : _a, className = props.className, _b = props.expandedVariants, expandedVariants = _b === void 0 ? constants_1.SIDEBAR_SIZER_DEFAULT_EXPANDED_VARIANTS : _b, onClick = props.onClick, onChange = props.onChange, ariaLabel = props["aria-label"], other = tslib_1.__rest(props, ["as", "className", "expandedVariants", "onClick", "onChange", 'aria-label']);
     var variant = (0, SidebarContext_1.useSidebarContext)().variant;
     var isExpanded = expandedVariants.includes(variant);
     return (react_1.default.createElement(IconButtonNext_1.IconButton, tslib_1.__assign({}, other, { as: as, ref: ref, size: "2xs", compressed: true, onClick: function (event) {
             onClick === null || onClick === void 0 ? void 0 : onClick(event);
             onChange === null || onChange === void 0 ? void 0 : onChange({ currentVariant: variant, collapsed: !isExpanded }, event);
-        }, className: (0, exports.cnSidebarSizer)({ expanded: isExpanded }, [className]), icon: react_1.default.createElement(icons_1.ArrowLeftIcon, { className: (0, exports.cnSidebarSizer)('Icon') }) })));
+        }, "aria-expanded": isExpanded, "aria-label": ariaLabel ? ariaLabel({ collapsed: !isExpanded }) : undefined, className: (0, exports.cnSidebarSizer)({ expanded: isExpanded }, [className]), icon: react_1.default.createElement(icons_1.ArrowLeftIcon, { className: (0, exports.cnSidebarSizer)('Icon') }) })));
 });
 exports.SidebarSizer.displayName = 'SidebarSizer';

package/__inner__/cjs/components/Sidebar/modules/SidebarUser/SidebarUser.css

@@ -1,9 +1,15 @@
-.SidebarUser-Indicator {
+.SidebarUser {
+  --sidebar-collapsible-item-gap: var(--spacing-2xs);
+}
+
+  .SidebarUser-Indicator {
     --indicator-border-color: var(--sidebar-background-color)
   }
+
   .SidebarUser-Name {
     color: var(--sidebar-content-primary-color);
   }
+
   .SidebarUser-Content {
     display: flex;
     flex-direction: column;
@@ -11,6 +17,7 @@
     flex-shrink: 0;
     white-space: nowrap;
   }
+
   .SidebarUser-Content_hasStatus {
     display: flex;
     flex-direction: column;

package/__inner__/cjs/components/Sidebar/modules/SidebarUser/SidebarUser.js

@@ -18,10 +18,10 @@ exports.SidebarUser = (0, utils_1.polymorphicComponentWithRef)(function (inProps
         name: 'SidebarUser',
     });
     var _b = props.as, as = _b === void 0 ? constants_1.SIDEBAR_USER_DEFAULT_TAG : _b, className = props.className, avatarProps = props.avatarProps, name = props.name, online = props.online, status = props.status, other = tslib_1.__rest(props, ["as", "className", "avatarProps", "name", "online", "status"]);
-    var variant = (0, SidebarContext_1.useSidebarContext)().variant;
+    var _c = (0, SidebarContext_1.useSidebarContext)(), variant = _c.variant, size = _c.size;
     var hasStatus = !!status;
     var isCollapsed = variant !== 'full';
-    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { ref: ref, as: as, className: (0, exports.cnSidebarUser)('', [className]), fixed: react_1.default.createElement(Avatar_1.Avatar, tslib_1.__assign({}, avatarProps, { online: (0, utils_1.isFunction)(online) ? online({ collapsed: isCollapsed }) : online, name: (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.name) !== null && _a !== void 0 ? _a : name, size: "xs", indicatorProps: { className: (0, exports.cnSidebarUser)('Indicator') }, className: (0, exports.cnSidebarUser)('Avatar', [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className]), colorScheme: {
+    return (react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { ref: ref, as: as, className: (0, exports.cnSidebarUser)('', [className]), fixed: react_1.default.createElement(Avatar_1.Avatar, tslib_1.__assign({}, avatarProps, { online: (0, utils_1.isFunction)(online) ? online({ collapsed: isCollapsed }) : online, name: (_a = avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.name) !== null && _a !== void 0 ? _a : name, size: constants_1.SIDEBAR_USER_SIZE_TO_AVATAR[size], indicatorProps: { className: (0, exports.cnSidebarUser)('Indicator') }, className: (0, exports.cnSidebarUser)('Avatar', [avatarProps === null || avatarProps === void 0 ? void 0 : avatarProps.className]), colorScheme: {
                 text: 'content-primary',
                 background: 'background-tertiary',
             } })), collapsed: isCollapsed, classNames: {

package/__inner__/cjs/components/Sidebar/modules/SidebarUser/constants.js

@@ -1,4 +1,8 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SIDEBAR_USER_DEFAULT_TAG = void 0;
+exports.SIDEBAR_USER_SIZE_TO_AVATAR = exports.SIDEBAR_USER_DEFAULT_TAG = void 0;
 exports.SIDEBAR_USER_DEFAULT_TAG = 'div';
+exports.SIDEBAR_USER_SIZE_TO_AVATAR = {
+    s: 'xs',
+    m: 's',
+};

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

@@ -7,6 +7,7 @@ require("./modules/StepperVerticalIconIndicator/StepperVerticalIconIndicator.css
 require("./modules/StepperVerticalIndicator/StepperVerticalIndicator.css");
 require("./modules/StepperVerticalStep/StepperVerticalStep.css");
 require("./modules/StepperVerticalStepSubstepButton/StepperVerticalStepSubstepButton.css");
+require("./modules/StepperVerticalStepSubcontentButton/StepperVerticalStepSubcontentButton.css");
 var react_1 = tslib_1.__importStar(require("react"));
 var useMultiRef_1 = require("../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../hooks/useThemeProps");

package/__inner__/cjs/components/StepperVertical/hooks/useStepperVerticalCreateStep/useStepperVerticalCreateStep.js

@@ -3,12 +3,42 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useStepperVerticalCreateStep = void 0;
 var tslib_1 = require("tslib");
 var react_1 = require("react");
+var useControlled_1 = require("../../../../hooks/useControlled");
 var useStoredValue_1 = require("../../../../hooks/useStoredValue");
 var useUniqueId_1 = require("../../../../hooks/useUniqueId");
 var StepperVerticalContext_1 = require("../../StepperVerticalContext");
-var useStepperVerticalCreateStep = function (root) {
+var useStepperVerticalCreateStep = function (params, root) {
     var id = (0, useUniqueId_1.useUniqueId)();
-    var _a = tslib_1.__read((0, react_1.useState)(false), 2), isSubStepsOpen = _a[0], setIsSubStepsOpen = _a[1];
+    var _a = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: params.openSubsteps,
+        defaultValue: false,
+        name: 'StepperVerticalStep',
+        state: 'openSubsteps',
+    }), 2), isSubstepsOpenState = _a[0], setIsSubstepsOpenState = _a[1];
+    var _b = tslib_1.__read((0, useControlled_1.useControlled)({
+        value: params.openSubcontent,
+        defaultValue: false,
+        name: 'StepperVerticalStep',
+        state: 'openSubcontent',
+    }), 2), isSubcontentOpenState = _b[0], setIsSubcontentOpenState = _b[1];
+    var isSubStepsOpen = !!isSubstepsOpenState;
+    var isSubcontentOpen = !!isSubcontentOpenState;
+    var setIsSubStepsOpen = (0, react_1.useCallback)(function (isOpen) {
+        var _a;
+        setIsSubstepsOpenState(isOpen);
+        (_a = params.onOpenSubstepsChange) === null || _a === void 0 ? void 0 : _a.call(params, isOpen);
+    }, [setIsSubstepsOpenState, params.onOpenSubstepsChange]);
+    var toggleSubsteps = (0, react_1.useCallback)(function () {
+        setIsSubStepsOpen(!isSubStepsOpen);
+    }, [setIsSubStepsOpen, isSubStepsOpen]);
+    var setIsSubcontentOpen = (0, react_1.useCallback)(function (isOpen) {
+        var _a;
+        setIsSubcontentOpenState(isOpen);
+        (_a = params.onOpenSubcontentChange) === null || _a === void 0 ? void 0 : _a.call(params, isOpen);
+    }, [setIsSubcontentOpenState, params.onOpenSubcontentChange]);
+    var toggleSubcontent = (0, react_1.useCallback)(function () {
+        setIsSubcontentOpen(!isSubcontentOpen);
+    }, [setIsSubcontentOpen, isSubcontentOpen]);
     var stepperVerticalContext = (0, StepperVerticalContext_1.useStepperVerticalContext)();
     var ref = (0, react_1.useRef)(null);
     var step = (0, useStoredValue_1.useStoredValue)(function () { return ({
@@ -20,6 +50,10 @@ var useStepperVerticalCreateStep = function (root) {
         unregisterSubstep: function () { },
         registerSubstep: function () { },
         substeps: {},
+        isSubcontentOpen: isSubcontentOpen,
+        setIsSubcontentOpen: setIsSubcontentOpen,
+        toggleSubcontent: toggleSubcontent,
+        toggleSubsteps: toggleSubsteps,
     }); });
     var registerSubstep = (0, react_1.useCallback)(function (substep) {
         step.current.substeps[substep.id] = substep;
@@ -28,6 +62,11 @@ var useStepperVerticalCreateStep = function (root) {
         delete step.current.substeps[substep.id];
     }, []);
     step.current.isSubStepsOpen = isSubStepsOpen;
+    step.current.isSubcontentOpen = isSubcontentOpen;
+    step.current.setIsSubStepsOpen = setIsSubStepsOpen;
+    step.current.setIsSubcontentOpen = setIsSubcontentOpen;
+    step.current.toggleSubcontent = toggleSubcontent;
+    step.current.toggleSubsteps = toggleSubsteps;
     step.current.root = root !== null && root !== void 0 ? root : null;
     step.current.registerSubstep = registerSubstep;
     step.current.unregisterSubstep = unregisterSubstep;

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

@@ -19,6 +19,10 @@
     box-sizing: border-box;
   }
 
+  .StepperVerticalStep-SubcontentInner {
+    margin-block-start: var(--spacing-2xs);
+  }
+
   .StepperVerticalStep-Action {
     margin-block-start: var(--spacing-2xs);
   }
@@ -27,6 +31,10 @@
     padding-block: var(--spacing-xs);
   }
 
+  .StepperVerticalStep-Description_custom {
+    flex: 1;
+  }
+
   .StepperVerticalStep-Substeps .Collapse-Inner {
       display: flex;
       flex-direction: column;