cloudmr-ux 1.1.2 → 1.1.4

package/dist/index.d.ts

@@ -178,6 +178,20 @@ declare function CmrDeletionDialog(props: {
     deletionCallback: () => void;
 }): react_jsx_runtime.JSX.Element;
 
+interface EditConfirmationProps {
+    name?: string;
+    defaultText?: string;
+    message?: string;
+    color?: "inherit" | "primary" | "secondary" | "success" | "error" | "info" | "warning";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    confirmCallback?: (text: string) => void;
+    cancellable?: boolean;
+    cancelCallback?: (edit: string) => void;
+    suffix?: string;
+}
+declare function CmrEditConfirmation({ name, message, defaultText, color, open, setOpen, confirmCallback, cancellable, cancelCallback, suffix }: EditConfirmationProps): react_jsx_runtime.JSX.Element;
+
 interface TabInfo {
     id: number;
     text: string;
@@ -204,6 +218,12 @@ interface CmrCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
 }
 declare const CmrCheckbox: (props: CmrCheckboxProps) => react_jsx_runtime.JSX.Element;
 
+interface CmrLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    required?: boolean;
+    children?: any;
+}
+declare const CmrLabel: (props: CmrLabelProps) => react_jsx_runtime.JSX.Element;
+
 interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
@@ -214,4 +234,4 @@ interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
 
 declare const CmrTable: FC<CmrTableProps>;
 
-export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrConfirmation, CmrDeletionDialog, CmrInput, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, CmrTabs, LambdaFile };
+export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrConfirmation, CmrDeletionDialog, CmrEditConfirmation, CmrInput, CmrLabel, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, CmrTabs, LambdaFile };

package/dist/index.js

@@ -36,7 +36,9 @@ __export(src_exports, {
   CmrCollapse: () => Collapse_default,
   CmrConfirmation: () => CmrConfirmation,
   CmrDeletionDialog: () => CmrDeletionDialog,
+  CmrEditConfirmation: () => CmrEditConfirmation,
   CmrInput: () => CmrInput,
+  CmrLabel: () => Label_default,
   CmrNameDialog: () => CmrNameDialog,
   CmrPanel: () => Panel_default,
   CmrRadioGroup: () => CmrRadioGroup_default,
@@ -929,18 +931,83 @@ function CmrDeletionDialog(props) {
   ] }) });
 }
 
-// src/CmrTabs/CmrTabs.tsx
+// src/CmrComponents/dialogue/EditConfirmation.tsx
 var React9 = __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"));
+var import_DialogContent5 = __toESM(require("@mui/material/DialogContent"));
+var import_DialogContentText4 = __toESM(require("@mui/material/DialogContentText"));
+var import_DialogTitle5 = __toESM(require("@mui/material/DialogTitle"));
+var import_material9 = require("@mui/material");
+var import_react6 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function CmrEditConfirmation({
+  name,
+  message,
+  defaultText = "",
+  color,
+  open,
+  setOpen,
+  confirmCallback = () => {
+  },
+  cancellable = false,
+  cancelCallback = () => {
+  },
+  suffix = ""
+}) {
+  const [text, setText] = React9.useState(defaultText);
+  (0, import_react6.useEffect)(() => {
+    if (open)
+      setText(defaultText);
+  }, [open]);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    confirmCallback(text + suffix);
+    handleClose();
+  };
+  const handleCancel = () => {
+    cancelCallback(text + suffix);
+    handleClose();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_Dialog5.default, { maxWidth: "xs", fullWidth: true, open, onClose: handleCancel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_DialogTitle5.default, { children: name ? name : "Confirmation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_DialogContent5.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_DialogContentText4.default, { alignContent: "center", children: message }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_DialogActions5.default, { children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        import_TextField4.default,
+        {
+          fullWidth: true,
+          variant: "standard",
+          InputProps: {
+            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material9.InputAdornment, { position: "end", sx: { whiteSpace: "nowrap" }, children: suffix })
+          },
+          defaultValue: text,
+          onChange: (e) => setText(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_DialogActions5.default, { children: [
+        cancellable && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CmrButton, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: "Cancel" }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CmrButton, { variant: "contained", color, onClick: handleConfirm, children: "Confirm" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/CmrTabs/CmrTabs.tsx
+var React10 = __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"));
 var import_Typography2 = __toESM(require("@mui/material/Typography"));
 var import_Box2 = __toESM(require("@mui/material/Box"));
-var import_react6 = require("react");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react7 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function CustomTabPanel(props) {
   const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
     "div",
     {
       role: "tabpanel",
@@ -948,7 +1015,7 @@ function CustomTabPanel(props) {
       id: `simple-tabpanel-${index}`,
       "aria-labelledby": `simple-tab-${index}`,
       ...other,
-      children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Box2.default, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Typography2.default, { children }) })
+      children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box2.default, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Typography2.default, { children }) })
     }
   );
 }
@@ -959,13 +1026,13 @@ function a11yProps(index) {
   };
 }
 function CmrTabs(props) {
-  const [value, setValue] = React9.useState(0);
+  const [value, setValue] = React10.useState(0);
   const handleChange = (event, newValue) => {
     setValue(newValue);
     if (props.onTabSelected)
       props.onTabSelected(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
     import_Container.default,
     {
       maxWidth: "lg",
@@ -976,7 +1043,7 @@ function CmrTabs(props) {
         mt: 4
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Box2.default, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Box2.default, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
           import_Tabs.default,
           {
             value,
@@ -988,11 +1055,11 @@ function CmrTabs(props) {
                 backgroundColor: "#580F8B"
               }
             },
-            children: props.tabList.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Tab.default, { sx: { color: value == index ? "#580F8B" : void 0 }, style: { fontSize: "14px", textTransform: "uppercase", fontWeight: 400 }, label: tab.text, ...a11yProps(index) }))
+            children: props.tabList.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_Tab.default, { sx: { color: value == index ? "#580F8B" : void 0 }, style: { fontSize: "14px", textTransform: "uppercase", fontWeight: 400 }, label: tab.text, ...a11yProps(index) }))
           }
         ) }),
         props.tabList.map(
-          (tab, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CustomTabPanel, { value, index, children: (0, import_react6.cloneElement)(tab.children, {
+          (tab, index) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(CustomTabPanel, { value, index, children: (0, import_react7.cloneElement)(tab.children, {
             visible: value == index
           }) })
         )
@@ -1002,19 +1069,19 @@ function CmrTabs(props) {
 }
 
 // src/CmrComponents/checkbox/Checkbox.tsx
-var import_material9 = require("@mui/material");
 var import_material10 = require("@mui/material");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_material11 = require("@mui/material");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var CmrCheckbox = (props) => {
   const { defaultChecked, onChange, children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_material10.FormControlLabel,
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    import_material11.FormControlLabel,
     {
       disabled: props.disabled,
       style: props.style,
       className: props.className,
-      control: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_material9.Checkbox, { style: props.style, checked: props.checked, defaultChecked, onChange }),
-      label: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(Label_default, { children: props.children }),
+      control: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material10.Checkbox, { style: props.style, checked: props.checked, defaultChecked, onChange }),
+      label: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Label_default, { children: props.children }),
       sx: props.sx,
       labelPlacement: "end"
     }
@@ -1024,7 +1091,7 @@ var Checkbox_default = CmrCheckbox;
 
 // src/CmrTable/CmrTable.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -1036,7 +1103,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     import_x_data_grid.DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -1068,7 +1135,9 @@ var CmrTable2 = CmrTable_default;
   CmrCollapse,
   CmrConfirmation,
   CmrDeletionDialog,
+  CmrEditConfirmation,
   CmrInput,
+  CmrLabel,
   CmrNameDialog,
   CmrPanel,
   CmrRadioGroup,

package/dist/index.mjs

@@ -887,18 +887,83 @@ function CmrDeletionDialog(props) {
   ] }) });
 }
 
-// src/CmrTabs/CmrTabs.tsx
+// src/CmrComponents/dialogue/EditConfirmation.tsx
 import * as React9 from "react";
+import TextField4 from "@mui/material/TextField";
+import Dialog5 from "@mui/material/Dialog";
+import DialogActions5 from "@mui/material/DialogActions";
+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 { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+function CmrEditConfirmation({
+  name,
+  message,
+  defaultText = "",
+  color,
+  open,
+  setOpen,
+  confirmCallback = () => {
+  },
+  cancellable = false,
+  cancelCallback = () => {
+  },
+  suffix = ""
+}) {
+  const [text, setText] = React9.useState(defaultText);
+  useEffect2(() => {
+    if (open)
+      setText(defaultText);
+  }, [open]);
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    confirmCallback(text + suffix);
+    handleClose();
+  };
+  const handleCancel = () => {
+    cancelCallback(text + suffix);
+    handleClose();
+  };
+  return /* @__PURE__ */ jsxs10(Dialog5, { maxWidth: "xs", fullWidth: true, open, onClose: handleCancel, children: [
+    /* @__PURE__ */ jsx14(DialogTitle5, { children: name ? name : "Confirmation" }),
+    /* @__PURE__ */ jsxs10(DialogContent5, { children: [
+      /* @__PURE__ */ jsx14(DialogContentText4, { alignContent: "center", children: message }),
+      /* @__PURE__ */ jsx14(DialogActions5, { children: /* @__PURE__ */ jsx14(
+        TextField4,
+        {
+          fullWidth: true,
+          variant: "standard",
+          InputProps: {
+            endAdornment: /* @__PURE__ */ jsx14(InputAdornment, { position: "end", sx: { whiteSpace: "nowrap" }, children: suffix })
+          },
+          defaultValue: text,
+          onChange: (e) => setText(e.target.value)
+        }
+      ) }),
+      /* @__PURE__ */ jsxs10(DialogActions5, { children: [
+        cancellable && /* @__PURE__ */ jsx14(CmrButton, { variant: "outlined", color: "inherit", sx: { color: "#333" }, onClick: handleCancel, children: "Cancel" }),
+        /* @__PURE__ */ jsx14(CmrButton, { variant: "contained", color, onClick: handleConfirm, children: "Confirm" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/CmrTabs/CmrTabs.tsx
+import * as React10 from "react";
 import Tabs from "@mui/material/Tabs";
 import Tab from "@mui/material/Tab";
 import Container from "@mui/material/Container";
 import Typography3 from "@mui/material/Typography";
 import Box3 from "@mui/material/Box";
 import { cloneElement as cloneElement2 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
 function CustomTabPanel(props) {
   const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx15(
     "div",
     {
       role: "tabpanel",
@@ -906,7 +971,7 @@ function CustomTabPanel(props) {
       id: `simple-tabpanel-${index}`,
       "aria-labelledby": `simple-tab-${index}`,
       ...other,
-      children: /* @__PURE__ */ jsx14(Box3, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ jsx14(Typography3, { children }) })
+      children: /* @__PURE__ */ jsx15(Box3, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ jsx15(Typography3, { children }) })
     }
   );
 }
@@ -917,13 +982,13 @@ function a11yProps(index) {
   };
 }
 function CmrTabs(props) {
-  const [value, setValue] = React9.useState(0);
+  const [value, setValue] = React10.useState(0);
   const handleChange = (event, newValue) => {
     setValue(newValue);
     if (props.onTabSelected)
       props.onTabSelected(newValue);
   };
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     Container,
     {
       maxWidth: "lg",
@@ -934,7 +999,7 @@ function CmrTabs(props) {
         mt: 4
       },
       children: [
-        /* @__PURE__ */ jsx14(Box3, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ jsx14(
+        /* @__PURE__ */ jsx15(Box3, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ jsx15(
           Tabs,
           {
             value,
@@ -946,11 +1011,11 @@ function CmrTabs(props) {
                 backgroundColor: "#580F8B"
               }
             },
-            children: props.tabList.map((tab, index) => /* @__PURE__ */ jsx14(Tab, { sx: { color: value == index ? "#580F8B" : void 0 }, style: { fontSize: "14px", textTransform: "uppercase", fontWeight: 400 }, label: tab.text, ...a11yProps(index) }))
+            children: props.tabList.map((tab, index) => /* @__PURE__ */ jsx15(Tab, { sx: { color: value == index ? "#580F8B" : void 0 }, style: { fontSize: "14px", textTransform: "uppercase", fontWeight: 400 }, label: tab.text, ...a11yProps(index) }))
           }
         ) }),
         props.tabList.map(
-          (tab, index) => /* @__PURE__ */ jsx14(CustomTabPanel, { value, index, children: cloneElement2(tab.children, {
+          (tab, index) => /* @__PURE__ */ jsx15(CustomTabPanel, { value, index, children: cloneElement2(tab.children, {
             visible: value == index
           }) })
         )
@@ -962,17 +1027,17 @@ function CmrTabs(props) {
 // src/CmrComponents/checkbox/Checkbox.tsx
 import { Checkbox as Checkbox2 } from "@mui/material";
 import { FormControlLabel as FormControlLabel3 } from "@mui/material";
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var CmrCheckbox = (props) => {
   const { defaultChecked, onChange, children, ...rest } = props;
-  return /* @__PURE__ */ jsx15(
+  return /* @__PURE__ */ jsx16(
     FormControlLabel3,
     {
       disabled: props.disabled,
       style: props.style,
       className: props.className,
-      control: /* @__PURE__ */ jsx15(Checkbox2, { style: props.style, checked: props.checked, defaultChecked, onChange }),
-      label: /* @__PURE__ */ jsx15(Label_default, { children: props.children }),
+      control: /* @__PURE__ */ jsx16(Checkbox2, { style: props.style, checked: props.checked, defaultChecked, onChange }),
+      label: /* @__PURE__ */ jsx16(Label_default, { children: props.children }),
       sx: props.sx,
       labelPlacement: "end"
     }
@@ -982,7 +1047,7 @@ var Checkbox_default = CmrCheckbox;
 
 // src/CmrTable/CmrTable.tsx
 import { DataGrid } from "@mui/x-data-grid";
-import { jsx as jsx16 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -994,7 +1059,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx16("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx17(
     DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -1025,7 +1090,9 @@ export {
   Collapse_default as CmrCollapse,
   CmrConfirmation,
   CmrDeletionDialog,
+  CmrEditConfirmation,
   CmrInput,
+  Label_default as CmrLabel,
   CmrNameDialog,
   Panel_default as CmrPanel,
   CmrRadioGroup_default as CmrRadioGroup,

package/package.json

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