fix(popover): trigger disabled prop warning (#2784)

.changeset/five-lemons-admire.md

@@ -0,0 +1,7 @@
+---
+"@nextui-org/dropdown": patch
+"@nextui-org/popover": patch
+"@nextui-org/theme": patch
+---
+
+Fix `isDisabled` prop warning on NextUI components that don't support this propterty, it is also fixed for non-NextUI components.

packages/components/dropdown/src/use-dropdown.ts

@@ -47,10 +47,10 @@ export function useDropdown(props: UseDropdownProps) {
     isOpen,
     defaultOpen,
     onOpenChange,
+    isDisabled,
     type = "menu",
     trigger = "press",
     placement = "bottom",
-    isDisabled = false,
     closeOnSelect = true,
     shouldBlockScroll = true,
     classNames: classNamesProp,

packages/components/dropdown/stories/dropdown.stories.tsx

@@ -84,6 +84,11 @@ export default {
         type: "boolean",
       },
     },
+    isDisabled: {
+      control: {
+        type: "boolean",
+      },
+    },
     disableAnimation: {
       control: {
         type: "boolean",
@@ -109,6 +114,7 @@ const defaultProps = {
   ...dropdown.defaultVariants,
   placement: "bottom",
   offset: 7,
+  isDisabled: false,
   defaultOpen: false,
   disableAnimation: false,
 };
@@ -569,6 +575,24 @@ const CustomTriggerTemplate = ({variant, ...args}) => {
   );
 };
 
+const CustomHTMLTrigger = ({variant, ...args}) => {
+  return (
+    <Dropdown {...args}>
+      <DropdownTrigger>
+        <span className="flex items-center gap-2">Profile</span>
+      </DropdownTrigger>
+      <DropdownMenu aria-label="Actions" variant={variant}>
+        <DropdownItem key="new">New file</DropdownItem>
+        <DropdownItem key="copy">Copy link</DropdownItem>
+        <DropdownItem key="edit">Edit file</DropdownItem>
+        <DropdownItem key="delete" className="text-danger" color="danger">
+          Delete file
+        </DropdownItem>
+      </DropdownMenu>
+    </Dropdown>
+  );
+};
+
 export const Default = {
   render: Template,
 
@@ -695,6 +719,16 @@ export const WithCustomTrigger = {
   },
 };
 
+export const WithCustomHTMLTrigger = {
+  render: CustomHTMLTrigger,
+
+  args: {
+    ...defaultProps,
+    variant: "flat",
+    offset: 14,
+  },
+};
+
 export const DisableAnimation = {
   render: WithStartContentTemplate,
 

packages/components/popover/src/popover-trigger.tsx

@@ -1,5 +1,5 @@
 import React, {Children, cloneElement, useMemo} from "react";
-import {forwardRef, isNextUIEl} from "@nextui-org/system";
+import {forwardRef} from "@nextui-org/system";
 import {pickChildren} from "@nextui-org/react-utils";
 import {useAriaButton} from "@nextui-org/use-aria-button";
 import {Button} from "@nextui-org/button";
@@ -29,27 +29,23 @@ const PopoverTrigger = forwardRef<"button", PopoverTriggerProps>((props, _) => {
     };
   }, [children]);
 
-  const {onPress, ...restProps} = useMemo(() => {
+  const {onPress, isDisabled, ...restProps} = useMemo(() => {
     return getTriggerProps(mergeProps(otherProps, child.props), child.ref);
   }, [getTriggerProps, child.props, otherProps, child.ref]);
 
   // validates if contains a NextUI Button as a child
   const [, triggerChildren] = pickChildren(children, Button);
 
-  const {buttonProps} = useAriaButton({onPress}, triggerRef);
+  const {buttonProps} = useAriaButton({onPress, isDisabled}, triggerRef);
 
   const hasNextUIButton = useMemo<boolean>(() => {
     return triggerChildren?.[0] !== undefined;
   }, [triggerChildren]);
 
-  const isNextUIElement = isNextUIEl(child);
-
-  // `isDisabled` is added in `getMenuTriggerProps()` in `use-dropdown.ts`.
-  // if we include `isDisabled` prop in a DOM element, react will fail to recognize it on a DOM element.
-  // hence, apply filterDOMProps for such case
-  if (!isNextUIElement) delete restProps["isDisabled"];
-
-  return cloneElement(child, mergeProps(restProps, hasNextUIButton ? {onPress} : buttonProps));
+  return cloneElement(
+    child,
+    mergeProps(restProps, hasNextUIButton ? {onPress, isDisabled} : buttonProps),
+  );
 });
 
 PopoverTrigger.displayName = "NextUI.PopoverTrigger";

packages/components/popover/src/use-popover.ts

@@ -253,16 +253,19 @@ export function usePopover(originalProps: UsePopoverProps) {
 
   const getTriggerProps = useCallback<PropGetter>(
     (props = {}, _ref: Ref<any> | null | undefined = null) => {
+      const {isDisabled, ...otherProps} = props;
+
       return {
         "data-slot": "trigger",
         "aria-haspopup": "dialog",
-        ...mergeProps(triggerProps, props),
+        ...mergeProps(triggerProps, otherProps),
         onPress,
+        isDisabled,
         className: slots.trigger({
           class: clsx(classNames?.trigger, props.className),
           // apply isDisabled class names to make the trigger child disabled
           // e.g. for elements like div or NextUI elements that don't have `isDisabled` prop
-          isDropdownDisabled: !!props?.isDisabled,
+          isTriggerDisabled: isDisabled,
         }),
         ref: mergeRefs(_ref, triggerRef),
       };

packages/core/theme/src/components/popover.ts

@@ -162,7 +162,7 @@ const popover = tv({
         base: "animate-none",
       },
     },
-    isDropdownDisabled: {
+    isTriggerDisabled: {
       true: {
         trigger: "opacity-disabled pointer-events-none",
       },