fix(basedropdown): popper types (#4014)

popperProps are incorrectly inheriting from MUI instead of react-popper
keys such as `style` are not present

Co-authored-by: Bruno Henriques <zettca@users.noreply.github.com>

packages/core/src/BaseDropdown/BaseDropdown.tsx

@@ -12,12 +12,15 @@ import { createPortal } from "react-dom";
 import ClickAwayListener, {
   ClickAwayListenerProps,
 } from "@mui/material/ClickAwayListener";
-import { PopperPlacementType, PopperProps } from "@mui/material/Popper";
-
 import { DropDownXS, DropUpXS } from "@hitachivantara/uikit-react-icons";
 
-import { usePopper } from "react-popper";
-import { detectOverflow, ModifierArguments, Options } from "@popperjs/core";
+import { PopperProps, usePopper } from "react-popper";
+import {
+  detectOverflow,
+  ModifierArguments,
+  Options,
+  Placement,
+} from "@popperjs/core";
 
 import { HvTypography } from "../Typography";
 import { useUniqueId } from "../hooks/useUniqueId";
@@ -83,7 +86,7 @@ export interface HvBaseDropdownProps extends HvBaseProps {
   /**
    * An object containing props to be wired to the popper component.
    */
-  popperProps?: Partial<PopperProps>;
+  popperProps?: Partial<PopperProps<any>>;
   /**
    * Placement of the dropdown.
    */
@@ -208,7 +211,7 @@ export const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(
       "aria-labelledby": ariaLabelledByProp,
     } satisfies AriaAttributes;
 
-    const placement: PopperPlacementType = `bottom-${
+    const placement: Placement = `bottom-${
       placementProp === "right" ? "start" : "end"
     }`;
 
@@ -282,7 +285,7 @@ export const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(
       []
     );
 
-    const modifiers = useMemo<PopperProps["modifiers"]>(
+    const modifiers = useMemo<Options["modifiers"]>(
       () => [
         {
           name: "variableWidth",
@@ -330,7 +333,7 @@ export const HvBaseDropdown = forwardRef<HTMLDivElement, HvBaseDropdownProps>(
     );
 
     const popperPlacement =
-      attributes.popper?.["data-popper-placement"] ?? "bottom";
+      (attributes.popper?.["data-popper-placement"] as Placement) ?? "bottom";
 
     const handleToggle = useCallback(
       (event: any) => {

packages/core/src/Button/Button.tsx

@@ -1,4 +1,4 @@
-import React, { forwardRef, ReactElement } from "react";
+import React, { forwardRef } from "react";
 
 import { useTheme } from "../hooks/useTheme";
 import { useDefaultProps } from "../hooks/useDefaultProps";
@@ -31,9 +31,9 @@ export type HvButtonProps<C extends React.ElementType = "button"> =
       /** Class names to be applied. */
       className?: string;
       /** Element placed before the children. */
-      startIcon?: ReactElement;
+      startIcon?: React.ReactNode;
       /** Element placed after the children. */
-      endIcon?: ReactElement;
+      endIcon?: React.ReactNode;
       /** Button size. */
       size?: HvButtonSize;
       /** Button border radius. */

packages/core/src/DropDownMenu/DropDownMenu.tsx

@@ -1,6 +1,4 @@
 import { ChangeEvent, useMemo } from "react";
-
-import { theme } from "@hitachivantara/uikit-styles";
 import { MoreOptionsVertical } from "@hitachivantara/uikit-react-icons";
 
 import { useDefaultProps } from "../hooks/useDefaultProps";
@@ -119,13 +117,6 @@ export const HvDropDownMenu = (props: HvDropDownMenuProps) => {
   };
 
   const condensed = useMemo(() => dataList.every((el) => !el.icon), [dataList]);
-  const popperStyle: HvBaseDropdownProps["popperProps"] = {
-    style: {
-      zIndex: theme.zIndices.tooltip,
-      width: "auto",
-      position: "relative",
-    },
-  };
 
   return (
     <HvBaseDropdown
@@ -165,7 +156,6 @@ export const HvDropDownMenu = (props: HvDropDownMenuProps) => {
       }}
       disabled={disabled}
       onContainerCreation={setFocusToContent}
-      popperProps={popperStyle}
       {...others}
     >
       <HvPanel className={classes.menuListRoot}>

packages/core/src/Dropdown/Dropdown.styles.tsx

@@ -30,9 +30,6 @@ export const { staticClasses, useClasses } = createClasses("HvDropdown", {
 
     "& $dropdownHeaderInvalid": {
       border: `1px solid ${theme.colors.negative}`,
-      "&:hover": {
-        border: `1px solid ${theme.colors.negative}`,
-      },
     },
   },
   arrow: {},

packages/core/src/Dropdown/Dropdown.tsx

@@ -1,14 +1,12 @@
 import { forwardRef, useEffect, useRef, useState } from "react";
 
-import { PopperProps } from "@mui/material/Popper";
 import { useForkRef } from "@mui/material/utils";
 
 import { useDefaultProps } from "../hooks/useDefaultProps";
 import { setId } from "../utils/setId";
 import { useLabels } from "../hooks/useLabels";
 import { useUniqueId } from "../hooks/useUniqueId";
 import { useControlled } from "../hooks/useControlled";
-import { HvBaseProps } from "../types/generic";
 import { HvBaseDropdown, HvBaseDropdownProps } from "../BaseDropdown";
 import { HvListValue } from "../List";
 import {
@@ -17,6 +15,7 @@ import {
   HvWarningText,
   HvFormElement,
   HvLabel,
+  HvFormElementProps,
 } from "../Forms";
 import { ExtractNames } from "../utils/classes";
 import { HvTypography } from "../Typography";
@@ -32,42 +31,24 @@ export type HvDropdownClasses = ExtractNames<typeof useClasses>;
 export type HvDropdownStatus = "standBy" | "valid" | "invalid";
 
 export interface HvDropdownProps
-  extends HvBaseProps<HTMLDivElement, "onChange"> {
+  extends Omit<HvFormElementProps, "value" | "onChange">,
+    Pick<
+      HvBaseDropdownProps,
+      | "placement"
+      | "popperProps"
+      | "disablePortal"
+      | "variableWidth"
+      | "expanded"
+      | "defaultExpanded"
+    > {
   /**
    * A Jss Object used to override or extend the component styles applied.
    */
   classes?: HvDropdownClasses;
-  /**
-   * The form element name.
-   */
-  name?: string;
-  /**
-   * The label of the form element.
-   *
-   * The form element must be labeled for accessibility reasons.
-   * If not provided, an aria-label or aria-labelledby must be provided instead.
-   */
-  label?: any;
-  /**
-   * Provide additional descriptive text for the form element.
-   */
-  description?: any;
   /**
    * The placeholder value when nothing is selected.
    */
   placeholder?: string;
-  /**
-   * Indicates that the form element is disabled.
-   */
-  disabled?: boolean;
-  /**
-   * Indicates that the form element is in read only mode.
-   */
-  readOnly?: boolean;
-  /**
-   * Indicates that user input is required on the form element.
-   */
-  required?: boolean;
   /**
    * The status of the form element.
    *
@@ -105,14 +86,6 @@ export interface HvDropdownProps
    * If `true` the dropdown is rendered with a search bar, if `false` there won't be a search bar.
    */
   showSearch?: boolean;
-  /**
-   * If `true` the dropdown starts opened if `false` it starts closed.
-   */
-  expanded?: boolean;
-  /**
-   * When uncontrolled, defines the initial expanded state.
-   */
-  defaultExpanded?: boolean;
   /**
    * If 'true' the dropdown will notify on the first render.
    */
@@ -125,28 +98,10 @@ export interface HvDropdownProps
    * If `true` the dropdown will show tooltips when user mouseenter text in list
    */
   hasTooltips?: boolean;
-  /**
-   * Disable the portal behavior.
-   * The children stay within it's parent DOM hierarchy.
-   */
-  disablePortal?: boolean;
-  /**
-   * If `true` the dropdown width depends size of content if `false` the width depends on the header size.
-   * Defaults to `false`.
-   */
-  variableWidth?: boolean;
   /**
    * If `true`, selection can be toggled when single selection.
    */
   singleSelectionToggle?: boolean;
-  /**
-   * Placement of the dropdown.
-   */
-  placement?: "left" | "right";
-  /**
-   * An object containing props to be wired to the popper component.
-   */
-  popperProps?: Partial<PopperProps>;
   /**
    * Callback called when the user cancels the changes.
    *
@@ -195,7 +150,7 @@ export interface HvDropdownProps
   /**
    * Extra props passed to the list.
    */
-  listProps?: HvDropdownListProps;
+  listProps?: Partial<HvDropdownListProps>;
 }
 
 const DEFAULT_LABELS = {

packages/core/src/Table/stories/TableRenderers/DropdownColumnRenderer.tsx

@@ -46,11 +46,6 @@ export const DropdownColumnRenderer = () => {
             return newVal;
           });
           setData(newData);
-        },
-        {
-          popperProps: {
-            disablePortal: true,
-          },
         }
       ),
     ];