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

Author: georgylobko

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -13556,7 +13556,13 @@ exports[`Documenter definition for popover matches the snapshot: popover 1`] = `
   "events": [],
   "functions": [
     {
-      "description": "Sets focus on the popover's trigger.",
+      "description": "Dismisses the popover without focusing the trigger. Use only if an element other than the trigger needs to be focused after dismissing the popover.",
+      "name": "dismiss",
+      "parameters": [],
+      "returnType": "void",
+    },
+    {
+      "description": "Sets focus on the popover's trigger and dismisses the popover if open.",
       "name": "focus",
       "parameters": [],
       "returnType": "void",

src/popover/__tests__/popover.test.tsx

@@ -393,8 +393,25 @@ describe('ref support', () => {
     const wrapper = renderPopover({ children: 'Trigger', content: 'Popover', ref });
     wrapper.findTrigger().getElement().click();
     expect(wrapper.findContent()?.getElement()).toBeInTheDocument();
-    ref.current?.focus();
+    act(() => {
+      ref.current?.focus();
+    });
     expect(wrapper.findContent()?.getElement()).toBeFalsy();
+    expect(document.activeElement).toBe(wrapper.findTrigger().getElement());
+  });
+
+  test('Calling dismiss should close the popover', () => {
+    const ref: React.RefObject<PopoverProps.Ref> = { current: null };
+    const wrapper = renderPopover({ children: 'Trigger', content: 'Popover', ref });
+
+    wrapper.findTrigger().click();
+    expect(wrapper.findBody()).toBeTruthy();
+
+    act(() => {
+      ref.current?.dismiss();
+    });
+    expect(wrapper.findBody()).toBeNull();
+    expect(document.activeElement).toBe(document.body);
   });
 });
 

src/popover/index.tsx

@@ -1,16 +1,15 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useRef } from 'react';
+import React from 'react';
 
 import { warnOnce } from '@cloudscape-design/component-toolkit/internal';
 
-import useForwardFocus from '../internal/hooks/forward-focus';
 import useBaseComponent from '../internal/hooks/use-base-component';
 import { isDevelopment } from '../internal/is-development';
 import { applyDisplayName } from '../internal/utils/apply-display-name';
 import { getExternalProps } from '../internal/utils/external-props';
 import { PopoverProps } from './interfaces';
-import InternalPopover, { InternalPopoverRef } from './internal';
+import InternalPopover from './internal';
 
 export { PopoverProps };
 
@@ -40,12 +39,9 @@ const Popover = React.forwardRef(
     });
     const externalProps = getExternalProps(rest);
 
-    const internalRef = useRef<InternalPopoverRef | null>(null);
-    useForwardFocus(ref, internalRef);
-
     return (
       <InternalPopover
-        ref={internalRef}
+        ref={ref}
         header={header}
         position={position}
         size={size}

src/popover/interfaces.ts

@@ -119,8 +119,13 @@ export namespace PopoverProps {
 
   export interface Ref {
     /**
-     * Sets focus on the popover's trigger.
+     * Sets focus on the popover's trigger and dismisses the popover if open.
      */
     focus(): void;
+
+    /**
+     * Dismisses the popover without focusing the trigger. Use only if an element other than the trigger needs to be focused after dismissing the popover.
+     */
+    dismiss(): void;
   }
 }

src/popover/internal.tsx

@@ -30,11 +30,6 @@ export interface InternalPopoverProps extends Omit<PopoverProps, 'triggerType' |
   isInline?: boolean;
 }
 
-export interface InternalPopoverRef {
-  dismissPopover: () => void;
-  focus: HTMLElement['focus'];
-}
-
 export default React.forwardRef(InternalPopover);
 
 function InternalPopover(
@@ -60,7 +55,7 @@ function InternalPopover(
 
     ...restProps
   }: InternalPopoverProps,
-  ref: React.Ref<InternalPopoverRef>
+  ref: React.Ref<PopoverProps.Ref>
 ) {
   const baseProps = getBaseProps(restProps);
   const triggerRef = useRef<HTMLElement | null>(null);
@@ -105,7 +100,9 @@ function InternalPopover(
   );
 
   useImperativeHandle(ref, () => ({
-    dismissPopover: onDismiss,
+    dismiss: () => {
+      setVisible(false);
+    },
     focus: () => {
       setVisible(false);
       focusTrigger();

src/property-filter/filtering-token/index.tsx

@@ -12,7 +12,8 @@ import {
 
 import InternalIcon from '../../icon/internal';
 import { useListFocusController } from '../../internal/hooks/use-list-focus-controller';
-import InternalPopover, { InternalPopoverProps, InternalPopoverRef } from '../../popover/internal';
+import { PopoverProps } from '../../popover/interfaces';
+import InternalPopover, { InternalPopoverProps } from '../../popover/internal';
 import InternalSelect from '../../select/internal';
 import { GeneratedAnalyticsMetadataPropertyEditStart } from '../analytics-metadata/interfaces';
 
@@ -96,7 +97,7 @@ const FilteringToken = forwardRef(
       fallbackSelector: `.${styles.root}`,
     });
 
-    const popoverRef = useRef<InternalPopoverRef>(null);
+    const popoverRef = useRef<PopoverProps.Ref>(null);
     const popoverProps: InternalPopoverProps = {
       content: editorContent,
       triggerType: 'text',
@@ -108,7 +109,7 @@ const FilteringToken = forwardRef(
       __onOpen: onEditorOpen,
       __closeAnalyticsAction: 'editClose',
     };
-    useImperativeHandle(ref, () => ({ closeEditor: () => popoverRef.current?.dismissPopover() }));
+    useImperativeHandle(ref, () => ({ closeEditor: () => popoverRef.current?.focus() }));
 
     return (
       <TokenGroup