@carbon/react 1.103.0-rc.0 → 1.104.0-rc.0

package/lib/components/ListBox/ListBoxMenuIcon.js

@@ -1,61 +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.
  */
 
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cx = require('classnames');
-var React = require('react');
-var PropTypes = require('prop-types');
-var iconsReact = require('@carbon/icons-react');
-var usePrefix = require('../../internal/usePrefix.js');
+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");
+let _carbon_icons_react = require("@carbon/icons-react");
 
+//#region src/components/ListBox/ListBoxMenuIcon.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 = {
-  'close.menu': 'close.menu',
-  'open.menu': 'open.menu'
+	"close.menu": "close.menu",
+	"open.menu": "open.menu"
 };
 const defaultTranslations = {
-  [translationIds['close.menu']]: 'Close menu',
-  [translationIds['open.menu']]: 'Open menu'
+	[translationIds["close.menu"]]: "Close menu",
+	[translationIds["open.menu"]]: "Open menu"
 };
-const defaultTranslateWithId = messageId => {
-  return defaultTranslations[messageId];
+const defaultTranslateWithId = (messageId) => {
+	return defaultTranslations[messageId];
 };
 /**
- * `ListBoxMenuIcon` is used to orient the icon up or down depending on the
- * state of the menu for a given `ListBox`
- */
-const ListBoxMenuIcon = ({
-  isOpen,
-  translateWithId: t = defaultTranslateWithId
-}) => {
-  const prefix = usePrefix.usePrefix();
-  const className = cx(`${prefix}--list-box__menu-icon`, {
-    [`${prefix}--list-box__menu-icon--open`]: isOpen
-  });
-  const description = isOpen ? t('close.menu') : t('open.menu');
-  return /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, /*#__PURE__*/React.createElement(iconsReact.ChevronDown, {
-    name: "chevron--down",
-    "aria-label": description
-  }, /*#__PURE__*/React.createElement("title", null, description)));
+* `ListBoxMenuIcon` is used to orient the icon up or down depending on the
+* state of the menu for a given `ListBox`
+*/
+const ListBoxMenuIcon = ({ isOpen, translateWithId: t = defaultTranslateWithId }) => {
+	const prefix = require_usePrefix.usePrefix();
+	const className = (0, classnames.default)(`${prefix}--list-box__menu-icon`, { [`${prefix}--list-box__menu-icon--open`]: isOpen });
+	const description = isOpen ? t("close.menu") : t("open.menu");
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+		className,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.ChevronDown, {
+			name: "chevron--down",
+			"aria-label": description,
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("title", { children: description })
+		})
+	});
 };
 ListBoxMenuIcon.propTypes = {
-  /**
-   * Specify whether the menu is currently open, which will influence the
-   * direction of the menu icon
-   */
-  isOpen: PropTypes.bool.isRequired,
-  /**
-   * Translates component strings using your i18n tool.
-   */
-  translateWithId: PropTypes.func
+	isOpen: prop_types.default.bool.isRequired,
+	translateWithId: prop_types.default.func
 };
 
-exports.default = ListBoxMenuIcon;
+//#endregion
+exports.default = ListBoxMenuIcon;

package/lib/components/ListBox/ListBoxMenuItem.js

@@ -1,106 +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.
  */
 
-'use strict';
-
-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 usePrefix = require('../../internal/usePrefix.js');
-var useMergedRefs = require('../../internal/useMergedRefs.js');
+const require_runtime = require('../../_virtual/_rolldown/runtime.js');
+const require_usePrefix = require('../../internal/usePrefix.js');
+const require_useMergedRefs = require('../../internal/useMergedRefs.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");
 
+//#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 = React.useRef(null);
-  const mergedRef = useMergedRefs.useMergedRefs([...(forwardedRef ? [forwardedRef] : []), localRef]);
-  const [isTruncated, setIsTruncated] = React.useState(false);
-  React.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 = (0, react.useRef)(null);
+	const mergedRef = require_useMergedRefs.useMergedRefs([...forwardedRef ? [forwardedRef] : [], localRef]);
+	const [isTruncated, setIsTruncated] = (0, react.useState)(false);
+	(0, react.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__*/React.forwardRef(({
-  children,
-  isActive = false,
-  isHighlighted = false,
-  title,
-  ...rest
-}, forwardedRef) => {
-  const prefix = usePrefix.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", _rollupPluginBabelHelpers.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 = (0, react.forwardRef)(({ children, isActive = false, isHighlighted = false, title, ...rest }, forwardedRef) => {
+	const prefix = require_usePrefix.usePrefix();
+	const { isTruncated, ref: menuItemOptionRef } = useIsTruncated(forwardedRef && typeof forwardedRef !== "function" ? forwardedRef.menuItemOptionRef : void 0, [children]);
+	const className = (0, classnames.default)(`${prefix}--list-box__menu-item`, {
+		[`${prefix}--list-box__menu-item--active`]: isActive,
+		[`${prefix}--list-box__menu-item--highlighted`]: isHighlighted
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("li", {
+		...rest,
+		className,
+		title: isTruncated ? title : void 0,
+		children: /* @__PURE__ */ (0, react_jsx_runtime.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: prop_types.default.node,
+	disabled: prop_types.default.bool,
+	isActive: prop_types.default.bool,
+	isHighlighted: prop_types.default.bool,
+	title: prop_types.default.string
 };
 
-exports.default = ListBoxMenuItem;
+//#endregion
+exports.default = ListBoxMenuItem;

package/lib/components/ListBox/ListBoxPropTypes.js

@@ -1,18 +1,30 @@
 /**
- * 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');
+let prop_types = require("prop-types");
+prop_types = require_runtime.__toESM(prop_types);
 
-var PropTypes = require('prop-types');
-
-const listBoxTypes = ['default', 'inline'];
-const listBoxSizes = ['sm', 'md', 'lg'];
-const ListBoxTypePropType = PropTypes.oneOf(listBoxTypes);
-const ListBoxSizePropType = PropTypes.oneOf(listBoxSizes);
+//#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 = prop_types.default.oneOf(listBoxTypes);
+const ListBoxSizePropType = prop_types.default.oneOf(listBoxSizes);
 
+//#endregion
 exports.ListBoxSizePropType = ListBoxSizePropType;
-exports.ListBoxTypePropType = ListBoxTypePropType;
+exports.ListBoxTypePropType = ListBoxTypePropType;

package/lib/components/ListBox/ListBoxSelection.js

@@ -1,117 +1,92 @@
 /**
- * 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");
+let _carbon_icons_react = require("@carbon/icons-react");
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var cx = require('classnames');
-var React = require('react');
-var PropTypes = require('prop-types');
-var iconsReact = require('@carbon/icons-react');
-var usePrefix = require('../../internal/usePrefix.js');
-
-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.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(iconsReact.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(iconsReact.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 = require_usePrefix.usePrefix();
+	const className = (0, classnames.default)(`${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 = (0, classnames.default)(`${prefix}--tag`, `${prefix}--tag--filter`, `${prefix}--tag--high-contrast`, { [`${prefix}--tag--disabled`]: disabled });
+	return selectionCount ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: tagClasses,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+			className: `${prefix}--tag__label`,
+			title: `${selectionCount}`,
+			children: selectionCount
+		}), /* @__PURE__ */ (0, react_jsx_runtime.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__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.Close, {})
+		})]
+	}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		role: "button",
+		className,
+		tabIndex: -1,
+		onClick: handleOnClick,
+		"aria-label": description,
+		title: description,
+		children: [selectionCount, /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.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: prop_types.default.func.isRequired,
+	disabled: prop_types.default.bool,
+	onClearSelection: prop_types.default.func,
+	readOnly: prop_types.default.bool,
+	selectionCount: prop_types.default.number,
+	translateWithId: prop_types.default.func
 };
 
-exports.default = ListBoxSelection;
+//#endregion
+exports.default = ListBoxSelection;

package/lib/components/ListBox/index.js

@@ -1,30 +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.
  */
 
-'use strict';
+const require_ListBoxPropTypes = require('./ListBoxPropTypes.js');
+const require_ListBox = require('./ListBox.js');
+const require_ListBoxField = require('./ListBoxField.js');
+const require_ListBoxMenuItem = require('./ListBoxMenuItem.js');
+const require_ListBoxMenu = require('./ListBoxMenu.js');
+const require_ListBoxMenuIcon = require('./ListBoxMenuIcon.js');
+const require_ListBoxSelection = require('./ListBoxSelection.js');
 
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var ListBoxPropTypes = require('./ListBoxPropTypes.js');
-var ListBox$1 = require('./ListBox.js');
-var ListBoxField = require('./ListBoxField.js');
-var ListBoxMenu = require('./ListBoxMenu.js');
-var ListBoxMenuIcon = require('./ListBoxMenuIcon.js');
-var ListBoxMenuItem = require('./ListBoxMenuItem.js');
-var ListBoxSelection = require('./ListBoxSelection.js');
-
-const ListBox = Object.assign(ListBox$1.default, {
-  Field: ListBoxField.default,
-  Menu: ListBoxMenu.default,
-  MenuIcon: ListBoxMenuIcon.default,
-  MenuItem: ListBoxMenuItem.default,
-  Selection: ListBoxSelection.default
+//#region src/components/ListBox/index.ts
+const ListBox = Object.assign(require_ListBox.default, {
+	Field: require_ListBoxField.default,
+	Menu: require_ListBoxMenu.default,
+	MenuIcon: require_ListBoxMenuIcon.default,
+	MenuItem: require_ListBoxMenuItem.default,
+	Selection: require_ListBoxSelection.default
 });
 
-exports.ListBoxSizePropType = ListBoxPropTypes.ListBoxSizePropType;
-exports.ListBoxTypePropType = ListBoxPropTypes.ListBoxTypePropType;
-exports.default = ListBox;
+//#endregion
+exports.default = ListBox;