@carbon/react 1.68.0-rc.0 → 1.69.0-rc.0

package/lib/components/ComboBox/ComboBox.js

@@ -16,7 +16,7 @@ var PropTypes = require('prop-types');
 var React = require('react');
 require('../Text/index.js');
 var iconsReact = require('@carbon/icons-react');
-var index = require('../ListBox/index.js');
+var index$1 = require('../ListBox/index.js');
 var ListBoxSelection = require('../ListBox/next/ListBoxSelection.js');
 var ListBoxTrigger = require('../ListBox/next/ListBoxTrigger.js');
 var useId = require('../../internal/useId.js');
@@ -27,6 +27,7 @@ require('../FluidForm/FluidForm.js');
 var FormContext = require('../FluidForm/FormContext.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 var Text = require('../Text/Text.js');
 var match = require('../../internal/keyboard/match.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
@@ -46,8 +47,7 @@ const {
   ItemMouseMove,
   InputKeyDownArrowUp,
   InputKeyDownArrowDown,
-  MenuMouseLeave,
-  FunctionSelectItem
+  MenuMouseLeave
 } = Downshift.useCombobox.stateChangeTypes;
 const defaultItemToString = item => {
   if (typeof item === 'string') {
@@ -62,26 +62,42 @@ const defaultItemToString = item => {
   return '';
 };
 const defaultShouldFilterItem = () => true;
-const getInputValue = _ref => {
+const autocompleteCustomFilter = _ref => {
+  let {
+    item,
+    inputValue
+  } = _ref;
+  if (inputValue === null || inputValue === '') {
+    return true; // Show all items if there's no input
+  }
+  const lowercaseItem = item.toLowerCase();
+  const lowercaseInput = inputValue.toLowerCase();
+  return lowercaseItem.startsWith(lowercaseInput);
+};
+const getInputValue = _ref2 => {
   let {
     initialSelectedItem,
     inputValue,
     itemToString,
-    selectedItem
-  } = _ref;
+    selectedItem,
+    prevSelectedItem
+  } = _ref2;
   if (selectedItem) {
     return itemToString(selectedItem);
   }
   if (initialSelectedItem) {
     return itemToString(initialSelectedItem);
   }
+  if (!selectedItem && prevSelectedItem) {
+    return '';
+  }
   return inputValue || '';
 };
-const findHighlightedIndex = (_ref2, inputValue) => {
+const findHighlightedIndex = (_ref3, inputValue) => {
   let {
     items,
     itemToString = defaultItemToString
-  } = _ref2;
+  } = _ref3;
   if (!inputValue) {
     return -1;
   }
@@ -104,6 +120,8 @@ const findHighlightedIndex = (_ref2, inputValue) => {
  */
 
 const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const prevInputLengthRef = React.useRef(0);
+  const inputRef = React.useRef(null);
   const {
     ['aria-label']: ariaLabel = 'Choose an item',
     ariaLabel: deprecatedAriaLabel,
@@ -132,25 +150,27 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     size,
     titleText,
     translateWithId,
+    typeahead = false,
     warn,
     warnText,
     allowCustomValue = false,
     slug,
     ...rest
   } = props;
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles') || autoAlign;
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = react.useFloating(autoAlign ? {
+  } = react.useFloating(enableFloatingStyles ? {
     placement: direction,
     strategy: 'fixed',
-    middleware: [react.flip(), floatingUi_dom.hide()],
+    middleware: autoAlign ? [react.flip(), floatingUi_dom.hide()] : undefined,
     whileElementsMounted: react.autoUpdate
   } : {});
   const parentWidth = refs?.reference?.current?.clientWidth;
   React.useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -164,34 +184,69 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
         refs.floating.current.style.width = parentWidth + 'px';
       }
     }
-  }, [autoAlign, floatingStyles, refs.floating, parentWidth]);
-  const prefix = usePrefix.usePrefix();
-  const {
-    isFluid
-  } = React.useContext(FormContext.FormContext);
-  const textInput = React.useRef(null);
-  const comboBoxInstanceId = useId.useId();
+  }, [enableFloatingStyles, floatingStyles, refs.floating, parentWidth]);
   const [inputValue, setInputValue] = React.useState(getInputValue({
     initialSelectedItem,
     inputValue: '',
     itemToString,
     selectedItem: selectedItemProp
   }));
+  const [typeaheadText, setTypeaheadText] = React.useState('');
+  React.useEffect(() => {
+    if (typeahead) {
+      if (inputValue.length >= prevInputLengthRef.current) {
+        if (inputValue) {
+          const filteredItems = items.filter(item => autocompleteCustomFilter({
+            item: itemToString(item),
+            inputValue: inputValue
+          }));
+          if (filteredItems.length > 0) {
+            const suggestion = itemToString(filteredItems[0]);
+            setTypeaheadText(suggestion.slice(inputValue.length));
+          } else {
+            setTypeaheadText('');
+          }
+        } else {
+          setTypeaheadText('');
+        }
+      } else {
+        setTypeaheadText('');
+      }
+      prevInputLengthRef.current = inputValue.length;
+    }
+  }, [typeahead, inputValue, items, itemToString, autocompleteCustomFilter]);
+  const prefix = usePrefix.usePrefix();
+  const {
+    isFluid
+  } = React.useContext(FormContext.FormContext);
+  const textInput = React.useRef(null);
+  const comboBoxInstanceId = useId.useId();
   const [isFocused, setIsFocused] = React.useState(false);
-  const [prevSelectedItem, setPrevSelectedItem] = React.useState();
-  const [doneInitialSelectedItem, setDoneInitialSelectedItem] = React.useState(false);
   const savedOnInputChange = React.useRef(onInputChange);
-  if (!doneInitialSelectedItem || prevSelectedItem !== selectedItemProp) {
-    setDoneInitialSelectedItem(true);
-    setPrevSelectedItem(selectedItemProp);
-    setInputValue(getInputValue({
-      initialSelectedItem,
-      inputValue,
-      itemToString,
-      selectedItem: selectedItemProp
-    }));
-  }
-  const filterItems = (items, itemToString, inputValue) => items.filter(item => shouldFilterItem ? shouldFilterItem({
+  const prevSelectedItemProp = React.useRef(selectedItemProp);
+
+  // fully controlled combobox: handle changes to selectedItemProp
+  React.useEffect(() => {
+    if (prevSelectedItemProp.current !== selectedItemProp) {
+      const currentInputValue = getInputValue({
+        initialSelectedItem,
+        inputValue,
+        itemToString,
+        selectedItem: selectedItemProp,
+        prevSelectedItem: prevSelectedItemProp.current
+      });
+      setInputValue(currentInputValue);
+      onChange({
+        selectedItem: selectedItemProp,
+        inputValue: currentInputValue
+      });
+      prevSelectedItemProp.current = selectedItemProp;
+    }
+  }, [selectedItemProp]);
+  const filterItems = (items, itemToString, inputValue) => items.filter(item => typeahead ? autocompleteCustomFilter({
+    item: itemToString(item),
+    inputValue
+  }) : shouldFilterItem ? shouldFilterItem({
     item,
     itemToString,
     inputValue
@@ -214,7 +269,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     ...props,
     items: filteredItems(inputValue)
   }, inputValue);
-  const stateReducer = React__default["default"].useCallback((state, actionAndChanges) => {
+  const stateReducer = React.useCallback((state, actionAndChanges) => {
     const {
       type,
       changes
@@ -250,14 +305,6 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           }
           return changes;
         }
-      case FunctionSelectItem:
-        if (onChange) {
-          onChange({
-            selectedItem: changes.selectedItem,
-            inputValue: changes.inputValue
-          });
-        }
-        return changes;
       case InputKeyDownEnter:
         if (allowCustomValue) {
           setInputValue(inputValue);
@@ -331,7 +378,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     [`${prefix}--list-box--up`]: direction === 'top',
     [`${prefix}--combo-box--warning`]: showWarning,
     [`${prefix}--combo-box--readonly`]: readOnly,
-    [`${prefix}--autoalign`]: autoAlign
+    [`${prefix}--autoalign`]: enableFloatingStyles
   });
   const titleClasses = cx__default["default"](`${prefix}--label`, {
     [`${prefix}--label--disabled`]: disabled
@@ -387,25 +434,33 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     itemToString: item => {
       return itemToString(item);
     },
-    onInputValueChange(_ref3) {
+    onInputValueChange(_ref4) {
       let {
         inputValue
-      } = _ref3;
-      setInputValue(inputValue || '');
-      setHighlightedIndex(indexToHighlight(inputValue));
+      } = _ref4;
+      const normalizedInput = inputValue || '';
+      setInputValue(normalizedInput);
+      if (selectedItemProp && !inputValue) {
+        // ensure onChange is called when selectedItem is cleared
+        onChange({
+          selectedItem,
+          inputValue: normalizedInput
+        });
+      }
+      setHighlightedIndex(indexToHighlight(normalizedInput));
     },
-    onSelectedItemChange(_ref4) {
+    onSelectedItemChange(_ref5) {
       let {
         selectedItem
-      } = _ref4;
+      } = _ref5;
       onChange({
         selectedItem
       });
     },
-    onHighlightedIndexChange: _ref5 => {
+    onHighlightedIndexChange: _ref6 => {
       let {
         highlightedIndex
-      } = _ref5;
+      } = _ref6;
       if (highlightedIndex > -1 && typeof window !== undefined) {
         const itemArray = document.querySelectorAll(`li.${prefix}--list-box__menu-item[role="option"]`);
         const highlightedItem = itemArray[highlightedIndex];
@@ -484,15 +539,24 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
 
   // Memoize the value of getMenuProps to avoid an infinite loop
   const menuProps = React.useMemo(() => getMenuProps({
-    'aria-label': deprecatedAriaLabel || ariaLabel,
-    ref: autoAlign ? refs.setFloating : null
-  }), [autoAlign, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
+    ref: enableFloatingStyles ? refs.setFloating : null
+  }), [enableFloatingStyles, deprecatedAriaLabel, ariaLabel, getMenuProps, refs.setFloating]);
+  React.useEffect(() => {
+    if (textInput.current) {
+      if (inputRef.current && typeaheadText) {
+        const selectionStart = inputValue.length;
+        const selectionEnd = selectionStart + typeaheadText.length;
+        inputRef.current.value = inputValue + typeaheadText;
+        inputRef.current.setSelectionRange(selectionStart, selectionEnd);
+      }
+    }
+  }, [inputValue, typeaheadText]);
   return /*#__PURE__*/React__default["default"].createElement("div", {
     className: wrapperClasses
   }, titleText && /*#__PURE__*/React__default["default"].createElement(Text.Text, _rollupPluginBabelHelpers["extends"]({
     as: "label",
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     className: className,
@@ -504,7 +568,7 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     light: light,
     size: size,
     warn: warn,
-    ref: autoAlign ? refs.setReference : null,
+    ref: enableFloatingStyles ? refs.setReference : null,
     warnText: warnText,
     warnTextId: warnTextId
   }, /*#__PURE__*/React__default["default"].createElement("div", {
@@ -517,9 +581,16 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
     "aria-haspopup": "listbox",
     title: textInput?.current?.value
   }, getInputProps({
+    'aria-label': titleText ? undefined : deprecatedAriaLabel || ariaLabel,
     'aria-controls': isOpen ? undefined : menuProps.id,
     placeholder,
-    ref: mergeRefs["default"](textInput, ref),
+    value: inputValue,
+    onChange: e => {
+      const newValue = e.target.value;
+      setInputValue(newValue);
+      downshiftSetInputValue(newValue);
+    },
+    ref: mergeRefs["default"](textInput, ref, inputRef),
     onKeyDown: event => {
       if (match.match(event, keys.Space)) {
         event.stopPropagation();
@@ -567,6 +638,15 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
           toggleMenu();
         }
       }
+      if (typeahead && event.key === 'Tab') {
+        //  event.preventDefault();
+        const matchingItem = items.find(item => itemToString(item).toLowerCase().startsWith(inputValue.toLowerCase()));
+        if (matchingItem) {
+          const newValue = itemToString(matchingItem);
+          downshiftSetInputValue(newValue);
+          selectItem(matchingItem);
+        }
+      }
     }
   }), rest, readOnlyEventHandlers, {
     readOnly: readOnly,
@@ -586,12 +666,12 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
   }), /*#__PURE__*/React__default["default"].createElement(ListBoxTrigger["default"], _rollupPluginBabelHelpers["extends"]({}, buttonProps, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index$1) => {
+  }))), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen ? filterItems(items, itemToString, inputValue).map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const title = isObject && 'text' in item && itemToElement ? item.text?.toString() : itemToString(item);
     const itemProps = getItemProps({
       item,
-      index: index$1
+      index
     });
 
     // The initial implementation using <Downshift> would place the disabled attribute
@@ -604,10 +684,10 @@ const ComboBox = /*#__PURE__*/React.forwardRef((props, ref) => {
       // eslint-disable-line @typescript-eslint/no-unused-vars
       ...modifiedItemProps
     } = itemProps;
-    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
-      isHighlighted: highlightedIndex === index$1,
+      isHighlighted: highlightedIndex === index,
       title: title,
       disabled: disabled
     }, modifiedItemProps), ItemToElement ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({
@@ -759,6 +839,7 @@ ComboBox.propTypes = {
    * Specify your own filtering logic by passing in a `shouldFilterItem`
    * function that takes in the current input and an item and passes back
    * whether or not the item should be filtered.
+   * this prop will be ignored if `typeahead` prop is enabled
    */
   shouldFilterItem: PropTypes__default["default"].func,
   /**
@@ -779,6 +860,10 @@ ComboBox.propTypes = {
    * and returns the localized string for the message
    */
   translateWithId: PropTypes__default["default"].func,
+  /**
+   * **Experimental**: will enable autcomplete and typeahead for the input field
+   */
+  typeahead: PropTypes__default["default"].bool,
   /**
    * Specify whether the control is currently in warning state
    */

package/lib/components/ComboButton/index.js

@@ -14,7 +14,7 @@ var React = require('react');
 var PropTypes = require('prop-types');
 var cx = require('classnames');
 var iconsReact = require('@carbon/icons-react');
-var index = require('../IconButton/index.js');
+var index$1 = require('../IconButton/index.js');
 var Button = require('../Button/Button.js');
 require('../Button/Button.Skeleton.js');
 var Menu = require('../Menu/Menu.js');
@@ -24,6 +24,7 @@ var useId = require('../../internal/useId.js');
 var usePrefix = require('../../internal/usePrefix.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -57,12 +58,18 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     translateWithId: t = defaultTranslateWithId,
     ...rest
   } = _ref;
+  // feature flag utilized to separate out only the dynamic styles from @floating-ui
+  // flag is turned on when collision detection (ie. flip, hide) logic is not desired
+  const enableOnlyFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
   const id = useId.useId('combobutton');
   const prefix = usePrefix.usePrefix();
   const containerRef = React.useRef(null);
-  const middlewares = [react.flip({
-    crossAxis: false
-  }), floatingUi_dom.hide()];
+  let middlewares = [];
+  if (!enableOnlyFloatingStyles) {
+    middlewares = [react.flip({
+      crossAxis: false
+    }), floatingUi_dom.hide()];
+  }
   if (menuAlignment === 'bottom' || menuAlignment === 'top') {
     middlewares.push(react.size({
       apply(_ref2) {
@@ -137,7 +144,7 @@ const ComboButton = /*#__PURE__*/React__default["default"].forwardRef(function C
     size: size,
     disabled: disabled,
     onClick: handlePrimaryActionClick
-  }, label)), /*#__PURE__*/React__default["default"].createElement(index.IconButton, {
+  }, label)), /*#__PURE__*/React__default["default"].createElement(index$1.IconButton, {
     ref: refs.setReference,
     className: triggerClasses,
     label: t('carbon.combo-button.additional-actions'),

package/lib/components/DataTable/TableCell.d.ts

@@ -28,8 +28,5 @@ interface TableCellProps extends ReactAttr<HTMLTableCellElement> {
      */
     headers?: string;
 }
-declare const TableCell: {
-    ({ children, className, hasSlugHeader, colSpan, ...rest }: TableCellProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
+declare const TableCell: React.ForwardRefExoticComponent<TableCellProps & React.RefAttributes<HTMLTableCellElement>>;
 export default TableCell;

package/lib/components/DataTable/TableCell.js

@@ -19,7 +19,7 @@ function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'defau
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 var cx__default = /*#__PURE__*/_interopDefaultLegacy(cx);
 
-const TableCell = _ref => {
+const TableCell = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) => {
   let {
     children,
     className,
@@ -33,9 +33,10 @@ const TableCell = _ref => {
   });
   return /*#__PURE__*/React__default["default"].createElement("td", _rollupPluginBabelHelpers["extends"]({
     className: tableCellClassNames ? tableCellClassNames : undefined,
+    ref: ref,
     colSpan: colSpan
   }, rest), children);
-};
+});
 TableCell.displayName = 'TableCell';
 
 exports["default"] = TableCell;

package/lib/components/DatePicker/DatePicker.js

@@ -403,9 +403,6 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       }
     }
     function handleOnChange(event) {
-      if (datePickerType == 'single' && closeOnSelect) {
-        calendar.calendarContainer.classList.remove('open');
-      }
       const {
         target
       } = event;
@@ -421,12 +418,16 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       if (calendar.selectedDates.length === 0) {
         return;
       }
-      calendar.clear();
-      calendar.input.focus();
+    }
+    function handleKeyPress(event) {
+      if (match.match(event, keys.Enter) && closeOnSelect && datePickerType == 'single') {
+        calendar.calendarContainer.classList.remove('open');
+      }
     }
     if (start) {
       start.addEventListener('keydown', handleArrowDown);
       start.addEventListener('change', handleOnChange);
+      start.addEventListener('keypress', handleKeyPress);
       if (calendar && calendar.calendarContainer) {
         // Flatpickr's calendar dialog is not rendered in a landmark causing an
         // error with IBM Equal Access Accessibility Checker so we add an aria
@@ -439,6 +440,7 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
     if (end) {
       end.addEventListener('keydown', handleArrowDown);
       end.addEventListener('change', handleOnChange);
+      end.addEventListener('keypress', handleKeyPress);
     }
 
     //component did unmount equivalent
@@ -462,10 +464,12 @@ const DatePicker = /*#__PURE__*/React__default["default"].forwardRef(function Da
       if (start) {
         start.removeEventListener('keydown', handleArrowDown);
         start.removeEventListener('change', handleOnChange);
+        start.removeEventListener('keypress', handleKeyPress);
       }
       if (end) {
         end.removeEventListener('keydown', handleArrowDown);
         end.removeEventListener('change', handleOnChange);
+        end.removeEventListener('change', handleKeyPress);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps

package/lib/components/Disclosure/index.d.ts

@@ -0,0 +1,18 @@
+/**
+ * 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.
+ */
+declare function useDisclosure(id: any): {
+    buttonProps: {
+        'aria-controls': any;
+        'aria-expanded': boolean;
+        onClick(): void;
+    };
+    contentProps: {
+        id: any;
+    };
+    open: boolean;
+};
+export { useDisclosure };

package/lib/components/Dropdown/Dropdown.js

@@ -15,7 +15,7 @@ var Downshift = require('downshift');
 var cx = require('classnames');
 var PropTypes = require('prop-types');
 var iconsReact = require('@carbon/icons-react');
-var index = require('../ListBox/index.js');
+var index$1 = require('../ListBox/index.js');
 var mergeRefs = require('../../tools/mergeRefs.js');
 var deprecate = require('../../prop-types/deprecate.js');
 var usePrefix = require('../../internal/usePrefix.js');
@@ -24,6 +24,7 @@ var FormContext = require('../FluidForm/FormContext.js');
 var useId = require('../../internal/useId.js');
 var react = require('@floating-ui/react');
 var floatingUi_dom = require('../../node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs.js');
+var index = require('../FeatureFlags/index.js');
 var ListBoxPropTypes = require('../ListBox/ListBoxPropTypes.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -81,11 +82,12 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     slug,
     ...other
   } = _ref;
+  const enableFloatingStyles = index.useFeatureFlag('enable-v12-dynamic-floating-styles');
   const {
     refs,
     floatingStyles,
     middlewareData
-  } = react.useFloating(autoAlign ? {
+  } = react.useFloating(enableFloatingStyles || autoAlign ? {
     placement: direction,
     // The floating element is positioned relative to its nearest
     // containing block (usually the viewport). It will in many cases also
@@ -103,12 +105,14 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
           width: `${rects.reference.width}px`
         });
       }
-    }), react.flip(), floatingUi_dom.hide()],
+    }), autoAlign && react.flip(), autoAlign && floatingUi_dom.hide()],
     whileElementsMounted: react.autoUpdate
-  } : {} // When autoAlign is turned off, floating-ui will not be used
+  } : {}
+  // When autoAlign is turned off & the `enable-v12-dynamic-floating-styles` feature flag is not
+  // enabled, floating-ui will not be used
   );
   React.useEffect(() => {
-    if (autoAlign) {
+    if (enableFloatingStyles || autoAlign) {
       const updatedFloatingStyles = {
         ...floatingStyles,
         visibility: middlewareData.hide?.referenceHidden ? 'hidden' : 'visible'
@@ -247,9 +251,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
       // NOTE: does not prevent click
       evt.preventDefault();
       // focus on the element as per readonly input behavior
-      if (mergedRef.current !== undefined) {
-        mergedRef.current.focus();
-      }
+      mergedRef?.current?.focus();
     },
     onKeyDown: evt => {
       const selectAccessKeys = ['ArrowDown', 'ArrowUp', ' ', 'Enter'];
@@ -277,7 +279,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     }
   };
   const menuProps = React.useMemo(() => getMenuProps({
-    ref: autoAlign ? refs.setFloating : null
+    ref: enableFloatingStyles || autoAlign ? refs.setFloating : null
   }), [autoAlign, getMenuProps, refs.setFloating]);
 
   // Slug is always size `mini`
@@ -291,7 +293,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     className: wrapperClasses
   }, other), titleText && /*#__PURE__*/React__default["default"].createElement("label", _rollupPluginBabelHelpers["extends"]({
     className: titleClasses
-  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index["default"], {
+  }, getLabelProps()), titleText), /*#__PURE__*/React__default["default"].createElement(index$1["default"], {
     onFocus: handleFocus,
     onBlur: handleFocus,
     size: size,
@@ -302,7 +304,7 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     warnText: warnText,
     light: light,
     isOpen: isOpen,
-    ref: autoAlign ? refs.setReference : null,
+    ref: enableFloatingStyles || autoAlign ? refs.setReference : null,
     id: id
   }, invalid && /*#__PURE__*/React__default["default"].createElement(iconsReact.WarningFilled, {
     className: `${prefix}--list-box__invalid-icon`
@@ -322,23 +324,23 @@ const Dropdown = /*#__PURE__*/React__default["default"].forwardRef((_ref, ref) =
     ref: mergedRef
   }), /*#__PURE__*/React__default["default"].createElement("span", {
     className: `${prefix}--list-box__label`
-  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index["default"].MenuIcon, {
+  }, selectedItem ? renderSelectedItem ? renderSelectedItem(selectedItem) : itemToString(selectedItem) : label), /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuIcon, {
     isOpen: isOpen,
     translateWithId: translateWithId
-  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index["default"].Menu, menuProps, isOpen && items.map((item, index$1) => {
+  })), normalizedSlug, /*#__PURE__*/React__default["default"].createElement(index$1["default"].Menu, menuProps, isOpen && items.map((item, index) => {
     const isObject = item !== null && typeof item === 'object';
     const itemProps = getItemProps({
       item,
-      index: index$1
+      index
     });
     if (item !== null && typeof item === 'object' && Object.prototype.hasOwnProperty.call(item, 'id')) {
       itemProps.id = item['id'];
     }
     const title = isObject && 'text' in item && itemToElement ? item.text : itemToString(item);
-    return /*#__PURE__*/React__default["default"].createElement(index["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
+    return /*#__PURE__*/React__default["default"].createElement(index$1["default"].MenuItem, _rollupPluginBabelHelpers["extends"]({
       key: itemProps.id,
       isActive: selectedItem === item,
-      isHighlighted: highlightedIndex === index$1,
+      isHighlighted: highlightedIndex === index,
       title: title,
       disabled: itemProps['aria-disabled']
     }, itemProps), typeof item === 'object' && ItemToElement !== undefined && ItemToElement !== null ? /*#__PURE__*/React__default["default"].createElement(ItemToElement, _rollupPluginBabelHelpers["extends"]({