@parallelworks/ui 0.90.0 → 0.92.0

package/dist/list/listSearch.d.ts

@@ -18,10 +18,26 @@ export declare function ListSearchControl({ search, placeholder, label: labelPro
     placeholder: string;
     label?: string | undefined;
 }): import("react").JSX.Element;
-export declare function ListCount({ total, matches, filterActive, noun, nounPlural, }: {
+/** What a list's count needs: how many there are, how many a search or filter leaves, and the
+ *  noun in both numbers. */
+export interface ListCountProps {
     total: number;
     matches: number;
     filterActive: boolean;
     noun: string;
     nounPlural: string;
-}): import("react").JSX.Element;
+}
+/** True inside a `ListPage` that shows its count under its rows, so a count placed in its toolbar
+ *  by hand gives way rather than showing twice. */
+export declare const ListFooterCountContext: import("react").Context<boolean>;
+/** True where a toolbar shares a line with the list's filter chips, at its end: a `ListToolbar`
+ *  there drops its own row's height and padding. */
+export declare const ListToolbarInlineContext: import("react").Context<boolean>;
+/** The count's words, "7 tokens" or "2 of 7 tokens", as a status so a screen reader hears the
+ *  count change as a filter narrows it. */
+export declare function ListCountText({ total, matches, filterActive, noun, nounPlural }: ListCountProps): import("react").JSX.Element;
+/** A list's count, placed by hand.
+ *  @deprecated Give `ListPage` a `count` instead (with its `total` and `matches`): it shows the
+ *  count under the last row, beside a `pager`, and hides it while the list shows its empty or
+ *  no-matches state. Inside a `ListPage` that shows its own count, this renders nothing. */
+export declare function ListCount(props: ListCountProps): import("react").JSX.Element;

package/dist/list/listSearch.js

@@ -5,7 +5,7 @@ import { Tooltip } from "../components/Tooltip.js";
 import { useLocale, usePersistedState, useStrings } from "../components/Provider.js";
 import { isTextEntryContext } from "../components/shortcutKey.js";
 import { formatInteger } from "../format.js";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/list/listSearch.tsx
 var NO_TERMS = [];
@@ -133,18 +133,34 @@ function ListSearchControl({ search, placeholder, label: labelProp }) {
 		})
 	});
 }
-function ListCount({ total, matches, filterActive, noun, nounPlural }) {
+/** True inside a `ListPage` that shows its count under its rows, so a count placed in its toolbar
+*  by hand gives way rather than showing twice. */
+var ListFooterCountContext = createContext(false);
+/** True where a toolbar shares a line with the list's filter chips, at its end: a `ListToolbar`
+*  there drops its own row's height and padding. */
+var ListToolbarInlineContext = createContext(false);
+/** The count's words, "7 tokens" or "2 of 7 tokens", as a status so a screen reader hears the
+*  count change as a filter narrows it. */
+function ListCountText({ total, matches, filterActive, noun, nounPlural }) {
 	const { list: t } = useStrings();
 	const locale = useLocale();
 	const count = (n) => formatInteger(n, locale);
+	return /* @__PURE__ */ jsx("span", {
+		role: "status",
+		className: "text-[13px] text-(--theme-muted-text-color)",
+		children: filterActive ? t.matchCount(count(matches), count(total), nounPlural) : t.count(count(total), total === 1 ? noun : nounPlural)
+	});
+}
+/** A list's count, placed by hand.
+*  @deprecated Give `ListPage` a `count` instead (with its `total` and `matches`): it shows the
+*  count under the last row, beside a `pager`, and hides it while the list shows its empty or
+*  no-matches state. Inside a `ListPage` that shows its own count, this renders nothing. */
+function ListCount(props) {
+	if (useContext(ListFooterCountContext)) return /* @__PURE__ */ jsx("span", { "aria-hidden": "true" });
 	return /* @__PURE__ */ jsx("div", {
 		className: "flex items-center h-8",
-		children: /* @__PURE__ */ jsx("span", {
-			role: "status",
-			className: "text-[13px] text-(--theme-muted-text-color)",
-			children: filterActive ? t.matchCount(count(matches), count(total), nounPlural) : t.count(count(total), total === 1 ? noun : nounPlural)
-		})
+		children: /* @__PURE__ */ jsx(ListCountText, { ...props })
 	});
 }
 //#endregion
-export { ListCount, ListSearchControl, useListSearch };
+export { ListCount, ListCountText, ListFooterCountContext, ListSearchControl, ListToolbarInlineContext, useListSearch };

package/dist/list/listView.d.ts

@@ -26,6 +26,11 @@ export interface ColumnDef {
      * column there: for something short that compares best lined up, like a
      * total. The first column never stacks; it is what the others stack under. */
     stack?: boolean;
+    /** Where a stacked column's value sits on the lines under the name. By default the stacked
+     *  values share a line, flowing and wrapping between them. `own` starts a line of its own, for
+     *  a value read first, such as a status; `join` stays on the line before it after a "·", for
+     *  one that belongs with that value, such as a job's nodes after its partition. */
+    stackLine?: StackLine | undefined;
     /** The `value` of the {@link OrderByOption} this column sorts by. Its header
      * then sorts the list: it shows, and sets, the same order as Display
      * options' Ordering. */
@@ -43,6 +48,9 @@ export interface ColumnDef {
 }
 /** Column responsive importance; `low` drops before `medium`. See {@link ColumnDef.priority}. */
 type ColumnPriority = 'low' | 'medium';
+/** How a stacked column's value lines up with the others under the name; see
+ *  {@link ColumnDef.stackLine}. */
+export type StackLine = 'own' | 'join';
 /** Whether a column is always shown and kept out of the column picker. */
 export declare function isLocked(col: ColumnDef): boolean;
 interface GroupByOption {
@@ -130,6 +138,8 @@ export interface ListViewChrome {
     /** Per visible column, whether it stacks under the first on a narrow
      * container ({@link ColumnDef.stack}); `ListRow` reads entry `i`. */
     columnStacks: boolean[];
+    /** Per visible column, the line its stacked value takes ({@link ColumnDef.stackLine}). */
+    columnStackLines?: (StackLine | undefined)[] | undefined;
     /** Whether the last column is a locked one, such as a delete button's: the
      * row's `⋯` then keeps a lane of its own after it rather than floating over
      * it on hover. */

package/dist/list/listView.js

@@ -94,6 +94,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 	const visibleColumns = useMemo(() => columns.filter((c) => !c.inline && (isLocked(c) || !hiddenKeys.includes(c.key))), [columns, hiddenKeys]);
 	const columnClasses = useMemo(() => visibleColumns.map(columnClass), [visibleColumns]);
 	const columnStacks = useMemo(() => visibleColumns.map(stacks), [visibleColumns]);
+	const columnStackLines = useMemo(() => visibleColumns.map((c) => c.stackLine), [visibleColumns]);
 	const last = visibleColumns.at(-1);
 	const lastColumnLocked = visibleColumns.length > 1 && last !== void 0 && !last.alwaysVisible && isLocked(last);
 	const reservesActionLane = lastColumnLocked || visibleColumns.length > 1 && last?.align === "end";
@@ -191,6 +192,7 @@ function useListView({ storageKey, sharedFiltersKey, columns, groupBys = [], def
 		visibleColumns,
 		columnClasses,
 		columnStacks,
+		columnStackLines,
 		lastColumnLocked,
 		reservesActionLane,
 		isVisible,