@react-fabric/data 1.0.0-beta.62 → 1.0.0-beta.63

package/dist/esm/table/Table.js

@@ -9,7 +9,7 @@ import { useTranslation } from 'react-i18next';
 import { AddColumn } from './AddColumn.js';
 import { BodyRow } from './BodyRow.js';
 import { CheckboxCell } from './CheckboxCell.js';
-import { TableProvider } from './Context.js';
+import { TableProvider } from './Provider.js';
 import { EmptyCell } from './EmptyCell.js';
 import { HeaderCell } from './HeaderCell.js';
 import { useTableColumns } from './useTableColumns.js';
@@ -132,7 +132,7 @@ var Table = function Table(_ref) {
       ref: scrollerRef,
       children: [/*#__PURE__*/jsxs("div", {
         "data-ref": "tableHeader",
-        className: "bg-base font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3",
+        className: "bg-default font-medium sticky top-0 h-8 area-head border-b select-none flex flex-nowrap z-3",
         children: [/*#__PURE__*/jsxs("div", {
           className: wrapperStart,
           children: [canExpand && /*#__PURE__*/jsx("div", {
@@ -186,7 +186,7 @@ var Table = function Table(_ref) {
           return "__GROUP__" in data ? /*#__PURE__*/jsx("div", {
             ref: measureElement,
             "data-index": index,
-            className: classNames("text-md bg-base border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
+            className: classNames("text-md bg-default border-y border-tint-100 border-t-0 cursor-pointer flex items-center justify-start gap-1 z-2", isActiveSticky(index) && "sticky top-8"),
             role: "none",
             onClick: function onClick() {
               return toggleGroupExpand(data.key);

package/dist/esm/table/context.js

@@ -0,0 +1,33 @@
+'use client';
+
+import { createContext, useContext } from 'react';
+
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2026 Adarsh Pastakia
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy of this software
+ * and associated documentation files (the "Software"), to deal in the Software without restriction,
+ * including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense,
+ * and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so,
+ * subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in all copies or substantial
+ * portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED
+ * TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL
+ * THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT,
+ * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
+ */
+
+var TableContext = /*#__PURE__*/createContext({});
+var useTableContext = function useTableContext() {
+  return useContext(TableContext);
+};
+
+export { TableContext, useTableContext };

package/dist/esm/table/useResizer.js

@@ -1,5 +1,7 @@
 'use client';
 
+import { useCallback } from 'react';
+
 /*
  * React Fabric
  * @version: 1.0.0
@@ -26,20 +28,20 @@
 var useResizer = function useResizer(colEl, ghostEl, callback) {
   var placeholder = ghostEl.firstElementChild;
   var isRtl = getComputedStyle(colEl).direction === "rtl";
-  var onResize = function onResize(evt) {
+  var onResize = useCallback(function (evt) {
     /** ***************** check if reverse enabled of RTL *******************/
     var box = colEl.getBoundingClientRect();
     var x = isRtl ? box.left - evt.clientX : evt.clientX - box.right;
     placeholder.style.width = "".concat(colEl.offsetWidth + x, "px");
-  };
+  }, [colEl, isRtl, placeholder]);
 
   /** ***************** dettach handlers on mouseup *******************/
-  var onResizeEnd = function onResizeEnd() {
+  var onResizeEnd = useCallback(function () {
     callback(placeholder.offsetWidth);
     ghostEl.style.display = "none";
     document.removeEventListener("mousemove", onResize);
     document.removeEventListener("mouseup", onResizeEnd);
-  };
+  }, [callback, placeholder, ghostEl]);
 
   /** ***************** attach handlers *******************/
   var box = colEl.getBoundingClientRect();

package/dist/esm/tree/useTree.js

@@ -7,7 +7,7 @@ import { useDebounce } from '@react-fabric/core';
 import { EMPTY_ARRAY, isEmpty } from '@react-fabric/utilities';
 import memoizeOne from 'memoize-one';
 import { useEffectEvent, useRef, useCallback, useReducer, useEffect } from 'react';
-import { refactorTree, makeTreeMap, flattenTree, updateSelection, updateChecked, filterTree } from './utils.js';
+import { refactorTree as _refactorTree, makeTreeMap as _makeTreeMap, flattenTree as _flattenTree, updateSelection, updateChecked, filterTree } from './utils.js';
 
 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; }
@@ -55,7 +55,7 @@ var useTree = function useTree(_ref) {
       setTimeout(function () {
         void Promise.resolve(onLoad === null || onLoad === void 0 ? void 0 : onLoad(node.id)).then(function () {
           var resp = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : EMPTY_ARRAY;
-          node.children = refactorTree(resp, {
+          node.children = _refactorTree(resp, {
             sorter: sorter,
             defaultExpanded: defaultExpanded
           }, {
@@ -96,12 +96,12 @@ var useTree = function useTree(_ref) {
   }, [onQuery]);
   var _useReducer = useReducer(function (state, action) {
       if (action.type === "load") {
-        state.items = refactorTree(action.items, {
+        state.items = _refactorTree(action.items, {
           sorter: sorter,
           defaultExpanded: defaultExpanded
         });
-        state.itemMap = makeTreeMap(state.items);
-        state.tree = flattenTree(state.items);
+        state.itemMap = _makeTreeMap(state.items);
+        state.tree = _flattenTree(state.items);
         state.selected = undefined;
         state.checked = undefined;
         state.query = "";
@@ -117,9 +117,9 @@ var useTree = function useTree(_ref) {
       }
       if (action.type === "loaded") {
         var _state$checked;
-        state.itemMap = makeTreeMap(state.items);
+        state.itemMap = _makeTreeMap(state.items);
         fireExpandToggle(Array.from(state.itemMap.values()));
-        state.tree = flattenTree(state.items);
+        state.tree = _flattenTree(state.items);
         state.selected = selected;
         updateSelection({
           nodes: state.itemMap,
@@ -151,7 +151,7 @@ var useTree = function useTree(_ref) {
           !node.leaf && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) && (node.open = true);
         });
         fireExpandToggle(Array.from(state.itemMap.values()));
-        state.tree = flattenTree(state.items);
+        state.tree = _flattenTree(state.items);
         return _objectSpread({}, state);
       }
       if (action.type === "collapseAll") {
@@ -159,7 +159,7 @@ var useTree = function useTree(_ref) {
           !node.leaf && (node.open = false);
         });
         fireExpandToggle([]);
-        state.tree = flattenTree(state.items);
+        state.tree = _flattenTree(state.items);
         return _objectSpread({}, state);
       }
       if (action.type === "filter") {
@@ -173,7 +173,7 @@ var useTree = function useTree(_ref) {
           }
         } else {
           filterTree(state.itemMap, action.query, matcher);
-          state.tree = flattenTree(state.items);
+          state.tree = _flattenTree(state.items);
         }
         return _objectSpread(_objectSpread({}, state), {}, {
           query: action.query
@@ -195,7 +195,7 @@ var useTree = function useTree(_ref) {
           selected: state.selected,
           multiple: multiple
         });
-        state.tree = flattenTree(state.items);
+        state.tree = _flattenTree(state.items);
         fireSelected(state.selected, (_state$itemMap$get = state.itemMap.get(action.id)) === null || _state$itemMap$get === void 0 ? void 0 : _state$itemMap$get.data);
         return _objectSpread({}, state);
       }
@@ -206,7 +206,7 @@ var useTree = function useTree(_ref) {
           multiple: multiple,
           selected: action.id
         });
-        state.tree = flattenTree(state.items);
+        state.tree = _flattenTree(state.items);
         return _objectSpread({}, state);
       }
       if (action.type === "toggleCheck") {

package/dist/esm/tree/utils.js

@@ -10,10 +10,10 @@ var defaultSorter = function defaultSorter(a, b) {
   if (!!a.leaf !== !!b.leaf) return a.leaf ? 1 : -1;
   return compareValues()(a.label, b.label);
 };
-var getChildren = function getChildren() {
+var _getChildren = function getChildren() {
   var list = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
   return list.map(function (item) {
-    return [item].concat(_toConsumableArray(getChildren(item.children)));
+    return [item].concat(_toConsumableArray(_getChildren(item.children)));
   }).flat(99).filter(Boolean);
 };
 var getIntermediate = function getIntermediate() {
@@ -28,7 +28,7 @@ var getIntermediate = function getIntermediate() {
 };
 
 // convert node item to internal node used by the tree
-var refactorTree = function refactorTree(nodes, _ref) {
+var _refactorTree = function refactorTree(nodes, _ref) {
   var _ref$sorter = _ref.sorter,
     sorter = _ref$sorter === void 0 ? defaultSorter : _ref$sorter,
     _ref$defaultExpanded = _ref.defaultExpanded,
@@ -52,7 +52,7 @@ var refactorTree = function refactorTree(nodes, _ref) {
       lines: []
     }, node), {}, {
       leaf: !!node.leaf,
-      children: node.children && refactorTree(node.children, {
+      children: node.children && _refactorTree(node.children, {
         sorter: sorter,
         defaultExpanded: defaultExpanded
       }, {
@@ -63,18 +63,16 @@ var refactorTree = function refactorTree(nodes, _ref) {
   });
   return list;
 };
-var makeTreeMap = function makeTreeMap(nodes) {
+var _makeTreeMap = function makeTreeMap(nodes) {
   var map = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : new Map();
   nodes.forEach(function (node) {
     if (map.has(node.id)) throw new Error("Node with id [".concat(node.id, "] already exists, please make sure all ids are unique"));
     map.set(node.id, node);
-    node.children && makeTreeMap(node.children, map);
+    node.children && _makeTreeMap(node.children, map);
   });
   return map;
 };
-
-// make flat list to be rendered by virtual list
-var flattenTree = function flattenTree(nodes) {
+var _flattenTree = function flattenTree(nodes) {
   var lines = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
   var list = [];
   var filtered = nodes.filter(function (node) {
@@ -84,7 +82,7 @@ var flattenTree = function flattenTree(nodes) {
     var _node$children2;
     node.lines = [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 2 : 3]);
     list.push(node);
-    (node.open || node.childFiltered) && node.children && list.push.apply(list, _toConsumableArray(flattenTree(node.children.filter(function (child) {
+    (node.open || node.childFiltered) && node.children && list.push.apply(list, _toConsumableArray(_flattenTree(node.children.filter(function (child) {
       return !child.filtered;
     }), [].concat(_toConsumableArray(lines), [idx === filtered.length - 1 ? 0 : 1]))));
     node.open && ((_node$children2 = node.children) === null || _node$children2 === void 0 ? void 0 : _node$children2.length) === 0 && list.push({
@@ -127,7 +125,7 @@ var updateChecked = function updateChecked(list, id, checked) {
   if (node) {
     node.checked = (checked !== null && checked !== void 0 ? checked : node.checked === 0) ? 1 : 0;
     // check all children
-    node.children && getChildren(node.children).forEach(function (child) {
+    node.children && _getChildren(node.children).forEach(function (child) {
       return child.checked = node.checked;
     });
     var parent = node.parent;
@@ -151,7 +149,7 @@ var filterTree = function filterTree(nodes, query, matcher) {
           parentNode && (parentNode.childFiltered = true);
           parent = parentNode === null || parentNode === void 0 ? void 0 : parentNode.parent;
         }
-        node.children && getChildren(node.children).forEach(function (child) {
+        node.children && _getChildren(node.children).forEach(function (child) {
           child.parentFiltered = true;
           child.filtered = false;
         });
@@ -164,4 +162,4 @@ var filterTree = function filterTree(nodes, query, matcher) {
   });
 };
 
-export { filterTree, flattenTree, makeTreeMap, refactorTree, updateChecked, updateSelection };
+export { filterTree, _flattenTree as flattenTree, _makeTreeMap as makeTreeMap, _refactorTree as refactorTree, updateChecked, updateSelection };

package/dist/esm/virtual/Gallery.js

@@ -182,7 +182,7 @@ var _VirtualGallery = function _VirtualGallery(_ref) {
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto")
+    className: classNames("area-content bg-default overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames("flex flex-nowrap justify-center gap-2 min-h-full"),
@@ -258,7 +258,7 @@ var GenericMemo = memo;
  * It also provides a scroller for easy navigation through the items.
  *
  * @param {VirtualGalleryProps<T>} props - The properties for the VirtualGallery component.
- * @returns {JSX.Element} The rendered VirtualGallery component.
+ * @returns {React.ReactElement} The rendered VirtualGallery component.
  *
  * @example
  * ```jsx

package/dist/esm/virtual/List.js

@@ -169,7 +169,7 @@ var _VirtualList = function _VirtualList(_ref) {
   return /*#__PURE__*/jsx("div", _objectSpread(_objectSpread({
     ref: scrollerRef,
     onScroll: handleScroll,
-    className: classNames("area-content bg-base overflow-auto")
+    className: classNames("area-content bg-default overflow-auto")
   }, aria), {}, {
     children: /*#__PURE__*/jsxs("div", {
       className: classNames("flex flex-nowrap gap-2 justify-center min-h-full min-w-full", orientation === "horizontal" && "flex-col"),
@@ -214,7 +214,7 @@ var _VirtualList = function _VirtualList(_ref) {
           children: /*#__PURE__*/jsx(Skeleton, {})
         })]
       }), !hideScroller && /*#__PURE__*/jsx("div", {
-        className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky end-2"),
+        className: classNames(orientation === "vertical" && "self-end sticky bottom-2", orientation === "horizontal" && "self-end sticky inset-e-2"),
         children: /*#__PURE__*/jsx(Scroller, {
           vertical: orientation === "vertical",
           scrollActive: scrollActive,
@@ -246,7 +246,7 @@ var GenericMemo = memo;
  * It can be used with a ref to control scrolling and hilighting of items.
  *
  * @param {VirtualListProps<T>} props - The properties for the VirtualList component.
- * @returns {JSX.Element} The rendered VirtualList component.
+ * @returns {React.ReactElement} The rendered VirtualList component.
  * @template T - The type of items in the list, extending AnyObject.
  *
  * @example

package/dist/types/checklist/CheckList.d.ts

@@ -32,7 +32,7 @@ export interface CheckListProps extends SelectableProps, TestProps {
  * It supports selection, deselection, and allows for negative selections.
  *
  * @param {CheckListProps} props - The properties for the CheckList component.
- * @returns {JSX.Element} The rendered CheckList component.
+ * @returns {React.ReactElement} The rendered CheckList component.
  *
  * @example
  * ```jsx

package/dist/types/histogram/Histogram.d.ts

@@ -26,11 +26,11 @@ export interface HistogramProps extends TestProps {
     /**
      * title when histo list is empty
      */
-    emptyTitle?: string | JSX.Element;
+    emptyTitle?: string | React.ReactElement;
     /**
      * message when histo list is empty
      */
-    emptyMessage?: string | JSX.Element;
+    emptyMessage?: string | React.ReactElement;
     /**
      * handle histo click
      */
@@ -43,7 +43,7 @@ export interface HistogramProps extends TestProps {
  * It also provides an empty state when there are no items to display.
  *
  * @param {HistogramProps} props - The properties for the Histogram component.
- * @returns {JSX.Element} - The rendered Histogram component.
+ * @returns {React.ReactElement} - The rendered Histogram component.
  *
  * @example
  * ```jsx

package/dist/types/json/JsonViewer.d.ts

@@ -53,7 +53,7 @@ export interface JsonViewProps<T> extends CssProp {
     /**
      * render function for custom value display
      */
-    formatter?: (path?: string, value?: AnyObject) => string | JSX.Element | undefined;
+    formatter?: (path?: string, value?: AnyObject) => string | React.ReactElement | undefined;
 }
 /**
  * JsonViewer component to display JSON data in a structured format.
@@ -62,7 +62,7 @@ export interface JsonViewProps<T> extends CssProp {
  * It also provides options for copying values and filtering properties.
  *
  * @param {JsonViewProps<T>} props - The properties for the JsonViewer component.
- * @returns {JSX.Element} The rendered JsonViewer component.
+ * @returns {React.ReactElement} The rendered JsonViewer component.
  *
  * @example
  * ```jsx

package/dist/types/pagination/Pagination.d.ts

@@ -28,6 +28,6 @@ export interface PaginationProps {
  * It uses memoization to optimize rendering performance.
  *
  * @param {PaginationProps} props - The properties for the Pagination component.
- * @returns {JSX.Element} The rendered Pagination component.
+ * @returns {React.ReactElement} The rendered Pagination component.
  */
 export declare const Pagination: import("react").MemoExoticComponent<({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => import("react/jsx-runtime").JSX.Element>;

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

@@ -1,5 +1,5 @@
 import { type TableColumn } from "./types";
-export declare const BodyCell: ({ column, item, index, }: {
+export declare const BodyCell: ({ column, item, index }: {
     column: TableColumn;
     item: KeyValue;
     index: number;

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

@@ -1,2 +1,2 @@
 import { type TableColumn } from "./types";
-export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth, }: TableColumn) => import("react/jsx-runtime").JSX.Element;
+export declare const EmptyCell: ({ id, width: _width, maxWidth, minWidth }: TableColumn) => import("react/jsx-runtime").JSX.Element;

package/dist/types/table/{Context.d.ts → Provider.d.ts}

@@ -1,8 +1,2 @@
 import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
-interface Context {
-    widths: Map<string, number>;
-    startResize: (col: HTMLElement) => void;
-}
 export declare const TableProvider: ({ children }: ChildrenProp) => import("react/jsx-runtime").JSX.Element;
-export declare const useTableContext: () => Context;
-export {};

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

@@ -7,7 +7,7 @@ import { type TableProps } from "./types";
  * Uses TanStack's `useVirtual` for virtualization and React's `useMemo` for performance optimization.
  *
  * @param {TableProps<T>} props - The properties for the Table component.
- * @returns {JSX.Element} The rendered Table component.
+ * @returns {React.ReactElement} The rendered Table component.
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/story/data-table--table}
  * @see {@link https://tanstack.com/table/v8/docs/api/virtual}

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

@@ -0,0 +1,7 @@
+interface Context {
+    widths: Map<string, number>;
+    startResize: (col: HTMLElement) => void;
+}
+export declare const TableContext: import("react").Context<Context>;
+export declare const useTableContext: () => Context;
+export {};

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

@@ -25,7 +25,7 @@ export declare const useVirtualTable: <T extends KeyValue = KeyValue>(data: T[],
     isActiveSticky: (index: number) => boolean;
     top: number | undefined;
     totalSize: () => number;
-    measureElement: (node: Element | null | undefined) => void;
+    measureElement: (node: Element | null) => void;
     toggleGroupExpand: (key: Key) => void;
     toggleExpand: (key: Key) => void;
     toggleChecked: (key: Key) => void;

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

@@ -5,7 +5,7 @@ import { type TreePanelProps } from "./types";
  * nodes and supports checkable nodes.
  *
  * @param {TreePanelProps<T>} props - The properties for the TreePanel component.
- * @returns {JSX.Element} The rendered TreePanel component.
+ * @returns {React.ReactElement} The rendered TreePanel component.
  * @template T - The type of items in the tree, extending KeyValue.
  *
  * @example

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

@@ -5,7 +5,7 @@ interface TreeBaseNode<T> extends CssProp, TestProps {
     /**
      * display label
      */
-    label: Elements<JSX.Element>;
+    label: Elements<React.ReactElement>;
     /**
      * icon path or props
      */
@@ -39,7 +39,7 @@ export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
 });
 export interface InternalNode extends CssProp, TestProps {
     id: string;
-    label: Elements<JSX.Element>;
+    label: Elements<React.ReactElement>;
     queryable?: string;
     badge?: string | number | BadgeType;
     disabled?: boolean;
@@ -66,8 +66,8 @@ export interface InternalNode extends CssProp, TestProps {
 export interface TreeNodeProps extends ChildProp {
     node: InternalNode;
     expanders: [string, string];
-    defaultNodeIcon?: Elements<JSX.Element>;
-    defaultLeafIcon?: Elements<JSX.Element>;
+    defaultNodeIcon?: Elements<React.ReactElement>;
+    defaultLeafIcon?: Elements<React.ReactElement>;
     noLines?: boolean;
     selectable?: true | "leafOnly";
     checkable?: true | "leafOnly";
@@ -176,8 +176,8 @@ interface BaseTreePanelProps<T extends KeyValue = KeyValue> extends TestProps, R
      */
     matcher?: (data: T, query: string) => boolean;
     sorter?: false | ((a: T, b: T) => number);
-    makeLabel?: (node: T) => Elements<JSX.Element>;
-    makeIcon?: (node: T) => Elements<JSX.Element>;
+    makeLabel?: (node: T) => Elements<React.ReactElement>;
+    makeIcon?: (node: T) => Elements<React.ReactElement>;
     defaultExpanded?: string[];
     onExpandToggle?: (id: string[]) => void;
     leafClassName?: string;

package/dist/types/virtual/Gallery.d.ts

@@ -64,7 +64,7 @@ export interface VirtualGalleryProps<T> extends TestProps {
  * It also provides a scroller for easy navigation through the items.
  *
  * @param {VirtualGalleryProps<T>} props - The properties for the VirtualGallery component.
- * @returns {JSX.Element} The rendered VirtualGallery component.
+ * @returns {React.ReactElement} The rendered VirtualGallery component.
  *
  * @example
  * ```jsx

package/dist/types/virtual/List.d.ts

@@ -65,7 +65,7 @@ export interface VirtualListProps<T> extends TestProps {
  * It can be used with a ref to control scrolling and hilighting of items.
  *
  * @param {VirtualListProps<T>} props - The properties for the VirtualList component.
- * @returns {JSX.Element} The rendered VirtualList component.
+ * @returns {React.ReactElement} The rendered VirtualList component.
  * @template T - The type of items in the list, extending AnyObject.
  *
  * @example

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.62",
+  "version": "1.0.0-beta.63",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -35,24 +35,23 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.62",
-    "@react-fabric/date": "^1.0.0-beta.62",
-    "@react-fabric/form": "^1.0.0-beta.62",
-    "@react-fabric/utilities": "^1.0.0-beta.62",
-    "@tanstack/react-virtual": "~3.13.12",
+    "@react-fabric/core": "^1.0.0-beta.63",
+    "@react-fabric/date": "^1.0.0-beta.63",
+    "@react-fabric/form": "^1.0.0-beta.63",
+    "@react-fabric/utilities": "^1.0.0-beta.63",
+    "@tanstack/react-virtual": "~3.13.22",
     "classnames": "~2.5.1",
-    "color": "~5.0.2",
     "memoize-one": "~6.0.0"
   },
   "peerDependencies": {
-    "i18next": "~25.6.0",
-    "react": "~19.2.0",
-    "react-dom": "~19.2.0",
-    "react-i18next": "~16.2.1"
+    "i18next": "~25.8.18",
+    "react": "~19.2.4",
+    "react-dom": "~19.2.4",
+    "react-i18next": "~16.5.8"
   },
   "engines": {
-    "node": ">=18.12.0",
-    "npm": ">=8.19.0"
+    "node": ">=22.18.0",
+    "npm": ">=10.8.0"
   },
-  "gitHead": "9dce2fd9bb753d67e3f8adbf50be257b4bc64242"
+  "gitHead": "6e0652b15c6384fbc316842862572e21299a5466"
 }

package/src/checklist/CheckList.tsx

@@ -164,7 +164,7 @@ const CheckItem: FC<
  * It supports selection, deselection, and allows for negative selections.
  *
  * @param {CheckListProps} props - The properties for the CheckList component.
- * @returns {JSX.Element} The rendered CheckList component.
+ * @returns {React.ReactElement} The rendered CheckList component.
  *
  * @example
  * ```jsx

package/src/histogram/Histogram.tsx

@@ -63,11 +63,11 @@ export interface HistogramProps extends TestProps {
   /**
    * title when histo list is empty
    */
-  emptyTitle?: string | JSX.Element;
+  emptyTitle?: string | React.ReactElement;
   /**
    * message when histo list is empty
    */
-  emptyMessage?: string | JSX.Element;
+  emptyMessage?: string | React.ReactElement;
   /**
    * handle histo click
    */
@@ -81,7 +81,7 @@ export interface HistogramProps extends TestProps {
  * It also provides an empty state when there are no items to display.
  *
  * @param {HistogramProps} props - The properties for the Histogram component.
- * @returns {JSX.Element} - The rendered Histogram component.
+ * @returns {React.ReactElement} - The rendered Histogram component.
  *
  * @example
  * ```jsx

package/src/json/JsonViewer.tsx

@@ -100,7 +100,7 @@ export interface JsonViewProps<T> extends CssProp {
   formatter?: (
     path?: string,
     value?: AnyObject,
-  ) => string | JSX.Element | undefined;
+  ) => string | React.ReactElement | undefined;
 }
 
 const reduceObject = (json: AnyObject, keys: string[] = [], prefix = "") => {
@@ -356,7 +356,7 @@ const JsonEntry = ({
  * It also provides options for copying values and filtering properties.
  *
  * @param {JsonViewProps<T>} props - The properties for the JsonViewer component.
- * @returns {JSX.Element} The rendered JsonViewer component.
+ * @returns {React.ReactElement} The rendered JsonViewer component.
  *
  * @example
  * ```jsx

package/src/pagination/Pagination.tsx

@@ -56,7 +56,7 @@ export interface PaginationProps {
  * It uses memoization to optimize rendering performance.
  *
  * @param {PaginationProps} props - The properties for the Pagination component.
- * @returns {JSX.Element} The rendered Pagination component.
+ * @returns {React.ReactElement} The rendered Pagination component.
  */
 export const Pagination = memo(
   ({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => {