@cloudscape-design/components-themeable 3.0.1174 → 3.0.1176

package/lib/internal/template/internal/components/button-trigger/styles.selectors.js

@@ -2,18 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-trigger": "awsui_button-trigger_18eso_15go8_161",
-  "arrow": "awsui_arrow_18eso_15go8_161",
-  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_15go8_221",
-  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_15go8_221",
-  "has-caret": "awsui_has-caret_18eso_15go8_257",
-  "placeholder": "awsui_placeholder_18eso_15go8_260",
-  "pressed": "awsui_pressed_18eso_15go8_273",
-  "disabled": "awsui_disabled_18eso_15go8_276",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_15go8_221",
-  "readonly": "awsui_readonly_18eso_15go8_297",
-  "invalid": "awsui_invalid_18eso_15go8_319",
-  "warning": "awsui_warning_18eso_15go8_328",
-  "inline-tokens": "awsui_inline-tokens_18eso_15go8_337"
+  "button-trigger": "awsui_button-trigger_18eso_wavwd_161",
+  "arrow": "awsui_arrow_18eso_wavwd_161",
+  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_wavwd_221",
+  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_wavwd_221",
+  "has-caret": "awsui_has-caret_18eso_wavwd_257",
+  "placeholder": "awsui_placeholder_18eso_wavwd_260",
+  "pressed": "awsui_pressed_18eso_wavwd_273",
+  "disabled": "awsui_disabled_18eso_wavwd_276",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_wavwd_221",
+  "readonly": "awsui_readonly_18eso_wavwd_297",
+  "invalid": "awsui_invalid_18eso_wavwd_319",
+  "warning": "awsui_warning_18eso_wavwd_328",
+  "custom-option": "awsui_custom-option_18eso_wavwd_337",
+  "inline-tokens": "awsui_inline-tokens_18eso_wavwd_342"
 };
   

package/lib/internal/template/internal/components/drag-handle-wrapper/direction-button.d.ts

@@ -5,7 +5,9 @@ interface DirectionButtonProps {
     state: DirectionState;
     onClick: React.MouseEventHandler;
     show: boolean;
+    forcedPosition: null | 'top' | 'bottom';
+    forcedIndex: number;
 }
-export default function DirectionButton({ direction, state, show, onClick }: DirectionButtonProps): JSX.Element;
+export default function DirectionButton({ direction, state, show, onClick, forcedPosition, forcedIndex, }: DirectionButtonProps): JSX.Element;
 export {};
 //# sourceMappingURL=direction-button.d.ts.map

package/lib/internal/template/internal/components/drag-handle-wrapper/direction-button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"direction-button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAezD,UAAU,oBAAoB;IAC5B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,oBAAoB,eAmChG"}
+{"version":3,"file":"direction-button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAezD,UAAU,oBAAoB;IAC5B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;IACd,cAAc,EAAE,IAAI,GAAG,KAAK,GAAG,QAAQ,CAAC;IACxC,WAAW,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,cAAc,EACd,WAAW,GACZ,EAAE,oBAAoB,eAqCtB"}

package/lib/internal/template/internal/components/drag-handle-wrapper/direction-button.js

@@ -15,12 +15,12 @@ const ICON_LOGICAL_PROPERTY_MAP = {
     'inline-start': 'arrow-left',
     'inline-end': 'arrow-right',
 };
-export default function DirectionButton({ direction, state, show, onClick }) {
+export default function DirectionButton({ direction, state, show, onClick, forcedPosition, forcedIndex, }) {
     return (React.createElement(Transition, { in: show }, (transitionState, ref) => (
     // The wrapper exists to provide a padding around each direction button that
     // prevents any accidental presses around the button from propagating to any
     // interactive elements behind the button.
-    React.createElement("span", { ref: ref, className: clsx(styles['direction-button-wrapper'], styles[`direction-button-wrapper-${direction}`], transitionState === 'exited' && styles['direction-button-wrapper-hidden'], styles[`direction-button-wrapper-motion-${transitionState}`]) },
+    React.createElement("span", { ref: ref, className: clsx(styles['direction-button-wrapper'], !forcedPosition && styles[`direction-button-wrapper-${direction}`], forcedPosition && styles['direction-button-wrapper-forced'], forcedPosition && styles[`direction-button-wrapper-forced-${forcedPosition}-${forcedIndex}`], transitionState === 'exited' && styles['direction-button-wrapper-hidden'], styles[`direction-button-wrapper-motion-${transitionState}`]) },
         React.createElement("span", { className: clsx(styles['direction-button'], state === 'disabled' && styles['direction-button-disabled'], testUtilsStyles[`direction-button-${direction}`], !['exiting', 'exited'].includes(transitionState) && testUtilsStyles['direction-button-visible']), onClick: state !== 'disabled' ? onClick : undefined, 
             // This prevents focus from being lost to `document.body` on
             // mouse/pointer press. This allows us to listen to onClick while

package/lib/internal/template/internal/components/drag-handle-wrapper/direction-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"direction-button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,+EAA+E;AAC/E,6EAA6E;AAC7E,+BAA+B;AAC/B,MAAM,yBAAyB,GAAsC;IACnE,aAAa,EAAE,UAAU;IACzB,WAAW,EAAE,YAAY;IACzB,cAAc,EAAE,YAAY;IAC5B,YAAY,EAAE,aAAa;CAC5B,CAAC;AASF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAwB;IAC/F,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,CAAC,eAAe,EAAE,GAAG,EAAE,EAAE,CAAC;IACzB,4EAA4E;IAC5E,4EAA4E;IAC5E,0CAA0C;IAC1C,8BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,0BAA0B,CAAC,EAClC,MAAM,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAC/C,eAAe,KAAK,QAAQ,IAAI,MAAM,CAAC,iCAAiC,CAAC,EACzE,MAAM,CAAC,mCAAmC,eAAe,EAAE,CAAC,CAC7D;QAED,8BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,kBAAkB,CAAC,EAC1B,KAAK,KAAK,UAAU,IAAI,MAAM,CAAC,2BAA2B,CAAC,EAC3D,eAAe,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAChD,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,0BAA0B,CAAC,CAChG,EACD,OAAO,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YACnD,4DAA4D;YAC5D,iEAAiE;YACjE,+CAA+C;YAC/C,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;YAE9C,oBAAC,YAAY,IAAC,IAAI,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,CACpE,CACF,CACR,CACU,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { Transition } from '../transition';\nimport { Direction, DirectionState } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// Mapping from CSS logical property direction to icon name. The icon component\n// already flips the left/right icons automatically based on RTL, so we don't\n// need to do anything special.\nconst ICON_LOGICAL_PROPERTY_MAP: Record<Direction, IconProps.Name> = {\n  'block-start': 'arrow-up',\n  'block-end': 'arrow-down',\n  'inline-start': 'arrow-left',\n  'inline-end': 'arrow-right',\n};\n\ninterface DirectionButtonProps {\n  direction: Direction;\n  state: DirectionState;\n  onClick: React.MouseEventHandler;\n  show: boolean;\n}\n\nexport default function DirectionButton({ direction, state, show, onClick }: DirectionButtonProps) {\n  return (\n    <Transition in={show}>\n      {(transitionState, ref) => (\n        // The wrapper exists to provide a padding around each direction button that\n        // prevents any accidental presses around the button from propagating to any\n        // interactive elements behind the button.\n        <span\n          ref={ref}\n          className={clsx(\n            styles['direction-button-wrapper'],\n            styles[`direction-button-wrapper-${direction}`],\n            transitionState === 'exited' && styles['direction-button-wrapper-hidden'],\n            styles[`direction-button-wrapper-motion-${transitionState}`]\n          )}\n        >\n          <span\n            className={clsx(\n              styles['direction-button'],\n              state === 'disabled' && styles['direction-button-disabled'],\n              testUtilsStyles[`direction-button-${direction}`],\n              !['exiting', 'exited'].includes(transitionState) && testUtilsStyles['direction-button-visible']\n            )}\n            onClick={state !== 'disabled' ? onClick : undefined}\n            // This prevents focus from being lost to `document.body` on\n            // mouse/pointer press. This allows us to listen to onClick while\n            // keeping this button pointer-accessible only.\n            onPointerDown={event => event.preventDefault()}\n          >\n            <InternalIcon name={ICON_LOGICAL_PROPERTY_MAP[direction]} size=\"small\" />\n          </span>\n        </span>\n      )}\n    </Transition>\n  );\n}\n"]}
+{"version":3,"file":"direction-button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AAEtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,+EAA+E;AAC/E,6EAA6E;AAC7E,+BAA+B;AAC/B,MAAM,yBAAyB,GAAsC;IACnE,aAAa,EAAE,UAAU;IACzB,WAAW,EAAE,YAAY;IACzB,cAAc,EAAE,YAAY;IAC5B,YAAY,EAAE,aAAa;CAC5B,CAAC;AAWF,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EACtC,SAAS,EACT,KAAK,EACL,IAAI,EACJ,OAAO,EACP,cAAc,EACd,WAAW,GACU;IACrB,OAAO,CACL,oBAAC,UAAU,IAAC,EAAE,EAAE,IAAI,IACjB,CAAC,eAAe,EAAE,GAAG,EAAE,EAAE,CAAC;IACzB,4EAA4E;IAC5E,4EAA4E;IAC5E,0CAA0C;IAC1C,8BACE,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,0BAA0B,CAAC,EAClC,CAAC,cAAc,IAAI,MAAM,CAAC,4BAA4B,SAAS,EAAE,CAAC,EAClE,cAAc,IAAI,MAAM,CAAC,iCAAiC,CAAC,EAC3D,cAAc,IAAI,MAAM,CAAC,mCAAmC,cAAc,IAAI,WAAW,EAAE,CAAC,EAC5F,eAAe,KAAK,QAAQ,IAAI,MAAM,CAAC,iCAAiC,CAAC,EACzE,MAAM,CAAC,mCAAmC,eAAe,EAAE,CAAC,CAC7D;QAED,8BACE,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,kBAAkB,CAAC,EAC1B,KAAK,KAAK,UAAU,IAAI,MAAM,CAAC,2BAA2B,CAAC,EAC3D,eAAe,CAAC,oBAAoB,SAAS,EAAE,CAAC,EAChD,CAAC,CAAC,SAAS,EAAE,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,0BAA0B,CAAC,CAChG,EACD,OAAO,EAAE,KAAK,KAAK,UAAU,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS;YACnD,4DAA4D;YAC5D,iEAAiE;YACjE,+CAA+C;YAC/C,aAAa,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,cAAc,EAAE;YAE9C,oBAAC,YAAY,IAAC,IAAI,EAAE,yBAAyB,CAAC,SAAS,CAAC,EAAE,IAAI,EAAC,OAAO,GAAG,CACpE,CACF,CACR,CACU,CACd,CAAC;AACJ,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { Transition } from '../transition';\nimport { Direction, DirectionState } from './interfaces';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// Mapping from CSS logical property direction to icon name. The icon component\n// already flips the left/right icons automatically based on RTL, so we don't\n// need to do anything special.\nconst ICON_LOGICAL_PROPERTY_MAP: Record<Direction, IconProps.Name> = {\n  'block-start': 'arrow-up',\n  'block-end': 'arrow-down',\n  'inline-start': 'arrow-left',\n  'inline-end': 'arrow-right',\n};\n\ninterface DirectionButtonProps {\n  direction: Direction;\n  state: DirectionState;\n  onClick: React.MouseEventHandler;\n  show: boolean;\n  forcedPosition: null | 'top' | 'bottom';\n  forcedIndex: number;\n}\n\nexport default function DirectionButton({\n  direction,\n  state,\n  show,\n  onClick,\n  forcedPosition,\n  forcedIndex,\n}: DirectionButtonProps) {\n  return (\n    <Transition in={show}>\n      {(transitionState, ref) => (\n        // The wrapper exists to provide a padding around each direction button that\n        // prevents any accidental presses around the button from propagating to any\n        // interactive elements behind the button.\n        <span\n          ref={ref}\n          className={clsx(\n            styles['direction-button-wrapper'],\n            !forcedPosition && styles[`direction-button-wrapper-${direction}`],\n            forcedPosition && styles['direction-button-wrapper-forced'],\n            forcedPosition && styles[`direction-button-wrapper-forced-${forcedPosition}-${forcedIndex}`],\n            transitionState === 'exited' && styles['direction-button-wrapper-hidden'],\n            styles[`direction-button-wrapper-motion-${transitionState}`]\n          )}\n        >\n          <span\n            className={clsx(\n              styles['direction-button'],\n              state === 'disabled' && styles['direction-button-disabled'],\n              testUtilsStyles[`direction-button-${direction}`],\n              !['exiting', 'exited'].includes(transitionState) && testUtilsStyles['direction-button-visible']\n            )}\n            onClick={state !== 'disabled' ? onClick : undefined}\n            // This prevents focus from being lost to `document.body` on\n            // mouse/pointer press. This allows us to listen to onClick while\n            // keeping this button pointer-accessible only.\n            onPointerDown={event => event.preventDefault()}\n          >\n            <InternalIcon name={ICON_LOGICAL_PROPERTY_MAP[direction]} size=\"small\" />\n          </span>\n        </span>\n      )}\n    </Transition>\n  );\n}\n"]}

package/lib/internal/template/internal/components/drag-handle-wrapper/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAUA,OAAO,EAAE,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAMtD,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eA2NxB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAWA,OAAO,EAAa,sBAAsB,EAAE,MAAM,cAAc,CAAC;AAYjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,gBAAgB,EAChB,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eA+NxB"}

package/lib/internal/template/internal/components/drag-handle-wrapper/index.js

@@ -1,13 +1,19 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
+import { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';
 import Tooltip from '../tooltip';
 import DirectionButton from './direction-button';
 import PortalOverlay from './portal-overlay';
 import styles from './styles.css.js';
 import testUtilsStyles from './test-classes/styles.css.js';
+// The UAP buttons are forced to top/bottom position if the handle is close to the screen edge.
+const FORCED_POSITION_PROXIMITY_PX = 50;
+// Approximate UAP button size with margins to decide forced direction.
+const UAP_BUTTON_SIZE_PX = 40;
+const DIRECTIONS_ORDER = ['block-end', 'block-start', 'inline-end', 'inline-start'];
 export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode = 'focus', initialShowButtons = false, controlledShowButtons = false, wrapperClassName, hideButtonsOnDrag, clickDragThreshold, }) {
     const wrapperRef = useRef(null);
     const dragHandleRef = useRef(null);
@@ -112,7 +118,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
         }
         else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {
             // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode
-            setUncontrolledShowButtons(prevshowButtons => !prevshowButtons);
+            setUncontrolledShowButtons(prevShowButtons => !prevShowButtons);
         }
         else if (event.key !== 'Alt' &&
             event.key !== 'Control' &&
@@ -125,6 +131,27 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
         }
     };
     const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;
+    const [forcedPosition, setForcedPosition] = useState(null);
+    const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;
+    const visibleDirections = directionsOrder.filter(dir => directions[dir]);
+    useLayoutEffect(() => {
+        if (showButtons && dragHandleRef.current) {
+            const rect = getLogicalBoundingClientRect(dragHandleRef.current);
+            const conflicts = {
+                'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,
+                'block-end': window.innerHeight - rect.insetBlockEnd < FORCED_POSITION_PROXIMITY_PX,
+                'inline-start': rect.insetInlineStart < FORCED_POSITION_PROXIMITY_PX,
+                'inline-end': window.innerWidth - rect.insetInlineEnd < FORCED_POSITION_PROXIMITY_PX,
+            };
+            if (visibleDirections.some(direction => conflicts[direction])) {
+                const hasEnoughSpaceAbove = rect.insetBlockStart > visibleDirections.length * UAP_BUTTON_SIZE_PX;
+                setForcedPosition(hasEnoughSpaceAbove ? 'top' : 'bottom');
+            }
+            else {
+                setForcedPosition(null);
+            }
+        }
+    }, [showButtons, visibleDirections]);
     return (React.createElement(React.Fragment, null,
         React.createElement("div", { className: clsx(testUtilsStyles.root, styles.contents), ref: wrapperRef, onFocus: onWrapperFocusIn, onBlur: onWrapperFocusOut },
             React.createElement("div", { className: styles.contents, onPointerEnter: onTooltipGroupPointerEnter, onPointerLeave: onTooltipGroupPointerLeave },
@@ -133,10 +160,6 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
                 // Rendered in a portal but pointerenter/pointerleave events still propagate
                 // up the React DOM tree, which is why it's placed in this nested context.
                 React.createElement(Tooltip, { trackRef: dragHandleRef, value: tooltipText, onDismiss: () => setShowTooltip(false) })))),
-        React.createElement(PortalOverlay, { track: dragHandleRef, isDisabled: !showButtons },
-            directions['block-start'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "block-start", state: directions['block-start'], onClick: () => onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick('block-start') })),
-            directions['block-end'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "block-end", state: directions['block-end'], onClick: () => onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick('block-end') })),
-            directions['inline-start'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "inline-start", state: directions['inline-start'], onClick: () => onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick('inline-start') })),
-            directions['inline-end'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "inline-end", state: directions['inline-end'], onClick: () => onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick('inline-end') })))));
+        React.createElement(PortalOverlay, { track: dragHandleRef, isDisabled: !showButtons }, visibleDirections.map((direction, index) => directions[direction] && (React.createElement(DirectionButton, { key: direction, show: !isDisabled && showButtons, direction: direction, state: directions[direction], onClick: () => onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick(direction), forcedPosition: forcedPosition, forcedIndex: index }))))));
 }
 //# sourceMappingURL=index.js.map

package/lib/internal/template/internal/components/drag-handle-wrapper/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/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\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n  triggerMode = 'focus',\n  initialShowButtons = false,\n  controlledShowButtons = false,\n  wrapperClassName,\n  hideButtonsOnDrag,\n  clickDragThreshold,\n}: DragHandleWrapperProps) {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [uncontrolledShowButtons, setUncontrolledShowButtons] = useState(initialShowButtons);\n\n  const isPointerDown = useRef(false);\n  const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n  const didPointerDrag = useRef(false);\n\n  // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n  // on the handle wouldn't do anything.\n  const isDisabled =\n    !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n  const onWrapperFocusIn: React.FocusEventHandler = event => {\n    // The drag handle is focused when it's either tabbed to, or the pointer\n    // is pressed on it. We exclude handling the pointer press in this handler,\n    // since it could be the start of a drag event - the pointer stuff is\n    // handled in the \"pointerup\" listener instead. In cases where focus is moved\n    // to the button (by manually calling `.focus()`), the buttons should only appear\n    // if the action that triggered the focus move was the result of a keypress.\n    if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowTooltip(false);\n      if (triggerMode === 'focus') {\n        setUncontrolledShowButtons(true);\n      }\n    }\n  };\n\n  const onWrapperFocusOut: React.FocusEventHandler = event => {\n    // Close the directional buttons when the focus leaves the drag handle.\n    // \"focusout\" is also triggered when the user switches to another tab, but\n    // since it'll be returned when they switch back anyway, we exclude that\n    // case by checking for `document.hasFocus()`.\n    if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setUncontrolledShowButtons(false);\n    }\n  };\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    // We need to differentiate between a \"click\" and a \"drag\" action.\n    // We can say a \"click\" happens when a \"pointerdown\" is followed by\n    // a \"pointerup\" with no \"pointermove\" between the two.\n    // However, it would be a poor usability experience if a \"click\" isn't\n    // registered because, while pressing my mouse, I moved it by just one\n    // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n    // `clickDragThreshold` pixels before setting `didPointerDrag` to true.\n    document.addEventListener(\n      'pointermove',\n      event => {\n        if (\n          isPointerDown.current &&\n          initialPointerPosition.current &&\n          (event.clientX > initialPointerPosition.current.x + clickDragThreshold ||\n            event.clientX < initialPointerPosition.current.x - clickDragThreshold ||\n            event.clientY > initialPointerPosition.current.y + clickDragThreshold ||\n            event.clientY < initialPointerPosition.current.y - clickDragThreshold)\n        ) {\n          didPointerDrag.current = true;\n          if (hideButtonsOnDrag) {\n            setUncontrolledShowButtons(false);\n          }\n        }\n      },\n      { signal: controller.signal }\n    );\n\n    // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n    // can be called for both \"pointercancel\" and \"pointerup\" events.\n    const resetPointerDownState = () => {\n      isPointerDown.current = false;\n      initialPointerPosition.current = undefined;\n    };\n\n    document.addEventListener(\n      'pointercancel',\n      () => {\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    document.addEventListener(\n      'pointerup',\n      () => {\n        if (isPointerDown.current && !didPointerDrag.current) {\n          // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n          // Handle this as a \"click\" instead of a \"drag\".\n          setUncontrolledShowButtons(true);\n        }\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    return () => controller.abort();\n  }, [clickDragThreshold, hideButtonsOnDrag]);\n\n  const onHandlePointerDown: React.PointerEventHandler = event => {\n    // Tooltip behavior: the tooltip should appear on hover, but disappear when\n    // the pointer starts dragging (having the tooltip get in the way while\n    // you're trying to drag upwards is annoying). Additionally, the tooltip\n    // shouldn't reappear when dragging ends, but only when the pointer leaves\n    // the drag handle and comes back.\n\n    isPointerDown.current = true;\n    didPointerDrag.current = false;\n    initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n    setShowTooltip(false);\n  };\n\n  // Tooltip behavior: the tooltip should stay open when the cursor moves\n  // from the drag handle into the tooltip content itself. This is why the\n  // handler is set on the wrapper for both the drag handle and the tooltip.\n  const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n    if (!isPointerDown.current) {\n      setShowTooltip(true);\n    }\n  };\n  const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n    setShowTooltip(false);\n  };\n\n  const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n    // For accessibility reasons, pressing escape should always close the floating controls.\n    if (event.key === 'Escape') {\n      setUncontrolledShowButtons(false);\n    } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n      // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n      setUncontrolledShowButtons(prevshowButtons => !prevshowButtons);\n    } else if (\n      event.key !== 'Alt' &&\n      event.key !== 'Control' &&\n      event.key !== 'Meta' &&\n      event.key !== 'Shift' &&\n      triggerMode === 'focus'\n    ) {\n      // Pressing any other key will display the focus-visible ring around the\n      // drag handle if it's in focus, so we should also show the buttons now.\n      setUncontrolledShowButtons(true);\n    }\n  };\n\n  const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;\n\n  return (\n    <>\n      {/* Wrapper for focus detection. The buttons are shown when any element inside this wrapper is\n          focused, either via the keyboard or a pointer press. The UAP buttons will never receive focus. */}\n      <div\n        className={clsx(testUtilsStyles.root, styles.contents)}\n        ref={wrapperRef}\n        onFocus={onWrapperFocusIn}\n        onBlur={onWrapperFocusOut}\n      >\n        {/* Wrapper for pointer detection. Determines whether or not the tooltip should be shown. */}\n        <div\n          className={styles.contents}\n          onPointerEnter={onTooltipGroupPointerEnter}\n          onPointerLeave={onTooltipGroupPointerLeave}\n        >\n          {/* Position tracking wrapper used to position the tooltip and drag buttons accurately.\n            Its dimensions must match the inner button's dimensions. */}\n          <div\n            className={clsx(styles['drag-handle'], wrapperClassName)}\n            ref={dragHandleRef}\n            onPointerDown={onHandlePointerDown}\n            onKeyDown={onDragHandleKeyDown}\n          >\n            {children}\n          </div>\n\n          {!isDisabled && !showButtons && showTooltip && tooltipText && (\n            // Rendered in a portal but pointerenter/pointerleave events still propagate\n            // up the React DOM tree, which is why it's placed in this nested context.\n            <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n          )}\n        </div>\n      </div>\n\n      <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n        {directions['block-start'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"block-start\"\n            state={directions['block-start']}\n            onClick={() => onDirectionClick?.('block-start')}\n          />\n        )}\n        {directions['block-end'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"block-end\"\n            state={directions['block-end']}\n            onClick={() => onDirectionClick?.('block-end')}\n          />\n        )}\n        {directions['inline-start'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"inline-start\"\n            state={directions['inline-start']}\n            onClick={() => onDirectionClick?.('inline-start')}\n          />\n        )}\n        {directions['inline-end'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"inline-end\"\n            state={directions['inline-end']}\n            onClick={() => onDirectionClick?.('inline-end')}\n          />\n        )}\n      </PortalOverlay>\n    </>\n  );\n}\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/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\n\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\nimport { getLogicalBoundingClientRect } from '@cloudscape-design/component-toolkit/internal';\n\nimport Tooltip from '../tooltip';\nimport DirectionButton from './direction-button';\nimport { Direction, DragHandleWrapperProps } from './interfaces';\nimport PortalOverlay from './portal-overlay';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\n// The UAP buttons are forced to top/bottom position if the handle is close to the screen edge.\nconst FORCED_POSITION_PROXIMITY_PX = 50;\n// Approximate UAP button size with margins to decide forced direction.\nconst UAP_BUTTON_SIZE_PX = 40;\nconst DIRECTIONS_ORDER: Direction[] = ['block-end', 'block-start', 'inline-end', 'inline-start'];\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n  triggerMode = 'focus',\n  initialShowButtons = false,\n  controlledShowButtons = false,\n  wrapperClassName,\n  hideButtonsOnDrag,\n  clickDragThreshold,\n}: DragHandleWrapperProps) {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [uncontrolledShowButtons, setUncontrolledShowButtons] = useState(initialShowButtons);\n\n  const isPointerDown = useRef(false);\n  const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n  const didPointerDrag = useRef(false);\n\n  // The tooltip (\"Drag or select to move/resize\") shouldn't show if clicking\n  // on the handle wouldn't do anything.\n  const isDisabled =\n    !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];\n\n  const onWrapperFocusIn: React.FocusEventHandler = event => {\n    // The drag handle is focused when it's either tabbed to, or the pointer\n    // is pressed on it. We exclude handling the pointer press in this handler,\n    // since it could be the start of a drag event - the pointer stuff is\n    // handled in the \"pointerup\" listener instead. In cases where focus is moved\n    // to the button (by manually calling `.focus()`), the buttons should only appear\n    // if the action that triggered the focus move was the result of a keypress.\n    if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowTooltip(false);\n      if (triggerMode === 'focus') {\n        setUncontrolledShowButtons(true);\n      }\n    }\n  };\n\n  const onWrapperFocusOut: React.FocusEventHandler = event => {\n    // Close the directional buttons when the focus leaves the drag handle.\n    // \"focusout\" is also triggered when the user switches to another tab, but\n    // since it'll be returned when they switch back anyway, we exclude that\n    // case by checking for `document.hasFocus()`.\n    if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setUncontrolledShowButtons(false);\n    }\n  };\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    // We need to differentiate between a \"click\" and a \"drag\" action.\n    // We can say a \"click\" happens when a \"pointerdown\" is followed by\n    // a \"pointerup\" with no \"pointermove\" between the two.\n    // However, it would be a poor usability experience if a \"click\" isn't\n    // registered because, while pressing my mouse, I moved it by just one\n    // pixel, making it a \"drag\" instead. So we allow the pointer to move by\n    // `clickDragThreshold` pixels before setting `didPointerDrag` to true.\n    document.addEventListener(\n      'pointermove',\n      event => {\n        if (\n          isPointerDown.current &&\n          initialPointerPosition.current &&\n          (event.clientX > initialPointerPosition.current.x + clickDragThreshold ||\n            event.clientX < initialPointerPosition.current.x - clickDragThreshold ||\n            event.clientY > initialPointerPosition.current.y + clickDragThreshold ||\n            event.clientY < initialPointerPosition.current.y - clickDragThreshold)\n        ) {\n          didPointerDrag.current = true;\n          if (hideButtonsOnDrag) {\n            setUncontrolledShowButtons(false);\n          }\n        }\n      },\n      { signal: controller.signal }\n    );\n\n    // Shared behavior when a \"pointerdown\" state ends. This is shared so it\n    // can be called for both \"pointercancel\" and \"pointerup\" events.\n    const resetPointerDownState = () => {\n      isPointerDown.current = false;\n      initialPointerPosition.current = undefined;\n    };\n\n    document.addEventListener(\n      'pointercancel',\n      () => {\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    document.addEventListener(\n      'pointerup',\n      () => {\n        if (isPointerDown.current && !didPointerDrag.current) {\n          // The cursor didn't move much between \"pointerdown\" and \"pointerup\".\n          // Handle this as a \"click\" instead of a \"drag\".\n          setUncontrolledShowButtons(true);\n        }\n        resetPointerDownState();\n      },\n      { signal: controller.signal }\n    );\n\n    return () => controller.abort();\n  }, [clickDragThreshold, hideButtonsOnDrag]);\n\n  const onHandlePointerDown: React.PointerEventHandler = event => {\n    // Tooltip behavior: the tooltip should appear on hover, but disappear when\n    // the pointer starts dragging (having the tooltip get in the way while\n    // you're trying to drag upwards is annoying). Additionally, the tooltip\n    // shouldn't reappear when dragging ends, but only when the pointer leaves\n    // the drag handle and comes back.\n\n    isPointerDown.current = true;\n    didPointerDrag.current = false;\n    initialPointerPosition.current = { x: event.clientX, y: event.clientY };\n    setShowTooltip(false);\n  };\n\n  // Tooltip behavior: the tooltip should stay open when the cursor moves\n  // from the drag handle into the tooltip content itself. This is why the\n  // handler is set on the wrapper for both the drag handle and the tooltip.\n  const onTooltipGroupPointerEnter: React.PointerEventHandler = () => {\n    if (!isPointerDown.current) {\n      setShowTooltip(true);\n    }\n  };\n  const onTooltipGroupPointerLeave: React.PointerEventHandler = () => {\n    setShowTooltip(false);\n  };\n\n  const onDragHandleKeyDown: React.KeyboardEventHandler = event => {\n    // For accessibility reasons, pressing escape should always close the floating controls.\n    if (event.key === 'Escape') {\n      setUncontrolledShowButtons(false);\n    } else if (triggerMode === 'keyboard-activate' && (event.key === 'Enter' || event.key === ' ')) {\n      // toggle buttons when Enter or space is pressed in 'keyboard-activate' triggerMode\n      setUncontrolledShowButtons(prevShowButtons => !prevShowButtons);\n    } else if (\n      event.key !== 'Alt' &&\n      event.key !== 'Control' &&\n      event.key !== 'Meta' &&\n      event.key !== 'Shift' &&\n      triggerMode === 'focus'\n    ) {\n      // Pressing any other key will display the focus-visible ring around the\n      // drag handle if it's in focus, so we should also show the buttons now.\n      setUncontrolledShowButtons(true);\n    }\n  };\n\n  const showButtons = triggerMode === 'controlled' ? controlledShowButtons : uncontrolledShowButtons;\n\n  const [forcedPosition, setForcedPosition] = useState<null | 'top' | 'bottom'>(null);\n  const directionsOrder = forcedPosition === 'bottom' ? [...DIRECTIONS_ORDER].reverse() : DIRECTIONS_ORDER;\n  const visibleDirections = directionsOrder.filter(dir => directions[dir]);\n\n  useLayoutEffect(() => {\n    if (showButtons && dragHandleRef.current) {\n      const rect = getLogicalBoundingClientRect(dragHandleRef.current);\n      const conflicts = {\n        'block-start': rect.insetBlockStart < FORCED_POSITION_PROXIMITY_PX,\n        'block-end': window.innerHeight - rect.insetBlockEnd < FORCED_POSITION_PROXIMITY_PX,\n        'inline-start': rect.insetInlineStart < FORCED_POSITION_PROXIMITY_PX,\n        'inline-end': window.innerWidth - rect.insetInlineEnd < FORCED_POSITION_PROXIMITY_PX,\n      };\n      if (visibleDirections.some(direction => conflicts[direction])) {\n        const hasEnoughSpaceAbove = rect.insetBlockStart > visibleDirections.length * UAP_BUTTON_SIZE_PX;\n        setForcedPosition(hasEnoughSpaceAbove ? 'top' : 'bottom');\n      } else {\n        setForcedPosition(null);\n      }\n    }\n  }, [showButtons, visibleDirections]);\n\n  return (\n    <>\n      {/* Wrapper for focus detection. The buttons are shown when any element inside this wrapper is\n          focused, either via the keyboard or a pointer press. The UAP buttons will never receive focus. */}\n      <div\n        className={clsx(testUtilsStyles.root, styles.contents)}\n        ref={wrapperRef}\n        onFocus={onWrapperFocusIn}\n        onBlur={onWrapperFocusOut}\n      >\n        {/* Wrapper for pointer detection. Determines whether or not the tooltip should be shown. */}\n        <div\n          className={styles.contents}\n          onPointerEnter={onTooltipGroupPointerEnter}\n          onPointerLeave={onTooltipGroupPointerLeave}\n        >\n          {/* Position tracking wrapper used to position the tooltip and drag buttons accurately.\n            Its dimensions must match the inner button's dimensions. */}\n          <div\n            className={clsx(styles['drag-handle'], wrapperClassName)}\n            ref={dragHandleRef}\n            onPointerDown={onHandlePointerDown}\n            onKeyDown={onDragHandleKeyDown}\n          >\n            {children}\n          </div>\n\n          {!isDisabled && !showButtons && showTooltip && tooltipText && (\n            // Rendered in a portal but pointerenter/pointerleave events still propagate\n            // up the React DOM tree, which is why it's placed in this nested context.\n            <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n          )}\n        </div>\n      </div>\n\n      <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n        {visibleDirections.map(\n          (direction, index) =>\n            directions[direction] && (\n              <DirectionButton\n                key={direction}\n                show={!isDisabled && showButtons}\n                direction={direction}\n                state={directions[direction]}\n                onClick={() => onDirectionClick?.(direction)}\n                forcedPosition={forcedPosition}\n                forcedIndex={index}\n              />\n            )\n        )}\n      </PortalOverlay>\n    </>\n  );\n}\n"]}

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.css.js

@@ -1,26 +1,35 @@
 
     import './styles.scoped.css';
     export default {
-  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_1njrl_169",
-  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_1njrl_189",
-  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_1njrl_189",
-  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_1njrl_189",
-  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_1njrl_189",
-  "drag-handle-entry": "awsui_drag-handle-entry_155yk_1njrl_1",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_1njrl_1",
-  "drag-handle-exit": "awsui_drag-handle-exit_155yk_1njrl_1",
-  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_1njrl_1",
-  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_1njrl_229",
-  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_1njrl_233",
-  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_1njrl_237",
-  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_1njrl_248",
-  "contents": "awsui_contents_155yk_1njrl_259",
-  "portal-overlay": "awsui_portal-overlay_155yk_1njrl_263",
-  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_1njrl_271",
-  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_1njrl_275",
-  "drag-handle": "awsui_drag-handle_155yk_1njrl_279",
-  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_1njrl_292",
-  "direction-button": "awsui_direction-button_155yk_1njrl_169",
-  "direction-button-disabled": "awsui_direction-button-disabled_155yk_1njrl_335"
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_1u2kp_169",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_1u2kp_189",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_1u2kp_189",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_1u2kp_189",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_1u2kp_189",
+  "drag-handle-entry": "awsui_drag-handle-entry_155yk_1u2kp_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_1u2kp_1",
+  "drag-handle-exit": "awsui_drag-handle-exit_155yk_1u2kp_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_1u2kp_1",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_1u2kp_229",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_1u2kp_233",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_1u2kp_237",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_1u2kp_248",
+  "contents": "awsui_contents_155yk_1u2kp_259",
+  "portal-overlay": "awsui_portal-overlay_155yk_1u2kp_263",
+  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_1u2kp_271",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_1u2kp_275",
+  "drag-handle": "awsui_drag-handle_155yk_1u2kp_279",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_1u2kp_292",
+  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_1u2kp_316",
+  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_1u2kp_320",
+  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_1u2kp_324",
+  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_1u2kp_328",
+  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_1u2kp_332",
+  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_1u2kp_336",
+  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_1u2kp_340",
+  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_1u2kp_344",
+  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_1u2kp_348",
+  "direction-button": "awsui_direction-button_155yk_1u2kp_169",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_1u2kp_371"
 };
   

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.scoped.css

@@ -150,7 +150,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
  Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
  SPDX-License-Identifier: Apache-2.0
 */
-@keyframes awsui_drag-handle-entry_155yk_1njrl_1 {
+@keyframes awsui_drag-handle-entry_155yk_1u2kp_1 {
   from {
     transform: translate(var(--awsui-drag-handle-animation-inline-offset-rhu47t), var(--awsui-drag-handle-animation-block-offset-rhu47t));
   }
@@ -158,7 +158,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     transform: translate(0, 0);
   }
 }
-@keyframes awsui_drag-handle-exit_155yk_1njrl_1 {
+@keyframes awsui_drag-handle-exit_155yk_1u2kp_1 {
   from {
     transform: translate(0, 0);
   }
@@ -166,11 +166,11 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     transform: translate(var(--awsui-drag-handle-animation-inline-offset-rhu47t), var(--awsui-drag-handle-animation-block-offset-rhu47t));
   }
 }
-.awsui_direction-button-wrapper_155yk_1njrl_169:not(#\9) {
+.awsui_direction-button-wrapper_155yk_1u2kp_169:not(#\9) {
   --awsui-drag-handle-animation-inline-offset-rhu47t: 0;
   --awsui-drag-handle-animation-block-offset-rhu47t: 0;
 }
-@keyframes awsui_awsui-motion-fade-in_155yk_1njrl_1 {
+@keyframes awsui_awsui-motion-fade-in_155yk_1u2kp_1 {
   from {
     opacity: 0.2;
   }
@@ -178,7 +178,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 1;
   }
 }
-@keyframes awsui_awsui-motion-fade-out-0_155yk_1njrl_1 {
+@keyframes awsui_awsui-motion-fade-out-0_155yk_1u2kp_1 {
   from {
     opacity: 1;
   }
@@ -186,81 +186,81 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 0;
   }
 }
-.awsui_direction-button-wrapper-motion-enter_155yk_1njrl_189:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_1njrl_189:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_1njrl_189:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_1njrl_189:not(#\9) {
+.awsui_direction-button-wrapper-motion-enter_155yk_1u2kp_189:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_1u2kp_189:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_1u2kp_189:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_1u2kp_189:not(#\9) {
   pointer-events: none;
 }
-.awsui_direction-button-wrapper-motion-entering_155yk_1njrl_189:not(#\9) {
-  animation: awsui_drag-handle-entry_155yk_1njrl_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out), awsui_awsui-motion-fade-in_155yk_1njrl_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out);
+.awsui_direction-button-wrapper-motion-entering_155yk_1u2kp_189:not(#\9) {
+  animation: awsui_drag-handle-entry_155yk_1u2kp_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out), awsui_awsui-motion-fade-in_155yk_1u2kp_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-entering_155yk_1njrl_189:not(#\9) {
+  .awsui_direction-button-wrapper-motion-entering_155yk_1u2kp_189:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_1njrl_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_1njrl_189:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_1u2kp_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_1u2kp_189:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_direction-button-wrapper-motion-exiting_155yk_1njrl_189:not(#\9) {
-  animation: awsui_drag-handle-exit_155yk_1njrl_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out) forwards, awsui_awsui-motion-fade-out-0_155yk_1njrl_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out) forwards;
+.awsui_direction-button-wrapper-motion-exiting_155yk_1u2kp_189:not(#\9) {
+  animation: awsui_drag-handle-exit_155yk_1u2kp_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out) forwards, awsui_awsui-motion-fade-out-0_155yk_1u2kp_1 var(--motion-duration-complex-hv88cf, 270ms) var(--motion-easing-responsive-dxkfpl, ease-out) forwards;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-exiting_155yk_1njrl_189:not(#\9) {
+  .awsui_direction-button-wrapper-motion-exiting_155yk_1u2kp_189:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_1njrl_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_1njrl_189:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_1u2kp_189:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_1u2kp_189:not(#\9) {
   animation: none;
   transition: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper_155yk_1njrl_169:not(#\9) {
+  .awsui_direction-button-wrapper_155yk_1u2kp_169:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_1njrl_169:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_1njrl_169:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_1u2kp_169:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_1u2kp_169:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_direction-button-wrapper-block-start_155yk_1njrl_229:not(#\9) {
+.awsui_direction-button-wrapper-block-start_155yk_1u2kp_229:not(#\9) {
   --awsui-drag-handle-animation-block-offset-rhu47t: 20px;
 }
 
-.awsui_direction-button-wrapper-block-end_155yk_1njrl_233:not(#\9) {
+.awsui_direction-button-wrapper-block-end_155yk_1u2kp_233:not(#\9) {
   --awsui-drag-handle-animation-block-offset-rhu47t: -20px;
 }
 
-.awsui_direction-button-wrapper-inline-start_155yk_1njrl_237:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_1u2kp_237:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_direction-button-wrapper-inline-start_155yk_1njrl_237:not(#\9):dir(ltr) {
+.awsui_direction-button-wrapper-inline-start_155yk_1u2kp_237:not(#\9):dir(ltr) {
   --awsui-drag-handle-animation-inline-offset-rhu47t: 20px;
 }
-.awsui_direction-button-wrapper-inline-start_155yk_1njrl_237:not(#\9):dir(rtl) {
+.awsui_direction-button-wrapper-inline-start_155yk_1u2kp_237:not(#\9):dir(rtl) {
   --awsui-drag-handle-animation-inline-offset-rhu47t: -20px;
 }
 
-.awsui_direction-button-wrapper-inline-end_155yk_1njrl_248:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_1u2kp_248:not(#\9) {
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_direction-button-wrapper-inline-end_155yk_1njrl_248:not(#\9):dir(ltr) {
+.awsui_direction-button-wrapper-inline-end_155yk_1u2kp_248:not(#\9):dir(ltr) {
   --awsui-drag-handle-animation-inline-offset-rhu47t: -20px;
 }
-.awsui_direction-button-wrapper-inline-end_155yk_1njrl_248:not(#\9):dir(rtl) {
+.awsui_direction-button-wrapper-inline-end_155yk_1u2kp_248:not(#\9):dir(rtl) {
   --awsui-drag-handle-animation-inline-offset-rhu47t: 20px;
 }
 
-.awsui_contents_155yk_1njrl_259:not(#\9) {
+.awsui_contents_155yk_1u2kp_259:not(#\9) {
   display: contents;
 }
 
-.awsui_portal-overlay_155yk_1njrl_263:not(#\9) {
+.awsui_portal-overlay_155yk_1u2kp_263:not(#\9) {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -268,20 +268,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 7000;
 }
 
-.awsui_portal-overlay-disabled_155yk_1njrl_271:not(#\9) {
+.awsui_portal-overlay-disabled_155yk_1u2kp_271:not(#\9) {
   display: none;
 }
 
-.awsui_portal-overlay-contents_155yk_1njrl_275:not(#\9) {
+.awsui_portal-overlay-contents_155yk_1u2kp_275:not(#\9) {
   pointer-events: auto;
 }
 
-.awsui_drag-handle_155yk_1njrl_279:not(#\9) {
+.awsui_drag-handle_155yk_1u2kp_279:not(#\9) {
   position: relative;
   display: inline-flex;
 }
 
-.awsui_direction-button-wrapper_155yk_1njrl_169:not(#\9) {
+.awsui_direction-button-wrapper_155yk_1u2kp_169:not(#\9) {
   position: absolute;
   block-size: var(--space-static-xl-pek4x1, 24px);
   inline-size: var(--space-static-xl-pek4x1, 24px);
@@ -289,31 +289,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: var(--space-static-xxs-0cgyf1, 4px);
 }
 
-.awsui_direction-button-wrapper-hidden_155yk_1njrl_292:not(#\9) {
+.awsui_direction-button-wrapper-hidden_155yk_1u2kp_292:not(#\9) {
   display: none;
 }
 
-.awsui_direction-button-wrapper-block-start_155yk_1njrl_229:not(#\9) {
+.awsui_direction-button-wrapper-block-start_155yk_1u2kp_229:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-block-end_155yk_1njrl_233:not(#\9) {
+.awsui_direction-button-wrapper-block-end_155yk_1u2kp_233:not(#\9) {
   inset-block-end: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-inline-start_155yk_1njrl_237:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_1u2kp_237:not(#\9) {
   inset-inline-start: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button-wrapper-inline-end_155yk_1njrl_248:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_1u2kp_248:not(#\9) {
   inset-inline-end: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
 }
 
-.awsui_direction-button_155yk_1njrl_169:not(#\9) {
+.awsui_direction-button-wrapper-forced_155yk_1u2kp_316:not(#\9) {
+  inset-inline-start: calc(50% - (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) / 2);
+}
+
+.awsui_direction-button-wrapper-forced-top-0_155yk_1u2kp_320:not(#\9) {
+  inset-block-start: calc(-1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
+}
+
+.awsui_direction-button-wrapper-forced-top-1_155yk_1u2kp_324:not(#\9) {
+  inset-block-start: calc(-2 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
+}
+
+.awsui_direction-button-wrapper-forced-top-2_155yk_1u2kp_328:not(#\9) {
+  inset-block-start: calc(-3 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
+}
+
+.awsui_direction-button-wrapper-forced-top-3_155yk_1u2kp_332:not(#\9) {
+  inset-block-start: calc(-4 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)));
+}
+
+.awsui_direction-button-wrapper-forced-bottom-0_155yk_1u2kp_336:not(#\9) {
+  inset-block-start: calc(1 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) - 50%);
+}
+
+.awsui_direction-button-wrapper-forced-bottom-1_155yk_1u2kp_340:not(#\9) {
+  inset-block-start: calc(2 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) - 50%);
+}
+
+.awsui_direction-button-wrapper-forced-bottom-2_155yk_1u2kp_344:not(#\9) {
+  inset-block-start: calc(3 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) - 50%);
+}
+
+.awsui_direction-button-wrapper-forced-bottom-3_155yk_1u2kp_348:not(#\9) {
+  inset-block-start: calc(4 * (var(--space-static-xl-pek4x1, 24px) + 2 * var(--space-static-xxs-0cgyf1, 4px)) - 50%);
+}
+
+.awsui_direction-button_155yk_1u2kp_169:not(#\9) {
   position: absolute;
   border-width: 0;
   cursor: pointer;
@@ -332,14 +368,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-direction-button-default-dkices, #ffffff);
   box-shadow: var(--shadow-dropdown-skxpuu, 0 1px 1px 0 rgba(0, 28, 36, 0.3), 1px 1px 1px 0 rgba(0, 28, 36, 0.15), -1px 1px 1px 0 rgba(0, 28, 36, 0.15));
 }
-.awsui_direction-button_155yk_1njrl_169:not(#\9):not(.awsui_direction-button-disabled_155yk_1njrl_335):hover {
+.awsui_direction-button_155yk_1u2kp_169:not(#\9):not(.awsui_direction-button-disabled_155yk_1u2kp_371):hover {
   background-color: var(--color-background-direction-button-hover-v5bxfc, #414750);
 }
-.awsui_direction-button_155yk_1njrl_169:not(#\9):not(.awsui_direction-button-disabled_155yk_1njrl_335):active {
+.awsui_direction-button_155yk_1u2kp_169:not(#\9):not(.awsui_direction-button-disabled_155yk_1u2kp_371):active {
   background-color: var(--color-background-direction-button-active-wn6s2j, #2a2e33);
 }
 
-.awsui_direction-button-disabled_155yk_1njrl_335:not(#\9) {
+.awsui_direction-button-disabled_155yk_1u2kp_371:not(#\9) {
   cursor: default;
   background-color: var(--color-background-direction-button-disabled-rcznmi, #eaeded);
   color: var(--color-text-direction-button-disabled-596cgx, #aab7b8);