@cloudscape-design/components-themeable 3.0.1310 → 3.0.1312

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

@@ -1 +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 { getAnalyticsMetadataAttribute } from '@cloudscape-design/component-toolkit/internal/analytics-metadata';\n\nimport InternalIcon from '../../../icon/internal';\nimport { BaseComponentProps, getBaseProps } from '../../base-component';\nimport { BaseKeyDetail, CancelableEventHandler, 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 name=\"caret-down-filled\" variant={disabled || readOnly ? 'disabled' : 'normal'} />\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"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/button-trigger/index.tsx"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAA+B,MAAM,OAAO,CAAC;AACpD,OAAO,IAAI,MAAM,MAAM,CAAC;AAExB,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,+CAA+C,CAAC;AACrF,OAAO,EAAE,6BAA6B,EAAE,MAAM,kEAAkE,CAAC;AAEjH,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAsB,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACxE,OAAO,EAAyC,mBAAmB,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAM7G,OAAO,kBAAkB,MAAM,oCAAoC,CAAC;AACpE,OAAO,MAAM,MAAM,iBAAiB,CAAC;AA0BrC,MAAM,aAAa,GAAG,CACpB,EACE,QAAQ,EACR,OAAO,EACP,SAAS,GAAG,KAAK,EACjB,QAAQ,GAAG,KAAK,EAChB,QAAQ,GAAG,KAAK,EAChB,OAAO,GAAG,KAAK,EACf,OAAO,GAAG,KAAK,EACf,YAAY,EACZ,gBAAgB,EAChB,YAAY,EACZ,cAAc,EACd,eAAe,EACf,YAAY,EACZ,SAAS,EACT,OAAO,EACP,WAAW,EACX,OAAO,EACP,OAAO,EACP,MAAM,EACN,gBAAgB,GAAG,KAAK,EACxB,SAAS,EACT,GAAG,SAAS,EACO,EACrB,GAAiC,EACjC,EAAE;IACF,MAAM,SAAS,GAAG,YAAY,CAAC,SAAS,CAAC,CAAC;IAC1C,IAAI,UAAU,GAA4C;QACxD,GAAG,SAAS;QACZ,IAAI,EAAE,QAAQ;QACd,SAAS,EAAE,IAAI,CACb,MAAM,CAAC,gBAAgB,CAAC,EACxB,kBAAkB,CAAC,gBAAgB,CAAC,EACpC,SAAS,CAAC,SAAS,EACnB,OAAO,IAAI,MAAM,CAAC,OAAO,EACzB,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAC3B,OAAO,IAAI,MAAM,CAAC,OAAO,EACzB,OAAO,IAAI,CAAC,OAAO,IAAI,MAAM,CAAC,OAAO,EACrC,CAAC,SAAS,IAAI,MAAM,CAAC,WAAW,CAAC,EACjC,QAAQ,IAAI,MAAM,CAAC,QAAQ,EAC3B,gBAAgB,IAAI,MAAM,CAAC,oBAAoB,CAAC,EAChD,gBAAgB,IAAI,MAAM,CAAC,sBAAsB,gBAAgB,EAAE,CAAC,EACpE,YAAY,IAAI,MAAM,CAAC,eAAe,CAAC,EACvC,CAAC,CAAC,gBAAgB,IAAI,MAAM,CAAC,eAAe,CAAC,CAC9C;QACD,QAAQ,EAAE,QAAQ;QAClB,eAAe,EAAE,OAAO;QACxB,iBAAiB,EAAE,cAAc;QACjC,kBAAkB,EAAE,eAAe;QACnC,eAAe,EAAE,YAAY,aAAZ,YAAY,cAAZ,YAAY,GAAI,SAAS;QAC1C,eAAe,EAAE,YAAY;QAC7B,eAAe,EAAE,QAAQ,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,SAAS;QAC3D,SAAS;KACV,CAAC;IAEF,IAAI,CAAC,QAAQ,EAAE,CAAC;QACd,UAAU,GAAG;YACX,GAAG,UAAU;YACb,SAAS,EAAE,SAAS,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,SAAS,EAAE,KAAK,CAAC,CAAC;YACtE,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAAC,OAAO,EAAE,KAAK,CAAC,CAAC;YAChE,WAAW,EAAE,WAAW,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,WAAW,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;YAClF,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;YACtE,OAAO,EAAE,OAAO,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,EAAE,EAAE,KAAK,CAAC,CAAC;YACtE,MAAM,EAAE,MAAM,IAAI,CAAC,KAAK,CAAC,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,EAAE,aAAa,EAAE,KAAK,CAAC,aAAa,EAAE,EAAE,KAAK,CAAC,CAAC;SACxG,CAAC;IACJ,CAAC;IAED,IAAI,OAAO,EAAE,CAAC;QACZ,UAAU,CAAC,cAAc,CAAC,GAAG,OAAO,CAAC;IACvC,CAAC;IAED,MAAM,iBAAiB,GAE+B;QACpD,MAAM,EAAE,CAAC,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU;QACxC,MAAM,EAAE;YACN,KAAK,EAAE,EAAE,IAAI,EAAE,MAAM,EAAE;SACxB;KACF,CAAC;IAEF,OAAO,CACL,gCACE,GAAG,EAAE,GAAG,KACJ,UAAU,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,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,aAAa,CAAC,KAAK,CAAC,QAAQ,CAAC,IAAI,MAAM,CAAC,WAAW,CAAC,CAAC;YACvF,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, getBaseProps } from '../../base-component';\nimport { BaseKeyDetail, CancelableEventHandler, 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={clsx(styles.arrow, isThemeActive(Theme.OneTheme) && styles['one-theme'])}>\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"]}

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

@@ -1,19 +1,20 @@
 
     import './styles.scoped.css';
     export default {
-  "button-trigger": "awsui_button-trigger_18eso_1i5rk_161",
-  "arrow": "awsui_arrow_18eso_1i5rk_161",
-  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_1i5rk_221",
-  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_1i5rk_221",
-  "has-caret": "awsui_has-caret_18eso_1i5rk_257",
-  "placeholder": "awsui_placeholder_18eso_1i5rk_260",
-  "pressed": "awsui_pressed_18eso_1i5rk_273",
-  "disabled": "awsui_disabled_18eso_1i5rk_276",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_1i5rk_221",
-  "readonly": "awsui_readonly_18eso_1i5rk_297",
-  "invalid": "awsui_invalid_18eso_1i5rk_322",
-  "warning": "awsui_warning_18eso_1i5rk_331",
-  "custom-option": "awsui_custom-option_18eso_1i5rk_340",
-  "inline-tokens": "awsui_inline-tokens_18eso_1i5rk_345"
+  "button-trigger": "awsui_button-trigger_18eso_6h2xj_161",
+  "arrow": "awsui_arrow_18eso_6h2xj_161",
+  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_6h2xj_221",
+  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_6h2xj_221",
+  "has-caret": "awsui_has-caret_18eso_6h2xj_257",
+  "placeholder": "awsui_placeholder_18eso_6h2xj_260",
+  "one-theme": "awsui_one-theme_18eso_6h2xj_270",
+  "pressed": "awsui_pressed_18eso_6h2xj_276",
+  "disabled": "awsui_disabled_18eso_6h2xj_282",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_6h2xj_221",
+  "readonly": "awsui_readonly_18eso_6h2xj_303",
+  "invalid": "awsui_invalid_18eso_6h2xj_328",
+  "warning": "awsui_warning_18eso_6h2xj_337",
+  "custom-option": "awsui_custom-option_18eso_6h2xj_346",
+  "inline-tokens": "awsui_inline-tokens_18eso_6h2xj_351"
 };
   

package/lib/internal/template/internal/components/button-trigger/styles.scoped.css

@@ -158,21 +158,21 @@ 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
 */
-.awsui_button-trigger_18eso_1i5rk_161 > .awsui_arrow_18eso_1i5rk_161:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161 > .awsui_arrow_18eso_6h2xj_161:not(#\9) {
   transition: transform var(--motion-duration-rotate-180-4er9qu, 135ms) var(--motion-easing-rotate-180-xlspcm, cubic-bezier(0.165, 0.84, 0.44, 1));
 }
 @media (prefers-reduced-motion: reduce) {
-  .awsui_button-trigger_18eso_1i5rk_161 > .awsui_arrow_18eso_1i5rk_161:not(#\9) {
+  .awsui_button-trigger_18eso_6h2xj_161 > .awsui_arrow_18eso_6h2xj_161:not(#\9) {
     animation: none;
     transition: none;
   }
 }
-.awsui-motion-disabled .awsui_button-trigger_18eso_1i5rk_161 > .awsui_arrow_18eso_1i5rk_161:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_1i5rk_161 > .awsui_arrow_18eso_1i5rk_161:not(#\9) {
+.awsui-motion-disabled .awsui_button-trigger_18eso_6h2xj_161 > .awsui_arrow_18eso_6h2xj_161:not(#\9), .awsui-mode-entering .awsui_button-trigger_18eso_6h2xj_161 > .awsui_arrow_18eso_6h2xj_161:not(#\9) {
   animation: none;
   transition: none;
 }
 
-.awsui_button-trigger_18eso_1i5rk_161:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161:not(#\9) {
   border-collapse: separate;
   border-spacing: 0;
   box-sizing: border-box;
@@ -218,7 +218,7 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-input-default-txli8y, #687078);
   min-block-size: var(--size-vertical-input-8gzd1t, 32px);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-root_18eso_1i5rk_221:not(#\9), .awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-nested_18eso_1i5rk_221:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-root_18eso_6h2xj_221:not(#\9), .awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-nested_18eso_6h2xj_221:not(#\9) {
   padding-block: 0px;
   padding-inline: var(--space-field-horizontal-n5peob, 8px);
   border-block-width: var(--border-width-token-cwl2sl, 1px);
@@ -229,14 +229,14 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   block-size: 100%;
   min-block-size: unset;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-root_18eso_1i5rk_221:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-nested_18eso_1i5rk_221:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-root_18eso_6h2xj_221:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-nested_18eso_6h2xj_221:not(#\9):focus {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-root_18eso_1i5rk_221:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-nested_18eso_1i5rk_221:not(#\9):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-root_18eso_6h2xj_221:not(#\9):focus, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-nested_18eso_6h2xj_221:not(#\9):focus {
   outline: 2px dotted transparent;
   outline-offset: calc(var(--space-filtering-token-operation-select-focus-outline-gutter-jo15dc, 0px) - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-root_18eso_1i5rk_221:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-nested_18eso_1i5rk_221:not(#\9):focus::before {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-root_18eso_6h2xj_221:not(#\9):focus::before, body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-nested_18eso_6h2xj_221:not(#\9):focus::before {
   content: " ";
   display: block;
   position: absolute;
@@ -250,40 +250,46 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161.awsui_
   border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token-nested_18eso_1i5rk_221:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token-nested_18eso_6h2xj_221:not(#\9) {
   border-start-start-radius: calc(var(--border-radius-input-4vr9on, 2px) / 2);
   border-end-start-radius: calc(var(--border-radius-input-4vr9on, 2px) / 2);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_has-caret_18eso_1i5rk_257:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_has-caret_18eso_6h2xj_257:not(#\9) {
   padding-inline-end: var(--space-field-icon-offset-ihoxql, 32px);
 }
-.awsui_button-trigger_18eso_1i5rk_161 > .awsui_placeholder_18eso_1i5rk_260:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161 > .awsui_placeholder_18eso_6h2xj_260:not(#\9) {
   color: var(--color-text-input-placeholder-hvcry0, #687078);
   font-style: italic;
 }
-.awsui_button-trigger_18eso_1i5rk_161 > .awsui_arrow_18eso_1i5rk_161:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161 > .awsui_arrow_18eso_6h2xj_161:not(#\9) {
   position: absolute;
   inset-inline-end: var(--space-field-horizontal-n5peob, 8px);
   inset-block-start: calc(50% - var(--line-height-body-m-bedeoh, 22px) / 2);
   color: var(--color-text-button-inline-icon-default-4lrtb0, #545b64);
 }
-.awsui_button-trigger_18eso_1i5rk_161:not(#\9):hover > .awsui_arrow_18eso_1i5rk_161 {
+.awsui_button-trigger_18eso_6h2xj_161 > .awsui_arrow_18eso_6h2xj_161.awsui_one-theme_18eso_6h2xj_270:not(#\9) {
+  inset-block-start: calc(50% - var(--line-height-body-m-bedeoh, 22px) / 2 + var(--space-xxxs-3w1kr2, 2px));
+}
+.awsui_button-trigger_18eso_6h2xj_161:not(#\9):hover > .awsui_arrow_18eso_6h2xj_161 {
   color: var(--color-text-button-inline-icon-hover-8fgg9l, #16191f);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_pressed_18eso_1i5rk_273 > .awsui_arrow_18eso_1i5rk_161:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_pressed_18eso_6h2xj_276 > .awsui_arrow_18eso_6h2xj_161:not(#\9) {
   transform: rotate(-180deg);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_disabled_18eso_1i5rk_276:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_pressed_18eso_6h2xj_276 > .awsui_arrow_18eso_6h2xj_161.awsui_one-theme_18eso_6h2xj_270:not(#\9) {
+  inset-block-start: calc(50% - var(--line-height-body-m-bedeoh, 22px) / 2 - var(--space-xxxs-3w1kr2, 2px));
+}
+.awsui_button-trigger_18eso_6h2xj_161.awsui_disabled_18eso_6h2xj_282:not(#\9) {
   background-color: var(--color-background-input-disabled-4vlau3, #eaeded);
   border-block: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-input-disabled-tz38ro, #eaeded);
   border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-input-disabled-tz38ro, #eaeded);
   color: var(--color-text-input-disabled-y5t5v9, #879596);
   cursor: auto;
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_disabled_18eso_1i5rk_276 > .awsui_arrow_18eso_1i5rk_161:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_disabled_18eso_6h2xj_282 > .awsui_arrow_18eso_6h2xj_161:not(#\9) {
   color: var(--color-text-button-inline-icon-disabled-o6nywg, #aab7b8);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_disabled_18eso_1i5rk_276.awsui_in-filtering-token_18eso_1i5rk_221:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_disabled_18eso_6h2xj_282.awsui_in-filtering-token_18eso_6h2xj_221:not(#\9) {
   background-color: var(--color-background-input-disabled-4vlau3, #eaeded);
   border-block: var(--border-width-token-cwl2sl, 1px) solid var(--color-border-input-disabled-tz38ro, #eaeded);
   border-inline: var(--border-width-token-cwl2sl, 1px) solid var(--color-border-input-disabled-tz38ro, #eaeded);
@@ -291,23 +297,23 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161.awsui_
   cursor: auto;
   border-color: var(--color-border-control-disabled-c9dn39, #d5dbdb);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_disabled_18eso_1i5rk_276 > .awsui_placeholder_18eso_1i5rk_260:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_disabled_18eso_6h2xj_282 > .awsui_placeholder_18eso_6h2xj_260:not(#\9) {
   color: var(--color-text-input-placeholder-disabled-x4lauf, #687078);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_readonly_18eso_1i5rk_297:not(#\9):not(.awsui_button-trigger_18eso_1i5rk_161.awsui_disabled_18eso_1i5rk_276):not(.awsui_button-trigger_18eso_1i5rk_161.awsui_in-filtering-token_18eso_1i5rk_221) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_readonly_18eso_6h2xj_303:not(#\9):not(.awsui_button-trigger_18eso_6h2xj_161.awsui_disabled_18eso_6h2xj_282):not(.awsui_button-trigger_18eso_6h2xj_161.awsui_in-filtering-token_18eso_6h2xj_221) {
   background-color: var(--color-background-input-default-1z2buq, #ffffff);
   border-block: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-input-disabled-tz38ro, #eaeded);
   border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-input-disabled-tz38ro, #eaeded);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_readonly_18eso_1i5rk_297:not(#\9):not(.awsui_button-trigger_18eso_1i5rk_161.awsui_disabled_18eso_1i5rk_276) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_readonly_18eso_6h2xj_303:not(#\9):not(.awsui_button-trigger_18eso_6h2xj_161.awsui_disabled_18eso_6h2xj_282) {
   -webkit-user-select: text;
           user-select: text;
 }
-.awsui_button-trigger_18eso_1i5rk_161:not(#\9):focus {
+.awsui_button-trigger_18eso_6h2xj_161:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221):focus {
+body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221):focus {
   outline: 2px dotted transparent;
   border-block: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-input-focused-lslq4r, #0073bb);
   border-inline: var(--border-width-field-9k1tdz, 1px) solid var(--color-border-input-focused-lslq4r, #0073bb);
@@ -317,32 +323,32 @@ body[data-awsui-focus-visible=true] .awsui_button-trigger_18eso_1i5rk_161:not(#\
   border-end-end-radius: var(--border-radius-input-4vr9on, 2px);
   box-shadow: 0 0 0 var(--border-control-focus-ring-shadow-spread-ql2vj7, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221):invalid {
+.awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221):invalid {
   box-shadow: none;
 }
-.awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221).awsui_invalid_18eso_1i5rk_322, .awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221).awsui_invalid_18eso_1i5rk_322:focus {
+.awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221).awsui_invalid_18eso_6h2xj_328, .awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221).awsui_invalid_18eso_6h2xj_328:focus {
   color: var(--color-text-status-error-aknuvu, #d13212);
   border-color: var(--color-text-status-error-aknuvu, #d13212);
   padding-inline-start: calc(var(--space-field-horizontal-n5peob, 8px) - (var(--border-invalid-width-z5cnpo, 4px) - var(--border-width-field-9k1tdz, 1px)));
   border-inline-start-width: var(--border-invalid-width-z5cnpo, 4px);
 }
-.awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221).awsui_invalid_18eso_1i5rk_322:focus, .awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221).awsui_invalid_18eso_1i5rk_322:focus:focus {
+.awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221).awsui_invalid_18eso_6h2xj_328:focus, .awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221).awsui_invalid_18eso_6h2xj_328:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-t0us6n, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221).awsui_warning_18eso_1i5rk_331, .awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221).awsui_warning_18eso_1i5rk_331:focus {
+.awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221).awsui_warning_18eso_6h2xj_337, .awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221).awsui_warning_18eso_6h2xj_337:focus {
   color: var(--color-text-status-warning-9b45qh, #906806);
   border-color: var(--color-text-status-warning-9b45qh, #906806);
   padding-inline-start: calc(var(--space-field-horizontal-n5peob, 8px) - (var(--border-invalid-width-z5cnpo, 4px) - var(--border-width-field-9k1tdz, 1px)));
   border-inline-start-width: var(--border-invalid-width-z5cnpo, 4px);
 }
-.awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221).awsui_warning_18eso_1i5rk_331:focus, .awsui_button-trigger_18eso_1i5rk_161:not(#\9):not(.awsui_in-filtering-token_18eso_1i5rk_221).awsui_warning_18eso_1i5rk_331:focus:focus {
+.awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221).awsui_warning_18eso_6h2xj_337:focus, .awsui_button-trigger_18eso_6h2xj_161:not(#\9):not(.awsui_in-filtering-token_18eso_6h2xj_221).awsui_warning_18eso_6h2xj_337:focus:focus {
   box-shadow: 0 0 0 var(--border-control-invalid-focus-ring-shadow-spread-t0us6n, 1px) var(--color-border-item-focused-r5f6xl, #0073bb);
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_custom-option_18eso_1i5rk_340:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_custom-option_18eso_6h2xj_346:not(#\9) {
   padding-block: 0;
   padding-inline-start: 0;
   overflow: clip;
 }
-.awsui_button-trigger_18eso_1i5rk_161.awsui_inline-tokens_18eso_1i5rk_345:not(#\9) {
+.awsui_button-trigger_18eso_6h2xj_161.awsui_inline-tokens_18eso_6h2xj_351:not(#\9) {
   padding-block: 0;
 }

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

@@ -2,19 +2,20 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "button-trigger": "awsui_button-trigger_18eso_1i5rk_161",
-  "arrow": "awsui_arrow_18eso_1i5rk_161",
-  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_1i5rk_221",
-  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_1i5rk_221",
-  "has-caret": "awsui_has-caret_18eso_1i5rk_257",
-  "placeholder": "awsui_placeholder_18eso_1i5rk_260",
-  "pressed": "awsui_pressed_18eso_1i5rk_273",
-  "disabled": "awsui_disabled_18eso_1i5rk_276",
-  "in-filtering-token": "awsui_in-filtering-token_18eso_1i5rk_221",
-  "readonly": "awsui_readonly_18eso_1i5rk_297",
-  "invalid": "awsui_invalid_18eso_1i5rk_322",
-  "warning": "awsui_warning_18eso_1i5rk_331",
-  "custom-option": "awsui_custom-option_18eso_1i5rk_340",
-  "inline-tokens": "awsui_inline-tokens_18eso_1i5rk_345"
+  "button-trigger": "awsui_button-trigger_18eso_6h2xj_161",
+  "arrow": "awsui_arrow_18eso_6h2xj_161",
+  "in-filtering-token-root": "awsui_in-filtering-token-root_18eso_6h2xj_221",
+  "in-filtering-token-nested": "awsui_in-filtering-token-nested_18eso_6h2xj_221",
+  "has-caret": "awsui_has-caret_18eso_6h2xj_257",
+  "placeholder": "awsui_placeholder_18eso_6h2xj_260",
+  "one-theme": "awsui_one-theme_18eso_6h2xj_270",
+  "pressed": "awsui_pressed_18eso_6h2xj_276",
+  "disabled": "awsui_disabled_18eso_6h2xj_282",
+  "in-filtering-token": "awsui_in-filtering-token_18eso_6h2xj_221",
+  "readonly": "awsui_readonly_18eso_6h2xj_303",
+  "invalid": "awsui_invalid_18eso_6h2xj_328",
+  "warning": "awsui_warning_18eso_6h2xj_337",
+  "custom-option": "awsui_custom-option_18eso_6h2xj_346",
+  "inline-tokens": "awsui_inline-tokens_18eso_6h2xj_351"
 };
   

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

@@ -1,19 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_sdha6_13tiu_145",
-  "handle-size-normal": "awsui_handle-size-normal_sdha6_13tiu_153",
-  "handle-size-small": "awsui_handle-size-small_sdha6_13tiu_157",
-  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_13tiu_160",
-  "handle-disabled": "awsui_handle-disabled_sdha6_13tiu_160",
-  "active": "awsui_active_sdha6_13tiu_163",
-  "handle-resize-area": "awsui_handle-resize-area_sdha6_13tiu_166",
-  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_13tiu_173",
-  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_13tiu_176",
-  "hide-focus": "awsui_hide-focus_sdha6_13tiu_186",
-  "resize-icon": "awsui_resize-icon_sdha6_13tiu_208",
-  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_13tiu_214",
-  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_13tiu_218",
-  "prevent-pointer": "awsui_prevent-pointer_sdha6_13tiu_222"
+  "handle": "awsui_handle_sdha6_51wrj_145",
+  "handle-size-normal": "awsui_handle-size-normal_sdha6_51wrj_153",
+  "handle-size-small": "awsui_handle-size-small_sdha6_51wrj_157",
+  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_51wrj_160",
+  "handle-disabled": "awsui_handle-disabled_sdha6_51wrj_160",
+  "active": "awsui_active_sdha6_51wrj_163",
+  "handle-resize-area": "awsui_handle-resize-area_sdha6_51wrj_166",
+  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_51wrj_173",
+  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_51wrj_176",
+  "hide-focus": "awsui_hide-focus_sdha6_51wrj_186",
+  "resize-icon": "awsui_resize-icon_sdha6_51wrj_209",
+  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_51wrj_215",
+  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_51wrj_219",
+  "prevent-pointer": "awsui_prevent-pointer_sdha6_51wrj_223"
 };
   

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

@@ -142,7 +142,7 @@
 */
 /* Style used for links in slots/components that are text heavy, to help links stand out among
 surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F73#description */
-.awsui_handle_sdha6_13tiu_145:not(#\9) {
+.awsui_handle_sdha6_51wrj_145:not(#\9) {
   appearance: none;
   color: var(--color-text-interactive-default-qwoe3g, #545b64);
   background: transparent;
@@ -150,47 +150,47 @@ surrounding text. (WCAG F73) https://www.w3.org/WAI/WCAG21/Techniques/failures/F
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
   touch-action: none;
 }
-.awsui_handle-size-normal_sdha6_13tiu_153:not(#\9) {
+.awsui_handle-size-normal_sdha6_51wrj_153:not(#\9) {
   block-size: var(--line-height-body-m-bedeoh, 22px);
   padding-inline: var(--space-scaled-xxxs-prgw5k, 2px);
 }
-.awsui_handle-size-small_sdha6_13tiu_157:not(#\9) {
+.awsui_handle-size-small_sdha6_51wrj_157:not(#\9) {
   block-size: var(--line-height-body-s-otgtsr, 16px);
 }
-.awsui_handle-drag-indicator_sdha6_13tiu_160:not(#\9):not(.awsui_handle-disabled_sdha6_13tiu_160) {
+.awsui_handle-drag-indicator_sdha6_51wrj_160:not(#\9):not(.awsui_handle-disabled_sdha6_51wrj_160) {
   cursor: grab;
 }
-.awsui_handle-drag-indicator_sdha6_13tiu_160:not(#\9):not(.awsui_handle-disabled_sdha6_13tiu_160).awsui_active_sdha6_13tiu_163 {
+.awsui_handle-drag-indicator_sdha6_51wrj_160:not(#\9):not(.awsui_handle-disabled_sdha6_51wrj_160).awsui_active_sdha6_51wrj_163 {
   cursor: grabbing;
 }
-.awsui_handle-resize-area_sdha6_13tiu_166:not(#\9) {
+.awsui_handle-resize-area_sdha6_51wrj_166:not(#\9) {
   cursor: nwse-resize;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_handle-resize-area_sdha6_13tiu_166:not(#\9):dir(rtl) {
+.awsui_handle-resize-area_sdha6_51wrj_166:not(#\9):dir(rtl) {
   cursor: nesw-resize;
 }
-.awsui_handle-resize-horizontal_sdha6_13tiu_173:not(#\9) {
+.awsui_handle-resize-horizontal_sdha6_51wrj_173:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_handle-resize-vertical_sdha6_13tiu_176:not(#\9) {
+.awsui_handle-resize-vertical_sdha6_51wrj_176:not(#\9) {
   cursor: ns-resize;
 }
-.awsui_handle_sdha6_13tiu_145:not(#\9):hover {
+.awsui_handle_sdha6_51wrj_145:not(#\9):hover {
   color: var(--color-text-interactive-hover-bu4gls, #16191f);
 }
-.awsui_handle_sdha6_13tiu_145:not(#\9):focus {
+.awsui_handle_sdha6_51wrj_145:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_13tiu_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_13tiu_186) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_51wrj_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_51wrj_186) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_13tiu_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_13tiu_186) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_51wrj_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_51wrj_186) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_13tiu_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_13tiu_186)::before {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_51wrj_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_51wrj_186)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -203,22 +203,23 @@ body[data-awsui-focus-visible=true] .awsui_handle_sdha6_13tiu_145:not(#\9):focus
   border-end-start-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
   border-end-end-radius: var(--border-radius-control-default-focus-ring-9xsko1, 2px);
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
+  z-index: 2;
 }
 
-.awsui_resize-icon_sdha6_13tiu_208:not(#\9) {
+.awsui_resize-icon_sdha6_51wrj_209:not(#\9) {
   stroke: var(--color-text-interactive-default-qwoe3g, #545b64);
 }
-.awsui_resize-icon_sdha6_13tiu_208:not(#\9):hover {
+.awsui_resize-icon_sdha6_51wrj_209:not(#\9):hover {
   stroke: var(--color-text-interactive-hover-bu4gls, #16191f);
 }
-.awsui_resize-icon-vertical_sdha6_13tiu_214:not(#\9) {
+.awsui_resize-icon-vertical_sdha6_51wrj_215:not(#\9) {
   margin-block: auto;
   margin-inline: auto;
 }
-.awsui_resize-icon-horizontal_sdha6_13tiu_218:not(#\9) {
+.awsui_resize-icon-horizontal_sdha6_51wrj_219:not(#\9) {
   transform: rotate(90deg);
 }
 
-.awsui_prevent-pointer_sdha6_13tiu_222:not(#\9) {
+.awsui_prevent-pointer_sdha6_51wrj_223:not(#\9) {
   pointer-events: none;
 }

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

@@ -2,19 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_sdha6_13tiu_145",
-  "handle-size-normal": "awsui_handle-size-normal_sdha6_13tiu_153",
-  "handle-size-small": "awsui_handle-size-small_sdha6_13tiu_157",
-  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_13tiu_160",
-  "handle-disabled": "awsui_handle-disabled_sdha6_13tiu_160",
-  "active": "awsui_active_sdha6_13tiu_163",
-  "handle-resize-area": "awsui_handle-resize-area_sdha6_13tiu_166",
-  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_13tiu_173",
-  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_13tiu_176",
-  "hide-focus": "awsui_hide-focus_sdha6_13tiu_186",
-  "resize-icon": "awsui_resize-icon_sdha6_13tiu_208",
-  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_13tiu_214",
-  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_13tiu_218",
-  "prevent-pointer": "awsui_prevent-pointer_sdha6_13tiu_222"
+  "handle": "awsui_handle_sdha6_51wrj_145",
+  "handle-size-normal": "awsui_handle-size-normal_sdha6_51wrj_153",
+  "handle-size-small": "awsui_handle-size-small_sdha6_51wrj_157",
+  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_51wrj_160",
+  "handle-disabled": "awsui_handle-disabled_sdha6_51wrj_160",
+  "active": "awsui_active_sdha6_51wrj_163",
+  "handle-resize-area": "awsui_handle-resize-area_sdha6_51wrj_166",
+  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_51wrj_173",
+  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_51wrj_176",
+  "hide-focus": "awsui_hide-focus_sdha6_51wrj_186",
+  "resize-icon": "awsui_resize-icon_sdha6_51wrj_209",
+  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_51wrj_215",
+  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_51wrj_219",
+  "prevent-pointer": "awsui_prevent-pointer_sdha6_51wrj_223"
 };
   

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

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

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

@@ -3,7 +3,7 @@
 import React, { useEffect, 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 { getLogicalBoundingClientRect, useUniqueId } from '@cloudscape-design/component-toolkit/internal';
 import Tooltip from '../tooltip';
 import DirectionButton from './direction-button';
 import PortalOverlay from './portal-overlay';
@@ -17,6 +17,9 @@ const DIRECTIONS_ORDER = ['block-end', 'block-start', 'inline-end', 'inline-star
 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);
+    // Links the portaled UAP buttons back to the drag handle's position in the regular DOM,
+    // so outside-click / focus detection treats them as belonging to the handle's container.
+    const referrerId = useUniqueId('drag-handle');
     const [showTooltip, setShowTooltip] = useState(false);
     const [uncontrolledShowButtons, setUncontrolledShowButtons] = useState(initialShowButtons);
     const isPointerDown = useRef(false);
@@ -172,11 +175,11 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
     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 },
-                React.createElement("div", { className: clsx(styles['drag-handle'], wrapperClassName), ref: dragHandleRef, onPointerDown: onHandlePointerDown, onKeyDown: onDragHandleKeyDown }, children),
+                React.createElement("div", { className: clsx(styles['drag-handle'], wrapperClassName), ref: dragHandleRef, id: referrerId, onPointerDown: onHandlePointerDown, onKeyDown: onDragHandleKeyDown }, children),
                 !isDisabled && !showButtons && showTooltip && tooltipText && (
                 // 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 }, 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 }))))));
+        React.createElement(PortalOverlay, { track: dragHandleRef, isDisabled: !showButtons, referrerId: referrerId }, visibleDirections.map((direction, index) => directions[direction] && (React.createElement(DirectionButton, { key: direction, show: !isDisabled && showButtons, direction: direction, state: directions[direction], onClick: () => onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick(direction), forcedPosition: forcedPosition, forcedIndex: index }))))));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\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  // 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            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"]}
+{"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"]}