tp-react-elements-dev 1.12.21 → 1.12.22

package/dist/components/Global.styles.js

@@ -0,0 +1,79 @@
+import styled from '@emotion/styled';
+import { Button, Typography, Grid, Dialog, DialogTitle } from '@mui/material';
+
+styled(Button) `
+  border: 0;
+  color: #fff;
+  position: absolute;
+  text-align: center;
+  padding: 5px 12px;
+  font-size: 13px;
+  height: 30px;
+  right: -38px;
+  text-transform: none;
+  z-index: 2;
+  border-radius: 10px 0px 0px 10px;
+  &:hover {
+    right: 0px;
+  }
+`;
+const SubmitButton = styled(Button) `
+  text-transform: none;
+`;
+const CancelButton = styled(Button) `
+  text-transform: none;
+  color: #000;
+  background: #ececee;
+  &:hover {
+    background: #0009;
+    color: #fff;
+  }
+`;
+const SaveAsDraftButton = styled(Button) `
+  text-transform: none;
+  font-size: 12px;
+  background: orange;
+  &:hover {
+    background: orange;
+  }
+`;
+styled(Typography) ``;
+styled(Grid, {
+    shouldForwardProp: (prop) => prop !== "isActive" && prop !== "noOfColumn",
+}) `
+  flex-direction: column;
+  margin-bottom: 8px;
+  min-width: 10%;
+  padding-left: 0px;
+  z-index: 2;
+  padding-right: 0px;
+  border: 1px solid #0003;
+  font-size: 12px;
+  padding: 6px;
+  text-align: center;
+  &:hover {
+    cursor: pointer;
+  }
+`;
+const DialogContainer = styled(Dialog) `
+  position: fixed;
+  top: -16px;
+  left: 0;
+  right: 0;
+  bottom: auto;
+  & .css-tlc64q-MuiPaper-root-MuiDialog-paper,
+  .css-mbdu2s {
+    max-width: 900px;
+  }
+`;
+const DialogTitleWrapper = styled(DialogTitle) `
+  padding: 8px 16px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  cursor: move;
+  border-bottom: 1px solid rgb(229 231 235 / 1);
+`;
+
+export { CancelButton, DialogContainer, DialogTitleWrapper, SaveAsDraftButton, SubmitButton };

package/dist/components/ModalField/ConfirmationDialog.js

@@ -0,0 +1,48 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import CloseIcon from '@mui/icons-material/Close';
+import { Dialog, Slide, DialogTitle, DialogContent, Typography, Grid, DialogActions, Button } from '@mui/material';
+import { SubmitButton } from '../Global.styles.js';
+
+const ConfirmationDialog = ({ openConfirmDialog, handleCancel, onClickSubmit, text, Submit = "Submit", Cancel = "Cancel", buttonStyleProps, }) => {
+    return (jsxs(Dialog, { open: openConfirmDialog, TransitionComponent: Slide, fullWidth: true, sx: {
+            position: "fixed",
+            top: "10%",
+            left: 0,
+            right: 0,
+            bottom: "auto",
+            "& .css-tlc64q-MuiPaper-root-MuiDialog-paper,.css-mbdu2s": {
+                maxWidth: "500px",
+            },
+            zIndex: 40,
+        }, "aria-labelledby": "draggable-dialog-title", children: [jsxs(DialogTitle, { sx: {
+                    // background: theme.palette.primary.main,
+                    // color: "#fff",
+                    padding: "8px 16px",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    // fontFamily: "Roboto",
+                    fontSize: "14px",
+                    cursor: "move",
+                    borderBottom: "1px solid rgb(229 231 235 / 1)",
+                }, children: [jsx("span", { children: "Confirmation Dailog" }), jsx(CloseIcon, { sx: { cursor: "pointer" }, onClick: () => handleCancel() })] }), jsxs(DialogContent, { style: { paddingTop: "20px", paddingBottom: 0 }, sx: {
+                    "& .pt-0": {
+                        paddingTop: 0,
+                    },
+                }, children: [jsx(Typography, { children: text }), jsx(Grid, { container: true, gap: 3 })] }), jsx(DialogActions, { sx: { borderTop: "1px solid #e0e0e0", marginTop: 3 }, children: jsxs("div", { style: {
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        gap: "8px",
+                    }, children: [jsx(SubmitButton, { variant: "contained", size: "small", type: "submit", onClick: () => onClickSubmit(), sx: {
+                                ...buttonStyleProps,
+                            }, children: Submit }), jsx(Button, { variant: "text", 
+                            // color="error"
+                            size: "small", sx: {
+                                textTransform: "none",
+                                color: "#000",
+                                background: "#ececee",
+                                ":hover": { background: "#0009", color: "#fff" },
+                            }, onClick: () => handleCancel(), children: Cancel })] }) })] }));
+};
+
+export { ConfirmationDialog as default };

package/dist/components/ModalField/ModalField.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import CloseIcon from '@mui/icons-material/Close';
+import { DialogContent, DialogActions, Slide } from '@mui/material';
+import { DialogContainer, DialogTitleWrapper, SaveAsDraftButton, SubmitButton, CancelButton } from '../Global.styles.js';
+
+const ModalField = ({ name, openModal, handleCancel, content, width = "900px", Transition = "", handleSubmit, styles = {}, saveButton: isSaveButton = false, submitButton = true, handleSaveButton = () => null, SubmitButtonName = "Submit", }) => {
+    const TransitionComponent = () => {
+        switch (Transition) {
+            case "Slide":
+                return Slide;
+            default:
+                return undefined;
+        }
+    };
+    return (jsxs(DialogContainer, { open: openModal, TransitionComponent: TransitionComponent(), fullWidth: true, "aria-labelledby": "draggable-dialog-title", sx: {
+            zIndex: 20,
+            "& .css-tlc64q-MuiPaper-root-MuiDialog-paper,.css-mbdu2s": {
+                maxWidth: width,
+            },
+            ...styles,
+        }, children: [jsxs(DialogTitleWrapper, { children: [jsx("span", { children: name }), jsx(CloseIcon, { sx: { cursor: "pointer" }, onClick: () => handleCancel() })] }), jsx(DialogContent, { style: { paddingTop: "20px", paddingBottom: 0 }, sx: {
+                    "& .pt-0": {
+                        paddingTop: 0,
+                    },
+                }, children: content }), jsx(DialogActions, { sx: { borderTop: "1px solid #e0e0e0", marginTop: 3 }, children: jsxs("div", { style: {
+                        display: "flex",
+                        justifyContent: "flex-end",
+                        gap: "8px",
+                    }, children: [isSaveButton && (jsx(SaveAsDraftButton, { variant: "contained", size: "small", onClick: () => handleSaveButton(), children: "Save" })), submitButton && (jsx(SubmitButton, { variant: "contained", size: "small", onClick: () => handleSubmit(), children: SubmitButtonName })), jsx(CancelButton, { variant: "text", size: "small", onClick: () => handleCancel(), children: "Cancel" })] }) })] }));
+};
+
+export { ModalField as default };

package/dist/components/SelectField/MultiSelectFieldComponent.js

@@ -0,0 +1,129 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Box, TextField, Tooltip } from '@mui/material';
+import Checkbox from '@mui/material/Checkbox';
+import FormControl from '@mui/material/FormControl';
+import ListItemText from '@mui/material/ListItemText';
+import MenuItem from '@mui/material/MenuItem';
+import Select from '@mui/material/Select';
+import * as React from 'react';
+import { useState } from 'react';
+
+const ITEM_HEIGHT = 48;
+const ITEM_PADDING_TOP = 3;
+const MenuProps = {
+    PaperProps: {
+        style: {
+            maxHeight: ITEM_HEIGHT * 5.5 + ITEM_PADDING_TOP,
+        },
+    },
+    autoFocus: false,
+    disableAutoFocusItem: true,
+};
+const extractValuesToArray = (inputString) => {
+    const valuesArray = inputString?.split(",");
+    const trimmedArray = valuesArray?.map((value) => value.trim());
+    return trimmedArray;
+};
+function MultiSelectFieldComponent({ value, options, onChangeFn, disable = false, }) {
+    const [personName, setPersonName] = React.useState(value ? extractValuesToArray(value) : []);
+    const [searchText, setSearchText] = useState("");
+    const [filterOptions, setFilterOptions] = useState(options);
+    const [selectAll, setSelectAll] = useState(false);
+    const textfieldRef = React.useRef(null);
+    const fieldValue = value;
+    const mappedIds = filterOptions.map((item) => item.value);
+    const filterIds = filterOptions.map((item) => item.value);
+    React.useEffect(() => {
+        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.useEffect(() => {
+        if (fieldValue?.split(",").length !== filterOptions.length) {
+            setSelectAll(false);
+        }
+        else {
+            if (fieldValue
+                ?.split(",")
+                .every((value) => hasExactMatch(filterIds, value))) {
+                setSelectAll(true);
+            }
+        }
+    }, [filterOptions, fieldValue]);
+    const handleChange = (event) => {
+        const { target: { value }, } = event;
+        setPersonName(typeof value === "string" ? value?.split(",") : value);
+        onChangeFn((typeof value === "string" ? value?.split(",") : value).join(","));
+    };
+    const selectedOptions = options.filter((item) => fieldValue?.split(",").some((value) => value === item.value));
+    const selectedValues = selectedOptions
+        .map((item) => item.label)
+        .join(" , ");
+    return (jsx(Box, { children: jsx(FormControl, { fullWidth: true, sx: {
+                "& .css-kichxs-MuiFormLabel-root-MuiInputLabel-root,.css-1holvmy": {
+                    top: "-10px",
+                },
+            }, children: jsxs(Select, { 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(() => {
+                        if (textfieldRef.current) {
+                            textfieldRef.current?.focus();
+                        }
+                    }, 0);
+                }, onClose: () => {
+                    setSearchText("");
+                }, renderValue: () => (jsx(Tooltip, { title: selectedValues, children: jsx("span", { children: selectedOptions.length > 3
+                            ? `${selectedOptions.length} Selected`
+                            : selectedValues }) })), MenuProps: MenuProps, autoFocus: false, children: [jsx(Box, { sx: {
+                            width: "100%",
+                            position: "sticky",
+                            top: "0px",
+                            padding: "7px",
+                            zIndex: 2,
+                            height: "33px",
+                            background: "#fff",
+                            display: options.length === 0 ? "none" : undefined,
+                        }, children: 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();
+                                }
+                            } }) }), jsxs(MenuItem, { disabled: filterOptions.length === 0, sx: { zIndex: 0, fontSize: "5px !important" }, children: [jsx(Checkbox, { size: "small", checked: selectAll, onChange: () => {
+                                    setSelectAll(!selectAll);
+                                    const selectChanged = !selectAll;
+                                    if (!selectChanged) {
+                                        onChangeFn("");
+                                    }
+                                    else {
+                                        const allDataMapped = mappedIds.join(",");
+                                        console.log(allDataMapped, "allDataMapped");
+                                        onChangeFn(allDataMapped);
+                                    }
+                                } }), jsx(ListItemText, { primary: "Select All", sx: {
+                                    fontSize: "5px !important",
+                                    "& span": {
+                                        fontSize: "12px !important",
+                                    },
+                                } })] }), filterOptions.length !== 0 ? (filterOptions.map((option) => (jsxs(MenuItem, { value: `${option.value}`, sx: { zIndex: 0, fontSize: "11px !important" }, children: [jsx(Checkbox, { checked: fieldValue
+                                    ?.split(",")
+                                    .some((value) => value === option.value), size: "small" }), jsx(ListItemText, { primary: option.label, sx: {
+                                    fontSize: "5px !important",
+                                    "& span": {
+                                        fontSize: "12px !important",
+                                    },
+                                } })] }, option.value)))) : (jsx(MenuItem, { disabled: true, value: "NA", children: "No data Found" }, "NA"))] }) }) }));
+}
+
+export { MultiSelectFieldComponent as default };

package/dist/components/SessionTimeOut/SessionTimeOut.js

@@ -0,0 +1,63 @@
+import { jsx, Fragment } from 'react/jsx-runtime';
+import { useState, useEffect } from 'react';
+import { useIdleTimer } from 'react-idle-timer';
+import ConfirmationDialog from '../ModalField/ConfirmationDialog.js';
+
+const secondsToMMSS = (totalSeconds) => {
+    const minutes = Math.floor(totalSeconds / 60);
+    const seconds = Math.floor(totalSeconds % 60);
+    const formattedMinutes = String(minutes).padStart(2, "0");
+    const formattedSeconds = String(seconds).padStart(2, "0");
+    return `${formattedMinutes}:${formattedSeconds}`;
+};
+const promptBeforeValue = 120000;
+const SessionTimeOut = ({ sessionTime, handleSubmitSession, onSessionExpire, handleSessionCancel, SubmitButtonName = "Submit", buttonStyleProps, }) => {
+    const [openConfirmModal, setOpenConfirmModal] = useState(false);
+    const expiryDetails = sessionTime;
+    const providedTimestamp = new Date(expiryDetails).getTime();
+    const currentTimestamp = new Date().getTime();
+    const remainingTime = providedTimestamp - currentTimestamp;
+    const timeout = remainingTime;
+    const promptBeforeIdle = Math.min(promptBeforeValue, timeout - 1000);
+    const [, setRemainingTimeInSeconds] = useState(Math.ceil(timeout / 1000));
+    const [formattedRemainingTime, setFormattedRemainingTime] = useState(secondsToMMSS(Math.ceil(timeout / 1000)));
+    const onIdle = () => {
+        if (sessionTime) {
+            onSessionExpire();
+        }
+    };
+    const handleSubmit = () => {
+        handleSubmitSession();
+        setOpenConfirmModal(false);
+    };
+    const handleCancel = () => {
+        handleSessionCancel();
+        setOpenConfirmModal(false);
+    };
+    const onPrompt = () => {
+        setOpenConfirmModal(true);
+    };
+    const { getRemainingTime } = useIdleTimer({
+        onIdle,
+        onPrompt,
+        promptBeforeIdle,
+        timeout,
+        throttle: 1000, // Adjust throttle to reduce delays
+    });
+    useEffect(() => {
+        const interval = setInterval(() => {
+            const remainingSeconds = Math.ceil(getRemainingTime() / 1000);
+            setRemainingTimeInSeconds(promptBeforeIdle !== promptBeforeValue ? remainingSeconds : 0);
+            const formattedTime = secondsToMMSS(remainingSeconds);
+            setFormattedRemainingTime(promptBeforeIdle !== promptBeforeValue ? formattedTime : "00:00");
+        }, 1000); // Adjust interval to 1000 ms
+        return () => {
+            clearInterval(interval);
+        };
+    }, [promptBeforeIdle, getRemainingTime]);
+    const sessionMessage = `Your session will expire in ${formattedRemainingTime} seconds. Do you want to extend the session?`;
+    console.log(promptBeforeIdle, "promptBeforeIdle");
+    return (jsx(Fragment, { children: jsx(ConfirmationDialog, { openConfirmDialog: openConfirmModal, handleCancel: handleCancel, onClickSubmit: handleSubmit, text: sessionMessage, Submit: SubmitButtonName, buttonStyleProps: buttonStyleProps }) }));
+};
+
+export { SessionTimeOut as default };

package/dist/index.d.ts

@@ -1,9 +1,9 @@
 export { ConfirmationDialog, DeleteField, ModalField, MultiSelectFieldComponent, RenderForm, SessionTimeoutField, useFormValidatingContext, } from "./components";
-export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor, } from "./Utilities";
+export { calculateTotalArrayValueTotal, checkIsDateIsBefore, findMenuHierarchy, getDesiredDate, getFormattedDate, getInitials, getUsernameFromEmail, handleDownloadReactTableDataExcel, lightenColor, } from "./lib";
 export * as FormComponents from "./components/FormComponents";
-export * as Utils from "./Utilities";
+export * as Utils from "./lib";
 export * as ValidationSchemas from "./validation/schemas";
 export * as Theme from "./theme";
-export type { FormRenderProps } from "./Utilities/Interface/FormInterface";
+export type { FormRenderProps } from "./lib/Interface/FormInterface";
 export type { FormRenderWrapperProps } from "./components/Form/FormRenderWrapper";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,UAAU,EACV,yBAAyB,EACzB,UAAU,EACV,mBAAmB,EACnB,wBAAwB,GACzB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,6BAA6B,EAC7B,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACpB,iCAAiC,EACjC,YAAY,GACb,MAAM,aAAa,CAAC;AAOrB,OAAO,KAAK,cAAc,MAAM,6BAA6B,CAAC;AAG9D,OAAO,KAAK,KAAK,MAAM,aAAa,CAAC;AAGrC,OAAO,KAAK,iBAAiB,MAAM,sBAAsB,CAAC;AAG1D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAOjC,YAAY,EAAE,eAAe,EAAE,MAAM,qCAAqC,CAAC;AAC3E,YAAY,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAKA,OAAO,EACL,kBAAkB,EAClB,WAAW,EACX,UAAU,EACV,yBAAyB,EACzB,UAAU,EACV,mBAAmB,EACnB,wBAAwB,GACzB,MAAM,cAAc,CAAC;AAGtB,OAAO,EACL,6BAA6B,EAC7B,mBAAmB,EACnB,iBAAiB,EACjB,cAAc,EACd,gBAAgB,EAChB,WAAW,EACX,oBAAoB,EACpB,iCAAiC,EACjC,YAAY,GACb,MAAM,OAAO,CAAC;AAOf,OAAO,KAAK,cAAc,MAAM,6BAA6B,CAAC;AAG9D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,KAAK,iBAAiB,MAAM,sBAAsB,CAAC;AAG1D,OAAO,KAAK,KAAK,MAAM,SAAS,CAAC;AAOjC,YAAY,EAAE,eAAe,EAAE,MAAM,+BAA+B,CAAC;AACrE,YAAY,EAAE,sBAAsB,EAAE,MAAM,qCAAqC,CAAC"}