@trackunit/react-table 0.0.58 → 0.0.60
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 +9 -9
- package/index.esm.js +9 -9
- package/package.json +5 -5
package/index.cjs.js
CHANGED
|
@@ -178,7 +178,7 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
|
|
|
178
178
|
const actionsFilteredForScreenSize = smallScreen ? [filteredActions[0]] : filteredActions;
|
|
179
179
|
const moreActionsFilteredForScreenSize = smallScreen ? moreActions === null || moreActions === void 0 ? void 0 : moreActions.concat(filteredActions.slice(1)) : moreActions;
|
|
180
180
|
const actionDataToActionButton = (action, moreAction = false) => (jsxRuntime.jsxs(ActionButton, { action: action, disabled: (selections === null || selections === void 0 ? void 0 : selections.length) === 0, dataTestId: action.label, className: "lg:mr-3", children: [jsxRuntime.jsx(reactComponents.Text, { dataTestId: `${containerProps["data-testid"]}-action-label`, className: `${moreAction ? "text-inherit" : "!text-white"} !text-base`, children: action.label }), jsxRuntime.jsx(reactComponents.Icon, { name: action.icon, color: moreAction ? "neutral" : "white", size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style })] }, action.label));
|
|
181
|
-
return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className: containerProps.className }), "data-testid": containerProps["data-testid"], children: [jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, color: "secondary", variant: "transparent", circular: true, dataTestId: "XButton" }), jsxRuntime.jsxs(reactComponents.Text, { size: "large", className: "!
|
|
181
|
+
return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className: containerProps.className }), "data-testid": containerProps["data-testid"], children: [jsxRuntime.jsx(reactComponents.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, color: "secondary", variant: "transparent", circular: true, dataTestId: "XButton" }), jsxRuntime.jsxs(reactComponents.Text, { size: "large", className: "!lg:mr-28 !mr-4 w-max !text-white", children: [selections === null || selections === void 0 ? void 0 : selections.length, " ", t("table.actionsheet.selected")] }), actionsFilteredForScreenSize.map(action => action && actionDataToActionButton(action)), moreActionsFilteredForScreenSize && moreActionsFilteredForScreenSize.length > 0 && (jsxRuntime.jsx(reactComponents.MoreMenu, { popoverProps: { placement: "top" }, iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white" }, dataTestId: `${containerProps["data-testid"]}-more-menu`, children: jsxRuntime.jsx("div", { className: "animate-fade-in-fast absolute bottom-12 right-0", children: jsxRuntime.jsx(reactComponents.MenuList, { children: moreActionsFilteredForScreenSize.map(action => actionDataToActionButton(action, true)) }) }) }))] }));
|
|
182
182
|
};
|
|
183
183
|
|
|
184
184
|
/**
|
|
@@ -3942,7 +3942,7 @@ const Table = (props) => {
|
|
|
3942
3942
|
rowSize: props.getRowModel().rows.length || 0,
|
|
3943
3943
|
});
|
|
3944
3944
|
const hasResults = props.getRowModel().rows.length > 0;
|
|
3945
|
-
return (jsxRuntime.jsxs(reactComponents.Card, { className: `
|
|
3945
|
+
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", children: props.headerLeftActions }), jsxRuntime.jsx("div", { className: "flex", children: props.headerRightActions })] })), jsxRuntime.jsx("div", { className: "min-h[500px] 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: {
|
|
3946
3946
|
width: props.getCenterTotalSize(),
|
|
3947
3947
|
}, children: [jsxRuntime.jsx(reactTableBaseComponents.Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsxRuntime.jsx(reactTableBaseComponents.Tr, { className: "flex", children: headerGroup.headers.map(header => {
|
|
3948
3948
|
var _a, _b, _c, _d;
|
|
@@ -3951,7 +3951,7 @@ const Table = (props) => {
|
|
|
3951
3951
|
minWidth: header.column.columnDef.minSize,
|
|
3952
3952
|
maxWidth: header.column.columnDef.maxSize,
|
|
3953
3953
|
}, className: "relative", 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`,
|
|
3954
|
-
onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "
|
|
3954
|
+
onClick: header.column.getToggleSortingHandler(), children: [jsxRuntime.jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_b = (_a = header.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.subHeader) ? (jsxRuntime.jsx(reactComponents.Text, { size: "small", subtle: true, children: (_d = (_c = header.column.columnDef) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.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));
|
|
3955
3955
|
}) }, headerGroup.id))) }), hasResults ? (jsxRuntime.jsxs(reactTableBaseComponents.Tbody, { className: "text-sm font-normal", children: [paddingTop > 0 && (jsxRuntime.jsx(reactTableBaseComponents.Tr, { layout: "flex", children: jsxRuntime.jsx(reactTableBaseComponents.Td, { style: { height: `${paddingTop}px` } }) })), virtualRows.map(virtualRow => {
|
|
3956
3956
|
const row = props.getRowModel().rows[virtualRow.index];
|
|
3957
3957
|
if (!row) {
|
|
@@ -3967,10 +3967,10 @@ const Table = (props) => {
|
|
|
3967
3967
|
}, children: jsxRuntime.jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
|
|
3968
3968
|
}) }, row.id));
|
|
3969
3969
|
}
|
|
3970
|
-
}), paddingBottom > 0 && (jsxRuntime.jsx(reactTableBaseComponents.Tr, { layout: "flex", children: jsxRuntime.jsx(reactTableBaseComponents.Td, { style: { height: `${paddingBottom}px` } }) }))] })) : (jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { image: "ROAD_BLOCK", description: t("table.noResults"), className: "absolute inset-0", loading: props === null || props === void 0 ? void 0 : props.loading })) }) }) }))] }) }), jsxRuntime.jsxs("div", { className: "
|
|
3970
|
+
}), paddingBottom > 0 && (jsxRuntime.jsx(reactTableBaseComponents.Tr, { layout: "flex", children: jsxRuntime.jsx(reactTableBaseComponents.Td, { style: { height: `${paddingBottom}px` } }) }))] })) : (jsxRuntime.jsx("tbody", { children: jsxRuntime.jsx("tr", { children: jsxRuntime.jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsxRuntime.jsx(reactComponents.EmptyState, { image: "ROAD_BLOCK", description: t("table.noResults"), className: "absolute inset-0", loading: props === null || props === void 0 ? void 0 : props.loading })) }) }) }))] }) }), 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", {
|
|
3971
3971
|
count: props.getRowModel().rows.length,
|
|
3972
3972
|
total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
|
|
3973
|
-
}) }), props.footerRightActions && jsxRuntime.jsx("div", { className: "flex-1 justify-end
|
|
3973
|
+
}) }), props.footerRightActions && jsxRuntime.jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] })] }));
|
|
3974
3974
|
};
|
|
3975
3975
|
|
|
3976
3976
|
function getDefaultExportFromCjs (x) {
|
|
@@ -8969,7 +8969,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
8969
8969
|
}
|
|
8970
8970
|
return (jsxRuntime.jsx(DndProvider, { backend: HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom-start", 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: numberOfHiddenColumns > 0
|
|
8971
8971
|
? t("table.columnFilters.hiddenColumnCount", { count: numberOfHiddenColumns })
|
|
8972
|
-
: t("table.columnFilters.columns") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto
|
|
8972
|
+
: t("table.columnFilters.columns") }) }) }), 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 })] })) })] }) }) }));
|
|
8973
8973
|
};
|
|
8974
8974
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
|
|
8975
8975
|
const [localColumns, setLocalColumns] = React__namespace.useState(columns);
|
|
@@ -8995,7 +8995,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
|
|
|
8995
8995
|
columnReordered: (_a = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _a !== void 0 ? _a : "",
|
|
8996
8996
|
});
|
|
8997
8997
|
}, [localColumns, onUserEvent]);
|
|
8998
|
-
return (jsxRuntime.jsx("div", { className: "flex
|
|
8998
|
+
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) => {
|
|
8999
8999
|
var _a, _b;
|
|
9000
9000
|
const { columnDef } = column;
|
|
9001
9001
|
if (!columnDef.header || ((_a = columnDef.header) === null || _a === void 0 ? void 0 : _a.length) === 0) {
|
|
@@ -9059,7 +9059,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
|
|
|
9059
9059
|
});
|
|
9060
9060
|
const opacity = isDragging ? 0 : 1;
|
|
9061
9061
|
drag(drop(ref));
|
|
9062
|
-
return (jsxRuntime.jsxs("div", { className: "
|
|
9062
|
+
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, { id: id, toggled: toggled, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", disabled: disabled })] }));
|
|
9063
9063
|
};
|
|
9064
9064
|
|
|
9065
9065
|
/**
|
|
@@ -9079,7 +9079,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
9079
9079
|
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.spacing.toolip"), placement: "bottom-start", 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" })] }) }) })] }) }));
|
|
9080
9080
|
};
|
|
9081
9081
|
const DensitySelection = ({ text, onClick, icon, isSelected }) => {
|
|
9082
|
-
return (jsxRuntime.jsxs("div", { className: "flex items-center p-1
|
|
9082
|
+
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" }) }))] }));
|
|
9083
9083
|
};
|
|
9084
9084
|
const SpaciousIcon = () => {
|
|
9085
9085
|
return (jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 12, height: 12, children: jsxRuntime.jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5" }) }));
|
package/index.esm.js
CHANGED
|
@@ -152,7 +152,7 @@ const ActionSheet = ({ actions, moreActions = [], selections, resetSelection, cl
|
|
|
152
152
|
const actionsFilteredForScreenSize = smallScreen ? [filteredActions[0]] : filteredActions;
|
|
153
153
|
const moreActionsFilteredForScreenSize = smallScreen ? moreActions === null || moreActions === void 0 ? void 0 : moreActions.concat(filteredActions.slice(1)) : moreActions;
|
|
154
154
|
const actionDataToActionButton = (action, moreAction = false) => (jsxs(ActionButton, { action: action, disabled: (selections === null || selections === void 0 ? void 0 : selections.length) === 0, dataTestId: action.label, className: "lg:mr-3", children: [jsx(Text, { dataTestId: `${containerProps["data-testid"]}-action-label`, className: `${moreAction ? "text-inherit" : "!text-white"} !text-base`, children: action.label }), jsx(Icon, { name: action.icon, color: moreAction ? "neutral" : "white", size: action.size, "data-testid": "action-icon", forwardedRef: action.forwardedRef, style: action.style })] }, action.label));
|
|
155
|
-
return (jsxs("div", { className: cvaActionSheet({ className: containerProps.className }), "data-testid": containerProps["data-testid"], children: [jsx(IconButton, { icon: jsx(Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, color: "secondary", variant: "transparent", circular: true, dataTestId: "XButton" }), jsxs(Text, { size: "large", className: "!
|
|
155
|
+
return (jsxs("div", { className: cvaActionSheet({ className: containerProps.className }), "data-testid": containerProps["data-testid"], children: [jsx(IconButton, { icon: jsx(Icon, { name: "XMark", size: "small", color: "white", "data-testid": "close-icon" }), onClick: resetSelection, color: "secondary", variant: "transparent", circular: true, dataTestId: "XButton" }), jsxs(Text, { size: "large", className: "!lg:mr-28 !mr-4 w-max !text-white", children: [selections === null || selections === void 0 ? void 0 : selections.length, " ", t("table.actionsheet.selected")] }), actionsFilteredForScreenSize.map(action => action && actionDataToActionButton(action)), moreActionsFilteredForScreenSize && moreActionsFilteredForScreenSize.length > 0 && (jsx(MoreMenu, { popoverProps: { placement: "top" }, iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white" }, dataTestId: `${containerProps["data-testid"]}-more-menu`, children: jsx("div", { className: "animate-fade-in-fast absolute bottom-12 right-0", children: jsx(MenuList, { children: moreActionsFilteredForScreenSize.map(action => actionDataToActionButton(action, true)) }) }) }))] }));
|
|
156
156
|
};
|
|
157
157
|
|
|
158
158
|
/**
|
|
@@ -3916,7 +3916,7 @@ const Table = (props) => {
|
|
|
3916
3916
|
rowSize: props.getRowModel().rows.length || 0,
|
|
3917
3917
|
});
|
|
3918
3918
|
const hasResults = props.getRowModel().rows.length > 0;
|
|
3919
|
-
return (jsxs(Card, { className: `
|
|
3919
|
+
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", children: props.headerLeftActions }), jsx("div", { className: "flex", children: props.headerRightActions })] })), jsx("div", { className: "min-h[500px] 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: {
|
|
3920
3920
|
width: props.getCenterTotalSize(),
|
|
3921
3921
|
}, children: [jsx(Thead, { className: "z-default", children: props.getHeaderGroups().map(headerGroup => (jsx(Tr, { className: "flex", children: headerGroup.headers.map(header => {
|
|
3922
3922
|
var _a, _b, _c, _d;
|
|
@@ -3925,7 +3925,7 @@ const Table = (props) => {
|
|
|
3925
3925
|
minWidth: header.column.columnDef.minSize,
|
|
3926
3926
|
maxWidth: header.column.columnDef.maxSize,
|
|
3927
3927
|
}, className: "relative", 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`,
|
|
3928
|
-
onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "
|
|
3928
|
+
onClick: header.column.getToggleSortingHandler(), children: [jsxs("span", { className: "overflow-hidden text-ellipsis whitespace-nowrap", children: [flexRender(header.column.columnDef.header, header.getContext()), ((_b = (_a = header.column.columnDef) === null || _a === void 0 ? void 0 : _a.meta) === null || _b === void 0 ? void 0 : _b.subHeader) ? (jsx(Text, { size: "small", subtle: true, children: (_d = (_c = header.column.columnDef) === null || _c === void 0 ? void 0 : _c.meta) === null || _d === void 0 ? void 0 : _d.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));
|
|
3929
3929
|
}) }, headerGroup.id))) }), hasResults ? (jsxs(Tbody, { className: "text-sm font-normal", children: [paddingTop > 0 && (jsx(Tr, { layout: "flex", children: jsx(Td, { style: { height: `${paddingTop}px` } }) })), virtualRows.map(virtualRow => {
|
|
3930
3930
|
const row = props.getRowModel().rows[virtualRow.index];
|
|
3931
3931
|
if (!row) {
|
|
@@ -3941,10 +3941,10 @@ const Table = (props) => {
|
|
|
3941
3941
|
}, children: jsx("div", { className: "grid h-full items-center", children: flexRender(cell.column.columnDef.cell, cell.getContext()) }) }));
|
|
3942
3942
|
}) }, row.id));
|
|
3943
3943
|
}
|
|
3944
|
-
}), paddingBottom > 0 && (jsx(Tr, { layout: "flex", children: jsx(Td, { style: { height: `${paddingBottom}px` } }) }))] })) : (jsx("tbody", { children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "ROAD_BLOCK", description: t("table.noResults"), className: "absolute inset-0", loading: props === null || props === void 0 ? void 0 : props.loading })) }) }) }))] }) }), jsxs("div", { className: "
|
|
3944
|
+
}), paddingBottom > 0 && (jsx(Tr, { layout: "flex", children: jsx(Td, { style: { height: `${paddingBottom}px` } }) }))] })) : (jsx("tbody", { children: jsx("tr", { children: jsx("td", { className: "b-0", children: (props === null || props === void 0 ? void 0 : props.noDataMessage) ? (props.noDataMessage) : (jsx(EmptyState, { image: "ROAD_BLOCK", description: t("table.noResults"), className: "absolute inset-0", loading: props === null || props === void 0 ? void 0 : props.loading })) }) }) }))] }) }), 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", {
|
|
3945
3945
|
count: props.getRowModel().rows.length,
|
|
3946
3946
|
total: ((_b = (_a = props.pagination) === null || _a === void 0 ? void 0 : _a.pageInfo) === null || _b === void 0 ? void 0 : _b.count) || 0,
|
|
3947
|
-
}) }), props.footerRightActions && jsx("div", { className: "flex-1 justify-end
|
|
3947
|
+
}) }), props.footerRightActions && jsx("div", { className: "flex flex-1 justify-end", children: props.footerRightActions })] })] }));
|
|
3948
3948
|
};
|
|
3949
3949
|
|
|
3950
3950
|
function getDefaultExportFromCjs (x) {
|
|
@@ -8943,7 +8943,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
8943
8943
|
}
|
|
8944
8944
|
return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, { label: t("table.columnFilters.tooltip"), placement: "bottom-start", 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: numberOfHiddenColumns > 0
|
|
8945
8945
|
? t("table.columnFilters.hiddenColumnCount", { count: numberOfHiddenColumns })
|
|
8946
|
-
: t("table.columnFilters.columns") }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto
|
|
8946
|
+
: t("table.columnFilters.columns") }) }) }), 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 })] })) })] }) }) }));
|
|
8947
8947
|
};
|
|
8948
8948
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) => {
|
|
8949
8949
|
const [localColumns, setLocalColumns] = React.useState(columns);
|
|
@@ -8969,7 +8969,7 @@ const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, }) =>
|
|
|
8969
8969
|
columnReordered: (_a = dragColumn === null || dragColumn === void 0 ? void 0 : dragColumn.columnDef.header) !== null && _a !== void 0 ? _a : "",
|
|
8970
8970
|
});
|
|
8971
8971
|
}, [localColumns, onUserEvent]);
|
|
8972
|
-
return (jsx("div", { className: "flex
|
|
8972
|
+
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) => {
|
|
8973
8973
|
var _a, _b;
|
|
8974
8974
|
const { columnDef } = column;
|
|
8975
8975
|
if (!columnDef.header || ((_a = columnDef.header) === null || _a === void 0 ? void 0 : _a.length) === 0) {
|
|
@@ -9033,7 +9033,7 @@ const ColumnFilterItem = ({ name, onToggle, toggled, disabled, index, moveColumn
|
|
|
9033
9033
|
});
|
|
9034
9034
|
const opacity = isDragging ? 0 : 1;
|
|
9035
9035
|
drag(drop(ref));
|
|
9036
|
-
return (jsxs("div", { className: "
|
|
9036
|
+
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, { id: id, toggled: toggled, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", disabled: disabled })] }));
|
|
9037
9037
|
};
|
|
9038
9038
|
|
|
9039
9039
|
/**
|
|
@@ -9053,7 +9053,7 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
9053
9053
|
return (jsx(Tooltip, { label: t("table.spacing.toolip"), placement: "bottom-start", 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" })] }) }) })] }) }));
|
|
9054
9054
|
};
|
|
9055
9055
|
const DensitySelection = ({ text, onClick, icon, isSelected }) => {
|
|
9056
|
-
return (jsxs("div", { className: "flex items-center p-1
|
|
9056
|
+
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" }) }))] }));
|
|
9057
9057
|
};
|
|
9058
9058
|
const SpaciousIcon = () => {
|
|
9059
9059
|
return (jsx("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 24 24", width: 12, height: 12, children: jsx("path", { fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M2.25 18.003h19.5M2.25 12.003h19.5M2.25 6.003h19.5" }) }));
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-table",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.60",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -13,11 +13,11 @@
|
|
|
13
13
|
"@trackunit/css-core": "0.0.96",
|
|
14
14
|
"@trackunit/i18n-library-translation": "0.0.86",
|
|
15
15
|
"@trackunit/iris-app-api": "0.0.124",
|
|
16
|
-
"@trackunit/react-components": "0.1.
|
|
16
|
+
"@trackunit/react-components": "0.1.174",
|
|
17
17
|
"@trackunit/react-core-contexts-api": "0.2.63",
|
|
18
|
-
"@trackunit/react-core-contexts-test": "0.1.
|
|
19
|
-
"@trackunit/react-form-components": "0.0.
|
|
20
|
-
"@trackunit/react-table-base-components": "0.0.
|
|
18
|
+
"@trackunit/react-core-contexts-test": "0.1.120",
|
|
19
|
+
"@trackunit/react-form-components": "0.0.170",
|
|
20
|
+
"@trackunit/react-table-base-components": "0.0.45",
|
|
21
21
|
"@trackunit/shared-utils": "0.0.11",
|
|
22
22
|
"@trackunit/ui-icons": "0.0.78",
|
|
23
23
|
"immutability-helper": "3.1.1",
|