@adaptabletools/adaptable-react-aggrid 13.0.0-canary.0 → 13.0.0-canary.10

package/base.css

@@ -2827,6 +2827,7 @@ input[type='number'].ab-Input:hover::-webkit-inner-spin-button:active {
 .ab-Datepicker-Overlay .rdp.rdp-with_weeknumber .rdp-row td:nth-child(8) {
       display: table-cell; }
 .ab-ToggleButton {
+  user-select: none;
   position: relative;
   display: inline-block;
   min-width: 40px;

package/index.css

@@ -3733,6 +3733,7 @@ input[type='number'].ab-Input:hover::-webkit-inner-spin-button:active {
       display: table-cell; }
 
 .ab-ToggleButton {
+  user-select: none;
   position: relative;
   display: inline-block;
   min-width: 40px;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adaptabletools/adaptable-react-aggrid",
-  "version": "13.0.0-canary.0",
+  "version": "13.0.0-canary.10",
   "description": "React version of AdapTable - the powerful AG Grid add-on that provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [],
   "license": "contact sales@adaptabletools.com for details",
@@ -19,13 +19,13 @@
   },
   "dependencies": {
     "tslib": "^2.3.0",
-    "@adaptabletools/adaptable": "13.0.0-canary.0"
+    "@adaptabletools/adaptable": "13.0.0-canary.10"
   },
   "peerDependencies": {
     "@ag-grid-community/core": ">=28.1.0",
     "@ag-grid-community/react": ">=28.1.0",
-    "react": "^16.8.0 || ^17.0.0",
-    "react-dom": "^16.8.0 || ^17.0.0"
+    "react": "^16.8.0 || ^17.0.0 || ^18.0.0",
+    "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0"
   },
   "engines": {
     "node": ">=6.0.0"

package/src/components/AdaptableReact.d.ts

@@ -8,6 +8,17 @@ export interface AdaptableReactProps extends React.HTMLProps<HTMLDivElement> {
         adaptableApi: AdaptableApi;
         gridOptions: GridOptions;
     }) => void;
+    /**
+     * Accepts any jsx content and an HTML node (container) and renders the jsx into the node.
+     *
+     * The return value should be a function that, when called, unmounts the jsx element/component from the node.
+     *
+     * This is useful when your app runs on React 18. Adaptable works with older versions of React as well, so we need to suport everyone.
+     * See details about React 18 changes at https://reactjs.org/blog/2022/03/08/react-18-upgrade-guide.html#updates-to-client-rendering-apis
+     *
+     * Providing this function and using React 18 APIs to render elements will help you avoid a runtime warning.
+     */
+    renderReactRoot?: (el: JSX.Element, container: HTMLElement) => VoidFunction;
 }
 declare const AdaptableReact: React.FunctionComponent<AdaptableReactProps>;
 export default AdaptableReact;

package/src/components/AdaptableReact.js

@@ -18,14 +18,14 @@ if (package_json_1.version !== version_1.default) {
 }
 const getRandomInt = (max) => Math.floor(Math.random() * Math.floor(max));
 const AdaptableReact = (_a) => {
-    var { adaptableOptions, gridOptions, onAdaptableReady } = _a, props = tslib_1.__rest(_a, ["adaptableOptions", "gridOptions", "onAdaptableReady"]);
+    var { adaptableOptions, gridOptions, onAdaptableReady, renderReactRoot } = _a, props = tslib_1.__rest(_a, ["adaptableOptions", "gridOptions", "onAdaptableReady", "renderReactRoot"]);
     const seedId = (0, react_1.useMemo)(() => `${getRandomInt(1000)}-${Date.now()}`, []);
     const adaptableContainerId = `adaptable-${seedId}`;
     const containerRef = (0, react_1.useMemo)(() => {
         let adaptableApi;
         return (node) => {
             if (node) {
-                agGrid_1.default.initInternal(Object.assign(Object.assign({}, adaptableOptions), { containerOptions: Object.assign(Object.assign({}, adaptableOptions.containerOptions), { adaptableContainer: node }), gridOptions: gridOptions || adaptableOptions.gridOptions }), { waitForAgGrid: true }).then((api) => {
+                agGrid_1.default.initInternal(Object.assign(Object.assign({}, adaptableOptions), { containerOptions: Object.assign(Object.assign({}, adaptableOptions.containerOptions), { adaptableContainer: node }), gridOptions: gridOptions || adaptableOptions.gridOptions }), { waitForAgGrid: true, renderReactRoot }).then((api) => {
                     adaptableApi = api;
                     (0, logger_1.LogAdaptableInfo)('AdaptableReady');
                     if (onAdaptableReady) {

package/src/index.d.ts

@@ -1,5 +1,5 @@
 export { default } from './components/AdaptableReact';
 export { AdaptableToolPanelAgGridComponent } from '@adaptabletools/adaptable/src/AdaptableComponents';
-export { AdaptableBooleanExpressionFunctions, AdaptableScalarExpressionFunctions, AdaptableAggregatedBooleanExpressionFunctions, AdaptableAggregatedScalarExpressionFunctions, AdaptableObservableExpressionFunctions, } from '@adaptabletools/adaptable/agGrid';
+export { AdaptableQL, AdaptableBooleanExpressionFunctions, AdaptableScalarExpressionFunctions, AdaptableAggregatedBooleanExpressionFunctions, AdaptableAggregatedScalarExpressionFunctions, AdaptableObservableExpressionFunctions, } from '@adaptabletools/adaptable/agGrid';
 export { AdaptableOptionsWizardView } from './components/AdaptableOptionsWizardView';
 export * from '@adaptabletools/adaptable/types';

package/src/index.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.AdaptableOptionsWizardView = exports.AdaptableObservableExpressionFunctions = exports.AdaptableAggregatedScalarExpressionFunctions = exports.AdaptableAggregatedBooleanExpressionFunctions = exports.AdaptableScalarExpressionFunctions = exports.AdaptableBooleanExpressionFunctions = exports.AdaptableToolPanelAgGridComponent = exports.default = void 0;
+exports.AdaptableOptionsWizardView = exports.AdaptableObservableExpressionFunctions = exports.AdaptableAggregatedScalarExpressionFunctions = exports.AdaptableAggregatedBooleanExpressionFunctions = exports.AdaptableScalarExpressionFunctions = exports.AdaptableBooleanExpressionFunctions = exports.AdaptableQL = exports.AdaptableToolPanelAgGridComponent = exports.default = void 0;
 const tslib_1 = require("tslib");
 var AdaptableReact_1 = require("./components/AdaptableReact");
 Object.defineProperty(exports, "default", { enumerable: true, get: function () { return tslib_1.__importDefault(AdaptableReact_1).default; } });
 var AdaptableComponents_1 = require("@adaptabletools/adaptable/src/AdaptableComponents");
 Object.defineProperty(exports, "AdaptableToolPanelAgGridComponent", { enumerable: true, get: function () { return AdaptableComponents_1.AdaptableToolPanelAgGridComponent; } });
 var agGrid_1 = require("@adaptabletools/adaptable/agGrid");
+Object.defineProperty(exports, "AdaptableQL", { enumerable: true, get: function () { return agGrid_1.AdaptableQL; } });
 Object.defineProperty(exports, "AdaptableBooleanExpressionFunctions", { enumerable: true, get: function () { return agGrid_1.AdaptableBooleanExpressionFunctions; } });
 Object.defineProperty(exports, "AdaptableScalarExpressionFunctions", { enumerable: true, get: function () { return agGrid_1.AdaptableScalarExpressionFunctions; } });
 Object.defineProperty(exports, "AdaptableAggregatedBooleanExpressionFunctions", { enumerable: true, get: function () { return agGrid_1.AdaptableAggregatedBooleanExpressionFunctions; } });

package/src/setupFrameworkComponents.js

@@ -3,8 +3,8 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupFrameworkComponents = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
-const react_dom_1 = require("react-dom");
 const logger_1 = require("./logger");
+const weakMap = new WeakMap();
 const setupFrameworkComponents = (adaptableApi) => {
     adaptableApi.internalApi
         .getAdaptableInstance()
@@ -13,7 +13,10 @@ const setupFrameworkComponents = (adaptableApi) => {
             try {
                 (0, logger_1.LogAdaptableInfo)(`Mounting custom framework component ${componentType}`, containerDomNode);
                 const ReactComponent = frameworkComponent;
-                (0, react_dom_1.render)(React.createElement(ReactComponent, { adaptableApi: adaptableApi }), containerDomNode);
+                const unmount = adaptableApi.internalApi
+                    .getAdaptableInstance()
+                    .renderReactRoot(React.createElement(ReactComponent, { adaptableApi: adaptableApi }), containerDomNode);
+                weakMap.set(containerDomNode, unmount);
             }
             catch (err) {
                 (0, logger_1.LogAdaptableError)(`Cannot correctly mount custom framework component ${componentType}`, err);
@@ -22,7 +25,12 @@ const setupFrameworkComponents = (adaptableApi) => {
         else {
             (0, logger_1.LogAdaptableInfo)(`Unmounting custom framework component  ${componentType}`, containerDomNode);
             try {
-                (0, react_dom_1.unmountComponentAtNode)(containerDomNode);
+                const unmount = weakMap.get(containerDomNode);
+                weakMap.delete(containerDomNode);
+                if (!unmount) {
+                    throw 'Cannot find render root for given node.';
+                }
+                unmount();
             }
             catch (err) {
                 (0, logger_1.LogAdaptableError)(`Cannot correctly unmount custom framework component ${componentType}`, err);