@react-fabric/data 1.0.0-beta.56 → 1.0.0-beta.58

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

@@ -211,9 +211,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
                 }, "".concat(key, ":").concat(col));
               })
             }, key);
-          }), onLoadMore && /*#__PURE__*/jsxRuntime.jsx("div", {
-            className: "h-16",
-            children: loading && /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
+          }), loading && /*#__PURE__*/jsxRuntime.jsx("div", {
+            children: /*#__PURE__*/jsxRuntime.jsx(core.Skeleton, {})
           })]
         })
       }), !hideScroller && /*#__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

@@ -211,9 +211,8 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
                 }, "".concat(key, ":").concat(col));
               })
             }, key);
-          }), onLoadMore && /*#__PURE__*/jsx("div", {
-            className: "h-16",
-            children: loading && /*#__PURE__*/jsx(Skeleton, {})
+          }), loading && /*#__PURE__*/jsx("div", {
+            children: /*#__PURE__*/jsx(Skeleton, {})
           })]
         })
       }), !hideScroller && /*#__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.56",
+  "version": "1.0.0-beta.58",
   "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.55",
-    "@react-fabric/date": "^1.0.0-beta.55",
-    "@react-fabric/form": "^1.0.0-beta.56",
-    "@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.58",
+    "@react-fabric/date": "^1.0.0-beta.58",
+    "@react-fabric/form": "^1.0.0-beta.58",
+    "@react-fabric/utilities": "^1.0.0-beta.58",
+    "@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": "fd9dd6cfd1a58efb5c4bfb6446928a78cb4f4266"
+  "gitHead": "7e66f8c498e37a40e410ecafff2ea6b31505dc1a"
 }

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

@@ -337,8 +337,10 @@ const _VirtualGallery = <T extends AnyObject>({
                 ))}
               </div>
             ))}
-            {onLoadMore && (
-              <div className="h-16">{loading && <Skeleton />}</div>
+            {loading && (
+              <div>
+                <Skeleton />
+              </div>
             )}
           </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}
       />