@clickhouse/click-ui 0.0.156 → 0.0.157

package/dist/click-ui.es.js

@@ -16909,11 +16909,16 @@ var throttle_1 = throttle$1;
 const throttle$2 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
 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:", ";}&:active{height:100%;position:fixed;}"], ({
+})(["top:0;left:calc(100% - 4px);z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], ({
   $height
 }) => $height, ({
   theme: theme2
-}) => theme2.click.grid.header.cell.color.stroke.selectDirect);
+}) => theme2.click.grid.header.cell.color.stroke.selectDirect, ({
+  $isPressed
+}) => $isPressed && `
+      height: 100%;
+      position: fixed;
+    `);
 const ColumnResizer = ({
   height,
   onColumnResize: onColumnResizeProp,
@@ -16922,14 +16927,20 @@ const ColumnResizer = ({
 }) => {
   const resizeRef = useRef(null);
   const pointerRef = useRef(null);
+  const [isPressed, setIsPressed] = useState(false);
   const onColumnResize = throttle$2(onColumnResizeProp, 1e3);
   const onMouseDown = useCallback((e) => {
     e.preventDefault();
     e.stopPropagation();
+    setIsPressed(true);
     if (e.detail > 1) {
       onColumnResize(columnIndex, 0, "auto");
     }
-  }, [columnIndex, onColumnResize]);
+  }, [columnIndex, onColumnResize, setIsPressed]);
+  const onMouseUp = useCallback((e) => {
+    e.stopPropagation();
+    setIsPressed(false);
+  }, [setIsPressed]);
   const onPointerDown = useCallback((e) => {
     e.stopPropagation();
     if (resizeRef.current) {
@@ -16951,17 +16962,18 @@ const ColumnResizer = ({
       const header = resizeRef.current.closest(`[data-header="${columnIndex}"]`);
       if (header) {
         resizeRef.current.setPointerCapture(pointerRef.current.pointerId);
-        const width = header.scrollWidth + (e.clientX - pointerRef.current.initialClientX);
+        const width = header.clientWidth + (e.clientX - pointerRef.current.initialClientX);
         setResizeCursorPosition(resizeRef.current, e.clientX, width, columnIndex);
         pointerRef.current.width = Math.max(width, 50);
       }
     }
   }, [columnIndex, setResizeCursorPosition]);
-  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeSpan, { ref: resizeRef, $height: height, onPointerDown, onPointerUp: (e) => {
-    var _a;
+  return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
+    var _a, _b;
     e.preventDefault();
     e.stopPropagation();
-    if (resizeRef.current && ((_a = pointerRef.current) == null ? void 0 : _a.pointerId)) {
+    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;
       if (shouldCallResize) {
@@ -16971,7 +16983,7 @@ const ColumnResizer = ({
       resizeRef.current.style.left = "calc(100% - 4px)";
       pointerRef.current = null;
     }
-  }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), "data-resize": true });
+  }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp, "data-resize": true });
 };
 const HeaderContainer = styled.div.withConfig({
   componentId: "sc-1oadqc8-0"
@@ -31628,7 +31640,7 @@ const ContextMenuTrigger = styled.div.withConfig({
   $showBorder,
   theme: theme2
 }) => $showBorder && `border: 1px solid ${theme2.click.grid.header.cell.color.stroke.default}`);
-const OuterElementType = forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, "data-testid": "grid-outer-element", ...props }));
+const OuterElementType = forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, "data-testid": "grid-outer-element", tabIndex: 0, ...props }));
 const Grid = forwardRef(({
   autoFocus,
   autoHeight = false,

package/dist/click-ui.umd.js

@@ -16926,11 +16926,16 @@ var __publicField = (obj, key, value) => {
   const throttle$2 = /* @__PURE__ */ getDefaultExportFromCjs(throttle_1);
   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:", ";}&:active{height:100%;position:fixed;}"], ({
+  })(["top:0;left:calc(100% - 4px);z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], ({
     $height
   }) => $height, ({
     theme: theme2
-  }) => theme2.click.grid.header.cell.color.stroke.selectDirect);
+  }) => theme2.click.grid.header.cell.color.stroke.selectDirect, ({
+    $isPressed
+  }) => $isPressed && `
+      height: 100%;
+      position: fixed;
+    `);
   const ColumnResizer = ({
     height,
     onColumnResize: onColumnResizeProp,
@@ -16939,14 +16944,20 @@ var __publicField = (obj, key, value) => {
   }) => {
     const resizeRef = React.useRef(null);
     const pointerRef = React.useRef(null);
+    const [isPressed, setIsPressed] = React.useState(false);
     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");
       }
-    }, [columnIndex, onColumnResize]);
+    }, [columnIndex, onColumnResize, setIsPressed]);
+    const onMouseUp = React.useCallback((e) => {
+      e.stopPropagation();
+      setIsPressed(false);
+    }, [setIsPressed]);
     const onPointerDown = React.useCallback((e) => {
       e.stopPropagation();
       if (resizeRef.current) {
@@ -16968,17 +16979,18 @@ var __publicField = (obj, key, value) => {
         const header = resizeRef.current.closest(`[data-header="${columnIndex}"]`);
         if (header) {
           resizeRef.current.setPointerCapture(pointerRef.current.pointerId);
-          const width = header.scrollWidth + (e.clientX - pointerRef.current.initialClientX);
+          const width = header.clientWidth + (e.clientX - pointerRef.current.initialClientX);
           setResizeCursorPosition(resizeRef.current, e.clientX, width, columnIndex);
           pointerRef.current.width = Math.max(width, 50);
         }
       }
     }, [columnIndex, setResizeCursorPosition]);
-    return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeSpan, { ref: resizeRef, $height: height, onPointerDown, onPointerUp: (e) => {
-      var _a;
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
+      var _a, _b;
       e.preventDefault();
       e.stopPropagation();
-      if (resizeRef.current && ((_a = pointerRef.current) == null ? void 0 : _a.pointerId)) {
+      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;
         if (shouldCallResize) {
@@ -16988,7 +17000,7 @@ var __publicField = (obj, key, value) => {
         resizeRef.current.style.left = "calc(100% - 4px)";
         pointerRef.current = null;
       }
-    }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp: (e) => e.stopPropagation(), "data-resize": true });
+    }, onMouseMove, onMouseDown, onClick: (e) => e.stopPropagation(), onMouseUp, "data-resize": true });
   };
   const HeaderContainer = styled.div.withConfig({
     componentId: "sc-1oadqc8-0"
@@ -31645,7 +31657,7 @@ var __publicField = (obj, key, value) => {
     $showBorder,
     theme: theme2
   }) => $showBorder && `border: 1px solid ${theme2.click.grid.header.cell.color.stroke.default}`);
-  const OuterElementType = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, "data-testid": "grid-outer-element", ...props }));
+  const OuterElementType = React.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntimeExports.jsx("div", { ref, "data-testid": "grid-outer-element", tabIndex: 0, ...props }));
   const Grid = React.forwardRef(({
     autoFocus,
     autoHeight = false,

package/package.json

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