refine-mantine 1.3.0 → 1.3.2

package/dist/index.d.ts

@@ -1,10 +1,12 @@
-import { ActionIconProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PopoverProps, ScrollAreaProps, StackProps, TableProps, TextInputProps } from "@mantine/core";
+import { ActionIconProps, AnchorProps, AppShellFooterProps, AppShellHeaderProps, AppShellMainProps, AppShellNavbarConfiguration, AppShellNavbarProps, AppShellProps, AppShellSectionProps, BadgeProps, BoxProps, BreadcrumbsProps, ButtonProps, CardProps, GroupProps, LoadingOverlayProps, MenuItemProps, NotificationProps, PinInputProps, PolymorphicComponentProps, PopoverProps, ScrollAreaProps, StackProps, TableProps, TextInputProps, TextProps } 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 { IconProps, ReactNode } from "@tabler/icons-react";
 import * as react_jsx_runtime0 from "react/jsx-runtime";
-import React$1, { ReactNode } from "react";
+import React$1, { ReactNode as ReactNode$1 } from "react";
 import { RefineBreadcrumbProps, RefineCreateButtonProps, RefineCrudCreateProps, RefineCrudEditProps, RefineCrudListProps, RefineCrudShowProps, RefineDeleteButtonProps, RefineEditButtonProps, RefineListButtonProps, RefineRefreshButtonProps, RefineSaveButtonProps, RefineShowButtonProps } from "@refinedev/ui-types";
+import { ConfigType } from "dayjs";
 import { FormValidateInput, UseFormInput, UseFormReturnType as UseFormReturnType$2 } from "@mantine/form";
+import { TooltipBaseProps } from "@mantine/core/lib/components/Tooltip/Tooltip.types";
 import { Column } from "@tanstack/table-core";
 import { UseTableReturnType } from "@refinedev/react-table";
 
@@ -102,9 +104,51 @@ declare const List: React$1.FC<ListProps>;
 type ShowProps = RefineCrudShowProps<GroupProps, GroupProps, CardProps, GroupProps, BoxProps, {}, EditButtonProps, DeleteButtonProps, RefreshButtonProps, ListButtonProps>;
 declare const Show: React.FC<ShowProps>;
 //#endregion
+//#region src/components/fields/BooleanField.d.ts
+interface BooleanFieldProps {
+  value: boolean;
+  trueLabel?: string;
+  falseLabel?: string;
+  trueIcon?: ReactNode;
+  falseIcon?: ReactNode;
+  trueIconProps?: IconProps;
+  falseIconProps?: IconProps;
+  tootlipProps?: TooltipBaseProps;
+}
+declare const BooleanField: React.FC<BooleanFieldProps>;
+//#endregion
+//#region src/components/fields/DateField.d.ts
+interface DateFieldProps {
+  value: ConfigType;
+  locale?: string;
+  format?: string;
+  textProps?: TextProps;
+}
+declare const DateField: React.FC<DateFieldProps>;
+//#endregion
+//#region src/components/fields/UrlField.d.ts
+interface UrlFieldProps {
+  value: string;
+  children?: ReactNode;
+  anchorProps?: PolymorphicComponentProps<"a", AnchorProps>;
+  textProps?: TextProps;
+  iconProps?: IconProps;
+  icon?: React.FC<IconProps>;
+}
+declare const UrlField: React.FC<UrlFieldProps>;
+//#endregion
+//#region src/components/fields/EmailField.d.ts
+declare const EmailField: React.FC<UrlFieldProps>;
+//#endregion
+//#region src/components/fields/FileField.d.ts
+declare const FileField: React.FC<UrlFieldProps>;
+//#endregion
+//#region src/components/fields/PhoneField.d.ts
+declare const PhoneField: React.FC<UrlFieldProps>;
+//#endregion
 //#region src/components/layout/Layout.d.ts
 interface LayoutProps {
-  children: ReactNode;
+  children: ReactNode$1;
   shellProps?: AppShellProps;
   headerProps?: AppShellHeaderProps;
   navbarProps?: AppShellNavbarProps;
@@ -113,17 +157,17 @@ interface LayoutProps {
   navbarFooterProps?: AppShellSectionProps;
   mainProps?: AppShellMainProps;
   hideNavbar?: boolean;
-  footer?: ReactNode;
+  footer?: ReactNode$1;
   footerProps?: AppShellFooterProps;
   locales?: LayoutLocale[];
-  renderHeader?: (toggle: () => void) => ReactNode;
-  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode;
-  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode;
+  renderHeader?: (toggle: () => void) => ReactNode$1;
+  renderMenu?: (params: ReturnType<typeof useMenu>) => ReactNode$1;
+  renderIdentity?: <T extends BaseRecord>(identity: T, logout: () => void) => ReactNode$1;
 }
 interface LayoutLocale {
   lang: string;
   label: string;
-  icon?: ReactNode;
+  icon?: ReactNode$1;
 }
 declare const Layout: React.FC<LayoutProps>;
 //#endregion
@@ -235,8 +279,8 @@ type LoginPageProps = {
   otpInputProps?: PinInputProps;
   submitButtonProps?: ButtonProps;
   cancelButtonProps?: ButtonProps;
-  icon?: ReactNode;
-  title?: ReactNode;
+  icon?: ReactNode$1;
+  title?: ReactNode$1;
   otpHandler?: OtpHandler;
 } & ({
   method: "oauth";
@@ -266,8 +310,8 @@ interface RegisterPageProps {
   otpInputProps?: PinInputProps;
   submitButtonProps?: ButtonProps;
   cancelButtonProps?: ButtonProps;
-  icon?: ReactNode;
-  title?: ReactNode;
+  icon?: ReactNode$1;
+  title?: ReactNode$1;
 }
 interface RegisterForm {
   email: string;
@@ -282,4 +326,4 @@ declare const authProvider: AuthProvider;
 //#region src/providers/notificationProvider.d.ts
 declare const notificationProvider: () => NotificationProvider;
 //#endregion
-export { AutoSaveIndicator, AutoSaveIndicatorProps, Breadcrumb, BreadcrumbProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, Layout, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, OAuthProviderMantine, OtpHandler, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, AutoSaveIndicatorProps, BooleanField, BooleanFieldProps, Breadcrumb, BreadcrumbProps, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, CreateButtonProps, CreateProps, DateField, DateFieldProps, DeleteButton, DeleteButtonProps, Edit, EditButton, EditButtonProps, EditProps, EmailField, FileField, Layout, LayoutLocale, List, ListButton, ListButtonProps, ListProps, LoginArgs, LoginPage, LoginPageProps, Message, MessageProps, OAuthProviderMantine, OtpHandler, PhoneField, RefreshButton, RefreshButtonProps, RegisterForm, RegisterPage, RegisterPageProps, SaveButton, SaveButtonProps, Show, ShowButton, ShowButtonProps, ShowProps, Table, TranslateFn, UrlField, UrlFieldProps, UseFormProps, UseFormReturnType, authProvider, notificationProvider, useForm, useOtp };

package/dist/index.js

@@ -1,10 +1,12 @@
 import { ActionIcon, Anchor, AppShell, Avatar, Badge, Box, Breadcrumbs, Burger, Button, Card, Center, Collapse, Divider, Group, Input, Loader, LoadingOverlay, Menu, NavLink, Notification, Pagination, PinInput, Popover, RingProgress, ScrollArea, Stack, Table as Table$1, Text, TextInput, Title, Tooltip, useComputedColorScheme, useMantineColorScheme } from "@mantine/core";
 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 { IconArrowBackUp, IconArrowLeft, IconAt, IconCheck, IconChevronUp, IconCircleCheck, IconCircleCheckFilled, IconCircleXFilled, IconDeviceFloppy, IconDots, IconExclamationCircle, IconExternalLink, IconEye, IconFileDownloadFilled, IconFilter, IconHome, IconLanguage, IconList, IconLockPassword, IconLogout, IconMailShare, IconMoon, IconPencil, IconPhoneOutgoing, IconRefresh, IconSelector, IconSquarePlus, IconSun, IconTrash, IconX } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { useDebouncedCallback, useDisclosure } from "@mantine/hooks";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
+import dayjs from "dayjs";
+import LocalizedFormat from "dayjs/plugin/localizedFormat";
 import { flexRender } from "@tanstack/react-table";
 import { isEmail, isNotEmpty, useForm as useForm$2 } from "@mantine/form";
 import { hideNotification, showNotification, updateNotification } from "@mantine/notifications";
@@ -139,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",
@@ -188,7 +191,6 @@ const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, child
 				}), /* @__PURE__ */ jsx(Button, {
 					color: "red",
 					onClick: handleConfirm,
-					autoFocus: true,
 					size: "xs",
 					children: confirmOkText ?? defaultConfirmOkLabel
 				})]
@@ -718,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;
@@ -773,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")}`)
 						})]
 					})]
@@ -796,10 +795,88 @@ const Show = (props) => {
 	});
 };
 
+//#endregion
+//#region src/components/fields/BooleanField.tsx
+const BooleanField = ({ value, trueLabel = "true", falseLabel = "false", trueIcon, falseIcon, trueIconProps, falseIconProps, tootlipProps }) => /* @__PURE__ */ jsx(Tooltip, {
+	label: value ? trueLabel : falseLabel,
+	...tootlipProps,
+	children: /* @__PURE__ */ jsx("span", { children: value ? trueIcon ?? /* @__PURE__ */ jsx(IconCircleCheckFilled, {
+		size: 18,
+		...trueIconProps
+	}) : falseIcon ?? /* @__PURE__ */ jsx(IconCircleXFilled, {
+		size: 18,
+		...falseIconProps
+	}) })
+});
+
+//#endregion
+//#region src/components/fields/DateField.tsx
+dayjs.extend(LocalizedFormat);
+const defaultLocale = dayjs.locale();
+const DateField = ({ value, locale, format: dateFormat = "L", textProps }) => /* @__PURE__ */ jsx(Text, {
+	...textProps,
+	children: value ? dayjs(value).locale(locale ?? defaultLocale).format(dateFormat) : ""
+});
+
+//#endregion
+//#region src/components/fields/UrlField.tsx
+const UrlField = ({ children, value, anchorProps, textProps, icon, iconProps }) => {
+	const Icon = icon ?? IconExternalLink;
+	return /* @__PURE__ */ jsxs(Anchor, {
+		href: value,
+		style: {
+			display: "inline-flex",
+			alignItems: "center"
+		},
+		...anchorProps,
+		children: [/* @__PURE__ */ jsx(Text, {
+			...textProps,
+			children: children ?? value
+		}), /* @__PURE__ */ jsx(Icon, {
+			size: textProps?.size === "xs" ? 12 : textProps?.size === "sm" ? 14 : textProps?.size === "md" ? 16 : textProps?.size === "lg" ? 18 : textProps?.size === "xl" ? 20 : 16,
+			style: {
+				marginLeft: 4,
+				flexShrink: 0
+			},
+			"aria-hidden": true,
+			...iconProps
+		})]
+	});
+};
+
+//#endregion
+//#region src/components/fields/EmailField.tsx
+const EmailField = (props) => /* @__PURE__ */ jsx(UrlField, {
+	icon: IconMailShare,
+	...props,
+	anchorProps: {
+		href: `mailto:${props.value}`,
+		...props.anchorProps
+	}
+});
+
+//#endregion
+//#region src/components/fields/FileField.tsx
+const FileField = (props) => /* @__PURE__ */ jsx(UrlField, {
+	icon: IconFileDownloadFilled,
+	...props
+});
+
+//#endregion
+//#region src/components/fields/PhoneField.tsx
+const PhoneField = (props) => /* @__PURE__ */ jsx(UrlField, {
+	icon: IconPhoneOutgoing,
+	...props,
+	anchorProps: {
+		href: `tel:${props.value}`,
+		...props.anchorProps
+	}
+});
+
 //#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();
@@ -867,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,
@@ -907,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);
@@ -1650,4 +1730,4 @@ const notificationProvider = () => {
 };
 
 //#endregion
-export { AutoSaveIndicator, Breadcrumb, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DeleteButton, Edit, EditButton, Layout, List, ListButton, LoginPage, Message, RefreshButton, RegisterPage, SaveButton, Show, ShowButton, Table, notificationProvider, useForm, useOtp };
+export { AutoSaveIndicator, BooleanField, Breadcrumb, ColorSchemeToggle, ColumnFilter, ColumnSorter, Create, CreateButton, DateField, DeleteButton, Edit, EditButton, EmailField, FileField, Layout, List, ListButton, LoginPage, Message, PhoneField, RefreshButton, RegisterPage, SaveButton, Show, ShowButton, Table, UrlField, notificationProvider, useForm, useOtp };

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.0"
+  "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}

package/src/index.ts

@@ -13,6 +13,13 @@ export * from "@/components/crud/Create";
 export * from "@/components/crud/Edit";
 export * from "@/components/crud/List";
 export * from "@/components/crud/Show";
+// fields
+export * from "@/components/fields/BooleanField";
+export * from "@/components/fields/DateField";
+export * from "@/components/fields/EmailField";
+export * from "@/components/fields/FileField";
+export * from "@/components/fields/PhoneField";
+export * from "@/components/fields/UrlField";
 // layout
 export * from "@/components/layout/Layout";
 // notification