cloudmr-ux 1.6.9 → 1.7.1

package/dist/index.js

@@ -1110,12 +1110,14 @@ var InputNumber_default = CmrInputNumber;
 // src/CmrComponents/select-upload/SelectUpload.tsx
 var import_react8 = __toESM(require("react"));
 var import_material12 = require("@mui/material");
-var import_Select = __toESM(require("@mui/material/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);
@@ -1129,29 +1131,43 @@ var CMRSelectUpload = (props) => {
   const handleClose = () => {
     setOpen(false);
   };
-  const handleChange = (event) => {
-    selectFileIndex(event.target.value);
-  };
   const onSet = () => {
     props.onSelected(props.fileSelection[fileIndex]);
     setOpen(false);
   };
+  const sortedFiles = [...props.fileSelection].sort(
+    (a, b) => a.fileName.localeCompare(b.fileName)
+  );
+  const stringMatchFilter = (0, import_Autocomplete2.createFilterOptions)({
+    stringify: (option) => option.fileName || "",
+    trim: true,
+    ignoreCase: true
+  });
   const selectionDialog = /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Dialog6.default, { open, onClose: handleClose, children: [
     /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DialogTitle6.default, { children: "Select or Upload" }),
     /* @__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.jsxs)(
-        import_Select.default,
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_DialogContent6.default, { sx: { p: 1 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+        import_Autocomplete.default,
         {
-          value: fileIndex,
-          onChange: handleChange,
           disabled: uploading,
-          inputProps: { "aria-label": "Without label" },
-          sx: { width: "100%" },
-          children: [
-            /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.MenuItem, { value: -1, children: props.fileSelection.length < 1 ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("em", { children: "No Stored Files" }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("em", { children: "Select a Stored File" }) }),
-            (props.fileSelection != void 0 ? props.fileSelection : []).map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_material12.MenuItem, { value: index, children: option.fileName }, index))
-          ]
+          options: sortedFiles,
+          filterOptions: (options, state) => stringMatchFilter(options, state).sort(
+            (a, b) => a.fileName.localeCompare(b.fileName)
+          ),
+          getOptionLabel: (option) => option.fileName,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          value: fileIndex === -1 ? null : props.fileSelection[fileIndex],
+          onChange: (event, newValue) => {
+            if (newValue) {
+              const index = props.fileSelection.findIndex((file) => file.id === newValue.id);
+              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%" }
         }
       ) }),
       /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_Box3.default, { sx: { pt: 2, justifyContent: "center", display: "flex", padding: "8px" }, children: [

package/dist/index.mjs

@@ -1061,13 +1061,15 @@ var InputNumber_default = CmrInputNumber;
 
 // src/CmrComponents/select-upload/SelectUpload.tsx
 import React11, { Fragment } from "react";
-import { Button as Button4, MenuItem as MenuItem3 } from "@mui/material";
-import Select2 from "@mui/material/Select";
+import { Button as Button4 } from "@mui/material";
 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);
@@ -1081,29 +1083,43 @@ var CMRSelectUpload = (props) => {
   const handleClose = () => {
     setOpen(false);
   };
-  const handleChange = (event) => {
-    selectFileIndex(event.target.value);
-  };
   const onSet = () => {
     props.onSelected(props.fileSelection[fileIndex]);
     setOpen(false);
   };
+  const sortedFiles = [...props.fileSelection].sort(
+    (a, b) => a.fileName.localeCompare(b.fileName)
+  );
+  const stringMatchFilter = createFilterOptions({
+    stringify: (option) => option.fileName || "",
+    trim: true,
+    ignoreCase: true
+  });
   const selectionDialog = /* @__PURE__ */ jsxs12(Dialog6, { open, onClose: handleClose, children: [
     /* @__PURE__ */ jsx18(DialogTitle6, { children: "Select or Upload" }),
     /* @__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__ */ jsxs12(
-        Select2,
+      /* @__PURE__ */ jsx18(DialogContent6, { sx: { p: 1 }, children: /* @__PURE__ */ jsx18(
+        Autocomplete,
         {
-          value: fileIndex,
-          onChange: handleChange,
           disabled: uploading,
-          inputProps: { "aria-label": "Without label" },
-          sx: { width: "100%" },
-          children: [
-            /* @__PURE__ */ jsx18(MenuItem3, { value: -1, children: props.fileSelection.length < 1 ? /* @__PURE__ */ jsx18("em", { children: "No Stored Files" }) : /* @__PURE__ */ jsx18("em", { children: "Select a Stored File" }) }),
-            (props.fileSelection != void 0 ? props.fileSelection : []).map((option, index) => /* @__PURE__ */ jsx18(MenuItem3, { value: index, children: option.fileName }, index))
-          ]
+          options: sortedFiles,
+          filterOptions: (options, state) => stringMatchFilter(options, state).sort(
+            (a, b) => a.fileName.localeCompare(b.fileName)
+          ),
+          getOptionLabel: (option) => option.fileName,
+          isOptionEqualToValue: (option, value) => option.id === value.id,
+          value: fileIndex === -1 ? null : props.fileSelection[fileIndex],
+          onChange: (event, newValue) => {
+            if (newValue) {
+              const index = props.fileSelection.findIndex((file) => file.id === newValue.id);
+              selectFileIndex(index);
+            } else {
+              selectFileIndex(-1);
+            }
+          },
+          renderInput: (params) => /* @__PURE__ */ jsx18(TextField5, { ...params, label: "Select a Stored File" }),
+          sx: { width: "100%" }
         }
       ) }),
       /* @__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.6.9",
+  "version": "1.7.1",
   "author": "erosmontin@gmail.com",
   "license": "MIT",
   "repository": "erosmontin/cloudmr-ux",