@clickhouse/click-ui 0.0.135 → 0.0.137

package/dist/click-ui.es.js

@@ -31394,6 +31394,7 @@ const Grid = forwardRef(({
   onCopyCallback,
   onContextMenu: onContextMenuProp,
   forwardedGridRef,
+  onItemsRendered: onItemsRenderedProp,
   ...props
 }, forwardedRef) => {
   const [focus, setFocus] = useState(focusProp ?? {
@@ -31836,11 +31837,29 @@ const Grid = forwardRef(({
       setMenuOptions([...defaultMenuOptions, ...newOptions]);
     }
   };
+  const lastItemsRenderedProps = useRef();
+  const lastRowStart = useRef(rowStart);
+  const onItemsRendered = useCallback((props2) => {
+    lastItemsRenderedProps.current = props2;
+    return onItemsRenderedProp == null ? void 0 : onItemsRenderedProp({
+      ...props2,
+      visibleRowStartIndex: props2.visibleRowStartIndex + rowStart,
+      visibleRowStopIndex: props2.visibleRowStopIndex + rowStart,
+      overscanRowStartIndex: props2.overscanRowStartIndex + rowStart,
+      overscanRowStopIndex: props2.overscanRowStopIndex + rowStart
+    });
+  }, [onItemsRenderedProp, rowStart]);
+  useEffect(() => {
+    if (lastItemsRenderedProps.current && rowStart !== lastRowStart.current) {
+      onItemsRendered(lastItemsRenderedProps.current);
+      lastRowStart.current = rowStart;
+    }
+  }, [rowStart, onItemsRendered]);
   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, ...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: Cell }) }) }),
     /* @__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

@@ -31411,6 +31411,7 @@ var __publicField = (obj, key, value) => {
     onCopyCallback,
     onContextMenu: onContextMenuProp,
     forwardedGridRef,
+    onItemsRendered: onItemsRenderedProp,
     ...props
   }, forwardedRef) => {
     const [focus, setFocus] = React.useState(focusProp ?? {
@@ -31853,11 +31854,29 @@ var __publicField = (obj, key, value) => {
         setMenuOptions([...defaultMenuOptions, ...newOptions]);
       }
     };
+    const lastItemsRenderedProps = React.useRef();
+    const lastRowStart = React.useRef(rowStart);
+    const onItemsRendered = React.useCallback((props2) => {
+      lastItemsRenderedProps.current = props2;
+      return onItemsRenderedProp == null ? void 0 : onItemsRenderedProp({
+        ...props2,
+        visibleRowStartIndex: props2.visibleRowStartIndex + rowStart,
+        visibleRowStopIndex: props2.visibleRowStopIndex + rowStart,
+        overscanRowStartIndex: props2.overscanRowStartIndex + rowStart,
+        overscanRowStopIndex: props2.overscanRowStopIndex + rowStart
+      });
+    }, [onItemsRenderedProp, rowStart]);
+    React.useEffect(() => {
+      if (lastItemsRenderedProps.current && rowStart !== lastRowStart.current) {
+        onItemsRendered(lastItemsRenderedProps.current);
+        lastRowStart.current = rowStart;
+      }
+    }, [rowStart, onItemsRendered]);
     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, ...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: Cell }) }) }),
       /* @__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/Icon/types.d.ts

@@ -4,7 +4,7 @@ import { FlagName, FlagProps } from "../icons/Flags";
 import { LogoName } from "../Logos/types";
 import { PaymentName, PaymentProps } from "../icons/Payments";
 export type IconSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
-export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "no-cloud", "pause", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
+export declare const ICON_NAMES: readonly ["activity", "alarm", "arrow-down", "arrow-left", "arrow-right", "arrow-triangle", "arrow-directions", "arrow-up", "auth-app", "auth-sms", "backups", "bar-chart", "bell", "beta", "blog", "book", "brackets", "briefcase", "building", "burger-menu", "cards", "cell-tower", "chat", "check", "check-in-circle", "chevron-down", "chevron-left", "chevron-right", "chevron-up", "circle", "clock", "cloud", "cloud-keys", "code", "code-in-square", "connect", "connect-alt", "console", "copy", "cross", "credit-card", "data", "database", "disk", "display", "document", "dot", "dots-horizontal", "dots-triangle", "dots-vertical", "dots-vertical-double", "download", "download-in-circle", "email", "empty", "enter", "eye", "eye-closed", "filter", "fire", "flag", "flask", "folder-closed", "folder-open", "gear", "gift", "git-merge", "history", "horizontal-loading", "home", "http", "http-monitoring", "info-in-circle", "information", "insert-row", "integrations", "key", "keys", "lifebuoy", "light-bulb", "lightening", "line-in-circle", "loading", "loading-animated", "lock", "metrics", "metrics-alt", "no-cloud", "pause", "payment", "pencil", "pie-chart", "play", "play-in-circle", "plus", "popout", "puzzle-piece", "query", "question", "refresh", "rocket", "search", "secure", "server", "services", "settings", "share", "share-arrow", "share-network", "slide-in", "slide-out", "sort-alt", "sort", "sparkle", "speaker", "speed", "star", "stop", "support", "table", "taxi", "trash", "upload", "url", "user", "users", "warning", "waves"];
 export type IconName = (typeof ICON_NAMES)[number];
 export interface IconProps extends SVGAttributes<HTMLOrSVGElement> {
     name: IconName;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@clickhouse/click-ui",
-  "version": "0.0.135",
+  "version": "0.0.137",
   "description": "Official ClickHouse design system react library",
   "type": "module",
   "license": "Apache-2.0",