ag-grid-react
Version:
AG Grid React Component
1,298 lines (1,258 loc) • 123 kB
JavaScript
"use strict";
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// packages/ag-grid-react/src/index.ts
var src_exports = {};
__export(src_exports, {
AgGridReact: () => AgGridReact,
CustomComponentContext: () => CustomContext,
getInstance: () => getInstance,
useGridCellEditor: () => useGridCellEditor,
useGridDate: () => useGridDate,
useGridFilter: () => useGridFilter,
useGridFloatingFilter: () => useGridFloatingFilter,
useGridMenuItem: () => useGridMenuItem,
warnReactiveCustomComponents: () => warnReactiveCustomComponents
});
module.exports = __toCommonJS(src_exports);
// packages/ag-grid-react/src/agGridReact.tsx
var import_react24 = __toESM(require("react"));
// packages/ag-grid-react/src/reactUi/agGridReactUi.tsx
var import_react23 = __toESM(require("react"));
var import_ag_grid_community22 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/cellRenderer/groupCellRenderer.tsx
var import_react3 = __toESM(require("react"));
var import_ag_grid_community = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/beansContext.tsx
var import_react = __toESM(require("react"));
var BeansContext = import_react.default.createContext({});
// packages/ag-grid-react/src/reactUi/jsComp.tsx
var showJsComp = (compDetails, context, eParent, ref) => {
const doNothing = !compDetails || compDetails.componentFromFramework || context.isDestroyed();
if (doNothing) {
return;
}
const promise = compDetails.newAgStackInstance();
let comp;
let compGui;
let destroyed = false;
promise.then((c) => {
if (destroyed) {
context.destroyBean(c);
return;
}
comp = c;
compGui = comp.getGui();
eParent.appendChild(compGui);
setRef(ref, comp);
});
return () => {
destroyed = true;
if (!comp) {
return;
}
compGui?.parentElement?.removeChild(compGui);
context.destroyBean(comp);
if (ref) {
setRef(ref, void 0);
}
};
};
var setRef = (ref, value) => {
if (!ref) {
return;
}
if (ref instanceof Function) {
const refCallback = ref;
refCallback(value);
} else {
const refObj = ref;
refObj.current = value;
}
};
// packages/ag-grid-react/src/reactUi/utils.tsx
var import_react2 = __toESM(require("react"));
var import_react_dom = __toESM(require("react-dom"));
var classesList = (...list) => {
const filtered = list.filter((s) => s != null && s !== "");
return filtered.join(" ");
};
var CssClasses = class _CssClasses {
constructor(...initialClasses) {
this.classesMap = {};
initialClasses.forEach((className) => {
this.classesMap[className] = true;
});
}
setClass(className, on) {
const nothingHasChanged = !!this.classesMap[className] == on;
if (nothingHasChanged) {
return this;
}
const res = new _CssClasses();
res.classesMap = { ...this.classesMap };
res.classesMap[className] = on;
return res;
}
toString() {
const res = Object.keys(this.classesMap).filter((key) => this.classesMap[key]).join(" ");
return res;
}
};
var isComponentStateless = (Component2) => {
const hasSymbol = () => typeof Symbol === "function" && Symbol.for;
const getMemoType = () => hasSymbol() ? Symbol.for("react.memo") : 60115;
return typeof Component2 === "function" && !(Component2.prototype && Component2.prototype.isReactComponent) || typeof Component2 === "object" && Component2.$$typeof === getMemoType();
};
var reactVersion = import_react2.default.version?.split(".")[0];
var isReactVersion17Minus = reactVersion === "16" || reactVersion === "17";
function isReact19() {
return reactVersion === "19";
}
var disableFlushSync = false;
function runWithoutFlushSync(func) {
if (!disableFlushSync) {
setTimeout(() => disableFlushSync = false, 0);
}
disableFlushSync = true;
return func();
}
var agFlushSync = (useFlushSync, fn) => {
if (!isReactVersion17Minus && useFlushSync && !disableFlushSync) {
import_react_dom.default.flushSync(fn);
} else {
fn();
}
};
function getNextValueIfDifferent(prev, next, maintainOrder) {
if (next == null || prev == null) {
return next;
}
if (prev === next || next.length === 0 && prev.length === 0) {
return prev;
}
if (maintainOrder || prev.length === 0 && next.length > 0 || prev.length > 0 && next.length === 0) {
return next;
}
const oldValues = [];
const newValues = [];
const prevMap = /* @__PURE__ */ new Map();
const nextMap = /* @__PURE__ */ new Map();
for (let i = 0; i < next.length; i++) {
const c = next[i];
nextMap.set(c.instanceId, c);
}
for (let i = 0; i < prev.length; i++) {
const c = prev[i];
prevMap.set(c.instanceId, c);
if (nextMap.has(c.instanceId)) {
oldValues.push(c);
}
}
for (let i = 0; i < next.length; i++) {
const c = next[i];
const instanceId = c.instanceId;
if (!prevMap.has(instanceId)) {
newValues.push(c);
}
}
if (oldValues.length === prev.length && newValues.length === 0) {
return prev;
}
if (oldValues.length === 0 && newValues.length === next.length) {
return next;
}
if (oldValues.length === 0) {
return newValues;
}
if (newValues.length === 0) {
return oldValues;
}
return [...oldValues, ...newValues];
}
// packages/ag-grid-react/src/reactUi/cellRenderer/groupCellRenderer.tsx
var GroupCellRenderer = (0, import_react3.forwardRef)((props, ref) => {
const { registry, context } = (0, import_react3.useContext)(BeansContext);
const eGui = (0, import_react3.useRef)(null);
const eValueRef = (0, import_react3.useRef)(null);
const eCheckboxRef = (0, import_react3.useRef)(null);
const eExpandedRef = (0, import_react3.useRef)(null);
const eContractedRef = (0, import_react3.useRef)(null);
const ctrlRef = (0, import_react3.useRef)();
const [innerCompDetails, setInnerCompDetails] = (0, import_react3.useState)();
const [childCount, setChildCount] = (0, import_react3.useState)();
const [value, setValue] = (0, import_react3.useState)();
const [cssClasses, setCssClasses] = (0, import_react3.useState)(() => new CssClasses());
const [expandedCssClasses, setExpandedCssClasses] = (0, import_react3.useState)(() => new CssClasses("ag-hidden"));
const [contractedCssClasses, setContractedCssClasses] = (0, import_react3.useState)(() => new CssClasses("ag-hidden"));
const [checkboxCssClasses, setCheckboxCssClasses] = (0, import_react3.useState)(() => new CssClasses("ag-invisible"));
(0, import_react3.useImperativeHandle)(ref, () => {
return {
// force new instance when grid tries to refresh
refresh() {
return false;
}
};
});
(0, import_react3.useLayoutEffect)(() => {
return showJsComp(innerCompDetails, context, eValueRef.current);
}, [innerCompDetails]);
const setRef2 = (0, import_react3.useCallback)((eRef) => {
eGui.current = eRef;
if (!eRef) {
ctrlRef.current = context.destroyBean(ctrlRef.current);
return;
}
const compProxy = {
setInnerRenderer: (details, valueToDisplay) => {
setInnerCompDetails(details);
setValue(valueToDisplay);
},
setChildCount: (count) => setChildCount(count),
addOrRemoveCssClass: (name, on) => setCssClasses((prev) => prev.setClass(name, on)),
setContractedDisplayed: (displayed) => setContractedCssClasses((prev) => prev.setClass("ag-hidden", !displayed)),
setExpandedDisplayed: (displayed) => setExpandedCssClasses((prev) => prev.setClass("ag-hidden", !displayed)),
setCheckboxVisible: (visible) => setCheckboxCssClasses((prev) => prev.setClass("ag-invisible", !visible)),
setCheckboxSpacing: (add) => setCheckboxCssClasses((prev) => prev.setClass("ag-group-checkbox-spacing", add))
};
const groupCellRendererCtrl = registry.createDynamicBean("groupCellRendererCtrl", true);
if (groupCellRendererCtrl) {
ctrlRef.current = context.createBean(groupCellRendererCtrl);
ctrlRef.current.init(
compProxy,
eRef,
eCheckboxRef.current,
eExpandedRef.current,
eContractedRef.current,
GroupCellRenderer,
props
);
}
}, []);
const className = (0, import_react3.useMemo)(() => `ag-cell-wrapper ${cssClasses.toString()}`, [cssClasses]);
const expandedClassName = (0, import_react3.useMemo)(() => `ag-group-expanded ${expandedCssClasses.toString()}`, [expandedCssClasses]);
const contractedClassName = (0, import_react3.useMemo)(
() => `ag-group-contracted ${contractedCssClasses.toString()}`,
[contractedCssClasses]
);
const checkboxClassName = (0, import_react3.useMemo)(() => `ag-group-checkbox ${checkboxCssClasses.toString()}`, [checkboxCssClasses]);
const useFwRenderer = innerCompDetails && innerCompDetails.componentFromFramework;
const FwRenderer = useFwRenderer ? innerCompDetails.componentClass : void 0;
const useValue = innerCompDetails == null && value != null;
const escapedValue = (0, import_ag_grid_community._escapeString)(value, true);
return /* @__PURE__ */ import_react3.default.createElement(
"span",
{
className,
ref: setRef2,
...!props.colDef ? { role: ctrlRef.current?.getCellAriaRole() } : {}
},
/* @__PURE__ */ import_react3.default.createElement("span", { className: expandedClassName, ref: eExpandedRef }),
/* @__PURE__ */ import_react3.default.createElement("span", { className: contractedClassName, ref: eContractedRef }),
/* @__PURE__ */ import_react3.default.createElement("span", { className: checkboxClassName, ref: eCheckboxRef }),
/* @__PURE__ */ import_react3.default.createElement("span", { className: "ag-group-value", ref: eValueRef }, useValue && /* @__PURE__ */ import_react3.default.createElement(import_react3.default.Fragment, null, escapedValue), useFwRenderer && /* @__PURE__ */ import_react3.default.createElement(FwRenderer, { ...innerCompDetails.params })),
/* @__PURE__ */ import_react3.default.createElement("span", { className: "ag-group-child-count" }, childCount)
);
});
var groupCellRenderer_default = GroupCellRenderer;
// packages/ag-grid-react/src/shared/customComp/customComponentWrapper.ts
var import_ag_grid_community3 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/customComp/customWrapperComp.tsx
var import_react5 = __toESM(require("react"));
// packages/ag-grid-react/src/shared/customComp/customContext.ts
var import_react4 = require("react");
var CustomContext = (0, import_react4.createContext)({
setMethods: () => {
}
});
// packages/ag-grid-react/src/reactUi/customComp/customWrapperComp.tsx
var CustomWrapperComp = (params) => {
const { initialProps, addUpdateCallback, CustomComponentClass, setMethods } = params;
const [{ key, ...props }, setProps] = (0, import_react5.useState)(initialProps);
(0, import_react5.useEffect)(() => {
addUpdateCallback((newProps) => setProps(newProps));
}, []);
return /* @__PURE__ */ import_react5.default.createElement(CustomContext.Provider, { value: { setMethods } }, /* @__PURE__ */ import_react5.default.createElement(CustomComponentClass, { key, ...props }));
};
var customWrapperComp_default = (0, import_react5.memo)(CustomWrapperComp);
// packages/ag-grid-react/src/shared/reactComponent.ts
var import_react6 = require("react");
var import_react_dom2 = require("react-dom");
var import_ag_grid_community2 = require("ag-grid-community");
// packages/ag-grid-react/src/shared/keyGenerator.ts
var counter = 0;
function generateNewKey() {
return `agPortalKey_${++counter}`;
}
// packages/ag-grid-react/src/shared/reactComponent.ts
var ReactComponent = class {
constructor(reactComponent, portalManager, componentType, suppressFallbackMethods) {
this.portal = null;
this.oldPortal = null;
this.reactComponent = reactComponent;
this.portalManager = portalManager;
this.componentType = componentType;
this.suppressFallbackMethods = !!suppressFallbackMethods;
this.statelessComponent = this.isStateless(this.reactComponent);
this.key = generateNewKey();
this.portalKey = generateNewKey();
this.instanceCreated = this.isStatelessComponent() ? import_ag_grid_community2.AgPromise.resolve(false) : new import_ag_grid_community2.AgPromise((resolve) => {
this.resolveInstanceCreated = resolve;
});
}
getGui() {
return this.eParentElement;
}
/** `getGui()` returns the parent element. This returns the actual root element. */
getRootElement() {
const firstChild = this.eParentElement.firstChild;
return firstChild;
}
destroy() {
if (this.componentInstance && typeof this.componentInstance.destroy == "function") {
this.componentInstance.destroy();
}
const portal = this.portal;
if (portal) {
this.portalManager.destroyPortal(portal);
}
}
createParentElement(params) {
const componentWrappingElement = this.portalManager.getComponentWrappingElement();
const eParentElement = document.createElement(componentWrappingElement || "div");
eParentElement.classList.add("ag-react-container");
params.reactContainer = eParentElement;
return eParentElement;
}
statelessComponentRendered() {
return this.eParentElement.childElementCount > 0 || this.eParentElement.childNodes.length > 0;
}
getFrameworkComponentInstance() {
return this.componentInstance;
}
isStatelessComponent() {
return this.statelessComponent;
}
getReactComponentName() {
return this.reactComponent.name;
}
getMemoType() {
return this.hasSymbol() ? Symbol.for("react.memo") : 60115;
}
hasSymbol() {
return typeof Symbol === "function" && Symbol.for;
}
isStateless(Component2) {
return typeof Component2 === "function" && !(Component2.prototype && Component2.prototype.isReactComponent) || typeof Component2 === "object" && Component2.$$typeof === this.getMemoType();
}
hasMethod(name) {
const frameworkComponentInstance = this.getFrameworkComponentInstance();
return !!frameworkComponentInstance && frameworkComponentInstance[name] != null || this.fallbackMethodAvailable(name);
}
callMethod(name, args) {
const frameworkComponentInstance = this.getFrameworkComponentInstance();
if (this.isStatelessComponent()) {
return this.fallbackMethod(name, !!args && args[0] ? args[0] : {});
} else if (!frameworkComponentInstance) {
setTimeout(() => this.callMethod(name, args));
return;
}
const method = frameworkComponentInstance[name];
if (method) {
return method.apply(frameworkComponentInstance, args);
}
if (this.fallbackMethodAvailable(name)) {
return this.fallbackMethod(name, !!args && args[0] ? args[0] : {});
}
}
addMethod(name, callback) {
this[name] = callback;
}
init(params) {
this.eParentElement = this.createParentElement(params);
this.createOrUpdatePortal(params);
return new import_ag_grid_community2.AgPromise((resolve) => this.createReactComponent(resolve));
}
createOrUpdatePortal(params) {
if (!this.isStatelessComponent()) {
this.ref = (element) => {
this.componentInstance = element;
this.resolveInstanceCreated?.(true);
this.resolveInstanceCreated = void 0;
};
params.ref = this.ref;
}
this.reactElement = this.createElement(this.reactComponent, { ...params, key: this.key });
this.portal = (0, import_react_dom2.createPortal)(
this.reactElement,
this.eParentElement,
this.portalKey
// fixed deltaRowModeRefreshCompRenderer
);
}
createElement(reactComponent, props) {
return (0, import_react6.createElement)(reactComponent, props);
}
createReactComponent(resolve) {
this.portalManager.mountReactPortal(this.portal, this, resolve);
}
rendered() {
return this.isStatelessComponent() && this.statelessComponentRendered() || !!(!this.isStatelessComponent() && this.getFrameworkComponentInstance());
}
/*
* fallback methods - these will be invoked if a corresponding instance method is not present
* for example if refresh is called and is not available on the component instance, then refreshComponent on this
* class will be invoked instead
*
* Currently only refresh is supported
*/
refreshComponent(args) {
this.oldPortal = this.portal;
this.createOrUpdatePortal(args);
this.portalManager.updateReactPortal(this.oldPortal, this.portal);
}
fallbackMethod(name, params) {
const method = this[`${name}Component`];
if (!this.suppressFallbackMethods && !!method) {
return method.bind(this)(params);
}
}
fallbackMethodAvailable(name) {
if (this.suppressFallbackMethods) {
return false;
}
const method = this[`${name}Component`];
return !!method;
}
};
// packages/ag-grid-react/src/shared/customComp/customComponentWrapper.ts
function addOptionalMethods(optionalMethodNames, providedMethods, component) {
optionalMethodNames.forEach((methodName) => {
const providedMethod = providedMethods[methodName];
if (providedMethod) {
component[methodName] = providedMethod;
}
});
}
var CustomComponentWrapper = class extends ReactComponent {
constructor() {
super(...arguments);
this.awaitUpdateCallback = new import_ag_grid_community3.AgPromise((resolve) => {
this.resolveUpdateCallback = resolve;
});
this.wrapperComponent = customWrapperComp_default;
}
init(params) {
this.sourceParams = params;
return super.init(this.getProps());
}
addMethod() {
}
getInstance() {
return this.instanceCreated.then(() => this.componentInstance);
}
getFrameworkComponentInstance() {
return this;
}
createElement(reactComponent, props) {
return super.createElement(this.wrapperComponent, {
initialProps: props,
CustomComponentClass: reactComponent,
setMethods: (methods) => this.setMethods(methods),
addUpdateCallback: (callback) => {
this.updateCallback = () => {
callback(this.getProps());
return new import_ag_grid_community3.AgPromise((resolve) => {
setTimeout(() => {
resolve();
});
});
};
this.resolveUpdateCallback();
}
});
}
setMethods(methods) {
this.providedMethods = methods;
addOptionalMethods(this.getOptionalMethods(), this.providedMethods, this);
}
getOptionalMethods() {
return [];
}
getProps() {
return {
...this.sourceParams,
key: this.key,
ref: this.ref
};
}
refreshProps() {
if (this.updateCallback) {
return this.updateCallback();
}
return new import_ag_grid_community3.AgPromise(
(resolve) => this.awaitUpdateCallback.then(() => {
this.updateCallback().then(() => resolve());
})
);
}
};
// packages/ag-grid-react/src/shared/customComp/cellRendererComponentWrapper.ts
var CellRendererComponentWrapper = class extends CustomComponentWrapper {
refresh(params) {
this.sourceParams = params;
this.refreshProps();
return true;
}
};
// packages/ag-grid-react/src/shared/customComp/dateComponentWrapper.ts
var DateComponentWrapper = class extends CustomComponentWrapper {
constructor() {
super(...arguments);
this.date = null;
this.onDateChange = (date) => this.updateDate(date);
}
getDate() {
return this.date;
}
setDate(date) {
this.date = date;
this.refreshProps();
}
refresh(params) {
this.sourceParams = params;
this.refreshProps();
}
getOptionalMethods() {
return ["afterGuiAttached", "setInputPlaceholder", "setInputAriaLabel", "setDisabled"];
}
updateDate(date) {
this.setDate(date);
this.sourceParams.onDateChanged();
}
getProps() {
const props = super.getProps();
props.date = this.date;
props.onDateChange = this.onDateChange;
delete props.onDateChanged;
return props;
}
};
// packages/ag-grid-react/src/shared/customComp/dragAndDropImageComponentWrapper.ts
var DragAndDropImageComponentWrapper = class extends CustomComponentWrapper {
constructor() {
super(...arguments);
this.label = "";
this.icon = null;
this.shake = false;
}
setIcon(iconName, shake) {
this.icon = iconName;
this.shake = shake;
this.refreshProps();
}
setLabel(label) {
this.label = label;
this.refreshProps();
}
getProps() {
const props = super.getProps();
const { label, icon, shake } = this;
props.label = label;
props.icon = icon;
props.shake = shake;
return props;
}
};
// packages/ag-grid-react/src/shared/customComp/filterComponentWrapper.ts
var import_ag_grid_community4 = require("ag-grid-community");
var FilterComponentWrapper = class extends CustomComponentWrapper {
constructor() {
super(...arguments);
this.model = null;
this.onModelChange = (model) => this.updateModel(model);
this.onUiChange = () => this.sourceParams.filterModifiedCallback();
this.expectingNewMethods = true;
this.hasBeenActive = false;
this.awaitSetMethodsCallback = new import_ag_grid_community4.AgPromise((resolve) => {
this.resolveSetMethodsCallback = resolve;
});
}
isFilterActive() {
return this.model != null;
}
doesFilterPass(params) {
return this.providedMethods.doesFilterPass(params);
}
getModel() {
return this.model;
}
setModel(model) {
this.expectingNewMethods = true;
this.model = model;
this.hasBeenActive || (this.hasBeenActive = this.isFilterActive());
return this.refreshProps();
}
refresh(newParams) {
this.sourceParams = newParams;
this.refreshProps();
return true;
}
afterGuiAttached(params) {
const providedMethods = this.providedMethods;
if (!providedMethods) {
this.awaitSetMethodsCallback.then(() => this.providedMethods?.afterGuiAttached?.(params));
} else {
providedMethods.afterGuiAttached?.(params);
}
}
getOptionalMethods() {
return ["afterGuiAttached", "afterGuiDetached", "onNewRowsLoaded", "getModelAsString", "onAnyFilterChanged"];
}
setMethods(methods) {
if (this.expectingNewMethods === false && this.hasBeenActive && this.providedMethods?.doesFilterPass !== methods?.doesFilterPass) {
setTimeout(() => {
this.sourceParams.filterChangedCallback();
});
}
this.expectingNewMethods = false;
super.setMethods(methods);
this.resolveSetMethodsCallback();
}
updateModel(model) {
this.setModel(model).then(() => this.sourceParams.filterChangedCallback());
}
getProps() {
const props = super.getProps();
props.model = this.model;
props.onModelChange = this.onModelChange;
props.onUiChange = this.onUiChange;
delete props.filterChangedCallback;
delete props.filterModifiedCallback;
return props;
}
};
// packages/ag-grid-react/src/shared/customComp/floatingFilterComponentProxy.ts
var import_ag_grid_community5 = require("ag-grid-community");
function updateFloatingFilterParent(params, model) {
params.parentFilterInstance((instance) => {
(instance.setModel(model) || import_ag_grid_community5.AgPromise.resolve()).then(() => {
params.filterParams.filterChangedCallback();
});
});
}
var FloatingFilterComponentProxy = class {
constructor(floatingFilterParams, refreshProps) {
this.floatingFilterParams = floatingFilterParams;
this.refreshProps = refreshProps;
this.model = null;
this.onModelChange = (model) => this.updateModel(model);
}
getProps() {
return {
...this.floatingFilterParams,
model: this.model,
onModelChange: this.onModelChange
};
}
onParentModelChanged(parentModel) {
this.model = parentModel;
this.refreshProps();
}
refresh(params) {
this.floatingFilterParams = params;
this.refreshProps();
}
setMethods(methods) {
addOptionalMethods(this.getOptionalMethods(), methods, this);
}
getOptionalMethods() {
return ["afterGuiAttached"];
}
updateModel(model) {
this.model = model;
this.refreshProps();
updateFloatingFilterParent(this.floatingFilterParams, model);
}
};
// packages/ag-grid-react/src/shared/customComp/floatingFilterComponentWrapper.ts
var FloatingFilterComponentWrapper = class extends CustomComponentWrapper {
constructor() {
super(...arguments);
this.model = null;
this.onModelChange = (model) => this.updateModel(model);
}
onParentModelChanged(parentModel) {
this.model = parentModel;
this.refreshProps();
}
refresh(newParams) {
this.sourceParams = newParams;
this.refreshProps();
}
getOptionalMethods() {
return ["afterGuiAttached"];
}
updateModel(model) {
this.model = model;
this.refreshProps();
updateFloatingFilterParent(this.sourceParams, model);
}
getProps() {
const props = super.getProps();
props.model = this.model;
props.onModelChange = this.onModelChange;
return props;
}
};
// packages/ag-grid-react/src/shared/customComp/innerHeaderComponentWrapper.ts
var InnerHeaderComponentWrapper = class extends CustomComponentWrapper {
refresh(params) {
this.sourceParams = params;
this.refreshProps();
return true;
}
};
// packages/ag-grid-react/src/shared/customComp/loadingOverlayComponentWrapper.ts
var LoadingOverlayComponentWrapper = class extends CustomComponentWrapper {
refresh(params) {
this.sourceParams = params;
this.refreshProps();
}
};
// packages/ag-grid-react/src/shared/customComp/menuItemComponentWrapper.ts
var MenuItemComponentWrapper = class extends CustomComponentWrapper {
constructor() {
super(...arguments);
this.active = false;
this.expanded = false;
this.onActiveChange = (active) => this.updateActive(active);
}
setActive(active) {
this.awaitSetActive(active);
}
setExpanded(expanded) {
this.expanded = expanded;
this.refreshProps();
}
getOptionalMethods() {
return ["select", "configureDefaults"];
}
awaitSetActive(active) {
this.active = active;
return this.refreshProps();
}
updateActive(active) {
const result = this.awaitSetActive(active);
if (active) {
result.then(() => this.sourceParams.onItemActivated());
}
}
getProps() {
const props = super.getProps();
props.active = this.active;
props.expanded = this.expanded;
props.onActiveChange = this.onActiveChange;
delete props.onItemActivated;
return props;
}
};
// packages/ag-grid-react/src/shared/customComp/noRowsOverlayComponentWrapper.ts
var NoRowsOverlayComponentWrapper = class extends CustomComponentWrapper {
refresh(params) {
this.sourceParams = params;
this.refreshProps();
}
};
// packages/ag-grid-react/src/shared/customComp/statusPanelComponentWrapper.ts
var StatusPanelComponentWrapper = class extends CustomComponentWrapper {
refresh(params) {
this.sourceParams = params;
this.refreshProps();
return true;
}
};
// packages/ag-grid-react/src/shared/customComp/toolPanelComponentWrapper.ts
var ToolPanelComponentWrapper = class extends CustomComponentWrapper {
constructor() {
super(...arguments);
this.onStateChange = (state) => this.updateState(state);
}
refresh(params) {
this.sourceParams = params;
this.refreshProps();
return true;
}
getState() {
return this.state;
}
updateState(state) {
this.state = state;
this.refreshProps();
this.sourceParams.onStateUpdated();
}
getProps() {
const props = super.getProps();
props.state = this.state;
props.onStateChange = this.onStateChange;
return props;
}
};
// packages/ag-grid-react/src/shared/customComp/util.ts
var import_ag_grid_community6 = require("ag-grid-community");
function getInstance(wrapperComponent, callback) {
const promise = wrapperComponent?.getInstance?.() ?? import_ag_grid_community6.AgPromise.resolve(void 0);
promise.then((comp) => callback(comp));
}
function warnReactiveCustomComponents() {
(0, import_ag_grid_community6._warn)(231);
}
// packages/ag-grid-react/src/shared/portalManager.ts
var MAX_COMPONENT_CREATION_TIME_IN_MS = 1e3;
var PortalManager = class {
constructor(refresher, wrappingElement, maxComponentCreationTimeMs) {
this.destroyed = false;
this.portals = [];
this.hasPendingPortalUpdate = false;
this.wrappingElement = wrappingElement ? wrappingElement : "div";
this.refresher = refresher;
this.maxComponentCreationTimeMs = maxComponentCreationTimeMs ? maxComponentCreationTimeMs : MAX_COMPONENT_CREATION_TIME_IN_MS;
}
getPortals() {
return this.portals;
}
destroy() {
this.destroyed = true;
}
destroyPortal(portal) {
this.portals = this.portals.filter((curPortal) => curPortal !== portal);
this.batchUpdate();
}
getComponentWrappingElement() {
return this.wrappingElement;
}
mountReactPortal(portal, reactComponent, resolve) {
this.portals = [...this.portals, portal];
this.waitForInstance(reactComponent, resolve);
this.batchUpdate();
}
updateReactPortal(oldPortal, newPortal) {
this.portals[this.portals.indexOf(oldPortal)] = newPortal;
this.batchUpdate();
}
batchUpdate() {
if (this.hasPendingPortalUpdate) {
return;
}
setTimeout(() => {
if (!this.destroyed) {
this.refresher();
this.hasPendingPortalUpdate = false;
}
});
this.hasPendingPortalUpdate = true;
}
waitForInstance(reactComponent, resolve, startTime = Date.now()) {
if (this.destroyed) {
resolve(null);
return;
}
if (reactComponent.rendered()) {
resolve(reactComponent);
} else {
if (Date.now() - startTime >= this.maxComponentCreationTimeMs && !this.hasPendingPortalUpdate) {
return;
}
window.setTimeout(() => {
this.waitForInstance(reactComponent, resolve, startTime);
});
}
}
};
// packages/ag-grid-react/src/reactUi/gridComp.tsx
var import_react22 = __toESM(require("react"));
var import_ag_grid_community20 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/gridBodyComp.tsx
var import_react20 = __toESM(require("react"));
var import_ag_grid_community18 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/header/gridHeaderComp.tsx
var import_react12 = __toESM(require("react"));
var import_ag_grid_community12 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/header/headerRowContainerComp.tsx
var import_react11 = __toESM(require("react"));
var import_ag_grid_community11 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/header/headerRowComp.tsx
var import_react10 = __toESM(require("react"));
var import_ag_grid_community10 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/header/headerCellComp.tsx
var import_react7 = __toESM(require("react"));
var import_ag_grid_community7 = require("ag-grid-community");
var HeaderCellComp = ({ ctrl }) => {
const isAlive = ctrl.isAlive();
const { context } = (0, import_react7.useContext)(BeansContext);
const colId = isAlive ? ctrl.column.getColId() : void 0;
const [userCompDetails, setUserCompDetails] = (0, import_react7.useState)();
const [userStyles, setUserStyles] = (0, import_react7.useState)();
const compBean = (0, import_react7.useRef)();
const eGui = (0, import_react7.useRef)(null);
const eResize = (0, import_react7.useRef)(null);
const eHeaderCompWrapper = (0, import_react7.useRef)(null);
const userCompRef = (0, import_react7.useRef)();
const cssClassManager = (0, import_react7.useRef)();
if (isAlive && !cssClassManager.current) {
cssClassManager.current = new import_ag_grid_community7.CssClassManager(() => eGui.current);
}
const setRef2 = (0, import_react7.useCallback)((eRef) => {
eGui.current = eRef;
compBean.current = eRef ? context.createBean(new import_ag_grid_community7._EmptyBean()) : context.destroyBean(compBean.current);
if (!eRef || !ctrl.isAlive()) {
return;
}
const compProxy = {
setWidth: (width) => {
if (eGui.current) {
eGui.current.style.width = width;
}
},
addOrRemoveCssClass: (name, on) => cssClassManager.current.addOrRemoveCssClass(name, on),
setUserStyles: (styles) => setUserStyles(styles),
setAriaSort: (sort) => {
if (eGui.current) {
sort ? (0, import_ag_grid_community7._setAriaSort)(eGui.current, sort) : (0, import_ag_grid_community7._removeAriaSort)(eGui.current);
}
},
setUserCompDetails: (compDetails) => setUserCompDetails(compDetails),
getUserCompInstance: () => userCompRef.current || void 0
};
ctrl.setComp(compProxy, eRef, eResize.current, eHeaderCompWrapper.current, compBean.current);
const selectAllGui = ctrl.getSelectAllGui();
if (selectAllGui) {
eResize.current?.insertAdjacentElement("afterend", selectAllGui);
compBean.current.addDestroyFunc(() => selectAllGui.remove());
}
}, []);
(0, import_react7.useLayoutEffect)(
() => showJsComp(userCompDetails, context, eHeaderCompWrapper.current, userCompRef),
[userCompDetails]
);
(0, import_react7.useEffect)(() => {
ctrl.setDragSource(eGui.current);
}, [userCompDetails]);
const userCompStateless = (0, import_react7.useMemo)(() => {
const res = userCompDetails?.componentFromFramework && isComponentStateless(userCompDetails.componentClass);
return !!res;
}, [userCompDetails]);
const reactUserComp = userCompDetails && userCompDetails.componentFromFramework;
const UserCompClass = userCompDetails && userCompDetails.componentClass;
return /* @__PURE__ */ import_react7.default.createElement("div", { ref: setRef2, style: userStyles, className: "ag-header-cell", "col-id": colId, role: "columnheader" }, /* @__PURE__ */ import_react7.default.createElement("div", { ref: eResize, className: "ag-header-cell-resize", role: "presentation" }), /* @__PURE__ */ import_react7.default.createElement("div", { ref: eHeaderCompWrapper, className: "ag-header-cell-comp-wrapper", role: "presentation" }, reactUserComp && userCompStateless && /* @__PURE__ */ import_react7.default.createElement(UserCompClass, { ...userCompDetails.params }), reactUserComp && !userCompStateless && /* @__PURE__ */ import_react7.default.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompRef })));
};
var headerCellComp_default = (0, import_react7.memo)(HeaderCellComp);
// packages/ag-grid-react/src/reactUi/header/headerFilterCellComp.tsx
var import_react8 = __toESM(require("react"));
var import_ag_grid_community8 = require("ag-grid-community");
var HeaderFilterCellComp = ({ ctrl }) => {
const { context, gos } = (0, import_react8.useContext)(BeansContext);
const [userStyles, setUserStyles] = (0, import_react8.useState)();
const [cssClasses, setCssClasses] = (0, import_react8.useState)(
() => new CssClasses("ag-header-cell", "ag-floating-filter")
);
const [cssBodyClasses, setBodyCssClasses] = (0, import_react8.useState)(() => new CssClasses());
const [cssButtonWrapperClasses, setButtonWrapperCssClasses] = (0, import_react8.useState)(
() => new CssClasses("ag-floating-filter-button", "ag-hidden")
);
const [buttonWrapperAriaHidden, setButtonWrapperAriaHidden] = (0, import_react8.useState)("false");
const [userCompDetails, setUserCompDetails] = (0, import_react8.useState)();
const [, setRenderKey] = (0, import_react8.useState)(1);
const compBean = (0, import_react8.useRef)();
const eGui = (0, import_react8.useRef)(null);
const eFloatingFilterBody = (0, import_react8.useRef)(null);
const eButtonWrapper = (0, import_react8.useRef)(null);
const eButtonShowMainFilter = (0, import_react8.useRef)(null);
const userCompResolve = (0, import_react8.useRef)();
const userCompPromise = (0, import_react8.useRef)();
const userCompRef = (value) => {
if (value == null) {
return;
}
userCompResolve.current && userCompResolve.current(value);
};
const setRef2 = (0, import_react8.useCallback)((eRef) => {
eGui.current = eRef;
compBean.current = eRef ? context.createBean(new import_ag_grid_community8._EmptyBean()) : context.destroyBean(compBean.current);
if (!eRef) {
return;
}
userCompPromise.current = new import_ag_grid_community8.AgPromise((resolve) => {
userCompResolve.current = resolve;
});
const compProxy = {
addOrRemoveCssClass: (name, on) => setCssClasses((prev) => prev.setClass(name, on)),
setUserStyles: (styles) => setUserStyles(styles),
addOrRemoveBodyCssClass: (name, on) => setBodyCssClasses((prev) => prev.setClass(name, on)),
setButtonWrapperDisplayed: (displayed) => {
setButtonWrapperCssClasses((prev) => prev.setClass("ag-hidden", !displayed));
setButtonWrapperAriaHidden(!displayed ? "true" : "false");
},
setWidth: (width) => {
if (eGui.current) {
eGui.current.style.width = width;
}
},
setCompDetails: (compDetails) => setUserCompDetails(compDetails),
getFloatingFilterComp: () => userCompPromise.current ? userCompPromise.current : null,
setMenuIcon: (eIcon) => eButtonShowMainFilter.current?.appendChild(eIcon)
};
ctrl.setComp(compProxy, eRef, eButtonShowMainFilter.current, eFloatingFilterBody.current, compBean.current);
}, []);
(0, import_react8.useLayoutEffect)(
() => showJsComp(userCompDetails, context, eFloatingFilterBody.current, userCompRef),
[userCompDetails]
);
const className = (0, import_react8.useMemo)(() => cssClasses.toString(), [cssClasses]);
const bodyClassName = (0, import_react8.useMemo)(() => cssBodyClasses.toString(), [cssBodyClasses]);
const buttonWrapperClassName = (0, import_react8.useMemo)(() => cssButtonWrapperClasses.toString(), [cssButtonWrapperClasses]);
const userCompStateless = (0, import_react8.useMemo)(() => {
const res = userCompDetails && userCompDetails.componentFromFramework && isComponentStateless(userCompDetails.componentClass);
return !!res;
}, [userCompDetails]);
const reactiveCustomComponents = (0, import_react8.useMemo)(() => gos.get("reactiveCustomComponents"), []);
const floatingFilterCompProxy = (0, import_react8.useMemo)(() => {
if (userCompDetails) {
if (reactiveCustomComponents) {
const compProxy = new FloatingFilterComponentProxy(
userCompDetails.params,
() => setRenderKey((prev) => prev + 1)
);
userCompRef(compProxy);
return compProxy;
} else if (userCompDetails.componentFromFramework) {
warnReactiveCustomComponents();
}
}
return void 0;
}, [userCompDetails]);
const floatingFilterProps = floatingFilterCompProxy?.getProps();
const reactUserComp = userCompDetails && userCompDetails.componentFromFramework;
const UserCompClass = userCompDetails && userCompDetails.componentClass;
return /* @__PURE__ */ import_react8.default.createElement("div", { ref: setRef2, style: userStyles, className, role: "gridcell" }, /* @__PURE__ */ import_react8.default.createElement("div", { ref: eFloatingFilterBody, className: bodyClassName, role: "presentation" }, reactUserComp && !reactiveCustomComponents && /* @__PURE__ */ import_react8.default.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompStateless ? () => {
} : userCompRef }), reactUserComp && reactiveCustomComponents && /* @__PURE__ */ import_react8.default.createElement(
CustomContext.Provider,
{
value: {
setMethods: (methods) => floatingFilterCompProxy.setMethods(methods)
}
},
/* @__PURE__ */ import_react8.default.createElement(UserCompClass, { ...floatingFilterProps })
)), /* @__PURE__ */ import_react8.default.createElement(
"div",
{
ref: eButtonWrapper,
"aria-hidden": buttonWrapperAriaHidden,
className: buttonWrapperClassName,
role: "presentation"
},
/* @__PURE__ */ import_react8.default.createElement(
"button",
{
ref: eButtonShowMainFilter,
type: "button",
className: "ag-button ag-floating-filter-button-button",
tabIndex: -1
}
)
));
};
var headerFilterCellComp_default = (0, import_react8.memo)(HeaderFilterCellComp);
// packages/ag-grid-react/src/reactUi/header/headerGroupCellComp.tsx
var import_react9 = __toESM(require("react"));
var import_ag_grid_community9 = require("ag-grid-community");
var HeaderGroupCellComp = ({ ctrl }) => {
const { context } = (0, import_react9.useContext)(BeansContext);
const [userStyles, setUserStyles] = (0, import_react9.useState)();
const [cssClasses, setCssClasses] = (0, import_react9.useState)(() => new CssClasses());
const [cssResizableClasses, setResizableCssClasses] = (0, import_react9.useState)(() => new CssClasses());
const [resizableAriaHidden, setResizableAriaHidden] = (0, import_react9.useState)("false");
const [ariaExpanded, setAriaExpanded] = (0, import_react9.useState)();
const [userCompDetails, setUserCompDetails] = (0, import_react9.useState)();
const colId = (0, import_react9.useMemo)(() => ctrl.column.getUniqueId(), []);
const compBean = (0, import_react9.useRef)();
const eGui = (0, import_react9.useRef)(null);
const eResize = (0, import_react9.useRef)(null);
const eHeaderCompWrapper = (0, import_react9.useRef)(null);
const userCompRef = (0, import_react9.useRef)();
const setRef2 = (0, import_react9.useCallback)((eRef) => {
eGui.current = eRef;
compBean.current = eRef ? context.createBean(new import_ag_grid_community9._EmptyBean()) : context.destroyBean(compBean.current);
if (!eRef) {
return;
}
const compProxy = {
setWidth: (width) => {
if (eGui.current) {
eGui.current.style.width = width;
}
},
addOrRemoveCssClass: (name, on) => setCssClasses((prev) => prev.setClass(name, on)),
setUserStyles: (styles) => setUserStyles(styles),
setHeaderWrapperHidden: (hidden) => {
const headerCompWrapper = eHeaderCompWrapper.current;
if (!headerCompWrapper) {
return;
}
if (hidden) {
headerCompWrapper.style.setProperty("display", "none");
} else {
headerCompWrapper.style.removeProperty("display");
}
},
setHeaderWrapperMaxHeight: (value) => {
const headerCompWrapper = eHeaderCompWrapper.current;
if (!headerCompWrapper) {
return;
}
if (value != null) {
headerCompWrapper.style.setProperty("max-height", `${value}px`);
} else {
headerCompWrapper.style.removeProperty("max-height");
}
headerCompWrapper.classList.toggle("ag-header-cell-comp-wrapper-limited-height", value != null);
},
setUserCompDetails: (compDetails) => setUserCompDetails(compDetails),
setResizableDisplayed: (displayed) => {
setResizableCssClasses((prev) => prev.setClass("ag-hidden", !displayed));
setResizableAriaHidden(!displayed ? "true" : "false");
},
setAriaExpanded: (expanded) => setAriaExpanded(expanded),
getUserCompInstance: () => userCompRef.current || void 0
};
ctrl.setComp(compProxy, eRef, eResize.current, eHeaderCompWrapper.current, compBean.current);
}, []);
(0, import_react9.useLayoutEffect)(() => showJsComp(userCompDetails, context, eHeaderCompWrapper.current), [userCompDetails]);
(0, import_react9.useEffect)(() => {
if (eGui.current) {
ctrl.setDragSource(eGui.current);
}
}, [userCompDetails]);
const userCompStateless = (0, import_react9.useMemo)(() => {
const res = userCompDetails?.componentFromFramework && isComponentStateless(userCompDetails.componentClass);
return !!res;
}, [userCompDetails]);
const className = (0, import_react9.useMemo)(() => "ag-header-group-cell " + cssClasses.toString(), [cssClasses]);
const resizableClassName = (0, import_react9.useMemo)(
() => "ag-header-cell-resize " + cssResizableClasses.toString(),
[cssResizableClasses]
);
const reactUserComp = userCompDetails && userCompDetails.componentFromFramework;
const UserCompClass = userCompDetails && userCompDetails.componentClass;
return /* @__PURE__ */ import_react9.default.createElement(
"div",
{
ref: setRef2,
style: userStyles,
className,
"col-id": colId,
role: "columnheader",
"aria-expanded": ariaExpanded
},
/* @__PURE__ */ import_react9.default.createElement("div", { ref: eHeaderCompWrapper, className: "ag-header-cell-comp-wrapper", role: "presentation" }, reactUserComp && userCompStateless && /* @__PURE__ */ import_react9.default.createElement(UserCompClass, { ...userCompDetails.params }), reactUserComp && !userCompStateless && /* @__PURE__ */ import_react9.default.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompRef })),
/* @__PURE__ */ import_react9.default.createElement("div", { ref: eResize, "aria-hidden": resizableAriaHidden, className: resizableClassName })
);
};
var headerGroupCellComp_default = (0, import_react9.memo)(HeaderGroupCellComp);
// packages/ag-grid-react/src/reactUi/header/headerRowComp.tsx
var HeaderRowComp = ({ ctrl }) => {
const { context } = (0, import_react10.useContext)(BeansContext);
const { topOffset, rowHeight } = (0, import_react10.useMemo)(() => ctrl.getTopAndHeight(), []);
const ariaRowIndex = ctrl.getAriaRowIndex();
const className = ctrl.headerRowClass;
const [height, setHeight] = (0, import_react10.useState)(() => rowHeight + "px");
const [top, setTop] = (0, import_react10.useState)(() => topOffset + "px");
const cellCtrlsRef = (0, import_react10.useRef)(null);
const prevCellCtrlsRef = (0, import_react10.useRef)(null);
const [cellCtrls, setCellCtrls] = (0, import_react10.useState)(() => ctrl.getUpdatedHeaderCtrls());
const compBean = (0, import_react10.useRef)();
const eGui = (0, import_react10.useRef)(null);
const setRef2 = (0, import_react10.useCallback)((eRef) => {
eGui.current = eRef;
compBean.current = eRef ? context.createBean(new import_ag_grid_community10._EmptyBean()) : context.destroyBean(compBean.current);
if (!eRef) {
return;
}
const compProxy = {
setHeight: (height2) => setHeight(height2),
setTop: (top2) => setTop(top2),
setHeaderCtrls: (ctrls, forceOrder, afterScroll) => {
prevCellCtrlsRef.current = cellCtrlsRef.current;
cellCtrlsRef.current = ctrls;
const next = getNextValueIfDifferent(prevCellCtrlsRef.current, ctrls, forceOrder);
if (next !== prevCellCtrlsRef.current) {
agFlushSync(afterScroll, () => setCellCtrls(next));
}
},
setWidth: (width) => {
if (eGui.current) {
eGui.current.style.width = width;
}
}
};
ctrl.setComp(compProxy, compBean.current, false);
}, []);
const style = (0, import_react10.useMemo)(
() => ({
height,
top
}),
[height, top]
);
const createCellJsx = (0, import_react10.useCallback)((cellCtrl) => {
switch (ctrl.type) {
case "group":
return /* @__PURE__ */ import_react10.default.createElement(headerGroupCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId });
case "filter":
return /* @__PURE__ */ import_react10.default.createElement(headerFilterCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId });
default:
return /* @__PURE__ */ import_react10.default.createElement(headerCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId });
}
}, []);
return /* @__PURE__ */ import_react10.default.createElement("div", { ref: setRef2, className, role: "row", style, "aria-rowindex": ariaRowIndex }, cellCtrls.map(createCellJsx));
};
var headerRowComp_default = (0, import_react10.memo)(HeaderRowComp);
// packages/ag-grid-react/src/reactUi/header/headerRowContainerComp.tsx
var HeaderRowContainerComp = ({ pinned }) => {
const [displayed, setDisplayed] = (0, import_react11.useState)(true);
const [headerRowCtrls, setHeaderRowCtrls] = (0, import_react11.useState)([]);
const { context } = (0, import_react11.useContext)(BeansContext);
const eGui = (0, import_react11.useRef)(null);
const eCenterContainer = (0, import_react11.useRef)(null);
const headerRowCtrlRef = (0, import_react11.useRef)();
const pinnedLeft = pinned === "left";
const pinnedRight = pinned === "right";
const centre = !pinnedLeft && !pinnedRight;
const setRef2 = (0, import_react11.useCallback)((eRef) => {
eGui.current = eRef;
headerRowCtrlRef.curren