@rufous/ui 0.3.44 → 0.3.45

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 (6) hide show
  1. package/dist/main.cjs +3 -3
  2. package/dist/main.css +24 -0
  3. package/dist/main.d.cts +7 -0
  4. package/dist/main.d.ts +7 -0
  5. package/dist/main.js +3 -3
  6. package/package.json +1 -1
package/dist/main.cjs CHANGED
@@ -5704,7 +5704,7 @@ 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, showSearch && /* @__PURE__ */ import_react17.default.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ import_react17.default.createElement(Search, { size: 15 }), /* @__PURE__ */ import_react17.default.createElement(
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
5708
  "input",
5709
5709
  {
5710
5710
  className: "dg-search",
@@ -5716,7 +5716,7 @@ function DataGrid({
5716
5716
  if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5717
5717
  }
5718
5718
  }
5719
- )), showFilterBtn && /* @__PURE__ */ import_react17.default.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ import_react17.default.createElement(
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
5720
  "button",
5721
5721
  {
5722
5722
  className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
@@ -5730,7 +5730,7 @@ function DataGrid({
5730
5730
  onClick: () => setShowManageColumns(true)
5731
5731
  },
5732
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 && /* @__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) => {
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) => {
5734
5734
  const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
5735
5735
  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
5736
  "button",
package/dist/main.css CHANGED
@@ -409,6 +409,30 @@
409
409
  .dg-search:focus {
410
410
  border-color: var(--primary-color);
411
411
  }
412
+ .dg-toolbar-select {
413
+ padding: 8px 28px 8px 10px;
414
+ border: 1px solid var(--border-color);
415
+ border-radius: 8px;
416
+ background: var(--background-color);
417
+ color: var(--text-color);
418
+ font-size: 0.875rem;
419
+ font-family: inherit;
420
+ outline: none;
421
+ cursor: pointer;
422
+ transition: border-color 0.2s;
423
+ appearance: none;
424
+ -webkit-appearance: none;
425
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
426
+ background-repeat: no-repeat;
427
+ background-position: right 8px center;
428
+ }
429
+ .dg-toolbar-select:focus {
430
+ border-color: var(--primary-color);
431
+ }
432
+ .dg-toolbar-select:disabled {
433
+ opacity: 0.5;
434
+ cursor: not-allowed;
435
+ }
412
436
  .dg-icon-btn {
413
437
  padding: 8px;
414
438
  border: 1px solid var(--border-color);
package/dist/main.d.cts CHANGED
@@ -1258,6 +1258,13 @@ interface Action<T> {
1258
1258
  interface DataGridToolbarSlot {
1259
1259
  content: React__default.ReactNode;
1260
1260
  align?: 'left' | 'center' | 'right';
1261
+ /**
1262
+ * Where to inject the slot inside the toolbar action row.
1263
+ * - `'before-search'` — left of the search input
1264
+ * - `'after-search'` — right of search, left of Filter / Columns / Export
1265
+ * - `'after-actions'` — rightmost position, after Export button (default)
1266
+ */
1267
+ position?: 'before-search' | 'after-search' | 'after-actions';
1261
1268
  }
1262
1269
  /**
1263
1270
  * Granular visibility control for the built-in toolbar.
package/dist/main.d.ts CHANGED
@@ -1258,6 +1258,13 @@ interface Action<T> {
1258
1258
  interface DataGridToolbarSlot {
1259
1259
  content: React__default.ReactNode;
1260
1260
  align?: 'left' | 'center' | 'right';
1261
+ /**
1262
+ * Where to inject the slot inside the toolbar action row.
1263
+ * - `'before-search'` — left of the search input
1264
+ * - `'after-search'` — right of search, left of Filter / Columns / Export
1265
+ * - `'after-actions'` — rightmost position, after Export button (default)
1266
+ */
1267
+ position?: 'before-search' | 'after-search' | 'after-actions';
1261
1268
  }
1262
1269
  /**
1263
1270
  * Granular visibility control for the built-in toolbar.
package/dist/main.js CHANGED
@@ -5470,7 +5470,7 @@ 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, showSearch && /* @__PURE__ */ React123.createElement("div", { className: "dg-search-wrap" }, /* @__PURE__ */ React123.createElement(Search, { size: 15 }), /* @__PURE__ */ React123.createElement(
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
5474
  "input",
5475
5475
  {
5476
5476
  className: "dg-search",
@@ -5482,7 +5482,7 @@ function DataGrid({
5482
5482
  if (onPaginationModelChange) onPaginationModelChange({ page: 0, pageSize: activePageSize });
5483
5483
  }
5484
5484
  }
5485
- )), showFilterBtn && /* @__PURE__ */ React123.createElement(Tooltip, { title: "Filters", placement: "top" }, /* @__PURE__ */ React123.createElement(
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
5486
  "button",
5487
5487
  {
5488
5488
  className: `dg-icon-btn ${hasActiveFilters ? "active" : ""}`,
@@ -5496,7 +5496,7 @@ function DataGrid({
5496
5496
  onClick: () => setShowManageColumns(true)
5497
5497
  },
5498
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 && /* @__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) => {
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) => {
5500
5500
  const col = resolvedColumns.find((c) => String(c.field) === gField || String(c.key) === gField);
5501
5501
  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
5502
  "button",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.3.44",
4
+ "version": "0.3.45",
5
5
  "type": "module",
6
6
  "description": "Experimental: A lightweight React UI component library (Beta)",
7
7
  "style": "./dist/main.css",