@carbon/react 1.103.0 → 1.104.0-rc.0

package/es/components/UIShell/SideNavSwitcher.js

@@ -1,79 +1,70 @@
 /**
- * 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 { ChevronDown } from '@carbon/icons-react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import React, { forwardRef } from 'react';
-import { useId } from '../../internal/useId.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { useId } from "../../internal/useId.js";
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronDown } from "@carbon/icons-react";
 
-var _ChevronDown;
-const SideNavSwitcher = /*#__PURE__*/forwardRef((props, ref) => {
-  const id = useId('side-nav-switcher');
-  const prefix = usePrefix();
-  const {
-    className: customClassName,
-    labelText,
-    onChange,
-    options
-  } = props;
-  const className = cx(`${prefix}--side-nav__switcher`, customClassName);
-
-  // Note for usage around `onBlur`: https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/no-onchange.md
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement("label", {
-    htmlFor: id,
-    className: `${prefix}--assistive-text`
-  }, labelText), /*#__PURE__*/React.createElement("select", {
-    id: id,
-    className: `${prefix}--side-nav__select`,
-    defaultValue: "",
-    onBlur: onChange,
-    onChange: onChange,
-    ref: ref
-  }, /*#__PURE__*/React.createElement("option", {
-    className: `${prefix}--side-nav__option`,
-    disabled: true,
-    hidden: true,
-    value: ""
-  }, labelText), options.map(option => /*#__PURE__*/React.createElement("option", {
-    key: option,
-    className: `${prefix}--side-nav__option`,
-    value: option
-  }, option))), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--side-nav__switcher-chevron`
-  }, _ChevronDown || (_ChevronDown = /*#__PURE__*/React.createElement(ChevronDown, {
-    size: 20
-  }))));
+//#region src/components/UIShell/SideNavSwitcher.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.
+*/
+const SideNavSwitcher = forwardRef((props, ref) => {
+	const id = useId("side-nav-switcher");
+	const prefix = usePrefix();
+	const { className: customClassName, labelText, onChange, options } = props;
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames(`${prefix}--side-nav__switcher`, customClassName),
+		children: [
+			/* @__PURE__ */ jsx("label", {
+				htmlFor: id,
+				className: `${prefix}--assistive-text`,
+				children: labelText
+			}),
+			/* @__PURE__ */ jsxs("select", {
+				id,
+				className: `${prefix}--side-nav__select`,
+				defaultValue: "",
+				onBlur: onChange,
+				onChange,
+				ref,
+				children: [/* @__PURE__ */ jsx("option", {
+					className: `${prefix}--side-nav__option`,
+					disabled: true,
+					hidden: true,
+					value: "",
+					children: labelText
+				}), options.map((option) => /* @__PURE__ */ jsx("option", {
+					className: `${prefix}--side-nav__option`,
+					value: option,
+					children: option
+				}, option))]
+			}),
+			/* @__PURE__ */ jsx("div", {
+				className: `${prefix}--side-nav__switcher-chevron`,
+				children: /* @__PURE__ */ jsx(ChevronDown, { size: 20 })
+			})
+		]
+	});
 });
-SideNavSwitcher.displayName = 'SideNavSwitcher';
+SideNavSwitcher.displayName = "SideNavSwitcher";
 SideNavSwitcher.propTypes = {
-  /**
-   * Provide an optional class to be applied to the containing node
-   */
-  className: PropTypes.string,
-  /**
-   * Provide the label for the switcher. This will be the first visible option
-   * when someone views this control
-   */
-  labelText: PropTypes.string.isRequired,
-  /**
-   * Provide a callback function that is called whenever the switcher value is
-   * updated
-   */
-  onChange: PropTypes.func,
-  /**
-   * Provide an array of options to be rendered in the switcher as an
-   * `<option>`. The text value will be what is displayed to the user and is set
-   * as the `value` prop for each `<option>`.
-   */
-  options: PropTypes.arrayOf(PropTypes.string).isRequired
+	className: PropTypes.string,
+	labelText: PropTypes.string.isRequired,
+	onChange: PropTypes.func,
+	options: PropTypes.arrayOf(PropTypes.string).isRequired
 };
 
-export { SideNavSwitcher as default };
+//#endregion
+export { SideNavSwitcher as default };

package/es/components/UIShell/SkipToContent.js

@@ -1,47 +1,39 @@
 /**
- * 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 { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-function SkipToContent({
-  children = 'Skip to main content',
-  className: customClassName,
-  href = '#main-content',
-  tabIndex = 0,
-  ...rest
-}) {
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--skip-to-content`, customClassName);
-  return /*#__PURE__*/React.createElement("a", _extends({}, rest, {
-    className: className,
-    href: href,
-    tabIndex: tabIndex
-  }), children);
+//#region src/components/UIShell/SkipToContent.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 SkipToContent({ children = "Skip to main content", className: customClassName, href = "#main-content", tabIndex = 0, ...rest }) {
+	const className = classNames(`${usePrefix()}--skip-to-content`, customClassName);
+	return /* @__PURE__ */ jsx("a", {
+		...rest,
+		className,
+		href,
+		tabIndex,
+		children
+	});
 }
 SkipToContent.propTypes = {
-  /**
-   * A ReactNode to display in the SkipToContent `a` tag.
-   * `'Skip to main content'` by default.
-   */
-  children: PropTypes.string,
-  className: PropTypes.string,
-  /**
-   * Provide the `href` to the id of the element on your package that is the
-   * main content. `#main-content` by default.
-   */
-  href: PropTypes.string,
-  /**
-   * Optionally override the default tabindex of 0
-   */
-  tabIndex: PropTypes.string
+	children: PropTypes.string,
+	className: PropTypes.string,
+	href: PropTypes.string,
+	tabIndex: PropTypes.string
 };
 
-export { SkipToContent as default };
+//#endregion
+export { SkipToContent as default };

package/es/components/UIShell/Switcher.js

@@ -1,110 +1,80 @@
 /**
- * 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 React, { forwardRef, useRef, Children, cloneElement } from 'react';
-import cx from 'classnames';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import { isComponentElement } from '../../internal/utils.js';
-import PropTypes from 'prop-types';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
-import SwitcherItem from './SwitcherItem.js';
-import SwitcherDivider from './SwitcherDivider.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import { isComponentElement } from "../../internal/utils.js";
+import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
+import SwitcherItem from "./SwitcherItem.js";
+import SwitcherDivider from "./SwitcherDivider.js";
+import classNames from "classnames";
+import React, { Children, cloneElement, forwardRef, useRef } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const Switcher = /*#__PURE__*/forwardRef((props, forwardRef) => {
-  const switcherRef = useRef(null);
-  const ref = useMergedRefs([switcherRef, forwardRef]);
-  const prefix = usePrefix();
-  const {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    className: customClassName,
-    children,
-    expanded
-  } = props;
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
-  const className = cx(`${prefix}--switcher`, {
-    [customClassName || '']: !!customClassName
-  });
-  const handleSwitcherItemFocus = ({
-    currentIndex,
-    direction
-  }) => {
-    const enabledIndices = Children.toArray(children).reduce((acc, child, i) => {
-      if (isComponentElement(child, SwitcherItem) && Object.keys(child.props).length) {
-        acc.push(i);
-      }
-      return acc;
-    }, []);
-    const nextValidIndex = (() => {
-      const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
-      switch (enabledIndices[nextIndex]) {
-        case undefined:
-          if (direction === -1) {
-            return enabledIndices[enabledIndices.length - 1];
-          }
-          return enabledIndices[0];
-        case 0:
-          if (direction === 1) {
-            return enabledIndices[1];
-          }
-        // eslint-disable-next-line   no-fallthrough -- https://github.com/carbon-design-system/carbon/issues/20452
-        default:
-          return enabledIndices[nextIndex];
-      }
-    })();
-    const switcherItem = switcherRef.current?.children[nextValidIndex]?.children[0];
-    if (switcherItem instanceof HTMLElement) {
-      switcherItem.focus();
-    }
-  };
-  const childrenWithProps = Children.toArray(children).map((child, index) => {
-    if (isComponentElement(child, SwitcherItem)) {
-      return /*#__PURE__*/cloneElement(child, {
-        handleSwitcherItemFocus,
-        index,
-        key: index,
-        expanded
-      });
-    }
-    if (isComponentElement(child, SwitcherDivider)) {
-      return /*#__PURE__*/cloneElement(child, {
-        key: index
-      });
-    }
-    return child;
-  });
-  return /*#__PURE__*/React.createElement("ul", _extends({
-    ref: ref,
-    className: className
-  }, accessibilityLabel), childrenWithProps);
+//#region src/components/UIShell/Switcher.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 Switcher = forwardRef((props, forwardRef) => {
+	const switcherRef = useRef(null);
+	const ref = useMergedRefs([switcherRef, forwardRef]);
+	const prefix = usePrefix();
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: customClassName, children, expanded } = props;
+	const accessibilityLabel = {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy
+	};
+	const className = classNames(`${prefix}--switcher`, { [customClassName || ""]: !!customClassName });
+	const handleSwitcherItemFocus = ({ currentIndex, direction }) => {
+		const enabledIndices = Children.toArray(children).reduce((acc, child, i) => {
+			if (isComponentElement(child, SwitcherItem) && Object.keys(child.props).length) acc.push(i);
+			return acc;
+		}, []);
+		const nextValidIndex = (() => {
+			const nextIndex = enabledIndices.indexOf(currentIndex) + direction;
+			switch (enabledIndices[nextIndex]) {
+				case void 0:
+					if (direction === -1) return enabledIndices[enabledIndices.length - 1];
+					return enabledIndices[0];
+				case 0: if (direction === 1) return enabledIndices[1];
+				default: return enabledIndices[nextIndex];
+			}
+		})();
+		const switcherItem = switcherRef.current?.children[nextValidIndex]?.children[0];
+		if (switcherItem instanceof HTMLElement) switcherItem.focus();
+	};
+	const childrenWithProps = Children.toArray(children).map((child, index) => {
+		if (isComponentElement(child, SwitcherItem)) return cloneElement(child, {
+			handleSwitcherItemFocus,
+			index,
+			key: index,
+			expanded
+		});
+		if (isComponentElement(child, SwitcherDivider)) return cloneElement(child, { key: index });
+		return child;
+	});
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		className,
+		...accessibilityLabel,
+		children: childrenWithProps
+	});
 });
-Switcher.displayName = 'Switcher';
+Switcher.displayName = "Switcher";
 Switcher.propTypes = {
-  /**
-   * Required props for accessibility label on the underlying menu
-   */
-  ...AriaLabelPropType,
-  /**
-   * expects to receive <SwitcherItem />
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<ul>` node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the panel is expanded
-   */
-  expanded: PropTypes.bool
+	...AriaLabelPropType,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	expanded: PropTypes.bool
 };
 
-export { Switcher as default };
+//#endregion
+export { Switcher as default };

package/es/components/UIShell/SwitcherDivider.js

@@ -1,33 +1,25 @@
 /**
- * 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 React from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const SwitcherDivider = ({
-  className: customClassName,
-  ...other
-}) => {
-  const prefix = usePrefix();
-  const classNames = cx(`${prefix}--switcher__item--divider`, {
-    [customClassName || '']: !!customClassName
-  });
-  return /*#__PURE__*/React.createElement("hr", _extends({}, other, {
-    className: classNames
-  }));
-};
-SwitcherDivider.propTypes = {
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string
+//#region src/components/UIShell/SwitcherDivider.tsx
+const SwitcherDivider = ({ className: customClassName, ...other }) => {
+	const classNames$1 = classNames(`${usePrefix()}--switcher__item--divider`, { [customClassName || ""]: !!customClassName });
+	return /* @__PURE__ */ jsx("hr", {
+		...other,
+		className: classNames$1
+	});
 };
+SwitcherDivider.propTypes = { className: PropTypes.string };
 
-export { SwitcherDivider as default };
+//#endregion
+export { SwitcherDivider as default };

package/es/components/UIShell/SwitcherItem.js

@@ -1,125 +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 React, { forwardRef } from 'react';
-import cx from 'classnames';
-import PropTypes from 'prop-types';
-import Link from './Link.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { ArrowDown, ArrowUp } from '../../internal/keyboard/keys.js';
-import { match } from '../../internal/keyboard/match.js';
-import { AriaLabelPropType } from '../../prop-types/AriaPropTypes.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { ArrowDown, ArrowUp } from "../../internal/keyboard/keys.js";
+import { match } from "../../internal/keyboard/match.js";
+import { AriaLabelPropType } from "../../prop-types/AriaPropTypes.js";
+import Link from "./Link.js";
+import classNames from "classnames";
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const SwitcherItem = /*#__PURE__*/forwardRef((props, forwardRef) => {
-  const {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy,
-    className: customClassName,
-    children,
-    isSelected,
-    expanded,
-    tabIndex = expanded ? 0 : -1,
-    index,
-    handleSwitcherItemFocus,
-    onKeyDown = () => {},
-    href,
-    target,
-    rel,
-    ...rest
-  } = props;
-  const prefix = usePrefix();
-  const classNames = cx(`${prefix}--switcher__item`, {
-    [customClassName || '']: !!customClassName
-  });
-  const accessibilityLabel = {
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledBy
-  };
-  const linkClassName = cx(`${prefix}--switcher__item-link`, {
-    [`${prefix}--switcher__item-link--selected`]: isSelected
-  });
-  function setTabFocus(evt) {
-    if (match(evt, ArrowDown)) {
-      evt.preventDefault();
-      handleSwitcherItemFocus?.({
-        currentIndex: index || -1,
-        direction: 1
-      });
-    }
-    if (match(evt, ArrowUp)) {
-      evt.preventDefault();
-      handleSwitcherItemFocus?.({
-        currentIndex: index || -1,
-        direction: -1
-      });
-    }
-  }
-  return /*#__PURE__*/React.createElement("li", {
-    className: classNames
-  }, /*#__PURE__*/React.createElement(Link, _extends({
-    onKeyDown: evt => {
-      setTabFocus(evt);
-      onKeyDown(evt);
-    },
-    href: href,
-    target: target,
-    rel: rel
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-    ,
-    ref: forwardRef
-  }, rest, {
-    className: linkClassName,
-    tabIndex: tabIndex
-  }, accessibilityLabel), children));
+//#region src/components/UIShell/SwitcherItem.tsx
+/**
+* Copyright IBM Corp. 2023, 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 SwitcherItem = forwardRef((props, forwardRef) => {
+	const { "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, className: customClassName, children, isSelected, expanded, tabIndex = expanded ? 0 : -1, index, handleSwitcherItemFocus, onKeyDown = () => {}, href, target, rel, ...rest } = props;
+	const prefix = usePrefix();
+	const classNames$1 = classNames(`${prefix}--switcher__item`, { [customClassName || ""]: !!customClassName });
+	const accessibilityLabel = {
+		"aria-label": ariaLabel,
+		"aria-labelledby": ariaLabelledBy
+	};
+	const linkClassName = classNames(`${prefix}--switcher__item-link`, { [`${prefix}--switcher__item-link--selected`]: isSelected });
+	function setTabFocus(evt) {
+		if (match(evt, ArrowDown)) {
+			evt.preventDefault();
+			handleSwitcherItemFocus?.({
+				currentIndex: index || -1,
+				direction: 1
+			});
+		}
+		if (match(evt, ArrowUp)) {
+			evt.preventDefault();
+			handleSwitcherItemFocus?.({
+				currentIndex: index || -1,
+				direction: -1
+			});
+		}
+	}
+	return /* @__PURE__ */ jsx("li", {
+		className: classNames$1,
+		children: /* @__PURE__ */ jsx(Link, {
+			onKeyDown: (evt) => {
+				setTabFocus(evt);
+				onKeyDown(evt);
+			},
+			href,
+			target,
+			rel,
+			ref: forwardRef,
+			...rest,
+			className: linkClassName,
+			tabIndex,
+			...accessibilityLabel,
+			children
+		})
+	});
 });
-SwitcherItem.displayName = 'SwitcherItem';
+SwitcherItem.displayName = "SwitcherItem";
 SwitcherItem.propTypes = {
-  ...AriaLabelPropType,
-  /**
-   * Specify the text content for the link
-   */
-  children: PropTypes.node.isRequired,
-  /**
-   * Optionally provide a custom class to apply to the underlying `<li>` node
-   */
-  className: PropTypes.string,
-  /**
-   * event handlers
-   */
-  handleSwitcherItemFocus: PropTypes.func,
-  /**
-   * Optionally provide an href for the underlying li`
-   */
-  href: PropTypes.string,
-  /**
-   * Specify the index of the SwitcherItem
-   */
-  index: PropTypes.number,
-  /**
-   * event handlers
-   */
-  onClick: PropTypes.func,
-  /**
-   * event handlers
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Specify the tab index of the Link
-   */
-  tabIndex: PropTypes.number,
-  /**
-   * Specify where to open the link.
-   */
-  target: PropTypes.string,
-  /**
-   * The rel property for the link.
-   */
-  rel: PropTypes.string
+	...AriaLabelPropType,
+	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
+	handleSwitcherItemFocus: PropTypes.func,
+	href: PropTypes.string,
+	index: PropTypes.number,
+	onClick: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	tabIndex: PropTypes.number,
+	target: PropTypes.string,
+	rel: PropTypes.string
 };
 
-export { SwitcherItem as default };
+//#endregion
+export { SwitcherItem as default };