sccoreui 6.5.31 → 6.5.33

package/dist/App.scss

@@ -89,23 +89,28 @@
   display: var(--_d-grid);
   grid-template-columns: repeat(auto-fill, min($minWidth, $maxWidth));
   width: 100%;
-  & > div {
+
+  &>div {
     width: 100%;
   }
 }
 
 .p-button {
   border: 0 !important;
+
   &.btn-primary {
     background-color: var(--primary-500);
     color: var(--_base-white);
     padding: 8px 14px;
+
     &:hover {
       background-color: var(--primary-700);
     }
+
     &:focus {
       background-color: var(--primary-700);
     }
+
     &:disabled {
       background-color: var(--primary-200);
       color: var(--_base-white);
@@ -117,30 +122,36 @@
     color: var(--gray-700);
     padding: 8px 14px;
     border: 1px solid var(--gray-300) !important;
+
     svg {
       path {
         stroke: var(--gray-700);
       }
     }
+
     &:has(svg) {
       display: flex;
       align-items: center;
       gap: 8px;
     }
+
     &:hover {
       background-color: var(--primary-25) !important;
       border: 1px solid var(--primary-100) !important;
       color: var(--primary-400) !important;
+
       svg {
         path {
           stroke: var(--primary-400);
         }
       }
     }
+
     &:focus {
       background-color: var(--primary-25) !important;
       color: var(--primary-600) !important;
     }
+
     &:disabled {
       color: var(--gray-300);
     }
@@ -150,13 +161,16 @@
     background-color: var(--primary-50);
     color: var(--primary-500);
     padding: 8px 14px;
+
     &:hover {
       background-color: var(--primary-100) !important;
       color: var(--primary-800) !important;
     }
+
     &:focus {
       background-color: var(--primary-100);
     }
+
     &:disabled {
       background-color: var(--primary-50);
       color: var(--gray-300);
@@ -169,20 +183,24 @@
     padding: 8px 14px;
     border: 0 !important;
     font-weight: 600;
+
     &:hover {
       background-color: var(--gray-50) !important;
       color: var(--gray-700) !important;
     }
+
     &:focus {
       background-color: var(--gray-50);
       color: var(--gray-700);
       border: 0px !important;
     }
+
     &:disabled {
       background-color: var(--primary-50) !important;
       color: var(--gray-300);
     }
   }
+
   &.btn-text-primary {
     background-color: var(--_base-white);
     color: var(--primary-400);
@@ -191,19 +209,23 @@
     display: flex;
     gap: 4px;
     align-items: center;
+
     &:hover {
       background-color: var(--primary-25) !important;
       color: var(--primary-600) !important;
+
       svg {
         path {
           stroke: var(--primary-600);
         }
       }
     }
+
     &:focus {
       background-color: var(--primary-25) !important;
       color: var(--primary-600) !important;
     }
+
     // &:disabled {
     //   color: var(--gray-300);
     // }
@@ -258,6 +280,7 @@ code {
   &:hover {
     transition: all 0.4 ease-in-out;
     transform: scale(1.2);
+
     svg {
       path {
         stroke: var(--red-400);
@@ -376,7 +399,8 @@ code {
 
 .col-gr-icon-active {
   width: 20px;
-  transition: width 0.4s ease; /* Ensure transition applies both ways */
+  transition: width 0.4s ease;
+  /* Ensure transition applies both ways */
 }
 
 .no-content {
@@ -588,6 +612,7 @@ code {
     }
   }
 }
+
 .table_filters_1 {
   height: auto;
   display: flex;
@@ -599,6 +624,7 @@ code {
     height: 44px !important;
     border: 1px solid var(--gray-300);
     overflow-y: auto;
+
     .p-inputtext {
       padding: 6px 20px 7px 20px;
       height: 44px !important;
@@ -615,6 +641,7 @@ code {
     border-bottom-left-radius: 0 !important;
     overflow: auto;
     height: 44px;
+
     .p-chips-token {
       .p-chips-token-label {
         white-space: nowrap;
@@ -653,6 +680,7 @@ code {
     padding-right: 18px;
     height: 100%;
   }
+
   .p-multiselect-label {
     height: 100%;
   }
@@ -791,7 +819,7 @@ code {
 }
 
 .p-datepicker .p-dropdown-panel,
-.date_nav_dropdown ~ .p-dropdown-panel {
+.date_nav_dropdown~.p-dropdown-panel {
   min-width: 6rem;
 
   .p-dropdown-items .p-dropdown-item {
@@ -835,12 +863,7 @@ div:has(ul.date_filter) .p-datepicker-group-container {
   border-left: 1px solid #dee2e6;
 }
 
-div:has(ul.date_filter)
-  .p-datepicker-group-container
-  .p-datepicker
-  table
-  td
-  > span {
+div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker table td>span {
   width: 40px;
   height: 40px;
 }
@@ -911,6 +934,7 @@ div:has(ul.date_filter) .p-datepicker-footer {
 .form_field {
   // width: 18.063rem;
   width: 100%;
+
   &:has(.p-multiselect-token) {
     .p-multiselect-label {
       padding-left: 6px;
@@ -1040,13 +1064,7 @@ button#formatOLOptions-1.fr-active::before {
   padding: 12px !important;
 }
 
-.fr-command.fr-btn
-  + .fr-dropdown-menu
-  .fr-dropdown-wrapper
-  .fr-dropdown-content
-  ul.fr-dropdown-list
-  li
-  a.fr-active {
+.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
   background: #f9fafb !important;
 }
 
@@ -1183,6 +1201,7 @@ button[aria-expanded="true"] {
   display: flex;
   justify-content: center;
   align-items: center;
+
   &.feature-hover {
     &:hover {
       svg {
@@ -1200,16 +1219,19 @@ button[aria-expanded="true"] {
   border-radius: var(--border-radius);
   color: var(--primary-400);
   background-color: transparent;
+
   svg {
     path {
       stroke: var(--primary-400);
     }
   }
+
   &:enabled {
     &:hover {
       background-color: var(--primary-25);
       border-radius: var(--border-radius);
       color: var(--primary-400);
+
       svg {
         path {
           stroke: var(--primary-400);
@@ -1234,23 +1256,28 @@ button[aria-expanded="true"] {
   &:not(.section_btn) {
     height: 28px;
   }
+
   &.section_btn {
     padding: 6px 10px 6px 6px;
   }
+
   &:hover {
     background-color: var(--primary-25);
     color: var(--primary-700);
+
     svg {
       path {
         stroke: var(--primary-700);
       }
     }
   }
+
   &:has(svg) {
     display: flex;
     align-items: center;
     gap: 4px;
   }
+
   svg {
     path {
       stroke: var(--primary-400);
@@ -1263,6 +1290,7 @@ button[aria-expanded="true"] {
   background-color: transparent;
   display: flex;
   gap: 4px;
+
   svg {
     path {
       stroke: var(--gray-700);
@@ -1293,19 +1321,24 @@ button[aria-expanded="true"] {
     align-items: center;
     font-size: 14px;
     gap: 4px;
+
     svg {
       width: 15px;
       height: 15px;
+
       path {
         stroke: var(--gray-400);
       }
     }
+
     &:hover {
+
       // border: 1px solid var(--gray-300);
       // background-color: var(--primary-25);
       svg {
         transform: scale(1.1);
         cursor: pointer;
+
         path {
           stroke: var(--gray-700);
         }
@@ -1830,18 +1863,22 @@ code {
   display: flex;
   border: 1px solid var(--gray-300);
   border-radius: 6px;
+
   input {
     border: 0px !important;
     padding-inline: 0;
+
     &:focus {
       outline: none !important;
       border: none !important;
       box-shadow: none !important;
     }
   }
+
   .p-inputnumber .p-inputnumber-input {
     padding-inline: 0;
   }
+
   &:focus-within {
     border: 1px solid var(--primary-300);
     outline: 2px solid var(--primary-50);
@@ -2035,7 +2072,7 @@ code {
 }
 
 .p-datepicker .p-dropdown-panel,
-.date_nav_dropdown ~ .p-dropdown-panel {
+.date_nav_dropdown~.p-dropdown-panel {
   min-width: 6rem;
 
   .p-dropdown-items .p-dropdown-item {
@@ -2079,12 +2116,7 @@ div:has(ul.date_filter) .p-datepicker-group-container {
   border-left: 1px solid #dee2e6;
 }
 
-div:has(ul.date_filter)
-  .p-datepicker-group-container
-  .p-datepicker
-  table
-  td
-  > span {
+div:has(ul.date_filter) .p-datepicker-group-container .p-datepicker table td>span {
   width: 40px;
   height: 40px;
 }
@@ -2133,17 +2165,21 @@ div:has(ul.date_filter) .p-datepicker-footer {
       display: none !important;
     }
   }
+
   .p-multiselect-items {
     .p-multiselect-item {
       border-radius: 4px !important;
     }
   }
 }
+
 .grid-global-search {
   width: 21rem;
+
   .p-input-icon-left {
     width: 100%;
   }
+
   .p-inputtext {
     width: 100%;
   }
@@ -2299,13 +2335,7 @@ button#formatOLOptions-1.fr-active::before {
   padding: 12px !important;
 }
 
-.fr-command.fr-btn
-  + .fr-dropdown-menu
-  .fr-dropdown-wrapper
-  .fr-dropdown-content
-  ul.fr-dropdown-list
-  li
-  a.fr-active {
+.fr-command.fr-btn+.fr-dropdown-menu .fr-dropdown-wrapper .fr-dropdown-content ul.fr-dropdown-list li a.fr-active {
   background: #f9fafb !important;
 }
 
@@ -2424,7 +2454,7 @@ button[aria-expanded="true"] {
 /////// Custom list_box_dropdown ///////////
 .list_box_dropdown {
   .p-listbox-header {
-    padding: 12px !important;
+    padding: 6px !important;
     border-top: 1px solid var(--gray-200);
   }
 
@@ -2592,6 +2622,7 @@ button[aria-expanded="true"] {
   background: #fff !important;
   box-shadow: 0px 0px 1px var(--gray-300) !important;
   overflow: hidden;
+
   .ag-root-wrapper {
     &.ag-layout-normal {
       border: 0;
@@ -2665,6 +2696,7 @@ button[aria-expanded="true"] {
   height: auto;
   border-radius: 6px !important;
   cursor: pointer;
+
   &:hover {
     background: var(--primary-25);
   }
@@ -2683,6 +2715,7 @@ button[aria-expanded="true"] {
   &.p-button-secondary {
     padding: 8px 12px;
   }
+
   &.p-button-outline {
     padding: 8px 12px;
   }
@@ -2718,8 +2751,10 @@ button[aria-expanded="true"] {
 
 .column-group {
   padding: 0 !important;
+
   .p-overlaypanel-content {
     padding: 0 !important;
+
     .column-header,
     .column-footer {
       padding: 16px;
@@ -2750,6 +2785,7 @@ button[aria-expanded="true"] {
     height: 40px;
   }
 }
+
 .filter-dropdowns {
   padding: 2px;
 
@@ -2821,6 +2857,7 @@ button[aria-expanded="true"] {
         border-top-left-radius: 0 !important;
         border-bottom-left-radius: 0 !important;
       }
+
       .p-inputwrapper-filled {
         background: #ffffff !important;
       }
@@ -2849,11 +2886,13 @@ button[aria-expanded="true"] {
     }
   }
 }
+
 .p-multiselect-header {
   .p-checkbox {
     display: none !important;
   }
 }
+
 .overlay_list_options {
   .p-overlaypanel-content {
     padding: 0;
@@ -2868,9 +2907,11 @@ button[aria-expanded="true"] {
 .modal_filter {
   width: 840px;
   overflow-x: auto;
+
   @media (max-width: 760px) {
     width: 100%;
   }
+
   @media (max-width: 1024px) {
     width: 840px;
   }
@@ -2878,6 +2919,7 @@ button[aria-expanded="true"] {
   .p-dialog-header {
     display: none;
   }
+
   .p-dialog-content {
     padding: 0px;
     border-radius: 6px;
@@ -2944,14 +2986,11 @@ button[aria-expanded="true"] {
     aspect-ratio: 1;
     border-radius: 50%;
     background:
-      radial-gradient(farthest-side, var(--primary-500) 94%, #0000) top/5px 5px
-        no-repeat,
+      radial-gradient(farthest-side, var(--primary-500) 94%, #0000) top/5px 5px no-repeat,
       conic-gradient(#0000 5%, var(--primary-500));
-    -webkit-mask: radial-gradient(
-      farthest-side,
-      #0000 calc(100% - 5px),
-      #000 0
-    );
+    -webkit-mask: radial-gradient(farthest-side,
+        #0000 calc(100% - 5px),
+        #000 0);
     animation: l13 1s infinite linear;
   }
 
@@ -2982,12 +3021,15 @@ button[aria-expanded="true"] {
   border-radius: 50%;
   position: relative;
   animation: rotate 1s linear infinite;
+
   &:nth-child(2) {
     width: 90%;
   }
+
   &:nth-child(3) {
     width: 80%;
   }
+
   &:nth-child(4) {
     width: 70%;
   }
@@ -3056,6 +3098,7 @@ button[aria-expanded="true"] {
       }
     }
   }
+
   position: relative;
   margin-right: 5px;
 
@@ -3126,6 +3169,7 @@ button[aria-expanded="true"] {
     opacity: 0;
     transform: scale3d(0.3, 0.3, 0.3);
   }
+
   100% {
     opacity: 1;
   }
@@ -3158,6 +3202,7 @@ button[aria-expanded="true"] {
 .ag-grid-container:has(.custom_class_name) {
   .ag-cell-wrapper {
     width: 100% !important;
+
     .ag-group-value {
       width: 100% !important;
     }
@@ -3195,18 +3240,22 @@ button[aria-expanded="true"] {
 .edited-record {
   background-color: var(--primary-50);
 }
+
 .non-editable {
   background-color: var(--gray-100);
 }
 
 .tagify {
   height: 200px;
+
   .tagify__input {
     color: #000;
     overflow: auto;
+
     tag[type="math"] {
       * {
         padding: 0 !important;
+
         &::before {
           box-shadow: none !important;
         }
@@ -3235,10 +3284,12 @@ button[aria-expanded="true"] {
   white-space: normal;
   word-break: break-all;
   overflow: hidden;
+
   &.line_clamp_1 {
     -webkit-line-clamp: 1;
     line-clamp: 1;
   }
+
   &.line_clamp_2 {
     -webkit-line-clamp: 2 !important;
     line-clamp: 2 !important;
@@ -3410,4 +3461,4 @@ button[aria-expanded="true"] {
 
 .max-height {
   height: 340px;
-}
+}

package/dist/components/ag-grid/advancedFeature/column-group.js

@@ -202,9 +202,13 @@ const ColumnGroup = (props) => {
                         // disabled={isDisabled}
                         color: (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0
                             ? "text-primary-400"
-                            : "text-gray-500" }), !isDisabled && (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_0 sc_icon_hover", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] })))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => setSearchedText(e.target.value), value: searchText, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 m-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.length > 0 ? (renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center pl-2" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20, className: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id)
-                                                ? "col-gr-icon-active mr-2"
-                                                : "col-gr-icon" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex gap-2 ${checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && "bg-primary-25"} hover:bg-primary-25 border-round-sm p-3 w-full` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id), onChange: (e) => onSelectedCheckbox(column, e), disabled: checkedColumns.size === 2 &&
-                                                        !checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: "max-w-18rem line-clamp line-clamp-1 inline-block text-truncate", title: column.headerName }, { children: column.headerName }))] }))] }), column === null || column === void 0 ? void 0 : column.id)))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-w-20rem p-6 text-center" }, { children: "No results found on the search criteria" }))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-footer gap-2 border-top-1 border-gray-200 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "btn-text", label: "Remove Grouping", onClick: (e) => clearListItems(e) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", label: "Save Grouping", onClick: (e) => clearSearchAndSaveGrouping(e), disabled: (checkedColumns === null || checkedColumns === void 0 ? void 0 : checkedColumns.size) === 0 })] }))] }))] }));
+                            : "text-gray-500" }), !isDisabled && (columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length) > 0 && ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center justify-content-center" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-primary-400 font-semibold ml-1" }, { children: columnsSelectedForGroup === null || columnsSelectedForGroup === void 0 ? void 0 : columnsSelectedForGroup.length })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 text-primary-400 font-semibold" }, { children: [(0, jsx_runtime_1.jsx)("p", Object.assign({ className: "ml-2 text-primary-400" }, { children: "Selected" })), (0, jsx_runtime_1.jsx)(button_1.Button, { onClick: (e) => clearListItems(e), className: "h-auto p-0 pad_0 sc_icon_hover", text: true, icon: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", color: "text-primary-400", size: 18 }) })] }))] })))] })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: columnGroupRef, className: "column-group p-1", onHide: handleHide }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-header" }, { children: [(0, jsx_runtime_1.jsx)("h3", Object.assign({ className: "my-0" }, { children: "Grouping" })), (0, jsx_runtime_1.jsx)("p", Object.assign({ className: "my-0 mb-4" }, { children: "Select one or two columns for sorting" }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-body" }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "p-input-icon-right w-full p-2 bg-gray-50" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix top-0", style: { right: "20px" } }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "search-md" }) })), (0, jsx_runtime_1.jsx)(inputtext_1.InputText, { onChange: (e) => setSearchedText(e.target.value), value: searchText, disabled: false, placeholder: "Enter any column name", className: "text-lg font-normal text-gray-500 hover:text-gray-900 w-full" })] })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column gap-1 m-1 max-h-15rem max-w-30rem overflow-y-auto" }, { children: renderColumns.length > 0 ? (renderColumns === null || renderColumns === void 0 ? void 0 : renderColumns.map((column, index) => {
+                                    var _a;
+                                    const checkboxId = `column-group-${(_a = column === null || column === void 0 ? void 0 : column.id) !== null && _a !== void 0 ? _a : index}`;
+                                    return ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center pl-2" }, { children: [checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && ((0, jsx_runtime_1.jsx)("img", { onDragStart: (e) => onDragStart(e, index), onDragOver: onDragOver, onDrop: (e) => onDrop(e, index), src: drag_and_drop_icon_png_1.default, width: 20, height: 20, className: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id)
+                                                    ? "col-gr-icon-active mr-2"
+                                                    : "col-gr-icon" })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `flex gap-2 ${checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) && "bg-primary-25"} hover:bg-primary-25 border-round-sm p-3 w-full` }, { children: [(0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { inputId: checkboxId, checked: checkedColumns.has(column === null || column === void 0 ? void 0 : column.id), onChange: (e) => onSelectedCheckbox(column, e), disabled: checkedColumns.size === 2 &&
+                                                            !checkedColumns.has(column === null || column === void 0 ? void 0 : column.id) }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: checkboxId, className: "max-w-18rem line-clamp line-clamp-1 inline-block text-truncate", title: column.headerName }, { children: column.headerName }))] }))] }), column === null || column === void 0 ? void 0 : column.id));
+                                })) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "max-w-20rem p-6 text-center" }, { children: "No results found on the search criteria" }))) }))] })), (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "column-footer gap-2 border-top-1 border-gray-200 flex align-items-center justify-content-between" }, { children: [(0, jsx_runtime_1.jsx)(button_1.Button, { className: "btn-text", label: "Remove Grouping", onClick: (e) => clearListItems(e) }), (0, jsx_runtime_1.jsx)(button_1.Button, { className: "cursor-pointer", label: "Save Grouping", onClick: (e) => clearSearchAndSaveGrouping(e), disabled: (checkedColumns === null || checkedColumns === void 0 ? void 0 : checkedColumns.size) === 0 })] }))] }))] }));
 };
 exports.default = ColumnGroup;

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

@@ -120,7 +120,8 @@ function Sort() {
                             : "text-gray-500" }) })) })), (0, jsx_runtime_1.jsxs)(overlaypanel_1.OverlayPanel, Object.assign({ ref: showShort, onShow: () => setIsOverlayOpened(true), onHide: () => setIsOverlayOpened(false), className: "w-18rem mt-2 overlay_list_options overflow-hidden", id: "sorting_columns" }, { children: [(0, jsx_runtime_1.jsx)("div", Object.assign({ className: "p-4 text-lg font-semibold  line-height-3 text-gray-900 border-bottom-1 border-gray-200" }, { children: (sortModelText === null || sortModelText === void 0 ? void 0 : sortModelText.header) ? sortModelText.header : "Column Sorting" })), (0, jsx_runtime_1.jsx)("ul", Object.assign({ className: "pl-0 m-1 max-h-10rem overflow-auto" }, { children: columnData === null || columnData === void 0 ? void 0 : columnData.map((eachColumn, index) => {
                             if (eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSortable) {
                                 const isSelected = eachColumn.field === (sortValue === null || sortValue === void 0 ? void 0 : sortValue.field);
-                                return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ title: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName, className: `${isSelected && "bg-primary-25"} cursor-pointer br-6 flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700 hover:bg-primary-25 mb-1`, style: { listStyleType: "none" }, onClick: () => onSelectSortValue(eachColumn) }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { id: "tableSort", checked: isSelected, type: "circle", value: sortValue }), (0, jsx_runtime_1.jsx)("label", Object.assign({ className: `cursor-pointer line-clamp line-clamp-1 block w-15rem ${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));
+                                const sortInputId = `tableSort-${index}`;
+                                return ((0, jsx_runtime_1.jsxs)("li", Object.assign({ title: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName, className: `${isSelected && "bg-primary-25"} cursor-pointer br-6 flex align-items-center gap-2 px-3 py-2 text-base line-height-2 text-gray-700 hover:bg-primary-25 mb-1`, style: { listStyleType: "none" }, onClick: () => onSelectSortValue(eachColumn) }, { children: [(0, jsx_runtime_1.jsx)(radiobutton_1.RadioButton, { inputId: sortInputId, checked: isSelected, type: "circle", value: sortValue }), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: sortInputId, className: `cursor-pointer line-clamp line-clamp-1 block w-15rem ${isSelected && "text-primary-400 font-semibold"}` }, { children: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.headerName }))] }), index));
                             }
                             else {
                                 return null;

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

@@ -35,10 +35,10 @@ function Search({ searchPlaceHolder }) {
         }
     }, [deboucedValue]);
     return (0, utilComponents_1.skeletonLoding)() ? ((0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", width: "336px" })) : ((0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `p-input-icon-left ${inputValue.length > 0 ? "p-input-icon-right" : ""}` }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-prefix zoom_animate" }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { color: "#667085", icon: "search-lg", size: 18, disabled: isDisabled }) })), inputValue.length > 0 && ((0, jsx_runtime_1.jsx)("span", Object.assign({ className: "p-input-suffix cursor-pointer zoom_animate", onClick: () => {
-                    var _a, _b;
-                    (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current.api) === null || _a === void 0 ? void 0 : _a.hideOverlay();
+                    var _a, _b, _c;
+                    (_b = (_a = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current) === null || _a === void 0 ? void 0 : _a.api) === null || _b === void 0 ? void 0 : _b.hideOverlay();
                     if (rowModelType === constants_1.ROWMODELTYPE.CLIENT_SIDE && quickSearch) {
-                        (_b = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current.api) === null || _b === void 0 ? void 0 : _b.setGridOption("quickFilterText", "");
+                        (_c = gridApi === null || gridApi === void 0 ? void 0 : gridApi.current.api) === null || _c === void 0 ? void 0 : _c.setGridOption("quickFilterText", "");
                     }
                     else {
                         setFeatureDetails(Object.assign(Object.assign({}, featureDetails), { searchedText: "" }));

package/dist/components/ag-grid/advancedFeature/new-filter/conditions/constants.js

@@ -229,7 +229,7 @@ const conditionsList = [
         fieldOperators: [
             Types_1.FilterDataType.STRING,
             Types_1.FilterDataType.SELECT,
-            Types_1.FilterDataType.BOOLEAN,
+            // FilterDataType.BOOLEAN,
             Types_1.FilterDataType.INTEGER,
             Types_1.FilterDataType.DECIMAL,
             Types_1.FilterDataType.CURRENCY,
@@ -247,7 +247,7 @@ const conditionsList = [
         fieldOperators: [
             Types_1.FilterDataType.STRING,
             Types_1.FilterDataType.SELECT,
-            Types_1.FilterDataType.BOOLEAN,
+            // FilterDataType.BOOLEAN,
             Types_1.FilterDataType.INTEGER,
             Types_1.FilterDataType.DECIMAL,
             Types_1.FilterDataType.CURRENCY,

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

@@ -185,6 +185,7 @@ const TableFilter = () => {
         options: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.options,
         fieldKey: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.fieldKey,
         attributeType: eachColumn.attributeType ? eachColumn.attributeType : 1,
+        isSystemAttribute: eachColumn === null || eachColumn === void 0 ? void 0 : eachColumn.isSystemAttribute
     }));
     /**
      * Default empty condition template

package/dist/components/form/form-fields/FieldLabel.js

@@ -4,6 +4,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const svg_1 = require("../../../assets/svg/svg");
 const FieldLabel = (props) => {
     return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center", style: { gap: "2px" } }, { children: [(props === null || props === void 0 ? void 0 : props.isRequired) && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (!(props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched)) ||
-                        ((props === null || props === void 0 ? void 0 : props.value) && !(props === null || props === void 0 ? void 0 : props.touched)) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningGreen, {})) : (props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningRed, {})) : ((0, jsx_runtime_1.jsx)(svg_1.Lightning, {})) })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: props === null || props === void 0 ? void 0 : props.label, className: "mb-1 text_ellipsis" }, { children: props === null || props === void 0 ? void 0 : props.label }))] })) }));
+                        ((props === null || props === void 0 ? void 0 : props.value) && !(props === null || props === void 0 ? void 0 : props.touched)) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningGreen, {})) : (props === null || props === void 0 ? void 0 : props.error) && (props === null || props === void 0 ? void 0 : props.touched) ? ((0, jsx_runtime_1.jsx)(svg_1.LightningRed, {})) : ((0, jsx_runtime_1.jsx)(svg_1.Lightning, {})) })), (0, jsx_runtime_1.jsx)("label", Object.assign({ htmlFor: props === null || props === void 0 ? void 0 : props.htmlFor, className: "mb-1 text_ellipsis" }, { children: props === null || props === void 0 ? void 0 : props.label }))] })) }));
 };
 exports.default = FieldLabel;

package/dist/components/form/form-fields/form-fields.js

@@ -19,7 +19,7 @@ const InputTextField = (props) => {
                     // <label className="font-medium text-base mb-1" htmlFor={name}>
                     //   {label}
                     // </label>
-                    (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : touched[name]) ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors === null || errors === void 0 ? void 0 : errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })));
+                    (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, htmlFor: name, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(inputtext_1.InputText, Object.assign({ maxLength: maxLength, autoComplete: "off", disabled: disabled, placeholder: placeholder }, field, { className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) }))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : touched[name]) ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors === null || errors === void 0 ? void 0 : errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })));
 };
 const InputNumberField = (props) => {
     const { errors, touched, name, length, label, placeholder, useGrouping = false, optional, setFieldValue, min, max, maxLength, className, validate, disabled, isLoading, inputClassName, icon, iconPos, maxFractionDigits, minFractionDigits, inputNumberProps = {}, isRequired = false, value, } = props;
@@ -27,7 +27,7 @@ const InputNumberField = (props) => {
                 // <label className="font-medium text-base mb-1" htmlFor={name}>
                 //   {label}
                 // </label>
-                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
+                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, htmlFor: name, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
                         const { value, name } = field;
                         return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: icon ? ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `p-input-icon-${iconPos}` }, { children: [(0, jsx_runtime_1.jsx)("i", { className: `pi pi-${icon} text-base` }), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ value: value, name: name, useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : null, minFractionDigits: minFractionDigits ? minFractionDigits : null, inputClassName: inputClassName ? inputClassName : "", min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }, inputNumberProps))] }))) : ((0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ value: value, name: name, useGrouping: useGrouping, maxFractionDigits: maxFractionDigits ? maxFractionDigits : 0, minFractionDigits: minFractionDigits ? minFractionDigits : 0, inputClassName: inputClassName ? inputClassName : "", min: min, max: max, disabled: disabled, maxLength: maxLength, placeholder: placeholder, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }, inputNumberProps))) }));
                     } })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : touched[name]) ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors === null || errors === void 0 ? void 0 : errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
@@ -40,7 +40,7 @@ const InputCurrencyField = (props) => {
                 // <label className="font-medium text-base mb-1" htmlFor={name}>
                 //   {label}
                 // </label>
-                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errorData, touched: touchedData, isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
+                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, htmlFor: name, error: errorData, touched: touchedData, isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, errors: errors, touched: touched, validate: validate }, { children: ({ field }) => {
                         const { value, name } = field;
                         return ((0, jsx_runtime_1.jsxs)("span", Object.assign({ className: `${spanClassName} currency_with_input` }, { children: [(0, jsx_runtime_1.jsxs)("div", Object.assign({ className: "flex align-items-center gap-2 w-full" }, { children: [(0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-lg text-gray-600 font-normal px-2" }, { children: currenyIcon ? currenyIcon : "$" })), (0, jsx_runtime_1.jsx)(inputnumber_1.InputNumber, Object.assign({ name: name, value: value, "aria-autocomplete": "none", minFractionDigits: 2, disabled: disabled, min: min, max: max, maxLength: maxLength, onValueChange: (e) => setFieldValue(name, e.value !== null ? e.value : min), maxFractionDigits: 2, placeholder: placeholder, className: ` customNumberField ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "" : ""} ${className}`, id: name, useGrouping: useGrouping }, inputNumberProps))] })), Boolean(value) && ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex align-items-center px-2", onClick: () => setFieldValue(name, null) }, { children: (0, jsx_runtime_1.jsx)(svg_component_1.default, { icon: "x-close", size: 15, color: "text-gray-600" }) })))] })));
                     } })), errorData && touchedData ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errorData }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) })), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) }))] })) })));
@@ -56,7 +56,7 @@ const InputTextAreaField = (props) => {
                 // <label className="font-medium text-base mb-1" htmlFor={name}>
                 //   {label}
                 // </label>
-                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: {
+                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, htmlFor: name, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ name: name, type: "textarea", validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(inputtextarea_1.InputTextarea, Object.assign({ autoComplete: "off", placeholder: placeholder, style: {
                                     height: "154px",
                                     resize: "none",
                                     overflowY: "scroll",
@@ -65,14 +65,14 @@ const InputTextAreaField = (props) => {
 const DropDownField = (props) => {
     const { errors, touched, name, length, label, onFocus, 
     // onChange,
-    placeholder, panelClassName, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading, isRequired = false, value, filterPlaceholder, emptyMessage, emptyFilterMessage, unselect = false } = props;
+    placeholder, panelClassName, showClear, options, optional, customSelectedTemplate, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, filter, panelStyle, isLoading, isRequired = false, value, filterPlaceholder, emptyMessage, emptyFilterMessage, unselect = false, } = props;
     const errorData = (0, formik_1.getIn)(errors, name);
     const touchedData = (0, formik_1.getIn)(touched, name);
     return ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "flex flex-column" }, { children: !isLoading ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [optional && ((0, jsx_runtime_1.jsxs)("label", Object.assign({ className: "font-medium text-base mb-1 w-full flex justify-content-between text_ellipsis", htmlFor: name }, { children: [label, (0, jsx_runtime_1.jsx)("span", Object.assign({ className: "text-base font-medium font-italic text-gray-600" }, { children: "Optional" }))] }))), !optional && (
                 // <label className="font-medium text-base mb-1" htmlFor={name}>
                 //   {label}
                 // </label>
-                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errorData, touched: touchedData, isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ onFocus: () => {
+                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, htmlFor: name, error: errorData, touched: touchedData, isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(dropdown_1.Dropdown, Object.assign({ onFocus: () => {
                             onFocus && onFocus();
                         }, panelClassName: panelClassName, showClear: showClear, panelStyle: panelStyle || "", filter: filter || false, disabled: disabled, placeholder: placeholder }, field, { onChange: (e) => {
                             !unselect && field.onChange(e);
@@ -86,7 +86,7 @@ const MultiSelectField = (props) => {
                 // <label className="font-medium text-base mb-1" htmlFor={name}>
                 //   {label}
                 // </label>
-                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ filter: filter ? filter : false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : touched[name]) ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors === null || errors === void 0 ? void 0 : errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
+                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, htmlFor: name, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name, validate: validate }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(multiselect_1.MultiSelect, Object.assign({ filter: filter ? filter : false, disabled: disabled, placeholder: placeholder }, field, { options: options, itemTemplate: customFieldsTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errors[name] && touched[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name }))) })), (errors === null || errors === void 0 ? void 0 : errors[name]) && (touched === null || touched === void 0 ? void 0 : touched[name]) ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors === null || errors === void 0 ? void 0 : errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)("div", Object.assign({ className: `${className ? className : "form_field"} ` }, { children: (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px" }) }))] })) })));
 };
 const PhoneNumberField = (props) => {
     const { errors, touched, name, length, values, label, placeholder, optional, position, setFieldValue, isLoading, isRequired = false, value, } = props;
@@ -109,7 +109,7 @@ const PhoneNumberField = (props) => {
                 // <label className="font-medium text-base mb-1" htmlFor={name}>
                 //   {label}
                 // </label>
-                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: values[name], limitMaxLength: true, className: ` flex align-items-center ${errors[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"}` }, field, { onChange: (e) => setFieldValue(name, e) }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", className: `full_form_field` })] })) })));
+                (0, jsx_runtime_1.jsx)(FieldLabel_1.default, { value: value, label: label, htmlFor: name, error: errors === null || errors === void 0 ? void 0 : errors[name], touched: touched === null || touched === void 0 ? void 0 : touched[name], isRequired: isRequired })), (0, jsx_runtime_1.jsx)(formik_1.Field, Object.assign({ type: "text", name: name }, { children: ({ field }) => ((0, jsx_runtime_1.jsx)(max_1.default, Object.assign({ international: true, countryCallingCodeEditable: false, withCountryCallingCode: false, countrySelectComponent: customCountry, usenationalformatfordefaultcountryvalue: "true", defaultCountry: values[name], limitMaxLength: true, className: ` flex align-items-center ${errors[name] ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"}` }, field, { onChange: (e) => setFieldValue(name, e) }))) })), errors[name] && touched[name] ? ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: errors[name] }) }))) : ((0, jsx_runtime_1.jsx)("div", Object.assign({ className: "errorField flex align-items-center text-sm" }, { children: (0, jsx_runtime_1.jsx)("span", { children: "\u00A0" }) })))] })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "mb-1 w-5rem" }), (0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "40px", className: `full_form_field` })] })) })));
 };
 // const InputGroupField = (props: any) => {
 //  value    const { errors, touched, name, length, label, placeholder, optional, position, setFieldValue, validate

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

@@ -6,7 +6,7 @@ const react_1 = require("react");
 const dropdown_1 = require("primereact/dropdown");
 const inputnumber_1 = require("primereact/inputnumber");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
-const menu_1 = require("primereact/menu");
+const menu_1 = tslib_1.__importDefault(require("../menu/menu"));
 // import { InputText } from "primereact/inputtext";
 const Tagify_1 = tslib_1.__importDefault(require("./Tagify"));
 const ExpressionRender_1 = tslib_1.__importDefault(require("./ExpressionRender"));
@@ -81,6 +81,6 @@ const FormulaComponent = (props) => {
                             return (0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, {});
                         }
                     }
-                })() }), (0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: () => setIsMenuVisible(true), onHide: () => setIsMenuVisible(false), popup: true, popupAlignment: "left", className: `w-28rem p-0 ${props === null || props === void 0 ? void 0 : props.menuClassName}`, model: menuContent, ref: priceConditioRef, id: "condition_menu_popup" })] }), "asadssadsasdsdadasd"));
+                })() }), (0, jsx_runtime_1.jsx)(menu_1.default, { onShow: () => setIsMenuVisible(true), onHide: () => setIsMenuVisible(false), popup: true, popupAlignment: "left", className: `w-28rem p-0 ${props === null || props === void 0 ? void 0 : props.menuClassName}`, model: menuContent, ref: priceConditioRef, id: "condition_menu_popup" })] }), "asadssadsasdsdadasd"));
 };
 exports.default = FormulaComponent;

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

@@ -3,11 +3,11 @@ Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const listbox_1 = require("primereact/listbox");
-const menu_1 = require("primereact/menu");
 const react_1 = require("react");
 const button_1 = require("primereact/button");
 const svg_component_1 = tslib_1.__importDefault(require("../../directives/svg-component"));
 const virtualization_component_1 = tslib_1.__importDefault(require("./virtualization-component"));
+const menu_1 = tslib_1.__importDefault(require("../menu/menu"));
 // import { InputText } from "primereact/inputtext";
 // import { Checkbox } from "primereact/checkbox";
 const ListBoxDropdown = (props) => {
@@ -119,7 +119,7 @@ const ListBoxDropdown = (props) => {
             window.removeEventListener("scroll", handleScroll);
         };
     }, [buttonPosition]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${className}` }, { children: [(0, jsx_runtime_1.jsx)(menu_1.Menu, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef, 
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", Object.assign({ className: `${className}` }, { children: [(0, jsx_runtime_1.jsx)(menu_1.default, { onShow: (e) => onShow && onShow(e), onHide: (e) => onHide && onHide(e), onFocus: (e) => onFocus && onFocus(e), popup: true, ref: optionsMenuRef, 
                     // onMouseLeave={onMouseLeaveMenu}
                     id: "popup_menu_bottom", className: menuClassName ? menuClassName : "", model: [
                         {

package/dist/components/menu/menu.js

@@ -1,4 +1,49 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
 const menu_1 = require("primereact/menu");
-exports.default = menu_1.Menu;
+const Menu = (0, react_1.forwardRef)((props, ref) => {
+    const menuRef = (0, react_1.useRef)(null);
+    const visibleRef = (0, react_1.useRef)(false);
+    (0, react_1.useImperativeHandle)(ref, () => menuRef === null || menuRef === void 0 ? void 0 : menuRef.current);
+    (0, react_1.useEffect)(() => {
+        if (!props.popup)
+            return undefined;
+        const hideMenu = (event) => {
+            var _a;
+            if (!(visibleRef === null || visibleRef === void 0 ? void 0 : visibleRef.current))
+                return;
+            (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.hide(event);
+        };
+        const handleScroll = (event) => {
+            var _a, _b;
+            const target = event.target;
+            if (!(target instanceof HTMLElement)) {
+                hideMenu(event);
+                return;
+            }
+            const menuElement = (_b = (_a = menuRef === null || menuRef === void 0 ? void 0 : menuRef.current) === null || _a === void 0 ? void 0 : _a.getElement) === null || _b === void 0 ? void 0 : _b.call(_a);
+            if (!(menuElement === null || menuElement === void 0 ? void 0 : menuElement.contains(target))) {
+                hideMenu(event);
+            }
+        };
+        window.addEventListener("scroll", handleScroll, true);
+        return () => {
+            window.removeEventListener("scroll", handleScroll, true);
+        };
+    }, [props.popup]);
+    const handleShow = (event) => {
+        var _a;
+        visibleRef.current = true;
+        (_a = props.onShow) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    const handleHide = (event) => {
+        var _a;
+        visibleRef.current = false;
+        (_a = props.onHide) === null || _a === void 0 ? void 0 : _a.call(props, event);
+    };
+    return ((0, jsx_runtime_1.jsx)(menu_1.Menu, Object.assign({ ref: menuRef }, props, { onShow: handleShow, onHide: handleHide })));
+});
+Menu.displayName = "Menu";
+exports.default = Menu;

package/dist/components/overlays/overlay-panel.js

@@ -5,19 +5,19 @@ const react_1 = require("react");
 const overlaypanel_1 = require("primereact/overlaypanel");
 const OverlayPanel = (0, react_1.forwardRef)((props, ref) => {
     const overlayRef = (0, react_1.useRef)(null);
-    (0, react_1.useImperativeHandle)(ref, () => overlayRef.current);
+    (0, react_1.useImperativeHandle)(ref, () => overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current);
     (0, react_1.useEffect)(() => {
         const handleScroll = (event) => {
             var _a, _b;
             const target = event.target;
             // Check if target is an HTMLElement
             if (!(target instanceof HTMLElement)) {
-                (_a = overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+                (_a = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) === null || _a === void 0 ? void 0 : _a.hide();
                 return;
             }
             // Hide only when scrolling outside overlay
             if (!target.closest(".p-overlaypanel")) {
-                (_b = overlayRef.current) === null || _b === void 0 ? void 0 : _b.hide();
+                (_b = overlayRef === null || overlayRef === void 0 ? void 0 : overlayRef.current) === null || _b === void 0 ? void 0 : _b.hide();
             }
         };
         window.addEventListener("scroll", handleScroll, true);

package/dist/types/components/form/form-fields/FieldLabel.d.ts

@@ -1,5 +1,6 @@
 interface FieldLabel {
     label: string;
+    htmlFor?: string;
     error: string;
     touched: boolean;
     isRequired: boolean;

package/dist/types/components/menu/menu.d.ts

@@ -1,2 +1,3 @@
-import { Menu } from 'primereact/menu';
+import { Menu as PrimeMenu, MenuProps } from "primereact/menu";
+declare const Menu: import("react").ForwardRefExoticComponent<MenuProps & import("react").RefAttributes<PrimeMenu>>;
 export default Menu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sccoreui",
-  "version": "6.5.31",
+  "version": "6.5.33",
   "description": "ui-sccore",
   "main": "./dist/index.js",
   "module": "./dist/index.js",