etudes 1.2.0 → 2.0.0

package/lib/WithTooltip.js

@@ -1,8 +1,4 @@
 "use strict";
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 var __assign = (this && this.__assign) || function () {
     __assign = Object.assign || function(t) {
         for (var s, i = 1, n = arguments.length; i < n; i++) {
@@ -37,53 +33,43 @@ var __importStar = (this && this.__importStar) || function (mod) {
     __setModuleDefault(result, mod);
     return result;
 };
-var __rest = (this && this.__rest) || function (s, e) {
-    var t = {};
-    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
-        t[p] = s[p];
-    if (s != null && typeof Object.getOwnPropertySymbols === "function")
-        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
-            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
-                t[p[i]] = s[p[i]];
-        }
-    return t;
-};
-var __read = (this && this.__read) || function (o, n) {
-    var m = typeof Symbol === "function" && o[Symbol.iterator];
-    if (!m) return o;
-    var i = m.call(o), r, ar = [], e;
-    try {
-        while ((n === void 0 || n-- > 0) && !(r = i.next()).done) ar.push(r.value);
-    }
-    catch (error) { e = { error: error }; }
-    finally {
-        try {
-            if (r && !r.done && (m = i["return"])) m.call(i);
-        }
-        finally { if (e) throw e.error; }
-    }
-    return ar;
-};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
+var classnames_1 = __importDefault(require("classnames"));
 var react_1 = __importStar(require("react"));
 var spase_1 = require("spase");
-var styled_components_1 = __importStar(require("styled-components"));
 var ExtractChild_1 = __importDefault(require("./ExtractChild"));
 var useElementRect_1 = __importDefault(require("./hooks/useElementRect"));
 var useViewportSize_1 = __importDefault(require("./hooks/useViewportSize"));
+var asStyleDict_1 = __importDefault(require("./utils/asStyleDict"));
+var styles_1 = __importDefault(require("./utils/styles"));
 function WithTooltip(_a) {
-    var _b = _a.arrowHeight, arrowHeight = _b === void 0 ? 8 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#000' : _c, cssDialog = _a.cssDialog, _d = _a.disabledOnTouch, disabledOnTouch = _d === void 0 ? true : _d, hint = _a.hint, _e = _a.gap, gap = _e === void 0 ? 5 : _e, _f = _a.textColor, textColor = _f === void 0 ? '#fff' : _f, _g = _a.threshold, threshold = _g === void 0 ? 100 : _g, props = __rest(_a, ["arrowHeight", "backgroundColor", "cssDialog", "disabledOnTouch", "hint", "gap", "textColor", "threshold"]);
-    var computeAlignment = function (target, threshold) {
+    var children = _a.children, className = _a.className, style = _a.style, _b = _a.arrowHeight, arrowHeight = _b === void 0 ? 8 : _b, _c = _a.backgroundColor, backgroundColor = _c === void 0 ? '#000' : _c, _d = _a.gap, gap = _d === void 0 ? 5 : _d, hint = _a.hint, _e = _a.maxTextWidth, maxTextWidth = _e === void 0 ? 200 : _e, _f = _a.threshold, threshold = _f === void 0 ? 100 : _f;
+    var createDialog = function () {
+        var dialog = document.createElement('div');
+        dialog.className = (0, classnames_1.default)(className);
+        Object.keys((0, styles_1.default)(style, fixedStyles.dialog)).forEach(function (rule) { return dialog.style[rule] = fixedStyles.dialog[rule]; });
+        var arrow = document.createElement('div');
+        Object.keys(fixedStyles.arrow).forEach(function (rule) { return arrow.style[rule] = fixedStyles.arrow[rule]; });
+        var content = document.createElement('div');
+        content.innerText = hint;
+        Object.keys(fixedStyles.content).forEach(function (rule) { return content.style[rule] = fixedStyles.content[rule]; });
+        dialog.appendChild(arrow);
+        dialog.appendChild(content);
+        return dialog;
+    };
+    var computeAlignment = function () {
+        if (!rootRef.current)
+            return 'bc';
         var vrect = spase_1.Rect.fromViewport();
-        var rect = spase_1.Rect.intersecting(target);
-        if (rect) {
-            var leftBound = (rect.left - vrect.left) < threshold;
-            var rightBound = (vrect.right - rect.right) < threshold;
-            var topBound = (rect.top - vrect.top) < threshold;
-            var bottomBound = (vrect.bottom - rect.bottom) < threshold;
+        var irect = spase_1.Rect.intersecting(rootRef.current);
+        if (irect) {
+            var leftBound = irect.left - vrect.left < threshold;
+            var rightBound = vrect.right - irect.right < threshold;
+            var topBound = irect.top - vrect.top < threshold;
+            var bottomBound = vrect.bottom - irect.bottom < threshold;
             if (leftBound && topBound)
                 return 'br';
             if (leftBound && bottomBound)
@@ -101,10 +87,12 @@ function WithTooltip(_a) {
         }
         return 'bc';
     };
-    var computeTextSize = function (target, threshold) {
-        var computedStyle = window.getComputedStyle(target, '::after');
+    var computeTextSize = function () {
+        if (!dialogRef.current)
+            return new spase_1.Size();
+        var computedStyle = window.getComputedStyle(dialogRef.current);
         var div = document.createElement('div');
-        div.innerHTML = hint;
+        div.innerText = hint;
         div.style.fontFamily = computedStyle.getPropertyValue('font-family');
         div.style.fontSize = computedStyle.getPropertyValue('font-size');
         div.style.fontStyle = computedStyle.getPropertyValue('font-style');
@@ -122,74 +110,152 @@ function WithTooltip(_a) {
         document.body.removeChild(div);
         return new spase_1.Size([width, height]);
     };
-    var onMouseOver = function (event) {
-        setAlignment(computeAlignment(event.currentTarget, threshold));
-        setTextSize(computeTextSize(event.currentTarget, threshold));
+    var mouseEnterHandler = function (event) {
+        if (!dialogRef.current)
+            return;
+        dialogRef.current.style.opacity = '1';
+    };
+    var mouseLeaveHandler = function (event) {
+        if (!dialogRef.current)
+            return;
+        dialogRef.current.style.opacity = '0';
     };
-    var _h = __read((0, react_1.useState)(new spase_1.Size()), 2), textSize = _h[0], setTextSize = _h[1];
-    var _j = __read((0, react_1.useState)(undefined), 2), alignment = _j[0], setAlignment = _j[1];
-    var childRef = (0, react_1.useRef)(null);
-    var childRect = (0, useElementRect_1.default)(childRef);
+    var rootRef = (0, react_1.useRef)(null);
+    var dialogRef = (0, react_1.useRef)();
+    var rect = (0, useElementRect_1.default)(rootRef);
     var viewportSize = (0, useViewportSize_1.default)();
+    var alignment = computeAlignment();
+    var textSize = computeTextSize();
     (0, react_1.useEffect)(function () {
-        var childNode = childRef.current;
-        if (!childNode)
-            return;
-        setAlignment(computeAlignment(childNode, threshold));
-        setTextSize(computeTextSize(childNode, threshold));
-    }, [childRect, viewportSize]);
-    return (react_1.default.createElement(StyledRoot, __assign({ arrowHeight: arrowHeight, backgroundColor: backgroundColor, ref: childRef, cssDialog: cssDialog, disabledOnTouch: disabledOnTouch, hint: hint, gap: gap, onMouseOver: function (event) { return onMouseOver(event); }, alignment: alignment, textColor: textColor, textSize: textSize }, props)));
+        var _a;
+        var dialogNode = createDialog();
+        (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.appendChild(dialogNode);
+        dialogRef.current = dialogNode;
+        return function () {
+            var _a;
+            (_a = rootRef.current) === null || _a === void 0 ? void 0 : _a.removeChild(dialogNode);
+        };
+    }, [rect, viewportSize]);
+    var fixedStyles = (0, asStyleDict_1.default)({
+        dialog: {
+            background: 'none',
+            boxSizing: 'border-box',
+            height: "".concat(rect.size.height, "px"),
+            left: '0',
+            margin: '0',
+            opacity: '0',
+            position: 'absolute',
+            top: '0',
+            width: "".concat(rect.size.width, "px"),
+            zIndex: '10000',
+        },
+        arrow: __assign(__assign({ borderStyle: 'solid', borderWidth: "".concat(arrowHeight, "px"), height: '0', pointerEvents: 'none', position: 'absolute', width: '0' }, makeDisplacementStyle(alignment, arrowHeight, gap)), makeArrowPositionStyle(alignment, arrowHeight, gap, backgroundColor)),
+        content: __assign(__assign({ background: backgroundColor, boxSizing: 'content-box', color: 'inherit', fontFamily: 'inherit', fontSize: 'inherit', fontWeight: 'inherit', letterSpacing: 'inherit', lineHeight: 'inherit', maxWidth: "".concat(maxTextWidth, "px"), overflow: 'hidden', padding: 'inherit', pointerEvents: 'none', position: 'absolute', textAlign: 'inherit', transition: 'inherit', width: textSize.width > 0 ? "".concat(textSize.width, "px") : 'auto' }, makeDisplacementStyle(alignment, arrowHeight, gap)), makeContentPositionStyle(alignment, arrowHeight, gap)),
+    });
+    return (react_1.default.createElement(ExtractChild_1.default, { children: children, ref: rootRef, onMouseEnter: mouseEnterHandler, onMouseLeave: mouseLeaveHandler }));
 }
 exports.default = WithTooltip;
-function makeDisplacementCSS(alignment, arrowHeight, gap) {
+function makeDisplacementStyle(alignment, arrowHeight, gap) {
     switch (alignment) {
-        case 'tl': return (0, styled_components_1.css)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["top: ", "px; left: calc(50% + ", "px);"], ["top: ", "px; left: calc(50% + ", "px);"])), -arrowHeight, arrowHeight * 2.5);
-        case 'tc': return (0, styled_components_1.css)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["top: ", "px; left: 50%;"], ["top: ", "px; left: 50%;"])), -arrowHeight);
-        case 'tr': return (0, styled_components_1.css)(templateObject_3 || (templateObject_3 = __makeTemplateObject(["top: ", "px; right: calc(50% + ", "px);"], ["top: ", "px; right: calc(50% + ", "px);"])), -arrowHeight, arrowHeight * 2.5);
-        case 'cl': return (0, styled_components_1.css)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["top: 50%; left: ", "px;"], ["top: 50%; left: ", "px;"])), -arrowHeight);
-        case 'cr': return (0, styled_components_1.css)(templateObject_5 || (templateObject_5 = __makeTemplateObject(["top: 50%; right: ", "px;"], ["top: 50%; right: ", "px;"])), -arrowHeight);
-        case 'bl': return (0, styled_components_1.css)(templateObject_6 || (templateObject_6 = __makeTemplateObject(["bottom: ", "px; left: calc(50% + ", "px);"], ["bottom: ", "px; left: calc(50% + ", "px);"])), -arrowHeight, arrowHeight * 2.5);
-        case 'bc': return (0, styled_components_1.css)(templateObject_7 || (templateObject_7 = __makeTemplateObject(["bottom: ", "px; left: 50%;"], ["bottom: ", "px; left: 50%;"])), -arrowHeight);
-        case 'br': return (0, styled_components_1.css)(templateObject_8 || (templateObject_8 = __makeTemplateObject(["bottom: ", "px; right: calc(50% + ", "px);"], ["bottom: ", "px; right: calc(50% + ", "px);"])), -arrowHeight, arrowHeight * 2.5);
+        case 'tl': return {
+            top: "".concat(-arrowHeight, "px"),
+            left: "calc(50% + ".concat(arrowHeight * 2.5, "px)"),
+        };
+        case 'tc': return {
+            top: "".concat(-arrowHeight, "px"),
+            left: '50%',
+        };
+        case 'tr': return {
+            top: "".concat(-arrowHeight, "px"),
+            right: "calc(50% + ".concat(arrowHeight * 2.5, "px)"),
+        };
+        case 'cl': return {
+            top: '50%',
+            left: "".concat(-arrowHeight, "px"),
+        };
+        case 'cr': return {
+            top: '50%',
+            right: "".concat(-arrowHeight, "px"),
+        };
+        case 'bl': return {
+            bottom: "".concat(-arrowHeight, "px"),
+            left: "calc(50% + ".concat(arrowHeight * 2.5, "px)"),
+        };
+        case 'bc': return {
+            bottom: "".concat(-arrowHeight, "px"),
+            left: '50%',
+        };
+        case 'br': return {
+            bottom: "".concat(-arrowHeight, "px"),
+            right: "calc(50% + ".concat(arrowHeight * 2.5, "px)"),
+        };
+        default: return {};
     }
 }
-function makeDialogPositionCSS(alignment, arrowHeight, gap) {
+function makeContentPositionStyle(alignment, arrowHeight, gap) {
     switch (alignment) {
-        case 'tl': return (0, styled_components_1.css)(templateObject_9 || (templateObject_9 = __makeTemplateObject(["transform: translate3d(calc(-100% - ", "px), calc(-100% - ", "px), 0);"], ["transform: translate3d(calc(-100% - ", "px), calc(-100% - ", "px), 0);"])), gap, gap);
-        case 'tc': return (0, styled_components_1.css)(templateObject_10 || (templateObject_10 = __makeTemplateObject(["transform: translate3d(-50%, calc(-100% - ", "px), 0);"], ["transform: translate3d(-50%, calc(-100% - ", "px), 0);"])), gap);
-        case 'tr': return (0, styled_components_1.css)(templateObject_11 || (templateObject_11 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px), calc(-100% - ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px), calc(-100% - ", "px), 0);"])), gap, gap);
-        case 'cl': return (0, styled_components_1.css)(templateObject_12 || (templateObject_12 = __makeTemplateObject(["transform: translate3d(calc(-100% - ", "px), -50%, 0);"], ["transform: translate3d(calc(-100% - ", "px), -50%, 0);"])), gap);
-        case 'cr': return (0, styled_components_1.css)(templateObject_13 || (templateObject_13 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px), -50%, 0);"], ["transform: translate3d(calc(100% + ", "px), -50%, 0);"])), gap);
-        case 'bl': return (0, styled_components_1.css)(templateObject_14 || (templateObject_14 = __makeTemplateObject(["transform: translate3d(calc(-100% - ", "px), calc(100% + ", "px), 0);"], ["transform: translate3d(calc(-100% - ", "px), calc(100% + ", "px), 0);"])), gap, gap);
-        case 'bc': return (0, styled_components_1.css)(templateObject_15 || (templateObject_15 = __makeTemplateObject(["transform: translate3d(-50%, calc(100% + ", "px), 0);"], ["transform: translate3d(-50%, calc(100% + ", "px), 0);"])), gap);
-        case 'br': return (0, styled_components_1.css)(templateObject_16 || (templateObject_16 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px), calc(100% + ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px), calc(100% + ", "px), 0);"])), gap, gap);
+        case 'tl': return {
+            transform: "translate3d(calc(-100% - ".concat(gap, "px), calc(-100% - ").concat(gap, "px), 0)"),
+        };
+        case 'tc': return {
+            transform: "translate3d(-50%, calc(-100% - ".concat(gap, "px), 0)"),
+        };
+        case 'tr': return {
+            transform: "translate3d(calc(100% + ".concat(gap, "px), calc(-100% - ").concat(gap, "px), 0)"),
+        };
+        case 'cl': return {
+            transform: "translate3d(calc(-100% - ".concat(gap, "px), -50%, 0)"),
+        };
+        case 'cr': return {
+            transform: "translate3d(calc(100% + ".concat(gap, "px), -50%, 0)"),
+        };
+        case 'bl': return {
+            transform: "translate3d(calc(-100% - ".concat(gap, "px), calc(100% + ").concat(gap, "px), 0)"),
+        };
+        case 'bc': return {
+            transform: "translate3d(-50%, calc(100% + ".concat(gap, "px), 0)"),
+        };
+        case 'br': return {
+            transform: "translate3d(calc(100% + ".concat(gap, "px), calc(100% + ").concat(gap, "px), 0)"),
+        };
+        default: return {};
     }
 }
-function makeArrowPositionCSS(alignment, arrowHeight, gap, color) {
-    return (0, styled_components_1.css)(templateObject_33 || (templateObject_33 = __makeTemplateObject(["\n    ", "\n\n    ", "\n  "], ["\n    ", "\n\n    ", "\n  "])), function () {
-        switch (alignment) {
-            case 'tl': return (0, styled_components_1.css)(templateObject_17 || (templateObject_17 = __makeTemplateObject(["border-color: ", " transparent transparent transparent;"], ["border-color: ", " transparent transparent transparent;"])), color);
-            case 'tc': return (0, styled_components_1.css)(templateObject_18 || (templateObject_18 = __makeTemplateObject(["border-color: ", " transparent transparent transparent;"], ["border-color: ", " transparent transparent transparent;"])), color);
-            case 'tr': return (0, styled_components_1.css)(templateObject_19 || (templateObject_19 = __makeTemplateObject(["border-color: ", " transparent transparent transparent;"], ["border-color: ", " transparent transparent transparent;"])), color);
-            case 'cl': return (0, styled_components_1.css)(templateObject_20 || (templateObject_20 = __makeTemplateObject(["border-color: transparent transparent transparent ", ";"], ["border-color: transparent transparent transparent ", ";"])), color);
-            case 'cr': return (0, styled_components_1.css)(templateObject_21 || (templateObject_21 = __makeTemplateObject(["border-color: transparent ", " transparent transparent;"], ["border-color: transparent ", " transparent transparent;"])), color);
-            case 'bl': return (0, styled_components_1.css)(templateObject_22 || (templateObject_22 = __makeTemplateObject(["border-color: transparent transparent ", " transparent;"], ["border-color: transparent transparent ", " transparent;"])), color);
-            case 'bc': return (0, styled_components_1.css)(templateObject_23 || (templateObject_23 = __makeTemplateObject(["border-color: transparent transparent ", " transparent;"], ["border-color: transparent transparent ", " transparent;"])), color);
-            case 'br': return (0, styled_components_1.css)(templateObject_24 || (templateObject_24 = __makeTemplateObject(["border-color: transparent transparent ", " transparent;"], ["border-color: transparent transparent ", " transparent;"])), color);
-        }
-    }, function () {
-        switch (alignment) {
-            case 'tl': return (0, styled_components_1.css)(templateObject_25 || (templateObject_25 = __makeTemplateObject(["transform: translate3d(calc(0% - ", "px - ", "px), calc(0% - ", "px), 0);"], ["transform: translate3d(calc(0% - ", "px - ", "px), calc(0% - ", "px), 0);"])), gap, arrowHeight * 3, gap);
-            case 'tc': return (0, styled_components_1.css)(templateObject_26 || (templateObject_26 = __makeTemplateObject(["transform: translate3d(-50%, calc(0% - ", "px), 0);"], ["transform: translate3d(-50%, calc(0% - ", "px), 0);"])), gap);
-            case 'tr': return (0, styled_components_1.css)(templateObject_27 || (templateObject_27 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% - ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% - ", "px), 0);"])), gap, arrowHeight, gap);
-            case 'cl': return (0, styled_components_1.css)(templateObject_28 || (templateObject_28 = __makeTemplateObject(["transform: translate3d(calc(0% - ", "px), -50%, 0);"], ["transform: translate3d(calc(0% - ", "px), -50%, 0);"])), gap);
-            case 'cr': return (0, styled_components_1.css)(templateObject_29 || (templateObject_29 = __makeTemplateObject(["transform: translate3d(calc(0% + ", "px), -50%, 0);"], ["transform: translate3d(calc(0% + ", "px), -50%, 0);"])), gap);
-            case 'bl': return (0, styled_components_1.css)(templateObject_30 || (templateObject_30 = __makeTemplateObject(["transform: translate3d(calc(0% - ", "px - ", "px), calc(0% + ", "px), 0);"], ["transform: translate3d(calc(0% - ", "px - ", "px), calc(0% + ", "px), 0);"])), gap, arrowHeight * 3, gap);
-            case 'bc': return (0, styled_components_1.css)(templateObject_31 || (templateObject_31 = __makeTemplateObject(["transform: translate3d(-50%, calc(0% + ", "px), 0);"], ["transform: translate3d(-50%, calc(0% + ", "px), 0);"])), gap);
-            case 'br': return (0, styled_components_1.css)(templateObject_32 || (templateObject_32 = __makeTemplateObject(["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% + ", "px), 0);"], ["transform: translate3d(calc(100% + ", "px + ", "px), calc(0% + ", "px), 0);"])), gap, arrowHeight, gap);
-        }
-    });
+function makeArrowPositionStyle(alignment, arrowHeight, gap, color) {
+    switch (alignment) {
+        case 'tl': return {
+            borderColor: "".concat(color, " transparent transparent transparent"),
+            transform: "translate3d(calc(0% - ".concat(gap, "px - ").concat(arrowHeight * 3, "px), calc(0% - ").concat(gap, "px), 0)"),
+        };
+        case 'tc': return {
+            borderColor: "".concat(color, " transparent transparent transparent"),
+            transform: "translate3d(-50%, calc(0% - ".concat(gap, "px), 0)"),
+        };
+        case 'tr': return {
+            borderColor: "".concat(color, " transparent transparent transparent"),
+            transform: "translate3d(calc(100% + ".concat(gap, "px + ").concat(arrowHeight, "px), calc(0% - ").concat(gap, "px), 0)"),
+        };
+        case 'cl': return {
+            borderColor: "transparent transparent transparent ".concat(color),
+            transform: "translate3d(calc(0% - ".concat(gap, "px), -50%, 0)"),
+        };
+        case 'cr': return {
+            borderColor: "transparent ".concat(color, " transparent transparent"),
+            transform: "translate3d(calc(0% + ".concat(gap, "px), -50%, 0)"),
+        };
+        case 'bl': return {
+            borderColor: "transparent transparent ".concat(color, " transparent"),
+            transform: "translate3d(calc(0% - ".concat(gap, "px - ").concat(arrowHeight * 3, "px), calc(0% + ").concat(gap, "px), 0)"),
+        };
+        case 'bc': return {
+            borderColor: "transparent transparent ".concat(color, " transparent"),
+            transform: "translate3d(-50%, calc(0% + ".concat(gap, "px), 0)"),
+        };
+        case 'br': return {
+            borderColor: "transparent transparent ".concat(color, " transparent"),
+            transform: "translate3d(calc(100% + ".concat(gap, "px + ").concat(arrowHeight, "px), calc(0% + ").concat(gap, "px), 0)"),
+        };
+        default: return {};
+    }
 }
-var StyledRoot = (0, styled_components_1.default)(ExtractChild_1.default)(templateObject_36 || (templateObject_36 = __makeTemplateObject(["\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ", "px;\n    content: '';\n    height: 0;\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    transition: opacity 200ms ease-out;\n    width: 0;\n    z-index: 10001;\n\n    ", "\n  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 200px;\n    padding: 10px 14px;\n    text-align: left;\n\n    ", "\n\n    background: ", ";\n    color: ", ";\n    content: '", "';\n    opacity: 0;\n    overflow: hidden;\n    pointer-events: none;\n    position: absolute;\n    transform: translate3d(0, 0, 0);\n    transition: opacity 200ms ease-out;\n    z-index: 10000;\n\n    ", "\n  }\n\n  ", " {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n"], ["\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ", "px;\n    content: '';\n    height: 0;\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    transition: opacity 200ms ease-out;\n    width: 0;\n    z-index: 10001;\n\n    ", "\n  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 200px;\n    padding: 10px 14px;\n    text-align: left;\n\n    ", "\n\n    background: ", ";\n    color: ", ";\n    content: '", "';\n    opacity: 0;\n    overflow: hidden;\n    pointer-events: none;\n    position: absolute;\n    transform: translate3d(0, 0, 0);\n    transition: opacity 200ms ease-out;\n    z-index: 10000;\n\n    ", "\n  }\n\n  ", " {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n"])), function (props) { return props.arrowHeight; }, function (props) { return props.alignment && props.textSize && (0, styled_components_1.css)(templateObject_34 || (templateObject_34 = __makeTemplateObject(["\n      ", "\n      ", "\n      ", "\n    "], ["\n      ", "\n      ", "\n      ", "\n    "])), makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap), makeArrowPositionCSS(props.alignment, props.arrowHeight, props.gap, props.backgroundColor), props.disabledOnTouch ? 'html.touch & { display: none; }' : ''); }, function (props) { return props.cssDialog; }, function (props) { return props.backgroundColor; }, function (props) { return props.textColor; }, function (props) { return props.hint; }, function (props) { return props.alignment && props.textSize && (0, styled_components_1.css)(templateObject_35 || (templateObject_35 = __makeTemplateObject(["\n      width: ", ";\n      ", "\n      ", "\n      ", "\n    "], ["\n      width: ", ";\n      ", "\n      ", "\n      ", "\n    "])), props.textSize.width > 0 ? "".concat(props.textSize.width, "px") : 'auto', makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap), makeDialogPositionCSS(props.alignment, props.arrowHeight, props.gap), props.disabledOnTouch ? 'html.touch & { display: none; }' : ''); }, function (props) { return props.disabledOnTouch ? 'html:not(.touch) &:hover' : '&:hover'; });
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35, templateObject_36;
 //# sourceMappingURL=WithTooltip.js.map

package/lib/WithTooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import React, { HTMLAttributes, MouseEvent, RefObject, useEffect, useRef, useState } from 'react'\nimport { Rect, Size } from 'spase'\nimport styled, { css, CSSProp } from 'styled-components'\nimport ExtractChild from './ExtractChild'\nimport useElementRect from './hooks/useElementRect'\nimport useViewportSize from './hooks/useViewportSize'\n\nexport type Props = HTMLAttributes<HTMLElement> & {\n  /**\n   * The height of the arrow. The width (longest edge) of the arrow is always twice its height.\n   */\n  arrowHeight?: number\n\n  /**\n   * Color of the dialog background, same format as a CSS color string (i.e. '#000').\n   */\n  backgroundColor?: string\n\n  /**\n   * Specifies if the tooltip should be disabled in touch devices (i.e. `html` has class `.touch`).\n   */\n  disabledOnTouch?: boolean\n\n  /**\n   * The hint string to display in the tooltip.\n   */\n  hint: string\n\n  /**\n   * The gap (in pixels) between the target element and the tooltip, defaults to zero.\n   */\n  gap?: number\n\n  /**\n   * Color of the dialog text, same format as a CSS color string (i.e. '#000').\n   */\n  textColor?: string\n\n  /**\n   * The minimum space (in pixels) between the target element and the edge of the window required to\n   * trigger an alignment change, defaults to `100px`.\n   */\n  threshold?: number\n\n  /**\n   * Custom CSS provided to the dialog. Not all CSS rules will take effect as they will be\n   * overridden by internal rules.\n   */\n  cssDialog?: CSSProp<any>\n}\n\ntype Alignment = 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br'\n\nexport default function WithTooltip({\n  arrowHeight = 8,\n  backgroundColor = '#000',\n  cssDialog,\n  disabledOnTouch = true,\n  hint,\n  gap = 5,\n  textColor = '#fff',\n  threshold = 100,\n  ...props\n}: Props) {\n  const computeAlignment = (target: Element, threshold: number): Alignment => {\n    const vrect = Rect.fromViewport()\n    const rect = Rect.intersecting(target)\n\n    if (rect) {\n      const leftBound = (rect.left - vrect.left) < threshold\n      const rightBound = (vrect.right - rect.right) < threshold\n      const topBound = (rect.top - vrect.top) < threshold\n      const bottomBound = (vrect.bottom - rect.bottom) < threshold\n\n      if (leftBound && topBound) return 'br'\n      if (leftBound && bottomBound) return 'tr'\n      if (rightBound && topBound) return 'bl'\n      if (rightBound && bottomBound) return 'tl'\n      if (leftBound) return 'cr'\n      if (rightBound) return 'cl'\n      if (bottomBound) return 'tc'\n    }\n\n    return 'bc'\n  }\n\n  const computeTextSize = (target: Element, threshold: number): Size => {\n    const computedStyle = window.getComputedStyle(target, '::after')\n    const div = document.createElement('div')\n    div.innerHTML = hint\n    div.style.fontFamily = computedStyle.getPropertyValue('font-family')\n    div.style.fontSize = computedStyle.getPropertyValue('font-size')\n    div.style.fontStyle = computedStyle.getPropertyValue('font-style')\n    div.style.fontVariant = computedStyle.getPropertyValue('font-variant')\n    div.style.fontWeight = computedStyle.getPropertyValue('font-weight')\n    div.style.left = '0'\n    div.style.position = 'absolute'\n    div.style.top = '0'\n    div.style.visibility = 'hidden'\n    div.style.whiteSpace = 'pre'\n\n    document.body.appendChild(div)\n\n    // Add 1px as buffer to mitigate precision discrepancies.\n    const width = div.clientWidth + 1\n    const height = div.clientHeight + 1\n\n    document.body.removeChild(div)\n\n    return new Size([width, height])\n  }\n\n  const onMouseOver = (event: MouseEvent) => {\n    setAlignment(computeAlignment(event.currentTarget, threshold))\n    setTextSize(computeTextSize(event.currentTarget, threshold))\n  }\n\n  const [textSize, setTextSize] = useState<Size | undefined>(new Size())\n  const [alignment, setAlignment] = useState<Alignment | undefined>(undefined)\n  const childRef = useRef<HTMLElement>(null)\n  const childRect = useElementRect(childRef)\n  const viewportSize = useViewportSize()\n\n  useEffect(() => {\n    const childNode = childRef.current\n    if (!childNode) return\n    setAlignment(computeAlignment(childNode, threshold))\n    setTextSize(computeTextSize(childNode, threshold))\n  }, [childRect, viewportSize])\n\n  return (\n    <StyledRoot\n      arrowHeight={arrowHeight}\n      backgroundColor={backgroundColor}\n      ref={childRef}\n      cssDialog={cssDialog}\n      disabledOnTouch={disabledOnTouch}\n      hint={hint}\n      gap={gap}\n      onMouseOver={event => onMouseOver(event)}\n      alignment={alignment}\n      textColor={textColor}\n      textSize={textSize}\n      {...props}\n    />\n  )\n}\n\nfunction makeDisplacementCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n  switch (alignment) {\n  case 'tl': return css`top: ${-arrowHeight}px; left: calc(50% + ${arrowHeight*2.5}px);`\n  case 'tc': return css`top: ${-arrowHeight}px; left: 50%;`\n  case 'tr': return css`top: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\n  case 'cl': return css`top: 50%; left: ${-arrowHeight}px;`\n  case 'cr': return css`top: 50%; right: ${-arrowHeight}px;`\n  case 'bl': return css`bottom: ${-arrowHeight}px; left: calc(50% + ${arrowHeight*2.5}px);`\n  case 'bc': return css`bottom: ${-arrowHeight}px; left: 50%;`\n  case 'br': return css`bottom: ${-arrowHeight}px; right: calc(50% + ${arrowHeight*2.5}px);`\n  }\n}\n\nfunction makeDialogPositionCSS(alignment: Alignment, arrowHeight: number, gap: number): CSSProp {\n  switch (alignment) {\n  case 'tl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0);`\n  case 'tc': return css`transform: translate3d(-50%, calc(-100% - ${gap}px), 0);`\n  case 'tr': return css`transform: translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0);`\n  case 'cl': return css`transform: translate3d(calc(-100% - ${gap}px), -50%, 0);`\n  case 'cr': return css`transform: translate3d(calc(100% + ${gap}px), -50%, 0);`\n  case 'bl': return css`transform: translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0);`\n  case 'bc': return css`transform: translate3d(-50%, calc(100% + ${gap}px), 0);`\n  case 'br': return css`transform: translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0);`\n  }\n}\n\nfunction makeArrowPositionCSS(alignment: Alignment, arrowHeight: number, gap: number, color: string): CSSProp {\n  return css`\n    ${() => {\n    switch (alignment) {\n    case 'tl': return css`border-color: ${color} transparent transparent transparent;`\n    case 'tc': return css`border-color: ${color} transparent transparent transparent;`\n    case 'tr': return css`border-color: ${color} transparent transparent transparent;`\n    case 'cl': return css`border-color: transparent transparent transparent ${color};`\n    case 'cr': return css`border-color: transparent ${color} transparent transparent;`\n    case 'bl': return css`border-color: transparent transparent ${color} transparent;`\n    case 'bc': return css`border-color: transparent transparent ${color} transparent;`\n    case 'br': return css`border-color: transparent transparent ${color} transparent;`\n    }\n  }}\n\n    ${() => {\n    switch (alignment) {\n    case 'tl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% - ${gap}px), 0);`\n    case 'tc': return css`transform: translate3d(-50%, calc(0% - ${gap}px), 0);`\n    case 'tr': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0);`\n    case 'cl': return css`transform: translate3d(calc(0% - ${gap}px), -50%, 0);`\n    case 'cr': return css`transform: translate3d(calc(0% + ${gap}px), -50%, 0);`\n    case 'bl': return css`transform: translate3d(calc(0% - ${gap}px - ${arrowHeight*3}px), calc(0% + ${gap}px), 0);`\n    case 'bc': return css`transform: translate3d(-50%, calc(0% + ${gap}px), 0);`\n    case 'br': return css`transform: translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0);`\n    }\n  }}\n  `\n}\n\nconst StyledRoot = styled(ExtractChild)<{\n  arrowHeight: number\n  backgroundColor: string\n  ref: RefObject<HTMLElement>\n  cssDialog?: CSSProp\n  disabledOnTouch: boolean\n  hint: string\n  gap: number\n  alignment?: Alignment\n  textColor: string\n  textSize?: Size\n}>`\n  cursor: pointer;\n  position: relative;\n\n  &::before {\n    border-style: solid;\n    border-width: ${props => props.arrowHeight}px;\n    content: '';\n    height: 0;\n    opacity: 0;\n    pointer-events: none;\n    position: absolute;\n    transition: opacity 200ms ease-out;\n    width: 0;\n    z-index: 10001;\n\n    ${props => props.alignment && props.textSize && css`\n      ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${makeArrowPositionCSS(props.alignment, props.arrowHeight, props.gap, props.backgroundColor)}\n      ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n    `}\n  }\n\n  &::after {\n    box-sizing: content-box;\n    font-size: 12px;\n    max-width: 200px;\n    padding: 10px 14px;\n    text-align: left;\n\n    ${props => props.cssDialog}\n\n    background: ${props => props.backgroundColor};\n    color: ${props => props.textColor};\n    content: '${props => props.hint}';\n    opacity: 0;\n    overflow: hidden;\n    pointer-events: none;\n    position: absolute;\n    transform: translate3d(0, 0, 0);\n    transition: opacity 200ms ease-out;\n    z-index: 10000;\n\n    ${props => props.alignment && props.textSize && css`\n      width: ${props.textSize.width > 0 ? `${props.textSize.width}px` : 'auto'};\n      ${makeDisplacementCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${makeDialogPositionCSS(props.alignment, props.arrowHeight, props.gap)}\n      ${props.disabledOnTouch ? 'html.touch & { display: none; }' : ''}\n    `}\n  }\n\n  ${props => props.disabledOnTouch ? 'html:not(.touch) &:hover' : '&:hover'} {\n    &::before { opacity: 1; }\n    &::after { opacity: 1; }\n  }\n`\n"]}
+{"version":3,"file":"WithTooltip.js","sourceRoot":"/","sources":["WithTooltip.tsx"],"names":[],"mappings":"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","sourcesContent":["import classNames from 'classnames'\nimport React, { CSSProperties, HTMLAttributes, MouseEvent, PropsWithChildren, useEffect, useRef } from 'react'\nimport { Rect, Size } from 'spase'\nimport ExtractChild from './ExtractChild'\nimport useElementRect from './hooks/useElementRect'\nimport useViewportSize from './hooks/useViewportSize'\nimport asStyleDict from './utils/asStyleDict'\nimport styles from './utils/styles'\n\ntype Alignment = 'tl' | 'tc' | 'tr' | 'cl' | 'cr' | 'bl' | 'bc' | 'br'\n\nexport type WithToolTipProps = Pick<HTMLAttributes<HTMLElement>, 'className' | 'style'> & PropsWithChildren<{\n  /**\n   * The height of the arrow. The width (longest edge) of the arrow is always\n   * twice its height.\n   */\n  arrowHeight?: number\n\n  /**\n   * Color of the dialog background, same format as a CSS color string (i.e.\n   * '#000').\n   */\n  backgroundColor?: string\n\n  /**\n   * Specifies if the tooltip should be disabled in touch devices (i.e. `html`\n   * has class `.touch`).\n   */\n  disabledOnTouch?: boolean\n\n  /**\n   * The hint string to display in the tooltip.\n   */\n  hint: string\n\n  /**\n   * The gap (in pixels) between the target element and the tooltip, defaults to\n   * zero.\n   */\n  gap?: number\n\n  /**\n   * The maximum width (in pixels) of the hint text.\n   */\n  maxTextWidth?: number\n\n  /**\n   * The minimum space (in pixels) between the target element and the edge of\n   * the window required to trigger an alignment change, defaults to `100px`.\n   */\n  threshold?: number\n}>\n\nexport default function WithTooltip({\n  children,\n  className,\n  style,\n  arrowHeight = 8,\n  backgroundColor = '#000',\n  gap = 5,\n  hint,\n  maxTextWidth = 200,\n  threshold = 100,\n}: WithToolTipProps) {\n  const createDialog = () => {\n    const dialog = document.createElement('div')\n    dialog.className = classNames(className)\n    Object.keys(styles(style, fixedStyles.dialog)).forEach(rule => (dialog.style as any)[rule] = (fixedStyles.dialog as any)[rule])\n\n    const arrow = document.createElement('div')\n    Object.keys(fixedStyles.arrow).forEach(rule => (arrow.style as any)[rule] = (fixedStyles.arrow as any)[rule])\n\n    const content = document.createElement('div')\n    content.innerText = hint\n    Object.keys(fixedStyles.content).forEach(rule => (content.style as any)[rule] = (fixedStyles.content as any)[rule])\n\n    dialog.appendChild(arrow)\n    dialog.appendChild(content)\n\n    return dialog\n  }\n\n  const computeAlignment = () => {\n    if (!rootRef.current) return 'bc'\n\n    const vrect = Rect.fromViewport()\n    const irect = Rect.intersecting(rootRef.current)\n\n    if (irect) {\n      const leftBound = irect.left - vrect.left < threshold\n      const rightBound = vrect.right - irect.right < threshold\n      const topBound = irect.top - vrect.top < threshold\n      const bottomBound = vrect.bottom - irect.bottom < threshold\n\n      if (leftBound && topBound) return 'br'\n      if (leftBound && bottomBound) return 'tr'\n      if (rightBound && topBound) return 'bl'\n      if (rightBound && bottomBound) return 'tl'\n      if (leftBound) return 'cr'\n      if (rightBound) return 'cl'\n      if (bottomBound) return 'tc'\n    }\n\n    return 'bc'\n  }\n\n  const computeTextSize = () => {\n    if (!dialogRef.current) return new Size()\n\n    const computedStyle = window.getComputedStyle(dialogRef.current)\n    const div = document.createElement('div')\n    div.innerText = hint\n    div.style.fontFamily = computedStyle.getPropertyValue('font-family')\n    div.style.fontSize = computedStyle.getPropertyValue('font-size')\n    div.style.fontStyle = computedStyle.getPropertyValue('font-style')\n    div.style.fontVariant = computedStyle.getPropertyValue('font-variant')\n    div.style.fontWeight = computedStyle.getPropertyValue('font-weight')\n    div.style.left = '0'\n    div.style.position = 'absolute'\n    div.style.top = '0'\n    div.style.visibility = 'hidden'\n    div.style.whiteSpace = 'pre'\n\n    document.body.appendChild(div)\n\n    // Add 1px as buffer to mitigate precision discrepancies.\n    const width = div.clientWidth + 1\n    const height = div.clientHeight + 1\n\n    document.body.removeChild(div)\n\n    return new Size([width, height])\n  }\n\n  const mouseEnterHandler = (event: MouseEvent) => {\n    if (!dialogRef.current) return\n    dialogRef.current.style.opacity = '1'\n  }\n\n  const mouseLeaveHandler = (event: MouseEvent) => {\n    if (!dialogRef.current) return\n    dialogRef.current.style.opacity = '0'\n  }\n\n  const rootRef = useRef<HTMLElement>(null)\n  const dialogRef = useRef<HTMLDivElement>()\n  const rect = useElementRect(rootRef)\n  const viewportSize = useViewportSize()\n  const alignment = computeAlignment()\n  const textSize = computeTextSize()\n\n  useEffect(() => {\n    const dialogNode = createDialog()\n    rootRef.current?.appendChild(dialogNode)\n\n    dialogRef.current = dialogNode\n\n    return () => {\n      rootRef.current?.removeChild(dialogNode)\n    }\n  }, [rect, viewportSize])\n\n  const fixedStyles = asStyleDict({\n    dialog: {\n      background: 'none',\n      boxSizing: 'border-box',\n      height: `${rect.size.height}px`,\n      left: '0',\n      margin: '0',\n      opacity: '0',\n      position: 'absolute',\n      top: '0',\n      width: `${rect.size.width}px`,\n      zIndex: '10000',\n    },\n    arrow: {\n      borderStyle: 'solid',\n      borderWidth: `${arrowHeight}px`,\n      height: '0',\n      pointerEvents: 'none',\n      position: 'absolute',\n      width: '0',\n      ...makeDisplacementStyle(alignment, arrowHeight, gap),\n      ...makeArrowPositionStyle(alignment, arrowHeight, gap, backgroundColor),\n    },\n    content: {\n      background: backgroundColor,\n      boxSizing: 'content-box',\n      color: 'inherit',\n      fontFamily: 'inherit',\n      fontSize: 'inherit',\n      fontWeight: 'inherit',\n      letterSpacing: 'inherit',\n      lineHeight: 'inherit',\n      maxWidth: `${maxTextWidth}px`,\n      overflow: 'hidden',\n      padding: 'inherit',\n      pointerEvents: 'none',\n      position: 'absolute',\n      textAlign: 'inherit',\n      transition: 'inherit',\n      width: textSize.width > 0 ? `${textSize.width}px` : 'auto',\n      ...makeDisplacementStyle(alignment, arrowHeight, gap),\n      ...makeContentPositionStyle(alignment, arrowHeight, gap),\n    },\n  })\n\n  return (\n    <ExtractChild\n      children={children}\n      ref={rootRef}\n      onMouseEnter={mouseEnterHandler}\n      onMouseLeave={mouseLeaveHandler}\n    />\n  )\n}\n\nfunction makeDisplacementStyle(alignment: Alignment, arrowHeight: number, gap: number): CSSProperties {\n  switch (alignment) {\n    case 'tl': return {\n      top: `${-arrowHeight}px`,\n      left: `calc(50% + ${arrowHeight * 2.5}px)`,\n    }\n    case 'tc': return {\n      top: `${-arrowHeight}px`,\n      left: '50%',\n    }\n    case 'tr': return {\n      top: `${-arrowHeight}px`,\n      right: `calc(50% + ${arrowHeight * 2.5}px)`,\n    }\n    case 'cl': return {\n      top: '50%',\n      left: `${-arrowHeight}px`,\n    }\n    case 'cr': return {\n      top: '50%',\n      right: `${-arrowHeight}px`,\n    }\n    case 'bl': return {\n      bottom: `${-arrowHeight}px`,\n      left: `calc(50% + ${arrowHeight * 2.5}px)`,\n    }\n    case 'bc': return {\n      bottom: `${-arrowHeight}px`,\n      left: '50%',\n    }\n    case 'br': return {\n      bottom: `${-arrowHeight}px`,\n      right: `calc(50% + ${arrowHeight * 2.5}px)`,\n    }\n    default: return {\n\n    }\n  }\n}\n\nfunction makeContentPositionStyle(alignment: Alignment, arrowHeight: number, gap: number): CSSProperties {\n  switch (alignment) {\n    case 'tl': return {\n      transform: `translate3d(calc(-100% - ${gap}px), calc(-100% - ${gap}px), 0)`,\n    }\n    case 'tc': return {\n      transform: `translate3d(-50%, calc(-100% - ${gap}px), 0)`,\n    }\n    case 'tr': return {\n      transform: `translate3d(calc(100% + ${gap}px), calc(-100% - ${gap}px), 0)`,\n    }\n    case 'cl': return {\n      transform: `translate3d(calc(-100% - ${gap}px), -50%, 0)`,\n    }\n    case 'cr': return {\n      transform: `translate3d(calc(100% + ${gap}px), -50%, 0)`,\n    }\n    case 'bl': return {\n      transform: `translate3d(calc(-100% - ${gap}px), calc(100% + ${gap}px), 0)`,\n    }\n    case 'bc': return {\n      transform: `translate3d(-50%, calc(100% + ${gap}px), 0)`,\n    }\n    case 'br': return {\n      transform: `translate3d(calc(100% + ${gap}px), calc(100% + ${gap}px), 0)`,\n    }\n    default: return {\n\n    }\n  }\n}\n\nfunction makeArrowPositionStyle(alignment: Alignment, arrowHeight: number, gap: number, color: string): CSSProperties {\n  switch (alignment) {\n    case 'tl': return {\n      borderColor: `${color} transparent transparent transparent`,\n      transform: `translate3d(calc(0% - ${gap}px - ${arrowHeight * 3}px), calc(0% - ${gap}px), 0)`,\n    }\n    case 'tc': return {\n      borderColor: `${color} transparent transparent transparent`,\n      transform: `translate3d(-50%, calc(0% - ${gap}px), 0)`,\n    }\n    case 'tr': return {\n      borderColor: `${color} transparent transparent transparent`,\n      transform: `translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% - ${gap}px), 0)`,\n    }\n    case 'cl': return {\n      borderColor: `transparent transparent transparent ${color}`,\n      transform: `translate3d(calc(0% - ${gap}px), -50%, 0)`,\n    }\n    case 'cr': return {\n      borderColor: `transparent ${color} transparent transparent`,\n      transform: `translate3d(calc(0% + ${gap}px), -50%, 0)`,\n    }\n    case 'bl': return {\n      borderColor: `transparent transparent ${color} transparent`,\n      transform: `translate3d(calc(0% - ${gap}px - ${arrowHeight * 3}px), calc(0% + ${gap}px), 0)`,\n    }\n    case 'bc': return {\n      borderColor: `transparent transparent ${color} transparent`,\n      transform: `translate3d(-50%, calc(0% + ${gap}px), 0)`,\n    }\n    case 'br': return {\n      borderColor: `transparent transparent ${color} transparent`,\n      transform: `translate3d(calc(100% + ${gap}px + ${arrowHeight}px), calc(0% + ${gap}px), 0)`,\n    }\n    default: return {\n\n    }\n  }\n}\n"]}

package/lib/hooks/useDocumentTitle.d.ts

@@ -1,6 +1,7 @@
 import { DependencyList } from 'react';
 /**
- * Hook for adding document title. By default this hook is dependent on the `title` only.
+ * Hook for adding document title. By default this hook is dependent on the
+ * `title` only.
  *
  * @param title - The document title.
  * @param deps - Additional dependencies.

package/lib/hooks/useDocumentTitle.js

@@ -27,7 +27,8 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
 Object.defineProperty(exports, "__esModule", { value: true });
 var react_1 = require("react");
 /**
- * Hook for adding document title. By default this hook is dependent on the `title` only.
+ * Hook for adding document title. By default this hook is dependent on the
+ * `title` only.
  *
  * @param title - The document title.
  * @param deps - Additional dependencies.

package/lib/hooks/useDocumentTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDocumentTitle.js","sourceRoot":"/","sources":["hooks/useDocumentTitle.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAiD;AAEjD;;;;;GAKG;AACH,SAAwB,gBAAgB,CAAC,KAAa,EAAE,IAAqB;IAC3E,IAAA,iBAAS,EAAC;QACR,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;IACxB,CAAC,iBAAG,KAAK,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;AAClC,CAAC;AAJD,mCAIC","sourcesContent":["import { DependencyList, useEffect } from 'react'\n\n/**\n * Hook for adding document title. By default this hook is dependent on the `title` only.\n *\n * @param title - The document title.\n * @param deps - Additional dependencies.\n */\nexport default function useDocumentTitle(title: string, deps?: DependencyList) {\n  useEffect(() => {\n    document.title = title\n  }, [title, ...deps ? deps : []])\n}\n"]}
+{"version":3,"file":"useDocumentTitle.js","sourceRoot":"/","sources":["hooks/useDocumentTitle.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,+BAAiD;AAEjD;;;;;;GAMG;AACH,SAAwB,gBAAgB,CAAC,KAAa,EAAE,IAAqB;IAC3E,IAAA,iBAAS,EAAC;QACR,QAAQ,CAAC,KAAK,GAAG,KAAK,CAAA;IACxB,CAAC,iBAAG,KAAK,UAAK,IAAI,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,UAAE,CAAA;AAClC,CAAC;AAJD,mCAIC","sourcesContent":["import { DependencyList, useEffect } from 'react'\n\n/**\n * Hook for adding document title. By default this hook is dependent on the\n * `title` only.\n *\n * @param title - The document title.\n * @param deps - Additional dependencies.\n */\nexport default function useDocumentTitle(title: string, deps?: DependencyList) {\n  useEffect(() => {\n    document.title = title\n  }, [title, ...deps ? deps : []])\n}\n"]}

package/lib/hooks/useDragEffect.d.ts

@@ -1,13 +1,28 @@
 import { DependencyList, Dispatch, RefObject, SetStateAction } from 'react';
 declare type ReturnedStates<T> = {
     isDragging: [boolean, Dispatch<SetStateAction<boolean>>];
+    isReleasing: [boolean, Dispatch<SetStateAction<boolean>>];
     value: [T, Dispatch<SetStateAction<T>>];
 };
-declare type Options<T> = Omit<Parameters<Interact.Interactable['draggable']>[0], 'onstart' | 'onmove' | 'onend'> & {
+declare type InteractDraggableOptions = Parameters<Interact.Interactable['draggable']>[0];
+declare type Options<T> = Omit<InteractDraggableOptions, 'onstart' | 'onmove' | 'onend'> & {
     /**
      * The initial associated value of this hook.
      */
     initialValue: T;
+    /**
+     * A function that transforms the drag move delta values to the associated
+     * value of this hook.
+     *
+     * @param currentValue - The current associated value.
+     * @param dx - The displacement on the x-axis (in pixels) since the last
+     *             emitted drag move event.
+     * @param dy - The displacement on the y-axis (in pixels) since the last
+     *             emitted drag move event.
+     *
+     * @returns The transformed value.
+     */
+    transform: (currentValue: T, dx: number, dy: number) => T;
     /**
      * Handler invoked when dragging starts.
      */
@@ -15,33 +30,27 @@ declare type Options<T> = Omit<Parameters<Interact.Interactable['draggable']>[0]
     /**
      * Handler invoked when dragging.
      *
-     * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.
-     * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.
+     * @param dx - The displacement on the x-axis (in pixels) since the last
+     *             emitted drag move event.
+     * @param dy - The displacement on the y-axis (in pixels) since the last
+     *             emitted drag move event.
      */
     onDragMove?: (dx: number, dy: number) => void;
     /**
      * Handler invoked when dragging ends.
      */
     onDragEnd?: () => void;
-    /**
-     * A function that transforms the drag move delta values to the associated value of this hook.
-     *
-     * @param currentValue - The current associated value.
-     * @param dx - The displacement on the x-axis (in pixels) since the last emitted drag move event.
-     * @param dy - The displacement on the y-axis (in pixels) since the last emitted drag move event.
-     *
-     * @returns The transformed value.
-     */
-    transform?: (currentValue: T, dx: number, dy: number) => T;
 };
 /**
  * Hook for adding effectful dragging interaction to an element.
  *
- * @param targetRef - The reference to the target element to add drag interaction to.
- * @param options - Additional options which include options for `module:interactjs.draggable`.
+ * @param targetRef - The reference to the target element to add drag
+ *                    interaction to.
+ * @param options - Additional options which include options for
+ *                  `module:interactjs.draggable`.
  * @param deps - Dependencies that trigger this effect.
  *
  * @returns The states created for this effect.
  */
-export default function useDragEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, { onDragStart, onDragMove, onDragEnd, initialValue, transform, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T>;
+export default function useDragEffect<T = [number, number]>(targetRef: RefObject<HTMLElement>, { initialValue, transform, onDragStart, onDragMove, onDragEnd, ...options }: Options<T>, deps?: DependencyList): ReturnedStates<T>;
 export {};