@etsoo/materialui 1.5.7 → 1.5.9

package/__tests__/ReactAppTests.tsx

@@ -74,10 +74,10 @@ root.append(container);
 
 // The state provider
 const Provider = ReactApp.notifierProvider;
-const reactRoot = createRoot(container);
 
 act(() => {
   // Concorrent renderer needs act block
+  const reactRoot = createRoot(container);
   reactRoot.render(<Provider />);
 });
 

package/lib/cjs/AutocompleteExtendedProps.d.ts

@@ -13,6 +13,11 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
      * Id value
      */
     idValue?: T[D];
+    /**
+     * Is the id value a string?
+     * @default false
+     */
+    idIsString?: boolean;
     /**
      * Autocomplete for the input
      */

package/lib/cjs/ComboBox.js

@@ -27,7 +27,7 @@ function ComboBox(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading", "open", "add");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idIsString = false, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
     // Options state
@@ -124,7 +124,7 @@ function ComboBox(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsxs)(Stack_1.default, { gap: 0.5, direction: "row", width: "100%", children: [(0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/cjs/Tiplist.js

@@ -23,7 +23,7 @@ function Tiplist(props) {
     // Labels
     const { noOptions, loading, more1 = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more1", "open") ?? {};
     // Destruct
-    const { search = false, idField = "id", idValue, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
+    const { search = false, idField = "id", idValue, idIsString = false, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -172,7 +172,7 @@ function Tiplist(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom

package/lib/cjs/TiplistPro.d.ts

@@ -30,6 +30,11 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<Autocomplete
      * Id value
      */
     idValue?: T["id"] | null;
+    /**
+     * Is the id value a string?
+     * @default false
+     */
+    idIsString?: boolean;
     /**
      * Input onChange hanlder
      */

package/lib/cjs/TiplistPro.js

@@ -22,7 +22,7 @@ function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -158,7 +158,7 @@ function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);

package/lib/mjs/AutocompleteExtendedProps.d.ts

@@ -13,6 +13,11 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
      * Id value
      */
     idValue?: T[D];
+    /**
+     * Is the id value a string?
+     * @default false
+     */
+    idIsString?: boolean;
     /**
      * Autocomplete for the input
      */

package/lib/mjs/ComboBox.js

@@ -21,7 +21,7 @@ export function ComboBox(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading", "open", "add");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idIsString = false, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, onValueChange, openOnFocus = true, value, disableCloseOnSelect = false, getOptionLabel = (option) => `${option[labelField]}`, sx = { minWidth: "150px", flexGrow: 2 }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, openText = labels?.open, addLabel = labels?.add, onAdd, getOptionKey = (option) => `${option[idField]}`, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -118,7 +118,7 @@ export function ComboBox(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsxs(Stack, { gap: 0.5, direction: "row", width: "100%", children: [_jsx(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsxs(Stack, { gap: 0.5, direction: "row", width: "100%", children: [_jsx(Autocomplete, { value: stateValue, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/mjs/Tiplist.js

@@ -17,7 +17,7 @@ export function Tiplist(props) {
     // Labels
     const { noOptions, loading, more1 = "More", open: openDefault } = app?.getLabels("noOptions", "loading", "more1", "open") ?? {};
     // Destruct
-    const { search = false, idField = "id", idValue, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
+    const { search = false, idField = "id", idValue, idIsString = false, inputAutoComplete = "off", inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, label, loadData, defaultValue, value, maxItems = 16, width = search ? 160 : undefined, name, readOnly, onChange, onValueChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -166,7 +166,7 @@ export function Tiplist(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: `${inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}`, readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom

package/lib/mjs/TiplistPro.d.ts

@@ -30,6 +30,11 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<Autocomplete
      * Id value
      */
     idValue?: T["id"] | null;
+    /**
+     * Is the id value a string?
+     * @default false
+     */
+    idIsString?: boolean;
     /**
      * Input onChange hanlder
      */

package/lib/mjs/TiplistPro.js

@@ -16,7 +16,7 @@ export function TiplistPro(props) {
     // Labels
     const { noOptions, loading, more, open: openDefault } = app?.getLabels("noOptions", "loading", "more", "open") ?? {};
     // Destruct
-    const { label, loadData, defaultValue, value, idValue, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
+    const { label, loadData, defaultValue, value, idValue, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, onChange, onValueChange, minChars, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -152,7 +152,7 @@ export function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
+    return (_jsxs("div", { children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: inputValue ?? (state.current.idSet ? "" : localIdValue ?? ""), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.7",
+  "version": "1.5.9",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,10 +40,10 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.0",
-    "@etsoo/appscript": "^1.6.20",
-    "@etsoo/notificationbase": "^1.1.59",
-    "@etsoo/react": "^1.8.34",
-    "@etsoo/shared": "^1.2.63",
+    "@etsoo/appscript": "^1.6.21",
+    "@etsoo/notificationbase": "^1.1.60",
+    "@etsoo/react": "^1.8.35",
+    "@etsoo/shared": "^1.2.66",
     "@mui/icons-material": "^7.0.1",
     "@mui/material": "^7.0.1",
     "@mui/x-data-grid": "^7.28.2",
@@ -83,6 +83,6 @@
     "@vitejs/plugin-react": "^4.3.4",
     "jsdom": "^26.0.0",
     "typescript": "^5.8.2",
-    "vitest": "^3.0.9"
+    "vitest": "^3.1.1"
   }
 }

package/src/AutocompleteExtendedProps.ts

@@ -23,6 +23,12 @@ export type AutocompleteExtendedProps<
    */
   idValue?: T[D];
 
+  /**
+   * Is the id value a string?
+   * @default false
+   */
+  idIsString?: boolean;
+
   /**
    * Autocomplete for the input
    */

package/src/ComboBox.tsx

@@ -90,6 +90,7 @@ export function ComboBox<
     autoAddBlankItem = search,
     idField = "id" as D,
     idValue,
+    idIsString = false,
     inputError,
     inputHelperText,
     inputMargin,
@@ -239,8 +240,7 @@ export function ComboBox<
       <input
         ref={inputRef}
         data-reset={inputReset ?? true}
-        type="text"
-        style={{ display: "none" }}
+        type={idIsString ? "text" : "number"}
         name={name}
         value={getValue(stateValue)}
         readOnly

package/src/Tiplist.tsx

@@ -74,6 +74,7 @@ export function Tiplist<
     search = false,
     idField = "id" as D,
     idValue,
+    idIsString = false,
     inputAutoComplete = "off",
     inputError,
     inputHelperText,
@@ -287,7 +288,7 @@ export function Tiplist<
       <input
         ref={inputRef}
         data-reset={inputReset ?? true}
-        type="text"
+        type={idIsString ? "text" : "number"}
         style={{ display: "none" }}
         name={name}
         value={`${

package/src/TiplistPro.tsx

@@ -46,6 +46,12 @@ export type TiplistProProps<T extends ListType2 = ListType2> = Omit<
    */
   idValue?: T["id"] | null;
 
+  /**
+   * Is the id value a string?
+   * @default false
+   */
+  idIsString?: boolean;
+
   /**
    * Input onChange hanlder
    */
@@ -107,6 +113,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     defaultValue,
     value,
     idValue,
+    idIsString = false,
     maxItems = 16,
     width,
     name,
@@ -294,7 +301,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
       <input
         ref={inputRef}
         data-reset={inputReset ?? true}
-        type="text"
+        type={idIsString ? "text" : "number"}
         style={{ display: "none" }}
         name={name}
         value={inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}