@adaptabletools/adaptable-react-aggrid 10.0.4-canary.5 → 11.0.0-canary.3

package/base.css

@@ -1756,8 +1756,6 @@
 .ab-Dialog:focus-within, .ab-Dialog:focus {
     box-shadow: var(--ab-focus__box-shadow);
     outline: var(--ab-focus__outline); }
-.ab-Dialog > * {
-    flex: 1; }
 .ab-Dialog__close-button {
     position: absolute;
     right: 6px;
@@ -2241,8 +2239,6 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
       pointer-events: none; }
 .ab-FileDroppable, .ab-FileDroppable *, .ab-FileDroppable *:before, .ab-FileDroppable *:after {
     box-sizing: border-box; }
-.ab-ChartContainer canvas {
-  left: 0; }
 .ab-WizardPanel > .ab-Panel__body {
   display: flex;
   flex-flow: column; }
@@ -2510,7 +2506,8 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
   --ab-cmp-Tag__font-size: var(--ab-font-size-3); }
 .ab-Tag {
   display: inline-flex;
-  font-size: var(--ab-cmp-Tag__font-size); }
+  font-size: var(--ab-cmp-Tag__font-size);
+  max-width: 100%; }
 .ab-AdaptableOptions {
   background: var(--ab-cmp-adaptable-options__background-color); }
 .ab-GridOptions {
@@ -2720,6 +2717,9 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
     margin-bottom: var(--ab-cmp-adaptable-object-list-item__margin-bottom); }
 .ab-Adaptable-Object-List__Item__edit-property {
       visibility: hidden; }
+.ab-Adaptable-Object-List__Item__values {
+      min-width: 0;
+      word-break: break-all; }
 .ab-Adaptable-Object-List__Item__buttons {
       padding-left: var(--ab-space-2);
       min-width: 80px;
@@ -2757,7 +2757,7 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
 .ab_div-colour-render-text {
   position: absolute;
   font-weight: normal;
-  font-size: 12p;
+  font-size: 12px;
   z-index: 100; }
 .ab_div-colour-render-div {
   display: inline-block;
@@ -2781,21 +2781,25 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
   border-style: none;
   --ab-toast-cmp__shadow-color: var(--ab-color-accent);
   box-shadow: 0 0 7px 2px var(--ab-toast-cmp__shadow-color);
-  background: var(--ab-toast-cmp__shadow-color); }
+  background: var(--ab-toast-cmp__shadow-color);
+  --toastify-text-color-info: var(--ab-color-text-on-primary);
+  --toastify-text-color-success: var(--ab-color-text-on-primary);
+  --toastify-text-color-warning: var(--ab-color-text-on-primary);
+  --toastify-text-color-error: var(--ab-color-text-on-primary);
+  --toastify-color-info: var(--ab-color-info);
+  --toastify-color-success: var(--ab-color-success);
+  --toastify-color-warning: var(--ab-color-warn);
+  --toastify-color-error: var(--ab-color-error); }
 .Toastify__toast-body {
   padding: 0; }
 .Toastify__toast--info {
-  --ab-toast-cmp__shadow-color: var(--ab-color-info);
-  color: var(--ab-color-text-on-primary); }
+  --ab-toast-cmp__shadow-color: var(--ab-color-info); }
 .Toastify__toast--success {
-  --ab-toast-cmp__shadow-color: var(--ab-color-success);
-  color: var(--ab-color-text-on-primary); }
+  --ab-toast-cmp__shadow-color: var(--ab-color-success); }
 .Toastify__toast--warning {
-  --ab-toast-cmp__shadow-color: var(--ab-color-warn);
-  color: var(--ab-color-text-on-primary); }
+  --ab-toast-cmp__shadow-color: var(--ab-color-warn); }
 .Toastify__toast--error {
-  --ab-toast-cmp__shadow-color: var(--ab-color-error);
-  color: var(--ab-color-text-on-primary); }
+  --ab-toast-cmp__shadow-color: var(--ab-color-error); }
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar,
 .ab--custom-mac-like-scrollbars .ab-Dashboard ::-webkit-scrollbar, .ab--custom-mac-like-scrollbars .ab-Dashboard * ::-webkit-scrollbar,

package/index.css

@@ -2402,9 +2402,6 @@ template {
     box-shadow: var(--ab-focus__box-shadow);
     outline: var(--ab-focus__outline); }
 
-.ab-Dialog > * {
-    flex: 1; }
-
 .ab-Dialog__close-button {
     position: absolute;
     right: 6px;
@@ -3012,9 +3009,6 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
 .ab-FileDroppable, .ab-FileDroppable *, .ab-FileDroppable *:before, .ab-FileDroppable *:after {
     box-sizing: border-box; }
 
-.ab-ChartContainer canvas {
-  left: 0; }
-
 .ab-WizardPanel > .ab-Panel__body {
   display: flex;
   flex-flow: column; }
@@ -3345,7 +3339,8 @@ input[type="number"].ab-Input:hover::-webkit-inner-spin-button:active {
 
 .ab-Tag {
   display: inline-flex;
-  font-size: var(--ab-cmp-Tag__font-size); }
+  font-size: var(--ab-cmp-Tag__font-size);
+  max-width: 100%; }
 
 .ab-AdaptableOptions {
   background: var(--ab-cmp-adaptable-options__background-color); }
@@ -3616,6 +3611,10 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
 .ab-Adaptable-Object-List__Item__edit-property {
       visibility: hidden; }
 
+.ab-Adaptable-Object-List__Item__values {
+      min-width: 0;
+      word-break: break-all; }
+
 .ab-Adaptable-Object-List__Item__buttons {
       padding-left: var(--ab-space-2);
       min-width: 80px;
@@ -3666,7 +3665,7 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
 .ab_div-colour-render-text {
   position: absolute;
   font-weight: normal;
-  font-size: 12p;
+  font-size: 12px;
   z-index: 100; }
 
 .ab_div-colour-render-div {
@@ -3695,26 +3694,30 @@ html.ab--theme-dark .ab-ListBoxFilterForm--aggrid-style {
   border-style: none;
   --ab-toast-cmp__shadow-color: var(--ab-color-accent);
   box-shadow: 0 0 7px 2px var(--ab-toast-cmp__shadow-color);
-  background: var(--ab-toast-cmp__shadow-color); }
+  background: var(--ab-toast-cmp__shadow-color);
+  --toastify-text-color-info: var(--ab-color-text-on-primary);
+  --toastify-text-color-success: var(--ab-color-text-on-primary);
+  --toastify-text-color-warning: var(--ab-color-text-on-primary);
+  --toastify-text-color-error: var(--ab-color-text-on-primary);
+  --toastify-color-info: var(--ab-color-info);
+  --toastify-color-success: var(--ab-color-success);
+  --toastify-color-warning: var(--ab-color-warn);
+  --toastify-color-error: var(--ab-color-error); }
 
 .Toastify__toast-body {
   padding: 0; }
 
 .Toastify__toast--info {
-  --ab-toast-cmp__shadow-color: var(--ab-color-info);
-  color: var(--ab-color-text-on-primary); }
+  --ab-toast-cmp__shadow-color: var(--ab-color-info); }
 
 .Toastify__toast--success {
-  --ab-toast-cmp__shadow-color: var(--ab-color-success);
-  color: var(--ab-color-text-on-primary); }
+  --ab-toast-cmp__shadow-color: var(--ab-color-success); }
 
 .Toastify__toast--warning {
-  --ab-toast-cmp__shadow-color: var(--ab-color-warn);
-  color: var(--ab-color-text-on-primary); }
+  --ab-toast-cmp__shadow-color: var(--ab-color-warn); }
 
 .Toastify__toast--error {
-  --ab-toast-cmp__shadow-color: var(--ab-color-error);
-  color: var(--ab-color-text-on-primary); }
+  --ab-toast-cmp__shadow-color: var(--ab-color-error); }
 
 .ab--custom-mac-like-scrollbars .ab-Grid * ::-webkit-scrollbar,
 .ab--custom-mac-like-scrollbars .ag-root * ::-webkit-scrollbar,

package/package.json

@@ -1,13 +1,11 @@
 {
   "name": "@adaptabletools/adaptable-react-aggrid",
-  "version": "10.0.4-canary.5",
+  "version": "11.0.0-canary.3",
   "description": "React version of the powerful data-agnostic HTML5 datagrid add-on that sits on top of the agGrid component and provides all the rich functionality that advanced users expect from their DataGrids and Data Tables",
   "keywords": [],
-  "main": "src/index.js",
   "license": "SEE LICENSE IN LICENSE.md",
-  "engines": {
-    "node": ">=6.0.0"
-  },
+  "main": "src/index.js",
+  "typings": "src/index.d.ts",
   "lint-staged": {
     "{src,test}/**/*.ts": [
       "npx prettier --write",
@@ -20,12 +18,16 @@
     }
   },
   "dependencies": {
-    "@adaptabletools/adaptable": "10.0.4-canary.5"
+    "tslib": "^2.0.0",
+    "@adaptabletools/adaptable": "11.0.0-canary.3"
   },
   "peerDependencies": {
     "@ag-grid-community/all-modules": ">=26.2.0",
     "@ag-grid-community/react": ">=26.2.0",
     "react": ">=16.8.0",
     "react-dom": ">=16.8.0"
+  },
+  "engines": {
+    "node": ">=6.0.0"
   }
 }

package/src/components/AdaptableReact.d.ts

@@ -2,16 +2,17 @@ import * as React from 'react';
 import { AdaptableApi } from '@adaptabletools/adaptable/types';
 import { AdaptableOptions } from '@adaptabletools/adaptable/types';
 import { GridOptions, Module } from '@ag-grid-community/all-modules';
-declare const AdaptableReact: ({ adaptableOptions, agGridOptions, onAdaptableReady, modules, ...props }: {
+export interface AdaptableReactProps extends React.HTMLProps<HTMLDivElement> {
     adaptableOptions: AdaptableOptions;
-    agGridOptions?: GridOptions;
+    gridOptions?: GridOptions;
     /**
      * An array of agGrid modules
      */
     modules: Module[];
     onAdaptableReady?: (adaptableReadyInfo: {
         adaptableApi: AdaptableApi;
-        agGridOptions: GridOptions;
+        gridOptions: GridOptions;
     }) => void;
-} & React.HTMLProps<HTMLDivElement>) => JSX.Element;
+}
+declare const AdaptableReact: React.FunctionComponent<AdaptableReactProps>;
 export default AdaptableReact;

package/src/components/AdaptableReact.js

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

package/src/setupFrameworkComponents.js

@@ -1,6 +1,8 @@
 "use strict";
 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");
 exports.setupFrameworkComponents = (adaptableApi) => {
@@ -10,8 +12,8 @@ exports.setupFrameworkComponents = (adaptableApi) => {
         if (command === 'create') {
             try {
                 logger_1.LogAdaptableInfo(`Mounting custom framework component ${componentType}`, containerDomNode);
-                const reactFrameworkComponent = frameworkComponent;
-                react_dom_1.render(reactFrameworkComponent({ adaptableApi }), containerDomNode);
+                const ReactComponent = frameworkComponent;
+                react_dom_1.render(React.createElement(ReactComponent, { adaptableApi: adaptableApi }), containerDomNode);
             }
             catch (err) {
                 logger_1.LogAdaptableError(`Cannot correctly mount custom framework component ${componentType}`, err);