feat: add boxprops to popover

package.json

@@ -1,6 +1,6 @@
 {
   "name": "zens",
-  "version": "0.0.39",
+  "version": "0.0.41",
   "description": "MarkFlowy's ui component library.",
   "keywords": [],
   "homepage": "https://github.com/drl990114/zens#readme",

src/Menu/index.tsx

@@ -1,7 +1,7 @@
 import type { MenuProps as AkMenuProps } from '@ariakit/react';
 import { MenuButton, MenuButtonArrow, MenuProvider, useMenuStore } from '@ariakit/react';
 
-import { MenuItem, MenuItemCheckIcon, MenuWrapper, MenuSeparator } from './styles';
+import { MenuItem, MenuItemCheckIcon, MenuSeparator, MenuWrapper } from './styles';
 
 import Button from '../Button';
 
@@ -32,7 +32,7 @@ interface MenuProps extends AkMenuProps {
 
 export const isDivider = (item: MenuItemData): item is MenuDividerType => {
   return (item as MenuDividerType)?.type === 'divider';
-}
+};
 
 const Menu = (props: MenuProps) => {
   const {
@@ -47,9 +47,9 @@ const Menu = (props: MenuProps) => {
   } = props;
 
   const renderItems = (menuItems: MenuItemData[]) => {
-    return menuItems.map((item) => {
+    return menuItems.map((item, index) => {
       if (isDivider(item)) {
-        return <MenuSeparator />
+        return <MenuSeparator key={index} />;
       }
 
       const key = item.value;

src/Popover/index.tsx

@@ -3,7 +3,7 @@ import type { PopoverProps as AkPopoverProps, PopoverProviderProps, PopoverStore
 import { PopoverDisclosure, PopoverProvider, usePopoverStore } from '@ariakit/react';
 import { Box } from '../Box';
 import { PopoverArrow, PopoverHeading, PopoverWrapper } from './styles';
-import { useEffect } from 'react';
+import { HTMLAttributes, useEffect } from 'react';
 
 export type { PopoverStore } from '@ariakit/react';
 export { usePopoverStore } from '@ariakit/react';
@@ -12,6 +12,7 @@ type PopoverOptions = Pick<PopoverProviderProps, 'placement' | 'open'> &
   Pick<AkPopoverProps, 'onClose'>;
 
 interface PopoverProps extends BaseComponentProps, PopoverOptions {
+  boxProps?: HTMLAttributes<HTMLDivElement>;
   arrow?: boolean;
   title?: string;
   customContent?: React.ReactNode;
@@ -30,6 +31,7 @@ const Popover: React.FC<PopoverProps> = (props) => {
     customContent,
     placement,
     onStoreChange,
+    boxProps = {},
     ...rest
   } = props;
   const store = usePopoverStore();
@@ -44,7 +46,7 @@ const Popover: React.FC<PopoverProps> = (props) => {
     <PopoverProvider store={store} placement={placement}>
       <PopoverDisclosure
         toggleOnClick={toggleOnClick}
-        render={(p) => <Box style={{ display: 'inline-block' }} {...p} />}
+        render={(p) => <Box style={{ display: 'inline-block' }} {...p} {...boxProps}/>}
       >
         {children}
       </PopoverDisclosure>