cloudmr-ux 1.7.6 → 1.7.8

package/dist/index.js

@@ -1110,14 +1110,12 @@ 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_Dialog6 = __toESM(require("@mui/material/Dialog"));
 var import_DialogTitle6 = __toESM(require("@mui/material/DialogTitle"));
 var import_DialogContent6 = __toESM(require("@mui/material/DialogContent"));
 var import_DialogContentText5 = __toESM(require("@mui/material/DialogContentText"));
 var import_Box3 = __toESM(require("@mui/material/Box"));
-var import_Autocomplete = __toESM(require("@mui/material/Autocomplete"));
-var import_TextField5 = __toESM(require("@mui/material/TextField"));
-var import_Autocomplete2 = require("@mui/material/Autocomplete");
 var import_jsx_runtime18 = require("react/jsx-runtime");
 var CMRSelectUpload = (props) => {
   let [open, setOpen] = import_react8.default.useState(false);
@@ -1128,10 +1126,6 @@ var CMRSelectUpload = (props) => {
     selectFileIndex(-1);
     setOpen(true);
   };
-  const customFilter = (0, import_Autocomplete2.createFilterOptions)({
-    matchFrom: "start",
-    stringify: (option) => typeof option === "string" ? option : (option == null ? void 0 : option.fileName) || ""
-  });
   const handleClose = () => {
     setOpen(false);
   };
@@ -1144,24 +1138,37 @@ 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_DialogContent6.default, { sx: { p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
-        import_Autocomplete.default,
+        import_react_select.default,
         {
-          disabled: uploading,
-          options: props.fileSelection,
-          filterOptions: customFilter,
-          getOptionLabel: (option) => typeof option === "string" ? option : (option == null ? void 0 : option.fileName) || "",
-          noOptionsText: "No files found starting with input",
-          isOptionEqualToValue: (option, value) => option.id === value.id,
-          onChange: (event, newValue) => {
-            if (newValue) {
-              const index = props.fileSelection.findIndex((file) => file.id === newValue.id);
+          isDisabled: uploading,
+          options: props.fileSelection.map((file) => ({
+            value: file.id,
+            label: file.fileName
+          })),
+          placeholder: "Select a Stored File",
+          onChange: (selected) => {
+            if (selected) {
+              const index = props.fileSelection.findIndex((file) => file.id === selected.value);
               selectFileIndex(index);
             } else {
               selectFileIndex(-1);
             }
           },
-          renderInput: (params) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_TextField5.default, { ...params, label: "Select a Stored File" }),
-          sx: { width: "100%" }
+          styles: {
+            container: (base) => ({ ...base, width: "100%" }),
+            menu: (base) => ({
+              ...base,
+              zIndex: 9999,
+              width: "100%"
+              // Ensure the dropdown matches container width
+            }),
+            menuList: (base) => ({
+              ...base,
+              maxHeight: "300px",
+              // Optional: prevent scroll from being too short
+              overflowY: "auto"
+            })
+          }
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Box3.default, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [

package/dist/index.mjs

@@ -1062,14 +1062,12 @@ var InputNumber_default = CmrInputNumber;
 // src/CmrComponents/select-upload/SelectUpload.tsx
 import React11, { Fragment } from "react";
 import { Button as Button4 } from "@mui/material";
+import Select2 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 Autocomplete from "@mui/material/Autocomplete";
-import TextField5 from "@mui/material/TextField";
-import { createFilterOptions } from "@mui/material/Autocomplete";
 import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var CMRSelectUpload = (props) => {
   let [open, setOpen] = React11.useState(false);
@@ -1080,10 +1078,6 @@ var CMRSelectUpload = (props) => {
     selectFileIndex(-1);
     setOpen(true);
   };
-  const customFilter = createFilterOptions({
-    matchFrom: "start",
-    stringify: (option) => typeof option === "string" ? option : (option == null ? void 0 : option.fileName) || ""
-  });
   const handleClose = () => {
     setOpen(false);
   };
@@ -1096,24 +1090,37 @@ 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(DialogContent6, { sx: { p: 1 }, children: /* @__PURE__ */ jsx18(
-        Autocomplete,
+        Select2,
         {
-          disabled: uploading,
-          options: props.fileSelection,
-          filterOptions: customFilter,
-          getOptionLabel: (option) => typeof option === "string" ? option : (option == null ? void 0 : option.fileName) || "",
-          noOptionsText: "No files found starting with input",
-          isOptionEqualToValue: (option, value) => option.id === value.id,
-          onChange: (event, newValue) => {
-            if (newValue) {
-              const index = props.fileSelection.findIndex((file) => file.id === newValue.id);
+          isDisabled: uploading,
+          options: props.fileSelection.map((file) => ({
+            value: file.id,
+            label: file.fileName
+          })),
+          placeholder: "Select a Stored File",
+          onChange: (selected) => {
+            if (selected) {
+              const index = props.fileSelection.findIndex((file) => file.id === selected.value);
               selectFileIndex(index);
             } else {
               selectFileIndex(-1);
             }
           },
-          renderInput: (params) => /* @__PURE__ */ jsx18(TextField5, { ...params, label: "Select a Stored File" }),
-          sx: { width: "100%" }
+          styles: {
+            container: (base) => ({ ...base, width: "100%" }),
+            menu: (base) => ({
+              ...base,
+              zIndex: 9999,
+              width: "100%"
+              // Ensure the dropdown matches container width
+            }),
+            menuList: (base) => ({
+              ...base,
+              maxHeight: "300px",
+              // Optional: prevent scroll from being too short
+              overflowY: "auto"
+            })
+          }
         }
       ) }),
       /* @__PURE__ */ jsxs12(Box4, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cloudmr-ux",
-  "version": "1.7.6",
+  "version": "1.7.8",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",
@@ -33,6 +33,7 @@
     "antd": "^5.22.1",
     "axios": "1.10.0",
     "css-loader": "^7.1.2",
+    "react-select": "^5.10.2",
     "sass": "^1.81.0",
     "sass-loader": "^16.0.3",
     "style-loader": "^4.0.0"