@redsift/design-system 11.6.0-muiv5-alpha.5 → 11.6.0-muiv5-alpha.7

package/_internal/useListboxItem.js

@@ -1,32 +1,129 @@
-import React, { RefObject } from 'react';
-import { f as ListboxProps, d as ListboxContextProps, a as ListboxState, c as ListboxAction, U as UseListboxItemProps } from './types19.js';
-import { C as Comp } from './helpers.js';
+import React__default, { useContext, useCallback, useEffect } from 'react';
+import { c as useFocusOnListItem } from './useFocusOnListItem.js';
 
-declare const ActiveDescendantListbox: React.ForwardRefExoticComponent<Pick<Omit<ListboxProps, "onChange"> & {
-    context: ListboxContextProps;
-}, "label" | "slot" | "style" | "title" | "left" | "right" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "width" | "alignContent" | "alignItems" | "flexDirection" | "flexWrap" | "gap" | "justifyContent" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyItems" | "display" | "position" | "top" | "bottom" | "zIndex" | "background" | "backgroundColor" | "border" | "borderTop" | "borderBottom" | "borderLeft" | "borderRight" | "borderRadius" | "boxShadow" | "aria-label" | "aria-labelledby" | "variant" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isInvalid" | "isRequired" | "isDisabled" | "padding" | "paddingTop" | "paddingBottom" | "direction" | "paddingLeft" | "paddingRight" | "values" | "defaultValues" | "isReadOnly" | "context" | "focusOnClick" | "focusOnInit" | "loopAround" | "focusType" | "listRole" | "activedescendant" | "maxOptionsLength" | "selectionMode"> & React.RefAttributes<HTMLDivElement>>;
+const LISTBOX_INITIAL_STATE = {
+  isDisabled: false,
+  isReadOnly: false,
+  selectedValues: [],
+  selectionMode: 'single'
+};
+const ListboxContext = /*#__PURE__*/React__default.createContext({
+  state: LISTBOX_INITIAL_STATE,
+  dispatch: () => {}
+});
 
-declare const RovingTabindexListbox: React.ForwardRefExoticComponent<Pick<Omit<ListboxProps, "onChange"> & {
-    context: ListboxContextProps;
-}, "label" | "slot" | "style" | "title" | "left" | "right" | "margin" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "height" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "width" | "alignContent" | "alignItems" | "flexDirection" | "flexWrap" | "gap" | "justifyContent" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "justifyItems" | "display" | "position" | "top" | "bottom" | "zIndex" | "background" | "backgroundColor" | "border" | "borderTop" | "borderBottom" | "borderLeft" | "borderRight" | "borderRadius" | "boxShadow" | "aria-label" | "aria-labelledby" | "variant" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "isInvalid" | "isRequired" | "isDisabled" | "padding" | "paddingTop" | "paddingBottom" | "direction" | "paddingLeft" | "paddingRight" | "values" | "defaultValues" | "isReadOnly" | "context" | "focusOnClick" | "focusOnInit" | "loopAround" | "focusType" | "listRole" | "activedescendant" | "maxOptionsLength" | "selectionMode"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * Component variant.
+ */
+const ListboxSelectionMode = {
+  single: 'single',
+  multiple: 'multiple'
+};
 
 /**
- * The Listbox component.
- * Can be used as controlled or uncontrolled.
+ * Context props.
  */
-declare const Listbox: Comp<ListboxProps, HTMLDivElement>;
 
-declare const LISTBOX_INITIAL_STATE: ListboxState;
-declare const ListboxContext: React.Context<ListboxContextProps>;
+let ListboxActionType = /*#__PURE__*/function (ListboxActionType) {
+  ListboxActionType["TOGGLE"] = "TOGGLE";
+  ListboxActionType["SET"] = "SET";
+  ListboxActionType["UPDATE_OPTIONS"] = "UPDATE_OPTIONS";
+  return ListboxActionType;
+}({});
+/**
+ * Component variant.
+ */
+const ListboxVariant = {
+  standalone: 'standalone',
+  unstyled: 'unstyled'
+};
 
-declare const ListboxReducer: (state: ListboxState, action: ListboxAction) => ListboxState;
+/**
+ * Component props.
+ */
 
-declare function useListboxItem(props: {
-    domElementRef: RefObject<Element>;
-    value: string;
-    id?: string;
-    isDisabled?: boolean;
-    propsIsSelected?: boolean;
-}): UseListboxItemProps;
+function useListboxItem(props) {
+  var _context$state, _context$state$select;
+  const {
+    domElementRef,
+    value,
+    id,
+    isDisabled,
+    propsIsSelected
+  } = props;
+  const {
+    tabIndex,
+    isFocused,
+    handleKeyDown: handleFocusKeyDown,
+    handleClick: handleFocusClick
+  } = useFocusOnListItem({
+    domElementRef,
+    isDisabled: isDisabled,
+    id,
+    value
+  });
+  const context = useContext(ListboxContext);
+  const handleKeyDown = useCallback(event => {
+    handleFocusKeyDown(event);
+    const code = event.code;
+    if (code === 'Enter' || code === 'Space') {
+      if (context.state.selectionMode === 'multiple') {
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value,
+            activedescendant: [id, value]
+          }
+        });
+      } else {
+        context.dispatch({
+          type: ListboxActionType.SET,
+          payload: {
+            values: [value],
+            activedescendant: [id, value]
+          }
+        });
+      }
+    }
+  }, []);
+  const handleClick = useCallback(() => {
+    handleFocusClick();
+    if (context.state.selectionMode === 'multiple') {
+      if (value) {
+        context.dispatch({
+          type: ListboxActionType.TOGGLE,
+          payload: {
+            value,
+            activedescendant: [id, value]
+          }
+        });
+      }
+    } else {
+      context.dispatch({
+        type: ListboxActionType.SET,
+        payload: {
+          values: [value],
+          activedescendant: [id, value]
+        }
+      });
+    }
+  }, [value]);
+  const isSelected = propsIsSelected !== null && propsIsSelected !== void 0 ? propsIsSelected : (context === null || context === void 0 ? void 0 : (_context$state = context.state) === null || _context$state === void 0 ? void 0 : (_context$state$select = _context$state.selectedValues) === null || _context$state$select === void 0 ? void 0 : _context$state$select.find(selectedValue => selectedValue === value)) !== undefined;
+  useEffect(() => {
+    if (isFocused && domElementRef.current) {
+      var _current;
+      (_current = domElementRef.current) === null || _current === void 0 ? void 0 : _current.focus();
+    }
+  }, [isFocused]);
+  return {
+    tabIndex,
+    isFocused,
+    isSelected,
+    isDisabled,
+    handleKeyDown,
+    handleClick
+  };
+}
 
-export { ActiveDescendantListbox as A, Listbox as L, RovingTabindexListbox as R, LISTBOX_INITIAL_STATE as a, ListboxContext as b, ListboxReducer as c, useListboxItem as u };
+export { ListboxSelectionMode as L, ListboxActionType as a, ListboxVariant as b, LISTBOX_INITIAL_STATE as c, ListboxContext as d, useListboxItem as u };
+//# sourceMappingURL=useListboxItem.js.map

package/_internal/useSideNavigationMenuBar.js

@@ -1,9 +1,373 @@
-import { e as MenuBarItems, b as SideNavigationMenuBarProps } from './types23.js';
+import { b as _objectWithoutProperties, c as _extends } from './_rollupPluginBabelHelpers.js';
+import React__default, { useState, useEffect, forwardRef, useRef, useContext, useMemo } from 'react';
+import classNames from 'classnames';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import styled, { css } from 'styled-components';
+import { S as SideNavigationMenuBarVariant, b as SideNavigationMenuBarContext, a as SideNavigationMenuItem } from './SideNavigationMenuItem.js';
+import { f as filterComponents } from './filterComponents.js';
+import { a as SideNavigationMenu } from './SideNavigationMenu.js';
+import { A as AppContainerContext } from './context.js';
+import { u as useTheme, a as ThemeProvider } from './useTheme.js';
+import { A as AppSidePanelVariant } from './types.js';
 
-interface UseSideNavigationMenuBarProps {
-    items: MenuBarItems;
-    isActive?: (href: string) => boolean;
-}
-declare const useSideNavigationMenuBar: ({ items, isActive, }: UseSideNavigationMenuBarProps) => Omit<SideNavigationMenuBarProps, 'ref'>;
+/**
+ * Get the bounding rect of a component.
+ */
+const useBoundingClientRect = (ref, deps) => {
+  const [boundingRect, setBoundingRect] = useState({});
+  useEffect(() => {
+    if (ref.current) {
+      setBoundingRect(ref.current.getBoundingClientRect());
+    }
+  }, deps);
+  return boundingRect;
+};
 
-export { UseSideNavigationMenuBarProps as U, useSideNavigationMenuBar as u };
+/**
+ * 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;
+  }
+`;
+
+const _excluded$1 = ["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$1);
+  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;
+
+const _excluded = ["title", "href", "ref"],
+  _excluded2 = ["title", "children", "ref"],
+  _excluded3 = ["title", "href", "ref"];
+const isMenu = item => {
+  return item.children !== undefined;
+};
+const useSideNavigationMenuBar = _ref => {
+  let {
+    items,
+    isActive
+  } = _ref;
+  const menuBarChildren = [];
+  items.map(item => {
+    if (!isMenu(item)) {
+      const {
+          title,
+          href,
+          ref
+        } = item,
+        rest = _objectWithoutProperties(item, _excluded);
+      menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends({
+        key: title,
+        isCurrent: isActive ? isActive(href) : undefined
+      }, rest, {
+        href: href,
+        ref: ref
+      }), title));
+    } else {
+      const {
+          title,
+          children,
+          ref
+        } = item,
+        rest = _objectWithoutProperties(item, _excluded2);
+      menuBarChildren.push( /*#__PURE__*/React__default.createElement(SideNavigationMenu, _extends({
+        key: title,
+        "aria-label": title,
+        isExpanded: isActive ? children.filter(child => isActive(child.href)).length > 0 : undefined,
+        hasBadge: children.filter(child => child.badge).length > 0
+      }, rest, {
+        ref: ref
+      }), children.map(child => {
+        const {
+            title,
+            href,
+            ref
+          } = child,
+          rest = _objectWithoutProperties(child, _excluded3);
+        return /*#__PURE__*/React__default.createElement(SideNavigationMenuItem, _extends({
+          key: title,
+          href: href,
+          isCurrent: isActive ? isActive(href) : undefined
+        }, rest, {
+          ref: ref
+        }), title);
+      })));
+    }
+  });
+  return {
+    children: menuBarChildren
+  };
+};
+
+export { SideNavigationMenuBar as S, useSideNavigationMenuBar as a, useBoundingClientRect as u };
+//# sourceMappingURL=useSideNavigationMenuBar.js.map

package/_internal/useTheme.js

@@ -1,13 +1,15 @@
-import React from 'react';
+import React__default, { useContext } from 'react';
 import { T as Theme } from './colors.js';
 
-declare const ThemeContext: React.Context<{
-    theme?: Theme | undefined;
-} | null>;
-declare const ThemeProvider: React.Provider<{
-    theme?: Theme | undefined;
-} | null>;
+const ThemeContext = /*#__PURE__*/React__default.createContext(null);
+const ThemeProvider = ThemeContext.Provider;
 
-declare function useTheme(theme?: Theme): Theme;
+function useTheme(theme) {
+  var _ref;
+  const themeState = useContext(ThemeContext);
+  const contextTheme = (_ref = theme !== null && theme !== void 0 ? theme : themeState === null || themeState === void 0 ? void 0 : themeState.theme) !== null && _ref !== void 0 ? _ref : Theme.light;
+  return contextTheme;
+}
 
 export { ThemeContext as T, ThemeProvider as a, useTheme as u };
+//# sourceMappingURL=useTheme.js.map