@jsenv/navi 0.29.153 → 0.29.154

package/dist/jsenv_navi.js

@@ -61160,12 +61160,14 @@ const SKELETON_LIST_ITEM_CLASS = "navi_list_item_skeleton";
 // inside it (see ListItems): a run draws the rows it frames and holds the room
 // of the others.
 const RenderWindowContext = createContext(null);
-// Carries List's own `columns` prop (a grid-template-columns value, e.g.
+// Carries List's own `itemColumns` prop (a grid-template-columns value, e.g.
 // "1fr auto auto") down to each ListItem/filler/fallback so they can render
 // as a subgrid row instead of a flex row — see ListItem's own use of this
-// context, and List's own `columns` doc, for the full rationale (table-like
+// context, and List's own `itemColumns` doc, for the full rationale (table-like
 // column sizing that stays correct across a virtualized, windowed item set).
-const ListColumnsContext = createContext(null);
+// List's own `columns` never reaches here: it lays the items themselves into
+// the track's columns, and an item then occupies a cell like anything else.
+const ListItemColumnsContext = createContext(null);
 // Carries the separator element/function down to each ListItem so separators
 // are only rendered between items that actually mount (post-filter, post-window).
 const SeparatorContext = createContext(null);
@@ -61251,6 +61253,8 @@ const css$x = /* css */`@layer navi {
   --x-list-scroll-spacing-bottom: calc(var(--list-footer-height, 0px) + var(--list-scroll-padding-bottom, 0px));
   --x-list-scroll-spacing-left: calc(var(--list-header-width, 0px) + var(--list-scroll-padding-left, 0px));
   --x-list-scroll-spacing-right: calc(var(--list-footer-width, 0px) + var(--list-scroll-padding-right, 0px));
+  min-width: 0;
+  max-width: var(--list-max-width, 100%);
   background-color: var(--x-list-background-color);
   border: var(--x-list-border-width) solid var(--x-list-border-color);
   border-top-left-radius: var(--x-corner-top-left-radius, var(--x-list-border-radius));
@@ -61258,8 +61262,6 @@ const css$x = /* css */`@layer navi {
   border-bottom-right-radius: var(--x-corner-bottom-right-radius, var(--x-list-border-radius));
   border-bottom-left-radius: var(--x-corner-bottom-left-radius, var(--x-list-border-radius));
   flex-direction: column;
-  min-width: 0;
-  max-width: 100%;
   transition: opacity .2s;
   display: flex;
   overflow: hidden;
@@ -61285,7 +61287,6 @@ const css$x = /* css */`@layer navi {
     min-width: inherit;
     max-width: var(--list-max-width, inherit);
     max-height: var(--list-max-height, inherit);
-    flex-wrap: inherit;
     overflow-anchor: none;
     overscroll-behavior: inherit;
     scrollbar-width: inherit;
@@ -61347,7 +61348,6 @@ const css$x = /* css */`@layer navi {
 
 .navi_list {
   box-sizing: border-box;
-  flex-wrap: inherit;
   outline: none;
   margin: 0;
   padding: 0;
@@ -61630,6 +61630,7 @@ const ListUI = props => {
     hoverWhileScrolling = false,
     lockSize,
     columns,
+    itemColumns,
     searchText,
     searchNoMatchMode = "remove",
     loading,
@@ -61864,6 +61865,7 @@ const ListUI = props => {
     styleCSSVars: LIST_STYLE_CSS_VARS,
     pseudoClasses: LIST_PSEUDO_CLASSES,
     hasChildUsingForwardedProps: true,
+    childPropSet: LIST_TRACK_PROP_SET,
     onnavi_request_scroll: e => {
       if (!Object.hasOwn(e.detail, "id")) {
         console.warn(`navi_request_scroll event is missing the "id" property in its detail.`, e);
@@ -61893,6 +61895,7 @@ const ListUI = props => {
       horizontal: horizontal,
       spacing: spacing,
       columns: columns,
+      itemColumns: itemColumns,
       tracker: tracker,
       renderWindow: renderWindow,
       virtual: virtual,
@@ -61958,12 +61961,47 @@ const ListFirstResolver = props => {
  *   horizontal?: boolean,
  *   spacing?: string,
  *   columns?: string,
+ *   itemColumns?: string,
+ *   alignX?: string,
+ *   alignY?: string,
+ *   flexWrap?: boolean,
  *   expandX?: boolean,
  *   expandY?: boolean,
  *   expand?: boolean,
  *   children?: import("ignore:preact").ComponentChildren,
  *   [key: string]: any,
  * }>}
+ * @param {string} [props.columns]
+ *   The list's own columns: a `grid-template-columns` value the ITEMS are laid
+ *   into — a sheet of icons (`repeat(auto-fill, minmax(2.5rem, 1fr))`), a row of
+ *   choices (`repeat(3, minmax(0, 1fr))`). Each item takes one cell, and an item
+ *   meant to take a whole line says so for itself
+ *   (`style={{ gridColumn: "1 / -1" }}`). Several items to a line is a shape the
+ *   list cannot virtualize — its render window and the room it holds for the
+ *   rows it does not draw both count one item per line — so it is for a set of
+ *   items the caller renders whole, not for a `<List.Items>` collection.
+ * @param {string} [props.itemColumns]
+ *   The columns inside an ITEM: a `grid-template-columns` value each item fills
+ *   with its own children, a table whose cells line up down the list. Every item
+ *   becomes a subgrid row spanning all the columns, so a column is as wide as
+ *   the widest cell in it among the rows actually in the DOM — real column
+ *   sizing that stays right as the window moves. Rows of a table, then, where
+ *   `columns` above is a grid of items; the two cannot both be set.
+ * @param {string} [props.alignX]
+ *   Where the items sit across the track — `alignX="center"` centres a
+ *   horizontal list's row of items inside a list wider than they are. Together
+ *   with `alignY`, `align` and `flexWrap`, this reaches the `<ul>` holding the
+ *   items rather than the frame drawn around it: the frame's only child is the
+ *   scroll box, which fills it and has nothing to arrange.
+ * @param {boolean} [props.flexWrap]
+ *   Lets a horizontal list's items fall to the next line instead of running
+ *   past the edge — a row of choices under a `maxWidth`, say. Same caveat as
+ *   `columns` above: a line holding several items is not virtualizable.
+ * @param {string} [props.overflow]
+ *   `"visible"` lets the items paint outside the list — a check in a row's
+ *   corner, a badge crossing the edge. A list clips by default, which is what
+ *   its rounded corners and its scroll box need, and the two cannot both be
+ *   true: asking for visible gives up the clipping, corners included.
  * @param {boolean} [props.itemTransition]
  *   Names each row, so a change the application wraps in
  *   `document.startViewTransition` is seen row by row — rows moving to their new
@@ -62087,6 +62125,7 @@ const ListContent = ({
   horizontal,
   spacing,
   columns,
+  itemColumns,
   tracker,
   renderWindow,
   virtual,
@@ -62132,6 +62171,7 @@ const ListContent = ({
       horizontal: horizontal,
       spacing: spacing,
       columns: columns,
+      itemColumns: itemColumns,
       ...listProps,
       tracker: tracker,
       renderWindow: renderWindow,
@@ -62143,6 +62183,12 @@ const ListContent = ({
     })
   });
 };
+// Where the items sit is a question about the track (the <ul>), not about the
+// frame around it: the frame's only child is the scroll box, which fills it and
+// has nothing to arrange. Box moves these out of the container's own props and
+// into BoxForwardedPropsContext, which ListContent reads and hands to the <ul>
+// — the same route `horizontal`, `spacing` and the column props take by hand.
+const LIST_TRACK_PROP_SET = new Set(["align", "alignX", "alignY", "flexWrap"]);
 const LIST_STYLE_CSS_VARS = {
   maxHeight: "--list-max-height",
   maxWidth: "--list-max-width",
@@ -63614,6 +63660,7 @@ const UnorderedList = ({
   horizontal,
   spacing,
   columns,
+  itemColumns,
   children,
   ...rest
 }) => {
@@ -63622,11 +63669,19 @@ const UnorderedList = ({
   // A loading state drawing nothing keeps the message: an announced count of 0
   // already tells us the list is empty (see ListUI's loadingPlaceholderShown).
   const suppressFallback = loadingPlaceholderShown || Boolean(error);
+
+  // One track, one template: the two column props are the same
+  // grid-template-columns seen from either end, and only differ in what an
+  // item does with it (see useItemColumnsOverrideProps).
+  if (columns && itemColumns) {
+    console.warn(`List: "columns" and "itemColumns" cannot both be set — they define the same track. "columns" lays the items into the columns; "itemColumns" gives each item the columns its own children fill.`);
+  }
+  const trackColumns = columns || itemColumns;
   return jsxs(Box, {
     as: "ul",
-    flex: columns ? undefined : horizontal ? "x" : "y",
-    grid: columns ? true : undefined,
-    gridTemplateColumns: columns,
+    flex: trackColumns ? undefined : horizontal ? "x" : "y",
+    grid: trackColumns ? true : undefined,
+    gridTemplateColumns: trackColumns,
     ...rest,
     spacing: spacing,
     baseClassName: "navi_list",
@@ -63648,8 +63703,8 @@ const UnorderedList = ({
                 value: virtual,
                 children: jsx(ListRowContext.Provider, {
                   value: null,
-                  children: jsx(ListColumnsContext.Provider, {
-                    value: columns || null,
+                  children: jsx(ListItemColumnsContext.Provider, {
+                    value: columns ? null : itemColumns || null,
                     children: jsx(ListDeclaredChildren, {
                       children: children
                     })
@@ -63718,8 +63773,8 @@ const VirtualFiller = ({
   });
 };
 
-// List's own `columns` prop (see ListColumnsContext) turns a list item into
-// a subgrid row instead of a flex row: its own children become direct grid
+// List's own `itemColumns` prop (see ListItemColumnsContext) turns a list item
+// into a subgrid row instead of a flex row: its own children become direct grid
 // items of List's own <ul>, so column widths are computed from whichever
 // rows are actually in the DOM (the currently-windowed items plus the
 // always-mounted header/footer) — real grid/table column sizing, not a
@@ -63729,11 +63784,10 @@ const VirtualFiller = ({
 // this they'd silently stay flex rows and break column alignment against
 // the rest of the grid). `flex` is force-cleared here because Box picks
 // flex over grid when both are set (see box.jsx's own boxFlow resolution),
-// so a caller-provided `flex` prop (leftover from a non-columns usage)
-// would otherwise silently win over this.
-const useListItemColumnsOverrideProps = callerStyle => {
-  const columns = useContext(ListColumnsContext);
-  if (!columns) {
+// so a caller-provided `flex` prop would otherwise silently win over this.
+const useItemColumnsOverrideProps = callerStyle => {
+  const itemColumns = useContext(ListItemColumnsContext);
+  if (!itemColumns) {
     return undefined;
   }
   return {
@@ -63797,11 +63851,11 @@ const ListItemPresentationResolver = props => {
   });
 };
 const ListItemPresentation = props => {
-  const columnsOverrideProps = useListItemColumnsOverrideProps(props.style);
+  const itemColumnsOverrideProps = useItemColumnsOverrideProps(props.style);
   return jsx(Box, {
     as: "li",
     ...props,
-    ...columnsOverrideProps
+    ...itemColumnsOverrideProps
   });
 };
 // A <List.Item skeleton> — a non-interactive placeholder row shown while a list
@@ -63831,14 +63885,14 @@ const ListItemSkeleton = props => {
     paddingY = "s",
     ...rest
   } = props;
-  const columnsOverrideProps = useListItemColumnsOverrideProps(rest.style);
+  const itemColumnsOverrideProps = useItemColumnsOverrideProps(rest.style);
   return jsx(Box, {
     as: "li",
     role: "presentation",
     "aria-hidden": "true",
     paddingY: paddingY,
     ...rest,
-    ...columnsOverrideProps,
+    ...itemColumnsOverrideProps,
     baseClassName: `navi_list_item ${SKELETON_LIST_ITEM_CLASS}`,
     children: children ?? jsx(Text, {
       loading: true
@@ -63999,7 +64053,7 @@ const ListItemReal = props => {
   // CSS Highlight API: mark matching text ranges from matchInfo.matchRanges,
   // if any (there is no standalone highlight prop — see ListItem's own doc).
   useSearchHighlight(ref, matchInfo?.matchRanges, [children, hidden]);
-  const columnsOverrideProps = useListItemColumnsOverrideProps(rest.style);
+  const itemColumnsOverrideProps = useItemColumnsOverrideProps(rest.style);
   // <List itemTransition>: the row carries the name it is to be paired by, and
   // the stylesheet turns it into a view-transition-name where a browser can
   // draw it inside the list (see the @supports block in the css above).
@@ -64068,7 +64122,7 @@ const ListItemReal = props => {
     id: id,
     "navi-list-item-real": "",
     ...rest,
-    ...columnsOverrideProps,
+    ...itemColumnsOverrideProps,
     index: undefined,
     selected: undefined
     // We use aria-hidden and not hidden because hidden would be forced to