refactor: change old imports to new component

mxschll · mxschll · commit 764698dad7f3 · 2026-01-21T20:04:51.000+01:00
diff --git a/pages/calendar/simple.page.tsx b/pages/calendar/simple.page.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 
 import Calendar from '~components/calendar';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import i18nStrings from './i18n-strings';
 
diff --git a/pages/date-range-picker/month-calendar-permutations.page.tsx b/pages/date-range-picker/month-calendar-permutations.page.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import Box from '~components/box';
 import Calendar, { DateRangePickerCalendarProps } from '~components/date-range-picker/calendar';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import { PermutationsPage } from '../app/templates';
 import createPermutations from '../utils/permutations';
diff --git a/pages/date-range-picker/year-calendar-permutations.page.tsx b/pages/date-range-picker/year-calendar-permutations.page.tsx
@@ -5,7 +5,7 @@ import * as React from 'react';
 
 import Box from '~components/box';
 import Calendar, { DateRangePickerCalendarProps } from '~components/date-range-picker/calendar';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import { PermutationsPage } from '../app/templates';
 import createPermutations from '../utils/permutations';
diff --git a/pages/dropdown/common.tsx b/pages/dropdown/common.tsx
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 import Modal from '~components/modal';
 
 export function SampleDropdown({ id, children }: { id: string; children: React.ReactNode }) {
diff --git a/pages/dropdown/external-dropdown.page.tsx b/pages/dropdown/external-dropdown.page.tsx
@@ -0,0 +1,27 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import * as React from 'react';
+import { useState } from 'react';
+
+import Button from '~components/button';
+import Dropdown from '~components/dropdown';
+
+import ListContent from './list-content';
+
+export default function ExternalDropdownPage() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <article>
+      <h1>External Dropdown test</h1>
+      <p>Tests the external dropdown API with renamed props (content instead of children)</p>
+
+      <Dropdown
+        trigger={<Button onClick={() => setOpen(!open)}>Toggle dropdown</Button>}
+        open={open}
+        onDropdownClose={() => setOpen(false)}
+        content={<ListContent n={10} />}
+      />
+    </article>
+  );
+}
diff --git a/pages/dropdown/fixed-container.page.tsx b/pages/dropdown/fixed-container.page.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 import React, { useEffect, useState } from 'react';
 
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ScreenshotArea from '../utils/screenshot-area';
 import ListContent from './list-content';
diff --git a/pages/dropdown/focus-trap.page.tsx b/pages/dropdown/focus-trap.page.tsx
@@ -4,7 +4,7 @@ import React, { useContext } from 'react';
 import { useState } from 'react';
 
 import { Box, Button, SpaceBetween } from '~components';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import AppContext, { AppContextType } from '../app/app-context';
 
diff --git a/pages/dropdown/interior-fitting.page.tsx b/pages/dropdown/interior-fitting.page.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 
diff --git a/pages/dropdown/interior-stretch-height.page.tsx b/pages/dropdown/interior-stretch-height.page.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 
diff --git a/pages/dropdown/interior-with-wrapping.page.tsx b/pages/dropdown/interior-with-wrapping.page.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 
diff --git a/pages/dropdown/list-with-sticky-item.page.tsx b/pages/dropdown/list-with-sticky-item.page.tsx
@@ -4,7 +4,7 @@ import React, { useContext, useRef, useState } from 'react';
 
 import Box from '~components/box';
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 import { DropdownOption } from '~components/internal/components/option/interfaces';
 import PlainList from '~components/select/parts/plain-list';
 import VirtualList from '~components/select/parts/virtual-list';
diff --git a/pages/dropdown/min-width.page.tsx b/pages/dropdown/min-width.page.tsx
@@ -3,7 +3,7 @@
 import * as React from 'react';
 import { useState } from 'react';
 
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 
diff --git a/pages/dropdown/positioning.page.tsx b/pages/dropdown/positioning.page.tsx
@@ -3,7 +3,7 @@
 import React, { useState } from 'react';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 
diff --git a/pages/dropdown/prefer-center.page.tsx b/pages/dropdown/prefer-center.page.tsx
@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import clsx from 'clsx';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 
diff --git a/pages/dropdown/simple.page.tsx b/pages/dropdown/simple.page.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useState } from 'react';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 
 import ListContent from './list-content';
 
diff --git a/pages/options-list/simple.page.tsx b/pages/options-list/simple.page.tsx
@@ -4,7 +4,7 @@ import * as React from 'react';
 import { useCallback, useState } from 'react';
 
 import Button from '~components/button';
-import Dropdown from '~components/internal/components/dropdown';
+import Dropdown from '~components/dropdown/internal';
 import OptionsList from '~components/internal/components/options-list';
 
 interface ExtendedWindow extends Window {
diff --git a/src/autosuggest/__tests__/load-more-controller.test.ts b/src/autosuggest/__tests__/load-more-controller.test.ts
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { act, renderHook } from '../../__tests__/render-hook';
-import { OptionsLoadItemsDetail } from '../../internal/components/dropdown/interfaces';
+import { OptionsLoadItemsDetail } from '../../dropdown/interfaces';
 import { useAutosuggestLoadMore } from '../load-more-controller';
 
 describe('Autosuggest load-more-controller', () => {
diff --git a/src/autosuggest/interfaces.ts b/src/autosuggest/interfaces.ts
@@ -2,13 +2,9 @@
 // SPDX-License-Identifier: Apache-2.0
 import React from 'react';
 
+import { BaseDropdownHostProps, OptionsFilteringType, OptionsLoadItemsDetail } from '../dropdown/interfaces';
 import { BaseInputProps, InputAutoCorrect, InputClearLabel, InputKeyEvents, InputProps } from '../input/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
-import {
-  BaseDropdownHostProps,
-  OptionsFilteringType,
-  OptionsLoadItemsDetail,
-} from '../internal/components/dropdown/interfaces';
 import { DropdownStatusProps } from '../internal/components/dropdown-status';
 import { OptionDefinition, OptionGroup } from '../internal/components/option/interfaces';
 import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
diff --git a/src/autosuggest/internal.tsx b/src/autosuggest/internal.tsx
@@ -7,10 +7,10 @@ import clsx from 'clsx';
 import { useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
 import { useFormFieldContext } from '../contexts/form-field';
+import { OptionsLoadItemsDetail } from '../dropdown/interfaces';
 import { useInternalI18n } from '../i18n/context';
 import { BaseChangeDetail } from '../input/interfaces';
 import AutosuggestInput, { AutosuggestInputRef } from '../internal/components/autosuggest-input';
-import { OptionsLoadItemsDetail } from '../internal/components/dropdown/interfaces';
 import DropdownFooter from '../internal/components/dropdown-footer';
 import { useDropdownStatus } from '../internal/components/dropdown-status';
 import {
diff --git a/src/autosuggest/load-more-controller.ts b/src/autosuggest/load-more-controller.ts
@@ -3,7 +3,7 @@
 
 import { useRef } from 'react';
 
-import { OptionsLoadItemsDetail } from '../internal/components/dropdown/interfaces';
+import { OptionsLoadItemsDetail } from '../dropdown/interfaces';
 import { DropdownStatusProps } from '../internal/components/dropdown-status/interfaces';
 import { AutosuggestProps } from './interfaces';
 
diff --git a/src/button-dropdown/category-elements/expandable-category-element.tsx b/src/button-dropdown/category-elements/expandable-category-element.tsx
@@ -5,8 +5,8 @@ import clsx from 'clsx';
 
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
+import Dropdown from '../../dropdown/internal';
 import InternalIcon from '../../icon/internal';
-import Dropdown from '../../internal/components/dropdown';
 import useHiddenDescription from '../../internal/hooks/use-hidden-description';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import {
diff --git a/src/button-dropdown/interfaces.ts b/src/button-dropdown/interfaces.ts
@@ -5,9 +5,9 @@ import React from 'react';
 import { GeneratedAnalyticsMetadataFragment } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
 import { ButtonProps } from '../button/interfaces';
+import { ExpandToViewport } from '../dropdown/interfaces';
 import { IconProps } from '../icon/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
-import { ExpandToViewport } from '../internal/components/dropdown/interfaces';
 import { BaseNavigationDetail, CancelableEventHandler } from '../internal/events';
 import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
 /**
diff --git a/src/button-dropdown/internal.tsx b/src/button-dropdown/internal.tsx
@@ -9,9 +9,9 @@ import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-tool
 import InternalBox from '../box/internal';
 import { ButtonProps } from '../button/interfaces';
 import { InternalButton, InternalButtonProps } from '../button/internal';
+import Dropdown from '../dropdown/internal';
 import { useFunnel } from '../internal/analytics/hooks/use-funnel.js';
 import { getBaseProps } from '../internal/base-component';
-import Dropdown from '../internal/components/dropdown';
 import OptionsList from '../internal/components/options-list';
 import { useMobile } from '../internal/hooks/use-mobile';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode/index.js';
diff --git a/src/button-dropdown/item-element/index.tsx b/src/button-dropdown/item-element/index.tsx
@@ -8,8 +8,8 @@ import {
   getAnalyticsMetadataAttribute,
 } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
 
+import { useDropdownContext } from '../../dropdown/context';
 import InternalIcon, { InternalIconProps } from '../../icon/internal';
-import { useDropdownContext } from '../../internal/components/dropdown/context';
 import useHiddenDescription from '../../internal/hooks/use-hidden-description';
 import { useVisualRefresh } from '../../internal/hooks/use-visual-mode';
 import { GeneratedAnalyticsMetadataButtonDropdownClick } from '../analytics-metadata/interfaces';
diff --git a/src/date-picker/index.tsx b/src/date-picker/index.tsx
@@ -11,11 +11,11 @@ import { InternalButton } from '../button/internal';
 import InternalCalendar from '../calendar/internal';
 import { useFormFieldContext } from '../contexts/form-field.js';
 import InternalDateInput from '../date-input/internal';
+import Dropdown from '../dropdown/internal';
 import { useInternalI18n } from '../i18n/context.js';
 import { useLocale } from '../i18n/context.js';
 import { InputProps } from '../input/interfaces';
 import { getBaseProps } from '../internal/base-component';
-import Dropdown from '../internal/components/dropdown';
 import FocusLock from '../internal/components/focus-lock';
 import { fireNonCancelableEvent } from '../internal/events';
 import checkControlled from '../internal/hooks/check-controlled';
diff --git a/src/date-picker/interfaces.ts b/src/date-picker/interfaces.ts
@@ -2,8 +2,8 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { CalendarProps } from '../calendar/interfaces';
+import { ExpandToViewport } from '../dropdown/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
-import { ExpandToViewport } from '../internal/components/dropdown/interfaces';
 import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
 import { NonCancelableEventHandler } from '../internal/events';
 import { DateFormat, DateGranularity, EditableDateFormat } from '../internal/utils/date-time/interfaces';
diff --git a/src/date-range-picker/index.tsx b/src/date-range-picker/index.tsx
@@ -6,11 +6,11 @@ import clsx from 'clsx';
 
 import { useMergeRefs, useUniqueId, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
+import Dropdown from '../dropdown/internal';
 import { useInternalI18n } from '../i18n/context';
 import InternalIcon from '../icon/internal';
 import { getBaseProps } from '../internal/base-component';
 import ButtonTrigger from '../internal/components/button-trigger';
-import Dropdown from '../internal/components/dropdown';
 import { useFormFieldContext } from '../internal/context/form-field-context';
 import ResetContextsForModal from '../internal/context/reset-contexts-for-modal.js';
 import { fireNonCancelableEvent } from '../internal/events';
diff --git a/src/date-range-picker/interfaces.ts b/src/date-range-picker/interfaces.ts
@@ -3,8 +3,8 @@
 import React from 'react';
 
 import { CalendarProps } from '../calendar/interfaces';
+import { ExpandToViewport } from '../dropdown/interfaces';
 import { BaseComponentProps } from '../internal/base-component';
-import { ExpandToViewport } from '../internal/components/dropdown/interfaces';
 import { FormFieldValidationControlProps } from '../internal/context/form-field-context';
 import { NonCancelableEventHandler } from '../internal/events';
 import { DateFormat, EditableDateFormat } from '../internal/utils/date-time/interfaces';
diff --git a/src/dropdown/interfaces.ts b/src/dropdown/interfaces.ts
@@ -42,7 +42,7 @@ export interface BaseDropdownHostProps extends ExpandToViewport {
   onLoadItems?: NonCancelableEventHandler<OptionsLoadItemsDetail>;
 }
 
-export interface DropdownProps extends ExpandToViewport {
+export interface InternalDropdownProps extends ExpandToViewport {
   /**
    * Trigger element.
    */
@@ -157,6 +157,13 @@ export interface DropdownProps extends ExpandToViewport {
   ariaDescribedby?: string;
 }
 
+export interface DropdownProps extends Omit<InternalDropdownProps, 'interior' | 'children'> {
+  /**
+   * Dropdown content elements.
+   */
+  content?: React.ReactNode;
+}
+
 export interface ExpandToViewport {
   /**
    * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.
diff --git a/src/internal/components/dropdown/context.tsx b/src/internal/components/dropdown/context.tsx
@@ -1,22 +1,5 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext } from 'react';
 
-type Position = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
-
-const DropdownContext = React.createContext<{ position: Position }>({
-  position: 'bottom-right',
-});
-
-export interface DropdownContextProviderProps {
-  position?: Position;
-  children?: React.ReactNode;
-}
-
-export function DropdownContextProvider({ children, position = 'bottom-right' }: DropdownContextProviderProps) {
-  return <DropdownContext.Provider value={{ position }}>{children}</DropdownContext.Provider>;
-}
-
-export function useDropdownContext() {
-  return useContext(DropdownContext);
-}
+// Re-export from new location for backward compatibility
+export * from '../../../dropdown/context';
diff --git a/src/internal/components/dropdown/dropdown-fit-handler.ts b/src/internal/components/dropdown/dropdown-fit-handler.ts
diff --git a/src/internal/components/dropdown/dropdown-position.ts b/src/internal/components/dropdown/dropdown-position.ts
diff --git a/src/internal/components/dropdown/index.tsx b/src/internal/components/dropdown/index.tsx
diff --git a/src/internal/components/dropdown/interfaces.ts b/src/internal/components/dropdown/interfaces.ts
diff --git a/src/multiselect/internal.tsx b/src/multiselect/internal.tsx
diff --git a/src/property-filter/interfaces.ts b/src/property-filter/interfaces.ts
diff --git a/src/property-filter/property-filter-autosuggest.tsx b/src/property-filter/property-filter-autosuggest.tsx
diff --git a/src/select/interfaces.ts b/src/select/interfaces.ts
diff --git a/src/select/internal.tsx b/src/select/internal.tsx
diff --git a/src/select/utils/use-select.ts b/src/select/utils/use-select.ts
