fix(popover): allow pass custom z-index (#1410)

.changeset/clean-buses-sing.md

@@ -0,0 +1,8 @@
+---
+"@nextui-org/accordion": patch
+"@nextui-org/popover": patch
+"@nextui-org/snippet": patch
+"@nextui-org/user": patch
+---
+
+Popover style prop merged with the one returned by react-aria, other components merge props improvements

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

@@ -29,7 +29,7 @@ interface Props extends HTMLNextUIProps<"div"> {
   /**
    * The divider props.
    */
-  dividerProps?: DividerProps;
+  dividerProps?: Partial<DividerProps>;
   /**
    * The accordion selection behavior.
    * @default "toggle"

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

@@ -170,6 +170,7 @@ export function usePopover(originalProps: UsePopoverProps) {
   const getPopoverProps: PropGetter = (props = {}) => ({
     ref: popoverRef,
     ...mergeProps(popoverProps, otherProps, props),
+    style: mergeProps(popoverProps.style, otherProps.style, props.style),
     id: popoverId,
   });
 

packages/components/popover/stories/popover.stories.tsx

@@ -154,7 +154,13 @@ const OpenChangeTemplate = (args: PopoverProps) => {
 
   return (
     <div className="flex flex-col gap-2">
-      <Popover {...args} onOpenChange={(open) => setIsOpen(open)}>
+      <Popover
+        {...args}
+        style={{
+          zIndex: 10,
+        }}
+        onOpenChange={(open) => setIsOpen(open)}
+      >
         <PopoverTrigger>
           <Button>Open Popover</Button>
         </PopoverTrigger>

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

@@ -96,7 +96,7 @@ export interface UseSnippetProps extends Omit<HTMLNextUIProps, "onCopy">, Snippe
    *  isDisabled: disableCopy,
    * }
    */
-  tooltipProps?: TooltipProps;
+  tooltipProps?: Partial<TooltipProps>;
   /**
    * Copy button props.
    * @see [Button](https://nextui.org/components/button) for more details.
@@ -108,7 +108,7 @@ export interface UseSnippetProps extends Omit<HTMLNextUIProps, "onCopy">, Snippe
    *   isIconOnly: true,
    * }
    */
-  copyButtonProps?: ButtonProps;
+  copyButtonProps?: Partial<ButtonProps>;
   /**
    * Callback when the text is copied.
    */
@@ -134,20 +134,23 @@ export function useSnippet(originalProps: UseSnippetProps) {
     autoFocus = false,
     hideSymbol = false,
     onCopy: onCopyProp,
-    tooltipProps = {
-      offset: 15,
-      delay: 1000,
-      content: "Copy to clipboard",
-      color: originalProps?.color as TooltipProps["color"],
-      isDisabled: disableCopy,
-    },
-    copyButtonProps,
+    tooltipProps: userTooltipProps = {},
+    copyButtonProps: userButtonProps = {},
     className,
     ...otherProps
   } = props;
 
   const Component = as || "div";
 
+  const tooltipProps: Partial<TooltipProps> = {
+    offset: 15,
+    delay: 1000,
+    content: "Copy to clipboard",
+    color: originalProps?.color as TooltipProps["color"],
+    isDisabled: props.disableCopy,
+    ...userTooltipProps,
+  };
+
   const domRef = useDOMRef(ref);
   const preRef = useRef<HTMLPreElement>(null);
 
@@ -212,7 +215,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
     onCopyProp?.(valueToCopy);
   }, [copy, codeString, disableCopy, onCopyProp, children]);
 
-  const defaultCopyButtonProps: ButtonProps = {
+  const copyButtonProps: Partial<ButtonProps> = {
     "aria-label":
       typeof tooltipProps.content === "string" ? tooltipProps.content : "Copy to clipboard",
     size: "sm",
@@ -220,13 +223,13 @@ export function useSnippet(originalProps: UseSnippetProps) {
     isDisabled: disableCopy,
     onPress: onCopy,
     isIconOnly: true,
-    ...copyButtonProps,
+    ...userButtonProps,
   };
 
   const getCopyButtonProps = useCallback(
     () =>
       ({
-        ...defaultCopyButtonProps,
+        ...copyButtonProps,
         "data-copied": dataAttr(copied),
         className: slots.copyButton({
           class: clsx(classNames?.copyButton),
@@ -238,7 +241,7 @@ export function useSnippet(originalProps: UseSnippetProps) {
       isFocused,
       disableCopy,
       classNames?.copyButton,
-      defaultCopyButtonProps,
+      copyButtonProps,
       focusProps,
     ],
   );

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

@@ -31,7 +31,7 @@ interface Props {
    * The user avatar props
    * @see https://nextui.org/docs/components/avatar
    */
-  avatarProps?: AvatarProps;
+  avatarProps?: Partial<AvatarProps>;
   /**
    * Classname or List of classes to change the classNames of the avatar.
    * if `className` is passed, it will be added to the base slot.
@@ -60,13 +60,16 @@ export function useUser(props: UseUserProps) {
     className,
     classNames,
     isFocusable = false,
-    avatarProps = {
-      isFocusable: false,
-      name: typeof name === "string" ? name : undefined,
-    },
+    avatarProps: userAvatarProps = {},
     ...otherProps
   } = props;
 
+  const avatarProps = {
+    isFocusable: false,
+    name: typeof name === "string" ? name : undefined,
+    ...userAvatarProps,
+  };
+
   const Component = as || "div";
   const shouldFilterDOMProps = typeof Component === "string";