@react-fabric/data 1.0.0-beta.53 → 1.0.0-beta.55

package/src/hooks/useFilteredList.tsx

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { isString, matchString } from "@react-fabric/utilities";
+import { isArray, isString, matchString } from "@react-fabric/utilities";
 import {
   useCallback,
   useDeferredValue,
@@ -33,6 +33,7 @@ import {
 const filterList = (
   items: AnyObject[],
   query: AnyObject = "",
+  matchAll: boolean = true,
   matcher?: AnyObject,
 ) => {
   const newList: AnyObject[] = [];
@@ -40,7 +41,20 @@ const filterList = (
     if (matcher) {
       return matcher?.(item, query) && newList.push(item);
     }
-    if (query && isString(query)) {
+    if (query && isArray(query) && query.length > 0) {
+      if (
+        matchAll &&
+        query.every((q) => matchString(item.label ?? item.toString(), q))
+      ) {
+        return newList.push(item);
+      }
+      if (
+        !matchAll &&
+        query.some((q) => matchString(item.label ?? item.toString(), q))
+      ) {
+        return newList.push(item);
+      }
+    } else if (query && isString(query)) {
       if (matchString(item.label ?? item.toString(), query)) {
         return newList.push(item);
       }
@@ -51,6 +65,61 @@ const filterList = (
   return newList;
 };
 
+interface RetType<T, Q> {
+  onSearch: (query?: Q) => void;
+  query: Q;
+  filteredList: T[];
+  isSearching: boolean;
+}
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+export function useFilteredList<
+  T extends AnyObject = KeyValue,
+  Q extends AnyObject = string,
+>(items: T[], matchAll?: boolean): RetType<T, Q>;
+
+/**
+ * Custom hook to filter a list of items based on a query.
+ * It provides a way to search through the items and returns the filtered list.
+ * The hook uses a deferred value to optimize performance during transitions.
+ * It also allows for a custom matcher function to define how items should be matched against the query.
+ *
+ * @param items - The list of items to filter.
+ * @param matcher - An optional function to match items against the query.
+ * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
+ *
+ * @example
+ * ```jsx
+ * useFilteredList(items, (item, query) => {
+ *   return item.name.includes(query);
+ * });
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
+ */
+export function useFilteredList<
+  T extends AnyObject = KeyValue,
+  Q extends AnyObject = string,
+>(items: T[], matcher?: (item: T, query: Q) => boolean): RetType<T, Q>;
+
 /**
  * Custom hook to filter a list of items based on a query.
  * It provides a way to search through the items and returns the filtered list.
@@ -58,6 +127,7 @@ const filterList = (
  * It also allows for a custom matcher function to define how items should be matched against the query.
  *
  * @param items - The list of items to filter.
+ * @param matchAll - Match all phrases in the query list against the items.
  * @param matcher - An optional function to match items against the query.
  * @returns An object containing the search function, current query, filtered list, and a boolean indicating if a search is in progress.
  *
@@ -70,28 +140,39 @@ const filterList = (
  *
  * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-usefilteredlist--docs}
  */
-export const useFilteredList = <
+export function useFilteredList<
   T extends AnyObject = KeyValue,
   Q extends AnyObject = string,
 >(
   items: T[],
+  matchAll?: boolean,
   matcher?: (item: T, query: Q) => boolean,
-) => {
+): RetType<T, Q>;
+
+export function useFilteredList<
+  T extends AnyObject = KeyValue,
+  Q extends AnyObject = string,
+>(items: T[], matchAll?: AnyObject, matcher?: (item: T, query: Q) => boolean) {
   const [query, setQuery] = useState<Q>();
   const _items = useDeferredValue(items ?? []);
   const [filteredList, setFilteredList] = useState<T[]>([]);
   const [isSearching, startTransition] = useTransition();
 
+  const matchingAll = typeof matchAll === "boolean" ? matchAll : true;
+  const matcherFn = typeof matchAll === "function" ? matchAll : matcher;
+
   const filterItems = useCallback(
-    (items: T[], query?: Q) =>
-      startTransition(() => setFilteredList(filterList(items, query, matcher))),
+    (items: T[], query?: Q, matchingAll?: boolean) =>
+      startTransition(() =>
+        setFilteredList(filterList(items, query, matchingAll, matcherFn)),
+      ),
     [],
   );
 
   useEffect(() => {
-    if (query) filterItems(_items, query);
+    if (query) filterItems(_items, query, matchingAll);
     else setFilteredList(items);
-  }, [query, _items]);
+  }, [query, matchingAll, _items]);
 
   return { onSearch: setQuery, query, filteredList, isSearching };
-};
+}

package/src/table/HeaderCell.tsx

@@ -45,6 +45,7 @@ import {
 
 export const HeaderCell = ({
   id,
+  field,
   dataType,
   label,
   icon,
@@ -99,7 +100,7 @@ export const HeaderCell = ({
             type={dataType}
             list={filterOptions}
             filter={filter}
-            onFilter={(value) => onFilter?.(id, value)}
+            onFilter={(value) => onFilter?.(field ?? id, value)}
           />
         </Menu>,
       );
@@ -131,7 +132,7 @@ export const HeaderCell = ({
           type={dataType}
           list={filterOptions}
           filter={filter}
-          onFilter={(value) => onFilter?.(id, value)}
+          onFilter={(value) => onFilter?.(field ?? id, value)}
         />,
       ];
     }

package/src/table/Table.tsx

@@ -82,6 +82,8 @@ export const Table = <T extends KeyValue = KeyValue>({
   onScroll,
   onRowClick,
   onCheckedChanged,
+  total = 0,
+  onLoadMore,
 }: TableProps<T>) => {
   const { t } = useTranslation("data");
   const fireCheckChanged = useDebounce(
@@ -109,6 +111,9 @@ export const Table = <T extends KeyValue = KeyValue>({
     checked,
     keyProperty,
     groupProperty,
+    total,
+    loading,
+    onLoadMore,
     onCheckChanged: fireCheckChanged,
   });
   const refBody = useRef<HTMLDivElement>(null);
@@ -179,7 +184,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-2"
+          className="bg-base 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" />}
@@ -247,7 +252,7 @@ export const Table = <T extends KeyValue = KeyValue>({
                   ref={measureElement}
                   data-index={index}
                   className={classNames(
-                    "px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-1",
+                    "px-2 py-1 text-md bg-base border-y border-tint-100 cursor-pointer flex items-center gap-1 z-2",
                     isActiveSticky(index) && "sticky top-8",
                   )}
                   role="none"

package/src/table/types.ts

@@ -67,6 +67,7 @@ export interface TableColumn<T = KeyValue>
     IconProps,
     TestProps {
   id: keyof T | string;
+  field?: string;
   label?: string;
   tooltip?: string;
   actions?: ReactElement[];
@@ -134,4 +135,7 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   children?: (record: T) => Elements<AnyObject>;
 
   onFilter?: (id: keyof T | string, value?: AnyObject) => void;
+
+  total?: number;
+  onLoadMore?: (lastIndex?: number) => void;
 }

package/src/table/useVirtualTable.ts

@@ -21,7 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
-import { compareValues, groupBy } from "@react-fabric/utilities";
+import { compareValues, debounce, groupBy } from "@react-fabric/utilities";
 import {
   defaultRangeExtractor,
   type Range,
@@ -60,6 +60,9 @@ export const useVirtualTable = <T extends KeyValue = KeyValue>(
     checked?: AnyObject[];
     keyProperty: keyof T;
     groupProperty?: keyof T;
+    loading?: boolean;
+    total: number;
+    onLoadMore?: (startIndex: number) => void;
     onCheckChanged?: (checked: AnyObject[]) => void;
   },
 ) => {
@@ -202,6 +205,26 @@ export const useVirtualTable = <T extends KeyValue = KeyValue>(
     dispatch({ type: "updateState", checked: options.checked ?? [] });
   }, [options.checked]);
 
+  useEffect(() => {
+    if (options.onLoadMore) {
+      const firstItem = virtualItems[0]?.index;
+      const lastItem = virtualItems?.slice(-1).pop()?.index;
+      const canLoadPrevPage =
+        firstItem !== undefined && state.items[firstItem] === null;
+      const canLoadNextPage =
+        lastItem !== undefined &&
+        lastItem === state.items.length - 1 &&
+        state.items.length < options.total;
+      const db = debounce(options.onLoadMore);
+      if (canLoadPrevPage) {
+        db(firstItem);
+      } else if (!options.loading && canLoadNextPage) {
+        db(lastItem + 1);
+      }
+      return () => db.cancel();
+    }
+  }, [options.onLoadMore, virtualItems]);
+
   return {
     scrollerRef,
     items: virtualItems,

package/src/tree/TreeNode.tsx

@@ -97,11 +97,7 @@ export const TreeNode = ({
     <div
       role="treeitem"
       aria-selected={node.selected}
-      className={classNames(
-        "flex flex-nowrap items-center",
-        node.className,
-        node.leaf ? leafClassName : nodeClassName,
-      )}
+      className={classNames("flex flex-nowrap items-center")}
       data-testid={node["data-testid"]}
       data-test-value={node["data-test-value"]}
     >
@@ -147,6 +143,8 @@ export const TreeNode = ({
             "group/tool data-[selected]:bg-primary-100 flex flex-nowrap flex-1 overflow-hidden select-none",
             node.childSelected && "font-medium",
             node.disabled && "text-muted opacity-65",
+            node.className,
+            node.leaf ? leafClassName : nodeClassName,
             !node.disabled &&
               (canSelect || onClick) &&
               "hover:bg-primary-50 cursor-pointer",

package/src/tree/TreePanel.tsx

@@ -86,7 +86,6 @@ export const TreePanel = <T extends KeyValue>({
   checked,
   checkable,
   noLines,
-  renderer,
   searchable,
   selectable,
   matcher,
@@ -110,6 +109,7 @@ export const TreePanel = <T extends KeyValue>({
 }: TreePanelProps<T>) => {
   const {
     tree,
+    query,
     toggleExpand,
     toggleCheck,
     expandAll,
@@ -167,6 +167,7 @@ export const TreePanel = <T extends KeyValue>({
       >
         {searchable && (
           <Search
+            value={query}
             onSearch={onFilter}
             allowClear
             placeholder={filterPlaceholder}
@@ -216,8 +217,7 @@ export const TreePanel = <T extends KeyValue>({
                 leafClassName={leafClassName}
                 nodeClassName={nodeClassName}
               >
-                {(tree[index].data && renderer?.(tree[index].data)) ??
-                  makeLabel?.(tree[index].data) ??
+                {(tree[index].data && makeLabel?.(tree[index].data)) ??
                   tree[index].label}
               </TreeNode>
             </div>

package/src/tree/types.ts

@@ -21,6 +21,7 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { AvatarProps } from "@react-fabric/core/dist/types/components/avatar/Avatar";
 import {
   type BadgeType,
   type ChildProp,
@@ -56,7 +57,7 @@ interface TreeBaseNode<T> extends Omit<IconProps, "icon">, CssProp, TestProps {
   disabled?: boolean;
   data?: T;
 
-  icon?: ElementType<IconProps> | string;
+  icon?: Elements<JSX.Element>;
 }
 
 export type TreeNodeType<T extends KeyValue = KeyValue> = TreeBaseNode<T> &
@@ -90,7 +91,7 @@ export interface InternalNode
   loaded: boolean;
   parent?: string;
   empty?: boolean;
-  icon?: ElementType<IconProps> | string;
+  icon?: Elements<JSX.Element>;
   errored?: string;
   selected?: true;
   childSelected?: true;
@@ -103,8 +104,8 @@ export interface InternalNode
 export interface TreeNodeProps extends ChildProp {
   node: InternalNode;
   expanders: [string, string];
-  defaultNodeIcon?: string;
-  defaultLeafIcon?: string;
+  defaultNodeIcon?: Elements<JSX.Element>;
+  defaultLeafIcon?: Elements<JSX.Element>;
   noLines?: boolean;
   selectable?: true | "leafOnly";
   checkable?: true | "leafOnly";
@@ -185,23 +186,22 @@ export interface TreePanelProps<T extends KeyValue = KeyValue>
   /**
    * callback on selection of tree node
    */
-  onSelect?: (id: string, data: T) => void;
+  onSelect?: (id: string, data: T) => boolean | undefined;
   /**
    * callback on change of checked list
+   * @param leafs - list of checked leaf nodes
+   * @param nodes - list of checked nodes
+   * @param partials - list of partially checked nodes
    */
-  onChecked?: (leafs: string[], nodes: string[]) => void;
-  /**
-   * item label renderer
-   */
-  renderer?: (data: T) => JSX.Element;
+  onChecked?: (leafs: string[], nodes: string[], partials: string[]) => void;
   /**
    * item filter matcher
    */
   matcher?: (data: T, query: string) => boolean;
 
   sorter?: false | ((a: T, b: T) => number);
-  makeLabel?: (node: T) => string;
-  makeIcon?: (node: T) => string;
+  makeLabel?: (node: T) => Elements<JSX.Element>;
+  makeIcon?: (node: T) => Elements<JSX.Element>;
 
   defaultExpanded?: string[];
   onExpandToggle?: (id: string[]) => void;

package/src/tree/useTree.ts

@@ -56,6 +56,10 @@ type TreeActions =
    * update item check state
    */
   | { type: "checked"; id: string[] }
+  /**
+   * toggle item select, used as action handler
+   */
+  | { type: "toggleSelect"; id: string }
   /**
    * toggle item check, used as action handler
    */
@@ -85,6 +89,7 @@ interface TreeState {
   items: InternalNode[];
   itemMap: Map<string, InternalNode>;
   tree: InternalNode[];
+  query?: string;
   selected?: string;
   checked?: string[];
 }
@@ -151,12 +156,29 @@ export const useTree = <T extends KeyValue>({
     [onLoad],
   );
 
+  const fireSelected = useDebounce(
+    (nodeId: string, data: T) => {
+      componentEvents.current.onSelect?.(nodeId, data);
+    },
+    [onSelect],
+  );
+
+  const fireChecked = useDebounce(
+    (leafs: string[], nodes: string[], partials: string[]) => {
+      componentEvents.current.onChecked?.(leafs, nodes, partials);
+    },
+    [onChecked],
+  );
+
   const [state, dispatch] = useReducer(
     (state: TreeState, action: TreeActions) => {
       if (action.type === "load") {
         state.items = refactorTree(action.items, { sorter, defaultExpanded });
         state.itemMap = makeTreeMap(state.items);
         state.tree = flattenTree(state.items);
+        state.selected = undefined;
+        state.checked = undefined;
+        state.query = "";
         return { ...state };
       }
       if (action.type === "toggleExpand") {
@@ -172,6 +194,7 @@ export const useTree = <T extends KeyValue>({
         fireExpandToggle(Array.from(state.itemMap.values()));
         state.tree = flattenTree(state.items);
         state.selected && updateSelection(state.itemMap, state.selected, true);
+        state.checked?.forEach((id) => updateChecked(state.itemMap, id, 1));
         return { ...state };
       }
       if (action.type === "expand") {
@@ -210,32 +233,49 @@ export const useTree = <T extends KeyValue>({
         } else {
           filterTree(state.itemMap, action.query, matcher);
           state.tree = flattenTree(state.items);
-          return { ...state };
         }
+        return { ...state, query: action.query };
+      }
+      if (action.type === "toggleSelect") {
+        if (state.selected) {
+          updateSelection(state.itemMap, state.selected);
+        }
+        if (!onSelect) {
+          updateSelection(state.itemMap, action.id, true);
+          state.selected = action.id;
+          state.tree = flattenTree(state.items);
+        } else {
+          fireSelected(action.id, state.itemMap.get(action.id)?.data);
+        }
+        return { ...state };
       }
       if (action.type === "select") {
         if (state.selected) {
           updateSelection(state.itemMap, state.selected);
         }
         updateSelection(state.itemMap, action.id, true);
+        state.selected = action.id;
         state.tree = flattenTree(state.items);
-        componentEvents.current.onSelect?.(
-          action.id,
-          state.itemMap.get(action.id)?.data,
-        );
-        return { ...state, selected: action.id };
+        return { ...state };
       }
       if (action.type === "toggleCheck") {
         updateChecked(state.itemMap, action.id);
-        const checkList: string[][] = [[], []];
+        const checkList: string[][] = [[], [], []];
         Array.from(state.itemMap.values())
-          .filter((node) => node.checked === 1)
-          .forEach((node) => checkList[node.leaf ? 0 : 1].push(node.id));
-        componentEvents.current.onChecked?.(checkList[0], checkList[1]);
-        return { ...state };
+          .filter((node) => node.checked !== 0)
+          .forEach((node) =>
+            checkList[node.leaf ? 0 : node.checked].push(node.id),
+          );
+        fireChecked(
+          checkList[0], // leafs
+          checkList[1], // nodes
+          checkList[2], // partials
+        );
+        return { ...state, checked: checkList[0] };
       }
       if (action.type === "checked") {
-        action.id.forEach((id) => updateChecked(state.itemMap, id));
+        state.itemMap.forEach((item) => (item.checked = 0));
+        action.id.forEach((id) => updateChecked(state.itemMap, id, 1));
         return { ...state, checked: action.id };
       }
       return state;
@@ -245,6 +285,7 @@ export const useTree = <T extends KeyValue>({
       items: [],
       tree: [],
       checked: [],
+      query: "",
     },
   );
 
@@ -260,6 +301,8 @@ export const useTree = <T extends KeyValue>({
         type: "expand",
         id: intialExpand.current.shift() as unknown as string,
       });
+    selected && dispatch({ type: "select", id: selected });
+    checked && dispatch({ type: "checked", id: checked });
   }, [itemList]);
 
   useEffect(() => {
@@ -279,7 +322,7 @@ export const useTree = <T extends KeyValue>({
   }, []);
 
   const select = useCallback((id: string) => {
-    dispatch({ type: "select", id });
+    dispatch({ type: "toggleSelect", id });
   }, []);
 
   const expand = useCallback((id: string) => {
@@ -304,6 +347,7 @@ export const useTree = <T extends KeyValue>({
 
   return {
     tree: state.tree,
+    query: state.query,
     toggleExpand,
     expandAll,
     collapseAll,

package/src/tree/utils.ts

@@ -139,16 +139,21 @@ export const updateSelection = (
     while (parent) {
       const parentNode = nodes.get(parent);
       parentNode && (parentNode.childSelected = selected);
-      selected && parentNode && (parentNode.open = true);
+      // selected && parentNode && (parentNode.open = true);
       parent = parentNode?.parent;
     }
   }
 };
 
-export const updateChecked = (list: Map<string, AnyObject>, id: string) => {
+export const updateChecked = (
+  list: Map<string, AnyObject>,
+  id: string,
+  checked?: 0 | 1 | 2,
+) => {
   const node = list.get(id);
   if (node) {
-    node.checked = node.checked === 1 ? 0 : 1;
+    node.checked =
+      checked === undefined ? (node.checked === 0 ? 1 : 0) : checked;
     // check all children
     node.children &&
       getChildren(node.children).forEach(

package/src/virtual/Gallery.tsx

@@ -189,7 +189,7 @@ const _VirtualGallery = <T extends AnyObject>({
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[1]?.index ?? 0;
+    currentIndex.current = virtualItems[2]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&

package/src/virtual/List.tsx

@@ -159,7 +159,7 @@ const _VirtualList = <T extends AnyObject>({
 
   const currentIndex = useRef(0);
   useEffect(() => {
-    currentIndex.current = virtualItems[1]?.index ?? 0;
+    currentIndex.current = virtualItems[2]?.index ?? 0;
     if (
       scrollerRef.current &&
       virtualItems[0] &&