@adaptabletools/adaptable 15.3.1 → 15.3.3-canary.0

package/src/agGrid/Adaptable.js

@@ -943,6 +943,27 @@ class Adaptable {
         this.gridOptions.api.setColumnDefs(colDefs);
         this.updateColumnsIntoStore(); // todo remove this from here!!!
     }
+    /**
+     * The combination of styled column and format cells
+     * This functiond decides when the two can be merged.
+     */
+    getFormatColumnAndStyledColumnCellStyle(abColumn, colId, params) {
+        let styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
+        let styledColumnStyle = {};
+        if (styledColumn && !(styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended)) {
+            const styledCellStyle = this.getStyledColumnStyle(styledColumn, abColumn, params);
+            // for percentbar we want to merge
+            if (styledColumn.PercentBarStyle || styledColumn.BadgeStyle) {
+                styledColumnStyle = styledCellStyle;
+            }
+            else {
+                // For other ones wo do not want to merge
+                return styledCellStyle;
+            }
+        }
+        const activeFormatColumnsWithStyle = this.api.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(abColumn);
+        return Object.assign(Object.assign({}, this.getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params)), styledColumnStyle);
+    }
     getStyledColumnStyle(styledColumn, abColumn, params) {
         let style = {};
         const gradientStyle = styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.GradientStyle;
@@ -2131,6 +2152,12 @@ class Adaptable {
         this.forAllRowNodesDo((rowNode) => rowNodes.push(rowNode), config);
         return rowNodes;
     }
+    getGroupRowNodes(config) {
+        return this.getAllRowNodes({
+            includeGroupRows: true,
+            filterFn: (rowNode) => this.isGroupRowNode(rowNode),
+        });
+    }
     getRowsInViewport() {
         return this.gridOptions.api.getRenderedNodes();
     }
@@ -2303,7 +2330,7 @@ class Adaptable {
         const defaultEditButtonConfiguration = {
             create: {
                 icon: {
-                    name: 'add-row',
+                    name: 'add',
                 },
                 tooltip: 'Create',
                 onClick: () => {
@@ -2579,6 +2606,7 @@ class Adaptable {
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_FIRST_DATA_RENDERED, this.listenerFirstDataRendered);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_COLUMN_PIVOT_MODE_CHANGED, this.listenerPivotModeChanged);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_COLUMN_PIVOT_CHANGED, this.listenerPivotChanged);
+            this.gridOptions.api.removeEventListener(core_1.Events.EVENT_CELL_EDITING_STARTED, this.listenerCellEditingStarted);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_COLUMN_ROW_GROUP_CHANGED, this.listenerColumnRowGroupChanged);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_RANGE_SELECTION_CHANGED, this.listenerRangeSelectionChanged);
             this.gridOptions.api.removeEventListener(core_1.Events.EVENT_COLUMN_RESIZED, this.listenerColumnResized);
@@ -2591,6 +2619,7 @@ class Adaptable {
             this.listenerFirstDataRendered = null;
             this.listenerPivotModeChanged = null;
             this.listenerPivotChanged = null;
+            this.listenerCellEditingStarted = null;
             this.listenerColumnRowGroupChanged = null;
             this.listenerRangeSelectionChanged = null;
             this.listenerColumnResized = null;
@@ -2798,6 +2827,15 @@ class Adaptable {
                 this.debouncedSetColumnIntoStore();
             }
         }));
+        /**
+         * Use Case: User has started inline editing but its distabled in Action Row Options
+         * Action: Stop editing
+         */
+        this.gridOptions.api.addEventListener(core_1.Events.EVENT_CELL_EDITING_STARTED, (this.listenerCellEditingStarted = () => {
+            var _a, _b;
+            if ((_b = (_a = this.adaptableOptions.actionOptions) === null || _a === void 0 ? void 0 : _a.actionRowButtonOptions) === null || _b === void 0 ? void 0 : _b.disableInlineEditing)
+                this.gridOptions.api.stopEditing();
+        }));
         /**
          * Use Case: initial data has been displayed in grid
          * Action1: Set the Layout
@@ -3231,18 +3269,11 @@ class Adaptable {
     }
     setupColumnCellStyle({ col, colId, abColumn }) {
         this.setColDefProperty(col, 'cellStyle', (userCellStyle) => {
-            const activeFormatColumnsWithStyle = this.api.formatColumnApi.internalApi.getFormatColumnsWithStyleForColumn(abColumn);
-            let styledColumn = this.api.styledColumnApi.getStyledColumnForColumnId(colId);
-            if (styledColumn === null || styledColumn === void 0 ? void 0 : styledColumn.IsSuspended) {
-                styledColumn = null;
-            }
             const quickSearchStyle = this.getQuickSearchCellStyle();
             const hasQuickSearchStyle = quickSearchStyle != undefined;
             const cellStyle = (params) => {
                 const isQuickSearchActive = hasQuickSearchStyle && this.isQuickSearchActive(abColumn, params);
-                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), (!styledColumn
-                    ? this.getFormatColumnCellStyle(abColumn, activeFormatColumnsWithStyle, params)
-                    : {})), (styledColumn ? this.getStyledColumnStyle(styledColumn, abColumn, params) : {})), (isQuickSearchActive ? quickSearchStyle : {})), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
+                const result = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, this.getReadOnlyCellStyle(abColumn, params)), this.getEditableCellStyle(abColumn, params)), (typeof userCellStyle === 'function' ? userCellStyle(params) : userCellStyle)), this.getFormatColumnAndStyledColumnCellStyle(abColumn, colId, params)), (isQuickSearchActive ? quickSearchStyle : {})), this.getAlertCellStyle(abColumn, params)), this.getFlashingCellStyle(abColumn, params)), this.getCellHighlightStyle(abColumn, params));
                 // see https://github.com/AdaptableTools/adaptable/issues/2119
                 StyleHelper_1.AgGridCellStyleProperties.forEach((cellStylePropKey) => {
                     if (result[cellStylePropKey] == null) {
@@ -3348,6 +3379,9 @@ class Adaptable {
                 if (styledColumn.CheckBoxStyle) {
                     return this.agGridHelper.createCheckboxRendererComp(abColumn.columnId, abColumn.readOnly);
                 }
+                if (styledColumn.BadgeStyle) {
+                    return this.agGridHelper.createBadgeRendererComp(styledColumn, abColumn);
+                }
                 if (styledColumn.SparkLineStyle) {
                     return 'agSparklineCellRenderer';
                 }
@@ -3546,7 +3580,11 @@ class Adaptable {
             }
             const editableCallback = (params) => {
                 const gridCell = this.getGridCellFromRowNode(params.node, params.column.getColId());
-                return cellEditableFn(gridCell);
+                const cellEditableContext = {
+                    gridCell,
+                    adaptableApi: this.api,
+                };
+                return cellEditableFn(cellEditableContext);
             };
             return editableCallback;
         });
@@ -4617,17 +4655,18 @@ class Adaptable {
                         excelStyles.push(this.convertCSSToExcelStyle(adaptableStyle));
                     }
                     const excelDataType = this.api.exportApi.internalApi.getExcelDataType(colDef === null || colDef === void 0 ? void 0 : colDef.type);
+                    const rawValue = this.getRawValueFromRowNode(node, column.getId());
                     // don't add the cell style if it has no adaptable custom styles or user defined styles
-                    if (!excelStyles.length &&
-                        // if this is a formatted Date value, we still need to add the AG GRID specific type & numberFormat below
-                        !(excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue)) {
+                    if (rawValue == undefined ||
+                        (!excelStyles.length &&
+                            // if this is a formatted Date value, we still need to add the AG GRID specific type & numberFormat below
+                            !(excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue))) {
                         return;
                     }
                     const cellClassId = this.getExcelClassNameForCell(column.getId(), this.getPrimaryKeyValueFromRowNode(node), userDefinedCellClass);
                     const finalCellExcelStyle = Object.assign({}, ...excelStyles);
                     if (excelDataType === 'DateTime' && isDateCellExportedAsFormattedValue) {
                         let dateFormatPattern = this.api.optionsApi.getExportOptions().exportDateFormat;
-                        const rawValue = this.getRawValueFromRowNode(node, column.getId());
                         const abColumn = getAdaptableColumnWithColumnId(column.getColId());
                         if (!dateFormatPattern) {
                             const mostRelevantFormatColumn = this.api.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(getFormatColumnsWithDisplayFormatForColumn(column.getColId()), abColumn, { node, value: rawValue });
@@ -4637,18 +4676,22 @@ class Adaptable {
                         }
                         if (dateFormatPattern) {
                             const normalisedValue = this.getNormalisedValueFromRawValue(rawValue, abColumn);
-                            // we have to pass the date in the ISO format to Excel
-                            // see https://www.ag-grid.com/javascript-data-grid/excel-export-data-types/#dates
-                            const isoFormattedValue = normalisedValue === null || normalisedValue === void 0 ? void 0 : normalisedValue.toISOString();
-                            if (isoFormattedValue) {
-                                finalCellExcelStyle.dataType = 'DateTime';
-                                finalCellExcelStyle.numberFormat = { format: dateFormatPattern };
-                                // create a new cell key to ensure any user provided className does not interfere
-                                const cellKey = this.getExcelClassNameForCell(column.getColId(), this.getPrimaryKeyValueFromRowNode(node));
-                                // we need to register so that later the cellProcessor will put the isoFormattedValue through (thus giving the formatting responsability to Excel)
-                                this.api.internalApi
-                                    .getReportService()
-                                    .registerExcelStyleWithFormattedDate(cellKey, isoFormattedValue);
+                            if (normalisedValue) {
+                                // we have to pass the date in the ISO format to Excel
+                                // see https://www.ag-grid.com/javascript-data-grid/excel-export-data-types/#dates
+                                // we also need to remove the timezone info from the date
+                                const dateWithoutTimezoneCorrection = new Date(Date.UTC(normalisedValue.getFullYear(), normalisedValue.getMonth(), normalisedValue.getDate()));
+                                const isoFormattedValue = dateWithoutTimezoneCorrection.toISOString();
+                                if (isoFormattedValue) {
+                                    finalCellExcelStyle.dataType = 'DateTime';
+                                    finalCellExcelStyle.numberFormat = { format: dateFormatPattern };
+                                    // create a new cell key to ensure any user provided className does not interfere
+                                    const cellKey = this.getExcelClassNameForCell(column.getColId(), this.getPrimaryKeyValueFromRowNode(node));
+                                    // we need to register so that later the cellProcessor will put the isoFormattedValue through (thus giving the formatting responsability to Excel)
+                                    this.api.internalApi
+                                        .getReportService()
+                                        .registerExcelStyleWithFormattedDate(cellKey, isoFormattedValue);
+                                }
                             }
                         }
                     }

package/src/agGrid/BadgeRenderer.d.ts

@@ -0,0 +1,4 @@
+import { StyledColumn } from '../PredefinedConfig/StyledColumnState';
+import { AdaptableApi } from '../Api/AdaptableApi';
+import { AdaptableColumn } from '../PredefinedConfig/Common/AdaptableColumn';
+export declare const getBadgeRendererForColumn: (styledColumn: StyledColumn, abColumn: AdaptableColumn, api: AdaptableApi) => any;

package/src/agGrid/BadgeRenderer.js

@@ -0,0 +1,59 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getBadgeRendererForColumn = void 0;
+const Badge_1 = require("../components/Badge");
+const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
+    if (!styledColumn.BadgeStyle) {
+        return;
+    }
+    return class BadgetRenderer {
+        init(params) {
+            var _a, _b, _c, _d;
+            this.eGui = document.createElement('div');
+            this.eGui.className = 'ab-Badge__wrapper';
+            const formattedValue = (_c = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value) !== null && _c !== void 0 ? _c : '';
+            const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, {
+                value: params.value,
+                oldValue: null,
+                displayValue: params.formatValue,
+                node: params.node,
+                column: abColumn,
+            });
+            const isGrouped = params.node.group;
+            const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
+            const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
+            if (
+            // grouped but do not incluide
+            (includeGrouped === false && isGrouped) ||
+                // empty values
+                isNullValue ||
+                // no badge
+                !badge) {
+                this.eGui.innerHTML = formattedValue;
+                return;
+            }
+            let icon = badge.Icon;
+            if (icon && 'name' in icon && icon.size === undefined) {
+                icon.size = 14;
+            }
+            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, Badge_1.Badge)({
+                adaptableStyle: badge.Style,
+                children: formattedValue,
+                icon,
+                iconPosition: (_d = badge.IconPosition) !== null && _d !== void 0 ? _d : 'start',
+            }), this.eGui);
+        }
+        getGui() {
+            return this.eGui;
+        }
+        destroy() {
+            var _a;
+            (_a = this.unmountReactRoot) === null || _a === void 0 ? void 0 : _a.call(this);
+        }
+        refresh(params) {
+            // by returning FALSE we force a re-render every time the cell value changes
+            return false;
+        }
+    };
+};
+exports.getBadgeRendererForColumn = getBadgeRendererForColumn;

package/src/agGrid/PercentBarRenderer.js

@@ -4,22 +4,26 @@ exports.getPercentBarRendererForColumn = void 0;
 const tslib_1 = require("tslib");
 const Helper_1 = tslib_1.__importDefault(require("../Utilities/Helpers/Helper"));
 const clamp_1 = tslib_1.__importDefault(require("lodash/clamp"));
-const FormatHelper_1 = require("../Utilities/Helpers/FormatHelper");
 const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.PercentBarStyle) {
         return;
     }
     return class PercentBarRenderer {
         init(params) {
-            if (!styledColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
-                return;
-            }
+            var _a, _b;
             const min = api.styledColumnApi.internalApi.getNumericStyleMinValue(styledColumn, abColumn, params.node, params.value);
             const max = api.styledColumnApi.internalApi.getNumericStyleMaxValue(styledColumn, abColumn, params.node, params.value);
             let value = params.value;
             if (Helper_1.default.objectNotExists(value)) {
                 value = 0;
             }
+            if (!styledColumn.IncludeGroupedRows && api.gridApi.isGroupRowNode(params.node)) {
+                if (params.value) {
+                    this.eGui = document.createElement('div');
+                    this.eGui.append(params.value);
+                }
+                return;
+            }
             const clampedValue = (0, clamp_1.default)(value, min, max);
             const percentageValue = ((clampedValue - min) / (max - min)) * 100;
             let cellBackColor;
@@ -33,15 +37,18 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                     cellBackColor = matchingRange.Color;
                 }
             }
+            const hasCellText = percentBarStyle.CellText && percentBarStyle.CellText.length > 0;
+            const isTextPositionMerged = percentBarStyle.CellTextPosition === 'Merged';
             if (cellBackColor) {
                 this.eGui = document.createElement('div');
                 this.eGui.className = 'ab-PercentBar__wrapper';
-                this.eGui.style.height = percentBarStyle.CellText ? '80%' : '100%';
+                this.eGui.style.height = hasCellText && !isTextPositionMerged ? '80%' : '100%';
                 this.eGui.style.display = 'flex';
                 this.eGui.style.flexDirection = 'column';
                 this.eGui.style.justifyContent = 'center';
                 const barEl = document.createElement('div');
                 barEl.className = 'ab-PercentBar__bar';
+                barEl.style.position = 'relative';
                 barEl.style.background = percentBarStyle.BackColor;
                 barEl.style.flex = '1';
                 const barInsideEl = document.createElement('div');
@@ -51,26 +58,39 @@ const getPercentBarRendererForColumn = (styledColumn, abColumn, api) => {
                 barInsideEl.style.width = `${percentageValue.toFixed(0)}%`;
                 barEl.append(barInsideEl);
                 this.eGui.append(barEl);
-                if (percentBarStyle.CellText) {
+                if (hasCellText) {
                     const textEl = document.createElement('div');
                     textEl.className = 'ab-PercentBar__text';
                     textEl.style.lineHeight = '1.2';
                     if (percentBarStyle.CellText.includes('CellValue')) {
-                        const activeFormatColumnsWithDisplayFormat = api.formatColumnApi.internalApi.getFormatColumnsWithDisplayFormatForColumn(abColumn);
-                        const formatColumn = api.formatColumnApi.internalApi.getMostRelevantFormatColumnForColumn(activeFormatColumnsWithDisplayFormat, abColumn, { node: params.node, value });
-                        if (formatColumn && api.scopeApi.isColumnInNumericScope(abColumn, formatColumn.Scope)) {
-                            const options = formatColumn.DisplayFormat.Options;
-                            value = api.formatColumnApi.internalApi.getNumberFormattedValue(params.value, params.node, abColumn, options);
-                        }
-                        else {
-                            value = (0, FormatHelper_1.NumberFormatter)(value, { FractionDigits: 2 });
-                        }
-                        textEl.innerText = value;
+                        textEl.innerText = (_b = (_a = params.formatValue) === null || _a === void 0 ? void 0 : _a.call(params, params.value)) !== null && _b !== void 0 ? _b : params.value;
                     }
                     if (percentBarStyle.CellText.includes('PercentageValue')) {
                         textEl.innerText += ' ' + `(${percentageValue.toFixed(0)}%)`;
                     }
-                    this.eGui.append(textEl);
+                    switch (percentBarStyle.CellTextPosition) {
+                        case 'Above':
+                            this.eGui.prepend(textEl);
+                            break;
+                        case 'Below':
+                            this.eGui.append(textEl);
+                            break;
+                        case 'Merged':
+                            textEl.style.position = 'absolute';
+                            // This allows to center verticly without knowing the height of the row
+                            textEl.style.top = '50%';
+                            textEl.style.transform = 'translateY(-50%)';
+                            // adds a bit of padding to the start/end of the bar
+                            textEl.style.left = '0';
+                            textEl.style.right = '0';
+                            textEl.style.paddingLeft = '5px';
+                            textEl.style.paddingRight = '5px';
+                            barEl.append(textEl);
+                            break;
+                        default:
+                            this.eGui.append(textEl);
+                            break;
+                    }
                 }
             }
         }

package/src/agGrid/agGridHelper.d.ts

@@ -23,6 +23,7 @@ export declare class agGridHelper {
     TrySetUpNodeIds(hasAutogeneratedPrimaryKey: boolean): boolean;
     createCheckboxRendererComp(columnId: string, isColumnReadOnly: boolean): ICellRendererFunc | undefined;
     createPercentBarRendererComp(styledColumn: StyledColumn, abColumn: AdaptableColumn): ICellRendererFunc;
+    createBadgeRendererComp(styledColumn: StyledColumn, abColumn: AdaptableColumn): any;
     getCleanValue(value: string): string | undefined;
     getRenderedValue(colDef: ColDef, valueToRender: any): any;
     createAdaptableColumnFromAgGridColumn(agGridColumn: Column, colsToGroups: Record<string, AdaptableColumnGroup>): AdaptableColumn;

package/src/agGrid/agGridHelper.js

@@ -36,6 +36,7 @@ const FlashingCellModule_1 = require("../Strategy/FlashingCellModule");
 const SettingsPanelModule_1 = require("../Strategy/SettingsPanelModule");
 const ChartingModule_1 = require("../Strategy/ChartingModule");
 const PercentBarRenderer_1 = require("./PercentBarRenderer");
+const BadgeRenderer_1 = require("./BadgeRenderer");
 const Helper_1 = require("../Utilities/Helpers/Helper");
 const StatusBarModule_1 = require("../Strategy/StatusBarModule");
 const GeneralConstants = tslib_1.__importStar(require("../Utilities/Constants/GeneralConstants"));
@@ -152,6 +153,9 @@ class agGridHelper {
     createPercentBarRendererComp(styledColumn, abColumn) {
         return (0, PercentBarRenderer_1.getPercentBarRendererForColumn)(styledColumn, abColumn, this.adaptable.api);
     }
+    createBadgeRendererComp(styledColumn, abColumn) {
+        return (0, BadgeRenderer_1.getBadgeRendererForColumn)(styledColumn, abColumn, this.adaptable.api);
+    }
     getCleanValue(value) {
         if (typeof value === 'string') {
             return value;

package/src/agGrid/editors/AdaptableNumberEditor/InternalAdaptableNumberEditor.js

@@ -70,5 +70,5 @@ exports.InternalAdaptableNumberEditor = React.forwardRef(function InternalAdapta
                     focus();
                 }
             } },
-            React.createElement(icons_1.Icon, { size: 18, name: "clear", tabIndex: 0 }))) : null));
+            React.createElement(icons_1.Icon, { size: 18, name: "close", tabIndex: 0 }))) : null));
 });

package/src/components/Badge/index.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AdaptableIcon, AdaptableStyle } from '../../types';
+export interface BadgeProps {
+    adaptableStyle: AdaptableStyle;
+    icon?: AdaptableIcon;
+    iconPosition?: 'start' | 'end' | 'Start' | 'End';
+}
+export declare const Badge: React.FunctionComponent<React.PropsWithChildren<BadgeProps>>;

package/src/components/Badge/index.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Badge = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const StyleHelper_1 = require("../../Utilities/Helpers/StyleHelper");
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const Badge = (props) => {
+    const { iconPosition = 'start', icon: iconProps } = props;
+    const preparedBadgePosition = iconPosition.toLowerCase();
+    const icon = iconProps && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: iconProps });
+    const style = (0, StyleHelper_1.toStyle)(props.adaptableStyle);
+    return (React.createElement("div", { className: "ab-Badge", style: style },
+        preparedBadgePosition === 'start' && icon,
+        props.children,
+        preparedBadgePosition === 'end' && icon));
+};
+exports.Badge = Badge;

package/src/components/Dashboard/DashboardToolbar.js

@@ -11,8 +11,8 @@ function DashboardToolbar(props) {
         React.createElement("div", { className: "ab-Dashboard__toolbar-content" }, props.children),
         React.createElement(rebass_1.Flex, { className: "ab-Dashboard__toolbar-title", flexDirection: "row", alignItems: "center" },
             React.createElement("span", null, props.title),
-            props.showConfigure && (React.createElement(SimpleButton_1.default, { icon: "build", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Configure ${props.title} Toolbar`, onClick: () => props.onConfigure() })),
+            props.showConfigure && (React.createElement(SimpleButton_1.default, { icon: "spanner", variant: "text", tone: "none", "data-name": "configure", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Configure ${props.title} Toolbar`, onClick: () => props.onConfigure() })),
             ' ',
-            props.showClose && (React.createElement(SimpleButton_1.default, { style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "clear", variant: "text", tone: "none", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
+            props.showClose && (React.createElement(SimpleButton_1.default, { style: { alignSelf: 'flex-end' }, disabled: props.accessLevel == 'ReadOnly', "data-name": "close", icon: "close", variant: "text", tone: "none", iconSize: 16, marginLeft: 1, tooltip: props.tooltip || `Close ${props.title} Toolbar`, onClick: () => props.onClose() })))));
 }
 exports.DashboardToolbar = DashboardToolbar;

package/src/components/Datepicker/index.js

@@ -81,7 +81,7 @@ exports.Datepicker = React.forwardRef((props, ref) => {
         '|': React.createElement("hr", { style: { width: '100%', height: 0, margin: 0, border: 'none' } }),
     };
     const footerButtons = datepickerButtons.map((buttonKey, index) => React.cloneElement(footerButtonsMap[buttonKey], { key: index }));
-    const clearButton = showClearButton ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "clear", onMouseDown: (e) => {
+    const clearButton = showClearButton ? (React.createElement(SimpleButton_1.default, { "data-name": "clear", variant: "text", tooltip: "Clear", iconSize: 20, padding: 0, icon: "close", onMouseDown: (e) => {
             e.preventDefault();
             clearValue();
         }, accessLevel: 'Full' })) : null;

package/src/components/DragAndDropContext/TabList.js

@@ -46,6 +46,6 @@ function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
             ? 'var(--ab-dashboard-toolbar-drag__background)'
             : 'var(--ab-color-primarylight)', ref: provided.innerRef }, provided.draggableProps, provided.dragHandleProps, { style: provided.draggableProps.style }),
         React.createElement("div", { style: { flex: 1 } }, title),
-        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "clear", variant: "text", padding: 1, onClick: onRemove })))));
+        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", padding: 1, onClick: onRemove })))));
 }
 exports.ToolbarItem = ToolbarItem;

package/src/components/Dropdown/index.js

@@ -79,7 +79,7 @@ const Dropdown = (props) => {
         selectedText = placeholder;
     }
     //20  ... 20 16
-    const renderClearButton = () => (React.createElement(SimpleButton_1.default, Object.assign({ variant: "text", icon: "clear", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1 }, clearButtonProps, { style: Object.assign({ zIndex: 10, color: 'inherit' }, (clearButtonProps ? clearButtonProps.style : null)), onClick: (e) => {
+    const renderClearButton = () => (React.createElement(SimpleButton_1.default, Object.assign({ variant: "text", icon: "close", tone: "none", tooltip: "Clear", iconSize: 20, px: 0, py: 0, marginRight: 1 }, clearButtonProps, { style: Object.assign({ zIndex: 10, color: 'inherit' }, (clearButtonProps ? clearButtonProps.style : null)), onClick: (e) => {
             e.preventDefault();
             onChange(null, e);
         } })));

package/src/components/DropdownButton/index.js

@@ -96,7 +96,7 @@ const DropdownButton = React.forwardRef((props, theRef) => {
                 onClear();
             }
             (_a = buttonRef.current) === null || _a === void 0 ? void 0 : _a.focus();
-        }, ml: 2, padding: 0, variant: 'text', icon: "clear" }, clearButtonProps, { style: Object.assign(Object.assign({}, clearButtonProps === null || clearButtonProps === void 0 ? void 0 : clearButtonProps.style), { visibility: showClearButton ? 'visible' : 'hidden' }) }))) : null;
+        }, ml: 2, padding: 0, variant: 'text', icon: "close" }, clearButtonProps, { style: Object.assign(Object.assign({}, clearButtonProps === null || clearButtonProps === void 0 ? void 0 : clearButtonProps.style), { visibility: showClearButton ? 'visible' : 'hidden' }) }))) : null;
     icon = (React.createElement(React.Fragment, null,
         spacer,
         hasClearButton ? clearButton : null,

package/src/components/FileDroppable/index.js

@@ -40,7 +40,7 @@ const readJSONFile = async (file, toJSON) => {
 };
 exports.readJSONFile = readJSONFile;
 const FileDroppable = (props) => {
-    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(icons_1.Icon, { name: "attach-file", size: 48 }) } = props, domProps = tslib_1.__rest(props, ["onDropSuccess", "message", "fileAccept", "helpText", "defaultText", "dragOverText", "icon"]);
+    const { onDropSuccess, message, fileAccept = '.json', helpText = 'AdapTable No Code Version', defaultText = 'Click here to select a JSON file to load or drag it here', dragOverText = 'Drop file here to start Adaptable Wizard', icon = React.createElement(icons_1.Icon, { name: "paperclip", size: 48 }) } = props, domProps = tslib_1.__rest(props, ["onDropSuccess", "message", "fileAccept", "helpText", "defaultText", "dragOverText", "icon"]);
     const [state, dispatch] = (0, react_1.useReducer)(reducer_1.default, initialState);
     const onDragEnter = (e) => {
         dispatch({

package/src/components/IconSelector/IconSelector.d.ts

@@ -0,0 +1,7 @@
+import { FunctionComponent } from 'react';
+export interface IconSelectorProps {
+    value?: string;
+    onChange: (iconName: string) => void;
+    clearable?: boolean;
+}
+export declare const IconSelector: FunctionComponent<IconSelectorProps>;

package/src/components/IconSelector/IconSelector.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.IconSelector = void 0;
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const rebass_1 = require("rebass");
+const AdaptableInput_1 = tslib_1.__importDefault(require("../../View/Components/AdaptableInput"));
+const icons_1 = tslib_1.__importStar(require("../icons"));
+const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
+const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
+const IconSelector = (props) => {
+    var _a;
+    const [query, setQuery] = react_1.default.useState('');
+    const allIcons = Object.keys(icons_1.default);
+    const filteredIcons = query
+        ? allIcons.filter((iconName) => {
+            return iconName.toLowerCase().includes(query.toLowerCase());
+        })
+        : allIcons;
+    let iconsElements = filteredIcons.map((iconName) => {
+        return (react_1.default.createElement(rebass_1.Flex, { key: iconName },
+            react_1.default.createElement(SimpleButton_1.default, { onClick: () => props.onChange(iconName), p: 2, variant: iconName === props.value ? 'raised' : 'text', tone: iconName === props.value ? 'accent' : 'none', icon: iconName })));
+    });
+    const popup = (react_1.default.createElement(rebass_1.Box, { className: "ab-IconSelector__Popup" },
+        react_1.default.createElement(rebass_1.Box, { mb: 2 },
+            react_1.default.createElement(rebass_1.Box, { mb: 2, fontSize: 4 }, "Select an Icon"),
+            react_1.default.createElement(AdaptableInput_1.default, { value: query, onChange: (event) => { var _a; return setQuery((_a = event.target.value) !== null && _a !== void 0 ? _a : ''); }, width: "100%" })),
+        react_1.default.createElement(rebass_1.Flex, { p: 2, style: { width: 300, maxHeight: 300, overflow: 'auto' }, flexWrap: "wrap" }, iconsElements)));
+    let value = 'No Icon Selected';
+    if (props.value in icons_1.default) {
+        value = (react_1.default.createElement(icons_1.Icon, { style: { display: 'inline-block' }, name: props.value }));
+    }
+    return (react_1.default.createElement(rebass_1.Flex, { className: "ab-IconSelector" },
+        react_1.default.createElement(OverlayTrigger_1.default, { preventPortalEventPropagation: false, render: () => popup, showEvent: "mouseenter", hideEvent: "mouseleave", hideDelay: 300 },
+            react_1.default.createElement(SimpleButton_1.default, { className: "ab-IconSelector__trigger", textAlign: "center", onClick: () => null, variant: "raised", width: 150, justifyContent: "center" }, value)),
+        ((_a = props.clearable) !== null && _a !== void 0 ? _a : true) && (react_1.default.createElement(SimpleButton_1.default, { disabled: !props.value, className: "ab-IconSelector__clear-button", ml: 2, onClick: (event) => {
+                event.stopPropagation();
+                event.preventDefault();
+                props.onChange('');
+            }, variant: "text", icon: "close" }))));
+};
+exports.IconSelector = IconSelector;

package/src/components/IconSelector/index.d.ts

@@ -0,0 +1 @@
+export * from './IconSelector';

package/src/components/IconSelector/index.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./IconSelector"), exports);

package/src/components/OverlayTrigger/index.js

@@ -73,6 +73,7 @@ const OverlayTrigger = React.forwardRef((props, ref) => {
     const [visible, doSetVisible] = (0, useProperty_1.default)(props, 'visible', false);
     const hideTimeoutRef = (0, react_1.useRef)(null);
     const setVisible = React.useCallback((visible) => {
+        onVisibleChange === null || onVisibleChange === void 0 ? void 0 : onVisibleChange(visible);
         if (!visible) {
             hideTimeoutRef.current = setTimeout(() => {
                 hideTimeoutRef.current = null;

package/src/components/Toggle/Toggle.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import { AdaptableInternalIconName } from '../../types';
+export declare type ToggleProps = {
+    onPressedChange: (pressed: boolean) => void;
+    pressed?: boolean;
+    icon?: AdaptableInternalIconName;
+};
+export declare const Toggle: React.FunctionComponent<React.PropsWithChildren<ToggleProps>>;

package/src/components/Toggle/Toggle.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Toggle = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const join_1 = tslib_1.__importDefault(require("../utils/join"));
+const Toggle = (_a) => {
+    var { onPressedChange, pressed, icon, children } = _a, rest = tslib_1.__rest(_a, ["onPressedChange", "pressed", "icon", "children"]);
+    const baseClassName = 'ab-Toggle';
+    return (React.createElement("button", Object.assign({}, rest, { className: (0, join_1.default)(baseClassName, pressed && `${baseClassName}--pressed`), onClick: () => onPressedChange(!pressed) }),
+        icon && React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: { name: icon } }),
+        children));
+};
+exports.Toggle = Toggle;

package/src/components/Toggle/ToggleGroup.d.ts

@@ -0,0 +1,2 @@
+import * as React from 'react';
+export declare const ToggleGroup: React.FunctionComponent<React.PropsWithChildren<unknown>>;

package/src/components/Toggle/ToggleGroup.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ToggleGroup = void 0;
+const tslib_1 = require("tslib");
+const React = tslib_1.__importStar(require("react"));
+const rebass_1 = require("rebass");
+const ToggleGroup = (props) => {
+    return React.createElement(rebass_1.Flex, { className: "ab-Toggle-Group" }, props.children);
+};
+exports.ToggleGroup = ToggleGroup;

package/src/components/Toggle/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Toggle';
+export * from './ToggleGroup';

package/src/components/Toggle/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+tslib_1.__exportStar(require("./Toggle"), exports);
+tslib_1.__exportStar(require("./ToggleGroup"), exports);

package/src/components/icons/DefaultIcon.js

@@ -11,5 +11,5 @@ exports.getSize = getSize;
 exports.default = (_a) => {
     var { children, size = DEFAULT_SIZE, name, tabIndex, color } = _a, props = tslib_1.__rest(_a, ["children", "size", "name", "tabIndex", "color"]);
     size = (0, exports.getSize)(size);
-    return (React.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 24 24", tabIndex: tabIndex }, props, { className: (0, join_1.default)(props.className, `ab-Icon ab-Icon--${name}`), style: Object.assign({ verticalAlign: 'middle', fill: color !== null && color !== void 0 ? color : 'currentColor' }, props.style) }), children));
+    return (React.createElement("svg", Object.assign({ width: size, height: size, viewBox: "0 0 24 24", tabIndex: tabIndex, "data-id": name, "data-name": "AdaptableIcon" }, props, { className: (0, join_1.default)(props.className, `ab-Icon ab-Icon--${name}`), style: Object.assign({ verticalAlign: 'middle', fill: color !== null && color !== void 0 ? color : 'currentColor' }, props.style) }), children));
 };