npm - @cloudscape-design/components-themeable - Versions diffs - 3.0.1360 → 3.0.1362 - Mend

@cloudscape-design/components-themeable 3.0.1360 → 3.0.1362

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

package/lib/internal/template/internal/components/button-trigger/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":"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~~KACV~~,CAAC,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,6BAA6B,CAAC,iBAAiB,CAAC,CAAC;QAEjF,QAAQ;QACR,CAAC,SAAS,IAAI,CACb,8BAAM,SAAS,EAAE,MAAM,CAAC,KAAK;YAC3B,oBAAC,YAAY,IACX,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,mBAAmB,EACxE,IAAI,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,EAC1D,OAAO,EAAE,QAAQ,IAAI,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,QAAQ,~~GACrD~~,CACG,CACR,CACM,CACV,CAAC;AACJ,CAAC,CAAC;AAQF,eAAe,KAAK,CAAC,UAAU,CAAC,aAAa,CAAC,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../../icon/internal';\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { BaseKeyDetail, CancelableEventHandler } from '../../../types/events';\nimport { getBaseProps } from '../../base-component';\nimport { fireCancelableEvent, fireKeyboardEvent } from '../../events';\nimport {\n GeneratedAnalyticsMetadataButtonTriggerCollapse,\n GeneratedAnalyticsMetadataButtonTriggerExpand,\n} from './analytics-metadata/interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface ButtonTriggerProps extends BaseComponentProps {\n children?: React.ReactNode;\n pressed?: boolean;\n hideCaret?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n invalid?: boolean;\n warning?: boolean;\n inFilteringToken?: 'root' \| 'nested';\n inlineTokens?: boolean;\n ariaHasPopup?: 'true' \| 'listbox' \| 'dialog';\n ariaControls?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n onKeyUp?: CancelableEventHandler<BaseKeyDetail>;\n onMouseDown?: CancelableEventHandler;\n onClick?: CancelableEventHandler;\n onFocus?: CancelableEventHandler;\n onBlur?: CancelableEventHandler<{ relatedTarget: Node \| null }>;\n hasCustomContent?: boolean;\n autoFocus?: boolean;\n}\n\nconst ButtonTrigger = (\n {\n children,\n pressed,\n hideCaret = false,\n disabled = false,\n readOnly = false,\n invalid = false,\n warning = false,\n inlineTokens,\n inFilteringToken,\n ariaHasPopup,\n ariaLabelledby,\n ariaDescribedby,\n ariaControls,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onClick,\n onFocus,\n onBlur,\n hasCustomContent = false,\n autoFocus,\n ...restProps\n }: ButtonTriggerProps,\n ref: React.Ref<HTMLButtonElement>\n) => {\n const baseProps = getBaseProps(restProps);\n let attributes: ButtonHTMLAttributes<HTMLButtonElement> = {\n ...baseProps,\n type: 'button',\n className: clsx(\n styles['button-trigger'],\n analyticsSelectors['button-trigger'],\n baseProps.className,\n pressed && styles.pressed,\n disabled && styles.disabled,\n invalid && styles.invalid,\n warning && !invalid && styles.warning,\n !hideCaret && styles['has-caret'],\n readOnly && styles.readonly,\n inFilteringToken && styles['in-filtering-token'],\n inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`],\n inlineTokens && styles['inline-tokens'],\n !!hasCustomContent && styles['custom-option']\n ),\n disabled: disabled,\n 'aria-expanded': pressed,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-haspopup': ariaHasPopup ?? 'listbox',\n 'aria-controls': ariaControls,\n 'aria-disabled': readOnly && !disabled ? 'true' : undefined,\n autoFocus,\n };\n\n if (!readOnly) {\n attributes = {\n ...attributes,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)),\n onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)),\n onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)),\n onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)),\n };\n }\n\n if (invalid) {\n attributes['aria-invalid'] = invalid;\n }\n\n const analyticsMetadata:\n \| GeneratedAnalyticsMetadataButtonTriggerExpand\n \| GeneratedAnalyticsMetadataButtonTriggerCollapse = {\n action: !pressed ? 'expand' : 'collapse',\n detail: {\n label: { root: 'self' },\n },\n };\n\n return (\n <button\n ref={ref}\n {...attributes}\n {...(disabled \|\| readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n >\n {children}\n {!hideCaret && (\n <span className={styles.arrow}>\n <InternalIcon\n name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal'}\n variant={disabled \|\| readOnly ? 'disabled' : 'normal'}\n />\n </span>\n )}\n </button>\n );\n};\n\nexport namespace ButtonTriggerProps {\n export interface Ref {\n focus(): void;\n }\n}\n\nexport default React.forwardRef(ButtonTrigger);\n"]}
1	+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/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, { ButtonHTMLAttributes } from 'react';\nimport clsx from 'clsx';\n\nimport { isThemeActive, Theme } from '@cloudscape-design/component-toolkit/internal';\nimport { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../../icon/internal';\nimport { BaseComponentProps } from '../../../types/base-component';\nimport { BaseKeyDetail, CancelableEventHandler } from '../../../types/events';\nimport { getBaseProps } from '../../base-component';\nimport { fireCancelableEvent, fireKeyboardEvent } from '../../events';\nimport {\n GeneratedAnalyticsMetadataButtonTriggerCollapse,\n GeneratedAnalyticsMetadataButtonTriggerExpand,\n} from './analytics-metadata/interfaces';\n\nimport analyticsSelectors from './analytics-metadata/styles.css.js';\nimport styles from './styles.css.js';\n\nexport interface ButtonTriggerProps extends BaseComponentProps {\n children?: React.ReactNode;\n pressed?: boolean;\n hideCaret?: boolean;\n disabled?: boolean;\n readOnly?: boolean;\n invalid?: boolean;\n warning?: boolean;\n inFilteringToken?: 'root' \| 'nested';\n inlineTokens?: boolean;\n ariaHasPopup?: 'true' \| 'listbox' \| 'dialog';\n ariaControls?: string;\n ariaLabelledby?: string;\n ariaDescribedby?: string;\n onKeyDown?: CancelableEventHandler<BaseKeyDetail>;\n onKeyUp?: CancelableEventHandler<BaseKeyDetail>;\n onMouseDown?: CancelableEventHandler;\n onClick?: CancelableEventHandler;\n onFocus?: CancelableEventHandler;\n onBlur?: CancelableEventHandler<{ relatedTarget: Node \| null }>;\n hasCustomContent?: boolean;\n autoFocus?: boolean;\n}\n\nconst ButtonTrigger = (\n {\n children,\n pressed,\n hideCaret = false,\n disabled = false,\n readOnly = false,\n invalid = false,\n warning = false,\n inlineTokens,\n inFilteringToken,\n ariaHasPopup,\n ariaLabelledby,\n ariaDescribedby,\n ariaControls,\n onKeyDown,\n onKeyUp,\n onMouseDown,\n onClick,\n onFocus,\n onBlur,\n hasCustomContent = false,\n autoFocus,\n ...restProps\n }: ButtonTriggerProps,\n ref: React.Ref<HTMLButtonElement>\n) => {\n const baseProps = getBaseProps(restProps);\n let attributes: ButtonHTMLAttributes<HTMLButtonElement> = {\n ...baseProps,\n type: 'button',\n className: clsx(\n styles['button-trigger'],\n analyticsSelectors['button-trigger'],\n baseProps.className,\n pressed && styles.pressed,\n disabled && styles.disabled,\n invalid && styles.invalid,\n warning && !invalid && styles.warning,\n !hideCaret && styles['has-caret'],\n readOnly && styles.readonly,\n inFilteringToken && styles['in-filtering-token'],\n inFilteringToken && styles[`in-filtering-token-${inFilteringToken}`],\n inlineTokens && styles['inline-tokens'],\n !!hasCustomContent && styles['custom-option']\n ),\n disabled: disabled,\n 'aria-expanded': pressed,\n 'aria-labelledby': ariaLabelledby,\n 'aria-describedby': ariaDescribedby,\n 'aria-haspopup': ariaHasPopup ?? 'listbox',\n 'aria-controls': ariaControls,\n 'aria-disabled': readOnly && !disabled ? 'true' : undefined,\n autoFocus,\n };\n\n if (!readOnly) {\n attributes = {\n ...attributes,\n onKeyDown: onKeyDown && (event => fireKeyboardEvent(onKeyDown, event)),\n onKeyUp: onKeyUp && (event => fireKeyboardEvent(onKeyUp, event)),\n onMouseDown: onMouseDown && (event => fireCancelableEvent(onMouseDown, {}, event)),\n onClick: onClick && (event => fireCancelableEvent(onClick, {}, event)),\n onFocus: onFocus && (event => fireCancelableEvent(onFocus, {}, event)),\n onBlur: onBlur && (event => fireCancelableEvent(onBlur, { relatedTarget: event.relatedTarget }, event)),\n };\n }\n\n if (invalid) {\n attributes['aria-invalid'] = invalid;\n }\n\n const analyticsMetadata:\n \| GeneratedAnalyticsMetadataButtonTriggerExpand\n \| GeneratedAnalyticsMetadataButtonTriggerCollapse = {\n action: !pressed ? 'expand' : 'collapse',\n detail: {\n label: { root: 'self' },\n },\n };\n\n return (\n <button\n ref={ref}\n {...attributes}\n data-awsui-motion-trigger=\"hover\"\n {...(disabled \|\| readOnly ? {} : getAnalyticsMetadataAttribute(analyticsMetadata))}\n >\n {children}\n {!hideCaret && (\n <span className={styles.arrow}>\n <InternalIcon\n name={isThemeActive(Theme.OneTheme) ? 'angle-down' : 'caret-down-filled'}\n size={isThemeActive(Theme.OneTheme) ? 'x-small' : 'normal'}\n variant={disabled \|\| readOnly ? 'disabled' : 'normal'}\n nativeAttributes={{ 'data-awsui-motion-target': '' }}\n />\n </span>\n )}\n </button>\n );\n};\n\nexport namespace ButtonTriggerProps {\n export interface Ref {\n focus(): void;\n }\n}\n\nexport default React.forwardRef(ButtonTrigger);\n"]}

package/lib/internal/template/internal/components/drag-handle/button.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,gBAAgB,~~kaA2ErB~~,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
1	+ {"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAM/C,QAAA,MAAM,gBAAgB,kaA8ErB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -31,7 +31,9 @@ const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'norma
     // (See https://bugs.webkit.org/show_bug.cgi?id=22261)
     // Otherwise, we can't reliably catch keyboard events coming from the handle
     // when it is being dragged.
-    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled'], active && styles.active), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-pressed": ariaValue ? undefined : active, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown },
+    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, testUtilsStyles.root, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled'], active && styles.active), "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedby, "aria-disabled": disabled, "aria-pressed": ariaValue ? undefined : active, "aria-valuemax": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMax, "aria-valuemin": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueMin, "aria-valuenow": ariaValue === null || ariaValue === void 0 ? void 0 : ariaValue.valueNow, onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown, ...(variant === 'drag-indicator'
+            ? { 'data-awsui-motion-trigger': 'hover', 'data-awsui-motion-target': '' }
+            : {}) },
         React.createElement("div", { className: styles['prevent-pointer'] },
             React.createElement(InternalIcon, { ...iconProps }))));
 });

package/lib/internal/template/internal/components/drag-handle/button.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,YAAY,EAAE,MAAM,+CAA+C,CAAC;AAG7E,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAElD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AACrC,OAAO,eAAe,MAAM,8BAA8B,CAAC;AAE3D,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,MAAM,GAAG,KAAK,EACd,SAAS,EACT,SAAS,EACT,cAAc,EACd,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,OAAO,EACP,SAAS,GACO,EAClB,GAAuB,EACvB,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,MAAM,SAAS,GAAc,CAAC,GAAG,EAAE;QACjC,MAAM,MAAM,GAAG;YACb,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS;YACrD,IAAI;SACL,CAAC;QACF,QAAQ,OAAO,EAAE,CAAC;YAChB,KAAK,gBAAgB;gBACnB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,gBAAgB,EAAE,CAAC;YAC/C,KAAK,aAAa;gBAChB,OAAO,EAAE,GAAG,MAAM,EAAE,IAAI,EAAE,aAAa,EAAE,CAAC;YAC5C,KAAK,mBAAmB;gBACtB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,EAAE,CAAC;YACjE,KAAK,iBAAiB;gBACpB,OAAO,EAAE,GAAG,MAAM,EAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,EAAE,CAAC;QACjE,CAAC;IACH,CAAC,CAAC,EAAE,CAAC;IAEL,OAAO;IACL,4DAA4D;IAC5D,oDAAoD;IACpD,sDAAsD;IACtD,4EAA4E;IAC5E,4BAA4B;IAC5B,6BACE,GAAG,EAAE,YAAY,CAAC,GAAG,EAAE,mBAAmB,CAAC,EAC3C,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,eAAe,CAAC,IAAI,EACpB,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,EACrC,MAAM,IAAI,MAAM,CAAC,MAAM,CACxB,gBACW,SAAS,qBACJ,cAAc,sBACb,eAAe,mBAClB,QAAQ,kBACT,SAAS,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,MAAM,mBAC7B,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,mBACnB,SAAS,aAAT,SAAS,uBAAT,SAAS,CAAE,QAAQ,EAClC,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS;~~QAGpB~~,6BAAK,SAAS,EAAE,MAAM,CAAC,iBAAiB,CAAC;YACvC,oBAAC,YAAY,OAAK,SAAS,GAAI,CAC3B,CACF,CACP,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,gBAAgB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n (\n {\n variant = 'drag-indicator',\n size = 'normal',\n active = false,\n className,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedby,\n ariaValue,\n disabled,\n onPointerDown,\n onClick,\n onKeyDown,\n }: DragHandleProps,\n ref: React.Ref<Element>\n ) => {\n const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n const iconProps: IconProps = (() => {\n const shared = {\n variant: disabled ? ('disabled' as const) : undefined,\n size,\n };\n switch (variant) {\n case 'drag-indicator':\n return { ...shared, name: 'drag-indicator' };\n case 'resize-area':\n return { ...shared, name: 'resize-area' };\n case 'resize-horizontal':\n return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n case 'resize-vertical':\n return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n }\n })();\n\n return (\n // We need to use a div with button role instead of a button\n // so that Safari will focus on it when clicking it.\n // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n // Otherwise, we can't reliably catch keyboard events coming from the handle\n // when it is being dragged.\n <div\n ref={useMergeRefs(ref, dragHandleRefObject)}\n role={ariaValue ? 'slider' : 'button'}\n tabIndex={0}\n className={clsx(\n className,\n styles.handle,\n testUtilsStyles.root,\n styles[`handle-${variant}`],\n styles[`handle-size-${size}`],\n disabled && styles['handle-disabled'],\n active && styles.active\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedby}\n aria-disabled={disabled}\n aria-pressed={ariaValue ? undefined : active}\n aria-valuemax={ariaValue?.valueMax}\n aria-valuemin={ariaValue?.valueMin}\n aria-valuenow={ariaValue?.valueNow}\n onPointerDown={onPointerDown}\n onClick={onClick}\n onKeyDown={onKeyDown}\n >\n {/* ensure that events happen on the parent div, not the icon */}\n <div className={styles['prevent-pointer']}>\n <InternalIcon {...iconProps} />\n </div>\n </div>\n );\n }\n);\n\nexport default DragHandleButton;\n"]}
1	+ {"version":3,"file":"button.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.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, { forwardRef, useRef } from 'react';\nimport clsx from 'clsx';\n\nimport { useMergeRefs } from '@cloudscape-design/component-toolkit/internal';\n\nimport { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\nimport testUtilsStyles from './test-classes/styles.css.js';\n\nconst DragHandleButton = forwardRef(\n (\n {\n variant = 'drag-indicator',\n size = 'normal',\n active = false,\n className,\n ariaLabel,\n ariaLabelledBy,\n ariaDescribedby,\n ariaValue,\n disabled,\n onPointerDown,\n onClick,\n onKeyDown,\n }: DragHandleProps,\n ref: React.Ref<Element>\n ) => {\n const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n const iconProps: IconProps = (() => {\n const shared = {\n variant: disabled ? ('disabled' as const) : undefined,\n size,\n };\n switch (variant) {\n case 'drag-indicator':\n return { ...shared, name: 'drag-indicator' };\n case 'resize-area':\n return { ...shared, name: 'resize-area' };\n case 'resize-horizontal':\n return { ...shared, svg: <ResizeIcon variant=\"horizontal\" /> };\n case 'resize-vertical':\n return { ...shared, svg: <ResizeIcon variant=\"vertical\" /> };\n }\n })();\n\n return (\n // We need to use a div with button role instead of a button\n // so that Safari will focus on it when clicking it.\n // (See https://bugs.webkit.org/show_bug.cgi?id=22261)\n // Otherwise, we can't reliably catch keyboard events coming from the handle\n // when it is being dragged.\n <div\n ref={useMergeRefs(ref, dragHandleRefObject)}\n role={ariaValue ? 'slider' : 'button'}\n tabIndex={0}\n className={clsx(\n className,\n styles.handle,\n testUtilsStyles.root,\n styles[`handle-${variant}`],\n styles[`handle-size-${size}`],\n disabled && styles['handle-disabled'],\n active && styles.active\n )}\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedby}\n aria-disabled={disabled}\n aria-pressed={ariaValue ? undefined : active}\n aria-valuemax={ariaValue?.valueMax}\n aria-valuemin={ariaValue?.valueMin}\n aria-valuenow={ariaValue?.valueNow}\n onPointerDown={onPointerDown}\n onClick={onClick}\n onKeyDown={onKeyDown}\n {...(variant === 'drag-indicator'\n ? { 'data-awsui-motion-trigger': 'hover', 'data-awsui-motion-target': '' }\n : {})}\n >\n {/* ensure that events happen on the parent div, not the icon */}\n <div className={styles['prevent-pointer']}>\n <InternalIcon {...iconProps} />\n </div>\n </div>\n );\n }\n);\n\nexport default DragHandleButton;\n"]}

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

	@@ -1 +1 @@
1	- {"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,eAwPxB"}
1	+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"AAYA,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,eAwPxB"}

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

@@ -4,6 +4,7 @@ import React, { useEffect, useRef, useState } from 'react';
 import clsx from 'clsx';
 import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
 import { getLogicalBoundingClientRect, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
+import { isKeyboardInteraction } from '../../utils/focus-visible';
 import Tooltip from '../tooltip';
 import DirectionButton from './direction-button';
 import PortalOverlay from './portal-overlay';
@@ -35,7 +36,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
         // handled in the "pointerup" listener instead. In cases where focus is moved
         // to the button (by manually calling `.focus()`), the buttons should only appear
         // if the action that triggered the focus move was the result of a keypress.
-        if (document.body.dataset.awsuiFocusVisible && !nodeContains(wrapperRef.current, event.relatedTarget)) {
+        if (isKeyboardInteraction(wrapperRef.current) && !nodeContains(wrapperRef.current, event.relatedTarget)) {
             setShowTooltip(false);
             if (triggerMode === 'focus') {
                 setUncontrolledShowButtons(true);

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';\nimport { getLogicalBoundingClientRect, useUniqueId } 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 // Links the portaled UAP buttons back to the drag handle's position in the regular DOM,\n // so outside-click / focus detection treats them as belonging to the handle's container.\n const referrerId = useUniqueId('drag-handle');\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 // Continuously monitor position while buttons are shown to handle CSS transitions/animations.\n // The position needs to be recalculated as the element may animate into its final position.\n useEffect(() => {\n if (!showButtons \|\| !dragHandleRef.current) {\n if (forcedPosition !== null) {\n setForcedPosition(null);\n }\n return;\n }\n\n let frameId: number;\n\n const checkPosition = () => {\n if (!dragHandleRef.current) {\n return;\n }\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 frameId = requestAnimationFrame(checkPosition);\n };\n\n frameId = requestAnimationFrame(checkPosition);\n\n return () => {\n cancelAnimationFrame(frameId);\n };\n }, [forcedPosition, 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 id={referrerId}\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} referrerId={referrerId}>\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"]}
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';\nimport { getLogicalBoundingClientRect, useUniqueId } from '@cloudscape-design/component-toolkit/internal';\n\nimport { isKeyboardInteraction } from '../../utils/focus-visible';\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 // Links the portaled UAP buttons back to the drag handle's position in the regular DOM,\n // so outside-click / focus detection treats them as belonging to the handle's container.\n const referrerId = useUniqueId('drag-handle');\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 (isKeyboardInteraction(wrapperRef.current) && !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 // Continuously monitor position while buttons are shown to handle CSS transitions/animations.\n // The position needs to be recalculated as the element may animate into its final position.\n useEffect(() => {\n if (!showButtons \|\| !dragHandleRef.current) {\n if (forcedPosition !== null) {\n setForcedPosition(null);\n }\n return;\n }\n\n let frameId: number;\n\n const checkPosition = () => {\n if (!dragHandleRef.current) {\n return;\n }\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 frameId = requestAnimationFrame(checkPosition);\n };\n\n frameId = requestAnimationFrame(checkPosition);\n\n return () => {\n cancelAnimationFrame(frameId);\n };\n }, [forcedPosition, 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 id={referrerId}\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} referrerId={referrerId}>\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,35 +1,35 @@
     import './styles.scoped.css';
     export default {
-  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_1xe8a_29",
-  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_1xe8a_49",
-  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_1xe8a_49",
-  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_1xe8a_49",
-  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_1xe8a_49",
-  "drag-handle-entry": "awsui_drag-handle-entry_155yk_1xe8a_1",
-  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_1xe8a_1",
-  "drag-handle-exit": "awsui_drag-handle-exit_155yk_1xe8a_1",
-  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_1xe8a_1",
-  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_1xe8a_89",
-  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_1xe8a_93",
-  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_1xe8a_97",
-  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_1xe8a_108",
-  "contents": "awsui_contents_155yk_1xe8a_119",
-  "portal-overlay": "awsui_portal-overlay_155yk_1xe8a_123",
-  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_1xe8a_131",
-  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_1xe8a_135",
-  "drag-handle": "awsui_drag-handle_155yk_1xe8a_139",
-  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_1xe8a_152",
-  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_1xe8a_176",
-  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_1xe8a_180",
-  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_1xe8a_184",
-  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_1xe8a_188",
-  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_1xe8a_192",
-  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_1xe8a_196",
-  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_1xe8a_200",
-  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_1xe8a_204",
-  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_1xe8a_208",
-  "direction-button": "awsui_direction-button_155yk_1xe8a_29",
-  "direction-button-disabled": "awsui_direction-button-disabled_155yk_1xe8a_231"
+  "direction-button-wrapper": "awsui_direction-button-wrapper_155yk_wnan2_29",
+  "direction-button-wrapper-motion-enter": "awsui_direction-button-wrapper-motion-enter_155yk_wnan2_49",
+  "direction-button-wrapper-motion-entering": "awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49",
+  "direction-button-wrapper-motion-exit": "awsui_direction-button-wrapper-motion-exit_155yk_wnan2_49",
+  "direction-button-wrapper-motion-exiting": "awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49",
+  "drag-handle-entry": "awsui_drag-handle-entry_155yk_wnan2_1",
+  "awsui-motion-fade-in": "awsui_awsui-motion-fade-in_155yk_wnan2_1",
+  "drag-handle-exit": "awsui_drag-handle-exit_155yk_wnan2_1",
+  "awsui-motion-fade-out-0": "awsui_awsui-motion-fade-out-0_155yk_wnan2_1",
+  "direction-button-wrapper-block-start": "awsui_direction-button-wrapper-block-start_155yk_wnan2_89",
+  "direction-button-wrapper-block-end": "awsui_direction-button-wrapper-block-end_155yk_wnan2_93",
+  "direction-button-wrapper-inline-start": "awsui_direction-button-wrapper-inline-start_155yk_wnan2_97",
+  "direction-button-wrapper-inline-end": "awsui_direction-button-wrapper-inline-end_155yk_wnan2_108",
+  "contents": "awsui_contents_155yk_wnan2_119",
+  "portal-overlay": "awsui_portal-overlay_155yk_wnan2_123",
+  "portal-overlay-disabled": "awsui_portal-overlay-disabled_155yk_wnan2_131",
+  "portal-overlay-contents": "awsui_portal-overlay-contents_155yk_wnan2_135",
+  "drag-handle": "awsui_drag-handle_155yk_wnan2_139",
+  "direction-button-wrapper-hidden": "awsui_direction-button-wrapper-hidden_155yk_wnan2_152",
+  "direction-button-wrapper-forced": "awsui_direction-button-wrapper-forced_155yk_wnan2_176",
+  "direction-button-wrapper-forced-top-0": "awsui_direction-button-wrapper-forced-top-0_155yk_wnan2_180",
+  "direction-button-wrapper-forced-top-1": "awsui_direction-button-wrapper-forced-top-1_155yk_wnan2_184",
+  "direction-button-wrapper-forced-top-2": "awsui_direction-button-wrapper-forced-top-2_155yk_wnan2_188",
+  "direction-button-wrapper-forced-top-3": "awsui_direction-button-wrapper-forced-top-3_155yk_wnan2_192",
+  "direction-button-wrapper-forced-bottom-0": "awsui_direction-button-wrapper-forced-bottom-0_155yk_wnan2_196",
+  "direction-button-wrapper-forced-bottom-1": "awsui_direction-button-wrapper-forced-bottom-1_155yk_wnan2_200",
+  "direction-button-wrapper-forced-bottom-2": "awsui_direction-button-wrapper-forced-bottom-2_155yk_wnan2_204",
+  "direction-button-wrapper-forced-bottom-3": "awsui_direction-button-wrapper-forced-bottom-3_155yk_wnan2_208",
+  "direction-button": "awsui_direction-button_155yk_wnan2_29",
+  "direction-button-disabled": "awsui_direction-button-disabled_155yk_wnan2_231"
 };

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

@@ -10,27 +10,27 @@ 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_1xe8a_1 {
+@keyframes awsui_drag-handle-entry_155yk_wnan2_1 {
   from {
-    transform: translate(var(--awsui-drag-handle-animation-inline-offset-esndbs), var(--awsui-drag-handle-animation-block-offset-esndbs));
+    transform: translate(var(--awsui-drag-handle-animation-inline-offset-66120l), var(--awsui-drag-handle-animation-block-offset-66120l));
   }
   to {
     transform: translate(0, 0);
   }
 }
-@keyframes awsui_drag-handle-exit_155yk_1xe8a_1 {
+@keyframes awsui_drag-handle-exit_155yk_wnan2_1 {
   from {
     transform: translate(0, 0);
   }
   to {
-    transform: translate(var(--awsui-drag-handle-animation-inline-offset-esndbs), var(--awsui-drag-handle-animation-block-offset-esndbs));
+    transform: translate(var(--awsui-drag-handle-animation-inline-offset-66120l), var(--awsui-drag-handle-animation-block-offset-66120l));
   }
 }
-.awsui_direction-button-wrapper_155yk_1xe8a_29:not(#\9) {
-  --awsui-drag-handle-animation-inline-offset-esndbs: 0;
-  --awsui-drag-handle-animation-block-offset-esndbs: 0;
+.awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9) {
+  --awsui-drag-handle-animation-inline-offset-66120l: 0;
+  --awsui-drag-handle-animation-block-offset-66120l: 0;
 }
-@keyframes awsui_awsui-motion-fade-in_155yk_1xe8a_1 {
+@keyframes awsui_awsui-motion-fade-in_155yk_wnan2_1 {
   from {
     opacity: 0.2;
   }
@@ -38,7 +38,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 1;
   }
 }
-@keyframes awsui_awsui-motion-fade-out-0_155yk_1xe8a_1 {
+@keyframes awsui_awsui-motion-fade-out-0_155yk_wnan2_1 {
   from {
     opacity: 1;
   }
@@ -46,81 +46,81 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
     opacity: 0;
   }
 }
-.awsui_direction-button-wrapper-motion-enter_155yk_1xe8a_49:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_1xe8a_49:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_1xe8a_49:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_1xe8a_49:not(#\9) {
+.awsui_direction-button-wrapper-motion-enter_155yk_wnan2_49:not(#\9), .awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9), .awsui_direction-button-wrapper-motion-exit_155yk_wnan2_49:not(#\9), .awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9) {
   pointer-events: none;
 }
-.awsui_direction-button-wrapper-motion-entering_155yk_1xe8a_49:not(#\9) {
-  animation: awsui_drag-handle-entry_155yk_1xe8a_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out), awsui_awsui-motion-fade-in_155yk_1xe8a_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out);
+.awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9) {
+  animation: awsui_drag-handle-entry_155yk_wnan2_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out), awsui_awsui-motion-fade-in_155yk_wnan2_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out);
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-entering_155yk_1xe8a_49:not(#\9) {
+  .awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_1xe8a_49:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_1xe8a_49:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-entering_155yk_wnan2_49:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_direction-button-wrapper-motion-exiting_155yk_1xe8a_49:not(#\9) {
-  animation: awsui_drag-handle-exit_155yk_1xe8a_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out) forwards, awsui_awsui-motion-fade-out-0_155yk_1xe8a_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out) forwards;
+.awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9) {
+  animation: awsui_drag-handle-exit_155yk_wnan2_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out) forwards, awsui_awsui-motion-fade-out-0_155yk_wnan2_1 var(--motion-duration-complex-n5wfwh, 270ms) var(--motion-easing-responsive-k7246o, ease-out) forwards;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper-motion-exiting_155yk_1xe8a_49:not(#\9) {
+  .awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_1xe8a_49:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_1xe8a_49:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper-motion-exiting_155yk_wnan2_49:not(#\9) {
   animation: none;
   transition: none;
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_direction-button-wrapper_155yk_1xe8a_29:not(#\9) {
+  .awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_1xe8a_29:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_1xe8a_29:not(#\9) {
+.awsui-motion-disabled .awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9), .awsui-mode-entering .awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9) {
   animation: none;
   transition: none;
 }
-.awsui_direction-button-wrapper-block-start_155yk_1xe8a_89:not(#\9) {
-  --awsui-drag-handle-animation-block-offset-esndbs: 20px;
+.awsui_direction-button-wrapper-block-start_155yk_wnan2_89:not(#\9) {
+  --awsui-drag-handle-animation-block-offset-66120l: 20px;
 }
-.awsui_direction-button-wrapper-block-end_155yk_1xe8a_93:not(#\9) {
-  --awsui-drag-handle-animation-block-offset-esndbs: -20px;
+.awsui_direction-button-wrapper-block-end_155yk_wnan2_93:not(#\9) {
+  --awsui-drag-handle-animation-block-offset-66120l: -20px;
 }
-.awsui_direction-button-wrapper-inline-start_155yk_1xe8a_97:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_wnan2_97: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_1xe8a_97:not(#\9):dir(ltr) {
-  --awsui-drag-handle-animation-inline-offset-esndbs: 20px;
+.awsui_direction-button-wrapper-inline-start_155yk_wnan2_97:not(#\9):dir(ltr) {
+  --awsui-drag-handle-animation-inline-offset-66120l: 20px;
 }
-.awsui_direction-button-wrapper-inline-start_155yk_1xe8a_97:not(#\9):dir(rtl) {
-  --awsui-drag-handle-animation-inline-offset-esndbs: -20px;
+.awsui_direction-button-wrapper-inline-start_155yk_wnan2_97:not(#\9):dir(rtl) {
+  --awsui-drag-handle-animation-inline-offset-66120l: -20px;
 }
-.awsui_direction-button-wrapper-inline-end_155yk_1xe8a_108:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_wnan2_108: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_1xe8a_108:not(#\9):dir(ltr) {
-  --awsui-drag-handle-animation-inline-offset-esndbs: -20px;
+.awsui_direction-button-wrapper-inline-end_155yk_wnan2_108:not(#\9):dir(ltr) {
+  --awsui-drag-handle-animation-inline-offset-66120l: -20px;
 }
-.awsui_direction-button-wrapper-inline-end_155yk_1xe8a_108:not(#\9):dir(rtl) {
-  --awsui-drag-handle-animation-inline-offset-esndbs: 20px;
+.awsui_direction-button-wrapper-inline-end_155yk_wnan2_108:not(#\9):dir(rtl) {
+  --awsui-drag-handle-animation-inline-offset-66120l: 20px;
 }
-.awsui_contents_155yk_1xe8a_119:not(#\9) {
+.awsui_contents_155yk_wnan2_119:not(#\9) {
   display: contents;
 }
-.awsui_portal-overlay_155yk_1xe8a_123:not(#\9) {
+.awsui_portal-overlay_155yk_wnan2_123:not(#\9) {
   position: absolute;
   inset-block-start: 0;
   inset-inline-start: 0;
@@ -128,20 +128,20 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   z-index: 7000;
 }
-.awsui_portal-overlay-disabled_155yk_1xe8a_131:not(#\9) {
+.awsui_portal-overlay-disabled_155yk_wnan2_131:not(#\9) {
   display: none;
 }
-.awsui_portal-overlay-contents_155yk_1xe8a_135:not(#\9) {
+.awsui_portal-overlay-contents_155yk_wnan2_135:not(#\9) {
   pointer-events: auto;
 }
-.awsui_drag-handle_155yk_1xe8a_139:not(#\9) {
+.awsui_drag-handle_155yk_wnan2_139:not(#\9) {
   position: relative;
   display: inline-flex;
 }
-.awsui_direction-button-wrapper_155yk_1xe8a_29:not(#\9) {
+.awsui_direction-button-wrapper_155yk_wnan2_29:not(#\9) {
   position: absolute;
   block-size: var(--space-static-xl-frcfkv, 24px);
   inline-size: var(--space-static-xl-frcfkv, 24px);
@@ -149,67 +149,67 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   padding-inline: var(--space-static-xxs-vzto3j, 4px);
 }
-.awsui_direction-button-wrapper-hidden_155yk_1xe8a_152:not(#\9) {
+.awsui_direction-button-wrapper-hidden_155yk_wnan2_152:not(#\9) {
   display: none;
 }
-.awsui_direction-button-wrapper-block-start_155yk_1xe8a_89:not(#\9) {
+.awsui_direction-button-wrapper-block-start_155yk_wnan2_89:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-block-end_155yk_1xe8a_93:not(#\9) {
+.awsui_direction-button-wrapper-block-end_155yk_wnan2_93:not(#\9) {
   inset-block-end: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
   inset-inline-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-inline-start_155yk_1xe8a_97:not(#\9) {
+.awsui_direction-button-wrapper-inline-start_155yk_wnan2_97:not(#\9) {
   inset-inline-start: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-inline-end_155yk_1xe8a_108:not(#\9) {
+.awsui_direction-button-wrapper-inline-end_155yk_wnan2_108:not(#\9) {
   inset-inline-end: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
   inset-block-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-forced_155yk_1xe8a_176:not(#\9) {
+.awsui_direction-button-wrapper-forced_155yk_wnan2_176:not(#\9) {
   inset-inline-start: calc(50% - (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)) / 2);
 }
-.awsui_direction-button-wrapper-forced-top-0_155yk_1xe8a_180:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-0_155yk_wnan2_180:not(#\9) {
   inset-block-start: calc(-1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-top-1_155yk_1xe8a_184:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-1_155yk_wnan2_184:not(#\9) {
   inset-block-start: calc(-2 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-top-2_155yk_1xe8a_188:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-2_155yk_wnan2_188:not(#\9) {
   inset-block-start: calc(-3 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-top-3_155yk_1xe8a_192:not(#\9) {
+.awsui_direction-button-wrapper-forced-top-3_155yk_wnan2_192:not(#\9) {
   inset-block-start: calc(-4 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-bottom-0_155yk_1xe8a_196:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-0_155yk_wnan2_196:not(#\9) {
   inset-block-start: calc(1 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-bottom-1_155yk_1xe8a_200:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-1_155yk_wnan2_200:not(#\9) {
   inset-block-start: calc(2 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-bottom-2_155yk_1xe8a_204:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-2_155yk_wnan2_204:not(#\9) {
   inset-block-start: calc(3 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button-wrapper-forced-bottom-3_155yk_1xe8a_208:not(#\9) {
+.awsui_direction-button-wrapper-forced-bottom-3_155yk_wnan2_208:not(#\9) {
   inset-block-start: calc(4 * (var(--space-static-xl-frcfkv, 24px) + 2 * var(--space-static-xxs-vzto3j, 4px)));
 }
-.awsui_direction-button_155yk_1xe8a_29:not(#\9) {
+.awsui_direction-button_155yk_wnan2_29:not(#\9) {
   position: absolute;
   border-width: 0;
   cursor: pointer;
@@ -228,14 +228,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   color: var(--color-text-direction-button-default-rvsx02, #ffffff);
   box-shadow: var(--shadow-dropdown-ogwesf, 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_1xe8a_29:not(#\9):not(.awsui_direction-button-disabled_155yk_1xe8a_231):hover {
+.awsui_direction-button_155yk_wnan2_29:not(#\9):not(.awsui_direction-button-disabled_155yk_wnan2_231):hover {
   background-color: var(--color-background-direction-button-hover-ixmpit, #414750);
 }
-.awsui_direction-button_155yk_1xe8a_29:not(#\9):not(.awsui_direction-button-disabled_155yk_1xe8a_231):active {
+.awsui_direction-button_155yk_wnan2_29:not(#\9):not(.awsui_direction-button-disabled_155yk_wnan2_231):active {
   background-color: var(--color-background-direction-button-active-ilpypx, #2a2e33);
 }
-.awsui_direction-button-disabled_155yk_1xe8a_231:not(#\9) {
+.awsui_direction-button-disabled_155yk_wnan2_231:not(#\9) {
   cursor: default;
   background-color: var(--color-background-direction-button-disabled-p1avil, #eaeded);
   color: var(--color-text-direction-button-disabled-qzn64l, #aab7b8);