refine-mantine 1.0.1 → 1.2.0

package/dist/index.d.ts

@@ -1,4 +1,4 @@
-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 { 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 { 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";
@@ -153,9 +153,11 @@ declare const ColumnSorter: <T extends object>(p: {
 //#endregion
 //#region src/components/table/Table.d.ts
 declare const Table: <TData extends BaseRecord = BaseRecord, TError extends HttpError = HttpError>({
-  props
+  props,
+  tableProps
 }: {
   props: UseTableReturnType<TData, TError>;
+  tableProps?: TableProps;
 }) => react_jsx_runtime0.JSX.Element;
 //#endregion
 //#region src/components/notification/AutoSaveIndicator.d.ts

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,6 +126,10 @@ 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, {
@@ -183,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
@@ -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)
@@ -1058,19 +1077,25 @@ const ColumnSorter = (p) => {
 
 //#endregion
 //#region src/components/table/Table.tsx
-const Table = ({ props }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Table$1.ScrollContainer, {
+const Table = ({ props, tableProps }) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(Table$1.ScrollContainer, {
 	minWidth: 500,
 	children: /* @__PURE__ */ jsxs(Table$1, {
 		highlightOnHover: true,
-		children: [/* @__PURE__ */ jsx(Table$1.Thead, { children: props.reactTable.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table$1.Tr, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(Table$1.Th, { children: !header.isPlaceholder && /* @__PURE__ */ jsxs(Group, {
-			gap: "xs",
-			wrap: "nowrap",
-			children: [/* @__PURE__ */ jsx(Box, { children: flexRender(header.column.columnDef.header, header.getContext()) }), /* @__PURE__ */ jsxs(Group, {
+		...tableProps,
+		children: [/* @__PURE__ */ jsx(Table$1.Thead, { children: props.reactTable.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx(Table$1.Tr, { children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx(Table$1.Th, {
+			colSpan: header.colSpan,
+			rowSpan: header.rowSpan,
+			style: { width: header.getSize() },
+			children: !header.isPlaceholder && /* @__PURE__ */ jsxs(Group, {
 				gap: "xs",
 				wrap: "nowrap",
-				children: [/* @__PURE__ */ jsx(ColumnSorter, { column: header.column }), /* @__PURE__ */ jsx(ColumnFilter, { column: header.column })]
-			})]
-		}) }, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(Table$1.Tbody, { children: props.reactTable.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(Table$1.Tr, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table$1.Td, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })]
+				children: [/* @__PURE__ */ jsx(Box, { children: flexRender(header.column.columnDef.header, header.getContext()) }), /* @__PURE__ */ jsxs(Group, {
+					gap: "xs",
+					wrap: "nowrap",
+					children: [/* @__PURE__ */ jsx(ColumnSorter, { column: header.column }), /* @__PURE__ */ jsx(ColumnFilter, { column: header.column })]
+				})]
+			})
+		}, header.id)) }, headerGroup.id)) }), /* @__PURE__ */ jsx(Table$1.Tbody, { children: props.reactTable.getRowModel().rows.map((row) => /* @__PURE__ */ jsx(Table$1.Tr, { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(Table$1.Td, { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id)) })]
 	})
 }), /* @__PURE__ */ jsx(Group, {
 	justify: "flex-end",

package/package.json

@@ -87,5 +87,5 @@
   "dependencies": {
     "@refinedev/ui-types": "^2.0.1"
   },
-  "version": "1.0.1"
+  "version": "1.2.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;
@@ -136,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/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/components/table/Table.story.tsx

@@ -49,7 +49,6 @@ export const Default = () => {
     onChange: (value: string | null) => void;
   }) => (
     <Select
-      label="Category"
       data={categories.options}
       value={p.value ?? null}
       onChange={p.onChange}

package/src/components/table/Table.tsx

@@ -1,4 +1,4 @@
-import { Box, Group, Table as MantineTable, Pagination } from "@mantine/core";
+import { Box, Group, Table as MantineTable, Pagination, TableProps } from "@mantine/core";
 import type { BaseRecord, HttpError } from "@refinedev/core";
 import type { UseTableReturnType } from "@refinedev/react-table";
 import { flexRender } from "@tanstack/react-table";
@@ -10,17 +10,24 @@ export const Table = <
   TError extends HttpError = HttpError,
 >({
   props,
+  tableProps,
 }: {
   props: UseTableReturnType<TData, TError>;
+  tableProps?: TableProps;
 }) => (
   <>
     <MantineTable.ScrollContainer minWidth={500}>
-      <MantineTable highlightOnHover>
+      <MantineTable highlightOnHover {...tableProps}>
         <MantineTable.Thead>
           {props.reactTable.getHeaderGroups().map((headerGroup) => (
             <MantineTable.Tr key={headerGroup.id}>
               {headerGroup.headers.map((header) => (
-                <MantineTable.Th key={header.id}>
+                <MantineTable.Th
+                  key={header.id}
+                  colSpan={header.colSpan}
+                  rowSpan={header.rowSpan}
+                  style={{width: header.getSize()}}
+                >
                   {!header.isPlaceholder && (
                     <Group gap="xs" wrap="nowrap">
                       <Box>

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;
+}