refine-mantine 1.3.1 → 1.3.2

package/dist/index.js

@@ -141,6 +141,7 @@ const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, child
 		withinPortal: false,
 		withOverlay: true,
 		disabled,
+		trapFocus: true,
 		...popoverProps,
 		children: [/* @__PURE__ */ jsx(Popover.Target, { children: hideText ? /* @__PURE__ */ jsx(ActionIcon, {
 			color: "red",
@@ -190,7 +191,6 @@ const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, child
 				}), /* @__PURE__ */ jsx(Button, {
 					color: "red",
 					onClick: handleConfirm,
-					autoFocus: true,
 					size: "xs",
 					children: confirmOkText ?? defaultConfirmOkLabel
 				})]
@@ -720,8 +720,6 @@ const Show = (props) => {
 	} : void 0;
 	const editButtonProps = isEditButtonVisible ? {
 		...isLoading ? { disabled: true } : {},
-		color: void 0,
-		variant: "filled",
 		resource: identifier,
 		recordItemId: id
 	} : void 0;
@@ -775,7 +773,6 @@ const Show = (props) => {
 						gap: "xs",
 						children: [buttonBack, /* @__PURE__ */ jsx(Title, {
 							order: 3,
-							className: RefinePageHeaderClassNames.Title,
 							children: title ?? translate(`${identifier}.titles.show`, `Show ${getUserFriendlyName(resource?.meta?.label ?? identifier, "singular")}`)
 						})]
 					})]
@@ -879,7 +876,7 @@ const PhoneField = (props) => /* @__PURE__ */ jsx(UrlField, {
 //#endregion
 //#region src/components/layout/Layout.tsx
 const Layout = (p) => {
-	const [opened, { toggle }] = useDisclosure();
+	const [opened, { toggle, close }] = useDisclosure();
 	const { title: { icon: defaultIcon, text: defaultText } = {} } = useRefineOptions();
 	const { data: identity } = useGetIdentity();
 	const menu = useMenu();
@@ -947,7 +944,8 @@ const Layout = (p) => {
 					children: p.renderMenu ? p.renderMenu(menu) : menu.menuItems.map((item) => /* @__PURE__ */ jsx(MenuItem, {
 						item,
 						defaultOpenKeys: menu.defaultOpenKeys,
-						selectedKey: menu.selectedKey
+						selectedKey: menu.selectedKey,
+						onClickLeaf: close
 					}, item.key))
 				}), /* @__PURE__ */ jsx(AppShell.Section, {
 					...p.navbarFooterProps,
@@ -987,10 +985,12 @@ const MenuItem = (p) => {
 			defaultOpened: p.defaultOpenKeys.includes(p.item.key ?? ""),
 			component: Link,
 			to: listUrl(p.item.name),
+			onClick: p.item.children.length > 0 ? void 0 : p.onClickLeaf,
 			children: p.item.children.length > 0 ? p.item.children.map((child) => /* @__PURE__ */ jsx(MenuItem, {
 				item: child,
 				defaultOpenKeys: p.defaultOpenKeys,
-				selectedKey: p.selectedKey
+				selectedKey: p.selectedKey,
+				onClickLeaf: p.onClickLeaf
 			}, child.key)) : null
 		}, p.item.key)
 	}, p.item.key);

package/package.json

@@ -3,6 +3,10 @@
   "type": "module",
   "exports": "./dist/index.js",
   "types": "./dist/index.d.ts",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kruschid/refine-mantine.git"
+  },
   "scripts": {
     "build": "tsdown",
     "dev": "vite",
@@ -34,10 +38,10 @@
   "devDependencies": {
     "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
-    "@mantine/core": "^8.3.5",
-    "@mantine/form": "^8.3.5",
-    "@mantine/hooks": "^8.3.5",
-    "@mantine/notifications": "^8.3.5",
+    "@mantine/core": "^8.3.10",
+    "@mantine/form": "^8.3.10",
+    "@mantine/hooks": "^8.3.10",
+    "@mantine/notifications": "^8.3.10",
     "@refinedev/core": "^5.0.5",
     "@refinedev/react-router": "^2.0.3",
     "@refinedev/react-table": "^6.0.1",
@@ -62,7 +66,7 @@
     "react-dom": "^19.2.0",
     "react-router": "^7.9.4",
     "react-router-dom": "^7.9.4",
-    "semantic-release": "^25.0.1",
+    "semantic-release": "^25.0.2",
     "storybook": "^9.1.15",
     "tsdown": "^0.15.10",
     "typescript": "^5.9.3",
@@ -89,5 +93,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.3.1"
+  "version": "1.3.2"
 }

package/src/components/buttons/DeleteButton.tsx

@@ -93,6 +93,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
       withinPortal={false}
       withOverlay
       disabled={disabled}
+      trapFocus
       {...popoverProps}
     >
       <Popover.Target>
@@ -143,7 +144,6 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
           <Button
             color="red"
             onClick={handleConfirm}
-            autoFocus
             size="xs"
           >
             {confirmOkText ?? defaultConfirmOkLabel}

package/src/components/crud/Show.story.tsx

@@ -0,0 +1,79 @@
+import { ButtonGroup, getThemeColor, Text, Title, useMantineTheme } from "@mantine/core";
+import { useShow } from "@refinedev/core";
+import { Meta } from "@storybook/react";
+import { CloneButton } from "../buttons/CloneButton";
+import { DeleteButton } from "../buttons/DeleteButton";
+import { EditButton } from "../buttons/EditButton";
+import { RefreshButton } from "../buttons/RefreshButton";
+import { BooleanField } from "../fields/BooleanField";
+import { EmailField } from "../fields/EmailField";
+import { Show } from "./Show";
+
+interface UsersRecord {
+  id: number;
+  email: string;
+  firstName: string,
+  lastName: string;
+  skills: string[];
+  status: boolean;
+}
+
+export default {
+  title: 'Crud/Show',
+  component: Show,
+} satisfies Meta<typeof Show>;
+
+export const Default = () => {
+  const { query } = useShow<UsersRecord>({
+    resource: "users",
+    id: 1
+  });
+  const user = query.data?.data;
+
+  const theme = useMantineTheme();
+
+  return (
+    <Show
+      isLoading={query.isPending}
+      headerButtons={() =>
+        <ButtonGroup>
+          <RefreshButton />
+          <CloneButton />
+          <EditButton />
+          <DeleteButton />
+        </ButtonGroup>
+      }
+    >
+      {user && (
+        <>
+          <Title order={5}>
+            Email
+          </Title>
+          <EmailField value={user.email} />
+          <Title order={5} mt="sm">
+            First name
+          </Title>
+          <Text>{user.firstName}</Text>
+          <Title order={5} mt="sm">
+            Last name
+          </Title>
+          <Text>{user.lastName}</Text>
+          <Title order={5} mt="sm">
+            Skills
+          </Title>
+          <Title order={5} mt="sm">
+            Status
+          </Title>
+          <BooleanField
+            value={user.status}
+            trueLabel="active"
+            falseLabel="inactive"
+            falseIconProps={{color: getThemeColor("red", theme)}}
+            iconProps={{color: getThemeColor("green", theme)}}
+          />
+        </>
+      )}
+    </Show>
+  );
+}
+

package/src/components/crud/Show.tsx

@@ -1,3 +1,20 @@
+import { Breadcrumb } from "@/components/breadcrumb/Breadcrumb";
+import {
+  DeleteButton,
+  type DeleteButtonProps,
+} from "@/components/buttons/DeleteButton";
+import {
+  EditButton,
+  type EditButtonProps,
+} from "@/components/buttons/EditButton";
+import {
+  ListButton,
+  type ListButtonProps,
+} from "@/components/buttons/ListButton";
+import {
+  RefreshButton,
+  type RefreshButtonProps,
+} from "@/components/buttons/RefreshButton";
 import {
   ActionIcon,
   Box,
@@ -19,28 +36,8 @@ import {
   useTranslate,
   useUserFriendlyName,
 } from "@refinedev/core";
-import {
-  type RefineCrudShowProps,
-  RefinePageHeaderClassNames,
-} from "@refinedev/ui-types";
+import type { RefineCrudShowProps } from "@refinedev/ui-types";
 import { IconArrowLeft } from "@tabler/icons-react";
-import { Breadcrumb } from "@/components/breadcrumb/Breadcrumb";
-import {
-  DeleteButton,
-  type DeleteButtonProps,
-} from "@/components/buttons/DeleteButton";
-import {
-  EditButton,
-  type EditButtonProps,
-} from "@/components/buttons/EditButton";
-import {
-  ListButton,
-  type ListButtonProps,
-} from "@/components/buttons/ListButton";
-import {
-  RefreshButton,
-  type RefreshButtonProps,
-} from "@/components/buttons/RefreshButton";
 
 export type ShowProps = RefineCrudShowProps<
   GroupProps,
@@ -123,8 +120,6 @@ export const Show: React.FC<ShowProps> = (props) => {
   const editButtonProps: EditButtonProps | undefined = isEditButtonVisible
     ? {
         ...(isLoading ? { disabled: true } : {}),
-        color: undefined,
-        variant: "filled",
         resource: identifier,
         recordItemId: id,
       }
@@ -195,7 +190,7 @@ export const Show: React.FC<ShowProps> = (props) => {
           {breadcrumbComponent}
           <Group gap="xs">
             {buttonBack}
-            <Title order={3} className={RefinePageHeaderClassNames.Title}>
+            <Title order={3}>
               {title ??
                 translate(
                   `${identifier}.titles.show`,

package/src/components/layout/Layout.tsx

@@ -18,7 +18,7 @@ import {
   Text,
   Tooltip,
   useComputedColorScheme,
-  useMantineColorScheme,
+  useMantineColorScheme
 } from "@mantine/core";
 import { useDisclosure } from "@mantine/hooks";
 import {
@@ -62,7 +62,7 @@ export interface LayoutLocale {
 }
 
 export const Layout: React.FC<LayoutProps> = (p) => {
-  const [opened, { toggle }] = useDisclosure();
+  const [opened, { toggle, close }] = useDisclosure();
   const { title: { icon: defaultIcon, text: defaultText } = {} } =
     useRefineOptions();
   const { data: identity } = useGetIdentity();
@@ -149,6 +149,7 @@ export const Layout: React.FC<LayoutProps> = (p) => {
                 defaultOpenKeys={menu.defaultOpenKeys}
                 key={item.key}
                 selectedKey={menu.selectedKey}
+                onClickLeaf={close}
               />
             ))
           )}
@@ -189,6 +190,7 @@ const MenuItem = (p: {
   item: TreeMenuItem;
   selectedKey?: string;
   defaultOpenKeys: string[];
+  onClickLeaf: () => void;
 }) => {
   const { listUrl } = useNavigation();
   const isSelected = p.item.key === p.selectedKey;
@@ -210,6 +212,7 @@ const MenuItem = (p: {
         defaultOpened={p.defaultOpenKeys.includes(p.item.key ?? "")}
         component={Link as React.FC<{ to: string }>}
         to={listUrl(p.item.name)}
+        onClick={p.item.children.length > 0 ? undefined : p.onClickLeaf}
       >
         {p.item.children.length > 0 ? (
           p.item.children.map(child =>
@@ -218,6 +221,7 @@ const MenuItem = (p: {
               item={child}
               defaultOpenKeys={p.defaultOpenKeys}
               selectedKey={p.selectedKey}
+              onClickLeaf={p.onClickLeaf}
             />
           )
         ) : null}