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

package/README.md

@@ -171,7 +171,10 @@ 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".
+- `CollectionToolbar` takes `searchPlaceholder`. `DataTable` takes `headerStyle="caps"` (column names and total-row labels in caps-condense) and `figures` (end-aligned cells in the figures family). With `treeLines`, parent rows take `collection.tree-parent-row-background` and `collection.tree-parent-row-hover`.
 
 
 ### App bar: AppBar, PickerButton and a segmented ToggleGroup

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

@@ -455,6 +455,10 @@ interface DataTableProps<T> extends CollectionViewProps<T> {
      * total, so totalStyle is ignored. The label defaults to the messages for page subtotal and total.
      */
     totalRows?: DataTableTotalRow<T>[];
+    /** 'caps' sets the column names, and the labels in total rows, in caps-condense, as on a working paper. */
+    headerStyle?: 'default' | 'caps';
+    /** Sets right-aligned cells (numbers) in the figures text family: mono, tabular. Total rows included. */
+    figures?: boolean;
     /** Draws an elbow connector from each child row's name back up to its parent. Use it with getSubRows. */
     treeLines?: boolean;
     /** 'small' shrinks the expand/collapse button so a parent row stays the height of its siblings. */
@@ -471,7 +475,7 @@ interface DataTableTotalRow<T = unknown> {
  * A data table, the APG pattern: one tab stop for the rows, headers announce sort, and it is
  * not a grid. A grid would say this is a spreadsheet, and it is not. AG Grid is that tool.
  */
-declare function DataTable<T>({ collection, label, caption, onRowActivate, getRowHref, activeRowId, rowActions, empty, loading, stickyHeader, stickyRowHeader, narrow, size, totalStyle, totalRows, treeLines, disclosure, getRowKind, rowNavigation, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+declare function DataTable<T>({ collection, label, caption, onRowActivate, getRowHref, activeRowId, rowActions, empty, loading, stickyHeader, stickyRowHeader, narrow, size, totalStyle, totalRows, treeLines, headerStyle, figures, disclosure, getRowKind, rowNavigation, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface CollectionPaginationProps {
     /** 1-based. */
@@ -510,13 +514,23 @@ interface CollectionToolbarProps<T> {
     }>;
     actions?: React.ReactNode;
     bulkActions?: React.ReactNode;
+    /** Placeholder text in the search box, such as "Find a client". The label still names it for screen readers. */
+    searchPlaceholder?: string;
+    /** '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, searchPlaceholder, 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>;
@@ -525,8 +539,9 @@ declare function ToolbarTabs<T>({ collection, column }: {
  * The icon and the clear button sit inside the field. The clear button is the only clear
  * control and shows only when there is text. Escape clears too.
  */
-declare function SearchField({ label, visible, value, onChange, clearLabel }: {
+declare function SearchField({ label, visible, placeholder, value, onChange, clearLabel }: {
     label: string;
+    placeholder?: string;
     visible?: boolean;
     value: string;
     onChange: (value: string) => void;

package/dist/custom/collection/index.js

@@ -446,6 +446,8 @@ function DataTable({
   totalStyle = "band",
   totalRows,
   treeLines,
+  headerStyle = "default",
+  figures,
   disclosure = "default",
   getRowKind,
   rowNavigation,
@@ -495,6 +497,8 @@ function DataTable({
       totalStyle,
       totalRows,
       treeLines,
+      headerStyle,
+      figures,
       disclosure,
       getRowKind,
       className,
@@ -506,7 +510,7 @@ function DataTable({
   );
   return /* @__PURE__ */ jsx("div", { ref: narrowWidth.ref, className: cn("CollectionView", asList ? className : void 0), "data-narrow": narrowWidth.under ? "" : void 0, children: view });
 }
-function TableView({ collection, columns, label, caption, colSpan, leaves, navigate, allSelected, someSelected, loading, empty, stickyHeader, stickyRowHeader, size, totalStyle, totalRows, treeLines, disclosure, getRowKind, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
+function TableView({ collection, columns, label, caption, colSpan, leaves, navigate, allSelected, someSelected, loading, empty, stickyHeader, stickyRowHeader, size, totalStyle, totalRows, treeLines, headerStyle, figures, disclosure, getRowKind, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
   const roving = useRovingRows(leaves.length, navigate);
   const scrollerRef = React4.useRef(null);
   const [overflows, setOverflows] = React4.useState(false);
@@ -560,6 +564,8 @@ function TableView({ collection, columns, label, caption, colSpan, leaves, navig
             "data-sticky-header": stickyHeader ? "" : void 0,
             "data-sticky-row-header": stickyRowHeader ? "" : void 0,
             "data-tree-lines": treeLines ? "" : void 0,
+            "data-header-style": headerStyle === "caps" ? "caps" : void 0,
+            "data-figures": figures ? "" : void 0,
             "data-disclosure": disclosure === "small" ? "small" : void 0,
             children: [
               caption ? /* @__PURE__ */ jsx("caption", { children: caption }) : null,
@@ -729,6 +735,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 +822,7 @@ function CollectionPagination({
   ] });
 }
 var COMBOBOX_AT = 12;
-function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, className }) {
+function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, searchPlaceholder, 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 +848,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(
@@ -849,11 +856,14 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, sh
         {
           label: searchLabel ?? "Search",
           visible: searchLabelVisible,
+          placeholder: searchPlaceholder,
           value: collection.search,
           onChange: collection.setSearch,
           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),
@@ -898,7 +908,7 @@ function ToolbarTabs({ collection, column }) {
     ] }, tabValue || "all");
   }) }) });
 }
-function SearchField({ label, visible, value, onChange, clearLabel = "Clear search" }) {
+function SearchField({ label, visible, placeholder, value, onChange, clearLabel = "Clear search" }) {
   const id = React4.useId();
   const input = React4.useRef(null);
   return /* @__PURE__ */ jsxs("div", { className: "CollectionSearch", children: [
@@ -911,6 +921,7 @@ function SearchField({ label, visible, value, onChange, clearLabel = "Clear sear
           ref: input,
           id,
           type: "search",
+          placeholder,
           value,
           onChange: (event) => onChange(event.target.value),
           onKeyDown: (event) => {