cloudmr-ux 2.0.2 → 2.0.4

package/dist/index.css

@@ -66,10 +66,6 @@
 }
 
 /* src/CmrComponents/CmrSelect/CmrSelect.css */
-.dropdown-select .MuiSelect-select.MuiSelect-placeholder {
-  text-align: center;
-  justify-content: center;
-}
 
 /* src/CmrComponents/collapse/Collapse.css */
 .collapse-bar {

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ButtonProps, FormControlProps, SelectProps, SxProps, Theme } from '@mui/material';
+import { ButtonProps, 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';
@@ -45,7 +45,6 @@ interface Option {
 }
 interface CmrSelectProps {
     options: Option[];
-    label: string;
     disabled?: boolean;
     /** Controlled usage (optional) */
     value?: string;
@@ -54,10 +53,10 @@ interface CmrSelectProps {
     defaultValue?: string;
     /** Layout/Styling */
     fullWidth?: boolean;
-    sx?: FormControlProps['sx'];
+    sx?: any;
     className?: string;
-    /** Pass-through to MUI Select */
-    SelectProps?: Partial<SelectProps<string>>;
+    /** Pass-through kept for compatibility */
+    SelectProps?: Record<string, any>;
 }
 declare const CmrSelect: React__default.FC<CmrSelectProps>;
 

package/dist/index.js

@@ -132,61 +132,86 @@ var CmrRadioGroup_default = CmrRadioGroup;
 
 // src/CmrComponents/CmrSelect/CmrSelect.tsx
 var import_react2 = require("react");
-var import_material5 = require("@mui/material");
+var import_react_select = __toESM(require("react-select"));
 var import_jsx_runtime5 = require("react/jsx-runtime");
+var baseStyles = {
+  control: (base, state) => ({
+    ...base,
+    minHeight: 40,
+    borderColor: state.isFocused ? "#580F8B" : base.borderColor,
+    boxShadow: state.isFocused ? "0 0 0 1px #580F8B" : "none",
+    "&:hover": { borderColor: "#580F8B" },
+    fontFamily: "Inter, Roboto, Helvetica, Arial, sans-serif",
+    borderRadius: 4
+  }),
+  placeholder: (base) => ({
+    ...base,
+    color: "rgba(0,0,0,0.6)"
+  }),
+  singleValue: (base) => ({
+    ...base,
+    color: "#580F8B",
+    fontWeight: 400,
+    fontFamily: "Inter, Roboto, Helvetica, Arial, sans-serif"
+  }),
+  option: (base, state) => ({
+    ...base,
+    backgroundColor: state.isFocused || state.isSelected ? "#F3E5F5" : "white",
+    color: "#000",
+    fontFamily: "Inter, Roboto, Helvetica, Arial, sans-serif",
+    cursor: state.isDisabled ? "not-allowed" : "pointer"
+  }),
+  menuPortal: (base) => ({ ...base, zIndex: 2e3 }),
+  menu: (base) => ({ ...base, zIndex: 1300 })
+};
 var CmrSelect = ({
   options,
-  label,
   disabled,
   value,
   onChange,
   defaultValue = "",
   fullWidth,
   sx,
-  className,
-  SelectProps: SelectProps2
+  className
 }) => {
   const isControlled = value !== void 0;
   const [internal, setInternal] = (0, import_react2.useState)(defaultValue);
-  const current = isControlled ? value : internal;
+  const currentValue = isControlled ? value : internal;
   (0, import_react2.useEffect)(() => {
     if (isControlled)
       setInternal(value);
   }, [isControlled, value]);
   const id = (0, import_react2.useId)();
-  const labelId = `${id}-label`;
-  const selectId = `${id}-select`;
-  const handleChange = (e) => {
-    const next = e.target.value;
+  const rsValue = (0, import_react2.useMemo)(
+    () => options.find((o) => o.value === currentValue) ?? null,
+    [options, currentValue]
+  );
+  const handleChange = (opt) => {
+    const next = (opt == null ? void 0 : opt.value) ?? "";
     if (!isControlled)
       setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    import_material5.FormControl,
+  const wrapperStyle = {
+    minWidth: 200,
+    maxWidth: 400,
+    width: fullWidth ? "100%" : "auto",
+    ...sx
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: className ?? "dropdown-select", style: wrapperStyle, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    import_react_select.default,
     {
-      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,
-            id: selectId,
-            value: current,
-            label,
-            onChange: handleChange,
-            MenuProps: { classes: { paper: "custom-dropdown" }, ...SelectProps2 == null ? void 0 : SelectProps2.MenuProps },
-            ...SelectProps2,
-            children: options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_material5.MenuItem, { value: opt.value, disabled: !!opt.disabled, children: opt.label }, `${opt.value}-${opt.label}`))
-          }
-        )
-      ]
+      inputId: id,
+      isDisabled: !!disabled,
+      options: options.map((o) => ({ ...o, isDisabled: o.disabled })),
+      value: rsValue,
+      onChange: handleChange,
+      placeholder: "Select",
+      isClearable: true,
+      styles: baseStyles,
+      menuPortalTarget: document.body
     }
-  );
+  ) });
 };
 var CmrSelect_default = CmrSelect;
 
@@ -296,7 +321,7 @@ var Panel_default = CmrPanel;
 
 // src/CmrComponents/upload/Upload.tsx
 var import_react4 = __toESM(require("react"));
-var import_material7 = require("@mui/material");
+var import_material6 = require("@mui/material");
 var import_Upload3 = __toESM(require("@mui/icons-material/Upload"));
 
 // src/CmrComponents/upload/UploadWindow.tsx
@@ -310,7 +335,7 @@ var import_DialogContentText = __toESM(require("@mui/material/DialogContentText"
 var import_DialogTitle = __toESM(require("@mui/material/DialogTitle"));
 var import_Typography = __toESM(require("@mui/material/Typography"));
 var import_Box = __toESM(require("@mui/material/Box"));
-var import_material6 = require("@mui/material");
+var import_material5 = require("@mui/material");
 
 // src/CmrComponents/label/Label.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
@@ -627,7 +652,7 @@ function CmrUploadWindow({
                 defaultValue: "s3",
                 helperText: "Upstream Storage Location",
                 variant: "standard",
-                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.MenuItem, { value: option.value, children: option.label }, option.value))
+                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material5.MenuItem, { value: option.value, children: option.label }, option.value))
               }
             )
           ] }),
@@ -643,7 +668,7 @@ function CmrUploadWindow({
                 variant: "standard"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Collapse, { in: infoOpen, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material6.Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
+            /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material5.Collapse, { in: infoOpen, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_material5.Alert, { severity: infoStyle, sx: { m: 1 }, children: warningText }) })
           ] })
         ] })
       ] }),
@@ -748,7 +773,7 @@ var CmrUpload = (props) => {
   }
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_react4.default.Fragment, { children: [
     !uploading ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
-      import_material7.Button,
+      import_material6.Button,
       {
         fullWidth: props.fullWidth,
         style: props.style,
@@ -764,7 +789,7 @@ var CmrUpload = (props) => {
           "                "
         ]
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material7.Button, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
+    ) : /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_material6.Button, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
       "Uploading ",
       progress,
       "%"
@@ -788,7 +813,7 @@ var Upload_default = CmrUpload;
 
 // src/CmrComponents/rename/edit.tsx
 var React6 = __toESM(require("react"));
-var import_material8 = require("@mui/material");
+var import_material7 = require("@mui/material");
 var import_TextField2 = __toESM(require("@mui/material/TextField"));
 var import_Dialog2 = __toESM(require("@mui/material/Dialog"));
 var import_DialogActions2 = __toESM(require("@mui/material/DialogActions"));
@@ -843,7 +868,7 @@ function CmrNameDialog(props) {
       fullWidth: true,
       maxWidth: "xs",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogTitle2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material8.Typography, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(import_DialogTitle2.default, { children: /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(import_material7.Typography, { children: [
           " Rename the File ",
           originalName,
           " as:"
@@ -995,7 +1020,7 @@ 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_material8 = require("@mui/material");
 var import_react6 = require("react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
 function CmrEditConfirmation({
@@ -1038,7 +1063,7 @@ function CmrEditConfirmation({
           fullWidth: true,
           variant: "standard",
           InputProps: {
-            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material9.InputAdornment, { position: "end", sx: { whiteSpace: "nowrap" }, children: suffix })
+            endAdornment: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_material8.InputAdornment, { position: "end", sx: { whiteSpace: "nowrap" }, children: suffix })
           },
           defaultValue: text,
           onChange: (e) => setText(e.target.value)
@@ -1125,18 +1150,18 @@ function CmrTabs(props) {
 }
 
 // src/CmrComponents/checkbox/Checkbox.tsx
+var import_material9 = require("@mui/material");
 var import_material10 = require("@mui/material");
-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_runtime16.jsx)(
-    import_material11.FormControlLabel,
+    import_material10.FormControlLabel,
     {
       disabled: props.disabled,
       style: props.style,
       className: props.className,
-      control: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material10.Checkbox, { style: props.style, checked: props.checked, defaultChecked, onChange }),
+      control: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_material9.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"
@@ -1156,8 +1181,8 @@ var InputNumber_default = CmrInputNumber;
 
 // src/CmrComponents/select-upload/SelectUpload.tsx
 var import_react8 = __toESM(require("react"));
-var import_material12 = require("@mui/material");
-var import_react_select = __toESM(require("react-select"));
+var import_material11 = require("@mui/material");
+var import_react_select2 = __toESM(require("react-select"));
 var import_Dialog6 = __toESM(require("@mui/material/Dialog"));
 var import_DialogTitle6 = __toESM(require("@mui/material/DialogTitle"));
 var import_DialogContent6 = __toESM(require("@mui/material/DialogContent"));
@@ -1195,7 +1220,7 @@ var CMRSelectUpload = (props) => {
     /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_DialogContent6.default, { sx: { width: 520 }, children: [
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DialogContentText5.default, { sx: { pl: 1, pr: 1, pb: 0 }, children: uploading ? "Please wait for the upload to finish." : "" }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_Box3.default, { sx: { p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_react_select.default,
+        import_react_select2.default,
         {
           classNamePrefix: "cmr-select",
           isDisabled: uploading,
@@ -1218,8 +1243,8 @@ var CMRSelectUpload = (props) => {
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Box3.default, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.Button, { fullWidth: true, sx: { marginRight: "8px" }, variant: "outlined", onClick: handleClose, children: " Cancel" }),
-        fileIndex !== -1 && !uploading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.Button, { fullWidth: true, variant: "contained", onClick: onSet, children: "OK" }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material11.Button, { fullWidth: true, sx: { marginRight: "8px" }, variant: "outlined", onClick: handleClose, children: " Cancel" }),
+        fileIndex !== -1 && !uploading && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material11.Button, { fullWidth: true, variant: "contained", onClick: onSet, children: "OK" }),
         fileIndex == -1 && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           Upload_default,
           {
@@ -1250,12 +1275,12 @@ var CMRSelectUpload = (props) => {
     ] })
   ] });
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react8.Fragment, { children: [
-    uploading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material12.Button, { variant: "contained", style: { ...props.style, textTransform: "none" }, sx: { overflowWrap: "inherit" }, color: "primary", disabled: uploading, children: [
+    uploading ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_material11.Button, { variant: "contained", style: { ...props.style, textTransform: "none" }, sx: { overflowWrap: "inherit" }, color: "primary", disabled: uploading, children: [
       "Uploading ",
       progress,
       "%"
     ] }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-      import_material12.Button,
+      import_material11.Button,
       {
         variant: props.chosenFile == void 0 ? "contained" : "outlined",
         color: "info",

package/dist/index.mjs

@@ -83,67 +83,87 @@ var CmrRadioGroup = ({
 var CmrRadioGroup_default = CmrRadioGroup;
 
 // src/CmrComponents/CmrSelect/CmrSelect.tsx
-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";
+import { useEffect, useId, useMemo, useState as useState2 } from "react";
+import ReactSelect from "react-select";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var baseStyles = {
+  control: (base, state) => ({
+    ...base,
+    minHeight: 40,
+    borderColor: state.isFocused ? "#580F8B" : base.borderColor,
+    boxShadow: state.isFocused ? "0 0 0 1px #580F8B" : "none",
+    "&:hover": { borderColor: "#580F8B" },
+    fontFamily: "Inter, Roboto, Helvetica, Arial, sans-serif",
+    borderRadius: 4
+  }),
+  placeholder: (base) => ({
+    ...base,
+    color: "rgba(0,0,0,0.6)"
+  }),
+  singleValue: (base) => ({
+    ...base,
+    color: "#580F8B",
+    fontWeight: 400,
+    fontFamily: "Inter, Roboto, Helvetica, Arial, sans-serif"
+  }),
+  option: (base, state) => ({
+    ...base,
+    backgroundColor: state.isFocused || state.isSelected ? "#F3E5F5" : "white",
+    color: "#000",
+    fontFamily: "Inter, Roboto, Helvetica, Arial, sans-serif",
+    cursor: state.isDisabled ? "not-allowed" : "pointer"
+  }),
+  menuPortal: (base) => ({ ...base, zIndex: 2e3 }),
+  menu: (base) => ({ ...base, zIndex: 1300 })
+};
 var CmrSelect = ({
   options,
-  label,
   disabled,
   value,
   onChange,
   defaultValue = "",
   fullWidth,
   sx,
-  className,
-  SelectProps: SelectProps2
+  className
 }) => {
   const isControlled = value !== void 0;
   const [internal, setInternal] = useState2(defaultValue);
-  const current = isControlled ? value : internal;
+  const currentValue = isControlled ? value : internal;
   useEffect(() => {
     if (isControlled)
       setInternal(value);
   }, [isControlled, value]);
   const id = useId();
-  const labelId = `${id}-label`;
-  const selectId = `${id}-select`;
-  const handleChange = (e) => {
-    const next = e.target.value;
+  const rsValue = useMemo(
+    () => options.find((o) => o.value === currentValue) ?? null,
+    [options, currentValue]
+  );
+  const handleChange = (opt) => {
+    const next = (opt == null ? void 0 : opt.value) ?? "";
     if (!isControlled)
       setInternal(next);
     onChange == null ? void 0 : onChange(next);
   };
-  return /* @__PURE__ */ jsxs2(
-    FormControl2,
+  const wrapperStyle = {
+    minWidth: 200,
+    maxWidth: 400,
+    width: fullWidth ? "100%" : "auto",
+    ...sx
+  };
+  return /* @__PURE__ */ jsx5("div", { className: className ?? "dropdown-select", style: wrapperStyle, children: /* @__PURE__ */ jsx5(
+    ReactSelect,
     {
-      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,
-            id: selectId,
-            value: current,
-            label,
-            onChange: handleChange,
-            MenuProps: { classes: { paper: "custom-dropdown" }, ...SelectProps2 == null ? void 0 : SelectProps2.MenuProps },
-            ...SelectProps2,
-            children: options.map((opt) => /* @__PURE__ */ jsx5(MenuItem, { value: opt.value, disabled: !!opt.disabled, children: opt.label }, `${opt.value}-${opt.label}`))
-          }
-        )
-      ]
+      inputId: id,
+      isDisabled: !!disabled,
+      options: options.map((o) => ({ ...o, isDisabled: o.disabled })),
+      value: rsValue,
+      onChange: handleChange,
+      placeholder: "Select",
+      isClearable: true,
+      styles: baseStyles,
+      menuPortalTarget: document.body
     }
-  );
+  ) });
 };
 var CmrSelect_default = CmrSelect;
 
@@ -211,7 +231,7 @@ var Collapse_default = CmrCollapse;
 // src/CmrComponents/panel/Panel.tsx
 import ArrowDropUpIcon from "@mui/icons-material/ArrowDropUp";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
-import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
 var CmrPanel = function(props) {
   var _a, _b;
   let { expanded, onToggle } = props;
@@ -219,8 +239,8 @@ var CmrPanel = function(props) {
     if (onToggle)
       onToggle(props.panelKey);
   };
-  return /* @__PURE__ */ jsxs3("div", { className: `card ${props.className}`, children: [
-    /* @__PURE__ */ jsx7("div", { className: "card-header", style: { background: "white", display: props.header == void 0 ? "none" : void 0 }, children: /* @__PURE__ */ jsxs3("div", { className: "row align-items-center", children: [
+  return /* @__PURE__ */ jsxs2("div", { className: `card ${props.className}`, children: [
+    /* @__PURE__ */ jsx7("div", { className: "card-header", style: { background: "white", display: props.header == void 0 ? "none" : void 0 }, children: /* @__PURE__ */ jsxs2("div", { className: "row align-items-center", children: [
       /* @__PURE__ */ jsx7("div", { className: "col", children: props.header }),
       onToggle && /* @__PURE__ */ jsx7("div", { className: "col text-end", children: /* @__PURE__ */ jsx7(
         "span",
@@ -267,13 +287,13 @@ import DialogContentText from "@mui/material/DialogContentText";
 import DialogTitle from "@mui/material/DialogTitle";
 import Typography from "@mui/material/Typography";
 import Box from "@mui/material/Box";
-import { Alert, Collapse, MenuItem as MenuItem2 } from "@mui/material";
+import { Alert, Collapse, MenuItem } from "@mui/material";
 
 // src/CmrComponents/label/Label.tsx
-import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
 var CmrLabel = (props) => {
   const { children, required = false } = props;
-  return /* @__PURE__ */ jsxs4("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
+  return /* @__PURE__ */ jsxs3("label", { className: "cmr-label", style: { fontSize: "16px", ...props.style }, children: [
     children,
     required && /* @__PURE__ */ jsx8("span", { className: "asterik", children: "*" })
   ] });
@@ -281,7 +301,7 @@ var CmrLabel = (props) => {
 var Label_default = CmrLabel;
 
 // src/CmrComponents/upload/UploadWindow.tsx
-import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
 function CmrUploadWindow({
   upload,
   open,
@@ -513,11 +533,11 @@ function CmrUploadWindow({
     const fileElem = document.getElementById("file-window");
     loadFiles(fileElem.files);
   };
-  return /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsxs5(Dialog, { open, onClose: handleClose, children: [
+  return /* @__PURE__ */ jsx9("div", { children: /* @__PURE__ */ jsxs4(Dialog, { open, onClose: handleClose, children: [
     /* @__PURE__ */ jsx9(DialogTitle, { children: "File Upload" }),
-    /* @__PURE__ */ jsxs5(DialogContent, { children: [
+    /* @__PURE__ */ jsxs4(DialogContent, { children: [
       /* @__PURE__ */ jsx9(DialogContentText, {}),
-      /* @__PURE__ */ jsxs5(DialogContent, { dividers: true, children: [
+      /* @__PURE__ */ jsxs4(DialogContent, { dividers: true, children: [
         /* @__PURE__ */ jsx9(
           Box,
           {
@@ -528,7 +548,7 @@ function CmrUploadWindow({
               borderRadius: "5pt",
               borderColor: uploadBoxWarning == void 0 ? "lightGray" : "#BA3C3C"
             },
-            children: /* @__PURE__ */ jsx9(Typography, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ jsxs5(
+            children: /* @__PURE__ */ jsx9(Typography, { component: "div", style: { height: "100%" }, children: /* @__PURE__ */ jsxs4(
               Box,
               {
                 style: {
@@ -541,7 +561,7 @@ function CmrUploadWindow({
                 onClick: fileInputClick,
                 ref: fileInput,
                 children: [
-                  /* @__PURE__ */ jsxs5(Typography, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
+                  /* @__PURE__ */ jsxs4(Typography, { variant: "body1", align: "center", style: { marginTop: "auto" }, children: [
                     "Drag & Drop or Click to Upload Your File Here ",
                     /* @__PURE__ */ jsx9("sup", { children: "*" })
                   ] }),
@@ -562,8 +582,8 @@ function CmrUploadWindow({
             onChange: loadSelectedFiles
           }
         ),
-        /* @__PURE__ */ jsxs5(Box, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
-          /* @__PURE__ */ jsxs5("div", { children: [
+        /* @__PURE__ */ jsxs4(Box, { component: "form", sx: { "& .MuiTextField-root": { m: 2, width: "25ch", mb: 0 } }, children: [
+          /* @__PURE__ */ jsxs4("div", { children: [
             template.showFileName && /* @__PURE__ */ jsx9(
               TextField,
               {
@@ -584,11 +604,11 @@ function CmrUploadWindow({
                 defaultValue: "s3",
                 helperText: "Upstream Storage Location",
                 variant: "standard",
-                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ jsx9(MenuItem2, { value: option.value, children: option.label }, option.value))
+                children: [{ value: "s3", label: "S3" }].map((option) => /* @__PURE__ */ jsx9(MenuItem, { value: option.value, children: option.label }, option.value))
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs5("div", { children: [
+          /* @__PURE__ */ jsxs4("div", { children: [
             template.showFileSize && /* @__PURE__ */ jsx9(
               TextField,
               {
@@ -604,7 +624,7 @@ function CmrUploadWindow({
           ] })
         ] })
       ] }),
-      /* @__PURE__ */ jsxs5(DialogActions, { children: [
+      /* @__PURE__ */ jsxs4(DialogActions, { children: [
         /* @__PURE__ */ jsx9(
           Button2,
           {
@@ -630,7 +650,7 @@ function CmrUploadWindow({
 
 // src/CmrComponents/upload/Upload.tsx
 import axios from "axios";
-import { jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
 var CmrUpload = (props) => {
   let [open, setOpen] = useState4(false);
   let [uploading, setUploading] = useState4(false);
@@ -703,8 +723,8 @@ var CmrUpload = (props) => {
       return props.uploadFailed();
     return 0;
   }
-  return /* @__PURE__ */ jsxs6(React5.Fragment, { children: [
-    !uploading ? /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs5(React5.Fragment, { children: [
+    !uploading ? /* @__PURE__ */ jsxs5(
       Button3,
       {
         fullWidth: props.fullWidth,
@@ -721,7 +741,7 @@ var CmrUpload = (props) => {
           "                "
         ]
       }
-    ) : /* @__PURE__ */ jsxs6(Button3, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
+    ) : /* @__PURE__ */ jsxs5(Button3, { fullWidth: props.fullWidth, style: props.style, variant: "contained", sx: { overflowWrap: "inherit" }, color: "primary", disabled: true, children: [
       "Uploading ",
       progress,
       "%"
@@ -752,7 +772,7 @@ import DialogActions2 from "@mui/material/DialogActions";
 import DialogContent2 from "@mui/material/DialogContent";
 import DialogTitle2 from "@mui/material/DialogTitle";
 import { useEffect as useEffect2 } from "react";
-import { jsx as jsx11, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx11, jsxs as jsxs6 } from "react/jsx-runtime";
 function CmrNameDialog(props) {
   let { originalName, open, setOpen } = props;
   const [helperText, setHelperText] = React6.useState("");
@@ -792,7 +812,7 @@ function CmrNameDialog(props) {
       setHelperText("");
     }
   };
-  return /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsx11("div", { children: /* @__PURE__ */ jsxs6(
     Dialog2,
     {
       open,
@@ -800,7 +820,7 @@ function CmrNameDialog(props) {
       fullWidth: true,
       maxWidth: "xs",
       children: [
-        /* @__PURE__ */ jsx11(DialogTitle2, { children: /* @__PURE__ */ jsxs7(Typography2, { children: [
+        /* @__PURE__ */ jsx11(DialogTitle2, { children: /* @__PURE__ */ jsxs6(Typography2, { children: [
           " Rename the File ",
           originalName,
           " as:"
@@ -823,7 +843,7 @@ function CmrNameDialog(props) {
             helperText
           }
         ) }),
-        /* @__PURE__ */ jsxs7(DialogActions2, { children: [
+        /* @__PURE__ */ jsxs6(DialogActions2, { children: [
           /* @__PURE__ */ jsx11(CmrButton_default, { variant: "outlined", onClick: handleClose, children: "Cancel" }),
           /* @__PURE__ */ jsx11(CmrButton_default, { variant: "contained", color: "primary", onClick: handleConfirm, children: "Confirm" })
         ] })
@@ -838,7 +858,7 @@ import DialogActions3 from "@mui/material/DialogActions";
 import DialogContent3 from "@mui/material/DialogContent";
 import DialogContentText2 from "@mui/material/DialogContentText";
 import DialogTitle3 from "@mui/material/DialogTitle";
-import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
 function CmrConfirmation({
   name,
   message,
@@ -866,11 +886,11 @@ function CmrConfirmation({
     cancelCallback();
     handleClose();
   };
-  return /* @__PURE__ */ jsxs8(Dialog3, { open, onClose: handleClose, children: [
+  return /* @__PURE__ */ jsxs7(Dialog3, { open, onClose: handleClose, children: [
     /* @__PURE__ */ jsx12(DialogTitle3, { children: name ? name : "Confirmation" }),
-    /* @__PURE__ */ jsxs8(DialogContent3, { sx: { width }, children: [
+    /* @__PURE__ */ jsxs7(DialogContent3, { sx: { width }, children: [
       /* @__PURE__ */ jsx12(DialogContentText2, { alignContent: "center", children: message }),
-      /* @__PURE__ */ jsxs8(DialogActions3, { className: "mt-4", children: [
+      /* @__PURE__ */ jsxs7(DialogActions3, { className: "mt-4", children: [
         cancellable && /* @__PURE__ */ jsx12(CmrButton_default, { variant: "outlined", onClick: handleCancel, children: cancelText }),
         extraButtons.map((btn, idx) => /* @__PURE__ */ jsx12(
           CmrButton_default,
@@ -899,7 +919,7 @@ 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";
+import { jsx as jsx13, jsxs as jsxs8 } from "react/jsx-runtime";
 function CmrDeletionDialog(props) {
   const [open, setOpen] = React7.useState(true);
   const [text, setText] = React7.useState("");
@@ -918,9 +938,9 @@ function CmrDeletionDialog(props) {
   const handleTextFieldChange = (e) => {
     setText(e.target.value);
   };
-  return /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsxs9(Dialog4, { open, onClose: handleClose, children: [
+  return /* @__PURE__ */ jsx13("div", { children: /* @__PURE__ */ jsxs8(Dialog4, { open, onClose: handleClose, children: [
     /* @__PURE__ */ jsx13(DialogTitle4, { children: "Confirmation" }),
-    /* @__PURE__ */ jsxs9(DialogContent4, { children: [
+    /* @__PURE__ */ jsxs8(DialogContent4, { children: [
       /* @__PURE__ */ jsx13(DialogContentText3, { children: "To delete the files, please type your full name below and confirm." }),
       /* @__PURE__ */ jsx13(
         TextField3,
@@ -937,7 +957,7 @@ function CmrDeletionDialog(props) {
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs9(DialogActions4, { children: [
+    /* @__PURE__ */ jsxs8(DialogActions4, { children: [
       /* @__PURE__ */ jsx13("button", { className: "btn btn-secondary", onClick: handleClose, children: "Cancel" }),
       /* @__PURE__ */ jsx13("button", { className: "btn btn-danger", onClick: handleConfirm, children: "Confirm" })
     ] })
@@ -954,7 +974,7 @@ import DialogContentText4 from "@mui/material/DialogContentText";
 import DialogTitle5 from "@mui/material/DialogTitle";
 import { InputAdornment } from "@mui/material";
 import { useEffect as useEffect3 } from "react";
-import { jsx as jsx14, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function CmrEditConfirmation({
   name,
   message,
@@ -985,9 +1005,9 @@ function CmrEditConfirmation({
     cancelCallback(text + suffix);
     handleClose();
   };
-  return /* @__PURE__ */ jsxs10(Dialog5, { maxWidth: "xs", fullWidth: true, open, onClose: handleCancel, children: [
+  return /* @__PURE__ */ jsxs9(Dialog5, { maxWidth: "xs", fullWidth: true, open, onClose: handleCancel, children: [
     /* @__PURE__ */ jsx14(DialogTitle5, { children: name ? name : "Confirmation" }),
-    /* @__PURE__ */ jsxs10(DialogContent5, { children: [
+    /* @__PURE__ */ jsxs9(DialogContent5, { children: [
       /* @__PURE__ */ jsx14(DialogContentText4, { alignContent: "center", children: message }),
       /* @__PURE__ */ jsx14(DialogActions5, { children: /* @__PURE__ */ jsx14(
         TextField4,
@@ -1001,7 +1021,7 @@ function CmrEditConfirmation({
           onChange: (e) => setText(e.target.value)
         }
       ) }),
-      /* @__PURE__ */ jsxs10(DialogActions5, { children: [
+      /* @__PURE__ */ jsxs9(DialogActions5, { children: [
         cancellable && /* @__PURE__ */ jsx14(CmrButton_default, { variant: "outlined", onClick: handleCancel, children: "Cancel" }),
         /* @__PURE__ */ jsx14(CmrButton_default, { variant: "contained", color, onClick: handleConfirm, children: "Confirm" })
       ] })
@@ -1017,7 +1037,7 @@ 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 jsx15, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function CustomTabPanel(props) {
   const { children, value, index, ...other } = props;
   return /* @__PURE__ */ jsx15(
@@ -1045,7 +1065,7 @@ function CmrTabs(props) {
     if (props.onTabSelected)
       props.onTabSelected(newValue);
   };
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs10(
     Container,
     {
       maxWidth: "lg",
@@ -1114,13 +1134,13 @@ var InputNumber_default = CmrInputNumber;
 // src/CmrComponents/select-upload/SelectUpload.tsx
 import React10, { Fragment } from "react";
 import { Button as Button4 } from "@mui/material";
-import Select2 from "react-select";
+import Select from "react-select";
 import Dialog6 from "@mui/material/Dialog";
 import DialogTitle6 from "@mui/material/DialogTitle";
 import DialogContent6 from "@mui/material/DialogContent";
 import DialogContentText5 from "@mui/material/DialogContentText";
 import Box4 from "@mui/material/Box";
-import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx18, jsxs as jsxs11 } from "react/jsx-runtime";
 function checkExtension(filename, allowed) {
   if (!filename || !allowed)
     return true;
@@ -1147,12 +1167,12 @@ var CMRSelectUpload = (props) => {
     props.onSelected(props.fileSelection[fileIndex]);
     setOpen(false);
   };
-  const selectionDialog = /* @__PURE__ */ jsxs12(Dialog6, { open, onClose: handleClose, children: [
+  const selectionDialog = /* @__PURE__ */ jsxs11(Dialog6, { open, onClose: handleClose, children: [
     /* @__PURE__ */ jsx18(DialogTitle6, { children: "Select or Upload" }),
-    /* @__PURE__ */ jsxs12(DialogContent6, { sx: { width: 520 }, children: [
+    /* @__PURE__ */ jsxs11(DialogContent6, { sx: { width: 520 }, children: [
       /* @__PURE__ */ jsx18(DialogContentText5, { sx: { pl: 1, pr: 1, pb: 0 }, children: uploading ? "Please wait for the upload to finish." : "" }),
       /* @__PURE__ */ jsx18(Box4, { sx: { p: 1 }, children: /* @__PURE__ */ jsx18(
-        Select2,
+        Select,
         {
           classNamePrefix: "cmr-select",
           isDisabled: uploading,
@@ -1174,7 +1194,7 @@ var CMRSelectUpload = (props) => {
           styles: props.selectStyles
         }
       ) }),
-      /* @__PURE__ */ jsxs12(Box4, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [
+      /* @__PURE__ */ jsxs11(Box4, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [
         /* @__PURE__ */ jsx18(Button4, { fullWidth: true, sx: { marginRight: "8px" }, variant: "outlined", onClick: handleClose, children: " Cancel" }),
         fileIndex !== -1 && !uploading && /* @__PURE__ */ jsx18(Button4, { fullWidth: true, variant: "contained", onClick: onSet, children: "OK" }),
         fileIndex == -1 && /* @__PURE__ */ jsx18(
@@ -1206,8 +1226,8 @@ var CMRSelectUpload = (props) => {
       ] })
     ] })
   ] });
-  return /* @__PURE__ */ jsxs12(Fragment, { children: [
-    uploading ? /* @__PURE__ */ jsxs12(Button4, { variant: "contained", style: { ...props.style, textTransform: "none" }, sx: { overflowWrap: "inherit" }, color: "primary", disabled: uploading, children: [
+  return /* @__PURE__ */ jsxs11(Fragment, { children: [
+    uploading ? /* @__PURE__ */ jsxs11(Button4, { variant: "contained", style: { ...props.style, textTransform: "none" }, sx: { overflowWrap: "inherit" }, color: "primary", disabled: uploading, children: [
       "Uploading ",
       progress,
       "%"

package/package.json

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