@etsoo/materialui 1.6.21 → 1.6.23

package/lib/cjs/ViewContainer.d.ts

@@ -6,7 +6,7 @@ import { Breakpoint } from "@mui/material/styles";
 /**
  * View page item size
  */
-export type ViewPageItemSize = Record<Breakpoint, number | undefined>;
+export type ViewPageItemSize = Partial<Record<Breakpoint, number>>;
 /**
  * View page grid item size
  */

package/lib/cjs/custom/CustomAttributeArea.js

@@ -44,7 +44,10 @@ function InputItemUIs({ data }) {
     return ((0, jsx_runtime_1.jsxs)(Grid_1.default, { container: true, spacing: 2, marginTop: 1, children: [(0, jsx_runtime_1.jsx)(Grid_1.default, { size: { xs: 12, sm: 6 }, children: (0, jsx_runtime_1.jsx)(ComboBox_1.ComboBox, { name: "type", label: labels.type, inputRequired: true, size: "small", loadData: () => Promise.resolve(types.map((t) => ({ id: t, label: t }))), onValueChange: (item) => {
                         const type = item?.id;
                         optionsRef.current.disabled =
-                            type !== "combobox" && type !== "select";
+                            type !== "combobox" &&
+                                type !== "select" &&
+                                type !== "checkbox" &&
+                                type !== "radio";
                         const nameInput = nameRef.current;
                         if (nameInput.value === "" &&
                             (type === "amountlabel" || type === "divider" || type === "label")) {

package/lib/cjs/custom/CustomFieldUI.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CustomFieldUI = CustomFieldUI;
 const react_1 = __importDefault(require("react"));
 const CustomFieldUtils_1 = require("./CustomFieldUtils");
+const ReactApp_1 = require("../app/ReactApp");
 /**
  * CustomFieldUI component
  * @param props Props
@@ -14,6 +15,8 @@ const CustomFieldUtils_1 = require("./CustomFieldUtils");
 function CustomFieldUI(props) {
     // Destruct
     const { fields, initialValue, mref, onChange } = props;
+    // App
+    const app = (0, ReactApp_1.useAppContext)();
     // Field component collections
     const collections = {};
     // Value reference
@@ -36,5 +39,5 @@ function CustomFieldUI(props) {
     }, (name, fieldValue) => {
         valueRef.current[name] = fieldValue;
         onChange?.(valueRef.current, name, fieldValue);
-    });
+    }, (input) => app?.get(input) ?? input);
 }

package/lib/cjs/custom/CustomFieldViewUI.d.ts

@@ -0,0 +1,18 @@
+import { CustomFieldData } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
+import { ViewContainerProps } from "../ViewContainer";
+/**
+ * Custom field view UI Props
+ */
+export type CustomFieldViewUIProps<T extends DataTypes.StringRecord> = Omit<ViewContainerProps<T>, "fields"> & {
+    /**
+     * Custom fields
+     */
+    fields: CustomFieldData[];
+};
+/**
+ * Custom field view UI
+ * @param props Props
+ * @returns Component
+ */
+export declare function CustomFieldViewUI<T extends DataTypes.StringRecord>(props: CustomFieldViewUIProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/custom/CustomFieldViewUI.js

@@ -0,0 +1,139 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CustomFieldViewUI = CustomFieldViewUI;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const shared_1 = require("@etsoo/shared");
+const material_1 = require("@mui/material");
+const ViewContainer_1 = require("../ViewContainer");
+const ReactApp_1 = require("../app/ReactApp");
+/**
+ * Transform custom field space
+ * @param space Space
+ * @returns Result
+ */
+function transformSize(space) {
+    if (space == null)
+        return undefined;
+    switch (space) {
+        case "full":
+            return true;
+        case "quater":
+            return "medium";
+        case "five":
+            return { xs: 12, sm: 12, md: 5, lg: 4, xl: 3 };
+        case "seven":
+            return { xs: 12, sm: 12, md: 7, lg: 6, xl: 5 };
+        default:
+            return false;
+    }
+}
+/**
+ * Custom field view UI
+ * @param props Props
+ * @returns Component
+ */
+function CustomFieldViewUI(props) {
+    // Destruct
+    const { fields, ...rest } = props;
+    // App
+    const app = (0, ReactApp_1.useRequiredAppContext)();
+    // Mapping
+    const mappedFields = fields.map((f) => {
+        const type = f.type;
+        const label = f.label ? (app.get(f.label) ?? f.label) : undefined;
+        const singleRow = transformSize(f.space);
+        const name = f.name ?? "";
+        let item;
+        switch (type) {
+            case "amountlabel":
+                const currency = f.mainSlotProps?.currency;
+                const symbol = currency ? shared_1.NumberUtils.getCurrencySymbol(currency) : "";
+                item = {
+                    label: "",
+                    singleRow,
+                    data: label
+                        ? () => `${symbol}${app.formatNumber(parseFloat(label))}`
+                        : () => ""
+                };
+                break;
+            case "checkbox":
+            case "combobox":
+            case "radio":
+            case "select":
+                item = {
+                    label,
+                    singleRow,
+                    data: (data) => {
+                        const value = data[name];
+                        if (value == null)
+                            return undefined;
+                        const values = Array.isArray(value) ? value : [value];
+                        const options = f.options ?? [];
+                        const selectedOptions = options.filter((o) => values.includes(o.id));
+                        return selectedOptions
+                            .map((o) => {
+                            const label = shared_1.DataTypes.getListItemLabel(o);
+                            return app.get(label) ?? label;
+                        })
+                            .join(", ");
+                    }
+                };
+                break;
+            case "date":
+                item = {
+                    label,
+                    singleRow,
+                    data: (data) => {
+                        const value = data[name];
+                        if (value == null)
+                            return undefined;
+                        return typeof value === "string"
+                            ? (shared_1.DateUtils.parse(value)?.toLocaleDateString() ?? value)
+                            : value instanceof Date
+                                ? value.toLocaleDateString()
+                                : `${value}`;
+                    }
+                };
+                break;
+            case "divider":
+                item = {
+                    label,
+                    singleRow,
+                    data: () => (0, jsx_runtime_1.jsx)(material_1.Divider, {})
+                };
+                break;
+            case "json":
+                item = {
+                    label,
+                    singleRow,
+                    data: (data) => {
+                        const value = data[name];
+                        if (value == null)
+                            return undefined;
+                        return JSON.stringify(value, null, 2);
+                    }
+                };
+                break;
+            case "number":
+                const numberCurrency = f.mainSlotProps?.currency;
+                const numberSymbol = numberCurrency
+                    ? shared_1.NumberUtils.getCurrencySymbol(numberCurrency)
+                    : "";
+                item = {
+                    label: numberCurrency ? `${label} (${numberCurrency})` : label,
+                    singleRow,
+                    data: (data) => {
+                        const value = shared_1.NumberUtils.parse(data[name]);
+                        return value == null
+                            ? undefined
+                            : `${numberSymbol}${app.formatNumber(value)}`;
+                    }
+                };
+                break;
+            default:
+                item = { label, singleRow, data: name };
+        }
+        return item;
+    });
+    return (0, jsx_runtime_1.jsx)(ViewContainer_1.ViewContainer, { fields: mappedFields, ...rest });
+}

package/lib/cjs/index.d.ts

@@ -10,6 +10,7 @@ export * from "./custom/CustomAttributeArea";
 export * from "./custom/CustomFieldUI";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
+export * from "./custom/CustomFieldViewUI";
 export * from "./custom/CustomFieldWindow";
 export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";

package/lib/cjs/index.js

@@ -26,6 +26,7 @@ __exportStar(require("./custom/CustomAttributeArea"), exports);
 __exportStar(require("./custom/CustomFieldUI"), exports);
 __exportStar(require("./custom/CustomFieldUtils"), exports);
 __exportStar(require("./custom/CustomFieldViewer"), exports);
+__exportStar(require("./custom/CustomFieldViewUI"), exports);
 __exportStar(require("./custom/CustomFieldWindow"), exports);
 __exportStar(require("./html/HtmlDiv"), exports);
 __exportStar(require("./messages/MessageUtils"), exports);

package/lib/mjs/ViewContainer.d.ts

@@ -6,7 +6,7 @@ import { Breakpoint } from "@mui/material/styles";
 /**
  * View page item size
  */
-export type ViewPageItemSize = Record<Breakpoint, number | undefined>;
+export type ViewPageItemSize = Partial<Record<Breakpoint, number>>;
 /**
  * View page grid item size
  */

package/lib/mjs/custom/CustomAttributeArea.js

@@ -38,7 +38,10 @@ function InputItemUIs({ data }) {
     return (_jsxs(Grid, { container: true, spacing: 2, marginTop: 1, children: [_jsx(Grid, { size: { xs: 12, sm: 6 }, children: _jsx(ComboBox, { name: "type", label: labels.type, inputRequired: true, size: "small", loadData: () => Promise.resolve(types.map((t) => ({ id: t, label: t }))), onValueChange: (item) => {
                         const type = item?.id;
                         optionsRef.current.disabled =
-                            type !== "combobox" && type !== "select";
+                            type !== "combobox" &&
+                                type !== "select" &&
+                                type !== "checkbox" &&
+                                type !== "radio";
                         const nameInput = nameRef.current;
                         if (nameInput.value === "" &&
                             (type === "amountlabel" || type === "divider" || type === "label")) {

package/lib/mjs/custom/CustomFieldUI.js

@@ -1,5 +1,6 @@
 import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
+import { useAppContext } from "../app/ReactApp";
 /**
  * CustomFieldUI component
  * @param props Props
@@ -8,6 +9,8 @@ import { CustomFieldUtils } from "./CustomFieldUtils";
 export function CustomFieldUI(props) {
     // Destruct
     const { fields, initialValue, mref, onChange } = props;
+    // App
+    const app = useAppContext();
     // Field component collections
     const collections = {};
     // Value reference
@@ -30,5 +33,5 @@ export function CustomFieldUI(props) {
     }, (name, fieldValue) => {
         valueRef.current[name] = fieldValue;
         onChange?.(valueRef.current, name, fieldValue);
-    });
+    }, (input) => app?.get(input) ?? input);
 }

package/lib/mjs/custom/CustomFieldViewUI.d.ts

@@ -0,0 +1,18 @@
+import { CustomFieldData } from "@etsoo/appscript";
+import { DataTypes } from "@etsoo/shared";
+import { ViewContainerProps } from "../ViewContainer";
+/**
+ * Custom field view UI Props
+ */
+export type CustomFieldViewUIProps<T extends DataTypes.StringRecord> = Omit<ViewContainerProps<T>, "fields"> & {
+    /**
+     * Custom fields
+     */
+    fields: CustomFieldData[];
+};
+/**
+ * Custom field view UI
+ * @param props Props
+ * @returns Component
+ */
+export declare function CustomFieldViewUI<T extends DataTypes.StringRecord>(props: CustomFieldViewUIProps<T>): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/custom/CustomFieldViewUI.js

@@ -0,0 +1,136 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { DataTypes, DateUtils, NumberUtils } from "@etsoo/shared";
+import { Divider } from "@mui/material";
+import { ViewContainer } from "../ViewContainer";
+import { useRequiredAppContext } from "../app/ReactApp";
+/**
+ * Transform custom field space
+ * @param space Space
+ * @returns Result
+ */
+function transformSize(space) {
+    if (space == null)
+        return undefined;
+    switch (space) {
+        case "full":
+            return true;
+        case "quater":
+            return "medium";
+        case "five":
+            return { xs: 12, sm: 12, md: 5, lg: 4, xl: 3 };
+        case "seven":
+            return { xs: 12, sm: 12, md: 7, lg: 6, xl: 5 };
+        default:
+            return false;
+    }
+}
+/**
+ * Custom field view UI
+ * @param props Props
+ * @returns Component
+ */
+export function CustomFieldViewUI(props) {
+    // Destruct
+    const { fields, ...rest } = props;
+    // App
+    const app = useRequiredAppContext();
+    // Mapping
+    const mappedFields = fields.map((f) => {
+        const type = f.type;
+        const label = f.label ? (app.get(f.label) ?? f.label) : undefined;
+        const singleRow = transformSize(f.space);
+        const name = f.name ?? "";
+        let item;
+        switch (type) {
+            case "amountlabel":
+                const currency = f.mainSlotProps?.currency;
+                const symbol = currency ? NumberUtils.getCurrencySymbol(currency) : "";
+                item = {
+                    label: "",
+                    singleRow,
+                    data: label
+                        ? () => `${symbol}${app.formatNumber(parseFloat(label))}`
+                        : () => ""
+                };
+                break;
+            case "checkbox":
+            case "combobox":
+            case "radio":
+            case "select":
+                item = {
+                    label,
+                    singleRow,
+                    data: (data) => {
+                        const value = data[name];
+                        if (value == null)
+                            return undefined;
+                        const values = Array.isArray(value) ? value : [value];
+                        const options = f.options ?? [];
+                        const selectedOptions = options.filter((o) => values.includes(o.id));
+                        return selectedOptions
+                            .map((o) => {
+                            const label = DataTypes.getListItemLabel(o);
+                            return app.get(label) ?? label;
+                        })
+                            .join(", ");
+                    }
+                };
+                break;
+            case "date":
+                item = {
+                    label,
+                    singleRow,
+                    data: (data) => {
+                        const value = data[name];
+                        if (value == null)
+                            return undefined;
+                        return typeof value === "string"
+                            ? (DateUtils.parse(value)?.toLocaleDateString() ?? value)
+                            : value instanceof Date
+                                ? value.toLocaleDateString()
+                                : `${value}`;
+                    }
+                };
+                break;
+            case "divider":
+                item = {
+                    label,
+                    singleRow,
+                    data: () => _jsx(Divider, {})
+                };
+                break;
+            case "json":
+                item = {
+                    label,
+                    singleRow,
+                    data: (data) => {
+                        const value = data[name];
+                        if (value == null)
+                            return undefined;
+                        return JSON.stringify(value, null, 2);
+                    }
+                };
+                break;
+            case "number":
+                const numberCurrency = f.mainSlotProps?.currency;
+                const numberSymbol = numberCurrency
+                    ? NumberUtils.getCurrencySymbol(numberCurrency)
+                    : "";
+                item = {
+                    label: numberCurrency ? `${label} (${numberCurrency})` : label,
+                    singleRow,
+                    data: (data) => {
+                        const value = NumberUtils.parse(data[name]);
+                        return value == null
+                            ? undefined
+                            : `${numberSymbol}${app.formatNumber(value)}`;
+                    }
+                };
+                break;
+            default:
+                item = { label, singleRow, data: name };
+        }
+        return item;
+    });
+    return _jsx(ViewContainer, { fields: mappedFields, ...rest });
+}

package/lib/mjs/index.d.ts

@@ -10,6 +10,7 @@ export * from "./custom/CustomAttributeArea";
 export * from "./custom/CustomFieldUI";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
+export * from "./custom/CustomFieldViewUI";
 export * from "./custom/CustomFieldWindow";
 export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";

package/lib/mjs/index.js

@@ -10,6 +10,7 @@ export * from "./custom/CustomAttributeArea";
 export * from "./custom/CustomFieldUI";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
+export * from "./custom/CustomFieldViewUI";
 export * from "./custom/CustomFieldWindow";
 export * from "./html/HtmlDiv";
 export * from "./messages/MessageUtils";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.6.21",
+  "version": "1.6.23",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -43,12 +43,12 @@
     "@etsoo/notificationbase": "^1.1.66",
     "@etsoo/react": "^1.8.78",
     "@etsoo/shared": "^1.2.80",
-    "@mui/icons-material": "^7.3.8",
-    "@mui/material": "^7.3.8",
-    "@mui/x-data-grid": "^8.27.3",
+    "@mui/icons-material": "^7.3.9",
+    "@mui/material": "^7.3.9",
+    "@mui/x-data-grid": "^8.27.4",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
-    "dompurify": "^3.3.1",
+    "dompurify": "^3.3.2",
     "eventemitter3": "^5.0.4",
     "pica": "^9.0.1",
     "pulltorefreshjs": "^0.1.22",

package/src/ViewContainer.tsx

@@ -25,14 +25,14 @@ function getResp(singleRow: ViewPageRowType) {
     typeof singleRow === "object"
       ? singleRow
       : singleRow === "medium"
-      ? ViewPageSize.medium
-      : singleRow === "large"
-      ? ViewPageSize.large
-      : singleRow === true
-      ? ViewPageSize.line
-      : singleRow === false
-      ? ViewPageSize.smallLine
-      : ViewPageSize.small;
+        ? ViewPageSize.medium
+        : singleRow === "large"
+          ? ViewPageSize.large
+          : singleRow === true
+            ? ViewPageSize.line
+            : singleRow === false
+              ? ViewPageSize.smallLine
+              : ViewPageSize.small;
   return size;
 }
 
@@ -93,12 +93,12 @@ function getItemField<T extends object>(
       fieldLabel === ""
         ? undefined
         : fieldLabel == null && typeof fieldData === "string"
-        ? addLabelEnd(app.get<string>(fieldData) ?? fieldData)
-        : typeof fieldLabel === "function"
-        ? fieldLabel(data)
-        : fieldLabel != null
-        ? addLabelEnd(app.get<string>(fieldLabel) ?? fieldLabel)
-        : undefined;
+          ? addLabelEnd(app.get<string>(fieldData) ?? fieldData)
+          : typeof fieldLabel === "function"
+            ? fieldLabel(data)
+            : fieldLabel != null
+              ? addLabelEnd(app.get<string>(fieldLabel) ?? fieldLabel)
+              : undefined;
   } else {
     // Single field format
     itemData = formatItemData(app, data[field]);
@@ -126,7 +126,7 @@ function getItemSize(bp: Breakpoint, size: ViewPageItemSize) {
 /**
  * View page item size
  */
-export type ViewPageItemSize = Record<Breakpoint, number | undefined>;
+export type ViewPageItemSize = Partial<Record<Breakpoint, number>>;
 
 const breakpoints: Breakpoint[] = ["xs", "sm", "md", "lg", "xl"];
 

package/src/custom/CustomAttributeArea.tsx

@@ -68,7 +68,10 @@ function InputItemUIs({ data }: { data?: CustomFieldData }) {
           onValueChange={(item) => {
             const type = item?.id;
             optionsRef.current!.disabled =
-              type !== "combobox" && type !== "select";
+              type !== "combobox" &&
+              type !== "select" &&
+              type !== "checkbox" &&
+              type !== "radio";
 
             const nameInput = nameRef.current!;
             if (

package/src/custom/CustomFieldUI.tsx

@@ -2,6 +2,7 @@ import { CustomFieldData, CustomFieldRef } from "@etsoo/appscript";
 import { CustomFieldReactCollection } from "@etsoo/react";
 import React from "react";
 import { CustomFieldUtils } from "./CustomFieldUtils";
+import { useAppContext } from "../app/ReactApp";
 
 /**
  * CustomFieldUI component props
@@ -46,6 +47,9 @@ export function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(
   // Destruct
   const { fields, initialValue, mref, onChange } = props;
 
+  // App
+  const app = useAppContext();
+
   // Field component collections
   const collections: CustomFieldReactCollection<D> = {};
 
@@ -78,6 +82,7 @@ export function CustomFieldUI<D extends CustomFieldData = CustomFieldData>(
     (name, fieldValue) => {
       valueRef.current[name] = fieldValue;
       onChange?.(valueRef.current, name, fieldValue);
-    }
+    },
+    (input) => app?.get(input) ?? input
   );
 }

package/src/custom/CustomFieldViewUI.tsx

@@ -0,0 +1,163 @@
+import { CustomFieldData, CustomFieldSpace } from "@etsoo/appscript";
+import { DataTypes, DateUtils, NumberUtils } from "@etsoo/shared";
+import { Divider } from "@mui/material";
+import {
+  ViewContainer,
+  ViewContainerProps,
+  ViewPageFieldType,
+  ViewPageRowType
+} from "../ViewContainer";
+import { useRequiredAppContext } from "../app/ReactApp";
+
+/**
+ * Custom field view UI Props
+ */
+export type CustomFieldViewUIProps<T extends DataTypes.StringRecord> = Omit<
+  ViewContainerProps<T>,
+  "fields"
+> & {
+  /**
+   * Custom fields
+   */
+  fields: CustomFieldData[];
+};
+
+/**
+ * Transform custom field space
+ * @param space Space
+ * @returns Result
+ */
+function transformSize(space?: CustomFieldSpace): ViewPageRowType | undefined {
+  if (space == null) return undefined;
+
+  switch (space) {
+    case "full":
+      return true;
+    case "quater":
+      return "medium";
+    case "five":
+      return { xs: 12, sm: 12, md: 5, lg: 4, xl: 3 };
+    case "seven":
+      return { xs: 12, sm: 12, md: 7, lg: 6, xl: 5 };
+    default:
+      return false;
+  }
+}
+
+/**
+ * Custom field view UI
+ * @param props Props
+ * @returns Component
+ */
+export function CustomFieldViewUI<T extends DataTypes.StringRecord>(
+  props: CustomFieldViewUIProps<T>
+) {
+  // Destruct
+  const { fields, ...rest } = props;
+
+  // App
+  const app = useRequiredAppContext();
+
+  // Mapping
+  const mappedFields = fields.map((f) => {
+    const type = f.type;
+    const label = f.label ? (app.get(f.label) ?? f.label) : undefined;
+    const singleRow = transformSize(f.space);
+    const name = f.name ?? "";
+    let item: ViewPageFieldType<T>;
+    switch (type) {
+      case "amountlabel":
+        const currency = f.mainSlotProps?.currency;
+        const symbol = currency ? NumberUtils.getCurrencySymbol(currency) : "";
+        item = {
+          label: "",
+          singleRow,
+          data: label
+            ? () => `${symbol}${app.formatNumber(parseFloat(label))}`
+            : () => ""
+        };
+        break;
+      case "checkbox":
+      case "combobox":
+      case "radio":
+      case "select":
+        item = {
+          label,
+          singleRow,
+          data: (data) => {
+            const value = data[name];
+            if (value == null) return undefined;
+
+            const values = Array.isArray(value) ? value : [value];
+            const options = f.options ?? [];
+            const selectedOptions = options.filter((o) =>
+              values.includes(o.id)
+            );
+            return selectedOptions
+              .map((o) => {
+                const label = DataTypes.getListItemLabel(o);
+                return app.get(label) ?? label;
+              })
+              .join(", ");
+          }
+        };
+        break;
+      case "date":
+        item = {
+          label,
+          singleRow,
+          data: (data) => {
+            const value = data[name];
+            if (value == null) return undefined;
+
+            return typeof value === "string"
+              ? (DateUtils.parse(value)?.toLocaleDateString() ?? value)
+              : value instanceof Date
+                ? value.toLocaleDateString()
+                : `${value}`;
+          }
+        };
+        break;
+      case "divider":
+        item = {
+          label,
+          singleRow,
+          data: () => <Divider />
+        };
+        break;
+      case "json":
+        item = {
+          label,
+          singleRow,
+          data: (data) => {
+            const value = data[name];
+            if (value == null) return undefined;
+            return JSON.stringify(value, null, 2);
+          }
+        };
+        break;
+      case "number":
+        const numberCurrency = f.mainSlotProps?.currency;
+        const numberSymbol = numberCurrency
+          ? NumberUtils.getCurrencySymbol(numberCurrency)
+          : "";
+        item = {
+          label: numberCurrency ? `${label} (${numberCurrency})` : label,
+          singleRow,
+          data: (data) => {
+            const value = NumberUtils.parse(data[name]);
+            return value == null
+              ? undefined
+              : `${numberSymbol}${app.formatNumber(value)}`;
+          }
+        };
+        break;
+      default:
+        item = { label, singleRow, data: name };
+    }
+
+    return item;
+  });
+
+  return <ViewContainer fields={mappedFields} {...rest} />;
+}

package/src/index.ts

@@ -11,6 +11,7 @@ export * from "./custom/CustomAttributeArea";
 export * from "./custom/CustomFieldUI";
 export * from "./custom/CustomFieldUtils";
 export * from "./custom/CustomFieldViewer";
+export * from "./custom/CustomFieldViewUI";
 export * from "./custom/CustomFieldWindow";
 
 export * from "./html/HtmlDiv";