@ozen-ui/kit/__inner__/esm/components/Sidebar/Sidebar.js

React component library

import { __assign, __rest } from "tslib";
import './Sidebar.css';
import './modules/SidebarCollapsibleItem/SidebarCollapsibleItem.css';
import './modules/SidebarContent/SidebarContent.css';
import './modules/SidebarDivider/SidebarDivider.css';
import './modules/SidebarFooter/SidebarFooter.css';
import './modules/SidebarHeader/SidebarHeader.css';
import './modules/SidebarHeaderLogo/SidebarHeaderLogo.css';
import './modules/SidebarItem/SidebarItem.css';
import './modules/SidebarList/SidebarList.css';
import './modules/SidebarSizer/SidebarSizer.css';
import './modules/SidebarSubitem/SidebarSubitem.css';
import './modules/SidebarUser/SidebarUser.css';
import './modules/SidebarUserMenu/SidebarUserMenu.css';
import React, { useMemo } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
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, _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, sizerWrapperProps = props.sizerWrapperProps, style = props.style, forceShowSizer = props.forceShowSizer, other = __rest(props, ["children", "className", "as", "variant", "rounded", "size", "color", "sizer", "sizerWrapperProps", "style", "forceShowSizer"]);
    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, 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", __assign({}, sizerWrapperProps, { className: cnSidebar('SizerWrapper', { forceShow: forceShowSizer }, [sizerWrapperProps === null || sizerWrapperProps === void 0 ? void 0 : sizerWrapperProps.className]) }),
                React.createElement("div", { className: cnSidebar('Sizer') }, sizer))))));
});