diff --git a/packages/react/src/components/DataTable/TableSelectRow.tsx b/packages/react/src/components/DataTable/TableSelectRow.tsx index 9ca071127c9d..7aac53933f2b 100644 --- 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 index ab990addd4be..19e08e809b84 100644 --- 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 | 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}