@clickhouse/click-ui 0.0.147 → 0.0.149

package/dist/click-ui.es.js

@@ -14844,9 +14844,9 @@ const FlyoutContent = styled($5d3850c4d0b4e6c7$export$b6d9565de1e068cf).withConf
     height: ${$strategy === "relative" ? "100%" : "auto"};
     padding: 0 ${theme2.click.flyout.space[$type].x}
     gap: ${theme2.click.flyout.space[$type].gap};
+    box-shadow: ${$align === "start" ? theme2.click.flyout.shadow.reverse : theme2.click.flyout.shadow.default};
     border-${$align === "start" ? "right" : "left"}: 1px solid ${theme2.click.flyout.color.stroke.default};
     background: ${theme2.click.flyout.color.background.default};
-    box-shadow: ${theme2.click.flyout.shadow.default}};
 
     @media (max-width: 1024px) {
       ${$strategy === "relative" ? `
@@ -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}`)) })
   ] });
 });
@@ -47283,7 +47288,8 @@ const click = {
       }
     },
     shadow: {
-      "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+      "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+      reverse: "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
     },
     size: {
       "default": {
@@ -47926,7 +47932,8 @@ const spaces = {
 const shadow = {
   "1": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)",
   "2": "0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1)",
-  "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+  "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+  "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
 };
 const breakpoint = {
   sizes: {

package/dist/click-ui.umd.js

@@ -14861,9 +14861,9 @@ var __publicField = (obj, key, value) => {
     height: ${$strategy === "relative" ? "100%" : "auto"};
     padding: 0 ${theme2.click.flyout.space[$type].x}
     gap: ${theme2.click.flyout.space[$type].gap};
+    box-shadow: ${$align === "start" ? theme2.click.flyout.shadow.reverse : theme2.click.flyout.shadow.default};
     border-${$align === "start" ? "right" : "left"}: 1px solid ${theme2.click.flyout.color.stroke.default};
     background: ${theme2.click.flyout.color.background.default};
-    box-shadow: ${theme2.click.flyout.shadow.default}};
 
     @media (max-width: 1024px) {
       ${$strategy === "relative" ? `
@@ -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}`)) })
     ] });
   });
@@ -47300,7 +47305,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
         }
       },
       shadow: {
-        "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+        "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+        reverse: "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
       },
       size: {
         "default": {
@@ -47943,7 +47949,8 @@ Defaulting to \`${$89eedd556c436f6a$var$DEFAULT_ORIENTATION}\`.`;
   const shadow = {
     "1": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)",
     "2": "0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1)",
-    "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+    "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+    "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
   };
   const breakpoint = {
     sizes: {

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/dist/styles/types.d.ts

@@ -2479,6 +2479,7 @@ export interface Theme {
             };
             "shadow": {
                 "default": string;
+                "reverse": string;
             };
             "size": {
                 "default": {
@@ -3122,6 +3123,7 @@ export interface Theme {
         "1": string;
         "2": string;
         "3": string;
+        "4": string;
     };
     "breakpoint": {
         "sizes": {

package/dist/styles/variables.json.d.ts

@@ -2478,7 +2478,8 @@ declare const _default: {
         }
       },
       "shadow": {
-        "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+        "default": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+        "reverse": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
       },
       "size": {
         "default": {
@@ -3121,7 +3122,8 @@ declare const _default: {
   "shadow": {
     "1": "0 4px 6px -1px lch(6.77 0 0 / 0.15), 0 2px 4px -1px lch(6.77 0 0 / 0.15)",
     "2": "0 4px 4px 0 rgba(88, 92, 98, 0.06), inset 5px 0 10px 0 rgba(104, 105, 111, 0.1)",
-    "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)"
+    "3": "-5px 0 20px 0 rgba(0, 0, 0, 0.08), -6px 0 10px 0 rgba(0, 0, 0, 0.08)",
+    "4": "5px 0 20px 0 rgba(0, 0, 0, 0.08), 6px 0 10px 0 rgba(0, 0, 0, 0.08)"
   },
   "breakpoint": {
     "sizes": {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.147",
+  "version": "v0.0.149",
   "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",