@compill/admin 1.0.52 → 1.0.54

package/index.cjs.js

@@ -20,6 +20,7 @@ var admin = require('@compill/admin');
 var reactDom = require('react-dom');
 var table = require('@compill/table');
 var hooks = require('@compill/hooks');
+var router = require('next/router');
 var reactQuery = require('@tanstack/react-query');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -192,6 +193,29 @@ function ButtonBarButton(_a) {
     dflex: true,
     alignItems: "center",
     placeContent: "center",
+    corners: "square",
+    gap: "2"
+  }, props, {
+    children: [icon && jsxRuntime.jsx(ui.Icon, {
+      path: icon
+    }), children]
+  }));
+}
+function ButtonBarDialogButton(_a) {
+  var {
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "children"]);
+  return jsxRuntime.jsxs(DialogButton, Object.assign({
+    scheme: "dark",
+    size: "sm",
+    aspectRatio: icon && !children ? "square" : undefined,
+    variant: "borderless",
+    dflex: true,
+    alignItems: "center",
+    placeContent: "center",
+    corners: "square",
     gap: "2"
   }, props, {
     children: [icon && jsxRuntime.jsx(ui.Icon, {
@@ -1421,15 +1445,10 @@ function TableCreateButton(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["children"]);
-  return jsxRuntime.jsx(DialogButton, Object.assign({
-    scheme: "dark",
-    size: "sm",
-    aspectRatio: "square",
-    variant: "borderless"
-  }, props, {
-    children: children !== null && children !== void 0 ? children : jsxRuntime.jsx(ui.Icon, {
+  return jsxRuntime.jsxs(admin.ButtonBarDialogButton, Object.assign({}, props, {
+    children: [jsxRuntime.jsx(ui.Icon, {
       path: mdiPlusThick
-    })
+    }), children]
   }));
 }
 
@@ -2200,11 +2219,13 @@ function ItemDeleteDialog(_a) {
       invalidateQueriesOnSuccess = true,
       invalidateQueryKey,
       size = "lg",
+      md_boxSizing,
+      msg,
       show,
       onClose
     } = _a,
-    props = __rest$1(_a, ["itemLabel", "queryId", "api", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "show", "onClose"]);
-  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(api$1.delete, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey) : api.useApiMutation(api$1.upsert, api$1.queryKey);
+    props = __rest$1(_a, ["itemLabel", "queryId", "api", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "md_boxSizing", "msg", "show", "onClose"]);
+  const mutation = invalidateQueriesOnSuccess ? api.useInvalidateParentMutation(api$1.delete, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api$1.queryKey) : api.useApiMutation(api$1.delete, api$1.queryKey);
   const mutate = api.useMutate(mutation, {
     onSuccess: () => onClose === null || onClose === void 0 ? void 0 : onClose()
   });
@@ -2221,7 +2242,7 @@ function ItemDeleteDialog(_a) {
       children: `Delete ${itemLabel}`
     }), jsxRuntime.jsxs(ui.Modal.Body, {
       pb: "6",
-      children: ["Do you really want to delete ", itemLabel, "?"]
+      children: [!msg && `Do you really want to delete ${itemLabel}?`, msg && react.runIfFn(msg, itemLabel)]
     }), jsxRuntime.jsxs(ui.Modal.Footer, {
       dflex: true,
       placeContent: "end",
@@ -2268,15 +2289,16 @@ function TableViewProvider({
         }
       case "edit":
         {
-          if (editView.type == "customDialog") {
-            setDialog(editView.render({
+          const editConfig = react.runIfFn(editView, item);
+          if (editConfig.type == "customDialog") {
+            setDialog(editConfig.render({
               show: true,
               onClose: onCloseDialog
             }));
           } else {
             setDialog(jsxRuntime.jsx(DialogRenderer, {
               onClose: onCloseDialog,
-              config: editView,
+              config: editConfig,
               queryId: item.id,
               invalidateQueryKey: queryKey
             }));
@@ -2285,13 +2307,15 @@ function TableViewProvider({
         }
       case "delete":
         {
+          const deleteConfig = react.runIfFn(deleteItem, item);
           setDialog(jsxRuntime.jsx(ItemDeleteDialog, Object.assign({
             show: true,
             onClose: onCloseDialog,
             queryId: item.id,
-            invalidateQueryKey: queryKey
-          }, deleteItem, {
-            itemLabel: react.runIfFn(deleteItem.itemLabel, item)
+            invalidateQueryKey: queryKey,
+            msg: item.msg
+          }, deleteConfig, {
+            itemLabel: react.runIfFn(deleteConfig.itemLabel, item)
           })));
           // TODO
           // const { initialValues, ...props } = editItem!!
@@ -2416,6 +2440,7 @@ function TableRowActionsView({
   api,
   queryKey
 }) {
+  var _a;
   const item = row.original;
   return jsxRuntime.jsx("div", {
     dflex: true,
@@ -2423,7 +2448,7 @@ function TableRowActionsView({
     alignItems: "stretch",
     placeContent: "end",
     h: "full",
-    children: rowActions === null || rowActions === void 0 ? void 0 : rowActions.map((action, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
+    children: (_a = react.runIfFn(rowActions, item)) === null || _a === void 0 ? void 0 : _a.map((action, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [action.type === "publish" && jsxRuntime.jsx(TableRowPublishPostButton$1, {
         id: item.id,
         api: api,
@@ -2452,16 +2477,7 @@ function ActionButton(_a) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [onClick]);
-  return jsxRuntime.jsx(ui.Button, Object.assign({
-    dflex: true,
-    alignContent: "center",
-    placeContent: "center",
-    py: "2.5",
-    px: "3",
-    h: "full",
-    size: "lg",
-    variant: "borderless",
-    corners: "default",
+  return jsxRuntime.jsx(admin.TableRowActionButton, Object.assign({
     onClick: handleClick
   }, props));
 }
@@ -2484,6 +2500,7 @@ const schemes$1 = {
 
 function useTableProps(api, table, rowActions) {
   const navigate = reactRouterDom.useNavigate();
+  const nextRouter = router.useRouter();
   const openLink = hooks.useOpenLink();
   const {
     onAction
@@ -2494,7 +2511,7 @@ function useTableProps(api, table, rowActions) {
     } = table,
     props = __rest$1(table, ["onRowClick", "columns"]);
   const onRowClickHandler = React__default["default"].useCallback(item => {
-    if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) === "navigate") navigate(react.runIfFn(onRowClick.path, item));else if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) == "link") openLink(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${react.runIfFn(onRowClick.path, item)}`);
+    if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) === "navigate") navigate(react.runIfFn(onRowClick.path, item));else if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) == "nextpush") nextRouter.push(react.runIfFn(onRowClick.path, item));else if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) == "link") openLink(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${react.runIfFn(onRowClick.path, item)}`);
   }, [navigate, onRowClick]);
   const columns = React__default["default"].useMemo(() => {
     const columns = table.columns.concat([]);
@@ -2619,23 +2636,27 @@ function TableButtonBar({
   api,
   children
 }) {
-  const createDialog = React__default["default"].useCallback(onClose => {
-    const view = createView !== null && createView !== void 0 ? createView : editView;
-    if (view.type == "customDialog") return view.render({
-      show: true,
-      onClose
-    });else return jsxRuntime.jsx(DialogRenderer, {
-      config: view,
-      onClose: onClose,
-      invalidateQueryKey: api.queryKey
-    });
-  }, [editView, api]);
+  const createDialogFn = React__default["default"].useCallback(data => {
+    return onClose => {
+      var _a;
+      const view = (_a = react.runIfFn(createView, data)) !== null && _a !== void 0 ? _a : react.runIfFn(editView, null);
+      if (view.type == "customDialog") return view.render({
+        show: true,
+        onClose
+      });else return jsxRuntime.jsx(DialogRenderer, {
+        config: view,
+        onClose: onClose,
+        invalidateQueryKey: api.queryKey
+      });
+    };
+  }, [createView, editView, api]);
   return jsxRuntime.jsxs(ButtonBar, {
     children: [jsxRuntime.jsx(RefreshButton, {
       queryKey: queryKey
     }), buttonBar && buttonBar.map((button, index) => jsxRuntime.jsxs(React__default["default"].Fragment, {
       children: [button.type === "create" && editView && jsxRuntime.jsx(TableCreateButton, {
-        buildDialog: createDialog
+        buildDialog: createDialogFn(button.data),
+        children: button.label
       }), button.type === "invalidate" && jsxRuntime.jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type === "custom" && button.render()]
@@ -2976,7 +2997,7 @@ function LeftPanel({
   const [isOpen, __, toggle] = hooks.useBoolean(true);
   useHotkeys('ctrl+t', () => toggle(), [toggle]);
   return jsxRuntime.jsxs("div", {
-    ms: isOpen ? "0" : "-64",
+    ms: isOpen ? "0" : "-14.5rem",
     transition: "all",
     duration: "500",
     transform: true,
@@ -3483,6 +3504,31 @@ function StatusBadge(_a) {
   }));
 }
 
+function TableRowActionButton(_a) {
+  var {
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "children"]);
+  return jsxRuntime.jsxs(ui.Button, Object.assign({
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "3",
+    h: "full",
+    size: "lg",
+    variant: "borderless",
+    corners: "square",
+    gap: "2"
+  }, props, {
+    children: [icon && jsxRuntime.jsx(ui.Icon, {
+      path: icon,
+      size: "sm"
+    }), children]
+  }));
+}
+
 function TableRowViewButton(_a) {
   var {
       path
@@ -3493,18 +3539,10 @@ function TableRowViewButton(_a) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     window.open(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${path}`, '_blank');
   }, [path]);
-  return jsxRuntime.jsx(ui.Button, Object.assign({
-    w: "10",
-    h: "10",
-    variant: "borderless",
-    corners: "pill",
-    scheme: "dark",
+  return jsxRuntime.jsx(TableRowActionButton, Object.assign({
+    icon: mdiOpenInNew,
     onClick: openPage
-  }, props, {
-    children: jsxRuntime.jsx(ui.Icon, {
-      path: mdiOpenInNew
-    })
-  }));
+  }, props));
 }
 
 function TableRowNavigateButton(_a) {
@@ -3518,15 +3556,34 @@ function TableRowNavigateButton(_a) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     navigate(`${path}`);
   }, [navigate, path]);
-  return jsxRuntime.jsx(ui.Button, Object.assign({
-    scheme: "dark",
+  return jsxRuntime.jsx(TableRowActionButton, Object.assign({
+    icon: mdiEye,
+    onClick: handleClick
+  }, props));
+}
+
+function TableRowActionDialogButton(_a) {
+  var {
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "children"]);
+  return jsxRuntime.jsxs(admin.DialogButton, Object.assign({
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "3",
+    h: "full",
+    size: "lg",
     variant: "borderless",
     corners: "square",
-    onClick: handleClick
+    gap: "2"
   }, props, {
-    children: jsxRuntime.jsx(ui.Icon, {
-      path: mdiEye
-    })
+    children: [icon && jsxRuntime.jsx(ui.Icon, {
+      path: icon,
+      size: "sm"
+    }), children]
   }));
 }
 
@@ -3535,16 +3592,10 @@ function TableRowEditButton(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["children"]);
-  return jsxRuntime.jsx(DialogButton, Object.assign({
-    w: "10",
-    h: "10",
-    variant: "borderless",
-    corners: "pill",
-    scheme: "warning"
+  return jsxRuntime.jsx(TableRowActionDialogButton, Object.assign({
+    icon: mdiPencil
   }, props, {
-    children: children !== null && children !== void 0 ? children : jsxRuntime.jsx(ui.Icon, {
-      path: mdiPencil
-    })
+    children: children
   }));
 }
 
@@ -3553,16 +3604,10 @@ function TableRowDeleteButton(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["children"]);
-  return jsxRuntime.jsx(DialogButton, Object.assign({
-    w: "10",
-    h: "10",
-    scheme: "danger",
-    variant: "borderless",
-    corners: "pill"
+  return jsxRuntime.jsx(TableRowActionDialogButton, Object.assign({
+    icon: mdiDelete
   }, props, {
-    children: children !== null && children !== void 0 ? children : jsxRuntime.jsx(ui.Icon, {
-      path: mdiDelete
-    })
+    children: children
   }));
 }
 
@@ -3611,18 +3656,10 @@ function TableRowPublishPostButton(_a) {
     mutation.reset();
     mutation.mutateAsync(id).then(() => reactToastify.toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => reactToastify.toast.error(`Error: ${error}`));
   }, [mutation, id]);
-  return jsxRuntime.jsx(ui.Button, Object.assign({
-    w: "10",
-    h: "10",
-    variant: "borderless",
-    corners: "pill",
-    scheme: "default",
+  return jsxRuntime.jsx(TableRowActionButton, Object.assign({
+    icon: isDraft ? mdiPublish : mdiPublishOff,
     onClick: publish
-  }, props, {
-    children: jsxRuntime.jsx(ui.Icon, {
-      path: isDraft ? mdiPublish : mdiPublishOff
-    })
-  }));
+  }, props));
 }
 
 exports.AdminLayout = AdminLayout;
@@ -3630,6 +3667,7 @@ exports.AttachDialog = AttachDialog;
 exports.Breadcrumbs = Breadcrumbs;
 exports.ButtonBar = ButtonBar;
 exports.ButtonBarButton = ButtonBarButton;
+exports.ButtonBarDialogButton = ButtonBarDialogButton;
 exports.DialogButton = DialogButton;
 exports.FormActionDialog = FormActionDialog;
 exports.InvalidateButton = InvalidateButton;
@@ -3658,6 +3696,8 @@ exports.TableContainer = TableContainer;
 exports.TableCreateButton = TableCreateButton;
 exports.TableFilterButton = TableFilterButton;
 exports.TableRowActionBar = TableRowActionBar;
+exports.TableRowActionButton = TableRowActionButton;
+exports.TableRowActionDialogButton = TableRowActionDialogButton;
 exports.TableRowDeleteButton = TableRowDeleteButton;
 exports.TableRowEditButton = TableRowEditButton;
 exports.TableRowNavigateButton = TableRowNavigateButton;

package/index.esm.js

@@ -12,10 +12,11 @@ import 'react/jsx-runtime';
 import { FlexCenter, QueryLoadingState, RetryOnError, TabContainer, ModalLoadingOverlay } from '@compill/components';
 import { createContext as createContext$1, runIfFn, isFunction } from '@soperio/react';
 import { Editor } from '@compill/editor';
-import { PageSectionTitle as PageSectionTitle$1 } from '@compill/admin';
+import { PageSectionTitle as PageSectionTitle$1, ButtonBarDialogButton as ButtonBarDialogButton$1, TableRowActionButton as TableRowActionButton$1, DialogButton as DialogButton$1 } from '@compill/admin';
 import { createPortal } from 'react-dom';
 import { TableContextProvider, useTableContext, Table } from '@compill/table';
 import { useOpenLink, useBoolean } from '@compill/hooks';
+import { useRouter } from 'next/router';
 import { useQueryClient } from '@tanstack/react-query';
 
 /******************************************************************************
@@ -183,6 +184,29 @@ function ButtonBarButton(_a) {
     dflex: true,
     alignItems: "center",
     placeContent: "center",
+    corners: "square",
+    gap: "2"
+  }, props, {
+    children: [icon && jsx(Icon, {
+      path: icon
+    }), children]
+  }));
+}
+function ButtonBarDialogButton(_a) {
+  var {
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "children"]);
+  return jsxs(DialogButton, Object.assign({
+    scheme: "dark",
+    size: "sm",
+    aspectRatio: icon && !children ? "square" : undefined,
+    variant: "borderless",
+    dflex: true,
+    alignItems: "center",
+    placeContent: "center",
+    corners: "square",
     gap: "2"
   }, props, {
     children: [icon && jsx(Icon, {
@@ -1412,15 +1436,10 @@ function TableCreateButton(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["children"]);
-  return jsx(DialogButton, Object.assign({
-    scheme: "dark",
-    size: "sm",
-    aspectRatio: "square",
-    variant: "borderless"
-  }, props, {
-    children: children !== null && children !== void 0 ? children : jsx(Icon, {
+  return jsxs(ButtonBarDialogButton$1, Object.assign({}, props, {
+    children: [jsx(Icon, {
       path: mdiPlusThick
-    })
+    }), children]
   }));
 }
 
@@ -2191,11 +2210,13 @@ function ItemDeleteDialog(_a) {
       invalidateQueriesOnSuccess = true,
       invalidateQueryKey,
       size = "lg",
+      md_boxSizing,
+      msg,
       show,
       onClose
     } = _a,
-    props = __rest$1(_a, ["itemLabel", "queryId", "api", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "show", "onClose"]);
-  const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(api.delete, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api.queryKey) : useApiMutation(api.upsert, api.queryKey);
+    props = __rest$1(_a, ["itemLabel", "queryId", "api", "invalidateQueriesOnSuccess", "invalidateQueryKey", "size", "md_boxSizing", "msg", "show", "onClose"]);
+  const mutation = invalidateQueriesOnSuccess ? useInvalidateParentMutation(api.delete, invalidateQueryKey !== null && invalidateQueryKey !== void 0 ? invalidateQueryKey : api.queryKey) : useApiMutation(api.delete, api.queryKey);
   const mutate = useMutate(mutation, {
     onSuccess: () => onClose === null || onClose === void 0 ? void 0 : onClose()
   });
@@ -2212,7 +2233,7 @@ function ItemDeleteDialog(_a) {
       children: `Delete ${itemLabel}`
     }), jsxs(Modal.Body, {
       pb: "6",
-      children: ["Do you really want to delete ", itemLabel, "?"]
+      children: [!msg && `Do you really want to delete ${itemLabel}?`, msg && runIfFn(msg, itemLabel)]
     }), jsxs(Modal.Footer, {
       dflex: true,
       placeContent: "end",
@@ -2259,15 +2280,16 @@ function TableViewProvider({
         }
       case "edit":
         {
-          if (editView.type == "customDialog") {
-            setDialog(editView.render({
+          const editConfig = runIfFn(editView, item);
+          if (editConfig.type == "customDialog") {
+            setDialog(editConfig.render({
               show: true,
               onClose: onCloseDialog
             }));
           } else {
             setDialog(jsx(DialogRenderer, {
               onClose: onCloseDialog,
-              config: editView,
+              config: editConfig,
               queryId: item.id,
               invalidateQueryKey: queryKey
             }));
@@ -2276,13 +2298,15 @@ function TableViewProvider({
         }
       case "delete":
         {
+          const deleteConfig = runIfFn(deleteItem, item);
           setDialog(jsx(ItemDeleteDialog, Object.assign({
             show: true,
             onClose: onCloseDialog,
             queryId: item.id,
-            invalidateQueryKey: queryKey
-          }, deleteItem, {
-            itemLabel: runIfFn(deleteItem.itemLabel, item)
+            invalidateQueryKey: queryKey,
+            msg: item.msg
+          }, deleteConfig, {
+            itemLabel: runIfFn(deleteConfig.itemLabel, item)
           })));
           // TODO
           // const { initialValues, ...props } = editItem!!
@@ -2407,6 +2431,7 @@ function TableRowActionsView({
   api,
   queryKey
 }) {
+  var _a;
   const item = row.original;
   return jsx("div", {
     dflex: true,
@@ -2414,7 +2439,7 @@ function TableRowActionsView({
     alignItems: "stretch",
     placeContent: "end",
     h: "full",
-    children: rowActions === null || rowActions === void 0 ? void 0 : rowActions.map((action, index) => jsxs(React.Fragment, {
+    children: (_a = runIfFn(rowActions, item)) === null || _a === void 0 ? void 0 : _a.map((action, index) => jsxs(React.Fragment, {
       children: [action.type === "publish" && jsx(TableRowPublishPostButton$1, {
         id: item.id,
         api: api,
@@ -2443,16 +2468,7 @@ function ActionButton(_a) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     onClick === null || onClick === void 0 ? void 0 : onClick(event);
   }, [onClick]);
-  return jsx(Button, Object.assign({
-    dflex: true,
-    alignContent: "center",
-    placeContent: "center",
-    py: "2.5",
-    px: "3",
-    h: "full",
-    size: "lg",
-    variant: "borderless",
-    corners: "default",
+  return jsx(TableRowActionButton$1, Object.assign({
     onClick: handleClick
   }, props));
 }
@@ -2475,6 +2491,7 @@ const schemes$1 = {
 
 function useTableProps(api, table, rowActions) {
   const navigate = useNavigate();
+  const nextRouter = useRouter();
   const openLink = useOpenLink();
   const {
     onAction
@@ -2485,7 +2502,7 @@ function useTableProps(api, table, rowActions) {
     } = table,
     props = __rest$1(table, ["onRowClick", "columns"]);
   const onRowClickHandler = React.useCallback(item => {
-    if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) === "navigate") navigate(runIfFn(onRowClick.path, item));else if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) == "link") openLink(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${runIfFn(onRowClick.path, item)}`);
+    if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) === "navigate") navigate(runIfFn(onRowClick.path, item));else if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) == "nextpush") nextRouter.push(runIfFn(onRowClick.path, item));else if ((onRowClick === null || onRowClick === void 0 ? void 0 : onRowClick.type) == "link") openLink(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${runIfFn(onRowClick.path, item)}`);
   }, [navigate, onRowClick]);
   const columns = React.useMemo(() => {
     const columns = table.columns.concat([]);
@@ -2610,23 +2627,27 @@ function TableButtonBar({
   api,
   children
 }) {
-  const createDialog = React.useCallback(onClose => {
-    const view = createView !== null && createView !== void 0 ? createView : editView;
-    if (view.type == "customDialog") return view.render({
-      show: true,
-      onClose
-    });else return jsx(DialogRenderer, {
-      config: view,
-      onClose: onClose,
-      invalidateQueryKey: api.queryKey
-    });
-  }, [editView, api]);
+  const createDialogFn = React.useCallback(data => {
+    return onClose => {
+      var _a;
+      const view = (_a = runIfFn(createView, data)) !== null && _a !== void 0 ? _a : runIfFn(editView, null);
+      if (view.type == "customDialog") return view.render({
+        show: true,
+        onClose
+      });else return jsx(DialogRenderer, {
+        config: view,
+        onClose: onClose,
+        invalidateQueryKey: api.queryKey
+      });
+    };
+  }, [createView, editView, api]);
   return jsxs(ButtonBar, {
     children: [jsx(RefreshButton, {
       queryKey: queryKey
     }), buttonBar && buttonBar.map((button, index) => jsxs(React.Fragment, {
       children: [button.type === "create" && editView && jsx(TableCreateButton, {
-        buildDialog: createDialog
+        buildDialog: createDialogFn(button.data),
+        children: button.label
       }), button.type === "invalidate" && jsx(InvalidateButton, {
         pathOrPermalink: button.pathOrPermalink
       }), button.type === "custom" && button.render()]
@@ -2967,7 +2988,7 @@ function LeftPanel({
   const [isOpen, __, toggle] = useBoolean(true);
   useHotkeys('ctrl+t', () => toggle(), [toggle]);
   return jsxs("div", {
-    ms: isOpen ? "0" : "-64",
+    ms: isOpen ? "0" : "-14.5rem",
     transition: "all",
     duration: "500",
     transform: true,
@@ -3474,6 +3495,31 @@ function StatusBadge(_a) {
   }));
 }
 
+function TableRowActionButton(_a) {
+  var {
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "children"]);
+  return jsxs(Button, Object.assign({
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "3",
+    h: "full",
+    size: "lg",
+    variant: "borderless",
+    corners: "square",
+    gap: "2"
+  }, props, {
+    children: [icon && jsx(Icon, {
+      path: icon,
+      size: "sm"
+    }), children]
+  }));
+}
+
 function TableRowViewButton(_a) {
   var {
       path
@@ -3484,18 +3530,10 @@ function TableRowViewButton(_a) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     window.open(`${process.env["NEXT_PUBLIC_WEBSITE_URL"]}/${path}`, '_blank');
   }, [path]);
-  return jsx(Button, Object.assign({
-    w: "10",
-    h: "10",
-    variant: "borderless",
-    corners: "pill",
-    scheme: "dark",
+  return jsx(TableRowActionButton, Object.assign({
+    icon: mdiOpenInNew,
     onClick: openPage
-  }, props, {
-    children: jsx(Icon, {
-      path: mdiOpenInNew
-    })
-  }));
+  }, props));
 }
 
 function TableRowNavigateButton(_a) {
@@ -3509,15 +3547,34 @@ function TableRowNavigateButton(_a) {
     event === null || event === void 0 ? void 0 : event.stopPropagation();
     navigate(`${path}`);
   }, [navigate, path]);
-  return jsx(Button, Object.assign({
-    scheme: "dark",
+  return jsx(TableRowActionButton, Object.assign({
+    icon: mdiEye,
+    onClick: handleClick
+  }, props));
+}
+
+function TableRowActionDialogButton(_a) {
+  var {
+      icon,
+      children
+    } = _a,
+    props = __rest$1(_a, ["icon", "children"]);
+  return jsxs(DialogButton$1, Object.assign({
+    dflex: true,
+    alignContent: "center",
+    placeContent: "center",
+    py: "2.5",
+    px: "3",
+    h: "full",
+    size: "lg",
     variant: "borderless",
     corners: "square",
-    onClick: handleClick
+    gap: "2"
   }, props, {
-    children: jsx(Icon, {
-      path: mdiEye
-    })
+    children: [icon && jsx(Icon, {
+      path: icon,
+      size: "sm"
+    }), children]
   }));
 }
 
@@ -3526,16 +3583,10 @@ function TableRowEditButton(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["children"]);
-  return jsx(DialogButton, Object.assign({
-    w: "10",
-    h: "10",
-    variant: "borderless",
-    corners: "pill",
-    scheme: "warning"
+  return jsx(TableRowActionDialogButton, Object.assign({
+    icon: mdiPencil
   }, props, {
-    children: children !== null && children !== void 0 ? children : jsx(Icon, {
-      path: mdiPencil
-    })
+    children: children
   }));
 }
 
@@ -3544,16 +3595,10 @@ function TableRowDeleteButton(_a) {
       children
     } = _a,
     props = __rest$1(_a, ["children"]);
-  return jsx(DialogButton, Object.assign({
-    w: "10",
-    h: "10",
-    scheme: "danger",
-    variant: "borderless",
-    corners: "pill"
+  return jsx(TableRowActionDialogButton, Object.assign({
+    icon: mdiDelete
   }, props, {
-    children: children !== null && children !== void 0 ? children : jsx(Icon, {
-      path: mdiDelete
-    })
+    children: children
   }));
 }
 
@@ -3602,18 +3647,10 @@ function TableRowPublishPostButton(_a) {
     mutation.reset();
     mutation.mutateAsync(id).then(() => toast.success(isDraft ? "Published!" : "Unpublished!")).catch(error => toast.error(`Error: ${error}`));
   }, [mutation, id]);
-  return jsx(Button, Object.assign({
-    w: "10",
-    h: "10",
-    variant: "borderless",
-    corners: "pill",
-    scheme: "default",
+  return jsx(TableRowActionButton, Object.assign({
+    icon: isDraft ? mdiPublish : mdiPublishOff,
     onClick: publish
-  }, props, {
-    children: jsx(Icon, {
-      path: isDraft ? mdiPublish : mdiPublishOff
-    })
-  }));
+  }, props));
 }
 
-export { AdminLayout, AttachDialog, Breadcrumbs, ButtonBar, ButtonBarButton, DialogButton, FormActionDialog, InvalidateButton, ItemEditDialog, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };
+export { AdminLayout, AttachDialog, Breadcrumbs, ButtonBar, ButtonBarButton, ButtonBarDialogButton, DialogButton, FormActionDialog, InvalidateButton, ItemEditDialog, NavigateButton, OrderCell, PageContainer, PageContentEditor, PageMain, PageQueryStateContainer, PageSectionTitle, PageSidebar, PageSidebarSection, PageStateContainer, PageSubSectionTitle, PageTabbedTopBar, PageTabbedTopBarProvider, PageTitle, PageTopBar, PageTopBarToolbar, PublishButton, ScreenRenderer, SectionTitle, StatusBadge, TableContainer, TableCreateButton, TableFilterButton, TableRowActionBar, TableRowActionButton, TableRowActionDialogButton, TableRowDeleteButton, TableRowEditButton, TableRowNavigateButton, TableRowPublishPostButton, TableRowViewButton, TableTopBar, UpdateButton, ViewButton };

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@compill/admin",
-    "version": "1.0.52",
+    "version": "1.0.54",
     "module": "./index.esm.js",
     "main": "./index.cjs.js"
 }

package/src/index.d.ts

@@ -38,6 +38,8 @@ export * from "./lib/table/TableContainer";
 export * from "./lib/table/TableCreateButton";
 export * from "./lib/table/TableFilterButton";
 export * from "./lib/table/TableRowActionBar";
+export * from "./lib/table/TableRowActionButton";
+export * from "./lib/table/TableRowActionDialogButton";
 export * from "./lib/table/TableRowDeleteButton";
 export * from "./lib/table/TableRowEditButton";
 export * from "./lib/table/TableRowNavigateButton";

package/src/lib/json/dialog/ItemDeleteDialog.d.ts

@@ -1,11 +1,12 @@
-/// <reference types="react" />
 import { CRUDAPI } from "@compill/api";
 import { ModalProps } from "@valerya/ui";
+import React from "react";
 export interface ItemDeleteDialogProps extends ModalProps {
     itemLabel: string;
     queryId: string;
     api: CRUDAPI<any>;
     invalidateQueriesOnSuccess?: boolean;
     invalidateQueryKey?: string[];
+    msg?: (itemLabel: string) => string | React.ReactNode;
 }
-export declare function ItemDeleteDialog({ itemLabel, queryId, api, invalidateQueriesOnSuccess, invalidateQueryKey, size, show, onClose, ...props }: ItemDeleteDialogProps): JSX.Element;
+export declare function ItemDeleteDialog({ itemLabel, queryId, api, invalidateQueriesOnSuccess, invalidateQueryKey, size, md_boxSizing, msg, show, onClose, ...props }: ItemDeleteDialogProps): JSX.Element;

package/src/lib/json/table/TableRowActionsView.d.ts

@@ -4,7 +4,7 @@ import { API } from "@compill/admin-api";
 interface TableRowActionViewProps {
     row: any;
     onAction: (action: TableRowAction, item: any) => void;
-    rowActions?: TableRowAction[];
+    rowActions?: TableRowAction[] | ((item?: any) => TableRowAction[]);
     api: API<any>;
     queryKey: string[];
 }

package/src/lib/json/table/TableViewContext.d.ts

@@ -1,7 +1,5 @@
 import React from "react";
-import { CustomDialog, TableRowAction, TableViewDeleteItem } from "../types/TableView";
-import { EditItemDialogConfig } from "../types/EditItemDialog";
-import { QueryWrapperDialogConfig } from "../types/QueryWrapperDialog";
+import { TableRowAction, TableViewDeleteItem, TableViewEditView } from "../types/TableView";
 type TableViewContextProps = {
     onAction: (action: TableRowAction, item: any) => void;
     dialog?: React.ReactNode;
@@ -9,8 +7,8 @@ type TableViewContextProps = {
 declare const useContext: () => TableViewContextProps;
 export interface TableViewProviderProps extends React.PropsWithChildren {
     queryKey: string[];
-    editView?: CustomDialog | EditItemDialogConfig | QueryWrapperDialogConfig<any>;
-    deleteItem?: TableViewDeleteItem;
+    editView?: TableViewEditView | ((item: any) => TableViewEditView);
+    deleteItem?: TableViewDeleteItem | ((item: any) => TableViewDeleteItem);
 }
 declare function TableViewProvider({ editView, deleteItem, queryKey, children }: TableViewProviderProps): JSX.Element;
 export { TableViewProvider, useContext as useTableViewContext };

package/src/lib/json/table/useTableProps.d.ts

@@ -1,3 +1,3 @@
-import { TableRowAction, TableViewTable } from "../types/TableView";
 import { API } from "@compill/admin-api";
-export declare function useTableProps(api: API<any>, table: TableViewTable, rowActions?: TableRowAction[]): any;
+import { TableRowAction, TableViewTable } from "../types/TableView";
+export declare function useTableProps(api: API<any>, table: TableViewTable, rowActions?: TableRowAction[] | ((item?: any) => TableRowAction[])): any;

package/src/lib/json/types/TableView.d.ts

@@ -15,11 +15,11 @@ export type TableViewScreen = {
     buttonBar?: TableViewButtonConfig[];
     filters?: TableFilters;
     massActions?: TableMassActions;
-    createView?: TableViewEditView;
-    editView?: TableViewEditView;
-    deleteItem?: TableViewDeleteItem;
+    createView?: TableViewEditView | ((data?: any) => TableViewEditView);
+    editView?: TableViewEditView | ((item: any) => TableViewEditView);
+    deleteItem?: TableViewDeleteItem | ((item: any) => TableViewDeleteItem);
     table: TableViewTable;
-    rowActions?: TableRowAction[];
+    rowActions?: TableRowAction[] | ((item: any) => TableRowAction[]);
 };
 export type TableViewConfig = {
     type: "table";
@@ -36,10 +36,7 @@ export type TableViewEditView = CustomDialog | EditItemDialogConfig | QueryWrapp
 export type TableViewTable = Omit<TableProps, "onRowClick" | "queryKey" | "queryFn"> & {
     initialVisibleColumns?: string[];
     onRowClick?: {
-        type: "navigate";
-        path: string | ((item: any) => string);
-    } | {
-        type: "link";
+        type: "navigate" | "nextpush" | "link";
         path: string | ((item: any) => string);
     };
 };
@@ -56,6 +53,7 @@ export type TableRowAction = {
     type: "edit";
 } | {
     type: "delete";
+    msg?: (itemLabel: string) => (string | React.ReactNode);
 } | {
     type: "publish";
 } | {
@@ -67,6 +65,8 @@ export type TableRowAction = {
 export type TableViewButtonBar = TableViewButtonConfig[];
 type TableViewButtonConfig = {
     type: "create";
+    data?: any;
+    label?: string;
 } | {
     type: "invalidate";
     pathOrPermalink: string;

package/src/lib/layout/ButtonBar.d.ts

@@ -1,4 +1,5 @@
 /// <reference types="react" />
+import { DialogButtonProps } from "../buttons/DialogButton";
 import { ParentComponent, SoperioComponent } from "@soperio/react";
 import { ButtonProps } from "@valerya/ui";
 export declare function ButtonBar({ children, ...props }: ParentComponent & SoperioComponent): JSX.Element;
@@ -6,3 +7,7 @@ export type ButtonBarButtonProps = {
     icon?: string;
 } & ButtonProps;
 export declare function ButtonBarButton({ icon, children, ...props }: ButtonBarButtonProps): JSX.Element;
+export type ButtonBarDialogButtonProps = {
+    icon?: string;
+} & DialogButtonProps;
+export declare function ButtonBarDialogButton({ icon, children, ...props }: ButtonBarDialogButtonProps): JSX.Element;

package/src/lib/table/TableRowActionButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { ButtonProps } from "@valerya/ui";
+export declare function TableRowActionButton({ icon, children, ...props }: {
+    icon?: string;
+} & ButtonProps): JSX.Element;

package/src/lib/table/TableRowActionDialogButton.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import { DialogButtonProps } from "@compill/admin";
+export declare function TableRowActionDialogButton({ icon, children, ...props }: {
+    icon?: string;
+} & DialogButtonProps): JSX.Element;

package/src/lib/table/TableRowPublishPostButton.d.ts

@@ -1,6 +1,6 @@
 /// <reference types="react" />
-import { ButtonProps } from "@valerya/ui";
 import { API } from "@compill/admin-api";
+import { ButtonProps } from "@valerya/ui";
 export declare function TableRowPublishPostButton({ id, api, status, invalidateQueryKey, ...props }: {
     id: string;
     api: API<any>;