From e95444c07084d500dcbf5bd4d71a2d0684960506 Mon Sep 17 00:00:00 2001 From: Zach Gianos Date: Sat, 3 Aug 2024 23:18:30 -0700 Subject: [PATCH 1/2] fix(TableSelectRow): import useId from internal polyfill --- packages/react/src/components/DataTable/TableSelectRow.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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'; From eb5c4372b8cb7bcf82404ac7587b707f98b25bc9 Mon Sep 17 00:00:00 2001 From: Zach Gianos Date: Sat, 3 Aug 2024 23:19:50 -0700 Subject: [PATCH 2/2] fix(TableToolbarSearch): pass prefix to useId to avoid null --- .../react/src/components/DataTable/TableToolbarSearch.tsx | 8 ++------ 1 file changed, 2 insertions(+), 6 deletions(-) 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}