@etsoo/materialui 1.3.31 → 1.3.33

package/lib/ComboBoxPro.js

@@ -2,7 +2,7 @@ import { Autocomplete } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { InputField } from "./InputField";
-import { MUUtils } from "./MUUtils";
+import { DataTypes } from "@etsoo/shared";
 export function ComboBoxPro(props) {
     var _a;
     // Labels
@@ -53,7 +53,7 @@ export function ComboBoxPro(props) {
                     if (!localValue && localValue != value)
                         onChange(event, value, "blur", undefined);
                 }
-            } })), getOptionLabel: (item) => typeof item === "object" ? MUUtils.getListItemLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
+            } })), getOptionLabel: (item) => typeof item === "object" ? DataTypes.getListItemLabel(item) : item, isOptionEqualToValue: (option, value) => option.id === value.id, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, onChange: (event, value, reason, details) => {
             setValue(value);
             if (onChange)
                 onChange(event, value, reason, details);

package/lib/MUUtils.d.ts

@@ -1,15 +1,8 @@
-import { ListType2 } from "@etsoo/shared";
 import { GridApiCommunity } from "@mui/x-data-grid/models/api/gridApiCommunity";
 /**
  * MU utilities
  */
 export declare namespace MUUtils {
-    /**
-     * Get ListType2 item label
-     * @param item Item
-     * @returns Result
-     */
-    function getListItemLabel(item: ListType2): string;
     /**
      * Get grid data
      * @param grid Grid

package/lib/MUUtils.js

@@ -3,19 +3,6 @@
  */
 export var MUUtils;
 (function (MUUtils) {
-    /**
-     * Get ListType2 item label
-     * @param item Item
-     * @returns Result
-     */
-    function getListItemLabel(item) {
-        return "label" in item
-            ? item.label
-            : "name" in item
-                ? item.name
-                : item.title;
-    }
-    MUUtils.getListItemLabel = getListItemLabel;
     /**
      * Get grid data
      * @param grid Grid

package/lib/OptionGroupFlag.d.ts

@@ -0,0 +1,80 @@
+import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
+import { FormControlProps } from "@mui/material";
+import React from "react";
+/**
+ * OptionGroupFlag methods ref
+ */
+export interface OptionGroupFlagRef {
+    /**
+     * Disable specific items with their ids
+     * @param ids Ids
+     */
+    disable(ids: number[]): void;
+}
+/**
+ * OptionGroupFlag props
+ */
+export type OptionGroupFlagProps<T extends object, D extends DataTypes.Keys<T, number>, L extends DataTypes.Keys<T, string>> = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+    /**
+     * Default value
+     */
+    defaultValue?: T[D] & number;
+    /**
+     * Get option label function
+     */
+    getOptionLabel?: (option: T) => string;
+    /**
+     * Id field
+     */
+    idField?: D;
+    /**
+     * Label
+     */
+    label?: string;
+    /**
+     * Label field
+     */
+    labelField?: L;
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<OptionGroupFlagRef>;
+    /**
+     * Field name
+     */
+    name: string;
+    /**
+     * On value change handler
+     */
+    onValueChange?: (value?: T[D] & number) => void;
+    /**
+     * Array of options.
+     */
+    options: ReadonlyArray<T>;
+    /**
+     * Is the field read only?
+     */
+    readOnly?: boolean;
+    /**
+     * Display group of elements in a compact row
+     */
+    row?: boolean;
+    /**
+     * Item size
+     */
+    itemSize?: "small" | "medium";
+    /**
+     * Item height in px
+     */
+    itemHeight?: number;
+    /**
+     * Helper text
+     */
+    helperText?: React.ReactNode;
+};
+/**
+ * OptionGroupFlag
+ * @param props Props
+ * @returns Component
+ */
+export declare function OptionGroupFlag<T extends object = ListType, D extends DataTypes.Keys<T, number> = IdDefaultType<T, number>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>>(props: OptionGroupFlagProps<T, D, L>): React.JSX.Element;

package/lib/OptionGroupFlag.js

@@ -0,0 +1,95 @@
+import { DataTypes, Utils } from "@etsoo/shared";
+import { Box, Checkbox, FormControl, FormControlLabel, FormGroup, FormHelperText, InputLabel } from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+/**
+ * OptionGroupFlag
+ * @param props Props
+ * @returns Component
+ */
+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;
+    // 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) => {
+        const value = DataTypes.getValue(option, idField);
+        if (value == null)
+            return null;
+        return value;
+    };
+    // Value
+    const [value, setValue] = React.useState(defaultValue);
+    React.useEffect(() => {
+        setValue(defaultValue);
+    }, [defaultValue]);
+    // Disabled ids
+    const [disabledIds, setDisabledIds] = React.useState();
+    // Item checked
+    const itemChecked = (option) => {
+        // Value
+        const itemValue = getOptionValue(option);
+        if (itemValue == null || value == null)
+            return false;
+        return (value & itemValue) > 0;
+    };
+    React.useImperativeHandle(mRef, () => ({
+        disable(ids) {
+            setDisabledIds(ids);
+        }
+    }));
+    // First item value
+    const firstOptionValue = getOptionValue(options[0]);
+    // Items
+    const list = options.map((option) => {
+        // Value
+        const ov = getOptionValue(option);
+        if (ov == null)
+            return;
+        // Control
+        const control = (React.createElement(Checkbox, { name: name, readOnly: readOnly, size: itemSize, checked: itemChecked(option), disabled: disabledIds === null || disabledIds === void 0 ? void 0 : disabledIds.includes(ov), onChange: (event) => {
+                if (firstOptionValue == null)
+                    return;
+                const typeValue = Utils.parseString(event.target.value, firstOptionValue);
+                const newValue = (value == null
+                    ? event.target.checked
+                        ? typeValue
+                        : undefined
+                    : event.target.checked
+                        ? value | typeValue
+                        : value ^ typeValue);
+                if (onValueChange)
+                    onValueChange(newValue);
+                setValue(newValue);
+            } }));
+        // Label
+        const label = getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
+        return (React.createElement(FormControlLabel, { key: ov, control: control, value: ov, label: label }));
+    });
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        React.createElement(FormControl, { component: "fieldset", 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: {
+                    cursor: "default",
+                    position: "absolute",
+                    width: fullWidth ? "100%" : "auto",
+                    "& input": {
+                        visibility: "hidden"
+                    }
+                } })),
+            React.createElement(Box, { paddingLeft: 2, paddingY: "7px", position: outlined ? "absolute" : undefined },
+                React.createElement(FormGroup, { row: row }, list))),
+        helperText && (React.createElement(FormHelperText, { sx: { marginLeft: 2, marginRight: 2 } }, helperText))));
+}

package/lib/QuickList.js

@@ -1,9 +1,9 @@
+import { DataTypes } from "@etsoo/shared";
 import { LinearProgress, List, ListItem, ListItemButton, Typography } from "@mui/material";
 import React from "react";
 import { InputField } from "./InputField";
 import { globalApp } from "./app/ReactApp";
 import { VBox } from "./FlexBox";
-import { MUUtils } from "./MUUtils";
 /**
  * Quick list
  * @param props Props
@@ -11,7 +11,7 @@ import { MUUtils } from "./MUUtils";
  */
 export function QuickList(props) {
     // Destruct
-    const { buttonProps = {}, label, inputProps, itemLabel = MUUtils.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
+    const { buttonProps = {}, label, inputProps, itemLabel = DataTypes.getListItemLabel, itemRenderer = (item) => itemLabel(item), itemProps, loadData, noMatchesLabel = globalApp === null || globalApp === void 0 ? void 0 : globalApp.get("noMatches"), gap = 1, height = "480px", onItemClick, ...rest } = props;
     const { onClick, ...buttonRest } = buttonProps;
     // States
     const [loading, setLoading] = React.useState(false);

package/lib/TagListPro.js

@@ -4,12 +4,13 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField } from "./InputField";
 import { globalApp } from "./app/ReactApp";
+import { DataTypes } from "@etsoo/shared";
 export function TagListPro(props) {
     var _a;
     // Labels
     const { noOptions, loading: loadingLabel, more = "More", open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
     const moreLabel = more + "...";
-    const getLabel = (item) => "label" in item ? item.label : "name" in item ? item.name : "";
+    const getLabel = (item) => DataTypes.getListItemLabel(item);
     // Destruct
     const { renderOption = (props, option, { selected }) => (React.createElement("li", { ...props },
         React.createElement(React.Fragment, null,

package/lib/Tiplist.d.ts

@@ -1,4 +1,4 @@
-import { DataTypes, IdDefaultType, ListType } from "@etsoo/shared";
+import { DataTypes, IdDefaultType, ListType2 } from "@etsoo/shared";
 import React from "react";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 /**
@@ -23,4 +23,4 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<A
  * @param props Props
  * @returns Component
  */
-export declare function Tiplist<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TiplistProps<T, D>): React.JSX.Element;
+export declare function Tiplist<T extends object = ListType2, D extends DataTypes.Keys<T> = IdDefaultType<T>>(props: TiplistProps<T, D>): React.JSX.Element;

package/lib/Tiplist.js

@@ -203,10 +203,6 @@ export function Tiplist(props) {
                     return (more !== null && more !== void 0 ? more : "More") + "...";
                 return getOptionLabel
                     ? getOptionLabel(item)
-                    : "label" in item
-                        ? `${item.label}`
-                        : "name" in item
-                            ? `${item.name}`
-                            : `${item}`;
+                    : DataTypes.getObjectItemLabel(item);
             }, ...rest })));
 }

package/lib/TiplistPro.js

@@ -1,9 +1,9 @@
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
+import { DataTypes } from "@etsoo/shared";
 import { Autocomplete } from "@mui/material";
 import React from "react";
 import { InputField } from "./InputField";
 import { globalApp } from "./app/ReactApp";
-import { MUUtils } from "./MUUtils";
 /**
  * TiplistPro
  * @param props Props
@@ -196,7 +196,7 @@ export function TiplistPro(props) {
                 if (item["id"] === -1)
                     return (more !== null && more !== void 0 ? more : "More") + "...";
                 if (getOptionLabel == null)
-                    return MUUtils.getListItemLabel(item);
+                    return DataTypes.getListItemLabel(item);
                 return getOptionLabel(item);
             }, ...rest })));
 }

package/lib/app/IServiceAppSettings.d.ts

@@ -1,9 +1,9 @@
-import { IAppSettings } from '@etsoo/appscript';
-import { DataTypes } from '@etsoo/shared';
+import { IAppSettings } from "@etsoo/appscript";
+import { IdType } from "@etsoo/shared";
 /**
  * Service app settings interface
  */
-export interface IServiceAppSettings<S extends DataTypes.IdType = number> extends IAppSettings {
+export interface IServiceAppSettings<S extends IdType = number> extends IAppSettings {
     /**
      * Service id
      */

package/lib/app/IServiceUser.d.ts

@@ -1,4 +1,5 @@
-import { IActionResult, IUser } from "@etsoo/appscript";
+import { IUser } from "@etsoo/appscript";
+import { IActionResult } from "@etsoo/shared";
 /**
  * Service user interface
  */

package/lib/app/ISmartERPUser.d.ts

@@ -1,4 +1,5 @@
-import { IActionResult, IUser } from "@etsoo/appscript";
+import { IUser } from "@etsoo/appscript";
+import { IActionResult } from "@etsoo/shared";
 /**
  * SmartERP user interface
  */

package/lib/app/ReactApp.d.ts

@@ -1,6 +1,6 @@
-import { CoreApp, IActionResult, IApp, IAppSettings, ICoreApp, IUser } from "@etsoo/appscript";
+import { CoreApp, IApp, IAppSettings, ICoreApp, IUser } from "@etsoo/appscript";
 import { INotifier, NotificationReturn } from "@etsoo/notificationbase";
-import { DataTypes } from "@etsoo/shared";
+import { DataTypes, IActionResult } from "@etsoo/shared";
 import React from "react";
 import { CultureAction, CultureState, INotificationReact, InputDialogProps, IPageData, IStateProps, NotificationReactCallProps, PageAction, PageState, UserAction, UserState } from "@etsoo/react";
 import { NavigateFunction, NavigateOptions } from "react-router-dom";

package/lib/index.d.ts

@@ -82,6 +82,7 @@ export * from "./NotifierPopupProps";
 export * from "./NumberInputField";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
 export * from "./PList";

package/lib/index.js

@@ -82,6 +82,7 @@ export * from "./NotifierPopupProps";
 export * from "./NumberInputField";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
 export * from "./PList";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.3.31",
+  "version": "1.3.33",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -45,24 +45,24 @@
   },
   "homepage": "https://github.com/ETSOO/ReactMU#readme",
   "dependencies": {
-    "@dnd-kit/core": "^6.0.8",
-    "@dnd-kit/sortable": "^7.0.2",
+    "@dnd-kit/core": "^6.1.0",
+    "@dnd-kit/sortable": "^8.0.0",
     "@emotion/css": "^11.11.2",
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
-    "@etsoo/appscript": "^1.4.62",
-    "@etsoo/notificationbase": "^1.1.30",
-    "@etsoo/react": "^1.7.21",
-    "@etsoo/shared": "^1.2.18",
+    "@etsoo/appscript": "^1.4.72",
+    "@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.16",
-    "@mui/x-data-grid": "^6.17.0",
-    "@types/pica": "^9.0.3",
-    "@types/pulltorefreshjs": "^0.1.6",
-    "@types/react": "^18.2.33",
-    "@types/react-avatar-editor": "^13.0.1",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-input-mask": "^3.0.4",
+    "@mui/material": "^5.14.17",
+    "@mui/x-data-grid": "^6.18.1",
+    "@types/pica": "^9.0.4",
+    "@types/pulltorefreshjs": "^0.1.7",
+    "@types/react": "^18.2.37",
+    "@types/react-avatar-editor": "^13.0.2",
+    "@types/react-dom": "^18.2.15",
+    "@types/react-input-mask": "^3.0.5",
     "chart.js": "^4.4.0",
     "chartjs-plugin-datalabels": "^2.2.0",
     "pica": "^9.0.1",
@@ -76,17 +76,17 @@
   },
   "devDependencies": {
     "@babel/cli": "^7.23.0",
-    "@babel/core": "^7.23.2",
-    "@babel/plugin-transform-runtime": "^7.23.2",
-    "@babel/preset-env": "^7.23.2",
-    "@babel/preset-react": "^7.22.15",
-    "@babel/preset-typescript": "^7.23.2",
+    "@babel/core": "^7.23.3",
+    "@babel/plugin-transform-runtime": "^7.23.3",
+    "@babel/preset-env": "^7.23.3",
+    "@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.0.0",
-    "@types/jest": "^29.5.7",
-    "@typescript-eslint/eslint-plugin": "^6.9.1",
-    "@typescript-eslint/parser": "^6.9.1",
+    "@testing-library/react": "^14.1.0",
+    "@types/jest": "^29.5.8",
+    "@typescript-eslint/eslint-plugin": "^6.10.0",
+    "@typescript-eslint/parser": "^6.10.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "typescript": "^5.2.2"

package/src/ComboBoxPro.tsx

@@ -2,8 +2,7 @@ import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { InputField, InputFieldProps } from "./InputField";
-import { ListType2 } from "@etsoo/shared";
-import { MUUtils } from "./MUUtils";
+import { DataTypes, ListType2 } from "@etsoo/shared";
 
 export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, false, false, true>,
@@ -131,7 +130,7 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
         />
       )}
       getOptionLabel={(item) =>
-        typeof item === "object" ? MUUtils.getListItemLabel(item) : item
+        typeof item === "object" ? DataTypes.getListItemLabel(item) : item
       }
       isOptionEqualToValue={(option, value) => option.id === value.id}
       noOptionsText={noOptionsText}

package/src/MUUtils.ts

@@ -1,23 +1,9 @@
-import { ListType2 } from "@etsoo/shared";
 import { GridApiCommunity } from "@mui/x-data-grid/models/api/gridApiCommunity";
 
 /**
  * MU utilities
  */
 export namespace MUUtils {
-  /**
-   * Get ListType2 item label
-   * @param item Item
-   * @returns Result
-   */
-  export function getListItemLabel(item: ListType2) {
-    return "label" in item
-      ? item.label
-      : "name" in item
-      ? item.name
-      : item.title;
-  }
-
   /**
    * Get grid data
    * @param grid Grid

package/src/OptionGroupFlag.tsx

@@ -0,0 +1,278 @@
+import {
+  DataTypes,
+  IdDefaultType,
+  LabelDefaultType,
+  ListType,
+  Utils
+} from "@etsoo/shared";
+import {
+  Box,
+  Checkbox,
+  FormControl,
+  FormControlLabel,
+  FormControlProps,
+  FormGroup,
+  FormHelperText,
+  InputLabel
+} from "@mui/material";
+import NotchedOutline from "@mui/material/OutlinedInput";
+import React from "react";
+
+/**
+ * OptionGroupFlag methods ref
+ */
+export interface OptionGroupFlagRef {
+  /**
+   * Disable specific items with their ids
+   * @param ids Ids
+   */
+  disable(ids: number[]): void;
+}
+
+/**
+ * OptionGroupFlag props
+ */
+export type OptionGroupFlagProps<
+  T extends object,
+  D extends DataTypes.Keys<T, number>,
+  L extends DataTypes.Keys<T, string>
+> = Omit<FormControlProps<"fieldset">, "defaultValue"> & {
+  /**
+   * Default value
+   */
+  defaultValue?: T[D] & number;
+
+  /**
+   * Get option label function
+   */
+  getOptionLabel?: (option: T) => string;
+
+  /**
+   * Id field
+   */
+  idField?: D;
+
+  /**
+   * Label
+   */
+  label?: string;
+
+  /**
+   * Label field
+   */
+  labelField?: L;
+
+  /**
+   * Methods
+   */
+  mRef?: React.Ref<OptionGroupFlagRef>;
+
+  /**
+   * Field name
+   */
+  name: string;
+
+  /**
+   * On value change handler
+   */
+  onValueChange?: (value?: T[D] & number) => void;
+
+  /**
+   * Array of options.
+   */
+  options: ReadonlyArray<T>;
+
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
+
+  /**
+   * Display group of elements in a compact row
+   */
+  row?: boolean;
+
+  /**
+   * Item size
+   */
+  itemSize?: "small" | "medium";
+
+  /**
+   * Item height in px
+   */
+  itemHeight?: number;
+
+  /**
+   * Helper text
+   */
+  helperText?: React.ReactNode;
+};
+
+/**
+ * OptionGroupFlag
+ * @param props Props
+ * @returns Component
+ */
+export function OptionGroupFlag<
+  T extends object = ListType,
+  D extends DataTypes.Keys<T, number> = IdDefaultType<T, number>,
+  L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
+>(props: OptionGroupFlagProps<T, D, L>) {
+  // Destruct
+  const {
+    getOptionLabel,
+    defaultValue,
+    idField = "id" as D,
+    label,
+    labelField = "label" as L,
+    mRef,
+    name,
+    onValueChange,
+    options,
+    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] & number) | null => {
+    const value = DataTypes.getValue(option, idField);
+    if (value == null) return null;
+    return value as T[D] & number;
+  };
+
+  // Value
+  const [value, setValue] = React.useState(defaultValue);
+
+  React.useEffect(() => {
+    setValue(defaultValue);
+  }, [defaultValue]);
+
+  // Disabled ids
+  const [disabledIds, setDisabledIds] = React.useState<number[]>();
+
+  // Item checked
+  const itemChecked = (option: T) => {
+    // Value
+    const itemValue = getOptionValue(option);
+    if (itemValue == null || value == null) return false;
+
+    return (value & itemValue) > 0;
+  };
+
+  React.useImperativeHandle(mRef, () => ({
+    disable(ids: number[]) {
+      setDisabledIds(ids);
+    }
+  }));
+
+  // First item value
+  const firstOptionValue = getOptionValue(options[0]);
+
+  // Items
+  const list = options.map((option) => {
+    // Value
+    const ov = getOptionValue(option);
+    if (ov == null) return;
+
+    // Control
+    const control = (
+      <Checkbox
+        name={name}
+        readOnly={readOnly}
+        size={itemSize}
+        checked={itemChecked(option)}
+        disabled={disabledIds?.includes(ov)}
+        onChange={(event) => {
+          if (firstOptionValue == null) return;
+
+          const typeValue = Utils.parseString(
+            event.target.value,
+            firstOptionValue
+          );
+
+          const newValue = (
+            value == null
+              ? event.target.checked
+                ? typeValue
+                : undefined
+              : event.target.checked
+              ? value | typeValue
+              : value ^ typeValue
+          ) as (T[D] & number) | undefined;
+
+          if (onValueChange) onValueChange(newValue);
+          setValue(newValue);
+        }}
+      />
+    );
+
+    // Label
+    const label =
+      getOptionLabel == null ? `${option[labelField]}` : getOptionLabel(option);
+
+    return (
+      <FormControlLabel key={ov} control={control} value={ov} label={label} />
+    );
+  });
+
+  // Layout
+  return (
+    <React.Fragment>
+      <FormControl component="fieldset" fullWidth={fullWidth} sx={sx} {...rest}>
+        {label && (
+          <InputLabel required={required} variant={variant} shrink>
+            {label}
+          </InputLabel>
+        )}
+        {outlined && (
+          <NotchedOutline
+            label={label && required ? label + " *" : label}
+            notched
+            sx={{
+              cursor: "default",
+              position: "absolute",
+              width: fullWidth ? "100%" : "auto",
+              "& input": {
+                visibility: "hidden"
+              }
+            }}
+          />
+        )}
+        <Box
+          paddingLeft={2}
+          paddingY="7px"
+          position={outlined ? "absolute" : undefined}
+        >
+          <FormGroup row={row}>{list}</FormGroup>
+        </Box>
+      </FormControl>
+      {helperText && (
+        <FormHelperText sx={{ marginLeft: 2, marginRight: 2 }}>
+          {helperText}
+        </FormHelperText>
+      )}
+    </React.Fragment>
+  );
+}

package/src/QuickList.tsx

@@ -1,4 +1,4 @@
-import { ListType2 } from "@etsoo/shared";
+import { DataTypes, ListType2 } from "@etsoo/shared";
 import {
   LinearProgress,
   List,
@@ -13,7 +13,6 @@ import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
 import { VBox } from "./FlexBox";
-import { MUUtils } from "./MUUtils";
 
 /**
  * Quick list props
@@ -83,7 +82,7 @@ export function QuickList<T extends ListType2 = ListType2>(
     buttonProps = {},
     label,
     inputProps,
-    itemLabel = MUUtils.getListItemLabel,
+    itemLabel = DataTypes.getListItemLabel,
     itemRenderer = (item: T) => itemLabel(item),
     itemProps,
     loadData,

package/src/TagListPro.tsx

@@ -4,7 +4,7 @@ import CheckBoxIcon from "@mui/icons-material/CheckBox";
 import React from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
-import { ListType2 } from "@etsoo/shared";
+import { DataTypes, ListType2 } from "@etsoo/shared";
 
 export type TagListProProps<D extends ListType2 = ListType2> = Omit<
   AutocompleteProps<D, true, false, false>,
@@ -47,8 +47,7 @@ export function TagListPro<D extends ListType2 = ListType2>(
 
   const moreLabel = more + "...";
 
-  const getLabel = (item: D) =>
-    "label" in item ? item.label : "name" in item ? item.name : "";
+  const getLabel = (item: D) => DataTypes.getListItemLabel(item);
 
   // Destruct
   const {

package/src/Tiplist.tsx

@@ -1,5 +1,5 @@
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
-import { DataTypes, IdDefaultType, ListType } from "@etsoo/shared";
+import { DataTypes, IdDefaultType, ListType2 } from "@etsoo/shared";
 import { Autocomplete, AutocompleteRenderInputParams } from "@mui/material";
 import React from "react";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
@@ -48,7 +48,7 @@ interface States<T extends object> {
  * @returns Component
  */
 export function Tiplist<
-  T extends object = ListType,
+  T extends object = ListType2,
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TiplistProps<T, D>) {
   // Labels
@@ -373,11 +373,7 @@ export function Tiplist<
           if (item[idField] === "n/a") return (more ?? "More") + "...";
           return getOptionLabel
             ? getOptionLabel(item)
-            : "label" in item
-            ? `${item.label}`
-            : "name" in item
-            ? `${item.name}`
-            : `${item}`;
+            : DataTypes.getObjectItemLabel(item);
         }}
         {...rest}
       />

package/src/TiplistPro.tsx

@@ -1,10 +1,9 @@
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
-import { ListType2 } from "@etsoo/shared";
+import { DataTypes, ListType2 } from "@etsoo/shared";
 import { Autocomplete, AutocompleteProps } from "@mui/material";
 import React, { ChangeEventHandler } from "react";
 import { InputField, InputFieldProps } from "./InputField";
 import { globalApp } from "./app/ReactApp";
-import { MUUtils } from "./MUUtils";
 
 /**
  * TiplistPro props
@@ -370,7 +369,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         getOptionLabel={(item) => {
           if (typeof item === "string") return item;
           if (item["id"] === -1) return (more ?? "More") + "...";
-          if (getOptionLabel == null) return MUUtils.getListItemLabel(item);
+          if (getOptionLabel == null) return DataTypes.getListItemLabel(item);
           return getOptionLabel(item);
         }}
         {...rest}

package/src/app/CommonApp.ts

@@ -1,5 +1,4 @@
 import {
-  IActionResult,
   IApiPayload,
   IAppSettings,
   IUser,
@@ -9,6 +8,7 @@ import {
 } from "@etsoo/appscript";
 import { CoreConstants, IPageData } from "@etsoo/react";
 import { ReactApp } from "./ReactApp";
+import { IActionResult } from "@etsoo/shared";
 
 /**
  * Common independent application

package/src/app/IServiceAppSettings.ts

@@ -1,13 +1,13 @@
-import { IAppSettings } from '@etsoo/appscript';
-import { DataTypes } from '@etsoo/shared';
+import { IAppSettings } from "@etsoo/appscript";
+import { IdType } from "@etsoo/shared";
 
 /**
  * Service app settings interface
  */
-export interface IServiceAppSettings<S extends DataTypes.IdType = number>
-    extends IAppSettings {
-    /**
-     * Service id
-     */
-    readonly serviceId: S;
+export interface IServiceAppSettings<S extends IdType = number>
+  extends IAppSettings {
+  /**
+   * Service id
+   */
+  readonly serviceId: S;
 }

package/src/app/IServiceUser.ts

@@ -1,4 +1,5 @@
-import { IActionResult, IUser } from "@etsoo/appscript";
+import { IUser } from "@etsoo/appscript";
+import { IActionResult } from "@etsoo/shared";
 
 /**
  * Service user interface

package/src/app/ISmartERPUser.ts

@@ -1,4 +1,5 @@
-import { IActionResult, IUser } from "@etsoo/appscript";
+import { IUser } from "@etsoo/appscript";
+import { IActionResult } from "@etsoo/shared";
 
 /**
  * SmartERP user interface

package/src/app/ReactApp.ts

@@ -2,7 +2,6 @@ import {
   BridgeUtils,
   CoreApp,
   createClient,
-  IActionResult,
   IApp,
   IAppSettings,
   ICoreApp,
@@ -14,7 +13,7 @@ import {
   NotificationRenderProps,
   NotificationReturn
 } from "@etsoo/notificationbase";
-import { DataTypes, WindowStorage } from "@etsoo/shared";
+import { DataTypes, IActionResult, WindowStorage } from "@etsoo/shared";
 import React from "react";
 import { NotifierMU } from "../NotifierMU";
 import { ProgressCount } from "../ProgressCount";

package/src/app/ServiceApp.ts

@@ -1,7 +1,6 @@
 import {
   BridgeUtils,
   createClient,
-  IActionResult,
   IApi,
   IApiPayload,
   RefreshTokenProps,
@@ -9,7 +8,7 @@ import {
   RefreshTokenRQ
 } from "@etsoo/appscript";
 import { CoreConstants } from "@etsoo/react";
-import { DomUtils } from "@etsoo/shared";
+import { DomUtils, IActionResult } from "@etsoo/shared";
 import { IServiceApp } from "./IServiceApp";
 import { IServiceAppSettings } from "./IServiceAppSettings";
 import { IServicePageData } from "./IServicePage";

package/src/index.ts

@@ -86,6 +86,7 @@ export * from "./NotifierPopupProps";
 export * from "./NumberInputField";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./OptionGroupFlag";
 export * from "./PercentCircularProgress";
 export * from "./PercentLinearProgress";
 export * from "./PList";