feat(s2): Add triggerRef prop to S2 Popover (#8257)

* Added triggerRef to s2 popover

* Refactor Popover component to use isOpen and onOpenChange props, removing deprecated button handling logic. Update stories to demonstrate new trigger functionality.

* Update PopoverDialogProps to include triggerRef, isOpen, and onOpenChange properties for improved prop management.

* Refactor import statements in Popover component and stories for consistency and clarity.

* Make example a bit prettier

---------

Co-authored-by: sbiswari <sbiswari@adobe.com>
Co-authored-by: biswarisomya <102928682+biswarisomya@users.noreply.github.com>

Author: 3 people

packages/@react-spectrum/s2/src/Popover.tsx

@@ -220,7 +220,9 @@ export const PopoverBase = forwardRef(function PopoverBase(props: PopoverProps,
   );
 });
 
-export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {}
+export interface PopoverDialogProps extends Pick<PopoverProps, 'size' | 'hideArrow'| 'placement' | 'shouldFlip' | 'containerPadding' | 'offset' | 'crossOffset' | 'triggerRef' | 'isOpen' | 'onOpenChange'>, Omit<DialogProps, 'className' | 'style'>, StyleProps {
+}
+
 
 const dialogStyle = style({
   padding: 8,
@@ -238,11 +240,13 @@ const dialogStyle = style({
  */
 export const Popover = forwardRef(function Popover(props: PopoverDialogProps, ref: DOMRef) {
   let domRef = useDOMRef(ref);
+  const {triggerRef, isOpen, onOpenChange, ...otherProps} = props;
+
 
   return (
-    <PopoverBase size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>
+    <PopoverBase  isOpen={isOpen} onOpenChange={onOpenChange} triggerRef={triggerRef} size={props.size} hideArrow={props.hideArrow} placement={props.placement} shouldFlip={props.shouldFlip} containerPadding={props.containerPadding} offset={props.offset} crossOffset={props.crossOffset}>
       <Dialog
-        {...props}
+        {...otherProps}
         ref={domRef}
         style={props.UNSAFE_style}
         className={(props.UNSAFE_className || '') + dialogStyle(null, props.styles)}>

packages/@react-spectrum/s2/stories/Popover.stories.tsx

@@ -22,6 +22,7 @@ import {Autocomplete as RACAutocomplete, useFilter} from 'react-aria-components'
 import Settings from '../s2wf-icons/S2_Icon_Settings_20_N.svg';
 import {style} from '../style/spectrum-theme' with {type: 'macro'};
 import User from '../s2wf-icons/S2_Icon_User_20_N.svg';
+import {useRef, useState} from 'react';
 import Users from '../s2wf-icons/S2_Icon_UserGroup_20_N.svg';
 
 const meta: Meta<typeof Popover> = {
@@ -167,7 +168,6 @@ AccountMenu.argTypes = {
   placement: {table: {disable: true}}
 };
 
-
 function Autocomplete(props) {
   let {contains} = useFilter({sensitivity: 'base'});
   return (
@@ -194,3 +194,25 @@ export const AutocompletePopover = (args: any) => (
     </DialogTrigger>
   </>
 );
+
+export const CustomTrigger = () => {
+  const [open, setOpen] = useState(false);
+  const triggerRef = useRef<any>(null);
+
+  const handleOpenChange = (isOpen: boolean) => {
+    if (!isOpen) {
+      setOpen(false);
+    }
+  };
+
+  return (
+    <div style={{display: 'flex', gap: 12, alignItems: 'center'}}>
+      <Button onPress={() => setOpen(!open)}>Open Popover</Button>
+      <div className={style({font: 'ui'})} ref={triggerRef}>Popover appears here</div>
+      <Popover isOpen={open} onOpenChange={handleOpenChange} triggerRef={triggerRef}>
+        <span className={style({font: 'ui'})}>Popover with trigger on button</span>
+      </Popover>
+    </div>
+  );
+};
+