tp-react-elements-dev 1.10.7 → 1.10.10

package/dist/components/SelectField/MultiSelectFieldComponent.d.ts

@@ -0,0 +1,11 @@
+interface MultiSelectProps {
+    value: string;
+    options: {
+        value: number | string;
+        label: string;
+    }[];
+    onChangeFn: (e: any) => void;
+    disable?: boolean;
+}
+export default function MultiSelectFieldComponent({ value, options, onChangeFn, disable, }: MultiSelectProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/index.d.ts

@@ -7,3 +7,4 @@ export { Box as BoxTP } from "@mui/material";
 export { Grid as GridTP } from "@mui/material";
 export { ThemeProvider as ThemeProviderTP } from "@emotion/react";
 export * from '@mui/material/styles';
+export { default as MultiSelectFieldComponent } from '../components/SelectField/MultiSelectFieldComponent';

package/dist/index.d.ts

@@ -17,3 +17,4 @@ export { default as DeleteFieldTP } from "./components/DeleteComponent/DeleteFie
 export { default as SessionTimeoutFieldTP } from "./components/SessionTimeOut/SessionTimeOut";
 export { useForm as useFormElementTP };
 export { yupResolver as yupResolverTP };
+export { default as MultiSelectFieldComponent } from './components/SelectField/MultiSelectFieldComponent';

package/dist/index.esm.js

@@ -54012,12 +54012,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,
         },
     },
@@ -54032,7 +54032,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;
@@ -54041,7 +54041,7 @@ function MultiSelectV1({ props, variant }) {
     var _a;
     console.log(props, "ksjh");
     const [personName, setPersonName] = React$1.useState(props.getValues(props.item.name)
-        ? extractValuesToArray(props.getValues(props.item.name))
+        ? extractValuesToArray$1(props.getValues(props.item.name))
         : []);
     const [searchText, setSearchText] = useState("");
     const options = (_a = props.item) === null || _a === void 0 ? void 0 : _a.options;
@@ -54102,7 +54102,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;
@@ -54116,7 +54116,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",
@@ -59670,7 +59670,7 @@ function formatDateMonthAndYear(date) {
 }
 const renderLabel = (variant, props) => variant === "standard" && (jsxRuntimeExports.jsxs("span", Object.assign({ className: "formInputlabel", style: { fontSize: "12px" } }, { children: [props.item.label, " ", props.item.required && jsxRuntimeExports.jsx("span", Object.assign({ style: { color: "red" } }, { children: "*" }))] })));
 const RenderForm = (props) => {
-    var _a, _b;
+    var _a, _b, _c;
     const variant = props.variant || "";
     switch ((_a = props.item) === null || _a === void 0 ? void 0 : _a.inputType) {
         case "text":
@@ -59968,6 +59968,22 @@ const RenderForm = (props) => {
         //       />
         //     </>
         //   );
+        case "checkbox-group":
+            return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(FormControl, Object.assign({ component: "fieldset" }, { children: jsxRuntimeExports.jsx(FormGroup, Object.assign({ row: true }, { children: ((_c = props.item) === null || _c === void 0 ? void 0 : _c.settings) &&
+                                props.item.settings.map((settings, i) => {
+                                    return (jsxRuntimeExports.jsx(Controller, { name: settings.name, control: props.control, render: ({ field }) => {
+                                            return (jsxRuntimeExports.jsx(FormControlLabel, { control: jsxRuntimeExports.jsx(Checkbox, Object.assign({}, field, { checked: field.value })), sx: {
+                                                    ".MuiCheckbox-root": {
+                                                        padding: "6px 2px 6px 8px",
+                                                        ".css-imrjgg-MuiButtonBase-root-MuiCheckbox-root": {
+                                                            color: "rgb(0, 0, 0) !important",
+                                                        },
+                                                    },
+                                                }, 
+                                                // label={settings.label}
+                                                label: jsxRuntimeExports.jsx(Typography, Object.assign({ variant: "subtitle2", fontSize: "11px", fontWeight: "normal !important" }, { children: settings.label })), labelPlacement: "end" }));
+                                        } }, i));
+                                }) })) })), jsxRuntimeExports.jsx(ErrorMessageComponent, { children: jsxRuntimeExports.jsx(s, { errors: props.errors, name: props.item.name }) })] }));
         case "radio-group":
             return (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [renderLabel(variant, props), jsxRuntimeExports.jsx(FormControl, Object.assign({ component: "fieldset" }, { children: jsxRuntimeExports.jsx(Controller, { name: props.item.name, control: props.control, render: ({ field }) => {
                                 var _a, _b;
@@ -63034,5 +63050,135 @@ 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 }) }));
 };
 
-export { Box as BoxTP, Button as ButtonTP, DeleteField, DeleteField as DeleteFieldTP, CssVarsProvider as Experimental_CssVarsProvider, Grid as GridTP, FormRenderWrapper as RenderForm, FormRenderWrapper as RenderFormTP, SessionTimeOut as SessionTimeoutField, SessionTimeOut as SessionTimeoutFieldTP, StyledEngineProvider, THEME_ID, ThemeProvider, ThemeProvider$3 as ThemeProviderTP, Typography as TypographyTP, adaptV4Theme, alpha, createMuiTheme, createStyles, createTheme, css$1 as css, darken, decomposeColor, duration, easing, emphasize, styled$1 as experimentalStyled, extendTheme as experimental_extendTheme, experimental_sx, getContrastRatio, getInitColorSchemeScript, getLuminance, getOverlayAlpha$1 as getOverlayAlpha, hexToRgb, hslToRgb, keyframes, lighten, makeStyles$1 as makeStyles, createMixins as private_createMixins, createTypography as private_createTypography, excludeVariablesFromRoot$1 as private_excludeVariablesFromRoot, recomposeColor, responsiveFontSizes, rgbToHex, shouldSkipGeneratingVar, styled$1 as styled, createMuiStrictModeTheme as unstable_createMuiStrictModeTheme, getUnit as unstable_getUnit, toUnitless as unstable_toUnitless, useColorScheme, useForm as useFormElement, useForm as useFormElementTP, useFormValidatingContext, useFormValidatingContext as useFormValidatingContextTP, useTheme$2 as useTheme, useThemeProps$1 as useThemeProps, withStyles, withTheme, o as yupResolverTP };
+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$1.useState(value ? extractValuesToArray(value) : []);
+    const [searchText, setSearchText] = useState("");
+    const [filterOptions, setFilterOptions] = useState(options);
+    const [selectAll, setSelectAll] = useState(false);
+    const textfieldRef = React$1.useRef();
+    const fieldValue = value;
+    const mappedIds = filterOptions.map((item) => item.value);
+    const filterIds = filterOptions.map((item) => item.value);
+    // console.log(value, "mnnmnmnnn");
+    React$1.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$1.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"))] })) })) }));
+}
+
+export { Box as BoxTP, Button as ButtonTP, DeleteField, DeleteField as DeleteFieldTP, CssVarsProvider as Experimental_CssVarsProvider, Grid as GridTP, MultiSelectFieldComponent, FormRenderWrapper as RenderForm, FormRenderWrapper as RenderFormTP, SessionTimeOut as SessionTimeoutField, SessionTimeOut as SessionTimeoutFieldTP, StyledEngineProvider, THEME_ID, ThemeProvider, ThemeProvider$3 as ThemeProviderTP, Typography as TypographyTP, adaptV4Theme, alpha, createMuiTheme, createStyles, createTheme, css$1 as css, darken, decomposeColor, duration, easing, emphasize, styled$1 as experimentalStyled, extendTheme as experimental_extendTheme, experimental_sx, getContrastRatio, getInitColorSchemeScript, getLuminance, getOverlayAlpha$1 as getOverlayAlpha, hexToRgb, hslToRgb, keyframes, lighten, makeStyles$1 as makeStyles, createMixins as private_createMixins, createTypography as private_createTypography, excludeVariablesFromRoot$1 as private_excludeVariablesFromRoot, recomposeColor, responsiveFontSizes, rgbToHex, shouldSkipGeneratingVar, styled$1 as styled, createMuiStrictModeTheme as unstable_createMuiStrictModeTheme, getUnit as unstable_getUnit, toUnitless as unstable_toUnitless, useColorScheme, useForm as useFormElement, useForm as useFormElementTP, useFormValidatingContext, useFormValidatingContext as useFormValidatingContextTP, useTheme$2 as useTheme, useThemeProps$1 as useThemeProps, withStyles, withTheme, o as yupResolverTP };
 //# sourceMappingURL=index.esm.js.map