@etsoo/materialui 1.5.50 → 1.5.52

package/lib/cjs/ButtonPopupCheckbox.js

@@ -20,6 +20,7 @@ const TextField_1 = __importDefault(require("@mui/material/TextField"));
 const DnDList_1 = require("./DnDList");
 const FlexBox_1 = require("./FlexBox");
 const ReactApp_1 = require("./app/ReactApp");
+const FormLabel_1 = __importDefault(require("@mui/material/FormLabel"));
 function ButtonPopupList(props) {
     // Destruct
     const { addSplitter = /\s*[,;]\s*/, ids = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -72,12 +73,12 @@ function ButtonPopupCheckbox(props) {
     // App
     const app = (0, ReactApp_1.useRequiredAppContext)();
     // Destruct
-    const { addSplitter, ids, inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, ids = [], inputName, label, labelEnd, labelFormatter = (data) => {
         if (labelField in data) {
             return data[labelField];
         }
         return data.id.toString();
-    }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start" }, variant = "outlined", ...rest } = props;
+    }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" }, variant = "outlined", ...rest } = props;
     // Default labels
     if (!labels.add)
         labels.add = app.get("add");
@@ -120,7 +121,7 @@ function ButtonPopupCheckbox(props) {
             fullScreen: app.smDown
         });
     };
-    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: selectedIds?.join(",") }), (0, jsx_runtime_1.jsxs)(Button_1.default, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && (0, jsx_runtime_1.jsxs)(Typography_1.default, { variant: "body2", children: [label, ":"] }), selectedIds?.map((id) => {
+    return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: selectedIds?.join(",") }), (0, jsx_runtime_1.jsxs)(Button_1.default, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && ((0, jsx_runtime_1.jsx)(FormLabel_1.default, { required: required, sx: { fontSize: (theme) => theme.typography.body2.fontSize }, children: label })), selectedIds?.map((id) => {
                         const item = items.find((item) => item.id === id);
                         if (item == null)
                             return null;

package/lib/cjs/SelectEx.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
 import { SelectProps, SelectVariants } from "@mui/material/Select";
+export type SelectExMethods = {
+    /**
+     * Set open state
+     * @param isOpen Open state
+     */
+    setOpen: (isOpen: boolean) => void;
+};
 /**
  * Extended select component props
  */
@@ -37,6 +44,10 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
      * Load data callback
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<SelectExMethods>;
     /**
      * Item change callback
      */

package/lib/cjs/SelectEx.js

@@ -28,7 +28,7 @@ const Refresh_1 = __importDefault(require("@mui/icons-material/Refresh"));
  */
 function SelectEx(props) {
     // Destruct
-    const { defaultValue, idField = "id", error, helperText, inputReset, itemIconRenderer, itemStyle, label, labelField = "label", loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, required, variant = "outlined", ...rest } = props;
+    const { defaultValue, idField = "id", error, helperText, inputReset, itemIconRenderer, itemStyle, label, labelField = "label", loadData, mRef, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, required, variant = "outlined", ...rest } = props;
     // Options state
     const [localOptions, setOptions] = react_1.default.useState([]);
     const isMounted = react_1.default.useRef(false);
@@ -74,6 +74,12 @@ function SelectEx(props) {
         valueRef.current = newValue;
         setValueStateBase(newValue);
     };
+    const [open, setOpen] = react_1.default.useState(false);
+    react_1.default.useImperativeHandle(mRef, () => ({
+        setOpen: (isOpen) => {
+            setOpen(isOpen);
+        }
+    }), []);
     react_1.default.useEffect(() => {
         if (valueSource != null)
             setValueState(valueSource);
@@ -145,7 +151,10 @@ function SelectEx(props) {
                             ? valueState
                             : localOptions.some((o) => o[idField] === valueState)
                                 ? valueState
-                                : "", input: (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                                : "", input: (0, jsx_runtime_1.jsx)(OutlinedInput_1.default, { notched: true, label: label, required: required, inputProps: {
+                                "aria-hidden": false,
+                                "data-reset": inputReset
+                            } }), open: open, onClose: () => setOpen(false), onOpen: () => setOpen(true), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                             if (onChange) {
                                 onChange(event, child);
                                 // event.preventDefault() will block executing

package/lib/mjs/ButtonPopupCheckbox.js

@@ -14,6 +14,7 @@ import TextField from "@mui/material/TextField";
 import { DnDList } from "./DnDList";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
+import FormLabel from "@mui/material/FormLabel";
 function ButtonPopupList(props) {
     // Destruct
     const { addSplitter = /\s*[,;]\s*/, ids = [], items, labelField, labelFormatter, labels, onAdd, onValueChange } = props;
@@ -66,12 +67,12 @@ export function ButtonPopupCheckbox(props) {
     // App
     const app = useRequiredAppContext();
     // Destruct
-    const { addSplitter, ids, inputName, label, labelEnd, labelFormatter = (data) => {
+    const { addSplitter, ids = [], inputName, label, labelEnd, labelFormatter = (data) => {
         if (labelField in data) {
             return data[labelField];
         }
         return data.id.toString();
-    }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start" }, variant = "outlined", ...rest } = props;
+    }, labelField, labels = {}, loadData, onAdd, onValueChange, popupTitle = label, popupMessage, required = false, sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" }, variant = "outlined", ...rest } = props;
     // Default labels
     if (!labels.add)
         labels.add = app.get("add");
@@ -114,7 +115,7 @@ export function ButtonPopupCheckbox(props) {
             fullScreen: app.smDown
         });
     };
-    return (_jsxs(React.Fragment, { children: [_jsx("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: selectedIds?.join(",") }), _jsxs(Button, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && _jsxs(Typography, { variant: "body2", children: [label, ":"] }), selectedIds?.map((id) => {
+    return (_jsxs(React.Fragment, { children: [_jsx("input", { type: "text", style: { position: "absolute", opacity: 0, width: 0 }, name: inputName, required: required, defaultValue: selectedIds?.join(",") }), _jsxs(Button, { variant: variant, sx: sx, onClick: () => clickHandler(), ...rest, disabled: !items || items.length === 0, children: [label && (_jsx(FormLabel, { required: required, sx: { fontSize: (theme) => theme.typography.body2.fontSize }, children: label })), selectedIds?.map((id) => {
                         const item = items.find((item) => item.id === id);
                         if (item == null)
                             return null;

package/lib/mjs/SelectEx.d.ts

@@ -1,6 +1,13 @@
 import React from "react";
 import { DataTypes, IdDefaultType, LabelDefaultType, ListType } from "@etsoo/shared";
 import { SelectProps, SelectVariants } from "@mui/material/Select";
+export type SelectExMethods = {
+    /**
+     * Set open state
+     * @param isOpen Open state
+     */
+    setOpen: (isOpen: boolean) => void;
+};
 /**
  * Extended select component props
  */
@@ -37,6 +44,10 @@ export type SelectExProps<T extends object, D extends DataTypes.Keys<T> = IdDefa
      * Load data callback
      */
     loadData?: () => PromiseLike<T[] | null | undefined>;
+    /**
+     * Methods
+     */
+    mRef?: React.Ref<SelectExMethods>;
     /**
      * Item change callback
      */

package/lib/mjs/SelectEx.js

@@ -22,7 +22,7 @@ import RefreshIcon from "@mui/icons-material/Refresh";
  */
 export function SelectEx(props) {
     // Destruct
-    const { defaultValue, idField = "id", error, helperText, inputReset, itemIconRenderer, itemStyle, label, labelField = "label", loadData, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, required, variant = "outlined", ...rest } = props;
+    const { defaultValue, idField = "id", error, helperText, inputReset, itemIconRenderer, itemStyle, label, labelField = "label", loadData, mRef, onItemChange, onItemClick, onLoadData, multiple = false, name, options, refresh, search = false, autoAddBlankItem = search, value, onChange, fullWidth, required, variant = "outlined", ...rest } = props;
     // Options state
     const [localOptions, setOptions] = React.useState([]);
     const isMounted = React.useRef(false);
@@ -68,6 +68,12 @@ export function SelectEx(props) {
         valueRef.current = newValue;
         setValueStateBase(newValue);
     };
+    const [open, setOpen] = React.useState(false);
+    React.useImperativeHandle(mRef, () => ({
+        setOpen: (isOpen) => {
+            setOpen(isOpen);
+        }
+    }), []);
     React.useEffect(() => {
         if (valueSource != null)
             setValueState(valueSource);
@@ -139,7 +145,10 @@ export function SelectEx(props) {
                             ? valueState
                             : localOptions.some((o) => o[idField] === valueState)
                                 ? valueState
-                                : "", input: _jsx(OutlinedInput, { notched: true, label: label, required: required, inputProps: { "data-reset": inputReset } }), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
+                                : "", input: _jsx(OutlinedInput, { notched: true, label: label, required: required, inputProps: {
+                                "aria-hidden": false,
+                                "data-reset": inputReset
+                            } }), open: open, onClose: () => setOpen(false), onOpen: () => setOpen(true), labelId: labelId, name: name, multiple: multiple, onChange: (event, child) => {
                             if (onChange) {
                                 onChange(event, child);
                                 // event.preventDefault() will block executing

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.50",
+  "version": "1.5.52",
   "description": "TypeScript Material-UI Implementation",
   "main": "lib/cjs/index.js",
   "module": "lib/mjs/index.js",

package/src/ButtonPopupCheckbox.tsx

@@ -14,6 +14,7 @@ import TextField from "@mui/material/TextField";
 import { DnDList, DnDListRef } from "./DnDList";
 import { HBox, VBox } from "./FlexBox";
 import { useRequiredAppContext } from "./app/ReactApp";
+import FormLabel from "@mui/material/FormLabel";
 
 type DnDItemType = {
   id: IdType;
@@ -261,7 +262,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
   // Destruct
   const {
     addSplitter,
-    ids,
+    ids = [],
     inputName,
     label,
     labelEnd,
@@ -280,7 +281,7 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
     popupTitle = label,
     popupMessage,
     required = false,
-    sx = { gap: 1, justifyContent: "flex-start" },
+    sx = { gap: 1, justifyContent: "flex-start", minHeight: "56px" },
     variant = "outlined",
     ...rest
   } = props;
@@ -356,7 +357,14 @@ export function ButtonPopupCheckbox<D extends DnDItemType>(
         {...rest}
         disabled={!items || items.length === 0}
       >
-        {label && <Typography variant="body2">{label}:</Typography>}
+        {label && (
+          <FormLabel
+            required={required}
+            sx={{ fontSize: (theme) => theme.typography.body2.fontSize }}
+          >
+            {label}
+          </FormLabel>
+        )}
         {selectedIds?.map((id) => {
           const item = items.find((item) => item.id === id);
           if (item == null) return null;

package/src/SelectEx.tsx

@@ -22,6 +22,14 @@ import IconButton from "@mui/material/IconButton";
 import FormHelperText from "@mui/material/FormHelperText";
 import RefreshIcon from "@mui/icons-material/Refresh";
 
+export type SelectExMethods = {
+  /**
+   * Set open state
+   * @param isOpen Open state
+   */
+  setOpen: (isOpen: boolean) => void;
+};
+
 /**
  * Extended select component props
  */
@@ -70,6 +78,11 @@ export type SelectExProps<
    */
   loadData?: () => PromiseLike<T[] | null | undefined>;
 
+  /**
+   * Methods
+   */
+  mRef?: React.Ref<SelectExMethods>;
+
   /**
    * Item change callback
    */
@@ -128,6 +141,7 @@ export function SelectEx<
     label,
     labelField = "label" as L,
     loadData,
+    mRef,
     onItemChange,
     onItemClick,
     onLoadData,
@@ -202,6 +216,18 @@ export function SelectEx<
     setValueStateBase(newValue);
   };
 
+  const [open, setOpen] = React.useState(false);
+
+  React.useImperativeHandle(
+    mRef,
+    () => ({
+      setOpen: (isOpen: boolean) => {
+        setOpen(isOpen);
+      }
+    }),
+    []
+  );
+
   React.useEffect(() => {
     if (valueSource != null) setValueState(valueSource);
   }, [valueSource]);
@@ -308,9 +334,15 @@ export function SelectEx<
               notched
               label={label}
               required={required}
-              inputProps={{ "data-reset": inputReset }}
+              inputProps={{
+                "aria-hidden": false,
+                "data-reset": inputReset
+              }}
             />
           }
+          open={open}
+          onClose={() => setOpen(false)}
+          onOpen={() => setOpen(true)}
           labelId={labelId}
           name={name}
           multiple={multiple}