@ceed/cds 1.27.0 → 1.27.2

package/dist/index.cjs

@@ -2322,7 +2322,7 @@ var StyledTd = (0, import_joy25.styled)("td")(({ theme }) => ({
 var MotionSortIcon = (0, import_framer_motion17.motion)(import_ArrowUpwardRounded.default);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.LinearProgress, { value: 8, variant: "plain" });
 var DefaultNoRowsOverlay = () => /* @__PURE__ */ import_react19.default.createElement(import_joy25.Typography, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
-var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react19.default.createElement(
+var Resizer = (ref, targetRef = ref, onResizeStateChange) => /* @__PURE__ */ import_react19.default.createElement(
   Box_default,
   {
     sx: {
@@ -2337,6 +2337,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react19.default.c
     onMouseDown: (e) => {
       const initialX = e.clientX;
       const initialWidth = ref.current?.getBoundingClientRect().width;
+      onResizeStateChange?.(true);
       const onMouseMove = (e2) => {
         if (initialWidth && initialX) {
           ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
@@ -2346,6 +2347,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ import_react19.default.c
       const onMouseUp = () => {
         document.removeEventListener("mousemove", onMouseMove);
         document.removeEventListener("mouseup", onMouseUp);
+        requestAnimationFrame(() => onResizeStateChange?.(false));
       };
       document.addEventListener("mousemove", onMouseMove);
       document.addEventListener("mouseup", onMouseUp);
@@ -2933,7 +2935,7 @@ var TextEllipsis = ({ children, lineClamp }) => {
     ro.observe(element);
     return () => ro.disconnect();
   }, [children, lineClamp]);
-  return /* @__PURE__ */ import_react24.default.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react24.default.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
+  return /* @__PURE__ */ import_react24.default.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ import_react24.default.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = (0, import_react24.useRef)(null);
@@ -2990,13 +2992,23 @@ var HeadCell = (props) => {
   const theme = (0, import_joy32.useTheme)();
   const ref = headerRef;
   const colRef = tableColRef;
+  const localRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useLayoutEffect)(() => {
+    ref.current = localRef.current;
+  }, [ref]);
   const [isHovered, setIsHovered] = (0, import_react24.useState)(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = (0, import_react24.useMemo)(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
   );
-  const resizer = (0, import_react24.useMemo)(() => resizable ?? true ? Resizer(ref, colRef) : null, [resizable, ref, colRef]);
+  const isResizingRef = (0, import_react24.useRef)(false);
+  const resizer = (0, import_react24.useMemo)(
+    () => resizable ?? true ? Resizer(ref, colRef, (isResizing) => {
+      isResizingRef.current = isResizing;
+    }) : null,
+    [resizable, ref, colRef]
+  );
   const style = (0, import_react24.useMemo)(
     () => ({
       width,
@@ -3066,11 +3078,15 @@ var HeadCell = (props) => {
       id: headId,
       "aria-label": headerName ?? field,
       "aria-sort": sort ? { asc: "ascending", desc: "descending" }[sort] : "none",
-      ref,
+      ref: localRef,
       key: field,
       style,
       onClick: (0, import_react24.useCallback)(
-        (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
+        (e) => {
+          if (isResizingRef.current) return;
+          if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
+          sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey });
+        },
         [field, onSortChange, sort, sortable]
       ),
       onMouseEnter: () => setIsHovered(true),

package/dist/index.js

@@ -2196,7 +2196,7 @@ var StyledTd = styled8("td")(({ theme }) => ({
 var MotionSortIcon = motion17(SortIcon);
 var DefaultLoadingOverlay = () => /* @__PURE__ */ React17.createElement(LinearProgress, { value: 8, variant: "plain" });
 var DefaultNoRowsOverlay = () => /* @__PURE__ */ React17.createElement(Typography3, { level: "body-sm", textColor: "text.tertiary" }, "No rows");
-var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
+var Resizer = (ref, targetRef = ref, onResizeStateChange) => /* @__PURE__ */ React17.createElement(
   Box_default,
   {
     sx: {
@@ -2211,6 +2211,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
     onMouseDown: (e) => {
       const initialX = e.clientX;
       const initialWidth = ref.current?.getBoundingClientRect().width;
+      onResizeStateChange?.(true);
       const onMouseMove = (e2) => {
         if (initialWidth && initialX) {
           ref.current.style.width = `${initialWidth + (e2.clientX - initialX)}px`;
@@ -2220,6 +2221,7 @@ var Resizer = (ref, targetRef = ref) => /* @__PURE__ */ React17.createElement(
       const onMouseUp = () => {
         document.removeEventListener("mousemove", onMouseMove);
         document.removeEventListener("mouseup", onMouseUp);
+        requestAnimationFrame(() => onResizeStateChange?.(false));
       };
       document.addEventListener("mousemove", onMouseMove);
       document.addEventListener("mouseup", onMouseUp);
@@ -2816,7 +2818,7 @@ var TextEllipsis = ({ children, lineClamp }) => {
     ro.observe(element);
     return () => ro.disconnect();
   }, [children, lineClamp]);
-  return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
+  return /* @__PURE__ */ React22.createElement(Tooltip_default, { title: showTooltip ? children : "", placement: "top" }, /* @__PURE__ */ React22.createElement(EllipsisDiv, { ref: textRef, lineClamp }, children));
 };
 var CellTextEllipsis = ({ children }) => {
   const textRef = useRef5(null);
@@ -2873,13 +2875,23 @@ var HeadCell = (props) => {
   const theme = useTheme();
   const ref = headerRef;
   const colRef = tableColRef;
+  const localRef = useRef5(null);
+  useLayoutEffect(() => {
+    ref.current = localRef.current;
+  }, [ref]);
   const [isHovered, setIsHovered] = useState8(false);
   const sortable = type === "actions" ? false : _sortable;
   const headId = useMemo8(
     () => `${tableId}_header_${headerName ?? field}`.trim(),
     [tableId, headerName, field]
   );
-  const resizer = useMemo8(() => resizable ?? true ? Resizer(ref, colRef) : null, [resizable, ref, colRef]);
+  const isResizingRef = useRef5(false);
+  const resizer = useMemo8(
+    () => resizable ?? true ? Resizer(ref, colRef, (isResizing) => {
+      isResizingRef.current = isResizing;
+    }) : null,
+    [resizable, ref, colRef]
+  );
   const style = useMemo8(
     () => ({
       width,
@@ -2949,11 +2961,15 @@ var HeadCell = (props) => {
       id: headId,
       "aria-label": headerName ?? field,
       "aria-sort": sort ? { asc: "ascending", desc: "descending" }[sort] : "none",
-      ref,
+      ref: localRef,
       key: field,
       style,
       onClick: useCallback9(
-        (e) => sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey }),
+        (e) => {
+          if (isResizingRef.current) return;
+          if (!(e.target instanceof Element) || !e.currentTarget.contains(e.target)) return;
+          sortable && onSortChange?.({ field, currentSort: sort, multiple: e.shiftKey });
+        },
         [field, onSortChange, sort, sortable]
       ),
       onMouseEnter: () => setIsHovered(true),