@clickhouse/click-ui 0.8.0 → 0.9.0

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

@@ -1,66 +1,94 @@
-import { styled } from 'styled-components';
+import "./StyledCell.css";
+import { jsx } from 'react/jsx-runtime';
+import { cn } from '../../lib/cva.js';
+import styles from './StyledCell.module.css.js';
+import { cva } from 'class-variance-authority';
 
-const StyledCell = styled.div.withConfig({
-  componentId: "sc-30izhw-0"
-})(["display:block;text-align:left;&[data-align='right']{text-align:right;}overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:default;width:100%;box-sizing:border-box;", " ", ";"], ({
-  theme,
+const cellVariants = cva(styles.cell, {
+  variants: {
+    type: {
+      body: styles.cell_type_body,
+      header: styles.cell_type_header
+    },
+    selection: {
+      default: null,
+      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"]
+    }
+  }
+});
+const StyledCell = ({
+  as,
   $isFocused,
+  $selectionType,
+  $isSelectedTop,
+  $isSelectedLeft,
   $isLastRow,
   $isLastColumn,
-  $selectionType,
   $height,
   $type = "body",
   $showBorder,
-  $rowAutoHeight
-}) => `
-    height: ${$rowAutoHeight ? "100%" : `${$height}px`};
-    min-height: ${$rowAutoHeight ? "auto" : ""};
-    overflow-y: ${$rowAutoHeight ? "auto" : ""};
-    background: ${theme.click.grid[$type].cell.color.background[$selectionType]};
-    color: ${$type === "header" ? theme.click.grid.header.cell.color.title[$selectionType] : theme.click.grid.body.cell.color.text[$selectionType]};
-    font: ${theme.click.grid.cell.text.default};
-    padding: ${theme.click.grid[$type].cell.space.y} ${theme.click.grid[$type].cell.space.x};
-    border: 1px solid ${theme.click.grid[$type].cell.color.stroke.default};
-    ${$type === "header" && !$showBorder ? `
-      &[data-grid-row="-1"] {
-        border-top: none;
-      }
-      &[data-grid-column="-1"] {
-        border-left: none;
-      }
-    ` : ""}
-    ${$isFocused ? `box-shadow: inset 0 0 0 1px ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-    ${$isLastRow ? `
-        border-bottom-color: ${theme.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
-    ` : "border-bottom: none;"}
-    ${$isLastColumn ? `
-        border-right-color: ${theme.click.grid[$type].cell.color.stroke[$isFocused ? "selectDirect" : $selectionType]};
-    ` : "border-right: none;"}
-    ${$rowAutoHeight && "border: none;"}
-  `, ({
-  theme,
-  $isLastRow,
-  $isLastColumn,
-  $selectionType,
-  $type = "body",
-  $isSelectedTop,
-  $isSelectedLeft,
-  $rowAutoHeight
-}) => $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || $rowAutoHeight ? `
-          &::before {
-            content: "";
-            position: absolute;
-            top: 0;
-            bottom: 0;
-            right: 0;
-            left: 0;
-            ${$isSelectedTop ? `border-top: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$isSelectedLeft ? `border-left: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$selectionType === "selectDirect" && $isLastRow ? `border-bottom: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$selectionType === "selectDirect" && $isLastColumn ? `border-right: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};` : ""}
-            ${$rowAutoHeight && "border: none;"}
-          }
-        ` : "");
+  $rowAutoHeight,
+  className,
+  style,
+  children,
+  ...props
+}) => {
+  const Component = as ?? "div";
+  const hasOverlay = $isSelectedTop || $isSelectedLeft || $selectionType === "selectDirect" && ($isLastRow || $isLastColumn) || !!$rowAutoHeight;
+  const mergedStyle = {
+    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 });
+};
 
 export { StyledCell };
 //# sourceMappingURL=StyledCell.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"StyledCell.js","sources":["../../../../src/components/Grid/StyledCell.tsx"],"sourcesContent":["import { styled } from 'styled-components';\nimport { SelectionType } from './types';\n\nexport const StyledCell = styled.div<{\n  $isFocused: boolean;\n  $selectionType: SelectionType;\n  $isSelectedTop: boolean;\n  $isSelectedLeft: boolean;\n  $isLastRow: boolean;\n  $isLastColumn: boolean;\n  $isFirstRow: boolean;\n  $isFirstColumn: boolean;\n  $height: number;\n  $type?: 'body' | 'header';\n  $showBorder: boolean;\n  $rowAutoHeight?: boolean;\n}>`\n  display: block;\n  text-align: left;\n  &[data-align='right'] {\n    text-align: right;\n  }\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n  cursor: default;\n  width: 100%;\n  box-sizing: border-box;\n  ${({\n    theme,\n    $isFocused,\n    $isLastRow,\n    $isLastColumn,\n    $selectionType,\n    $height,\n    $type = 'body',\n    $showBorder,\n    $rowAutoHeight,\n  }) => `\n    height: ${$rowAutoHeight ? '100%' : `${$height}px`};\n    min-height: ${$rowAutoHeight ? 'auto' : ''};\n    overflow-y: ${$rowAutoHeight ? 'auto' : ''};\n    background: ${theme.click.grid[$type].cell.color.background[$selectionType]};\n    color: ${\n      $type === 'header'\n        ? theme.click.grid.header.cell.color.title[$selectionType]\n        : theme.click.grid.body.cell.color.text[$selectionType]\n    };\n    font: ${theme.click.grid.cell.text.default};\n    padding: ${theme.click.grid[$type].cell.space.y} ${\n      theme.click.grid[$type].cell.space.x\n    };\n    border: 1px solid ${theme.click.grid[$type].cell.color.stroke.default};\n    ${\n      $type === 'header' && !$showBorder\n        ? `\n      &[data-grid-row=\"-1\"] {\n        border-top: none;\n      }\n      &[data-grid-column=\"-1\"] {\n        border-left: none;\n      }\n    `\n        : ''\n    }\n    ${\n      $isFocused\n        ? `box-shadow: inset 0 0 0 1px ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n        : ''\n    }\n    ${\n      $isLastRow\n        ? `\n        border-bottom-color: ${\n          theme.click.grid[$type].cell.color.stroke[\n            $isFocused ? 'selectDirect' : $selectionType\n          ]\n        };\n    `\n        : 'border-bottom: none;'\n    }\n    ${\n      $isLastColumn\n        ? `\n        border-right-color: ${\n          theme.click.grid[$type].cell.color.stroke[\n            $isFocused ? 'selectDirect' : $selectionType\n          ]\n        };\n    `\n        : 'border-right: none;'\n    }\n    ${$rowAutoHeight && 'border: none;'}\n  `}\n  ${({\n    theme,\n    $isLastRow,\n    $isLastColumn,\n    $selectionType,\n    $type = 'body',\n    $isSelectedTop,\n    $isSelectedLeft,\n    $rowAutoHeight,\n  }) =>\n    $isSelectedTop ||\n    $isSelectedLeft ||\n    ($selectionType === 'selectDirect' && ($isLastRow || $isLastColumn)) ||\n    $rowAutoHeight\n      ? `\n          &::before {\n            content: \"\";\n            position: absolute;\n            top: 0;\n            bottom: 0;\n            right: 0;\n            left: 0;\n            ${\n              $isSelectedTop\n                ? `border-top: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $isSelectedLeft\n                ? `border-left: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $selectionType === 'selectDirect' && $isLastRow\n                ? `border-bottom: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${\n              $selectionType === 'selectDirect' && $isLastColumn\n                ? `border-right: 1px solid ${theme.click.grid[$type].cell.color.stroke.selectDirect};`\n                : ''\n            }\n            ${$rowAutoHeight && 'border: none;'}\n          }\n        `\n      : ''};\n`;\n"],"names":["StyledCell","styled","div","withConfig","componentId","theme","$isFocused","$isLastRow","$isLastColumn","$selectionType","$height","$type","$showBorder","$rowAutoHeight","click","grid","cell","color","background","header","title","body","text","default","space","y","x","stroke","selectDirect","$isSelectedTop","$isSelectedLeft"],"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":["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":";;;;;AAkBA,MAAMA,YAAAA,GAAeC,GAAAA,CAAIC,MAAAA,CAAOC,IAAAA,EAAM;AAAA,EACpCC,QAAAA,EAAU;AAAA,IACRC,IAAAA,EAAM;AAAA,MACJC,MAAMJ,MAAAA,CAAOK,cAAAA;AAAAA,MACbC,QAAQN,MAAAA,CAAOO;AAAAA,KACjB;AAAA,IACAC,SAAAA,EAAW;AAAA,MACTC,OAAAA,EAAS,IAAA;AAAA,MACTC,YAAAA,EAAcV,OAAO,uBAAuB,CAAA;AAAA,MAC5CW,cAAAA,EAAgBX,OAAO,yBAAyB;AAAA,KAClD;AAAA,IACAY,QAAAA,EAAU;AAAA,MAAEC,IAAAA,EAAMb,OAAO,gBAAgB;AAAA,KAAE;AAAA,IAC3Cc,OAAAA,EAAS;AAAA,MAAED,MAAMb,MAAAA,CAAOe;AAAAA,KAAa;AAAA,IACrCC,OAAAA,EAAS;AAAA,MAAEH,IAAAA,EAAMb,OAAO,eAAe;AAAA,KAAE;AAAA,IACzCiB,UAAAA,EAAY;AAAA,MAAEJ,IAAAA,EAAMb,OAAO,kBAAkB;AAAA,KAAE;AAAA,IAC/CkB,aAAAA,EAAe;AAAA,MAAEL,IAAAA,EAAMb,OAAO,sBAAsB;AAAA,KAAE;AAAA,IACtDmB,OAAAA,EAAS;AAAA,MAAEN,MAAMb,MAAAA,CAAOoB;AAAAA,KAAc;AAAA,IACtCC,UAAAA,EAAY;AAAA,MAAER,IAAAA,EAAMb,OAAO,4BAA4B;AAAA,KAAE;AAAA,IACzDsB,WAAAA,EAAa;AAAA,MAAET,IAAAA,EAAMb,OAAO,6BAA6B;AAAA,KAAE;AAAA,IAC3DuB,aAAAA,EAAe;AAAA,MAAEV,IAAAA,EAAMb,OAAO,+BAA+B;AAAA,KAAE;AAAA,IAC/DwB,YAAAA,EAAc;AAAA,MAAEX,IAAAA,EAAMb,OAAO,8BAA8B;AAAA,KAAE;AAAA,IAC7DyB,iBAAAA,EAAmB;AAAA,MAAEZ,IAAAA,EAAMb,OAAO,+BAA+B;AAAA;AAAE;AAEvE,CAAC,CAAA;AAOM,MAAM0B,aAAa,CAAgC;AAAA,EACxDC,EAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,eAAAA;AAAAA,EACAC,UAAAA;AAAAA,EACAC,aAAAA;AAAAA,EACAC,OAAAA;AAAAA,EACAC,KAAAA,GAAQ,MAAA;AAAA,EACRC,WAAAA;AAAAA,EACAC,cAAAA;AAAAA,EACAC,SAAAA;AAAAA,EACAC,KAAAA;AAAAA,EACAC,QAAAA;AAAAA,EACA,GAAGC;AACe,CAAA,KAAM;AACxB,EAAA,MAAMC,YAAaf,EAAAA,IAAM,KAAA;AAGzB,EAAA,MAAMgB,UAAAA,GACJb,kBACAC,eAAAA,IACCF,cAAAA,KAAmB,mBAAmBG,UAAAA,IAAcC,aAAAA,CAAAA,IACrD,CAAC,CAACI,cAAAA;AACJ,EAAA,MAAMO,WAAAA,GAAc;AAAA,IAClBC,MAAAA,EAAQR,cAAAA,GAAiB,MAAA,GAAS,CAAA,EAAGH,OAAO,CAAA,EAAA,CAAA;AAAA,IAC5C,GAAGK;AAAAA,GACL;AACA,EAAA,uBACE,GAAA,CAAC,SAAA,EAAA,EACC,SAAA,EAAWO,EAAAA,CACThD,YAAAA,CAAa;AAAA,IACXK,IAAAA,EAAMgC,KAAAA;AAAAA,IACN3B,SAAAA,EAAWqB,cAAAA;AAAAA,IACXjB,QAAAA,EAAUuB,KAAAA,KAAU,QAAA,IAAY,CAACC,WAAAA;AAAAA,IACjCtB,OAAAA,EAASc,UAAAA;AAAAA,IACTZ,OAAAA,EAASgB,UAAAA;AAAAA,IACTf,UAAAA,EAAYgB,aAAAA;AAAAA,IACZf,aAAAA,EAAe,CAAC,CAACmB,cAAAA;AAAAA,IACjBlB,OAAAA,EAASwB,UAAAA;AAAAA,IACTtB,UAAAA,EAAYS,cAAAA;AAAAA,IACZR,WAAAA,EAAaS,eAAAA;AAAAA,IACbR,aAAAA,EAAeM,mBAAmB,cAAA,IAAkBG,UAAAA;AAAAA,IACpDR,YAAAA,EAAcK,mBAAmB,cAAA,IAAkBI,aAAAA;AAAAA,IACnDR,iBAAAA,EAAmB,CAAC,CAACY;AAAAA,GACtB,GACDC,SACF,CAAA,EACA,OAAOM,WAAAA,EACP,GAAIH,OAEHD,QAAAA,EACH,CAAA;AAEJ;;;;"}

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

@@ -0,0 +1,32 @@
+const cell = "cell__OXAxg";
+const cell_type_body = "cell_type_body__SohuF";
+const cell_selection_indirect = "cell_selection_indirect__6e6yy";
+const cell_selection_direct = "cell_selection_direct__QEL9m";
+const cell_type_header = "cell_type_header__3tsr-";
+const cell_focused = "cell_focused__cmh-b";
+const cell__overlay = "cell__overlay__U9XGO";
+const cell__overlay_selected_top = "cell__overlay_selected_top__OMUJB";
+const cell__overlay_selected_left = "cell__overlay_selected_left__MiimG";
+const cell__overlay_selected_bottom = "cell__overlay_selected_bottom__2ra9F";
+const cell__overlay_selected_right = "cell__overlay_selected_right__Dt-g5";
+const styles = {
+	cell: cell,
+	cell_type_body: cell_type_body,
+	cell_selection_indirect: cell_selection_indirect,
+	cell_selection_direct: cell_selection_direct,
+	cell_type_header: cell_type_header,
+	"cell_no-border": "cell_no-border__9gXDK",
+	cell_focused: cell_focused,
+	"cell_last-row": "cell_last-row__DoJdk",
+	"cell_last-column": "cell_last-column__LgKM7",
+	"cell_row-auto-height": "cell_row-auto-height__yzQUR",
+	cell__overlay: cell__overlay,
+	cell__overlay_selected_top: cell__overlay_selected_top,
+	cell__overlay_selected_left: cell__overlay_selected_left,
+	cell__overlay_selected_bottom: cell__overlay_selected_bottom,
+	cell__overlay_selected_right: cell__overlay_selected_right,
+	"cell__overlay_row-auto-height": "cell__overlay_row-auto-height__teKk1"
+};
+
+export { cell, cell__overlay, cell__overlay_selected_bottom, cell__overlay_selected_left, cell__overlay_selected_right, cell__overlay_selected_top, cell_focused, cell_selection_direct, cell_selection_indirect, cell_type_body, cell_type_header, styles as default };
+//# sourceMappingURL=StyledCell.module.css.js.map

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

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

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

@@ -1,10 +1,12 @@
+import "./Grid.css";
 import { jsxs, jsx } from 'react/jsx-runtime';
 import { forwardRef, useState, useCallback, useRef, useMemo, useEffect } from 'react';
 import { VariableSizeGrid } from 'react-window';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import RowNumberColumn from './RowNumberColumn.js';
 import Header from './Header.js';
-import { styled } from 'styled-components';
+import { cn } from '../../lib/cva.js';
+import styles from './Grid.module.css.js';
 import { useSelectionActions } from './useSelectionActions.js';
 import { mergeRefs } from '../../utils/mergeRefs.js';
 import { Cell } from './Cell.js';
@@ -13,13 +15,18 @@ import copyGridElements from './copyGridElements.js';
 import useColumns from './useColumns.js';
 import useResizingState from './useResizingState.js';
 import { ContextMenu } from '../ContextMenu/index.js';
+import { cva } from 'class-variance-authority';
 
+const gridVariants = cva(styles["grid"], {
+  variants: {
+    bordered: {
+      true: styles["grid_bordered"]
+    }
+  }
+});
 const NO_BUTTONS_PRESSED = 0;
 const LEFT_BUTTON_PRESSED = 1;
 const RIGHT_BUTTON_PRESSED = 2;
-const GridContainer = styled.div.withConfig({
-  componentId: "sc-175eneg-0"
-})(["display:flex;flex-direction:column-reverse;user-select:none;overflow-anchor:none;"]);
 const getRenderedCursor = (children) => children.reduce(([minRow, maxRow, minColumn, maxColumn], {
   props: {
     columnIndex,
@@ -40,28 +47,12 @@ const getRenderedCursor = (children) => children.reduce(([minRow, maxRow, minCol
   }
   return [minRow, maxRow, minColumn, maxColumn];
 }, [Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY, Number.POSITIVE_INFINITY, Number.NEGATIVE_INFINITY]);
-const GridDataContainer = styled.div.withConfig({
-  componentId: "sc-175eneg-1"
-})(["position:absolute;top:0;left:0;", ""], ({
-  $top,
-  $left
-}) => `
-    margin-top: ${$top}px;
-    margin-left: ${$left}px;
-  `);
-const ContextMenuTrigger = styled.div.withConfig({
-  componentId: "sc-175eneg-2"
-})(["outline:none;overflow:hidden;height:", ";width:100%;background:", ";border-radius:", ";", ";"], ({
-  $height
-}) => $height ? `${$height}px` : "100%", ({
-  theme
-}) => theme.click.grid.body.cell.color.background.default, ({
-  theme,
-  $rounded
-}) => theme.click.grid.radii[$rounded], ({
-  $showBorder,
-  theme
-}) => $showBorder && `border: 1px solid ${theme.click.grid.header.cell.color.stroke.default}`);
+const roundedRadii = {
+  none: "var(--click-grid-radii-none)",
+  lg: "var(--click-grid-radii-lg)",
+  md: "var(--click-grid-radii-md)",
+  sm: "var(--click-grid-radii-sm)"
+};
 const OuterElementType = forwardRef((props, ref) => /* @__PURE__ */ jsx("div", { ref, "data-testid": "grid-outer-element", tabIndex: 0, ...props }));
 const Grid = forwardRef(({
   autoFocus,
@@ -331,9 +322,12 @@ const Grid = forwardRef(({
     ...containerProps
   }, ref) => {
     const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
-    return /* @__PURE__ */ jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
-      /* @__PURE__ */ jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
-      showRowNumber && /* @__PURE__ */ jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder, rowAutoHeight }),
+    return /* @__PURE__ */ jsxs("div", { ...containerProps, className: cn(styles["grid__inner"], `sticky-grid__container grid-outer ${props.className ?? ""}`), children: [
+      /* @__PURE__ */ jsx("div", { className: styles["grid__data"], style: {
+        "--grid-data-top": `${showHeader ? headerHeight : 0}px`,
+        "--grid-data-left": `${showRowNumber ? rowNumberWidth : 0}px`
+      }, ref, children }),
+      showRowNumber && /* @__PURE__ */ jsx(RowNumberColumn, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, rowStart, showBorder, rowAutoHeight }),
       showHeader && /* @__PURE__ */ jsx(Header, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
     ] });
   });
@@ -587,8 +581,14 @@ const Grid = forwardRef(({
       gridRef.current.resetAfterRowIndex(0);
     }
   }, [rowCount, columnCount]);
+  const contextMenuTriggerHeight = autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0;
   return /* @__PURE__ */ jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
-    /* @__PURE__ */ jsx(ContextMenuTrigger, { as: ContextMenu.Trigger, ref: mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, $rounded: rounded, $height: autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0, $showBorder: showBorder, children: /* @__PURE__ */ jsx(AutoSizer, { onResize, children: ({
+    /* @__PURE__ */ jsx(ContextMenu.Trigger, { className: gridVariants({
+      bordered: showBorder
+    }), style: {
+      "--grid-radius": roundedRadii[rounded],
+      "--grid-height": contextMenuTriggerHeight ? `${contextMenuTriggerHeight}px` : "100%"
+    }, ref: mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, children: /* @__PURE__ */ jsx(AutoSizer, { onResize, children: ({
       height,
       width
     }) => /* @__PURE__ */ jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: getRowHeight, useIsScrolling, innerElementType: InnerElementType, itemData: data, initialScrollTop: focus.row < rowStart ? focus.row * rowHeight : (focus.row - rowStart) * rowHeight, initialScrollLeft: getColumnHorizontalPosition(focus.column), columnWidth, rowCount, onScroll, outerRef, outerElementType: OuterElementType, onItemsRendered, ...props, children: CellWithWidth }) }) }),