@react-fabric/data 1.0.0-beta.3 → 1.0.0-beta.31

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

@@ -1,6 +1,6 @@
-/// <reference types="react" />
 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 IconProps, CssProp, TestProps {
+import { type ElementType } from "react";
+interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
     id: string;
     /**
      * display label
@@ -23,17 +23,18 @@ interface TreeBaseNode<T> extends IconProps, CssProp, TestProps {
      */
     disabled?: boolean;
     data?: T;
+    icon?: ElementType<IconProps> | string;
 }
 export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> & ({
     leaf: true;
     children?: never;
 } | {
-    leaf?: false;
+    leaf?: boolean;
     children?: Array<TreeNodeType<T>>;
     open?: boolean;
     iconOpen?: string;
 });
-export interface InternalNode extends IconProps, CssProp, TestProps {
+export interface InternalNode extends Omit<IconProps, "icon">, CssProp, TestProps {
     id: string;
     label: Elements<JSX.Element>;
     queryable?: string;
@@ -50,6 +51,7 @@ export interface InternalNode extends IconProps, CssProp, TestProps {
     loaded: boolean;
     parent?: string;
     empty?: boolean;
+    icon?: ElementType<IconProps> | string;
     errored?: string;
     selected?: true;
     childSelected?: true;
@@ -66,9 +68,12 @@ export interface TreeNodeProps extends ChildProp {
     noLines?: boolean;
     selectable?: true | "leafOnly";
     checkable?: true | "leafOnly";
+    leafClassName?: string;
+    nodeClassName?: string;
     onToggle: (id: string) => void;
     onSelect: (id: string) => void;
     onChecked: (id: string) => void;
+    onClick?: (id: string, node: any) => void;
 }
 export interface TreeRef {
     select: (id: string) => void;
@@ -120,10 +125,18 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      * callback for lazy loading tree items
      */
     onLoad?: (id: string) => Promise<Array<TreeNodeType<T>> | undefined> | Array<TreeNodeType<T>> | undefined;
+    /**
+     * callback to load tree using search query
+     */
+    onQuery?: (query: string) => void;
+    /**
+     * callback on click of tree node
+     */
+    onClick?: (id: string, data: T) => void;
     /**
      * callback on selection of tree node
      */
-    onSelect?: (id: string) => void;
+    onSelect?: (id: string, data: T) => void;
     /**
      * callback on change of checked list
      */
@@ -136,6 +149,13 @@ export interface TreePanelProps<T extends KeyValue = KeyValue> extends TestProps
      * item filter matcher
      */
     matcher?: (data: T, query: string) => boolean;
+    sorter?: false | ((a: T, b: T) => number);
+    makeLabel?: (node: T) => string;
+    makeIcon?: (node: T) => string;
+    defaultExpanded?: string[];
+    onExpandToggle?: (id: string[]) => void;
+    leafClassName?: string;
+    nodeClassName?: string;
 }
 export declare const iconExpandAll = "M12.984 9v6h3l-3.984 3.984-3.984-3.984h3v-6h-3l3.984-3.984 3.984 3.984h-3zM3.984 2.016h16.031v1.969h-16.031v-1.969zM3.984 20.016h16.031v1.969h-16.031v-1.969z";
 export declare const iconCollapseAll = "M3.984 11.016h16.031v1.969h-16.031v-1.969zM15.984 5.016l-3.984 3.984-3.984-3.984h3v-4.031h1.969v4.031h3zM8.016 18.984l3.984-3.984 3.984 3.984h-3v4.031h-1.969v-4.031h-3z";

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
      */
@@ -50,6 +58,6 @@ export interface VirtualGalleryProps<T> {
     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.3",
+  "version": "1.0.0-beta.31",
   "description": "RUF: Data package",
   "author": "Adarsh Pastakia <adarshpastakia@outlook.com>",
   "license": "MIT",
@@ -33,9 +33,10 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.3",
-    "@react-fabric/form": "^1.0.0-beta.3",
-    "@react-fabric/utilities": "^1.0.0-beta.1",
+    "@react-fabric/core": "^1.0.0-beta.31",
+    "@react-fabric/date": "^1.0.0-beta.31",
+    "@react-fabric/form": "^1.0.0-beta.31",
+    "@react-fabric/utilities": "^1.0.0-beta.31",
     "@tanstack/react-virtual": "^3.8.6",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
@@ -43,13 +44,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": "2ce2a968f48d6ffc338f5da3a0cf67232d0c6864"
+  "gitHead": "de71c6875264d385666d0fa441785b9884951561"
 }

package/src/checklist/CheckList.tsx

@@ -0,0 +1,222 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 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 { Badge, CoreIcons, EmptyContent, Icon } from "@react-fabric/core";
+import {
+  type BadgeType,
+  type TestProps,
+} from "@react-fabric/core/dist/types/types";
+import { isString } from "@react-fabric/utilities";
+import {
+  Fragment,
+  isValidElement,
+  useEffect,
+  useMemo,
+  useState,
+  type FC,
+} from "react";
+import { useTranslation } from "react-i18next";
+import {
+  useSelectableList,
+  type SelectableProps,
+} from "../hooks/useSelectableList";
+
+export interface CheckListItem extends KeyValue {
+  id: string;
+  label: string;
+  icon?: string;
+  badge?: BadgeType;
+  isDisabled?: boolean;
+}
+
+export interface CheckListProps extends SelectableProps, TestProps {
+  /**
+   * list items
+   */
+  items: CheckListItem[];
+  /**
+   * allow negative selections
+   */
+  allowNegative?: boolean;
+  /**
+   * max list items
+   */
+  maxCount?: number;
+  /**
+   * message for empty list
+   */
+  emptyMessage?: string;
+
+  sortItems?: boolean;
+}
+
+const CheckItem: FC<
+  Omit<CheckListItem, "selected"> & {
+    selected?: number;
+    allowNegative?: boolean;
+  }
+> = ({
+  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="multiple"
+            className="ax-checkList__checkbox"
+            icon={
+              selected === 1
+                ? CoreIcons.expand
+                : selected === -1
+                  ? CoreIcons.collapse
+                  : CoreIcons.checkboxOff
+            }
+            data-selected={selected}
+          />
+          <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>
+  );
+};
+
+export const CheckList: FC<CheckListProps> = ({
+  items = [],
+  maxCount = 0,
+  allowNegative,
+  emptyMessage,
+  sortItems = true,
+  selected,
+  nonselected,
+  onChange,
+  onClick,
+  ...aria
+}: CheckListProps) => {
+  const { t } = useTranslation("data");
+  const { selection, toggleSelection } = useSelectableList({
+    items,
+    selected,
+    nonselected,
+    onChange,
+    onClick,
+  });
+  const [showMore, setShowMore] = useState(false);
+
+  useEffect(() => {
+    setShowMore(false);
+  }, [items]);
+
+  const listItems = useMemo(() => {
+    return [...items]
+      .sort((a, b) => {
+        if (sortItems && selection[a.id] !== selection[b.id]) {
+          if (selection[a.id] === 1) return -1;
+          if (selection[b.id] === 1) return 1;
+          if (selection[a.id] === -1) return -1;
+          if (selection[b.id] === -1) return 1;
+        }
+        return 0;
+      })
+      .slice(0, !showMore && maxCount > 0 ? maxCount : undefined);
+  }, [items, selection, maxCount, showMore, sortItems]);
+
+  return (
+    <div {...aria}>
+      {listItems.map((item, index) => (
+        <CheckItem
+          {...item}
+          key={index}
+          onClick={toggleSelection}
+          allowNegative={allowNegative}
+          selected={selection[item.id]}
+        />
+      ))}
+      {maxCount > 0 && items.length > maxCount && (
+        <div className="ax-moreLink">
+          <span
+            role="none"
+            className="link"
+            onClick={() => setShowMore(!showMore)}
+          >
+            ...{t(`core:action.${showMore ? "less" : "more"}`)}
+          </span>
+        </div>
+      )}
+      {listItems.length === 0 && (
+        <EmptyContent
+          className="text-sm"
+          message={emptyMessage ?? t("checkList.empty")}
+        />
+      )}
+    </div>
+  );
+};

package/src/histogram/Histogram.tsx

@@ -31,6 +31,7 @@ import {
 import {
   type ColorType,
   type PaletteType,
+  type TestProps,
 } from "@react-fabric/core/dist/types/types";
 import { compareValues, Format } from "@react-fabric/utilities";
 import classNames from "classnames";
@@ -49,7 +50,7 @@ interface HistogramItem {
   disabled?: boolean;
 }
 
-export interface HistogramProps {
+export interface HistogramProps extends TestProps {
   /**
    * histogram items list
    */
@@ -88,6 +89,7 @@ export const Histogram = ({
   emptyTitle,
   emptyMessage,
   onClick,
+  ...aria
 }: HistogramProps) => {
   const { t } = useTranslation("data");
   const maxTotal = useMemo(() => {
@@ -104,6 +106,7 @@ export const Histogram = ({
   return (
     <div
       className={classes.histogram}
+      {...aria}
       style={
         {
           "--color": `var(--${color})`,
@@ -125,8 +128,10 @@ export const Histogram = ({
           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",
+            ((item.total ?? item.count) === 0 || item.disabled) &&
+              "pointer-events-none",
           )}
+          data-testid={item.id}
           onClick={(e) => [onClick?.(item.id), e.stopPropagation()]}
         >
           <div
@@ -145,6 +150,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 +159,7 @@ export const Histogram = ({
                 key="positive"
                 color="primary"
                 size="sm"
+                stopPropagation
                 icon={CoreIcons.funnelPlus}
                 aria-label="Filter"
                 onClick={() => onClick?.(item.id)}

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/hooks/useSelectableList.ts

@@ -0,0 +1,94 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2024 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 { useCallback, useEffect, useRef, useState, useTransition } from "react";
+
+export interface SelectableProps {
+  /**
+   * list items
+   */
+  items: Array<{ label: string } & KeyValue>;
+  /**
+   * selected item ids
+   */
+  selected?: string[];
+  /**
+   * selected negative item ids
+   */
+  nonselected?: string[];
+  /**
+   * change callback
+   */
+  onChange?: (ids: string[], nonIds?: string[]) => void;
+  /**
+   * item click callback
+   */
+  onClick?: (id: string, isNegative: boolean) => void;
+}
+
+export const useSelectableList = ({
+  items,
+  selected,
+  nonselected,
+  onChange,
+  onClick,
+}: SelectableProps) => {
+  const selectionRef = useRef<KeyValue<number>>({});
+  const [selection, setSelection] = useState<KeyValue<number>>({});
+  const [, startTransition] = useTransition();
+  useEffect(() => {
+    selectionRef.current = items.reduce(
+      (ret, { id }) => ({
+        ...ret,
+        [id]: selected?.includes?.(id)
+          ? 1
+          : nonselected?.includes?.(id)
+            ? -1
+            : 0,
+      }),
+      {},
+    );
+    setSelection({ ...selectionRef.current });
+  }, [items, selected, nonselected]);
+
+  const toggleSelection = useCallback((id: string, isNegative = false) => {
+    const check = isNegative ? -1 : 1;
+    if (selectionRef.current[id] !== check) selectionRef.current[id] = check;
+    else if (selectionRef.current[id] === check) selectionRef.current[id] = 0;
+    const change: string[][] = [[], []];
+    Object.entries(selectionRef.current).forEach(([id, select]) =>
+      select === 1
+        ? change[0].push(id)
+        : select === -1
+          ? change[1].push(id)
+          : undefined,
+    );
+    setSelection({ ...selectionRef.current });
+    startTransition(() => {
+      onClick?.(id, isNegative);
+      onChange?.(change[0], change[1]);
+    });
+  }, []);
+
+  return { selection, toggleSelection };
+};

package/src/index.ts

@@ -23,11 +23,12 @@
 
 import "./i18n";
 
+export { CheckList } from "./checklist/CheckList";
 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";