@cloudscape-design/components-themeable 3.0.1073 → 3.0.1074

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

@@ -7,10 +7,13 @@ import InternalIcon from '../../../icon/internal';
 import { ResizeIcon } from './resize-icon';
 import styles from './styles.css.js';
 import testUtilsStyles from './test-classes/styles.css.js';
-const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'normal', active = false, className, ariaLabel, ariaLabelledBy, ariaDescribedby, ariaValue, disabled, onPointerDown, onKeyDown, }, ref) => {
+const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'normal', active = false, className, ariaLabel, ariaLabelledBy, ariaDescribedby, ariaValue, disabled, onPointerDown, onClick, onKeyDown, }, ref) => {
     const dragHandleRefObject = useRef(null);
     const iconProps = (() => {
-        const shared = { variant: disabled ? 'disabled' : undefined, size };
+        const shared = {
+            variant: disabled ? 'disabled' : undefined,
+            size,
+        };
         switch (variant) {
             case 'drag-indicator':
                 return Object.assign(Object.assign({}, shared), { name: 'drag-indicator' });
@@ -28,8 +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' : 'application', 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-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, onKeyDown: onKeyDown },
-        React.createElement(InternalIcon, Object.assign({}, iconProps))));
+    React.createElement("div", { ref: useMergeRefs(ref, dragHandleRefObject), role: ariaValue ? 'slider' : 'application', 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-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", { className: styles['prevent-pointer'] },
+            React.createElement(InternalIcon, Object.assign({}, iconProps)))));
 });
 export default DragHandleButton;
 //# sourceMappingURL=button.js.map

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

@@ -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,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,EAAE,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAE,UAAoB,CAAC,CAAC,CAAC,SAAS,EAAE,IAAI,EAAE,CAAC;QAC/E,QAAQ,OAAO,EAAE;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;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,aAAa,EAC1C,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,mBACR,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,SAAS,EAAE,SAAS;QAEpB,oBAAC,YAAY,oBAAK,SAAS,EAAI,CAC3B,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      onKeyDown,\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    const iconProps: IconProps = (() => {\n      const shared = { variant: disabled ? ('disabled' as const) : undefined, size };\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' : 'application'}\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-valuemax={ariaValue?.valueMax}\n        aria-valuemin={ariaValue?.valueMin}\n        aria-valuenow={ariaValue?.valueNow}\n        onPointerDown={onPointerDown}\n        onKeyDown={onKeyDown}\n      >\n        <InternalIcon {...iconProps} />\n      </div>\n    );\n  }\n);\n\nexport default DragHandleButton;\n"]}
+{"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;YACf,KAAK,gBAAgB;gBACnB,uCAAY,MAAM,KAAE,IAAI,EAAE,gBAAgB,IAAG;YAC/C,KAAK,aAAa;gBAChB,uCAAY,MAAM,KAAE,IAAI,EAAE,aAAa,IAAG;YAC5C,KAAK,mBAAmB;gBACtB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,YAAY,GAAG,IAAG;YACjE,KAAK,iBAAiB;gBACpB,uCAAY,MAAM,KAAE,GAAG,EAAE,oBAAC,UAAU,IAAC,OAAO,EAAC,UAAU,GAAG,IAAG;SAChE;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,aAAa,EAC1C,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,mBACR,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,oBAAK,SAAS,EAAI,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' : 'application'}\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-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"]}

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

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DragHandleProps } from './interfaces';
 export { DragHandleProps };
-declare const InternalDragHandle: React.ForwardRefExoticComponent<DragHandleProps & React.RefAttributes<Element>>;
+declare const InternalDragHandle: React.ForwardRefExoticComponent<Pick<DragHandleProps, "size" | "active" | "disabled" | "className" | "onKeyDown" | "onClick" | "onPointerDown" | "variant" | "ariaLabel" | "ariaDescribedby" | "directions" | "tooltipText" | "onDirectionClick" | "triggerMode" | "initialShowButtons" | "controlledShowButtons" | "hideButtonsOnDrag" | "clickDragThreshold" | "ariaLabelledBy" | "ariaValue"> & React.RefAttributes<Element>>;
 export default InternalDragHandle;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,kBAAkB,iFAqDvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAqB,MAAM,OAAO,CAAC;AAK1C,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAE/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,kBAAkB,kaAyDvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -6,10 +6,10 @@ import { getBaseProps } from '../../base-component';
 import DragHandleWrapper from '../drag-handle-wrapper';
 import DragHandleButton from './button';
 const InternalDragHandle = forwardRef((_a, ref) => {
-    var { variant, size, ariaLabel, ariaLabelledBy, ariaDescribedby, tooltipText, ariaValue, disabled, directions = {}, onPointerDown, onKeyDown, onDirectionClick, triggerMode, initialShowButtons, hideButtonsOnDrag = false, clickDragThreshold = 3, active } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaLabelledBy", "ariaDescribedby", "tooltipText", "ariaValue", "disabled", "directions", "onPointerDown", "onKeyDown", "onDirectionClick", "triggerMode", "initialShowButtons", "hideButtonsOnDrag", "clickDragThreshold", "active"]);
+    var { variant, size, ariaLabel, ariaLabelledBy, ariaDescribedby, tooltipText, ariaValue, disabled, directions = {}, onPointerDown, onClick, onKeyDown, onDirectionClick, triggerMode, initialShowButtons, controlledShowButtons, hideButtonsOnDrag = false, clickDragThreshold = 3, active } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaLabelledBy", "ariaDescribedby", "tooltipText", "ariaValue", "disabled", "directions", "onPointerDown", "onClick", "onKeyDown", "onDirectionClick", "triggerMode", "initialShowButtons", "controlledShowButtons", "hideButtonsOnDrag", "clickDragThreshold", "active"]);
     const baseProps = getBaseProps(rest);
-    return (React.createElement(DragHandleWrapper, { directions: !disabled ? directions : {}, tooltipText: tooltipText, onDirectionClick: onDirectionClick, triggerMode: triggerMode, initialShowButtons: initialShowButtons, hideButtonsOnDrag: hideButtonsOnDrag, clickDragThreshold: clickDragThreshold },
-        React.createElement(DragHandleButton, { ref: ref, className: baseProps.className, variant: variant, size: size, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedby: ariaDescribedby, ariaValue: ariaValue, disabled: disabled, active: active, onPointerDown: onPointerDown, onKeyDown: onKeyDown })));
+    return (React.createElement(DragHandleWrapper, { directions: !disabled ? directions : {}, tooltipText: tooltipText, onDirectionClick: onDirectionClick, triggerMode: triggerMode, initialShowButtons: initialShowButtons, controlledShowButtons: controlledShowButtons, hideButtonsOnDrag: hideButtonsOnDrag, clickDragThreshold: clickDragThreshold },
+        React.createElement(DragHandleButton, { ref: ref, className: baseProps.className, variant: variant, size: size, ariaLabel: ariaLabel, ariaLabelledBy: ariaLabelledBy, ariaDescribedby: ariaDescribedby, ariaValue: ariaValue, disabled: disabled, active: active, onPointerDown: onPointerDown, onClick: onClick, onKeyDown: onKeyDown })));
 });
 export default InternalDragHandle;
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,gBAAgB,MAAM,UAAU,CAAC;AAKxC,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EAmBkB,EAClB,GAAuB,EACvB,EAAE;QArBF,EACE,OAAO,EACP,IAAI,EACJ,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,aAAa,EACb,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,iBAAiB,GAAG,KAAK,EACzB,kBAAkB,GAAG,CAAC,EACtB,MAAM,OAEU,EADb,IAAI,cAlBT,uQAmBC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACvC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB;QAEtC,oBAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,SAAS,EAAE,SAAS,GACpB,CACgB,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\n\nimport { getBaseProps } from '../../base-component';\nimport DragHandleWrapper from '../drag-handle-wrapper';\nimport DragHandleButton from './button';\nimport { DragHandleProps } from './interfaces';\n\nexport { DragHandleProps };\n\nconst InternalDragHandle = forwardRef(\n  (\n    {\n      variant,\n      size,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      tooltipText,\n      ariaValue,\n      disabled,\n      directions = {},\n      onPointerDown,\n      onKeyDown,\n      onDirectionClick,\n      triggerMode,\n      initialShowButtons,\n      hideButtonsOnDrag = false,\n      clickDragThreshold = 3,\n      active,\n      ...rest\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const baseProps = getBaseProps(rest);\n\n    return (\n      <DragHandleWrapper\n        directions={!disabled ? directions : {}}\n        tooltipText={tooltipText}\n        onDirectionClick={onDirectionClick}\n        triggerMode={triggerMode}\n        initialShowButtons={initialShowButtons}\n        hideButtonsOnDrag={hideButtonsOnDrag}\n        clickDragThreshold={clickDragThreshold}\n      >\n        <DragHandleButton\n          ref={ref}\n          className={baseProps.className}\n          variant={variant}\n          size={size}\n          ariaLabel={ariaLabel}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedby={ariaDescribedby}\n          ariaValue={ariaValue}\n          disabled={disabled}\n          active={active}\n          onPointerDown={onPointerDown}\n          onKeyDown={onKeyDown}\n        />\n      </DragHandleWrapper>\n    );\n  }\n);\n\nexport default InternalDragHandle;\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/index.tsx"],"names":[],"mappings":";AAAA,qEAAqE;AACrE,sCAAsC;AACtC,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAE1C,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,iBAAiB,MAAM,wBAAwB,CAAC;AACvD,OAAO,gBAAgB,MAAM,UAAU,CAAC;AAKxC,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EAqBkB,EAClB,GAAuB,EACvB,EAAE;QAvBF,EACE,OAAO,EACP,IAAI,EACJ,SAAS,EACT,cAAc,EACd,eAAe,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,aAAa,EACb,OAAO,EACP,SAAS,EACT,gBAAgB,EAChB,WAAW,EACX,kBAAkB,EAClB,qBAAqB,EACrB,iBAAiB,GAAG,KAAK,EACzB,kBAAkB,GAAG,CAAC,EACtB,MAAM,OAEU,EADb,IAAI,cApBT,2SAqBC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IAErC,OAAO,CACL,oBAAC,iBAAiB,IAChB,UAAU,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EACvC,WAAW,EAAE,WAAW,EACxB,gBAAgB,EAAE,gBAAgB,EAClC,WAAW,EAAE,WAAW,EACxB,kBAAkB,EAAE,kBAAkB,EACtC,qBAAqB,EAAE,qBAAqB,EAC5C,iBAAiB,EAAE,iBAAiB,EACpC,kBAAkB,EAAE,kBAAkB;QAEtC,oBAAC,gBAAgB,IACf,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,SAAS,CAAC,SAAS,EAC9B,OAAO,EAAE,OAAO,EAChB,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,SAAS,EACpB,cAAc,EAAE,cAAc,EAC9B,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,aAAa,EAAE,aAAa,EAC5B,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,SAAS,GACpB,CACgB,CACrB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,kBAAkB,CAAC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\nimport React, { forwardRef } from 'react';\n\nimport { getBaseProps } from '../../base-component';\nimport DragHandleWrapper from '../drag-handle-wrapper';\nimport DragHandleButton from './button';\nimport { DragHandleProps } from './interfaces';\n\nexport { DragHandleProps };\n\nconst InternalDragHandle = forwardRef(\n  (\n    {\n      variant,\n      size,\n      ariaLabel,\n      ariaLabelledBy,\n      ariaDescribedby,\n      tooltipText,\n      ariaValue,\n      disabled,\n      directions = {},\n      onPointerDown,\n      onClick,\n      onKeyDown,\n      onDirectionClick,\n      triggerMode,\n      initialShowButtons,\n      controlledShowButtons,\n      hideButtonsOnDrag = false,\n      clickDragThreshold = 3,\n      active,\n      ...rest\n    }: DragHandleProps,\n    ref: React.Ref<Element>\n  ) => {\n    const baseProps = getBaseProps(rest);\n\n    return (\n      <DragHandleWrapper\n        directions={!disabled ? directions : {}}\n        tooltipText={tooltipText}\n        onDirectionClick={onDirectionClick}\n        triggerMode={triggerMode}\n        initialShowButtons={initialShowButtons}\n        controlledShowButtons={controlledShowButtons}\n        hideButtonsOnDrag={hideButtonsOnDrag}\n        clickDragThreshold={clickDragThreshold}\n      >\n        <DragHandleButton\n          ref={ref}\n          className={baseProps.className}\n          variant={variant}\n          size={size}\n          ariaLabel={ariaLabel}\n          ariaLabelledBy={ariaLabelledBy}\n          ariaDescribedby={ariaDescribedby}\n          ariaValue={ariaValue}\n          disabled={disabled}\n          active={active}\n          onPointerDown={onPointerDown}\n          onClick={onClick}\n          onKeyDown={onKeyDown}\n        />\n      </DragHandleWrapper>\n    );\n  }\n);\n\nexport default InternalDragHandle;\n"]}

package/lib/internal/template/internal/components/drag-handle/interfaces.d.ts

@@ -12,11 +12,13 @@ export interface DragHandleProps {
     className?: string;
     onPointerDown?: React.PointerEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
+    onClick?: React.MouseEventHandler;
     tooltipText?: string;
     directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;
     onDirectionClick?: (direction: DragHandleProps.Direction) => void;
     triggerMode?: TriggerMode;
     initialShowButtons?: boolean;
+    controlledShowButtons?: boolean;
     /**
      * Hide the UAP buttons when dragging is active.
      */
@@ -26,6 +28,7 @@ export interface DragHandleProps {
      * a drag. Small threshold needed for usability.
      */
     clickDragThreshold?: number;
+    ref?: React.RefObject<HTMLElement>;
 }
 export declare namespace DragHandleProps {
     type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EACL,SAAS,IAAI,gBAAgB,EAC7B,cAAc,IAAI,qBAAqB,EACvC,WAAW,EACZ,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IAEvC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC;IACxF,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,SAAS,KAAK,IAAI,CAAC;IAClE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;CAC7B;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,SAAS,GAAG,gBAAgB,CAAC;IACzC,KAAY,cAAc,GAAG,qBAAqB,CAAC;IAEnD,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":";AAGA,OAAO,EACL,SAAS,IAAI,gBAAgB,EAC7B,cAAc,IAAI,qBAAqB,EACvC,WAAW,EACZ,MAAM,mCAAmC,CAAC;AAE3C,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC;IAC1C,SAAS,CAAC,EAAE,KAAK,CAAC,oBAAoB,CAAC;IACvC,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC;IAElC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,CAAC,SAAS,EAAE,eAAe,CAAC,cAAc,CAAC,CAAC,CAAC;IACxF,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,eAAe,CAAC,SAAS,KAAK,IAAI,CAAC;IAClE,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC;;OAEG;IACH,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B;;;OAGG;IACH,kBAAkB,CAAC,EAAE,MAAM,CAAC;IAC5B,GAAG,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;CACpC;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,KAAY,SAAS,GAAG,gBAAgB,CAAC;IACzC,KAAY,cAAc,GAAG,qBAAqB,CAAC;IAEnD,KAAY,IAAI,GAAG,OAAO,GAAG,QAAQ,CAAC;IAEtC,UAAiB,SAAS;QACxB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;QACjB,QAAQ,EAAE,MAAM,CAAC;KAClB;CACF"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  Direction as WrapperDirection,\n  DirectionState as WrapperDirectionState,\n  TriggerMode,\n} from '../drag-handle-wrapper/interfaces';\n\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\n  active?: boolean;\n  disabled?: boolean;\n  className?: string;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n\n  tooltipText?: string;\n  directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;\n  onDirectionClick?: (direction: DragHandleProps.Direction) => void;\n  triggerMode?: TriggerMode;\n  initialShowButtons?: boolean;\n  /**\n   * Hide the UAP buttons when dragging is active.\n   */\n  hideButtonsOnDrag?: boolean;\n  /**\n   * Max cursor movement (in pixels) that still counts as a press rather than\n   * a drag. Small threshold needed for usability.\n   */\n  clickDragThreshold?: number;\n}\n\nexport namespace DragHandleProps {\n  export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n  export type Direction = WrapperDirection;\n  export type DirectionState = WrapperDirectionState;\n\n  export type Size = 'small' | 'normal';\n\n  export interface AriaValue {\n    valueMin: number;\n    valueMax: number;\n    valueNow: number;\n  }\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport {\n  Direction as WrapperDirection,\n  DirectionState as WrapperDirectionState,\n  TriggerMode,\n} from '../drag-handle-wrapper/interfaces';\n\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel?: string;\n  ariaLabelledBy?: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\n  active?: boolean;\n  disabled?: boolean;\n  className?: string;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n  onClick?: React.MouseEventHandler;\n\n  tooltipText?: string;\n  directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;\n  onDirectionClick?: (direction: DragHandleProps.Direction) => void;\n  triggerMode?: TriggerMode;\n  initialShowButtons?: boolean;\n  controlledShowButtons?: boolean;\n  /**\n   * Hide the UAP buttons when dragging is active.\n   */\n  hideButtonsOnDrag?: boolean;\n  /**\n   * Max cursor movement (in pixels) that still counts as a press rather than\n   * a drag. Small threshold needed for usability.\n   */\n  clickDragThreshold?: number;\n  ref?: React.RefObject<HTMLElement>;\n}\n\nexport namespace DragHandleProps {\n  export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n  export type Direction = WrapperDirection;\n  export type DirectionState = WrapperDirectionState;\n\n  export type Size = 'small' | 'normal';\n\n  export interface AriaValue {\n    valueMin: number;\n    valueMax: number;\n    valueNow: number;\n  }\n}\n"]}

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

@@ -1,18 +1,19 @@
 
     import './styles.scoped.css';
     export default {
-  "handle": "awsui_handle_sdha6_91agl_145",
-  "handle-size-normal": "awsui_handle-size-normal_sdha6_91agl_153",
-  "handle-size-small": "awsui_handle-size-small_sdha6_91agl_157",
-  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_91agl_160",
-  "handle-disabled": "awsui_handle-disabled_sdha6_91agl_160",
-  "active": "awsui_active_sdha6_91agl_163",
-  "handle-resize-area": "awsui_handle-resize-area_sdha6_91agl_166",
-  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_91agl_173",
-  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_91agl_176",
-  "hide-focus": "awsui_hide-focus_sdha6_91agl_186",
-  "resize-icon": "awsui_resize-icon_sdha6_91agl_208",
-  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_91agl_214",
-  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_91agl_218"
+  "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"
 };
   

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_91agl_145:not(#\9) {
+.awsui_handle_sdha6_13tiu_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_91agl_153:not(#\9) {
+.awsui_handle-size-normal_sdha6_13tiu_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_91agl_157:not(#\9) {
+.awsui_handle-size-small_sdha6_13tiu_157:not(#\9) {
   block-size: var(--line-height-body-s-otgtsr, 16px);
 }
-.awsui_handle-drag-indicator_sdha6_91agl_160:not(#\9):not(.awsui_handle-disabled_sdha6_91agl_160) {
+.awsui_handle-drag-indicator_sdha6_13tiu_160:not(#\9):not(.awsui_handle-disabled_sdha6_13tiu_160) {
   cursor: grab;
 }
-.awsui_handle-drag-indicator_sdha6_91agl_160:not(#\9):not(.awsui_handle-disabled_sdha6_91agl_160).awsui_active_sdha6_91agl_163 {
+.awsui_handle-drag-indicator_sdha6_13tiu_160:not(#\9):not(.awsui_handle-disabled_sdha6_13tiu_160).awsui_active_sdha6_13tiu_163 {
   cursor: grabbing;
 }
-.awsui_handle-resize-area_sdha6_91agl_166:not(#\9) {
+.awsui_handle-resize-area_sdha6_13tiu_166:not(#\9) {
   cursor: nwse-resize;
   /* stylelint-disable-next-line plugin/no-unsupported-browser-features */
 }
-.awsui_handle-resize-area_sdha6_91agl_166:not(#\9):dir(rtl) {
+.awsui_handle-resize-area_sdha6_13tiu_166:not(#\9):dir(rtl) {
   cursor: nesw-resize;
 }
-.awsui_handle-resize-horizontal_sdha6_91agl_173:not(#\9) {
+.awsui_handle-resize-horizontal_sdha6_13tiu_173:not(#\9) {
   cursor: ew-resize;
 }
-.awsui_handle-resize-vertical_sdha6_91agl_176:not(#\9) {
+.awsui_handle-resize-vertical_sdha6_13tiu_176:not(#\9) {
   cursor: ns-resize;
 }
-.awsui_handle_sdha6_91agl_145:not(#\9):hover {
+.awsui_handle_sdha6_13tiu_145:not(#\9):hover {
   color: var(--color-text-interactive-hover-bu4gls, #16191f);
 }
-.awsui_handle_sdha6_91agl_145:not(#\9):focus {
+.awsui_handle_sdha6_13tiu_145:not(#\9):focus {
   outline: none;
   text-decoration: none;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_91agl_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_91agl_186) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_13tiu_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_13tiu_186) {
   position: relative;
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_91agl_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_91agl_186) {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_13tiu_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_13tiu_186) {
   outline: 2px dotted transparent;
   outline-offset: calc(0px - 1px);
 }
-body[data-awsui-focus-visible=true] .awsui_handle_sdha6_91agl_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_91agl_186)::before {
+body[data-awsui-focus-visible=true] .awsui_handle_sdha6_13tiu_145:not(#\9):focus:not(.awsui_hide-focus_sdha6_13tiu_186)::before {
   content: " ";
   display: block;
   position: absolute;
@@ -205,16 +205,20 @@ body[data-awsui-focus-visible=true] .awsui_handle_sdha6_91agl_145:not(#\9):focus
   box-shadow: 0 0 0 2px var(--color-border-item-focused-r5f6xl, #0073bb);
 }
 
-.awsui_resize-icon_sdha6_91agl_208:not(#\9) {
+.awsui_resize-icon_sdha6_13tiu_208:not(#\9) {
   stroke: var(--color-text-interactive-default-qwoe3g, #545b64);
 }
-.awsui_resize-icon_sdha6_91agl_208:not(#\9):hover {
+.awsui_resize-icon_sdha6_13tiu_208:not(#\9):hover {
   stroke: var(--color-text-interactive-hover-bu4gls, #16191f);
 }
-.awsui_resize-icon-vertical_sdha6_91agl_214:not(#\9) {
+.awsui_resize-icon-vertical_sdha6_13tiu_214:not(#\9) {
   margin-block: auto;
   margin-inline: auto;
 }
-.awsui_resize-icon-horizontal_sdha6_91agl_218:not(#\9) {
+.awsui_resize-icon-horizontal_sdha6_13tiu_218:not(#\9) {
   transform: rotate(90deg);
+}
+
+.awsui_prevent-pointer_sdha6_13tiu_222:not(#\9) {
+  pointer-events: none;
 }

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

@@ -2,18 +2,19 @@
     // es-module interop with Babel and Typescript
     Object.defineProperty(exports, "__esModule", { value: true });
     module.exports.default = {
-  "handle": "awsui_handle_sdha6_91agl_145",
-  "handle-size-normal": "awsui_handle-size-normal_sdha6_91agl_153",
-  "handle-size-small": "awsui_handle-size-small_sdha6_91agl_157",
-  "handle-drag-indicator": "awsui_handle-drag-indicator_sdha6_91agl_160",
-  "handle-disabled": "awsui_handle-disabled_sdha6_91agl_160",
-  "active": "awsui_active_sdha6_91agl_163",
-  "handle-resize-area": "awsui_handle-resize-area_sdha6_91agl_166",
-  "handle-resize-horizontal": "awsui_handle-resize-horizontal_sdha6_91agl_173",
-  "handle-resize-vertical": "awsui_handle-resize-vertical_sdha6_91agl_176",
-  "hide-focus": "awsui_hide-focus_sdha6_91agl_186",
-  "resize-icon": "awsui_resize-icon_sdha6_91agl_208",
-  "resize-icon-vertical": "awsui_resize-icon-vertical_sdha6_91agl_214",
-  "resize-icon-horizontal": "awsui_resize-icon-horizontal_sdha6_91agl_218"
+  "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"
 };
   

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

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import { DragHandleWrapperProps } from './interfaces';
-export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode, initialShowButtons, hideButtonsOnDrag, clickDragThreshold, }: DragHandleWrapperProps): JSX.Element;
+export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode, initialShowButtons, controlledShowButtons, hideButtonsOnDrag, clickDragThreshold, }: DragHandleWrapperProps): JSX.Element;
 //# sourceMappingURL=index.d.ts.map

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;AAKjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAsNxB"}
+{"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;AAKjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,EAChB,WAAqB,EACrB,kBAA0B,EAC1B,qBAA6B,EAC7B,iBAAiB,EACjB,kBAAkB,GACnB,EAAE,sBAAsB,eAwNxB"}

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

@@ -8,7 +8,7 @@ import Tooltip from '../tooltip';
 import DirectionButton from './direction-button';
 import PortalOverlay from './portal-overlay';
 import styles from './styles.css.js';
-export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode = 'focus', initialShowButtons = false, hideButtonsOnDrag, clickDragThreshold, }) {
+export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, triggerMode = 'focus', initialShowButtons = false, controlledShowButtons = false, hideButtonsOnDrag, clickDragThreshold, }) {
     const wrapperRef = useRef(null);
     const dragHandleRef = useRef(null);
     const [showTooltip, setShowTooltip] = useState(false);
@@ -118,7 +118,7 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
             event.key !== 'Control' &&
             event.key !== 'Meta' &&
             event.key !== 'Shift' &&
-            triggerMode !== 'keyboard-activate') {
+            triggerMode === 'focus') {
             // Pressing any other key will display the focus-visible ring around the
             // drag handle if it's in focus, so we should also show the buttons now.
             setShowButtons(true);
@@ -134,14 +134,15 @@ export default function DragHandleWrapper({ directions, tooltipText, children, o
         }
         onDirectionClick === null || onDirectionClick === void 0 ? void 0 : onDirectionClick(direction);
     };
-    return (React.createElement("div", { className: clsx(styles['drag-handle-wrapper'], showButtons && styles['drag-handle-wrapper-open']), ref: wrapperRef, onFocus: onWrapperFocusIn, onBlur: onWrapperFocusOut },
+    const _showButtons = triggerMode === 'controlled' ? controlledShowButtons : showButtons;
+    return (React.createElement("div", { className: clsx(styles['drag-handle-wrapper'], _showButtons && styles['drag-handle-wrapper-open']), ref: wrapperRef, onFocus: onWrapperFocusIn, onBlur: onWrapperFocusOut },
         React.createElement("div", { onPointerEnter: onTooltipGroupPointerEnter, onPointerLeave: onTooltipGroupPointerLeave },
             React.createElement("div", { className: styles['drag-handle'], ref: dragHandleRef, onPointerDown: onHandlePointerDown, onKeyDown: onDragHandleKeyDown }, children),
-            !isDisabled && !showButtons && showTooltip && tooltipText && (React.createElement(Tooltip, { trackRef: dragHandleRef, value: tooltipText, onDismiss: () => setShowTooltip(false) }))),
-        React.createElement(PortalOverlay, { track: dragHandleRef, isDisabled: !showButtons },
-            directions['block-start'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "block-start", state: directions['block-start'], onClick: () => onInternalDirectionClick('block-start') })),
-            directions['block-end'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "block-end", state: directions['block-end'], onClick: () => onInternalDirectionClick('block-end') })),
-            directions['inline-start'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "inline-start", state: directions['inline-start'], onClick: () => onInternalDirectionClick('inline-start') })),
-            directions['inline-end'] && (React.createElement(DirectionButton, { show: !isDisabled && showButtons, direction: "inline-end", state: directions['inline-end'], onClick: () => onInternalDirectionClick('inline-end') })))));
+            !isDisabled && !_showButtons && showTooltip && tooltipText && (React.createElement(Tooltip, { trackRef: dragHandleRef, value: tooltipText, onDismiss: () => setShowTooltip(false) }))),
+        React.createElement(PortalOverlay, { track: dragHandleRef, isDisabled: !_showButtons },
+            directions['block-start'] && (React.createElement(DirectionButton, { show: !isDisabled && _showButtons, direction: "block-start", state: directions['block-start'], onClick: () => onInternalDirectionClick('block-start') })),
+            directions['block-end'] && (React.createElement(DirectionButton, { show: !isDisabled && _showButtons, direction: "block-end", state: directions['block-end'], onClick: () => onInternalDirectionClick('block-end') })),
+            directions['inline-start'] && (React.createElement(DirectionButton, { show: !isDisabled && _showButtons, direction: "inline-start", state: directions['inline-start'], onClick: () => onInternalDirectionClick('inline-start') })),
+            directions['inline-end'] && (React.createElement(DirectionButton, { show: !isDisabled && _showButtons, direction: "inline-end", state: directions['inline-end'], onClick: () => onInternalDirectionClick('inline-end') })))));
 }
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/index.tsx"],"names":[],"mappings":"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","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nimport React, { useEffect, useRef, useState } from 'react';\nimport clsx from 'clsx';\n\nimport { nodeContains } from '@cloudscape-design/component-toolkit/dom';\n\nimport { getFirstFocusable } from '../focus-lock/utils';\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';\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n  triggerMode = 'focus',\n  initialShowButtons = false,\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 [showButtons, setShowButtons] = 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        setShowButtons(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 leaves the current 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      setShowButtons(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            setShowButtons(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          setShowButtons(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      setShowButtons(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      setShowButtons(prevshowButtons => !prevshowButtons);\n    } else if (\n      event.key !== 'Alt' &&\n      event.key !== 'Control' &&\n      event.key !== 'Meta' &&\n      event.key !== 'Shift' &&\n      triggerMode !== 'keyboard-activate'\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      setShowButtons(true);\n    }\n  };\n\n  const onInternalDirectionClick = (direction: Direction) => {\n    // Move focus back to the wrapper on click. This prevents focus from staying\n    // on an aria-hidden control, and allows future keyboard events to be handled\n    // cleanly using the drag handle's own handlers.\n    if (dragHandleRef.current) {\n      getFirstFocusable(dragHandleRef.current)?.focus();\n    }\n    onDirectionClick?.(direction);\n  };\n\n  return (\n    <div\n      className={clsx(styles['drag-handle-wrapper'], showButtons && styles['drag-handle-wrapper-open'])}\n      ref={wrapperRef}\n      onFocus={onWrapperFocusIn}\n      onBlur={onWrapperFocusOut}\n    >\n      <div onPointerEnter={onTooltipGroupPointerEnter} onPointerLeave={onTooltipGroupPointerLeave}>\n        <div\n          className={styles['drag-handle']}\n          ref={dragHandleRef}\n          onPointerDown={onHandlePointerDown}\n          onKeyDown={onDragHandleKeyDown}\n        >\n          {children}\n        </div>\n\n        {!isDisabled && !showButtons && showTooltip && tooltipText && (\n          <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n        )}\n      </div>\n\n      <PortalOverlay track={dragHandleRef} isDisabled={!showButtons}>\n        {directions['block-start'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"block-start\"\n            state={directions['block-start']}\n            onClick={() => onInternalDirectionClick('block-start')}\n          />\n        )}\n        {directions['block-end'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"block-end\"\n            state={directions['block-end']}\n            onClick={() => onInternalDirectionClick('block-end')}\n          />\n        )}\n        {directions['inline-start'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"inline-start\"\n            state={directions['inline-start']}\n            onClick={() => onInternalDirectionClick('inline-start')}\n          />\n        )}\n        {directions['inline-end'] && (\n          <DirectionButton\n            show={!isDisabled && showButtons}\n            direction=\"inline-end\"\n            state={directions['inline-end']}\n            onClick={() => onInternalDirectionClick('inline-end')}\n          />\n        )}\n      </PortalOverlay>\n    </div>\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';\n\nimport { getFirstFocusable } from '../focus-lock/utils';\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';\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n  triggerMode = 'focus',\n  initialShowButtons = false,\n  controlledShowButtons = false,\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 [showButtons, setShowButtons] = 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        setShowButtons(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 leaves the current 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      setShowButtons(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            setShowButtons(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          setShowButtons(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      setShowButtons(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      setShowButtons(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      setShowButtons(true);\n    }\n  };\n\n  const onInternalDirectionClick = (direction: Direction) => {\n    // Move focus back to the wrapper on click. This prevents focus from staying\n    // on an aria-hidden control, and allows future keyboard events to be handled\n    // cleanly using the drag handle's own handlers.\n    if (dragHandleRef.current) {\n      getFirstFocusable(dragHandleRef.current)?.focus();\n    }\n    onDirectionClick?.(direction);\n  };\n\n  const _showButtons = triggerMode === 'controlled' ? controlledShowButtons : showButtons;\n\n  return (\n    <div\n      className={clsx(styles['drag-handle-wrapper'], _showButtons && styles['drag-handle-wrapper-open'])}\n      ref={wrapperRef}\n      onFocus={onWrapperFocusIn}\n      onBlur={onWrapperFocusOut}\n    >\n      <div onPointerEnter={onTooltipGroupPointerEnter} onPointerLeave={onTooltipGroupPointerLeave}>\n        <div\n          className={styles['drag-handle']}\n          ref={dragHandleRef}\n          onPointerDown={onHandlePointerDown}\n          onKeyDown={onDragHandleKeyDown}\n        >\n          {children}\n        </div>\n\n        {!isDisabled && !_showButtons && showTooltip && tooltipText && (\n          <Tooltip trackRef={dragHandleRef} value={tooltipText} onDismiss={() => setShowTooltip(false)} />\n        )}\n      </div>\n\n      <PortalOverlay track={dragHandleRef} isDisabled={!_showButtons}>\n        {directions['block-start'] && (\n          <DirectionButton\n            show={!isDisabled && _showButtons}\n            direction=\"block-start\"\n            state={directions['block-start']}\n            onClick={() => onInternalDirectionClick('block-start')}\n          />\n        )}\n        {directions['block-end'] && (\n          <DirectionButton\n            show={!isDisabled && _showButtons}\n            direction=\"block-end\"\n            state={directions['block-end']}\n            onClick={() => onInternalDirectionClick('block-end')}\n          />\n        )}\n        {directions['inline-start'] && (\n          <DirectionButton\n            show={!isDisabled && _showButtons}\n            direction=\"inline-start\"\n            state={directions['inline-start']}\n            onClick={() => onInternalDirectionClick('inline-start')}\n          />\n        )}\n        {directions['inline-end'] && (\n          <DirectionButton\n            show={!isDisabled && _showButtons}\n            direction=\"inline-end\"\n            state={directions['inline-end']}\n            onClick={() => onInternalDirectionClick('inline-end')}\n          />\n        )}\n      </PortalOverlay>\n    </div>\n  );\n}\n"]}

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

@@ -1,7 +1,7 @@
 /// <reference types="react" />
 export type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
 export type DirectionState = 'active' | 'disabled';
-export type TriggerMode = 'focus' | 'keyboard-activate';
+export type TriggerMode = 'focus' | 'keyboard-activate' | 'controlled';
 export interface DragHandleWrapperProps {
     directions: Partial<Record<Direction, DirectionState>>;
     onDirectionClick?: (direction: Direction) => void;
@@ -9,6 +9,7 @@ export interface DragHandleWrapperProps {
     children: React.ReactNode;
     triggerMode?: TriggerMode;
     initialShowButtons?: boolean;
+    controlledShowButtons?: boolean;
     hideButtonsOnDrag: boolean;
     clickDragThreshold: number;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,mBAAmB,CAAC;AAExD,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;CAC5B"}
+{"version":3,"file":"interfaces.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":";AAGA,MAAM,MAAM,SAAS,GAAG,aAAa,GAAG,WAAW,GAAG,cAAc,GAAG,YAAY,CAAC;AACpF,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,UAAU,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,GAAG,mBAAmB,GAAG,YAAY,CAAC;AAEvE,MAAM,WAAW,sBAAsB;IACrC,UAAU,EAAE,OAAO,CAAC,MAAM,CAAC,SAAS,EAAE,cAAc,CAAC,CAAC,CAAC;IACvD,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,SAAS,KAAK,IAAI,CAAC;IAClD,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAChC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,kBAAkB,EAAE,MAAM,CAAC;CAC5B"}

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

@@ -1 +1 @@
-{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';\nexport type DirectionState = 'active' | 'disabled';\nexport type TriggerMode = 'focus' | 'keyboard-activate';\n\nexport interface DragHandleWrapperProps {\n  directions: Partial<Record<Direction, DirectionState>>;\n  onDirectionClick?: (direction: Direction) => void;\n  tooltipText?: string;\n  children: React.ReactNode;\n  triggerMode?: TriggerMode;\n  initialShowButtons?: boolean;\n  hideButtonsOnDrag: boolean;\n  clickDragThreshold: number;\n}\n"]}
+{"version":3,"file":"interfaces.js","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/interfaces.ts"],"names":[],"mappings":"AAAA,qEAAqE;AACrE,sCAAsC","sourcesContent":["// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.\n// SPDX-License-Identifier: Apache-2.0\n\nexport type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';\nexport type DirectionState = 'active' | 'disabled';\nexport type TriggerMode = 'focus' | 'keyboard-activate' | 'controlled';\n\nexport interface DragHandleWrapperProps {\n  directions: Partial<Record<Direction, DirectionState>>;\n  onDirectionClick?: (direction: Direction) => void;\n  tooltipText?: string;\n  children: React.ReactNode;\n  triggerMode?: TriggerMode;\n  initialShowButtons?: boolean;\n  controlledShowButtons?: boolean;\n  hideButtonsOnDrag: boolean;\n  clickDragThreshold: number;\n}\n"]}

package/lib/internal/template/internal/components/sortable-area/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAMjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,EACzC,KAAK,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,CAAC,IAAI,CAAC,eA8EzB;AA2ED,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,GACpD,iBAAiB,CAAC,mBAAmB,CAEvC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/sortable-area/index.tsx"],"names":[],"mappings":";AAaA,OAAO,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAOjD,OAAO,EAAE,iBAAiB,EAAE,CAAC;AAE7B,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,IAAI,EAAE,EACzC,KAAK,EACL,cAAc,EACd,UAAU,EACV,aAAa,EACb,cAAc,EACd,WAAW,GACZ,EAAE,iBAAiB,CAAC,IAAI,CAAC,eAiFzB;AA+FD,wBAAgB,sBAAsB,CACpC,cAAc,EAAE,iBAAiB,CAAC,cAAc,CAAC,GAAG,CAAC,GACpD,iBAAiB,CAAC,mBAAmB,CAEvC"}

package/lib/internal/template/internal/components/sortable-area/index.js

@@ -8,12 +8,13 @@ import clsx from 'clsx';
 import { Portal } from '@cloudscape-design/component-toolkit/internal';
 import { fireNonCancelableEvent } from '../../events';
 import { joinStrings } from '../../utils/strings';
+import { EventName } from './keyboard-sensor/utilities/events';
 import useDragAndDropReorder from './use-drag-and-drop-reorder';
 import useLiveAnnouncements from './use-live-announcements';
 import styles from './styles.css.js';
 export default function SortableArea({ items, itemDefinition, renderItem, onItemsChange, disableReorder, i18nStrings, }) {
     var _a;
-    const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors } = useDragAndDropReorder({
+    const { activeItemId, setActiveItemId, collisionDetection, handleKeyDown, sensors, isKeyboard } = useDragAndDropReorder({
         items,
         itemDefinition,
     });
@@ -38,9 +39,9 @@ export default function SortableArea({ items, itemDefinition, renderItem, onItem
                 fireNonCancelableEvent(onItemsChange, { items: arrayMove([...items], oldIndex, newIndex), movedItem });
             }
         }, onDragCancel: () => setActiveItemId(null) },
-        React.createElement(SortableContext, { disabled: disableReorder, items: items.map(item => itemDefinition.id(item)), strategy: verticalListSortingStrategy }, items.map(item => (React.createElement(DraggableItem, { key: itemDefinition.id(item), item: item, itemDefinition: itemDefinition, renderItem: renderItem, onKeyDown: handleKeyDown, dragHandleAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dragHandleAriaLabel })))),
+        React.createElement(SortableContext, { disabled: disableReorder, items: items.map(item => itemDefinition.id(item)), strategy: verticalListSortingStrategy }, items.map(item => (React.createElement(DraggableItem, { key: itemDefinition.id(item), item: item, itemDefinition: itemDefinition, showDirectionButtons: item === activeItem && isKeyboard.current, renderItem: renderItem, onKeyDown: handleKeyDown, dragHandleAriaLabel: i18nStrings === null || i18nStrings === void 0 ? void 0 : i18nStrings.dragHandleAriaLabel })))),
         React.createElement(Portal, { container: portalContainer },
-            React.createElement(DragOverlay, { className: clsx(styles['drag-overlay'], styles[`drag-overlay-${getBorderRadiusVariant(itemDefinition)}`]), dropAnimation: null, style: { zIndex: 5000 } }, activeItem &&
+            React.createElement(DragOverlay, { className: clsx(styles['drag-overlay'], styles[`drag-overlay-${getBorderRadiusVariant(itemDefinition)}`]), dropAnimation: null, style: { zIndex: 5000 }, transition: isKeyboard.current ? 'transform 250ms' : '' }, activeItem &&
                 renderItem({
                     item: activeItem,
                     id: activeItemId.toString(),
@@ -71,7 +72,7 @@ function usePortalContainer() {
     }, []);
     return portalContainerRef.current;
 }
-function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, onKeyDown, renderItem, }) {
+function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, showDirectionButtons, onKeyDown, renderItem, }) {
     var _a;
     const id = itemDefinition.id(item);
     const { isDragging, isSorting, listeners, setNodeRef, transform, attributes } = useSortable({
@@ -89,6 +90,7 @@ function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, onKeyDown, r
                 }
             } });
     const className = clsx(isDragging && clsx(styles.placeholder, styles[`placeholder-${getBorderRadiusVariant(itemDefinition)}`]), isSorting && styles.sorting);
+    const dragHandleRef = useRef(null);
     return (React.createElement(React.Fragment, null, renderItem({
         item,
         id,
@@ -98,7 +100,20 @@ function DraggableItem({ item, itemDefinition, dragHandleAriaLabel, onKeyDown, r
         isDropPlaceholder: isDragging,
         isSortingActive: isSorting,
         isDragGhost: false,
-        dragHandleProps: Object.assign(Object.assign({}, dragHandleListeners), { ariaLabel: (_a = joinStrings(dragHandleAriaLabel, itemDefinition.label(item))) !== null && _a !== void 0 ? _a : '', ariaDescribedby: attributes['aria-describedby'], disabled: attributes['aria-disabled'] }),
+        dragHandleProps: Object.assign(Object.assign({}, dragHandleListeners), { ariaLabel: (_a = joinStrings(dragHandleAriaLabel, itemDefinition.label(item))) !== null && _a !== void 0 ? _a : '', ariaDescribedby: attributes['aria-describedby'], disabled: attributes['aria-disabled'], triggerMode: 'controlled', controlledShowButtons: showDirectionButtons, ref: dragHandleRef, directions: showDirectionButtons
+                ? {
+                    'block-start': 'active',
+                    'block-end': 'active',
+                }
+                : undefined, onDirectionClick: direction => {
+                var _a;
+                const event = new Event(direction === 'block-start' ? EventName.CustomUp : EventName.CustomDown, {
+                    bubbles: true,
+                    cancelable: true,
+                });
+                onKeyDown(event);
+                (_a = dragHandleRef.current) === null || _a === void 0 ? void 0 : _a.dispatchEvent(event);
+            } }),
     })));
 }
 export function getBorderRadiusVariant(itemDefinition) {