@carbon/react 1.62.0 → 1.63.0-rc.0

package/lib/components/FluidSearch/FluidSearch.js

@@ -0,0 +1,106 @@
+/**
+ * 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.
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
+var PropTypes = require('prop-types');
+var React = require('react');
+var cx = require('classnames');
+var Search = require('../Search/Search.js');
+require('../Search/Search.Skeleton.js');
+var usePrefix = require('../../internal/usePrefix.js');
+var FormContext = require('../FluidForm/FormContext.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
+
+const FluidSearch = /*#__PURE__*/React__default["default"].forwardRef(function FluidSearch(_ref, ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  const classNames = cx__default["default"](`${prefix}--search--fluid`, className);
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(Search["default"], _rollupPluginBabelHelpers["extends"]({
+    ref: ref,
+    className: classNames
+  }, other)));
+});
+FluidSearch.propTypes = {
+  /**
+   * Specify an optional value for the `autocomplete` property on the underlying
+   * `<input>`, defaults to "off"
+   */
+  autoComplete: PropTypes__default["default"].string,
+  /**
+   * Specify an optional className to be applied to the container node
+   */
+  className: PropTypes__default["default"].string,
+  /**
+   * Specify a label to be read by screen readers on the "close" button
+   */
+  closeButtonLabelText: PropTypes__default["default"].string,
+  /**
+   * Optionally provide the default value of the `<input>`
+   */
+  defaultValue: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
+  /**
+   * Specify whether the `<input>` should be disabled
+   */
+  disabled: PropTypes__default["default"].bool,
+  /**
+   * Specify a custom `id` for the input
+   */
+  id: PropTypes__default["default"].string,
+  /**
+   * Provide the label text for the Search icon
+   */
+  labelText: PropTypes__default["default"].node.isRequired,
+  /**
+   * Optional callback called when the search value changes.
+   */
+  onChange: PropTypes__default["default"].func,
+  /**
+   * Optional callback called when the search value is cleared.
+   */
+  onClear: PropTypes__default["default"].func,
+  /**
+   * Provide a handler that is invoked on the key down event for the input
+   */
+  onKeyDown: PropTypes__default["default"].func,
+  /**
+   * Provide an optional placeholder text for the Search.
+   * Note: if the label and placeholder differ,
+   * VoiceOver on Mac will read both
+   */
+  placeholder: PropTypes__default["default"].string,
+  /**
+   * Specify the role for the underlying `<input>`, defaults to `searchbox`
+   */
+  role: PropTypes__default["default"].string,
+  /**
+   * Optional prop to specify the type of the `<input>`
+   */
+  type: PropTypes__default["default"].string,
+  /**
+   * Specify the value of the `<input>`
+   */
+  value: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number])
+};
+var FluidSearch$1 = FluidSearch;
+
+exports["default"] = FluidSearch$1;

package/lib/components/Menu/Menu.js

@@ -143,6 +143,7 @@ const Menu = /*#__PURE__*/React.forwardRef(function Menu(_ref, forwardRef) {
     }
   }
   function focusItem(e) {
+    e?.preventDefault();
     const currentItem = focusableItems.findIndex(item => item.ref?.current?.contains(document.activeElement));
     let indexToFocus = currentItem;
 

package/lib/components/Modal/Modal.js

@@ -24,7 +24,7 @@ var requiredIfGivenPropIsTruthy = require('../../prop-types/requiredIfGivenPropI
 var wrapFocus = require('../../internal/wrapFocus.js');
 var debounce = require('lodash.debounce');
 var useIsomorphicEffect = require('../../internal/useIsomorphicEffect.js');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var index$2 = require('../IconButton/index.js');
 var noopFn = require('../../internal/noopFn.js');
@@ -42,7 +42,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const ModalSizes = ['xs', 'sm', 'md', 'lg'];
 const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_ref, ref) {
   let {
@@ -87,7 +86,7 @@ const Modal = /*#__PURE__*/React__default["default"].forwardRef(function Modal(_
   const startTrap = React.useRef(null);
   const endTrap = React.useRef(null);
   const [isScrollable, setIsScrollable] = React.useState(false);
-  const modalInstanceId = `modal-${getInstanceId()}`;
+  const modalInstanceId = `modal-${useId.useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
   const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;

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/Tabs/Tabs.js

@@ -801,8 +801,10 @@ const Tab = /*#__PURE__*/React.forwardRef(function Tab(_ref8, forwardRef) {
   React.useLayoutEffect(() => {
     function handler() {
       const elementTabId = document.getElementById(`${id}`) || tabRef.current;
-      const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
-      isEllipsisActive(newElement);
+      if (elementTabId?.closest(`.${prefix}--tabs--vertical`)) {
+        const newElement = elementTabId?.getElementsByClassName(`${prefix}--tabs__nav-item-label`)[0];
+        isEllipsisActive(newElement);
+      }
     }
     handler();
     window.addEventListener('resize', handler);

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"];