Replace useUniqueId with useId (#8396)

### WHY are these changes introduced? Fixes #8395 and is blocked by #8545 ### WHAT is this pull request doing? Replaces `useUniqueId` with `useId` --------- Co-authored-by: Aaron Casanova <[email protected]>
Shopify · Mar 8, 2023 · 62cca13 · 62cca13
1 parent 35a4089
commit 62cca13
Show file tree

Hide file tree

Showing 42 changed files with 135 additions and 492 deletions.
diff --git a/polaris-react/src/components/AppProvider/AppProvider.tsx b/polaris-react/src/components/AppProvider/AppProvider.tsx
@@ -15,11 +15,6 @@ import {
 } from '../../utilities/sticky-manager';
 import {LinkContext, LinkLikeComponent} from '../../utilities/link';
 import {FeaturesConfig, FeaturesContext} from '../../utilities/features';
-import {
-  UniqueIdFactory,
-  UniqueIdFactoryContext,
-  globalIdGeneratorFactory,
-} from '../../utilities/unique-id';
 
 import './AppProvider.scss';
 import './global.scss';
@@ -43,13 +38,11 @@ export interface AppProviderProps {
 export class AppProvider extends Component<AppProviderProps, State> {
   private stickyManager: StickyManager;
   private scrollLockManager: ScrollLockManager;
-  private uniqueIdFactory: UniqueIdFactory;
 
   constructor(props: AppProviderProps) {
     super(props);
     this.stickyManager = new StickyManager();
     this.scrollLockManager = new ScrollLockManager();
-    this.uniqueIdFactory = new UniqueIdFactory(globalIdGeneratorFactory);
 
     const {i18n, linkComponent} = this.props;
 
@@ -98,19 +91,17 @@ export class AppProvider extends Component<AppProviderProps, State> {
         <I18nContext.Provider value={intl}>
           <ScrollLockManagerContext.Provider value={this.scrollLockManager}>
             <StickyManagerContext.Provider value={this.stickyManager}>
-              <UniqueIdFactoryContext.Provider value={this.uniqueIdFactory}>
-                <LinkContext.Provider value={link}>
-                  <MediaQueryProvider>
-                    <PortalsManager>
-                      <FocusManager>
-                        <EphemeralPresenceManager>
-                          {children}
-                        </EphemeralPresenceManager>
-                      </FocusManager>
-                    </PortalsManager>
-                  </MediaQueryProvider>
-                </LinkContext.Provider>
-              </UniqueIdFactoryContext.Provider>
+              <LinkContext.Provider value={link}>
+                <MediaQueryProvider>
+                  <PortalsManager>
+                    <FocusManager>
+                      <EphemeralPresenceManager>
+                        {children}
+                      </EphemeralPresenceManager>
+                    </FocusManager>
+                  </PortalsManager>
+                </MediaQueryProvider>
+              </LinkContext.Provider>
             </StickyManagerContext.Provider>
           </ScrollLockManagerContext.Provider>
         </I18nContext.Provider>

diff --git a/polaris-react/src/components/Checkbox/Checkbox.tsx b/polaris-react/src/components/Checkbox/Checkbox.tsx
@@ -3,12 +3,12 @@ import React, {
   useRef,
   useImperativeHandle,
   useContext,
+  useId,
 } from 'react';
 import {MinusMinor, TickSmallMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../utilities/css';
 import {useToggle} from '../../utilities/use-toggle';
-import {useUniqueId} from '../../utilities/unique-id';
 import {Choice, helpTextID} from '../Choice';
 import {errorTextID} from '../InlineError';
 import {Icon} from '../Icon';
@@ -69,7 +69,8 @@ export const Checkbox = forwardRef<CheckboxHandles, CheckboxProps>(
     ref,
   ) {
     const inputNode = useRef<HTMLInputElement>(null);
-    const id = useUniqueId('Checkbox', idProp);
+    const uniqId = useId();
+    const id = idProp ?? uniqId;
     const {
       value: mouseOver,
       setTrue: handleMouseOver,

diff --git a/polaris-react/src/components/Checkbox/tests/Checkbox.test.tsx b/polaris-react/src/components/Checkbox/tests/Checkbox.test.tsx
@@ -102,7 +102,7 @@ describe('<Checkbox />', () => {
       const element = mountWithApp(<Checkbox label="Checkbox" />);
 
       expect(element).toContainReactComponent('input', {
-        id: 'PolarisCheckbox1',
+        id: ':r8:',
       });
     });
   });
@@ -138,7 +138,7 @@ describe('<Checkbox />', () => {
       );
 
       expect(checkbox).toContainReactComponent('input', {
-        'aria-describedby': 'PolarisCheckbox1HelpText',
+        'aria-describedby': ':rc:HelpText',
       });
 
       expect(checkbox.find('div')).toContainReactText('Some help');
@@ -168,7 +168,7 @@ describe('<Checkbox />', () => {
       );
 
       expect(checkbox).toContainReactComponent('input', {
-        'aria-describedby': 'PolarisCheckbox1Error',
+        'aria-describedby': ':re:Error',
       });
 
       expect(checkbox.find('div')).toContainReactText('Some error');
@@ -188,7 +188,7 @@ describe('<Checkbox />', () => {
       );
 
       expect(checkbox).toContainReactComponent('input', {
-        'aria-describedby': 'PolarisCheckbox1Error PolarisCheckbox1HelpText',
+        'aria-describedby': ':rg:Error :rg:HelpText',
       });
       expect(checkbox.find('div')).toContainReactText('Some error');
       expect(checkbox.find('div')).toContainReactText('Some help');

diff --git a/polaris-react/src/components/ChoiceList/ChoiceList.tsx b/polaris-react/src/components/ChoiceList/ChoiceList.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, {useId} from 'react';
 
-import {useUniqueId} from '../../utilities/unique-id';
 import type {Error} from '../../types';
 import {Checkbox} from '../Checkbox';
 import {RadioButton} from '../RadioButton';
@@ -64,7 +63,8 @@ export function ChoiceList({
   // see https://github.com/Microsoft/TypeScript/issues/28768
   const ControlComponent: any = allowMultiple ? Checkbox : RadioButton;
 
-  const name = useUniqueId('ChoiceList', nameProp);
+  const uniqName = useId();
+  const name = nameProp ?? uniqName;
   const finalName = allowMultiple ? `${name}[]` : name;
 
   const titleMarkup = title ? (

diff --git a/polaris-react/src/components/Combobox/components/TextField/TextField.tsx b/polaris-react/src/components/Combobox/components/TextField/TextField.tsx
@@ -1,7 +1,6 @@
-import React, {useMemo, useCallback, useEffect} from 'react';
+import React, {useMemo, useId, useCallback, useEffect} from 'react';
 
 import {labelID} from '../../../Label';
-import {useUniqueId} from '../../../../utilities/unique-id';
 import {TextField as PolarisTextField} from '../../../TextField';
 import type {TextFieldProps} from '../../../TextField';
 import {useComboboxTextField} from '../../../../utilities/combobox';
@@ -29,7 +28,7 @@ export function TextField({
     onTextFieldBlur,
   } = comboboxTextFieldContext;
 
-  const uniqueId = useUniqueId('ComboboxTextField');
+  const uniqueId = useId();
   const textFieldId = useMemo(() => idProp || uniqueId, [uniqueId, idProp]);
 
   const labelId = useMemo(

diff --git a/polaris-react/src/components/DropZone/DropZone.tsx b/polaris-react/src/components/DropZone/DropZone.tsx
@@ -5,6 +5,7 @@ import React, {
   FunctionComponent,
   useMemo,
   useEffect,
+  useId,
 } from 'react';
 import {UploadMajor, CircleAlertMajor} from '@shopify/polaris-icons';
 
@@ -16,7 +17,6 @@ import {Text} from '../Text';
 import {Labelled, LabelledProps} from '../Labelled';
 import {useI18n} from '../../utilities/i18n';
 import {isServer} from '../../utilities/target';
-import {useUniqueId} from '../../utilities/unique-id';
 import {useComponentDidMount} from '../../utilities/use-component-did-mount';
 import {useToggle} from '../../utilities/use-toggle';
 import {AlphaStack} from '../AlphaStack';
@@ -299,7 +299,8 @@ export const DropZone: React.FunctionComponent<DropZoneProps> & {
     adjustSize();
   });
 
-  const id = useUniqueId('DropZone', idProp);
+  const uniqId = useId();
+  const id = idProp ?? uniqId;
 
   const typeSuffix = capitalize(type);
   const allowMultipleKey = createAllowMultipleKey(allowMultiple);

diff --git a/polaris-react/src/components/FormLayout/components/Group/Group.tsx b/polaris-react/src/components/FormLayout/components/Group/Group.tsx
@@ -1,8 +1,7 @@
-import React, {Children} from 'react';
+import React, {Children, useId} from 'react';
 
 import {classNames} from '../../../../utilities/css';
 import {wrapWithComponent} from '../../../../utilities/components';
-import {useUniqueId} from '../../../../utilities/unique-id';
 import {Box} from '../../../Box';
 import {Item} from '../Item';
 import styles from '../../FormLayout.scss';
@@ -17,7 +16,7 @@ export interface GroupProps {
 export function Group({children, condensed, title, helpText}: GroupProps) {
   const className = classNames(condensed ? styles.condensed : styles.grouped);
 
-  const id = useUniqueId('FormLayoutGroup');
+  const id = useId();
 
   let helpTextElement = null;
   let helpTextID: undefined | string;

diff --git a/polaris-react/src/components/Listbox/Listbox.tsx b/polaris-react/src/components/Listbox/Listbox.tsx
@@ -5,12 +5,12 @@ import React, {
   useCallback,
   ReactNode,
   useMemo,
+  useId,
   Children,
 } from 'react';
 
 import {debounce} from '../../utilities/debounce';
 import {useToggle} from '../../utilities/use-toggle';
-import {useUniqueId} from '../../utilities/unique-id';
 import {useComboboxListbox} from '../../utilities/combobox';
 import {
   ListboxContext,
@@ -88,7 +88,7 @@ export function Listbox({
     setFalse: disableKeyboardEvents,
   } = useToggle(Boolean(enableKeyboardControl));
 
-  const uniqueId = useUniqueId('Listbox');
+  const uniqueId = useId();
   const listId = customListId || uniqueId;
 
   const scrollableRef = useRef<HTMLElement | null>(null);

diff --git a/polaris-react/src/components/Listbox/components/Option/Option.tsx b/polaris-react/src/components/Listbox/components/Option/Option.tsx
@@ -1,7 +1,6 @@
-import React, {useRef, useCallback, memo, useContext} from 'react';
+import React, {useRef, useCallback, memo, useContext, useId} from 'react';
 
 import {classNames} from '../../../../utilities/css';
-import {useUniqueId} from '../../../../utilities/unique-id';
 import {useListbox} from '../../../../utilities/listbox';
 import {useSection, listboxWithinSectionDataSelector} from '../Section';
 import {TextOption} from '../TextOption';
@@ -40,7 +39,7 @@ export const Option = memo(function Option({
     useContext(MappedActionContext);
 
   const listItemRef = useRef<HTMLLIElement>(null);
-  const domId = useUniqueId('ListboxOption');
+  const domId = useId();
   const sectionId = useSection();
   const isWithinSection = Boolean(sectionId);
 

diff --git a/polaris-react/src/components/Listbox/components/Section/Section.tsx b/polaris-react/src/components/Listbox/components/Section/Section.tsx
@@ -1,7 +1,6 @@
-import React, {ReactNode} from 'react';
+import React, {ReactNode, useId} from 'react';
 
 import {classNames} from '../../../../utilities/css';
-import {useUniqueId} from '../../../../utilities/unique-id';
 
 import {listboxSectionDataSelector} from './selectors';
 import {SectionContext} from './context';
@@ -14,15 +13,15 @@ interface SectionProps {
 }
 
 export function Section({children, divider = true, title}: SectionProps) {
-  const sectionId = useUniqueId('ListboxSection');
+  const id = useId();
 
   return (
-    <SectionContext.Provider value={sectionId}>
+    <SectionContext.Provider value={id}>
       <li role="presentation" {...listboxSectionDataSelector.props}>
         {title}
         <ul
           role="group"
-          aria-labelledby={sectionId}
+          aria-labelledby={id}
           className={classNames(
             styles.SectionGroup,
             !divider && styles.noDivider,

diff --git a/polaris-react/src/components/Modal/Modal.tsx b/polaris-react/src/components/Modal/Modal.tsx
@@ -1,8 +1,7 @@
-import React, {useState, useCallback, useRef} from 'react';
+import React, {useState, useCallback, useRef, useId} from 'react';
 import {TransitionGroup} from 'react-transition-group';
 
 import {focusFirstFocusableNode} from '../../utilities/focus';
-import {useUniqueId} from '../../utilities/unique-id/hooks';
 import {useI18n} from '../../utilities/i18n';
 import {WithinContentContext} from '../../utilities/within-content-context';
 import {wrapWithComponent} from '../../utilities/components';
@@ -94,7 +93,7 @@ export const Modal: React.FunctionComponent<ModalProps> & {
   const [iframeHeight, setIframeHeight] = useState(IFRAME_LOADING_HEIGHT);
   const [closing, setClosing] = useState(false);
 
-  const headerId = useUniqueId('modal-header');
+  const headerId = useId();
   const activatorRef = useRef<HTMLDivElement>(null);
 
   const i18n = useI18n();

diff --git a/polaris-react/src/components/Navigation/components/Item/Item.tsx b/polaris-react/src/components/Navigation/components/Item/Item.tsx
@@ -5,6 +5,7 @@ import React, {
   MouseEvent,
   ReactNode,
   useRef,
+  useId,
 } from 'react';
 
 import {useIsomorphicLayoutEffect} from '../../../../utilities/use-isomorphic-layout-effect';
@@ -17,7 +18,6 @@ import {UnstyledButton} from '../../../UnstyledButton';
 import {UnstyledLink} from '../../../UnstyledLink';
 import {useI18n} from '../../../../utilities/i18n';
 import {useMediaQuery} from '../../../../utilities/media-query';
-import {useUniqueId} from '../../../../utilities/unique-id';
 import styles from '../../Navigation.scss';
 import {Tooltip, TooltipProps} from '../../../Tooltip';
 
@@ -108,7 +108,7 @@ export function Item({
 }: ItemProps) {
   const i18n = useI18n();
   const {isNavigationCollapsed} = useMediaQuery();
-  const secondaryNavigationId = useUniqueId('SecondaryNavigation');
+  const secondaryNavigationId = useId();
   const {location, onNavigationDismiss} = useContext(NavigationContext);
   const navTextRef = useRef<HTMLSpanElement>(null);
   const [isTruncated, setIsTruncated] = useState(false);

diff --git a/polaris-react/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx b/polaris-react/src/components/Navigation/components/Item/components/Secondary/Secondary.tsx
@@ -1,6 +1,5 @@
-import React from 'react';
+import React, {useId} from 'react';
 
-import {useUniqueId} from '../../../../../../utilities/unique-id';
 import {Collapsible} from '../../../../../Collapsible';
 import styles from '../../../../Navigation.scss';
 
@@ -11,7 +10,7 @@ interface SecondaryProps {
 }
 
 export function Secondary({id, children, expanded}: SecondaryProps) {
-  const uid = useUniqueId('SecondaryNavigation');
+  const uid = useId();
   return (
     <Collapsible id={id || uid} open={expanded} transition={false}>
       <ul className={styles.List}>{children}</ul>

diff --git a/...t/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx b/...t/src/components/Navigation/components/Item/components/Secondary/tests/Secondary.test.tsx
@@ -8,7 +8,7 @@ describe('Secondary()', () => {
   it('passes a default id to Collapsible', () => {
     const component = mountWithApp(<Secondary expanded />);
     expect(component).toContainReactComponent(Collapsible, {
-      id: 'PolarisSecondaryNavigation1',
+      id: ':r0:',
     });
   });
 

diff --git a/polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx b/polaris-react/src/components/Navigation/components/Item/tests/Item.test.tsx
@@ -476,7 +476,7 @@ describe('<Nav.Item />', () => {
 
       expect(item).toContainReactComponent('a', {
         'aria-expanded': false,
-        'aria-controls': 'PolarisSecondaryNavigation1',
+        'aria-controls': ':r18:',
       });
     });
 

diff --git a/polaris-react/src/components/Navigation/components/Section/Section.tsx b/polaris-react/src/components/Navigation/components/Section/Section.tsx
@@ -1,9 +1,8 @@
-import React, {useEffect, useRef, useState} from 'react';
+import React, {useEffect, useRef, useState, useId} from 'react';
 import {HorizontalDotsMinor} from '@shopify/polaris-icons';
 
 import {classNames} from '../../../../utilities/css';
 import {useMediaQuery} from '../../../../utilities/media-query';
-import {useUniqueId} from '../../../../utilities/unique-id';
 import {useToggle} from '../../../../utilities/use-toggle';
 import {Collapsible} from '../../../Collapsible';
 import {Icon, IconProps} from '../../../Icon';
@@ -184,7 +183,7 @@ export function Section({
     );
   }
 
-  const additionalItemsId = useUniqueId('AdditionalItems');
+  const additionalItemsId = useId();
 
   const activeItemsMarkup = rollup && additionalItems.length > 0 && (
     <li className={styles.RollupSection}>

diff --git a/polaris-react/src/components/OptionList/OptionList.tsx b/polaris-react/src/components/OptionList/OptionList.tsx
@@ -1,4 +1,4 @@
-import React, {useState, useCallback} from 'react';
+import React, {useState, useCallback, useId} from 'react';
 
 import type {
   Descriptor,
@@ -7,7 +7,6 @@ import type {
 } from '../../types';
 import {isSection} from '../../utilities/options';
 import {arraysAreEqual} from '../../utilities/arrays';
-import {useUniqueId} from '../../utilities/unique-id';
 import {useDeepEffect} from '../../utilities/use-deep-effect';
 import {Box, BoxProps} from '../Box';
 import {Text} from '../Text';
@@ -55,7 +54,8 @@ export function OptionList({
   const [normalizedOptions, setNormalizedOptions] = useState(
     createNormalizedOptions(options, sections, title),
   );
-  const id = useUniqueId('OptionList', idProp);
+  const uniqId = useId();
+  const id = idProp ?? uniqId;
 
   useDeepEffect(
     () => {