cloudmr-ux 2.0.2 → 2.0.3

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';
@@ -54,10 +54,11 @@ interface CmrSelectProps {
     defaultValue?: string;
     /** Layout/Styling */
     fullWidth?: boolean;
-    sx?: FormControlProps['sx'];
+    /** kept for compatibility; applied to outer wrapper */
+    sx?: any;
     className?: string;
-    /** Pass-through to MUI Select */
-    SelectProps?: Partial<SelectProps<string>>;
+    /** Pass-through bag kept for API compatibility (ignored by react-select) */
+    SelectProps?: Record<string, any>;
 }
 declare const CmrSelect: React__default.FC<CmrSelectProps>;
 

package/dist/index.js

@@ -132,8 +132,38 @@ 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,
@@ -144,49 +174,50 @@ var CmrSelect = ({
   fullWidth,
   sx,
   className,
-  SelectProps: SelectProps2
+  SelectProps
+  // kept for compatibility with old callers
 }) => {
   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,
-    {
-      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}`))
-          }
-        )
-      ]
-    }
-  );
+  const wrapperStyle = {
+    minWidth: 200,
+    maxWidth: 400,
+    width: fullWidth ? "100%" : "auto",
+    ...sx
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: className ?? "dropdown-select", style: wrapperStyle, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("label", { htmlFor: id, style: { display: "block", marginBottom: 4, color: "rgba(0,0,0,0.6)" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      import_react_select.default,
+      {
+        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 +327,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 +341,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 +658,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 +674,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 +779,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 +795,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 +819,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 +874,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 +1026,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 +1069,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 +1156,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 +1187,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 +1226,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 +1249,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 +1281,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,14 +83,39 @@ 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 { useEffect, useId, useMemo, useState as useState2 } from "react";
+import ReactSelect from "react-select";
 import { jsx as jsx5, jsxs as jsxs2 } 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,
@@ -101,49 +126,50 @@ var CmrSelect = ({
   fullWidth,
   sx,
   className,
-  SelectProps: SelectProps2
+  SelectProps
+  // kept for compatibility with old callers
 }) => {
   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,
-    {
-      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}`))
-          }
-        )
-      ]
-    }
-  );
+  const wrapperStyle = {
+    minWidth: 200,
+    maxWidth: 400,
+    width: fullWidth ? "100%" : "auto",
+    ...sx
+  };
+  return /* @__PURE__ */ jsxs2("div", { className: className ?? "dropdown-select", style: wrapperStyle, children: [
+    /* @__PURE__ */ jsx5("label", { htmlFor: id, style: { display: "block", marginBottom: 4, color: "rgba(0,0,0,0.6)" }, children: label }),
+    /* @__PURE__ */ jsx5(
+      ReactSelect,
+      {
+        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;
 
@@ -267,7 +293,7 @@ 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";
@@ -584,7 +610,7 @@ 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))
               }
             )
           ] }),
@@ -1114,7 +1140,7 @@ 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";
@@ -1152,7 +1178,7 @@ var CMRSelectUpload = (props) => {
     /* @__PURE__ */ jsxs12(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,

package/package.json

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