schummar-table 1.0.0-beta.7 → 1.0.0-beta.9

package/dist/index.cjs

@@ -1294,6 +1294,25 @@ function ExpandControl({ itemId, expanded, hasChildren, hasDeferredChildren }) {
 	});
 }
 //#endregion
+//#region src/components/catchClicks.tsx
+const wrapperCss = (0, _emotion_react.css)({ display: "contents" });
+/** Rows may be wrapped in links. Theme checkboxes only guarantee that clicks on the input itself
+* toggle; a click on their padding would reach the link instead. */
+function CatchClicks({ onToggle, children }) {
+	const libraryClass = require_useTheme.useLibraryClassName();
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
+		className: libraryClass(wrapperCss),
+		onClick: (event) => {
+			event.stopPropagation();
+			if (!(event.target instanceof HTMLInputElement)) {
+				event.preventDefault();
+				onToggle(event);
+			}
+		},
+		children
+	});
+}
+//#endregion
 //#region src/components/selectComponent.tsx
 const checkboxCss = (0, _emotion_react.css)({
 	justifySelf: "start",
@@ -1304,10 +1323,13 @@ const SelectComponent = (0, react.memo)(function SelectComponent({ itemId }) {
 	const Checkbox = require_useTheme.useTheme((t) => t.components.Checkbox);
 	const overrideClass = require_useTheme.useUserClassName();
 	const actions = useTableActions();
-	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Checkbox, {
-		className: overrideClass(checkboxCss),
-		checked: selected,
-		onChange: (event) => actions.toggleSelection(itemId, { range: event.nativeEvent.shiftKey })
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CatchClicks, {
+		onToggle: (event) => actions.toggleSelection(itemId, { range: event.shiftKey }),
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Checkbox, {
+			className: overrideClass(checkboxCss),
+			checked: selected,
+			onChange: (event) => actions.toggleSelection(itemId, { range: event.nativeEvent.shiftKey })
+		})
 	});
 });
 function SelectAll() {
@@ -1315,10 +1337,13 @@ function SelectAll() {
 	const overrideClass = require_useTheme.useUserClassName();
 	const { activeItems, selection, actions } = useTableContext();
 	const selected = activeItems.length > 0 && activeItems.every((item) => selection.has(item.id));
-	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Checkbox, {
-		className: overrideClass(checkboxCss),
-		checked: selected,
-		onChange: () => actions.toggleSelection(void 0)
+	return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(CatchClicks, {
+		onToggle: () => actions.toggleSelection(void 0),
+		children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Checkbox, {
+			className: overrideClass(checkboxCss),
+			checked: selected,
+			onChange: () => actions.toggleSelection(void 0)
+		})
 	});
 }
 //#endregion
@@ -1606,19 +1631,22 @@ function SortComponent({ children }) {
 			display: "grid",
 			gridTemplateColumns: "minmax(0, 1fr) max-content",
 			alignItems: "center",
-			cursor: "pointer",
-			"& > div": {
-				overflow: "hidden",
-				textOverflow: "ellipsis"
-			}
+			cursor: "pointer"
 		},
 		onClick: (event) => toggle(event),
 		onContextMenu: (event) => toggle(event, true),
-		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", { children }), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Badge, {
+		children: [/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("div", {
+			css: {
+				overflow: "hidden",
+				textOverflow: "ellipsis"
+			},
+			children
+		}), /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(Badge, {
 			badgeContent: sortDisabled ? 0 : index,
 			children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", {
 				css: [
 					{
+						display: "inline-flex",
 						transition: "all 300ms",
 						fontSize: "0.8em"
 					},