@redsift/design-system 11.5.0 → 11.6.0-muiv5-alpha.1

package/components/side-navigation-menu/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/side-navigation-menu/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledSideNavigationMenuProps } from './types';\nimport { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenu = styled.div<StyledSideNavigationMenuProps>`\n  .redsift-side-navigation-menu__current-indicator-container {\n    min-width: 4px;\n  }\n\n  .redsift-side-navigation-menu__menu-container {\n    width: 100%;\n  }\n\n  .redsift-badge {\n    margin-left: 8px;\n  }\n\n  ${({ $isDisabled, $variant, $theme }) => css`\n    .redsift-side-navigation-menu__menu-container > button {\n      ${!$isDisabled\n        ? css`\n            & {\n              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting);\n            }\n          `\n        : css`\n            & {\n              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);\n            }\n          `}\n      align-items: center;\n      background-color: var(--redsift-color-${$theme}-components-side-navigation-background);\n      border: none;\n      border-radius: 0 4px 4px 0;\n      display: flex;\n      font-family: var(--redsift-typography-body-font-family);\n      font-size: 14px;\n      font-weight: var(--redsift-typography-body-font-weight);\n      gap: 0;\n      height: 40px;\n      line-height: var(--redsift-typography-body-line-height);\n      margin-left: -4px;\n      transition: padding 300ms ease-out;\n      padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};\n      text-decoration: none;\n      text-transform: uppercase;\n      width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});\n\n      :hover,\n      :focus-visible {\n        outline: none;\n\n        ${!$isDisabled\n          ? css`\n              background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);\n              &,\n              .redsift-icon.first,\n              .redsift-side-navigation-menu__expand-icon {\n                color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover);\n              }\n              cursor: pointer;\n            `\n          : ''}\n      }\n\n      :active {\n        ${!$isDisabled\n          ? css`\n              background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);\n            `\n          : ''}\n      }\n\n      @media (prefers-reduced-motion: no-preference) {\n        :focus-visible {\n          > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n            outline: 2px solid var(--redsift-color-primary-n);\n            transition: outline-offset 75ms ease-out;\n          }\n\n          :not(:active):focus-visible {\n            > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n              transition-duration: 0.25s;\n            }\n          }\n        }\n\n        :not(:active):focus-visible {\n          > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {\n            outline-offset: 0.25rem;\n          }\n        }\n      }\n    }\n\n    .content {\n      transition: opacity 300ms ease-out;\n      opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};\n      overflow: hidden;\n      white-space: nowrap;\n    }\n  `}\n\n  .first {\n    box-sizing: unset;\n    margin-right: 8px;\n  }\n\n  .redsift-side-navigation-menu__expand-icon {\n    transition: transform 300ms ease-out;\n    ${({ $isDisabled, $theme }) =>\n      !$isDisabled\n        ? css`\n            &,\n            .redsift-icon.first {\n              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting);\n            }\n          `\n        : css`\n            &,\n            .redsift-icon.first {\n              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);\n            }\n          `}\n    ${({ $isExpanded }) =>\n      !$isExpanded\n        ? css`\n            transform: rotate(0);\n          `\n        : css`\n            transform: rotate(-180deg);\n          `}\n    margin-left: auto;\n\n    transition: opacity 300ms ease-out;\n    opacity: ${({ $variant }) => ($variant === SideNavigationMenuBarVariant.standard ? '1' : '0')};\n  }\n\n  [dir='rtl'] & {\n    .redsift-side-navigation-menu__expand-icon {\n      margin-left: unset;\n      margin-right: auto;\n    }\n  }\n\n  /**\n   * Display children or not\n   */\n\n  .redsift-side-navigation-menu__menu-container > ul {\n    list-style: none;\n    margin: unset;\n    padding: unset;\n    margin-left: -4px;\n\n    ${({ $variant }) => css`\n      width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});\n    `}\n    margin-bottom: 4px;\n    max-width: 241px;\n    transition: height 300ms ease-out;\n    overflow: hidden;\n    ${({ $isExpanded, $numberOfChildren }) =>\n      $isExpanded\n        ? css`\n            height: ${$numberOfChildren * 32}px;\n          `\n        : css`\n            height: 0;\n          `};\n  }\n`;\n"],"names":["StyledSideNavigationMenu","styled","div","_ref","$isDisabled","$variant","$theme","css","SideNavigationMenuBarVariant","shrinked","_ref2","_ref3","$isExpanded","_ref4","standard","_ref5","_ref6","$numberOfChildren"],"mappings":";;;AAIA;AACA;AACA;AACaA,MAAAA,wBAAwB,GAAGC,MAAM,CAACC,GAAmC,CAAA;AAClF;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,EAAA,EAAIC,IAAA,IAAA;EAAA,IAAC;IAAEC,WAAW;IAAEC,QAAQ;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAH,IAAA,CAAA;AAAA,EAAA,OAAKI,GAAI,CAAA;AAC/C;AACA,MAAQ,EAAA,CAACH,WAAW,GACVG,GAAI,CAAA;AACd;AACA,yCAAA,EAA2CD,MAAO,CAAA;AAClD;AACA,UAAA,CAAW,GACDC,GAAI,CAAA;AACd;AACA,yCAAA,EAA2CD,MAAO,CAAA;AAClD;AACA,UAAY,CAAA,CAAA;AACZ;AACA,4CAAA,EAA8CA,MAAO,CAAA;AACrD;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAA0BD,EAAAA,QAAQ,KAAKG,4BAA4B,CAACC,QAAQ,GAAG,MAAM,GAAG,MAAO,CAAA;AAC/F;AACA;AACA,yBAA2BJ,EAAAA,QAAQ,KAAKG,4BAA4B,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAM,CAAA;AAC9F;AACA;AACA;AACA;AACA;AACA,QAAU,EAAA,CAACL,WAAW,GACVG,GAAI,CAAA;AAChB,oDAAA,EAAsDD,MAAO,CAAA;AAC7D;AACA;AACA;AACA,2CAAA,EAA6CA,MAAO,CAAA;AACpD;AACA;AACA,YAAA,CAAa,GACD,EAAG,CAAA;AACf;AACA;AACA;AACA,QAAU,EAAA,CAACF,WAAW,GACVG,GAAI,CAAA;AAChB,oDAAA,EAAsDD,MAAO,CAAA;AAC7D,YAAA,CAAa,GACD,EAAG,CAAA;AACf;AACA;AACA;AACA;AACA,gBAAkBD,EAAAA,QAAQ,KAAKG,4BAA4B,CAACC,QAAQ,GAAG,QAAQ,GAAG,UAAW,CAAA;AAC7F;AACA;AACA;AACA;AACA;AACA,kBAAoBJ,EAAAA,QAAQ,KAAKG,4BAA4B,CAACC,QAAQ,GAAG,QAAQ,GAAG,UAAW,CAAA;AAC/F;AACA;AACA;AACA;AACA;AACA;AACA,gBAAkBJ,EAAAA,QAAQ,KAAKG,4BAA4B,CAACC,QAAQ,GAAG,QAAQ,GAAG,UAAW,CAAA;AAC7F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,eAAiBJ,EAAAA,QAAQ,KAAKG,4BAA4B,CAACC,QAAQ,GAAG,GAAG,GAAG,GAAI,CAAA;AAChF;AACA;AACA;AACA,EAAG,CAAA,CAAA;AAAA,CAAC,CAAA;AACJ;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,KAAA,IAAA;EAAA,IAAC;IAAEN,WAAW;AAAEE,IAAAA,MAAAA;AAAO,GAAC,GAAAI,KAAA,CAAA;EAAA,OACxB,CAACN,WAAW,GACRG,GAAI,CAAA;AACd;AACA;AACA,yCAAA,EAA2CD,MAAO,CAAA;AAClD;AACA,UAAA,CAAW,GACDC,GAAI,CAAA;AACd;AACA;AACA,yCAAA,EAA2CD,MAAO,CAAA;AAClD;AACA,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ,IAAA,EAAMK,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,WAAAA;AAAY,GAAC,GAAAD,KAAA,CAAA;EAAA,OAChB,CAACC,WAAW,GACRL,GAAI,CAAA;AACd;AACA,UAAA,CAAW,GACDA,GAAI,CAAA;AACd;AACA,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ;AACA;AACA;AACA,aAAA,EAAeM,KAAA,IAAA;EAAA,IAAC;AAAER,IAAAA,QAAAA;AAAS,GAAC,GAAAQ,KAAA,CAAA;EAAA,OAAMR,QAAQ,KAAKG,4BAA4B,CAACM,QAAQ,GAAG,GAAG,GAAG,GAAG,CAAA;AAAA,CAAE,CAAA;AAClG;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,IAAA,EAAMC,KAAA,IAAA;EAAA,IAAC;AAAEV,IAAAA,QAAAA;AAAS,GAAC,GAAAU,KAAA,CAAA;AAAA,EAAA,OAAKR,GAAI,CAAA;AAC5B,yBAA2BF,EAAAA,QAAQ,KAAKG,4BAA4B,CAACC,QAAQ,GAAG,KAAK,GAAG,KAAM,CAAA;AAC9F,IAAK,CAAA,CAAA;AAAA,CAAC,CAAA;AACN;AACA;AACA;AACA;AACA,IAAA,EAAMO,KAAA,IAAA;EAAA,IAAC;IAAEJ,WAAW;AAAEK,IAAAA,iBAAAA;AAAkB,GAAC,GAAAD,KAAA,CAAA;EAAA,OACnCJ,WAAW,GACPL,GAAI,CAAA;AACd,oBAAsBU,EAAAA,iBAAiB,GAAG,EAAG,CAAA;AAC7C,UAAA,CAAW,GACDV,GAAI,CAAA;AACd;AACA,UAAW,CAAA,CAAA;AAAA,CAAC,CAAA;AACZ;AACA;;;;"}

package/components/side-navigation-menu/types.d.ts

@@ -0,0 +1,72 @@
+import { ComponentProps, MutableRefObject } from 'react';
+import { BadgeProps } from '../badge/types.js';
+import { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar/types.js';
+import { IconProps } from '../icon/types.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Context props.
+ */
+type SideNavigationMenuContextProps = {
+    menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;
+};
+/**
+ * Reducer props.
+ */
+type SideNavigationMenuReducerState = {
+    isExpanded: boolean;
+    currentIndex: number;
+    previousIndex: number;
+};
+declare enum SideNavigationMenuReducerActionType {
+    Expand = "expand",
+    Collapse = "collapse",
+    Move = "move"
+}
+type SideNavigationMenuReducerAction = {
+    type: SideNavigationMenuReducerActionType;
+    index?: number;
+};
+/**
+ * Component props.
+ */
+interface SideNavigationMenuProps extends ComponentProps<'div'> {
+    /** Custom props to pass to the button. */
+    buttonProps?: ComponentProps<'button'>;
+    /** Custom ref to pass to the button. */
+    buttonRef?: MutableRefObject<HTMLButtonElement>;
+    /** Custom props to pass to the Badge component, if any. */
+    badgeProps?: Omit<BadgeProps, 'ref'>;
+    /** Whether or not the menu contains children that have a badge. */
+    hasBadge?: boolean;
+    /**
+     * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />
+     * Can also be a ReactElement.
+     */
+    icon?: IconProps['icon'];
+    /** Custom props to pass to the Icon component. */
+    iconProps?: Omit<IconProps, 'ref' | 'icon'>;
+    /** Custom ref to pass to the Icon component. */
+    iconRef?: MutableRefObject<HTMLElement>;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Whether the menu is expanded or not. */
+    isExpanded?: boolean;
+    /** By default, the badge is hidden when the menu is expanded. This prop controls this behavior. */
+    keepBadgeVisible?: boolean;
+    /** Custom props to pass to the menu. */
+    menuProps?: ComponentProps<'ul'>;
+    /** Custom ref to pass to the menu. */
+    menuRef?: MutableRefObject<HTMLUListElement>;
+    /** Theme. */
+    theme?: Theme;
+}
+type StyledSideNavigationMenuProps = Omit<SideNavigationMenuProps, 'isDisabled' | 'isExpanded'> & {
+    $isDisabled: SideNavigationMenuProps['isDisabled'];
+    $isExpanded: SideNavigationMenuProps['isExpanded'];
+    $numberOfChildren: number;
+    $variant: SideNavigationMenuBarVariant;
+    $theme: SideNavigationMenuProps['theme'];
+};
+
+export { SideNavigationMenuContextProps, SideNavigationMenuProps, SideNavigationMenuReducerAction, SideNavigationMenuReducerActionType, SideNavigationMenuReducerState, StyledSideNavigationMenuProps };

package/components/side-navigation-menu/types.js

@@ -0,0 +1,21 @@
+/**
+ * Context props.
+ */
+
+/**
+ * Reducer props.
+ */
+
+let SideNavigationMenuReducerActionType = /*#__PURE__*/function (SideNavigationMenuReducerActionType) {
+  SideNavigationMenuReducerActionType["Expand"] = "expand";
+  SideNavigationMenuReducerActionType["Collapse"] = "collapse";
+  SideNavigationMenuReducerActionType["Move"] = "move";
+  return SideNavigationMenuReducerActionType;
+}({});
+
+/**
+ * Component props.
+ */
+
+export { SideNavigationMenuReducerActionType };
+//# sourceMappingURL=types.js.map

package/components/side-navigation-menu/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/side-navigation-menu/types.ts"],"sourcesContent":["import { ComponentProps, MutableRefObject } from 'react';\nimport { IconProps } from '../icon';\nimport { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar';\nimport { Theme } from '@redsift/design-system/types';\nimport { BadgeProps } from '../badge';\n\n/**\n * Context props.\n */\nexport type SideNavigationMenuContextProps = {\n  menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;\n};\n\n/**\n * Reducer props.\n */\nexport type SideNavigationMenuReducerState = {\n  isExpanded: boolean;\n  currentIndex: number;\n  previousIndex: number;\n};\n\nexport enum SideNavigationMenuReducerActionType {\n  Expand = 'expand',\n  Collapse = 'collapse',\n  Move = 'move',\n}\n\nexport type SideNavigationMenuReducerAction = {\n  type: SideNavigationMenuReducerActionType;\n  index?: number;\n};\n\n/**\n * Component props.\n */\nexport interface SideNavigationMenuProps extends ComponentProps<'div'> {\n  /** Custom props to pass to the button. */\n  buttonProps?: ComponentProps<'button'>;\n  /** Custom ref to pass to the button. */\n  buttonRef?: MutableRefObject<HTMLButtonElement>;\n  /** Custom props to pass to the Badge component, if any. */\n  badgeProps?: Omit<BadgeProps, 'ref'>;\n  /** Whether or not the menu contains children that have a badge. */\n  hasBadge?: boolean;\n  /**\n   * Can be a string or an array of strings containing `d` property of the `path` SVG element.<br />\n   * Can also be a ReactElement.\n   */\n  icon?: IconProps['icon'];\n  /** Custom props to pass to the Icon component. */\n  iconProps?: Omit<IconProps, 'ref' | 'icon'>;\n  /** Custom ref to pass to the Icon component. */\n  iconRef?: MutableRefObject<HTMLElement>;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Whether the menu is expanded or not. */\n  isExpanded?: boolean;\n  /** By default, the badge is hidden when the menu is expanded. This prop controls this behavior. */\n  keepBadgeVisible?: boolean;\n  /** Custom props to pass to the menu. */\n  menuProps?: ComponentProps<'ul'>;\n  /** Custom ref to pass to the menu. */\n  menuRef?: MutableRefObject<HTMLUListElement>;\n  /** Theme. */\n  theme?: Theme;\n}\n\nexport type StyledSideNavigationMenuProps = Omit<SideNavigationMenuProps, 'isDisabled' | 'isExpanded'> & {\n  $isDisabled: SideNavigationMenuProps['isDisabled'];\n  $isExpanded: SideNavigationMenuProps['isExpanded'];\n  $numberOfChildren: number;\n  $variant: SideNavigationMenuBarVariant;\n  $theme: SideNavigationMenuProps['theme'];\n};\n"],"names":["SideNavigationMenuReducerActionType"],"mappings":"AAMA;AACA;AACA;;AAKA;AACA;AACA;;AAOYA,IAAAA,mCAAmC,0BAAnCA,mCAAmC,EAAA;EAAnCA,mCAAmC,CAAA,QAAA,CAAA,GAAA,QAAA,CAAA;EAAnCA,mCAAmC,CAAA,UAAA,CAAA,GAAA,UAAA,CAAA;EAAnCA,mCAAmC,CAAA,MAAA,CAAA,GAAA,MAAA,CAAA;AAAA,EAAA,OAAnCA,mCAAmC,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;;AAW/C;AACA;AACA;;;;"}

package/components/side-navigation-menu-bar/SideNavigationMenuBar.d.ts

@@ -0,0 +1,9 @@
+import { SideNavigationMenuBarProps } from './types.js';
+import { Comp } from '../../types/helpers.js';
+
+/**
+ * The SideNavigationMenuBar component.
+ */
+declare const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement>;
+
+export { SideNavigationMenuBar };

package/components/side-navigation-menu-bar/SideNavigationMenuBar.js

@@ -0,0 +1,217 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useContext, useState, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound.js';
+import { StyledSideNavigationMenuBar } from './styles.js';
+import { SideNavigationMenuBarVariant } from './types.js';
+import { SideNavigationMenuBarContext } from './context.js';
+import { useBoundingClientRect } from '../../hooks/useBoundingRect.js';
+import { filterComponents } from '../../utils/filterComponents.js';
+import { SideNavigationMenu } from '../side-navigation-menu/SideNavigationMenu.js';
+import { AppContainerContext } from '../app-container/context.js';
+import { useTheme } from '../theme/useTheme.js';
+import { AppSidePanelVariant } from '../app-side-panel/types.js';
+import { ThemeProvider } from '../theme/context.js';
+import { SideNavigationMenuItem } from '../side-navigation-menu-item/SideNavigationMenuItem.js';
+
+const _excluded = ["aria-label", "aria-labelledby", "canHaveMultipleMenuOpenAtOnce", "children", "className", "isDisabled", "menubarProps", "menubarRef", "theme", "variant"];
+const COMPONENT_NAME = 'SideNavigationMenuBar';
+const CLASSNAME = 'redsift-side-navigation-menu-bar';
+
+/**
+ * Hook to store the previous index for further use
+ */
+const usePrevious = value => {
+  const ref = useRef(0);
+  useEffect(() => {
+    ref.current = value;
+  }, [value]);
+  return ref.current;
+};
+
+/**
+ * The SideNavigationMenuBar component.
+ */
+const SideNavigationMenuBar = /*#__PURE__*/forwardRef((props, ref) => {
+  const navRef = ref || useRef();
+  const {
+      'aria-label': ariaLabel,
+      'aria-labelledby': ariaLabelledby,
+      canHaveMultipleMenuOpenAtOnce,
+      children,
+      className,
+      isDisabled,
+      menubarProps = {},
+      menubarRef = useRef(),
+      theme: propsTheme,
+      variant: propsVariant = SideNavigationMenuBarVariant.standard
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  warnIfNoAccessibleLabelFound(props, undefined, 'SideNavigationMenuBar');
+  const appContainerState = useContext(AppContainerContext);
+  const theme = useTheme(propsTheme);
+  const {
+    top
+  } = useBoundingClientRect(navRef, [children]);
+  const [variant, setVariant] = useState(appContainerState ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden ? SideNavigationMenuBarVariant.shrinked : appContainerState.sidePanelVariant : propsVariant);
+  const [currentOpenMenuId, setCurrentOpenMenuId] = useState();
+  useEffect(() => {
+    setVariant(propsVariant);
+  }, [propsVariant]);
+  useEffect(() => {
+    if (appContainerState && appContainerState.sidePanelVariant && appContainerState.sidePanelVariant !== variant) {
+      setVariant(appContainerState.sidePanelVariant === AppSidePanelVariant.hidden ? SideNavigationMenuBarVariant.shrinked : appContainerState.sidePanelVariant);
+    }
+  }, [appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.sidePanelVariant]);
+
+  /**
+   * Create an array containing only valid children being either SideNavigationMenu or SideNavigationMenuItem.
+   */
+  const childArray = filterComponents([SideNavigationMenu, SideNavigationMenuItem])(children);
+  const navItems = childArray.map((child, index) => {
+    var _child$key, _child$key2;
+    return /*#__PURE__*/React__default.createElement("li", {
+      key: (_child$key = child.key) !== null && _child$key !== void 0 ? _child$key : index,
+      role: "none"
+    }, /*#__PURE__*/React__default.cloneElement(child, {
+      isDisabled: child.props.isDisabled || isDisabled || undefined,
+      key: (_child$key2 = child.key) !== null && _child$key2 !== void 0 ? _child$key2 : index,
+      tabIndex: index === 0 ? 0 : -1
+    }));
+  });
+  const menuItems = useRef(new Set()).current;
+  const [currentIndex, setCurrentIndex] = useState(0);
+  const previousIndex = usePrevious(currentIndex);
+  const first = () => setCurrentIndex(0);
+  const last = () => setCurrentIndex(menuItems.size - 1);
+  const next = () => {
+    const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;
+    setCurrentIndex(index);
+  };
+  const previous = () => {
+    const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;
+    setCurrentIndex(index);
+  };
+  const match = event => {
+    const items = Array.from(menuItems);
+
+    // Reorder the array, starting with the currentNode
+    const reorderedItems = [...items.slice(currentIndex), ...items.slice(0, currentIndex)];
+
+    // Find all nodes that begin with the pressed letter
+    const matches = reorderedItems.filter(menuItem => {
+      const {
+        textContent
+      } = menuItem;
+      // istanbul ignore next
+      const firstLetter = textContent === null || textContent === void 0 ? void 0 : textContent.toLowerCase().charAt(0);
+      return event.key === firstLetter;
+    });
+
+    // Exit early if there are no matches
+    if (!matches.length) {
+      return;
+    }
+
+    // If the focused item is a match, focus the next match.
+    // Otherwise, focus the first match
+    const currentNode = items[currentIndex];
+    const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];
+    const index = items.findIndex(item => {
+      return item === nextMatch;
+    });
+    setCurrentIndex(index);
+  };
+  const keyDown = e => {
+    var _menubarProps$onKeyDo, _currentNode$parentNo;
+    (_menubarProps$onKeyDo = menubarProps.onKeyDown) === null || _menubarProps$onKeyDo === void 0 ? void 0 : _menubarProps$onKeyDo.call(menubarProps, e);
+    e.stopPropagation();
+    const currentNode = e.target;
+    // istanbul ignore next
+    const parentMenu = currentNode === null || currentNode === void 0 ? void 0 : (_currentNode$parentNo = currentNode.parentNode) === null || _currentNode$parentNo === void 0 ? void 0 : _currentNode$parentNo.parentNode;
+    const isFromSubmenu = parentMenu.getAttribute('role') === 'menu';
+    switch (e.code) {
+      case 'ArrowUp':
+        e.preventDefault();
+        previous();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        next();
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        if (isFromSubmenu) {
+          next();
+        }
+        break;
+      case 'End':
+        e.preventDefault();
+        last();
+        break;
+      case 'Home':
+        e.preventDefault();
+        first();
+        break;
+      case 'Enter':
+      case 'Space':
+        e.preventDefault();
+        currentNode.click();
+        break;
+      default:
+        match(e);
+        break;
+    }
+  };
+  const value = useMemo(() => ({
+    menuItems,
+    sideNavigationMenuBarVariant: variant,
+    setSideNavigationMenuBarVariant: setVariant,
+    currentOpenMenuId,
+    setCurrentOpenMenuId: value => {
+      if (!canHaveMultipleMenuOpenAtOnce) {
+        setCurrentOpenMenuId(value);
+      }
+    }
+  }), [menuItems, variant, setVariant, currentOpenMenuId, setCurrentOpenMenuId]);
+  useEffect(() => {
+    if (currentIndex !== previousIndex) {
+      const items = Array.from(menuItems);
+      const currentNode = items[currentIndex];
+      const previousNode = items[previousIndex];
+
+      // istanbul ignore next
+      previousNode === null || previousNode === void 0 ? void 0 : previousNode.setAttribute('tabindex', '-1');
+      currentNode === null || currentNode === void 0 ? void 0 : currentNode.setAttribute('tabindex', '0');
+      currentNode === null || currentNode === void 0 ? void 0 : currentNode.focus();
+    }
+  }, [currentIndex, previousIndex, menuItems]);
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuBar, _extends({}, forwardedProps, {
+    $isDisabled: isDisabled,
+    $marginTop: top,
+    $theme: theme,
+    $variant: variant,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    className: classNames(SideNavigationMenuBar.className, className),
+    ref: navRef
+  }), /*#__PURE__*/React__default.createElement(SideNavigationMenuBarContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement("ul", _extends({}, menubarProps, {
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-orientation": "vertical",
+    onKeyDown: keyDown,
+    ref: menubarRef,
+    role: "menubar"
+  }), navItems))));
+});
+SideNavigationMenuBar.className = CLASSNAME;
+SideNavigationMenuBar.displayName = COMPONENT_NAME;
+
+export { SideNavigationMenuBar };
+//# sourceMappingURL=SideNavigationMenuBar.js.map

package/components/side-navigation-menu-bar/SideNavigationMenuBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationMenuBar.js","sources":["../../../src/components/side-navigation-menu-bar/SideNavigationMenuBar.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  KeyboardEvent,\n  MutableRefObject,\n  useContext,\n  useEffect,\n  useMemo,\n  useRef,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '../../types';\nimport { SideNavigationMenu } from '../side-navigation-menu';\nimport { SideNavigationMenuItem } from '../side-navigation-menu-item';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { StyledSideNavigationMenuBar } from './styles';\nimport { SideNavigationMenuBarProps, SideNavigationMenuBarContextProps, SideNavigationMenuBarVariant } from './types';\nimport { SideNavigationMenuBarContext } from './context';\nimport { useBoundingClientRect } from '../../hooks/useBoundingRect';\nimport { filterComponents } from '../../utils/filterComponents';\nimport { AppContainerContext } from '../app-container';\nimport { ThemeProvider, useTheme } from '../theme';\nimport { AppSidePanelVariant } from '../app-side-panel';\n\nconst COMPONENT_NAME = 'SideNavigationMenuBar';\nconst CLASSNAME = 'redsift-side-navigation-menu-bar';\n\n/**\n * Hook to store the previous index for further use\n */\nconst usePrevious = (value: number) => {\n  const ref = useRef(0);\n\n  useEffect(() => {\n    ref.current = value;\n  }, [value]);\n\n  return ref.current;\n};\n\n/**\n * The SideNavigationMenuBar component.\n */\nexport const SideNavigationMenuBar: Comp<SideNavigationMenuBarProps, HTMLElement> = forwardRef((props, ref) => {\n  const navRef = (ref || useRef<HTMLElement>()) as MutableRefObject<HTMLElement>;\n\n  const {\n    'aria-label': ariaLabel,\n    'aria-labelledby': ariaLabelledby,\n    canHaveMultipleMenuOpenAtOnce,\n    children,\n    className,\n    isDisabled,\n    menubarProps = {},\n    menubarRef = useRef<HTMLUListElement>(),\n    theme: propsTheme,\n    variant: propsVariant = SideNavigationMenuBarVariant.standard,\n    ...forwardedProps\n  } = props;\n\n  warnIfNoAccessibleLabelFound(props, undefined, 'SideNavigationMenuBar');\n  const appContainerState = useContext(AppContainerContext);\n  const theme = useTheme(propsTheme);\n  const { top } = useBoundingClientRect(navRef, [children]);\n  const [variant, setVariant] = useState<SideNavigationMenuBarVariant>(\n    appContainerState\n      ? appContainerState.sidePanelVariant === AppSidePanelVariant.hidden\n        ? SideNavigationMenuBarVariant.shrinked\n        : appContainerState.sidePanelVariant\n      : propsVariant!\n  );\n  const [currentOpenMenuId, setCurrentOpenMenuId] = useState<string | undefined>();\n\n  useEffect(() => {\n    setVariant(propsVariant!);\n  }, [propsVariant]);\n\n  useEffect(() => {\n    if (appContainerState && appContainerState.sidePanelVariant && appContainerState.sidePanelVariant !== variant) {\n      setVariant(\n        appContainerState.sidePanelVariant === AppSidePanelVariant.hidden\n          ? SideNavigationMenuBarVariant.shrinked\n          : appContainerState.sidePanelVariant\n      );\n    }\n  }, [appContainerState?.sidePanelVariant]);\n\n  /**\n   * Create an array containing only valid children being either SideNavigationMenu or SideNavigationMenuItem.\n   */\n  const childArray = filterComponents([SideNavigationMenu, SideNavigationMenuItem])(children);\n  const navItems = childArray.map((child, index) => {\n    return (\n      <li key={child.key ?? index} role=\"none\">\n        {React.cloneElement(child, {\n          isDisabled: child.props.isDisabled || isDisabled || undefined,\n          key: child.key ?? index,\n          tabIndex: index === 0 ? 0 : -1,\n        })}\n      </li>\n    );\n  });\n\n  const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n  const [currentIndex, setCurrentIndex] = useState(0);\n  const previousIndex = usePrevious(currentIndex);\n\n  const first = () => setCurrentIndex(0);\n\n  const last = () => setCurrentIndex(menuItems.size - 1);\n\n  const next = () => {\n    const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n    setCurrentIndex(index);\n  };\n\n  const previous = () => {\n    const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n    setCurrentIndex(index);\n  };\n\n  const match = (event: React.KeyboardEvent<HTMLUListElement>) => {\n    const items = Array.from(menuItems);\n\n    // Reorder the array, starting with the currentNode\n    const reorderedItems = [...items.slice(currentIndex), ...items.slice(0, currentIndex)];\n\n    // Find all nodes that begin with the pressed letter\n    const matches = reorderedItems.filter((menuItem) => {\n      const { textContent } = menuItem;\n      // istanbul ignore next\n      const firstLetter = textContent?.toLowerCase().charAt(0);\n      return event.key === firstLetter;\n    });\n\n    // Exit early if there are no matches\n    if (!matches.length) {\n      return;\n    }\n\n    // If the focused item is a match, focus the next match.\n    // Otherwise, focus the first match\n    const currentNode = items[currentIndex];\n    const nextMatch = matches.includes(currentNode) ? matches[1] : matches[0];\n    const index = items.findIndex((item) => {\n      return item === nextMatch;\n    });\n\n    setCurrentIndex(index);\n  };\n\n  const keyDown = (e: KeyboardEvent<HTMLUListElement>) => {\n    menubarProps.onKeyDown?.(e);\n    e.stopPropagation();\n\n    const currentNode = e.target as HTMLUListElement;\n    // istanbul ignore next\n    const parentMenu = currentNode?.parentNode?.parentNode as HTMLElement;\n    const isFromSubmenu = parentMenu.getAttribute('role') === 'menu';\n\n    switch (e.code) {\n      case 'ArrowUp':\n        e.preventDefault();\n        previous();\n        break;\n      case 'ArrowDown':\n        e.preventDefault();\n        next();\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        if (isFromSubmenu) {\n          next();\n        }\n        break;\n      case 'End':\n        e.preventDefault();\n        last();\n        break;\n      case 'Home':\n        e.preventDefault();\n        first();\n        break;\n      case 'Enter':\n      case 'Space':\n        e.preventDefault();\n        currentNode.click();\n        break;\n      default:\n        match(e);\n        break;\n    }\n  };\n\n  const value = useMemo<SideNavigationMenuBarContextProps>(\n    () => ({\n      menuItems,\n      sideNavigationMenuBarVariant: variant,\n      setSideNavigationMenuBarVariant: setVariant,\n      currentOpenMenuId,\n      setCurrentOpenMenuId: (value: React.SetStateAction<string | undefined>) => {\n        if (!canHaveMultipleMenuOpenAtOnce) {\n          setCurrentOpenMenuId(value);\n        }\n      },\n    }),\n    [menuItems, variant, setVariant, currentOpenMenuId, setCurrentOpenMenuId]\n  );\n\n  useEffect(() => {\n    if (currentIndex !== previousIndex) {\n      const items = Array.from(menuItems);\n      const currentNode = items[currentIndex] as HTMLElement;\n      const previousNode = items[previousIndex] as HTMLElement;\n\n      // istanbul ignore next\n      previousNode?.setAttribute('tabindex', '-1');\n      currentNode?.setAttribute('tabindex', '0');\n      currentNode?.focus();\n    }\n  }, [currentIndex, previousIndex, menuItems]);\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledSideNavigationMenuBar\n        {...forwardedProps}\n        $isDisabled={isDisabled}\n        $marginTop={top}\n        $theme={theme}\n        $variant={variant}\n        aria-label={ariaLabel}\n        aria-labelledby={ariaLabelledby}\n        className={classNames(SideNavigationMenuBar.className, className)}\n        ref={navRef as MutableRefObject<HTMLElement>}\n      >\n        <SideNavigationMenuBarContext.Provider value={value}>\n          <ul\n            {...menubarProps}\n            aria-label={ariaLabel}\n            aria-labelledby={ariaLabelledby}\n            aria-orientation=\"vertical\"\n            onKeyDown={keyDown}\n            ref={menubarRef as MutableRefObject<HTMLUListElement>}\n            role=\"menubar\"\n          >\n            {navItems}\n          </ul>\n        </SideNavigationMenuBarContext.Provider>\n      </StyledSideNavigationMenuBar>\n    </ThemeProvider>\n  );\n});\nSideNavigationMenuBar.className = CLASSNAME;\nSideNavigationMenuBar.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","usePrevious","value","ref","useRef","useEffect","current","SideNavigationMenuBar","forwardRef","props","navRef","ariaLabel","ariaLabelledby","canHaveMultipleMenuOpenAtOnce","children","className","isDisabled","menubarProps","menubarRef","theme","propsTheme","variant","propsVariant","SideNavigationMenuBarVariant","standard","forwardedProps","_objectWithoutProperties","_excluded","warnIfNoAccessibleLabelFound","undefined","appContainerState","useContext","AppContainerContext","useTheme","top","useBoundingClientRect","setVariant","useState","sidePanelVariant","AppSidePanelVariant","hidden","shrinked","currentOpenMenuId","setCurrentOpenMenuId","childArray","filterComponents","SideNavigationMenu","SideNavigationMenuItem","navItems","map","child","index","_child$key","_child$key2","React","createElement","key","role","cloneElement","tabIndex","menuItems","Set","currentIndex","setCurrentIndex","previousIndex","first","last","size","next","previous","match","event","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","includes","findIndex","item","keyDown","e","_menubarProps$onKeyDo","_currentNode$parentNo","onKeyDown","call","stopPropagation","target","parentMenu","parentNode","isFromSubmenu","getAttribute","code","preventDefault","click","useMemo","sideNavigationMenuBarVariant","setSideNavigationMenuBarVariant","previousNode","setAttribute","focus","ThemeProvider","StyledSideNavigationMenuBar","_extends","$isDisabled","$marginTop","$theme","$variant","classNames","SideNavigationMenuBarContext","Provider","displayName"],"mappings":"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"}

package/components/side-navigation-menu-bar/context.js

@@ -0,0 +1,6 @@
+import React__default from 'react';
+
+const SideNavigationMenuBarContext = /*#__PURE__*/React__default.createContext(null);
+
+export { SideNavigationMenuBarContext };
+//# sourceMappingURL=context.js.map

package/components/side-navigation-menu-bar/context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/side-navigation-menu-bar/context.ts"],"sourcesContent":["import React from 'react';\nimport { SideNavigationMenuBarContextProps } from './types';\n\nexport const SideNavigationMenuBarContext =\n  React.createContext<SideNavigationMenuBarContextProps>(null!);\n"],"names":["SideNavigationMenuBarContext","React","createContext"],"mappings":";;AAGO,MAAMA,4BAA4B,gBACvCC,cAAK,CAACC,aAAa,CAAoC,IAAK;;;;"}

package/components/side-navigation-menu-bar/styles.js

@@ -0,0 +1,89 @@
+import styled, { css } from 'styled-components';
+import { SideNavigationMenuBarVariant } from './types.js';
+
+/**
+ * Component style.
+ */
+const StyledSideNavigationMenuBar = styled.nav`
+  background-color: ${_ref => {
+  let {
+    $theme
+  } = _ref;
+  return `var(--redsift-color-${$theme}-components-side-navigation-background)`;
+}};
+  box-sizing: content-box;
+  overflow-x: hidden;
+  overflow-y: auto;
+  scrollbar-gutter: stable;
+  transition: width 300ms ease-out;
+  width: ${_ref2 => {
+  let {
+    $variant
+  } = _ref2;
+  return $variant === SideNavigationMenuBarVariant.shrinked ? '64px' : '250px';
+}};
+
+  ${_ref3 => {
+  let {
+    $marginTop = 0
+  } = _ref3;
+  return $marginTop ? css`
+          height: calc(100% - ${$marginTop}px);
+        ` : '';
+}}
+
+  ul {
+    list-style: none;
+    margin: unset;
+    padding: unset;
+  }
+
+  scrollbar-color: ${_ref4 => {
+  let {
+    $theme
+  } = _ref4;
+  return `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting) transparent`;
+}};
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    block-size: 9px;
+    inline-size: 9px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: ${_ref5 => {
+  let {
+    $theme
+  } = _ref5;
+  return `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting)`;
+}};
+    border-radius: 0px;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal,
+  &::-webkit-scrollbar-thumb:vertical {
+    &:hover {
+      background-color: ${_ref6 => {
+  let {
+    $theme
+  } = _ref6;
+  return `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-hover)`;
+}};
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    visibility: hidden;
+  }
+`;
+
+export { StyledSideNavigationMenuBar };
+//# sourceMappingURL=styles.js.map

package/components/side-navigation-menu-bar/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sources":["../../../src/components/side-navigation-menu-bar/styles.ts"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { SideNavigationMenuBarVariant, StyledSideNavigationMenuBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledSideNavigationMenuBar = styled.nav<StyledSideNavigationMenuBarProps>`\n  background-color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-side-navigation-background)`};\n  box-sizing: content-box;\n  overflow-x: hidden;\n  overflow-y: auto;\n  scrollbar-gutter: stable;\n  transition: width 300ms ease-out;\n  width: ${({ $variant }) => ($variant === SideNavigationMenuBarVariant.shrinked ? '64px' : '250px')};\n\n  ${({ $marginTop = 0 }) =>\n    $marginTop\n      ? css`\n          height: calc(100% - ${$marginTop}px);\n        `\n      : ''}\n\n  ul {\n    list-style: none;\n    margin: unset;\n    padding: unset;\n  }\n\n  scrollbar-color: ${({ $theme }) =>\n    `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting) transparent`};\n  scrollbar-width: thin;\n\n  &::-webkit-scrollbar {\n    block-size: 9px;\n    inline-size: 9px;\n  }\n\n  &::-webkit-scrollbar-thumb {\n    background-clip: padding-box;\n    background-color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-resting)`};\n    border-radius: 0px;\n    border-left: 2px solid transparent;\n    border-right: 2px solid transparent;\n  }\n\n  &::-webkit-scrollbar-track {\n    background-color: transparent;\n  }\n\n  &::-webkit-scrollbar-thumb:horizontal,\n  &::-webkit-scrollbar-thumb:vertical {\n    &:hover {\n      background-color: ${({ $theme }) => `var(--redsift-color-${$theme}-components-side-navigation-scrollbar-hover)`};\n    }\n  }\n\n  &::-webkit-scrollbar-corner {\n    visibility: hidden;\n  }\n`;\n"],"names":["StyledSideNavigationMenuBar","styled","nav","_ref","$theme","_ref2","$variant","SideNavigationMenuBarVariant","shrinked","_ref3","$marginTop","css","_ref4","_ref5","_ref6"],"mappings":";;;AAGA;AACA;AACA;AACaA,MAAAA,2BAA2B,GAAGC,MAAM,CAACC,GAAsC,CAAA;AACxF,oBAAA,EAAsBC,IAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,MAAAA;AAAO,GAAC,GAAAD,IAAA,CAAA;EAAA,OAAM,CAAA,oBAAA,EAAsBC,MAAO,CAAwC,uCAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AAC7G;AACA;AACA;AACA;AACA;AACA,SAAA,EAAWC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,QAAAA;AAAS,GAAC,GAAAD,KAAA,CAAA;EAAA,OAAMC,QAAQ,KAAKC,4BAA4B,CAACC,QAAQ,GAAG,MAAM,GAAG,OAAO,CAAA;AAAA,CAAE,CAAA;AACrG;AACA,EAAA,EAAIC,KAAA,IAAA;EAAA,IAAC;AAAEC,IAAAA,UAAU,GAAG,CAAA;AAAE,GAAC,GAAAD,KAAA,CAAA;EAAA,OACnBC,UAAU,GACNC,GAAI,CAAA;AACZ,8BAAA,EAAgCD,UAAW,CAAA;AAC3C,QAAA,CAAS,GACD,EAAE,CAAA;AAAA,CAAC,CAAA;AACX;AACA;AACA;AACA;AACA;AACA;AACA;AACA,mBAAA,EAAqBE,KAAA,IAAA;EAAA,IAAC;AAAER,IAAAA,MAAAA;AAAO,GAAC,GAAAQ,KAAA,CAAA;EAAA,OAC3B,CAAA,oBAAA,EAAsBR,MAAO,CAA2D,0DAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AAC9F;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,sBAAA,EAAwBS,KAAA,IAAA;EAAA,IAAC;AAAET,IAAAA,MAAAA;AAAO,GAAC,GAAAS,KAAA,CAAA;EAAA,OAAM,CAAA,oBAAA,EAAsBT,MAAO,CAA+C,8CAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACtH;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,wBAAA,EAA0BU,KAAA,IAAA;EAAA,IAAC;AAAEV,IAAAA,MAAAA;AAAO,GAAC,GAAAU,KAAA,CAAA;EAAA,OAAM,CAAA,oBAAA,EAAsBV,MAAO,CAA6C,4CAAA,CAAA,CAAA;AAAA,CAAC,CAAA;AACtH;AACA;AACA;AACA;AACA;AACA;AACA;;;;"}

package/components/side-navigation-menu-bar/types.d.ts

@@ -0,0 +1,65 @@
+import { Dispatch, SetStateAction, ComponentProps, MutableRefObject } from 'react';
+import { SideNavigationMenuItemProps } from '../side-navigation-menu-item/types.js';
+import { SideNavigationMenuProps } from '../side-navigation-menu/types.js';
+import { ValueOf } from '../../types/helpers.js';
+import { Theme } from '../../types/colors.js';
+
+/**
+ * Component variant.
+ */
+declare const SideNavigationMenuBarVariant: {
+    readonly shrinked: "shrinked";
+    readonly standard: "standard";
+};
+type SideNavigationMenuBarVariant = ValueOf<typeof SideNavigationMenuBarVariant>;
+/**
+ * Context props.
+ */
+type SideNavigationMenuBarContextProps = {
+    /** List of menu items. */
+    menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;
+    /** Side navigation variant. */
+    sideNavigationMenuBarVariant: SideNavigationMenuBarVariant;
+    /** Change side navigation variant. */
+    setSideNavigationMenuBarVariant: Dispatch<SetStateAction<SideNavigationMenuBarVariant>>;
+    /** Current open menu, used to close other menu when canHaveMultipleMenuOpenAtOnce is false. */
+    currentOpenMenuId?: string;
+    /** Change current open menu id. */
+    setCurrentOpenMenuId?: Dispatch<SetStateAction<string | undefined>>;
+};
+/**
+ * Component props.
+ */
+interface SideNavigationMenuBarProps extends ComponentProps<'nav'> {
+    /** Whether or not opening a menu closes the others. */
+    canHaveMultipleMenuOpenAtOnce?: boolean;
+    /** Whether the component is disabled or not. */
+    isDisabled?: boolean;
+    /** Custom props to pass to the menubar. */
+    menubarProps?: ComponentProps<'ul'>;
+    /** Custom ref to pass to the menubar. */
+    menubarRef?: MutableRefObject<HTMLUListElement>;
+    /** Theme. */
+    theme?: Theme;
+    /** Variant. */
+    variant?: SideNavigationMenuBarVariant;
+}
+type StyledSideNavigationMenuBarProps = Omit<SideNavigationMenuBarProps, 'isDisabled'> & {
+    $isDisabled: SideNavigationMenuBarProps['isDisabled'];
+    $marginTop?: number;
+    $variant: SideNavigationMenuBarProps['variant'];
+    $theme: SideNavigationMenuBarProps['theme'];
+};
+/**
+ * Hook props.
+ */
+interface MenuItem extends Omit<SideNavigationMenuItemProps, 'children'> {
+    title: string;
+}
+interface Menu extends Omit<SideNavigationMenuProps, 'children'> {
+    title: string;
+    children: MenuItem[];
+}
+type MenuBarItems = (Menu | MenuItem)[];
+
+export { Menu, MenuBarItems, MenuItem, SideNavigationMenuBarContextProps, SideNavigationMenuBarProps, SideNavigationMenuBarVariant, StyledSideNavigationMenuBarProps };

package/components/side-navigation-menu-bar/types.js

@@ -0,0 +1,22 @@
+/**
+ * Component variant.
+ */
+const SideNavigationMenuBarVariant = {
+  shrinked: 'shrinked',
+  standard: 'standard'
+};
+
+/**
+ * Context props.
+ */
+
+/**
+ * Component props.
+ */
+
+/**
+ * Hook props.
+ */
+
+export { SideNavigationMenuBarVariant };
+//# sourceMappingURL=types.js.map

package/components/side-navigation-menu-bar/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sources":["../../../src/components/side-navigation-menu-bar/types.ts"],"sourcesContent":["import { ComponentProps, Dispatch, MutableRefObject, SetStateAction } from 'react';\nimport { SideNavigationMenuProps } from '../side-navigation-menu';\nimport { SideNavigationMenuItemProps } from '../side-navigation-menu-item';\nimport { Theme, ValueOf } from '@redsift/design-system/types';\n\n/**\n * Component variant.\n */\nexport const SideNavigationMenuBarVariant = {\n  shrinked: 'shrinked',\n  standard: 'standard',\n} as const;\nexport type SideNavigationMenuBarVariant = ValueOf<typeof SideNavigationMenuBarVariant>;\n\n/**\n * Context props.\n */\nexport type SideNavigationMenuBarContextProps = {\n  /** List of menu items. */\n  menuItems: Set<HTMLAnchorElement | HTMLButtonElement>;\n  /** Side navigation variant. */\n  sideNavigationMenuBarVariant: SideNavigationMenuBarVariant;\n  /** Change side navigation variant. */\n  setSideNavigationMenuBarVariant: Dispatch<SetStateAction<SideNavigationMenuBarVariant>>;\n  /** Current open menu, used to close other menu when canHaveMultipleMenuOpenAtOnce is false. */\n  currentOpenMenuId?: string;\n  /** Change current open menu id. */\n  setCurrentOpenMenuId?: Dispatch<SetStateAction<string | undefined>>;\n};\n\n/**\n * Component props.\n */\nexport interface SideNavigationMenuBarProps extends ComponentProps<'nav'> {\n  /** Whether or not opening a menu closes the others. */\n  canHaveMultipleMenuOpenAtOnce?: boolean;\n  /** Whether the component is disabled or not. */\n  isDisabled?: boolean;\n  /** Custom props to pass to the menubar. */\n  menubarProps?: ComponentProps<'ul'>;\n  /** Custom ref to pass to the menubar. */\n  menubarRef?: MutableRefObject<HTMLUListElement>;\n  /** Theme. */\n  theme?: Theme;\n  /** Variant. */\n  variant?: SideNavigationMenuBarVariant;\n}\n\nexport type StyledSideNavigationMenuBarProps = Omit<SideNavigationMenuBarProps, 'isDisabled'> & {\n  $isDisabled: SideNavigationMenuBarProps['isDisabled'];\n  $marginTop?: number;\n  $variant: SideNavigationMenuBarProps['variant'];\n  $theme: SideNavigationMenuBarProps['theme'];\n};\n\n/**\n * Hook props.\n */\nexport interface MenuItem extends Omit<SideNavigationMenuItemProps, 'children'> {\n  title: string;\n}\nexport interface Menu extends Omit<SideNavigationMenuProps, 'children'> {\n  title: string;\n  children: MenuItem[];\n}\nexport type MenuBarItems = (Menu | MenuItem)[];\n"],"names":["SideNavigationMenuBarVariant","shrinked","standard"],"mappings":"AAKA;AACA;AACA;AACO,MAAMA,4BAA4B,GAAG;AAC1CC,EAAAA,QAAQ,EAAE,UAAU;AACpBC,EAAAA,QAAQ,EAAE,UAAA;AACZ,EAAU;;AAGV;AACA;AACA;;AAcA;AACA;AACA;;AAuBA;AACA;AACA;;;;"}

package/components/side-navigation-menu-bar/useSideNavigationMenuBar.d.ts

@@ -0,0 +1,9 @@
+import { MenuBarItems, SideNavigationMenuBarProps } from './types.js';
+
+interface UseSideNavigationMenuBarProps {
+    items: MenuBarItems;
+    isActive?: (href: string) => boolean;
+}
+declare const useSideNavigationMenuBar: ({ items, isActive, }: UseSideNavigationMenuBarProps) => Omit<SideNavigationMenuBarProps, 'ref'>;
+
+export { UseSideNavigationMenuBarProps, useSideNavigationMenuBar };