cloudmr-ux 1.9.5 → 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>;
 
@@ -161,18 +177,24 @@ declare function CmrNameDialog(props: {
     setOpen: (open: boolean) => void;
 }): react_jsx_runtime.JSX.Element;
 
-declare function CmrConfirmation({ name, message, cancelText, color, open, setOpen, confirmCallback, confirmText, cancellable, cancelCallback, width }: {
+type ExtraButton = {
+    text: string;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    onClick: () => void;
+};
+declare function CmrConfirmation({ name, message, cancelText, confirmText, color, open, setOpen, confirmCallback, cancelCallback, cancellable, width, extraButtons, }: {
     name: string | undefined;
-    cancelText?: string;
     message: string | undefined;
-    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning" | undefined;
+    cancelText?: string;
+    confirmText?: string;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
     open: boolean;
     setOpen: (open: boolean) => void;
     confirmCallback?: () => void;
-    cancellable?: boolean;
     cancelCallback?: () => void;
+    cancellable?: boolean;
     width?: number;
-    confirmText?: string;
+    extraButtons?: ExtraButton[];
 }): react_jsx_runtime.JSX.Element;
 
 declare function CmrDeletionDialog(props: {

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;
 
@@ -843,7 +881,6 @@ function CmrNameDialog(props) {
 }
 
 // src/CmrComponents/dialogue/Confirmation.tsx
-var React7 = __toESM(require("react"));
 var import_Dialog3 = __toESM(require("@mui/material/Dialog"));
 var import_DialogActions3 = __toESM(require("@mui/material/DialogActions"));
 var import_DialogContent3 = __toESM(require("@mui/material/DialogContent"));
@@ -854,18 +891,18 @@ function CmrConfirmation({
   name,
   message,
   cancelText = "Cancel",
+  confirmText = "Confirm",
   color,
   open,
   setOpen,
   confirmCallback = () => {
   },
-  confirmText = "Confirm",
-  cancellable = false,
   cancelCallback = () => {
   },
-  width
+  cancellable = false,
+  width,
+  extraButtons = []
 }) {
-  const [text, setText] = React7.useState("");
   const handleClose = () => {
     setOpen(false);
   };
@@ -883,6 +920,19 @@ function CmrConfirmation({
       /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_DialogContentText2.default, { alignContent: "center", children: message }),
       /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_DialogActions3.default, { className: "mt-4", children: [
         cancellable && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CmrButton_default, { variant: "outlined", onClick: handleCancel, children: cancelText }),
+        extraButtons.map((btn, idx) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          CmrButton_default,
+          {
+            variant: "outlined",
+            color: btn.color || "success",
+            onClick: () => {
+              btn.onClick();
+              handleClose();
+            },
+            children: btn.text
+          },
+          idx
+        )),
         /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: confirmText })
       ] })
     ] })
@@ -890,7 +940,7 @@ function CmrConfirmation({
 }
 
 // src/CmrComponents/dialogue/DeletionDialog.tsx
-var React8 = __toESM(require("react"));
+var React7 = __toESM(require("react"));
 var import_TextField3 = __toESM(require("@mui/material/TextField"));
 var import_Dialog4 = __toESM(require("@mui/material/Dialog"));
 var import_DialogActions4 = __toESM(require("@mui/material/DialogActions"));
@@ -899,8 +949,8 @@ var import_DialogContentText3 = __toESM(require("@mui/material/DialogContentText
 var import_DialogTitle4 = __toESM(require("@mui/material/DialogTitle"));
 var import_jsx_runtime13 = require("react/jsx-runtime");
 function CmrDeletionDialog(props) {
-  const [open, setOpen] = React8.useState(true);
-  const [text, setText] = React8.useState("");
+  const [open, setOpen] = React7.useState(true);
+  const [text, setText] = React7.useState("");
   const handleClickOpen = () => {
     setOpen(true);
   };
@@ -943,7 +993,7 @@ function CmrDeletionDialog(props) {
 }
 
 // src/CmrComponents/dialogue/EditConfirmation.tsx
-var React9 = __toESM(require("react"));
+var React8 = __toESM(require("react"));
 var import_TextField4 = __toESM(require("@mui/material/TextField"));
 var import_Dialog5 = __toESM(require("@mui/material/Dialog"));
 var import_DialogActions5 = __toESM(require("@mui/material/DialogActions"));
@@ -967,7 +1017,7 @@ function CmrEditConfirmation({
   },
   suffix = ""
 }) {
-  const [text, setText] = React9.useState(defaultText);
+  const [text, setText] = React8.useState(defaultText);
   (0, import_react6.useEffect)(() => {
     if (open)
       setText(defaultText);
@@ -1008,7 +1058,7 @@ function CmrEditConfirmation({
 }
 
 // src/CmrTabs/CmrTabs.tsx
-var React10 = __toESM(require("react"));
+var React9 = __toESM(require("react"));
 var import_Tabs = __toESM(require("@mui/material/Tabs"));
 var import_Tab = __toESM(require("@mui/material/Tab"));
 var import_Container = __toESM(require("@mui/material/Container"));
@@ -1037,7 +1087,7 @@ function a11yProps(index) {
   };
 }
 function CmrTabs(props) {
-  const [value, setValue] = React10.useState(0);
+  const [value, setValue] = React9.useState(0);
   const handleChange = (event, newValue) => {
     setValue(newValue);
     if (props.onTabSelected)

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 () => {
@@ -795,7 +838,6 @@ function CmrNameDialog(props) {
 }
 
 // src/CmrComponents/dialogue/Confirmation.tsx
-import * as React7 from "react";
 import Dialog3 from "@mui/material/Dialog";
 import DialogActions3 from "@mui/material/DialogActions";
 import DialogContent3 from "@mui/material/DialogContent";
@@ -806,18 +848,18 @@ function CmrConfirmation({
   name,
   message,
   cancelText = "Cancel",
+  confirmText = "Confirm",
   color,
   open,
   setOpen,
   confirmCallback = () => {
   },
-  confirmText = "Confirm",
-  cancellable = false,
   cancelCallback = () => {
   },
-  width
+  cancellable = false,
+  width,
+  extraButtons = []
 }) {
-  const [text, setText] = React7.useState("");
   const handleClose = () => {
     setOpen(false);
   };
@@ -835,6 +877,19 @@ function CmrConfirmation({
       /* @__PURE__ */ jsx12(DialogContentText2, { alignContent: "center", children: message }),
       /* @__PURE__ */ jsxs8(DialogActions3, { className: "mt-4", children: [
         cancellable && /* @__PURE__ */ jsx12(CmrButton_default, { variant: "outlined", onClick: handleCancel, children: cancelText }),
+        extraButtons.map((btn, idx) => /* @__PURE__ */ jsx12(
+          CmrButton_default,
+          {
+            variant: "outlined",
+            color: btn.color || "success",
+            onClick: () => {
+              btn.onClick();
+              handleClose();
+            },
+            children: btn.text
+          },
+          idx
+        )),
         /* @__PURE__ */ jsx12(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: confirmText })
       ] })
     ] })
@@ -842,7 +897,7 @@ function CmrConfirmation({
 }
 
 // src/CmrComponents/dialogue/DeletionDialog.tsx
-import * as React8 from "react";
+import * as React7 from "react";
 import TextField3 from "@mui/material/TextField";
 import Dialog4 from "@mui/material/Dialog";
 import DialogActions4 from "@mui/material/DialogActions";
@@ -851,8 +906,8 @@ import DialogContentText3 from "@mui/material/DialogContentText";
 import DialogTitle4 from "@mui/material/DialogTitle";
 import { jsx as jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
 function CmrDeletionDialog(props) {
-  const [open, setOpen] = React8.useState(true);
-  const [text, setText] = React8.useState("");
+  const [open, setOpen] = React7.useState(true);
+  const [text, setText] = React7.useState("");
   const handleClickOpen = () => {
     setOpen(true);
   };
@@ -895,7 +950,7 @@ function CmrDeletionDialog(props) {
 }
 
 // src/CmrComponents/dialogue/EditConfirmation.tsx
-import * as React9 from "react";
+import * as React8 from "react";
 import TextField4 from "@mui/material/TextField";
 import Dialog5 from "@mui/material/Dialog";
 import DialogActions5 from "@mui/material/DialogActions";
@@ -903,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,
@@ -919,8 +974,8 @@ function CmrEditConfirmation({
   },
   suffix = ""
 }) {
-  const [text, setText] = React9.useState(defaultText);
-  useEffect2(() => {
+  const [text, setText] = React8.useState(defaultText);
+  useEffect3(() => {
     if (open)
       setText(defaultText);
   }, [open]);
@@ -960,7 +1015,7 @@ function CmrEditConfirmation({
 }
 
 // src/CmrTabs/CmrTabs.tsx
-import * as React10 from "react";
+import * as React9 from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Container from "@mui/material/Container";
@@ -989,7 +1044,7 @@ function a11yProps(index) {
   };
 }
 function CmrTabs(props) {
-  const [value, setValue] = React10.useState(0);
+  const [value, setValue] = React9.useState(0);
   const handleChange = (event, newValue) => {
     setValue(newValue);
     if (props.onTabSelected)
@@ -1062,7 +1117,7 @@ var CmrInputNumber = (props) => {
 var InputNumber_default = CmrInputNumber;
 
 // src/CmrComponents/select-upload/SelectUpload.tsx
-import React11, { Fragment } from "react";
+import React10, { Fragment } from "react";
 import { Button as Button4 } from "@mui/material";
 import Select2 from "react-select";
 import Dialog6 from "@mui/material/Dialog";
@@ -1082,10 +1137,10 @@ function checkExtension(filename, allowed) {
   }
 }
 var CMRSelectUpload = (props) => {
-  let [open, setOpen] = React11.useState(false);
-  let [fileIndex, selectFileIndex] = React11.useState(-1);
-  let [uploading, setUploading] = React11.useState(false);
-  const [progress, setProgress] = React11.useState(0);
+  let [open, setOpen] = React10.useState(false);
+  let [fileIndex, selectFileIndex] = React10.useState(-1);
+  let [uploading, setUploading] = React10.useState(false);
+  const [progress, setProgress] = React10.useState(0);
   const handleClickOpen = () => {
     selectFileIndex(-1);
     setOpen(true);

package/package.json

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