@cloudscape-design/components-themeable 3.0.1258 → 3.0.1260

package/lib/internal/template/{internal/components/dropdown → dropdown}/interfaces.d.ts

@@ -1,6 +1,28 @@
 import React from 'react';
-import { NonCancelableEventHandler } from '../../events';
+import { NonCancelableEventHandler } from '../internal/events';
 export type OptionsFilteringType = 'none' | 'auto' | 'manual';
+export declare namespace DropdownProps {
+    interface Style {
+        dropdown?: {
+            /**
+             * Background color of the dropdown content wrapper.
+             */
+            background?: string;
+            /**
+             * Border color of the dropdown content wrapper.
+             */
+            borderColor?: string;
+            /**
+             * Border radius of the dropdown content wrapper.
+             */
+            borderRadius?: string;
+            /**
+             * Border width of the dropdown content wrapper.
+             */
+            borderWidth?: string;
+        };
+    }
+}
 /**
  * Alignment of the dropdown relative to its trigger.
  */
@@ -47,7 +69,7 @@ export interface BaseDropdownHostProps extends ExpandToViewport {
 }
 export interface DropdownProps extends ExpandToViewport {
     /**
-     * Trigger element.
+     * The trigger element that opens/closes the dropdown.
      */
     trigger: React.ReactNode;
     /**
@@ -62,99 +84,54 @@ export interface DropdownProps extends ExpandToViewport {
      */
     triggerId?: string;
     /**
-     * "Sticky" header of the dropdown content
+     * Optional header content that stays fixed at the top while
+     * scrolling dropdown content.
      */
     header?: React.ReactNode;
     /**
-     * Footer slot fixed at the bottom of the dropdown
+     * Optional footer content that stays fixed at the bottom while
+     * scrolling dropdown content.
+     * Typically used to display loading status or action buttons.
      */
     footer?: React.ReactNode;
     /**
-     * Dropdown content elements.
+     * Main content of the dropdown.
      */
     content?: React.ReactNode;
-    /**
-     * Updating content key triggers dropdown position re-evaluation.
-     */
-    contentKey?: string;
     /**
      * Open state of the dropdown.
      */
     open?: boolean;
     /**
-     * Called when the user clicks outside the dropdown and trigger.
-     * The dropdown does not close automatically - the parent component
-     * must update the `open` prop to close the dropdown.
+     * Called when the user clicks outside the dropdown. The dropdown does not
+     * close automatically - the `open` prop needs to be updated to actually close
+     * the dropdown.
      */
     onOutsideClick?: NonCancelableEventHandler<null>;
     /**
-     * Called when a mouse button is pressed inside the dropdown content.
-     */
-    onMouseDown?: React.MouseEventHandler;
-    /**
-     * Dropdown id
-     */
-    dropdownId?: string;
-    /**
-     * Stretches dropdown to occupy entire height.
-     */
-    stretchHeight?: boolean;
-    /**
-     * Stretches the trigger to the height of the dropdown container.
+     * Minimum width for the dropdown in pixels. If no value is specified, the
+     * dropdown will shrink to fit its content.
      */
-    stretchTriggerHeight?: boolean;
+    minWidth?: number;
     /**
-     * Minimum width constraint for the dropdown.
-     * - Number: minimum width in pixels
-     * - 'trigger': dropdown will be at least as wide as the trigger
-     * - undefined: no minimum constraint (fits content)
+     * Maximum width for the dropdown in pixels. If no value is specified, the
+     * dropdown will expand to fit its content.
      */
-    minWidth?: DropdownWidthConstraint;
-    /**
-     * Maximum width constraint for the dropdown.
-     * - Number: maximum width in pixels
-     * - 'trigger': dropdown cannot exceed the trigger width
-     * - undefined: fit to content width (no max constraint)
-     */
-    maxWidth?: DropdownWidthConstraint;
+    maxWidth?: number;
     /**
      * Maximum height constraint for the dropdown content in pixels.
      * When set, constrains the calculated height to not exceed this value.
      */
     maxHeight?: number;
     /**
-     * Preferred alignment of the dropdown relative to its trigger.
-     * The dropdown will attempt this alignment first, but will automatically
-     * adjust if there's insufficient space on the preferred side.
-     */
-    preferredAlignment?: DropdownAlignment;
-    /**
-     * Hides the block (top/bottom) borders of the dropdown content wrapper.
-     */
-    hideBlockBorder?: boolean;
-    /**
-     * Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out).
-     */
-    interior?: boolean;
-    /**
-     * Whether the dropdown will have a scrollbar or not
-     */
-    scrollable?: boolean;
-    /**
-     * Whether the dropdown will have a focus loop including trigger, header, content and footer.
-     */
-    loopFocus?: boolean;
-    /**
-     * Called when focus enters the trigger or dropdown content.
-     */
-    onFocus?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
-    /**
-     * Called when focus leaves the trigger or dropdown content.
+     * Called when the user presses the Escape key while the dropdown is open.
+     * The dropdown does not close automatically - the `open` prop needs to be
+     * updated to actually close the dropdown.
      */
-    onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
+    onEscape?: NonCancelableEventHandler;
     /**
-     * Called when focus enters the dropdown content from outside.
-     * This fires only once when focus moves into the dropdown, not when moving between elements within it.
+     * Called when any element inside the dropdown content gains focus.
+     * This includes nested interactive elements like buttons, links, or inputs.
      */
     onFocusEnter?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
     /**
@@ -162,31 +139,26 @@ export interface DropdownProps extends ExpandToViewport {
      */
     onFocusLeave?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
     /**
-     * Called when the user presses the Escape key while the dropdown is open.
-     * The dropdown does not close automatically - the parent component
-     * must update the `open` prop to close the dropdown.
-     */
-    onEscape?: NonCancelableEventHandler;
-    /**
-     * ID for the dropdown content wrapper
-     */
-    dropdownContentId?: string;
-    /**
-     * HTML role for the dropdown content wrapper
+     * Adds `role` to the dropdown content element.
      */
     ariaRole?: string;
     /**
-     * Aria label for the dropdown content wrapper
+     * Adds `aria-label` to the dropdown content element.
      */
     ariaLabel?: string;
     /**
-     * Labelledby for the dropdown (required when role="dialog")
+     * Adds `aria-labelledby` to the dropdown content element.
      */
     ariaLabelledby?: string;
     /**
-     * Describedby for the dropdown (recommended when role="dialog")
+     * Adds `aria-describedby` to the dropdown content element.
      */
     ariaDescribedby?: string;
+    /**
+     * An object containing CSS properties to customize the dropdown's visual appearance.
+     * @awsuiSystem core
+     */
+    style?: DropdownProps.Style;
 }
 export interface ExpandToViewport {
     /**

package/lib/internal/template/dropdown/interfaces.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../src/dropdown/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAE/D,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9D,yBAAiB,aAAa,CAAC;IAC7B,UAAiB,KAAK;QACpB,QAAQ,CAAC,EAAE;YACT;;eAEG;YACH,UAAU,CAAC,EAAE,MAAM,CAAC;YACpB;;eAEG;YACH,WAAW,CAAC,EAAE,MAAM,CAAC;YACrB;;eAEG;YACH,YAAY,CAAC,EAAE,MAAM,CAAC;YACtB;;eAEG;YACH,WAAW,CAAC,EAAE,MAAM,CAAC;SACtB,CAAC;KACH;CACF;AAED;;GAEG;AACH,MAAM,MAAM,iBAAiB,GACzB,OAAO,GACP,QAAQ,CAAC;AAEb;;;;GAIG;AACH,MAAM,MAAM,uBAAuB,GAAG,SAAS,GAAG,MAAM,CAAC;AAEzD,MAAM,WAAW,sBAAsB;IACrC,aAAa,EAAE,MAAM,CAAC;IACtB,SAAS,EAAE,OAAO,CAAC;IACnB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAED,MAAM,WAAW,qBAAsB,SAAQ,gBAAgB;IAC7D;;;;;;;;;;OAUG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;;;;;;;;;QAaI;IACJ,WAAW,CAAC,EAAE,yBAAyB,CAAC,sBAAsB,CAAC,CAAC;CACjE;AAED,MAAM,WAAW,aAAc,SAAQ,gBAAgB;IACrD;;OAEG;IACH,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;OAIG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAE1C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;;;OAIG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf;;;;OAIG;IACH,cAAc,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;IAEjD;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,yBAAyB,CAAC;IAErC;;;OAGG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAE7F;;OAEG;IACH,YAAY,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAE7F;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;OAEG;IACH,cAAc,CAAC,EAAE,MAAM,CAAC;IAExB;;OAEG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;;OAGG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC,KAAK,CAAC;CAC7B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}

package/lib/internal/template/dropdown/interfaces.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../src/dropdown/interfaces.ts"],"names":[],"mappings":"","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\n\nimport { NonCancelableEventHandler } from '../internal/events';\n\nexport type OptionsFilteringType = 'none' | 'auto' | 'manual';\n\nexport namespace DropdownProps {\n  export interface Style {\n    dropdown?: {\n      /**\n       * Background color of the dropdown content wrapper.\n       */\n      background?: string;\n      /**\n       * Border color of the dropdown content wrapper.\n       */\n      borderColor?: string;\n      /**\n       * Border radius of the dropdown content wrapper.\n       */\n      borderRadius?: string;\n      /**\n       * Border width of the dropdown content wrapper.\n       */\n      borderWidth?: string;\n    };\n  }\n}\n\n/**\n * Alignment of the dropdown relative to its trigger.\n */\nexport type DropdownAlignment =\n  | 'start' // Aligns to the start edge of trigger (default)\n  | 'center'; // Centers dropdown on trigger\n\n/**\n * Width constraint for the dropdown.\n * - 'trigger': references the trigger element's width\n * - number: width in pixels\n */\nexport type DropdownWidthConstraint = 'trigger' | number;\n\nexport interface OptionsLoadItemsDetail {\n  filteringText: string;\n  firstPage: boolean;\n  samePage: boolean;\n}\n\nexport interface BaseDropdownHostProps extends ExpandToViewport {\n  /**\n   * If you have more than 500 options, enable this flag to apply a performance optimization\n   * that makes the filtering experience smoother. We don't recommend enabling the feature if you\n   * have less than 500 options, because the improvements to performance are offset by a\n   * visible scrolling lag.\n   *\n   * When you set this flag to `true`, it removes options that are not currently in view from the DOM.\n   * If your test accesses such options, you need to first scroll the options container\n   * to the correct offset, before performing any operations on them. Use the element returned\n   * by the `findOptionsContainer` test utility for this.\n   */\n  virtualScroll?: boolean;\n\n  /**\n   * Use this event to implement the asynchronous behavior for the component.\n   *\n   * The event is called in the following situations:\n   * * The user scrolls to the end of the list of options, if `statusType` is set to `pending`.\n   * * The user clicks on the recovery button in the error state.\n   * * The user types inside the input field.\n   * * The user focuses the input field.\n   *\n   * The detail object contains the following properties:\n   * * `filteringText` - The value that you need to use to fetch options.\n   * * `firstPage` - Indicates that you should fetch the first page of options that match the `filteringText`.\n   * * `samePage` - Indicates that you should fetch the same page that you have previously fetched (for example, when the user clicks on the recovery button).\n   **/\n  onLoadItems?: NonCancelableEventHandler<OptionsLoadItemsDetail>;\n}\n\nexport interface DropdownProps extends ExpandToViewport {\n  /**\n   * The trigger element that opens/closes the dropdown.\n   */\n  trigger: React.ReactNode;\n\n  /**\n   * Optional ref to an external element used for positioning calculations.\n   * When provided, the `trigger` prop is not rendered and this ref's element\n   * is used as the positioning anchor for the dropdown instead.\n   */\n  triggerRef?: React.RefObject<HTMLElement>;\n\n  /**\n   * Explicit ID for the trigger element, used as the referrer ID for portal mode.\n   * Use this when `triggerRef` is provided.\n   */\n  triggerId?: string;\n\n  /**\n   * Optional header content that stays fixed at the top while\n   * scrolling dropdown content.\n   */\n  header?: React.ReactNode;\n\n  /**\n   * Optional footer content that stays fixed at the bottom while\n   * scrolling dropdown content.\n   * Typically used to display loading status or action buttons.\n   */\n  footer?: React.ReactNode;\n\n  /**\n   * Main content of the dropdown.\n   */\n  content?: React.ReactNode;\n\n  /**\n   * Open state of the dropdown.\n   */\n  open?: boolean;\n\n  /**\n   * Called when the user clicks outside the dropdown. The dropdown does not\n   * close automatically - the `open` prop needs to be updated to actually close\n   * the dropdown.\n   */\n  onOutsideClick?: NonCancelableEventHandler<null>;\n\n  /**\n   * Minimum width for the dropdown in pixels. If no value is specified, the\n   * dropdown will shrink to fit its content.\n   */\n  minWidth?: number;\n\n  /**\n   * Maximum width for the dropdown in pixels. If no value is specified, the\n   * dropdown will expand to fit its content.\n   */\n  maxWidth?: number;\n\n  /**\n   * Maximum height constraint for the dropdown content in pixels.\n   * When set, constrains the calculated height to not exceed this value.\n   */\n  maxHeight?: number;\n\n  /**\n   * Called when the user presses the Escape key while the dropdown is open.\n   * The dropdown does not close automatically - the `open` prop needs to be\n   * updated to actually close the dropdown.\n   */\n  onEscape?: NonCancelableEventHandler;\n\n  /**\n   * Called when any element inside the dropdown content gains focus.\n   * This includes nested interactive elements like buttons, links, or inputs.\n   */\n  onFocusEnter?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n\n  /**\n   * Called when focus leaves the dropdown content entirely.\n   */\n  onFocusLeave?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n\n  /**\n   * Adds `role` to the dropdown content element.\n   */\n  ariaRole?: string;\n\n  /**\n   * Adds `aria-label` to the dropdown content element.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Adds `aria-labelledby` to the dropdown content element.\n   */\n  ariaLabelledby?: string;\n\n  /**\n   * Adds `aria-describedby` to the dropdown content element.\n   */\n  ariaDescribedby?: string;\n\n  /**\n   * An object containing CSS properties to customize the dropdown's visual appearance.\n   * @awsuiSystem core\n   */\n  style?: DropdownProps.Style;\n}\n\nexport interface ExpandToViewport {\n  /**\n   * By default, the dropdown height is constrained to fit inside the height of its next scrollable container element.\n   * Enabling this property will allow the dropdown to extend beyond that container by using fixed positioning and\n   * [React Portals](https://reactjs.org/docs/portals.html).\n   *\n   * Set this property if the dropdown would otherwise be constrained by a scrollable container,\n   * for example inside table and split view layouts.\n   *\n   * We recommend you use discretion, and don't enable this property unless necessary\n   * because fixed positioning results in a slight, visible lag when scrolling complex pages.\n   */\n  expandToViewport?: boolean;\n}\n"]}

package/lib/internal/template/dropdown/internal.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+import { NonCancelableEventHandler } from '../internal/events';
+import { InternalBaseComponentProps } from '../internal/hooks/use-base-component';
+import { DropdownAlignment, DropdownProps, DropdownWidthConstraint } from './interfaces';
+export interface InternalDropdownProps extends Omit<DropdownProps, 'minWidth' | 'maxWidth'>, InternalBaseComponentProps {
+    onMouseDown?: React.MouseEventHandler;
+    contentKey?: string;
+    dropdownId?: string;
+    dropdownContentId?: string;
+    stretchHeight?: boolean;
+    stretchTriggerHeight?: boolean;
+    interior?: boolean;
+    scrollable?: boolean;
+    loopFocus?: boolean;
+    minWidth?: DropdownWidthConstraint;
+    maxWidth?: DropdownWidthConstraint;
+    preferredAlignment?: DropdownAlignment;
+    hideBlockBorder?: boolean;
+    onFocus?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
+    onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
+}
+declare const InternalDropdown: ({ content, trigger, triggerRef: externalTriggerRef, triggerId: externalTriggerId, open, onOutsideClick, onMouseDown, header, footer, dropdownId, stretchTriggerHeight, stretchHeight, minWidth, maxWidth, maxHeight, hideBlockBorder, expandToViewport, preferredAlignment, interior, scrollable, loopFocus, onFocus, onBlur, onFocusEnter, onFocusLeave, onEscape, contentKey, dropdownContentId, ariaRole, ariaLabel, ariaLabelledby, ariaDescribedby, style, __internalRootRef, ...restProps }: InternalDropdownProps) => JSX.Element;
+export default InternalDropdown;
+//# sourceMappingURL=internal.d.ts.map

package/lib/internal/template/dropdown/internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/dropdown/internal.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAuD,MAAM,OAAO,CAAC;AAW5E,OAAO,EAA0B,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEvF,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAalF,OAAO,EAAE,iBAAiB,EAAE,aAAa,EAAE,uBAAuB,EAAE,MAAM,cAAc,CAAC;AAGzF,MAAM,WAAW,qBACf,SAAQ,IAAI,CAAC,aAAa,EAAE,UAAU,GAAG,UAAU,CAAC,EAClD,0BAA0B;IAC5B,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACtC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IACnC,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;IACvC,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,OAAO,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IACxF,MAAM,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;CACxF;AAmJD,QAAA,MAAM,gBAAgB,GAAI,meAoCvB,qBAAqB,gBA8XvB,CAAC;AAMF,eAAe,gBAAgB,CAAC"}

package/lib/internal/template/{internal/components/dropdown/index.js → dropdown/internal.js}

@@ -5,19 +5,22 @@ import { createPortal } from 'react-dom';
 import clsx from 'clsx';
 import { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
-import { fireNonCancelableEvent } from '../../events';
-import customCssProps from '../../generated/custom-css-properties';
-import { useMobile } from '../../hooks/use-mobile';
-import { usePortalModeClasses } from '../../hooks/use-portal-mode-classes';
-import { useVisualRefresh } from '../../hooks/use-visual-mode';
-import { nodeBelongs } from '../../utils/node-belongs';
-import { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';
-import TabTrap from '../tab-trap/index.js';
-import { Transition } from '../transition';
+import { getBaseProps } from '../internal/base-component';
+import { getFirstFocusable, getLastFocusable } from '../internal/components/focus-lock/utils.js';
+import TabTrap from '../internal/components/tab-trap/index.js';
+import { Transition } from '../internal/components/transition';
+import { fireNonCancelableEvent } from '../internal/events';
+import customCssProps from '../internal/generated/custom-css-properties';
+import { useMobile } from '../internal/hooks/use-mobile';
+import { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';
+import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
+import { nodeBelongs } from '../internal/utils/node-belongs';
 import { DropdownContextProvider } from './context';
 import { calculatePosition, hasEnoughSpaceForFlexibleWidth, } from './dropdown-fit-handler';
 import { applyDropdownPositionRelativeToViewport } from './dropdown-position';
+import { getDropdownStyles } from './style';
 import styles from './styles.css.js';
+import testUtilStyles from './test-classes/styles.css.js';
 const DropdownContainer = ({ triggerRef, children, renderWithPortal, id, referrerId, open, }) => {
     var _a, _b;
     if (!renderWithPortal) {
@@ -29,7 +32,7 @@ const DropdownContainer = ({ triggerRef, children, renderWithPortal, id, referre
     const currentDocument = (_b = (_a = triggerRef.current) === null || _a === void 0 ? void 0 : _a.ownerDocument) !== null && _b !== void 0 ? _b : document;
     return createPortal(React.createElement("div", { id: id, "data-awsui-referrer-id": referrerId }, children), currentDocument.body);
 };
-const TransitionContent = ({ state, transitionRef, dropdownClasses, matchTriggerWidth, hideBlockBorder, interior, isRefresh, dropdownRef, verticalContainerRef, expandToViewport, minWidth, maxWidth, header, content, footer, position, open, onMouseDown, onFocusEnter, onFocusLeave, id, ariaRole, ariaLabel, ariaLabelledby, ariaDescribedby, }) => {
+const TransitionContent = ({ state, transitionRef, dropdownClasses, matchTriggerWidth, hideBlockBorder, interior, isRefresh, dropdownRef, verticalContainerRef, expandToViewport, minWidth, maxWidth, header, content, footer, position, open, onMouseDown, onFocusEnter, onFocusLeave, id, ariaRole, ariaLabel, ariaLabelledby, ariaDescribedby, dropdownStyle, }) => {
     const contentRef = useMergeRefs(dropdownRef, transitionRef);
     const dropdownStyles = {};
     if (minWidth) {
@@ -47,15 +50,17 @@ const TransitionContent = ({ state, transitionRef, dropdownClasses, matchTrigger
             [styles['use-portal']]: expandToViewport && !interior,
             [styles['use-flexible-width']]: !matchTriggerWidth && !interior,
         }), ref: contentRef, id: id, role: ariaRole, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-open": open, "data-animating": state !== 'exited', "aria-hidden": !open, style: dropdownStyles, onMouseDown: onMouseDown, onFocus: onFocusEnter, onBlur: onFocusLeave },
-        React.createElement("div", { className: clsx(styles['dropdown-content-wrapper'], !header && !content && styles['is-empty'], isRefresh && styles.refresh) },
+        React.createElement("div", { className: clsx(styles['dropdown-content-wrapper'], !header && !content && styles['is-empty'], isRefresh && styles.refresh), style: dropdownStyle },
             React.createElement("div", { ref: verticalContainerRef, className: styles['dropdown-content'] },
                 React.createElement(DropdownContextProvider, { position: position },
-                    header,
+                    header && React.createElement("div", { className: testUtilStyles.header }, header),
                     content,
-                    footer)))));
+                    footer && React.createElement("div", { className: testUtilStyles.footer }, footer))))));
 };
-const Dropdown = ({ content, trigger, triggerRef: externalTriggerRef, triggerId: externalTriggerId, open, onOutsideClick, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false, stretchHeight = false, minWidth, maxWidth, maxHeight, hideBlockBorder = true, expandToViewport = false, preferredAlignment = 'start', interior = false, scrollable = true, loopFocus = expandToViewport, onFocus, onBlur, onFocusEnter, onFocusLeave, onEscape, contentKey, dropdownContentId, ariaRole, ariaLabel, ariaLabelledby, ariaDescribedby, }) => {
+const InternalDropdown = ({ content, trigger, triggerRef: externalTriggerRef, triggerId: externalTriggerId, open, onOutsideClick, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false, stretchHeight = false, minWidth, maxWidth, maxHeight, hideBlockBorder = true, expandToViewport = false, preferredAlignment = 'start', interior = false, scrollable = true, loopFocus = expandToViewport, onFocus, onBlur, onFocusEnter, onFocusLeave, onEscape, contentKey, dropdownContentId, ariaRole, ariaLabel, ariaLabelledby, ariaDescribedby, style, __internalRootRef, ...restProps }) => {
+    const baseProps = getBaseProps(restProps);
     const wrapperRef = useRef(null);
+    const mergedRef = useMergeRefs(wrapperRef, __internalRootRef);
     const internalTriggerRef = useRef(null);
     const dropdownRef = useRef(null);
     const dropdownContainerRef = useRef(null);
@@ -216,7 +221,10 @@ const Dropdown = ({ content, trigger, triggerRef: externalTriggerRef, triggerId:
             // Since the listener is registered on the window, `event.target` will incorrectly point at the
             // shadow root if the component is rendered inside shadow DOM.
             const target = event.composedPath ? event.composedPath()[0] : event.target;
-            if (!nodeBelongs(dropdownRef.current, target) && !nodeBelongs(triggerRef.current, target)) {
+            // For internal triggers, the wrapper div itself counts as outside — only its children are the trigger.
+            // For external triggers, the ref is the trigger element directly, so it counts as inside.
+            const isOutsideTrigger = !nodeBelongs(triggerRef.current, target) || (!externalTriggerRef && target === triggerRef.current);
+            if (!nodeBelongs(dropdownRef.current, target) && isOutsideTrigger) {
                 fireNonCancelableEvent(onOutsideClick);
             }
         };
@@ -224,7 +232,7 @@ const Dropdown = ({ content, trigger, triggerRef: externalTriggerRef, triggerId:
         return () => {
             window.removeEventListener('click', clickListener, true);
         };
-    }, [open, onOutsideClick, triggerRef]);
+    }, [open, onOutsideClick, triggerRef, externalTriggerRef]);
     // subscribe to Escape key press
     useEffect(() => {
         // Only add the listener if onEscape callback is provided
@@ -290,15 +298,15 @@ const Dropdown = ({ content, trigger, triggerRef: externalTriggerRef, triggerId:
         // 'trigger' maps to 100% (relative to parent)
         return '100%';
     };
-    return (React.createElement("div", { className: clsx(styles.root, interior && styles.interior, stretchTriggerHeight && styles['stretch-trigger-height']), ref: wrapperRef, onFocus: focusHandler, onBlur: blurHandler },
-        !externalTriggerRef && (React.createElement("div", { id: referrerId, className: clsx(stretchTriggerHeight && styles['stretch-trigger-height']), ref: internalTriggerRef }, trigger)),
+    return (React.createElement("div", { ...baseProps, className: clsx(styles.root, interior && styles.interior, stretchTriggerHeight && styles['stretch-trigger-height'], baseProps.className), ref: mergedRef, onFocus: focusHandler, onBlur: blurHandler },
+        !externalTriggerRef && (React.createElement("div", { id: referrerId, className: clsx(stretchTriggerHeight && styles['stretch-trigger-height'], testUtilStyles.trigger), ref: internalTriggerRef }, trigger)),
         React.createElement(TabTrap, { focusNextCallback: () => { var _a; return dropdownRef.current && ((_a = getFirstFocusable(dropdownRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
         React.createElement(DropdownContainer, { triggerRef: triggerRef, renderWithPortal: expandToViewport && !interior, id: dropdownId, referrerId: referrerId, open: open },
             React.createElement(Transition, { in: open !== null && open !== void 0 ? open : false, exit: false }, (state, ref) => (React.createElement("div", { ref: dropdownContainerRef },
                 React.createElement(TabTrap, { focusNextCallback: () => { var _a; return triggerRef.current && ((_a = getLastFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus }),
-                React.createElement(TransitionContent, { state: state, transitionRef: ref, dropdownClasses: dropdownClasses, open: open, matchTriggerWidth: matchTriggerWidth, hideBlockBorder: hideBlockBorder, interior: interior, header: header, content: content, expandToViewport: expandToViewport, minWidth: getMinWidthCssValue(), maxWidth: getMaxWidthCssValue(), footer: footer, onMouseDown: onMouseDown, onFocusEnter: focusEnterHandler, onFocusLeave: focusLeaveHandler, isRefresh: isRefresh, dropdownRef: dropdownRef, verticalContainerRef: verticalContainerRef, position: position, id: dropdownContentId, ariaRole: ariaRole, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby }),
+                React.createElement(TransitionContent, { state: state, transitionRef: ref, dropdownClasses: dropdownClasses, open: open, matchTriggerWidth: matchTriggerWidth, hideBlockBorder: hideBlockBorder, interior: interior, header: header, content: content, expandToViewport: expandToViewport, minWidth: getMinWidthCssValue(), maxWidth: getMaxWidthCssValue(), footer: footer, onMouseDown: onMouseDown, onFocusEnter: focusEnterHandler, onFocusLeave: focusLeaveHandler, isRefresh: isRefresh, dropdownRef: dropdownRef, verticalContainerRef: verticalContainerRef, position: position, id: dropdownContentId, ariaRole: ariaRole, ariaLabel: ariaLabel, ariaLabelledby: ariaLabelledby, ariaDescribedby: ariaDescribedby, dropdownStyle: getDropdownStyles(style) }),
                 React.createElement(TabTrap, { focusNextCallback: () => { var _a; return triggerRef.current && ((_a = getFirstFocusable(triggerRef.current)) === null || _a === void 0 ? void 0 : _a.focus()); }, disabled: !open || !loopFocus })))))));
 };
 const isInteriorPosition = (position) => position.insetBlockEnd !== undefined;
-export default Dropdown;
-//# sourceMappingURL=index.js.map
+export default InternalDropdown;
+//# sourceMappingURL=internal.js.map

package/lib/internal/template/dropdown/internal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/dropdown/internal.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { createPortal } from 'react-dom';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, useResizeObserver, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../internal/base-component';\nimport { getFirstFocusable, getLastFocusable } from '../internal/components/focus-lock/utils.js';\nimport TabTrap from '../internal/components/tab-trap/index.js';\nimport { Transition, TransitionStatus } from '../internal/components/transition';\nimport { fireNonCancelableEvent, NonCancelableEventHandler } from '../internal/events';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useMobile } from '../internal/hooks/use-mobile';\nimport { usePortalModeClasses } from '../internal/hooks/use-portal-mode-classes';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { nodeBelongs } from '../internal/utils/node-belongs';\nimport { DropdownContextProvider, DropdownContextProviderProps } from './context';\nimport {\n  calculatePosition,\n  DropdownPosition,\n  hasEnoughSpaceForFlexibleWidth,\n  InteriorDropdownPosition,\n} from './dropdown-fit-handler';\nimport { applyDropdownPositionRelativeToViewport, LogicalDOMRect } from './dropdown-position';\nimport { DropdownAlignment, DropdownProps, DropdownWidthConstraint } from './interfaces';\nimport { getDropdownStyles } from './style';\n\nexport interface InternalDropdownProps\n  extends Omit<DropdownProps, 'minWidth' | 'maxWidth'>,\n    InternalBaseComponentProps {\n  onMouseDown?: React.MouseEventHandler;\n  contentKey?: string;\n  dropdownId?: string;\n  dropdownContentId?: string;\n  stretchHeight?: boolean;\n  stretchTriggerHeight?: boolean;\n  interior?: boolean;\n  scrollable?: boolean;\n  loopFocus?: boolean;\n  minWidth?: DropdownWidthConstraint;\n  maxWidth?: DropdownWidthConstraint;\n  preferredAlignment?: DropdownAlignment;\n  hideBlockBorder?: boolean;\n  onFocus?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n  onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;\n}\n\nimport styles from './styles.css.js';\nimport testUtilStyles from './test-classes/styles.css.js';\n\ninterface DropdownContainerProps {\n  triggerRef: React.RefObject<HTMLElement>;\n  children?: React.ReactNode;\n  renderWithPortal: boolean;\n  id?: string;\n  referrerId?: string;\n  open?: boolean;\n}\n\nconst DropdownContainer = ({\n  triggerRef,\n  children,\n  renderWithPortal,\n  id,\n  referrerId,\n  open,\n}: DropdownContainerProps) => {\n  if (!renderWithPortal) {\n    return <>{children}</>;\n  }\n  if (!open) {\n    return null;\n  }\n  const currentDocument = triggerRef.current?.ownerDocument ?? document;\n  return createPortal(\n    <div id={id} data-awsui-referrer-id={referrerId}>\n      {children}\n    </div>,\n    currentDocument.body\n  );\n};\n\ninterface TransitionContentProps {\n  state: TransitionStatus;\n  transitionRef: React.MutableRefObject<any>;\n  dropdownClasses: string;\n  matchTriggerWidth: boolean;\n  hideBlockBorder: boolean;\n  interior: boolean;\n  isRefresh: boolean;\n  dropdownRef: React.RefObject<HTMLDivElement>;\n  verticalContainerRef: React.RefObject<HTMLDivElement>;\n  expandToViewport?: boolean;\n  minWidth?: string;\n  maxWidth?: string;\n  header?: React.ReactNode;\n  content?: React.ReactNode;\n  footer?: React.ReactNode;\n  position?: DropdownContextProviderProps['position'];\n  open?: boolean;\n  onMouseDown?: React.MouseEventHandler<Element>;\n  onFocusEnter?: React.FocusEventHandler<Element>;\n  onFocusLeave?: React.FocusEventHandler<Element>;\n  id?: string;\n  ariaRole?: string;\n  ariaLabel?: string;\n  ariaLabelledby?: string;\n  ariaDescribedby?: string;\n  dropdownStyle?: React.CSSProperties;\n}\n\nconst TransitionContent = ({\n  state,\n  transitionRef,\n  dropdownClasses,\n  matchTriggerWidth,\n  hideBlockBorder,\n  interior,\n  isRefresh,\n  dropdownRef,\n  verticalContainerRef,\n  expandToViewport,\n  minWidth,\n  maxWidth,\n  header,\n  content,\n  footer,\n  position,\n  open,\n  onMouseDown,\n  onFocusEnter,\n  onFocusLeave,\n  id,\n  ariaRole,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  dropdownStyle,\n}: TransitionContentProps) => {\n  const contentRef = useMergeRefs(dropdownRef, transitionRef);\n  const dropdownStyles: Record<string, string> = {};\n  if (minWidth) {\n    dropdownStyles[customCssProps.dropdownDefaultMinWidth] = minWidth;\n  }\n  if (maxWidth) {\n    dropdownStyles[customCssProps.dropdownDefaultMaxWidth] = maxWidth;\n  }\n  return (\n    <div\n      className={clsx(styles.dropdown, dropdownClasses, {\n        [styles.open]: open,\n        [styles['with-limited-width']]: !matchTriggerWidth,\n        [styles['hide-block-border']]: hideBlockBorder,\n        [styles.interior]: interior,\n        [styles.refresh]: isRefresh,\n        [styles['use-portal']]: expandToViewport && !interior,\n        [styles['use-flexible-width']]: !matchTriggerWidth && !interior,\n      })}\n      ref={contentRef}\n      id={id}\n      role={ariaRole}\n      aria-label={ariaLabel}\n      aria-labelledby={ariaLabelledby}\n      aria-describedby={ariaDescribedby}\n      data-open={open}\n      data-animating={state !== 'exited'}\n      aria-hidden={!open}\n      style={dropdownStyles}\n      onMouseDown={onMouseDown}\n      onFocus={onFocusEnter}\n      onBlur={onFocusLeave}\n    >\n      <div\n        className={clsx(\n          styles['dropdown-content-wrapper'],\n          !header && !content && styles['is-empty'],\n          isRefresh && styles.refresh\n        )}\n        style={dropdownStyle}\n      >\n        <div ref={verticalContainerRef} className={styles['dropdown-content']}>\n          <DropdownContextProvider position={position}>\n            {header && <div className={testUtilStyles.header}>{header}</div>}\n            {content}\n            {footer && <div className={testUtilStyles.footer}>{footer}</div>}\n          </DropdownContextProvider>\n        </div>\n      </div>\n    </div>\n  );\n};\n\nconst InternalDropdown = ({\n  content,\n  trigger,\n  triggerRef: externalTriggerRef,\n  triggerId: externalTriggerId,\n  open,\n  onOutsideClick,\n  onMouseDown,\n  header,\n  footer,\n  dropdownId,\n  stretchTriggerHeight = false,\n  stretchHeight = false,\n  minWidth,\n  maxWidth,\n  maxHeight,\n  hideBlockBorder = true,\n  expandToViewport = false,\n  preferredAlignment = 'start',\n  interior = false,\n  scrollable = true,\n  loopFocus = expandToViewport,\n  onFocus,\n  onBlur,\n  onFocusEnter,\n  onFocusLeave,\n  onEscape,\n  contentKey,\n  dropdownContentId,\n  ariaRole,\n  ariaLabel,\n  ariaLabelledby,\n  ariaDescribedby,\n  style,\n  __internalRootRef,\n  ...restProps\n}: InternalDropdownProps) => {\n  const baseProps = getBaseProps(restProps);\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const mergedRef = useMergeRefs(wrapperRef, __internalRootRef);\n  const internalTriggerRef = useRef<HTMLDivElement | null>(null);\n  const dropdownRef = useRef<HTMLDivElement | null>(null);\n  const dropdownContainerRef = useRef<HTMLDivElement | null>(null);\n  const verticalContainerRef = useRef<HTMLDivElement>(null);\n  // To keep track of the initial position (drop up/down) which is kept the same during fixed repositioning\n  const fixedPosition = useRef<DropdownPosition | null>(null);\n\n  // Use external trigger ref if provided, otherwise use internal ref\n  const triggerRef = externalTriggerRef || internalTriggerRef;\n\n  const isRefresh = useVisualRefresh();\n\n  const dropdownClasses = usePortalModeClasses(triggerRef);\n  const [position, setPosition] = useState<DropdownContextProviderProps['position']>('bottom-right');\n\n  const isMobile = useMobile();\n\n  // Derive if dropdown should match trigger width exactly\n  // This happens when both minWidth and maxWidth are explicitly set to 'trigger'\n  const matchTriggerWidth = minWidth === 'trigger' && maxWidth === 'trigger';\n\n  // Convert preferredAlignment to boolean for internal positioning logic\n  const preferCenter = preferredAlignment === 'center';\n\n  const setDropdownPosition = (\n    position: DropdownPosition | InteriorDropdownPosition,\n    triggerBox: LogicalDOMRect,\n    target: HTMLDivElement,\n    verticalContainer: HTMLDivElement\n  ) => {\n    verticalContainer.style.maxBlockSize = position.blockSize;\n\n    // Only apply occupy-entire-width when matching trigger width exactly and not in portal mode\n    if (!interior && matchTriggerWidth && !expandToViewport) {\n      target.classList.add(styles['occupy-entire-width']);\n    } else {\n      target.style.inlineSize = position.inlineSize;\n    }\n\n    // Using styles for main dropdown to adjust its position as preferred alternative\n    if (position.dropBlockStart && !interior) {\n      target.classList.add(styles['dropdown-drop-up']);\n      if (!expandToViewport) {\n        target.style.insetBlockEnd = '100%';\n      }\n    } else {\n      target.classList.remove(styles['dropdown-drop-up']);\n    }\n    target.classList.add(position.dropInlineStart ? styles['dropdown-drop-left'] : styles['dropdown-drop-right']);\n\n    if (position.insetInlineStart && position.insetInlineStart !== 'auto') {\n      target.style.insetInlineStart = position.insetInlineStart;\n    }\n\n    // Position normal overflow dropdowns with fixed positioning relative to viewport\n    if (expandToViewport && !interior) {\n      applyDropdownPositionRelativeToViewport({\n        position,\n        dropdownElement: target,\n        triggerRect: triggerBox,\n        isMobile,\n      });\n      // Keep track of the initial dropdown position and direction.\n      // Dropdown direction doesn't need to change as the user scrolls, just needs to stay attached to the trigger.\n      fixedPosition.current = position;\n      return;\n    }\n\n    // For an interior dropdown (the fly out) we need exact values for positioning\n    // and classes are not enough\n    // usage of relative position is impossible due to overwrite of overflow-x\n    if (interior && isInteriorPosition(position)) {\n      if (position.dropBlockStart) {\n        target.style.insetBlockEnd = position.insetBlockEnd;\n      } else {\n        target.style.insetBlockStart = position.insetBlockStart;\n      }\n      target.style.insetInlineStart = position.insetInlineStart;\n    }\n\n    if (position.dropBlockStart && position.dropInlineStart) {\n      setPosition('top-left');\n    } else if (position.dropBlockStart) {\n      setPosition('top-right');\n    } else if (position.dropInlineStart) {\n      setPosition('bottom-left');\n    } else {\n      setPosition('bottom-right');\n    }\n  };\n\n  const isOutsideDropdown = (element: Element) =>\n    (!wrapperRef.current || !nodeBelongs(wrapperRef.current, element)) &&\n    (!dropdownContainerRef.current || !nodeBelongs(dropdownContainerRef.current, element));\n\n  const focusHandler = (event: React.FocusEvent) => {\n    if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n      fireNonCancelableEvent(onFocus, event);\n    }\n  };\n\n  const blurHandler = (event: React.FocusEvent) => {\n    if (!event.relatedTarget || isOutsideDropdown(event.relatedTarget)) {\n      fireNonCancelableEvent(onBlur, event);\n    }\n  };\n\n  const isOutsideDropdownContent = (element: Element) =>\n    !dropdownRef.current || !nodeBelongs(dropdownRef.current, element);\n\n  const focusEnterHandler = (event: React.FocusEvent) => {\n    if (!event.relatedTarget || isOutsideDropdownContent(event.relatedTarget)) {\n      fireNonCancelableEvent(onFocusEnter, event);\n    }\n  };\n\n  const focusLeaveHandler = (event: React.FocusEvent) => {\n    if (!event.relatedTarget || isOutsideDropdownContent(event.relatedTarget)) {\n      fireNonCancelableEvent(onFocusLeave, event);\n    }\n  };\n\n  // Check if the dropdown has enough space to fit with its desired width constraints\n  // If not, remove the class that allows flexible width sizing\n  const fixStretching = () => {\n    const classNameToRemove = styles['use-flexible-width'];\n    if (\n      open &&\n      dropdownRef.current &&\n      triggerRef.current &&\n      dropdownRef.current.classList.contains(classNameToRemove) &&\n      !hasEnoughSpaceForFlexibleWidth({\n        triggerElement: triggerRef.current,\n        dropdownElement: dropdownRef.current,\n        minWidthConstraint: minWidth,\n        maxWidthConstraint: maxWidth,\n        expandToViewport,\n        stretchHeight,\n        isMobile,\n      })\n    ) {\n      dropdownRef.current.classList.remove(classNameToRemove);\n    }\n  };\n\n  useResizeObserver(() => dropdownRef.current, fixStretching);\n\n  useLayoutEffect(() => {\n    const onDropdownOpen = () => {\n      if (open && dropdownRef.current && triggerRef.current && verticalContainerRef.current) {\n        if (scrollable) {\n          dropdownRef.current.classList.add(styles.nowrap);\n        }\n\n        setDropdownPosition(\n          ...calculatePosition(\n            dropdownRef.current,\n            triggerRef.current,\n            verticalContainerRef.current,\n            interior,\n            expandToViewport,\n            preferCenter,\n            matchTriggerWidth,\n            stretchHeight,\n            isMobile,\n            minWidth,\n            maxWidth,\n            maxHeight\n          ),\n          dropdownRef.current,\n          verticalContainerRef.current\n        );\n\n        if (scrollable) {\n          dropdownRef.current.classList.remove(styles.nowrap);\n        }\n      }\n    };\n    onDropdownOpen();\n\n    if (open) {\n      // window may scroll when dropdown opens, for example when soft keyboard shows up\n      window.addEventListener('scroll', onDropdownOpen);\n      // only listen to window scroll within very short time after the dropdown opens\n      // do not want to interfere dropdown position on scroll afterwards\n      const timeoutId = setTimeout(() => {\n        window.removeEventListener('scroll', onDropdownOpen);\n      }, 500);\n\n      return () => {\n        clearTimeout(timeoutId);\n        window.removeEventListener('scroll', onDropdownOpen);\n      };\n    }\n    // See AWSUI-13040\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, [open, dropdownRef, triggerRef, verticalContainerRef, interior, matchTriggerWidth, isMobile, contentKey]);\n\n  // subscribe to outside click\n  useEffect(() => {\n    if (!open) {\n      return;\n    }\n    const clickListener = (event: MouseEvent) => {\n      // Since the listener is registered on the window, `event.target` will incorrectly point at the\n      // shadow root if the component is rendered inside shadow DOM.\n      const target = event.composedPath ? event.composedPath()[0] : event.target;\n      // For internal triggers, the wrapper div itself counts as outside — only its children are the trigger.\n      // For external triggers, the ref is the trigger element directly, so it counts as inside.\n      const isOutsideTrigger =\n        !nodeBelongs(triggerRef.current, target) || (!externalTriggerRef && target === triggerRef.current);\n\n      if (!nodeBelongs(dropdownRef.current, target) && isOutsideTrigger) {\n        fireNonCancelableEvent(onOutsideClick);\n      }\n    };\n    window.addEventListener('click', clickListener, true);\n\n    return () => {\n      window.removeEventListener('click', clickListener, true);\n    };\n  }, [open, onOutsideClick, triggerRef, externalTriggerRef]);\n\n  // subscribe to Escape key press\n  useEffect(() => {\n    // Only add the listener if onEscape callback is provided\n    if (!open || !onEscape) {\n      return;\n    }\n    const keydownListener = (event: KeyboardEvent) => {\n      if (event.key === 'Escape') {\n        // Prevent any surrounding modals or dialogs from acting on this Escape key\n        event.stopPropagation();\n        fireNonCancelableEvent(onEscape);\n      }\n    };\n    window.addEventListener('keydown', keydownListener, true);\n\n    return () => {\n      window.removeEventListener('keydown', keydownListener, true);\n    };\n  }, [open, onEscape]);\n\n  // sync dropdown position on scroll and resize\n  useLayoutEffect(() => {\n    if (!expandToViewport || !open) {\n      return;\n    }\n    const updateDropdownPosition = () => {\n      if (triggerRef.current && dropdownRef.current && verticalContainerRef.current && fixedPosition.current) {\n        applyDropdownPositionRelativeToViewport({\n          position: fixedPosition.current,\n          dropdownElement: dropdownRef.current,\n          triggerRect: getLogicalBoundingClientRect(triggerRef.current),\n          isMobile,\n        });\n      }\n    };\n\n    updateDropdownPosition();\n\n    const controller = new AbortController();\n    window.addEventListener('scroll', updateDropdownPosition, { capture: true, signal: controller.signal });\n    window.addEventListener('resize', updateDropdownPosition, { capture: true, signal: controller.signal });\n    return () => {\n      controller.abort();\n    };\n  }, [open, expandToViewport, isMobile, triggerRef]);\n\n  const generatedReferrerId = useUniqueId();\n  const referrerId = externalTriggerId || generatedReferrerId;\n\n  // Compute CSS variable values for min/max width\n  // These will be used by the use-flexible-width CSS class\n  const getMinWidthCssValue = (): string | undefined => {\n    if (minWidth === undefined) {\n      return undefined;\n    }\n    if (typeof minWidth === 'number') {\n      return `${minWidth}px`;\n    }\n    // 'trigger' maps to 100% (relative to parent)\n    return '100%';\n  };\n\n  const getMaxWidthCssValue = (): string | undefined => {\n    if (maxWidth === undefined) {\n      return 'none';\n    }\n    if (typeof maxWidth === 'number') {\n      return `${maxWidth}px`;\n    }\n    // 'trigger' maps to 100% (relative to parent)\n    return '100%';\n  };\n\n  return (\n    <div\n      {...baseProps}\n      className={clsx(\n        styles.root,\n        interior && styles.interior,\n        stretchTriggerHeight && styles['stretch-trigger-height'],\n        baseProps.className\n      )}\n      ref={mergedRef}\n      onFocus={focusHandler}\n      onBlur={blurHandler}\n    >\n      {!externalTriggerRef && (\n        <div\n          id={referrerId}\n          className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'], testUtilStyles.trigger)}\n          ref={internalTriggerRef}\n        >\n          {trigger}\n        </div>\n      )}\n\n      <TabTrap\n        focusNextCallback={() => dropdownRef.current && getFirstFocusable(dropdownRef.current)?.focus()}\n        disabled={!open || !loopFocus}\n      />\n\n      <DropdownContainer\n        triggerRef={triggerRef}\n        renderWithPortal={expandToViewport && !interior}\n        id={dropdownId}\n        referrerId={referrerId}\n        open={open}\n      >\n        <Transition in={open ?? false} exit={false}>\n          {(state, ref) => (\n            <div ref={dropdownContainerRef}>\n              <TabTrap\n                focusNextCallback={() => triggerRef.current && getLastFocusable(triggerRef.current)?.focus()}\n                disabled={!open || !loopFocus}\n              />\n\n              <TransitionContent\n                state={state}\n                transitionRef={ref}\n                dropdownClasses={dropdownClasses}\n                open={open}\n                matchTriggerWidth={matchTriggerWidth}\n                hideBlockBorder={hideBlockBorder}\n                interior={interior}\n                header={header}\n                content={content}\n                expandToViewport={expandToViewport}\n                minWidth={getMinWidthCssValue()}\n                maxWidth={getMaxWidthCssValue()}\n                footer={footer}\n                onMouseDown={onMouseDown}\n                onFocusEnter={focusEnterHandler}\n                onFocusLeave={focusLeaveHandler}\n                isRefresh={isRefresh}\n                dropdownRef={dropdownRef}\n                verticalContainerRef={verticalContainerRef}\n                position={position}\n                id={dropdownContentId}\n                ariaRole={ariaRole}\n                ariaLabel={ariaLabel}\n                ariaLabelledby={ariaLabelledby}\n                ariaDescribedby={ariaDescribedby}\n                dropdownStyle={getDropdownStyles(style)}\n              />\n\n              <TabTrap\n                focusNextCallback={() => triggerRef.current && getFirstFocusable(triggerRef.current)?.focus()}\n                disabled={!open || !loopFocus}\n              />\n            </div>\n          )}\n        </Transition>\n      </DropdownContainer>\n    </div>\n  );\n};\n\nconst isInteriorPosition = (\n  position: DropdownPosition | InteriorDropdownPosition\n): position is InteriorDropdownPosition => (position as InteriorDropdownPosition).insetBlockEnd !== undefined;\n\nexport default InternalDropdown;\n"]}

package/lib/internal/template/dropdown/style.d.ts

@@ -0,0 +1,9 @@
+import customCssProps from '../internal/generated/custom-css-properties';
+import { DropdownProps } from './interfaces';
+export declare function getDropdownStyles(style: DropdownProps['style']): {
+    [customCssProps.dropdownContentBorderColor]: string | undefined;
+    [customCssProps.dropdownContentBorderWidth]: string | undefined;
+    [customCssProps.dropdownContentBorderRadius]: string | undefined;
+    background: string | undefined;
+} | undefined;
+//# sourceMappingURL=style.d.ts.map

package/lib/internal/template/dropdown/style.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.d.ts","sourceRoot":"","sources":["../../../src/dropdown/style.tsx"],"names":[],"mappings":"AAGA,OAAO,cAAc,MAAM,6CAA6C,CAAC;AACzE,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAE7C,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,CAAC,OAAO,CAAC;IAO3D,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAA4B;IACvE,CAAC,cAAc,CAAC,0BAA0B,CAAC,qBAA4B;IACvE,CAAC,cAAc,CAAC,2BAA2B,CAAC,qBAA6B;;cAE5E"}

package/lib/internal/template/dropdown/style.js

@@ -0,0 +1,16 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SYSTEM } from '../internal/environment';
+import customCssProps from '../internal/generated/custom-css-properties';
+export function getDropdownStyles(style) {
+    if (SYSTEM !== 'core' || !(style === null || style === void 0 ? void 0 : style.dropdown)) {
+        return undefined;
+    }
+    return {
+        background: style.dropdown.background,
+        [customCssProps.dropdownContentBorderColor]: style.dropdown.borderColor,
+        [customCssProps.dropdownContentBorderWidth]: style.dropdown.borderWidth,
+        [customCssProps.dropdownContentBorderRadius]: style.dropdown.borderRadius,
+    };
+}
+//# sourceMappingURL=style.js.map

package/lib/internal/template/dropdown/style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","sourceRoot":"","sources":["../../../src/dropdown/style.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AACjD,OAAO,cAAc,MAAM,6CAA6C,CAAC;AAGzE,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,IAAI,MAAM,KAAK,MAAM,IAAI,CAAC,CAAA,KAAK,aAAL,KAAK,uBAAL,KAAK,CAAE,QAAQ,CAAA,EAAE,CAAC;QAC1C,OAAO,SAAS,CAAC;IACnB,CAAC;IAED,OAAO;QACL,UAAU,EAAE,KAAK,CAAC,QAAQ,CAAC,UAAU;QACrC,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW;QACvE,CAAC,cAAc,CAAC,0BAA0B,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,WAAW;QACvE,CAAC,cAAc,CAAC,2BAA2B,CAAC,EAAE,KAAK,CAAC,QAAQ,CAAC,YAAY;KAC1E,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport { SYSTEM } from '../internal/environment';\nimport customCssProps from '../internal/generated/custom-css-properties';\nimport { DropdownProps } from './interfaces';\n\nexport function getDropdownStyles(style: DropdownProps['style']) {\n  if (SYSTEM !== 'core' || !style?.dropdown) {\n    return undefined;\n  }\n\n  return {\n    background: style.dropdown.background,\n    [customCssProps.dropdownContentBorderColor]: style.dropdown.borderColor,\n    [customCssProps.dropdownContentBorderWidth]: style.dropdown.borderWidth,\n    [customCssProps.dropdownContentBorderRadius]: style.dropdown.borderRadius,\n  };\n}\n"]}

package/lib/internal/template/dropdown/styles.css.js

@@ -0,0 +1,25 @@
+
+    import './styles.scoped.css';
+    export default {
+  "dropdown-content-wrapper": "awsui_dropdown-content-wrapper_9duf6_1a14x_153",
+  "awsui-motion-fade-in-dropdown": "awsui_awsui-motion-fade-in-dropdown_9duf6_1a14x_1",
+  "refresh": "awsui_refresh_9duf6_1a14x_174",
+  "awsui-motion-fade-in-0": "awsui_awsui-motion-fade-in-0_9duf6_1a14x_1",
+  "root": "awsui_root_9duf6_1a14x_199",
+  "interior": "awsui_interior_9duf6_1a14x_232",
+  "dropdown": "awsui_dropdown_9duf6_1a14x_153",
+  "use-portal": "awsui_use-portal_9duf6_1a14x_242",
+  "is-empty": "awsui_is-empty_9duf6_1a14x_318",
+  "dropdown-drop-up": "awsui_dropdown-drop-up_9duf6_1a14x_325",
+  "with-limited-width": "awsui_with-limited-width_9duf6_1a14x_329",
+  "dropdown-drop-left": "awsui_dropdown-drop-left_9duf6_1a14x_332",
+  "dropdown-drop-right": "awsui_dropdown-drop-right_9duf6_1a14x_335",
+  "occupy-entire-width": "awsui_occupy-entire-width_9duf6_1a14x_338",
+  "use-flexible-width": "awsui_use-flexible-width_9duf6_1a14x_341",
+  "hide-block-border": "awsui_hide-block-border_9duf6_1a14x_349",
+  "open": "awsui_open_9duf6_1a14x_358",
+  "nowrap": "awsui_nowrap_9duf6_1a14x_367",
+  "dropdown-content": "awsui_dropdown-content_9duf6_1a14x_153",
+  "stretch-trigger-height": "awsui_stretch-trigger-height_9duf6_1a14x_378"
+};
+