@upbound/monarch-blocks 0.8.0 → 0.8.2

package/dist/data-table.js

@@ -2455,6 +2455,21 @@ function getColumnFilterCount(filterValue, filter) {
   return 0;
 }
 
+// src/lib/search-input.ts
+var SEARCH_INPUT_PROPS = {
+  type: "search",
+  autoComplete: "off",
+  "data-1p-ignore": true,
+  // 1Password
+  "data-lpignore": "true",
+  // LastPass
+  "data-bwignore": true,
+  // Bitwarden
+  "data-form-type": "other"
+  // Dashlane
+};
+var SEARCH_INPUT_CLASS = "[&::-webkit-search-cancel-button]:appearance-none";
+
 // src/hooks/use-table-column-resizing.ts
 import { useCallback as useCallback4, useEffect as useEffect3, useRef as useRef3, useState as useState5 } from "react";
 var RESIZE_MIN = 40;
@@ -3216,7 +3231,7 @@ import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs8 } from "react/jsx-run
 var HEADER_SURFACE_BG = "bg-[color-mix(in_oklch,var(--muted)_50%,var(--card))]";
 var TABLE_HEAD_CLASSES = "text-body-sm text-muted-foreground h-10 px-4 text-left align-middle font-medium whitespace-nowrap has-[[role=checkbox]]:pr-0";
 var TABLE_CELL_CLASSES = "px-4 py-2 align-middle whitespace-nowrap has-[[role=checkbox]]:pr-0";
-var TABLE_ROW_CLASSES = "hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted border-b motion-safe:transition-colors";
+var TABLE_ROW_CLASSES = "hover:bg-muted/50 has-[[aria-haspopup][aria-expanded=true]]:bg-muted/50 data-[state=selected]:bg-muted border-b motion-safe:transition-colors";
 function DataTableRoot({
   layout = "auto",
   gridTemplateColumns,
@@ -3680,18 +3695,19 @@ function DataTableBody({
     );
   }
   const rows = tableRows.map((row) => {
-    var _a, _b, _c, _d;
+    var _a, _b, _c, _d, _e;
     if ((_a = row.getIsGrouped) == null ? void 0 : _a.call(row)) {
       const groupLabel = (_c = row.groupingValue) != null ? _c : row.groupingColumnId ? (_b = row.getGroupingValue) == null ? void 0 : _b.call(row, row.groupingColumnId) : void 0;
       return /* @__PURE__ */ jsx9(DataTableGroupRow, { groupLabel: String(groupLabel != null ? groupLabel : ""), colSpan, layout }, row.id);
     }
-    const isExpanded = !!(renderExpandedRow && ((_d = row.getIsExpanded) == null ? void 0 : _d.call(row)));
-    const expandedRow = renderExpandedRow ? renderExpandedRow(row.original) : null;
+    const isExpanded = !!(((_d = row.getCanExpand) == null ? void 0 : _d.call(row)) && ((_e = row.getIsExpanded) == null ? void 0 : _e.call(row)));
+    const expandedRow = renderExpandedRow && isExpanded ? renderExpandedRow(row.original) : null;
     return /* @__PURE__ */ jsxs8(React6.Fragment, { children: [
       /* @__PURE__ */ jsx9(
         DataTableRow,
-        __spreadProps(__spreadValues({}, onRowRender ? onRowRender(row.original) : {}), {
+        __spreadProps(__spreadValues({}, onRowRender ? onRowRender(row.original, row) : {}), {
           "data-expanded": isExpanded || void 0,
+          "data-depth": row.depth || void 0,
           layout,
           children: row.getVisibleCells().filter((cell) => !isFilterOnlyColumn(cell.column)).map((cell) => /* @__PURE__ */ jsx9(
             DataTableCell,
@@ -3707,7 +3723,7 @@ function DataTableBody({
           ))
         })
       ),
-      /* @__PURE__ */ jsx9(DataTableExpandedRow, { colSpan, show: isExpanded, layout, children: expandedRow })
+      /* @__PURE__ */ jsx9(DataTableExpandedRow, { colSpan, show: expandedRow != null, layout, children: expandedRow })
     ] }, row.id);
   });
   if (isGrid) {
@@ -4420,7 +4436,8 @@ function DataTable({
   renderExpandedRow,
   expanded: parentExpanded,
   onExpandedChange: parentOnExpandedChange,
-  disableSearch = false,
+  disableSearch: deprecatedDisableSearch = false,
+  search,
   disableFilters = false,
   disableSorting = false,
   paginationConfig = true,
@@ -4455,8 +4472,9 @@ function DataTable({
   celFilterConfig,
   filterVisibility
 }) {
-  var _a, _b, _c, _d, _e, _f;
+  var _a, _b, _c, _d, _e, _f, _g, _h;
   const isGrid = layout === "grid";
+  const searchInputId = `table-search-${React9.useId()}`;
   const tableBodyScrollRef = React9.useRef(null);
   const [innerGlobalFilter, setInnerGlobalFilter] = React9.useState("");
   const [innerColumnOrdering, setInnerColumnOrdering] = React9.useState([]);
@@ -4529,23 +4547,24 @@ function DataTable({
   const grouping = parentGrouping != null ? parentGrouping : innerGrouping;
   const setGrouping = parentSetGrouping != null ? parentSetGrouping : setInnerGrouping;
   const hasGrouping = grouping.length > 0;
+  const hasSubRows = !!config.getSubRows;
+  const hasExpansion = !!renderExpandedRow || hasSubRows;
+  const disableSearch = (_f = search == null ? void 0 : search.disabled) != null ? _f : deprecatedDisableSearch;
   const hasExternalSearch = parentGlobalFilter !== void 0;
   const hasExternalFilters = parentColumnFilters !== void 0;
   const shouldDisableFiltersModels = !!disableFilters && !!disableSearch && !hasExternalSearch && !hasExternalFilters;
-  const table = useReactTable(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadProps(__spreadValues({}, config), {
+  const table = useReactTable(__spreadProps(__spreadValues(__spreadProps(__spreadValues(__spreadValues(__spreadProps(__spreadValues({}, config), {
     getCoreRowModel: getCoreRowModel(),
     getSortedRowModel: !disableSorting ? getSortedRowModel() : void 0,
     getPaginationRowModel: !shouldDisablePagination ? getPaginationRowModel() : void 0,
     getFilteredRowModel: !shouldDisableFiltersModels ? getFilteredRowModel() : void 0,
     getFacetedRowModel: !shouldDisableFiltersModels ? getFacetedRowModel() : void 0,
     getFacetedUniqueValues: !shouldDisableFiltersModels ? getFacetedUniqueValues() : void 0
-  }), !!renderExpandedRow && {
-    getExpandedRowModel: getExpandedRowModel(),
-    getRowCanExpand: () => true,
-    paginateExpandedRows: false
-  }), {
+  }), !!renderExpandedRow && { getRowCanExpand: () => true }), hasExpansion && { paginateExpandedRows: false }), {
     getGroupedRowModel: hasGrouping ? getGroupedRowModel() : void 0,
-    getExpandedRowModel: hasGrouping ? getExpandedRowModel() : void 0,
+    // Only grouping and `getSubRows` put extra rows in the row model; `renderExpandedRow`
+    // content renders outside it (see `DataTableBody`).
+    getExpandedRowModel: hasGrouping || hasSubRows ? getExpandedRowModel() : void 0,
     groupedColumnMode: hasGrouping ? "reorder" : void 0,
     enableFilters: !shouldDisableFiltersModels,
     enableGlobalFilter: !shouldDisableFiltersModels,
@@ -4568,7 +4587,7 @@ function DataTable({
       columnVisibility: disableColumnVisibility ? {} : columnVisibility,
       columnSizing: disableColumnResizing ? {} : columnSizing,
       columnPinning: disableColumnPinning ? { left: [], right: [] } : columnPinning
-    }, !!renderExpandedRow && { expanded }), {
+    }, hasExpansion && { expanded }), {
       grouping
     }), hasGrouping && { expanded: true }),
     manualSorting: serverSidePagination,
@@ -4582,7 +4601,7 @@ function DataTable({
     onColumnVisibilityChange: disableColumnVisibility ? noop : setColumnVisibility,
     onColumnSizingChange: disableColumnResizing ? noop : handleColumnSizingChange,
     onColumnPinningChange: disableColumnPinning ? noop : setColumnPinning
-  }), !!renderExpandedRow && {
+  }), hasExpansion && {
     onExpandedChange: (updater) => setExpanded((prev) => typeof updater === "function" ? updater(prev) : updater)
   }), {
     onGroupingChange: setGrouping
@@ -4671,17 +4690,19 @@ function DataTable({
   }, [columnOrdering, disableColumnReordering, flatColumns, setColumnOrdering]);
   const showViewHeader = !!title || !!Actions;
   const showColumnOptions = !disableColumnReordering || !disableColumnVisibility;
-  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs10(InputGroup2, { className: "w-70", children: [
+  const toolbarSearch = !disableSearch && /* @__PURE__ */ jsxs10(InputGroup2, { className: cn("w-70", search == null ? void 0 : search.className), children: [
     /* @__PURE__ */ jsx13(InputGroupAddon2, { align: "inline-start", children: /* @__PURE__ */ jsx13(Icon9, { name: "magnifying-glass" }) }),
     /* @__PURE__ */ jsx13(
       InputGroupInput2,
-      {
+      __spreadProps(__spreadValues({}, SEARCH_INPUT_PROPS), {
+        id: searchInputId,
+        className: SEARCH_INPUT_CLASS,
         "aria-label": "Search",
-        placeholder: "Search\u2026",
+        placeholder: (_g = search == null ? void 0 : search.placeholder) != null ? _g : "Search\u2026",
         disabled: shouldDisable,
         value: globalFilter,
         onChange: (e) => setGlobalFilter(e.target.value)
-      }
+      })
     )
   ] });
   const toolbarColumns = !!showColumnOptions && /* @__PURE__ */ jsx13(
@@ -4790,7 +4811,7 @@ function DataTable({
             DataTablePagination,
             {
               rowCount,
-              rowCountRelation: (_f = config.rowCountRelation) != null ? _f : "eq",
+              rowCountRelation: (_h = config.rowCountRelation) != null ? _h : "eq",
               paginationConfig,
               pageSize: pagination.pageSize,
               pageIndex: pagination.pageIndex,