@etsoo/materialui 1.3.33 → 1.3.35

package/lib/DataGridEx.js

@@ -84,7 +84,7 @@ export function DataGridEx(props) {
                 sortLabel = headerCellRenderer({
                     cellProps,
                     column,
-                    columnIndex: checkable ? index - 1 : index,
+                    columnIndex: checkable ? index - 1 : index, // Ignore the checkbox case,
                     states
                 });
             }
@@ -113,7 +113,7 @@ export function DataGridEx(props) {
             const cell = footerItemRenderer
                 ? footerItemRenderer(rows, {
                     column,
-                    index: checkable ? index - 1 : index,
+                    index: checkable ? index - 1 : index, // Ignore the checkbox case
                     states,
                     cellProps,
                     checkable
@@ -127,7 +127,7 @@ export function DataGridEx(props) {
     const { alternatingColors = [theme.palette.grey[100], undefined], borderRowsCount, bottomHeight = 53, checkable = false, className, columns, defaultOrderBy, height, headerHeight = 56, headerRenderer = defaultHeaderRenderer, footerRenderer = defaultFooterRenderer, footerItemRenderer = DataGridRenderers.defaultFooterItemRenderer, hideFooter = false, hoverColor = "#f6f9fb", idField = "id", mRef = React.createRef(), onClick, onDoubleClick, selectable = true, selectedColor = "#edf4fb", width, ...rest } = props;
     if (checkable) {
         const cbColumn = {
-            field: "selected",
+            field: "selected", // Avoid validation from data model
             header: "",
             sortable: false,
             width: 50,

package/lib/FieldSetEx.d.ts

@@ -0,0 +1,21 @@
+import { FormControlProps } from "@mui/material";
+import React from "react";
+/**
+ * FieldSetEx props
+ */
+export type FieldSetExProps = Omit<FormControlProps, "defaultValue" | "variant"> & {
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Helper text
+     */
+    helperText?: React.ReactNode;
+};
+/**
+ * FieldSetEx
+ * @param props Props
+ * @returns Component
+ */
+export declare function FieldSetEx(props: FieldSetExProps): React.JSX.Element;

package/lib/FieldSetEx.js

@@ -0,0 +1,29 @@
+import { FormControl, FormHelperText, InputLabel } from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+/**
+ * FieldSetEx
+ * @param props Props
+ * @returns Component
+ */
+export function FieldSetEx(props) {
+    // Destruct
+    const { label, helperText, required, fullWidth, children, ...rest } = props;
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
+            label && (React.createElement(InputLabel, { required: required, variant: "outlined", shrink: true }, label)),
+            React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: children, sx: {
+                    cursor: "default",
+                    display: "flex",
+                    flexWrap: "wrap",
+                    gap: 1,
+                    paddingX: 2,
+                    paddingY: "7px",
+                    width: fullWidth ? "100%" : "auto",
+                    "& input": {
+                        display: "none"
+                    }
+                } })),
+        helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
+}

package/lib/OptionGroup.d.ts

@@ -14,7 +14,7 @@ export interface OptionGroupRef {
 /**
  * OptionGroup props
  */
-export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps, "defaultValue"> & {
     /**
      * Default value
      */
@@ -67,10 +67,6 @@ export type OptionGroupProps<T extends object, D extends DataTypes.Keys<T>, L ex
      * Item size
      */
     itemSize?: "small" | "medium";
-    /**
-     * Item height in px
-     */
-    itemHeight?: number;
     /**
      * Helper text
      */

package/lib/OptionGroup.js

@@ -10,18 +10,9 @@ import React from "react";
 export function OptionGroup(props) {
     var _a;
     // Destruct
-    const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, itemHeight = row ? 56 : 42, helperText, variant, required, fullWidth, sx = {}, ...rest } = props;
+    const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", multiple = false, mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, ...rest } = props;
     // Outlined
     const outlined = variant === "outlined";
-    if (sx) {
-        Object.assign(sx, {
-            height: outlined
-                ? row
-                    ? `${itemHeight}px`
-                    : `${options.length * itemHeight + 14}px`
-                : undefined
-        });
-    }
     // Get option value
     // D type should be the source id type
     const getOptionValue = (option) => {
@@ -101,16 +92,18 @@ export function OptionGroup(props) {
         } }, list));
     // Layout
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, sx: sx, ...rest },
+        React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
             label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
-            outlined && (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, sx: {
+            outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
                     cursor: "default",
-                    position: "absolute",
+                    display: "flex",
+                    gap: 1,
+                    paddingX: 2,
+                    paddingY: "7px",
                     width: fullWidth ? "100%" : "auto",
                     "& input": {
-                        visibility: "hidden"
+                        display: "none"
                     }
-                } })),
-            React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined }, group)),
+                } })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
         helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
 }

package/lib/OptionGroupFlag.d.ts

@@ -14,7 +14,7 @@ export interface OptionGroupFlagRef {
 /**
  * OptionGroupFlag props
  */
-export type OptionGroupFlagProps<T extends object, D extends DataTypes.Keys<T, number>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+export type OptionGroupFlagProps<T extends object, D extends DataTypes.Keys<T, number>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps, "defaultValue"> & {
     /**
      * Default value
      */
@@ -63,10 +63,6 @@ export type OptionGroupFlagProps<T extends object, D extends DataTypes.Keys<T, n
      * Item size
      */
     itemSize?: "small" | "medium";
-    /**
-     * Item height in px
-     */
-    itemHeight?: number;
     /**
      * Helper text
      */

package/lib/OptionGroupFlag.js

@@ -9,18 +9,9 @@ import React from "react";
  */
 export function OptionGroupFlag(props) {
     // Destruct
-    const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", mRef, name, onValueChange, options, readOnly, row, itemSize, itemHeight = row ? 56 : 42, helperText, variant, required, fullWidth, sx = {}, ...rest } = props;
+    const { getOptionLabel, defaultValue, idField = "id", label, labelField = "label", mRef, name, onValueChange, options, readOnly, row, itemSize, helperText, variant, required, fullWidth, sx = {}, ...rest } = props;
     // Outlined
     const outlined = variant === "outlined";
-    if (sx) {
-        Object.assign(sx, {
-            height: outlined
-                ? row
-                    ? `${itemHeight}px`
-                    : `${options.length * itemHeight + 14}px`
-                : undefined
-        });
-    }
     // Get option value
     // D type should be the source id type
     const getOptionValue = (option) => {
@@ -77,19 +68,22 @@ export function OptionGroupFlag(props) {
         const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
         return (React.createElement(FormControlLabel, { key: ov, control: control, value: ov, label: label }));
     });
+    // Group
+    const group = React.createElement(FormGroup, { row: row }, list);
     // Layout
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, sx: sx, ...rest },
+        React.createElement(FormControl, { fullWidth: fullWidth, sx: sx, ...rest },
             label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
-            outlined && (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, sx: {
+            outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
                     cursor: "default",
-                    position: "absolute",
+                    display: "flex",
+                    gap: 1,
+                    paddingX: 2,
+                    paddingY: "7px",
                     width: fullWidth ? "100%" : "auto",
                     "& input": {
-                        visibility: "hidden"
+                        display: "none"
                     }
-                } })),
-            React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined },
-                React.createElement(FormGroup, { row: row }, list))),
+                } })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
         helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
 }

package/lib/SwitchField.d.ts

@@ -3,7 +3,7 @@ import React from "react";
 /**
  * SwitchField props
  */
-export type SwitchFieldProps = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+export type SwitchFieldProps = Omit<FormControlProps, "defaultValue"> & {
     /**
      * Helper text
      */
@@ -12,6 +12,10 @@ export type SwitchFieldProps = Omit<FormControlProps<"fieldset">, "defaultValue"
      * Label
      */
     label?: string;
+    /**
+     * Field name
+     */
+    name: string;
     /**
      * Checked
      */
@@ -28,10 +32,6 @@ export type SwitchFieldProps = Omit<FormControlProps<"fieldset">, "defaultValue"
      * End label
      */
     endLabel?: string;
-    /**
-     * Height in px
-     */
-    height?: number;
     /**
      * Value, default is true
      */

package/lib/SwitchField.js

@@ -9,25 +9,25 @@ import { SwitchAnt } from "./SwitchAnt";
  */
 export function SwitchField(props) {
     // Destruct
-    const { activeColor, startLabel, endLabel, value = true, fullWidth, height = 56, helperText, label, name, required, sx = {}, checked, variant = "outlined", ...rest } = props;
+    const { activeColor, startLabel, endLabel, value = true, fullWidth, helperText, label, name, required, checked, variant = "outlined", ...rest } = props;
     // Outlined
     const outlined = variant === "outlined";
-    if (sx) {
-        Object.assign(sx, { height: outlined ? `${height}px` : undefined });
-    }
+    // Group
+    const group = (React.createElement(SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }));
     // Layout
     return (React.createElement(React.Fragment, null,
-        React.createElement(FormControl, { component: "fieldset", fullWidth: fullWidth, sx: sx, ...rest },
+        React.createElement(FormControl, { fullWidth: fullWidth, ...rest },
             label && (React.createElement(InputLabel, { required: required, variant: variant, shrink: true }, label)),
-            outlined && (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, sx: {
+            outlined ? (React.createElement(NotchedOutline, { label: label && required ? label + " *" : label, notched: true, endAdornment: group, sx: {
                     cursor: "default",
-                    position: "absolute",
+                    display: "flex",
+                    gap: 1,
+                    paddingX: 2,
+                    paddingY: "7px",
                     width: fullWidth ? "100%" : "auto",
                     "& input": {
-                        visibility: "hidden"
+                        display: "none"
                     }
-                } })),
-            React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined },
-                React.createElement(SwitchAnt, { activeColor: activeColor, name: name, startLabel: startLabel, endLabel: endLabel, value: value, checked: checked }))),
+                } })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
         helperText && React.createElement(FormHelperText, null, helperText)));
 }

package/lib/index.d.ts

@@ -55,6 +55,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FieldSetEx";
 export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";

package/lib/index.js

@@ -55,6 +55,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FieldSetEx";
 export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";

package/lib/pages/ViewPage.d.ts

@@ -37,7 +37,7 @@ export interface ViewPageField<T extends object> extends GridProps {
     /**
      * Label field
      */
-    label?: string | (() => React.ReactNode);
+    label?: string | ((item: T) => React.ReactNode);
     /**
      * Display as single row
      */

package/lib/pages/ViewPage.js

@@ -86,7 +86,7 @@ function getItemField(field, data) {
         // Field label
         itemLabel =
             typeof fieldLabel === "function"
-                ? fieldLabel()
+                ? fieldLabel(data)
                 : fieldLabel != null
                     ? (_b = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get(fieldLabel)) !== null && _b !== void 0 ? _b : fieldLabel
                     : fieldLabel;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.33",
+  "version": "1.3.35",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,18 +50,18 @@
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.72",
+    "@etsoo/appscript": "^1.4.73",
     "@etsoo/notificationbase": "^1.1.32",
     "@etsoo/react": "^1.7.24",
     "@etsoo/shared": "^1.2.22",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/material": "^5.14.17",
-    "@mui/x-data-grid": "^6.18.1",
+    "@mui/icons-material": "^5.14.19",
+    "@mui/material": "^5.14.19",
+    "@mui/x-data-grid": "^6.18.2",
     "@types/pica": "^9.0.4",
     "@types/pulltorefreshjs": "^0.1.7",
-    "@types/react": "^18.2.37",
+    "@types/react": "^18.2.40",
     "@types/react-avatar-editor": "^13.0.2",
-    "@types/react-dom": "^18.2.15",
+    "@types/react-dom": "^18.2.17",
     "@types/react-input-mask": "^3.0.5",
     "chart.js": "^4.4.0",
     "chartjs-plugin-datalabels": "^2.2.0",
@@ -75,20 +75,20 @@
     "react-imask": "6.6.3"
   },
   "devDependencies": {
-    "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.3",
-    "@babel/plugin-transform-runtime": "^7.23.3",
-    "@babel/preset-env": "^7.23.3",
+    "@babel/cli": "^7.23.4",
+    "@babel/core": "^7.23.5",
+    "@babel/plugin-transform-runtime": "^7.23.4",
+    "@babel/preset-env": "^7.23.5",
     "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
-    "@babel/runtime-corejs3": "^7.23.2",
-    "@testing-library/jest-dom": "^6.1.4",
-    "@testing-library/react": "^14.1.0",
-    "@types/jest": "^29.5.8",
-    "@typescript-eslint/eslint-plugin": "^6.10.0",
-    "@typescript-eslint/parser": "^6.10.0",
+    "@babel/runtime-corejs3": "^7.23.5",
+    "@testing-library/jest-dom": "^6.1.5",
+    "@testing-library/react": "^14.1.2",
+    "@types/jest": "^29.5.10",
+    "@typescript-eslint/eslint-plugin": "^6.13.1",
+    "@typescript-eslint/parser": "^6.13.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
-    "typescript": "^5.2.2"
+    "typescript": "^5.3.2"
   }
 }

package/src/FieldSetEx.tsx

@@ -0,0 +1,71 @@
+import {
+  FormControl,
+  FormControlProps,
+  FormHelperText,
+  InputLabel
+} from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+
+/**
+ * FieldSetEx props
+ */
+export type FieldSetExProps = Omit<
+  FormControlProps,
+  "defaultValue" | "variant"
+> & {
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Helper text
+   */
+  helperText?: React.ReactNode;
+};
+
+/**
+ * FieldSetEx
+ * @param props Props
+ * @returns Component
+ */
+export function FieldSetEx(props: FieldSetExProps) {
+  // Destruct
+  const { label, helperText, required, fullWidth, children, ...rest } = props;
+
+  // Layout
+  return (
+    <React.Fragment>
+      <FormControl fullWidth={fullWidth} {...rest}>
+        {label && (
+          <InputLabel required={required} variant="outlined" shrink>
+            {label}
+          </InputLabel>
+        )}
+        <NotchedOutline
+          label={label && required ? label + " *" : label}
+          notched
+          endAdornment={children}
+          sx={{
+            cursor: "default",
+            display: "flex",
+            flexWrap: "wrap",
+            gap: 1,
+            paddingX: 2,
+            paddingY: "7px",
+            width: fullWidth ? "100%" : "auto",
+            "& input": {
+              display: "none"
+            }
+          }}
+        />
+      </FormControl>
+      {helperText && (
+        <FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>
+          {helperText}
+        </FormHelperText>
+      )}
+    </React.Fragment>
+  );
+}

package/src/OptionGroup.tsx

@@ -38,7 +38,7 @@ export type OptionGroupProps<
   T extends object,
   D extends DataTypes.Keys<T>,
   L extends DataTypes.Keys<T, string>
-> = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+> = Omit<FormControlProps, "defaultValue"> & {
   /**
    * Default value
    */
@@ -104,11 +104,6 @@ export type OptionGroupProps<
    */
   itemSize?: "small" | "medium";
 
-  /**
-   * Item height in px
-   */
-  itemHeight?: number;
-
   /**
    * Helper text
    */
@@ -140,28 +135,16 @@ export function OptionGroup<
     readOnly,
     row,
     itemSize,
-    itemHeight = row ? 56 : 42,
     helperText,
     variant,
     required,
     fullWidth,
-    sx = {},
     ...rest
   } = props;
 
   // Outlined
   const outlined = variant === "outlined";
 
-  if (sx) {
-    Object.assign(sx, {
-      height: outlined
-        ? row
-          ? `${itemHeight}px`
-          : `${options.length * itemHeight + 14}px`
-        : undefined
-    });
-  }
-
   // Get option value
   // D type should be the source id type
   const getOptionValue = (option: T): T[D] | null => {
@@ -292,33 +275,34 @@ export function OptionGroup<
   // Layout
   return (
     <React.Fragment>
-      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
+      <FormControl fullWidth={fullWidth} {...rest}>
         {label && (
           <InputLabel required={required} variant={variant} shrink>
             {label}
           </InputLabel>
         )}
-        {outlined && (
+        {outlined ? (
           <NotchedOutline
             label={label && required ? label + " *" : label}
             notched
+            endAdornment={group}
             sx={{
               cursor: "default",
-              position: "absolute",
+              display: "flex",
+              gap: 1,
+              paddingX: 2,
+              paddingY: "7px",
               width: fullWidth ? "100%" : "auto",
               "& input": {
-                visibility: "hidden"
+                display: "none"
               }
             }}
           />
+        ) : (
+          <Box paddingLeft={2} paddingY="7px">
+            {group}
+          </Box>
         )}
-        <Box
-          paddingLeft={2}
-          paddingY="7px"
-          position={outlined ? "absolute" : undefined}
-        >
-          {group}
-        </Box>
       </FormControl>
       {helperText && (
         <FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>

package/src/OptionGroupFlag.tsx

@@ -36,7 +36,7 @@ export type OptionGroupFlagProps<
   T extends object,
   D extends DataTypes.Keys<T, number>,
   L extends DataTypes.Keys<T, string>
-> = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+> = Omit<FormControlProps, "defaultValue"> & {
   /**
    * Default value
    */
@@ -97,11 +97,6 @@ export type OptionGroupFlagProps<
    */
   itemSize?: "small" | "medium";
 
-  /**
-   * Item height in px
-   */
-  itemHeight?: number;
-
   /**
    * Helper text
    */
@@ -132,7 +127,6 @@ export function OptionGroupFlag<
     readOnly,
     row,
     itemSize,
-    itemHeight = row ? 56 : 42,
     helperText,
     variant,
     required,
@@ -144,16 +138,6 @@ export function OptionGroupFlag<
   // Outlined
   const outlined = variant === "outlined";
 
-  if (sx) {
-    Object.assign(sx, {
-      height: outlined
-        ? row
-          ? `${itemHeight}px`
-          : `${options.length * itemHeight + 14}px`
-        : undefined
-    });
-  }
-
   // Get option value
   // D type should be the source id type
   const getOptionValue = (option: T): (T[D] & number) | null => {
@@ -237,36 +221,40 @@ export function OptionGroupFlag<
     );
   });
 
+  // Group
+  const group = <FormGroup row={row}>{list}</FormGroup>;
+
   // Layout
   return (
     <React.Fragment>
-      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
+      <FormControl fullWidth={fullWidth} sx={sx} {...rest}>
         {label && (
           <InputLabel required={required} variant={variant} shrink>
             {label}
           </InputLabel>
         )}
-        {outlined && (
+        {outlined ? (
           <NotchedOutline
             label={label && required ? label + " *" : label}
             notched
+            endAdornment={group}
             sx={{
               cursor: "default",
-              position: "absolute",
+              display: "flex",
+              gap: 1,
+              paddingX: 2,
+              paddingY: "7px",
               width: fullWidth ? "100%" : "auto",
               "& input": {
-                visibility: "hidden"
+                display: "none"
               }
             }}
           />
+        ) : (
+          <Box paddingLeft={2} paddingY="7px">
+            {group}
+          </Box>
         )}
-        <Box
-          paddingLeft={2}
-          paddingY="7px"
-          position={outlined ? "absolute" : undefined}
-        >
-          <FormGroup row={row}>{list}</FormGroup>
-        </Box>
       </FormControl>
       {helperText && (
         <FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>

package/src/SwitchField.tsx

@@ -12,10 +12,7 @@ import { SwitchAnt } from "./SwitchAnt";
 /**
  * SwitchField props
  */
-export type SwitchFieldProps = Omit<
-  FormControlProps<"fieldset">,
-  "defaultValue"
-> & {
+export type SwitchFieldProps = Omit<FormControlProps, "defaultValue"> & {
   /**
    * Helper text
    */
@@ -26,6 +23,11 @@ export type SwitchFieldProps = Omit<
    */
   label?: string;
 
+  /**
+   * Field name
+   */
+  name: string;
+
   /**
    * Checked
    */
@@ -46,11 +48,6 @@ export type SwitchFieldProps = Omit<
    */
   endLabel?: string;
 
-  /**
-   * Height in px
-   */
-  height?: number;
-
   /**
    * Value, default is true
    */
@@ -71,12 +68,10 @@ export function SwitchField(props: SwitchFieldProps) {
     value = true,
 
     fullWidth,
-    height = 56,
     helperText,
     label,
     name,
     required,
-    sx = {},
     checked,
     variant = "outlined",
     ...rest
@@ -85,47 +80,49 @@ export function SwitchField(props: SwitchFieldProps) {
   // Outlined
   const outlined = variant === "outlined";
 
-  if (sx) {
-    Object.assign(sx, { height: outlined ? `${height}px` : undefined });
-  }
+  // Group
+  const group = (
+    <SwitchAnt
+      activeColor={activeColor}
+      name={name}
+      startLabel={startLabel}
+      endLabel={endLabel}
+      value={value}
+      checked={checked}
+    />
+  );
 
   // Layout
   return (
     <React.Fragment>
-      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
+      <FormControl fullWidth={fullWidth} {...rest}>
         {label && (
           <InputLabel required={required} variant={variant} shrink>
             {label}
           </InputLabel>
         )}
-        {outlined && (
+        {outlined ? (
           <NotchedOutline
             label={label && required ? label + " *" : label}
             notched
+            endAdornment={group}
             sx={{
               cursor: "default",
-              position: "absolute",
+              display: "flex",
+              gap: 1,
+              paddingX: 2,
+              paddingY: "7px",
               width: fullWidth ? "100%" : "auto",
               "& input": {
-                visibility: "hidden"
+                display: "none"
               }
             }}
           />
+        ) : (
+          <Box paddingLeft={2} paddingY="7px">
+            {group}
+          </Box>
         )}
-        <Box
-          paddingLeft={2}
-          paddingY="7px"
-          position={outlined ? "absolute" : undefined}
-        >
-          <SwitchAnt
-            activeColor={activeColor}
-            name={name}
-            startLabel={startLabel}
-            endLabel={endLabel}
-            value={value}
-            checked={checked}
-          />
-        </Box>
       </FormControl>
       {helperText && <FormHelperText>{helperText}</FormHelperText>}
     </React.Fragment>

package/src/index.ts

@@ -59,6 +59,7 @@ export * from "./DnDList";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./FabBox";
+export * from "./FieldSetEx";
 export * from "./FileUploadButton";
 export * from "./FlexBox";
 export * from "./GridDataFormat";

package/src/pages/ViewPage.tsx

@@ -89,7 +89,7 @@ export interface ViewPageField<T extends object> extends GridProps {
   /**
    * Label field
    */
-  label?: string | (() => React.ReactNode);
+  label?: string | ((item: T) => React.ReactNode);
 
   /**
    * Display as single row
@@ -235,7 +235,7 @@ function getItemField<T extends object>(
     // Field label
     itemLabel =
       typeof fieldLabel === "function"
-        ? fieldLabel()
+        ? fieldLabel(data)
         : fieldLabel != null
         ? globalApp?.get<string>(fieldLabel) ?? fieldLabel
         : fieldLabel;