@clickhouse/click-ui 0.9.0 → 1.0.0-rc2

package/dist/esm/components/Grid/ColumnResizer.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColumnResizer.js","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":["DOUBLE_CLICK_THRESHOLD_MSEC","resizerVariants","cva","styles","variants","pressed","true","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","shouldCallResize","initialPosition"],"mappings":"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"}
+{"version":3,"file":"ColumnResizer.js","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":[],"mappings":"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"}

package/dist/esm/components/Grid/Grid.css

@@ -1,4 +1,4 @@
-/*
+@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.
@@ -32,3 +32,4 @@
   margin-top: var(--grid-data-top, 0);
   margin-left: var(--grid-data-left, 0);
 }
+}

package/dist/esm/components/Grid/Header.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
 
 .header__hXzAE {
   display: flex;
@@ -42,3 +42,4 @@
 .header__row-column_scrolled-horizontal__QZO4p {
   box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
 }
+}

package/dist/esm/components/Grid/Header.js

@@ -31,14 +31,52 @@ const Column = ({
   const isSelected = selectionType === "selectDirect";
   const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
   const columnWidth = getColumnWidth(columnIndex);
-  return /* @__PURE__ */ jsxs("div", { className: styles["header__cell"], style: {
-    "--header-cell-width": toCssSize(columnWidth),
-    "--header-cell-height": `${height}px`,
-    "--header-cell-left": `${columnPosition}px`
-  }, "data-header": columnIndex, children: [
-    /* @__PURE__ */ jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $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 })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: styles["header__cell"],
+      style: {
+        "--header-cell-width": toCssSize(columnWidth),
+        "--header-cell-height": `${height}px`,
+        "--header-cell-left": `${columnPosition}px`
+      },
+      "data-header": columnIndex,
+      children: [
+        /* @__PURE__ */ jsx(
+          StyledCell,
+          {
+            $type: "header",
+            as: cell,
+            columnIndex,
+            type: "header-cell",
+            $selectionType: selectionType,
+            $isLastColumn: isLastColumn,
+            $isFocused: false,
+            $isSelectedLeft: isSelectedLeft,
+            $isSelectedTop: isSelected,
+            $isLastRow: false,
+            $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 = ({
   scrolledVertical,
@@ -61,20 +99,79 @@ const Header = ({
   const selectedAllType = getSelectionType({
     type: "all"
   });
-  return /* @__PURE__ */ jsxs("div", { className: cn(styles["header"], scrolledVertical && styles["header_scrolled-vertical"]), style: {
-    "--header-height": `${height}px`
-  }, children: [
-    /* @__PURE__ */ jsx("div", { className: styles["header__scroll-area"], style: {
-      "--header-scroll-area-left": `${rowNumberWidth}px`
-    }, children: Array.from({
-      length: maxColumn - minColumn + 1
-    }, (_, index) => minColumn + index).map((columnIndex) => /* @__PURE__ */ jsx(Column, { getSelectionType, columnIndex, getColumnWidth, getColumnHorizontalPosition, cell, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
-    showRowNumber && /* @__PURE__ */ jsx("div", { className: cn(styles["header__cell"], styles["header__row-column"], scrolledHorizontal && styles["header__row-column_scrolled-horizontal"]), style: {
-      "--header-cell-width": toCssSize(rowNumberWidth),
-      "--header-cell-height": `${height}px`,
-      "--header-cell-left": "0px"
-    }, children: /* @__PURE__ */ jsx(StyledCell, { "data-align": "right", "data-selected": selectedAllType === "selectDirect", $type: "header", $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: "#" }) })
-  ] });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        styles["header"],
+        scrolledVertical && styles["header_scrolled-vertical"]
+      ),
+      style: { "--header-height": `${height}px` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: styles["header__scroll-area"],
+            style: { "--header-scroll-area-left": `${rowNumberWidth}px` },
+            children: Array.from(
+              { length: maxColumn - minColumn + 1 },
+              (_, index) => minColumn + index
+            ).map((columnIndex) => /* @__PURE__ */ jsx(
+              Column,
+              {
+                getSelectionType,
+                columnIndex,
+                getColumnWidth,
+                getColumnHorizontalPosition,
+                cell,
+                isLastColumn: columnIndex + 1 === columnCount,
+                onColumnResize,
+                height,
+                getResizerPosition,
+                showBorder,
+                resizingState
+              },
+              `header-${columnIndex}`
+            ))
+          }
+        ),
+        showRowNumber && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              styles["header__cell"],
+              styles["header__row-column"],
+              scrolledHorizontal && styles["header__row-column_scrolled-horizontal"]
+            ),
+            style: {
+              "--header-cell-width": toCssSize(rowNumberWidth),
+              "--header-cell-height": `${height}px`,
+              "--header-cell-left": "0px"
+            },
+            children: /* @__PURE__ */ jsx(
+              StyledCell,
+              {
+                "data-align": "right",
+                "data-selected": selectedAllType === "selectDirect",
+                $type: "header",
+                $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: "#"
+              }
+            )
+          }
+        )
+      ]
+    }
+  );
 };
 
 export { Header as default };

package/dist/esm/components/Grid/Header.js.map

@@ -1 +1 @@
-{"version":3,"file":"Header.js","sources":["../../../../src/components/Grid/Header.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './Header.module.css';\nimport {\n  CellProps,\n  ColumnResizeFn,\n  GetResizerPositionFn,\n  SelectionTypeFn,\n} from './types';\nimport { StyledCell } from './StyledCell';\nimport ColumnResizer from './ColumnResizer';\nimport { ResizingState } from './useResizingState';\n\ninterface HeaderProps {\n  showRowNumber: boolean;\n  rowNumberWidth: number;\n  minColumn: number;\n  maxColumn: number;\n  height: number;\n  getColumnWidth: (index: number) => number;\n  cell: CellProps;\n  getSelectionType: SelectionTypeFn;\n  columnCount: number;\n  onColumnResize: ColumnResizeFn;\n  getColumnHorizontalPosition: (columnIndex: number) => number;\n  scrolledVertical: boolean;\n  getResizerPosition: GetResizerPositionFn;\n  showBorder: boolean;\n  scrolledHorizontal: boolean;\n  resizingState: ResizingState;\n}\n\ninterface ColumnProps extends Pick<\n  HeaderProps,\n  | 'cell'\n  | 'getSelectionType'\n  | 'onColumnResize'\n  | 'getColumnWidth'\n  | 'height'\n  | 'getResizerPosition'\n  | 'showBorder'\n  | 'getColumnHorizontalPosition'\n  | 'resizingState'\n> {\n  columnIndex: number;\n  isLastColumn: boolean;\n}\n\nconst toCssSize = ($width: string | number): string =>\n  typeof $width === 'string' ? $width : `${$width}px`;\n\nconst Column = ({\n  columnIndex,\n  cell,\n  getColumnWidth,\n  getColumnHorizontalPosition,\n  getSelectionType,\n  isLastColumn,\n  onColumnResize,\n  height,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: ColumnProps) => {\n  const selectionType = getSelectionType({\n    column: columnIndex,\n    type: 'column',\n  });\n  const leftSelectionType = getSelectionType({\n    column: columnIndex - 1,\n    type: 'column',\n  });\n  const columnPosition = getColumnHorizontalPosition(columnIndex);\n\n  const isSelected = selectionType === 'selectDirect';\n  const isSelectedLeft =\n    (leftSelectionType === 'selectDirect' || isSelected) &&\n    leftSelectionType !== selectionType;\n\n  const columnWidth = getColumnWidth(columnIndex);\n  return (\n    <div\n      className={styles['header__cell']}\n      style={\n        {\n          '--header-cell-width': toCssSize(columnWidth),\n          '--header-cell-height': `${height}px`,\n          '--header-cell-left': `${columnPosition}px`,\n        } as CSSProperties\n      }\n      data-header={columnIndex}\n    >\n      <StyledCell\n        $type=\"header\"\n        as={cell}\n        columnIndex={columnIndex}\n        type=\"header-cell\"\n        $selectionType={selectionType}\n        $isLastColumn={isLastColumn}\n        $isFocused={false}\n        $isSelectedLeft={isSelectedLeft}\n        $isSelectedTop={isSelected}\n        $isLastRow={false}\n        $height={height}\n        data-grid-row={-1}\n        data-grid-column={columnIndex}\n        data-selected={isSelected}\n        $showBorder={showBorder}\n        width={columnWidth}\n      />\n      <ColumnResizer\n        height={height}\n        onColumnResize={onColumnResize}\n        columnIndex={columnIndex}\n        getResizerPosition={getResizerPosition}\n        columnWidth={columnWidth}\n        resizingState={resizingState}\n      />\n    </div>\n  );\n};\n\nconst Header = ({\n  scrolledVertical,\n  scrolledHorizontal,\n  showRowNumber,\n  rowNumberWidth,\n  minColumn,\n  maxColumn,\n  height,\n  getColumnWidth,\n  cell,\n  columnCount,\n  getSelectionType,\n  onColumnResize,\n  getColumnHorizontalPosition,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: HeaderProps) => {\n  const selectedAllType = getSelectionType({\n    type: 'all',\n  });\n  return (\n    <div\n      className={cn(\n        styles['header'],\n        scrolledVertical && styles['header_scrolled-vertical']\n      )}\n      style={{ '--header-height': `${height}px` } as CSSProperties}\n    >\n      <div\n        className={styles['header__scroll-area']}\n        style={{ '--header-scroll-area-left': `${rowNumberWidth}px` } as CSSProperties}\n      >\n        {Array.from(\n          { length: maxColumn - minColumn + 1 },\n          (_, index) => minColumn + index\n        ).map(columnIndex => (\n          <Column\n            key={`header-${columnIndex}`}\n            getSelectionType={getSelectionType}\n            columnIndex={columnIndex}\n            getColumnWidth={getColumnWidth}\n            getColumnHorizontalPosition={getColumnHorizontalPosition}\n            cell={cell}\n            isLastColumn={columnIndex + 1 === columnCount}\n            onColumnResize={onColumnResize}\n            height={height}\n            getResizerPosition={getResizerPosition}\n            showBorder={showBorder}\n            resizingState={resizingState}\n          />\n        ))}\n      </div>\n      {showRowNumber && (\n        <div\n          className={cn(\n            styles['header__cell'],\n            styles['header__row-column'],\n            scrolledHorizontal && styles['header__row-column_scrolled-horizontal']\n          )}\n          style={\n            {\n              '--header-cell-width': toCssSize(rowNumberWidth),\n              '--header-cell-height': `${height}px`,\n              '--header-cell-left': '0px',\n            } as CSSProperties\n          }\n        >\n          <StyledCell\n            data-align=\"right\"\n            data-selected={selectedAllType === 'selectDirect'}\n            $type=\"header\"\n            $selectionType={selectedAllType}\n            $isLastRow={false}\n            $isLastColumn={false}\n            $height={height}\n            $isFocused={false}\n            $isSelectedLeft={false}\n            $isSelectedTop={false}\n            data-grid-row={-1}\n            data-grid-column={-1}\n            $showBorder={showBorder}\n          >\n            #\n          </StyledCell>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Header;\n"],"names":["toCssSize","$width","Column","columnIndex","cell","getColumnWidth","getColumnHorizontalPosition","getSelectionType","isLastColumn","onColumnResize","height","getResizerPosition","showBorder","resizingState","selectionType","column","type","leftSelectionType","columnPosition","isSelected","isSelectedLeft","columnWidth","styles","Header","scrolledVertical","scrolledHorizontal","showRowNumber","rowNumberWidth","minColumn","maxColumn","columnCount","selectedAllType","cn","Array","from","length","_","index","map"],"mappings":"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"}
+{"version":3,"file":"Header.js","sources":["../../../../src/components/Grid/Header.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './Header.module.css';\nimport {\n  CellProps,\n  ColumnResizeFn,\n  GetResizerPositionFn,\n  SelectionTypeFn,\n} from './types';\nimport { StyledCell } from './StyledCell';\nimport ColumnResizer from './ColumnResizer';\nimport { ResizingState } from './useResizingState';\n\ninterface HeaderProps {\n  showRowNumber: boolean;\n  rowNumberWidth: number;\n  minColumn: number;\n  maxColumn: number;\n  height: number;\n  getColumnWidth: (index: number) => number;\n  cell: CellProps;\n  getSelectionType: SelectionTypeFn;\n  columnCount: number;\n  onColumnResize: ColumnResizeFn;\n  getColumnHorizontalPosition: (columnIndex: number) => number;\n  scrolledVertical: boolean;\n  getResizerPosition: GetResizerPositionFn;\n  showBorder: boolean;\n  scrolledHorizontal: boolean;\n  resizingState: ResizingState;\n}\n\ninterface ColumnProps extends Pick<\n  HeaderProps,\n  | 'cell'\n  | 'getSelectionType'\n  | 'onColumnResize'\n  | 'getColumnWidth'\n  | 'height'\n  | 'getResizerPosition'\n  | 'showBorder'\n  | 'getColumnHorizontalPosition'\n  | 'resizingState'\n> {\n  columnIndex: number;\n  isLastColumn: boolean;\n}\n\nconst toCssSize = ($width: string | number): string =>\n  typeof $width === 'string' ? $width : `${$width}px`;\n\nconst Column = ({\n  columnIndex,\n  cell,\n  getColumnWidth,\n  getColumnHorizontalPosition,\n  getSelectionType,\n  isLastColumn,\n  onColumnResize,\n  height,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: ColumnProps) => {\n  const selectionType = getSelectionType({\n    column: columnIndex,\n    type: 'column',\n  });\n  const leftSelectionType = getSelectionType({\n    column: columnIndex - 1,\n    type: 'column',\n  });\n  const columnPosition = getColumnHorizontalPosition(columnIndex);\n\n  const isSelected = selectionType === 'selectDirect';\n  const isSelectedLeft =\n    (leftSelectionType === 'selectDirect' || isSelected) &&\n    leftSelectionType !== selectionType;\n\n  const columnWidth = getColumnWidth(columnIndex);\n  return (\n    <div\n      className={styles['header__cell']}\n      style={\n        {\n          '--header-cell-width': toCssSize(columnWidth),\n          '--header-cell-height': `${height}px`,\n          '--header-cell-left': `${columnPosition}px`,\n        } as CSSProperties\n      }\n      data-header={columnIndex}\n    >\n      <StyledCell\n        $type=\"header\"\n        as={cell}\n        columnIndex={columnIndex}\n        type=\"header-cell\"\n        $selectionType={selectionType}\n        $isLastColumn={isLastColumn}\n        $isFocused={false}\n        $isSelectedLeft={isSelectedLeft}\n        $isSelectedTop={isSelected}\n        $isLastRow={false}\n        $height={height}\n        data-grid-row={-1}\n        data-grid-column={columnIndex}\n        data-selected={isSelected}\n        $showBorder={showBorder}\n        width={columnWidth}\n      />\n      <ColumnResizer\n        height={height}\n        onColumnResize={onColumnResize}\n        columnIndex={columnIndex}\n        getResizerPosition={getResizerPosition}\n        columnWidth={columnWidth}\n        resizingState={resizingState}\n      />\n    </div>\n  );\n};\n\nconst Header = ({\n  scrolledVertical,\n  scrolledHorizontal,\n  showRowNumber,\n  rowNumberWidth,\n  minColumn,\n  maxColumn,\n  height,\n  getColumnWidth,\n  cell,\n  columnCount,\n  getSelectionType,\n  onColumnResize,\n  getColumnHorizontalPosition,\n  getResizerPosition,\n  showBorder,\n  resizingState,\n}: HeaderProps) => {\n  const selectedAllType = getSelectionType({\n    type: 'all',\n  });\n  return (\n    <div\n      className={cn(\n        styles['header'],\n        scrolledVertical && styles['header_scrolled-vertical']\n      )}\n      style={{ '--header-height': `${height}px` } as CSSProperties}\n    >\n      <div\n        className={styles['header__scroll-area']}\n        style={{ '--header-scroll-area-left': `${rowNumberWidth}px` } as CSSProperties}\n      >\n        {Array.from(\n          { length: maxColumn - minColumn + 1 },\n          (_, index) => minColumn + index\n        ).map(columnIndex => (\n          <Column\n            key={`header-${columnIndex}`}\n            getSelectionType={getSelectionType}\n            columnIndex={columnIndex}\n            getColumnWidth={getColumnWidth}\n            getColumnHorizontalPosition={getColumnHorizontalPosition}\n            cell={cell}\n            isLastColumn={columnIndex + 1 === columnCount}\n            onColumnResize={onColumnResize}\n            height={height}\n            getResizerPosition={getResizerPosition}\n            showBorder={showBorder}\n            resizingState={resizingState}\n          />\n        ))}\n      </div>\n      {showRowNumber && (\n        <div\n          className={cn(\n            styles['header__cell'],\n            styles['header__row-column'],\n            scrolledHorizontal && styles['header__row-column_scrolled-horizontal']\n          )}\n          style={\n            {\n              '--header-cell-width': toCssSize(rowNumberWidth),\n              '--header-cell-height': `${height}px`,\n              '--header-cell-left': '0px',\n            } as CSSProperties\n          }\n        >\n          <StyledCell\n            data-align=\"right\"\n            data-selected={selectedAllType === 'selectDirect'}\n            $type=\"header\"\n            $selectionType={selectedAllType}\n            $isLastRow={false}\n            $isLastColumn={false}\n            $height={height}\n            $isFocused={false}\n            $isSelectedLeft={false}\n            $isSelectedTop={false}\n            data-grid-row={-1}\n            data-grid-column={-1}\n            $showBorder={showBorder}\n          >\n            #\n          </StyledCell>\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Header;\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Grid/RowNumberColumn.css

@@ -1,4 +1,4 @@
-.row-number-column__n-aQm {
+@layer clickui {.row-number-column__n-aQm {
   position: sticky;
   top: var(--row-number-column-top);
   left: 0;
@@ -20,3 +20,4 @@
   white-space: nowrap;
   text-overflow: ellipsis;
 }
+}

package/dist/esm/components/Grid/RowNumberColumn.js

@@ -24,10 +24,37 @@ const RowNumber = ({
     type: "row"
   });
   const isSelectedTop = (topSelectionType === "selectDirect" || isSelected) && topSelectionType !== selectionType;
-  return /* @__PURE__ */ jsx("div", { className: styles["row-number-column__cell"], style: {
-    "--row-number-cell-top": `${rowHeight * rowIndex}px`,
-    "--row-number-cell-height": rowAutoHeight ? "100%" : `${rowHeight}px`
-  }, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $type: "header", $isFocused: false, $isLastRow: isLastRow, $isSelectedLeft: isSelected, $isSelectedTop: isSelectedTop, $rowAutoHeight: rowAutoHeight, "data-selected": isSelected, "data-grid-row": currentRowIndex, "data-grid-column": -1, "data-testid": `header-cell-${currentRowIndex}-x`, $showBorder: showBorder, "data-align": "right", children: currentRowIndex }) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles["row-number-column__cell"],
+      style: {
+        "--row-number-cell-top": `${rowHeight * rowIndex}px`,
+        "--row-number-cell-height": rowAutoHeight ? "100%" : `${rowHeight}px`
+      },
+      children: /* @__PURE__ */ jsx(
+        StyledCell,
+        {
+          $height: rowHeight,
+          $isLastColumn: false,
+          $selectionType: selectionType,
+          $type: "header",
+          $isFocused: false,
+          $isLastRow: isLastRow,
+          $isSelectedLeft: isSelected,
+          $isSelectedTop: isSelectedTop,
+          $rowAutoHeight: rowAutoHeight,
+          "data-selected": isSelected,
+          "data-grid-row": currentRowIndex,
+          "data-grid-column": -1,
+          "data-testid": `header-cell-${currentRowIndex}-x`,
+          $showBorder: showBorder,
+          "data-align": "right",
+          children: currentRowIndex
+        }
+      )
+    }
+  );
 };
 const RowNumberColumn = ({
   minRow,
@@ -42,12 +69,34 @@ const RowNumberColumn = ({
   showBorder,
   rowAutoHeight
 }) => {
-  return /* @__PURE__ */ jsx("div", { className: cn(styles["row-number-column"], scrolledHorizontal && styles["row-number-column_scrolled-horizontal"]), style: {
-    "--row-number-column-top": `${headerHeight}px`,
-    "--row-number-column-width": `${rowWidth}px`
-  }, children: Array.from({
-    length: maxRow - minRow + 1
-  }, (_, index) => minRow + index).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, showBorder, rowStart, rowAutoHeight }, `row-number-${rowIndex}`)) });
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn(
+        styles["row-number-column"],
+        scrolledHorizontal && styles["row-number-column_scrolled-horizontal"]
+      ),
+      style: {
+        "--row-number-column-top": `${headerHeight}px`,
+        "--row-number-column-width": `${rowWidth}px`
+      },
+      children: Array.from({ length: maxRow - minRow + 1 }, (_, index) => minRow + index).map(
+        (rowIndex) => /* @__PURE__ */ jsx(
+          RowNumber,
+          {
+            getSelectionType,
+            rowHeight,
+            rowIndex,
+            isLastRow: rowIndex === rowCount,
+            showBorder,
+            rowStart,
+            rowAutoHeight
+          },
+          `row-number-${rowIndex}`
+        )
+      )
+    }
+  );
 };
 
 export { RowNumberColumn as default };

package/dist/esm/components/Grid/RowNumberColumn.js.map

@@ -1 +1 @@
-{"version":3,"file":"RowNumberColumn.js","sources":["../../../../src/components/Grid/RowNumberColumn.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './RowNumberColumn.module.css';\nimport { SelectionTypeFn } from './types';\nimport { StyledCell } from './StyledCell';\n\ninterface RowNumberColumnProps {\n  minRow: number;\n  maxRow: number;\n  rowHeight: number;\n  headerHeight: number;\n  rowWidth: number;\n  getSelectionType: SelectionTypeFn;\n  rowCount: number;\n  scrolledHorizontal: boolean;\n  rowStart: number;\n  showBorder: boolean;\n  rowAutoHeight?: boolean;\n}\ninterface RowNumberProps extends Pick<\n  RowNumberColumnProps,\n  'rowHeight' | 'getSelectionType' | 'showBorder' | 'rowStart'\n> {\n  rowIndex: number;\n  isLastRow: boolean;\n  rowAutoHeight?: boolean;\n}\nconst RowNumber = ({\n  rowIndex,\n  rowHeight,\n  getSelectionType,\n  isLastRow,\n  showBorder,\n  rowStart,\n  rowAutoHeight,\n}: RowNumberProps) => {\n  const currentRowIndex = rowIndex + rowStart;\n  const selectionType = getSelectionType({\n    row: currentRowIndex,\n    type: 'row',\n  });\n  const isSelected = selectionType === 'selectDirect';\n  const topSelectionType = getSelectionType({\n    row: currentRowIndex - 1,\n    type: 'row',\n  });\n  const isSelectedTop =\n    (topSelectionType === 'selectDirect' || isSelected) &&\n    topSelectionType !== selectionType;\n\n  return (\n    <div\n      className={styles['row-number-column__cell']}\n      style={\n        {\n          '--row-number-cell-top': `${rowHeight * rowIndex}px`,\n          '--row-number-cell-height': rowAutoHeight ? '100%' : `${rowHeight}px`,\n        } as CSSProperties\n      }\n    >\n      <StyledCell\n        $height={rowHeight}\n        $isLastColumn={false}\n        $selectionType={selectionType}\n        $type=\"header\"\n        $isFocused={false}\n        $isLastRow={isLastRow}\n        $isSelectedLeft={isSelected}\n        $isSelectedTop={isSelectedTop}\n        $rowAutoHeight={rowAutoHeight}\n        data-selected={isSelected}\n        data-grid-row={currentRowIndex}\n        data-grid-column={-1}\n        data-testid={`header-cell-${currentRowIndex}-x`}\n        $showBorder={showBorder}\n        data-align=\"right\"\n      >\n        {currentRowIndex}\n      </StyledCell>\n    </div>\n  );\n};\n\nconst RowNumberColumn = ({\n  minRow,\n  maxRow,\n  rowHeight,\n  headerHeight,\n  rowWidth,\n  getSelectionType,\n  rowCount,\n  scrolledHorizontal,\n  rowStart = 0,\n  showBorder,\n  rowAutoHeight,\n}: RowNumberColumnProps) => {\n  return (\n    <div\n      className={cn(\n        styles['row-number-column'],\n        scrolledHorizontal && styles['row-number-column_scrolled-horizontal']\n      )}\n      style={\n        {\n          '--row-number-column-top': `${headerHeight}px`,\n          '--row-number-column-width': `${rowWidth}px`,\n        } as CSSProperties\n      }\n    >\n      {Array.from({ length: maxRow - minRow + 1 }, (_, index) => minRow + index).map(\n        rowIndex => (\n          <RowNumber\n            key={`row-number-${rowIndex}`}\n            getSelectionType={getSelectionType}\n            rowHeight={rowHeight}\n            rowIndex={rowIndex}\n            isLastRow={rowIndex === rowCount}\n            showBorder={showBorder}\n            rowStart={rowStart}\n            rowAutoHeight={rowAutoHeight}\n          />\n        )\n      )}\n    </div>\n  );\n};\n\nexport default RowNumberColumn;\n"],"names":["RowNumber","rowIndex","rowHeight","getSelectionType","isLastRow","showBorder","rowStart","rowAutoHeight","currentRowIndex","selectionType","row","type","isSelected","topSelectionType","isSelectedTop","styles","RowNumberColumn","minRow","maxRow","headerHeight","rowWidth","rowCount","scrolledHorizontal","cn","Array","from","length","_","index","map"],"mappings":"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"}
+{"version":3,"file":"RowNumberColumn.js","sources":["../../../../src/components/Grid/RowNumberColumn.tsx"],"sourcesContent":["import { CSSProperties } from 'react';\nimport { cn } from '@/lib/cva';\nimport styles from './RowNumberColumn.module.css';\nimport { SelectionTypeFn } from './types';\nimport { StyledCell } from './StyledCell';\n\ninterface RowNumberColumnProps {\n  minRow: number;\n  maxRow: number;\n  rowHeight: number;\n  headerHeight: number;\n  rowWidth: number;\n  getSelectionType: SelectionTypeFn;\n  rowCount: number;\n  scrolledHorizontal: boolean;\n  rowStart: number;\n  showBorder: boolean;\n  rowAutoHeight?: boolean;\n}\ninterface RowNumberProps extends Pick<\n  RowNumberColumnProps,\n  'rowHeight' | 'getSelectionType' | 'showBorder' | 'rowStart'\n> {\n  rowIndex: number;\n  isLastRow: boolean;\n  rowAutoHeight?: boolean;\n}\nconst RowNumber = ({\n  rowIndex,\n  rowHeight,\n  getSelectionType,\n  isLastRow,\n  showBorder,\n  rowStart,\n  rowAutoHeight,\n}: RowNumberProps) => {\n  const currentRowIndex = rowIndex + rowStart;\n  const selectionType = getSelectionType({\n    row: currentRowIndex,\n    type: 'row',\n  });\n  const isSelected = selectionType === 'selectDirect';\n  const topSelectionType = getSelectionType({\n    row: currentRowIndex - 1,\n    type: 'row',\n  });\n  const isSelectedTop =\n    (topSelectionType === 'selectDirect' || isSelected) &&\n    topSelectionType !== selectionType;\n\n  return (\n    <div\n      className={styles['row-number-column__cell']}\n      style={\n        {\n          '--row-number-cell-top': `${rowHeight * rowIndex}px`,\n          '--row-number-cell-height': rowAutoHeight ? '100%' : `${rowHeight}px`,\n        } as CSSProperties\n      }\n    >\n      <StyledCell\n        $height={rowHeight}\n        $isLastColumn={false}\n        $selectionType={selectionType}\n        $type=\"header\"\n        $isFocused={false}\n        $isLastRow={isLastRow}\n        $isSelectedLeft={isSelected}\n        $isSelectedTop={isSelectedTop}\n        $rowAutoHeight={rowAutoHeight}\n        data-selected={isSelected}\n        data-grid-row={currentRowIndex}\n        data-grid-column={-1}\n        data-testid={`header-cell-${currentRowIndex}-x`}\n        $showBorder={showBorder}\n        data-align=\"right\"\n      >\n        {currentRowIndex}\n      </StyledCell>\n    </div>\n  );\n};\n\nconst RowNumberColumn = ({\n  minRow,\n  maxRow,\n  rowHeight,\n  headerHeight,\n  rowWidth,\n  getSelectionType,\n  rowCount,\n  scrolledHorizontal,\n  rowStart = 0,\n  showBorder,\n  rowAutoHeight,\n}: RowNumberColumnProps) => {\n  return (\n    <div\n      className={cn(\n        styles['row-number-column'],\n        scrolledHorizontal && styles['row-number-column_scrolled-horizontal']\n      )}\n      style={\n        {\n          '--row-number-column-top': `${headerHeight}px`,\n          '--row-number-column-width': `${rowWidth}px`,\n        } as CSSProperties\n      }\n    >\n      {Array.from({ length: maxRow - minRow + 1 }, (_, index) => minRow + index).map(\n        rowIndex => (\n          <RowNumber\n            key={`row-number-${rowIndex}`}\n            getSelectionType={getSelectionType}\n            rowHeight={rowHeight}\n            rowIndex={rowIndex}\n            isLastRow={rowIndex === rowCount}\n            showBorder={showBorder}\n            rowStart={rowStart}\n            rowAutoHeight={rowAutoHeight}\n          />\n        )\n      )}\n    </div>\n  );\n};\n\nexport default RowNumberColumn;\n"],"names":[],"mappings":"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"}

package/dist/esm/components/Grid/StyledCell.css

@@ -1,4 +1,4 @@
-/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
 
 /*
  * The original styled-component dispatches background / text colour / border
@@ -144,3 +144,4 @@
 .cell__overlay_row-auto-height__teKk1::before {
   border: none;
 }
+}

package/dist/esm/components/Grid/StyledCell.js

@@ -15,39 +15,17 @@ const cellVariants = cva(styles.cell, {
       selectDirect: styles["cell_selection_direct"],
       selectIndirect: styles["cell_selection_indirect"]
     },
-    noBorder: {
-      true: styles["cell_no-border"]
-    },
-    focused: {
-      true: styles.cell_focused
-    },
-    lastRow: {
-      true: styles["cell_last-row"]
-    },
-    lastColumn: {
-      true: styles["cell_last-column"]
-    },
-    rowAutoHeight: {
-      true: styles["cell_row-auto-height"]
-    },
-    overlay: {
-      true: styles.cell__overlay
-    },
-    overlayTop: {
-      true: styles["cell__overlay_selected_top"]
-    },
-    overlayLeft: {
-      true: styles["cell__overlay_selected_left"]
-    },
-    overlayBottom: {
-      true: styles["cell__overlay_selected_bottom"]
-    },
-    overlayRight: {
-      true: styles["cell__overlay_selected_right"]
-    },
-    overlayAutoHeight: {
-      true: styles["cell__overlay_row-auto-height"]
-    }
+    noBorder: { true: styles["cell_no-border"] },
+    focused: { true: styles.cell_focused },
+    lastRow: { true: styles["cell_last-row"] },
+    lastColumn: { true: styles["cell_last-column"] },
+    rowAutoHeight: { true: styles["cell_row-auto-height"] },
+    overlay: { true: styles.cell__overlay },
+    overlayTop: { true: styles["cell__overlay_selected_top"] },
+    overlayLeft: { true: styles["cell__overlay_selected_left"] },
+    overlayBottom: { true: styles["cell__overlay_selected_bottom"] },
+    overlayRight: { true: styles["cell__overlay_selected_right"] },
+    overlayAutoHeight: { true: styles["cell__overlay_row-auto-height"] }
   }
 });
 const StyledCell = ({
@@ -73,21 +51,32 @@ const StyledCell = ({
     height: $rowAutoHeight ? "100%" : `${$height}px`,
     ...style
   };
-  return /* @__PURE__ */ jsx(Component, { className: cn(cellVariants({
-    type: $type,
-    selection: $selectionType,
-    noBorder: $type === "header" && !$showBorder,
-    focused: $isFocused,
-    lastRow: $isLastRow,
-    lastColumn: $isLastColumn,
-    rowAutoHeight: !!$rowAutoHeight,
-    overlay: hasOverlay,
-    overlayTop: $isSelectedTop,
-    overlayLeft: $isSelectedLeft,
-    overlayBottom: $selectionType === "selectDirect" && $isLastRow,
-    overlayRight: $selectionType === "selectDirect" && $isLastColumn,
-    overlayAutoHeight: !!$rowAutoHeight
-  }), className), style: mergedStyle, ...props, children });
+  return /* @__PURE__ */ jsx(
+    Component,
+    {
+      className: cn(
+        cellVariants({
+          type: $type,
+          selection: $selectionType,
+          noBorder: $type === "header" && !$showBorder,
+          focused: $isFocused,
+          lastRow: $isLastRow,
+          lastColumn: $isLastColumn,
+          rowAutoHeight: !!$rowAutoHeight,
+          overlay: hasOverlay,
+          overlayTop: $isSelectedTop,
+          overlayLeft: $isSelectedLeft,
+          overlayBottom: $selectionType === "selectDirect" && $isLastRow,
+          overlayRight: $selectionType === "selectDirect" && $isLastColumn,
+          overlayAutoHeight: !!$rowAutoHeight
+        }),
+        className
+      ),
+      style: mergedStyle,
+      ...props,
+      children
+    }
+  );
 };
 
 export { StyledCell };

package/dist/esm/components/Grid/StyledCell.js.map

@@ -1 +1 @@
-{"version":3,"file":"StyledCell.js","sources":["../../../../src/components/Grid/StyledCell.tsx"],"sourcesContent":["import { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './StyledCell.module.css';\nimport { SelectionType } from './types';\n\ninterface StyledCellOwnProps {\n  $isFocused: boolean;\n  $selectionType: SelectionType;\n  $isSelectedTop: boolean;\n  $isSelectedLeft: boolean;\n  $isLastRow: boolean;\n  $isLastColumn: boolean;\n  $height: number;\n  $type?: 'body' | 'header';\n  $showBorder: boolean;\n  $rowAutoHeight?: boolean;\n}\n\nconst cellVariants = cva(styles.cell, {\n  variants: {\n    type: {\n      body: styles.cell_type_body,\n      header: styles.cell_type_header,\n    },\n    selection: {\n      default: null,\n      selectDirect: styles['cell_selection_direct'],\n      selectIndirect: styles['cell_selection_indirect'],\n    },\n    noBorder: { true: styles['cell_no-border'] },\n    focused: { true: styles.cell_focused },\n    lastRow: { true: styles['cell_last-row'] },\n    lastColumn: { true: styles['cell_last-column'] },\n    rowAutoHeight: { true: styles['cell_row-auto-height'] },\n    overlay: { true: styles.cell__overlay },\n    overlayTop: { true: styles['cell__overlay_selected_top'] },\n    overlayLeft: { true: styles['cell__overlay_selected_left'] },\n    overlayBottom: { true: styles['cell__overlay_selected_bottom'] },\n    overlayRight: { true: styles['cell__overlay_selected_right'] },\n    overlayAutoHeight: { true: styles['cell__overlay_row-auto-height'] },\n  },\n});\n\ntype StyledCellProps<T extends ElementType> = StyledCellOwnProps & {\n  as?: T;\n  children?: ReactNode;\n} & Omit<ComponentProps<T>, keyof StyledCellOwnProps | 'as' | 'children'>;\n\nexport const StyledCell = <T extends ElementType = 'div'>({\n  as,\n  $isFocused,\n  $selectionType,\n  $isSelectedTop,\n  $isSelectedLeft,\n  $isLastRow,\n  $isLastColumn,\n  $height,\n  $type = 'body',\n  $showBorder,\n  $rowAutoHeight,\n  className,\n  style,\n  children,\n  ...props\n}: StyledCellProps<T>) => {\n  const Component = (as ?? 'div') as ElementType;\n  // A single overlay `::before` is drawn whenever any selection/focus edge or\n  // auto-height needs to paint on top of the cell (see Grid.module.css).\n  const hasOverlay =\n    $isSelectedTop ||\n    $isSelectedLeft ||\n    ($selectionType === 'selectDirect' && ($isLastRow || $isLastColumn)) ||\n    !!$rowAutoHeight;\n  const mergedStyle = {\n    height: $rowAutoHeight ? '100%' : `${$height}px`,\n    ...style,\n  } as CSSProperties;\n  return (\n    <Component\n      className={cn(\n        cellVariants({\n          type: $type,\n          selection: $selectionType,\n          noBorder: $type === 'header' && !$showBorder,\n          focused: $isFocused,\n          lastRow: $isLastRow,\n          lastColumn: $isLastColumn,\n          rowAutoHeight: !!$rowAutoHeight,\n          overlay: hasOverlay,\n          overlayTop: $isSelectedTop,\n          overlayLeft: $isSelectedLeft,\n          overlayBottom: $selectionType === 'selectDirect' && $isLastRow,\n          overlayRight: $selectionType === 'selectDirect' && $isLastColumn,\n          overlayAutoHeight: !!$rowAutoHeight,\n        }),\n        className\n      )}\n      style={mergedStyle}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":["cellVariants","cva","styles","cell","variants","type","body","cell_type_body","header","cell_type_header","selection","default","selectDirect","selectIndirect","noBorder","true","focused","cell_focused","lastRow","lastColumn","rowAutoHeight","overlay","cell__overlay","overlayTop","overlayLeft","overlayBottom","overlayRight","overlayAutoHeight","StyledCell","as","$isFocused","$selectionType","$isSelectedTop","$isSelectedLeft","$isLastRow","$isLastColumn","$height","$type","$showBorder","$rowAutoHeight","className","style","children","props","Component","hasOverlay","mergedStyle","height","cn"],"mappings":"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"}
+{"version":3,"file":"StyledCell.js","sources":["../../../../src/components/Grid/StyledCell.tsx"],"sourcesContent":["import { ComponentProps, CSSProperties, ElementType, ReactNode } from 'react';\nimport { cn, cva } from '@/lib/cva';\nimport styles from './StyledCell.module.css';\nimport { SelectionType } from './types';\n\ninterface StyledCellOwnProps {\n  $isFocused: boolean;\n  $selectionType: SelectionType;\n  $isSelectedTop: boolean;\n  $isSelectedLeft: boolean;\n  $isLastRow: boolean;\n  $isLastColumn: boolean;\n  $height: number;\n  $type?: 'body' | 'header';\n  $showBorder: boolean;\n  $rowAutoHeight?: boolean;\n}\n\nconst cellVariants = cva(styles.cell, {\n  variants: {\n    type: {\n      body: styles.cell_type_body,\n      header: styles.cell_type_header,\n    },\n    selection: {\n      default: null,\n      selectDirect: styles['cell_selection_direct'],\n      selectIndirect: styles['cell_selection_indirect'],\n    },\n    noBorder: { true: styles['cell_no-border'] },\n    focused: { true: styles.cell_focused },\n    lastRow: { true: styles['cell_last-row'] },\n    lastColumn: { true: styles['cell_last-column'] },\n    rowAutoHeight: { true: styles['cell_row-auto-height'] },\n    overlay: { true: styles.cell__overlay },\n    overlayTop: { true: styles['cell__overlay_selected_top'] },\n    overlayLeft: { true: styles['cell__overlay_selected_left'] },\n    overlayBottom: { true: styles['cell__overlay_selected_bottom'] },\n    overlayRight: { true: styles['cell__overlay_selected_right'] },\n    overlayAutoHeight: { true: styles['cell__overlay_row-auto-height'] },\n  },\n});\n\ntype StyledCellProps<T extends ElementType> = StyledCellOwnProps & {\n  as?: T;\n  children?: ReactNode;\n} & Omit<ComponentProps<T>, keyof StyledCellOwnProps | 'as' | 'children'>;\n\nexport const StyledCell = <T extends ElementType = 'div'>({\n  as,\n  $isFocused,\n  $selectionType,\n  $isSelectedTop,\n  $isSelectedLeft,\n  $isLastRow,\n  $isLastColumn,\n  $height,\n  $type = 'body',\n  $showBorder,\n  $rowAutoHeight,\n  className,\n  style,\n  children,\n  ...props\n}: StyledCellProps<T>) => {\n  const Component = (as ?? 'div') as ElementType;\n  // A single overlay `::before` is drawn whenever any selection/focus edge or\n  // auto-height needs to paint on top of the cell (see Grid.module.css).\n  const hasOverlay =\n    $isSelectedTop ||\n    $isSelectedLeft ||\n    ($selectionType === 'selectDirect' && ($isLastRow || $isLastColumn)) ||\n    !!$rowAutoHeight;\n  const mergedStyle = {\n    height: $rowAutoHeight ? '100%' : `${$height}px`,\n    ...style,\n  } as CSSProperties;\n  return (\n    <Component\n      className={cn(\n        cellVariants({\n          type: $type,\n          selection: $selectionType,\n          noBorder: $type === 'header' && !$showBorder,\n          focused: $isFocused,\n          lastRow: $isLastRow,\n          lastColumn: $isLastColumn,\n          rowAutoHeight: !!$rowAutoHeight,\n          overlay: hasOverlay,\n          overlayTop: $isSelectedTop,\n          overlayLeft: $isSelectedLeft,\n          overlayBottom: $selectionType === 'selectDirect' && $isLastRow,\n          overlayRight: $selectionType === 'selectDirect' && $isLastColumn,\n          overlayAutoHeight: !!$rowAutoHeight,\n        }),\n        className\n      )}\n      style={mergedStyle}\n      {...props}\n    >\n      {children}\n    </Component>\n  );\n};\n"],"names":[],"mappings":"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"}