npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1175 → 3.0.1176 - Mend

@cloudscape-design/components-themeable 3.0.1175 → 3.0.1176

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 (87) hide show

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

@@ -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 CHANGED Viewed

	@@ -1 +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"]}
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, 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 CHANGED Viewed

@@ -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 CHANGED Viewed

@@ -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);

package/lib/internal/template/internal/components/drag-handle-wrapper/styles.selectors.js CHANGED Viewed

@@ -2,26 +2,35 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.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/option/index.d.ts CHANGED Viewed

@@ -1,5 +1,5 @@
 import { OptionProps } from './interfaces';
 export { OptionProps };
-declare const Option: ({ option, highlightText, triggerVariant, isGroupOption, highlightedOption, selectedOption, disableTitleTooltip, labelContainerRef, labelRef, labelId, ...restProps }: OptionProps) => JSX.Element | null;
+declare const Option: ({ option, highlightText, triggerVariant, isGroupOption, highlightedOption, selectedOption, disableTitleTooltip, labelContainerRef, labelRef, labelId, customContent, ...restProps }: OptionProps) => JSX.Element | null;
 export default Option;
 //# sourceMappingURL=index.d.ts.map

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/option/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAWvB,QAAA,MAAM,MAAM,GAAI,~~sKAYb~~,WAAW,~~uBAyFb~~,CAAC;AAEF,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/option/index.tsx"],"names":[],"mappings":"AASA,OAAO,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAM3C,OAAO,EAAE,WAAW,EAAE,CAAC;AAWvB,QAAA,MAAM,MAAM,GAAI,qLAab,WAAW,uBAgGb,CAAC;AAEF,eAAe,MAAM,CAAC"}

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

@@ -13,11 +13,15 @@ function validateStringValue(value, propertyName) {
         warnOnce('DropdownOption', `This component only supports string values, but "option.${propertyName}" has ${typeof value} type. The component may work incorrectly.`);
     }
 }
-const Option = ({ option, highlightText, triggerVariant = false, isGroupOption = false, highlightedOption = false, selectedOption = false, disableTitleTooltip = false, labelContainerRef, labelRef, labelId, ...restProps }) => {
+const Option = ({ option, highlightText, triggerVariant = false, isGroupOption = false, highlightedOption = false, selectedOption = false, disableTitleTooltip = false, labelContainerRef, labelRef, labelId, customContent, ...restProps }) => {
     var _a, _b, _c, _d;
     if (!option) {
         return null;
     }
+    if (customContent) {
+        return (React.createElement("div", { "data-value": option.value, className: clsx(styles.option) },
+            React.createElement("div", { className: clsx(styles['custom-content']) }, customContent)));
+    }
     const { disabled } = option;
     const baseProps = getBaseProps(restProps);
     const SpanOrDivTag = option.labelContent ? 'div' : 'span';

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

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,QAAQ,EAAE,MAAM,+CAA+C,CAAC;AAEzE,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,EAAE,aAAa,EAAE,MAAM,sBAAsB,CAAC;AAErD,OAAO,EAAE,WAAW,EAAE,aAAa,EAAE,KAAK,EAAE,QAAQ,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,gBAAgB,CAAC;AAE/F,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,SAAS,mBAAmB,CAAC,KAAyB,EAAE,YAAoB;IAC1E,IAAI,OAAO,KAAK,KAAK,WAAW,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;QAC9D,QAAQ,CACN,gBAAgB,EAChB,2DAA2D,YAAY,SAAS,OAAO,KAAK,4CAA4C,CACzI,CAAC;IACJ,CAAC;AACH,CAAC;AAED,MAAM,MAAM,GAAG,CAAC,EACd,MAAM,EACN,aAAa,EACb,cAAc,GAAG,KAAK,EACtB,aAAa,GAAG,KAAK,EACrB,iBAAiB,GAAG,KAAK,EACzB,cAAc,GAAG,KAAK,EACtB,mBAAmB,GAAG,KAAK,EAC3B,iBAAiB,EACjB,QAAQ,EACR,OAAO,EACP,GAAG,SAAS,EACA,EAAE,EAAE;;IAChB,IAAI,CAAC,MAAM,EAAE,CAAC;QACZ,OAAO,IAAI,CAAC;IACd,CAAC;IACD,MAAM,EAAE,QAAQ,EAAE,GAAG,MAAM,CAAC;IAC5B,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,MAAM,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC;IAE1D,IAAI,aAAa,EAAE,CAAC;QAClB,mBAAmB,CAAC,MAAM,CAAC,KAAK,EAAE,OAAO,CAAC,CAAC;QAC3C,mBAAmB,CAAC,MAAM,CAAC,WAAW,EAAE,aAAa,CAAC,CAAC;QACvD,mBAAmB,CAAC,MAAM,CAAC,QAAQ,EAAE,UAAU,CAAC,CAAC;QACjD,MAAA,MAAM,CAAC,IAAI,0CAAE,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAClC,mBAAmB,CAAC,GAAG,EAAE,QAAQ,KAAK,GAAG,CAAC,CAAC;QAC7C,CAAC,CAAC,CAAC;QACH,MAAA,MAAM,CAAC,aAAa,0CAAE,OAAO,CAAC,CAAC,GAAG,EAAE,KAAK,EAAE,EAAE;YAC3C,mBAAmB,CAAC,GAAG,EAAE,iBAAiB,KAAK,GAAG,CAAC,CAAC;QACtD,CAAC,CAAC,CAAC;IACL,CAAC;~~IAED~~,MAAM,SAAS,GAAG,IAAI,CACpB,MAAM,CAAC,MAAM,EACb,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAC3B,aAAa,IAAI,MAAM,CAAC,MAAM,EAC9B,iBAAiB,IAAI,MAAM,CAAC,WAAW,EACvC,SAAS,CAAC,SAAS,CACpB,CAAC;IAEF,MAAM,IAAI,GAAG,MAAM,CAAC,YAAY,IAAI,CAClC,oBAAC,UAAU,IACT,IAAI,EAAE,MAAM,CAAC,QAAQ,EACrB,GAAG,EAAE,MAAM,CAAC,OAAO,EACnB,GAAG,EAAE,MAAM,CAAC,OAAO,EACnB,GAAG,EAAE,MAAM,CAAC,OAAO,EACnB,SAAS,EAAE,MAAM,CAAC,aAAa,EAC/B,IAAI,EAAC,QAAQ,GACb,CACH,CAAC;IAEF,OAAO,CACL,oBAAC,YAAY,OACP,SAAS,gBACD,MAAM,CAAC,KAAK,EACxB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,KAAK,EAAE,CAAC,mBAAmB,CAAC,CAAC,CAAC,CAAC,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,SAAS;QAEvE,IAAI;QACL,oBAAC,YAAY,IAAC,SAAS,EAAE,MAAM,CAAC,OAAO;YACrC,oBAAC,YAAY,IAAC,SAAS,EAAE,MAAM,CAAC,eAAe,CAAC;gBAC7C,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC,CACrB,oBAAC,YAAY,IAAC,SAAS,EAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,kBAAkB,CAAC,KAAK,CAAC,IAAG,MAAM,CAAC,YAAY,CAAgB,CAC5G,CAAC,CAAC,CAAC,CACF,oBAAC,KAAK,IACJ,iBAAiB,EAAE,iBAAiB,EACpC,QAAQ,EAAE,QAAQ,EAClB,OAAO,EAAE,OAAO,EAChB,KAAK,EAAE,MAAA,MAAM,CAAC,KAAK,mCAAI,MAAM,CAAC,KAAK,EACnC,MAAM,EAAE,MAAM,CAAC,aAAa,EAC5B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B,CACH;gBACD,oBAAC,QAAQ,IAAC,QAAQ,EAAE,MAAM,CAAC,QAAQ,EAAE,aAAa,EAAE,aAAa,EAAE,cAAc,EAAE,cAAc,GAAI,CACxF;YACf,oBAAC,WAAW,IACV,WAAW,EAAE,MAAM,CAAC,WAAW,EAC/B,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B;YACF,oBAAC,IAAI,IACH,IAAI,EAAE,MAAM,CAAC,IAAI,EACjB,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B;YACF,oBAAC,aAAa,IACZ,aAAa,EAAE,MAAM,CAAC,aAAa,EACnC,iBAAiB,EAAE,iBAAiB,EACpC,cAAc,EAAE,cAAc,EAC9B,aAAa,EAAE,aAAa,EAC5B,cAAc,EAAE,cAAc,GAC9B,CACW,CACF,CAChB,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../../base-component';\nimport { isDevelopment } from '../../is-development';\nimport { OptionProps } from './interfaces';\nimport { Description, FilteringTags, Label, LabelTag, OptionIcon, Tags } from './option-parts';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { OptionProps };\n\nfunction validateStringValue(value: string \| undefined, propertyName: string) {\n if (typeof value !== 'undefined' && typeof value !== 'string') {\n warnOnce(\n 'DropdownOption',\n `This component only supports string values, but \"option.${propertyName}\" has ${typeof value} type. The component may work incorrectly.`\n );\n }\n}\n\nconst Option = ({\n option,\n highlightText,\n triggerVariant = false,\n isGroupOption = false,\n highlightedOption = false,\n selectedOption = false,\n disableTitleTooltip = false,\n labelContainerRef,\n labelRef,\n labelId,\n ...restProps\n}: OptionProps) => {\n if (!option) {\n return null;\n }\n const { disabled } = option;\n const baseProps = getBaseProps(restProps);\n const SpanOrDivTag = option.labelContent ? 'div' : 'span';\n\n if (isDevelopment) {\n validateStringValue(option.label, 'label');\n validateStringValue(option.description, 'description');\n validateStringValue(option.labelTag, 'labelTag');\n option.tags?.forEach((tag, index) => {\n validateStringValue(tag, `tags[${index}]`);\n });\n option.filteringTags?.forEach((tag, index) => {\n validateStringValue(tag, `filteringTags[${index}]`);\n });\n }\n\n const className = clsx(\n styles.option,\n disabled && styles.disabled,\n isGroupOption && styles.parent,\n highlightedOption && styles.highlighted,\n baseProps.className\n );\n\n const icon = option.__customIcon \|\| (\n <OptionIcon\n name={option.iconName}\n url={option.iconUrl}\n svg={option.iconSvg}\n alt={option.iconAlt}\n ariaLabel={option.iconAriaLabel}\n size=\"normal\"\n />\n );\n\n return (\n <SpanOrDivTag\n {...baseProps}\n data-value={option.value}\n className={className}\n lang={option.lang}\n title={!disableTitleTooltip ? (option.label ?? option.value) : undefined}\n >\n {icon}\n <SpanOrDivTag className={styles.content}>\n <SpanOrDivTag className={styles['label-content']}>\n {option.labelContent ? (\n <SpanOrDivTag className={clsx(styles.label, analyticsSelectors.label)}>{option.labelContent}</SpanOrDivTag>\n ) : (\n <Label\n labelContainerRef={labelContainerRef}\n labelRef={labelRef}\n labelId={labelId}\n label={option.label ?? option.value}\n prefix={option.__labelPrefix}\n highlightText={highlightText}\n triggerVariant={triggerVariant}\n />\n )}\n <LabelTag labelTag={option.labelTag} highlightText={highlightText} triggerVariant={triggerVariant} />\n </SpanOrDivTag>\n <Description\n description={option.description}\n highlightedOption={highlightedOption}\n selectedOption={selectedOption}\n highlightText={highlightText}\n triggerVariant={triggerVariant}\n />\n <Tags\n tags={option.tags}\n highlightedOption={highlightedOption}\n selectedOption={selectedOption}\n highlightText={highlightText}\n triggerVariant={triggerVariant}\n />\n <FilteringTags\n filteringTags={option.filteringTags}\n highlightedOption={highlightedOption}\n selectedOption={selectedOption}\n highlightText={highlightText}\n triggerVariant={triggerVariant}\n />\n </SpanOrDivTag>\n </SpanOrDivTag>\n );\n};\n\nexport default Option;\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/option/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 from 'react';\nimport clsx from 'clsx';\n\nimport { warnOnce } from '@cloudscape-design/component-toolkit/internal';\n\nimport { getBaseProps } from '../../base-component';\nimport { isDevelopment } from '../../is-development';\nimport { OptionProps } from './interfaces';\nimport { Description, FilteringTags, Label, LabelTag, OptionIcon, Tags } from './option-parts';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport { OptionProps };\n\nfunction validateStringValue(value: string \| undefined, propertyName: string) {\n if (typeof value !== 'undefined' && typeof value !== 'string') {\n warnOnce(\n 'DropdownOption',\n `This component only supports string values, but \"option.${propertyName}\" has ${typeof value} type. The component may work incorrectly.`\n );\n }\n}\n\nconst Option = ({\n option,\n highlightText,\n triggerVariant = false,\n isGroupOption = false,\n highlightedOption = false,\n selectedOption = false,\n disableTitleTooltip = false,\n labelContainerRef,\n labelRef,\n labelId,\n customContent,\n ...restProps\n}: OptionProps) => {\n if (!option) {\n return null;\n }\n if (customContent) {\n return (\n <div data-value={option.value} className={clsx(styles.option)}>\n <div className={clsx(styles['custom-content'])}>{customContent}</div>\n </div>\n );\n }\n\n const { disabled } = option;\n const baseProps = getBaseProps(restProps);\n const SpanOrDivTag = option.labelContent ? 'div' : 'span';\n\n if (isDevelopment) {\n validateStringValue(option.label, 'label');\n validateStringValue(option.description, 'description');\n validateStringValue(option.labelTag, 'labelTag');\n option.tags?.forEach((tag, index) => {\n validateStringValue(tag, `tags[${index}]`);\n });\n option.filteringTags?.forEach((tag, index) => {\n validateStringValue(tag, `filteringTags[${index}]`);\n });\n }\n const className = clsx(\n styles.option,\n disabled && styles.disabled,\n isGroupOption && styles.parent,\n highlightedOption && styles.highlighted,\n baseProps.className\n );\n\n const icon = option.__customIcon \|\| (\n <OptionIcon\n name={option.iconName}\n url={option.iconUrl}\n svg={option.iconSvg}\n alt={option.iconAlt}\n ariaLabel={option.iconAriaLabel}\n size=\"normal\"\n />\n );\n\n return (\n <SpanOrDivTag\n {...baseProps}\n data-value={option.value}\n className={className}\n lang={option.lang}\n title={!disableTitleTooltip ? (option.label ?? option.value) : undefined}\n >\n {icon}\n <SpanOrDivTag className={styles.content}>\n <SpanOrDivTag className={styles['label-content']}>\n {option.labelContent ? (\n <SpanOrDivTag className={clsx(styles.label, analyticsSelectors.label)}>{option.labelContent}</SpanOrDivTag>\n ) : (\n <Label\n labelContainerRef={labelContainerRef}\n labelRef={labelRef}\n labelId={labelId}\n label={option.label ?? option.value}\n prefix={option.__labelPrefix}\n highlightText={highlightText}\n triggerVariant={triggerVariant}\n />\n )}\n <LabelTag labelTag={option.labelTag} highlightText={highlightText} triggerVariant={triggerVariant} />\n </SpanOrDivTag>\n <Description\n description={option.description}\n highlightedOption={highlightedOption}\n selectedOption={selectedOption}\n highlightText={highlightText}\n triggerVariant={triggerVariant}\n />\n <Tags\n tags={option.tags}\n highlightedOption={highlightedOption}\n selectedOption={selectedOption}\n highlightText={highlightText}\n triggerVariant={triggerVariant}\n />\n <FilteringTags\n filteringTags={option.filteringTags}\n highlightedOption={highlightedOption}\n selectedOption={selectedOption}\n highlightText={highlightText}\n triggerVariant={triggerVariant}\n />\n </SpanOrDivTag>\n </SpanOrDivTag>\n );\n};\n\nexport default Option;\n"]}