@carbon/react 1.103.0 → 1.104.0-rc.0

package/lib/components/UIShell/HeaderMenu.js

@@ -1,233 +1,158 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_keys = require('../../internal/keyboard/keys.js');
+const require_match = require('../../internal/keyboard/match.js');
+const require_deprecate = require('../../prop-types/deprecate.js');
+const require_useMergedRefs = require('../../internal/useMergedRefs.js');
+const require_events = require('../../tools/events.js');
+const require_AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var iconsReact = require('@carbon/icons-react');
-var cx = require('classnames');
-var React = require('react');
-var PropTypes = require('prop-types');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
-var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var deprecate = require('../../prop-types/deprecate.js');
-var events = require('../../tools/events.js');
-var useMergedRefs = require('../../internal/useMergedRefs.js');
-
-const frFn = React.forwardRef;
+//#region src/components/UIShell/HeaderMenu.tsx
+/**
+* Copyright IBM Corp. 2016, 2025
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+const frFn = react.forwardRef;
 const HeaderMenu = frFn((props, ref) => {
-  const {
-    isActive,
-    isCurrentPage,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    className: customClassName,
-    children,
-    renderMenuContent: MenuContent,
-    menuLinkName,
-    focusRef,
-    onBlur,
-    onClick,
-    onKeyDown,
-    ...rest
-  } = props;
-  const prefix = React.useContext(usePrefix.PrefixContext);
-  const [expanded, setExpanded] = React.useState(false);
-  const menuButtonRef = React.useRef(null);
-  const subMenusRef = React.useRef(null);
-  const itemRefs = React.useRef([]);
-  const mergedButtonRef = useMergedRefs.useMergedRefs([ref, focusRef, menuButtonRef]);
-
-  /**
-   * Toggle the expanded state of the menu on click.
-   */
-  const handleOnClick = e => {
-    if (!subMenusRef.current || e.target instanceof Node && !subMenusRef.current.contains(e.target)) {
-      e.preventDefault();
-    }
-    setExpanded(prev => !prev);
-  };
-
-  /**
-   * Keyboard event handler for the entire menu.
-   */
-  const handleOnKeyDown = event => {
-    // Handle enter or space key for toggling the expanded state of the menu.
-    if (match.matches(event, [keys.Enter, keys.Space])) {
-      event.stopPropagation();
-      event.preventDefault();
-      setExpanded(prev => !prev);
-      return;
-    }
-  };
-
-  /**
-   * Handle our blur event from our underlying menuitems. Will mostly be used
-   * for closing our menu in response to a user clicking off or tabbing out of
-   * the menu or menubar.
-   */
-  const handleOnBlur = event => {
-    // Close the menu on blur when the related target is not a sibling menu item
-    // or a child in a submenu
-    const siblingItemBlurredTo = itemRefs.current.find(element => element === event.relatedTarget);
-    const childItemBlurredTo = subMenusRef.current?.contains(event.relatedTarget);
-    if (!siblingItemBlurredTo && !childItemBlurredTo) {
-      setExpanded(false);
-    }
-  };
-
-  /**
-   * Handles individual menuitem refs. We assign them to a class instance
-   * property so that we can properly manage focus of our children.
-   */
-  const handleItemRef = index => node => {
-    itemRefs.current[index] = node;
-  };
-  const handleMenuClose = event => {
-    // Handle ESC keydown for closing the expanded menu.
-    if (match.matches(event, [keys.Escape]) && expanded) {
-      event.stopPropagation();
-      event.preventDefault();
-      setExpanded(false);
-
-      // Return focus to menu button when the user hits ESC.
-      if (menuButtonRef.current) {
-        menuButtonRef.current.focus();
-      }
-    }
-  };
-  const hasActiveDescendant = childrenArg => React.Children.toArray(childrenArg).some(child => {
-    if (! /*#__PURE__*/React.isValidElement(child)) {
-      return false;
-    }
-    const {
-      isActive,
-      isCurrentPage,
-      children
-    } = child.props;
-    return isActive || isCurrentPage || Array.isArray(children) && hasActiveDescendant(children);
-  });
-
-  /**
-   * We capture the `ref` for each child inside of `this.items` to properly
-   * manage focus. In addition to this focus management, all items receive a
-   * `tabIndex: -1` so the user won't hit a large number of items in their tab
-   * sequence when they might not want to go through all the items.
-   */
-  const renderMenuItem = (item, index) => {
-    if (/*#__PURE__*/React.isValidElement(item)) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-      return /*#__PURE__*/React.cloneElement(item, {
-        ref: handleItemRef(index)
-      });
-    }
-    return item;
-  };
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
-  const itemClassName = cx({
-    [`${prefix}--header__submenu`]: true,
-    [`${customClassName}`]: !!customClassName
-  });
-  const isActivePage = isActive ? isActive : isCurrentPage;
-  const linkClassName = cx({
-    [`${prefix}--header__menu-item`]: true,
-    [`${prefix}--header__menu-title`]: true,
-    // We set the current class only if `isActive` is passed in and we do
-    // not have an `aria-current="page"` set for the breadcrumb item
-    [`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !expanded
-  });
-
-  // Notes on eslint comments and based on the examples in:
-  // https://www.w3.org/TR/wai-aria-practices/examples/menubar/menubar-1/menubar-1.html#
-  // - The focus is handled by the <a> menuitem, onMouseOver is for mouse
-  // users
-  // - aria-haspopup can definitely have the value "menu"
-  // - aria-expanded is on their example node with role="menuitem"
-  // - href can be set to javascript:void(0), ideally this will be a button
-  return /*#__PURE__*/React.createElement("li", _rollupPluginBabelHelpers.extends({}, rest, {
-    className: itemClassName,
-    onKeyDown: events.composeEventHandlers([onKeyDown, handleMenuClose]),
-    onClick: events.composeEventHandlers([onClick, handleOnClick]),
-    onBlur: events.composeEventHandlers([onBlur, handleOnBlur]),
-    ref: ref
-  }), /*#__PURE__*/React.createElement("a", _rollupPluginBabelHelpers.extends({
-    // eslint-disable-line jsx-a11y/anchor-is-valid
-    "aria-haspopup": "menu",
-    "aria-expanded": expanded,
-    className: linkClassName,
-    href: "#",
-    onKeyDown: handleOnKeyDown,
-    ref: mergedButtonRef,
-    tabIndex: 0
-  }, accessibilityLabel), menuLinkName, MenuContent ? /*#__PURE__*/React.createElement(MenuContent, null) : /*#__PURE__*/React.createElement(iconsReact.ChevronDown, {
-    className: `${prefix}--header__menu-arrow`
-  })), /*#__PURE__*/React.createElement("ul", _rollupPluginBabelHelpers.extends({}, accessibilityLabel, {
-    ref: subMenusRef,
-    className: `${prefix}--header__menu`
-  }), React.Children.map(children, renderMenuItem)));
+	const { isActive, isCurrentPage, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: customClassName, children, renderMenuContent: MenuContent, menuLinkName, focusRef, onBlur, onClick, onKeyDown, ...rest } = props;
+	const prefix = (0, react.useContext)(require_usePrefix.PrefixContext);
+	const [expanded, setExpanded] = (0, react.useState)(false);
+	const menuButtonRef = (0, react.useRef)(null);
+	const subMenusRef = (0, react.useRef)(null);
+	const itemRefs = (0, react.useRef)([]);
+	const mergedButtonRef = require_useMergedRefs.useMergedRefs([
+		ref,
+		focusRef,
+		menuButtonRef
+	]);
+	/**
+	* Toggle the expanded state of the menu on click.
+	*/
+	const handleOnClick = (e) => {
+		if (!subMenusRef.current || e.target instanceof Node && !subMenusRef.current.contains(e.target)) e.preventDefault();
+		setExpanded((prev) => !prev);
+	};
+	/**
+	* Keyboard event handler for the entire menu.
+	*/
+	const handleOnKeyDown = (event) => {
+		if (require_match.matches(event, [require_keys.Enter, require_keys.Space])) {
+			event.stopPropagation();
+			event.preventDefault();
+			setExpanded((prev) => !prev);
+			return;
+		}
+	};
+	/**
+	* Handle our blur event from our underlying menuitems. Will mostly be used
+	* for closing our menu in response to a user clicking off or tabbing out of
+	* the menu or menubar.
+	*/
+	const handleOnBlur = (event) => {
+		const siblingItemBlurredTo = itemRefs.current.find((element) => element === event.relatedTarget);
+		const childItemBlurredTo = subMenusRef.current?.contains(event.relatedTarget);
+		if (!siblingItemBlurredTo && !childItemBlurredTo) setExpanded(false);
+	};
+	/**
+	* Handles individual menuitem refs. We assign them to a class instance
+	* property so that we can properly manage focus of our children.
+	*/
+	const handleItemRef = (index) => (node) => {
+		itemRefs.current[index] = node;
+	};
+	const handleMenuClose = (event) => {
+		if (require_match.matches(event, [require_keys.Escape]) && expanded) {
+			event.stopPropagation();
+			event.preventDefault();
+			setExpanded(false);
+			if (menuButtonRef.current) menuButtonRef.current.focus();
+		}
+	};
+	const hasActiveDescendant = (childrenArg) => react.Children.toArray(childrenArg).some((child) => {
+		if (!(0, react.isValidElement)(child)) return false;
+		const { isActive, isCurrentPage, children } = child.props;
+		return isActive || isCurrentPage || Array.isArray(children) && hasActiveDescendant(children);
+	});
+	/**
+	* We capture the `ref` for each child inside of `this.items` to properly
+	* manage focus. In addition to this focus management, all items receive a
+	* `tabIndex: -1` so the user won't hit a large number of items in their tab
+	* sequence when they might not want to go through all the items.
+	*/
+	const renderMenuItem = (item, index) => {
+		if ((0, react.isValidElement)(item)) return (0, react.cloneElement)(item, { ref: handleItemRef(index) });
+		return item;
+	};
+	const accessibilityLabel = {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy
+	};
+	const itemClassName = (0, classnames.default)({
+		[`${prefix}--header__submenu`]: true,
+		[`${customClassName}`]: !!customClassName
+	});
+	const isActivePage = isActive ? isActive : isCurrentPage;
+	const linkClassName = (0, classnames.default)({
+		[`${prefix}--header__menu-item`]: true,
+		[`${prefix}--header__menu-title`]: true,
+		[`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !expanded
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("li", {
+		...rest,
+		className: itemClassName,
+		onKeyDown: require_events.composeEventHandlers([onKeyDown, handleMenuClose]),
+		onClick: require_events.composeEventHandlers([onClick, handleOnClick]),
+		onBlur: require_events.composeEventHandlers([onBlur, handleOnBlur]),
+		ref,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("a", {
+			"aria-haspopup": "menu",
+			"aria-expanded": expanded,
+			className: linkClassName,
+			href: "#",
+			onKeyDown: handleOnKeyDown,
+			ref: mergedButtonRef,
+			tabIndex: 0,
+			...accessibilityLabel,
+			children: [menuLinkName, MenuContent ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(MenuContent, {}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ChevronDown, { className: `${prefix}--header__menu-arrow` })]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			...accessibilityLabel,
+			ref: subMenusRef,
+			className: `${prefix}--header__menu`,
+			children: react.Children.map(children, renderMenuItem)
+		})]
+	});
 });
-HeaderMenu.displayName = 'HeaderMenu';
+HeaderMenu.displayName = "HeaderMenu";
 HeaderMenu.propTypes = {
-  /**
-   * Required props for the accessibility label of the menu
-   */
-  ...AriaPropTypes.AriaLabelPropType,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string,
-  /**
-   * Provide a custom ref handler for the menu button
-   */
-  focusRef: PropTypes.func,
-  /**
-   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
-   */
-  isActive: PropTypes.bool,
-  /**
-   * Applies selected styles to the item if a user sets this to true and `aria-current !== 'page'`.
-   * @deprecated Please use `isActive` instead. This will be removed in the next major release.
-   */
-  isCurrentPage: deprecate.deprecate(PropTypes.bool, 'The `isCurrentPage` prop for `HeaderMenu` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
-  /**
-   * Provide a label for the link text
-   */
-  menuLinkName: PropTypes.string.isRequired,
-  /**
-   * Optionally provide an onBlur handler that is called when the underlying
-   * button fires it's onblur event
-   */
-  onBlur: PropTypes.func,
-  /**
-   * Optionally provide an onClick handler that is called when the underlying
-   * button fires it's onclick event
-   */
-  onClick: PropTypes.func,
-  /**
-   * Optionally provide an onKeyDown handler that is called when the underlying
-   * button fires it's onkeydown event
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Optional component to render instead of string
-   */
-  renderMenuContent: PropTypes.func,
-  /**
-   * Optionally provide a tabIndex for the underlying menu button
-   */
-  tabIndex: PropTypes.number
+	...require_AriaPropTypes.AriaLabelPropType,
+	className: prop_types.default.string,
+	focusRef: prop_types.default.func,
+	isActive: prop_types.default.bool,
+	isCurrentPage: require_deprecate.deprecate(prop_types.default.bool, "The `isCurrentPage` prop for `HeaderMenu` has been deprecated. Please use `isActive` instead. This will be removed in the next major release."),
+	menuLinkName: prop_types.default.string.isRequired,
+	onBlur: prop_types.default.func,
+	onClick: prop_types.default.func,
+	onKeyDown: prop_types.default.func,
+	renderMenuContent: prop_types.default.func,
+	tabIndex: prop_types.default.number
 };
 
-exports.HeaderMenu = HeaderMenu;
-exports.default = HeaderMenu;
+//#endregion
+exports.default = HeaderMenu;

package/lib/components/UIShell/HeaderMenuButton.js

@@ -1,81 +1,58 @@
 /**
- * Copyright IBM Corp. 2016, 2023
+ * Copyright IBM Corp. 2016, 2026
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-'use strict';
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
+let classnames = require("classnames");
+classnames = require_runtime.__toESM(classnames);
+let react = require("react");
+react = require_runtime.__toESM(react);
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
+let react_jsx_runtime = require("react/jsx-runtime");
+let _carbon_icons_react = require("@carbon/icons-react");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var iconsReact = require('@carbon/icons-react');
-var cx = require('classnames');
-var React = require('react');
-var PropTypes = require('prop-types');
-var AriaPropTypes = require('../../prop-types/AriaPropTypes.js');
-var usePrefix = require('../../internal/usePrefix.js');
-
-var _Menu, _Close;
-function HeaderMenuButton({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  className: customClassName,
-  renderMenuIcon,
-  renderCloseIcon,
-  isActive,
-  isCollapsible,
-  ...rest
-}) {
-  const prefix = usePrefix.usePrefix();
-  const className = cx({
-    ...(typeof customClassName === 'string' && {
-      [customClassName]: !!customClassName
-    }),
-    [`${prefix}--header__action`]: true,
-    [`${prefix}--header__menu-trigger`]: true,
-    [`${prefix}--header__action--active`]: isActive,
-    [`${prefix}--header__menu-toggle`]: true,
-    [`${prefix}--header__menu-toggle__hidden`]: !isCollapsible
-  });
-  const menuIcon = renderMenuIcon ? renderMenuIcon : _Menu || (_Menu = /*#__PURE__*/React.createElement(iconsReact.Menu, {
-    size: 20
-  }));
-  const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React.createElement(iconsReact.Close, {
-    size: 20
-  }));
-  return /*#__PURE__*/React.createElement("button", _rollupPluginBabelHelpers.extends({}, rest, {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    className: className,
-    title: ariaLabel,
-    type: "button"
-  }), isActive ? closeIcon : menuIcon);
+//#region src/components/UIShell/HeaderMenuButton.tsx
+/**
+* Copyright IBM Corp. 2016, 2023
+*
+* This source code is licensed under the Apache-2.0 license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+function HeaderMenuButton({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: customClassName, renderMenuIcon, renderCloseIcon, isActive, isCollapsible, ...rest }) {
+	const prefix = require_usePrefix.usePrefix();
+	const className = (0, classnames.default)({
+		...typeof customClassName === "string" && { [customClassName]: !!customClassName },
+		[`${prefix}--header__action`]: true,
+		[`${prefix}--header__menu-trigger`]: true,
+		[`${prefix}--header__action--active`]: isActive,
+		[`${prefix}--header__menu-toggle`]: true,
+		[`${prefix}--header__menu-toggle__hidden`]: !isCollapsible
+	});
+	const menuIcon = renderMenuIcon ? renderMenuIcon : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Menu, { size: 20 });
+	const closeIcon = renderCloseIcon ? renderCloseIcon : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Close, { size: 20 });
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+		...rest,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className,
+		title: ariaLabel,
+		type: "button",
+		children: isActive ? closeIcon : menuIcon
+	});
 }
 HeaderMenuButton.propTypes = {
-  /**
-   * Required props for accessibility label on the underlying menu button
-   */
-  ...AriaPropTypes.AriaLabelPropType,
-  /**
-   * Optionally provide a custom class name that is applied to the underlying
-   * button
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the menu button is "active".
-   */
-  isActive: PropTypes.bool,
-  /**
-   * Specify whether the menu button is collapsible.
-   */
-  isCollapsible: PropTypes.bool,
-  /**
-   * Optionally provide an onClick handler that is called when the underlying
-   * button fires it's onclick event
-   */
-  onClick: PropTypes.func
+	...require_AriaPropTypes.AriaLabelPropType,
+	className: prop_types.default.string,
+	isActive: prop_types.default.bool,
+	isCollapsible: prop_types.default.bool,
+	onClick: prop_types.default.func
 };
 
-exports.default = HeaderMenuButton;
+//#endregion
+exports.default = HeaderMenuButton;