@carbon/charts 0.53.2 → 0.54.0

package/components/axes/hover-axis.js

@@ -0,0 +1,235 @@
+var __extends = (this && this.__extends) || (function () {
+    var extendStatics = function (d, b) {
+        extendStatics = Object.setPrototypeOf ||
+            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
+            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        extendStatics(d, b);
+        function __() { this.constructor = d; }
+        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
+    };
+})();
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+// Internal Imports
+import { Axis } from './axis';
+import { AxisPositions, Events, ScaleTypes } from '../../interfaces';
+import { DOMUtils } from '../../services';
+import { Tools } from '../../tools';
+import * as Configuration from '../../configuration';
+// D3 Imports
+import { select } from 'd3-selection';
+var HoverAxis = /** @class */ (function (_super) {
+    __extends(HoverAxis, _super);
+    function HoverAxis(model, services, configs) {
+        return _super.call(this, model, services, configs) || this;
+    }
+    HoverAxis.prototype.render = function (animate) {
+        if (animate === void 0) { animate = true; }
+        _super.prototype.render.call(this, animate);
+        // Remove existing event listeners to avoid flashing behavior
+        _super.prototype.destroy.call(this);
+        var axisPosition = this.configs.position;
+        var svg = this.getComponentContainer();
+        var container = DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        var self = this;
+        container.selectAll('g.tick').each(function (_, index) {
+            var g = select(this);
+            g.classed('tick-hover', true).attr('tabindex', index === 0 ? 0 : -1);
+            var textNode = g.select('text');
+            var _a = DOMUtils.getSVGElementSize(textNode, {
+                useBBox: true,
+            }), width = _a.width, height = _a.height;
+            var rectangle = DOMUtils.appendOrSelect(g, 'rect.axis-holder');
+            var x = 0, y = 0;
+            // Depending on axis position, apply correct translation & rotation to align the rect
+            // with the text
+            switch (axisPosition) {
+                case AxisPositions.LEFT:
+                    x = -width + Number(textNode.attr('x'));
+                    y = -(height / 2);
+                    break;
+                case AxisPositions.RIGHT:
+                    x = Math.abs(Number(textNode.attr('x')));
+                    y = -(height / 2);
+                    break;
+                case AxisPositions.TOP:
+                    x = -(width / 2);
+                    y = -height + Number(textNode.attr('y')) / 2;
+                    if (self.truncation[axisPosition]) {
+                        x = 0;
+                        rectangle.attr('transform', "rotate(-45)");
+                    }
+                    break;
+                case AxisPositions.BOTTOM:
+                    x = -(width / 2);
+                    y = height / 2 - 2;
+                    if (self.truncation[axisPosition]) {
+                        x = -width;
+                        rectangle.attr('transform', "rotate(-45)");
+                    }
+                    break;
+            }
+            // Translates x position -4 left to keep center after padding
+            // Adds padding on left & right
+            rectangle
+                .attr('x', x - Configuration.axis.hover.rectanglePadding)
+                .attr('y', y)
+                .attr('width', width + Configuration.axis.hover.rectanglePadding * 2)
+                .attr('height', height)
+                .lower();
+            // Add keyboard event listeners to each group element
+            g.on('keydown', function (event) {
+                // Choose specific arrow key depending on the axis
+                if (axisPosition === AxisPositions.LEFT ||
+                    axisPosition === AxisPositions.RIGHT) {
+                    if (event.key && event.key === 'ArrowUp') {
+                        self.goNext(this, event);
+                    }
+                    else if (event.key && event.key === 'ArrowDown') {
+                        self.goPrevious(this, event);
+                    }
+                }
+                else {
+                    if (event.key && event.key === 'ArrowLeft') {
+                        self.goPrevious(this, event);
+                    }
+                    else if (event.key && event.key === 'ArrowRight') {
+                        self.goNext(this, event);
+                    }
+                }
+            });
+        });
+        // Add event listeners to element group
+        this.addEventListeners();
+    };
+    HoverAxis.prototype.addEventListeners = function () {
+        var svg = this.getComponentContainer();
+        var axisPosition = this.configs.position;
+        var container = DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        var options = this.getOptions();
+        var axisOptions = Tools.getProperty(options, 'axes', axisPosition);
+        var axisScaleType = Tools.getProperty(axisOptions, 'scaleType');
+        var truncationThreshold = Tools.getProperty(axisOptions, 'truncation', 'threshold');
+        var self = this;
+        container
+            .selectAll('g.tick.tick-hover')
+            .on('mouseover', function (event) {
+            var hoveredElement = select(this).select('text');
+            var datum = hoveredElement.datum();
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOVER, {
+                event: event,
+                element: hoveredElement,
+                datum: datum,
+            });
+            if (axisScaleType === ScaleTypes.LABELS &&
+                datum.length > truncationThreshold) {
+                self.services.events.dispatchEvent(Events.Tooltip.SHOW, {
+                    event: event,
+                    element: hoveredElement,
+                    datum: datum,
+                });
+            }
+        })
+            .on('mousemove', function (event) {
+            var hoveredElement = select(this).select('text');
+            var datum = hoveredElement.datum();
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEMOVE, {
+                event: event,
+                element: hoveredElement,
+                datum: datum,
+            });
+            self.services.events.dispatchEvent(Events.Tooltip.MOVE, {
+                event: event,
+            });
+        })
+            .on('click', function (event) {
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_CLICK, {
+                event: event,
+                element: select(this).select('text'),
+                datum: select(this).select('text').datum(),
+            });
+        })
+            .on('mouseout', function (event) {
+            // Dispatch mouse event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOUT, {
+                event: event,
+                element: select(this).select('text'),
+                datum: select(this).select('text').datum(),
+            });
+            if (axisScaleType === ScaleTypes.LABELS) {
+                self.services.events.dispatchEvent(Events.Tooltip.HIDE);
+            }
+        })
+            .on('focus', function (event) {
+            var coordinates = { clientX: 0, clientY: 0 };
+            if (event.target) {
+                // Focus element since we are using arrow keys
+                event.target.focus();
+                var boundingRect = event.target.getBoundingClientRect();
+                coordinates.clientX = boundingRect.x;
+                coordinates.clientY = boundingRect.y;
+            }
+            // Dispatch focus event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_FOCUS, {
+                event: __assign(__assign({}, event), coordinates),
+                element: select(this),
+                datum: select(this).select('text').datum(),
+            });
+        })
+            .on('blur', function (event) {
+            // Dispatch blur event
+            self.services.events.dispatchEvent(Events.Axis.LABEL_BLUR, {
+                event: event,
+                element: select(this),
+                datum: select(this).select('text').datum(),
+            });
+        });
+    };
+    // Focus on the next HTML element sibling
+    HoverAxis.prototype.goNext = function (element, event) {
+        if (element.nextElementSibling &&
+            element.nextElementSibling.tagName !== 'path') {
+            element.nextElementSibling.dispatchEvent(new Event('focus'));
+        }
+        event.preventDefault();
+    };
+    // Focus on the previous HTML element sibling
+    HoverAxis.prototype.goPrevious = function (element, event) {
+        if (element.previousElementSibling &&
+            element.previousElementSibling.tagName !== 'path') {
+            element.previousElementSibling.dispatchEvent(new Event('focus'));
+        }
+        event.preventDefault();
+    };
+    HoverAxis.prototype.destroy = function () {
+        var svg = this.getComponentContainer();
+        var axisPosition = this.configs.position;
+        var container = DOMUtils.appendOrSelect(svg, "g.axis." + axisPosition);
+        // Remove event listeners
+        container
+            .selectAll('g.tick.tick-hover')
+            .on('mouseover', null)
+            .on('mousemove', null)
+            .on('mouseout', null)
+            .on('focus', null)
+            .on('blur', null);
+    };
+    return HoverAxis;
+}(Axis));
+export { HoverAxis };
+//# sourceMappingURL=../../../src/components/axes/hover-axis.js.map

package/components/axes/hover-axis.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hover-axis.js","sourceRoot":"","sources":["hover-axis.ts"],"names":[],"mappings":"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","sourcesContent":["// Internal Imports\nimport { Axis } from './axis';\nimport { AxisPositions, Events, ScaleTypes } from '../../interfaces';\nimport { ChartModel } from '../../model/model';\nimport { DOMUtils } from '../../services';\nimport { Tools } from '../../tools';\nimport * as Configuration from '../../configuration';\n\n// D3 Imports\nimport { select } from 'd3-selection';\n\nexport class HoverAxis extends Axis {\n\tconstructor(model: ChartModel, services: any, configs?: any) {\n\t\tsuper(model, services, configs);\n\t}\n\n\trender(animate = true) {\n\t\tsuper.render(animate);\n\n\t\t// Remove existing event listeners to avoid flashing behavior\n\t\tsuper.destroy();\n\n\t\tconst { position: axisPosition } = this.configs;\n\t\tconst svg = this.getComponentContainer();\n\t\tconst container = DOMUtils.appendOrSelect(\n\t\t\tsvg,\n\t\t\t`g.axis.${axisPosition}`\n\t\t);\n\n\t\tconst self = this;\n\t\tcontainer.selectAll('g.tick').each(function (_, index) {\n\t\t\tconst g = select(this);\n\t\t\tg.classed('tick-hover', true).attr(\n\t\t\t\t'tabindex',\n\t\t\t\tindex === 0 ? 0 : -1\n\t\t\t);\n\t\t\tconst textNode = g.select('text');\n\t\t\tconst { width, height } = DOMUtils.getSVGElementSize(textNode, {\n\t\t\t\tuseBBox: true,\n\t\t\t});\n\n\t\t\tconst rectangle = DOMUtils.appendOrSelect(g, 'rect.axis-holder');\n\n\t\t\tlet x = 0,\n\t\t\t\ty = 0;\n\n\t\t\t// Depending on axis position, apply correct translation & rotation to align the rect\n\t\t\t// with the text\n\t\t\tswitch (axisPosition) {\n\t\t\t\tcase AxisPositions.LEFT:\n\t\t\t\t\tx = -width + Number(textNode.attr('x'));\n\t\t\t\t\ty = -(height / 2);\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.RIGHT:\n\t\t\t\t\tx = Math.abs(Number(textNode.attr('x')));\n\t\t\t\t\ty = -(height / 2);\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.TOP:\n\t\t\t\t\tx = -(width / 2);\n\t\t\t\t\ty = -height + Number(textNode.attr('y')) / 2;\n\n\t\t\t\t\tif (self.truncation[axisPosition]) {\n\t\t\t\t\t\tx = 0;\n\t\t\t\t\t\trectangle.attr('transform', `rotate(-45)`);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t\tcase AxisPositions.BOTTOM:\n\t\t\t\t\tx = -(width / 2);\n\t\t\t\t\ty = height / 2 - 2;\n\n\t\t\t\t\tif (self.truncation[axisPosition]) {\n\t\t\t\t\t\tx = -width;\n\t\t\t\t\t\trectangle.attr('transform', `rotate(-45)`);\n\t\t\t\t\t}\n\t\t\t\t\tbreak;\n\t\t\t}\n\n\t\t\t// Translates x position -4 left to keep center after padding\n\t\t\t// Adds padding on left & right\n\t\t\trectangle\n\t\t\t\t.attr('x', x - Configuration.axis.hover.rectanglePadding)\n\t\t\t\t.attr('y', y)\n\t\t\t\t.attr(\n\t\t\t\t\t'width',\n\t\t\t\t\twidth + Configuration.axis.hover.rectanglePadding * 2\n\t\t\t\t)\n\t\t\t\t.attr('height', height)\n\t\t\t\t.lower();\n\n\t\t\t// Add keyboard event listeners to each group element\n\t\t\tg.on('keydown', function (event: KeyboardEvent) {\n\t\t\t\t// Choose specific arrow key depending on the axis\n\t\t\t\tif (\n\t\t\t\t\taxisPosition === AxisPositions.LEFT ||\n\t\t\t\t\taxisPosition === AxisPositions.RIGHT\n\t\t\t\t) {\n\t\t\t\t\tif (event.key && event.key === 'ArrowUp') {\n\t\t\t\t\t\tself.goNext(this as HTMLElement, event);\n\t\t\t\t\t} else if (event.key && event.key === 'ArrowDown') {\n\t\t\t\t\t\tself.goPrevious(this as HTMLElement, event);\n\t\t\t\t\t}\n\t\t\t\t} else {\n\t\t\t\t\tif (event.key && event.key === 'ArrowLeft') {\n\t\t\t\t\t\tself.goPrevious(this as HTMLElement, event);\n\t\t\t\t\t} else if (event.key && event.key === 'ArrowRight') {\n\t\t\t\t\t\tself.goNext(this as HTMLElement, event);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\n\t\t// Add event listeners to element group\n\t\tthis.addEventListeners();\n\t}\n\n\taddEventListeners() {\n\t\tconst svg = this.getComponentContainer();\n\t\tconst { position: axisPosition } = this.configs;\n\t\tconst container = DOMUtils.appendOrSelect(\n\t\t\tsvg,\n\t\t\t`g.axis.${axisPosition}`\n\t\t);\n\t\tconst options = this.getOptions();\n\t\tconst axisOptions = Tools.getProperty(options, 'axes', axisPosition);\n\t\tconst axisScaleType = Tools.getProperty(axisOptions, 'scaleType');\n\t\tconst truncationThreshold = Tools.getProperty(\n\t\t\taxisOptions,\n\t\t\t'truncation',\n\t\t\t'threshold'\n\t\t);\n\n\t\tconst self = this;\n\t\tcontainer\n\t\t\t.selectAll('g.tick.tick-hover')\n\t\t\t.on('mouseover', function (event) {\n\t\t\t\tconst hoveredElement = select(this).select('text');\n\t\t\t\tconst datum = hoveredElement.datum() as string;\n\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(\n\t\t\t\t\tEvents.Axis.LABEL_MOUSEOVER,\n\t\t\t\t\t{\n\t\t\t\t\t\tevent,\n\t\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\t\tdatum,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tif (\n\t\t\t\t\taxisScaleType === ScaleTypes.LABELS &&\n\t\t\t\t\tdatum.length > truncationThreshold\n\t\t\t\t) {\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.SHOW, {\n\t\t\t\t\t\tevent,\n\t\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\t\tdatum,\n\t\t\t\t\t});\n\t\t\t\t}\n\t\t\t})\n\t\t\t.on('mousemove', function (event) {\n\t\t\t\tconst hoveredElement = select(this).select('text');\n\t\t\t\tconst datum = hoveredElement.datum() as string;\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(\n\t\t\t\t\tEvents.Axis.LABEL_MOUSEMOVE,\n\t\t\t\t\t{\n\t\t\t\t\t\tevent,\n\t\t\t\t\t\telement: hoveredElement,\n\t\t\t\t\t\tdatum,\n\t\t\t\t\t}\n\t\t\t\t);\n\n\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.MOVE, {\n\t\t\t\t\tevent,\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on('click', function (event) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Axis.LABEL_CLICK, {\n\t\t\t\t\tevent,\n\t\t\t\t\telement: select(this).select('text'),\n\t\t\t\t\tdatum: select(this).select('text').datum(),\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on('mouseout', function (event) {\n\t\t\t\t// Dispatch mouse event\n\t\t\t\tself.services.events.dispatchEvent(Events.Axis.LABEL_MOUSEOUT, {\n\t\t\t\t\tevent,\n\t\t\t\t\telement: select(this).select('text'),\n\t\t\t\t\tdatum: select(this).select('text').datum(),\n\t\t\t\t});\n\n\t\t\t\tif (axisScaleType === ScaleTypes.LABELS) {\n\t\t\t\t\tself.services.events.dispatchEvent(Events.Tooltip.HIDE);\n\t\t\t\t}\n\t\t\t})\n\t\t\t.on('focus', function (event) {\n\t\t\t\tconst coordinates = { clientX: 0, clientY: 0 };\n\n\t\t\t\tif (event.target) {\n\t\t\t\t\t// Focus element since we are using arrow keys\n\t\t\t\t\tevent.target.focus();\n\t\t\t\t\tconst boundingRect = event.target.getBoundingClientRect();\n\t\t\t\t\tcoordinates.clientX = boundingRect.x;\n\t\t\t\t\tcoordinates.clientY = boundingRect.y;\n\t\t\t\t}\n\n\t\t\t\t// Dispatch focus event\n\t\t\t\tself.services.events.dispatchEvent(Events.Axis.LABEL_FOCUS, {\n\t\t\t\t\tevent: { ...event, ...coordinates },\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum: select(this).select('text').datum(),\n\t\t\t\t});\n\t\t\t})\n\t\t\t.on('blur', function (event) {\n\t\t\t\t// Dispatch blur event\n\t\t\t\tself.services.events.dispatchEvent(Events.Axis.LABEL_BLUR, {\n\t\t\t\t\tevent,\n\t\t\t\t\telement: select(this),\n\t\t\t\t\tdatum: select(this).select('text').datum(),\n\t\t\t\t});\n\t\t\t});\n\t}\n\n\t// Focus on the next HTML element sibling\n\tprivate goNext(element: HTMLElement, event: Event) {\n\t\tif (\n\t\t\telement.nextElementSibling &&\n\t\t\telement.nextElementSibling.tagName !== 'path'\n\t\t) {\n\t\t\telement.nextElementSibling.dispatchEvent(new Event('focus'));\n\t\t}\n\n\t\tevent.preventDefault();\n\t}\n\n\t// Focus on the previous HTML element sibling\n\tprivate goPrevious(element: HTMLElement, event: Event) {\n\t\tif (\n\t\t\telement.previousElementSibling &&\n\t\t\telement.previousElementSibling.tagName !== 'path'\n\t\t) {\n\t\t\telement.previousElementSibling.dispatchEvent(new Event('focus'));\n\t\t}\n\n\t\tevent.preventDefault();\n\t}\n\n\tdestroy() {\n\t\tconst svg = this.getComponentContainer();\n\t\tconst { position: axisPosition } = this.configs;\n\t\tconst container = DOMUtils.appendOrSelect(\n\t\t\tsvg,\n\t\t\t`g.axis.${axisPosition}`\n\t\t);\n\n\t\t// Remove event listeners\n\t\tcontainer\n\t\t\t.selectAll('g.tick.tick-hover')\n\t\t\t.on('mouseover', null)\n\t\t\t.on('mousemove', null)\n\t\t\t.on('mouseout', null)\n\t\t\t.on('focus', null)\n\t\t\t.on('blur', null);\n\t}\n}\n"]}

package/components/axes/toolbar.d.ts

@@ -1,6 +1,7 @@
 import { Component } from '../component';
 import { RenderTypes, ToolbarControlTypes } from '../../interfaces';
 export declare class Toolbar extends Component {
+    static buttonID: number;
     type: string;
     renderType: RenderTypes;
     overflowButton: any;
@@ -15,6 +16,7 @@ export declare class Toolbar extends Component {
     focusOnPreviousEnabledMenuItem(currentItemIndex: any): void;
     focusOnNextEnabledMenuItem(currentItemIndex: any): void;
     toggleOverflowMenu(event: any): void;
+    triggerFunctionAndEvent(control: any, event: any, element?: any): void;
     getControlConfigs(): {
         buttonList: any[];
         overflowMenuItemList?: undefined;
@@ -28,7 +30,9 @@ export declare class Toolbar extends Component {
         id: string;
         title: string;
         shouldBeDisabled: () => boolean;
-        iconSVGContent: string;
+        iconSVG: {
+            content: string;
+        };
         clickFunction: (event: any) => void;
     };
     getControlConfigByType(controlType: ToolbarControlTypes): any;

package/components/axes/toolbar.js

@@ -47,6 +47,9 @@ var Toolbar = /** @class */ (function (_super) {
         var isDataLoading = Tools.getProperty(this.getOptions(), 'data', 'loading');
         if (isDataLoading) {
             container.html('');
+            // Set overflow menu to null if data is loading
+            // This will render in a new overflow menu when data is done loading
+            this.overflowMenu = null;
         }
         else {
             if (!this.overflowMenu) {
@@ -75,23 +78,26 @@ var Toolbar = /** @class */ (function (_super) {
             var self_1 = this;
             var allToolbarControls = enteringToolbarControls
                 .merge(toolbarControls)
-                .classed('disabled', function (d) {
-                return d.shouldBeDisabled ? d.shouldBeDisabled() : false;
-            })
-                .attr('aria-disabled', function (d) {
-                return d.shouldBeDisabled ? d.shouldBeDisabled() : false;
-            })
+                .classed('disabled', function (d) { return d.shouldBeDisabled(); })
+                .attr('aria-disabled', function (d) { return d.shouldBeDisabled(); })
                 .attr('aria-label', function (d) { return d.title; })
-                .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"" + _this.services.domUtils.generateElementIDString("control-" + d.id) + "\" aria-label=\"" + d.title + "\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: " + (d.iconWidth !== undefined ? d.iconWidth : '20px') + "; height: " + (d.iconWidth !== undefined ? d.iconHeight : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVGContent + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
+                .html(function (d) { return "\n\t\t\t<button\n\t\t\t\tclass=\"bx--overflow-menu__trigger\"\n\t\t\t\taria-haspopup=\"true\" aria-expanded=\"false\" id=\"" + _this.services.domUtils.generateElementIDString("control-" + d.id) + "\" aria-label=\"" + d.title + "\">\n\t\t\t\t<svg focusable=\"false\" preserveAspectRatio=\"xMidYMid meet\" style=\"will-change: transform; width: " + (d.iconSVG.width !== undefined ? d.iconSVG.width : '20px') + "; height: " + (d.iconSVG.height !== undefined
+                ? d.iconSVG.height
+                : '20px') + "\" xmlns=\"http://www.w3.org/2000/svg\" class=\"bx--overflow-menu__icon\" viewBox=\"0 0 32 32\" aria-hidden=\"true\">\n\t\t\t\t\t" + d.iconSVG.content + "\n\t\t\t\t</svg>\n\t\t\t</button>"; })
                 .each(function (d, index) {
+                var _this = this;
                 select(this)
                     .select('button')
-                    .on('click', !d.shouldBeDisabled() ? d.clickFunction : null)
+                    .on('click', function (event) {
+                    if (!d.shouldBeDisabled()) {
+                        self_1.triggerFunctionAndEvent(d, event, _this);
+                    }
+                })
                     .on('keydown', function (event) {
                     if ((event.key && event.key === 'Enter') ||
                         event.key === ' ') {
                         event.preventDefault();
-                        d.clickFunction();
+                        self_1.triggerFunctionAndEvent(d, event, _this);
                     }
                     else if (event.key && event.key === 'ArrowLeft') {
                         self_1.focusOnPreviousEnabledToolbarItem(index);
@@ -140,6 +146,9 @@ var Toolbar = /** @class */ (function (_super) {
     };
     // show/hide overflow menu
     Toolbar.prototype.updateOverflowMenu = function (show) {
+        if (!this.overflowMenu) {
+            return;
+        }
         this.overflowMenu.classed('is-open', show);
         // update overflow button background
         if (this.overflowButton) {
@@ -242,15 +251,13 @@ var Toolbar = /** @class */ (function (_super) {
                 var element = select("#" + _this.services.domUtils.generateElementIDString("control-" + menuItem.id));
                 if (element !== null) {
                     element.on('click', function () {
-                        // call the specified function
-                        menuItem.clickFunction();
+                        self_2.triggerFunctionAndEvent(menuItem, event, element.node());
                         // hide overflow menu
                         self_2.updateOverflowMenu(false);
                     });
                     element.on('keydown', function (keyEvent) {
                         if (keyEvent && keyEvent.key === 'Enter') {
-                            // call the specified function
-                            menuItem.clickFunction();
+                            self_2.triggerFunctionAndEvent(menuItem, event, element.node());
                         }
                         else if (keyEvent && keyEvent.key === 'ArrowUp') {
                             // focus on previous menu item
@@ -277,35 +284,75 @@ var Toolbar = /** @class */ (function (_super) {
             event.stopImmediatePropagation();
         }
     };
+    // Calls passed function && dispatches event
+    Toolbar.prototype.triggerFunctionAndEvent = function (control, event, element) {
+        // Call custom function only if it exists
+        if (typeof control.clickFunction === 'function') {
+            control.clickFunction(event);
+        }
+        // Dispatch selection event
+        this.services.events.dispatchEvent(Events.Toolbar.BUTTON_CLICK, {
+            control: control,
+            event: event,
+            element: element,
+        });
+    };
     Toolbar.prototype.getControlConfigs = function () {
         var _this = this;
-        var numberOfIcons = Tools.getProperty(this.getOptions(), 'toolbar', 'numberOfIcons');
+        var numberOfIcons = Tools.getProperty(this.getOptions(), 'toolbar', 'numberOfIcons') -
+            1;
         var controls = Tools.getProperty(this.getOptions(), 'toolbar', 'controls');
-        var controlList = [];
         var overflowSpecificControls = [];
+        var buttonList = [];
+        var overflowList = [];
         controls.forEach(function (control) {
-            var controlConfig = _this.getControlConfigByType(control.type);
+            var controlConfig = null;
+            // check if button is custom or default control
+            if (control.type === ToolbarControlTypes.CUSTOM) {
+                // add generic id if missing
+                if (Tools.getProperty(control, 'id') === null) {
+                    // add id directly to the data passed so that id isn't reassigned on rerender
+                    control.id = "toolbar-button-" + Toolbar.buttonID++;
+                }
+                // define function if missing
+                if (Tools.getProperty(control, 'shouldBeDisabled') === null) {
+                    control.shouldBeDisabled = function () { return false; };
+                }
+                controlConfig = control;
+            }
+            else {
+                controlConfig = _this.getControlConfigByType(control.type);
+            }
             // add to list if config is valid
             if (controlConfig) {
                 controlConfig.text = control.text ? control.text : control.type;
                 if (controlConfig.id.indexOf('toolbar-export') !== -1) {
                     overflowSpecificControls.push(controlConfig);
                 }
+                else if (buttonList.length < numberOfIcons) {
+                    // check if icon exists else assign to the overflow list
+                    if (Tools.getProperty(controlConfig, 'iconSVG', 'content') === null) {
+                        overflowList.push(controlConfig);
+                    }
+                    else {
+                        buttonList.push(controlConfig);
+                    }
+                }
                 else {
-                    controlList.push(controlConfig);
+                    overflowList.push(controlConfig);
                 }
             }
         });
-        if (controlList.length <= numberOfIcons &&
-            overflowSpecificControls.length === 0) {
+        // Ensures the `export` controls are always at the bottom
+        overflowList.push.apply(overflowList, overflowSpecificControls);
+        if (!overflowList.length) {
             return {
-                buttonList: controlList,
+                buttonList: buttonList,
             };
         }
         return {
-            // leave one button for overflow button
-            buttonList: controlList.splice(0, numberOfIcons - 1),
-            overflowMenuItemList: controlList.concat(overflowSpecificControls),
+            buttonList: buttonList,
+            overflowMenuItemList: overflowList,
         };
     };
     Toolbar.prototype.getToolbarButtonItems = function () {
@@ -334,7 +381,9 @@ var Toolbar = /** @class */ (function (_super) {
             id: 'toolbar-overflow-menu',
             title: 'More options',
             shouldBeDisabled: function () { return false; },
-            iconSVGContent: "<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t\t\t\t <circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t\t\t\t <circle cx=\"16\" cy=\"24\" r=\"2\"></circle>",
+            iconSVG: {
+                content: "<circle cx=\"16\" cy=\"8\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"16\" r=\"2\"></circle>\n\t\t\t\t<circle cx=\"16\" cy=\"24\" r=\"2\"></circle>",
+            },
             clickFunction: function (event) { return _this.toggleOverflowMenu(event); },
         };
     };
@@ -354,7 +403,9 @@ var Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMinZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () { return _this.services.zoom.zoomIn(); },
                     };
                 }
@@ -367,7 +418,9 @@ var Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMaxZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () { return _this.services.zoom.zoomOut(); },
                     };
                 }
@@ -380,7 +433,9 @@ var Toolbar = /** @class */ (function (_super) {
                         shouldBeDisabled: function () {
                             return _this.services.zoom.isMaxZoomDomain();
                         },
-                        iconSVGContent: this.getControlIconByType(controlType),
+                        iconSVG: {
+                            content: this.getControlIconByType(controlType),
+                        },
                         clickFunction: function () {
                             return _this.services.zoom.resetZoomDomain();
                         },
@@ -390,10 +445,12 @@ var Toolbar = /** @class */ (function (_super) {
             case ToolbarControlTypes.MAKE_FULLSCREEN:
                 controlConfig = {
                     id: 'toolbar-makefullscreen',
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                        width: '15px',
+                        height: '15px',
+                    },
                     title: 'Make fullscreen',
-                    iconSVGContent: this.getControlIconByType(controlType),
-                    iconWidth: '15px',
-                    iconHight: '15px',
                     shouldBeDisabled: function () { return false; },
                     clickFunction: function () {
                         _this.services.domUtils.toggleFullscreen();
@@ -403,8 +460,10 @@ var Toolbar = /** @class */ (function (_super) {
             case ToolbarControlTypes.SHOW_AS_DATATABLE:
                 controlConfig = {
                     id: 'toolbar-showasdatatable',
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     title: 'Show as table',
-                    iconSVGContent: this.getControlIconByType(controlType),
                     shouldBeDisabled: function () { return displayData.length === 0; },
                     clickFunction: function () {
                         return _this.services.events.dispatchEvent(Events.Modal.SHOW);
@@ -416,7 +475,9 @@ var Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-CSV',
                     title: 'Export as CSV',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.model.exportToCSV(); },
                 };
                 break;
@@ -425,7 +486,9 @@ var Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-PNG',
                     title: 'Export as PNG',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.services.domUtils.exportToPNG(); },
                 };
                 break;
@@ -434,7 +497,9 @@ var Toolbar = /** @class */ (function (_super) {
                     id: 'toolbar-export-JPG',
                     title: 'Export as JPG',
                     shouldBeDisabled: function () { return false; },
-                    iconSVGContent: this.getControlIconByType(controlType),
+                    iconSVG: {
+                        content: this.getControlIconByType(controlType),
+                    },
                     clickFunction: function () { return _this.services.domUtils.exportToJPG(); },
                 };
                 break;
@@ -467,6 +532,7 @@ var Toolbar = /** @class */ (function (_super) {
                 throw Error('Not supported toolbar control type: ' + controlType);
         }
     };
+    Toolbar.buttonID = 0;
     return Toolbar;
 }(Component));
 export { Toolbar };