orcs-design-system/es/components/SideNavV2/SideNav.js

TeamForm's Design System, aka: ORCS

import React from "react";
import PropTypes from "prop-types";
import SideNavTeamsSection from "./sections/SideNavTeamsSection";
import SideNavPinnedSection from "./sections/SideNavPinnedSection";

// Hooks
import useSideNavState from "./hooks/useSideNavState";
import useResponsive from "./hooks/useResponsive";
import useResize from "./hooks/useResize";

// Utilities
import { categorizeItems } from "./utils/itemUtils";

// Styled Components
import { SideNavWrapper, SideNavItems } from "./styles/SideNavV2.styles";

// Components
import PanelControlComponent from "./components/PanelControl";
import ExpandedPanel from "./components/ExpandedPanel";
import ItemSection from "./components/ItemSection";
import CurrentViewSectionPortalTarget from "./components/CurrentViewSectionPortalTarget";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
const SideNavV2 = _ref => {
  let {
    items,
    sideNavHeight,
    yourTeams,
    pinnedItems
  } = _ref;
  const {
    expandedItem,
    isExpanded,
    expandedWidth,
    expandedRef,
    navItemRefs,
    wrapperRef,
    isLocked,
    handleItemClick,
    handleBlur,
    handleWidthChange,
    handleLockToggle
  } = useSideNavState(items);
  const {
    isSmallScreen
  } = useResponsive();

  // Get the current expanded item
  const currentItem = expandedItem !== null ? items[expandedItem] : null;
  const {
    handleResizeStart
  } = useResize(expandedRef, isSmallScreen, expandedItem, handleWidthChange, currentItem);

  // Categorize items
  const {
    topAlignedItems,
    pageSpecificItems,
    bottomAlignedItems,
    allItems
  } = categorizeItems(items);
  return /*#__PURE__*/_jsxs(SideNavWrapper, {
    ref: wrapperRef,
    sideNavHeight: sideNavHeight,
    children: [/*#__PURE__*/_jsxs(SideNavItems, {
      isExpanded: isExpanded,
      "data-testid": "side-nav-items",
      children: [!isSmallScreen && /*#__PURE__*/_jsx(PanelControlComponent, {
        isExpanded: isExpanded,
        isLocked: isLocked,
        onClick: handleLockToggle,
        ariaLabel: isLocked ? "unlock navigation" : isExpanded ? "lock navigation" : "open navigation",
        mt: "10px",
        mb: "4px",
        tooltipText: isLocked ? "Collapse" : isExpanded ? "Keep open" : "Expand navigation",
        mode: "lock"
      }), /*#__PURE__*/_jsx(ItemSection, {
        items: topAlignedItems,
        isExpanded: isExpanded,
        isSmallScreen: isSmallScreen,
        expandedItem: expandedItem,
        handleItemClick: handleItemClick,
        navItemRefs: navItemRefs
      }), /*#__PURE__*/_jsx(ItemSection, {
        items: pageSpecificItems,
        isExpanded: isExpanded,
        isSmallScreen: isSmallScreen,
        expandedItem: expandedItem,
        handleItemClick: handleItemClick,
        navItemRefs: navItemRefs,
        showDivider: true
      }), /*#__PURE__*/_jsx(CurrentViewSectionPortalTarget, {}), yourTeams && yourTeams.length > 0 && /*#__PURE__*/_jsx(SideNavTeamsSection, {
        teams: yourTeams,
        isExpanded: isExpanded
      }), pinnedItems && pinnedItems.length > 0 && /*#__PURE__*/_jsx(SideNavPinnedSection, {
        items: pinnedItems,
        isExpanded: isExpanded
      }), /*#__PURE__*/_jsx(ItemSection, {
        items: bottomAlignedItems,
        isExpanded: isExpanded,
        isSmallScreen: isSmallScreen,
        expandedItem: expandedItem,
        handleItemClick: handleItemClick,
        navItemRefs: navItemRefs,
        showDivider: true
      })]
    }), allItems.map((item, index) => {
      if (item.actionType !== "component") return null;
      if (index !== expandedItem || item.hide) return null;
      return /*#__PURE__*/_jsx(ExpandedPanel, {
        item: item,
        expandedItem: expandedItem,
        isExpanded: isExpanded,
        expandedWidth: expandedWidth,
        sideNavHeight: sideNavHeight,
        isSmallScreen: isSmallScreen,
        expandedRef: expandedRef,
        onResizeStart: handleResizeStart,
        onItemClick: handleItemClick,
        onBlur: handleBlur
      }, item.name);
    })]
  });
};
SideNavV2.propTypes = {
  sideNavHeight: PropTypes.string.isRequired,
  initiallyExpandedItemIndex: PropTypes.number,
  items: PropTypes.arrayOf(PropTypes.shape({
    iconName: PropTypes.string.isRequired,
    name: PropTypes.string.isRequired,
    badgeNumber: PropTypes.string,
    badgeDot: PropTypes.bool,
    hide: PropTypes.bool,
    large: PropTypes.bool,
    bottomAligned: PropTypes.bool,
    actionType: PropTypes.oneOf(["component", "link", "button"]).isRequired,
    component: PropTypes.elementType,
    link: PropTypes.string,
    onClick: PropTypes.func
  })).isRequired,
  LinkComponent: PropTypes.elementType,
  // viewing prop is now optional since it can come from context

  yourTeams: PropTypes.arrayOf(PropTypes.shape({
    avatar: PropTypes.string,
    name: PropTypes.string.isRequired,
    link: PropTypes.string.isRequired
  })),
  pinnedItems: PropTypes.arrayOf(PropTypes.shape({
    avatar: PropTypes.string,
    name: PropTypes.string.isRequired,
    link: PropTypes.string.isRequired,
    shape: PropTypes.string,
    onUnpin: PropTypes.func
  }))
};
SideNavV2.__docgenInfo = {
  "description": "",
  "methods": [],
  "displayName": "SideNavV2",
  "props": {
    "sideNavHeight": {
      "description": "",
      "type": {
        "name": "string"
      },
      "required": true
    },
    "initiallyExpandedItemIndex": {
      "description": "",
      "type": {
        "name": "number"
      },
      "required": false
    },
    "items": {
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "iconName": {
              "name": "string",
              "required": true
            },
            "name": {
              "name": "string",
              "required": true
            },
            "badgeNumber": {
              "name": "string",
              "required": false
            },
            "badgeDot": {
              "name": "bool",
              "required": false
            },
            "hide": {
              "name": "bool",
              "required": false
            },
            "large": {
              "name": "bool",
              "required": false
            },
            "bottomAligned": {
              "name": "bool",
              "required": false
            },
            "actionType": {
              "name": "enum",
              "value": [{
                "value": "\"component\"",
                "computed": false
              }, {
                "value": "\"link\"",
                "computed": false
              }, {
                "value": "\"button\"",
                "computed": false
              }],
              "required": true
            },
            "component": {
              "name": "elementType",
              "required": false
            },
            "link": {
              "name": "string",
              "required": false
            },
            "onClick": {
              "name": "func",
              "required": false
            }
          }
        }
      },
      "required": true
    },
    "LinkComponent": {
      "description": "",
      "type": {
        "name": "elementType"
      },
      "required": false
    },
    "yourTeams": {
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "avatar": {
              "name": "string",
              "required": false
            },
            "name": {
              "name": "string",
              "required": true
            },
            "link": {
              "name": "string",
              "required": true
            }
          }
        }
      },
      "required": false
    },
    "pinnedItems": {
      "description": "",
      "type": {
        "name": "arrayOf",
        "value": {
          "name": "shape",
          "value": {
            "avatar": {
              "name": "string",
              "required": false
            },
            "name": {
              "name": "string",
              "required": true
            },
            "link": {
              "name": "string",
              "required": true
            },
            "shape": {
              "name": "string",
              "required": false
            },
            "onUnpin": {
              "name": "func",
              "required": false
            }
          }
        }
      },
      "required": false
    }
  }
};
export default SideNavV2;