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

package/src/components/buttons/CreateButton.tsx

@@ -1,15 +1,17 @@
-import { ActionIcon, type ActionIconProps, Anchor, type AnchorProps, Button, type ButtonProps } from "@mantine/core";
+import { ActionIcon, type ActionIconProps, Button, type ButtonProps, Menu, type MenuItemProps } from "@mantine/core";
 import { useCreateButton } from "@refinedev/core";
 import type { RefineCreateButtonProps } from "@refinedev/ui-types";
 import { type IconProps, IconSquarePlus } from "@tabler/icons-react";
 import type React from "react";
+import { useCallback } from "react";
 
 export type CreateButtonProps = RefineCreateButtonProps<{
   iconProps?: IconProps;
-  anchorProps?: AnchorProps;
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 
 export const CreateButton: React.FC<CreateButtonProps> = ({
@@ -19,10 +21,11 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
   meta,
   children,
   iconProps,
-  anchorProps,
   actionIconProps,
   buttonProps,
   disabled: disabledFromProps,
+  menuItem,
+  menuItemProps,
   onClick,
 }) => {
   const { to, label, title, disabled: disabledFromHook, hidden, LinkComponent } = useCreateButton(
@@ -33,49 +36,60 @@ export const CreateButton: React.FC<CreateButtonProps> = ({
     },
   );
 
-  if (hidden) return null;
-
   const disabled = disabledFromProps || disabledFromHook;
 
-  return (
-    <Anchor
-      // biome-ignore lint/suspicious/noExplicitAny: that's fine for now
-      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
-          title={title}
-          disabled={disabled}
-          aria-label={label}
-          variant="filled"
-          size="md"
-          {...actionIconProps}
-        >
-          <IconSquarePlus size={18} {...iconProps} />
-        </ActionIcon>
-      ) : (
-        <Button
-          disabled={disabled}
-          leftSection={<IconSquarePlus size={18} {...iconProps} />}
-          title={title}
-          variant="filled"
-          {...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
+        title={title}
+        disabled={disabled}
+        aria-label={label}
+        variant="filled"
+        size="md"
+        {...actionProps}
+        {...actionIconProps}
+      >
+        <IconSquarePlus size={18} {...iconProps} />
+      </ActionIcon>
+    ) : menuItem ?  (
+      <Menu.Item
+        disabled={disabled}
+        leftSection={<IconSquarePlus size={14} {...iconProps} />}
+        title={title}
+        {...actionProps}
+        {...menuItemProps}
+      >
+        {children ?? label}
+      </Menu.Item>
+    ) : (
+      <Button
+        disabled={disabled}
+        leftSection={<IconSquarePlus size={18} {...iconProps} />}
+        title={title}
+        variant="filled"
+        {...actionProps}
+        {...buttonProps}
+      >
+        {children ?? label}
+      </Button>
+    );
 };

package/src/components/buttons/DeleteButton.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 { DeleteButton } from "./DeleteButton";
 
 export default {
@@ -20,3 +21,14 @@ export const HideText = () =>
 
 export const Disabled = () =>
   <DeleteButton disabled />;
+
+export const MenuItem = () =>
+  <Menu shadow="md" width={200}>
+    <Menu.Target>
+      <ActionIcon variant="default"><IconDots size={16} /></ActionIcon>
+    </Menu.Target>
+    <Menu.Dropdown>
+      <Menu.Label>Delete Button</Menu.Label>
+      <DeleteButton menuItem />
+    </Menu.Dropdown>
+  </Menu>;

package/src/components/buttons/DeleteButton.tsx

@@ -4,6 +4,8 @@ import {
   Button,
   type ButtonProps,
   Group,
+  Menu,
+  type MenuItemProps,
   Popover,
   type PopoverProps,
   Text,
@@ -20,6 +22,8 @@ export type DeleteButtonProps = RefineDeleteButtonProps<{
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 
 export const DeleteButton: React.FC<DeleteButtonProps> = ({
@@ -42,6 +46,8 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
   actionIconProps,
   buttonProps,
   disabled: disabledFromProps,
+  menuItem,
+  menuItemProps,
   onSuccess,
 }) => {
   const {
@@ -94,6 +100,18 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
           >
             <IconTrash size={18} {...iconProps} />
           </ActionIcon>
+        ) :  menuItem ?  (
+          <Menu.Item
+            color="red"
+            onClick={handlers.toggle}
+            disabled={disabled}
+            leftSection={<IconTrash size={14} {...iconProps} />}
+            title={title}
+            closeMenuOnClick={false}
+            {...menuItemProps}
+          >
+            {children ?? label}
+          </Menu.Item>
         ) : (
           <Button
             color="red"

package/src/components/buttons/EditButton.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 { EditButton } from "./EditButton";
 
 export default {
@@ -19,4 +20,15 @@ export const HideText = () =>
   <EditButton hideText />;
 
 export const Disabled = () =>
-  <EditButton disabled />;
+  <EditButton disabled />;
+
+export const MenuItem = () =>
+  <Menu shadow="md" width={200}>
+    <Menu.Target>
+      <ActionIcon variant="default"><IconDots size={16} /></ActionIcon>
+    </Menu.Target>
+    <Menu.Dropdown>
+      <Menu.Label>Edit Button</Menu.Label>
+      <EditButton menuItem />
+    </Menu.Dropdown>
+  </Menu>;

package/src/components/buttons/EditButton.tsx

@@ -1,22 +1,24 @@
 import {
   ActionIcon,
   type ActionIconProps,
-  Anchor,
-  type AnchorProps,
   Button,
   type ButtonProps,
+  Menu,
+  type MenuItemProps
 } from "@mantine/core";
 import { useEditButton } from "@refinedev/core";
 import type { RefineEditButtonProps } from "@refinedev/ui-types";
 import { IconPencil, type IconProps } from "@tabler/icons-react";
 import type React from "react";
+import { useCallback } from "react";
 
 export type EditButtonProps = RefineEditButtonProps<{
   iconProps?: IconProps;
-  anchorProps?: AnchorProps;
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 
 export const EditButton: React.FC<EditButtonProps> = ({
@@ -27,10 +29,11 @@ export const EditButton: React.FC<EditButtonProps> = ({
   meta,
   children,
   iconProps,
-  anchorProps,
   actionIconProps,
   buttonProps,
   disabled: disabledFromProps,
+  menuItem,
+  menuItemProps,
   onClick,
 }) => {
   const { to, label, title, disabled: disabledFromHook, hidden, LinkComponent } = useEditButton({
@@ -40,48 +43,61 @@ export const EditButton: React.FC<EditButtonProps> = ({
     meta,
   });
 
-  if (hidden) return null;
-
   const disabled = disabledFromProps || disabledFromHook;
 
+  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 (
-    <Anchor
-      // biome-ignore lint/suspicious/noExplicitAny: refine tzpes are 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 ? (
+      hideText ? (
         <ActionIcon
           title={title}
           disabled={disabled}
           aria-label={label}
           variant="default"
+          {...actionProps}
           {...actionIconProps}
         >
           <IconPencil size={18} {...iconProps} />
         </ActionIcon>
+      ) :  menuItem ?  (
+        <Menu.Item
+          disabled={disabled}
+          leftSection={<IconPencil size={14} {...iconProps} />}
+          title={title}
+          {...actionProps}
+          {...menuItemProps}
+        >
+          {children ?? label}
+        </Menu.Item>
       ) : (
         <Button
           variant="default"
           disabled={disabled}
           leftSection={<IconPencil size={18} {...iconProps} />}
           title={title}
+          {...actionProps}
           {...buttonProps}
         >
           {children ?? label}
         </Button>
-      )}
-    </Anchor>
+      )
   );
 };

package/src/components/buttons/ListButton.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 { ListButton } from "./ListButton";
 
 export default {
@@ -22,4 +23,15 @@ export const Disabled = () =>
   <ListButton
     resource="product"    
     disabled
-  />;
+  />;
+
+export const MenuItem = () =>
+  <Menu shadow="md" width={200}>
+    <Menu.Target>
+      <ActionIcon variant="default"><IconDots size={16} /></ActionIcon>
+    </Menu.Target>
+    <Menu.Dropdown>
+      <Menu.Label>List Button</Menu.Label>
+      <ListButton menuItem>List</ListButton>
+    </Menu.Dropdown>
+  </Menu>;

package/src/components/buttons/ListButton.tsx

@@ -1,22 +1,24 @@
 import {
   ActionIcon,
   type ActionIconProps,
-  Anchor,
-  type AnchorProps,
   Button,
   type ButtonProps,
+  Menu,
+  type MenuItemProps
 } from "@mantine/core";
 import { useListButton } from "@refinedev/core";
 import type { RefineListButtonProps } from "@refinedev/ui-types";
 import { IconList, type IconProps } from "@tabler/icons-react";
 import type React from "react";
+import { useCallback } from "react";
 
 export type ListButtonProps = RefineListButtonProps<{
   iconProps?: IconProps;
-  anchorProps?: AnchorProps;
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 
 export const ListButton: React.FC<ListButtonProps> = ({
@@ -28,8 +30,9 @@ export const ListButton: React.FC<ListButtonProps> = ({
   iconProps,
   actionIconProps,
   buttonProps,
-  anchorProps,
   disabled: disabledFromProps,
+  menuItem,
+  menuItemProps,
   onClick,
 }) => {
   const {
@@ -45,47 +48,58 @@ export const ListButton: React.FC<ListButtonProps> = ({
     meta,
   });
 
-  if (hidden) return null;
-
   const disabled = disabledFromProps || disabledFromHook;
 
-  return (
-    <Anchor
-      // biome-ignore lint/suspicious/noExplicitAny: that's fine
-      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}
-          {...actionIconProps}
-        >
-          <IconList size={18} {...iconProps} />
-        </ActionIcon>
-      ) : (
-        <Button
-          variant="default"
-          disabled={disabled}
-          leftSection={<IconList 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}
+        {...actionProps}
+        {...actionIconProps}
+      >
+        <IconList size={18} {...iconProps} />
+      </ActionIcon>
+    ) :  menuItem ?  (
+      <Menu.Item
+        disabled={disabled}
+        leftSection={<IconList size={14} {...iconProps} />}
+        title={title}
+        {...actionProps}
+        {...menuItemProps}
+      >
+        {children ?? label}
+      </Menu.Item>
+    ) : (
+      <Button
+        variant="default"
+        disabled={disabled}
+        leftSection={<IconList size={18} {...iconProps} />}
+        title={title}
+        {...actionProps}
+        {...buttonProps}
+      >
+        {children ?? label}
+      </Button>
+    );
 };

package/src/components/buttons/ShowButton.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 { ShowButton } from "./ShowButton";
 
 export default {
@@ -20,3 +21,14 @@ export const HideText = () =>
 
 export const Disabled = () =>
   <ShowButton disabled />;
+
+export const MenuItem = () =>
+  <Menu shadow="md" width={200}>
+    <Menu.Target>
+      <ActionIcon variant="default"><IconDots size={16} /></ActionIcon>
+    </Menu.Target>
+    <Menu.Dropdown>
+      <Menu.Label>Show Button</Menu.Label>
+      <ShowButton menuItem />
+    </Menu.Dropdown>
+  </Menu>;

package/src/components/buttons/ShowButton.tsx

@@ -1,14 +1,17 @@
-import { ActionIcon, type ActionIconProps, Anchor, Button, type ButtonProps } from "@mantine/core";
+import { ActionIcon, type ActionIconProps, Button, type ButtonProps, Menu, type MenuItemProps } from "@mantine/core";
 import { useShowButton } from "@refinedev/core";
 import type { RefineShowButtonProps } from "@refinedev/ui-types";
 import { IconEye, type IconProps } from "@tabler/icons-react";
 import type React from "react";
+import { useCallback } from "react";
 
 export type ShowButtonProps = RefineShowButtonProps<{
   iconProps?: IconProps;
   actionIconProps?: ActionIconProps;
   buttonProps?: ButtonProps;
   disabled?: boolean;
+  menuItem?: boolean;
+  menuItemProps?: MenuItemProps;
 }>;
 
 export const ShowButton: React.FC<ShowButtonProps> = ({
@@ -22,6 +25,8 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
   actionIconProps,
   buttonProps,
   disabled: disabledFromProps,
+  menuItem,
+  menuItemProps,
   onClick,
 }) => {
   const {
@@ -38,46 +43,58 @@ export const ShowButton: React.FC<ShowButtonProps> = ({
     meta,
   });
 
-  if (hidden) return null;
-
   const disabled = disabledFromProps || disabledFromHook;
 
-  return (
-    <Anchor
-      // biome-ignore lint/suspicious/noExplicitAny: that's fine
-      component={LinkComponent as any}
-      to={to}
-      onClick={(e: React.PointerEvent<HTMLButtonElement>) => {
-        if (disabled) {
-          e.preventDefault();
-          return;
-        }
-        if (onClick) {
-          e.preventDefault();
-          onClick(e);
-        }
-      }}
-    >
-      {hideText ? (
-        <ActionIcon
-          variant="default"
-          disabled={disabled}
-          title={title}
-          {...actionIconProps}
-        >
-          <IconEye size={18} {...iconProps} />
-        </ActionIcon>
-      ) : (
-        <Button
-          variant="default"
-          disabled={disabled}
-          leftSection={<IconEye 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}
+        {...actionProps}
+        {...actionIconProps}
+      >
+        <IconEye size={18} {...iconProps} />
+      </ActionIcon>
+    ) : menuItem ?  (
+      <Menu.Item
+        disabled={disabled}
+        leftSection={<IconEye size={14} {...iconProps} />}
+        title={title}
+        {...actionProps}
+        {...menuItemProps}
+      >
+        {children ?? label}
+      </Menu.Item>
+    ) : (
+      <Button
+        variant="default"
+        disabled={disabled}
+        leftSection={<IconEye size={18} {...iconProps} />}
+        title={title}
+        {...actionProps}
+        {...buttonProps}
+      >
+        {children ?? label}
+      </Button>
+    );
 };