@jsenv/navi 0.29.328 → 0.29.330

package/dist/dev/jsenv_navi.js

@@ -24224,10 +24224,16 @@ const createRoutePattern = (
   // search params are updated. When buildMostPreciseUrl performs an ancestor
   // optimisation (e.g. "/map/isochrone/compare" → "/map/isochrone") it is trusted
   // as-is because the built pathname will differ from the route's own base pathname.
-  // Weak params are never inherited from their signal, but a url that already
-  // carries one keeps it: staying on the same screen while another param
-  // changes must not end the visit this param qualifies.
-  const carryOverWeakParams = (currentUrl, params) => {
+  // A weak param is never inherited from its signal by a url built for a link
+  // (see readSignalForUrlBuild). A url amended in place is another matter: the
+  // route is matching, so the signal IS this visit's state, kept in step with
+  // the address by every routing pass — and what it holds is carried over, so
+  // that changing another param does not end the visit this one qualifies.
+  // Read from the signal, not from the url being amended: several signals
+  // written in one batch flush one url write at a time, and the routing pass
+  // of the first would take the others for gone — and reset them — if the url
+  // it wrote did not already carry what they hold.
+  const carryOverWeakParams = (params) => {
     let paramsWithWeak = params;
     for (const connection of connections) {
       const { paramName } = connection;
@@ -24235,17 +24241,13 @@ const createRoutePattern = (
         continue;
       }
       const currentValue = connection.signal.peek();
-      if (currentValue === undefined) {
-        continue;
-      }
-      const currentParams = applyOn(currentUrl);
-      if (!currentParams || currentParams[paramName] === undefined) {
+      if (connection.isDefaultValue(currentValue)) {
         continue;
       }
       if (paramsWithWeak === params) {
         paramsWithWeak = { ...params };
       }
-      paramsWithWeak[paramName] = currentParams[paramName];
+      paramsWithWeak[paramName] = currentValue;
     }
     return paramsWithWeak;
   };
@@ -24281,7 +24283,7 @@ const createRoutePattern = (
   };
 
   const buildUrlPreservingPath = (currentUrl, params = {}) => {
-    params = carryOverWeakParams(currentUrl, params);
+    params = carryOverWeakParams(params);
     if (currentUrl) {
       params = carryOverPathParams(currentUrl, params);
     }
@@ -32747,9 +32749,10 @@ registerNaviCommand("--navi-void", (source) => {
 });
 
 // "--navi-update:smooth" asks the control to be SEEN moving to the value — a
-// wheel scrolls to it rather than swapping its digits — so a shortcut under
-// two wheels shows which one it changed, and by how much. The value itself is
-// set at once either way; only the drawing is concerned.
+// wheel scrolls to it rather than swapping its digits, a spin plays the travel
+// its chevron would play — so a shortcut under a control shows which value it
+// changed, and by how much. What that movement is, and whether the value
+// travels with it, belongs to the control: see control_value.md.
 registerNaviCommand("--navi-update", (source, event, { argument }) => {
   const target =
     resolveExplicitTarget(source) || resolveFirstParentControl(source);
@@ -36837,7 +36840,7 @@ const useUIStateController = (
         // reach until that popup opens. Letting it block interaction would make
         // a picker whose content is loading impossible to open at all.
         getInteractionBlockingControls: () => [],
-        onUIAction: (e, { skipCommand } = {}) => {
+        onUIAction: (e, { skipCommand, skipBoundSignal } = {}) => {
           if (controlType === "button" && controller.controlHostProps.name) {
             const buttonName = controller.controlHostProps.name;
             const parentController = controller.parentUIStateController;
@@ -36867,7 +36870,9 @@ const useUIStateController = (
           }
           // Trigger uiAction/command side effects without changing UI state.
           const currentUIState = controller.uiState;
-          writeBoundSignal(currentUIState);
+          if (!skipBoundSignal) {
+            writeBoundSignal(currentUIState);
+          }
           s.uiActionInternal?.(currentUIState, e);
           if (s.uiAction) {
             debugUIState(`calling uiAction for ${controlType}`, currentUIState);
@@ -37093,7 +37098,15 @@ const useUIStateController = (
               // sync, but do NOT fire the command and do NOT notify the parent —
               // both would cause an infinite loop when a parent cascades state
               // down to its children (child command would re-trigger the cascade).
-              controller.onUIAction(e, { skipCommand: true });
+              // A control following what it was given (state_prop_change) does
+              // not write its bound signal either: the signal is what it
+              // follows. The one write that would change it is an emptied
+              // signal refilled with the suggestion the control fell back on —
+              // a state the app just took back, put back by the control.
+              controller.onUIAction(e, {
+                skipCommand: true,
+                skipBoundSignal: e.type === "state_prop_change",
+              });
             }
             if (
               e.type === "facade_propagate_up" ||
@@ -63996,11 +64009,7 @@ const PickerNative = props => {
           e.preventDefault();
         },
         allowed: () => {
-          try {
-            pickerInput.showPicker();
-          } catch {
-            pickerInput.click();
-          }
+          showNativePicker(pickerInput, e);
         }
       });
     },
@@ -64016,11 +64025,7 @@ const PickerNative = props => {
             const pickerInput = getPickerInput(pickerEl);
             if (pickerInput.type === "color") ; else {
               // other picker might not open the picker when clicking the input surface (only the calendar picker for instance would open)
-              try {
-                pickerInput.showPicker();
-              } catch {
-                pickerInput.click();
-              }
+              showNativePicker(pickerInput, e);
             }
           }
         };
@@ -64919,6 +64924,32 @@ const PickerCalloutPopup = ({
   );
 };
 
+// Under a finger the input is focused before the browser's picker is asked
+// for: iOS presents a date/time input's picker as that input's own inputView,
+// so what the tap focuses is what opens. showPicker() presents nothing there
+// and throws nothing either, so the catch below cannot be what learns about
+// it — and a synthetic click() does not focus a date input there.
+// A departure from the coarse-pointer policy (see focus_transfer.js), argued
+// here: the press asked for this input's picker, and the types whose focus
+// would raise the on-screen keyboard instead are held readOnly already (see
+// NON_MOBILE_KEYBOARD_TYPES in picker.jsx). No ring: nobody is about to type.
+// Not with a mouse, where showPicker() presents the picker on its own: the
+// keyboard stays where it was — a spin's middle, the button that sent the
+// command — so one keeps going with the keys once the calendar closes, rather
+// than on an input drawn behind (see the headless variant in picker.jsx).
+const showNativePicker = (pickerInput, event) => {
+  if (findEvent(event, isTouchDrivenEvent)) {
+    moveFocusTo(pickerInput, {
+      focusVisible: false
+    });
+  }
+  try {
+    pickerInput.showPicker();
+  } catch {
+    pickerInput.click();
+  }
+};
+
 installImportMetaCssBuild(import.meta);
 const css$A = /* css */`.navi_picker_confirm_body {
   min-width: 180px;
@@ -74861,6 +74892,10 @@ const css$s = /* css */`@layer navi {
 }
 `;
 
+// No travel waiting to be played. One array rather than a new one per render,
+// so "nothing pending" compares equal to itself.
+const TRAVELS_NONE = [];
+
 /**
  * @type {import("ignore:preact").FunctionComponent<{
  *   value?: any,
@@ -74985,8 +75020,11 @@ const Spin = ({
   // elsewhere on the page — and the control follows it. A control seeded from a
   // signal only writes back into it (see resolveInputProps), which is enough
   // for a field one only ever types into and not for a value that is also moved
-  // from outside. Undefined is not a value: the signal has nothing to say, so
-  // the control goes back to what it started on.
+  // from outside. A signal holding nothing is left alone: the control goes back
+  // to the suggestion it started on by itself (see resolveValueState), and
+  // asking it to reset would be an act of its own, written into the signal —
+  // the signal could then never hold nothing while a spin is bound to it, and a
+  // day the app took back would come back as today.
   const signalValue = signalProp ? signalProp.value : undefined;
   // The value as of the render this effect belongs to, and not one the closure
   // captured a while ago: a step writes the signal, the signal brings us back
@@ -75000,7 +75038,6 @@ const Spin = ({
       return;
     }
     if (signalValue === undefined) {
-      dispatchRequestResetUIState(controlEl);
       return;
     }
     if (signalValue !== valueRef.current) {
@@ -75117,6 +75154,126 @@ const Spin = ({
   const valueAtEnd = startIsNext ? valuePrevious : valueNext;
   const startAllowed = startIsNext ? nextAllowed : previousAllowed;
   const endAllowed = startIsNext ? previousAllowed : nextAllowed;
+
+  // A value asked to be SEEN arriving (`--navi-update:smooth`): the spin plays
+  // the travel a chevron would play and lets the value land with the slides, so
+  // a shortcut under it reads as "go to that day" rather than "be that day".
+  // Whatever the distance it is ONE travel — a spin is not a wheel, and three
+  // weeks are read as "it moved forward" rather than as twenty-one slides — so
+  // the slide arriving is the one that shows the value being travelled to.
+  //
+  // Queued rather than held one at a time: two shortcuts pressed in a row are
+  // two travels, each landing on its own value, and the one being played is
+  // always the head. And started from a layout effect rather than from the
+  // request itself, so the arriving slide is written before the container
+  // places it — started there, the first frame would show the neighbouring
+  // value and swap to the target mid-flight.
+  const [travelsPending, setTravelsPendingState] = useState(TRAVELS_NONE);
+  const travelsPendingRef = useRef(TRAVELS_NONE);
+  const travelPending = travelsPending[0];
+  const setTravelsPending = travels => {
+    travelsPendingRef.current = travels.length ? travels : TRAVELS_NONE;
+    setTravelsPendingState(travelsPendingRef.current);
+  };
+  const onRequestSetUIStateRef = useRef();
+  onRequestSetUIStateRef.current = e => {
+    if (editable) {
+      // Nothing travels around a field: the value is typed into the middle.
+      return;
+    }
+    const {
+      behavior,
+      value: valueRequested
+    } = e.detail;
+    if (behavior !== "smooth") {
+      return;
+    }
+    if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
+      // Whoever asked to see less motion is answered first: the value is swapped
+      // in place, which is what `--navi-update` alone does.
+      return;
+    }
+    if (valueRequested === undefined || valueRequested === null || valueRequested === "") {
+      // Nowhere to travel to — the erase a calendar offers, say.
+      return;
+    }
+    const travelsQueued = travelsPendingRef.current;
+    // Where the spin stands when this travel starts: behind the ones already
+    // queued, rather than where the eye is now.
+    const valueFrom = travelsQueued.length ? travelsQueued[travelsQueued.length - 1].value : valueShown;
+    const direction = compareValues(valueRequested, valueFrom);
+    if (direction === 0) {
+      return;
+    }
+    const goingNext = direction > 0;
+    // Out of reach, in both the ways a value can be: past the end of what one
+    // may reach, or one step past it — the first step of the travel is the very
+    // one the chevron that way is refused.
+    const outOfReach = goingNext ? hasMax && (compareValues(valueRequested, max) > 0 || compareValues(valueAtStep(valueFrom, step), max) > 0) : hasMin && (compareValues(valueRequested, min) < 0 || compareValues(valueAtStep(valueFrom, -step), min) < 0);
+    if (outOfReach) {
+      // The same refusal a chevron gives, in the same words — said at the value
+      // rather than at the chevron that way, because the press was not on a
+      // chevron: what was asked about is the value, and that is where the
+      // answer belongs.
+      e.preventDefault();
+      e.stopPropagation();
+      openCallout(naviI18n(goingNext ? "spin.nothing_after" : "spin.nothing_before"), {
+        anchorElement: middleRef.current,
+        status: "info",
+        openingEvent: e.detail.event ?? e
+      });
+      return;
+    }
+    // Taken here and answered when the slides land (see onLoop): the control
+    // must not be given the value on the way past, or there would be nothing
+    // left to arrive.
+    e.stopPropagation();
+    // A direction on the map, the way a chevron says it (see wayOut): the
+    // slides are laid out from start to end, so which value sits where is what
+    // decides the way, not which value is bigger.
+    const atStart = goingNext ? startIsNext : !startIsNext;
+    const towardsEnd = atStart ? -1 : 1;
+    setTravelsPending([...travelsQueued, {
+      value: valueRequested,
+      area: atStart ? "start" : "end",
+      dx: vertical ? 0 : towardsEnd,
+      dy: vertical ? towardsEnd : 0,
+      event: e.detail.event ?? e
+    }]);
+  };
+  useLayoutEffect(() => {
+    const middleEl = middleRef.current;
+    const onRequestSetUIState = e => {
+      onRequestSetUIStateRef.current(e);
+    };
+    // On the way DOWN, and on the box holding the control rather than on the
+    // control: the request is dispatched AT the control host, where the
+    // controller is already listening, and the spin has to be able to take it
+    // before the value is set.
+    middleEl.addEventListener("navi_set_ui_state", onRequestSetUIState, true);
+    return () => {
+      middleEl.removeEventListener("navi_set_ui_state", onRequestSetUIState, true);
+    };
+  }, []);
+  useLayoutEffect(() => {
+    if (!travelPending) {
+      return;
+    }
+    // What `--navi-left` and friends ask the container for (see
+    // registerSlideCommand): asked directly because the container already
+    // carries a `commandfor` of its own — pressing the middle opens the picker
+    // — so a command triggered from it would be about the picker.
+    dispatchCustomEvent(document.getElementById(containerId), "navi_slide_move", {
+      event: travelPending.event,
+      dx: travelPending.dx,
+      dy: travelPending.dy
+    });
+  }, [travelPending]);
+  // What the slide the travel is heading for shows: the value being travelled
+  // TO, not the neighbour that place holds at rest — one travel covers the
+  // whole distance, so the far value is what arrives.
+  const valueDrawnAtStart = travelPending?.area === "start" ? travelPending.value : valueAtStart;
+  const valueDrawnAtEnd = travelPending?.area === "end" ? travelPending.value : valueAtEnd;
   const wayOut = atStart => {
     const isNext = atStart ? startIsNext : !startIsNext;
     return jsx(WayOut, {
@@ -75230,6 +75387,17 @@ const Spin = ({
             dy,
             event
           }) => {
+            // A travel asked for by a VALUE (`--navi-update:smooth`):
+            // that value is what lands, whatever the distance it covered,
+            // and the press that asked for it is what says so to uiAction.
+            // Recognized by that press: a chevron travel hurrying this one
+            // along lands first and is a step of its own.
+            const travelLanding = travelsPendingRef.current[0];
+            if (travelLanding && event?.detail?.event === travelLanding.event) {
+              setTravelsPending(travelsPendingRef.current.slice(1));
+              setValue(travelLanding.value, travelLanding.event);
+              return;
+            }
             // One step, whichever axis it came from: the map is a line, so
             // only one of the two is ever anything but zero. Towards the
             // end of the line is a step forward, unless the line was laid
@@ -75262,7 +75430,7 @@ const Spin = ({
             area: "start",
             flex: true,
             align: "center",
-            children: renderValue(valueAtStart, {
+            children: renderValue(valueDrawnAtStart, {
               maxLines
             })
           }), jsx(Slide, {
@@ -75282,7 +75450,7 @@ const Spin = ({
             area: "end",
             flex: true,
             align: "center",
-            children: renderValue(valueAtEnd, {
+            children: renderValue(valueDrawnAtEnd, {
               maxLines
             })
           })]