@jsenv/navi 0.29.443 → 0.29.445

package/dist/dev/jsenv_navi.js

@@ -6502,6 +6502,10 @@ const CONTROL_PROP_SET = new Set([
   "charGuard",
   "maxLengthGuard",
 
+  // A checkbox that is a yes/no: `true` checked, `false` unchecked, instead of
+  // HTML's value-or-nothing (see resolveEmptyUIState).
+  "boolean",
+
   // This control answers for itself: it registers into no group, no form and no
   // picker around it (see useUIStateController). It belongs here rather than
   // being deleted off `props` where it is read: props is the vnode's own object
@@ -43198,6 +43202,14 @@ const useUIStateController = (
             return ownUIState || parentUIState;
           })
         : ownUIStateSignal;
+      // What the control is worth, which its action is bound to: what it
+      // holds, or its own empty when it holds nothing. Apart from
+      // uiStateSignal because unchecked is `undefined` there (the DOM reads any
+      // other value as checked), while a yes/no unchecked is worth `false`.
+      const emptyUIStateSignal = signal(emptyUIState);
+      const valueSignal = computed(() =>
+        uiStateOrEmpty(uiStateSignal.value, emptyUIStateSignal.value),
+      );
 
       // The two-way half of a bound `signal` prop: setting it re-renders and
       // re-syncs via state_prop_change, but with the same value → guarded as a
@@ -43246,6 +43258,7 @@ const useUIStateController = (
         // travel command ended up carrying a picker's selection: see
         // resolveCommandValue in commands.js.
         ownUIStateSignal,
+        valueSignal,
         value: controlInfo.value,
         // The suggestion this control started on — what tells a field showing
         // its default from one carrying an answer (see isUIStateHeld).
@@ -43309,8 +43322,12 @@ const useUIStateController = (
           }
           s.uiActionInternal?.(currentUIState, e);
           if (s.uiAction) {
-            debugUIState(`calling uiAction for ${controlType}`, currentUIState);
-            s.uiAction(currentUIState, e);
+            const value = uiStateOrEmpty(
+              currentUIState,
+              controller.emptyUIState,
+            );
+            debugUIState(`calling uiAction for ${controlType}`, value);
+            s.uiAction(value, e);
           }
           if (skipCommand) ; else {
             const command = controller.controlHostProps.command;
@@ -43814,6 +43831,7 @@ const useUIStateController = (
       return {
         controller,
         parentUiStateSignalHolder,
+        emptyUIStateSignal,
         ...liveValues(),
       };
     },
@@ -43935,6 +43953,7 @@ const useUIStateController = (
   );
   scope.parentUiStateSignalHolder.value =
     parentUIStateController?.uiStateSignal ?? null;
+  scope.emptyUIStateSignal.value = emptyUIState;
 
   const { controller } = scope;
   const controllerRef = controller.ref;
@@ -44145,14 +44164,11 @@ const keptAndNamedChildUIStates = (children, fallbackState, kept) => {
 const readNamedChildUIStates = (children, { warnNameless }) => {
   const values = {};
   for (const child of children) {
-    const { name, emptyUIState } = child;
+    const { name } = child;
     // A control holding nothing writes its own empty, not a hole: the key is in
     // the object either way, and what is read from it keeps the shape the
     // reader was promised (see resolveEmptyUIState).
-    const uiState =
-      child.uiState === undefined && emptyUIState !== undefined
-        ? emptyUIState
-        : child.uiState;
+    const uiState = uiStateOrEmpty(child.uiState, child.emptyUIState);
     if (!name) {
       if (isNamelessGrouping(child, uiState)) {
         Object.assign(
@@ -45499,11 +45515,10 @@ const useUIFacadeStateController = (props, realUIStateController) => {
           // whose last item was unselected holds [], the same thing clearing it
           // leaves — not a value that changes type on its owner the moment it
           // empties.
-          const { emptyUIState } = s.realUIStateController;
-          const uiStateToAdopt =
-            child.uiState === undefined && emptyUIState !== undefined
-              ? emptyUIState
-              : child.uiState;
+          const uiStateToAdopt = uiStateOrEmpty(
+            child.uiState,
+            s.realUIStateController.emptyUIState,
+          );
           s.realUIStateController.setUIState(uiStateToAdopt, propagateUpEvent);
           updatingRef.current = false;
         },
@@ -45821,8 +45836,9 @@ const resolveEmptyUIState = (props, controlType) => {
   if (controlType === "input" && props.type === "checkbox") {
     // A checkbox is a member of a set, the way HTML has it: checked it sends
     // its value ("on" by default), unchecked it sends nothing at all. Only one
-    // holding `true` is a yes/no, and a yes/no nobody said yes to is `false`.
-    return props.value === true ? false : undefined;
+    // declared `boolean` is a yes/no, and a yes/no nobody said yes to is
+    // `false`.
+    return props.boolean ? false : undefined;
   }
   const stateShape = props["navi-state-shape"];
   if (stateShape === "array") {
@@ -45834,6 +45850,15 @@ const resolveEmptyUIState = (props, controlType) => {
   return undefined;
 };
 
+// What a control holding `uiState` is worth: its own empty when it holds
+// nothing, so the reader gets the shape it was promised.
+const uiStateOrEmpty = (uiState, emptyUIState) => {
+  if (uiState === undefined && emptyUIState !== undefined) {
+    return emptyUIState;
+  }
+  return uiState;
+};
+
 // What a cleared control shows: its own empty, kept in the shape it was holding.
 const resolveClearedUIState = (controller) => {
   const { controlType, props } = controller;
@@ -46069,7 +46094,7 @@ const useControlProps = (props, {
   // of a form would re-render at each change of any of its fields.
   // eslint-disable-next-line no-unused-expressions
   uiStateController.ownUIStateSignal.value;
-  const boundAction = useAction(props.action, uiStateController.uiStateSignal);
+  const boundAction = useAction(props.action, uiStateController.valueSignal);
   const [controlRootProps, controlHostProps] = useInteractiveProps(props, {
     uiStateController,
     boundAction,
@@ -56643,7 +56668,8 @@ a.navi_button {
 
   &[data-icon] {
     --button-padding: 0;
-    display: inline-flex;
+    justify-content: center;
+    align-items: center;
   }
 
   &[data-cta] {
@@ -56741,7 +56767,12 @@ const ButtonUI = props => {
   });
   return jsxs(Box, {
     inline: true,
-    block: true,
+    block: true
+    // An icon is laid out as a box rather than on a line of text that is not
+    // there, which is also what makes alignX/alignY place it. Before the
+    // caller's props, so their own flex direction wins.
+    ,
+    flex: icon ? "x" : undefined,
     ...buttonControlRootProps,
     ...buttonControlHostProps,
     // eslint-disable-next-line react/no-children-prop
@@ -58190,7 +58221,23 @@ const css$M = /* css */`@layer navi {
 const InputCheckbox = props => {
   const defaultRef = useRef();
   props.ref = props.ref || defaultRef;
-  props.value = props.value === undefined ? "on" : props.value;
+  const valueWarnedRef = useRef(false);
+  if (!valueWarnedRef.current) {
+    // `true` is what `boolean` writes into `value` below, and Preact hands the
+    // same props object back on a re-render the component triggers itself.
+    if (props.boolean && props.value !== undefined && props.value !== true) {
+      valueWarnedRef.current = true;
+      console.warn(`[checkbox] "boolean" is true or false, its "value" is ignored: remove value={${JSON.stringify(props.value)}}.`);
+    } else if (!props.boolean && props.value === true) {
+      valueWarnedRef.current = true;
+      console.warn(`[checkbox] value={true} is a value like any other: unchecked is undefined. For a yes/no (true or false), use the "boolean" prop.`);
+    }
+  }
+  if (props.boolean) {
+    props.value = true;
+  } else if (props.value === undefined) {
+    props.value = "on";
+  }
   if (props.headless) {
     return jsx(InputCheckboxHeadless, {
       ...props,
@@ -81316,7 +81363,6 @@ const css$w = /* css */`@layer navi;
   background: var(--x-background);
   background-color: var(--x-background-color);
   border-radius: 1em;
-  align-items: stretch;
   display: inline;
   position: relative;
 
@@ -81326,13 +81372,25 @@ const css$w = /* css */`@layer navi;
 
   &[data-text-overflow] {
     display: inline;
+  }
 
-    & .navi_text_overflow_wrapper {
-      gap: 0;
-    }
+  &[data-has-button] {
+    align-items: center;
+    display: inline-flex;
+  }
+
+  & .navi_badge_label {
+    text-overflow: ellipsis;
+    text-box: trim-both cap alphabetic;
+    overflow-clip-margin: padding-box calc((1lh - 1em) / 2);
+    align-self: baseline;
+    min-width: 0;
+    overflow-x: clip;
   }
 
   & [role="button"] {
+    box-sizing: content-box;
+    height: 1cap;
     margin-top: calc(-1 * var(--x-badge-padding-top));
     margin-bottom: calc(-1 * var(--x-badge-padding-bottom));
     padding-top: var(--x-badge-padding-top);
@@ -81342,6 +81400,7 @@ const css$w = /* css */`@layer navi;
     cursor: pointer;
     pointer-events: auto;
     user-select: none;
+    flex-shrink: 0;
     align-items: center;
     display: inline-flex;
 
@@ -81390,6 +81449,16 @@ const BadgeUI = ({
     ref
   } = props;
   useAccentColorAttributes(ref, null);
+  const childArray = toChildArray(children);
+  if (childArray.some(isBadgeButton)) {
+    props = {
+      "inline": true,
+      "flex": true,
+      ...props,
+      "data-has-button": ""
+    };
+    children = wrapLabels(childArray);
+  }
   return jsx(Text, {
     className: withPropsClassName("navi_badge", className),
     bold: true,
@@ -81450,6 +81519,35 @@ const BadgeButtonUI = props => {
   });
 };
 Badge.Button = BadgeButton;
+const isBadgeButton = child => {
+  return isValidElement(child) && child.type === BadgeButton;
+};
+// Each run of children between buttons becomes one label: a single flex item
+// holding its text, so the trim reaches a bare string and the text keeps its
+// own baseline alignment inside.
+const wrapLabels = childArray => {
+  const items = [];
+  let run = [];
+  const closeRun = () => {
+    if (run.length > 0) {
+      items.push(jsx("span", {
+        className: "navi_badge_label",
+        children: run
+      }));
+      run = [];
+    }
+  };
+  for (const child of childArray) {
+    if (isBadgeButton(child)) {
+      closeRun();
+      items.push(child);
+    } else {
+      run.push(child);
+    }
+  }
+  closeRun();
+  return items;
+};
 
 installImportMetaCssBuild(import.meta);
 const css$v = /* css */`@layer navi;
@@ -82189,8 +82287,6 @@ const PickerChip = ({
   ...rest
 }) => {
   return jsxs(Badge, {
-    inline: true,
-    flex: true,
     ...rest,
     children: [children, jsx(Badge.Button, {
       selfInteractions: "click",
@@ -87002,14 +87098,7 @@ const SplitButton = props => {
         children: [jsx(Button, {
           icon: true,
           paddingX: "s",
-          expandY: true
-          // flex + align: the icon is the whole content, so it is laid out as
-          // its own box in the middle of the button. Left to flow inline it
-          // would sit on the baseline of a line of text that is not there,
-          // with the descender space still kept below it.
-          ,
-          flex: true,
-          align: "center",
+          expandY: true,
           "aria-label": menuLabel,
           command: "--navi-open",
           commandFor: menuId,
@@ -94128,8 +94217,6 @@ const ButtonCopyToClipboard = ({
       children: "Copié !"
     }), jsx(Button, {
       className: "navi_copy_button",
-      flex: "y",
-      alignY: "center",
       icon: true,
       revealOnInteraction: true,
       square: true,
@@ -95018,8 +95105,6 @@ const MessageBox = ({
             action: onClose,
             icon: true,
             border: "none",
-            alignX: "center",
-            alignY: "center",
             style: {
               ":hover": {
                 backgroundColor: "rgba(0, 0, 0, 0.1)"