"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.FocusableTooltipText = void 0;
var tslib_1 = require("tslib");
var React = require("react");
var react_1 = require("@fluentui/react");
var index_1 = require("./index");
var Utilities_1 = require("../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) {
    tslib_1.__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 && (0, react_1.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 Utilities_1.Async(_this);
        return _this;
    }
    FocusableTooltipText.prototype.render = function () {
        var _a = this.props, className = _a.className, content = _a.content, accessibilityData = _a.accessibilityData;
        return (React.createElement(react_1.TooltipHost, { overflowMode: react_1.TooltipOverflowMode.Self, hostClassName: className, content: content },
            React.createElement("span", tslib_1.__assign({}, (0, index_1.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));
exports.FocusableTooltipText = FocusableTooltipText;
//# sourceMappingURL=FocusableTooltipText.js.map