npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1212 → 3.0.1213 - Mend

@cloudscape-design/components-themeable 3.0.1212 → 3.0.1213

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/lib/internal/template/internal/components/dropdown/index.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;~~AAyI7C~~,QAAA,MAAM,QAAQ,GAAI,~~8UA2Bf~~,aAAa,~~gBAoUf~~,CAAC;AAMF,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/index.tsx"],"names":[],"mappings":"AA0BA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AA+I7C,QAAA,MAAM,QAAQ,GAAI,mXA8Bf,aAAa,gBAyWf,CAAC;AAMF,eAAe,QAAQ,CAAC"}

package/lib/internal/template/internal/components/dropdown/index.js CHANGED Viewed

@@ -29,7 +29,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, 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, }) => {
     const contentRef = useMergeRefs(dropdownRef, transitionRef);
     const dropdownStyles = {};
     if (minWidth) {
@@ -46,7 +46,7 @@ const TransitionContent = ({ state, transitionRef, dropdownClasses, matchTrigger
             [styles.refresh]: isRefresh,
             [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 },
+        }), 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", { ref: verticalContainerRef, className: styles['dropdown-content'] },
                 React.createElement(DropdownContextProvider, { position: position },
@@ -54,7 +54,7 @@ const TransitionContent = ({ state, transitionRef, dropdownClasses, matchTrigger
                     content,
                     footer)))));
 };
-const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false, stretchHeight = false, minWidth, maxWidth, hideBlockBorder = true, expandToViewport = false, preferredAlignment = 'start', interior = false, scrollable = true, loopFocus = expandToViewport, onFocus, onBlur, contentKey, dropdownContentId, ariaRole, ariaLabel, ariaLabelledby, ariaDescribedby, }) => {
+const Dropdown = ({ content, trigger, open, onOutsideClick, onMouseDown, header, footer, dropdownId, stretchTriggerHeight = false, stretchHeight = false, minWidth, maxWidth, hideBlockBorder = true, expandToViewport = false, preferredAlignment = 'start', interior = false, scrollable = true, loopFocus = expandToViewport, onFocus, onBlur, onFocusEnter, onFocusLeave, onEscape, contentKey, dropdownContentId, ariaRole, ariaLabel, ariaLabelledby, ariaDescribedby, }) => {
     const wrapperRef = useRef(null);
     const triggerRef = useRef(null);
     const dropdownRef = useRef(null);
@@ -144,6 +144,17 @@ const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header
             fireNonCancelableEvent(onBlur, event);
         }
     };
+    const isOutsideDropdownContent = (element) => !dropdownRef.current || !nodeBelongs(dropdownRef.current, element);
+    const focusEnterHandler = (event) => {
+        if (!event.relatedTarget || isOutsideDropdownContent(event.relatedTarget)) {
+            fireNonCancelableEvent(onFocusEnter, event);
+        }
+    };
+    const focusLeaveHandler = (event) => {
+        if (!event.relatedTarget || isOutsideDropdownContent(event.relatedTarget)) {
+            fireNonCancelableEvent(onFocusLeave, event);
+        }
+    };
     // Check if the dropdown has enough space to fit with its desired width constraints
     // If not, remove the class that allows flexible width sizing
     const fixStretching = () => {
@@ -204,14 +215,32 @@ const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header
             // 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)) {
-                fireNonCancelableEvent(onDropdownClose);
+                fireNonCancelableEvent(onOutsideClick);
             }
         };
         window.addEventListener('click', clickListener, true);
         return () => {
             window.removeEventListener('click', clickListener, true);
         };
-    }, [open, onDropdownClose]);
+    }, [open, onOutsideClick]);
+    // subscribe to Escape key press
+    useEffect(() => {
+        // Only add the listener if onEscape callback is provided
+        if (!open || !onEscape) {
+            return;
+        }
+        const keydownListener = (event) => {
+            if (event.key === 'Escape') {
+                // Prevent any surrounding modals or dialogs from acting on this Escape key
+                event.stopPropagation();
+                fireNonCancelableEvent(onEscape);
+            }
+        };
+        window.addEventListener('keydown', keydownListener, true);
+        return () => {
+            window.removeEventListener('keydown', keydownListener, true);
+        };
+    }, [open, onEscape]);
     // sync dropdown position on scroll and resize
     useLayoutEffect(() => {
         if (!expandToViewport || !open) {
@@ -264,7 +293,7 @@ const Dropdown = ({ content, trigger, open, onDropdownClose, onMouseDown, header
         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, 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 }),
                 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;

package/lib/internal/template/internal/components/dropdown/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/index.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\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 { fireNonCancelableEvent } from '../../events';\nimport customCssProps from '../../generated/custom-css-properties';\nimport { useMobile } from '../../hooks/use-mobile';\nimport { usePortalModeClasses } from '../../hooks/use-portal-mode-classes';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';\nimport TabTrap from '../tab-trap/index.js';\nimport { Transition, TransitionStatus } from '../transition';\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 { DropdownProps } from './interfaces';\n\nimport styles from './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 id?: string;\n ariaRole?: string;\n ariaLabel?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\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 id,\n ariaRole,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\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 >\n <div\n className={clsx(\n styles['dropdown-content-wrapper'],\n !header && !content && styles['is-empty'],\n isRefresh && styles.refresh\n )}\n >\n <div ref={verticalContainerRef} className={styles['dropdown-content']}>\n <DropdownContextProvider position={position}>\n {header}\n {content}\n {footer}\n </DropdownContextProvider>\n </div>\n </div>\n </div>\n );\n};\n\nconst Dropdown = ({\n content,\n trigger,\n open,\n onDropdownClose,\n onMouseDown,\n header,\n footer,\n dropdownId,\n stretchTriggerHeight = false,\n stretchHeight = false,\n minWidth,\n maxWidth,\n hideBlockBorder = true,\n expandToViewport = false,\n preferredAlignment = 'start',\n interior = false,\n scrollable = true,\n loopFocus = expandToViewport,\n onFocus,\n onBlur,\n contentKey,\n dropdownContentId,\n ariaRole,\n ariaLabel,\n ariaLabelledby,\n ariaDescribedby,\n}: DropdownProps) => {\n const wrapperRef = useRef<HTMLDivElement \| null>(null);\n const triggerRef = 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 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 // 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 ),\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 if (!nodeBelongs(dropdownRef.current, target) && !nodeBelongs(triggerRef.current, target)) {\n fireNonCancelableEvent(onDropdownClose);\n }\n };\n window.addEventListener('click', clickListener, true);\n\n return () => {\n window.removeEventListener('click', clickListener, true);\n };\n }, [open, onDropdownClose]);\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]);\n\n const referrerId = useUniqueId();\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 className={clsx(\n styles.root,\n interior && styles.interior,\n stretchTriggerHeight && styles['stretch-trigger-height']\n )}\n ref={wrapperRef}\n onFocus={focusHandler}\n onBlur={blurHandler}\n >\n <div id={referrerId} className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'])} ref={triggerRef}>\n {trigger}\n </div>\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 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 />\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 Dropdown;\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5E,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,+CAA+C,CAAC;AAC7G,OAAO,EAAE,4BAA4B,EAAE,MAAM,+CAA+C,CAAC;AAE7F,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AACtD,OAAO,cAAc,MAAM,uCAAuC,CAAC;AACnE,OAAO,EAAE,SAAS,EAAE,MAAM,wBAAwB,CAAC;AACnD,OAAO,EAAE,oBAAoB,EAAE,MAAM,qCAAqC,CAAC;AAC3E,OAAO,EAAE,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC/D,OAAO,EAAE,WAAW,EAAE,MAAM,0BAA0B,CAAC;AACvD,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AAC7E,OAAO,OAAO,MAAM,sBAAsB,CAAC;AAC3C,OAAO,EAAE,UAAU,EAAoB,MAAM,eAAe,CAAC;AAC7D,OAAO,EAAE,uBAAuB,EAAgC,MAAM,WAAW,CAAC;AAClF,OAAO,EACL,iBAAiB,EAEjB,8BAA8B,GAE/B,MAAM,wBAAwB,CAAC;AAChC,OAAO,EAAE,uCAAuC,EAAkB,MAAM,qBAAqB,CAAC;AAG9F,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAWrC,MAAM,iBAAiB,GAAG,CAAC,EACzB,UAAU,EACV,QAAQ,EACR,gBAAgB,EAChB,EAAE,EACF,UAAU,EACV,IAAI,GACmB,EAAE,EAAE;;IAC3B,IAAI,CAAC,gBAAgB,EAAE,CAAC;QACtB,OAAO,0CAAG,QAAQ,CAAI,CAAC;IACzB,CAAC;IACD,IAAI,CAAC,IAAI,EAAE,CAAC;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,eAAe,GAAG,MAAA,MAAA,UAAU,CAAC,OAAO,0CAAE,aAAa,mCAAI,QAAQ,CAAC;IACtE,OAAO,YAAY,CACjB,6BAAK,EAAE,EAAE,EAAE,4BAA0B,UAAU,IAC5C,QAAQ,CACL,EACN,eAAe,CAAC,IAAI,CACrB,CAAC;AACJ,CAAC,CAAC;AA8BF,MAAM,iBAAiB,GAAG,CAAC,EACzB,KAAK,EACL,aAAa,EACb,eAAe,EACf,iBAAiB,EACjB,eAAe,EACf,QAAQ,EACR,SAAS,EACT,WAAW,EACX,oBAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,MAAM,EACN,OAAO,EACP,MAAM,EACN,QAAQ,EACR,IAAI,EACJ,WAAW,EACX,YAAY,EACZ,YAAY,EACZ,EAAE,EACF,QAAQ,EACR,SAAS,EACT,cAAc,EACd,eAAe,GACQ,EAAE,EAAE;IAC3B,MAAM,UAAU,GAAG,YAAY,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;IAC5D,MAAM,cAAc,GAA2B,EAAE,CAAC;IAClD,IAAI,QAAQ,EAAE,CAAC;QACb,cAAc,CAAC,cAAc,CAAC,uBAAuB,CAAC,GAAG,QAAQ,CAAC;IACpE,CAAC;IACD,IAAI,QAAQ,EAAE,CAAC;QACb,cAAc,CAAC,cAAc,CAAC,uBAAuB,CAAC,GAAG,QAAQ,CAAC;IACpE,CAAC;IACD,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,eAAe,EAAE;YAChD,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,IAAI;YACnB,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,iBAAiB;YAClD,CAAC,MAAM,CAAC,mBAAmB,CAAC,CAAC,EAAE,eAAe;YAC9C,CAAC,MAAM,CAAC,QAAQ,CAAC,EAAE,QAAQ;YAC3B,CAAC,MAAM,CAAC,OAAO,CAAC,EAAE,SAAS;YAC3B,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,EAAE,gBAAgB,IAAI,CAAC,QAAQ;YACrD,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,EAAE,CAAC,iBAAiB,IAAI,CAAC,QAAQ;SAChE,CAAC,EACF,GAAG,EAAE,UAAU,EACf,EAAE,EAAE,EAAE,EACN,IAAI,EAAE,QAAQ,gBACF,SAAS,qBACJ,cAAc,sBACb,eAAe,eACtB,IAAI,oBACC,KAAK,KAAK,QAAQ,iBACrB,CAAC,IAAI,EAClB,KAAK,EAAE,cAAc,EACrB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,YAAY;QAEpB,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,0BAA0B,CAAC,EAClC,CAAC,MAAM,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,UAAU,CAAC,EACzC,SAAS,IAAI,MAAM,CAAC,OAAO,CAC5B;YAED,6BAAK,GAAG,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,CAAC,kBAAkB,CAAC;gBACnE,oBAAC,uBAAuB,IAAC,QAAQ,EAAE,QAAQ;oBACxC,MAAM;oBACN,OAAO;oBACP,MAAM,CACiB,CACtB,CACF,CACF,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,QAAQ,GAAG,CAAC,EAChB,OAAO,EACP,OAAO,EACP,IAAI,EACJ,cAAc,EACd,WAAW,EACX,MAAM,EACN,MAAM,EACN,UAAU,EACV,oBAAoB,GAAG,KAAK,EAC5B,aAAa,GAAG,KAAK,EACrB,QAAQ,EACR,QAAQ,EACR,eAAe,GAAG,IAAI,EACtB,gBAAgB,GAAG,KAAK,EACxB,kBAAkB,GAAG,OAAO,EAC5B,QAAQ,GAAG,KAAK,EAChB,UAAU,GAAG,IAAI,EACjB,SAAS,GAAG,gBAAgB,EAC5B,OAAO,EACP,MAAM,EACN,YAAY,EACZ,YAAY,EACZ,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,QAAQ,EACR,SAAS,EACT,cAAc,EACd,eAAe,GACD,EAAE,EAAE;IAClB,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,UAAU,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACvD,MAAM,WAAW,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACxD,MAAM,oBAAoB,GAAG,MAAM,CAAwB,IAAI,CAAC,CAAC;IACjE,MAAM,oBAAoB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAC1D,yGAAyG;IACzG,MAAM,aAAa,GAAG,MAAM,CAA0B,IAAI,CAAC,CAAC;IAE5D,MAAM,SAAS,GAAG,gBAAgB,EAAE,CAAC;IAErC,MAAM,eAAe,GAAG,oBAAoB,CAAC,UAAU,CAAC,CAAC;IACzD,MAAM,CAAC,QAAQ,EAAE,WAAW,CAAC,GAAG,QAAQ,CAA2C,cAAc,CAAC,CAAC;IAEnG,MAAM,QAAQ,GAAG,SAAS,EAAE,CAAC;IAE7B,wDAAwD;IACxD,+EAA+E;IAC/E,MAAM,iBAAiB,GAAG,QAAQ,KAAK,SAAS,IAAI,QAAQ,KAAK,SAAS,CAAC;IAE3E,uEAAuE;IACvE,MAAM,YAAY,GAAG,kBAAkB,KAAK,QAAQ,CAAC;IAErD,MAAM,mBAAmB,GAAG,CAC1B,QAAqD,EACrD,UAA0B,EAC1B,MAAsB,EACtB,iBAAiC,EACjC,EAAE;QACF,iBAAiB,CAAC,KAAK,CAAC,YAAY,GAAG,QAAQ,CAAC,SAAS,CAAC;QAE1D,4FAA4F;QAC5F,IAAI,CAAC,QAAQ,IAAI,iBAAiB,IAAI,CAAC,gBAAgB,EAAE,CAAC;YACxD,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC;QACtD,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,KAAK,CAAC,UAAU,GAAG,QAAQ,CAAC,UAAU,CAAC;QAChD,CAAC;QAED,iFAAiF;QACjF,IAAI,QAAQ,CAAC,cAAc,IAAI,CAAC,QAAQ,EAAE,CAAC;YACzC,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;YACjD,IAAI,CAAC,gBAAgB,EAAE,CAAC;gBACtB,MAAM,CAAC,KAAK,CAAC,aAAa,GAAG,MAAM,CAAC;YACtC,CAAC;QACH,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,kBAAkB,CAAC,CAAC,CAAC;QACtD,CAAC;QACD,MAAM,CAAC,SAAS,CAAC,GAAG,CAAC,QAAQ,CAAC,eAAe,CAAC,CAAC,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC,CAAC;QAE9G,IAAI,QAAQ,CAAC,gBAAgB,IAAI,QAAQ,CAAC,gBAAgB,KAAK,MAAM,EAAE,CAAC;YACtE,MAAM,CAAC,KAAK,CAAC,gBAAgB,GAAG,QAAQ,CAAC,gBAAgB,CAAC;QAC5D,CAAC;QAED,iFAAiF;QACjF,IAAI,gBAAgB,IAAI,CAAC,QAAQ,EAAE,CAAC;YAClC,uCAAuC,CAAC;gBACtC,QAAQ;gBACR,eAAe,EAAE,MAAM;gBACvB,WAAW,EAAE,UAAU;gBACvB,QAAQ;aACT,CAAC,CAAC;YACH,6DAA6D;YAC7D,6GAA6G;YAC7G,aAAa,CAAC,OAAO,GAAG,QAAQ,CAAC;YACjC,OAAO;QACT,CAAC;QAED,8EAA8E;QAC9E,6BAA6B;QAC7B,0EAA0E;QAC1E,IAAI,QAAQ,IAAI,kBAAkB,CAAC,QAAQ,CAAC,EAAE,CAAC;YAC7C,IAAI,QAAQ,CAAC,cAAc,EAAE,CAAC;gBAC5B,MAAM,CAAC,KAAK,CAAC,aAAa,GAAG,QAAQ,CAAC,aAAa,CAAC;YACtD,CAAC;iBAAM,CAAC;gBACN,MAAM,CAAC,KAAK,CAAC,eAAe,GAAG,QAAQ,CAAC,eAAe,CAAC;YAC1D,CAAC;YACD,MAAM,CAAC,KAAK,CAAC,gBAAgB,GAAG,QAAQ,CAAC,gBAAgB,CAAC;QAC5D,CAAC;QAED,IAAI,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,eAAe,EAAE,CAAC;YACxD,WAAW,CAAC,UAAU,CAAC,CAAC;QAC1B,CAAC;aAAM,IAAI,QAAQ,CAAC,cAAc,EAAE,CAAC;YACnC,WAAW,CAAC,WAAW,CAAC,CAAC;QAC3B,CAAC;aAAM,IAAI,QAAQ,CAAC,eAAe,EAAE,CAAC;YACpC,WAAW,CAAC,aAAa,CAAC,CAAC;QAC7B,CAAC;aAAM,CAAC;YACN,WAAW,CAAC,cAAc,CAAC,CAAC;QAC9B,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,OAAgB,EAAE,EAAE,CAC7C,CAAC,CAAC,UAAU,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;QAClE,CAAC,CAAC,oBAAoB,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,oBAAoB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC;IAEzF,MAAM,YAAY,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC/C,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YACnE,sBAAsB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,WAAW,GAAG,CAAC,KAAuB,EAAE,EAAE;QAC9C,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,iBAAiB,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YACnE,sBAAsB,CAAC,MAAM,EAAE,KAAK,CAAC,CAAC;QACxC,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,wBAAwB,GAAG,CAAC,OAAgB,EAAE,EAAE,CACpD,CAAC,WAAW,CAAC,OAAO,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;IAErE,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,wBAAwB,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YAC1E,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC;IAEF,MAAM,iBAAiB,GAAG,CAAC,KAAuB,EAAE,EAAE;QACpD,IAAI,CAAC,KAAK,CAAC,aAAa,IAAI,wBAAwB,CAAC,KAAK,CAAC,aAAa,CAAC,EAAE,CAAC;YAC1E,sBAAsB,CAAC,YAAY,EAAE,KAAK,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC,CAAC;IAEF,mFAAmF;IACnF,6DAA6D;IAC7D,MAAM,aAAa,GAAG,GAAG,EAAE;QACzB,MAAM,iBAAiB,GAAG,MAAM,CAAC,oBAAoB,CAAC,CAAC;QACvD,IACE,IAAI;YACJ,WAAW,CAAC,OAAO;YACnB,UAAU,CAAC,OAAO;YAClB,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,QAAQ,CAAC,iBAAiB,CAAC;YACzD,CAAC,8BAA8B,CAAC;gBAC9B,cAAc,EAAE,UAAU,CAAC,OAAO;gBAClC,eAAe,EAAE,WAAW,CAAC,OAAO;gBACpC,kBAAkB,EAAE,QAAQ;gBAC5B,kBAAkB,EAAE,QAAQ;gBAC5B,gBAAgB;gBAChB,aAAa;gBACb,QAAQ;aACT,CAAC,EACF,CAAC;YACD,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,iBAAiB,CAAC,CAAC;QAC1D,CAAC;IACH,CAAC,CAAC;IAEF,iBAAiB,CAAC,GAAG,EAAE,CAAC,WAAW,CAAC,OAAO,EAAE,aAAa,CAAC,CAAC;IAE5D,eAAe,CAAC,GAAG,EAAE;QACnB,MAAM,cAAc,GAAG,GAAG,EAAE;YAC1B,IAAI,IAAI,IAAI,WAAW,CAAC,OAAO,IAAI,UAAU,CAAC,OAAO,IAAI,oBAAoB,CAAC,OAAO,EAAE,CAAC;gBACtF,IAAI,UAAU,EAAE,CAAC;oBACf,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,GAAG,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBACnD,CAAC;gBAED,mBAAmB,CACjB,GAAG,iBAAiB,CAClB,WAAW,CAAC,OAAO,EACnB,UAAU,CAAC,OAAO,EAClB,oBAAoB,CAAC,OAAO,EAC5B,QAAQ,EACR,gBAAgB,EAChB,YAAY,EACZ,iBAAiB,EACjB,aAAa,EACb,QAAQ,EACR,QAAQ,EACR,QAAQ,CACT,EACD,WAAW,CAAC,OAAO,EACnB,oBAAoB,CAAC,OAAO,CAC7B,CAAC;gBAEF,IAAI,UAAU,EAAE,CAAC;oBACf,WAAW,CAAC,OAAO,CAAC,SAAS,CAAC,MAAM,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC;gBACtD,CAAC;YACH,CAAC;QACH,CAAC,CAAC;QACF,cAAc,EAAE,CAAC;QAEjB,IAAI,IAAI,EAAE,CAAC;YACT,iFAAiF;YACjF,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YAClD,+EAA+E;YAC/E,kEAAkE;YAClE,MAAM,SAAS,GAAG,UAAU,CAAC,GAAG,EAAE;gBAChC,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YACvD,CAAC,EAAE,GAAG,CAAC,CAAC;YAER,OAAO,GAAG,EAAE;gBACV,YAAY,CAAC,SAAS,CAAC,CAAC;gBACxB,MAAM,CAAC,mBAAmB,CAAC,QAAQ,EAAE,cAAc,CAAC,CAAC;YACvD,CAAC,CAAC;QACJ,CAAC;QACD,kBAAkB;QAClB,uDAAuD;IACzD,CAAC,EAAE,CAAC,IAAI,EAAE,WAAW,EAAE,UAAU,EAAE,oBAAoB,EAAE,QAAQ,EAAE,iBAAiB,EAAE,QAAQ,EAAE,UAAU,CAAC,CAAC,CAAC;IAE7G,6BAA6B;IAC7B,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,IAAI,EAAE,CAAC;YACV,OAAO;QACT,CAAC;QACD,MAAM,aAAa,GAAG,CAAC,KAAiB,EAAE,EAAE;YAC1C,+FAA+F;YAC/F,8DAA8D;YAC9D,MAAM,MAAM,GAAG,KAAK,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,MAAM,CAAC;YAC3E,IAAI,CAAC,WAAW,CAAC,WAAW,CAAC,OAAO,EAAE,MAAM,CAAC,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,OAAO,EAAE,MAAM,CAAC,EAAE,CAAC;gBAC1F,sBAAsB,CAAC,cAAc,CAAC,CAAC;YACzC,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC;QAEtD,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,OAAO,EAAE,aAAa,EAAE,IAAI,CAAC,CAAC;QAC3D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,cAAc,CAAC,CAAC,CAAC;IAE3B,gCAAgC;IAChC,SAAS,CAAC,GAAG,EAAE;QACb,yDAAyD;QACzD,IAAI,CAAC,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YACvB,OAAO;QACT,CAAC;QACD,MAAM,eAAe,GAAG,CAAC,KAAoB,EAAE,EAAE;YAC/C,IAAI,KAAK,CAAC,GAAG,KAAK,QAAQ,EAAE,CAAC;gBAC3B,2EAA2E;gBAC3E,KAAK,CAAC,eAAe,EAAE,CAAC;gBACxB,sBAAsB,CAAC,QAAQ,CAAC,CAAC;YACnC,CAAC;QACH,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,SAAS,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;QAE1D,OAAO,GAAG,EAAE;YACV,MAAM,CAAC,mBAAmB,CAAC,SAAS,EAAE,eAAe,EAAE,IAAI,CAAC,CAAC;QAC/D,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,CAAC,CAAC,CAAC;IAErB,8CAA8C;IAC9C,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,CAAC,gBAAgB,IAAI,CAAC,IAAI,EAAE,CAAC;YAC/B,OAAO;QACT,CAAC;QACD,MAAM,sBAAsB,GAAG,GAAG,EAAE;YAClC,IAAI,UAAU,CAAC,OAAO,IAAI,WAAW,CAAC,OAAO,IAAI,oBAAoB,CAAC,OAAO,IAAI,aAAa,CAAC,OAAO,EAAE,CAAC;gBACvG,uCAAuC,CAAC;oBACtC,QAAQ,EAAE,aAAa,CAAC,OAAO;oBAC/B,eAAe,EAAE,WAAW,CAAC,OAAO;oBACpC,WAAW,EAAE,4BAA4B,CAAC,UAAU,CAAC,OAAO,CAAC;oBAC7D,QAAQ;iBACT,CAAC,CAAC;YACL,CAAC;QACH,CAAC,CAAC;QAEF,sBAAsB,EAAE,CAAC;QAEzB,MAAM,UAAU,GAAG,IAAI,eAAe,EAAE,CAAC;QACzC,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAsB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACxG,MAAM,CAAC,gBAAgB,CAAC,QAAQ,EAAE,sBAAsB,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC;QACxG,OAAO,GAAG,EAAE;YACV,UAAU,CAAC,KAAK,EAAE,CAAC;QACrB,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEvC,MAAM,UAAU,GAAG,WAAW,EAAE,CAAC;IAEjC,gDAAgD;IAChD,yDAAyD;IACzD,MAAM,mBAAmB,GAAG,GAAuB,EAAE;QACnD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO,SAAS,CAAC;QACnB,CAAC;QACD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACjC,OAAO,GAAG,QAAQ,IAAI,CAAC;QACzB,CAAC;QACD,8CAA8C;QAC9C,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,MAAM,mBAAmB,GAAG,GAAuB,EAAE;QACnD,IAAI,QAAQ,KAAK,SAAS,EAAE,CAAC;YAC3B,OAAO,MAAM,CAAC;QAChB,CAAC;QACD,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE,CAAC;YACjC,OAAO,GAAG,QAAQ,IAAI,CAAC;QACzB,CAAC;QACD,8CAA8C;QAC9C,OAAO,MAAM,CAAC;IAChB,CAAC,CAAC;IAEF,OAAO,CACL,6BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,IAAI,EACX,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAC3B,oBAAoB,IAAI,MAAM,CAAC,wBAAwB,CAAC,CACzD,EACD,GAAG,EAAE,UAAU,EACf,OAAO,EAAE,YAAY,EACrB,MAAM,EAAE,WAAW;QAEnB,6BAAK,EAAE,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,CAAC,oBAAoB,IAAI,MAAM,CAAC,wBAAwB,CAAC,CAAC,EAAE,GAAG,EAAE,UAAU,IAC5G,OAAO,CACJ;QAEN,oBAAC,OAAO,IACN,iBAAiB,EAAE,GAAG,EAAE,WAAC,OAAA,WAAW,CAAC,OAAO,KAAI,MAAA,iBAAiB,CAAC,WAAW,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAA,CAAA,EAAA,EAC/F,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,GAC7B;QAEF,oBAAC,iBAAiB,IAChB,UAAU,EAAE,UAAU,EACtB,gBAAgB,EAAE,gBAAgB,IAAI,CAAC,QAAQ,EAC/C,EAAE,EAAE,UAAU,EACd,UAAU,EAAE,UAAU,EACtB,IAAI,EAAE,IAAI;YAEV,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,aAAJ,IAAI,cAAJ,IAAI,GAAI,KAAK,EAAE,IAAI,EAAE,KAAK,IACvC,CAAC,KAAK,EAAE,GAAG,EAAE,EAAE,CAAC,CACf,6BAAK,GAAG,EAAE,oBAAoB;gBAC5B,oBAAC,OAAO,IACN,iBAAiB,EAAE,GAAG,EAAE,WAAC,OAAA,UAAU,CAAC,OAAO,KAAI,MAAA,gBAAgB,CAAC,UAAU,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAA,CAAA,EAAA,EAC5F,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,GAC7B;gBAEF,oBAAC,iBAAiB,IAChB,KAAK,EAAE,KAAK,EACZ,aAAa,EAAE,GAAG,EAClB,eAAe,EAAE,eAAe,EAChC,IAAI,EAAE,IAAI,EACV,iBAAiB,EAAE,iBAAiB,EACpC,eAAe,EAAE,eAAe,EAChC,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,OAAO,EAAE,OAAO,EAChB,gBAAgB,EAAE,gBAAgB,EAClC,QAAQ,EAAE,mBAAmB,EAAE,EAC/B,QAAQ,EAAE,mBAAmB,EAAE,EAC/B,MAAM,EAAE,MAAM,EACd,WAAW,EAAE,WAAW,EACxB,YAAY,EAAE,iBAAiB,EAC/B,YAAY,EAAE,iBAAiB,EAC/B,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,oBAAoB,EAAE,oBAAoB,EAC1C,QAAQ,EAAE,QAAQ,EAClB,EAAE,EAAE,iBAAiB,EACrB,QAAQ,EAAE,QAAQ,EAClB,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,GAChC;gBAEF,oBAAC,OAAO,IACN,iBAAiB,EAAE,GAAG,EAAE,WAAC,OAAA,UAAU,CAAC,OAAO,KAAI,MAAA,iBAAiB,CAAC,UAAU,CAAC,OAAO,CAAC,0CAAE,KAAK,EAAE,CAAA,CAAA,EAAA,EAC7F,QAAQ,EAAE,CAAC,IAAI,IAAI,CAAC,SAAS,GAC7B,CACE,CACP,CACU,CACK,CAChB,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,MAAM,kBAAkB,GAAG,CACzB,QAAqD,EACf,EAAE,CAAE,QAAqC,CAAC,aAAa,KAAK,SAAS,CAAC;AAE9G,eAAe,QAAQ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\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 { fireNonCancelableEvent } from '../../events';\nimport customCssProps from '../../generated/custom-css-properties';\nimport { useMobile } from '../../hooks/use-mobile';\nimport { usePortalModeClasses } from '../../hooks/use-portal-mode-classes';\nimport { useVisualRefresh } from '../../hooks/use-visual-mode';\nimport { nodeBelongs } from '../../utils/node-belongs';\nimport { getFirstFocusable, getLastFocusable } from '../focus-lock/utils.js';\nimport TabTrap from '../tab-trap/index.js';\nimport { Transition, TransitionStatus } from '../transition';\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 { DropdownProps } from './interfaces';\n\nimport styles from './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}\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}: 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 >\n <div ref={verticalContainerRef} className={styles['dropdown-content']}>\n <DropdownContextProvider position={position}>\n {header}\n {content}\n {footer}\n </DropdownContextProvider>\n </div>\n </div>\n </div>\n );\n};\n\nconst Dropdown = ({\n content,\n trigger,\n open,\n onOutsideClick,\n onMouseDown,\n header,\n footer,\n dropdownId,\n stretchTriggerHeight = false,\n stretchHeight = false,\n minWidth,\n maxWidth,\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}: DropdownProps) => {\n const wrapperRef = useRef<HTMLDivElement \| null>(null);\n const triggerRef = 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 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 ),\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 if (!nodeBelongs(dropdownRef.current, target) && !nodeBelongs(triggerRef.current, target)) {\n fireNonCancelableEvent(onOutsideClick);\n }\n };\n window.addEventListener('click', clickListener, true);\n\n return () => {\n window.removeEventListener('click', clickListener, true);\n };\n }, [open, onOutsideClick]);\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]);\n\n const referrerId = useUniqueId();\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 className={clsx(\n styles.root,\n interior && styles.interior,\n stretchTriggerHeight && styles['stretch-trigger-height']\n )}\n ref={wrapperRef}\n onFocus={focusHandler}\n onBlur={blurHandler}\n >\n <div id={referrerId} className={clsx(stretchTriggerHeight && styles['stretch-trigger-height'])} ref={triggerRef}>\n {trigger}\n </div>\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 />\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 Dropdown;\n"]}

package/lib/internal/template/internal/components/dropdown/interfaces.d.ts CHANGED Viewed

@@ -71,9 +71,11 @@ export interface DropdownProps extends ExpandToViewport {
      */
     open?: boolean;
     /**
-     * Called when a user clicks outside of the dropdown content, when it is open.
+     * 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.
      */
-    onDropdownClose?: NonCancelableEventHandler<null>;
+    onOutsideClick?: NonCancelableEventHandler<null>;
     /**
      * Called when a mouse button is pressed inside the dropdown content.
      */
@@ -134,6 +136,21 @@ export interface DropdownProps extends ExpandToViewport {
      * Called when focus leaves the trigger or dropdown content.
      */
     onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
+    /**
+     * 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.
+     */
+    onFocusEnter?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' | 'relatedTarget'>>;
+    /**
+     * Called when focus leaves the dropdown content entirely.
+     */
+    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
      */

package/lib/internal/template/internal/components/dropdown/interfaces.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/interfaces.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,yBAAyB,EAAE,MAAM,cAAc,CAAC;AAEzD,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE9D;;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;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAEzB;;OAEG;IACH,OAAO,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAE1B;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IAEf~~;;OAEG~~;IACH,~~eAAe~~,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,CAAC;~~IAElD~~;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAEtC;;OAEG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAE/B;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IAEnC;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,uBAAuB,CAAC;IAEnC;;;;OAIG;IACH,kBAAkB,CAAC,EAAE,iBAAiB,CAAC;IAEvC;;OAEG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAE1B;;OAEG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,OAAO,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAExF;;OAEG;IACH,MAAM,CAAC,EAAE,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC,UAAU,EAAE,QAAQ,GAAG,eAAe,CAAC,CAAC,CAAC;IAEvF;;OAEG;IACH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;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;CAC1B;AAED,MAAM,WAAW,gBAAgB;IAC/B;;;;;;;;;;OAUG;IACH,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B"}
1	+ {"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/dropdown/interfaces.ts"],"names":[],"mappings":"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"}

package/lib/internal/template/internal/components/dropdown/interfaces.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/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 '../../events';\n\nexport type OptionsFilteringType = 'none' \| 'auto' \| 'manual';\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 * Trigger element.\n /\n trigger: React.ReactNode;\n\n /\n \"Sticky\" header of the dropdown content\n /\n header?: React.ReactNode;\n\n /\n Footer slot fixed at the bottom of the dropdown\n /\n footer?: React.ReactNode;\n\n /\n Dropdown content elements.\n /\n content?: React.ReactNode;\n\n /\n Updating content key triggers dropdown position re-evaluation.\n /\n contentKey?: string;\n\n /\n Open state of the dropdown.\n /\n open?: boolean;\n\n /\n Called when a user clicks outside of the dropdown ~~content,~~ ~~when~~ it is open.\n /\n ~~onDropdownClose~~?: NonCancelableEventHandler<null>;\n\n /\n Called when a mouse button is pressed inside the dropdown content.\n /\n onMouseDown?: React.MouseEventHandler;\n\n /\n Dropdown id\n /\n dropdownId?: string;\n\n /\n Stretches dropdown to occupy entire height.\n /\n stretchHeight?: boolean;\n\n /\n Stretches the trigger to the height of the dropdown container.\n /\n stretchTriggerHeight?: boolean;\n\n /\n Minimum width constraint for the dropdown.\n * - Number: minimum width in pixels\n * - 'trigger': dropdown will be at least as wide as the trigger\n * - undefined: no minimum constraint (fits content)\n /\n minWidth?: DropdownWidthConstraint;\n\n /\n Maximum width constraint for the dropdown.\n * - Number: maximum width in pixels\n * - 'trigger': dropdown cannot exceed the trigger width\n * - undefined: fit to content width (no max constraint)\n /\n maxWidth?: DropdownWidthConstraint;\n\n /\n Preferred alignment of the dropdown relative to its trigger.\n * The dropdown will attempt this alignment first, but will automatically\n * adjust if there's insufficient space on the preferred side.\n /\n preferredAlignment?: DropdownAlignment;\n\n /\n Hides the block (top/bottom) borders of the dropdown content wrapper.\n /\n hideBlockBorder?: boolean;\n\n /\n Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out).\n /\n interior?: boolean;\n\n /\n Whether the dropdown will have a scrollbar or not\n /\n scrollable?: boolean;\n\n /\n Whether the dropdown will have a focus loop including trigger, header, content and footer.\n /\n loopFocus?: boolean;\n\n /\n Called when focus enters the trigger or dropdown content.\n /\n onFocus?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' \| 'relatedTarget'>>;\n\n /\n Called when focus leaves the trigger or dropdown content.\n /\n onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' \| 'relatedTarget'>>;\n\n /\n ID for the dropdown content wrapper\n /\n dropdownContentId?: string;\n\n /\n HTML role for the dropdown content wrapper\n /\n ariaRole?: string;\n\n /\n Aria label for the dropdown content wrapper\n /\n ariaLabel?: string;\n\n /\n Labelledby for the dropdown (required when role=\"dialog\")\n /\n ariaLabelledby?: string;\n\n /\n Describedby for the dropdown (recommended when role=\"dialog\")\n /\n ariaDescribedby?: string;\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"]}
1	+ {"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/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 '../../events';\n\nexport type OptionsFilteringType = 'none' \| 'auto' \| 'manual';\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 * Trigger element.\n /\n trigger: React.ReactNode;\n\n /\n \"Sticky\" header of the dropdown content\n /\n header?: React.ReactNode;\n\n /\n Footer slot fixed at the bottom of the dropdown\n /\n footer?: React.ReactNode;\n\n /\n Dropdown content elements.\n /\n content?: React.ReactNode;\n\n /\n Updating content key triggers dropdown position re-evaluation.\n /\n contentKey?: string;\n\n /\n Open state of the dropdown.\n /\n open?: boolean;\n\n /\n Called when the user clicks outside the dropdown and trigger.\n * The dropdown does not close automatically - the parent component\n * must update the `open` prop to close the dropdown.\n /\n onOutsideClick?: NonCancelableEventHandler<null>;\n\n /\n Called when a mouse button is pressed inside the dropdown content.\n /\n onMouseDown?: React.MouseEventHandler;\n\n /\n Dropdown id\n /\n dropdownId?: string;\n\n /\n Stretches dropdown to occupy entire height.\n /\n stretchHeight?: boolean;\n\n /\n Stretches the trigger to the height of the dropdown container.\n /\n stretchTriggerHeight?: boolean;\n\n /\n Minimum width constraint for the dropdown.\n * - Number: minimum width in pixels\n * - 'trigger': dropdown will be at least as wide as the trigger\n * - undefined: no minimum constraint (fits content)\n /\n minWidth?: DropdownWidthConstraint;\n\n /\n Maximum width constraint for the dropdown.\n * - Number: maximum width in pixels\n * - 'trigger': dropdown cannot exceed the trigger width\n * - undefined: fit to content width (no max constraint)\n /\n maxWidth?: DropdownWidthConstraint;\n\n /\n Preferred alignment of the dropdown relative to its trigger.\n * The dropdown will attempt this alignment first, but will automatically\n * adjust if there's insufficient space on the preferred side.\n /\n preferredAlignment?: DropdownAlignment;\n\n /\n Hides the block (top/bottom) borders of the dropdown content wrapper.\n /\n hideBlockBorder?: boolean;\n\n /\n Indicates if this dropdown lies within a parent dropdown and positions itself relative to it (as a fly out).\n /\n interior?: boolean;\n\n /\n Whether the dropdown will have a scrollbar or not\n /\n scrollable?: boolean;\n\n /\n Whether the dropdown will have a focus loop including trigger, header, content and footer.\n /\n loopFocus?: boolean;\n\n /\n Called when focus enters the trigger or dropdown content.\n /\n onFocus?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' \| 'relatedTarget'>>;\n\n /\n Called when focus leaves the trigger or dropdown content.\n /\n onBlur?: NonCancelableEventHandler<Pick<React.FocusEvent, 'target' \| 'relatedTarget'>>;\n\n /\n Called when focus enters the dropdown content from outside.\n * This fires only once when focus moves into the dropdown, not when moving between elements within it.\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 Called when the user presses the Escape key while the dropdown is open.\n * The dropdown does not close automatically - the parent component\n * must update the `open` prop to close the dropdown.\n /\n onEscape?: NonCancelableEventHandler;\n\n /\n ID for the dropdown content wrapper\n /\n dropdownContentId?: string;\n\n /\n HTML role for the dropdown content wrapper\n /\n ariaRole?: string;\n\n /\n Aria label for the dropdown content wrapper\n /\n ariaLabel?: string;\n\n /\n Labelledby for the dropdown (required when role=\"dialog\")\n /\n ariaLabelledby?: string;\n\n /\n Describedby for the dropdown (recommended when role=\"dialog\")\n /\n ariaDescribedby?: string;\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/internal/environment.js CHANGED Viewed

@@ -1,6 +1,6 @@
 export var PACKAGE_SOURCE = "components";
-export var PACKAGE_VERSION = "3.0.0 (96f8230d)";
-export var GIT_SHA = "96f8230d";
+export var PACKAGE_VERSION = "3.0.0 (f13e0284)";
+export var GIT_SHA = "f13e0284";
 export var THEME = "open-source-visual-refresh";
 export var SYSTEM = "core";
 export var ALWAYS_VISUAL_REFRESH = true;

package/lib/internal/template/internal/environment.json CHANGED Viewed

@@ -1,7 +1,7 @@
 {
   "PACKAGE_SOURCE": "components",
-  "PACKAGE_VERSION": "3.0.0 (96f8230d)",
-  "GIT_SHA": "96f8230d",
+  "PACKAGE_VERSION": "3.0.0 (f13e0284)",
+  "GIT_SHA": "f13e0284",
   "THEME": "default",
   "SYSTEM": "core",
   "ALWAYS_VISUAL_REFRESH": false

package/lib/internal/template/wizard/internal.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/wizard/internal.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;~~AAO3C~~,KAAK,mBAAmB,GAAG,WAAW,GACpC,0BAA0B,GAAG;IAC3B,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,eAAe,EAAE,yBAAyB,EAC1C,gBAAgB,EAChB,iBAAyB,EACzB,WAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,kCAA0C,EAC1C,GAAG,IAAI,EACR,EAAE,mBAAmB,~~eAoKrB~~"}
1	+ {"version":3,"file":"internal.d.ts","sourceRoot":"","sources":["../../../src/wizard/internal.tsx"],"names":[],"mappings":"AAqBA,OAAO,EAAE,0BAA0B,EAAE,MAAM,sCAAsC,CAAC;AAKlF,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAQ3C,KAAK,mBAAmB,GAAG,WAAW,GACpC,0BAA0B,GAAG;IAC3B,kCAAkC,CAAC,EAAE,OAAO,CAAC;CAC9C,CAAC;AAEJ,MAAM,CAAC,OAAO,UAAU,cAAc,CAAC,EACrC,KAAK,EACL,eAAe,EAAE,yBAAyB,EAC1C,gBAAgB,EAChB,iBAAyB,EACzB,WAAmB,EACnB,oBAAoB,EACpB,gBAAgB,EAChB,QAAQ,EACR,QAAQ,EACR,UAAU,EACV,iBAAiB,EACjB,kCAA0C,EAC1C,GAAG,IAAI,EACR,EAAE,mBAAmB,eAoLrB"}

package/lib/internal/template/wizard/internal.js CHANGED Viewed

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import clsx from 'clsx';
 import { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';
 import { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';
@@ -16,6 +16,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { useFunnelChangeEvent } from './analytics';
 import WizardForm, { STEP_NAME_SELECTOR } from './wizard-form';
 import WizardNavigation from './wizard-navigation';
+import WizardStepNavigationExpandable from './wizard-step-navigation-expandable';
 import analyticsSelectors from './analytics-metadata/styles.css.js';
 import styles from './styles.css.js';
 export default function InternalWizard({ steps, activeStepIndex: controlledActiveStepIndex, submitButtonText, isLoadingNextStep = false, allowSkipTo = false, customPrimaryActions, secondaryActions, onCancel, onSubmit, onNavigate, __internalRootRef, __injectAnalyticsComponentMetadata = false, ...rest }) {
@@ -35,6 +36,7 @@ export default function InternalWizard({ steps, activeStepIndex: controlledActiv
     farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);
     const isVisualRefresh = useVisualRefresh();
     const isLastStep = actualActiveStepIndex >= steps.length - 1;
+    const [isStepNavigationExpanded, setIsStepNavigationExpanded] = useState(false);
     const navigationEvent = (requestedStepIndex, reason) => {
         if (funnelInteractionId) {
             const stepName = getTextFromSelector(STEP_NAME_SELECTOR);
@@ -106,7 +108,9 @@ export default function InternalWizard({ steps, activeStepIndex: controlledActiv
             : {}) },
         React.createElement("div", { className: clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
             React.createElement(WizardNavigation, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo: allowSkipTo, hidden: smallContainer, i18nStrings: i18nStrings, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps }),
+            smallContainer && (React.createElement("div", { className: styles['collapsed-steps'] },
+                React.createElement(WizardStepNavigationExpandable, { activeStepIndex: actualActiveStepIndex, farthestStepIndex: farthestStepIndex.current, allowSkipTo: allowSkipTo, i18nStrings: i18nStrings, isLoadingNextStep: isLoadingNextStep, onStepClick: onStepClick, onSkipToClick: onSkipToClick, steps: steps, expanded: isStepNavigationExpanded, onExpandChange: setIsStepNavigationExpanded }))),
             React.createElement("div", { className: clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container']) },
-                React.createElement(WizardForm, { steps: steps, showCollapsedSteps: smallContainer, i18nStrings: i18nStrings, submitButtonText: submitButtonText, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo: allowSkipTo, customPrimaryActions: customPrimaryActions, secondaryActions: secondaryActions, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onSkipToClick: onSkipToClick, onPrimaryClick: onPrimaryClick })))));
+                React.createElement(WizardForm, { steps: steps, i18nStrings: i18nStrings, submitButtonText: submitButtonText, activeStepIndex: actualActiveStepIndex, isPrimaryLoading: isLoadingNextStep, allowSkipTo: allowSkipTo, customPrimaryActions: customPrimaryActions, secondaryActions: secondaryActions, onCancelClick: onCancelClick, onPreviousClick: onPreviousClick, onSkipToClick: onSkipToClick, onPrimaryClick: onPrimaryClick })))));
 }
 //# sourceMappingURL=internal.js.map

package/lib/internal/template/wizard/internal.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/wizard/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\nimport React, { useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FUNNEL_KEY,\n FUNNEL_KEY_FUNNEL_NAME,\n FUNNEL_KEY_STEP_NAME,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useFunnelChangeEvent } from './analytics';\nimport { GeneratedAnalyticsMetadataWizardComponent } from './analytics-metadata/interfaces';\nimport { WizardProps } from './interfaces';\nimport WizardForm, { STEP_NAME_SELECTOR } from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalWizardProps = WizardProps &\n InternalBaseComponentProps & {\n __injectAnalyticsComponentMetadata?: boolean;\n };\n\nexport default function InternalWizard({\n steps,\n activeStepIndex: controlledActiveStepIndex,\n submitButtonText,\n isLoadingNextStep = false,\n allowSkipTo = false,\n customPrimaryActions,\n secondaryActions,\n onCancel,\n onSubmit,\n onNavigate,\n __internalRootRef,\n __injectAnalyticsComponentMetadata = false,\n ...rest\n}: InternalWizardProps) {\n const baseProps = getBaseProps(rest);\n\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n\n const smallContainer = breakpoint === 'default';\n\n const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n componentName: 'Wizard',\n controlledProp: 'activeStepIndex',\n changeHandler: 'onNavigate',\n });\n const { funnelIdentifier, funnelInteractionId, funnelSubmit, funnelCancel, funnelProps, funnelNextOrSubmitAttempt } =\n useFunnel();\n const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n const isVisualRefresh = useVisualRefresh();\n const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n if (funnelInteractionId) {\n const stepName = getTextFromSelector(STEP_NAME_SELECTOR);\n\n FunnelMetrics.funnelStepNavigation({\n navigationType: reason,\n funnelInteractionId,\n stepNumber: actualActiveStepIndex + 1,\n stepName,\n stepNameSelector: STEP_NAME_SELECTOR,\n destinationStepNumber: requestedStepIndex + 1,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n setActiveStepIndex(requestedStepIndex);\n fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n };\n const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n const onCancelClick = () => {\n funnelCancel();\n fireNonCancelableEvent(onCancel);\n };\n const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n const onPrimaryClick = () => {\n funnelNextOrSubmitAttempt();\n\n if (isLastStep) {\n funnelSubmit();\n fireNonCancelableEvent(onSubmit);\n } else {\n navigationEvent(actualActiveStepIndex + 1, 'next');\n }\n };\n\n useFunnelChangeEvent(funnelInteractionId, funnelIdentifier, steps);\n\n const i18n = useInternalI18n('wizard');\n const skipToButtonLabel = i18n(\n 'i18nStrings.skipToButtonLabel',\n rest.i18nStrings?.skipToButtonLabel,\n format => task => format({ task__title: task.title })\n );\n\n const i18nStrings: WizardProps.I18nStrings = {\n ...rest.i18nStrings,\n skipToButtonLabel,\n stepNumberLabel: i18n(\n 'i18nStrings.stepNumberLabel',\n rest.i18nStrings?.stepNumberLabel,\n format => stepNumber => format({ stepNumber })\n ),\n collapsedStepsLabel: i18n(\n 'i18nStrings.collapsedStepsLabel',\n rest.i18nStrings?.collapsedStepsLabel,\n format => (stepNumber, stepsCount) => format({ stepNumber, stepsCount })\n ),\n navigationAriaLabel: i18n('i18nStrings.navigationAriaLabel', rest.i18nStrings?.navigationAriaLabel),\n cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings?.cancelButton),\n previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings?.previousButton),\n nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings?.nextButton),\n optional: i18n('i18nStrings.optional', rest.i18nStrings?.optional),\n };\n\n if (activeStepIndex && activeStepIndex >= steps.length) {\n warnOnce(\n 'Wizard',\n `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n steps.length\n } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n );\n }\n\n if (allowSkipTo && !skipToButtonLabel) {\n warnOnce(\n 'Wizard',\n `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n );\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataWizardComponent = {\n name: 'awsui.Wizard',\n label: {\n root: 'body',\n selector: `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_FUNNEL_NAME}\"]`,\n },\n properties: {\n stepsCount: `${(steps \|\| []).length}`,\n activeStepIndex: `${activeStepIndex}`,\n activeStepLabel: `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_STEP_NAME}\"]`,\n ...(rest.analyticsMetadata \|\| {}),\n },\n };\n\n return (\n <div\n {...baseProps}\n {...funnelProps}\n ref={ref}\n className={clsx(styles.root, analyticsSelectors.root, baseProps.className)}\n {...(__injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })\n : {})}\n >\n <div\n className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardNavigation\n activeStepIndex={actualActiveStepIndex}\n farthestStepIndex={farthestStepIndex.current}\n allowSkipTo={allowSkipTo}\n hidden={smallContainer}\n i18nStrings={i18nStrings}\n isLoadingNextStep={isLoadingNextStep}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n steps={steps}\n />\n <div\n className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardForm\n steps={steps}\n showCollapsedSteps={smallContainer}\n i18nStrings={i18nStrings}\n submitButtonText={submitButtonText}\n activeStepIndex={actualActiveStepIndex}\n isPrimaryLoading={isLoadingNextStep}\n allowSkipTo={allowSkipTo}\n customPrimaryActions={customPrimaryActions}\n secondaryActions={secondaryActions}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onSkipToClick={onSkipToClick}\n onPrimaryClick={onPrimaryClick}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}
1	+ {"version":3,"file":"internal.js","sourceRoot":"","sources":["../../../src/wizard/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\nimport React, { useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs, warnOnce } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport { useInternalI18n } from '../i18n/context';\nimport { FunnelMetrics } from '../internal/analytics';\nimport { useFunnel } from '../internal/analytics/hooks/use-funnel';\nimport {\n DATA_ATTR_FUNNEL_KEY,\n FUNNEL_KEY_FUNNEL_NAME,\n FUNNEL_KEY_STEP_NAME,\n getSubStepAllSelector,\n getTextFromSelector,\n} from '../internal/analytics/selectors';\nimport { getBaseProps } from '../internal/base-component';\nimport { fireNonCancelableEvent } from '../internal/events';\nimport { useContainerBreakpoints } from '../internal/hooks/container-queries';\nimport { InternalBaseComponentProps } from '../internal/hooks/use-base-component';\nimport { useControllable } from '../internal/hooks/use-controllable';\nimport { useVisualRefresh } from '../internal/hooks/use-visual-mode';\nimport { useFunnelChangeEvent } from './analytics';\nimport { GeneratedAnalyticsMetadataWizardComponent } from './analytics-metadata/interfaces';\nimport { WizardProps } from './interfaces';\nimport WizardForm, { STEP_NAME_SELECTOR } from './wizard-form';\nimport WizardNavigation from './wizard-navigation';\nimport WizardStepNavigationExpandable from './wizard-step-navigation-expandable';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\ntype InternalWizardProps = WizardProps &\n InternalBaseComponentProps & {\n __injectAnalyticsComponentMetadata?: boolean;\n };\n\nexport default function InternalWizard({\n steps,\n activeStepIndex: controlledActiveStepIndex,\n submitButtonText,\n isLoadingNextStep = false,\n allowSkipTo = false,\n customPrimaryActions,\n secondaryActions,\n onCancel,\n onSubmit,\n onNavigate,\n __internalRootRef,\n __injectAnalyticsComponentMetadata = false,\n ...rest\n}: InternalWizardProps) {\n const baseProps = getBaseProps(rest);\n\n const [breakpoint, breakpointsRef] = useContainerBreakpoints(['xs']);\n const ref = useMergeRefs(breakpointsRef, __internalRootRef);\n const smallContainer = breakpoint === 'default';\n\n const [activeStepIndex, setActiveStepIndex] = useControllable(controlledActiveStepIndex, onNavigate, 0, {\n componentName: 'Wizard',\n controlledProp: 'activeStepIndex',\n changeHandler: 'onNavigate',\n });\n const { funnelIdentifier, funnelInteractionId, funnelSubmit, funnelCancel, funnelProps, funnelNextOrSubmitAttempt } =\n useFunnel();\n const actualActiveStepIndex = activeStepIndex ? Math.min(activeStepIndex, steps.length - 1) : 0;\n\n const farthestStepIndex = useRef<number>(actualActiveStepIndex);\n farthestStepIndex.current = Math.max(farthestStepIndex.current, actualActiveStepIndex);\n\n const isVisualRefresh = useVisualRefresh();\n const isLastStep = actualActiveStepIndex >= steps.length - 1;\n\n const [isStepNavigationExpanded, setIsStepNavigationExpanded] = useState(false);\n\n const navigationEvent = (requestedStepIndex: number, reason: WizardProps.NavigationReason) => {\n if (funnelInteractionId) {\n const stepName = getTextFromSelector(STEP_NAME_SELECTOR);\n\n FunnelMetrics.funnelStepNavigation({\n navigationType: reason,\n funnelInteractionId,\n stepNumber: actualActiveStepIndex + 1,\n stepName,\n stepNameSelector: STEP_NAME_SELECTOR,\n destinationStepNumber: requestedStepIndex + 1,\n subStepAllSelector: getSubStepAllSelector(),\n });\n }\n\n setActiveStepIndex(requestedStepIndex);\n fireNonCancelableEvent(onNavigate, { requestedStepIndex, reason });\n };\n const onStepClick = (stepIndex: number) => navigationEvent(stepIndex, 'step');\n const onSkipToClick = (stepIndex: number) => navigationEvent(stepIndex, 'skip');\n const onCancelClick = () => {\n funnelCancel();\n fireNonCancelableEvent(onCancel);\n };\n const onPreviousClick = () => navigationEvent(actualActiveStepIndex - 1, 'previous');\n const onPrimaryClick = () => {\n funnelNextOrSubmitAttempt();\n\n if (isLastStep) {\n funnelSubmit();\n fireNonCancelableEvent(onSubmit);\n } else {\n navigationEvent(actualActiveStepIndex + 1, 'next');\n }\n };\n\n useFunnelChangeEvent(funnelInteractionId, funnelIdentifier, steps);\n\n const i18n = useInternalI18n('wizard');\n const skipToButtonLabel = i18n(\n 'i18nStrings.skipToButtonLabel',\n rest.i18nStrings?.skipToButtonLabel,\n format => task => format({ task__title: task.title })\n );\n\n const i18nStrings: WizardProps.I18nStrings = {\n ...rest.i18nStrings,\n skipToButtonLabel,\n stepNumberLabel: i18n(\n 'i18nStrings.stepNumberLabel',\n rest.i18nStrings?.stepNumberLabel,\n format => stepNumber => format({ stepNumber })\n ),\n collapsedStepsLabel: i18n(\n 'i18nStrings.collapsedStepsLabel',\n rest.i18nStrings?.collapsedStepsLabel,\n format => (stepNumber, stepsCount) => format({ stepNumber, stepsCount })\n ),\n navigationAriaLabel: i18n('i18nStrings.navigationAriaLabel', rest.i18nStrings?.navigationAriaLabel),\n cancelButton: i18n('i18nStrings.cancelButton', rest.i18nStrings?.cancelButton),\n previousButton: i18n('i18nStrings.previousButton', rest.i18nStrings?.previousButton),\n nextButton: i18n('i18nStrings.nextButton', rest.i18nStrings?.nextButton),\n optional: i18n('i18nStrings.optional', rest.i18nStrings?.optional),\n };\n\n if (activeStepIndex && activeStepIndex >= steps.length) {\n warnOnce(\n 'Wizard',\n `You have set \\`activeStepIndex\\` to ${activeStepIndex} but you have provided only ${\n steps.length\n } steps. Its value is ignored and the component uses ${steps.length - 1} instead.`\n );\n }\n\n if (allowSkipTo && !skipToButtonLabel) {\n warnOnce(\n 'Wizard',\n `You have set \\`allowSkipTo\\` but you have not provided \\`i18nStrings.skipToButtonLabel\\`. The skip-to button will not be rendered.`\n );\n }\n\n const componentAnalyticsMetadata: GeneratedAnalyticsMetadataWizardComponent = {\n name: 'awsui.Wizard',\n label: {\n root: 'body',\n selector: `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_FUNNEL_NAME}\"]`,\n },\n properties: {\n stepsCount: `${(steps \|\| []).length}`,\n activeStepIndex: `${activeStepIndex}`,\n activeStepLabel: `[${DATA_ATTR_FUNNEL_KEY}=\"${FUNNEL_KEY_STEP_NAME}\"]`,\n ...(rest.analyticsMetadata \|\| {}),\n },\n };\n\n return (\n <div\n {...baseProps}\n {...funnelProps}\n ref={ref}\n className={clsx(styles.root, analyticsSelectors.root, baseProps.className)}\n {...(__injectAnalyticsComponentMetadata\n ? getAnalyticsMetadataAttribute({ component: componentAnalyticsMetadata })\n : {})}\n >\n <div\n className={clsx(styles.wizard, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardNavigation\n activeStepIndex={actualActiveStepIndex}\n farthestStepIndex={farthestStepIndex.current}\n allowSkipTo={allowSkipTo}\n hidden={smallContainer}\n i18nStrings={i18nStrings}\n isLoadingNextStep={isLoadingNextStep}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n steps={steps}\n />\n {smallContainer && (\n <div className={styles['collapsed-steps']}>\n <WizardStepNavigationExpandable\n activeStepIndex={actualActiveStepIndex}\n farthestStepIndex={farthestStepIndex.current}\n allowSkipTo={allowSkipTo}\n i18nStrings={i18nStrings}\n isLoadingNextStep={isLoadingNextStep}\n onStepClick={onStepClick}\n onSkipToClick={onSkipToClick}\n steps={steps}\n expanded={isStepNavigationExpanded}\n onExpandChange={setIsStepNavigationExpanded}\n />\n </div>\n )}\n <div\n className={clsx(styles.form, isVisualRefresh && styles.refresh, smallContainer && styles['small-container'])}\n >\n <WizardForm\n steps={steps}\n i18nStrings={i18nStrings}\n submitButtonText={submitButtonText}\n activeStepIndex={actualActiveStepIndex}\n isPrimaryLoading={isLoadingNextStep}\n allowSkipTo={allowSkipTo}\n customPrimaryActions={customPrimaryActions}\n secondaryActions={secondaryActions}\n onCancelClick={onCancelClick}\n onPreviousClick={onPreviousClick}\n onSkipToClick={onSkipToClick}\n onPrimaryClick={onPrimaryClick}\n />\n </div>\n </div>\n </div>\n );\n}\n"]}

package/lib/internal/template/wizard/styles.css.js CHANGED Viewed

@@ -1,35 +1,35 @@
     import './styles.scoped.css';
     export default {
-  "root": "awsui_root_1xupv_1vmie_145",
-  "wizard": "awsui_wizard_1xupv_1vmie_177",
-  "refresh": "awsui_refresh_1xupv_1vmie_177",
-  "small-container": "awsui_small-container_1xupv_1vmie_184",
-  "navigation": "awsui_navigation_1xupv_1vmie_193",
-  "number": "awsui_number_1xupv_1vmie_226",
-  "circle": "awsui_circle_1xupv_1vmie_242",
-  "title": "awsui_title_1xupv_1vmie_253",
-  "active": "awsui_active_1xupv_1vmie_284",
-  "disabled": "awsui_disabled_1xupv_1vmie_295",
-  "enabled": "awsui_enabled_1xupv_1vmie_305",
-  "form": "awsui_form_1xupv_1vmie_349",
-  "form-header": "awsui_form-header_1xupv_1vmie_354",
-  "form-header-content": "awsui_form-header-content_1xupv_1vmie_369",
-  "form-component": "awsui_form-component_1xupv_1vmie_373",
-  "hidden": "awsui_hidden_1xupv_1vmie_387",
-  "collapsed-steps": "awsui_collapsed-steps_1xupv_1vmie_391",
-  "collapsed-steps-hidden": "awsui_collapsed-steps-hidden_1xupv_1vmie_396",
-  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1vmie_400",
-  "form-header-component": "awsui_form-header-component_1xupv_1vmie_400",
-  "navigation-link": "awsui_navigation-link_1xupv_1vmie_416",
-  "navigation-link-item": "awsui_navigation-link-item_1xupv_1vmie_417",
-  "navigation-link-label": "awsui_navigation-link-label_1xupv_1vmie_418",
-  "navigation-link-active": "awsui_navigation-link-active_1xupv_1vmie_422",
-  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1vmie_427",
-  "cancel-button": "awsui_cancel-button_1xupv_1vmie_431",
-  "previous-button": "awsui_previous-button_1xupv_1vmie_432",
-  "primary-button": "awsui_primary-button_1xupv_1vmie_433",
-  "skip-to-button": "awsui_skip-to-button_1xupv_1vmie_434",
-  "action-buttons": "awsui_action-buttons_1xupv_1vmie_438"
+  "root": "awsui_root_1xupv_1rebv_145",
+  "wizard": "awsui_wizard_1xupv_1rebv_177",
+  "refresh": "awsui_refresh_1xupv_1rebv_177",
+  "small-container": "awsui_small-container_1xupv_1rebv_184",
+  "navigation": "awsui_navigation_1xupv_1rebv_198",
+  "number": "awsui_number_1xupv_1rebv_231",
+  "circle": "awsui_circle_1xupv_1rebv_247",
+  "title": "awsui_title_1xupv_1rebv_258",
+  "active": "awsui_active_1xupv_1rebv_289",
+  "disabled": "awsui_disabled_1xupv_1rebv_300",
+  "enabled": "awsui_enabled_1xupv_1rebv_310",
+  "form": "awsui_form_1xupv_1rebv_354",
+  "form-header": "awsui_form-header_1xupv_1rebv_359",
+  "form-header-content": "awsui_form-header-content_1xupv_1rebv_374",
+  "form-component": "awsui_form-component_1xupv_1rebv_378",
+  "hidden": "awsui_hidden_1xupv_1rebv_394",
+  "collapsed-steps": "awsui_collapsed-steps_1xupv_1rebv_398",
+  "collapsed-steps-navigation": "awsui_collapsed-steps-navigation_1xupv_1rebv_404",
+  "form-header-component-wrapper": "awsui_form-header-component-wrapper_1xupv_1rebv_413",
+  "form-header-component": "awsui_form-header-component_1xupv_1rebv_413",
+  "navigation-link": "awsui_navigation-link_1xupv_1rebv_429",
+  "navigation-link-item": "awsui_navigation-link-item_1xupv_1rebv_430",
+  "navigation-link-label": "awsui_navigation-link-label_1xupv_1rebv_431",
+  "navigation-link-active": "awsui_navigation-link-active_1xupv_1rebv_435",
+  "navigation-link-disabled": "awsui_navigation-link-disabled_1xupv_1rebv_440",
+  "cancel-button": "awsui_cancel-button_1xupv_1rebv_444",
+  "previous-button": "awsui_previous-button_1xupv_1rebv_445",
+  "primary-button": "awsui_primary-button_1xupv_1rebv_446",
+  "skip-to-button": "awsui_skip-to-button_1xupv_1rebv_447",
+  "action-buttons": "awsui_action-buttons_1xupv_1rebv_451"
 };