@trackunit/react-table 0.0.7 → 0.0.10-alpha-48d16c736e.0
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 +22 -14
- package/index.esm.js +22 -14
- package/package.json +12 -11
- package/src/ActionSheet/Actions.d.ts +2 -2
- package/src/useTable.d.ts +1 -1
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: "
|
|
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: "!text-white w-max !lg:mr-28 !mr-4", 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, { menuPlacement: "top", iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white" }, dataTestId: `${containerProps["data-testid"]}-more-menu`, children: jsxRuntime.jsx("div", { className: "absolute bottom-12 right-0 animate-fade-in-fast", children: jsxRuntime.jsx(reactComponents.MenuList, { children: moreActionsFilteredForScreenSize.map(action => actionDataToActionButton(action, true)) }) }) }))] }));
|
|
182
182
|
};
|
|
183
183
|
|
|
184
184
|
/**
|
|
@@ -8967,7 +8967,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
8967
8967
|
if (!columns) {
|
|
8968
8968
|
return null;
|
|
8969
8969
|
}
|
|
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: "
|
|
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
8972
|
: t("table.columnFilters.columns") }) }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto relative pr-4", children: [jsxRuntime.jsxs("div", { className: "flex items-center justify-between mb-2", 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
|
};
|
|
@@ -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: "items-center w-full grid grid-cols-[min-content,1fr,min-content] gap-2", ref: ref, style: { opacity: opacity }, children: [jsxRuntime.jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsxRuntime.jsx(reactComponents.Icon, { name: "
|
|
9062
|
+
return (jsxRuntime.jsxs("div", { className: "items-center w-full grid grid-cols-[min-content,1fr,min-content] 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 whitespace-nowrap text-ellipsis", 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
|
/**
|
|
@@ -9076,10 +9076,10 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
9076
9076
|
densityChosen: selectedDensity,
|
|
9077
9077
|
});
|
|
9078
9078
|
};
|
|
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: "
|
|
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 w-full cursor-pointer hover:bg-neutral-50", onClick: onClick, children: [jsxRuntime.jsx("div", { className: "flex mr-1", children: icon }), jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: text }), isSelected && (jsxRuntime.jsx("div", { className: "flex justify-endgrow", children: jsxRuntime.jsx(reactComponents.Icon, { name: "
|
|
9082
|
+
return (jsxRuntime.jsxs("div", { className: "flex items-center p-1 w-full cursor-pointer hover:bg-neutral-50", onClick: onClick, children: [jsxRuntime.jsx("div", { className: "flex mr-1", children: icon }), jsxRuntime.jsx(reactComponents.Text, { weight: "thick", children: text }), isSelected && (jsxRuntime.jsx("div", { className: "flex justify-endgrow", 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" }) }));
|
|
@@ -9115,7 +9115,7 @@ const Sorting = ({ columns }) => {
|
|
|
9115
9115
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
9116
9116
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
9117
9117
|
};
|
|
9118
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom-start", 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: "
|
|
9118
|
+
return (jsxRuntime.jsx(reactComponents.Tooltip, { label: t("table.sorting.toolip"), placement: "bottom-start", 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-full h-96 overflow-y-auto", children: [jsxRuntime.jsx(reactFormComponents.RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
|
|
9119
9119
|
var _a, _b, _c;
|
|
9120
9120
|
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));
|
|
9121
9121
|
}) }), 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" })] })] }) })] }) }));
|
|
@@ -9180,16 +9180,16 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
9180
9180
|
*/
|
|
9181
9181
|
const useTable = (_a) => {
|
|
9182
9182
|
var _b, _c, _d, _e;
|
|
9183
|
-
var { onTableStateChange, initialState } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState"]);
|
|
9184
|
-
const
|
|
9183
|
+
var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
|
|
9184
|
+
const hiddenByDefaultState = React.useMemo(() => {
|
|
9185
|
+
return Object.fromEntries(columns.map(column => { var _a, _b; return [column.id, (_b = !((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true]; }));
|
|
9186
|
+
}, [columns]);
|
|
9187
|
+
const [columnVisibility, setColumnVisibility] = React.useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || hiddenByDefaultState || {});
|
|
9185
9188
|
const [columnOrder, setColumnOrder] = React.useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || []);
|
|
9186
9189
|
const [sorting, setSorting] = React.useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
|
|
9187
9190
|
const [columnSizing, setColumnSizing] = React.useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
|
|
9188
|
-
const hiddenByDefaultState = React.useMemo(() => {
|
|
9189
|
-
return Object.fromEntries(reactTableProps.columns.map(column => { var _a, _b; return [column.id, (_b = (_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault) !== null && _b !== void 0 ? _b : true]; }));
|
|
9190
|
-
}, [reactTableProps.columns]);
|
|
9191
9191
|
React.useEffect(() => {
|
|
9192
|
-
if (initialState) {
|
|
9192
|
+
if (initialState && Object.keys(initialState || {}).length > 0) {
|
|
9193
9193
|
setColumnVisibility(Object.keys(initialState.columnVisibility || {}).length > 0
|
|
9194
9194
|
? initialState.columnVisibility
|
|
9195
9195
|
: hiddenByDefaultState || {});
|
|
@@ -9197,14 +9197,22 @@ const useTable = (_a) => {
|
|
|
9197
9197
|
setSorting(initialState.sorting || []);
|
|
9198
9198
|
setColumnSizing(initialState.columnSizing || {});
|
|
9199
9199
|
}
|
|
9200
|
-
}, [
|
|
9200
|
+
}, [
|
|
9201
|
+
hiddenByDefaultState,
|
|
9202
|
+
initialState,
|
|
9203
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility,
|
|
9204
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder,
|
|
9205
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.sorting,
|
|
9206
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
|
|
9207
|
+
]);
|
|
9201
9208
|
const state = React.useMemo(() => {
|
|
9202
9209
|
return Object.assign({ sorting,
|
|
9203
9210
|
columnVisibility,
|
|
9204
9211
|
columnOrder,
|
|
9205
9212
|
columnSizing }, reactTableProps.state);
|
|
9206
9213
|
}, [sorting, columnVisibility, columnOrder, columnSizing, reactTableProps.state]);
|
|
9207
|
-
const table = useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange", onColumnVisibilityChange: setColumnVisibility, onColumnSizingChange: setColumnSizing, onColumnOrderChange: setColumnOrder, onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel() }, reactTableProps), {
|
|
9214
|
+
const table = useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange", onColumnVisibilityChange: setColumnVisibility, onColumnSizingChange: setColumnSizing, onColumnOrderChange: setColumnOrder, onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel() }, reactTableProps), { columns,
|
|
9215
|
+
state }));
|
|
9208
9216
|
React.useEffect(() => {
|
|
9209
9217
|
if (onTableStateChange) {
|
|
9210
9218
|
onTableStateChange(state);
|
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: "
|
|
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: "!text-white w-max !lg:mr-28 !mr-4", 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, { menuPlacement: "top", iconButtonProps: { variant: "transparent", circular: true }, iconProps: { color: "white" }, dataTestId: `${containerProps["data-testid"]}-more-menu`, children: jsx("div", { className: "absolute bottom-12 right-0 animate-fade-in-fast", children: jsx(MenuList, { children: moreActionsFilteredForScreenSize.map(action => actionDataToActionButton(action, true)) }) }) }))] }));
|
|
156
156
|
};
|
|
157
157
|
|
|
158
158
|
/**
|
|
@@ -8941,7 +8941,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder, columnOrder
|
|
|
8941
8941
|
if (!columns) {
|
|
8942
8942
|
return null;
|
|
8943
8943
|
}
|
|
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: "
|
|
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
8946
|
: t("table.columnFilters.columns") }) }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "max-h-[55vh] w-72 overflow-y-auto relative pr-4", children: [jsxs("div", { className: "flex items-center justify-between mb-2", 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
|
};
|
|
@@ -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: "items-center w-full grid grid-cols-[min-content,1fr,min-content] gap-2", ref: ref, style: { opacity: opacity }, children: [jsx("div", { className: cvaColumnFilterGrabbable({ disabled: false }), children: jsx(Icon, { name: "
|
|
9036
|
+
return (jsxs("div", { className: "items-center w-full grid grid-cols-[min-content,1fr,min-content] 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 whitespace-nowrap text-ellipsis", 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
|
/**
|
|
@@ -9050,10 +9050,10 @@ const RowSpacing = ({ density, setRowDensity, onUserEvent }) => {
|
|
|
9050
9050
|
densityChosen: selectedDensity,
|
|
9051
9051
|
});
|
|
9052
9052
|
};
|
|
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: "
|
|
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 w-full cursor-pointer hover:bg-neutral-50", onClick: onClick, children: [jsx("div", { className: "flex mr-1", children: icon }), jsx(Text, { weight: "thick", children: text }), isSelected && (jsx("div", { className: "flex justify-endgrow", children: jsx(Icon, { name: "
|
|
9056
|
+
return (jsxs("div", { className: "flex items-center p-1 w-full cursor-pointer hover:bg-neutral-50", onClick: onClick, children: [jsx("div", { className: "flex mr-1", children: icon }), jsx(Text, { weight: "thick", children: text }), isSelected && (jsx("div", { className: "flex justify-endgrow", 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" }) }));
|
|
@@ -9089,7 +9089,7 @@ const Sorting = ({ columns }) => {
|
|
|
9089
9089
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
9090
9090
|
chosenColumn === null || chosenColumn === void 0 ? void 0 : chosenColumn.toggleSorting(selectedValue === "desc");
|
|
9091
9091
|
};
|
|
9092
|
-
return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom-start", children: jsxs(Popover, { placement: "bottom-start", children: [jsx(PopoverTrigger, { children: jsx(Button, { prefix: currentSortDirection === "asc" ? (jsx(Icon, { name: "
|
|
9092
|
+
return (jsx(Tooltip, { label: t("table.sorting.toolip"), placement: "bottom-start", 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-full h-96 overflow-y-auto", children: [jsx(RadioGroup, { id: "sortProperty", onChange: handleSelectionChange, value: currentSortValue !== null && currentSortValue !== void 0 ? currentSortValue : "", children: sortableColumns.map(column => {
|
|
9093
9093
|
var _a, _b, _c;
|
|
9094
9094
|
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));
|
|
9095
9095
|
}) }), 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" })] })] }) })] }) }));
|
|
@@ -9154,16 +9154,16 @@ const useRelayPagination = (props = { pageSize: 50 }) => {
|
|
|
9154
9154
|
*/
|
|
9155
9155
|
const useTable = (_a) => {
|
|
9156
9156
|
var _b, _c, _d, _e;
|
|
9157
|
-
var { onTableStateChange, initialState } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState"]);
|
|
9158
|
-
const
|
|
9157
|
+
var { onTableStateChange, initialState, columns } = _a, reactTableProps = __rest(_a, ["onTableStateChange", "initialState", "columns"]);
|
|
9158
|
+
const hiddenByDefaultState = useMemo(() => {
|
|
9159
|
+
return Object.fromEntries(columns.map(column => { var _a, _b; return [column.id, (_b = !((_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault)) !== null && _b !== void 0 ? _b : true]; }));
|
|
9160
|
+
}, [columns]);
|
|
9161
|
+
const [columnVisibility, setColumnVisibility] = useState(((_b = reactTableProps.state) === null || _b === void 0 ? void 0 : _b.columnVisibility) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility) || hiddenByDefaultState || {});
|
|
9159
9162
|
const [columnOrder, setColumnOrder] = useState(((_c = reactTableProps.state) === null || _c === void 0 ? void 0 : _c.columnOrder) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder) || []);
|
|
9160
9163
|
const [sorting, setSorting] = useState(((_d = reactTableProps.state) === null || _d === void 0 ? void 0 : _d.sorting) || (initialState === null || initialState === void 0 ? void 0 : initialState.sorting) || []);
|
|
9161
9164
|
const [columnSizing, setColumnSizing] = useState(((_e = reactTableProps.state) === null || _e === void 0 ? void 0 : _e.columnSizing) || (initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing) || {});
|
|
9162
|
-
const hiddenByDefaultState = useMemo(() => {
|
|
9163
|
-
return Object.fromEntries(reactTableProps.columns.map(column => { var _a, _b; return [column.id, (_b = (_a = column.meta) === null || _a === void 0 ? void 0 : _a.hiddenByDefault) !== null && _b !== void 0 ? _b : true]; }));
|
|
9164
|
-
}, [reactTableProps.columns]);
|
|
9165
9165
|
useEffect(() => {
|
|
9166
|
-
if (initialState) {
|
|
9166
|
+
if (initialState && Object.keys(initialState || {}).length > 0) {
|
|
9167
9167
|
setColumnVisibility(Object.keys(initialState.columnVisibility || {}).length > 0
|
|
9168
9168
|
? initialState.columnVisibility
|
|
9169
9169
|
: hiddenByDefaultState || {});
|
|
@@ -9171,14 +9171,22 @@ const useTable = (_a) => {
|
|
|
9171
9171
|
setSorting(initialState.sorting || []);
|
|
9172
9172
|
setColumnSizing(initialState.columnSizing || {});
|
|
9173
9173
|
}
|
|
9174
|
-
}, [
|
|
9174
|
+
}, [
|
|
9175
|
+
hiddenByDefaultState,
|
|
9176
|
+
initialState,
|
|
9177
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.columnVisibility,
|
|
9178
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.columnOrder,
|
|
9179
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.sorting,
|
|
9180
|
+
initialState === null || initialState === void 0 ? void 0 : initialState.columnSizing,
|
|
9181
|
+
]);
|
|
9175
9182
|
const state = useMemo(() => {
|
|
9176
9183
|
return Object.assign({ sorting,
|
|
9177
9184
|
columnVisibility,
|
|
9178
9185
|
columnOrder,
|
|
9179
9186
|
columnSizing }, reactTableProps.state);
|
|
9180
9187
|
}, [sorting, columnVisibility, columnOrder, columnSizing, reactTableProps.state]);
|
|
9181
|
-
const table = useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange", onColumnVisibilityChange: setColumnVisibility, onColumnSizingChange: setColumnSizing, onColumnOrderChange: setColumnOrder, onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel() }, reactTableProps), {
|
|
9188
|
+
const table = useReactTable(Object.assign(Object.assign({ manualSorting: true, columnResizeMode: "onChange", onColumnVisibilityChange: setColumnVisibility, onColumnSizingChange: setColumnSizing, onColumnOrderChange: setColumnOrder, onSortingChange: setSorting, getSortedRowModel: getSortedRowModel(), getCoreRowModel: getCoreRowModel() }, reactTableProps), { columns,
|
|
9189
|
+
state }));
|
|
9182
9190
|
useEffect(() => {
|
|
9183
9191
|
if (onTableStateChange) {
|
|
9184
9192
|
onTableStateChange(state);
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-table",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.10-alpha-48d16c736e.0",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -9,16 +9,17 @@
|
|
|
9
9
|
"dependencies": {
|
|
10
10
|
"@tanstack/react-table": "8.9.3",
|
|
11
11
|
"@tanstack/react-virtual": "3.0.0-alpha.0",
|
|
12
|
-
"@trackunit/css-class-variance-utilities": "0.0.
|
|
13
|
-
"@trackunit/css-core": "0.0.
|
|
14
|
-
"@trackunit/i18n-library-translation": "0.0.
|
|
15
|
-
"@trackunit/
|
|
16
|
-
"@trackunit/react-
|
|
17
|
-
"@trackunit/react-core-contexts-
|
|
18
|
-
"@trackunit/react-
|
|
19
|
-
"@trackunit/react-
|
|
20
|
-
"@trackunit/
|
|
21
|
-
"@trackunit/
|
|
12
|
+
"@trackunit/css-class-variance-utilities": "0.0.13-alpha-48d16c736e.0",
|
|
13
|
+
"@trackunit/css-core": "0.0.94-alpha-48d16c736e.0",
|
|
14
|
+
"@trackunit/i18n-library-translation": "0.0.74-alpha-48d16c736e.0",
|
|
15
|
+
"@trackunit/iris-app-api": "0.0.112-alpha-48d16c736e.0",
|
|
16
|
+
"@trackunit/react-components": "0.1.153-alpha-48d16c736e.0",
|
|
17
|
+
"@trackunit/react-core-contexts-api": "0.2.54-alpha-48d16c736e.0",
|
|
18
|
+
"@trackunit/react-core-contexts-test": "0.1.102-alpha-48d16c736e.0",
|
|
19
|
+
"@trackunit/react-form-components": "0.0.133-alpha-48d16c736e.0",
|
|
20
|
+
"@trackunit/react-table-base-components": "0.0.4-alpha-48d16c736e.0",
|
|
21
|
+
"@trackunit/shared-utils": "0.0.6-alpha-48d16c736e.0",
|
|
22
|
+
"@trackunit/ui-icons": "0.0.74-alpha-48d16c736e.0",
|
|
22
23
|
"immutability-helper": "3.1.1",
|
|
23
24
|
"react": "18.2.0",
|
|
24
25
|
"react-dnd": "14.0.5",
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { IconProps, Size } from "@trackunit/react-components";
|
|
3
|
-
import {
|
|
3
|
+
import { IconName } from "@trackunit/ui-icons";
|
|
4
4
|
type IconExposedProp = Omit<IconProps, "color" | "onclick" | "type" | "name">;
|
|
5
5
|
export type ActionModel = (MethodAction | RouteAction) & CommonAction;
|
|
6
6
|
export type MethodAction = {
|
|
@@ -13,7 +13,7 @@ export type RouteAction = {
|
|
|
13
13
|
};
|
|
14
14
|
export interface CommonAction extends IconExposedProp {
|
|
15
15
|
label: string;
|
|
16
|
-
icon:
|
|
16
|
+
icon: IconName;
|
|
17
17
|
size?: Size;
|
|
18
18
|
forwardedRef?: React.RefObject<HTMLSpanElement>;
|
|
19
19
|
style?: Record<string, string>;
|
package/src/useTable.d.ts
CHANGED
|
@@ -9,7 +9,7 @@ export interface TableOptionsProps<TData extends object> extends Omit<TableOptio
|
|
|
9
9
|
* @param {TableOptionsProps<TData>} props - The props object containing configuration options.
|
|
10
10
|
* @returns {TableOptionsProps<TData>} An object containing the React Table instance and associated state management functions.
|
|
11
11
|
*/
|
|
12
|
-
export declare const useTable: <TData extends object>({ onTableStateChange, initialState, ...reactTableProps }: TableOptionsProps<TData>) => {
|
|
12
|
+
export declare const useTable: <TData extends object>({ onTableStateChange, initialState, columns, ...reactTableProps }: TableOptionsProps<TData>) => {
|
|
13
13
|
table: import("@tanstack/react-table").Table<TData>;
|
|
14
14
|
};
|
|
15
15
|
export default useTable;
|