@rufous/ui 0.3.45 → 0.3.46

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/main.cjs +30 -26
  2. package/dist/main.d.cts +10 -1
  3. package/dist/main.d.ts +10 -1
  4. package/dist/main.js +30 -26
  5. package/package.json +1 -1
package/dist/main.cjs CHANGED
@@ -5704,33 +5704,37 @@ function DataGrid({
5704
5704
  const showExportBtn = !tOpts.hideExport && !hideTopExport;
5705
5705
  const showTitle = !tOpts.hideTitle;
5706
5706
  const showRecordCount = !tOpts.hideRecordCount;
5707
- return /* @__PURE__ */ import_react17.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ import_react17.default.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ import_react17.default.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, headerActions?.position === "before-search" && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content), showSearch && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react17.default.createElement(Search, { size: 15 }), /* @__PURE__ */ import_react17.default.createElement(
5708
- "input",
5709
- {
5710
- className: "dg-search",
5711
- placeholder: "Search\u2026",
5712
- value: filterText,
5713
- onChange: (e) => {
5714
- setFilterText(e.target.value);
5715
- setCurrentPage(1);
5716
- if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5707
+ return /* @__PURE__ */ import_react17.default.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ import_react17.default.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ import_react17.default.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-header-actions" }, customToolbar ?? (() => {
5708
+ const slots = !headerActions ? [] : Array.isArray(headerActions) ? headerActions : [headerActions];
5709
+ const slotAt = (pos) => slots.filter((s2) => s2.position === pos || !s2.position && pos === "after-actions").map((s2, i) => /* @__PURE__ */ import_react17.default.createElement("div", { key: i, className: `dg-header-slot ${alignClass(s2.align)}` }, s2.content));
5710
+ return /* @__PURE__ */ import_react17.default.createElement(import_react17.default.Fragment, null, slotAt("before-search"), showSearch && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react17.default.createElement(Search, { size: 15 }), /* @__PURE__ */ import_react17.default.createElement(
5711
+ "input",
5712
+ {
5713
+ className: "dg-search",
5714
+ placeholder: "Search\u2026",
5715
+ value: filterText,
5716
+ onChange: (e) => {
5717
+ setFilterText(e.target.value);
5718
+ setCurrentPage(1);
5719
+ if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5720
+ }
5717
5721
  }
5718
- }
5719
- )), headerActions?.position === "after-search" && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
5720
- "button",
5721
- {
5722
- className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
5723
- onClick: () => setShowAdvancedFilter(true)
5724
- },
5725
- /* @__PURE__ */ import_react17.default.createElement(Funnel, { size: 16 })
5726
- )), showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
5727
- "button",
5728
- {
5729
- className: "dg-icon-btn",
5730
- onClick: () => setShowManageColumns(true)
5731
- },
5732
- /* @__PURE__ */ import_react17.default.createElement(Columns2, { size: 16 })
5733
- )), showExportBtn && /* @__PURE__ */ import_react17.default.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ import_react17.default.createElement(Download, { size: 14 }), " Export CSV"), headerActions && (!headerActions.position || headerActions.position === "after-actions") && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content)))), !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
5722
+ )), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
5723
+ "button",
5724
+ {
5725
+ className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
5726
+ onClick: () => setShowAdvancedFilter(true)
5727
+ },
5728
+ /* @__PURE__ */ import_react17.default.createElement(Funnel, { size: 16 })
5729
+ )), showColumnsBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
5730
+ "button",
5731
+ {
5732
+ className: "dg-icon-btn",
5733
+ onClick: () => setShowManageColumns(true)
5734
+ },
5735
+ /* @__PURE__ */ import_react17.default.createElement(Columns2, { size: 16 })
5736
+ )), showExportBtn && /* @__PURE__ */ import_react17.default.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ import_react17.default.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions"));
5737
+ })())), !tOpts.hideHeader && /* @__PURE__ */ import_react17.default.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ import_react17.default.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
5734
5738
  const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
5735
5739
  return /* @__PURE__ */ import_react17.default.createElement("div", { key: gField, className: "dg-group-chip" }, /* @__PURE__ */ import_react17.default.createElement(Layers, { size: 11 }), /* @__PURE__ */ import_react17.default.createElement("span", null, col?.header ?? col?.headerName ?? gField), !disableRowGrouping && /* @__PURE__ */ import_react17.default.createElement(
5736
5740
  "button",
package/dist/main.d.cts CHANGED
@@ -1367,7 +1367,16 @@ interface DataGridProps<T> {
1367
1367
  value: any;
1368
1368
  }) => void;
1369
1369
  /** Extra buttons/components rendered beside the Export button in the header row */
1370
- headerActions?: DataGridToolbarSlot;
1370
+ /** One slot or an array of slots — each can have its own `position`.
1371
+ * This lets you place a select before the search AND an Add button after
1372
+ * Export in a single prop:
1373
+ * ```
1374
+ * headerActions={[
1375
+ * { position: 'before-search', content: <select className="dg-toolbar-select">…</select> },
1376
+ * { position: 'after-actions', content: <button>+ Add</button> },
1377
+ * ]}
1378
+ * ``` */
1379
+ headerActions?: DataGridToolbarSlot | DataGridToolbarSlot[];
1371
1380
  /** Extra content rendered in a second row below the header */
1372
1381
  toolbarContent?: DataGridToolbarSlot;
1373
1382
  /**
package/dist/main.d.ts CHANGED
@@ -1367,7 +1367,16 @@ interface DataGridProps<T> {
1367
1367
  value: any;
1368
1368
  }) => void;
1369
1369
  /** Extra buttons/components rendered beside the Export button in the header row */
1370
- headerActions?: DataGridToolbarSlot;
1370
+ /** One slot or an array of slots — each can have its own `position`.
1371
+ * This lets you place a select before the search AND an Add button after
1372
+ * Export in a single prop:
1373
+ * ```
1374
+ * headerActions={[
1375
+ * { position: 'before-search', content: <select className="dg-toolbar-select">…</select> },
1376
+ * { position: 'after-actions', content: <button>+ Add</button> },
1377
+ * ]}
1378
+ * ``` */
1379
+ headerActions?: DataGridToolbarSlot | DataGridToolbarSlot[];
1371
1380
  /** Extra content rendered in a second row below the header */
1372
1381
  toolbarContent?: DataGridToolbarSlot;
1373
1382
  /**
package/dist/main.js CHANGED
@@ -5470,33 +5470,37 @@ function DataGrid({
5470
5470
  const showExportBtn = !tOpts.hideExport && !hideTopExport;
5471
5471
  const showTitle = !tOpts.hideTitle;
5472
5472
  const showRecordCount = !tOpts.hideRecordCount;
5473
- return /* @__PURE__ */ React123.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ React123.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ React123.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ React123.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ React123.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ React123.createElement("div", { className: "dg-header-actions" }, customToolbar ?? /* @__PURE__ */ React123.createElement(React123.Fragment, null, headerActions?.position === "before-search" && /* @__PURE__ */ React123.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content), showSearch && /* @__PURE__ */ React123.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React123.createElement(Search, { size: 15 }), /* @__PURE__ */ React123.createElement(
5474
- "input",
5475
- {
5476
- className: "dg-search",
5477
- placeholder: "Search\u2026",
5478
- value: filterText,
5479
- onChange: (e) => {
5480
- setFilterText(e.target.value);
5481
- setCurrentPage(1);
5482
- if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5473
+ return /* @__PURE__ */ React123.createElement("div", { className: ["dg-root", sxClass, className].filter(Boolean).join(" ") }, !tOpts.hideHeader && /* @__PURE__ */ React123.createElement("div", { className: `dg-header${customToolbar ? " dg-header--custom" : ""}` }, !customToolbar && (showTitle || showRecordCount) && /* @__PURE__ */ React123.createElement("div", { className: "dg-header-info" }, showTitle && /* @__PURE__ */ React123.createElement("h2", null, title), showRecordCount && /* @__PURE__ */ React123.createElement("p", null, isServer ? totalRows : filteredData.length, " total records")), /* @__PURE__ */ React123.createElement("div", { className: "dg-header-actions" }, customToolbar ?? (() => {
5474
+ const slots = !headerActions ? [] : Array.isArray(headerActions) ? headerActions : [headerActions];
5475
+ const slotAt = (pos) => slots.filter((s2) => s2.position === pos || !s2.position && pos === "after-actions").map((s2, i) => /* @__PURE__ */ React123.createElement("div", { key: i, className: `dg-header-slot ${alignClass(s2.align)}` }, s2.content));
5476
+ return /* @__PURE__ */ React123.createElement(React123.Fragment, null, slotAt("before-search"), showSearch && /* @__PURE__ */ React123.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React123.createElement(Search, { size: 15 }), /* @__PURE__ */ React123.createElement(
5477
+ "input",
5478
+ {
5479
+ className: "dg-search",
5480
+ placeholder: "Search\u2026",
5481
+ value: filterText,
5482
+ onChange: (e) => {
5483
+ setFilterText(e.target.value);
5484
+ setCurrentPage(1);
5485
+ if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5486
+ }
5483
5487
  }
5484
- }
5485
- )), headerActions?.position === "after-search" && /* @__PURE__ */ React123.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
5486
- "button",
5487
- {
5488
- className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
5489
- onClick: () => setShowAdvancedFilter(true)
5490
- },
5491
- /* @__PURE__ */ React123.createElement(Funnel, { size: 16 })
5492
- )), showColumnsBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React123.createElement(
5493
- "button",
5494
- {
5495
- className: "dg-icon-btn",
5496
- onClick: () => setShowManageColumns(true)
5497
- },
5498
- /* @__PURE__ */ React123.createElement(Columns2, { size: 16 })
5499
- )), showExportBtn && /* @__PURE__ */ React123.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ React123.createElement(Download, { size: 14 }), " Export CSV"), headerActions && (!headerActions.position || headerActions.position === "after-actions") && /* @__PURE__ */ React123.createElement("div", { className: `dg-header-slot ${alignClass(headerActions.align)}` }, headerActions.content)))), !tOpts.hideHeader && /* @__PURE__ */ React123.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ React123.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ React123.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
5488
+ )), slotAt("after-search"), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
5489
+ "button",
5490
+ {
5491
+ className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
5492
+ onClick: () => setShowAdvancedFilter(true)
5493
+ },
5494
+ /* @__PURE__ */ React123.createElement(Funnel, { size: 16 })
5495
+ )), showColumnsBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Manage Columns", placement: "top" }, /* @__PURE__ */ React123.createElement(
5496
+ "button",
5497
+ {
5498
+ className: "dg-icon-btn",
5499
+ onClick: () => setShowManageColumns(true)
5500
+ },
5501
+ /* @__PURE__ */ React123.createElement(Columns2, { size: 16 })
5502
+ )), showExportBtn && /* @__PURE__ */ React123.createElement("button", { className: "dg-action-btn", onClick: handleExport, disabled: loading }, /* @__PURE__ */ React123.createElement(Download, { size: 14 }), " Export CSV"), slotAt("after-actions"));
5503
+ })())), !tOpts.hideHeader && /* @__PURE__ */ React123.createElement("div", { className: `dg-toolbar ${alignClass(toolbarContent?.align)}` }, toolbarContent?.content || ""), isGroupingActive && /* @__PURE__ */ React123.createElement("div", { className: "dg-grouping-bar" }, /* @__PURE__ */ React123.createElement("span", { className: "dg-grouping-bar-label" }, "Grouped by"), activeGroupingModel.map((gField) => {
5500
5504
  const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
5501
5505
  return /* @__PURE__ */ React123.createElement("div", { key: gField, className: "dg-group-chip" }, /* @__PURE__ */ React123.createElement(Layers, { size: 11 }), /* @__PURE__ */ React123.createElement("span", null, col?.header ?? col?.headerName ?? gField), !disableRowGrouping && /* @__PURE__ */ React123.createElement(
5502
5506
  "button",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.3.45",
4
+ "version": "0.3.46",
5
5
  "type": "module",
6
6
  "description": "Experimental: A lightweight React UI component library (Beta)",
7
7
  "style": "./dist/main.css",