chore: Using unique id from toolkit (#3580)

Author: pan-kot

src/alert/index.tsx

@@ -2,14 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect } from 'react';
 
+import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { FunnelMetrics } from '../internal/analytics';
 import { useFunnel, useFunnelStep, useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 import { getSubStepAllSelector, getTextFromSelector } from '../internal/analytics/selectors';
 import { BasePropsWithAnalyticsMetadata, getAnalyticsMetadataProps } from '../internal/base-component';
 import useBaseComponent from '../internal/hooks/use-base-component';
-import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { GeneratedAnalyticsMetadataAlertComponent } from './analytics-metadata/interfaces';
 import { AlertProps } from './interfaces';

src/annotation-context/annotation/annotation-popover.tsx

@@ -3,11 +3,12 @@
 import React, { useEffect } from 'react';
 import clsx from 'clsx';
 
+import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+
 import InternalAlert from '../../alert/internal';
 import InternalBox from '../../box/internal';
 import { InternalButton } from '../../button/internal';
 import { HotspotProps } from '../../hotspot/interfaces';
-import { useUniqueId } from '../../internal/hooks/use-unique-id/index.js';
 import { scrollElementIntoView } from '../../internal/utils/scrollable-containers';
 import { joinStrings } from '../../internal/utils/strings/join-strings.js';
 import PopoverBody from '../../popover/body';

src/app-layout/__tests__/widget-contract-split-panel.test.tsx

@@ -38,9 +38,10 @@ function createWidgetizedComponentMock(Implementation: React.ComponentType) {
 jest.mock('../../../lib/components/internal/widgets', () => ({
   createWidgetizedComponent: createWidgetizedComponentMock,
 }));
-jest.mock('../../../lib/components/internal/hooks/use-unique-id', () => {
+jest.mock('@cloudscape-design/component-toolkit/internal', () => {
   let counter = 0;
   return {
+    ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
     useUniqueId: (prefix: string) => `${prefix}${++counter}`,
     useRandomId: (prefix: string) => `${prefix}${++counter}`,
   };

src/app-layout/__tests__/widget-contract.test.tsx

@@ -19,9 +19,10 @@ function createWidgetizedComponentMock(Implementation: React.ComponentType) {
 jest.mock('../../../lib/components/internal/widgets', () => ({
   createWidgetizedComponent: createWidgetizedComponentMock,
 }));
-jest.mock('../../../lib/components/internal/hooks/use-unique-id', () => {
+jest.mock('@cloudscape-design/component-toolkit/internal', () => {
   let counter = 0;
   return {
+    ...jest.requireActual('@cloudscape-design/component-toolkit/internal'),
     useUniqueId: (prefix: string) => `${prefix}${++counter}`,
   };
 });

src/app-layout/visual-refresh-toolbar/index.tsx

@@ -2,15 +2,14 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useImperativeHandle, useLayoutEffect, useRef, useState } from 'react';
 
-import { useMergeRefs, useStableCallback } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 
 import ScreenreaderOnly from '../../internal/components/screenreader-only';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 import { fireNonCancelableEvent } from '../../internal/events';
 import { useControllable } from '../../internal/hooks/use-controllable';
 import { useIntersectionObserver } from '../../internal/hooks/use-intersection-observer';
 import { useMobile } from '../../internal/hooks/use-mobile';
-import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { useGetGlobalBreadcrumbs } from '../../internal/plugins/helpers/use-global-breadcrumbs';
 import globalVars from '../../internal/styles/global-vars';
 import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';

src/app-layout/visual-refresh/context.tsx

@@ -11,15 +11,14 @@ import React, {
   useState,
 } from 'react';
 
-import { useStableCallback } from '@cloudscape-design/component-toolkit/internal';
+import { useStableCallback, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getOffsetInlineStart } from '@cloudscape-design/component-toolkit/internal';
 
 import { DynamicOverlapContext } from '../../internal/context/dynamic-overlap-context';
 import { SplitPanelSideToggleProps } from '../../internal/context/split-panel-context';
 import { fireNonCancelableEvent } from '../../internal/events';
 import { useControllable } from '../../internal/hooks/use-controllable';
 import { useMobile } from '../../internal/hooks/use-mobile';
-import { useUniqueId } from '../../internal/hooks/use-unique-id';
 import { getSplitPanelDefaultSize } from '../../split-panel/utils/size-utils';
 import { AppLayoutProps, AppLayoutPropsWithDefaults } from '../interfaces';
 import { SPLIT_PANEL_MIN_WIDTH } from '../split-panel';

src/area-chart/elements/data-series.tsx

@@ -3,7 +3,8 @@
 import React, { memo } from 'react';
 import clsx from 'clsx';
 
-import { useUniqueId } from '../../internal/hooks/use-unique-id';
+import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+
 import { useSelector } from '../async-store';
 import { AreaChartProps } from '../interfaces';
 import { ChartModel } from '../model';

src/attribute-editor/internal.tsx

@@ -3,7 +3,7 @@
 import React, { useImperativeHandle, useRef, useState } from 'react';
 import clsx from 'clsx';
 
-import { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';
+import { useMergeRefs, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 
 import { ButtonProps } from '../button/interfaces';
 import { InternalButton } from '../button/internal';
@@ -12,7 +12,6 @@ import { matchBreakpointMapping } from '../internal/breakpoints';
 import { useContainerBreakpoints } from '../internal/hooks/container-queries';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 import { usePrevious } from '../internal/hooks/use-previous';
-import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { SomeRequired } from '../internal/types';
 import InternalLiveRegion from '../live-region/internal';
 import { AdditionalInfo } from './additional-info';

src/attribute-editor/row.tsx

@@ -3,13 +3,14 @@
 import React, { useCallback } from 'react';
 import clsx from 'clsx';
 
+import { useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+
 import { ButtonProps } from '../button/interfaces';
 import { InternalButton } from '../button/internal';
 import InternalFormField from '../form-field/internal';
 import { useInternalI18n } from '../i18n/context';
 import { Breakpoint } from '../internal/breakpoints';
 import { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';
-import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { AttributeEditorProps } from './interfaces';
 import { getItemGridColumns, getRemoveButtonGridColumns, isRemoveButtonOnSameLine } from './utils';
 

src/autosuggest/internal.tsx

@@ -4,7 +4,7 @@
 import React, { Ref, useImperativeHandle, useRef } from 'react';
 import clsx from 'clsx';
 
-import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
+import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { useFormFieldContext } from '../contexts/form-field';
 import { useInternalI18n } from '../i18n/context';
@@ -21,7 +21,6 @@ import {
 } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
-import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { checkOptionValueField } from '../select/utils/check-option-value-field';
 import { AutosuggestItem, AutosuggestProps } from './interfaces';
 import { useAutosuggestLoadMore } from './load-more-controller';