@etsoo/materialui 1.4.94 → 1.4.96

package/lib/cjs/pages/ViewPage.d.ts

@@ -77,6 +77,10 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
      * Actions
      */
     actions?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
+    /**
+     * Paddings between actions
+     */
+    actionPaddings?: number | Record<string, string | number>;
     /**
      * Children
      */

package/lib/cjs/pages/ViewPage.js

@@ -173,7 +173,7 @@ function ViewPage(props) {
     // Global app
     const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal_1.MUGlobal.pagePaddings, spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, titleBar, leftContainer, leftContainerLines = 3, leftContainerProps = {}, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal_1.MUGlobal.pagePaddings, spacing = MUGlobal_1.MUGlobal.half(MUGlobal_1.MUGlobal.pagePaddings), actionPaddings = MUGlobal_1.MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, titleBar, leftContainer, leftContainerLines = 3, leftContainerProps = {}, ...rest } = props;
     // Current breakpoint
     const bp = (0, useCurrentBreakpoint_1.useCurrentBreakpoint)();
     // Data
@@ -267,7 +267,7 @@ function ViewPage(props) {
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, justifyContent: "left", className: "ET-ViewPage", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && ((0, jsx_runtime_1.jsxs)(react_3.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }), actions !== null && ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, children: actions != null && shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
+                        : operationMessageHandler })), titleBar && titleBar(data), (0, jsx_runtime_1.jsxs)(material_1.Grid2, { container: true, justifyContent: "left", className: "ET-ViewPage", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && ((0, jsx_runtime_1.jsxs)(react_3.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), (0, jsx_runtime_1.jsx)(material_1.Grid2, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }), actions !== null && ((0, jsx_runtime_1.jsx)(material_1.Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, children: actions != null && shared_1.Utils.getResult(actions, data, refresh) })), shared_1.Utils.getResult(children, data, refresh), pullToRefresh && ((0, jsx_runtime_1.jsx)(PullToRefreshUI_1.PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;
                     } })), (0, jsx_runtime_1.jsx)(react_2.ScrollRestoration, {})] })) }));

package/lib/mjs/pages/ViewPage.d.ts

@@ -77,6 +77,10 @@ export interface ViewPageProps<T extends DataTypes.StringRecord> extends Omit<Co
      * Actions
      */
     actions?: React.ReactNode | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
+    /**
+     * Paddings between actions
+     */
+    actionPaddings?: number | Record<string, string | number>;
     /**
      * Children
      */

package/lib/mjs/pages/ViewPage.js

@@ -165,7 +165,7 @@ export function ViewPage(props) {
     // Global app
     const app = useRequiredAppContext();
     // Destruct
-    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, titleBar, leftContainer, leftContainerLines = 3, leftContainerProps = {}, ...rest } = props;
+    const { actions, children, fields, loadData, paddings = MUGlobal.pagePaddings, spacing = MUGlobal.half(MUGlobal.pagePaddings), actionPaddings = MUGlobal.pagePaddings, supportRefresh = true, fabColumnDirection = true, fabTop = true, supportBack = true, pullToRefresh = true, gridRef, operationMessageHandler, titleBar, leftContainer, leftContainerLines = 3, leftContainerProps = {}, ...rest } = props;
     // Current breakpoint
     const bp = useCurrentBreakpoint();
     // Data
@@ -259,7 +259,7 @@ export function ViewPage(props) {
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), titleBar && titleBar(data), _jsxs(Grid2, { container: true, justifyContent: "left", className: "ET-ViewPage", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && (_jsxs(React.Fragment, { children: [_jsx(Grid2, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), _jsx(Grid2, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }), actions !== null && (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "flex-end", paddingTop: actions == null ? undefined : paddings, paddingBottom: paddings, gap: paddings, children: actions != null && Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
+                        : operationMessageHandler })), titleBar && titleBar(data), _jsxs(Grid2, { container: true, justifyContent: "left", className: "ET-ViewPage", ref: gridRef, spacing: spacing, children: [leftContainer && (leftResult = leftContainer(data)) != null && (_jsxs(React.Fragment, { children: [_jsx(Grid2, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftResult }), _jsx(Grid2, { container: true, className: "ET-ViewPage-LeftOthers", spacing: spacing, size: ViewPageSize.matchSize(size), children: createFields(data, leftContainerLines * (12 - getItemSize(bp, size))) })] })), createFields(data)] }), actions !== null && (_jsx(Stack, { className: "ET-ViewPage-Actions", direction: "row", width: "100%", flexWrap: "wrap", justifyContent: "center", paddingTop: actions == null ? undefined : actionPaddings, paddingBottom: actionPaddings, gap: actionPaddings, children: actions != null && Utils.getResult(actions, data, refresh) })), Utils.getResult(children, data, refresh), pullToRefresh && (_jsx(PullToRefreshUI, { mainElement: pullContainer, triggerElement: pullContainer, instructionsPullToRefresh: labels.pullToRefresh, instructionsReleaseToRefresh: labels.releaseToRefresh, instructionsRefreshing: labels.refreshing, onRefresh: refresh, shouldPullToRefresh: () => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;
                     } })), _jsx(ScrollRestoration, {})] })) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.94",
+  "version": "1.4.96",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.12",
-    "@etsoo/notificationbase": "^1.1.58",
-    "@etsoo/react": "^1.8.31",
-    "@etsoo/shared": "^1.2.61",
+    "@etsoo/appscript": "^1.6.13",
+    "@etsoo/notificationbase": "^1.1.59",
+    "@etsoo/react": "^1.8.32",
+    "@etsoo/shared": "^1.2.62",
     "@mui/icons-material": "^6.4.5",
     "@mui/material": "^6.4.4",
-    "@mui/x-data-grid": "^7.27.0",
+    "@mui/x-data-grid": "^7.27.1",
     "chart.js": "^4.4.8",
     "chartjs-plugin-datalabels": "^2.2.0",
     "eventemitter3": "^5.0.1",

package/src/pages/ViewPage.tsx

@@ -186,6 +186,11 @@ export interface ViewPageProps<T extends DataTypes.StringRecord>
     | React.ReactNode
     | ((data: T, refresh: () => PromiseLike<void>) => React.ReactNode);
 
+  /**
+   * Paddings between actions
+   */
+  actionPaddings?: number | Record<string, string | number>;
+
   /**
    * Children
    */
@@ -373,6 +378,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     loadData,
     paddings = MUGlobal.pagePaddings,
     spacing = MUGlobal.half(MUGlobal.pagePaddings),
+    actionPaddings = MUGlobal.pagePaddings,
     supportRefresh = true,
     fabColumnDirection = true,
     fabTop = true,
@@ -566,10 +572,10 @@ export function ViewPage<T extends DataTypes.StringRecord>(
               direction="row"
               width="100%"
               flexWrap="wrap"
-              justifyContent="flex-end"
-              paddingTop={actions == null ? undefined : paddings}
-              paddingBottom={paddings}
-              gap={paddings}
+              justifyContent="center"
+              paddingTop={actions == null ? undefined : actionPaddings}
+              paddingBottom={actionPaddings}
+              gap={actionPaddings}
             >
               {actions != null && Utils.getResult(actions, data, refresh)}
             </Stack>