@konce-pt/react 0.11.2 → 0.14.0

package/dist/megamenu/megamenu.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
@@ -5,11 +6,12 @@ import { KptOverlay } from "../internal/overlay.js";
 import { nextRovingIndex, rovingStop } from "../internal/roving.js";
 import { useKptId } from "../internal/use-id.js";
 import { KptIcon } from "../icon/icon.js";
+import { kptIsPlainClick } from "../shared/types.js";
 import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
 /**
- * Mega-menu — pozioma belka z szerokim, wielokolumnowym panelem.
- * Struktura: pozycja górna → `items` (kolumny) → `items` kolumny (odnośniki).
- * Pozycja górna bez kolumn działa jak akcja — wywołuje `onSelect` zamiast otwierać pusty panel.
+ * Mega-menu - pozioma belka z szerokim, wielokolumnowym panelem.
+ * Struktura: pozycja górna -> `items` (kolumny) -> `items` kolumny (odnośniki).
+ * Pozycja górna bez kolumn działa jak akcja - wywołuje `onSelect` zamiast otwierać pusty panel.
  *
  * Panel kotwiczy się do CAŁEJ belki, nie do pojedynczego przycisku: jest szeroki, więc ma
  * zaczynać się przy krawędzi menu, a nie przy przypadkowej pozycji, w którą kliknięto.
@@ -17,24 +19,25 @@ import { focusMenuEdge, handleMenuKeydown } from "../menu/menu-keys.js";
  * Klawiatura jak w `KptMenubar`: belka to jeden przystanek Tab, strzałki w lewo/prawo
  * i `Home`/`End` chodzą po pozycjach górnych, strzałka w dół (albo `Enter`/spacja) otwiera panel
  * z fokusem na pierwszym odnośniku. W panelu strzałki w górę/dół przechodzą po wszystkich
- * odnośnikach kolumna po kolumnie, w lewo/prawo — do panelu sąsiedniej pozycji, a `Escape`
+ * odnośnikach kolumna po kolumnie, w lewo/prawo - do panelu sąsiedniej pozycji, a `Escape`
  * zamyka panel i oddaje fokus belce.
  *
  * @example
  * <KptMegamenu items={items} onSelect={onSelect} />
  */
-export function KptMegamenu({ items = [], onSelect, ariaLabel, className, ...rest }) {
-    const barRef = useRef(null);
+export function KptMegamenu({ items = [], onSelect, onNavigate, ariaLabel, className, ...rest }) {
+    /** Pasek jako kotwica panelu - w stanie, bo czyta go render. */
+    const [bar, setBar] = useState(null);
     const panelRef = useRef(null);
     const buttonsRef = useRef([]);
     const [openIndex, setOpenIndex] = useState(null);
-    // Ostatnio skupiona pozycja górna — ona jest przystankiem Tab belki.
+    // Ostatnio skupiona pozycja górna - ona jest przystankiem Tab belki.
     const [focusIndex, setFocusIndex] = useState(0);
-    // Który odnośnik skupić po otwarciu — strzałka w górę otwiera „od końca”.
+    // Który odnośnik skupić po otwarciu - strzałka w górę otwiera "od końca".
     const focusEdge = useRef('first');
     const panelId = useKptId(undefined, 'kpt-megamenu');
     const disabled = items.map((item) => !!item.disabled);
-    // Pozycja z `url` (bez kolumn, niewyłączona) to `<a href>` — nawigację robi przeglądarka,
+    // Pozycja z `url` (bez kolumn, niewyłączona) to `<a href>` - nawigację robi przeglądarka,
     // więc działa nowa karta i podgląd adresu. `onSelect` i tak jest wołane.
     const isLink = (item) => !!item.url && !item.items?.length && !item.disabled;
     const tabStop = rovingStop(disabled, focusIndex);
@@ -99,7 +102,7 @@ export function KptMegamenu({ items = [], onSelect, ariaLabel, className, ...res
         if (next === null)
             return;
         event.preventDefault();
-        // Przy otwartym panelu przejście w bok pokazuje panel sąsiada — jak w menu aplikacji.
+        // Przy otwartym panelu przejście w bok pokazuje panel sąsiada - jak w menu aplikacji.
         if (openIndex === null)
             focusTop(next);
         else
@@ -122,18 +125,24 @@ export function KptMegamenu({ items = [], onSelect, ariaLabel, className, ...res
             focusTop(top);
         }
     };
-    return (_jsxs("div", { className: cn('kpt-megamenu-host', className), ...rest, children: [_jsx("div", { className: "kpt-megamenu", role: "menubar", "aria-orientation": "horizontal", "aria-label": ariaLabel || undefined, ref: barRef, children: items.map((item, index) => {
+    /** Zwykły klik w odnośnik -> `onNavigate` (Ctrl/Cmd/Shift, środkowy przycisk i `_blank` zostają natywne). */
+    const linkClick = (event, item) => {
+        if (item.url && onNavigate && kptIsPlainClick(event, event.currentTarget.target)) {
+            onNavigate({ item, url: item.url, event: event.nativeEvent });
+        }
+    };
+    return (_jsxs("div", { className: cn('kpt-megamenu-host', className), ...rest, children: [_jsx("div", { className: "kpt-megamenu", role: "menubar", "aria-orientation": "horizontal", "aria-label": ariaLabel || undefined, ref: setBar, children: items.map((item, index) => {
                     const hasMenu = !!item.items?.length;
                     if (isLink(item)) {
                         return (_jsxs("a", { ref: (el) => {
                                 buttonsRef.current[index] = el;
-                            }, className: "kpt-megamenu__top", role: "menuitem", href: item.url, tabIndex: index === tabStop ? 0 : -1, onClick: () => toggle(index, item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label })] }, index));
+                            }, className: "kpt-megamenu__top", role: "menuitem", href: item.url, tabIndex: index === tabStop ? 0 : -1, onClick: (event) => { linkClick(event, item); toggle(index, item); }, onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label })] }, index));
                     }
                     return (_jsxs("button", { ref: (el) => {
                             buttonsRef.current[index] = el;
                         }, type: "button", className: cn('kpt-megamenu__top', openIndex === index && 'is-open'), role: "menuitem", disabled: item.disabled, tabIndex: index === tabStop ? 0 : -1, "aria-haspopup": hasMenu ? 'menu' : undefined, "aria-expanded": hasMenu ? openIndex === index : undefined, "aria-controls": openIndex === index ? panelId : undefined, onClick: () => toggle(index, item), onFocus: () => setFocusIndex(index), onKeyDown: (event) => onTopKeyDown(event, index), children: [item.icon ? _jsx(KptIcon, { name: item.icon }) : null, _jsx("span", { children: item.label }), hasMenu ? _jsx(KptIcon, { name: "chevron-down", className: "kpt-megamenu__caret" }) : null] }, index));
-                }) }), _jsx(KptOverlay, { open: openIndex !== null, anchor: barRef.current, onClose: closeAll, children: _jsx("div", { ref: panelRef, className: "kpt-megamenu__panel", role: "menu", id: panelId, "aria-label": openIndex === null ? undefined : items[openIndex]?.label, onKeyDown: onPanelKeyDown, children: columns.map((column, columnIndex) => {
+                }) }), _jsx(KptOverlay, { open: openIndex !== null, anchor: bar, onClose: closeAll, children: _jsx("div", { ref: panelRef, className: "kpt-megamenu__panel", role: "menu", tabIndex: -1, id: panelId, "aria-label": openIndex === null ? undefined : items[openIndex]?.label, onKeyDown: onPanelKeyDown, children: columns.map((column, columnIndex) => {
                         const titleId = `${panelId}-col-${columnIndex}`;
-                        return (_jsxs("div", { className: "kpt-megamenu__column", role: "group", "aria-labelledby": column.label ? titleId : undefined, children: [column.label ? (_jsx("div", { className: "kpt-megamenu__col-title", role: "presentation", id: titleId, children: column.label })) : null, (column.items ?? []).map((link, linkIndex) => isLink(link) ? (_jsxs("a", { className: "kpt-megamenu__link", role: "menuitem", tabIndex: -1, href: link.url, onClick: () => pick(link), children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)) : (_jsxs("button", { type: "button", className: "kpt-megamenu__link", role: "menuitem", tabIndex: -1, disabled: link.disabled, onClick: () => pick(link), children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)))] }, columnIndex));
+                        return (_jsxs("div", { className: "kpt-megamenu__column", role: "group", "aria-labelledby": column.label ? titleId : undefined, children: [column.label ? (_jsx("div", { className: "kpt-megamenu__col-title", role: "presentation", id: titleId, children: column.label })) : null, (column.items ?? []).map((link, linkIndex) => isLink(link) ? (_jsxs("a", { className: "kpt-megamenu__link", role: "menuitem", tabIndex: -1, href: link.url, onClick: (event) => { linkClick(event, link); pick(link); }, children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)) : (_jsxs("button", { type: "button", className: "kpt-megamenu__link", role: "menuitem", tabIndex: -1, disabled: link.disabled, onClick: () => pick(link), children: [link.icon ? _jsx(KptIcon, { name: link.icon }) : null, _jsx("span", { children: link.label })] }, linkIndex)))] }, columnIndex));
                     }) }) })] }));
 }

package/dist/mention/llms.txt

@@ -14,19 +14,19 @@ Import: `import { KptMention, KptMentions } from '@konce-pt/react';`
       <span class="kpt-mentions__text"> about the estimate.</span>
     </span>
 
-## KptMention — props
-- `item`: `KptMentionItem` — the whole entry at once; the single props below win over it
-- `id`, `label`, `kind`: string — `kind` lands in `data-kind`, so it can be styled per type
-- `prefix`: string (default '@'), `href`: string | null — with `href` the mention is a link
-- `placement`, `openDelay` — passed to `KptPeek`
-- `disabled`: boolean — no card; the mention stays a plain highlighted word
-- `children`: ReactNode — the card
-
-## KptMentions — props
-- `text`: string — the content with `@id` or `@[Name with spaces](id)`
-- `items`: `readonly KptMentionItem[]` — entries the ids resolve against
-- `prefix`, `placement` — passed to every mention
-- `renderCard`: `(item, id, label) => ReactNode` — the card; without it mentions are plain words
+## KptMention - props
+- `item`: `KptMentionItem` - the whole entry at once; the single props below win over it
+- `id`, `label`, `kind`: string - `kind` lands in `data-kind`, so it can be styled per type
+- `prefix`: string (default '@'), `href`: string | null - with `href` the mention is a link
+- `placement`, `openDelay` - passed to `KptPeek`
+- `disabled`: boolean - no card; the mention stays a plain highlighted word
+- `children`: ReactNode - the card
+
+## KptMentions - props
+- `text`: string - the content with `@id` or `@[Name with spaces](id)`
+- `items`: `readonly KptMentionItem[]` - entries the ids resolve against
+- `prefix`, `placement` - passed to every mention
+- `renderCard`: `(item, id, label) => ReactNode` - the card; without it mentions are plain words
 
 ## Example
     <KptMentions
@@ -41,7 +41,7 @@ from `@konce-pt/mention` splits it into segments and the mention is an element t
 itself. An application does not have to push user-written content through a sanitizer to get
 mentions out of it.
 
-An id that is not on the list still renders — the label falls back to the id, because a note has to
+An id that is not on the list still renders - the label falls back to the id, because a note has to
 stay readable after someone leaves the team. Without `renderCard` the mention is a highlighted
 word, not a button: there is nothing to open, so it does not pretend otherwise.
 
@@ -53,7 +53,7 @@ list, arrows and Enter (or Tab) insert the mention as
 
 ## Tokens
 The mention is underlined with a **dotted** line: `--kpt-color-primary-border` at rest, darkening
-to `--kpt-color-primary` on hover and while the card is open. Dotted, not solid — a solid underline
+to `--kpt-color-primary` on hover and while the card is open. Dotted, not solid - a solid underline
 would read as a link, and a mention usually leads nowhere, it opens a card. Text
 `--kpt-color-primary`; a mention without a card `--kpt-color-text` + `--kpt-font-weight-medium` and
 no line at all, since there is nothing to promise. Focus ring `--kpt-color-focus-ring`. The card

package/dist/mention/mention.d.ts

@@ -4,11 +4,11 @@ import { type KptPeekPlacement } from '../peek/peek.tsx';
 export interface KptMentionProps extends Omit<ComponentPropsWithRef<'span'>, 'id' | 'prefix' | 'children'> {
     /** Cała pozycja naraz. Pojedyncze propsy poniżej mają nad nią priorytet. */
     item?: KptMentionItem | null;
-    /** Identyfikator zapisany w treści — nie zmienia się przy zmianie nazwy. */
+    /** Identyfikator zapisany w treści - nie zmienia się przy zmianie nazwy. */
     id?: string;
     /** Nazwa do pokazania; bez niej bierze się ją z `item`, a w ostateczności z `id`. */
     label?: string;
-    /** Rodzaj (osoba, zadanie, dokument) — ląduje w `data-kind`, więc da się go ostylować. */
+    /** Rodzaj (osoba, zadanie, dokument) - ląduje w `data-kind`, więc da się go ostylować. */
     kind?: string;
     /** Znak przed nazwą. Pusty łańcuch zostawia samą nazwę. */
     prefix?: string;
@@ -16,13 +16,13 @@ export interface KptMentionProps extends Omit<ComponentPropsWithRef<'span'>, 'id
     href?: string | null;
     placement?: KptPeekPlacement;
     openDelay?: number;
-    /** Wyłączona wzmianka nie otwiera karty — zostaje samym napisem. */
+    /** Wyłączona wzmianka nie otwiera karty - zostaje samym napisem. */
     disabled?: boolean;
     /** Treść karty. Bez niej wzmianka też zostaje napisem: nie ma czego pokazać. */
     children?: ReactNode;
 }
 /**
- * Wzmianka w tekście — `@ktoś` albo `@coś` jako element, na który da się najechać i zobaczyć
+ * Wzmianka w tekście - `@ktoś` albo `@coś` jako element, na który da się najechać i zobaczyć
  * kartę podglądu z resztą powiązań. Treść karty daje aplikacja przez `children`: biblioteka nie
  * wie, czym jest wzmiankowana rzecz, a osoba, zadanie i dokument wyglądają inaczej.
  *
@@ -32,7 +32,7 @@ export interface KptMentionProps extends Omit<ComponentPropsWithRef<'span'>, 'id
  *
  * @example
  * <KptMention id="anna.k" label="Anna Kowalska">
- *   <KptCard>Profil, projekty, kontakt…</KptCard>
+ *   <KptCard>Profil, projekty, kontakt...</KptCard>
  * </KptMention>
  */
 export declare function KptMention({ item, id, label, kind, prefix, href, placement, openDelay, disabled, children, className, ...rest }: Readonly<KptMentionProps>): import("react").JSX.Element;

package/dist/mention/mention.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { cn } from "../internal/cn.js";
 import { KptPeek } from "../peek/peek.js";
 /**
- * Wzmianka w tekście — `@ktoś` albo `@coś` jako element, na który da się najechać i zobaczyć
+ * Wzmianka w tekście - `@ktoś` albo `@coś` jako element, na który da się najechać i zobaczyć
  * kartę podglądu z resztą powiązań. Treść karty daje aplikacja przez `children`: biblioteka nie
  * wie, czym jest wzmiankowana rzecz, a osoba, zadanie i dokument wyglądają inaczej.
  *
@@ -12,7 +12,7 @@ import { KptPeek } from "../peek/peek.js";
  *
  * @example
  * <KptMention id="anna.k" label="Anna Kowalska">
- *   <KptCard>Profil, projekty, kontakt…</KptCard>
+ *   <KptCard>Profil, projekty, kontakt...</KptCard>
  * </KptMention>
  */
 export function KptMention({ item = null, id = '', label = '', kind = '', prefix = '@', href = null, placement = 'bottom', openDelay = 300, disabled = false, children, className, ...rest }) {

package/dist/mention/mentions.d.ts

@@ -13,7 +13,7 @@ export interface KptMentionsProps<T = unknown> extends Omit<ComponentPropsWithRe
     renderCard?: (item: KptMentionItem<T> | null, id: string, label: string) => ReactNode;
 }
 /**
- * Akapit ze wzmiankami — tekst wchodzi jako zwykły napis, a `@wzmianki` wychodzą z niego jako
+ * Akapit ze wzmiankami - tekst wchodzi jako zwykły napis, a `@wzmianki` wychodzą z niego jako
  * elementy z kartą podglądu. Rozbiciem zajmuje się `parseMentionText()` z `@konce-pt/mention`
  * (czysty TS z testami), więc oba porty czytają tę samą treść tak samo.
  *

package/dist/mention/mentions.js

@@ -3,7 +3,7 @@ import { parseMentionText } from '@konce-pt/mention';
 import { cn } from "../internal/cn.js";
 import { KptMention } from "./mention.js";
 /**
- * Akapit ze wzmiankami — tekst wchodzi jako zwykły napis, a `@wzmianki` wychodzą z niego jako
+ * Akapit ze wzmiankami - tekst wchodzi jako zwykły napis, a `@wzmianki` wychodzą z niego jako
  * elementy z kartą podglądu. Rozbiciem zajmuje się `parseMentionText()` z `@konce-pt/mention`
  * (czysty TS z testami), więc oba porty czytają tę samą treść tak samo.
  *

package/dist/menu/llms.txt

@@ -4,29 +4,29 @@ A dropdown menu. Items come from `items`, the trigger from the `trigger` prop.
 Import: `import { KptMenu, type KptMenuItem } from '@konce-pt/react';`
 
 ## DOM
-    <span class="kpt-menu-host"><span class="kpt-menu__trigger">…trigger…</span></span>
+    <span class="kpt-menu-host"><span class="kpt-menu__trigger">...trigger...</span></span>
     <!-- while open, in a portal on document.body: -->
     <div class="kpt-menu__panel" role="menu">
-      <div class="kpt-menu__header" role="presentation">…</div>
+      <div class="kpt-menu__header" role="presentation">...</div>
       <div class="kpt-menu__separator" role="separator"></div>
-      <button class="kpt-menu__item" role="menuitem">…</button>
+      <button class="kpt-menu__item" role="menuitem">...</button>
     </div>
 
 ## Props
 - `items`: `KptMenuItem<T>[]`
-- `trigger`: ReactNode — the element that opens the menu, rendered in place
-- `onSelect(item)` — the picked item; headers, separators and disabled items never arrive here
-- `open` / `defaultOpen` / `onOpenChange` — controlled or uncontrolled
+- `trigger`: ReactNode - the element that opens the menu, rendered in place
+- `onSelect(item)` - the picked item; headers, separators and disabled items never arrive here
+- `open` / `defaultOpen` / `onOpenChange` - controlled or uncontrolled
 - `className`, `ref` and every other `<span>` prop go to the host
 
 ## KptMenuItem
 `label`, `value`, `icon`, `description` (a second line), `badge` + `badgeVariant`,
-`avatar` (`{ src?, name?, icon? }` — the header row of a user menu), `header` (a non-clickable
+`avatar` (`{ src?, name?, icon? }` - the header row of a user menu), `header` (a non-clickable
 block instead of an item), `disabled`, `danger`, `separator`, plus `items` and `url` for the
 menubar and megamenu that build on the same shape.
 
 ## The panel is a portal
-It renders through the internal `KptOverlay`, so no overlay stylesheet is required — unlike the
+It renders through the internal `KptOverlay`, so no overlay stylesheet is required - unlike the
 Angular port, which stands on CDK. Position, backdrop and Escape behave the same.
 
 ## Examples
@@ -46,11 +46,11 @@ Angular port, which stands on CDK. Position, backdrop and Escape behave the same
 (the `danger` item), `--kpt-z-overlay`.
 
 ## Keyboard
-- `↓` / `↑` on the trigger open the menu with focus on the first / last item; a click, `Enter`
+- `ArrowDown` / `ArrowUp` on the trigger open the menu with focus on the first / last item; a click, `Enter`
   or `Space` opens it on the first.
-- Inside: `↓` / `↑` move between items and wrap around, `Home` / `End` jump to the ends;
+- Inside: `ArrowDown` / `ArrowUp` move between items and wrap around, `Home` / `End` jump to the ends;
   disabled items, separators and headers are skipped.
-- `Escape` and `Tab` close the menu, and so does picking an item — focus returns to the trigger.
+- `Escape` and `Tab` close the menu, and so does picking an item - focus returns to the trigger.
 - Items carry `tabindex="-1"` (roving focus), so an open menu is one Tab stop, not one per item.
 
 The logic lives in `menu-keys.ts`, shared with `KptSplitButton`; the other port has a twin file.
@@ -63,5 +63,5 @@ announcing them as actions.
 The trigger itself gets `aria-haspopup="menu"`, a live `aria-expanded` and, while open,
 `aria-controls` pointing at the panel. They are placed on the
 interactive control INSIDE the slot (the projected `<button>`/`<a>`), never on the
-`.kpt-menu__trigger` wrapper — giving that wrapper a role would create a nested control and a second
+`.kpt-menu__trigger` wrapper - giving that wrapper a role would create a nested control and a second
 tab stop, and state attributes on a roleless element violate `aria-allowed-attr`.

package/dist/menu/menu-item.d.ts

@@ -1,11 +1,11 @@
 import type { KptBadgeVariant } from '../badge/badge.tsx';
-/** Awatar wiersza nagłówkowego — te same dane, które przyjmuje `KptAvatar`. */
+/** Awatar wiersza nagłówkowego - te same dane, które przyjmuje `KptAvatar`. */
 export interface KptMenuItemAvatar {
     src?: string;
     name?: string;
     icon?: string;
 }
-/** Pozycja menu — wspólny kształt dla `KptMenu` i `KptContextMenu`. */
+/** Pozycja menu - wspólny kształt dla `KptMenu` i `KptContextMenu`. */
 export interface KptMenuItem<T = unknown> {
     label?: string;
     value?: T;
@@ -14,9 +14,9 @@ export interface KptMenuItem<T = unknown> {
     description?: string;
     /** Odznaka po prawej stronie pozycji (licznik lub krótka etykieta). */
     badge?: string | number;
-    /** Wariant odznaki — domyślnie `primary`. */
+    /** Wariant odznaki - domyślnie `primary`. */
     badgeVariant?: KptBadgeVariant;
-    /** Awatar po lewej — typowo w wierszu nagłówka menu użytkownika. */
+    /** Awatar po lewej - typowo w wierszu nagłówka menu użytkownika. */
     avatar?: KptMenuItemAvatar;
     /**
      * Wiersz nagłówkowy: nieklikalny blok tekstu zamiast pozycji menu. Mieści dane zalogowanego

package/dist/menu/menu-keys.d.ts

@@ -6,10 +6,10 @@
 export declare function nextMenuIndex(count: number, current: number, key: string): number | null;
 /** Aktywne pozycje panelu w kolejności DOM. */
 export declare function menuItems(panel: HTMLElement): HTMLElement[];
-/** Skupia pierwszą albo ostatnią aktywną pozycję — po otwarciu menu z klawiatury lub myszy. */
+/** Skupia pierwszą albo ostatnią aktywną pozycję - po otwarciu menu z klawiatury lub myszy. */
 export declare function focusMenuEdge(panel: HTMLElement, edge: 'first' | 'last'): void;
 /**
  * Obsługa klawisza w otwartym panelu. Zwraca `'close'`, gdy menu ma się zamknąć z powrotem
- * fokusu na przycisk (Escape, Tab), `true`, gdy klawisz przesunął fokus, `false` — inny klawisz.
+ * fokusu na przycisk (Escape, Tab), `true`, gdy klawisz przesunął fokus, `false` - inny klawisz.
  */
 export declare function handleMenuKeydown(panel: HTMLElement, event: KeyboardEvent): 'close' | boolean;

package/dist/menu/menu-keys.js

@@ -1,7 +1,7 @@
 /*
- * Klawiatura panelu menu (wzorzec WAI-ARIA „menu button”), wspólna dla `kpt-menu`
- * i `kpt-split-button` — oba mają ten sam panel z pozycjami `role="menuitem"`.
- * Port Angulara ma bliźniaczy plik `lib/menu/menu-keys.ts` — zmiana zachowania w obu.
+ * Klawiatura panelu menu (wzorzec WAI-ARIA "menu button"), wspólna dla `kpt-menu`
+ * i `kpt-split-button` - oba mają ten sam panel z pozycjami `role="menuitem"`.
+ * Port Angulara ma bliźniaczy plik `lib/menu/menu-keys.ts` - zmiana zachowania w obu.
  */
 /** Klawisze przesuwające fokus po pozycjach. */
 const NAV_KEYS = new Set(['ArrowDown', 'ArrowUp', 'Home', 'End']);
@@ -28,14 +28,14 @@ export function nextMenuIndex(count, current, key) {
 export function menuItems(panel) {
     return [...panel.querySelectorAll('[role="menuitem"]:not(:disabled)')];
 }
-/** Skupia pierwszą albo ostatnią aktywną pozycję — po otwarciu menu z klawiatury lub myszy. */
+/** Skupia pierwszą albo ostatnią aktywną pozycję - po otwarciu menu z klawiatury lub myszy. */
 export function focusMenuEdge(panel, edge) {
     const items = menuItems(panel);
     (edge === 'first' ? items[0] : items[items.length - 1])?.focus();
 }
 /**
  * Obsługa klawisza w otwartym panelu. Zwraca `'close'`, gdy menu ma się zamknąć z powrotem
- * fokusu na przycisk (Escape, Tab), `true`, gdy klawisz przesunął fokus, `false` — inny klawisz.
+ * fokusu na przycisk (Escape, Tab), `true`, gdy klawisz przesunął fokus, `false` - inny klawisz.
  */
 export function handleMenuKeydown(panel, event) {
     if (event.key === 'Escape' || event.key === 'Tab') {

package/dist/menu/menu-rows.js

@@ -1,3 +1,4 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { KptAvatar } from "../avatar/avatar.js";
 import { KptBadge } from "../badge/badge.js";

package/dist/menu/menu.d.ts

@@ -2,7 +2,7 @@ import { type ComponentPropsWithRef, type ReactNode } from 'react';
 import type { KptMenuItem } from './menu-item.ts';
 export interface KptMenuProps<T> extends Omit<ComponentPropsWithRef<'span'>, 'onSelect'> {
     items?: readonly KptMenuItem<T>[];
-    /** Element otwierający menu — renderowany w miejscu komponentu. */
+    /** Element otwierający menu - renderowany w miejscu komponentu. */
     trigger: ReactNode;
     /** Wybrana pozycja; pozycje `header`, `separator` i wyłączone nigdy tu nie trafiają. */
     onSelect?: (item: KptMenuItem<T>) => void;
@@ -13,7 +13,7 @@ export interface KptMenuProps<T> extends Omit<ComponentPropsWithRef<'span'>, 'on
 /**
  * Menu rozwijane (dropdown). Pozycje przez `items`, wyzwalacz przez prop `trigger`.
  *
- * Panel renderuje się w portalu (`KptOverlay`), więc nie potrzeba żadnych stylów overlay —
+ * Panel renderuje się w portalu (`KptOverlay`), więc nie potrzeba żadnych stylów overlay -
  * w odróżnieniu od portu Angulara, który stoi na CDK.
  *
  * @example

package/dist/menu/menu.js

@@ -1,5 +1,6 @@
+'use client';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useEffect, useRef } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { cn } from "../internal/cn.js";
 import { KptOverlay } from "../internal/overlay.js";
 import { useControllableState } from "../internal/use-controllable-state.js";
@@ -9,7 +10,7 @@ import { MenuRows } from "./menu-rows.js";
 /**
  * Menu rozwijane (dropdown). Pozycje przez `items`, wyzwalacz przez prop `trigger`.
  *
- * Panel renderuje się w portalu (`KptOverlay`), więc nie potrzeba żadnych stylów overlay —
+ * Panel renderuje się w portalu (`KptOverlay`), więc nie potrzeba żadnych stylów overlay -
  * w odróżnieniu od portu Angulara, który stoi na CDK.
  *
  * @example
@@ -17,8 +18,14 @@ import { MenuRows } from "./menu-rows.js";
  */
 export function KptMenu({ items = [], trigger, onSelect, open, defaultOpen = false, onOpenChange, className, ...rest }) {
     const triggerRef = useRef(null);
+    /** Kotwica panelu - w stanie, bo czyta ją render; ref zostaje dla handlerów. */
+    const [anchor, setAnchor] = useState(null);
+    const setTrigger = useCallback((element) => {
+        triggerRef.current = element;
+        setAnchor(element);
+    }, []);
     const panelRef = useRef(null);
-    /** Którą pozycję skupić po otwarciu — strzałka w górę na wyzwalaczu otwiera „od końca”. */
+    /** Którą pozycję skupić po otwarciu - strzałka w górę na wyzwalaczu otwiera "od końca". */
     const focusEdge = useRef('first');
     const panelId = useKptId(undefined, 'kpt-menu');
     const [isOpen, setOpen] = useControllableState({
@@ -29,7 +36,7 @@ export function KptMenu({ items = [], trigger, onSelect, open, defaultOpen = fal
     const close = useCallback(() => setOpen(false), [setOpen]);
     // ARIA idzie na kontrolkę wewnątrz slotu, nie na `.kpt-menu__trigger`. Trigger to zwykły
     // `<span>` opakowujący dowolny węzeł z propa `trigger`: nadanie mu `role="button"` zrobiłoby
-    // zagnieżdżoną kontrolkę i drugi tab stop. `cloneElement` też odpada — `trigger` bywa
+    // zagnieżdżoną kontrolkę i drugi tab stop. `cloneElement` też odpada - `trigger` bywa
     // komponentem, który nie przekazuje nieznanych propsów dalej na DOM.
     useEffect(() => {
         const control = findControl();
@@ -53,11 +60,11 @@ export function KptMenu({ items = [], trigger, onSelect, open, defaultOpen = fal
         });
         return () => cancelAnimationFrame(frame);
     }, [isOpen]);
-    /** Prawdziwa kontrolka w slocie — tam idą ARIA i powrót fokusu. */
+    /** Prawdziwa kontrolka w slocie - tam idą ARIA i powrót fokusu. */
     function findControl() {
         return triggerRef.current?.querySelector('button, a, [role="button"]') ?? null;
     }
-    /** Fokus wraca na kontrolkę — inaczej po zniknięciu panelu spadłby na `<body>`. */
+    /** Fokus wraca na kontrolkę - inaczej po zniknięciu panelu spadłby na `<body>`. */
     const closeAndRestoreFocus = () => {
         close();
         findControl()?.focus();
@@ -83,8 +90,8 @@ export function KptMenu({ items = [], trigger, onSelect, open, defaultOpen = fal
         onSelect?.(item);
         closeAndRestoreFocus();
     };
-    return (_jsxs("span", { className: cn('kpt-menu-host', className), ...rest, children: [_jsx("span", { className: "kpt-menu__trigger", ref: triggerRef, onClick: () => {
+    return (_jsxs("span", { className: cn('kpt-menu-host', className), ...rest, children: [_jsx("span", { className: "kpt-menu__trigger", ref: setTrigger, onClick: () => {
                     focusEdge.current = 'first';
                     setOpen(!isOpen);
-                }, onKeyDown: onTriggerKeyDown, children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: triggerRef.current, onClose: close, children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-menu__panel", role: "menu", onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-menu", onPick: pick }) }) })] }));
+                }, onKeyDown: onTriggerKeyDown, children: trigger }), _jsx(KptOverlay, { open: isOpen, anchor: anchor, onClose: close, children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-menu__panel", role: "menu", tabIndex: -1, onKeyDown: onPanelKeyDown, children: _jsx(MenuRows, { items: items, block: "kpt-menu", onPick: pick }) }) })] }));
 }

package/dist/menubar/llms.txt

@@ -8,21 +8,21 @@ Import: `import { KptMenubar } from '@konce-pt/react';`
       <div class="kpt-menubar" role="menubar" aria-orientation="horizontal" aria-label="Editor menu">
         <div class="kpt-menubar__group" role="none">
           <button class="kpt-menubar__top is-open" role="menuitem" tabindex="0"
-                  aria-haspopup="menu" aria-expanded="true" aria-controls="kpt-menubar-r1-menu-0">File …caret…</button>
+                  aria-haspopup="menu" aria-expanded="true" aria-controls="kpt-menubar-r1-menu-0">File ...caret...</button>
         </div>
       </div>
     </div>
     <!-- while open, in a portal: -->
-    <div class="kpt-menubar__dropdown" role="menu" id="kpt-menubar-r1-menu-0" aria-label="File">…items and separators…</div>
+    <div class="kpt-menubar__dropdown" role="menu" id="kpt-menubar-r1-menu-0" aria-label="File">...items and separators...</div>
 
 ## Props
-- `items`: `KptMenuItem<T>[]` — a top item's `items` become its dropdown
-- `onSelect(item)` — an action item, or a pick from a dropdown
-- `ariaLabel`: string — the bar's name for screen readers, e.g. "Editor menu"
+- `items`: `KptMenuItem<T>[]` - a top item's `items` become its dropdown
+- `onSelect(item)` - an action item, or a pick from a dropdown
+- `ariaLabel`: string - the bar's name for screen readers, e.g. "Editor menu"
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The dropdown is a portal
-It renders outside the bar, so a parent with `overflow: hidden` cannot clip it — the same benefit
+It renders outside the bar, so a parent with `overflow: hidden` cannot clip it - the same benefit
 the Angular port gets from CDK Overlay, without CDK. Each dropdown is anchored to its own top
 button, so it opens directly under the label it belongs to.
 
@@ -40,7 +40,7 @@ bar can mix menus and plain actions with no extra flag.
 
 ## Links (`url`)
 An entry with `url` and no children (and not disabled) renders as a real `<a href>` with the same
-look, so the browser handles navigation — opening in a new tab, the status-bar preview. `onSelect`
+look, so the browser handles navigation - opening in a new tab, the status-bar preview. `onSelect`
 still fires before the browser follows the link.
 
 ## Tokens
@@ -51,7 +51,7 @@ still fires before the browser follows the link.
 The bar is `role="menubar"` (`aria-orientation="horizontal"`, named by `ariaLabel`), top items and
 dropdown rows are `role="menuitem"`, separators carry `role="separator"`. Top items with a dropdown
 carry `aria-haspopup="menu"`, `aria-expanded` and, while open, `aria-controls`. The bar is a plain
-`<div>`, not `<nav>` — wrap it in your own `<nav aria-label="…">` when it is the site navigation.
+`<div>`, not `<nav>` - wrap it in your own `<nav aria-label="...">` when it is the site navigation.
 
 ## Keyboard
 The bar is a single `Tab` stop (roving `tabindex`), following the WAI-ARIA menubar pattern.
@@ -60,3 +60,14 @@ The bar is a single `Tab` stop (roving `tabindex`), following the WAI-ARIA menub
   its first row, `ArrowUp` on its last one.
 - In a dropdown: `ArrowDown`/`ArrowUp`/`Home`/`End` move between rows, `ArrowLeft`/`ArrowRight`
   open the neighbouring dropdown, `Escape` and `Tab` close it and return focus to the top item.
+
+## Router
+Links are plain `<a href>`, so without a router a click reloads the page. `onNavigate` fires on a plain
+click (left button, no Ctrl/Cmd/Shift, no `target="_blank"`) with `{ item, url, event }`: call
+`event.preventDefault()` and navigate with your router. Modified clicks stay native (a new tab, a new
+window). The library depends on no router.
+
+    <KptMenubar items={items} onNavigate={({ event, url }) => { event.preventDefault(); navigate(url); }} />
+
+## When to use it
+The `menubar`/`menu` roles switch a screen reader into application mode: page navigation by headings and links stops, and arrow keys are expected. That fits an application menu (File, Edit, View) or a large product menu. For plain site navigation (a few links in a header) the WAI-ARIA APG recommends the disclosure pattern instead - a `<nav>` with buttons carrying `aria-expanded` and ordinary link lists - which you can build from `kpt-button` and lists. The menu does not render a third level: nested `items` of a submenu item are ignored.

package/dist/menubar/menubar.d.ts

@@ -1,23 +1,29 @@
 import { type ComponentPropsWithRef } from 'react';
+import { type KptNavigateEvent } from '../shared/types.ts';
 import type { KptMenuItem } from '../menu/menu-item.ts';
 export interface KptMenubarProps<T> extends Omit<ComponentPropsWithRef<'div'>, 'onSelect'> {
     items?: readonly KptMenuItem<T>[];
     onSelect?: (item: KptMenuItem<T>) => void;
-    /** Nazwa belki dla czytników ekranu, np. „Menu edytora”. */
+    /**
+     * Zwykły klik w pozycję z `url`. Aplikacja z routerem woła `event.preventDefault()` i nawiguje
+     * sama - bez tego `<a href>` przeładowuje stronę.
+     */
+    onNavigate?: (event: KptNavigateEvent<KptMenuItem<T>>) => void;
+    /** Nazwa belki dla czytników ekranu, np. "Menu edytora". */
     ariaLabel?: string;
 }
 /**
  * Pozioma belka menu z rozwijanymi pod-menu. Pozycja bez `items` działa jak akcja lub link.
  *
- * Pod-menu renderuje się w portalu, więc rodzic z `overflow: hidden` go nie przycina — to ta sama
+ * Pod-menu renderuje się w portalu, więc rodzic z `overflow: hidden` go nie przycina - to ta sama
  * korzyść, dla której port Angulara sięga po CDK Overlay, tylko bez CDK.
  *
- * Klawiatura według wzorca WAI-ARIA „menubar”: belka to jeden przystanek Tab, strzałki w lewo/prawo
+ * Klawiatura według wzorca WAI-ARIA "menubar": belka to jeden przystanek Tab, strzałki w lewo/prawo
  * i `Home`/`End` chodzą po pozycjach górnych, strzałka w dół (albo `Enter`/spacja) otwiera
- * pod-menu z fokusem na pierwszej pozycji, w górę — na ostatniej. W otwartym pod-menu strzałki
+ * pod-menu z fokusem na pierwszej pozycji, w górę - na ostatniej. W otwartym pod-menu strzałki
  * w lewo/prawo przechodzą do sąsiedniego, a `Escape` zamyka je i oddaje fokus belce.
  *
  * @example
  * <KptMenubar items={items} onSelect={onSelect} />
  */
-export declare function KptMenubar<T>({ items, onSelect, ariaLabel, className, ...rest }: Readonly<KptMenubarProps<T>>): import("react").JSX.Element;
+export declare function KptMenubar<T>({ items, onSelect, onNavigate, ariaLabel, className, ...rest }: Readonly<KptMenubarProps<T>>): import("react").JSX.Element;