@etsoo/materialui 1.5.99 → 1.6.1

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, 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;
+    const { disabled, 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", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", 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", { style: { flex: 2 }, children: [(0, jsx_runtime_1.jsx)("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), (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, disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/cjs/ComboBoxMultiple.js

@@ -29,7 +29,7 @@ function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => ((0, jsx_runtime_1.jsxs)("li", { ...props, children: [(0, jsx_runtime_1.jsx)(Checkbox_1.default, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = react_1.default.createRef();
     // Options state
@@ -121,11 +121,11 @@ function ComboBoxMultiple(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, 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.jsx)(Autocomplete_1.default, { value: stateValue == null
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, 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, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { value: stateValue == null
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue
-                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                        : [stateValue], disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value.concat());
                     // Custom

package/lib/cjs/DownUpButton.d.ts

@@ -0,0 +1,38 @@
+import { ButtonGroupProps } from "@mui/material/ButtonGroup";
+/**
+ * Down & Up Button Props
+ */
+export type DownUpButtonProps = Omit<ButtonGroupProps, "orientation"> & {
+    /**
+     * Is down button disabled
+     */
+    downDisabled?: boolean;
+    /**
+     * Down button label
+     */
+    downLabel?: string;
+    /**
+     * Is up button disabled
+     */
+    upDisabled?: boolean;
+    /**
+     * Up button label
+     */
+    upLabel?: string;
+    /**
+     * Down button click handler
+     * @param event Mouse click event
+     */
+    onDownClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Up button click handler
+     * @param event Mouse click event
+     */
+    onUpClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+export declare function DownUpButton(props: DownUpButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/cjs/DownUpButton.js

@@ -0,0 +1,22 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.DownUpButton = DownUpButton;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const Button_1 = __importDefault(require("@mui/material/Button"));
+const ButtonGroup_1 = __importDefault(require("@mui/material/ButtonGroup"));
+const ReactApp_1 = require("./app/ReactApp");
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+function DownUpButton(props) {
+    // Global app
+    const app = (0, ReactApp_1.useAppContext)();
+    // Destruct
+    const { size = "small", downDisabled, downLabel = app?.get("moveDown") ?? "Down", upDisabled, upLabel = app?.get("moveUp") ?? "Up", onDownClick, onUpClick, ...rest } = props;
+    return ((0, jsx_runtime_1.jsxs)(ButtonGroup_1.default, { orientation: "vertical", size: size, ...rest, children: [(0, jsx_runtime_1.jsx)(Button_1.default, { disabled: upDisabled, onClick: onUpClick, children: upLabel }), (0, jsx_runtime_1.jsx)(Button_1.default, { disabled: downDisabled, onClick: onDownClick, children: downLabel })] }));
+}

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, 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, getOptionKey = (option) => `${option[idField]}`, 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, getOptionKey = (option) => `${option[idField]}`, getOptionLabel, getOptionDisabled, sx = {}, minChars, disabled, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -176,7 +176,7 @@ function Tiplist(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, 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) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, 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, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, disabled: disabled, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom

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, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, getOptionKey = (option) => typeof option === "string" ? option : option.id, 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, getOptionKey = (option) => typeof option === "string" ? option : option.id, onChange, onValueChange, minChars, disabled, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -162,7 +162,7 @@ function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, 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) => {
+    return ((0, jsx_runtime_1.jsxs)("div", { style: { flex: 2 }, 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, disabled: disabled }), (0, jsx_runtime_1.jsx)(Autocomplete_1.default, { filterOptions: (options, _state) => options, value: states.value, options: states.options, disabled: disabled, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);

package/lib/cjs/index.d.ts

@@ -55,6 +55,7 @@ export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
+export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./ErrorAlert";

package/lib/cjs/index.js

@@ -71,6 +71,7 @@ __exportStar(require("./DataSteps"), exports);
 __exportStar(require("./DataTable"), exports);
 __exportStar(require("./DialogButton"), exports);
 __exportStar(require("./DnDList"), exports);
+__exportStar(require("./DownUpButton"), exports);
 __exportStar(require("./DraggablePaperComponent"), exports);
 __exportStar(require("./EmailInput"), exports);
 __exportStar(require("./ErrorAlert"), exports);

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, 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;
+    const { disabled, 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", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", 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", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: idIsString ? "text" : "number", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsxs(Stack, { gap: 0.5, direction: "row", width: "100%", children: [_jsx(Autocomplete, { value: stateValue, disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                             // Set value
                             setInputValue(value);
                             // Custom

package/lib/mjs/ComboBoxMultiple.js

@@ -23,7 +23,7 @@ export function ComboBoxMultiple(props) {
     // Labels
     const labels = app?.getLabels("noOptions", "loading");
     // Destruct
-    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, ...rest } = props;
+    const { search = false, autoAddBlankItem = search, idField = "id", idValue, idValues, inputError, inputHelperText, inputMargin, inputOnChange, inputRequired, inputReset, inputVariant, defaultValue, label, labelField = "label", loadData, onLoadData, name, inputAutoComplete = "off", options, dataReadonly = true, readOnly, onChange, openOnFocus = true, value, disableCloseOnSelect = true, renderOption = (props, option, { selected }) => (_jsxs("li", { ...props, children: [_jsx(Checkbox, { icon: icon, checkedIcon: checkedIcon, style: { marginRight: 8 }, checked: selected }), `${option[labelField]}`] })), getOptionLabel = (option) => `${option[labelField]}`, getOptionKey = (option) => `${option[idField]}`, sx = { minWidth: "150px" }, noOptionsText = labels?.noOptions, loadingText = labels?.loading, disabled, ...rest } = props;
     // Value input ref
     const inputRef = React.createRef();
     // Options state
@@ -115,11 +115,11 @@ export function ComboBoxMultiple(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange }), _jsx(Autocomplete, { value: stateValue == null
+    return (_jsxs("div", { style: { flex: 2 }, children: [_jsx("input", { ref: inputRef, "data-reset": inputReset ?? true, type: "text", style: { display: "none" }, name: name, value: getValue(stateValue), readOnly: true, onChange: inputOnChange, disabled: disabled }), _jsx(Autocomplete, { value: stateValue == null
                     ? []
                     : Array.isArray(stateValue)
                         ? stateValue
-                        : [stateValue], disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
+                        : [stateValue], disabled: disabled, disableCloseOnSelect: disableCloseOnSelect, getOptionLabel: getOptionLabel, getOptionKey: getOptionKey, multiple: true, isOptionEqualToValue: (option, value) => option[idField] === value[idField], onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value.concat());
                     // Custom

package/lib/mjs/DownUpButton.d.ts

@@ -0,0 +1,38 @@
+import { ButtonGroupProps } from "@mui/material/ButtonGroup";
+/**
+ * Down & Up Button Props
+ */
+export type DownUpButtonProps = Omit<ButtonGroupProps, "orientation"> & {
+    /**
+     * Is down button disabled
+     */
+    downDisabled?: boolean;
+    /**
+     * Down button label
+     */
+    downLabel?: string;
+    /**
+     * Is up button disabled
+     */
+    upDisabled?: boolean;
+    /**
+     * Up button label
+     */
+    upLabel?: string;
+    /**
+     * Down button click handler
+     * @param event Mouse click event
+     */
+    onDownClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * Up button click handler
+     * @param event Mouse click event
+     */
+    onUpClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+export declare function DownUpButton(props: DownUpButtonProps): import("react/jsx-runtime").JSX.Element;

package/lib/mjs/DownUpButton.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import Button from "@mui/material/Button";
+import ButtonGroup from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+export function DownUpButton(props) {
+    // Global app
+    const app = useAppContext();
+    // Destruct
+    const { size = "small", downDisabled, downLabel = app?.get("moveDown") ?? "Down", upDisabled, upLabel = app?.get("moveUp") ?? "Up", onDownClick, onUpClick, ...rest } = props;
+    return (_jsxs(ButtonGroup, { orientation: "vertical", size: size, ...rest, children: [_jsx(Button, { disabled: upDisabled, onClick: onUpClick, children: upLabel }), _jsx(Button, { disabled: downDisabled, onClick: onDownClick, children: downLabel })] }));
+}

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, 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, getOptionKey = (option) => `${option[idField]}`, 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, getOptionKey = (option) => `${option[idField]}`, getOptionLabel, getOptionDisabled, sx = {}, minChars, disabled, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -170,7 +170,7 @@ export function Tiplist(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, 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) => {
+    return (_jsxs("div", { style: { flex: 2 }, 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, disabled: disabled }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, disabled: disabled, value: states.value, options: states.options, onChange: (event, value, reason, details) => {
                     // Set value
                     setInputValue(value);
                     // Custom

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, idIsString = false, maxItems = 16, width, name, inputOnChange, inputProps, inputReset, sx, openOnFocus = true, noOptionsText = noOptions, loadingText = loading, openText = openDefault, getOptionDisabled, getOptionLabel, getOptionKey = (option) => typeof option === "string" ? option : option.id, 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, getOptionKey = (option) => typeof option === "string" ? option : option.id, onChange, onValueChange, minChars, disabled, ...rest } = props;
     if (width && sx)
         Object.assign(sx, { width: `${width}px` });
     // Value input ref
@@ -156,7 +156,7 @@ export function TiplistPro(props) {
         };
     }, []);
     // Layout
-    return (_jsxs("div", { style: { flex: 2 }, 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) => {
+    return (_jsxs("div", { style: { flex: 2 }, 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, disabled: disabled }), _jsx(Autocomplete, { filterOptions: (options, _state) => options, value: states.value, options: states.options, disabled: disabled, freeSolo: true, clearOnBlur: false, onChange: (event, value, reason, details) => {
                     if (typeof value === "object") {
                         // Set value
                         setInputValue(value);

package/lib/mjs/index.d.ts

@@ -55,6 +55,7 @@ export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
+export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./ErrorAlert";

package/lib/mjs/index.js

@@ -55,6 +55,7 @@ export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
+export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./ErrorAlert";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.99",
+  "version": "1.6.1",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,13 +40,13 @@
     "@dnd-kit/sortable": "^10.0.0",
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@etsoo/appscript": "^1.6.51",
+    "@etsoo/appscript": "^1.6.52",
     "@etsoo/notificationbase": "^1.1.66",
-    "@etsoo/react": "^1.8.68",
+    "@etsoo/react": "^1.8.69",
     "@etsoo/shared": "^1.2.80",
-    "@mui/icons-material": "^7.3.6",
-    "@mui/material": "^7.3.6",
-    "@mui/x-data-grid": "^8.23.0",
+    "@mui/icons-material": "^7.3.7",
+    "@mui/material": "^7.3.7",
+    "@mui/x-data-grid": "^8.24.0",
     "chart.js": "^4.5.1",
     "chartjs-plugin-datalabels": "^2.2.0",
     "dompurify": "^3.3.1",

package/src/ComboBox.tsx

@@ -86,6 +86,7 @@ export function ComboBox<
 
   // Destruct
   const {
+    disabled,
     search = false,
     autoAddBlankItem = search,
     idField = "id" as D,
@@ -246,11 +247,13 @@ export function ComboBox<
         value={getValue(stateValue)}
         readOnly
         onChange={inputOnChange}
+        disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
       <Stack gap={0.5} direction="row" width="100%">
         <Autocomplete<T, false, false, false>
           value={stateValue}
+          disabled={disabled}
           disableCloseOnSelect={disableCloseOnSelect}
           getOptionLabel={getOptionLabel}
           isOptionEqualToValue={(option: T, value: T) =>

package/src/ComboBoxMultiple.tsx

@@ -126,6 +126,7 @@ export function ComboBoxMultiple<
     sx = { minWidth: "150px" },
     noOptionsText = labels?.noOptions,
     loadingText = labels?.loading,
+    disabled,
     ...rest
   } = props;
 
@@ -249,6 +250,7 @@ export function ComboBoxMultiple<
         value={getValue(stateValue)}
         readOnly
         onChange={inputOnChange}
+        disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
       <Autocomplete<T, true, false, false>
@@ -259,6 +261,7 @@ export function ComboBoxMultiple<
             ? stateValue
             : [stateValue]
         }
+        disabled={disabled}
         disableCloseOnSelect={disableCloseOnSelect}
         getOptionLabel={getOptionLabel}
         getOptionKey={getOptionKey}

package/src/DownUpButton.tsx

@@ -0,0 +1,73 @@
+import Button from "@mui/material/Button";
+import ButtonGroup, { ButtonGroupProps } from "@mui/material/ButtonGroup";
+import { useAppContext } from "./app/ReactApp";
+
+/**
+ * Down & Up Button Props
+ */
+export type DownUpButtonProps = Omit<ButtonGroupProps, "orientation"> & {
+  /**
+   * Is down button disabled
+   */
+  downDisabled?: boolean;
+
+  /**
+   * Down button label
+   */
+  downLabel?: string;
+
+  /**
+   * Is up button disabled
+   */
+  upDisabled?: boolean;
+
+  /**
+   * Up button label
+   */
+  upLabel?: string;
+
+  /**
+   * Down button click handler
+   * @param event Mouse click event
+   */
+  onDownClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+
+  /**
+   * Up button click handler
+   * @param event Mouse click event
+   */
+  onUpClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+};
+
+/**
+ * Down & Up Button
+ * @param props Props
+ * @returns Component
+ */
+export function DownUpButton(props: DownUpButtonProps) {
+  // Global app
+  const app = useAppContext();
+
+  // Destruct
+  const {
+    size = "small",
+    downDisabled,
+    downLabel = app?.get("moveDown") ?? "Down",
+    upDisabled,
+    upLabel = app?.get("moveUp") ?? "Up",
+    onDownClick,
+    onUpClick,
+    ...rest
+  } = props;
+
+  return (
+    <ButtonGroup orientation="vertical" size={size} {...rest}>
+      <Button disabled={upDisabled} onClick={onUpClick}>
+        {upLabel}
+      </Button>
+      <Button disabled={downDisabled} onClick={onDownClick}>
+        {downLabel}
+      </Button>
+    </ButtonGroup>
+  );
+}

package/src/Tiplist.tsx

@@ -102,6 +102,7 @@ export function Tiplist<
     getOptionDisabled,
     sx = {},
     minChars,
+    disabled,
     ...rest
   } = props;
 
@@ -302,10 +303,12 @@ export function Tiplist<
         }`}
         readOnly
         onChange={inputOnChange}
+        disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
       <Autocomplete<T, undefined, false, false>
         filterOptions={(options, _state) => options}
+        disabled={disabled}
         value={states.value}
         options={states.options}
         onChange={(event, value, reason, details) => {

package/src/TiplistPro.tsx

@@ -132,6 +132,7 @@ export function TiplistPro<T extends ListType2 = ListType2>(
     onChange,
     onValueChange,
     minChars,
+    disabled,
     ...rest
   } = props;
 
@@ -314,12 +315,14 @@ export function TiplistPro<T extends ListType2 = ListType2>(
         value={inputValue ?? (state.current.idSet ? "" : localIdValue ?? "")}
         readOnly
         onChange={inputOnChange}
+        disabled={disabled}
       />
       {/* Previous input will reset first with "disableClearable = false", next input trigger change works */}
       <Autocomplete<T, false, false, true>
         filterOptions={(options, _state) => options}
         value={states.value}
         options={states.options}
+        disabled={disabled}
         freeSolo
         clearOnBlur={false}
         onChange={(event, value, reason, details) => {

package/src/index.ts

@@ -61,6 +61,7 @@ export * from "./DataSteps";
 export * from "./DataTable";
 export * from "./DialogButton";
 export * from "./DnDList";
+export * from "./DownUpButton";
 export * from "./DraggablePaperComponent";
 export * from "./EmailInput";
 export * from "./ErrorAlert";