tp-react-elements-dev 1.10.8 → 1.10.11

package/dist/components/Form/FormRender.d.ts

@@ -48,6 +48,7 @@ export interface FormSectionPropsItem {
     label2?: string;
     minTime?: string;
     maxTime?: string;
+    ampm?: boolean;
     settings?: FormSectionPropsItem[];
 }
 export interface FormRenderProps {

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",
@@ -59543,9 +59543,7 @@ function formatDayjsToCustomTime(date) {
 }
 function TimePickerFieldWrapper({ props, }) {
     const value = props.getValues(props.item.name);
-    return (jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [jsxRuntimeExports.jsx(Controller, { name: "time", control: props.control, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [" ", renderLabel(props.variant, props), jsxRuntimeExports.jsx(TimePicker
-                        // ampm={false}     
-                        , Object.assign({}, field, { value: value ? parseCustomTime(value) : null, onChange: (newTime) => {
+    return (jsxRuntimeExports.jsxs(LocalizationProvider, Object.assign({ dateAdapter: AdapterDayjs }, { children: [jsxRuntimeExports.jsx(Controller, { name: "time", control: props.control, render: ({ field }) => (jsxRuntimeExports.jsxs(jsxRuntimeExports.Fragment, { children: [" ", renderLabel(props.variant, props), jsxRuntimeExports.jsx(TimePicker, Object.assign({ ampm: props.item.ampm ? true : false }, field, { value: value ? parseCustomTime(value) : null, onChange: (newTime) => {
                                 const parsedTime = parseCustomTime(formatDayjsToCustomTime(newTime));
                                 const min = props.item.minTime
                                     ? parseCustomTime(props.item.minTime)
@@ -63050,5 +63048,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