@clickhouse/click-ui 0.0.171 → 0.0.172

package/dist/click-ui.es.js

@@ -16914,9 +16914,46 @@ function throttle$1(func, wait, options) {
 }
 var throttle_1 = throttle$1;
 const throttle$2 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
+const initialPosition = {
+  left: "calc(100% - 4px)",
+  top: "0"
+};
+const useResizingState = () => {
+  const [pressedColumnIndex, setPressedColumnIndex] = useState(-1);
+  const [pointer, setPointer] = useState(null);
+  const [position, setPosition] = useState(initialPosition);
+  const [lastPressedTimestamp, setLastPressedTimestamp] = useState(0);
+  const getIsPressed = useCallback((columnIndex) => {
+    return pressedColumnIndex === columnIndex;
+  }, [pressedColumnIndex]);
+  const setIsPressed = useCallback((columnIndex, pressed) => {
+    if (pressed) {
+      setPressedColumnIndex(columnIndex);
+      setLastPressedTimestamp(Date.now());
+    } else {
+      setPressedColumnIndex(-1);
+    }
+  }, []);
+  const getPosition = useCallback((columnIndex) => {
+    if (pressedColumnIndex !== columnIndex) {
+      return initialPosition;
+    }
+    return position;
+  }, [position, pressedColumnIndex]);
+  return {
+    pointer,
+    setPointer,
+    getIsPressed,
+    setIsPressed,
+    getPosition,
+    setPosition,
+    lastPressedTimestamp
+  };
+};
+const DOUBLE_CLICK_THRESHOLD_MSEC = 300;
 const ResizeSpan = styled.div.withConfig({
   componentId: "sc-1r6e5v3-0"
-})(["top:0;left:calc(100% - 4px);z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], ({
+})(["top:", ";left:", ";z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], initialPosition.top, initialPosition.left, ({
   $height
 }) => $height, ({
   theme: theme2
@@ -16930,67 +16967,87 @@ const ColumnResizer = ({
   height,
   onColumnResize: onColumnResizeProp,
   columnIndex,
-  setResizeCursorPosition
+  getResizerPosition,
+  columnWidth,
+  resizingState
 }) => {
   const resizeRef = useRef(null);
-  const pointerRef = useRef(null);
-  const [isPressed, setIsPressed] = useState(false);
+  const {
+    pointer,
+    setPointer,
+    getIsPressed,
+    setIsPressed,
+    getPosition,
+    setPosition,
+    lastPressedTimestamp
+  } = resizingState;
+  const isPressed = getIsPressed(columnIndex);
+  const position = getPosition(columnIndex);
   const onColumnResize = throttle$2(onColumnResizeProp, 1e3);
-  const onMouseDown = useCallback((e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setIsPressed(true);
-    if (e.detail > 1) {
-      onColumnResize(columnIndex, 0, "auto");
+  useEffect(() => {
+    const control = resizeRef.current;
+    if (!isPressed || !control || !pointer) {
+      return;
     }
-  }, [columnIndex, onColumnResize, setIsPressed]);
-  const onMouseUp = useCallback((e) => {
-    e.stopPropagation();
-    setIsPressed(false);
-  }, [setIsPressed]);
+    const pointerId = pointer.pointerId;
+    try {
+      control.setPointerCapture(pointerId);
+      return () => {
+        if (control.hasPointerCapture(pointerId)) {
+          control.releasePointerCapture(pointerId);
+        }
+      };
+    } catch (e) {
+      console.error(e);
+    }
+  }, [pointer, isPressed, columnIndex]);
   const onPointerDown = useCallback((e) => {
     e.stopPropagation();
+    e.preventDefault();
     if (resizeRef.current) {
-      resizeRef.current.setPointerCapture(e.pointerId);
-      const header = resizeRef.current.closest(`[data-header="${columnIndex}"]`);
-      if (header) {
-        pointerRef.current = {
-          pointerId: e.pointerId,
-          initialClientX: e.clientX,
-          width: header.clientWidth
-        };
-        setResizeCursorPosition(resizeRef.current, e.clientX, header.clientWidth, columnIndex);
+      if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {
+        onColumnResize(columnIndex, 0, "auto");
       }
+      setPointer({
+        pointerId: e.pointerId,
+        initialClientX: e.clientX,
+        width: columnWidth
+      });
+      setIsPressed(columnIndex, true);
+      const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);
+      setPosition(pos);
     }
-  }, [columnIndex, setResizeCursorPosition]);
-  const onMouseMove = useCallback((e) => {
+  }, [lastPressedTimestamp, setPointer, columnWidth, setIsPressed, columnIndex, getResizerPosition, setPosition, onColumnResize]);
+  const onPointerMove = useCallback((e) => {
     e.stopPropagation();
-    if (resizeRef.current && pointerRef.current) {
-      const header = resizeRef.current.closest(`[data-header="${columnIndex}"]`);
-      if (header) {
-        resizeRef.current.setPointerCapture(pointerRef.current.pointerId);
-        const width = header.clientWidth + (e.clientX - pointerRef.current.initialClientX);
-        setResizeCursorPosition(resizeRef.current, e.clientX, width, columnIndex);
-        pointerRef.current.width = Math.max(width, 50);
-      }
+    e.preventDefault();
+    if (isPressed && pointer) {
+      const width = columnWidth + (e.clientX - pointer.initialClientX);
+      const pos = getResizerPosition(e.clientX, width, columnIndex);
+      setPosition(pos);
+      pointer.width = Math.max(width, 50);
     }
-  }, [columnIndex, setResizeCursorPosition]);
+  }, [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]);
   return /* @__PURE__ */ jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
-    var _a, _b;
     e.preventDefault();
     e.stopPropagation();
     if (resizeRef.current && // 0 is a valid pointerId in Firefox
-    (((_a = pointerRef.current) == null ? void 0 : _a.pointerId) || ((_b = pointerRef.current) == null ? void 0 : _b.pointerId) === 0)) {
-      resizeRef.current.releasePointerCapture(pointerRef.current.pointerId);
-      const shouldCallResize = e.clientX !== pointerRef.current.initialClientX;
+    ((pointer == null ? void 0 : pointer.pointerId) || (pointer == null ? void 0 : pointer.pointerId) === 0)) {
+      const shouldCallResize = e.clientX !== pointer.initialClientX;
       if (shouldCallResize) {
-        onColumnResize(columnIndex, pointerRef.current.width, "manual");
+        onColumnResize(columnIndex, pointer.width, "manual");
       }
-      resizeRef.current.style.top = "0";
-      resizeRef.current.style.left = "calc(100% - 4px)";
-      pointerRef.current = null;
+      setPosition(initialPosition);
+      setPointer(null);
+      setIsPressed(columnIndex, false);
     }
-  }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp, "data-resize": true });
+  }, onPointerMove, onPointerCancel: (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    setPosition(initialPosition);
+    setPointer(null);
+    setIsPressed(columnIndex, false);
+  }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: position });
 };
 const HeaderContainer = styled.div.withConfig({
   componentId: "sc-1oadqc8-0"
@@ -17030,15 +17087,16 @@ const RowColumn = styled(StyledCell).withConfig({
 const Column = ({
   columnIndex,
   cell,
-  columnWidth,
+  getColumnWidth: getColumnWidth2,
   getColumnHorizontalPosition,
   getSelectionType,
   isFirstColumn,
   isLastColumn,
   onColumnResize,
   height,
-  setResizeCursorPosition,
-  showBorder
+  getResizerPosition,
+  showBorder,
+  resizingState
 }) => {
   const selectionType = getSelectionType({
     column: columnIndex,
@@ -17051,9 +17109,10 @@ const Column = ({
   const columnPosition = getColumnHorizontalPosition(columnIndex);
   const isSelected = selectionType === "selectDirect";
   const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
-  return /* @__PURE__ */ jsxs(HeaderCellContainer, { $width: columnWidth(columnIndex), $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-    /* @__PURE__ */ jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $isFirstColumn: isFirstColumn, $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $isFirstRow: true, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth(columnIndex) }),
-    /* @__PURE__ */ jsx(ColumnResizer, { height, onColumnResize, columnIndex, setResizeCursorPosition })
+  const columnWidth = getColumnWidth2(columnIndex);
+  return /* @__PURE__ */ jsxs(HeaderCellContainer, { $width: columnWidth, $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
+    /* @__PURE__ */ jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $isFirstColumn: isFirstColumn, $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $isFirstRow: true, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth }),
+    /* @__PURE__ */ jsx(ColumnResizer, { height, onColumnResize, columnIndex, getResizerPosition, columnWidth, resizingState })
   ] });
 };
 const Header = ({
@@ -17064,14 +17123,15 @@ const Header = ({
   minColumn,
   maxColumn,
   height,
-  columnWidth,
+  getColumnWidth: getColumnWidth2,
   cell,
   columnCount,
   getSelectionType,
   onColumnResize,
   getColumnHorizontalPosition,
-  setResizeCursorPosition,
-  showBorder
+  getResizerPosition,
+  showBorder,
+  resizingState
 }) => {
   const selectedAllType = getSelectionType({
     type: "all"
@@ -17079,7 +17139,7 @@ const Header = ({
   return /* @__PURE__ */ jsxs(HeaderContainer, { $height: height, $scrolledVertical: scrolledVertical, children: [
     /* @__PURE__ */ jsx(ScrollableHeaderContainer, { $left: rowNumberWidth, children: Array.from({
       length: maxColumn - minColumn + 1
-    }, (_, index2) => minColumn + index2).map((columnIndex) => /* @__PURE__ */ jsx(Column, { getSelectionType, columnIndex, columnWidth, getColumnHorizontalPosition, cell, isFirstColumn: columnIndex === 0 && !showRowNumber, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, setResizeCursorPosition, showBorder }, `header-${columnIndex}`)) }),
+    }, (_, index2) => minColumn + index2).map((columnIndex) => /* @__PURE__ */ jsx(Column, { getSelectionType, columnIndex, getColumnWidth: getColumnWidth2, getColumnHorizontalPosition, cell, isFirstColumn: columnIndex === 0 && !showRowNumber, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
     showRowNumber && /* @__PURE__ */ jsx(RowColumnContainer, { $width: rowNumberWidth, $height: height, $columnPosition: 0, $scrolledHorizontal: scrolledHorizontal, children: /* @__PURE__ */ jsx(RowColumn, { "data-selected": selectedAllType === "selectDirect", $type: "header", $isFirstRow: true, $isFirstColumn: true, $selectionType: selectedAllType, $isLastRow: false, $isLastColumn: false, $height: height, $isFocused: false, $isSelectedLeft: false, $isSelectedTop: false, "data-grid-row": -1, "data-grid-column": -1, $showBorder: showBorder, children: "#" }) })
   ] });
 };
@@ -31758,6 +31818,7 @@ const Grid = forwardRef(({
       onSelectProp(action, selection2, focus2);
     }
   }, [onSelectProp]);
+  const resizingState = useResizingState();
   const onFocusChange = useCallback((row, column) => {
     setFocus((focus2) => ({
       row: row ?? (focusProp == null ? void 0 : focusProp.row) ?? focus2.row,
@@ -31831,11 +31892,14 @@ const Grid = forwardRef(({
     }
     return columnLeft + rowNumberWidth - 4;
   }, [getColumnHorizontalPosition, rowNumberWidth]);
-  const setResizeCursorPosition = useCallback((element, clientX, width, columnIndex) => {
-    element.style.left = `${getFixedResizerLeftPosition(clientX, width, columnIndex)}px`;
+  const getResizerPosition = useCallback((clientX, width, columnIndex) => {
+    const result = {
+      left: `${getFixedResizerLeftPosition(clientX, width, columnIndex)}px`
+    };
     if (outerRef.current) {
-      element.style.top = `${outerRef.current.scrollTop}px`;
+      result.top = `${outerRef.current.scrollTop}px`;
     }
+    return result;
   }, [getFixedResizerLeftPosition]);
   const clearSelectionAndFocus = useCallback((force) => {
     setSelection((selection2) => {
@@ -31890,7 +31954,7 @@ const Grid = forwardRef(({
     return /* @__PURE__ */ jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
       /* @__PURE__ */ jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
       showRowNumber && /* @__PURE__ */ jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder }),
-      showHeader && /* @__PURE__ */ jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, setResizeCursorPosition, showBorder })
+      showHeader && /* @__PURE__ */ jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
     ] });
   });
   useEffect(() => {

package/dist/click-ui.umd.js

@@ -16930,9 +16930,46 @@ var __publicField = (obj, key, value) => {
   }
   var throttle_1 = throttle$1;
   const throttle$2 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
+  const initialPosition = {
+    left: "calc(100% - 4px)",
+    top: "0"
+  };
+  const useResizingState = () => {
+    const [pressedColumnIndex, setPressedColumnIndex] = React.useState(-1);
+    const [pointer, setPointer] = React.useState(null);
+    const [position, setPosition] = React.useState(initialPosition);
+    const [lastPressedTimestamp, setLastPressedTimestamp] = React.useState(0);
+    const getIsPressed = React.useCallback((columnIndex) => {
+      return pressedColumnIndex === columnIndex;
+    }, [pressedColumnIndex]);
+    const setIsPressed = React.useCallback((columnIndex, pressed) => {
+      if (pressed) {
+        setPressedColumnIndex(columnIndex);
+        setLastPressedTimestamp(Date.now());
+      } else {
+        setPressedColumnIndex(-1);
+      }
+    }, []);
+    const getPosition = React.useCallback((columnIndex) => {
+      if (pressedColumnIndex !== columnIndex) {
+        return initialPosition;
+      }
+      return position;
+    }, [position, pressedColumnIndex]);
+    return {
+      pointer,
+      setPointer,
+      getIsPressed,
+      setIsPressed,
+      getPosition,
+      setPosition,
+      lastPressedTimestamp
+    };
+  };
+  const DOUBLE_CLICK_THRESHOLD_MSEC = 300;
   const ResizeSpan = styled.styled.div.withConfig({
     componentId: "sc-1r6e5v3-0"
-  })(["top:0;left:calc(100% - 4px);z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], ({
+  })(["top:", ";left:", ";z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], initialPosition.top, initialPosition.left, ({
     $height
   }) => $height, ({
     theme: theme2
@@ -16946,67 +16983,87 @@ var __publicField = (obj, key, value) => {
     height,
     onColumnResize: onColumnResizeProp,
     columnIndex,
-    setResizeCursorPosition
+    getResizerPosition,
+    columnWidth,
+    resizingState
   }) => {
     const resizeRef = React.useRef(null);
-    const pointerRef = React.useRef(null);
-    const [isPressed, setIsPressed] = React.useState(false);
+    const {
+      pointer,
+      setPointer,
+      getIsPressed,
+      setIsPressed,
+      getPosition,
+      setPosition,
+      lastPressedTimestamp
+    } = resizingState;
+    const isPressed = getIsPressed(columnIndex);
+    const position = getPosition(columnIndex);
     const onColumnResize = throttle$2(onColumnResizeProp, 1e3);
-    const onMouseDown = React.useCallback((e) => {
-      e.preventDefault();
-      e.stopPropagation();
-      setIsPressed(true);
-      if (e.detail > 1) {
-        onColumnResize(columnIndex, 0, "auto");
+    React.useEffect(() => {
+      const control = resizeRef.current;
+      if (!isPressed || !control || !pointer) {
+        return;
       }
-    }, [columnIndex, onColumnResize, setIsPressed]);
-    const onMouseUp = React.useCallback((e) => {
-      e.stopPropagation();
-      setIsPressed(false);
-    }, [setIsPressed]);
+      const pointerId = pointer.pointerId;
+      try {
+        control.setPointerCapture(pointerId);
+        return () => {
+          if (control.hasPointerCapture(pointerId)) {
+            control.releasePointerCapture(pointerId);
+          }
+        };
+      } catch (e) {
+        console.error(e);
+      }
+    }, [pointer, isPressed, columnIndex]);
     const onPointerDown = React.useCallback((e) => {
       e.stopPropagation();
+      e.preventDefault();
       if (resizeRef.current) {
-        resizeRef.current.setPointerCapture(e.pointerId);
-        const header = resizeRef.current.closest(`[data-header="${columnIndex}"]`);
-        if (header) {
-          pointerRef.current = {
-            pointerId: e.pointerId,
-            initialClientX: e.clientX,
-            width: header.clientWidth
-          };
-          setResizeCursorPosition(resizeRef.current, e.clientX, header.clientWidth, columnIndex);
+        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {
+          onColumnResize(columnIndex, 0, "auto");
         }
+        setPointer({
+          pointerId: e.pointerId,
+          initialClientX: e.clientX,
+          width: columnWidth
+        });
+        setIsPressed(columnIndex, true);
+        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);
+        setPosition(pos);
       }
-    }, [columnIndex, setResizeCursorPosition]);
-    const onMouseMove = React.useCallback((e) => {
+    }, [lastPressedTimestamp, setPointer, columnWidth, setIsPressed, columnIndex, getResizerPosition, setPosition, onColumnResize]);
+    const onPointerMove = React.useCallback((e) => {
       e.stopPropagation();
-      if (resizeRef.current && pointerRef.current) {
-        const header = resizeRef.current.closest(`[data-header="${columnIndex}"]`);
-        if (header) {
-          resizeRef.current.setPointerCapture(pointerRef.current.pointerId);
-          const width = header.clientWidth + (e.clientX - pointerRef.current.initialClientX);
-          setResizeCursorPosition(resizeRef.current, e.clientX, width, columnIndex);
-          pointerRef.current.width = Math.max(width, 50);
-        }
+      e.preventDefault();
+      if (isPressed && pointer) {
+        const width = columnWidth + (e.clientX - pointer.initialClientX);
+        const pos = getResizerPosition(e.clientX, width, columnIndex);
+        setPosition(pos);
+        pointer.width = Math.max(width, 50);
       }
-    }, [columnIndex, setResizeCursorPosition]);
+    }, [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]);
     return /* @__PURE__ */ jsxRuntime.jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
-      var _a, _b;
       e.preventDefault();
       e.stopPropagation();
       if (resizeRef.current && // 0 is a valid pointerId in Firefox
-      (((_a = pointerRef.current) == null ? void 0 : _a.pointerId) || ((_b = pointerRef.current) == null ? void 0 : _b.pointerId) === 0)) {
-        resizeRef.current.releasePointerCapture(pointerRef.current.pointerId);
-        const shouldCallResize = e.clientX !== pointerRef.current.initialClientX;
+      ((pointer == null ? void 0 : pointer.pointerId) || (pointer == null ? void 0 : pointer.pointerId) === 0)) {
+        const shouldCallResize = e.clientX !== pointer.initialClientX;
         if (shouldCallResize) {
-          onColumnResize(columnIndex, pointerRef.current.width, "manual");
+          onColumnResize(columnIndex, pointer.width, "manual");
         }
-        resizeRef.current.style.top = "0";
-        resizeRef.current.style.left = "calc(100% - 4px)";
-        pointerRef.current = null;
+        setPosition(initialPosition);
+        setPointer(null);
+        setIsPressed(columnIndex, false);
       }
-    }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp, "data-resize": true });
+    }, onPointerMove, onPointerCancel: (e) => {
+      e.preventDefault();
+      e.stopPropagation();
+      setPosition(initialPosition);
+      setPointer(null);
+      setIsPressed(columnIndex, false);
+    }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: position });
   };
   const HeaderContainer = styled.styled.div.withConfig({
     componentId: "sc-1oadqc8-0"
@@ -17046,15 +17103,16 @@ var __publicField = (obj, key, value) => {
   const Column = ({
     columnIndex,
     cell,
-    columnWidth,
+    getColumnWidth,
     getColumnHorizontalPosition,
     getSelectionType,
     isFirstColumn,
     isLastColumn,
     onColumnResize,
     height,
-    setResizeCursorPosition,
-    showBorder
+    getResizerPosition,
+    showBorder,
+    resizingState
   }) => {
     const selectionType = getSelectionType({
       column: columnIndex,
@@ -17067,9 +17125,10 @@ var __publicField = (obj, key, value) => {
     const columnPosition = getColumnHorizontalPosition(columnIndex);
     const isSelected = selectionType === "selectDirect";
     const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
-    return /* @__PURE__ */ jsxRuntime.jsxs(HeaderCellContainer, { $width: columnWidth(columnIndex), $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $isFirstColumn: isFirstColumn, $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $isFirstRow: true, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth(columnIndex) }),
-      /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer, { height, onColumnResize, columnIndex, setResizeCursorPosition })
+    const columnWidth = getColumnWidth(columnIndex);
+    return /* @__PURE__ */ jsxRuntime.jsxs(HeaderCellContainer, { $width: columnWidth, $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $isFirstColumn: isFirstColumn, $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $isFirstRow: true, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth }),
+      /* @__PURE__ */ jsxRuntime.jsx(ColumnResizer, { height, onColumnResize, columnIndex, getResizerPosition, columnWidth, resizingState })
     ] });
   };
   const Header = ({
@@ -17080,14 +17139,15 @@ var __publicField = (obj, key, value) => {
     minColumn,
     maxColumn,
     height,
-    columnWidth,
+    getColumnWidth,
     cell,
     columnCount,
     getSelectionType,
     onColumnResize,
     getColumnHorizontalPosition,
-    setResizeCursorPosition,
-    showBorder
+    getResizerPosition,
+    showBorder,
+    resizingState
   }) => {
     const selectedAllType = getSelectionType({
       type: "all"
@@ -17095,7 +17155,7 @@ var __publicField = (obj, key, value) => {
     return /* @__PURE__ */ jsxRuntime.jsxs(HeaderContainer, { $height: height, $scrolledVertical: scrolledVertical, children: [
       /* @__PURE__ */ jsxRuntime.jsx(ScrollableHeaderContainer, { $left: rowNumberWidth, children: Array.from({
         length: maxColumn - minColumn + 1
-      }, (_, index2) => minColumn + index2).map((columnIndex) => /* @__PURE__ */ jsxRuntime.jsx(Column, { getSelectionType, columnIndex, columnWidth, getColumnHorizontalPosition, cell, isFirstColumn: columnIndex === 0 && !showRowNumber, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, setResizeCursorPosition, showBorder }, `header-${columnIndex}`)) }),
+      }, (_, index2) => minColumn + index2).map((columnIndex) => /* @__PURE__ */ jsxRuntime.jsx(Column, { getSelectionType, columnIndex, getColumnWidth, getColumnHorizontalPosition, cell, isFirstColumn: columnIndex === 0 && !showRowNumber, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
       showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowColumnContainer, { $width: rowNumberWidth, $height: height, $columnPosition: 0, $scrolledHorizontal: scrolledHorizontal, children: /* @__PURE__ */ jsxRuntime.jsx(RowColumn, { "data-selected": selectedAllType === "selectDirect", $type: "header", $isFirstRow: true, $isFirstColumn: true, $selectionType: selectedAllType, $isLastRow: false, $isLastColumn: false, $height: height, $isFocused: false, $isSelectedLeft: false, $isSelectedTop: false, "data-grid-row": -1, "data-grid-column": -1, $showBorder: showBorder, children: "#" }) })
     ] });
   };
@@ -31774,6 +31834,7 @@ var __publicField = (obj, key, value) => {
         onSelectProp(action, selection2, focus2);
       }
     }, [onSelectProp]);
+    const resizingState = useResizingState();
     const onFocusChange = React.useCallback((row, column) => {
       setFocus((focus2) => ({
         row: row ?? (focusProp == null ? void 0 : focusProp.row) ?? focus2.row,
@@ -31847,11 +31908,14 @@ var __publicField = (obj, key, value) => {
       }
       return columnLeft + rowNumberWidth - 4;
     }, [getColumnHorizontalPosition, rowNumberWidth]);
-    const setResizeCursorPosition = React.useCallback((element, clientX, width, columnIndex) => {
-      element.style.left = `${getFixedResizerLeftPosition(clientX, width, columnIndex)}px`;
+    const getResizerPosition = React.useCallback((clientX, width, columnIndex) => {
+      const result = {
+        left: `${getFixedResizerLeftPosition(clientX, width, columnIndex)}px`
+      };
       if (outerRef.current) {
-        element.style.top = `${outerRef.current.scrollTop}px`;
+        result.top = `${outerRef.current.scrollTop}px`;
       }
+      return result;
     }, [getFixedResizerLeftPosition]);
     const clearSelectionAndFocus = React.useCallback((force) => {
       setSelection((selection2) => {
@@ -31906,7 +31970,7 @@ var __publicField = (obj, key, value) => {
       return /* @__PURE__ */ jsxRuntime.jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
         /* @__PURE__ */ jsxRuntime.jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
         showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder }),
-        showHeader && /* @__PURE__ */ jsxRuntime.jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, setResizeCursorPosition, showBorder })
+        showHeader && /* @__PURE__ */ jsxRuntime.jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
       ] });
     });
     React.useEffect(() => {

package/dist/components/Flyout/Flyout.d.ts

@@ -37,7 +37,7 @@ export declare const Flyout: {
     };
     CodeBlock: ({ statement, language, wrapLines, showLineNumbers, showWrapButton, onCopy, onCopyError, ...props }: FlyoutCodeBlockProps & ElementProps) => import("react/jsx-runtime").JSX.Element;
 };
-type FlyoutSizeType = "default" | "narrow" | "wide";
+type FlyoutSizeType = "default" | "narrow" | "wide" | "widest";
 type Strategy = "relative" | "absolute" | "fixed";
 type FlyoutType = "default" | "inline";
 type DialogContentAlignmentType = "start" | "end";

package/dist/components/Grid/ColumnResizer.d.ts

@@ -1,10 +1,28 @@
-import { ColumnResizeFn, SetResizeCursorPositionFn } from './types';
+import { ColumnResizeFn, GetResizerPositionFn } from './types';
+import { ResizingState } from './useResizingState';
 
+/**
+ * Properties for the ColumnResizer component.
+ * @typedef {Object} Props
+ * @property {number} height - Height of the resizer.
+ * @property {ColumnResizeFn} onColumnResize - Function to handle column resize.
+ * @property {number} columnIndex - Index of the column being resized.
+ * @property {GetResizerPositionFn} getResizerPosition - Function to get the position of the resizer.
+ * @property {number} columnWidth - Initial width of the column.
+ * @property {ResizingState} resizingState - State management object for resizing interactions.
+ */
 interface Props {
     height: number;
     onColumnResize: ColumnResizeFn;
     columnIndex: number;
-    setResizeCursorPosition: SetResizeCursorPositionFn;
+    getResizerPosition: GetResizerPositionFn;
+    columnWidth: number;
+    resizingState: ResizingState;
 }
-declare const ColumnResizer: ({ height, onColumnResize: onColumnResizeProp, columnIndex, setResizeCursorPosition, }: Props) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Component for rendering a column resizer with pointer events and resizing state management.
+ * @param {Props} props - Properties passed to the component.
+ * @returns {JSX.Element} The ColumnResizer component.
+ */
+declare const ColumnResizer: ({ height, onColumnResize: onColumnResizeProp, columnIndex, getResizerPosition, columnWidth, resizingState, }: Props) => import("react/jsx-runtime").JSX.Element;
 export default ColumnResizer;

package/dist/components/Grid/Header.d.ts

@@ -1,4 +1,5 @@
-import { CellProps, ColumnResizeFn, SelectionTypeFn, SetResizeCursorPositionFn } from './types';
+import { CellProps, ColumnResizeFn, GetResizerPositionFn, SelectionTypeFn } from './types';
+import { ResizingState } from './useResizingState';
 
 interface HeaderProps {
     showRowNumber: boolean;
@@ -6,16 +7,17 @@ interface HeaderProps {
     minColumn: number;
     maxColumn: number;
     height: number;
-    columnWidth: (index: number) => number;
+    getColumnWidth: (index: number) => number;
     cell: CellProps;
     getSelectionType: SelectionTypeFn;
     columnCount: number;
     onColumnResize: ColumnResizeFn;
     getColumnHorizontalPosition: (columnIndex: number) => number;
     scrolledVertical: boolean;
-    setResizeCursorPosition: SetResizeCursorPositionFn;
+    getResizerPosition: GetResizerPositionFn;
     showBorder: boolean;
     scrolledHorizontal: boolean;
+    resizingState: ResizingState;
 }
-declare const Header: ({ scrolledVertical, scrolledHorizontal, showRowNumber, rowNumberWidth, minColumn, maxColumn, height, columnWidth, cell, columnCount, getSelectionType, onColumnResize, getColumnHorizontalPosition, setResizeCursorPosition, showBorder, }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
+declare const Header: ({ scrolledVertical, scrolledHorizontal, showRowNumber, rowNumberWidth, minColumn, maxColumn, height, getColumnWidth, cell, columnCount, getSelectionType, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState }: HeaderProps) => import("react/jsx-runtime").JSX.Element;
 export default Header;

package/dist/components/Grid/types.d.ts

@@ -138,5 +138,9 @@ export interface GridProps extends Omit<VariableSizeGridProps, "height" | "width
     onContextMenu?: MouseEventHandler<HTMLDivElement>;
     forwardedGridRef?: MutableRefObject<VariableSizeGrid>;
 }
-export type SetResizeCursorPositionFn = (element: HTMLSpanElement, clientX: number, width: number, columnIndex: number) => void;
+export type ResizerPosition = {
+    left: string;
+    top?: string;
+};
+export type GetResizerPositionFn = (clientX: number, width: number, columnIndex: number) => ResizerPosition;
 export {};

package/dist/components/Grid/useResizingState.d.ts

@@ -0,0 +1,48 @@
+import { ResizerPosition } from './types';
+
+/**
+ * Defines the type for pointer information used in resizing.
+ * @typedef {Object} PointerType
+ * @property {number} width - The width of the pointer component.
+ * @property {number} pointerId - Unique identifier for the pointer from a touch event.
+ * @property {number} initialClientX - The initial X coordinate of the pointer when resizing started.
+ */
+export type PointerType = {
+    width: number;
+    pointerId: number;
+    initialClientX: number;
+};
+/**
+ * Defines the state and methods used for managing the column resizing.
+ * @typedef {Object} ResizingState
+ * @property {PointerType | null} pointer - The current pointer data, or null if no pointer is active.
+ * @property {(pointer: PointerType | null) => void} setPointer - Setter to update the pointer.
+ * @property {(columnIndex: number) => boolean} getIsPressed - Indicates if a resizer for the given column is currently pressed/dragged.
+ * @property {(columnIndex: number, pressed: boolean) => void} setIsPressed - Sets the pressed state for a given column.
+ * @property {(columnIndex: number) => ResizerPosition} getPosition - Gets the position of the resizer for the specified column.
+ * @property {(position: ResizerPosition) => void} setPosition - Updates the position of the resizer.
+ * @property {number} lastPressedTimestamp - Timestamp of the last time a column was pressed, used to detect double-clicks.
+ */
+export interface ResizingState {
+    pointer: PointerType | null;
+    setPointer: (pointer: PointerType | null) => void;
+    getIsPressed: (columnIndex: number) => boolean;
+    setIsPressed: (columnIndex: number, pressed: boolean) => void;
+    getPosition: (columnIndex: number) => ResizerPosition;
+    setPosition: (position: ResizerPosition) => void;
+    lastPressedTimestamp: number;
+}
+/**
+ * The initial position of the resizer element.
+ * @type {ResizerPosition}
+ */
+export declare const initialPosition: {
+    left: string;
+    top: string;
+};
+/**
+ * Custom hook that provides the state and methods needed to manage a resizing operation on columns.
+ * @returns {ResizingState} The resizing state and methods for controlling resizing behavior.
+ */
+declare const useResizingState: () => ResizingState;
+export default useResizingState;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.171",
+  "version": "0.0.172",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",