@etsoo/materialui 1.5.18 → 1.5.20

package/lib/cjs/FileUploadButton.d.ts

@@ -4,6 +4,10 @@ import React from "react";
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+    /**
+     * Drop files label
+     */
+    dropFilesLabel?: React.ReactNode;
     /**
      * Max files allowed
      */
@@ -26,7 +30,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
      * Upload files callback
      * @param files Files
      */
-    onUploadFiles?: (files: FileList) => void;
+    onUploadFiles: (files: FileList) => void;
 };
 /**
  * File upload button

package/lib/cjs/FileUploadButton.js

@@ -5,7 +5,10 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.FileUploadButton = FileUploadButton;
 const jsx_runtime_1 = require("react/jsx-runtime");
+const material_1 = require("@mui/material");
 const Button_1 = __importDefault(require("@mui/material/Button"));
+const react_1 = __importDefault(require("react"));
+const FlexBox_1 = require("./FlexBox");
 /**
  * File upload button
  * @param props Props
@@ -13,37 +16,59 @@ const Button_1 = __importDefault(require("@mui/material/Button"));
  */
 function FileUploadButton(props) {
     // Destruct
-    const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
+    const { dropFilesLabel, maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children = "Browse", ...rest } = props;
     const { onChange } = inputProps ?? {};
+    const [dragOver, setDragOver] = react_1.default.useState(false);
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        validateFiles(e.dataTransfer.files);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const handleDragLeave = () => setDragOver(false);
+    const validateFiles = (files) => {
+        const fl = files.length;
+        if (fl === 0)
+            return;
+        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+            if (onFileInvalid)
+                onFileInvalid([maxFiles, fl]);
+            return;
+        }
+        if (maxFileSize && maxFileSize > 0) {
+            for (let f = 0; f < fl; f++) {
+                const file = files[f];
+                if (file.size > maxFileSize) {
+                    if (onFileInvalid)
+                        onFileInvalid([maxFileSize, file.size], file);
+                    return;
+                }
+            }
+        }
+        onUploadFiles(files);
+    };
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(Button_1.default, { component: "label", ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, onChange: (event) => {
-                    if (onChange)
-                        onChange(event);
-                    if (event.isDefaultPrevented())
-                        return;
-                    if (onUploadFiles) {
-                        const files = event.target.files;
-                        if (files == null)
-                            return;
-                        const fl = files.length;
-                        if (fl === 0)
-                            return;
-                        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
-                            if (onFileInvalid)
-                                onFileInvalid([maxFiles, fl]);
-                            return;
-                        }
-                        if (maxFileSize && maxFileSize > 0) {
-                            for (let f = 0; f < fl; f++) {
-                                const file = files[f];
-                                if (file.size > maxFileSize) {
-                                    if (onFileInvalid)
-                                        onFileInvalid([maxFileSize, file.size], file);
-                                    return;
-                                }
-                            }
-                        }
-                        onUploadFiles(files);
-                    }
-                }, ...inputProps })] }));
+    return ((0, jsx_runtime_1.jsxs)(FlexBox_1.HBox, { alignItems: "center", flexWrap: "wrap", border: (theme) => dragOver ? "1px dashed " + theme.palette.warning.main : undefined, spacing: 0.5, ...(dropFilesLabel == null
+            ? undefined
+            : {
+                onDrop: handleDrop,
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave
+            }), children: [dropFilesLabel &&
+                (typeof dropFilesLabel === "string" ? ((0, jsx_runtime_1.jsx)(material_1.Typography, { variant: "body2", children: dropFilesLabel })) : (dropFilesLabel)), (0, jsx_runtime_1.jsxs)(Button_1.default, { component: "label", sx: { textTransform: "none" }, ...rest, children: [children, (0, jsx_runtime_1.jsx)("input", { type: "file", hidden: true, onChange: (event) => {
+                            if (onChange)
+                                onChange(event);
+                            if (event.isDefaultPrevented())
+                                return;
+                            const files = event.target.files;
+                            if (files == null)
+                                return;
+                            const fl = files.length;
+                            if (fl === 0)
+                                return;
+                            validateFiles(files);
+                        }, ...inputProps })] })] }));
 }

package/lib/cjs/ViewContainer.d.ts

@@ -31,6 +31,7 @@ export type ViewPageGridItemProps = GridProps & {
     data: React.ReactNode;
     label?: React.ReactNode;
     singleRow?: ViewPageRowType;
+    horizontal?: boolean;
 };
 /**
  * View page grid item
@@ -58,6 +59,10 @@ export interface ViewPageField<T extends object> extends GridProps {
      * Display as single row
      */
     singleRow?: ViewPageRowType;
+    /**
+     * Render as horizontal or not
+     */
+    horizontal?: boolean;
     /**
      * Render props
      */

package/lib/cjs/ViewContainer.js

@@ -42,7 +42,7 @@ function getResp(singleRow) {
 }
 function getItemField(app, field, data) {
     // Item data and label
-    let itemData, itemLabel, gridProps = {}, size;
+    let itemData, itemLabel, gridProps = {}, size, isHorizontal;
     if (Array.isArray(field)) {
         const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
         itemData = (0, GridDataFormat_1.GridDataFormat)(data[fieldData], fieldType, renderProps);
@@ -52,7 +52,9 @@ function getItemField(app, field, data) {
     }
     else if (typeof field === "object") {
         // Destruct
-        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", ...rest } = field;
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", horizontal, ...rest } = field;
+        // Horizontal or not
+        isHorizontal = horizontal;
         // Size
         size = getResp(singleRow);
         gridProps = {
@@ -85,7 +87,7 @@ function getItemField(app, field, data) {
         size = ViewPageSize.small;
         gridProps = { size };
     }
-    return [itemData, itemLabel, gridProps, size];
+    return [itemData, itemLabel, gridProps, size, isHorizontal];
 }
 function getItemSize(bp, size) {
     const v = size[bp];
@@ -149,7 +151,7 @@ var ViewPageSize;
  */
 function ViewPageGridItem(props) {
     // Destruct
-    const { data, label, singleRow, ...gridProps } = props;
+    const { data, label, singleRow, horizontal = false, ...gridProps } = props;
     // Default options
     let options = {};
     if (gridProps.size == null) {
@@ -159,7 +161,7 @@ function ViewPageGridItem(props) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
+    return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { ...gridProps, ...options, children: [label != null && ((0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "caption", component: horizontal ? "span" : "div", children: [label, ":"] })), typeof data === "object" ? (data) : horizontal ? ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : ((0, jsx_runtime_1.jsx)(Typography_1.default, { variant: "subtitle2", children: data }))] }));
 }
 function ViewContainer(props) {
     // Global app
@@ -196,12 +198,12 @@ function ViewContainer(props) {
                 }
             }
             else {
-                const [itemData, itemLabel, gridProps, size] = getItemField(app, field, data);
+                const [itemData, itemLabel, gridProps, size, horizontal] = getItemField(app, field, data);
                 // Some callback function may return '' instead of undefined
                 if (itemData == null || itemData === "")
                     continue;
                 oneSize = size;
-                oneItem = ((0, react_1.createElement)(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel }));
+                oneItem = ((0, react_1.createElement)(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel, horizontal: horizontal }));
             }
             // Max lines
             if (maxItems > 0) {

package/lib/mjs/FileUploadButton.d.ts

@@ -4,6 +4,10 @@ import React from "react";
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+    /**
+     * Drop files label
+     */
+    dropFilesLabel?: React.ReactNode;
     /**
      * Max files allowed
      */
@@ -26,7 +30,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
      * Upload files callback
      * @param files Files
      */
-    onUploadFiles?: (files: FileList) => void;
+    onUploadFiles: (files: FileList) => void;
 };
 /**
  * File upload button

package/lib/mjs/FileUploadButton.js

@@ -1,5 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Typography } from "@mui/material";
 import Button from "@mui/material/Button";
+import React from "react";
+import { HBox } from "./FlexBox";
 /**
  * File upload button
  * @param props Props
@@ -7,37 +10,59 @@ import Button from "@mui/material/Button";
  */
 export function FileUploadButton(props) {
     // Destruct
-    const { maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children, ...rest } = props;
+    const { dropFilesLabel, maxFiles, maxFileSize, inputProps, onFileInvalid, onUploadFiles, children = "Browse", ...rest } = props;
     const { onChange } = inputProps ?? {};
+    const [dragOver, setDragOver] = React.useState(false);
+    const handleDrop = (e) => {
+        e.preventDefault();
+        setDragOver(false);
+        validateFiles(e.dataTransfer.files);
+    };
+    const handleDragOver = (e) => {
+        e.preventDefault();
+        setDragOver(true);
+    };
+    const handleDragLeave = () => setDragOver(false);
+    const validateFiles = (files) => {
+        const fl = files.length;
+        if (fl === 0)
+            return;
+        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+            if (onFileInvalid)
+                onFileInvalid([maxFiles, fl]);
+            return;
+        }
+        if (maxFileSize && maxFileSize > 0) {
+            for (let f = 0; f < fl; f++) {
+                const file = files[f];
+                if (file.size > maxFileSize) {
+                    if (onFileInvalid)
+                        onFileInvalid([maxFileSize, file.size], file);
+                    return;
+                }
+            }
+        }
+        onUploadFiles(files);
+    };
     // Layout
-    return (_jsxs(Button, { component: "label", ...rest, children: [children, _jsx("input", { type: "file", hidden: true, onChange: (event) => {
-                    if (onChange)
-                        onChange(event);
-                    if (event.isDefaultPrevented())
-                        return;
-                    if (onUploadFiles) {
-                        const files = event.target.files;
-                        if (files == null)
-                            return;
-                        const fl = files.length;
-                        if (fl === 0)
-                            return;
-                        if (maxFiles && maxFiles > 0 && fl > maxFiles) {
-                            if (onFileInvalid)
-                                onFileInvalid([maxFiles, fl]);
-                            return;
-                        }
-                        if (maxFileSize && maxFileSize > 0) {
-                            for (let f = 0; f < fl; f++) {
-                                const file = files[f];
-                                if (file.size > maxFileSize) {
-                                    if (onFileInvalid)
-                                        onFileInvalid([maxFileSize, file.size], file);
-                                    return;
-                                }
-                            }
-                        }
-                        onUploadFiles(files);
-                    }
-                }, ...inputProps })] }));
+    return (_jsxs(HBox, { alignItems: "center", flexWrap: "wrap", border: (theme) => dragOver ? "1px dashed " + theme.palette.warning.main : undefined, spacing: 0.5, ...(dropFilesLabel == null
+            ? undefined
+            : {
+                onDrop: handleDrop,
+                onDragOver: handleDragOver,
+                onDragLeave: handleDragLeave
+            }), children: [dropFilesLabel &&
+                (typeof dropFilesLabel === "string" ? (_jsx(Typography, { variant: "body2", children: dropFilesLabel })) : (dropFilesLabel)), _jsxs(Button, { component: "label", sx: { textTransform: "none" }, ...rest, children: [children, _jsx("input", { type: "file", hidden: true, onChange: (event) => {
+                            if (onChange)
+                                onChange(event);
+                            if (event.isDefaultPrevented())
+                                return;
+                            const files = event.target.files;
+                            if (files == null)
+                                return;
+                            const fl = files.length;
+                            if (fl === 0)
+                                return;
+                            validateFiles(files);
+                        }, ...inputProps })] })] }));
 }

package/lib/mjs/ViewContainer.d.ts

@@ -31,6 +31,7 @@ export type ViewPageGridItemProps = GridProps & {
     data: React.ReactNode;
     label?: React.ReactNode;
     singleRow?: ViewPageRowType;
+    horizontal?: boolean;
 };
 /**
  * View page grid item
@@ -58,6 +59,10 @@ export interface ViewPageField<T extends object> extends GridProps {
      * Display as single row
      */
     singleRow?: ViewPageRowType;
+    /**
+     * Render as horizontal or not
+     */
+    horizontal?: boolean;
     /**
      * Render props
      */

package/lib/mjs/ViewContainer.js

@@ -34,7 +34,7 @@ function getResp(singleRow) {
 }
 function getItemField(app, field, data) {
     // Item data and label
-    let itemData, itemLabel, gridProps = {}, size;
+    let itemData, itemLabel, gridProps = {}, size, isHorizontal;
     if (Array.isArray(field)) {
         const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
         itemData = GridDataFormat(data[fieldData], fieldType, renderProps);
@@ -44,7 +44,9 @@ function getItemField(app, field, data) {
     }
     else if (typeof field === "object") {
         // Destruct
-        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", ...rest } = field;
+        const { data: fieldData, dataType, label: fieldLabel, renderProps, singleRow = "default", horizontal, ...rest } = field;
+        // Horizontal or not
+        isHorizontal = horizontal;
         // Size
         size = getResp(singleRow);
         gridProps = {
@@ -77,7 +79,7 @@ function getItemField(app, field, data) {
         size = ViewPageSize.small;
         gridProps = { size };
     }
-    return [itemData, itemLabel, gridProps, size];
+    return [itemData, itemLabel, gridProps, size, isHorizontal];
 }
 function getItemSize(bp, size) {
     const v = size[bp];
@@ -141,7 +143,7 @@ export var ViewPageSize;
  */
 export function ViewPageGridItem(props) {
     // Destruct
-    const { data, label, singleRow, ...gridProps } = props;
+    const { data, label, singleRow, horizontal = false, ...gridProps } = props;
     // Default options
     let options = {};
     if (gridProps.size == null) {
@@ -151,7 +153,7 @@ export function ViewPageGridItem(props) {
         options = getResp(singleRow ?? "small");
     }
     // Layout
-    return (_jsxs(Grid, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: "div", children: [label, ":"] })), typeof data === "object" ? (data) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
+    return (_jsxs(Grid, { ...gridProps, ...options, children: [label != null && (_jsxs(Typography, { variant: "caption", component: horizontal ? "span" : "div", children: [label, ":"] })), typeof data === "object" ? (data) : horizontal ? (_jsx(Typography, { variant: "subtitle2", component: "span", marginLeft: 0.5, children: data })) : (_jsx(Typography, { variant: "subtitle2", children: data }))] }));
 }
 export function ViewContainer(props) {
     // Global app
@@ -188,12 +190,12 @@ export function ViewContainer(props) {
                 }
             }
             else {
-                const [itemData, itemLabel, gridProps, size] = getItemField(app, field, data);
+                const [itemData, itemLabel, gridProps, size, horizontal] = getItemField(app, field, data);
                 // Some callback function may return '' instead of undefined
                 if (itemData == null || itemData === "")
                     continue;
                 oneSize = size;
-                oneItem = (_createElement(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel }));
+                oneItem = (_createElement(ViewPageGridItem, { ...gridProps, key: i, data: itemData, label: itemLabel, horizontal: horizontal }));
             }
             // Max lines
             if (maxItems > 0) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.18",
+  "version": "1.5.20",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,9 +40,9 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.21",
+    "@etsoo/appscript": "^1.6.22",
     "@etsoo/notificationbase": "^1.1.60",
-    "@etsoo/react": "^1.8.37",
+    "@etsoo/react": "^1.8.38",
     "@etsoo/shared": "^1.2.66",
     "@mui/icons-material": "^7.0.1",
     "@mui/material": "^7.0.1",

package/src/FileUploadButton.tsx

@@ -1,10 +1,17 @@
+import { Typography } from "@mui/material";
 import Button, { ButtonProps } from "@mui/material/Button";
 import React from "react";
+import { HBox } from "./FlexBox";
 
 /**
  * File upload button props
  */
 export type FileUploadButtonProps = ButtonProps<"label"> & {
+  /**
+   * Drop files label
+   */
+  dropFilesLabel?: React.ReactNode;
+
   /**
    * Max files allowed
    */
@@ -34,7 +41,7 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
    * Upload files callback
    * @param files Files
    */
-  onUploadFiles?: (files: FileList) => void;
+  onUploadFiles: (files: FileList) => void;
 };
 
 /**
@@ -45,56 +52,98 @@ export type FileUploadButtonProps = ButtonProps<"label"> & {
 export function FileUploadButton(props: FileUploadButtonProps) {
   // Destruct
   const {
+    dropFilesLabel,
     maxFiles,
     maxFileSize,
     inputProps,
     onFileInvalid,
     onUploadFiles,
-    children,
+    children = "Browse",
     ...rest
   } = props;
 
   const { onChange } = inputProps ?? {};
 
+  const [dragOver, setDragOver] = React.useState(false);
+
+  const handleDrop = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragOver(false);
+    validateFiles(e.dataTransfer.files);
+  };
+
+  const handleDragOver = (e: React.DragEvent<HTMLDivElement>) => {
+    e.preventDefault();
+    setDragOver(true);
+  };
+
+  const handleDragLeave = () => setDragOver(false);
+
+  const validateFiles = (files: FileList) => {
+    const fl = files.length;
+    if (fl === 0) return;
+
+    if (maxFiles && maxFiles > 0 && fl > maxFiles) {
+      if (onFileInvalid) onFileInvalid([maxFiles, fl]);
+      return;
+    }
+
+    if (maxFileSize && maxFileSize > 0) {
+      for (let f = 0; f < fl; f++) {
+        const file = files[f];
+        if (file.size > maxFileSize) {
+          if (onFileInvalid) onFileInvalid([maxFileSize, file.size], file);
+          return;
+        }
+      }
+    }
+
+    onUploadFiles(files);
+  };
+
   // Layout
   return (
-    <Button component="label" {...rest}>
-      {children}
-      <input
-        type="file"
-        hidden={true}
-        onChange={(event) => {
-          if (onChange) onChange(event);
-          if (event.isDefaultPrevented()) return;
-
-          if (onUploadFiles) {
+    <HBox
+      alignItems="center"
+      flexWrap="wrap"
+      border={(theme) =>
+        dragOver ? "1px dashed " + theme.palette.warning.main : undefined
+      }
+      spacing={0.5}
+      {...(dropFilesLabel == null
+        ? undefined
+        : {
+            onDrop: handleDrop,
+            onDragOver: handleDragOver,
+            onDragLeave: handleDragLeave
+          })}
+    >
+      {dropFilesLabel &&
+        (typeof dropFilesLabel === "string" ? (
+          <Typography variant="body2">{dropFilesLabel}</Typography>
+        ) : (
+          dropFilesLabel
+        ))}
+      <Button component="label" sx={{ textTransform: "none" }} {...rest}>
+        {children}
+        <input
+          type="file"
+          hidden={true}
+          onChange={(event) => {
+            if (onChange) onChange(event);
+            if (event.isDefaultPrevented()) return;
+
             const files = event.target.files;
             if (files == null) return;
 
             const fl = files.length;
             if (fl === 0) return;
 
-            if (maxFiles && maxFiles > 0 && fl > maxFiles) {
-              if (onFileInvalid) onFileInvalid([maxFiles, fl]);
-              return;
-            }
-
-            if (maxFileSize && maxFileSize > 0) {
-              for (let f = 0; f < fl; f++) {
-                const file = files[f];
-                if (file.size > maxFileSize) {
-                  if (onFileInvalid)
-                    onFileInvalid([maxFileSize, file.size], file);
-                  return;
-                }
-              }
-            }
-
-            onUploadFiles(files);
-          }
-        }}
-        {...inputProps}
-      />
-    </Button>
+            validateFiles(files);
+          }}
+          {...inputProps}
+        />
+      </Button>
+    </HBox>
   );
 }

package/src/ViewContainer.tsx

@@ -40,12 +40,13 @@ function getItemField<T extends object>(
   app: ReactAppType,
   field: ViewPageFieldTypeNarrow<T>,
   data: T
-): [React.ReactNode, React.ReactNode, GridProps, ViewPageItemSize] {
+): [React.ReactNode, React.ReactNode, GridProps, ViewPageItemSize, boolean?] {
   // Item data and label
   let itemData: React.ReactNode,
     itemLabel: React.ReactNode,
     gridProps: GridProps = {},
-    size: ViewPageItemSize;
+    size: ViewPageItemSize,
+    isHorizontal: boolean | undefined;
 
   if (Array.isArray(field)) {
     const [fieldData, fieldType, renderProps, singleRow = "small"] = field;
@@ -61,9 +62,13 @@ function getItemField<T extends object>(
       label: fieldLabel,
       renderProps,
       singleRow = "default",
+      horizontal,
       ...rest
     } = field;
 
+    // Horizontal or not
+    isHorizontal = horizontal;
+
     // Size
     size = getResp(singleRow);
 
@@ -96,7 +101,7 @@ function getItemField<T extends object>(
     gridProps = { size };
   }
 
-  return [itemData, itemLabel, gridProps, size];
+  return [itemData, itemLabel, gridProps, size, isHorizontal];
 }
 
 function getItemSize(bp: Breakpoint, size: ViewPageItemSize) {
@@ -180,6 +185,7 @@ export type ViewPageGridItemProps = GridProps & {
   data: React.ReactNode;
   label?: React.ReactNode;
   singleRow?: ViewPageRowType;
+  horizontal?: boolean;
 };
 
 /**
@@ -189,7 +195,7 @@ export type ViewPageGridItemProps = GridProps & {
  */
 export function ViewPageGridItem(props: ViewPageGridItemProps) {
   // Destruct
-  const { data, label, singleRow, ...gridProps } = props;
+  const { data, label, singleRow, horizontal = false, ...gridProps } = props;
 
   // Default options
   let options = {};
@@ -203,12 +209,16 @@ export function ViewPageGridItem(props: ViewPageGridItemProps) {
   return (
     <Grid {...gridProps} {...options}>
       {label != null && (
-        <Typography variant="caption" component="div">
+        <Typography variant="caption" component={horizontal ? "span" : "div"}>
           {label}:
         </Typography>
       )}
       {typeof data === "object" ? (
         data
+      ) : horizontal ? (
+        <Typography variant="subtitle2" component="span" marginLeft={0.5}>
+          {data}
+        </Typography>
       ) : (
         <Typography variant="subtitle2">{data}</Typography>
       )}
@@ -240,6 +250,11 @@ export interface ViewPageField<T extends object> extends GridProps {
    */
   singleRow?: ViewPageRowType;
 
+  /**
+   * Render as horizontal or not
+   */
+  horizontal?: boolean;
+
   /**
    * Render props
    */
@@ -352,11 +367,8 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
             oneItem = createdResult;
           }
         } else {
-          const [itemData, itemLabel, gridProps, size] = getItemField(
-            app,
-            field,
-            data
-          );
+          const [itemData, itemLabel, gridProps, size, horizontal] =
+            getItemField(app, field, data);
 
           // Some callback function may return '' instead of undefined
           if (itemData == null || itemData === "") continue;
@@ -368,6 +380,7 @@ export function ViewContainer<T extends DataTypes.StringRecord>(
               key={i}
               data={itemData}
               label={itemLabel}
+              horizontal={horizontal}
             />
           );
         }

package/tsconfig.cjs.json

@@ -5,6 +5,8 @@
     "module": "NodeNext",
     "moduleResolution": "NodeNext",
     "isolatedModules": true,
+    "allowJs": false,
+    "rootDir": "./src",
     "outDir": "./lib/cjs",
     "noEmit": false,
     "declaration": true,

package/tsconfig.json

@@ -6,6 +6,7 @@
     "moduleResolution": "bundler",
     "allowJs": false,
     "isolatedModules": true,
+    "rootDir": "./src",
     "outDir": "./lib/mjs",
     "noEmit": false,
     "declaration": true,