@etsoo/react 1.2.55 → 1.2.59

package/lib/mu/ComboBox.js

@@ -9,20 +9,29 @@ import { SearchField } from './SearchField';
  * @returns Component
  */
 export function ComboBox(props) {
-    var _a, _b;
     // 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 = (_a = (idValue != null
+    let localValue = idValue != null
         ? localOptions.find((o) => Reflect.get(o, idField) === idValue)
-        : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value)) !== null && _a !== void 0 ? _a : { [idField]: '', [labelField]: '' };
+        : defaultValue !== null && defaultValue !== void 0 ? defaultValue : value;
+    if (localValue === undefined)
+        localValue = null;
     // Current id value
-    const localIdValue = Reflect.get(localValue, idField);
+    // One time calculation for input's default value (uncontrolled)
+    const localIdValue = localValue && Reflect.get(localValue, idField);
+    // State
+    // 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) {
@@ -36,6 +45,22 @@ export function ComboBox(props) {
         Object.assign(params.inputProps, { autoComplete: inputAutoComplete });
         return params;
     };
+    const setInputValue = (value) => {
+        // Set state
+        setStateValue(value);
+        // Input value
+        const input = inputRef.current;
+        if (input) {
+            // Update value
+            const newValue = value != null && idField in value
+                ? `${Reflect.get(value, idField)}`
+                : '';
+            if (newValue !== input.value) {
+                // Different value, trigger change event
+                Utils.triggerChange(input, newValue, false);
+            }
+        }
+    };
     React.useEffect(() => {
         if (loadData) {
             loadData().then((result) => {
@@ -52,20 +77,10 @@ export function ComboBox(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: (_b = Utils.formatInputValue(localIdValue)) !== null && _b !== void 0 ? _b : '', onChange: inputOnChange }),
-        React.createElement(Autocomplete, { value: localValue, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => Reflect.get(option, idField) === Reflect.get(value, idField), onChange: (event, value, reason, details) => {
-                // Input value
-                const input = inputRef.current;
-                if (input) {
-                    // Update value
-                    const newValue = value != null && idField in value
-                        ? `${Reflect.get(value, idField)}`
-                        : '';
-                    if (newValue !== input.value) {
-                        // Different value, trigger change event
-                        Utils.triggerChange(input, newValue, false);
-                    }
-                }
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, defaultValue: localIdValue, onChange: inputOnChange }),
+        React.createElement(Autocomplete, { value: stateValue, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => Reflect.get(option, idField) === Reflect.get(value, idField), onChange: (event, value, reason, details) => {
+                // Set value
+                setInputValue(value);
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);

package/lib/mu/MaskInput.js

@@ -9,11 +9,13 @@ 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 : '';
     // Shrink
     InputLabelProps.shrink = search
         ? MUGlobal.searchFieldShrink
@@ -22,6 +24,9 @@ export function MaskInput(props) {
     if (readOnly != null)
         InputProps.readOnly = readOnly;
     InputProps.inputRef = ref;
+    React.useEffect(() => {
+        maskRef.current.value = String(localValue);
+    }, [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

@@ -9,14 +9,16 @@ import { SearchField } from './SearchField';
  * @returns Component
  */
 export function Tiplist(props) {
-    var _a;
     // Destruct
     const { search = false, idField = 'id', idValue, inputAutoComplete = 'off', inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, name, readOnly, onChange, sx = { minWidth: '180px' }, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
-    const localValue = (_a = value !== null && value !== void 0 ? value : defaultValue) !== null && _a !== void 0 ? _a : { [idField]: '', label: '' };
-    const localIdValue = idValue !== null && idValue !== void 0 ? idValue : Reflect.get(localValue, idField);
+    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
     const [states, stateUpdate] = React.useReducer((currentState, newState) => {
         return { ...currentState, ...newState };
@@ -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);
@@ -127,7 +133,7 @@ export function Tiplist(props) {
     }, []);
     // Layout
     return (React.createElement("div", null,
-        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, value: localIdValue, onChange: inputOnChange }),
+        React.createElement("input", { ref: inputRef, "data-reset": "true", type: "text", style: { display: 'none' }, name: name, defaultValue: localIdValue, onChange: inputOnChange }),
         React.createElement(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                 // Set value
                 setInputValue(value);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@etsoo/react",
-    "version": "1.2.55",
+    "version": "1.2.59",
     "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,14 +73,24 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
     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 ?? value) ??
-        ({ [idField]: '', [labelField]: '' } as T);
+            : defaultValue ?? value;
+
+    if (localValue === undefined) localValue = null;
 
     // Current id value
-    const localIdValue = Reflect.get(localValue, idField);
+    // One time calculation for input's default value (uncontrolled)
+    const localIdValue = localValue && Reflect.get(localValue, idField);
+
+    // State
+    // 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) => {
@@ -99,6 +109,26 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
         return params;
     };
 
+    const setInputValue = (value: T | null) => {
+        // Set state
+        setStateValue(value);
+
+        // Input value
+        const input = inputRef.current;
+        if (input) {
+            // Update value
+            const newValue =
+                value != null && idField in value
+                    ? `${Reflect.get(value, idField)}`
+                    : '';
+
+            if (newValue !== input.value) {
+                // Different value, trigger change event
+                Utils.triggerChange(input, newValue, false);
+            }
+        }
+    };
+
     React.useEffect(() => {
         if (loadData) {
             loadData().then((result) => {
@@ -122,31 +152,19 @@ export function ComboBox<T extends {} = IdLabelDto>(props: ComboBoxProps<T>) {
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={Utils.formatInputValue(localIdValue) ?? ''}
+                defaultValue={localIdValue}
                 onChange={inputOnChange}
             />
             {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
             <Autocomplete
-                value={localValue}
+                value={stateValue}
                 getOptionLabel={getOptionLabel}
                 isOptionEqualToValue={(option: T, value: T) =>
                     Reflect.get(option, idField) === Reflect.get(value, idField)
                 }
                 onChange={(event, value, reason, details) => {
-                    // Input value
-                    const input = inputRef.current;
-                    if (input) {
-                        // Update value
-                        const newValue =
-                            value != null && idField in value
-                                ? `${Reflect.get(value, idField)}`
-                                : '';
-
-                        if (newValue !== input.value) {
-                            // Different value, trigger change event
-                            Utils.triggerChange(input, newValue, false);
-                        }
-                    }
+                    // Set value
+                    setInputValue(value);
 
                     // Custom
                     if (onChange != null)

package/src/mu/MaskInput.tsx

@@ -32,19 +32,22 @@ 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 ?? '';
 
     // Shrink
     InputLabelProps.shrink = search
@@ -55,6 +58,10 @@ export function MaskInput(props: MaskInputProps) {
     if (readOnly != null) InputProps.readOnly = readOnly;
     InputProps.inputRef = ref;
 
+    React.useEffect(() => {
+        maskRef.current.value = String(localValue);
+    }, [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,9 +62,12 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
     const inputRef = React.createRef<HTMLInputElement>();
 
     // Local value
-    const localValue =
-        value ?? defaultValue ?? ({ [idField]: '', label: '' } as unknown as T);
-    const localIdValue = idValue ?? Reflect.get(localValue, idField);
+    let localValue = value ?? defaultValue;
+    if (localValue === undefined) localValue = null;
+
+    // One time calculation for input's default value (uncontrolled)
+    const localIdValue =
+        idValue ?? (localValue && Reflect.get(localValue, idField));
 
     // Changable states
     const [states, stateUpdate] = React.useReducer(
@@ -75,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;
@@ -214,7 +221,7 @@ export function Tiplist<T extends {} = IdLabelDto>(props: TiplistProps<T>) {
                 type="text"
                 style={{ display: 'none' }}
                 name={name}
-                value={localIdValue}
+                defaultValue={localIdValue}
                 onChange={inputOnChange}
             />
             {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}