@jsenv/navi 0.29.362 → 0.29.364

package/dist/jsenv_navi.js

@@ -8914,6 +8914,17 @@ const naviI18nFromValidityMessage = ({ key, params }) => {
   return naviI18n(`constraint.${key}`, params);
 };
 
+// The characters a ui state holds, for the rules that read a value as text
+// (length, pattern, number, email…). `undefined` and `null` both hold none:
+// `String(null)` would hand those rules the four letters "null" — a number
+// field cleared with `value={null}` then reported "must be a number".
+const uiStateAsText = (uiState) => {
+  if (uiState === undefined || uiState === null) {
+    return "";
+  }
+  return String(uiState);
+};
+
 /**
  * https://developer.mozilla.org/en-US/docs/Web/HTML/Guides/Constraint_validation
  */
@@ -8980,8 +8991,7 @@ const REQUIRED_CONSTRAINT = {
       return naviI18n("constraint.required.checkbox");
     }
 
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (valueAsString) {
       return null;
     }
@@ -9032,8 +9042,7 @@ const PATTERN_CONSTRAINT = {
     if (!pattern) {
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (!valueAsString) {
       return null;
     }
@@ -9068,8 +9077,7 @@ const TYPE_EMAIL_CONSTRAINT = {
     if (type !== "email") {
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (!valueAsString) {
       return null;
     }
@@ -9102,8 +9110,7 @@ const MIN_LENGTH_CONSTRAINT = {
     if (minLength === undefined) {
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (!valueAsString && !field.controlHostProps.required) {
       return null;
     }
@@ -9198,8 +9205,7 @@ const MAX_LENGTH_CONSTRAINT = {
     if (maxLength === undefined) {
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (!valueAsString) {
       return null;
     }
@@ -9240,8 +9246,7 @@ const TYPE_NUMBER_CONSTRAINT = {
     if (!isNumberInput(type, naviType)) {
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (!valueAsString) {
       return null;
     }
@@ -9306,8 +9311,7 @@ const MIN_CONSTRAINT = {
     }
     const type = field.controlHostProps.type;
     const naviInputType = field.controlHostProps["navi-input-type"];
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (!valueAsString) {
       return null;
     }
@@ -9406,8 +9410,7 @@ const MAX_CONSTRAINT = {
     }
     const type = field.controlHostProps.type;
     const naviInputType = field.controlHostProps["navi-input-type"];
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (!valueAsString) {
       return null;
     }
@@ -9540,8 +9543,7 @@ const STEP_CONSTRAINT = {
       return null;
     }
     const stepString = String(stepRaw);
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (!valueAsString) {
       return null;
     }
@@ -12341,8 +12343,7 @@ const DISPLAYABLE_CONSTRAINT = {
     if (!isConstraintAttributeOn(displayable)) {
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     const maxStackedMarksAttribute =
       field.controlHostProps["data-max-stacked-marks"];
     const result = DISPLAYABLE_RULE.applyOn(true, valueAsString, {
@@ -12383,8 +12384,7 @@ const MAX_LINE_BREAKS_CONSTRAINT = {
     if (isNaN(maxLineBreaks)) {
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     const result = MAX_LINE_BREAKS_RULE.applyOn(maxLineBreaks, valueAsString);
     if (!result) {
       return null;
@@ -12413,8 +12413,7 @@ const NO_EMOJI_CONSTRAINT = {
     if (!isConstraintAttributeOn(noEmoji)) {
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     const result = NO_EMOJI_RULE.applyOn(true, valueAsString);
     if (!result) {
       return null;
@@ -12428,8 +12427,7 @@ const MIN_LOWER_LETTER_CONSTRAINT = {
   name: "min_lower_letter",
   messageAttribute: "data-min-lower-letter-message",
   check: (field) => {
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     const required = field.controlHostProps.required;
     if (!valueAsString && !required) {
       return "";
@@ -12474,8 +12472,7 @@ const MIN_UPPER_LETTER_CONSTRAINT = {
   name: "min_upper_letter",
   messageAttribute: "data-min-upper-letter-message",
   check: (field) => {
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     const required = field.controlHostProps.required;
     if (!valueAsString && !required) {
       return null;
@@ -12511,8 +12508,7 @@ const MIN_DIGIT_CONSTRAINT = {
   name: "min_digit",
   messageAttribute: "data-min-digit-message",
   check: (field) => {
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     const required = field.controlHostProps.required;
     if (!valueAsString && !required) {
       return null;
@@ -12548,8 +12544,7 @@ const MIN_SPECIAL_CHAR_CONSTRAINT = {
   name: "min_special_char",
   messageAttribute: "data-min-special-char-message",
   check: (field) => {
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     const required = field.controlHostProps.required;
     if (!valueAsString && !required) {
       return null;
@@ -12666,8 +12661,7 @@ const SAME_AS_CONSTRAINT = {
       // Reference field is empty — nothing to compare against yet.
       return null;
     }
-    const valueAsString =
-      field.uiState === undefined ? "" : String(field.uiState);
+    const valueAsString = uiStateAsText(field.uiState);
     if (valueAsString === otherFieldValue) {
       return null;
     }
@@ -12708,8 +12702,7 @@ CONSTRAINT_ATTRIBUTE_SET.add("data-same-as");
 
 
 const applyRule = (field) => {
-  const valueAsString =
-    field.uiState === undefined ? "" : String(field.uiState);
+  const valueAsString = uiStateAsText(field.uiState);
   return SINGLE_SPACE_RULE.applyOn(true, valueAsString);
 };
 
@@ -36535,9 +36528,9 @@ const getInvalidCharsMessage = (
   uiState,
   { charClass, messageKey, uiStateNow },
 ) => {
-  const str = uiState === undefined ? "" : String(uiState);
+  const str = uiStateAsText(uiState);
   if (compileCharClassAnchored(charClass).test(str)) return null;
-  const strNow = uiStateNow === undefined ? "" : String(uiStateNow);
+  const strNow = uiStateAsText(uiStateNow);
   if (
     countCharsOutsideClass(str, charClass) <=
     countCharsOutsideClass(strNow, charClass)
@@ -36550,9 +36543,9 @@ const getInvalidCharsMessage = (
 // Paste / set: truncate what the gesture adds beyond the limit.
 const getLengthOverflowResult = (uiState, { maxLength, uiStateNow }) => {
   if (maxLength === undefined) return null;
-  const str = uiState === undefined ? "" : String(uiState);
+  const str = uiStateAsText(uiState);
   if (str.length <= maxLength) return null;
-  const strNow = uiStateNow === undefined ? "" : String(uiStateNow);
+  const strNow = uiStateAsText(uiStateNow);
   if (str.length <= strNow.length) return null;
   return {
     fixedValue: str.slice(0, maxLength),
@@ -55439,6 +55432,10 @@ const SlideContainer = ({
   // one being travelled TO while the track moves. What the next travel departs
   // from, because it is what one is looking at.
   const drawnAreaRef = useRef(undefined);
+  // The movement the track is playing, while it plays: the slide it is leaving
+  // and the slide it is going to. A hand landing on the box takes it over from
+  // its origin (see onStart in createTravelHandlers).
+  const movingRef = useRef(null);
   // Which way the travel about to be drawn goes, when whatever asked for it
   // knows: a window stepping off its last slide comes back on its first, and
   // only the press says that is a step forward — the map, read between those
@@ -55700,6 +55697,7 @@ const SlideContainer = ({
     }
     stageRef.current = null;
     trackAnimationRef.current = null;
+    movingRef.current = null;
     // At rest the picture IS the current slide, whatever the last gesture wrote
     // there: an indicator has nothing left to lean towards.
     paintTravelProgress(0);
@@ -55894,7 +55892,7 @@ const SlideContainer = ({
     // there, and when it is over this is what holds. Except under a hand-off
     // still waiting for its travel: the track stays where the finger left it,
     // until the render that moves it or the frame after which the gesture gives
-    // up on it (see returnToRest in onEnd).
+    // up on it (see settleTowards in onEnd).
     if (!travelFromRef.current) {
       track.style.setProperty("--slide-container-offset", offset);
     }
@@ -55929,6 +55927,10 @@ const SlideContainer = ({
         duration: durationMs * travelRatio,
         easing
       });
+      movingRef.current = {
+        from: drawnArea,
+        to: currentArea
+      };
       // The trait travels with the slides: from where the gesture left it when
       // there was one, from a whole box away when the travel was asked for.
       const progressFrom = travelProgressFromRef.current ?? (travelStep ? travelStep.x || travelStep.y : 0);
@@ -56714,7 +56716,7 @@ const SlideContainer = ({
   // The two slides the gesture can bring in, placed one box either side of the
   // one being dragged — the same stage a travel builds, except that both ends
   // are set up at once because the finger has not said yet which way it goes.
-  const stageDrag = drag => {
+  const stageDrag = (drag, currentArea) => {
     const {
       slideElements,
       placeOf
@@ -56742,7 +56744,7 @@ const SlideContainer = ({
     }
     stageRef.current = {
       placeByArea,
-      area: drag.area
+      area: currentArea
     };
     for (const slideElement of slideElements) {
       const area = readArea(slideElement);
@@ -56758,33 +56760,63 @@ const SlideContainer = ({
     }
   };
 
-  // Let go of without enough of a gesture to travel: the slide comes back to
-  // where it was, over the distance it was pulled — so a slide barely moved
-  // snaps back and one dragged most of the way there takes its time.
-  const returnToRest = drag => {
+  // Let go of, and the slides go where the gesture leaves them: back on the
+  // slide being dragged when nothing travels, on to the slide arriving when a
+  // travel caught in flight is let carry on. Over the distance left to cover,
+  // so a slide barely moved snaps back and one dragged most of the way there
+  // takes its time.
+  const settleTowards = (drag, area) => {
     const track = trackRef.current;
     if (!track) {
       return;
     }
-    const restOffset = `${drag.baseOffset.x}px ${drag.baseOffset.y}px`;
+    const stage = stageRef.current;
+    const {
+      placeOf
+    } = readMap();
+    const place = stage?.placeByArea.get(area) || placeOf.get(area) || {
+      x: 0,
+      y: 0
+    };
+    const restPx = {
+      x: -place.x * drag.box.width,
+      y: -place.y * drag.box.height
+    };
+    const nowPx = {
+      x: drag.baseOffset.x + drag.pull.x,
+      y: drag.baseOffset.y + drag.pull.y
+    };
+    const restOffset = `${restPx.x}px ${restPx.y}px`;
     const durationMs = durationToMs(duration);
-    const pulled = Math.abs(drag.pull[drag.axis]);
     const size = drag.axis === "x" ? drag.box.width : drag.box.height;
+    const left = Math.abs(restPx[drag.axis] - nowPx[drag.axis]);
     trackAnimationRef.current?.cancel();
     trackAnimationRef.current = null;
     track.style.setProperty("--slide-container-offset", restOffset);
-    if (!durationMs || !pulled) {
+    if (!durationMs || !left) {
       paintTravelProgress(0);
       settleTravel();
       return;
     }
-    animateTravelProgress(drag.progress, durationMs * (pulled / size), "ease-out", drag.areaPulled);
+    // Which other slide the picture leans on while it arrives: the one being
+    // pulled in when it comes back on the dragged slide, the dragged slide
+    // itself when it goes on to the one arriving — and the trait is then a
+    // box short of that one, which is what it has to close.
+    const arrivesOnBase = area === drag.area;
+    const sign = drag.pull[drag.axis] > 0 ? 1 : -1;
+    const progressFrom = arrivesOnBase ? drag.progress : drag.progress - sign;
+    const otherArea = arrivesOnBase ? drag.areaPulled : drag.area;
+    movingRef.current = {
+      from: otherArea,
+      to: area
+    };
+    animateTravelProgress(progressFrom, durationMs * (left / size), "ease-out", otherArea);
     const animation = track.animate([{
-      translate: drag.offset
+      translate: `${nowPx.x}px ${nowPx.y}px`
     }, {
       translate: restOffset
     }], {
-      duration: durationMs * (pulled / size),
+      duration: durationMs * (left / size),
       easing: "ease-out"
     });
     trackAnimationRef.current = animation;
@@ -56815,11 +56847,14 @@ const SlideContainer = ({
     // value underneath it, which is the far end of the travel — the very jump
     // this is about.
     trackElement.style.setProperty("--slide-container-offset", offsetOnScreen);
+    const moving = movingRef.current || {};
     return {
       trackElement,
       onScreenPx,
       offsetOnScreen,
-      offsetTarget: offsetRef.current
+      offsetTarget: offsetRef.current,
+      from: moving.from,
+      to: moving.to
     };
   };
   // Which way a caught travel was going: a hand reaching for something moving
@@ -56866,8 +56901,6 @@ const SlideContainer = ({
         sign,
         target
       }) => {
-        let areaBack = axis === "x" ? areaTowards(-1, 0) : areaTowards(0, -1);
-        let areaOn = axis === "x" ? areaTowards(1, 0) : areaTowards(0, 1);
         // Everything positional is read HERE rather than when the pointer
         // landed: the travel that was playing then may have arrived since, and
         // it is what the slides are doing at the moment the gesture takes them
@@ -56878,39 +56911,66 @@ const SlideContainer = ({
           placeOf
         } = readMap();
         const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current")) || slideElements[0];
-        // The hold goToArea reads at the release, read again HERE, off the same
-        // slide and the same attribute: a slide that will refuse the arrival
-        // must not offer the journey. A locked direction simply has nowhere to
-        // go for the length of this gesture — the one case the gesture already
-        // knows, being the last slide of a walk. The hand then gets the wall it
-        // can lean on and never walk through (see drag_to_travel), the slide
-        // behind it stays offstage instead of being read on the way, and the
-        // release has nothing left to refuse.
-        // Nothing here about `released` (--navi-done): that is one particular
-        // departure letting go, decided as it happens, and a gesture armed
-        // before it has no such thing to read — the attribute as rendered is
-        // what the hand is answered from.
-        if (currentElement?.hasAttribute("data-prevent-nav-previous")) {
-          areaBack = undefined;
-        }
-        if (currentElement?.hasAttribute("data-prevent-nav-next")) {
-          areaOn = undefined;
-        }
         const box = track.getBoundingClientRect();
-        if (!areaBack && !areaOn || !currentElement || !box.width || !box.height ||
-        // Something else with a better claim on the gesture: a scroller
-        // between the finger and the slide, with room left that way.
-        scrollRoomTowards(target, currentElement, axis, sign)) {
+        if (!currentElement || !box.width || !box.height) {
           return false;
         }
-        const area = readArea(currentElement);
-        // Where the slide being dragged stands: where the stage put it while a
-        // travel is playing, its place on the map otherwise.
+        const currentArea = readArea(currentElement);
         const stage = stageRef.current;
-        const basePlace = stage?.placeByArea.get(area) || placeOf.get(area) || {
+        // Where a slide stands: where the stage put it while a travel is
+        // playing, its place on the map otherwise.
+        const placeOfArea = someArea => stage?.placeByArea.get(someArea) || placeOf.get(someArea) || {
           x: 0,
           y: 0
         };
+        // A travel caught in flight is measured from the slide it SET OFF from,
+        // with the slide it was going to as the one thing the hand can bring
+        // in — the way drag_to_travel reads a `slack`: how far the box already
+        // sits from its resting place, towards what is being pulled in. That is
+        // what makes its answer "carry on" mean arriving. Based on the slide
+        // arriving instead, the slack would point back at the origin, and a
+        // hand that merely touched the box would send it all the way back.
+        // A movement with no origin of its own (the track re-placed without a
+        // travel) is dragged from the slide shown, like any slide at rest.
+        const origin = caughtTravel && caughtTravel.from !== caughtTravel.to ? caughtTravel.from : null;
+        let area;
+        let areaBack;
+        let areaOn;
+        if (origin) {
+          area = origin;
+          const towardsEnd = axis === "x" ? placeOfArea(currentArea).x > placeOfArea(origin).x : placeOfArea(currentArea).y > placeOfArea(origin).y;
+          areaBack = towardsEnd ? undefined : currentArea;
+          areaOn = towardsEnd ? currentArea : undefined;
+        } else {
+          area = currentArea;
+          areaBack = axis === "x" ? areaTowards(-1, 0) : areaTowards(0, -1);
+          areaOn = axis === "x" ? areaTowards(1, 0) : areaTowards(0, 1);
+          // The hold goToArea reads at the release, read again HERE, off the
+          // same slide and the same attribute: a slide that will refuse the
+          // arrival must not offer the journey. A locked direction simply has
+          // nowhere to go for the length of this gesture — the one case the
+          // gesture already knows, being the last slide of a walk. The hand
+          // then gets the wall it can lean on and never walk through (see
+          // drag_to_travel), the slide behind it stays offstage instead of
+          // being read on the way, and the release has nothing left to refuse.
+          // Nothing here about `released` (--navi-done): that is one particular
+          // departure letting go, decided as it happens, and a gesture armed
+          // before it has no such thing to read — the attribute as rendered is
+          // what the hand is answered from.
+          if (currentElement.hasAttribute("data-prevent-nav-previous")) {
+            areaBack = undefined;
+          }
+          if (currentElement.hasAttribute("data-prevent-nav-next")) {
+            areaOn = undefined;
+          }
+          if (!areaBack && !areaOn ||
+          // Something else with a better claim on the gesture: a scroller
+          // between the finger and the slide, with room left that way.
+          scrollRoomTowards(target, currentElement, axis, sign)) {
+            return false;
+          }
+        }
+        const basePlace = placeOfArea(area);
         const baseOffset = {
           x: -basePlace.x * box.width,
           y: -basePlace.y * box.height
@@ -56941,7 +57001,8 @@ const SlideContainer = ({
           [axis]: slack
         };
         drag.progress = slack / size;
-        stageDrag(drag);
+        drag.areaPulled = slack > 0 ? areaBack : slack < 0 ? areaOn : null;
+        stageDrag(drag, currentArea);
         // From here the box is busy, whichever input asked: a wheel gesture and
         // a press must not both be moving the same track.
         dragRef.current = drag;
@@ -56972,24 +57033,50 @@ const SlideContainer = ({
         event
       }) => {
         dragRef.current = null;
-        if (!travels) {
-          returnToRest(drag);
+        // Where the gesture leaves the slides: on the one it was pulling in
+        // when it says so, back on the one it was dragging otherwise.
+        const destination = travels ? sign > 0 ? drag.areaBack : drag.areaOn : drag.area;
+        const {
+          slideElements,
+          placeOf
+        } = readMap();
+        const currentElement = slideElements.find(slideElement => slideElement.hasAttribute("data-current")) || slideElements[0];
+        const currentArea = currentElement && readArea(currentElement);
+        if (!destination || destination === currentArea) {
+          // Nothing to ask of the state: the slide it names is already the one
+          // shown — a drag let go of short of a travel, a travel caught in
+          // flight and let carry on. The track goes there on its own.
+          settleTowards(drag, destination || drag.area);
           return;
         }
         // Where the slide is being left, for the travel to depart from instead
         // of from the map.
         travelFromRef.current = drag.offset;
         // …and where the indicator is being left, said about the slide that is
-        // ARRIVING: the picture is `sign` of a box short of it, and that is
-        // what the travel about to be drawn has to close.
-        travelProgressFromRef.current = drag.progress - sign;
-        const moved = axis === "x" ? move(-sign, 0, event) : move(0, -sign, event);
+        // ARRIVING: a box short of the slide being pulled in, right where the
+        // finger left it when going back to the slide being dragged.
+        travelProgressFromRef.current = travels ? drag.progress - sign : drag.progress;
+        // Which way the travel goes, read off where the two slides stand
+        // rather than off the pull: a travel caught in flight and put back
+        // goes the way it came, whatever the finger did meanwhile.
+        const stage = stageRef.current;
+        const placeOfArea = someArea => stage?.placeByArea.get(someArea) || placeOf.get(someArea) || {
+          x: 0,
+          y: 0
+        };
+        const towards = Math.sign(placeOfArea(destination)[axis] - placeOfArea(currentArea)[axis]);
+        const moved = goToArea(destination, {
+          forward: towards > 0,
+          event,
+          dx: axis === "x" ? towards : 0,
+          dy: axis === "y" ? towards : 0
+        });
         if (!moved) {
           // Nowhere to go after all — a slide holding on to the user
           // (preventNav), or a caller that refused the change.
           travelFromRef.current = null;
           travelProgressFromRef.current = null;
-          returnToRest(drag);
+          settleTowards(drag, currentArea);
           return;
         }
         // A container whose `current` is held outside and was not moved: no
@@ -57000,7 +57087,7 @@ const SlideContainer = ({
           if (travelFromRef.current) {
             travelFromRef.current = null;
             travelProgressFromRef.current = null;
-            returnToRest(drag);
+            settleTowards(drag, currentArea);
           }
         });
       },
@@ -57015,9 +57102,15 @@ const SlideContainer = ({
           trackElement: trackCaught,
           offsetOnScreen,
           offsetTarget,
-          onScreenPx: caughtOnScreenPx
+          onScreenPx: caughtOnScreenPx,
+          from,
+          to
         } = caughtTravel;
         caughtTravel = null;
+        movingRef.current = {
+          from,
+          to
+        };
         if (offsetOnScreen === offsetTarget) {
           settleTravel();
           return;
@@ -63943,6 +64036,12 @@ const PickerCustom = props => {
     // PickerNative takes.
     pickerProps.resetOnError = true;
   }
+  if (pickerProps.resetOnAbort === undefined) {
+    // Same reasoning for an action the app abandons (an AbortError, e.g. a
+    // verification step the user dismissed): the popup is already closed, so
+    // the abandoned value rolls back instead of staying selected in the list.
+    pickerProps.resetOnAbort = true;
+  }
   // ref
   const popupRef = useRef(null);
   popupProps.ref = popupRef;