@etsoo/materialui 1.4.91 → 1.4.93

package/lib/cjs/FlexBox.d.ts

@@ -5,6 +5,12 @@ import { StackProps } from "@mui/material";
  * @returns Component
  */
 export declare function HBox(props: Omit<StackProps, "ref">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+export declare function HBoxList(props: Omit<StackProps, "direction">): import("react/jsx-runtime").JSX.Element;
 /**
  * Vertial box
  * @param props Props

package/lib/cjs/FlexBox.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.HBox = HBox;
+exports.HBoxList = HBoxList;
 exports.VBox = VBox;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const material_1 = require("@mui/material");
@@ -12,6 +13,14 @@ const material_1 = require("@mui/material");
 function HBox(props) {
     return (0, jsx_runtime_1.jsx)(material_1.Stack, { direction: "row", width: "100%", ...props });
 }
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+function HBoxList(props) {
+    return ((0, jsx_runtime_1.jsx)(material_1.Stack, { spacing: 1, gap: 1, direction: "row", flexWrap: "wrap", width: "100%", ...props }));
+}
 /**
  * Vertial box
  * @param props Props

package/lib/cjs/pages/ViewPage.js

@@ -247,17 +247,18 @@ function ViewPage(props) {
             MessageUtils_1.MessageUtils.offRefresh(refreshHandler);
         };
     }, [refresh]);
-    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : ((0, jsx_runtime_1.jsxs)(react_3.default.Fragment, { children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: "id" in operationMessageHandler
+    let leftResult;
+    return ((0, jsx_runtime_1.jsx)(CommonPage_1.CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, sx: {
+            ".MuiTypography-subtitle2": {
+                fontWeight: "bold"
+            }
+        }, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? ((0, jsx_runtime_1.jsx)(material_1.LinearProgress, {})) : ((0, jsx_runtime_1.jsxs)(react_3.default.Fragment, { children: [operationMessageHandler && ((0, jsx_runtime_1.jsx)(OperationMessageContainer_1.OperationMessageContainer, { handler: "id" in operationMessageHandler
                         ? [
                             operationMessageHandler.types,
                             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, sx: {
-                        ".MuiTypography-subtitle2": {
-                            fontWeight: "bold"
-                        }
-                    }, children: [leftContainer && ((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: leftContainer(data) }), (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: "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: () => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;
                     } })), (0, jsx_runtime_1.jsx)(react_2.ScrollRestoration, {})] })) }));

package/lib/mjs/FlexBox.d.ts

@@ -5,6 +5,12 @@ import { StackProps } from "@mui/material";
  * @returns Component
  */
 export declare function HBox(props: Omit<StackProps, "ref">): import("react/jsx-runtime").JSX.Element;
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+export declare function HBoxList(props: Omit<StackProps, "direction">): import("react/jsx-runtime").JSX.Element;
 /**
  * Vertial box
  * @param props Props

package/lib/mjs/FlexBox.js

@@ -8,6 +8,14 @@ import { Stack } from "@mui/material";
 export function HBox(props) {
     return _jsx(Stack, { direction: "row", width: "100%", ...props });
 }
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+export function HBoxList(props) {
+    return (_jsx(Stack, { spacing: 1, gap: 1, direction: "row", flexWrap: "wrap", width: "100%", ...props }));
+}
 /**
  * Vertial box
  * @param props Props

package/lib/mjs/pages/ViewPage.js

@@ -239,17 +239,18 @@ export function ViewPage(props) {
             MessageUtils.offRefresh(refreshHandler);
         };
     }, [refresh]);
-    return (_jsx(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? (_jsx(LinearProgress, {})) : (_jsxs(React.Fragment, { children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: "id" in operationMessageHandler
+    let leftResult;
+    return (_jsx(CommonPage, { paddings: paddings, onRefresh: supportRefresh ? refresh : undefined, onUpdate: supportRefresh ? undefined : refresh, sx: {
+            ".MuiTypography-subtitle2": {
+                fontWeight: "bold"
+            }
+        }, ...rest, scrollContainer: globalThis, fabColumnDirection: fabColumnDirection, fabTop: fabTop, supportBack: supportBack, children: data == null ? (_jsx(LinearProgress, {})) : (_jsxs(React.Fragment, { children: [operationMessageHandler && (_jsx(OperationMessageContainer, { handler: "id" in operationMessageHandler
                         ? [
                             operationMessageHandler.types,
                             refresh,
                             operationMessageHandler.id
                         ]
-                        : operationMessageHandler })), titleBar && titleBar(data), _jsxs(Grid2, { container: true, justifyContent: "left", className: "ET-ViewPage", ref: gridRef, spacing: spacing, sx: {
-                        ".MuiTypography-subtitle2": {
-                            fontWeight: "bold"
-                        }
-                    }, children: [leftContainer && (_jsxs(React.Fragment, { children: [_jsx(Grid2, { container: true, className: "ET-ViewPage-LeftContainer", spacing: spacing, size: size, ...leftContainerPropsRest, children: leftContainer(data) }), _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: "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: () => {
                         const container = document.querySelector(pullContainer);
                         return !container?.scrollTop;
                     } })), _jsx(ScrollRestoration, {})] })) }));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.4.91",
+  "version": "1.4.93",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -76,13 +76,13 @@
     "@types/pica": "^9.0.5",
     "@types/pulltorefreshjs": "^0.1.7",
     "@types/react": "^18.3.18",
-    "@types/react-avatar-editor": "^13.0.3",
+    "@types/react-avatar-editor": "^13.0.4",
     "@types/react-dom": "^18.3.5",
     "@types/react-input-mask": "^3.0.6",
     "@types/react-window": "^1.8.8",
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^26.0.0",
     "typescript": "^5.7.3",
-    "vitest": "^3.0.6"
+    "vitest": "^3.0.7"
   }
 }

package/src/FlexBox.tsx

@@ -1,5 +1,4 @@
 import { Stack, StackProps } from "@mui/material";
-import React from "react";
 
 /**
  * Horizonal box
@@ -10,6 +9,24 @@ export function HBox(props: Omit<StackProps, "ref">) {
   return <Stack direction="row" width="100%" {...props} />;
 }
 
+/**
+ * Horizonal box with list items
+ * @param props Props
+ * @returns Component
+ */
+export function HBoxList(props: Omit<StackProps, "direction">) {
+  return (
+    <Stack
+      spacing={1}
+      gap={1}
+      direction="row"
+      flexWrap="wrap"
+      width="100%"
+      {...props}
+    />
+  );
+}
+
 /**
  * Vertial box
  * @param props Props

package/src/pages/ViewPage.tsx

@@ -481,11 +481,18 @@ export function ViewPage<T extends DataTypes.StringRecord>(
     };
   }, [refresh]);
 
+  let leftResult: React.ReactNode;
+
   return (
     <CommonPage
       paddings={paddings}
       onRefresh={supportRefresh ? refresh : undefined}
       onUpdate={supportRefresh ? undefined : refresh}
+      sx={{
+        ".MuiTypography-subtitle2": {
+          fontWeight: "bold"
+        }
+      }}
       {...rest}
       scrollContainer={globalThis}
       fabColumnDirection={fabColumnDirection}
@@ -516,13 +523,8 @@ export function ViewPage<T extends DataTypes.StringRecord>(
             className="ET-ViewPage"
             ref={gridRef}
             spacing={spacing}
-            sx={{
-              ".MuiTypography-subtitle2": {
-                fontWeight: "bold"
-              }
-            }}
           >
-            {leftContainer && (
+            {leftContainer && (leftResult = leftContainer(data)) != null && (
               <React.Fragment>
                 <Grid2
                   container
@@ -531,7 +533,7 @@ export function ViewPage<T extends DataTypes.StringRecord>(
                   size={size}
                   {...leftContainerPropsRest}
                 >
-                  {leftContainer(data)}
+                  {leftResult}
                 </Grid2>
                 <Grid2
                   container