@etsoo/materialui 1.1.70 → 1.1.71

package/lib/Tiplist.d.ts

@@ -13,6 +13,10 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<A
      * Max items to read and display
      */
     maxItems?: number;
+    /**
+     * Width
+     */
+    width?: number;
 };
 /**
  * Tiplist

package/lib/Tiplist.js

@@ -15,7 +15,9 @@ export function Tiplist(props) {
     // Labels
     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, noOptionsText = noOptions, loadingText = loading, openText = openDefault, 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, width, name, readOnly, onChange, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionLabel, getOptionDisabled, sx = {}, ...rest } = props;
+    if (width && sx)
+        Object.assign(sx, { width: `${width}px` });
     // Value input ref
     const inputRef = React.createRef();
     // Local value
@@ -156,7 +158,7 @@ export function Tiplist(props) {
                     open: false,
                     ...(!states.value && { options: [] })
                 });
-            }, loading: states.loading, 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) => {
+            }, loading: states.loading, 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], sx: sx, 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.70",
+  "version": "1.1.71",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/index.js",
   "types": "lib/index.d.ts",

package/src/Tiplist.tsx

@@ -1,6 +1,7 @@
 import { ReactUtils, useDelayedExecutor } from "@etsoo/react";
 import { DataTypes, IdDefaultType, ListType } from "@etsoo/shared";
 import { Autocomplete, AutocompleteRenderInputParams } from "@mui/material";
+import { width } from "@mui/system";
 import React from "react";
 import { globalApp } from "./app/ReactApp";
 import { AutocompleteExtendedProps } from "./AutocompleteExtendedProps";
@@ -27,6 +28,11 @@ export type TiplistProps<T extends object, D extends DataTypes.Keys<T>> = Omit<
    * Max items to read and display
    */
   maxItems?: number;
+
+  /**
+   * Width
+   */
+  width?: number;
 };
 
 // Multiple states
@@ -71,6 +77,7 @@ export function Tiplist<
     defaultValue,
     value,
     maxItems = 16,
+    width,
     name,
     readOnly,
     onChange,
@@ -80,9 +87,12 @@ export function Tiplist<
     openText = openDefault,
     getOptionLabel,
     getOptionDisabled,
+    sx = {},
     ...rest
   } = props;
 
+  if (width && sx) Object.assign(sx, { width: `${width}px` });
+
   // Value input ref
   const inputRef = React.createRef<HTMLInputElement>();
 
@@ -314,6 +324,7 @@ export function Tiplist<
         isOptionEqualToValue={(option: T, value: T) =>
           option[idField] === value[idField]
         }
+        sx={sx}
         noOptionsText={noOptionsText}
         loadingText={loadingText}
         openText={openText}