@scattered-light/loomiere-base-ui 0.7.0 → 0.8.0

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

@@ -285,6 +285,7 @@ interface CollectionMessages {
     noResults: string;
     noResultsDescription: string;
     clearFilters: string;
+    clearSearch: string;
     nothingHere: string;
     previous: string;
     next: string;
@@ -431,12 +432,17 @@ interface DataTableProps<T> extends CollectionViewProps<T> {
     /** 'scroll' keeps the table. 'list' swaps in DataList when the table is narrower than collection.narrow-width. */
     narrow?: 'scroll' | 'list';
     size?: 'sm' | 'md';
+    /**
+     * How the footer's totals row looks. 'band' (the default) is the header tray. 'subtotal' rules
+     * a single line above it; 'grand' adds a double rule under it, as on a working paper.
+     */
+    totalStyle?: 'band' | 'subtotal' | 'grand';
 }
 /**
  * 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, 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, rowNavigation, className, }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
 
 interface CollectionPaginationProps {
     /** 1-based. */
@@ -486,11 +492,16 @@ declare function ToolbarTabs<T>({ collection, column }: {
     collection: CollectionApi<T>;
     column: CollectionColumn<T>;
 }): react_jsx_runtime.JSX.Element;
-declare function SearchField({ label, visible, value, onChange }: {
+/**
+ * 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 }: {
     label: string;
     visible?: boolean;
     value: string;
     onChange: (value: string) => void;
+    clearLabel?: string;
 }): react_jsx_runtime.JSX.Element;
 declare function FilterControl<T>({ collection, column }: {
     collection: CollectionApi<T>;

package/dist/custom/collection/index.js

@@ -443,6 +443,7 @@ function DataTable({
   stickyRowHeader = false,
   narrow = "scroll",
   size = "sm",
+  totalStyle = "band",
   rowNavigation,
   className
 }) {
@@ -487,6 +488,7 @@ function DataTable({
       stickyHeader,
       stickyRowHeader,
       size,
+      totalStyle,
       className,
       onRowActivate,
       getRowHref,
@@ -496,7 +498,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, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
+function TableView({ collection, columns, label, caption, colSpan, leaves, navigate, allSelected, someSelected, loading, empty, stickyHeader, stickyRowHeader, size, totalStyle, className, onRowActivate, getRowHref, activeRowId, rowActions }) {
   const roving = useRovingRows(leaves.length, navigate);
   const scrollerRef = React4.useRef(null);
   const [overflows, setOverflows] = React4.useState(false);
@@ -524,6 +526,7 @@ function TableView({ collection, columns, label, caption, colSpan, leaves, navig
   }, [stickyHeader, leaves.length, columns.length]);
   const filteredEmpty = collection.totalCount > 0 && collection.filteredCount === 0;
   const text = collection.messages;
+  const ruled = totalStyle !== "band";
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -570,17 +573,20 @@ function TableView({ collection, columns, label, caption, colSpan, leaves, navig
                 rowActions ? /* @__PURE__ */ jsx("th", { scope: "col", "data-width": "min", children: /* @__PURE__ */ jsx("span", { className: "visually-hidden", children: "Actions" }) }) : null
               ] }) }),
               collection.pageEntries.some((entry) => entry.kind === "group") ? groupedBodies({ collection, columns, leaves, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions, colSpan, filteredEmpty, empty, loading }) : /* @__PURE__ */ jsx("tbody", { children: bodyRows({ collection, columns, leaves, roving, navigate, onRowActivate, getRowHref, activeRowId, rowActions, colSpan, filteredEmpty, empty, loading }) }),
-              Object.keys(collection.totals).length ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { children: [
-                collection.canSelect ? /* @__PURE__ */ jsx("td", {}) : null,
-                columns.map((column, index) => /* @__PURE__ */ jsxs("td", { "data-align": alignOf(column), children: [
-                  index === 0 ? text.total : typeof column.total === "function" ? column.total(collection.filteredRows) : collection.totals[column.id] ?? "",
-                  index === 0 && collection.isFiltered ? /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
-                    " of ",
-                    collection.filteredCount,
-                    " filtered rows"
-                  ] }) : null
-                ] }, column.id)),
-                rowActions ? /* @__PURE__ */ jsx("td", {}) : null
+              Object.keys(collection.totals).length ? /* @__PURE__ */ jsx("tfoot", { children: /* @__PURE__ */ jsxs("tr", { "data-total": ruled ? totalStyle : void 0, children: [
+                collection.canSelect ? /* @__PURE__ */ jsx("td", { "data-rule": ruled ? "none" : void 0 }) : null,
+                columns.map((column, index) => (
+                  // Ruled totals draw their lines under the figures only, not the label or blank cells.
+                  /* @__PURE__ */ jsxs("td", { "data-align": alignOf(column), "data-rule": ruled && (index === 0 || !column.total) ? "none" : void 0, children: [
+                    index === 0 ? text.total : typeof column.total === "function" ? column.total(collection.filteredRows) : collection.totals[column.id] ?? "",
+                    index === 0 && collection.isFiltered ? /* @__PURE__ */ jsxs("span", { className: "visually-hidden", children: [
+                      " of ",
+                      collection.filteredCount,
+                      " filtered rows"
+                    ] }) : null
+                  ] }, column.id)
+                )),
+                rowActions ? /* @__PURE__ */ jsx("td", { "data-rule": ruled ? "none" : void 0 }) : null
               ] }) }) : null
             ]
           }
@@ -823,7 +829,8 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, sh
           label: searchLabel ?? "Search",
           visible: searchLabelVisible,
           value: collection.search,
-          onChange: collection.setSearch
+          onChange: collection.setSearch,
+          clearLabel: collection.messages.clearSearch
         }
       ) : null,
       selecting ? /* @__PURE__ */ jsxs("div", { className: "CollectionSelectionBar", role: "region", "aria-label": "Selection", children: [
@@ -848,7 +855,6 @@ function CollectionToolbarImpl({ collection, searchLabel, searchLabelVisible, sh
           }
         ) : null,
         showSort ? /* @__PURE__ */ jsx(SortControl, { collection }) : null,
-        collection.isFiltered ? /* @__PURE__ */ jsx(Button, { emphasis: "quiet", onClick: collection.clearFilters, children: "Clear filters" }) : null,
         actions ? /* @__PURE__ */ jsx("div", { className: "CollectionToolbarActions", children: actions }) : null
       ] })
     ] }),
@@ -871,26 +877,43 @@ function ToolbarTabs({ collection, column }) {
     ] }, tabValue || "all");
   }) }) });
 }
-function SearchField({ label, visible, value, onChange }) {
+function SearchField({ label, visible, value, onChange, clearLabel = "Clear search" }) {
   const id = React4.useId();
+  const input = React4.useRef(null);
   return /* @__PURE__ */ jsxs("div", { className: "CollectionSearch", children: [
     /* @__PURE__ */ jsx("label", { htmlFor: id, className: visible ? void 0 : "visually-hidden", children: label }),
-    /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "search" }),
-    /* @__PURE__ */ jsx(
-      Input,
-      {
-        id,
-        type: "search",
-        value,
-        onChange: (event) => onChange(event.target.value),
-        onKeyDown: (event) => {
-          if (event.key === "Escape" && value) {
-            event.preventDefault();
-            onChange("");
+    /* @__PURE__ */ jsxs("div", { className: "CollectionSearchField", "data-filled": value ? "" : void 0, children: [
+      /* @__PURE__ */ jsx("span", { className: "CollectionSearchIcon material-symbols-outlined", "aria-hidden": "true", children: "search" }),
+      /* @__PURE__ */ jsx(
+        Input,
+        {
+          ref: input,
+          id,
+          type: "search",
+          value,
+          onChange: (event) => onChange(event.target.value),
+          onKeyDown: (event) => {
+            if (event.key === "Escape" && value) {
+              event.preventDefault();
+              onChange("");
+            }
           }
         }
-      }
-    )
+      ),
+      value ? /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "CollectionSearchClear",
+          "aria-label": clearLabel,
+          onClick: () => {
+            onChange("");
+            input.current?.focus();
+          },
+          children: /* @__PURE__ */ jsx("span", { className: "material-symbols-outlined", "aria-hidden": "true", children: "close" })
+        }
+      ) : null
+    ] })
   ] });
 }
 function FilterControl({ collection, column }) {
@@ -1160,6 +1183,7 @@ var defaultMessages = {
   noResults: "No results",
   noResultsDescription: "Nothing matches the current search or filters.",
   clearFilters: "Clear filters",
+  clearSearch: "Clear search",
   nothingHere: "Nothing here yet",
   previous: "Previous",
   next: "Next",