@uxf/ui 11.54.0 → 11.55.0

package/css/tooltip.css

@@ -1,7 +1,15 @@
 .uxf-tooltip {
-    @apply z-tooltip bg-lightHigh w-max max-w-[calc(100vw-20px)] rounded-lg p-3 text-white;
+    background-color: theme("colors.lightHigh");
+    border-radius: theme("borderRadius.lg");
+    color: theme("colors.white");
+    max-width: calc(100vw - 20px);
+    padding: theme("spacing.3");
+    width: max-content;
+    z-index: theme("zIndex.tooltip");
 
     &__arrow {
-        @apply z-tooltip bg-lightHigh rounded-sm;
+        background-color: theme("colors.lightHigh");
+        border-radius: theme("borderRadius.sm");
+        z-index: theme("zIndex.tooltip");
     }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@uxf/ui",
-    "version": "11.54.0",
+    "version": "11.55.0",
     "description": "",
     "publishConfig": {
         "access": "public"

package/tooltip/tooltip.stories.js

@@ -1,14 +1,38 @@
 "use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Default = Default;
-const react_1 = __importDefault(require("react"));
+const react_1 = __importStar(require("react"));
+const checkbox_input_1 = require("../checkbox-input");
 const chip_1 = require("../chip");
 const tooltip_1 = require("./tooltip");
 function Default() {
     const sides = ["top", "bottom", "bottom-start", "left", "right"];
-    return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" }, sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", key: placement, placement: placement },
-        react_1.default.createElement(chip_1.Chip, { color: "green" }, placement))))));
+    const [isPointingDisabled, setIsPointingDisabled] = (0, react_1.useState)(false);
+    return (react_1.default.createElement("div", { className: "grid h-96 place-items-center" },
+        react_1.default.createElement(checkbox_input_1.CheckboxInput, { label: "Disable pointing inside tooltip?", name: "isPointingDisabled", onChange: (value) => setIsPointingDisabled(Boolean(value)), value: isPointingDisabled }),
+        sides.map((placement) => (react_1.default.createElement(tooltip_1.Tooltip, { content: "My tooltip content", isPointingDisabled: isPointingDisabled, key: placement, placement: placement },
+            react_1.default.createElement(chip_1.Chip, { color: "green" }, placement))))));
 }

package/tooltip/use-tooltip.d.ts

@@ -2,6 +2,7 @@ import { Placement } from "@floating-ui/react";
 import { MutableRefObject } from "react";
 export interface TooltipOptions {
     arrowRef: MutableRefObject<null>;
+    isPointingDisabled?: boolean;
     offset?: number;
     placement?: Placement;
     shiftPadding?: number;

package/tooltip/use-tooltip.js

@@ -5,7 +5,7 @@ const react_1 = require("@floating-ui/react");
 const react_2 = require("react");
 function useTooltip(options) {
     var _a, _b;
-    const [open, setOpen] = (0, react_2.useState)(false);
+    const [isOpen, setIsOpen] = (0, react_2.useState)(false);
     const data = (0, react_1.useFloating)({
         middleware: [
             (0, react_1.offset)((_a = options.offset) !== null && _a !== void 0 ? _a : 16),
@@ -13,23 +13,27 @@ function useTooltip(options) {
             (0, react_1.shift)({ padding: (_b = options.shiftPadding) !== null && _b !== void 0 ? _b : 8 }),
             (0, react_1.arrow)({ element: options.arrowRef }),
         ],
-        open,
-        onOpenChange: setOpen,
+        open: isOpen,
+        onOpenChange: setIsOpen,
         placement: options.placement,
         whileElementsMounted: (reference, floating, update) => (0, react_1.autoUpdate)(reference, floating, update, {
             elementResize: typeof ResizeObserver !== "undefined",
         }),
     });
     const context = data.context;
-    const hover = (0, react_1.useHover)(context, { delay: 200, handleClose: (0, react_1.safePolygon)(), move: false });
+    const hover = (0, react_1.useHover)(context, {
+        delay: options.isPointingDisabled ? undefined : 200,
+        handleClose: options.isPointingDisabled ? null : (0, react_1.safePolygon)(),
+        move: false,
+    });
     const focus = (0, react_1.useFocus)(context);
     const role = (0, react_1.useRole)(context, { role: "tooltip" });
     const dismiss = (0, react_1.useDismiss)(context);
     const interactions = (0, react_1.useInteractions)([hover, focus, dismiss, role]);
     return (0, react_2.useMemo)(() => ({
-        open,
-        setOpen,
+        open: isOpen,
+        setOpen: setIsOpen,
         ...interactions,
         ...data,
-    }), [open, setOpen, interactions, data]);
+    }), [isOpen, setIsOpen, interactions, data]);
 }