@carbon/react 1.62.0 → 1.63.0-rc.0

package/es/components/Tag/OperationalTag.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
@@ -18,7 +18,6 @@ import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
@@ -45,7 +44,7 @@ const OperationalTag = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const tagRef = useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId()}`;
   const tagClasses = cx(`${prefix}--tag--operational`, className);
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useLayoutEffect(() => {

package/es/components/Tag/SelectableTag.js

@@ -9,7 +9,7 @@ import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js
 import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import Tag, { SIZES } from './Tag.js';
 import '../Tooltip/DefinitionTooltip.js';
@@ -18,7 +18,6 @@ import '../Text/index.js';
 import { isEllipsisActive } from './isEllipsisActive.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const SelectableTag = _ref => {
   let {
     className,
@@ -33,7 +32,7 @@ const SelectableTag = _ref => {
   } = _ref;
   const prefix = usePrefix();
   const tagRef = useRef();
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId()}`;
   const [selectedTag, setSelectedTag] = useState(selected);
   const tagClasses = cx(`${prefix}--tag--selectable`, className, {
     [`${prefix}--tag--selectable-selected`]: selectedTag

package/es/components/Tag/Tag.js

@@ -10,7 +10,7 @@ import PropTypes from 'prop-types';
 import React__default, { useRef, useState, useLayoutEffect } from 'react';
 import cx from 'classnames';
 import { Close } from '@carbon/icons-react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { usePrefix } from '../../internal/usePrefix.js';
 import '../Text/index.js';
 import deprecate from '../../prop-types/deprecate.js';
@@ -21,7 +21,6 @@ import { useMergeRefs } from '@floating-ui/react';
 import { Text } from '../Text/Text.js';
 
 var _Close;
-const getInstanceId = setupGetInstanceId();
 const TYPES = {
   red: 'Red',
   magenta: 'Magenta',
@@ -63,7 +62,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
   const prefix = usePrefix();
   const tagRef = useRef();
   const ref = useMergeRefs([forwardRef, tagRef]);
-  const tagId = id || `tag-${getInstanceId()}`;
+  const tagId = id || `tag-${useId()}`;
   const [isEllipsisApplied, setIsEllipsisApplied] = useState(false);
   useLayoutEffect(() => {
     const newElement = tagRef.current?.getElementsByClassName(`${prefix}--tag__label`)[0];
@@ -117,8 +116,7 @@ const Tag = /*#__PURE__*/React__default.forwardRef(function Tag(_ref, forwardRef
   }
   const ComponentTag = BaseComponent ?? (other.onClick || className?.includes(`${prefix}--tag--operational`) ? 'button' : 'div');
   const labelClasses = cx({
-    [`${prefix}--tag__label`]: !isInteractiveTag,
-    [`${prefix}--tag--${type}`]: type && !isInteractiveTag
+    [`${prefix}--tag__label`]: !isInteractiveTag
   });
   return /*#__PURE__*/React__default.createElement(ComponentTag, _extends({
     ref: ref,

package/es/components/TextArea/TextArea.js

@@ -17,12 +17,11 @@ import { FormContext } from '../FluidForm/FormContext.js';
 import { useAnnouncer } from '../../internal/useAnnouncer.js';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect.js';
 import { useMergedRefs } from '../../internal/useMergedRefs.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 import '../Text/index.js';
 import { Text } from '../Text/Text.js';
 
-const getInstanceId = setupGetInstanceId();
 const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
   const {
     className,
@@ -55,9 +54,7 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     defaultValue,
     value
   } = other;
-  const {
-    current: textAreaInstanceId
-  } = useRef(getInstanceId());
+  const textAreaInstanceId = useId();
   const textareaRef = useRef(null);
   const ref = useMergedRefs([forwardRef, textareaRef]);
   function getInitialTextCount() {
@@ -217,7 +214,33 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
       textareaProps.maxLength = maxCount;
     }
   }
+  const announcerRef = useRef(null);
+  const [prevAnnouncement, setPrevAnnouncement] = useState('');
   const ariaAnnouncement = useAnnouncer(textCount, maxCount, counterMode === 'word' ? 'words' : undefined);
+  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.createElement("textarea", _extends({}, other, textareaProps, {
     placeholder: placeholder,
     "aria-readonly": other.readOnly ? true : false,
@@ -250,7 +273,10 @@ const TextArea = /*#__PURE__*/React__default.forwardRef((props, forwardRef) => {
     className: `${prefix}--text-area__invalid-icon ${prefix}--text-area__invalid-icon--warning`
   }), input, normalizedSlug, /*#__PURE__*/React__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.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/es/components/TextInput/ControlledPasswordInput.js

@@ -6,7 +6,7 @@
  */
 
 import { extends as _extends } from '../../_virtual/_rollupPluginBabelHelpers.js';
-import React__default, { useRef } from 'react';
+import React__default from 'react';
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import { WarningFilled, ViewOff, View } from '@carbon/icons-react';
@@ -14,10 +14,9 @@ import { textInputProps } from './util.js';
 import { warning } from '../../internal/warning.js';
 import deprecate from '../../prop-types/deprecate.js';
 import { usePrefix } from '../../internal/usePrefix.js';
-import setupGetInstanceId from '../../tools/setupGetInstanceId.js';
+import { useId } from '../../internal/useId.js';
 import { noopFn } from '../../internal/noopFn.js';
 
-const getInstanceId = setupGetInstanceId();
 let didWarnAboutDeprecation = false;
 const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function ControlledPasswordInput(_ref, ref) {
   let {
@@ -45,9 +44,7 @@ const ControlledPasswordInput = /*#__PURE__*/React__default.forwardRef(function
     ...other
   } = _ref;
   const prefix = usePrefix();
-  const {
-    current: controlledPasswordInstanceId
-  } = useRef(getInstanceId());
+  const controlledPasswordInstanceId = useId();
   if (process.env.NODE_ENV !== "production") {
     process.env.NODE_ENV !== "production" ? 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/es/components/TextInput/TextInput.js

@@ -6,7 +6,7 @@
  */
 
 import PropTypes from 'prop-types';
-import React__default, { useState, useContext } from 'react';
+import React__default, { useState, useContext, useRef, useEffect } from 'react';
 import cx from 'classnames';
 import { useNormalizedInputProps } from '../../internal/useNormalizedInputProps.js';
 import PasswordInput from './PasswordInput.js';
@@ -152,7 +152,31 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
   const {
     isFluid
   } = useContext(FormContext);
+  const announcerRef = useRef(null);
+  const [prevAnnouncement, setPrevAnnouncement] = useState('');
   const ariaAnnouncement = useAnnouncer(textCount, maxCount);
+  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`
@@ -175,7 +199,10 @@ const TextInput = /*#__PURE__*/React__default.forwardRef(function TextInput(_ref
     className: iconClasses
   }), input, normalizedSlug, /*#__PURE__*/React__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.createElement("hr", {
     className: `${prefix}--text-input__divider`
   }), isFluid && !inline && normalizedProps.validation), !isFluid && !inline && (normalizedProps.validation || helper)));

package/es/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/es/index.js

@@ -175,6 +175,7 @@ export { GlobalTheme, Theme, ThemeContext, usePrefersDarkScheme, useTheme } from
 export { PrefixContext, usePrefix } from './internal/usePrefix.js';
 export { useIdPrefix } from './internal/useIdPrefix.js';
 export { default as unstable__FluidDatePickerSkeleton } from './components/FluidDatePicker/FluidDatePicker.Skeleton.js';
+export { default as unstable__FluidSearchSkeleton } from './components/FluidSearch/FluidSearch.Skeleton.js';
 export { default as unstable__FluidTextArea } from './components/FluidTextArea/FluidTextArea.js';
 export { default as unstable__FluidTextAreaSkeleton } from './components/FluidTextArea/FluidTextArea.Skeleton.js';
 export { default as unstable__FluidTextInput } from './components/FluidTextInput/FluidTextInput.js';
@@ -198,6 +199,7 @@ export { default as unstable__FluidMultiSelect } from './components/FluidMultiSe
 export { default as unstable__FluidMultiSelectSkeleton } from './components/FluidMultiSelect/FluidMultiSelect.Skeleton.js';
 export { default as unstable__FluidSelect } from './components/FluidSelect/FluidSelect.js';
 export { default as unstable__FluidSelectSkeleton } from './components/FluidSelect/FluidSelect.Skeleton.js';
+export { default as unstable__FluidSearch } from './components/FluidSearch/FluidSearch.js';
 export { default as unstable__FluidTimePicker } from './components/FluidTimePicker/FluidTimePicker.js';
 export { default as unstable__FluidTimePickerSkeleton } from './components/FluidTimePicker/FluidTimePicker.Skeleton.js';
 export { default as unstable__FluidTimePickerSelect } from './components/FluidTimePickerSelect/FluidTimePickerSelect.js';

package/es/internal/useAnnouncer.js

@@ -7,10 +7,15 @@
 
 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;
 }
 
 export { useAnnouncer };

package/lib/components/Checkbox/Checkbox.js

@@ -16,7 +16,7 @@ var cx = require('classnames');
 require('../Text/index.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
-var setupGetInstanceId = require('../../tools/setupGetInstanceId.js');
+var useId = require('../../internal/useId.js');
 var noopFn = require('../../internal/noopFn.js');
 var Text = require('../Text/Text.js');
 
@@ -26,7 +26,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     className,
@@ -49,7 +48,7 @@ const Checkbox = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   const prefix = usePrefix.usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId.useId();
   const helperId = !helperText ? undefined : `checkbox-helper-text-${checkboxGroupInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,

package/lib/components/CheckboxGroup/CheckboxGroup.js

@@ -15,7 +15,7 @@ var React = require('react');
 var cx = require('classnames');
 var usePrefix = require('../../internal/usePrefix.js');
 var iconsReact = require('@carbon/icons-react');
-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 }; }
 
@@ -23,7 +23,6 @@ var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const CheckboxGroup = _ref => {
   let {
     children,
@@ -43,7 +42,7 @@ const CheckboxGroup = _ref => {
   const prefix = usePrefix.usePrefix();
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId.useId();
   const helperId = !helperText ? undefined : `checkbox-group-helper-text-${checkboxGroupInstanceId}`;
   const helper = helperText ? /*#__PURE__*/React__default["default"].createElement("div", {
     id: helperId,

package/lib/components/ComboBox/ComboBox.js

@@ -17,7 +17,7 @@ var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
 var index = require('../ListBox/index.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');
@@ -92,7 +92,6 @@ const findHighlightedIndex = (_ref2, inputValue) => {
   }
   return -1;
 };
-const getInstanceId = setupGetInstanceId["default"]();
 const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
@@ -154,7 +153,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     isFluid
   } = React.useContext(FormContext.FormContext);
   const textInput = React.useRef(null);
-  const comboBoxInstanceId = getInstanceId();
+  const comboBoxInstanceId = useId.useId();
   const [inputValue, setInputValue] = React.useState(getInputValue({
     initialSelectedItem,
     inputValue: '',
@@ -393,6 +392,8 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   // when both the message is supplied *and* when the component is in
   // the matching state (invalid, warn, etc).
   const ariaDescribedBy = invalid && invalidText && invalidTextId || warn && warnText && warnTextId || helperText && !isFluid && helperTextId || undefined;
+
+  // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
     'aria-label': deprecatedAriaLabel || ariaLabel,
     ref: autoAlign ? refs.setFloating : null

package/lib/components/DataTable/DataTable.js

@@ -12,7 +12,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 var _rollupPluginBabelHelpers = require('../../_virtual/_rollupPluginBabelHelpers.js');
 var PropTypes = require('prop-types');
 var React = require('react');
-var isEqual = require('lodash.isequal');
+var isEqual = require('react-fast-compare');
 var getDerivedStateFromProps = require('./state/getDerivedStateFromProps.js');
 var sorting = require('./state/sorting.js');
 var cells = require('./tools/cells.js');

package/lib/components/DataTable/TableSelectRow.js

@@ -38,9 +38,10 @@ const TableSelectRow = _ref => {
     className
   } = _ref;
   const prefix = usePrefix.usePrefix();
+  const uniqueNameId = React.useId();
   const selectionInputProps = {
     id,
-    name,
+    name: name ? name : uniqueNameId,
     onClick: onSelect,
     onChange,
     checked,

package/lib/components/DataTable/TableToolbarSearch.js

@@ -15,7 +15,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 var Search = require('../Search/Search.js');
 require('../Search/Search.Skeleton.js');
-var instanceId = require('./tools/instanceId.js');
+var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var noopFn = require('../../internal/noopFn.js');
 
@@ -25,7 +25,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getInstanceId = instanceId["default"]();
 const translationKeys = {
   'carbon.table.toolbar.search.label': 'Filter table',
   'carbon.table.toolbar.search.placeholder': 'Filter table'
@@ -61,7 +60,7 @@ const TableToolbarSearch = _ref => {
   const [expandedState, setExpandedState] = React.useState(Boolean(defaultExpanded || defaultValue));
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = React.useState(defaultValue || '');
-  const uniqueId = React.useMemo(getInstanceId, []);
+  const uniqueId = useId.useId();
   const [focusTarget, setFocusTarget] = React.useState(null);
   const prefix = usePrefix.usePrefix();
   React.useEffect(() => {

package/lib/components/DatePickerInput/DatePickerInput.js

@@ -16,7 +16,7 @@ var React = require('react');
 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');
 require('../Text/index.js');
 var Text = require('../Text/Text.js');
 
@@ -26,7 +26,6 @@ var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(function DatePickerInput(props, ref) {
   const {
     datePickerType,
@@ -52,7 +51,7 @@ const DatePickerInput = /*#__PURE__*/React__default["default"].forwardRef(functi
   const {
     isFluid
   } = React.useContext(FormContext.FormContext);
-  const datePickerInputInstanceId = getInstanceId();
+  const datePickerInputInstanceId = useId.useId();
   const datePickerInputProps = {
     id,
     onChange: event => {

package/lib/components/Dropdown/Dropdown.js

@@ -21,7 +21,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 react = require('@floating-ui/react');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
@@ -31,7 +31,6 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
 
-const getInstanceId = setupGetInstanceId["default"]();
 const {
   ToggleButtonKeyDownArrowDown,
   ToggleButtonKeyDownArrowUp,
@@ -135,9 +134,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       return isObject && 'disabled' in item && item.disabled === true;
     }
   };
-  const {
-    current: dropdownInstanceId
-  } = React.useRef(getInstanceId());
+  const dropdownInstanceId = useId.useId();
   function stateReducer(state, actionAndChanges) {
     const {
       changes,
@@ -273,8 +270,9 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       }
     }
   };
-  const menuProps = getMenuProps();
-  const menuRef = mergeRefs["default"](menuProps.ref, refs.setFloating);
+  const menuProps = React.useMemo(() => getMenuProps({
+    ref: autoAlign ? refs.setFloating : null
+  }), [autoAlign]);
 
   // Slug is always size `mini`
   let normalizedSlug;
@@ -299,7 +297,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     warnText: warnText,
     light: light,
     isOpen: isOpen,
-    ref: refs.setReference,
+    ref: autoAlign ? refs.setReference : null,
     id: id
   }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
@@ -322,9 +320,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
   }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, _rollupPluginBabelHelpers["extends"]({}, menuProps, {
-    ref: menuRef
-  }), isOpen && items.map((item, index$1) => {
+  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,

package/lib/components/FluidSearch/FluidSearch.Skeleton.js

@@ -0,0 +1,50 @@
+/**
+ * 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 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);
+
+function FluidSearchSkeleton(_ref) {
+  let {
+    className,
+    ...other
+  } = _ref;
+  const prefix = usePrefix.usePrefix();
+  return /*#__PURE__*/React__default["default"].createElement(FormContext.FormContext.Provider, {
+    value: {
+      isFluid: true
+    }
+  }, /*#__PURE__*/React__default["default"].createElement("div", _rollupPluginBabelHelpers["extends"]({
+    className: cx__default["default"](`${prefix}--form-item ${prefix}--text-input--fluid__skeleton`, className)
+  }, other), /*#__PURE__*/React__default["default"].createElement("span", {
+    className: `${prefix}--label ${prefix}--skeleton`
+  }), /*#__PURE__*/React__default["default"].createElement("div", {
+    className: `${prefix}--skeleton ${prefix}--text-input`
+  })));
+}
+FluidSearchSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes__default["default"].string
+};
+
+exports["default"] = FluidSearchSkeleton;