@skbkontur/react-ui 0.0.0-7dc91ef93e → 0.0.0-7f260475fb

package/components/Tooltip/__stories__/Tooltip.stories.js

@@ -0,0 +1,528 @@
+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 (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
+        return extendStatics(d, b);
+    };
+    return function (d, b) {
+        if (typeof b !== "function" && b !== null)
+            throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
+        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);
+};
+import React from 'react';
+import { QuestionCircleIcon16Regular } from '@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular.js';
+import { Tooltip } from '../Tooltip.js';
+import { Button } from '../../Button/index.js';
+import { PopupPinnablePositions } from '../../../internal/Popup/index.js';
+import { createPropsGetter } from '../../../lib/createPropsGetter.js';
+import { Textarea } from '../../Textarea/index.js';
+import { Checkbox } from '../../Checkbox/index.js';
+import { Gapped } from '../../Gapped/index.js';
+import { Input } from '../../Input/index.js';
+var TestTooltip = /** @class */ (function (_super) {
+    __extends(TestTooltip, _super);
+    function TestTooltip() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.getProps = createPropsGetter(TestTooltip.defaultProps);
+        return _this;
+    }
+    TestTooltip.prototype.render = function () {
+        var _a = this.props, trigger = _a.trigger, children = _a.children;
+        return (React.createElement("div", { "data-tid": "TestTooltip", style: { padding: '150px' } },
+            React.createElement(Tooltip, { pos: this.getProps().pos, render: function () { return React.createElement("div", null, "Hey there!"); }, trigger: trigger, useWrapper: this.props.useWrapper, disableAnimations: this.props.disableAnimations }, children)));
+    };
+    TestTooltip.defaultProps = {
+        pos: 'top center',
+    };
+    return TestTooltip;
+}(React.Component));
+export default {
+    title: 'Tooltip',
+    component: Tooltip,
+};
+export var SimpleTooltip = function () { return (React.createElement(TestTooltip, null,
+    React.createElement(Button, null, "Hover me!"))); };
+SimpleTooltip.storyName = 'simple tooltip';
+SimpleTooltip.parameters = { creevey: { skip: true } };
+export var StaticTooltip = function () { return (React.createElement(TestTooltip, { trigger: "opened" },
+    React.createElement("div", null, "Look bottom"))); };
+StaticTooltip.storyName = 'static tooltip';
+export var ClickableTooltip = function () { return (React.createElement(TestTooltip, { trigger: "click" },
+    React.createElement(Button, null, "Click me"))); };
+ClickableTooltip.storyName = 'clickable tooltip';
+ClickableTooltip.parameters = { creevey: { skip: true } };
+export var FocusTooltip = function () { return (React.createElement(TestTooltip, { trigger: "focus", disableAnimations: true },
+    React.createElement(Button, null, "Focus me"))); };
+FocusTooltip.storyName = 'focus tooltip';
+export var FocusTooltipNativeInput = function () { return (React.createElement(TestTooltip, { trigger: "focus", disableAnimations: true },
+    React.createElement("input", { "aria-label": "Focus input example" }))); };
+FocusTooltipNativeInput.storyName = 'focus tooltip (native input)';
+export var TooltipLeft = function () { return (React.createElement(TestTooltip, { trigger: "opened", pos: "left top" },
+    React.createElement("span", null, "Some label"))); };
+TooltipLeft.storyName = 'tooltip left';
+export var TooltipRight = function () { return (React.createElement(TestTooltip, { useWrapper: false, trigger: "opened", pos: "right top" },
+    React.createElement("span", null, "Some label"))); };
+TooltipRight.storyName = 'tooltip right';
+export var TooltipBottom = function () { return (React.createElement(TestTooltip, { trigger: "opened", pos: "bottom center" },
+    React.createElement("span", null, "Some label"))); };
+TooltipBottom.storyName = 'tooltip bottom';
+export var TooltipWithFunctionalComponentChild = function () {
+    function PureComp() {
+        return React.createElement("div", null, "Pure Component!");
+    }
+    return (React.createElement(TestTooltip, { trigger: "opened", pos: "bottom center" },
+        React.createElement(PureComp, null)));
+};
+TooltipWithFunctionalComponentChild.storyName = 'tooltip with functional component child';
+TooltipWithFunctionalComponentChild.parameters = { creevey: { skip: true } };
+export var TooltipWithFunctionalComponentChildHover = function () {
+    function PureComp() {
+        return React.createElement("div", null, "Pure Component!");
+    }
+    return (React.createElement(TestTooltip, { trigger: "hover", pos: "bottom center" },
+        React.createElement(PureComp, null)));
+};
+TooltipWithFunctionalComponentChildHover.storyName = 'tooltip with functional component child hover';
+TooltipWithFunctionalComponentChildHover.parameters = { creevey: { skip: true } };
+export var TooltipWithFunctionalComponentClick = function () {
+    function PureComp() {
+        return React.createElement("div", null, "Pure Component!");
+    }
+    return (React.createElement(TestTooltip, { trigger: "click", pos: "bottom center" },
+        React.createElement(PureComp, null)));
+};
+TooltipWithFunctionalComponentClick.storyName = 'tooltip with functional component click';
+TooltipWithFunctionalComponentClick.parameters = { creevey: { skip: true } };
+export var MyCustomTooltipStory = function () { return React.createElement(MyCustomTooltip, null); };
+MyCustomTooltipStory.storyName = 'MyCustomTooltip';
+MyCustomTooltipStory.parameters = { creevey: { skip: true } };
+export var ManualTooltipStory = function () { return React.createElement(ManualTooltip, null); };
+ManualTooltipStory.storyName = 'ManualTooltip';
+ManualTooltipStory.parameters = { creevey: { skip: true } };
+export var TooltipWithoutAnimations = function () { return (React.createElement("div", null,
+    React.createElement(Tooltip, { render: function () { return 'No disableAnimations prop'; }, trigger: 'hover' },
+        React.createElement(Button, null, "Hover me (No disableAnimations prop)")),
+    React.createElement(Tooltip, { render: function () { return 'disableAnimations={false}'; }, trigger: 'hover', disableAnimations: false },
+        React.createElement(Button, null, "Hover me (disableAnimations: false)")),
+    React.createElement(Tooltip, { render: function () { return 'disableAnimations={true}'; }, trigger: 'hover', disableAnimations: true },
+        React.createElement(Button, null, "Hover me (disableAnimations: true)")))); };
+TooltipWithoutAnimations.storyName = 'tooltip without animations';
+TooltipWithoutAnimations.parameters = { creevey: { skip: true } };
+export var HoverOnChildOnly = function () { return (React.createElement(TestTooltip, { trigger: "hoverAnchor" },
+    React.createElement(Button, null,
+        React.createElement("code", null, "trigger=\"hoverAnchor\"")))); };
+HoverOnChildOnly.storyName = 'hover on child only';
+HoverOnChildOnly.parameters = { creevey: { skip: true } };
+export var TooltipsWithoutWrapperAroundInlineBlockWithRelativeWidth = function () { return (React.createElement("div", { style: { padding: '150px', width: '700px' } }, PopupPinnablePositions.reduce(function (child, position) { return (React.createElement(Tooltip, { useWrapper: false, render: function () { return position; }, pos: position, trigger: "opened", closeButton: false }, child)); }, React.createElement(Textarea, { rows: 20, resize: "none", width: "70%" }, "I'm inline-block with relative width.")))); };
+TooltipsWithoutWrapperAroundInlineBlockWithRelativeWidth.storyName =
+    'Tooltips without wrapper around inline-block with relative width';
+TooltipsWithoutWrapperAroundInlineBlockWithRelativeWidth.parameters = { creevey: { delay: 2000 } };
+export var OpenedTooltipWithoutWrapper = function () { return (React.createElement(TestTooltip, { useWrapper: false, trigger: "opened", pos: "left top" },
+    React.createElement("span", null, "Without wrapper"))); };
+OpenedTooltipWithoutWrapper.storyName = 'Opened tooltip without wrapper';
+export var TooltipWithExternalDynamicContent = function () { return (React.createElement(DynamicContentStory, { TooltipComponentClass: ExternalDynamicContentTooltip })); };
+TooltipWithExternalDynamicContent.storyName = 'Tooltip with external dynamic content';
+export var TooltipWithInternalDynamicContent = function () { return (React.createElement(DynamicContentStory, { TooltipComponentClass: InternalDynamicContentTooltip })); };
+TooltipWithInternalDynamicContent.storyName = 'Tooltip with internal dynamic content';
+TooltipWithInternalDynamicContent.parameters = { creevey: { skip: true } };
+export var TooltipWithTriggerClick = function () { return React.createElement(TooltipWithClickTrigger, null); };
+TooltipWithTriggerClick.storyName = 'Tooltip with trigger=click';
+TooltipWithTriggerClick.parameters = { creevey: { skip: true } };
+export var TooltipWithDynamicAnchor = function () { return React.createElement(DynamicAnchorTooltip, null); };
+TooltipWithDynamicAnchor.storyName = 'Tooltip with dynamic anchor';
+TooltipWithDynamicAnchor.parameters = { creevey: { skip: true } };
+export var MultipleTooltipsWithUseWrapperFalse = function () { return React.createElement(MultipleTooltips, null); };
+MultipleTooltipsWithUseWrapperFalse.storyName = 'Multiple tooltips with useWrapper=false';
+MultipleTooltipsWithUseWrapperFalse.parameters = { creevey: { skip: true } };
+export var TooltipWithInputAndSwitchableContent = function () { return React.createElement(TooltipWithInput, null); };
+TooltipWithInputAndSwitchableContent.storyName = 'Tooltip with Input and switchable content';
+export var DynamicTriggersStory = function () { return React.createElement(DynamicTriggers, null); };
+DynamicTriggersStory.storyName = 'dynamic triggers';
+export var RenderInFirstAvailablePosition = function () { return (React.createElement("div", { style: { padding: '100px' } },
+    React.createElement(DynamicContentTooltip, null))); };
+RenderInFirstAvailablePosition.storyName = 'Render in first available position';
+var DynamicContentTooltip = /** @class */ (function (_super) {
+    __extends(DynamicContentTooltip, _super);
+    function DynamicContentTooltip() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            content: SMALL_CONTENT,
+            opened: false,
+        };
+        _this.buttonClickHandler = function () {
+            var getContent = function (state) {
+                if (state.opened) {
+                    return state.content;
+                }
+                else if (state.content === SMALL_CONTENT) {
+                    return LARGE_CONTENT;
+                }
+                return SMALL_CONTENT;
+            };
+            _this.setState(function (state) { return ({
+                content: getContent(state),
+                opened: !state.opened,
+            }); });
+        };
+        _this.tooltipContentGetter = function () {
+            return _this.state.content;
+        };
+        return _this;
+    }
+    DynamicContentTooltip.prototype.render = function () {
+        return (React.createElement(Tooltip, { allowedPositions: ['top left', 'left middle', 'right middle', 'bottom left'], render: this.tooltipContentGetter, trigger: this.state.opened ? 'opened' : 'closed', closeButton: false, useWrapper: false },
+            React.createElement(Button, { size: 'small', width: '100%', onClick: this.buttonClickHandler }, "Toggle content")));
+    };
+    return DynamicContentTooltip;
+}(React.Component));
+var TooltipWithInput = /** @class */ (function (_super) {
+    __extends(TooltipWithInput, _super);
+    function TooltipWithInput() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = { show: false };
+        _this.renderContent = function () {
+            if (_this.state.show) {
+                return React.createElement("span", null, 'Content');
+            }
+            return null;
+        };
+        return _this;
+    }
+    TooltipWithInput.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { style: { padding: '0 10px 70px' } },
+            React.createElement(Tooltip, { render: this.renderContent, pos: "bottom right", trigger: "click" },
+                React.createElement(Input, { onValueChange: function (v) { return _this.setState({ show: Boolean(v) }); } }))));
+    };
+    return TooltipWithInput;
+}(React.Component));
+var MyCustomTooltip = /** @class */ (function (_super) {
+    __extends(MyCustomTooltip, _super);
+    function MyCustomTooltip() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            state: 'hover',
+        };
+        return _this;
+    }
+    MyCustomTooltip.prototype.render = function () {
+        var _this = this;
+        var tooltipProps = this.state.state === 'hover'
+            ? { trigger: 'hover' }
+            : {
+                trigger: 'opened',
+                onCloseRequest: function () { return _this.setState({ state: 'hover' }); },
+            };
+        return (React.createElement(Tooltip, __assign({ render: function () { return 'hola'; } }, tooltipProps),
+            React.createElement(Button, { onClick: function () { return _this.setState({ state: 'opened' }); } }, "Hey")));
+    };
+    return MyCustomTooltip;
+}(React.Component));
+var ManualTooltip = /** @class */ (function (_super) {
+    __extends(ManualTooltip, _super);
+    function ManualTooltip() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            state: 'opened',
+        };
+        return _this;
+    }
+    ManualTooltip.prototype.render = function () {
+        var _this = this;
+        var tooltipProps = {
+            trigger: this.state.state,
+            closeButton: false,
+        };
+        return (React.createElement(Tooltip, __assign({ render: function () { return 'hola'; } }, tooltipProps),
+            React.createElement(Button, { onClick: function () {
+                    return _this.setState({
+                        state: _this.state.state === 'opened' ? 'closed' : 'opened',
+                    });
+                } }, "Hey")));
+    };
+    return ManualTooltip;
+}(React.Component));
+var SMALL_CONTENT = React.createElement("span", null, "Sample text");
+function getSmallContent() {
+    return SMALL_CONTENT;
+}
+var LARGE_CONTENT = (React.createElement("span", null,
+    "Sample text, sample text, sample text, sample text, sample text",
+    React.createElement("br", null),
+    "Sample text, sample text, sample text, sample text, sample text",
+    React.createElement("br", null),
+    "Sample text, sample text, sample text, sample text, sample text",
+    React.createElement("br", null),
+    "Sample text, sample text, sample text, sample text, sample text",
+    React.createElement("br", null),
+    "Sample text, sample text, sample text, sample text, sample text",
+    React.createElement("br", null),
+    "Sample text, sample text, sample text, sample text, sample text"));
+var ExternalDynamicContentTooltip = /** @class */ (function (_super) {
+    __extends(ExternalDynamicContentTooltip, _super);
+    function ExternalDynamicContentTooltip() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            content: SMALL_CONTENT,
+        };
+        _this.buttonClickHandler = function () {
+            _this.setState({
+                content: _this.state.content === SMALL_CONTENT ? LARGE_CONTENT : SMALL_CONTENT,
+            });
+        };
+        _this.tooltipContentGetter = function () {
+            return _this.state.content;
+        };
+        return _this;
+    }
+    ExternalDynamicContentTooltip.prototype.render = function () {
+        return (React.createElement(Tooltip, { pos: this.props.pos, allowedPositions: ['top left', 'left middle', 'right middle', 'bottom left'], render: this.tooltipContentGetter, trigger: 'opened', closeButton: false, useWrapper: false },
+            React.createElement(Button, { size: 'small', width: '100%', onClick: this.buttonClickHandler }, "Toggle content")));
+    };
+    return ExternalDynamicContentTooltip;
+}(React.Component));
+var TooltipWithDynamicContent = /** @class */ (function (_super) {
+    __extends(TooltipWithDynamicContent, _super);
+    function TooltipWithDynamicContent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            content: SMALL_CONTENT,
+        };
+        _this.buttonClickHandler = function () {
+            _this.setState({
+                content: _this.state.content === SMALL_CONTENT ? LARGE_CONTENT : SMALL_CONTENT,
+            });
+        };
+        return _this;
+    }
+    TooltipWithDynamicContent.prototype.render = function () {
+        return (React.createElement("div", { style: { display: 'flex', alignItems: 'baseline' } },
+            React.createElement("div", { style: { marginRight: 10 } },
+                React.createElement(Button, { size: 'small', onClick: this.buttonClickHandler }, "Toggle")),
+            React.createElement("div", null, this.state.content)));
+    };
+    return TooltipWithDynamicContent;
+}(React.Component));
+var InternalDynamicContentTooltip = /** @class */ (function (_super) {
+    __extends(InternalDynamicContentTooltip, _super);
+    function InternalDynamicContentTooltip() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.tooltipContentGetter = function () {
+            return React.createElement(TooltipWithDynamicContent, null);
+        };
+        return _this;
+    }
+    InternalDynamicContentTooltip.prototype.render = function () {
+        return (React.createElement(Tooltip, { allowedPositions: ['top left', 'left middle', 'right middle', 'bottom left'], pos: this.props.pos, render: this.tooltipContentGetter, trigger: 'opened', closeButton: false, useWrapper: false },
+            React.createElement("span", null, "Tooltip anchor")));
+    };
+    return InternalDynamicContentTooltip;
+}(React.Component));
+var DynamicAnchor = /** @class */ (function (_super) {
+    __extends(DynamicAnchor, _super);
+    function DynamicAnchor() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            isFirst: true,
+        };
+        _this.onClickHandler = function () {
+            _this.setState({ isFirst: !_this.state.isFirst });
+        };
+        return _this;
+    }
+    DynamicAnchor.prototype.render = function () {
+        return this.state.isFirst ? (React.createElement("span", { onClick: this.onClickHandler }, "First anchor")) : (React.createElement("div", { style: { display: 'inline-block' }, onClick: this.onClickHandler }, "Second anchor"));
+    };
+    return DynamicAnchor;
+}(React.Component));
+var DYNAMIC_TOOLTIP_POSITIONS = [
+    'top left',
+    'top left',
+    'left middle',
+    'bottom left',
+    'bottom left',
+];
+var DynamicContentStory = function (props) {
+    var TooltipComponentClass = props.TooltipComponentClass;
+    return (React.createElement("div", { style: { paddingTop: 70, paddingRight: 600, paddingBottom: 70, paddingLeft: 250, width: 130 } }, DYNAMIC_TOOLTIP_POSITIONS.map(function (position, index) {
+        return (React.createElement("div", { key: index, id: "Container-".concat(index), style: { paddingBottom: 70 } },
+            React.createElement(TooltipComponentClass, { pos: position })));
+    })));
+};
+function DynamicAnchorTooltip() {
+    return (React.createElement("div", { style: { padding: 100 } },
+        React.createElement(Tooltip, { pos: 'bottom left', render: getSmallContent, trigger: 'hover', useWrapper: false },
+            React.createElement(DynamicAnchor, null))));
+}
+var TooltipWithClickTrigger = /** @class */ (function (_super) {
+    __extends(TooltipWithClickTrigger, _super);
+    function TooltipWithClickTrigger() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.outerTooltipContentGetter = function () {
+            return (React.createElement(Gapped, { vertical: true, gap: 5 },
+                React.createElement(Checkbox, { checked: true }, "Item 1"),
+                React.createElement(Checkbox, { checked: false }, "Item 2"),
+                React.createElement(Tooltip, { pos: 'bottom left', render: _this.innerTooltipContentGetter, trigger: 'click' },
+                    React.createElement("span", null, "Click me for more..."))));
+        };
+        _this.innerTooltipContentGetter = function () {
+            return (React.createElement(Gapped, { vertical: true, gap: 5 },
+                "More:",
+                React.createElement(Checkbox, { checked: true }, "Item 3"),
+                React.createElement(Checkbox, { checked: false }, "Item 4")));
+        };
+        return _this;
+    }
+    TooltipWithClickTrigger.prototype.render = function () {
+        return (React.createElement("div", { style: { padding: 100 } },
+            React.createElement(Tooltip, { pos: 'bottom left', render: this.outerTooltipContentGetter, trigger: 'click' },
+                React.createElement("span", null, "Click me"))));
+    };
+    return TooltipWithClickTrigger;
+}(React.Component));
+function MultipleTooltips() {
+    return (React.createElement("div", { style: { padding: 150 } },
+        React.createElement(Tooltip, { pos: 'top center', trigger: 'click', useWrapper: false, render: getSmallContent },
+            React.createElement(Tooltip, { pos: 'right middle', trigger: 'click', useWrapper: false, render: getSmallContent },
+                React.createElement(Tooltip, { pos: 'bottom center', trigger: 'click', useWrapper: false, render: getSmallContent },
+                    React.createElement(Tooltip, { pos: 'left middle', trigger: 'click', useWrapper: false, render: getSmallContent },
+                        React.createElement("span", null, "Poor anchor")))))));
+}
+var DynamicTriggers = /** @class */ (function (_super) {
+    __extends(DynamicTriggers, _super);
+    function DynamicTriggers() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {};
+        _this.setTrigger = function (trigger) {
+            _this.setState({
+                trigger: trigger,
+            });
+        };
+        return _this;
+    }
+    DynamicTriggers.prototype.render = function () {
+        var _this = this;
+        var triggers = ['hover', 'click', 'focus', 'opened', 'closed', 'hoverAnchor', 'hover&focus'];
+        return (React.createElement("div", null,
+            React.createElement("div", { style: { marginBottom: 5 } }, triggers.map(function (trigger) { return (React.createElement("button", { id: trigger.replace('&', '_'), key: trigger, onClick: function () { return _this.setTrigger(trigger); }, disabled: _this.state.trigger === trigger }, trigger)); })),
+            React.createElement(TestTooltip, { trigger: this.state.trigger, disableAnimations: true },
+                React.createElement(Button, { type: 'button' }, "Anchor"))));
+    };
+    return DynamicTriggers;
+}(React.Component));
+var TestTooltipForManual = /** @class */ (function (_super) {
+    __extends(TestTooltipForManual, _super);
+    function TestTooltipForManual() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.tooltip = null;
+        _this.state = { onOpenCalledTimes: 0, onCloseCalledTimes: 0 };
+        return _this;
+    }
+    TestTooltipForManual.prototype.render = function () {
+        var _this = this;
+        return (React.createElement("div", { style: { padding: '100px' } },
+            React.createElement(Gapped, { vertical: true, gap: 10 },
+                React.createElement("div", null,
+                    "onOpen called ",
+                    this.state.onOpenCalledTimes,
+                    " times"),
+                React.createElement("div", null,
+                    "onClose called ",
+                    this.state.onCloseCalledTimes,
+                    " times"),
+                React.createElement("div", null)),
+            React.createElement(Gapped, null,
+                React.createElement(Button, { key: 'Show', onClick: this.handleClickOnShow.bind(this) }, "Show()"),
+                React.createElement(Button, { key: 'Hide', onClick: this.handleClickOnHide.bind(this) }, "Hide()")),
+            React.createElement(Tooltip, { render: function () { return 'Opened by Show()'; }, trigger: "manual", pos: "bottom left", ref: function (element) {
+                    _this.tooltip = element;
+                }, onOpen: function () {
+                    _this.setState({ onOpenCalledTimes: _this.state.onOpenCalledTimes + 1 });
+                }, onClose: function () {
+                    _this.setState({ onCloseCalledTimes: _this.state.onCloseCalledTimes + 1 });
+                } },
+                React.createElement(Button, { disabled: true }, "Anchor"))));
+    };
+    TestTooltipForManual.prototype.handleClickOnShow = function () {
+        if (this.tooltip) {
+            this.tooltip.show();
+        }
+    };
+    TestTooltipForManual.prototype.handleClickOnHide = function () {
+        if (this.tooltip) {
+            this.tooltip.hide();
+        }
+    };
+    return TestTooltipForManual;
+}(React.Component));
+export var TooltipWithManualControl = function () { return React.createElement(TestTooltipForManual, null); };
+TooltipWithManualControl.storyName = 'manual control';
+export var TooltipWithIconFromPackage = function () { return (React.createElement(TestTooltip, { trigger: "opened", pos: "bottom center" },
+    React.createElement(QuestionCircleIcon16Regular, null))); };
+TooltipWithIconFromPackage.storyName = 'tooltip with icon';
+var FunctionalChild = function () {
+    return React.createElement("div", null, "FunctionalChild");
+};
+export var TooltipWithFunctionalChild = function () { return (React.createElement(TestTooltip, { trigger: "opened", pos: "bottom center" },
+    React.createElement(FunctionalChild, null))); };
+TooltipWithFunctionalChild.storyName = 'tooltip with functional child';
+var anchorStyle = {
+    left: 60,
+    position: 'absolute',
+    height: 55,
+    width: 55,
+    border: '1px solid #dfdede',
+};
+var AnchorTooltipExample = /** @class */ (function (_super) {
+    __extends(AnchorTooltipExample, _super);
+    function AnchorTooltipExample() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            anchor: null,
+        };
+        return _this;
+    }
+    AnchorTooltipExample.prototype.render = function () {
+        var _this = this;
+        return (React.createElement(React.Fragment, null,
+            this.state.anchor ? (React.createElement(Tooltip, { anchorElement: this.state.anchor, render: function () { return 'Hello React'; }, trigger: "hover", pos: "top center" })) : null,
+            React.createElement("div", { style: { width: 180, height: 180, position: 'relative' } },
+                React.createElement("div", { "data-tid": "tooltip_anchor_0", style: __assign(__assign({}, anchorStyle), { top: 60 }), onMouseEnter: function (event) { return _this.setState({ anchor: event.target }); }, onMouseLeave: function () { return _this.setState({ anchor: null }); } }),
+                React.createElement("div", { "data-tid": "tooltip_anchor_1", style: __assign(__assign({}, anchorStyle), { top: 120 }), onMouseEnter: function (event) { return _this.setState({ anchor: event.target }); }, onMouseLeave: function () { return _this.setState({ anchor: null }); } }))));
+    };
+    return AnchorTooltipExample;
+}(React.Component));
+export var TooltipWithAnchor = function () { return React.createElement(AnchorTooltipExample, null); };
+TooltipWithAnchor.storyName = 'Tooltip with anchor';
+export var WithSizes = function () {
+    var labeledDiv = function (label) { return (React.createElement("div", { style: {
+            display: 'flex',
+            justifyContent: 'center',
+            alignItems: 'center',
+            width: '64px',
+            height: '64px',
+            background: 'lightblue',
+        } }, label)); };
+    return (React.createElement(Gapped, { gap: 128, style: { padding: '96px' } },
+        React.createElement(Tooltip, { trigger: "opened", render: function () { return 'Lorem Ipsum'; }, pos: "top center" }, labeledDiv('Default')),
+        React.createElement(Tooltip, { trigger: "opened", size: "small", render: function () { return 'Lorem Ipsum'; }, pos: "top center" }, labeledDiv('Small')),
+        React.createElement(Tooltip, { trigger: "opened", size: "medium", render: function () { return 'Lorem Ipsum'; }, pos: "top center" }, labeledDiv('Medium')),
+        React.createElement(Tooltip, { trigger: "opened", size: "large", render: function () { return 'Lorem Ipsum'; }, pos: "top center" }, labeledDiv('Large'))));
+};
+WithSizes.storyName = 'With sizes';
+//# sourceMappingURL=Tooltip.stories.js.map

package/components/Tooltip/__stories__/Tooltip.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../../components/Tooltip/__stories__/Tooltip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["// TODO: Rewrite stories and enable rule (in process of functional refactoring).\n/* eslint-disable react/no-unstable-nested-components */\nimport type { CSSProperties } from 'react';\nimport React from 'react';\nimport { QuestionCircleIcon16Regular } from '@skbkontur/icons/icons/QuestionCircleIcon/QuestionCircleIcon16Regular.js';\n\nimport type { Nullable } from '../../../typings/utility-types.js';\nimport type { Story } from '../../../typings/stories.js';\nimport type { TooltipProps, TooltipTrigger } from '../Tooltip.js';\nimport { Tooltip } from '../Tooltip.js';\nimport { Button } from '../../Button/index.js';\nimport type { PopupPositionsType } from '../../../internal/Popup/index.js';\nimport { PopupPinnablePositions } from '../../../internal/Popup/index.js';\nimport { createPropsGetter } from '../../../lib/createPropsGetter.js';\nimport { Textarea } from '../../Textarea/index.js';\nimport { Checkbox } from '../../Checkbox/index.js';\nimport { Gapped } from '../../Gapped/index.js';\nimport { Input } from '../../Input/index.js';\n\ninterface TestTooltipProps {\n  pos?: PopupPositionsType;\n  trigger?: TooltipTrigger;\n  useWrapper?: boolean;\n  disableAnimations?: boolean;\n}\n\nclass TestTooltip extends React.Component<React.PropsWithChildren<TestTooltipProps>> {\n  public static defaultProps: TestTooltipProps = {\n    pos: 'top center',\n  };\n\n  private getProps = createPropsGetter(TestTooltip.defaultProps);\n\n  public render(): JSX.Element {\n    const { trigger, children } = this.props;\n\n    return (\n      <div data-tid=\"TestTooltip\" style={{ padding: '150px' }}>\n        <Tooltip\n          pos={this.getProps().pos}\n          render={() => <div>Hey there!</div>}\n          trigger={trigger}\n          useWrapper={this.props.useWrapper}\n          disableAnimations={this.props.disableAnimations}\n        >\n          {children}\n        </Tooltip>\n      </div>\n    );\n  }\n}\n\nexport default {\n  title: 'Tooltip',\n  component: Tooltip,\n};\n\nexport const SimpleTooltip = () => (\n  <TestTooltip>\n    <Button>Hover me!</Button>\n  </TestTooltip>\n);\nSimpleTooltip.storyName = 'simple tooltip';\nSimpleTooltip.parameters = { creevey: { skip: true } };\n\nexport const StaticTooltip = () => (\n  <TestTooltip trigger=\"opened\">\n    <div>Look bottom</div>\n  </TestTooltip>\n);\nStaticTooltip.storyName = 'static tooltip';\n\nexport const ClickableTooltip = () => (\n  <TestTooltip trigger=\"click\">\n    <Button>Click me</Button>\n  </TestTooltip>\n);\nClickableTooltip.storyName = 'clickable tooltip';\nClickableTooltip.parameters = { creevey: { skip: true } };\n\nexport const FocusTooltip: Story = () => (\n  <TestTooltip trigger=\"focus\" disableAnimations>\n    <Button>Focus me</Button>\n  </TestTooltip>\n);\nFocusTooltip.storyName = 'focus tooltip';\n\nexport const FocusTooltipNativeInput: Story = () => (\n  <TestTooltip trigger=\"focus\" disableAnimations>\n    <input aria-label=\"Focus input example\" />\n  </TestTooltip>\n);\nFocusTooltipNativeInput.storyName = 'focus tooltip (native input)';\n\nexport const TooltipLeft = () => (\n  <TestTooltip trigger=\"opened\" pos=\"left top\">\n    <span>Some label</span>\n  </TestTooltip>\n);\nTooltipLeft.storyName = 'tooltip left';\n\nexport const TooltipRight = () => (\n  <TestTooltip useWrapper={false} trigger=\"opened\" pos=\"right top\">\n    <span>Some label</span>\n  </TestTooltip>\n);\nTooltipRight.storyName = 'tooltip right';\n\nexport const TooltipBottom = () => (\n  <TestTooltip trigger=\"opened\" pos=\"bottom center\">\n    <span>Some label</span>\n  </TestTooltip>\n);\nTooltipBottom.storyName = 'tooltip bottom';\n\nexport const TooltipWithFunctionalComponentChild = () => {\n  function PureComp() {\n    return <div>Pure Component!</div>;\n  }\n\n  return (\n    <TestTooltip trigger=\"opened\" pos=\"bottom center\">\n      <PureComp />\n    </TestTooltip>\n  );\n};\nTooltipWithFunctionalComponentChild.storyName = 'tooltip with functional component child';\nTooltipWithFunctionalComponentChild.parameters = { creevey: { skip: true } };\n\nexport const TooltipWithFunctionalComponentChildHover = () => {\n  function PureComp() {\n    return <div>Pure Component!</div>;\n  }\n\n  return (\n    <TestTooltip trigger=\"hover\" pos=\"bottom center\">\n      <PureComp />\n    </TestTooltip>\n  );\n};\nTooltipWithFunctionalComponentChildHover.storyName = 'tooltip with functional component child hover';\nTooltipWithFunctionalComponentChildHover.parameters = { creevey: { skip: true } };\n\nexport const TooltipWithFunctionalComponentClick = () => {\n  function PureComp() {\n    return <div>Pure Component!</div>;\n  }\n\n  return (\n    <TestTooltip trigger=\"click\" pos=\"bottom center\">\n      <PureComp />\n    </TestTooltip>\n  );\n};\nTooltipWithFunctionalComponentClick.storyName = 'tooltip with functional component click';\nTooltipWithFunctionalComponentClick.parameters = { creevey: { skip: true } };\n\nexport const MyCustomTooltipStory = () => <MyCustomTooltip />;\nMyCustomTooltipStory.storyName = 'MyCustomTooltip';\nMyCustomTooltipStory.parameters = { creevey: { skip: true } };\n\nexport const ManualTooltipStory = () => <ManualTooltip />;\nManualTooltipStory.storyName = 'ManualTooltip';\nManualTooltipStory.parameters = { creevey: { skip: true } };\n\nexport const TooltipWithoutAnimations = () => (\n  <div>\n    <Tooltip render={() => 'No disableAnimations prop'} trigger={'hover'}>\n      <Button>Hover me (No disableAnimations prop)</Button>\n    </Tooltip>\n    <Tooltip render={() => 'disableAnimations={false}'} trigger={'hover'} disableAnimations={false}>\n      <Button>Hover me (disableAnimations: false)</Button>\n    </Tooltip>\n    <Tooltip render={() => 'disableAnimations={true}'} trigger={'hover'} disableAnimations>\n      <Button>Hover me (disableAnimations: true)</Button>\n    </Tooltip>\n  </div>\n);\nTooltipWithoutAnimations.storyName = 'tooltip without animations';\nTooltipWithoutAnimations.parameters = { creevey: { skip: true } };\n\nexport const HoverOnChildOnly = () => (\n  <TestTooltip trigger=\"hoverAnchor\">\n    <Button>\n      <code>trigger=&quot;hoverAnchor&quot;</code>\n    </Button>\n  </TestTooltip>\n);\nHoverOnChildOnly.storyName = 'hover on child only';\nHoverOnChildOnly.parameters = { creevey: { skip: true } };\n\nexport const TooltipsWithoutWrapperAroundInlineBlockWithRelativeWidth: Story = () => (\n  <div style={{ padding: '150px', width: '700px' }}>\n    {PopupPinnablePositions.reduce(\n      (child, position) => (\n        <Tooltip useWrapper={false} render={() => position} pos={position} trigger=\"opened\" closeButton={false}>\n          {child}\n        </Tooltip>\n      ),\n      <Textarea rows={20} resize=\"none\" width=\"70%\">\n        {\"I'm inline-block with relative width.\"}\n      </Textarea>,\n    )}\n  </div>\n);\nTooltipsWithoutWrapperAroundInlineBlockWithRelativeWidth.storyName =\n  'Tooltips without wrapper around inline-block with relative width';\nTooltipsWithoutWrapperAroundInlineBlockWithRelativeWidth.parameters = { creevey: { delay: 2000 } };\n\nexport const OpenedTooltipWithoutWrapper = () => (\n  <TestTooltip useWrapper={false} trigger=\"opened\" pos=\"left top\">\n    <span>Without wrapper</span>\n  </TestTooltip>\n);\nOpenedTooltipWithoutWrapper.storyName = 'Opened tooltip without wrapper';\n\nexport const TooltipWithExternalDynamicContent: Story = () => (\n  <DynamicContentStory TooltipComponentClass={ExternalDynamicContentTooltip} />\n);\nTooltipWithExternalDynamicContent.storyName = 'Tooltip with external dynamic content';\n\nexport const TooltipWithInternalDynamicContent = () => (\n  <DynamicContentStory TooltipComponentClass={InternalDynamicContentTooltip} />\n);\nTooltipWithInternalDynamicContent.storyName = 'Tooltip with internal dynamic content';\nTooltipWithInternalDynamicContent.parameters = { creevey: { skip: true } };\n\nexport const TooltipWithTriggerClick = () => <TooltipWithClickTrigger />;\nTooltipWithTriggerClick.storyName = 'Tooltip with trigger=click';\nTooltipWithTriggerClick.parameters = { creevey: { skip: true } };\n\nexport const TooltipWithDynamicAnchor = () => <DynamicAnchorTooltip />;\nTooltipWithDynamicAnchor.storyName = 'Tooltip with dynamic anchor';\nTooltipWithDynamicAnchor.parameters = { creevey: { skip: true } };\n\nexport const MultipleTooltipsWithUseWrapperFalse = () => <MultipleTooltips />;\nMultipleTooltipsWithUseWrapperFalse.storyName = 'Multiple tooltips with useWrapper=false';\nMultipleTooltipsWithUseWrapperFalse.parameters = { creevey: { skip: true } };\n\nexport const TooltipWithInputAndSwitchableContent: Story = () => <TooltipWithInput />;\nTooltipWithInputAndSwitchableContent.storyName = 'Tooltip with Input and switchable content';\n\nexport const DynamicTriggersStory: Story = () => <DynamicTriggers />;\nDynamicTriggersStory.storyName = 'dynamic triggers';\n\nexport const RenderInFirstAvailablePosition: Story = () => (\n  <div style={{ padding: '100px' }}>\n    <DynamicContentTooltip />\n  </div>\n);\nRenderInFirstAvailablePosition.storyName = 'Render in first available position';\n\ninterface DynamicContentTooltipState {\n  content: React.ReactNode;\n  opened: boolean;\n}\n\nclass DynamicContentTooltip extends React.Component {\n  public state: DynamicContentTooltipState = {\n    content: SMALL_CONTENT,\n    opened: false,\n  };\n\n  public render() {\n    return (\n      <Tooltip\n        allowedPositions={['top left', 'left middle', 'right middle', 'bottom left']}\n        render={this.tooltipContentGetter}\n        trigger={this.state.opened ? 'opened' : 'closed'}\n        closeButton={false}\n        useWrapper={false}\n      >\n        <Button size={'small'} width={'100%'} onClick={this.buttonClickHandler}>\n          Toggle content\n        </Button>\n      </Tooltip>\n    );\n  }\n\n  private buttonClickHandler = () => {\n    const getContent = (state: DynamicContentTooltipState) => {\n      if (state.opened) {\n        return state.content;\n      } else if (state.content === SMALL_CONTENT) {\n        return LARGE_CONTENT;\n      }\n\n      return SMALL_CONTENT;\n    };\n\n    this.setState((state: DynamicContentTooltipState) => ({\n      content: getContent(state),\n      opened: !state.opened,\n    }));\n  };\n\n  private tooltipContentGetter = () => {\n    return this.state.content;\n  };\n}\n\nclass TooltipWithInput extends React.Component {\n  public state = { show: false };\n  public render() {\n    return (\n      <div style={{ padding: '0 10px 70px' }}>\n        <Tooltip render={this.renderContent} pos=\"bottom right\" trigger=\"click\">\n          <Input onValueChange={(v) => this.setState({ show: Boolean(v) })} />\n        </Tooltip>\n      </div>\n    );\n  }\n\n  public renderContent = () => {\n    if (this.state.show) {\n      return <span>{'Content'}</span>;\n    }\n    return null;\n  };\n}\n\ninterface MyCustomTooltipState {\n  state: TooltipTrigger;\n}\n\nclass MyCustomTooltip extends React.Component<TestTooltipProps, MyCustomTooltipState> {\n  public state: MyCustomTooltipState = {\n    state: 'hover',\n  };\n\n  public render() {\n    const tooltipProps: Partial<TooltipProps> =\n      this.state.state === 'hover'\n        ? { trigger: 'hover' }\n        : {\n            trigger: 'opened',\n            onCloseRequest: () => this.setState({ state: 'hover' }),\n          };\n\n    return (\n      <Tooltip render={() => 'hola'} {...tooltipProps}>\n        <Button onClick={() => this.setState({ state: 'opened' })}>Hey</Button>\n      </Tooltip>\n    );\n  }\n}\n\nclass ManualTooltip extends React.Component<TestTooltipProps, MyCustomTooltipState> {\n  public state: MyCustomTooltipState = {\n    state: 'opened',\n  };\n\n  public render() {\n    const tooltipProps: Partial<TooltipProps> = {\n      trigger: this.state.state,\n      closeButton: false,\n    };\n\n    return (\n      <Tooltip render={() => 'hola'} {...tooltipProps}>\n        <Button\n          onClick={() =>\n            this.setState({\n              state: this.state.state === 'opened' ? 'closed' : 'opened',\n            })\n          }\n        >\n          Hey\n        </Button>\n      </Tooltip>\n    );\n  }\n}\n\nconst SMALL_CONTENT = <span>Sample text</span>;\nfunction getSmallContent() {\n  return SMALL_CONTENT;\n}\nconst LARGE_CONTENT = (\n  <span>\n    Sample text, sample text, sample text, sample text, sample text\n    <br />\n    Sample text, sample text, sample text, sample text, sample text\n    <br />\n    Sample text, sample text, sample text, sample text, sample text\n    <br />\n    Sample text, sample text, sample text, sample text, sample text\n    <br />\n    Sample text, sample text, sample text, sample text, sample text\n    <br />\n    Sample text, sample text, sample text, sample text, sample text\n  </span>\n);\n\ninterface HasPopupPositionProps {\n  pos: PopupPositionsType;\n}\ninterface HasDynamicContentState {\n  content: React.ReactNode;\n}\nclass ExternalDynamicContentTooltip extends React.Component<HasPopupPositionProps> {\n  public state: HasDynamicContentState = {\n    content: SMALL_CONTENT,\n  };\n\n  public render() {\n    return (\n      <Tooltip\n        pos={this.props.pos}\n        allowedPositions={['top left', 'left middle', 'right middle', 'bottom left']}\n        render={this.tooltipContentGetter}\n        trigger={'opened'}\n        closeButton={false}\n        useWrapper={false}\n      >\n        <Button size={'small'} width={'100%'} onClick={this.buttonClickHandler}>\n          Toggle content\n        </Button>\n      </Tooltip>\n    );\n  }\n\n  private buttonClickHandler = () => {\n    this.setState({\n      content: this.state.content === SMALL_CONTENT ? LARGE_CONTENT : SMALL_CONTENT,\n    });\n  };\n\n  private tooltipContentGetter = () => {\n    return this.state.content;\n  };\n}\n\nclass TooltipWithDynamicContent extends React.Component {\n  public state: HasDynamicContentState = {\n    content: SMALL_CONTENT,\n  };\n\n  public render() {\n    return (\n      <div style={{ display: 'flex', alignItems: 'baseline' }}>\n        <div style={{ marginRight: 10 }}>\n          <Button size={'small'} onClick={this.buttonClickHandler}>\n            Toggle\n          </Button>\n        </div>\n        <div>{this.state.content}</div>\n      </div>\n    );\n  }\n  private buttonClickHandler = () => {\n    this.setState({\n      content: this.state.content === SMALL_CONTENT ? LARGE_CONTENT : SMALL_CONTENT,\n    });\n  };\n}\n\nclass InternalDynamicContentTooltip extends React.Component<HasPopupPositionProps> {\n  public render() {\n    return (\n      <Tooltip\n        allowedPositions={['top left', 'left middle', 'right middle', 'bottom left']}\n        pos={this.props.pos}\n        render={this.tooltipContentGetter}\n        trigger={'opened'}\n        closeButton={false}\n        useWrapper={false}\n      >\n        <span>Tooltip anchor</span>\n      </Tooltip>\n    );\n  }\n\n  private tooltipContentGetter = () => {\n    return <TooltipWithDynamicContent />;\n  };\n}\n\nclass DynamicAnchor extends React.Component {\n  public state = {\n    isFirst: true,\n  };\n  public render() {\n    return this.state.isFirst ? (\n      <span onClick={this.onClickHandler}>First anchor</span>\n    ) : (\n      <div style={{ display: 'inline-block' }} onClick={this.onClickHandler}>\n        Second anchor\n      </div>\n    );\n  }\n  private onClickHandler = () => {\n    this.setState({ isFirst: !this.state.isFirst });\n  };\n}\n\nconst DYNAMIC_TOOLTIP_POSITIONS: PopupPositionsType[] = [\n  'top left',\n  'top left',\n  'left middle',\n  'bottom left',\n  'bottom left',\n];\n\ninterface DynamicContentStoryProps {\n  TooltipComponentClass: typeof ExternalDynamicContentTooltip | typeof InternalDynamicContentTooltip;\n}\nconst DynamicContentStory = (props: DynamicContentStoryProps) => {\n  const { TooltipComponentClass } = props;\n  return (\n    <div style={{ paddingTop: 70, paddingRight: 600, paddingBottom: 70, paddingLeft: 250, width: 130 }}>\n      {DYNAMIC_TOOLTIP_POSITIONS.map((position, index) => {\n        return (\n          <div key={index} id={`Container-${index}`} style={{ paddingBottom: 70 }}>\n            <TooltipComponentClass pos={position} />\n          </div>\n        );\n      })}\n    </div>\n  );\n};\n\nfunction DynamicAnchorTooltip() {\n  return (\n    <div style={{ padding: 100 }}>\n      <Tooltip pos={'bottom left'} render={getSmallContent} trigger={'hover'} useWrapper={false}>\n        <DynamicAnchor />\n      </Tooltip>\n    </div>\n  );\n}\n\nclass TooltipWithClickTrigger extends React.Component {\n  public render() {\n    return (\n      <div style={{ padding: 100 }}>\n        <Tooltip pos={'bottom left'} render={this.outerTooltipContentGetter} trigger={'click'}>\n          <span>Click me</span>\n        </Tooltip>\n      </div>\n    );\n  }\n  private outerTooltipContentGetter = () => {\n    return (\n      <Gapped vertical gap={5}>\n        <Checkbox checked>Item 1</Checkbox>\n        <Checkbox checked={false}>Item 2</Checkbox>\n        <Tooltip pos={'bottom left'} render={this.innerTooltipContentGetter} trigger={'click'}>\n          <span>Click me for more...</span>\n        </Tooltip>\n      </Gapped>\n    );\n  };\n  private innerTooltipContentGetter = () => {\n    return (\n      <Gapped vertical gap={5}>\n        More:\n        <Checkbox checked>Item 3</Checkbox>\n        <Checkbox checked={false}>Item 4</Checkbox>\n      </Gapped>\n    );\n  };\n}\n\nfunction MultipleTooltips() {\n  return (\n    <div style={{ padding: 150 }}>\n      <Tooltip pos={'top center'} trigger={'click'} useWrapper={false} render={getSmallContent}>\n        <Tooltip pos={'right middle'} trigger={'click'} useWrapper={false} render={getSmallContent}>\n          <Tooltip pos={'bottom center'} trigger={'click'} useWrapper={false} render={getSmallContent}>\n            <Tooltip pos={'left middle'} trigger={'click'} useWrapper={false} render={getSmallContent}>\n              <span>Poor anchor</span>\n            </Tooltip>\n          </Tooltip>\n        </Tooltip>\n      </Tooltip>\n    </div>\n  );\n}\n\ninterface DynamicTriggersState {\n  trigger?: TooltipTrigger;\n}\n\nclass DynamicTriggers extends React.Component {\n  public state: DynamicTriggersState = {};\n\n  public render() {\n    const triggers: TooltipTrigger[] = ['hover', 'click', 'focus', 'opened', 'closed', 'hoverAnchor', 'hover&focus'];\n    return (\n      <div>\n        <div style={{ marginBottom: 5 }}>\n          {triggers.map((trigger) => (\n            <button\n              id={trigger.replace('&', '_')}\n              key={trigger}\n              onClick={() => this.setTrigger(trigger)}\n              disabled={this.state.trigger === trigger}\n            >\n              {trigger}\n            </button>\n          ))}\n        </div>\n        <TestTooltip trigger={this.state.trigger} disableAnimations>\n          <Button type={'button'}>Anchor</Button>\n        </TestTooltip>\n      </div>\n    );\n  }\n\n  private setTrigger = (trigger: TooltipTrigger) => {\n    this.setState({\n      trigger,\n    });\n  };\n}\n\nclass TestTooltipForManual extends React.Component {\n  private tooltip: Tooltip | null = null;\n  public state = { onOpenCalledTimes: 0, onCloseCalledTimes: 0 };\n\n  render() {\n    return (\n      <div style={{ padding: '100px' }}>\n        <Gapped vertical gap={10}>\n          <div>onOpen called {this.state.onOpenCalledTimes} times</div>\n          <div>onClose called {this.state.onCloseCalledTimes} times</div>\n          <div />\n        </Gapped>\n        <Gapped>\n          <Button key={'Show'} onClick={this.handleClickOnShow.bind(this)}>\n            Show()\n          </Button>\n          <Button key={'Hide'} onClick={this.handleClickOnHide.bind(this)}>\n            Hide()\n          </Button>\n        </Gapped>\n        <Tooltip\n          render={() => 'Opened by Show()'}\n          trigger=\"manual\"\n          pos=\"bottom left\"\n          ref={(element) => {\n            this.tooltip = element;\n          }}\n          onOpen={() => {\n            this.setState({ onOpenCalledTimes: this.state.onOpenCalledTimes + 1 });\n          }}\n          onClose={() => {\n            this.setState({ onCloseCalledTimes: this.state.onCloseCalledTimes + 1 });\n          }}\n        >\n          <Button disabled>Anchor</Button>\n        </Tooltip>\n      </div>\n    );\n  }\n\n  handleClickOnShow() {\n    if (this.tooltip) {\n      this.tooltip.show();\n    }\n  }\n  handleClickOnHide() {\n    if (this.tooltip) {\n      this.tooltip.hide();\n    }\n  }\n}\n\nexport const TooltipWithManualControl: Story = () => <TestTooltipForManual />;\nTooltipWithManualControl.storyName = 'manual control';\n\nexport const TooltipWithIconFromPackage = () => (\n  <TestTooltip trigger=\"opened\" pos=\"bottom center\">\n    <QuestionCircleIcon16Regular />\n  </TestTooltip>\n);\nTooltipWithIconFromPackage.storyName = 'tooltip with icon';\n\nconst FunctionalChild = () => {\n  return <div>FunctionalChild</div>;\n};\nexport const TooltipWithFunctionalChild = () => (\n  <TestTooltip trigger=\"opened\" pos=\"bottom center\">\n    <FunctionalChild />\n  </TestTooltip>\n);\nTooltipWithFunctionalChild.storyName = 'tooltip with functional child';\n\nconst anchorStyle: CSSProperties = {\n  left: 60,\n  position: 'absolute',\n  height: 55,\n  width: 55,\n  border: '1px solid #dfdede',\n};\n\ninterface AnchorTooltipExampleState {\n  anchor: Nullable<HTMLElement>;\n}\nclass AnchorTooltipExample extends React.Component {\n  public state: AnchorTooltipExampleState = {\n    anchor: null,\n  };\n\n  render() {\n    return (\n      <>\n        {this.state.anchor ? (\n          <Tooltip anchorElement={this.state.anchor} render={() => 'Hello React'} trigger=\"hover\" pos=\"top center\" />\n        ) : null}\n        <div style={{ width: 180, height: 180, position: 'relative' }}>\n          <div\n            data-tid={`tooltip_anchor_0`}\n            style={{\n              ...anchorStyle,\n              top: 60,\n            }}\n            onMouseEnter={(event) => this.setState({ anchor: event.target as HTMLElement })}\n            onMouseLeave={() => this.setState({ anchor: null })}\n          />\n          <div\n            data-tid={`tooltip_anchor_1`}\n            style={{\n              ...anchorStyle,\n              top: 120,\n            }}\n            onMouseEnter={(event) => this.setState({ anchor: event.target as HTMLElement })}\n            onMouseLeave={() => this.setState({ anchor: null })}\n          />\n        </div>\n      </>\n    );\n  }\n}\n\nexport const TooltipWithAnchor: Story = () => <AnchorTooltipExample />;\nTooltipWithAnchor.storyName = 'Tooltip with anchor';\n\nexport const WithSizes: Story = () => {\n  const labeledDiv = (label: string) => (\n    <div\n      style={{\n        display: 'flex',\n        justifyContent: 'center',\n        alignItems: 'center',\n        width: '64px',\n        height: '64px',\n        background: 'lightblue',\n      }}\n    >\n      {label}\n    </div>\n  );\n  return (\n    <Gapped gap={128} style={{ padding: '96px' }}>\n      <Tooltip trigger=\"opened\" render={() => 'Lorem Ipsum'} pos=\"top center\">\n        {labeledDiv('Default')}\n      </Tooltip>\n      <Tooltip trigger=\"opened\" size=\"small\" render={() => 'Lorem Ipsum'} pos=\"top center\">\n        {labeledDiv('Small')}\n      </Tooltip>\n      <Tooltip trigger=\"opened\" size=\"medium\" render={() => 'Lorem Ipsum'} pos=\"top center\">\n        {labeledDiv('Medium')}\n      </Tooltip>\n      <Tooltip trigger=\"opened\" size=\"large\" render={() => 'Lorem Ipsum'} pos=\"top center\">\n        {labeledDiv('Large')}\n      </Tooltip>\n    </Gapped>\n  );\n};\nWithSizes.storyName = 'With sizes';\n"]}

package/components/Tooltip/__tests__/Tooltip-test.d.ts

@@ -0,0 +1 @@
+export {};