@konce-pt/react 0.11.0 → 0.11.2

package/dist/button-group/button-group.d.ts

@@ -10,7 +10,7 @@ export interface KptButtonGroupProps<T> extends Omit<ComponentPropsWithRef<'div'
     disabled?: boolean;
     /** Wywoływane po wyborze — moment, w którym kontrolka staje się dotknięta. */
     onTouch?: () => void;
-    /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i `title`. */
+    /** Chowa etykiety — zostaje sama ikona, a `label` zasila `aria-label` i dymek `KptTooltip`. */
     iconOnly?: boolean;
     /** Propsy wrappera hosta (`.kpt-button-group-host`). */
     hostProps?: KptHostProps<'span'>;

package/dist/button-group/button-group.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
 import { KptIcon } from "../icon/icon.js";
+import { KptTooltip } from "../tooltip/tooltip.js";
 /**
  * Segmentowana grupa przycisków (toggle) — pojedynczy wybór z opcji.
  *
@@ -30,6 +31,6 @@ export function KptButtonGroup({ options = [], value, defaultValue, onValueChang
     };
     return (_jsx("span", { className: cn('kpt-button-group-host', hostClassName), ...hostRest, children: _jsx("div", { className: cn('kpt-button-group', className), role: "group", "data-size": size, "data-icon-only": iconOnly ? '' : undefined, ...rest, children: options.map((option) => {
                 const active = option.value === current;
-                return (_jsxs("button", { type: "button", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, "aria-pressed": active, "aria-label": iconOnly ? option.label : undefined, title: iconOnly ? option.label : undefined, onClick: () => select(option), children: [option.icon ? _jsx(KptIcon, { className: "kpt-button-group__icon", name: option.icon }) : null, iconOnly ? null : _jsx("span", { className: "kpt-button-group__label", children: option.label })] }, String(option.value)));
+                return (_jsx(KptTooltip, { text: iconOnly ? option.label : '', children: _jsxs("button", { type: "button", className: cn('kpt-button-group__item', active && 'is-active'), disabled: disabled || option.disabled, "aria-pressed": active, "aria-label": iconOnly ? option.label : undefined, onClick: () => select(option), children: [option.icon ? _jsx(KptIcon, { className: "kpt-button-group__icon", name: option.icon }) : null, iconOnly ? null : _jsx("span", { className: "kpt-button-group__label", children: option.label })] }) }, String(option.value)));
             }) }) }));
 }

package/dist/tooltip/tooltip.js

@@ -5,6 +5,63 @@ import { composeRefs } from "../internal/compose-refs.js";
 const FOCUSABLE = 'a[href], button, input, select, textarea, [tabindex]:not([tabindex="-1"])';
 /** Ile czasu ma wskaźnik na przejście z elementu na dymek, zanim ten zniknie (WCAG 1.4.13). */
 const HIDE_DELAY_MS = 120;
+/** Strona przeciwna i dwie boczne — kolejność prób, gdy zadana strona się nie nadaje. */
+const FALLBACKS = {
+    top: ['top', 'bottom', 'right', 'left'],
+    bottom: ['bottom', 'top', 'right', 'left'],
+    left: ['left', 'right', 'top', 'bottom'],
+    right: ['right', 'left', 'top', 'bottom'],
+};
+/**
+ * Ustawia dymek przy hoście, na pierwszej stronie z `FALLBACKS`, która się nadaje: dymek mieści się
+ * w oknie, a krawędź hosta od tej strony nie jest niczym przykryta (przyklejony nagłówek, menu, panel
+ * — sprawdzane `elementFromPoint` tuż przy krawędzi). Bez tego dymek przycisku wsuniętego pod
+ * nagłówek wyskakiwał nad nagłówkiem, odcięty od tego, co opisuje. Gdy żadna strona się nie nadaje,
+ * zostaje zadana. Na koniec dymek jest dociśnięty do okna z marginesem 4 px.
+ * Bliźniak tej funkcji żyje w drugim porcie — zmiany w obu naraz.
+ */
+function placeTooltip(host, tip, preferred) {
+    const r = host.getBoundingClientRect();
+    const t = tip.getBoundingClientRect();
+    const gap = 8;
+    const margin = 4;
+    const vw = document.documentElement.clientWidth;
+    const vh = document.documentElement.clientHeight;
+    const at = (side) => {
+        switch (side) {
+            case 'bottom':
+                return { top: r.bottom + gap, left: r.left + r.width / 2 - t.width / 2 };
+            case 'left':
+                return { top: r.top + r.height / 2 - t.height / 2, left: r.left - t.width - gap };
+            case 'right':
+                return { top: r.top + r.height / 2 - t.height / 2, left: r.right + gap };
+            default:
+                return { top: r.top - t.height - gap, left: r.left + r.width / 2 - t.width / 2 };
+        }
+    };
+    const fits = (side) => {
+        const { top, left } = at(side);
+        // Po osi poprzecznej dymek i tak zostanie dociśnięty do okna — liczy się tylko oś strony.
+        return side === 'top' || side === 'bottom'
+            ? top >= margin && top + t.height <= vh - margin
+            : left >= margin && left + t.width <= vw - margin;
+    };
+    // Punkt 2 px w głąb hosta przy krawędzi danej strony; widoczny, gdy na wierzchu jest host, jego
+    // potomek albo sam dymek (stoi jeszcze w poprzednim miejscu).
+    const exposed = (side) => {
+        const x = side === 'left' ? r.left + 2 : side === 'right' ? r.right - 2 : r.left + r.width / 2;
+        const y = side === 'top' ? r.top + 2 : side === 'bottom' ? r.bottom - 2 : r.top + r.height / 2;
+        if (x < 0 || y < 0 || x >= vw || y >= vh)
+            return false;
+        const hit = document.elementFromPoint(x, y);
+        return !hit || host.contains(hit) || tip.contains(hit);
+    };
+    const side = FALLBACKS[preferred].find((s) => fits(s) && exposed(s)) ?? preferred;
+    const { top, left } = at(side);
+    tip.dataset['side'] = side;
+    tip.style.top = `${Math.min(Math.max(margin, top), Math.max(margin, vh - t.height - margin))}px`;
+    tip.style.left = `${Math.min(Math.max(margin, left), Math.max(margin, vw - t.width - margin))}px`;
+}
 /**
  * Dymek podpowiedzi pokazywany na hover i focus. Lekki — element dodawany do `body`
  * i pozycjonowany względem dziecka.
@@ -60,30 +117,7 @@ export function KptTooltip({ text, position = 'top', onlyWhenTruncated = false,
         const host = hostRef.current;
         if (!tip || !host)
             return;
-        const r = host.getBoundingClientRect();
-        const t = tip.getBoundingClientRect();
-        const gap = 8;
-        let top;
-        let left;
-        switch (position) {
-            case 'bottom':
-                top = r.bottom + gap;
-                left = r.left + r.width / 2 - t.width / 2;
-                break;
-            case 'left':
-                top = r.top + r.height / 2 - t.height / 2;
-                left = r.left - t.width - gap;
-                break;
-            case 'right':
-                top = r.top + r.height / 2 - t.height / 2;
-                left = r.right + gap;
-                break;
-            default:
-                top = r.top - t.height - gap;
-                left = r.left + r.width / 2 - t.width / 2;
-        }
-        tip.style.top = `${Math.max(4, top)}px`;
-        tip.style.left = `${Math.max(4, left)}px`;
+        placeTooltip(host, tip, position);
     }, [position]);
     const onKeyDown = useCallback((event) => {
         if (event.key === 'Escape')

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@konce-pt/react",
-  "version": "0.11.0",
+  "version": "0.11.2",
   "description": "Open-source React 19 component library on the Koncept UI design system — the same kpt-* CSS layer and --kpt-* tokens as the Angular port. Zero runtime dependencies.",
   "license": "MIT",
   "author": "konce.pt",
@@ -65,17 +65,17 @@
     "leaflet": "^1.9.0"
   },
   "dependencies": {
-    "@konce-pt/chart": "0.11.0",
-    "@konce-pt/icons": "0.11.0",
-    "@konce-pt/chat": "0.11.0",
-    "@konce-pt/backdrop": "0.11.0",
-    "@konce-pt/table": "0.11.0",
-    "@konce-pt/datetime": "0.11.0",
-    "@konce-pt/roadmap": "0.11.0",
-    "@konce-pt/tokens": "0.11.0",
-    "@konce-pt/i18n": "0.11.0",
-    "@konce-pt/mention": "0.11.0",
-    "@konce-pt/map": "0.11.0"
+    "@konce-pt/chat": "0.11.2",
+    "@konce-pt/backdrop": "0.11.2",
+    "@konce-pt/chart": "0.11.2",
+    "@konce-pt/i18n": "0.11.2",
+    "@konce-pt/mention": "0.11.2",
+    "@konce-pt/table": "0.11.2",
+    "@konce-pt/roadmap": "0.11.2",
+    "@konce-pt/tokens": "0.11.2",
+    "@konce-pt/map": "0.11.2",
+    "@konce-pt/datetime": "0.11.2",
+    "@konce-pt/icons": "0.11.2"
   },
   "devDependencies": {
     "@types/react": "^19.2.0",