cloudmr-ux 1.1.0 → 1.1.2

package/dist/index.css

@@ -172,6 +172,16 @@
   margin-left: 4px;
 }
 
+/* src/CmrComponents/checkbox/Checkbox.css */
+.cmr-checkbox {
+  margin-bottom: 4px;
+  &__text {
+    font-size: 16px;
+    line-height: 15px;
+    text-align: justify;
+  }
+}
+
 /* src/CmrTable/CmrTable.css */
 .css-1lymaxv-MuiDataGrid-root .MuiDataGrid-columnHeader:focus-within,
 .css-1lymaxv-MuiDataGrid-root .MuiDataGrid-cell:focus-within {

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ButtonProps, SxProps, Theme } from '@mui/material';
-import React, { ChangeEvent, ReactNode, CSSProperties, FC } from 'react';
+import React, { ReactNode, ChangeEvent, CSSProperties, FC } from 'react';
 import { SizeType } from 'antd/lib/config-provider/SizeContext';
 import { CollapsibleType } from 'antd/es/collapse/CollapsePanel';
 import { ExpandIconPosition } from 'antd/es/collapse/Collapse';
@@ -9,18 +9,6 @@ import { DataGridProps } from '@mui/x-data-grid';
 
 declare const CmrButton: (props: ButtonProps) => react_jsx_runtime.JSX.Element;
 
-interface CmrCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
-    autoFocus?: boolean;
-    checked?: boolean;
-    defaultChecked?: boolean;
-    disabled?: boolean;
-    indeterminate?: boolean;
-    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-    children?: any;
-    style?: any;
-}
-declare const CmrCheckbox: (props: CmrCheckboxProps) => react_jsx_runtime.JSX.Element;
-
 interface CmrInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type'> {
     defaultValue?: string;
     id?: string;
@@ -185,6 +173,11 @@ declare function CmrConfirmation({ name, message, cancelText, color, open, setOp
     confirmText?: string;
 }): react_jsx_runtime.JSX.Element;
 
+declare function CmrDeletionDialog(props: {
+    name: string | undefined;
+    deletionCallback: () => void;
+}): react_jsx_runtime.JSX.Element;
+
 interface TabInfo {
     id: number;
     text: string;
@@ -198,6 +191,19 @@ interface CmrTabsProps {
 }
 declare function CmrTabs(props: CmrTabsProps): react_jsx_runtime.JSX.Element;
 
+interface CmrCheckboxProps extends React.HTMLAttributes<HTMLDivElement> {
+    autoFocus?: boolean;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
+    children?: any;
+    style?: any;
+    sx?: any;
+}
+declare const CmrCheckbox: (props: CmrCheckboxProps) => react_jsx_runtime.JSX.Element;
+
 interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
     dataSource: any[];
     idAlias?: string;
@@ -208,4 +214,4 @@ interface CmrTableProps extends Omit<DataGridProps, 'rows'> {
 
 declare const CmrTable: FC<CmrTableProps>;
 
-export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrConfirmation, CmrInput, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, CmrTabs, LambdaFile };
+export { CmrUpload as CMRUpload, CmrButton, CmrCheckbox, CmrCollapse, CmrConfirmation, CmrDeletionDialog, CmrInput, CmrNameDialog, CmrPanel, CmrRadioGroup, CmrSelect, CmrTable, CmrTableProps, CmrTabs, LambdaFile };

package/dist/index.js

@@ -32,9 +32,10 @@ var src_exports = {};
 __export(src_exports, {
   CMRUpload: () => Upload_default,
   CmrButton: () => CmrButton,
-  CmrCheckbox: () => CmrCheckbox,
+  CmrCheckbox: () => Checkbox_default,
   CmrCollapse: () => Collapse_default,
   CmrConfirmation: () => CmrConfirmation,
+  CmrDeletionDialog: () => CmrDeletionDialog,
   CmrInput: () => CmrInput,
   CmrNameDialog: () => CmrNameDialog,
   CmrPanel: () => Panel_default,
@@ -76,28 +77,6 @@ var CmrButton = (props) => {
 var import_material2 = require("@mui/material");
 var import_material3 = require("@mui/material");
 var import_jsx_runtime2 = require("react/jsx-runtime");
-var CmrCheckbox = (props) => {
-  const { defaultChecked, onChange, children, ...rest } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-    import_material3.FormControlLabel,
-    {
-      disabled: props.disabled,
-      style: props.style,
-      className: props.className,
-      control: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
-        import_material2.Checkbox,
-        {
-          style: props.style,
-          checked: props.checked,
-          defaultChecked,
-          onChange
-        }
-      ),
-      label: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "cmr-label", style: { paddingRight: 0, color: "var(--bs-card-color)" }, children: props.children }),
-      labelPlacement: "end"
-    }
-  );
-};
 
 // src/CmrComponents/CmrInput/CmrInput.tsx
 var import_antd = require("antd");
@@ -897,18 +876,71 @@ function CmrConfirmation({
   ] });
 }
 
-// src/CmrTabs/CmrTabs.tsx
+// src/CmrComponents/dialogue/DeletionDialog.tsx
 var React8 = __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"));
+var import_DialogContent4 = __toESM(require("@mui/material/DialogContent"));
+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 handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    if (text === props.name) {
+      props.deletionCallback();
+      setOpen(false);
+    }
+  };
+  const handleTextFieldChange = (e) => {
+    setText(e.target.value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_Dialog4.default, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_DialogTitle4.default, { children: "Confirmation" }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_DialogContent4.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_DialogContentText3.default, { children: "To delete the files, please type your full name below and confirm." }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        import_TextField3.default,
+        {
+          autoFocus: true,
+          margin: "dense",
+          id: "name",
+          type: "email",
+          placeholder: props.name,
+          fullWidth: true,
+          inputProps: { style: { fontSize: "16pt" } },
+          variant: "standard",
+          onChange: handleTextFieldChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_DialogActions4.default, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "btn btn-secondary", onClick: handleClose, children: "Cancel" }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { className: "btn btn-danger", onClick: handleConfirm, children: "Confirm" })
+    ] })
+  ] }) });
+}
+
+// src/CmrTabs/CmrTabs.tsx
+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"));
 var import_Typography2 = __toESM(require("@mui/material/Typography"));
 var import_Box2 = __toESM(require("@mui/material/Box"));
 var import_react6 = require("react");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function CustomTabPanel(props) {
   const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
     "div",
     {
       role: "tabpanel",
@@ -916,7 +948,7 @@ function CustomTabPanel(props) {
       id: `simple-tabpanel-${index}`,
       "aria-labelledby": `simple-tab-${index}`,
       ...other,
-      children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Box2.default, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Typography2.default, { children }) })
+      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 }) })
     }
   );
 }
@@ -927,13 +959,13 @@ function a11yProps(index) {
   };
 }
 function CmrTabs(props) {
-  const [value, setValue] = React8.useState(0);
+  const [value, setValue] = React9.useState(0);
   const handleChange = (event, newValue) => {
     setValue(newValue);
     if (props.onTabSelected)
       props.onTabSelected(newValue);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
     import_Container.default,
     {
       maxWidth: "lg",
@@ -944,7 +976,7 @@ function CmrTabs(props) {
         mt: 4
       },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_Box2.default, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_Box2.default, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
           import_Tabs.default,
           {
             value,
@@ -956,11 +988,11 @@ function CmrTabs(props) {
                 backgroundColor: "#580F8B"
               }
             },
-            children: props.tabList.map((tab, index) => /* @__PURE__ */ (0, import_jsx_runtime13.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_runtime14.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_runtime13.jsx)(CustomTabPanel, { value, index, children: (0, import_react6.cloneElement)(tab.children, {
+          (tab, index) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(CustomTabPanel, { value, index, children: (0, import_react6.cloneElement)(tab.children, {
             visible: value == index
           }) })
         )
@@ -969,9 +1001,30 @@ 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 CmrCheckbox = (props) => {
+  const { defaultChecked, onChange, children, ...rest } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_material10.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 }),
+      sx: props.sx,
+      labelPlacement: "end"
+    }
+  );
+};
+var Checkbox_default = CmrCheckbox;
+
 // src/CmrTable/CmrTable.tsx
 var import_x_data_grid = require("@mui/x-data-grid");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -983,7 +1036,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
     import_x_data_grid.DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -1014,6 +1067,7 @@ var CmrTable2 = CmrTable_default;
   CmrCheckbox,
   CmrCollapse,
   CmrConfirmation,
+  CmrDeletionDialog,
   CmrInput,
   CmrNameDialog,
   CmrPanel,

package/dist/index.mjs

@@ -29,28 +29,6 @@ var CmrButton = (props) => {
 import { Checkbox } from "@mui/material";
 import { FormControlLabel } from "@mui/material";
 import { jsx as jsx2 } from "react/jsx-runtime";
-var CmrCheckbox = (props) => {
-  const { defaultChecked, onChange, children, ...rest } = props;
-  return /* @__PURE__ */ jsx2(
-    FormControlLabel,
-    {
-      disabled: props.disabled,
-      style: props.style,
-      className: props.className,
-      control: /* @__PURE__ */ jsx2(
-        Checkbox,
-        {
-          style: props.style,
-          checked: props.checked,
-          defaultChecked,
-          onChange
-        }
-      ),
-      label: /* @__PURE__ */ jsx2("span", { className: "cmr-label", style: { paddingRight: 0, color: "var(--bs-card-color)" }, children: props.children }),
-      labelPlacement: "end"
-    }
-  );
-};
 
 // src/CmrComponents/CmrInput/CmrInput.tsx
 import { Input } from "antd";
@@ -856,18 +834,71 @@ function CmrConfirmation({
   ] });
 }
 
-// src/CmrTabs/CmrTabs.tsx
+// src/CmrComponents/dialogue/DeletionDialog.tsx
 import * as React8 from "react";
+import TextField3 from "@mui/material/TextField";
+import Dialog4 from "@mui/material/Dialog";
+import DialogActions4 from "@mui/material/DialogActions";
+import DialogContent4 from "@mui/material/DialogContent";
+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 handleClickOpen = () => {
+    setOpen(true);
+  };
+  const handleClose = () => {
+    setOpen(false);
+  };
+  const handleConfirm = () => {
+    if (text === props.name) {
+      props.deletionCallback();
+      setOpen(false);
+    }
+  };
+  const handleTextFieldChange = (e) => {
+    setText(e.target.value);
+  };
+  return /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsxs9(Dialog4, { open, onClose: handleClose, children: [
+    /* @__PURE__ */ jsx13(DialogTitle4, { children: "Confirmation" }),
+    /* @__PURE__ */ jsxs9(DialogContent4, { children: [
+      /* @__PURE__ */ jsx13(DialogContentText3, { children: "To delete the files, please type your full name below and confirm." }),
+      /* @__PURE__ */ jsx13(
+        TextField3,
+        {
+          autoFocus: true,
+          margin: "dense",
+          id: "name",
+          type: "email",
+          placeholder: props.name,
+          fullWidth: true,
+          inputProps: { style: { fontSize: "16pt" } },
+          variant: "standard",
+          onChange: handleTextFieldChange
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs9(DialogActions4, { children: [
+      /* @__PURE__ */ jsx13("button", { className: "btn btn-secondary", onClick: handleClose, children: "Cancel" }),
+      /* @__PURE__ */ jsx13("button", { className: "btn btn-danger", onClick: handleConfirm, children: "Confirm" })
+    ] })
+  ] }) });
+}
+
+// src/CmrTabs/CmrTabs.tsx
+import * as React9 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 jsx13, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
 function CustomTabPanel(props) {
   const { children, value, index, ...other } = props;
-  return /* @__PURE__ */ jsx13(
+  return /* @__PURE__ */ jsx14(
     "div",
     {
       role: "tabpanel",
@@ -875,7 +906,7 @@ function CustomTabPanel(props) {
       id: `simple-tabpanel-${index}`,
       "aria-labelledby": `simple-tab-${index}`,
       ...other,
-      children: /* @__PURE__ */ jsx13(Box3, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ jsx13(Typography3, { children }) })
+      children: /* @__PURE__ */ jsx14(Box3, { sx: { p: 0 }, style: { display: value === index ? void 0 : "none" }, children: /* @__PURE__ */ jsx14(Typography3, { children }) })
     }
   );
 }
@@ -886,13 +917,13 @@ function a11yProps(index) {
   };
 }
 function CmrTabs(props) {
-  const [value, setValue] = React8.useState(0);
+  const [value, setValue] = React9.useState(0);
   const handleChange = (event, newValue) => {
     setValue(newValue);
     if (props.onTabSelected)
       props.onTabSelected(newValue);
   };
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     Container,
     {
       maxWidth: "lg",
@@ -903,7 +934,7 @@ function CmrTabs(props) {
         mt: 4
       },
       children: [
-        /* @__PURE__ */ jsx13(Box3, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ jsx13(
+        /* @__PURE__ */ jsx14(Box3, { sx: { borderBottom: 1, borderColor: "divider", mb: 4 }, children: /* @__PURE__ */ jsx14(
           Tabs,
           {
             value,
@@ -915,11 +946,11 @@ function CmrTabs(props) {
                 backgroundColor: "#580F8B"
               }
             },
-            children: props.tabList.map((tab, index) => /* @__PURE__ */ jsx13(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__ */ jsx14(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__ */ jsx13(CustomTabPanel, { value, index, children: cloneElement2(tab.children, {
+          (tab, index) => /* @__PURE__ */ jsx14(CustomTabPanel, { value, index, children: cloneElement2(tab.children, {
             visible: value == index
           }) })
         )
@@ -928,9 +959,30 @@ 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";
+var CmrCheckbox = (props) => {
+  const { defaultChecked, onChange, children, ...rest } = props;
+  return /* @__PURE__ */ jsx15(
+    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 }),
+      sx: props.sx,
+      labelPlacement: "end"
+    }
+  );
+};
+var Checkbox_default = CmrCheckbox;
+
 // src/CmrTable/CmrTable.tsx
 import { DataGrid } from "@mui/x-data-grid";
-import { jsx as jsx14 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var CmrTable = (props) => {
   const {
     dataSource,
@@ -942,7 +994,7 @@ var CmrTable = (props) => {
     showCheckbox = true,
     ...rest
   } = props;
-  return /* @__PURE__ */ jsx14("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx14(
+  return /* @__PURE__ */ jsx16("div", { style: style ?? { height: "400px", width: "100%" }, className: className ?? "", children: /* @__PURE__ */ jsx16(
     DataGrid,
     {
       rows: dataSource ? dataSource.map((row) => ({
@@ -969,9 +1021,10 @@ var CmrTable2 = CmrTable_default;
 export {
   Upload_default as CMRUpload,
   CmrButton,
-  CmrCheckbox,
+  Checkbox_default as CmrCheckbox,
   Collapse_default as CmrCollapse,
   CmrConfirmation,
+  CmrDeletionDialog,
   CmrInput,
   CmrNameDialog,
   Panel_default as CmrPanel,

package/package.json

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