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

package/_internal/SideNavigationMenu.js

@@ -1,9 +1,591 @@
-import { l as SideNavigationMenuProps } from './types23.js';
-import { C as Comp } from './helpers.js';
+import { _ as _objectSpread2, b as _objectWithoutProperties, c as _extends } from './_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 styled, { css } from 'styled-components';
+import { S as SideNavigationMenuBarVariant, b as SideNavigationMenuBarContext, c as SideNavigationMenuContext, d as StyledSideNavigationMenuItemIndicator, a as SideNavigationMenuItem } from './SideNavigationMenuItem.js';
+import { w as warnIfNoAccessibleLabelFound } from './warnIfNoAccessibleLabelFound.js';
+import { f as filterComponents } from './filterComponents.js';
+import { u as useId } from './useId.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';
+import { F as Flexbox } from './Flexbox2.js';
+import { a as Icon, I as IconSize } from './Icon2.js';
+import { a as Badge } from './Badge2.js';
+
+/**
+ * Context props.
+ */
+
+/**
+ * Reducer props.
+ */
+
+let SideNavigationMenuReducerActionType = /*#__PURE__*/function (SideNavigationMenuReducerActionType) {
+  SideNavigationMenuReducerActionType["Expand"] = "expand";
+  SideNavigationMenuReducerActionType["Collapse"] = "collapse";
+  SideNavigationMenuReducerActionType["Move"] = "move";
+  return SideNavigationMenuReducerActionType;
+}({});
+
+/**
+ * Component props.
+ */
+
+/**
+ * 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;
+          `;
+}};
+  }
+`;
+
+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
+      });
+  }
+};
+
+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.
  */
-declare const SideNavigationMenu: Comp<SideNavigationMenuProps, HTMLDivElement>;
+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 as S };
+export { SideNavigationMenuReducerActionType as S, SideNavigationMenu as a };
+//# sourceMappingURL=SideNavigationMenu.js.map