@adaptabletools/adaptable 16.0.0-canary.1 → 16.0.0-canary.3

package/src/agGrid/BadgeRenderer.js

@@ -1,24 +1,35 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.getBadgeRendererForColumn = void 0;
-const Badge_1 = require("../components/Badge");
+const Badge_1 = require("../View/Components/Badge");
+const renderWithAdaptableContext_1 = require("../View/renderWithAdaptableContext");
 const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
     if (!styledColumn.BadgeStyle) {
         return;
     }
     return class BadgetRenderer {
+        getAdaptableInstance(params) {
+            const adaptable = params.api.__adaptable;
+            return adaptable;
+        }
         init(params) {
-            var _a, _b, _c, _d, _e, _f;
+            var _a, _b, _c, _d;
+            const adaptable = this.getAdaptableInstance(params);
+            const adapatableApi = adaptable.api;
             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, {
+            const predicateDefHandlerContext = {
                 value: params.value,
                 oldValue: null,
                 displayValue: params.formatValue,
                 node: params.node,
                 column: abColumn,
-            });
+                adaptableApi: adapatableApi,
+                userName: adapatableApi.optionsApi.getUserName(),
+                adaptableId: adapatableApi.optionsApi.getAdaptableId(),
+            };
+            const badge = api.styledColumnApi.internalApi.getApplicableBadge(styledColumn, predicateDefHandlerContext);
             const isGrouped = params.node.group;
             const includeGrouped = Boolean(styledColumn.IncludeGroupedRows);
             const isNullValue = formattedValue === '' || formattedValue === null || formattedValue === undefined;
@@ -32,24 +43,12 @@ const getBadgeRendererForColumn = (styledColumn, abColumn, api) => {
                 this.eGui.innerHTML = formattedValue;
                 return;
             }
-            let icon = badge.Icon;
-            if (icon && 'name' in icon && icon.size === undefined) {
-                icon.size = 14;
-            }
-            const userInterfaceOptions = (_d = api.optionsApi.getAdaptableOptions()) === null || _d === void 0 ? void 0 : _d.userInterfaceOptions;
-            const customDefinedIcons = (_e = userInterfaceOptions.customIcons) !== null && _e !== void 0 ? _e : [];
-            let customIcon = badge.Icon && 'name' in badge.Icon
-                ? api.userInterfaceApi.getCustomIconDefinition(badge.Icon.name)
-                : null;
-            if (customIcon) {
-                icon = customIcon;
-            }
-            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, Badge_1.Badge)({
+            this.unmountReactRoot = api.internalApi.getAdaptableInstance().renderReactRoot((0, renderWithAdaptableContext_1.renderWithAdaptableContext)((0, Badge_1.Badge)({
                 adaptableStyle: badge.Style,
                 children: formattedValue,
-                icon,
-                iconPosition: (_f = badge.IconPosition) !== null && _f !== void 0 ? _f : 'start',
-            }), this.eGui);
+                icon: badge.Icon,
+                iconPosition: (_d = badge.IconPosition) !== null && _d !== void 0 ? _d : 'start',
+            }), adaptable), this.eGui);
         }
         getGui() {
             return this.eGui;

package/src/agGrid/CheckboxRenderer.js

@@ -30,7 +30,7 @@ const getCheckboxRendererForColumn = (columnId, isColumnReadOnly, api) => {
     CheckboxRenderer.prototype.checkedHandler = function (e) {
         let checked = e.target.checked;
         this.params.node.setDataValue(columnId, checked);
-        api.styledColumnApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
+        api.styledColumnApi.internalApi.fireCheckboxColumnClickedEvent(columnId, this.params.node.data, api.gridApi.getPrimaryKeyValueForRowNode(this.params.node), checked);
     };
     CheckboxRenderer.prototype.suppressEditEvent = function (event) {
         if (event.target === this.eGui) {

package/src/agGrid/agGridHelper.js

@@ -221,7 +221,7 @@ class agGridHelper {
             }
         }
         // lets set this here one as the function cannot change the result so dont need to run it each time
-        let excludeColumnFromQuickSearch = this.adaptable.adaptableOptions.searchOptions.excludeColumnFromQuickSearch;
+        let excludeColumnFromQuickSearch = this.adaptable.adaptableOptions.quickSearchOptions.excludeColumnFromQuickSearch;
         if (excludeColumnFromQuickSearch) {
             if (excludeColumnFromQuickSearch(abColumn)) {
                 abColumn.isExcludedFromQuickSearch = true;
@@ -494,6 +494,8 @@ class agGridHelper {
                     return 'Date';
                 case 'abColDefObject':
                     return 'Object';
+                case 'abColDefStringArray':
+                    return 'StringArray';
                 case 'abColDefNumberArray':
                     return 'NumberArray';
                 case 'abColDefTupleNumberArray':
@@ -540,7 +542,7 @@ class agGridHelper {
             }
         }
         // if they have selected to clear searches on startup then do it
-        if (this.adaptable.adaptableOptions.searchOptions.clearSearchesOnStartUp) {
+        if (this.adaptable.adaptableOptions.quickSearchOptions.clearSearchesOnStartUp) {
             if (StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.adaptable.api.quickSearchApi.getQuickSearchState().QuickSearchText) ||
                 StringExtensions_1.StringExtensions.IsNotNullOrEmpty(this.adaptable.api.queryApi.getCurrentQuery()) ||
                 ArrayExtensions_1.ArrayExtensions.IsNotNullOrEmpty(this.adaptable.api.dataSetApi.getDataSets())) {

package/src/agGrid/agGridMenuHelper.js

@@ -5,7 +5,7 @@ const tslib_1 = require("tslib");
 const ArrayExtensions_1 = require("../Utilities/Extensions/ArrayExtensions");
 const icons_1 = require("../components/icons");
 const flatten_1 = tslib_1.__importDefault(require("lodash/flatten"));
-const AdaptableIconComponent_1 = require("../components/AdaptableIconComponent");
+const Icon_1 = require("../components/Icon");
 // tslint:disable-next-line: class-name
 class agGridMenuHelper {
     constructor(adaptable, gridOptions) {
@@ -168,11 +168,18 @@ class agGridMenuHelper {
         };
     }
     mapAdaptableIconToAgGridIcon(adaptableIcon, style) {
-        if ((0, AdaptableIconComponent_1.isAdaptableElementIcon)(adaptableIcon)) {
-            return adaptableIcon.element;
+        const icon = this.adaptable.api.userInterfaceApi.internalApi.prepareAdaptableIconDef(adaptableIcon);
+        if ((0, Icon_1.isAdaptableElementIcon)(icon)) {
+            let element = icon.element;
+            if (typeof element === 'string') {
+                return element;
+            }
+            // THe element neets to be cloned.
+            // when it is used in more than one plce the element is removed from the DOM
+            return element.cloneNode(true);
         }
         else {
-            return (0, icons_1.iconToString)(adaptableIcon, {
+            return (0, icons_1.iconToString)(icon, {
                 fill: 'var(--ab-color-text-on-primary)',
             });
         }

package/src/agGrid/attachAddaptableColumnTypes.d.ts

@@ -9,6 +9,7 @@ export declare const attachColumnTypes: (gridOptions: GridOptions) => {
     abColDefDate: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefObject: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefCustom: import("@ag-grid-community/core").ColDef<any, any>;
+    abColDefStringArray: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefNumberArray: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefTupleNumberArray: import("@ag-grid-community/core").ColDef<any, any>;
     abColDefObjectNumberArray: import("@ag-grid-community/core").ColDef<any, any>;

package/src/agGrid/attachAddaptableColumnTypes.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.attachColumnTypes = void 0;
 const GeneralConstants_1 = require("../Utilities/Constants/GeneralConstants");
 const attachColumnTypes = (gridOptions) => {
-    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l;
     gridOptions.columnTypes = (_a = gridOptions.columnTypes) !== null && _a !== void 0 ? _a : {};
     return Object.assign(gridOptions.columnTypes, {
         [GeneralConstants_1.AB_SPECIAL_COLUMN]: {},
@@ -13,9 +13,10 @@ const attachColumnTypes = (gridOptions) => {
         abColDefDate: (_e = gridOptions.columnTypes.abColDefDate) !== null && _e !== void 0 ? _e : {},
         abColDefObject: (_f = gridOptions.columnTypes.abColDefObject) !== null && _f !== void 0 ? _f : {},
         abColDefCustom: (_g = gridOptions.columnTypes.abColDefCustom) !== null && _g !== void 0 ? _g : {},
-        abColDefNumberArray: (_h = gridOptions.columnTypes.abColDefNumberArray) !== null && _h !== void 0 ? _h : {},
-        abColDefTupleNumberArray: (_j = gridOptions.columnTypes.abColDefTupleNumberArray) !== null && _j !== void 0 ? _j : {},
-        abColDefObjectNumberArray: (_k = gridOptions.columnTypes.abColDefObjectNumberArray) !== null && _k !== void 0 ? _k : {},
+        abColDefStringArray: (_h = gridOptions.columnTypes.abColDefStringArray) !== null && _h !== void 0 ? _h : {},
+        abColDefNumberArray: (_j = gridOptions.columnTypes.abColDefNumberArray) !== null && _j !== void 0 ? _j : {},
+        abColDefTupleNumberArray: (_k = gridOptions.columnTypes.abColDefTupleNumberArray) !== null && _k !== void 0 ? _k : {},
+        abColDefObjectNumberArray: (_l = gridOptions.columnTypes.abColDefObjectNumberArray) !== null && _l !== void 0 ? _l : {},
     });
 };
 exports.attachColumnTypes = attachColumnTypes;

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

@@ -20,7 +20,7 @@ function getStartValue(params) {
         return '';
     }
     if (params.eventKey && isValidChar(params.eventKey)) {
-        return params.eventKey;
+        return Number(params.eventKey);
     }
     return params.value;
 }

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

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { AdaptableElementIcon, AdaptableCustomIcon, AdaptableIcon, AdaptableSystemIcon } from '../../PredefinedConfig/Common/AdaptableIcon';
+export interface IconComponentProps {
+    icon: AdaptableIcon;
+    iconClassName?: string;
+}
+export declare const IconComponent: (props: IconComponentProps) => JSX.Element;
+export declare const isAdaptableSystemIcon: (icon: unknown) => icon is AdaptableSystemIcon;
+export declare const isAdaptableCustomIcon: (icon: unknown) => icon is AdaptableCustomIcon;
+export declare const isAdaptableElementIcon: (icon: unknown) => icon is AdaptableElementIcon;
+export declare const isAdaptableIcon: (icon: unknown) => icon is AdaptableIcon;

package/src/components/{AdaptableIconComponent → Icon}/index.js

@@ -1,12 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableExternalIcon = exports.isAdaptableInternalIcon = exports.AdaptableIconComponent = void 0;
+exports.isAdaptableIcon = exports.isAdaptableElementIcon = exports.isAdaptableCustomIcon = exports.isAdaptableSystemIcon = exports.IconComponent = void 0;
 const tslib_1 = require("tslib");
 const React = tslib_1.__importStar(require("react"));
 const icons_1 = tslib_1.__importStar(require("../icons"));
 const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const react_1 = require("react");
-const AdaptableIconComponent = (props) => {
+const IconComponent = (props) => {
     var _a, _b, _c, _d, _e;
     const { icon, iconClassName } = props;
     if (!icon) {
@@ -38,10 +38,10 @@ const AdaptableIconComponent = (props) => {
             }
         };
     }, [icon]);
-    if ((0, exports.isAdaptableInternalIcon)(icon) && icon.name in icons_1.default) {
+    if ((0, exports.isAdaptableSystemIcon)(icon) && icon.name in icons_1.default) {
         return (React.createElement(icons_1.Icon, { name: icon.name, size: icon.size, style: icon.style, className: className }));
     }
-    if ((0, exports.isAdaptableExternalIcon)(icon)) {
+    if ((0, exports.isAdaptableCustomIcon)(icon)) {
         let width = (_b = (_a = icon.style) === null || _a === void 0 ? void 0 : _a.width) !== null && _b !== void 0 ? _b : 'var(--ab-cmp-icon__width)';
         let height = (_d = (_c = icon.style) === null || _c === void 0 ? void 0 : _c.height) !== null && _d !== void 0 ? _d : 'var(--ab-cmp-icon__height)';
         const iconStyle = (_e = icon.style) !== null && _e !== void 0 ? _e : {};
@@ -52,15 +52,15 @@ const AdaptableIconComponent = (props) => {
     }
     return null;
 };
-exports.AdaptableIconComponent = AdaptableIconComponent;
-const isAdaptableInternalIcon = (icon) => {
+exports.IconComponent = IconComponent;
+const isAdaptableSystemIcon = (icon) => {
     return typeof (icon === null || icon === void 0 ? void 0 : icon.name) === 'string';
 };
-exports.isAdaptableInternalIcon = isAdaptableInternalIcon;
-const isAdaptableExternalIcon = (icon) => {
+exports.isAdaptableSystemIcon = isAdaptableSystemIcon;
+const isAdaptableCustomIcon = (icon) => {
     return typeof (icon === null || icon === void 0 ? void 0 : icon.src) === 'string';
 };
-exports.isAdaptableExternalIcon = isAdaptableExternalIcon;
+exports.isAdaptableCustomIcon = isAdaptableCustomIcon;
 const isAdaptableElementIcon = (icon) => {
     return ((typeof HTMLElement === 'function' &&
         (icon === null || icon === void 0 ? void 0 : icon.element) instanceof HTMLElement) ||
@@ -68,6 +68,6 @@ const isAdaptableElementIcon = (icon) => {
 };
 exports.isAdaptableElementIcon = isAdaptableElementIcon;
 const isAdaptableIcon = (icon) => {
-    return ((0, exports.isAdaptableInternalIcon)(icon) || (0, exports.isAdaptableExternalIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon));
+    return ((0, exports.isAdaptableSystemIcon)(icon) || (0, exports.isAdaptableCustomIcon)(icon) || (0, exports.isAdaptableElementIcon)(icon));
 };
 exports.isAdaptableIcon = isAdaptableIcon;

package/src/components/IconSelector/IconSelector.js

@@ -5,7 +5,7 @@ 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 AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const Icon_1 = require("../Icon");
 const icons_1 = tslib_1.__importStar(require("../icons"));
 const OverlayTrigger_1 = tslib_1.__importDefault(require("../OverlayTrigger"));
 const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
@@ -27,7 +27,7 @@ const IconSelector = (props) => {
     });
     const customIconsElements = (_a = props.customIcons) === null || _a === void 0 ? void 0 : _a.map((def) => {
         return (react_1.default.createElement(IconButton, { key: def.name, active: false, onClick: () => props.onChange(def.name) },
-            react_1.default.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { key: def.name, icon: def.icon })));
+            react_1.default.createElement(Icon_1.IconComponent, { key: def.name, icon: def.icon })));
     });
     const popup = (react_1.default.createElement(rebass_1.Box, { className: "ab-IconSelector__Popup" },
         react_1.default.createElement(rebass_1.Box, { mb: 2 },
@@ -44,7 +44,7 @@ const IconSelector = (props) => {
     else {
         const icon = (_b = props.customIcons) === null || _b === void 0 ? void 0 : _b.find((def) => def.name === props.value);
         if (icon)
-            value = react_1.default.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon.icon });
+            value = react_1.default.createElement(Icon_1.IconComponent, { icon: icon.icon });
     }
     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 },

package/src/components/SimpleButton/index.js

@@ -8,21 +8,21 @@ const join_1 = tslib_1.__importDefault(require("../utils/join"));
 const icons_1 = tslib_1.__importDefault(require("../icons"));
 const Tooltip_1 = tslib_1.__importDefault(require("../Tooltip"));
 const theme_1 = tslib_1.__importDefault(require("../../theme"));
-const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const Icon_1 = require("../Icon");
 exports.baseClassName = 'ab-SimpleButton';
 const SimpleButton = React.forwardRef((props, theRef) => {
     var _a, _b;
     let { children, disabled, variant = 'outlined', tone = 'neutral', iconPosition = 'start', iconSize, className, icon, tooltip, accessLevel: accessLevel, type } = props, buttonProps = tslib_1.__rest(props, ["children", "disabled", "variant", "tone", "iconPosition", "iconSize", "className", "icon", "tooltip", "accessLevel", "type"]);
-    let adaptableInternalIcon;
-    if ((0, AdaptableIconComponent_1.isAdaptableInternalIcon)(icon)) {
-        adaptableInternalIcon = icon;
+    let adaptableSystemIcon;
+    if ((0, Icon_1.isAdaptableSystemIcon)(icon)) {
+        adaptableSystemIcon = icon;
     }
     if (typeof icon === 'string' && icons_1.default[icon]) {
-        adaptableInternalIcon = { name: icon };
+        adaptableSystemIcon = { name: icon };
     }
-    if (adaptableInternalIcon) {
+    if (adaptableSystemIcon) {
         const iconProps = {
-            icon: adaptableInternalIcon,
+            icon: adaptableSystemIcon,
         };
         if (iconSize) {
             iconProps.icon = Object.assign(Object.assign({}, iconProps.icon), { size: iconSize });
@@ -30,10 +30,10 @@ const SimpleButton = React.forwardRef((props, theRef) => {
         if (typeof buttonProps.color === 'string') {
             iconProps.icon = Object.assign(Object.assign({}, iconProps.icon), { style: { color: buttonProps.color } });
         }
-        icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, Object.assign({}, iconProps));
+        icon = React.createElement(Icon_1.IconComponent, Object.assign({}, iconProps));
     }
-    if ((0, AdaptableIconComponent_1.isAdaptableExternalIcon)(icon) || (0, AdaptableIconComponent_1.isAdaptableElementIcon)(icon)) {
-        icon = React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: icon });
+    if ((0, Icon_1.isAdaptableCustomIcon)(icon) || (0, Icon_1.isAdaptableElementIcon)(icon)) {
+        icon = React.createElement(Icon_1.IconComponent, { icon: icon });
     }
     if (icon) {
         children =

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

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

package/src/components/Toggle/Toggle.js

@@ -3,13 +3,13 @@ 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 Icon_1 = require("../Icon");
 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 } }),
+        icon && React.createElement(Icon_1.IconComponent, { icon: { name: icon } }),
         children));
 };
 exports.Toggle = Toggle;

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

@@ -1,15 +1,15 @@
 import * as React from 'react';
 import { CSSProperties } from 'react';
 import { IconProps } from './DefaultIcon';
-import { AdaptableExternalIcon, AdaptableInternalIcon, AdaptableInternalIconName } from '../../PredefinedConfig/Common/AdaptableIcon';
-declare const allIcons: Record<AdaptableInternalIconName, React.FunctionComponent<IconProps>>;
+import { AdaptableCustomIcon, AdaptableSystemIcon, AdaptableSystemIconName } from '../../PredefinedConfig/Common/AdaptableIcon';
+declare const allIcons: Record<AdaptableSystemIconName, React.FunctionComponent<IconProps>>;
 export declare const Icon: ({ name, style, className, tabIndex, ...props }: {
     style?: React.CSSProperties;
-    name: AdaptableInternalIconName;
+    name: AdaptableSystemIconName;
     size?: number;
     className?: string;
     tabIndex?: number;
     props?: React.SVGProps<SVGElement>;
 }) => JSX.Element;
-export declare const iconToString: (icon: AdaptableInternalIcon | AdaptableExternalIcon, style?: CSSProperties) => string;
+export declare const iconToString: (icon: AdaptableSystemIcon | AdaptableCustomIcon, style?: CSSProperties) => string;
 export default allIcons;

package/src/components/icons/index.js

@@ -144,7 +144,7 @@ const instrument_1 = tslib_1.__importDefault(require("./instrument"));
 const analysis_1 = tslib_1.__importDefault(require("./analysis"));
 const visibility_1 = tslib_1.__importDefault(require("./visibility"));
 const visibility_off_1 = tslib_1.__importDefault(require("./visibility-off"));
-const AdaptableIconComponent_1 = require("../AdaptableIconComponent");
+const Icon_1 = require("../Icon");
 const AdaptableLogger_1 = require("../../agGrid/AdaptableLogger");
 const allIcons = {
     search: query_1.default,
@@ -187,8 +187,8 @@ const allIcons = {
     assignment: state_management_1.default,
     clipboard: tool_panel_1.default,
     'traffic-lights': system_status_1.default,
-    'add': add_row_1.default,
-    'downloaded': updated_row_1.default,
+    add: add_row_1.default,
+    downloaded: updated_row_1.default,
     // others
     edit: edit_1.default,
     undo: undo_1.default,
@@ -226,7 +226,7 @@ const allIcons = {
     'sort-desc': sort_desc_1.default,
     logout: logout_1.default,
     'import-export': import_export_1.default,
-    'paperclip': attach_file_1.default,
+    paperclip: attach_file_1.default,
     info: info_1.default,
     'cloud-upload': cloud_upload_1.default,
     upload: upload_1.default,
@@ -265,7 +265,7 @@ const allIcons = {
     'not-contains': not_contains_1.default,
     contains: contains_1.default,
     regex: regex_1.default,
-    'target': track_changes_1.default,
+    target: track_changes_1.default,
     menu: menu_1.default,
     statusbar: statusbar_1.default,
     dashboard: dashboard_1.default,
@@ -307,7 +307,7 @@ const iconToString = (icon, style) => {
     if (!icon) {
         return;
     }
-    return ReactDOMServer.renderToString(React.createElement(AdaptableIconComponent_1.AdaptableIconComponent, { icon: Object.assign(Object.assign({}, icon), { style: Object.assign(Object.assign({}, icon.style), style) }) }));
+    return ReactDOMServer.renderToString(React.createElement(Icon_1.IconComponent, { icon: Object.assign(Object.assign({}, icon), { style: Object.assign(Object.assign({}, icon.style), style) }) }));
 };
 exports.iconToString = iconToString;
 exports.default = allIcons;