@adaptabletools/adaptable 12.0.0-canary.7 → 12.0.1-canary.0

package/src/View/Components/AdaptableDateInput/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
 import { AdaptableInputProps } from '../AdaptableInput';
 export declare type AdaptableDateInputProps = AdaptableInputProps;
-declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "max" | "required" | "default" | "high" | "low" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "disabled" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "type" | "min" | "contextMenu" | "value" | "onKeyDown" | "rows" | "name" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "checked" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
+declare const AdaptableDateInput: React.ForwardRefExoticComponent<Pick<import("../../../components/Input").InputProps, "max" | "required" | "default" | "high" | "low" | "start" | "open" | "media" | "hidden" | "cite" | "data" | "dir" | "form" | "label" | "p" | "slot" | "span" | "style" | "summary" | "title" | "pattern" | "async" | "defer" | "manifest" | "disabled" | "m" | "color" | "content" | "size" | "flex" | "wrap" | "padding" | "multiple" | "alignSelf" | "backgroundColor" | "fontSize" | "height" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "opacity" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "translate" | "width" | "margin" | "children" | "key" | "list" | "step" | "type" | "min" | "contextMenu" | "value" | "onKeyDown" | "rows" | "name" | "checked" | "className" | "id" | "lang" | "method" | "target" | "role" | "tabIndex" | "crossOrigin" | "href" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "classID" | "useMap" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "draggable" | "placeholder" | "spellCheck" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "as" | "hrefLang" | "integrity" | "rel" | "sizes" | "charSet" | "kind" | "src" | "srcLang" | "download" | "alt" | "coords" | "shape" | "autoPlay" | "controls" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "dateTime" | "acceptCharset" | "action" | "autoComplete" | "encType" | "noValidate" | "allowFullScreen" | "allowTransparency" | "frameBorder" | "marginHeight" | "marginWidth" | "sandbox" | "scrolling" | "seamless" | "srcDoc" | "srcSet" | "accept" | "capture" | "maxLength" | "minLength" | "readOnly" | "htmlFor" | "httpEquiv" | "optimum" | "reversed" | "selected" | "nonce" | "scoped" | "cellPadding" | "cellSpacing" | "colSpan" | "headers" | "rowSpan" | "scope" | "cols" | "poster" | "challenge" | "keyType" | "keyParams" | "mt" | "mb" | "ml" | "mr" | "my" | "marginY" | "mx" | "marginX" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "css" | "bg" | "placehoder"> & React.RefAttributes<HTMLInputElement>>;
 export default AdaptableDateInput;

package/src/View/Components/AdaptableObjectList/AdaptableObjectCompactList.js

@@ -11,7 +11,7 @@ const ValueSelector_1 = require("../ValueSelector");
 const baseClassName = 'ab-Adaptable-Object-Compact-List';
 const ICON_SIZE = 20;
 const AdaptableObjectCompactListItem = (props) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h;
+    var _a, _b, _c, _d, _e, _f;
     const dispatch = react_redux_1.useDispatch();
     const adaptable = AdaptableContext_1.useAdaptable();
     const objectView = props.module.toViewCompact(props.abObject);
@@ -23,15 +23,19 @@ const AdaptableObjectCompactListItem = (props) => {
     const handleDelete = React.useCallback(() => {
         dispatch(deleteAction);
     }, []);
-    const name = (_d = objectView.item.label) !== null && _d !== void 0 ? _d : objectView.item.name;
+    let labelEl = objectView.item.label;
+    if (typeof labelEl === 'function') {
+        labelEl = React.createElement(labelEl, { data: props.abObject });
+    }
+    labelEl = labelEl !== null && labelEl !== void 0 ? labelEl : objectView.item.name;
     return (React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item`, alignItems: "center" },
-        name && (React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item__Name` }, (_e = objectView.item.label) !== null && _e !== void 0 ? _e : objectView.item.name)),
+        labelEl && React.createElement(rebass_1.Flex, { className: `${baseClassName}__Item__Name` }, labelEl),
         React.createElement(rebass_1.Box, { flex: 1 },
             objectView.item.view &&
                 React.createElement(objectView.item.view, {
                     data: props.abObject,
                 }),
-            Boolean(((_f = objectView.item) === null || _f === void 0 ? void 0 : _f.values) && ((_h = (_g = objectView.item) === null || _g === void 0 ? void 0 : _g.values) === null || _h === void 0 ? void 0 : _h.length)) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
+            Boolean(((_d = objectView.item) === null || _d === void 0 ? void 0 : _d.values) && ((_f = (_e = objectView.item) === null || _e === void 0 ? void 0 : _e.values) === null || _f === void 0 ? void 0 : _f.length)) && (React.createElement(rebass_1.Box, { mb: 2, className: `${baseClassName}__Item__Values` },
                 React.createElement(ValueSelector_1.ValueOptionsTags, { style: { marginRight: 0 }, readOnly: true, options: objectView.item.values, value: objectView.item.values, allowWrap: true, toIdentifier: (c) => c, toLabel: (c) => React.createElement(React.Fragment, null, c) })))),
         React.createElement(rebass_1.Flex, { ml: 1 }, deleteAction && (React.createElement(SimpleButton_1.default, { iconSize: ICON_SIZE, icon: "delete", variant: "text", onClick: handleDelete, accessLevel: moduleAccessLevel })))));
 };

package/src/View/Components/AdaptableObjectList/AdaptableObjectList.js

@@ -59,9 +59,14 @@ const AdaptableObjectListItem = (props) => {
     return (React.createElement(rebass_1.Flex, { "data-name": "adaptable-object-list-item", "data-value": props.data.abObject.Uuid, as: "li", mb: 3, className: itemClassName },
         React.createElement(rebass_1.Box, { flex: 1, className: `${baseClassName}__rows` }, (_j = (_h = (_g = props.data.items).filter) === null || _h === void 0 ? void 0 : _h.call(_g, Boolean)) === null || _j === void 0 ? void 0 : _j.map((tag, index) => {
             var _a;
+            let labelEl = tag.label;
+            if (typeof tag.label === 'function') {
+                labelEl = React.createElement(tag.label, { data: props.data.abObject });
+            }
+            labelEl = labelEl !== null && labelEl !== void 0 ? labelEl : tag.name;
             return (React.createElement(rebass_1.Flex, { "data-name": tag.name, key: index, mb: 2, className: `${baseClassName}__row` },
                 React.createElement(rebass_1.Box, { className: `${baseClassName}__label`, mr: 3 },
-                    tag.label || tag.name,
+                    labelEl,
                     EditWizard && (React.createElement(SimpleButton_1.default, { accessLevel: accessLevel, className: `${baseClassName}__edit-property`, ml: 1, icon: "edit", tooltip: "edit", iconSize: 18, variant: "text", onClick: () => {
                             handleOnEdit(tag.name);
                         } }))),

package/src/View/Components/Buttons/ButtonPause.js

@@ -6,7 +6,17 @@ const React = tslib_1.__importStar(require("react"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../../../components/SimpleButton"));
 class ButtonPause extends React.Component {
     render() {
-        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: this.props.fillColor === 'red' ? 'pause-red' : 'pause', variant: "text" }, this.props)));
+        const buttonIcon = this.props.fillColor === 'red'
+            ? {
+                name: 'pause',
+                style: {
+                    fill: 'red',
+                },
+            }
+            : {
+                name: 'pause',
+            };
+        return (React.createElement(SimpleButton_1.default, Object.assign({ "data-name": "pause", tooltip: "Pause", iconSize: 20, icon: buttonIcon, variant: "text" }, this.props)));
     }
 }
 exports.ButtonPause = ButtonPause;

package/src/View/Components/FilterForm/QuickFilterForm.js

@@ -153,7 +153,7 @@ class QuickFilterFormComponent extends React.Component {
     }
     renderPredicateIcon(predicateDef) {
         if (!predicateDef || !predicateDef.icon) {
-            return React.createElement(icons_1.Icon, { name: "filter-outline" });
+            return React.createElement(icons_1.Icon, { name: "filter" });
         }
         if ('text' in predicateDef.icon) {
             return React.createElement("span", null, predicateDef.icon.text);

package/src/View/Components/Panels/PanelWithButton.d.ts

@@ -1,6 +1,7 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
 import { BoxProps } from 'rebass';
+import { AdaptableInternalIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
 export interface PanelWithButtonProps extends PanelProps {
     buttonContent?: React.ReactNode;
     buttonClick?: () => void;
@@ -10,7 +11,7 @@ export interface PanelWithButtonProps extends PanelProps {
     headerProps?: BoxProps & {
         'data-name': string;
     };
-    glyphicon?: string;
+    glyphicon?: AdaptableInternalIconName;
     buttonDisabled?: boolean;
     buttonStyle?: string;
     borderRadius?: string;

package/src/View/Components/Panels/PanelWithImage.d.ts

@@ -1,9 +1,10 @@
 import * as React from 'react';
 import { PanelProps } from '../../../components/Panel';
 import { BoxProps } from 'rebass';
+import { AdaptableInternalIconName } from '../../../PredefinedConfig/Common/AdaptableIcon';
 export interface PanelWithImageProps extends PanelProps {
-    glyphicon?: string;
-    icon?: string;
+    glyphicon?: AdaptableInternalIconName;
+    icon?: AdaptableInternalIconName;
     infoLink?: string;
     infoLinkDisabled?: boolean;
     borderRadius?: string;

package/src/View/Components/ToolPanel/AdaptableToolPanel.js

@@ -148,19 +148,11 @@ const AdaptableToolPanelComponent = (props) => {
         return props.api.toolPanelApi.getCustomToolPanelButtons().map((button) => {
             // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
             // with the next opportunity we should abstract it
-            // the default size of AdapTable SVG ModuleButtons
-            const defaultIconProps = {
-                style: {
-                    height: 'var(--ab-cmp-simple-button__height)',
-                    width: 'var(--ab-cmp-simple-button__width)',
-                },
-            };
             const toolPanelContext = {
                 adaptableApi: props.api,
                 toolPanelState: props.api.toolPanelApi.getToolPanelState(),
             };
             const buttonIcon = props.api.internalApi.getIconForButton(button, toolPanelContext);
-            const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
             let buttonStyle = props.api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = props.api.internalApi.getLabelForButton(button, toolPanelContext);
             let buttonTooltip = props.api.internalApi.getTooltipForButton(button, toolPanelContext);
@@ -171,9 +163,7 @@ const AdaptableToolPanelComponent = (props) => {
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                buttonLabel));
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         });
     };
     const onSetColumnVisibility = (name) => {

package/src/View/Components/ToolPanel/CustomToolPanelContent.js

@@ -44,20 +44,12 @@ const CustomToolPanelContent = (props) => {
         ((_a = customToolPanel.buttons) === null || _a === void 0 ? void 0 : _a.length) && (React.createElement("div", { id: buttonsDivId, className: `ab-ToolPanel__custom-content__buttons ${buttonsDivId}` }, customToolPanel.buttons.map((button) => {
             // TODO: variants of this mapping are present in several places (just search for api.internalApi.getStyleForButton() usages)
             // with the next opportunity we should abstract it
-            // the default size of AdapTable SVG ModuleButtons
-            const defaultIconProps = {
-                style: {
-                    height: 'var(--ab-cmp-simple-button__height)',
-                    width: 'var(--ab-cmp-simple-button__width)',
-                },
-            };
             const toolPanelContext = {
                 adaptableApi: api,
                 toolPanelState: api.toolPanelApi.getToolPanelState(),
                 customToolPanel: customToolPanel,
             };
             const buttonIcon = api.internalApi.getIconForButton(button, toolPanelContext);
-            const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
             let buttonStyle = api.internalApi.getStyleForButton(button, toolPanelContext);
             let buttonLabel = api.internalApi.getLabelForButton(button, toolPanelContext);
             let buttonTooltip = api.internalApi.getTooltipForButton(button, toolPanelContext);
@@ -68,9 +60,7 @@ const CustomToolPanelContent = (props) => {
             const buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text';
             const buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none';
             const uniqueKey = buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : uuid_1.createUuid();
-            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' },
-                buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                buttonLabel));
+            return (React.createElement(SimpleButton_1.default, { key: uniqueKey, variant: buttonVariant, tone: buttonTone, className: `ab-ToolPanel__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled, onClick: () => button.onClick(button, toolPanelContext), accessLevel: 'Full' }, buttonLabel));
         })))));
 };
 exports.CustomToolPanelContent = CustomToolPanelContent;

package/src/View/Dashboard/CustomDashboardButton.js

@@ -15,18 +15,7 @@ const CustomDashboardButton = (props) => {
         adaptableApi: props.api,
         dashboardState: props.api.dashboardApi.getDashboardState(),
     };
-    const defaultIconProps = {
-        style: {
-            height: 'var(--ab-cmp-simple-button__height)',
-            width: 'var(--ab-cmp-simple-button__width)',
-        },
-    };
     const buttonIcon = props.api.internalApi.getIconForButton(button, dashboardContext);
-    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
-    //    const iconProps: any = button.icon ? { ...button.icon } : null;
-    //    if (iconProps) {
-    //      delete iconProps.Uuid;
-    //    }
     let buttonStyle = props.api.internalApi.getStyleForButton(button, dashboardContext);
     let buttonLabel = props.api.internalApi.getLabelForButton(button, dashboardContext);
     let buttonTooltip = props.api.internalApi.getTooltipForButton(button, dashboardContext);
@@ -34,15 +23,13 @@ const CustomDashboardButton = (props) => {
         return null;
     }
     const disabled = button.disabled && button.disabled(button, dashboardContext);
-    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
+    return (React.createElement(SimpleButton_1.default, { key: buttonLabel, variant: buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'text', tone: buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'none', className: `ab-DashboardToolbar__Home__${kebabCase_1.default(buttonLabel)} ${(buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className) || ''}`, tooltip: buttonTooltip, icon: buttonIcon, disabled: disabled || props.accessLevel == 'ReadOnly', onClick: () => {
             var _a;
             (_a = button.onClick) === null || _a === void 0 ? void 0 : _a.call(button, button, dashboardContext);
             setTimeout(() => {
                 // mutate state to force a re-rendering
                 setComponentRevision(componentRevision + 1);
             }, 16);
-        }, accessLevel: 'Full' },
-        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-        buttonLabel));
+        }, accessLevel: 'Full' }, buttonLabel));
 };
 exports.CustomDashboardButton = CustomDashboardButton;

package/src/View/Dashboard/CustomToolbarWrapper.js

@@ -69,14 +69,7 @@ const CustomToolbarWrapper = (props) => {
                     adaptableApi: api,
                     dashboardState: api.dashboardApi.getDashboardState(),
                 };
-                const defaultIconProps = {
-                    style: {
-                        height: 'var(--ab-cmp-simple-button__height)',
-                        width: 'var(--ab-cmp-simple-button__width)',
-                    },
-                };
                 const buttonIcon = api.internalApi.getIconForButton(button, dashboardContext);
-                const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
                 let buttonStyle = api.internalApi.getStyleForButton(button, dashboardContext);
                 let buttonLabel = api.internalApi.getLabelForButton(button, dashboardContext);
                 let buttonTooltip = api.internalApi.getTooltipForButton(button, dashboardContext);
@@ -86,15 +79,13 @@ const CustomToolbarWrapper = (props) => {
                 const disabled = button.disabled && button.disabled(button, dashboardContext);
                 let buttonVariant = buttonStyle && buttonStyle.variant ? buttonStyle.variant : 'outlined';
                 let buttonTone = buttonStyle && buttonStyle.tone ? buttonStyle.tone : 'neutral';
-                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, variant: buttonVariant, tone: buttonTone, onClick: () => {
+                return (React.createElement(SimpleButton_1.default, { style: { marginLeft: index ? 'var(--ab-space-1)' : 0 }, key: index, disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, variant: buttonVariant, tone: buttonTone, onClick: () => {
                         button.onClick ? button.onClick(button, dashboardContext) : null;
                         setTimeout(() => {
                             // mutate state to force a re-rendering
                             setComponentRevision(componentRevision + 1);
                         }, 16);
-                    } },
-                    buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                    buttonLabel));
+                    } }, buttonLabel));
             }))));
 };
 exports.CustomToolbarWrapper = CustomToolbarWrapper;

package/src/View/DataChangeHistory/DataChangeHistoryGrid.js

@@ -113,6 +113,7 @@ const buildAdaptableOptions = (mainAdaptableInstance, gridOptions, adaptableCont
         },
         layoutOptions: {
             createDefaultLayout: false,
+            autoSizeColumnsInLayout: true,
         },
         actionOptions: actionOptions,
         predefinedConfig: {
@@ -287,7 +288,7 @@ const getColumnHeaderLabel = (columnId, mainAdaptableInstance) => {
     return headerMap.get(columnId);
 };
 const getChangeTriggerLabel = (changeInfo) => {
-    return changeInfo.trigger === 'tick' ? 'Ticking data' : 'User edit';
+    return changeInfo.trigger === 'tick' ? 'Ticking' : 'User Edit';
 };
 const filterChangeHistoryLog = (changeObject, filterValues) => {
     const result = {};

package/src/View/FreeTextColumn/Wizard/FreeTextColumnSettingsWizardSection.js

@@ -60,6 +60,7 @@ const isValidFreeTextColumn = (data, api) => {
 };
 exports.isValidFreeTextColumn = isValidFreeTextColumn;
 const FreeTextColumnSettingsWizardSection = (props) => {
+    var _a;
     const { data, api } = OnePageAdaptableWizard_1.useOnePageAdaptableWizardContext();
     const Pattern = api.internalApi.getAdaptableOptions().userInterfaceOptions.dateInputOptions.dateFormat;
     const [ColumnNameFocused, setColumnNameFocused] = react_1.useState(false);
@@ -128,6 +129,11 @@ const FreeTextColumnSettingsWizardSection = (props) => {
                 } })) : (React.createElement(AdaptableInput_1.default, { value: data.DataType === 'Date' && data.DefaultValue
                     ? DateHelper_1.parseToISO(data.DefaultValue, Pattern) || ''
                     : data.DefaultValue || '', style: { width: '100%', maxWidth: 500 }, type: data.DataType === 'Number' ? 'number' : data.DataType === 'Date' ? 'date' : 'text', placeholder: "Default Column Value (not required)", onChange: (e) => handleDefaultValueChange(e) }))),
+            React.createElement(FormLayout_1.FormRow, { label: "Header Tooltip" },
+                React.createElement(Input_1.default, { "data-name": "header-tooltip", type: "text", style: { width: '100%', maxWidth: 500 }, value: ((_a = data.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.HeaderToolTip) || '', onChange: (e) => handleSpecialColumnSettingsChange({
+                        HeaderToolTip: e.target.value,
+                    }) })),
+            ' ',
             data.DataType == 'String' && (React.createElement(FormLayout_1.FormRow, { label: "Editor Type" },
                 React.createElement(Radio_1.default, { value: "Inline", checked: data.TextEditor == 'Inline', onChange: (_, e) => onDynamicSelectChanged(e), marginRight: 2 }, "Inline Editor"),
                 React.createElement(Radio_1.default, { value: "Large", checked: data.TextEditor == 'Large', onChange: (_, e) => onDynamicSelectChanged(e) }, "Large Editor")))),

package/src/View/GridInfo/GridInfoPopup.js

@@ -102,7 +102,7 @@ const GridInfoPopup = (props) => {
         return React.createElement(AdaptableObjectRow_1.AdaptableObjectRow, { key: index, colItems: x });
     });
     const showRadioButtons = [showGridSummary, showAdaptableOptions, showColumnInfo, showAdaptableObjects].filter((item) => item).length > 1;
-    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Grid Info', glyphicon: 'info-sign' },
+    return (React.createElement(PopupPanel_1.PopupPanel, { headerText: 'Grid Info', glyphicon: 'info' },
         React.createElement(rebass_1.Flex, { marginBottom: 2, padding: 3 }, showRadioButtons && (React.createElement(React.Fragment, null,
             showGridSummary && (React.createElement(Radio_1.default, { "data-name": "radioButton-GridSummary", marginRight: 3, value: "GridSummary", checked: state.ActiveTab == 'GridSummary', onChange: (_, e) => onShowGridSummaryChanged('GridSummary') }, "Summary")),
             showAdaptableOptions && (React.createElement(Radio_1.default, { "data-name": "radioButton-AdaptableOptions", marginRight: 3, value: "AdaptableOptions", checked: state.ActiveTab == 'AdaptableOptions', onChange: (_, e) => onShowGridSummaryChanged('AdaptableOptions') }, "Options")),

package/src/View/UIHelper.d.ts

@@ -3,7 +3,7 @@ import { EditableConfigEntityState } from './Components/SharedProps/EditableConf
 import { StatusColour } from '../PredefinedConfig/Common/Enums';
 import { AdaptableStyle } from '../PredefinedConfig/Common/AdaptableStyle';
 import { Schedule, Weekday } from '../PredefinedConfig/Common/Schedule';
-import { AdaptableColumnDataType, AdaptableOptions } from '../types';
+import { AdaptableColumnDataType, AdaptableInternalIconName, AdaptableOptions } from '../types';
 import { AdaptableAlert } from '../PredefinedConfig/Common/AdaptableAlert';
 import { AdaptableMessageType } from '../PredefinedConfig/Common/AdaptableMessageType';
 export declare const BLACK: string;
@@ -36,7 +36,7 @@ export declare function IsEmptyStyle(style: AdaptableStyle): boolean;
 export declare function IsNotEmptyStyle(style: AdaptableStyle): boolean;
 export declare function getMessageTypeByStatusColour(statusColour: StatusColour): AdaptableMessageType;
 export declare function getButtonToneByMessageType(messageType: AdaptableMessageType): 'success' | 'error' | 'neutral' | 'none' | 'warning' | 'info' | 'accent';
-export declare function getGlyphByMessageType(messageType: AdaptableMessageType): string;
+export declare function getGlyphByMessageType(messageType: AdaptableMessageType): AdaptableInternalIconName;
 export declare function getColorByMessageType(messageType: AdaptableMessageType): string;
 export declare function getStyleForStatusColour(statusColour: StatusColour): CSSProperties;
 export declare function getStyleForMessageType(messageType: AdaptableMessageType): CSSProperties;

package/src/agGrid/ActionColumnRenderer.js

@@ -45,14 +45,10 @@ class ActionColumnRenderer {
                     if (button.hidden && button.hidden(button, context)) {
                         return;
                     }
-                    const defaultIconProps = {
-                        style: {
-                            height: 15,
-                            width: 15,
-                        },
-                    };
-                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context);
-                    const iconProps = buttonIcon && Object.assign({}, defaultIconProps, buttonIcon);
+                    const buttonIcon = adaptableApi.internalApi.getIconForButton(button, context, {
+                        height: 15,
+                        width: 15,
+                    });
                     const buttonStyle = adaptableApi.internalApi.getStyleForButton(button, context);
                     const buttonLabel = adaptableApi.internalApi.getLabelForButton(button, context);
                     const buttonTooltip = adaptableApi.internalApi.getTooltipForButton(button, context);
@@ -66,9 +62,7 @@ class ActionColumnRenderer {
                         }, 16);
                     };
                     const disabled = button.disabled && button.disabled(button, context);
-                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' },
-                        buttonIcon ? React.createElement("img", Object.assign({}, iconProps)) : null,
-                        buttonLabel));
+                    return (React.createElement(SimpleButton_1.default, { key: button.Uuid, "data-name": `action-button-${index + 1}`, variant: (_a = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.variant) !== null && _a !== void 0 ? _a : 'text', disabled: disabled, tooltip: buttonTooltip, icon: buttonIcon, tone: (_b = buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.tone) !== null && _b !== void 0 ? _b : 'none', onClick: handleClick, className: buttonStyle === null || buttonStyle === void 0 ? void 0 : buttonStyle.className, accessLevel: 'Full' }, buttonLabel));
                 })));
             };
             const eGui = this.eGui;

package/src/agGrid/Adaptable.d.ts

@@ -1,4 +1,4 @@
-import { ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, RowNode, ValueGetterParams, ValueSetterParams } from '@ag-grid-community/all-modules';
+import { ColDef, ColGroupDef, Column, ExcelStyle, GridOptions, Module, RowNode } from '@ag-grid-community/all-modules';
 import { AdaptableNoCodeWizardOptions, IAdaptableNoCodeWizard } from '../AdaptableInterfaces/AdaptableNoCodeWizard';
 import { IAdaptable } from '../AdaptableInterfaces/IAdaptable';
 import { AdaptableOptions } from '../AdaptableOptions/AdaptableOptions';
@@ -18,7 +18,6 @@ import { SelectedRowInfo } from '../PredefinedConfig/Selection/SelectedRowInfo';
 import { AdaptableTheme } from '../PredefinedConfig/ThemeState';
 import { IAdaptableStore } from '../Redux/Store/Interface/IAdaptableStore';
 import { IModuleCollection } from '../Strategy/Interface/IModule';
-import { AdaptableColumnType } from '../types';
 import { EmitterCallback } from '../Utilities/Emitter';
 import { IPPStyle } from '../Utilities/Interface/IPPStyle';
 import { LicenseService } from '../Utilities/Services/LicenseService';
@@ -31,8 +30,6 @@ import { IModuleService } from '../Utilities/Services/Interface/IModuleService';
 import { IEntitlementService } from '../Utilities/Services/Interface/IEntitlementService';
 import { IQueryLanguageService } from '../Utilities/Services/Interface/IQueryLanguageService';
 import { IAlertService } from '../Utilities/Services/Interface/IAlertService';
-import { AdaptableNumberEditor } from './editors/AdaptableNumberEditor';
-import { AdaptableDateEditor } from './editors/AdaptableDateEditor';
 import { ColumnSetupInfo } from './ColumnSetupInfo';
 import { CustomSort } from '../PredefinedConfig/CustomSortState';
 import { ColumnValuesComparer } from '../AdaptableOptions/GeneralOptions';
@@ -224,28 +221,7 @@ export declare class Adaptable implements IAdaptable {
      */
     private mapColumnDefs;
     private getColDefsForSpecialColumns;
-    getColDefsForFreeTextColumns(): {
-        headerName: string;
-        colId: string;
-        editable: boolean;
-        hide: boolean;
-        width: number;
-        enableValue: boolean;
-        filter: boolean;
-        floatingFilter: boolean;
-        resizable: boolean;
-        enableRowGroup: boolean;
-        sortable: boolean;
-        enablePivot: boolean;
-        suppressMenu: boolean;
-        suppressMovable: boolean;
-        headerTooltip: string;
-        cellEditor: string | typeof AdaptableNumberEditor | typeof AdaptableDateEditor;
-        type: AdaptableColumnType[];
-        valueSetter: (params: ValueSetterParams) => any;
-        cellRenderer: import("@ag-grid-community/all-modules").ICellRendererFunc;
-        valueGetter: (params: ValueGetterParams) => any;
-    }[];
+    getColDefsForFreeTextColumns(): ColDef[];
     setupColumnValueGetter({ col }: ColumnSetupInfo): void;
     setupColumnAggFunc({ col }: ColumnSetupInfo): void;
     private getColDefsForRowEditColumns;

package/src/agGrid/Adaptable.js

@@ -62,7 +62,6 @@ const StatusBarState_1 = require("../PredefinedConfig/StatusBarState");
 const createAgStatusPanelComponent_1 = require("./createAgStatusPanelComponent");
 const AdaptableStatusBar_1 = require("../View/StatusBar/AdaptableStatusBar");
 const RowEditService_1 = require("../Utilities/Services/RowEditService");
-const rowEditIcons_1 = require("./rowEditIcons");
 const tinycolor = require('tinycolor2');
 all_modules_1.ModuleRegistry.registerModules(all_modules_1.AllCommunityModules);
 const GROUP_PATH_SEPARATOR = '/';
@@ -2132,7 +2131,6 @@ class Adaptable {
                 : freeTextColumn.DataType === 'Date'
                     ? AdaptableDateEditor_1.AdaptableDateEditor
                     : null;
-            LoggingHelper_1.LogAdaptableInfo('Setting up FreeText Column: ' + freeTextColumn.ColumnId);
             const columnTypes = [
                 GeneralConstants_1.AB_SPECIAL_COLUMN,
                 this.agGridHelper.getAgGridDataType(freeTextColumn.DataType),
@@ -2140,7 +2138,7 @@ class Adaptable {
             if (ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty((_a = freeTextColumn === null || freeTextColumn === void 0 ? void 0 : freeTextColumn.FreeTextColumnSettings) === null || _a === void 0 ? void 0 : _a.ColumnTypes)) {
                 columnTypes.push(...freeTextColumn.FreeTextColumnSettings.ColumnTypes);
             }
-            return {
+            const newColDef = {
                 headerName: freeTextColumn.FriendlyName || freeTextColumn.ColumnId,
                 colId: freeTextColumn.ColumnId,
                 editable: true,
@@ -2155,7 +2153,6 @@ class Adaptable {
                 enablePivot: freeTextColumnSettings.Pivotable,
                 suppressMenu: freeTextColumnSettings.SuppressMenu,
                 suppressMovable: freeTextColumnSettings.SuppressMovable,
-                headerTooltip: freeTextColumnSettings.HeaderToolTip,
                 cellEditor: dataTypeEditor !== null && dataTypeEditor !== void 0 ? dataTypeEditor : (freeTextColumn.TextEditor && freeTextColumn.TextEditor == 'Large'
                     ? 'agLargeTextCellEditor'
                     : 'agTextCellEditor'),
@@ -2168,6 +2165,11 @@ class Adaptable {
                     : undefined,
                 valueGetter: (params) => this.api.freeTextColumnApi.getFreeTextColumnValueFromRowNode(freeTextColumn, params.node),
             };
+            if (freeTextColumnSettings.HeaderToolTip) {
+                newColDef.headerTooltip = freeTextColumnSettings.HeaderToolTip;
+            }
+            LoggingHelper_1.LogAdaptableInfo('Setting up FreeText Column: ' + freeTextColumn.ColumnId);
+            return newColDef;
         });
     }
     setupColumnValueGetter({ col }) {
@@ -2193,57 +2195,55 @@ class Adaptable {
         }
         const editButtons = actionRowButtons
             .map((buttonName) => {
-            if (buttonName === 'create') {
-                // we need this dirty hack until ActionColumn support for custom icons is improved
-                const label = rowEditIcons_1.rowAddIcon;
-                return {
-                    label,
+            const button = buttonName === 'create'
+                ? {
+                    icon: {
+                        name: 'add-row',
+                    },
                     tooltip: 'Create',
                     onClick: () => {
                         this.api.actionApi.displayCreateActionRow();
                     },
-                };
-            }
-            if (buttonName === 'edit') {
-                // we need this dirty hack until ActionColumn support for custom icons is improved
-                const label = rowEditIcons_1.rowEditIcon;
-                return {
-                    label,
-                    tooltip: 'Edit',
-                    onClick: (button, context) => {
-                        this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
-                    },
-                };
-            }
-            if (buttonName === 'clone') {
-                // we need this dirty hack until ActionColumn support for custom icons is improved
-                const label = rowEditIcons_1.rowCloneIcon;
-                return {
-                    label,
-                    tooltip: 'Clone',
-                    onClick: (button, context) => {
-                        this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
-                    },
-                };
-            }
-            if (buttonName === 'delete') {
-                // we need this dirty hack until ActionColumn support for custom icons is improved
-                const label = rowEditIcons_1.rowDeleteIcon;
-                return {
-                    label,
-                    tooltip: 'Delete',
-                    onClick: (button, context) => {
-                        var _a, _b;
-                        const eventInfo = {
-                            type: 'rowDeleted',
-                            rowNode: context.rowNode,
-                            adaptableApi: context.adaptableApi,
-                        };
-                        this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
-                        (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
-                    },
-                };
-            }
+                }
+                : buttonName === 'edit'
+                    ? {
+                        icon: {
+                            name: 'edit',
+                        },
+                        tooltip: 'Edit',
+                        onClick: (button, context) => {
+                            this.api.actionApi.displayEditActionRow(context.primaryKeyValue);
+                        },
+                    }
+                    : buttonName === 'clone'
+                        ? {
+                            icon: {
+                                name: 'clone',
+                            },
+                            tooltip: 'Clone',
+                            onClick: (button, context) => {
+                                this.api.actionApi.displayCloneActionRow(context.primaryKeyValue);
+                            },
+                        }
+                        : buttonName === 'delete'
+                            ? {
+                                icon: {
+                                    name: 'delete',
+                                },
+                                tooltip: 'Delete',
+                                onClick: (button, context) => {
+                                    var _a, _b;
+                                    const eventInfo = {
+                                        type: 'rowDeleted',
+                                        rowNode: context.rowNode,
+                                        adaptableApi: context.adaptableApi,
+                                    };
+                                    this.api.eventApi.emit('ActionRowSubmitted', eventInfo);
+                                    (_b = (_a = this.adaptableOptions.actionOptions.actionRowFormOptions).onFormSubmit) === null || _b === void 0 ? void 0 : _b.call(_a, eventInfo);
+                                },
+                            }
+                            : undefined;
+            return button;
         })
             .filter(Boolean);
         if (!editButtons.length) {

package/src/agGrid/agGridMenuHelper.d.ts

@@ -12,6 +12,7 @@ export declare class agGridMenuHelper {
     createAgGridMenuDefFromAdaptableMenu(adaptableMenuItem: AdaptableMenuItem): MenuItemDef;
     createAgGridColumnMenuDefFromUserMenu(menuItem: UserMenuItem<ColumnMenuContext>, menuContext: ColumnMenuContext): MenuItemDef;
     createAgGridContextMenuDefFromUserMenu(menuItem: UserMenuItem<ContextMenuContext>, menuContext: ContextMenuContext): MenuItemDef;
+    private mapAdaptableIconToAgGridIcon;
     createAdaptableColumnMenuItemFromUserMenu(menuItem: UserMenuItem<ColumnMenuContext>, menuContext: ColumnMenuContext): AdaptableMenuItem;
     createAgGridColumnMenuItems(originalgetMainMenuItems: GetMainMenuItems, params: GetMainMenuItemsParams): (string | MenuItemDef)[] | undefined;
     createGroupedColumnMenuItem(): MenuItemDef | undefined;