@trackunit/react-table 0.0.563 → 0.0.565
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 +12 -6
- package/index.esm.js +12 -6
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -179,9 +179,13 @@ const cvaMoreContainer = cssClassVarianceUtilities.cvaMerge([
|
|
|
179
179
|
*/
|
|
180
180
|
const ActionButton = ({ action, id, ...rest }) => {
|
|
181
181
|
if (action.type === "route") {
|
|
182
|
-
return (
|
|
182
|
+
return (
|
|
183
|
+
// eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
|
|
184
|
+
jsxRuntime.jsx(reactComponents.Button, { asChild: true, id: id, loading: action.loading, prefix: jsxRuntime.jsx(ActionIcon, { action: action }), ...rest, children: jsxRuntime.jsx(reactRouter.Link, { to: action.url, children: action.label }) }));
|
|
183
185
|
}
|
|
184
|
-
return (jsxRuntime.jsx(reactComponents.Button, { id: id, loading: action.loading, onClick: e => action.method(e),
|
|
186
|
+
return (jsxRuntime.jsx(reactComponents.Button, { id: id, loading: action.loading, onClick: e => action.method(e),
|
|
187
|
+
// eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
|
|
188
|
+
prefix: jsxRuntime.jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
|
|
185
189
|
};
|
|
186
190
|
/**
|
|
187
191
|
* Converts an action model to a MenuItem component.
|
|
@@ -202,7 +206,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
|
|
|
202
206
|
key: action.label,
|
|
203
207
|
dataTestId,
|
|
204
208
|
};
|
|
205
|
-
const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-
|
|
209
|
+
const item = (jsxRuntime.jsx(reactComponents.MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsxRuntime.jsx(reactComponents.Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "medium", style: action.style })) : null, stopPropagation: false }, action.label));
|
|
206
210
|
if ("url" in action) {
|
|
207
211
|
return (jsxRuntime.jsx(reactRouter.Link, { id: action.id, to: action.url, children: item }, action.label));
|
|
208
212
|
}
|
|
@@ -260,9 +264,11 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
|
|
|
260
264
|
});
|
|
261
265
|
}) }), jsxRuntime.jsxs("div", { className: cvaMoreContainer({ isDropdown: dropdownActions !== undefined }), children: [dropdownActions
|
|
262
266
|
? dropdownActions.map(action => {
|
|
263
|
-
return (jsxRuntime.jsx(reactComponents.MoreMenu, {
|
|
267
|
+
return (jsxRuntime.jsx(reactComponents.MoreMenu, { customButton: jsxRuntime.jsx(reactComponents.Button, { dataTestId: action.dataTestId, id: action.id, loading: action.loading, onClick: action.method,
|
|
268
|
+
// eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
|
|
269
|
+
prefix: jsxRuntime.jsx(ActionIcon, { action: action }), children: action.label }), dataTestId: `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: !action.loading ? action.dropdown : null }, action.id));
|
|
264
270
|
})
|
|
265
|
-
: null, React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, {
|
|
271
|
+
: null, React.Children.count(moreActions) > 0 || overflowItemCount ? (jsxRuntime.jsx(reactComponents.MoreMenu, { dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, 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 => {
|
|
266
272
|
return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
|
|
267
273
|
})] })) })) : null] })] }));
|
|
268
274
|
};
|
|
@@ -572,7 +578,7 @@ const Sorting = ({ columns, }) => {
|
|
|
572
578
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
573
579
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
574
580
|
};
|
|
575
|
-
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",
|
|
581
|
+
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", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
|
|
576
582
|
var _a, _b;
|
|
577
583
|
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));
|
|
578
584
|
}) }), 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
|
@@ -160,9 +160,13 @@ const cvaMoreContainer = cvaMerge([
|
|
|
160
160
|
*/
|
|
161
161
|
const ActionButton = ({ action, id, ...rest }) => {
|
|
162
162
|
if (action.type === "route") {
|
|
163
|
-
return (
|
|
163
|
+
return (
|
|
164
|
+
// eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
|
|
165
|
+
jsx(Button, { asChild: true, id: id, loading: action.loading, prefix: jsx(ActionIcon, { action: action }), ...rest, children: jsx(Link, { to: action.url, children: action.label }) }));
|
|
164
166
|
}
|
|
165
|
-
return (jsx(Button, { id: id, loading: action.loading, onClick: e => action.method(e),
|
|
167
|
+
return (jsx(Button, { id: id, loading: action.loading, onClick: e => action.method(e),
|
|
168
|
+
// eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
|
|
169
|
+
prefix: jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
|
|
166
170
|
};
|
|
167
171
|
/**
|
|
168
172
|
* Converts an action model to a MenuItem component.
|
|
@@ -183,7 +187,7 @@ const actionDataToMenuItem = (action, dataTestId) => {
|
|
|
183
187
|
key: action.label,
|
|
184
188
|
dataTestId,
|
|
185
189
|
};
|
|
186
|
-
const item = (jsx(MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-
|
|
190
|
+
const item = (jsx(MenuItem, { props, className: "flex justify-center", dataTestId: `${dataTestId}-action-menu-item`, label: action.label, onClick: "method" in action ? action.method : undefined, prefix: action.icon ? (jsx(Icon, { "data-testid": "action-icon", forwardedRef: action.forwardedRef, name: action.icon, size: "medium", style: action.style })) : null, stopPropagation: false }, action.label));
|
|
187
191
|
if ("url" in action) {
|
|
188
192
|
return (jsx(Link, { id: action.id, to: action.url, children: item }, action.label));
|
|
189
193
|
}
|
|
@@ -241,9 +245,11 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, dat
|
|
|
241
245
|
});
|
|
242
246
|
}) }), jsxs("div", { className: cvaMoreContainer({ isDropdown: dropdownActions !== undefined }), children: [dropdownActions
|
|
243
247
|
? dropdownActions.map(action => {
|
|
244
|
-
return (jsx(MoreMenu, {
|
|
248
|
+
return (jsx(MoreMenu, { customButton: jsx(Button, { dataTestId: action.dataTestId, id: action.id, loading: action.loading, onClick: action.method,
|
|
249
|
+
// eslint-disable-next-line local-rules/design-guideline-button-icon-size-match
|
|
250
|
+
prefix: jsx(ActionIcon, { action: action }), children: action.label }), dataTestId: `${dataTestId}-dropdown-more-menu`, popoverProps: { placement: "top-end" }, children: !action.loading ? action.dropdown : null }, action.id));
|
|
245
251
|
})
|
|
246
|
-
: null, Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, {
|
|
252
|
+
: null, Children.count(moreActions) > 0 || overflowItemCount ? (jsx(MoreMenu, { dataTestId: `${dataTestId}-more-menu`, iconButtonProps: { variant: "primary" }, 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 => {
|
|
247
253
|
return itemOverflowMap[action.id] ? actionDataToMenuItem(action, dataTestId) : null;
|
|
248
254
|
})] })) })) : null] })] }));
|
|
249
255
|
};
|
|
@@ -553,7 +559,7 @@ const Sorting = ({ columns, }) => {
|
|
|
553
559
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
554
560
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
555
561
|
};
|
|
556
|
-
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",
|
|
562
|
+
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", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
|
|
557
563
|
var _a, _b;
|
|
558
564
|
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));
|
|
559
565
|
}) }), 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" })] })] }) })] }) }));
|