@genesislcap/grid-pro 14.424.1 → 14.426.0

package/dist/react.mjs

@@ -3,7 +3,6 @@
  * Generated from custom-elements manifest.
  */
 
-import { provideReactWrapper } from '@microsoft/fast-react-wrapper';
 import React from 'react';
 import { DateEditor as DateEditorWC } from './esm/cell-editors/date.editor.js';
 import { MultiselectEditor as MultiselectEditorWC } from './esm/cell-editors/multiselect.editor.js';
@@ -27,122 +26,456 @@ import { GridProGenesisDatasource as GridProGenesisDatasourceWC } from './esm/gr
 import { GridPro as GridProWC } from './esm/grid-pro.js';
 import { MulticolumnDropdown as MulticolumnDropdownWC } from './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;
+    }
+  };
+}
 
-export const GridProBeta = wrap(GridProBetaWC, {
-  events: {
-    onGridReady: 'gridReady',
-    onOnGridReady: 'onGridReady',
-    onGridready: 'gridready',
-  },
-});
-
-export const GridPro = wrap(GridProWC, {
-  events: {
-    onGridReady: 'gridReady',
-    onOnGridReady: 'onGridReady',
-    onGridready: 'gridready',
-  },
-});
-
-export const GridProCell = wrap(GridProCellWC);
-
-export const ActionRenderer = wrap(ActionRendererWC);
-
-export const ActionsMenuRenderer = wrap(ActionsMenuRendererWC);
-
-export const BooleanRenderer = wrap(BooleanRendererWC);
-
-export const EditableRenderer = wrap(EditableRendererWC);
-
-export const SelectRenderer = wrap(SelectRendererWC);
-
-export const StatusPillRenderer = wrap(StatusPillRendererWC);
-
-export const AgTextFieldRenderer = wrap(AgTextFieldRendererWC);
-
-export const AgTextRenderer = wrap(AgTextRendererWC);
-
-export const DateEditor = wrap(DateEditorWC);
-
-export const MultiselectEditor = wrap(MultiselectEditorWC);
-
-export const NumberEditor = wrap(NumberEditorWC);
-
-export const SelectEditor = wrap(SelectEditorWC);
-
-export const StringEditor = wrap(StringEditorWC);
-
-export const GridProColumn = wrap(GridProColumnWC);
-
-export 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',
-  },
-});
-
-export 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',
-  },
-});
-
-export 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',
-  },
-});
-
-export const MulticolumnDropdown = wrap(MulticolumnDropdownWC);
+export 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);
+});
+
+export 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);
+});
+
+export const GridProCell = React.forwardRef(function GridProCell(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(GridProCellWC) ?? 'grid-pro-cell', { ...rest, ref }, children);
+});
+
+export const DateEditor = React.forwardRef(function DateEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(DateEditorWC) ?? '%%prefix%%-date-editor', { ...rest, ref }, children);
+});
+
+export const MultiselectEditor = React.forwardRef(function MultiselectEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(MultiselectEditorWC) ?? '%%prefix%%-multiselect-editor', { ...rest, ref }, children);
+});
+
+export const NumberEditor = React.forwardRef(function NumberEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(NumberEditorWC) ?? '%%prefix%%-number-editor', { ...rest, ref }, children);
+});
+
+export const SelectEditor = React.forwardRef(function SelectEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SelectEditorWC) ?? '%%prefix%%-select-editor', { ...rest, ref }, children);
+});
+
+export const StringEditor = React.forwardRef(function StringEditor(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(StringEditorWC) ?? '%%prefix%%-string-editor', { ...rest, ref }, children);
+});
+
+export 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);
+});
+
+export 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);
+});
+
+export const BooleanRenderer = React.forwardRef(function BooleanRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(BooleanRendererWC) ?? '%%prefix%%-boolean-renderer', { ...rest, ref }, children);
+});
+
+export const EditableRenderer = React.forwardRef(function EditableRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(EditableRendererWC) ?? '%%prefix%%-editable-renderer', { ...rest, ref }, children);
+});
+
+export const SelectRenderer = React.forwardRef(function SelectRenderer(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(SelectRendererWC) ?? '%%prefix%%-select-renderer', { ...rest, ref }, children);
+});
+
+export 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);
+});
+
+export 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);
+});
+
+export 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);
+});
+
+export const GridProColumn = React.forwardRef(function GridProColumn(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(GridProColumnWC) ?? 'grid-pro-column', { ...rest, ref }, children);
+});
+
+export 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);
+});
+
+export 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);
+});
+
+export 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);
+});
+
+export const MulticolumnDropdown = React.forwardRef(function MulticolumnDropdown(props, ref) {
+  const { children, ...rest } = props;
+  return React.createElement(customElements.getName(MulticolumnDropdownWC) ?? '%%prefix%%-multicolumn-dropdown', { ...rest, ref }, children);
+});