@etsoo/materialui 1.3.32 → 1.3.34

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

@@ -0,0 +1,76 @@
+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, "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";
+    /**
+     * 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,89 @@
+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, helperText, variant, required, fullWidth, sx = {}, ...rest } = props;
+    // Outlined
+    const outlined = variant === "outlined";
+    // 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 }));
+    });
+    // Group
+    const group = React.createElement(FormGroup, { row: row }, list);
+    // Layout
+    return (React.createElement(React.Fragment, null,
+        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, endAdornment: group, sx: {
+                    cursor: "default",
+                    display: "flex",
+                    gap: 1,
+                    paddingX: 2,
+                    paddingY: "7px",
+                    width: fullWidth ? "100%" : "auto",
+                    "& input": {
+                        display: "none"
+                    }
+                } })) : (React.createElement(Box, { paddingLeft: 2, paddingY: "7px" }, group))),
+        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/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/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

@@ -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";
@@ -82,6 +83,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

@@ -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";
@@ -82,6 +83,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.32",
+  "version": "1.3.34",
   "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.66",
-    "@etsoo/notificationbase": "^1.1.30",
-    "@etsoo/react": "^1.7.22",
-    "@etsoo/shared": "^1.2.18",
-    "@mui/icons-material": "^5.14.16",
-    "@mui/material": "^5.14.16",
-    "@mui/x-data-grid": "^6.18.0",
-    "@types/pica": "^9.0.3",
-    "@types/pulltorefreshjs": "^0.1.6",
-    "@types/react": "^18.2.34",
-    "@types/react-avatar-editor": "^13.0.1",
-    "@types/react-dom": "^18.2.14",
-    "@types/react-input-mask": "^3.0.4",
+    "@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.18",
+    "@mui/material": "^5.14.18",
+    "@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.11.0",
+    "@typescript-eslint/parser": "^6.11.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "typescript": "^5.2.2"