@prokodo/ui 0.1.10 → 0.1.12

package/dist/components/select/Select.view.js

@@ -26,6 +26,7 @@ function SelectView({
   items,
   _clientState
 }) {
+  var _a;
   if (!(items == null ? void 0 : items.length)) return null;
   const isError = Boolean(errorText);
   const hasHelper = Boolean(helperText);
@@ -34,7 +35,6 @@ function SelectView({
   const helperId = hasHelper ? `${id}-helper` : void 0;
   const open = Boolean(_clientState == null ? void 0 : _clientState.open) ?? false;
   const btnRef = _clientState == null ? void 0 : _clientState.buttonRef;
-  const listRef = _clientState == null ? void 0 : _clientState.listRef;
   const selectedItems = Array.isArray(value) ? items.filter((i) => value.includes(i.value)) : items.filter((i) => i.value === value);
   const display = selectedItems.length === 0 ? /* @__PURE__ */ jsx(
     "span",
@@ -47,9 +47,9 @@ function SelectView({
       children: placeholder
     }
   ) : /* @__PURE__ */ jsx("span", { className: bem("button__inner", { expanded: open }), children: selectedItems.map((i, idx) => {
-    var _a;
+    var _a2;
     return /* @__PURE__ */ jsxs(Fragment, { children: [
-      Boolean(iconVisible) && ((_a = i.icon) == null ? void 0 : _a.call(i)),
+      Boolean(iconVisible) && ((_a2 = i.icon) == null ? void 0 : _a2.call(i)),
       i.label,
       idx < selectedItems.length - 1 && ", "
     ] }, i == null ? void 0 : i.label);
@@ -104,60 +104,23 @@ function SelectView({
               value: Array.isArray(value) ? value.join(",") : value ?? ""
             }
           ),
-          /* @__PURE__ */ jsxs(
-            "ul",
-            {
-              ref: listRef,
-              className: bem("listbox", { "is-open": open, "is-closed": !open }),
-              hidden: !open,
-              id: listId,
-              role: "listbox",
-              tabIndex: -1,
-              children: [
-                !Boolean(required) && !Boolean(multiple) && /* @__PURE__ */ jsx(
-                  "li",
-                  {
-                    "aria-selected": selectedItems.length === 0,
-                    className: bem("item", { selected: selectedItems.length === 0 }),
-                    role: "option",
-                    onClick: /* @__PURE__ */ __name(() => _clientState == null ? void 0 : _clientState.onOptionClick(null), "onClick"),
-                    onKeyDown: /* @__PURE__ */ __name(() => _clientState == null ? void 0 : _clientState.onOptionClick(null), "onKeyDown"),
-                    children: placeholder
-                  },
-                  "placeholder"
-                ),
-                items.map((opt) => {
-                  var _a;
-                  const selected = Array.isArray(value) ? value.includes(opt.value) : opt.value === value;
-                  return /* @__PURE__ */ jsxs(
-                    "li",
-                    {
-                      "aria-selected": selected,
-                      className: bem("item", { selected }),
-                      role: "option",
-                      onClick: /* @__PURE__ */ __name(() => _clientState == null ? void 0 : _clientState.onOptionClick(opt.value), "onClick"),
-                      onKeyDown: /* @__PURE__ */ __name(() => _clientState == null ? void 0 : _clientState.onOptionClick(opt.value), "onKeyDown"),
-                      children: [
-                        Boolean(multiple) && /* @__PURE__ */ jsx(
-                          "input",
-                          {
-                            readOnly: true,
-                            "aria-hidden": "true",
-                            className: bem("checkbox", { checked: selected }),
-                            defaultChecked: selected,
-                            type: "checkbox"
-                          }
-                        ),
-                        Boolean(iconVisible) && ((_a = opt.icon) == null ? void 0 : _a.call(opt)),
-                        opt.label
-                      ]
-                    },
-                    `${id}-${opt.value}`
-                  );
-                })
-              ]
-            }
-          )
+          (_a = _clientState == null ? void 0 : _clientState.renderListbox) == null ? void 0 : _a.call(_clientState, {
+            id: listId,
+            className: bem("listbox", { "is-open": open, "is-closed": !open }),
+            open,
+            required,
+            multiple,
+            placeholder,
+            items,
+            value: value ?? (Boolean(multiple) ? [] : ""),
+            onOptionClick: /* @__PURE__ */ __name((opt) => {
+              var _a2;
+              return (_a2 = _clientState == null ? void 0 : _clientState.onOptionClick) == null ? void 0 : _a2.call(_clientState, opt);
+            }, "onOptionClick"),
+            iconVisible,
+            bemItem: /* @__PURE__ */ __name((mods) => bem("item", mods), "bemItem"),
+            bemCheckbox: /* @__PURE__ */ __name((mods) => bem("checkbox", mods), "bemCheckbox")
+          })
         ] }),
         (isError || Boolean(helperText)) && /* @__PURE__ */ jsx(
           "div",

package/dist/components/switch/Switch.css

@@ -203,7 +203,7 @@
   left: 5px;
 }
 .prokodo-Switch__thumb--disabled {
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-600);
 }
 .prokodo-Switch__thumb {
   /* Center child icon */

package/dist/components/switch/Switch.module.css

@@ -203,7 +203,7 @@
   left: 5px;
 }
 .prokodo-Switch__thumb--disabled {
-  background-color: var(--color-grey-200);
+  background-color: var(--color-grey-600);
 }
 .prokodo-Switch__thumb {
   /* Center child icon */

package/dist/components/switch/Switch.view.js

@@ -20,7 +20,8 @@ const SwitchView = /* @__PURE__ */ __name(({
   className,
   onChangeInternal,
   onFocusInternal,
-  onBlurInternal
+  onBlurInternal,
+  ...props
 }) => {
   const hasLabel = typeof label === "string" && label.length > 0;
   return /* @__PURE__ */ jsxs("div", { className: bem(void 0, { [variant]: true }, className), children: [
@@ -58,6 +59,7 @@ const SwitchView = /* @__PURE__ */ __name(({
           /* @__PURE__ */ jsx(
             "input",
             {
+              ...props,
               "aria-checked": isChecked,
               "aria-disabled": disabled || void 0,
               "aria-required": required || void 0,

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

@@ -0,0 +1,373 @@
+"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;
+        (_a = triggerProps == null ? void 0 : triggerProps.onMouseLeave) == null ? void 0 : _a.call(triggerProps, e);
+        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,
+          children: content
+        }
+      ),
+      overlayRoot
+    ) : null
+  ] });
+}
+__name(TooltipClient, "TooltipClient");
+const Tooltip_client = memo(TooltipClient);
+export {
+  Tooltip_client as default
+};