@trackunit/react-table 1.13.27 → 1.13.29
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 +6 -6
- package/index.esm.js +6 -6
- package/package.json +9 -9
- package/src/ActionSheet/ActionSheet.d.ts +1 -1
package/index.cjs.js
CHANGED
|
@@ -169,7 +169,7 @@ const ActionButton = ({ action, id, ...rest }) => {
|
|
|
169
169
|
return (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 }) }));
|
|
170
170
|
}
|
|
171
171
|
const content = (jsxRuntime.jsx(reactComponents.Button, { id: id, loading: action.loading, onClick: e => action.method(e), prefix: jsxRuntime.jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
|
|
172
|
-
return action.tip ? (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
172
|
+
return action.tip ? (jsxRuntime.jsx(reactComponents.Tooltip, { label: action.tip, children: content })) : (content);
|
|
173
173
|
};
|
|
174
174
|
/**
|
|
175
175
|
* Converts an action model to a MenuItem component.
|
|
@@ -356,9 +356,9 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, "da
|
|
|
356
356
|
* @param {ActionSheetProps} props - The props for the ActionSheet component
|
|
357
357
|
* @returns {ReactElement} ActionSheet component
|
|
358
358
|
*/
|
|
359
|
-
const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, "data-testid": dataTestId, }) => {
|
|
359
|
+
const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection: onClickResetSelection, className, "data-testid": dataTestId, }) => {
|
|
360
360
|
const [t] = useTranslation();
|
|
361
|
-
return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { className: "row-start-1", "data-testid": "XButton", onClick:
|
|
361
|
+
return (jsxRuntime.jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsxRuntime.jsx(reactComponents.Button, { className: "row-start-1", "data-testid": "XButton", onClick: onClickResetSelection, prefix: jsxRuntime.jsx(reactComponents.Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsxRuntime.jsx(reactComponents.Spacer, { border: true, className: cvaDivider() }), jsxRuntime.jsx(ActionContainerAndOverflow, { "data-testid": dataTestId,
|
|
362
362
|
actions,
|
|
363
363
|
dropdownActions,
|
|
364
364
|
moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
|
|
@@ -496,7 +496,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
|
|
|
496
496
|
const visibleColumnsCount = react.useMemo(() => {
|
|
497
497
|
return columns.filter(col => col.getIsVisible()).length;
|
|
498
498
|
}, [columns]);
|
|
499
|
-
return (jsxRuntime.jsx(reactDnd.DndProvider, { backend: reactDndHtml5Backend.HTML5Backend, children: jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
499
|
+
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.IconButton, { icon: jsxRuntime.jsx(reactComponents.Icon, { name: "Cog6Tooth", size: "small" }), size: "small", variant: "secondary" }) }), jsxRuntime.jsx(reactComponents.PopoverContent, { children: () => (jsxRuntime.jsxs(reactComponents.MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxRuntime.jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsxRuntime.jsx(reactFormComponents.Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: t("table.search.placeholder"), value: searchText }), jsxRuntime.jsx(reactComponents.Button, { "data-testid": "resetColumnState", onClick: resetColumnState, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsxRuntime.jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
|
|
500
500
|
};
|
|
501
501
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
|
|
502
502
|
const [localColumns, setLocalColumns] = react.useState(columns);
|
|
@@ -567,7 +567,7 @@ const Sorting = ({ columns, }) => {
|
|
|
567
567
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
568
568
|
chosenColumn?.toggleSorting(selectedValue === "desc");
|
|
569
569
|
};
|
|
570
|
-
return (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
570
|
+
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 ?? "", children: sortableColumns.map(column => (jsxRuntime.jsx(reactFormComponents.RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), 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" })] })] }) })] }) }));
|
|
571
571
|
};
|
|
572
572
|
|
|
573
573
|
/**
|
|
@@ -621,7 +621,7 @@ const TextWithTooltip = ({ children, tooltipLabel, weight, }) => {
|
|
|
621
621
|
window.removeEventListener("resize", debouncedCheckTruncation);
|
|
622
622
|
};
|
|
623
623
|
}, [debouncedCheckTruncation, checkIfTruncated, children]);
|
|
624
|
-
return tooltipLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, {
|
|
624
|
+
return tooltipLabel ? (jsxRuntime.jsx(reactComponents.Tooltip, { disabled: !isTextTruncated || hideTooltip, label: tooltipLabel, placement: "bottom", children: jsxRuntime.jsx(reactComponents.Text, { className: "truncate", ref: textRef, type: "span", weight: weight, children: children }) })) : (jsxRuntime.jsx("div", { onMouseDown: () => setHideTooltip(true), onMouseUp: () => setHideTooltip(false), children: jsxRuntime.jsx(reactComponents.Text, { className: "truncate", ref: textRef, type: "span", weight: weight, children: children }) }));
|
|
625
625
|
};
|
|
626
626
|
|
|
627
627
|
/**
|
package/index.esm.js
CHANGED
|
@@ -168,7 +168,7 @@ const ActionButton = ({ action, id, ...rest }) => {
|
|
|
168
168
|
return (jsx(Button, { asChild: true, id: id, loading: action.loading, prefix: jsx(ActionIcon, { action: action }), ...rest, children: jsx(Link, { to: action.url, children: action.label }) }));
|
|
169
169
|
}
|
|
170
170
|
const content = (jsx(Button, { id: id, loading: action.loading, onClick: e => action.method(e), prefix: jsx(ActionIcon, { action: action }), ...rest, children: action.label }));
|
|
171
|
-
return action.tip ? (jsx(Tooltip, {
|
|
171
|
+
return action.tip ? (jsx(Tooltip, { label: action.tip, children: content })) : (content);
|
|
172
172
|
};
|
|
173
173
|
/**
|
|
174
174
|
* Converts an action model to a MenuItem component.
|
|
@@ -355,9 +355,9 @@ const ActionContainerAndOverflow = ({ actions, dropdownActions, moreActions, "da
|
|
|
355
355
|
* @param {ActionSheetProps} props - The props for the ActionSheet component
|
|
356
356
|
* @returns {ReactElement} ActionSheet component
|
|
357
357
|
*/
|
|
358
|
-
const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection, className, "data-testid": dataTestId, }) => {
|
|
358
|
+
const ActionSheet = ({ actions, dropdownActions, moreActions = [], selections, resetSelection: onClickResetSelection, className, "data-testid": dataTestId, }) => {
|
|
359
359
|
const [t] = useTranslation();
|
|
360
|
-
return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsx(Button, { className: "row-start-1", "data-testid": "XButton", onClick:
|
|
360
|
+
return (jsxs("div", { className: cvaActionSheet({ className }), "data-testid": dataTestId, children: [jsx(Button, { className: "row-start-1", "data-testid": "XButton", onClick: onClickResetSelection, prefix: jsx(Icon, { color: "white", "data-testid": "close-icon", name: "XMark", size: "small" }), children: t("table.actionsheet.selected", { count: selections.length }) }), jsx(Spacer, { border: true, className: cvaDivider() }), jsx(ActionContainerAndOverflow, { "data-testid": dataTestId,
|
|
361
361
|
actions,
|
|
362
362
|
dropdownActions,
|
|
363
363
|
moreActions: moreActions.map(action => actionDataToMenuItem(action, dataTestId)) })] }));
|
|
@@ -495,7 +495,7 @@ const ColumnFilter = ({ columns, setColumnOrder, defaultColumnOrder = [], column
|
|
|
495
495
|
const visibleColumnsCount = useMemo(() => {
|
|
496
496
|
return columns.filter(col => col.getIsVisible()).length;
|
|
497
497
|
}, [columns]);
|
|
498
|
-
return (jsx(DndProvider, { backend: HTML5Backend, children: jsx(Tooltip, {
|
|
498
|
+
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(IconButton, { icon: jsx(Icon, { name: "Cog6Tooth", size: "small" }), size: "small", variant: "secondary" }) }), jsx(PopoverContent, { children: () => (jsxs(MenuList, { className: "relative max-h-[55vh] w-72 overflow-y-auto", children: [jsxs("div", { className: "mb-2 flex items-center gap-1", children: [jsx(Search, { autoFocus: true, className: "flex-1", fieldSize: "small", id: "column-search", onChange: e => setSearchText(e.currentTarget.value.toLowerCase()), onClear: () => setSearchText(""), placeholder: t("table.search.placeholder"), value: searchText }), jsx(Button, { "data-testid": "resetColumnState", onClick: resetColumnState, size: "small", variant: "ghost-neutral", children: t("layout.actions.reset") })] }), jsx(ColumnFiltersDragAndDrop, { columns: sortedColumns, isSortDisabled: !!searchText, onUserEvent: onUserEvent, setColumnOrder: setColumnOrder, visibleColumnsCount: visibleColumnsCount })] })) })] }) }) }));
|
|
499
499
|
};
|
|
500
500
|
const ColumnFiltersDragAndDrop = ({ columns, setColumnOrder, onUserEvent, isSortDisabled, visibleColumnsCount, }) => {
|
|
501
501
|
const [localColumns, setLocalColumns] = useState(columns);
|
|
@@ -566,7 +566,7 @@ const Sorting = ({ columns, }) => {
|
|
|
566
566
|
const chosenColumn = sortableColumns.find(column => column.id === currentSortValue);
|
|
567
567
|
chosenColumn?.toggleSorting(selectedValue === "desc");
|
|
568
568
|
};
|
|
569
|
-
return (jsx(Tooltip, {
|
|
569
|
+
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 ?? "", children: sortableColumns.map(column => (jsx(RadioItem, { className: "w-full", label: column.columnDef.header?.toString() ?? "", value: column.id }, column.id))) }), 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" })] })] }) })] }) }));
|
|
570
570
|
};
|
|
571
571
|
|
|
572
572
|
/**
|
|
@@ -620,7 +620,7 @@ const TextWithTooltip = ({ children, tooltipLabel, weight, }) => {
|
|
|
620
620
|
window.removeEventListener("resize", debouncedCheckTruncation);
|
|
621
621
|
};
|
|
622
622
|
}, [debouncedCheckTruncation, checkIfTruncated, children]);
|
|
623
|
-
return tooltipLabel ? (jsx(Tooltip, {
|
|
623
|
+
return tooltipLabel ? (jsx(Tooltip, { disabled: !isTextTruncated || hideTooltip, label: tooltipLabel, placement: "bottom", children: jsx(Text, { className: "truncate", ref: textRef, type: "span", weight: weight, children: children }) })) : (jsx("div", { onMouseDown: () => setHideTooltip(true), onMouseUp: () => setHideTooltip(false), children: jsx(Text, { className: "truncate", ref: textRef, type: "span", weight: weight, children: children }) }));
|
|
624
624
|
};
|
|
625
625
|
|
|
626
626
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@trackunit/react-table",
|
|
3
|
-
"version": "1.13.
|
|
3
|
+
"version": "1.13.29",
|
|
4
4
|
"repository": "https://github.com/Trackunit/manager",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE.txt",
|
|
6
6
|
"engines": {
|
|
@@ -14,14 +14,14 @@
|
|
|
14
14
|
"react-dnd-html5-backend": "16.0.1",
|
|
15
15
|
"@tanstack/react-router": "1.114.29",
|
|
16
16
|
"tailwind-merge": "^2.0.0",
|
|
17
|
-
"@trackunit/react-components": "1.17.
|
|
18
|
-
"@trackunit/shared-utils": "1.13.
|
|
19
|
-
"@trackunit/css-class-variance-utilities": "1.11.
|
|
20
|
-
"@trackunit/ui-icons": "1.11.
|
|
21
|
-
"@trackunit/react-table-base-components": "1.13.
|
|
22
|
-
"@trackunit/react-form-components": "1.14.
|
|
23
|
-
"@trackunit/i18n-library-translation": "1.12.
|
|
24
|
-
"@trackunit/iris-app-runtime-core-api": "1.12.
|
|
17
|
+
"@trackunit/react-components": "1.17.26",
|
|
18
|
+
"@trackunit/shared-utils": "1.13.44",
|
|
19
|
+
"@trackunit/css-class-variance-utilities": "1.11.44",
|
|
20
|
+
"@trackunit/ui-icons": "1.11.43",
|
|
21
|
+
"@trackunit/react-table-base-components": "1.13.29",
|
|
22
|
+
"@trackunit/react-form-components": "1.14.29",
|
|
23
|
+
"@trackunit/i18n-library-translation": "1.12.29",
|
|
24
|
+
"@trackunit/iris-app-runtime-core-api": "1.12.25",
|
|
25
25
|
"graphql": "^16.10.0"
|
|
26
26
|
},
|
|
27
27
|
"module": "./index.esm.js",
|
|
@@ -127,4 +127,4 @@ export interface ActionSheetProps extends CommonProps {
|
|
|
127
127
|
* @param {ActionSheetProps} props - The props for the ActionSheet component
|
|
128
128
|
* @returns {ReactElement} ActionSheet component
|
|
129
129
|
*/
|
|
130
|
-
export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection, className, "data-testid": dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;
|
|
130
|
+
export declare const ActionSheet: ({ actions, dropdownActions, moreActions, selections, resetSelection: onClickResetSelection, className, "data-testid": dataTestId, }: ActionSheetProps) => import("react/jsx-runtime").JSX.Element;
|