@worknice/whiteboard 0.21.6 → 0.22.0

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/presentation/Table.d.ts +5 -8
  2. package/dist/presentation/Table.js +75 -60
  3. package/dist/presentation/Table.module.js +2 -1
  4. package/dist/presentation/Table_module.css +5 -2
  5. package/package.json +2 -2
package/dist/presentation/Table.d.ts CHANGED
@@ -1,12 +1,8 @@
1
- import type { RowData, SortingColumnDef } from "@tanstack/react-table";
1
+ import type { SortingColumnDef } from "@tanstack/react-table";
2
2
  import { type ReactNode } from "react";
3
3
  import { type ZodTypeAny } from "zod";
4
+ import { type MenuButtonOption } from "../controls/MenuButton";
4
5
  type PrimitiveValue = boolean | string | undefined | number;
5
- declare module "@tanstack/react-table" {
6
- interface ColumnMeta<TData extends RowData, TValue> {
7
- fixedWidth: boolean;
8
- }
9
- }
10
6
  type Filter<Type> = {
11
7
  label: string;
12
8
  options: Array<{
@@ -46,16 +42,17 @@ type Props<Type> = {
46
42
  globalFiltering?: boolean;
47
43
  size?: number;
48
44
  enableSorting?: boolean;
49
- fixedWidth?: boolean;
50
45
  sortUndefined?: SortingColumnDef<Type>["sortUndefined"];
51
46
  } & ({
52
47
  type?: "accessor";
53
48
  value: (row: Type) => PrimitiveValue;
54
49
  header: string;
55
50
  } | {
51
+ /** @deprecated Use row actions instead. */
56
52
  type: "display";
57
53
  header?: string;
58
54
  })>;
55
+ rowActions?: (row: Type) => Array<MenuButtonOption | null>;
59
56
  csvFilename?: string;
60
57
  bulkActions?: BulkAction<Type>[];
61
58
  secondaryBulkActions?: BulkAction<Type>[];
@@ -66,5 +63,5 @@ type Props<Type> = {
66
63
  localStorageSchema?: ZodTypeAny;
67
64
  getRowId: (row: Type) => string;
68
65
  };
69
- declare const Table: <Type>({ data, columns, bulkActions, secondaryBulkActions, csvFilename, estimatedRowSize, emptyState, pathName, id, localStorageSchema, getRowId, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
66
+ declare const Table: <Type>({ data, columns, bulkActions, secondaryBulkActions, csvFilename, estimatedRowSize, emptyState, pathName, id, localStorageSchema, getRowId, rowActions, }: Props<Type>) => import("react/jsx-runtime").JSX.Element;
70
67
  export default Table;
package/dist/presentation/Table.js CHANGED
@@ -21,7 +21,8 @@ import * as __WEBPACK_EXTERNAL_MODULE__PlainText_js_cd0b6798__ from "./PlainText
21
21
  import * as __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__ from "./Table.module.js";
22
22
  import * as __WEBPACK_EXTERNAL_MODULE__VStack_js_02eb6792__ from "./VStack.js";
23
23
  const selectColumnId = "_selectColumn";
24
- const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csvFilename, estimatedRowSize = 100, emptyState = "No results", pathName, id, localStorageSchema, getRowId })=>{
24
+ const actionsColumnId = "_actionsColumn";
25
+ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csvFilename, estimatedRowSize = 100, emptyState = "No results", pathName, id, localStorageSchema, getRowId, rowActions })=>{
25
26
  const [searchTerm, setSearchTerm] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)("");
26
27
  const lastSelectedRow = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(void 0);
27
28
  const { refs, x: bulkSelectionModalXCoordinate } = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_dom_d5bb3c23__.useFloating)({
@@ -42,7 +43,7 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
42
43
  const columnDefs = (0, __WEBPACK_EXTERNAL_MODULE_react__.useMemo)(()=>{
43
44
  const columnHelper = (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.createColumnHelper)();
44
45
  const result = columns.map((column)=>{
45
- const { filter, grouping, header, id, cell, globalFiltering, type, size, enableSorting, fixedWidth, sortUndefined } = column;
46
+ const { filter, grouping, header, id, cell, globalFiltering, type, size, enableSorting, sortUndefined } = column;
46
47
  if ("accessor" == type || void 0 == type) return columnHelper.accessor((row)=>column.value(row), {
47
48
  cell: cell ? (props)=>cell(props.row.original) : void 0,
48
49
  enableGlobalFilter: false !== globalFiltering,
@@ -55,61 +56,77 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
55
56
  header,
56
57
  id,
57
58
  size,
58
- meta: {
59
- fixedWidth: fixedWidth ?? false
60
- },
61
59
  sortUndefined: sortUndefined ?? 1
62
60
  });
63
61
  return columnHelper.display({
64
62
  cell: cell ? (props)=>cell(props.row.original) : void 0,
65
63
  header,
66
64
  id,
67
- size,
68
- meta: {
69
- fixedWidth: fixedWidth ?? false
70
- }
65
+ size
71
66
  });
72
67
  });
73
- return enableRowSelection ? [
74
- {
75
- id: selectColumnId,
76
- header: ({ table })=>{
77
- const selectableRows = table.getRowModel().rows.filter((row)=>row.getCanSelect());
78
- const AllRowsSelected = table.getIsAllRowsSelected();
79
- return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__["default"], {
80
- disabled: 0 === selectableRows.length,
81
- value: AllRowsSelected,
82
- onChange: ()=>{
83
- table.toggleAllRowsSelected(!(AllRowsSelected || table.getIsSomeRowsSelected()));
84
- },
85
- indeterminate: table.getIsSomeRowsSelected()
86
- });
87
- },
88
- cell: ({ table, row })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__["default"], {
89
- disabled: !row.getCanSelect(),
90
- value: row.getIsSelected(),
91
- onClick: (event)=>{
92
- if (event.shiftKey && lastSelectedRow.current) {
93
- const visibleRows = table.getRowModel().rows;
94
- const visibleIndex = visibleRows.findIndex((r)=>r.id === row.id);
95
- const lastIndex = visibleRows.findIndex((r)=>r.id === lastSelectedRow.current?.id);
96
- const startIndex = Math.min(lastIndex, visibleIndex);
97
- const endIndex = Math.max(lastIndex, visibleIndex);
98
- const rowsToSelect = visibleRows.slice(startIndex, endIndex + 1).filter((r)=>0 === r.subRows.length && r.getCanSelect());
99
- rowsToSelect.forEach((rowToSelect)=>rowToSelect.toggleSelected(!row.getIsSelected()));
100
- }
101
- lastSelectedRow.current = row;
102
- },
103
- onChange: (value)=>{
104
- row.toggleSelected(value);
68
+ const rowSelectionColumn = enableRowSelection ? columnHelper.display({
69
+ id: selectColumnId,
70
+ header: ({ table })=>{
71
+ const selectableRows = table.getRowModel().rows.filter((row)=>row.getCanSelect());
72
+ const allRowsSelected = table.getIsAllRowsSelected();
73
+ return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__["default"], {
74
+ disabled: 0 === selectableRows.length,
75
+ value: allRowsSelected,
76
+ onChange: ()=>{
77
+ table.toggleAllRowsSelected(!(allRowsSelected || table.getIsSomeRowsSelected()));
78
+ },
79
+ indeterminate: table.getIsSomeRowsSelected()
80
+ });
81
+ },
82
+ cell: ({ table, row })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__inputs_CheckboxInput_js_3a83f64b__["default"], {
83
+ disabled: !row.getCanSelect(),
84
+ value: row.getIsSelected(),
85
+ onClick: (event)=>{
86
+ if (event.shiftKey && lastSelectedRow.current) {
87
+ const visibleRows = table.getRowModel().rows;
88
+ const visibleIndex = visibleRows.findIndex((r)=>r.id === row.id);
89
+ const lastIndex = visibleRows.findIndex((r)=>r.id === lastSelectedRow.current?.id);
90
+ const startIndex = Math.min(lastIndex, visibleIndex);
91
+ const endIndex = Math.max(lastIndex, visibleIndex);
92
+ const rowsToSelect = visibleRows.slice(startIndex, endIndex + 1).filter((r)=>0 === r.subRows.length && r.getCanSelect());
93
+ rowsToSelect.forEach((rowToSelect)=>rowToSelect.toggleSelected(!row.getIsSelected()));
105
94
  }
95
+ lastSelectedRow.current = row;
96
+ },
97
+ onChange: (value)=>{
98
+ row.toggleSelected(value);
99
+ }
100
+ }),
101
+ size: 24,
102
+ enableSorting: false,
103
+ enableResizing: false,
104
+ enableColumnFilter: false
105
+ }) : void 0;
106
+ const actionsColumn = rowActions ? columnHelper.display({
107
+ id: actionsColumnId,
108
+ header: "",
109
+ size: 38,
110
+ cell: ({ row })=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__controls_MenuButton_js_b23cdd05__["default"], {
111
+ options: rowActions(row.original).filter((action)=>null !== action),
112
+ icon: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__Icon_js_0d271bb6__["default"], {
113
+ symbol: "Overflow"
106
114
  })
107
- },
108
- ...result
109
- ] : result;
115
+ }),
116
+ enableSorting: false,
117
+ enableHiding: false,
118
+ enableResizing: false,
119
+ enableColumnFilter: false
120
+ }) : void 0;
121
+ return [
122
+ rowSelectionColumn,
123
+ ...result,
124
+ actionsColumn
125
+ ].filter((column)=>void 0 !== column);
110
126
  }, [
111
127
  columns,
112
- enableRowSelection
128
+ enableRowSelection,
129
+ rowActions
113
130
  ]);
114
131
  const globalFilterableColumns = columns.filter((column)=>false !== column.globalFiltering && "display" !== column.type);
115
132
  const filterableColumns = columns.filter((column)=>void 0 !== column.filter);
@@ -415,13 +432,13 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
415
432
  className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
416
433
  __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
417
434
  __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableHeader,
418
- header.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0
435
+ header.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0,
436
+ header.column.id === actionsColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].actionsCell : void 0
419
437
  ]),
420
- style: header.column.id !== selectColumnId ? {
438
+ style: {
421
439
  width: header.column.getSize(),
422
- minWidth: header.column.columnDef.meta?.fixedWidth ? void 0 : header.column.getSize(),
423
- flexGrow: header.column.columnDef.meta?.fixedWidth ? void 0 : header.column.getSize()
424
- } : {},
440
+ flexGrow: header.column.id === selectColumnId || header.column.id === actionsColumnId ? 0 : header.column.getSize()
441
+ },
425
442
  children: header.isPlaceholder ? null : header.column.getCanSort() ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("button", {
426
443
  onClick: header.column.getToggleSortingHandler(),
427
444
  className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].sortableTableHeader,
@@ -461,7 +478,8 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
461
478
  "data-state": row.getIsSelected() ? "selected" : "",
462
479
  className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
463
480
  __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRow,
464
- enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectableRows : ""
481
+ enableRowSelection ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectableRows : "",
482
+ row.getIsGrouped() && groupColumn ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableRowGrouped : ""
465
483
  ]),
466
484
  "data-index": virtualRow.index,
467
485
  ref: rowVirtualizer.measureElement,
@@ -470,22 +488,19 @@ const Table = ({ data, columns, bulkActions = [], secondaryBulkActions = [], csv
470
488
  transform: `translateY(${virtualRow.start - rowVirtualizer.options.scrollMargin}px)`
471
489
  },
472
490
  children: row.getIsGrouped() && groupColumn ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
473
- className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
474
- __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableGroupRow,
475
- __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell
476
- ]),
491
+ className: __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
477
492
  children: groupColumn.grouping.header(row.original)
478
493
  }) : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
479
494
  children: row.getVisibleCells().map((cell)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("td", {
480
495
  className: (0, __WEBPACK_EXTERNAL_MODULE_clsx__["default"])([
481
496
  __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].tableCell,
482
- cell.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0
497
+ cell.column.id === selectColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].selectionCell : void 0,
498
+ cell.column.id === actionsColumnId ? __WEBPACK_EXTERNAL_MODULE__Table_module_js_1c0e33be__["default"].actionsCell : void 0
483
499
  ]),
484
- style: cell.column.id !== selectColumnId ? {
500
+ style: {
485
501
  width: cell.column.getSize(),
486
- minWidth: cell.column.columnDef.meta?.fixedWidth ? void 0 : cell.column.getSize(),
487
- flexGrow: cell.column.columnDef.meta?.fixedWidth ? void 0 : cell.column.getSize()
488
- } : {},
502
+ flexGrow: cell.column.id === selectColumnId || cell.column.id === actionsColumnId ? 0 : cell.column.getSize()
503
+ },
489
504
  children: (0, __WEBPACK_EXTERNAL_MODULE__tanstack_react_table_777e1b4b__.flexRender)(cell.column.columnDef.cell, cell.getContext())
490
505
  }, cell.id))
491
506
  })
package/dist/presentation/Table.module.js CHANGED
@@ -10,7 +10,8 @@ const Table_module_rslib_entry_ = {
10
10
  sortableTableHeader: "sortableTableHeader-J_3yN2",
11
11
  sortIcon: "sortIcon-ryD3bs",
12
12
  selectionCell: "selectionCell-oH5WZy",
13
- tableGroupRow: "tableGroupRow-L5CJFd",
13
+ actionsCell: "actionsCell-sieVnV",
14
+ tableRowGrouped: "tableRowGrouped-wWh7VE",
14
15
  noRows: "noRows-ECmnfr",
15
16
  bulkSelectionModal: "bulkSelectionModal-Ud3EW1",
16
17
  bulkSelectionModalContent: "bulkSelectionModalContent-LMqKi5",
package/dist/presentation/Table_module.css CHANGED
@@ -60,9 +60,12 @@
60
60
  user-select: none;
61
61
  }
62
62
 
63
- .tableGroupRow-L5CJFd {
63
+ .actionsCell-sieVnV {
64
+ justify-content: flex-end;
65
+ }
66
+
67
+ .tableRowGrouped-wWh7VE {
64
68
  background-color: var(--color-grey-t10);
65
- width: 100%;
66
69
  }
67
70
 
68
71
  .noRows-ECmnfr {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@worknice/whiteboard",
3
3
  "description": "",
4
- "version": "0.21.6",
4
+ "version": "0.22.0",
5
5
  "license": "MIT",
6
6
  "private": false,
7
7
  "files": [
@@ -38,7 +38,7 @@
38
38
  "react-markdown": "^10.1.0",
39
39
  "utf8": "^3.0.0",
40
40
  "zod": "^3.22.3",
41
- "@worknice/utils": "^0.6.84"
41
+ "@worknice/utils": "^0.6.85"
42
42
  },
43
43
  "devDependencies": {
44
44
  "@anolilab/semantic-release-pnpm": "^1.1.10",