orcs-design-system/es/components/SideNavV2/context/SideNavStateProvider.js

TeamForm's Design System, aka: ORCS

import React, { createContext, useContext, useState, useMemo } from "react";
import PropTypes from "prop-types";

/**
 * Context for managing SideNavV2 state
 * Provides state management for expanded items, navigation expansion, and panel sizing
 */
import { jsx as _jsx } from "react/jsx-runtime";
const SideNavStateContext = /*#__PURE__*/createContext();

/**
 * Hook to access the SideNavV2 context
 *
 * @returns {Object} Context value containing state and setters
 * @throws {Error} When used outside of SideNavStateProvider
 */
export const useSideNavStateContext = () => {
  const context = useContext(SideNavStateContext);
  if (!context) {
    throw new Error("useSideNavStateContext must be used within a SideNavStateProvider");
  }
  return context;
};

/**
 * Provider component for SideNavV2 state management
 *
 * Manages the following state:
 * - expandedItem: Currently expanded navigation item index (null when none)
 * - isExpanded: Whether the sidebar is expanded (collapsed shows icons only)
 * - expandedWidth: Width/height of the expanded panel (desktop: width, mobile: height)
 * - isLocked: Reserved for future use (e.g. lock sidebar open)
 *
 * @param {Object} props - Component props
 * @param {React.ReactNode} props.children - Child components to render
 * @param {any} [props.initialViewing] - Deprecated; kept for backward compatibility
 * @returns {JSX.Element} Context provider wrapper
 */
export const SideNavStateProvider = _ref => {
  let {
    children
  } = _ref;
  const [expandedItem, setExpandedItem] = useState(null);
  const [isExpanded, setIsExpanded] = useState(true);
  const [expandedWidth, setExpandedWidth] = useState(null);
  const [isLocked, setIsLocked] = useState(false);

  // Memoize context value to prevent unnecessary re-renders
  const value = useMemo(() => ({
    expandedItem,
    setExpandedItem,
    isExpanded,
    setIsExpanded,
    expandedWidth,
    setExpandedWidth,
    isLocked,
    setIsLocked
  }), [expandedItem, isExpanded, expandedWidth, isLocked]);
  return /*#__PURE__*/_jsx(SideNavStateContext.Provider, {
    value: value,
    children: children
  });
};
SideNavStateProvider.propTypes = {
  children: PropTypes.node.isRequired,
  initialViewing: PropTypes.any // Kept for backward compatibility
};
export default SideNavStateContext;
SideNavStateProvider.__docgenInfo = {
  "description": "Provider component for SideNavV2 state management\n\nManages the following state:\n- expandedItem: Currently expanded navigation item index (null when none)\n- isExpanded: Whether the sidebar is expanded (collapsed shows icons only)\n- expandedWidth: Width/height of the expanded panel (desktop: width, mobile: height)\n- isLocked: Reserved for future use (e.g. lock sidebar open)\n\n@param {Object} props - Component props\n@param {React.ReactNode} props.children - Child components to render\n@param {any} [props.initialViewing] - Deprecated; kept for backward compatibility\n@returns {JSX.Element} Context provider wrapper",
  "methods": [],
  "displayName": "SideNavStateProvider",
  "props": {
    "children": {
      "description": "",
      "type": {
        "name": "node"
      },
      "required": true
    },
    "initialViewing": {
      "description": "",
      "type": {
        "name": "any"
      },
      "required": false
    }
  }
};