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

package/src/table/BodyCell.tsx

@@ -22,38 +22,16 @@
  */
 
 import { DateDisplay } from "@react-fabric/date";
-import {
-  Format,
-  getByPath,
-  isArray,
-  isObject,
-  isTrue,
-} from "@react-fabric/utilities";
+import { Format, getByPath, isArray, isObject, isTrue } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
-import { useTableContext } from "./Context";
-import {
-  COL_DEFAULT_WIDTH,
-  COL_MAX_WIDTH,
-  COL_MIN_WIDTH,
-  type TableColumn,
-} from "./types";
+import { useTableContext } from "./context";
+import { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH, type TableColumn } from "./types";
 
-export const BodyCell = ({
-  column,
-  item,
-  index,
-}: {
-  column: TableColumn;
-  item: KeyValue;
-  index: number;
-}) => {
+export const BodyCell = ({ column, item, index }: { column: TableColumn; item: KeyValue; index: number }) => {
   const { widths } = useTableContext();
 
-  const width = useMemo(
-    () => widths.get(column.id.toString()) ?? column.width,
-    [widths, column],
-  );
+  const width = useMemo(() => widths.get(column.id.toString()) ?? column.width, [widths, column]);
 
   const content = useMemo(() => {
     const value = getByPath(item, column.id.toString());
@@ -65,10 +43,7 @@ export const BodyCell = ({
       return map[`${isTrue(value) ? "true" : "false"}`];
     }
     if (column.valueMap != null) {
-      if (
-        ["number", "string"].includes(column.dataType ?? "string") &&
-        value in column.valueMap
-      ) {
+      if (["number", "string"].includes(column.dataType ?? "string") && value in column.valueMap) {
         return column.valueMap[value];
       }
     }

package/src/table/EmptyCell.tsx

@@ -22,26 +22,13 @@
  */
 
 import { useMemo } from "react";
-import { useTableContext } from "./Context";
-import {
-  COL_DEFAULT_WIDTH,
-  COL_MAX_WIDTH,
-  COL_MIN_WIDTH,
-  type TableColumn,
-} from "./types";
+import { useTableContext } from "./context";
+import { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH, type TableColumn } from "./types";
 
-export const EmptyCell = ({
-  id,
-  width: _width,
-  maxWidth,
-  minWidth,
-}: TableColumn) => {
+export const EmptyCell = ({ id, width: _width, maxWidth, minWidth }: TableColumn) => {
   const { widths } = useTableContext();
 
-  const width = useMemo(
-    () => widths.get(id.toString()) ?? _width,
-    [widths, id, _width],
-  );
+  const width = useMemo(() => widths.get(id.toString()) ?? _width, [widths, id, _width]);
 
   return (
     <div

package/src/table/HeaderCell.tsx

@@ -21,27 +21,12 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import {
-  Button,
-  Divider,
-  DropdownTool,
-  getIconProps,
-  Icon,
-  Menu,
-  MenuItem,
-  Tooltip,
-} from "@react-fabric/core";
+import { Button, Divider, DropdownTool, getIconProps, Icon, Menu, MenuItem, Tooltip } from "@react-fabric/core";
 import { isEmpty } from "@react-fabric/utilities";
 import { useCallback, useMemo } from "react";
 import { ColumnFilters } from "./ColumnFilters";
-import { useTableContext } from "./Context";
-import {
-  COL_DEFAULT_WIDTH,
-  COL_MAX_WIDTH,
-  COL_MIN_WIDTH,
-  type TableColumn,
-  type TableProps,
-} from "./types";
+import { useTableContext } from "./context";
+import { COL_DEFAULT_WIDTH, COL_MAX_WIDTH, COL_MIN_WIDTH, type TableColumn, type TableProps } from "./types";
 
 export const HeaderCell = ({
   id,
@@ -66,18 +51,14 @@ export const HeaderCell = ({
 }: TableColumn & Pick<TableProps, "sort" | "onSort" | "onFilter">) => {
   const { startResize, widths } = useTableContext();
 
-  const width = useMemo(
-    () => widths.get(id.toString()) ?? _width,
-    [widths, _width, id],
-  );
+  const width = useMemo(() => widths.get(id.toString()) ?? _width, [widths, _width, id]);
 
   const handleSort = useCallback(
     (order?: "asc" | "desc") => {
       sortable &&
         onSort?.({
           id: id.toString(),
-          order:
-            order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
+          order: order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
         });
     },
     [onSort, sort, sortable],
@@ -87,12 +68,7 @@ export const HeaderCell = ({
     let ret = [];
     if (filterable && (dataType ?? filterOptions)) {
       ret.push(
-        <Menu
-          key="filters"
-          label="Filter"
-          icon={filter ? "icon-[mdi--check]" : ""}
-          trigger="click"
-        >
+        <Menu key="filters" label="Filter" icon={filter ? "icon-[mdi--check]" : ""} trigger="click">
           <ColumnFilters
             type={dataType}
             list={filterOptions}
@@ -104,12 +80,7 @@ export const HeaderCell = ({
     }
     if (sortable) {
       ret.push(
-        <MenuItem
-          key="sort-asc"
-          label="Sort ascending"
-          icon="icon-[mdi--sort-ascending]"
-          onClick={() => handleSort("asc")}
-        />,
+        <MenuItem key="sort-asc" label="Sort ascending" icon="icon-[mdi--sort-ascending]" onClick={() => handleSort("asc")} />,
         <MenuItem
           key="sort-desc"
           label="Sort descending"
@@ -149,7 +120,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">
+        <div className="flex-initial px-2 py-1 text-sm truncate sticky inset-s-0">
           {icon && <Icon {...getIconProps(icon)} />}
           <span>{label ?? " "}</span>
         </div>
@@ -180,10 +151,7 @@ export const HeaderCell = ({
         <div
           role="none"
           className="cursor-col-resize border-e bg-transparent border-tint-200 w-[5px] self-stretch"
-          onMouseDown={(e) =>
-            e.currentTarget.parentElement &&
-            startResize(e.currentTarget.parentElement)
-          }
+          onMouseDown={(e) => e.currentTarget.parentElement && startResize(e.currentTarget.parentElement)}
         />
       )}
     </div>

package/src/table/{Context.tsx → Provider.tsx}

@@ -22,22 +22,10 @@
  */
 
 import { type ChildrenProp } from "@react-fabric/core/dist/types/types";
-import {
-  createContext,
-  useCallback,
-  useContext,
-  useRef,
-  useState,
-} from "react";
+import { useCallback, useRef, useState } from "react";
+import { TableContext } from "./context";
 import { useResizer } from "./useResizer";
 
-interface Context {
-  widths: Map<string, number>;
-  startResize: (col: HTMLElement) => void;
-}
-
-const TableContext = createContext<Context>({} as Context);
-
 export const TableProvider = ({ children }: ChildrenProp) => {
   const ghostRef = useRef<HTMLDivElement>(null);
   const [widths, setWidths] = useState<Map<string, number>>(new Map());
@@ -57,14 +45,9 @@ export const TableProvider = ({ children }: ChildrenProp) => {
     <TableContext.Provider value={{ startResize, widths }}>
       {children}
 
-      <div
-        className="absolute inset-0 hidden z-20 cursor-col-resize"
-        ref={ghostRef}
-      >
+      <div className="absolute inset-0 hidden z-20 cursor-col-resize" ref={ghostRef}>
         <div className="absolute inset-y-0 bg-muted opacity-50 border-primary border-e-2" />
       </div>
     </TableContext.Provider>
   );
 };
-
-export const useTableContext = () => useContext(TableContext);

package/src/table/Table.tsx

@@ -40,7 +40,7 @@ import { useTranslation } from "react-i18next";
 import { AddColumn } from "./AddColumn";
 import { BodyRow } from "./BodyRow";
 import { CheckboxCell } from "./CheckboxCell";
-import { TableProvider } from "./Context";
+import { TableProvider } from "./Provider";
 import { EmptyCell } from "./EmptyCell";
 import { HeaderCell } from "./HeaderCell";
 import { type TableProps } from "./types";
@@ -55,7 +55,7 @@ import { useVirtualTable } from "./useVirtualTable";
  * 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}
@@ -183,7 +183,7 @@ export const Table = <T extends KeyValue = KeyValue>({
       >
         <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"
         >
           <div className={wrapperStart}>
             {canExpand && <div className="w-6" />}
@@ -251,7 +251,7 @@ export const Table = <T extends KeyValue = KeyValue>({
                   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",
+                    "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"

package/src/table/context.ts

@@ -0,0 +1,33 @@
+/*
+ * 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.
+ */
+
+import { createContext, useContext } from "react";
+
+interface Context {
+  widths: Map<string, number>;
+  startResize: (col: HTMLElement) => void;
+}
+
+export const TableContext = createContext<Context>({} as Context);
+
+export const useTableContext = () => useContext(TableContext);

package/src/table/useResizer.ts

@@ -21,6 +21,8 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { useCallback } from "react";
+
 export const useResizer = (
   colEl: HTMLElement,
   ghostEl: HTMLElement,
@@ -29,20 +31,20 @@ export const useResizer = (
   const placeholder = ghostEl.firstElementChild as HTMLElement;
   const isRtl = getComputedStyle(colEl).direction === "rtl";
 
-  const onResize = (evt: MouseEvent) => {
+  const onResize = useCallback((evt: MouseEvent) => {
     /** ***************** check if reverse enabled of RTL *******************/
     const box = colEl.getBoundingClientRect();
     const x = isRtl ? box.left - evt.clientX : evt.clientX - box.right;
     placeholder.style.width = `${colEl.offsetWidth + x}px`;
-  };
+  }, [colEl, isRtl, placeholder]);
 
   /** ***************** dettach handlers on mouseup *******************/
-  const onResizeEnd = () => {
+  const onResizeEnd = useCallback(() => {
     callback(placeholder.offsetWidth);
     ghostEl.style.display = "none";
     document.removeEventListener("mousemove", onResize);
     document.removeEventListener("mouseup", onResizeEnd);
-  };
+  }, [callback, placeholder, ghostEl]);
 
   /** ***************** attach handlers *******************/
   const box = colEl.getBoundingClientRect();

package/src/tree/TreePanel.tsx

@@ -37,7 +37,7 @@ import { useTree } from "./useTree";
  * 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/src/tree/types.ts

@@ -36,7 +36,7 @@ interface TreeBaseNode<T> extends CssProp, TestProps {
   /**
    * display label
    */
-  label: Elements<JSX.Element>;
+  label: Elements<React.ReactElement>;
   /**
    * icon path or props
    */
@@ -73,7 +73,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;
@@ -101,8 +101,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";
@@ -227,8 +227,8 @@ interface BaseTreePanelProps<T extends KeyValue = KeyValue>
   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;

package/src/virtual/Gallery.tsx

@@ -293,7 +293,7 @@ const _VirtualGallery = <T extends AnyObject>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames("area-content bg-base overflow-auto")}
+      className={classNames("area-content bg-default overflow-auto")}
       {...aria}
     >
       <div
@@ -388,7 +388,7 @@ const GenericMemo: <T>(c: T) => T = 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/src/virtual/List.tsx

@@ -270,7 +270,7 @@ const _VirtualList = <T extends AnyObject>({
     <div
       ref={scrollerRef}
       onScroll={handleScroll}
-      className={classNames("area-content bg-base overflow-auto")}
+      className={classNames("area-content bg-default overflow-auto")}
       {...aria}
     >
       <div
@@ -340,7 +340,7 @@ const _VirtualList = <T extends AnyObject>({
           <div
             className={classNames(
               orientation === "vertical" && "self-end sticky bottom-2",
-              orientation === "horizontal" && "self-end sticky end-2",
+              orientation === "horizontal" && "self-end sticky inset-e-2",
             )}
           >
             <Scroller
@@ -383,7 +383,7 @@ const GenericMemo: <T>(c: T) => T = 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