@etsoo/materialui 1.6.0 → 1.6.2

package/lib/cjs/AutocompleteExtendedProps.d.ts

@@ -73,6 +73,7 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
     /**
      * Value change handler
      * @param value New value
+     * @param input Input element
      */
-    onValueChange?: (value: T | null) => void;
+    onValueChange?: (value: T | null, input?: HTMLInputElement | null) => void;
 };

package/lib/cjs/ComboBox.js

@@ -56,7 +56,7 @@ function ComboBox(props) {
         if (localValue != null && localValue != stateValue) {
             setStateValue(localValue);
             if (onValueChange)
-                onValueChange(localValue);
+                onValueChange(localValue, inputRef.current);
         }
     }, [localValue]);
     // Add readOnly
@@ -131,7 +131,7 @@ function ComboBox(props) {
                             if (onChange != null)
                                 onChange(event, value, reason, details);
                             if (onValueChange)
-                                onValueChange(value);
+                                onValueChange(value, inputRef.current);
                         }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? ((0, jsx_runtime_1.jsx)(SearchField_1.SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : ((0, jsx_runtime_1.jsx)(InputField_1.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, getOptionKey: getOptionKey, ...rest }), onAdd && ((0, jsx_runtime_1.jsx)(IconButton_1.default, { size: "small", onClick: () => {
                             onAdd(doLoadData);
                         }, title: addLabel, children: (0, jsx_runtime_1.jsx)(Add_1.default, {}) }))] })] }));

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

@@ -113,7 +113,7 @@ function Tiplist(props) {
             if (id && options && onValueChange) {
                 const option = options.find((o) => o[idField] === id);
                 if (option)
-                    onValueChange(option);
+                    onValueChange(option, inputRef.current);
             }
             // Indicates loading completed
             stateUpdate({
@@ -183,7 +183,7 @@ function Tiplist(props) {
                     if (onChange != null)
                         onChange(event, value, reason, details);
                     if (onValueChange)
-                        onValueChange(value);
+                        onValueChange(value, inputRef.current);
                     // For clear case
                     if (reason === "clear") {
                         stateUpdate({ options: [], open: event.type === "click" });

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/AutocompleteExtendedProps.d.ts

@@ -73,6 +73,7 @@ export type AutocompleteExtendedProps<T extends object, D extends DataTypes.Keys
     /**
      * Value change handler
      * @param value New value
+     * @param input Input element
      */
-    onValueChange?: (value: T | null) => void;
+    onValueChange?: (value: T | null, input?: HTMLInputElement | null) => void;
 };

package/lib/mjs/ComboBox.js

@@ -50,7 +50,7 @@ export function ComboBox(props) {
         if (localValue != null && localValue != stateValue) {
             setStateValue(localValue);
             if (onValueChange)
-                onValueChange(localValue);
+                onValueChange(localValue, inputRef.current);
         }
     }, [localValue]);
     // Add readOnly
@@ -125,7 +125,7 @@ export function ComboBox(props) {
                             if (onChange != null)
                                 onChange(event, value, reason, details);
                             if (onValueChange)
-                                onValueChange(value);
+                                onValueChange(value, inputRef.current);
                         }, openOnFocus: openOnFocus, sx: sx, renderInput: (params) => search ? (_jsx(SearchField, { ...addReadOnly(params), label: label, name: name + "Input", margin: inputMargin, variant: inputVariant, required: inputRequired, error: inputError, helperText: inputHelperText })) : (_jsx(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, getOptionKey: getOptionKey, ...rest }), onAdd && (_jsx(IconButton, { size: "small", onClick: () => {
                             onAdd(doLoadData);
                         }, title: addLabel, children: _jsx(AddIcon, {}) }))] })] }));

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

@@ -107,7 +107,7 @@ export function Tiplist(props) {
             if (id && options && onValueChange) {
                 const option = options.find((o) => o[idField] === id);
                 if (option)
-                    onValueChange(option);
+                    onValueChange(option, inputRef.current);
             }
             // Indicates loading completed
             stateUpdate({
@@ -177,7 +177,7 @@ export function Tiplist(props) {
                     if (onChange != null)
                         onChange(event, value, reason, details);
                     if (onValueChange)
-                        onValueChange(value);
+                        onValueChange(value, inputRef.current);
                     // For clear case
                     if (reason === "clear") {
                         stateUpdate({ options: [], open: event.type === "click" });

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.6.0",
+  "version": "1.6.2",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",
@@ -40,9 +40,9 @@
     "@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.7",
     "@mui/material": "^7.3.7",

package/src/AutocompleteExtendedProps.ts

@@ -96,6 +96,7 @@ export type AutocompleteExtendedProps<
   /**
    * Value change handler
    * @param value New value
+   * @param input Input element
    */
-  onValueChange?: (value: T | null) => void;
+  onValueChange?: (value: T | null, input?: HTMLInputElement | null) => void;
 };

package/src/ComboBox.tsx

@@ -160,7 +160,7 @@ export function ComboBox<
   React.useEffect(() => {
     if (localValue != null && localValue != stateValue) {
       setStateValue(localValue);
-      if (onValueChange) onValueChange(localValue);
+      if (onValueChange) onValueChange(localValue, inputRef.current);
     }
   }, [localValue]);
 
@@ -266,7 +266,7 @@ export function ComboBox<
             // Custom
             if (onChange != null) onChange(event, value, reason, details);
 
-            if (onValueChange) onValueChange(value);
+            if (onValueChange) onValueChange(value, inputRef.current);
           }}
           openOnFocus={openOnFocus}
           sx={sx}

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

@@ -220,7 +220,7 @@ export function Tiplist<
 
       if (id && options && onValueChange) {
         const option = options.find((o) => o[idField] === id);
-        if (option) onValueChange(option);
+        if (option) onValueChange(option, inputRef.current);
       }
 
       // Indicates loading completed
@@ -318,7 +318,7 @@ export function Tiplist<
           // Custom
           if (onChange != null) onChange(event, value, reason, details);
 
-          if (onValueChange) onValueChange(value);
+          if (onValueChange) onValueChange(value, inputRef.current);
 
           // For clear case
           if (reason === "clear") {

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";