@fluentui/react-charting 5.23.63 → 5.23.65

package/lib-amd/utilities/SVGTooltipText.d.ts

@@ -0,0 +1,110 @@
+import * as React from 'react';
+import { ITooltipHost, ITooltipProps, TooltipDelay } from '@fluentui/react/lib/Tooltip';
+import { ITheme } from '@fluentui/react';
+interface ISVGTooltipTextProps {
+    /**
+     * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over
+     * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the
+     * host, so that the tooltip will stay open if the user is actively interacting with it.
+     */
+    closeDelay?: number;
+    /**
+     * Content to display in the Tooltip.
+     */
+    content?: string;
+    /**
+     * Length of delay before showing the tooltip on hover.
+     * @defaultvalue TooltipDelay.medium
+     */
+    delay?: TooltipDelay;
+    /**
+     * Additional properties to pass through for Tooltip.
+     */
+    tooltipProps?: ITooltipProps;
+    /**
+     * Additional properties to pass through for SVG <text>.
+     */
+    textProps?: React.SVGAttributes<SVGTextElement>;
+    /**
+     * Max width of text
+     */
+    maxWidth?: number;
+    /**
+     * Max height of text
+     */
+    maxHeight?: number;
+    /**
+     * Pass false to make prevent the tooptip from receiving focus through keyboard
+     * Eg: In Pie Chart, the focus should only land on the arcs and not on the text to
+     * avoid repitition of the same datapoint
+     * @defaultvalue true
+     */
+    shouldReceiveFocus?: boolean;
+    /**
+     * Pass true to show tooltip directly
+     * Eg: In Pie Chart, the tooltip is shown when the arc is focussed, so the prop is set to true,
+     * to directly show the tooltip from this component
+     * @defaultvalue false
+     */
+    isTooltipVisibleProp?: boolean;
+    /**
+     * Function to wrap text within specified width and height
+     * and return a boolean value indicating whether the text overflowed
+     */
+    wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;
+    /**
+     * Theme provided by High Order Component
+     */
+    theme?: ITheme;
+    /**
+     * @default false
+     * Prop to selectively display the tooltip background
+     */
+    showBackground?: boolean;
+}
+interface ISVGTooltipTextState {
+    isTooltipVisible: boolean;
+    isOverflowing: boolean;
+    textX?: number;
+    textY?: number;
+    textWidth?: number;
+    textHeight?: number;
+}
+/**
+ * Component to render an SVG text element with an optional tooltip.
+ * The tooltip appears on hovering and focusing the element when its content overflows.
+ */
+export declare class SVGTooltipText extends React.Component<ISVGTooltipTextProps, ISVGTooltipTextState> implements ITooltipHost {
+    static defaultProps: {
+        delay: TooltipDelay;
+    };
+    private static _currentVisibleTooltip;
+    /** The element that gets the hover events */
+    private _tooltipHost;
+    private _async;
+    private _dismissTimerId;
+    private _openTimerId;
+    private _tooltipHostId;
+    private _ignoreNextFocusEvent;
+    constructor(props: ISVGTooltipTextProps);
+    render(): React.ReactNode;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: Readonly<ISVGTooltipTextProps>): void;
+    componentWillUnmount(): void;
+    show: () => void;
+    dismiss: () => void;
+    private _measureText;
+    private _getTargetElement;
+    private _onTooltipFocus;
+    private _onTooltipBlur;
+    private _onTooltipMouseEnter;
+    private _onTooltipMouseLeave;
+    private _onTooltipKeyDown;
+    private _clearDismissTimer;
+    private _clearOpenTimer;
+    private _hideTooltip;
+    private _toggleTooltip;
+    private _getDelayTime;
+    private _wrapContent;
+}
+export {};

package/lib-amd/utilities/SVGTooltipText.js

@@ -0,0 +1,192 @@
+define(["require", "exports", "tslib", "react", "@fluentui/react/lib/Tooltip", "../Utilities", "@fluentui/react"], function (require, exports, tslib_1, React, Tooltip_1, Utilities_1, react_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.SVGTooltipText = void 0;
+    var PADDING = 4;
+    /**
+     * Component to render an SVG text element with an optional tooltip.
+     * The tooltip appears on hovering and focusing the element when its content overflows.
+     */
+    var SVGTooltipText = /** @class */ (function (_super) {
+        tslib_1.__extends(SVGTooltipText, _super);
+        function SVGTooltipText(props) {
+            var _this = _super.call(this, props) || this;
+            /** The element that gets the hover events */
+            _this._tooltipHost = React.createRef();
+            _this._tooltipHostId = (0, Utilities_1.getId)('tooltip-host');
+            _this.show = function () {
+                _this._toggleTooltip(true);
+            };
+            _this.dismiss = function () {
+                _this._hideTooltip();
+            };
+            _this._measureText = function () {
+                if (_this._tooltipHost.current && typeof _this._tooltipHost.current.getBBox === 'function') {
+                    var bbox = _this._tooltipHost.current.getBBox();
+                    _this.setState({
+                        textX: bbox.x,
+                        textY: bbox.y,
+                        textWidth: bbox.width,
+                        textHeight: bbox.height,
+                    });
+                }
+            };
+            _this._getTargetElement = function () {
+                if (!_this._tooltipHost.current) {
+                    return undefined;
+                }
+                return _this._tooltipHost.current;
+            };
+            _this._onTooltipFocus = function (ev) {
+                if (_this._ignoreNextFocusEvent) {
+                    _this._ignoreNextFocusEvent = false;
+                    return;
+                }
+                _this._onTooltipMouseEnter(ev);
+            };
+            _this._onTooltipBlur = function (ev) {
+                // The focused element gets a blur event when the document loses focus
+                // (e.g. switching tabs in the browser), but we don't want to show the
+                // tooltip again when the document gets focus back. Handle this case by
+                // checking if the blurred element is still the document's activeElement,
+                // and ignoring when it next gets focus back.
+                // See https://github.com/microsoft/fluentui/issues/13541
+                _this._ignoreNextFocusEvent = (document === null || document === void 0 ? void 0 : document.activeElement) === ev.target;
+                _this._dismissTimerId = _this._async.setTimeout(function () {
+                    _this._hideTooltip();
+                }, 0);
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._onTooltipMouseEnter = function (ev) {
+                var delay = _this.props.delay;
+                if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip !== _this) {
+                    SVGTooltipText._currentVisibleTooltip.dismiss();
+                }
+                SVGTooltipText._currentVisibleTooltip = _this;
+                if (!_this.state.isOverflowing) {
+                    return;
+                }
+                if (ev.target && (0, Utilities_1.portalContainsElement)(ev.target, _this._getTargetElement())) {
+                    // Do not show tooltip when target is inside a portal relative to TooltipHost.
+                    return;
+                }
+                _this._clearDismissTimer();
+                _this._clearOpenTimer();
+                if (delay !== Tooltip_1.TooltipDelay.zero) {
+                    var delayTime = _this._getDelayTime(delay); // non-null assertion because we set it in `defaultProps`
+                    _this._openTimerId = _this._async.setTimeout(function () {
+                        _this._toggleTooltip(true);
+                    }, delayTime);
+                }
+                else {
+                    _this._toggleTooltip(true);
+                }
+            };
+            // eslint-disable-next-line @typescript-eslint/no-explicit-any
+            _this._onTooltipMouseLeave = function (ev) {
+                var closeDelay = _this.props.closeDelay;
+                _this._clearDismissTimer();
+                _this._clearOpenTimer();
+                if (closeDelay) {
+                    _this._dismissTimerId = _this._async.setTimeout(function () {
+                        _this._toggleTooltip(false);
+                    }, closeDelay);
+                }
+                else {
+                    _this._toggleTooltip(false);
+                }
+                if (SVGTooltipText._currentVisibleTooltip === _this) {
+                    SVGTooltipText._currentVisibleTooltip = undefined;
+                }
+            };
+            _this._onTooltipKeyDown = function (ev) {
+                // eslint-disable-next-line @typescript-eslint/no-deprecated
+                if ((ev.which === Utilities_1.KeyCodes.escape || ev.ctrlKey) && _this.state.isTooltipVisible) {
+                    _this._hideTooltip();
+                    ev.stopPropagation();
+                }
+            };
+            _this._clearDismissTimer = function () {
+                _this._async.clearTimeout(_this._dismissTimerId);
+            };
+            _this._clearOpenTimer = function () {
+                _this._async.clearTimeout(_this._openTimerId);
+            };
+            _this._hideTooltip = function () {
+                _this._clearOpenTimer();
+                _this._clearDismissTimer();
+                _this._toggleTooltip(false);
+            };
+            _this._toggleTooltip = function (isTooltipVisible) {
+                if (_this.state.isTooltipVisible !== isTooltipVisible) {
+                    _this.setState({ isTooltipVisible: isTooltipVisible });
+                }
+            };
+            _this._getDelayTime = function (delay) {
+                switch (delay) {
+                    case Tooltip_1.TooltipDelay.medium:
+                        return 300;
+                    case Tooltip_1.TooltipDelay.long:
+                        return 500;
+                    default:
+                        return 0;
+                }
+            };
+            _this._wrapContent = function () {
+                var _a = _this.props, content = _a.content, wrapContent = _a.wrapContent, _b = _a.maxWidth, maxWidth = _b === void 0 ? Number.POSITIVE_INFINITY : _b, maxHeight = _a.maxHeight;
+                var isOverflowing = false;
+                if (content && wrapContent && wrapContent(content, _this._tooltipHostId, maxWidth, maxHeight)) {
+                    isOverflowing = true;
+                }
+                if (_this.state.isOverflowing !== isOverflowing) {
+                    _this.setState({ isOverflowing: isOverflowing });
+                }
+            };
+            _this.state = {
+                isTooltipVisible: false,
+                isOverflowing: false,
+            };
+            _this._async = new Utilities_1.Async(_this);
+            return _this;
+        }
+        SVGTooltipText.prototype.render = function () {
+            var _a = this.props, content = _a.content, tooltipProps = _a.tooltipProps, textProps = _a.textProps, _b = _a.shouldReceiveFocus, shouldReceiveFocus = _b === void 0 ? true : _b, _c = _a.showBackground, showBackground = _c === void 0 ? false : _c;
+            var _d = this.state, isTooltipVisible = _d.isTooltipVisible, textX = _d.textX, textY = _d.textY, textWidth = _d.textWidth, textHeight = _d.textHeight;
+            var tooltipRenderProps = tslib_1.__assign({ content: content, targetElement: this._getTargetElement(), calloutProps: {
+                    onDismiss: this._hideTooltip,
+                    onMouseEnter: this._onTooltipMouseEnter,
+                    onMouseLeave: this._onTooltipMouseLeave,
+                }, onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave }, tooltipProps);
+            var showTooltip = (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);
+            var backgroundColor = this.props.theme ? this.props.theme.semanticColors.bodyBackground : undefined;
+            var isRTL = (0, react_1.getRTL)();
+            var rectX = isRTL ? (textX !== null && textX !== void 0 ? textX : 0) + (textWidth !== null && textWidth !== void 0 ? textWidth : 0) - PADDING : (textX !== null && textX !== void 0 ? textX : 0) - PADDING;
+            return (React.createElement(React.Fragment, null,
+                showBackground && (React.createElement("rect", { x: rectX, y: (textY !== null && textY !== void 0 ? textY : 0) - PADDING, width: (textWidth !== null && textWidth !== void 0 ? textWidth : 0) + 2 * PADDING, height: (textHeight !== null && textHeight !== void 0 ? textHeight : 0) + 2 * PADDING, fill: backgroundColor, transform: textProps === null || textProps === void 0 ? void 0 : textProps.transform })),
+                React.createElement("text", tslib_1.__assign({}, textProps, { id: this._tooltipHostId, ref: this._tooltipHost, onFocusCapture: this._onTooltipFocus, onBlurCapture: this._onTooltipBlur, onMouseEnter: this._onTooltipMouseEnter, onMouseLeave: this._onTooltipMouseLeave, onKeyDown: this._onTooltipKeyDown, "data-is-focusable": shouldReceiveFocus && this.state.isOverflowing }), content),
+                showTooltip && React.createElement(Tooltip_1.Tooltip, tslib_1.__assign({}, tooltipRenderProps))));
+        };
+        SVGTooltipText.prototype.componentDidMount = function () {
+            this._wrapContent();
+            this._measureText();
+        };
+        SVGTooltipText.prototype.componentDidUpdate = function (prevProps) {
+            if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) {
+                this._wrapContent();
+                this._measureText();
+            }
+        };
+        SVGTooltipText.prototype.componentWillUnmount = function () {
+            if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip === this) {
+                SVGTooltipText._currentVisibleTooltip = undefined;
+            }
+            this._async.dispose();
+        };
+        SVGTooltipText.defaultProps = {
+            delay: Tooltip_1.TooltipDelay.medium,
+        };
+        return SVGTooltipText;
+    }(React.Component));
+    exports.SVGTooltipText = SVGTooltipText;
+});
+//# sourceMappingURL=SVGTooltipText.js.map

package/lib-amd/utilities/SVGTooltipText.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SVGTooltipText.js","sourceRoot":"../src/","sources":["utilities/SVGTooltipText.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { ITooltipHost, ITooltipProps, Tooltip, TooltipDelay } from '@fluentui/react/lib/Tooltip';\nimport { Async, KeyCodes, getId, portalContainsElement } from '../Utilities';\nimport { getRTL, ITheme } from '@fluentui/react';\n\ninterface ISVGTooltipTextProps {\n  /**\n   * Number of milliseconds to delay closing the tooltip, so that the user has time to hover over\n   * the tooltip and interact with it. Hovering over the tooltip will count as hovering over the\n   * host, so that the tooltip will stay open if the user is actively interacting with it.\n   */\n  closeDelay?: number;\n\n  /**\n   * Content to display in the Tooltip.\n   */\n  content?: string;\n\n  /**\n   * Length of delay before showing the tooltip on hover.\n   * @defaultvalue TooltipDelay.medium\n   */\n  delay?: TooltipDelay;\n\n  /**\n   * Additional properties to pass through for Tooltip.\n   */\n  tooltipProps?: ITooltipProps;\n\n  /**\n   * Additional properties to pass through for SVG <text>.\n   */\n  textProps?: React.SVGAttributes<SVGTextElement>;\n\n  /**\n   * Max width of text\n   */\n  maxWidth?: number;\n\n  /**\n   * Max height of text\n   */\n  maxHeight?: number;\n\n  /**\n   * Pass false to make prevent the tooptip from receiving focus through keyboard\n   * Eg: In Pie Chart, the focus should only land on the arcs and not on the text to\n   * avoid repitition of the same datapoint\n   * @defaultvalue true\n   */\n  shouldReceiveFocus?: boolean;\n\n  /**\n   * Pass true to show tooltip directly\n   * Eg: In Pie Chart, the tooltip is shown when the arc is focussed, so the prop is set to true,\n   * to directly show the tooltip from this component\n   * @defaultvalue false\n   */\n  isTooltipVisibleProp?: boolean;\n\n  /**\n   * Function to wrap text within specified width and height\n   * and return a boolean value indicating whether the text overflowed\n   */\n  wrapContent?: (content: string, id: string, maxWidth: number, maxHeight?: number) => boolean;\n\n  /**\n   * Theme provided by High Order Component\n   */\n  theme?: ITheme;\n\n  /**\n   * @default false\n   * Prop to selectively display the tooltip background\n   */\n  showBackground?: boolean;\n}\n\ninterface ISVGTooltipTextState {\n  isTooltipVisible: boolean;\n  isOverflowing: boolean;\n  textX?: number;\n  textY?: number;\n  textWidth?: number;\n  textHeight?: number;\n}\n\nconst PADDING = 4;\n\n/**\n * Component to render an SVG text element with an optional tooltip.\n * The tooltip appears on hovering and focusing the element when its content overflows.\n */\nexport class SVGTooltipText\n  extends React.Component<ISVGTooltipTextProps, ISVGTooltipTextState>\n  implements ITooltipHost\n{\n  public static defaultProps = {\n    delay: TooltipDelay.medium,\n  };\n\n  private static _currentVisibleTooltip: ITooltipHost | undefined;\n\n  /** The element that gets the hover events */\n  private _tooltipHost = React.createRef<SVGTextElement>();\n\n  private _async: Async;\n  private _dismissTimerId: number;\n  private _openTimerId: number;\n  private _tooltipHostId = getId('tooltip-host');\n  private _ignoreNextFocusEvent: boolean;\n\n  constructor(props: ISVGTooltipTextProps) {\n    super(props);\n\n    this.state = {\n      isTooltipVisible: false,\n      isOverflowing: false,\n    };\n\n    this._async = new Async(this);\n  }\n\n  public render(): React.ReactNode {\n    const { content, tooltipProps, textProps, shouldReceiveFocus = true, showBackground = false } = this.props;\n    const { isTooltipVisible, textX, textY, textWidth, textHeight } = this.state;\n    const tooltipRenderProps: ITooltipProps = {\n      content,\n      targetElement: this._getTargetElement(),\n      calloutProps: {\n        onDismiss: this._hideTooltip,\n        onMouseEnter: this._onTooltipMouseEnter,\n        onMouseLeave: this._onTooltipMouseLeave,\n      },\n      onMouseEnter: this._onTooltipMouseEnter,\n      onMouseLeave: this._onTooltipMouseLeave,\n      ...tooltipProps,\n    };\n\n    const showTooltip =\n      (!!this.props.isTooltipVisibleProp && this.state.isOverflowing && !!content) || (isTooltipVisible && !!content);\n    const backgroundColor = this.props.theme ? this.props.theme.semanticColors.bodyBackground : undefined;\n    const isRTL = getRTL();\n    const rectX = isRTL ? (textX ?? 0) + (textWidth ?? 0) - PADDING : (textX ?? 0) - PADDING;\n    return (\n      <>\n        {showBackground && (\n          <rect\n            x={rectX}\n            y={(textY ?? 0) - PADDING}\n            width={(textWidth ?? 0) + 2 * PADDING}\n            height={(textHeight ?? 0) + 2 * PADDING}\n            fill={backgroundColor}\n            transform={textProps?.transform}\n          />\n        )}\n        <text\n          {...textProps}\n          id={this._tooltipHostId}\n          ref={this._tooltipHost}\n          onFocusCapture={this._onTooltipFocus}\n          onBlurCapture={this._onTooltipBlur}\n          onMouseEnter={this._onTooltipMouseEnter}\n          onMouseLeave={this._onTooltipMouseLeave}\n          onKeyDown={this._onTooltipKeyDown}\n          data-is-focusable={shouldReceiveFocus && this.state.isOverflowing}\n        >\n          {content}\n        </text>\n        {showTooltip && <Tooltip {...tooltipRenderProps} />}\n      </>\n    );\n  }\n\n  public componentDidMount(): void {\n    this._wrapContent();\n    this._measureText();\n  }\n\n  public componentDidUpdate(prevProps: Readonly<ISVGTooltipTextProps>): void {\n    if (this.props.maxWidth !== prevProps.maxWidth || this.props.maxHeight !== prevProps.maxHeight) {\n      this._wrapContent();\n      this._measureText();\n    }\n  }\n\n  public componentWillUnmount(): void {\n    if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip === this) {\n      SVGTooltipText._currentVisibleTooltip = undefined;\n    }\n\n    this._async.dispose();\n  }\n\n  public show = (): void => {\n    this._toggleTooltip(true);\n  };\n\n  public dismiss = (): void => {\n    this._hideTooltip();\n  };\n\n  private _measureText = (): void => {\n    if (this._tooltipHost.current && typeof this._tooltipHost.current.getBBox === 'function') {\n      const bbox = this._tooltipHost.current.getBBox();\n      this.setState({\n        textX: bbox.x,\n        textY: bbox.y,\n        textWidth: bbox.width,\n        textHeight: bbox.height,\n      });\n    }\n  };\n\n  private _getTargetElement = (): HTMLElement | undefined => {\n    if (!this._tooltipHost.current) {\n      return undefined;\n    }\n\n    return this._tooltipHost.current as unknown as HTMLElement;\n  };\n\n  private _onTooltipFocus = (ev: React.FocusEvent<SVGElement>) => {\n    if (this._ignoreNextFocusEvent) {\n      this._ignoreNextFocusEvent = false;\n      return;\n    }\n\n    this._onTooltipMouseEnter(ev);\n  };\n\n  private _onTooltipBlur = (ev: React.FocusEvent<SVGElement>) => {\n    // The focused element gets a blur event when the document loses focus\n    // (e.g. switching tabs in the browser), but we don't want to show the\n    // tooltip again when the document gets focus back. Handle this case by\n    // checking if the blurred element is still the document's activeElement,\n    // and ignoring when it next gets focus back.\n    // See https://github.com/microsoft/fluentui/issues/13541\n    this._ignoreNextFocusEvent = document?.activeElement === ev.target;\n\n    this._dismissTimerId = this._async.setTimeout(() => {\n      this._hideTooltip();\n    }, 0);\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _onTooltipMouseEnter = (ev: any): void => {\n    const { delay } = this.props;\n\n    if (SVGTooltipText._currentVisibleTooltip && SVGTooltipText._currentVisibleTooltip !== this) {\n      SVGTooltipText._currentVisibleTooltip.dismiss();\n    }\n    SVGTooltipText._currentVisibleTooltip = this;\n\n    if (!this.state.isOverflowing) {\n      return;\n    }\n\n    if (ev.target && portalContainsElement(ev.target as HTMLElement, this._getTargetElement())) {\n      // Do not show tooltip when target is inside a portal relative to TooltipHost.\n      return;\n    }\n\n    this._clearDismissTimer();\n    this._clearOpenTimer();\n\n    if (delay !== TooltipDelay.zero) {\n      const delayTime = this._getDelayTime(delay!); // non-null assertion because we set it in `defaultProps`\n\n      this._openTimerId = this._async.setTimeout(() => {\n        this._toggleTooltip(true);\n      }, delayTime);\n    } else {\n      this._toggleTooltip(true);\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  private _onTooltipMouseLeave = (ev: any): void => {\n    const { closeDelay } = this.props;\n\n    this._clearDismissTimer();\n    this._clearOpenTimer();\n\n    if (closeDelay) {\n      this._dismissTimerId = this._async.setTimeout(() => {\n        this._toggleTooltip(false);\n      }, closeDelay);\n    } else {\n      this._toggleTooltip(false);\n    }\n\n    if (SVGTooltipText._currentVisibleTooltip === this) {\n      SVGTooltipText._currentVisibleTooltip = undefined;\n    }\n  };\n\n  private _onTooltipKeyDown = (ev: React.KeyboardEvent<SVGElement>): void => {\n    // eslint-disable-next-line @typescript-eslint/no-deprecated\n    if ((ev.which === KeyCodes.escape || ev.ctrlKey) && this.state.isTooltipVisible) {\n      this._hideTooltip();\n      ev.stopPropagation();\n    }\n  };\n\n  private _clearDismissTimer = (): void => {\n    this._async.clearTimeout(this._dismissTimerId);\n  };\n\n  private _clearOpenTimer = (): void => {\n    this._async.clearTimeout(this._openTimerId);\n  };\n\n  private _hideTooltip = (): void => {\n    this._clearOpenTimer();\n    this._clearDismissTimer();\n    this._toggleTooltip(false);\n  };\n\n  private _toggleTooltip = (isTooltipVisible: boolean): void => {\n    if (this.state.isTooltipVisible !== isTooltipVisible) {\n      this.setState({ isTooltipVisible });\n    }\n  };\n\n  private _getDelayTime = (delay: TooltipDelay): number => {\n    switch (delay) {\n      case TooltipDelay.medium:\n        return 300;\n      case TooltipDelay.long:\n        return 500;\n      default:\n        return 0;\n    }\n  };\n\n  private _wrapContent = () => {\n    const { content, wrapContent, maxWidth = Number.POSITIVE_INFINITY, maxHeight } = this.props;\n\n    let isOverflowing = false;\n    if (content && wrapContent && wrapContent(content, this._tooltipHostId, maxWidth, maxHeight)) {\n      isOverflowing = true;\n    }\n\n    if (this.state.isOverflowing !== isOverflowing) {\n      this.setState({ isOverflowing });\n    }\n  };\n}\n"]}

package/lib-amd/utilities/colors.d.ts

@@ -0,0 +1,52 @@
+export declare const DataVizPalette: {
+    color1: string;
+    color2: string;
+    color3: string;
+    color4: string;
+    color5: string;
+    color6: string;
+    color7: string;
+    color8: string;
+    color9: string;
+    color10: string;
+    color11: string;
+    color12: string;
+    color13: string;
+    color14: string;
+    color15: string;
+    color16: string;
+    color17: string;
+    color18: string;
+    color19: string;
+    color20: string;
+    color21: string;
+    color22: string;
+    color23: string;
+    color24: string;
+    color25: string;
+    color26: string;
+    color27: string;
+    color28: string;
+    color29: string;
+    color30: string;
+    color31: string;
+    color32: string;
+    color33: string;
+    color34: string;
+    color35: string;
+    color36: string;
+    color37: string;
+    color38: string;
+    color39: string;
+    color40: string;
+    info: string;
+    disabled: string;
+    highError: string;
+    error: string;
+    warning: string;
+    success: string;
+    highSuccess: string;
+};
+export declare const getNextColor: (index: number, offset?: number, isDarkTheme?: boolean) => string;
+export declare const getColorFromToken: (token: string, isDarkTheme?: boolean) => string;
+export declare const getColorContrast: (c1: string, c2: string) => number;

package/lib-amd/utilities/colors.js

@@ -0,0 +1,161 @@
+define(["require", "exports", "d3-color"], function (require, exports, d3_color_1) {
+    "use strict";
+    Object.defineProperty(exports, "__esModule", { value: true });
+    exports.getColorContrast = exports.getColorFromToken = exports.getNextColor = exports.DataVizPalette = void 0;
+    exports.DataVizPalette = {
+        color1: 'qualitative.1',
+        color2: 'qualitative.2',
+        color3: 'qualitative.3',
+        color4: 'qualitative.4',
+        color5: 'qualitative.5',
+        color6: 'qualitative.6',
+        color7: 'qualitative.7',
+        color8: 'qualitative.8',
+        color9: 'qualitative.9',
+        color10: 'qualitative.10',
+        color11: 'qualitative.11',
+        color12: 'qualitative.12',
+        color13: 'qualitative.13',
+        color14: 'qualitative.14',
+        color15: 'qualitative.15',
+        color16: 'qualitative.16',
+        color17: 'qualitative.17',
+        color18: 'qualitative.18',
+        color19: 'qualitative.19',
+        color20: 'qualitative.20',
+        color21: 'qualitative.21',
+        color22: 'qualitative.22',
+        color23: 'qualitative.23',
+        color24: 'qualitative.24',
+        color25: 'qualitative.25',
+        color26: 'qualitative.26',
+        color27: 'qualitative.27',
+        color28: 'qualitative.28',
+        color29: 'qualitative.29',
+        color30: 'qualitative.30',
+        color31: 'qualitative.31',
+        color32: 'qualitative.32',
+        color33: 'qualitative.33',
+        color34: 'qualitative.34',
+        color35: 'qualitative.35',
+        color36: 'qualitative.36',
+        color37: 'qualitative.37',
+        color38: 'qualitative.38',
+        color39: 'qualitative.39',
+        color40: 'qualitative.40',
+        info: 'semantic.info',
+        disabled: 'semantic.disabled',
+        highError: 'semantic.highError',
+        error: 'semantic.error',
+        warning: 'semantic.warning',
+        success: 'semantic.success',
+        highSuccess: 'semantic.highSuccess',
+    };
+    var QualitativePalette = {
+        '1': ['#637cef'], // [cornflower.tint10],
+        '2': ['#e3008c'], // [hotPink.primary],
+        '3': ['#2aa0a4'], // [teal.tint20],
+        '4': ['#9373c0'], // [orchid.tint10],
+        '5': ['#13a10e'], // [lightGreen.primary],
+        '6': ['#3a96dd'], // [lightBlue.primary],
+        '7': ['#ca5010'], // [pumpkin.primary],
+        '8': ['#57811b'], // [lime.shade20],
+        '9': ['#b146c2'], // [lilac.primary],
+        '10': ['#ae8c00'], // [gold.shade10],
+        '11': ['#3c51b4', '#93a4f4'], // [cornflower.shade20, cornflower.tint30],
+        '12': ['#ad006a', '#ee5fb7'], // [hotPink.shade20, hotPink.tint30],
+        '13': ['#026467', '#4cb4b7'], // [teal.shade20, teal.tint30],
+        '14': ['#674c8c', '#a083c9'], // [orchid.shade20, orchid.tint20],
+        '15': ['#0e7a0b', '#27ac22'], // [lightGreen.shade20, lightGreen.tint10],
+        '16': ['#2c72a8', '#4fa1e1'], // [lightBlue.shade20, lightBlue.tint10],
+        '17': ['#9a3d0c', '#d77440'], // [pumpkin.shade20, pumpkin.tint20],
+        '18': ['#405f14', '#73aa24'], // [lime.shade30, lime.primary],
+        '19': ['#863593', '#c36bd1'], // [lilac.shade20, lilac.tint20],
+        '20': ['#6d5700', '#d0b232'], // [gold.shade30, gold.tint20],
+        '21': ['#4f6bed'], // [cornflower.primary],
+        '22': ['#ea38a6'], // [hotPink.tint20],
+        '23': ['#038387'], // [teal.primary],
+        '24': ['#8764b8'], // [orchid.primary],
+        '25': ['#11910d'], // [lightGreen.shade10],
+        '26': ['#3487c7'], // [lightBlue.shade10],
+        '27': ['#d06228'], // [pumpkin.tint10],
+        '28': ['#689920'], // [lime.shade10],
+        '29': ['#ba58c9'], // [lilac.tint10],
+        '30': ['#937700', '#c19c00'], // [gold.shade20, gold.primary],
+        '31': ['#2c3c85', '#c8d1fa'], // [cornflower.shade30, cornflower.tint40],
+        '32': ['#7f004e', '#f7adda'], // [hotPink.shade30, hotPink.tint40],
+        '33': ['#02494c', '#9bd9db'], // [teal.shade30, teal.tint40],
+        '34': ['#4c3867', '#b29ad4'], // [orchid.shade30, orchid.tint30],
+        '35': ['#0b5a08', '#a7e3a5'], // [lightGreen.shade30, lightGreen.tint40],
+        '36': ['#20547c', '#83bdeb'], // [lightBlue.shade30, lightBlue.tint30],
+        '37': ['#712d09', '#df8e64'], // [pumpkin.shade30, pumpkin.tint30],
+        '38': ['#23330b', '#a4cc6c'], // [lime.shade40, lime.tint30],
+        '39': ['#63276d', '#cf87da'], // [lilac.shade30, lilac.tint30],
+        '40': ['#3a2f00', '#dac157'], // [gold.shade40, gold.tint30],
+    };
+    var SemanticPalette = {
+        info: ['#015cda'],
+        disabled: ['#dbdbdb', '#4d4d4d'], // [grey[86], grey[30]]
+        highError: ['#6e0811', '#cc2635'], // [cranberry.shade30, cranberry.tint10],
+        error: ['#c50f1f', '#dc626d'], // [cranberry.primary, cranberry.tint30],
+        warning: ['#f7630c', '#f87528'], // [orange.primary, orange.tint10],
+        success: ['#107c10', '#54b054'], // [green.primary, green.tint30],
+        highSuccess: ['#094509', '#218c21'], // [green.shade30, green.tint10],
+    };
+    var Colors = {
+        qualitative: QualitativePalette,
+        semantic: SemanticPalette,
+    };
+    var QUALITATIVE_COLORS = Object.values(QualitativePalette);
+    var TOKENS = Object.values(exports.DataVizPalette);
+    var getThemeSpecificColor = function (colors, isDarkTheme) {
+        if (colors.length === 0) {
+            return '';
+        }
+        var colorIdx = Number(isDarkTheme);
+        if (colorIdx < colors.length) {
+            return colors[colorIdx];
+        }
+        return colors[0];
+    };
+    var getNextColor = function (index, offset, isDarkTheme) {
+        if (offset === void 0) { offset = 0; }
+        if (isDarkTheme === void 0) { isDarkTheme = false; }
+        var colors = QUALITATIVE_COLORS[(index + offset) % QUALITATIVE_COLORS.length];
+        return getThemeSpecificColor(colors, isDarkTheme);
+    };
+    exports.getNextColor = getNextColor;
+    var getColorFromToken = function (token, isDarkTheme) {
+        if (isDarkTheme === void 0) { isDarkTheme = false; }
+        if (TOKENS.indexOf(token) >= 0) {
+            var _a = token.split('.'), paletteName = _a[0], colorCode = _a[1];
+            var colors = Colors[paletteName][colorCode];
+            return getThemeSpecificColor(colors, isDarkTheme);
+        }
+        return token;
+    };
+    exports.getColorFromToken = getColorFromToken;
+    //For reference to how these numbers are calculated, refer https://www.w3.org/TR/WCAG/#dfn-contrast-ratio
+    var rgbLrgb1 = function (v) {
+        return v <= 0.04045 ? v / 12.92 : Math.pow(((v + 0.055) / 1.055), 2.4);
+    };
+    var rgbLrgb = function (_a) {
+        var r = _a.r, g = _a.g, b = _a.b;
+        return {
+            r: rgbLrgb1(r / 255),
+            g: rgbLrgb1(g / 255),
+            b: rgbLrgb1(b / 255),
+        };
+    };
+    var lrgbLuminance = function (_a) {
+        var r = _a.r, g = _a.g, b = _a.b;
+        return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+    };
+    var getColorContrast = function (c1, c2) {
+        var l1 = lrgbLuminance(rgbLrgb((0, d3_color_1.rgb)(c1)));
+        var l2 = lrgbLuminance(rgbLrgb((0, d3_color_1.rgb)(c2)));
+        return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);
+    };
+    exports.getColorContrast = getColorContrast;
+});
+//# sourceMappingURL=colors.js.map

package/lib-amd/utilities/colors.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sourceRoot":"../src/","sources":["utilities/colors.ts"],"names":[],"mappings":"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","sourcesContent":["import { rgb as d3Rgb } from 'd3-color';\n\nexport const DataVizPalette = {\n  color1: 'qualitative.1',\n  color2: 'qualitative.2',\n  color3: 'qualitative.3',\n  color4: 'qualitative.4',\n  color5: 'qualitative.5',\n  color6: 'qualitative.6',\n  color7: 'qualitative.7',\n  color8: 'qualitative.8',\n  color9: 'qualitative.9',\n  color10: 'qualitative.10',\n  color11: 'qualitative.11',\n  color12: 'qualitative.12',\n  color13: 'qualitative.13',\n  color14: 'qualitative.14',\n  color15: 'qualitative.15',\n  color16: 'qualitative.16',\n  color17: 'qualitative.17',\n  color18: 'qualitative.18',\n  color19: 'qualitative.19',\n  color20: 'qualitative.20',\n  color21: 'qualitative.21',\n  color22: 'qualitative.22',\n  color23: 'qualitative.23',\n  color24: 'qualitative.24',\n  color25: 'qualitative.25',\n  color26: 'qualitative.26',\n  color27: 'qualitative.27',\n  color28: 'qualitative.28',\n  color29: 'qualitative.29',\n  color30: 'qualitative.30',\n  color31: 'qualitative.31',\n  color32: 'qualitative.32',\n  color33: 'qualitative.33',\n  color34: 'qualitative.34',\n  color35: 'qualitative.35',\n  color36: 'qualitative.36',\n  color37: 'qualitative.37',\n  color38: 'qualitative.38',\n  color39: 'qualitative.39',\n  color40: 'qualitative.40',\n  info: 'semantic.info',\n  disabled: 'semantic.disabled',\n  highError: 'semantic.highError',\n  error: 'semantic.error',\n  warning: 'semantic.warning',\n  success: 'semantic.success',\n  highSuccess: 'semantic.highSuccess',\n};\n\n/**\n * Key: Color code.\n * Value:\n * Index 0 - Default color / Color for light theme,\n * Index 1 - Color for dark theme\n */\ntype Palette = { [key: string]: string[] };\n\nconst QualitativePalette: Palette = {\n  '1': ['#637cef'], // [cornflower.tint10],\n  '2': ['#e3008c'], // [hotPink.primary],\n  '3': ['#2aa0a4'], // [teal.tint20],\n  '4': ['#9373c0'], // [orchid.tint10],\n  '5': ['#13a10e'], // [lightGreen.primary],\n  '6': ['#3a96dd'], // [lightBlue.primary],\n  '7': ['#ca5010'], // [pumpkin.primary],\n  '8': ['#57811b'], // [lime.shade20],\n  '9': ['#b146c2'], // [lilac.primary],\n  '10': ['#ae8c00'], // [gold.shade10],\n  '11': ['#3c51b4', '#93a4f4'], // [cornflower.shade20, cornflower.tint30],\n  '12': ['#ad006a', '#ee5fb7'], // [hotPink.shade20, hotPink.tint30],\n  '13': ['#026467', '#4cb4b7'], // [teal.shade20, teal.tint30],\n  '14': ['#674c8c', '#a083c9'], // [orchid.shade20, orchid.tint20],\n  '15': ['#0e7a0b', '#27ac22'], // [lightGreen.shade20, lightGreen.tint10],\n  '16': ['#2c72a8', '#4fa1e1'], // [lightBlue.shade20, lightBlue.tint10],\n  '17': ['#9a3d0c', '#d77440'], // [pumpkin.shade20, pumpkin.tint20],\n  '18': ['#405f14', '#73aa24'], // [lime.shade30, lime.primary],\n  '19': ['#863593', '#c36bd1'], // [lilac.shade20, lilac.tint20],\n  '20': ['#6d5700', '#d0b232'], // [gold.shade30, gold.tint20],\n  '21': ['#4f6bed'], // [cornflower.primary],\n  '22': ['#ea38a6'], // [hotPink.tint20],\n  '23': ['#038387'], // [teal.primary],\n  '24': ['#8764b8'], // [orchid.primary],\n  '25': ['#11910d'], // [lightGreen.shade10],\n  '26': ['#3487c7'], // [lightBlue.shade10],\n  '27': ['#d06228'], // [pumpkin.tint10],\n  '28': ['#689920'], // [lime.shade10],\n  '29': ['#ba58c9'], // [lilac.tint10],\n  '30': ['#937700', '#c19c00'], // [gold.shade20, gold.primary],\n  '31': ['#2c3c85', '#c8d1fa'], // [cornflower.shade30, cornflower.tint40],\n  '32': ['#7f004e', '#f7adda'], // [hotPink.shade30, hotPink.tint40],\n  '33': ['#02494c', '#9bd9db'], // [teal.shade30, teal.tint40],\n  '34': ['#4c3867', '#b29ad4'], // [orchid.shade30, orchid.tint30],\n  '35': ['#0b5a08', '#a7e3a5'], // [lightGreen.shade30, lightGreen.tint40],\n  '36': ['#20547c', '#83bdeb'], // [lightBlue.shade30, lightBlue.tint30],\n  '37': ['#712d09', '#df8e64'], // [pumpkin.shade30, pumpkin.tint30],\n  '38': ['#23330b', '#a4cc6c'], // [lime.shade40, lime.tint30],\n  '39': ['#63276d', '#cf87da'], // [lilac.shade30, lilac.tint30],\n  '40': ['#3a2f00', '#dac157'], // [gold.shade40, gold.tint30],\n};\n\nconst SemanticPalette: Palette = {\n  info: ['#015cda'],\n  disabled: ['#dbdbdb', '#4d4d4d'], // [grey[86], grey[30]]\n  highError: ['#6e0811', '#cc2635'], // [cranberry.shade30, cranberry.tint10],\n  error: ['#c50f1f', '#dc626d'], // [cranberry.primary, cranberry.tint30],\n  warning: ['#f7630c', '#f87528'], // [orange.primary, orange.tint10],\n  success: ['#107c10', '#54b054'], // [green.primary, green.tint30],\n  highSuccess: ['#094509', '#218c21'], // [green.shade30, green.tint10],\n};\n\nconst Colors: { [key: string]: Palette } = {\n  qualitative: QualitativePalette,\n  semantic: SemanticPalette,\n};\n\nconst QUALITATIVE_COLORS = Object.values(QualitativePalette);\nconst TOKENS = Object.values(DataVizPalette);\n\nconst getThemeSpecificColor = (colors: string[], isDarkTheme: boolean): string => {\n  if (colors.length === 0) {\n    return '';\n  }\n  const colorIdx = Number(isDarkTheme);\n  if (colorIdx < colors.length) {\n    return colors[colorIdx];\n  }\n  return colors[0];\n};\n\nexport const getNextColor = (index: number, offset: number = 0, isDarkTheme: boolean = false): string => {\n  const colors = QUALITATIVE_COLORS[(index + offset) % QUALITATIVE_COLORS.length];\n  return getThemeSpecificColor(colors, isDarkTheme);\n};\n\nexport const getColorFromToken = (token: string, isDarkTheme: boolean = false): string => {\n  if (TOKENS.indexOf(token) >= 0) {\n    const [paletteName, colorCode] = token.split('.');\n    const colors = Colors[paletteName][colorCode];\n    return getThemeSpecificColor(colors, isDarkTheme);\n  }\n  return token;\n};\n\n//For reference to how these numbers are calculated, refer https://www.w3.org/TR/WCAG/#dfn-contrast-ratio\nconst rgbLrgb1 = (v: number): number => {\n  return v <= 0.04045 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;\n};\n\nconst rgbLrgb = ({ r, g, b }: { r: number; g: number; b: number }): { r: number; g: number; b: number } => {\n  return {\n    r: rgbLrgb1(r / 255),\n    g: rgbLrgb1(g / 255),\n    b: rgbLrgb1(b / 255),\n  };\n};\n\nconst lrgbLuminance = ({ r, g, b }: { r: number; g: number; b: number }): number => {\n  return 0.2126 * r + 0.7152 * g + 0.0722 * b;\n};\n\nexport const getColorContrast = (c1: string, c2: string): number => {\n  const l1 = lrgbLuminance(rgbLrgb(d3Rgb(c1)));\n  const l2 = lrgbLuminance(rgbLrgb(d3Rgb(c2)));\n  return (Math.max(l1, l2) + 0.05) / (Math.min(l1, l2) + 0.05);\n};\n"]}

package/lib-amd/utilities/gradients.d.ts

@@ -0,0 +1,30 @@
+export declare const DataVizGradientPalette: {
+    gradient1: string;
+    gradient2: string;
+    gradient3: string;
+    gradient4: string;
+    gradient5: string;
+    gradient6: string;
+    gradient7: string;
+    gradient8: string;
+    gradient9: string;
+    gradient10: string;
+    gradient1Ext: string;
+    gradient2Ext: string;
+    gradient3Ext: string;
+    gradient4Ext: string;
+    gradient5Ext: string;
+    gradient6Ext: string;
+    gradient7Ext: string;
+    gradient8Ext: string;
+    gradient9Ext: string;
+    gradient10Ext: string;
+    success: string;
+    highSuccess: string;
+    warning: string;
+    error: string;
+    highError: string;
+    disabled: string;
+};
+export declare const getNextGradient: (index: number, offset?: number, isDarkTheme?: boolean) => [string, string];
+export declare const getGradientFromToken: (token: string, isDarkTheme?: boolean) => [string, string];