@trackunit/react-table 0.0.218 → 0.0.219
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 +7 -7
- package/index.esm.js +7 -7
- 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: "
|
|
190
|
+
return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ renderAs: reactRouterDom.Link, to: action.url, variant: "ghost-neutral", id: id }, rest, { children: children })));
|
|
191
191
|
}
|
|
192
|
-
return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ onClick: action.method, variant: "
|
|
192
|
+
return (jsxRuntime.jsx(reactComponents.Button, Object.assign({ onClick: action.method, variant: "ghost-neutral", id: id }, rest, { children: children })));
|
|
193
193
|
};
|
|
194
194
|
/**
|
|
195
195
|
* Converts an action model to a MenuItem component.
|
|
@@ -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, { popoverProps: { placement: "top-end" }, className: "p-0", iconButtonProps: { variant: "
|
|
258
|
+
}) }), React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { popoverProps: { placement: "top-end" }, className: "p-0", iconButtonProps: { variant: "ghost", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, dataTestId: `${dataTestId}-more-menu`, 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, { size: "large", className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", children: [jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection,
|
|
273
|
+
return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsxs(reactComponents.Text, { size: "large", className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", children: [jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, variant: "ghost-neutral", circular: true, dataTestId: "XButton" }), 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
|
};
|
|
@@ -436,7 +436,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
436
436
|
}
|
|
437
437
|
return t("table.columnFilters.columns");
|
|
438
438
|
};
|
|
439
|
-
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" }),
|
|
439
|
+
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" }), variant: "ghost-neutral", size: "small", 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, { subtle: true, size: "small", children: t("table.columnFilters.title") }), jsxRuntime.jsx(reactComponents.Button, { className: "p-0", variant: "ghost-neutral", size: "small", onClick: () => resetHiddenColumns(), children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
|
|
440
440
|
};
|
|
441
441
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
|
|
442
442
|
const [localColumns, setLocalColumns] = React__namespace.useState(columns);
|
|
@@ -543,7 +543,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
543
543
|
densityChosen: selectedDensity,
|
|
544
544
|
});
|
|
545
545
|
};
|
|
546
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, { 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" }),
|
|
546
|
+
return (jsxRuntime.jsx(reactComponents.Tooltip, { 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" }), variant: "ghost-neutral", size: "small", 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, { onClick: () => handleClick("compact"), text: t("table.rowDensity.compact"), icon: jsxRuntime.jsx(CompactIcon, {}), isSelected: density === "compact" }), jsxRuntime.jsx(DensitySelection, { onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious"), icon: jsxRuntime.jsx(SpaciousIcon, {}), isSelected: density === "spacious" })] }) }) })] }) }));
|
|
547
547
|
};
|
|
548
548
|
const DensitySelection = ({ text, onClick, icon, isSelected }) => {
|
|
549
549
|
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" }) }))] }));
|
|
@@ -582,7 +582,7 @@ const Sorting = ({ columns, }) => {
|
|
|
582
582
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
583
583
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
584
584
|
};
|
|
585
|
-
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" })),
|
|
585
|
+
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" })), variant: "ghost-neutral", size: "small", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: jsxRuntime.jsxs(reactComponents.MenuList, { showDivider: true, className: "max-h-[55vh] overflow-y-auto", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
|
|
586
586
|
var _a, _b, _c;
|
|
587
587
|
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));
|
|
588
588
|
}) }), 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: "
|
|
165
|
+
return (jsx(Button, Object.assign({ renderAs: Link, to: action.url, variant: "ghost-neutral", id: id }, rest, { children: children })));
|
|
166
166
|
}
|
|
167
|
-
return (jsx(Button, Object.assign({ onClick: action.method, variant: "
|
|
167
|
+
return (jsx(Button, Object.assign({ onClick: action.method, variant: "ghost-neutral", id: id }, rest, { children: children })));
|
|
168
168
|
};
|
|
169
169
|
/**
|
|
170
170
|
* Converts an action model to a MenuItem component.
|
|
@@ -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, { popoverProps: { placement: "top-end" }, className: "p-0", iconButtonProps: { variant: "
|
|
233
|
+
}) }), Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, { popoverProps: { placement: "top-end" }, className: "p-0", iconButtonProps: { variant: "ghost", circular: true }, iconProps: { color: "white", name: "EllipsisHorizontal" }, dataTestId: `${dataTestId}-more-menu`, 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, { size: "large", className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", children: [jsx(IconButton, { icon: jsx(Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection,
|
|
248
|
+
return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxs(Text, { size: "large", className: "border-primary-500 col-span-3 w-full border-b text-white sm:col-span-1 sm:w-max sm:border-0", children: [jsx(IconButton, { icon: jsx(Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, variant: "ghost-neutral", circular: true, dataTestId: "XButton" }), 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
|
};
|
|
@@ -411,7 +411,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
411
411
|
}
|
|
412
412
|
return t("table.columnFilters.columns");
|
|
413
413
|
};
|
|
414
|
-
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" }),
|
|
414
|
+
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" }), variant: "ghost-neutral", size: "small", 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, { subtle: true, size: "small", children: t("table.columnFilters.title") }), jsx(Button, { className: "p-0", variant: "ghost-neutral", size: "small", onClick: () => resetHiddenColumns(), children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
|
|
415
415
|
};
|
|
416
416
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
|
|
417
417
|
const [localColumns, setLocalColumns] = React.useState(columns);
|
|
@@ -518,7 +518,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
518
518
|
densityChosen: selectedDensity,
|
|
519
519
|
});
|
|
520
520
|
};
|
|
521
|
-
return (jsx(Tooltip, { 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" }),
|
|
521
|
+
return (jsx(Tooltip, { 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" }), variant: "ghost-neutral", size: "small", 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, { onClick: () => handleClick("compact"), text: t("table.rowDensity.compact"), icon: jsx(CompactIcon, {}), isSelected: density === "compact" }), jsx(DensitySelection, { onClick: () => handleClick("spacious"), text: t("table.rowDensity.spacious"), icon: jsx(SpaciousIcon, {}), isSelected: density === "spacious" })] }) }) })] }) }));
|
|
522
522
|
};
|
|
523
523
|
const DensitySelection = ({ text, onClick, icon, isSelected }) => {
|
|
524
524
|
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" }) }))] }));
|
|
@@ -557,7 +557,7 @@ const Sorting = ({ columns, }) => {
|
|
|
557
557
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
558
558
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
559
559
|
};
|
|
560
|
-
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" })),
|
|
560
|
+
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" })), variant: "ghost-neutral", size: "small", children: jsx("span", { className: "hidden sm:block", children: t("table.sorting.label") }) }) }), jsx(PopoverContent, { children: jsxs(MenuList, { showDivider: true, className: "max-h-[55vh] overflow-y-auto", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
|
|
561
561
|
var _a, _b, _c;
|
|
562
562
|
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));
|
|
563
563
|
}) }), 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" })] })] }) })] }) }));
|