@clickhouse/click-ui 0.8.0 → 1.0.0-rc2

package/dist/cjs/components/Grid/Cell.cjs

@@ -7,67 +7,90 @@ const react = require('react');
 const reactWindow = require('react-window');
 const StyledCell = require('./StyledCell.cjs');
 
-const Cell = react.memo(({
-  data,
-  rowIndex,
-  columnIndex,
-  style,
-  ...props
-}) => {
-  const {
-    cell: CellData,
-    getSelectionType,
-    focus,
-    columnCount,
-    rowCount,
-    showRowNumber,
-    showHeader,
-    rowHeight,
-    rowStart,
-    rowAutoHeight,
-    updateRowHeight
-  } = data;
-  const currentRowIndex = rowIndex + rowStart;
-  const {
-    row: focusedRow,
-    column: focusedColumn
-  } = focus;
-  const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;
-  const rightOfFocus = columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;
-  const belowFocus = columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;
-  const selectionType = getSelectionType({
-    row: currentRowIndex,
-    column: columnIndex,
-    type: "cell"
-  });
-  const rightSelection = getSelectionType({
-    row: currentRowIndex,
-    column: columnIndex - 1,
-    type: "cell"
-  });
-  const belowSelection = getSelectionType({
-    row: currentRowIndex - 1,
-    column: columnIndex,
-    type: "cell"
-  });
-  const rightOfSelectionBorder = (selectionType === "selectDirect" || rightSelection === "selectDirect") && selectionType !== rightSelection;
-  const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
-  const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
-  const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
-  const cellRef = react.useRef(null);
-  react.useEffect(() => {
-    if (!rowAutoHeight || !cellRef.current) {
-      return;
-    }
-    const height = cellRef.current.getBoundingClientRect().height;
-    updateRowHeight(rowIndex, height);
-  }, [updateRowHeight, rowIndex, rowAutoHeight]);
-  const styleWithHeight = {
-    ...style,
-    height: "auto"
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { style: styleWithHeight, "data-row": currentRowIndex, "data-column": columnIndex, ref: cellRef, children: /* @__PURE__ */ jsxRuntime.jsx(StyledCell.StyledCell, { as: CellData, rowIndex: currentRowIndex, columnIndex, type: "row-cell", "data-selected": isFocused || selectionType === "selectDirect", "data-focused": isFocused, $isSelectedTop: selectionBorderTop, $isSelectedLeft: selectionBorderLeft, $isFocused: isFocused, $isLastRow: rowCount - 1 === rowIndex, $isLastColumn: columnCount - 1 === columnIndex, $isFirstColumn: columnIndex === 0 && !showRowNumber, $isFirstRow: rowIndex === 0 && !showHeader, $selectionType: selectionType, $height: rowHeight, "data-grid-row": currentRowIndex, "data-grid-column": columnIndex, $showBorder: true, $rowAutoHeight: rowAutoHeight, ...props }) });
-}, reactWindow.areEqual);
+const Cell = react.memo(
+  ({ data, rowIndex, columnIndex, style, ...props }) => {
+    const {
+      cell: CellData,
+      getSelectionType,
+      focus,
+      columnCount,
+      rowCount,
+      rowHeight,
+      rowStart,
+      rowAutoHeight,
+      updateRowHeight
+    } = data;
+    const currentRowIndex = rowIndex + rowStart;
+    const { row: focusedRow, column: focusedColumn } = focus;
+    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;
+    const rightOfFocus = columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;
+    const belowFocus = columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;
+    const selectionType = getSelectionType({
+      row: currentRowIndex,
+      column: columnIndex,
+      type: "cell"
+    });
+    const rightSelection = getSelectionType({
+      row: currentRowIndex,
+      column: columnIndex - 1,
+      type: "cell"
+    });
+    const belowSelection = getSelectionType({
+      row: currentRowIndex - 1,
+      column: columnIndex,
+      type: "cell"
+    });
+    const rightOfSelectionBorder = (selectionType === "selectDirect" || rightSelection === "selectDirect") && selectionType !== rightSelection;
+    const belowSelectionBorder = (selectionType === "selectDirect" || belowSelection === "selectDirect") && selectionType !== belowSelection;
+    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;
+    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;
+    const cellRef = react.useRef(null);
+    react.useEffect(() => {
+      if (!rowAutoHeight || !cellRef.current) {
+        return;
+      }
+      const height = cellRef.current.getBoundingClientRect().height;
+      updateRowHeight(rowIndex, height);
+    }, [updateRowHeight, rowIndex, rowAutoHeight]);
+    const styleWithHeight = {
+      ...style,
+      height: "auto"
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: styleWithHeight,
+        "data-row": currentRowIndex,
+        "data-column": columnIndex,
+        ref: cellRef,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          StyledCell.StyledCell,
+          {
+            as: CellData,
+            rowIndex: currentRowIndex,
+            columnIndex,
+            type: "row-cell",
+            "data-selected": isFocused || selectionType === "selectDirect",
+            "data-focused": isFocused,
+            $isSelectedTop: selectionBorderTop,
+            $isSelectedLeft: selectionBorderLeft,
+            $isFocused: isFocused,
+            $isLastRow: rowCount - 1 === rowIndex,
+            $isLastColumn: columnCount - 1 === columnIndex,
+            $selectionType: selectionType,
+            $height: rowHeight,
+            "data-grid-row": currentRowIndex,
+            "data-grid-column": columnIndex,
+            $showBorder: true,
+            $rowAutoHeight: rowAutoHeight,
+            ...props
+          }
+        )
+      }
+    );
+  },
+  reactWindow.areEqual
+);
 
 exports.Cell = Cell;
 //# sourceMappingURL=Cell.cjs.map

package/dist/cjs/components/Grid/Cell.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Cell.cjs","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      showRowNumber,\n      showHeader,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $isFirstColumn={columnIndex === 0 && !showRowNumber}\n          $isFirstRow={rowIndex === 0 && !showHeader}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":["Cell","memo","data","rowIndex","columnIndex","style","props","cell","CellData","getSelectionType","focus","columnCount","rowCount","showRowNumber","showHeader","rowHeight","rowStart","rowAutoHeight","updateRowHeight","currentRowIndex","row","focusedRow","column","focusedColumn","isFocused","rightOfFocus","belowFocus","selectionType","type","rightSelection","belowSelection","rightOfSelectionBorder","belowSelectionBorder","selectionBorderLeft","selectionBorderTop","cellRef","useRef","useEffect","current","height","getBoundingClientRect","styleWithHeight","jsx","StyledCell","areEqual"],"mappings":"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"}
+{"version":3,"file":"Cell.cjs","sources":["../../../../src/components/Grid/Cell.tsx"],"sourcesContent":["import { memo, useEffect, useRef } from 'react';\nimport { GridChildComponentProps, areEqual } from 'react-window';\nimport { ItemDataType } from './types';\nimport { StyledCell } from './StyledCell';\n\ntype CellProps = GridChildComponentProps<ItemDataType> & {\n  width: number;\n};\n\nexport const Cell = memo(\n  ({ data, rowIndex, columnIndex, style, ...props }: CellProps) => {\n    const {\n      cell: CellData,\n      getSelectionType,\n      focus,\n      columnCount,\n      rowCount,\n      rowHeight,\n      rowStart,\n      rowAutoHeight,\n      updateRowHeight,\n    } = data;\n\n    const currentRowIndex = rowIndex + rowStart;\n    const { row: focusedRow, column: focusedColumn } = focus;\n    const isFocused = columnIndex === focusedColumn && currentRowIndex === focusedRow;\n    const rightOfFocus =\n      columnIndex - 1 === focusedColumn && currentRowIndex === focusedRow;\n    const belowFocus =\n      columnIndex === focusedColumn && currentRowIndex - 1 === focusedRow;\n\n    const selectionType = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightSelection = getSelectionType({\n      row: currentRowIndex,\n      column: columnIndex - 1,\n      type: 'cell',\n    });\n    const belowSelection = getSelectionType({\n      row: currentRowIndex - 1,\n      column: columnIndex,\n      type: 'cell',\n    });\n    const rightOfSelectionBorder =\n      (selectionType === 'selectDirect' || rightSelection === 'selectDirect') &&\n      selectionType !== rightSelection;\n    const belowSelectionBorder =\n      (selectionType === 'selectDirect' || belowSelection === 'selectDirect') &&\n      selectionType !== belowSelection;\n\n    const selectionBorderLeft = rightOfSelectionBorder || rightOfFocus || isFocused;\n    const selectionBorderTop = belowSelectionBorder || belowFocus || isFocused;\n\n    const cellRef = useRef<HTMLDivElement>(null);\n\n    useEffect(() => {\n      if (!rowAutoHeight || !cellRef.current) {\n        return;\n      }\n      const height = cellRef.current.getBoundingClientRect().height;\n      updateRowHeight(rowIndex, height);\n    }, [updateRowHeight, rowIndex, rowAutoHeight]);\n\n    const styleWithHeight = {\n      ...style,\n      height: 'auto',\n    };\n\n    return (\n      <div\n        style={styleWithHeight}\n        data-row={currentRowIndex}\n        data-column={columnIndex}\n        ref={cellRef}\n      >\n        <StyledCell\n          as={CellData}\n          rowIndex={currentRowIndex}\n          columnIndex={columnIndex}\n          type=\"row-cell\"\n          data-selected={isFocused || selectionType === 'selectDirect'}\n          data-focused={isFocused}\n          $isSelectedTop={selectionBorderTop}\n          $isSelectedLeft={selectionBorderLeft}\n          $isFocused={isFocused}\n          $isLastRow={rowCount - 1 === rowIndex}\n          $isLastColumn={columnCount - 1 === columnIndex}\n          $selectionType={selectionType}\n          $height={rowHeight}\n          data-grid-row={currentRowIndex}\n          data-grid-column={columnIndex}\n          $showBorder\n          $rowAutoHeight={rowAutoHeight}\n          {...props}\n        />\n      </div>\n    );\n  },\n  areEqual\n);\n"],"names":["memo","useRef","useEffect","jsx","StyledCell","areEqual"],"mappings":"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"}

package/dist/cjs/components/Grid/ColumnResizer.cjs

@@ -1,26 +1,22 @@
+require("./ColumnResizer.css");
 'use strict';
 
 Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
 
 const jsxRuntime = require('react/jsx-runtime');
 const react = require('react');
-const styledComponents = require('styled-components');
+const classVarianceAuthority = require('class-variance-authority');
+require('clsx');
+const ColumnResizer_module = require('./ColumnResizer.module.css.cjs');
 const lodashEs = require('lodash-es');
 const useResizingState = require('./useResizingState.cjs');
 
 const DOUBLE_CLICK_THRESHOLD_MSEC = 300;
-const ResizeSpan = styledComponents.styled.div.withConfig({
-  componentId: "sc-1r6e5v3-0"
-})(["top:", ";left:", ";z-index:1;position:absolute;height:", "px;cursor:col-resize;width:4px;overflow:auto;&:hover,&:active,&:hover{background:", ";}", ""], useResizingState.initialPosition.top, useResizingState.initialPosition.left, ({
-  $height
-}) => $height, ({
-  theme
-}) => theme.click.grid.header.cell.color.stroke.selectDirect, ({
-  $isPressed
-}) => $isPressed && `
-      height: 100%;
-      position: fixed;
-    `);
+const resizerVariants = classVarianceAuthority.cva(ColumnResizer_module.default["column-resizer"], {
+  variants: {
+    pressed: { true: ColumnResizer_module.default["column-resizer_pressed"] }
+  }
+});
 const ColumnResizer = ({
   height,
   onColumnResize: onColumnResizeProp,
@@ -59,53 +55,84 @@ const ColumnResizer = ({
       console.error(e);
     }
   }, [pointer, isPressed, columnIndex]);
-  const onPointerDown = react.useCallback((e) => {
-    e.stopPropagation();
-    e.preventDefault();
-    if (resizeRef.current) {
-      if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {
-        onColumnResize(columnIndex, 0, "auto");
+  const onPointerDown = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      e.preventDefault();
+      if (resizeRef.current) {
+        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);
       }
-      setPointer({
-        pointerId: e.pointerId,
-        initialClientX: e.clientX,
-        width: columnWidth
-      });
-      setIsPressed(columnIndex, true);
-      const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);
-      setPosition(pos);
-    }
-  }, [lastPressedTimestamp, setPointer, columnWidth, setIsPressed, columnIndex, getResizerPosition, setPosition, onColumnResize]);
-  const onPointerMove = react.useCallback((e) => {
-    e.stopPropagation();
-    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);
-    }
-  }, [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]);
-  return /* @__PURE__ */ jsxRuntime.jsx(ResizeSpan, { ref: resizeRef, $height: height, $isPressed: isPressed, onPointerDown, onPointerUp: (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    if (resizeRef.current && // 0 is a valid pointerId in Firefox
-    (pointer?.pointerId || pointer?.pointerId === 0)) {
-      const shouldCallResize = e.clientX !== pointer.initialClientX;
-      if (shouldCallResize) {
-        onColumnResize(columnIndex, pointer.width, "manual");
+    },
+    [
+      lastPressedTimestamp,
+      setPointer,
+      columnWidth,
+      setIsPressed,
+      columnIndex,
+      getResizerPosition,
+      setPosition,
+      onColumnResize
+    ]
+  );
+  const onPointerMove = react.useCallback(
+    (e) => {
+      e.stopPropagation();
+      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);
+      }
+    },
+    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: resizeRef,
+      className: resizerVariants({ pressed: isPressed }),
+      onPointerDown,
+      onPointerUp: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        if (resizeRef.current && // 0 is a valid pointerId in Firefox
+        (pointer?.pointerId || pointer?.pointerId === 0)) {
+          const shouldCallResize = e.clientX !== pointer.initialClientX;
+          if (shouldCallResize) {
+            onColumnResize(columnIndex, pointer.width, "manual");
+          }
+          setPosition(useResizingState.initialPosition);
+          setPointer(null);
+          setIsPressed(columnIndex, false);
+        }
+      },
+      onPointerMove,
+      onPointerCancel: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        setPosition(useResizingState.initialPosition);
+        setPointer(null);
+        setIsPressed(columnIndex, false);
+      },
+      onClick: (e) => e.stopPropagation(),
+      "data-resize": true,
+      style: {
+        "--column-resizer-height": `${height}px`,
+        ...position
       }
-      setPosition(useResizingState.initialPosition);
-      setPointer(null);
-      setIsPressed(columnIndex, false);
     }
-  }, onPointerMove, onPointerCancel: (e) => {
-    e.preventDefault();
-    e.stopPropagation();
-    setPosition(useResizingState.initialPosition);
-    setPointer(null);
-    setIsPressed(columnIndex, false);
-  }, onClick: (e) => e.stopPropagation(), "data-resize": true, style: position });
+  );
 };
 
 exports.default = ColumnResizer;

package/dist/cjs/components/Grid/ColumnResizer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnResizer.cjs","sources":["../../../../src/components/Grid/ColumnResizer.tsx"],"sourcesContent":["import { PointerEventHandler, useCallback, useEffect, useRef } from 'react';\nimport { styled } from 'styled-components';\nimport { ColumnResizeFn, GetResizerPositionFn } from './types';\nimport { throttle } from 'lodash-es';\nimport { initialPosition, ResizingState } from './useResizingState';\n\nconst DOUBLE_CLICK_THRESHOLD_MSEC = 300;\n\nconst ResizeSpan = styled.div<{ $height: number; $isPressed: boolean }>`\n  top: ${initialPosition.top};\n  left: ${initialPosition.left};\n  z-index: 1;\n  position: absolute;\n  height: ${({ $height }) => $height}px;\n  cursor: col-resize;\n  width: 4px;\n  overflow: auto;\n  &:hover,\n  &:active,\n  &:hover {\n    background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect};\n  }\n  ${({ $isPressed }) =>\n    $isPressed &&\n    `\n      height: 100%;\n      position: fixed;\n    `}\n`;\n\ninterface Props {\n  height: number;\n  onColumnResize: ColumnResizeFn;\n  columnIndex: number;\n  getResizerPosition: GetResizerPositionFn;\n  columnWidth: number;\n  resizingState: ResizingState;\n}\n\nconst ColumnResizer = ({\n  height,\n  onColumnResize: onColumnResizeProp,\n  columnIndex,\n  getResizerPosition,\n  columnWidth,\n  resizingState,\n}: Props) => {\n  const resizeRef = useRef<HTMLDivElement>(null);\n  const {\n    pointer,\n    setPointer,\n    getIsPressed,\n    setIsPressed,\n    getPosition,\n    setPosition,\n    lastPressedTimestamp,\n  } = resizingState;\n  const isPressed = getIsPressed(columnIndex);\n  const position = getPosition(columnIndex);\n  const onColumnResize = throttle(onColumnResizeProp, 1000);\n\n  useEffect(() => {\n    // Capture the pointer when pressed to ensure we receive move events outside the element.\n    // Capturing must be properly handled when the component unmounts and mounts again,\n    // based on its pressed state.\n    const control = resizeRef.current;\n    if (!isPressed || !control || !pointer) {\n      return;\n    }\n    const pointerId = pointer.pointerId;\n    try {\n      control.setPointerCapture(pointerId);\n      return () => {\n        if (control.hasPointerCapture(pointerId)) {\n          control.releasePointerCapture(pointerId);\n        }\n      };\n    } catch (e) {\n      console.error(e);\n    }\n  }, [pointer, isPressed, columnIndex]);\n\n  /**\n   * Handler for pointer down events to initiate resizing or auto-sizing on double-click.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (resizeRef.current) {\n        // We cannot detect double-click with onDoubleClick event,\n        // because this component might be unmounted before the second click and mounted again.\n        // We keep track of the last click timestamp and check if it was a double-click.\n        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {\n          // Auto-size the column on double click.\n          onColumnResize(columnIndex, 0, 'auto');\n        }\n        setPointer({\n          pointerId: e.pointerId,\n          initialClientX: e.clientX,\n          width: columnWidth,\n        });\n        setIsPressed(columnIndex, true);\n        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);\n        setPosition(pos);\n      }\n    },\n    [\n      lastPressedTimestamp,\n      setPointer,\n      columnWidth,\n      setIsPressed,\n      columnIndex,\n      getResizerPosition,\n      setPosition,\n      onColumnResize,\n    ]\n  );\n\n  /**\n   * Handler for pointer move events to update the column width as the user drags.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (isPressed && pointer) {\n        const width = columnWidth + (e.clientX - pointer.initialClientX);\n        const pos = getResizerPosition(e.clientX, width, columnIndex);\n        setPosition(pos);\n        // Ensure minimum width of 50px\n        pointer.width = Math.max(width, 50);\n      }\n    },\n    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]\n  );\n\n  return (\n    <ResizeSpan\n      ref={resizeRef}\n      $height={height}\n      $isPressed={isPressed}\n      onPointerDown={onPointerDown}\n      onPointerUp={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (\n          resizeRef.current &&\n          // 0 is a valid pointerId in Firefox\n          (pointer?.pointerId || pointer?.pointerId === 0)\n        ) {\n          const shouldCallResize = e.clientX !== pointer.initialClientX;\n          if (shouldCallResize) {\n            onColumnResize(columnIndex, pointer.width, 'manual');\n          }\n          setPosition(initialPosition);\n          setPointer(null);\n          setIsPressed(columnIndex, false);\n        }\n      }}\n      onPointerMove={onPointerMove}\n      onPointerCancel={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        setPosition(initialPosition);\n        setPointer(null);\n        setIsPressed(columnIndex, false);\n      }}\n      onClick={e => e.stopPropagation()}\n      data-resize\n      style={position}\n    />\n  );\n};\n\nexport default ColumnResizer;\n"],"names":["DOUBLE_CLICK_THRESHOLD_MSEC","ResizeSpan","styled","div","withConfig","componentId","initialPosition","top","left","$height","theme","click","grid","header","cell","color","stroke","selectDirect","$isPressed","ColumnResizer","height","onColumnResize","onColumnResizeProp","columnIndex","getResizerPosition","columnWidth","resizingState","resizeRef","useRef","pointer","setPointer","getIsPressed","setIsPressed","getPosition","setPosition","lastPressedTimestamp","isPressed","position","throttle","useEffect","control","current","pointerId","setPointerCapture","hasPointerCapture","releasePointerCapture","e","console","error","onPointerDown","useCallback","stopPropagation","preventDefault","Date","now","initialClientX","clientX","width","pos","onPointerMove","Math","max","jsx","shouldCallResize"],"mappings":"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"}
+{"version":3,"file":"ColumnResizer.cjs","sources":["../../../../src/components/Grid/ColumnResizer.tsx"],"sourcesContent":["import {\n  CSSProperties,\n  PointerEventHandler,\n  useCallback,\n  useEffect,\n  useRef,\n} from 'react';\nimport { cva } from '@/lib/cva';\nimport styles from './ColumnResizer.module.css';\nimport { ColumnResizeFn, GetResizerPositionFn } from './types';\nimport { throttle } from 'lodash-es';\nimport { initialPosition, ResizingState } from './useResizingState';\n\nconst DOUBLE_CLICK_THRESHOLD_MSEC = 300;\n\nconst resizerVariants = cva(styles['column-resizer'], {\n  variants: {\n    pressed: { true: styles['column-resizer_pressed'] },\n  },\n});\n\ninterface Props {\n  height: number;\n  onColumnResize: ColumnResizeFn;\n  columnIndex: number;\n  getResizerPosition: GetResizerPositionFn;\n  columnWidth: number;\n  resizingState: ResizingState;\n}\n\nconst ColumnResizer = ({\n  height,\n  onColumnResize: onColumnResizeProp,\n  columnIndex,\n  getResizerPosition,\n  columnWidth,\n  resizingState,\n}: Props) => {\n  const resizeRef = useRef<HTMLDivElement>(null);\n  const {\n    pointer,\n    setPointer,\n    getIsPressed,\n    setIsPressed,\n    getPosition,\n    setPosition,\n    lastPressedTimestamp,\n  } = resizingState;\n  const isPressed = getIsPressed(columnIndex);\n  const position = getPosition(columnIndex);\n  const onColumnResize = throttle(onColumnResizeProp, 1000);\n\n  useEffect(() => {\n    // Capture the pointer when pressed to ensure we receive move events outside the element.\n    // Capturing must be properly handled when the component unmounts and mounts again,\n    // based on its pressed state.\n    const control = resizeRef.current;\n    if (!isPressed || !control || !pointer) {\n      return;\n    }\n    const pointerId = pointer.pointerId;\n    try {\n      control.setPointerCapture(pointerId);\n      return () => {\n        if (control.hasPointerCapture(pointerId)) {\n          control.releasePointerCapture(pointerId);\n        }\n      };\n    } catch (e) {\n      console.error(e);\n    }\n  }, [pointer, isPressed, columnIndex]);\n\n  /**\n   * Handler for pointer down events to initiate resizing or auto-sizing on double-click.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerDown: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (resizeRef.current) {\n        // We cannot detect double-click with onDoubleClick event,\n        // because this component might be unmounted before the second click and mounted again.\n        // We keep track of the last click timestamp and check if it was a double-click.\n        if (lastPressedTimestamp > Date.now() - DOUBLE_CLICK_THRESHOLD_MSEC) {\n          // Auto-size the column on double click.\n          onColumnResize(columnIndex, 0, 'auto');\n        }\n        setPointer({\n          pointerId: e.pointerId,\n          initialClientX: e.clientX,\n          width: columnWidth,\n        });\n        setIsPressed(columnIndex, true);\n        const pos = getResizerPosition(e.clientX, columnWidth, columnIndex);\n        setPosition(pos);\n      }\n    },\n    [\n      lastPressedTimestamp,\n      setPointer,\n      columnWidth,\n      setIsPressed,\n      columnIndex,\n      getResizerPosition,\n      setPosition,\n      onColumnResize,\n    ]\n  );\n\n  /**\n   * Handler for pointer move events to update the column width as the user drags.\n   * @type {PointerEventHandler<HTMLDivElement>}\n   */\n  const onPointerMove: PointerEventHandler<HTMLDivElement> = useCallback(\n    e => {\n      e.stopPropagation();\n      e.preventDefault();\n      if (isPressed && pointer) {\n        const width = columnWidth + (e.clientX - pointer.initialClientX);\n        const pos = getResizerPosition(e.clientX, width, columnIndex);\n        setPosition(pos);\n        // Ensure minimum width of 50px\n        pointer.width = Math.max(width, 50);\n      }\n    },\n    [pointer, isPressed, columnWidth, getResizerPosition, columnIndex, setPosition]\n  );\n\n  return (\n    <div\n      ref={resizeRef}\n      className={resizerVariants({ pressed: isPressed })}\n      onPointerDown={onPointerDown}\n      onPointerUp={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        if (\n          resizeRef.current &&\n          // 0 is a valid pointerId in Firefox\n          (pointer?.pointerId || pointer?.pointerId === 0)\n        ) {\n          const shouldCallResize = e.clientX !== pointer.initialClientX;\n          if (shouldCallResize) {\n            onColumnResize(columnIndex, pointer.width, 'manual');\n          }\n          setPosition(initialPosition);\n          setPointer(null);\n          setIsPressed(columnIndex, false);\n        }\n      }}\n      onPointerMove={onPointerMove}\n      onPointerCancel={e => {\n        e.preventDefault();\n        e.stopPropagation();\n        setPosition(initialPosition);\n        setPointer(null);\n        setIsPressed(columnIndex, false);\n      }}\n      onClick={e => e.stopPropagation()}\n      data-resize\n      style={\n        {\n          '--column-resizer-height': `${height}px`,\n          ...position,\n        } as CSSProperties\n      }\n    />\n  );\n};\n\nexport default ColumnResizer;\n"],"names":["cva","styles","useRef","throttle","useEffect","useCallback","jsx","initialPosition"],"mappings":"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"}

package/dist/cjs/components/Grid/ColumnResizer.css

@@ -0,0 +1,23 @@
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.column-resizer__8f12T {
+  position: absolute;
+  z-index: 1;
+  top: 0;
+  left: calc(100% - 4px);
+  width: 4px;
+  height: var(--column-resizer-height);
+  overflow: auto;
+  cursor: col-resize;
+}
+
+.column-resizer__8f12T:hover,
+.column-resizer__8f12T:active {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+.column-resizer_pressed__JGAln {
+  position: fixed;
+  height: 100%;
+}
+}

package/dist/cjs/components/Grid/ColumnResizer.module.css.cjs

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const styles = {
+	"column-resizer": "column-resizer__8f12T",
+	"column-resizer_pressed": "column-resizer_pressed__JGAln"
+};
+
+exports.default = styles;
+//# sourceMappingURL=ColumnResizer.module.css.cjs.map

package/dist/cjs/components/Grid/ColumnResizer.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"ColumnResizer.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;"}

package/dist/cjs/components/Grid/Grid.css

@@ -0,0 +1,35 @@
+@layer clickui {/*
+ * `.grid` is the Grid's outer container. It is rendered as the ContextMenu.Trigger
+ * (the root element the whole grid mounts into), which is why the trigger carries
+ * the grid's own box styling rather than a context-menu-specific class.
+ */
+.grid__h49fk {
+  width: 100%;
+  height: var(--grid-height, 100%);
+  overflow: hidden;
+  border-radius: var(--grid-radius);
+  background: var(--click-grid-body-cell-color-background-default);
+  outline: none;
+}
+
+.grid_bordered__kFqF5 {
+  border: 1px solid var(--click-grid-header-cell-color-stroke-default);
+}
+
+/* react-window's inner element that lays out the scrolling cell grid */
+.grid__inner__IZhj9 {
+  display: flex;
+  flex-direction: column-reverse;
+  /* stylelint-disable-next-line plugin/no-unsupported-browser-features -- the original styled rule used overflow-anchor */
+  overflow-anchor: none;
+  user-select: none;
+}
+
+.grid__data__Mn4TK {
+  position: absolute;
+  top: 0;
+  left: 0;
+  margin-top: var(--grid-data-top, 0);
+  margin-left: var(--grid-data-left, 0);
+}
+}

package/dist/cjs/components/Grid/Grid.module.css.cjs

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+const grid = "grid__h49fk";
+const grid_bordered = "grid_bordered__kFqF5";
+const grid__inner = "grid__inner__IZhj9";
+const grid__data = "grid__data__Mn4TK";
+const styles = {
+	grid: grid,
+	grid_bordered: grid_bordered,
+	grid__inner: grid__inner,
+	grid__data: grid__data
+};
+
+exports.default = styles;
+exports.grid = grid;
+exports.grid__data = grid__data;
+exports.grid__inner = grid__inner;
+exports.grid_bordered = grid_bordered;
+//# sourceMappingURL=Grid.module.css.cjs.map

package/dist/cjs/components/Grid/Grid.module.css.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"Grid.module.css.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;"}