feat: move ID utilities to react-uid

packages/accordion/package.json

@@ -18,7 +18,8 @@
   },
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-utilities": "^0.3.0"
+    "@zendeskgarden/container-utilities": "^0.3.0",
+    "react-uid": "^2.2.0"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/accordion/src/useAccordion.ts

@@ -6,9 +6,9 @@
  */
 
 import { useState, HTMLProps } from 'react';
+import { useUIDSeed } from 'react-uid';
 import {
   composeEventHandlers,
-  generateId,
   KEY_CODES,
   getControlledValue
 } from '@zendeskgarden/container-utilities';
@@ -55,7 +55,8 @@ export function useAccordion({
   expandable = true,
   collapsible = true
 }: IUseAccordionProps = {}): IUseAccordionReturnValue {
-  const [prefix] = useState<string>(idPrefix || generateId('garden-accordion-container'));
+  const seed = useUIDSeed();
+  const [prefix] = useState<string>(idPrefix || seed(`accordion_${PACKAGE_VERSION}`));
   const TRIGGER_ID = `${prefix}--trigger`;
   const PANEL_ID = `${prefix}--panel`;
   const [expandedState, setExpandedState] = useState<number[]>(expandedSections || []);

packages/field/package.json

@@ -18,7 +18,7 @@
   },
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-utilities": "^0.3.0"
+    "react-uid": "^2.2.0"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/field/src/useField.ts

@@ -6,7 +6,7 @@
  */
 
 import { useState } from 'react';
-import { generateId } from '@zendeskgarden/container-utilities';
+import { useUIDSeed } from 'react-uid';
 
 export interface IUseFieldPropGetters {
   getHintProps: <T>(options?: T) => T & React.HTMLProps<any>;
@@ -18,7 +18,8 @@ export interface IUseFieldPropGetters {
 }
 
 export function useField(idPrefix?: string): IUseFieldPropGetters {
-  const [prefix] = useState(idPrefix || generateId('garden-field-container'));
+  const seed = useUIDSeed();
+  const [prefix] = useState(idPrefix || seed(`field_${PACKAGE_VERSION}`));
   const inputId = `${prefix}--input`;
   const labelId = `${prefix}--label`;
   const hintId = `${prefix}--hint`;

packages/field/stories.tsx

@@ -6,12 +6,11 @@
  */
 
 import React from 'react';
-
+import { uid } from 'react-uid';
 import { storiesOf } from '@storybook/react';
 import { withKnobs, text } from '@storybook/addon-knobs';
 
 import { FieldContainer, useField } from './src';
-import { generateId } from '@zendeskgarden/container-utilities';
 
 storiesOf('Field Container', module)
   .addDecorator(withKnobs)
@@ -30,10 +29,10 @@ storiesOf('Field Container', module)
       );
     };
 
-    return <Field id={text('id', generateId())} />;
+    return <Field id={text('id', uid({ name: 'useField' }))} />;
   })
   .add('FieldContainer', () => (
-    <FieldContainer id={text('id', generateId())}>
+    <FieldContainer id={text('id', uid({ name: 'FieldContainer' }))}>
       {({ getLabelProps, getInputProps, getHintProps }) => (
         <>
           <label {...getLabelProps()}>Accessible Native Input</label>

packages/modal/package.json

@@ -19,7 +19,8 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-focusjail": "^1.2.3",
-    "@zendeskgarden/container-utilities": "^0.3.0"
+    "@zendeskgarden/container-utilities": "^0.3.0",
+    "react-uid": "^2.2.0"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/modal/src/useModal.ts

@@ -6,7 +6,8 @@
  */
 
 import { useState } from 'react';
-import { composeEventHandlers, generateId, KEY_CODES } from '@zendeskgarden/container-utilities';
+import { useUIDSeed } from 'react-uid';
+import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
 import { useFocusJail } from '@zendeskgarden/container-focusjail';
 
 export interface IUseModalProps {
@@ -29,7 +30,8 @@ export interface IUseModalReturnValue {
 export function useModal(
   { onClose, modalRef, id: _id, focusOnMount, environment }: IUseModalProps = {} as any
 ): IUseModalReturnValue {
-  const [idPrefix] = useState(_id || generateId('garden-modal-container'));
+  const seed = useUIDSeed();
+  const [idPrefix] = useState(_id || seed(`modal_${PACKAGE_VERSION}`));
   const titleId = `${idPrefix}--title`;
   const contentId = `${idPrefix}--content`;
 

packages/tabs/package.json

@@ -19,7 +19,7 @@
   "types": "dist/typings/index.d.ts",
   "dependencies": {
     "@zendeskgarden/container-selection": "^1.2.6",
-    "@zendeskgarden/container-utilities": "^0.3.0"
+    "react-uid": "^2.2.0"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/tabs/src/useTabs.ts

@@ -6,13 +6,13 @@
  */
 
 import { useState } from 'react';
+import { useUIDSeed } from 'react-uid';
 import {
   useSelection,
   IGetItemPropsOptions,
   IUseSelectionState,
   IUseSelectionProps
 } from '@zendeskgarden/container-selection';
-import { generateId } from '@zendeskgarden/container-utilities';
 
 interface IGetTabProps<Item> extends IGetItemPropsOptions<Item> {
   index: number;
@@ -52,7 +52,8 @@ export function useTabs<Item = any>({
     defaultSelectedIndex: 0,
     ...options
   });
-  const [_id] = useState(idPrefix || generateId('garden-tabs-container'));
+  const seed = useUIDSeed();
+  const [_id] = useState(idPrefix || seed(`tabs_${PACKAGE_VERSION}`));
   const PANEL_ID = `${_id}--panel`;
   const TAB_ID = `${_id}--tab`;
 

packages/tooltip/package.json

@@ -18,7 +18,8 @@
   },
   "types": "dist/typings/index.d.ts",
   "dependencies": {
-    "@zendeskgarden/container-utilities": "^0.3.0"
+    "@zendeskgarden/container-utilities": "^0.3.0",
+    "react-uid": "^2.2.0"
   },
   "peerDependencies": {
     "prop-types": "^15.6.1",

packages/tooltip/src/useTooltip.ts

@@ -6,7 +6,8 @@
  */
 
 import { useState, useEffect, useRef } from 'react';
-import { composeEventHandlers, generateId, KEY_CODES } from '@zendeskgarden/container-utilities';
+import { useUIDSeed } from 'react-uid';
+import { composeEventHandlers, KEY_CODES } from '@zendeskgarden/container-utilities';
 
 export interface IUseTooltipProps {
   delayMilliseconds?: number;
@@ -28,7 +29,8 @@ export const useTooltip = ({
   isVisible
 }: IUseTooltipProps = {}): IUseTooltipReturnValue => {
   const [visibility, setVisibility] = useState(isVisible);
-  const [_id] = useState(id || generateId('garden-tooltip-container'));
+  const seed = useUIDSeed();
+  const [_id] = useState(id || seed(`tooltip_${PACKAGE_VERSION}`));
   const isMounted = useRef(false);
 
   let openTooltipTimeoutId: number | undefined;

packages/utilities/src/utils/IdManager.ts

@@ -18,7 +18,7 @@ export function generateId(prefix = 'garden') {
 
 /**
  * This is only used in tests... Could be useful in SSR?
- * @param {Number} num The number to set the idCountry to
+ * @param {Number} num The number to set the idCounter to
  */
 export function setIdCounter(num: number) {
   idCounter = num;