@genesislcap/grid-pro 14.424.1 → 14.425.0

package/dist/react.cjs

@@ -5,7 +5,6 @@
 
 'use strict';
 
-const { provideReactWrapper } = require('@microsoft/fast-react-wrapper');
 const React = require('react');
 const { DateEditor: DateEditorWC } = require('./esm/cell-editors/date.editor.js');
 const { MultiselectEditor: MultiselectEditorWC } = require('./esm/cell-editors/multiselect.editor.js');
@@ -29,130 +28,469 @@ const { GridProGenesisDatasource: GridProGenesisDatasourceWC } = require('./esm/
 const { GridPro: GridProWC } = require('./esm/grid-pro.js');
 const { MulticolumnDropdown: MulticolumnDropdownWC } = require('./esm/multicolumn-dropdown/multicolumn-dropdown.js');
 
-const { wrap } = provideReactWrapper(React);
+function _mergeRefs(...refs) {
+  return (value) => {
+    for (const ref of refs) {
+      if (typeof ref === 'function') ref(value);
+      else if (ref != null) ref.current = value;
+    }
+  };
+}
 
-const GridProBeta = wrap(GridProBetaWC, {
-  events: {
-    onGridReady: 'gridReady',
-    onOnGridReady: 'onGridReady',
-    onGridready: 'gridready',
-  },
-});
-
-const GridPro = wrap(GridProWC, {
-  events: {
-    onGridReady: 'gridReady',
-    onOnGridReady: 'onGridReady',
-    onGridready: 'gridready',
-  },
-});
-
-const GridProCell = wrap(GridProCellWC);
-
-const ActionRenderer = wrap(ActionRendererWC);
-
-const ActionsMenuRenderer = wrap(ActionsMenuRendererWC);
-
-const BooleanRenderer = wrap(BooleanRendererWC);
-
-const EditableRenderer = wrap(EditableRendererWC);
-
-const SelectRenderer = wrap(SelectRendererWC);
-
-const StatusPillRenderer = wrap(StatusPillRendererWC);
-
-const AgTextFieldRenderer = wrap(AgTextFieldRendererWC);
-
-const AgTextRenderer = wrap(AgTextRendererWC);
-
-const DateEditor = wrap(DateEditorWC);
-
-const MultiselectEditor = wrap(MultiselectEditorWC);
-
-const NumberEditor = wrap(NumberEditorWC);
-
-const SelectEditor = wrap(SelectEditorWC);
-
-const StringEditor = wrap(StringEditorWC);
-
-const GridProColumn = wrap(GridProColumnWC);
-
-const GridProClientSideDatasource = wrap(GridProClientSideDatasourceWC, {
-  events: {
-    onBaseDatasourceError: 'base-datasource-error',
-    onDatasourceError: 'datasource-error',
-    onBaseDatasourceConnected: 'base-datasource-connected',
-    onDatasourceLoadingFinished: 'datasource-loading-finished',
-    onDatasourceNoDataAvailable: 'datasource-no-data-available',
-    onDatasourceDataChanged: 'datasource-data-changed',
-    onDatasourceInitialize: 'datasource-initialize',
-    onDatasourceDestroy: 'datasource-destroy',
-    onDatasourceDataCleared: 'datasource-data-cleared',
-    onDatasourceSchemaUpdated: 'datasource-schema-updated',
-    onDatasourceFiltersRestored: 'datasource-filters-restored',
-    onDatasourceDataLoaded: 'datasource-data-loaded',
-    onDatasourceLoadingStarted: 'datasource-loading-started',
-    onDatasourceMoreDataAvailable: 'datasource-more-data-available',
-    onDatasourceReady: 'datasource-ready',
-    onDatasourceInit: 'datasource-init',
-    onMoreRowsChanged: 'more-rows-changed',
-    onDatasourceSizeChanged: 'datasource-size-changed',
-  },
-});
-
-const GridProServerSideDatasource = wrap(GridProServerSideDatasourceWC, {
-  events: {
-    onBaseDatasourceError: 'base-datasource-error',
-    onDatasourceError: 'datasource-error',
-    onBaseDatasourceConnected: 'base-datasource-connected',
-    onDatasourceLoadingFinished: 'datasource-loading-finished',
-    onDatasourceNoDataAvailable: 'datasource-no-data-available',
-    onDatasourceDataChanged: 'datasource-data-changed',
-    onCacheFilterConfig: 'cache-filter-config',
-    onRefreshServerSide: 'refresh-server-side',
-    onSetServerSideDatasource: 'set-server-side-datasource',
-    onDatasourceLoadingStarted: 'datasource-loading-started',
-    onAddGridCssClass: 'add-grid-css-class',
-    onRemoveGridCssClass: 'remove-grid-css-class',
-    onDatasourceInitialize: 'datasource-initialize',
-    onDatasourceInit: 'datasource-init',
-    onDatasourceSchemaUpdated: 'datasource-schema-updated',
-    onDatasourceFiltersRestored: 'datasource-filters-restored',
-    onDatasourceDataCleared: 'datasource-data-cleared',
-    onApplyServerSideTransaction: 'apply-server-side-transaction',
-    onDatasourceReady: 'datasource-ready',
-  },
-});
-
-const GridProGenesisDatasource = wrap(GridProGenesisDatasourceWC, {
-  events: {
-    onBaseDatasourceError: 'base-datasource-error',
-    onDatasourceError: 'datasource-error',
-    onBaseDatasourceConnected: 'base-datasource-connected',
-    onDatasourceLoadingFinished: 'datasource-loading-finished',
-    onDatasourceNoDataAvailable: 'datasource-no-data-available',
-    onDatasourceDataChanged: 'datasource-data-changed',
-    onDatasourceInitialize: 'datasource-initialize',
-    onDatasourceDestroy: 'datasource-destroy',
-    onDatasourceDataCleared: 'datasource-data-cleared',
-    onDatasourceSchemaUpdated: 'datasource-schema-updated',
-    onDatasourceFiltersRestored: 'datasource-filters-restored',
-    onDatasourceDataLoaded: 'datasource-data-loaded',
-    onDatasourceLoadingStarted: 'datasource-loading-started',
-    onDatasourceMoreDataAvailable: 'datasource-more-data-available',
-    onDatasourceReady: 'datasource-ready',
-    onDatasourceInit: 'datasource-init',
-    onMoreRowsChanged: 'more-rows-changed',
-    onDatasourceSizeChanged: 'datasource-size-changed',
-  },
-});
-
-const MulticolumnDropdown = wrap(MulticolumnDropdownWC);
+const GridProBeta = React.forwardRef(function GridProBeta(props, ref) {
+  const { onGridReady, onOnGridReady, onGridready, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onGridReadyRef = React.useRef(onGridReady);
+  _onGridReadyRef.current = onGridReady;
+  const _onOnGridReadyRef = React.useRef(onOnGridReady);
+  _onOnGridReadyRef.current = onOnGridReady;
+  const _onGridreadyRef = React.useRef(onGridready);
+  _onGridreadyRef.current = onGridready;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onGridReadyFn = (e) => _onGridReadyRef.current?.(e);
+    el.addEventListener('gridReady', _onGridReadyFn);
+    const _onOnGridReadyFn = (e) => _onOnGridReadyRef.current?.(e);
+    el.addEventListener('onGridReady', _onOnGridReadyFn);
+    const _onGridreadyFn = (e) => _onGridreadyRef.current?.(e);
+    el.addEventListener('gridready', _onGridreadyFn);
+    return () => {
+      el.removeEventListener('gridReady', _onGridReadyFn);
+      el.removeEventListener('onGridReady', _onOnGridReadyFn);
+      el.removeEventListener('gridready', _onGridreadyFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(GridProBetaWC) ?? '%%prefix%%-grid-pro', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
+const GridPro = React.forwardRef(function GridPro(props, ref) {
+  const { onGridReady, onOnGridReady, onGridready, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onGridReadyRef = React.useRef(onGridReady);
+  _onGridReadyRef.current = onGridReady;
+  const _onOnGridReadyRef = React.useRef(onOnGridReady);
+  _onOnGridReadyRef.current = onOnGridReady;
+  const _onGridreadyRef = React.useRef(onGridready);
+  _onGridreadyRef.current = onGridready;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onGridReadyFn = (e) => _onGridReadyRef.current?.(e);
+    el.addEventListener('gridReady', _onGridReadyFn);
+    const _onOnGridReadyFn = (e) => _onOnGridReadyRef.current?.(e);
+    el.addEventListener('onGridReady', _onOnGridReadyFn);
+    const _onGridreadyFn = (e) => _onGridreadyRef.current?.(e);
+    el.addEventListener('gridready', _onGridreadyFn);
+    return () => {
+      el.removeEventListener('gridReady', _onGridReadyFn);
+      el.removeEventListener('onGridReady', _onOnGridReadyFn);
+      el.removeEventListener('gridready', _onGridreadyFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(GridProWC) ?? '%%prefix%%-grid-pro', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
+const GridProCell = React.forwardRef(function GridProCell(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(GridProCellWC) ?? 'grid-pro-cell', { ...rest, ref }, children);
+});
+
+const DateEditor = React.forwardRef(function DateEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DateEditorWC) ?? '%%prefix%%-date-editor', { ...rest, ref }, children);
+});
+
+const MultiselectEditor = React.forwardRef(function MultiselectEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(MultiselectEditorWC) ?? '%%prefix%%-multiselect-editor', { ...rest, ref }, children);
+});
+
+const NumberEditor = React.forwardRef(function NumberEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(NumberEditorWC) ?? '%%prefix%%-number-editor', { ...rest, ref }, children);
+});
+
+const SelectEditor = React.forwardRef(function SelectEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SelectEditorWC) ?? '%%prefix%%-select-editor', { ...rest, ref }, children);
+});
+
+const StringEditor = React.forwardRef(function StringEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StringEditorWC) ?? '%%prefix%%-string-editor', { ...rest, ref }, children);
+});
+
+const ActionRenderer = React.forwardRef(function ActionRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ActionRendererWC) ?? '%%prefix%%-grid-pro-action-renderer', { ...rest, ref }, children);
+});
+
+const ActionsMenuRenderer = React.forwardRef(function ActionsMenuRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(ActionsMenuRendererWC) ?? '%%prefix%%-grid-pro-actions-menu-renderer', { ...rest, ref }, children);
+});
+
+const BooleanRenderer = React.forwardRef(function BooleanRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BooleanRendererWC) ?? '%%prefix%%-boolean-renderer', { ...rest, ref }, children);
+});
+
+const EditableRenderer = React.forwardRef(function EditableRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(EditableRendererWC) ?? '%%prefix%%-editable-renderer', { ...rest, ref }, children);
+});
+
+const SelectRenderer = React.forwardRef(function SelectRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SelectRendererWC) ?? '%%prefix%%-select-renderer', { ...rest, ref }, children);
+});
+
+const StatusPillRenderer = React.forwardRef(function StatusPillRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StatusPillRendererWC) ?? '%%prefix%%-status-pill-renderer', { ...rest, ref }, children);
+});
+
+const AgTextFieldRenderer = React.forwardRef(function AgTextFieldRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AgTextFieldRendererWC) ?? '%%prefix%%-grid-text-field-renderer', { ...rest, ref }, children);
+});
+
+const AgTextRenderer = React.forwardRef(function AgTextRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(AgTextRendererWC) ?? '%%prefix%%-grid-text-renderer', { ...rest, ref }, children);
+});
+
+const GridProColumn = React.forwardRef(function GridProColumn(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(GridProColumnWC) ?? 'grid-pro-column', { ...rest, ref }, children);
+});
+
+const GridProClientSideDatasource = React.forwardRef(function GridProClientSideDatasource(props, ref) {
+  const { onBaseDatasourceError, onDatasourceError, onBaseDatasourceConnected, onDatasourceLoadingFinished, onDatasourceNoDataAvailable, onDatasourceDataChanged, onDatasourceInitialize, onDatasourceDestroy, onDatasourceDataCleared, onDatasourceSchemaUpdated, onDatasourceFiltersRestored, onDatasourceDataLoaded, onDatasourceLoadingStarted, onDatasourceMoreDataAvailable, onDatasourceReady, onDatasourceInit, onMoreRowsChanged, onDatasourceSizeChanged, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onBaseDatasourceErrorRef = React.useRef(onBaseDatasourceError);
+  _onBaseDatasourceErrorRef.current = onBaseDatasourceError;
+  const _onDatasourceErrorRef = React.useRef(onDatasourceError);
+  _onDatasourceErrorRef.current = onDatasourceError;
+  const _onBaseDatasourceConnectedRef = React.useRef(onBaseDatasourceConnected);
+  _onBaseDatasourceConnectedRef.current = onBaseDatasourceConnected;
+  const _onDatasourceLoadingFinishedRef = React.useRef(onDatasourceLoadingFinished);
+  _onDatasourceLoadingFinishedRef.current = onDatasourceLoadingFinished;
+  const _onDatasourceNoDataAvailableRef = React.useRef(onDatasourceNoDataAvailable);
+  _onDatasourceNoDataAvailableRef.current = onDatasourceNoDataAvailable;
+  const _onDatasourceDataChangedRef = React.useRef(onDatasourceDataChanged);
+  _onDatasourceDataChangedRef.current = onDatasourceDataChanged;
+  const _onDatasourceInitializeRef = React.useRef(onDatasourceInitialize);
+  _onDatasourceInitializeRef.current = onDatasourceInitialize;
+  const _onDatasourceDestroyRef = React.useRef(onDatasourceDestroy);
+  _onDatasourceDestroyRef.current = onDatasourceDestroy;
+  const _onDatasourceDataClearedRef = React.useRef(onDatasourceDataCleared);
+  _onDatasourceDataClearedRef.current = onDatasourceDataCleared;
+  const _onDatasourceSchemaUpdatedRef = React.useRef(onDatasourceSchemaUpdated);
+  _onDatasourceSchemaUpdatedRef.current = onDatasourceSchemaUpdated;
+  const _onDatasourceFiltersRestoredRef = React.useRef(onDatasourceFiltersRestored);
+  _onDatasourceFiltersRestoredRef.current = onDatasourceFiltersRestored;
+  const _onDatasourceDataLoadedRef = React.useRef(onDatasourceDataLoaded);
+  _onDatasourceDataLoadedRef.current = onDatasourceDataLoaded;
+  const _onDatasourceLoadingStartedRef = React.useRef(onDatasourceLoadingStarted);
+  _onDatasourceLoadingStartedRef.current = onDatasourceLoadingStarted;
+  const _onDatasourceMoreDataAvailableRef = React.useRef(onDatasourceMoreDataAvailable);
+  _onDatasourceMoreDataAvailableRef.current = onDatasourceMoreDataAvailable;
+  const _onDatasourceReadyRef = React.useRef(onDatasourceReady);
+  _onDatasourceReadyRef.current = onDatasourceReady;
+  const _onDatasourceInitRef = React.useRef(onDatasourceInit);
+  _onDatasourceInitRef.current = onDatasourceInit;
+  const _onMoreRowsChangedRef = React.useRef(onMoreRowsChanged);
+  _onMoreRowsChangedRef.current = onMoreRowsChanged;
+  const _onDatasourceSizeChangedRef = React.useRef(onDatasourceSizeChanged);
+  _onDatasourceSizeChangedRef.current = onDatasourceSizeChanged;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onBaseDatasourceErrorFn = (e) => _onBaseDatasourceErrorRef.current?.(e);
+    el.addEventListener('base-datasource-error', _onBaseDatasourceErrorFn);
+    const _onDatasourceErrorFn = (e) => _onDatasourceErrorRef.current?.(e);
+    el.addEventListener('datasource-error', _onDatasourceErrorFn);
+    const _onBaseDatasourceConnectedFn = (e) => _onBaseDatasourceConnectedRef.current?.(e);
+    el.addEventListener('base-datasource-connected', _onBaseDatasourceConnectedFn);
+    const _onDatasourceLoadingFinishedFn = (e) => _onDatasourceLoadingFinishedRef.current?.(e);
+    el.addEventListener('datasource-loading-finished', _onDatasourceLoadingFinishedFn);
+    const _onDatasourceNoDataAvailableFn = (e) => _onDatasourceNoDataAvailableRef.current?.(e);
+    el.addEventListener('datasource-no-data-available', _onDatasourceNoDataAvailableFn);
+    const _onDatasourceDataChangedFn = (e) => _onDatasourceDataChangedRef.current?.(e);
+    el.addEventListener('datasource-data-changed', _onDatasourceDataChangedFn);
+    const _onDatasourceInitializeFn = (e) => _onDatasourceInitializeRef.current?.(e);
+    el.addEventListener('datasource-initialize', _onDatasourceInitializeFn);
+    const _onDatasourceDestroyFn = (e) => _onDatasourceDestroyRef.current?.(e);
+    el.addEventListener('datasource-destroy', _onDatasourceDestroyFn);
+    const _onDatasourceDataClearedFn = (e) => _onDatasourceDataClearedRef.current?.(e);
+    el.addEventListener('datasource-data-cleared', _onDatasourceDataClearedFn);
+    const _onDatasourceSchemaUpdatedFn = (e) => _onDatasourceSchemaUpdatedRef.current?.(e);
+    el.addEventListener('datasource-schema-updated', _onDatasourceSchemaUpdatedFn);
+    const _onDatasourceFiltersRestoredFn = (e) => _onDatasourceFiltersRestoredRef.current?.(e);
+    el.addEventListener('datasource-filters-restored', _onDatasourceFiltersRestoredFn);
+    const _onDatasourceDataLoadedFn = (e) => _onDatasourceDataLoadedRef.current?.(e);
+    el.addEventListener('datasource-data-loaded', _onDatasourceDataLoadedFn);
+    const _onDatasourceLoadingStartedFn = (e) => _onDatasourceLoadingStartedRef.current?.(e);
+    el.addEventListener('datasource-loading-started', _onDatasourceLoadingStartedFn);
+    const _onDatasourceMoreDataAvailableFn = (e) => _onDatasourceMoreDataAvailableRef.current?.(e);
+    el.addEventListener('datasource-more-data-available', _onDatasourceMoreDataAvailableFn);
+    const _onDatasourceReadyFn = (e) => _onDatasourceReadyRef.current?.(e);
+    el.addEventListener('datasource-ready', _onDatasourceReadyFn);
+    const _onDatasourceInitFn = (e) => _onDatasourceInitRef.current?.(e);
+    el.addEventListener('datasource-init', _onDatasourceInitFn);
+    const _onMoreRowsChangedFn = (e) => _onMoreRowsChangedRef.current?.(e);
+    el.addEventListener('more-rows-changed', _onMoreRowsChangedFn);
+    const _onDatasourceSizeChangedFn = (e) => _onDatasourceSizeChangedRef.current?.(e);
+    el.addEventListener('datasource-size-changed', _onDatasourceSizeChangedFn);
+    return () => {
+      el.removeEventListener('base-datasource-error', _onBaseDatasourceErrorFn);
+      el.removeEventListener('datasource-error', _onDatasourceErrorFn);
+      el.removeEventListener('base-datasource-connected', _onBaseDatasourceConnectedFn);
+      el.removeEventListener('datasource-loading-finished', _onDatasourceLoadingFinishedFn);
+      el.removeEventListener('datasource-no-data-available', _onDatasourceNoDataAvailableFn);
+      el.removeEventListener('datasource-data-changed', _onDatasourceDataChangedFn);
+      el.removeEventListener('datasource-initialize', _onDatasourceInitializeFn);
+      el.removeEventListener('datasource-destroy', _onDatasourceDestroyFn);
+      el.removeEventListener('datasource-data-cleared', _onDatasourceDataClearedFn);
+      el.removeEventListener('datasource-schema-updated', _onDatasourceSchemaUpdatedFn);
+      el.removeEventListener('datasource-filters-restored', _onDatasourceFiltersRestoredFn);
+      el.removeEventListener('datasource-data-loaded', _onDatasourceDataLoadedFn);
+      el.removeEventListener('datasource-loading-started', _onDatasourceLoadingStartedFn);
+      el.removeEventListener('datasource-more-data-available', _onDatasourceMoreDataAvailableFn);
+      el.removeEventListener('datasource-ready', _onDatasourceReadyFn);
+      el.removeEventListener('datasource-init', _onDatasourceInitFn);
+      el.removeEventListener('more-rows-changed', _onMoreRowsChangedFn);
+      el.removeEventListener('datasource-size-changed', _onDatasourceSizeChangedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(GridProClientSideDatasourceWC) ?? 'grid-pro-client-side-datasource', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
+const GridProServerSideDatasource = React.forwardRef(function GridProServerSideDatasource(props, ref) {
+  const { onBaseDatasourceError, onDatasourceError, onBaseDatasourceConnected, onDatasourceLoadingFinished, onDatasourceNoDataAvailable, onDatasourceDataChanged, onCacheFilterConfig, onRefreshServerSide, onSetServerSideDatasource, onDatasourceLoadingStarted, onAddGridCssClass, onRemoveGridCssClass, onDatasourceInitialize, onDatasourceInit, onDatasourceSchemaUpdated, onDatasourceFiltersRestored, onDatasourceDataCleared, onApplyServerSideTransaction, onDatasourceReady, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onBaseDatasourceErrorRef = React.useRef(onBaseDatasourceError);
+  _onBaseDatasourceErrorRef.current = onBaseDatasourceError;
+  const _onDatasourceErrorRef = React.useRef(onDatasourceError);
+  _onDatasourceErrorRef.current = onDatasourceError;
+  const _onBaseDatasourceConnectedRef = React.useRef(onBaseDatasourceConnected);
+  _onBaseDatasourceConnectedRef.current = onBaseDatasourceConnected;
+  const _onDatasourceLoadingFinishedRef = React.useRef(onDatasourceLoadingFinished);
+  _onDatasourceLoadingFinishedRef.current = onDatasourceLoadingFinished;
+  const _onDatasourceNoDataAvailableRef = React.useRef(onDatasourceNoDataAvailable);
+  _onDatasourceNoDataAvailableRef.current = onDatasourceNoDataAvailable;
+  const _onDatasourceDataChangedRef = React.useRef(onDatasourceDataChanged);
+  _onDatasourceDataChangedRef.current = onDatasourceDataChanged;
+  const _onCacheFilterConfigRef = React.useRef(onCacheFilterConfig);
+  _onCacheFilterConfigRef.current = onCacheFilterConfig;
+  const _onRefreshServerSideRef = React.useRef(onRefreshServerSide);
+  _onRefreshServerSideRef.current = onRefreshServerSide;
+  const _onSetServerSideDatasourceRef = React.useRef(onSetServerSideDatasource);
+  _onSetServerSideDatasourceRef.current = onSetServerSideDatasource;
+  const _onDatasourceLoadingStartedRef = React.useRef(onDatasourceLoadingStarted);
+  _onDatasourceLoadingStartedRef.current = onDatasourceLoadingStarted;
+  const _onAddGridCssClassRef = React.useRef(onAddGridCssClass);
+  _onAddGridCssClassRef.current = onAddGridCssClass;
+  const _onRemoveGridCssClassRef = React.useRef(onRemoveGridCssClass);
+  _onRemoveGridCssClassRef.current = onRemoveGridCssClass;
+  const _onDatasourceInitializeRef = React.useRef(onDatasourceInitialize);
+  _onDatasourceInitializeRef.current = onDatasourceInitialize;
+  const _onDatasourceInitRef = React.useRef(onDatasourceInit);
+  _onDatasourceInitRef.current = onDatasourceInit;
+  const _onDatasourceSchemaUpdatedRef = React.useRef(onDatasourceSchemaUpdated);
+  _onDatasourceSchemaUpdatedRef.current = onDatasourceSchemaUpdated;
+  const _onDatasourceFiltersRestoredRef = React.useRef(onDatasourceFiltersRestored);
+  _onDatasourceFiltersRestoredRef.current = onDatasourceFiltersRestored;
+  const _onDatasourceDataClearedRef = React.useRef(onDatasourceDataCleared);
+  _onDatasourceDataClearedRef.current = onDatasourceDataCleared;
+  const _onApplyServerSideTransactionRef = React.useRef(onApplyServerSideTransaction);
+  _onApplyServerSideTransactionRef.current = onApplyServerSideTransaction;
+  const _onDatasourceReadyRef = React.useRef(onDatasourceReady);
+  _onDatasourceReadyRef.current = onDatasourceReady;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onBaseDatasourceErrorFn = (e) => _onBaseDatasourceErrorRef.current?.(e);
+    el.addEventListener('base-datasource-error', _onBaseDatasourceErrorFn);
+    const _onDatasourceErrorFn = (e) => _onDatasourceErrorRef.current?.(e);
+    el.addEventListener('datasource-error', _onDatasourceErrorFn);
+    const _onBaseDatasourceConnectedFn = (e) => _onBaseDatasourceConnectedRef.current?.(e);
+    el.addEventListener('base-datasource-connected', _onBaseDatasourceConnectedFn);
+    const _onDatasourceLoadingFinishedFn = (e) => _onDatasourceLoadingFinishedRef.current?.(e);
+    el.addEventListener('datasource-loading-finished', _onDatasourceLoadingFinishedFn);
+    const _onDatasourceNoDataAvailableFn = (e) => _onDatasourceNoDataAvailableRef.current?.(e);
+    el.addEventListener('datasource-no-data-available', _onDatasourceNoDataAvailableFn);
+    const _onDatasourceDataChangedFn = (e) => _onDatasourceDataChangedRef.current?.(e);
+    el.addEventListener('datasource-data-changed', _onDatasourceDataChangedFn);
+    const _onCacheFilterConfigFn = (e) => _onCacheFilterConfigRef.current?.(e);
+    el.addEventListener('cache-filter-config', _onCacheFilterConfigFn);
+    const _onRefreshServerSideFn = (e) => _onRefreshServerSideRef.current?.(e);
+    el.addEventListener('refresh-server-side', _onRefreshServerSideFn);
+    const _onSetServerSideDatasourceFn = (e) => _onSetServerSideDatasourceRef.current?.(e);
+    el.addEventListener('set-server-side-datasource', _onSetServerSideDatasourceFn);
+    const _onDatasourceLoadingStartedFn = (e) => _onDatasourceLoadingStartedRef.current?.(e);
+    el.addEventListener('datasource-loading-started', _onDatasourceLoadingStartedFn);
+    const _onAddGridCssClassFn = (e) => _onAddGridCssClassRef.current?.(e);
+    el.addEventListener('add-grid-css-class', _onAddGridCssClassFn);
+    const _onRemoveGridCssClassFn = (e) => _onRemoveGridCssClassRef.current?.(e);
+    el.addEventListener('remove-grid-css-class', _onRemoveGridCssClassFn);
+    const _onDatasourceInitializeFn = (e) => _onDatasourceInitializeRef.current?.(e);
+    el.addEventListener('datasource-initialize', _onDatasourceInitializeFn);
+    const _onDatasourceInitFn = (e) => _onDatasourceInitRef.current?.(e);
+    el.addEventListener('datasource-init', _onDatasourceInitFn);
+    const _onDatasourceSchemaUpdatedFn = (e) => _onDatasourceSchemaUpdatedRef.current?.(e);
+    el.addEventListener('datasource-schema-updated', _onDatasourceSchemaUpdatedFn);
+    const _onDatasourceFiltersRestoredFn = (e) => _onDatasourceFiltersRestoredRef.current?.(e);
+    el.addEventListener('datasource-filters-restored', _onDatasourceFiltersRestoredFn);
+    const _onDatasourceDataClearedFn = (e) => _onDatasourceDataClearedRef.current?.(e);
+    el.addEventListener('datasource-data-cleared', _onDatasourceDataClearedFn);
+    const _onApplyServerSideTransactionFn = (e) => _onApplyServerSideTransactionRef.current?.(e);
+    el.addEventListener('apply-server-side-transaction', _onApplyServerSideTransactionFn);
+    const _onDatasourceReadyFn = (e) => _onDatasourceReadyRef.current?.(e);
+    el.addEventListener('datasource-ready', _onDatasourceReadyFn);
+    return () => {
+      el.removeEventListener('base-datasource-error', _onBaseDatasourceErrorFn);
+      el.removeEventListener('datasource-error', _onDatasourceErrorFn);
+      el.removeEventListener('base-datasource-connected', _onBaseDatasourceConnectedFn);
+      el.removeEventListener('datasource-loading-finished', _onDatasourceLoadingFinishedFn);
+      el.removeEventListener('datasource-no-data-available', _onDatasourceNoDataAvailableFn);
+      el.removeEventListener('datasource-data-changed', _onDatasourceDataChangedFn);
+      el.removeEventListener('cache-filter-config', _onCacheFilterConfigFn);
+      el.removeEventListener('refresh-server-side', _onRefreshServerSideFn);
+      el.removeEventListener('set-server-side-datasource', _onSetServerSideDatasourceFn);
+      el.removeEventListener('datasource-loading-started', _onDatasourceLoadingStartedFn);
+      el.removeEventListener('add-grid-css-class', _onAddGridCssClassFn);
+      el.removeEventListener('remove-grid-css-class', _onRemoveGridCssClassFn);
+      el.removeEventListener('datasource-initialize', _onDatasourceInitializeFn);
+      el.removeEventListener('datasource-init', _onDatasourceInitFn);
+      el.removeEventListener('datasource-schema-updated', _onDatasourceSchemaUpdatedFn);
+      el.removeEventListener('datasource-filters-restored', _onDatasourceFiltersRestoredFn);
+      el.removeEventListener('datasource-data-cleared', _onDatasourceDataClearedFn);
+      el.removeEventListener('apply-server-side-transaction', _onApplyServerSideTransactionFn);
+      el.removeEventListener('datasource-ready', _onDatasourceReadyFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(GridProServerSideDatasourceWC) ?? 'grid-pro-server-side-datasource', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
+const GridProGenesisDatasource = React.forwardRef(function GridProGenesisDatasource(props, ref) {
+  const { onBaseDatasourceError, onDatasourceError, onBaseDatasourceConnected, onDatasourceLoadingFinished, onDatasourceNoDataAvailable, onDatasourceDataChanged, onDatasourceInitialize, onDatasourceDestroy, onDatasourceDataCleared, onDatasourceSchemaUpdated, onDatasourceFiltersRestored, onDatasourceDataLoaded, onDatasourceLoadingStarted, onDatasourceMoreDataAvailable, onDatasourceReady, onDatasourceInit, onMoreRowsChanged, onDatasourceSizeChanged, children, ...rest } = props;
+  const _innerRef = React.useRef(null);
+  const _onBaseDatasourceErrorRef = React.useRef(onBaseDatasourceError);
+  _onBaseDatasourceErrorRef.current = onBaseDatasourceError;
+  const _onDatasourceErrorRef = React.useRef(onDatasourceError);
+  _onDatasourceErrorRef.current = onDatasourceError;
+  const _onBaseDatasourceConnectedRef = React.useRef(onBaseDatasourceConnected);
+  _onBaseDatasourceConnectedRef.current = onBaseDatasourceConnected;
+  const _onDatasourceLoadingFinishedRef = React.useRef(onDatasourceLoadingFinished);
+  _onDatasourceLoadingFinishedRef.current = onDatasourceLoadingFinished;
+  const _onDatasourceNoDataAvailableRef = React.useRef(onDatasourceNoDataAvailable);
+  _onDatasourceNoDataAvailableRef.current = onDatasourceNoDataAvailable;
+  const _onDatasourceDataChangedRef = React.useRef(onDatasourceDataChanged);
+  _onDatasourceDataChangedRef.current = onDatasourceDataChanged;
+  const _onDatasourceInitializeRef = React.useRef(onDatasourceInitialize);
+  _onDatasourceInitializeRef.current = onDatasourceInitialize;
+  const _onDatasourceDestroyRef = React.useRef(onDatasourceDestroy);
+  _onDatasourceDestroyRef.current = onDatasourceDestroy;
+  const _onDatasourceDataClearedRef = React.useRef(onDatasourceDataCleared);
+  _onDatasourceDataClearedRef.current = onDatasourceDataCleared;
+  const _onDatasourceSchemaUpdatedRef = React.useRef(onDatasourceSchemaUpdated);
+  _onDatasourceSchemaUpdatedRef.current = onDatasourceSchemaUpdated;
+  const _onDatasourceFiltersRestoredRef = React.useRef(onDatasourceFiltersRestored);
+  _onDatasourceFiltersRestoredRef.current = onDatasourceFiltersRestored;
+  const _onDatasourceDataLoadedRef = React.useRef(onDatasourceDataLoaded);
+  _onDatasourceDataLoadedRef.current = onDatasourceDataLoaded;
+  const _onDatasourceLoadingStartedRef = React.useRef(onDatasourceLoadingStarted);
+  _onDatasourceLoadingStartedRef.current = onDatasourceLoadingStarted;
+  const _onDatasourceMoreDataAvailableRef = React.useRef(onDatasourceMoreDataAvailable);
+  _onDatasourceMoreDataAvailableRef.current = onDatasourceMoreDataAvailable;
+  const _onDatasourceReadyRef = React.useRef(onDatasourceReady);
+  _onDatasourceReadyRef.current = onDatasourceReady;
+  const _onDatasourceInitRef = React.useRef(onDatasourceInit);
+  _onDatasourceInitRef.current = onDatasourceInit;
+  const _onMoreRowsChangedRef = React.useRef(onMoreRowsChanged);
+  _onMoreRowsChangedRef.current = onMoreRowsChanged;
+  const _onDatasourceSizeChangedRef = React.useRef(onDatasourceSizeChanged);
+  _onDatasourceSizeChangedRef.current = onDatasourceSizeChanged;
+  React.useLayoutEffect(() => {
+    const el = _innerRef.current;
+    if (!el) return;
+    const _onBaseDatasourceErrorFn = (e) => _onBaseDatasourceErrorRef.current?.(e);
+    el.addEventListener('base-datasource-error', _onBaseDatasourceErrorFn);
+    const _onDatasourceErrorFn = (e) => _onDatasourceErrorRef.current?.(e);
+    el.addEventListener('datasource-error', _onDatasourceErrorFn);
+    const _onBaseDatasourceConnectedFn = (e) => _onBaseDatasourceConnectedRef.current?.(e);
+    el.addEventListener('base-datasource-connected', _onBaseDatasourceConnectedFn);
+    const _onDatasourceLoadingFinishedFn = (e) => _onDatasourceLoadingFinishedRef.current?.(e);
+    el.addEventListener('datasource-loading-finished', _onDatasourceLoadingFinishedFn);
+    const _onDatasourceNoDataAvailableFn = (e) => _onDatasourceNoDataAvailableRef.current?.(e);
+    el.addEventListener('datasource-no-data-available', _onDatasourceNoDataAvailableFn);
+    const _onDatasourceDataChangedFn = (e) => _onDatasourceDataChangedRef.current?.(e);
+    el.addEventListener('datasource-data-changed', _onDatasourceDataChangedFn);
+    const _onDatasourceInitializeFn = (e) => _onDatasourceInitializeRef.current?.(e);
+    el.addEventListener('datasource-initialize', _onDatasourceInitializeFn);
+    const _onDatasourceDestroyFn = (e) => _onDatasourceDestroyRef.current?.(e);
+    el.addEventListener('datasource-destroy', _onDatasourceDestroyFn);
+    const _onDatasourceDataClearedFn = (e) => _onDatasourceDataClearedRef.current?.(e);
+    el.addEventListener('datasource-data-cleared', _onDatasourceDataClearedFn);
+    const _onDatasourceSchemaUpdatedFn = (e) => _onDatasourceSchemaUpdatedRef.current?.(e);
+    el.addEventListener('datasource-schema-updated', _onDatasourceSchemaUpdatedFn);
+    const _onDatasourceFiltersRestoredFn = (e) => _onDatasourceFiltersRestoredRef.current?.(e);
+    el.addEventListener('datasource-filters-restored', _onDatasourceFiltersRestoredFn);
+    const _onDatasourceDataLoadedFn = (e) => _onDatasourceDataLoadedRef.current?.(e);
+    el.addEventListener('datasource-data-loaded', _onDatasourceDataLoadedFn);
+    const _onDatasourceLoadingStartedFn = (e) => _onDatasourceLoadingStartedRef.current?.(e);
+    el.addEventListener('datasource-loading-started', _onDatasourceLoadingStartedFn);
+    const _onDatasourceMoreDataAvailableFn = (e) => _onDatasourceMoreDataAvailableRef.current?.(e);
+    el.addEventListener('datasource-more-data-available', _onDatasourceMoreDataAvailableFn);
+    const _onDatasourceReadyFn = (e) => _onDatasourceReadyRef.current?.(e);
+    el.addEventListener('datasource-ready', _onDatasourceReadyFn);
+    const _onDatasourceInitFn = (e) => _onDatasourceInitRef.current?.(e);
+    el.addEventListener('datasource-init', _onDatasourceInitFn);
+    const _onMoreRowsChangedFn = (e) => _onMoreRowsChangedRef.current?.(e);
+    el.addEventListener('more-rows-changed', _onMoreRowsChangedFn);
+    const _onDatasourceSizeChangedFn = (e) => _onDatasourceSizeChangedRef.current?.(e);
+    el.addEventListener('datasource-size-changed', _onDatasourceSizeChangedFn);
+    return () => {
+      el.removeEventListener('base-datasource-error', _onBaseDatasourceErrorFn);
+      el.removeEventListener('datasource-error', _onDatasourceErrorFn);
+      el.removeEventListener('base-datasource-connected', _onBaseDatasourceConnectedFn);
+      el.removeEventListener('datasource-loading-finished', _onDatasourceLoadingFinishedFn);
+      el.removeEventListener('datasource-no-data-available', _onDatasourceNoDataAvailableFn);
+      el.removeEventListener('datasource-data-changed', _onDatasourceDataChangedFn);
+      el.removeEventListener('datasource-initialize', _onDatasourceInitializeFn);
+      el.removeEventListener('datasource-destroy', _onDatasourceDestroyFn);
+      el.removeEventListener('datasource-data-cleared', _onDatasourceDataClearedFn);
+      el.removeEventListener('datasource-schema-updated', _onDatasourceSchemaUpdatedFn);
+      el.removeEventListener('datasource-filters-restored', _onDatasourceFiltersRestoredFn);
+      el.removeEventListener('datasource-data-loaded', _onDatasourceDataLoadedFn);
+      el.removeEventListener('datasource-loading-started', _onDatasourceLoadingStartedFn);
+      el.removeEventListener('datasource-more-data-available', _onDatasourceMoreDataAvailableFn);
+      el.removeEventListener('datasource-ready', _onDatasourceReadyFn);
+      el.removeEventListener('datasource-init', _onDatasourceInitFn);
+      el.removeEventListener('more-rows-changed', _onMoreRowsChangedFn);
+      el.removeEventListener('datasource-size-changed', _onDatasourceSizeChangedFn);
+    };
+  }, []);
+  return React.createElement(customElements.getName(GridProGenesisDatasourceWC) ?? 'grid-pro-genesis-datasource', { ...rest, ref: _mergeRefs(_innerRef, ref) }, children);
+});
+
+const MulticolumnDropdown = React.forwardRef(function MulticolumnDropdown(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(MulticolumnDropdownWC) ?? '%%prefix%%-multicolumn-dropdown', { ...rest, ref }, children);
+});
 
 module.exports = {
   GridProBeta,
   GridPro,
   GridProCell,
+  DateEditor,
+  MultiselectEditor,
+  NumberEditor,
+  SelectEditor,
+  StringEditor,
   ActionRenderer,
   ActionsMenuRenderer,
   BooleanRenderer,
@@ -161,11 +499,6 @@ module.exports = {
   StatusPillRenderer,
   AgTextFieldRenderer,
   AgTextRenderer,
-  DateEditor,
-  MultiselectEditor,
-  NumberEditor,
-  SelectEditor,
-  StringEditor,
   GridProColumn,
   GridProClientSideDatasource,
   GridProServerSideDatasource,