@clickhouse/click-ui 0.0.170 → 0.0.172

package/dist/click-ui.es.js

@@ -217,6 +217,7 @@ const FolderOpen = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w
 ] });
 const FolderClosed = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeWidth: 1.5, d: "M19 19H3C2.44772 19 2 18.5523 2 18V6C2 5.44772 2.44772 5 3 5H6.62869C6.98835 5 7.32032 5.19315 7.49805 5.50583L8.34405 6.99417C8.52179 7.30685 8.85375 7.5 9.21342 7.5H19C19.5523 7.5 20 7.94772 20 8.5V9.5V18C20 18.5523 19.5523 19 19 19Z" }) });
 const Gift = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx("path", { fill: "#161517", stroke: "#161517", strokeWidth: 0.6, d: "M19.306 6.276h-3.704a2.52 2.52 0 0 0 .752-1.805C16.354 3.11 15.296 2 13.997 2c-.937 0-1.745.578-2.125 1.41-.386-.56-1.013-.928-1.722-.928-1.172 0-2.126 1-2.126 2.23 0 .61.234 1.161.612 1.564H4.694C3.76 6.276 3 7.073 3 8.053v1.285c0 .919.67 1.677 1.523 1.767v8.64c0 1.244.964 2.255 2.15 2.255h10.655c1.185 0 2.149-1.011 2.149-2.254v-8.641c.854-.09 1.523-.848 1.523-1.767V8.052c0-.979-.76-1.776-1.694-1.776Zm-7.03-1.805c0-.995.772-1.804 1.721-1.804.949 0 1.72.81 1.72 1.804 0 .996-.771 1.805-1.72 1.805h-1.72V4.471Zm-3.617.242c0-.862.669-1.564 1.49-1.564.823 0 1.492.702 1.492 1.564v1.563H10.15c-.822 0-1.49-.701-1.49-1.563ZM3.635 9.338V8.052c0-.611.475-1.11 1.058-1.11h5.457l1.532.001v3.504H4.693c-.583 0-1.058-.498-1.058-1.11ZM5.16 19.746v-8.632h6.523v10.22h-5.01c-.834 0-1.513-.713-1.513-1.588Zm13.682 0c0 .875-.679 1.588-1.514 1.588h-5.01v-10.22h6.525v8.632Zm1.523-10.408c0 .612-.474 1.11-1.057 1.11h-6.99V6.942h6.99c.583 0 1.058.498 1.058 1.11v1.285Z" }) });
+const Globe = (props) => /* @__PURE__ */ jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsx("path", { d: "M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M21 12H3M12 21C7.02944 21 3 16.9706 3 12M12 21C14.2512 18.5355 15.5305 15.3372 15.6 12C15.5305 8.66283 14.2512 5.46452 12 3M12 21C9.74885 18.5355 8.46952 15.3372 8.4 12C8.46952 8.66283 9.74885 5.46452 12 3M3 12C3 7.02944 7.02944 3 12 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
 const Home = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 8.6V21h16V8.6" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m2 10 10-7 10 7M15 21v-6a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v6" })
@@ -389,8 +390,13 @@ const Speed = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12.007 10.313A1.69 1.69 0 0 1 13.688 12v.008a1.689 1.689 0 1 1-1.681-1.695M10.807 13.194l-1.25 1.25M16.202 7.798 13.201 10.8" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M18.367 5.634A9.004 9.004 0 1 1 12 2.997v3" })
 ] });
+const Square = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx("rect", { x: "3.75", y: "3.75", width: "16.5", height: "16.5", rx: "1.25", stroke: "white", strokeWidth: "1.5" }) });
 const Star = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2.896L14.935 8.889L21.5 9.856L16.75 14.518L17.871 21.104L12 17.993L6.129 21.104L7.25 14.518L2.5 9.856L9.064 8.889L12 2.896Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-const Stop = (props) => /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsx("rect", { x: "3.75", y: "3.75", width: "16.5", height: "16.5", rx: "1.25", stroke: "white", strokeWidth: "1.5" }) });
+const Stop = (props) => /* @__PURE__ */ jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsx("mask", { id: "path-1-inside-1_9731_929", fill: "white", children: /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.4" }) }),
+  /* @__PURE__ */ jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.4", fill: "white", stroke: "white", strokeWidth: "3", mask: "url(#path-1-inside-1_9731_929)" }),
+  /* @__PURE__ */ jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+] });
 const Support = (props) => /* @__PURE__ */ jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16 18H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2Z", clipRule: "evenodd" }),
   /* @__PURE__ */ jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M10.467 11.504v-.207c0-.678.419-1.045.839-1.327.41-.276.82-.636.82-1.3a1.659 1.659 0 0 0-3.318 0M10.466 13.843a.148.148 0 0 0-.15.15.15.15 0 1 0 .15-.15" }),
@@ -738,6 +744,7 @@ const ICONS_MAP = {
   "folder-open": FolderOpen,
   gear: Gear,
   gift: Gift,
+  globe: Globe,
   "git-merge": GitMerge,
   history: HistoryIcon,
   home: Home,
@@ -791,6 +798,7 @@ const ICONS_MAP = {
   sparkle: Sparkle,
   speaker: Speaker,
   speed: Speed,
+  square: Square,
   star: Star,
   stop: Stop,
   support: Support,
@@ -16906,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
@@ -16922,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"
@@ -17022,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,
@@ -17043,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 = ({
@@ -17056,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"
@@ -17071,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: "#" }) })
   ] });
 };
@@ -31750,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,
@@ -31823,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) => {
@@ -31882,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

@@ -233,6 +233,7 @@ var __publicField = (obj, key, value) => {
   ] });
   const FolderClosed = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeWidth: 1.5, d: "M19 19H3C2.44772 19 2 18.5523 2 18V6C2 5.44772 2.44772 5 3 5H6.62869C6.98835 5 7.32032 5.19315 7.49805 5.50583L8.34405 6.99417C8.52179 7.30685 8.85375 7.5 9.21342 7.5H19C19.5523 7.5 20 7.94772 20 8.5V9.5V18C20 18.5523 19.5523 19 19 19Z" }) });
   const Gift = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fill: "#161517", stroke: "#161517", strokeWidth: 0.6, d: "M19.306 6.276h-3.704a2.52 2.52 0 0 0 .752-1.805C16.354 3.11 15.296 2 13.997 2c-.937 0-1.745.578-2.125 1.41-.386-.56-1.013-.928-1.722-.928-1.172 0-2.126 1-2.126 2.23 0 .61.234 1.161.612 1.564H4.694C3.76 6.276 3 7.073 3 8.053v1.285c0 .919.67 1.677 1.523 1.767v8.64c0 1.244.964 2.255 2.15 2.255h10.655c1.185 0 2.149-1.011 2.149-2.254v-8.641c.854-.09 1.523-.848 1.523-1.767V8.052c0-.979-.76-1.776-1.694-1.776Zm-7.03-1.805c0-.995.772-1.804 1.721-1.804.949 0 1.72.81 1.72 1.804 0 .996-.771 1.805-1.72 1.805h-1.72V4.471Zm-3.617.242c0-.862.669-1.564 1.49-1.564.823 0 1.492.702 1.492 1.564v1.563H10.15c-.822 0-1.49-.701-1.49-1.563ZM3.635 9.338V8.052c0-.611.475-1.11 1.058-1.11h5.457l1.532.001v3.504H4.693c-.583 0-1.058-.498-1.058-1.11ZM5.16 19.746v-8.632h6.523v10.22h-5.01c-.834 0-1.513-.713-1.513-1.588Zm13.682 0c0 .875-.679 1.588-1.514 1.588h-5.01v-10.22h6.525v8.632Zm1.523-10.408c0 .612-.474 1.11-1.057 1.11h-6.99V6.942h6.99c.583 0 1.058.498 1.058 1.11v1.285Z" }) });
+  const Globe = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12C21 16.9706 16.9706 21 12 21M21 12C21 7.02944 16.9706 3 12 3M21 12H3M12 21C7.02944 21 3 16.9706 3 12M12 21C14.2512 18.5355 15.5305 15.3372 15.6 12C15.5305 8.66283 14.2512 5.46452 12 3M12 21C9.74885 18.5355 8.46952 15.3372 8.4 12C8.46952 8.66283 9.74885 5.46452 12 3M3 12C3 7.02944 7.02944 3 12 3", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
   const Home = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M4 8.6V21h16V8.6" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "m2 10 10-7 10 7M15 21v-6a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v6" })
@@ -405,8 +406,13 @@ var __publicField = (obj, key, value) => {
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M12.007 10.313A1.69 1.69 0 0 1 13.688 12v.008a1.689 1.689 0 1 1-1.681-1.695M10.807 13.194l-1.25 1.25M16.202 7.798 13.201 10.8" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M18.367 5.634A9.004 9.004 0 1 1 12 2.997v3" })
   ] });
+  const Square = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.75", y: "3.75", width: "16.5", height: "16.5", rx: "1.25", stroke: "white", strokeWidth: "1.5" }) });
   const Star = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 2.896L14.935 8.889L21.5 9.856L16.75 14.518L17.871 21.104L12 17.993L6.129 21.104L7.25 14.518L2.5 9.856L9.064 8.889L12 2.896Z", stroke: "#161517", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) });
-  const Stop = (props) => /* @__PURE__ */ jsxRuntime.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "3.75", y: "3.75", width: "16.5", height: "16.5", rx: "1.25", stroke: "white", strokeWidth: "1.5" }) });
+  const Stop = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("mask", { id: "path-1-inside-1_9731_929", fill: "white", children: /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.4" }) }),
+    /* @__PURE__ */ jsxRuntime.jsx("rect", { x: "9", y: "9", width: "6", height: "6", rx: "0.4", fill: "white", stroke: "white", strokeWidth: "3", mask: "url(#path-1-inside-1_9731_929)" }),
+    /* @__PURE__ */ jsxRuntime.jsx("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M12 21V21C7.029 21 3 16.971 3 12V12C3 7.029 7.029 3 12 3V3C16.971 3 21 7.029 21 12V12C21 16.971 16.971 21 12 21Z", stroke: "white", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
   const Support = (props) => /* @__PURE__ */ jsxRuntime.jsxs("svg", { xmlns: "http://www.w3.org/2000/svg", width: 24, height: 24, viewBox: "0 0 24 24", fill: "none", ...props, children: [
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M16 18H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2Z", clipRule: "evenodd" }),
     /* @__PURE__ */ jsxRuntime.jsx("path", { stroke: "#161517", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 1.5, d: "M10.467 11.504v-.207c0-.678.419-1.045.839-1.327.41-.276.82-.636.82-1.3a1.659 1.659 0 0 0-3.318 0M10.466 13.843a.148.148 0 0 0-.15.15.15.15 0 1 0 .15-.15" }),
@@ -754,6 +760,7 @@ var __publicField = (obj, key, value) => {
     "folder-open": FolderOpen,
     gear: Gear,
     gift: Gift,
+    globe: Globe,
     "git-merge": GitMerge,
     history: HistoryIcon,
     home: Home,
@@ -807,6 +814,7 @@ var __publicField = (obj, key, value) => {
     sparkle: Sparkle,
     speaker: Speaker,
     speed: Speed,
+    square: Square,
     star: Star,
     stop: Stop,
     support: Support,
@@ -16922,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
@@ -16938,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"
@@ -17038,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,
@@ -17059,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 = ({
@@ -17072,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"
@@ -17087,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: "#" }) })
     ] });
   };
@@ -31766,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,
@@ -31839,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) => {
@@ -31898,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/dist/components/Icon/IconCommon.d.ts

@@ -69,6 +69,7 @@ export declare const ICONS_MAP: {
     "folder-open": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     gear: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     gift: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    globe: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     "git-merge": (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     history: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     home: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
@@ -122,6 +123,7 @@ export declare const ICONS_MAP: {
     sparkle: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     speaker: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     speed: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+    square: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     star: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     stop: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
     support: (props: import('react').SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;

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

@@ -6,7 +6,7 @@ import { PaymentName, PaymentProps } from '../icons/Payments';
 
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
 export type IconState = "default" | "success" | "warning" | "danger" | "info";
-export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "calendar", "calendar-with-time", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cpu", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "minus", "no-cloud", "pause", "payment", "pencil", "pie-chart", "pipe", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "sandglass", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "tree-structure", "upload", "url", "user", "users", "warning", "waves"];
+export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "calendar", "calendar-with-time", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cpu", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "double-check", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "globe", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "minus", "no-cloud", "pause", "payment", "pencil", "pie-chart", "pipe", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "sandglass", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "square", "star", "stop", "support", "table", "taxi", "trash", "tree-structure", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;

package/dist/components/icons/Globe.d.ts

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+
+declare const Globe: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Globe;

package/dist/components/icons/Square.d.ts

@@ -0,0 +1,4 @@
+import { SVGAttributes } from 'react';
+
+declare const Square: (props: SVGAttributes<SVGElement>) => import("react/jsx-runtime").JSX.Element;
+export default Square;

package/package.json

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