@jsenv/navi 0.27.7 → 0.27.9

package/dist/jsenv_navi.js

@@ -6506,13 +6506,13 @@ const DIMENSION_PROPS = {
     if (!value || value === "0") {
       return { flexShrink: 0 };
     }
-    return { flexShrink: 1 };
+    return { flexShrink: 1, minWidth: 0 };
   },
   shrinkY: (value) => {
     if (!value || value === "0") {
       return { flexShrink: 0 };
     }
-    return { flexShrink: 1 };
+    return { flexShrink: 1, minHeight: 0 };
   },
 
   scaleX: (value) => {
@@ -6725,7 +6725,10 @@ const VISUAL_PROPS = {
   overflow: PASS_THROUGH,
   overflowX: PASS_THROUGH,
   overflowY: PASS_THROUGH,
-  overflowEllipsis: () => {
+  overflowEllipsis: (value) => {
+    if (value === undefined || value === false) {
+      return null;
+    }
     return {
       overflow: "hidden",
       textOverflow: "ellipsis",
@@ -12445,6 +12448,27 @@ const useUIStateController = (
           value: newUIState,
         });
       }
+      // When this controller is a real input that has a visible proxy
+      // (linked via `navi-control-proxy-for`), mirror the new state to the
+      // proxy DOM synchronously. Otherwise the proxy would only catch up
+      // later through a React re-render — visible as e.g. two radios
+      // appearing checked at once between the real input update and the
+      // next render (radio_sibling_uncheck case).
+      if (el && !controlProxyFor) {
+        const proxyEl = findControlProxy(el);
+        if (proxyEl) {
+          const propValue = uiStateController.getPropFromState(newUIState);
+          proxyEl[statePropName] = propValue;
+          // Also notify the proxy's controller so it can stay in sync with
+          // state changes that originate from the real input (e.g. radio_sibling_uncheck).
+          // Without this the proxy only learns about deselection later via state_prop
+          // (Preact re-render), too late for lastActionValueRef to be updated.
+          dispatchInternalCustomEvent(proxyEl, "navi_ui_state_change", {
+            event: e,
+            value: newUIState,
+          });
+        }
+      }
       const internalBehavior = e.detail?.internalBehavior;
       if (internalBehavior) {
         return true;
@@ -23925,12 +23949,12 @@ const TextOverflow = ({
     flex: true,
     block: true,
     as: "div",
-    nowWrap: noWrap,
-    pre: !noWrap
+    pre: noWrap === undefined ? true : undefined
     // For paragraph we prefer to keep lines and only hide unbreakable long sections
     ,
 
-    preLine: rest.as === "p",
+    preLine: rest.as === "p" ? true : undefined,
+    noWrap: noWrap,
     ...rest,
     overflowEllipsis: undefined,
     "data-text-overflow": "",
@@ -33709,7 +33733,8 @@ const css$m = /* css */`
     );
 
     display: flex;
-    width: fit-content;
+    min-width: 0;
+    /* fit-content by default, but never wider than the parent */
     max-width: 100%;
     flex-direction: column;
     background-color: var(--x-list-background-color);
@@ -33760,8 +33785,6 @@ const css$m = /* css */`
   .navi_list {
     display: flex;
     box-sizing: border-box;
-    width: max-content;
-    min-width: 100%;
     margin: 0;
     padding: 0;
     flex-direction: column;
@@ -33782,7 +33805,8 @@ const css$m = /* css */`
     --x-list-item-font-weight: var(--list-item-font-weight);
 
     box-sizing: border-box;
-    min-width: 100%;
+    min-width: 0;
+    max-width: 100%;
     padding: var(--list-item-padding);
     color: var(--x-list-item-color);
     font-weight: var(--x-list-item-font-weight);
@@ -33874,9 +33898,7 @@ const css$m = /* css */`
 
   /* Hide groups that have no rendered items. */
   .navi_list_item_group {
-    &[data-hidden-while-empty]:not(:has([navi-list-item-real])) {
-      display: none;
-    }
+    min-width: 100%;
 
     .navi_list_item_group_label {
       position: sticky;
@@ -33896,8 +33918,12 @@ const css$m = /* css */`
       }
     }
     .navi_list_item_group_list {
+      display: flex;
+      width: max-content;
+      min-width: 100%;
       margin: 0;
       padding: 0;
+      flex-direction: column;
       list-style: none;
 
       /* Items inside a group must account for the sticky group label height
@@ -33908,6 +33934,10 @@ const css$m = /* css */`
         );
       }
     }
+
+    &[data-hidden-while-empty]:not(:has([navi-list-item-real])) {
+      display: none;
+    }
   }
 `;
 
@@ -34561,6 +34591,9 @@ const NoMatchFallback = ({
   if (noMatchFallback === undefined) {
     noMatchFallback = allHidden ? naviI18n("list.no_match") : naviI18n("list.no_match_rest_shown");
   }
+  if (!showMatchFallback) {
+    return null;
+  }
   return jsx(ListItem, {
     role: "presentation",
     className: "navi_list_item navi_list_no_match_fallback",
@@ -34578,6 +34611,9 @@ const Fallback = ({
   if (fallback === undefined) {
     fallback = naviI18n("list.empty");
   }
+  if (!showFallback) {
+    return null;
+  }
   return jsx(ListItem, {
     role: "presentation",
     className: "navi_list_item navi_list_fallback",
@@ -34593,6 +34629,9 @@ const TopFiller = ({
   const virtualItemHeight = virtualItemHeightSignal.value;
   const numberOfItemsAbove = renderWindowStart;
   const heightToFillAbove = numberOfItemsAbove * virtualItemHeight;
+  if (!heightToFillAbove) {
+    return null;
+  }
   return jsx("li", {
     className: "navi_list_virtual_filler"
     // eslint-disable-next-line react/no-unknown-property
@@ -34614,6 +34653,9 @@ const BottomFiller = ({
   const virtualItemHeight = virtualItemHeightSignal.value;
   const numberOfItemsBelow = Math.max(visibleItemCount - renderWindowEnd, 0);
   const heightToFillBelow = numberOfItemsBelow * virtualItemHeight;
+  if (!heightToFillBelow) {
+    return null;
+  }
   return jsx("li", {
     className: "navi_list_virtual_filler"
     // eslint-disable-next-line react/no-unknown-property
@@ -34962,6 +35004,10 @@ const css$l = /* css */`
     outline-color: var(--list-item-outline-color);
     outline-offset: var(--list-item-outline-offset);
 
+    &[navi-selectable] {
+      user-select: none;
+    }
+
     &[data-interactive] {
       cursor: pointer;
       user-select: none;
@@ -35356,6 +35402,7 @@ const Selectable = props => {
     },
     "aria-selected": checked,
     selected: checked,
+    "navi-selectable": "",
     children: jsxs(Field, {
       as: selectableArea === "manual" ? "div" : undefined,
       padding: "m",
@@ -35655,7 +35702,6 @@ installImportMetaCssBuild(import.meta);const css$k = /* css */`
     font-size: var(--picker-font-size);
     text-align: inherit;
     text-overflow: ellipsis;
-    white-space: nowrap;
     background-color: var(--x-picker-background-color);
     border-width: var(--picker-border-width);
     border-style: solid;