sccoreui 5.7.23 → 5.8.2

package/dist/components/ag-grid/MyProvider.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FeatureContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+exports.FeatureContext = (0, react_1.createContext)(null);
+function MyProvider({ children, value }) {
+    const { featureDetails, setFeatureDetails, gridData, callGrid, totalRecords } = value;
+    // States for sort
+    const [columnData] = (0, react_1.useState)(gridData === null || gridData === void 0 ? void 0 : gridData.columnData);
+    const [sortValue, setSortValue] = (0, react_1.useState)({});
+    const [sortBy, setSortBy] = (0, react_1.useState)({});
+    const [isOverlayOpened, setIsOverlayOpened] = (0, react_1.useState)(false);
+    // States for filter
+    const [queries, setQueries] = (0, react_1.useState)(() => {
+        var _a;
+        const length = ((_a = featureDetails === null || featureDetails === void 0 ? void 0 : featureDetails.filterQueries) === null || _a === void 0 ? void 0 : _a.length) || 0;
+        // Returns based on length of filterQueries present
+        return length === 0 ? [0] : Array.from({ length }, (_, index) => index);
+    });
+    // Function call on click to
+    const removeFeaturesAndRefresh = () => {
+        const emptyFeatures = {
+            searchedText: "",
+            filterQueries: [],
+            sort: {
+                isSortable: false,
+                columnToSort: {},
+                orderToSort: {},
+            },
+        };
+        // Remove stored features
+        setFeatureDetails(emptyFeatures);
+        // Remove filter
+        setQueries([0]);
+        // Remove sort
+        setSortBy({});
+        setSortValue({});
+        callGrid(emptyFeatures);
+    };
+    return ((0, jsx_runtime_1.jsx)(exports.FeatureContext.Provider, Object.assign({ value: {
+            sortValue,
+            setSortValue,
+            sortBy,
+            setSortBy,
+            isOverlayOpened,
+            setIsOverlayOpened,
+            queries,
+            setQueries,
+            featureDetails,
+            setFeatureDetails,
+            columnData,
+            callGrid,
+            removeFeaturesAndRefresh,
+            totalRecords
+        } }, { children: children })));
+}
+exports.default = MyProvider;

package/dist/components/ag-grid/ParentForGrid.js

@@ -5,32 +5,40 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const AgGrid_1 = tslib_1.__importDefault(require("./AgGrid"));
 const advanced_feature_1 = tslib_1.__importDefault(require("./advancedFeature/advanced-feature"));
-// import ErrorBoundary from "./error-ui";
+const grid_checkbox_1 = tslib_1.__importDefault(require("./grid-checkbox"));
+const MyProvider_1 = tslib_1.__importDefault(require("./MyProvider"));
+const error_ui_1 = tslib_1.__importDefault(require("./error-ui"));
+const constants_1 = require("./constants");
 function ParentForGrid(props) {
-    const [gridData] = (0, react_1.useState)({
-        rowData: props === null || props === void 0 ? void 0 : props.rowData,
+    const [gridData, setGridData] = (0, react_1.useState)({
+        rowData: [],
         columnData: props === null || props === void 0 ? void 0 : props.columnData,
     });
-    console.log(props, 'pros in parent');
     const [style] = (0, react_1.useState)(props.style);
     const [api, setApi] = (0, react_1.useState)(null);
+    const [totalRecords, setTotalRecords] = (0, react_1.useState)(0);
     const [gridReadyEvent, setGridReadyEvent] = (0, react_1.useState)();
-    const [checkedRow, setCheckedRow] = (0, react_1.useState)([]);
-    const [emptyResponse] = (0, react_1.useState)({ totalRecords: 0, rowData: [] });
+    const [emptyResponse] = (0, react_1.useState)({
+        totalRecords: 0,
+        rowData: [],
+    });
     const [isLoading, setIsLoading] = (0, react_1.useState)(false);
+    const [checkBoxSelection, setCheckBoxSelection] = (0, react_1.useState)({
+        allBoxChecked: false,
+        isInterminate: false,
+        selectedCheckboxData: [],
+        unselectedCheckboxData: [],
+    });
     const [featureDetails, setFeatureDetails] = (0, react_1.useState)({
         searchedText: "",
         filterQueries: [],
         sort: {
             isSortable: false,
             columnToSort: {},
-            orderToSort: {}
-        }
-        // bulkAction: {
-        //   columnData: {},
-        //   updatedValue: "",
-        // },
+            orderToSort: {},
+        },
     });
+    // Default column specification
     const defaultColDef = (0, react_1.useMemo)(() => {
         return {
             flex: 1,
@@ -40,76 +48,156 @@ function ParentForGrid(props) {
             sortable: false,
         };
     }, []);
+    // Function to handle checkbox click events
+    const handleCheckboxClick = (rowData) => {
+        const { unselectedCheckboxData, selectedCheckboxData, allBoxChecked } = checkBoxSelection;
+        if (allBoxChecked && unselectedCheckboxData.includes(rowData)) {
+            setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { unselectedCheckboxData: unselectedCheckboxData.filter((item) => item !== rowData) }));
+            return;
+        }
+        else if (allBoxChecked) {
+            setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { unselectedCheckboxData: [...unselectedCheckboxData, rowData], isInterminate: true }));
+            return;
+        }
+        // Logic to handle checkbox click events
+        if (selectedCheckboxData.includes(rowData)) {
+            setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { selectedCheckboxData: selectedCheckboxData.filter((item) => item !== rowData) }));
+        }
+        else {
+            setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { selectedCheckboxData: [...selectedCheckboxData, rowData] }));
+        }
+    };
+    const handleHeaderCheckbox = () => {
+        const { allBoxChecked } = checkBoxSelection;
+        setCheckBoxSelection(Object.assign(Object.assign({}, checkBoxSelection), { allBoxChecked: !allBoxChecked, isInterminate: false, selectedCheckboxData: [], unselectedCheckboxData: [] }));
+    };
+    // JSX for rendering checkbox in header
+    const headerCheckBoxRenderer = (params) => {
+        const displayName = params === null || params === void 0 ? void 0 : params.displayName;
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { checked: checkBoxSelection.allBoxChecked, onChange: handleHeaderCheckbox, isInterminate: checkBoxSelection.isInterminate }), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "px-3" }, { children: displayName }))] })));
+    };
+    // JSX for rendering checkbox in cells
+    const cellCheckBoxRenderer = (params) => {
+        const { data } = params;
+        const { allBoxChecked, unselectedCheckboxData, selectedCheckboxData } = checkBoxSelection;
+        return ((0, jsx_runtime_1.jsx)(grid_checkbox_1.default, { checked: allBoxChecked
+                ? !unselectedCheckboxData.includes(data)
+                : selectedCheckboxData.includes(data), onChange: () => handleCheckboxClick(data), isInterminate: false }));
+    };
+    // Render checkbox as well as initial component/data from props
+    const dataCellRenderer = (cellRendererParams, column) => {
+        var _a;
+        const { initialRenderer, cellCheckBoxRenderer } = cellRendererParams;
+        return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "pr-3" }, { children: cellCheckBoxRenderer(cellRendererParams) })), typeof initialRenderer === "function" ? (initialRenderer(cellRendererParams)) : ((0, jsx_runtime_1.jsx)("div", { children: (_a = cellRendererParams === null || cellRendererParams === void 0 ? void 0 : cellRendererParams.data) === null || _a === void 0 ? void 0 : _a[column === null || column === void 0 ? void 0 : column.field] }))] })));
+    };
     // Callback to products for getting data
-    const getData = (startRow, endRow) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+    const getData = (startRow, endRow, currentFeatures) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         var _a, _b;
         if (!(props === null || props === void 0 ? void 0 : props.getRowData)) {
             return emptyResponse; // If callback function to get row data is not provided
         }
-        const response = yield props.getRowData(startRow, endRow, featureDetails);
+        const response = yield props.getRowData(startRow, endRow, currentFeatures);
         // To identify when to stop the callBack
         const actualEndRow = startRow + ((_b = (_a = response === null || response === void 0 ? void 0 : response.rowData) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0);
         if (response === null || response === void 0 ? void 0 : response.rowData) {
+            setTotalRecords(response === null || response === void 0 ? void 0 : response.totalRecords);
+            setGridData((prevState) => (Object.assign(Object.assign({}, prevState), { rowData: [...(prevState.rowData || []), ...response.rowData] })));
             response.actualEndRow = actualEndRow;
             return response;
         }
         return emptyResponse;
     });
     // Gets call onLoad,scroll and whenever any featureDetails changed
-    const onGridReady = (params) => {
+    const onGridReady = (params, updatedFeatures) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         setIsLoading(true);
         setApi(params.api);
         setGridReadyEvent(params);
-        const dataSource = {
-            getRows: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
-                var _a;
-                const startRow = params.startRow;
-                const endRow = params.endRow;
-                const result = yield getData(startRow, endRow);
-                console.log(result, 'result from call back');
-                if (((_a = result === null || result === void 0 ? void 0 : result.rowData) === null || _a === void 0 ? void 0 : _a.length) > 0) {
-                    params.successCallback(result === null || result === void 0 ? void 0 : result.rowData, result === null || result === void 0 ? void 0 : result.actualEndRow);
-                }
-                else {
-                    params.failCallback();
-                }
-            }),
-        };
-        params.api.setGridOption("datasource", dataSource);
-        setIsLoading(false);
-    };
-    // Get selected checkBox data
-    const onSelectionChanged = () => {
-        if (api) {
-            const selectedNodes = api === null || api === void 0 ? void 0 : api.getSelectedNodes();
-            const selectedData = selectedNodes.map((node) => node.data);
-            setCheckedRow(selectedData);
-            console.log(checkedRow, 'checked row');
-            console.log(selectedData, "selected from checkbox"); // Send a callback to products
+        let currentFeatures = updatedFeatures;
+        if (!updatedFeatures) {
+            currentFeatures = featureDetails;
         }
+        if (props.rowModelType === constants_1.ROWMODELTYPE.CLIENT_SIDE) {
+            const result = yield getData(0, 0, currentFeatures);
+            if (result.rowData) {
+                params.api.applyTransaction({ add: result.rowData });
+            }
+        }
+        else if (props.rowModelType === constants_1.ROWMODELTYPE.INFINITE) {
+            const dataSource = {
+                getRows: (params) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+                    var _c;
+                    const startRow = params.startRow;
+                    const endRow = params.endRow;
+                    const result = yield getData(startRow, endRow, currentFeatures);
+                    if (((_c = result === null || result === void 0 ? void 0 : result.rowData) === null || _c === void 0 ? void 0 : _c.length) > 0) {
+                        params.successCallback(result === null || result === void 0 ? void 0 : result.rowData, result === null || result === void 0 ? void 0 : result.actualEndRow);
+                    }
+                    else {
+                        params.failCallback();
+                    }
+                }),
+            };
+            params.api.setGridOption("datasource", dataSource);
+        }
+        setIsLoading(false);
+    });
+    // Get values when cell edited
+    const getEditedColumn = (params) => {
+        var _a;
+        console.log(params, 'edited column');
+        const editedColumn = (_a = params === null || params === void 0 ? void 0 : params.colDef) === null || _a === void 0 ? void 0 : _a.field;
+        const editedRow = params === null || params === void 0 ? void 0 : params.data;
+        console.log(editedRow, editedColumn, 'edited row ');
     };
     // Options that grid should have
     const gridOptions = {
-        columnDefs: gridData.columnData,
+        columnDefs: gridData.columnData.map((column) => {
+            if (column.enableChildCheckbox && column.enableHeaderCheckbox) {
+                return Object.assign(Object.assign({}, column), { headerComponent: (params) => headerCheckBoxRenderer(params), cellRenderer: (params) => dataCellRenderer(params, column), cellRendererParams: {
+                        initialRenderer: (column === null || column === void 0 ? void 0 : column.cellRenderer) ? column === null || column === void 0 ? void 0 : column.cellRenderer : null,
+                        cellCheckBoxRenderer: cellCheckBoxRenderer,
+                    } });
+            }
+            else {
+                return column;
+            }
+        }),
         // rowData: gridData.rowData, // Passing row data
         defaultColDef: defaultColDef,
         enableRangeSelection: true,
         suppressMenuHide: false,
-        onSelectionChanged: onSelectionChanged,
+        onCellValueChanged: getEditedColumn,
         rowSelection: "multiple",
         suppressRowClickSelection: true,
         rowHeight: 60,
-        rowModelType: "infinite", // Infinite scroll
+        rowModelType: props.rowModelType, // Infinite scroll
     };
     // Fucntion to call the grid
-    const callGrid = () => {
-        onGridReady(gridReadyEvent);
+    const callGrid = (featureDetails) => {
+        onGridReady(gridReadyEvent, featureDetails);
     };
+    // Call Grid if something is searched
     (0, react_1.useEffect)(() => {
         if (api && gridReadyEvent) {
-            callGrid();
+            callGrid(featureDetails);
         }
     }, [featureDetails.searchedText]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { height: style.height, width: style.width } }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(advanced_feature_1.default, { featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, columnData: gridData.columnData, props: props, callGrid: callGrid }), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: style, gridOptions: gridOptions, onGridReady: onGridReady })] })) : ((0, jsx_runtime_1.jsx)("p", { children: "Loading..." })) })) }));
+    // Remove all checkbox selection if any feature added
+    (0, react_1.useEffect)(() => {
+        setCheckBoxSelection({
+            allBoxChecked: false,
+            isInterminate: false,
+            selectedCheckboxData: [],
+            unselectedCheckboxData: [],
+        });
+    }, [featureDetails]);
+    console.log(isLoading, 'is loading state');
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(error_ui_1.default, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: { height: style.height, width: style.width } }, { children: (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(MyProvider_1.default, Object.assign({ value: {
+                                featureDetails,
+                                setFeatureDetails,
+                                gridData,
+                                callGrid,
+                                totalRecords
+                            } }, { children: (0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props }) })), (0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: style, gridOptions: gridOptions, onGridReady: onGridReady })] }) })) }) }));
 }
 exports.default = ParentForGrid;

package/dist/components/ag-grid/Types.js

@@ -1,14 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.ATTRIBUTEDATATYPES = void 0;
-// enum columnDatatype  {
-//   STRING=0,
-//   NUMBER=1,
-//   BOOLEAN=2,
-//   SELECT=4,
-//   CHECKBOX=5,
-//   MULTISELECT=6
-// }
 var ATTRIBUTEDATATYPES;
 (function (ATTRIBUTEDATATYPES) {
     ATTRIBUTEDATATYPES["STRING"] = "string";

package/dist/components/ag-grid/advancedFeature/advanced-feature.js

@@ -6,7 +6,11 @@ const global_search_1 = tslib_1.__importDefault(require("./global-search"));
 const custom_sort_1 = tslib_1.__importDefault(require("./custom-sort"));
 const record_detail_1 = tslib_1.__importDefault(require("./record-detail"));
 const filter_1 = tslib_1.__importDefault(require("./filter/filter"));
-function AdvancedFeatures({ featureDetails, setFeatureDetails, columnData, props, callGrid }) {
-    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(0, jsx_runtime_1.jsx)(global_search_1.default, { featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder }), (0, jsx_runtime_1.jsx)(filter_1.default, { columnData: columnData, featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, callBackForSelect: props === null || props === void 0 ? void 0 : props.myInputData, callGrid: callGrid })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex " }, { children: [(0, jsx_runtime_1.jsx)(custom_sort_1.default, { columnData: columnData, featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, callGrid: callGrid }), (0, jsx_runtime_1.jsx)(record_detail_1.default, { totalLength: (props === null || props === void 0 ? void 0 : props.totalRowLength) || 100 })] }))] })));
+const refresh_grid_1 = tslib_1.__importDefault(require("./refresh-grid"));
+// import { ConditionsToDisplay } from "../Types"
+function AdvancedFeatures({ props }) {
+    const conditionsToDisplay = props === null || props === void 0 ? void 0 : props.conditionsToDisplay;
+    // const {displayFilter,displaySearch,displayRefresh,displaySort} = conditionsToDisplay
+    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex justify-content-between" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex" }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySearch) && (0, jsx_runtime_1.jsx)(global_search_1.default, { searchPlaceHolder: props === null || props === void 0 ? void 0 : props.placeholder }), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayFilter) && (0, jsx_runtime_1.jsx)(filter_1.default, { callBackForSelect: props === null || props === void 0 ? void 0 : props.myInputData })] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex " }, { children: [(conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displayRefresh) && (0, jsx_runtime_1.jsx)(refresh_grid_1.default, {}), (conditionsToDisplay === null || conditionsToDisplay === void 0 ? void 0 : conditionsToDisplay.displaySort) && (0, jsx_runtime_1.jsx)(custom_sort_1.default, {}), (0, jsx_runtime_1.jsx)(record_detail_1.default, {})] }))] })));
 }
 exports.default = AdvancedFeatures;

package/dist/components/ag-grid/advancedFeature/custom-sort.js

@@ -9,11 +9,10 @@ const radiobutton_1 = require("primereact/radiobutton");
 const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
 const constants_1 = require("../constants");
-function Sort({ columnData, featureDetails, setFeatureDetails, callGrid }) {
+const MyProvider_1 = require("../MyProvider");
+function Sort() {
     var _a;
-    const [sortValue, setSortValue] = (0, react_1.useState)();
-    const [sortBy, setSortBy] = (0, react_1.useState)({});
-    const [isOverlayOpened, setIsOverlayOpened] = (0, react_1.useState)(false);
+    const { sortValue, setSortValue, sortBy, setSortBy, isOverlayOpened, setIsOverlayOpened, featureDetails, setFeatureDetails, callGrid, columnData } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
     const showShort = (0, react_1.useRef)(null);
     const shortType = sortValue === null || sortValue === void 0 ? void 0 : sortValue.dataType;
     const disableApply = (sortBy && sortValue) === null;
@@ -33,7 +32,6 @@ function Sort({ columnData, featureDetails, setFeatureDetails, callGrid }) {
             }
             addSortDetails(sortDetails);
             setSortValue(eachColumn);
-            // setSortBy();
         }
     };
     const onSelectSortType = (column) => {
@@ -59,7 +57,7 @@ function Sort({ columnData, featureDetails, setFeatureDetails, callGrid }) {
     };
     // Trigger action to apply
     const applyTableSort = (e) => {
-        callGrid();
+        callGrid(featureDetails);
         onClickSort(e);
         // clearSort(e)
     };

package/dist/components/ag-grid/advancedFeature/filter/filter.js

@@ -7,10 +7,11 @@ const svg_component_1 = tslib_1.__importDefault(require("../../../../directives/
 const react_1 = require("react");
 const overlaypanel_1 = require("primereact/overlaypanel");
 const querty_1 = tslib_1.__importDefault(require("./querty"));
-function FilterParent({ columnData, featureDetails, setFeatureDetails, callBackForSelect, callGrid }) {
+const MyProvider_1 = require("../../MyProvider");
+function FilterParent({ callBackForSelect }) {
+    var _a;
     const filterRef = (0, react_1.useRef)(null);
-    const [queryCount, setQueryCount] = (0, react_1.useState)(1);
-    const [queries, setQueries] = (0, react_1.useState)([0]);
+    const { columnData, featureDetails, setFeatureDetails, callGrid, queries, setQueries } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
     // Filter header
     const BulkActionHeader = (props) => {
         const { header: { label, description }, } = props;
@@ -23,15 +24,16 @@ function FilterParent({ columnData, featureDetails, setFeatureDetails, callBackF
     };
     // Reset saved filters
     const resettingFilters = () => {
-        emptyFilterQuries();
         filterRef.current.toggle(false);
-        setQueryCount(1), setQueries([0]);
+        // setQueryCount(1)
+        setQueries([0]);
+        emptyFilterQuries();
     };
     // Toggle the pop display
     const togglePopup = (e) => {
         var _a;
         (_a = filterRef.current) === null || _a === void 0 ? void 0 : _a.toggle(e);
-        setQueryCount(1), setQueries([0]);
+        // setQueryCount(1)
     };
     // Empty filterQuries
     const emptyFilterQuries = () => {
@@ -39,33 +41,48 @@ function FilterParent({ columnData, featureDetails, setFeatureDetails, callBackF
     };
     // OnClick to +
     const actionOnPlus = () => {
-        setQueryCount((prevCount) => prevCount + 1);
-        setQueries((prevQueries) => [...prevQueries, queryCount]);
+        // setQueryCount((prevCount) => prevCount + 1);
+        const addLength = queries[queries.length - 1] + 1;
+        const updatedQureis = [...queries];
+        updatedQureis.push(addLength);
+        setQueries(updatedQureis);
     };
     // OnClick to - 
     const actionOnMinus = (index) => {
         var _a;
         const filterQuries = (_a = featureDetails.filterQueries) === null || _a === void 0 ? void 0 : _a.filter((query) => query.idx !== index);
         setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: filterQuries }));
-        setQueryCount((prevCount) => prevCount - 1);
-        setQueries((prevQueries) => prevQueries.filter((query) => query !== index));
+        // setQueryCount((prevCount) => prevCount - 1);
+        const removeQuery = queries.filter((query) => query !== index);
+        setQueries(removeQuery);
+        // setQueries((prevQueries) => {
+        //   console.log(prevQueries,index,prevQueries.filter((query) => query !== index,'updating quries array'))
+        //  return prevQueries.filter((query) => query !== index)
+        // });
     };
     // Display query by count
     const RenderQuery = () => {
-        return queries.map((queryIndex) => ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-6 flex" }, { children: (0, jsx_runtime_1.jsx)(querty_1.default, { queryId: queryIndex, columnData: columnData, featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, callBackForSelect: callBackForSelect, actionOnMinus: actionOnMinus, actionOnPlus: actionOnPlus }) }), queryIndex)));
+        return queries.map((queryIndex, idx) => {
+            var _a, _b, _c, _d;
+            const currentQuery = (_a = featureDetails === null || featureDetails === void 0 ? void 0 : featureDetails.filterQueries.find((item) => {
+                return item.idx === queryIndex;
+            })) !== null && _a !== void 0 ? _a : {};
+            const defaultFilterValue = {
+                currentColumn: (_b = currentQuery === null || currentQuery === void 0 ? void 0 : currentQuery.selectedColumn) !== null && _b !== void 0 ? _b : {},
+                currentOperation: (_c = currentQuery === null || currentQuery === void 0 ? void 0 : currentQuery.selectedOperation) !== null && _c !== void 0 ? _c : {},
+                currentValue: (_d = currentQuery === null || currentQuery === void 0 ? void 0 : currentQuery.value) !== null && _d !== void 0 ? _d : "",
+            };
+            return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-6 flex" }, { children: (0, jsx_runtime_1.jsx)(querty_1.default, { currentIndex: idx, queryIndex: queryIndex, columnData: columnData, featureDetails: featureDetails, setFeatureDetails: setFeatureDetails, callBackForSelect: callBackForSelect, actionOnMinus: () => actionOnMinus(queryIndex), actionOnPlus: actionOnPlus, defaultFilterValue: defaultFilterValue }) }), queryIndex));
+        });
     };
     const applyFilters = () => {
         if (!featureDetails.filterQueries.length) {
             return;
         }
-        callGrid();
-        // resettingFilters()
+        callGrid(featureDetails);
+        filterRef.current.toggle(false);
     };
-    (0, react_1.useEffect)(() => {
-        var _a;
-        console.log(filterRef.current, (_a = filterRef.current) === null || _a === void 0 ? void 0 : _a.toggle, 'filter ref data');
-    }, [filterRef.current]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "hover:bg-primary-25 ml-2", onClick: (e) => { togglePopup(e); } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines" }) })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: filterRef, className: "w-45rem bulk-action-feature" }, { children: [(0, jsx_runtime_1.jsx)(BulkActionHeader, { header: {
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ text: true, className: "hover:bg-primary-25 ml-2", onClick: (e) => { togglePopup(e); } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "filter-lines" }) })), (0, jsx_runtime_1.jsxs)("button", Object.assign({ className: "bg-white", onClick: resettingFilters }, { children: ["Selected ", (_a = featureDetails === null || featureDetails === void 0 ? void 0 : featureDetails.filterQueries) === null || _a === void 0 ? void 0 : _a.length] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: filterRef, className: "w-45rem bulk-action-feature" }, { children: [(0, jsx_runtime_1.jsx)(BulkActionHeader, { header: {
                             label: "Filters",
                             description: "Streamline your search with filter",
                         } }), RenderQuery(), (0, jsx_runtime_1.jsx)(BulkActionFooter, { footer: {

package/dist/components/ag-grid/advancedFeature/filter/querty.js

@@ -11,23 +11,20 @@ const Types_1 = require("../../Types");
 const inputnumber_1 = require("primereact/inputnumber");
 const calendar_1 = require("primereact/calendar");
 const multiselect_1 = require("primereact/multiselect");
-function Querty({ queryId, columnData, featureDetails, setFeatureDetails, callBackForSelect, actionOnMinus, actionOnPlus, }) {
+function Querty({ currentIndex, queryIndex, columnData, featureDetails, setFeatureDetails, callBackForSelect, actionOnMinus, actionOnPlus, defaultFilterValue, }) {
     var _a, _b, _c;
     const [filterOperations, setFilterOperations] = (0, react_1.useState)([]);
-    const [thirdElementValue, setThirdElementValue] = (0, react_1.useState)();
+    const [thirdElementValue, setThirdElementValue] = (0, react_1.useState)(defaultFilterValue === null || defaultFilterValue === void 0 ? void 0 : defaultFilterValue.currentValue);
     const [currentFilter, setCurrentFilter] = (0, react_1.useState)({
-        currentColumn: {},
-        currentOperation: {},
-        currentValue: "",
+        currentColumn: defaultFilterValue === null || defaultFilterValue === void 0 ? void 0 : defaultFilterValue.currentColumn,
+        currentOperation: defaultFilterValue === null || defaultFilterValue === void 0 ? void 0 : defaultFilterValue.currentOperation,
+        currentValue: defaultFilterValue === null || defaultFilterValue === void 0 ? void 0 : defaultFilterValue.currentValue,
     });
     const [thirdElementOptions, setThirdElementOptions] = (0, react_1.useState)([]);
     // Assign selected columns
     const assignSelectedColumn = (column) => {
         console.log(column, "column on selected dropdown");
         setCurrentFilter(Object.assign(Object.assign({}, currentFilter), { currentColumn: column }));
-        getFilterOperations(column);
-        // if(column?.dataType == ATTRIBUTEDATATYPES.SELECT ,column?.dataType == ATTRIBUTEDATATYPES.MULTI_SELECT){
-        // }
     };
     // Get operation list based on selected column datatype
     const getFilterOperations = (column) => {
@@ -40,11 +37,16 @@ function Querty({ queryId, columnData, featureDetails, setFeatureDetails, callBa
         setFilterOperations(filterList);
     };
     // Assign selected operation
-    const assignOperation = (operation) => tslib_1.__awaiter(this, void 0, void 0, function* () {
+    const assignOperation = (operation) => {
+        setCurrentFilter(Object.assign(Object.assign({}, currentFilter), { currentOperation: operation }));
+        getOptionsFromCallback(operation);
+    };
+    // Get dropdown options from callback
+    const getOptionsFromCallback = (operation) => tslib_1.__awaiter(this, void 0, void 0, function* () {
         var _d;
         const currentColumnDataType = (_d = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _d === void 0 ? void 0 : _d.dataType;
-        setCurrentFilter(Object.assign(Object.assign({}, currentFilter), { currentOperation: operation }));
-        if (currentColumnDataType == Types_1.ATTRIBUTEDATATYPES.SELECT || currentColumnDataType == Types_1.ATTRIBUTEDATATYPES.MULTI_SELECT) {
+        if (currentColumnDataType == Types_1.ATTRIBUTEDATATYPES.SELECT ||
+            currentColumnDataType == Types_1.ATTRIBUTEDATATYPES.MULTI_SELECT) {
             let options = yield callBackForSelect(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn, operation);
             setThirdElementOptions(options);
         }
@@ -79,26 +81,42 @@ function Querty({ queryId, columnData, featureDetails, setFeatureDetails, callBa
     // Disable condition for plus button
     const disableStatusPlusButton = (index) => {
         var _a, _b;
-        console.log(index, queryId, "index and query id");
+        console.log(index, currentIndex, "index and query id");
         let status = true;
         if (((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _a === void 0 ? void 0 : _a.headerName) &&
             ((_b = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentOperation) === null || _b === void 0 ? void 0 : _b.name)) {
             status = false;
         }
-        console.log(status, "status of action");
         return status;
     };
     // Disable condition for minus button
     const disableStatusMinusButton = (index) => {
+        var _a;
         let status = true;
-        if (index > 0) {
+        if (index > 0 ||
+            (index === 0 && ((_a = featureDetails.filterQueries) === null || _a === void 0 ? void 0 : _a.length) > 1)) {
             status = false;
         }
         return status;
     };
+    // Set value for third element
     (0, react_1.useEffect)(() => {
         setCurrentFilter(Object.assign(Object.assign({}, currentFilter), { currentValue: thirdElementValue }));
     }, [thirdElementValue]);
+    // Get operation list when column is present/selected
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _a === void 0 ? void 0 : _a.headerName) {
+            getFilterOperations(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn);
+        }
+    }, [currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn]);
+    // Get third element options on load 
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if ((_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.operation) === null || _a === void 0 ? void 0 : _a.dataType) {
+            getOptionsFromCallback(currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.operation);
+        }
+    }, []);
     (0, react_1.useEffect)(() => {
         var _a, _b;
         const columnName = (_a = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _a === void 0 ? void 0 : _a.headerName;
@@ -107,19 +125,19 @@ function Querty({ queryId, columnData, featureDetails, setFeatureDetails, callBa
         console.log(columnName, operationName, updatedValue, "all conditions");
         if (columnName && operationName && updatedValue) {
             const newQuery = {
-                idx: queryId,
+                idx: queryIndex,
                 selectedColumn: currentFilter.currentColumn,
                 selectedOperation: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentOperation,
                 value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentValue,
             };
             const presentQueries = featureDetails.filterQueries;
-            presentQueries[queryId] = newQuery;
+            presentQueries[currentIndex] = newQuery;
             // presentQueries.push(newQuery)
             setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { filterQueries: presentQueries }));
         }
     }, [currentFilter]);
     return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-3 w-30rem" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-inputgroup w-full" }, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: currentFilter.currentColumn, placeholder: "Select", options: columnData, optionLabel: "headerName", onChange: (e) => assignSelectedColumn(e.value) }), (0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, { value: currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentOperation, className: "border-left-none", placeholder: "Select", options: filterOperations, optionLabel: "name", onChange: (e) => assignOperation(e.value), disabled: !((_a = currentFilter.currentColumn) === null || _a === void 0 ? void 0 : _a.headerName) }), renderUIElement(((_b = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _b === void 0 ? void 0 : _b.dataType)
                         ? (_c = currentFilter === null || currentFilter === void 0 ? void 0 : currentFilter.currentColumn) === null || _c === void 0 ? void 0 : _c.dataType
-                        : Types_1.ATTRIBUTEDATATYPES.STRING, thirdElementValue, setThirdElementValue, thirdElementOptions)] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-1" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, disabled: disableStatusPlusButton(queryId), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-circle", size: 18 }), onClick: () => actionOnPlus(queryId) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: disableStatusMinusButton(queryId), text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 18 }), onClick: () => actionOnMinus(queryId) })] }))] })));
+                        : Types_1.ATTRIBUTEDATATYPES.STRING, thirdElementValue, setThirdElementValue, thirdElementOptions)] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex gap-1" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { text: true, disabled: disableStatusPlusButton(currentIndex), icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "plus-circle", size: 18 }), onClick: () => actionOnPlus(currentIndex) }), (0, jsx_runtime_1.jsx)(button_1.Button, { disabled: disableStatusMinusButton(currentIndex), text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "minus-circle", size: 18 }), onClick: () => actionOnMinus(currentIndex) })] }))] })));
 }
 exports.default = Querty;

package/dist/components/ag-grid/advancedFeature/global-search.js

@@ -4,9 +4,11 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const inputtext_1 = require("primereact/inputtext");
 const svg_component_1 = tslib_1.__importDefault(require("../../../directives/svg-component"));
+const react_1 = require("react");
+const MyProvider_1 = require("../MyProvider");
 // import { useState } from "react";
-function Search({ featureDetails, setFeatureDetails, searchPlaceHolder }) {
-    //   const [inputValue, setInputValue] = useState("");
+function Search({ searchPlaceHolder }) {
+    const { featureDetails, setFeatureDetails } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
     return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `p-input-icon-left ${featureDetails.searchedText.length > 0 && "p-input-icon-right"}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { color: "#667085", icon: "search-lg", size: 18 }) })), featureDetails.searchedText.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer", onClick: () => {
                         setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: "" }));
                         //   setInputValue("");

package/dist/components/ag-grid/advancedFeature/record-detail.js

@@ -1,7 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const jsx_runtime_1 = require("react/jsx-runtime");
-function RecordDetail({ totalLength }) {
-    return ((0, jsx_runtime_1.jsx)("div", { children: `Total ${totalLength} records` }));
+const react_1 = require("react");
+const MyProvider_1 = require("../MyProvider");
+function RecordDetail() {
+    const { totalRecords } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
+    return ((0, jsx_runtime_1.jsx)("div", { children: `Total ${totalRecords} records` }));
 }
 exports.default = RecordDetail;

package/dist/components/ag-grid/advancedFeature/refresh-grid.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MyProvider_1 = require("../MyProvider");
+function RefreshGrid() {
+    const { removeFeaturesAndRefresh } = (0, react_1.useContext)(MyProvider_1.FeatureContext);
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("button", Object.assign({ onClick: removeFeaturesAndRefresh, className: "bg-white" }, { children: "Refresh" })) }));
+}
+exports.default = RefreshGrid;