@cloudscape-design/components-themeable 3.0.936 → 3.0.937

package/lib/internal/template/internal/base-component/styles.scoped.css

@@ -184,6 +184,12 @@
   --color-background-button-primary-default-e50v6e:#0073bb;
   --color-background-button-primary-disabled-femoov:#ffffff;
   --color-background-button-primary-hover-288r60:#0a4a74;
+  --color-background-direction-button-active-wssyfi:#2a2e33;
+  --color-background-direction-button-default-5hblg2:#545b64;
+  --color-background-direction-button-disabled-m3uin1:#eaeded;
+  --color-background-direction-button-hover-nuoi33:#414750;
+  --color-text-direction-button-default-6q1q04:#ffffff;
+  --color-text-direction-button-disabled-rx60rf:#aab7b8;
   --color-background-calendar-current-date-du8mmf:#f2f3f3;
   --color-background-cell-shaded-wami5b:#f2f3f3;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#687078;
@@ -835,6 +841,8 @@
     --color-background-button-primary-default-e50v6e:#44b9d6;
     --color-background-button-primary-disabled-femoov:#2a2e33;
     --color-background-button-primary-hover-288r60:#00a1c9;
+    --color-background-direction-button-disabled-m3uin1:#2a2e33;
+    --color-text-direction-button-disabled-rx60rf:#687078;
     --color-background-calendar-current-date-du8mmf:#16191f;
     --color-background-cell-shaded-wami5b:#16191f;
     --color-background-code-editor-gutter-active-line-default-ok7m7g:#879596;
@@ -1145,6 +1153,8 @@
   --color-background-button-primary-default-e50v6e:#44b9d6;
   --color-background-button-primary-disabled-femoov:#2a2e33;
   --color-background-button-primary-hover-288r60:#00a1c9;
+  --color-background-direction-button-disabled-m3uin1:#2a2e33;
+  --color-text-direction-button-disabled-rx60rf:#687078;
   --color-background-calendar-current-date-du8mmf:#16191f;
   --color-background-cell-shaded-wami5b:#16191f;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#879596;
@@ -1490,6 +1500,11 @@
   --color-background-button-primary-default-e50v6e:#006ce0;
   --color-background-button-primary-disabled-femoov:#ebebf0;
   --color-background-button-primary-hover-288r60:#002b66;
+  --color-background-direction-button-active-wssyfi:#232b37;
+  --color-background-direction-button-default-5hblg2:#424650;
+  --color-background-direction-button-disabled-m3uin1:#ebebf0;
+  --color-background-direction-button-hover-nuoi33:#333843;
+  --color-text-direction-button-disabled-rx60rf:#b4b4bb;
   --color-background-calendar-current-date-du8mmf:#f3f3f7;
   --color-background-cell-shaded-wami5b:#f6f6f9;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#656871;
@@ -1860,6 +1875,8 @@
     --color-background-button-primary-default-e50v6e:#42b4ff;
     --color-background-button-primary-disabled-femoov:#232b37;
     --color-background-button-primary-hover-288r60:#75cfff;
+    --color-background-direction-button-disabled-m3uin1:#232b37;
+    --color-text-direction-button-disabled-rx60rf:#656871;
     --color-background-calendar-current-date-du8mmf:#333843;
     --color-background-cell-shaded-wami5b:#1b232d;
     --color-background-code-editor-gutter-active-line-default-ok7m7g:#8c8c94;
@@ -2135,6 +2152,8 @@
   --color-background-button-primary-default-e50v6e:#42b4ff;
   --color-background-button-primary-disabled-femoov:#232b37;
   --color-background-button-primary-hover-288r60:#75cfff;
+  --color-background-direction-button-disabled-m3uin1:#232b37;
+  --color-text-direction-button-disabled-rx60rf:#656871;
   --color-background-calendar-current-date-du8mmf:#333843;
   --color-background-cell-shaded-wami5b:#1b232d;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#8c8c94;
@@ -2342,6 +2361,8 @@
   --color-background-button-primary-default-e50v6e:#42b4ff;
   --color-background-button-primary-disabled-femoov:#232b37;
   --color-background-button-primary-hover-288r60:#75cfff;
+  --color-background-direction-button-disabled-m3uin1:#232b37;
+  --color-text-direction-button-disabled-rx60rf:#656871;
   --color-background-calendar-current-date-du8mmf:#333843;
   --color-background-cell-shaded-wami5b:#1b232d;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#8c8c94;
@@ -2545,6 +2566,8 @@
   --color-background-button-primary-default-e50v6e:#42b4ff;
   --color-background-button-primary-disabled-femoov:#232b37;
   --color-background-button-primary-hover-288r60:#75cfff;
+  --color-background-direction-button-disabled-m3uin1:#232b37;
+  --color-text-direction-button-disabled-rx60rf:#656871;
   --color-background-calendar-current-date-du8mmf:#333843;
   --color-background-cell-shaded-wami5b:#1b232d;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#8c8c94;
@@ -2762,6 +2785,8 @@
   --color-background-button-primary-default-e50v6e:#42b4ff;
   --color-background-button-primary-disabled-femoov:#232b37;
   --color-background-button-primary-hover-288r60:#75cfff;
+  --color-background-direction-button-disabled-m3uin1:#232b37;
+  --color-text-direction-button-disabled-rx60rf:#656871;
   --color-background-calendar-current-date-du8mmf:#333843;
   --color-background-cell-shaded-wami5b:#1b232d;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#8c8c94;
@@ -3183,6 +3208,8 @@
   --color-background-button-primary-default-e50v6e:#dedee3;
   --color-background-button-primary-disabled-femoov:#232b37;
   --color-background-button-primary-hover-288r60:#ffffff;
+  --color-background-direction-button-disabled-m3uin1:#232b37;
+  --color-text-direction-button-disabled-rx60rf:#656871;
   --color-background-calendar-current-date-du8mmf:#333843;
   --color-background-cell-shaded-wami5b:#1b232d;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#8c8c94;
@@ -3388,6 +3415,8 @@
   --color-background-button-primary-default-e50v6e:#dedee3;
   --color-background-button-primary-disabled-femoov:#232b37;
   --color-background-button-primary-hover-288r60:#ffffff;
+  --color-background-direction-button-disabled-m3uin1:#232b37;
+  --color-text-direction-button-disabled-rx60rf:#656871;
   --color-background-calendar-current-date-du8mmf:#333843;
   --color-background-cell-shaded-wami5b:#1b232d;
   --color-background-code-editor-gutter-active-line-default-ok7m7g:#8c8c94;

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

@@ -0,0 +1,5 @@
+import React from 'react';
+import { DragHandleProps } from './interfaces';
+declare const DragHandleButton: React.ForwardRefExoticComponent<DragHandleProps & React.RefAttributes<DragHandleProps.Ref>>;
+export default DragHandleButton;
+//# sourceMappingURL=button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle/button.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAMlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,QAAA,MAAM,gBAAgB,6FA+DrB,CAAC;AAEF,eAAe,gBAAgB,CAAC"}

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

@@ -0,0 +1,35 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { forwardRef, useRef } from 'react';
+import clsx from 'clsx';
+import InternalIcon from '../../../icon/internal';
+import useForwardFocus from '../../hooks/forward-focus';
+import { ResizeIcon } from './resize-icon';
+import styles from './styles.css.js';
+const DragHandleButton = forwardRef(({ variant = 'drag-indicator', size = 'normal', className, ariaLabel, ariaDescribedby, ariaValue, disabled, onPointerDown, onKeyDown, }, ref) => {
+    const dragHandleRefObject = useRef(null);
+    useForwardFocus(ref, dragHandleRefObject);
+    const iconProps = (() => {
+        const shared = { variant: disabled ? 'disabled' : undefined, size };
+        switch (variant) {
+            case 'drag-indicator':
+                return Object.assign(Object.assign({}, shared), { name: 'drag-indicator' });
+            case 'resize-area':
+                return Object.assign(Object.assign({}, shared), { name: 'resize-area' });
+            case 'resize-horizontal':
+                return Object.assign(Object.assign({}, shared), { svg: React.createElement(ResizeIcon, { variant: "horizontal" }) });
+            case 'resize-vertical':
+                return Object.assign(Object.assign({}, shared), { svg: React.createElement(ResizeIcon, { variant: "vertical" }) });
+        }
+    })();
+    return (
+    // We need to use a div with button role instead of a button
+    // so that Safari will focus on it when clicking it.
+    // (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: dragHandleRefObject, role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(className, styles.handle, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "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))));
+});
+export default DragHandleButton;
+//# sourceMappingURL=button.js.map

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

@@ -0,0 +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;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAErC,MAAM,gBAAgB,GAAG,UAAU,CACjC,CACE,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,GACO,EAClB,GAAmC,EACnC,EAAE;IACF,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,eAAe,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC;IAE1C,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,mBAAmB,EACxB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,EACT,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,sBACH,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 { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport useForwardFocus from '../../hooks/forward-focus';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\n\nconst DragHandleButton = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      className,\n      ariaLabel,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onKeyDown,\n    }: DragHandleProps,\n    ref: React.Ref<DragHandleProps.Ref>\n  ) => {\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    useForwardFocus(ref, dragHandleRefObject);\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={dragHandleRefObject}\n        role={ariaValue ? 'slider' : 'button'}\n        tabIndex={0}\n        className={clsx(\n          className,\n          styles.handle,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled']\n        )}\n        aria-label={ariaLabel}\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"]}

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,KAA6B,MAAM,OAAO,CAAC;AAOlD,OAAO,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAK/C,OAAO,EAAE,eAAe,EAAE,CAAC;AAE3B,QAAA,MAAM,kBAAkB,6FAiEvB,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,6FAyCvB,CAAC;AAEF,eAAe,kBAAkB,CAAC"}

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

@@ -1,39 +1,15 @@
 import { __rest } from "tslib";
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { forwardRef, useRef } from 'react';
-import clsx from 'clsx';
-import InternalIcon from '../../../icon/internal';
+import React, { forwardRef } from 'react';
 import { getBaseProps } from '../../base-component';
-import useForwardFocus from '../../hooks/forward-focus';
-import { ResizeIcon } from './resize-icon';
-import styles from './styles.css.js';
+import DragHandleWrapper from '../drag-handle-wrapper';
+import DragHandleButton from './button';
 const InternalDragHandle = forwardRef((_a, ref) => {
-    var { variant = 'drag-indicator', size = 'normal', ariaLabel, ariaDescribedby, ariaValue, disabled, onPointerDown, onKeyDown } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaDescribedby", "ariaValue", "disabled", "onPointerDown", "onKeyDown"]);
+    var { variant, size, ariaLabel, ariaDescribedby, tooltipText, ariaValue, disabled, directions = {}, onPointerDown, onKeyDown, onDirectionClick } = _a, rest = __rest(_a, ["variant", "size", "ariaLabel", "ariaDescribedby", "tooltipText", "ariaValue", "disabled", "directions", "onPointerDown", "onKeyDown", "onDirectionClick"]);
     const baseProps = getBaseProps(rest);
-    const dragHandleRefObject = useRef(null);
-    useForwardFocus(ref, dragHandleRefObject);
-    const iconProps = (() => {
-        const shared = { variant: disabled ? 'disabled' : undefined, size };
-        switch (variant) {
-            case 'drag-indicator':
-                return Object.assign(Object.assign({}, shared), { name: 'drag-indicator' });
-            case 'resize-area':
-                return Object.assign(Object.assign({}, shared), { name: 'resize-area' });
-            case 'resize-horizontal':
-                return Object.assign(Object.assign({}, shared), { svg: React.createElement(ResizeIcon, { variant: "horizontal" }) });
-            case 'resize-vertical':
-                return Object.assign(Object.assign({}, shared), { svg: React.createElement(ResizeIcon, { variant: "vertical" }) });
-        }
-    })();
-    return (
-    // We need to use a div with button role instead of a button
-    // so that Safari will focus on it when clicking it.
-    // (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", Object.assign({}, baseProps, { ref: dragHandleRefObject, role: ariaValue ? 'slider' : 'button', tabIndex: 0, className: clsx(baseProps.className, styles.handle, styles[`handle-${variant}`], styles[`handle-size-${size}`], disabled && styles['handle-disabled']), "aria-label": ariaLabel, "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))));
+    return (React.createElement(DragHandleWrapper, { directions: !disabled ? directions : {}, tooltipText: tooltipText, onDirectionClick: onDirectionClick },
+        React.createElement(DragHandleButton, { ref: ref, className: baseProps.className, variant: variant, size: size, ariaLabel: ariaLabel, ariaDescribedby: ariaDescribedby, ariaValue: ariaValue, disabled: disabled, onPointerDown: onPointerDown, 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,EAAE,MAAM,OAAO,CAAC;AAClD,OAAO,IAAI,MAAM,MAAM,CAAC;AAGxB,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AACpD,OAAO,eAAe,MAAM,2BAA2B,CAAC;AAExD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,OAAO,MAAM,MAAM,iBAAiB,CAAC;AAIrC,MAAM,kBAAkB,GAAG,UAAU,CACnC,CACE,EAUkB,EAClB,GAAmC,EACnC,EAAE;QAZF,EACE,OAAO,GAAG,gBAAgB,EAC1B,IAAI,GAAG,QAAQ,EACf,SAAS,EACT,eAAe,EACf,SAAS,EACT,QAAQ,EACR,aAAa,EACb,SAAS,OAEO,EADb,IAAI,cATT,0GAUC,CADQ;IAIT,MAAM,SAAS,GAAG,YAAY,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,mBAAmB,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAC;IAEzD,eAAe,CAAC,GAAG,EAAE,mBAAmB,CAAC,CAAC;IAE1C,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,6CACM,SAAS,IACb,GAAG,EAAE,mBAAmB,EACxB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EACrC,QAAQ,EAAE,CAAC,EACX,SAAS,EAAE,IAAI,CACb,SAAS,CAAC,SAAS,EACnB,MAAM,CAAC,MAAM,EACb,MAAM,CAAC,UAAU,OAAO,EAAE,CAAC,EAC3B,MAAM,CAAC,eAAe,IAAI,EAAE,CAAC,EAC7B,QAAQ,IAAI,MAAM,CAAC,iBAAiB,CAAC,CACtC,gBACW,SAAS,sBACH,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,kBAAkB,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 { IconProps } from '../../../icon/interfaces';\nimport InternalIcon from '../../../icon/internal';\nimport { getBaseProps } from '../../base-component';\nimport useForwardFocus from '../../hooks/forward-focus';\nimport { DragHandleProps } from './interfaces';\nimport { ResizeIcon } from './resize-icon';\n\nimport styles from './styles.css.js';\n\nexport { DragHandleProps };\n\nconst InternalDragHandle = forwardRef(\n  (\n    {\n      variant = 'drag-indicator',\n      size = 'normal',\n      ariaLabel,\n      ariaDescribedby,\n      ariaValue,\n      disabled,\n      onPointerDown,\n      onKeyDown,\n      ...rest\n    }: DragHandleProps,\n    ref: React.Ref<DragHandleProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n    const dragHandleRefObject = useRef<HTMLDivElement>(null);\n\n    useForwardFocus(ref, dragHandleRefObject);\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        {...baseProps}\n        ref={dragHandleRefObject}\n        role={ariaValue ? 'slider' : 'button'}\n        tabIndex={0}\n        className={clsx(\n          baseProps.className,\n          styles.handle,\n          styles[`handle-${variant}`],\n          styles[`handle-size-${size}`],\n          disabled && styles['handle-disabled']\n        )}\n        aria-label={ariaLabel}\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 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,EAakB,EAClB,GAAmC,EACnC,EAAE;QAfF,EACE,OAAO,EACP,IAAI,EACJ,SAAS,EACT,eAAe,EACf,WAAW,EACX,SAAS,EACT,QAAQ,EACR,UAAU,GAAG,EAAE,EACf,aAAa,EACb,SAAS,EACT,gBAAgB,OAEA,EADb,IAAI,cAZT,2JAaC,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;QAElC,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,eAAe,EAAE,eAAe,EAChC,SAAS,EAAE,SAAS,EACpB,QAAQ,EAAE,QAAQ,EAClB,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      ariaDescribedby,\n      tooltipText,\n      ariaValue,\n      disabled,\n      directions = {},\n      onPointerDown,\n      onKeyDown,\n      onDirectionClick,\n      ...rest\n    }: DragHandleProps,\n    ref: React.Ref<DragHandleProps.Ref>\n  ) => {\n    const baseProps = getBaseProps(rest);\n\n    return (\n      <DragHandleWrapper\n        directions={!disabled ? directions : {}}\n        tooltipText={tooltipText}\n        onDirectionClick={onDirectionClick}\n      >\n        <DragHandleButton\n          ref={ref}\n          className={baseProps.className}\n          variant={variant}\n          size={size}\n          ariaLabel={ariaLabel}\n          ariaDescribedby={ariaDescribedby}\n          ariaValue={ariaValue}\n          disabled={disabled}\n          onPointerDown={onPointerDown}\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

@@ -1,17 +1,23 @@
 /// <reference types="react" />
+import { Direction as WrapperDirection, DirectionState as WrapperDirectionState } from '../drag-handle-wrapper/interfaces';
 export interface DragHandleProps {
     variant?: DragHandleProps.Variant;
     size?: DragHandleProps.Size;
-    ariaLabel: string;
+    ariaLabel?: string;
     ariaDescribedby?: string;
     ariaValue?: DragHandleProps.AriaValue;
     disabled?: boolean;
     className?: string;
     onPointerDown?: React.PointerEventHandler;
     onKeyDown?: React.KeyboardEventHandler;
+    tooltipText?: string;
+    directions?: Partial<Record<DragHandleProps.Direction, DragHandleProps.DirectionState>>;
+    onDirectionClick?: (direction: DragHandleProps.Direction) => void;
 }
 export declare namespace DragHandleProps {
     type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';
+    type Direction = WrapperDirection;
+    type DirectionState = WrapperDirectionState;
     type Size = 'small' | 'normal';
     interface AriaValue {
         valueMin: number;

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,MAAM,WAAW,eAAe;IAC9B,OAAO,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC;IAClC,IAAI,CAAC,EAAE,eAAe,CAAC,IAAI,CAAC;IAC5B,SAAS,EAAE,MAAM,CAAC;IAClB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,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;CACxC;AAED,yBAAiB,eAAe,CAAC;IAC/B,KAAY,OAAO,GAAG,gBAAgB,GAAG,aAAa,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG,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;IAED,UAAiB,GAAG;QAClB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;KACrC;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,EACxC,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,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC;IACtC,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;CACnE;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;IAED,UAAiB,GAAG;QAClB,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI,CAAC;KACrC;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\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\n  disabled?: boolean;\n  className?: string;\n  onPointerDown?: React.PointerEventHandler;\n  onKeyDown?: React.KeyboardEventHandler;\n}\n\nexport namespace DragHandleProps {\n  export type Variant = 'drag-indicator' | 'resize-area' | 'resize-horizontal' | 'resize-vertical';\n\n  export type Size = 'small' | 'normal';\n\n  export interface AriaValue {\n    valueMin: number;\n    valueMax: number;\n    valueNow: number;\n  }\n\n  export interface Ref {\n    focus(options?: FocusOptions): void;\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} from '../drag-handle-wrapper/interfaces';\n\nexport interface DragHandleProps {\n  variant?: DragHandleProps.Variant;\n  size?: DragHandleProps.Size;\n  ariaLabel?: string;\n  ariaDescribedby?: string;\n  ariaValue?: DragHandleProps.AriaValue;\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}\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  export interface Ref {\n    focus(options?: FocusOptions): void;\n  }\n}\n"]}

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

@@ -0,0 +1,11 @@
+import React from 'react';
+import { Direction, DirectionState } from './interfaces';
+interface DirectionButtonProps {
+    direction: Direction;
+    state: DirectionState;
+    onClick: React.MouseEventHandler;
+    show: boolean;
+}
+export default function DirectionButton({ direction, state, show, onClick }: DirectionButtonProps): JSX.Element;
+export {};
+//# sourceMappingURL=direction-button.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"direction-button.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/direction-button.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAczD,UAAU,oBAAoB;IAC5B,SAAS,EAAE,SAAS,CAAC;IACrB,KAAK,EAAE,cAAc,CAAC;IACtB,OAAO,EAAE,KAAK,CAAC,iBAAiB,CAAC;IACjC,IAAI,EAAE,OAAO,CAAC;CACf;AAED,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE,oBAAoB,eA8BhG"}

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

@@ -0,0 +1,30 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React from 'react';
+import clsx from 'clsx';
+import InternalIcon from '../../../icon/internal';
+import { Transition } from '../transition';
+import styles from './styles.css.js';
+// Mapping from CSS logical property direction to icon name. The icon component
+// already flips the left/right icons automatically based on RTL, so we don't
+// need to do anything special.
+const ICON_LOGICAL_PROPERTY_MAP = {
+    'block-start': 'arrow-up',
+    'block-end': 'arrow-down',
+    'inline-start': 'arrow-left',
+    'inline-end': 'arrow-right',
+};
+export default function DirectionButton({ direction, state, show, onClick }) {
+    return (React.createElement(Transition, { in: show }, (transitionState, ref) => (
+    // The wrapper exists to provide a padding around each direction button that
+    // prevents any accidental presses around the button from propagating to any
+    // interactive elements behind the button.
+    React.createElement("span", { ref: ref, className: clsx(styles['direction-button-wrapper'], styles[`direction-button-wrapper-${direction}`], transitionState === 'exited' && styles['direction-button-wrapper-hidden'], styles[`direction-button-wrapper-motion-${transitionState}`]) },
+        React.createElement("span", { className: clsx(styles['direction-button'], state === 'disabled' && styles['direction-button-disabled']), onClick: state !== 'disabled' ? onClick : undefined, 
+            // This prevents focus from being lost to `document.body` on
+            // mouse/pointer press. This allows us to listen to onClick while
+            // keeping this button pointer-accessible only.
+            onPointerDown: event => event.preventDefault() },
+            React.createElement(InternalIcon, { name: ICON_LOGICAL_PROPERTY_MAP[direction], size: "small" }))))));
+}
+//# sourceMappingURL=direction-button.js.map

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

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

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

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

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

@@ -0,0 +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;AAWjE,MAAM,CAAC,OAAO,UAAU,iBAAiB,CAAC,EACxC,UAAU,EACV,WAAW,EACX,QAAQ,EACR,gBAAgB,GACjB,EAAE,sBAAsB,eAwMxB"}

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

@@ -0,0 +1,138 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useEffect, useRef, useState } from 'react';
+import clsx from 'clsx';
+import { nodeContains } from '@cloudscape-design/component-toolkit/dom';
+import { getFirstFocusable } from '../focus-lock/utils';
+import Tooltip from '../tooltip';
+import DirectionButton from './direction-button';
+import PortalOverlay from './portal-overlay';
+import styles from './styles.css.js';
+// The amount of distance after pointer down that the cursor is allowed to
+// jitter for a subsequent mouseup to still register as a "press" instead of
+// a drag. A little allowance is needed for usability reasons, but this number
+// isn't set in stone.
+const PRESS_DELTA_MAX = 3;
+export default function DragHandleWrapper({ directions, tooltipText, children, onDirectionClick, }) {
+    const wrapperRef = useRef(null);
+    const dragHandleRef = useRef(null);
+    const [showTooltip, setShowTooltip] = useState(false);
+    const [showButtons, setShowButtons] = useState(false);
+    // The tooltip ("Drag or select to move/resize") shouldn't show if clicking
+    // on the handle wouldn't do anything.
+    const isDisabled = !directions['block-start'] && !directions['block-end'] && !directions['inline-start'] && !directions['inline-end'];
+    const onWrapperFocusIn = event => {
+        // The drag handle is focused when it's either tabbed to, or the pointer
+        // is pressed on it. We exclude handling the pointer press in this handler,
+        // since it could be the start of a drag event - the pointer stuff is
+        // handled in the "pointerup" listener instead.
+        if (!isPointerDown.current && !nodeContains(wrapperRef.current, event.relatedTarget)) {
+            setShowTooltip(false);
+            setShowButtons(true);
+        }
+    };
+    const onWrapperFocusOut = event => {
+        // Close the directional buttons when the focus leaves the drag handle.
+        // "focusout" is also triggered when the user leaves the current tab, but
+        // since it'll be returned when they switch back anyway, we exclude that
+        // case by checking for `document.hasFocus()`.
+        if (document.hasFocus() && !nodeContains(wrapperRef.current, event.relatedTarget)) {
+            setShowButtons(false);
+        }
+    };
+    const isPointerDown = useRef(false);
+    const initialPointerPosition = useRef();
+    const didPointerDrag = useRef(false);
+    useEffect(() => {
+        const controller = new AbortController();
+        // See `PRESS_DELTA_MAX` above. We need to differentiate between a "click"
+        // and a "drag" action. We can say a "click" happens when a "pointerdown"
+        // is followed by a "pointerup" with no "pointermove" between the two.
+        // However, it would be a poor usability experience if a "click" isn't
+        // registered because, while pressing my mouse, I moved it by just one
+        // pixel, making it a "drag" instead. So we allow the pointer to move by
+        // `PRESS_DELTA_MAX` pixels before setting `didPointerDrag` to true.
+        document.addEventListener('pointermove', event => {
+            if (isPointerDown.current &&
+                initialPointerPosition.current &&
+                (event.clientX > initialPointerPosition.current.x + PRESS_DELTA_MAX ||
+                    event.clientX < initialPointerPosition.current.x - PRESS_DELTA_MAX ||
+                    event.clientY > initialPointerPosition.current.y + PRESS_DELTA_MAX ||
+                    event.clientY < initialPointerPosition.current.y - PRESS_DELTA_MAX)) {
+                didPointerDrag.current = true;
+            }
+        }, { signal: controller.signal });
+        // Shared behavior when a "pointerdown" state ends. This is shared so it
+        // can be called for both "pointercancel" and "pointerup" events.
+        const resetPointerDownState = () => {
+            isPointerDown.current = false;
+            initialPointerPosition.current = undefined;
+        };
+        document.addEventListener('pointercancel', () => {
+            resetPointerDownState();
+        }, { signal: controller.signal });
+        document.addEventListener('pointerup', () => {
+            if (isPointerDown.current && !didPointerDrag.current) {
+                // The cursor didn't move much between "pointerdown" and "pointerup".
+                // Handle this as a "click" instead of a "drag".
+                setShowButtons(true);
+            }
+            resetPointerDownState();
+        }, { signal: controller.signal });
+        return () => controller.abort();
+    }, []);
+    const onHandlePointerDown = event => {
+        // Tooltip behavior: the tooltip should appear on hover, but disappear when
+        // the pointer starts dragging (having the tooltip get in the way while
+        // you're trying to drag upwards is annoying). Additionally, the tooltip
+        // shouldn't reappear when dragging ends, but only when the pointer leaves
+        // the drag handle and comes back.
+        isPointerDown.current = true;
+        didPointerDrag.current = false;
+        initialPointerPosition.current = { x: event.clientX, y: event.clientY };
+        setShowTooltip(false);
+    };
+    // Tooltip behavior: the tooltip should stay open when the cursor moves
+    // from the drag handle into the tooltip content itself. This is why the
+    // handler is set on the wrapper for both the drag handle and the tooltip.
+    const onTooltipGroupPointerEnter = () => {
+        if (!isPointerDown.current) {
+            setShowTooltip(true);
+        }
+    };
+    const onTooltipGroupPointerLeave = () => {
+        setShowTooltip(false);
+    };
+    const onDragHandleKeyDown = event => {
+        // For accessibility reasons, pressing escape should should always close
+        // the floating controls.
+        if (event.key === 'Escape') {
+            setShowButtons(false);
+        }
+        else {
+            // 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);
+        }
+    };
+    const onInternalDirectionClick = (direction) => {
+        var _a;
+        // Move focus back to the wrapper on click. This prevents focus from staying
+        // on an aria-hidden control, and allows future keyboard events to be handled
+        // cleanly using the drag handle's own handlers.
+        if (dragHandleRef.current) {
+            (_a = getFirstFocusable(dragHandleRef.current)) === null || _a === void 0 ? void 0 : _a.focus();
+        }
+        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 },
+        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.current },
+            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

@@ -0,0 +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\n// The amount of distance after pointer down that the cursor is allowed to\n// jitter for a subsequent mouseup to still register as a \"press\" instead of\n// a drag. A little allowance is needed for usability reasons, but this number\n// isn't set in stone.\nconst PRESS_DELTA_MAX = 3;\n\nexport default function DragHandleWrapper({\n  directions,\n  tooltipText,\n  children,\n  onDirectionClick,\n}: DragHandleWrapperProps) {\n  const wrapperRef = useRef<HTMLDivElement | null>(null);\n\n  const dragHandleRef = useRef<HTMLDivElement | null>(null);\n  const [showTooltip, setShowTooltip] = useState(false);\n  const [showButtons, setShowButtons] = useState(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.\n    if (!isPointerDown.current && !nodeContains(wrapperRef.current, event.relatedTarget)) {\n      setShowTooltip(false);\n      setShowButtons(true);\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  const isPointerDown = useRef(false);\n  const initialPointerPosition = useRef<{ x: number; y: number } | undefined>();\n  const didPointerDrag = useRef(false);\n\n  useEffect(() => {\n    const controller = new AbortController();\n\n    // See `PRESS_DELTA_MAX` above. We need to differentiate between a \"click\"\n    // and a \"drag\" action. We can say a \"click\" happens when a \"pointerdown\"\n    // is followed by 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    // `PRESS_DELTA_MAX` 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 + PRESS_DELTA_MAX ||\n            event.clientX < initialPointerPosition.current.x - PRESS_DELTA_MAX ||\n            event.clientY > initialPointerPosition.current.y + PRESS_DELTA_MAX ||\n            event.clientY < initialPointerPosition.current.y - PRESS_DELTA_MAX)\n        ) {\n          didPointerDrag.current = true;\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  }, []);\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 should always close\n    // the floating controls.\n    if (event.key === 'Escape') {\n      setShowButtons(false);\n    } else {\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.current}>\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

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
+export type DirectionState = 'active' | 'disabled';
+export interface DragHandleWrapperProps {
+    directions: Partial<Record<Direction, DirectionState>>;
+    onDirectionClick?: (direction: Direction) => void;
+    tooltipText?: string;
+    children: React.ReactNode;
+}
+//# sourceMappingURL=interfaces.d.ts.map

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

@@ -0,0 +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;AAEnD,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;CAC3B"}

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

@@ -0,0 +1,4 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+export {};
+//# sourceMappingURL=interfaces.js.map

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

@@ -0,0 +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';\n\nexport interface DragHandleWrapperProps {\n  directions: Partial<Record<Direction, DirectionState>>;\n  onDirectionClick?: (direction: Direction) => void;\n  tooltipText?: string;\n  children: React.ReactNode;\n}\n"]}

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

@@ -0,0 +1,6 @@
+import React from 'react';
+export default function PortalOverlay({ track, children }: {
+    track: HTMLElement | null;
+    children: React.ReactNode;
+}): JSX.Element | null;
+//# sourceMappingURL=portal-overlay.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"portal-overlay.d.ts","sourceRoot":"","sources":["../../../../../src/internal/components/drag-handle-wrapper/portal-overlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAYjD,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,EAAE;IAAE,KAAK,EAAE,WAAW,GAAG,IAAI,CAAC;IAAC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBAyDlH"}