@jsenv/navi 0.27.50 → 0.27.52

package/dist/jsenv_navi.js

@@ -8869,11 +8869,11 @@ import.meta.css = [/* css */`
     }
   }
   /*
-
-  It's very common to declare a display on component as follow
+  To set display on component, code usually do something like: 
   .component_class { display: component_display; }
 
-  This kill the default behavior of [hidden] attribute and we need to explicitly handle it with:
+  It overrides the default behavior of [hidden] attribute!
+  This needs to be explicitly handled with:
   .component_class[hidden] { display: none; }
 
   To avoid this extra work and potential mistakes we force the default behavior of [hidden] attribute.
@@ -22459,7 +22459,7 @@ const useUIStateController = (
       const currentUIState = uiStateController.uiState;
       const stateIsTheSame = compareTwoJsValues(newUIState, currentUIState);
       if (stateIsTheSame) {
-        if (controlType === "button") {
+        if (controlType === "button" || controlType === "link") {
           if (!isInternalEvent(e)) {
             uiStateController.onUIAction(e);
           }
@@ -23071,6 +23071,9 @@ const useUIGroupStateController = (
     if (childUIStateController.controlType === "button") {
       return false;
     }
+    if (childUIStateController.controlType === "link") {
+      return false;
+    }
     return true;
   };
 
@@ -23367,6 +23370,9 @@ const useUIGroupStateController = (
         if (childUIStateController.controlType === "button") {
           continue;
         }
+        if (childUIStateController.controlType === "link") {
+          continue;
+        }
         childUIStateController.clearUIState(propagateDownClearEvent);
       }
       onChange(e, { notifyExternal: true });
@@ -23465,6 +23471,9 @@ const useUIFacadeStateController = (props, realUIStateController) => {
     if (childController.controlType === "button") {
       return false;
     }
+    if (childController.controlType === "link") {
+      return false;
+    }
     if (childController.controlType === "facade") {
       return false;
     }
@@ -32091,8 +32100,12 @@ const getNowHoursRoundedToStep = (stepMinutes, offsetMinutes = 0) => {
   return `${String(h).padStart(2, "0")}:${String(m).padStart(2, "0")}`;
 };
 
-// Maps validity type names → navi input type names
+// Maps validity type names → navi input type names.
+// Numeric signal types must not fall through to the native type="number"
+// (which adds spinner buttons and has poor UX) — they map to navi_number instead.
 const VALIDITY_TYPE_TO_INPUT_TYPE = {
+  number: "navi_number",
+  integer: "navi_number",
   percentage: "navi_percentage",
 };
 
@@ -36318,6 +36331,10 @@ const PickerCustom = props => {
       Object.assign(pickerProps, {
         eventReactionDefinitions: {
           mouseDown: e => {
+            const popupEl = popupRef.current;
+            if (popupEl && popupEl.contains(e.target)) {
+              return null;
+            }
             if (expandedRef.current) {
               return {
                 name: "mousedown to close picker",
@@ -36334,6 +36351,10 @@ const PickerCustom = props => {
             };
           },
           click: e => {
+            const popupEl = popupRef.current;
+            if (popupEl && popupEl.contains(e.target)) {
+              return null;
+            }
             // When a label is clicked it transfers focus to the select
             // in that case we want to open it (otherwise we have already opened on mousedown interaction)
             return {
@@ -36352,40 +36373,6 @@ const PickerCustom = props => {
           }
         }
       });
-      Object.assign(popupProps, {
-        onMouseDown: e => {
-          if (e.button !== 0) {
-            return;
-          }
-          // mousedown inside popover should not bubble to the select (would re-open it if that mousedown closes it)
-          debugPopup(e, `"mousedown" received on popup -> prevent bubbling to picker (e.stopPropagation())`);
-          e.stopPropagation();
-        },
-        onClick: e => {
-          if (e.button !== 0) {
-            return;
-          }
-          // click inside popover should not bubble to the picker (would re-open it if that click closes it)
-          debugPopup(e, `"click" received on popup -> prevent bubbling to picker (e.stopPropagation())`);
-          e.stopPropagation();
-          // Here we can't preventDefault because the click might be needed to check a radio for instance.
-          // As a result we have to let it go through which means it could trigger form submission
-          // but we've put type="button" on the picker to ensure it can't submit the form
-          // so browser won't submit eventual form for clicks inside the popover/dialog
-          // e.preventDefault();
-        },
-        onKeyDown: e => {
-          // some keys pressed inside popover should not reach the picker button
-          // (like enter that would try to request action of closest form otherwise for instance)
-          if (e.key === "Enter") {
-            debugPopup(e, `"enter" received on popup -> prevent bubbling to picker (e.stopPropagation())`);
-            e.stopPropagation();
-            // preventDefault prevents the browser from dispatching a "click" on the
-            // picker button when focus moves to it synchronously during enterEffect
-            e.preventDefault();
-          }
-        }
-      });
     }
   }
   if (mode === "popover") {
@@ -37257,7 +37244,7 @@ const createItemTracker = (onChange) => {
   const visibleItemsSignal = signal([]);
   const countSignal = signal(0);
   const visibleCountSignal = signal(0);
-  const matchCountSignal = signal(0);
+  const noMatchCountSignal = signal(0);
 
   let notifyScheduled = false;
   const runNotify = () => {
@@ -37279,7 +37266,7 @@ const createItemTracker = (onChange) => {
       let visibleItemsChanged = false;
       const allItems = [];
       const visibleItems = [];
-      let newMatchCount = 0;
+      let newNoMatchCount = 0;
       for (let i = 0; i < allOrderedKeys.length; i++) {
         const key = allOrderedKeys[i];
         const item = allRegistrations.get(key);
@@ -37288,12 +37275,12 @@ const createItemTracker = (onChange) => {
         if (!allItemsChanged && item !== prevAllItems[i]) {
           allItemsChanged = true;
         }
-        if (!item.filtered && !item.hidden) {
+        if (item.match === false) {
+          newNoMatchCount++;
+        }
+        if (!item.hidden) {
           const visibleIdx = visibleItems.length;
           visibleItems.push(item);
-          if (item.matchScore > 0) {
-            newMatchCount++;
-          }
           if (!visibleItemsChanged && item !== prevVisibleItems[visibleIdx]) {
             visibleItemsChanged = true;
           }
@@ -37315,9 +37302,9 @@ const createItemTracker = (onChange) => {
         visibleItemsSignal.value = visibleItems;
         someChange = true;
       }
-      const matchCountModified = matchCountSignal.peek() !== newMatchCount;
-      if (matchCountModified) {
-        matchCountSignal.value = newMatchCount;
+      const noMatchCountModified = noMatchCountSignal.peek() !== newNoMatchCount;
+      if (noMatchCountModified) {
+        noMatchCountSignal.value = newNoMatchCount;
         someChange = true;
       }
       if (someChange) {
@@ -37516,7 +37503,7 @@ const createItemTracker = (onChange) => {
     visibleItemsSignal,
     countSignal,
     visibleCountSignal,
-    matchCountSignal,
+    noMatchCountSignal,
     _flushSync,
   };
 };
@@ -37583,8 +37570,8 @@ installImportMetaCssBuild(import.meta);const css$n = /* css */`
       --list-item-outline-color: var(--navi-focus-outline-color);
       /* Focus outline end */
       --list-item-border-color: var(--navi-control-border-color);
-      --list-item-padding-x-default: var(--navi-control-padding-x-default);
-      --list-item-padding-y-default: var(--navi-control-padding-y-default);
+      --list-item-padding-x-default: var(--navi-list-item-padding-x-default);
+      --list-item-padding-y-default: var(--navi-list-item-padding-y-default);
 
       /* Hover (mouse) */
       --list-item-background-color-hover: light-dark(#f5f5f5, #2a2a2a);
@@ -37633,6 +37620,14 @@ installImportMetaCssBuild(import.meta);const css$n = /* css */`
     }
   }
 
+  .navi_list_container[navi-selectable] {
+    .navi_list_fallback,
+    .navi_list_no_match_fallback {
+      --list-item-padding-x-default: inherit;
+      --list-item-padding-y-default: inherit;
+    }
+  }
+
   .navi_list_item[navi-selectable] {
     --list-item-padding-x-default: inherit;
     --list-item-padding-y-default: inherit;
@@ -37642,6 +37637,13 @@ installImportMetaCssBuild(import.meta);const css$n = /* css */`
     outline-offset: var(--list-item-outline-offset);
     cursor: var(--x-list-item-cursor);
 
+    .navi_checkbox {
+      --margin: 0;
+    }
+    .navi_radio {
+      --margin: 0;
+    }
+
     &[navi-selectable] {
       user-select: none;
     }
@@ -38253,6 +38255,11 @@ const applySearchHighlight = (el, highlight) => {
 installImportMetaCssBuild(import.meta);const ListItemTrackerContext = createContext(null);
 const GroupItemTrackerContext = createContext(null);
 const PendingScrollRefContext = createContext(null);
+// Controls how List.Item behaves when match=false (set via List searchNoMatchMode prop):
+//   "remove"    — remove from DOM (default)
+//   "invisible_and_inert" — keep in DOM, invisible and non-interactive (preserves layout, no content visible)
+//   "muted"               — keep in DOM, visible but opacified and still interactive
+const SearchNoMatchModeContext = createContext("remove");
 
 // When total rendered items exceeds renderBudget, a render window [start, end)
 // is activated to cap the number of DOM nodes. Items outside the window return
@@ -38454,6 +38461,14 @@ const css$m = /* css */`
     scroll-margin-right: var(--x-list-scroll-spacing-right);
     scroll-margin-bottom: var(--x-list-scroll-spacing-bottom);
     scroll-margin-left: var(--x-list-scroll-spacing-left);
+
+    &[aria-hidden="true"] {
+      opacity: 0;
+    }
+
+    &[navi-muted] {
+      opacity: 0.35;
+    }
   }
 
   /* Virtual scroll fillers — must remain invisible.
@@ -38479,10 +38494,10 @@ const css$m = /* css */`
      Using order ensures fallbacks always appear after items regardless of DOM order.
      matchFallback intentionally shares the same order as fallback so it appears
      at the same visual position — after an input if present but before any items
-     still displayed (non-matching items remain in DOM with hidden prop):
+     still displayed (non-matching items remain in DOM, invisible_and_inert or muted):
        1. Input (sticky header, order: -2)
-       2. matchFallback (order: -1)
-       3. hidden items (regular order, after DOM flow)
+       2. searchFallback (order: -1)
+       3. invisible/dim items (regular order, after DOM flow)
        4. HOT FIX OF THE DEAD for bottom filler + preact issue: order: 1
        5. sticky footer (order: 2)
   */
@@ -38496,12 +38511,39 @@ const css$m = /* css */`
     order: -2;
   }
   .navi_list_fallback,
-  .navi_list_no_match_fallback {
+  .navi_list_search_fallback {
     order: -1;
     color: light-dark(#888, #aaa);
     &[navi-default] {
       display: inline;
-      padding: var(--list-item-padding);
+      padding-top: var(
+        --list-item-padding-top,
+        var(
+          --list-item-padding-y,
+          var(--list-item-padding, var(--list-item-padding-y-default))
+        )
+      );
+      padding-right: var(
+        --list-item-padding-right,
+        var(
+          --list-item-padding-x,
+          var(--list-item-padding, var(--list-item-padding-x-default))
+        )
+      );
+      padding-bottom: var(
+        --list-item-padding-bottom,
+        var(
+          --list-item-padding-y,
+          var(--list-item-padding, var(--list-item-padding-y-default))
+        )
+      );
+      padding-left: var(
+        --list-item-padding-left,
+        var(
+          --list-item-padding-x,
+          var(--list-item-padding, var(--list-item-padding-x-default))
+        )
+      );
       text-align: center;
       user-select: none;
     }
@@ -38575,37 +38617,6 @@ const css$m = /* css */`
     }
   }
 `;
-
-/**
- * List — generic virtualized scroll container.
- *
- * Renders children inside a scrollable container with an optional render budget
- * for virtual scrolling. Items must use <ListItem> to participate in tracking.
- *
- * Props:
- *   keyboardInteractions  — when true, attaches arrow/enter/escape keyboard shortcuts
- *                          that dispatch navi_list_nav / navi_list_confirm / navi_list_clear
- *                          to the list container. Pair with uiAction for a full keyboard-
- *                          navigable list.
- *   uiAction             — called with the selected value on confirm. When provided
- *                          the list becomes interactive: tracks hover and keyboard-
- *                          pointed state, handles navi_list_nav / navi_list_clear /
- *                          navi_list_confirm custom events via ListInteractionContext.
- *   popover              — when true, renders as a managed popover positioned near
- *                          an anchor element via navi_list_open / navi_list_close events.
- *   renderBudget         — max items in DOM at once (default 100, virtual scroll when exceeded)
- *   virtualItemSize     — fixed px size per item (width if horizontal, height otherwise) when all items have the same size.
- *                          Enables precise virtual-scroll filler sizing without a DOM
- *                          measurement pass. Required when renderBudget is active and
- *                          item height is known up-front.
- *   fallback             — content shown when no items exist at all
- *   matchFallback         — content shown when items exist but all are hidden (e.g. no search match)
- *   separator            — element or function(index, { previousItem, currentItem }) inserted between visible items
- *   lockSize             — when true, captures the container's dimensions on first render
- *                          (always in unfiltered state). Those values become min-width/
- *                          min-height so filtering cannot collapse the layout.
- *   ...rest              — forwarded to the outer scroll container <Box>
- */
 const ListUI = props => {
   import.meta.css = [css$m, "@jsenv/navi/src/control/list/list.jsx"];
   const {
@@ -38614,7 +38625,7 @@ const ListUI = props => {
     renderBudgetSkipCheck,
     role,
     fallback,
-    noMatchFallback,
+    searchFallback,
     separator,
     children,
     popover,
@@ -38625,6 +38636,7 @@ const ListUI = props => {
     virtualItemSize,
     lockSize,
     searchText,
+    searchNoMatchMode = "remove",
     horizontal,
     spacing,
     ...rest
@@ -38714,8 +38726,8 @@ const ListUI = props => {
     children: jsx(ListContent, {
       role: role,
       fallback: fallback,
-      noMatchFallback: noMatchFallback,
-      searchText: searchText,
+      searchFallback: searchFallback,
+      searchNoMatchMode: searchNoMatchMode,
       separator: separator,
       expandX: expandX,
       expand: expand,
@@ -38739,12 +38751,39 @@ const ListFirstResolver = props => {
     ...props
   });
 };
+
+/**
+ * List — generic virtualized scroll container.
+ * Items must use <List.Item> to participate in tracking.
+ *
+ * @type {import("ignore:preact").FunctionComponent<{
+ *   selectable?: boolean,
+ *   action?: (value: any) => void,
+ *   uiAction?: (value: any) => void,
+ *   popover?: boolean,
+ *   renderBudget?: number,
+ *   virtualItemSize?: number,
+ *   fallback?: import("ignore:preact").ComponentChildren,
+ *   searchFallback?: import("ignore:preact").ComponentChildren,
+ *   searchText?: string,
+ *   searchNoMatchMode?: "remove" | "invisible_and_inert" | "muted",
+ *   separator?: boolean | import("ignore:preact").ComponentChildren,
+ *   lockSize?: boolean,
+ *   horizontal?: boolean,
+ *   spacing?: string,
+ *   expandX?: boolean,
+ *   expand?: boolean,
+ *   maxHeight?: string | number,
+ *   children?: import("ignore:preact").ComponentChildren,
+ *   [key: string]: any,
+ * }>}
+ */
 const List = createComponentResolver([ListFirstResolver, ListSelectableResolver, ListUI]);
 const ListContent = ({
   role,
   fallback,
-  noMatchFallback,
-  searchText,
+  searchFallback,
+  searchNoMatchMode,
   separator,
   expandX,
   expand,
@@ -38762,8 +38801,8 @@ const ListContent = ({
     children: jsx(UnorderedList, {
       role: role,
       fallback: fallback,
-      noMatchFallback: noMatchFallback,
-      searchText: searchText,
+      searchFallback: searchFallback,
+      searchNoMatchMode: searchNoMatchMode,
       separator: separator === true ? jsx(Separator, {
         margin: "0"
       }) : separator,
@@ -39190,8 +39229,8 @@ const UnorderedList = ({
   renderWindow,
   virtualItemSizeSignal,
   fallback,
-  noMatchFallback,
-  searchText,
+  searchFallback,
+  searchNoMatchMode,
   separator,
   horizontal,
   spacing,
@@ -39208,20 +39247,22 @@ const UnorderedList = ({
     children: [jsx(BeforeFiller, {
       virtualItemSizeSignal: virtualItemSizeSignal,
       renderWindowStart: renderWindow.start
-    }), jsx(NoMatchFallback, {
-      noMatchFallback: noMatchFallback,
-      tracker: tracker,
-      searchText: searchText
+    }), jsx(SearchFallback, {
+      searchFallback: searchFallback,
+      tracker: tracker
     }), jsx(Fallback, {
       fallback: fallback,
       tracker: tracker
-    }), jsx(RenderWindowContext.Provider, {
-      value: renderWindow,
-      children: jsx(SeparatorContext.Provider, {
-        value: separator ?? null,
-        children: jsx(ListItemTrackerContext.Provider, {
-          value: tracker,
-          children: children
+    }), jsx(SearchNoMatchModeContext.Provider, {
+      value: searchNoMatchMode,
+      children: jsx(RenderWindowContext.Provider, {
+        value: renderWindow,
+        children: jsx(SeparatorContext.Provider, {
+          value: separator ?? null,
+          children: jsx(ListItemTrackerContext.Provider, {
+            value: tracker,
+            children: children
+          })
         })
       })
     }), jsx(AfterFiller, {
@@ -39231,31 +39272,33 @@ const UnorderedList = ({
     })]
   });
 };
-const NoMatchFallback = ({
+
+// Show when all matchable items (those with a match prop) are non-matching.
+// The match prop on List.Item signals participation in a matching system
+// (search, filter, etc.). searchFallback appears when every such item has match=false.
+const SearchFallback = ({
   tracker,
-  noMatchFallback,
-  searchText
+  searchFallback
 }) => {
   const itemCount = tracker.countSignal.value;
-  const visibleItemCount = tracker.visibleCountSignal.value;
-  const matchCount = tracker.matchCountSignal.value;
-  // Show when all items are filtered out (filtered prop), or when search is
-  // active but no visible item has a positive match score.
-  const allHidden = itemCount > 0 && visibleItemCount === 0;
-  const noneMatch = searchText && visibleItemCount > 0 && matchCount === 0;
-  const showMatchFallback = allHidden || noneMatch;
-  if (noMatchFallback === undefined) {
-    noMatchFallback = allHidden ? naviI18n("list.no_match") : naviI18n("list.no_match_rest_shown");
+  const noMatchCount = tracker.noMatchCountSignal.value;
+  const showMatchFallback = noMatchCount > 0 && noMatchCount === itemCount;
+  if (searchFallback === undefined) {
+    searchFallback = naviI18n("list.no_match");
+  }
+  if (!searchFallback) {
+    // explicitely disabled by user (<List searchFallback={false|null|''}>)
+    return null;
   }
   if (!showMatchFallback) {
     return null;
   }
   return jsx(ListItem, {
     role: "presentation",
-    className: "navi_list_item navi_list_no_match_fallback",
+    className: "navi_list_item navi_list_search_fallback",
     hidden: !showMatchFallback,
-    "navi-default": typeof noMatchFallback === "string" ? "" : undefined,
-    children: noMatchFallback
+    "navi-default": typeof searchFallback === "string" ? "" : undefined,
+    children: searchFallback
   });
 };
 const Fallback = ({
@@ -39360,6 +39403,18 @@ const ListItemUI = props => {
   props.id = props.id || idDefault;
   const renderWindow = useContext(RenderWindowContext);
   const tracker = useContext(ListItemTrackerContext);
+  const searchNoMatchMode = useContext(SearchNoMatchModeContext);
+  // Derive filtered/hidden/nonMatching from the `match` prop + searchNoMatchMode context.
+  // The `match` prop replaces the older `filtered`/`hidden` per-item props.
+  if (props.match === false) {
+    if (searchNoMatchMode === "remove") {
+      props.filtered = true;
+    } else if (searchNoMatchMode === "invisible_and_inert") {
+      props.hidden = true;
+    } else if (searchNoMatchMode === "muted") {
+      props.muted = true;
+    }
+  }
   const item = props;
   const visibleIndex = tracker.useTrackItem(item);
   const groupTracker = useContext(GroupItemTrackerContext);
@@ -39419,6 +39474,7 @@ const ListItemReal = props => {
     ref,
     id,
     hidden,
+    muted,
     highlight,
     children,
     ...rest
@@ -39451,7 +39507,15 @@ const ListItemReal = props => {
     index: undefined,
     selected: undefined,
     matchScore: undefined,
-    hidden: hidden,
+    match: undefined
+    // We use aria-hidden and not hidden because hidden would be forced to
+    // display: none while here we want to keep it in the DOM to avoid layout shift
+    // but visually hidden
+    ,
+
+    "aria-hidden": hidden,
+    inert: hidden ? true : undefined,
+    "navi-muted": muted ? "" : undefined,
     ref: ref,
     children: children
   });