@carbon/react 1.103.0 → 1.104.0

package/es/components/ListBox/ListBox.js

@@ -1,140 +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.
  */
 
-import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import cx from 'classnames';
-import React, { forwardRef, useContext } from 'react';
-import PropTypes from 'prop-types';
-import { deprecate } from '../../prop-types/deprecate.js';
-import { ListBoxTypePropType, ListBoxSizePropType } from './ListBoxPropTypes.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import '../FluidForm/FluidForm.js';
-import { FormContext } from '../FluidForm/FormContext.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { deprecate } from "../../prop-types/deprecate.js";
+import { ListBoxSizePropType, ListBoxTypePropType } from "./ListBoxPropTypes.js";
+import { FormContext } from "../FluidForm/FormContext.js";
+import classNames from "classnames";
+import React, { forwardRef, useContext } from "react";
+import PropTypes from "prop-types";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 
-const handleOnKeyDown = event => {
-  if (event.keyCode === 27) {
-    event.stopPropagation();
-  }
+//#region src/components/ListBox/ListBox.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 handleOnKeyDown = (event) => {
+	if (event.keyCode === 27) event.stopPropagation();
 };
-const handleClick = event => {
-  event.preventDefault();
-  event.stopPropagation();
+const handleClick = (event) => {
+	event.preventDefault();
+	event.stopPropagation();
 };
 /**
- * `ListBox` is a generic container component that handles creating the
- * container class name in response to certain props.
- */
-const ListBox = /*#__PURE__*/forwardRef((props, ref) => {
-  const {
-    children,
-    className: containerClassName,
-    disabled = false,
-    type = 'default',
-    size,
-    invalid,
-    invalidText,
-    invalidTextId,
-    warn,
-    warnText,
-    warnTextId,
-    light,
-    isOpen,
-    ...rest
-  } = props;
-  const prefix = usePrefix();
-  const {
-    isFluid
-  } = useContext(FormContext);
-  const showWarning = !invalid && warn;
-  const className = cx({
-    ...(containerClassName && {
-      [containerClassName]: true
-    }),
-    [`${prefix}--list-box`]: true,
-    [`${prefix}--list-box--${size}`]: size,
-    [`${prefix}--list-box--inline`]: type === 'inline',
-    [`${prefix}--list-box--disabled`]: disabled,
-    [`${prefix}--list-box--light`]: light,
-    [`${prefix}--list-box--expanded`]: isOpen,
-    [`${prefix}--list-box--invalid`]: invalid,
-    [`${prefix}--list-box--warning`]: showWarning
-  });
-  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", _extends({}, rest, {
-    className: className,
-    ref: ref,
-    onKeyDown: handleOnKeyDown,
-    onClick: handleClick,
-    "data-invalid": invalid || undefined
-  }), children), isFluid && /*#__PURE__*/React.createElement("hr", {
-    className: `${prefix}--list-box__divider`
-  }), invalid ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--form-requirement`,
-    id: invalidTextId
-  }, invalidText) : null, showWarning ? /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--form-requirement`,
-    id: warnTextId
-  }, warnText) : null);
+* `ListBox` is a generic container component that handles creating the
+* container class name in response to certain props.
+*/
+const ListBox = forwardRef((props, ref) => {
+	const { children, className: containerClassName, disabled = false, type = "default", size, invalid, invalidText, invalidTextId, warn, warnText, warnTextId, light, isOpen, ...rest } = props;
+	const prefix = usePrefix();
+	const { isFluid } = useContext(FormContext);
+	const showWarning = !invalid && warn;
+	const className = classNames({
+		...containerClassName && { [containerClassName]: true },
+		[`${prefix}--list-box`]: true,
+		[`${prefix}--list-box--${size}`]: size,
+		[`${prefix}--list-box--inline`]: type === "inline",
+		[`${prefix}--list-box--disabled`]: disabled,
+		[`${prefix}--list-box--light`]: light,
+		[`${prefix}--list-box--expanded`]: isOpen,
+		[`${prefix}--list-box--invalid`]: invalid,
+		[`${prefix}--list-box--warning`]: showWarning
+	});
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("div", {
+			...rest,
+			className,
+			ref,
+			onKeyDown: handleOnKeyDown,
+			onClick: handleClick,
+			"data-invalid": invalid || void 0,
+			children
+		}),
+		isFluid && /* @__PURE__ */ jsx("hr", { className: `${prefix}--list-box__divider` }),
+		invalid ? /* @__PURE__ */ jsx("div", {
+			className: `${prefix}--form-requirement`,
+			id: invalidTextId,
+			children: invalidText
+		}) : null,
+		showWarning ? /* @__PURE__ */ jsx("div", {
+			className: `${prefix}--form-requirement`,
+			id: warnTextId,
+			children: warnText
+		}) : null
+	] });
 });
-ListBox.displayName = 'ListBox';
+ListBox.displayName = "ListBox";
 ListBox.propTypes = {
-  /**
-   * Provide the contents of your ListBox
-   */
-  children: PropTypes.node,
-  /**
-   * Specify a class name to be applied on the containing list box node
-   */
-  className: PropTypes.string,
-  /**
-   * Specify whether the ListBox is currently disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify whether the control is currently invalid
-   */
-  invalid: PropTypes.bool,
-  /**
-   * Specify the text to be displayed when the control is invalid
-   */
-  invalidText: PropTypes.node,
-  /**
-   * Specify the id to be applied to the element containing the invalid text
-   */
-  invalidTextId: PropTypes.string,
-  /**
-   * Specify if the control should render open
-   */
-  isOpen: PropTypes.bool,
-  /**
-   * `true` to use the light version. For use on $ui-01 backgrounds only.
-   * Don't use this to make tile background color same as container background color.
-   */
-  light: deprecate(PropTypes.bool, 'The `light` prop for `ListBox` has ' + 'been deprecated in favor of the new `Layer` component. It will be removed in the next major release.'),
-  /**
-   * Specify the size of the ListBox. Currently supports either `sm`, `md` or `lg` as an option.
-   */
-  size: ListBoxSizePropType,
-  /**
-   * Specify the "type" of the ListBox. Currently supports either `default` or
-   * `inline` as an option.
-   */
-  type: ListBoxTypePropType,
-  /**
-   * Specify whether the control is currently in warning state
-   */
-  warn: PropTypes.bool,
-  /**
-   * Provide the text that is displayed when the control is in warning state
-   */
-  warnText: PropTypes.string,
-  /**
-   * Specify the id to be applied to the element containing the warn text
-   */
-  warnTextId: PropTypes.string
+	children: PropTypes.node,
+	className: PropTypes.string,
+	disabled: PropTypes.bool,
+	invalid: PropTypes.bool,
+	invalidText: PropTypes.node,
+	invalidTextId: PropTypes.string,
+	isOpen: PropTypes.bool,
+	light: deprecate(PropTypes.bool, "The `light` prop for `ListBox` has been deprecated in favor of the new `Layer` component. It will be removed in the next major release."),
+	size: ListBoxSizePropType,
+	type: ListBoxTypePropType,
+	warn: PropTypes.bool,
+	warnText: PropTypes.string,
+	warnTextId: PropTypes.string
 };
 
-export { ListBox as default };
+//#endregion
+export { ListBox as default };

package/es/components/ListBox/ListBoxField.js

@@ -1,55 +1,36 @@
 /**
- * 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 PropTypes from 'prop-types';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
+//#region src/components/ListBox/ListBoxField.tsx
 /**
- * `ListBoxField` is responsible for creating the containing node for valid
- * elements inside of a field. It also provides a11y-related attributes like
- * `role` to make sure a user can focus the given field.
- */
-function ListBoxField({
-  children,
-  disabled,
-  tabIndex,
-  ...rest
-}) {
-  const prefix = usePrefix();
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: `${prefix}--list-box__field`,
-    tabIndex: !disabled && tabIndex || -1
-  }, rest), children);
+* `ListBoxField` is responsible for creating the containing node for valid
+* elements inside of a field. It also provides a11y-related attributes like
+* `role` to make sure a user can focus the given field.
+*/
+function ListBoxField({ children, disabled, tabIndex, ...rest }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: `${usePrefix()}--list-box__field`,
+		tabIndex: !disabled && tabIndex || -1,
+		...rest,
+		children
+	});
 }
 ListBoxField.propTypes = {
-  /**
-   * Typically set by `getToggleButtonProps`, this should specify whether the
-   * field has a popup.
-   */
-  'aria-haspopup': PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  /**
-   * Provide the contents of your ListBoxField
-   */
-  children: PropTypes.node,
-  /**
-   * Specify if the parent <ListBox> is disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * The role for the component, should be set by `getToggleButtonProps` coming
-   * from Downshift
-   */
-  role: PropTypes.string,
-  /**
-   * Optional prop to specify the tabIndex of the <ListBox> trigger button
-   */
-  tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
+	"aria-haspopup": PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
+	children: PropTypes.node,
+	disabled: PropTypes.bool,
+	role: PropTypes.string,
+	tabIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string])
 };
 
-export { ListBoxField as default };
+//#endregion
+export { ListBoxField as default };

package/es/components/ListBox/ListBoxMenu.js

@@ -1,54 +1,48 @@
 /**
- * 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 { usePrefix } from '../../internal/usePrefix.js';
-import PropTypes from 'prop-types';
-import ListBoxMenuItem from './ListBoxMenuItem.js';
-
-const frFn = forwardRef;
+import { usePrefix } from "../../internal/usePrefix.js";
+import ListBoxMenuItem from "./ListBoxMenuItem.js";
+import React, { forwardRef } from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
+//#region src/components/ListBox/ListBoxMenu.tsx
 /**
- * `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
- * class into a single component. It is also being used to validate given
- * `children` components.
- */
-const ListBoxMenu = frFn(({
-  children,
-  id,
-  ...rest
-}, ref) => {
-  const prefix = usePrefix();
-  return /*#__PURE__*/React.createElement("ul", _extends({
-    ref: ref,
-    id: id,
-    className: `${prefix}--list-box__menu`,
-    role: "listbox"
-  }, rest), children);
+* 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.
+*/
+/**
+* `ListBoxMenu` is a simple container node that isolates the `list-box__menu`
+* class into a single component. It is also being used to validate given
+* `children` components.
+*/
+const ListBoxMenu = forwardRef(({ children, id, ...rest }, ref) => {
+	return /* @__PURE__ */ jsx("ul", {
+		ref,
+		id,
+		className: `${usePrefix()}--list-box__menu`,
+		role: "listbox",
+		...rest,
+		children
+	});
 });
-ListBoxMenu.displayName = 'ListBoxMenu';
+ListBoxMenu.displayName = "ListBoxMenu";
 ListBoxMenu.propTypes = {
-  /**
-   * Provide the contents of your ListBoxMenu
-   */
-  children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.oneOf([ListBoxMenuItem])),
-  /**
-   * allow single item using the workaround for functional components
-   * https://github.com/facebook/react/issues/2979#issuecomment-222379916
-   */
-  PropTypes.shape({
-    type: PropTypes.oneOf([ListBoxMenuItem])
-  }), PropTypes.bool // used in Dropdown for closed state
-  ]),
-  /**
-   * Specify a custom `id`
-   */
-  id: PropTypes.string.isRequired
+	children: PropTypes.oneOfType([
+		PropTypes.node,
+		PropTypes.arrayOf(PropTypes.oneOf([ListBoxMenuItem])),
+		PropTypes.shape({ type: PropTypes.oneOf([ListBoxMenuItem]) }),
+		PropTypes.bool
+	]),
+	id: PropTypes.string.isRequired
 };
 
-export { ListBoxMenu as default };
+//#endregion
+export { ListBoxMenu as default };

package/es/components/ListBox/ListBoxMenuIcon.js

@@ -1,57 +1,56 @@
 /**
- * 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 { ChevronDown } 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 } from "react/jsx-runtime";
+import { ChevronDown } from "@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();
-  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(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 = usePrefix();
+	const className = classNames(`${prefix}--list-box__menu-icon`, { [`${prefix}--list-box__menu-icon--open`]: isOpen });
+	const description = isOpen ? t("close.menu") : t("open.menu");
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		children: /* @__PURE__ */ jsx(ChevronDown, {
+			name: "chevron--down",
+			"aria-label": description,
+			children: /* @__PURE__ */ 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: PropTypes.bool.isRequired,
+	translateWithId: PropTypes.func
 };
 
-export { ListBoxMenuIcon as default };
+//#endregion
+export { ListBoxMenuIcon as default };