@etsoo/materialui 1.1.45 → 1.1.47

package/lib/AddresSelector.d.ts

@@ -1,4 +1,5 @@
 import { AddressApi, AddressCity, AddressDistrict, AddressRegionDb, AddressState } from "@etsoo/appscript";
+import { RegularBreakpoints } from "@mui/material";
 import React from "react";
 /**
  * Address field
@@ -10,6 +11,7 @@ export declare 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];
+type AddressFavorType<F extends AddressField> = F extends AddressField.Region | AddressField.State ? string : number;
 /**
  * Address selector props
  */
@@ -18,6 +20,10 @@ export type AddressSelectorProps = {
      * Address API
      */
     api: AddressApi;
+    /**
+     * Break points
+     */
+    breakPoints?: RegularBreakpoints;
     /**
      * City
      */
@@ -38,6 +44,12 @@ export type AddressSelectorProps = {
      * Error
      */
     error?: boolean;
+    /**
+     * Get favored ids
+     * @param field Field
+     * @returns Result
+     */
+    favoredIds?: <F extends AddressField>(field: F) => AddressFavorType<F>[];
     /**
      * The helper text content.
      */

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, onChange, region, regionLabel = regionDefault, required, search, state, stateLabel = stateDefault } = props;
+    const { api, city, cityLabel = cityDefault, district, districtLabel = districtDefault, error, favoredIds, 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);
@@ -39,8 +43,10 @@ export function AddressSelector(props) {
         if (regionState == null)
             setStates([]);
         else
-            api.states(regionState).then((items) => {
-                if (items == null)
+            api
+                .states(regionState, favoredIds == null ? undefined : favoredIds(AddressField.State))
+                .then((items) => {
+                if (items == null || !isMounted.current)
                     return;
                 setStates(items);
             });
@@ -49,8 +55,10 @@ export function AddressSelector(props) {
         if (stateState == null)
             setCities([]);
         else
-            api.cities(stateState).then((items) => {
-                if (items == null)
+            api
+                .cities(stateState, favoredIds == null ? undefined : favoredIds(AddressField.City))
+                .then((items) => {
+                if (items == null || !isMounted.current)
                     return;
                 setCities(items);
             });
@@ -59,16 +67,18 @@ export function AddressSelector(props) {
         if (cityState == null)
             setDistricts([]);
         else
-            api.districts(cityState).then((items) => {
-                if (items == null)
+            api
+                .districts(cityState, favoredIds == null ? undefined : favoredIds(AddressField.District))
+                .then((items) => {
+                if (items == null || !isMounted.current)
                     return;
                 setDistricts(items);
             });
     }, [cityState]);
-    // Field size
-    const fieldSize = hideRegion ? 4 : 3;
     // Handle field change
     const handleChange = (event) => {
+        if (!isMounted.current)
+            return;
         if (onChange)
             onChange(event);
         const [field, data] = event;
@@ -116,12 +126,19 @@ export function AddressSelector(props) {
     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]) }))),
-        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]) })),
-        React.createElement(Grid, { item: true, xs: 12, md: 6, lg: fieldSize },
+        !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,
+                    favoredIds: favoredIds == null
+                        ? undefined
+                        : favoredIds(AddressField.Region)
+                }), 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: required, 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, xs: 12, md: 6, lg: fieldSize },
+        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
@@ -115,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/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.45",
+  "version": "1.1.47",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",
@@ -50,13 +50,13 @@
     "@emotion/css": "^11.10.6",
     "@emotion/react": "^11.10.6",
     "@emotion/styled": "^11.10.6",
-    "@etsoo/appscript": "^1.3.70",
+    "@etsoo/appscript": "^1.3.71",
     "@etsoo/notificationbase": "^1.1.24",
-    "@etsoo/react": "^1.6.49",
-    "@etsoo/shared": "^1.1.89",
-    "@mui/icons-material": "^5.11.9",
-    "@mui/material": "^5.11.10",
-    "@mui/x-data-grid": "^6.0.0-beta.5",
+    "@etsoo/react": "^1.6.50",
+    "@etsoo/shared": "^1.1.90",
+    "@mui/icons-material": "^5.11.11",
+    "@mui/material": "^5.11.12",
+    "@mui/x-data-grid": "^6.0.1",
     "@types/pica": "^9.0.1",
     "@types/pulltorefreshjs": "^0.1.5",
     "@types/react": "^18.0.28",
@@ -71,7 +71,7 @@
     "react-dom": "^18.2.0",
     "react-draggable": "^4.4.5",
     "react-imask": "^6.4.3",
-    "react-router-dom": "^6.8.1",
+    "react-router-dom": "^6.8.2",
     "react-window": "^1.8.8"
   },
   "devDependencies": {
@@ -85,10 +85,10 @@
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^14.0.0",
     "@types/jest": "^29.4.0",
-    "@typescript-eslint/eslint-plugin": "^5.53.0",
-    "@typescript-eslint/parser": "^5.53.0",
-    "jest": "^29.4.3",
-    "jest-environment-jsdom": "^29.4.3",
+    "@typescript-eslint/eslint-plugin": "^5.54.1",
+    "@typescript-eslint/parser": "^5.54.1",
+    "jest": "^29.5.0",
+    "jest-environment-jsdom": "^29.5.0",
     "typescript": "^4.9.5"
   }
 }

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";
@@ -29,6 +29,12 @@ type AddressFieldType<F extends AddressField> = F extends AddressField.Region
   ? [F, AddressCity | null]
   : [F, AddressDistrict | null];
 
+type AddressFavorType<F extends AddressField> = F extends
+  | AddressField.Region
+  | AddressField.State
+  ? string
+  : number;
+
 /**
  * Address selector props
  */
@@ -38,6 +44,11 @@ export type AddressSelectorProps = {
    */
   api: AddressApi;
 
+  /**
+   * Break points
+   */
+  breakPoints?: RegularBreakpoints;
+
   /**
    * City
    */
@@ -63,6 +74,13 @@ export type AddressSelectorProps = {
    */
   error?: boolean;
 
+  /**
+   * Get favored ids
+   * @param field Field
+   * @returns Result
+   */
+  favoredIds?: <F extends AddressField>(field: F) => AddressFavorType<F>[];
+
   /**
    * The helper text content.
    */
@@ -136,6 +154,7 @@ export function AddressSelector(props: AddressSelectorProps) {
     district,
     districtLabel = districtDefault,
     error,
+    favoredIds,
     helperText,
     hideRegion,
     label,
@@ -145,9 +164,18 @@ export function AddressSelector(props: AddressSelectorProps) {
     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);
@@ -166,33 +194,47 @@ export function AddressSelector(props: AddressSelectorProps) {
   React.useEffect(() => {
     if (regionState == null) setStates([]);
     else
-      api.states(regionState).then((items) => {
-        if (items == null) return;
-        setStates(items);
-      });
+      api
+        .states(
+          regionState,
+          favoredIds == null ? undefined : favoredIds(AddressField.State)
+        )
+        .then((items) => {
+          if (items == null || !isMounted.current) return;
+          setStates(items);
+        });
   }, [regionState]);
   React.useEffect(() => {
     if (stateState == null) setCities([]);
     else
-      api.cities(stateState).then((items) => {
-        if (items == null) return;
-        setCities(items);
-      });
+      api
+        .cities(
+          stateState,
+          favoredIds == null ? undefined : favoredIds(AddressField.City)
+        )
+        .then((items) => {
+          if (items == null || !isMounted.current) return;
+          setCities(items);
+        });
   }, [stateState]);
   React.useEffect(() => {
     if (cityState == null) setDistricts([]);
     else
-      api.districts(cityState).then((items) => {
-        if (items == null) return;
-        setDistricts(items);
-      });
+      api
+        .districts(
+          cityState,
+          favoredIds == null ? undefined : favoredIds(AddressField.District)
+        )
+        .then((items) => {
+          if (items == null || !isMounted.current) return;
+          setDistricts(items);
+        });
   }, [cityState]);
 
-  // Field size
-  const fieldSize = hideRegion ? 4 : 3;
-
   // Handle field change
   const handleChange = <F extends AddressField>(event: AddressFieldType<F>) => {
+    if (!isMounted.current) return;
+
     if (onChange) onChange(event);
 
     const [field, data] = event;
@@ -254,7 +296,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}
@@ -262,7 +304,15 @@ export function AddressSelector(props: AddressSelectorProps) {
             fullWidth
             idValue={regionState}
             loadData={(keyword, id, items) =>
-              api.getRegions({ keyword, id, items })
+              api.getRegions({
+                keyword,
+                id,
+                items,
+                favoredIds:
+                  favoredIds == null
+                    ? undefined
+                    : favoredIds(AddressField.Region)
+              })
             }
             inputRequired={required}
             inputError={error}
@@ -273,7 +323,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           />
         </Grid>
       )}
-      <Grid item xs={12} md={6} lg={fieldSize}>
+      <Grid item {...breakPoints}>
         <ComboBox<AddressState>
           name={AddressField.State}
           label={stateLabel}
@@ -281,7 +331,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           fullWidth
           idValue={stateState}
           options={states}
-          inputRequired={hideRegion ? required : undefined}
+          inputRequired={required}
           inputError={hideRegion ? error : undefined}
           inputHelperText={hideRegion ? helperText : undefined}
           onChange={(_event, value) =>
@@ -289,7 +339,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           }
         />
       </Grid>
-      <Grid item xs={12} md={6} lg={fieldSize}>
+      <Grid item {...breakPoints}>
         <ComboBox<AddressCity>
           name={AddressField.City}
           label={cityLabel}
@@ -300,7 +350,7 @@ export function AddressSelector(props: AddressSelectorProps) {
           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}

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;
 
@@ -262,6 +263,7 @@ export function ComboBox<
         options={localOptions}
         noOptionsText={noOptionsText}
         loadingText={loadingText}
+        openText={openText}
         {...rest}
       />
     </div>

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;