ag-grid-react
Version:
AG Grid React Component
4,421 lines • 173 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 index_exports = {};
__export(index_exports, {
AgGridProvider: () => AgGridProvider,
AgGridReact: () => AgGridReact,
CustomComponentContext: () => CustomContext,
getInstance: () => getInstance,
useGridCellEditor: () => useGridCellEditor,
useGridDate: () => useGridDate,
useGridFilter: () => useGridFilter,
useGridFilterDisplay: () => useGridFilterDisplay,
useGridFloatingFilter: () => useGridFloatingFilter,
useGridMenuItem: () => useGridMenuItem,
warnReactiveCustomComponents: () => warnReactiveCustomComponents
});
module.exports = __toCommonJS(index_exports);
// packages/ag-grid-react/src/agGridReact.tsx
var import_react27 = __toESM(require("react"));
// packages/ag-stack/dist/package/main.esm.mjs
var VERSION = "36.1.0";
var IS_SSR = typeof window !== "object" || !window?.document?.fonts?.forEach;
var getInjectionState = () => {
const versionMap = globalThis.agStyleInjectionVersions ?? (globalThis.agStyleInjectionVersions = /* @__PURE__ */ new Map());
let state = versionMap.get(VERSION);
if (!state) {
state = {
map: /* @__PURE__ */ new WeakMap(),
grids: /* @__PURE__ */ new Map(),
paramsId: 0
};
versionMap.set(VERSION, state);
}
return state;
};
var injectionState = getInjectionState();
var LocalEventService = class {
constructor() {
this.allSyncListeners = /* @__PURE__ */ new Map();
this.allAsyncListeners = /* @__PURE__ */ new Map();
this.globalSyncListeners = /* @__PURE__ */ new Set();
this.globalAsyncListeners = /* @__PURE__ */ new Set();
this.asyncFunctionsQueue = [];
this.scheduled = false;
this.firedEvents = {};
}
setFrameworkOverrides(frameworkOverrides) {
this.frameworkOverrides = frameworkOverrides;
}
getListeners(eventType, async, autoCreateListenerCollection) {
const listenerMap = async ? this.allAsyncListeners : this.allSyncListeners;
let listeners = listenerMap.get(eventType);
if (!listeners && autoCreateListenerCollection) {
listeners = /* @__PURE__ */ new Set();
listenerMap.set(eventType, listeners);
}
return listeners;
}
noRegisteredListenersExist() {
return this.allSyncListeners.size === 0 && this.allAsyncListeners.size === 0 && this.globalSyncListeners.size === 0 && this.globalAsyncListeners.size === 0;
}
addEventListener(eventType, listener, async = false) {
this.getListeners(eventType, async, true).add(listener);
}
removeEventListener(eventType, listener, async = false) {
const listeners = this.getListeners(eventType, async, false);
if (!listeners) {
return;
}
listeners.delete(listener);
if (listeners.size === 0) {
(async ? this.allAsyncListeners : this.allSyncListeners).delete(eventType);
}
}
addGlobalListener(listener, async = false) {
this.getGlobalListeners(async).add(listener);
}
removeGlobalListener(listener, async = false) {
this.getGlobalListeners(async).delete(listener);
}
dispatchEvent(event) {
this.dispatchToListeners(event, true);
this.dispatchToListeners(event, false);
this.firedEvents[event.type] = true;
}
dispatchEventOnce(event) {
if (!this.firedEvents[event.type]) {
this.dispatchEvent(event);
}
}
dispatchToListeners(event, async) {
const eventType = event.type;
if (async && "event" in event) {
const browserEvent = event.event;
if (browserEvent instanceof Event) {
event.eventPath = browserEvent.composedPath();
}
}
const { frameworkOverrides } = this;
const runCallback = (func) => {
const callback = frameworkOverrides ? () => frameworkOverrides.wrapIncoming(func) : func;
if (async) {
this.dispatchAsync(callback);
} else {
callback();
}
};
const originalListeners = this.getListeners(eventType, async, false);
if ((originalListeners?.size ?? 0) > 0) {
const listeners = new Set(originalListeners);
for (const listener of listeners) {
if (!originalListeners?.has(listener)) {
continue;
}
runCallback(() => listener(event));
}
}
const globalListenersSrc = this.getGlobalListeners(async);
if (globalListenersSrc.size > 0) {
const globalListeners = new Set(globalListenersSrc);
for (const listener of globalListeners) {
runCallback(() => listener(eventType, event));
}
}
}
getGlobalListeners(async) {
return async ? this.globalAsyncListeners : this.globalSyncListeners;
}
// this gets called inside the grid's thread, for each event that it
// wants to set async. the grid then batches the events into one setTimeout()
// because setTimeout() is an expensive operation. ideally we would have
// each event in it's own setTimeout(), but we batch for performance.
dispatchAsync(func) {
this.asyncFunctionsQueue.push(func);
if (!this.scheduled) {
const flush = () => {
window.setTimeout(this.flushAsyncQueue.bind(this), 0);
};
const frameworkOverrides = this.frameworkOverrides;
if (frameworkOverrides) {
frameworkOverrides.wrapIncoming(flush);
} else {
flush();
}
this.scheduled = true;
}
}
// this happens in the next VM turn only, and empties the queue of events
flushAsyncQueue() {
this.scheduled = false;
const queueCopy = this.asyncFunctionsQueue.slice();
this.asyncFunctionsQueue = [];
for (const func of queueCopy) {
func();
}
}
};
function _areEqual(a, b, comparator) {
if (a === b) {
return true;
}
if (!a || !b) {
return a == null && b == null;
}
const len = a.length;
if (len !== b.length) {
return false;
}
if (comparator) {
for (let i = 0; i < len; ++i) {
const valueA = a[i];
const valueB = b[i];
if (valueA !== valueB && !comparator(valueA, valueB)) {
return false;
}
}
return true;
}
for (let i = 0; i < len; ++i) {
if (a[i] !== b[i]) {
return false;
}
}
return true;
}
function _removeFromArray(array, object) {
const index = array.indexOf(object);
if (index >= 0) {
array.splice(index, 1);
}
}
function _exists(value) {
return value != null && value !== "";
}
function _getRootNode(beans) {
return beans.eRootDiv.getRootNode();
}
function _getActiveDomElement(beans) {
return _getRootNode(beans).activeElement;
}
function _getDocument(beans) {
const { gos, eRootDiv } = beans;
let result = null;
const optionsGetDocument = gos.get("getDocument");
if (optionsGetDocument && _exists(optionsGetDocument)) {
result = optionsGetDocument();
} else if (eRootDiv) {
result = eRootDiv.ownerDocument;
}
if (result && _exists(result)) {
return result;
}
return document;
}
function _getWindow(beans) {
const eDocument = _getDocument(beans);
return eDocument.defaultView || window;
}
function _setAriaAttribute(element, attribute, value) {
element.setAttribute(_ariaAttributeName(attribute), value.toString());
}
function _removeAriaAttribute(element, attribute) {
element.removeAttribute(_ariaAttributeName(attribute));
}
function _ariaAttributeName(attribute) {
return `aria-${attribute}`;
}
function _setAriaRole(element, role) {
if (role) {
element.setAttribute("role", role);
} else {
element.removeAttribute("role");
}
}
function _setAriaMultiSelectable(element, multiSelectable) {
_setAriaAttribute(element, "multiselectable", multiSelectable);
}
function _setAriaRowCount(element, rowCount) {
_setAriaAttribute(element, "rowcount", rowCount);
}
function _setAriaRowIndex(element, rowIndex) {
_setAriaAttribute(element, "rowindex", rowIndex);
}
function _setAriaColCount(element, colCount) {
_setAriaAttribute(element, "colcount", colCount);
}
function _setAriaSort(element, sort) {
_setAriaAttribute(element, "sort", sort);
}
function _removeAriaSort(element) {
_removeAriaAttribute(element, "sort");
}
function _removeFromParent(node) {
if (node?.parentNode) {
node.remove();
}
}
function _observeResize(beans, element, callback) {
const win = _getWindow(beans);
const ResizeObserverImpl = win.ResizeObserver;
const resizeObserver = ResizeObserverImpl ? new ResizeObserverImpl(callback) : null;
resizeObserver?.observe(element);
return () => resizeObserver?.disconnect();
}
var PASSIVE_EVENTS = ["touchstart", "touchend", "touchmove", "touchcancel", "scroll"];
var NON_PASSIVE_EVENTS = ["wheel"];
function _addSafePassiveEventListener(eElement, event, listener) {
const passive = getPassiveStateForEvent(event);
let options;
if (passive != null) {
options = { passive };
}
eElement.addEventListener(event, listener, options);
}
var getPassiveStateForEvent = (event) => {
const isPassive = PASSIVE_EVENTS.includes(event);
const isNonPassive = NON_PASSIVE_EVENTS.includes(event);
if (isPassive) {
return true;
}
if (isNonPassive) {
return false;
}
};
function defaultLocaleTextFunc(_key, defaultValue) {
return defaultValue;
}
function _getLocaleTextFunc(localeSvc) {
return localeSvc?.getLocaleTextFunc() ?? defaultLocaleTextFunc;
}
var DESTROYED_EVENT = { type: "destroyed" };
var AgBeanStub = class {
constructor() {
this.beans = null;
this.gos = null;
this.eventSvc = null;
this.destroyed = false;
this.localEventService = null;
this.stubContext = null;
this.destroyFunctions = null;
this.propertyListenerId = 0;
this.lastChangeSetIdLookup = null;
}
preWireBeans(beans) {
this.beans = beans;
this.gos = beans.gos;
this.eventSvc = beans.eventSvc;
this.stubContext = beans.context;
}
// this was a test constructor niall built, when active, it prints after 5 seconds all beans/components that are
// not destroyed. to use, create a new grid, then api.destroy() before 5 seconds. then anything that gets printed
// points to a bean or component that was not properly disposed of.
// constructor() {
// setTimeout(()=> {
// if (this.isAlive()) {
// let prototype: any = Object.getPrototypeOf(this);
// const constructor: any = prototype.constructor;
// const constructorString = constructor.toString();
// const beanName = constructorString.substring(9, constructorString.indexOf("("));
// console.log('is alive ' + beanName);
// }
// }, 5000);
// }
destroy() {
const destroyFunctions = this.destroyFunctions;
if (destroyFunctions) {
for (let i = 0; i < destroyFunctions.length; i++) {
destroyFunctions[i]();
}
destroyFunctions.length = 0;
}
this.destroyed = true;
this.dispatchLocalEvent(DESTROYED_EVENT);
}
/** Add a local event listener against this BeanStub */
addEventListener(eventType, listener, async) {
let localEventService = this.localEventService;
if (!localEventService) {
localEventService = new LocalEventService();
this.localEventService = localEventService;
}
localEventService.addEventListener(eventType, listener, async);
}
/** Remove a local event listener from this BeanStub */
removeEventListener(eventType, listener, async) {
this.localEventService?.removeEventListener(eventType, listener, async);
}
dispatchLocalEvent(event) {
this.localEventService?.dispatchEvent(event);
}
addManagedElementListeners(object, handlers) {
return this._setupListeners(object, handlers);
}
addManagedEventListeners(handlers) {
return this._setupListeners(this.eventSvc, handlers);
}
addManagedListeners(object, handlers) {
return this._setupListeners(object, handlers);
}
_setupListeners(object, handlers) {
const destroyFuncs = [];
const keys = Object.keys(handlers);
for (let i = 0, len = keys.length; i < len; ++i) {
const k = keys[i];
const handler = handlers[k];
if (handler) {
destroyFuncs.push(this._setupListener(object, k, handler));
}
}
return destroyFuncs;
}
_setupListener(object, event, listener) {
if (this.destroyed) {
return () => null;
}
let destroyFunc;
if (isAgEventEmitter(object)) {
object.__addEventListener(event, listener);
destroyFunc = () => {
object.__removeEventListener(event, listener);
return null;
};
} else {
const objIsEventService = isEventService(object);
if (object instanceof HTMLElement) {
_addSafePassiveEventListener(object, event, listener);
} else if (objIsEventService) {
object.addListener(event, listener);
} else {
object.addEventListener(event, listener);
}
destroyFunc = objIsEventService ? () => {
object.removeListener(event, listener);
return null;
} : () => {
object.removeEventListener(event, listener);
return null;
};
}
return this.registerDestroyFunc(destroyFunc);
}
/**
* Setup a managed property listener for the given property.
* However, stores the destroy function in the beanStub so that if this bean
* is a component the destroy function will be called when the component is destroyed
* as opposed to being cleaned up only when the properties service is destroyed.
*/
setupPropertyListener(event, listener) {
const { gos } = this;
gos.addPropertyEventListener(event, listener);
const destroyFunc = () => {
gos.removePropertyEventListener(event, listener);
return null;
};
return this.registerDestroyFunc(destroyFunc);
}
/**
* Setup a managed property listener for the given GridOption property.
* @param event GridOption property to listen to changes for.
* @param listener Listener to run when property value changes
*/
addManagedPropertyListener(event, listener) {
if (this.destroyed) {
return () => null;
}
return this.setupPropertyListener(event, listener);
}
/**
* Setup managed property listeners for the given set of GridOption properties.
* The listener will be run if any of the property changes but will only run once if
* multiple of the properties change within the same framework lifecycle event.
* Works on the basis that GridOptionsService updates all properties *before* any property change events are fired.
* @param events Array of GridOption properties to listen for changes too.
* @param listener Shared listener to run if any of the properties change
*/
addManagedPropertyListeners(events, listener) {
if (this.destroyed) {
return;
}
const eventsKey = events.join("-") + this.propertyListenerId++;
const wrappedListener = (event) => {
const changeSet = event.changeSet;
if (changeSet) {
let lookup = this.lastChangeSetIdLookup;
if (!lookup) {
lookup = {};
this.lastChangeSetIdLookup = lookup;
}
if (changeSet.id === lookup[eventsKey]) {
return;
}
lookup[eventsKey] = changeSet.id;
}
const propertiesChangeEvent = {
type: "propertyChanged",
changeSet,
source: event.source
};
listener(propertiesChangeEvent);
};
for (let i = 0, len = events.length; i < len; ++i) {
this.setupPropertyListener(events[i], wrappedListener);
}
}
// Prototype method, not a per-instance arrow — never invoked detached, so binding per bean only wastes memory.
isAlive() {
return !this.destroyed;
}
getLocaleTextFunc() {
return _getLocaleTextFunc(this.beans.localeSvc);
}
// Lazy — most beans never register a destroy func, so the array is allocated on first push.
pushDestroyFunc(destroyFunc) {
const destroyFunctions = this.destroyFunctions;
if (destroyFunctions) {
destroyFunctions.push(destroyFunc);
} else {
this.destroyFunctions = [destroyFunc];
}
}
/** Register a destroy func and return an unregister callback that removes it if called before destroy. */
registerDestroyFunc(destroyFunc) {
this.pushDestroyFunc(destroyFunc);
return () => {
destroyFunc();
const destroyFunctions = this.destroyFunctions;
if (destroyFunctions) {
_removeFromArray(destroyFunctions, destroyFunc);
}
return null;
};
}
addDestroyFunc(func) {
if (this.destroyed) {
func();
} else {
this.pushDestroyFunc(func);
}
}
/** doesn't throw an error if `bean` is undefined */
createOptionalManagedBean(bean, context) {
return bean ? this.createManagedBean(bean, context) : void 0;
}
createManagedBean(bean, context) {
const res = this.createBean(bean, context);
this.addDestroyFunc(this.destroyBean.bind(this, bean, context));
return res;
}
createBean(bean, context, afterPreCreateCallback) {
return (context || this.stubContext).createBean(bean, afterPreCreateCallback);
}
/**
* Destroys a bean and returns undefined to support destruction and clean up in a single line.
* this.dateComp = this.context.destroyBean(this.dateComp);
*/
destroyBean(bean, context) {
return (context || this.stubContext).destroyBean(bean);
}
/**
* Destroys an array of beans and returns an empty array to support destruction and clean up in a single line.
* this.dateComps = this.context.destroyBeans(this.dateComps);
*/
destroyBeans(beans, context) {
return (context || this.stubContext).destroyBeans(beans);
}
};
AgBeanStub.prototype.__v_skip = true;
function isAgEventEmitter(object) {
return object.__addEventListener !== void 0;
}
function isEventService(object) {
return object.eventServiceType === "global";
}
var CssClassManager = class {
constructor(getGui) {
this.cssClassStates = {};
this.getGui = getGui;
}
toggleCss(className, addOrRemove) {
if (!className) {
return;
}
if (className.includes(" ")) {
const list = (className || "").split(" ");
if (list.length > 1) {
for (const cls of list) {
this.toggleCss(cls, addOrRemove);
}
return;
}
}
const updateNeeded = this.cssClassStates[className] !== addOrRemove;
if (updateNeeded && className.length) {
this.getGui()?.classList.toggle(className, addOrRemove);
this.cssClassStates[className] = addOrRemove;
}
}
};
var doOnceSet = /* @__PURE__ */ new Set();
var _doOnce = (func, key) => {
if (!doOnceSet.has(key)) {
doOnceSet.add(key);
func();
}
};
_doOnce._set = doOnceSet;
var memoize = (fn) => {
const values = /* @__PURE__ */ new Map();
return (a) => {
const key = a;
if (!values.has(key)) {
values.set(key, fn(a));
}
return values.get(key);
};
};
var accentMix = (mix) => ({ ref: "accentColor", mix });
var foregroundMix = (mix) => ({ ref: "foregroundColor", mix });
var foregroundBackgroundMix = (mix) => ({
ref: "foregroundColor",
mix,
onto: "backgroundColor"
});
var backgroundColor = { ref: "backgroundColor" };
var foregroundColor = { ref: "foregroundColor" };
var accentColor = { ref: "accentColor" };
var defaultLightColorSchemeParams = {
backgroundColor: "#fff",
foregroundColor: "#181d1f",
borderColor: foregroundMix(0.15),
chromeBackgroundColor: foregroundBackgroundMix(0.02),
browserColorScheme: "light"
};
var defaultFontFamily = () => [
"-apple-system",
"BlinkMacSystemFont",
"Segoe UI",
"Roboto",
"Oxygen-Sans",
"Ubuntu",
"Cantarell",
"Helvetica Neue",
"sans-serif"
];
var sharedDefaults = {
...defaultLightColorSchemeParams,
textColor: foregroundColor,
accentColor: "#2196f3",
invalidColor: "#e02525",
fontFamily: defaultFontFamily(),
subtleTextColor: {
ref: "textColor",
mix: 0.5
},
borderWidth: 1,
borderRadius: 4,
spacing: 8,
fontSize: 14,
fontWeight: 400,
focusShadow: {
spread: 3,
color: accentMix(0.5)
},
focusErrorShadow: {
spread: 3,
color: {
ref: "invalidColor",
onto: "backgroundColor",
mix: 0.5
}
},
popupShadow: "0 0 16px #00000026",
cardShadow: "0 1px 4px 1px #00000018",
dropdownShadow: { ref: "cardShadow" },
listItemHeight: {
calc: "max(iconSize, dataFontSize) + widgetVerticalSpacing"
},
dragAndDropImageBackgroundColor: backgroundColor,
dragAndDropImageBorder: true,
dragAndDropImageNotAllowedBorder: {
color: {
ref: "invalidColor",
onto: "dragAndDropImageBackgroundColor",
mix: 0.5
}
},
dragAndDropImageShadow: {
ref: "popupShadow"
},
iconSize: 16,
iconColor: "inherit",
toggleButtonWidth: 28,
toggleButtonHeight: 18,
toggleButtonOnBackgroundColor: accentColor,
toggleButtonOffBackgroundColor: foregroundBackgroundMix(0.3),
toggleButtonSwitchBackgroundColor: backgroundColor,
toggleButtonSwitchInset: 2,
tooltipBackgroundColor: {
ref: "chromeBackgroundColor"
},
tooltipErrorBackgroundColor: {
ref: "invalidColor",
onto: "backgroundColor",
mix: 0.1
},
tooltipTextColor: {
ref: "textColor"
},
tooltipErrorTextColor: {
ref: "invalidColor"
},
tooltipBorder: true,
tooltipErrorBorder: {
color: {
ref: "invalidColor",
onto: "backgroundColor",
mix: 0.25
}
},
panelBackgroundColor: backgroundColor,
panelTitleBarHeight: { ref: "headerHeight" },
panelTitleBarBackgroundColor: {
ref: "headerBackgroundColor"
},
panelTitleBarIconColor: {
ref: "headerTextColor"
},
panelTitleBarTextColor: {
ref: "headerTextColor"
},
panelTitleBarFontFamily: {
ref: "headerFontFamily"
},
panelTitleBarFontSize: {
ref: "headerFontSize"
},
panelTitleBarFontWeight: {
ref: "headerFontWeight"
},
panelTitleBarBorder: true,
// Unlike other picker field params, pickerFieldHeight must be a shared param
// because the pagination panel height depends on it
pickerFieldHeight: {
calc: "max(iconSize, fontSize) + spacing * 2"
},
dialogShadow: {
ref: "popupShadow"
},
dialogBorder: {
color: foregroundMix(0.2)
},
widgetContainerHorizontalPadding: {
calc: "spacing * 1.5"
},
widgetContainerVerticalPadding: {
calc: "spacing * 1.5"
},
widgetHorizontalSpacing: {
calc: "spacing * 1.5"
},
widgetVerticalSpacing: {
ref: "spacing"
},
dataFontSize: {
ref: "fontSize"
},
headerBackgroundColor: {
ref: "chromeBackgroundColor"
},
headerFontFamily: {
ref: "fontFamily"
},
headerFontSize: {
ref: "fontSize"
},
headerFontWeight: 500,
headerTextColor: {
ref: "textColor"
},
headerHeight: {
calc: "max(iconSize, headerFontSize) + spacing * 4 * headerVerticalPaddingScale"
},
headerVerticalPaddingScale: 1,
menuBorder: {
color: foregroundMix(0.2)
},
menuBackgroundColor: foregroundBackgroundMix(0.03),
menuTextColor: foregroundBackgroundMix(0.95),
menuShadow: {
ref: "popupShadow"
},
menuSeparatorColor: {
ref: "borderColor"
}
};
var paramTypes = [
"colorScheme",
"color",
"length",
"scale",
"borderStyle",
"border",
"shadow",
"image",
"fontFamily",
"fontWeight",
"duration"
];
var getParamType = memoize((param) => {
param = param.toLowerCase();
return paramTypes.find((type) => param.endsWith(type.toLowerCase())) ?? "length";
});
var TabGuardClassNames = {
TAB_GUARD: "ag-tab-guard",
TAB_GUARD_TOP: "ag-tab-guard-top",
TAB_GUARD_BOTTOM: "ag-tab-guard-bottom"
};
var RESIZE_CONTAINER_STYLE = "ag-resizer-wrapper";
var makeDiv = (dataRefPrefix, classSuffix) => ({
tag: "div",
ref: `${dataRefPrefix}Resizer`,
cls: `ag-resizer ag-resizer-${classSuffix}`
});
var RESIZE_TEMPLATE = {
tag: "div",
cls: RESIZE_CONTAINER_STYLE,
children: [
makeDiv("eTopLeft", "topLeft"),
makeDiv("eTop", "top"),
makeDiv("eTopRight", "topRight"),
makeDiv("eRight", "right"),
makeDiv("eBottomRight", "bottomRight"),
makeDiv("eBottom", "bottom"),
makeDiv("eBottomLeft", "bottomLeft"),
makeDiv("eLeft", "left")
]
};
function _toString(toEscape) {
return toEscape?.toString().toString() ?? null;
}
var DATE_TIME_SEPARATOR = "T";
var DATE_TIME_SEPARATOR_REGEXP = new RegExp(`[${DATE_TIME_SEPARATOR} ]`);
var DATE_TIME_REGEXP = new RegExp(
`^\\d{4}-\\d{2}-\\d{2}([${DATE_TIME_SEPARATOR} ]\\d{2}:\\d{2}(:\\d{2})?(\\.\\d+)?(Z|[+-]\\d{2}(:?\\d{2})?)?)?$`
);
// packages/ag-grid-react/src/reactUi/agGridReactUi.tsx
var import_react26 = __toESM(require("react"));
var import_ag_grid_community21 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/cellRenderer/groupCellRenderer.tsx
var import_react3 = __toESM(require("react"));
// packages/ag-grid-react/src/reactUi/beansContext.tsx
var import_react = __toESM(require("react"));
var BeansContext = import_react.default.createContext({});
var RenderModeContext = import_react.default.createContext("default");
// 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?.();
if (compGui) {
eParent.appendChild(compGui);
}
setRef(ref, comp);
});
return () => {
destroyed = true;
if (!comp) {
return;
}
compGui?.remove();
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 = {};
for (const className of initialClasses) {
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() ? /* @__PURE__ */ 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();
}
};
var agStartTransition = (fn) => {
if (!isReactVersion17Minus) {
import_react2.default.startTransition(fn);
} else {
fn();
}
};
function agUseSyncExternalStore(subscribe, getSnapshot, defaultSnapshot) {
if (import_react2.default.useSyncExternalStore) {
return import_react2.default.useSyncExternalStore(subscribe, getSnapshot);
} else {
return defaultSnapshot;
}
}
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 [expandedAriaHidden, setExpandedAriaHidden] = (0, import_react3.useState)(true);
const [contractedCssClasses, setContractedCssClasses] = (0, import_react3.useState)(() => new CssClasses("ag-hidden"));
const [contractedAriaHidden, setContractedAriaHidden] = (0, import_react3.useState)(true);
const [checkboxCssClasses, setCheckboxCssClasses] = (0, import_react3.useState)(() => new CssClasses("ag-invisible"));
const [checkboxAriaHidden, setCheckboxAriaHidden] = (0, import_react3.useState)(true);
(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 || context.isDestroyed()) {
ctrlRef.current = context.destroyBean(ctrlRef.current);
return;
}
const compProxy = {
setInnerRenderer: (details, valueToDisplay) => {
setInnerCompDetails(details);
setValue(valueToDisplay);
},
setChildCount: (count) => setChildCount(count),
toggleCss: (name, on) => setCssClasses((prev) => prev.setClass(name, on)),
setContractedDisplayed: (displayed) => {
setContractedCssClasses((prev) => prev.setClass("ag-hidden", !displayed));
setContractedAriaHidden(!displayed);
},
setExpandedDisplayed: (displayed) => {
setExpandedCssClasses((prev) => prev.setClass("ag-hidden", !displayed));
setExpandedAriaHidden(!displayed);
},
setCheckboxVisible: (visible) => {
setCheckboxCssClasses((prev) => prev.setClass("ag-invisible", !visible));
setCheckboxAriaHidden(!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?.componentFromFramework;
const FwRenderer = useFwRenderer ? innerCompDetails.componentClass : void 0;
const useValue = innerCompDetails == null && value != null;
const escapedValue = _toString(value);
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, "aria-hidden": expandedAriaHidden }),
/* @__PURE__ */ import_react3.default.createElement("span", { className: contractedClassName, ref: eContractedRef, "aria-hidden": contractedAriaHidden }),
/* @__PURE__ */ import_react3.default.createElement("span", { className: checkboxClassName, ref: eCheckboxRef, "aria-hidden": checkboxAriaHidden }),
/* @__PURE__ */ import_react3.default.createElement("span", { className: "ag-group-value", ref: eValueRef }, useValue ? escapedValue : useFwRenderer ? /* @__PURE__ */ import_react3.default.createElement(FwRenderer, { ...innerCompDetails.params }) : null),
/* @__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_community2 = 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_community = 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_community.AgPromise.resolve(false) : new import_ag_grid_community.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");
if (this.componentType.requiresBlockWrapper) {
eParentElement.classList.add("ag-react-wrapper-block");
}
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() ? /* @__PURE__ */ 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_community.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) {
for (const methodName of optionalMethodNames) {
const providedMethod = providedMethods[methodName];
if (providedMethod) {
component[methodName] = providedMethod;
}
}
}
var CustomComponentWrapper = class extends ReactComponent {
constructor() {
super(...arguments);
this.awaitUpdateCallback = new import_ag_grid_community2.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_community2.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_community2.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/customOverlayComponentWrapper.ts
var CustomOverlayComponentWrapper = class extends CustomComponentWrapper {
refresh(params) {
this.sourceParams = params;
this.refreshProps();
}
};
// 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_community3 = 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_community3.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 ["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();
this.resolveFilterPassCallback?.();
this.resolveFilterPassCallback = void 0;
}
updateModel(model) {
this.resolveFilterPassCallback?.();
const awaitFilterPassCallback = new import_ag_grid_community3.AgPromise((resolve) => {
this.resolveFilterPassCallback = resolve;
});
this.setModel(model).then(() => {
awaitFilterPassCallback.then(() => {
this.sourceParams.filterChangedCallback();
});
});
}
getProps() {
const props = super.getProps();
props.model = this.model;
props.onModelChange = this.onModelChange;
props.onUiChange = this.onUiChange;
delete props.filterChangedCallback;
return props;
}
};
// packages/ag-grid-react/src/shared/customComp/filterDisplayComponentWrapper.ts
var import_ag_grid_community4 = require("ag-grid-community");
var FilterDisplayComponentWrapper = class extends CustomComponentWrapper {
constructor() {
super(...arguments);
this.awaitSetMethodsCallback = new import_ag_grid_community4.AgPromise((resolve) => {
this.resolveSetMethodsCallback = resolve;
});
}
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 ["afterGuiDetached", "onNewRowsLoaded", "onAnyFilterChanged"];
}
setMethods(methods) {
super.setMethods(methods);
this.resolveSetMethodsCallback();
}
};
// 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 instanceof import_ag_grid_community5.ProvidedFilter ? instance.setModel(model, true) : 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/floatingFilterDisplayComponentWrapper.ts
var FloatingFilterDisplayComponentWrapper = class extends CustomComponentWrapper {
refresh(newParams) {
this.sourceParams = newParams;
this.refreshProps();
}
getOptionalMethods() {
return ["afterGuiAttached"];
}
};
// 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/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/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(gridId) {
(0, import_ag_grid_community6._warnForGrid)(gridId, 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) {
agFlushSync(true, () => this.refresher());
if (reactComponent.rendered()) {
resolve(reactComponent);
}
return;
}
window.setTimeout(() => {
this.waitForInstance(reactComponent, resolve, startTime);
});
}
}
};
// packages/ag-grid-react/src/reactUi/agGridProvider.tsx
var import_react7 = __toESM(require("react"));
var ModulesContext = import_react7.default.createContext(null);
var LicenseContext = import_react7.default.createContext(void 0);
function AgGridProvider({ modules, licenseKey, children }) {
const parentModulesRaw = (0, import_react7.useContext)(ModulesContext);
const parentModules = parentModulesRaw ?? [];
const parentLicenseKey = (0, import_react7.useContext)(LicenseContext);
const modulesRef = (0, import_react7.useRef)(modules);
const parentModulesRef = (0, import_react7.useRef)(parentModules);
const mergedModules = (0, import_react7.useRef)([...parentModules, ...modules]);
const parentModulesChanged = !_areEqual(parentModulesRef.current, parentModules);
if (parentModulesChanged) {
parentModulesRef.current = parentModules;
}
const modulesChanged = !_areEqual(modulesRef.current, modules);
if (modulesChanged) {
modulesRef.current = modules;
}
if (parentModulesChanged || modulesChanged) {
mergedModules.current = [...parentModulesRef.current, ...modulesRef.current];
}
const effectiveLicenseKey = licenseKey ?? parentLicenseKey;
return /* @__PURE__ */ import_react7.default.createElement(ModulesContext.Provider, { value: mergedModules.current }, /* @__PURE__ */ import_react7.default.createElement(LicenseContext.Provider, { value: effectiveLicenseKey }, children));
}
// packages/ag-grid-react/src/reactUi/gridComp.tsx
var import_react25 = __toESM(require("react"));
var import_ag_grid_community19 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/gridBodyComp.tsx
var import_react23 = __toESM(require("react"));
var import_ag_grid_community17 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/header/gridHeaderComp.tsx
var import_react13 = __toESM(require("react"));
var import_ag_grid_community12 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/header/headerRowsComp.tsx
var import_react12 = __toESM(require("react"));
var import_ag_grid_community11 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/header/headerRowComp.tsx
var import_react11 = __toESM(require("react"));
var import_ag_grid_community10 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/header/headerCellComp.tsx
var import_react8 = __toESM(require("react"));
var import_ag_grid_community7 = require("ag-grid-community");
var HeaderCellComp = ({ ctrl }) => {
const isAlive = ctrl.isAlive();
const { context } = (0, import_react8.useContext)(BeansContext);
const [userCompDetails, setUserCompDetails] = (0, import_react8.useState)();
const [userStyles, setUserStyles] = (0, import_react8.useState)();
const compBean = (0, import_react8.useRef)();
const eGui = (0, import_react8.useRef)(null);
const eResize = (0, import_react8.useRef)(null);
const eHeaderCompWrapper = (0, import_react8.useRef)(null);
const userCompRef = (0, import_react8.useRef)();
const cssManager = (0, import_react8.useRef)();
if (isAlive && !cssManager.current) {
cssManager.current = new CssClassManager(() => eGui.current);
}
const setRef2 = (0, import_react8.useCallback)((eRef) => {
eGui.current = eRef;
if (!eRef || !ctrl.isAlive() || context.isDestroyed()) {
compBean.current = context.destroyBean(compBean.current);
return;
}
compBean.current = context.createBean(new import_ag_grid_community7._EmptyBean());
const refreshSelectAllGui = () => {
const selectAllGui = ctrl.getSelectAllGui();
if (selectAllGui) {
eResize.current?.insertAdjacentElement("afterend", selectAllGui);
compBean.current.addDestroyFunc(() => selectAllGui.remove());
}
};
const compProxy = {
setWidth: (width) => {
if (eGui.current) {
eGui.current.style.width = width;
}
},
toggleCss: (name, on) => cssManager.current.toggleCss(name, on),
setUserStyles: (styles) => setUserStyles(styles),
setAriaSort: (sort) => {
if (eGui.current) {
if (sort) {
_setAriaSort(eGui.current, sort);
} else {
_removeAriaSort(eGui.current);
}
}
},
setUserCompDetails: (compDetails) => setUserCompDetails(compDetails),
getUserCompInstance: () => userCompRef.current || void 0,
refreshSelectAllGui,
removeSelectAllGui: () => ctrl.getSelectAllGui()?.remove()
};
ctrl.setComp(compProxy, eRef, eResize.current, eHeaderCompWrapper.current, compBean.current);
refreshSelectAllGui();
}, []);
(0, import_react8.useLayoutEffect)(
() => showJsComp(userCompDetails, context, eHeaderCompWrapper.current, userCompRef),
[userCompDetails]
);
(0, import_react8.useEffect)(() => {
ctrl.setDragSource(eGui.current);
}, [userCompDetails]);
const userCompStateless = (0, import_react8.useMemo)(() => {
const res = userCompDetails?.componentFromFramework && isComponentStateless(userCompDetails.componentClass);
return !!res;
}, [userCompDetails]);
const reactUserComp = userCompDetails?.componentFromFramework;
const UserCompClass = userCompDetails?.componentClass;
return /* @__PURE__ */ import_react8.default.createElement("div", { ref: setRef2, style: userStyles, className: "ag-header-cell", role: "columnheader" }, /* @__PURE__ */ import_react8.default.createElement("div", { ref: eResize, className: "ag-header-cell-resize", role: "presentation" }), /* @__PURE__ */ import_react8.default.createElement("div", { ref: eHeaderCompWrapper, className: "ag-header-cell-comp-wrapper", role: "presentation" }, reactUserComp ? userCompStateless ? /* @__PURE__ */ import_react8.default.createElement(UserCompClass, { ...userCompDetails.params }) : /* @__PURE__ */ import_react8.default.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompRef }) : null));
};
var headerCellComp_default = (0, import_react8.memo)(HeaderCellComp);
// packages/ag-grid-react/src/reactUi/header/headerFilterCellComp.tsx
var import_react9 = __toESM(require("react"));
var import_ag_grid_community8 = require("ag-grid-community");
// packages/ag-grid-react/src/shared/customComp/floatingFilterDisplayComponentProxy.ts
var FloatingFilterDisplayComponentProxy = class {
constructor(floatingFilterParams, refreshProps) {
this.floatingFilterParams = floatingFilterParams;
this.refreshProps = refreshProps;
}
getProps() {
return this.floatingFilterParams;
}
refresh(params) {
this.floatingFilterParams = params;
this.refreshProps();
}
setMethods(methods) {
addOptionalMethods(this.getOptionalMethods(), methods, this);
}
getOptionalMethods() {
return ["afterGuiAttached"];
}
};
// packages/ag-grid-react/src/reactUi/header/headerFilterCellComp.tsx
var HeaderFilterCellComp = ({ ctrl }) => {
const { context, gos } = (0, import_react9.useContext)(BeansContext);
const [userStyles, setUserStyles] = (0, import_react9.useState)();
const [cssClasses, setCssClasses] = (0, import_react9.useState)(
() => new CssClasses("ag-header-cell", "ag-floating-filter")
);
const [cssBodyClasses, setBodyCssClasses] = (0, import_react9.useState)(() => new CssClasses());
const [cssButtonWrapperClasses, setButtonWrapperCssClasses] = (0, import_react9.useState)(
() => new CssClasses("ag-floating-filter-button", "ag-hidden")
);
const [buttonWrapperAriaHidden, setButtonWrapperAriaHidden] = (0, import_react9.useState)("false");
const [userCompDetails, setUserCompDetails] = (0, import_react9.useState)();
const [, setRenderKey] = (0, import_react9.useState)(1);
const compBean = (0, import_react9.useRef)();
const eGui = (0, import_react9.useRef)(null);
const eFloatingFilterBody = (0, import_react9.useRef)(null);
const eButtonWrapper = (0, import_react9.useRef)(null);
const eButtonShowMainFilter = (0, import_react9.useRef)(null);
const userCompResolve = (0, import_react9.useRef)();
const userCompPromise = (0, import_react9.useRef)();
const userCompRef = (value) => {
if (value == null) {
return;
}
userCompResolve.current?.(value);
};
const setRef2 = (0, import_react9.useCallback)((eRef) => {
eGui.current = eRef;
if (!eRef || !ctrl.isAlive() || context.isDestroyed()) {
compBean.current = context.destroyBean(compBean.current);
return;
}
compBean.current = context.createBean(new import_ag_grid_community8._EmptyBean());
userCompPromise.current = new import_ag_grid_community8.AgPromise((resolve) => {
userCompResolve.current = resolve;
});
const compProxy = {
toggleCss: (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_react9.useLayoutEffect)(
() => showJsComp(userCompDetails, context, eFloatingFilterBody.current, userCompRef),
[userCompDetails]
);
const className = (0, import_react9.useMemo)(() => cssClasses.toString(), [cssClasses]);
const bodyClassName = (0, import_react9.useMemo)(() => cssBodyClasses.toString(), [cssBodyClasses]);
const buttonWrapperClassName = (0, import_react9.useMemo)(() => cssButtonWrapperClasses.toString(), [cssButtonWrapperClasses]);
const userCompStateless = (0, import_react9.useMemo)(() => {
const res = userCompDetails && userCompDetails.componentFromFramework && isComponentStateless(userCompDetails.componentClass);
return !!res;
}, [userCompDetails]);
const reactiveCustomComponents = (0, import_react9.useMemo)(() => gos.get("reactiveCustomComponents"), []);
const enableFilterHandlers = (0, import_react9.useMemo)(() => gos.get("enableFilterHandlers"), []);
const [floatingFilterCompProxy, setFloatingFilterCompProxy] = (0, import_react9.useState)();
(0, import_react9.useEffect)(() => {
if (userCompDetails?.componentFromFramework) {
if (reactiveCustomComponents) {
const ProxyClass = enableFilterHandlers ? FloatingFilterDisplayComponentProxy : FloatingFilterComponentProxy;
const compProxy = new ProxyClass(userCompDetails.params, () => setRenderKey((prev) => prev + 1));
userCompRef(compProxy);
setFloatingFilterCompProxy(compProxy);
} else {
warnReactiveCustomComponents(context.getId());
}
}
}, [userCompDetails]);
const floatingFilterProps = floatingFilterCompProxy?.getProps();
const reactUserComp = userCompDetails?.componentFromFramework;
const UserCompClass = userCompDetails?.componentClass;
return /* @__PURE__ */ import_react9.default.createElement("div", { ref: setRef2, style: userStyles, className, role: "gridcell" }, /* @__PURE__ */ import_react9.default.createElement("div", { ref: eFloatingFilterBody, className: bodyClassName, role: "presentation" }, reactUserComp ? reactiveCustomComponents ? floatingFilterProps && /* @__PURE__ */ import_react9.default.createElement(
CustomContext.Provider,
{
value: {
setMethods: (methods) => floatingFilterCompProxy.setMethods(methods)
}
},
/* @__PURE__ */ import_react9.default.createElement(UserCompClass, { ...floatingFilterProps })
) : /* @__PURE__ */ import_react9.default.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompStateless ? () => {
} : userCompRef }) : null), /* @__PURE__ */ import_react9.default.createElement(
"div",
{
ref: eButtonWrapper,
"aria-hidden": buttonWrapperAriaHidden,
className: buttonWrapperClassName,
role: "presentation"
},
/* @__PURE__ */ import_react9.default.createElement(
"button",
{
ref: eButtonShowMainFilter,
type: "button",
className: "ag-button ag-floating-filter-button-button",
tabIndex: -1
}
)
));
};
var headerFilterCellComp_default = (0, import_react9.memo)(HeaderFilterCellComp);
// packages/ag-grid-react/src/reactUi/header/headerGroupCellComp.tsx
var import_react10 = __toESM(require("react"));
var import_ag_grid_community9 = require("ag-grid-community");
var HeaderGroupCellComp = ({ ctrl }) => {
const { context } = (0, import_react10.useContext)(BeansContext);
const [userStyles, setUserStyles] = (0, import_react10.useState)();
const [cssClasses, setCssClasses] = (0, import_react10.useState)(() => new CssClasses());
const [cssResizableClasses, setResizableCssClasses] = (0, import_react10.useState)(() => new CssClasses());
const [resizableAriaHidden, setResizableAriaHidden] = (0, import_react10.useState)("false");
const [ariaExpanded, setAriaExpanded] = (0, import_react10.useState)();
const [userCompDetails, setUserCompDetails] = (0, import_react10.useState)();
const compBean = (0, import_react10.useRef)();
const eGui = (0, import_react10.useRef)(null);
const eResize = (0, import_react10.useRef)(null);
const eHeaderCompWrapper = (0, import_react10.useRef)(null);
const userCompRef = (0, import_react10.useRef)();
const setRef2 = (0, import_react10.useCallback)((eRef) => {
eGui.current = eRef;
if (!eRef || !ctrl.isAlive() || context.isDestroyed()) {
compBean.current = context.destroyBean(compBean.current);
return;
}
compBean.current = context.createBean(new import_ag_grid_community9._EmptyBean());
const compProxy = {
setWidth: (width) => {
if (eGui.current) {
eGui.current.style.width = width;
}
},
toggleCss: (name, on) => setCssClasses((prev) => prev.setClass(name, on)),
setUserStyles: (styles) => setUserStyles(styles),
setHeaderWrapperHidden: (hidden) => {
if (eHeaderCompWrapper.current) {
(0, import_ag_grid_community9._applyHeaderWrapperHidden)(eHeaderCompWrapper.current, hidden);
}
},
setHeaderWrapperMaxHeight: (value) => {
if (eHeaderCompWrapper.current) {
(0, import_ag_grid_community9._applyHeaderWrapperMaxHeight)(eHeaderCompWrapper.current, value);
}
},
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_react10.useLayoutEffect)(
() => showJsComp(userCompDetails, context, eHeaderCompWrapper.current, userCompRef),
[context, userCompDetails]
);
(0, import_react10.useEffect)(() => {
if (eGui.current) {
ctrl.setDragSource(eGui.current);
}
}, [userCompDetails]);
const userCompStateless = (0, import_react10.useMemo)(() => {
const res = userCompDetails?.componentFromFramework && isComponentStateless(userCompDetails.componentClass);
return !!res;
}, [userCompDetails]);
const className = (0, import_react10.useMemo)(() => "ag-header-group-cell " + cssClasses.toString(), [cssClasses]);
const resizableClassName = (0, import_react10.useMemo)(
() => "ag-header-cell-resize " + cssResizableClasses.toString(),
[cssResizableClasses]
);
const reactUserComp = userCompDetails?.componentFromFramework;
const UserCompClass = userCompDetails?.componentClass;
return /* @__PURE__ */ import_react10.default.createElement("div", { ref: setRef2, style: userStyles, className, role: "columnheader", "aria-expanded": ariaExpanded }, /* @__PURE__ */ import_react10.default.createElement("div", { ref: eHeaderCompWrapper, className: "ag-header-cell-comp-wrapper", role: "presentation" }, reactUserComp ? userCompStateless ? /* @__PURE__ */ import_react10.default.createElement(UserCompClass, { ...userCompDetails.params }) : /* @__PURE__ */ import_react10.default.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompRef }) : null), /* @__PURE__ */ import_react10.default.createElement("div", { ref: eResize, "aria-hidden": resizableAriaHidden, className: resizableClassName }));
};
var headerGroupCellComp_default = (0, import_react10.memo)(HeaderGroupCellComp);
// packages/ag-grid-react/src/reactUi/header/headerRowComp.tsx
function getCellSectionSignature(ctrls, isPrint) {
if (isPrint) {
return "print";
}
return ctrls.map((ctrl) => {
const pinned = ctrl.column?.getPinned() ?? "center";
return `${ctrl.instanceId}:${pinned}`;
}).join("|");
}
var HeaderRowComp = ({
ctrl,
setGuiRef
}) => {
const beans = (0, import_react11.useContext)(BeansContext);
const { context, visibleCols, gos } = beans;
const eGui = (0, import_react11.useRef)(null);
const ePinnedLeft = (0, import_react11.useRef)(null);
const eScrolling = (0, import_react11.useRef)(null);
const ePinnedRight = (0, import_react11.useRef)(null);
const compBean = (0, import_react11.useRef)();
const cellCtrlsRef = (0, import_react11.useRef)([]);
const prevCellCtrlsRef = (0, import_react11.useRef)([]);
const sectionSignatureRef = (0, import_react11.useRef)("");
const domOrderRef = (0, import_react11.useRef)(false);
const [cellCtrls, setCellCtrls] = (0, import_react11.useState)([]);
const [tabIndex, setTabIndex] = (0, import_react11.useState)(
() => (0, import_ag_grid_community10._isHeaderFocusSuppressed)(beans) ? void 0 : gos.get("tabIndex")
);
const pinnedWidthsCache = (0, import_react11.useRef)({
pinnedLeftWidth: void 0,
centerWidth: void 0,
pinnedRightWidth: void 0
});
const refreshPinnedWidths = (0, import_react11.useCallback)(() => {
if (!ePinnedLeft.current || !eScrolling.current || !ePinnedRight.current) {
return;
}
const isPrint2 = gos.get("domLayout") === "print";
(0, import_ag_grid_community10._updatePinnedSectionWidths)(
visibleCols,
isPrint2,
{ ePinnedLeft: ePinnedLeft.current, eScrolling: eScrolling.current, ePinnedRight: ePinnedRight.current },
pinnedWidthsCache.current
);
}, [gos, visibleCols]);
const setRef2 = (0, import_react11.useCallback)(
(eRef) => {
eGui.current = eRef;
setGuiRef?.(eRef);
if (!eRef || !ctrl.isAlive() || context.isDestroyed()) {
compBean.current = context.destroyBean(compBean.current);
return;
}
compBean.current = context.createBean(new import_ag_grid_community10._EmptyBean());
const updateCellCtrls = (useFlushSync) => {
const isPrint2 = gos.get("domLayout") === "print";
const nextSectionSignature = getCellSectionSignature(cellCtrlsRef.current, isPrint2);
const shouldRefreshForSectionChange = sectionSignatureRef.current !== nextSectionSignature;
const next = shouldRefreshForSectionChange ? cellCtrlsRef.current : getNextValueIfDifferent(prevCellCtrlsRef.current, cellCtrlsRef.current, domOrderRef.current);
if (next !== prevCellCtrlsRef.current) {
prevCellCtrlsRef.current = next;
sectionSignatureRef.current = nextSectionSignature;
agFlushSync(useFlushSync, () => setCellCtrls(next));
}
};
const compProxy = {
setTop: (value) => {
if (eGui.current) {
eGui.current.style.top = value;
}
},
setHeight: (value) => {
if (eGui.current) {
eGui.current.style.height = value;
}
},
setHeaderCtrls: (ctrls, forceOrder, afterScroll) => {
domOrderRef.current = forceOrder;
cellCtrlsRef.current = ctrls;
updateCellCtrls(afterScroll);
},
refreshPinnedCellGroupWidths: () => refreshPinnedWidths(),
setWidth: (value) => {
if (eGui.current) {
eGui.current.style.width = value;
}
},
setRowIndex: (rowIndex) => {
if (eGui.current) {
_setAriaRowIndex(eGui.current, rowIndex);
eGui.current.classList.toggle("ag-header-row-not-first", rowIndex !== 1);
}
},
setTabIndex
};
ctrl.setComp(compProxy, compBean.current);
},
[context, ctrl, refreshPinnedWidths, setGuiRef]
);
const isPrint = gos.get("domLayout") === "print";
const {
left: leftCells,
center: centerCells,
right: rightCells
} = (0, import_react11.useMemo)(() => {
if (isPrint) {
return { left: [], center: cellCtrls, right: [] };
}
return (0, import_ag_grid_community10._partitionByPinned)(cellCtrls, (ctrl2) => ctrl2.column?.getPinned());
}, [cellCtrls, isPrint]);
const createCellJsx = (0, import_react11.useCallback)(
(cellCtrl) => {
switch (ctrl.type) {
case "group":
return /* @__PURE__ */ import_react11.default.createElement(headerGroupCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId });
case "filter":
return /* @__PURE__ */ import_react11.default.createElement(headerFilterCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId });
default:
return /* @__PURE__ */ import_react11.default.createElement(headerCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId });
}
},
[ctrl.type]
);
return /* @__PURE__ */ import_react11.default.createElement("div", { ref: setRef2, className: ctrl.headerRowClass, role: "row", tabIndex }, /* @__PURE__ */ import_react11.default.createElement("div", { ref: ePinnedLeft, className: "ag-grid-pinned-left-cells", role: "presentation" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ag-grid-container-wrapper", role: "presentation" }, leftCells.map(createCellJsx))), /* @__PURE__ */ import_react11.default.createElement("div", { ref: eScrolling, className: "ag-grid-scrolling-cells", role: "presentation" }, centerCells.map(createCellJsx)), /* @__PURE__ */ import_react11.default.createElement("div", { ref: ePinnedRight, className: "ag-grid-pinned-right-cells", role: "presentation" }, /* @__PURE__ */ import_react11.default.createElement("div", { className: "ag-grid-container-wrapper", role: "presentation" }, rightCells.map(createCellJsx))));
};
var headerRowComp_default = (0, import_react11.memo)(HeaderRowComp);
// packages/ag-grid-react/src/reactUi/header/headerRowsComp.tsx
var HeaderRowsComp = ({
eGui,
eGridViewport,
setHeaderRowFocusableElements
}) => {
const { context } = (0, import_react12.useContext)(BeansContext);
const [headerRowCtrls, setHeaderRowCtrls] = (0, import_react12.useState)([]);
const headerRowContainerCtrlRef = (0, import_react12.useRef)();
const rowGuisRef = (0, import_react12.useRef)(/* @__PURE__ */ new Map());
const setRowGui = (0, import_react12.useCallback)((instanceId, eGui2) => {
if (eGui2) {
rowGuisRef.current.set(instanceId, eGui2);
} else {
rowGuisRef.current.delete(instanceId);
}
}, []);
(0, import_react12.useLayoutEffect)(() => {
if (!setHeaderRowFocusableElements) {
return;
}
setHeaderRowFocusableElements(
headerRowCtrls.map((ctrl) => rowGuisRef.current.get(ctrl.instanceId)).filter((eGui2) => !!eGui2)
);
}, [headerRowCtrls, setHeaderRowFocusableElements]);
(0, import_react12.useLayoutEffect)(() => {
if (!eGui || context.isDestroyed()) {
headerRowContainerCtrlRef.current = context.destroyBean(headerRowContainerCtrlRef.current);
return;
}
const compProxy = {
setCtrls: (ctrls) => setHeaderRowCtrls(ctrls),
setViewportScrollLeft: (_left) => {
}
};
headerRowContainerCtrlRef.current = context.createBean(new import_ag_grid_community11.HeaderRowContainerCtrl());
headerRowContainerCtrlRef.current.setComp(compProxy, eGui, eGridViewport);
return () => {
if (setHeaderRowFocusableElements) {
setHeaderRowFocusableElements([]);
}
headerRowContainerCtrlRef.current = context.destroyBean(headerRowContainerCtrlRef.current);
};
}, [context, eGui, eGridViewport, setHeaderRowFocusableElements]);
return /* @__PURE__ */ import_react12.default.createElement(import_react12.default.Fragment, null, headerRowCtrls.map((ctrl) => /* @__PURE__ */ import_react12.default.createElement(
headerRowComp_default,
{
ctrl,
key: ctrl.instanceId,
setGuiRef: (eGui2) => setRowGui(ctrl.instanceId, eGui2)
}
)));
};
var headerRowsComp_default = (0, import_react12.memo)(HeaderRowsComp);
// packages/ag-grid-react/src/reactUi/header/gridHeaderComp.tsx
var GridHeaderComp = ({ eTopSection, eGridViewport }) => {
const { context, environment } = (0, import_react13.useContext)(BeansContext);
const gridHeaderCtrlRef = (0, import_react13.useRef)();
const cssManager = (0, import_react13.useRef)();
const eGui = (0, import_react13.useRef)(null);
const [headerElement, setHeaderElement] = (0, import_react13.useState)(null);
const [mounted, setMounted] = (0, import_react13.useState)(false);
if (!cssManager.current) {
cssManager.current = new CssClassManager(() => eGui.current);
}
const setHeaderRowFocusableElements = (0, import_react13.useCallback)((elements) => {
gridHeaderCtrlRef.current?.setHeaderRowFocusableElements(elements);
}, []);
const setRef2 = (0, import_react13.useCallback)(
(eRef) => {
eGui.current = eRef;
setHeaderElement(eRef);
if (!eRef || context.isDestroyed()) {
eTopSection.style.removeProperty("--ag-header-rows-height");
gridHeaderCtrlRef.current = context.destroyBean(gridHeaderCtrlRef.current);
setMounted(false);
return;
}
cssManager.current.toggleCss("ag-header", true);
const compProxy = {
toggleCss: (name, on) => cssManager.current.toggleCss(name, on),
setHeightAndMinHeight: (height) => {
const borderWidth = environment.getHeaderRowBorderWidth();
const heightWithBorder = height + borderWidth;
eTopSection.style.setProperty("--ag-header-rows-height", `${heightWithBorder}px`);
if (eGui.current) {
eGui.current.style.height = `${heightWithBorder}px`;
}
}
};
gridHeaderCtrlRef.current = context.createBean(new import_ag_grid_community12.GridHeaderCtrl());
gridHeaderCtrlRef.current.setComp(compProxy, eRef);
setMounted(true);
},
[context, environment, eTopSection]
);
return /* @__PURE__ */ import_react13.default.createElement("div", { ref: setRef2, role: "presentation" }, mounted && headerElement && /* @__PURE__ */ import_react13.default.createElement(
headerRowsComp_default,
{
eGui: headerElement,
eGridViewport,
setHeaderRowFocusableElements
}
));
};
var gridHeaderComp_default = (0, import_react13.memo)(GridHeaderComp);
// packages/ag-grid-react/src/reactUi/reactComment.tsx
var import_react14 = require("react");
var useReactCommentEffect = (comment, eForCommentRef) => {
(0, import_react14.useEffect)(() => {
const eForComment = eForCommentRef.current;
if (eForComment) {
const eParent = eForComment.parentElement;
if (eParent) {
const eComment = document.createComment(comment);
eParent.insertBefore(eComment, eForComment);
return () => {
eComment.remove();
};
}
}
}, [comment]);
};
var reactComment_default = useReactCommentEffect;
// packages/ag-grid-react/src/reactUi/rows/rowContainerComp.tsx
var import_react22 = __toESM(require("react"));
var import_ag_grid_community16 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/rows/rowComp.tsx
var import_react21 = __toESM(require("react"));
var import_ag_grid_community15 = require("ag-grid-community");
// packages/ag-grid-react/src/reactUi/cells/cellComp.tsx
var import_react20 = __toESM(require("react"));
var import_ag_grid_community14 = require("ag-grid-community");
// packages/ag-grid-react/src/shared/customComp/cellEditorComponentProxy.ts
var import_ag_grid_community13 = require("ag-grid-community");
var CellEditorComponentProxy = class {
constructor(cellEditorParams, refreshProps) {
this.cellEditorParams = cellEditorParams;
this.refreshProps = refreshProps;
this.instanceCreated = new import_ag_grid_community13.AgPromise((resolve) => {
this.resolveInstanceCreated = resolve;
});
this.onValueChange = (value) => this.updateValue(value);
this.value = cellEditorParams.value;
}
getProps() {
return {
...this.cellEditorParams,
initialValue: this.cellEditorParams.value,
value: this.value,
onValueChange: this.onValueChange
};
}
getValue() {
return this.value;
}
refresh(params) {
this.cellEditorParams = params;
this.refreshProps();
}
setMethods(methods) {
addOptionalMethods(this.getOptionalMethods(), methods, this);
}
getInstance() {
return this.instanceCreated.then(() => this.componentInstance);
}
setRef(componentInstance) {
this.componentInstance = componentInstance;
this.resolveInstanceCreated?.();
this.resolveInstanceCreated = void 0;
}
getOptionalMethods() {
return [
"isCancelBeforeStart",
"isCancelAfterEnd",
"focusIn",
"focusOut",
"afterGuiAttached",
"getValidationErrors",
"getValidationElement"
];
}
updateValue(value) {
this.value = value;
this.refreshProps();
}
};
// packages/ag-grid-react/src/reactUi/cells/cellEditorComp.tsx
var import_react17 = __toESM(require("react"));
// packages/ag-grid-react/src/reactUi/cells/popupEditorComp.tsx
var import_react16 = require("react");
var import_react_dom3 = require("react-dom");
// packages/ag-grid-react/src/reactUi/useEffectOnce.tsx
var import_react15 = require("react");
var useEffectOnce = (effect) => {
const effectFn = (0, import_react15.useRef)(effect);
const destroyFn = (0, import_react15.useRef)();
const effectCalled = (0, import_react15.useRef)(false);
const rendered = (0, import_react15.useRef)(false);
const [, setVal] = (0, import_react15.useState)(0);
if (effectCalled.current) {
rendered.current = true;
}
(0, import_react15.useEffect)(() => {
if (!effectCalled.current) {
destroyFn.current = effectFn.current();
effectCalled.current = true;
}
setVal((val) => val + 1);
return () => {
if (!rendered.current) {
return;
}
destroyFn.current?.();
};
}, []);
};
// packages/ag-grid-react/src/reactUi/cells/popupEditorComp.tsx
var PopupEditorComp = (props) => {
const [popupEditorWrapper, setPopupEditorWrapper] = (0, import_react16.useState)();
const beans = (0, import_react16.useContext)(BeansContext);
const { context, popupSvc, gos, editSvc } = beans;
const { editDetails, cellCtrl, eParentCell } = props;
useEffectOnce(() => {
const { compDetails } = editDetails;
const useModelPopup = gos.get("stopEditingWhenCellsLoseFocus");
let hideEditorPopup = void 0;
let wrapper;
if (!context.isDestroyed()) {
wrapper = context.createBean(editSvc.createPopupEditorWrapper(compDetails.params));
const ePopupGui = wrapper.getGui();
if (props.jsChildComp) {
const eChildGui = props.jsChildComp.getGui();
if (eChildGui) {
ePopupGui.appendChild(eChildGui);
}
}
const { column, rowNode } = cellCtrl;
const positionParams = {
column,
rowNode,
type: "popupCellEditor",
eventSource: eParentCell,
ePopup: ePopupGui,
position: editDetails.popupPosition,
keepWithinBounds: true
};
const positionCallback = popupSvc?.positionPopupByComponent.bind(popupSvc, positionParams);
const addPopupRes = popupSvc?.addPopup({
modal: useModelPopup,
eChild: ePopupGui,
closeOnEsc: true,
closedCallback: (e) => {
editSvc.onPopupEditorClosed(cellCtrl, e);
},
anchorToElement: eParentCell,
positionCallback,
ariaOwns: eParentCell
});
hideEditorPopup = addPopupRes ? addPopupRes.hideFunc : void 0;
setPopupEditorWrapper(wrapper);
props.jsChildComp?.afterGuiAttached?.();
}
return () => {
hideEditorPopup?.();
context.destroyBean(wrapper);
};
});
(0, import_react16.useLayoutEffect)(() => {
return () => {
if (cellCtrl.isCellFocused() && popupEditorWrapper?.getGui().contains(_getActiveDomElement(beans))) {
eParentCell.focus({ preventScroll: true });
}
};
}, [popupEditorWrapper]);
return popupEditorWrapper && props.wrappedContent ? (0, import_react_dom3.createPortal)(props.wrappedContent, popupEditorWrapper.getGui()) : null;
};
var popupEditorComp_default = (0, import_react16.memo)(PopupEditorComp);
// packages/ag-grid-react/src/reactUi/cells/cellEditorComp.tsx
var jsxEditorProxy = (editDetails, CellEditorClass, setRef2) => {
const { compProxy } = editDetails;
setRef2(compProxy);
const props = compProxy.getProps();
const isStateless = isComponentStateless(CellEditorClass);
return /* @__PURE__ */ import_react17.default.createElement(
CustomContext.Provider,
{
value: {
setMethods: (methods) => compProxy.setMethods(methods)
}
},
isStateless ? /* @__PURE__ */ import_react17.default.createElement(CellEditorClass, { ...props }) : /* @__PURE__ */ import_react17.default.createElement(CellEditorClass, { ...props, ref: (ref) => compProxy.setRef(ref) })
);
};
var jsxEditor = (editDetails, CellEditorClass, setRef2) => {
const newFormat = editDetails.compProxy;
return newFormat ? jsxEditorProxy(editDetails, CellEditorClass, setRef2) : /* @__PURE__ */ import_react17.default.createElement(CellEditorClass, { ...editDetails.compDetails.params, ref: setRef2 });
};
var jsxEditValue = (editDetails, setCellEditorRef, eGui, cellCtrl, jsEditorComp) => {
const compDetails = editDetails.compDetails;
const CellEditorClass = compDetails.componentClass;
const reactInlineEditor = compDetails.componentFromFramework && !editDetails.popup;
const reactPopupEditor = compDetails.componentFromFramework && editDetails.popup;
const jsPopupEditor = !compDetails.componentFromFramework && editDetails.popup;
return reactInlineEditor ? jsxEditor(editDetails, CellEditorClass, setCellEditorRef) : reactPopupEditor ? /* @__PURE__ */ import_react17.default.createElement(
popupEditorComp_default,
{
editDetails,
cellCtrl,
eParentCell: eGui,
wrappedContent: jsxEditor(editDetails, CellEditorClass, setCellEditorRef)
}
) : jsPopupEditor && jsEditorComp ? /* @__PURE__ */ import_react17.default.createElement(popupEditorComp_default, { editDetails, cellCtrl, eParentCell: eGui, jsChildComp: jsEditorComp }) : null;
};
// packages/ag-grid-react/src/reactUi/cells/showJsRenderer.tsx
var import_react18 = require("react");
var useJsCellRenderer = (showDetails, showTools, eCellValue, cellValueVersion, jsCellRendererRef, eGui, suppressInlineEditRenderer = false, onRendererDestroyed) => {
const { context } = (0, import_react18.useContext)(BeansContext);
const onRendererDestroyedRef = (0, import_react18.useRef)(onRendererDestroyed);
onRendererDestroyedRef.current = onRendererDestroyed;
const destroyCellRenderer = (0, import_react18.useCallback)((resetTooltip = true) => {
const comp = jsCellRendererRef.current;
if (!comp) {
return;
}
const compGui = comp.getGui();
if (compGui && compGui.parentElement) {
compGui.remove();
}
context.destroyBean(comp);
jsCellRendererRef.current = void 0;
if (!resetTooltip) {
return;
}
onRendererDestroyedRef.current?.();
}, []);
(0, import_react18.useEffect)(() => {
const showValue = showDetails != null && !suppressInlineEditRenderer;
const jsCompDetails = showDetails?.compDetails && !showDetails.compDetails.componentFromFramework;
const waitingForToolsSetup = showTools && eCellValue == null;
const showComp = showValue && jsCompDetails && !waitingForToolsSetup;
if (!showComp) {
destroyCellRenderer();
return;
}
const compDetails = showDetails.compDetails;
if (jsCellRendererRef.current) {
const comp = jsCellRendererRef.current;
const attemptRefresh = comp.refresh != null && showDetails.force == false;
const refreshResult = attemptRefresh ? comp.refresh(compDetails.params) : false;
const refreshWorked = refreshResult === true || refreshResult === void 0;
if (refreshWorked) {
return;
}
destroyCellRenderer();
}
const promise = compDetails.newAgStackInstance();
promise.then((comp) => {
if (!comp) {
return;
}
const compGui = comp.getGui();
if (!compGui) {
return;
}
const parent = showTools ? eCellValue : eGui.current;
parent.appendChild(compGui);
jsCellRendererRef.current = comp;
});
}, [showDetails, showTools, cellValueVersion, suppressInlineEditRenderer]);
(0, import_react18.useEffect)(() => {
return () => destroyCellRenderer(false);
}, []);
};
var showJsRenderer_default = useJsCellRenderer;
// packages/ag-grid-react/src/reactUi/cells/skeletonCellComp.tsx
var import_react19 = __toESM(require("react"));
var SkeletonCellRenderer = ({
cellCtrl,
parent
}) => {
const jsCellRendererRef = (0, import_react19.useRef)();
const renderDetails = (0, import_react19.useMemo)(() => {
const { loadingComp } = cellCtrl.getDeferLoadingCellRenderer();
return loadingComp ? {
value: void 0,
compDetails: loadingComp,
force: false
} : void 0;
}, [cellCtrl]);
showJsRenderer_default(renderDetails, false, void 0, 1, jsCellRendererRef, parent);
if (renderDetails?.compDetails?.componentFromFramework) {
const CellRendererClass = renderDetails.compDetails.componentClass;
return /* @__PURE__ */ import_react19.default.createElement(CellRendererClass, { ...renderDetails.compDetails.params });
}
return /* @__PURE__ */ import_react19.default.createElement(import_react19.default.Fragment, null);
};
// packages/ag-grid-react/src/reactUi/cells/cellComp.tsx
var CellComp = ({
cellCtrl,
printLayout,
editingCell
}) => {
const beans = (0, import_react20.useContext)(BeansContext);
const { context } = beans;
const {
column: { colIdSanitised },
instanceId
} = cellCtrl;
const compBean = (0, import_react20.useRef)();
const [renderDetails, setRenderDetails] = (0, import_react20.useState)(
() => cellCtrl.isCellRenderer() ? void 0 : { compDetails: void 0, value: cellCtrl.getValueToDisplay(), force: false }
);
const [editDetails, setEditDetails] = (0, import_react20.useState)();
const [renderKey, setRenderKey] = (0, import_react20.useState)(1);
const [userStyles, setUserStyles] = (0, import_react20.useState)();
const [includeSelection, setIncludeSelection] = (0, import_react20.useState)(false);
const [includeRowDrag, setIncludeRowDrag] = (0, import_react20.useState)(false);
const [includeDndSource, setIncludeDndSource] = (0, import_react20.useState)(false);
const rowResizerElement = (0, import_react20.useRef)(null);
const [jsEditorComp, setJsEditorComp] = (0, import_react20.useState)();
const forceWrapper = (0, import_react20.useMemo)(() => cellCtrl.isForceWrapper(), [cellCtrl]);
const cellAriaRole = (0, import_react20.useMemo)(() => cellCtrl.getCellAriaRole(), [cellCtrl]);
const eGui = (0, import_react20.useRef)(null);
const eWrapper = (0, import_react20.useRef)(null);
const cellRendererRef = (0, import_react20.useRef)(null);
const jsCellRendererRef = (0, import_react20.useRef)();
const cellEditorRef = (0, import_react20.useRef)();
const eCellWrapper = (0, import_react20.useRef)();
const cellWrapperDestroyFuncs = (0, import_react20.useRef)([]);
const rowDragCompRef = (0, import_react20.useRef)();
const eCellValue = (0, import_react20.useRef)();
const [cellValueVersion, setCellValueVersion] = (0, import_react20.useState)(0);
const setCellValueRef = (0, import_react20.useCallback)((ref) => {
eCellValue.current = ref;
setCellValueVersion((v) => v + 1);
}, []);
const showTools = renderDetails != null && (includeSelection || includeDndSource || includeRowDrag) && (editDetails == null || !!editDetails.popup);
const showCellWrapper = forceWrapper || showTools;
const cellValueClass = (0, import_react20.useMemo)(() => {
return cellCtrl.getCellValueClass();
}, [cellCtrl]);
const setCellEditorRef = (0, import_react20.useCallback)(
(cellEditor) => {
cellEditorRef.current = cellEditor;
if (cellEditor) {
const editingCancelledByUserComp = cellEditor.isCancelBeforeStart && cellEditor.isCancelBeforeStart();
setTimeout(() => {
if (editingCancelledByUserComp) {
cellCtrl.stopEditing(true);
cellCtrl.focusCell({ forceBrowserFocus: true });
} else {
beans.editSvc?.onEditorAttached(cellCtrl);
cellCtrl.enableEditorTooltipFeature(cellEditor);
}
});
}
},
[cellCtrl]
);
const cssManager = (0, import_react20.useRef)();
if (!cssManager.current) {
cssManager.current = new CssClassManager(() => eGui.current);
}
const suppressJsRenderer = !!editDetails && !editDetails.popup;
const resetCellRendererTooltip = (0, import_react20.useCallback)(() => cellCtrl.resetCellRendererTooltip(), [cellCtrl]);
showJsRenderer_default(
renderDetails,
showCellWrapper,
eCellValue.current,
cellValueVersion,
jsCellRendererRef,
eGui,
suppressJsRenderer,
resetCellRendererTooltip
);
const lastRenderDetails = (0, import_react20.useRef)();
(0, import_react20.useLayoutEffect)(() => {
const oldDetails = lastRenderDetails.current;
const newDetails = renderDetails;
lastRenderDetails.current = renderDetails;
const oldCompDetails = oldDetails?.compDetails;
const newCompDetails = newDetails?.compDetails;
if (oldCompDetails == null || newCompDetails == null || oldCompDetails === newCompDetails) {
return;
}
rowDragCompRef.current?.refreshVisibility();
if (oldCompDetails.componentClass != newCompDetails.componentClass) {
return;
}
if (cellRendererRef.current?.refresh == null) {
return;
}
const result = cellRendererRef.current.refresh(newCompDetails.params);
if (result != true) {
cellCtrl.resetCellRendererTooltip();
setRenderKey((prev) => prev + 1);
}
}, [renderDetails]);
(0, import_react20.useLayoutEffect)(() => {
const doingJsEditor = editDetails && !editDetails.compDetails.componentFromFramework;
if (!doingJsEditor || context.isDestroyed()) {
return;
}
const compDetails = editDetails.compDetails;
const isPopup = editDetails.popup === true;
const cellEditorPromise = compDetails.newAgStackInstance();
cellEditorPromise.then((cellEditor) => {
if (!cellEditor) {
return;
}
const compGui = cellEditor.getGui();
setCellEditorRef(cellEditor);
if (!isPopup) {
const parentEl = (forceWrapper ? eCellWrapper : eGui).current;
parentEl?.appendChild(compGui);
cellEditor.afterGuiAttached?.();
}
setJsEditorComp(cellEditor);
});
return () => {
cellEditorPromise.then((cellEditor) => {
const compGui = cellEditor.getGui();
cellCtrl.disableEditorTooltipFeature();
context.destroyBean(cellEditor);
setCellEditorRef(void 0);
setJsEditorComp(void 0);
compGui?.remove();
});
};
}, [editDetails]);
const setCellWrapperRef = (0, import_react20.useCallback)(
(eRef) => {
eCellWrapper.current = eRef;
if (!eRef || context.isDestroyed() || !cellCtrl.isAlive()) {
const callbacks = cellWrapperDestroyFuncs.current;
cellWrapperDestroyFuncs.current = [];
for (const cb of callbacks) {
cb();
}
return;
}
let rowDragComp;
const addComp = (comp) => {
if (comp) {
eRef.insertAdjacentElement("afterbegin", comp.getGui());
cellWrapperDestroyFuncs.current.push(() => {
_removeFromParent(comp.getGui());
context.destroyBean(comp);
if (rowDragCompRef.current === rowDragComp) {
rowDragCompRef.current = void 0;
}
});
}
};
if (includeSelection) {
addComp(cellCtrl.createSelectionCheckbox());
}
if (includeDndSource) {
addComp(cellCtrl.createDndSource());
}
if (includeRowDrag) {
rowDragComp = cellCtrl.createRowDragComp();
rowDragCompRef.current = rowDragComp;
if (rowDragComp) {
addComp(rowDragComp);
rowDragComp.refreshVisibility();
}
}
},
[cellCtrl, context, includeDndSource, includeRowDrag, includeSelection]
);
const init = (0, import_react20.useCallback)(() => {
const spanReady = !cellCtrl.isCellSpanning() || eWrapper.current;
const eRef = eGui.current;
if (!eRef || !spanReady || !cellCtrl?.isAlive() || context.isDestroyed()) {
compBean.current = context.destroyBean(compBean.current);
return;
}
compBean.current = context.createBean(new import_ag_grid_community14._EmptyBean());
const compProxy = {
toggleCss: (name, on) => cssManager.current.toggleCss(name, on),
setUserStyles: (styles) => setUserStyles(styles),
getFocusableElement: () => eGui.current,
setIncludeSelection: (include) => setIncludeSelection(include),
setIncludeRowDrag: (include) => setIncludeRowDrag(include),
setIncludeDndSource: (include) => setIncludeDndSource(include),
setRowResizerElement: (element) => {
if (rowResizerElement.current) {
_removeFromParent(rowResizerElement.current);
}
rowResizerElement.current = element;
if (element && eGui.current) {
eGui.current.appendChild(element);
}
},
getCellEditor: () => cellEditorRef.current ?? null,
getCellRenderer: () => cellRendererRef.current ?? jsCellRendererRef.current,
getParentOfValue: () => eCellValue.current ?? eCellWrapper.current ?? eGui.current,
setRenderDetails: (compDetails, value, force) => {
const setDetails = () => {
setRenderDetails((prev) => {
if (prev?.compDetails !== compDetails || prev?.value !== value || prev?.force !== force) {
const previousCompDetails = prev?.compDetails;
const rendererRemoved = previousCompDetails != null && compDetails == null;
const rendererReplaced = previousCompDetails != null && compDetails != null && previousCompDetails.componentClass !== compDetails.componentClass;
if (rendererRemoved || rendererReplaced) {
cellCtrl.resetCellRendererTooltip();
}
return {
value,
compDetails,
force
};
} else {
return prev;
}
});
};
if (compDetails?.params?.deferRender && !cellCtrl.rowNode.group) {
const { loadingComp, onReady } = cellCtrl.getDeferLoadingCellRenderer();
if (loadingComp) {
setRenderDetails({
value: void 0,
compDetails: loadingComp,
force: false
});
onReady.then(() => agStartTransition(setDetails));
return;
}
}
setDetails();
},
setEditDetails: (compDetails, popup, popupPosition, reactiveCustomComponents) => {
if (compDetails) {
let compProxy2 = void 0;
if (compDetails.componentFromFramework) {
if (reactiveCustomComponents) {
compProxy2 = new CellEditorComponentProxy(
compDetails.params,
() => setRenderKey((prev) => prev + 1)
);
} else {
warnReactiveCustomComponents(beans.context.getId());
}
}
setEditDetails({
compDetails,
popup,
popupPosition,
compProxy: compProxy2
});
if (!popup) {
setRenderDetails(void 0);
}
} else {
const recoverFocus = cellCtrl.hasBrowserFocus();
if (recoverFocus) {
compProxy.getFocusableElement().focus({ preventScroll: true });
}
cellEditorRef.current = void 0;
setEditDetails(void 0);
}
},
refreshEditStyles: (editing, isPopup) => {
if (!eGui.current) {
return;
}
const { current } = cssManager;
current.toggleCss("ag-cell-value", !showCellWrapper);
current.toggleCss("ag-cell-inline-editing", !!editing && !isPopup);
current.toggleCss("ag-cell-popup-editing", !!editing && !!isPopup);
current.toggleCss("ag-cell-not-inline-editing", !editing || !!isPopup);
}
};
const cellWrapperOrUndefined = eCellWrapper.current || void 0;
cellCtrl.setComp(
compProxy,
eRef,
eWrapper.current ?? void 0,
cellWrapperOrUndefined,
printLayout,
editingCell,
compBean.current
);
}, []);
const setGuiRef = (0, import_react20.useCallback)((ref) => {
eGui.current = ref;
init();
}, []);
const setWrapperRef = (0, import_react20.useCallback)((ref) => {
eWrapper.current = ref;
init();
}, []);
const reactCellRendererStateless = (0, import_react20.useMemo)(() => {
const res = renderDetails?.compDetails?.componentFromFramework && isComponentStateless(renderDetails.compDetails.componentClass);
return !!res;
}, [renderDetails]);
(0, import_react20.useLayoutEffect)(() => {
if (!eGui.current) {
return;
}
const { current } = cssManager;
current.toggleCss("ag-cell-value", !showCellWrapper);
current.toggleCss("ag-cell-inline-editing", !!editDetails && !editDetails.popup);
current.toggleCss("ag-cell-popup-editing", !!editDetails && !!editDetails.popup);
current.toggleCss("ag-cell-not-inline-editing", !editDetails || !!editDetails.popup);
});
const valueOrCellComp = () => {
const { compDetails, value } = renderDetails;
if (!compDetails) {
return value?.toString?.() ?? value;
}
if (compDetails.componentFromFramework) {
const CellRendererClass = compDetails.componentClass;
return /* @__PURE__ */ import_react20.default.createElement(import_react20.Suspense, { fallback: /* @__PURE__ */ import_react20.default.createElement(SkeletonCellRenderer, { cellCtrl, parent: eGui }) }, reactCellRendererStateless ? /* @__PURE__ */ import_react20.default.createElement(CellRendererClass, { ...compDetails.params, key: renderKey }) : /* @__PURE__ */ import_react20.default.createElement(CellRendererClass, { ...compDetails.params, key: renderKey, ref: cellRendererRef }));
}
};
const showCellOrEditor = () => {
const showCellValue = () => {
if (renderDetails == null) {
return null;
}
return showCellWrapper ? /* @__PURE__ */ import_react20.default.createElement("span", { role: "presentation", id: `cell-${instanceId}`, className: cellValueClass, ref: setCellValueRef }, valueOrCellComp()) : valueOrCellComp();
};
const showEditValue = (details) => jsxEditValue(details, setCellEditorRef, eGui.current, cellCtrl, jsEditorComp);
if (editDetails != null) {
if (editDetails.popup) {
return /* @__PURE__ */ import_react20.default.createElement(import_react20.default.Fragment, null, showCellValue(), showEditValue(editDetails));
}
return showEditValue(editDetails);
}
return showCellValue();
};
const renderCell = () => /* @__PURE__ */ import_react20.default.createElement("div", { ref: setGuiRef, style: userStyles, role: cellAriaRole, "col-id": colIdSanitised }, showCellWrapper ? /* @__PURE__ */ import_react20.default.createElement("div", { className: "ag-cell-wrapper", role: "presentation", ref: setCellWrapperRef }, showCellOrEditor()) : showCellOrEditor());
if (cellCtrl.isCellSpanning()) {
return /* @__PURE__ */ import_react20.default.createElement("div", { ref: setWrapperRef, className: "ag-spanned-cell-wrapper", role: "presentation" }, renderCell());
}
return renderCell();
};
var cellComp_default = (0, import_react20.memo)(CellComp);
// packages/ag-grid-react/src/reactUi/rows/rowComp.tsx
var RowComp = ({ rowCtrl, containerType }) => {
const { context, gos, editSvc } = (0, import_react21.useContext)(BeansContext);
const enableUses = (0, import_react21.useContext)(RenderModeContext) === "default";
const compBean = (0, import_react21.useRef)();
const domOrderRef = (0, import_react21.useRef)(rowCtrl.getDomOrder());
const isFullWidth = rowCtrl.isFullWidth();
const isDisplayed = rowCtrl.rowNode.displayed;
const [rowIndex, setRowIndex] = (0, import_react21.useState)(
() => isDisplayed ? rowCtrl.rowNode.getRowIndexString() : null
);
const [rowId, setRowId] = (0, import_react21.useState)(() => rowCtrl.rowId);
const [rowBusinessKey, setRowBusinessKey] = (0, import_react21.useState)(() => rowCtrl.businessKey);
const [userStyles, setUserStyles] = (0, import_react21.useState)(() => rowCtrl.rowStyles);
const [cellCtrlsFlushSync, setCellCtrlsFlushSync] = (0, import_react21.useState)(
() => rowCtrl.getInitialCellCtrls(containerType)
);
const cellCtrlsRef = (0, import_react21.useRef)(cellCtrlsFlushSync);
const [fullWidthCompDetails, setFullWidthCompDetails] = (0, import_react21.useState)();
const [embeddedFullWidthCompDetails, setEmbeddedFullWidthCompDetails] = (0, import_react21.useState)();
const embeddedFullWidthCompDetailsRef = (0, import_react21.useRef)();
const [top, setTop] = (0, import_react21.useState)(() => isDisplayed ? rowCtrl.getInitialRowTop() : void 0);
const [transform, setTransform] = (0, import_react21.useState)(
() => isDisplayed ? rowCtrl.getInitialTransform() : void 0
);
const eGui = (0, import_react21.useRef)(null);
const eFullWidthAnchor = (0, import_react21.useRef)(null);
const ePinnedLeftCells = (0, import_react21.useRef)(null);
const eScrollingCells = (0, import_react21.useRef)(null);
const ePinnedRightCells = (0, import_react21.useRef)(null);
const fullWidthCompRef = (0, import_react21.useRef)();
const fullWidthEmbeddedLeftCompRef = (0, import_react21.useRef)();
const fullWidthEmbeddedCenterCompRef = (0, import_react21.useRef)();
const fullWidthEmbeddedRightCompRef = (0, import_react21.useRef)();
const fullWidthParamsRef = (0, import_react21.useRef)();
const fullWidthEmbeddedLeftParamsRef = (0, import_react21.useRef)();
const fullWidthEmbeddedCenterParamsRef = (0, import_react21.useRef)();
const fullWidthEmbeddedRightParamsRef = (0, import_react21.useRef)();
const [, setEmbeddedSectionHasContent] = (0, import_react21.useState)(() => rowCtrl.embeddedSectionHasContent);
const [, refreshWidths] = (0, import_react21.useState)(0);
const autoHeightSetup = (0, import_react21.useRef)(false);
const [autoHeightSetupAttempt, setAutoHeightSetupAttempt] = (0, import_react21.useState)(0);
(0, import_react21.useEffect)(() => {
if (autoHeightSetup.current || !fullWidthCompDetails || autoHeightSetupAttempt > 10) {
return;
}
const eChild = eFullWidthAnchor.current?.firstChild;
if (eChild) {
rowCtrl.setupDetailRowAutoHeight(eChild);
autoHeightSetup.current = true;
} else {
setAutoHeightSetupAttempt((prev) => prev + 1);
}
}, [fullWidthCompDetails, autoHeightSetupAttempt]);
const cssManager = (0, import_react21.useRef)();
if (!cssManager.current) {
cssManager.current = new CssClassManager(() => eGui.current);
}
const cellsChanged = (0, import_react21.useRef)(() => {
});
const sub = (0, import_react21.useCallback)((onStoreChange) => {
cellsChanged.current = onStoreChange;
return () => {
cellsChanged.current = () => {
};
};
}, []);
const cellCtrlsUses = agUseSyncExternalStore(sub, () => {
return cellCtrlsRef.current;
}, []);
const cellCtrlsMerged = enableUses ? cellCtrlsUses : cellCtrlsFlushSync;
const setRef2 = (0, import_react21.useCallback)((eRef) => {
eGui.current = eRef;
compBean.current = eRef ? context.createBean(new import_ag_grid_community15._EmptyBean()) : context.destroyBean(compBean.current);
if (!eRef) {
rowCtrl.unsetComp(containerType);
return;
}
if (!rowCtrl.isAlive() || context.isDestroyed()) {
return;
}
const compProxy = {
// the rowTop is managed by state, instead of direct style manipulation by rowCtrl (like all the other styles)
// as we need to have an initial value when it's placed into he DOM for the first time, for animation to work.
setTop,
setTransform,
// i found using React for managing classes at the row level was to slow, as modifying classes caused a lot of
// React code to execute, so avoiding React for managing CSS Classes made the grid go much faster.
toggleCss: (name, on) => cssManager.current.toggleCss(name, on),
setDomOrder: (domOrder) => domOrderRef.current = domOrder,
setRowIndex,
setRowId,
setRowBusinessKey,
setUserStyles,
// if we don't maintain the order, then cols will be ripped out and into the dom
// when cols reordered, which would stop the CSS transitions from working
setCellCtrls: (next, useFlushSync) => {
const prevCellCtrls = cellCtrlsRef.current;
const nextCells = getNextValueIfDifferent(prevCellCtrls, next, domOrderRef.current);
if (nextCells !== prevCellCtrls) {
cellCtrlsRef.current = nextCells;
if (enableUses) {
cellsChanged.current();
} else {
agFlushSync(useFlushSync, () => setCellCtrlsFlushSync(nextCells));
}
}
},
getPinnedLeftRowElement: () => ePinnedLeftCells.current ?? void 0,
getScrollingRowElement: () => eScrollingCells.current ?? void 0,
getPinnedRightRowElement: () => ePinnedRightCells.current ?? void 0,
refreshPinnedSections: () => refreshWidths((v) => v + 1),
showFullWidth: (compDetails) => {
embeddedFullWidthCompDetailsRef.current = void 0;
setEmbeddedFullWidthCompDetails(void 0);
setEmbeddedSectionHasContent({ left: true, center: true, right: true });
fullWidthParamsRef.current = compDetails.params;
setFullWidthCompDetails(compDetails);
},
showEmbeddedFullWidth: (compDetails) => {
setFullWidthCompDetails(void 0);
setEmbeddedSectionHasContent({ left: true, center: true, right: true });
fullWidthEmbeddedLeftParamsRef.current = compDetails.left.params;
fullWidthEmbeddedCenterParamsRef.current = compDetails.center.params;
fullWidthEmbeddedRightParamsRef.current = compDetails.right.params;
embeddedFullWidthCompDetailsRef.current = compDetails;
setEmbeddedFullWidthCompDetails(compDetails);
},
getFullWidthCellRenderers: () => {
if (rowCtrl.isEmbeddedFullWidth) {
return [
fullWidthEmbeddedLeftCompRef.current,
fullWidthEmbeddedCenterCompRef.current,
fullWidthEmbeddedRightCompRef.current
].filter((r) => r != null);
}
return fullWidthCompRef.current ? [fullWidthCompRef.current] : [];
},
getFullWidthCellRendererParams: () => fullWidthParamsRef.current ?? fullWidthEmbeddedCenterParamsRef.current,
getFullWidthCellRendererParamsForPinned: (pinned) => pinned === "left" ? fullWidthEmbeddedLeftParamsRef.current : pinned === "right" ? fullWidthEmbeddedRightParamsRef.current : fullWidthEmbeddedCenterParamsRef.current,
refreshFullWidth: (getUpdatedParams) => {
const fullWidthParams = getUpdatedParams();
fullWidthParamsRef.current = fullWidthParams;
if (canRefreshFullWidthRef.current) {
setFullWidthCompDetails((prevFullWidthCompDetails) => ({
...prevFullWidthCompDetails,
params: fullWidthParams
}));
return true;
} else {
if (!fullWidthCompRef.current || !fullWidthCompRef.current.refresh) {
return false;
}
return fullWidthCompRef.current.refresh(fullWidthParams);
}
},
refreshEmbeddedFullWidth: (getUpdatedParams) => {
const leftParams = getUpdatedParams("left");
const centerParams = getUpdatedParams(null);
const rightParams = getUpdatedParams("right");
fullWidthEmbeddedLeftParamsRef.current = leftParams;
fullWidthEmbeddedCenterParamsRef.current = centerParams;
fullWidthEmbeddedRightParamsRef.current = rightParams;
const leftRef = fullWidthEmbeddedLeftCompRef.current;
const centerRef = fullWidthEmbeddedCenterCompRef.current;
const rightRef = fullWidthEmbeddedRightCompRef.current;
const currentDetails = embeddedFullWidthCompDetailsRef.current;
let nextDetails;
const refreshSection = (section, params, renderer, hasContent) => {
const details = currentDetails?.[section];
const isStatelessFrameworkRenderer = !!details?.componentFromFramework && isComponentStateless(details.componentClass);
if (isStatelessFrameworkRenderer) {
if (!gos.get("reactiveCustomComponents") || !currentDetails) {
return false;
}
nextDetails ?? (nextDetails = { ...currentDetails });
nextDetails[section] = { ...details, params };
return true;
}
return renderer?.refresh?.(params) ?? !hasContent;
};
const leftRefreshed = refreshSection(
"left",
leftParams,
leftRef,
rowCtrl.embeddedSectionHasContent.left
);
const centerRefreshed = refreshSection("center", centerParams, centerRef, true);
const rightRefreshed = refreshSection(
"right",
rightParams,
rightRef,
rowCtrl.embeddedSectionHasContent.right
);
if (nextDetails) {
embeddedFullWidthCompDetailsRef.current = nextDetails;
setEmbeddedFullWidthCompDetails(nextDetails);
}
return leftRefreshed && centerRefreshed && rightRefreshed;
}
};
rowCtrl.setComp(compProxy, eRef, containerType, compBean.current);
}, []);
const showEmbeddedFullWidth = isFullWidth && rowCtrl.shouldCreateCellSections();
(0, import_react21.useLayoutEffect)(
() => showJsComp(fullWidthCompDetails, context, eFullWidthAnchor.current ?? eGui.current, fullWidthCompRef),
[fullWidthCompDetails]
);
(0, import_react21.useLayoutEffect)(() => {
if (!ePinnedLeftCells.current) {
return;
}
return showJsComp(
embeddedFullWidthCompDetails?.left,
context,
ePinnedLeftCells.current,
fullWidthEmbeddedLeftCompRef
);
}, [embeddedFullWidthCompDetails?.left]);
(0, import_react21.useLayoutEffect)(() => {
if (!eScrollingCells.current) {
return;
}
return showJsComp(
embeddedFullWidthCompDetails?.center,
context,
eScrollingCells.current,
fullWidthEmbeddedCenterCompRef
);
}, [embeddedFullWidthCompDetails?.center]);
(0, import_react21.useLayoutEffect)(() => {
if (!ePinnedRightCells.current) {
return;
}
return showJsComp(
embeddedFullWidthCompDetails?.right,
context,
ePinnedRightCells.current,
fullWidthEmbeddedRightCompRef
);
}, [embeddedFullWidthCompDetails?.right]);
(0, import_react21.useLayoutEffect)(() => {
if (!showEmbeddedFullWidth) {
return;
}
const updateLaneVisibility = () => {
const next = {
left: !!ePinnedLeftCells.current?.firstElementChild,
center: !!eScrollingCells.current?.firstElementChild,
right: !!ePinnedRightCells.current?.firstElementChild
};
rowCtrl.embeddedSectionHasContent = next;
setEmbeddedSectionHasContent(
(prev) => prev.left === next.left && prev.center === next.center && prev.right === next.right ? prev : next
);
};
updateLaneVisibility();
const observer = new MutationObserver(updateLaneVisibility);
if (ePinnedLeftCells.current) {
observer.observe(ePinnedLeftCells.current, { childList: true });
}
if (eScrollingCells.current) {
observer.observe(eScrollingCells.current, { childList: true });
}
if (ePinnedRightCells.current) {
observer.observe(ePinnedRightCells.current, { childList: true });
}
return () => observer.disconnect();
}, [showEmbeddedFullWidth, embeddedFullWidthCompDetails]);
const rowStyles = (0, import_react21.useMemo)(() => {
const res = { top, transform };
Object.assign(res, userStyles);
return res;
}, [top, transform, userStyles]);
const showFullWidthFramework = isFullWidth && fullWidthCompDetails?.componentFromFramework;
const showCells = !isFullWidth && cellCtrlsMerged != null;
const { leftCellCtrls, centerCellCtrls, rightCellCtrls } = (0, import_react21.useMemo)(() => {
const left = [];
const center = [];
const right = [];
for (const cellCtrl of cellCtrlsMerged ?? []) {
const pinned = cellCtrl.column.getPinned();
if (pinned === "left") {
left.push(cellCtrl);
} else if (pinned === "right") {
right.push(cellCtrl);
} else {
center.push(cellCtrl);
}
}
return {
leftCellCtrls: left,
centerCellCtrls: center,
rightCellCtrls: right
};
}, [cellCtrlsMerged]);
const { leftWidth, centerWidth, rightWidth, renderLeft, renderRight } = rowCtrl.getMappedPinnedCellGroupWidths();
const reactFullWidthCellRendererStateless = (0, import_react21.useMemo)(() => {
const res = fullWidthCompDetails?.componentFromFramework && isComponentStateless(fullWidthCompDetails.componentClass);
return !!res;
}, [fullWidthCompDetails]);
const canRefreshFullWidthRef = (0, import_react21.useRef)(false);
(0, import_react21.useEffect)(() => {
canRefreshFullWidthRef.current = reactFullWidthCellRendererStateless && !!fullWidthCompDetails && !!gos.get("reactiveCustomComponents");
}, [reactFullWidthCellRendererStateless, fullWidthCompDetails]);
const showCellsJsx = (cellCtrls) => cellCtrls.map((cellCtrl) => /* @__PURE__ */ import_react21.default.createElement(
cellComp_default,
{
cellCtrl,
editingCell: editSvc?.isEditing(cellCtrl, { withOpenEditor: true }) ?? false,
printLayout: rowCtrl.printLayout,
key: cellCtrl.instanceId
}
));
const showFullWidthFrameworkJsx = () => {
const FullWidthComp = fullWidthCompDetails.componentClass;
return reactFullWidthCellRendererStateless ? /* @__PURE__ */ import_react21.default.createElement(FullWidthComp, { ...fullWidthCompDetails.params }) : /* @__PURE__ */ import_react21.default.createElement(FullWidthComp, { ...fullWidthCompDetails.params, ref: fullWidthCompRef });
};
const showEmbeddedFrameworkSection = (section) => {
const details = embeddedFullWidthCompDetails?.[section];
if (!details?.componentFromFramework) {
return null;
}
const FullWidthComp = details.componentClass;
const compRef = section === "left" ? fullWidthEmbeddedLeftCompRef : section === "right" ? fullWidthEmbeddedRightCompRef : fullWidthEmbeddedCenterCompRef;
const stateless = isComponentStateless(details.componentClass);
return stateless ? /* @__PURE__ */ import_react21.default.createElement(FullWidthComp, { ...details.params }) : /* @__PURE__ */ import_react21.default.createElement(FullWidthComp, { ...details.params, ref: compRef });
};
const renderCellSection = (sectionClass, ref, width, children, pinned = false, shouldRender = true) => {
if (!shouldRender) {
return null;
}
if (pinned) {
return /* @__PURE__ */ import_react21.default.createElement("div", { className: sectionClass, role: "presentation", style: { width: `${width}px` } }, /* @__PURE__ */ import_react21.default.createElement("div", { className: "ag-grid-container-wrapper", role: "presentation", ref }, children));
}
return /* @__PURE__ */ import_react21.default.createElement("div", { className: sectionClass, role: "presentation", ref, style: { width: `${width}px` } }, children);
};
return /* @__PURE__ */ import_react21.default.createElement(
"div",
{
ref: setRef2,
role: "row",
style: rowStyles,
"row-index": rowIndex,
"row-id": rowId,
"row-business-key": rowBusinessKey
},
showCells || showEmbeddedFullWidth ? /* @__PURE__ */ import_react21.default.createElement(import_react21.default.Fragment, null, renderCellSection(
"ag-grid-pinned-left-cells",
ePinnedLeftCells,
leftWidth,
showCells ? showCellsJsx(leftCellCtrls) : showEmbeddedFrameworkSection("left"),
true,
renderLeft
), renderCellSection(
"ag-grid-scrolling-cells",
eScrollingCells,
centerWidth,
showCells ? showCellsJsx(centerCellCtrls) : showEmbeddedFrameworkSection("center")
), renderCellSection(
"ag-grid-pinned-right-cells",
ePinnedRightCells,
rightWidth,
showCells ? showCellsJsx(rightCellCtrls) : showEmbeddedFrameworkSection("right"),
true,
renderRight
)) : showFullWidthFramework ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "ag-full-width-anchor", role: "presentation", ref: eFullWidthAnchor }, showFullWidthFrameworkJsx()) : isFullWidth ? /* @__PURE__ */ import_react21.default.createElement("div", { className: "ag-full-width-anchor", role: "presentation", ref: eFullWidthAnchor }) : null
);
};
var rowComp_default = (0, import_react21.memo)(RowComp);
// packages/ag-grid-react/src/reactUi/rows/rowContainerComp.tsx
var RowContainerComp = ({
name,
viewportElement,
extraClassName
}) => {
const { context, gos } = (0, import_react22.useContext)(BeansContext);
const containerOptions = (0, import_react22.useMemo)(() => (0, import_ag_grid_community16._getRowContainerOptions)(name), [name]);
const eContainer = (0, import_react22.useRef)(null);
const eSpanContainer = (0, import_react22.useRef)(null);
const rowCtrlsRef = (0, import_react22.useRef)([]);
const prevRowCtrlsRef = (0, import_react22.useRef)([]);
const [hidden, setHidden] = (0, import_react22.useState)(true);
const [rowCtrlsOrdered, setRowCtrlsOrdered] = (0, import_react22.useState)(() => []);
const isSpanning = !!gos.get("enableCellSpan") && !!containerOptions.getSpannedRowCtrls;
const spannedRowCtrlsRef = (0, import_react22.useRef)([]);
const prevSpannedRowCtrlsRef = (0, import_react22.useRef)([]);
const [spannedRowCtrlsOrdered, setSpannedRowCtrlsOrdered] = (0, import_react22.useState)(() => []);
const domOrderRef = (0, import_react22.useRef)(false);
const rowContainerCtrlRef = (0, import_react22.useRef)();
const containerClasses = (0, import_react22.useMemo)(
() => classesList((0, import_ag_grid_community16._getRowContainerClass)(name), hidden ? "ag-hidden" : null, extraClassName),
[extraClassName, name, hidden]
);
const spanClasses = (0, import_react22.useMemo)(() => classesList("ag-spanning-container", (0, import_ag_grid_community16._getRowSpanContainerClass)(name)), [name]);
reactComment_default(" AG Row Container " + name + " ", eContainer);
const setRef2 = (0, import_react22.useCallback)(() => {
if (eContainer.current == null && eSpanContainer.current == null) {
rowContainerCtrlRef.current = context.destroyBean(rowContainerCtrlRef.current);
}
if (context.isDestroyed()) {
return;
}
const eContainerForCtrl = eContainer.current;
const eViewportForCtrl = viewportElement ?? eContainer.current;
if (!eContainerForCtrl || !eViewportForCtrl || isSpanning && !eSpanContainer.current) {
return;
}
if (rowContainerCtrlRef.current) {
return;
}
const eSpanContainerForCtrl = eSpanContainer.current ?? void 0;
const updateRowCtrlsOrdered = (useFlushSync) => {
const next = getNextValueIfDifferent(prevRowCtrlsRef.current, rowCtrlsRef.current, domOrderRef.current);
if (next !== prevRowCtrlsRef.current) {
prevRowCtrlsRef.current = next;
agFlushSync(useFlushSync, () => setRowCtrlsOrdered(next));
}
};
const updateSpannedRowCtrlsOrdered = (useFlushSync) => {
const next = getNextValueIfDifferent(
prevSpannedRowCtrlsRef.current,
spannedRowCtrlsRef.current,
domOrderRef.current
);
if (next !== prevSpannedRowCtrlsRef.current) {
prevSpannedRowCtrlsRef.current = next;
agFlushSync(useFlushSync, () => setSpannedRowCtrlsOrdered(next));
}
};
const compProxy = {
setRowCtrls: ({ rowCtrls, useFlushSync }) => {
const useFlush = !!useFlushSync && rowCtrlsRef.current.length > 0 && rowCtrls.length > 0;
rowCtrlsRef.current = rowCtrls;
updateRowCtrlsOrdered(useFlush);
},
setSpannedRowCtrls: (rowCtrls, useFlushSync) => {
const useFlush = !!useFlushSync && spannedRowCtrlsRef.current.length > 0 && rowCtrls.length > 0;
spannedRowCtrlsRef.current = rowCtrls;
updateSpannedRowCtrlsOrdered(useFlush);
},
setDomOrder: (domOrder) => {
if (domOrderRef.current !== domOrder) {
domOrderRef.current = domOrder;
updateRowCtrlsOrdered(false);
}
},
setContainerWidth: (width) => {
if (eContainerForCtrl) {
eContainerForCtrl.style.width = width;
}
if (eSpanContainerForCtrl) {
eSpanContainerForCtrl.style.width = width;
}
},
setOffsetTop: (offset) => {
eContainerForCtrl.style.transform = `translateY(${offset})`;
if (eSpanContainerForCtrl) {
eSpanContainerForCtrl.style.transform = `translateY(${offset})`;
}
},
setHidden: (hidden2) => setHidden(hidden2)
};
rowContainerCtrlRef.current = context.createBean(new import_ag_grid_community16.RowContainerCtrl(name));
rowContainerCtrlRef.current.setComp(compProxy, eContainerForCtrl, eSpanContainerForCtrl, eViewportForCtrl);
}, [context, isSpanning, name, viewportElement]);
(0, import_react22.useEffect)(
() => () => {
rowContainerCtrlRef.current = context.destroyBean(rowContainerCtrlRef.current);
},
[context, name]
);
const setContainerRef = (0, import_react22.useCallback)(
(e) => {
eContainer.current = e;
setRef2();
},
[setRef2]
);
const setSpanContainerRef = (0, import_react22.useCallback)(
(e) => {
eSpanContainer.current = e;
setRef2();
},
[setRef2]
);
const buildSpanContainer = () => /* @__PURE__ */ import_react22.default.createElement("div", { className: spanClasses, ref: setSpanContainerRef, role: "presentation" }, spannedRowCtrlsOrdered.map((rowCtrl) => /* @__PURE__ */ import_react22.default.createElement(rowComp_default, { rowCtrl, containerType: containerOptions.type, key: rowCtrl.instanceId })));
const rows = rowCtrlsOrdered.map((rowCtrl) => /* @__PURE__ */ import_react22.default.createElement(rowComp_default, { rowCtrl, containerType: containerOptions.type, key: rowCtrl.instanceId }));
return /* @__PURE__ */ import_react22.default.createElement("div", { className: containerClasses, ref: setContainerRef, role: "presentation" }, rows, isSpanning ? buildSpanContainer() : null);
};
var rowContainerComp_default = (0, import_react22.memo)(RowContainerComp);
// packages/ag-grid-react/src/reactUi/gridBodyComp.tsx
var GridBodyComp = () => {
const { context, gos, overlays, rangeSvc } = (0, import_react23.useContext)(BeansContext);
const [rowAnimationClass, setRowAnimationClass] = (0, import_react23.useState)("");
const [pinnedSections, setPinnedSections] = (0, import_react23.useState)({
top: { height: 0, invisible: true },
bottom: { height: 0, invisible: true }
});
const [stickyBottomHeight, setStickyBottomHeight] = (0, import_react23.useState)("0px");
const [stickyBottomWidth, setStickyBottomWidth] = (0, import_react23.useState)("100%");
const [cellSelectableCss, setCellSelectableCss] = (0, import_react23.useState)(null);
const [preventRowAnimationClass, setPreventRowAnimationClass] = (0, import_react23.useState)(null);
const [layoutClass, setLayoutClass] = (0, import_react23.useState)("ag-layout-normal");
const cssManager = (0, import_react23.useRef)();
if (!cssManager.current) {
cssManager.current = new CssClassManager(() => eRoot.current);
}
const eRoot = (0, import_react23.useRef)(null);
const [rootElement, setRootElement] = (0, import_react23.useState)(null);
const eTop = (0, import_react23.useRef)(null);
const [topElement, setTopElement] = (0, import_react23.useState)(null);
const eGridViewport = (0, import_react23.useRef)(null);
const [gridViewportElement, setGridViewportElement] = (0, import_react23.useState)(null);
const eGridScrollableArea = (0, import_react23.useRef)(null);
const eBody = (0, import_react23.useRef)(null);
const eBottom = (0, import_react23.useRef)(null);
const eTopExtraRows = (0, import_react23.useRef)(null);
reactComment_default(" AG Grid Body ", eRoot);
reactComment_default(" AG Pinned Top ", eTop);
reactComment_default(" AG Middle ", eGridViewport);
reactComment_default(" AG Pinned Bottom ", eBottom);
const setRootRef = (0, import_react23.useCallback)((eRef) => {
eRoot.current = eRef;
setRootElement(eRef);
}, []);
const setPinnedSection = (0, import_react23.useCallback)((section, state) => {
setPinnedSections((prev) => {
const current = prev[section];
if (current.height === state.height && current.invisible === state.invisible) {
return prev;
}
return { ...prev, [section]: state };
});
}, []);
(0, import_react23.useEffect)(() => {
if (!rootElement || context.isDestroyed() || !eGridViewport.current || !eBody.current || !eTop.current || !eBottom.current || !eTopExtraRows.current) {
return;
}
const beansToDestroy = [];
const destroyFuncs = [];
const attachToDom = (eParent, eChild) => {
eParent.appendChild(eChild);
destroyFuncs.push(() => eChild.remove());
};
const newComp = (compClass) => {
const comp = context.createBean(new compClass());
beansToDestroy.push(comp);
return comp;
};
const addComp = (eParent, compClass, comment) => {
attachToDom(eParent, document.createComment(comment));
attachToDom(eParent, newComp(compClass).getGui());
};
addComp(rootElement, import_ag_grid_community17.FakeHScrollComp, " AG Fake Horizontal Scroll ");
addComp(rootElement, import_ag_grid_community17.FakeVScrollComp, " AG Fake Vertical Scroll ");
const overlayComp = overlays?.getOverlayWrapperCompClass();
if (overlayComp) {
addComp(rootElement, overlayComp, " AG Overlay Wrapper ");
}
const compProxy = {
setColumnCount: (count) => {
if (eGridViewport.current) {
_setAriaColCount(eGridViewport.current, count);
}
},
setRowCount: (count) => {
if (eGridViewport.current) {
_setAriaRowCount(eGridViewport.current, count);
}
},
setPinnedSection,
setColumnMovingCss: (cssClass, flag) => cssManager.current.toggleCss(cssClass, flag),
updateLayoutClasses: setLayoutClass,
setCellSelectableCss: (cssClass, flag) => setCellSelectableCss(flag ? cssClass : null),
setRowAnimationCssOnScrollableArea: (animate) => setRowAnimationClass(animate ? "ag-row-animation" : "ag-row-no-animation"),
setPreventRowAnimationCssOnContainers: (prevent) => setPreventRowAnimationClass(prevent ? "ag-prevent-animation" : null),
setGridScrollableAreaWidth: (width) => {
if (eGridScrollableArea.current) {
eGridScrollableArea.current.style.width = width;
}
},
setStickyBottomHeight,
setStickyBottomWidth,
setGridRole: (role) => {
if (eGridViewport.current) {
_setAriaRole(eGridViewport.current, role);
}
}
};
const ctrl = context.createBean(new import_ag_grid_community17.GridBodyCtrl());
beansToDestroy.push(ctrl);
ctrl.setComp(
compProxy,
rootElement,
eGridViewport.current,
eBody.current,
eTop.current,
eTopExtraRows.current,
eBottom.current
);
if (eGridViewport.current && (rangeSvc && (0, import_ag_grid_community17._isCellSelectionEnabled)(gos) || (0, import_ag_grid_community17._isMultiRowSelection)(gos))) {
_setAriaMultiSelectable(eGridViewport.current, true);
}
return () => {
context.destroyBeans(beansToDestroy);
for (const f of destroyFuncs) {
f();
}
};
}, [context, gos, overlays, rangeSvc, rootElement]);
const rootClasses = (0, import_react23.useMemo)(() => classesList("ag-root", "ag-unselectable", layoutClass), [layoutClass]);
const gridViewportClasses = (0, import_react23.useMemo)(() => classesList("ag-grid-viewport", layoutClass), [layoutClass]);
const bodyClasses = (0, import_react23.useMemo)(
() => classesList("ag-grid-scrolling-rows", layoutClass, cellSelectableCss),
[layoutClass, cellSelectableCss]
);
const topSection = pinnedSections.top;
const bottomSection = pinnedSections.bottom;
const topClasses = (0, import_react23.useMemo)(
() => classesList("ag-grid-pinned-top-rows", cellSelectableCss),
[cellSelectableCss, topSection.invisible]
);
const stickyBottomHeightNumber = Number.parseFloat(stickyBottomHeight) || 0;
const bottomSectionHidden = bottomSection.height <= 0 && stickyBottomHeightNumber <= 0;
const scrollableClasses = (0, import_react23.useMemo)(
() => classesList(
"ag-grid-scrollable-area",
topSection.invisible ? null : "ag-has-top-pinned-rows",
bottomSection.invisible ? null : "ag-has-bottom-pinned-rows"
),
[bottomSection.invisible, topSection.invisible]
);
const bottomClasses = (0, import_react23.useMemo)(
() => classesList("ag-grid-pinned-bottom-rows", bottomSectionHidden ? "ag-hidden" : null, cellSelectableCss),
[bottomSection.invisible, bottomSectionHidden, cellSelectableCss]
);
const rowAnimationContainerClass = (0, import_react23.useMemo)(
() => classesList(rowAnimationClass, preventRowAnimationClass),
[preventRowAnimationClass, rowAnimationClass]
);
const topStyle = (0, import_react23.useMemo)(() => {
const topRowsHeight = `${topSection.height}px`;
const topSectionHeight = `calc(var(--ag-header-rows-height, 0px) + ${topRowsHeight})`;
return {
"--ag-top-rows-height": topRowsHeight,
minHeight: topSectionHeight,
height: topSectionHeight
};
}, [topSection.height]);
const bottomStyle = (0, import_react23.useMemo)(
() => ({
"--ag-bottom-rows-height": `${bottomSection.height}px`,
height: `calc(${bottomSection.height}px + ${stickyBottomHeight})`,
minHeight: `calc(${bottomSection.height}px + ${stickyBottomHeight})`,
width: stickyBottomWidth
}),
[bottomSection.height, stickyBottomHeight, stickyBottomWidth]
);
const setTopRef = (0, import_react23.useCallback)((el) => {
eTop.current = el;
setTopElement(el);
}, []);
const setGridViewportRef = (0, import_react23.useCallback)((el) => {
eGridViewport.current = el;
setGridViewportElement(el);
}, []);
return /* @__PURE__ */ import_react23.default.createElement("div", { ref: setRootRef, className: rootClasses, role: "presentation" }, /* @__PURE__ */ import_react23.default.createElement("div", { ref: setGridViewportRef, className: gridViewportClasses, role: "presentation" }, /* @__PURE__ */ import_react23.default.createElement("div", { ref: eGridScrollableArea, className: scrollableClasses, role: "rowgroup" }, /* @__PURE__ */ import_react23.default.createElement("div", { ref: setTopRef, className: topClasses, role: "presentation", style: topStyle }, topElement && gridViewportElement && /* @__PURE__ */ import_react23.default.createElement(gridHeaderComp_default, { eTopSection: topElement, eGridViewport: gridViewportElement }), /* @__PURE__ */ import_react23.default.createElement("div", { ref: eTopExtraRows, className: "ag-extra-rows-container", role: "presentation" }), /* @__PURE__ */ import_react23.default.createElement(
rowContainerComp_default,
{
name: "pinnedTop",
viewportElement: gridViewportElement,
extraClassName: rowAnimationContainerClass
}
), /* @__PURE__ */ import_react23.default.createElement(rowContainerComp_default, { name: "stickyTop", viewportElement: gridViewportElement })), /* @__PURE__ */ import_react23.default.createElement("div", { className: bodyClasses, ref: eBody, role: "presentation" }, /* @__PURE__ */ import_react23.default.createElement(
rowContainerComp_default,
{
name: "scrolling",
viewportElement: gridViewportElement,
extraClassName: rowAnimationContainerClass
}
)), /* @__PURE__ */ import_react23.default.createElement("div", { className: bottomClasses, ref: eBottom, role: "presentation", style: bottomStyle }, /* @__PURE__ */ import_react23.default.createElement(rowContainerComp_default, { name: "stickyBottom", viewportElement: gridViewportElement }), /* @__PURE__ */ import_react23.default.createElement(
rowContainerComp_default,
{
name: "pinnedBottom",
viewportElement: gridViewportElement,
extraClassName: rowAnimationContainerClass
}
)))));
};
var gridBodyComp_default = (0, import_react23.memo)(GridBodyComp);
// packages/ag-grid-react/src/reactUi/tabGuardComp.tsx
var import_react24 = __toESM(require("react"));
var import_ag_grid_community18 = require("ag-grid-community");
var TabGuardCompRef = (props, forwardRef4) => {
const { children, eFocusableElement, onTabKeyDown, gridCtrl, forceFocusOutWhenTabGuardsAreEmpty, isEmpty } = props;
const { context } = (0, import_react24.useContext)(BeansContext);
const topTabGuardRef = (0, import_react24.useRef)(null);
const bottomTabGuardRef = (0, import_react24.useRef)(null);
const tabGuardCtrlRef = (0, import_react24.useRef)();
const setTabIndex = (value) => {
const processedValue = value == null ? void 0 : parseInt(value, 10).toString();
for (const tabGuard of [topTabGuardRef, bottomTabGuardRef]) {
if (processedValue === void 0) {
tabGuard.current?.removeAttribute("tabindex");
} else {
tabGuard.current?.setAttribute("tabindex", processedValue);
}
}
};
(0, import_react24.useImperativeHandle)(forwardRef4, () => ({
forceFocusOutOfContainer(up) {
tabGuardCtrlRef.current?.forceFocusOutOfContainer(up);
}
}));
const setupCtrl = (0, import_react24.useCallback)(() => {
const topTabGuard = topTabGuardRef.current;
const bottomTabGuard = bottomTabGuardRef.current;
if (!topTabGuard && !bottomTabGuard || context.isDestroyed()) {
tabGuardCtrlRef.current = context.destroyBean(tabGuardCtrlRef.current);
return;
}
if (topTabGuard && bottomTabGuard) {
const compProxy = {
setTabIndex
};
tabGuardCtrlRef.current = context.createBean(
new import_ag_grid_community18.TabGuardCtrl({
comp: compProxy,
eTopGuard: topTabGuard,
eBottomGuard: bottomTabGuard,
eFocusableElement,
onTabKeyDown,
forceFocusOutWhenTabGuardsAreEmpty,
focusInnerElement: (fromBottom) => gridCtrl.focusInnerElement(fromBottom),
isEmpty
})
);
}
}, []);
const setTopRef = (0, import_react24.useCallback)(
(e) => {
topTabGuardRef.current = e;
setupCtrl();
},
[setupCtrl]
);
const setBottomRef = (0, import_react24.useCallback)(
(e) => {
bottomTabGuardRef.current = e;
setupCtrl();
},
[setupCtrl]
);
const createTabGuard = (side) => {
const className = side === "top" ? TabGuardClassNames.TAB_GUARD_TOP : TabGuardClassNames.TAB_GUARD_BOTTOM;
return /* @__PURE__ */ import_react24.default.createElement(
"div",
{
className: `${TabGuardClassNames.TAB_GUARD} ${className}`,
role: "presentation",
ref: side === "top" ? setTopRef : setBottomRef
}
);
};
return /* @__PURE__ */ import_react24.default.createElement(import_react24.default.Fragment, null, createTabGuard("top"), children, createTabGuard("bottom"));
};
var TabGuardComp = (0, import_react24.forwardRef)(TabGuardCompRef);
var tabGuardComp_default = (0, import_react24.memo)(TabGuardComp);
// packages/ag-grid-react/src/reactUi/gridComp.tsx
var GridComp = ({ context }) => {
const [layoutClass, setLayoutClass] = (0, import_react25.useState)("");
const [cursor, setCursor] = (0, import_react25.useState)(null);
const [userSelect, setUserSelect] = (0, import_react25.useState)(null);
const [initialised, setInitialised] = (0, import_react25.useState)(false);
const [tabGuardReady, setTabGuardReady] = (0, import_react25.useState)();
const gridCtrlRef = (0, import_react25.useRef)();
const eRootWrapperRef = (0, import_react25.useRef)(null);
const ariaDescriptionRef = (0, import_react25.useRef)(null);
const tabGuardRef = (0, import_react25.useRef)();
const [eGridBodyParent, setGridBodyParent] = (0, import_react25.useState)(null);
const focusInnerElementRef = (0, import_react25.useRef)(() => void 0);
const paginationCompRef = (0, import_react25.useRef)();
const focusableContainersRef = (0, import_react25.useRef)([]);
const onTabKeyDown = (0, import_react25.useCallback)(() => void 0, []);
reactComment_default(" AG Grid ", eRootWrapperRef);
const setRef2 = (0, import_react25.useCallback)((eRef) => {
eRootWrapperRef.current = eRef;
gridCtrlRef.current = eRef ? context.createBean(new import_ag_grid_community19.GridCtrl()) : context.destroyBean(gridCtrlRef.current);
if (!eRef || context.isDestroyed()) {
return;
}
const gridCtrl = gridCtrlRef.current;
focusInnerElementRef.current = gridCtrl.focusInnerElement.bind(gridCtrl);
const compProxy = {
destroyGridUi: () => {
},
// do nothing, as framework users destroy grid by removing the comp
forceFocusOutOfContainer: (up) => {
if (!up && paginationCompRef.current?.isDisplayed()) {
paginationCompRef.current.forceFocusOutOfContainer(up);
return;
}
tabGuardRef.current?.forceFocusOutOfContainer(up);
},
updateLayoutClasses: setLayoutClass,
getFocusableContainers: () => {
const beforeGridBody = [];
const afterGridBody = [];
const gridBodyCompEl = eRootWrapperRef.current?.querySelector(".ag-root");
for (const comp of focusableContainersRef.current) {
if (!comp.isDisplayed()) {
continue;
}
const name = comp.getFocusableContainerName();
if (name === "toolbar" || name === "rowGroupToolbar" || name === "pivotToolbar") {
beforeGridBody.push(comp);
continue;
}
afterGridBody.push(comp);
}
const comps = [...beforeGridBody];
if (gridBodyCompEl) {
comps.push({
getGui: () => gridBodyCompEl,
getFocusableContainerName: () => "gridBody"
});
}
comps.push(...afterGridBody);
return comps;
},
setCursor,
setUserSelect
};
gridCtrl.setComp(compProxy, eRef, ariaDescriptionRef.current);
setInitialised(true);
}, []);
(0, import_react25.useEffect)(() => {
const gridCtrl = gridCtrlRef.current;
const eRootWrapper = eRootWrapperRef.current;
if (!tabGuardReady || !gridCtrl || !eGridBodyParent || !eRootWrapper || context.isDestroyed()) {
return;
}
const beansToDestroy = [];
focusableContainersRef.current = [];
paginationCompRef.current = void 0;
const {
watermarkSelector,
paginationSelector,
sideBarSelector,
statusBarSelector,
toolbarSelector,
gridHeaderDropZonesSelector
} = gridCtrl.getOptionalSelectors();
const additionalEls = [];
const addComponentToDom = (component, position = "beforeend") => {
const comp = context.createBean(new component());
const eGui = comp.getGui();
eRootWrapper.insertAdjacentElement(position, eGui);
additionalEls.push(eGui);
beansToDestroy.push(comp);
return comp;
};
if (toolbarSelector) {
const toolbarComp = addComponentToDom(toolbarSelector.component, "afterbegin");
focusableContainersRef.current.push(toolbarComp);
}
if (gridHeaderDropZonesSelector) {
const headerDropZonesComp = context.createBean(
new gridHeaderDropZonesSelector.component()
);
const eGui = headerDropZonesComp.getGui();
const toolbar = eRootWrapper.querySelector(".ag-toolbar");
if (toolbar) {
toolbar.after(eGui);
} else {
eRootWrapper.prepend(eGui);
}
additionalEls.push(eGui);
beansToDestroy.push(headerDropZonesComp);
focusableContainersRef.current.push(...headerDropZonesComp.getFocusableContainers?.() ?? []);
}
if (sideBarSelector) {
const sideBarComp = context.createBean(new sideBarSelector.component());
const eGui = sideBarComp.getGui();
const bottomTabGuard = eGridBodyParent.querySelector(".ag-tab-guard-bottom");
if (bottomTabGuard) {
bottomTabGuard.insertAdjacentElement("beforebegin", eGui);
additionalEls.push(eGui);
}
beansToDestroy.push(sideBarComp);
focusableContainersRef.current.push(sideBarComp);
}
if (statusBarSelector) {
const statusBarComp = addComponentToDom(statusBarSelector.component);
focusableContainersRef.current.push(statusBarComp);
}
if (paginationSelector) {
const paginationComp = addComponentToDom(paginationSelector.component);
paginationCompRef.current = paginationComp;
focusableContainersRef.current.push(paginationComp);
}
if (watermarkSelector) {
addComponentToDom(watermarkSelector.component);
}
return () => {
context.destroyBeans(beansToDestroy);
focusableContainersRef.current = [];
paginationCompRef.current = void 0;
for (const el of additionalEls) {
el.remove();
}
};
}, [tabGuardReady, eGridBodyParent, context]);
const rootWrapperClasses = (0, import_react25.useMemo)(() => classesList("ag-root-wrapper", layoutClass), [layoutClass]);
const rootWrapperBodyClasses = (0, import_react25.useMemo)(
() => classesList("ag-root-wrapper-body", "ag-focus-managed", layoutClass),
[layoutClass]
);
const topStyle = (0, import_react25.useMemo)(
() => ({
userSelect: userSelect != null ? userSelect : "",
WebkitUserSelect: userSelect != null ? userSelect : "",
cursor: cursor != null ? cursor : ""
}),
[userSelect, cursor]
);
const setTabGuardCompRef = (0, import_react25.useCallback)((ref) => {
tabGuardRef.current = ref;
setTabGuardReady(ref !== null);
}, []);
const isFocusable = (0, import_react25.useCallback)(() => !gridCtrlRef.current?.isFocusable(), []);
return /* @__PURE__ */ import_react25.default.createElement("div", { ref: setRef2, className: rootWrapperClasses, style: topStyle, role: "presentation" }, /* @__PURE__ */ import_react25.default.createElement("div", { className: "ag-aria-description-container", ref: ariaDescriptionRef }), /* @__PURE__ */ import_react25.default.createElement("div", { className: rootWrapperBodyClasses, ref: setGridBodyParent, role: "presentation" }, initialised && eGridBodyParent && !context.isDestroyed() && /* @__PURE__ */ import_react25.default.createElement(BeansContext.Provider, { value: context.getBeans() }, /* @__PURE__ */ import_react25.default.createElement(
tabGuardComp_default,
{
ref: setTabGuardCompRef,
eFocusableElement: eGridBodyParent,
onTabKeyDown,
gridCtrl: gridCtrlRef.current,
forceFocusOutWhenTabGuardsAreEmpty: true,
isEmpty: isFocusable
},
// we wait for initialised before rending the children, so GridComp has created and registered with it's
// GridCtrl before we create the child GridBodyComp. Otherwise the GridBodyComp would initialise first,
// before we have set the the Layout CSS classes, causing the GridBodyComp to render rows to a grid that
// doesn't have it's height specified, which would result if all the rows getting rendered (and if many rows,
// hangs the UI)
/* @__PURE__ */ import_react25.default.createElement(gridBodyComp_default, null)
))));
};
var gridComp_default = (0, import_react25.memo)(GridComp);
// packages/ag-grid-react/src/reactUi/renderStatusService.tsx
var import_ag_grid_community20 = require("ag-grid-community");
var RenderStatusService = class extends import_ag_grid_community20.BeanStub {
postConstruct() {
if (this.beans.colAutosize) {
const queueResizeOperationsForTick = this.queueResizeOperationsForTick.bind(this);
this.addManagedEventListeners({
rowExpansionStateChanged: queueResizeOperationsForTick,
expandOrCollapseAll: queueResizeOperationsForTick,
// Enable devs to resize after they updated via the API
cellValueChanged: queueResizeOperationsForTick,
rowNodeDataChanged: queueResizeOperationsForTick,
rowDataUpdated: queueResizeOperationsForTick
});
}
}
queueResizeOperationsForTick() {
const colAutosize = this.beans.colAutosize;
colAutosize.shouldQueueResizeOperations = true;
setTimeout(() => {
colAutosize.processResizeOperations();
}, 0);
}
areHeaderCellsRendered() {
return this.beans.ctrlsSvc.getHeaderRowContainerCtrl()?.getAllCtrls().every((ctrl) => ctrl.areCellsRendered()) ?? true;
}
areCellsRendered() {
return this.beans.rowRenderer.getAllRowCtrls().every((row) => row.isRowRendered() && row.getAllCellCtrls().every((cellCtrl) => !!cellCtrl.eGui));
}
};
// packages/ag-grid-react/src/reactUi/agGridReactUi.tsx
var deprecatedProps = {
setGridApi: void 0,
maxComponentCreationTimeMs: void 0,
children: void 0
};
var reactPropsNotGridOptions = {
gridOptions: void 0,
modules: void 0,
containerStyle: void 0,
className: void 0,
passGridApi: void 0,
hasAncestorStyledRoot: void 0,
componentWrappingElement: void 0,
...deprecatedProps
};
var excludeReactCompProps = new Set(Object.keys(reactPropsNotGridOptions));
var deprecatedReactCompProps = new Set(Object.keys(deprecatedProps));
var AgGridReactUi = (props) => {
const modulesFromContext = (0, import_react26.useContext)(ModulesContext);
const licenseKeyFromContext = (0, import_react26.useContext)(LicenseContext);
const usesAgGridProvider = modulesFromContext !== null;
const apiRef = (0, import_react26.useRef)();
const innermostRef = (0, import_react26.useRef)(null);
const portalManager = (0, import_react26.useRef)(null);
const destroyFuncs = (0, import_react26.useRef)([]);
const whenReadyFuncs = (0, import_react26.useRef)([]);
const prevProps = (0, import_react26.useRef)(props);
const frameworkOverridesRef = (0, import_react26.useRef)();
const gridIdRef = (0, import_react26.useRef)();
const ready = (0, import_react26.useRef)(false);
const [context, setContext] = (0, import_react26.useState)(void 0);
const [, setPortalRefresher] = (0, import_react26.useState)(0);
const setOutermostRef = (0, import_react26.useCallback)((outermost) => {
if (!outermost) {
ready.current = false;
for (const f of destroyFuncs.current) {
f();
}
destroyFuncs.current.length = 0;
return;
}
const modules = [...props.modules ?? [], ...modulesFromContext ?? []];
if (licenseKeyFromContext) {
(0, import_ag_grid_community21._findEnterpriseCoreModule)(modules)?.setLicenseKey(licenseKeyFromContext);
}
if (!portalManager.current) {
portalManager.current = new PortalManager(
() => setPortalRefresher((prev) => prev + 1),
props.componentWrappingElement,
props.maxComponentCreationTimeMs
);
destroyFuncs.current.push(() => {
portalManager.current?.destroy();
portalManager.current = null;
});
}
const mergedGridOps = (0, import_ag_grid_community21._combineAttributesAndGridOptions)(
props.gridOptions,
props,
Object.keys(props).filter((key) => !excludeReactCompProps.has(key))
);
const processQueuedUpdates = () => {
if (ready.current) {
const getFn = () => frameworkOverridesRef.current?.shouldQueueUpdates() ? void 0 : whenReadyFuncs.current.shift();
let fn = getFn();
while (fn) {
fn();
fn = getFn();
}
}
};
const frameworkOverrides = new ReactFrameworkOverrides(processQueuedUpdates, usesAgGridProvider);
frameworkOverridesRef.current = frameworkOverrides;
const renderStatus = new RenderStatusService();
const gridParams = {
providedBeanInstances: {
frameworkCompWrapper: new ReactFrameworkComponentWrapper(portalManager.current, mergedGridOps),
renderStatus
},
modules,
frameworkOverrides,
hasAncestorStyledRoot: props.hasAncestorStyledRoot
};
const createUiCallback = (ctx) => {
setContext(ctx);
ctx.createBean(renderStatus);
destroyFuncs.current.push(() => {
ctx.destroy();
});
ctx.getBean("ctrlsSvc").whenReady(
{
addDestroyFunc: (func) => {
destroyFuncs.current.push(func);
}
},
() => {
if (ctx.isDestroyed()) {
return;
}
const api = apiRef.current;
if (api) {
props.passGridApi?.(api);
}
}
);
};
const acceptChangesCallback = (context2) => {
context2.getBean("ctrlsSvc").whenReady(
{
addDestroyFunc: (func) => {
destroyFuncs.current.push(func);
}
},
() => {
for (const f of whenReadyFuncs.current) {
f();
}
whenReadyFuncs.current.length = 0;
ready.current = true;
}
);
};
const gridCoreCreator = new import_ag_grid_community21.GridCoreCreator();
mergedGridOps.gridId ?? (mergedGridOps.gridId = gridIdRef.current);
apiRef.current = gridCoreCreator.create(
outermost,
innermostRef.current,
mergedGridOps,
createUiCallback,
acceptChangesCallback,
gridParams
);
destroyFuncs.current.push(() => {
apiRef.current = void 0;
});
if (apiRef.current) {
gridIdRef.current = apiRef.current.getGridId();
}
}, []);
const style = (0, import_react26.useMemo)(() => {
return {
width: "100%",
height: "100%",
...props.containerStyle || {}
};
}, [props.containerStyle]);
const processWhenReady = (0, import_react26.useCallback)((func) => {
if (ready.current && !frameworkOverridesRef.current?.shouldQueueUpdates()) {
func();
} else {
whenReadyFuncs.current.push(func);
}
}, []);
(0, import_react26.useEffect)(() => {
const changes = extractGridPropertyChanges(gridIdRef.current, prevProps.current, props);
prevProps.current = props;
processWhenReady(() => {
if (apiRef.current) {
(0, import_ag_grid_community21._processOnChange)(changes, apiRef.current);
}
});
}, [props]);
const renderMode = !import_react26.default.useSyncExternalStore || (0, import_ag_grid_community21._getGridOption)(props, "renderingMode") === "legacy" ? "legacy" : "default";
return /* @__PURE__ */ import_react26.default.createElement("div", { className: props.className, style, ref: setOutermostRef }, /* @__PURE__ */ import_react26.default.createElement("div", null, /* @__PURE__ */ import_react26.default.createElement("div", null, /* @__PURE__ */ import_react26.default.createElement("div", { ref: innermostRef }, /* @__PURE__ */ import_react26.default.createElement(RenderModeContext.Provider, { value: renderMode }, context && !context.isDestroyed() ? /* @__PURE__ */ import_react26.default.createElement(gridComp_default, { key: context.instanceId, context }) : null, portalManager.current?.getPortals() ?? null)))));
};
function extractGridPropertyChanges(gridId, prevProps, nextProps) {
const changes = {};
for (const propKey of Object.keys(nextProps)) {
if (excludeReactCompProps.has(propKey)) {
if (deprecatedReactCompProps.has(propKey)) {
if (gridId) {
(0, import_ag_grid_community21._warnForGrid)(gridId, 274, { prop: propKey });
} else {
(0, import_ag_grid_community21._warnWithoutAttribution)(274, { prop: propKey });
}
}
continue;
}
const propValue = nextProps[propKey];
if (prevProps[propKey] !== propValue) {
changes[propKey] = propValue;
}
}
return changes;
}
var ReactFrameworkComponentWrapper = class extends import_ag_grid_community21.BaseComponentWrapper {
constructor(parent, gridOptions) {
super();
this.parent = parent;
this.gridOptions = gridOptions;
}
createWrapper(UserReactComponent, componentType) {
const gridOptions = this.gridOptions;
const reactiveCustomComponents = (0, import_ag_grid_community21._getGridOption)(gridOptions, "reactiveCustomComponents");
if (reactiveCustomComponents) {
const getComponentClass = (propertyName) => {
switch (propertyName) {
case "filter":
return (0, import_ag_grid_community21._getGridOption)(gridOptions, "enableFilterHandlers") ? FilterDisplayComponentWrapper : FilterComponentWrapper;
case "floatingFilterComponent":
return (0, import_ag_grid_community21._getGridOption)(gridOptions, "enableFilterHandlers") ? FloatingFilterDisplayComponentWrapper : FloatingFilterComponentWrapper;
case "dateComponent":
return DateComponentWrapper;
case "dragAndDropImageComponent":
return DragAndDropImageComponentWrapper;
case "loadingOverlayComponent":
case "noRowsOverlayComponent":
case "activeOverlay":
return CustomOverlayComponentWrapper;
case "statusPanel":
return StatusPanelComponentWrapper;
case "toolPanel":
return ToolPanelComponentWrapper;
case "menuItem":
return MenuItemComponentWrapper;
case "cellRenderer":
return CellRendererComponentWrapper;
case "innerHeaderComponent":
return InnerHeaderComponentWrapper;
}
};
const ComponentClass = getComponentClass(componentType.name);
if (ComponentClass) {
return new ComponentClass(UserReactComponent, this.parent, componentType);
}
} else {
switch (componentType.name) {
case "filter":
case "floatingFilterComponent":
case "dateComponent":
case "dragAndDropImageComponent":
case "loadingOverlayComponent":
case "noRowsOverlayComponent":
case "activeOverlay":
case "statusPanel":
case "toolPanel":
case "menuItem":
case "cellRenderer":
warnReactiveCustomComponents(this.gridId);
break;
}
}
const suppressFallbackMethods = !componentType.cellRenderer && componentType.name !== "toolPanel";
return new ReactComponent(UserReactComponent, this.parent, componentType, suppressFallbackMethods);
}
};
var DetailCellRenderer = (0, import_react26.forwardRef)((props, ref) => {
const beans = (0, import_react26.useContext)(BeansContext);
const { registry, context, gos, rowModel } = beans;
const [cssClasses, setCssClasses] = (0, import_react26.useState)(() => new CssClasses());
const [gridCssClasses, setGridCssClasses] = (0, import_react26.useState)(() => new CssClasses());
const [detailGridOptions, setDetailGridOptions] = (0, import_react26.useState)();
const [detailRowData, setDetailRowData] = (0, import_react26.useState)();
const ctrlRef = (0, import_react26.useRef)();
const eGuiRef = (0, import_react26.useRef)(null);
const resizeObserverDestroyFunc = (0, import_react26.useRef)();
const parentModules = (0, import_react26.useMemo)(
() => (0, import_ag_grid_community21._getGridRegisteredModules)(props.api.getGridId(), detailGridOptions?.rowModelType ?? "clientSide"),
[props]
);
const topClassName = (0, import_react26.useMemo)(() => cssClasses.toString() + " ag-details-row", [cssClasses]);
const gridClassName = (0, import_react26.useMemo)(() => gridCssClasses.toString() + " ag-details-grid", [gridCssClasses]);
if (ref) {
(0, import_react26.useImperativeHandle)(ref, () => ({
refresh() {
return ctrlRef.current?.refresh() ?? false;
}
}));
}
if (props.template) {
beans.log.warn(230);
}
const setRef2 = (0, import_react26.useCallback)((eRef) => {
eGuiRef.current = eRef;
if (!eRef || context.isDestroyed()) {
ctrlRef.current = context.destroyBean(ctrlRef.current);
resizeObserverDestroyFunc.current?.();
return;
}
const compProxy = {
toggleCss: (name, on) => setCssClasses((prev) => prev.setClass(name, on)),
toggleDetailGridCss: (name, on) => setGridCssClasses((prev) => prev.setClass(name, on)),
setDetailGrid: (gridOptions) => setDetailGridOptions(gridOptions),
setRowData: (rowData) => setDetailRowData(rowData),
getGui: () => eGuiRef.current
};
const ctrl = registry.createDynamicBean("detailCellRendererCtrl", true);
if (!ctrl) {
return;
}
context.createBean(ctrl);
ctrl.init(compProxy, props);
ctrlRef.current = ctrl;
if (gos.get("detailRowAutoHeight")) {
const checkRowSizeFunc = () => {
if (eGuiRef.current == null) {
return;
}
const clientHeight = eGuiRef.current.clientHeight;
if (clientHeight != null && clientHeight > 0) {
const updateRowHeightFunc = () => {
props.node.setRowHeight(clientHeight);
if ((0, import_ag_grid_community21._isClientSideRowModel)(gos, rowModel) || (0, import_ag_grid_community21._isServerSideRowModel)(gos, rowModel)) {
rowModel.onRowHeightChanged();
}
};
setTimeout(updateRowHeightFunc, 0);
}
};
resizeObserverDestroyFunc.current = _observeResize(beans, eRef, checkRowSizeFunc);
checkRowSizeFunc();
}
}, []);
const registerGridApi = (0, import_react26.useCallback)((api) => {
ctrlRef.current?.registerDetailWithMaster(api);
}, []);
return /* @__PURE__ */ import_react26.default.createElement("div", { className: topClassName, ref: setRef2 }, detailGridOptions && /* @__PURE__ */ import_react26.default.createElement(
AgGridReactUi,
{
className: gridClassName,
...detailGridOptions,
modules: parentModules,
rowData: detailRowData,
passGridApi: registerGridApi,
hasAncestorStyledRoot: true
}
));
});
var ReactFrameworkOverrides = class extends import_ag_grid_community21.VanillaFrameworkOverrides {
constructor(processQueuedUpdates, usesAgGridProvider) {
super("react");
this.processQueuedUpdates = processQueuedUpdates;
this.usesAgGridProvider = usesAgGridProvider;
this.queueUpdates = false;
this.renderingEngine = "react";
this.frameworkComponents = {
agGroupCellRenderer: groupCellRenderer_default,
agGroupRowRenderer: groupCellRenderer_default,
agDetailCellRenderer: DetailCellRenderer
};
this.wrapIncoming = (callback, source) => {
if (source === "ensureVisible") {
return runWithoutFlushSync(callback);
}
return callback();
};
}
frameworkComponent(name) {
return this.frameworkComponents[name];
}
isFrameworkComponent(comp) {
if (!comp) {
return false;
}
const prototype = comp.prototype;
const isJsComp = prototype && "getGui" in prototype;
return !isJsComp;
}
getLockOnRefresh() {
this.queueUpdates = true;
}
releaseLockOnRefresh() {
this.queueUpdates = false;
this.processQueuedUpdates();
}
shouldQueueUpdates() {
return this.queueUpdates;
}
runWhenReadyAsync() {
return isReact19();
}
};
// packages/ag-grid-react/src/agGridReact.tsx
var AgGridReact = class extends import_react27.Component {
constructor() {
super(...arguments);
this.apiListeners = [];
this.setGridApi = (api) => {
this.api = api;
for (const listener of this.apiListeners) {
listener(api);
}
};
}
registerApiListener(listener) {
this.apiListeners.push(listener);
}
componentWillUnmount() {
this.apiListeners.length = 0;
}
render() {
return /* @__PURE__ */ import_react27.default.createElement(AgGridReactUi, { ...this.props, passGridApi: this.setGridApi });
}
};
// packages/ag-grid-react/src/shared/customComp/interfaces.ts
var import_react28 = require("react");
function useGridCustomComponent(methods) {
const { setMethods } = (0, import_react28.useContext)(CustomContext);
setMethods(methods);
}
function useGridCellEditor(callbacks) {
useGridCustomComponent(callbacks);
}
function useGridDate(callbacks) {
return useGridCustomComponent(callbacks);
}
function useGridFilter(callbacks) {
return useGridCustomComponent(callbacks);
}
function useGridFilterDisplay(callbacks) {
return useGridCustomComponent(callbacks);
}
function useGridFloatingFilter(callbacks) {
useGridCustomComponent(callbacks);
}
function useGridMenuItem(callbacks) {
useGridCustomComponent(callbacks);
}