diff --git a/packages/accordion/package.json b/packages/accordion/package.json index 5c36fb503..4dce895f1 100644 --- a/packages/accordion/package.json +++ b/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", diff --git a/packages/accordion/src/useAccordion.ts b/packages/accordion/src/useAccordion.ts index 819d84e20..acb54982f 100644 --- a/packages/accordion/src/useAccordion.ts +++ b/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(idPrefix || generateId('garden-accordion-container')); + const seed = useUIDSeed(); + const [prefix] = useState(idPrefix || seed(`accordion_${PACKAGE_VERSION}`)); const TRIGGER_ID = `${prefix}--trigger`; const PANEL_ID = `${prefix}--panel`; const [expandedState, setExpandedState] = useState(expandedSections || []); diff --git a/packages/field/package.json b/packages/field/package.json index 9ab492ace..cbffcc73b 100644 --- a/packages/field/package.json +++ b/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", diff --git a/packages/field/src/useField.ts b/packages/field/src/useField.ts index dff83ef92..d99c45166 100644 --- a/packages/field/src/useField.ts +++ b/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: (options?: T) => T & React.HTMLProps; @@ -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`; diff --git a/packages/field/stories.tsx b/packages/field/stories.tsx index f937cc18e..3e200934a 100644 --- a/packages/field/stories.tsx +++ b/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 ; + return ; }) .add('FieldContainer', () => ( - + {({ getLabelProps, getInputProps, getHintProps }) => ( <> diff --git a/packages/modal/package.json b/packages/modal/package.json index 5e41f5cbb..398ebd7de 100644 --- a/packages/modal/package.json +++ b/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", diff --git a/packages/modal/src/useModal.ts b/packages/modal/src/useModal.ts index 13e6eb615..283575b3d 100644 --- a/packages/modal/src/useModal.ts +++ b/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`; diff --git a/packages/tabs/package.json b/packages/tabs/package.json index 7d2f743c8..a83555834 100644 --- a/packages/tabs/package.json +++ b/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", diff --git a/packages/tabs/src/useTabs.ts b/packages/tabs/src/useTabs.ts index 392de6619..2a627f580 100644 --- a/packages/tabs/src/useTabs.ts +++ b/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 extends IGetItemPropsOptions { index: number; @@ -52,7 +52,8 @@ export function useTabs({ 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`; diff --git a/packages/tooltip/package.json b/packages/tooltip/package.json index 85739e124..bf8aff284 100644 --- a/packages/tooltip/package.json +++ b/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", diff --git a/packages/tooltip/src/useTooltip.ts b/packages/tooltip/src/useTooltip.ts index c61c5c0ae..2b3fe4ab7 100644 --- a/packages/tooltip/src/useTooltip.ts +++ b/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; diff --git a/packages/utilities/src/utils/IdManager.ts b/packages/utilities/src/utils/IdManager.ts index 817c44ee0..30db5246c 100644 --- a/packages/utilities/src/utils/IdManager.ts +++ b/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;