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

package/README.md

@@ -174,6 +174,7 @@ A tree in a DataTable (`getSubRows`) has options for a register of parents and c
 - `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,6 +514,8 @@ 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". */
@@ -524,7 +530,7 @@ interface CollectionToolbarProps<T> {
  * 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, searchWidth, meta, metaEnd, framed, 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>;
@@ -533,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,
@@ -816,7 +822,7 @@ function CollectionPagination({
   ] });
 }
 var COMBOBOX_AT = 12;
-function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, showSort, groupOptions, actions, bulkActions, searchWidth = "fill", meta, metaEnd, framed, 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);
@@ -850,6 +856,7 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, sh
         {
           label: searchLabel ?? "Search",
           visible: searchLabelVisible,
+          placeholder: searchPlaceholder,
           value: collection.search,
           onChange: collection.setSearch,
           clearLabel: collection.messages.clearSearch
@@ -901,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: [
@@ -914,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) => {