@cypress-design/react-tooltip 0.2.0 → 0.3.0

package/dist/index.umd.js

@@ -30341,7 +30341,7 @@ var ROTATE_MAP = {
 };
 var Tooltip = function (_a) {
     var _b;
-    var placement = _a.placement, _c = _a.color, color = _c === void 0 ? 'light' : _c, className = _a.className, children = _a.children, popper = _a.popper, disabled = _a.disabled, rest = __rest(_a, ["placement", "color", "className", "children", "popper", "disabled"]);
+    var placement = _a.placement, _c = _a.color, color = _c === void 0 ? 'light' : _c, className = _a.className, children = _a.children, popper = _a.popper, disabled = _a.disabled, interactive = _a.interactive, forcePlacement = _a.forcePlacement, rest = __rest(_a, ["placement", "color", "className", "children", "popper", "disabled", "interactive", "forcePlacement"]);
     var arrowRef = React__namespace.useRef(null);
     var _d = React__namespace.useState(false), open = _d[0], setOpen = _d[1];
     var container = React__namespace.useState(function () {
@@ -30359,12 +30359,21 @@ var Tooltip = function (_a) {
         placement: placement,
         open: open,
         onOpenChange: setOpen,
-        middleware: [flip(), offset(0), arrow({ element: arrowRef, padding: 24 })],
+        middleware: [
+            forcePlacement
+                ? {
+                    name: 'no-flip',
+                    fn: function (obj) { return obj; }
+                }
+                : flip(),
+            offset(0),
+            arrow({ element: arrowRef, padding: 24 }),
+        ],
         whileElementsMounted: autoUpdate
     }), x = _e.x, y = _e.y, reference = _e.reference, floating = _e.floating, strategy = _e.strategy, calculatedPlacement = _e.placement, context = _e.context, _f = _e.middlewareData.arrow, _g = _f === void 0 ? {} : _f, arrowX = _g.x, arrowY = _g.y;
     var _h = useInteractions([
         useHover(context, {
-            handleClose: safePolygon(),
+            handleClose: interactive ? safePolygon() : undefined,
             enabled: !disabled
         }),
         useFocus(context, {
@@ -30388,6 +30397,25 @@ var Tooltip = function (_a) {
         arrowXRule = placementSide === 'left' ? 'right' : 'left';
         arrowYRule = 'top';
     }
+    var getColors = function () {
+        switch (color) {
+            case 'light':
+                return {
+                    svg: 'stroke-gray-100 fill-white',
+                    block: 'text-gray-900 border-gray-100 shadow-gray-100',
+                    background: 'bg-white'
+                };
+            case 'dark':
+                return {
+                    svg: 'stroke-gray-800 fill-gray-900',
+                    block: 'text-white shadow-gray-800 border-gray-800',
+                    background: 'bg-gray-900'
+                };
+            default:
+                return {};
+        }
+    };
+    var colors = getColors();
     return (React__namespace.createElement(React__namespace.Fragment, null,
         React__namespace.createElement("div", __assign({}, getReferenceProps(), { ref: reference, className: className }, rest), children),
         React__namespace.createElement(FloatingPortal, null, open && !disabled && (React__namespace.createElement("div", __assign({}, getFloatingProps({
@@ -30399,30 +30427,26 @@ var Tooltip = function (_a) {
                 padding: '16px'
             }
         })),
-            React__namespace.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 48", width: "24", height: "24", className: clsx__default["default"]('absolute', [
-                    color === 'dark' && 'stroke-gray-800 fill-gray-900',
-                    color === 'light' && 'stroke-gray-100 fill-white',
-                ]), style: (_b = {
-                        transform: "rotate(" + arrowRotate + "deg)",
-                        filter: placementSide === 'bottom' || color === 'dark'
-                            ? undefined
-                            : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
-                    },
-                    _b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : -6) + "px",
-                    _b[arrowYRule] = (arrowY !== null && arrowY !== void 0 ? arrowY : -6) + "px",
-                    _b), fill: "none" },
-                React__namespace.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
-                React__namespace.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", "stroke-width": "2" })),
-            React__namespace.createElement("div", { className: clsx__default["default"]('rounded shadow border p-8px text-16px leading-24px min-w-160px text-center', [
-                    color === 'dark' &&
-                        'bg-gray-900 shadow-gray-800 border-gray-800',
-                    color === 'light' &&
-                        'bg-white shadow-gray-100 border-gray-100',
+            React__namespace.createElement("div", { className: clsx__default["default"]('rounded shadow border', [
+                    colors.background,
+                    colors.block,
                     (!x || !y) && 'invisible',
-                ]) }, popper))))));
+                ]) },
+                React__namespace.createElement("svg", { ref: arrowRef, viewBox: "0 0 48 48", width: "24", height: "24", className: clsx__default["default"]('absolute z-10', colors.svg), style: (_b = {
+                            transform: "rotate(" + arrowRotate + "deg)",
+                            filter: placementSide === 'bottom' || color === 'dark'
+                                ? undefined
+                                : 'drop-shadow(0 1px 1px rgba(225, 227, 237, .8))'
+                        },
+                        _b[arrowXRule] = (arrowX !== null && arrowX !== void 0 ? arrowX : -6) + "px",
+                        _b[arrowYRule] = (arrowY !== null && arrowY !== void 0 ? arrowY : -6) + "px",
+                        _b), fill: "none" },
+                    React__namespace.createElement("rect", { x: "0", y: "0", width: "48", height: "4", strokeWidth: "0" }),
+                    React__namespace.createElement("path", { d: "M 0 3 C 12 3 18 18 24 18 C 30 18 36 3 48 3", strokeWidth: "2" })),
+                React__namespace.createElement("div", { className: clsx__default["default"]('rounded text-16px leading-24px min-w-160px text-center p-8px relative z-20', colors.background) }, popper)))))));
 };
 
 module.exports = Tooltip;
-/* <windicss-keep class="container absolute stroke-gray-800 fill-gray-900 stroke-gray-100 fill-white rounded shadow border p-8px text-16px leading-24px min-w-160px text-center bg-gray-900 shadow-gray-800 border-gray-800 bg-white shadow-gray-100 border-gray-100 invisible"> */
+/* <windicss-keep class="container stroke-gray-100 fill-white text-gray-900 border-gray-100 shadow-gray-100 bg-white stroke-gray-800 fill-gray-900 text-white shadow-gray-800 border-gray-800 bg-gray-900 rounded shadow border invisible absolute z-10 text-16px leading-24px min-w-160px text-center p-8px relative z-20"> */
 
 //# sourceMappingURL=index.umd.js.map