@clickhouse/click-ui 0.8.0 → 0.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"StyledCell.cjs","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.cjs","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","jsx","cn"],"mappings":"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"}

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

@@ -0,0 +1,146 @@
+/* stylelint-disable custom-property-pattern -- design tokens use camelCase (e.g. selectDirect) */
+
+/*
+ * The original styled-component dispatches background / text colour / border
+ * colour off `$type` (body|header) and `$selectionType`, and toggles individual
+ * borders / a `::before` overlay off boolean flags. Colours are aliased to local
+ * custom properties (set by the type + selection modifiers) so the shared border
+ * / overlay rules can reference them once.
+ */
+
+.cell__OXAxg {
+  display: block;
+  box-sizing: border-box;
+  width: 100%;
+  padding: var(--cell-space-y) var(--cell-space-x);
+  overflow: hidden;
+  border-top: 1px solid var(--cell-stroke-default);
+  border-left: 1px solid var(--cell-stroke-default);
+  background: var(--cell-background);
+  color: var(--cell-color);
+  font: var(--click-grid-cell-text-default);
+  text-align: left;
+  white-space: nowrap;
+  cursor: default;
+  text-overflow: ellipsis;
+}
+
+.cell__OXAxg[data-align='right'] {
+  text-align: right;
+}
+
+.cell_type_body__SohuF {
+  --cell-stroke-default: var(--click-grid-body-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-body-cell-space-y);
+  --cell-space-x: var(--click-grid-body-cell-space-x);
+  --cell-background: var(--click-grid-body-cell-color-background-default);
+  --cell-color: var(--click-grid-body-cell-color-text-default);
+}
+
+.cell_type_body__SohuF.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectIndirect);
+}
+
+.cell_type_body__SohuF.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-body-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-body-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-body-cell-color-text-selectDirect);
+}
+
+.cell_type_header__3tsr- {
+  --cell-stroke-default: var(--click-grid-header-cell-color-stroke-default);
+  --cell-stroke-select-direct: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-default);
+  --cell-space-y: var(--click-grid-header-cell-space-y);
+  --cell-space-x: var(--click-grid-header-cell-space-x);
+  --cell-background: var(--click-grid-header-cell-color-background-default);
+  --cell-color: var(--click-grid-header-cell-color-title-default);
+}
+
+.cell_type_header__3tsr-.cell_selection_indirect__6e6yy {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectIndirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectIndirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectIndirect);
+}
+
+.cell_type_header__3tsr-.cell_selection_direct__QEL9m {
+  --cell-stroke-last: var(--click-grid-header-cell-color-stroke-selectDirect);
+  --cell-background: var(--click-grid-header-cell-color-background-selectDirect);
+  --cell-color: var(--click-grid-header-cell-color-title-selectDirect);
+}
+
+/* header cell with no border removes top/left edges on the corner cells */
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-row='-1'] {
+  border-top: none;
+}
+
+.cell_type_header__3tsr-.cell_no-border__9gXDK[data-grid-column='-1'] {
+  border-left: none;
+}
+
+/* a focused cell draws its last-edge borders with the select-direct stroke */
+.cell_focused__cmh-b {
+  box-shadow: inset 0 0 0 1px var(--cell-stroke-select-direct);
+}
+
+/*
+ * Focus must win the last-edge stroke colour over any selection state. The
+ * original styled-component resolved the last-row / last-column border colour
+ * inline as `stroke[$isFocused ? 'selectDirect' : $selectionType]`, so focus
+ * always overrode the selection stroke. The `.cell_type_*.cell_selection_*`
+ * rules above set `--cell-stroke-last` at (0,2,0) specificity, so the focus
+ * override is qualified with the type class to match that specificity and,
+ * coming later in source order, take precedence. `.cell_focused` always
+ * co-occurs with a type class.
+ */
+.cell_type_body__SohuF.cell_focused__cmh-b,
+.cell_type_header__3tsr-.cell_focused__cmh-b {
+  --cell-stroke-last: var(--cell-stroke-select-direct);
+}
+
+/* only the last row/column draw the closing border, colored by focus/selection */
+.cell_last-row__DoJdk {
+  border-bottom: 1px solid var(--cell-stroke-last);
+}
+
+.cell_last-column__LgKM7 {
+  border-right: 1px solid var(--cell-stroke-last);
+}
+
+/* rowAutoHeight resets the entire border last, overriding every rule above */
+.cell_row-auto-height__yzQUR {
+  min-height: auto;
+  overflow-y: auto;
+  border: none;
+}
+
+/* selection / focus overlay drawn on top of the cell so adjacent borders meet */
+.cell__overlay__U9XGO::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+
+.cell__overlay_selected_top__OMUJB::before {
+  border-top: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_left__MiimG::before {
+  border-left: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_bottom__2ra9F::before {
+  border-bottom: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_selected_right__Dt-g5::before {
+  border-right: 1px solid var(--cell-stroke-select-direct);
+}
+
+.cell__overlay_row-auto-height__teKk1::before {
+  border: none;
+}

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

@@ -0,0 +1,47 @@
+'use strict';
+
+Object.defineProperties(exports, { __esModule: { value: true }, [Symbol.toStringTag]: { value: 'Module' } });
+
+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"
+};
+
+exports.cell = cell;
+exports.cell__overlay = cell__overlay;
+exports.cell__overlay_selected_bottom = cell__overlay_selected_bottom;
+exports.cell__overlay_selected_left = cell__overlay_selected_left;
+exports.cell__overlay_selected_right = cell__overlay_selected_right;
+exports.cell__overlay_selected_top = cell__overlay_selected_top;
+exports.cell_focused = cell_focused;
+exports.cell_selection_direct = cell_selection_direct;
+exports.cell_selection_indirect = cell_selection_indirect;
+exports.cell_type_body = cell_type_body;
+exports.cell_type_header = cell_type_header;
+exports.default = styles;
+//# sourceMappingURL=StyledCell.module.css.cjs.map

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

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

package/dist/cjs/components/Grid/index.cjs

@@ -1,3 +1,4 @@
+require("./Grid.css");
 'use strict';
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
@@ -8,7 +9,8 @@ const reactWindow = require('react-window');
 const AutoSizer = require('react-virtualized-auto-sizer');
 const RowNumberColumn = require('./RowNumberColumn.cjs');
 const Header = require('./Header.cjs');
-const styledComponents = require('styled-components');
+const cva = require('../../lib/cva.cjs');
+const Grid_module = require('./Grid.module.css.cjs');
 const useSelectionActions = require('./useSelectionActions.cjs');
 const mergeRefs = require('../../utils/mergeRefs.cjs');
 const Cell = require('./Cell.cjs');
@@ -17,17 +19,22 @@ const copyGridElements = require('./copyGridElements.cjs');
 const useColumns = require('./useColumns.cjs');
 const useResizingState = require('./useResizingState.cjs');
 const ContextMenu = require('../ContextMenu/index.cjs');
+const classVarianceAuthority = require('class-variance-authority');
 
 const _interopDefault = e => e && e.__esModule ? e : { default: e };
 
 const AutoSizer__default = /*#__PURE__*/_interopDefault(AutoSizer);
 
+const gridVariants = classVarianceAuthority.cva(Grid_module.default["grid"], {
+  variants: {
+    bordered: {
+      true: Grid_module.default["grid_bordered"]
+    }
+  }
+});
 const NO_BUTTONS_PRESSED = 0;
 const LEFT_BUTTON_PRESSED = 1;
 const RIGHT_BUTTON_PRESSED = 2;
-const GridContainer = styledComponents.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,
@@ -48,28 +55,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 = styledComponents.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 = styledComponents.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 = react.forwardRef((props, ref) => /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-testid": "grid-outer-element", tabIndex: 0, ...props }));
 const Grid = react.forwardRef(({
   autoFocus,
@@ -339,9 +330,12 @@ const Grid = react.forwardRef(({
     ...containerProps
   }, ref) => {
     const [minRow, maxRow, minColumn, maxColumn] = getRenderedCursor(children);
-    return /* @__PURE__ */ jsxRuntime.jsxs(GridContainer, { ...containerProps, className: `sticky-grid__container grid-outer ${props.className ?? ""}`, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(GridDataContainer, { $top: showHeader ? headerHeight : 0, $left: showRowNumber ? rowNumberWidth : 0, ref, children }),
-      showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn.default, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, showHeader, rowStart, showBorder, rowAutoHeight }),
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ...containerProps, className: cva.cn(Grid_module.default["grid__inner"], `sticky-grid__container grid-outer ${props.className ?? ""}`), children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: Grid_module.default["grid__data"], style: {
+        "--grid-data-top": `${showHeader ? headerHeight : 0}px`,
+        "--grid-data-left": `${showRowNumber ? rowNumberWidth : 0}px`
+      }, ref, children }),
+      showRowNumber && /* @__PURE__ */ jsxRuntime.jsx(RowNumberColumn.default, { scrolledHorizontal, minRow, maxRow, rowHeight, headerHeight, rowWidth: rowNumberWidth, rowCount, getSelectionType, rowStart, showBorder, rowAutoHeight }),
       showHeader && /* @__PURE__ */ jsxRuntime.jsx(Header.default, { scrolledVertical, scrolledHorizontal, showRowNumber, minColumn, maxColumn, height: headerHeight, getColumnWidth: columnWidth, cell, rowNumberWidth, getSelectionType, columnCount, onColumnResize, getColumnHorizontalPosition, getResizerPosition, showBorder, resizingState })
     ] });
   });
@@ -595,8 +589,14 @@ const Grid = react.forwardRef(({
       gridRef.current.resetAfterRowIndex(0);
     }
   }, [rowCount, columnCount]);
+  const contextMenuTriggerHeight = autoHeight ? rowCount * rowHeight + (showHeader ? headerHeight : 0) + elementBorderRef.current.scrollBarHeight : void 0;
   return /* @__PURE__ */ jsxRuntime.jsxs(ContextMenu.ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(ContextMenuTrigger, { as: ContextMenu.ContextMenu.Trigger, ref: mergeRefs.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__ */ jsxRuntime.jsx(AutoSizer__default.default, { onResize, children: ({
+    /* @__PURE__ */ jsxRuntime.jsx(ContextMenu.ContextMenu.Trigger, { className: gridVariants({
+      bordered: showBorder
+    }), style: {
+      "--grid-radius": roundedRadii[rounded],
+      "--grid-height": contextMenuTriggerHeight ? `${contextMenuTriggerHeight}px` : "100%"
+    }, ref: mergeRefs.mergeRefs([forwardedRef, containerRef]), tabIndex: 0, onMouseDown, onMouseMove, onKeyDown, onPointerDown, onPointerUp, onPointerLeave: setPointerCapture, onPointerEnter: setPointerCapture, onContextMenu, children: /* @__PURE__ */ jsxRuntime.jsx(AutoSizer__default.default, { onResize, children: ({
       height,
       width
     }) => /* @__PURE__ */ jsxRuntime.jsx(reactWindow.VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs.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 }) }) }),