@prokodo/ui 0.1.11 → 0.1.13

package/dist/components/tooltip/Tooltip.client.js

@@ -0,0 +1,382 @@
+"use client";
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import { memo, useState, useRef, useCallback, useMemo, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+import { create } from "../../helpers/bem.js";
+import styles from "./Tooltip.module.scss.js";
+import { TooltipView } from "./Tooltip.view.js";
+const bem = create(styles, "Tooltip");
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+__name(clamp, "clamp");
+function getOverlayRoot(id, zIndex) {
+  let el = document.getElementById(id);
+  if (!el) {
+    el = document.createElement("div");
+    el.id = id;
+    document.body.appendChild(el);
+  }
+  el.style.position = "fixed";
+  el.style.left = "0";
+  el.style.top = "0";
+  el.style.width = "0";
+  el.style.height = "0";
+  el.style.pointerEvents = "none";
+  el.style.zIndex = String(zIndex);
+  return el;
+}
+__name(getOverlayRoot, "getOverlayRoot");
+function opposite(p) {
+  if (p === "top") return "bottom";
+  if (p === "bottom") return "top";
+  if (p === "left") return "right";
+  return "left";
+}
+__name(opposite, "opposite");
+function perpendicular(p) {
+  if (p === "top" || p === "bottom") return ["right", "left"];
+  return ["top", "bottom"];
+}
+__name(perpendicular, "perpendicular");
+function fitsPlacement(args) {
+  const {
+    placement,
+    anchorX,
+    anchorY,
+    triggerRect,
+    bubbleSize,
+    gutter,
+    offset,
+    arrowSize
+  } = args;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const need = offset + arrowSize;
+  let left = 0;
+  let top = 0;
+  if (placement === "top") {
+    left = anchorX - bubbleSize.w / 2;
+    top = triggerRect.top - need - bubbleSize.h;
+  } else if (placement === "bottom") {
+    left = anchorX - bubbleSize.w / 2;
+    top = triggerRect.bottom + need;
+  } else if (placement === "left") {
+    left = triggerRect.left - need - bubbleSize.w;
+    top = anchorY - bubbleSize.h / 2;
+  } else {
+    left = triggerRect.right + need;
+    top = anchorY - bubbleSize.h / 2;
+  }
+  const right = left + bubbleSize.w;
+  const bottom = top + bubbleSize.h;
+  return left >= gutter && right <= vw - gutter && top >= gutter && bottom <= vh - gutter;
+}
+__name(fitsPlacement, "fitsPlacement");
+function choosePlacement(args) {
+  const { preferred, preventOverflow } = args;
+  if (!preventOverflow) return preferred;
+  const tryOrder = [
+    preferred,
+    opposite(preferred),
+    ...perpendicular(preferred)
+  ];
+  for (const p of tryOrder) {
+    if (fitsPlacement({ ...args, placement: p })) return p;
+  }
+  return preferred;
+}
+__name(choosePlacement, "choosePlacement");
+function computeFixedPosition(args) {
+  const { placement, anchorX, anchorY, bubbleSize, gutter, offset, arrowSize } = args;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  const need = offset + arrowSize;
+  let x = 0;
+  let y = 0;
+  if (placement === "top") {
+    x = anchorX - bubbleSize.w / 2;
+    y = anchorY - need - bubbleSize.h;
+  } else if (placement === "bottom") {
+    x = anchorX - bubbleSize.w / 2;
+    y = anchorY + need;
+  } else if (placement === "left") {
+    x = anchorX - need - bubbleSize.w;
+    y = anchorY - bubbleSize.h / 2;
+  } else {
+    x = anchorX + need;
+    y = anchorY - bubbleSize.h / 2;
+  }
+  const clampedX = clamp(x, gutter, vw - gutter - bubbleSize.w);
+  const clampedY = clamp(y, gutter, vh - gutter - bubbleSize.h);
+  const pad = 12;
+  if (placement === "top" || placement === "bottom") {
+    const rawArrowX = anchorX - clampedX;
+    const arrowX = clamp(
+      rawArrowX,
+      arrowSize + pad,
+      bubbleSize.w - arrowSize - pad
+    );
+    return { x: clampedX, y: clampedY, arrowX };
+  }
+  const rawArrowY = anchorY - clampedY;
+  const arrowY = clamp(
+    rawArrowY,
+    arrowSize + pad,
+    bubbleSize.h - arrowSize - pad
+  );
+  return { x: clampedX, y: clampedY, arrowY };
+}
+__name(computeFixedPosition, "computeFixedPosition");
+function TooltipClient(props) {
+  const {
+    anchor = "element",
+    content,
+    preventOverflow = true,
+    // Portal defaults.
+    portal = true,
+    overlayRootId = "pk-overlays",
+    zIndex = 2147483647,
+    offset = 6,
+    mobileBreakpoint = 960,
+    // Open logic.
+    open: controlledOpen,
+    defaultOpen,
+    onOpenChange,
+    delay = 120,
+    closeDelay = 80,
+    openOnHover = true,
+    openOnFocus = true,
+    disabled,
+    // View.
+    triggerProps,
+    placement = "top",
+    tooltipClassName,
+    ...rest
+  } = props;
+  const isControlled = controlledOpen !== void 0;
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(
+    Boolean(defaultOpen)
+  );
+  const open = isControlled ? Boolean(controlledOpen) : uncontrolledOpen;
+  const lastPointer = useRef(null);
+  const triggerRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const [bubbleStyle, setBubbleStyle] = useState(
+    void 0
+  );
+  const [effectivePlacement, setEffectivePlacement] = useState(placement);
+  const openTimer = useRef(null);
+  const closeTimer = useRef(null);
+  const clearTimers = useCallback(() => {
+    if (openTimer.current != null) window.clearTimeout(openTimer.current);
+    if (closeTimer.current != null) window.clearTimeout(closeTimer.current);
+    openTimer.current = null;
+    closeTimer.current = null;
+  }, []);
+  const setOpen = useCallback(
+    (next) => {
+      if (disabled) return;
+      if (!isControlled) setUncontrolledOpen(next);
+      onOpenChange == null ? void 0 : onOpenChange(next);
+    },
+    [disabled, isControlled, onOpenChange]
+  );
+  const scheduleOpen = useCallback(() => {
+    if (disabled) return;
+    clearTimers();
+    if (delay <= 0) return setOpen(true);
+    openTimer.current = window.setTimeout(() => setOpen(true), delay);
+  }, [clearTimers, delay, disabled, setOpen]);
+  const scheduleClose = useCallback(() => {
+    clearTimers();
+    if (closeDelay <= 0) return setOpen(false);
+    closeTimer.current = window.setTimeout(() => setOpen(false), closeDelay);
+  }, [clearTimers, closeDelay, setOpen]);
+  const mergedTriggerProps = useMemo(
+    () => ({
+      ...triggerProps,
+      onMouseEnter: openOnHover ? (e) => {
+        var _a;
+        (_a = triggerProps == null ? void 0 : triggerProps.onMouseEnter) == null ? void 0 : _a.call(triggerProps, e);
+        if (anchor === "pointer")
+          lastPointer.current = { x: e.clientX, y: e.clientY };
+        scheduleOpen();
+      } : triggerProps == null ? void 0 : triggerProps.onMouseEnter,
+      onMouseLeave: openOnHover ? (e) => {
+        var _a, _b;
+        (_a = triggerProps == null ? void 0 : triggerProps.onMouseLeave) == null ? void 0 : _a.call(triggerProps, e);
+        const nextTarget = e.relatedTarget;
+        if (nextTarget && ((_b = bubbleRef.current) == null ? void 0 : _b.contains(nextTarget))) return;
+        if (anchor === "pointer") lastPointer.current = null;
+        scheduleClose();
+      } : triggerProps == null ? void 0 : triggerProps.onMouseLeave,
+      onMouseMove: anchor === "pointer" ? (e) => {
+        var _a;
+        (_a = triggerProps == null ? void 0 : triggerProps.onMouseMove) == null ? void 0 : _a.call(triggerProps, e);
+        lastPointer.current = { x: e.clientX, y: e.clientY };
+      } : triggerProps == null ? void 0 : triggerProps.onMouseMove,
+      onFocus: openOnFocus ? (e) => {
+        var _a;
+        (_a = triggerProps == null ? void 0 : triggerProps.onFocus) == null ? void 0 : _a.call(triggerProps, e);
+        scheduleOpen();
+      } : triggerProps == null ? void 0 : triggerProps.onFocus,
+      onBlur: openOnFocus ? (e) => {
+        var _a;
+        (_a = triggerProps == null ? void 0 : triggerProps.onBlur) == null ? void 0 : _a.call(triggerProps, e);
+        scheduleClose();
+      } : triggerProps == null ? void 0 : triggerProps.onBlur,
+      onKeyDown: /* @__PURE__ */ __name((e) => {
+        var _a, _b, _c;
+        (_a = triggerProps == null ? void 0 : triggerProps.onKeyDown) == null ? void 0 : _a.call(triggerProps, e);
+        if (e.key === "Escape") {
+          clearTimers();
+          setOpen(false);
+          (_c = (_b = e.currentTarget) == null ? void 0 : _b.blur) == null ? void 0 : _c.call(_b);
+        }
+      }, "onKeyDown")
+    }),
+    [
+      triggerProps,
+      openOnHover,
+      openOnFocus,
+      scheduleOpen,
+      scheduleClose,
+      clearTimers,
+      setOpen,
+      anchor
+    ]
+  );
+  const portalBubbleClassBase = useMemo(
+    () => bem("bubble", void 0, tooltipClassName),
+    [tooltipClassName]
+  );
+  const portalBubbleClassFinal = useMemo(
+    () => bem(
+      "bubble",
+      { open: Boolean(open && bubbleStyle), [effectivePlacement]: true },
+      tooltipClassName
+    ),
+    [open, bubbleStyle, effectivePlacement, tooltipClassName]
+  );
+  const compute = useCallback(() => {
+    if (!portal || !open || disabled) return;
+    const triggerEl = triggerRef.current;
+    const bubbleEl = bubbleRef.current;
+    if (!triggerEl || !bubbleEl) return;
+    const anchorEl = triggerEl.querySelector("[data-tooltip-anchor]") ?? triggerEl;
+    const gutter = 8;
+    const arrowSize = 8;
+    const triggerRect = anchorEl.getBoundingClientRect();
+    const bubbleSize = {
+      w: bubbleEl.offsetWidth,
+      h: bubbleEl.offsetHeight
+    };
+    if (!bubbleSize.w || !bubbleSize.h) return;
+    const isMobile = window.innerWidth < mobileBreakpoint;
+    const preferred = isMobile && (placement === "left" || placement === "right") ? "top" : placement;
+    const ar = anchorEl.getBoundingClientRect();
+    const anchorX = ar.left + ar.width / 2;
+    const anchorY = ar.top + ar.height / 2;
+    const chosen = choosePlacement({
+      preferred,
+      anchorX,
+      anchorY,
+      triggerRect,
+      bubbleSize,
+      gutter,
+      offset,
+      arrowSize,
+      preventOverflow
+    });
+    const { x, y, arrowX, arrowY } = computeFixedPosition({
+      placement: chosen,
+      anchorX,
+      anchorY,
+      bubbleSize,
+      gutter,
+      offset,
+      arrowSize
+    });
+    setEffectivePlacement(chosen);
+    setBubbleStyle({
+      ["--pk-tt-x"]: `${x}px`,
+      ["--pk-tt-y"]: `${y}px`,
+      ["--pk-tt-arrow-x"]: arrowX != null ? `${arrowX}px` : void 0,
+      ["--pk-tt-arrow-y"]: arrowY != null ? `${arrowY}px` : void 0,
+      ["--pk-tt-z"]: String(zIndex)
+    });
+  }, [
+    portal,
+    open,
+    disabled,
+    placement,
+    preventOverflow,
+    offset,
+    zIndex,
+    mobileBreakpoint
+  ]);
+  useLayoutEffect(() => {
+    if (!portal || !open) return;
+    setBubbleStyle(void 0);
+    const raf1 = requestAnimationFrame(() => {
+      requestAnimationFrame(() => compute());
+    });
+    const onResize = /* @__PURE__ */ __name(() => compute(), "onResize");
+    const onScroll = /* @__PURE__ */ __name(() => compute(), "onScroll");
+    window.addEventListener("resize", onResize);
+    window.addEventListener("scroll", onScroll, true);
+    return () => {
+      cancelAnimationFrame(raf1);
+      window.removeEventListener("resize", onResize);
+      window.removeEventListener("scroll", onScroll, true);
+    };
+  }, [portal, open, compute]);
+  const overlayRoot = typeof document !== "undefined" && portal ? getOverlayRoot(overlayRootId, zIndex) : null;
+  const portalOpen = open && Boolean(bubbleStyle);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      TooltipView,
+      {
+        ...rest,
+        __open: portal ? portalOpen : open,
+        __placement: portal ? effectivePlacement : placement,
+        __renderVisualBubble: !portal,
+        __triggerRef: triggerRef,
+        content,
+        disabled,
+        placement,
+        tooltipClassName,
+        triggerProps: mergedTriggerProps
+      }
+    ),
+    portal && !disabled && overlayRoot ? createPortal(
+      /* @__PURE__ */ jsx(
+        "span",
+        {
+          ref: bubbleRef,
+          "aria-hidden": open === void 0 ? void 0 : !open,
+          role: "tooltip",
+          style: bubbleStyle,
+          className: bubbleStyle ? portalBubbleClassFinal : portalBubbleClassBase,
+          onMouseEnter: openOnHover ? () => {
+            clearTimers();
+            setOpen(true);
+          } : void 0,
+          onMouseLeave: openOnHover ? () => {
+            scheduleClose();
+          } : void 0,
+          children: content
+        }
+      ),
+      overlayRoot
+    ) : null
+  ] });
+}
+__name(TooltipClient, "TooltipClient");
+const Tooltip_client = memo(TooltipClient);
+export {
+  Tooltip_client as default
+};

package/dist/components/tooltip/Tooltip.css

@@ -0,0 +1,242 @@
+/* stylelint-disable */
+/**
+ * Calculates a rem-based value by a given pixel size.
+ */
+/* stylelint-disable */
+/**
+ * Applies flex-column and gap.
+ */
+/*
+    As example (light, primary)
+    See defined modes in designsystem/config/gradients
+*/
+/**
+ * Mixin that renders a media query that target screens that are larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that are smaller than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens in between the given range.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height larger than the
+ * given size.
+ */
+/**
+ * Mixin that renders a media query that target screens that have height smaller than the
+ * given size.
+ */
+/* stylelint-disable */
+/* M3/Elevation Light/1 */
+/* M3/Elevation Light/2 */
+/* M3/Elevation/5 */
+/* M3/Elevation/1 Text */
+/* Inner elevations */
+/* stylelint-disable */
+/**
+ * Visually hides an element but not removes them for screen readers.
+ */
+/**
+ * The inverse of the `hidden` helper to reset a previously hidden element to be
+ * visible for users.
+ */
+/**
+ * Creates a selector for :hover effects depending on the current user input
+ * device. If the input device is a mouse, this hover effect will appear.
+ * Keyboard and touch inputs are ignored.
+ *
+ * Example usage:
+ * .link {
+ *   color: blue;
+ *
+ *   @include when-hovered() {
+ *     color: green;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :active effects depending on the current user input
+ * device. The state applies when the input device is a mouse or keyboard. Touch
+ * devices will not show a pressed state.
+ *
+ * Example usage:
+ * .link {
+ *   box-shadow: none;
+ *
+ *   @include when-pressed() {
+ *     box-shadow: inset 0 2px 4px grey;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus effects depending on the current user input
+ * device. When the user navigates using a keyboard, the focus effect defined in
+ * here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   text-decoration: none;
+ *
+ *   @include when-focused() {
+ *     text-decoration: underline;
+ *   }
+ * }
+ */
+/**
+ * Creates a selector for :focus-within effects depending on the current user
+ * input device. When the user navigates using a keyboard, the focus effect
+ * defined in here is applied. For other input devices they don't show up.
+ *
+ * Example usage:
+ * .link {
+ *   img {
+ *     opacity: 0.75;
+ *
+ *     @include when-focused-within() {
+ *       opacity: 1;
+ *     }
+ *   }
+ * }
+ */
+/**
+ * Wrapper for media query "prefers-reduced-motion".
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * This helper hides the outline but still makes it visible for
+ * Windows high-contrast users. Use this instead of `outline: 0;`.
+ */
+/**
+ * Renders an alternative, but application consistent focus-ring.
+ */
+/**
+ * Specifies the outer layout for all contents across breakpoints. Apply this
+ * mixin to the container element, to center the contents on the screen within
+ * the layout offsets.
+ */
+/**
+ * This mixin specifies basic text-styles for components that render a richtext
+ * content.
+ */
+.prokodo-Tooltip {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  /* Visually hidden described-by node (portal a11y). */
+  /* CSS-only fallback (only works for inline mode). */
+}
+.prokodo-Tooltip--disabled {
+  pointer-events: none;
+}
+.prokodo-Tooltip__sr {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  border: 0;
+  white-space: nowrap;
+}
+.prokodo-Tooltip__trigger {
+  width: -moz-max-content !important;
+  width: max-content !important;
+  flex: 0 0 auto !important;
+}
+.prokodo-Tooltip__bubble {
+  /* Make sizing measurable and stable. */
+  display: block;
+  position: fixed;
+  left: 0;
+  top: 0;
+  /* Position via CSS vars, but NO animated transform/scale */
+  transform: translate3d(var(--pk-tt-x, 0px), var(--pk-tt-y, 0px), 0);
+  /* Only opacity changes for animation */
+  will-change: opacity;
+  z-index: var(--pk-tt-z, 2147483647);
+  max-width: min(360px, 100vw - 16px);
+  white-space: normal;
+  overflow-wrap: anywhere;
+  padding: 0.25rem 0.5rem;
+  border-radius: 10px;
+  box-shadow: var(--elevation-2);
+  background: var(--color-grey-900);
+  color: var(--color-white);
+  opacity: 0;
+  visibility: hidden;
+  pointer-events: none;
+  /* fade only */
+  transition: opacity 120ms ease, visibility 120ms ease;
+  font-weight: 400;
+  font-size: 1rem;
+  font-family: var(--font-secondary), -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  font-style: normal;
+  line-height: 1.45;
+  letter-spacing: 0.03em;
+  text-transform: none;
+  text-align: left;
+  text-decoration: none;
+}
+@media screen and (min-width: 480px) {
+  .prokodo-Tooltip__bubble {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+@media screen and (min-width: 960px) {
+  .prokodo-Tooltip__bubble {
+    font-size: 0.875rem;
+    line-height: 1.4;
+  }
+}
+.prokodo-Tooltip__bubble--open {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+.prokodo-Tooltip__bubble::after {
+  content: "";
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+.prokodo-Tooltip__bubble--top::after {
+  left: var(--pk-tt-arrow-x, 50%);
+  top: 100%;
+  transform: translateX(-50%);
+  border-width: 8px 8px 0 8px;
+  border-color: var(--color-grey-900) transparent transparent transparent;
+}
+.prokodo-Tooltip__bubble--bottom::after {
+  left: var(--pk-tt-arrow-x, 50%);
+  bottom: 100%;
+  transform: translateX(-50%);
+  border-width: 0 8px 8px 8px;
+  border-color: transparent transparent var(--color-grey-900) transparent;
+}
+.prokodo-Tooltip__bubble--left::after {
+  top: var(--pk-tt-arrow-y, 50%);
+  left: 100%;
+  transform: translateY(-50%);
+  border-width: 8px 0 8px 8px;
+  border-color: transparent transparent transparent var(--color-grey-900);
+}
+.prokodo-Tooltip__bubble--right::after {
+  top: var(--pk-tt-arrow-y, 50%);
+  right: 100%;
+  transform: translateY(-50%);
+  border-width: 8px 8px 8px 0;
+  border-color: transparent var(--color-grey-900) transparent transparent;
+}
+.prokodo-Tooltip:hover .prokodo-Tooltip__bubble, .prokodo-Tooltip:focus-within .prokodo-Tooltip__bubble {
+  opacity: 1;
+  visibility: visible;
+}

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1,16 @@
+var __defProp = Object.defineProperty;
+var __name = (target, value) => __defProp(target, "name", { value, configurable: true });
+import { createIsland } from "../../helpers/createIsland.js";
+import TooltipServer from "./Tooltip.server.js";
+const Tooltip = createIsland({
+  name: "Tooltip",
+  Server: TooltipServer,
+  loadLazy: /* @__PURE__ */ __name(() => import("./Tooltip.client.js"), "loadLazy"),
+  // Hydrate only when you actually need JS timing/controlled state/etc.
+  isInteractive: /* @__PURE__ */ __name((p) => Boolean(
+    (p.portal ?? true) || p.preventOverflow || p.open !== void 0 || p.defaultOpen !== void 0 || typeof p.onOpenChange === "function" || typeof p.delay === "number" || typeof p.closeDelay === "number"
+  ), "isInteractive")
+});
+export {
+  Tooltip
+};