From 4c97678aacedc671a99d5c58a9ec808b7501d18a Mon Sep 17 00:00:00 2001
From: Sergey Petushkov <petushkov.sergey@gmail.com>
Date: Thu, 14 Nov 2024 10:36:53 +0100
Subject: [PATCH] fix(components): fix incorrect usage of useid

---
 .../src/components/interactive-popover.tsx                | 3 +--
 packages/compass-components/src/hooks/use-sort.spec.ts    | 8 ++++----
 packages/compass-components/src/hooks/use-sort.tsx        | 2 +-
 3 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/packages/compass-components/src/components/interactive-popover.tsx b/packages/compass-components/src/components/interactive-popover.tsx
index e7ed4aa442c..901c01353ae 100644
--- 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
index af0e3cff926..da177b4a8ac 100644
--- 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
index 54efc07fe53..5fdec02a9c5 100644
--- 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(