@etsoo/materialui 1.5.51 → 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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@etsoo/materialui",
-  "version": "1.5.51",
+  "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;