@etsoo/react 1.2.56 → 1.2.60

package/lib/mu/ComboBox.js

@@ -10,21 +10,28 @@ import { SearchField } from './SearchField';
  */
 export function ComboBox(props) {
     // Destruct
-    const { search = false, idField = 'id', idValue, inputAutoComplete = 'new-region', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, options = [], readOnly = true, onChange, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
+    const { search = false, idField = 'id', idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, defaultValue, label, labelField = 'label', loadData, onLoadData, name, inputAutoComplete = 'off', options = [], readOnly = true, onChange, value, getOptionLabel = (option) => String(Reflect.get(option, labelField)), sx = { minWidth: '150px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
     const [localOptions, setOptions] = React.useState(options);
     const isMounted = React.useRef(true);
     // Local default value
-    const localValue = idValue != null
+    let localValue = idValue != null
         ? localOptions.find((o) => Reflect.get(o, idField) === idValue)
         : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+    if (localValue === undefined)
+        localValue = null;
     // Current id value
     // One time calculation for input's default value (uncontrolled)
     const localIdValue = localValue && Reflect.get(localValue, idField);
     // State
-    const [stateValue, setStateValue] = React.useState(localValue);
+    // null for controlled
+    const [stateValue, setStateValue] = React.useState(null);
+    React.useEffect(() => {
+        if (localValue != null)
+            setStateValue(localValue);
+    }, [localValue]);
     // Add readOnly
     const addReadOnly = (params) => {
         if (readOnly != null) {

package/lib/mu/MaskInput.js

@@ -9,11 +9,14 @@ import { useIMask } from 'react-imask';
  * @returns Component
  */
 export function MaskInput(props) {
+    var _a;
     // Destruct
-    const { mask, InputLabelProps = {}, InputProps = {}, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, variant = search
+    const { defaultValue, mask, InputLabelProps = {}, InputProps = {}, readOnly, search = false, size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize, value, variant = search
         ? MUGlobal.searchFieldVariant
         : MUGlobal.inputFieldVariant, ...rest } = props;
-    const { ref } = useIMask(mask);
+    const { ref, maskRef } = useIMask(mask);
+    const localValue = (_a = defaultValue !== null && defaultValue !== void 0 ? defaultValue : value) !== null && _a !== void 0 ? _a : '';
+    const maskObj = maskRef.current;
     // Shrink
     InputLabelProps.shrink = search
         ? MUGlobal.searchFieldShrink
@@ -22,6 +25,10 @@ export function MaskInput(props) {
     if (readOnly != null)
         InputProps.readOnly = readOnly;
     InputProps.inputRef = ref;
+    React.useEffect(() => {
+        if (maskObj != null)
+            maskObj.value = String(localValue);
+    }, [maskObj, localValue]);
     // Layout
     return (React.createElement(TextField, { InputLabelProps: InputLabelProps, InputProps: InputProps, size: size, variant: variant, ...rest }));
 }

package/lib/mu/SelectEx.d.ts

@@ -4,7 +4,7 @@ import { IdLabelDto } from '@etsoo/appscript';
 /**
  * Extended select component props
  */
-export interface SelectExProps<T extends Record<string, any> = IdLabelDto> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
+export interface SelectExProps<T extends {}> extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
     /**
      * Id field, default is id
      */
@@ -43,4 +43,4 @@ export interface SelectExProps<T extends Record<string, any> = IdLabelDto> exten
  * @param props Props
  * @returns Component
  */
-export declare function SelectEx<T extends Record<string, any> = IdLabelDto>(props: SelectExProps<T>): JSX.Element;
+export declare function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>): JSX.Element;

package/lib/mu/SelectEx.js

@@ -28,7 +28,11 @@ export function SelectEx(props) {
         localValue = valueSource;
     }
     // Value state
-    const [valueState, setValueState] = React.useState(localValue);
+    const [valueState, setValueState] = React.useState(null);
+    React.useEffect(() => {
+        if (localValue != null)
+            setValueState(localValue);
+    }, [localValue]);
     // Label id
     const labelId = `selectex-label-${name}`;
     // Item checked or not

package/lib/mu/Tiplist.js

@@ -14,7 +14,9 @@ export function Tiplist(props) {
     // Value input ref
     const inputRef = React.createRef();
     // Local value
-    const localValue = value !== null && value !== void 0 ? value : defaultValue;
+    let localValue = value !== null && value !== void 0 ? value : defaultValue;
+    if (localValue === undefined)
+        localValue = null;
     // One time calculation for input's default value (uncontrolled)
     const localIdValue = idValue !== null && idValue !== void 0 ? idValue : (localValue && Reflect.get(localValue, idField));
     // Changable states
@@ -24,8 +26,12 @@ export function Tiplist(props) {
         // Loading unknown
         open: false,
         options: [],
-        value: localValue
+        value: null
     });
+    React.useEffect(() => {
+        if (localValue != null)
+            stateUpdate({ value: localValue });
+    }, [localValue]);
     // State
     const [state] = React.useState({});
     const isMounted = React.useRef(true);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.56",
+    "version": "1.2.60",
     "description": "TypeScript ReactJs framework",
     "main": "lib/index.js",
     "types": "lib/index.d.ts",
@@ -50,9 +50,9 @@
         "@emotion/react": "^11.5.0",
         "@emotion/style": "^0.8.0",
         "@emotion/styled": "^11.3.0",
-        "@etsoo/appscript": "^1.1.17",
+        "@etsoo/appscript": "^1.1.18",
         "@etsoo/notificationbase": "^1.0.88",
-        "@etsoo/shared": "^1.0.55",
+        "@etsoo/shared": "^1.0.56",
         "@mui/icons-material": "^5.0.4",
         "@mui/material": "^5.0.4",
         "@reach/router": "^1.3.4",

package/src/mu/ComboBox.tsx

@@ -43,7 +43,6 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         search = false,
         idField = 'id',
         idValue,
-        inputAutoComplete = 'new-region',
         inputError,
         inputHelperText,
         inputMargin,
@@ -56,6 +55,7 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         loadData,
         onLoadData,
         name,
+        inputAutoComplete = 'off',
         options = [],
         readOnly = true,
         onChange,
@@ -73,17 +73,24 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
     const isMounted = React.useRef(true);
 
     // Local default value
-    const localValue =
+    let localValue =
         idValue != null
             ? localOptions.find((o) => Reflect.get(o, idField) === idValue)
             : defaultValue ?? value;
 
+    if (localValue === undefined) localValue = null;
+
     // Current id value
     // One time calculation for input's default value (uncontrolled)
     const localIdValue = localValue && Reflect.get(localValue, idField);
 
     // State
-    const [stateValue, setStateValue] = React.useState(localValue);
+    // null for controlled
+    const [stateValue, setStateValue] = React.useState<T | null>(null);
+
+    React.useEffect(() => {
+        if (localValue != null) setStateValue(localValue);
+    }, [localValue]);
 
     // Add readOnly
     const addReadOnly = (params: AutocompleteRenderInputParams) => {

package/src/mu/MaskInput.tsx

@@ -32,19 +32,23 @@ export type MaskInputProps = TextFieldProps & {
 export function MaskInput(props: MaskInputProps) {
     // Destruct
     const {
+        defaultValue,
         mask,
         InputLabelProps = {},
         InputProps = {},
         readOnly,
         search = false,
         size = search ? MUGlobal.searchFieldSize : MUGlobal.inputFieldSize,
+        value,
         variant = search
             ? MUGlobal.searchFieldVariant
             : MUGlobal.inputFieldVariant,
         ...rest
     } = props;
 
-    const { ref } = useIMask(mask);
+    const { ref, maskRef } = useIMask(mask);
+    const localValue = defaultValue ?? value ?? '';
+    const maskObj = maskRef.current;
 
     // Shrink
     InputLabelProps.shrink = search
@@ -55,6 +59,10 @@ export function MaskInput(props: MaskInputProps) {
     if (readOnly != null) InputProps.readOnly = readOnly;
     InputProps.inputRef = ref;
 
+    React.useEffect(() => {
+        if (maskObj != null) maskObj.value = String(localValue);
+    }, [maskObj, localValue]);
+
     // Layout
     return (
         <TextField

package/src/mu/SelectEx.tsx

@@ -18,7 +18,7 @@ import { ListItemRightIcon } from './ListItemRightIcon';
 /**
  * Extended select component props
  */
-export interface SelectExProps<T extends Record<string, any> = IdLabelDto>
+export interface SelectExProps<T extends {}>
     extends Omit<SelectProps, 'labelId' | 'input' | 'native'> {
     /**
      * Id field, default is id
@@ -66,9 +66,7 @@ export interface SelectExProps<T extends Record<string, any> = IdLabelDto>
  * @param props Props
  * @returns Component
  */
-export function SelectEx<T extends Record<string, any> = IdLabelDto>(
-    props: SelectExProps<T>
-) {
+export function SelectEx<T extends {} = IdLabelDto>(props: SelectExProps<T>) {
     // Destruct
     const {
         defaultValue,
@@ -103,7 +101,11 @@ export function SelectEx<T extends Record<string, any> = IdLabelDto>(
     }
 
     // Value state
-    const [valueState, setValueState] = React.useState(localValue);
+    const [valueState, setValueState] = React.useState<unknown | null>(null);
+
+    React.useEffect(() => {
+        if (localValue != null) setValueState(localValue);
+    }, [localValue]);
 
     // Label id
     const labelId = `selectex-label-${name}`;

package/src/mu/Tiplist.tsx

@@ -62,7 +62,8 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
     const inputRef = React.createRef<HTMLInputElement>();
 
     // Local value
-    const localValue = value ?? defaultValue;
+    let localValue = value ?? defaultValue;
+    if (localValue === undefined) localValue = null;
 
     // One time calculation for input's default value (uncontrolled)
     const localIdValue =
@@ -77,10 +78,14 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
             // Loading unknown
             open: false,
             options: [],
-            value: localValue
+            value: null
         }
     );
 
+    React.useEffect(() => {
+        if (localValue != null) stateUpdate({ value: localValue });
+    }, [localValue]);
+
     // State
     const [state] = React.useState<{
         loadDataSeed?: number;