@carbon/react 1.103.0 → 1.104.0

package/es/components/FluidDropdown/FluidDropdown.js

@@ -1,122 +1,66 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-import Dropdown from '../Dropdown/Dropdown.js';
-import '../Dropdown/Dropdown.Skeleton.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { FormContext } from '../FluidForm/FormContext.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { FormContext } from "../FluidForm/FormContext.js";
+import Dropdown_default from "../Dropdown/index.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const FluidDropdown = /*#__PURE__*/React.forwardRef(function FluidDropdown({
-  className,
-  isCondensed,
-  ...other
-}, ref) {
-  const prefix = usePrefix();
-  const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, {
-    [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed
-  });
-  return /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: {
-      isFluid: true
-    }
-  }, /*#__PURE__*/React.createElement(Dropdown, _extends({
-    ref: ref,
-    className: classNames
-  }, other)));
+//#region src/components/FluidDropdown/FluidDropdown.tsx
+/**
+* Copyright IBM Corp. 2022, 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 FluidDropdown = React.forwardRef(function FluidDropdown({ className, isCondensed, ...other }, ref) {
+	const prefix = usePrefix();
+	const classNames$1 = classNames(`${prefix}--list-box__wrapper--fluid`, className, { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed });
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: { isFluid: true },
+		children: /* @__PURE__ */ jsx(Dropdown_default, {
+			ref,
+			className: classNames$1,
+			...other
+		})
+	});
 });
 FluidDropdown.propTypes = {
-  /**
-   * Specify an optional className to be applied to the outer FluidForm wrapper
-   */
-  className: PropTypes.string,
-  /**
-   * Specify the direction of the dropdown. Can be either top or bottom.
-   */
-  direction: PropTypes.oneOf(['top', 'bottom']),
-  /**
-   * Specify whether the `<input>` should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Specify a custom `id` for the `<input>`
-   */
-  id: PropTypes.string.isRequired,
-  /**
-   * Allow users to pass in an arbitrary item or a string (in case their items are an array of strings)
-   * from their collection that are pre-selected
-   */
-  initialSelectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
-  /**
-   * Specify if the currently selected value is invalid.
-   */
-  invalid: PropTypes.bool,
-  /**
-   * Provide the text that is displayed when the control is in an invalid state
-   */
-  invalidText: PropTypes.node,
-  /**
-   * Specify if the `FluidDropdown` should render its menu items in condensed mode
-   */
-  isCondensed: PropTypes.bool,
-  /**
-   * Renders an item as a custom React node instead of a string.
-   */
-  itemToElement: PropTypes.func,
-  /**
-   * Helper function passed to downshift that allows the library to render a
-   * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list.
-   */
-  itemToString: PropTypes.func,
-  /**
-   * We try to stay as generic as possible here to allow individuals to pass
-   * in a collection of whatever kind of data structure they prefer
-   */
-  items: PropTypes.array.isRequired,
-  /**
-   * Generic `label` that will be used as the textual representation of what
-   * this field is for
-   */
-  label: PropTypes.node.isRequired,
-  /**
-   * `onChange` is a utility for this controlled component to communicate to a
-   * consuming component what kind of internal state changes are occurring.
-   */
-  onChange: PropTypes.func,
-  /**
-   * An optional callback to render the currently selected item as a react element instead of only
-   * as a string.
-   */
-  renderSelectedItem: PropTypes.func,
-  /**
-   * In the case you want to control the dropdown selection entirely.
-   */
-  selectedItem: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.number]),
-  /**
-   * Provide the title text that will be read by a screen reader when
-   * visiting this control
-   */
-  titleText: PropTypes.node,
-  /**
-   * Translates component strings using your i18n tool.
-   */
-  translateWithId: PropTypes.func,
-  /**
-   * 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.node
+	className: PropTypes.string,
+	direction: PropTypes.oneOf(["top", "bottom"]),
+	disabled: PropTypes.bool,
+	id: PropTypes.string.isRequired,
+	initialSelectedItem: PropTypes.oneOfType([
+		PropTypes.object,
+		PropTypes.string,
+		PropTypes.number
+	]),
+	invalid: PropTypes.bool,
+	invalidText: PropTypes.node,
+	isCondensed: PropTypes.bool,
+	itemToElement: PropTypes.func,
+	itemToString: PropTypes.func,
+	items: PropTypes.array.isRequired,
+	label: PropTypes.node.isRequired,
+	onChange: PropTypes.func,
+	renderSelectedItem: PropTypes.func,
+	selectedItem: PropTypes.oneOfType([
+		PropTypes.object,
+		PropTypes.string,
+		PropTypes.number
+	]),
+	titleText: PropTypes.node,
+	translateWithId: PropTypes.func,
+	warn: PropTypes.bool,
+	warnText: PropTypes.node
 };
 
-export { FluidDropdown as default };
+//#endregion
+export { FluidDropdown as default };

package/es/components/FluidForm/FluidForm.js

@@ -1,42 +1,40 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-import Form from '../Form/Form.js';
-import { FormContext } from './FormContext.js';
-import { usePrefix } from '../../internal/usePrefix.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import Form from "../Form/Form.js";
+import { FormContext } from "./FormContext.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const FluidForm = ({
-  className,
-  children,
-  ...other
-}) => {
-  const prefix = usePrefix();
-  const classNames = cx(`${prefix}--form--fluid`, className);
-  return /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: {
-      isFluid: true
-    }
-  }, /*#__PURE__*/React.createElement(Form, _extends({
-    className: classNames
-  }, other), children));
+//#region src/components/FluidForm/FluidForm.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 FluidForm = ({ className, children, ...other }) => {
+	const classNames$1 = classNames(`${usePrefix()}--form--fluid`, className);
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: { isFluid: true },
+		children: /* @__PURE__ */ jsx(Form, {
+			className: classNames$1,
+			...other,
+			children
+		})
+	});
 };
 FluidForm.propTypes = {
-  /**
-   * Provide children to be rendered inside of the <form> element
-   */
-  children: PropTypes.node,
-  /**
-   * Provide a custom className to be applied on the containing <form> node
-   */
-  className: PropTypes.string
+	children: PropTypes.node,
+	className: PropTypes.string
 };
 
-export { FluidForm as default };
+//#endregion
+export { FluidForm as default };

package/es/components/FluidForm/FormContext.js

@@ -1,14 +1,20 @@
 /**
- * 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 { createContext } from 'react';
+import { createContext } from "react";
 
-const FormContext = /*#__PURE__*/createContext({
-  isFluid: false
-});
+//#region src/components/FluidForm/FormContext.ts
+/**
+* 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 FormContext = createContext({ isFluid: false });
 
-export { FormContext };
+//#endregion
+export { FormContext };

package/es/components/FluidMultiSelect/FluidMultiSelect.Skeleton.js

@@ -1,37 +1,35 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-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";
 
-const FluidMultiSelectSkeleton = ({
-  className,
-  ...rest
-}) => {
-  const prefix = usePrefix();
-  const wrapperClasses = cx(className, `${prefix}--list-box__wrapper--fluid`);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: wrapperClasses
-  }, rest), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--skeleton ${prefix}--list-box`
-  }, /*#__PURE__*/React.createElement("span", {
-    className: `${prefix}--list-box__label`
-  }), /*#__PURE__*/React.createElement("div", {
-    className: `${prefix}--list-box__field`
-  })));
-};
-FluidMultiSelectSkeleton.propTypes = {
-  /**
-   * Specify an optional className to add.
-   */
-  className: PropTypes.string
+//#region src/components/FluidMultiSelect/FluidMultiSelect.Skeleton.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 FluidMultiSelectSkeleton = ({ className, ...rest }) => {
+	const prefix = usePrefix();
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames(className, `${prefix}--list-box__wrapper--fluid`),
+		...rest,
+		children: /* @__PURE__ */ jsxs("div", {
+			className: `${prefix}--skeleton ${prefix}--list-box`,
+			children: [/* @__PURE__ */ jsx("span", { className: `${prefix}--list-box__label` }), /* @__PURE__ */ jsx("div", { className: `${prefix}--list-box__field` })]
+		})
+	});
 };
+FluidMultiSelectSkeleton.propTypes = { className: PropTypes.string };
 
-export { FluidMultiSelectSkeleton as default };
+//#endregion
+export { FluidMultiSelectSkeleton as default };

package/es/components/FluidMultiSelect/FluidMultiSelect.js

@@ -1,208 +1,78 @@
 /**
- * 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 PropTypes from 'prop-types';
-import React from 'react';
-import cx from 'classnames';
-import { FilterableMultiSelect } from '../MultiSelect/FilterableMultiSelect.js';
-import { MultiSelect } from '../MultiSelect/MultiSelect.js';
-import { usePrefix } from '../../internal/usePrefix.js';
-import { FormContext } from '../FluidForm/FormContext.js';
+import { usePrefix } from "../../internal/usePrefix.js";
+import { FormContext } from "../FluidForm/FormContext.js";
+import { FilterableMultiSelect } from "../MultiSelect/FilterableMultiSelect.js";
+import { MultiSelect } from "../MultiSelect/MultiSelect.js";
+import classNames from "classnames";
+import React from "react";
+import PropTypes from "prop-types";
+import { jsx } from "react/jsx-runtime";
 
-const FluidMultiSelect = /*#__PURE__*/React.forwardRef(function FluidMultiSelect({
-  className,
-  isCondensed,
-  isFilterable,
-  ...other
-}, ref) {
-  const prefix = usePrefix();
-  const classNames = cx(`${prefix}--list-box__wrapper--fluid`, className, {
-    [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed
-  });
-  return /*#__PURE__*/React.createElement(FormContext.Provider, {
-    value: {
-      isFluid: true
-    }
-  }, isFilterable ?
-  /*#__PURE__*/
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-  // @ts-ignore
-  React.createElement(FilterableMultiSelect, _extends({
-    ref: ref,
-    className: classNames
-  }, other)) :
-  /*#__PURE__*/
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment -- https://github.com/carbon-design-system/carbon/issues/20452
-  // @ts-ignore
-  React.createElement(MultiSelect, _extends({
-    ref: ref,
-    className: classNames
-  }, other)));
+//#region src/components/FluidMultiSelect/FluidMultiSelect.tsx
+/**
+* Copyright IBM Corp. 2022, 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 FluidMultiSelect = React.forwardRef(function FluidMultiSelect({ className, isCondensed, isFilterable, ...other }, ref) {
+	const prefix = usePrefix();
+	const classNames$1 = classNames(`${prefix}--list-box__wrapper--fluid`, className, { [`${prefix}--list-box__wrapper--fluid--condensed`]: isCondensed });
+	return /* @__PURE__ */ jsx(FormContext.Provider, {
+		value: { isFluid: true },
+		children: isFilterable ? /* @__PURE__ */ jsx(FilterableMultiSelect, {
+			ref,
+			className: classNames$1,
+			...other
+		}) : /* @__PURE__ */ jsx(MultiSelect, {
+			ref,
+			className: classNames$1,
+			...other
+		})
+	});
 });
 FluidMultiSelect.propTypes = {
-  /**
-   * Specify an optional className to be applied to the outer FluidForm wrapper
-   */
-  className: PropTypes.string,
-  /**
-   * Specify the text that should be read for screen readers that describes total items selected
-   */
-  clearSelectionDescription: PropTypes.string,
-  /**
-   * Specify the text that should be read for screen readers to clear selection.
-   */
-  clearSelectionText: PropTypes.string,
-  /**
-   * Provide a compare function that is used to determine the ordering of
-   * options. See 'sortItems' for more control. Consider declaring function
-   * with `useCallback` to prevent unnecessary re-renders.
-   */
-  compareItems: PropTypes.func,
-  /**
-   * Specify the direction of the multiselect dropdown. Can be either top or bottom.
-   */
-  direction: PropTypes.oneOf(['top', 'bottom']),
-  /**
-   * Specify whether the `<input>` should be disabled
-   */
-  disabled: PropTypes.bool,
-  /**
-   * Additional props passed to Downshift.
-   *
-   * **Use with caution:** anything you define here overrides the components'
-   * internal handling of that prop. Downshift APIs and internals are subject to
-   * change, and in some cases they can not be shimmed by Carbon to shield you
-   * from potentially breaking changes.
-   */
-  downshiftProps: PropTypes.object,
-  /**
-   * Specify a custom `id` for the `<input>`
-   */
-  id: PropTypes.string.isRequired,
-  /**
-   * Allow users to pass in arbitrary items from their collection that are
-   * pre-selected
-   */
-  initialSelectedItems: PropTypes.array,
-  /**
-   * Specify if the currently selected value is invalid.
-   */
-  invalid: PropTypes.bool,
-  /**
-   * Provide the text that is displayed when the control is in an invalid state
-   */
-  invalidText: PropTypes.node,
-  /**
-   * Specify if the `FluidMultiSelect` should render its menu items in condensed mode
-   */
-  isCondensed: PropTypes.bool,
-  /**
-   * Specify if the `FluidMultiSelect` should render the `filterable` variant of `FluidMultiSelect`
-   */
-  isFilterable: PropTypes.bool,
-  /**
-   * Renders an item as a custom React node instead of a string.
-   */
-  itemToElement: PropTypes.func,
-  /**
-   * Helper function passed to downshift that allows the library to render a
-   * given item to a string label. By default, it extracts the `label` field
-   * from a given item to serve as the item label in the list. Consider
-   * declaring function with `useCallback` to prevent unnecessary re-renders.
-   */
-  itemToString: PropTypes.func,
-  /**
-   * We try to stay as generic as possible here to allow individuals to pass
-   * in a collection of whatever kind of data structure they prefer
-   */
-  items: PropTypes.array.isRequired,
-  /**
-   * Generic `label` that will be used as the textual representation of what
-   * this field is for
-   */
-  label: PropTypes.node.isRequired,
-  /**
-   * Specify the locale of the control. Used for the default `compareItems`
-   * used for sorting the list of items in the control.
-   */
-  locale: PropTypes.string,
-  /**
-   * `onChange` is a utility for this controlled component to communicate to a
-   * consuming component what kind of internal state changes are occurring.
-   */
-  onChange: PropTypes.func,
-  /**
-   * **Filterable variant only** - `onInputValueChange` is a utility for this controlled component to communicate to
-   * the currently typed input.
-   */
-  onInputValueChange: PropTypes.func,
-  /**
-   * `onMenuChange` is a utility for this controlled component to communicate to a
-   * consuming component that the menu was open(`true`)/closed(`false`).
-   */
-  onMenuChange: PropTypes.func,
-  /**
-   * Whether or not the Multiselect is readonly
-   */
-  readOnly: PropTypes.bool,
-  /**
-   * For full control of the selected items
-   */
-  selectedItems: PropTypes.array,
-  /**
-   * Specify feedback (mode) of the selection.
-   * `top`: selected item jumps to top
-   * `fixed`: selected item stays at it's position
-   * `top-after-reopen`: selected item jump to top after reopen dropdown
-   */
-  selectionFeedback: PropTypes.oneOf(['top', 'fixed', 'top-after-reopen']),
-  /**
-   * Provide a method that sorts all options in the control. Overriding this
-   * prop means that you also have to handle the sort logic for selected versus
-   * un-selected items. If you just want to control ordering, consider the
-   * `compareItems` prop instead.
-   *
-   * The return value should be a number whose sign indicates the relative order
-   * of the two elements: negative if a is less than b, positive if a is greater
-   * than b, and zero if they are equal.
-   *
-   * sortItems :
-   *   (items: Array<Item>, {
-   *     selectedItems: Array<Item>,
-   *     itemToString: Item => string,
-   *     compareItems: (itemA: string, itemB: string, {
-   *       locale: string
-   *     }) => number,
-   *     locale: string,
-   *   }) => Array<Item>
-   */
-  sortItems: PropTypes.func,
-  /**
-   * Provide the title text that will be read by a screen reader when
-   * visiting this control
-   */
-  titleText: PropTypes.node,
-  /**
-   * Translates component strings using your i18n tool.
-   */
-  translateWithId: PropTypes.func,
-  /**
-   * Specify title to show title on hover
-   */
-  useTitleInItem: PropTypes.bool,
-  /**
-   * 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.node
+	className: PropTypes.string,
+	clearSelectionDescription: PropTypes.string,
+	clearSelectionText: PropTypes.string,
+	compareItems: PropTypes.func,
+	direction: PropTypes.oneOf(["top", "bottom"]),
+	disabled: PropTypes.bool,
+	downshiftProps: PropTypes.object,
+	id: PropTypes.string.isRequired,
+	initialSelectedItems: PropTypes.array,
+	invalid: PropTypes.bool,
+	invalidText: PropTypes.node,
+	isCondensed: PropTypes.bool,
+	isFilterable: PropTypes.bool,
+	itemToElement: PropTypes.func,
+	itemToString: PropTypes.func,
+	items: PropTypes.array.isRequired,
+	label: PropTypes.node.isRequired,
+	locale: PropTypes.string,
+	onChange: PropTypes.func,
+	onInputValueChange: PropTypes.func,
+	onMenuChange: PropTypes.func,
+	readOnly: PropTypes.bool,
+	selectedItems: PropTypes.array,
+	selectionFeedback: PropTypes.oneOf([
+		"top",
+		"fixed",
+		"top-after-reopen"
+	]),
+	sortItems: PropTypes.func,
+	titleText: PropTypes.node,
+	translateWithId: PropTypes.func,
+	useTitleInItem: PropTypes.bool,
+	warn: PropTypes.bool,
+	warnText: PropTypes.node
 };
 
-export { FluidMultiSelect as default };
+//#endregion
+export { FluidMultiSelect as default };