@clickhouse/click-ui 0.8.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 { 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","shouldCallResize"],"mappings":";;;;;;AAMA,MAAMA,2BAAAA,GAA8B,GAAA;AAEpC,MAAMC,UAAAA,GAAaC,MAAAA,CAAOC,GAAAA,CAAGC,UAAAA,CAAA;AAAA,EAAAC,WAAAA,EAAA;AAAA,CAAA,CAAA,CAAA,CAAA,MAAA,EAAA,QAAA,EAAA,sCAAA,EAAA,mFAAA,EAAA,IAAA,EAAA,EAAA,CAAA,EACpBC,eAAAA,CAAgBC,GAAAA,EACfD,eAAAA,CAAgBE,MAGd,CAAC;AAAA,EAAEC;AAAQ,CAAA,KAAMA,SAOX,CAAC;AAAA,EAAEC;AAAM,CAAA,KAAMA,KAAAA,CAAMC,MAAMC,IAAAA,CAAKC,MAAAA,CAAOC,KAAKC,KAAAA,CAAMC,MAAAA,CAAOC,cAEvE,CAAC;AAAA,EAAEC;AAAW,CAAA,KACdA,UAAAA,IACA;AAAA;AAAA;AAAA,IAAA,CAGC,CAAA;AAYL,MAAMC,gBAAgBA,CAAC;AAAA,EACrBC,MAAAA;AAAAA,EACAC,cAAAA,EAAgBC,kBAAAA;AAAAA,EAChBC,WAAAA;AAAAA,EACAC,kBAAAA;AAAAA,EACAC,WAAAA;AAAAA,EACAC;AACK,CAAA,KAAM;AACX,EAAA,MAAMC,SAAAA,GAAYC,OAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM;AAAA,IACJC,OAAAA;AAAAA,IACAC,UAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,YAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC,WAAAA;AAAAA,IACAC;AAAAA,GACF,GAAIT,aAAAA;AACJ,EAAA,MAAMU,SAAAA,GAAYL,aAAaR,WAAW,CAAA;AAC1C,EAAA,MAAMc,QAAAA,GAAWJ,YAAYV,WAAW,CAAA;AACxC,EAAA,MAAMF,cAAAA,GAAiBiB,QAAAA,CAAShB,kBAAAA,EAAoB,GAAI,CAAA;AAExDiB,EAAAA,SAAAA,CAAU,MAAM;AAId,IAAA,MAAMC,UAAUb,SAAAA,CAAUc,OAAAA;AAC1B,IAAA,IAAI,CAACL,SAAAA,IAAa,CAACI,OAAAA,IAAW,CAACX,OAAAA,EAAS;AACtC,MAAA;AAAA,IACF;AACA,IAAA,MAAMa,YAAYb,OAAAA,CAAQa,SAAAA;AAC1B,IAAA,IAAI;AACFF,MAAAA,OAAAA,CAAQG,kBAAkBD,SAAS,CAAA;AACnC,MAAA,OAAO,MAAM;AACX,QAAA,IAAIF,OAAAA,CAAQI,iBAAAA,CAAkBF,SAAS,CAAA,EAAG;AACxCF,UAAAA,OAAAA,CAAQK,sBAAsBH,SAAS,CAAA;AAAA,QACzC;AAAA,MACF,CAAA;AAAA,IACF,SAASI,CAAAA,EAAG;AACVC,MAAAA,OAAAA,CAAQC,MAAMF,CAAC,CAAA;AAAA,IACjB;AAAA,EACF,CAAA,EAAG,CAACjB,OAAAA,EAASO,SAAAA,EAAWb,WAAW,CAAC,CAAA;AAMpC,EAAA,MAAM0B,aAAAA,GAAqDC,YACzDJ,CAAAA,CAAAA,KAAK;AACHA,IAAAA,CAAAA,CAAEK,eAAAA,EAAgB;AAClBL,IAAAA,CAAAA,CAAEM,cAAAA,EAAe;AACjB,IAAA,IAAIzB,UAAUc,OAAAA,EAAS;AAIrB,MAAA,IAAIN,oBAAAA,GAAuBkB,IAAAA,CAAKC,GAAAA,EAAI,GAAItD,2BAAAA,EAA6B;AAEnEqB,QAAAA,cAAAA,CAAeE,WAAAA,EAAa,GAAG,MAAM,CAAA;AAAA,MACvC;AACAO,MAAAA,UAAAA,CAAW;AAAA,QACTY,WAAWI,CAAAA,CAAEJ,SAAAA;AAAAA,QACba,gBAAgBT,CAAAA,CAAEU,OAAAA;AAAAA,QAClBC,KAAAA,EAAOhC;AAAAA,OACR,CAAA;AACDO,MAAAA,YAAAA,CAAaT,aAAa,IAAI,CAAA;AAC9B,MAAA,MAAMmC,GAAAA,GAAMlC,kBAAAA,CAAmBsB,CAAAA,CAAEU,OAAAA,EAAS/B,aAAaF,WAAW,CAAA;AAClEW,MAAAA,WAAAA,CAAYwB,GAAG,CAAA;AAAA,IACjB;AAAA,EACF,CAAA,EACA,CACEvB,oBAAAA,EACAL,UAAAA,EACAL,WAAAA,EACAO,cACAT,WAAAA,EACAC,kBAAAA,EACAU,WAAAA,EACAb,cAAc,CAElB,CAAA;AAMA,EAAA,MAAMsC,aAAAA,GAAqDT,YACzDJ,CAAAA,CAAAA,KAAK;AACHA,IAAAA,CAAAA,CAAEK,eAAAA,EAAgB;AAClBL,IAAAA,CAAAA,CAAEM,cAAAA,EAAe;AACjB,IAAA,IAAIhB,aAAaP,OAAAA,EAAS;AACxB,MAAA,MAAM4B,KAAAA,GAAQhC,WAAAA,IAAeqB,CAAAA,CAAEU,OAAAA,GAAU3B,OAAAA,CAAQ0B,cAAAA,CAAAA;AACjD,MAAA,MAAMG,GAAAA,GAAMlC,kBAAAA,CAAmBsB,CAAAA,CAAEU,OAAAA,EAASC,OAAOlC,WAAW,CAAA;AAC5DW,MAAAA,WAAAA,CAAYwB,GAAG,CAAA;AAEf7B,MAAAA,OAAAA,CAAQ4B,KAAAA,GAAQG,IAAAA,CAAKC,GAAAA,CAAIJ,KAAAA,EAAO,EAAE,CAAA;AAAA,IACpC;AAAA,EACF,CAAA,EACA,CAAC5B,OAAAA,EAASO,SAAAA,EAAWX,aAAaD,kBAAAA,EAAoBD,WAAAA,EAAaW,WAAW,CAChF,CAAA;AAEA,EAAA,uBACE,GAAA,CAAC,UAAA,EAAA,EACC,GAAA,EAAKP,SAAAA,EACL,OAAA,EAASP,QACT,UAAA,EAAYgB,SAAAA,EACZ,aAAA,EACA,WAAA,EAAaU,CAAAA,CAAAA,KAAK;AAChBA,IAAAA,CAAAA,CAAEM,cAAAA,EAAe;AACjBN,IAAAA,CAAAA,CAAEK,eAAAA,EAAgB;AAClB,IAAA,IACExB,SAAAA,CAAUc,OAAAA;AAAAA,KAETZ,OAAAA,EAASa,SAAAA,IAAab,OAAAA,EAASa,SAAAA,KAAc,CAAA,CAAA,EAC9C;AACA,MAAA,MAAMoB,gBAAAA,GAAmBhB,CAAAA,CAAEU,OAAAA,KAAY3B,OAAAA,CAAQ0B,cAAAA;AAC/C,MAAA,IAAIO,gBAAAA,EAAkB;AACpBzC,QAAAA,cAAAA,CAAeE,WAAAA,EAAaM,OAAAA,CAAQ4B,KAAAA,EAAO,QAAQ,CAAA;AAAA,MACrD;AACAvB,MAAAA,WAAAA,CAAY5B,eAAe,CAAA;AAC3BwB,MAAAA,UAAAA,CAAW,IAAI,CAAA;AACfE,MAAAA,YAAAA,CAAaT,aAAa,KAAK,CAAA;AAAA,IACjC;AAAA,EACF,CAAA,EACA,aAAA,EACA,eAAA,EAAiBuB,CAAAA,CAAAA,KAAK;AACpBA,IAAAA,CAAAA,CAAEM,cAAAA,EAAe;AACjBN,IAAAA,CAAAA,CAAEK,eAAAA,EAAgB;AAClBjB,IAAAA,WAAAA,CAAY5B,eAAe,CAAA;AAC3BwB,IAAAA,UAAAA,CAAW,IAAI,CAAA;AACfE,IAAAA,YAAAA,CAAaT,aAAa,KAAK,CAAA;AAAA,EACjC,CAAA,EACA,SAASuB,CAAAA,CAAAA,KAAKA,CAAAA,CAAEK,iBAAgB,EAChC,aAAA,EAAW,IAAA,EACX,KAAA,EAAOd,QAAAA,EAAS,CAAA;AAGtB;;;;"}
+{"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":";;;;;;;;AAaA,MAAM,2BAAA,GAA8B,GAAA;AAEpC,MAAM,eAAA,GAAkB,GAAA,CAAI,MAAA,CAAO,gBAAgB,CAAA,EAAG;AAAA,EACpD,QAAA,EAAU;AAAA,IACR,OAAA,EAAS,EAAE,IAAA,EAAM,MAAA,CAAO,wBAAwB,CAAA;AAAE;AAEtD,CAAC,CAAA;AAWD,MAAM,gBAAgB,CAAC;AAAA,EACrB,MAAA;AAAA,EACA,cAAA,EAAgB,kBAAA;AAAA,EAChB,WAAA;AAAA,EACA,kBAAA;AAAA,EACA,WAAA;AAAA,EACA;AACF,CAAA,KAAa;AACX,EAAA,MAAM,SAAA,GAAY,OAAuB,IAAI,CAAA;AAC7C,EAAA,MAAM;AAAA,IACJ,OAAA;AAAA,IACA,UAAA;AAAA,IACA,YAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GACF,GAAI,aAAA;AACJ,EAAA,MAAM,SAAA,GAAY,aAAa,WAAW,CAAA;AAC1C,EAAA,MAAM,QAAA,GAAW,YAAY,WAAW,CAAA;AACxC,EAAA,MAAM,cAAA,GAAiB,QAAA,CAAS,kBAAA,EAAoB,GAAI,CAAA;AAExD,EAAA,SAAA,CAAU,MAAM;AAId,IAAA,MAAM,UAAU,SAAA,CAAU,OAAA;AAC1B,IAAA,IAAI,CAAC,SAAA,IAAa,CAAC,OAAA,IAAW,CAAC,OAAA,EAAS;AACtC,MAAA;AAAA,IACF;AACA,IAAA,MAAM,YAAY,OAAA,CAAQ,SAAA;AAC1B,IAAA,IAAI;AACF,MAAA,OAAA,CAAQ,kBAAkB,SAAS,CAAA;AACnC,MAAA,OAAO,MAAM;AACX,QAAA,IAAI,OAAA,CAAQ,iBAAA,CAAkB,SAAS,CAAA,EAAG;AACxC,UAAA,OAAA,CAAQ,sBAAsB,SAAS,CAAA;AAAA,QACzC;AAAA,MACF,CAAA;AAAA,IACF,SAAS,CAAA,EAAG;AACV,MAAA,OAAA,CAAQ,MAAM,CAAC,CAAA;AAAA,IACjB;AAAA,EACF,CAAA,EAAG,CAAC,OAAA,EAAS,SAAA,EAAW,WAAW,CAAC,CAAA;AAMpC,EAAA,MAAM,aAAA,GAAqD,WAAA;AAAA,IACzD,CAAA,CAAA,KAAK;AACH,MAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,IAAI,UAAU,OAAA,EAAS;AAIrB,QAAA,IAAI,oBAAA,GAAuB,IAAA,CAAK,GAAA,EAAI,GAAI,2BAAA,EAA6B;AAEnE,UAAA,cAAA,CAAe,WAAA,EAAa,GAAG,MAAM,CAAA;AAAA,QACvC;AACA,QAAA,UAAA,CAAW;AAAA,UACT,WAAW,CAAA,CAAE,SAAA;AAAA,UACb,gBAAgB,CAAA,CAAE,OAAA;AAAA,UAClB,KAAA,EAAO;AAAA,SACR,CAAA;AACD,QAAA,YAAA,CAAa,aAAa,IAAI,CAAA;AAC9B,QAAA,MAAM,GAAA,GAAM,kBAAA,CAAmB,CAAA,CAAE,OAAA,EAAS,aAAa,WAAW,CAAA;AAClE,QAAA,WAAA,CAAY,GAAG,CAAA;AAAA,MACjB;AAAA,IACF,CAAA;AAAA,IACA;AAAA,MACE,oBAAA;AAAA,MACA,UAAA;AAAA,MACA,WAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,kBAAA;AAAA,MACA,WAAA;AAAA,MACA;AAAA;AACF,GACF;AAMA,EAAA,MAAM,aAAA,GAAqD,WAAA;AAAA,IACzD,CAAA,CAAA,KAAK;AACH,MAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,IAAI,aAAa,OAAA,EAAS;AACxB,QAAA,MAAM,KAAA,GAAQ,WAAA,IAAe,CAAA,CAAE,OAAA,GAAU,OAAA,CAAQ,cAAA,CAAA;AACjD,QAAA,MAAM,GAAA,GAAM,kBAAA,CAAmB,CAAA,CAAE,OAAA,EAAS,OAAO,WAAW,CAAA;AAC5D,QAAA,WAAA,CAAY,GAAG,CAAA;AAEf,QAAA,OAAA,CAAQ,KAAA,GAAQ,IAAA,CAAK,GAAA,CAAI,KAAA,EAAO,EAAE,CAAA;AAAA,MACpC;AAAA,IACF,CAAA;AAAA,IACA,CAAC,OAAA,EAAS,SAAA,EAAW,WAAA,EAAa,kBAAA,EAAoB,aAAa,WAAW;AAAA,GAChF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA,EAAK,SAAA;AAAA,MACL,SAAA,EAAW,eAAA,CAAgB,EAAE,OAAA,EAAS,WAAW,CAAA;AAAA,MACjD,aAAA;AAAA,MACA,aAAa,CAAA,CAAA,KAAK;AAChB,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,QAAA,IACE,SAAA,CAAU,OAAA;AAAA,SAET,OAAA,EAAS,SAAA,IAAa,OAAA,EAAS,SAAA,KAAc,CAAA,CAAA,EAC9C;AACA,UAAA,MAAM,gBAAA,GAAmB,CAAA,CAAE,OAAA,KAAY,OAAA,CAAQ,cAAA;AAC/C,UAAA,IAAI,gBAAA,EAAkB;AACpB,YAAA,cAAA,CAAe,WAAA,EAAa,OAAA,CAAQ,KAAA,EAAO,QAAQ,CAAA;AAAA,UACrD;AACA,UAAA,WAAA,CAAY,eAAe,CAAA;AAC3B,UAAA,UAAA,CAAW,IAAI,CAAA;AACf,UAAA,YAAA,CAAa,aAAa,KAAK,CAAA;AAAA,QACjC;AAAA,MACF,CAAA;AAAA,MACA,aAAA;AAAA,MACA,iBAAiB,CAAA,CAAA,KAAK;AACpB,QAAA,CAAA,CAAE,cAAA,EAAe;AACjB,QAAA,CAAA,CAAE,eAAA,EAAgB;AAClB,QAAA,WAAA,CAAY,eAAe,CAAA;AAC3B,QAAA,UAAA,CAAW,IAAI,CAAA;AACf,QAAA,YAAA,CAAa,aAAa,KAAK,CAAA;AAAA,MACjC,CAAA;AAAA,MACA,OAAA,EAAS,CAAA,CAAA,KAAK,CAAA,CAAE,eAAA,EAAgB;AAAA,MAChC,aAAA,EAAW,IAAA;AAAA,MACX,KAAA,EACE;AAAA,QACE,yBAAA,EAA2B,GAAG,MAAM,CAAA,EAAA,CAAA;AAAA,QACpC,GAAG;AAAA;AACL;AAAA,GAEJ;AAEJ;;;;"}

package/dist/esm/components/Grid/ColumnResizer.module.css.js

@@ -0,0 +1,7 @@
+const styles = {
+	"column-resizer": "column-resizer__8f12T",
+	"column-resizer_pressed": "column-resizer_pressed__JGAln"
+};
+
+export { styles as default };
+//# sourceMappingURL=ColumnResizer.module.css.js.map

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

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

package/dist/esm/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/esm/components/Grid/Grid.module.css.js

@@ -0,0 +1,13 @@
+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
+};
+
+export { styles as default, grid, grid__data, grid__inner, grid_bordered };
+//# sourceMappingURL=Grid.module.css.js.map

package/dist/esm/components/Grid/Grid.module.css.js.map

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

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

@@ -0,0 +1,45 @@
+@layer clickui {/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+.header__hXzAE {
+  display: flex;
+  position: sticky;
+  top: 0;
+  left: 0;
+  height: var(--header-height);
+  flex-direction: row;
+}
+
+.header_scrolled-vertical__mIp2- {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+
+.header__scroll-area__Nok8G {
+  position: relative;
+  left: var(--header-scroll-area-left);
+}
+
+.header__cell__ZCE9p {
+  display: flex;
+  position: absolute;
+  left: var(--header-cell-left);
+  width: var(--header-cell-width);
+  height: var(--header-cell-height);
+}
+
+.header__cell__ZCE9p:hover [data-resize] {
+  background: var(--click-grid-header-cell-color-stroke-selectDirect);
+}
+
+/* the sticky "select all" corner extends a header cell (styled(HeaderCellContainer)) */
+.header__row-column__ceu5w {
+  position: sticky;
+  top: 0;
+  left: 0;
+  width: var(--header-cell-width);
+  text-align: right;
+}
+
+.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

@@ -1,50 +1,17 @@
+import "./Header.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Header.module.css.js';
 import { StyledCell } from './StyledCell.js';
 import ColumnResizer from './ColumnResizer.js';
 
-const HeaderContainer = styled.div.withConfig({
-  componentId: "sc-1oadqc8-0"
-})(["position:sticky;top:0;left:0;display:flex;flex-direction:row;height:", "px;", ""], ({
-  $height
-}) => $height, ({
-  $scrolledVertical,
-  theme
-}) => $scrolledVertical ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
-const ScrollableHeaderContainer = styled.div.withConfig({
-  componentId: "sc-1oadqc8-1"
-})(["position:relative;left:", "px;"], ({
-  $left
-}) => $left);
-const HeaderCellContainer = styled.div.withConfig({
-  componentId: "sc-1oadqc8-2"
-})(["position:absolute;display:flex;width:", ";height:", "px;left:", "px;&:hover [data-resize]{background:", ";}"], ({
-  $width
-}) => typeof $width === "string" ? $width : `${$width}px`, ({
-  $height
-}) => $height, ({
-  $columnPosition
-}) => $columnPosition, ({
-  theme
-}) => theme.click.grid.header.cell.color.stroke.selectDirect);
-const RowColumnContainer = styled(HeaderCellContainer).withConfig({
-  componentId: "sc-1oadqc8-3"
-})(["position:sticky;top:0;left:0;width:", ";text-align:right;", ""], ({
-  $width
-}) => typeof $width === "string" ? $width : `${$width}px`, ({
-  $scrolledHorizontal,
-  theme
-}) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
-const RowColumn = styled(StyledCell).withConfig({
-  componentId: "sc-1oadqc8-4"
-})(["width:100%;text-align:right;overflow:hidden;"]);
+const toCssSize = ($width) => typeof $width === "string" ? $width : `${$width}px`;
 const Column = ({
   columnIndex,
   cell,
   getColumnWidth,
   getColumnHorizontalPosition,
   getSelectionType,
-  isFirstColumn,
   isLastColumn,
   onColumnResize,
   height,
@@ -64,10 +31,52 @@ const Column = ({
   const isSelected = selectionType === "selectDirect";
   const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
   const columnWidth = getColumnWidth(columnIndex);
-  return /* @__PURE__ */ jsxs(HeaderCellContainer, { $width: columnWidth, $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-    /* @__PURE__ */ jsx(StyledCell, { $type: "header", as: cell, columnIndex, type: "header-cell", $isFirstColumn: isFirstColumn, $selectionType: selectionType, $isLastColumn: isLastColumn, $isFocused: false, $isSelectedLeft: isSelectedLeft, $isSelectedTop: isSelected, $isLastRow: false, $isFirstRow: true, $height: height, "data-grid-row": -1, "data-grid-column": columnIndex, "data-selected": isSelected, $showBorder: showBorder, width: columnWidth }),
-    /* @__PURE__ */ jsx(ColumnResizer, { height, onColumnResize, columnIndex, getResizerPosition, columnWidth, resizingState })
-  ] });
+  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,
@@ -90,12 +99,79 @@ const Header = ({
   const selectedAllType = getSelectionType({
     type: "all"
   });
-  return /* @__PURE__ */ jsxs(HeaderContainer, { $height: height, $scrolledVertical: scrolledVertical, children: [
-    /* @__PURE__ */ jsx(ScrollableHeaderContainer, { $left: rowNumberWidth, children: Array.from({
-      length: maxColumn - minColumn + 1
-    }, (_, index) => minColumn + index).map((columnIndex) => /* @__PURE__ */ jsx(Column, { getSelectionType, columnIndex, getColumnWidth, getColumnHorizontalPosition, cell, isFirstColumn: columnIndex === 0 && !showRowNumber, isLastColumn: columnIndex + 1 === columnCount, onColumnResize, height, getResizerPosition, showBorder, resizingState }, `header-${columnIndex}`)) }),
-    showRowNumber && /* @__PURE__ */ jsx(RowColumnContainer, { $width: rowNumberWidth, $height: height, $columnPosition: 0, $scrolledHorizontal: scrolledHorizontal, children: /* @__PURE__ */ jsx(RowColumn, { "data-selected": selectedAllType === "selectDirect", $type: "header", $isFirstRow: true, $isFirstColumn: true, $selectionType: selectedAllType, $isLastRow: false, $isLastColumn: false, $height: height, $isFocused: false, $isSelectedLeft: false, $isSelectedTop: false, "data-grid-row": -1, "data-grid-column": -1, $showBorder: showBorder, children: "#" }) })
-  ] });
+  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 { styled } from 'styled-components';\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\nconst HeaderContainer = styled.div<{ $height: number; $scrolledVertical: boolean }>`\n  position: sticky;\n  top: 0;\n  left: 0;\n  display: flex;\n  flex-direction: row;\n  height: ${({ $height }) => $height}px;\n  ${({ $scrolledVertical, theme }) =>\n    $scrolledVertical\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst ScrollableHeaderContainer = styled.div<{\n  $left: number;\n}>`\n  position: relative;\n  left: ${({ $left }) => $left}px;\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  isFirstColumn: boolean;\n  isLastColumn: boolean;\n}\n\nconst HeaderCellContainer = styled.div<{\n  $width: string | number;\n  $height: number;\n  $columnPosition: number;\n}>`\n  position: absolute;\n  display: flex;\n  width: ${({ $width }) => (typeof $width === 'string' ? $width : `${$width}px`)};\n  height: ${({ $height }) => $height}px;\n  left: ${({ $columnPosition }) => $columnPosition}px;\n  &:hover [data-resize] {\n    background: ${({ theme }) => theme.click.grid.header.cell.color.stroke.selectDirect};\n  }\n`;\n\nconst RowColumnContainer = styled(HeaderCellContainer)<{\n  $width: string | number;\n  $scrolledHorizontal: boolean;\n}>`\n  position: sticky;\n  top: 0;\n  left: 0;\n  width: ${({ $width }) => (typeof $width === 'string' ? $width : `${$width}px`)};\n  text-align: right;\n  ${({ $scrolledHorizontal, theme }) =>\n    $scrolledHorizontal\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst RowColumn = styled(StyledCell)`\n  width: 100%;\n  text-align: right;\n  overflow: hidden;\n`;\n\nconst Column = ({\n  columnIndex,\n  cell,\n  getColumnWidth,\n  getColumnHorizontalPosition,\n  getSelectionType,\n  isFirstColumn,\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    <HeaderCellContainer\n      $width={columnWidth}\n      $columnPosition={columnPosition}\n      $height={height}\n      data-header={columnIndex}\n    >\n      <StyledCell\n        $type=\"header\"\n        as={cell}\n        columnIndex={columnIndex}\n        type=\"header-cell\"\n        $isFirstColumn={isFirstColumn}\n        $selectionType={selectionType}\n        $isLastColumn={isLastColumn}\n        $isFocused={false}\n        $isSelectedLeft={isSelectedLeft}\n        $isSelectedTop={isSelected}\n        $isLastRow={false}\n        $isFirstRow\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    </HeaderCellContainer>\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    <HeaderContainer\n      $height={height}\n      $scrolledVertical={scrolledVertical}\n    >\n      <ScrollableHeaderContainer $left={rowNumberWidth}>\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            isFirstColumn={columnIndex === 0 && !showRowNumber}\n            isLastColumn={columnIndex + 1 === columnCount}\n            onColumnResize={onColumnResize}\n            height={height}\n            getResizerPosition={getResizerPosition}\n            showBorder={showBorder}\n            resizingState={resizingState}\n          />\n        ))}\n      </ScrollableHeaderContainer>\n      {showRowNumber && (\n        <RowColumnContainer\n          $width={rowNumberWidth}\n          $height={height}\n          $columnPosition={0}\n          $scrolledHorizontal={scrolledHorizontal}\n        >\n          <RowColumn\n            data-selected={selectedAllType === 'selectDirect'}\n            $type=\"header\"\n            $isFirstRow\n            $isFirstColumn\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          </RowColumn>\n        </RowColumnContainer>\n      )}\n    </HeaderContainer>\n  );\n};\n\nexport default Header;\n"],"names":["HeaderContainer","styled","div","withConfig","componentId","$height","$scrolledVertical","theme","click","grid","header","cell","color","stroke","default","ScrollableHeaderContainer","$left","HeaderCellContainer","$width","$columnPosition","selectDirect","RowColumnContainer","$scrolledHorizontal","RowColumn","StyledCell","Column","columnIndex","getColumnWidth","getColumnHorizontalPosition","getSelectionType","isFirstColumn","isLastColumn","onColumnResize","height","getResizerPosition","showBorder","resizingState","selectionType","column","type","leftSelectionType","columnPosition","isSelected","isSelectedLeft","columnWidth","Header","scrolledVertical","scrolledHorizontal","showRowNumber","rowNumberWidth","minColumn","maxColumn","columnCount","selectedAllType","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/Header.module.css.js

@@ -0,0 +1,13 @@
+const header = "header__hXzAE";
+const header__cell = "header__cell__ZCE9p";
+const styles = {
+	header: header,
+	"header_scrolled-vertical": "header_scrolled-vertical__mIp2-",
+	"header__scroll-area": "header__scroll-area__Nok8G",
+	header__cell: header__cell,
+	"header__row-column": "header__row-column__ceu5w",
+	"header__row-column_scrolled-horizontal": "header__row-column_scrolled-horizontal__QZO4p"
+};
+
+export { styles as default, header, header__cell };
+//# sourceMappingURL=Header.module.css.js.map

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

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

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

@@ -0,0 +1,23 @@
+@layer clickui {.row-number-column__n-aQm {
+  position: sticky;
+  top: var(--row-number-column-top);
+  left: 0;
+  width: var(--row-number-column-width);
+  height: 100%;
+}
+
+.row-number-column_scrolled-horizontal__L9fAB {
+  box-shadow: 0 0 0 1px var(--click-grid-header-cell-color-stroke-default);
+}
+
+.row-number-column__cell__00w03 {
+  position: absolute;
+  top: var(--row-number-cell-top);
+  left: 0;
+  width: 100%;
+  height: var(--row-number-cell-height);
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+}

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

@@ -1,36 +1,14 @@
+import "./RowNumberColumn.css";
 import { jsx } from 'react/jsx-runtime';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './RowNumberColumn.module.css.js';
 import { StyledCell } from './StyledCell.js';
 
-const RowNumberColumnContainer = styled.div.withConfig({
-  componentId: "sc-7gbi4d-0"
-})(["position:sticky;left:0;", " ", ""], ({
-  $height,
-  $width
-}) => `
-    top: ${$height}px;
-    width: ${$width}px;
-    height: 100%;
-  `, ({
-  $scrolledHorizontal,
-  theme
-}) => $scrolledHorizontal ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};` : "");
-const RowNumberCell = styled.div.withConfig({
-  componentId: "sc-7gbi4d-1"
-})(["position:absolute;left:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:100%;", ""], ({
-  $height,
-  $rowNumber,
-  $rowAutoHeight
-}) => `
-    top: ${$height * $rowNumber}px;
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
-  `);
 const RowNumber = ({
   rowIndex,
   rowHeight,
   getSelectionType,
   isLastRow,
-  isFirstRow,
   showBorder,
   rowStart,
   rowAutoHeight
@@ -46,7 +24,37 @@ const RowNumber = ({
     type: "row"
   });
   const isSelectedTop = (topSelectionType === "selectDirect" || isSelected) && topSelectionType !== selectionType;
-  return /* @__PURE__ */ jsx(RowNumberCell, { $rowNumber: rowIndex, $height: rowHeight, $rowAutoHeight: rowAutoHeight, children: /* @__PURE__ */ jsx(StyledCell, { $height: rowHeight, $isLastColumn: false, $selectionType: selectionType, $isFirstColumn: true, $type: "header", $isFirstRow: isFirstRow, $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,
@@ -56,15 +64,39 @@ const RowNumberColumn = ({
   rowWidth,
   getSelectionType,
   rowCount,
-  showHeader,
   scrolledHorizontal,
   rowStart = 0,
   showBorder,
   rowAutoHeight
 }) => {
-  return /* @__PURE__ */ jsx(RowNumberColumnContainer, { $height: headerHeight, $width: rowWidth, $scrolledHorizontal: scrolledHorizontal, $rowAutoHeight: rowAutoHeight, children: Array.from({
-    length: maxRow - minRow + 1
-  }, (_, index) => minRow + index).map((rowIndex) => /* @__PURE__ */ jsx(RowNumber, { getSelectionType, rowHeight, rowIndex, isLastRow: rowIndex === rowCount, isFirstRow: !showHeader && rowIndex === 0, 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 { styled } from 'styled-components';\nimport { SelectionTypeFn } from './types';\nimport { StyledCell } from './StyledCell';\nconst RowNumberColumnContainer = styled.div<{\n  $height: number;\n  $width: number;\n  $scrolledHorizontal: boolean;\n  $rowAutoHeight?: boolean;\n}>`\n  position: sticky;\n  left: 0;\n  ${({ $height, $width }) => `\n    top: ${$height}px;\n    width: ${$width}px;\n    height: 100%;\n  `}\n\n  ${({ $scrolledHorizontal, theme }) =>\n    $scrolledHorizontal\n      ? `box-shadow: 0px 0 0px 1px ${theme.click.grid.header.cell.color.stroke.default};`\n      : ''}\n`;\n\nconst RowNumberCell = styled.div<{\n  $height: number;\n  $rowNumber: number;\n  $rowAutoHeight?: boolean;\n}>`\n  position: absolute;\n  left: 0;\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  width: 100%;\n  ${({ $height, $rowNumber, $rowAutoHeight }) => `\n    top: ${$height * $rowNumber}px;\n    height: ${$rowAutoHeight ? '100%' : `${$height}px`};\n  `}\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  showHeader: boolean;\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  isFirstRow: boolean;\n  rowAutoHeight?: boolean;\n}\nconst RowNumber = ({\n  rowIndex,\n  rowHeight,\n  getSelectionType,\n  isLastRow,\n  isFirstRow,\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    <RowNumberCell\n      $rowNumber={rowIndex}\n      $height={rowHeight}\n      $rowAutoHeight={rowAutoHeight}\n    >\n      <StyledCell\n        $height={rowHeight}\n        $isLastColumn={false}\n        $selectionType={selectionType}\n        $isFirstColumn\n        $type=\"header\"\n        $isFirstRow={isFirstRow}\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    </RowNumberCell>\n  );\n};\n\nconst RowNumberColumn = ({\n  minRow,\n  maxRow,\n  rowHeight,\n  headerHeight,\n  rowWidth,\n  getSelectionType,\n  rowCount,\n  showHeader,\n  scrolledHorizontal,\n  rowStart = 0,\n  showBorder,\n  rowAutoHeight,\n}: RowNumberColumnProps) => {\n  return (\n    <RowNumberColumnContainer\n      $height={headerHeight}\n      $width={rowWidth}\n      $scrolledHorizontal={scrolledHorizontal}\n      $rowAutoHeight={rowAutoHeight}\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            isFirstRow={!showHeader && rowIndex === 0}\n            showBorder={showBorder}\n            rowStart={rowStart}\n            rowAutoHeight={rowAutoHeight}\n          />\n        )\n      )}\n    </RowNumberColumnContainer>\n  );\n};\n\nexport default RowNumberColumn;\n"],"names":["RowNumberColumnContainer","styled","div","withConfig","componentId","$height","$width","$scrolledHorizontal","theme","click","grid","header","cell","color","stroke","default","RowNumberCell","$rowNumber","$rowAutoHeight","RowNumber","rowIndex","rowHeight","getSelectionType","isLastRow","isFirstRow","showBorder","rowStart","rowAutoHeight","currentRowIndex","selectionType","row","type","isSelected","topSelectionType","isSelectedTop","RowNumberColumn","minRow","maxRow","headerHeight","rowWidth","rowCount","showHeader","scrolledHorizontal","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/RowNumberColumn.module.css.js

@@ -0,0 +1,8 @@
+const styles = {
+	"row-number-column": "row-number-column__n-aQm",
+	"row-number-column_scrolled-horizontal": "row-number-column_scrolled-horizontal__L9fAB",
+	"row-number-column__cell": "row-number-column__cell__00w03"
+};
+
+export { styles as default };
+//# sourceMappingURL=RowNumberColumn.module.css.js.map

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

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