wenay-react2 1.0.41 → 1.0.42

package/lib/common/updateBy.js

@@ -1,4 +1,4 @@
-import { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
+import React, { useCallback, useLayoutEffect, useSyncExternalStore } from "react";
 import { listen as createListen, waitRun } from "wenay-common2";
 export const map3 = new WeakMap();
 export const mapWait = new Map();
@@ -14,34 +14,59 @@ function getUpdateListen(obj) {
 function getObserverState(obj) {
     let state = map3.get(obj);
     if (!state) {
-        state = { listeners: new Set(), version: 0 };
+        state = { listeners: new Set(), callbacks: new Set(), version: 0, running: false, pending: false };
         map3.set(obj, state);
     }
     return state;
 }
-// reverse/lastOnly действуют только на React-подписчиков (useUpdateBy);
-// императивные on-подписчики вызываются всегда все, в порядке подписки
-function triggerUpdate(obj, reverse = false, lastOnly = false) {
+// reverse/lastOnly действуют только на React-подписчиков (useSyncExternalStore);
+// императивные f-колбэки вызываются всегда все, в порядке подписки, ДО React-нотификаторов
+function runTriggerPass(obj, state, reverse, lastOnly) {
     const listen = updateListens.get(obj);
-    let state = map3.get(obj);
-    if ((!state || state.listeners.size === 0) && !listen?.[1].count())
-        return;
-    state ??= getObserverState(obj);
     state.version += 1;
-    let listenersArray = Array.from(state.listeners);
+    // императивные f-колбэки: всегда все, в порядке подписки
+    Array.from(state.callbacks).forEach(callback => callback(obj));
+    const listenersArray = Array.from(state.listeners);
     if (lastOnly) {
         const last = listenersArray.at(-1);
         if (last)
             last(obj);
-        listen?.[0](obj);
-        return;
     }
-    if (reverse) {
-        listenersArray.reverse();
+    else {
+        if (reverse) {
+            listenersArray.reverse();
+        }
+        listenersArray.forEach(listener => listener(obj));
     }
-    listenersArray.forEach(listener => listener(obj));
     listen?.[0](obj);
 }
+const MAX_TRIGGER_PASSES = 100;
+function triggerUpdate(obj, reverse = false, lastOnly = false) {
+    const listen = updateListens.get(obj);
+    let state = map3.get(obj);
+    if ((!state || (state.listeners.size === 0 && state.callbacks.size === 0)) && !listen?.[1].count())
+        return;
+    state ??= getObserverState(obj);
+    // реентерабельность: синхронный renderBy по тому же объекту изнутри слушателя
+    // коалесцируется — помечаем pending и выходим, текущая итерация сделает ещё проход
+    if (state.running) {
+        state.pending = true;
+        return;
+    }
+    state.running = true;
+    try {
+        for (let pass = 0; pass < MAX_TRIGGER_PASSES; pass++) {
+            state.pending = false;
+            runTriggerPass(obj, state, reverse, lastOnly);
+            if (!state.pending)
+                break;
+        }
+    }
+    finally {
+        state.running = false;
+        state.pending = false;
+    }
+}
 function schedule(a, ms, reverse = false, lastOnly = false) {
     if (ms) {
         (mapWait.get(a) || mapWait.set(a, waitRun()).get(a))
@@ -63,29 +88,39 @@ export function renderByLast(a, ms) {
     schedule(a, ms, false, true);
 }
 export function useUpdateBy(a, f) {
+    // f прокидывается через ref: inline-колбэк (новая identity на каждый рендер)
+    // не должен вызывать переподписку — регистрируется одна стабильная обёртка на (a)
+    const fRef = React.useRef(f);
+    fRef.current = f;
+    const hasF = !!f;
     // стабильный subscribe: без useCallback React переподписывается на каждый рендер,
     // а удаление state из map3 при этом сбрасывало бы version → лишний форс-ререндер
     const subscribe = useCallback((listener) => {
-        if (f)
+        if (hasF)
             return () => { };
         const state = getObserverState(a);
         state.listeners.add(listener);
         return () => {
             state.listeners.delete(listener);
         };
-    }, [a, f]);
+    }, [a, hasF]);
     useSyncExternalStore(subscribe, 
     // getSnapshot must be pure: only read the version, subscribe creates the state
-    () => (f ? 0 : (map3.get(a)?.version ?? 0)));
+    () => (hasF ? 0 : (map3.get(a)?.version ?? 0)));
     useLayoutEffect(() => {
-        if (!f)
+        if (!hasF)
             return;
         const state = getObserverState(a);
-        state.listeners.add(f);
+        // обёртка передаёт тот же мутированный объект — для ветки Dispatch<SetStateAction<T>>
+        // setState(тот же ref) React бэйлаутит без ререндера (см. UpdateCallback)
+        const wrapper = (obj) => {
+            fRef.current?.(obj);
+        };
+        state.callbacks.add(wrapper);
         return () => {
-            state.listeners.delete(f);
+            state.callbacks.delete(wrapper);
         };
-    }, [a, f]);
+    }, [a, hasF]);
 }
 export function updateBy(a, f) {
     useUpdateBy(a, f);

package/lib/style/style.css

@@ -751,6 +751,63 @@ body {
   overflow: auto;
 }
 
+/* Column grid kit layout (createColumnGrid.View). */
+.wenayColumnGrid {
+  position: relative;
+  display: grid;
+  gap: var(--cols-grid-gap, 8px);
+  min-width: 0;
+}
+.wenayColumnGridControls,
+.wenayColumnGridBody {
+  min-width: 0;
+}
+.wenayColumnGridControls_dots {
+  position: absolute;
+  left: var(--cols-grid-dots-x, 10px);
+  right: var(--cols-grid-dots-x, 10px);
+  bottom: var(--cols-grid-dots-bottom, 10px);
+  z-index: 3;
+}
+.wenayColumnGrid_cards.wenayColumnGrid_controls_dots .wenayCardListItem:last-child {
+  padding-bottom: var(--cols-grid-dots-card-bottom-padding, 92px);
+}
+.wenayColumnGridDots {
+  padding: var(--cols-grid-dots-padding, 6px 8px 8px);
+  border: 1px solid transparent;
+  border-radius: 8px;
+  background: transparent;
+  box-shadow: none;
+  backdrop-filter: none;
+}
+.wenayColumnGridDots .wenayColDotsHead {
+  justify-content: flex-end;
+  gap: 0;
+  margin-bottom: 2px;
+  font-size: 11px;
+}
+.wenayColumnGridDots .wenayColDotsTrack {
+  height: 48px;
+  margin: 0 16px;
+}
+.wenayColumnGridDots .wenayColDotsMeta,
+.wenayColumnGridDots .wenayColDotsSpacer {
+  display: none;
+}
+.wenayColumnGridDots .wenayColDotsSort {
+  width: 32px;
+  height: 28px;
+  padding: 0;
+  font-size: 0;
+  opacity: 0.82;
+  background: transparent;
+}
+.wenayColumnGridDots .wenayColDotsSort::before {
+  content: "⇅";
+  font-size: 16px;
+  line-height: 1;
+}
+
 /* Column state compact menu (ColumnsMenu/MenuStrip). Visual defaults moved from
    component inline styles; runtime drag transforms remain inline. */
 .wenayColsMenu,
@@ -1168,4 +1225,4 @@ body {
 .wenaySegBtnActive {
   background: rgba(255, 255, 255, 0.16);
   color: #fff;
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "wenay-react2",
-  "version": "1.0.41",
+  "version": "1.0.42",
   "description": "Common react",
   "strict": true,
   "main": "dist/index.js",
@@ -24,7 +24,7 @@
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
     "react-rnd": "^10.5.3",
-    "wenay-common2": "^1.0.65"
+    "wenay-common2": "^1.0.70"
   },
   "peerDependencies": {
     "react": "^19.2.0",