work

Author: dmail

packages/frontend/navi/dist/jsenv_navi.js

@@ -5,7 +5,7 @@
 import { installImportMetaCssBuild, windowHeightSignal, windowWidthSignal, visualViewportHeightSignal, visualViewportWidthSignal, getAppHeight, getAppWidth, coarsePointerSignal, smallTouchScreenSignal } from "./jsenv_navi_side_effects.js";
 export { disableVirtualKeyboardOverlay } from "./jsenv_navi_side_effects.js";
 import { elementIsFocusable, createIterableWeakSet, dispatchInternalCustomEvent, dispatchCustomEvent, getVisuallyVisibleInfo, getFirstVisuallyVisibleAncestor, getElementSignature, createPubSub, findEvent, createValueEffect, findFocusDelegateTarget, findFocusable, allowWheelThrough, dispatchPublicCustomEvent, resolveCSSColor, ELEMENT_SIZE_CHANGE, findSelfOrAncestorFixedPosition, visibleRectEffect, pickPositionRelativeTo, getBorderSizes, getPaddingSizes, applyNewPosition, measureLongestVisualLineWidth, chainEvent, waitForPressHeld, suppressClickAfterGesture, startDragToTravel, markDragSource, startDragTo, createEventGroupLogger, getKeyboardEventDefaultAction, activeElementSignal, normalizeStyle, mergeOneStyle, getPositionedParent, normalizeStyles, createGroupTransitionController, getBorderRadius, preventIntermediateScrollbar, createOpacityTransition, watchWheelTravel, scrollRoomTowards, getScrollContainer, closestOpenableAncestor, isAncestorOpen, isDisplayedDespiteClosedAncestor, observeAncestorOpenState, getAncestorOpenType, findBefore, findAfter, resolveCSSSize, hasCSSSizeUnit, initFocusGroup, scrollIntoViewScoped, stringifyStyle as stringifyStyle$1, resolveOklchLightness, contrastColor, isTouchDrivenEvent, parsePositionArea, snapToPixel, trapFocusInside, trapScrollInside, onAncestorReopen, canScroll, measureWidestChildRow, performTabNavigation, wheelGestureIsTakenFrom, releaseWheelGesture, claimWheelGesture, dragAfterIntent, stickyAsRelativeCoords, createDragToMoveGestureController, getDropTargetInfo, setStyles, useActiveElement } from "@jsenv/dom";
-export { clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
+export { chainEvent, clickIsSuppressed, contrastColor, findEvent, startDragTo } from "@jsenv/dom";
 import { signal, computed, effect, untracked, batch, useComputed, useSignal } from "@preact/signals";
 import { isValidElement, h, Fragment, createContext, render, toChildArray, options, cloneElement } from "preact";
 import { useErrorBoundary, useLayoutEffect, useContext, useCallback, useRef, useState, useEffect, useMemo, useId } from "preact/hooks";
@@ -30465,7 +30465,16 @@ const anyMatchingRouteSignal = (routes) => {
  * @param {Element} element The element asking — the command's source, and the
  *   anchor a popup opens on unless `anchor` says otherwise.
  * @param {string} command
- * @param {Event} event What the user did.
+ * @param {Event} event What caused this. Mandatory: it is what makes a command
+ *   traceable back to its origin — the debug panel groups everything a gesture
+ *   set off under it, and the gates below read it to know whether the default
+ *   was already prevented and which mouse button was pressed. When nothing was
+ *   handed over — a timer firing, an action settling, a signal changing — build
+ *   a `CustomEvent` that names what happened and chain it to whatever preceded
+ *   it, rather than leaving the origin unsaid:
+ *     const expiredEvent = new CustomEvent("session_expired");
+ *     chainEvent(expiredEvent, causeEvent); // when something did precede it
+ *     triggerNaviCommand(dialogEl, "--navi-open", expiredEvent);
  * @param {object} [options]
  * @param {boolean} [options.optional] No suitable target is not a warning.
  * @param {any} [options.value] What the command is about, carried to whoever
@@ -30482,6 +30491,11 @@ const triggerNaviCommand = (
   event,
   { optional, value, anchor } = {},
 ) => {
+  if (!event) {
+    throw new Error(
+      `"${command}" triggered without an event: it is mandatory, a command must say what caused it. Pass the gesture, or a CustomEvent naming the cause when no gesture did — see triggerNaviCommand's jsdoc.`,
+    );
+  }
   const naviCommand =
     NAVI_COMMANDS[command] || NAVI_COMMANDS[commandName(command)];
   if (!naviCommand) {
@@ -33597,6 +33611,12 @@ const GROUP_DEFAULTS = {
  *
  * **Filtering**: `childControlFilter` can exclude certain child types from aggregation
  * (e.g. ignoring buttons inside a selectable list).
+ *
+ * **Aggregating**: `aggregateChildStates(children, fallbackState, stateNow)` — what the
+ * children add up to. `fallbackState` is the empty of the declared `stateType`;
+ * `stateNow` is what the group is worth as it is asked, which an aggregate reads to
+ * answer for children that are not there (a selectable list whose selected row is not
+ * drawn).
  */
 const useUIGroupStateController = (
   props,
@@ -33753,16 +33773,22 @@ const useUIGroupStateController = (
       // taking that for an answer is how a value handed to it evaporates on
       // the way in, and how that emptiness then travels back up to whoever
       // handed it (a picker showing its row as unanswered).
-      const aggregateGroupUIState = (whenNobodyCanAnswer) => {
+      //
+      // `stateNow` is what the group is worth as it is asked: what it keeps
+      // when there is nobody to ask, and what an aggregate reads to answer for
+      // what its children do not say — a selection whose row is not drawn (see
+      // ListSelectable) lives there and nowhere else.
+      const aggregateGroupUIState = (stateNow) => {
         const someChildCanAnswer = childUIStateControllerArray.some(
           shouldPropagateStateToChild,
         );
         if (!someChildCanAnswer) {
-          return whenNobodyCanAnswer;
+          return stateNow;
         }
         const aggChildState = resolvedAggregateChildStates(
           childUIStateControllerArray,
           fallbackState,
+          stateNow,
         );
         if (aggChildState !== undefined) {
           return aggChildState;
@@ -34286,8 +34312,6 @@ const useUIGroupStateController = (
     // ── update: runs every render after the first ─────────────────────────
     (s) => {
       const { controller } = s;
-      const prevValue = controller.value;
-      const prevHasValueProp = controller.hasValueProp;
       const prevDefaultValue = controller.defaultValue;
       controller.props = props;
       controller.ref = ref;
@@ -34305,10 +34329,14 @@ const useUIGroupStateController = (
         controller.placeChildrenUIState(groupUIState, propagateDownEvent);
         controller.syncInternalState(groupUIState);
       };
-      if (
-        hasValueProp &&
-        (!prevHasValueProp || !compareTwoJsValues(value, prevValue))
-      ) {
+      // A controlled group goes on showing the value it is given. A child
+      // answering for itself moves what the group is worth — that is what
+      // `uiAction` reports — but the value stays the owner's, so the test is
+      // against what the children are showing, not against the value handed
+      // down last time. A popup reopened on another subject hands down the very
+      // same empty value it did before, and the selection left inside it from
+      // the previous opening is what has to go.
+      if (hasValueProp && !compareTwoJsValues(value, controller.uiState)) {
         placeChildrenFrom(value);
       }
       if (
@@ -61346,23 +61374,22 @@ const ListSelectable = props => {
     focusGroupDirection,
     focusGroupWrap
   } = props;
-  // What the list holds, which is not the same as what its rows say. A list
-  // draws the rows it needs and no more: the selected one may be scrolled out
-  // of the window, or filtered out of the view. Aggregating over the rows that
-  // happen to be mounted would then lose the selection — a row that is not
-  // there cannot say it is not selected.
-  const selectionRef = useRef(undefined);
-  if (selectionRef.current === undefined) {
-    selectionRef.current = Object.hasOwn(props, "value") ? props.value : props.defaultValue;
-  }
+  // `kept` is what the list holds as it is asked, which is not the same as what
+  // its rows say: a list draws the rows it needs and no more, so the selected
+  // one may be scrolled out of the window or filtered out of the view, and a
+  // row that is not there cannot say it is not selected. Reading it off the
+  // group rather than remembering it here is what makes a value put ON the list
+  // (a `value` prop, a signal, a reopened popup) replace the whole selection —
+  // a private memory of its own would go on holding the rows it could not see
+  // being unselected.
+  //
   // `fallbackState` is the empty of the shape the list declared below
   // (`stateType`): `[]` for a multiple list, nothing for a single one. Taking
   // it is what lets an emptied list say "empty" — `undefined` is the word for
   // "unset", and a bound stateSignal reads that as "nothing decided here, go
   // back to the default" (see docs/control_value.md), which is how a list
   // emptied down to its last row puts that row back on reload.
-  const aggregateChildStates = (children, fallbackState) => {
-    const kept = selectionRef.current;
+  const aggregateChildStates = (children, fallbackState, kept) => {
     if (multiple) {
       const drawnValues = new Set(children.map(child => child.props.value));
       const stillSelected = Array.isArray(kept) ? kept.filter(value => !drawnValues.has(value)) : [];
@@ -61371,21 +61398,17 @@ const ListSelectable = props => {
           stillSelected.push(child.uiState);
         }
       }
-      const values = stillSelected.length === 0 ? fallbackState : stillSelected;
-      selectionRef.current = values;
-      return values;
+      return stillSelected.length === 0 ? fallbackState : stillSelected;
     }
     for (const child of children) {
       if (child.uiState !== undefined) {
-        selectionRef.current = child.uiState;
         return child.uiState;
       }
     }
     // No drawn row claims it. If the row that held it IS drawn, it was really
     // deselected; if it is not, the list keeps what it holds.
     const keptIsDrawn = children.some(child => child.props.value === kept);
     if (keptIsDrawn) {
-      selectionRef.current = undefined;
       return undefined;
     }
     return kept;

packages/frontend/navi/dist/jsenv_navi.js.map

@@ -1,6 +1,6 @@
 {
   "name": "@jsenv/navi",
-  "version": "0.29.141",
+  "version": "0.29.142",
   "type": "module",
   "description": "Library of components including navigation to create frontend applications",
   "repository": {

packages/frontend/navi/package.json

@@ -0,0 +1,104 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="data:," />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>List value in dialog repro</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" jsenv-type="module/jsx">
+      import { render } from "preact";
+      import { useState } from "preact/hooks";
+      import {
+        applySearch,
+        Button,
+        Dialog,
+        Input,
+        List,
+        useSearchText,
+      } from "@jsenv/navi";
+
+      const PLAYERS = [
+        { id: "u-1", name: "Marie" },
+        { id: "u-2", name: "Paul" },
+        { id: "u-3", name: "Jacques" },
+        { id: "u-4", name: "Sophie" },
+      ];
+
+      const App = () => {
+        const [seat, setSeat] = useState(null);
+        const [seats, setSeats] = useState({});
+        const [picked, setPicked] = useState(null);
+        const [searchText, setSearchText] = useState("");
+        const [players] = useState(PLAYERS);
+        const [orderedPlayers, getMatchInfo] = useSearchText(
+          searchText,
+          players,
+          (text, player) => applySearch(text, player.name),
+        );
+
+        return (
+          <div>
+            {[1, 2, 3, 4].map((n) => (
+              <Button
+                key={n}
+                data-testid={`seat_${n}`}
+                command="--navi-open"
+                commandFor="seat_dialog"
+                value={n}
+                onClick={() => {
+                  setSeat(n);
+                  setPicked(seats[n] || null);
+                }}
+              >
+                seat {n}: {seats[n] || "—"}
+              </Button>
+            ))}
+            <pre id="state">{JSON.stringify(seats)}</pre>
+            <Dialog id="seat_dialog">
+              <div id="footer">
+                picked: {picked || "aucun"} (seat {seat})
+              </div>
+              <Input
+                type="search"
+                navi-list="seat_list"
+                placeholder="Rechercher"
+                value={searchText}
+                uiAction={(v) => setSearchText(v || "")}
+              />
+              <List
+                id="seat_list"
+                selectable
+                multiple
+                maxLengthGuard={1}
+                value={picked ? [picked] : []}
+                uiAction={(v) => {
+                  const first = v && v[0];
+                  setPicked(first || null);
+                  if (first) {
+                    setSeats((s) => ({ ...s, [seat]: first }));
+                  }
+                }}
+              >
+                {orderedPlayers.map((player) => (
+                  <List.Item
+                    key={player.id}
+                    value={player.id}
+                    matchInfo={getMatchInfo(player)}
+                  >
+                    {player.name}
+                  </List.Item>
+                ))}
+              </List>
+              <Button command="--navi-close">Fermer</Button>
+            </Dialog>
+          </div>
+        );
+      };
+
+      render(<App />, document.querySelector("#root"));
+    </script>
+  </body>
+</html>

packages/frontend/navi/src/control/demos/lab/bug_list_value_in_dialog_repro.html

@@ -250,25 +250,22 @@ const ListSelectable = (props) => {
   props.name = props.name || `listbox_${defaultName}`;
   const { ref, multiple, deselectable, focusGroupDirection, focusGroupWrap } =
     props;
-  // What the list holds, which is not the same as what its rows say. A list
-  // draws the rows it needs and no more: the selected one may be scrolled out
-  // of the window, or filtered out of the view. Aggregating over the rows that
-  // happen to be mounted would then lose the selection — a row that is not
-  // there cannot say it is not selected.
-  const selectionRef = useRef(undefined);
-  if (selectionRef.current === undefined) {
-    selectionRef.current = Object.hasOwn(props, "value")
-      ? props.value
-      : props.defaultValue;
-  }
+  // `kept` is what the list holds as it is asked, which is not the same as what
+  // its rows say: a list draws the rows it needs and no more, so the selected
+  // one may be scrolled out of the window or filtered out of the view, and a
+  // row that is not there cannot say it is not selected. Reading it off the
+  // group rather than remembering it here is what makes a value put ON the list
+  // (a `value` prop, a signal, a reopened popup) replace the whole selection —
+  // a private memory of its own would go on holding the rows it could not see
+  // being unselected.
+  //
   // `fallbackState` is the empty of the shape the list declared below
   // (`stateType`): `[]` for a multiple list, nothing for a single one. Taking
   // it is what lets an emptied list say "empty" — `undefined` is the word for
   // "unset", and a bound stateSignal reads that as "nothing decided here, go
   // back to the default" (see docs/control_value.md), which is how a list
   // emptied down to its last row puts that row back on reload.
-  const aggregateChildStates = (children, fallbackState) => {
-    const kept = selectionRef.current;
+  const aggregateChildStates = (children, fallbackState, kept) => {
     if (multiple) {
       const drawnValues = new Set(children.map((child) => child.props.value));
       const stillSelected = Array.isArray(kept)
@@ -279,21 +276,17 @@ const ListSelectable = (props) => {
           stillSelected.push(child.uiState);
         }
       }
-      const values = stillSelected.length === 0 ? fallbackState : stillSelected;
-      selectionRef.current = values;
-      return values;
+      return stillSelected.length === 0 ? fallbackState : stillSelected;
     }
     for (const child of children) {
       if (child.uiState !== undefined) {
-        selectionRef.current = child.uiState;
         return child.uiState;
       }
     }
     // No drawn row claims it. If the row that held it IS drawn, it was really
     // deselected; if it is not, the list keeps what it holds.
     const keptIsDrawn = children.some((child) => child.props.value === kept);
     if (keptIsDrawn) {
-      selectionRef.current = undefined;
       return undefined;
     }
     return kept;

packages/frontend/navi/src/control/list/list_selectable.jsx

@@ -1013,6 +1013,12 @@ const GROUP_DEFAULTS = {
  *
  * **Filtering**: `childControlFilter` can exclude certain child types from aggregation
  * (e.g. ignoring buttons inside a selectable list).
+ *
+ * **Aggregating**: `aggregateChildStates(children, fallbackState, stateNow)` — what the
+ * children add up to. `fallbackState` is the empty of the declared `stateType`;
+ * `stateNow` is what the group is worth as it is asked, which an aggregate reads to
+ * answer for children that are not there (a selectable list whose selected row is not
+ * drawn).
  */
 export const useUIGroupStateController = (
   props,
@@ -1176,16 +1182,22 @@ export const useUIGroupStateController = (
       // taking that for an answer is how a value handed to it evaporates on
       // the way in, and how that emptiness then travels back up to whoever
       // handed it (a picker showing its row as unanswered).
-      const aggregateGroupUIState = (whenNobodyCanAnswer) => {
+      //
+      // `stateNow` is what the group is worth as it is asked: what it keeps
+      // when there is nobody to ask, and what an aggregate reads to answer for
+      // what its children do not say — a selection whose row is not drawn (see
+      // ListSelectable) lives there and nowhere else.
+      const aggregateGroupUIState = (stateNow) => {
         const someChildCanAnswer = childUIStateControllerArray.some(
           shouldPropagateStateToChild,
         );
         if (!someChildCanAnswer) {
-          return whenNobodyCanAnswer;
+          return stateNow;
         }
         const aggChildState = resolvedAggregateChildStates(
           childUIStateControllerArray,
           fallbackState,
+          stateNow,
         );
         if (aggChildState !== undefined) {
           return aggChildState;
@@ -1709,8 +1721,6 @@ export const useUIGroupStateController = (
     // ── update: runs every render after the first ─────────────────────────
     (s) => {
       const { controller } = s;
-      const prevValue = controller.value;
-      const prevHasValueProp = controller.hasValueProp;
       const prevDefaultValue = controller.defaultValue;
       controller.props = props;
       controller.ref = ref;
@@ -1728,10 +1738,14 @@ export const useUIGroupStateController = (
         controller.placeChildrenUIState(groupUIState, propagateDownEvent);
         controller.syncInternalState(groupUIState);
       };
-      if (
-        hasValueProp &&
-        (!prevHasValueProp || !compareTwoJsValues(value, prevValue))
-      ) {
+      // A controlled group goes on showing the value it is given. A child
+      // answering for itself moves what the group is worth — that is what
+      // `uiAction` reports — but the value stays the owner's, so the test is
+      // against what the children are showing, not against the value handed
+      // down last time. A popup reopened on another subject hands down the very
+      // same empty value it did before, and the selection left inside it from
+      // the previous opening is what has to go.
+      if (hasValueProp && !compareTwoJsValues(value, controller.uiState)) {
         placeChildrenFrom(value);
       }
       if (