@adaptabletools/adaptable-cjs 18.1.8 → 18.1.10

package/src/View/Alert/Wizard/AlertMessageWizardSection.js

@@ -25,6 +25,7 @@ const AlertMessageWizardSection = (props) => {
     const messageType = data.MessageType;
     const messageText = api.alertApi.internalApi.getAlertDescriptionForDataChange(data);
     const messageHeader = data.MessageHeader;
+    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     const onMessageTextChange = (e) => {
         const { value } = e.target;
         props.onChange(Object.assign(Object.assign({}, data), { MessageText: value }));
@@ -47,7 +48,7 @@ const AlertMessageWizardSection = (props) => {
         React.createElement(Tabs_1.Tabs, { "data-name": "message-text", mt: 2, mb: 3, autoFocus: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Message Text"),
             React.createElement(Tabs_1.Tabs.Content, null,
-                React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "The text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
+                React.createElement(rebass_1.Text, { fontSize: 2, mt: 3, mb: 2 }, "Text to display as the Alert Message (leave blank to show automated Message based on Alert Type)"),
                 ' ',
                 React.createElement(FormLayout_1.default, null,
                     React.createElement(FormLayout_1.FormRow, { label: "Header" },
@@ -56,11 +57,11 @@ const AlertMessageWizardSection = (props) => {
                             onChange: (e) => onMessageHeaderChange(e) })),
                     React.createElement(FormLayout_1.FormRow, { label: "Message" },
                         React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, marginTop: 2, type: 'text', autoFocus: false, value: messageText !== null && messageText !== void 0 ? messageText : '', onChange: (e) => onMessageTextChange(e) }))),
-                React.createElement(HelpBlock_1.default, { "data-name": "alert-message-documentation", mt: 3, mb: 2, style: {
+                showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "alert-message-documentation", mt: 3, mb: 2, style: {
                         fontSize: 'var(--ab-font-size-3)',
                         padding: 0,
                     } },
                     React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.AlertMessageDocsLink, '_blank') }),
-                    "See Alert Message documentation for more details and examples")))));
+                    "See how to create dynamic Alert Messages using placeholders"))))));
 };
 exports.AlertMessageWizardSection = AlertMessageWizardSection;

package/src/View/Components/ExternalRenderer.js

@@ -45,6 +45,8 @@ const ExternalRenderer = (_a) => {
             }
         };
     }, []);
-    return React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref }));
+    const RFC = adaptable.variant === 'react' ? frameworkComponent : null;
+    return RFC ? (React.createElement("div", Object.assign({}, rest, { ref: ref }),
+        React.createElement(RFC, { adaptableApi: adaptable.api }))) : (React.createElement("div", Object.assign({}, rest, { dangerouslySetInnerHTML: { __html: contentsHTML }, ref: ref })));
 };
 exports.ExternalRenderer = ExternalRenderer;

package/src/View/Dashboard/CustomToolbar.js

@@ -67,6 +67,8 @@ const CustomToolbarCmp = (props) => {
             }
         };
     }, []);
+    const CustomReactFrameworkComponent = props.customToolbar
+        .frameworkComponent;
     return (React.createElement(React.Fragment, null,
         props.customToolbar.render && (React.createElement("div", { id: renderContentContainerId, ref: renderContentContainerRef, className: `ab-CustomToolbar__rendered-content ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 }, dangerouslySetInnerHTML: { __html: renderedContentHTML } })),
         props.customToolbar.toolbarButtons && (React.createElement("div", { id: buttonsContainerId, className: `ab-CustomToolbar__buttons ab-CustomToolbar--${props.customToolbar.name}`, style: { minHeight: 22 } }, props.customToolbar.toolbarButtons.map((button, index) => {
@@ -95,7 +97,7 @@ const CustomToolbarCmp = (props) => {
                     }, 16);
                 } }, buttonLabel));
         }))),
-        props.customToolbar.frameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }))));
+        CustomReactFrameworkComponent && (React.createElement("div", { id: componentContainerId, ref: componentContainerRef, style: { minHeight: 22 }, className: `ab-CustomToolbar__component ab-CustomToolbar--${props.customToolbar.name}` }, api.gridApi.getVariant() === 'react' ? (React.createElement(CustomReactFrameworkComponent, { adaptableApi: api })) : null))));
 };
 exports.CustomToolbarCmp = CustomToolbarCmp;
 const CustomToolbarWrapper = (props) => {

package/src/View/FormatColumn/Wizard/FormatColumnFormatWizardSection.js

@@ -22,6 +22,8 @@ const FormatHelper_1 = tslib_1.__importDefault(require("../../../Utilities/Helpe
 const Toggle_1 = require("../../../components/Toggle");
 const GeneralConstants_1 = require("../../../Utilities/Constants/GeneralConstants");
 const Textarea_1 = tslib_1.__importDefault(require("../../../components/Textarea"));
+const ButtonInfo_1 = require("../../Components/Buttons/ButtonInfo");
+const DocumentationLinkConstants_1 = require("../../../Utilities/Constants/DocumentationLinkConstants");
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -209,8 +211,8 @@ const renderDateFormat = (data, _onChange, setFormatOption, scopedCustomFormatte
                         },
                     ] })))))));
 };
-const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
-    var _a, _b, _c, _d, _e;
+const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatters, api) => {
+    var _a, _b, _c, _d, _e, _f;
     if (data.DisplayFormat.Formatter !== 'NumberFormatter') {
         return null;
     }
@@ -262,6 +264,7 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
         data.DisplayFormat.Options.Multiplier === MILLION_OPTIONS.Multiplier; //isEqual(data.DisplayFormat.Options, MILLION_OPTIONS);
     const IS_DOLLAR = data.DisplayFormat.Options.Prefix === '$'; //isEqual(data.DisplayFormat.Options, DOLLAR_OPTIONS);
     const IS_STERLING = data.DisplayFormat.Options.Prefix === '£'; //isEqual(data.DisplayFormat, STERLING_OPTIONS);
+    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -269,7 +272,8 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(rebass_1.Flex, { flexDirection: "row" },
                     React.createElement(FormLayout_1.default, { mr: 3 },
                         React.createElement(FormLayout_1.FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) })),
+                            React.createElement(Input_1.default, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }),
+                            ' '),
                         React.createElement(FormLayout_1.FormRow, { label: "Integer Separator" },
                             React.createElement(Input_1.default, { "data-name": "integer-separator", value: (_b = data.DisplayFormat.Options.IntegerSeparator) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Prefix" },
@@ -299,9 +303,6 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                         React.createElement(FormLayout_1.FormRow, { label: "Multiplier" },
                             React.createElement(Input_1.default, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
-                        React.createElement(FormLayout_1.FormRow, { label: "Content" },
-                            React.createElement(Input_1.default, { "data-name": "content", value: (_e = data.DisplayFormat.Options.Content) !== null && _e !== void 0 ? _e : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
-                        ' ',
                         React.createElement(FormLayout_1.FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Floor" },
@@ -325,6 +326,20 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(Radio_1.default, { "data-name": "preset-million", marginLeft: 3, checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
                             React.createElement(Radio_1.default, { "data-name": "preset-dollar", marginLeft: 3, checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
                             React.createElement(Radio_1.default, { "data-name": "preset-sterling", marginLeft: 3, checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
+        React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+            React.createElement(Tabs_1.Tabs.Tab, null, "Dynamic Content"),
+            React.createElement(Tabs_1.Tabs.Content, null,
+                React.createElement(rebass_1.Text, { padding: 2, fontSize: 2 }, "Provide dynamic content through the use of Placeholders"),
+                React.createElement(FormLayout_1.default, { margin: 2 },
+                    React.createElement(FormLayout_1.FormRow, { label: "" },
+                        React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "", marginTop: 2, type: 'text', autoFocus: false, value: (_f = (_e = data.DisplayFormat.Options.Content) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
+                        showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+                                fontSize: 'var(--ab-font-size-3)',
+                                padding: 0,
+                            } },
+                            React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
+                            "Learn more about using placeholders"))),
+                    ' '))),
         React.createElement(Tabs_1.Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs_1.Tabs.Tab, null, "Examples"),
             React.createElement(Tabs_1.Tabs.Content, null,
@@ -354,11 +369,12 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                         },
                     ] })))));
 };
-const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, formatColumnApi) => {
+const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormatters, api) => {
     var _a, _b, _c;
     if (data.DisplayFormat.Formatter !== 'StringFormatter') {
         return null;
     }
+    const showDocumentationLinks = api.internalApi.isDocumentationLinksDisplayed();
     return (React.createElement(rebass_1.Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs_1.Tabs, null,
             React.createElement(Tabs_1.Tabs.Tab, null, "Format"),
@@ -377,10 +393,13 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                         React.createElement(FormLayout_1.FormRow, { label: "Suffix" },
                             React.createElement(Input_1.default, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormLayout_1.FormRow, { label: "Content" },
-                            React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "use defaults", marginTop: 2, type: 'text', autoFocus: false, value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', 
-                                // placeholder="defaults to column name"
-                                //    onChange={(e: any) => onMessageHeaderChange(e)}
-                                onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
+                            React.createElement(Textarea_1.default, { minWidth: 300, rows: 3, placeholder: "", marginTop: 2, type: 'text', autoFocus: false, value: (_c = data.DisplayFormat.Options.Content) !== null && _c !== void 0 ? _c : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) }),
+                            showDocumentationLinks && (React.createElement(HelpBlock_1.default, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+                                    fontSize: 'var(--ab-font-size-3)',
+                                    padding: 0,
+                                } },
+                                React.createElement(ButtonInfo_1.ButtonInfo, { mr: 2, onClick: () => window.open(DocumentationLinkConstants_1.FormatColumnPlaceholderDocsLink, '_blank') }),
+                                "See how to create dynamic Display Format using placeholders"))),
                         React.createElement(FormLayout_1.FormRow, { label: "Empty" },
                             React.createElement(CheckBox_1.CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs_1.Tabs, { marginTop: 2, keyboardNavigation: false },
@@ -423,13 +442,13 @@ const FormatColumnFormatWizardSection = (props) => {
     const Type = data.DisplayFormat && data.DisplayFormat.Formatter;
     const customScopedFormatters = customDisplayFormatters.filter((displayFormatter) => adaptable.api.columnScopeApi.isScopeInScope(data.Scope, displayFormatter.scope));
     if (Type === 'NumberFormatter') {
-        return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
+        return renderNumberFormat(data, update, setFormatOption, customScopedFormatters, adaptable.api);
     }
     if (Type === 'DateFormatter') {
         return renderDateFormat(data, update, setFormatOption, customScopedFormatters);
     }
     if (Type === 'StringFormatter') {
-        return renderStringFormat(data, update, setFormatOption, customScopedFormatters, formatColumnApi);
+        return renderStringFormat(data, update, setFormatOption, customScopedFormatters, adaptable.api);
     }
     return (React.createElement(HelpBlock_1.default, { margin: 3 },
         "Setting a Display Format is only possible if ",

package/src/agGrid/AdaptableAgGrid.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
 import { ChartRef, Column, GridApi, GridOptions, IRowNode, Module, RowModelType } from '@ag-grid-community/core';
 import { AdaptableLogger } from './AdaptableLogger';
@@ -122,6 +123,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
      * Temporary, these are MIGRATION technical debts, and should be removed as soon as possible
      */
     private adaptableStatusPanelKeys;
+    _PRIVATE_adaptableJSXElement: JSX.Element;
     constructor();
     static forEachAdaptable(fn: (adaptable: AdaptableAgGrid) => void): void;
     private static collectInstance;
@@ -244,6 +246,7 @@ export declare class AdaptableAgGrid implements IAdaptable {
     private addDistinctColumnValue;
     private getUniqueGridCells;
     getGridCellsForColumn(columnId: string, onlyVisibleRows?: boolean): GridCell[] | undefined;
+    getGridCellsForColumnTemp(columnId: string, onlyVisibleRows: boolean): GridCell[] | undefined;
     getRowNodesForPrimaryKeys(primaryKeyValues: any[]): any[];
     getRowNodeByIndex(index: number): IRowNode;
     getAgGridStatusPanels(): import("@ag-grid-community/core").StatusPanelDef[];

package/src/agGrid/AdaptableAgGrid.js

@@ -401,7 +401,19 @@ class AdaptableAgGrid {
         const adaptableContainerElem = this.getAdaptableContainerElement();
         if (adaptableContainerElem != null) {
             adaptableContainerElem.innerHTML = '';
-            this.unmountReactRoot = this.renderReactRoot((0, AdaptableView_1.AdaptableApp)({ Adaptable: this }), adaptableContainerElem);
+            if (this.variant === 'react') {
+                /**
+                 * #no_additional_react_root
+                 * This is only used for the React variant
+                 * Where we don't want to create a new React render tree here
+                 * by rendering it as a React root, but instead we want to
+                 * render it as is in the React tree of our AdaptableReact component
+                 */
+                this._PRIVATE_adaptableJSXElement = (0, AdaptableView_1.AdaptableApp)({ Adaptable: this });
+            }
+            else {
+                this.unmountReactRoot = this.renderReactRoot((0, AdaptableView_1.AdaptableApp)({ Adaptable: this }), adaptableContainerElem);
+            }
         }
         this.lifecycleState = 'ready';
         this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
@@ -2383,6 +2395,27 @@ class AdaptableAgGrid {
         }
         return returnValues;
     }
+    // This horrible method is temporary until we can get rid of having predicates inside values which is coming soon
+    // We need it in case Blanks is requested
+    // once we go to the new multi predicate screen then we wont show blanks any more - which we should never have done
+    getGridCellsForColumnTemp(columnId, onlyVisibleRows) {
+        let returnValues = [];
+        const handler = (rowNode) => {
+            if (!this.isGroupRowNode(rowNode)) {
+                const gridCell = this.getGridCellFromRowNode(rowNode, columnId);
+                if (gridCell) {
+                    returnValues.push(gridCell);
+                }
+            }
+        };
+        if (onlyVisibleRows) {
+            this.agGridAdapter.getAgGridApi().forEachNodeAfterFilter(handler);
+        }
+        else {
+            this.agGridAdapter.getAgGridApi().forEachNode(handler);
+        }
+        return returnValues;
+    }
     getRowNodesForPrimaryKeys(primaryKeyValues) {
         let rowNodes = [];
         if (this.useRowNodeLookUp) {
@@ -3755,7 +3788,7 @@ class AdaptableAgGrid {
                 // same grid column state as a previous,
                 // so no need to update, as the layout has already been updated
                 // for this grid column state
-                console.log('same state as before');
+                // console.log('same state as before');
                 return;
             }
             this.previousAgGridLayoutState = stringifiedLayoutState;

package/src/agGrid/AgGridMenuAdapter.js

@@ -474,6 +474,20 @@ class AgGridMenuAdapter {
                 ...gridInfoMenuItems,
             ],
         };
+        /*
+            const calculatedColumnMenuItem: AdaptableMenuItem = {
+              name: 'calculated-column-group',
+              label: 'Calculated Column',
+              module: 'CalculatedColumn',
+              isVisible: true,
+              icon: {
+                name: 'columns',
+              },
+              subItems: [
+                ...calculatedColumnMenuItems,
+              ],
+            };
+            */
         const columnMenuItem = {
             name: 'column-group',
             label: 'Column',
@@ -484,7 +498,6 @@ class AgGridMenuAdapter {
             },
             subItems: [
                 ...columnActionGroup,
-                ...calculatedColumnMenuItems,
                 ...freeTextColumnMenuItems,
                 ...customSortMenuItems,
                 ...plusMinusMenuItems,
@@ -503,6 +516,7 @@ class AgGridMenuAdapter {
             subItems: [...formatColumnMenuItems, ...styledColumnMenuItems, ...flashingCellMenuItems],
         };
         return this.removeConsecutiveSeparators([
+            ...calculatedColumnMenuItems,
             ...settingsPanelMenuItems,
             ...dashboardMenuItems,
             ...columnFilterGroup,

package/src/agGrid/defaultAdaptableOptions.js

@@ -298,6 +298,7 @@ const DefaultAdaptableOptions = {
         activeByDefault: false,
         showDataChange: undefined,
         changeHistoryButton: undefined,
+        showLastDataChangeOnly: true
     },
     settingsPanelOptions: {
         popupType: 'window',

package/src/env.js

@@ -2,6 +2,6 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = {
     INFINITE_TABLE_LICENSE_KEY: "StartDate=2021-06-29|EndDate=2030-01-01|Owner=Adaptable|Type=distribution|TS=1624971462479|C=137829811,1004007071,2756196225,1839832928,3994409405,636616862" || '',
-    PUBLISH_TIMESTAMP: 1720529578367 || Date.now(),
-    VERSION: "18.1.8" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1721302203425 || Date.now(),
+    VERSION: "18.1.10" || '--current-version--',
 };