fix(components): fix incorrect usage of useid (#6491)

mongodb-js · Nov 14, 2024 · 9908bb9 · 9908bb9
1 parent cd2ec02
commit 9908bb9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 7 deletions.
diff --git a/packages/compass-components/src/components/interactive-popover.tsx b/packages/compass-components/src/components/interactive-popover.tsx
@@ -8,7 +8,6 @@ import { palette } from '@leafygreen-ui/palette';
 import { rgba } from 'polished';
 import { useDarkMode } from '../hooks/use-theme';
 import { useHotkeys } from '../hooks/use-hotkeys';
-import { useId } from '@react-aria/utils';
 
 const borderRadius = spacing[2];
 
@@ -162,7 +161,7 @@ function InteractivePopover({
 
   useHotkeys('Escape', onClose, { enabled: open }, [onClose]);
 
-  const closeButtonId = useId('close-button-id');
+  const closeButtonId = 'close-button-id';
 
   return trigger({
     onClick: onClickTrigger,

diff --git a/packages/compass-components/src/hooks/use-sort.spec.ts b/packages/compass-components/src/hooks/use-sort.spec.ts
@@ -57,7 +57,7 @@ describe('use-sort', function () {
     expect(
       screen
         .getByRole('button', {
-          name: /title/i,
+          name: 'Sort by',
         })
         .getAttribute('aria-disabled')
     ).to.equal('true');
@@ -70,7 +70,7 @@ describe('use-sort', function () {
     // Opens dropdown
     userEvent.click(
       screen.getByRole('button', {
-        name: /title/i,
+        name: 'Sort by',
       }),
       undefined,
       {
@@ -111,7 +111,7 @@ describe('use-sort', function () {
     // Opens dropdown
     userEvent.click(
       screen.getByRole('button', {
-        name: /title/i,
+        name: 'Sort by',
       }),
       undefined,
       {
@@ -141,7 +141,7 @@ describe('use-sort', function () {
     // Opens dropdown
     userEvent.click(
       screen.getByRole('button', {
-        name: /title/i,
+        name: 'Sort by',
       }),
       undefined,
       {

diff --git a/packages/compass-components/src/hooks/use-sort.tsx b/packages/compass-components/src/hooks/use-sort.tsx
@@ -43,7 +43,7 @@ export function useSortControls<T extends string>(
   items: readonly { name: T; label: string }[],
   options?: SortOptions
 ): [React.ReactElement, SortState<Unwrap<typeof items>['name']>] {
-  const labelId = useId('Sort by');
+  const labelId = 'sort-by';
   const controlId = useId();
 
   const [sortState, dispatch] = useReducer(