@jsenv/navi 0.29.469 → 0.29.470

package/dist/dev/jsenv_navi.js

@@ -47811,8 +47811,10 @@ const createControlInfo = (props, {
   } else if (controlType === "details") {
     statePropName = "open";
     defaultStatePropName = "defaultOpen";
-    stateInitial = props.open || props.defaultOpen;
     value = props.value || "open";
+    // Held like a checkbox: the value while open, nothing while closed — the
+    // shape the toggle writes back (see details.jsx).
+    stateInitial = props.open || props.defaultOpen ? value : undefined;
   } else if (controlType === "picker" || controlType === "select") {
     statePropName = "value";
     defaultStatePropName = "defaultValue";
@@ -55877,6 +55879,9 @@ const DetailsField = props => {
     value,
     children
   } = detailsProps;
+  const {
+    uiStateController
+  } = controlChildrenWrapperProps;
   const open = Boolean(value);
   useFocusGroup(ref, {
     enabled: focusGroup,
@@ -55958,6 +55963,10 @@ const DetailsField = props => {
         return;
       }
       const details = ref.current;
+      // The browser has already toggled the element (a summary press, the
+      // arrow shortcuts): the state follows it whatever the gate says, or the
+      // marker and whoever reads the value keep the old one.
+      uiStateController.setUIState(details.open ? uiStateController.value : undefined, e);
       dispatchRequestInteraction(details, {
         event: e,
         wantAction: true,
@@ -87958,7 +87967,42 @@ const Spin = ({
         variant: "discrete",
         outlineWidth: group ? undefined : "0",
         textAlign: "center",
-        expandX: true,
+        expandX: true
+        // The arrow keys are the chevrons at the keyboard: one step the way
+        // the spin steps (`valueAtStep`, round at the ends when it loops),
+        // refused at a bound in the chevron's words. The field's own
+        // stepping (input_resolver_mode) stands down on a prevented keydown.
+        ,
+        onKeyDown: e => {
+          controlProps?.onKeyDown?.(e);
+          if (e.defaultPrevented) {
+            return;
+          }
+          if (e.key !== "ArrowUp" && e.key !== "ArrowDown") {
+            return;
+          }
+          // Up is towards the bigger values however the spin lies: what a
+          // field means by it, and what ▲ means on a NumberSpin.
+          const isNext = e.key === "ArrowUp";
+          if (!(isNext ? nextAllowed : previousAllowed)) {
+            e.preventDefault();
+            openCallout(boundMessage(isNext), {
+              anchorElement: middleRef.current,
+              status: "info",
+              openingEvent: e
+            });
+            return;
+          }
+          dispatchRequestInteraction(e.currentTarget, {
+            event: e,
+            name: "--navi-arrow-up-down",
+            prevented: () => e.preventDefault(),
+            allowed: () => {
+              setValue(isNext ? valueNext : valuePrevious, e);
+              e.preventDefault();
+            }
+          });
+        },
         uiAction: (valueNext, event) => {
           uiAction?.(valueNext, stepEventRef.current ?? event);
         }