@konce-pt/react 0.8.3 → 0.9.0

package/dist/order-list/order-list.js

@@ -7,12 +7,12 @@ import { KptIcon } from "../icon/icon.js";
 const EMPTY = [];
 /**
  * OrderList — lista z ręcznym porządkowaniem. Klik zaznacza element, przyciski przesuwają go
- * w górę i w dół.
+ * w górę i w dół. Z `dragdrop` pozycje przestawia się także przeciąganiem.
  *
  * @example
- * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" renderItem={(t) => t.name} />
+ * <KptOrderList items={tasks} onItemsChange={setTasks} header="Kolejność" dragdrop renderItem={(t) => t.name} />
  */
-export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', renderItem, locale, dictionary, className, ...rest }) {
+export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, header = '', dragdrop = false, renderItem, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [list, setList] = useControllableState({
         value: items,
@@ -20,6 +20,12 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         onChange: onItemsChange,
     });
     const [selected, setSelected] = useState(null);
+    /** Indeks przeciąganej pozycji; `null` gdy nic nie jest przeciągane. */
+    const [dragIndex, setDragIndex] = useState(null);
+    /** Indeks pozycji pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+    const [overIndex, setOverIndex] = useState(null);
+    /** Kursor nad pustym obszarem listy — upuszczenie tam dopina na koniec. */
+    const [listOver, setListOver] = useState(false);
     const move = (dir) => {
         if (selected === null)
             return;
@@ -33,5 +39,64 @@ export function KptOrderList({ items, defaultItems = EMPTY, onItemsChange, heade
         // przesuwałoby sąsiada zamiast tego samego wpisu.
         setSelected(target);
     };
-    return (_jsx("div", { className: cn('kpt-order-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: "kpt-order-list__items", children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected'), onClick: () => setSelected(index), children: renderItem(item, index) }, index))) })] })] }) }));
+    const clearDrag = () => {
+        setDragIndex(null);
+        setOverIndex(null);
+        setListOver(false);
+    };
+    const onDragStart = (index, event) => {
+        if (!dragdrop)
+            return;
+        setDragIndex(index);
+        event.dataTransfer.setData('text/plain', String(index));
+        event.dataTransfer.effectAllowed = 'move';
+    };
+    const onDragOver = (index, event) => {
+        if (dragIndex === null)
+            return;
+        // Zatrzymujemy propagację, żeby `<ul>` nie uznał, że kursor jest nad pustym obszarem.
+        event.preventDefault();
+        event.stopPropagation();
+        setOverIndex(index);
+        setListOver(false);
+    };
+    const onDrop = (index, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const from = dragIndex;
+        clearDrag();
+        if (from === null || from === index)
+            return;
+        // Indeks celu liczony na tablicy sprzed usunięcia — element ląduje na pozycji tego,
+        // na który go upuszczono (ten sam wzór co przestawianie kolumn w KptDataTable).
+        const next = [...list];
+        const [moved] = next.splice(from, 1);
+        if (moved === undefined)
+            return;
+        next.splice(index, 0, moved);
+        setList(next);
+        setSelected(index);
+    };
+    const onListDragOver = (event) => {
+        if (dragIndex === null)
+            return;
+        event.preventDefault();
+        setListOver(true);
+        setOverIndex(null);
+    };
+    const onListDrop = (event) => {
+        event.preventDefault();
+        const from = dragIndex;
+        clearDrag();
+        if (from === null)
+            return;
+        const next = [...list];
+        const [moved] = next.splice(from, 1);
+        if (moved === undefined)
+            return;
+        next.push(moved);
+        setList(next);
+        setSelected(next.length - 1);
+    };
+    return (_jsx("div", { className: cn('kpt-order-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-order-list", children: [_jsxs("div", { className: "kpt-order-list__controls", children: [_jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.up'), onClick: () => move(-1), children: _jsx(KptIcon, { name: "arrow-up" }) }), _jsx("button", { type: "button", disabled: selected === null, "aria-label": t('orderList.down'), onClick: () => move(1), children: _jsx(KptIcon, { name: "arrow-down" }) })] }), _jsxs("div", { className: "kpt-order-list__panel", children: [header ? _jsx("div", { className: "kpt-order-list__header", children: header }) : null, _jsx("ul", { className: cn('kpt-order-list__items', listOver && 'is-dragover'), onDragOver: onListDragOver, onDragLeave: () => setListOver(false), onDrop: onListDrop, children: list.map((item, index) => (_jsx("li", { className: cn('kpt-order-list__item', selected === index && 'is-selected', dragIndex === index && 'is-dragging', dragdrop && 'kpt-order-list__item--draggable', overIndex === index && dragIndex !== index && 'kpt-order-list__item--dragover'), draggable: dragdrop || undefined, onClick: () => setSelected(index), onDragStart: (event) => onDragStart(index, event), onDragOver: (event) => onDragOver(index, event), onDragLeave: () => setOverIndex(null), onDrop: (event) => onDrop(index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index))) })] })] }) }));
 }

package/dist/peek/llms.txt

@@ -0,0 +1,42 @@
+# KptPeek (@konce-pt/react)
+
+A peek card — content tied to what you are looking at, shown without leaving the text. Hover opens
+it, the card itself is interactive, and a click pins it.
+Import: `import { KptPeek } from '@konce-pt/react';`
+
+## DOM
+    <span class="kpt-peek-host">
+      <a class="kpt-peek__trigger" aria-expanded="true" aria-controls="…">…trigger…</a>
+    </span>
+    <!-- while open, in a portal on document.body: -->
+    <div class="kpt-peek__panel" role="dialog" tabindex="-1" data-pinned>…children…</div>
+
+## Props
+- `trigger`: ReactNode — the element the card hangs on; a mention, an avatar, a chip, a link
+- `children`: ReactNode — the card content
+- `placement`: 'top' | 'bottom' (default 'bottom')
+- `openDelay`: number (default 300), `closeDelay`: number (default 200)
+- `disabled`: boolean — the card never opens; the trigger stays a plain link or button
+- `label`: string — the card's accessible name; without it the trigger's text is used
+- `onOpenChange`: `(open: boolean) => void` — the moment to fetch the card's data
+- `className`, `ref` and every other `<span>` prop go to the host
+
+## The props land on the trigger itself
+A valid element passed as `trigger` is cloned with the handlers and `aria-expanded` merged in, so
+the state sits on the element a screen reader actually reads — not on some `<span>` next to it.
+Anything else (a bare string) gets wrapped in a `<span>`.
+
+## Hover is not the only way in
+Hover opens after `openDelay` and leaving closes after `closeDelay` — the pointer needs time to
+travel from the trigger to the card, so entering the card cancels the close. Focus opens it with no
+delay. A click, Enter or a tap **pins** the card: it stays after the pointer leaves and focus moves
+inside it. That is the only route to the card's content where there is no hover at all. Escape
+closes it and hands focus back to the trigger; so does a pointer press outside.
+
+## Which of the three
+`KptTooltip` carries plain text and cannot be clicked. `KptPopover` opens on click and puts a
+backdrop over the page. `KptPeek` opens on hover, the card is interactive, and nothing is covered.
+
+## Tokens
+`--kpt-color-surface-raised`, `--kpt-color-border`, `--kpt-elevation-3`, `--kpt-color-focus-ring`,
+`--kpt-z-overlay`.

package/dist/peek/peek.d.ts

@@ -0,0 +1,35 @@
+import { type ComponentPropsWithRef, type ReactNode } from 'react';
+/** Z której strony wyzwalacza wychodzi karta. */
+export type KptPeekPlacement = 'top' | 'bottom';
+export interface KptPeekProps extends Omit<ComponentPropsWithRef<'span'>, 'content'> {
+    /** Element, na którym wisi karta — wzmianka, awatar, chip albo zwykły link. */
+    trigger: ReactNode;
+    /** Treść karty. */
+    children?: ReactNode;
+    placement?: KptPeekPlacement;
+    /** Zwłoka otwarcia po najechaniu (ms) — bez niej karty mrugają przy przejeżdżaniu przez tekst. */
+    openDelay?: number;
+    /** Zwłoka zamknięcia po zjeździe kursora (ms) — tyle jest na przejazd z wyzwalacza na kartę. */
+    closeDelay?: number;
+    /** Wyłączona karta nie otwiera się wcale; wyzwalacz zostaje zwykłym linkiem czy przyciskiem. */
+    disabled?: boolean;
+    /** Nazwa karty dla czytnika ekranu; bez niej bierze się tekst wyzwalacza. */
+    label?: string;
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * Karta podglądu pod kursorem — treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
+ * Tym różni się od sąsiadów: `KptTooltip` niesie sam tekst i nie da się w nim kliknąć,
+ * a `KptPopover` otwiera dopiero klik i zasłania stronę backdropem.
+ *
+ * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` — kursor musi mieć
+ * czas przejechać z wyzwalacza na kartę, więc najazd na kartę anuluje zamknięcie. Fokus otwiera
+ * kartę od razu, a klik, Enter albo dotyk **przypina** ją: karta zostaje mimo zjazdu kursora,
+ * a fokus wchodzi do środka. To jedyna droga do treści karty tam, gdzie hovera nie ma w ogóle.
+ *
+ * @example
+ * <KptPeek trigger={<a href="/ludzie/anna">@Anna Kowalska</a>}>
+ *   <KptCard>Profil, projekty, kontakt…</KptCard>
+ * </KptPeek>
+ */
+export declare function KptPeek({ trigger, children, placement, openDelay, closeDelay, disabled, label, onOpenChange, className, ...rest }: Readonly<KptPeekProps>): import("react").JSX.Element;

package/dist/peek/peek.js

@@ -0,0 +1,127 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, isValidElement, useCallback, useEffect, useId, useRef, useState, } from 'react';
+import { cn } from "../internal/cn.js";
+import { KptOverlay } from "../internal/overlay.js";
+import { mergeSlotProps } from "../internal/slot.js";
+/**
+ * Karta podglądu pod kursorem — treść powiązana z tym, na co się patrzy, bez opuszczania tekstu.
+ * Tym różni się od sąsiadów: `KptTooltip` niesie sam tekst i nie da się w nim kliknąć,
+ * a `KptPopover` otwiera dopiero klik i zasłania stronę backdropem.
+ *
+ * Hover pokazuje kartę po `openDelay`, zjazd kursora chowa ją po `closeDelay` — kursor musi mieć
+ * czas przejechać z wyzwalacza na kartę, więc najazd na kartę anuluje zamknięcie. Fokus otwiera
+ * kartę od razu, a klik, Enter albo dotyk **przypina** ją: karta zostaje mimo zjazdu kursora,
+ * a fokus wchodzi do środka. To jedyna droga do treści karty tam, gdzie hovera nie ma w ogóle.
+ *
+ * @example
+ * <KptPeek trigger={<a href="/ludzie/anna">@Anna Kowalska</a>}>
+ *   <KptCard>Profil, projekty, kontakt…</KptCard>
+ * </KptPeek>
+ */
+export function KptPeek({ trigger, children, placement = 'bottom', openDelay = 300, closeDelay = 200, disabled = false, label, onOpenChange, className, ...rest }) {
+    const hostRef = useRef(null);
+    const triggerRef = useRef(null);
+    const panelRef = useRef(null);
+    const timer = useRef(undefined);
+    const [open, setOpen] = useState(false);
+    /** Przypięta karta zostaje po zjeździe kursora — przypina ją klik, Enter albo dotyk. */
+    const [pinned, setPinned] = useState(false);
+    const panelId = useId();
+    const stop = useCallback(() => {
+        if (timer.current)
+            clearTimeout(timer.current);
+        timer.current = undefined;
+    }, []);
+    const schedule = useCallback((action, delay) => {
+        stop();
+        if (delay <= 0)
+            action();
+        else
+            timer.current = setTimeout(action, delay);
+    }, [stop]);
+    const show = useCallback(() => {
+        setOpen((was) => {
+            if (!was)
+                onOpenChange?.(true);
+            return true;
+        });
+    }, [onOpenChange]);
+    const close = useCallback(() => {
+        stop();
+        setPinned(false);
+        setOpen((was) => {
+            if (was)
+                onOpenChange?.(false);
+            return false;
+        });
+    }, [onOpenChange, stop]);
+    const hoverIn = useCallback(() => {
+        if (disabled)
+            return;
+        schedule(show, open ? 0 : openDelay);
+    }, [disabled, open, openDelay, schedule, show]);
+    const hoverOut = useCallback(() => {
+        if (pinned)
+            return;
+        schedule(close, closeDelay);
+    }, [close, closeDelay, pinned, schedule]);
+    const focusIn = useCallback(() => {
+        if (disabled)
+            return;
+        schedule(show, 0);
+    }, [disabled, schedule, show]);
+    const focusOut = useCallback(() => {
+        // Sprawdzenie po klatce: w chwili `blur` aktywnym elementem jest jeszcze `body`, więc
+        // przejście Tabem z wyzwalacza do karty wyglądałoby jak wyjście na zewnątrz.
+        schedule(() => {
+            const active = document.activeElement;
+            if (hostRef.current?.contains(active) || panelRef.current?.contains(active))
+                return;
+            close();
+        }, 0);
+    }, [close, schedule]);
+    /** Klik, Enter albo dotyk: karta zostaje i przyjmuje fokus. */
+    const pin = useCallback(() => {
+        if (disabled)
+            return;
+        setPinned(true);
+        show();
+        // Panel powstaje dopiero po przerysowaniu portalu, więc fokus idzie w następnej klatce.
+        setTimeout(() => panelRef.current?.focus({ preventScroll: true }));
+    }, [disabled, show]);
+    useEffect(() => stop, [stop]);
+    // Przypiętej karty nie zamyka zjazd kursora, więc kliknięcie obok musi ją zdjąć. Faza
+    // przechwytywania i `pointerdown`: własne `onClick` w karcie zdąży się wykonać wcześniej.
+    useEffect(() => {
+        if (!open)
+            return;
+        const outside = (event) => {
+            const target = event.target;
+            if (hostRef.current?.contains(target) || panelRef.current?.contains(target))
+                return;
+            close();
+        };
+        document.addEventListener('pointerdown', outside, true);
+        return () => document.removeEventListener('pointerdown', outside, true);
+    }, [close, open]);
+    const triggerProps = {
+        className: 'kpt-peek__trigger',
+        ref: triggerRef,
+        onMouseEnter: hoverIn,
+        onMouseLeave: hoverOut,
+        onFocus: focusIn,
+        onBlur: focusOut,
+        onClick: pin,
+        'aria-expanded': open,
+        'aria-controls': open ? panelId : undefined,
+    };
+    return (_jsxs("span", { ref: hostRef, className: cn('kpt-peek-host', className), ...rest, children: [isValidElement(trigger) ? (
+            // Propsy idą na sam wyzwalacz, nie na opakowanie: `aria-expanded` ma siedzieć na tym
+            // elemencie, po którym jeździ czytnik ekranu, a nie na obojętnym `<span>` obok.
+            cloneElement(trigger, mergeSlotProps(triggerProps, trigger.props))) : (_jsx("span", { ...triggerProps, children: trigger })), _jsx(KptOverlay, { open: open, anchor: triggerRef.current, onClose: close, offset: 8, withBackdrop: false, preferAbove: placement === 'top', children: _jsx("div", { ref: panelRef, id: panelId, className: "kpt-peek__panel", role: "dialog", tabIndex: -1, "aria-label": label || triggerRef.current?.textContent?.trim() || undefined, "data-pinned": pinned ? '' : undefined, onMouseEnter: hoverIn, onMouseLeave: hoverOut, onFocus: focusIn, onBlur: focusOut, onKeyDown: (event) => {
+                        if (event.key !== 'Escape')
+                            return;
+                        close();
+                        triggerRef.current?.focus({ preventScroll: true });
+                    }, children: children }) })] }));
+}

package/dist/pick-list/llms.txt

@@ -1,7 +1,7 @@
 # KptPickList (@konce-pt/react)
 
 Transfers items between two lists. Click to select, the middle buttons move the selection or
-everything.
+everything, a double-click sends one row across, and `dragdrop` adds dragging.
 Import: `import { KptPickList } from '@konce-pt/react';`
 
 ## DOM
@@ -22,13 +22,24 @@ Import: `import { KptPickList } from '@konce-pt/react';`
 - `source` / `defaultSource` / `onSourceChange` — the left list
 - `target` / `defaultTarget` / `onTargetChange` — the right list
 - `sourceHeader`, `targetHeader` — without them `pickList.available` / `pickList.selected`
+- `dragdrop` — `false` by default; enables dragging (opt-in, nothing changes without it)
 - `renderItem(item, index)` — required; the equivalent of `<ng-template let-item>`
 - `className`, `ref` and every other `<div>` prop go to the host
 
 ## The selection is kept by reference
 Selected items live in a `Set` of references, not of indexes: after a move the indexes on both
-sides shift, while a reference stays the same. That is also why a moved item never carries its
-selection over — the selection is cleared on every move.
+sides shift, while a reference stays the same. The buttons clear the whole selection of the side
+they empty; a double-click or a drag only drops the one item that left.
+
+## A double-click moves one item
+It sends exactly the row you clicked to the other panel and appends it at the end, whatever else is
+selected. It does not need `dragdrop` — the two clicks underneath cancel each other out, so the rest
+of the selection is left alone.
+
+## Where a dragged item lands
+Dropping onto a row puts the dragged item at that row's position: inside one panel that reorders,
+across panels it transfers. Dropping on the empty part of a panel appends at the end. While a drag
+is running the row under the cursor carries a `--dragover` modifier and the dragged one `is-dragging`.
 
 ## Two lists, two controlled values
 Both sides are independent controllable values, so the component works uncontrolled (`default*`),
@@ -38,15 +49,18 @@ half-controlled, or fully controlled by the form.
     <KptPickList
       source={available} onSourceChange={setAvailable}
       target={selected} onTargetChange={setSelected}
+      dragdrop
       renderItem={(item) => item.name}
     />
 
 ## i18n
-The headers and the four move buttons come from the `pickList` namespace.
+The headers and the four move buttons come from the `pickList` namespace. Dragging and the
+double-click carry no visible label, so they add no dictionary keys.
 
 ## Tokens
 The selection `--kpt-color-primary`, the headers `--kpt-color-surface-variant`.
 
 ## Accessibility
 Every move button is labelled from the dictionary, so "move all right" is distinguishable from
-"move right" without seeing the double chevron.
+"move right" without seeing the double chevron. Native HTML5 drag and drop has no keyboard
+equivalent, so those buttons stay the full keyboard path — `dragdrop` never replaces them.

package/dist/pick-list/pick-list.d.ts

@@ -11,18 +11,23 @@ export interface KptPickListProps<T> extends Omit<ComponentPropsWithRef<'div'>,
     sourceHeader?: string;
     /** Nagłówek listy docelowej; bez niego `pickList.selected`. */
     targetHeader?: string;
+    /** Włącza porządkowanie i przenoszenie elementów metodą przeciągnij-i-upuść. */
+    dragdrop?: boolean;
     /** Szablon elementu — odpowiednik `<ng-template let-item>` z Angulara. */
     renderItem: (item: T, index: number) => ReactNode;
 }
 /**
  * PickList — transfer elementów między dwiema listami. Klik zaznacza, przyciski pośrodku
- * przenoszą zaznaczone albo wszystko.
+ * przenoszą zaznaczone albo wszystko, dwuklik przerzuca pojedynczy element na drugą stronę.
+ * Z `dragdrop` dochodzi przeciąganie — porządkowanie wewnątrz panelu i przenoszenie na
+ * konkretną pozycję drugiego panelu.
  *
  * @example
  * <KptPickList
  *   source={available} onSourceChange={setAvailable}
  *   target={selected} onTargetChange={setSelected}
+ *   dragdrop
  *   renderItem={(item) => item.name}
  * />
  */
-export declare function KptPickList<T>({ source, defaultSource, onSourceChange, target, defaultTarget, onTargetChange, sourceHeader, targetHeader, renderItem, locale, dictionary, className, ...rest }: Readonly<KptPickListProps<T>>): import("react").JSX.Element;
+export declare function KptPickList<T>({ source, defaultSource, onSourceChange, target, defaultTarget, onTargetChange, sourceHeader, targetHeader, dragdrop, renderItem, locale, dictionary, className, ...rest }: Readonly<KptPickListProps<T>>): import("react").JSX.Element;

package/dist/pick-list/pick-list.js

@@ -7,16 +7,19 @@ import { KptIcon } from "../icon/icon.js";
 const EMPTY = [];
 /**
  * PickList — transfer elementów między dwiema listami. Klik zaznacza, przyciski pośrodku
- * przenoszą zaznaczone albo wszystko.
+ * przenoszą zaznaczone albo wszystko, dwuklik przerzuca pojedynczy element na drugą stronę.
+ * Z `dragdrop` dochodzi przeciąganie — porządkowanie wewnątrz panelu i przenoszenie na
+ * konkretną pozycję drugiego panelu.
  *
  * @example
  * <KptPickList
  *   source={available} onSourceChange={setAvailable}
  *   target={selected} onTargetChange={setSelected}
+ *   dragdrop
  *   renderItem={(item) => item.name}
  * />
  */
-export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, target, defaultTarget = EMPTY, onTargetChange, sourceHeader, targetHeader, renderItem, locale, dictionary, className, ...rest }) {
+export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, target, defaultTarget = EMPTY, onTargetChange, sourceHeader, targetHeader, dragdrop = false, renderItem, locale, dictionary, className, ...rest }) {
     const { t } = useKptMessages({ locale, dictionary });
     const [left, setLeft] = useControllableState({
         value: source,
@@ -32,34 +35,137 @@ export function KptPickList({ source, defaultSource = EMPTY, onSourceChange, tar
     // po obu stronach się przesuwają, a referencja zostaje ta sama.
     const [selLeft, setSelLeft] = useState(new Set());
     const [selRight, setSelRight] = useState(new Set());
+    /** Przeciągany element — strona i pozycja w jej tablicy. */
+    const [drag, setDrag] = useState(null);
+    /** Element pod kursorem — rysuje wskaźnik miejsca upuszczenia. */
+    const [over, setOver] = useState(null);
+    /** Panel, nad którego pustym obszarem jest kursor — upuszczenie tam dopina na koniec. */
+    const [listOver, setListOver] = useState(null);
+    const listOf = (side) => (side === 'source' ? left : right);
+    const setListOf = (side) => (side === 'source' ? setLeft : setRight);
+    const selectionOf = (side) => (side === 'source' ? selLeft : selRight);
+    const setSelectionOf = (side) => side === 'source' ? setSelLeft : setSelRight;
+    const other = (side) => (side === 'source' ? 'target' : 'source');
     const toggle = (side, item) => {
-        const [selection, setSelection] = side === 'source' ? [selLeft, setSelLeft] : [selRight, setSelRight];
-        const next = new Set(selection);
+        const next = new Set(selectionOf(side));
         if (next.has(item))
             next.delete(item);
         else
             next.add(item);
-        setSelection(next);
+        setSelectionOf(side)(next);
     };
     const move = (from, all) => {
-        const fromItems = from === 'source' ? left : right;
-        const toItems = from === 'source' ? right : left;
-        const setFrom = from === 'source' ? setLeft : setRight;
-        const setTo = from === 'source' ? setRight : setLeft;
-        const selection = from === 'source' ? selLeft : selRight;
-        const setSelection = from === 'source' ? setSelLeft : setSelRight;
+        const to = other(from);
+        const fromItems = listOf(from);
+        const selection = selectionOf(from);
         const moving = all ? fromItems : fromItems.filter((item) => selection.has(item));
         if (!moving.length)
             return;
-        setFrom(fromItems.filter((item) => !moving.includes(item)));
-        setTo([...toItems, ...moving]);
-        setSelection(new Set());
+        setListOf(from)(fromItems.filter((item) => !moving.includes(item)));
+        setListOf(to)([...listOf(to), ...moving]);
+        setSelectionOf(from)(new Set());
+    };
+    /** Przenosi jeden element między panelami, wstawiając go pod wskazanym indeksem. */
+    const transfer = (fromSide, fromIndex, toSide, toIndex) => {
+        const fromItems = [...listOf(fromSide)];
+        const [moved] = fromItems.splice(fromIndex, 1);
+        if (moved === undefined)
+            return;
+        const toItems = [...listOf(toSide)];
+        toItems.splice(toIndex, 0, moved);
+        setListOf(fromSide)(fromItems);
+        setListOf(toSide)(toItems);
+        // Element opuszcza panel — jego zaznaczenie po tamtej stronie przestaje cokolwiek znaczyć.
+        const selection = selectionOf(fromSide);
+        if (selection.has(moved)) {
+            const next = new Set(selection);
+            next.delete(moved);
+            setSelectionOf(fromSide)(next);
+        }
+    };
+    /** Dwuklik: przenosi wyłącznie klikniętą pozycję, niezależnie od zaznaczenia. */
+    const moveOne = (from, item) => {
+        const index = listOf(from).indexOf(item);
+        if (index === -1)
+            return;
+        const to = other(from);
+        transfer(from, index, to, listOf(to).length);
+    };
+    const clearDrag = () => {
+        setDrag(null);
+        setOver(null);
+        setListOver(null);
+    };
+    const onDragStart = (side, index, event) => {
+        if (!dragdrop)
+            return;
+        setDrag({ side, index });
+        event.dataTransfer.setData('text/plain', String(index));
+        event.dataTransfer.effectAllowed = 'move';
+    };
+    const onDragOver = (side, index, event) => {
+        if (drag === null)
+            return;
+        // Zatrzymujemy propagację, żeby `<ul>` nie uznał, że kursor jest nad pustym obszarem.
+        event.preventDefault();
+        event.stopPropagation();
+        setOver({ side, index });
+        setListOver(null);
+    };
+    const onDrop = (side, index, event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        const from = drag;
+        clearDrag();
+        if (from === null)
+            return;
+        if (from.side !== side) {
+            transfer(from.side, from.index, side, index);
+            return;
+        }
+        if (from.index === index)
+            return;
+        // Indeks celu liczony na tablicy sprzed usunięcia — element ląduje na pozycji tego,
+        // na który go upuszczono (ten sam wzór co przestawianie kolumn w KptDataTable).
+        const next = [...listOf(side)];
+        const [moved] = next.splice(from.index, 1);
+        if (moved === undefined)
+            return;
+        next.splice(index, 0, moved);
+        setListOf(side)(next);
+    };
+    const onListDragOver = (side, event) => {
+        if (drag === null)
+            return;
+        event.preventDefault();
+        setListOver(side);
+        setOver(null);
+    };
+    const onListDrop = (side, event) => {
+        event.preventDefault();
+        const from = drag;
+        clearDrag();
+        if (from === null)
+            return;
+        if (from.side !== side) {
+            transfer(from.side, from.index, side, listOf(side).length);
+            return;
+        }
+        const next = [...listOf(side)];
+        const [moved] = next.splice(from.index, 1);
+        if (moved === undefined)
+            return;
+        next.push(moved);
+        setListOf(side)(next);
     };
     const column = (side) => {
-        const items = side === 'source' ? left : right;
-        const selection = side === 'source' ? selLeft : selRight;
+        const items = listOf(side);
+        const selection = selectionOf(side);
         const header = side === 'source' ? (sourceHeader ?? t('pickList.available')) : (targetHeader ?? t('pickList.selected'));
-        return (_jsxs("div", { className: "kpt-pick-list__col", children: [_jsx("div", { className: "kpt-pick-list__header", children: header }), _jsx("ul", { className: "kpt-pick-list__items", children: items.map((item, index) => (_jsx("li", { className: cn('kpt-pick-list__item', selection.has(item) && 'is-selected'), onClick: () => toggle(side, item), children: renderItem(item, index) }, index))) })] }));
+        return (_jsxs("div", { className: "kpt-pick-list__col", children: [_jsx("div", { className: "kpt-pick-list__header", children: header }), _jsx("ul", { className: cn('kpt-pick-list__items', listOver === side && 'is-dragover'), onDragOver: (event) => onListDragOver(side, event), onDragLeave: () => setListOver(null), onDrop: (event) => onListDrop(side, event), children: items.map((item, index) => {
+                        const dragging = drag?.side === side && drag.index === index;
+                        return (_jsx("li", { className: cn('kpt-pick-list__item', selection.has(item) && 'is-selected', dragging && 'is-dragging', dragdrop && 'kpt-pick-list__item--draggable', over?.side === side && over.index === index && !dragging && 'kpt-pick-list__item--dragover'), draggable: dragdrop || undefined, onClick: () => toggle(side, item), onDoubleClick: () => moveOne(side, item), onDragStart: (event) => onDragStart(side, index, event), onDragOver: (event) => onDragOver(side, index, event), onDragLeave: () => setOver(null), onDrop: (event) => onDrop(side, index, event), onDragEnd: clearDrag, children: renderItem(item, index) }, index));
+                    }) })] }));
     };
     return (_jsx("div", { className: cn('kpt-pick-list-host', className), ...rest, children: _jsxs("div", { className: "kpt-pick-list", children: [column('source'), _jsxs("div", { className: "kpt-pick-list__controls", children: [_jsxs("button", { type: "button", "aria-label": t('pickList.moveAllRight'), onClick: () => move('source', true), children: [_jsx(KptIcon, { name: "chevron-right" }), _jsx(KptIcon, { name: "chevron-right" })] }), _jsx("button", { type: "button", "aria-label": t('pickList.moveRight'), onClick: () => move('source', false), children: _jsx(KptIcon, { name: "chevron-right" }) }), _jsx("button", { type: "button", "aria-label": t('pickList.moveLeft'), onClick: () => move('target', false), children: _jsx(KptIcon, { name: "chevron-left" }) }), _jsxs("button", { type: "button", "aria-label": t('pickList.moveAllLeft'), onClick: () => move('target', true), children: [_jsx(KptIcon, { name: "chevron-left" }), _jsx(KptIcon, { name: "chevron-left" })] })] }), column('target')] }) }));
 }