@react-fabric/data 1.0.0-beta.4 → 1.0.0-beta.40

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

@@ -1,12 +1,5 @@
-import { type InternalNode, type TreeNodeType } from "./types";
-export declare const useTree: <T extends KeyValue<any>>({ items, checked, selected, matcher, onSelect, onChecked, }: {
-    items?: Array<TreeNodeType<T>>;
-    selected?: string;
-    checked?: string[];
-    onSelect?: (id: string) => void;
-    onChecked?: (leafs: string[], nodes: string[]) => void;
-    matcher?: (data: T, query: string) => boolean;
-}) => {
+import { type InternalNode, type TreePanelProps } from "./types";
+export declare const useTree: <T extends KeyValue<any>>({ items, checked, selected, sorter, matcher, onLoad, onQuery, onSelect, onChecked, defaultExpanded, onExpandToggle, }: Partial<TreePanelProps<T>>) => {
     tree: InternalNode[];
     toggleExpand: (id: string) => void;
     expandAll: () => void;

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

@@ -1,5 +1,8 @@
 import { type InternalNode, type TreeNodeType } from "./types";
-export declare const refactorTree: (nodes: TreeNodeType[], options?: {
+export declare const refactorTree: (nodes: TreeNodeType[], { sorter, defaultExpanded, }: {
+    sorter?: any;
+    defaultExpanded?: string[];
+}, options?: {
     level: number;
     parent?: string;
 }) => InternalNode[];

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

@@ -1,12 +1,13 @@
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement, type Ref } from "react";
 export interface VirtualGalleryRef {
     scrollToItem: (index: number) => void;
     hilight: (index: number) => void;
     unhilight: () => void;
 }
-export interface VirtualGalleryProps<T> {
+export interface VirtualGalleryProps<T> extends TestProps {
     children: (props: {
-        data: T;
+        item: T;
         index: number;
         isLast: boolean;
     }) => ReactElement;
@@ -23,6 +24,12 @@ export interface VirtualGalleryProps<T> {
      * default item width
      */
     defaultWidth?: number;
+    /**
+     * full width list
+     */
+    fullWidth?: boolean;
+    maxWidth?: string | number;
+    minWidth?: string | number;
     /**
      * padding
      */
@@ -31,6 +38,7 @@ export interface VirtualGalleryProps<T> {
      * data list
      */
     items: T[];
+    total?: number;
     /**
      * loading state
      */
@@ -43,13 +51,13 @@ export interface VirtualGalleryProps<T> {
     /**
      * load more callback
      */
-    onLoadMore?: () => void;
+    onLoadMore?: (page?: number) => void;
     /**
      * scroll handler
      */
     onScroll?: (top: number) => void;
 }
 export declare const VirtualGallery: {
-    <T extends KeyValue<any>>({ items, children, columns, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, children, columns, fullWidth, maxWidth, minWidth, total, padding, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, galleryRef, ...aria }: VirtualGalleryProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

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

@@ -1,12 +1,13 @@
+import { type TestProps } from "@react-fabric/core/dist/types/types";
 import { type ReactElement, type Ref } from "react";
 export interface VirtualListRef {
     scrollToItem: (index: number) => void;
     hilight: (index: number) => void;
     unhilight: () => void;
 }
-export interface VirtualListProps<T> {
+export interface VirtualListProps<T> extends TestProps {
     children: (props: {
-        data: T;
+        item: T;
         index: number;
         isLast: boolean;
     }) => ReactElement;
@@ -23,6 +24,8 @@ export interface VirtualListProps<T> {
      * full width list
      */
     fullWidth?: boolean;
+    maxWidth?: string | number;
+    minWidth?: string | number;
     /**
      * padding
      */
@@ -35,6 +38,7 @@ export interface VirtualListProps<T> {
      * data list
      */
     items: T[];
+    total?: number;
     initialScroll?: number;
     /**
      * loading state
@@ -54,6 +58,6 @@ export interface VirtualListProps<T> {
     onScroll?: (top: number) => void;
 }
 export declare const VirtualList: {
-    <T extends KeyValue<any>>({ items, children, fullWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
+    <T extends KeyValue<any>>({ items, total, children, fullWidth, maxWidth, minWidth, padding, orientation, defaultHeight: height, defaultWidth: width, hideScroller, initialScroll, loading, onLoadMore, onScroll, listRef, ...aria }: VirtualListProps<T>): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.4",
+  "version": "1.0.0-beta.40",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -11,9 +11,11 @@
   "types": "dist/types/index.d.ts",
   "directories": {
     "src": "src",
+    "styles": "css",
     "test": "tests"
   },
   "files": [
+    "css",
     "src",
     "dist"
   ],
@@ -33,9 +35,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.4",
-    "@react-fabric/form": "^1.0.0-beta.4",
-    "@react-fabric/utilities": "^1.0.0-beta.4",
+    "@react-fabric/core": "^1.0.0-beta.40",
+    "@react-fabric/date": "^1.0.0-beta.40",
+    "@react-fabric/form": "^1.0.0-beta.40",
+    "@react-fabric/utilities": "^1.0.0-beta.40",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -43,13 +46,13 @@
   },
   "peerDependencies": {
     "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
     "react-i18next": "^15.0.2"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "47b0aede19252a3a3ef8df75c08a21caabde8100"
+  "gitHead": "ede05c84683697d85e28a0ae380cb9b74d693f51"
 }

package/src/checklist/CheckList.tsx

@@ -22,12 +22,14 @@
  */
 
 import { Badge, CoreIcons, EmptyContent, Icon } from "@react-fabric/core";
-import { type BadgeType } from "@react-fabric/core/dist/types/types";
+import {
+  type BadgeType,
+  type TestProps,
+} from "@react-fabric/core/dist/types/types";
 import { isString } from "@react-fabric/utilities";
 import {
   Fragment,
   isValidElement,
-  memo,
   useEffect,
   useMemo,
   useState,
@@ -47,7 +49,7 @@ export interface CheckListItem extends KeyValue {
   isDisabled?: boolean;
 }
 
-export interface CheckListProps extends SelectableProps {
+export interface CheckListProps extends SelectableProps, TestProps {
   /**
    * list items
    */
@@ -73,84 +75,79 @@ const CheckItem: FC<
     selected?: number;
     allowNegative?: boolean;
   }
-> = memo(
-  ({
-    id,
-    allowNegative,
-    selected,
-    icon,
-    label,
-    isDisabled,
-    onClick,
-    badge,
-  }: Omit<CheckListItem, "selected"> & {
-    selected?: number;
-    allowNegative?: boolean;
-  }) => {
-    return (
-      <div
-        role="none"
-        className="ax-checkList__item"
-        data-disabled={isDisabled}
-        onClick={() => onClick(id, false)}
-        onContextMenu={(e) => [
-          allowNegative && onClick(id, true),
-          e.preventDefault(),
-        ]}
-      >
-        {!allowNegative && (
+> = ({
+  id,
+  allowNegative,
+  selected,
+  icon,
+  label,
+  isDisabled,
+  onClick,
+  badge,
+  ...aria
+}: Omit<CheckListItem, "selected"> & {
+  selected?: number;
+  allowNegative?: boolean;
+}) => {
+  return (
+    <div
+      role="none"
+      className="ax-checkList__item"
+      data-disabled={isDisabled}
+      onClick={() => onClick(id, false)}
+      onContextMenu={(e) => [
+        allowNegative && onClick(id, true),
+        e.preventDefault(),
+      ]}
+      {...aria}
+    >
+      {!allowNegative && (
+        <Icon
+          data-type="checkbox"
+          className="ax-checkList__checkbox"
+          data-selected={selected === 1}
+          icon={selected ? CoreIcons.checkboxInt : CoreIcons.checkboxOff}
+        />
+      )}
+      {allowNegative && (
+        <Fragment>
           <Icon
-            data-type="checkbox"
+            data-type="multiple"
             className="ax-checkList__checkbox"
-            data-selected={selected === 1}
-            icon={selected ? CoreIcons.checkboxInt : CoreIcons.checkboxOff}
+            icon={
+              selected === 1
+                ? CoreIcons.expand
+                : selected === -1
+                  ? CoreIcons.collapse
+                  : CoreIcons.checkboxOff
+            }
+            data-selected={selected}
           />
-        )}
-        {allowNegative && (
-          <Fragment>
+          <div className="ax-checkList__checkbox">
+            <Icon
+              data-type="positive"
+              onClick={(e) => [(onClick(id, false), e.stopPropagation())]}
+              icon={selected === 1 ? CoreIcons.expandActive : CoreIcons.expand}
+              data-selected={selected === 1}
+            />
             <Icon
-              data-type="multiple"
-              className="ax-checkList__checkbox"
+              data-type="negative"
+              onClick={(e) => [(onClick(id, true), e.stopPropagation())]}
               icon={
-                selected === 1
-                  ? CoreIcons.expand
-                  : selected === -1
-                    ? CoreIcons.collapse
-                    : CoreIcons.checkboxOff
+                selected === -1 ? CoreIcons.collapseActive : CoreIcons.collapse
               }
-              data-selected={selected}
+              data-selected={selected === -1}
             />
-            <div className="ax-checkList__checkbox">
-              <Icon
-                data-type="positive"
-                onClick={(e) => [(onClick(id, false), e.stopPropagation())]}
-                icon={
-                  selected === 1 ? CoreIcons.expandActive : CoreIcons.expand
-                }
-                data-selected={selected === 1}
-              />
-              <Icon
-                data-type="negative"
-                onClick={(e) => [(onClick(id, true), e.stopPropagation())]}
-                icon={
-                  selected === -1
-                    ? CoreIcons.collapseActive
-                    : CoreIcons.collapse
-                }
-                data-selected={selected === -1}
-              />
-            </div>
-          </Fragment>
-        )}
-        {isValidElement(icon) && icon}
-        {isString(icon) && <Icon icon={icon} />}
-        <label>{label}</label>
-        <Badge {...badge} />
-      </div>
-    );
-  },
-);
-CheckItem.displayName = "CheckItem";
+          </div>
+        </Fragment>
+      )}
+      {isValidElement(icon) && icon}
+      {isString(icon) && <Icon icon={icon} />}
+      <label>{label}</label>
+      <Badge {...badge} />
+    </div>
+  );
+};
 
 export const CheckList: FC<CheckListProps> = ({
   items = [],
@@ -158,12 +155,19 @@ export const CheckList: FC<CheckListProps> = ({
   allowNegative,
   emptyMessage,
   sortItems = true,
-  ...props
+  selected,
+  nonselected,
+  onChange,
+  onClick,
+  ...aria
 }: CheckListProps) => {
   const { t } = useTranslation("data");
   const { selection, toggleSelection } = useSelectableList({
     items,
-    ...props,
+    selected,
+    nonselected,
+    onChange,
+    onClick,
   });
   const [showMore, setShowMore] = useState(false);
 
@@ -186,7 +190,7 @@ export const CheckList: FC<CheckListProps> = ({
   }, [items, selection, maxCount, showMore, sortItems]);
 
   return (
-    <div className="ax-checkList">
+    <div {...aria}>
       {listItems.map((item, index) => (
         <CheckItem
           {...item}

package/src/histogram/Histogram.tsx

@@ -31,12 +31,12 @@ import {
 import {
   type ColorType,
   type PaletteType,
+  type TestProps,
 } from "@react-fabric/core/dist/types/types";
-import { compareValues, Format } from "@react-fabric/utilities";
+import { compareValues, Format, isColor } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
 import { useTranslation } from "react-i18next";
-import classes from "./Histogram.module.css";
 
 const emptyIcon =
   "M20.84 22.73L11.11 13H3V11H9.11L6.11 8H3V6H4.11L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M15 11H14.2L15 11.8V11M21 8V6H9.2L11.2 8H21M3 18H9V16H3V18Z";
@@ -49,7 +49,7 @@ interface HistogramItem {
   disabled?: boolean;
 }
 
-export interface HistogramProps {
+export interface HistogramProps extends TestProps {
   /**
    * histogram items list
    */
@@ -83,11 +83,12 @@ export interface HistogramProps {
 export const Histogram = ({
   items = [],
   total,
-  color = "primary",
+  color = "primary-500",
   sortBy = "count",
   emptyTitle,
   emptyMessage,
   onClick,
+  ...aria
 }: HistogramProps) => {
   const { t } = useTranslation("data");
   const maxTotal = useMemo(() => {
@@ -103,10 +104,11 @@ export const Histogram = ({
 
   return (
     <div
-      className={classes.histogram}
+      className={"fabric-histogram from-0% to-100%"}
+      {...aria}
       style={
         {
-          "--color": `var(--${color})`,
+          "--color": isColor(color) ? color : `var(--color-${color})`,
         } as AnyObject
       }
     >
@@ -124,15 +126,17 @@ export const Histogram = ({
           data-disabled={item.count === 0 || item.disabled}
           className={classNames(
             "relative cursor-pointer flex flex-nowrap items-center select-none overflow-hidden min-h-6 my-px",
-            classes.histoLabel,
-            (item.count === 0 || item.disabled) && "pointer-events-none",
+            "fabric-histoLabel",
+            ((item.total ?? item.count) === 0 || item.disabled) &&
+              "pointer-events-none",
           )}
+          data-testid={item.id}
           onClick={(e) => [onClick?.(item.id), e.stopPropagation()]}
         >
           <div
             className={classNames(
-              "absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l from-0% to-100%",
-              classes.histoBar,
+              "absolute z-0 inset-0 opacity-50 min-w-2 ltr:bg-gradient-to-r rtl:bg-gradient-to-l",
+              "fabric-histoBar",
             )}
             style={{
               width: `${Math.min(item.count / maxTotal, 1) * 100}%`,
@@ -145,6 +149,7 @@ export const Histogram = ({
                 key="negative"
                 color="danger"
                 size="sm"
+                stopPropagation
                 icon={CoreIcons.funnelMinus}
                 aria-label="Filter Negative"
                 onClick={() => onClick?.(item.id, true)}
@@ -153,6 +158,7 @@ export const Histogram = ({
                 key="positive"
                 color="primary"
                 size="sm"
+                stopPropagation
                 icon={CoreIcons.funnelPlus}
                 aria-label="Filter"
                 onClick={() => onClick?.(item.id)}
@@ -164,7 +170,7 @@ export const Histogram = ({
           <span
             className={classNames(
               "z-1 rounded-full text-xs font-medium px-2 py-1 leading-none",
-              classes.histoBadge,
+              "fabric-histoBadge",
             )}
           >
             {Format.number(item.count)}

package/src/hooks/usePagination.tsx

@@ -111,9 +111,12 @@ export const usePagination = ({
 
   /** ***************** set page *******************/
   useEffect(() => {
-    setPage(Math.min(currentPage, totalPages - 1));
-    onChange?.(Math.min(currentPage, totalPages - 1));
-  }, [currentPage, totalPages]);
+    if (totalRecords > -1) {
+      const actual = Math.min(currentPage, totalPages - 1);
+      setPage(actual);
+      actual !== currentPage && onChange?.(actual);
+    }
+  }, [currentPage, totalRecords, totalPages]);
 
   const headLabel = useMemo(
     () => (
@@ -126,10 +129,13 @@ export const usePagination = ({
     [page, perPage, totalRecords],
   );
 
-  const onPageChange = useCallback((page: number) => {
-    setPage(page);
-    startTransition(() => onChange?.(page));
-  }, []);
+  const onPageChange = useCallback(
+    (page: number) => {
+      setPage(page);
+      startTransition(() => onChange?.(page));
+    },
+    [onChange],
+  );
 
   return { page, totalPages, headLabel, ranges, onPageChange };
 };

package/src/index.ts

@@ -28,7 +28,7 @@ export { Histogram } from "./histogram/Histogram";
 export { JsonViewer } from "./json/JsonViewer";
 export { Pagination } from "./pagination/Pagination";
 export { Table } from "./table/Table";
-export { type TableRef } from "./table/types";
+export { type TableColumn, type TableRef } from "./table/types";
 export { TreePanel } from "./tree/TreePanel";
 export { type TreeNodeType as TreeNode } from "./tree/types";
 export { VirtualGallery, type VirtualGalleryRef } from "./virtual/Gallery";

package/src/json/JsonViewer.tsx

@@ -22,7 +22,6 @@
  */
 
 import {
-  ActionLabel,
   Button,
   Copy,
   CoreIcons,
@@ -181,6 +180,8 @@ const JsonEntry = ({
       ret = actualValue ? t("json.true") : t("json.false");
     if (ret?.length > 128) {
       ret = <Text clamp={3}>{ret}</Text>;
+    } else {
+      ret = <div className="break-words">{ret}</div>;
     }
 
     return (
@@ -216,37 +217,36 @@ const JsonEntry = ({
 
   const labelDisplay = useMemo(
     () => (
-      <ActionLabel
-        className="text-dimmed text-sm px-2 flex-1 truncate"
-        actions={
-          !canExpand && canFilter
-            ? [
-                <Button
-                  key="negative"
-                  color="danger"
-                  size="sm"
-                  variant="link"
-                  icon={CoreIcons.funnelMinus}
-                  aria-label="Filter Negative"
-                  onClick={() =>
-                    onFilter?.(pathWithoutOrdinal, actualValue, true)
-                  }
-                />,
-                <Button
-                  key="positive"
-                  color="primary"
-                  size="sm"
-                  variant="link"
-                  icon={CoreIcons.funnelPlus}
-                  aria-label="Filter"
-                  onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
-                />,
-              ]
-            : []
-        }
+      <div
+        className={classNames(
+          "text-dimmed text-sm px-2 flex-1 group",
+          inline ? "truncate" : "break-words",
+        )}
       >
+        {!canExpand && canFilter && (
+          <div className="hidden pe-1 group-hover:inline-block">
+            <Button
+              key="negative"
+              color="danger"
+              size="xs"
+              variant="link"
+              icon={CoreIcons.funnelMinus}
+              aria-label="Filter Negative"
+              onClick={() => onFilter?.(pathWithoutOrdinal, actualValue, true)}
+            />
+            <Button
+              key="positive"
+              color="primary"
+              size="xs"
+              variant="link"
+              icon={CoreIcons.funnelPlus}
+              aria-label="Filter"
+              onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
+            />
+          </div>
+        )}
         {labeler?.(path) ?? field}
-      </ActionLabel>
+      </div>
     ),
     [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter],
   );
@@ -283,9 +283,14 @@ const JsonEntry = ({
             {labelDisplay}
           </div>
           {display && (
-            <div className={classNames("px-2", inline && "flex-1")}>
+            <div
+              className={classNames(
+                "px-2 flex flex-nowrap overflow-hidden",
+                inline && "flex-1",
+              )}
+            >
               {canCopy && <Copy size="xs" text={actualValue} />}
-              {display}
+              <div className="flex-1">{display}</div>
             </div>
           )}
         </div>
@@ -309,9 +314,14 @@ const JsonEntry = ({
           >
             {labelDisplay}
           </div>
-          <div className={classNames("px-2", inline && "flex-1")}>
+          <div
+            className={classNames(
+              "px-2 flex flex-nowrap overflow-hidden",
+              inline && "flex-1",
+            )}
+          >
             {canCopy && <Copy size="xs" text={value} />}
-            {display}
+            <div className="flex-1">{display}</div>
           </div>
         </div>
       )}
@@ -356,7 +366,7 @@ export const JsonViewer = <T extends KeyValue = KeyValue>({
   const list = useMemo(() => reduceObject(json), [json]);
 
   return (
-    <div {...rest} className={classNames(className, "p-4 bg-alternate")}>
+    <div {...rest} className={classNames(className, "bg-alternate")}>
       {!isEmpty(json) ? (
         list.map((item) => (
           <JsonEntry

package/src/table/AddColumn.tsx

@@ -22,13 +22,13 @@
  */
 
 import { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
-import { type ColumnType } from "./types";
+import { type TableColumn } from "./types";
 
 export const AddColumn = ({
   columns,
   onClick,
 }: {
-  columns: ColumnType[];
+  columns: TableColumn[];
   onClick: (id: string) => void;
 }) => {
   return (