sccoreui 6.3.95 → 6.3.97

package/dist/App.js

@@ -6,6 +6,6 @@ require("./App.scss");
 // import Home from "./pages/home";
 const App = () => {
     // const [selectedCountries, setSelectedCountries] = useState(null);
-    return ((0, jsx_runtime_1.jsx)("div", { className: "m-6" }));
+    return (0, jsx_runtime_1.jsx)("div", { className: "m-6" });
 };
 exports.default = App;

package/dist/App.scss

@@ -1161,14 +1161,7 @@ button[aria-expanded="true"] {
   padding-inline: 6px 10px !important;
   color: var(--primary-400);
   background: transparent;
-  &.assign_value {
-    .p-button-label {
-      max-width: 120px;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
+
   &:not(.section_btn) {
     height: 28px;
   }
@@ -1196,6 +1189,23 @@ button[aria-expanded="true"] {
   }
 }
 
+.p-button.data_label {
+  color: var(--gray-600);
+  background-color: transparent;
+  display: flex;
+  gap: 4px;
+  svg {
+    path {
+      stroke: var(--gray-700);
+    }
+  }
+
+  &:hover {
+    background-color: var(--gray-200);
+    color: var(--gray-700);
+  }
+}
+
 .list_box_chips {
   display: flex;
   flex-wrap: wrap;

package/dist/components/formula-template/FormulaCoponent.js

@@ -28,7 +28,7 @@ const FormulaComponent = (props) => {
                                                 ? props === null || props === void 0 ? void 0 : props.headerLabel
                                                 : "Configure Value" })), (0, jsx_runtime_1.jsx)("span", { children: (props === null || props === void 0 ? void 0 : props.headerDescription)
                                                 ? props === null || props === void 0 ? void 0 : props.headerDescription
-                                                : "Select price attribute and perform calculater." })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle", size: 16 }) }))] }))), (0, jsx_runtime_1.jsx)(Tagify_1.default, { formulaOperators: props.formulaOperators, fieldOptions: fieldOptions, formulaValue: props === null || props === void 0 ? void 0 : props.formulaValue })] }), "formula__dev"));
+                                                : "Select price attribute and perform calculater." })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "help-circle", size: 16 }) }))] }))), (0, jsx_runtime_1.jsx)(Tagify_1.default, { formulaOperators: props.formulaOperators, fieldOptions: fieldOptions, formulaValue: props === null || props === void 0 ? void 0 : props.formulaValue, priceConditioRef: priceConditioRef, onChange: (e) => (props === null || props === void 0 ? void 0 : props.onSaveFormula) && (props === null || props === void 0 ? void 0 : props.onSaveFormula(e)) })] }), "formula__dev"));
             },
         },
     ];

package/dist/components/formula-template/Tagify.js

@@ -11,8 +11,9 @@ const TagifyComponent = (props) => {
     var _a;
     const tagifyRef = (0, react_1.useRef)(null);
     const saveBtnRef = (0, react_1.useRef)(null);
-    // const inputValue = `[[{"id": "660ab8748140c009b0af99a2","value": "Test1","code": "34sdf","price": 46}]] + 8 + [[{"id": "660abaee8140c009b0afa3ef","value": "Test2","code": "t34sdf","price": 4}]] + 86`;
-    const inputValue = (props === null || props === void 0 ? void 0 : props.formulaValue) ? props === null || props === void 0 ? void 0 : props.formulaValue : "";
+    const inputValue = (props === null || props === void 0 ? void 0 : props.formulaValue)
+        ? props === null || props === void 0 ? void 0 : props.formulaValue.replaceAll("​", "")
+        : "";
     let tagifyInstance;
     (0, react_1.useEffect)(() => {
         // Initialize tagify with new keyword and options
@@ -29,7 +30,7 @@ const TagifyComponent = (props) => {
                 maxItems: 10,
                 classname: "tags-look",
                 enabled: 1,
-                closeOnSelect: false,
+                closeOnSelect: true,
                 searchKeys: ["value"],
                 highlightFirst: true,
                 position: "text",
@@ -87,15 +88,19 @@ const TagifyComponent = (props) => {
         }, true);
         tagifyInstance.on("change input", onInput);
         tagifyInstance.on("change", onChange);
-        function onChange() {
+        function onChange(e) {
             setTimeout(() => {
                 onCalculateSum();
             }, 500);
+            e.preventDefault();
+            e.stopPropagation();
         }
-        function onInput() {
+        function onInput(e) {
             setTimeout(() => {
                 onCalculateSum();
             }, 500);
+            e.preventDefault();
+            e.stopPropagation();
         }
         onCalculateSum();
         // Clean up the event listener and custom style on unmount
@@ -243,7 +248,7 @@ const TagifyComponent = (props) => {
             }
             catch (error) {
                 // Handle evaluation errors
-                console.error("Formula evaluation error:", error);
+                // console.error("Formula evaluation error:", error);
                 if (saveBtnRef.current) {
                     saveBtnRef.current.disabled = true;
                 }
@@ -251,7 +256,7 @@ const TagifyComponent = (props) => {
         }
     };
     // Function to get the cursor position and add operator symbol
-    const addPlusAtCursor = (operator) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const addOperatorAtCursor = (operator) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
         var _b;
         if (tagifyRef.current) {
             tagifyRef.current.value = ((_b = tagifyRef === null || tagifyRef === void 0 ? void 0 : tagifyRef.current) === null || _b === void 0 ? void 0 : _b.value) + operators[operator];
@@ -262,10 +267,16 @@ const TagifyComponent = (props) => {
         }, 1000);
     });
     return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "condition_section border-top-1 border-bottom-1 border-gray-200" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "h-2rem px-4 border-bottom-1 flex column-gap-2 align-items-center border-gray-200" }, { children: props.formulaOperators.map((operator, index) => {
-                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator flex align-items-center justify-content-center text-lg w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm", onClick: () => addPlusAtCursor(operator) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-bold" }, { children: operators[operator] })) }), "formula__operator_" + index), (0, jsx_runtime_1.jsx)("span", { className: "operator_divider" })] }));
-                        }) })), (0, jsx_runtime_1.jsx)("input", { ref: tagifyRef, type: "text", placeholder: "Enter text or tags...", value: inputValue })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_footer_section flex align-items-center p-2 gap-2 ${props === null || props === void 0 ? void 0 : props.footerTemplateClassName}` }, { children: (props === null || props === void 0 ? void 0 : props.footerTemplate) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.footerTemplate })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover border-round-md", onClick: () => {
+                            return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "condition_operator flex align-items-center justify-content-center text-lg w-2 sc_icon_hover cursor-pointer hover:bg-primary-50 border-round-sm", onClick: () => addOperatorAtCursor(operator) }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "text-lg font-bold" }, { children: operators[operator] })) }), "formula__operator_" + index), (0, jsx_runtime_1.jsx)("span", { className: "operator_divider" }, "operator_divider_" + index)] }));
+                        }) })), (0, jsx_runtime_1.jsx)("input", { ref: tagifyRef, type: "text", placeholder: "Enter text or tags...", onChange: () => { }, value: inputValue })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `condition_footer_section flex align-items-center p-2 gap-2 ${props === null || props === void 0 ? void 0 : props.footerTemplateClassName}` }, { children: (props === null || props === void 0 ? void 0 : props.footerTemplate) ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: props === null || props === void 0 ? void 0 : props.footerTemplate })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "w-6 px-4 py-2 hover:bg-primary-50 cursor-pointer sc_icon_hover border-round-md", onClick: (e) => {
+                                var _a, _b;
                                 // setContent(props?.formulaValue);
-                                // priceConditioRef.current.toggle(e);
-                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ ref: saveBtnRef, disabled: (_a = saveBtnRef === null || saveBtnRef === void 0 ? void 0 : saveBtnRef.current) === null || _a === void 0 ? void 0 : _a.disabled, className: "w-6 px-4 py-2 bg-primary-50 cursor-pointer sc_icon_hover border-round-md flex justify-content-center align-items-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20 }) }))] })) }))] }));
+                                (_b = (_a = props === null || props === void 0 ? void 0 : props.priceConditioRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.hide(e);
+                            } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 20 }) })), (0, jsx_runtime_1.jsx)(button_1.Button, Object.assign({ ref: saveBtnRef, onClick: (e) => {
+                                var _a, _b;
+                                saveBtnRef.current.disabled = true;
+                                (props === null || props === void 0 ? void 0 : props.onChange) && (props === null || props === void 0 ? void 0 : props.onChange(tagifyRef === null || tagifyRef === void 0 ? void 0 : tagifyRef.current));
+                                (_b = (_a = props === null || props === void 0 ? void 0 : props.priceConditioRef) === null || _a === void 0 ? void 0 : _a.current) === null || _b === void 0 ? void 0 : _b.hide(e);
+                            }, disabled: (_a = saveBtnRef === null || saveBtnRef === void 0 ? void 0 : saveBtnRef.current) === null || _a === void 0 ? void 0 : _a.disabled, className: "w-6 px-4 py-2 bg-primary-50 cursor-pointer sc_icon_hover border-round-md flex justify-content-center align-items-center" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "check", size: 20 }) }))] })) }))] }));
 };
 exports.default = TagifyComponent;

package/dist/components/list-box-dropdown/list-box-dropdown.js

@@ -136,10 +136,7 @@ const ListBoxDropdown = (props) => {
                                             ? emptyFilterMessage
                                             : "No Results Found", emptyMessage: emptyMessage ? emptyMessage : "No Data Found" }), footeTemplate && (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: footeTemplate() })] }))),
                         },
-                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !dataLabel ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), title: label })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ onClick: (event) => optionsMenuRef.current.toggle(event), title: label, className: "listbox_label" }, { children: dataLabel }))) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", 
-                            // className={`list_box_button focus:shadow-none p-0 h-max h-auto mx-2`}
-                            // link={link ? true : false}
-                            icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, title: label }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
+                    ] }), !showChips ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: !dataLabel ? ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), title: label })) : ((0, jsx_runtime_1.jsx)(button_1.Button, { type: "button", icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, className: "data_label", title: dataLabel })) })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex flex-wrap gap-2" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: `list_box_btn ${type === "sectionHeader" ? "section_btn" : ""}`, link: link ? true : false, icon: labelIcon ? labelIcon : "", size: labelIconSize ? labelIconSize : "", iconPos: labelIconPos ? labelIconPos : "", label: label, onClick: (event) => optionsMenuRef.current.toggle(event), "aria-controls": "popup_menu_right", "aria-haspopup": true, ref: buttonRef, title: label }), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: `list_box_chips ${chipsParentClassName}` }, { children: selectedItems &&
                                 (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.map((item, index) => {
                                     var _a, _b, _c, _d;
                                     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: isDraggable !== undefined ? ((0, jsx_runtime_1.jsx)("li", Object.assign({ draggable: isDraggable, onDragStart: (e) => handleDragStart(e, index), onDragOver: (e) => handleDragOver(e), onDrop: (e) => handleDrop(e, index), className: `select-none ${chipClassName ? chipClassName : "list_box_chip"}    ${showRemoveIcon ? "relative text-gray-700" : ""}` }, { children: chipTemplate ? (chipTemplate(item)) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-truncate max-w-10rem inline-block", title: typeof item === "object"

package/dist/pages/RowGroupingServerside/DragandDropFeatures.js

@@ -0,0 +1,49 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("@ag-grid-community/styles/ag-grid.css");
+require("@ag-grid-community/styles/ag-theme-quartz.css");
+const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
+const constants_1 = require("../../components/ag-grid/constants");
+const type_1 = require("../../components/types/type");
+const dummyData_1 = require("./dummyData");
+const DragAndDropFeatureTesting = () => {
+    const containerStyle = (0, react_1.useMemo)(() => ({ width: "100%", height: "500px" }), []);
+    const gridStyle = (0, react_1.useMemo)(() => ({ height: "500px", width: "100%" }), []);
+    const [columnDefs] = (0, react_1.useState)([
+        { field: "employeeId", rowDrag: true, suppressFillHandle: true },
+        { field: "employeeName", },
+        { field: "jobTitle" },
+        { field: "employmentType" },
+    ]);
+    const defaultColDef = (0, react_1.useMemo)(() => {
+        return {
+            width: 240,
+            flex: 1,
+            sortable: false,
+        };
+    }, []);
+    const getRowData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        debugger;
+        var allRows = yield (0, dummyData_1.getNormalData)();
+        const result = { rowData: allRows };
+        return result;
+    });
+    const initialConditions = {
+        displayAdvancedFilter: false,
+        displaySort: true,
+        displayFeaturesHeader: true,
+        displaySearch: type_1.VisibilityState.ENABLE,
+        displayFilter: type_1.VisibilityState.ENABLE
+    };
+    const gridApi = (0, react_1.useRef)(null);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: gridStyle, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { getGridRef: gridApi, columnData: columnDefs, style: { height: "500px" }, 
+                // rowData={dummyData}
+                getRowData: getRowData, conditionsToDisplay: initialConditions, rowModelType: constants_1.ROWMODELTYPE.CLIENT_SIDE, shouldRefetch: false, filterConditions: [
+                    { id: 1, label: "AND" },
+                    { id: 2, label: "OR" },
+                ], columnDefs: columnDefs, defaultColDef: defaultColDef, rowDragManaged: true }) })) })));
+};
+exports.default = DragAndDropFeatureTesting;

package/dist/pages/RowGroupingServerside/RowGroupingServerSide.js

@@ -0,0 +1,125 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+require("@ag-grid-community/styles/ag-grid.css");
+require("@ag-grid-community/styles/ag-theme-quartz.css");
+const core_1 = require("@ag-grid-community/core");
+const column_tool_panel_1 = require("@ag-grid-enterprise/column-tool-panel");
+const menu_1 = require("@ag-grid-enterprise/menu");
+const row_grouping_1 = require("@ag-grid-enterprise/row-grouping");
+const server_side_row_model_1 = require("@ag-grid-enterprise/server-side-row-model");
+const dummyData_1 = require("./dummyData");
+const parent_for_grid_1 = tslib_1.__importDefault(require("../../components/ag-grid/parent-for-grid"));
+const constants_1 = require("../../components/ag-grid/constants");
+const type_1 = require("../../components/types/type");
+core_1.ModuleRegistry.registerModules([
+    column_tool_panel_1.ColumnsToolPanelModule,
+    menu_1.MenuModule,
+    row_grouping_1.RowGroupingModule,
+    server_side_row_model_1.ServerSideRowModelModule,
+]);
+const GridRowGroupingSSRM = () => {
+    const containerStyle = (0, react_1.useMemo)(() => ({ width: "100%", height: "500px" }), []);
+    const gridStyle = (0, react_1.useMemo)(() => ({ height: "500px", width: "100%" }), []);
+    const [text, setText] = (0, react_1.useState)("");
+    const [columnDefs] = (0, react_1.useState)([
+        { field: "employeeId", },
+        { field: "employeeName", },
+        { field: "jobTitle" },
+        { field: "employmentType" },
+    ]);
+    const defaultColDef = (0, react_1.useMemo)(() => {
+        return {
+            width: 240,
+            flex: 1,
+            sortable: false,
+        };
+    }, []);
+    const autoGroupColumnDef = (0, react_1.useMemo)(() => {
+        return {
+            field: "employeeName",
+            headerName: `Search Results`,
+            headerCheckboxSelection: true,
+            cellRendererParams: {
+                innerRenderer: () => {
+                    // Add custom styling or content to the group label
+                    return ((0, jsx_runtime_1.jsx)("div", { children: "kjasdnfkjasdf" }));
+                },
+                checkbox: true,
+            },
+        };
+    }, []);
+    const isServerSideGroupOpenByDefault = (0, react_1.useCallback)((params) => {
+        // open first two levels by default
+        if (text === "") {
+            return false;
+        }
+        return params.rowNode.level < 2;
+    }, [text]);
+    const isServerSideGroup = (0, react_1.useCallback)((dataItem) => {
+        // indicate if node is a group
+        return dataItem.group;
+    }, []);
+    const getServerSideGroupKey = (0, react_1.useCallback)((dataItem) => {
+        // specify which group key to use
+        return dataItem.id;
+    }, []);
+    const getRowData = (a, b, c, d) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+        console.log(a, b);
+        console.log(c, d, "params");
+        setText(c.searchedText);
+        var allRows = yield (0, dummyData_1.getAllData)(c.searchedText);
+        const result = { rowData: allRows };
+        return result;
+        // setTimeout(() => {
+        //     params.success(result);
+        // }, 200);
+    });
+    // const onGridReady = useCallback((params: GridReadyEvent) => {
+    //     params.api!.setGridOption("serverSideDatasource", { getRows: getData });
+    // }, []);
+    const initialConditions = {
+        displayAdvancedFilter: false,
+        displaySort: true,
+        displayFeaturesHeader: true,
+        displaySearch: type_1.VisibilityState.ENABLE,
+        displayFilter: type_1.VisibilityState.ENABLE
+    };
+    const rowSelection = (0, react_1.useMemo)(() => {
+        return {
+            mode: "multiRow",
+        };
+    }, []);
+    const gridApi = (0, react_1.useRef)(null);
+    const onSelectionChanged = (0, react_1.useCallback)(() => {
+        const selectedRows = gridApi.current.api.getServerSideSelectionState(); // Get selected rows
+        // const allRowsSelected = gridApi.current.api.getSelectedRows().length === gridApi.current.api.getDisplayedRowCount();
+        console.log("Selected rows: ", selectedRows);
+        console.log("Selected----- ");
+        // If all rows are selected, you can perform your custom logic
+    }, [gridApi]);
+    // const onFilterTextBoxChanged = useCallback(() => {
+    //     const cahed = gridApi.current.api.getCacheBlockState();  // See loaded blocks
+    //     gridApi.current.api.forEachNode((node) => console.log(node.data, cahed, "cache"));  // Access cached rows
+    //     // gridApi.current!.api.setGridOption(
+    //     //   "quickFilterText",
+    //     //   (document.getElementById("filter-text-box") as HTMLInputElement).value,
+    //     // );
+    // }, []);
+    return ((0, jsx_runtime_1.jsx)("div", Object.assign({ style: containerStyle }, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ style: gridStyle, className: "ag-theme-quartz" }, { children: (0, jsx_runtime_1.jsx)(parent_for_grid_1.default, { getGridRef: gridApi, columnData: columnDefs, style: { height: "500px" }, getRowData: getRowData, conditionsToDisplay: initialConditions, rowModelType: constants_1.ROWMODELTYPE.SERVER_SIDE, shouldRefetch: false, filterConditions: [
+                    { id: 1, label: "AND" },
+                    { id: 2, label: "OR" },
+                ], 
+                // GroupHeaderComponent={GroupHeaderComponent}
+                enableCheckboxForGroupHeader: true, 
+                // AdvancedFilter={AdvancedFilter}
+                serverSideInitialRowCount: 3, treeData: true, gridProps: {
+                    isServerSideGroupOpenByDefault,
+                    isServerSideGroup,
+                    getServerSideGroupKey,
+                    rowSelection: "multiple"
+                }, columnDefs: columnDefs, defaultColDef: defaultColDef, autoGroupColumnDef: autoGroupColumnDef, rowSelection: rowSelection, onSelectionChanged: onSelectionChanged }) })) })));
+};
+exports.default = GridRowGroupingSSRM;

package/dist/pages/RowGroupingServerside/dummyData.js

@@ -0,0 +1,226 @@
+"use strict";
+// const allDummyData = [
+//     {
+//         "employeeId": 101,
+//         "employeeName": "Erica Rogers",
+//         "jobTitle": "CEO",
+//         "employmentType": "Permanent",
+//         "children": [
+//             {
+//                 "employeeId": 102,
+//                 "employeeName": "Malcolm Barrett",
+//                 "jobTitle": "Exec. Vice President",
+//                 "employmentType": "Permanent",
+//                 "children": [
+//                     {
+//                         "employeeId": 103,
+//                         "employeeName": "Esther Baker",
+//                         "jobTitle": "Director of Operations",
+//                         "employmentType": "Permanent",
+//                         "children": [
+//                             {
+//                                 "employeeId": 104,
+//                                 "employeeName": "Brittany Hanson",
+//                                 "jobTitle": "Fleet Coordinator",
+//                                 "employmentType": "Permanent",
+//                                 "children": [
+//                                     {
+//                                         "employeeId": 105,
+//                                         "employeeName": "Leah Flowers",
+//                                         "jobTitle": "Parts Technician",
+//                                         "employmentType": "Contract"
+//                                     },
+//                                     {
+//                                         "employeeId": 106,
+//                                         "employeeName": "Tammy Sutton",
+//                                         "jobTitle": "Service Technician",
+//                                         "employmentType": "Contract"
+//                                     }
+//                                 ]
+//                             },
+//                             {
+//                                 "employeeId": 107,
+//                                 "employeeName": "Derek Paul",
+//                                 "jobTitle": "Inventory Control",
+//                                 "employmentType": "Permanent"
+//                             }
+//                         ]
+//                     },
+//                     {
+//                         "employeeId": 108,
+//                         "employeeName": "Francis Strickland",
+//                         "jobTitle": "VP Sales",
+//                         "employmentType": "Permanent",
+//                         "children": [
+//                             {
+//                                 "employeeId": 109,
+//                                 "employeeName": "Morris Hanson",
+//                                 "jobTitle": "Sales Manager",
+//                                 "employmentType": "Permanent"
+//                             },
+//                             {
+//                                 "employeeId": 110,
+//                                 "employeeName": "Todd Tyler",
+//                                 "jobTitle": "Sales Executive",
+//                                 "employmentType": "Contract"
+//                             },
+//                             {
+//                                 "employeeId": 111,
+//                                 "employeeName": "Bennie Wise",
+//                                 "jobTitle": "Sales Executive",
+//                                 "employmentType": "Contract"
+//                             },
+//                             {
+//                                 "employeeId": 112,
+//                                 "employeeName": "Joel Cooper",
+//                                 "jobTitle": "Sales Executive",
+//                                 "employmentType": "Permanent"
+//                             }
+//                         ]
+//                     }
+//                 ]
+//             },
+//             {
+//                 "employeeId": 113,
+//                 "employeeName": "Luke McBride",
+//                 "jobTitle": "Exec. Vice President",
+//                 "employmentType": "Permanent",
+//                 "children": [
+//                     {
+//                         "employeeId": 114,
+//                         "employeeName": "Sarah Baker",
+//                         "jobTitle": "Director of Operations",
+//                         "employmentType": "Permanent",
+//                         "children": [
+//                             {
+//                                 "employeeId": 115,
+//                                 "employeeName": "Mason Hanson",
+//                                 "jobTitle": "Fleet Coordinator",
+//                                 "employmentType": "Permanent",
+//                                 "children": [
+//                                     {
+//                                         "employeeId": 116,
+//                                         "employeeName": "Hannah Flowers",
+//                                         "jobTitle": "Parts Technician",
+//                                         "employmentType": "Contract"
+//                                     },
+//                                     {
+//                                         "employeeId": 117,
+//                                         "employeeName": "Rob Sutton",
+//                                         "jobTitle": "Service Technician",
+//                                         "employmentType": "Contract"
+//                                     }
+//                                 ]
+//                             },
+//                             {
+//                                 "employeeId": 118,
+//                                 "employeeName": "Paul Smith",
+//                                 "jobTitle": "Inventory Control",
+//                                 "employmentType": "Permanent"
+//                             }
+//                         ]
+//                     },
+//                     {
+//                         "employeeId": 119,
+//                         "employeeName": "Adam Newman",
+//                         "jobTitle": "VP Sales",
+//                         "employmentType": "Permanent",
+//                         "children": [
+//                             {
+//                                 "employeeId": 120,
+//                                 "employeeName": "John Smith",
+//                                 "jobTitle": "Sales Manager",
+//                                 "employmentType": "Permanent"
+//                             },
+//                             {
+//                                 "employeeId": 121,
+//                                 "employeeName": "Alice Grant",
+//                                 "jobTitle": "Sales Executive",
+//                                 "employmentType": "Contract"
+//                             },
+//                             {
+//                                 "employeeId": 122,
+//                                 "employeeName": "Ben Hill",
+//                                 "jobTitle": "Sales Executive",
+//                                 "employmentType": "Contract"
+//                             },
+//                             {
+//                                 "employeeId": 123,
+//                                 "employeeName": "Joe Cooper",
+//                                 "jobTitle": "Sales Executive",
+//                                 "employmentType": "Permanent"
+//                             }
+//                         ]
+//                     }
+//                 ]
+//             }
+//         ]
+//     }
+// ]
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.dummyData = exports.getNormalData = exports.getAllData = void 0;
+const tslib_1 = require("tslib");
+// const allDummyDataMoreChildren = [
+//     {
+//         employeeId: generateUniqueId(),
+//         employeeName: "Parent 1",
+//         jobTitle: "CEO",
+//         employmentType: "Permanent",
+//         group: true,
+//     },
+//     // Repeat the structure for Parent 3 through Parent 10
+// ];
+function generateUniqueId() {
+    const timestamp = Date.now().toString().slice(-4); // Last 4 digits of timestamp
+    const randomPart = Math.floor(100000 + Math.random() * 900000).toString(); // 6 random digits
+    return timestamp + randomPart; // 10-digit unique ID
+}
+let k = 1;
+function delayWithValue(ms, value) {
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            resolve(value); // Return the value after the delay
+        }, ms);
+    });
+}
+const getAllData = (text) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    console.log(k, "called", text);
+    k = k + 1;
+    const data = yield delayWithValue(500, [
+        {
+            id: generateUniqueId(),
+            employeeName: "Parent 1",
+            jobTitle: "CEO" + generateUniqueId(),
+            employmentType: "Permanent",
+            group: true,
+        },
+        // Repeat the structure for Parent 3 through Parent 10
+    ]);
+    return data;
+});
+exports.getAllData = getAllData;
+const getNormalData = () => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
+    const data = yield delayWithValue(500, [{
+            id: 1,
+            employeeName: "Parent 1",
+            jobTitle: "CEO",
+            employmentType: "Permanent",
+            group: true,
+        }]);
+    return data;
+});
+exports.getNormalData = getNormalData;
+exports.dummyData = [{
+        id: 1,
+        employeeName: "Parent 1",
+        jobTitle: "CEO",
+        employmentType: "Permanent",
+        group: true,
+    },
+    {
+        id: 3,
+        employeeName: "Parent 3",
+        jobTitle: "CEO",
+        employmentType: "Permanent",
+        group: true,
+    }];

package/dist/pages/VirtualScrollDropDown/VirtualScrollDropDown.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const jsx_runtime_1 = require("react/jsx-runtime");
+const VirtualScrollDropDown_1 = tslib_1.__importDefault(require("../../components/virtual-scroll-drop-down/VirtualScrollDropDown"));
+const VirtualScrollDropDownzPage = () => {
+    return ((0, jsx_runtime_1.jsx)(VirtualScrollDropDown_1.default, {}));
+};
+exports.default = VirtualScrollDropDownzPage;