Add data-trigger to Popover to style based on trigger component (#5429)

Author: devongovett

packages/react-aria-components/docs/ComboBox.mdx

@@ -112,13 +112,9 @@ import {ComboBox, Label, Input, Button, Popover, ListBox, ListBoxItem} from 'rea
   }
 }
 
-@layer popover {
-  .react-aria-Popover {
+.react-aria-Popover[data-trigger=ComboBox] {
     width: var(--trigger-width);
-  }
-}
 
-@layer listbox {
   .react-aria-ListBox {
     display: block;
     width: unset;
@@ -1230,12 +1226,14 @@ A [Button](Button.html) can be targeted with the `.react-aria-Button` CSS select
 
 ### Popover
 
-The [Popover](Popover.html) component can be targeted with the `.react-aria-Popover` CSS selector, or by overriding with a custom `className`. Note that it renders in a [React Portal](https://reactjs.org/docs/portals.html), so it will not appear as a descendant of the ComboBox in the DOM.
+The [Popover](Popover.html) component can be targeted with the `.react-aria-Popover` CSS selector, or by overriding with a custom `className`. Note that it renders in a [React Portal](https://reactjs.org/docs/portals.html), so it will not appear as a descendant of the ComboBox in the DOM. It supports the following states and render props:
+
+<StateTable properties={docs.exports.PopoverRenderProps.properties} />
 
-The `--trigger-width` CSS custom property will be set on the popover, which you can use to make the popover match the width of the combobox.
+Within a ComboBox, the popover will have the `data-trigger="ComboBox"` attribute, which can be used to define combobox-specific styles. In addition, the `--trigger-width` CSS custom property will be set on the popover, which you can use to make the popover match the width of the combobox.
 
 ```css render=false
-.react-aria-Popover {
+.react-aria-Popover[data-trigger=ComboBox] {
   width: var(--trigger-width);
 }
 ```

packages/react-aria-components/docs/DatePicker.mdx

@@ -121,11 +121,9 @@ import {DatePicker, Label, Group, Popover, Dialog, Calendar, CalendarGrid, Calen
   }
 }
 
-@layer popover {
-  .react-aria-Popover {
-    max-width: unset;
-    padding: 1.25rem;
-  }
+.react-aria-Popover[data-trigger=DatePicker] {
+  max-width: unset;
+  padding: 1.25rem;
 }
 ```
 
@@ -944,6 +942,14 @@ The [Popover](Popover.html) component can be targeted with the `.react-aria-Popo
 
 <StateTable properties={docs.exports.PopoverRenderProps.properties} />
 
+Within a DatePicker, the popover will have the `data-trigger="DatePicker"` attribute, which can be used to define date picker-specific styles.
+
+```css render=false
+.react-aria-Popover[data-trigger=DatePicker] {
+  /* ... */
+}
+```
+
 ### Dialog
 
 A [Dialog](Dialog.html) can be targeted with the `.react-aria-Dialog` CSS selector, or by overriding with a custom `className`.

packages/react-aria-components/docs/DateRangePicker.mdx

@@ -157,11 +157,9 @@ import {DateRangePicker, Label, Group, Popover, Dialog, RangeCalendar, CalendarG
   }
 }
 
-@layer popover {
-  .react-aria-Popover {
-    max-width: unset;
-    padding: 1.25rem;
-  }
+.react-aria-Popover[data-trigger=DateRangePicker] {
+  max-width: unset;
+  padding: 1.25rem;
 }
 ```
 
@@ -1035,6 +1033,14 @@ The [Popover](Popover.html) component can be targeted with the `.react-aria-Popo
 
 <StateTable properties={docs.exports.PopoverRenderProps.properties} />
 
+Within a DateRangePicker, the popover will have the `data-trigger="DateRangePicker"` attribute, which can be used to define date range picker-specific styles.
+
+```css render=false
+.react-aria-Popover[data-trigger=DateRangePicker] {
+  /* ... */
+}
+```
+
 ### Dialog
 
 A [Dialog](Dialog.html) can be targeted with the `.react-aria-Dialog` CSS selector, or by overriding with a custom `className`.

packages/react-aria-components/docs/Menu.mdx

@@ -800,6 +800,14 @@ The [Popover](Popover.html) component can be targeted with the `.react-aria-Popo
 
 <StateTable properties={docs.exports.PopoverRenderProps.properties} />
 
+Within a MenuTrigger, the popover will have the `data-trigger="MenuTrigger"` attribute, which can be used to define menu-specific styles.
+
+```css render=false
+.react-aria-Popover[data-trigger=MenuTrigger] {
+  /* ... */
+}
+```
+
 ### Menu
 
 A `Menu` can be targeted with the `.react-aria-Menu` CSS selector, or by overriding with a custom `className`.

packages/react-aria-components/docs/Select.mdx

@@ -117,13 +117,9 @@ import {Select, SelectValue, Label, Button, Popover, ListBox, ListBoxItem} from
   }
 }
 
-@layer popover {
-  .react-aria-Popover {
+.react-aria-Popover[data-trigger=Select] {
     min-width: var(--trigger-width);
-  }
-}
 
-@layer listbox {
   .react-aria-ListBox {
     display: block;
     width: unset;
@@ -994,12 +990,14 @@ A `SelectValue` can be targed with the `.react-aria-SelectValue` CSS selector, o
 
 ### Popover
 
-The [Popover](Popover.html) component can be targeted with the `.react-aria-Popover` CSS selector, or by overriding with a custom `className`. Note that it renders in a [React Portal](https://reactjs.org/docs/portals.html), so it will not appear as a descendant of the Select in the DOM.
+The [Popover](Popover.html) component can be targeted with the `.react-aria-Popover` CSS selector, or by overriding with a custom `className`. Note that it renders in a [React Portal](https://reactjs.org/docs/portals.html), so it will not appear as a descendant of the Select in the DOM. It supports the following states and render props:
+
+<StateTable properties={docs.exports.PopoverRenderProps.properties} />
 
-The `--trigger-width` CSS custom property will be set on the popover, which you can use to make the popover match the width of the select button.
+Within a Select, the popover will have the `data-trigger="Select"` attribute, which can be used to define select-specific styles. In addition, the `--trigger-width` CSS custom property will be set on the popover, which you can use to make the popover match the width of the select button.
 
 ```css render=false
-.react-aria-Popover {
+.react-aria-Popover[data-trigger=Select] {
   width: var(--trigger-width);
 }
 ```

packages/react-aria-components/src/ComboBox.tsx

@@ -192,6 +192,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
           triggerRef: inputRef,
           placement: 'bottom start',
           isNonModal: true,
+          trigger: 'ComboBox',
           style: {'--trigger-width': menuWidth} as React.CSSProperties
         }],
         [ListBoxContext, {...listBoxProps, ref: listBoxRef}],

packages/react-aria-components/src/DatePicker.tsx

@@ -122,7 +122,7 @@ function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: Forward
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [CalendarContext, calendarProps],
         [OverlayTriggerStateContext, state],
-        [PopoverContext, {triggerRef: groupRef, placement: 'bottom start'}],
+        [PopoverContext, {trigger: 'DatePicker', triggerRef: groupRef, placement: 'bottom start'}],
         [DialogContext, dialogProps],
         [TextContext, {
           slots: {
@@ -205,7 +205,7 @@ function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, re
         [LabelContext, {...labelProps, ref: labelRef, elementType: 'span'}],
         [RangeCalendarContext, calendarProps],
         [OverlayTriggerStateContext, state],
-        [PopoverContext, {triggerRef: groupRef, placement: 'bottom start'}],
+        [PopoverContext, {trigger: 'DateRangePicker', triggerRef: groupRef, placement: 'bottom start'}],
         [DialogContext, dialogProps],
         [DateFieldContext, {
           slots: {

packages/react-aria-components/src/Dialog.tsx

@@ -55,7 +55,7 @@ export function DialogTrigger(props: DialogTriggerProps) {
       values={[
         [OverlayTriggerStateContext, state],
         [DialogContext, overlayProps],
-        [PopoverContext, {triggerRef: buttonRef}]
+        [PopoverContext, {trigger: 'DialogTrigger', triggerRef: buttonRef}]
       ]}>
       <PressResponder {...triggerProps} ref={buttonRef} isPressed={state.isOpen}>
         {props.children}

packages/react-aria-components/src/Menu.tsx

@@ -47,7 +47,7 @@ export function MenuTrigger(props: MenuTriggerProps) {
       values={[
         [MenuContext, menuProps],
         [OverlayTriggerStateContext, state],
-        [PopoverContext, {triggerRef: ref, placement: 'bottom start'}]
+        [PopoverContext, {trigger: 'MenuTrigger', triggerRef: ref, placement: 'bottom start'}]
       ]}>
       <PressResponder {...menuTriggerProps} ref={ref} isPressed={state.isOpen}>
         {props.children}

packages/react-aria-components/src/Popover.tsx

@@ -19,6 +19,12 @@ import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, RefObject, useContext} from 'react';
 
 export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps {
+  /**
+   * The name of the component that triggered the popover. This is reflected on the element
+   * as the `data-trigger` attribute, and can be used to provide specific
+   * styles for the popover depending on which element triggered it.
+   */
+  trigger?: string,
   /**
    * The ref for the element which the popover positions itself with respect to.
    *
@@ -37,6 +43,11 @@ export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPo
 }
 
 export interface PopoverRenderProps {
+  /**
+   * The name of the component that triggered the popover, e.g. "DialogTrigger" or "ComboBox".
+   * @selector [data-trigger="..."]
+   */
+  trigger: string | null,
   /**
    * The placement of the popover relative to the trigger.
    * @selector [data-placement="left | right | top | bottom"]
@@ -69,6 +80,7 @@ function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
     let children = props.children;
     if (typeof children === 'function') {
       children = children({
+        trigger: props.trigger || null,
         placement: 'bottom',
         isEntering: false,
         isExiting: false
@@ -101,7 +113,8 @@ export {_Popover as Popover};
 interface PopoverInnerProps extends AriaPopoverProps, RenderProps<PopoverRenderProps>, SlotProps {
   state: OverlayTriggerState,
   isEntering?: boolean,
-  isExiting: boolean
+  isExiting: boolean,
+  trigger?: string
 }
 
 function PopoverInner({state, isExiting, ...props}: PopoverInnerProps) {
@@ -116,6 +129,7 @@ function PopoverInner({state, isExiting, ...props}: PopoverInnerProps) {
     ...props,
     defaultClassName: 'react-aria-Popover',
     values: {
+      trigger: props.trigger || null,
       placement,
       isEntering,
       isExiting
@@ -133,6 +147,7 @@ function PopoverInner({state, isExiting, ...props}: PopoverInnerProps) {
         ref={ref}
         slot={props.slot || undefined}
         style={style}
+        data-trigger={props.trigger}
         data-placement={placement}
         data-entering={isEntering || undefined}
         data-exiting={isExiting || undefined}>

packages/react-aria-components/src/Select.tsx

@@ -148,6 +148,7 @@ function Select<T extends object>(props: SelectProps<T>, ref: ForwardedRef<HTMLD
           [ButtonContext, {...triggerProps, ref: buttonRef, isPressed: state.isOpen}],
           [OverlayTriggerStateContext, state],
           [PopoverContext, {
+            trigger: 'Select',
             triggerRef: buttonRef,
             placement: 'bottom start',
             style: {'--trigger-width': buttonWidth} as React.CSSProperties

packages/react-aria-components/test/ComboBox.test.js

@@ -61,6 +61,7 @@ describe('ComboBox', () => {
     let listbox = getByRole('listbox');
     expect(listbox).toHaveAttribute('class', 'react-aria-ListBox');
     expect(listbox.closest('.react-aria-Popover')).toBeInTheDocument();
+    expect(listbox.closest('.react-aria-Popover')).toHaveAttribute('data-trigger', 'ComboBox');
 
     let options = within(listbox).getAllByRole('option');
     expect(options).toHaveLength(3);

packages/react-aria-components/test/DatePicker.test.js

@@ -81,6 +81,7 @@ describe('DatePicker', () => {
     expect(dialog).toHaveAttribute('aria-labelledby');
     expect(dialog.getAttribute('aria-labelledby')).toContain(label.id);
     expect(dialog.closest('.react-aria-Popover')).toBeInTheDocument();
+    expect(dialog.closest('.react-aria-Popover')).toHaveAttribute('data-trigger', 'DatePicker');
 
     expect(getByRole('grid')).toHaveClass('react-aria-CalendarGrid');
   });

packages/react-aria-components/test/DateRangePicker.test.js

@@ -87,6 +87,7 @@ describe('DateRangePicker', () => {
     expect(dialog).toHaveAttribute('aria-labelledby');
     expect(dialog.getAttribute('aria-labelledby')).toContain(label.id);
     expect(dialog.closest('.react-aria-Popover')).toBeInTheDocument();
+    expect(dialog.closest('.react-aria-Popover')).toHaveAttribute('data-trigger', 'DateRangePicker');
 
     expect(getByRole('grid')).toHaveClass('react-aria-CalendarGrid');
   });

packages/react-aria-components/test/Menu.test.js

@@ -262,6 +262,7 @@ describe('Menu', () => {
 
     let popover = menu.closest('.react-aria-Popover');
     expect(popover).toBeInTheDocument();
+    expect(popover).toHaveAttribute('data-trigger', 'MenuTrigger');
 
     await user.click(getAllByRole('menuitem')[1]);
     expect(onAction).toHaveBeenLastCalledWith('rename');

packages/react-aria-components/test/Popover.test.js

@@ -49,6 +49,7 @@ describe('Popover', () => {
 
     let dialog = getByRole('dialog');
     expect(dialog).toBeInTheDocument();
+    expect(dialog.closest('.react-aria-Popover')).toHaveAttribute('data-trigger', 'DialogTrigger');
 
     await user.click(document.body);
 

packages/react-aria-components/test/Select.test.js

@@ -68,6 +68,7 @@ describe('Select', () => {
     let listbox = getByRole('listbox');
     expect(listbox).toHaveAttribute('class', 'react-aria-ListBox');
     expect(listbox.closest('.react-aria-Popover')).toBeInTheDocument();
+    expect(listbox.closest('.react-aria-Popover')).toHaveAttribute('data-trigger', 'Select');
 
     let options = within(listbox).getAllByRole('option');
     expect(options).toHaveLength(3);