refine-mantine 1.0.0-dev.2 → 1.0.0-dev.3

package/dist/index.d.ts

@@ -1,9 +1,9 @@
-import { ActionIconProps, AnchorProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, NotificationProps, PinInputProps, PopoverProps, ScrollAreaProps, StackProps, TextInputProps } from "@mantine/core";
+import { ActionIconProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PopoverProps, ScrollAreaProps, StackProps, TextInputProps } from "@mantine/core";
 import { AuthProvider, AutoSaveIndicatorProps as AutoSaveIndicatorProps$1, BaseRecord, HttpError, LoginFormTypes, NotificationProvider, OAuthProvider, RegisterFormTypes, UseFormProps as UseFormProps$1, UseFormReturnType as UseFormReturnType$1, useMenu, useTranslate } from "@refinedev/core";
 import { IconProps } from "@tabler/icons-react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import { RefineBreadcrumbProps, RefineCreateButtonProps, RefineCrudCreateProps, RefineCrudEditProps, RefineCrudListProps, RefineCrudShowProps, RefineDeleteButtonProps, RefineEditButtonProps, RefineListButtonProps, RefineRefreshButtonProps, RefineSaveButtonProps, RefineShowButtonProps } from "@refinedev/ui-types";
 import React$1, { ReactNode } from "react";
+import { RefineBreadcrumbProps, RefineCreateButtonProps, RefineCrudCreateProps, RefineCrudEditProps, RefineCrudListProps, RefineCrudShowProps, RefineDeleteButtonProps, RefineEditButtonProps, RefineListButtonProps, RefineRefreshButtonProps, RefineSaveButtonProps, RefineShowButtonProps } from "@refinedev/ui-types";
 import { FormValidateInput, UseFormInput, UseFormReturnType as UseFormReturnType$2 } from "@mantine/form";
 import { Column } from "@tanstack/table-core";
 import { UseTableReturnType } from "@refinedev/react-table";
@@ -15,10 +15,11 @@ declare const Breadcrumb: React$1.FC<BreadcrumbProps>;
 //#region src/components/buttons/CreateButton.d.ts
 type CreateButtonProps = RefineCreateButtonProps<{
   iconProps?: IconProps;
-  anchorProps?: AnchorProps;
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 declare const CreateButton: React$1.FC<CreateButtonProps>;
 //#endregion
@@ -29,26 +30,30 @@ type DeleteButtonProps = RefineDeleteButtonProps<{
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 declare const DeleteButton: React$1.FC<DeleteButtonProps>;
 //#endregion
 //#region src/components/buttons/EditButton.d.ts
 type EditButtonProps = RefineEditButtonProps<{
   iconProps?: IconProps;
-  anchorProps?: AnchorProps;
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 declare const EditButton: React$1.FC<EditButtonProps>;
 //#endregion
 //#region src/components/buttons/ListButton.d.ts
 type ListButtonProps = RefineListButtonProps<{
   iconProps?: IconProps;
-  anchorProps?: AnchorProps;
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 declare const ListButton: React$1.FC<ListButtonProps>;
 //#endregion
@@ -76,6 +81,8 @@ type ShowButtonProps = RefineShowButtonProps<{
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 declare const ShowButton: React$1.FC<ShowButtonProps>;
 //#endregion

package/dist/index.js

@@ -2,9 +2,9 @@ import { ActionIcon, Anchor, AppShell, Avatar, Badge, Box, Breadcrumbs, Burger,
 import { CanAccess, Link, flattenObjectKeys, matchResourceFromRoute, useBack, useBreadcrumb, useCreateButton, useDeleteButton, useEditButton, useForm as useForm$1, useGetIdentity, useGo, useLink, useListButton, useLogin, useLogout, useMenu, useMutationMode, useNavigation, useRefineContext, useRefineOptions, useRefreshButton, useRegister, useResourceParams, useSaveButton, useShowButton, useToPath, useTranslate, useTranslation, useUserFriendlyName, useWarnAboutChange } from "@refinedev/core";
 import { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconDeviceFloppy, IconDots, IconExclamationCircle, IconEye, IconFilter, IconHome, IconLanguage, IconList, IconLockPassword, IconLogout, IconMoon, IconPencil, IconRefresh, IconSelector, IconSquarePlus, IconSun, IconTrash, IconX } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useState } from "react";
 import { useDebouncedCallback, useDisclosure } from "@mantine/hooks";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
-import { useCallback, useEffect, useState } from "react";
 import { flexRender } from "@tanstack/react-table";
 import { isEmail, isNotEmpty, useForm as useForm$2 } from "@mantine/form";
 import { hideNotification, showNotification, updateNotification } from "@mantine/notifications";
@@ -52,18 +52,16 @@ const Breadcrumb = ({ breadcrumbProps, showHome = true, hideIcons = false, meta,
 
 //#endregion
 //#region src/components/buttons/CreateButton.tsx
-const CreateButton = ({ resource, hideText = false, accessControl, meta, children, iconProps, anchorProps, actionIconProps, buttonProps, disabled: disabledFromProps, onClick }) => {
+const CreateButton = ({ resource, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, disabled: disabledFromProps, menuItem, menuItemProps, onClick }) => {
 	const { to, label, title, disabled: disabledFromHook, hidden, LinkComponent } = useCreateButton({
 		resource,
 		accessControl,
 		meta
 	});
-	if (hidden) return null;
 	const disabled = disabledFromProps || disabledFromHook;
-	return /* @__PURE__ */ jsx(Anchor, {
+	const actionProps = {
 		component: LinkComponent,
-		to,
-		onClick: (e) => {
+		onClick: useCallback((e) => {
 			if (disabled) {
 				e.preventDefault();
 				return;
@@ -72,36 +70,49 @@ const CreateButton = ({ resource, hideText = false, accessControl, meta, childre
 				e.preventDefault();
 				onClick(e);
 			}
-		},
-		...anchorProps,
-		children: hideText ? /* @__PURE__ */ jsx(ActionIcon, {
-			title,
-			disabled,
-			"aria-label": label,
-			variant: "filled",
-			size: "md",
-			...actionIconProps,
-			children: /* @__PURE__ */ jsx(IconSquarePlus, {
-				size: 18,
-				...iconProps
-			})
-		}) : /* @__PURE__ */ jsx(Button, {
-			disabled,
-			leftSection: /* @__PURE__ */ jsx(IconSquarePlus, {
-				size: 18,
-				...iconProps
-			}),
-			title,
-			variant: "filled",
-			...buttonProps,
-			children: children ?? label
+		}, [disabled, onClick]),
+		to
+	};
+	if (hidden) return null;
+	return hideText ? /* @__PURE__ */ jsx(ActionIcon, {
+		title,
+		disabled,
+		"aria-label": label,
+		variant: "filled",
+		size: "md",
+		...actionProps,
+		...actionIconProps,
+		children: /* @__PURE__ */ jsx(IconSquarePlus, {
+			size: 18,
+			...iconProps
 		})
+	}) : menuItem ? /* @__PURE__ */ jsx(Menu.Item, {
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconSquarePlus, {
+			size: 14,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...menuItemProps,
+		children: children ?? label
+	}) : /* @__PURE__ */ jsx(Button, {
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconSquarePlus, {
+			size: 18,
+			...iconProps
+		}),
+		title,
+		variant: "filled",
+		...actionProps,
+		...buttonProps,
+		children: children ?? label
 	});
 };
 
 //#endregion
 //#region src/components/buttons/DeleteButton.tsx
-const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, children, successNotification, errorNotification, hideText = false, accessControl, meta, dataProviderName, confirmTitle, confirmOkText, confirmCancelText, iconProps, popoverProps, actionIconProps, buttonProps, disabled: disabledFromProps, onSuccess }) => {
+const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, children, successNotification, errorNotification, hideText = false, accessControl, meta, dataProviderName, confirmTitle, confirmOkText, confirmCancelText, iconProps, popoverProps, actionIconProps, buttonProps, disabled: disabledFromProps, menuItem, menuItemProps, onSuccess }) => {
 	const { title, label, hidden, disabled: disabledFromHook, loading, confirmTitle: defaultConfirmTitle, confirmOkLabel: defaultConfirmOkLabel, cancelLabel: defaultCancelLabel, onConfirm } = useDeleteButton({
 		resource,
 		id: recordItemId,
@@ -135,6 +146,18 @@ const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, child
 				size: 18,
 				...iconProps
 			})
+		}) : menuItem ? /* @__PURE__ */ jsx(Menu.Item, {
+			color: "red",
+			onClick: handlers.toggle,
+			disabled,
+			leftSection: /* @__PURE__ */ jsx(IconTrash, {
+				size: 14,
+				...iconProps
+			}),
+			title,
+			closeMenuOnClick: false,
+			...menuItemProps,
+			children: children ?? label
 		}) : /* @__PURE__ */ jsx(Button, {
 			color: "red",
 			variant: "outline",
@@ -174,19 +197,17 @@ const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, child
 
 //#endregion
 //#region src/components/buttons/EditButton.tsx
-const EditButton = ({ resource, recordItemId, hideText = false, accessControl, meta, children, iconProps, anchorProps, actionIconProps, buttonProps, disabled: disabledFromProps, onClick }) => {
+const EditButton = ({ resource, recordItemId, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, disabled: disabledFromProps, menuItem, menuItemProps, onClick }) => {
 	const { to, label, title, disabled: disabledFromHook, hidden, LinkComponent } = useEditButton({
 		resource,
 		id: recordItemId,
 		accessControl,
 		meta
 	});
-	if (hidden) return null;
 	const disabled = disabledFromProps || disabledFromHook;
-	return /* @__PURE__ */ jsx(Anchor, {
+	const actionProps = {
 		component: LinkComponent,
-		to,
-		onClick: (e) => {
+		onClick: useCallback((e) => {
 			if (disabled) {
 				e.preventDefault();
 				return;
@@ -195,46 +216,57 @@ const EditButton = ({ resource, recordItemId, hideText = false, accessControl, m
 				e.preventDefault();
 				onClick(e);
 			}
-		},
-		...anchorProps,
-		children: hideText ? /* @__PURE__ */ jsx(ActionIcon, {
-			title,
-			disabled,
-			"aria-label": label,
-			variant: "default",
-			...actionIconProps,
-			children: /* @__PURE__ */ jsx(IconPencil, {
-				size: 18,
-				...iconProps
-			})
-		}) : /* @__PURE__ */ jsx(Button, {
-			variant: "default",
-			disabled,
-			leftSection: /* @__PURE__ */ jsx(IconPencil, {
-				size: 18,
-				...iconProps
-			}),
-			title,
-			...buttonProps,
-			children: children ?? label
+		}, [disabled, onClick]),
+		to
+	};
+	if (hidden) return null;
+	return hideText ? /* @__PURE__ */ jsx(ActionIcon, {
+		title,
+		disabled,
+		"aria-label": label,
+		variant: "default",
+		...actionProps,
+		...actionIconProps,
+		children: /* @__PURE__ */ jsx(IconPencil, {
+			size: 18,
+			...iconProps
 		})
+	}) : menuItem ? /* @__PURE__ */ jsx(Menu.Item, {
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconPencil, {
+			size: 14,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...menuItemProps,
+		children: children ?? label
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "default",
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconPencil, {
+			size: 18,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...buttonProps,
+		children: children ?? label
 	});
 };
 
 //#endregion
 //#region src/components/buttons/ListButton.tsx
-const ListButton = ({ resource, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, anchorProps, disabled: disabledFromProps, onClick }) => {
+const ListButton = ({ resource, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, disabled: disabledFromProps, menuItem, menuItemProps, onClick }) => {
 	const { to, label, title, disabled: disabledFromHook, hidden, LinkComponent } = useListButton({
 		resource,
 		accessControl,
 		meta
 	});
-	if (hidden) return null;
 	const disabled = disabledFromProps || disabledFromHook;
-	return /* @__PURE__ */ jsx(Anchor, {
+	const actionProps = {
 		component: LinkComponent,
-		to,
-		onClick: (e) => {
+		onClick: useCallback((e) => {
 			if (disabled) {
 				e.preventDefault();
 				return;
@@ -243,28 +275,41 @@ const ListButton = ({ resource, hideText = false, accessControl, meta, children,
 				e.preventDefault();
 				onClick(e);
 			}
-		},
-		...anchorProps,
-		children: hideText ? /* @__PURE__ */ jsx(ActionIcon, {
-			variant: "default",
-			disabled,
-			title,
-			...actionIconProps,
-			children: /* @__PURE__ */ jsx(IconList, {
-				size: 18,
-				...iconProps
-			})
-		}) : /* @__PURE__ */ jsx(Button, {
-			variant: "default",
-			disabled,
-			leftSection: /* @__PURE__ */ jsx(IconList, {
-				size: 18,
-				...iconProps
-			}),
-			title,
-			...buttonProps,
-			children: children ?? label
+		}, [disabled, onClick]),
+		to
+	};
+	if (hidden) return null;
+	return hideText ? /* @__PURE__ */ jsx(ActionIcon, {
+		variant: "default",
+		disabled,
+		title,
+		...actionProps,
+		...actionIconProps,
+		children: /* @__PURE__ */ jsx(IconList, {
+			size: 18,
+			...iconProps
 		})
+	}) : menuItem ? /* @__PURE__ */ jsx(Menu.Item, {
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconList, {
+			size: 14,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...menuItemProps,
+		children: children ?? label
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "default",
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconList, {
+			size: 18,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...buttonProps,
+		children: children ?? label
 	});
 };
 
@@ -330,19 +375,17 @@ const SaveButton = ({ hideText = false, children, iconProps, actionIconProps, bu
 
 //#endregion
 //#region src/components/buttons/ShowButton.tsx
-const ShowButton = ({ resource, recordItemId, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, disabled: disabledFromProps, onClick }) => {
+const ShowButton = ({ resource, recordItemId, hideText = false, accessControl, meta, children, iconProps, actionIconProps, buttonProps, disabled: disabledFromProps, menuItem, menuItemProps, onClick }) => {
 	const { to, label, title, disabled: disabledFromHook, hidden, LinkComponent } = useShowButton({
 		resource,
 		id: recordItemId,
 		accessControl,
 		meta
 	});
-	if (hidden) return null;
 	const disabled = disabledFromProps || disabledFromHook;
-	return /* @__PURE__ */ jsx(Anchor, {
+	const actionProps = {
 		component: LinkComponent,
-		to,
-		onClick: (e) => {
+		onClick: useCallback((e) => {
 			if (disabled) {
 				e.preventDefault();
 				return;
@@ -351,27 +394,41 @@ const ShowButton = ({ resource, recordItemId, hideText = false, accessControl, m
 				e.preventDefault();
 				onClick(e);
 			}
-		},
-		children: hideText ? /* @__PURE__ */ jsx(ActionIcon, {
-			variant: "default",
-			disabled,
-			title,
-			...actionIconProps,
-			children: /* @__PURE__ */ jsx(IconEye, {
-				size: 18,
-				...iconProps
-			})
-		}) : /* @__PURE__ */ jsx(Button, {
-			variant: "default",
-			disabled,
-			leftSection: /* @__PURE__ */ jsx(IconEye, {
-				size: 18,
-				...iconProps
-			}),
-			title,
-			...buttonProps,
-			children: children ?? label
+		}, [disabled, onClick]),
+		to
+	};
+	if (hidden) return null;
+	return hideText ? /* @__PURE__ */ jsx(ActionIcon, {
+		variant: "default",
+		disabled,
+		title,
+		...actionProps,
+		...actionIconProps,
+		children: /* @__PURE__ */ jsx(IconEye, {
+			size: 18,
+			...iconProps
 		})
+	}) : menuItem ? /* @__PURE__ */ jsx(Menu.Item, {
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconEye, {
+			size: 14,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...menuItemProps,
+		children: children ?? label
+	}) : /* @__PURE__ */ jsx(Button, {
+		variant: "default",
+		disabled,
+		leftSection: /* @__PURE__ */ jsx(IconEye, {
+			size: 18,
+			...iconProps
+		}),
+		title,
+		...actionProps,
+		...buttonProps,
+		children: children ?? label
 	});
 };
 

package/package.json

@@ -87,5 +87,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.0.0-dev.2"
+  "version": "1.0.0-dev.3"
 }

package/src/components/buttons/CloneButton.story.tsx

@@ -1,5 +1,6 @@
-import { Stack } from "@mantine/core";
+import { ActionIcon, Menu, Stack } from "@mantine/core";
 import type { Meta } from "@storybook/react";
+import { IconDots } from "@tabler/icons-react";
 import { CloneButton } from "./CloneButton";
 
 export default {
@@ -20,3 +21,14 @@ export const HideText = () =>
 
 export const Disabled = () =>
   <CloneButton disabled />;
+
+export const MenuItem = () =>
+  <Menu shadow="md" width={200}>
+    <Menu.Target>
+      <ActionIcon variant="default"><IconDots size={16} /></ActionIcon>
+    </Menu.Target>
+    <Menu.Dropdown>
+      <Menu.Label>Clone Button</Menu.Label>
+      <CloneButton menuItem />
+    </Menu.Dropdown>
+  </Menu>;

package/src/components/buttons/CloneButton.tsx

@@ -1,21 +1,23 @@
 import {
   ActionIcon,
   type ActionIconProps,
-  Anchor,
-  type AnchorProps,
   Button,
   type ButtonProps,
+  Menu,
+  type MenuItemProps
 } from "@mantine/core";
 import { useCloneButton } from "@refinedev/core";
 import type { RefineCloneButtonProps } from "@refinedev/ui-types";
-import { type IconProps, IconSquarePlus } from "@tabler/icons-react";
+import { IconLibraryPlus, type IconProps } from "@tabler/icons-react";
+import { useCallback } from "react";
 
 export type CloneButtonProps = RefineCloneButtonProps<{
   iconProps?: IconProps;
-  anchorProps?: AnchorProps;
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 
 export const CloneButton: React.FC<CloneButtonProps> = ({
@@ -27,9 +29,10 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
   children,
   iconProps,
   actionIconProps,
-  anchorProps,
   buttonProps,
   disabled: disabledFromProps,
+  menuItem,
+  menuItemProps,
   onClick,
 }) => {
   const { to, label, title, hidden, disabled: disabledFromHook, LinkComponent } = useCloneButton({
@@ -39,48 +42,59 @@ export const CloneButton: React.FC<CloneButtonProps> = ({
     meta,
   });
 
-  if (hidden) return null;
-
   const disabled = disabledFromProps || disabledFromHook;
 
-  return (
-    <Anchor
-      // biome-ignore lint/suspicious/noExplicitAny: refines types messed up
-      component={LinkComponent as any}
-      to={to}
-      onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (disabled) {
-          e.preventDefault();
-          return;
-        }
-        if (onClick) {
-          e.preventDefault();
-          onClick(e);
-        }
-      }}
-      {...anchorProps}
-    >
-      {hideText ? (
-        <ActionIcon
-          variant="default"
-          disabled={disabled}
-          title={title}
-          aria-label={label}
-          {...actionIconProps}
-        >
-          <IconSquarePlus size={18} {...iconProps} />
-        </ActionIcon>
-      ) : (
-        <Button
-          variant="default"
-          disabled={disabled}
-          leftSection={<IconSquarePlus size={18} {...iconProps} />}
-          title={title}
-          {...buttonProps}
-        >
-          {children ?? label}
-        </Button>
-      )}
-    </Anchor>
-  );
+  const handleClick = useCallback((e: React.PointerEvent<HTMLButtonElement>) => {
+    if (disabled) {
+      e.preventDefault();
+      return;
+    }
+    if (onClick) {
+      e.preventDefault();
+      onClick(e);
+    }
+  }, [disabled, onClick]);
+
+  const actionProps = {
+    // biome-ignore lint/suspicious/noExplicitAny: that's fine
+    component: LinkComponent as any,
+    onClick: handleClick,
+    to,
+  }
+
+  if (hidden) return null;
+
+  return hideText ? (
+      <ActionIcon
+        variant="default"
+        disabled={disabled}
+        title={title}
+        aria-label={label}
+        {...actionProps}
+        {...actionIconProps}
+      >
+        <IconLibraryPlus size={18} {...iconProps} />
+      </ActionIcon>
+    ) : menuItem ?  (
+      <Menu.Item
+        disabled={disabled}
+        leftSection={<IconLibraryPlus size={14} {...iconProps} />}
+        title={title}
+        {...actionProps}
+        {...menuItemProps}
+      >
+        {children ?? label}
+      </Menu.Item>
+    ) : (
+      <Button
+        variant="default"
+        disabled={disabled}
+        leftSection={<IconLibraryPlus size={18} {...iconProps} />}
+        title={title}
+        {...actionProps}
+        {...buttonProps}
+      >
+        {children ?? label}
+      </Button>
+    );
 };

package/src/components/buttons/CreateButton.story.tsx

@@ -1,5 +1,6 @@
-import { Stack } from "@mantine/core";
+import { ActionIcon, Menu, Stack } from "@mantine/core";
 import type { Meta } from "@storybook/react";
+import { IconDots } from "@tabler/icons-react";
 import { CreateButton } from "./CreateButton";
 
 export default {
@@ -19,4 +20,15 @@ export const HideText = () =>
   <CreateButton hideText />;
 
 export const Disabled = () =>
-  <CreateButton disabled />;
+  <CreateButton disabled />;
+
+export const MenuItem = () =>
+  <Menu shadow="md" width={200}>
+    <Menu.Target>
+      <ActionIcon variant="default"><IconDots size={16} /></ActionIcon>
+    </Menu.Target>
+    <Menu.Dropdown>
+      <Menu.Label>Create Button</Menu.Label>
+      <CreateButton menuItem />
+    </Menu.Dropdown>
+  </Menu>;