wenay-react2 1.0.42 → 1.0.43

package/doc/changes/v1.0.43.md

@@ -0,0 +1,10 @@
+# v1.0.43
+
+Date: 2026-07-10
+
+Status: released.
+
+- Changed: `ColumnDots` drag is LIVE (user request from the stand, card 32: "отображать и выключать надо по мере движения — я так буду искать нужный мне столбик"): every EMPTY mark the dot crosses swaps the shown column immediately - the grid/cards follow the finger during the drag; the drop no longer commits a swap (it only settles selection and the tear-off). Occupied marks are passed over; a fixed dot still never swaps; the vertical tear-off flick hides the CURRENTLY shown column of the gesture.
+- Added: a small label above the dragged dot (`.wenayColDotsDragLabel`, tokens `--cols-dots-drag-label-bg/color/font-size` + TS mirror) naming the currently shown column - sized for a finger on a phone.
+- Changed: QA cards 29 and 32 do/expect texts updated to the live semantics.
+- Verification: `npx tsc -p tsconfig.qa-check.json --noEmit`; `npm run testjest -- --runInBand` (62/62, incl. the two-way tokens sync test); stand 3010 card 32 - dragging the NOTE dot left across QTY to PRICE leaves the table showing NAME+PRICE with the dot settled on the PRICE mark (the drop path commits nothing, so the end state proves the live path), zero console errors.

package/doc/wenay-react2.md

@@ -341,7 +341,9 @@ keep `ColumnsMenu` for compact button strips or custom presentation-only menus.
 Mobile (no ag-grid): dots selector + card rows over the same config:
 ```
 <ColumnDots state={cs} max?=8 />                 // track of marks; dots = shown columns; tap empty=add,
-                                                 //   drag=replace, swipe up=remove, tap dot=select, sort button cycles
+                                                 //   drag=LIVE replace (every empty mark crossed swaps the shown
+                                                 //   column immediately + small label names it - column search
+                                                 //   by finger), swipe up=remove, tap dot=select, sort cycles
 <CardList<Row> state={cs} data={rows} getId? renderValue? />   // visible cols -> card fields; cardRole:'title'/'accent'
 ```
 

package/lib/common/src/grid/columnState/ColumnDots.js

@@ -3,8 +3,11 @@ import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
 // with dots on the columns that are currently shown. Placing a dot IS showing
 // the column; the card view (CardList) rebuilds from the same config live.
 // Gestures (pointer events, mouse + touch):
-//   drag a dot along the track  -> the dot slides to another (empty) mark: that
-//                                  column replaces the old one
+//   drag a dot along the track  -> LIVE: every empty mark the dot crosses swaps
+//                                  the shown column immediately (the grid/cards
+//                                  follow the finger - that is how you SEARCH for
+//                                  a column on a phone); a small label above the
+//                                  finger names the currently shown column
 //   swipe a dot UP (flick off)  -> the dot tears off the track: column hidden
 //   tap an empty mark           -> a dot appears there: column shown
 //   tap a dot (no move)         -> select the field (highlight); the sort
@@ -38,7 +41,7 @@ export function ColumnDots(p) {
     function downDot(key, e) {
         e.preventDefault();
         e.currentTarget.setPointerCapture(e.pointerId);
-        gestureRef.current = { key, startX: e.clientX, startY: e.clientY, moved: false };
+        gestureRef.current = { key, startX: e.clientX, startY: e.clientY, moved: false, shown: key, fixed: !!byKey.get(key)?.fixed };
     }
     function moveDot(e) {
         const g = gestureRef.current;
@@ -56,7 +59,17 @@ export function ColumnDots(p) {
         const from = order.indexOf(g.key);
         const off = -dy > REMOVE_DY && -dy > Math.abs(dx);
         const to = Math.max(0, Math.min(n - 1, Math.round(from + dx / step)));
-        setDrag({ key: g.key, dx, dy, to, off });
+        // LIVE swap: crossing an EMPTY mark shows that column immediately (the grid
+        // follows the finger - column search by dragging). Occupied marks are passed
+        // over; a fixed dot never swaps (same rule the old on-drop commit had).
+        if (!off && !g.fixed) {
+            const target = order[to];
+            if (target && target != g.shown && cfg.visible[target] == false) {
+                p.state.api.setConfig({ ...cfg, visible: { ...cfg.visible, [g.shown]: false, [target]: true } });
+                g.shown = target;
+            }
+        }
+        setDrag({ key: g.key, dx, dy, to, off, shown: g.shown });
     }
     function upDot() {
         const g = gestureRef.current;
@@ -71,21 +84,19 @@ export function ColumnDots(p) {
         }
         if (!st)
             return;
-        const meta = byKey.get(g.key);
+        // swaps already happened live during the move; the drop only settles
+        // selection and handles the tear-off of the CURRENTLY shown column
         if (st.off) {
+            const meta = byKey.get(g.shown);
             if (!meta?.fixed && visibleKeys.length > 1) {
-                p.state.api.show(g.key, false);
-                if (selected == g.key)
+                p.state.api.show(g.shown, false);
+                if (selected == g.key || selected == g.shown)
                     setSelected(null);
             }
             return;
         }
-        const target = order[st.to];
-        if (target && target != g.key && cfg.visible[target] == false && !meta?.fixed) {
-            p.state.api.setConfig({ ...cfg, visible: { ...cfg.visible, [g.key]: false, [target]: true } });
-            if (selected == g.key)
-                setSelected(target);
-        }
+        if (g.shown != g.key && selected == g.key)
+            setSelected(g.shown);
     }
     function tapMark(key) {
         if (cfg.visible[key] != false)
@@ -101,11 +112,17 @@ export function ColumnDots(p) {
                         const isSorted = cfg.sort?.key == k;
                         return _jsxs("div", { onPointerUp: () => tapMark(k), className: cx(['wenayColDotsMark', vis ? 'wenayColDotsMark_on' : 'wenayColDotsMark_off']), style: { left: `${pct(i)}%`, cursor: !vis && visibleKeys.length < max ? 'pointer' : 'default' }, children: [isSorted && _jsx("div", { className: 'wenayColDotsSortMark', children: cfg.sort.dir == 'asc' ? '↑' : '↓' }), _jsx("div", { className: 'wenayColDotsMarkPin' }), _jsx("div", { className: 'wenayColDotsMarkLabel', children: short(k) })] }, 'm' + k);
                     }), order.map((k, i) => {
-                        if (cfg.visible[k] == false)
+                        const d = drag?.key == k ? drag : null;
+                        // the dragged dot stays mounted through live swaps (its column may be
+                        // hidden mid-gesture; unmounting would kill the pointer capture)...
+                        if (cfg.visible[k] == false && !d)
+                            return null;
+                        // ...and the live-shown column's resting dot is suppressed: its
+                        // representation IS the dot under the finger
+                        if (drag && !d && k == drag.shown && drag.shown != drag.key)
                             return null;
                         const meta = byKey.get(k);
-                        const d = drag?.key == k ? drag : null;
-                        const removing = !!d?.off && !meta?.fixed && visibleKeys.length > 1;
-                        return _jsx("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, className: cx(['wenayColDotsDotWrap', d && 'wenayColDotsDotWrap_dragging', removing && 'wenayColDotsDotWrap_removing']), style: { left: `${pct(i)}%`, transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined }, children: _jsx("div", { className: cx(['wenayColDotsDot', selected == k && 'wenayColDotsDot_selected', meta?.fixed && 'wenayColDotsDot_fixed']) }) }, 'd' + k);
+                        const removing = !!d?.off && !byKey.get(d.shown)?.fixed && visibleKeys.length > 1;
+                        return _jsxs("div", { onPointerDown: e => downDot(k, e), onPointerMove: moveDot, onPointerUp: upDot, onPointerCancel: upDot, className: cx(['wenayColDotsDotWrap', d && 'wenayColDotsDotWrap_dragging', removing && 'wenayColDotsDotWrap_removing']), style: { left: `${pct(i)}%`, transform: d ? `translate(${d.dx}px, ${removing ? d.dy : 0}px)` : undefined }, children: [d && !d.off && _jsx("div", { className: 'wenayColDotsDragLabel', children: short(d.shown) }), _jsx("div", { className: cx(['wenayColDotsDot', selected == k && 'wenayColDotsDot_selected', meta?.fixed && 'wenayColDotsDot_fixed']) })] }, 'd' + k);
                     })] })] });
 }

package/lib/common/src/styles/tokens.d.ts

@@ -133,6 +133,9 @@ export declare const tokens: {
         readonly selectedBg: "#0969da";
         readonly selectedBorder: "#b6d4fe";
         readonly fixedBorder: "#afb8c1";
+        readonly dragLabelBg: "#24292f";
+        readonly dragLabelColor: "#fff";
+        readonly dragLabelFontSize: "10px";
     };
     /** CardList chrome (--cols-card-*). Defaults preserve restored card-29 look. */
     readonly colsCard: {

package/lib/common/src/styles/tokens.js

@@ -137,6 +137,9 @@ export const tokens = {
         selectedBg: '#0969da',
         selectedBorder: '#b6d4fe',
         fixedBorder: '#afb8c1',
+        dragLabelBg: '#24292f',
+        dragLabelColor: '#fff',
+        dragLabelFontSize: '10px',
     },
     /** CardList chrome (--cols-card-*). Defaults preserve restored card-29 look. */
     colsCard: {