carbon-react 154.3.2 → 154.3.3-beta.1

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

@@ -1,217 +1 @@
-"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;
+"use strict";var e=require("react/jsx-runtime"),t=require("react");const r=t.createContext(void 0);exports.MenuFocusProvider=({children:s})=>{const[n,d]=t.useState([]),[c,u]=t.useState(null),l=t.useRef(new Map),i=t.useCallback(((e,t,r)=>{if(l.current.set(e,{ref:t,parentId:r,childIds:[]}),r){const t=l.current.get(r);null==t||t.childIds.push(e)}}),[]),a=t.useCallback((()=>Array.from(l.current.entries()).map((([e,{ref:t,parentId:r,childIds:s}])=>({id:e,ref:t,parentId:r,childIds:s})))),[]),o=t.useCallback((e=>{var t;const r=l.current.get(e);(null==r||null===(t=r.ref)||void 0===t?void 0:t.current)&&(r.ref.current.focus(),u(e))}),[]),I=t.useCallback(((e,t)=>{d(t?t=>[...t,e]:t=>t.filter((t=>t!==e)))}),[]),f=t.useCallback((e=>{if(!c)return;const t=l.current.get(c);if(!t)return;let r=[],s=[],d=-1;switch(e){case"parent":t.parentId&&o(t.parentId);break;case"firstChild":t.childIds.length>0&&(n.includes(c)||I(c,!0),o(t.childIds[0]));break;case"lastChild":if(t.childIds.length>0){const e=t.childIds[t.childIds.length-1];if(e)if(n.includes(e)){const t=a().find((t=>t.id===e));t&&o(t.childIds[t.childIds.length-1])}else o(e)}break;default:if(r=Array.from(l.current.keys()),s=r.filter((e=>{const t=l.current.get(e);return!t||!t.parentId||n.includes(t.parentId)})),d=s.indexOf(c),-1!==d){const t="next"===e?(d+1)%s.length:(d-1+s.length)%s.length;o(s[t])}}}),[c,o,n,I,a]),h={expandedItems:n,expandItem:I,focusedItemId:c,focusItem:o,getRegisteredItems:a,registerMenuItem:i,moveFocus:f};return e.jsx(r.Provider,{value:h,children:s})},exports.useMenuFocus=()=>t.useContext(r)||(console.error("useMenuFocus must be used within a MenuFocusProvider"),{expandedItems:[],expandItem:()=>{},focusedItemId:null,getRegisteredItems:()=>[],focusItem:()=>{},moveFocus:()=>{},registerMenuItem:()=>{}});

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

@@ -1,33 +1 @@
-"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");
+"use strict";var e=require("./responsive-vertical-menu.context.js"),i=require("./responsive-vertical-menu.component.js"),r=require("./responsive-vertical-menu-item/responsive-vertical-menu-item.component.js"),s=require("./responsive-vertical-menu-divider/responsive-vertical-menu-divider.component.js");exports.ResponsiveVerticalMenuProvider=e.ResponsiveVerticalMenuProvider,exports.ResponsiveVerticalMenu=i.ResponsiveVerticalMenu,exports.ResponsiveVerticalMenuItem=r.ResponsiveVerticalMenuItem,exports.ResponsiveVerticalMenuDivider=s.ResponsiveVerticalMenuDivider;

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

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

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

@@ -1,13 +1 @@
-"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 }; }
+"use strict";var e=require("./responsive-vertical-menu-divider.component.js");exports.ResponsiveVerticalMenuDivider=e.ResponsiveVerticalMenuDivider;

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

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

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

@@ -1,27 +1 @@
-"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;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react/jsx-runtime");require("react");var r=require("./responsive-vertical-menu-divider.style.js");require("../../../../style/utils/filter-styled-system-padding-props.js");var t=require("../../../../style/utils/filter-styled-system-margin-props.js"),i=require("../__internal__/depth.context.js"),n=require("../responsive-vertical-menu.context.js");function s(e,r,t){return r in e?Object.defineProperty(e,r,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[r]=t,e}function o(e){for(var r=1;r<arguments.length;r++){var t=null!=arguments[r]?arguments[r]:{},i=Object.keys(t);"function"==typeof Object.getOwnPropertySymbols&&(i=i.concat(Object.getOwnPropertySymbols(t).filter((function(e){return Object.getOwnPropertyDescriptor(t,e).enumerable})))),i.forEach((function(r){s(e,r,t[r])}))}return e}const u=s=>{const u=i.useDepth(),{responsiveMode:l}=n.useResponsiveVerticalMenu();return e.jsx(r.StyledResponsiveVerticalMenuDivider,{"data-component":"responsive-vertical-menu-divider","data-element":"responsive-vertical-menu-divider","data-role":"responsive-vertical-menu-divider",depth:u,responsive:l,children:e.jsx(r.StyledHr,o({},t.default(s)))})};exports.ResponsiveVerticalMenuDivider=u,exports.default=u;

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

@@ -1,20 +1 @@
-"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}
-`;
+"use strict";var e=require("styled-components"),t=require("styled-system");function r(e){return e&&e.__esModule?e:{default:e}}var i=r(e);const d=i.default.div.withConfig({displayName:"responsive-vertical-menu-divider.style__StyledResponsiveVerticalMenuDivider",componentId:"sc-d49d2bf1-0"})(["width:",";"],(({depth:e,responsive:t})=>e>0&&t?"88%":"100%")),s=i.default.hr.withConfig({displayName:"responsive-vertical-menu-divider.style__StyledHr",componentId:"sc-d49d2bf1-1"})(["border-color:#ffffff33;border-bottom:1px;",""],t.margin);exports.StyledHr=s,exports.StyledResponsiveVerticalMenuDivider=d;

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

@@ -1,13 +1 @@
-"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 }; }
+"use strict";var e=require("./responsive-vertical-menu-item.component.js");exports.ResponsiveVerticalMenuItem=e.ResponsiveVerticalMenuItem;

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

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