cloudmr-ux 1.9.6 → 1.9.7

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps, SxProps, Theme } from '@mui/material';
+import { ButtonProps, FormControlProps, SelectProps, SxProps, Theme } from '@mui/material';
 import * as React from 'react';
 import React__default, { ReactNode, ChangeEvent, CSSProperties, FC } from 'react';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
@@ -41,11 +41,27 @@ declare const CmrRadioGroup: React__default.FC<CmrRadioProps>;
 interface Option {
     label: string;
     value: string;
+    disabled?: boolean;
 }
 interface CmrSelectProps {
     options: Option[];
     label: string;
     disabled?: boolean;
+    /** Controlled value (optional). If provided, component becomes controlled. */
+    value?: string;
+    /** Fires when selection changes. For controlled usage, update your state here. */
+    onChange?: (value: string) => void;
+    /** Initial value for uncontrolled mode. Defaults to ''. */
+    defaultValue?: string;
+    /** Top placeholder item. Shown as first item; disabled so users must pick another. */
+    placeholder?: string;
+    /** Layout helpers */
+    fullWidth?: boolean;
+    /** Pass-through styling/props */
+    sx?: FormControlProps['sx'];
+    className?: string;
+    /** Optional passthrough to MUI Select */
+    SelectProps?: Partial<SelectProps<string>>;
 }
 declare const CmrSelect: React__default.FC<CmrSelectProps>;
 

package/dist/index.js

@@ -134,26 +134,64 @@ var CmrRadioGroup_default = CmrRadioGroup;
 var import_react2 = require("react");
 var import_material5 = require("@mui/material");
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var CmrSelect = ({ options, label, disabled }) => {
-  const [selectedValue, setSelectedValue] = (0, import_react2.useState)("");
+var CmrSelect = ({
+  options,
+  label,
+  disabled,
+  value,
+  // controlled value (optional)
+  onChange,
+  // callback (optional)
+  defaultValue = "",
+  // for uncontrolled
+  placeholder,
+  // optional top disabled item
+  fullWidth,
+  sx,
+  className,
+  SelectProps: SelectProps2
+}) => {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = (0, import_react2.useState)(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  (0, import_react2.useEffect)(() => {
+    if (isControlled) {
+      setInternalValue(value);
+    }
+  }, [isControlled, value]);
+  const id = (0, import_react2.useId)();
+  const labelId = `${id}-label`;
   const handleChange = (event) => {
-    setSelectedValue(event.target.value);
-    console.log("Selected Value:", event.target.value);
+    const next = event.target.value;
+    if (!isControlled)
+      setInternalValue(next);
+    onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_material5.FormControl, { className: "dropdown-select", sx: {
-    minWidth: 200,
-    // Minimum width for the dropdown
-    maxWidth: 400,
-    // Optional: Maximum width for the dropdown
-    width: "auto"
-    // Allow auto-resizing based on content
-  }, disabled, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.InputLabel, { className: "dropdown-label", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.Select, { value: selectedValue, onChange: handleChange, label, MenuProps: {
-      classes: { paper: "custom-dropdown" }
-      // Apply the class to the dropdown menu
-    }, children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.MenuItem, { value: option.value, children: option.label }, option.value)) })
-  ] });
+  const items = placeholder ? [{ label: placeholder, value: "", disabled: true }, ...options] : options;
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+    import_material5.FormControl,
+    {
+      className: className ?? "dropdown-select",
+      sx: { minWidth: 200, maxWidth: 400, width: fullWidth ? "100%" : "auto", ...sx },
+      disabled,
+      fullWidth,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.InputLabel, { id: labelId, className: "dropdown-label", children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+          import_material5.Select,
+          {
+            labelId,
+            value: currentValue,
+            onChange: handleChange,
+            label,
+            MenuProps: { classes: { paper: "custom-dropdown" }, ...SelectProps2 == null ? void 0 : SelectProps2.MenuProps },
+            ...SelectProps2,
+            children: items.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.MenuItem, { value: opt.value, disabled: !!opt.disabled, children: opt.label }, `${opt.value}-${opt.label}`))
+          }
+        )
+      ]
+    }
+  );
 };
 var CmrSelect_default = CmrSelect;
 

package/dist/index.mjs

@@ -83,29 +83,72 @@ var CmrRadioGroup = ({
 var CmrRadioGroup_default = CmrRadioGroup;
 
 // src/CmrComponents/CmrSelect/CmrSelect.tsx
-import { useState as useState2 } from "react";
-import { Select, MenuItem, FormControl as FormControl2, InputLabel } from "@mui/material";
+import { useEffect, useId, useState as useState2 } from "react";
+import {
+  Select,
+  MenuItem,
+  FormControl as FormControl2,
+  InputLabel
+} from "@mui/material";
 import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
-var CmrSelect = ({ options, label, disabled }) => {
-  const [selectedValue, setSelectedValue] = useState2("");
+var CmrSelect = ({
+  options,
+  label,
+  disabled,
+  value,
+  // controlled value (optional)
+  onChange,
+  // callback (optional)
+  defaultValue = "",
+  // for uncontrolled
+  placeholder,
+  // optional top disabled item
+  fullWidth,
+  sx,
+  className,
+  SelectProps: SelectProps2
+}) => {
+  const isControlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState2(defaultValue);
+  const currentValue = isControlled ? value : internalValue;
+  useEffect(() => {
+    if (isControlled) {
+      setInternalValue(value);
+    }
+  }, [isControlled, value]);
+  const id = useId();
+  const labelId = `${id}-label`;
   const handleChange = (event) => {
-    setSelectedValue(event.target.value);
-    console.log("Selected Value:", event.target.value);
+    const next = event.target.value;
+    if (!isControlled)
+      setInternalValue(next);
+    onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ jsxs2(FormControl2, { className: "dropdown-select", sx: {
-    minWidth: 200,
-    // Minimum width for the dropdown
-    maxWidth: 400,
-    // Optional: Maximum width for the dropdown
-    width: "auto"
-    // Allow auto-resizing based on content
-  }, disabled, children: [
-    /* @__PURE__ */ jsx5(InputLabel, { className: "dropdown-label", children: label }),
-    /* @__PURE__ */ jsx5(Select, { value: selectedValue, onChange: handleChange, label, MenuProps: {
-      classes: { paper: "custom-dropdown" }
-      // Apply the class to the dropdown menu
-    }, children: options.map((option) => /* @__PURE__ */ jsx5(MenuItem, { value: option.value, children: option.label }, option.value)) })
-  ] });
+  const items = placeholder ? [{ label: placeholder, value: "", disabled: true }, ...options] : options;
+  return /* @__PURE__ */ jsxs2(
+    FormControl2,
+    {
+      className: className ?? "dropdown-select",
+      sx: { minWidth: 200, maxWidth: 400, width: fullWidth ? "100%" : "auto", ...sx },
+      disabled,
+      fullWidth,
+      children: [
+        /* @__PURE__ */ jsx5(InputLabel, { id: labelId, className: "dropdown-label", children: label }),
+        /* @__PURE__ */ jsx5(
+          Select,
+          {
+            labelId,
+            value: currentValue,
+            onChange: handleChange,
+            label,
+            MenuProps: { classes: { paper: "custom-dropdown" }, ...SelectProps2 == null ? void 0 : SelectProps2.MenuProps },
+            ...SelectProps2,
+            children: items.map((opt) => /* @__PURE__ */ jsx5(MenuItem, { value: opt.value, disabled: !!opt.disabled, children: opt.label }, `${opt.value}-${opt.label}`))
+          }
+        )
+      ]
+    }
+  );
 };
 var CmrSelect_default = CmrSelect;
 
@@ -713,7 +756,7 @@ import Dialog2 from "@mui/material/Dialog";
 import DialogActions2 from "@mui/material/DialogActions";
 import DialogContent2 from "@mui/material/DialogContent";
 import DialogTitle2 from "@mui/material/DialogTitle";
-import { useEffect } from "react";
+import { useEffect as useEffect2 } from "react";
 import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
 function CmrNameDialog(props) {
   let { originalName, open, setOpen } = props;
@@ -724,7 +767,7 @@ function CmrNameDialog(props) {
   const handleClose = () => {
     setOpen(false);
   };
-  useEffect(() => {
+  useEffect2(() => {
     checkError(originalName);
   }, [originalName]);
   const handleConfirm = async () => {
@@ -915,7 +958,7 @@ import DialogContent5 from "@mui/material/DialogContent";
 import DialogContentText4 from "@mui/material/DialogContentText";
 import DialogTitle5 from "@mui/material/DialogTitle";
 import { InputAdornment } from "@mui/material";
-import { useEffect as useEffect2 } from "react";
+import { useEffect as useEffect3 } from "react";
 import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function CmrEditConfirmation({
   name,
@@ -932,7 +975,7 @@ function CmrEditConfirmation({
   suffix = ""
 }) {
   const [text, setText] = React8.useState(defaultText);
-  useEffect2(() => {
+  useEffect3(() => {
     if (open)
       setText(defaultText);
   }, [open]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",