feat: introduce maker for popup/dropdowns in data widgets components

Author: r0b1n

packages/pluggableWidgets/combobox-web/src/components/ComboboxMenuWrapper.tsx

@@ -61,6 +61,7 @@ export function ComboboxMenuWrapper(props: ComboboxMenuWrapperProps): ReactEleme
                       }
                     : style
             }
+            data-overlay-content={isOpen || undefined}
         >
             {menuHeaderContent && (
                 <div

packages/pluggableWidgets/datagrid-date-filter-web/src/components/DatePicker.tsx

@@ -43,6 +43,7 @@ export function DatePicker(props: DatePickerProps): ReactElement {
             </span>
             <ReactDatePicker
                 {...staticProps}
+                popperContainer={({ children }) => (props.expanded ? <div data-overlay-content>{children}</div> : null)}
                 allowSameDay={false}
                 ariaLabelledBy={`${props.id}-label`}
                 autoFocus={false}

packages/pluggableWidgets/datagrid-web/src/components/ColumnSelector.tsx

@@ -125,6 +125,7 @@ export function ColumnSelector(props: ColumnSelectorProps): ReactElement {
             id={`${props.id}-column-selectors`}
             className={`column-selectors`}
             data-focusindex={0}
+            data-overlay-content
             role="menu"
             style={{ ...correctedFloatingStyles, maxHeight }}
             {...getFloatingProps()}

packages/pluggableWidgets/popup-menu-web/src/components/Menu.tsx

@@ -26,6 +26,7 @@ export const Menu = forwardRef((props: MenuProps, propRef: RefObject<HTMLDivElem
                     ref={ref}
                     style={{ ...floatingStyles, ...props.style }}
                     {...getFloatingProps?.({ className: "popupmenu-menu" })}
+                    data-overlay-content
                 >
                     {menuOptions}
                 </ul>

packages/pluggableWidgets/tooltip-web/src/components/Tooltip.tsx

@@ -48,6 +48,7 @@ export const Tooltip = (props: TooltipProps): ReactElement => {
                     ref={refs?.setFloating}
                     style={floatingStyles}
                     {...getFloatingProps?.()}
+                    data-overlay-content
                 >
                     {renderMethod === "text" ? textMessage : htmlMessage}
                     <div className={`widget-tooltip-arrow-${staticSide}`} ref={setArrowElement} style={arrowStyles} />

packages/pluggableWidgets/tooltip-web/src/components/__tests__/__snapshots__/Tooltip.spec.tsx.snap

@@ -19,6 +19,7 @@ exports[`Tooltip render DOM structure 1`] = `
     <div
       class="widget-tooltip-content"
       data-floating-ui-focusable=""
+      data-overlay-content="true"
       id=":r0:"
       role="tooltip"
       style="position: fixed; left: 0px; top: 0px; transform: translate(0px, 0px);"

packages/shared/widget-plugin-dropdown-filter/src/controls/base/OptionsWrapper.tsx

@@ -33,7 +33,13 @@ export const OptionsWrapper = forwardRef((props: OptionsWrapperProps, ref: RefOb
         options
     } = props;
     return (
-        <div className={cls.popover} hidden={!isOpen} ref={ref} style={style}>
+        <div
+            className={cls.popover}
+            hidden={!isOpen}
+            ref={ref}
+            style={style}
+            data-overlay-content={isOpen || undefined}
+        >
             <div className={cls.menuSlot}>
                 <ul {...getMenuProps({ className: cls.menu, "aria-label": label })} onScroll={onMenuScroll}>
                     {isOpen &&

packages/shared/widget-plugin-filtering/src/controls/filter-selector/FilterSelector.tsx

@@ -42,6 +42,7 @@ export function FilterSelector(props: FilterSelectorProps): ReactElement {
                     className={classNames("filter-selectors", { hidden: !open, visible: open })}
                     {...listboxProps}
                     style={floatingStyles}
+                    data-overlay-content={open || undefined}
                 >
                     {open &&
                         options.map((item, index) => (