chore: Add internal drag handle UAP support

pages/drag-handle/wrapper.page.tsx

@@ -0,0 +1,44 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Box from '~components/box';
+import Button from '~components/button';
+import DragHandleWrapper from '~components/internal/components/drag-handle-wrapper';
+
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function GridPage() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <h1>Drag handle demo</h1>
+      <ScreenshotArea>
+        <Box padding="l" textAlign="center">
+          <DragHandleWrapper
+            open={open}
+            directions={{
+              'block-start': 'visible',
+              'block-end': 'visible',
+              'inline-start': 'disabled',
+              'inline-end': 'visible',
+            }}
+            onPress={direction => console.log(direction)}
+            onClose={() => setOpen(false)}
+          >
+            <Button
+              variant="icon"
+              iconName="drag-indicator"
+              onClick={event => {
+                console.log({ button: event.detail.button });
+                setOpen(show => !show);
+              }}
+              ariaLabel="Drag"
+            />
+          </DragHandleWrapper>
+        </Box>
+      </ScreenshotArea>
+    </>
+  );
+}

src/__integ__/__snapshots__/themes.test.ts.snap

@@ -71,6 +71,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-background-control-checked": "#0073bb",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#d5dbdb",
+  "color-background-drag-button-active": "#2a2e33",
+  "color-background-drag-button-default": "#545b64",
+  "color-background-drag-button-disabled": "#eaeded",
+  "color-background-drag-button-hover": "#414750",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f1faff",
@@ -384,6 +388,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "compact" 1`] =
   "color-text-counter": "#687078",
   "color-text-disabled": "#aab7b8",
   "color-text-disabled-inline-edit": "#545b64",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#aab7b8",
   "color-text-dropdown-footer": "#687078",
   "color-text-dropdown-group-label": "#545b64",
   "color-text-dropdown-item-default": "#16191f",
@@ -730,6 +736,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-background-control-checked": "#00a1c9",
   "color-background-control-default": "#1a2029",
   "color-background-control-disabled": "#414750",
+  "color-background-drag-button-active": "#2a2e33",
+  "color-background-drag-button-default": "#545b64",
+  "color-background-drag-button-disabled": "#2a2e33",
+  "color-background-drag-button-hover": "#414750",
   "color-background-dropdown-item-default": "#2a2e33",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#12293b",
@@ -1043,6 +1053,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "dark" 1`] = `
   "color-text-counter": "#95a5a6",
   "color-text-disabled": "#687078",
   "color-text-disabled-inline-edit": "#95a5a6",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#687078",
   "color-text-dropdown-footer": "#95a5a6",
   "color-text-dropdown-group-label": "#95a5a6",
   "color-text-dropdown-item-default": "#d5dbdb",
@@ -1389,6 +1401,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-background-control-checked": "#0073bb",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#d5dbdb",
+  "color-background-drag-button-active": "#2a2e33",
+  "color-background-drag-button-default": "#545b64",
+  "color-background-drag-button-disabled": "#eaeded",
+  "color-background-drag-button-hover": "#414750",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f1faff",
@@ -1702,6 +1718,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "light" 1`] = `
   "color-text-counter": "#687078",
   "color-text-disabled": "#aab7b8",
   "color-text-disabled-inline-edit": "#545b64",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#aab7b8",
   "color-text-dropdown-footer": "#687078",
   "color-text-dropdown-group-label": "#545b64",
   "color-text-dropdown-item-default": "#16191f",
@@ -2048,6 +2066,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-background-control-checked": "#0073bb",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#d5dbdb",
+  "color-background-drag-button-active": "#2a2e33",
+  "color-background-drag-button-default": "#545b64",
+  "color-background-drag-button-disabled": "#eaeded",
+  "color-background-drag-button-hover": "#414750",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f1faff",
@@ -2361,6 +2383,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "reduced-motion"
   "color-text-counter": "#687078",
   "color-text-disabled": "#aab7b8",
   "color-text-disabled-inline-edit": "#545b64",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#aab7b8",
   "color-text-dropdown-footer": "#687078",
   "color-text-dropdown-group-label": "#545b64",
   "color-text-dropdown-item-default": "#16191f",
@@ -2707,6 +2731,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-background-control-checked": "#006ce0",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#dedee3",
+  "color-background-drag-button-active": "#232b37",
+  "color-background-drag-button-default": "#424650",
+  "color-background-drag-button-disabled": "#ebebf0",
+  "color-background-drag-button-hover": "#333843",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f0fbff",
@@ -3020,6 +3048,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh"
   "color-text-counter": "#656871",
   "color-text-disabled": "#b4b4bb",
   "color-text-disabled-inline-edit": "#424650",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#b4b4bb",
   "color-text-dropdown-footer": "#656871",
   "color-text-dropdown-group-label": "#424650",
   "color-text-dropdown-item-default": "#0f141a",
@@ -3366,6 +3396,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-control-checked": "#006ce0",
   "color-background-control-default": "#ffffff",
   "color-background-control-disabled": "#dedee3",
+  "color-background-drag-button-active": "#232b37",
+  "color-background-drag-button-default": "#424650",
+  "color-background-drag-button-disabled": "#ebebf0",
+  "color-background-drag-button-hover": "#333843",
   "color-background-dropdown-item-default": "#ffffff",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#f0fbff",
@@ -3679,6 +3713,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-counter": "#656871",
   "color-text-disabled": "#b4b4bb",
   "color-text-disabled-inline-edit": "#424650",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#b4b4bb",
   "color-text-dropdown-footer": "#656871",
   "color-text-dropdown-group-label": "#424650",
   "color-text-dropdown-item-default": "#0f141a",
@@ -4025,6 +4061,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-control-checked": "#42b4ff",
   "color-background-control-default": "#0f141a",
   "color-background-control-disabled": "#333843",
+  "color-background-drag-button-active": "#232b37",
+  "color-background-drag-button-default": "#424650",
+  "color-background-drag-button-disabled": "#232b37",
+  "color-background-drag-button-hover": "#333843",
   "color-background-dropdown-item-default": "#1b232d",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#333843",
@@ -4338,6 +4378,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-counter": "#a4a4ad",
   "color-text-disabled": "#656871",
   "color-text-disabled-inline-edit": "#b4b4bb",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#656871",
   "color-text-dropdown-footer": "#a4a4ad",
   "color-text-dropdown-group-label": "#c6c6cd",
   "color-text-dropdown-item-default": "#dedee3",
@@ -4684,6 +4726,10 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-background-control-checked": "#42b4ff",
   "color-background-control-default": "#161d26",
   "color-background-control-disabled": "#333843",
+  "color-background-drag-button-active": "#232b37",
+  "color-background-drag-button-default": "#424650",
+  "color-background-drag-button-disabled": "#232b37",
+  "color-background-drag-button-hover": "#333843",
   "color-background-dropdown-item-default": "#1b232d",
   "color-background-dropdown-item-dimmed": "transparent",
   "color-background-dropdown-item-filter-match": "#333843",
@@ -4997,6 +5043,8 @@ exports[`CSS Custom Properties match previous snapshot for mode "visual-refresh-
   "color-text-counter": "#a4a4ad",
   "color-text-disabled": "#656871",
   "color-text-disabled-inline-edit": "#b4b4bb",
+  "color-text-drag-button-default": "#ffffff",
+  "color-text-drag-button-disabled": "#656871",
   "color-text-dropdown-footer": "#a4a4ad",
   "color-text-dropdown-group-label": "#c6c6cd",
   "color-text-dropdown-item-default": "#dedee3",

src/internal/components/drag-handle-wrapper/index.tsx

@@ -0,0 +1,123 @@
+// 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 { getIsRtl } from '@cloudscape-design/component-toolkit/internal';
+
+import { IconProps } from '../../../icon/interfaces';
+import InternalIcon from '../../../icon/internal';
+import Tooltip from '../tooltip';
+import { Transition } from '../transition';
+
+import styles from './styles.css.js';
+
+type Direction = 'block-start' | 'block-end' | 'inline-start' | 'inline-end';
+type DirectionState = 'visible' | 'hidden' | 'disabled';
+
+interface DragHandleWrapperProps {
+  open: boolean;
+  directions: Record<Direction, DirectionState>;
+  children: React.ReactNode;
+
+  onPress: (direction: Direction) => void;
+  onClose: () => void;
+}
+
+export default function DragHandleWrapper({ open, directions, children, onPress, onClose }: DragHandleWrapperProps) {
+  // TODO: fix up tooltip logic
+  // TODO: is onClick good enough? or should the buttons also appear when the mouse is dragged _juust_ a little bit?
+  // TODO: provide some functionality for drag implementations to distinguish between button onClick (which includes keyboard activation) on(Mouse)Click?
+  // TODO: i18nStrings-ify the labels (tooltip and cardinal buttons)
+
+  const wrapperRef = useRef<HTMLSpanElement | null>(null);
+  const dragHandleRef = useRef<HTMLSpanElement | null>(null);
+  const rtl = getIsRtl(dragHandleRef.current);
+
+  const [showTooltip, setShowTooltip] = useState(false);
+  useEffect(() => {
+    const controller = new AbortController();
+
+    document.addEventListener(
+      'click',
+      event => {
+        if (!nodeContains(wrapperRef.current, event.target)) {
+          onClose();
+        }
+      },
+      { signal: controller.signal }
+    );
+
+    return () => {
+      controller.abort();
+    };
+  }, [onClose]);
+
+  const dragButtonProps = { open, rtl, onPress };
+  return (
+    <span className={clsx(styles['drag-handle-wrapper'], open && styles['drag-handle-wrapper-open'])} ref={wrapperRef}>
+      <DragButton direction="block-start" state={directions['block-start']} {...dragButtonProps} />
+      <DragButton direction="block-end" state={directions['block-end']} {...dragButtonProps} />
+      <DragButton direction="inline-start" state={directions['inline-start']} {...dragButtonProps} />
+      <DragButton direction="inline-end" state={directions['inline-end']} {...dragButtonProps} />
+
+      {!open && showTooltip && (
+        <Tooltip trackRef={dragHandleRef} value="Drag or select to move" onDismiss={() => setShowTooltip(false)} />
+      )}
+
+      <span
+        className={styles['drag-handle']}
+        ref={dragHandleRef}
+        onMouseEnter={() => setShowTooltip(true)}
+        onBlur={() => setShowTooltip(false)}
+        onMouseDown={() => setShowTooltip(false)}
+        onMouseLeave={() => setShowTooltip(false)}
+      >
+        {children}
+      </span>
+    </span>
+  );
+}
+
+interface DragButtonProps {
+  direction: Direction;
+  state: DirectionState;
+  open: boolean;
+  rtl: boolean;
+  onPress: DragHandleWrapperProps['onPress'];
+}
+
+const IconNameMap: Record<Direction, IconProps.Name> = {
+  'block-start': 'arrow-up',
+  'block-end': 'arrow-down',
+  'inline-start': 'arrow-left',
+  'inline-end': 'arrow-right',
+};
+
+function DragButton({ direction, state, open, rtl, onPress }: DragButtonProps) {
+  return (
+    <Transition in={open}>
+      {(transitionState, ref) => (
+        <button
+          ref={ref}
+          tabIndex={-1}
+          className={clsx(
+            styles['drag-button'],
+            styles[`drag-button-${direction}`],
+            rtl && styles[`drag-button-rtl`],
+            state === 'disabled' && styles['drag-button-disabled'],
+            (state === 'hidden' || transitionState === 'exited') && styles['drag-button-hidden'],
+            styles[`drag-button-motion-${transitionState}`]
+          )}
+          disabled={state === 'disabled'}
+          aria-label={'Resize (direction) (icon: ' + IconNameMap[direction] + ')'}
+          onClick={() => onPress(direction)}
+        >
+          <InternalIcon name={IconNameMap[direction]} size="small" />
+        </button>
+      )}
+    </Transition>
+  );
+}