Merge branch 'main' into feat/widgetize-app-layout-skeleton-event-base

Author: georgylobko

.github/workflows/release.yml

@@ -29,23 +29,4 @@ jobs:
     with:
       skip-test: true
       role-to-assume: ${{ inputs.role-to-assume }}
-      project-name: ${{ inputs.project-name }}
-  
-  trigger-downstream:
-    needs: [release]
-    runs-on: ubuntu-latest
-    if: github.ref == 'refs/heads/main'
-    strategy:
-      matrix:
-        repository: [chat-components]
-    steps:
-      - name: Trigger release in downstream repository
-        run: |
-          curl -L \
-            -X POST \
-            -H "Accept: application/vnd.github+json" \
-            -H "Authorization: Bearer ${{ secrets.WORKFLOW_DISPATCH_TOKEN }}" \
-            -H "X-GitHub-Api-Version: 2022-11-28" \
-            https://api.github.com/repos/cloudscape-design/${{ matrix.repository }}/dispatches \
-            -d "{\"event_type\": \"run-release\"}"
-
+      project-name: ${{ inputs.project-name }}      

src/internal/components/drag-handle-wrapper/__tests__/drag-handle-wrapper.test.tsx

@@ -53,9 +53,15 @@ function expectDirectionButtonToBeVisible(direction: Direction) {
   ).toBe(true);
 }
 
-function renderDragHandle(props: Omit<DragHandleWrapperProps, 'children'>) {
+function renderDragHandle(props: Partial<Omit<DragHandleWrapperProps, 'children'>>) {
+  const mergedProps: Omit<DragHandleWrapperProps, 'children'> = {
+    directions: {},
+    hideButtonsOnDrag: false,
+    clickDragThreshold: 3,
+    ...props,
+  };
   const { container } = render(
-    <DragHandleWrapper {...props}>
+    <DragHandleWrapper {...mergedProps}>
       <button type="button" id="drag-button">
         Drag
       </button>
@@ -343,7 +349,7 @@ test('shows direction buttons when dragged 2 pixels', () => {
   expect(getDirectionButton('block-start')).toBeVisible();
 });
 
-test("doesn't show direction buttons when dragged more than 3 pixels", () => {
+test("doesn't show direction buttons when dragged more than 3 pixels (default threshold)", () => {
   const { dragHandle } = renderDragHandle({
     directions: { 'block-start': 'active' },
     tooltipText: 'Click me!',
@@ -355,6 +361,49 @@ test("doesn't show direction buttons when dragged more than 3 pixels", () => {
   expectDirectionButtonToBeHidden('block-start');
 });
 
+test('shows direction buttons when dragged less than custom clickDragThreshold', () => {
+  const { dragHandle } = renderDragHandle({
+    directions: { 'block-start': 'active' },
+    tooltipText: 'Click me!',
+    clickDragThreshold: 10,
+  });
+
+  fireEvent.pointerDown(dragHandle, { clientX: 50, clientY: 50 });
+  fireEvent.pointerMove(dragHandle, { clientX: 55, clientY: 55 });
+  fireEvent.pointerUp(dragHandle);
+  expectDirectionButtonToBeVisible('block-start');
+});
+
+describe('hideButtonsOnDrag property', () => {
+  test('hides direction buttons when dragging with hideButtonsOnDrag=true', () => {
+    const { dragHandle, showButtons } = renderDragHandle({
+      directions: { 'block-start': 'active' },
+      tooltipText: 'Click me!',
+      hideButtonsOnDrag: true,
+    });
+
+    showButtons();
+    expectDirectionButtonToBeVisible('block-start');
+    fireEvent.pointerDown(dragHandle, { clientX: 50, clientY: 50 });
+    fireEvent.pointerMove(dragHandle, { clientX: 55, clientY: 55 });
+    expectDirectionButtonToBeHidden('block-start');
+  });
+
+  test('keeps direction buttons visible when dragging with hideButtonsOnDrag=false (default)', () => {
+    const { dragHandle, showButtons } = renderDragHandle({
+      directions: { 'block-start': 'active' },
+      tooltipText: 'Click me!',
+      hideButtonsOnDrag: false,
+    });
+
+    showButtons();
+    expectDirectionButtonToBeVisible('block-start');
+    fireEvent.pointerDown(dragHandle, { clientX: 50, clientY: 50 });
+    fireEvent.pointerMove(dragHandle, { clientX: 55, clientY: 55 }); // Move more than default threshold
+    expectDirectionButtonToBeVisible('block-start');
+  });
+});
+
 test('hides direction buttons on Escape keypress', () => {
   const { dragHandle, showButtons } = renderDragHandle({
     directions: { 'block-start': 'active' },

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

@@ -14,19 +14,15 @@ 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,
   triggerMode = 'focus',
   initialShowButtons = false,
+  hideButtonsOnDrag,
+  clickDragThreshold,
 }: DragHandleWrapperProps) {
   const wrapperRef = useRef<HTMLDivElement | null>(null);
   const dragHandleRef = useRef<HTMLDivElement | null>(null);
@@ -70,25 +66,26 @@ export default function DragHandleWrapper({
   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.
+    // 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.
+    // `clickDragThreshold` 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)
+          (event.clientX > initialPointerPosition.current.x + clickDragThreshold ||
+            event.clientX < initialPointerPosition.current.x - clickDragThreshold ||
+            event.clientY > initialPointerPosition.current.y + clickDragThreshold ||
+            event.clientY < initialPointerPosition.current.y - clickDragThreshold)
         ) {
           didPointerDrag.current = true;
+          hideButtonsOnDrag && setShowButtons(false);
         }
       },
       { signal: controller.signal }
@@ -123,7 +120,7 @@ export default function DragHandleWrapper({
     );
 
     return () => controller.abort();
-  }, []);
+  }, [clickDragThreshold, hideButtonsOnDrag]);
 
   const onHandlePointerDown: React.PointerEventHandler = event => {
     // Tooltip behavior: the tooltip should appear on hover, but disappear when

src/internal/components/drag-handle-wrapper/interfaces.ts

@@ -12,4 +12,6 @@ export interface DragHandleWrapperProps {
   children: React.ReactNode;
   triggerMode?: TriggerMode;
   initialShowButtons?: boolean;
+  hideButtonsOnDrag: boolean;
+  clickDragThreshold: number;
 }

src/internal/components/drag-handle-wrapper/motion.scss

@@ -56,8 +56,8 @@
     &-motion-exiting {
       @include styles.with-motion {
         animation:
-          drag-handle-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive,
-          awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive;
+          drag-handle-exit awsui.$motion-duration-complex awsui.$motion-easing-responsive forwards,
+          awsui-motion-fade-out-0 awsui.$motion-duration-complex awsui.$motion-easing-responsive forwards;
       }
     }
   }

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

@@ -26,6 +26,8 @@ const InternalDragHandle = forwardRef(
       onDirectionClick,
       triggerMode,
       initialShowButtons,
+      hideButtonsOnDrag = false,
+      clickDragThreshold = 3,
       ...rest
     }: DragHandleProps,
     ref: React.Ref<Element>
@@ -39,6 +41,8 @@ const InternalDragHandle = forwardRef(
         onDirectionClick={onDirectionClick}
         triggerMode={triggerMode}
         initialShowButtons={initialShowButtons}
+        hideButtonsOnDrag={hideButtonsOnDrag}
+        clickDragThreshold={clickDragThreshold}
       >
         <DragHandleButton
           ref={ref}

src/internal/components/drag-handle/interfaces.ts

@@ -24,6 +24,15 @@ export interface DragHandleProps {
   onDirectionClick?: (direction: DragHandleProps.Direction) => void;
   triggerMode?: TriggerMode;
   initialShowButtons?: boolean;
+  /**
+   * Hide the UAP buttons when dragging is active.
+   */
+  hideButtonsOnDrag?: boolean;
+  /**
+   * Max cursor movement (in pixels) that still counts as a press rather than
+   * a drag. Small threshold needed for usability.
+   */
+  clickDragThreshold?: number;
 }
 
 export namespace DragHandleProps {

src/tabs/__tests__/tabs.test.tsx

@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React from 'react';
+import React, { useState } from 'react';
 import { fireEvent, render } from '@testing-library/react';
 
 import { KeyCode } from '@cloudscape-design/test-utils-core/utils';
@@ -940,6 +940,35 @@ describe('Tabs', () => {
     });
   });
 
+  describe('Dismissible mixed with non-dismissible', () => {
+    test('moves focus from the last dismissible button to non-dismissible', () => {
+      const TabsWrapper = () => {
+        const [tabsDismissibles, setTabDismissibles] = useState([
+          {
+            label: 'First tab',
+            id: 'first',
+            content: <>first</>,
+          },
+          {
+            label: 'Second tab',
+            id: 'second',
+            dismissible: true,
+            dismissLabel: 'Dismiss second tab (dismissibles variant)',
+            onDismiss: () => setTabDismissibles(prevTabs => prevTabs.slice(0, 1)),
+            content: <>second</>,
+          },
+        ]);
+
+        return <Tabs tabs={tabsDismissibles} />;
+      };
+      const { wrapper } = renderTabs(<TabsWrapper />);
+
+      wrapper.findDismissibleButtonByTabId('second')!.click();
+
+      expect(wrapper.findTabLinkById('first')!.getElement()).toHaveFocus();
+    });
+  });
+
   describe('Actions', () => {
     test('renders action', () => {
       const actionButton = renderTabs(<Tabs tabs={actionDismissibleTabs} />).wrapper.findActionByTabIndex(2);

src/tabs/tab-header-bar.tsx

@@ -19,6 +19,7 @@ import {
 } from '../internal/context/single-tab-stop-navigation-context';
 import { hasModifierKeys, isPlainLeftClick } from '../internal/events';
 import useHiddenDescription from '../internal/hooks/use-hidden-description';
+import { usePrevious } from '../internal/hooks/use-previous';
 import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { KeyCode } from '../internal/keycode';
 import { circleIndex } from '../internal/utils/circle-index';
@@ -112,6 +113,7 @@ export function TabHeaderBar({
   const [focusedTabId, setFocusedTabId] = useState(activeTabId);
   const [previousActiveTabId, setPreviousActiveTabId] = useState<string | undefined>(activeTabId);
   const hasActionOrDismissible = tabs.some(tab => tab.action || tab.dismissible);
+  const hadActionOrDismissible = usePrevious(hasActionOrDismissible);
   const tabActionAttributes = hasActionOrDismissible
     ? {
         role: 'application',
@@ -124,6 +126,16 @@ export function TabHeaderBar({
         role: 'tablist',
       };
 
+  useEffect(() => {
+    if (hadActionOrDismissible && !hasActionOrDismissible) {
+      // when tabs becomes non-dismissible (e.g. when all dismissible tabs are removed),
+      // the hasActionOrDismissible is changing which causing tabs to re-mount to the React tree,
+      // which, in turn, causes losing their refs, and the nextActive.focus() function inside handleDismiss does not focus on the next tab
+      // so this code does
+      getNextFocusTarget()?.focus();
+    }
+  }, [hasActionOrDismissible, hadActionOrDismissible]);
+
   useEffect(() => {
     if (headerBarRef.current) {
       setHorizontalOverflow(hasHorizontalOverflow(headerBarRef.current, inlineStartOverflowButton));