@trackunit/react-table 0.0.240 → 0.0.244
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.
- package/index.cjs.js +23 -23
- package/index.esm.js +23 -23
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -187,9 +187,9 @@ function __rest(s, e) {
|
|
|
187
187
|
const ActionButton = (_a) => {
|
|
188
188
|
var { action, children, id } = _a, rest = __rest(_a, ["action", "children", "id"]);
|
|
189
189
|
if (action.type === "route") {
|
|
190
|
-
return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ renderAs: reactRouterDom.Link, to: action.url, variant: "ghost-neutral"
|
|
190
|
+
return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ id: id, renderAs: reactRouterDom.Link, to: action.url, variant: "ghost-neutral" }, rest, { children: children })));
|
|
191
191
|
}
|
|
192
|
-
return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ onClick: action.method, variant: "ghost-neutral"
|
|
192
|
+
return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ id: id, onClick: action.method, variant: "ghost-neutral" }, rest, { children: children })));
|
|
193
193
|
};
|
|
194
194
|
/**
|
|
195
195
|
* Converts an action model to a MenuItem component.
|
|
@@ -210,7 +210,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
|
|
|
210
210
|
key: action.label,
|
|
211
211
|
dataTestId,
|
|
212
212
|
};
|
|
213
|
-
const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props,
|
|
213
|
+
const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-label`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style }), stopPropagation: false }, action.label));
|
|
214
214
|
if ("url" in action) {
|
|
215
215
|
return (jsxRuntime.jsx(reactRouterDom.Link, { id: action.id, to: action.url, children: item }, action.label));
|
|
216
216
|
}
|
|
@@ -225,7 +225,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
|
|
|
225
225
|
* @param {string} [dataTestId] - Optional data test ID.
|
|
226
226
|
* @returns {JSX.Element} - The ActionButton component for the given action.
|
|
227
227
|
*/
|
|
228
|
-
const actionDataToActionButton = (action, dataTestId) => (jsxRuntime.jsxs(ActionButton, { action: action,
|
|
228
|
+
const actionDataToActionButton = (action, dataTestId) => (jsxRuntime.jsxs(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.label, id: action.id, children: [jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style }), jsxRuntime.jsx(reactComponents.Text, { className: "!text-base text-white", dataTestId: `${dataTestId}-action-label`, children: action.label })] }, action.id));
|
|
229
229
|
|
|
230
230
|
/**
|
|
231
231
|
* `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.
|
|
@@ -255,7 +255,7 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
|
|
|
255
255
|
return React.cloneElement(child, {
|
|
256
256
|
className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
|
|
257
257
|
});
|
|
258
|
-
}) }), React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, {
|
|
258
|
+
}) }), React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { className: "p-0", dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "ghost", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, popoverProps: { placement: "top-end" }, children: close => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
|
|
259
259
|
return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
|
|
260
260
|
})] })) })) : null] }));
|
|
261
261
|
};
|
|
@@ -270,7 +270,7 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
|
|
|
270
270
|
*/
|
|
271
271
|
const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
|
|
272
272
|
const [t] = useTranslation();
|
|
273
|
-
return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs(reactComponents.Text, {
|
|
273
|
+
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,
|
|
274
274
|
actions,
|
|
275
275
|
moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
|
|
276
276
|
};
|
|
@@ -357,19 +357,19 @@ const Table = (_a) => {
|
|
|
357
357
|
rowHeight,
|
|
358
358
|
});
|
|
359
359
|
const hasResults = props.getRowModel().rows.length > 0;
|
|
360
|
-
return (jsxRuntime.jsxs(reactComponents.Card, { className: `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",
|
|
360
|
+
return (jsxRuntime.jsxs(reactComponents.Card, { className: `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: {
|
|
361
361
|
height: hasResults ? "auto" : "100%",
|
|
362
362
|
width: "100%",
|
|
363
363
|
position: "relative",
|
|
364
364
|
}, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
|
|
365
365
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
366
366
|
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 : "");
|
|
367
|
-
return (jsxRuntime.jsxs(reactTableBaseComponents.Th, { style: {
|
|
367
|
+
return (jsxRuntime.jsxs(reactTableBaseComponents.Th, { className: "relative", style: {
|
|
368
368
|
width: header.getSize(),
|
|
369
369
|
minWidth: header.column.columnDef.minSize,
|
|
370
370
|
maxWidth: header.column.columnDef.maxSize,
|
|
371
371
|
textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
|
|
372
|
-
},
|
|
372
|
+
}, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxRuntime.jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
|
|
373
373
|
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 = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: (_g = (_f = header.column.columnDef) === null || _f === void 0 ? void 0 : _f.meta) === null || _g === void 0 ? void 0 : _g.subHeader })) : null] }), header.column.getCanSort() ? (jsxRuntime.jsx(reactTableBaseComponents.SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsxRuntime.jsx(reactTableBaseComponents.ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
|
|
374
374
|
}) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsx(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", style: {
|
|
375
375
|
height: `${getTotalSize()}px`,
|
|
@@ -379,17 +379,17 @@ const Table = (_a) => {
|
|
|
379
379
|
return null;
|
|
380
380
|
}
|
|
381
381
|
else {
|
|
382
|
-
return (jsxRuntime.jsx(reactTableBaseComponents.Tr, { layout: "flex",
|
|
383
|
-
height: `${virtualRow.size}px`,
|
|
384
|
-
transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
|
|
385
|
-
}, onClick: () => {
|
|
382
|
+
return (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
|
|
386
383
|
if (props.onRowClick) {
|
|
387
384
|
props.onRowClick(row);
|
|
388
385
|
}
|
|
389
386
|
else if (row.getCanSelect()) {
|
|
390
387
|
row.toggleSelected();
|
|
391
388
|
}
|
|
392
|
-
},
|
|
389
|
+
}, style: {
|
|
390
|
+
height: `${virtualRow.size}px`,
|
|
391
|
+
transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
|
|
392
|
+
}, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
|
|
393
393
|
var _a;
|
|
394
394
|
return (jsxRuntime.jsx(reactTableBaseComponents.Td, { key: cell.id,
|
|
395
395
|
style: {
|
|
@@ -400,7 +400,7 @@ const Table = (_a) => {
|
|
|
400
400
|
}, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: reactTable.flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
|
|
401
401
|
}) }, row.id));
|
|
402
402
|
}
|
|
403
|
-
}) })) : (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, {
|
|
403
|
+
}) })) : (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", {
|
|
404
404
|
count: props.getRowModel().rows.length,
|
|
405
405
|
total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
|
|
406
406
|
}) }), ((_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 })] }))] }));
|
|
@@ -449,7 +449,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
449
449
|
}
|
|
450
450
|
return t("table.columnFilters.columns");
|
|
451
451
|
};
|
|
452
|
-
return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), 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: "ViewColumns", size: "small" }),
|
|
452
|
+
return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), 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: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsxRuntime.jsx(reactComponents.Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
|
|
453
453
|
};
|
|
454
454
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
|
|
455
455
|
const [localColumns, setLocalColumns] = React__namespace.useState(columns);
|
|
@@ -481,13 +481,13 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
|
|
|
481
481
|
if (!columnDef.header || ((_a = columnDef.header) === null || _a === void 0 ? void 0 : _a.length) === 0) {
|
|
482
482
|
return null;
|
|
483
483
|
}
|
|
484
|
-
return (jsxRuntime.jsx(ColumnFilterItem, {
|
|
484
|
+
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: columnDef.header.toString(), onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
|
|
485
485
|
column.getToggleVisibilityHandler()(event);
|
|
486
486
|
onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Filter", {
|
|
487
487
|
columnName: column.id,
|
|
488
488
|
hidden: !toggled,
|
|
489
489
|
});
|
|
490
|
-
} }, column.id));
|
|
490
|
+
}, toggled: column.getIsVisible() }, column.id));
|
|
491
491
|
}) }));
|
|
492
492
|
};
|
|
493
493
|
const ItemTypes = {
|
|
@@ -539,7 +539,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
|
|
|
539
539
|
});
|
|
540
540
|
const opacity = isDragging ? 0 : 1;
|
|
541
541
|
drag(drop(ref));
|
|
542
|
-
return (jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2", ref: ref, style: { opacity: opacity }, children: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsxRuntime.jsx(reactComponents.Icon, { name: "Bars3", size: "small" }) }), jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content]", children: [jsxRuntime.jsx(reactComponents.Text, { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: name }), disabled ? jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) : null] }), jsxRuntime.jsx(reactFormComponents.Toggle, {
|
|
542
|
+
return (jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2", ref: ref, style: { opacity: opacity }, children: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsxRuntime.jsx(reactComponents.Icon, { name: "Bars3", size: "small" }) }), jsxRuntime.jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content]", children: [jsxRuntime.jsx(reactComponents.Text, { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: name }), disabled ? jsxRuntime.jsx(reactComponents.Icon, { name: "LockClosed", size: "small" }) : null] }), jsxRuntime.jsx(reactFormComponents.Toggle, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", toggled: toggled })] }));
|
|
543
543
|
};
|
|
544
544
|
|
|
545
545
|
/**
|
|
@@ -556,16 +556,16 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
556
556
|
densityChosen: selectedDensity,
|
|
557
557
|
});
|
|
558
558
|
};
|
|
559
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.spacing.toolip"), placement: "bottom",
|
|
559
|
+
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") })] }) }) })] }) }));
|
|
560
560
|
};
|
|
561
561
|
const DensitySelection = ({ text, onClick, icon, isSelected }) => {
|
|
562
562
|
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" }) }))] }));
|
|
563
563
|
};
|
|
564
564
|
const SpaciousIcon = () => {
|
|
565
|
-
return (jsxRuntime.jsx("svg", {
|
|
565
|
+
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 }) }));
|
|
566
566
|
};
|
|
567
567
|
const CompactIcon = () => {
|
|
568
|
-
return (jsxRuntime.jsx("svg", {
|
|
568
|
+
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: 4.5 }) }));
|
|
569
569
|
};
|
|
570
570
|
|
|
571
571
|
/**
|
|
@@ -595,7 +595,7 @@ const Sorting = ({ columns, }) => {
|
|
|
595
595
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
596
596
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
597
597
|
};
|
|
598
|
-
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" })),
|
|
598
|
+
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 => {
|
|
599
599
|
var _a, _b, _c;
|
|
600
600
|
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));
|
|
601
601
|
}) }), 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" })] })] }) })] }) }));
|
package/index.esm.js
CHANGED
|
@@ -162,9 +162,9 @@ function __rest(s, e) {
|
|
|
162
162
|
const ActionButton = (_a) => {
|
|
163
163
|
var { action, children, id } = _a, rest = __rest(_a, ["action", "children", "id"]);
|
|
164
164
|
if (action.type === "route") {
|
|
165
|
-
return (jsx(Button, Object.assign({ renderAs: Link, to: action.url, variant: "ghost-neutral"
|
|
165
|
+
return (jsx(Button, Object.assign({ id: id, renderAs: Link, to: action.url, variant: "ghost-neutral" }, rest, { children: children })));
|
|
166
166
|
}
|
|
167
|
-
return (jsx(Button, Object.assign({ onClick: action.method, variant: "ghost-neutral"
|
|
167
|
+
return (jsx(Button, Object.assign({ id: id, onClick: action.method, variant: "ghost-neutral" }, rest, { children: children })));
|
|
168
168
|
};
|
|
169
169
|
/**
|
|
170
170
|
* Converts an action model to a MenuItem component.
|
|
@@ -185,7 +185,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
|
|
|
185
185
|
key: action.label,
|
|
186
186
|
dataTestId,
|
|
187
187
|
};
|
|
188
|
-
const item = (jsx(MenuItem, { props,
|
|
188
|
+
const item = (jsx(MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-label`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: jsx(Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style }), stopPropagation: false }, action.label));
|
|
189
189
|
if ("url" in action) {
|
|
190
190
|
return (jsx(Link, { id: action.id, to: action.url, children: item }, action.label));
|
|
191
191
|
}
|
|
@@ -200,7 +200,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
|
|
|
200
200
|
* @param {string} [dataTestId] - Optional data test ID.
|
|
201
201
|
* @returns {JSX.Element} - The ActionButton component for the given action.
|
|
202
202
|
*/
|
|
203
|
-
const actionDataToActionButton = (action, dataTestId) => (jsxs(ActionButton, { action: action,
|
|
203
|
+
const actionDataToActionButton = (action, dataTestId) => (jsxs(ActionButton, { action: action, className: "max-w-max flex-shrink-0", dataTestId: action.label, id: action.id, children: [jsx(Icon, { color: "white", "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: action.size, style: action.style }), jsx(Text, { className: "!text-base text-white", dataTestId: `${dataTestId}-action-label`, children: action.label })] }, action.id));
|
|
204
204
|
|
|
205
205
|
/**
|
|
206
206
|
* `ActionContainerAndOverflow` renders a set of actions and a MoreMenu for overflow.
|
|
@@ -230,7 +230,7 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
|
|
|
230
230
|
return cloneElement(child, {
|
|
231
231
|
className: `${child.props.className} ${itemVisibilityClassName(child.props.id)}`,
|
|
232
232
|
});
|
|
233
|
-
}) }), Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, {
|
|
233
|
+
}) }), Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, { className: "p-0", dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "ghost", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, popoverProps: { placement: "top-end" }, children: close => (jsxs(MenuList, { className: "relative -right-2", onClick: close, children: [moreActions ? moreActions : null, actions.map(action => {
|
|
234
234
|
return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
|
|
235
235
|
})] })) })) : null] }));
|
|
236
236
|
};
|
|
@@ -245,7 +245,7 @@ const ActionContainerAndOverflow = ({ actions, moreActions, dataTestId }) => {
|
|
|
245
245
|
*/
|
|
246
246
|
const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, className, dataTestId, }) => {
|
|
247
247
|
const [t] = useTranslation();
|
|
248
|
-
return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxs(Text, {
|
|
248
|
+
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,
|
|
249
249
|
actions,
|
|
250
250
|
moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
|
|
251
251
|
};
|
|
@@ -332,19 +332,19 @@ const Table = (_a) => {
|
|
|
332
332
|
rowHeight,
|
|
333
333
|
});
|
|
334
334
|
const hasResults = props.getRowModel().rows.length > 0;
|
|
335
|
-
return (jsxs(Card, { className: `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",
|
|
335
|
+
return (jsxs(Card, { className: `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: {
|
|
336
336
|
height: hasResults ? "auto" : "100%",
|
|
337
337
|
width: "100%",
|
|
338
338
|
position: "relative",
|
|
339
339
|
}, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
|
|
340
340
|
var _a, _b, _c, _d, _e, _f, _g;
|
|
341
341
|
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 : "");
|
|
342
|
-
return (jsxs(Th, { style: {
|
|
342
|
+
return (jsxs(Th, { className: "relative", style: {
|
|
343
343
|
width: header.getSize(),
|
|
344
344
|
minWidth: header.column.columnDef.minSize,
|
|
345
345
|
maxWidth: header.column.columnDef.maxSize,
|
|
346
346
|
textAlign: ((_c = header.column.columnDef.meta) === null || _c === void 0 ? void 0 : _c.alignment) || "left",
|
|
347
|
-
},
|
|
347
|
+
}, tooltipLabel: tooltipLabel, children: [header.isPlaceholder ? null : (jsxs("div", { className: `${header.column.getCanSort() ? "cursor-pointer select-none flex" : ""} items-center gap-2 py-2 overflow-hidden pr-3 w-full`,
|
|
348
348
|
onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_e = (_d = header.column.columnDef) === null || _d === void 0 ? void 0 : _d.meta) === null || _e === void 0 ? void 0 : _e.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_g = (_f = header.column.columnDef) === null || _f === void 0 ? void 0 : _f.meta) === null || _g === void 0 ? void 0 : _g.subHeader })) : null] }), header.column.getCanSort() ? (jsx(SortIndicator, { sortingState: header.column.getIsSorted() })) : null] })), header.column.getCanResize() ? (jsx(ResizeHandle, { isResizing: header.column.getIsResizing(), onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler() })) : null] }, header.id));
|
|
349
349
|
}) }, headerGroup.id))) }), hasResults ? (jsx(Tbody, { className: "text-sm font-normal", style: {
|
|
350
350
|
height: `${getTotalSize()}px`,
|
|
@@ -354,17 +354,17 @@ const Table = (_a) => {
|
|
|
354
354
|
return null;
|
|
355
355
|
}
|
|
356
356
|
else {
|
|
357
|
-
return (jsx(Tr, { layout: "flex",
|
|
358
|
-
height: `${virtualRow.size}px`,
|
|
359
|
-
transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
|
|
360
|
-
}, onClick: () => {
|
|
357
|
+
return (jsx(Tr, { className: `${(props.onRowClick || row.getCanSelect()) && "cursor-pointer"} hover:bg-neutral-100`, dataTestId: `table-body-row-${virtualRow.index}`, layout: "flex", onClick: () => {
|
|
361
358
|
if (props.onRowClick) {
|
|
362
359
|
props.onRowClick(row);
|
|
363
360
|
}
|
|
364
361
|
else if (row.getCanSelect()) {
|
|
365
362
|
row.toggleSelected();
|
|
366
363
|
}
|
|
367
|
-
},
|
|
364
|
+
}, style: {
|
|
365
|
+
height: `${virtualRow.size}px`,
|
|
366
|
+
transform: `translateY(${virtualRow.start - index * virtualRow.size}px)`,
|
|
367
|
+
}, children: row === null || row === void 0 ? void 0 : row.getVisibleCells().map(cell => {
|
|
368
368
|
var _a;
|
|
369
369
|
return (jsx(Td, { key: cell.id,
|
|
370
370
|
style: {
|
|
@@ -375,7 +375,7 @@ const Table = (_a) => {
|
|
|
375
375
|
}, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
|
|
376
376
|
}) }, row.id));
|
|
377
377
|
}
|
|
378
|
-
}) })) : (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, {
|
|
378
|
+
}) })) : (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", {
|
|
379
379
|
count: props.getRowModel().rows.length,
|
|
380
380
|
total: ((_c = (_b = props.pagination) === null || _b === void 0 ? void 0 : _b.pageInfo) === null || _c === void 0 ? void 0 : _c.count) || 0,
|
|
381
381
|
}) }), ((_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 })] }))] }));
|
|
@@ -424,7 +424,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
424
424
|
}
|
|
425
425
|
return t("table.columnFilters.columns");
|
|
426
426
|
};
|
|
427
|
-
return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }),
|
|
427
|
+
return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: jsx(Icon, { name: "ViewColumns", size: "small" }), size: "small", variant: "ghost-neutral", children: jsx("span", { className: "hidden sm:block", children: getColumnButtonText() }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto pr-4", children: [jsxs("div", { className: "mb-2 flex items-center justify-between", children: [jsx(Text, { size: "small", subtle: true, children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", onClick: () => resetHiddenColumns(), size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder })] })) })] }) }) }));
|
|
428
428
|
};
|
|
429
429
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
|
|
430
430
|
const [localColumns, setLocalColumns] = React.useState(columns);
|
|
@@ -456,13 +456,13 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
|
|
|
456
456
|
if (!columnDef.header || ((_a = columnDef.header) === null || _a === void 0 ? void 0 : _a.length) === 0) {
|
|
457
457
|
return null;
|
|
458
458
|
}
|
|
459
|
-
return (jsx(ColumnFilterItem, {
|
|
459
|
+
return (jsx(ColumnFilterItem, { disabled: !!((_b = column.columnDef.meta) === null || _b === void 0 ? void 0 : _b.required), id: column.id, index: index, moveColumn: moveColumn, name: columnDef.header.toString(), onCancelDrop: onCancelColumDrop, onDrop: onColumDrop, onToggle: (toggled, event) => {
|
|
460
460
|
column.getToggleVisibilityHandler()(event);
|
|
461
461
|
onUserEvent === null || onUserEvent === void 0 ? void 0 : onUserEvent("Column Filter", {
|
|
462
462
|
columnName: column.id,
|
|
463
463
|
hidden: !toggled,
|
|
464
464
|
});
|
|
465
|
-
} }, column.id));
|
|
465
|
+
}, toggled: column.getIsVisible() }, column.id));
|
|
466
466
|
}) }));
|
|
467
467
|
};
|
|
468
468
|
const ItemTypes = {
|
|
@@ -514,7 +514,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
|
|
|
514
514
|
});
|
|
515
515
|
const opacity = isDragging ? 0 : 1;
|
|
516
516
|
drag(drop(ref));
|
|
517
|
-
return (jsxs("div", { className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2", ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsx(Icon, { name: "Bars3", size: "small" }) }), jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content]", children: [jsx(Text, { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: name }), disabled ? jsx(Icon, { name: "LockClosed", size: "small" }) : null] }), jsx(Toggle, {
|
|
517
|
+
return (jsxs("div", { className: "grid w-full grid-cols-[min-content,1fr,min-content] items-center gap-2", ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsx(Icon, { name: "Bars3", size: "small" }) }), jsxs("div", { className: "grid w-full grid-cols-[1fr,min-content]", children: [jsx(Text, { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: name }), disabled ? jsx(Icon, { name: "LockClosed", size: "small" }) : null] }), jsx(Toggle, { disabled: disabled, id: id, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", toggled: toggled })] }));
|
|
518
518
|
};
|
|
519
519
|
|
|
520
520
|
/**
|
|
@@ -531,16 +531,16 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
531
531
|
densityChosen: selectedDensity,
|
|
532
532
|
});
|
|
533
533
|
};
|
|
534
|
-
return (jsx(Tooltip, { label: t("table.spacing.toolip"), placement: "bottom",
|
|
534
|
+
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") })] }) }) })] }) }));
|
|
535
535
|
};
|
|
536
536
|
const DensitySelection = ({ text, onClick, icon, isSelected }) => {
|
|
537
537
|
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" }) }))] }));
|
|
538
538
|
};
|
|
539
539
|
const SpaciousIcon = () => {
|
|
540
|
-
return (jsx("svg", {
|
|
540
|
+
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 }) }));
|
|
541
541
|
};
|
|
542
542
|
const CompactIcon = () => {
|
|
543
|
-
return (jsx("svg", {
|
|
543
|
+
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: 4.5 }) }));
|
|
544
544
|
};
|
|
545
545
|
|
|
546
546
|
/**
|
|
@@ -570,7 +570,7 @@ const Sorting = ({ columns, }) => {
|
|
|
570
570
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
571
571
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
572
572
|
};
|
|
573
|
-
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" })),
|
|
573
|
+
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 => {
|
|
574
574
|
var _a, _b, _c;
|
|
575
575
|
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));
|
|
576
576
|
}) }), 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" })] })] }) })] }) }));
|