@lumiastream/ui 0.5.4 → 0.5.6

package/dist/LSVariableInputField.js

@@ -61,9 +61,6 @@ var LSInput = forwardRef(
       inputAfterText,
       maxWidth,
       className = "",
-      InputProps: inputPropsProp,
-      InputLabelProps: inputLabelPropsProp,
-      inputProps: htmlInputPropsProp,
       slotProps: slotPropsProp,
       onChange,
       onChangeStart,
@@ -98,25 +95,11 @@ var LSInput = forwardRef(
       onChange?.(event, sanitizedValue);
       onChangeEnd?.(event, sanitizedValue);
     };
-    const resolvedStartAdornment = inputPropsProp?.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
-    const resolvedEndAdornment = inputPropsProp?.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
-    const inputSlotProps = {
-      ...inputPropsProp,
-      startAdornment: resolvedStartAdornment,
-      endAdornment: resolvedEndAdornment,
-      readOnly: rest.readOnly ?? inputPropsProp?.readOnly,
-      sx: {
-        ...inputPropsProp?.sx ?? {},
-        "& input, & textarea": {
-          textAlign: centerText ? "center" : void 0,
-          color: textColor ?? void 0
-        }
-      }
-    };
-    const inputLabelProps = {
-      shrink: true,
-      ...inputLabelPropsProp
-    };
+    const callerInputSlot = slotPropsProp?.input ?? {};
+    const callerHtmlInputSlot = slotPropsProp?.htmlInput ?? {};
+    const callerInputLabelSlot = slotPropsProp?.inputLabel ?? {};
+    const resolvedStartAdornment = callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
+    const resolvedEndAdornment = callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
     const helperContent = helperText ?? (typeof error === "string" ? error : "");
     const hasError = typeof error === "string" ? true : Boolean(error);
     const resolvedMaxWidth = maxWidth ?? style?.maxWidth;
@@ -124,20 +107,24 @@ var LSInput = forwardRef(
     const slotProps = {
       ...slotPropsProp ?? {},
       input: {
-        ...slotPropsProp?.input ?? {},
-        ...inputSlotProps,
+        ...callerInputSlot,
+        startAdornment: resolvedStartAdornment,
+        endAdornment: resolvedEndAdornment,
+        readOnly: rest.readOnly ?? callerInputSlot.readOnly,
         sx: {
-          ...slotPropsProp?.input?.sx ?? {},
-          ...inputSlotProps.sx
+          ...callerInputSlot.sx ?? {},
+          "& input, & textarea": {
+            textAlign: centerText ? "center" : void 0,
+            color: textColor ?? void 0
+          }
         }
       },
       inputLabel: {
-        ...slotPropsProp?.inputLabel ?? {},
-        ...inputLabelProps
+        shrink: true,
+        ...callerInputLabelSlot
       },
       htmlInput: {
-        ...slotPropsProp?.htmlInput ?? {},
-        ...htmlInputPropsProp ?? {}
+        ...callerHtmlInputSlot
       }
     };
     const TextFieldComponent = TextField;
@@ -182,7 +169,8 @@ import { forwardRef as forwardRef2 } from "react";
 import { jsx as jsx2 } from "react/jsx-runtime";
 var LSTextField = forwardRef2(
   (props, ref) => {
-    const { InputLabelProps, InputProps, slotProps, ...rest } = props;
+    const { slotProps, ...rest } = props;
+    const paramsInputLabel = slotProps?.inputLabel ?? {};
     return /* @__PURE__ */ jsx2(
       TextField2,
       {
@@ -191,18 +179,9 @@ var LSTextField = forwardRef2(
         className: "mui-ls-input",
         slotProps: {
           ...slotProps ?? {},
-          input: {
-            ...slotProps?.input ?? {},
-            ...InputProps ?? {},
-            sx: {
-              ...slotProps?.input?.sx ?? {},
-              ...InputProps?.sx ?? {}
-            }
-          },
           inputLabel: {
-            ...slotProps?.inputLabel ?? {},
-            shrink: true,
-            ...InputLabelProps ?? {}
+            ...paramsInputLabel,
+            shrink: true
           }
         },
         ref
@@ -1342,14 +1321,12 @@ var VariableInputTextField = forwardRef3(
     containerRef,
     showVariableIcon
   }, ref) => {
-    const inputPropsInputProps = inputProps?.InputProps ?? {};
-    const paramsInputProps = params?.InputProps ?? {};
-    const inputPropsSlotInputProps = inputProps?.slotProps?.input ?? {};
-    const paramsSlotInputProps = params?.slotProps?.input ?? {};
+    const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
+    const paramsSlotInput = params?.slotProps?.input ?? {};
     const explicitStartAdornment = inputProps?.startAdornment;
     const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx3(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
-    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment ?? resolvedExplicitStartAdornment;
-    const endAdornment = paramsInputProps.endAdornment ?? paramsSlotInputProps.endAdornment ?? inputPropsInputProps.endAdornment ?? inputPropsSlotInputProps.endAdornment;
+    const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
+    const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
     return /* @__PURE__ */ jsx3(
       LSTextField,
       {
@@ -1371,31 +1348,27 @@ var VariableInputTextField = forwardRef3(
         onChange: onChange ? (e) => onChange(e.target.value) : void 0,
         ...inputProps,
         ...params,
-        InputProps: {
-          ...inputPropsSlotInputProps,
-          ...inputPropsInputProps,
-          ...paramsSlotInputProps,
-          ...paramsInputProps,
-          startAdornment,
-          endAdornment: /* @__PURE__ */ jsxs(Fragment2, { children: [
-            endAdornment ?? null,
-            showVariableIcon ? /* @__PURE__ */ jsx3(
-              Tooltip,
-              {
-                title: t("chatbot.allowed-variables", "Allowed Variables"),
-                children: /* @__PURE__ */ jsx3(
-                  InputAdornment2,
-                  {
-                    position: "end",
-                    onClick: clickedVariableIcon,
-                    ref: containerRef,
-                    className: "ls-variable-input-adornment",
-                    children: "{}"
-                  }
-                )
-              }
-            ) : null
-          ] })
+        slotProps: {
+          ...inputProps?.slotProps ?? {},
+          ...params?.slotProps ?? {},
+          input: {
+            ...inputPropsSlotInput,
+            ...paramsSlotInput,
+            startAdornment,
+            endAdornment: /* @__PURE__ */ jsxs(Fragment2, { children: [
+              endAdornment ?? null,
+              showVariableIcon ? /* @__PURE__ */ jsx3(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx3(
+                InputAdornment2,
+                {
+                  position: "end",
+                  onClick: clickedVariableIcon,
+                  ref: containerRef,
+                  className: "ls-variable-input-adornment",
+                  children: "{}"
+                }
+              ) }) : null
+            ] })
+          }
         },
         inputRef: ref
       }

package/dist/components.d.ts

@@ -19,4 +19,5 @@ import '@mui/material/Checkbox';
 import 'react-hook-form';
 import '@mui/material/Radio';
 import '@mui/material/RadioGroup';
+import '@mui/material';
 import '@mui/material/Autocomplete';

package/dist/components.js

@@ -93,9 +93,6 @@ var LSInput = forwardRef(
       inputAfterText,
       maxWidth,
       className = "",
-      InputProps: inputPropsProp,
-      InputLabelProps: inputLabelPropsProp,
-      inputProps: htmlInputPropsProp,
       slotProps: slotPropsProp,
       onChange,
       onChangeStart,
@@ -130,25 +127,11 @@ var LSInput = forwardRef(
       onChange?.(event, sanitizedValue);
       onChangeEnd?.(event, sanitizedValue);
     };
-    const resolvedStartAdornment = inputPropsProp?.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
-    const resolvedEndAdornment = inputPropsProp?.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
-    const inputSlotProps = {
-      ...inputPropsProp,
-      startAdornment: resolvedStartAdornment,
-      endAdornment: resolvedEndAdornment,
-      readOnly: rest.readOnly ?? inputPropsProp?.readOnly,
-      sx: {
-        ...inputPropsProp?.sx ?? {},
-        "& input, & textarea": {
-          textAlign: centerText ? "center" : void 0,
-          color: textColor ?? void 0
-        }
-      }
-    };
-    const inputLabelProps = {
-      shrink: true,
-      ...inputLabelPropsProp
-    };
+    const callerInputSlot = slotPropsProp?.input ?? {};
+    const callerHtmlInputSlot = slotPropsProp?.htmlInput ?? {};
+    const callerInputLabelSlot = slotPropsProp?.inputLabel ?? {};
+    const resolvedStartAdornment = callerInputSlot.startAdornment ?? (startAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: startAdornment }) : inputBeforeText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "start", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputBeforeText }) }) : void 0);
+    const resolvedEndAdornment = callerInputSlot.endAdornment ?? (endAdornment ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: endAdornment }) : inputAfterText ? /* @__PURE__ */ jsx2(InputAdornment, { position: "end", children: /* @__PURE__ */ jsx2("span", { className: "mui-ls-input-affix", children: inputAfterText }) }) : void 0);
     const helperContent = helperText ?? (typeof error === "string" ? error : "");
     const hasError = typeof error === "string" ? true : Boolean(error);
     const resolvedMaxWidth = maxWidth ?? style?.maxWidth;
@@ -156,20 +139,24 @@ var LSInput = forwardRef(
     const slotProps = {
       ...slotPropsProp ?? {},
       input: {
-        ...slotPropsProp?.input ?? {},
-        ...inputSlotProps,
+        ...callerInputSlot,
+        startAdornment: resolvedStartAdornment,
+        endAdornment: resolvedEndAdornment,
+        readOnly: rest.readOnly ?? callerInputSlot.readOnly,
         sx: {
-          ...slotPropsProp?.input?.sx ?? {},
-          ...inputSlotProps.sx
+          ...callerInputSlot.sx ?? {},
+          "& input, & textarea": {
+            textAlign: centerText ? "center" : void 0,
+            color: textColor ?? void 0
+          }
         }
       },
       inputLabel: {
-        ...slotPropsProp?.inputLabel ?? {},
-        ...inputLabelProps
+        shrink: true,
+        ...callerInputLabelSlot
       },
       htmlInput: {
-        ...slotPropsProp?.htmlInput ?? {},
-        ...htmlInputPropsProp ?? {}
+        ...callerHtmlInputSlot
       }
     };
     const TextFieldComponent = TextField;
@@ -359,15 +346,15 @@ var LSSliderInput = ({
             onChange: (_event, nextValue) => handleInputChange({ target: { value: nextValue ?? "" } }),
             value: displayValue ?? "",
             inputAfterText,
-            InputProps: {
-              ...inputProps?.InputProps ?? {},
-              name,
-              type: "number",
-              value: displayValue,
-              min: displayMinimum,
-              max: displayMaximum,
-              step: displayStep,
-              inputMode: stepPrecision > 0 ? "decimal" : "numeric"
+            slotProps: {
+              ...inputProps?.slotProps ?? {},
+              htmlInput: {
+                ...inputProps?.slotProps?.htmlInput ?? {},
+                min: displayMinimum,
+                max: displayMaximum,
+                step: displayStep,
+                inputMode: stepPrecision > 0 ? "decimal" : "numeric"
+              }
             },
             fullWidth: hideSlider ? fullWidth : false,
             $noMinHeight: false,
@@ -431,6 +418,16 @@ var LSSelect = ({
           border: "1px solid var(--neutralDark4)",
           borderRadius: "var(--radius, 1rem)",
           boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
+          "& .MuiList-root": {
+            backgroundColor: "var(--neutralDark2)"
+          },
+          "& .MuiListSubheader-root": {
+            backgroundColor: "var(--neutralDark1)",
+            color: "var(--neutralLight2)"
+          },
+          "& .MuiMenuItem-root": {
+            color: "var(--neutralLight1)"
+          },
           ...MenuProps?.slotProps?.paper?.sx
         }
       },
@@ -442,28 +439,6 @@ var LSSelect = ({
           ...MenuProps?.slotProps?.list?.sx
         }
       }
-    },
-    PaperProps: {
-      ...MenuProps?.PaperProps ?? {},
-      sx: {
-        background: "var(--neutralDark2) !important",
-        backgroundColor: "var(--neutralDark2)",
-        color: "var(--neutralLight1)",
-        border: "1px solid var(--neutralDark4)",
-        borderRadius: "var(--radius, 1rem)",
-        boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
-        "& .MuiList-root": {
-          backgroundColor: "var(--neutralDark2)"
-        },
-        "& .MuiListSubheader-root": {
-          backgroundColor: "var(--neutralDark1)",
-          color: "var(--neutralLight2)"
-        },
-        "& .MuiMenuItem-root": {
-          color: "var(--neutralLight1)"
-        },
-        ...MenuProps?.PaperProps?.sx
-      }
     }
   };
   return /* @__PURE__ */ jsxs2(
@@ -783,14 +758,7 @@ LSDatePicker.displayName = "LSDatePicker";
 import { KeyboardArrowDown } from "@mui/icons-material";
 import Autocomplete from "@mui/material/Autocomplete";
 import TextField2 from "@mui/material/TextField";
-import {
-  memo,
-  startTransition,
-  useEffect as useEffect3,
-  useMemo as useMemo2,
-  useRef as useRef2,
-  useState as useState3
-} from "react";
+import { memo, startTransition, useEffect as useEffect3, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react";
 import { jsx as jsx8 } from "react/jsx-runtime";
 var LSFontPicker = memo(function LSFontPicker2({
   value,
@@ -848,9 +816,7 @@ var LSFontPicker = memo(function LSFontPicker2({
       popupIcon: /* @__PURE__ */ jsx8(KeyboardArrowDown, {}),
       isOptionEqualToValue: (option, selectedValue) => option === selectedValue,
       onChange: (_event, newValue) => {
-        handleValueChange(
-          typeof newValue === "string" ? newValue : `${newValue ?? ""}`
-        );
+        handleValueChange(typeof newValue === "string" ? newValue : `${newValue ?? ""}`);
       },
       onInputChange: (_event, newInputValue, reason) => {
         if (reason === "input" || reason === "clear") {
@@ -907,11 +873,7 @@ var LSFontPicker = memo(function LSFontPicker2({
         );
       },
       renderInput: (params) => {
-        const {
-          InputLabelProps: paramsInputLabelProps,
-          InputProps: paramsInputProps,
-          ...restParams
-        } = params;
+        const { slotProps: paramsSlotProps = {}, ...restParams } = params;
         return /* @__PURE__ */ jsx8(
           TextFieldComponent,
           {
@@ -928,12 +890,16 @@ var LSFontPicker = memo(function LSFontPicker2({
               }
             },
             slotProps: {
+              ...paramsSlotProps,
               inputLabel: {
-                shrink: true,
-                ...paramsInputLabelProps ?? {}
+                ...paramsSlotProps.inputLabel ?? {},
+                shrink: true
               },
               input: {
-                ...paramsInputProps ?? {}
+                ...paramsSlotProps.input ?? {}
+              },
+              htmlInput: {
+                ...paramsSlotProps.htmlInput ?? {}
               }
             }
           }
@@ -976,6 +942,12 @@ var LSMultiSelect = ({
         /* @__PURE__ */ jsx9("div", { className: "ls-multi-select-value__count", children: `(${selected.length})` })
       ] }),
       MenuProps: {
+        // The previous version of this also set `PaperProps` here — that
+        // prop was removed from Menu in @mui/material v9 and React warns
+        // "does not recognize the `PaperProps` prop on a DOM element"
+        // when Menu spreads it through. Folded the one unique selector
+        // (`& .MuiList-root`) into `slotProps.paper.sx` below; everything
+        // else was already duplicated there.
         slotProps: {
           paper: {
             sx: {
@@ -987,7 +959,10 @@ var LSMultiSelect = ({
               boxShadow: "0 16px 32px rgba(0, 0, 0, 0.32)",
               backdropFilter: "none",
               opacity: 1,
-              maxHeight: "280px !important"
+              maxHeight: "280px !important",
+              "& .MuiList-root": {
+                backgroundColor: "var(--neutralDark2)"
+              }
             }
           },
           list: {
@@ -996,21 +971,6 @@ var LSMultiSelect = ({
               color: "var(--neutralLight1)"
             }
           }
-        },
-        PaperProps: {
-          sx: {
-            background: "var(--neutralDark2) !important",
-            backgroundColor: "var(--neutralDark2)",
-            color: "var(--neutralLight1)",
-            backdropFilter: "none",
-            opacity: 1,
-            maxHeight: "280px !important",
-            border: "1px solid var(--neutralDark4)",
-            borderRadius: "var(--radius, 1rem)",
-            "& .MuiList-root": {
-              backgroundColor: "var(--neutralDark2)"
-            }
-          }
         }
       },
       children: options.map((option) => /* @__PURE__ */ jsxs4(
@@ -1077,7 +1037,8 @@ import { forwardRef as forwardRef4 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var LSTextField = forwardRef4(
   (props, ref) => {
-    const { InputLabelProps, InputProps, slotProps, ...rest } = props;
+    const { slotProps, ...rest } = props;
+    const paramsInputLabel = slotProps?.inputLabel ?? {};
     return /* @__PURE__ */ jsx11(
       TextField3,
       {
@@ -1086,18 +1047,9 @@ var LSTextField = forwardRef4(
         className: "mui-ls-input",
         slotProps: {
           ...slotProps ?? {},
-          input: {
-            ...slotProps?.input ?? {},
-            ...InputProps ?? {},
-            sx: {
-              ...slotProps?.input?.sx ?? {},
-              ...InputProps?.sx ?? {}
-            }
-          },
           inputLabel: {
-            ...slotProps?.inputLabel ?? {},
-            shrink: true,
-            ...InputLabelProps ?? {}
+            ...paramsInputLabel,
+            shrink: true
           }
         },
         ref
@@ -2256,14 +2208,12 @@ var VariableInputTextField = forwardRef5(
     containerRef,
     showVariableIcon
   }, ref) => {
-    const inputPropsInputProps = inputProps?.InputProps ?? {};
-    const paramsInputProps = params?.InputProps ?? {};
-    const inputPropsSlotInputProps = inputProps?.slotProps?.input ?? {};
-    const paramsSlotInputProps = params?.slotProps?.input ?? {};
+    const inputPropsSlotInput = inputProps?.slotProps?.input ?? {};
+    const paramsSlotInput = params?.slotProps?.input ?? {};
     const explicitStartAdornment = inputProps?.startAdornment;
     const resolvedExplicitStartAdornment = explicitStartAdornment ? /* @__PURE__ */ jsx12(InputAdornment2, { position: "start", children: explicitStartAdornment }) : void 0;
-    const startAdornment = paramsInputProps.startAdornment ?? paramsSlotInputProps.startAdornment ?? inputPropsInputProps.startAdornment ?? inputPropsSlotInputProps.startAdornment ?? resolvedExplicitStartAdornment;
-    const endAdornment = paramsInputProps.endAdornment ?? paramsSlotInputProps.endAdornment ?? inputPropsInputProps.endAdornment ?? inputPropsSlotInputProps.endAdornment;
+    const startAdornment = paramsSlotInput.startAdornment ?? inputPropsSlotInput.startAdornment ?? resolvedExplicitStartAdornment;
+    const endAdornment = paramsSlotInput.endAdornment ?? inputPropsSlotInput.endAdornment;
     return /* @__PURE__ */ jsx12(
       LSTextField,
       {
@@ -2285,31 +2235,27 @@ var VariableInputTextField = forwardRef5(
         onChange: onChange ? (e) => onChange(e.target.value) : void 0,
         ...inputProps,
         ...params,
-        InputProps: {
-          ...inputPropsSlotInputProps,
-          ...inputPropsInputProps,
-          ...paramsSlotInputProps,
-          ...paramsInputProps,
-          startAdornment,
-          endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
-            endAdornment ?? null,
-            showVariableIcon ? /* @__PURE__ */ jsx12(
-              Tooltip,
-              {
-                title: t("chatbot.allowed-variables", "Allowed Variables"),
-                children: /* @__PURE__ */ jsx12(
-                  InputAdornment2,
-                  {
-                    position: "end",
-                    onClick: clickedVariableIcon,
-                    ref: containerRef,
-                    className: "ls-variable-input-adornment",
-                    children: "{}"
-                  }
-                )
-              }
-            ) : null
-          ] })
+        slotProps: {
+          ...inputProps?.slotProps ?? {},
+          ...params?.slotProps ?? {},
+          input: {
+            ...inputPropsSlotInput,
+            ...paramsSlotInput,
+            startAdornment,
+            endAdornment: /* @__PURE__ */ jsxs5(Fragment3, { children: [
+              endAdornment ?? null,
+              showVariableIcon ? /* @__PURE__ */ jsx12(Tooltip, { title: t("chatbot.allowed-variables", "Allowed Variables"), children: /* @__PURE__ */ jsx12(
+                InputAdornment2,
+                {
+                  position: "end",
+                  onClick: clickedVariableIcon,
+                  ref: containerRef,
+                  className: "ls-variable-input-adornment",
+                  children: "{}"
+                }
+              ) }) : null
+            ] })
+          }
         },
         inputRef: ref
       }

package/dist/index.d.ts

@@ -22,5 +22,6 @@ import '@mui/material/Checkbox';
 import 'react-hook-form';
 import '@mui/material/Radio';
 import '@mui/material/RadioGroup';
+import '@mui/material';
 import '@mui/material/Autocomplete';
 import '@codemirror/autocomplete';