@jsenv/navi 0.29.60 → 0.29.62

package/dist/jsenv_navi.js

@@ -12622,10 +12622,10 @@ defineInteractionDetector({
     if (canReorder) {
       element.setAttribute(REORDERABLE_ATTRIBUTE, "");
     }
-    // What @jsenv/dom puts on a drag source: no iOS callout, the touch left to
-    // the scroll until the press becomes a grab, and the listener that lets the
-    // grab take it back. Its argument is the axis the SURROUNDINGS scroll on,
-    // which for a list is the axis the list runs on.
+    // What @jsenv/dom puts on a drag source: the axes written in the DOM for
+    // whoever else answers this press (a sheet pushed down to close it, a row of
+    // slides), no iOS callout, the touch left to the scroll until the press
+    // becomes a grab, and the listener that lets the grab take it back.
     const unmarkDragSource = markDragSource(element, axes);
 
     // What a release can mean, which is not all of what was declared: "grab" is a
@@ -24189,20 +24189,26 @@ const useUIStateController = (
                     e,
                     "dispatching synthetic input event without data for checkbox/radio",
                   );
-                  el.dispatchEvent(new Event("input", { bubbles: true }));
+                  dispatchSyntheticInput(
+                    el,
+                    new Event("input", { bubbles: true }),
+                    e,
+                  );
                   syntheticInputFired = true;
                 } else {
                   debugUIState(
                     e,
                     `dispatching synthetic input event with data "${newUIState}" for input`,
                   );
-                  el.dispatchEvent(
+                  dispatchSyntheticInput(
+                    el,
                     new InputEvent("input", {
                       bubbles: true,
                       cancelable: true,
                       inputType: "insertText",
                       data: newUIState,
                     }),
+                    e,
                   );
                   syntheticInputFired = true;
                 }
@@ -24214,7 +24220,11 @@ const useUIStateController = (
                 // A plain Event, not an InputEvent: that is what the browser
                 // itself fires on a select, and input_effect reads the value off
                 // the element anyway.
-                el.dispatchEvent(new Event("input", { bubbles: true }));
+                dispatchSyntheticInput(
+                  el,
+                  new Event("input", { bubbles: true }),
+                  e,
+                );
                 syntheticInputFired = true;
               }
               // TODO: textarea
@@ -25317,14 +25327,16 @@ const useUIFacadeStateController = (props, realUIStateController) => {
           }
           if (
             silent &&
-            child.uiState === undefined &&
-            s.realUIStateController.uiState !== undefined
+            uiStateHoldsNothing(child.uiState) &&
+            !uiStateHoldsNothing(s.realUIStateController.uiState)
           ) {
             // A silent sync means the child's own structure changed (children
             // mounted/unmounted), not that the user acted. A child that ends up
             // with no value there is one that currently *cannot* express one —
-            // a <List loading> holds no items yet — which must not read as the
-            // user clearing the picker, nor fire its uiAction.
+            // a <List loading> holds no items yet, a popup whose items are gone
+            // aggregates to the empty array its stateType falls back to — which
+            // must not read as the user clearing the picker, nor fire its
+            // uiAction.
             return;
           }
           updatingRef.current = true;
@@ -25445,6 +25457,33 @@ const isInternalEvent = (e) => {
   return INTERNAL_EVENT_SET.has(e.type);
 };
 
+/**
+ * The synthetic "input" event is how the new state reaches the outside world
+ * (`uiAction` is called from the input handler it triggers). It carries what
+ * caused the state change so a listener can tell a gesture apart from navi
+ * talking to itself: `findEvent(e, "navi_clear_ui_state")` answers "the user
+ * pressed the clear cross", the same way the facade hops are recognized.
+ */
+const dispatchSyntheticInput = (el, inputEvent, causeEvent) => {
+  chainEvent(inputEvent, causeEvent);
+  el.dispatchEvent(inputEvent);
+};
+
+// What a control says when it has nothing to say: no value at all, or the empty
+// array/object a group falls back to while it has no child to aggregate.
+const uiStateHoldsNothing = (uiState) => {
+  if (uiState === undefined) {
+    return true;
+  }
+  if (Array.isArray(uiState)) {
+    return uiState.length === 0;
+  }
+  if (uiState !== null && typeof uiState === "object") {
+    return Object.keys(uiState).length === 0;
+  }
+  return false;
+};
+
 /**
  * Core hooks for wiring navi field components to the action/validation system.
  *
@@ -30296,8 +30335,40 @@ const useDialogProps = props => {
     // argument at all) docks it against the viewport (layer="top"/isModal)
     // or its own positioned ancestor (layer="local", the same
     // positionedAncestor computed above), same mechanism as Popover's own
-    // custom renderer. applyNewPosition sets --container-position-remaining-height/-width
-    // from the result, same as popover.jsx.
+    // custom renderer. applyDialogPosition sets --container-position-remaining-height/-width
+    // from the result, same as popover.jsx — except for layer="top", see its
+    // own comment just above.
+    // The placement is a snapshot taken on a debounce; the size caps must not
+    // be one too. applyNewPosition writes --container-position-remaining-
+    // height/width on every reposition, from what pickPositionRelativeTo
+    // measured the container as at that instant. For layer="top" that value
+    // says nothing --dialog-maxmax-height/width doesn't already say live: the
+    // container IS the visual viewport and Dialog is never anchored, so the
+    // "remaining" space is always the whole container net of its own margins
+    // — the very definition of --dialog-maxmax-*, which tracks the visual
+    // viewport through --navi-vvh/--navi-app-height without waiting for
+    // anything. Identical values, one of them one debounce late.
+    //
+    // That lag stays invisible while the viewport SHRINKS — the two are
+    // combined with min(), so the live var is the one that binds and the
+    // dialog follows the mobile keyboard down, its top edge pinned. On the
+    // way back up the stale pixel value is the smaller one, so it binds
+    // instead and the dialog stays keyboard-sized until the debounced
+    // reposition fires — which then places a still-shrunk box in a
+    // full-height viewport (centered: visibly lower), grows it in the same
+    // call, and has to slide it back up: the bounce. Dropping the property
+    // for layer="top" leaves the live var alone in charge, so the height
+    // comes back exactly the way it left, from the bottom edge.
+    //
+    // Kept for layer="local": there the container is a real element, its own
+    // box is what the caps must read, and nothing in CSS tracks it.
+    const applyDialogPosition = position => {
+      applyNewPosition(dialogEl, position);
+      if (isModal) {
+        dialogEl.style.removeProperty("--container-position-remaining-height");
+        dialogEl.style.removeProperty("--container-position-remaining-width");
+      }
+    };
     const positionDialog = triggerEvent => {
       const {
         positionArea,
@@ -30327,8 +30398,8 @@ const useDialogProps = props => {
         event: triggerEvent
       };
       let position = pickPositionRelativeTo(dialogEl, null, pickOptions);
-      applyNewPosition(dialogEl, position);
-      // applyNewPosition above just set --container-position-remaining-
+      applyDialogPosition(position);
+      // applyDialogPosition above just set --container-position-remaining-
       // width/height to the real available space — narrower than whatever
       // dialogEl measured at just before (nothing, on a first open — see
       // popover.jsx's own identical comment on its own positionPopover for
@@ -30341,7 +30412,7 @@ const useDialogProps = props => {
       // correct it — that one only reacts on the *next* animation frame.
       if (dialogEl.offsetWidth !== position.width || dialogEl.offsetHeight !== position.height) {
         position = pickPositionRelativeTo(dialogEl, null, pickOptions);
-        applyNewPosition(dialogEl, position);
+        applyDialogPosition(position);
       }
       // A descendant's own visibleRectEffect (visible_rect.js — e.g. a
       // Callout anchored to something inside this Dialog) knowing to