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

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

@@ -0,0 +1,367 @@
+import { objectWithoutProperties as _objectWithoutProperties, extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import React__default, { forwardRef, useRef, useContext, useState, useEffect, useReducer, useCallback, useMemo } from 'react';
+import classNames from 'classnames';
+import { mdiChevronDown } from '@redsift/icons';
+import { StyledSideNavigationMenu } from './styles.js';
+import { SideNavigationMenuReducerActionType } from './types.js';
+import { SideNavigationMenuContext } from './context.js';
+import { SideNavigationMenuReducer } from './reducer.js';
+import { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context.js';
+import { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound.js';
+import { filterComponents } from '../../utils/filterComponents.js';
+import { StyledSideNavigationMenuItemIndicator } from '../side-navigation-menu-item/styles.js';
+import { useId } from '../../utils/useId.js';
+import { AppContainerContext } from '../app-container/context.js';
+import { SideNavigationMenuItem } from '../side-navigation-menu-item/SideNavigationMenuItem.js';
+import { useTheme } from '../theme/useTheme.js';
+import { AppSidePanelVariant } from '../app-side-panel/types.js';
+import { ThemeProvider } from '../theme/context.js';
+import { Flexbox } from '../flexbox/Flexbox.js';
+import { Icon } from '../icon/Icon.js';
+import { IconSize } from '../icon/types.js';
+import { Badge } from '../badge/Badge.js';
+
+const _excluded = ["aria-label", "buttonProps", "buttonRef", "children", "className", "badgeProps", "hasBadge", "icon", "iconProps", "iconRef", "id", "isDisabled", "isExpanded", "keepBadgeVisible", "menuProps", "menuRef", "tabIndex", "theme"];
+const COMPONENT_NAME = 'SideNavigationMenu';
+const CLASSNAME = 'redsift-side-navigation-menu';
+
+/**
+ * The SideNavigationMenu component.
+ */
+const SideNavigationMenu = /*#__PURE__*/forwardRef((props, ref) => {
+  const {
+      'aria-label': ariaLabel,
+      buttonProps = {},
+      buttonRef = useRef(),
+      children,
+      className,
+      badgeProps,
+      hasBadge,
+      icon,
+      iconProps,
+      iconRef = useRef(),
+      id: propsId,
+      isDisabled,
+      isExpanded: propsIsExpanded,
+      keepBadgeVisible,
+      menuProps = {},
+      menuRef = useRef(),
+      tabIndex,
+      theme: propsTheme
+    } = props,
+    forwardedProps = _objectWithoutProperties(props, _excluded);
+  const [_id] = useId();
+  const id = propsId !== null && propsId !== void 0 ? propsId : _id;
+  warnIfNoAccessibleLabelFound(props, undefined, 'SideNavigationMenu');
+  const appContainerState = useContext(AppContainerContext);
+  const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);
+  const theme = useTheme(propsTheme);
+  const [isFirstChild, setIsFirstChild] = useState(false);
+  const currentPosition = useRef(-1);
+  const {
+    menuItems: menubarItems
+  } = sideNavigationMenuBarContext || {};
+  useEffect(() => {
+    currentPosition.current = -1;
+  });
+
+  /**
+   * Create an array containing only valid children which can only be SideNavigationMenuItem.
+   * This prevent the navigation menubar to have more than two levels.
+   */
+  const childArray = filterComponents(SideNavigationMenuItem)(children);
+  const renderedMenuItems = childArray.map((child, index) => {
+    var _child$key, _child$key2;
+    if (child.props.isCurrent) {
+      currentPosition.current = index;
+    }
+    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,
+      isSecondLevel: true,
+      key: (_child$key2 = child.key) !== null && _child$key2 !== void 0 ? _child$key2 : index
+    }));
+  });
+  const menuItems = useRef(new Set()).current;
+  const [state, dispatch] = useReducer(SideNavigationMenuReducer, {
+    currentIndex: null,
+    isExpanded: Boolean(propsIsExpanded),
+    previousIndex: null
+  });
+  const {
+    isExpanded,
+    currentIndex,
+    previousIndex
+  } = state;
+  const first = useCallback(() => dispatch({
+    type: SideNavigationMenuReducerActionType.Move,
+    index: 0
+  }), []);
+  const last = useCallback(() => dispatch({
+    type: SideNavigationMenuReducerActionType.Move,
+    index: menuItems.size - 1
+  }), [menuItems.size]);
+  const move = useCallback(index => dispatch({
+    type: SideNavigationMenuReducerActionType.Move,
+    index
+  }), []);
+  const open = useCallback(() => {
+    var _sideNavigationMenuBa;
+    sideNavigationMenuBarContext === null || sideNavigationMenuBarContext === void 0 ? void 0 : (_sideNavigationMenuBa = sideNavigationMenuBarContext.setCurrentOpenMenuId) === null || _sideNavigationMenuBa === void 0 ? void 0 : _sideNavigationMenuBa.call(sideNavigationMenuBarContext, id);
+    dispatch({
+      type: SideNavigationMenuReducerActionType.Expand
+    });
+    appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.expandSidePanel();
+  }, []);
+  const close = useCallback(focusButton => {
+    if (isExpanded) {
+      if (focusButton) {
+        buttonRef.current.focus();
+      }
+      dispatch({
+        type: SideNavigationMenuReducerActionType.Collapse
+      });
+    }
+  }, [isExpanded]);
+  useEffect(() => {
+    if (sideNavigationMenuBarContext !== null && sideNavigationMenuBarContext !== void 0 && sideNavigationMenuBarContext.currentOpenMenuId && sideNavigationMenuBarContext.currentOpenMenuId !== id) {
+      close();
+    }
+  }, [sideNavigationMenuBarContext === null || sideNavigationMenuBarContext === void 0 ? void 0 : sideNavigationMenuBarContext.currentOpenMenuId]);
+  const previous = () => {
+    const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;
+    move(index);
+  };
+  const next = () => {
+    const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;
+    move(index);
+  };
+  const match = e => {
+    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 e.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;
+    });
+    move(index);
+  };
+  useEffect(() => {
+    if (appContainerState && (appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.sidePanelVariant) === AppSidePanelVariant.shrinked && isExpanded) {
+      close();
+    }
+  }, [appContainerState === null || appContainerState === void 0 ? void 0 : appContainerState.sidePanelVariant]);
+  const value = useMemo(() => ({
+    menuItems
+  }), [menuItems]);
+  useEffect(() => {
+    const items = Array.from(menuItems);
+    if (currentIndex !== previousIndex) {
+      const currentNode = items[currentIndex];
+      currentNode === null || currentNode === void 0 ? void 0 : currentNode.focus();
+    }
+  }, [menuItems, currentIndex, previousIndex]);
+  useEffect(() => {
+    if (!sideNavigationMenuBarContext) {
+      setIsFirstChild(true);
+      return;
+    }
+    const menuItemNode = buttonRef.current;
+    if (menuItemNode) {
+      menubarItems.add(menuItemNode);
+    }
+    return () => {
+      menubarItems.delete(menuItemNode);
+    };
+  }, [menubarItems]);
+  const keyDownOnButton = e => {
+    if (isDisabled) {
+      return;
+    }
+    const currentNode = e.target;
+    switch (e.code) {
+      case 'Enter':
+      case 'Space':
+        e.stopPropagation();
+        currentNode.click();
+        first();
+        break;
+      case 'ArrowRight':
+        e.stopPropagation();
+        first();
+        break;
+      case 'ArrowLeft':
+        last();
+        break;
+    }
+  };
+  const buttonEventHandler = {
+    onClick: event => {
+      var _buttonProps$onClick;
+      if (isDisabled) {
+        return;
+      }
+      (_buttonProps$onClick = buttonProps.onClick) === null || _buttonProps$onClick === void 0 ? void 0 : _buttonProps$onClick.call(buttonProps, event);
+      event.stopPropagation();
+      if (isExpanded) {
+        close();
+      } else {
+        open();
+      }
+    },
+    onKeyDown: event => {
+      var _buttonProps$onKeyDow;
+      (_buttonProps$onKeyDow = buttonProps.onKeyDown) === null || _buttonProps$onKeyDow === void 0 ? void 0 : _buttonProps$onKeyDow.call(buttonProps, event);
+      keyDownOnButton(event);
+    }
+  };
+  const keyDownOnMenuItemList = e => {
+    const currentNode = e.target;
+    switch (e.code) {
+      case 'ArrowUp':
+        e.stopPropagation();
+        e.preventDefault();
+        previous();
+        break;
+      case 'ArrowDown':
+        e.stopPropagation();
+        e.preventDefault();
+        next();
+        break;
+      case 'ArrowLeft':
+        e.preventDefault();
+        e.stopPropagation();
+        close(true);
+        break;
+      case 'ArrowRight':
+        e.preventDefault();
+        close(!sideNavigationMenuBarContext);
+        break;
+      case 'Home':
+        e.stopPropagation();
+        e.preventDefault();
+        first();
+        break;
+      case 'End':
+        e.stopPropagation();
+        e.preventDefault();
+        last();
+        break;
+      case 'Enter':
+      case 'Space':
+        e.preventDefault();
+        currentNode.click();
+        break;
+      case 'Escape':
+        e.stopPropagation();
+        e.preventDefault();
+        close(true);
+        break;
+      default:
+        e.stopPropagation();
+        match(e);
+        break;
+    }
+  };
+  const menuItemListEventHandler = {
+    onKeyDown: event => {
+      var _menuProps$onKeyDown;
+      (_menuProps$onKeyDown = menuProps.onKeyDown) === null || _menuProps$onKeyDown === void 0 ? void 0 : _menuProps$onKeyDown.call(menuProps, event);
+      keyDownOnMenuItemList(event);
+    },
+    onClick: event => {
+      var _menuProps$onClick;
+      if (isDisabled) {
+        return;
+      }
+      (_menuProps$onClick = menuProps.onClick) === null || _menuProps$onClick === void 0 ? void 0 : _menuProps$onClick.call(menuProps, event);
+    }
+  };
+  const sideNavigationVariant = sideNavigationMenuBarContext === null || sideNavigationMenuBarContext === void 0 ? void 0 : sideNavigationMenuBarContext.sideNavigationMenuBarVariant;
+  return /*#__PURE__*/React__default.createElement(ThemeProvider, {
+    value: {
+      theme
+    }
+  }, /*#__PURE__*/React__default.createElement(StyledSideNavigationMenu, _extends({}, forwardedProps, {
+    $isDisabled: isDisabled,
+    $isExpanded: isExpanded,
+    $numberOfChildren: renderedMenuItems.length,
+    $theme: theme,
+    $variant: sideNavigationVariant,
+    className: classNames(SideNavigationMenu.className, className),
+    id: id,
+    ref: ref,
+    tabIndex: undefined
+  }), /*#__PURE__*/React__default.createElement(SideNavigationMenuContext.Provider, {
+    value: value
+  }, /*#__PURE__*/React__default.createElement(Flexbox, {
+    flexDirection: "row",
+    gap: "0px"
+  }, /*#__PURE__*/React__default.createElement("div", {
+    className: `${SideNavigationMenu.className}__current-indicator-container`
+  }, currentPosition.current !== -1 ? /*#__PURE__*/React__default.createElement(StyledSideNavigationMenuItemIndicator, {
+    $theme: theme,
+    style: {
+      position: 'relative',
+      top: isExpanded ? `${32 + currentPosition.current * 32}px` : 0,
+      transition: 'top 300ms ease-out'
+    }
+  }) : null), /*#__PURE__*/React__default.createElement("div", {
+    className: `${SideNavigationMenu.className}__menu-container`
+  }, /*#__PURE__*/React__default.createElement("button", _extends({}, buttonProps, {
+    "aria-disabled": isDisabled,
+    "aria-expanded": isExpanded ? 'true' : 'false',
+    "aria-haspopup": "true",
+    ref: buttonRef,
+    role: "menuitem",
+    tabIndex: tabIndex !== undefined ? tabIndex : isFirstChild ? 0 : -1,
+    type: "button"
+  }, buttonEventHandler), /*#__PURE__*/React__default.createElement(Icon, _extends({
+    color: `var(--redsift-side-navigation-color-menu-item-text-${isDisabled ? 'disabled' : 'resting'})`
+  }, iconProps, {
+    icon: icon,
+    ref: iconRef,
+    className: classNames(iconProps === null || iconProps === void 0 ? void 0 : iconProps.className, 'first'),
+    size: IconSize.medium
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: "content"
+  }, ariaLabel), hasBadge && (!isExpanded || keepBadgeVisible) ? /*#__PURE__*/React__default.createElement(Badge, _extends({
+    color: "error"
+  }, badgeProps)) : null, /*#__PURE__*/React__default.createElement(Icon, {
+    icon: mdiChevronDown,
+    className: `${SideNavigationMenu.className}__expand-icon`,
+    size: IconSize.medium
+  })), /*#__PURE__*/React__default.createElement("ul", _extends({}, menuProps, {
+    "aria-label": ariaLabel,
+    "aria-orientation": "vertical",
+    ref: menuRef,
+    role: "menu"
+  }, menuItemListEventHandler), renderedMenuItems))))));
+});
+SideNavigationMenu.className = CLASSNAME;
+SideNavigationMenu.displayName = COMPONENT_NAME;
+
+export { SideNavigationMenu };
+//# sourceMappingURL=SideNavigationMenu.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideNavigationMenu.js","sources":["../../../src/components/side-navigation-menu/SideNavigationMenu.tsx"],"sourcesContent":["import React, {\n  forwardRef,\n  KeyboardEvent,\n  MouseEvent,\n  MutableRefObject,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useReducer,\n  useRef,\n  useState,\n} from 'react';\nimport classNames from 'classnames';\nimport { mdiChevronDown } from '@redsift/icons';\nimport { Comp } from '../../types';\nimport { SideNavigationMenuItem } from '../side-navigation-menu-item';\nimport { Icon, IconSize } from '../icon';\nimport { Badge } from '../badge';\nimport { StyledSideNavigationMenu } from './styles';\nimport { SideNavigationMenuContextProps, SideNavigationMenuProps, SideNavigationMenuReducerActionType } from './types';\nimport { SideNavigationMenuContext } from './context';\nimport { SideNavigationMenuReducer } from './reducer';\nimport { SideNavigationMenuBarContext } from '../side-navigation-menu-bar/context';\nimport { warnIfNoAccessibleLabelFound } from '../../utils/warnIfNoAccessibleLabelFound';\nimport { filterComponents } from '../../utils/filterComponents';\nimport { Flexbox } from '../flexbox';\nimport { StyledSideNavigationMenuItemIndicator } from '../side-navigation-menu-item/styles';\nimport { AppContainerContext } from '../app-container';\nimport { AppSidePanelVariant } from '../app-side-panel';\nimport { ThemeProvider, useTheme } from '../theme';\nimport { useId } from '../../utils';\n\nconst COMPONENT_NAME = 'SideNavigationMenu';\nconst CLASSNAME = 'redsift-side-navigation-menu';\n\n/**\n * The SideNavigationMenu component.\n */\nexport const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivElement> = forwardRef((props, ref) => {\n  const {\n    'aria-label': ariaLabel,\n    buttonProps = {},\n    buttonRef = useRef<HTMLButtonElement>() as MutableRefObject<HTMLButtonElement>,\n    children,\n    className,\n    badgeProps,\n    hasBadge,\n    icon,\n    iconProps,\n    iconRef = useRef<HTMLElement>(),\n    id: propsId,\n    isDisabled,\n    isExpanded: propsIsExpanded,\n    keepBadgeVisible,\n    menuProps = {},\n    menuRef = useRef<HTMLUListElement>(),\n    tabIndex,\n    theme: propsTheme,\n    ...forwardedProps\n  } = props;\n  const [_id] = useId();\n  const id = propsId ?? _id;\n\n  warnIfNoAccessibleLabelFound(props, undefined, 'SideNavigationMenu');\n\n  const appContainerState = useContext(AppContainerContext);\n  const sideNavigationMenuBarContext = useContext(SideNavigationMenuBarContext);\n  const theme = useTheme(propsTheme);\n  const [isFirstChild, setIsFirstChild] = useState(false);\n  const currentPosition = useRef(-1);\n  const { menuItems: menubarItems } = sideNavigationMenuBarContext || {};\n\n  useEffect(() => {\n    currentPosition.current = -1;\n  });\n\n  /**\n   * Create an array containing only valid children which can only be SideNavigationMenuItem.\n   * This prevent the navigation menubar to have more than two levels.\n   */\n  const childArray = filterComponents(SideNavigationMenuItem)(children);\n  const renderedMenuItems = childArray.map((child, index) => {\n    if (child.props.isCurrent) {\n      currentPosition.current = index;\n    }\n    return (\n      <li key={child.key ?? index} role=\"none\">\n        {React.cloneElement(child, {\n          isDisabled: child.props.isDisabled || isDisabled || undefined,\n          isSecondLevel: true,\n          key: child.key ?? index,\n        })}\n      </li>\n    );\n  });\n\n  const menuItems = useRef<Set<HTMLAnchorElement | HTMLButtonElement>>(new Set()).current;\n  const [state, dispatch] = useReducer(SideNavigationMenuReducer, {\n    currentIndex: null!,\n    isExpanded: Boolean(propsIsExpanded),\n    previousIndex: null!,\n  });\n  const { isExpanded, currentIndex, previousIndex } = state;\n\n  const first = useCallback(() => dispatch({ type: SideNavigationMenuReducerActionType.Move, index: 0 }), []);\n\n  const last = useCallback(\n    () =>\n      dispatch({\n        type: SideNavigationMenuReducerActionType.Move,\n        index: menuItems.size - 1,\n      }),\n    [menuItems.size]\n  );\n\n  const move = useCallback((index: number) => dispatch({ type: SideNavigationMenuReducerActionType.Move, index }), []);\n\n  const open = useCallback(() => {\n    sideNavigationMenuBarContext?.setCurrentOpenMenuId?.(id);\n    dispatch({ type: SideNavigationMenuReducerActionType.Expand });\n    appContainerState?.expandSidePanel();\n  }, []);\n\n  const close = useCallback(\n    (focusButton?: boolean) => {\n      if (isExpanded) {\n        if (focusButton) {\n          buttonRef.current.focus();\n        }\n\n        dispatch({ type: SideNavigationMenuReducerActionType.Collapse });\n      }\n    },\n    [isExpanded]\n  );\n\n  useEffect(() => {\n    if (sideNavigationMenuBarContext?.currentOpenMenuId && sideNavigationMenuBarContext.currentOpenMenuId !== id) {\n      close();\n    }\n  }, [sideNavigationMenuBarContext?.currentOpenMenuId]);\n\n  const previous = () => {\n    const index = currentIndex === 0 ? menuItems.size - 1 : currentIndex - 1;\n    move(index);\n  };\n\n  const next = () => {\n    const index = currentIndex === menuItems.size - 1 ? 0 : currentIndex + 1;\n    move(index);\n  };\n\n  const match = (e: 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 e.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    move(index);\n  };\n\n  useEffect(() => {\n    if (appContainerState && appContainerState?.sidePanelVariant === AppSidePanelVariant.shrinked && isExpanded) {\n      close();\n    }\n  }, [appContainerState?.sidePanelVariant]);\n\n  const value = useMemo<SideNavigationMenuContextProps>(() => ({ menuItems }), [menuItems]);\n\n  useEffect(() => {\n    const items = Array.from(menuItems);\n\n    if (currentIndex !== previousIndex) {\n      const currentNode = items[currentIndex] as HTMLElement;\n      currentNode?.focus();\n    }\n  }, [menuItems, currentIndex, previousIndex]);\n\n  useEffect(() => {\n    if (!sideNavigationMenuBarContext) {\n      setIsFirstChild(true);\n      return;\n    }\n\n    const menuItemNode = (buttonRef as MutableRefObject<HTMLButtonElement>).current;\n\n    if (menuItemNode) {\n      menubarItems.add(menuItemNode);\n    }\n\n    return () => {\n      menubarItems.delete(menuItemNode);\n    };\n  }, [menubarItems]);\n\n  const keyDownOnButton = (e: KeyboardEvent<HTMLButtonElement>) => {\n    if (isDisabled) {\n      return;\n    }\n    const currentNode = e.target as HTMLUListElement;\n\n    switch (e.code) {\n      case 'Enter':\n      case 'Space':\n        e.stopPropagation();\n        currentNode.click();\n        first();\n        break;\n      case 'ArrowRight':\n        e.stopPropagation();\n        first();\n        break;\n      case 'ArrowLeft':\n        last();\n        break;\n      default:\n        break;\n    }\n  };\n\n  const buttonEventHandler = {\n    onClick: (event: MouseEvent<HTMLButtonElement>) => {\n      if (isDisabled) {\n        return;\n      }\n\n      buttonProps.onClick?.(event);\n      event.stopPropagation();\n      if (isExpanded) {\n        close();\n      } else {\n        open();\n      }\n    },\n    onKeyDown: (event: KeyboardEvent<HTMLButtonElement>) => {\n      buttonProps.onKeyDown?.(event);\n      keyDownOnButton(event);\n    },\n  };\n\n  const keyDownOnMenuItemList = (e: KeyboardEvent<HTMLUListElement>) => {\n    const currentNode = e.target as HTMLUListElement;\n\n    switch (e.code) {\n      case 'ArrowUp':\n        e.stopPropagation();\n        e.preventDefault();\n        previous();\n        break;\n      case 'ArrowDown':\n        e.stopPropagation();\n        e.preventDefault();\n        next();\n        break;\n      case 'ArrowLeft':\n        e.preventDefault();\n        e.stopPropagation();\n        close(true);\n        break;\n      case 'ArrowRight':\n        e.preventDefault();\n        close(!sideNavigationMenuBarContext);\n        break;\n      case 'Home':\n        e.stopPropagation();\n        e.preventDefault();\n        first();\n        break;\n      case 'End':\n        e.stopPropagation();\n        e.preventDefault();\n        last();\n        break;\n      case 'Enter':\n      case 'Space':\n        e.preventDefault();\n        currentNode.click();\n        break;\n      case 'Escape':\n        e.stopPropagation();\n        e.preventDefault();\n        close(true);\n        break;\n      default:\n        e.stopPropagation();\n        match(e);\n        break;\n    }\n  };\n\n  const menuItemListEventHandler = {\n    onKeyDown: (event: KeyboardEvent<HTMLUListElement>) => {\n      menuProps.onKeyDown?.(event);\n      keyDownOnMenuItemList(event);\n    },\n    onClick: (event: MouseEvent<HTMLUListElement>) => {\n      if (isDisabled) {\n        return;\n      }\n      menuProps.onClick?.(event);\n    },\n  };\n\n  const sideNavigationVariant = sideNavigationMenuBarContext?.sideNavigationMenuBarVariant;\n\n  return (\n    <ThemeProvider value={{ theme }}>\n      <StyledSideNavigationMenu\n        {...forwardedProps}\n        $isDisabled={isDisabled}\n        $isExpanded={isExpanded}\n        $numberOfChildren={renderedMenuItems.length}\n        $theme={theme}\n        $variant={sideNavigationVariant}\n        className={classNames(SideNavigationMenu.className, className)}\n        id={id}\n        ref={ref as MutableRefObject<HTMLDivElement>}\n        tabIndex={undefined}\n      >\n        <SideNavigationMenuContext.Provider value={value}>\n          <Flexbox flexDirection=\"row\" gap=\"0px\">\n            <div className={`${SideNavigationMenu.className}__current-indicator-container`}>\n              {currentPosition.current !== -1 ? (\n                <StyledSideNavigationMenuItemIndicator\n                  $theme={theme}\n                  style={{\n                    position: 'relative',\n                    top: isExpanded ? `${32 + currentPosition.current * 32}px` : 0,\n                    transition: 'top 300ms ease-out',\n                  }}\n                />\n              ) : null}\n            </div>\n            <div className={`${SideNavigationMenu.className}__menu-container`}>\n              <button\n                {...buttonProps}\n                aria-disabled={isDisabled}\n                aria-expanded={isExpanded ? 'true' : 'false'}\n                aria-haspopup=\"true\"\n                ref={buttonRef as MutableRefObject<HTMLButtonElement>}\n                role=\"menuitem\"\n                tabIndex={tabIndex !== undefined ? tabIndex : isFirstChild ? 0 : -1}\n                type=\"button\"\n                {...buttonEventHandler}\n              >\n                <Icon\n                  color={`var(--redsift-side-navigation-color-menu-item-text-${isDisabled ? 'disabled' : 'resting'})`}\n                  {...iconProps}\n                  icon={icon!}\n                  ref={iconRef as MutableRefObject<HTMLElement>}\n                  className={classNames(iconProps?.className, 'first')}\n                  size={IconSize.medium}\n                />\n                <span className=\"content\">{ariaLabel}</span>\n                {hasBadge && (!isExpanded || keepBadgeVisible) ? <Badge color=\"error\" {...badgeProps} /> : null}\n                <Icon\n                  icon={mdiChevronDown}\n                  className={`${SideNavigationMenu.className}__expand-icon`}\n                  size={IconSize.medium}\n                />\n              </button>\n              <ul\n                {...menuProps}\n                aria-label={ariaLabel}\n                aria-orientation=\"vertical\"\n                ref={menuRef as MutableRefObject<HTMLUListElement>}\n                role=\"menu\"\n                {...menuItemListEventHandler}\n              >\n                {renderedMenuItems}\n              </ul>\n            </div>\n          </Flexbox>\n        </SideNavigationMenuContext.Provider>\n      </StyledSideNavigationMenu>\n    </ThemeProvider>\n  );\n});\nSideNavigationMenu.className = CLASSNAME;\nSideNavigationMenu.displayName = COMPONENT_NAME;\n"],"names":["COMPONENT_NAME","CLASSNAME","SideNavigationMenu","forwardRef","props","ref","ariaLabel","buttonProps","buttonRef","useRef","children","className","badgeProps","hasBadge","icon","iconProps","iconRef","id","propsId","isDisabled","isExpanded","propsIsExpanded","keepBadgeVisible","menuProps","menuRef","tabIndex","theme","propsTheme","forwardedProps","_objectWithoutProperties","_excluded","_id","useId","warnIfNoAccessibleLabelFound","undefined","appContainerState","useContext","AppContainerContext","sideNavigationMenuBarContext","SideNavigationMenuBarContext","useTheme","isFirstChild","setIsFirstChild","useState","currentPosition","menuItems","menubarItems","useEffect","current","childArray","filterComponents","SideNavigationMenuItem","renderedMenuItems","map","child","index","_child$key","_child$key2","isCurrent","React","createElement","key","role","cloneElement","isSecondLevel","Set","state","dispatch","useReducer","SideNavigationMenuReducer","currentIndex","Boolean","previousIndex","first","useCallback","type","SideNavigationMenuReducerActionType","Move","last","size","move","open","_sideNavigationMenuBa","setCurrentOpenMenuId","call","Expand","expandSidePanel","close","focusButton","focus","Collapse","currentOpenMenuId","previous","next","match","e","items","Array","from","reorderedItems","slice","matches","filter","menuItem","textContent","firstLetter","toLowerCase","charAt","length","currentNode","nextMatch","includes","findIndex","item","sidePanelVariant","AppSidePanelVariant","shrinked","value","useMemo","menuItemNode","add","delete","keyDownOnButton","target","code","stopPropagation","click","buttonEventHandler","onClick","event","_buttonProps$onClick","onKeyDown","_buttonProps$onKeyDow","keyDownOnMenuItemList","preventDefault","menuItemListEventHandler","_menuProps$onKeyDown","_menuProps$onClick","sideNavigationVariant","sideNavigationMenuBarVariant","ThemeProvider","StyledSideNavigationMenu","_extends","$isDisabled","$isExpanded","$numberOfChildren","$theme","$variant","classNames","SideNavigationMenuContext","Provider","Flexbox","flexDirection","gap","StyledSideNavigationMenuItemIndicator","style","position","top","transition","Icon","color","IconSize","medium","Badge","mdiChevronDown","displayName"],"mappings":"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"}

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

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

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

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

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

@@ -0,0 +1,26 @@
+import { objectSpread2 as _objectSpread2 } from '../../_virtual/_rollupPluginBabelHelpers.js';
+import { SideNavigationMenuReducerActionType } from './types.js';
+
+const SideNavigationMenuReducer = (state, action) => {
+  switch (action.type) {
+    case SideNavigationMenuReducerActionType.Expand:
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        isExpanded: true
+      });
+    case SideNavigationMenuReducerActionType.Collapse:
+      return {
+        isExpanded: false,
+        currentIndex: null,
+        previousIndex: null
+      };
+    case SideNavigationMenuReducerActionType.Move:
+      return _objectSpread2(_objectSpread2({}, state), {}, {
+        isExpanded: true,
+        currentIndex: action.index,
+        previousIndex: state.currentIndex
+      });
+  }
+};
+
+export { SideNavigationMenuReducer };
+//# sourceMappingURL=reducer.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"reducer.js","sources":["../../../src/components/side-navigation-menu/reducer.ts"],"sourcesContent":["import {\n  SideNavigationMenuReducerState,\n  SideNavigationMenuReducerAction,\n  SideNavigationMenuReducerActionType,\n} from './types';\n\nexport const SideNavigationMenuReducer = (\n  state: SideNavigationMenuReducerState,\n  action: SideNavigationMenuReducerAction\n): SideNavigationMenuReducerState => {\n  switch (action.type) {\n    case SideNavigationMenuReducerActionType.Expand:\n      return { ...state, isExpanded: true };\n    case SideNavigationMenuReducerActionType.Collapse:\n      return {\n        isExpanded: false,\n        currentIndex: null!,\n        previousIndex: null!,\n      };\n    case SideNavigationMenuReducerActionType.Move:\n      return {\n        ...state,\n        isExpanded: true,\n        currentIndex: action.index!,\n        previousIndex: state.currentIndex,\n      };\n  }\n};\n"],"names":["SideNavigationMenuReducer","state","action","type","SideNavigationMenuReducerActionType","Expand","_objectSpread","isExpanded","Collapse","currentIndex","previousIndex","Move","index"],"mappings":";;;MAMaA,yBAAyB,GAAGA,CACvCC,KAAqC,EACrCC,MAAuC,KACJ;EACnC,QAAQA,MAAM,CAACC,IAAI;IACjB,KAAKC,mCAAmC,CAACC,MAAM;AAC7C,MAAA,OAAAC,cAAA,CAAAA,cAAA,CAAA,EAAA,EAAYL,KAAK,CAAA,EAAA,EAAA,EAAA;AAAEM,QAAAA,UAAU,EAAE,IAAA;AAAI,OAAA,CAAA,CAAA;IACrC,KAAKH,mCAAmC,CAACI,QAAQ;MAC/C,OAAO;AACLD,QAAAA,UAAU,EAAE,KAAK;AACjBE,QAAAA,YAAY,EAAE,IAAK;AACnBC,QAAAA,aAAa,EAAE,IAAA;OAChB,CAAA;IACH,KAAKN,mCAAmC,CAACO,IAAI;AAC3C,MAAA,OAAAL,cAAA,CAAAA,cAAA,CAAA,EAAA,EACKL,KAAK,CAAA,EAAA,EAAA,EAAA;AACRM,QAAAA,UAAU,EAAE,IAAI;QAChBE,YAAY,EAAEP,MAAM,CAACU,KAAM;QAC3BF,aAAa,EAAET,KAAK,CAACQ,YAAAA;AAAY,OAAA,CAAA,CAAA;AAEvC,GAAA;AACF;;;;"}

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

@@ -0,0 +1,196 @@
+import styled, { css } from 'styled-components';
+import { SideNavigationMenuBarVariant } from '../side-navigation-menu-bar/types.js';
+
+/**
+ * Component style.
+ */
+const StyledSideNavigationMenu = styled.div`
+  .redsift-side-navigation-menu__current-indicator-container {
+    min-width: 4px;
+  }
+
+  .redsift-side-navigation-menu__menu-container {
+    width: 100%;
+  }
+
+  .redsift-badge {
+    margin-left: 8px;
+  }
+
+  ${_ref => {
+  let {
+    $isDisabled,
+    $variant,
+    $theme
+  } = _ref;
+  return css`
+    .redsift-side-navigation-menu__menu-container > button {
+      ${!$isDisabled ? css`
+            & {
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting);
+            }
+          ` : css`
+            & {
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);
+            }
+          `}
+      align-items: center;
+      background-color: var(--redsift-color-${$theme}-components-side-navigation-background);
+      border: none;
+      border-radius: 0 4px 4px 0;
+      display: flex;
+      font-family: var(--redsift-typography-body-font-family);
+      font-size: 14px;
+      font-weight: var(--redsift-typography-body-font-weight);
+      gap: 0;
+      height: 40px;
+      line-height: var(--redsift-typography-body-line-height);
+      margin-left: -4px;
+      transition: padding 300ms ease-out;
+      padding: 0 16px 0 ${$variant === SideNavigationMenuBarVariant.shrinked ? '16px' : '16px'};
+      text-decoration: none;
+      text-transform: uppercase;
+      width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});
+
+      :hover,
+      :focus-visible {
+        outline: none;
+
+        ${!$isDisabled ? css`
+              background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-hover);
+              &,
+              .redsift-icon.first,
+              .redsift-side-navigation-menu__expand-icon {
+                color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-hover);
+              }
+              cursor: pointer;
+            ` : ''}
+      }
+
+      :active {
+        ${!$isDisabled ? css`
+              background-color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-background-active);
+            ` : ''}
+      }
+
+      @media (prefers-reduced-motion: no-preference) {
+        :focus-visible {
+          > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+            outline: 2px solid var(--redsift-color-primary-n);
+            transition: outline-offset 75ms ease-out;
+          }
+
+          :not(:active):focus-visible {
+            > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+              transition-duration: 0.25s;
+            }
+          }
+        }
+
+        :not(:active):focus-visible {
+          > span${$variant === SideNavigationMenuBarVariant.shrinked ? '.first' : '.content'} {
+            outline-offset: 0.25rem;
+          }
+        }
+      }
+    }
+
+    .content {
+      transition: opacity 300ms ease-out;
+      opacity: ${$variant === SideNavigationMenuBarVariant.shrinked ? '0' : '1'};
+      overflow: hidden;
+      white-space: nowrap;
+    }
+  `;
+}}
+
+  .first {
+    box-sizing: unset;
+    margin-right: 8px;
+  }
+
+  .redsift-side-navigation-menu__expand-icon {
+    transition: transform 300ms ease-out;
+    ${_ref2 => {
+  let {
+    $isDisabled,
+    $theme
+  } = _ref2;
+  return !$isDisabled ? css`
+            &,
+            .redsift-icon.first {
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-resting);
+            }
+          ` : css`
+            &,
+            .redsift-icon.first {
+              color: var(--redsift-color-${$theme}-components-side-navigation-menu-item-text-disabled);
+            }
+          `;
+}}
+    ${_ref3 => {
+  let {
+    $isExpanded
+  } = _ref3;
+  return !$isExpanded ? css`
+            transform: rotate(0);
+          ` : css`
+            transform: rotate(-180deg);
+          `;
+}}
+    margin-left: auto;
+
+    transition: opacity 300ms ease-out;
+    opacity: ${_ref4 => {
+  let {
+    $variant
+  } = _ref4;
+  return $variant === SideNavigationMenuBarVariant.standard ? '1' : '0';
+}};
+  }
+
+  [dir='rtl'] & {
+    .redsift-side-navigation-menu__expand-icon {
+      margin-left: unset;
+      margin-right: auto;
+    }
+  }
+
+  /**
+   * Display children or not
+   */
+
+  .redsift-side-navigation-menu__menu-container > ul {
+    list-style: none;
+    margin: unset;
+    padding: unset;
+    margin-left: -4px;
+
+    ${_ref5 => {
+  let {
+    $variant
+  } = _ref5;
+  return css`
+      width: calc(100% + ${$variant === SideNavigationMenuBarVariant.shrinked ? '0px' : '4px'});
+    `;
+}}
+    margin-bottom: 4px;
+    max-width: 241px;
+    transition: height 300ms ease-out;
+    overflow: hidden;
+    ${_ref6 => {
+  let {
+    $isExpanded,
+    $numberOfChildren
+  } = _ref6;
+  return $isExpanded ? css`
+            height: ${$numberOfChildren * 32}px;
+          ` : css`
+            height: 0;
+          `;
+}};
+  }
+`;
+
+export { StyledSideNavigationMenu };
+//# sourceMappingURL=styles.js.map