@carbon/react 1.103.0 → 1.104.0-rc.0

package/es/components/ListBox/ListBoxMenuItem.js

@@ -1,102 +1,81 @@
 /**
- * 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, { forwardRef, useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { useMergedRefs } from '../../internal/useMergedRefs.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { useMergedRefs } from "../../internal/useMergedRefs.js";
+import classNames from "classnames";
+import React, { forwardRef, useEffect, useRef, useState } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
+//#region src/components/ListBox/ListBoxMenuItem.tsx
 /**
- * Determines if the content of an element is truncated.
- *
- * Merges a forwarded ref with a local ref to check the element's dimensions.
- *
- * @template T
- * @param forwardedRef - A ref passed from the parent component.
- * @param deps - Dependencies to re-run the truncation check.
- * @returns An object containing the truncation state and the merged ref.
- */
-const useIsTruncated = (forwardedRef,
-// eslint-disable-next-line @typescript-eslint/no-explicit-any -- https://github.com/carbon-design-system/carbon/issues/20452
-deps = []) => {
-  const localRef = useRef(null);
-  const mergedRef = useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
-  const [isTruncated, setIsTruncated] = useState(false);
-  useEffect(() => {
-    const element = localRef.current;
-    if (element) {
-      const {
-        offsetWidth,
-        scrollWidth
-      } = element;
-      setIsTruncated(offsetWidth < scrollWidth);
-    }
-    // eslint-disable-next-line  react-hooks/exhaustive-deps -- https://github.com/carbon-design-system/carbon/issues/20452
-  }, [localRef, ...deps]);
-  return {
-    isTruncated,
-    ref: mergedRef
-  };
+* 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.
+*/
+/**
+* Determines if the content of an element is truncated.
+*
+* Merges a forwarded ref with a local ref to check the element's dimensions.
+*
+* @template T
+* @param forwardedRef - A ref passed from the parent component.
+* @param deps - Dependencies to re-run the truncation check.
+* @returns An object containing the truncation state and the merged ref.
+*/
+const useIsTruncated = (forwardedRef, deps = []) => {
+	const localRef = useRef(null);
+	const mergedRef = useMergedRefs([...forwardedRef ? [forwardedRef] : [], localRef]);
+	const [isTruncated, setIsTruncated] = useState(false);
+	useEffect(() => {
+		const element = localRef.current;
+		if (element) {
+			const { offsetWidth, scrollWidth } = element;
+			setIsTruncated(offsetWidth < scrollWidth);
+		}
+	}, [localRef, ...deps]);
+	return {
+		isTruncated,
+		ref: mergedRef
+	};
 };
 /**
- * `ListBoxMenuItem` is a helper component for managing the container class
- * name, alongside any classes for any corresponding states, for a generic list
- * box menu item.
- */
-const ListBoxMenuItem = /*#__PURE__*/forwardRef(({
-  children,
-  isActive = false,
-  isHighlighted = false,
-  title,
-  ...rest
-}, forwardedRef) => {
-  const prefix = usePrefix();
-  const menuItemOptionRefProp = forwardedRef && typeof forwardedRef !== 'function' ? forwardedRef.menuItemOptionRef : undefined;
-  const {
-    isTruncated,
-    ref: menuItemOptionRef
-  } = useIsTruncated(menuItemOptionRefProp, [children]);
-  const className = cx(`${prefix}--list-box__menu-item`, {
-    [`${prefix}--list-box__menu-item--active`]: isActive,
-    [`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
-  });
-  return /*#__PURE__*/React.createElement("li", _extends({}, rest, {
-    className: className,
-    title: isTruncated ? title : undefined
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--list-box__menu-item__option`,
-    ref: menuItemOptionRef
-  }, children));
+* `ListBoxMenuItem` is a helper component for managing the container class
+* name, alongside any classes for any corresponding states, for a generic list
+* box menu item.
+*/
+const ListBoxMenuItem = forwardRef(({ children, isActive = false, isHighlighted = false, title, ...rest }, forwardedRef) => {
+	const prefix = usePrefix();
+	const { isTruncated, ref: menuItemOptionRef } = useIsTruncated(forwardedRef && typeof forwardedRef !== "function" ? forwardedRef.menuItemOptionRef : void 0, [children]);
+	const className = classNames(`${prefix}--list-box__menu-item`, {
+		[`${prefix}--list-box__menu-item--active`]: isActive,
+		[`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
+	});
+	return /* @__PURE__ */ jsx("li", {
+		...rest,
+		className,
+		title: isTruncated ? title : void 0,
+		children: /* @__PURE__ */ jsx("div", {
+			className: `${prefix}--list-box__menu-item__option`,
+			ref: menuItemOptionRef,
+			children
+		})
+	});
 });
-ListBoxMenuItem.displayName = 'ListBoxMenuItem';
+ListBoxMenuItem.displayName = "ListBoxMenuItem";
 ListBoxMenuItem.propTypes = {
-  /**
-   * Specify any children nodes that should be rendered inside of the ListBox
-   * Menu Item
-   */
-  children: PropTypes.node,
-  /**
-   * Specify if the item should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify whether the current menu item is "active".
-   */
-  isActive: PropTypes.bool,
-  /**
-   * Specify whether the current menu item is "highlighted".
-   */
-  isHighlighted: PropTypes.bool,
-  /**
-   * Provide an optional tooltip for the ListBoxMenuItem
-   */
-  title: PropTypes.string
+	children: PropTypes.node,
+	disabled: PropTypes.bool,
+	isActive: PropTypes.bool,
+	isHighlighted: PropTypes.bool,
+	title: PropTypes.string
 };
 
-export { ListBoxMenuItem as default };
+//#endregion
+export { ListBoxMenuItem as default };

package/es/components/ListBox/ListBoxPropTypes.js

@@ -1,15 +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 PropTypes from 'prop-types';
+import PropTypes from "prop-types";
 
-const listBoxTypes = ['default', 'inline'];
-const listBoxSizes = ['sm', 'md', 'lg'];
+//#region src/components/ListBox/ListBoxPropTypes.ts
+/**
+* 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 listBoxTypes = ["default", "inline"];
+const listBoxSizes = [
+	"sm",
+	"md",
+	"lg"
+];
 const ListBoxTypePropType = PropTypes.oneOf(listBoxTypes);
 const ListBoxSizePropType = PropTypes.oneOf(listBoxSizes);
 
-export { ListBoxSizePropType, ListBoxTypePropType };
+//#endregion
+export { ListBoxSizePropType, ListBoxTypePropType };

package/es/components/ListBox/ListBoxSelection.js

@@ -1,113 +1,88 @@
 /**
- * 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 cx from 'classnames';
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Close } from '@carbon/icons-react';
-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, jsxs } from "react/jsx-runtime";
+import { Close } from "@carbon/icons-react";
 
-var _Close, _Close2;
+//#region src/components/ListBox/ListBoxSelection.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 translationIds = {
-  'clear.all': 'clear.all',
-  'clear.selection': 'clear.selection'
+	"clear.all": "clear.all",
+	"clear.selection": "clear.selection"
 };
 const defaultTranslations = {
-  [translationIds['clear.all']]: 'Clear all selected items',
-  [translationIds['clear.selection']]: 'Clear selected item'
+	[translationIds["clear.all"]]: "Clear all selected items",
+	[translationIds["clear.selection"]]: "Clear selected item"
 };
-const defaultTranslateWithId = messageId => {
-  return defaultTranslations[messageId];
+const defaultTranslateWithId = (messageId) => {
+	return defaultTranslations[messageId];
 };
-
 /**
- * `ListBoxSelection` is used to provide controls for clearing a selection, in
- * addition to conditionally rendering a badge if the control has more than one
- * selection.
- */
-const ListBoxSelection = ({
-  clearSelection,
-  selectionCount,
-  translateWithId: t = defaultTranslateWithId,
-  disabled,
-  onClearSelection,
-  readOnly
-}) => {
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--list-box__selection`, {
-    [`${prefix}--tag--filter`]: selectionCount,
-    [`${prefix}--list-box__selection--multi`]: selectionCount
-  });
-  const handleOnClick = event => {
-    event.stopPropagation();
-    if (disabled || readOnly) {
-      return;
-    }
-    clearSelection(event);
-    if (onClearSelection) {
-      onClearSelection(event);
-    }
-  };
-  const description = selectionCount ? t('clear.all') : t('clear.selection');
-  const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
-    [`${prefix}--tag--disabled`]: disabled
-  });
-
-  /* eslint-disable jsx-a11y/click-events-have-key-events */
-  return selectionCount ? /*#__PURE__*/React.createElement("div", {
-    className: tagClasses
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--tag__label`,
-    title: `${selectionCount}`
-  }, selectionCount), /*#__PURE__*/React.createElement("div", {
-    role: "button",
-    tabIndex: -1,
-    className: `${prefix}--tag__close-icon`,
-    onClick: handleOnClick,
-    "aria-label": t('clear.all'),
-    title: description,
-    "aria-disabled": readOnly ? true : undefined
-  }, _Close || (_Close = /*#__PURE__*/React.createElement(Close, null)))) : /*#__PURE__*/React.createElement("div", {
-    role: "button",
-    className: className,
-    tabIndex: -1,
-    onClick: handleOnClick,
-    "aria-label": description,
-    title: description
-  }, selectionCount, _Close2 || (_Close2 = /*#__PURE__*/React.createElement(Close, null)));
+* `ListBoxSelection` is used to provide controls for clearing a selection, in
+* addition to conditionally rendering a badge if the control has more than one
+* selection.
+*/
+const ListBoxSelection = ({ clearSelection, selectionCount, translateWithId: t = defaultTranslateWithId, disabled, onClearSelection, readOnly }) => {
+	const prefix = usePrefix();
+	const className = classNames(`${prefix}--list-box__selection`, {
+		[`${prefix}--tag--filter`]: selectionCount,
+		[`${prefix}--list-box__selection--multi`]: selectionCount
+	});
+	const handleOnClick = (event) => {
+		event.stopPropagation();
+		if (disabled || readOnly) return;
+		clearSelection(event);
+		if (onClearSelection) onClearSelection(event);
+	};
+	const description = selectionCount ? t("clear.all") : t("clear.selection");
+	const tagClasses = classNames(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
+	return selectionCount ? /* @__PURE__ */ jsxs("div", {
+		className: tagClasses,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: `${prefix}--tag__label`,
+			title: `${selectionCount}`,
+			children: selectionCount
+		}), /* @__PURE__ */ jsx("div", {
+			role: "button",
+			tabIndex: -1,
+			className: `${prefix}--tag__close-icon`,
+			onClick: handleOnClick,
+			"aria-label": t("clear.all"),
+			title: description,
+			"aria-disabled": readOnly ? true : void 0,
+			children: /* @__PURE__ */ jsx(Close, {})
+		})]
+	}) : /* @__PURE__ */ jsxs("div", {
+		role: "button",
+		className,
+		tabIndex: -1,
+		onClick: handleOnClick,
+		"aria-label": description,
+		title: description,
+		children: [selectionCount, /* @__PURE__ */ jsx(Close, {})]
+	});
 };
 ListBoxSelection.propTypes = {
-  /**
-   * Specify a function to be invoked when a user interacts with the clear
-   * selection element.
-   */
-  clearSelection: PropTypes.func.isRequired,
-  /**
-   * Specify whether or not the clear selection element should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify an optional `onClearSelection` handler that is called when the underlying
-   * element is cleared
-   */
-  onClearSelection: PropTypes.func,
-  /**
-   * Whether or not the Dropdown is readonly
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Specify an optional `selectionCount` value that will be used to determine
-   * whether the selection should display a badge or a single clear icon.
-   */
-  selectionCount: PropTypes.number,
-  /**
-   * Translates component strings using your i18n tool.
-   */
-  translateWithId: PropTypes.func
+	clearSelection: PropTypes.func.isRequired,
+	disabled: PropTypes.bool,
+	onClearSelection: PropTypes.func,
+	readOnly: PropTypes.bool,
+	selectionCount: PropTypes.number,
+	translateWithId: PropTypes.func
 };
 
-export { ListBoxSelection as default };
+//#endregion
+export { ListBoxSelection as default };

package/es/components/ListBox/index.js

@@ -1,24 +1,26 @@
 /**
- * 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.
  */
 
-export { ListBoxSizePropType, ListBoxTypePropType } from './ListBoxPropTypes.js';
-import ListBox$1 from './ListBox.js';
-import ListBoxField from './ListBoxField.js';
-import ListBoxMenu from './ListBoxMenu.js';
-import ListBoxMenuIcon from './ListBoxMenuIcon.js';
-import ListBoxMenuItem from './ListBoxMenuItem.js';
-import ListBoxSelection from './ListBoxSelection.js';
+import { ListBoxSizePropType, ListBoxTypePropType } from "./ListBoxPropTypes.js";
+import ListBox$1 from "./ListBox.js";
+import ListBoxField from "./ListBoxField.js";
+import ListBoxMenuItem from "./ListBoxMenuItem.js";
+import ListBoxMenu from "./ListBoxMenu.js";
+import ListBoxMenuIcon from "./ListBoxMenuIcon.js";
+import ListBoxSelection from "./ListBoxSelection.js";
 
+//#region src/components/ListBox/index.ts
 const ListBox = Object.assign(ListBox$1, {
-  Field: ListBoxField,
-  Menu: ListBoxMenu,
-  MenuIcon: ListBoxMenuIcon,
-  MenuItem: ListBoxMenuItem,
-  Selection: ListBoxSelection
+	Field: ListBoxField,
+	Menu: ListBoxMenu,
+	MenuIcon: ListBoxMenuIcon,
+	MenuItem: ListBoxMenuItem,
+	Selection: ListBoxSelection
 });
 
-export { ListBox as default };
+//#endregion
+export { ListBox as default };

package/es/components/ListBox/next/ListBoxSelection.js

@@ -1,134 +1,96 @@
 /**
- * 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 { Close } from '@carbon/icons-react';
-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, jsxs } from "react/jsx-runtime";
+import { Close } from "@carbon/icons-react";
 
-var _Close, _Close2;
+//#region src/components/ListBox/next/ListBoxSelection.tsx
 /**
- * `ListBoxSelection` is used to provide controls for clearing a selection, in
- * addition to conditionally rendering a badge if the control has more than one
- * selection.
- */
-
+* 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.
+*/
+/**
+* `ListBoxSelection` is used to provide controls for clearing a selection, in
+* addition to conditionally rendering a badge if the control has more than one
+* selection.
+*/
 const translationIds = {
-  'clear.all': 'clear.all',
-  'clear.selection': 'clear.selection'
+	"clear.all": "clear.all",
+	"clear.selection": "clear.selection"
 };
 const defaultTranslations = {
-  [translationIds['clear.all']]: 'Clear all selected items',
-  [translationIds['clear.selection']]: 'Clear selected item'
+	[translationIds["clear.all"]]: "Clear all selected items",
+	[translationIds["clear.selection"]]: "Clear selected item"
 };
-const defaultTranslateWithId = messageId => {
-  return defaultTranslations[messageId];
+const defaultTranslateWithId = (messageId) => {
+	return defaultTranslations[messageId];
 };
-function ListBoxSelection({
-  clearSelection,
-  selectionCount,
-  translateWithId: t = defaultTranslateWithId,
-  disabled,
-  readOnly,
-  onClearSelection,
-  ...rest
-}) {
-  const prefix = usePrefix();
-  const className = cx(`${prefix}--list-box__selection`, {
-    [`${prefix}--tag--filter`]: selectionCount,
-    [`${prefix}--list-box__selection--multi`]: selectionCount
-  });
-  const description = selectionCount ? t('clear.all') : t('clear.selection');
-  const tagClasses = cx(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, {
-    [`${prefix}--tag--disabled`]: disabled
-  });
-  function onClick(event) {
-    event.stopPropagation();
-    if (disabled || readOnly) {
-      return;
-    }
-    clearSelection(event);
-    if (onClearSelection) {
-      onClearSelection(event);
-    }
-  }
-  if (selectionCount) {
-    return /*#__PURE__*/React.createElement("div", {
-      className: tagClasses
-    }, /*#__PURE__*/React.createElement("span", {
-      className: `${prefix}--tag__label`,
-      title: selectionCount?.toString()
-    }, selectionCount), /*#__PURE__*/React.createElement("button", {
-      "aria-label": description,
-      className: `${prefix}--tag__close-icon`,
-      disabled: disabled || readOnly,
-      onClick: onClick,
-      tabIndex: -1,
-      title: description,
-      type: "button",
-      "aria-disabled": readOnly ? true : undefined
-    }, _Close || (_Close = /*#__PURE__*/React.createElement(Close, null))));
-  }
-  return /*#__PURE__*/React.createElement("button", _extends({}, rest, {
-    "aria-label": description,
-    className: className,
-    disabled: disabled || readOnly,
-    onClick: onClick,
-    tabIndex: -1,
-    title: description,
-    type: "button",
-    "aria-disabled": readOnly ? true : undefined
-  }), _Close2 || (_Close2 = /*#__PURE__*/React.createElement(Close, null)));
+function ListBoxSelection({ clearSelection, selectionCount, translateWithId: t = defaultTranslateWithId, disabled, readOnly, onClearSelection, ...rest }) {
+	const prefix = usePrefix();
+	const className = classNames(`${prefix}--list-box__selection`, {
+		[`${prefix}--tag--filter`]: selectionCount,
+		[`${prefix}--list-box__selection--multi`]: selectionCount
+	});
+	const description = selectionCount ? t("clear.all") : t("clear.selection");
+	const tagClasses = classNames(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
+	function onClick(event) {
+		event.stopPropagation();
+		if (disabled || readOnly) return;
+		clearSelection(event);
+		if (onClearSelection) onClearSelection(event);
+	}
+	if (selectionCount) return /* @__PURE__ */ jsxs("div", {
+		className: tagClasses,
+		children: [/* @__PURE__ */ jsx("span", {
+			className: `${prefix}--tag__label`,
+			title: selectionCount?.toString(),
+			children: selectionCount
+		}), /* @__PURE__ */ jsx("button", {
+			"aria-label": description,
+			className: `${prefix}--tag__close-icon`,
+			disabled: disabled || readOnly,
+			onClick,
+			tabIndex: -1,
+			title: description,
+			type: "button",
+			"aria-disabled": readOnly ? true : void 0,
+			children: /* @__PURE__ */ jsx(Close, {})
+		})]
+	});
+	return /* @__PURE__ */ jsx("button", {
+		...rest,
+		"aria-label": description,
+		className,
+		disabled: disabled || readOnly,
+		onClick,
+		tabIndex: -1,
+		title: description,
+		type: "button",
+		"aria-disabled": readOnly ? true : void 0,
+		children: /* @__PURE__ */ jsx(Close, {})
+	});
 }
 ListBoxSelection.propTypes = {
-  /**
-   * Specify a function to be invoked when a user interacts with the clear
-   * selection element.
-   */
-  clearSelection: PropTypes.func.isRequired,
-  /**
-   * Specify whether or not the clear selection element should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Whether or not the listbox is readonly
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * Specify an optional `onClearSelection` handler that is called when the underlying
-   * element is cleared
-   */
-  onClearSelection: PropTypes.func,
-  /**
-   * Specify an optional `onClick` handler that is called when the underlying
-   * clear selection element is clicked
-   */
-  onClick: PropTypes.func,
-  /**
-   * Specify an optional `onClick` handler that is called when the underlying
-   * clear selection element is clicked
-   */
-  onMouseUp: PropTypes.func,
-  /**
-   * Specify an optional `onKeyDown` handler that is called when the underlying
-   * clear selection element fires a keydown event
-   */
-  onKeyDown: PropTypes.func,
-  /**
-   * Specify an optional `selectionCount` value that will be used to determine
-   * whether the selection should display a badge or a single clear icon.
-   */
-  selectionCount: PropTypes.number,
-  /**
-   * Translates component strings using your i18n tool.
-   */
-  translateWithId: PropTypes.func
+	clearSelection: PropTypes.func.isRequired,
+	disabled: PropTypes.bool,
+	readOnly: PropTypes.bool,
+	onClearSelection: PropTypes.func,
+	onClick: PropTypes.func,
+	onMouseUp: PropTypes.func,
+	onKeyDown: PropTypes.func,
+	selectionCount: PropTypes.number,
+	translateWithId: PropTypes.func
 };
 
-export { ListBoxSelection as default };
+//#endregion
+export { ListBoxSelection as default };