UNPKG

ag-grid-react

Version:
1,374 lines (1,335 loc) 115 kB
// packages/ag-grid-react/src/agGridReact.tsx import React19, { Component } from "react"; // packages/ag-grid-react/src/reactUi/agGridReactUi.tsx import React18, { forwardRef as forwardRef3, useCallback as useCallback15, useContext as useContext15, useEffect as useEffect9, useImperativeHandle as useImperativeHandle3, useMemo as useMemo12, useRef as useRef15, useState as useState16 } from "react"; import { BaseComponentWrapper, GridCoreCreator, VanillaFrameworkOverrides, _combineAttributesAndGridOptions, _getGlobalGridOption, _getGridRegisteredModules, _isClientSideRowModel, _isServerSideRowModel, _observeResize as _observeResize2, _processOnChange, _warn as _warn2 } from "ag-grid-community"; // packages/ag-grid-react/src/reactUi/cellRenderer/groupCellRenderer.tsx import React3, { forwardRef, useCallback, useContext, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react"; import { _escapeString } from "ag-grid-community"; // packages/ag-grid-react/src/reactUi/beansContext.tsx import React from "react"; var BeansContext = React.createContext({}); // packages/ag-grid-react/src/reactUi/jsComp.tsx var showJsComp = (compDetails, context, eParent, ref) => { const doNothing = !compDetails || compDetails.componentFromFramework || context.isDestroyed(); if (doNothing) { return; } const promise = compDetails.newAgStackInstance(); let comp; let compGui; let destroyed = false; promise.then((c) => { if (destroyed) { context.destroyBean(c); return; } comp = c; compGui = comp.getGui(); eParent.appendChild(compGui); setRef(ref, comp); }); return () => { destroyed = true; if (!comp) { return; } compGui?.parentElement?.removeChild(compGui); context.destroyBean(comp); if (ref) { setRef(ref, void 0); } }; }; var setRef = (ref, value) => { if (!ref) { return; } if (ref instanceof Function) { const refCallback = ref; refCallback(value); } else { const refObj = ref; refObj.current = value; } }; // packages/ag-grid-react/src/reactUi/utils.tsx import React2 from "react"; import ReactDOM from "react-dom"; var classesList = (...list) => { const filtered = list.filter((s) => s != null && s !== ""); return filtered.join(" "); }; var CssClasses = class _CssClasses { constructor(...initialClasses) { this.classesMap = {}; initialClasses.forEach((className) => { this.classesMap[className] = true; }); } setClass(className, on) { const nothingHasChanged = !!this.classesMap[className] == on; if (nothingHasChanged) { return this; } const res = new _CssClasses(); res.classesMap = { ...this.classesMap }; res.classesMap[className] = on; return res; } toString() { const res = Object.keys(this.classesMap).filter((key) => this.classesMap[key]).join(" "); return res; } }; var isComponentStateless = (Component2) => { const hasSymbol = () => typeof Symbol === "function" && Symbol.for; const getMemoType = () => hasSymbol() ? Symbol.for("react.memo") : 60115; return typeof Component2 === "function" && !(Component2.prototype && Component2.prototype.isReactComponent) || typeof Component2 === "object" && Component2.$$typeof === getMemoType(); }; var reactVersion = React2.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) { ReactDOM.flushSync(fn); } else { fn(); } }; function getNextValueIfDifferent(prev, next, maintainOrder) { if (next == null || prev == null) { return next; } if (prev === next || next.length === 0 && prev.length === 0) { return prev; } if (maintainOrder || prev.length === 0 && next.length > 0 || prev.length > 0 && next.length === 0) { return next; } const oldValues = []; const newValues = []; const prevMap = /* @__PURE__ */ new Map(); const nextMap = /* @__PURE__ */ new Map(); for (let i = 0; i < next.length; i++) { const c = next[i]; nextMap.set(c.instanceId, c); } for (let i = 0; i < prev.length; i++) { const c = prev[i]; prevMap.set(c.instanceId, c); if (nextMap.has(c.instanceId)) { oldValues.push(c); } } for (let i = 0; i < next.length; i++) { const c = next[i]; const instanceId = c.instanceId; if (!prevMap.has(instanceId)) { newValues.push(c); } } if (oldValues.length === prev.length && newValues.length === 0) { return prev; } if (oldValues.length === 0 && newValues.length === next.length) { return next; } if (oldValues.length === 0) { return newValues; } if (newValues.length === 0) { return oldValues; } return [...oldValues, ...newValues]; } // packages/ag-grid-react/src/reactUi/cellRenderer/groupCellRenderer.tsx var GroupCellRenderer = forwardRef((props, ref) => { const { registry, context } = useContext(BeansContext); const eGui = useRef(null); const eValueRef = useRef(null); const eCheckboxRef = useRef(null); const eExpandedRef = useRef(null); const eContractedRef = useRef(null); const ctrlRef = useRef(); const [innerCompDetails, setInnerCompDetails] = useState(); const [childCount, setChildCount] = useState(); const [value, setValue] = useState(); const [cssClasses, setCssClasses] = useState(() => new CssClasses()); const [expandedCssClasses, setExpandedCssClasses] = useState(() => new CssClasses("ag-hidden")); const [contractedCssClasses, setContractedCssClasses] = useState(() => new CssClasses("ag-hidden")); const [checkboxCssClasses, setCheckboxCssClasses] = useState(() => new CssClasses("ag-invisible")); useImperativeHandle(ref, () => { return { // force new instance when grid tries to refresh refresh() { return false; } }; }); useLayoutEffect(() => { return showJsComp(innerCompDetails, context, eValueRef.current); }, [innerCompDetails]); const setRef2 = useCallback((eRef) => { eGui.current = eRef; if (!eRef) { ctrlRef.current = context.destroyBean(ctrlRef.current); return; } const compProxy = { setInnerRenderer: (details, valueToDisplay) => { setInnerCompDetails(details); setValue(valueToDisplay); }, setChildCount: (count) => setChildCount(count), addOrRemoveCssClass: (name, on) => setCssClasses((prev) => prev.setClass(name, on)), setContractedDisplayed: (displayed) => setContractedCssClasses((prev) => prev.setClass("ag-hidden", !displayed)), setExpandedDisplayed: (displayed) => setExpandedCssClasses((prev) => prev.setClass("ag-hidden", !displayed)), setCheckboxVisible: (visible) => setCheckboxCssClasses((prev) => prev.setClass("ag-invisible", !visible)), setCheckboxSpacing: (add) => setCheckboxCssClasses((prev) => prev.setClass("ag-group-checkbox-spacing", add)) }; const groupCellRendererCtrl = registry.createDynamicBean("groupCellRendererCtrl", true); if (groupCellRendererCtrl) { ctrlRef.current = context.createBean(groupCellRendererCtrl); ctrlRef.current.init( compProxy, eRef, eCheckboxRef.current, eExpandedRef.current, eContractedRef.current, GroupCellRenderer, props ); } }, []); const className = useMemo(() => `ag-cell-wrapper ${cssClasses.toString()}`, [cssClasses]); const expandedClassName = useMemo(() => `ag-group-expanded ${expandedCssClasses.toString()}`, [expandedCssClasses]); const contractedClassName = useMemo( () => `ag-group-contracted ${contractedCssClasses.toString()}`, [contractedCssClasses] ); const checkboxClassName = useMemo(() => `ag-group-checkbox ${checkboxCssClasses.toString()}`, [checkboxCssClasses]); const useFwRenderer = innerCompDetails && innerCompDetails.componentFromFramework; const FwRenderer = useFwRenderer ? innerCompDetails.componentClass : void 0; const useValue = innerCompDetails == null && value != null; const escapedValue = _escapeString(value, true); return /* @__PURE__ */ React3.createElement( "span", { className, ref: setRef2, ...!props.colDef ? { role: ctrlRef.current?.getCellAriaRole() } : {} }, /* @__PURE__ */ React3.createElement("span", { className: expandedClassName, ref: eExpandedRef }), /* @__PURE__ */ React3.createElement("span", { className: contractedClassName, ref: eContractedRef }), /* @__PURE__ */ React3.createElement("span", { className: checkboxClassName, ref: eCheckboxRef }), /* @__PURE__ */ React3.createElement("span", { className: "ag-group-value", ref: eValueRef }, useValue && /* @__PURE__ */ React3.createElement(React3.Fragment, null, escapedValue), useFwRenderer && /* @__PURE__ */ React3.createElement(FwRenderer, { ...innerCompDetails.params })), /* @__PURE__ */ React3.createElement("span", { className: "ag-group-child-count" }, childCount) ); }); var groupCellRenderer_default = GroupCellRenderer; // packages/ag-grid-react/src/shared/customComp/customComponentWrapper.ts import { AgPromise as AgPromise2 } from "ag-grid-community"; // packages/ag-grid-react/src/reactUi/customComp/customWrapperComp.tsx import React4, { memo, useEffect, useState as useState2 } from "react"; // packages/ag-grid-react/src/shared/customComp/customContext.ts import { createContext } from "react"; var CustomContext = createContext({ setMethods: () => { } }); // packages/ag-grid-react/src/reactUi/customComp/customWrapperComp.tsx var CustomWrapperComp = (params) => { const { initialProps, addUpdateCallback, CustomComponentClass, setMethods } = params; const [{ key, ...props }, setProps] = useState2(initialProps); useEffect(() => { addUpdateCallback((newProps) => setProps(newProps)); }, []); return /* @__PURE__ */ React4.createElement(CustomContext.Provider, { value: { setMethods } }, /* @__PURE__ */ React4.createElement(CustomComponentClass, { key, ...props })); }; var customWrapperComp_default = memo(CustomWrapperComp); // packages/ag-grid-react/src/shared/reactComponent.ts import { createElement } from "react"; import { createPortal } from "react-dom"; import { AgPromise } from "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() ? AgPromise.resolve(false) : new AgPromise((resolve) => { this.resolveInstanceCreated = resolve; }); } getGui() { return this.eParentElement; } /** `getGui()` returns the parent element. This returns the actual root element. */ getRootElement() { const firstChild = this.eParentElement.firstChild; return firstChild; } destroy() { if (this.componentInstance && typeof this.componentInstance.destroy == "function") { this.componentInstance.destroy(); } const portal = this.portal; if (portal) { this.portalManager.destroyPortal(portal); } } createParentElement(params) { const componentWrappingElement = this.portalManager.getComponentWrappingElement(); const eParentElement = document.createElement(componentWrappingElement || "div"); eParentElement.classList.add("ag-react-container"); params.reactContainer = eParentElement; return eParentElement; } statelessComponentRendered() { return this.eParentElement.childElementCount > 0 || this.eParentElement.childNodes.length > 0; } getFrameworkComponentInstance() { return this.componentInstance; } isStatelessComponent() { return this.statelessComponent; } getReactComponentName() { return this.reactComponent.name; } getMemoType() { return this.hasSymbol() ? Symbol.for("react.memo") : 60115; } hasSymbol() { return typeof Symbol === "function" && Symbol.for; } isStateless(Component2) { return typeof Component2 === "function" && !(Component2.prototype && Component2.prototype.isReactComponent) || typeof Component2 === "object" && Component2.$$typeof === this.getMemoType(); } hasMethod(name) { const frameworkComponentInstance = this.getFrameworkComponentInstance(); return !!frameworkComponentInstance && frameworkComponentInstance[name] != null || this.fallbackMethodAvailable(name); } callMethod(name, args) { const frameworkComponentInstance = this.getFrameworkComponentInstance(); if (this.isStatelessComponent()) { return this.fallbackMethod(name, !!args && args[0] ? args[0] : {}); } else if (!frameworkComponentInstance) { setTimeout(() => this.callMethod(name, args)); return; } const method = frameworkComponentInstance[name]; if (method) { return method.apply(frameworkComponentInstance, args); } if (this.fallbackMethodAvailable(name)) { return this.fallbackMethod(name, !!args && args[0] ? args[0] : {}); } } addMethod(name, callback) { this[name] = callback; } init(params) { this.eParentElement = this.createParentElement(params); this.createOrUpdatePortal(params); return new 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 = createPortal( this.reactElement, this.eParentElement, this.portalKey // fixed deltaRowModeRefreshCompRenderer ); } createElement(reactComponent, props) { return createElement(reactComponent, props); } createReactComponent(resolve) { this.portalManager.mountReactPortal(this.portal, this, resolve); } rendered() { return this.isStatelessComponent() && this.statelessComponentRendered() || !!(!this.isStatelessComponent() && this.getFrameworkComponentInstance()); } /* * fallback methods - these will be invoked if a corresponding instance method is not present * for example if refresh is called and is not available on the component instance, then refreshComponent on this * class will be invoked instead * * Currently only refresh is supported */ refreshComponent(args) { this.oldPortal = this.portal; this.createOrUpdatePortal(args); this.portalManager.updateReactPortal(this.oldPortal, this.portal); } fallbackMethod(name, params) { const method = this[`${name}Component`]; if (!this.suppressFallbackMethods && !!method) { return method.bind(this)(params); } } fallbackMethodAvailable(name) { if (this.suppressFallbackMethods) { return false; } const method = this[`${name}Component`]; return !!method; } }; // packages/ag-grid-react/src/shared/customComp/customComponentWrapper.ts function addOptionalMethods(optionalMethodNames, providedMethods, component) { optionalMethodNames.forEach((methodName) => { const providedMethod = providedMethods[methodName]; if (providedMethod) { component[methodName] = providedMethod; } }); } var CustomComponentWrapper = class extends ReactComponent { constructor() { super(...arguments); this.awaitUpdateCallback = new AgPromise2((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 AgPromise2((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 AgPromise2( (resolve) => this.awaitUpdateCallback.then(() => { this.updateCallback().then(() => resolve()); }) ); } }; // packages/ag-grid-react/src/shared/customComp/cellRendererComponentWrapper.ts var CellRendererComponentWrapper = class extends CustomComponentWrapper { refresh(params) { this.sourceParams = params; this.refreshProps(); return true; } }; // packages/ag-grid-react/src/shared/customComp/dateComponentWrapper.ts var DateComponentWrapper = class extends CustomComponentWrapper { constructor() { super(...arguments); this.date = null; this.onDateChange = (date) => this.updateDate(date); } getDate() { return this.date; } setDate(date) { this.date = date; this.refreshProps(); } refresh(params) { this.sourceParams = params; this.refreshProps(); } getOptionalMethods() { return ["afterGuiAttached", "setInputPlaceholder", "setInputAriaLabel", "setDisabled"]; } updateDate(date) { this.setDate(date); this.sourceParams.onDateChanged(); } getProps() { const props = super.getProps(); props.date = this.date; props.onDateChange = this.onDateChange; delete props.onDateChanged; return props; } }; // packages/ag-grid-react/src/shared/customComp/dragAndDropImageComponentWrapper.ts var DragAndDropImageComponentWrapper = class extends CustomComponentWrapper { constructor() { super(...arguments); this.label = ""; this.icon = null; this.shake = false; } setIcon(iconName, shake) { this.icon = iconName; this.shake = shake; this.refreshProps(); } setLabel(label) { this.label = label; this.refreshProps(); } getProps() { const props = super.getProps(); const { label, icon, shake } = this; props.label = label; props.icon = icon; props.shake = shake; return props; } }; // packages/ag-grid-react/src/shared/customComp/filterComponentWrapper.ts import { AgPromise as AgPromise3 } from "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 AgPromise3((resolve) => { this.resolveSetMethodsCallback = resolve; }); } isFilterActive() { return this.model != null; } doesFilterPass(params) { return this.providedMethods.doesFilterPass(params); } getModel() { return this.model; } setModel(model) { this.expectingNewMethods = true; this.model = model; this.hasBeenActive || (this.hasBeenActive = this.isFilterActive()); return this.refreshProps(); } refresh(newParams) { this.sourceParams = newParams; this.refreshProps(); return true; } afterGuiAttached(params) { const providedMethods = this.providedMethods; if (!providedMethods) { this.awaitSetMethodsCallback.then(() => this.providedMethods?.afterGuiAttached?.(params)); } else { providedMethods.afterGuiAttached?.(params); } } getOptionalMethods() { return ["afterGuiAttached", "afterGuiDetached", "onNewRowsLoaded", "getModelAsString", "onAnyFilterChanged"]; } setMethods(methods) { if (this.expectingNewMethods === false && this.hasBeenActive && this.providedMethods?.doesFilterPass !== methods?.doesFilterPass) { setTimeout(() => { this.sourceParams.filterChangedCallback(); }); } this.expectingNewMethods = false; super.setMethods(methods); this.resolveSetMethodsCallback(); } updateModel(model) { this.setModel(model).then(() => this.sourceParams.filterChangedCallback()); } getProps() { const props = super.getProps(); props.model = this.model; props.onModelChange = this.onModelChange; props.onUiChange = this.onUiChange; delete props.filterChangedCallback; delete props.filterModifiedCallback; return props; } }; // packages/ag-grid-react/src/shared/customComp/floatingFilterComponentProxy.ts import { AgPromise as AgPromise4 } from "ag-grid-community"; function updateFloatingFilterParent(params, model) { params.parentFilterInstance((instance) => { (instance.setModel(model) || AgPromise4.resolve()).then(() => { params.filterParams.filterChangedCallback(); }); }); } var FloatingFilterComponentProxy = class { constructor(floatingFilterParams, refreshProps) { this.floatingFilterParams = floatingFilterParams; this.refreshProps = refreshProps; this.model = null; this.onModelChange = (model) => this.updateModel(model); } getProps() { return { ...this.floatingFilterParams, model: this.model, onModelChange: this.onModelChange }; } onParentModelChanged(parentModel) { this.model = parentModel; this.refreshProps(); } refresh(params) { this.floatingFilterParams = params; this.refreshProps(); } setMethods(methods) { addOptionalMethods(this.getOptionalMethods(), methods, this); } getOptionalMethods() { return ["afterGuiAttached"]; } updateModel(model) { this.model = model; this.refreshProps(); updateFloatingFilterParent(this.floatingFilterParams, model); } }; // packages/ag-grid-react/src/shared/customComp/floatingFilterComponentWrapper.ts var FloatingFilterComponentWrapper = class extends CustomComponentWrapper { constructor() { super(...arguments); this.model = null; this.onModelChange = (model) => this.updateModel(model); } onParentModelChanged(parentModel) { this.model = parentModel; this.refreshProps(); } refresh(newParams) { this.sourceParams = newParams; this.refreshProps(); } getOptionalMethods() { return ["afterGuiAttached"]; } updateModel(model) { this.model = model; this.refreshProps(); updateFloatingFilterParent(this.sourceParams, model); } getProps() { const props = super.getProps(); props.model = this.model; props.onModelChange = this.onModelChange; return props; } }; // packages/ag-grid-react/src/shared/customComp/innerHeaderComponentWrapper.ts var InnerHeaderComponentWrapper = class extends CustomComponentWrapper { refresh(params) { this.sourceParams = params; this.refreshProps(); return true; } }; // packages/ag-grid-react/src/shared/customComp/loadingOverlayComponentWrapper.ts var LoadingOverlayComponentWrapper = class extends CustomComponentWrapper { refresh(params) { this.sourceParams = params; this.refreshProps(); } }; // packages/ag-grid-react/src/shared/customComp/menuItemComponentWrapper.ts var MenuItemComponentWrapper = class extends CustomComponentWrapper { constructor() { super(...arguments); this.active = false; this.expanded = false; this.onActiveChange = (active) => this.updateActive(active); } setActive(active) { this.awaitSetActive(active); } setExpanded(expanded) { this.expanded = expanded; this.refreshProps(); } getOptionalMethods() { return ["select", "configureDefaults"]; } awaitSetActive(active) { this.active = active; return this.refreshProps(); } updateActive(active) { const result = this.awaitSetActive(active); if (active) { result.then(() => this.sourceParams.onItemActivated()); } } getProps() { const props = super.getProps(); props.active = this.active; props.expanded = this.expanded; props.onActiveChange = this.onActiveChange; delete props.onItemActivated; return props; } }; // packages/ag-grid-react/src/shared/customComp/noRowsOverlayComponentWrapper.ts var NoRowsOverlayComponentWrapper = class extends CustomComponentWrapper { refresh(params) { this.sourceParams = params; this.refreshProps(); } }; // packages/ag-grid-react/src/shared/customComp/statusPanelComponentWrapper.ts var StatusPanelComponentWrapper = class extends CustomComponentWrapper { refresh(params) { this.sourceParams = params; this.refreshProps(); return true; } }; // packages/ag-grid-react/src/shared/customComp/toolPanelComponentWrapper.ts var ToolPanelComponentWrapper = class extends CustomComponentWrapper { constructor() { super(...arguments); this.onStateChange = (state) => this.updateState(state); } refresh(params) { this.sourceParams = params; this.refreshProps(); return true; } getState() { return this.state; } updateState(state) { this.state = state; this.refreshProps(); this.sourceParams.onStateUpdated(); } getProps() { const props = super.getProps(); props.state = this.state; props.onStateChange = this.onStateChange; return props; } }; // packages/ag-grid-react/src/shared/customComp/util.ts import { AgPromise as AgPromise5, _warn } from "ag-grid-community"; function getInstance(wrapperComponent, callback) { const promise = wrapperComponent?.getInstance?.() ?? AgPromise5.resolve(void 0); promise.then((comp) => callback(comp)); } function warnReactiveCustomComponents() { _warn(231); } // packages/ag-grid-react/src/shared/portalManager.ts var MAX_COMPONENT_CREATION_TIME_IN_MS = 1e3; var PortalManager = class { constructor(refresher, wrappingElement, maxComponentCreationTimeMs) { this.destroyed = false; this.portals = []; this.hasPendingPortalUpdate = false; this.wrappingElement = wrappingElement ? wrappingElement : "div"; this.refresher = refresher; this.maxComponentCreationTimeMs = maxComponentCreationTimeMs ? maxComponentCreationTimeMs : MAX_COMPONENT_CREATION_TIME_IN_MS; } getPortals() { return this.portals; } destroy() { this.destroyed = true; } destroyPortal(portal) { this.portals = this.portals.filter((curPortal) => curPortal !== portal); this.batchUpdate(); } getComponentWrappingElement() { return this.wrappingElement; } mountReactPortal(portal, reactComponent, resolve) { this.portals = [...this.portals, portal]; this.waitForInstance(reactComponent, resolve); this.batchUpdate(); } updateReactPortal(oldPortal, newPortal) { this.portals[this.portals.indexOf(oldPortal)] = newPortal; this.batchUpdate(); } batchUpdate() { if (this.hasPendingPortalUpdate) { return; } setTimeout(() => { if (!this.destroyed) { this.refresher(); this.hasPendingPortalUpdate = false; } }); this.hasPendingPortalUpdate = true; } waitForInstance(reactComponent, resolve, startTime = Date.now()) { if (this.destroyed) { resolve(null); return; } if (reactComponent.rendered()) { resolve(reactComponent); } else { if (Date.now() - startTime >= this.maxComponentCreationTimeMs && !this.hasPendingPortalUpdate) { return; } window.setTimeout(() => { this.waitForInstance(reactComponent, resolve, startTime); }); } } }; // packages/ag-grid-react/src/reactUi/gridComp.tsx import React17, { memo as memo14, useCallback as useCallback14, useEffect as useEffect8, useMemo as useMemo11, useRef as useRef14, useState as useState15 } from "react"; import { GridCtrl } from "ag-grid-community"; // packages/ag-grid-react/src/reactUi/gridBodyComp.tsx import React15, { memo as memo12, useCallback as useCallback12, useContext as useContext13, useMemo as useMemo10, useRef as useRef12, useState as useState14 } from "react"; import { CssClassManager as CssClassManager4, FakeHScrollComp, FakeVScrollComp, GridBodyCtrl, _observeResize, _setAriaColCount, _setAriaRowCount } from "ag-grid-community"; // packages/ag-grid-react/src/reactUi/header/gridHeaderComp.tsx import React10, { memo as memo7, useCallback as useCallback7, useContext as useContext7, useMemo as useMemo6, useRef as useRef7, useState as useState8 } from "react"; import { GridHeaderCtrl } from "ag-grid-community"; // packages/ag-grid-react/src/reactUi/header/headerRowContainerComp.tsx import React9, { memo as memo6, useCallback as useCallback6, useContext as useContext6, useRef as useRef6, useState as useState7 } from "react"; import { HeaderRowContainerCtrl } from "ag-grid-community"; // packages/ag-grid-react/src/reactUi/header/headerRowComp.tsx import React8, { memo as memo5, useCallback as useCallback5, useContext as useContext5, useMemo as useMemo5, useRef as useRef5, useState as useState6 } from "react"; import { _EmptyBean as _EmptyBean4 } from "ag-grid-community"; // packages/ag-grid-react/src/reactUi/header/headerCellComp.tsx import React5, { memo as memo2, useCallback as useCallback2, useContext as useContext2, useEffect as useEffect2, useLayoutEffect as useLayoutEffect2, useMemo as useMemo2, useRef as useRef2, useState as useState3 } from "react"; import { CssClassManager, _EmptyBean, _removeAriaSort, _setAriaSort } from "ag-grid-community"; var HeaderCellComp = ({ ctrl }) => { const isAlive = ctrl.isAlive(); const { context } = useContext2(BeansContext); const colId = isAlive ? ctrl.column.getColId() : void 0; const [userCompDetails, setUserCompDetails] = useState3(); const [userStyles, setUserStyles] = useState3(); const compBean = useRef2(); const eGui = useRef2(null); const eResize = useRef2(null); const eHeaderCompWrapper = useRef2(null); const userCompRef = useRef2(); const cssClassManager = useRef2(); if (isAlive && !cssClassManager.current) { cssClassManager.current = new CssClassManager(() => eGui.current); } const setRef2 = useCallback2((eRef) => { eGui.current = eRef; compBean.current = eRef ? context.createBean(new _EmptyBean()) : context.destroyBean(compBean.current); if (!eRef || !ctrl.isAlive()) { return; } const compProxy = { setWidth: (width) => { if (eGui.current) { eGui.current.style.width = width; } }, addOrRemoveCssClass: (name, on) => cssClassManager.current.addOrRemoveCssClass(name, on), setUserStyles: (styles) => setUserStyles(styles), setAriaSort: (sort) => { if (eGui.current) { sort ? _setAriaSort(eGui.current, sort) : _removeAriaSort(eGui.current); } }, setUserCompDetails: (compDetails) => setUserCompDetails(compDetails), getUserCompInstance: () => userCompRef.current || void 0 }; ctrl.setComp(compProxy, eRef, eResize.current, eHeaderCompWrapper.current, compBean.current); const selectAllGui = ctrl.getSelectAllGui(); if (selectAllGui) { eResize.current?.insertAdjacentElement("afterend", selectAllGui); compBean.current.addDestroyFunc(() => selectAllGui.remove()); } }, []); useLayoutEffect2( () => showJsComp(userCompDetails, context, eHeaderCompWrapper.current, userCompRef), [userCompDetails] ); useEffect2(() => { ctrl.setDragSource(eGui.current); }, [userCompDetails]); const userCompStateless = useMemo2(() => { const res = userCompDetails?.componentFromFramework && isComponentStateless(userCompDetails.componentClass); return !!res; }, [userCompDetails]); const reactUserComp = userCompDetails && userCompDetails.componentFromFramework; const UserCompClass = userCompDetails && userCompDetails.componentClass; return /* @__PURE__ */ React5.createElement("div", { ref: setRef2, style: userStyles, className: "ag-header-cell", "col-id": colId, role: "columnheader" }, /* @__PURE__ */ React5.createElement("div", { ref: eResize, className: "ag-header-cell-resize", role: "presentation" }), /* @__PURE__ */ React5.createElement("div", { ref: eHeaderCompWrapper, className: "ag-header-cell-comp-wrapper", role: "presentation" }, reactUserComp && userCompStateless && /* @__PURE__ */ React5.createElement(UserCompClass, { ...userCompDetails.params }), reactUserComp && !userCompStateless && /* @__PURE__ */ React5.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompRef }))); }; var headerCellComp_default = memo2(HeaderCellComp); // packages/ag-grid-react/src/reactUi/header/headerFilterCellComp.tsx import React6, { memo as memo3, useCallback as useCallback3, useContext as useContext3, useLayoutEffect as useLayoutEffect3, useMemo as useMemo3, useRef as useRef3, useState as useState4 } from "react"; import { AgPromise as AgPromise6, _EmptyBean as _EmptyBean2 } from "ag-grid-community"; var HeaderFilterCellComp = ({ ctrl }) => { const { context, gos } = useContext3(BeansContext); const [userStyles, setUserStyles] = useState4(); const [cssClasses, setCssClasses] = useState4( () => new CssClasses("ag-header-cell", "ag-floating-filter") ); const [cssBodyClasses, setBodyCssClasses] = useState4(() => new CssClasses()); const [cssButtonWrapperClasses, setButtonWrapperCssClasses] = useState4( () => new CssClasses("ag-floating-filter-button", "ag-hidden") ); const [buttonWrapperAriaHidden, setButtonWrapperAriaHidden] = useState4("false"); const [userCompDetails, setUserCompDetails] = useState4(); const [, setRenderKey] = useState4(1); const compBean = useRef3(); const eGui = useRef3(null); const eFloatingFilterBody = useRef3(null); const eButtonWrapper = useRef3(null); const eButtonShowMainFilter = useRef3(null); const userCompResolve = useRef3(); const userCompPromise = useRef3(); const userCompRef = (value) => { if (value == null) { return; } userCompResolve.current && userCompResolve.current(value); }; const setRef2 = useCallback3((eRef) => { eGui.current = eRef; compBean.current = eRef ? context.createBean(new _EmptyBean2()) : context.destroyBean(compBean.current); if (!eRef) { return; } userCompPromise.current = new AgPromise6((resolve) => { userCompResolve.current = resolve; }); const compProxy = { addOrRemoveCssClass: (name, on) => setCssClasses((prev) => prev.setClass(name, on)), setUserStyles: (styles) => setUserStyles(styles), addOrRemoveBodyCssClass: (name, on) => setBodyCssClasses((prev) => prev.setClass(name, on)), setButtonWrapperDisplayed: (displayed) => { setButtonWrapperCssClasses((prev) => prev.setClass("ag-hidden", !displayed)); setButtonWrapperAriaHidden(!displayed ? "true" : "false"); }, setWidth: (width) => { if (eGui.current) { eGui.current.style.width = width; } }, setCompDetails: (compDetails) => setUserCompDetails(compDetails), getFloatingFilterComp: () => userCompPromise.current ? userCompPromise.current : null, setMenuIcon: (eIcon) => eButtonShowMainFilter.current?.appendChild(eIcon) }; ctrl.setComp(compProxy, eRef, eButtonShowMainFilter.current, eFloatingFilterBody.current, compBean.current); }, []); useLayoutEffect3( () => showJsComp(userCompDetails, context, eFloatingFilterBody.current, userCompRef), [userCompDetails] ); const className = useMemo3(() => cssClasses.toString(), [cssClasses]); const bodyClassName = useMemo3(() => cssBodyClasses.toString(), [cssBodyClasses]); const buttonWrapperClassName = useMemo3(() => cssButtonWrapperClasses.toString(), [cssButtonWrapperClasses]); const userCompStateless = useMemo3(() => { const res = userCompDetails && userCompDetails.componentFromFramework && isComponentStateless(userCompDetails.componentClass); return !!res; }, [userCompDetails]); const reactiveCustomComponents = useMemo3(() => gos.get("reactiveCustomComponents"), []); const floatingFilterCompProxy = useMemo3(() => { if (userCompDetails) { if (reactiveCustomComponents) { const compProxy = new FloatingFilterComponentProxy( userCompDetails.params, () => setRenderKey((prev) => prev + 1) ); userCompRef(compProxy); return compProxy; } else if (userCompDetails.componentFromFramework) { warnReactiveCustomComponents(); } } return void 0; }, [userCompDetails]); const floatingFilterProps = floatingFilterCompProxy?.getProps(); const reactUserComp = userCompDetails && userCompDetails.componentFromFramework; const UserCompClass = userCompDetails && userCompDetails.componentClass; return /* @__PURE__ */ React6.createElement("div", { ref: setRef2, style: userStyles, className, role: "gridcell" }, /* @__PURE__ */ React6.createElement("div", { ref: eFloatingFilterBody, className: bodyClassName, role: "presentation" }, reactUserComp && !reactiveCustomComponents && /* @__PURE__ */ React6.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompStateless ? () => { } : userCompRef }), reactUserComp && reactiveCustomComponents && /* @__PURE__ */ React6.createElement( CustomContext.Provider, { value: { setMethods: (methods) => floatingFilterCompProxy.setMethods(methods) } }, /* @__PURE__ */ React6.createElement(UserCompClass, { ...floatingFilterProps }) )), /* @__PURE__ */ React6.createElement( "div", { ref: eButtonWrapper, "aria-hidden": buttonWrapperAriaHidden, className: buttonWrapperClassName, role: "presentation" }, /* @__PURE__ */ React6.createElement( "button", { ref: eButtonShowMainFilter, type: "button", className: "ag-button ag-floating-filter-button-button", tabIndex: -1 } ) )); }; var headerFilterCellComp_default = memo3(HeaderFilterCellComp); // packages/ag-grid-react/src/reactUi/header/headerGroupCellComp.tsx import React7, { memo as memo4, useCallback as useCallback4, useContext as useContext4, useEffect as useEffect3, useLayoutEffect as useLayoutEffect4, useMemo as useMemo4, useRef as useRef4, useState as useState5 } from "react"; import { _EmptyBean as _EmptyBean3 } from "ag-grid-community"; var HeaderGroupCellComp = ({ ctrl }) => { const { context } = useContext4(BeansContext); const [userStyles, setUserStyles] = useState5(); const [cssClasses, setCssClasses] = useState5(() => new CssClasses()); const [cssResizableClasses, setResizableCssClasses] = useState5(() => new CssClasses()); const [resizableAriaHidden, setResizableAriaHidden] = useState5("false"); const [ariaExpanded, setAriaExpanded] = useState5(); const [userCompDetails, setUserCompDetails] = useState5(); const colId = useMemo4(() => ctrl.column.getUniqueId(), []); const compBean = useRef4(); const eGui = useRef4(null); const eResize = useRef4(null); const eHeaderCompWrapper = useRef4(null); const userCompRef = useRef4(); const setRef2 = useCallback4((eRef) => { eGui.current = eRef; compBean.current = eRef ? context.createBean(new _EmptyBean3()) : context.destroyBean(compBean.current); if (!eRef) { return; } const compProxy = { setWidth: (width) => { if (eGui.current) { eGui.current.style.width = width; } }, addOrRemoveCssClass: (name, on) => setCssClasses((prev) => prev.setClass(name, on)), setUserStyles: (styles) => setUserStyles(styles), setHeaderWrapperHidden: (hidden) => { const headerCompWrapper = eHeaderCompWrapper.current; if (!headerCompWrapper) { return; } if (hidden) { headerCompWrapper.style.setProperty("display", "none"); } else { headerCompWrapper.style.removeProperty("display"); } }, setHeaderWrapperMaxHeight: (value) => { const headerCompWrapper = eHeaderCompWrapper.current; if (!headerCompWrapper) { return; } if (value != null) { headerCompWrapper.style.setProperty("max-height", `${value}px`); } else { headerCompWrapper.style.removeProperty("max-height"); } headerCompWrapper.classList.toggle("ag-header-cell-comp-wrapper-limited-height", value != null); }, setUserCompDetails: (compDetails) => setUserCompDetails(compDetails), setResizableDisplayed: (displayed) => { setResizableCssClasses((prev) => prev.setClass("ag-hidden", !displayed)); setResizableAriaHidden(!displayed ? "true" : "false"); }, setAriaExpanded: (expanded) => setAriaExpanded(expanded), getUserCompInstance: () => userCompRef.current || void 0 }; ctrl.setComp(compProxy, eRef, eResize.current, eHeaderCompWrapper.current, compBean.current); }, []); useLayoutEffect4(() => showJsComp(userCompDetails, context, eHeaderCompWrapper.current), [userCompDetails]); useEffect3(() => { if (eGui.current) { ctrl.setDragSource(eGui.current); } }, [userCompDetails]); const userCompStateless = useMemo4(() => { const res = userCompDetails?.componentFromFramework && isComponentStateless(userCompDetails.componentClass); return !!res; }, [userCompDetails]); const className = useMemo4(() => "ag-header-group-cell " + cssClasses.toString(), [cssClasses]); const resizableClassName = useMemo4( () => "ag-header-cell-resize " + cssResizableClasses.toString(), [cssResizableClasses] ); const reactUserComp = userCompDetails && userCompDetails.componentFromFramework; const UserCompClass = userCompDetails && userCompDetails.componentClass; return /* @__PURE__ */ React7.createElement( "div", { ref: setRef2, style: userStyles, className, "col-id": colId, role: "columnheader", "aria-expanded": ariaExpanded }, /* @__PURE__ */ React7.createElement("div", { ref: eHeaderCompWrapper, className: "ag-header-cell-comp-wrapper", role: "presentation" }, reactUserComp && userCompStateless && /* @__PURE__ */ React7.createElement(UserCompClass, { ...userCompDetails.params }), reactUserComp && !userCompStateless && /* @__PURE__ */ React7.createElement(UserCompClass, { ...userCompDetails.params, ref: userCompRef })), /* @__PURE__ */ React7.createElement("div", { ref: eResize, "aria-hidden": resizableAriaHidden, className: resizableClassName }) ); }; var headerGroupCellComp_default = memo4(HeaderGroupCellComp); // packages/ag-grid-react/src/reactUi/header/headerRowComp.tsx var HeaderRowComp = ({ ctrl }) => { const { context } = useContext5(BeansContext); const { topOffset, rowHeight } = useMemo5(() => ctrl.getTopAndHeight(), []); const ariaRowIndex = ctrl.getAriaRowIndex(); const className = ctrl.headerRowClass; const [height, setHeight] = useState6(() => rowHeight + "px"); const [top, setTop] = useState6(() => topOffset + "px"); const cellCtrlsRef = useRef5(null); const prevCellCtrlsRef = useRef5(null); const [cellCtrls, setCellCtrls] = useState6(() => ctrl.getUpdatedHeaderCtrls()); const compBean = useRef5(); const eGui = useRef5(null); const setRef2 = useCallback5((eRef) => { eGui.current = eRef; compBean.current = eRef ? context.createBean(new _EmptyBean4()) : context.destroyBean(compBean.current); if (!eRef) { return; } const compProxy = { setHeight: (height2) => setHeight(height2), setTop: (top2) => setTop(top2), setHeaderCtrls: (ctrls, forceOrder, afterScroll) => { prevCellCtrlsRef.current = cellCtrlsRef.current; cellCtrlsRef.current = ctrls; const next = getNextValueIfDifferent(prevCellCtrlsRef.current, ctrls, forceOrder); if (next !== prevCellCtrlsRef.current) { agFlushSync(afterScroll, () => setCellCtrls(next)); } }, setWidth: (width) => { if (eGui.current) { eGui.current.style.width = width; } } }; ctrl.setComp(compProxy, compBean.current, false); }, []); const style = useMemo5( () => ({ height, top }), [height, top] ); const createCellJsx = useCallback5((cellCtrl) => { switch (ctrl.type) { case "group": return /* @__PURE__ */ React8.createElement(headerGroupCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId }); case "filter": return /* @__PURE__ */ React8.createElement(headerFilterCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId }); default: return /* @__PURE__ */ React8.createElement(headerCellComp_default, { ctrl: cellCtrl, key: cellCtrl.instanceId }); } }, []); return /* @__PURE__ */ React8.createElement("div", { ref: setRef2, className, role: "row", style, "aria-rowindex": ariaRowIndex }, cellCtrls.map(createCellJsx)); }; var headerRowComp_default = memo5(HeaderRowComp); // packages/ag-grid-react/src/reactUi/header/headerRowContainerComp.tsx var HeaderRowContainerComp = ({ pinned }) => { const [displayed, setDisplayed] = useState7(true); const [headerRowCtrls, setHeaderRowCtrls] = useState7([]); const { context } = useContext6(BeansContext); const eGui = useRef6(null); const eCenterContainer = useRef6(null); const headerRowCtrlRef = useRef6(); const pinnedLeft = pinned === "left"; const pinnedRight = pinned === "right"; const centre = !pinnedLeft && !pinnedRight; const setRef2 = useCallback6((eRef) => { eGui.current = eRef; headerRowCtrlRef.current = eRef ? context.createBean(new HeaderRowContainerCtrl(pinned)) : context.destroyBean(headerRowCtrlRef.current); if (!eRef) { return; } const compProxy = { setDisplayed, setCtrls: (ctrls) => setHeaderRowCtrls(ctrls), // centre only setCenterWidth: (width) => { if (eCenterContainer.current) { eCenterContainer.current.style.width = width; } }, setViewportScrollLeft: (left) => { if (eGui.current) { eGui.current.scrollLeft = left; } }, // pinned only setPinnedContainerWidth: (width) => { if (eGui.current) { eGui.current.style.width = width; eGui.current.style.minWidth = width; eGui.current.style.maxWidth = width; } } }; headerRowCtrlRef.current.setComp(compProxy, eGui.current); }, []); const className = !displayed ? "ag-hidden" : ""; const insertRowsJsx = () => headerRowCtrls.map((ctrl) => /* @__PURE__ */ React9.createElement(headerRowComp_default, { ctrl, key: ctrl.instanceId })); return /* @__PURE__ */ React9.createElement(React9.Fragment, null, pinnedLeft && /* @__PURE__ */ React9.createElement( "div", { ref: setRef2, className: "ag-pinned-left-header " + className, "aria-hidden": !displayed, role: "rowgroup" }, insertRowsJsx() ), pinnedRight && /* @__PURE__ */ React9.createElement( "div", { ref: setRef2, className: "ag-pinned-right-header " + className, "aria-hidden": !displayed, role: "rowgroup" }, insertRowsJsx() ), centre && /* @__PURE__ */ React9.createElement("div", { ref: setRef2, className: "ag-header-viewport " + className, role: "presentation", tabIndex: -1 }, /* @__PURE__ */ React9.createElement("div", { ref: eCenterContainer, className: "ag-header-container", role: "rowgroup" }, insertRowsJsx()))); }; var headerRowContainerComp_default = memo6(HeaderRowContainerComp); // packages/ag-grid-react/src/reactUi/header/gridHeaderComp.tsx var GridHeaderComp = () => { const [cssClasses, setCssClasses] = useState8(() => new CssClasses()); const [height, setHeight] = useState8(); const { context } = useContext7(BeansContext); const eGui = useRef7(null); const gridCtrlRef = useRef7(); const setRef2 = useCallback7((eRef) => { eGui.current = eRef; gridCtrlRef.current = eRef ? context.createBean(new GridHeaderCtrl()) : context.destroyBean(gridCtrlRef.current); if (!eRef) return; const compProxy = { addOrRemoveCssClass: (name, on) => setCssClasses((prev) => prev.setClass(name, on)), setHeightAndMinHeight: (height2) => setHeight(height2) }; gridCtrlRef.current.setComp(compProxy, eRef, eRef); }, []); const className = useMemo6(() => { const res = cssClasses.toString(); return "ag-header " + res; }, [cssClasses]); const style = useMemo6( () => ({ height, minHeight: height }), [height] ); return /* @__PURE__ */ React10.createElement("div", { ref: setRef2, className, style, role: "presentation" }, /* @__PURE__ */ React10.creat