boneless-table 0.1.0 → 0.1.1

package/dist/index.mjs

@@ -45,12 +45,12 @@ import {
   useEffect as useEffect3,
   useId,
   useMemo,
-  useRef as useRef2,
+  useRef as useRef3,
   useState as useState2
 } from "react";
 
 // src/column-filter.tsx
-import { useEffect, useState } from "react";
+import { useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 function ColumnFilter({
   column,
@@ -62,10 +62,13 @@ function ColumnFilter({
   var _a, _b;
   const value = String((_a = column.getFilterValue()) != null ? _a : "");
   const [inputValue, setInputValue] = useState(value);
+  const lastColumnValueRef = useRef(value);
   useEffect(() => {
-    setInputValue(value);
-  }, [value]);
-  useEffect(() => {
+    if (value !== lastColumnValueRef.current) {
+      lastColumnValueRef.current = value;
+      setInputValue(value);
+      return;
+    }
     if (settings.type !== "text" || inputValue === value) return;
     if (debounceMs <= 0) {
       column.setFilterValue(inputValue || void 0);
@@ -109,7 +112,7 @@ function ColumnFilter({
 }
 
 // src/column-menu.tsx
-import { useEffect as useEffect2, useRef } from "react";
+import { useEffect as useEffect2, useRef as useRef2 } from "react";
 import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
 function ColumnMenu({
   table,
@@ -121,8 +124,8 @@ function ColumnMenu({
   triggerRef
 }) {
   var _a;
-  const menuRef = useRef(null);
-  const closeButtonRef = useRef(null);
+  const menuRef = useRef2(null);
+  const closeButtonRef = useRef2(null);
   useEffect2(() => {
     var _a2;
     (_a2 = closeButtonRef.current) == null ? void 0 : _a2.focus();
@@ -218,7 +221,7 @@ var defaultBonelessTableSettings = {
     borders: "none",
     sorting: { enabled: true, reveal: "hover" }
   },
-  interactions: { filterReveal: "hover", horizontalOverflow: "auto" }
+  interactions: { horizontalOverflow: "auto" }
 };
 function mergeBonelessTableSettings(override, base = defaultBonelessTableSettings) {
   var _a, _b, _c, _d, _e, _f;
@@ -337,7 +340,7 @@ function resolveRowLinkLabel(link, row) {
 }
 
 // src/boneless-table.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
 function moveItem(order, id, direction) {
   const index = order.indexOf(id);
   const target = index + direction;
@@ -372,6 +375,8 @@ function BonelessTable(_a) {
     scroller = "auto",
     toolbar = true,
     toolbarLayout,
+    filters = true,
+    filterPlacement = "above",
     footer = true,
     totalCount,
     resultLabel = "rows",
@@ -401,6 +406,8 @@ function BonelessTable(_a) {
     "scroller",
     "toolbar",
     "toolbarLayout",
+    "filters",
+    "filterPlacement",
     "footer",
     "totalCount",
     "resultLabel",
@@ -416,13 +423,13 @@ function BonelessTable(_a) {
   const settings = useMemo(() => mergeBonelessTableSettings(settingsOverride), [settingsOverride]);
   const resolvedColumns = useMemo(() => withDefaultCells(resolveColumns(columns)), [columns]);
   const defaultOrder = useMemo(() => getColumnIds(resolvedColumns), [resolvedColumns]);
-  const scrollerRef = useRef2(null);
-  const headerScrollerRef = useRef2(null);
-  const columnsButtonRef = useRef2(null);
-  const nearEndTriggeredRef = useRef2(false);
+  const scrollerRef = useRef3(null);
+  const headerScrollerRef = useRef3(null);
+  const lastScrollLeftRef = useRef3(0);
+  const columnsButtonRef = useRef3(null);
+  const nearEndTriggeredRef = useRef3(false);
   const columnMenuId = useId();
   const [showColumns, setShowColumns] = useState2(false);
-  const [headerScrollbarGutter, setHeaderScrollbarGutter] = useState2(0);
   const [sorting, setSorting] = useState2((_b2 = (_a2 = tableOptions.initialState) == null ? void 0 : _a2.sorting) != null ? _b2 : []);
   const [columnFilters, setColumnFilters] = useState2(
     (_d = (_c = tableOptions.initialState) == null ? void 0 : _c.columnFilters) != null ? _d : []
@@ -467,18 +474,6 @@ function BonelessTable(_a) {
     var _a3;
     if (scrollToTopOn !== void 0) (_a3 = scrollerRef.current) == null ? void 0 : _a3.scrollTo({ top: 0 });
   }, [scrollToTopOn]);
-  useEffect3(() => {
-    const scroller2 = scrollerRef.current;
-    if (!scroller2) return;
-    const syncHeaderScrollbarGutter = () => {
-      setHeaderScrollbarGutter(Math.max(0, scroller2.offsetWidth - scroller2.clientWidth));
-    };
-    syncHeaderScrollbarGutter();
-    if (typeof ResizeObserver === "undefined") return;
-    const observer = new ResizeObserver(syncHeaderScrollbarGutter);
-    observer.observe(scroller2);
-    return () => observer.disconnect();
-  }, []);
   const table = useReactTable(__spreadProps(__spreadValues({}, restTableOptions), {
     data,
     columns: resolvedColumns,
@@ -547,13 +542,17 @@ function BonelessTable(_a) {
   function handleScroll() {
     const element = scrollerRef.current;
     if (!element) return;
-    if (headerScrollerRef.current) headerScrollerRef.current.scrollLeft = element.scrollLeft;
+    if (element.scrollLeft !== lastScrollLeftRef.current) {
+      lastScrollLeftRef.current = element.scrollLeft;
+      if (headerScrollerRef.current) headerScrollerRef.current.scrollLeft = element.scrollLeft;
+    }
+    if (!onNearEnd) return;
     const isNearEnd = element.scrollHeight - element.scrollTop - element.clientHeight < nearEndOffset;
     if (!isNearEnd) {
       nearEndTriggeredRef.current = false;
       return;
     }
-    if (!onNearEnd || !canLoadMore || isFetchingMore || nearEndTriggeredRef.current) return;
+    if (!canLoadMore || isFetchingMore || nearEndTriggeredRef.current) return;
     nearEndTriggeredRef.current = true;
     onNearEnd();
   }
@@ -596,10 +595,13 @@ function BonelessTable(_a) {
     (_a3 = columnsButtonRef.current) == null ? void 0 : _a3.focus();
   }
   const toolbarSummary = /* @__PURE__ */ jsxs3("div", { className: classNames.toolbarSummary, "data-slot": "toolbar-summary", children: [
-    /* @__PURE__ */ jsx4("strong", { children: total.toLocaleString() }),
+    /* @__PURE__ */ jsx4("strong", { className: classNames.toolbarCount, "data-slot": "toolbar-count", children: total.toLocaleString() }),
     " ",
-    resultLabel,
-    resultHint ? /* @__PURE__ */ jsx4("span", { className: classNames.toolbarHint, "data-slot": "toolbar-hint", children: resultHint }) : null
+    /* @__PURE__ */ jsx4("span", { className: classNames.toolbarLabel, "data-slot": "toolbar-label", children: resultLabel }),
+    resultHint ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+      " ",
+      /* @__PURE__ */ jsx4("span", { className: classNames.toolbarHint, "data-slot": "toolbar-hint", children: resultHint })
+    ] }) : null
   ] });
   const toolbarActions = /* @__PURE__ */ jsxs3("div", { className: classNames.toolbarActions, "data-slot": "toolbar-actions", children: [
     tree && expandableRows.length > 0 ? /* @__PURE__ */ jsxs3(
@@ -651,6 +653,43 @@ function BonelessTable(_a) {
     toolbarSummary,
     toolbarActions
   ] });
+  const filterHeaders = table.getLeafHeaders().filter((header) => !header.isPlaceholder && getColumnSettings(header.column).filtering);
+  const defaultFilters = filterHeaders.length > 0 ? /* @__PURE__ */ jsx4(
+    "div",
+    {
+      "aria-label": "Table filters",
+      className: classNames.filters,
+      "data-slot": "filters",
+      role: "group",
+      children: filterHeaders.map((header) => {
+        var _a3, _b3;
+        const filterSettings = getColumnSettings(header.column).filtering;
+        return /* @__PURE__ */ jsxs3(
+          "div",
+          {
+            className: classNames.filterItem,
+            "data-column-id": header.column.id,
+            "data-slot": "filter-item",
+            children: [
+              /* @__PURE__ */ jsx4("span", { className: classNames.filterLabel, "data-slot": "filter-label", children: (_b3 = (_a3 = header.column.columnDef.meta) == null ? void 0 : _a3.columnLabel) != null ? _b3 : typeof header.column.columnDef.header === "string" || typeof header.column.columnDef.header === "number" ? String(header.column.columnDef.header) : header.column.id }),
+              /* @__PURE__ */ jsx4(
+                ColumnFilter,
+                {
+                  className: classNames.filter,
+                  column: header.column,
+                  settings: filterSettings,
+                  icon: filterSettings.type === "text" ? icons == null ? void 0 : icons.search : void 0,
+                  debounceMs: filterDebounceMs
+                }
+              )
+            ]
+          },
+          header.id
+        );
+      })
+    }
+  ) : null;
+  const renderedFilters = renderSlot(filters, table, defaultFilters);
   const defaultFooter = /* @__PURE__ */ jsxs3("footer", { className: classNames.footer, "data-slot": "footer", children: [
     "Showing ",
     shown.toLocaleString(),
@@ -661,13 +700,21 @@ function BonelessTable(_a) {
   ] });
   const rootStyle = scroller === "fill" ? { display: "flex", flexDirection: "column", minHeight: 0 } : void 0;
   const scrollerStyle = __spreadValues({
-    overflowX: settings.interactions.horizontalOverflow
+    overflowX: settings.interactions.horizontalOverflow,
+    scrollbarGutter: "stable"
   }, scroller === "fill" ? { flex: "1 1 auto", minHeight: 0, overflowY: "auto" } : {});
+  const headerScrollerStyle = {
+    flex: "0 0 auto",
+    minWidth: 0,
+    overflow: "hidden",
+    scrollbarGutter: "stable"
+  };
   const tableStyle = __spreadValues({
     "--boneless-table-grid": grid
   }, scroller === "fill" ? { display: "flex", flexDirection: "column", flex: "1 1 auto", minHeight: 0 } : {});
   return /* @__PURE__ */ jsxs3("div", { className: cn(className, classNames.root), "data-slot": "root", style: rootStyle, children: [
     renderSlot(toolbar, table, defaultToolbar),
+    filterPlacement === "above" ? renderedFilters : null,
     /* @__PURE__ */ jsxs3(
       "div",
       {
@@ -680,14 +727,10 @@ function BonelessTable(_a) {
           /* @__PURE__ */ jsx4(
             "div",
             {
+              className: classNames.headerScroller,
               "data-slot": "header-scroller",
               ref: headerScrollerRef,
-              style: {
-                flex: "0 0 auto",
-                minWidth: 0,
-                overflow: "hidden",
-                paddingInlineEnd: headerScrollbarGutter || void 0
-              },
+              style: headerScrollerStyle,
               children: /* @__PURE__ */ jsx4(
                 "div",
                 {
@@ -703,11 +746,10 @@ function BonelessTable(_a) {
                       role: "row",
                       style: { display: "grid", gridTemplateColumns: "var(--boneless-table-grid)" },
                       children: headerGroup.headers.map((header) => {
-                        var _a3;
                         const columnSettings = getColumnSettings(header.column);
                         const direction = header.column.getIsSorted();
                         const isSortable = !header.isPlaceholder && header.column.getCanSort() && columnSettings.sorting.enabled;
-                        return /* @__PURE__ */ jsxs3(
+                        return /* @__PURE__ */ jsx4(
                           "div",
                           {
                             className: classNames.header,
@@ -718,47 +760,28 @@ function BonelessTable(_a) {
                             "aria-colspan": header.colSpan > 1 ? header.colSpan : void 0,
                             "aria-sort": direction === "asc" ? "ascending" : direction === "desc" ? "descending" : isSortable ? "none" : void 0,
                             style: { gridColumn: `span ${header.colSpan}` },
-                            children: [
-                              header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ jsxs3(
-                                "button",
-                                {
-                                  className: classNames.headerButton,
-                                  "data-align": columnSettings.align,
-                                  "data-slot": "header-button",
-                                  onClick: header.column.getToggleSortingHandler(),
-                                  children: [
-                                    flexRender(header.column.columnDef.header, header.getContext()),
-                                    (icons == null ? void 0 : icons.sort) ? /* @__PURE__ */ jsx4(
-                                      "span",
-                                      {
-                                        className: classNames.sortIndicator,
-                                        "data-align": columnSettings.align,
-                                        "data-slot": "sort-indicator",
-                                        "data-reveal": columnSettings.sorting.reveal,
-                                        children: icons.sort(direction)
-                                      }
-                                    ) : null
-                                  ]
-                                }
-                              ) : flexRender(header.column.columnDef.header, header.getContext()),
-                              !header.isPlaceholder && columnSettings.filtering ? /* @__PURE__ */ jsx4(
-                                "div",
-                                {
-                                  className: classNames.filter,
-                                  "data-slot": "filter",
-                                  "data-reveal": (_a3 = columnSettings.filtering.reveal) != null ? _a3 : settings.interactions.filterReveal,
-                                  children: /* @__PURE__ */ jsx4(
-                                    ColumnFilter,
+                            children: header.isPlaceholder ? null : isSortable ? /* @__PURE__ */ jsxs3(
+                              "button",
+                              {
+                                className: classNames.headerButton,
+                                "data-align": columnSettings.align,
+                                "data-slot": "header-button",
+                                onClick: header.column.getToggleSortingHandler(),
+                                children: [
+                                  /* @__PURE__ */ jsx4("span", { className: classNames.headerLabel, "data-slot": "header-label", children: flexRender(header.column.columnDef.header, header.getContext()) }),
+                                  (icons == null ? void 0 : icons.sort) ? /* @__PURE__ */ jsx4(
+                                    "span",
                                     {
-                                      column: header.column,
-                                      settings: columnSettings.filtering,
-                                      icon: icons == null ? void 0 : icons.search,
-                                      debounceMs: filterDebounceMs
+                                      className: classNames.sortIndicator,
+                                      "data-align": columnSettings.align,
+                                      "data-slot": "sort-indicator",
+                                      "data-reveal": columnSettings.sorting.reveal,
+                                      children: icons.sort(direction)
                                     }
-                                  )
-                                }
-                              ) : null
-                            ]
+                                  ) : null
+                                ]
+                              }
+                            ) : flexRender(header.column.columnDef.header, header.getContext())
                           },
                           header.id
                         );
@@ -773,11 +796,13 @@ function BonelessTable(_a) {
           /* @__PURE__ */ jsxs3(
             "div",
             {
+              "aria-label": "Table rows",
               className: classNames.scroller,
               "data-slot": "scroller",
               ref: scrollerRef,
               onScroll: handleScroll,
               style: scrollerStyle,
+              tabIndex: 0,
               children: [
                 isLoading ? /* @__PURE__ */ jsx4(
                   TableSkeleton,
@@ -919,6 +944,7 @@ function BonelessTable(_a) {
         ]
       }
     ),
+    filterPlacement === "below" ? renderedFilters : null,
     renderSlot(footer, table, defaultFooter)
   ] });
 }