@etsoo/materialui 1.6.22 → 1.6.24

package/lib/cjs/FabBox.js

@@ -9,7 +9,7 @@ const Box_1 = __importDefault(require("@mui/material/Box"));
 const Paper_1 = __importDefault(require("@mui/material/Paper"));
 const styles_1 = require("@mui/material/styles");
 const react_1 = __importDefault(require("react"));
-const initOpactiy = 0.15;
+const initOpactiy = 0.25;
 /**
  * Fabs container box
  * @param props Props

package/lib/cjs/ResponsibleContainer.js

@@ -133,20 +133,15 @@ function ResponsibleContainer(props) {
         return ((0, jsx_runtime_1.jsx)(Box_1.default, { className: "ListBox", sx: { height: heightLocal }, children: (0, jsx_runtime_1.jsx)(ScrollerListEx_1.ScrollerListEx, { autoLoad: !hasFields, cacheKey: cacheKey, cacheMinutes: cacheMinutes, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && react_2.ReactUtils.isSafeClick(event) && quickAction(data), rowHeight: getRowHeight(false), ...listProps }) }));
     })();
     const searchBar = react_1.default.useMemo(() => {
-        if (!hasFields ||
-            showDataGrid == null ||
-            rect?.width == null ||
-            rect.width < 20)
+        if (!hasFields || rect?.width == null || rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData) : fields;
         return ((0, jsx_runtime_1.jsx)(SearchBar_1.SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container
-    const pullContainer = showDataGrid == null
-        ? undefined
-        : showDataGrid
-            ? ".DataGridEx-Body"
-            : ".ScrollerListEx-Body";
+    const pullContainer = showDataGrid
+        ? ".DataGridEx-Body"
+        : ".ScrollerListEx-Body";
     // Layout
     return ((0, jsx_runtime_1.jsxs)(Box_1.default, { sx: containerBoxSx == null
             ? undefined

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/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/FabBox.js

@@ -3,7 +3,7 @@ import Box from "@mui/material/Box";
 import Paper from "@mui/material/Paper";
 import { useTheme } from "@mui/material/styles";
 import React from "react";
-const initOpactiy = 0.15;
+const initOpactiy = 0.25;
 /**
  * Fabs container box
  * @param props Props

package/lib/mjs/ResponsibleContainer.js

@@ -127,20 +127,15 @@ export function ResponsibleContainer(props) {
         return (_jsx(Box, { className: "ListBox", sx: { height: heightLocal }, children: _jsx(ScrollerListEx, { autoLoad: !hasFields, cacheKey: cacheKey, cacheMinutes: cacheMinutes, height: heightLocal, loadData: localLoadData, mRef: mRefs, onClick: (event, data) => quickAction && ReactUtils.isSafeClick(event) && quickAction(data), rowHeight: getRowHeight(false), ...listProps }) }));
     })();
     const searchBar = React.useMemo(() => {
-        if (!hasFields ||
-            showDataGrid == null ||
-            rect?.width == null ||
-            rect.width < 20)
+        if (!hasFields || rect?.width == null || rect.width < 20)
             return;
         const f = typeof fields == "function" ? fields(searchData) : fields;
         return (_jsx(SearchBar, { fields: f, onSubmit: onSubmit, className: `searchBar${showDataGrid ? "Grid" : "List"}`, width: rect.width, top: searchBarTop }));
     }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
     // Pull container
-    const pullContainer = showDataGrid == null
-        ? undefined
-        : showDataGrid
-            ? ".DataGridEx-Body"
-            : ".ScrollerListEx-Body";
+    const pullContainer = showDataGrid
+        ? ".DataGridEx-Body"
+        : ".ScrollerListEx-Body";
     // Layout
     return (_jsxs(Box, { sx: containerBoxSx == null
             ? undefined

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/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.22",
+  "version": "1.6.24",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -41,7 +41,7 @@
     "@emotion/styled": "^11.14.1",
     "@etsoo/appscript": "^1.6.56",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.78",
+    "@etsoo/react": "^1.8.79",
     "@etsoo/shared": "^1.2.80",
     "@mui/icons-material": "^7.3.9",
     "@mui/material": "^7.3.9",

package/src/FabBox.tsx

@@ -4,7 +4,7 @@ import { useTheme } from "@mui/material/styles";
 import React from "react";
 
 type SharedProps = keyof BoxProps & keyof PaperProps;
-const initOpactiy = 0.15;
+const initOpactiy = 0.25;
 
 /**
  * Fabs container box props

package/src/ResponsibleContainer.tsx

@@ -373,13 +373,7 @@ export function ResponsibleContainer<T extends object, F>(
   })();
 
   const searchBar = React.useMemo(() => {
-    if (
-      !hasFields ||
-      showDataGrid == null ||
-      rect?.width == null ||
-      rect.width < 20
-    )
-      return;
+    if (!hasFields || rect?.width == null || rect.width < 20) return;
 
     const f = typeof fields == "function" ? fields(searchData) : fields;
 
@@ -395,12 +389,9 @@ export function ResponsibleContainer<T extends object, F>(
   }, [showDataGrid, hasFields, searchBarHeight, rect?.width]);
 
   // Pull container
-  const pullContainer =
-    showDataGrid == null
-      ? undefined
-      : showDataGrid
-      ? ".DataGridEx-Body"
-      : ".ScrollerListEx-Body";
+  const pullContainer = showDataGrid
+    ? ".DataGridEx-Body"
+    : ".ScrollerListEx-Body";
 
   // Layout
   return (

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/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";