@carbon/react 1.62.1 → 1.63.0-rc.0

package/lib/components/MultiSelect/FilterableMultiSelect.js

@@ -472,9 +472,13 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
       setInputValue('');
     }
   }));
-  const menuProps = getMenuProps({}, {
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
+  const menuProps = React.useMemo(() => getMenuProps({
+    ref: autoAlign ? refs.setFloating : null
+  }, {
     suppressRefError: true
-  });
+  }), [autoAlign]);
   const handleFocus = evt => {
     if (evt?.target.classList.contains(`${prefix}--tag__close-icon`) || evt?.target.classList.contains(`${prefix}--list-box__selection`)) {
       setIsFocused(false);
@@ -500,6 +504,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     disabled: disabled,
     light: light,
     ref: ref,
+    id: id,
     invalid: invalid,
     invalidText: invalidText,
     warn: warn,
@@ -508,7 +513,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     size: size
   }, /*#__PURE__*/React__default["default"].createElement("div", {
     className: `${prefix}--list-box__field`,
-    ref: refs.setReference
+    ref: autoAlign ? refs.setReference : null
   }, controlledSelectedItems.length > 0 &&
   /*#__PURE__*/
   // @ts-expect-error: It is expecting a non-required prop called: "onClearSelection"
@@ -549,9 +554,7 @@ const FilterableMultiSelect = /*#__PURE__*/React__default["default"].forwardRef(
     // @ts-expect-error
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, menuProps, {
-    ref: refs.setFloating
-  }), isOpen ? sortedItems.map((item, index$1) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? sortedItems.map((item, index$1) => {
     const isChecked = controlledSelectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;
     const itemProps = getItemProps({
       item,

package/lib/components/MultiSelect/MultiSelect.js

@@ -20,7 +20,7 @@ var index = require('../ListBox/index.js');
 var MultiSelectPropTypes = require('./MultiSelectPropTypes.js');
 var sorting = require('./tools/sorting.js');
 var Selection = require('../../internal/Selection.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -39,7 +39,6 @@ var isEqual__default = /*#__PURE__*/_interopDefaultLegacy(isEqual);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const {
   ItemClick,
   ToggleButtonBlur,
@@ -110,9 +109,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
-  const {
-    current: multiSelectInstanceId
-  } = React.useRef(getInstanceId());
+  const multiSelectInstanceId = useId.useId();
   const [isFocused, setIsFocused] = React.useState(false);
   const [inputFocused, setInputFocused] = React.useState(false);
   const [isOpen, setIsOpen] = React.useState(open || false);
@@ -406,6 +403,11 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     });
   }
   const itemsSelectedText = selectedItems.length > 0 && selectedItems.map(item => item?.text);
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
+  const menuProps = React.useMemo(() => getMenuProps({
+    ref: autoAlign ? refs.setFloating : null
+  }), [autoAlign]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
@@ -432,7 +434,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
     className: `${prefix}--list-box__invalid-icon ${prefix}--list-box__invalid-icon--warning`
   }), /*#__PURE__*/React__default["default"].createElement("div", {
     className: multiSelectFieldWrapperClasses,
-    ref: refs.setReference
+    ref: autoAlign ? refs.setReference : null
   }, selectedItems.length > 0 && /*#__PURE__*/React__default["default"].createElement(index["default"].Selection, {
     readOnly: readOnly,
     clearSelection: !disabled && !readOnly ? clearSelection : noopFn.noopFn,
@@ -455,9 +457,7 @@ const MultiSelect = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref
   }, label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, getMenuProps({
-    ref: refs.setFloating
-  }), isOpen &&
+  })), normalizedSlug), /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen &&
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   sortItems(filteredItems, sortOptions).map((item, index$1) => {
     const isChecked = selectedItems.filter(selected => isEqual__default["default"](selected, item)).length > 0;

package/lib/components/Pagination/experimental/PageSelector.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../../_virtual/_rollupPluginBabelHel
 var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
-var setupGetInstanceId = require('../../../tools/setupGetInstanceId.js');
+var useId = require('../../../internal/useId.js');
 var Select = require('../../Select/Select.js');
 require('../../Select/Select.Skeleton.js');
 var SelectItem = require('../../SelectItem/SelectItem.js');
@@ -25,7 +25,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 function PageSelector(_ref) {
   let {
     className = null,
@@ -37,7 +36,7 @@ function PageSelector(_ref) {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const namespace = `${prefix}--unstable-pagination__page-selector`;
-  const instanceId = `${namespace}__select-${getInstanceId()}`;
+  const instanceId = `${namespace}__select-${useId.useId()}`;
   const renderPages = total => {
     const pages = [];
     for (let counter = 1; counter <= total; counter += 1) {

package/lib/components/RadioButtonGroup/RadioButtonGroup.js

@@ -17,7 +17,7 @@ var index = require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
 var mergeRefs = require('../../tools/mergeRefs.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -25,7 +25,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((props, ref) => {
   const {
     children,
@@ -51,9 +50,7 @@ const RadioButtonGroup = /*#__PURE__*/React__default["default"].forwardRef((prop
   const prefix = usePrefix.usePrefix();
   const [selected, setSelected] = React.useState(valueSelected ?? defaultSelected);
   const [prevValueSelected, setPrevValueSelected] = React.useState(valueSelected);
-  const {
-    current: radioButtonGroupInstanceId
-  } = React.useRef(getInstanceId());
+  const radioButtonGroupInstanceId = useId.useId();
 
   /**
    * prop + state alignment - getDerivedStateFromProps

package/lib/components/Select/Select.js

@@ -18,7 +18,7 @@ var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var events = require('../../tools/events.js');
 require('../Text/index.js');
 var Text = require('../Text/Text.js');
@@ -29,7 +29,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select(_ref, ref) {
   let {
     className,
@@ -60,9 +59,7 @@ const Select = /*#__PURE__*/React__default["default"].forwardRef(function Select
   } = React.useContext(FormContext.FormContext);
   const [isFocused, setIsFocused] = React.useState(false);
   const [title, setTitle] = React.useState('');
-  const {
-    current: selectInstanceId
-  } = React.useRef(getInstanceId());
+  const selectInstanceId = useId.useId();
   const selectClasses = cx__default["default"]({
     [`${prefix}--select`]: true,
     [`${prefix}--select--inline`]: inline,

package/lib/components/Tag/DismissibleTag.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var Tag = require('./Tag.js');
 var iconsReact = require('@carbon/icons-react');
@@ -30,7 +30,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close;
-const getInstanceId = setupGetInstanceId["default"]();
 const DismissibleTag = _ref => {
   let {
     className,
@@ -47,7 +46,7 @@ const DismissibleTag = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const tagLabelRef = React.useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId.useId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--filter`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   React.useLayoutEffect(() => {

package/lib/components/Tag/OperationalTag.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var Tag = require('./Tag.js');
 require('../Tooltip/DefinitionTooltip.js');
@@ -28,7 +28,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
@@ -55,7 +54,7 @@ const OperationalTag = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const tagRef = React.useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId.useId()}`;
   const tagClasses = cx__default["default"](`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   React.useLayoutEffect(() => {

package/lib/components/Tag/SelectableTag.js

@@ -13,7 +13,7 @@ var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelper
 var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var Tag = require('./Tag.js');
 require('../Tooltip/DefinitionTooltip.js');
@@ -28,7 +28,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const SelectableTag = _ref => {
   let {
     className,
@@ -43,7 +42,7 @@ const SelectableTag = _ref => {
   } = _ref;
   const prefix = usePrefix.usePrefix();
   const tagRef = React.useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId.useId()}`;
   const [selectedTag, setSelectedTag] = React.useState(selected);
   const tagClasses = cx__default["default"](`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag

package/lib/components/Tag/Tag.js

@@ -14,7 +14,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 require('../Text/index.js');
 var deprecate = require('../../prop-types/deprecate.js');
@@ -31,7 +31,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
 var _Close;
-const getInstanceId = setupGetInstanceId["default"]();
 const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
@@ -73,7 +72,7 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
   const prefix = usePrefix.usePrefix();
   const tagRef = React.useRef();
   const ref = react.useMergeRefs([forwardRef, tagRef]);
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId.useId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = React.useState(false);
   React.useLayoutEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
@@ -127,8 +126,7 @@ const Tag = /*#__PURE__*/React__default["default"].forwardRef(function Tag(_ref,
   }
   const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
   const labelClasses = cx__default["default"]({
-    [`${prefix}--tag__label`]: !isInteractiveTag,
-    [`${prefix}--tag--${type}`]: type && !isInteractiveTag
+    [`${prefix}--tag__label`]: !isInteractiveTag
   });
   return /*#__PURE__*/React__default["default"].createElement(ComponentTag, _rollupPluginBabelHelpers["extends"]({
     ref: ref,

package/lib/components/TextArea/TextArea.js

@@ -21,7 +21,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var useAnnouncer = require('../../internal/useAnnouncer.js');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
 var useMergedRefs = require('../../internal/useMergedRefs.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
 require('../Text/index.js');
 var Text = require('../Text/Text.js');
@@ -32,7 +32,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwardRef) => {
   const {
     className,
@@ -65,9 +64,7 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     defaultValue,
     value
   } = other;
-  const {
-    current: textAreaInstanceId
-  } = React.useRef(getInstanceId());
+  const textAreaInstanceId = useId.useId();
   const textareaRef = React.useRef(null);
   const ref = useMergedRefs.useMergedRefs([forwardRef, textareaRef]);
   function getInitialTextCount() {
@@ -227,7 +224,33 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
       textareaProps.maxLength = maxCount;
     }
   }
+  const announcerRef = React.useRef(null);
+  const [prevAnnouncement, setPrevAnnouncement] = React.useState('');
   const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount, counterMode === 'word' ? 'words' : undefined);
+  React.useEffect(() => {
+    if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
+      const announcer = announcerRef.current;
+      if (announcer) {
+        // Clear the content first
+        announcer.textContent = '';
+
+        // Set the new content after a small delay
+        const timeoutId = setTimeout(() => {
+          if (announcer) {
+            announcer.textContent = ariaAnnouncement;
+            setPrevAnnouncement(ariaAnnouncement);
+          }
+        }, counterMode === 'word' ? 2000 : 1000);
+
+        //clear the timeout
+        return () => {
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+        };
+      }
+    }
+  }, [ariaAnnouncement, prevAnnouncement, counterMode]);
   const input = /*#__PURE__*/React__default["default"].createElement("textarea", _rollupPluginBabelHelpers["extends"]({}, other, textareaProps, {
     placeholder: placeholder,
     "aria-readonly": other.readOnly ? true : false,
@@ -260,7 +283,10 @@ const TextArea = /*#__PURE__*/React__default["default"].forwardRef((props, forwa
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   }), input, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-area__counter-alert`,
-    role: "alert"
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    ref: announcerRef
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: `${prefix}--text-area__divider`
   }), isFluid && invalid ? error : null, isFluid && warn && !invalid ? warning : null), !invalid && !warn && !isFluid ? helper : null, invalid && !isFluid ? error : null, warn && !invalid && !isFluid ? warning : null);

package/lib/components/TextInput/ControlledPasswordInput.js

@@ -18,7 +18,7 @@ var util = require('./util.js');
 var warning = require('../../internal/warning.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -27,7 +27,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const getInstanceId = setupGetInstanceId["default"]();
 let didWarnAboutDeprecation = false;
 const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRef(function ControlledPasswordInput(_ref, ref) {
   let {
@@ -55,9 +54,7 @@ const ControlledPasswordInput = /*#__PURE__*/React__default["default"].forwardRe
     ...other
   } = _ref;
   const prefix = usePrefix.usePrefix();
-  const {
-    current: controlledPasswordInstanceId
-  } = React.useRef(getInstanceId());
+  const controlledPasswordInstanceId = useId.useId();
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? warning.warning(didWarnAboutDeprecation, '`<TextInput.ControlledPasswordInput>` has been deprecated in favor of `<TextInput.PasswordInput />` and will be removed in the next major release of `carbon-components-react`') : void 0;
     didWarnAboutDeprecation = true;

package/lib/components/TextInput/TextInput.js

@@ -162,7 +162,31 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
+  const announcerRef = React.useRef(null);
+  const [prevAnnouncement, setPrevAnnouncement] = React.useState('');
   const ariaAnnouncement = useAnnouncer.useAnnouncer(textCount, maxCount);
+  React.useEffect(() => {
+    if (ariaAnnouncement && ariaAnnouncement !== prevAnnouncement) {
+      const announcer = announcerRef.current;
+      if (announcer) {
+        // Clear the content first
+        announcer.textContent = '';
+        // Set the new content after a small delay
+        const timeoutId = setTimeout(() => {
+          if (announcer) {
+            announcer.textContent = ariaAnnouncement;
+            setPrevAnnouncement(ariaAnnouncement);
+          }
+        }, 1000);
+        // clear the timeout
+        return () => {
+          if (timeoutId) {
+            clearTimeout(timeoutId);
+          }
+        };
+      }
+    }
+  }, [ariaAnnouncement, prevAnnouncement]);
   const Icon = normalizedProps.icon;
 
   // Slug is always size `mini`
@@ -185,7 +209,10 @@ const TextInput = /*#__PURE__*/React__default["default"].forwardRef(function Tex
     className: iconClasses
   }), input, normalizedSlug, /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--text-input__counter-alert`,
-    role: "alert"
+    role: "alert",
+    "aria-live": "assertive",
+    "aria-atomic": "true",
+    ref: announcerRef
   }, ariaAnnouncement), isFluid && /*#__PURE__*/React__default["default"].createElement("hr", {
     className: `${prefix}--text-input__divider`
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));

package/lib/index.d.ts

@@ -102,6 +102,7 @@ export { FluidDatePickerInput as unstable__FluidDatePickerInput } from './compon
 export { FluidDropdown as unstable__FluidDropdown, FluidDropdownSkeleton as unstable__FluidDropdownSkeleton, } from './components/FluidDropdown';
 export { FluidMultiSelect as unstable__FluidMultiSelect, FluidMultiSelectSkeleton as unstable__FluidMultiSelectSkeleton, } from './components/FluidMultiSelect';
 export { FluidSelect as unstable__FluidSelect, FluidSelectSkeleton as unstable__FluidSelectSkeleton, } from './components/FluidSelect';
+export { FluidSearch as unstable__FluidSearch, FluidSearchSkeleton as unstable__FluidSearchSkeleton, } from './components/FluidSearch';
 export { FluidTextArea as unstable__FluidTextArea, FluidTextAreaSkeleton as unstable__FluidTextAreaSkeleton, } from './components/FluidTextArea';
 export { FluidTextInput as unstable__FluidTextInput, FluidTextInputSkeleton as unstable__FluidTextInputSkeleton, } from './components/FluidTextInput';
 export { FluidTimePicker as unstable__FluidTimePicker, FluidTimePickerSkeleton as unstable__FluidTimePickerSkeleton, } from './components/FluidTimePicker';

package/lib/index.js

@@ -179,6 +179,7 @@ var index$g = require('./components/Theme/index.js');
 var usePrefix = require('./internal/usePrefix.js');
 var useIdPrefix = require('./internal/useIdPrefix.js');
 var FluidDatePicker_Skeleton = require('./components/FluidDatePicker/FluidDatePicker.Skeleton.js');
+var FluidSearch_Skeleton = require('./components/FluidSearch/FluidSearch.Skeleton.js');
 var FluidTextArea = require('./components/FluidTextArea/FluidTextArea.js');
 var FluidTextArea_Skeleton = require('./components/FluidTextArea/FluidTextArea.Skeleton.js');
 var FluidTextInput = require('./components/FluidTextInput/FluidTextInput.js');
@@ -202,6 +203,7 @@ var FluidMultiSelect = require('./components/FluidMultiSelect/FluidMultiSelect.j
 var FluidMultiSelect_Skeleton = require('./components/FluidMultiSelect/FluidMultiSelect.Skeleton.js');
 var FluidSelect = require('./components/FluidSelect/FluidSelect.js');
 var FluidSelect_Skeleton = require('./components/FluidSelect/FluidSelect.Skeleton.js');
+var FluidSearch = require('./components/FluidSearch/FluidSearch.js');
 var FluidTimePicker = require('./components/FluidTimePicker/FluidTimePicker.js');
 var FluidTimePicker_Skeleton = require('./components/FluidTimePicker/FluidTimePicker.Skeleton.js');
 var FluidTimePickerSelect = require('./components/FluidTimePickerSelect/FluidTimePickerSelect.js');
@@ -453,6 +455,7 @@ exports.PrefixContext = usePrefix.PrefixContext;
 exports.usePrefix = usePrefix.usePrefix;
 exports.useIdPrefix = useIdPrefix.useIdPrefix;
 exports.unstable__FluidDatePickerSkeleton = FluidDatePicker_Skeleton["default"];
+exports.unstable__FluidSearchSkeleton = FluidSearch_Skeleton["default"];
 exports.unstable__FluidTextArea = FluidTextArea["default"];
 exports.unstable__FluidTextAreaSkeleton = FluidTextArea_Skeleton["default"];
 exports.unstable__FluidTextInput = FluidTextInput["default"];
@@ -476,6 +479,7 @@ exports.unstable__FluidMultiSelect = FluidMultiSelect["default"];
 exports.unstable__FluidMultiSelectSkeleton = FluidMultiSelect_Skeleton["default"];
 exports.unstable__FluidSelect = FluidSelect["default"];
 exports.unstable__FluidSelectSkeleton = FluidSelect_Skeleton["default"];
+exports.unstable__FluidSearch = FluidSearch["default"];
 exports.unstable__FluidTimePicker = FluidTimePicker["default"];
 exports.unstable__FluidTimePickerSkeleton = FluidTimePicker_Skeleton["default"];
 exports.unstable__FluidTimePickerSelect = FluidTimePickerSelect["default"];

package/lib/internal/useAnnouncer.js

@@ -11,10 +11,15 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 function useAnnouncer(textCount, maxCount) {
   let entityName = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : 'characters';
-  const lastTen = maxCount - 10;
-  if (textCount >= lastTen) {
-    return `${maxCount - textCount} ${entityName} left.`;
+  const remaining = maxCount - textCount;
+  if (remaining <= 10 && remaining > 0) {
+    const entity = remaining === 1 ? entityName.slice(0, -1) : entityName;
+    return `${remaining} ${entity} left.`;
   }
+  if (remaining <= 0) {
+    return `Maximum ${entityName} reached.`;
+  }
+  return null;
 }
 
 exports.useAnnouncer = useAnnouncer;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/react",
   "description": "React components for the Carbon Design System",
-  "version": "1.62.1",
+  "version": "1.63.0-rc.0",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,11 +47,11 @@
     "sass": "^1.33.0"
   },
   "dependencies": {
-    "@babel/runtime": "^7.18.3",
-    "@carbon/feature-flags": "^0.20.0",
-    "@carbon/icons-react": "^11.45.0",
-    "@carbon/layout": "^11.23.0",
-    "@carbon/styles": "^1.61.0",
+    "@babel/runtime": "^7.24.7",
+    "@carbon/feature-flags": "^0.21.0-rc.0",
+    "@carbon/icons-react": "^11.46.0-rc.0",
+    "@carbon/layout": "^11.24.0-rc.0",
+    "@carbon/styles": "^1.62.0-rc.0",
     "@floating-ui/react": "^0.26.0",
     "@ibm/telemetry-js": "^1.5.0",
     "classnames": "2.5.1",
@@ -65,22 +65,23 @@
     "lodash.omit": "^4.5.0",
     "lodash.throttle": "^4.1.1",
     "prop-types": "^15.7.2",
+    "react-fast-compare": "^3.2.2",
     "react-is": "^18.2.0",
     "tabbable": "^6.2.0",
     "use-resize-observer": "^6.0.0",
     "window-or-global": "^1.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.2",
-    "@babel/plugin-proposal-class-properties": "^7.17.12",
-    "@babel/plugin-proposal-export-default-from": "^7.17.12",
-    "@babel/plugin-proposal-export-namespace-from": "^7.17.12",
-    "@babel/plugin-transform-react-constant-elements": "^7.17.12",
-    "@babel/preset-env": "^7.22.4",
-    "@babel/preset-react": "^7.22.3",
-    "@babel/preset-typescript": "^7.21.5",
+    "@babel/core": "^7.24.7",
+    "@babel/plugin-proposal-class-properties": "^7.18.6",
+    "@babel/plugin-proposal-export-default-from": "^7.24.7",
+    "@babel/plugin-proposal-export-namespace-from": "^7.18.9",
+    "@babel/plugin-transform-react-constant-elements": "^7.24.7",
+    "@babel/preset-env": "^7.24.7",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/preset-typescript": "^7.24.7",
     "@carbon/test-utils": "^10.30.0",
-    "@carbon/themes": "^11.37.0",
+    "@carbon/themes": "^11.38.0-rc.0",
     "@figma/code-connect": "^1.0.2",
     "@rollup/plugin-babel": "^6.0.0",
     "@rollup/plugin-commonjs": "^26.0.0",
@@ -99,7 +100,7 @@
     "autoprefixer": "^10.4.0",
     "babel-loader": "^9.0.0",
     "babel-plugin-dev-expression": "^0.2.3",
-    "babel-preset-carbon": "^0.5.0",
+    "babel-preset-carbon": "^0.6.0-rc.0",
     "browserify-zlib": "^0.2.0",
     "browserslist-config-carbon": "^11.2.0",
     "clipboardy": "^2.1.0",
@@ -141,5 +142,5 @@
     "**/*.scss",
     "**/*.css"
   ],
-  "gitHead": "14d9d64e3d9dfc98c8c36841952ff0faec627d03"
+  "gitHead": "326ac312c2b669937ede1c0c68c0e3a6d9c34135"
 }