@scattered-light/loomiere-base-ui 0.12.0 → 0.13.0

package/README.md

@@ -171,6 +171,8 @@ A tree in a DataTable (`getSubRows`) has options for a register of parents and c
 - `useCollection({ pageBy: 'top-level', pageSize: 5 })` pages by parents, so a page holds whole parents with their children. The pager counts parents: pass `collection.pageTotal` as `total`. `collection.pageRows` is the leaf rows of the page, children of collapsed parents included.
 - `totalRows={[{ scope: 'page', label }, { scope: 'all', label }]}` writes several footer rows. A `page` row totals the current page and is ruled as a subtotal; an `all` row totals every filtered row and is ruled as the grand total. `label` is text or a function of the collection, such as `(c) => \`Page ${c.page} of ${c.pageCount} subtotal\``.
 - A `rowHeader` column's `cell` now draws the row's name: put a second line or a count beside it. The row's link or button keeps the plain name as its accessible name.
+- `treeLines` also gives parent, child and total rows their own heights, from `collection.tree-row-height-parent`, `tree-row-height-child`, `total-row-height-subtotal` and `total-row-height-grand` (all the dense row until a brand sets them), and starts the elbow `collection.tree-line-offset` in. With `disclosure="small"` the chevron takes `collection.disclosure-color`. A row with `onRowActivate` or `getRowHref` shows a pointer. `table.row-hover-color` is the text color on the hovered row.
+- `CollectionToolbar` takes `searchWidth="fixed"` (the search keeps `collection.search-fixed-width`), `meta` and `metaEnd` (quiet text beside the search and at the far end of the row) and `framed` (padding and a rule under it, inside a Sheet).
 - `treeLines` draws an elbow from each child's name back up to its parent. `disclosure="small"` shrinks the expand button so a parent is as tall as its children. `getRowKind={(row) => 'link'}` marks a row (`data-kind="link"`) whose name reads as a link, for a row such as "3 more Entities".
 
 

package/dist/custom/collection/index.d.ts

@@ -510,13 +510,21 @@ interface CollectionToolbarProps<T> {
     }>;
     actions?: React.ReactNode;
     bulkActions?: React.ReactNode;
+    /** 'fill' (the default) lets the search grow. 'fixed' gives it collection.search-fixed-width, so the meta beside it has room. */
+    searchWidth?: 'fill' | 'fixed';
+    /** Quiet text beside the search, such as "12 clients". */
+    meta?: React.ReactNode;
+    /** Quiet text at the far end of the row, such as "Sorted by most open". */
+    metaEnd?: React.ReactNode;
+    /** Pads the toolbar and rules it from the table below, for a toolbar inside a Sheet above an edge-to-edge table. */
+    framed?: boolean;
     className?: string;
 }
 /**
  * Tabs and search stay put while rows are selected. The trailing controls swap for the
  * selection bar, so the bar takes their place and the row does not grow.
  */
-declare function CollectionToolbarImpl<T>({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, className }: CollectionToolbarProps<T>): react_jsx_runtime.JSX.Element;
+declare function CollectionToolbarImpl<T>({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, searchWidth, meta, metaEnd, framed, className }: CollectionToolbarProps<T>): react_jsx_runtime.JSX.Element;
 declare function ToolbarTabs<T>({ collection, column }: {
     collection: CollectionApi<T>;
     column: CollectionColumn<T>;

package/dist/custom/collection/index.js

@@ -729,6 +729,7 @@ function DataRow({ entry, index, collection, columns, roving, navigate, onRowAct
       "aria-current": active ? "true" : void 0,
       "data-depth": entry.row.depth || void 0,
       "data-kind": rowKind,
+      "data-activates": href || onRowActivate ? "" : void 0,
       onClick: (event) => {
         const target = event.target;
         if (interactiveTarget(target) || selectingText()) return;
@@ -815,7 +816,7 @@ function CollectionPagination({
   ] });
 }
 var COMBOBOX_AT = 12;
-function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, className }) {
+function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, searchWidth = "fill", meta, metaEnd, framed, className }) {
   const tabs = collection.columns.find((column) => column.filter?.kind === "tabs");
   const selects = collection.columns.filter((column) => column.filter && column.filter.kind !== "tabs");
   const searchable = collection.columns.some((column) => column.searchable);
@@ -841,7 +842,7 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, sh
   }, [collection.selection, collection.hiddenSelectedCount, collection.messages]);
   const selecting = collection.selection.length > 0;
   const narrow = useUnderWidth("--sl-collection-narrow-width");
-  return /* @__PURE__ */ jsxs("div", { ref: narrow.ref, className: cn("CollectionToolbar", className), "data-selecting": selecting ? "" : void 0, "data-narrow": narrow.under ? "" : void 0, children: [
+  return /* @__PURE__ */ jsxs("div", { ref: narrow.ref, className: cn("CollectionToolbar", className), "data-selecting": selecting ? "" : void 0, "data-narrow": narrow.under ? "" : void 0, "data-search": searchWidth === "fixed" ? "fixed" : void 0, "data-framed": framed ? "" : void 0, children: [
     tabs ? /* @__PURE__ */ jsx(ToolbarTabs, { collection, column: tabs }) : null,
     /* @__PURE__ */ jsxs("div", { className: "CollectionToolbarMain", children: [
       searchable ? /* @__PURE__ */ jsx(
@@ -854,6 +855,8 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, sh
           clearLabel: collection.messages.clearSearch
         }
       ) : null,
+      meta ? /* @__PURE__ */ jsx("p", { className: "CollectionToolbarMeta", "aria-live": "polite", children: meta }) : null,
+      metaEnd ? /* @__PURE__ */ jsx("p", { className: "CollectionToolbarMeta CollectionToolbarMetaEnd", children: metaEnd }) : null,
       selecting ? /* @__PURE__ */ jsxs("div", { className: "CollectionSelectionBar", role: "region", "aria-label": "Selection", children: [
         /* @__PURE__ */ jsxs("p", { className: "CollectionCount", children: [
           collection.messages.selected(collection.selection.length),