Merge branch 'main' of https://github.com/2nikhiltom/carbon

packages/react/src/components/Checkbox/Checkbox.tsx

@@ -11,11 +11,9 @@ import classNames from 'classnames';
 import { Text } from '../Text';
 import { usePrefix } from '../../internal/usePrefix';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import { noopFn } from '../../internal/noopFn';
 
-const getInstanceId = setupGetInstanceId();
-
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type';
 
 export interface CheckboxProps
@@ -127,7 +125,7 @@ const Checkbox = React.forwardRef(
     const showWarning = !readOnly && !invalid && warn;
     const showHelper = !invalid && !warn;
 
-    const checkboxGroupInstanceId = getInstanceId();
+    const checkboxGroupInstanceId = useId();
 
     const helperId = !helperText
       ? undefined

packages/react/src/components/CheckboxGroup/CheckboxGroup.tsx

@@ -10,9 +10,7 @@ import React, { ReactNode } from 'react';
 import cx from 'classnames';
 import { usePrefix } from '../../internal/usePrefix';
 import { WarningFilled, WarningAltFilled } from '@carbon/icons-react';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
-
-const getInstanceId = setupGetInstanceId();
+import { useId } from '../../internal/useId';
 
 export interface CheckboxGroupProps {
   children?: ReactNode;
@@ -54,7 +52,7 @@ const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
   const showWarning = !readOnly && !invalid && warn;
   const showHelper = !invalid && !warn;
 
-  const checkboxGroupInstanceId = getInstanceId();
+  const checkboxGroupInstanceId = useId();
 
   const helperId = !helperText
     ? undefined

packages/react/src/components/ComboBox/ComboBox.tsx

@@ -39,7 +39,7 @@ import ListBox, {
 } from '../ListBox';
 import { ListBoxTrigger, ListBoxSelection } from '../ListBox/next';
 import { match, keys } from '../../internal/keyboard';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import mergeRefs from '../../tools/mergeRefs';
 import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
@@ -122,8 +122,6 @@ const findHighlightedIndex = <ItemType,>(
   return -1;
 };
 
-const getInstanceId = setupGetInstanceId();
-
 type ExcludedAttributes = 'id' | 'onChange' | 'onClick' | 'type' | 'size';
 
 interface OnChangeData<ItemType> {
@@ -379,7 +377,7 @@ const ComboBox = forwardRef(
     const prefix = usePrefix();
     const { isFluid } = useContext(FormContext);
     const textInput = useRef<HTMLInputElement>(null);
-    const comboBoxInstanceId = getInstanceId();
+    const comboBoxInstanceId = useId();
     const [inputValue, setInputValue] = useState(
       getInputValue({
         initialSelectedItem,

packages/react/src/components/DataTable/TableToolbarSearch.tsx

@@ -18,13 +18,11 @@ import React, {
   RefObject,
 } from 'react';
 import Search, { SearchProps } from '../Search';
-import setupGetInstanceId from './tools/instanceId';
+import { useId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
 import { noopFn } from '../../internal/noopFn';
 import { InternationalProps } from '../../types/common';
 
-const getInstanceId = setupGetInstanceId();
-
 export type TableToolbarTranslationKey =
   | 'carbon.table.toolbar.search.label'
   | 'carbon.table.toolbar.search.placeholder';
@@ -150,7 +148,7 @@ const TableToolbarSearch = ({
 
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = useState(defaultValue || '');
-  const uniqueId = useMemo(getInstanceId, []);
+  const uniqueId = useId();
   const [focusTarget, setFocusTarget] = useState<RefObject<HTMLElement> | null>(
     null
   );

packages/react/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap

@@ -10,20 +10,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should not hav
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r5k:-title"
+        id="tc-:r63:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r5k:-description"
+        id="tc-:r63:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r5k:-title"
+        aria-labelledby="tc-:r63:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -182,20 +182,20 @@ exports[`DataTable behaves as expected selection -- radio buttons should render
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r5e:-title"
+        id="tc-:r5t:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r5e:-description"
+        id="tc-:r5t:-description"
       />
     </div>
     <div
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r5e:-title"
+        aria-labelledby="tc-:r5t:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -354,13 +354,13 @@ exports[`DataTable behaves as expected selection should render and match snapsho
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:r28:-title"
+        id="tc-:r2e:-title"
       >
         DataTable with selection
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:r28:-description"
+        id="tc-:r2e:-description"
       />
     </div>
     <section
@@ -571,7 +571,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-labelledby="tooltip-:r2f:"
+                aria-labelledby="tooltip-:r2m:"
                 class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
                 title="Settings"
                 type="button"
@@ -600,7 +600,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
             <span
               aria-hidden="true"
               class="cds--popover"
-              id="tooltip-:r2f:"
+              id="tooltip-:r2m:"
               role="tooltip"
             >
               <span
@@ -626,7 +626,7 @@ exports[`DataTable behaves as expected selection should render and match snapsho
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:r28:-title"
+        aria-labelledby="tc-:r2e:-title"
         class="cds--data-table cds--data-table--lg"
       >
         <thead>
@@ -797,13 +797,13 @@ exports[`DataTable renders as expected - Component API should render and match s
     >
       <h4
         class="cds--data-table-header__title"
-        id="tc-:rc:-title"
+        id="tc-:rd:-title"
       >
         DataTable with toolbar
       </h4>
       <p
         class="cds--data-table-header__description"
-        id="tc-:rc:-description"
+        id="tc-:rd:-description"
       />
     </div>
     <section
@@ -1002,7 +1002,7 @@ exports[`DataTable renders as expected - Component API should render and match s
               <button
                 aria-expanded="false"
                 aria-haspopup="true"
-                aria-labelledby="tooltip-:ri:"
+                aria-labelledby="tooltip-:rk:"
                 class="cds--btn--icon-only cds--toolbar-action cds--overflow-menu cds--overflow-menu cds--overflow-menu--md cds--btn cds--btn--md cds--layout--size-md cds--btn--primary"
                 title="Settings"
                 type="button"
@@ -1031,7 +1031,7 @@ exports[`DataTable renders as expected - Component API should render and match s
             <span
               aria-hidden="true"
               class="cds--popover"
-              id="tooltip-:ri:"
+              id="tooltip-:rk:"
               role="tooltip"
             >
               <span
@@ -1057,7 +1057,7 @@ exports[`DataTable renders as expected - Component API should render and match s
       class="cds--data-table-content"
     >
       <table
-        aria-labelledby="tc-:rc:-title"
+        aria-labelledby="tc-:rd:-title"
         class="cds--data-table cds--data-table--lg cds--data-table--visible-overflow-menu"
       >
         <thead>

packages/react/src/components/DatePickerInput/DatePickerInput.tsx

@@ -11,11 +11,10 @@ import PropTypes, { ReactElementLike, ReactNodeArray } from 'prop-types';
 import React, { ForwardedRef, useContext } from 'react';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import { ReactAttr } from '../../types/common';
 import { Text } from '../Text';
 
-const getInstanceId = setupGetInstanceId();
 type ExcludedAttributes = 'value' | 'onChange' | 'locale' | 'children';
 export type ReactNodeLike =
   | ReactElementLike
@@ -158,7 +157,7 @@ const DatePickerInput = React.forwardRef(function DatePickerInput(
   } = props;
   const prefix = usePrefix();
   const { isFluid } = useContext(FormContext);
-  const datePickerInputInstanceId = getInstanceId();
+  const datePickerInputInstanceId = useId();
   const datePickerInputProps = {
     id,
     onChange: (event) => {

packages/react/src/components/Dropdown/Dropdown.tsx

@@ -14,6 +14,7 @@ import React, {
   MouseEvent,
   ReactNode,
   useEffect,
+  useMemo,
 } from 'react';
 import {
   useSelect,
@@ -40,16 +41,14 @@ import deprecate from '../../prop-types/deprecate';
 import { usePrefix } from '../../internal/usePrefix';
 import { FormContext } from '../FluidForm';
 import { ReactAttr } from '../../types/common';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import {
   useFloating,
   flip,
   autoUpdate,
   size as floatingSize,
 } from '@floating-ui/react';
 
-const getInstanceId = setupGetInstanceId();
-
 const {
   ToggleButtonKeyDownArrowDown,
   ToggleButtonKeyDownArrowUp,
@@ -335,7 +334,7 @@ const Dropdown = React.forwardRef(
         return isObject && 'disabled' in item && item.disabled === true;
       },
     };
-    const { current: dropdownInstanceId } = useRef(getInstanceId());
+    const dropdownInstanceId = useId();
 
     function stateReducer(state, actionAndChanges) {
       const { changes, props, type } = actionAndChanges;
@@ -497,8 +496,13 @@ const Dropdown = React.forwardRef(
           },
         };
 
-    const menuProps = getMenuProps();
-    const menuRef = mergeRefs(menuProps.ref, refs.setFloating);
+    const menuProps = useMemo(
+      () =>
+        getMenuProps({
+          ref: autoAlign ? refs.setFloating : null,
+        }),
+      [autoAlign]
+    );
 
     // Slug is always size `mini`
     let normalizedSlug;
@@ -527,7 +531,7 @@ const Dropdown = React.forwardRef(
           warnText={warnText}
           light={light}
           isOpen={isOpen}
-          ref={refs.setReference}
+          ref={autoAlign ? refs.setReference : null}
           id={id}>
           {invalid && (
             <WarningFilled className={`${prefix}--list-box__invalid-icon`} />
@@ -567,7 +571,7 @@ const Dropdown = React.forwardRef(
             />
           </button>
           {normalizedSlug}
-          <ListBox.Menu {...menuProps} ref={menuRef}>
+          <ListBox.Menu {...menuProps}>
             {isOpen &&
               items.map((item, index) => {
                 const isObject = item !== null && typeof item === 'object';

packages/react/src/components/Menu/Menu.tsx

@@ -237,6 +237,7 @@ const Menu = forwardRef<HTMLUListElement, MenuProps>(function Menu(
   }
 
   function focusItem(e?: React.KeyboardEvent<HTMLUListElement>) {
+    e?.preventDefault();
     const currentItem = focusableItems.findIndex((item) =>
       item.ref?.current?.contains(document.activeElement)
     );

packages/react/src/components/Modal/Modal.tsx

@@ -21,7 +21,7 @@ import wrapFocus, {
 } from '../../internal/wrapFocus';
 import debounce from 'lodash.debounce';
 import useIsomorphicEffect from '../../internal/useIsomorphicEffect';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
 import { keys, match } from '../../internal/keyboard';
 import { IconButton } from '../IconButton';
@@ -32,8 +32,6 @@ import { InlineLoadingStatus } from '../InlineLoading/InlineLoading';
 import { useFeatureFlag } from '../FeatureFlags';
 import { composeEventHandlers } from '../../tools/events';
 
-const getInstanceId = setupGetInstanceId();
-
 export const ModalSizes = ['xs', 'sm', 'md', 'lg'] as const;
 
 export type ModalSize = (typeof ModalSizes)[number];
@@ -264,7 +262,7 @@ const Modal = React.forwardRef(function Modal(
   const startTrap = useRef<HTMLSpanElement>(null);
   const endTrap = useRef<HTMLSpanElement>(null);
   const [isScrollable, setIsScrollable] = useState(false);
-  const modalInstanceId = `modal-${getInstanceId()}`;
+  const modalInstanceId = `modal-${useId()}`;
   const modalLabelId = `${prefix}--modal-header__label--${modalInstanceId}`;
   const modalHeadingId = `${prefix}--modal-header__heading--${modalInstanceId}`;
   const modalBodyId = `${prefix}--modal-body--${modalInstanceId}`;

packages/react/src/components/MultiSelect/MultiSelect.tsx

@@ -36,7 +36,7 @@ import {
 } from './MultiSelectPropTypes';
 import { defaultSortItems, defaultCompareItems } from './tools/sorting';
 import { useSelection } from '../../internal/Selection';
-import setupGetInstanceId from '../../tools/setupGetInstanceId';
+import { useId } from '../../internal/useId';
 import mergeRefs from '../../tools/mergeRefs';
 import deprecate from '../../prop-types/deprecate';
 import { keys, match } from '../../internal/keyboard';
@@ -52,7 +52,6 @@ import {
   autoUpdate,
 } from '@floating-ui/react';
 
-const getInstanceId = setupGetInstanceId();
 const {
   ItemClick,
   ToggleButtonBlur,
@@ -328,7 +327,7 @@ const MultiSelect = React.forwardRef(
   ) => {
     const prefix = usePrefix();
     const { isFluid } = useContext(FormContext);
-    const { current: multiSelectInstanceId } = useRef(getInstanceId());
+    const multiSelectInstanceId = useId();
     const [isFocused, setIsFocused] = useState(false);
     const [inputFocused, setInputFocused] = useState(false);
     const [isOpen, setIsOpen] = useState(open || false);