@ozen-ui/kit 0.83.0 → 0.83.2

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

@@ -23,28 +23,6 @@
     --sidebar-content-secondary-color: var(--color-content-accent-secondary);
   }
 
-  .Sidebar_size_s {
-    --sidebar-mini-width: 64px;
-    --sidebar-full-width: 256px;
-  }
-
-  .Sidebar_size_m {
-    --sidebar-mini-width: 72px;
-    --sidebar-full-width: 280px;
-  }
-
-  .Sidebar_variant_compact {
-    --sidebar-width: 108px;
-  }
-
-  .Sidebar_variant_mini {
-    --sidebar-width: var(--sidebar-mini-width);
-  }
-
-  .Sidebar_variant_full {
-    --sidebar-width: var(--sidebar-full-width);
-  }
-
   .Sidebar_rounded {
     border-radius: var(--border-radius-l);
   }

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

@@ -22,14 +22,18 @@ var constants_1 = require("./constants");
 var SidebarContext_1 = require("./SidebarContext");
 exports.cnSidebar = (0, utils_1.cn)('Sidebar');
 exports.Sidebar = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
+    var _a;
     var props = (0, useThemeProps_1.useThemeProps)({
         name: 'Sidebar',
         props: inProps,
     });
-    var children = props.children, className = props.className, _a = props.as, Tag = _a === void 0 ? constants_1.SIDEBAR_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? constants_1.SIDEBAR_DEFAULT_VARIANT : _b, _c = props.rounded, rounded = _c === void 0 ? constants_1.SIDEBAR_DEFAULT_ROUNDED : _c, _d = props.size, size = _d === void 0 ? constants_1.SIDEBAR_DEFAULT_SIZE : _d, _e = props.color, color = _e === void 0 ? constants_1.SIDEBAR_DEFAULT_COLOR : _e, sizer = props.sizer, other = tslib_1.__rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer"]);
+    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 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 },
-        react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, className: (0, exports.cnSidebar)({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
+        react_1.default.createElement(Tag, tslib_1.__assign({}, other, { ref: ref, style: tslib_1.__assign(tslib_1.__assign({}, style), (0, utils_1.generateCSSVariables)((_a = {},
+                _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))));
 });

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

@@ -1,8 +1,23 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SIDEBAR_DEFAULT_COLOR = exports.SIDEBAR_DEFAULT_SIZE = exports.SIDEBAR_DEFAULT_ROUNDED = exports.SIDEBAR_DEFAULT_VARIANT = exports.SIDEBAR_DEFAULT_TAG = void 0;
+exports.SIDEBAR_CSS_VARIABLE = exports.SIDEBAR_WIDTH_BY_VARIANT = exports.SIDEBAR_DEFAULT_COLOR = exports.SIDEBAR_DEFAULT_SIZE = exports.SIDEBAR_DEFAULT_ROUNDED = exports.SIDEBAR_DEFAULT_VARIANT = exports.SIDEBAR_DEFAULT_TAG = void 0;
 exports.SIDEBAR_DEFAULT_TAG = 'aside';
 exports.SIDEBAR_DEFAULT_VARIANT = 'mini';
 exports.SIDEBAR_DEFAULT_ROUNDED = true;
 exports.SIDEBAR_DEFAULT_SIZE = 'm';
 exports.SIDEBAR_DEFAULT_COLOR = 'main';
+exports.SIDEBAR_WIDTH_BY_VARIANT = {
+    s: {
+        mini: 64,
+        compact: 108,
+        full: 256,
+    },
+    m: {
+        mini: 72,
+        compact: 108,
+        full: 280,
+    },
+};
+exports.SIDEBAR_CSS_VARIABLE = {
+    WIDTH: 'sidebar-width',
+};

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

@@ -24,7 +24,7 @@
     flex-shrink: 0;
   }
 
-  .SidebarCollapsibleItem-MarginAuto {
+  .SidebarCollapsibleItem_center {
     margin-inline: auto;
   }
 

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SidebarCollapsibleItem = exports.marginAutoClassName = exports.cnSidebarCollapsibleItem = void 0;
+exports.SidebarCollapsibleItem = exports.cnSidebarCollapsibleItem = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importStar(require("react"));
 var react_transition_group_1 = require("react-transition-group");
@@ -8,68 +8,36 @@ var useMultiRef_1 = require("../../../../hooks/useMultiRef");
 var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var utils_1 = require("../../../../utils");
 var Stack_1 = require("../../../Stack");
-var hooks_1 = require("../../hooks");
 var SidebarContext_1 = require("../../SidebarContext");
 var constants_1 = require("./constants");
+var hooks_1 = require("./hooks");
 exports.cnSidebarCollapsibleItem = (0, utils_1.cn)('SidebarCollapsibleItem');
-exports.marginAutoClassName = (0, exports.cnSidebarCollapsibleItem)('MarginAuto');
 exports.SidebarCollapsibleItem = (0, utils_1.polymorphicComponentWithRef)(function (inProps, ref) {
     var props = (0, useThemeProps_1.useThemeProps)({
         props: inProps,
         name: 'SidebarCollapsibleItem',
     });
-    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, other = tslib_1.__rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed"]);
+    var _a = props.as, as = _a === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? constants_1.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, other = tslib_1.__rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter"]);
     var variant = (0, SidebarContext_1.useSidebarContext)().variant;
-    var _d = tslib_1.__read((0, react_1.useState)(false), 2), wasAnimated = _d[0], setWasAnimated = _d[1];
+    var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
     var internalRef = (0, react_1.useRef)(null);
     var itemRef = (0, useMultiRef_1.useMultiRef)([ref, internalRef]);
-    var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
-    var runAnimationFlip = (0, hooks_1.useAnimationFlip)(internalRef);
-    var onTransitionEnd = function () {
-        if (!animated) {
-            return;
-        }
-        var node = internalRef.current;
-        if (!node) {
-            return;
-        }
-        node.style.transition = '';
-        node.style.transform = '';
-    };
-    var hasMarginAutoClass = (function () {
-        if (!isCollapsed) {
-            return false;
-        }
-        if (!animated) {
-            return true;
-        }
-        return !wasAnimated;
-    })();
+    var fixedRef = (0, react_1.useRef)(null);
     var fixedRendered = (0, utils_1.isFunction)(fixed)
         ? (0, utils_1.renderContent)({
             content: fixed,
             props: { collapsed: isCollapsed },
         })
         : fixed;
-    return (react_1.default.createElement(react_transition_group_1.Transition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 0 }, onEnter: function () {
-            if (!animated) {
-                return;
-            }
-            setWasAnimated(true);
-            runAnimationFlip(function (element) {
-                element.classList.add(exports.marginAutoClassName);
-            });
-        }, onExit: function () {
-            if (!animated) {
-                return;
-            }
-            setWasAnimated(true);
-            runAnimationFlip(function (element) {
-                element.classList.remove(exports.marginAutoClassName);
-            });
-        }, onEntered: onTransitionEnd, onExited: onTransitionEnd },
-        react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({}, other, { ref: itemRef, as: as, className: (0, exports.cnSidebarCollapsibleItem)({ collapsed: isCollapsed, animated: animated }, [className, hasMarginAutoClass ? exports.marginAutoClassName : undefined]), justify: justify }),
-            react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
+    var _e = (0, hooks_1.useSidebarCollapsibleItemAnimation)({
+        autoCenter: autoCenter,
+        ref: internalRef,
+        fixedRef: fixedRef,
+        isCollapsed: isCollapsed,
+    }), onExit = _e.onExit, onEnter = _e.onEnter, onTransitionEnd = _e.onTransitionEnd, hasMarginAutoClass = _e.hasMarginAutoClass;
+    return (react_1.default.createElement(react_transition_group_1.CSSTransition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 120 }, appear: true, onEnter: onEnter, onExit: onExit, onEntered: onTransitionEnd, onExited: onTransitionEnd },
+        react_1.default.createElement(Stack_1.Stack, tslib_1.__assign({}, other, { ref: itemRef, as: as, className: (0, exports.cnSidebarCollapsibleItem)({ collapsed: isCollapsed, animated: animated, center: hasMarginAutoClass }, [className]), justify: justify }),
+            react_1.default.createElement("div", { ref: fixedRef, className: (0, exports.cnSidebarCollapsibleItem)('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
             react_1.default.createElement("div", { className: (0, exports.cnSidebarCollapsibleItem)('Content', [classNames === null || classNames === void 0 ? void 0 : classNames.content]) }, children))));
 });
 exports.SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';

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

@@ -1,5 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY = exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG = void 0;
+exports.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER = exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY = exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG = void 0;
 exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG = 'div';
 exports.SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY = 'start';
+exports.SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER = true;

package/__inner__/cjs/components/Sidebar/{hooks → modules/SidebarCollapsibleItem/hooks}/index.js

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

package/__inner__/cjs/components/Sidebar/modules/SidebarCollapsibleItem/hooks/useSidebarCollapsibleItemAnimation.js

@@ -0,0 +1,107 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSidebarCollapsibleItemAnimation = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var useStoredValue_1 = require("../../../../../hooks/useStoredValue");
+var useThemeVariables_1 = require("../../../../../hooks/useThemeVariables");
+var constants_1 = require("../../../constants");
+var SidebarContext_1 = require("../../../SidebarContext");
+var useSidebarCollapsibleItemAnimation = function (_a) {
+    var autoCenter = _a.autoCenter, ref = _a.ref, fixedRef = _a.fixedRef, isCollapsed = _a.isCollapsed;
+    var _b = (0, SidebarContext_1.useSidebarContext)(), variant = _b.variant, size = _b.size;
+    var transition = (0, useThemeVariables_1.useThemeVariables)().transition;
+    var _c = tslib_1.__read((0, react_1.useState)(false), 2), wasRender = _c[0], setWasRender = _c[1];
+    var isFirstAnimation = (0, useStoredValue_1.useStoredValue)(true);
+    var currentWidths = constants_1.SIDEBAR_WIDTH_BY_VARIANT[size];
+    var calculateCenter = function () {
+        var _a;
+        if (!autoCenter) {
+            return null;
+        }
+        var element = ref.current;
+        if (!element) {
+            return null;
+        }
+        var parent = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!parent) {
+            return null;
+        }
+        var fixed = fixedRef.current;
+        if (!fixed) {
+            return null;
+        }
+        var fixedRect = fixed.getBoundingClientRect();
+        var panelWidth = currentWidths[variant];
+        var targetLeftCenter = parent.left + (panelWidth - fixedRect.width) / 2;
+        var dx = fixedRect.left - targetLeftCenter;
+        return Math.abs(dx);
+    };
+    var onEnter = function () {
+        if (!autoCenter) {
+            return;
+        }
+        var parent = ref.current;
+        var fixed = fixedRef.current;
+        if (!fixed || !parent) {
+            return;
+        }
+        var originalTransform = fixed.style.transform;
+        parent.style.marginInline = '0';
+        fixed.style.transition = '';
+        fixed.style.transform = '';
+        var centerX = calculateCenter();
+        if (centerX === null) {
+            return;
+        }
+        fixed.style.transform = originalTransform;
+        fixed.getBoundingClientRect();
+        if (!isFirstAnimation.current) {
+            fixed.style.transition = "".concat(transition.default, " transform");
+        }
+        fixed.style.transform = "translateX(".concat(centerX, "px)");
+        isFirstAnimation.current = false;
+    };
+    var onExit = function () {
+        if (!autoCenter) {
+            return;
+        }
+        var fixed = fixedRef.current;
+        if (!fixed) {
+            return;
+        }
+        fixed.style.transition = "".concat(transition.default, " transform");
+        fixed.style.transform = "translate(0px)";
+        isFirstAnimation.current = false;
+    };
+    var onTransitionEnd = function () {
+        var node = ref.current;
+        if (!node) {
+            return;
+        }
+        node.style.transition = '';
+        node.style.transform = '';
+    };
+    var previousIsCollapsed = (0, useStoredValue_1.useStoredValue)(isCollapsed);
+    (0, react_1.useEffect)(function () {
+        setWasRender(true);
+    }, []);
+    (0, react_1.useEffect)(function () {
+        if (!wasRender) {
+            return;
+        }
+        if (previousIsCollapsed.current === isCollapsed) {
+            onEnter();
+        }
+        previousIsCollapsed.current = isCollapsed;
+    }, [variant]);
+    var hasMarginAutoClass = isCollapsed && autoCenter && !wasRender;
+    return {
+        calculateCenter: calculateCenter,
+        onExit: onExit,
+        onEnter: onEnter,
+        onTransitionEnd: onTransitionEnd,
+        hasMarginAutoClass: hasMarginAutoClass,
+    };
+};
+exports.useSidebarCollapsibleItemAnimation = useSidebarCollapsibleItemAnimation;

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

@@ -3,7 +3,6 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.SidebarHeaderLogo = exports.cnSidebarHeaderLogo = void 0;
 var tslib_1 = require("tslib");
 var react_1 = tslib_1.__importDefault(require("react"));
-var useStoredValue_1 = require("../../../../hooks/useStoredValue");
 var useThemeProps_1 = require("../../../../hooks/useThemeProps");
 var utils_1 = require("../../../../utils");
 var Stack_1 = require("../../../Stack");
@@ -18,10 +17,6 @@ exports.SidebarHeaderLogo = (0, utils_1.polymorphicComponentWithRef)(function (i
     });
     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;
-    var previousVariant = (0, useStoredValue_1.useStoredValue)(variant);
-    var isCompact = variant === 'compact';
-    var isAnimated = previousVariant.current !== 'compact' && !isCompact;
-    previousVariant.current = 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), animated: isAnimated, collapsed: variant !== 'full', classNames: { content: (0, exports.cnSidebarHeaderLogo)('Text') }, ref: ref, className: (0, exports.cnSidebarHeaderLogo)({ color: color }, [className]), align: "center" }), children));
+    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));
 });
 exports.SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

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

@@ -54,7 +54,7 @@ exports.SidebarItem = (0, utils_1.polymorphicComponentWithRef)(function (inProps
         react_1.default.createElement(SidebarCollapsibleItem_1.SidebarCollapsibleItem, tslib_1.__assign({}, other, { as: as, onClick: function (event) {
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
                 setIsOpenSubItems(!isOpenSubitems);
-            }, collapsed: isCollapsed, className: (0, exports.cnSidebarItem)('Item'), fixed: function (props) {
+            }, collapsed: isCollapsed, className: (0, exports.cnSidebarItem)('Item'), autoCenter: false, fixed: function (props) {
                 var badge = (0, utils_1.isFunction)(badgeProp)
                     ? badgeProp({ collapsed: props.collapsed })
                     : badgeProp;

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

@@ -23,28 +23,6 @@
     --sidebar-content-secondary-color: var(--color-content-accent-secondary);
   }
 
-  .Sidebar_size_s {
-    --sidebar-mini-width: 64px;
-    --sidebar-full-width: 256px;
-  }
-
-  .Sidebar_size_m {
-    --sidebar-mini-width: 72px;
-    --sidebar-full-width: 280px;
-  }
-
-  .Sidebar_variant_compact {
-    --sidebar-width: 108px;
-  }
-
-  .Sidebar_variant_mini {
-    --sidebar-width: var(--sidebar-mini-width);
-  }
-
-  .Sidebar_variant_full {
-    --sidebar-width: var(--sidebar-full-width);
-  }
-
   .Sidebar_rounded {
     border-radius: var(--border-radius-l);
   }

package/__inner__/esm/components/Sidebar/Sidebar.js

@@ -14,19 +14,23 @@ import './modules/SidebarUser/SidebarUser.css';
 import './modules/SidebarUserMenu/SidebarUserMenu.css';
 import React, { useMemo } from 'react';
 import { useThemeProps } from '../../hooks/useThemeProps';
-import { cn, polymorphicComponentWithRef } from '../../utils';
-import { SIDEBAR_DEFAULT_COLOR, SIDEBAR_DEFAULT_ROUNDED, SIDEBAR_DEFAULT_SIZE, SIDEBAR_DEFAULT_TAG, SIDEBAR_DEFAULT_VARIANT, } from './constants';
+import { cn, generateCSSVariables, polymorphicComponentWithRef, } from '../../utils';
+import { SIDEBAR_CSS_VARIABLE, SIDEBAR_DEFAULT_COLOR, SIDEBAR_DEFAULT_ROUNDED, SIDEBAR_DEFAULT_SIZE, SIDEBAR_DEFAULT_TAG, SIDEBAR_DEFAULT_VARIANT, SIDEBAR_WIDTH_BY_VARIANT, } from './constants';
 import { SidebarContext } from './SidebarContext';
 export var cnSidebar = cn('Sidebar');
 export var Sidebar = polymorphicComponentWithRef(function (inProps, ref) {
+    var _a;
     var props = useThemeProps({
         name: 'Sidebar',
         props: inProps,
     });
-    var children = props.children, className = props.className, _a = props.as, Tag = _a === void 0 ? SIDEBAR_DEFAULT_TAG : _a, _b = props.variant, variant = _b === void 0 ? SIDEBAR_DEFAULT_VARIANT : _b, _c = props.rounded, rounded = _c === void 0 ? SIDEBAR_DEFAULT_ROUNDED : _c, _d = props.size, size = _d === void 0 ? SIDEBAR_DEFAULT_SIZE : _d, _e = props.color, color = _e === void 0 ? SIDEBAR_DEFAULT_COLOR : _e, sizer = props.sizer, other = __rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer"]);
+    var children = props.children, className = props.className, _b = props.as, Tag = _b === void 0 ? SIDEBAR_DEFAULT_TAG : _b, _c = props.variant, variant = _c === void 0 ? SIDEBAR_DEFAULT_VARIANT : _c, _d = props.rounded, rounded = _d === void 0 ? SIDEBAR_DEFAULT_ROUNDED : _d, _e = props.size, size = _e === void 0 ? SIDEBAR_DEFAULT_SIZE : _e, _f = props.color, color = _f === void 0 ? SIDEBAR_DEFAULT_COLOR : _f, sizer = props.sizer, style = props.style, other = __rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "style"]);
     var memoizedContextValue = useMemo(function () { return ({ variant: variant, size: size, color: color }); }, [variant, size, color]);
+    var width = SIDEBAR_WIDTH_BY_VARIANT[size][variant];
     return (React.createElement(SidebarContext.Provider, { value: memoizedContextValue },
-        React.createElement(Tag, __assign({}, other, { ref: ref, className: cnSidebar({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
+        React.createElement(Tag, __assign({}, other, { ref: ref, style: __assign(__assign({}, style), generateCSSVariables((_a = {},
+                _a[SIDEBAR_CSS_VARIABLE.WIDTH] = "".concat(width, "px"),
+                _a))), className: cnSidebar({ variant: variant, rounded: rounded, size: size, color: color }, [className]) }),
             children,
             sizer && React.createElement("div", { className: cnSidebar('Sizer') }, sizer))));
 });

package/__inner__/esm/components/Sidebar/constants.js

@@ -3,3 +3,18 @@ export var SIDEBAR_DEFAULT_VARIANT = 'mini';
 export var SIDEBAR_DEFAULT_ROUNDED = true;
 export var SIDEBAR_DEFAULT_SIZE = 'm';
 export var SIDEBAR_DEFAULT_COLOR = 'main';
+export var SIDEBAR_WIDTH_BY_VARIANT = {
+    s: {
+        mini: 64,
+        compact: 108,
+        full: 256,
+    },
+    m: {
+        mini: 72,
+        compact: 108,
+        full: 280,
+    },
+};
+export var SIDEBAR_CSS_VARIABLE = {
+    WIDTH: 'sidebar-width',
+};

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

@@ -24,7 +24,7 @@
     flex-shrink: 0;
   }
 
-  .SidebarCollapsibleItem-MarginAuto {
+  .SidebarCollapsibleItem_center {
     margin-inline: auto;
   }
 

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.js

@@ -1,72 +1,40 @@
-import { __assign, __read, __rest } from "tslib";
-import React, { useState, useRef } from 'react';
-import { Transition } from 'react-transition-group';
+import { __assign, __rest } from "tslib";
+import React, { useRef } from 'react';
+import { CSSTransition } from 'react-transition-group';
 import { useMultiRef } from '../../../../hooks/useMultiRef';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn, isFunction, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
 import { Stack } from '../../../Stack';
-import { useAnimationFlip } from '../../hooks';
 import { useSidebarContext } from '../../SidebarContext';
-import { SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG, SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY, } from './constants';
+import { SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG, SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY, SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER, } from './constants';
+import { useSidebarCollapsibleItemAnimation } from './hooks';
 export var cnSidebarCollapsibleItem = cn('SidebarCollapsibleItem');
-export var marginAutoClassName = cnSidebarCollapsibleItem('MarginAuto');
 export var SidebarCollapsibleItem = polymorphicComponentWithRef(function (inProps, ref) {
     var props = useThemeProps({
         props: inProps,
         name: 'SidebarCollapsibleItem',
     });
-    var _a = props.as, as = _a === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, other = __rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed"]);
+    var _a = props.as, as = _a === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG : _a, className = props.className, fixed = props.fixed, classNames = props.classNames, _b = props.justify, justify = _b === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY : _b, _c = props.animated, animated = _c === void 0 ? true : _c, children = props.children, collapsed = props.collapsed, _d = props.autoCenter, autoCenter = _d === void 0 ? SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER : _d, other = __rest(props, ["as", "className", "fixed", "classNames", "justify", "animated", "children", "collapsed", "autoCenter"]);
     var variant = useSidebarContext().variant;
-    var _d = __read(useState(false), 2), wasAnimated = _d[0], setWasAnimated = _d[1];
+    var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
     var internalRef = useRef(null);
     var itemRef = useMultiRef([ref, internalRef]);
-    var isCollapsed = collapsed !== null && collapsed !== void 0 ? collapsed : variant === 'mini';
-    var runAnimationFlip = useAnimationFlip(internalRef);
-    var onTransitionEnd = function () {
-        if (!animated) {
-            return;
-        }
-        var node = internalRef.current;
-        if (!node) {
-            return;
-        }
-        node.style.transition = '';
-        node.style.transform = '';
-    };
-    var hasMarginAutoClass = (function () {
-        if (!isCollapsed) {
-            return false;
-        }
-        if (!animated) {
-            return true;
-        }
-        return !wasAnimated;
-    })();
+    var fixedRef = useRef(null);
     var fixedRendered = isFunction(fixed)
         ? renderContent({
             content: fixed,
             props: { collapsed: isCollapsed },
         })
         : fixed;
-    return (React.createElement(Transition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 0 }, onEnter: function () {
-            if (!animated) {
-                return;
-            }
-            setWasAnimated(true);
-            runAnimationFlip(function (element) {
-                element.classList.add(marginAutoClassName);
-            });
-        }, onExit: function () {
-            if (!animated) {
-                return;
-            }
-            setWasAnimated(true);
-            runAnimationFlip(function (element) {
-                element.classList.remove(marginAutoClassName);
-            });
-        }, onEntered: onTransitionEnd, onExited: onTransitionEnd },
-        React.createElement(Stack, __assign({}, other, { ref: itemRef, as: as, className: cnSidebarCollapsibleItem({ collapsed: isCollapsed, animated: animated }, [className, hasMarginAutoClass ? marginAutoClassName : undefined]), justify: justify }),
-            React.createElement("div", { className: cnSidebarCollapsibleItem('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
+    var _e = useSidebarCollapsibleItemAnimation({
+        autoCenter: autoCenter,
+        ref: internalRef,
+        fixedRef: fixedRef,
+        isCollapsed: isCollapsed,
+    }), onExit = _e.onExit, onEnter = _e.onEnter, onTransitionEnd = _e.onTransitionEnd, hasMarginAutoClass = _e.hasMarginAutoClass;
+    return (React.createElement(CSSTransition, { nodeRef: internalRef, in: isCollapsed, timeout: { enter: 120, exit: 120 }, appear: true, onEnter: onEnter, onExit: onExit, onEntered: onTransitionEnd, onExited: onTransitionEnd },
+        React.createElement(Stack, __assign({}, other, { ref: itemRef, as: as, className: cnSidebarCollapsibleItem({ collapsed: isCollapsed, animated: animated, center: hasMarginAutoClass }, [className]), justify: justify }),
+            React.createElement("div", { ref: fixedRef, className: cnSidebarCollapsibleItem('Fixed', [classNames === null || classNames === void 0 ? void 0 : classNames.fixed]) }, fixedRendered),
             React.createElement("div", { className: cnSidebarCollapsibleItem('Content', [classNames === null || classNames === void 0 ? void 0 : classNames.content]) }, children))));
 });
 SidebarCollapsibleItem.displayName = 'SidebarCollapsibleItem';

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/constants.js

@@ -1,2 +1,3 @@
 export var SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG = 'div';
 export var SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY = 'start';
+export var SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER = true;

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/hooks/index.js

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

package/__inner__/esm/components/Sidebar/modules/SidebarCollapsibleItem/hooks/useSidebarCollapsibleItemAnimation.js

@@ -0,0 +1,103 @@
+import { __read } from "tslib";
+import { useEffect, useState } from 'react';
+import { useStoredValue } from '../../../../../hooks/useStoredValue';
+import { useThemeVariables } from '../../../../../hooks/useThemeVariables';
+import { SIDEBAR_WIDTH_BY_VARIANT } from '../../../constants';
+import { useSidebarContext } from '../../../SidebarContext';
+export var useSidebarCollapsibleItemAnimation = function (_a) {
+    var autoCenter = _a.autoCenter, ref = _a.ref, fixedRef = _a.fixedRef, isCollapsed = _a.isCollapsed;
+    var _b = useSidebarContext(), variant = _b.variant, size = _b.size;
+    var transition = useThemeVariables().transition;
+    var _c = __read(useState(false), 2), wasRender = _c[0], setWasRender = _c[1];
+    var isFirstAnimation = useStoredValue(true);
+    var currentWidths = SIDEBAR_WIDTH_BY_VARIANT[size];
+    var calculateCenter = function () {
+        var _a;
+        if (!autoCenter) {
+            return null;
+        }
+        var element = ref.current;
+        if (!element) {
+            return null;
+        }
+        var parent = (_a = element.parentElement) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+        if (!parent) {
+            return null;
+        }
+        var fixed = fixedRef.current;
+        if (!fixed) {
+            return null;
+        }
+        var fixedRect = fixed.getBoundingClientRect();
+        var panelWidth = currentWidths[variant];
+        var targetLeftCenter = parent.left + (panelWidth - fixedRect.width) / 2;
+        var dx = fixedRect.left - targetLeftCenter;
+        return Math.abs(dx);
+    };
+    var onEnter = function () {
+        if (!autoCenter) {
+            return;
+        }
+        var parent = ref.current;
+        var fixed = fixedRef.current;
+        if (!fixed || !parent) {
+            return;
+        }
+        var originalTransform = fixed.style.transform;
+        parent.style.marginInline = '0';
+        fixed.style.transition = '';
+        fixed.style.transform = '';
+        var centerX = calculateCenter();
+        if (centerX === null) {
+            return;
+        }
+        fixed.style.transform = originalTransform;
+        fixed.getBoundingClientRect();
+        if (!isFirstAnimation.current) {
+            fixed.style.transition = "".concat(transition.default, " transform");
+        }
+        fixed.style.transform = "translateX(".concat(centerX, "px)");
+        isFirstAnimation.current = false;
+    };
+    var onExit = function () {
+        if (!autoCenter) {
+            return;
+        }
+        var fixed = fixedRef.current;
+        if (!fixed) {
+            return;
+        }
+        fixed.style.transition = "".concat(transition.default, " transform");
+        fixed.style.transform = "translate(0px)";
+        isFirstAnimation.current = false;
+    };
+    var onTransitionEnd = function () {
+        var node = ref.current;
+        if (!node) {
+            return;
+        }
+        node.style.transition = '';
+        node.style.transform = '';
+    };
+    var previousIsCollapsed = useStoredValue(isCollapsed);
+    useEffect(function () {
+        setWasRender(true);
+    }, []);
+    useEffect(function () {
+        if (!wasRender) {
+            return;
+        }
+        if (previousIsCollapsed.current === isCollapsed) {
+            onEnter();
+        }
+        previousIsCollapsed.current = isCollapsed;
+    }, [variant]);
+    var hasMarginAutoClass = isCollapsed && autoCenter && !wasRender;
+    return {
+        calculateCenter: calculateCenter,
+        onExit: onExit,
+        onEnter: onEnter,
+        onTransitionEnd: onTransitionEnd,
+        hasMarginAutoClass: hasMarginAutoClass,
+    };
+};

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

@@ -1,6 +1,5 @@
 import { __assign, __rest } from "tslib";
 import React from 'react';
-import { useStoredValue } from '../../../../hooks/useStoredValue';
 import { useThemeProps } from '../../../../hooks/useThemeProps';
 import { cn, polymorphicComponentWithRef } from '../../../../utils';
 import { Stack } from '../../../Stack';
@@ -15,10 +14,6 @@ export var SidebarHeaderLogo = polymorphicComponentWithRef(function (inProps, re
     });
     var _a = props.as, as = _a === void 0 ? SIDEBAR_HEADER_LOGO_DEFAULT_TAG : _a, className = props.className, children = props.children, icon = props.icon, other = __rest(props, ["as", "className", "children", "icon"]);
     var _b = useSidebarContext(), color = _b.color, variant = _b.variant;
-    var previousVariant = useStoredValue(variant);
-    var isCompact = variant === 'compact';
-    var isAnimated = previousVariant.current !== 'compact' && !isCompact;
-    previousVariant.current = variant;
-    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), animated: isAnimated, collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color }, [className]), align: "center" }), children));
+    return (React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, fixed: React.createElement(Stack, { className: cnSidebarHeaderLogo('Icon'), justify: "center", align: "center" }, icon), collapsed: variant !== 'full', classNames: { content: cnSidebarHeaderLogo('Text') }, ref: ref, className: cnSidebarHeaderLogo({ color: color }, [className]), align: "center" }), children));
 });
 SidebarHeaderLogo.displayName = 'SidebarHeaderLogo';

package/__inner__/esm/components/Sidebar/modules/SidebarItem/SidebarItem.js

@@ -51,7 +51,7 @@ export var SidebarItem = polymorphicComponentWithRef(function (inProps, ref) {
         React.createElement(SidebarCollapsibleItem, __assign({}, other, { as: as, onClick: function (event) {
                 onClick === null || onClick === void 0 ? void 0 : onClick(event);
                 setIsOpenSubItems(!isOpenSubitems);
-            }, collapsed: isCollapsed, className: cnSidebarItem('Item'), fixed: function (props) {
+            }, collapsed: isCollapsed, className: cnSidebarItem('Item'), autoCenter: false, fixed: function (props) {
                 var badge = isFunction(badgeProp)
                     ? badgeProp({ collapsed: props.collapsed })
                     : badgeProp;

package/__inner__/types/components/Sidebar/constants.d.ts

@@ -1,5 +1,10 @@
+import type { SidebarSizeVariant, SidebarVariant } from './entities';
 export declare const SIDEBAR_DEFAULT_TAG = "aside";
 export declare const SIDEBAR_DEFAULT_VARIANT = "mini";
 export declare const SIDEBAR_DEFAULT_ROUNDED = true;
 export declare const SIDEBAR_DEFAULT_SIZE = "m";
 export declare const SIDEBAR_DEFAULT_COLOR = "main";
+export declare const SIDEBAR_WIDTH_BY_VARIANT: Readonly<Record<SidebarSizeVariant, Record<SidebarVariant, number>>>;
+export declare const SIDEBAR_CSS_VARIABLE: {
+    readonly WIDTH: "sidebar-width";
+};

package/__inner__/types/components/Sidebar/modules/SidebarCollapsibleItem/SidebarCollapsibleItem.d.ts

@@ -1,4 +1,3 @@
 import type { SidebarCollapsibleItemBaseProps } from './types';
 export declare const cnSidebarCollapsibleItem: import("@bem-react/classname").ClassNameFormatter;
-export declare const marginAutoClassName: string;
 export declare const SidebarCollapsibleItem: import("../../../../utils").PolymorphicComponentWithRef<SidebarCollapsibleItemBaseProps, "div", "as">;

package/__inner__/types/components/Sidebar/modules/SidebarCollapsibleItem/constants.d.ts

@@ -1,2 +1,3 @@
 export declare const SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG = "div";
 export declare const SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_JUSTIFY = "start";
+export declare const SIDEBAR_COLLAPSIBLE_ITEM_AUTO_CENTER = true;

package/__inner__/types/components/Sidebar/modules/SidebarCollapsibleItem/hooks/index.d.ts

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

package/__inner__/types/components/Sidebar/modules/SidebarCollapsibleItem/hooks/useSidebarCollapsibleItemAnimation.d.ts

@@ -0,0 +1,13 @@
+import type { RefObject } from 'react';
+export declare const useSidebarCollapsibleItemAnimation: ({ autoCenter, ref, fixedRef, isCollapsed, }: {
+    autoCenter: boolean;
+    ref: RefObject<HTMLDivElement>;
+    fixedRef: RefObject<HTMLDivElement>;
+    isCollapsed: boolean;
+}) => {
+    calculateCenter: () => number | null;
+    onExit: () => void;
+    onEnter: () => void;
+    onTransitionEnd: () => void;
+    hasMarginAutoClass: boolean;
+};

package/__inner__/types/components/Sidebar/modules/SidebarCollapsibleItem/types.d.ts

@@ -25,6 +25,8 @@ export type SidebarCollapsibleItemBaseProps = {
     children?: ReactNode;
     /** Флаг свернутости. При `true` скрывает `children` */
     collapsed?: boolean;
+    /** Флаг центрирования фиксированной части. При `true` центрирует фиксированную часть */
+    autoCenter?: boolean;
 } & StackBaseProps;
 export type SidebarCollapsibleItemProps<As extends ElementType = typeof SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG> = PolymorphicComponentPropsWithRef<SidebarCollapsibleItemBaseProps, As>;
 export type SidebarCollapsibleItemRef<As extends ElementType = typeof SIDEBAR_COLLAPSIBLE_ITEM_DEFAULT_TAG> = ComponentRef<As>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ozen-ui/kit",
-  "version": "0.83.0",
+  "version": "0.83.2",
   "description": "React component library",
   "files": [
     "*"
@@ -29,9 +29,9 @@
     "react-popper": "^2.3.0",
     "react-transition-group": "^4.4.5",
     "tslib": "^2.6.3",
-    "@ozen-ui/logger": "0.83.0",
-    "@ozen-ui/icons": "0.83.0",
-    "@ozen-ui/fonts": "0.83.0"
+    "@ozen-ui/fonts": "0.83.2",
+    "@ozen-ui/logger": "0.83.2",
+    "@ozen-ui/icons": "0.83.2"
   },
   "devDependencies": {
     "@types/lodash.isequal": "^4.5.0"

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

@@ -1,22 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useAnimationFlip = void 0;
-var useThemeVariables_1 = require("../../../hooks/useThemeVariables");
-var useAnimationFlip = function (ref) {
-    var transition = (0, useThemeVariables_1.useThemeVariables)().transition;
-    return function (applyLayoutChange) {
-        var node = ref.current;
-        if (!node) {
-            return;
-        }
-        var firstRect = node.getBoundingClientRect();
-        applyLayoutChange(node);
-        var lastRect = node.getBoundingClientRect();
-        var deltaX = firstRect.left - lastRect.left;
-        node.style.transform = "translateX(".concat(deltaX, "px)");
-        node.getBoundingClientRect();
-        node.style.transition = transition.default;
-        node.style.transform = 'translateX(0)';
-    };
-};
-exports.useAnimationFlip = useAnimationFlip;

package/__inner__/esm/components/Sidebar/hooks/index.js

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

package/__inner__/esm/components/Sidebar/hooks/useAnimationFlip.js

@@ -1,18 +0,0 @@
-import { useThemeVariables } from '../../../hooks/useThemeVariables';
-export var useAnimationFlip = function (ref) {
-    var transition = useThemeVariables().transition;
-    return function (applyLayoutChange) {
-        var node = ref.current;
-        if (!node) {
-            return;
-        }
-        var firstRect = node.getBoundingClientRect();
-        applyLayoutChange(node);
-        var lastRect = node.getBoundingClientRect();
-        var deltaX = firstRect.left - lastRect.left;
-        node.style.transform = "translateX(".concat(deltaX, "px)");
-        node.getBoundingClientRect();
-        node.style.transition = transition.default;
-        node.style.transform = 'translateX(0)';
-    };
-};

package/__inner__/types/components/Sidebar/hooks/index.d.ts

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

package/__inner__/types/components/Sidebar/hooks/useAnimationFlip.d.ts

@@ -1,2 +0,0 @@
-import type { RefObject } from 'react';
-export declare const useAnimationFlip: (ref: RefObject<HTMLDivElement>) => (applyLayoutChange: (node: HTMLDivElement) => void) => void;