tp-react-elements-dev 1.10.8 → 1.10.10

package/dist/index.js

@@ -54032,12 +54032,12 @@ function makeStyles(stylesOrCreator, options = {}) {
   return useStyles;
 }
 
-const ITEM_HEIGHT = 48;
-const ITEM_PADDING_TOP = 3;
-const MenuProps = {
+const ITEM_HEIGHT$1 = 48;
+const ITEM_PADDING_TOP$1 = 3;
+const MenuProps$1 = {
     PaperProps: {
         style: {
-            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
+            maxHeight: ITEM_HEIGHT$1 * 5.5 + ITEM_PADDING_TOP$1,
             // width: 250,
         },
     },
@@ -54052,7 +54052,7 @@ makeStyles((theme) => ({
         fontSize: "11px",
     },
 }));
-const extractValuesToArray = (inputString) => {
+const extractValuesToArray$1 = (inputString) => {
     const valuesArray = inputString === null || inputString === void 0 ? void 0 : inputString.split(",");
     const trimmedArray = valuesArray === null || valuesArray === void 0 ? void 0 : valuesArray.map((value) => value.trim());
     return trimmedArray;
@@ -54061,7 +54061,7 @@ function MultiSelectV1({ props, variant }) {
     var _a;
     console.log(props, "ksjh");
     const [personName, setPersonName] = React__namespace.useState(props.getValues(props.item.name)
-        ? extractValuesToArray(props.getValues(props.item.name))
+        ? extractValuesToArray$1(props.getValues(props.item.name))
         : []);
     const [searchText, setSearchText] = React$1.useState("");
     const options = (_a = props.item) === null || _a === void 0 ? void 0 : _a.options;
@@ -54122,7 +54122,7 @@ function MultiSelectV1({ props, variant }) {
                             fontSize: "5px !important",
                         },
                     }, disabled: props.item.disable, value: props.getValues(props.item.name)
-                        ? extractValuesToArray(props.getValues(props.item.name))
+                        ? extractValuesToArray$1(props.getValues(props.item.name))
                         : [], onChange: handleChange, onOpen: () => {
                         setTimeout(() => {
                             var _a;
@@ -54136,7 +54136,7 @@ function MultiSelectV1({ props, variant }) {
                         ((_a = props === null || props === void 0 ? void 0 : props.item) === null || _a === void 0 ? void 0 : _a.onCloseMenu) && ((_b = props === null || props === void 0 ? void 0 : props.item) === null || _b === void 0 ? void 0 : _b.onCloseMenu());
                     }, input: jsxRuntimeExports.jsx(OutlinedInput, { label: variant !== "standard" ? props.item.label : '' }), renderValue: (selected) => (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: selectedValues }, { children: selectedOptions.length > 3
                             ? selectedOptions.length + " Selected"
-                            : selectedValues }))), MenuProps: MenuProps, autoFocus: false }, { children: [jsxRuntimeExports.jsx(Box, Object.assign({ sx: {
+                            : selectedValues }))), MenuProps: MenuProps$1, autoFocus: false }, { children: [jsxRuntimeExports.jsx(Box, Object.assign({ sx: {
                                 width: "100%",
                                 position: "sticky",
                                 top: "0px",
@@ -63070,12 +63070,143 @@ const SessionTimeOut = ({ sessionTime, handleSubmitSession, onSessionExpire, han
     return (jsxRuntimeExports.jsx(jsxRuntimeExports.Fragment, { children: jsxRuntimeExports.jsx(ConfirmationDialog, { openConfirmDialog: openConfirmModal, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: sessionMessage, Submit: SubmitButtonName, buttonStyleProps: buttonStyleProps }) }));
 };
 
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 3;
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
+            // width: 250,
+        },
+    },
+    autoFocus: false,
+    disableAutoFocusItem: true,
+};
+makeStyles((theme) => ({
+    option: {
+        fontSize: "10px", // Adjust the font size as needed
+    },
+    option2: {
+        fontSize: "11px",
+    },
+}));
+const extractValuesToArray = (inputString) => {
+    const valuesArray = inputString === null || inputString === void 0 ? void 0 : inputString.split(",");
+    const trimmedArray = valuesArray === null || valuesArray === void 0 ? void 0 : valuesArray.map((value) => value.trim());
+    return trimmedArray;
+};
+function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, }) {
+    const [personName, setPersonName] = React__namespace.useState(value ? extractValuesToArray(value) : []);
+    const [searchText, setSearchText] = React$1.useState("");
+    const [filterOptions, setFilterOptions] = React$1.useState(options);
+    const [selectAll, setSelectAll] = React$1.useState(false);
+    const textfieldRef = React__namespace.useRef();
+    const fieldValue = value;
+    const mappedIds = filterOptions.map((item) => item.value);
+    const filterIds = filterOptions.map((item) => item.value);
+    // console.log(value, "mnnmnmnnn");
+    React__namespace.useEffect(() => {
+        // setFilterOptions(options);
+        if (searchText !== "") {
+            setFilterOptions(options.filter((item) => item.label.toLowerCase().includes(searchText.toLowerCase())));
+        }
+        else {
+            setFilterOptions(options);
+        }
+    }, [options, searchText]);
+    function hasExactMatch(array, value) {
+        return array.some((item) => item === value);
+    }
+    React__namespace.useEffect(() => {
+        if ((fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(",").length) !== filterOptions.length) {
+            setSelectAll(false);
+        }
+        else {
+            console.log(fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(","), 'fieldValue?.split(",")', filterIds);
+            if (fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(",").every((value) => hasExactMatch(filterIds, value))) {
+                setSelectAll(true);
+            }
+        }
+    }, [filterOptions, fieldValue]);
+    const handleChange = (event) => {
+        const { target: { value }, } = event;
+        setPersonName(typeof value === "string" ? value === null || value === void 0 ? void 0 : value.split(",") : value);
+        onChangeFn((typeof value === "string" ? value === null || value === void 0 ? void 0 : value.split(",") : value).join(","));
+    };
+    const selectedOptions = options.filter((item) => fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(",").some((value) => value === item.value));
+    const selectedValues = selectedOptions
+        .map((item) => item.label)
+        .join(" , ");
+    // console.log(fieldValue,'sjshshsh');
+    console.log(value, "value");
+    return (jsxRuntimeExports.jsx(Box, { children: jsxRuntimeExports.jsx(FormControl, Object.assign({ fullWidth: true, sx: {
+                "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
+                    top: "-10px",
+                },
+            } }, { children: jsxRuntimeExports.jsxs(Select, Object.assign({ labelId: "demo-multiple-checkbox-label", id: "demo-multiple-checkbox", multiple: true, sx: {
+                    "& .MuiTypography-root": {
+                        fontSize: "5px !important",
+                    },
+                }, disabled: disable, value: value ? extractValuesToArray(value) : [], onChange: handleChange, onOpen: () => {
+                    setTimeout(() => {
+                        var _a;
+                        if (textfieldRef.current) {
+                            (_a = textfieldRef.current) === null || _a === void 0 ? void 0 : _a.focus();
+                        }
+                    }, 0);
+                }, onClose: () => {
+                    setSearchText("");
+                    // props?.item?.onCloseMenu && props?.item?.onCloseMenu();
+                }, renderValue: (selected) => (jsxRuntimeExports.jsx(Tooltip, Object.assign({ title: selectedValues }, { children: selectedOptions.length > 3
+                        ? selectedOptions.length + " Selected"
+                        : selectedValues }))), MenuProps: MenuProps, autoFocus: false }, { children: [jsxRuntimeExports.jsx(Box, Object.assign({ sx: {
+                            width: "100%",
+                            position: "sticky",
+                            top: "0px",
+                            padding: "7px",
+                            zIndex: 2,
+                            height: "33px",
+                            background: "#fff",
+                            display: options.length === 0 ? "none" : undefined,
+                        } }, { children: jsxRuntimeExports.jsx(TextField, { inputRef: textfieldRef, autoFocus: true, value: searchText, sx: {
+                                width: "100%",
+                            }, placeholder: "Search...", onChange: (e) => {
+                                setSearchText(e.target.value);
+                            }, onKeyDown: (e) => {
+                                if (e.key !== "Escape") {
+                                    e.stopPropagation();
+                                }
+                            } }) })), jsxRuntimeExports.jsxs(MenuItem, Object.assign({ disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: "5px !important" } }, { children: [jsxRuntimeExports.jsx(Checkbox, { size: "small", checked: selectAll, onChange: (e) => {
+                                    setSelectAll(!selectAll);
+                                    const selectChanged = !selectAll;
+                                    if (!selectChanged) {
+                                        onChangeFn("");
+                                    }
+                                    else {
+                                        const allDataMapped = mappedIds.join(",");
+                                        console.log(allDataMapped, "allDataMapped");
+                                        onChangeFn(allDataMapped);
+                                    }
+                                } }), jsxRuntimeExports.jsx(ListItemText, { primary: "Select All", sx: {
+                                    fontSize: "5px !important",
+                                    "& span": {
+                                        fontSize: "12px !important",
+                                    },
+                                } })] })), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxRuntimeExports.jsxs(MenuItem, Object.assign({ value: `${option.value}`, sx: { zIndex: 0, fontSize: "11px !important" } }, { children: [jsxRuntimeExports.jsx(Checkbox, { checked: fieldValue === null || fieldValue === void 0 ? void 0 : fieldValue.split(",").some((value) => value === option.value), size: "small" }), jsxRuntimeExports.jsx(ListItemText, { primary: option.label, sx: {
+                                    fontSize: "5px !important",
+                                    "& span": {
+                                        fontSize: "12px !important",
+                                    },
+                                } })] }), option.value)))) : (jsxRuntimeExports.jsx(MenuItem, Object.assign({ disabled: true, value: "NA" }, { children: "No data Found" }), "NA"))] })) })) }));
+}
+
 exports.BoxTP = Box;
 exports.ButtonTP = Button;
 exports.DeleteField = DeleteField;
 exports.DeleteFieldTP = DeleteField;
 exports.Experimental_CssVarsProvider = CssVarsProvider;
 exports.GridTP = Grid;
+exports.MultiSelectFieldComponent = MultiSelectFieldComponent;
 exports.RenderForm = FormRenderWrapper;
 exports.RenderFormTP = FormRenderWrapper;
 exports.SessionTimeoutField = SessionTimeOut;