import { __assign, __extends } from "tslib";
import * as React from 'react';
import { hasOverflow, TooltipHost, TooltipOverflowMode } from '@fluentui/react';
import { getAccessibleDataObject } from './index';
import { Async } from '../Utilities';
/**
 * Component to make the text focusable when the overflowed content is clipped
 * because of the CSS text-overflow property.
 */
var FocusableTooltipText = /** @class */ (function (_super) {
    __extends(FocusableTooltipText, _super);
    function FocusableTooltipText(props) {
        var _this = _super.call(this, props) || this;
        _this._tooltipChild = React.createRef();
        _this._checkTextOverflow = function () {
            var overflowElement = _this._getTargetElement();
            var textOverflow = !!overflowElement && hasOverflow(overflowElement);
            if (textOverflow !== _this.state.textOverflow) {
                _this.setState({ textOverflow: textOverflow });
            }
        };
        _this._getTargetElement = function () {
            if (!_this._tooltipChild.current || !_this._tooltipChild.current.parentElement) {
                return undefined;
            }
            return _this._tooltipChild.current.parentElement;
        };
        _this.state = {
            textOverflow: false,
        };
        _this._async = new Async(_this);
        return _this;
    }
    FocusableTooltipText.prototype.render = function () {
        var _a = this.props, className = _a.className, content = _a.content, accessibilityData = _a.accessibilityData;
        return (React.createElement(TooltipHost, { overflowMode: TooltipOverflowMode.Self, hostClassName: className, content: content },
            React.createElement("span", __assign({}, getAccessibleDataObject(accessibilityData), { ref: this._tooltipChild, "data-is-focusable": this.state.textOverflow }), content)));
    };
    FocusableTooltipText.prototype.componentDidMount = function () {
        var overflowElement = this._getTargetElement();
        if (window.ResizeObserver && overflowElement) {
            this._resizeObserver = new ResizeObserver(this._async.debounce(this._checkTextOverflow, 500));
            this._resizeObserver.observe(overflowElement);
        }
    };
    FocusableTooltipText.prototype.componentWillUnmount = function () {
        var _a;
        (_a = this._resizeObserver) === null || _a === void 0 ? void 0 : _a.disconnect();
        this._async.dispose();
    };
    return FocusableTooltipText;
}(React.Component));
export { FocusableTooltipText };
//# sourceMappingURL=FocusableTooltipText.js.map