@carbon/react 1.103.0 → 1.104.0-rc.0

package/es/components/UIShell/HeaderGlobalAction.js

@@ -1,102 +1,77 @@
 /**
- * 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.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
-import Button from '../Button/Button.js';
-import '../Button/Button.Skeleton.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import Button_default from "../Button/index.js";
+import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
+//#region src/components/UIShell/HeaderGlobalAction.tsx
 /**
- * HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
- * essentially an Icon Button with an additional state to indicate whether it is
- * "active". The active state comes from when a user clicks on the global action
- * which should trigger a panel to appear.
- *
- * Note: children passed to this component should be an Icon.
- */
-const HeaderGlobalAction = /*#__PURE__*/React.forwardRef(({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  children,
-  className: customClassName,
-  onClick,
-  tooltipHighContrast = true,
-  tooltipDropShadow,
-  isActive,
-  tooltipAlignment,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix();
-  const className = cx({
-    [customClassName]: !!customClassName,
-    [`${prefix}--header__action`]: true,
-    [`${prefix}--header__action--active`]: isActive
-  });
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
-  return /*#__PURE__*/React.createElement(Button, _extends({}, rest, accessibilityLabel, {
-    className: className,
-    onClick: onClick,
-    type: "button",
-    hasIconOnly: true,
-    size: "lg",
-    kind: "ghost",
-    iconDescription: ariaLabel,
-    tooltipPosition: "bottom",
-    tooltipAlignment: tooltipAlignment,
-    tooltipDropShadow: tooltipDropShadow,
-    tooltipHighContrast: tooltipHighContrast,
-    ref: ref
-  }), children);
+* 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.
+*/
+/**
+* HeaderGlobalAction is used as a part of the `HeaderGlobalBar`. It is
+* essentially an Icon Button with an additional state to indicate whether it is
+* "active". The active state comes from when a user clicks on the global action
+* which should trigger a panel to appear.
+*
+* Note: children passed to this component should be an Icon.
+*/
+const HeaderGlobalAction = React.forwardRef(({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className: customClassName, onClick, tooltipHighContrast = true, tooltipDropShadow, isActive, tooltipAlignment, ...rest }, ref) => {
+	const prefix = usePrefix();
+	const className = classNames({
+		[customClassName]: !!customClassName,
+		[`${prefix}--header__action`]: true,
+		[`${prefix}--header__action--active`]: isActive
+	});
+	const accessibilityLabel = {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy
+	};
+	return /* @__PURE__ */ jsx(Button_default, {
+		...rest,
+		...accessibilityLabel,
+		className,
+		onClick,
+		type: "button",
+		hasIconOnly: true,
+		size: "lg",
+		kind: "ghost",
+		iconDescription: ariaLabel,
+		tooltipPosition: "bottom",
+		tooltipAlignment,
+		tooltipDropShadow,
+		tooltipHighContrast,
+		ref,
+		children
+	});
 });
 HeaderGlobalAction.propTypes = {
-  /**
-   * Required props for the accessibility label of the button
-   */
-  ...AriaLabelPropType,
-  /**
-   * Provide a custom icon for this global action
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Optionally provide a custom class name that is applied to the underlying
-   * button
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the action is currently active
-   */
-  isActive: PropTypes.bool,
-  /**
-   * Optionally provide an onClick handler that is called when the underlying
-   * button fires it's onclick event
-   */
-  onClick: PropTypes.func,
-  /**
-   * Specify the alignment of the tooltip to the icon-only button.
-   * Can be one of: start, center, or end.
-   */
-  tooltipAlignment: PropTypes.oneOf(['start', 'center', 'end']),
-  /**
-   * Enable drop shadow for tooltips for icon-only buttons.
-   */
-  tooltipDropShadow: PropTypes.bool,
-  /**
-   * Render the tooltip using the high-contrast theme
-   * Default is true
-   */
-  tooltipHighContrast: PropTypes.bool
+	...AriaLabelPropType,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	isActive: PropTypes.bool,
+	onClick: PropTypes.func,
+	tooltipAlignment: PropTypes.oneOf([
+		"start",
+		"center",
+		"end"
+	]),
+	tooltipDropShadow: PropTypes.bool,
+	tooltipHighContrast: PropTypes.bool
 };
-HeaderGlobalAction.displayName = 'HeaderGlobalAction';
+HeaderGlobalAction.displayName = "HeaderGlobalAction";
 
-export { HeaderGlobalAction as default };
+//#endregion
+export { HeaderGlobalAction as default };

package/es/components/UIShell/HeaderGlobalBar.js

@@ -1,20 +1,27 @@
 /**
- * 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.
  */
 
-import wrapComponent from '../../tools/wrapComponent.js';
+import wrapComponent from "../../tools/wrapComponent.js";
 
+//#region src/components/UIShell/HeaderGlobalBar.tsx
 /**
- * Generic container for `HeaderGlobalAction` components
- */
-
+* 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.
+*/
+/**
+* Generic container for `HeaderGlobalAction` components
+*/
 const HeaderGlobalBar = wrapComponent({
-  name: 'HeaderGlobalBar',
-  className: prefix => `${prefix}--header__global`,
-  type: 'div'
+	name: "HeaderGlobalBar",
+	className: (prefix) => `${prefix}--header__global`,
+	type: "div"
 });
 
-export { HeaderGlobalBar as default };
+//#endregion
+export { HeaderGlobalBar as default };

package/es/components/UIShell/HeaderMenu.js

@@ -1,228 +1,154 @@
 /**
- * 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.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import { ChevronDown } from '@carbon/icons-react';
-import cx from 'classnames';
-import React, { useContext, useState, useRef, Children, forwardRef, isValidElement, cloneElement } from 'react';
-import PropTypes from 'prop-types';
-import { Escape, Enter, Space } from '../../internal/keyboard/keys.js';
-import { matches } from '../../internal/keyboard/match.js';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
-import { PrefixContext } from '../../internal/usePrefix.js';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { composeEventHandlers } from '../../tools/events.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { PrefixContext } from "../../internal/usePrefix.js";
+import { Enter, Escape, Space } from "../../internal/keyboard/keys.js";
+import { matches } from "../../internal/keyboard/match.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { composeEventHandlers } from "../../tools/events.js";
+import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
+import classNames from "classnames";
+import React, { Children, cloneElement, forwardRef, isValidElement, useContext, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "@carbon/icons-react";
 
+//#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 = 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 = useContext(PrefixContext);
-  const [expanded, setExpanded] = useState(false);
-  const menuButtonRef = useRef(null);
-  const subMenusRef = useRef(null);
-  const itemRefs = useRef([]);
-  const mergedButtonRef = 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 (matches(event, [Enter, 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 (matches(event, [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 => Children.toArray(childrenArg).some(child => {
-    if (! /*#__PURE__*/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__*/isValidElement(item)) {
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-      return /*#__PURE__*/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", _extends({}, rest, {
-    className: itemClassName,
-    onKeyDown: composeEventHandlers([onKeyDown, handleMenuClose]),
-    onClick: composeEventHandlers([onClick, handleOnClick]),
-    onBlur: composeEventHandlers([onBlur, handleOnBlur]),
-    ref: ref
-  }), /*#__PURE__*/React.createElement("a", _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(ChevronDown, {
-    className: `${prefix}--header__menu-arrow`
-  })), /*#__PURE__*/React.createElement("ul", _extends({}, accessibilityLabel, {
-    ref: subMenusRef,
-    className: `${prefix}--header__menu`
-  }), 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 = useContext(PrefixContext);
+	const [expanded, setExpanded] = useState(false);
+	const menuButtonRef = useRef(null);
+	const subMenusRef = useRef(null);
+	const itemRefs = useRef([]);
+	const mergedButtonRef = 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 (matches(event, [Enter, 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 (matches(event, [Escape]) && expanded) {
+			event.stopPropagation();
+			event.preventDefault();
+			setExpanded(false);
+			if (menuButtonRef.current) menuButtonRef.current.focus();
+		}
+	};
+	const hasActiveDescendant = (childrenArg) => Children.toArray(childrenArg).some((child) => {
+		if (!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 (isValidElement(item)) return cloneElement(item, { ref: handleItemRef(index) });
+		return item;
+	};
+	const accessibilityLabel = {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy
+	};
+	const itemClassName = classNames({
+		[`${prefix}--header__submenu`]: true,
+		[`${customClassName}`]: !!customClassName
+	});
+	const isActivePage = isActive ? isActive : isCurrentPage;
+	const linkClassName = classNames({
+		[`${prefix}--header__menu-item`]: true,
+		[`${prefix}--header__menu-title`]: true,
+		[`${prefix}--header__menu-item--current`]: isActivePage || hasActiveDescendant(children) && !expanded
+	});
+	return /* @__PURE__ */ jsxs("li", {
+		...rest,
+		className: itemClassName,
+		onKeyDown: composeEventHandlers([onKeyDown, handleMenuClose]),
+		onClick: composeEventHandlers([onClick, handleOnClick]),
+		onBlur: composeEventHandlers([onBlur, handleOnBlur]),
+		ref,
+		children: [/* @__PURE__ */ jsxs("a", {
+			"aria-haspopup": "menu",
+			"aria-expanded": expanded,
+			className: linkClassName,
+			href: "#",
+			onKeyDown: handleOnKeyDown,
+			ref: mergedButtonRef,
+			tabIndex: 0,
+			...accessibilityLabel,
+			children: [menuLinkName, MenuContent ? /* @__PURE__ */ jsx(MenuContent, {}) : /* @__PURE__ */ jsx(ChevronDown, { className: `${prefix}--header__menu-arrow` })]
+		}), /* @__PURE__ */ jsx("ul", {
+			...accessibilityLabel,
+			ref: subMenusRef,
+			className: `${prefix}--header__menu`,
+			children: Children.map(children, renderMenuItem)
+		})]
+	});
 });
-HeaderMenu.displayName = 'HeaderMenu';
+HeaderMenu.displayName = "HeaderMenu";
 HeaderMenu.propTypes = {
-  /**
-   * Required props for the accessibility label of the menu
-   */
-  ...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(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
+	...AriaLabelPropType,
+	className: PropTypes.string,
+	focusRef: PropTypes.func,
+	isActive: PropTypes.bool,
+	isCurrentPage: deprecate(PropTypes.bool, "The `isCurrentPage` prop for `HeaderMenu` has been deprecated. Please use `isActive` instead. This will be removed in the next major release."),
+	menuLinkName: PropTypes.string.isRequired,
+	onBlur: PropTypes.func,
+	onClick: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	renderMenuContent: PropTypes.func,
+	tabIndex: PropTypes.number
 };
 
-export { HeaderMenu, HeaderMenu as default };
+//#endregion
+export { HeaderMenu as default };