orcs-design-system 3.3.39 → 3.3.41

package/es/components/SideNavV2/components/ItemSection.js

@@ -0,0 +1,156 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Divider from "../../Divider";
+import NavItem from "../NavItem";
+import { filterVisibleItems, isItemActive } from "../utils/itemUtils";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const ItemSection = _ref => {
+  let {
+    items,
+    isExpanded,
+    isSmallScreen,
+    expandedItem,
+    handleItemClick,
+    navItemRefs,
+    showDivider = false,
+    dividerDisplay = ["none", "none", "none", "block"]
+  } = _ref;
+  const visibleItems = filterVisibleItems(items);
+  if (visibleItems.length === 0) {
+    return null;
+  }
+  const renderItem = item => {
+    if (item.hide) {
+      return null;
+    }
+    const Component = item.component;
+    return /*#__PURE__*/_jsx(NavItem, {
+      item: item,
+      isSmallScreen: isSmallScreen,
+      Component: Component,
+      isActive: isItemActive(item, expandedItem),
+      handleItemClick: handleItemClick,
+      navItemRefs: navItemRefs,
+      isExpanded: isExpanded
+    }, item.index);
+  };
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [showDivider && !isSmallScreen && /*#__PURE__*/_jsx(Divider, {
+      light: true,
+      display: dividerDisplay
+    }), visibleItems.map(renderItem)]
+  });
+};
+ItemSection.propTypes = {
+  items: PropTypes.arrayOf(PropTypes.shape({
+    index: PropTypes.number,
+    hide: PropTypes.bool,
+    component: PropTypes.elementType,
+    actionType: PropTypes.string,
+    isActive: PropTypes.bool
+  })).isRequired,
+  isExpanded: PropTypes.bool,
+  isSmallScreen: PropTypes.bool,
+  expandedItem: PropTypes.number,
+  handleItemClick: PropTypes.func.isRequired,
+  navItemRefs: PropTypes.object,
+  showDivider: PropTypes.bool,
+  dividerDisplay: PropTypes.array
+};
+ItemSection.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "ItemSection",
+  "props": {
+    "showDivider": {
+      "defaultValue": {
+        "value": "false",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "dividerDisplay": {
+      "defaultValue": {
+        "value": "[\"none\", \"none\", \"none\", \"block\"]",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "array"
+      },
+      "required": false
+    },
+    "items": {
+      "description": "",
+      "type": {
+        "name": "arrayOf",
+        "value": {
+          "name": "shape",
+          "value": {
+            "index": {
+              "name": "number",
+              "required": false
+            },
+            "hide": {
+              "name": "bool",
+              "required": false
+            },
+            "component": {
+              "name": "elementType",
+              "required": false
+            },
+            "actionType": {
+              "name": "string",
+              "required": false
+            },
+            "isActive": {
+              "name": "bool",
+              "required": false
+            }
+          }
+        }
+      },
+      "required": true
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "isSmallScreen": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "expandedItem": {
+      "description": "",
+      "type": {
+        "name": "number"
+      },
+      "required": false
+    },
+    "handleItemClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    },
+    "navItemRefs": {
+      "description": "",
+      "type": {
+        "name": "object"
+      },
+      "required": false
+    }
+  }
+};
+export default ItemSection;

package/es/components/SideNavV2/components/PanelControl.js

@@ -0,0 +1,128 @@
+import React from "react";
+import PropTypes from "prop-types";
+import Icon from "../../Icon";
+import { PanelControlTooltip, PanelControl } from "../styles/SideNavV2.styles";
+import { jsx as _jsx } from "react/jsx-runtime";
+const PanelControlComponent = _ref => {
+  let {
+    isExpanded,
+    onClick,
+    ariaLabel,
+    tooltipText,
+    direction = "right",
+    position,
+    tabIndex = "-1",
+    onBlur
+  } = _ref;
+  return /*#__PURE__*/_jsx(PanelControlTooltip, {
+    display: ["none", "none", "none", "inline-block"],
+    width: "fit-content",
+    direction: direction,
+    tabIndex: tabIndex,
+    text: tooltipText,
+    position: position,
+    children: /*#__PURE__*/_jsx(PanelControl, {
+      onClick: onClick,
+      "aria-label": ariaLabel,
+      onBlur: onBlur,
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: ["fas", isExpanded ? "chevron-left" : "chevron-right"]
+      })
+    })
+  });
+};
+PanelControlComponent.propTypes = {
+  isExpanded: PropTypes.bool,
+  onClick: PropTypes.func.isRequired,
+  ariaLabel: PropTypes.string.isRequired,
+  tooltipText: PropTypes.string.isRequired,
+  direction: PropTypes.oneOf(["left", "right", "top", "bottom"]),
+  position: PropTypes.string,
+  tabIndex: PropTypes.string,
+  onBlur: PropTypes.func
+};
+PanelControlComponent.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "PanelControlComponent",
+  "props": {
+    "direction": {
+      "defaultValue": {
+        "value": "\"right\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "enum",
+        "value": [{
+          "value": "\"left\"",
+          "computed": false
+        }, {
+          "value": "\"right\"",
+          "computed": false
+        }, {
+          "value": "\"top\"",
+          "computed": false
+        }, {
+          "value": "\"bottom\"",
+          "computed": false
+        }]
+      },
+      "required": false
+    },
+    "tabIndex": {
+      "defaultValue": {
+        "value": "\"-1\"",
+        "computed": false
+      },
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "isExpanded": {
+      "description": "",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "onClick": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": true
+    },
+    "ariaLabel": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "tooltipText": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": true
+    },
+    "position": {
+      "description": "",
+      "type": {
+        "name": "string"
+      },
+      "required": false
+    },
+    "onBlur": {
+      "description": "",
+      "type": {
+        "name": "func"
+      },
+      "required": false
+    }
+  }
+};
+export default PanelControlComponent;

package/es/components/SideNavV2/components/RenderCurrentViewSection.js

@@ -0,0 +1,39 @@
+import React from "react";
+import { createPortal } from "react-dom";
+import { CURRENT_VIEW_SECTION_ID } from "../constants/sideNav";
+import Divider from "../../Divider";
+import SideNavCurrentViewSection from "../sections/SideNavCurrentViewSection";
+import Flex from "../../Flex";
+import { useSideNavStateContext } from "../context/SideNavStateProvider";
+import useResponsive from "../hooks/useResponsive";
+import PropTypes from "prop-types";
+import { CurrentViewSectionShape } from "../types/sideNav";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const RenderCurrentViewSection = _ref => {
+  let {
+    viewingState
+  } = _ref;
+  const container = document.getElementById(CURRENT_VIEW_SECTION_ID);
+  const {
+    isExpanded
+  } = useSideNavStateContext();
+  const {
+    isSmallScreen
+  } = useResponsive();
+  return /*#__PURE__*/createPortal(/*#__PURE__*/_jsxs(Flex, {
+    flexDirection: "column",
+    gap: "s",
+    children: [/*#__PURE__*/_jsx(Divider, {
+      light: true,
+      display: ["none", "none", "none", "block"]
+    }), /*#__PURE__*/_jsx(SideNavCurrentViewSection, {
+      ...viewingState,
+      isExpanded: isExpanded,
+      isSmallScreen: isSmallScreen
+    })]
+  }), container);
+};
+RenderCurrentViewSection.propTypes = {
+  viewingState: PropTypes.shape(CurrentViewSectionShape)
+};
+export default RenderCurrentViewSection;

package/es/components/SideNavV2/components/index.js

@@ -0,0 +1,4 @@
+export { default as PanelControl } from "./PanelControl";
+export { default as ExpandedPanel } from "./ExpandedPanel";
+export { default as ItemSection } from "./ItemSection";
+export { default as BaseSection } from "./BaseSection";

package/es/components/SideNavV2/constants/sideNav.js

@@ -0,0 +1,21 @@
+export const BREAKPOINTS = {
+  SMALL_SCREEN: 900
+};
+export const DEFAULT_WIDTHS = {
+  normal: 300,
+  large: 500,
+  min: 200,
+  max: 700
+};
+export const RESIZE_CONFIG = {
+  MOBILE_MIN_HEIGHT: 200,
+  MOBILE_MAX_HEIGHT_RATIO: 0.8,
+  RESIZE_DEBOUNCE_MS: 100
+};
+export const ITEM_TYPES = {
+  COMPONENT: "component",
+  LINK: "link",
+  BUTTON: "button"
+};
+export const BADGE_VARIANTS = ["success", "warning", "danger", "primaryLight", "primary", "primaryDark", "secondary"];
+export const CURRENT_VIEW_SECTION_ID = "side-nav-current-view-section";

package/es/components/SideNavV2/context/SideNavStateProvider.js

@@ -0,0 +1,57 @@
+import React, { createContext, useContext, useState, useMemo } from "react";
+import PropTypes from "prop-types";
+import { jsx as _jsx } from "react/jsx-runtime";
+const SideNavStateContext = /*#__PURE__*/createContext();
+export const useSideNavStateContext = () => {
+  const context = useContext(SideNavStateContext);
+  if (!context) {
+    throw new Error("useSideNavStateContext must be used within a SideNavStateProvider");
+  }
+  return context;
+};
+export const SideNavStateProvider = _ref => {
+  let {
+    children
+  } = _ref;
+  const [expandedItem, setExpandedItem] = useState(null);
+  const [isExpanded, setIsExpanded] = useState(false);
+  const [expandedWidth, setExpandedWidth] = useState(null);
+  const value = useMemo(() => ({
+    expandedItem,
+    setExpandedItem,
+    isExpanded,
+    setIsExpanded,
+    expandedWidth,
+    setExpandedWidth
+  }), [expandedItem, isExpanded, expandedWidth]);
+  return /*#__PURE__*/_jsx(SideNavStateContext.Provider, {
+    value: value,
+    children: children
+  });
+};
+SideNavStateProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+  initialViewing: PropTypes.any
+};
+export default SideNavStateContext;
+SideNavStateProvider.__docgenInfo = {
+  "description": "",
+  "methods": [],
+  "displayName": "SideNavStateProvider",
+  "props": {
+    "children": {
+      "description": "",
+      "type": {
+        "name": "node"
+      },
+      "required": true
+    },
+    "initialViewing": {
+      "description": "",
+      "type": {
+        "name": "any"
+      },
+      "required": false
+    }
+  }
+};

package/es/components/SideNavV2/hooks/index.js

@@ -0,0 +1,3 @@
+export { default as useSideNavState } from "./useSideNavState";
+export { default as useResponsive } from "./useResponsive";
+export { default as useResize } from "./useResize";

package/es/components/SideNavV2/hooks/useResize.js

@@ -0,0 +1,70 @@
+import { useState, useEffect, useCallback } from "react";
+import { calculateDesktopWidth, calculateMobileHeight, applyResizeCursor, removeResizeCursor } from "../utils/resizeUtils";
+
+/**
+ * Custom hook to handle resize functionality
+ * @param {React.RefObject} expandedRef - Ref to the expanded panel
+ * @param {boolean} isSmallScreen - Whether we're on a small screen
+ * @param {number} expandedItem - Currently expanded item index
+ * @param {Function} onWidthChange - Callback to update width state
+ * @returns {Object} Object containing resize state and handlers
+ */
+const useResize = (expandedRef, isSmallScreen, expandedItem, onWidthChange) => {
+  const [isResizing, setIsResizing] = useState(false);
+  const [resizeStartY, setResizeStartY] = useState(0);
+  const [resizeStartHeight, setResizeStartHeight] = useState(0);
+  const handleResizeStart = e => {
+    e.preventDefault();
+    setIsResizing(true);
+    applyResizeCursor(isSmallScreen);
+    if (isSmallScreen && expandedRef.current) {
+      setResizeStartY(e.clientY);
+      setResizeStartHeight(expandedRef.current.offsetHeight);
+    }
+  };
+  const handleResizeMove = useCallback(e => {
+    if (!isResizing || !expandedRef.current) return;
+    if (isSmallScreen) {
+      // Vertical resizing for small screens
+      const newHeight = calculateMobileHeight(e.clientY, resizeStartY, resizeStartHeight);
+      expandedRef.current.style.height = `${newHeight}px`;
+    } else {
+      // Horizontal resizing for large screens
+      const parentContainer = expandedRef.current.parentElement;
+      const sideNavItems = parentContainer.querySelector('[data-testid="side-nav-items"]');
+      if (!sideNavItems) return;
+      const newWidth = calculateDesktopWidth(e.clientX, sideNavItems);
+
+      // Update the width state through the callback
+      if (onWidthChange) {
+        onWidthChange(newWidth);
+      }
+    }
+  }, [isResizing, expandedRef, isSmallScreen, resizeStartY, resizeStartHeight, onWidthChange]);
+  const handleResizeEnd = useCallback(() => {
+    setIsResizing(false);
+    removeResizeCursor();
+  }, []);
+
+  // Add global event listeners for resize
+  useEffect(() => {
+    if (isResizing) {
+      const handleMouseMove = e => {
+        handleResizeMove(e);
+      };
+      document.addEventListener("mousemove", handleMouseMove);
+      document.addEventListener("mouseup", handleResizeEnd);
+      return () => {
+        document.removeEventListener("mousemove", handleMouseMove);
+        document.removeEventListener("mouseup", handleResizeEnd);
+      };
+    }
+  }, [isResizing, expandedItem, isSmallScreen, resizeStartY, resizeStartHeight, onWidthChange, handleResizeMove, handleResizeEnd]);
+  return {
+    isResizing,
+    handleResizeStart,
+    handleResizeMove,
+    handleResizeEnd
+  };
+};
+export default useResize;

package/es/components/SideNavV2/hooks/useResponsive.js

@@ -0,0 +1,32 @@
+import { useState, useEffect } from "react";
+import { BREAKPOINTS, RESIZE_CONFIG } from "../constants/sideNav";
+
+/**
+ * Custom hook to handle responsive behavior
+ * @param {number} breakpoint - Breakpoint for small screen detection
+ * @returns {Object} Object containing responsive state
+ */
+const useResponsive = function () {
+  let breakpoint = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : BREAKPOINTS.SMALL_SCREEN;
+  const [windowWidth, setWindowWidth] = useState(window.innerWidth);
+  const isSmallScreen = windowWidth < breakpoint;
+  useEffect(() => {
+    let timeoutId;
+    const handleResize = () => {
+      clearTimeout(timeoutId);
+      timeoutId = setTimeout(() => {
+        setWindowWidth(window.innerWidth);
+      }, RESIZE_CONFIG.RESIZE_DEBOUNCE_MS);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
+      clearTimeout(timeoutId);
+    };
+  }, []);
+  return {
+    windowWidth,
+    isSmallScreen
+  };
+};
+export default useResponsive;

package/es/components/SideNavV2/hooks/useSideNavState.js

@@ -0,0 +1,88 @@
+import { useEffect, useRef, useMemo } from "react";
+import { findFirstExpandedByDefault } from "../utils/itemUtils";
+import { getInitialWidth as getInitialWidthUtil } from "../utils/resizeUtils";
+import useResponsive from "./useResponsive";
+import { useSideNavStateContext } from "../context/SideNavStateProvider";
+
+/**
+ * Custom hook to manage SideNavV2 state
+ * @param {Array} items - Navigation items
+ * @returns {Object} Object containing all state and handlers
+ */
+const useSideNavState = items => {
+  const {
+    expandedItem,
+    setExpandedItem,
+    isExpanded,
+    setIsExpanded,
+    expandedWidth,
+    setExpandedWidth
+  } = useSideNavStateContext();
+  const expandedRef = useRef(null);
+  const navItemRefs = useRef({});
+  const firstExpandedItemByDefault = findFirstExpandedByDefault(items);
+
+  // Initialize expanded item by default
+  useEffect(() => {
+    if (firstExpandedItemByDefault >= 0) {
+      setExpandedItem(firstExpandedItemByDefault);
+    }
+  }, [firstExpandedItemByDefault, setExpandedItem]);
+
+  // Set initial width when an item is expanded
+  useEffect(() => {
+    if (expandedItem !== null) {
+      const currentItem = items[expandedItem];
+      const initialWidth = getInitialWidthUtil(currentItem);
+      setExpandedWidth(initialWidth);
+    }
+  }, [expandedItem, items, setExpandedWidth]);
+
+  // Focus on expanded item when it changes
+  useEffect(() => {
+    if (expandedItem !== null && expandedRef.current) {
+      expandedRef.current.focus();
+    }
+  }, [expandedItem]);
+  const handleItemClick = item => {
+    const {
+      index: itemIndex,
+      actionType,
+      onClick: onButtonClick
+    } = item;
+    if (actionType === "link" || actionType === "button") {
+      setExpandedItem(null);
+      onButtonClick && onButtonClick(item);
+    } else {
+      setExpandedItem(itemIndex === expandedItem ? null : itemIndex);
+      onButtonClick && onButtonClick(item);
+    }
+  };
+  const handleBlur = item => {
+    handleItemClick(item);
+  };
+  const handleExpandToggle = () => {
+    setIsExpanded(!isExpanded);
+  };
+  const handleWidthChange = newWidth => {
+    setExpandedWidth(newWidth);
+  };
+  const {
+    isSmallScreen
+  } = useResponsive();
+  const isExpandedOnBigScreen = useMemo(() => isExpanded && !isSmallScreen, [isExpanded, isSmallScreen]);
+  return {
+    // State
+    expandedItem,
+    isExpanded: isExpandedOnBigScreen,
+    expandedWidth,
+    expandedRef,
+    navItemRefs,
+    // Handlers
+    handleItemClick,
+    handleBlur,
+    handleExpandToggle,
+    handleWidthChange
+  };
+};
+export default useSideNavState;

package/es/components/SideNavV2/index.js

@@ -0,0 +1,3 @@
+export { SideNavStateProvider, useSideNavStateContext } from "./context/SideNavStateProvider";
+export { default as RenderCurrentViewSection } from "./components/RenderCurrentViewSection";
+export { default } from "./SideNav";