@trackunit/react-table 0.0.18 → 0.0.19

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 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: "XMarkIcon", 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)) }) }) }))] }));
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: "ViewColumnsIcon", size: "small" }), color: "secondary", variant: "transparent", size: "small", children: jsxRuntime.jsx("span", { className: "hidden sm:block", children: numberOfHiddenColumns > 0
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: "Bars3Icon", 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: "LockClosedIcon", size: "small" }) : null] }), jsxRuntime.jsx(reactFormComponents.Toggle, { id: id, toggled: toggled, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", disabled: disabled })] }));
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: "ArrowsPointingOutIcon", 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" })] }) }) })] }) }));
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: "CheckIcon", size: "small" }) }))] }));
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: "BarsArrowUpIcon", size: "small" })) : (jsxRuntime.jsx(reactComponents.Icon, { name: "BarsArrowDownIcon", 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 => {
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-[55vh] 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" })] })] }) })] }) }));
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: "XMarkIcon", 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)) }) }) }))] }));
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: "ViewColumnsIcon", size: "small" }), color: "secondary", variant: "transparent", size: "small", children: jsx("span", { className: "hidden sm:block", children: numberOfHiddenColumns > 0
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: "Bars3Icon", 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: "LockClosedIcon", size: "small" }) : null] }), jsx(Toggle, { id: id, toggled: toggled, onChange: (isToggled, event) => event && onToggle(isToggled, event), size: "small", disabled: disabled })] }));
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: "ArrowsPointingOutIcon", 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" })] }) }) })] }) }));
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: "CheckIcon", size: "small" }) }))] }));
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: "BarsArrowUpIcon", size: "small" })) : (jsx(Icon, { name: "BarsArrowDownIcon", 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 => {
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-[55vh] 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" })] })] }) })] }) }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@trackunit/react-table",
3
- "version": "0.0.18",
3
+ "version": "0.0.19",
4
4
  "repository": "https://github.com/Trackunit/manager",
5
5
  "license": "SEE LICENSE IN LICENSE.txt",
6
6
  "engines": {
@@ -13,13 +13,13 @@
13
13
  "@trackunit/css-core": "0.0.95",
14
14
  "@trackunit/i18n-library-translation": "0.0.77",
15
15
  "@trackunit/iris-app-api": "0.0.115",
16
- "@trackunit/react-components": "0.1.156",
16
+ "@trackunit/react-components": "0.1.157",
17
17
  "@trackunit/react-core-contexts-api": "0.2.57",
18
18
  "@trackunit/react-core-contexts-test": "0.1.106",
19
- "@trackunit/react-form-components": "0.0.139",
20
- "@trackunit/react-table-base-components": "0.0.10",
19
+ "@trackunit/react-form-components": "0.0.140",
20
+ "@trackunit/react-table-base-components": "0.0.11",
21
21
  "@trackunit/shared-utils": "0.0.7",
22
- "@trackunit/ui-icons": "0.0.75",
22
+ "@trackunit/ui-icons": "0.0.76",
23
23
  "immutability-helper": "3.1.1",
24
24
  "react": "18.2.0",
25
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 { HeroIconName } from "@trackunit/ui-icons";
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: HeroIconName;
16
+ icon: IconName;
17
17
  size?: Size;
18
18
  forwardedRef?: React.RefObject<HTMLSpanElement>;
19
19
  style?: Record<string, string>;