@trackunit/react-table 0.0.187 → 0.0.191
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 +3 -3
- package/index.esm.js +3 -3
- package/package.json +1 -1
package/index.cjs.js
CHANGED
|
@@ -431,7 +431,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
431
431
|
}
|
|
432
432
|
return t("table.columnFilters.columns");
|
|
433
433
|
};
|
|
434
|
-
return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom
|
|
434
|
+
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" }), color: "secondary", variant: "transparent", 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", color: "secondary", variant: "transparent", size: "small", onClick: () => resetHiddenColumns(), children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
|
|
435
435
|
};
|
|
436
436
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
|
|
437
437
|
const [localColumns, setLocalColumns] = React__namespace.useState(columns);
|
|
@@ -538,7 +538,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
538
538
|
densityChosen: selectedDensity,
|
|
539
539
|
});
|
|
540
540
|
};
|
|
541
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.spacing.toolip"), placement: "bottom
|
|
541
|
+
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" }), color: "secondary", variant: "transparent", 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" })] }) }) })] }) }));
|
|
542
542
|
};
|
|
543
543
|
const DensitySelection = ({ text, onClick, icon, isSelected }) => {
|
|
544
544
|
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" }) }))] }));
|
|
@@ -577,7 +577,7 @@ const Sorting = ({ columns }) => {
|
|
|
577
577
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
578
578
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
579
579
|
};
|
|
580
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom
|
|
580
|
+
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" })), color: "secondary", variant: "transparent", 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 => {
|
|
581
581
|
var _a, _b, _c;
|
|
582
582
|
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));
|
|
583
583
|
}) }), 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
|
@@ -406,7 +406,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
406
406
|
}
|
|
407
407
|
return t("table.columnFilters.columns");
|
|
408
408
|
};
|
|
409
|
-
return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom
|
|
409
|
+
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" }), color: "secondary", variant: "transparent", 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", color: "secondary", variant: "transparent", size: "small", onClick: () => resetHiddenColumns(), children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, setColumnOrder: setColumnOrder, onUserEvent: onUserEvent })] })) })] }) }) }));
|
|
410
410
|
};
|
|
411
411
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
|
|
412
412
|
const [localColumns, setLocalColumns] = React.useState(columns);
|
|
@@ -513,7 +513,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
513
513
|
densityChosen: selectedDensity,
|
|
514
514
|
});
|
|
515
515
|
};
|
|
516
|
-
return (jsx(Tooltip, { label: t("table.spacing.toolip"), placement: "bottom
|
|
516
|
+
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" }), color: "secondary", variant: "transparent", 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" })] }) }) })] }) }));
|
|
517
517
|
};
|
|
518
518
|
const DensitySelection = ({ text, onClick, icon, isSelected }) => {
|
|
519
519
|
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" }) }))] }));
|
|
@@ -552,7 +552,7 @@ const Sorting = ({ columns }) => {
|
|
|
552
552
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
553
553
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
554
554
|
};
|
|
555
|
-
return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom
|
|
555
|
+
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" })), color: "secondary", variant: "transparent", 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 => {
|
|
556
556
|
var _a, _b, _c;
|
|
557
557
|
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));
|
|
558
558
|
}) }), 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" })] })] }) })] }) }));
|