@carbon/react 1.62.1 → 1.63.0

package/lib/components/NumberInput/NumberInput.d.ts

@@ -5,12 +5,17 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React, { ReactNode } from 'react';
+import { TranslateWithId } from '../../types/common';
 export declare const translationIds: {
-    'increment.number': string;
-    'decrement.number': string;
+    readonly 'increment.number': "increment.number";
+    readonly 'decrement.number': "decrement.number";
 };
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
 type ExcludedAttributes = 'defaultValue' | 'id' | 'min' | 'max' | 'onChange' | 'onClick' | 'size' | 'step' | 'value';
-export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey> {
     /**
      * `true` to allow empty string.
      */
@@ -115,10 +120,6 @@ export interface NumberInputProps extends Omit<React.InputHTMLAttributes<HTMLInp
      * Specify how much the values should increase/decrease upon clicking on up/down button
      */
     step?: number;
-    /**
-     * Provide custom text for the component for each translation id
-     */
-    translateWithId?: (id: string) => string;
     /**
      * Specify the value of the input
      */

package/lib/components/NumberInput/NumberInput.js

@@ -34,6 +34,11 @@ const translationIds = {
   'increment.number': 'increment.number',
   'decrement.number': 'decrement.number'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 const defaultTranslations = {
   [translationIds['increment.number']]: 'Increment number',
   [translationIds['decrement.number']]: 'Decrement number'

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/PaginationNav/PaginationNav.d.ts

@@ -5,7 +5,19 @@
  * LICENSE file in the root directory of this source tree.
  */
 import React from 'react';
-interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'> {
+import { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly 'carbon.pagination-nav.next': "Next";
+    readonly 'carbon.pagination-nav.previous': "Previous";
+    readonly 'carbon.pagination-nav.item': "Page";
+    readonly 'carbon.pagination-nav.active': "Active";
+    readonly 'carbon.pagination-nav.of': "of";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof translationIds;
+interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
     /**
      * Additional CSS class names.
      */
@@ -35,11 +47,6 @@ interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'on
      * The total number of items.
      */
     totalItems?: number;
-    /**
-     * Specify a custom translation function that takes in a message identifier
-     * and returns the localized string for the message
-     */
-    translateWithId?: (id: string) => string;
 }
 declare const PaginationNav: React.ForwardRefExoticComponent<PaginationNavProps & React.RefAttributes<HTMLElement>>;
 export default PaginationNav;

package/lib/components/PaginationNav/PaginationNav.js

@@ -31,6 +31,11 @@ const translationIds = {
   'carbon.pagination-nav.active': 'Active',
   'carbon.pagination-nav.of': 'of'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(messageId) {
   return translationIds[messageId];
 }

package/lib/components/ProgressIndicator/ProgressIndicator.d.ts

@@ -6,6 +6,17 @@
  */
 import PropTypes from 'prop-types';
 import React from 'react';
+import { TranslateWithId } from '../../types/common';
+declare const defaultTranslations: {
+    readonly 'carbon.progress-step.complete': "Complete";
+    readonly 'carbon.progress-step.incomplete': "Incomplete";
+    readonly 'carbon.progress-step.current': "Current";
+    readonly 'carbon.progress-step.invalid': "Invalid";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = keyof typeof defaultTranslations;
 export interface ProgressIndicatorProps extends Omit<React.HTMLAttributes<HTMLUListElement>, 'onChange'> {
     /**
      * Provide `<ProgressStep>` components to be rendered in the
@@ -63,7 +74,7 @@ declare namespace ProgressIndicator {
         vertical: PropTypes.Requireable<boolean>;
     };
 }
-export interface ProgressStepProps {
+export interface ProgressStepProps extends TranslateWithId<TranslationKey> {
     /**
      * Provide an optional className to be applied to the containing `<li>` node
      */
@@ -112,11 +123,6 @@ export interface ProgressStepProps {
      * The ID of the tooltip content.
      */
     tooltipId?: string;
-    /**
-     * Optional method that takes in a message id and returns an
-     * internationalized string.
-     */
-    translateWithId?: (id: string) => string;
 }
 declare function ProgressStep({ label, description, className, current, complete, invalid, secondaryLabel, disabled, onClick, translateWithId: t, ...rest }: ProgressStepProps): import("react/jsx-runtime").JSX.Element;
 declare namespace ProgressStep {

package/lib/components/ProgressIndicator/ProgressIndicator.js

@@ -32,6 +32,11 @@ const defaultTranslations = {
   'carbon.progress-step.current': 'Current',
   'carbon.progress-step.invalid': 'Invalid'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(messageId) {
   return defaultTranslations[messageId];
 }

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/Slider/Slider.d.ts

@@ -6,6 +6,14 @@
  */
 import React, { type KeyboardEventHandler, PureComponent, ReactNode } from 'react';
 import PropTypes from 'prop-types';
+import { TranslateWithId } from '../../types/common';
+declare const translationIds: {
+    readonly autoCorrectAnnouncement: "carbon.slider.auto-correct-announcement";
+};
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+type TranslationKey = (typeof translationIds)[keyof typeof translationIds];
 /**
  * Distinguish two handles by lower and upper positions.
  */
@@ -14,7 +22,9 @@ declare enum HandlePosition {
     UPPER = "upper"
 }
 type ExcludedAttributes = 'onChange' | 'onBlur';
-export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes> {
+export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, ExcludedAttributes>, TranslateWithId<TranslationKey, {
+    correctedValue?: string;
+}> {
     /**
      * The `ariaLabel` for the `<input>`.
      */
@@ -136,14 +146,6 @@ export interface SliderProps extends Omit<React.InputHTMLAttributes<HTMLInputEle
      * which will be `(max - min) / stepMultiplier`.
      */
     stepMultiplier?: number;
-    /**
-     * Supply a method to translate internal strings with your i18n tool of
-     * choice. Translation keys are available on the `translationIds` field for
-     * this component.
-     */
-    translateWithId?: (translationId: string, translationState: {
-        correctedValue?: string;
-    }) => string;
     /**
      * The value of the slider. When there are two handles, value is the lower
      * bound.

package/lib/components/Slider/Slider.js

@@ -83,8 +83,13 @@ ThumbWrapper.propTypes = {
 const translationIds = {
   autoCorrectAnnouncement: 'carbon.slider.auto-correct-announcement'
 };
+
+/**
+ * Message ids that will be passed to translateWithId().
+ */
+
 function translateWithId(translationId, translationState) {
-  if (translationId === translationIds.autoCorrectAnnouncement && translationState?.correctedValue) {
+  if (translationState?.correctedValue) {
     const {
       correctedValue
     } = translationState;

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

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../_virtual/_rollupPluginBabelHelpers.js');
 var React = require('react');
 var PropTypes = require('prop-types');
-var isEqual = require('lodash.isequal');
+var isEqual = require('react-fast-compare');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 

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/lib/types/common.d.ts

@@ -9,10 +9,15 @@ export type ForwardRefReturn<T, P = unknown> = React.ForwardRefExoticComponent<F
 export type PolymorphicProps<Element extends React.ElementType, Props> = Props & Omit<React.ComponentProps<Element>, 'as'> & {
     as?: Element;
 };
-export interface InternationalProps<MID = string, ARGS = Record<string, unknown>> {
+export interface TranslateWithId<MID = string, ARGS = Record<string, unknown>> {
     /**
      * Supply a method to translate internal strings with your i18n tool of
      * choice.
      */
     translateWithId?(messageId: MID, args?: ARGS): string;
 }
+/**
+ * Alias of TranslateWithId. Will be removed in v12
+ * @deprecated Use TranslateWithId instead
+ */
+export type InternationalProps<MID = string, ARGS = Record<string, unknown>> = TranslateWithId<MID, ARGS>;