@clickhouse/click-ui 0.0.147 → 0.0.148

package/dist/click-ui.es.js

@@ -16987,7 +16987,7 @@ const Column = ({
   const isSelected = selectionType === "selectDirect";
   const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderCellContainer, { $width: columnWidth(columnIndex), $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-    /* @__PURE__ */ jsxRuntimeExports.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 }),
+    /* @__PURE__ */ jsxRuntimeExports.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(columnIndex) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnResizer, { height, onColumnResize, columnIndex, setResizeCursorPosition })
   ] });
 };
@@ -31359,6 +31359,7 @@ const addCellToRow = (row, cell, rowIndex, columnIndex) => {
   const html = renderToStaticMarkup(createElement$1(cell, {
     rowIndex,
     columnIndex,
+    width: 1e3,
     type: "row-cell"
   }));
   td.innerHTML = html;
@@ -32072,11 +32073,15 @@ const Grid = forwardRef(({
       lastRowStart.current = rowStart;
     }
   }, [rowStart, onItemsRendered]);
+  const CellWithWidth = (args) => {
+    const width = columnWidth(args.columnIndex);
+    return /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { ...args, width });
+  };
   return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
     /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(AutoSizer, { onResize, children: ({
       height,
       width
-    }) => /* @__PURE__ */ jsxRuntimeExports.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, 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: Cell }) }) }),
+    }) => /* @__PURE__ */ jsxRuntimeExports.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, 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 }) }) }),
     /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu.Content, { children: menuOptions.map((option2, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu.Item, { onSelect: option2.onSelect, children: option2.label }, `grid-${index2}`)) })
   ] });
 });

package/dist/click-ui.umd.js

@@ -17004,7 +17004,7 @@ var __publicField = (obj, key, value) => {
     const isSelected = selectionType === "selectDirect";
     const isSelectedLeft = (leftSelectionType === "selectDirect" || isSelected) && leftSelectionType !== selectionType;
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(HeaderCellContainer, { $width: columnWidth(columnIndex), $columnPosition: columnPosition, $height: height, "data-header": columnIndex, children: [
-      /* @__PURE__ */ jsxRuntimeExports.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 }),
+      /* @__PURE__ */ jsxRuntimeExports.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(columnIndex) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ColumnResizer, { height, onColumnResize, columnIndex, setResizeCursorPosition })
     ] });
   };
@@ -31376,6 +31376,7 @@ var __publicField = (obj, key, value) => {
     const html = renderToStaticMarkup(React.createElement(cell, {
       rowIndex,
       columnIndex,
+      width: 1e3,
       type: "row-cell"
     }));
     td.innerHTML = html;
@@ -32089,11 +32090,15 @@ var __publicField = (obj, key, value) => {
         lastRowStart.current = rowStart;
       }
     }, [rowStart, onItemsRendered]);
+    const CellWithWidth = (args) => {
+      const width = columnWidth(args.columnIndex);
+      return /* @__PURE__ */ jsxRuntimeExports.jsx(Cell, { ...args, width });
+    };
     return /* @__PURE__ */ jsxRuntimeExports.jsxs(ContextMenu, { modal: false, onOpenChange: setContextMenuOpen, children: [
       /* @__PURE__ */ jsxRuntimeExports.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__ */ jsxRuntimeExports.jsx(AutoSizer, { onResize, children: ({
         height,
         width
-      }) => /* @__PURE__ */ jsxRuntimeExports.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, 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: Cell }) }) }),
+      }) => /* @__PURE__ */ jsxRuntimeExports.jsx(VariableSizeGrid, { ref: forwardedGridRef ? mergeRefs([forwardedGridRef, gridRef]) : gridRef, height, width, columnCount, rowHeight: () => rowHeight, 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 }) }) }),
       /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu.Content, { children: menuOptions.map((option, index2) => /* @__PURE__ */ jsxRuntimeExports.jsx(ContextMenu.Item, { onSelect: option.onSelect, children: option.label }, `grid-${index2}`)) })
     ] });
   });

package/dist/components/Grid/Cell.d.ts

@@ -1,4 +1,8 @@
 import { GridChildComponentProps } from 'react-window';
 import { ItemDataType } from './types';
 
-export declare const Cell: import('react').MemoExoticComponent<({ data, rowIndex, columnIndex, style, ...props }: GridChildComponentProps<ItemDataType>) => import("react/jsx-runtime").JSX.Element>;
+type CellProps = GridChildComponentProps<ItemDataType> & {
+    width: number;
+};
+export declare const Cell: import('react').MemoExoticComponent<({ data, rowIndex, columnIndex, style, ...props }: CellProps) => import("react/jsx-runtime").JSX.Element>;
+export {};

package/dist/components/Grid/types.d.ts

@@ -9,10 +9,12 @@ interface CellCommonProps extends HTMLAttributes<HTMLElement> {
 interface CellHeaderProps extends CellCommonProps {
     rowIndex?: never;
     type: "header-cell";
+    width: number;
 }
 interface CellBodyProps extends CellCommonProps {
     rowIndex: number;
     type: "row-cell";
+    width: number;
 }
 type CellComponentProps = CellHeaderProps | CellBodyProps;
 export type CellProps = ComponentType<CellComponentProps>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.147",
+  "version": "v0.0.148",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",
@@ -32,6 +32,7 @@
     "test": "vitest",
     "dev": "vite",
     "generate-tokens": "node build-tokens.js",
+    "typecheck": "tsc --noEmit",
     "build": "tsc && vite build",
     "build:watch": "watch 'npm run build' ./src",
     "lint": "eslint src --ext ts,tsx --report-unused-disable-directives --max-warnings 0",