@etsoo/materialui 1.2.10 → 1.2.12

package/lib/AutocompleteExtendedProps.d.ts

@@ -1,10 +1,10 @@
-import { DataTypes } from '@etsoo/shared';
-import { AutocompleteProps } from '@mui/material';
-import { ChangeEventHandler } from 'react';
+import { DataTypes } from "@etsoo/shared";
+import { AutocompleteProps } from "@mui/material";
+import { ChangeEventHandler } from "react";
 /**
  * Autocomplete extended props
  */
-export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>, M extends boolean | undefined = boolean | undefined> = Omit<AutocompleteProps<T, M, false, false>, 'renderInput' | 'options' | 'multiple'> & {
+export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys<T>, M extends boolean | undefined = boolean | undefined> = Omit<AutocompleteProps<T, M, false, false>, "renderInput" | "options" | "multiple"> & {
     /**
      * Id field
      */
@@ -30,7 +30,7 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
      * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
      * @default 'none'
      */
-    inputMargin?: 'dense' | 'normal' | 'none';
+    inputMargin?: "dense" | "normal" | "none";
     /**
      * Input onChange hanlder
      */
@@ -44,7 +44,7 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
      * The variant to use.
      * @default 'outlined'
      */
-    inputVariant?: 'standard' | 'outlined' | 'filled';
+    inputVariant?: "standard" | "outlined" | "filled";
     /**
      * Label of the field
      */
@@ -61,4 +61,9 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
      * Is search field?
      */
     search?: boolean;
+    /**
+     * Value change handler
+     * @param value New value
+     */
+    onValueChange?: (value: T | null) => void;
 };

package/lib/ComboBox.js

@@ -15,7 +15,7 @@ export function ComboBox(props) {
     // Labels
     const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "open");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, openText = labels === null || labels === void 0 ? void 0 : labels.open, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px" }, noOptionsText = labels === null || labels === void 0 ? void 0 : labels.noOptions, loadingText = labels === null || labels === void 0 ? void 0 : labels.loading, openText = labels === null || labels === void 0 ? void 0 : labels.open, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -43,6 +43,8 @@ export function ComboBox(props) {
     React.useEffect(() => {
         if (localValue != null && localValue != stateValue) {
             setStateValue(localValue);
+            if (onValueChange)
+                onValueChange(localValue);
         }
     }, [localValue]);
     // Add readOnly
@@ -114,5 +116,7 @@ export function ComboBox(props) {
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);
+                if (onValueChange)
+                    onValueChange(value);
             }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })), options: localOptions, noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, ...rest })));
 }

package/lib/ComboBoxMultiple.d.ts

@@ -4,7 +4,7 @@ import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
 /**
  * ComboBox multiple props
  */
-export type ComboBoxMultipleProps<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = AutocompleteExtendedProps<T, D, true> & {
+export type ComboBoxMultipleProps<T extends object = ListType, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = Omit<AutocompleteExtendedProps<T, D, true>, "onValueChange"> & {
     /**
      * Auto add blank item
      */

package/lib/ComboBoxPro.d.ts

@@ -23,5 +23,10 @@ export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<Autocomplet
      * Input props
      */
     inputProps?: Omit<InputFieldProps, "onChange">;
+    /**
+     * Value change handler
+     * @param value New value
+     */
+    onValueChange?: (value: D | null) => void;
 };
 export declare function ComboBoxPro<D extends ListType2 = ListType2>(props: ComboBoxProProps<D>): JSX.Element;

package/lib/ComboBoxPro.js

@@ -7,7 +7,7 @@ export function ComboBoxPro(props) {
     // Labels
     const { noOptions, loading: loadingLabel, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "open")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, ...rest } = props;
+    const { noOptionsText = noOptions, loadingText = loadingLabel, openText = openDefault, options, openOnFocus = true, label, inputProps, name, value, idValue, onChange, onValueChange, ...rest } = props;
     const [open, setOpen] = React.useState(false);
     const [localOptions, setOptions] = React.useState([]);
     const [localValue, setValue] = React.useState(null);
@@ -21,11 +21,14 @@ export function ComboBoxPro(props) {
         if (idValue == null)
             return;
         const option = localOptions.find((option) => option.id === idValue);
-        if (option)
+        if (option) {
             setValue(option);
+            if (onValueChange)
+                onValueChange(option);
+        }
         else
             setValue(null);
-    }, [localOptions]);
+    }, [localOptions, idValue]);
     React.useEffect(() => {
         if (typeof options === "function") {
             setLoading(true);
@@ -54,5 +57,9 @@ export function ComboBoxPro(props) {
             setValue(value);
             if (onChange)
                 onChange(event, value, reason, details);
+            if (onValueChange) {
+                if (typeof value === "object")
+                    onValueChange(value == null ? null : value);
+            }
         }, ...rest }));
 }

package/lib/ItemList.d.ts

@@ -41,7 +41,7 @@ export interface ItemListProps<T extends object, D extends DataTypes.Keys<T>, L
      */
     onClose?(item: T | undefined, changed: boolean): void;
     /**
-     * Current selected language
+     * Current selected id
      */
     selectedValue?: T[D];
     /**

package/lib/PercentCircularProgress.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { CircularProgressProps, TypographyProps } from "@mui/material";
+export type PercentCircularProgressProps = CircularProgressProps & {
+    value: number;
+    valueUnit?: string;
+    textProps?: TypographyProps<"div">;
+};
+export declare function PercentCircularProgress(props: PercentCircularProgressProps): JSX.Element;

package/lib/PercentCircularProgress.js

@@ -0,0 +1,20 @@
+import { Box, CircularProgress, Typography } from "@mui/material";
+import React from "react";
+export function PercentCircularProgress(props) {
+    // Destruct
+    const { textProps, valueUnit = "%", ...rest } = props;
+    // Component
+    return (React.createElement(Box, { sx: { position: "relative", display: "inline-flex" } },
+        React.createElement(CircularProgress, { variant: "determinate", ...rest }),
+        React.createElement(Box, { sx: {
+                top: 0,
+                left: 0,
+                bottom: 0,
+                right: 0,
+                position: "absolute",
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "center"
+            } },
+            React.createElement(Typography, { variant: "caption", component: "div", color: "text.secondary", ...textProps }, `${Math.round(props.value)}${valueUnit}`))));
+}

package/lib/PercentLinearProgress.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { LinearProgressProps, TypographyProps } from "@mui/material";
+export type PercentLinearProgressProps = LinearProgressProps & {
+    value: number;
+    valueUnit?: string;
+    textProps?: TypographyProps;
+};
+export declare function PercentLinearProgress(props: PercentLinearProgressProps): JSX.Element;

package/lib/PercentLinearProgress.js

@@ -0,0 +1,12 @@
+import { Box, LinearProgress, Typography } from "@mui/material";
+import React from "react";
+export function PercentLinearProgress(props) {
+    // Destruct
+    const { textProps, valueUnit = "%", ...rest } = props;
+    // Component
+    return (React.createElement(Box, { sx: { display: "flex", alignItems: "center" } },
+        React.createElement(Box, { sx: { width: "100%", mr: 1 } },
+            React.createElement(LinearProgress, { variant: "determinate", ...rest })),
+        React.createElement(Box, { sx: { minWidth: 35 } },
+            React.createElement(Typography, { variant: "caption", color: "text.secondary", ...textProps }, `${Math.round(props.value)}${valueUnit}`))));
+}

package/lib/Tiplist.js

@@ -15,7 +15,7 @@ export function Tiplist(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { search = false, idField = "id", idValue, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width, name, readOnly, onChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, ...rest } = props;
+    const { search = false, idField = "id", idValue, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -90,6 +90,11 @@ export function Tiplist(props) {
             if (options != null && options.length >= maxItems) {
                 options.push({ [idField]: "n/a" });
             }
+            if (id && options && onValueChange) {
+                const option = options.find((o) => o[idField] === id);
+                if (option)
+                    onValueChange(option);
+            }
             // Indicates loading completed
             stateUpdate({
                 loading: false,
@@ -141,6 +146,8 @@ export function Tiplist(props) {
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);
+                if (onValueChange)
+                    onValueChange(value);
                 // For clear case
                 if (reason === "clear") {
                     stateUpdate({ options: [] });

package/lib/TiplistPro.d.ts

@@ -38,6 +38,11 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<Autocomplete
      * Input props
      */
     inputProps?: Omit<InputFieldProps, "onChange">;
+    /**
+     * Value change handler
+     * @param value New value
+     */
+    onValueChange?: (value: T | null) => void;
 };
 /**
  * TiplistPro

package/lib/TiplistPro.js

@@ -13,7 +13,7 @@ export function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more", "open")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -82,6 +82,11 @@ export function TiplistPro(props) {
             if (options != null && options.length >= maxItems) {
                 options.push({ id: -1, name: "n/a" });
             }
+            if (id && options && onValueChange) {
+                const option = options.find((o) => o["id"] === id);
+                if (option)
+                    onValueChange(option);
+            }
             // Indicates loading completed
             stateUpdate({
                 loading: false,
@@ -135,6 +140,10 @@ export function TiplistPro(props) {
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);
+                if (onValueChange) {
+                    if (typeof value === "object")
+                        onValueChange(value == null ? null : value);
+                }
                 // For clear case
                 if (reason === "clear") {
                     stateUpdate({ options: [] });

package/lib/index.d.ts

@@ -69,6 +69,8 @@ export * from "./MUGlobal";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./PercentCircularProgress";
+export * from "./PercentLinearProgress";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/lib/index.js

@@ -69,6 +69,8 @@ export * from "./MUGlobal";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./PercentCircularProgress";
+export * from "./PercentLinearProgress";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.2.10",
+  "version": "1.2.12",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,7 +50,7 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.92",
+    "@etsoo/appscript": "^1.3.94",
     "@etsoo/notificationbase": "^1.1.24",
     "@etsoo/react": "^1.6.67",
     "@etsoo/shared": "^1.2.1",

package/src/AutocompleteExtendedProps.ts

@@ -1,84 +1,90 @@
-import { DataTypes } from '@etsoo/shared';
-import { AutocompleteProps } from '@mui/material';
-import { ChangeEventHandler } from 'react';
+import { DataTypes } from "@etsoo/shared";
+import { AutocompleteProps } from "@mui/material";
+import { ChangeEventHandler } from "react";
 
 /**
  * Autocomplete extended props
  */
 export type AutocompleteExtendedProps<
-    T extends object,
-    D extends DataTypes.Keys<T>,
-    M extends boolean | undefined = boolean | undefined
+  T extends object,
+  D extends DataTypes.Keys<T>,
+  M extends boolean | undefined = boolean | undefined
 > = Omit<
-    AutocompleteProps<T, M, false, false>,
-    'renderInput' | 'options' | 'multiple'
+  AutocompleteProps<T, M, false, false>,
+  "renderInput" | "options" | "multiple"
 > & {
-    /**
-     * Id field
-     */
-    idField?: D;
+  /**
+   * Id field
+   */
+  idField?: D;
 
-    /**
-     * Id value
-     */
-    idValue?: T[D];
+  /**
+   * Id value
+   */
+  idValue?: T[D];
 
-    /**
-     * Autocomplete for the input
-     */
-    inputAutoComplete?: string;
+  /**
+   * Autocomplete for the input
+   */
+  inputAutoComplete?: string;
 
-    /**
-     * If `true`, the label is displayed in an error state.
-     * @default false
-     */
-    inputError?: boolean;
+  /**
+   * If `true`, the label is displayed in an error state.
+   * @default false
+   */
+  inputError?: boolean;
 
-    /**
-     * The helper text content.
-     */
-    inputHelperText?: React.ReactNode;
+  /**
+   * The helper text content.
+   */
+  inputHelperText?: React.ReactNode;
 
-    /**
-     * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
-     * @default 'none'
-     */
-    inputMargin?: 'dense' | 'normal' | 'none';
+  /**
+   * If `dense` or `normal`, will adjust vertical spacing of this and contained components.
+   * @default 'none'
+   */
+  inputMargin?: "dense" | "normal" | "none";
 
-    /**
-     * Input onChange hanlder
-     */
-    inputOnChange?: ChangeEventHandler<HTMLInputElement> | undefined;
+  /**
+   * Input onChange hanlder
+   */
+  inputOnChange?: ChangeEventHandler<HTMLInputElement> | undefined;
 
-    /**
-     * If `true`, the label will indicate that the `input` is required.
-     * @default false
-     */
-    inputRequired?: boolean;
+  /**
+   * If `true`, the label will indicate that the `input` is required.
+   * @default false
+   */
+  inputRequired?: boolean;
 
-    /**
-     * The variant to use.
-     * @default 'outlined'
-     */
-    inputVariant?: 'standard' | 'outlined' | 'filled';
+  /**
+   * The variant to use.
+   * @default 'outlined'
+   */
+  inputVariant?: "standard" | "outlined" | "filled";
 
-    /**
-     * Label of the field
-     */
-    label: string;
+  /**
+   * Label of the field
+   */
+  label: string;
 
-    /**
-     * Name of the field
-     */
-    name: string;
+  /**
+   * Name of the field
+   */
+  name: string;
 
-    /**
-     * Is the field read only?
-     */
-    readOnly?: boolean;
+  /**
+   * Is the field read only?
+   */
+  readOnly?: boolean;
 
-    /**
-     * Is search field?
-     */
-    search?: boolean;
+  /**
+   * Is search field?
+   */
+  search?: boolean;
+
+  /**
+   * Value change handler
+   * @param value New value
+   */
+  onValueChange?: (value: T | null) => void;
 };

package/src/ComboBox.tsx

@@ -89,6 +89,7 @@ export function ComboBox<
     dataReadonly = true,
     readOnly,
     onChange,
+    onValueChange,
     openOnFocus = true,
     value,
     disableCloseOnSelect = false,
@@ -135,6 +136,7 @@ export function ComboBox<
   React.useEffect(() => {
     if (localValue != null && localValue != stateValue) {
       setStateValue(localValue);
+      if (onValueChange) onValueChange(localValue);
     }
   }, [localValue]);
 
@@ -232,6 +234,8 @@ export function ComboBox<
 
           // Custom
           if (onChange != null) onChange(event, value, reason, details);
+
+          if (onValueChange) onValueChange(value);
         }}
         openOnFocus={openOnFocus}
         sx={sx}

package/src/ComboBoxMultiple.tsx

@@ -31,7 +31,7 @@ export type ComboBoxMultipleProps<
   T extends object = ListType,
   D extends DataTypes.Keys<T> = IdDefaultType<T>,
   L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
-> = AutocompleteExtendedProps<T, D, true> & {
+> = Omit<AutocompleteExtendedProps<T, D, true>, "onValueChange"> & {
   /**
    * Auto add blank item
    */

package/src/ComboBoxPro.tsx

@@ -32,6 +32,12 @@ export type ComboBoxProProps<D extends ListType2 = ListType2> = Omit<
    * Input props
    */
   inputProps?: Omit<InputFieldProps, "onChange">;
+
+  /**
+   * Value change handler
+   * @param value New value
+   */
+  onValueChange?: (value: D | null) => void;
 };
 
 export function ComboBoxPro<D extends ListType2 = ListType2>(
@@ -57,6 +63,7 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
     value,
     idValue,
     onChange,
+    onValueChange,
     ...rest
   } = props;
 
@@ -73,9 +80,11 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
   React.useEffect(() => {
     if (idValue == null) return;
     const option = localOptions.find((option) => option.id === idValue);
-    if (option) setValue(option);
-    else setValue(null);
-  }, [localOptions]);
+    if (option) {
+      setValue(option);
+      if (onValueChange) onValueChange(option);
+    } else setValue(null);
+  }, [localOptions, idValue]);
 
   React.useEffect(() => {
     if (typeof options === "function") {
@@ -131,6 +140,10 @@ export function ComboBoxPro<D extends ListType2 = ListType2>(
       onChange={(event, value, reason, details) => {
         setValue(value);
         if (onChange) onChange(event, value, reason, details);
+        if (onValueChange) {
+          if (typeof value === "object")
+            onValueChange(value == null ? null : value);
+        }
       }}
       {...rest}
     />

package/src/ItemList.tsx

@@ -69,7 +69,7 @@ export interface ItemListProps<
   onClose?(item: T | undefined, changed: boolean): void;
 
   /**
-   * Current selected language
+   * Current selected id
    */
   selectedValue?: T[D];
 

package/src/PercentCircularProgress.tsx

@@ -0,0 +1,45 @@
+import {
+  Box,
+  CircularProgress,
+  CircularProgressProps,
+  Typography,
+  TypographyProps
+} from "@mui/material";
+import React from "react";
+
+export type PercentCircularProgressProps = CircularProgressProps & {
+  value: number;
+  valueUnit?: string;
+  textProps?: TypographyProps<"div">;
+};
+
+export function PercentCircularProgress(props: PercentCircularProgressProps) {
+  // Destruct
+  const { textProps, valueUnit = "%", ...rest } = props;
+
+  // Component
+  return (
+    <Box sx={{ position: "relative", display: "inline-flex" }}>
+      <CircularProgress variant="determinate" {...rest} />
+      <Box
+        sx={{
+          top: 0,
+          left: 0,
+          bottom: 0,
+          right: 0,
+          position: "absolute",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        }}
+      >
+        <Typography
+          variant="caption"
+          component="div"
+          color="text.secondary"
+          {...textProps}
+        >{`${Math.round(props.value)}${valueUnit}`}</Typography>
+      </Box>
+    </Box>
+  );
+}

package/src/PercentLinearProgress.tsx

@@ -0,0 +1,35 @@
+import {
+  Box,
+  LinearProgress,
+  LinearProgressProps,
+  Typography,
+  TypographyProps
+} from "@mui/material";
+import React from "react";
+
+export type PercentLinearProgressProps = LinearProgressProps & {
+  value: number;
+  valueUnit?: string;
+  textProps?: TypographyProps;
+};
+
+export function PercentLinearProgress(props: PercentLinearProgressProps) {
+  // Destruct
+  const { textProps, valueUnit = "%", ...rest } = props;
+
+  // Component
+  return (
+    <Box sx={{ display: "flex", alignItems: "center" }}>
+      <Box sx={{ width: "100%", mr: 1 }}>
+        <LinearProgress variant="determinate" {...rest} />
+      </Box>
+      <Box sx={{ minWidth: 35 }}>
+        <Typography
+          variant="caption"
+          color="text.secondary"
+          {...textProps}
+        >{`${Math.round(props.value)}${valueUnit}`}</Typography>
+      </Box>
+    </Box>
+  );
+}

package/src/Tiplist.tsx

@@ -80,6 +80,7 @@ export function Tiplist<
     name,
     readOnly,
     onChange,
+    onValueChange,
     openOnFocus = true,
     noOptionsText = noOptions,
     loadingText = loading,
@@ -191,6 +192,11 @@ export function Tiplist<
         options.push({ [idField]: "n/a" } as T);
       }
 
+      if (id && options && onValueChange) {
+        const option = options.find((o) => o[idField] === id);
+        if (option) onValueChange(option);
+      }
+
       // Indicates loading completed
       stateUpdate({
         loading: false,
@@ -262,6 +268,8 @@ export function Tiplist<
           // Custom
           if (onChange != null) onChange(event, value, reason, details);
 
+          if (onValueChange) onValueChange(value);
+
           // For clear case
           if (reason === "clear") {
             stateUpdate({ options: [] });

package/src/TiplistPro.tsx

@@ -55,6 +55,12 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<
    * Input props
    */
   inputProps?: Omit<InputFieldProps, "onChange">;
+
+  /**
+   * Value change handler
+   * @param value New value
+   */
+  onValueChange?: (value: T | null) => void;
 };
 
 // Multiple states
@@ -101,6 +107,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     getOptionDisabled,
     getOptionLabel,
     onChange,
+    onValueChange,
     ...rest
   } = props;
 
@@ -198,6 +205,11 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         options.push({ id: -1, name: "n/a" } as T);
       }
 
+      if (id && options && onValueChange) {
+        const option = options.find((o) => o["id"] === id);
+        if (option) onValueChange(option);
+      }
+
       // Indicates loading completed
       stateUpdate({
         loading: false,
@@ -273,6 +285,11 @@ export function TiplistPro<T extends ListType2 = ListType2>(
           // Custom
           if (onChange != null) onChange(event, value, reason, details);
 
+          if (onValueChange) {
+            if (typeof value === "object")
+              onValueChange(value == null ? null : value);
+          }
+
           // For clear case
           if (reason === "clear") {
             stateUpdate({ options: [] });

package/src/index.ts

@@ -72,6 +72,8 @@ export * from "./MUGlobal";
 export * from "./NotifierMU";
 export * from "./OptionBool";
 export * from "./OptionGroup";
+export * from "./PercentCircularProgress";
+export * from "./PercentLinearProgress";
 export * from "./PList";
 export * from "./ProgressCount";
 export * from "./PullToRefreshUI";