refine-mantine 1.0.0 → 1.1.0

package/README.md

@@ -5,6 +5,12 @@
 This project provides ready-to-use [Mantine v8](https://mantine.dev/) UI components and utilities built for [Refine v5](https://refine.dev/) applications.
 It aims to accelerate development by offering a collection of prebuilt components such as layouts, CRUD views, tables, buttons, and authentication screens, following both Refine and Mantine best practices.
 
+### Setup
+
+``` sh
+npm i refine-mantine
+```
+
 ### Features
 
 * Prebuilt UI components for rapid Refine project development

package/dist/index.js

@@ -2,7 +2,7 @@ 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 { useCallback, useEffect, useRef, useState } from "react";
 import { useDebouncedCallback, useDisclosure } from "@mantine/hooks";
 import { RefinePageHeaderClassNames } from "@refinedev/ui-types";
 import { flexRender } from "@tanstack/react-table";
@@ -126,13 +126,18 @@ const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, child
 		onSuccess
 	});
 	const [opened, handlers] = useDisclosure(false);
+	const handleConfirm = useCallback(() => {
+		onConfirm();
+		handlers.close();
+	}, [onConfirm, handlers]);
 	if (hidden) return null;
 	const disabled = disabledFromProps || disabledFromHook;
 	return /* @__PURE__ */ jsxs(Popover, {
 		opened,
 		onChange: handlers.toggle,
 		withArrow: true,
-		withinPortal: true,
+		withinPortal: false,
+		withOverlay: true,
 		disabled,
 		...popoverProps,
 		children: [/* @__PURE__ */ jsx(Popover.Target, { children: hideText ? /* @__PURE__ */ jsx(ActionIcon, {
@@ -182,10 +187,7 @@ const DeleteButton = ({ resource, recordItemId, mutationMode, invalidates, child
 					children: confirmCancelText ?? defaultCancelLabel
 				}), /* @__PURE__ */ jsx(Button, {
 					color: "red",
-					onClick: () => {
-						onConfirm();
-						handlers.close();
-					},
+					onClick: handleConfirm,
 					autoFocus: true,
 					size: "xs",
 					children: confirmOkText ?? defaultConfirmOkLabel
@@ -654,7 +656,6 @@ const List = (props) => {
 	const isCreateButtonVisible = canCreate ?? (!!resource?.create || createButtonPropsFromProps);
 	const breadcrumb = typeof breadcrumbFromProps === "undefined" ? globalBreadcrumb : breadcrumbFromProps;
 	const createButtonProps = isCreateButtonVisible ? {
-		size: "sm",
 		resource: identifier,
 		...createButtonPropsFromProps
 	} : void 0;
@@ -968,6 +969,22 @@ const Message = ({ message, description, undoLabel, undoableTime = 5, undoableTi
 	})
 });
 
+//#endregion
+//#region src/hooks/useEnter.ts
+const useEnter = (handler) => {
+	const ref = useRef(null);
+	useEffect(() => {
+		const el = ref?.current;
+		if (!el) return;
+		const onKeyDown = (event) => {
+			if (event.key === "Enter") handler();
+		};
+		el.addEventListener("keydown", onKeyDown);
+		return () => el.removeEventListener("keydown", onKeyDown);
+	}, [ref, handler]);
+	return ref;
+};
+
 //#endregion
 //#region src/components/table/ColumnFilter.tsx
 const ColumnFilter = (p) => {
@@ -993,6 +1010,7 @@ const ColumnFilter = (p) => {
 		p.column.setFilterValue(filterOperator === "ina" ? [state.value] : state.value);
 		close();
 	};
+	const confirmRef = useEnter(save);
 	return /* @__PURE__ */ jsxs(Menu, {
 		opened: !!state,
 		position: "bottom",
@@ -1014,6 +1032,7 @@ const ColumnFilter = (p) => {
 				value: state?.value,
 				onChange: handleChange
 			}) : /* @__PURE__ */ jsx(TextInput, {
+				ref: confirmRef,
 				autoComplete: "off",
 				value: state.value,
 				onChange: (e) => handleChange(e.target.value)

package/package.json

@@ -87,5 +87,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.0.0"
+  "version": "1.1.0"
 }

package/src/components/buttons/DeleteButton.tsx

@@ -15,6 +15,7 @@ import { useDeleteButton } from "@refinedev/core";
 import type { RefineDeleteButtonProps } from "@refinedev/ui-types";
 import { type IconProps, IconTrash } from "@tabler/icons-react";
 import type React from "react";
+import { useCallback } from "react";
 
 export type DeleteButtonProps = RefineDeleteButtonProps<{
   iconProps?: IconProps;
@@ -75,6 +76,11 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
 
   const [opened, handlers] = useDisclosure(false);
 
+  const handleConfirm = useCallback(() => {
+    onConfirm();
+    handlers.close();
+  }, [onConfirm, handlers]);
+
   if (hidden) return null;
 
   const disabled = disabledFromProps || disabledFromHook;
@@ -84,7 +90,8 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
       opened={opened}
       onChange={handlers.toggle}
       withArrow
-      withinPortal
+      withinPortal={false}
+      withOverlay
       disabled={disabled}
       {...popoverProps}
     >
@@ -135,10 +142,7 @@ export const DeleteButton: React.FC<DeleteButtonProps> = ({
           </Button>
           <Button
             color="red"
-            onClick={() => {
-              onConfirm();
-              handlers.close();
-            }}
+            onClick={handleConfirm}
             autoFocus
             size="xs"
           >

package/src/components/crud/List.tsx

@@ -58,7 +58,6 @@ export const List: React.FC<ListProps> = (props) => {
 
   const createButtonProps: CreateButtonProps | undefined = isCreateButtonVisible
     ? ({
-        size: "sm",
         resource: identifier,
         ...createButtonPropsFromProps,
       } as const)

package/src/components/table/ColumnFilter.tsx

@@ -1,3 +1,4 @@
+import { useEnter } from "@/hooks/useEnter";
 import { ActionIcon, Group, Menu, Stack, TextInput } from "@mantine/core";
 import type { CrudOperators } from "@refinedev/core";
 import { IconCheck, IconFilter, IconX } from "@tabler/icons-react";
@@ -54,6 +55,8 @@ export const ColumnFilter = <T extends object>(p: { column: Column<T> }) => {
     close();
   };
 
+  const confirmRef = useEnter<HTMLInputElement>(save);
+
   return (
     <Menu
       opened={!!state}
@@ -81,6 +84,7 @@ export const ColumnFilter = <T extends object>(p: { column: Column<T> }) => {
               <FilterComponent value={state?.value} onChange={handleChange} />
             ) : (
               <TextInput
+                ref={confirmRef}
                 autoComplete="off"
                 value={state.value}
                 onChange={(e) => handleChange(e.target.value)}

package/src/hooks/useEnter.ts

@@ -0,0 +1,20 @@
+import { useEffect, useRef } from 'react';
+
+export const useEnter = <T extends HTMLElement>(handler: () => void) => {
+  const ref = useRef<T>(null);
+
+  useEffect(() => {
+    const el = ref?.current;
+    if (!el) return;
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Enter') handler();
+    };
+
+    el.addEventListener('keydown', onKeyDown);
+
+    return () => el.removeEventListener('keydown', onKeyDown);
+  }, [ref, handler]);
+
+  return ref;
+}