react: fix usage of useId (#17098)

* fix(TableSelectRow): import useId from internal polyfill * fix(TableToolbarSearch): pass prefix to useId to avoid null --------- Co-authored-by: Taylor Jones <tay1orjones@users.noreply.github.com>
carbon-design-system · Aug 5, 2024 · e963ee5 · e963ee5
1 parent aa7b805
commit e963ee5
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 7 deletions.
diff --git a/packages/react/src/components/DataTable/TableSelectRow.tsx b/packages/react/src/components/DataTable/TableSelectRow.tsx
@@ -6,10 +6,11 @@
  */
 
 import PropTypes from 'prop-types';
-import React, { useId } from 'react';
+import React from 'react';
 import classNames from 'classnames';
 import InlineCheckbox from '../InlineCheckbox';
 import RadioButton from '../RadioButton';
+import { useId } from '../../internal/useId';
 import { usePrefix } from '../../internal/usePrefix';
 import deprecate from '../../prop-types/deprecate';
 

diff --git a/packages/react/src/components/DataTable/TableToolbarSearch.tsx b/packages/react/src/components/DataTable/TableToolbarSearch.tsx
@@ -150,7 +150,7 @@ const TableToolbarSearch = ({
 
   const expanded = controlled ? expandedProp : expandedState;
   const [value, setValue] = useState(defaultValue || '');
-  const uniqueId = useId();
+  const uniqueId = useId('table-toolbar-search');
   const [focusTarget, setFocusTarget] = useState<RefObject<HTMLElement> | null>(
     null
   );
@@ -213,11 +213,7 @@ const TableToolbarSearch = ({
       disabled={disabled}
       className={searchClasses}
       value={value}
-      id={
-        typeof id !== 'undefined'
-          ? id
-          : `table-toolbar-search-${uniqueId.toString()}`
-      }
+      id={typeof id !== 'undefined' ? id : uniqueId}
       labelText={labelText || t('carbon.table.toolbar.search.label')}
       placeholder={placeholder || t('carbon.table.toolbar.search.placeholder')}
       onChange={onChange}