sccoreui 6.5.41 → 6.5.43

package/dist/components/ag-grid/parent-for-grid.js

@@ -86,6 +86,11 @@ function ParentForGrid(props) {
     const isInitialLoadRef = (0, react_1.useRef)(true);
     const isRefetchingRef = (0, react_1.useRef)(false);
     const gridRef = (0, react_1.useRef)(null);
+    // Unique per instance — multiple grids can be mounted on the same screen at once
+    // (e.g. an "include" and "exclude" grid side by side), so a hardcoded id here would
+    // collide and popupParent (below) would resolve to the wrong instance's wrapper.
+    const wrapperId = (0, react_1.useId)();
+    const wrapperRef = (0, react_1.useRef)(null);
     const groupingColumns = (0, react_1.useMemo)(() => {
         var _a, _b;
         return (_b = (_a = gridData === null || gridData === void 0 ? void 0 : gridData.columnData) === null || _a === void 0 ? void 0 : _a.filter((colDef) => colDef === null || colDef === void 0 ? void 0 : colDef.rowGroup)) === null || _b === void 0 ? void 0 : _b.length;
@@ -393,8 +398,12 @@ function ParentForGrid(props) {
     //     api?.showNoRowsOverlay(); // Show the noRowsOverlayComponent only if no rows or pinned rows are present
     //   }
     // }, [gridData.rowData, props?.pinnedTopRowData]);
-    const popupParent = (0, react_1.useMemo)(() => {
-        return document.getElementById("wrapper");
+    // Resolved from this instance's own ref (not a global id lookup) once it's mounted —
+    // the ref isn't attached yet during the render that builds gridOptions the first
+    // time, so this is set via an effect rather than computed synchronously.
+    const [popupParent, setPopupParent] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        setPopupParent(wrapperRef.current);
     }, []);
     const onGridPreDestroyed = () => {
         const allData = [];
@@ -607,6 +616,6 @@ function ParentForGrid(props) {
         renderSelectField,
         renderMultiSelectField,
     ]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(error_ui_1.default, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ id: "wrapper", style: { height: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.height, width: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.width }, className: `ag-grid-container ag-grid-parent-div  ${(props === null || props === void 0 ? void 0 : props.enableAdvancedFilter) ? "hide-advance-filter" : ""}` }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(context_provider_1.default, Object.assign({ value: contextValue }, { children: ((_h = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _h === void 0 ? void 0 : _h.displayFeaturesHeader) && ((0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props })) })), gridView ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: gridViewTemplate(gridViewData) })) : ((0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: gridStyle, gridOptions: gridOptions, onGridReady: (props === null || props === void 0 ? void 0 : props.rowData) ? undefined : onGridReady, gridRef: gridRef }))] }) })) }) }));
+    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(error_ui_1.default, { children: (0, jsx_runtime_1.jsx)("div", Object.assign({ id: wrapperId, ref: wrapperRef, style: { height: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.height, width: gridStyle === null || gridStyle === void 0 ? void 0 : gridStyle.width }, className: `ag-grid-container ag-grid-parent-div  ${(props === null || props === void 0 ? void 0 : props.enableAdvancedFilter) ? "hide-advance-filter" : ""}` }, { children: (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(context_provider_1.default, Object.assign({ value: contextValue }, { children: ((_h = props === null || props === void 0 ? void 0 : props.conditionsToDisplay) === null || _h === void 0 ? void 0 : _h.displayFeaturesHeader) && ((0, jsx_runtime_1.jsx)(advanced_feature_1.default, { props: props })) })), gridView ? ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: gridViewTemplate(gridViewData) })) : ((0, jsx_runtime_1.jsx)(AgGrid_1.default, { style: gridStyle, gridOptions: gridOptions, onGridReady: (props === null || props === void 0 ? void 0 : props.rowData) ? undefined : onGridReady, gridRef: gridRef }))] }) })) }) }));
 }
 exports.default = ParentForGrid;

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

@@ -65,7 +65,7 @@ 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, resetFilterOnHide, } = 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 && (
@@ -74,19 +74,19 @@ const DropDownField = (props) => {
                 // </label>
                 (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) => {
+                        }, panelClassName: panelClassName, showClear: showClear, panelStyle: panelStyle || "", filter: filter || false, resetFilterOnHide: resetFilterOnHide !== undefined ? resetFilterOnHide : Boolean(filter), disabled: disabled, placeholder: placeholder }, field, { onChange: (e) => {
                             !unselect && field.onChange(e);
                         }, 
                         // onChange={(e: any) => onChange && onChange(e)}
                         options: options, itemTemplate: customFieldsTemplate, valueTemplate: customSelectedTemplate, optionDisabled: optionDisabled, optionLabel: optionLabel, className: ` ${errorData && touchedData ? "p-invalid" : ""} ${length === "full" ? "full_form_field" : "form_field"} ${className}`, id: name, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search", emptyMessage: emptyMessage ? emptyMessage : "No Data Found", emptyFilterMessage: emptyFilterMessage ? emptyFilterMessage : "No Results Found" }))) })), 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.jsxs)("div", Object.assign({ className: "flex flex-column gap-1" }, { children: [(0, jsx_runtime_1.jsx)(skeleton_1.Skeleton, { height: "16px", className: "w-5rem" }), (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" }) }))] })) })));
 };
 const MultiSelectField = (props) => {
-    const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter, isRequired = false, value, } = props;
+    const { errors, touched, name, length, label, placeholder, options, optional, customFieldsTemplate, optionLabel, optionDisabled, className, validate, disabled, isLoading, filter, isRequired = false, value, filterPlaceholder, resetFilterOnHide, } = props;
     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", 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, 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" }) }))] })) })));
+                (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, filterPlaceholder: filterPlaceholder ? filterPlaceholder : "Search", resetFilterOnHide: resetFilterOnHide !== undefined ? resetFilterOnHide : Boolean(filter), 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;

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

@@ -171,6 +171,7 @@ export interface DropDownFieldProps {
     value?: any;
     emptyFilterMessage?: any;
     filterPlaceholder?: string;
+    resetFilterOnHide?: boolean;
 }
 export interface MultiSelectProps {
     errors: any;
@@ -193,6 +194,8 @@ export interface MultiSelectProps {
     value?: any;
     emptyMessage?: any;
     emptyFilterMessage?: any;
+    filterPlaceholder?: string;
+    resetFilterOnHide?: boolean;
 }
 export interface TreeDropdownSelectTypes {
     displayLabelName: string;

package/package.json

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