@trackunit/react-table 0.0.412 → 0.0.414

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 (4) hide show
  1. package/index.cjs.js +26 -38
  2. package/index.esm.js +27 -39
  3. package/package.json +1 -1
  4. package/src/menus/ColumnFilter.d.ts +1 -2
package/index.cjs.js CHANGED
@@ -246,7 +246,7 @@ const actionDataToActionButton = (action, dataTestId) => (jsxRuntime.jsxs(Action
246
246
  * @returns {ReactElement} The rendered component.
247
247
  */
248
248
  const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
249
- const children = React.useMemo(() => actions && actions.map(action => action && actionDataToActionButton(action, dataTestId)), [actions, dataTestId]);
249
+ const children = React.useMemo(() => actions.map(action => actionDataToActionButton(action, dataTestId)), [actions, dataTestId]);
250
250
  const { overflowContainerRef, itemOverflowMap } = reactComponents.useOverflowItems({
251
251
  children,
252
252
  childUniqueIdentifierAttribute: "id",
@@ -278,7 +278,7 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
278
278
  */
279
279
  const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
280
280
  const [t] = useTranslation();
281
- return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs(reactComponents.Text, { className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", size: "large", children: [jsxRuntime.jsx(reactComponents.IconButton, { circular: true, dataTestId: "XButton", icon: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), onClick: resetSelection, variant: "ghost-neutral" }), t("table.actionsheet.selected", { count: selections === null || selections === void 0 ? void 0 : selections.length })] }), jsxRuntime.jsx(ActionContainerAndOverflow, { dataTestId,
281
+ return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs(reactComponents.Text, { className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", size: "large", children: [jsxRuntime.jsx(reactComponents.IconButton, { circular: true, dataTestId: "XButton", icon: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), onClick: resetSelection, variant: "ghost-neutral" }), t("table.actionsheet.selected", { count: selections.length })] }), jsxRuntime.jsx(ActionContainerAndOverflow, { dataTestId,
282
282
  actions,
283
283
  moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
284
284
  };
@@ -303,12 +303,12 @@ const Table = (_a) => {
303
303
  rowHeight,
304
304
  });
305
305
  const hasResults = props.getRowModel().rows.length > 0;
306
- return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [(props.headerLeftActions || props.headerRightActions) && (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerRightActions })] })), jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
306
+ return (jsxRuntime.jsxs(reactComponents.Card, { className: tailwindMerge.twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxRuntime.jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex items-center", children: props.headerRightActions })] })) : null, jsxRuntime.jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxRuntime.jsxs(reactTableBaseComponents.TableRoot, { style: {
307
307
  height: hasResults ? "auto" : "100%",
308
308
  width: "100%",
309
309
  position: "relative",
310
310
  }, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
311
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
311
+ var _a, _b, _c, _d, _e, _f;
312
312
  const tooltipLabel = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.tootipLabel) !== null && _b !== void 0 ? _b : (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
313
313
  return (jsxRuntime.jsxs(reactTableBaseComponents.Th, { className: "relative", style: {
314
314
  width: header.getSize(),
@@ -317,7 +317,7 @@ const Table = (_a) => {
317
317
  textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
318
318
  flexGrow: ((_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.shouldGrow) ? 1 : 0,
319
319
  }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : "flex"} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
320
- onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_f = (_e = header.column.columnDef) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: (_h = (_g = header.column.columnDef) === null || _g === void 0 ? void 0 : _g.meta) === null || _h === void 0 ? void 0 : _h.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_j = header.column.columnDef.meta) === null || _j === void 0 ? void 0 : _j.shouldGrow) && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
320
+ onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [reactTable.flexRender(header.column.columnDef.header, header.getContext()), ((_e = header.column.columnDef.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_f = header.column.columnDef.meta) === null || _f === void 0 ? void 0 : _f.shouldGrow) && header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
321
321
  }) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
322
322
  height: `${getTotalSize()}px`,
323
323
  }, children: getVirtualItems().map((virtualRow, index) => {
@@ -339,7 +339,7 @@ const Table = (_a) => {
339
339
  }, style: {
340
340
  height: `${virtualRow.size}px`,
341
341
  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
342
- }, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
342
+ }, children: row.getVisibleCells().map(cell => {
343
343
  var _a, _b;
344
344
  return (jsxRuntime.jsx(reactTableBaseComponents.Td, { key: cell.id,
345
345
  style: {
@@ -351,10 +351,10 @@ const Table = (_a) => {
351
351
  }, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
352
352
  }) }, row.id));
353
353
  }
354
- }) })) : (jsxRuntime.jsx("tbody", { className: "min-h-[400px]", children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT" })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
354
+ }) })) : (jsxRuntime.jsx("tbody", { className: "min-h-[400px]", children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: props.loading ? (jsxRuntime.jsx(reactComponents.Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT" })) }) }) }))] }) }), props.hideFooter ? null : (jsxRuntime.jsxs("div", { className: "flex items-center p-2", children: [jsxRuntime.jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
355
355
  count: props.getRowModel().rows.length,
356
356
  total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
357
- }) }), ((_d = props.pagination) === null || _d === void 0 ? void 0 : _d.isLoading) ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions && jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] }))] }));
357
+ }) }), ((_d = props.pagination) === null || _d === void 0 ? void 0 : _d.isLoading) ? (jsxRuntime.jsx("span", { className: "ml-2", children: jsxRuntime.jsx(reactComponents.Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
358
358
  };
359
359
  const cvaTableRow = cssClassVarianceUtilities.cvaMerge(["hover:bg-neutral-100"], {
360
360
  variants: {
@@ -384,23 +384,19 @@ const cvaColumnFilterGrabbable = cssClassVarianceUtilities.cvaMerge(["flex", "it
384
384
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
385
385
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
386
386
  */
387
- const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
388
- var _a;
387
+ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
389
388
  const [t] = useTranslation();
390
- const numberOfHiddenColumns = (_a = columns === null || columns === void 0 ? void 0 : columns.filter(column => !column.getIsVisible())) === null || _a === void 0 ? void 0 : _a.length;
389
+ const numberOfHiddenColumns = columns.filter(column => !column.getIsVisible()).length;
391
390
  const resetHiddenColumns = React__namespace.useCallback(() => {
392
- columns === null || columns === void 0 ? void 0 : columns.forEach(column => { var _a, _b; return column.toggleVisibility((_b = !((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true); });
393
- setColumnOrder(defaultColumnOrder || []);
391
+ columns.forEach(column => { var _a; return column.toggleVisibility(!((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)); });
392
+ setColumnOrder(defaultColumnOrder);
394
393
  }, [columns, defaultColumnOrder, setColumnOrder]);
395
394
  const sortedColumns = React.useMemo(() => {
396
- const result = columnOrder && ((columnOrder === null || columnOrder === void 0 ? void 0 : columnOrder.length) || 0) > 0
397
- ? columns === null || columns === void 0 ? void 0 : columns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
395
+ const result = columnOrder && (columnOrder.length || 0) > 0
396
+ ? columns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
398
397
  : columns;
399
398
  return result;
400
399
  }, [columnOrder, columns]);
401
- if (!columns) {
402
- return null;
403
- }
404
400
  const getColumnButtonText = () => {
405
401
  if (numberOfHiddenColumns > 1) {
406
402
  return t("table.columnFilters.hiddenColumnsCount", { count: numberOfHiddenColumns });
@@ -438,13 +434,13 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
438
434
  columnReordered: (_a = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _a !== void 0 ? _a : "",
439
435
  });
440
436
  }, [localColumns, onUserEvent]);
441
- return (jsxRuntime.jsx("div", { className: "flex max-h-full max-w-[400px] flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns === null || localColumns === void 0 ? void 0 : localColumns.map((column, index) => {
442
- var _a, _b, _c, _d, _e, _f, _g;
437
+ return (jsxRuntime.jsx("div", { className: "flex max-h-full max-w-[400px] flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
438
+ var _a, _b, _c, _d, _e, _f;
443
439
  const { columnDef } = column;
444
- if (!((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnFilterLabel) && (!columnDef.header || ((_b = columnDef.header) === null || _b === void 0 ? void 0 : _b.length) === 0)) {
440
+ if (!((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnFilterLabel) && (!columnDef.header || columnDef.header.length === 0)) {
445
441
  return null;
446
442
  }
447
- return (jsxRuntime.jsx(ColumnFilterItem, { disabled: !!((_c = column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.required), id: column.id, index: index, moveColumn: moveColumn, name: (_g = (_e = (_d = columnDef.meta) === null || _d === void 0 ? void 0 : _d.columnFilterLabel) !== null && _e !== void 0 ? _e : (_f = columnDef.header) === null || _f === void 0 ? void 0 : _f.toString()) !== null && _g !== void 0 ? _g : "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
443
+ return (jsxRuntime.jsx(ColumnFilterItem, { disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), id: column.id, index: index, moveColumn: moveColumn, name: (_f = (_d = (_c = columnDef.meta) === null || _c === void 0 ? void 0 : _c.columnFilterLabel) !== null && _d !== void 0 ? _d : (_e = columnDef.header) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
448
444
  column.getToggleVisibilityHandler()(event);
449
445
  onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Filter", {
450
446
  columnName: column.id,
@@ -461,7 +457,6 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
461
457
  const [, drop] = reactDnd.useDrop({
462
458
  accept: ItemTypes.COLUMN,
463
459
  hover(item, monitor) {
464
- var _a;
465
460
  if (!ref.current) {
466
461
  return;
467
462
  }
@@ -470,7 +465,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
470
465
  if (dragIndex === hoverIndex) {
471
466
  return;
472
467
  }
473
- const hoverBoundingRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
468
+ const hoverBoundingRect = ref.current.getBoundingClientRect();
474
469
  const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
475
470
  const clientOffset = monitor.getClientOffset();
476
471
  const hoverClientY = clientOffset.y - hoverBoundingRect.top;
@@ -522,7 +517,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
522
517
  return (jsxRuntime.jsx(reactComponents.Tooltip, { dataTestId: "row-spacing", label: t("table.spacing.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: jsxRuntime.jsx(reactComponents.Icon, { name: "ArrowsPointingOut", size: "small" }), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.spacing") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsx(reactComponents.MenuList, { children: jsxRuntime.jsxs("div", { className: "flex flex-col justify-start", children: [jsxRuntime.jsx(DensitySelection, { icon: jsxRuntime.jsx(CompactIcon, {}), isSelected: density === "compact", onClick: () => handleClick("compact"), text: t("table.rowDensity.compact") }), jsxRuntime.jsx(DensitySelection, { icon: jsxRuntime.jsx(SpaciousIcon, {}), isSelected: density === "spacious", onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious") })] }) }) })] }) }));
523
518
  };
524
519
  const DensitySelection = ({ text, onClick, icon, isSelected }) => {
525
- return (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsxRuntime.jsx("div", { className: "mr-1 flex", children: icon }), jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: text }), isSelected && (jsxRuntime.jsx("div", { className: "justify-endgrow flex", children: jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) }))] }));
520
+ return (jsxRuntime.jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsxRuntime.jsx("div", { className: "mr-1 flex", children: icon }), jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: text }), isSelected ? (jsxRuntime.jsx("div", { className: "justify-endgrow flex", children: jsxRuntime.jsx(reactComponents.Icon, { name: "Check", size: "small" }) })) : null] }));
526
521
  };
527
522
  const SpaciousIcon = () => {
528
523
  return (jsxRuntime.jsx("svg", { height: 12, viewBox: "0 0 24 24", width: 12, xmlns: "http://www.w3.org/2000/svg", children: jsxRuntime.jsx("path", { d: "M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 }) }));
@@ -545,7 +540,7 @@ const Sorting = ({ columns, }) => {
545
540
  const sortableColumns = columns.filter(column => column.getCanSort());
546
541
  const currentSortValue = (_a = sortableColumns.find(column => column.getIsSorted())) === null || _a === void 0 ? void 0 : _a.id;
547
542
  const currentSortDirection = ((_b = sortableColumns.find(column => column.getIsSorted())) === null || _b === void 0 ? void 0 : _b.getIsSorted()) || "desc";
548
- if (!sortableColumns || sortableColumns.length === 0) {
543
+ if (sortableColumns.length === 0) {
549
544
  return null;
550
545
  }
551
546
  const handleSelectionChange = (e) => {
@@ -559,8 +554,8 @@ const Sorting = ({ columns, }) => {
559
554
  chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
560
555
  };
561
556
  return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxRuntime.jsxs(reactComponents.Popover, { placement: "bottom-start", children: [jsxRuntime.jsx(reactComponents.PopoverTrigger, { children: jsxRuntime.jsx(reactComponents.Button, { prefix: currentSortDirection === "asc" ? (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowUp", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] overflow-y-auto", showDivider: true, children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
562
- var _a, _b, _c;
563
- return (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: (_c = (_b = (_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "", value: column.id }, column.id));
557
+ var _a, _b;
558
+ return (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: (_b = (_a = column.columnDef.header) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "", value: column.id }, column.id));
564
559
  }) }), jsxRuntime.jsxs(reactFormComponents.RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
565
560
  };
566
561
 
@@ -605,20 +600,13 @@ const useTable = (_a) => {
605
600
  return resultFromInitialState;
606
601
  }, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder]);
607
602
  const [columnVisibility, setColumnVisibility] = React.useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || updatedInitialColumnVisibility || {});
608
- const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder || []);
603
+ const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder);
609
604
  const [sorting, setSorting] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
610
605
  const [columnSizing, setColumnSizing] = React.useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
611
- const isFirstRender = reactComponents.useIsFirstRender();
612
- const tableColumnRef = React.useRef(columns);
613
- React.useEffect(() => {
614
- if (process.env.NODE_ENV !== "production") {
615
- if (!isFirstRender && tableColumnRef.current !== columns) ;
616
- }
617
- }, [isFirstRender, columns]);
618
606
  React.useEffect(() => {
619
- if (initialState && sharedUtils.objectKeys(initialState || {}).length > 0) {
607
+ if (initialState && sharedUtils.objectKeys(initialState).length > 0) {
620
608
  setColumnVisibility(initialState.columnVisibility || updatedInitialColumnVisibility || {});
621
- setColumnOrder(initialState.columnOrder || updatedInitialColumnOrder || []);
609
+ setColumnOrder(initialState.columnOrder || updatedInitialColumnOrder);
622
610
  setSorting(initialState.sorting || []);
623
611
  setColumnSizing(initialState.columnSizing || {});
624
612
  }
package/index.esm.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
2
2
  import { registerTranslations, useNamespaceTranslation } from '@trackunit/i18n-library-translation';
3
- import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent, useIsFirstRender } from '@trackunit/react-components';
3
+ import { MenuItem, Icon, Text, Button, useOverflowItems, MoreMenu, MenuList, IconButton, Card, Spinner, EmptyState, Tooltip, Popover, PopoverTrigger, PopoverContent } from '@trackunit/react-components';
4
4
  import { objectValues, truthy, objectKeys, objectEntries } from '@trackunit/shared-utils';
5
5
  import * as React from 'react';
6
6
  import { useMemo, Children, cloneElement, useRef, useState, useEffect, useCallback } from 'react';
@@ -221,7 +221,7 @@ const actionDataToActionButton = (action, dataTestId) => (jsxs(ActionButton, { a
221
221
  * @returns {ReactElement} The rendered component.
222
222
  */
223
223
  const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
224
- const children = useMemo(() => actions && actions.map(action => action && actionDataToActionButton(action, dataTestId)), [actions, dataTestId]);
224
+ const children = useMemo(() => actions.map(action => actionDataToActionButton(action, dataTestId)), [actions, dataTestId]);
225
225
  const { overflowContainerRef, itemOverflowMap } = useOverflowItems({
226
226
  children,
227
227
  childUniqueIdentifierAttribute: "id",
@@ -253,7 +253,7 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
253
253
  */
254
254
  const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
255
255
  const [t] = useTranslation();
256
- return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxs(Text, { className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", size: "large", children: [jsx(IconButton, { circular: true, dataTestId: "XButton", icon: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), onClick: resetSelection, variant: "ghost-neutral" }), t("table.actionsheet.selected", { count: selections === null || selections === void 0 ? void 0 : selections.length })] }), jsx(ActionContainerAndOverflow, { dataTestId,
256
+ return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxs(Text, { className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", size: "large", children: [jsx(IconButton, { circular: true, dataTestId: "XButton", icon: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), onClick: resetSelection, variant: "ghost-neutral" }), t("table.actionsheet.selected", { count: selections.length })] }), jsx(ActionContainerAndOverflow, { dataTestId,
257
257
  actions,
258
258
  moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
259
259
  };
@@ -278,12 +278,12 @@ const Table = (_a) => {
278
278
  rowHeight,
279
279
  });
280
280
  const hasResults = props.getRowModel().rows.length > 0;
281
- return (jsxs(Card, { className: twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [(props.headerLeftActions || props.headerRightActions) && (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center", children: props.headerLeftActions }), jsx("div", { className: "flex items-center", children: props.headerRightActions })] })), jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
281
+ return (jsxs(Card, { className: twMerge("flex flex-col overflow-hidden", props.className), dataTestId: props.dataTestId, children: [props.headerLeftActions || props.headerRightActions ? (jsxs("div", { className: "z-default flex justify-between gap-2 p-2", children: [jsx("div", { className: "flex items-center", children: props.headerLeftActions }), jsx("div", { className: "flex items-center", children: props.headerRightActions })] })) : null, jsx("div", { className: "h-full overflow-x-auto overflow-y-scroll border-b border-t border-gray-300", onScroll: e => fetchMoreOnBottomReached(e.target), ref: tableContainerRef, children: jsxs(TableRoot, { style: {
282
282
  height: hasResults ? "auto" : "100%",
283
283
  width: "100%",
284
284
  position: "relative",
285
285
  }, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
286
- var _a, _b, _c, _d, _e, _f, _g, _h, _j;
286
+ var _a, _b, _c, _d, _e, _f;
287
287
  const tooltipLabel = (_b = (_a = header.column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.tootipLabel) !== null && _b !== void 0 ? _b : (typeof header.column.columnDef.header === "string" ? header.column.columnDef.header : "");
288
288
  return (jsxs(Th, { className: "relative", style: {
289
289
  width: header.getSize(),
@@ -292,7 +292,7 @@ const Table = (_a) => {
292
292
  textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
293
293
  flexGrow: ((_d = header.column.columnDef.meta) === null || _d === void 0 ? void 0 : _d.shouldGrow) ? 1 : 0,
294
294
  }, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : "flex"} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
295
- onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_f = (_e = header.column.columnDef) === null || _e === void 0 ? void 0 : _e.meta) === null || _f === void 0 ? void 0 : _f.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_h = (_g = header.column.columnDef) === null || _g === void 0 ? void 0 : _g.meta) === null || _h === void 0 ? void 0 : _h.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_j = header.column.columnDef.meta) === null || _j === void 0 ? void 0 : _j.shouldGrow) && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
295
+ onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_e = header.column.columnDef.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: header.column.columnDef.meta.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), !((_f = header.column.columnDef.meta) === null || _f === void 0 ? void 0 : _f.shouldGrow) && header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
296
296
  }) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
297
297
  height: `${getTotalSize()}px`,
298
298
  }, children: getVirtualItems().map((virtualRow, index) => {
@@ -314,7 +314,7 @@ const Table = (_a) => {
314
314
  }, style: {
315
315
  height: `${virtualRow.size}px`,
316
316
  transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
317
- }, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
317
+ }, children: row.getVisibleCells().map(cell => {
318
318
  var _a, _b;
319
319
  return (jsx(Td, { key: cell.id,
320
320
  style: {
@@ -326,10 +326,10 @@ const Table = (_a) => {
326
326
  }, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
327
327
  }) }, row.id));
328
328
  }
329
- }) })) : (jsx("tbody", { className: "min-h-[400px]", children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.loading) ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT" })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
329
+ }) })) : (jsx("tbody", { className: "min-h-[400px]", children: jsx("tr", { children: jsx("td", { className: "b-0", children: props.loading ? (jsx(Spinner, { centering: "centered", containerClassName: "absolute inset-0" })) : props.noDataMessage ? (props.noDataMessage) : (jsx(EmptyState, { className: "absolute inset-0", description: t("table.noResults"), image: "SEARCH_DOCUMENT" })) }) }) }))] }) }), props.hideFooter ? null : (jsxs("div", { className: "flex items-center p-2", children: [jsx("div", { className: "whitespace-nowrap text-xs font-medium text-neutral-600", children: t("table.pagination.full", {
330
330
  count: props.getRowModel().rows.length,
331
331
  total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
332
- }) }), ((_d = props.pagination) === null || _d === void 0 ? void 0 : _d.isLoading) ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions && jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] }))] }));
332
+ }) }), ((_d = props.pagination) === null || _d === void 0 ? void 0 : _d.isLoading) ? (jsx("span", { className: "ml-2", children: jsx(Spinner, { size: "small" }) })) : null, props.footerRightActions ? jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions }) : null] }))] }));
333
333
  };
334
334
  const cvaTableRow = cvaMerge(["hover:bg-neutral-100"], {
335
335
  variants: {
@@ -359,23 +359,19 @@ const cvaColumnFilterGrabbable = cvaMerge(["flex", "items-center", "justify-cent
359
359
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
360
360
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
361
361
  */
362
- const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }) => {
363
- var _a;
362
+ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], columnOrder, onUserEvent, }) => {
364
363
  const [t] = useTranslation();
365
- const numberOfHiddenColumns = (_a = columns === null || columns === void 0 ? void 0 : columns.filter(column => !column.getIsVisible())) === null || _a === void 0 ? void 0 : _a.length;
364
+ const numberOfHiddenColumns = columns.filter(column => !column.getIsVisible()).length;
366
365
  const resetHiddenColumns = React.useCallback(() => {
367
- columns === null || columns === void 0 ? void 0 : columns.forEach(column => { var _a, _b; return column.toggleVisibility((_b = !((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true); });
368
- setColumnOrder(defaultColumnOrder || []);
366
+ columns.forEach(column => { var _a; return column.toggleVisibility(!((_a = column.columnDef.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)); });
367
+ setColumnOrder(defaultColumnOrder);
369
368
  }, [columns, defaultColumnOrder, setColumnOrder]);
370
369
  const sortedColumns = useMemo(() => {
371
- const result = columnOrder && ((columnOrder === null || columnOrder === void 0 ? void 0 : columnOrder.length) || 0) > 0
372
- ? columns === null || columns === void 0 ? void 0 : columns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
370
+ const result = columnOrder && (columnOrder.length || 0) > 0
371
+ ? columns.sort((a, b) => columnOrder.indexOf(a.id) - columnOrder.indexOf(b.id))
373
372
  : columns;
374
373
  return result;
375
374
  }, [columnOrder, columns]);
376
- if (!columns) {
377
- return null;
378
- }
379
375
  const getColumnButtonText = () => {
380
376
  if (numberOfHiddenColumns > 1) {
381
377
  return t("table.columnFilters.hiddenColumnsCount", { count: numberOfHiddenColumns });
@@ -413,13 +409,13 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
413
409
  columnReordered: (_a = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _a !== void 0 ? _a : "",
414
410
  });
415
411
  }, [localColumns, onUserEvent]);
416
- return (jsx("div", { className: "flex max-h-full max-w-[400px] flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns === null || localColumns === void 0 ? void 0 : localColumns.map((column, index) => {
417
- var _a, _b, _c, _d, _e, _f, _g;
412
+ return (jsx("div", { className: "flex max-h-full max-w-[400px] flex-col gap-2 overflow-y-auto overflow-x-hidden whitespace-nowrap", children: localColumns.map((column, index) => {
413
+ var _a, _b, _c, _d, _e, _f;
418
414
  const { columnDef } = column;
419
- if (!((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnFilterLabel) && (!columnDef.header || ((_b = columnDef.header) === null || _b === void 0 ? void 0 : _b.length) === 0)) {
415
+ if (!((_a = columnDef.meta) === null || _a === void 0 ? void 0 : _a.columnFilterLabel) && (!columnDef.header || columnDef.header.length === 0)) {
420
416
  return null;
421
417
  }
422
- return (jsx(ColumnFilterItem, { disabled: !!((_c = column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.required), id: column.id, index: index, moveColumn: moveColumn, name: (_g = (_e = (_d = columnDef.meta) === null || _d === void 0 ? void 0 : _d.columnFilterLabel) !== null && _e !== void 0 ? _e : (_f = columnDef.header) === null || _f === void 0 ? void 0 : _f.toString()) !== null && _g !== void 0 ? _g : "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
418
+ return (jsx(ColumnFilterItem, { disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), id: column.id, index: index, moveColumn: moveColumn, name: (_f = (_d = (_c = columnDef.meta) === null || _c === void 0 ? void 0 : _c.columnFilterLabel) !== null && _d !== void 0 ? _d : (_e = columnDef.header) === null || _e === void 0 ? void 0 : _e.toString()) !== null && _f !== void 0 ? _f : "", onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
423
419
  column.getToggleVisibilityHandler()(event);
424
420
  onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Filter", {
425
421
  columnName: column.id,
@@ -436,7 +432,6 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
436
432
  const [, drop] = useDrop({
437
433
  accept: ItemTypes.COLUMN,
438
434
  hover(item, monitor) {
439
- var _a;
440
435
  if (!ref.current) {
441
436
  return;
442
437
  }
@@ -445,7 +440,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
445
440
  if (dragIndex === hoverIndex) {
446
441
  return;
447
442
  }
448
- const hoverBoundingRect = (_a = ref.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
443
+ const hoverBoundingRect = ref.current.getBoundingClientRect();
449
444
  const hoverMiddleY = (hoverBoundingRect.bottom - hoverBoundingRect.top) / 2;
450
445
  const clientOffset = monitor.getClientOffset();
451
446
  const hoverClientY = clientOffset.y - hoverBoundingRect.top;
@@ -497,7 +492,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
497
492
  return (jsx(Tooltip, { dataTestId: "row-spacing", label: t("table.spacing.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ArrowsPointingOut", size: "small" }), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: t("table.spacing") }) }) }), jsx(PopoverContent, { children: jsx(MenuList, { children: jsxs("div", { className: "flex flex-col justify-start", children: [jsx(DensitySelection, { icon: jsx(CompactIcon, {}), isSelected: density === "compact", onClick: () => handleClick("compact"), text: t("table.rowDensity.compact") }), jsx(DensitySelection, { icon: jsx(SpaciousIcon, {}), isSelected: density === "spacious", onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious") })] }) }) })] }) }));
498
493
  };
499
494
  const DensitySelection = ({ text, onClick, icon, isSelected }) => {
500
- return (jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsx("div", { className: "mr-1 flex", children: icon }), jsx(Text, { weight: "thick", children: text }), isSelected && (jsx("div", { className: "justify-endgrow flex", children: jsx(Icon, { name: "Check", size: "small" }) }))] }));
495
+ return (jsxs("div", { className: "flex w-full cursor-pointer items-center p-1 hover:bg-neutral-50", onClick: onClick, children: [jsx("div", { className: "mr-1 flex", children: icon }), jsx(Text, { weight: "thick", children: text }), isSelected ? (jsx("div", { className: "justify-endgrow flex", children: jsx(Icon, { name: "Check", size: "small" }) })) : null] }));
501
496
  };
502
497
  const SpaciousIcon = () => {
503
498
  return (jsx("svg", { height: 12, viewBox: "0 0 24 24", width: 12, xmlns: "http://www.w3.org/2000/svg", children: jsx("path", { d: "M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2 }) }));
@@ -520,7 +515,7 @@ const Sorting = ({ columns, }) => {
520
515
  const sortableColumns = columns.filter(column => column.getCanSort());
521
516
  const currentSortValue = (_a = sortableColumns.find(column => column.getIsSorted())) === null || _a === void 0 ? void 0 : _a.id;
522
517
  const currentSortDirection = ((_b = sortableColumns.find(column => column.getIsSorted())) === null || _b === void 0 ? void 0 : _b.getIsSorted()) || "desc";
523
- if (!sortableColumns || sortableColumns.length === 0) {
518
+ if (sortableColumns.length === 0) {
524
519
  return null;
525
520
  }
526
521
  const handleSelectionChange = (e) => {
@@ -534,8 +529,8 @@ const Sorting = ({ columns, }) => {
534
529
  chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
535
530
  };
536
531
  return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "BarsArrowUp", size: "small" })) : (jsx(Icon, { name: "BarsArrowDown", size: "small" })), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { className: "max-h-[55vh] overflow-y-auto", showDivider: true, children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
537
- var _a, _b, _c;
538
- return (jsx(RadioItem, { className: "w-full", label: (_c = (_b = (_a = column === null || column === void 0 ? void 0 : column.columnDef) === null || _a === void 0 ? void 0 : _a.header) === null || _b === void 0 ? void 0 : _b.toString()) !== null && _c !== void 0 ? _c : "", value: column.id }, column.id));
532
+ var _a, _b;
533
+ return (jsx(RadioItem, { className: "w-full", label: (_b = (_a = column.columnDef.header) === null || _a === void 0 ? void 0 : _a.toString()) !== null && _b !== void 0 ? _b : "", value: column.id }, column.id));
539
534
  }) }), jsxs(RadioGroup, { id: "sortOrder", onChange: onSelectOrder, value: currentSortDirection, children: [jsx(RadioItem, { className: "w-full", label: t("table.sorting.ascending"), value: "asc" }), jsx(RadioItem, { className: "w-full", label: t("table.sorting.descending"), value: "desc" })] })] }) })] }) }));
540
535
  };
541
536
 
@@ -580,20 +575,13 @@ const useTable = (_a) => {
580
575
  return resultFromInitialState;
581
576
  }, [columns, initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder]);
582
577
  const [columnVisibility, setColumnVisibility] = useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || updatedInitialColumnVisibility || {});
583
- const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder || []);
578
+ const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || updatedInitialColumnOrder);
584
579
  const [sorting, setSorting] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
585
580
  const [columnSizing, setColumnSizing] = useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
586
- const isFirstRender = useIsFirstRender();
587
- const tableColumnRef = useRef(columns);
588
- useEffect(() => {
589
- if (process.env.NODE_ENV !== "production") {
590
- if (!isFirstRender && tableColumnRef.current !== columns) ;
591
- }
592
- }, [isFirstRender, columns]);
593
581
  useEffect(() => {
594
- if (initialState && objectKeys(initialState || {}).length > 0) {
582
+ if (initialState && objectKeys(initialState).length > 0) {
595
583
  setColumnVisibility(initialState.columnVisibility || updatedInitialColumnVisibility || {});
596
- setColumnOrder(initialState.columnOrder || updatedInitialColumnOrder || []);
584
+ setColumnOrder(initialState.columnOrder || updatedInitialColumnOrder);
597
585
  setSorting(initialState.sorting || []);
598
586
  setColumnSizing(initialState.columnSizing || {});
599
587
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-table",
3
- "version": "0.0.412",
3
+ "version": "0.0.414",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
package/src/menus/ColumnFilter.d.ts CHANGED
@@ -4,7 +4,6 @@ export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterVa
4
4
  columns: Column<TColumnFilter, TColumnFilterValue>[];
5
5
  defaultColumnOrder: ColumnOrderState;
6
6
  columnOrder?: ColumnOrderState;
7
- className?: string;
8
7
  setColumnOrder: (updater: Updater<ColumnOrderState>) => void;
9
8
  onUserEvent?: (event: "Column Reordering" | "Column Filter", payload: Record<string, unknown>) => void;
10
9
  }
@@ -16,7 +15,7 @@ export interface ColumnFilterProps<TColumnFilter extends object, TColumnFilterVa
16
15
  * @param {ColumnFilterProps<TColumnFilter, TColumnFilterValue>} props - The props object containing necessary properties.
17
16
  * @returns {JSX.Element | null} A React JSX element representing the ColumnFilter component or null if columns are not provided.
18
17
  */
19
- export declare const ColumnFilter: <TColumnFilter extends object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => JSX.Element | null;
18
+ export declare const ColumnFilter: <TColumnFilter extends object, TColumnFilterValue>({ columns, setColumnOrder, defaultColumnOrder, columnOrder, onUserEvent, }: ColumnFilterProps<TColumnFilter, TColumnFilterValue>) => JSX.Element;
20
19
  export interface ColumnFiltersDragAndDropProps<TColumnFiltersDragAndDrop extends object, TColumnFiltersDragAndDropValue> {
21
20
  columns: Column<TColumnFiltersDragAndDrop, TColumnFiltersDragAndDropValue>[];
22
21
  setColumnOrder: (updater: Updater<ColumnOrderState>) => void;