carbon-react 154.0.0 → 154.1.0

package/lib/components/vertical-menu/responsive-vertical-menu/__internal__/focus.context.js

@@ -0,0 +1,217 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useMenuFocus = exports.MenuFocusProvider = void 0;
+var _react = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+/* eslint-disable no-console */
+/**
+ * Provides context for managing focus within a menu component.
+ * This context allows for tracking expanded items, focusing on specific items,
+ * and moving focus in various directions (next, previous, parent, first child, last child).
+ */
+
+// Create a context for menu focus
+const MenuFocusContext = /*#__PURE__*/(0, _react.createContext)(undefined);
+
+// Custom hook to use the MenuFocusContext
+const useMenuFocus = () => {
+  // Get the current context value
+  const context = (0, _react.useContext)(MenuFocusContext);
+
+  // If context is undefined, it means the hook is being used outside of a MenuFocusProvider
+  /* istanbul ignore next */
+  if (!context) {
+    console.error("useMenuFocus must be used within a MenuFocusProvider");
+    // Return a default value to avoid breakages
+    return {
+      expandedItems: [],
+      expandItem: () => {},
+      focusedItemId: null,
+      getRegisteredItems: () => [],
+      focusItem: () => {},
+      moveFocus: () => {},
+      registerMenuItem: () => {}
+    };
+  }
+
+  // Return the current context value
+  return context;
+};
+exports.useMenuFocus = useMenuFocus;
+const MenuFocusProvider = ({
+  children
+}) => {
+  // State to track expanded items
+  const [expandedItems, setExpandedItems] = (0, _react.useState)([]);
+  // State to track the currently focused item
+  const [focusedItemId, setFocusedItemId] = (0, _react.useState)(null);
+
+  // Ref to hold registered menu items
+  const menuItemsRef = (0, _react.useRef)(new Map());
+
+  // Function to register a menu item
+  // This function takes an id, a ref to the item, and an optional parentId
+  // and stores the item in the menuItemsRef map.
+  // If a parentId is provided, it also updates the parent's childIds array
+  // to include the new item.
+  const registerMenuItem = (0, _react.useCallback)((id, ref, parentId) => {
+    menuItemsRef.current.set(id, {
+      ref,
+      parentId,
+      childIds: []
+    });
+    if (parentId) {
+      const parentItem = menuItemsRef.current.get(parentId);
+      parentItem?.childIds.push(id);
+    }
+  }, []);
+
+  // Function to get all registered menu items
+  // This function returns an array of objects, each containing the id,
+  // ref, parentId, and childIds of the registered items.
+  const getRegisteredItems = (0, _react.useCallback)(() => {
+    const items = Array.from(menuItemsRef.current.entries()).map(([id, {
+      ref,
+      parentId,
+      childIds
+    }]) => ({
+      id,
+      ref,
+      parentId,
+      childIds
+    }));
+    return items;
+  }, []);
+
+  // Function to focus on a specific menu item
+  // This function takes an id and focuses the corresponding item
+  // by calling the focus method on its ref.
+  // It also updates the focusedItemId state to the new id.
+  const focusItem = (0, _react.useCallback)(id => {
+    const item = menuItemsRef.current.get(id);
+    /* istanbul ignore else */
+    if (item?.ref?.current) {
+      item.ref.current.focus();
+      setFocusedItemId(id);
+    }
+  }, []);
+
+  // Function to expand or collapse a menu item
+  // This function takes an id and a boolean value (expand)
+  // and updates the expandedItems state accordingly.
+  // If expand is true, it adds the id to the expandedItems array;
+  // otherwise, it removes the id from the array.
+  const expandItem = (0, _react.useCallback)((id, expand) => {
+    if (expand) {
+      setExpandedItems(prev => [...prev, id]);
+    } else {
+      setExpandedItems(prev => prev.filter(itemId => itemId !== id));
+    }
+  }, []);
+
+  // Function to move focus in a specific direction
+  // This function takes a direction (next, prev, parent, firstChild, lastChild)
+  // and moves the focus accordingly.
+  // It uses the current focusedItemId to determine the current item
+  // and then finds the next item based on the direction.
+  // It also handles expanding/collapsing items as needed.
+  const moveFocus = (0, _react.useCallback)(direction => {
+    /* istanbul ignore if */
+    if (!focusedItemId) return;
+
+    // Get the current item based on the focusedItemId
+    const currentItem = menuItemsRef.current.get(focusedItemId);
+
+    // If the current item is not found, return early
+    /* istanbul ignore if */
+    if (!currentItem) return;
+    let allItems = [];
+    let visibleItems = [];
+    let currentIndex = -1;
+    switch (direction) {
+      // Move focus to the parent item
+      case "parent":
+        /* istanbul ignore else */
+        if (currentItem.parentId) {
+          focusItem(currentItem.parentId);
+        }
+        break;
+
+      // Move focus to the first child
+      // If the current item has children and is not already expanded,
+      // expand it and focus on the first child
+      case "firstChild":
+        /* istanbul ignore else */
+        if (currentItem.childIds.length > 0) {
+          if (!expandedItems.includes(focusedItemId)) {
+            expandItem(focusedItemId, true);
+          }
+          focusItem(currentItem.childIds[0]);
+        }
+        break;
+
+      // Move focus to the last child
+      // Moving backwards through the menu works slightly differently:
+      // If the current item has children, get the last child. Before focusing on it,
+      // check if the last child is expanded. If it is, focus on its last child.
+      // If the last child is not expanded (i.e. it's just a link), focus on it directly.
+      case "lastChild":
+        /* istanbul ignore else */
+        if (currentItem.childIds.length > 0) {
+          const lastChild = currentItem.childIds[currentItem.childIds.length - 1];
+          /* istanbul ignore else */
+          if (lastChild) {
+            /* istanbul ignore if */
+            if (expandedItems.includes(lastChild)) {
+              const lastChildItem = getRegisteredItems().find(item => item.id === lastChild);
+              if (lastChildItem) {
+                focusItem(lastChildItem.childIds[lastChildItem.childIds.length - 1]);
+              }
+            } else {
+              focusItem(lastChild);
+            }
+          }
+        }
+        break;
+
+      // Move focus to the next or previous item
+      // This case handles both next and previous focus movement.
+      // Whilst this functionality is not currently used in the menu,
+      // it is included for completeness/future-proofing.
+      /* istanbul ignore next */
+      default:
+        allItems = Array.from(menuItemsRef.current.keys());
+        visibleItems = allItems.filter(id => {
+          const item = menuItemsRef.current.get(id);
+          if (!item || !item.parentId) return true;
+          const parentVisible = expandedItems.includes(item.parentId);
+          return parentVisible;
+        });
+        currentIndex = visibleItems.indexOf(focusedItemId);
+        if (currentIndex !== -1) {
+          const nextIndex = direction === "next" ? (currentIndex + 1) % visibleItems.length : (currentIndex - 1 + visibleItems.length) % visibleItems.length;
+          focusItem(visibleItems[nextIndex]);
+        }
+        break;
+    }
+  }, [focusedItemId, focusItem, expandedItems, expandItem, getRegisteredItems]);
+  const value = {
+    expandedItems,
+    expandItem,
+    focusedItemId,
+    focusItem,
+    getRegisteredItems,
+    registerMenuItem,
+    moveFocus
+  };
+
+  // Provide the current context value to the MenuFocusContext
+  return /*#__PURE__*/_react.default.createElement(MenuFocusContext.Provider, {
+    value: value
+  }, children);
+};
+exports.MenuFocusProvider = MenuFocusProvider;

package/lib/components/vertical-menu/responsive-vertical-menu/index.d.ts

@@ -0,0 +1,7 @@
+export { ResponsiveVerticalMenuProvider } from "./responsive-vertical-menu.context";
+export { ResponsiveVerticalMenu } from "./responsive-vertical-menu.component";
+export type { ResponsiveVerticalMenuProps } from "./responsive-vertical-menu.component";
+export { ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item";
+export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item";
+export { ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider";
+export type { ResponsiveVerticalMenuDividerProps } from "./responsive-vertical-menu-divider";

package/lib/components/vertical-menu/responsive-vertical-menu/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ResponsiveVerticalMenu", {
+  enumerable: true,
+  get: function () {
+    return _responsiveVerticalMenu2.ResponsiveVerticalMenu;
+  }
+});
+Object.defineProperty(exports, "ResponsiveVerticalMenuDivider", {
+  enumerable: true,
+  get: function () {
+    return _responsiveVerticalMenuDivider.ResponsiveVerticalMenuDivider;
+  }
+});
+Object.defineProperty(exports, "ResponsiveVerticalMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _responsiveVerticalMenuItem.ResponsiveVerticalMenuItem;
+  }
+});
+Object.defineProperty(exports, "ResponsiveVerticalMenuProvider", {
+  enumerable: true,
+  get: function () {
+    return _responsiveVerticalMenu.ResponsiveVerticalMenuProvider;
+  }
+});
+var _responsiveVerticalMenu = require("./responsive-vertical-menu.context");
+var _responsiveVerticalMenu2 = require("./responsive-vertical-menu.component");
+var _responsiveVerticalMenuItem = require("./responsive-vertical-menu-item");
+var _responsiveVerticalMenuDivider = require("./responsive-vertical-menu-divider");

package/lib/components/vertical-menu/responsive-vertical-menu/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../esm/components/vertical-menu/responsive-vertical-menu/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ResponsiveVerticalMenuDivider } from "./responsive-vertical-menu-divider.component";
+export type { ResponsiveVerticalMenuDividerProps } from "./responsive-vertical-menu-divider.component";

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ResponsiveVerticalMenuDivider", {
+  enumerable: true,
+  get: function () {
+    return _responsiveVerticalMenuDivider.default;
+  }
+});
+var _responsiveVerticalMenuDivider = _interopRequireDefault(require("./responsive-vertical-menu-divider.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import { MarginProps } from "styled-system";
+export interface ResponsiveVerticalMenuDividerProps extends MarginProps {
+}
+export declare const ResponsiveVerticalMenuDivider: (props: ResponsiveVerticalMenuDividerProps) => React.JSX.Element;
+export default ResponsiveVerticalMenuDivider;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.js

@@ -0,0 +1,27 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ResponsiveVerticalMenuDivider = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _responsiveVerticalMenuDivider = require("./responsive-vertical-menu-divider.style");
+var _utils = require("../../../../style/utils");
+var _depth = require("../__internal__/depth.context");
+var _responsiveVerticalMenu = require("../responsive-vertical-menu.context");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const ResponsiveVerticalMenuDivider = props => {
+  const depth = (0, _depth.useDepth)();
+  const {
+    responsiveMode
+  } = (0, _responsiveVerticalMenu.useResponsiveVerticalMenu)();
+  return /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenuDivider.StyledResponsiveVerticalMenuDivider, {
+    "data-component": "responsive-vertical-menu-divider",
+    "data-element": "responsive-vertical-menu-divider",
+    "data-role": "responsive-vertical-menu-divider",
+    depth: depth,
+    responsive: responsiveMode
+  }, /*#__PURE__*/_react.default.createElement(_responsiveVerticalMenuDivider.StyledHr, (0, _utils.filterStyledSystemMarginProps)(props)));
+};
+exports.ResponsiveVerticalMenuDivider = ResponsiveVerticalMenuDivider;
+var _default = exports.default = ResponsiveVerticalMenuDivider;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.style.d.ts

@@ -0,0 +1,8 @@
+import { MarginProps } from "styled-system";
+interface StyledResponsiveVerticalMenuDividerProps {
+    depth: number;
+    responsive?: boolean;
+}
+export declare const StyledResponsiveVerticalMenuDivider: import("styled-components").StyledComponent<"div", any, StyledResponsiveVerticalMenuDividerProps, never>;
+export declare const StyledHr: import("styled-components").StyledComponent<"hr", any, MarginProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
+export {};

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-divider/responsive-vertical-menu-divider.style.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StyledResponsiveVerticalMenuDivider = exports.StyledHr = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _styledSystem = require("styled-system");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const StyledResponsiveVerticalMenuDivider = exports.StyledResponsiveVerticalMenuDivider = _styledComponents.default.div`
+  width: ${({
+  depth,
+  responsive
+}) => depth > 0 && responsive ? "88%" : "100%"};
+`;
+const StyledHr = exports.StyledHr = _styledComponents.default.hr`
+  border-color: #ffffff33;
+  border-bottom: 1px;
+  ${_styledSystem.margin}
+`;

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ResponsiveVerticalMenuItem } from "./responsive-vertical-menu-item.component";
+export type { ResponsiveVerticalMenuItemProps } from "./responsive-vertical-menu-item.component";

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "ResponsiveVerticalMenuItem", {
+  enumerable: true,
+  get: function () {
+    return _responsiveVerticalMenuItem.default;
+  }
+});
+var _responsiveVerticalMenuItem = _interopRequireDefault(require("./responsive-vertical-menu-item.component"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/package.json

@@ -0,0 +1,6 @@
+{
+  "sideEffects": false,
+  "module": "../../../../../esm/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/index.js",
+  "main": "./index.js",
+  "types": "./index.d.ts"
+}

package/lib/components/vertical-menu/responsive-vertical-menu/responsive-vertical-menu-item/responsive-vertical-menu-item.component.d.ts

@@ -0,0 +1,23 @@
+import React, { ReactNode } from "react";
+import { MarginProps, PaddingProps } from "styled-system";
+import { IconType } from "../../../icon";
+interface BaseItemProps extends MarginProps, PaddingProps {
+    /** The content of the menu item. This will render the menu item as a parent menu. */
+    children?: ReactNode;
+    /** Custom icon to be displayed. Takes precedence over `icon` if both are specified. */
+    customIcon?: ReactNode;
+    /** The destination URL. Providing this will render the menu item as an anchor link. */
+    href?: string;
+    /** The Carbon icon to be displayed. Defers to `customIcon` if both are defined. */
+    icon?: IconType;
+    /** The unique identifier for the menu item. */
+    id: string;
+    /** The label for the menu item. */
+    label: string;
+}
+export interface ResponsiveVerticalMenuItemProps extends Omit<BaseItemProps, "id"> {
+    /** The unique identifier for the menu item. */
+    id?: string;
+}
+export declare const ResponsiveVerticalMenuItem: ({ children, id, label, ...props }: ResponsiveVerticalMenuItemProps) => React.JSX.Element;
+export default ResponsiveVerticalMenuItem;