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

package/README.md

@@ -158,9 +158,9 @@ import { EditableList } from '@scattered-light/loomiere-base-ui/custom';
 
 Columns decide how a value sorts, searches, filters and totals. `rowHeader` names the row. One column may use a tabs filter. Money totals add in minor units. Search is deferred, not debounced.
 
-The toolbar keeps the tabs and the search while rows are selected, and swaps the trailing controls for the selection bar, so the bar does not push the search down. A list sorts from the toolbar. A table sorts from its headers. Sort cycles ascending, descending, then back to the system's default.
+The toolbar keeps the tabs and the search while rows are selected, and swaps the trailing controls for the selection bar, so the bar does not push the search down. The search grows to fill the row beside the filters and actions, and wraps to its own line before it gets narrower than `collection.search-min-width`. Its icon and its clear button sit inside the field, and that clear button is the only one: the toolbar has no Clear filters button. When nothing matches, the no-results state in the table or list offers Clear filters. A list sorts from the toolbar. A table sorts from its headers. Sort cycles ascending, descending, then back to the system's default.
 
-Keyboard, on a table or a list, when a row can be activated: the row-header buttons are one tab stop. Up and Down move between rows. Home and End go to the first and last row on the page. Space toggles that row's checkbox. Enter activates the row. Escape clears the search when it has text. Arrow keys do nothing while focus is in a field inside a cell. This is a data table, not a grid.
+Keyboard, on a table or a list, when a row can be activated: the row-header buttons are one tab stop. Up and Down move between rows. Home and End go to the first and last row on the page. Space toggles that row's checkbox. Enter activates the row. Escape clears the search when it has text, and so does the clear button inside the field. Arrow keys do nothing while focus is in a field inside a cell. This is a data table, not a grid.
 
 State attributes on the view: `data-sorted`, `data-filtered`, `data-selecting`, `data-loading`, `data-grouped`, `data-view` (`table` or `list`), `data-size` (`sm` or `md`).
 

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;
@@ -486,11 +487,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

@@ -823,7 +823,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 +849,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 +871,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 +1177,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",