@react-fabric/data 1.0.0-beta.57 → 1.0.0-beta.59

package/dist/cjs/table/HeaderCell.js

@@ -1,5 +1,6 @@
 'use strict';
 
+var _defineProperty = require('@babel/runtime/helpers/defineProperty');
 var _toConsumableArray = require('@babel/runtime/helpers/toConsumableArray');
 var core = require('@react-fabric/core');
 var utilities = require('@react-fabric/utilities');
@@ -9,15 +10,14 @@ var Context = require('./Context.js');
 var types = require('./types.js');
 var jsxRuntime = require('react/jsx-runtime');
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
     field = _ref.field,
     dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     actions = _ref.actions;
     _ref.locked;
     var filter = _ref.filter,
@@ -111,12 +111,7 @@ var HeaderCell = function HeaderCell(_ref) {
       disabled: !(tooltip !== null && tooltip !== void 0 ? tooltip : label),
       children: /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex-initial px-2 py-1 text-sm truncate sticky start-0",
-        children: [icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-          icon: icon,
-          bg: iconBg,
-          color: iconColor,
-          rtlFlip: rtlFlip
-        }), /*#__PURE__*/jsxRuntime.jsx("span", {
+        children: [icon && /*#__PURE__*/jsxRuntime.jsx(core.Icon, _objectSpread({}, core.getIconProps(icon))), /*#__PURE__*/jsxRuntime.jsx("span", {
           children: label !== null && label !== void 0 ? label : " "
         })]
       })

package/dist/cjs/tree/TreeNode.js

@@ -52,7 +52,9 @@ var TreeNode = function TreeNode(_ref) {
   }, [noLines, node.lines]);
   var nodeIcon = react.useMemo(function () {
     if (node.icon) return node.icon;
-    return node.leaf ? defaultLeafIcon : defaultNodeIcon;
+    return {
+      icon: node.leaf ? defaultLeafIcon : defaultNodeIcon
+    };
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
   var canCheck = react.useMemo(function () {
     return checkable === true || checkable === "leafOnly" && node.leaf;
@@ -102,12 +104,7 @@ var TreeNode = function TreeNode(_ref) {
       },
       children: [nodeIcon && /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: "flex-content max-w-6 me-1 self-center leading-none",
-        children: [/*#__PURE__*/react.isValidElement(nodeIcon) && nodeIcon, utilities.isString(nodeIcon) && /*#__PURE__*/jsxRuntime.jsx(core.Icon, {
-          icon: nodeIcon,
-          bg: node.iconBg,
-          color: node.iconColor,
-          rtlFlip: node.rtlFlip
-        })]
+        children: [/*#__PURE__*/react.isValidElement(nodeIcon) && nodeIcon, utilities.isString(nodeIcon) && /*#__PURE__*/jsxRuntime.jsx(core.Icon, _objectSpread({}, core.getIconProps(nodeIcon)))]
       }), node.childSelected && !node.open && /*#__PURE__*/jsxRuntime.jsx("span", {
         className: " flex-content text-primary-500",
         children: "\u2022"

package/dist/cjs/virtual/Gallery.js

@@ -87,13 +87,13 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     estimateSize: function estimateSize() {
       return height;
     },
-    overscan: 2
+    overscan: 0
   });
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = react.useRef(0);
   react.useEffect(function () {
-    var _virtualItems$2$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = react.useCallback(function () {
@@ -144,13 +144,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       };
     }
   }, [onLoadMore, virtualItems]);
+  var isRenderedRef = react.useRef(false);
   react.useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-        align: "start"
-      });
-    }, 100);
-  }, [columnCount]);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      initialScroll && setTimeout(function () {
+        virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+          align: "start"
+        });
+      }, 200);
+    }
+  }, [columnCount, initialScroll, itemList]);
   react.useImperativeHandle(galleryRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
@@ -204,10 +208,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               "data-index": index,
               ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
+                var _itemList;
                 return /*#__PURE__*/jsxRuntime.jsx("div", {
                   "data-index": index * columnCount + col,
                   className: classNames("grid rounded-capped"),
-                  children: itemList[index * columnCount + col] && children(itemList[index * columnCount + col])
+                  style: {
+                    minWidth: width,
+                    minHeight: height
+                  },
+                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
+                    className: "p-2"
+                  })
                 }, "".concat(key, ":").concat(col));
               })
             }, key);

package/dist/cjs/virtual/List.js

@@ -56,7 +56,7 @@ var _VirtualList = function _VirtualList(_ref) {
   var scrollerRef = react.useRef(null);
   var virtualizer = reactVirtual.useVirtualizer({
     count: count,
-    overscan: 2,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: function getScrollElement() {
       return scrollerRef.current;
@@ -68,8 +68,8 @@ var _VirtualList = function _VirtualList(_ref) {
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = react.useRef(0);
   react.useEffect(function () {
-    var _virtualItems$2$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = react.useCallback(function () {
@@ -131,13 +131,17 @@ var _VirtualList = function _VirtualList(_ref) {
       };
     }
   }, [onLoadMore, virtualItems]);
+  var isRenderedRef = react.useRef(false);
   react.useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(initialScroll, {
-        align: "start"
-      });
-    }, 100);
-  }, []);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      initialScroll && setTimeout(function () {
+        virtualizer.scrollToIndex(Math.floor(initialScroll), {
+          align: "start"
+        });
+      }, 200);
+    }
+  }, [itemList, initialScroll]);
   react.useImperativeHandle(listRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
@@ -189,13 +193,20 @@ var _VirtualList = function _VirtualList(_ref) {
               display: "inline-block"
             }
           }), virtualItems.map(function (_ref3) {
+            var _itemList$index;
             var key = _ref3.key,
               index = _ref3.index;
             return /*#__PURE__*/jsxRuntime.jsx("div", {
               "data-index": index,
               ref: virtualizer.measureElement,
               className: classNames("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid"),
-              children: children(itemList[index])
+              style: {
+                minWidth: width,
+                minHeight: height
+              },
+              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {
+                className: "p-2"
+              })
             }, key);
           })]
         }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {

package/dist/cjs/virtual/Scroller.js

@@ -39,35 +39,43 @@ var Scroller = function Scroller(_ref) {
     variant: "link",
     className: "outline",
     children: [/*#__PURE__*/jsxRuntime.jsx(core.Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll to top",
-      icon: vertical ? core.CoreIcons.chevronsUp : core.CoreIcons.chevronsLeft,
+      icon: {
+        icon: vertical ? core.CoreIcons.chevronsUp : core.CoreIcons.chevronsLeft,
+        rtlFlip: true
+      },
       disabled: (scrollActive & 2) === 0,
       onClick: onStart
     }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll up",
-      icon: vertical ? core.CoreIcons.chevronUp : core.CoreIcons.chevronLeft,
+      icon: {
+        icon: vertical ? core.CoreIcons.chevronUp : core.CoreIcons.chevronLeft,
+        rtlFlip: true
+      },
       disabled: (scrollActive & 2) === 0,
       onClick: onPrevious
     }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll down",
-      icon: vertical ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight,
+      icon: {
+        icon: vertical ? core.CoreIcons.chevronDown : core.CoreIcons.chevronRight,
+        rtlFlip: true
+      },
       disabled: scrollActive % 2 === 0,
       onClick: onNext
     }), /*#__PURE__*/jsxRuntime.jsx(core.Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll to bottom",
-      icon: vertical ? core.CoreIcons.chevronsDown : core.CoreIcons.chevronsRight,
+      icon: {
+        icon: vertical ? core.CoreIcons.chevronsDown : core.CoreIcons.chevronsRight,
+        rtlFlip: true
+      },
       disabled: scrollActive % 2 === 0,
       onClick: onEnd
     })]

package/dist/esm/table/HeaderCell.js

@@ -1,7 +1,8 @@
 'use client';
 
+import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
-import { Menu, CoreIcons, MenuItem, Divider, Tooltip, Icon, DropdownTool, Button } from '@react-fabric/core';
+import { Menu, CoreIcons, MenuItem, Divider, Tooltip, Icon, getIconProps, DropdownTool, Button } from '@react-fabric/core';
 import { isEmpty } from '@react-fabric/utilities';
 import { useMemo, useCallback } from 'react';
 import { ColumnFilters } from './ColumnFilters.js';
@@ -9,15 +10,14 @@ import { useTableContext } from './Context.js';
 import { COL_DEFAULT_WIDTH, COL_MIN_WIDTH, COL_MAX_WIDTH } from './types.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var HeaderCell = function HeaderCell(_ref) {
   var id = _ref.id,
     field = _ref.field,
     dataType = _ref.dataType,
     label = _ref.label,
     icon = _ref.icon,
-    iconBg = _ref.iconBg,
-    iconColor = _ref.iconColor,
-    rtlFlip = _ref.rtlFlip,
     actions = _ref.actions;
     _ref.locked;
     var filter = _ref.filter,
@@ -111,12 +111,7 @@ var HeaderCell = function HeaderCell(_ref) {
       disabled: !(tooltip !== null && tooltip !== void 0 ? tooltip : label),
       children: /*#__PURE__*/jsxs("div", {
         className: "flex-initial px-2 py-1 text-sm truncate sticky start-0",
-        children: [icon && /*#__PURE__*/jsx(Icon, {
-          icon: icon,
-          bg: iconBg,
-          color: iconColor,
-          rtlFlip: rtlFlip
-        }), /*#__PURE__*/jsx("span", {
+        children: [icon && /*#__PURE__*/jsx(Icon, _objectSpread({}, getIconProps(icon))), /*#__PURE__*/jsx("span", {
           children: label !== null && label !== void 0 ? label : " "
         })]
       })

package/dist/esm/tree/TreeNode.js

@@ -1,7 +1,7 @@
 'use client';
 
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
-import { getBadgeProps, Icon, CoreIcons, Badge } from '@react-fabric/core';
+import { getBadgeProps, Icon, CoreIcons, getIconProps, Badge } from '@react-fabric/core';
 import { isString, isEmpty } from '@react-fabric/utilities';
 import classNames from 'classnames';
 import { useMemo, isValidElement } from 'react';
@@ -52,7 +52,9 @@ var TreeNode = function TreeNode(_ref) {
   }, [noLines, node.lines]);
   var nodeIcon = useMemo(function () {
     if (node.icon) return node.icon;
-    return node.leaf ? defaultLeafIcon : defaultNodeIcon;
+    return {
+      icon: node.leaf ? defaultLeafIcon : defaultNodeIcon
+    };
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
   var canCheck = useMemo(function () {
     return checkable === true || checkable === "leafOnly" && node.leaf;
@@ -102,12 +104,7 @@ var TreeNode = function TreeNode(_ref) {
       },
       children: [nodeIcon && /*#__PURE__*/jsxs("div", {
         className: "flex-content max-w-6 me-1 self-center leading-none",
-        children: [/*#__PURE__*/isValidElement(nodeIcon) && nodeIcon, isString(nodeIcon) && /*#__PURE__*/jsx(Icon, {
-          icon: nodeIcon,
-          bg: node.iconBg,
-          color: node.iconColor,
-          rtlFlip: node.rtlFlip
-        })]
+        children: [/*#__PURE__*/isValidElement(nodeIcon) && nodeIcon, isString(nodeIcon) && /*#__PURE__*/jsx(Icon, _objectSpread({}, getIconProps(nodeIcon)))]
       }), node.childSelected && !node.open && /*#__PURE__*/jsx("span", {
         className: " flex-content text-primary-500",
         children: "\u2022"

package/dist/esm/virtual/Gallery.js

@@ -87,13 +87,13 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
     estimateSize: function estimateSize() {
       return height;
     },
-    overscan: 2
+    overscan: 0
   });
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = useRef(0);
   useEffect(function () {
-    var _virtualItems$2$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = useCallback(function () {
@@ -144,13 +144,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
       };
     }
   }, [onLoadMore, virtualItems]);
+  var isRenderedRef = useRef(false);
   useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-        align: "start"
-      });
-    }, 100);
-  }, [columnCount]);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      initialScroll && setTimeout(function () {
+        virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+          align: "start"
+        });
+      }, 200);
+    }
+  }, [columnCount, initialScroll, itemList]);
   useImperativeHandle(galleryRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
@@ -204,10 +208,17 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
               "data-index": index,
               ref: virtualizer.measureElement,
               children: columnMap.map(function (col) {
+                var _itemList;
                 return /*#__PURE__*/jsx("div", {
                   "data-index": index * columnCount + col,
                   className: classNames("grid rounded-capped"),
-                  children: itemList[index * columnCount + col] && children(itemList[index * columnCount + col])
+                  style: {
+                    minWidth: width,
+                    minHeight: height
+                  },
+                  children: (_itemList = itemList[index * columnCount + col]) !== null && _itemList !== void 0 && _itemList.item ? children(itemList[index * columnCount + col]) : /*#__PURE__*/jsx(Skeleton, {
+                    className: "p-2"
+                  })
                 }, "".concat(key, ":").concat(col));
               })
             }, key);

package/dist/esm/virtual/List.js

@@ -56,7 +56,7 @@ var _VirtualList = function _VirtualList(_ref) {
   var scrollerRef = useRef(null);
   var virtualizer = useVirtualizer({
     count: count,
-    overscan: 2,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: function getScrollElement() {
       return scrollerRef.current;
@@ -68,8 +68,8 @@ var _VirtualList = function _VirtualList(_ref) {
   var virtualItems = virtualizer.getVirtualItems();
   var currentIndex = useRef(0);
   useEffect(function () {
-    var _virtualItems$2$index, _virtualItems$;
-    currentIndex.current = (_virtualItems$2$index = (_virtualItems$ = virtualItems[2]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$2$index !== void 0 ? _virtualItems$2$index : 0;
+    var _virtualItems$0$index, _virtualItems$;
+    currentIndex.current = (_virtualItems$0$index = (_virtualItems$ = virtualItems[0]) === null || _virtualItems$ === void 0 ? void 0 : _virtualItems$.index) !== null && _virtualItems$0$index !== void 0 ? _virtualItems$0$index : 0;
     if (scrollerRef.current && virtualItems[0] && scrollerRef.current.scrollTop < virtualItems[0].size) currentIndex.current = 0;
   }, [virtualItems]);
   var calculateActiveScroll = useCallback(function () {
@@ -131,13 +131,17 @@ var _VirtualList = function _VirtualList(_ref) {
       };
     }
   }, [onLoadMore, virtualItems]);
+  var isRenderedRef = useRef(false);
   useLayoutEffect(function () {
-    setTimeout(function () {
-      initialScroll && virtualizer.scrollToIndex(initialScroll, {
-        align: "start"
-      });
-    }, 100);
-  }, []);
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
+      initialScroll && setTimeout(function () {
+        virtualizer.scrollToIndex(Math.floor(initialScroll), {
+          align: "start"
+        });
+      }, 200);
+    }
+  }, [itemList, initialScroll]);
   useImperativeHandle(listRef, function () {
     return {
       scrollToItem: function scrollToItem(index) {
@@ -189,13 +193,20 @@ var _VirtualList = function _VirtualList(_ref) {
               display: "inline-block"
             }
           }), virtualItems.map(function (_ref3) {
+            var _itemList$index;
             var key = _ref3.key,
               index = _ref3.index;
             return /*#__PURE__*/jsx("div", {
               "data-index": index,
               ref: virtualizer.measureElement,
               className: classNames("rounded-capped", orientation === "horizontal" ? "inline-grid" : "grid"),
-              children: children(itemList[index])
+              style: {
+                minWidth: width,
+                minHeight: height
+              },
+              children: (_itemList$index = itemList[index]) !== null && _itemList$index !== void 0 && _itemList$index.item ? children(itemList[index]) : /*#__PURE__*/jsx(Skeleton, {
+                className: "p-2"
+              })
             }, key);
           })]
         }), loading && /*#__PURE__*/jsx("div", {

package/dist/esm/virtual/Scroller.js

@@ -39,35 +39,43 @@ var Scroller = function Scroller(_ref) {
     variant: "link",
     className: "outline",
     children: [/*#__PURE__*/jsx(Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll to top",
-      icon: vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft,
+      icon: {
+        icon: vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft,
+        rtlFlip: true
+      },
       disabled: (scrollActive & 2) === 0,
       onClick: onStart
     }), /*#__PURE__*/jsx(Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll up",
-      icon: vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft,
+      icon: {
+        icon: vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft,
+        rtlFlip: true
+      },
       disabled: (scrollActive & 2) === 0,
       onClick: onPrevious
     }), /*#__PURE__*/jsx(Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll down",
-      icon: vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight,
+      icon: {
+        icon: vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight,
+        rtlFlip: true
+      },
       disabled: scrollActive % 2 === 0,
       onClick: onNext
     }), /*#__PURE__*/jsx(Button, {
-      rtlFlip: true,
       size: "sm",
       variant: "link",
       "aria-label": "scroll to bottom",
-      icon: vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight,
+      icon: {
+        icon: vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight,
+        rtlFlip: true
+      },
       disabled: scrollActive % 2 === 0,
       onClick: onEnd
     })]

package/dist/types/table/HeaderCell.d.ts

@@ -1,2 +1,2 @@
 import { type TableColumn, type TableProps } from "./types";
-export declare const HeaderCell: ({ id, field, dataType, label, icon, iconBg, iconColor, rtlFlip, actions, locked, filter, filterable, filterOptions, tooltip, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, onFilter, }: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => import("react/jsx-runtime").JSX.Element;
+export declare const HeaderCell: ({ id, field, dataType, label, icon, actions, locked, filter, filterable, filterOptions, tooltip, sortable, resizable, width: _width, maxWidth, minWidth, sort, onSort, onFilter, }: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/types.d.ts

@@ -1,4 +1,5 @@
-import { type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+import { IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type CssProp, type Elements, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement } from "react";
 export declare const COL_MIN_WIDTH = "3rem";
 export declare const COL_MAX_WIDTH = "64rem";
@@ -31,11 +32,12 @@ export declare const COL_DEFAULT_WIDTH = "12rem";
  * @property {KeyValue} [valueMap] - Mapping of values for the column.
  * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
  */
-export interface TableColumn<T = KeyValue> extends CssProp, IconProps, TestProps {
+export interface TableColumn<T = KeyValue> extends CssProp, TestProps {
     id: keyof T | string;
     field?: string;
     label?: string;
     tooltip?: string;
+    icon?: IconProps;
     actions?: ReactElement[];
     align?: "start" | "center" | "end";
     locked?: "start" | "end";

package/dist/types/tree/types.d.ts

@@ -1,10 +1,15 @@
-import { type BadgeType, type ChildProp, type CssProp, type Elements, type IconProps, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
-interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
+import { IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
+import { type BadgeType, type ChildProp, type CssProp, type Elements, type RefProp, type TestProps } from "@react-fabric/core/dist/types/types";
+interface TreeBaseNode<T> extends CssProp, TestProps {
     id: string;
     /**
      * display label
      */
     label: Elements<JSX.Element>;
+    /**
+     * icon path or props
+     */
+    icon?: IconProps;
     /**
      * full text to be used for querying purposes
      */
@@ -22,7 +27,6 @@ interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
      */
     disabled?: boolean;
     data?: T;
-    icon?: Elements<JSX.Element>;
 }
 export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
     leaf: true;
@@ -33,7 +37,7 @@ export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
     open?: boolean;
     iconOpen?: string;
 });
-export interface InternalNode extends Omit<IconProps, "icon">, CssProp, TestProps {
+export interface InternalNode extends CssProp, TestProps {
     id: string;
     label: Elements<JSX.Element>;
     queryable?: string;
@@ -50,7 +54,7 @@ export interface InternalNode extends Omit<IconProps, "icon">, CssProp, TestProp
     loaded: boolean;
     parent?: string;
     empty?: boolean;
-    icon?: Elements<JSX.Element>;
+    icon?: IconProps;
     errored?: string;
     selected?: true;
     childSelected?: true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.57",
+  "version": "1.0.0-beta.59",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,24 +35,24 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.57",
-    "@react-fabric/date": "^1.0.0-beta.57",
-    "@react-fabric/form": "^1.0.0-beta.57",
-    "@react-fabric/utilities": "^1.0.0-beta.52",
-    "@tanstack/react-virtual": "^3.13.9",
-    "classnames": "^2.5.1",
-    "color": "^4.2.3",
-    "memoize-one": "^6.0.0"
+    "@react-fabric/core": "^1.0.0-beta.59",
+    "@react-fabric/date": "^1.0.0-beta.59",
+    "@react-fabric/form": "^1.0.0-beta.59",
+    "@react-fabric/utilities": "^1.0.0-beta.59",
+    "@tanstack/react-virtual": "~3.13.12",
+    "classnames": "~2.5.1",
+    "color": "~5.0.2",
+    "memoize-one": "~6.0.0"
   },
   "peerDependencies": {
-    "i18next": "^25.2.1",
-    "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "react-i18next": "^15.5.2"
+    "i18next": "~25.6.0",
+    "react": "~19.2.0",
+    "react-dom": "~19.2.0",
+    "react-i18next": "~16.2.1"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "9b596a0a8d6cecaa8479f80c495b64fb42ce739f"
+  "gitHead": "74efd06c9c5ac629b6ef5cdc6d53ecb1c356f2eb"
 }

package/src/table/HeaderCell.tsx

@@ -26,6 +26,7 @@ import {
   CoreIcons,
   Divider,
   DropdownTool,
+  getIconProps,
   Icon,
   Menu,
   MenuItem,
@@ -49,9 +50,6 @@ export const HeaderCell = ({
   dataType,
   label,
   icon,
-  iconBg,
-  iconColor,
-  rtlFlip,
   actions,
   locked,
   filter,
@@ -153,9 +151,7 @@ export const HeaderCell = ({
     >
       <Tooltip content={tooltip ?? label} disabled={!(tooltip ?? label)}>
         <div className="flex-initial px-2 py-1 text-sm truncate sticky start-0">
-          {icon && (
-            <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />
-          )}
+          {icon && <Icon {...getIconProps(icon)} />}
           <span>{label ?? " "}</span>
         </div>
       </Tooltip>

package/src/table/types.ts

@@ -21,10 +21,10 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import {
   type CssProp,
   type Elements,
-  type IconProps,
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
@@ -62,14 +62,12 @@ export const COL_DEFAULT_WIDTH = "12rem";
  * @property {KeyValue} [valueMap] - Mapping of values for the column.
  * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
  */
-export interface TableColumn<T = KeyValue>
-  extends CssProp,
-    IconProps,
-    TestProps {
+export interface TableColumn<T = KeyValue> extends CssProp, TestProps {
   id: keyof T | string;
   field?: string;
   label?: string;
   tooltip?: string;
+  icon?: IconProps;
   actions?: ReactElement[];
   align?: "start" | "center" | "end";
   locked?: "start" | "end";

package/src/tree/TreeNode.tsx

@@ -21,7 +21,13 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { Badge, CoreIcons, getBadgeProps, Icon } from "@react-fabric/core";
+import {
+  Badge,
+  CoreIcons,
+  getBadgeProps,
+  getIconProps,
+  Icon,
+} from "@react-fabric/core";
 import { isEmpty, isString } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useMemo } from "react";
@@ -79,7 +85,7 @@ export const TreeNode = ({
 
   const nodeIcon = useMemo(() => {
     if (node.icon) return node.icon;
-    return node.leaf ? defaultLeafIcon : defaultNodeIcon;
+    return { icon: node.leaf ? defaultLeafIcon : defaultNodeIcon };
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
 
   const canCheck = useMemo(() => {
@@ -167,14 +173,7 @@ export const TreeNode = ({
           {nodeIcon && (
             <div className="flex-content max-w-6 me-1 self-center leading-none">
               {isValidElement(nodeIcon) && nodeIcon}
-              {isString(nodeIcon) && (
-                <Icon
-                  icon={nodeIcon}
-                  bg={node.iconBg}
-                  color={node.iconColor}
-                  rtlFlip={node.rtlFlip}
-                />
-              )}
+              {isString(nodeIcon) && <Icon {...getIconProps(nodeIcon)} />}
             </div>
           )}
           {node.childSelected && !node.open && (

package/src/tree/types.ts

@@ -21,22 +21,26 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { IconProps } from "@react-fabric/core/dist/types/components/icon/Icon";
 import {
   type BadgeType,
   type ChildProp,
   type CssProp,
   type Elements,
-  type IconProps,
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
 
-interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
+interface TreeBaseNode<T> extends CssProp, TestProps {
   id: string;
   /**
    * display label
    */
   label: Elements<JSX.Element>;
+  /**
+   * icon path or props
+   */
+  icon?: IconProps;
   /**
    * full text to be used for querying purposes
    */
@@ -54,8 +58,6 @@ interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
    */
   disabled?: boolean;
   data?: T;
-
-  icon?: Elements<JSX.Element>;
 }
 
 export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> &
@@ -69,10 +71,7 @@ export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> &
       }
   );
 
-export interface InternalNode
-  extends Omit<IconProps, "icon">,
-    CssProp,
-    TestProps {
+export interface InternalNode extends CssProp, TestProps {
   id: string;
   label: Elements<JSX.Element>;
   queryable?: string;
@@ -89,7 +88,7 @@ export interface InternalNode
   loaded: boolean;
   parent?: string;
   empty?: boolean;
-  icon?: Elements<JSX.Element>;
+  icon?: IconProps;
   errored?: string;
   selected?: true;
   childSelected?: true;

package/src/virtual/Gallery.tsx

@@ -182,14 +182,14 @@ const _VirtualGallery = <T extends AnyObject>({
     count: Math.ceil(count / columnCount),
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => height,
-    overscan: 2,
+    overscan: 0,
   });
 
   const virtualItems = virtualizer.getVirtualItems();
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[2]?.index ?? 0;
+    currentIndex.current = virtualItems[0]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&
@@ -246,14 +246,18 @@ const _VirtualGallery = <T extends AnyObject>({
     }
   }, [onLoadMore, virtualItems]);
 
+  const isRenderedRef = useRef(false);
   useLayoutEffect(() => {
-    setTimeout(() => {
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
       initialScroll &&
-        virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
-          align: "start",
-        });
-    }, 100);
-  }, [columnCount]);
+        setTimeout(() => {
+          virtualizer.scrollToIndex(Math.floor(initialScroll / columnCount), {
+            align: "start",
+          });
+        }, 200);
+    }
+  }, [columnCount, initialScroll, itemList]);
 
   useImperativeHandle(
     galleryRef,
@@ -328,11 +332,16 @@ const _VirtualGallery = <T extends AnyObject>({
                     key={`${key}:${col}`}
                     data-index={index * columnCount + col}
                     className={classNames("grid rounded-capped")}
+                    style={{
+                      minWidth: width,
+                      minHeight: height,
+                    }}
                   >
-                    {itemList[index * columnCount + col] &&
-                      children(
-                        itemList[index * columnCount + col] as AnyObject,
-                      )}
+                    {itemList[index * columnCount + col]?.item ? (
+                      children(itemList[index * columnCount + col] as AnyObject)
+                    ) : (
+                      <Skeleton className="p-2" />
+                    )}
                   </div>
                 ))}
               </div>

package/src/virtual/List.tsx

@@ -133,7 +133,7 @@ const _VirtualList = <T extends AnyObject>({
   const extraSize = useMemo(() => (onLoadMore ? 8 : 0), [onLoadMore]);
   const itemList: Array<{
     index: number;
-    data: T;
+    item: T;
     isLast: boolean;
     isSticky: boolean;
   }> = createItemList(
@@ -149,7 +149,7 @@ const _VirtualList = <T extends AnyObject>({
   const scrollerRef = useRef<HTMLDivElement>(null);
   const virtualizer = useVirtualizer({
     count,
-    overscan: 2,
+    overscan: 0,
     horizontal: orientation === "horizontal",
     getScrollElement: () => scrollerRef.current,
     estimateSize: () => (orientation === "horizontal" ? width : height),
@@ -159,7 +159,7 @@ const _VirtualList = <T extends AnyObject>({
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[2]?.index ?? 0;
+    currentIndex.current = virtualItems[0]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&
@@ -225,12 +225,18 @@ const _VirtualList = <T extends AnyObject>({
     }
   }, [onLoadMore, virtualItems]);
 
+  const isRenderedRef = useRef(false);
   useLayoutEffect(() => {
-    setTimeout(() => {
+    if (!isRenderedRef.current && itemList.length > 0) {
+      isRenderedRef.current = true;
       initialScroll &&
-        virtualizer.scrollToIndex(initialScroll, { align: "start" });
-    }, 100);
-  }, []);
+        setTimeout(() => {
+          virtualizer.scrollToIndex(Math.floor(initialScroll), {
+            align: "start",
+          });
+        }, 200);
+    }
+  }, [itemList, initialScroll]);
 
   useImperativeHandle(
     listRef,
@@ -311,8 +317,16 @@ const _VirtualList = <T extends AnyObject>({
                   "rounded-capped",
                   orientation === "horizontal" ? "inline-grid" : "grid",
                 )}
+                style={{
+                  minWidth: width,
+                  minHeight: height,
+                }}
               >
-                {children(itemList[index] as AnyObject)}
+                {itemList[index]?.item ? (
+                  children(itemList[index] as AnyObject)
+                ) : (
+                  <Skeleton className="p-2" />
+                )}
               </div>
             ))}
           </div>

package/src/virtual/Scroller.tsx

@@ -41,38 +41,46 @@ export const Scroller = ({
   return (
     <ButtonGroup vertical={vertical} variant="link" className="outline">
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll to top"
-        icon={vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft}
+        icon={{
+          icon: vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft,
+          rtlFlip: true,
+        }}
         disabled={(scrollActive & 2) === 0}
         onClick={onStart}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll up"
-        icon={vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft}
+        icon={{
+          icon: vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft,
+          rtlFlip: true,
+        }}
         disabled={(scrollActive & 2) === 0}
         onClick={onPrevious}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll down"
-        icon={vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight}
+        icon={{
+          icon: vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight,
+          rtlFlip: true,
+        }}
         disabled={scrollActive % 2 === 0}
         onClick={onNext}
       />
       <Button
-        rtlFlip
         size="sm"
         variant="link"
         aria-label="scroll to bottom"
-        icon={vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight}
+        icon={{
+          icon: vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight,
+          rtlFlip: true,
+        }}
         disabled={scrollActive % 2 === 0}
         onClick={onEnd}
       />