@etsoo/materialui 1.1.44 → 1.1.46

package/lib/AddresSelector.d.ts

@@ -1,4 +1,5 @@
-import { AddressApi } from "@etsoo/appscript";
+import { AddressApi, AddressCity, AddressDistrict, AddressRegionDb, AddressState } from "@etsoo/appscript";
+import { RegularBreakpoints } from "@mui/material";
 import React from "react";
 /**
  * Address field
@@ -9,6 +10,7 @@ export declare enum AddressField {
     City = "city",
     District = "district"
 }
+type AddressFieldType<F extends AddressField> = F extends AddressField.Region ? [F, AddressRegionDb | null] : F extends AddressField.State ? [F, AddressState | null] : F extends AddressField.City ? [F, AddressCity | null] : [F, AddressDistrict | null];
 /**
  * Address selector props
  */
@@ -17,6 +19,10 @@ export type AddressSelectorProps = {
      * Address API
      */
     api: AddressApi;
+    /**
+     * Break points
+     */
+    breakPoints?: RegularBreakpoints;
     /**
      * City
      */
@@ -49,6 +55,11 @@ export type AddressSelectorProps = {
      * Label
      */
     label?: string;
+    /**
+     * Onchange hanlder
+     * @param event Event
+     */
+    onChange?: <F extends AddressField>(event: AddressFieldType<F>) => void;
     /**
      * Country or region
      */
@@ -79,3 +90,4 @@ export type AddressSelectorProps = {
  * @param props Props
  */
 export declare function AddressSelector(props: AddressSelectorProps): JSX.Element;
+export {};

package/lib/AddresSelector.js

@@ -22,7 +22,11 @@ export function AddressSelector(props) {
     // Labels
     const { city: cityDefault = "City", district: districtDefault = "District", region: regionDefault = "Region", state: stateDefault = "State" } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("region", "state", "city", "district")) !== null && _a !== void 0 ? _a : {};
     // Destruct
-    const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, helperText, hideRegion, label, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault } = props;
+    const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, helperText, hideRegion, label, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault, breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 } } = props;
+    const isMounted = React.useRef(true);
+    React.useEffect(() => () => {
+        isMounted.current = false;
+    }, []);
     // States
     const [regionState, setRegion] = React.useState(region);
     const [stateState, setState] = React.useState(state);
@@ -40,7 +44,7 @@ export function AddressSelector(props) {
             setStates([]);
         else
             api.states(regionState).then((items) => {
-                if (items == null)
+                if (items == null || !isMounted.current)
                     return;
                 setStates(items);
             });
@@ -50,7 +54,7 @@ export function AddressSelector(props) {
             setCities([]);
         else
             api.cities(stateState).then((items) => {
-                if (items == null)
+                if (items == null || !isMounted.current)
                     return;
                 setCities(items);
             });
@@ -60,21 +64,24 @@ export function AddressSelector(props) {
             setDistricts([]);
         else
             api.districts(cityState).then((items) => {
-                if (items == null)
+                if (items == null || !isMounted.current)
                     return;
                 setDistricts(items);
             });
     }, [cityState]);
-    // Field size
-    const fieldSize = hideRegion ? 4 : 3;
     // Handle field change
-    const handleChange = (field, value) => {
+    const handleChange = (event) => {
+        if (!isMounted.current)
+            return;
+        if (onChange)
+            onChange(event);
+        const [field, data] = event;
         if (field === AddressField.Region) {
-            if (value == null) {
+            if (data == null) {
                 setRegion(undefined);
             }
             else {
-                setRegion(value);
+                setRegion(data.id);
             }
             setState(undefined);
             setCity(undefined);
@@ -82,50 +89,43 @@ export function AddressSelector(props) {
             return;
         }
         if (field === AddressField.State) {
-            if (value == null) {
+            if (data == null) {
                 setState(undefined);
             }
             else {
-                setState(value);
+                setState(data.id);
             }
             setCity(undefined);
             setDistrict(undefined);
             return;
         }
         if (field === AddressField.City) {
-            if (value == null) {
+            if (data == null) {
                 setCity(undefined);
             }
-            else if (typeof value === "number") {
-                setCity(value);
-            }
             else {
-                setCity(parseInt(`${value}`));
+                setCity(data.id);
             }
             setDistrict(undefined);
             return;
         }
-        if (value == null) {
+        if (data == null) {
             setDistrict(undefined);
         }
-        else if (typeof value === "number") {
-            setDistrict(value);
-        }
         else {
-            setDistrict(parseInt(`${value}`));
+            setDistrict(data.id);
         }
     };
-    console.log(regionState, stateState, cityState, districtState);
     // Layout
     return (React.createElement(React.Fragment, null,
         label && (React.createElement(Grid, { item: true, xs: 12 },
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
-        !hideRegion && (React.createElement(Grid, { item: true, xs: 12, md: 6, lg: fieldSize },
-            React.createElement(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.getRegions({ keyword, id, items }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange(AddressField.Region, value === null || value === void 0 ? void 0 : value.id) }))),
-        React.createElement(Grid, { item: true, xs: 12, md: 6, lg: fieldSize },
-            React.createElement(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: hideRegion ? required : undefined, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange(AddressField.State, value === null || value === void 0 ? void 0 : value.id) })),
-        React.createElement(Grid, { item: true, xs: 12, md: 6, lg: fieldSize },
-            React.createElement(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange(AddressField.City, value === null || value === void 0 ? void 0 : value.id) })),
-        React.createElement(Grid, { item: true, xs: 12, md: 6, lg: fieldSize },
-            React.createElement(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange(AddressField.District, value === null || value === void 0 ? void 0 : value.id) }))));
+        !hideRegion && (React.createElement(Grid, { item: true, ...breakPoints },
+            React.createElement(Tiplist, { label: regionLabel, name: AddressField.Region, search: search, fullWidth: true, idValue: regionState, loadData: (keyword, id, items) => api.getRegions({ keyword, id, items }), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (_event, value) => handleChange([AddressField.Region, value]) }))),
+        React.createElement(Grid, { item: true, ...breakPoints },
+            React.createElement(ComboBox, { name: AddressField.State, label: stateLabel, search: search, fullWidth: true, idValue: stateState, options: states, inputRequired: hideRegion ? required : undefined, inputError: hideRegion ? error : undefined, inputHelperText: hideRegion ? helperText : undefined, onChange: (_event, value) => handleChange([AddressField.State, value]) })),
+        React.createElement(Grid, { item: true, ...breakPoints },
+            React.createElement(ComboBox, { name: AddressField.City, label: cityLabel, search: search, fullWidth: true, idValue: cityState, options: cities, onChange: (_event, value) => handleChange([AddressField.City, value]) })),
+        React.createElement(Grid, { item: true, ...breakPoints },
+            React.createElement(ComboBox, { name: AddressField.District, label: districtLabel, search: search, fullWidth: true, idValue: districtState, options: districts, onChange: (_event, value) => handleChange([AddressField.District, value]) }))));
 }

package/lib/ComboBox.js

@@ -13,10 +13,10 @@ import { globalApp } from "./app/ReactApp";
  */
 export function ComboBox(props) {
     // Labels
-    const labels = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading");
+    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 = "new-password", // disable autocomplete and autofill, 'off' does not work
-    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, ...rest } = props;
+    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;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -26,8 +26,13 @@ export function ComboBox(props) {
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null)
+        if (propertyWay && options != null) {
             setOptions(options);
+            if (stateValue != null &&
+                !options.some((option) => option[idField] === stateValue[idField])) {
+                setStateValue(null);
+            }
+        }
     }, [options, propertyWay]);
     // Local default value
     const localValue = idValue != null
@@ -110,5 +115,5 @@ export function ComboBox(props) {
                 // Custom
                 if (onChange != null)
                     onChange(event, value, reason, details);
-            }, 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, ...rest })));
+            }, 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.js

@@ -33,8 +33,18 @@ export function ComboBoxMultiple(props) {
     // [options] will cause infinite loop
     const propertyWay = loadData == null;
     React.useEffect(() => {
-        if (propertyWay && options != null)
+        if (propertyWay && options != null) {
             setOptions(options);
+            if (stateValue != null) {
+                if (Array.isArray(stateValue)) {
+                    const newState = stateValue.filter((item) => options.some((option) => option[idField] === item[idField]));
+                    setStateValue(newState);
+                }
+                else if (!options.some((option) => option[idField] === stateValue[idField])) {
+                    setStateValue(null);
+                }
+            }
+        }
     }, [options, propertyWay]);
     // Local default value
     const localValue = idValue != null

package/lib/HiSelector.d.ts

@@ -1,10 +1,14 @@
 import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
-import { SelectChangeEvent } from "@mui/material";
+import { RegularBreakpoints, SelectChangeEvent } from "@mui/material";
 import React from "react";
 /**
  * Hierarchy selector props
  */
 export type HiSelectorProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>, L extends DataTypes.Keys<T, string> = LabelDefaultType<T>> = {
+    /**
+     * Break points
+     */
+    breakPoints?: RegularBreakpoints;
     /**
      * Id field
      */

package/lib/HiSelector.js

@@ -8,7 +8,7 @@ import { SelectEx } from "./SelectEx";
  */
 export function HiSelector(props) {
     // Destruct
-    const { idField = "id", error, helperText, name, label, labelField = "name", loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [] } = props;
+    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label, labelField = "name", loadData, onChange, onSelectChange, onItemChange, required, search = true, values = [] } = props;
     const [localValues, setValues] = React.useState(values);
     const updateValue = (value) => {
         if (onChange)
@@ -43,12 +43,12 @@ export function HiSelector(props) {
         label && (React.createElement(Grid, { item: true, xs: 12 },
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
         React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` }),
-        React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+        React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(SelectEx, { idField: idField, labelField: labelField, name: "tab1", search: search, fullWidth: true, loadData: () => loadData(), value: values[0], onChange: (event) => doChange(event, 0), onItemChange: doItemChange, inputRequired: required, error: error, helperText: helperText })),
-        localValues[0] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+        localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(SelectEx, { key: `${localValues[0]}`, idField: idField, labelField: labelField, name: "tab2", search: search, fullWidth: true, loadData: () => loadData(localValues[0]), value: values[1], onChange: (event) => doChange(event, 1), onItemChange: doItemChange }))),
-        localValues[1] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+        localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(SelectEx, { key: `${localValues[1]}`, idField: idField, labelField: labelField, name: "tab3", search: search, fullWidth: true, loadData: () => loadData(localValues[1]), value: values[2], onChange: (event) => doChange(event, 2), onItemChange: doItemChange }))),
-        localValues[2] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+        localValues[2] != null && (React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(SelectEx, { key: `${localValues[2]}`, idField: idField, labelField: labelField, name: "tab4", search: search, fullWidth: true, loadData: () => loadData(localValues[2]), value: values[3], onChange: (event) => doChange(event, 3), onItemChange: doItemChange })))));
 }

package/lib/HiSelectorTL.d.ts

@@ -1,10 +1,14 @@
 import { DataTypes, IdDefaultType } from "@etsoo/shared";
-import { AutocompleteChangeReason } from "@mui/material";
+import { AutocompleteChangeReason, RegularBreakpoints } from "@mui/material";
 import React from "react";
 /**
  * Hierarchy tiplist selector props
  */
 export type HiSelectorTLProps<T extends object, D extends DataTypes.Keys<T> = IdDefaultType<T>> = {
+    /**
+     * Break points
+     */
+    breakPoints?: RegularBreakpoints;
     /**
      * Id field
      */

package/lib/HiSelectorTL.js

@@ -8,7 +8,7 @@ import { Tiplist } from "./Tiplist";
  */
 export function HiSelectorTL(props) {
     // Destruct
-    const { idField = "id", error, helperText, name, label = name, loadData, onChange, onItemChange, required, search = false, values = [] } = props;
+    const { breakPoints = { xs: 6, md: 4, lg: 3 }, idField = "id", error, helperText, name, label = name, loadData, onChange, onItemChange, required, search = false, values = [] } = props;
     const [localValues, setValues] = React.useState(values);
     const updateValue = (value) => {
         if (onChange)
@@ -38,12 +38,12 @@ export function HiSelectorTL(props) {
         label && (React.createElement(Grid, { item: true, xs: 12 },
             React.createElement(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.caption } }, label))),
         React.createElement("input", { type: "hidden", name: name, value: `${currentValue !== null && currentValue !== void 0 ? currentValue : ""}` }),
-        React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+        React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(Tiplist, { idField: idField, label: "1", name: "tab1", search: search, fullWidth: true, idValue: values[0], loadData: (keyword, id, items) => loadData(keyword, id, items), inputRequired: required, inputError: error, inputHelperText: helperText, onChange: (event, value, reason) => doChange(0, event, value, reason) })),
-        localValues[0] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+        localValues[0] != null && (React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(Tiplist, { key: `${localValues[0]}`, label: "2", idField: idField, name: "tab2", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[0]), idValue: values[1], onChange: (event, value, reason) => doChange(1, event, value, reason) }))),
-        localValues[1] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+        localValues[1] != null && (React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(Tiplist, { key: `${localValues[1]}`, label: "3", idField: idField, name: "tab3", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[1]), idValue: values[2], onChange: (event, value, reason) => doChange(2, event, value, reason) }))),
-        localValues[2] != null && (React.createElement(Grid, { item: true, xs: 6, md: 4, lg: 3 },
+        localValues[2] != null && (React.createElement(Grid, { item: true, ...breakPoints },
             React.createElement(Tiplist, { key: `${localValues[2]}`, label: "4", idField: idField, name: "tab4", search: search, fullWidth: true, loadData: (keyword, id, items) => loadData(keyword, id, items, localValues[2]), idValue: values[3], onChange: (event, value, reason) => doChange(3, event, value, reason) })))));
 }

package/lib/Tiplist.js

@@ -13,9 +13,9 @@ import { SearchField } from "./SearchField";
 export function Tiplist(props) {
     var _a;
     // Labels
-    const { noOptions, loading, more } = (_a = globalApp === null || globalApp === void 0 ? void 0 : globalApp.getLabels("noOptions", "loading", "more")) !== null && _a !== void 0 ? _a : {};
+    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 = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: "180px" }, noOptionsText = noOptions, loadingText = loading, getOptionLabel, getOptionDisabled, ...rest } = props;
+    const { search = false, idField = "id", idValue, inputAutoComplete = "new-password", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputVariant, label, loadData, defaultValue, value, maxItems = 16, name, readOnly, onChange, openOnFocus = true, sx = { minWidth: "180px" }, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -156,7 +156,7 @@ export function Tiplist(props) {
                     open: false,
                     ...(!states.value && { options: [] })
                 });
-            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], noOptionsText: noOptionsText, loadingText: loadingText, getOptionDisabled: (item) => {
+            }, loading: states.loading, sx: sx, renderInput: (params) => search ? (React.createElement(SearchField, { onChange: changeHandle, ...addReadOnly(params), readOnly: readOnly, label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })) : (React.createElement(InputField, { onChange: changeHandle, ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, autoComplete: inputAutoComplete, error: inputError, helperText: inputHelperText })), isOptionEqualToValue: (option, value) => option[idField] === value[idField], noOptionsText: noOptionsText, loadingText: loadingText, openText: openText, getOptionDisabled: (item) => {
                 if (item[idField] === "n/a")
                     return true;
                 return getOptionDisabled ? getOptionDisabled(item) : false;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.1.44",
+  "version": "1.1.46",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/AddresSelector.tsx

@@ -5,7 +5,7 @@ import {
   AddressRegionDb,
   AddressState
 } from "@etsoo/appscript";
-import { FormLabel, Grid } from "@mui/material";
+import { FormLabel, Grid, RegularBreakpoints } from "@mui/material";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { ComboBox } from "./ComboBox";
@@ -21,6 +21,14 @@ export enum AddressField {
   District = "district"
 }
 
+type AddressFieldType<F extends AddressField> = F extends AddressField.Region
+  ? [F, AddressRegionDb | null]
+  : F extends AddressField.State
+  ? [F, AddressState | null]
+  : F extends AddressField.City
+  ? [F, AddressCity | null]
+  : [F, AddressDistrict | null];
+
 /**
  * Address selector props
  */
@@ -30,6 +38,11 @@ export type AddressSelectorProps = {
    */
   api: AddressApi;
 
+  /**
+   * Break points
+   */
+  breakPoints?: RegularBreakpoints;
+
   /**
    * City
    */
@@ -70,6 +83,12 @@ export type AddressSelectorProps = {
    */
   label?: string;
 
+  /**
+   * Onchange hanlder
+   * @param event Event
+   */
+  onChange?: <F extends AddressField>(event: AddressFieldType<F>) => void;
+
   /**
    * Country or region
    */
@@ -125,14 +144,24 @@ export function AddressSelector(props: AddressSelectorProps) {
     helperText,
     hideRegion,
     label,
+    onChange,
     region,
     regionLabel = regionDefault,
     required,
     search,
     state,
-    stateLabel = stateDefault
+    stateLabel = stateDefault,
+    breakPoints = { xs: 12, md: 6, lg: hideRegion ? 4 : 3 }
   } = props;
 
+  const isMounted = React.useRef(true);
+  React.useEffect(
+    () => () => {
+      isMounted.current = false;
+    },
+    []
+  );
+
   // States
   const [regionState, setRegion] = React.useState(region);
   const [stateState, setState] = React.useState(state);
@@ -152,7 +181,7 @@ export function AddressSelector(props: AddressSelectorProps) {
     if (regionState == null) setStates([]);
     else
       api.states(regionState).then((items) => {
-        if (items == null) return;
+        if (items == null || !isMounted.current) return;
         setStates(items);
       });
   }, [regionState]);
@@ -160,7 +189,7 @@ export function AddressSelector(props: AddressSelectorProps) {
     if (stateState == null) setCities([]);
     else
       api.cities(stateState).then((items) => {
-        if (items == null) return;
+        if (items == null || !isMounted.current) return;
         setCities(items);
       });
   }, [stateState]);
@@ -168,21 +197,24 @@ export function AddressSelector(props: AddressSelectorProps) {
     if (cityState == null) setDistricts([]);
     else
       api.districts(cityState).then((items) => {
-        if (items == null) return;
+        if (items == null || !isMounted.current) return;
         setDistricts(items);
       });
   }, [cityState]);
 
-  // Field size
-  const fieldSize = hideRegion ? 4 : 3;
-
   // Handle field change
-  const handleChange = (field: AddressField, value: unknown) => {
+  const handleChange = <F extends AddressField>(event: AddressFieldType<F>) => {
+    if (!isMounted.current) return;
+
+    if (onChange) onChange(event);
+
+    const [field, data] = event;
+
     if (field === AddressField.Region) {
-      if (value == null) {
+      if (data == null) {
         setRegion(undefined);
       } else {
-        setRegion(value as string);
+        setRegion(data.id);
       }
       setState(undefined);
       setCity(undefined);
@@ -192,10 +224,10 @@ export function AddressSelector(props: AddressSelectorProps) {
     }
 
     if (field === AddressField.State) {
-      if (value == null) {
+      if (data == null) {
         setState(undefined);
       } else {
-        setState(value as string);
+        setState(data.id);
       }
       setCity(undefined);
       setDistrict(undefined);
@@ -204,29 +236,23 @@ export function AddressSelector(props: AddressSelectorProps) {
     }
 
     if (field === AddressField.City) {
-      if (value == null) {
+      if (data == null) {
         setCity(undefined);
-      } else if (typeof value === "number") {
-        setCity(value);
       } else {
-        setCity(parseInt(`${value}`));
+        setCity(data.id);
       }
       setDistrict(undefined);
 
       return;
     }
 
-    if (value == null) {
+    if (data == null) {
       setDistrict(undefined);
-    } else if (typeof value === "number") {
-      setDistrict(value);
     } else {
-      setDistrict(parseInt(`${value}`));
+      setDistrict(data.id);
     }
   };
 
-  console.log(regionState, stateState, cityState, districtState);
-
   // Layout
   return (
     <React.Fragment>
@@ -241,7 +267,7 @@ export function AddressSelector(props: AddressSelectorProps) {
         </Grid>
       )}
       {!hideRegion && (
-        <Grid item xs={12} md={6} lg={fieldSize}>
+        <Grid item {...breakPoints}>
           <Tiplist<AddressRegionDb>
             label={regionLabel}
             name={AddressField.Region}
@@ -255,12 +281,12 @@ export function AddressSelector(props: AddressSelectorProps) {
             inputError={error}
             inputHelperText={helperText}
             onChange={(_event, value) =>
-              handleChange(AddressField.Region, value?.id)
+              handleChange([AddressField.Region, value])
             }
           />
         </Grid>
       )}
-      <Grid item xs={12} md={6} lg={fieldSize}>
+      <Grid item {...breakPoints}>
         <ComboBox<AddressState>
           name={AddressField.State}
           label={stateLabel}
@@ -272,11 +298,11 @@ export function AddressSelector(props: AddressSelectorProps) {
           inputError={hideRegion ? error : undefined}
           inputHelperText={hideRegion ? helperText : undefined}
           onChange={(_event, value) =>
-            handleChange(AddressField.State, value?.id)
+            handleChange([AddressField.State, value])
           }
         />
       </Grid>
-      <Grid item xs={12} md={6} lg={fieldSize}>
+      <Grid item {...breakPoints}>
         <ComboBox<AddressCity>
           name={AddressField.City}
           label={cityLabel}
@@ -284,12 +310,10 @@ export function AddressSelector(props: AddressSelectorProps) {
           fullWidth
           idValue={cityState}
           options={cities}
-          onChange={(_event, value) =>
-            handleChange(AddressField.City, value?.id)
-          }
+          onChange={(_event, value) => handleChange([AddressField.City, value])}
         />
       </Grid>
-      <Grid item xs={12} md={6} lg={fieldSize}>
+      <Grid item {...breakPoints}>
         <ComboBox<AddressDistrict>
           name={AddressField.District}
           label={districtLabel}
@@ -298,7 +322,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           idValue={districtState}
           options={districts}
           onChange={(_event, value) =>
-            handleChange(AddressField.District, value?.id)
+            handleChange([AddressField.District, value])
           }
         />
       </Grid>

package/src/ComboBox.tsx

@@ -64,7 +64,7 @@ export function ComboBox<
   L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 >(props: ComboBoxProps<T, D, L>) {
   // Labels
-  const labels = globalApp?.getLabels("noOptions", "loading");
+  const labels = globalApp?.getLabels("noOptions", "loading", "open");
 
   // Destruct
   const {
@@ -96,6 +96,7 @@ export function ComboBox<
     sx = { minWidth: "150px" },
     noOptionsText = labels?.noOptions,
     loadingText = labels?.loading,
+    openText = labels?.open,
     ...rest
   } = props;
 
@@ -110,7 +111,15 @@ export function ComboBox<
   // [options] will cause infinite loop
   const propertyWay = loadData == null;
   React.useEffect(() => {
-    if (propertyWay && options != null) setOptions(options);
+    if (propertyWay && options != null) {
+      setOptions(options);
+      if (
+        stateValue != null &&
+        !options.some((option) => option[idField] === stateValue[idField])
+      ) {
+        setStateValue(null);
+      }
+    }
   }, [options, propertyWay]);
 
   // Local default value
@@ -254,6 +263,7 @@ export function ComboBox<
         options={localOptions}
         noOptionsText={noOptionsText}
         loadingText={loadingText}
+        openText={openText}
         {...rest}
       />
     </div>

package/src/ComboBoxMultiple.tsx

@@ -139,7 +139,22 @@ export function ComboBoxMultiple<
   // [options] will cause infinite loop
   const propertyWay = loadData == null;
   React.useEffect(() => {
-    if (propertyWay && options != null) setOptions(options);
+    if (propertyWay && options != null) {
+      setOptions(options);
+
+      if (stateValue != null) {
+        if (Array.isArray(stateValue)) {
+          const newState = stateValue.filter((item) =>
+            options.some((option) => option[idField] === item[idField])
+          );
+          setStateValue(newState);
+        } else if (
+          !options.some((option) => option[idField] === stateValue[idField])
+        ) {
+          setStateValue(null);
+        }
+      }
+    }
   }, [options, propertyWay]);
 
   // Local default value

package/src/HiSelector.tsx

@@ -1,5 +1,10 @@
 import { DataTypes, IdDefaultType, LabelDefaultType } from "@etsoo/shared";
-import { FormLabel, Grid, SelectChangeEvent } from "@mui/material";
+import {
+  FormLabel,
+  Grid,
+  RegularBreakpoints,
+  SelectChangeEvent
+} from "@mui/material";
 import React from "react";
 import { SelectEx } from "./SelectEx";
 
@@ -11,6 +16,11 @@ export type HiSelectorProps<
   D extends DataTypes.Keys<T> = IdDefaultType<T>,
   L extends DataTypes.Keys<T, string> = LabelDefaultType<T>
 > = {
+  /**
+   * Break points
+   */
+  breakPoints?: RegularBreakpoints;
+
   /**
    * Id field
    */
@@ -89,6 +99,7 @@ export function HiSelector<
 >(props: HiSelectorProps<T, D, L>) {
   // Destruct
   const {
+    breakPoints = { xs: 6, md: 4, lg: 3 },
     idField = "id" as D,
     error,
     helperText,
@@ -153,7 +164,7 @@ export function HiSelector<
         </Grid>
       )}
       <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
-      <Grid item xs={6} md={4} lg={3}>
+      <Grid item {...breakPoints}>
         <SelectEx<T, D, L>
           idField={idField}
           labelField={labelField}
@@ -170,7 +181,7 @@ export function HiSelector<
         />
       </Grid>
       {localValues[0] != null && (
-        <Grid item xs={6} md={4} lg={3}>
+        <Grid item {...breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[0]}`}
             idField={idField}
@@ -186,7 +197,7 @@ export function HiSelector<
         </Grid>
       )}
       {localValues[1] != null && (
-        <Grid item xs={6} md={4} lg={3}>
+        <Grid item {...breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[1]}`}
             idField={idField}
@@ -202,7 +213,7 @@ export function HiSelector<
         </Grid>
       )}
       {localValues[2] != null && (
-        <Grid item xs={6} md={4} lg={3}>
+        <Grid item {...breakPoints}>
           <SelectEx<T, D, L>
             key={`${localValues[2]}`}
             idField={idField}

package/src/HiSelectorTL.tsx

@@ -3,7 +3,8 @@ import {
   AutocompleteChangeReason,
   AutocompleteValue,
   FormLabel,
-  Grid
+  Grid,
+  RegularBreakpoints
 } from "@mui/material";
 import React from "react";
 import { Tiplist } from "./Tiplist";
@@ -15,6 +16,11 @@ export type HiSelectorTLProps<
   T extends object,
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 > = {
+  /**
+   * Break points
+   */
+  breakPoints?: RegularBreakpoints;
+
   /**
    * Id field
    */
@@ -91,6 +97,7 @@ export function HiSelectorTL<
 >(props: HiSelectorTLProps<T, D>) {
   // Destruct
   const {
+    breakPoints = { xs: 6, md: 4, lg: 3 },
     idField = "id" as D,
     error,
     helperText,
@@ -153,7 +160,7 @@ export function HiSelectorTL<
         </Grid>
       )}
       <input type="hidden" name={name} value={`${currentValue ?? ""}`} />
-      <Grid item xs={6} md={4} lg={3}>
+      <Grid item {...breakPoints}>
         <Tiplist<T, D>
           idField={idField}
           label="1"
@@ -169,7 +176,7 @@ export function HiSelectorTL<
         />
       </Grid>
       {localValues[0] != null && (
-        <Grid item xs={6} md={4} lg={3}>
+        <Grid item {...breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[0]}`}
             label="2"
@@ -188,7 +195,7 @@ export function HiSelectorTL<
         </Grid>
       )}
       {localValues[1] != null && (
-        <Grid item xs={6} md={4} lg={3}>
+        <Grid item {...breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[1]}`}
             label="3"
@@ -207,7 +214,7 @@ export function HiSelectorTL<
         </Grid>
       )}
       {localValues[2] != null && (
-        <Grid item xs={6} md={4} lg={3}>
+        <Grid item {...breakPoints}>
           <Tiplist<T, D>
             key={`${localValues[2]}`}
             label="4"

package/src/Tiplist.tsx

@@ -47,8 +47,12 @@ export function Tiplist<
   D extends DataTypes.Keys<T> = IdDefaultType<T>
 >(props: TiplistProps<T, D>) {
   // Labels
-  const { noOptions, loading, more } =
-    globalApp?.getLabels("noOptions", "loading", "more") ?? {};
+  const {
+    noOptions,
+    loading,
+    more,
+    open: openDefault
+  } = globalApp?.getLabels("noOptions", "loading", "more", "open") ?? {};
 
   // Destruct
   const {
@@ -74,6 +78,7 @@ export function Tiplist<
     sx = { minWidth: "180px" },
     noOptionsText = noOptions,
     loadingText = loading,
+    openText = openDefault,
     getOptionLabel,
     getOptionDisabled,
     ...rest
@@ -313,6 +318,7 @@ export function Tiplist<
         }
         noOptionsText={noOptionsText}
         loadingText={loadingText}
+        openText={openText}
         getOptionDisabled={(item) => {
           if (item[idField] === "n/a") return true;
           return getOptionDisabled ? getOptionDisabled(item) : false;