@carbon/react 1.103.0 → 1.104.0-rc.0

package/lib/components/UIShell/HeaderMenuItem.js

@@ -1,91 +1,64 @@
 /**
- * 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_deprecate = require('../../prop-types/deprecate.js');
+const require_Link = require('./Link.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");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var PropTypes = require('prop-types');
-var React = require('react');
-var cx = require('classnames');
-var Link = require('./Link.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var deprecate = require('../../prop-types/deprecate.js');
-
-const HeaderMenuItem = /*#__PURE__*/React.forwardRef(function HeaderMenuItem({
-  className,
-  isActive,
-  isCurrentPage,
-  'aria-current': ariaCurrent,
-  children,
-  role,
-  tabIndex,
-  ...rest
-}, ref) {
-  const prefix = usePrefix.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.default, _rollupPluginBabelHelpers.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 = (0, react.forwardRef)(function HeaderMenuItem({ className, isActive, isCurrentPage, "aria-current": ariaCurrent, children, role, tabIndex, ...rest }, ref) {
+	const prefix = require_usePrefix.usePrefix();
+	const resolvedTabIndex = tabIndex ?? 0;
+	if (isCurrentPage) isActive = isCurrentPage;
+	const hasCurrentClass = isActive && ariaCurrent !== "page";
+	const linkClassName = (0, classnames.default)({
+		[`${prefix}--header__menu-item`]: true,
+		[`${prefix}--header__menu-item--current`]: hasCurrentClass
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		className,
+		role,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Link.default, {
+			...rest,
+			"aria-current": hasCurrentClass ? true : ariaCurrent,
+			className: linkClassName,
+			ref,
+			tabIndex: resolvedTabIndex,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.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
-   */
-  ...Link.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.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
+	...require_Link.LinkPropTypes,
+	children: prop_types.default.node.isRequired,
+	className: prop_types.default.string,
+	isActive: prop_types.default.bool,
+	isCurrentPage: require_deprecate.deprecate(prop_types.default.bool, "The `isCurrentPage` prop for `HeaderMenuItem` has been deprecated. Please use `isActive` instead. This will be removed in the next major release."),
+	role: prop_types.default.string,
+	tabIndex: prop_types.default.number
 };
 
-exports.default = HeaderMenuItem;
+//#endregion
+exports.default = HeaderMenuItem;

package/lib/components/UIShell/HeaderName.js

@@ -1,59 +1,47 @@
 /**
- * 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_Link = require('./Link.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");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var React = require('react');
-var PropTypes = require('prop-types');
-var Link = require('./Link.js');
-var usePrefix = require('../../internal/usePrefix.js');
-
-function HeaderName({
-  children,
-  className: customClassName,
-  prefix = 'IBM',
-  ...rest
-}) {
-  const selectorPrefix = usePrefix.usePrefix();
-  const className = cx(`${selectorPrefix}--header__name`, customClassName);
-  return /*#__PURE__*/React.createElement(Link.default, _rollupPluginBabelHelpers.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 = require_usePrefix.usePrefix();
+	const className = (0, classnames.default)(`${selectorPrefix}--header__name`, customClassName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Link.default, {
+		...rest,
+		className,
+		children: [prefix && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `${selectorPrefix}--header__name--prefix`,
+			children: prefix
+		}), "\xA0"] }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children })]
+	});
 }
 HeaderName.propTypes = {
-  /**
-   * Pass in a valid `element` to replace the underlying `<a>` tag with a
-   * custom `Link` element
-   */
-  ...Link.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
+	...require_Link.LinkPropTypes,
+	children: prop_types.default.node.isRequired,
+	className: prop_types.default.string,
+	href: prop_types.default.string,
+	prefix: prop_types.default.string
 };
 
-exports.default = HeaderName;
+//#endregion
+exports.default = HeaderName;

package/lib/components/UIShell/HeaderNavigation.js

@@ -1,52 +1,47 @@
 /**
- * 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");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-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');
-
-function HeaderNavigation({
-  'aria-label': ariaLabel,
-  'aria-labelledby': ariaLabelledBy,
-  children,
-  className: customClassName,
-  ...rest
-}) {
-  const prefix = usePrefix.usePrefix();
-  const className = cx(`${prefix}--header__nav`, customClassName);
-  return /*#__PURE__*/React.createElement("nav", _rollupPluginBabelHelpers.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 = require_usePrefix.usePrefix();
+	const className = (0, classnames.default)(`${prefix}--header__nav`, customClassName);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("nav", {
+		...rest,
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy,
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+			className: `${prefix}--header__menu-bar`,
+			children
+		})
+	});
 }
 HeaderNavigation.propTypes = {
-  /**
-   * Required props for accessibility label on the underlying menu
-   */
-  ...AriaPropTypes.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
+	...require_AriaPropTypes.AriaLabelPropType,
+	children: prop_types.default.node,
+	className: prop_types.default.string
 };
 
-exports.default = HeaderNavigation;
+//#endregion
+exports.default = HeaderNavigation;

package/lib/components/UIShell/HeaderPanel.js

@@ -1,112 +1,89 @@
 /**
- * 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_noopFn = require('../../internal/noopFn.js');
+const require_useMergedRefs = require('../../internal/useMergedRefs.js');
+const require_useEvent = require('../../internal/useEvent.js');
+const require_utils = require('../../internal/utils.js');
+const require_Switcher = require('./Switcher.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");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
-var cx = require('classnames');
-var PropTypes = require('prop-types');
-var React = require('react');
-var utils = require('../../internal/utils.js');
-var usePrefix = require('../../internal/usePrefix.js');
-var keys = require('../../internal/keyboard/keys.js');
-var match = require('../../internal/keyboard/match.js');
-var useEvent = require('../../internal/useEvent.js');
-var useMergedRefs = require('../../internal/useMergedRefs.js');
-var Switcher = require('./Switcher.js');
-var noopFn = require('../../internal/noopFn.js');
-
-const HeaderPanel = /*#__PURE__*/React.forwardRef(({
-  children,
-  className: customClassName,
-  expanded,
-  addFocusListeners = true,
-  onHeaderPanelFocus = noopFn.noopFn,
-  href,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix.usePrefix();
-  const headerPanelReference = React.useRef(null);
-  const headerPanelRef = useMergedRefs.useMergedRefs([headerPanelReference, ref]);
-  const controlled = React.useRef(expanded !== undefined).current;
-  const [expandedState, setExpandedState] = React.useState(expanded);
-  const expandedProp = controlled ? expanded : expandedState;
-  const [lastClickedElement, setLastClickedElement] = React.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.match(event, keys.Escape)) {
-        setExpandedState(false);
-        onHeaderPanelFocus();
-        if (href) {
-          window.location.href = href;
-        }
-      }
-    };
-  }
-  useEvent.useWindowEvent('click', event => {
-    const {
-      target
-    } = event;
-    if (!(target instanceof Element)) return;
-    setLastClickedElement(target);
-    const isChildASwitcher = utils.isComponentElement(children, Switcher.default);
-    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", _rollupPluginBabelHelpers.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.default.forwardRef(({ children, className: customClassName, expanded, addFocusListeners = true, onHeaderPanelFocus = require_noopFn.noopFn, href, ...rest }, ref) => {
+	const prefix = require_usePrefix.usePrefix();
+	const headerPanelReference = (0, react.useRef)(null);
+	const headerPanelRef = require_useMergedRefs.useMergedRefs([headerPanelReference, ref]);
+	const controlled = (0, react.useRef)(expanded !== void 0).current;
+	const [expandedState, setExpandedState] = (0, react.useState)(expanded);
+	const expandedProp = controlled ? expanded : expandedState;
+	const [lastClickedElement, setLastClickedElement] = (0, react.useState)(null);
+	const className = (0, classnames.default)(`${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 (require_match.match(event, require_keys.Escape)) {
+				setExpandedState(false);
+				onHeaderPanelFocus();
+				if (href) window.location.href = href;
+			}
+		};
+	}
+	require_useEvent.useWindowEvent("click", (event) => {
+		const { target } = event;
+		if (!(target instanceof Element)) return;
+		setLastClickedElement(target);
+		if (require_utils.isComponentElement(children, require_Switcher.default) && !target.closest(`.${prefix}--header-panel--expanded`) && !target.closest(`.${prefix}--header__action`) && !headerPanelReference?.current?.classList.contains(`${prefix}--switcher`) && expanded) {
+			setExpandedState(false);
+			onHeaderPanelFocus();
+		}
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.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: prop_types.default.bool,
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	expanded: prop_types.default.bool,
+	href: prop_types.default.string,
+	onHeaderPanelFocus: prop_types.default.func
 };
-HeaderPanel.displayName = 'HeaderPanel';
+HeaderPanel.displayName = "HeaderPanel";
 
-exports.default = HeaderPanel;
+//#endregion
+exports.default = HeaderPanel;

package/lib/components/UIShell/HeaderSideNavItems.js

@@ -1,48 +1,42 @@
 /**
- * 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');
+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");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cx = require('classnames');
-var React = require('react');
-var PropTypes = require('prop-types');
-var usePrefix = require('../../internal/usePrefix.js');
-
-function HeaderSideNavItems({
-  className: customClassName,
-  children,
-  hasDivider = false
-}) {
-  const prefix = usePrefix.usePrefix();
-  const className = cx({
-    [`${prefix}--side-nav__header-navigation`]: true,
-    [`${prefix}--side-nav__header-divider`]: hasDivider
-  }, customClassName);
-  return /*#__PURE__*/React.createElement("ul", {
-    className: className
-  }, children);
+//#region src/components/UIShell/HeaderSideNavItems.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 HeaderSideNavItems({ className: customClassName, children, hasDivider = false }) {
+	const prefix = require_usePrefix.usePrefix();
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("ul", {
+		className: (0, classnames.default)({
+			[`${prefix}--side-nav__header-navigation`]: true,
+			[`${prefix}--side-nav__header-divider`]: hasDivider
+		}, customClassName),
+		children
+	});
 }
 HeaderSideNavItems.propTypes = {
-  /**
-   * The child nodes to be rendered
-   */
-  children: PropTypes.node,
-  /**
-   * Optionally provide a custom class name that is applied to the underlying
-   * button
-   */
-  className: PropTypes.string,
-  /**
-   * Optionally specify if container will have a bottom divider to differentiate
-   * between original sidenav items and header menu items. False by default.
-   */
-  hasDivider: PropTypes.bool
+	children: prop_types.default.node,
+	className: prop_types.default.string,
+	hasDivider: prop_types.default.bool
 };
 
-exports.default = HeaderSideNavItems;
+//#endregion
+exports.default = HeaderSideNavItems;