@clickhouse/click-ui 0.0.156 → 0.0.158

package/dist/click-ui.es.js

@@ -2291,10 +2291,19 @@ const FormElementContainer = styled.div.withConfig({
 styled.span.withConfig({
   componentId: "sc-1sddmxu-8"
 })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
+const Switzerland = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+  /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_8668_6183)", children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0H0V20H30V0Z", fill: "#D52B1E" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21.6663 7.77783H8.33301V12.2223H21.6663V7.77783Z", fill: "white" }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.2218 3.3335H12.7773V16.6668H17.2218V3.3335Z", fill: "white" })
+  ] }),
+  /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_8668_6183", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
+] });
 const FlagList = {
   au: Australia,
   br: Brazil,
   ca: Canada,
+  ch: Switzerland,
   de: Germany,
   eu: EuropeanUnion,
   gb: GreatBritain,
@@ -16909,11 +16918,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 +16936,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 +16971,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 +16992,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 +31649,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

@@ -2308,10 +2308,19 @@ var __publicField = (obj, key, value) => {
   styled.span.withConfig({
     componentId: "sc-1sddmxu-8"
   })(["display:flex;white-space:nowrap;overflow:hidden;justify-content:flex-end;gap:inherit;& > *:not(button){overflow:hidden;text-overflow:ellipsis;}"]);
+  const Switzerland = (props) => /* @__PURE__ */ jsxRuntimeExports.jsxs("svg", { width: "30", height: "20", viewBox: "0 0 30 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...props, children: [
+    /* @__PURE__ */ jsxRuntimeExports.jsxs("g", { "clip-path": "url(#clip0_8668_6183)", children: [
+      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M30 0H0V20H30V0Z", fill: "#D52B1E" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M21.6663 7.77783H8.33301V12.2223H21.6663V7.77783Z", fill: "white" }),
+      /* @__PURE__ */ jsxRuntimeExports.jsx("path", { d: "M17.2218 3.3335H12.7773V16.6668H17.2218V3.3335Z", fill: "white" })
+    ] }),
+    /* @__PURE__ */ jsxRuntimeExports.jsx("defs", { children: /* @__PURE__ */ jsxRuntimeExports.jsx("clipPath", { id: "clip0_8668_6183", children: /* @__PURE__ */ jsxRuntimeExports.jsx("rect", { width: "30", height: "20", fill: "white" }) }) })
+  ] });
   const FlagList = {
     au: Australia,
     br: Brazil,
     ca: Canada,
+    ch: Switzerland,
     de: Germany,
     eu: EuropeanUnion,
     gb: GreatBritain,
@@ -16926,11 +16935,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 +16953,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 +16988,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 +17009,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 +31666,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/dist/components/icons/Flags/Switzerland.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+declare const Switzerland: (props: React.SVGAttributes<SVGElement>) => React.ReactElement;
+export default Switzerland;

package/dist/components/icons/Flags/index.d.ts

@@ -1,7 +1,7 @@
 import { SVGAttributes } from 'react';
 import { IconSize } from '../../Icon/types';
 
-export type FlagName = "au" | "br" | "ca" | "de" | "eu" | "gb" | "in" | "ie" | "jp" | "nl" | "sg" | "sw" | "usa" | "uk" | "za";
+export type FlagName = "au" | "br" | "ca" | "ch" | "de" | "eu" | "gb" | "in" | "ie" | "jp" | "nl" | "sg" | "sw" | "usa" | "uk" | "za";
 export interface FlagProps extends Omit<SVGAttributes<SVGElement>, "size"> {
     name: FlagName;
     size?: IconSize;
@@ -10,6 +10,7 @@ export declare const FlagList: {
     au: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     br: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     ca: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
+    ch: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     de: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     eu: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;
     gb: (props: SVGAttributes<SVGElement>) => import('react').ReactElement;

package/package.json

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