@carbon/react 1.103.0 → 1.104.0-rc.0

package/es/components/UIShell/HeaderMenuButton.js

@@ -1,77 +1,54 @@
 /**
- * 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 { Menu, Close } from '@carbon/icons-react';
-import cx from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.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";
+import { Close, Menu } from "@carbon/icons-react";
 
-var _Menu, _Close;
-function HeaderMenuButton({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  className: customClassName,
-  renderMenuIcon,
-  renderCloseIcon,
-  isActive,
-  isCollapsible,
-  ...rest
-}) {
-  const prefix = 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(Menu, {
-    size: 20
-  }));
-  const closeIcon = renderCloseIcon ? renderCloseIcon : _Close || (_Close = /*#__PURE__*/React.createElement(Close, {
-    size: 20
-  }));
-  return /*#__PURE__*/React.createElement("button", _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 = usePrefix();
+	const className = classNames({
+		...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__ */ jsx(Menu, { size: 20 });
+	const closeIcon = renderCloseIcon ? renderCloseIcon : /* @__PURE__ */ jsx(Close, { size: 20 });
+	return /* @__PURE__ */ 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
-   */
-  ...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
+	...AriaLabelPropType,
+	className: PropTypes.string,
+	isActive: PropTypes.bool,
+	isCollapsible: PropTypes.bool,
+	onClick: PropTypes.func
 };
 
-export { HeaderMenuButton as default };
+//#endregion
+export { HeaderMenuButton as default };

package/es/components/UIShell/HeaderMenuItem.js

@@ -1,87 +1,60 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import cx from 'classnames';
-import Link, { LinkPropTypes } from './Link.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { deprecate } from '../../prop-types/deprecate.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import Link, { LinkPropTypes } from "./Link.js";
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const HeaderMenuItem = /*#__PURE__*/forwardRef(function HeaderMenuItem({
-  className,
-  isActive,
-  isCurrentPage,
-  'aria-current': ariaCurrent,
-  children,
-  role,
-  tabIndex,
-  ...rest
-}, ref) {
-  const prefix = usePrefix();
-  const resolvedTabIndex = tabIndex ?? 0;
-  if (isCurrentPage) {
-    isActive = isCurrentPage;
-  }
-  // 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. When this
-  // class is added we also set `aria-current` as `true`
-  const hasCurrentClass = isActive && ariaCurrent !== 'page';
-  const linkClassName = cx({
-    [`${prefix}--header__menu-item`]: true,
-    [`${prefix}--header__menu-item--current`]: hasCurrentClass
-  });
-  return /*#__PURE__*/React.createElement("li", {
-    className: className,
-    role: role
-  }, /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
-    "aria-current": hasCurrentClass ? true : ariaCurrent,
-    className: linkClassName,
-    ref: ref,
-    tabIndex: resolvedTabIndex
-  }), /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--text-truncate--end`
-  }, children)));
+//#region src/components/UIShell/HeaderMenuItem.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 HeaderMenuItem = forwardRef(function HeaderMenuItem({ className, isActive, isCurrentPage, "aria-current": ariaCurrent, children, role, tabIndex, ...rest }, ref) {
+	const prefix = usePrefix();
+	const resolvedTabIndex = tabIndex ?? 0;
+	if (isCurrentPage) isActive = isCurrentPage;
+	const hasCurrentClass = isActive && ariaCurrent !== "page";
+	const linkClassName = classNames({
+		[`${prefix}--header__menu-item`]: true,
+		[`${prefix}--header__menu-item--current`]: hasCurrentClass
+	});
+	return /* @__PURE__ */ jsx("li", {
+		className,
+		role,
+		children: /* @__PURE__ */ jsx(Link, {
+			...rest,
+			"aria-current": hasCurrentClass ? true : ariaCurrent,
+			className: linkClassName,
+			ref,
+			tabIndex: resolvedTabIndex,
+			children: /* @__PURE__ */ jsx("span", {
+				className: `${prefix}--text-truncate--end`,
+				children
+			})
+		})
+	});
 });
-HeaderMenuItem.displayName = 'HeaderMenuItem';
+HeaderMenuItem.displayName = "HeaderMenuItem";
 HeaderMenuItem.propTypes = {
-  /**
-   * Pass in a valid `element` to replace the underlying `<a>` tag with a
-   * custom `Link` element
-   */
-  ...LinkPropTypes,
-  /**
-   * Pass in children that are either a string or can be read as a string by
-   * screen readers
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string,
-  /**
-   * If `true` and `aria-current !== 'page'`, applies selected styles to the item and sets `aria-current="true"`.
-   */
-  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 `HeaderMenuItem` has ' + 'been deprecated. Please use `isActive` instead. This will be removed in the next major release.'),
-  /**
-   * Optionally supply a role for the underlying `<li>` node. Useful for resetting
-   * `<ul>` semantics for menus.
-   */
-  role: PropTypes.string,
-  /**
-   * Specify the tab index of the Link
-   */
-  tabIndex: PropTypes.number
+	...LinkPropTypes,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	isActive: PropTypes.bool,
+	isCurrentPage: deprecate(PropTypes.bool, "The `isCurrentPage` prop for `HeaderMenuItem` has been deprecated. Please use `isActive` instead. This will be removed in the next major release."),
+	role: PropTypes.string,
+	tabIndex: PropTypes.number
 };
 
-export { HeaderMenuItem as default };
+//#endregion
+export { HeaderMenuItem as default };

package/es/components/UIShell/HeaderName.js

@@ -1,55 +1,43 @@
 /**
- * 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 Link, { LinkPropTypes } from './Link.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import Link, { LinkPropTypes } from "./Link.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-function HeaderName({
-  children,
-  className: customClassName,
-  prefix = 'IBM',
-  ...rest
-}) {
-  const selectorPrefix = usePrefix();
-  const className = cx(`${selectorPrefix}--header__name`, customClassName);
-  return /*#__PURE__*/React.createElement(Link, _extends({}, rest, {
-    className: className
-  }), prefix && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
-    className: `${selectorPrefix}--header__name--prefix`
-  }, prefix), "\xA0"), /*#__PURE__*/React.createElement("span", null, children));
+//#region src/components/UIShell/HeaderName.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 HeaderName({ children, className: customClassName, prefix = "IBM", ...rest }) {
+	const selectorPrefix = usePrefix();
+	const className = classNames(`${selectorPrefix}--header__name`, customClassName);
+	return /* @__PURE__ */ jsxs(Link, {
+		...rest,
+		className,
+		children: [prefix && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", {
+			className: `${selectorPrefix}--header__name--prefix`,
+			children: prefix
+		}), "\xA0"] }), /* @__PURE__ */ jsx("span", { children })]
+	});
 }
 HeaderName.propTypes = {
-  /**
-   * Pass in a valid `element` to replace the underlying `<a>` tag with a
-   * custom `Link` element
-   */
-  ...LinkPropTypes,
-  /**
-   * Pass in children that are either a string or can be read as a string by
-   * screen readers
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string,
-  /**
-   * Provide an href for the name to link to
-   */
-  href: PropTypes.string,
-  /**
-   * Optionally specify a prefix to your header name. Useful for companies, for
-   * example: IBM [Product Name] versus solely [Product Name]
-   */
-  prefix: PropTypes.string
+	...LinkPropTypes,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	href: PropTypes.string,
+	prefix: PropTypes.string
 };
 
-export { HeaderName as default };
+//#endregion
+export { HeaderName as default };

package/es/components/UIShell/HeaderNavigation.js

@@ -1,48 +1,43 @@
 /**
- * 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 { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.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";
 
-function HeaderNavigation({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  children,
-  className: customClassName,
-  ...rest
-}) {
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--header__nav`, customClassName);
-  return /*#__PURE__*/React.createElement("nav", _extends({}, rest, {
-    "aria-label": ariaLabel,
-    "aria-labelledby": ariaLabelledBy,
-    className: className
-  }), /*#__PURE__*/React.createElement("ul", {
-    className: `${prefix}--header__menu-bar`
-  }, children));
+//#region src/components/UIShell/HeaderNavigation.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 HeaderNavigation({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className: customClassName, ...rest }) {
+	const prefix = usePrefix();
+	const className = classNames(`${prefix}--header__nav`, customClassName);
+	return /* @__PURE__ */ jsx("nav", {
+		...rest,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className,
+		children: /* @__PURE__ */ jsx("ul", {
+			className: `${prefix}--header__menu-bar`,
+			children
+		})
+	});
 }
 HeaderNavigation.propTypes = {
-  /**
-   * Required props for accessibility label on the underlying menu
-   */
-  ...AriaLabelPropType,
-  /**
-   * Provide valid children of HeaderNavigation, for example `HeaderMenuItem`
-   * or `HeaderMenu`
-   */
-  children: PropTypes.node,
-  /**
-   * Optionally provide a custom class to apply to the underlying <nav> node
-   */
-  className: PropTypes.string
+	...AriaLabelPropType,
+	children: PropTypes.node,
+	className: PropTypes.string
 };
 
-export { HeaderNavigation as default };
+//#endregion
+export { HeaderNavigation as default };

package/es/components/UIShell/HeaderPanel.js

@@ -1,108 +1,85 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React, { useRef, useState } from 'react';
-import { isComponentElement } from '../../internal/utils.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { Escape } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
-import { useWindowEvent } from '../../internal/useEvent.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import Switcher from './Switcher.js';
-import { noopFn } from '../../internal/noopFn.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { Escape } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { noopFn } from "../../internal/noopFn.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { useWindowEvent } from "../../internal/useEvent.js";
+import { isComponentElement } from "../../internal/utils.js";
+import Switcher from "./Switcher.js";
+import classNames from "classnames";
+import React, { useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const HeaderPanel = /*#__PURE__*/React.forwardRef(({
-  children,
-  className: customClassName,
-  expanded,
-  addFocusListeners = true,
-  onHeaderPanelFocus = noopFn,
-  href,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix();
-  const headerPanelReference = useRef(null);
-  const headerPanelRef = useMergedRefs([headerPanelReference, ref]);
-  const controlled = useRef(expanded !== undefined).current;
-  const [expandedState, setExpandedState] = useState(expanded);
-  const expandedProp = controlled ? expanded : expandedState;
-  const [lastClickedElement, setLastClickedElement] = useState(null);
-  const className = cx(`${prefix}--header-panel`, {
-    [`${prefix}--header-panel--expanded`]: expandedProp,
-    [customClassName]: !!customClassName
-  });
-  const eventHandlers = {};
-  if (addFocusListeners) {
-    eventHandlers.onBlur = event => {
-      if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains(`${prefix}--switcher__item-link`)) {
-        setExpandedState(false);
-        setLastClickedElement(null);
-        if (expanded) {
-          onHeaderPanelFocus();
-        }
-      }
-    };
-    eventHandlers.onKeyDown = event => {
-      if (match(event, Escape)) {
-        setExpandedState(false);
-        onHeaderPanelFocus();
-        if (href) {
-          window.location.href = href;
-        }
-      }
-    };
-  }
-  useWindowEvent('click', event => {
-    const {
-      target
-    } = event;
-    if (!(target instanceof Element)) return;
-    setLastClickedElement(target);
-    const isChildASwitcher = isComponentElement(children, Switcher);
-    if (isChildASwitcher && !target.closest(`.${prefix}--header-panel--expanded`) && !target.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
-      setExpandedState(false);
-      onHeaderPanelFocus();
-    }
-  });
-  return /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: className,
-    ref: headerPanelRef
-  }, eventHandlers), children);
+//#region src/components/UIShell/HeaderPanel.tsx
+/**
+* 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.
+*/
+const HeaderPanel = React.forwardRef(({ children, className: customClassName, expanded, addFocusListeners = true, onHeaderPanelFocus = noopFn, href, ...rest }, ref) => {
+	const prefix = usePrefix();
+	const headerPanelReference = useRef(null);
+	const headerPanelRef = useMergedRefs([headerPanelReference, ref]);
+	const controlled = useRef(expanded !== void 0).current;
+	const [expandedState, setExpandedState] = useState(expanded);
+	const expandedProp = controlled ? expanded : expandedState;
+	const [lastClickedElement, setLastClickedElement] = useState(null);
+	const className = classNames(`${prefix}--header-panel`, {
+		[`${prefix}--header-panel--expanded`]: expandedProp,
+		[customClassName]: !!customClassName
+	});
+	const eventHandlers = {};
+	if (addFocusListeners) {
+		eventHandlers.onBlur = (event) => {
+			if (!event.currentTarget.contains(event.relatedTarget) && !lastClickedElement?.classList?.contains(`${prefix}--switcher__item-link`)) {
+				setExpandedState(false);
+				setLastClickedElement(null);
+				if (expanded) onHeaderPanelFocus();
+			}
+		};
+		eventHandlers.onKeyDown = (event) => {
+			if (match(event, Escape)) {
+				setExpandedState(false);
+				onHeaderPanelFocus();
+				if (href) window.location.href = href;
+			}
+		};
+	}
+	useWindowEvent("click", (event) => {
+		const { target } = event;
+		if (!(target instanceof Element)) return;
+		setLastClickedElement(target);
+		if (isComponentElement(children, Switcher) && !target.closest(`.${prefix}--header-panel--expanded`) && !target.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+			setExpandedState(false);
+			onHeaderPanelFocus();
+		}
+	});
+	return /* @__PURE__ */ jsx("div", {
+		...rest,
+		className,
+		ref: headerPanelRef,
+		...eventHandlers,
+		children
+	});
 });
 HeaderPanel.propTypes = {
-  /**
-   * Specify whether focus and blur listeners are added. They are by default.
-   */
-  addFocusListeners: PropTypes.bool,
-  /**
-   * The content that will render inside of the `HeaderPanel`
-   */
-  children: PropTypes.node,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the panel is expanded
-   */
-  expanded: PropTypes.bool,
-  /**
-   * Provide the `href` to the id of the element on your package that could
-   * be target.
-   */
-  href: PropTypes.string,
-  /**
-   * An optional listener that is called a callback to collapse the HeaderPanel
-   */
-  onHeaderPanelFocus: PropTypes.func
+	addFocusListeners: PropTypes.bool,
+	children: PropTypes.node,
+	className: PropTypes.string,
+	expanded: PropTypes.bool,
+	href: PropTypes.string,
+	onHeaderPanelFocus: PropTypes.func
 };
-HeaderPanel.displayName = 'HeaderPanel';
+HeaderPanel.displayName = "HeaderPanel";
 
-export { HeaderPanel as default };
+//#endregion
+export { HeaderPanel as default };