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

React component library

import { __assign, __read, __rest } from "tslib";
import React from 'react';
import { ArrowDownFilledIcon } from '@ozen-ui/icons';
import { useControlled } from '../../../../hooks/useControlled';
import { useStoredValue } from '../../../../hooks/useStoredValue';
import { useThemeProps } from '../../../../hooks/useThemeProps';
import { cn, isFunction, polymorphicComponentWithRef, renderContent, } from '../../../../utils';
import { Badge } from '../../../Badge';
import { Collapse } from '../../../Collapse';
import { useSidebarContext } from '../../SidebarContext';
import { SidebarCollapsibleItem } from '../SidebarCollapsibleItem';
import { SidebarList } from '../SidebarList';
import { SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED, SIDEBAR_ITEM_DEFAULT_GUTTERS, SIDEBAR_ITEM_DEFAULT_INTERACTIVE, SIDEBAR_ITEM_DEFAULT_TAG, } from './constants';
export var cnSidebarItem = cn('SidebarItem');
export var SidebarItem = polymorphicComponentWithRef(function (inProps, ref) {
    var props = useThemeProps({
        props: inProps,
        name: 'SidebarItem',
    });
    var _a = props.as, as = _a === void 0 ? SIDEBAR_ITEM_DEFAULT_TAG : _a, icon = props.icon, children = props.children, className = props.className, _b = props.interactive, interactive = _b === void 0 ? SIDEBAR_ITEM_DEFAULT_INTERACTIVE : _b, subitems = props.subitems, onOpenChange = props.onOpenChange, open = props.open, wrapperProps = props.wrapperProps, onClick = props.onClick, _c = props.gutters, gutters = _c === void 0 ? SIDEBAR_ITEM_DEFAULT_GUTTERS : _c, _d = props.enableSubitemsOnCollapsed, enableSubitemsOnCollapsed = _d === void 0 ? SIDEBAR_ITEM_DEFAULT_ENABLE_OPEN_ON_COLLAPSED : _d, active = props.active, badgeProp = props.badge, badgeProps = props.badgeProps, after = props.after, dataTestId = props["data-testid"], other = __rest(props, ["as", "icon", "children", "className", "interactive", "subitems", "onOpenChange", "open", "wrapperProps", "onClick", "gutters", "enableSubitemsOnCollapsed", "active", "badge", "badgeProps", "after", 'data-testid']);
    var _e = useSidebarContext(), variant = _e.variant, color = _e.color, size = _e.size;
    var _f = __read(useControlled({
        name: 'SidebarItem',
        value: open,
        defaultValue: false,
        state: 'isOpenSubitems',
    }), 2), isOpenSubitemsState = _f[0], setIsOpenSubitemsState = _f[1];
    var hasSubitems = !!subitems;
    var isOpenSubitems = hasSubitems && !!isOpenSubitemsState;
    var isCollapsed = variant === 'mini';
    var setIsOpenSubItems = function (isOpen) {
        if (isCollapsed && !enableSubitemsOnCollapsed) {
            return;
        }
        setIsOpenSubitemsState(isOpen);
        onOpenChange === null || onOpenChange === void 0 ? void 0 : onOpenChange(isOpen);
    };
    var previousVariant = useStoredValue(variant);
    var isCompact = variant === 'compact';
    var isAnimated = previousVariant.current !== 'compact' && !isCompact;
    previousVariant.current = variant;
    return (React.createElement("li", __assign({}, wrapperProps, { ref: ref, className: cnSidebarItem({
            variant: isCompact ? 'compact' : 'default',
            color: color,
            interactive: interactive,
            gutters: gutters,
            active: active,
            size: size,
            openSubitems: isOpenSubitems,
        }, [className]), "data-testid": dataTestId }),
        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'), contentFullWidth: {
                s: 180,
                m: 196,
            }, autoCenter: false, fixed: function (props) {
                var badge = isFunction(badgeProp)
                    ? badgeProp({ collapsed: props.collapsed })
                    : badgeProp;
                var renderedIcon = isFunction(icon)
                    ? renderContent({ content: icon, props: props })
                    : icon;
                if (badge) {
                    return (React.createElement(Badge, __assign({ variant: "dot", color: "errorDark" }, badgeProps, { className: cnSidebarItem('Badge', [badgeProps === null || badgeProps === void 0 ? void 0 : badgeProps.className]), size: "s" }), renderedIcon));
                }
                return renderedIcon;
            }, animated: isAnimated, align: isCompact ? 'center' : 'start', direction: isCompact ? 'column' : 'row', classNames: {
                content: cnSidebarItem('Content'),
                fixed: cnSidebarItem('Icon'),
            } }),
            React.createElement("span", null, children),
            (after || hasSubitems) && (React.createElement("div", { className: cnSidebarItem('Right') },
                after && React.createElement("div", { className: cnSidebarItem('After') }, after),
                hasSubitems && (React.createElement(ArrowDownFilledIcon, { className: cnSidebarItem('Chevron'), size: "s" }))))),
        !!subitems && (React.createElement(Collapse, { expanded: isOpenSubitems, className: cnSidebarItem('SubitemsCollapse') },
            React.createElement(SidebarList, { className: cnSidebarItem('Subitems') }, subitems)))));
});
SidebarItem.displayName = 'SidebarItem';