@toptal/picasso 22.4.2 → 24.0.0

package/{Sidebar/Sidebar.d.ts → PageSidebar/PageSidebar.d.ts}

@@ -1,6 +1,6 @@
-import React, { ReactNode } from 'react';
 import { BaseProps, StandardProps } from '@toptal/picasso-shared';
-import { SidebarContextProps, VariantType } from './types';
+import React, { ReactNode } from 'react';
+import { VariantType } from './types';
 export interface SmallScreenSidebarWrapperProps extends StandardProps {
     children?: ReactNode;
 }
@@ -9,12 +9,20 @@ export interface Props extends BaseProps {
     variant?: VariantType;
     /** Content */
     children?: ReactNode;
+    /** Indicates Sidebar is collapsible */
+    collapsible?: boolean;
+    /** Indicates Sidebar is collapsed as default */
+    defaultCollapsed?: boolean;
+    /** Callback to notify when sidebar is having collapsed or default state */
+    testIds?: {
+        collapseButton?: string;
+        container?: string;
+    };
 }
-export declare const SidebarContext: React.Context<SidebarContextProps>;
-export declare const Sidebar: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
+export declare const PageSidebar: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>>;
 declare const _default: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLDivElement>> & {
     Menu: React.ForwardRefExoticComponent<import("../SidebarMenu/SidebarMenu").Props & React.RefAttributes<HTMLUListElement>>;
-    Item: import("@toptal/picasso-shared").OverridableComponent<import("../SidebarItem/SidebarItem").Props>;
+    Item: import("@toptal/picasso-shared").OverridableComponent<import("../SidebarItem/types").Props>;
     Logo: React.ForwardRefExoticComponent<import("../SidebarLogo/SidebarLogo").Props & React.RefAttributes<HTMLDivElement>>;
 };
 export default _default;

package/{Sidebar/Sidebar.js → PageSidebar/PageSidebar.js}

@@ -1,15 +1,16 @@
-import React, { forwardRef, useState } from 'react';
 import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
 import { useSidebar } from '@toptal/picasso-provider';
+import cx from 'classnames';
+import React, { forwardRef, useCallback, useEffect, useState } from 'react';
 import Button from '../Button';
 import Container from '../Container';
 import Dropdown from '../Dropdown';
-import { Overview16, Close16 } from '../Icon';
-import { useBreakpoint, useIsomorphicLayoutEffect } from '../utils';
-import SidebarMenu from '../SidebarMenu';
+import { BackMinor16, ChevronRight16, Close16, Overview16 } from '../Icon';
 import SidebarItem from '../SidebarItem';
 import SidebarLogo from '../SidebarLogo';
+import SidebarMenu from '../SidebarMenu';
+import { noop, useBreakpoint } from '../utils';
+import { SidebarContextProvider } from './SidebarContextProvider';
 import styles from './styles';
 const SmallScreenSidebarWrapper = ({ classes, children }) => {
     var _a;
@@ -26,42 +27,49 @@ const SmallScreenSidebarWrapper = ({ classes, children }) => {
         }, onOpen: handleShowSidebar, onClose: handleHideSidebar },
         React.createElement(Button.Circular, { icon: showSidebar ? React.createElement(Close16, null) : React.createElement(Overview16, null), variant: 'transparent' })));
 };
-export const SidebarContext = React.createContext({
-    expandedItemKey: null,
-    setExpandedItemKey: () => { }
-});
 const useStyles = makeStyles(styles, {
-    name: 'Sidebar'
+    name: 'PageSidebar'
 });
-// eslint-disable-next-line react/display-name
-export const Sidebar = forwardRef(function Sidebar(props, ref) {
-    const { children, variant = 'light', className, style } = props;
+export const PageSidebar = forwardRef(function Sidebar(props, ref) {
+    const { children, variant = 'light', className, style, collapsible, defaultCollapsed, testIds } = props;
     const classes = useStyles();
     const { setHasSidebar } = useSidebar();
-    useIsomorphicLayoutEffect(() => {
+    const [isCollapsed, setIsCollapsed] = useState(!!defaultCollapsed);
+    const [isHovered, setIsHovered] = useState(false);
+    const [expandedItemKey, setExpandedItemKey] = useState(null);
+    useEffect(() => {
+        // Clear expanded submenu on sidebar collapse
+        if (isCollapsed) {
+            setExpandedItemKey(null);
+        }
+    }, [isCollapsed]);
+    useEffect(() => {
         setHasSidebar(true);
         return function cleanup() {
             setHasSidebar(false);
         };
     }, [setHasSidebar]);
     const isCompactLayout = useBreakpoint(['small', 'medium']);
-    const [expandedItemKey, setExpandedItemKey] = useState(null);
-    const sidebar = (React.createElement(Container, { ref: ref, flex: true, direction: 'column', style: style, className: cx(classes.root, className, classes[variant]) },
+    const handleCollapseButtonClick = useCallback(() => {
+        setIsCollapsed(previousState => !previousState);
+    }, [setIsCollapsed]);
+    const sidebar = (React.createElement(Container, { ref: ref, flex: true, direction: 'column', style: style, className: cx(classes.root, className, classes[variant], {
+            [classes.rootCollapsed]: collapsible && isCollapsed
+        }), "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.container, onMouseEnter: collapsible ? () => setIsHovered(true) : noop, onMouseLeave: collapsible ? () => setIsHovered(false) : noop },
         React.createElement("div", { className: classes.spacer }),
-        React.createElement(SidebarContext.Provider, { value: {
-                variant,
-                expandedItemKey,
-                setExpandedItemKey
-            } }, children)));
+        collapsible && (React.createElement(Button.Circular, { className: cx(classes.collapseButton, {
+                [classes.buttonVisible]: isHovered
+            }), onClick: handleCollapseButtonClick, icon: isCollapsed ? React.createElement(ChevronRight16, null) : React.createElement(BackMinor16, null), "aria-label": 'collapse sidebar', variant: 'primary', "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.collapseButton })),
+        React.createElement(SidebarContextProvider, { isCollapsed: isCollapsed, isHovered: isHovered, variant: variant, expandedItemKey: expandedItemKey, setExpandedItemKey: setExpandedItemKey }, children)));
     return isCompactLayout ? (React.createElement(SmallScreenSidebarWrapper, { classes: classes }, sidebar)) : (sidebar);
 });
-Sidebar.defaultProps = {
+PageSidebar.defaultProps = {
     variant: 'light'
 };
-Sidebar.displayName = 'Sidebar';
-export default Object.assign(Sidebar, {
+PageSidebar.displayName = 'PageSidebar';
+export default Object.assign(PageSidebar, {
     Menu: SidebarMenu,
     Item: SidebarItem,
     Logo: SidebarLogo
 });
-//# sourceMappingURL=Sidebar.js.map
+//# sourceMappingURL=PageSidebar.js.map

package/PageSidebar/PageSidebar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageSidebar.js","sourceRoot":"","sources":["../../src/PageSidebar/PageSidebar.tsx"],"names":[],"mappings":"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"}

package/PageSidebar/SidebarContextProvider.d.ts

@@ -0,0 +1,12 @@
+import { ReactNode } from 'react';
+import { SidebarContextProps, VariantType } from './types';
+export interface Props {
+    variant?: VariantType;
+    isCollapsed: boolean;
+    isHovered: boolean;
+    expandedItemKey: number | null;
+    setExpandedItemKey: (expanded: number | null) => void;
+    children?: ReactNode;
+}
+export declare const SidebarContextProvider: ({ children, isCollapsed, variant, expandedItemKey, setExpandedItemKey, isHovered }: Props) => JSX.Element;
+export declare const useSidebarContext: () => SidebarContextProps;

package/PageSidebar/SidebarContextProvider.js

@@ -0,0 +1,19 @@
+import React, { useContext } from 'react';
+import { noop } from '../utils';
+const SidebarContext = React.createContext({
+    expandedItemKey: null,
+    setExpandedItemKey: noop,
+    isHovered: false,
+    isCollapsed: false
+});
+export const SidebarContextProvider = ({ children, isCollapsed, variant, expandedItemKey, setExpandedItemKey, isHovered }) => {
+    return (React.createElement(SidebarContext.Provider, { value: {
+            expandedItemKey,
+            setExpandedItemKey,
+            isCollapsed,
+            isHovered,
+            variant
+        } }, children));
+};
+export const useSidebarContext = () => useContext(SidebarContext);
+//# sourceMappingURL=SidebarContextProvider.js.map

package/PageSidebar/SidebarContextProvider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarContextProvider.js","sourceRoot":"","sources":["../../src/PageSidebar/SidebarContextProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAa,UAAU,EAAE,MAAM,OAAO,CAAA;AAEpD,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAG/B,MAAM,cAAc,GAAG,KAAK,CAAC,aAAa,CAAsB;IAC9D,eAAe,EAAE,IAAI;IACrB,kBAAkB,EAAE,IAAI;IACxB,SAAS,EAAE,KAAK;IAChB,WAAW,EAAE,KAAK;CACnB,CAAC,CAAA;AAWF,MAAM,CAAC,MAAM,sBAAsB,GAAG,CAAC,EACrC,QAAQ,EACR,WAAW,EACX,OAAO,EACP,eAAe,EACf,kBAAkB,EAClB,SAAS,EACH,EAAE,EAAE;IACV,OAAO,CACL,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;YACL,eAAe;YACf,kBAAkB;YAClB,WAAW;YACX,SAAS;YACT,OAAO;SACR,IAEA,QAAQ,CACe,CAC3B,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,iBAAiB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,cAAc,CAAC,CAAA"}

package/PageSidebar/index.d.ts

@@ -0,0 +1,5 @@
+import { OmitInternalProps } from '@toptal/picasso-shared';
+import { Props } from './PageSidebar';
+export { default } from './PageSidebar';
+export declare type PageSidebarProps = OmitInternalProps<Props>;
+export { SidebarContextProvider, useSidebarContext, Props as SidebarContextProviderProps } from './SidebarContextProvider';

package/PageSidebar/index.js

@@ -0,0 +1,3 @@
+export { default } from './PageSidebar';
+export { SidebarContextProvider, useSidebarContext } from './SidebarContextProvider';
+//# sourceMappingURL=index.js.map

package/PageSidebar/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/PageSidebar/index.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAGvC,OAAO,EACL,sBAAsB,EACtB,iBAAiB,EAElB,MAAM,0BAA0B,CAAA"}

package/PageSidebar/styles.d.ts

@@ -0,0 +1,3 @@
+import { Theme } from '@material-ui/core/styles';
+declare const _default: ({ palette, screens, zIndex, transitions }: Theme) => import("@material-ui/styles").StyleRules<{}, "dark" | "light" | "root" | "spacer" | "responsiveWrapper" | "responsiveWrapperContent" | "collapseButton" | "buttonVisible" | "rootCollapsed">;
+export default _default;

package/{Sidebar → PageSidebar}/styles.js

@@ -1,14 +1,26 @@
 import { createStyles } from '@material-ui/core/styles';
-export default ({ palette, screens, zIndex }) => createStyles({
+// decided to use a custom shadow for the sidebar's collapse button
+const COLLAPSE_BUTTON_SHADOW = '0 0 0 1px rgba(0, 0, 0, 0.04), 0 0 8px 0 rgba(0, 0, 0, 0.16)';
+export default ({ palette, screens, zIndex, transitions }) => createStyles({
     root: {
         height: '100%',
         width: '14.75rem',
         boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
-        padding: '1rem 0',
+        padding: '1rem 0 0.5rem',
         fontSize: '1rem',
+        position: 'relative',
+        transition: `width ${transitions.duration.enteringScreen}ms ease-in-out`,
         [screens('small', 'medium')]: {
             width: '100vw',
             overflowY: 'scroll'
+        },
+        '&::before': {
+            position: 'absolute',
+            content: '""',
+            left: 0,
+            top: 0,
+            width: '15.50rem',
+            height: '100%'
         }
     },
     responsiveWrapper: {
@@ -43,6 +55,30 @@ export default ({ palette, screens, zIndex }) => createStyles({
     dark: {
         boxShadow: `inset -1px 0px 0px 0px ${palette.grey.darker}`,
         backgroundColor: palette.grey.darker
+    },
+    collapseButton: {
+        position: 'absolute',
+        right: '-0.75rem',
+        top: '0.75rem',
+        visibility: 'hidden',
+        color: palette.grey.dark,
+        backgroundColor: palette.common.white,
+        borderRadius: '50%',
+        boxShadow: COLLAPSE_BUTTON_SHADOW,
+        '&:hover': {
+            color: palette.common.white,
+            backgroundColor: palette.primary.main
+        }
+    },
+    buttonVisible: {
+        visibility: 'visible'
+    },
+    rootCollapsed: {
+        width: '5rem',
+        transition: `width ${transitions.duration.leavingScreen}ms ease-in-out`,
+        '&::before': {
+            width: '5.75rem'
+        }
     }
 });
 //# sourceMappingURL=styles.js.map

package/PageSidebar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../src/PageSidebar/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAS,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAE9D,mEAAmE;AACnE,MAAM,sBAAsB,GAC1B,8DAA8D,CAAA;AAEhE,eAAe,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,WAAW,EAAS,EAAE,EAAE,CAClE,YAAY,CAAC;IACX,IAAI,EAAE;QACJ,MAAM,EAAE,MAAM;QACd,KAAK,EAAE,UAAU;QACjB,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,OAAO,EAAE,eAAe;QACxB,QAAQ,EAAE,MAAM;QAChB,QAAQ,EAAE,UAAU;QACpB,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,cAAc,gBAAgB;QAExE,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,KAAK,EAAE,OAAO;YACd,SAAS,EAAE,QAAQ;SACpB;QAED,WAAW,EAAE;YACX,QAAQ,EAAE,UAAU;YACpB,OAAO,EAAE,IAAI;YACb,IAAI,EAAE,CAAC;YACP,GAAG,EAAE,CAAC;YACN,KAAK,EAAE,UAAU;YACjB,MAAM,EAAE,MAAM;SACf;KACF;IACD,iBAAiB,EAAE;QACjB,QAAQ,EAAE,OAAO;QACjB,GAAG,EAAE,QAAQ;QACb,IAAI,EAAE,QAAQ;QACd,MAAM,EAAE,MAAM,CAAC,MAAM;KACtB;IACD,wBAAwB,EAAE;QACxB,SAAS,EAAE,sBAAsB;QAEjC,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;YAC5B,SAAS,EAAE,oBAAoB,CAAC,+BAA+B;SAChE;QAED,uDAAuD;QACvD,2DAA2D;QAC3D,uCAAuC,EAAE;YACvC,SAAS,EAAE,sBAAsB;YAEjC,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,EAAE;gBAC5B,SAAS,EAAE,oBAAoB,CAAC,+BAA+B;aAChE;SACF;KACF;IACD,MAAM,EAAE;QACN,KAAK,EAAE,EAAE;QACT,IAAI,EAAE,CAAC;QACP,MAAM,EAAE,MAAM;KACf;IACD,KAAK,EAAE;QACL,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,QAAQ,EAAE;QAC5D,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,OAAO;KACtC;IACD,IAAI,EAAE;QACJ,SAAS,EAAE,0BAA0B,OAAO,CAAC,IAAI,CAAC,MAAM,EAAE;QAC1D,eAAe,EAAE,OAAO,CAAC,IAAI,CAAC,MAAM;KACrC;IACD,cAAc,EAAE;QACd,QAAQ,EAAE,UAAU;QACpB,KAAK,EAAE,UAAU;QACjB,GAAG,EAAE,SAAS;QACd,UAAU,EAAE,QAAQ;QACpB,KAAK,EAAE,OAAO,CAAC,IAAI,CAAC,IAAI;QACxB,eAAe,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;QACrC,YAAY,EAAE,KAAK;QACnB,SAAS,EAAE,sBAAsB;QAEjC,SAAS,EAAE;YACT,KAAK,EAAE,OAAO,CAAC,MAAM,CAAC,KAAK;YAC3B,eAAe,EAAE,OAAO,CAAC,OAAO,CAAC,IAAI;SACtC;KACF;IACD,aAAa,EAAE;QACb,UAAU,EAAE,SAAS;KACtB;IACD,aAAa,EAAE;QACb,KAAK,EAAE,MAAM;QACb,UAAU,EAAE,SAAS,WAAW,CAAC,QAAQ,CAAC,aAAa,gBAAgB;QAEvE,WAAW,EAAE;YACX,KAAK,EAAE,SAAS;SACjB;KACF;CACF,CAAC,CAAA"}

package/{Sidebar → PageSidebar}/types.d.ts

@@ -3,4 +3,6 @@ export interface SidebarContextProps {
     variant?: VariantType;
     expandedItemKey: number | null;
     setExpandedItemKey: (expanded: number | null) => void;
+    isCollapsed: boolean;
+    isHovered: boolean;
 }

package/{Sidebar → PageSidebar}/types.js.map

@@ -1 +1 @@
-{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/Sidebar/types.ts"],"names":[],"mappings":""}
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/PageSidebar/types.ts"],"names":[],"mappings":""}

package/SidebarItem/SidebarItem.d.ts

@@ -1,33 +1,6 @@
-import React, { ReactElement, ElementType } from 'react';
-import { MenuItemProps } from '@material-ui/core/MenuItem';
-import { BaseProps, TextLabelProps, OverridableComponent } from '@toptal/picasso-shared';
-import { MenuItemAttributes } from '../MenuItem';
-import { VariantType } from '../Sidebar/types';
-export declare const SubMenuContext: React.Context<{
-    parentSidebarItemIndex?: number | null | undefined;
-}>;
-export interface Props extends BaseProps, TextLabelProps, MenuItemAttributes {
-    /** Pass icon to be used as part of item */
-    icon?: ReactElement;
-    /** Highlights the item as selected */
-    selected?: boolean;
-    /** Whether to render disabled item */
-    disabled?: boolean;
-    /** If item has menu defines can menu be collapsed */
-    collapsible?: boolean;
-    /** Renders nested sidebar menu */
-    menu?: ReactElement;
-    /** Component name to render the menu item as */
-    as?: ElementType<MenuItemProps>;
-    variant?: VariantType;
-    isExpanded?: boolean;
-    expand?: (index: number | null) => void;
-    index?: number | null;
-    /** Callback when item is clicked */
-    onClick?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-    /** Callback when item is hovered */
-    onMouseEnter?: (event: React.MouseEvent<HTMLElement, MouseEvent>) => void;
-}
-export declare const SidebarItem: OverridableComponent<Props>;
+import { OverridableComponent } from '@toptal/picasso-shared';
+import { ReactElement } from 'react';
+import { Props } from './types';
 export declare const getSelectedSubMenu: (sidebarItem: ReactElement<Props>) => {} | null | undefined;
+export declare const SidebarItem: OverridableComponent<Props>;
 export default SidebarItem;

package/SidebarItem/SidebarItem.js

@@ -1,75 +1,8 @@
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-import React, { forwardRef, memo, useMemo } from 'react';
-import { makeStyles } from '@material-ui/core/styles';
-import cx from 'classnames';
-import { useTitleCase } from '@toptal/picasso-shared';
-import Container from '../Container';
-import Typography from '../Typography';
-import Accordion from '../Accordion';
-import MenuItem from '../MenuItem';
-import { ArrowDownMinor16 } from '../Icon';
-import styles from './styles';
+import React, { forwardRef, memo } from 'react';
 import noop from '../utils/noop';
-export const SubMenuContext = React.createContext({
-    parentSidebarItemIndex: undefined
-});
-const useStyles = makeStyles(styles, {
-    name: 'PicassoSidebarItem'
-});
-export const SidebarItem = memo(forwardRef(function SidebarItem(props, ref) {
-    const { as, children, className, collapsible, disabled, expand = noop, icon, index, isExpanded, menu, onClick = noop, selected, style, titleCase: propsTitleCase, variant = 'light' } = props, rest = __rest(props, ["as", "children", "className", "collapsible", "disabled", "expand", "icon", "index", "isExpanded", "menu", "onClick", "selected", "style", "titleCase", "variant"]);
-    const classes = useStyles();
-    const hasIcon = Boolean(icon);
-    const hasMenu = Boolean(menu);
-    const subMenu = useMemo(() => (React.createElement(SubMenuContext.Provider, { value: {
-            parentSidebarItemIndex: index
-        } }, menu)), [index, menu]);
-    const titleCase = useTitleCase(propsTitleCase);
-    const handleMenuItemClick = (event) => {
-        if (!hasMenu) {
-            onClick(event);
-        }
-    };
-    const handleAccordionChange = (event, expansion) => {
-        event.stopPropagation();
-        if (expansion) {
-            // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-            expand(index);
-        }
-    };
-    const resolvedChildren = typeof children === 'string' ? (React.createElement(Typography, { className: classes.labelContent, color: 'inherit', size: 'medium', titleCase: titleCase, noWrap: true }, children)) : (children);
-    const menuItem = (React.createElement(MenuItem, Object.assign({}, rest, { as: as, ref: ref, style: style, className: cx(classes.root, classes.noWrap, classes.roundedBorder, classes[variant], {
-            [classes.selected]: !hasMenu && selected,
-            [classes.collapsible]: hasMenu && collapsible
-        }, className), onClick: handleMenuItemClick, selected: !hasMenu && selected, disabled: disabled, variant: variant, nonSelectable: true }),
-        React.createElement(Container, { className: classes.noWrap, inline: true, flex: true, alignItems: 'center' },
-            icon,
-            React.createElement(Container, { className: cx(classes.label, classes.noWrap, {
-                    [classes.withIcon]: hasIcon
-                }), flex: true, alignItems: 'center' }, resolvedChildren))));
-    if (hasMenu && collapsible) {
-        return (React.createElement(Accordion, { onChange: handleAccordionChange, classes: {
-                summary: classes.collapsibleWrapper,
-                details: hasIcon ? classes.nestedMenuWithIcon : classes.nestedMenu,
-                content: classes.content
-            }, content: subMenu, borders: 'none', disabled: disabled, expanded: isExpanded, expandIcon: React.createElement(ArrowDownMinor16, { className: cx(classes.expandIcon, classes[`${variant}ExpandIcon`], {
-                    [classes.expandIconDisabled]: disabled
-                }) }) }, menuItem));
-    }
-    return (React.createElement(React.Fragment, null,
-        menuItem,
-        hasMenu && (React.createElement("div", { className: hasIcon ? classes.nestedMenuWithIcon : classes.nestedMenu }, subMenu))));
-}));
+import { SidebarItemBasic } from './SidebarItemBasic';
+import { SidebarItemCompact } from './SidebarItemCompact';
+import { SidebarItemAccordion } from './SidebarItemAccordion';
 export const getSelectedSubMenu = (sidebarItem) => {
     const menu = sidebarItem.props.menu;
     if (!menu) {
@@ -78,11 +11,25 @@ export const getSelectedSubMenu = (sidebarItem) => {
     const subMenuItems = React.Children.toArray(menu.props.children);
     return subMenuItems.find(menuChild => menuChild.props.selected);
 };
+export const SidebarItem = memo(forwardRef(function SidebarItem(props, ref) {
+    const { compact, collapsible, menu } = props;
+    const hasMenu = menu != null;
+    let SidebarItemImpl = SidebarItemBasic;
+    if (hasMenu && compact) {
+        SidebarItemImpl = SidebarItemCompact;
+    }
+    else if (hasMenu && collapsible) {
+        SidebarItemImpl = SidebarItemAccordion;
+    }
+    return React.createElement(SidebarItemImpl, Object.assign({}, props, { ref: ref }));
+}));
 SidebarItem.defaultProps = {
     collapsible: false,
     onClick: noop,
     selected: false,
-    expand: noop
+    expand: noop,
+    variant: 'light',
+    compact: false
 };
 SidebarItem.displayName = 'SidebarItem';
 export default SidebarItem;

package/SidebarItem/SidebarItem.js.map

@@ -1 +1 @@
-{"version":3,"file":"SidebarItem.js","sourceRoot":"","sources":["../../src/SidebarItem/SidebarItem.tsx"],"names":[],"mappings":"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"}
+{"version":3,"file":"SidebarItem.js","sourceRoot":"","sources":["../../src/SidebarItem/SidebarItem.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,IAAI,EAAgB,MAAM,OAAO,CAAA;AAE7D,OAAO,IAAI,MAAM,eAAe,CAAA;AAChC,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AACrD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAA;AACzD,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAA;AAG7D,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAAC,WAAgC,EAAE,EAAE;IACrE,MAAM,IAAI,GAAG,WAAW,CAAC,KAAK,CAAC,IAAI,CAAA;IAEnC,IAAI,CAAC,IAAI,EAAE;QACT,OAAO,IAAI,CAAA;KACZ;IAED,MAAM,YAAY,GAAG,KAAK,CAAC,QAAQ,CAAC,OAAO,CAAC,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAA;IAEhE,OAAO,YAAY,CAAC,IAAI,CACtB,SAAS,CAAC,EAAE,CAAE,SAAiC,CAAC,KAAK,CAAC,QAAQ,CAC/D,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,WAAW,GAAgC,IAAI,CAC1D,UAAU,CAAqB,SAAS,WAAW,CAAC,KAAK,EAAE,GAAG;IAC5D,MAAM,EAAE,OAAO,EAAE,WAAW,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IAE5C,MAAM,OAAO,GAAG,IAAI,IAAI,IAAI,CAAA;IAE5B,IAAI,eAAe,GAAG,gBAAgB,CAAA;IAEtC,IAAI,OAAO,IAAI,OAAO,EAAE;QACtB,eAAe,GAAG,kBAAkB,CAAA;KACrC;SAAM,IAAI,OAAO,IAAI,WAAW,EAAE;QACjC,eAAe,GAAG,oBAAoB,CAAA;KACvC;IAED,OAAO,oBAAC,eAAe,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAAA;AACjD,CAAC,CAAC,CACH,CAAA;AAED,WAAW,CAAC,YAAY,GAAG;IACzB,WAAW,EAAE,KAAK;IAClB,OAAO,EAAE,IAAI;IACb,QAAQ,EAAE,KAAK;IACf,MAAM,EAAE,IAAI;IACZ,OAAO,EAAE,OAAO;IAChB,OAAO,EAAE,KAAK;CACf,CAAA;AAED,WAAW,CAAC,WAAW,GAAG,aAAa,CAAA;AAEvC,eAAe,WAAW,CAAA"}

package/SidebarItem/SidebarItemAccordion.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { Props } from './types';
+export declare const SidebarItemAccordion: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;

package/SidebarItem/SidebarItemAccordion.js

@@ -0,0 +1,30 @@
+import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
+import React, { forwardRef, useCallback } from 'react';
+import Accordion from '../Accordion';
+import { ArrowDownMinor16 } from '../Icon';
+import styles from './styles';
+import { SubMenuContextProvider } from './SubMenuContextProvider';
+import { SidebarItemHeader } from './SidebarItemHeader';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoSidebarItemAccordion'
+});
+export const SidebarItemAccordion = forwardRef(function SidebarItemAccordion(props, ref) {
+    const { expand, index, menu, disabled, variant, isExpanded, icon, compact } = props;
+    const classes = useStyles();
+    const handleAccordionChange = useCallback((event, isAccordionExpanded) => {
+        event.stopPropagation();
+        if (isAccordionExpanded) {
+            expand === null || expand === void 0 ? void 0 : expand(index !== null && index !== void 0 ? index : null);
+        }
+    }, [index, expand]);
+    const content = (React.createElement(SubMenuContextProvider, { parentMenu: { icon, compact }, parentSidebarItemIndex: index }, menu));
+    return (React.createElement(Accordion, { onChange: handleAccordionChange, classes: {
+            summary: classes.collapsibleWrapper,
+            content: classes.content
+        }, content: content, borders: 'none', disabled: disabled, expanded: isExpanded, expandIcon: React.createElement(ArrowDownMinor16, { className: cx(classes.expandIcon, classes[`${variant}ExpandIcon`], {
+                [classes.expandIconDisabled]: disabled
+            }) }) },
+        React.createElement(SidebarItemHeader, Object.assign({}, props, { ref: ref }))));
+});
+//# sourceMappingURL=SidebarItemAccordion.js.map

package/SidebarItem/SidebarItemAccordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItemAccordion.js","sourceRoot":"","sources":["../../src/SidebarItem/SidebarItemAccordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAe,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEnE,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAA;AAC1C,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,6BAA6B;CACpC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,oBAAoB,GAAG,UAAU,CAC5C,SAAS,oBAAoB,CAAC,KAAY,EAAE,GAAG;IAC7C,MAAM,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,UAAU,EACV,IAAI,EACJ,OAAO,EACR,GAAG,KAAK,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,qBAAqB,GAAG,WAAW,CACvC,CAAC,KAAsB,EAAE,mBAA4B,EAAE,EAAE;QACvD,KAAK,CAAC,eAAe,EAAE,CAAA;QAEvB,IAAI,mBAAmB,EAAE;YACvB,MAAM,aAAN,MAAM,uBAAN,MAAM,CAAG,KAAK,aAAL,KAAK,cAAL,KAAK,GAAI,IAAI,CAAC,CAAA;SACxB;IACH,CAAC,EACD,CAAC,KAAK,EAAE,MAAM,CAAC,CAChB,CAAA;IAED,MAAM,OAAO,GAAG,CACd,oBAAC,sBAAsB,IACrB,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAC7B,sBAAsB,EAAE,KAAK,IAE5B,IAAI,CACkB,CAC1B,CAAA;IAED,OAAO,CACL,oBAAC,SAAS,IACR,QAAQ,EAAE,qBAAqB,EAC/B,OAAO,EAAE;YACP,OAAO,EAAE,OAAO,CAAC,kBAAkB;YACnC,OAAO,EAAE,OAAO,CAAC,OAAO;SACzB,EACD,OAAO,EAAE,OAAO,EAChB,OAAO,EAAC,MAAM,EACd,QAAQ,EAAE,QAAQ,EAClB,QAAQ,EAAE,UAAU,EACpB,UAAU,EACR,oBAAC,gBAAgB,IACf,SAAS,EAAE,EAAE,CAAC,OAAO,CAAC,UAAU,EAAE,OAAO,CAAC,GAAG,OAAO,YAAY,CAAC,EAAE;gBACjE,CAAC,OAAO,CAAC,kBAAkB,CAAC,EAAE,QAAQ;aACvC,CAAC,GACF;QAGJ,oBAAC,iBAAiB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAChC,CACb,CAAA;AACH,CAAC,CACF,CAAA"}

package/SidebarItem/SidebarItemBasic.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { Props } from './types';
+export declare const SidebarItemBasic: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;

package/SidebarItem/SidebarItemBasic.js

@@ -0,0 +1,12 @@
+import React, { forwardRef } from 'react';
+import { SidebarItemHeader } from './SidebarItemHeader';
+import { SubMenuContextProvider } from './SubMenuContextProvider';
+export const SidebarItemBasic = forwardRef(function BasicSidebarItem(props, ref) {
+    const { menu, index, icon, compact } = props;
+    const hasMenu = menu != null;
+    return (React.createElement(React.Fragment, null,
+        React.createElement(SidebarItemHeader, Object.assign({}, props, { ref: ref })),
+        hasMenu && (React.createElement("div", null,
+            React.createElement(SubMenuContextProvider, { parentMenu: { icon, compact }, parentSidebarItemIndex: index }, menu)))));
+});
+//# sourceMappingURL=SidebarItemBasic.js.map

package/SidebarItem/SidebarItemBasic.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItemBasic.js","sourceRoot":"","sources":["../../src/SidebarItem/SidebarItemBasic.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AACvD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAGjE,MAAM,CAAC,MAAM,gBAAgB,GAAG,UAAU,CACxC,SAAS,gBAAgB,CAAC,KAAY,EAAE,GAAG;IACzC,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,GAAG,KAAK,CAAA;IAE5C,MAAM,OAAO,GAAG,IAAI,IAAI,IAAI,CAAA;IAE5B,OAAO,CACL;QACE,oBAAC,iBAAiB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI;QACzC,OAAO,IAAI,CACV;YACE,oBAAC,sBAAsB,IACrB,UAAU,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAC7B,sBAAsB,EAAE,KAAK,IAE5B,IAAI,CACkB,CACrB,CACP,CACA,CACJ,CAAA;AACH,CAAC,CACF,CAAA"}

package/SidebarItem/SidebarItemCompact.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { Props } from './types';
+export declare const SidebarItemCompact: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;

package/SidebarItem/SidebarItemCompact.js

@@ -0,0 +1,19 @@
+import { makeStyles } from '@material-ui/core/styles';
+import React, { forwardRef } from 'react';
+import Container from '../Container';
+import Dropdown from '../Dropdown';
+import styles from './styles';
+import { SubMenuContextProvider } from './SubMenuContextProvider';
+import { SidebarItemHeader } from './SidebarItemHeader';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoSidebarItemCompact'
+});
+export const SidebarItemCompact = forwardRef(function CompactSidebarItem(props, ref) {
+    const { menu, index, compact, icon } = props;
+    const classes = useStyles();
+    const subMenu = (React.createElement(SubMenuContextProvider, { parentMenu: { compact, icon }, parentSidebarItemIndex: index }, menu));
+    return (React.createElement(Dropdown, { placement: 'right-start', content: subMenu },
+        React.createElement(Container, { className: classes.collapsibleWrapper },
+            React.createElement(SidebarItemHeader, Object.assign({}, props, { ref: ref })))));
+});
+//# sourceMappingURL=SidebarItemCompact.js.map

package/SidebarItem/SidebarItemCompact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItemCompact.js","sourceRoot":"","sources":["../../src/SidebarItem/SidebarItemCompact.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AAEzC,OAAO,SAAS,MAAM,cAAc,CAAA;AACpC,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,MAAM,MAAM,UAAU,CAAA;AAC7B,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAA;AAEvD,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,2BAA2B;CAClC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,kBAAkB,GAAG,UAAU,CAC1C,SAAS,kBAAkB,CAAC,KAAY,EAAE,GAAG;IAC3C,MAAM,EAAE,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,IAAI,EAAE,GAAG,KAAK,CAAA;IAE5C,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,OAAO,GAAG,CACd,oBAAC,sBAAsB,IACrB,UAAU,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,EAC7B,sBAAsB,EAAE,KAAK,IAE5B,IAAI,CACkB,CAC1B,CAAA;IAED,OAAO,CACL,oBAAC,QAAQ,IAAC,SAAS,EAAC,aAAa,EAAC,OAAO,EAAE,OAAO;QAChD,oBAAC,SAAS,IAAC,SAAS,EAAE,OAAO,CAAC,kBAAkB;YAC9C,oBAAC,iBAAiB,oBAAK,KAAK,IAAE,GAAG,EAAE,GAAG,IAAI,CAChC,CACH,CACZ,CAAA;AACH,CAAC,CACF,CAAA"}

package/SidebarItem/SidebarItemHeader.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { Props } from './types';
+export declare const SidebarItemHeader: React.ForwardRefExoticComponent<Props & React.RefAttributes<HTMLElement>>;

package/SidebarItem/SidebarItemHeader.js

@@ -0,0 +1,46 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { makeStyles } from '@material-ui/core/styles';
+import cx from 'classnames';
+import React, { forwardRef, useCallback } from 'react';
+import MenuItem from '../MenuItem';
+import SidebarItemContent from '../SidebarItemContent';
+import styles from './styles';
+import { useSubMenuContext } from './SubMenuContextProvider';
+const useStyles = makeStyles(styles, {
+    name: 'PicassoSidebarItemHeader'
+});
+export const SidebarItemHeader = forwardRef(function SidebarItemHeader(props, ref) {
+    const { className, disabled, menu, selected, compact, variant = 'light', onClick, collapsible, testIds, 
+    // these props are being destructured only for the purpose of excluding them from `...rest`
+    /* eslint-disable @typescript-eslint/no-unused-vars */
+    icon, isSubMenu, badge, isExpanded, expand, index } = props, 
+    /* eslint-enable */
+    rest = __rest(props, ["className", "disabled", "menu", "selected", "compact", "variant", "onClick", "collapsible", "testIds", "icon", "isSubMenu", "badge", "isExpanded", "expand", "index"]);
+    const classes = useStyles();
+    const { parentMenu } = useSubMenuContext();
+    const hasMenu = menu != null;
+    const handleMenuItemClick = useCallback((event) => {
+        if (!hasMenu) {
+            onClick === null || onClick === void 0 ? void 0 : onClick(event);
+        }
+    }, [hasMenu, onClick]);
+    const subMenuClass = parentMenu &&
+        (parentMenu.icon ? classes.nestedMenuWithIcon : classes.nestedMenu);
+    return (React.createElement(MenuItem, Object.assign({}, rest, { classes: classes, ref: ref, className: cx(classes.root, classes.noWrap, classes.roundedBorder, classes[variant], {
+            [classes.compact]: compact,
+            [classes.selected]: !hasMenu && selected,
+            [classes.collapsible]: hasMenu && (collapsible || compact)
+        }, (parentMenu === null || parentMenu === void 0 ? void 0 : parentMenu.compact) ? classes.nestedMenuNoMargin : subMenuClass, className), onClick: handleMenuItemClick, selected: !hasMenu && selected, disabled: disabled, variant: variant, nonSelectable: true, "data-testid": testIds === null || testIds === void 0 ? void 0 : testIds.header }),
+        React.createElement(SidebarItemContent, Object.assign({}, props))));
+});
+//# sourceMappingURL=SidebarItemHeader.js.map

package/SidebarItem/SidebarItemHeader.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SidebarItemHeader.js","sourceRoot":"","sources":["../../src/SidebarItem/SidebarItemHeader.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,UAAU,EAAS,MAAM,0BAA0B,CAAA;AAC5D,OAAO,EAAE,MAAM,YAAY,CAAA;AAC3B,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,OAAO,CAAA;AAEtD,OAAO,QAAQ,MAAM,aAAa,CAAA;AAClC,OAAO,kBAAkB,MAAM,uBAAuB,CAAA;AACtD,OAAO,MAAM,MAAM,UAAU,CAAA;AAE7B,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAA;AAE5D,MAAM,SAAS,GAAG,UAAU,CAAQ,MAAM,EAAE;IAC1C,IAAI,EAAE,0BAA0B;CACjC,CAAC,CAAA;AAEF,MAAM,CAAC,MAAM,iBAAiB,GAAG,UAAU,CACzC,SAAS,iBAAiB,CAAC,KAAY,EAAE,GAAG;IAC1C,MAAM,EACJ,SAAS,EACT,QAAQ,EACR,IAAI,EACJ,QAAQ,EACR,OAAO,EACP,OAAO,GAAG,OAAO,EACjB,OAAO,EACP,WAAW,EACX,OAAO;IACP,2FAA2F;IAC3F,sDAAsD;IACtD,IAAI,EACJ,SAAS,EACT,KAAK,EACL,UAAU,EACV,MAAM,EACN,KAAK,KAGH,KAAK;IAFP,mBAAmB;IAChB,IAAI,UACL,KAAK,EApBH,uKAoBL,CAAQ,CAAA;IAET,MAAM,OAAO,GAAG,SAAS,EAAE,CAAA;IAE3B,MAAM,EAAE,UAAU,EAAE,GAAG,iBAAiB,EAAE,CAAA;IAE1C,MAAM,OAAO,GAAG,IAAI,IAAI,IAAI,CAAA;IAE5B,MAAM,mBAAmB,GAAG,WAAW,CACrC,CAAC,KAAgD,EAAE,EAAE;QACnD,IAAI,CAAC,OAAO,EAAE;YACZ,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAG,KAAK,CAAC,CAAA;SACjB;IACH,CAAC,EACD,CAAC,OAAO,EAAE,OAAO,CAAC,CACnB,CAAA;IAED,MAAM,YAAY,GAChB,UAAU;QACV,CAAC,UAAU,CAAC,IAAI,CAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;IAErE,OAAO,CACL,oBAAC,QAAQ,oBACH,IAAI,IACR,OAAO,EAAE,OAAO,EAChB,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,OAAO,CAAC,IAAI,EACZ,OAAO,CAAC,MAAM,EACd,OAAO,CAAC,aAAa,EACrB,OAAO,CAAC,OAAO,CAAC,EAChB;YACE,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,OAAO;YAC1B,CAAC,OAAO,CAAC,QAAQ,CAAC,EAAE,CAAC,OAAO,IAAI,QAAQ;YACxC,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,OAAO,IAAI,CAAC,WAAW,IAAI,OAAO,CAAC;SAC3D,EACD,CAAA,UAAU,aAAV,UAAU,uBAAV,UAAU,CAAE,OAAO,EAAC,CAAC,CAAC,OAAO,CAAC,kBAAkB,CAAC,CAAC,CAAC,YAAY,EAC/D,SAAS,CACV,EACD,OAAO,EAAE,mBAAmB,EAC5B,QAAQ,EAAE,CAAC,OAAO,IAAI,QAAQ,EAC9B,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,aAAa,uBACA,OAAO,aAAP,OAAO,uBAAP,OAAO,CAAE,MAAM;QAE5B,oBAAC,kBAAkB,oBAAK,KAAK,EAAI,CACxB,CACZ,CAAA;AACH,CAAC,CACF,CAAA"}

package/SidebarItem/SubMenuContextProvider.d.ts

@@ -0,0 +1,16 @@
+import { ReactNode } from 'react';
+export interface ContextProps {
+    parentSidebarItemIndex?: number | null;
+    isSubMenu: boolean;
+    parentMenu: {
+        icon?: ReactNode;
+        compact?: boolean;
+    } | null;
+}
+export interface Props {
+    children?: ReactNode;
+    parentSidebarItemIndex?: number | null;
+    parentMenu: ContextProps['parentMenu'];
+}
+export declare const SubMenuContextProvider: ({ children, parentMenu, parentSidebarItemIndex }: Props) => JSX.Element;
+export declare const useSubMenuContext: () => ContextProps;