@adaptabletools/adaptable 18.1.8 → 18.1.10

package/src/View/Dashboard/CustomToolbar.js

@@ -63,6 +63,8 @@ export 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) => {
@@ -91,7 +93,7 @@ export 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))));
 };
 export const CustomToolbarWrapper = (props) => {
     const { api } = useAdaptable();

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

@@ -18,6 +18,8 @@ import FormatHelper from '../../../Utilities/Helpers/FormatHelper';
 import { Toggle, ToggleGroup } from '../../../components/Toggle';
 import { DEFAULT_DOUBLE_DISPLAY_VALUE, DEFAULT_STRING_DISPLAY_VALUE, } from '../../../Utilities/Constants/GeneralConstants';
 import Textarea from '../../../components/Textarea';
+import { ButtonInfo } from '../../Components/Buttons/ButtonInfo';
+import { FormatColumnPlaceholderDocsLink } from '../../../Utilities/Constants/DocumentationLinkConstants';
 const DOLLAR_OPTIONS = {
     FractionDigits: 2,
     FractionSeparator: '.',
@@ -202,8 +204,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;
     }
@@ -255,6 +257,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(Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs, null,
             React.createElement(Tabs.Tab, null, "Format"),
@@ -262,7 +265,8 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                 React.createElement(Flex, { flexDirection: "row" },
                     React.createElement(FormLayout, { mr: 3 },
                         React.createElement(FormRow, { label: "Fraction Separator" },
-                            React.createElement(Input, { "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, { "data-name": "fraction-separator", value: (_a = data.DisplayFormat.Options.FractionSeparator) !== null && _a !== void 0 ? _a : '', onChange: (e) => setFormatOption('FractionSeparator', e.currentTarget.value) }),
+                            ' '),
                         React.createElement(FormRow, { label: "Integer Separator" },
                             React.createElement(Input, { "data-name": "integer-separator", value: (_b = data.DisplayFormat.Options.IntegerSeparator) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('IntegerSeparator', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Prefix" },
@@ -292,9 +296,6 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                         React.createElement(FormRow, { label: "Multiplier" },
                             React.createElement(Input, { "data-name": "multiplier", type: "number", value: data.DisplayFormat.Options.Multiplier, onChange: (e) => setFormatOption('Multiplier', Number(e.currentTarget.value)) })),
                         ' ',
-                        React.createElement(FormRow, { label: "Content" },
-                            React.createElement(Input, { "data-name": "content", value: (_e = data.DisplayFormat.Options.Content) !== null && _e !== void 0 ? _e : '', onChange: (e) => setFormatOption('Content', e.currentTarget.value) })),
-                        ' ',
                         React.createElement(FormRow, { label: "Parentheses" },
                             React.createElement(CheckBox, { "data-name": "parentheses-checkbox", checked: data.DisplayFormat.Options.Parentheses, onChange: (checked) => setFormatOption('Parentheses', checked) })),
                         React.createElement(FormRow, { label: "Floor" },
@@ -318,6 +319,20 @@ const renderNumberFormat = (data, onChange, setFormatOption, scopedCustomFormatt
                             React.createElement(Radio, { "data-name": "preset-million", marginLeft: 3, checked: IS_MILLION, onChange: () => setDivideMillionPreset() }, "M (Million)"),
                             React.createElement(Radio, { "data-name": "preset-dollar", marginLeft: 3, checked: IS_DOLLAR, onChange: () => setDollarPreset() }, "Dollar"),
                             React.createElement(Radio, { "data-name": "preset-sterling", marginLeft: 3, checked: IS_STERLING, onChange: () => setSterlingPreset() }, "Sterling")))))),
+        React.createElement(Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
+            React.createElement(Tabs.Tab, null, "Dynamic Content"),
+            React.createElement(Tabs.Content, null,
+                React.createElement(Text, { padding: 2, fontSize: 2 }, "Provide dynamic content through the use of Placeholders"),
+                React.createElement(FormLayout, { margin: 2 },
+                    React.createElement(FormRow, { label: "" },
+                        React.createElement(Textarea, { 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, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+                                fontSize: 'var(--ab-font-size-3)',
+                                padding: 0,
+                            } },
+                            React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
+                            "Learn more about using placeholders"))),
+                    ' '))),
         React.createElement(Tabs, { marginTop: 2, autoFocus: false, keyboardNavigation: false },
             React.createElement(Tabs.Tab, null, "Examples"),
             React.createElement(Tabs.Content, null,
@@ -347,11 +362,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(Box, { "data-name": 'format-column-display-format', padding: 2 },
         React.createElement(Tabs, null,
             React.createElement(Tabs.Tab, null, "Format"),
@@ -370,10 +386,13 @@ const renderStringFormat = (data, _onChange, setFormatOption, scopedCustomFormat
                         React.createElement(FormRow, { label: "Suffix" },
                             React.createElement(Input, { "data-name": "suffix", value: (_b = data.DisplayFormat.Options.Suffix) !== null && _b !== void 0 ? _b : '', onChange: (e) => setFormatOption('Suffix', e.currentTarget.value) })),
                         React.createElement(FormRow, { label: "Content" },
-                            React.createElement(Textarea, { 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, { 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, { "data-name": "query-documentation", mt: 3, mb: 2, style: {
+                                    fontSize: 'var(--ab-font-size-3)',
+                                    padding: 0,
+                                } },
+                                React.createElement(ButtonInfo, { mr: 2, onClick: () => window.open(FormatColumnPlaceholderDocsLink, '_blank') }),
+                                "See how to create dynamic Display Format using placeholders"))),
                         React.createElement(FormRow, { label: "Empty" },
                             React.createElement(CheckBox, { "data-name": "empty-checkbox", checked: data.DisplayFormat.Options.Empty, onChange: (checked) => setFormatOption('Empty', checked) })))))),
         scopedCustomFormatters.length > 0 && (React.createElement(Tabs, { marginTop: 2, keyboardNavigation: false },
@@ -416,13 +435,13 @@ export 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, { 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

@@ -397,7 +397,19 @@ export class AdaptableAgGrid {
         const adaptableContainerElem = this.getAdaptableContainerElement();
         if (adaptableContainerElem != null) {
             adaptableContainerElem.innerHTML = '';
-            this.unmountReactRoot = this.renderReactRoot(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 = AdaptableApp({ Adaptable: this });
+            }
+            else {
+                this.unmountReactRoot = this.renderReactRoot(AdaptableApp({ Adaptable: this }), adaptableContainerElem);
+            }
         }
         this.lifecycleState = 'ready';
         this.forPlugins((plugin) => plugin.onAdaptableReady(this, this.adaptableOptions));
@@ -2379,6 +2391,27 @@ export 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) {
@@ -3751,7 +3784,7 @@ export 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

@@ -470,6 +470,20 @@ export 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',
@@ -480,7 +494,6 @@ export class AgGridMenuAdapter {
             },
             subItems: [
                 ...columnActionGroup,
-                ...calculatedColumnMenuItems,
                 ...freeTextColumnMenuItems,
                 ...customSortMenuItems,
                 ...plusMinusMenuItems,
@@ -499,6 +512,7 @@ export class AgGridMenuAdapter {
             subItems: [...formatColumnMenuItems, ...styledColumnMenuItems, ...flashingCellMenuItems],
         };
         return this.removeConsecutiveSeparators([
+            ...calculatedColumnMenuItems,
             ...settingsPanelMenuItems,
             ...dashboardMenuItems,
             ...columnFilterGroup,

package/src/agGrid/defaultAdaptableOptions.js

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

package/src/env.js

@@ -1,5 +1,5 @@
 export 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: 1720529546809 || Date.now(),
-    VERSION: "18.1.8" || '--current-version--',
+    PUBLISH_TIMESTAMP: 1721302170891 || Date.now(),
+    VERSION: "18.1.10" || '--current-version--',
 };