fix(chrome): provide missing useId container dependency for Sheet…

… component (#1981)
zendeskgarden · Dec 2, 2024 · 2aba142 · 2aba142
1 parent 2c2c590
commit 2aba142
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 4 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/chrome/package.json b/packages/chrome/package.json
@@ -21,6 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@zendeskgarden/container-utilities": "^2.0.0",
     "@zendeskgarden/react-buttons": "^9.2.0",
     "dom-helpers": "^5.2.1",
     "polished": "^4.3.1",

diff --git a/packages/chrome/src/elements/sheet/Sheet.tsx b/packages/chrome/src/elements/sheet/Sheet.tsx
@@ -7,7 +7,7 @@
 
 import React, { useRef, useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { useUIDSeed } from 'react-uid';
+import { useId } from '@zendeskgarden/container-utilities';
 import { mergeRefs } from 'react-merge-refs';
 
 import { ISheetProps, PLACEMENT } from '../../types';
@@ -29,10 +29,8 @@ const SheetComponent = React.forwardRef<HTMLElement, ISheetProps>(
     ref
   ) => {
     const sheetRef = useRef<HTMLElement>(null);
-
-    const seed = useUIDSeed();
     const [isCloseButtonPresent, setIsCloseButtonPresent] = useState<boolean>(false);
-    const idPrefix = useMemo<string>(() => id || seed(`sheet_${PACKAGE_VERSION}`), [id, seed]);
+    const idPrefix = useId(id);
     const titleId = `${idPrefix}--title`;
     const descriptionId = `${idPrefix}--description`;
 

diff --git a/packages/chrome/src/types/index.ts b/packages/chrome/src/types/index.ts
@@ -85,6 +85,8 @@ export interface INavItemTextProps extends HTMLAttributes<HTMLSpanElement> {
 }
 
 export interface ISheetProps extends HTMLAttributes<HTMLElement> {
+  /** Identifies the sheet */
+  id?: string;
   /** Opens the sheet */
   isOpen?: boolean;
   /** Determines whether animation for opening and closing the sheet is used */