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

package/src/table/types.ts

@@ -25,6 +25,7 @@ import { type IconProps } from "@react-fabric/core/dist/types/components/icon/Ic
 import {
   type CssProp,
   type Elements,
+  type NestedKeys,
   type RefProp,
   type TestProps,
 } from "@react-fabric/core/dist/types/types";
@@ -63,7 +64,7 @@ export const COL_DEFAULT_WIDTH = "12rem";
  * @property {(value: AnyObject, data: T, index: number) => Elements<AnyObject>} [renderer] - Custom renderer function for the column values.
  */
 export interface TableColumn<T = KeyValue> extends CssProp, TestProps {
-  id: keyof T | string;
+  id: NestedKeys<T>;
   field?: string;
   label?: string;
   tooltip?: string;
@@ -104,8 +105,8 @@ export interface TableRef {
 export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   columns: Array<TableColumn<T>>;
   data: T[];
-  keyProperty?: keyof T;
-  groupProperty?: keyof T;
+  keyProperty?: NestedKeys<T>;
+  groupProperty?: NestedKeys<T>;
   groupRenderer?: (key: AnyObject) => ReactElement;
   emptyDisplay?: ReactElement;
 
@@ -132,7 +133,7 @@ export interface TableProps<T = KeyValue> extends RefProp<TableRef> {
   canExpand?: (record: T) => boolean;
   children?: (record: T) => Elements<AnyObject>;
 
-  onFilter?: (id: keyof T | string, value?: AnyObject) => void;
+  onFilter?: (id: NestedKeys<T> | string, value?: AnyObject) => void;
 
   total?: number;
   onLoadMore?: (lastIndex?: number) => void;

package/src/tree/TreeNode.tsx

@@ -21,14 +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 {
-  Badge,
-  CoreIcons,
-  getBadgeProps,
-  getIconProps,
-  Icon,
-} from "@react-fabric/core";
-import { isEmpty, isString } from "@react-fabric/utilities";
+import { Badge, getBadgeProps, getIconProps, Icon } from "@react-fabric/core";
+import { isEmpty, isString, isTrue } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { isValidElement, useMemo } from "react";
 import { useTranslation } from "react-i18next";
@@ -89,7 +83,7 @@ export const TreeNode = ({
   }, [defaultLeafIcon, defaultNodeIcon, node.icon]);
 
   const canCheck = useMemo(() => {
-    return checkable === true || (checkable === "leafOnly" && node.leaf);
+    return isTrue(checkable) || (checkable === "leafOnly" && node.leaf);
   }, [node.leaf, checkable]);
 
   const canSelect = useMemo(() => {
@@ -111,7 +105,7 @@ export const TreeNode = ({
       {filler}
       {node.loading && (
         <div className="flex-initial w-6">
-          <Icon icon={CoreIcons.spinner} className="animate-spin text-muted" />
+          <Icon icon="icon-[svg-spinners--eclipse]" className="text-muted" />
         </div>
       )}
       {!node.leaf && !node.childFiltered && !node.loading && (
@@ -130,10 +124,10 @@ export const TreeNode = ({
             onClick={() => !node.disabled && onChecked(node.id)}
             icon={
               node.checked === 2
-                ? CoreIcons.checkboxInt
+                ? "icon-[mdi--checkbox-intermediate]"
                 : node.checked === 1
-                  ? CoreIcons.checkboxOn
-                  : CoreIcons.checkboxOff
+                  ? "icon-[mdi--checkbox-marked]"
+                  : "icon-[mdi--checkbox-blank-outline]"
             }
             className={classNames(
               node.disabled

package/src/tree/TreePanel.tsx

@@ -21,19 +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,
-  ButtonGroup,
-  CoreIcons,
-  Header,
-  Icon,
-  Section,
-} from "@react-fabric/core";
+import { Button, ButtonGroup, Header, Icon, Section } from "@react-fabric/core";
 import { Search } from "@react-fabric/form";
 import { useVirtualizer } from "@tanstack/react-virtual";
 import { useEffect, useImperativeHandle, useMemo, useRef } from "react";
 import { TreeNode } from "./TreeNode";
-import { iconCollapseAll, iconExpandAll, type TreePanelProps } from "./types";
+import { type TreePanelProps } from "./types";
 import { useTree } from "./useTree";
 
 // TODO: implement keyboard handler for navigating tree
@@ -59,8 +52,8 @@ import { useTree } from "./useTree";
  *   selectable={true}
  *   matcher={(item, query) => item.name.toLowerCase().includes(query.toLowerCase())}
  *   filterPlaceholder="Search..."
- *   defaultLeafIcon={<Icon icon={CoreIcons.file} />}
- *   defaultNodeIcon={<Icon icon={CoreIcons.folder} />}
+ *   defaultLeafIcon={<Icon icon="icon-[mdi--file]" />}
+ *   defaultNodeIcon={<Icon icon="icon-[mdi--folder]" />}
  *   expander="caret"
  *   onChecked={(checkedItems) => console.log(checkedItems)}
  *   onLoad={(id) => console.log(`Load children for ${id}`)}
@@ -146,12 +139,12 @@ export const TreePanel = <T extends KeyValue>({
 
   const expanders = useMemo<[string, string]>(() => {
     if (expander === "caret")
-      return [CoreIcons.caretRight, CoreIcons.caretDown];
+      return ["icon-[mdi--menu-right]", "icon-[mdi--menu-down]"];
     if (expander === "chevron")
-      return [CoreIcons.chevronRight, CoreIcons.chevronDown];
+      return ["icon-[mdi--chevron-right]", "icon-[mdi--chevron-down]"];
     if (expander === "folder")
-      return [CoreIcons.folderClosed, CoreIcons.folderOpen];
-    return [CoreIcons.expand, CoreIcons.collapse];
+      return ["icon-[mdi--folder-outline]", "icon-[mdi--folder-open-outline]"];
+    return ["icon-[mdi--plus-box-outline]", "icon-[mdi--minus-box-outline]"];
   }, [expander]);
 
   useImperativeHandle(
@@ -182,20 +175,22 @@ export const TreePanel = <T extends KeyValue>({
             allowClear
             placeholder={filterPlaceholder}
             {...{ noBorder: true }}
-            decorateStart={<Icon icon={CoreIcons.filter} className="p-1" />}
+            decorateStart={
+              <Icon icon="icon-[mdi--filter-variant]" className="p-1" />
+            }
           />
         )}
         <ButtonGroup variant="link" className="m-0">
           <Button
             size="sm"
             aria-label="expand all"
-            icon={iconExpandAll}
+            icon="icon-[mdi--arrow-expand-vertical]"
             onClick={expandAll}
           />
           <Button
             size="sm"
             aria-label="collapse all"
-            icon={iconCollapseAll}
+            icon="icon-[mdi--arrow-collapse-vertical]"
             onClick={collapseAll}
           />
         </ButtonGroup>

package/src/tree/types.ts

@@ -236,8 +236,3 @@ interface BaseTreePanelProps<T extends KeyValue = KeyValue>
   leafClassName?: string;
   nodeClassName?: string;
 }
-
-export 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 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/src/virtual/Scroller.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 { Button, ButtonGroup, CoreIcons } from "@react-fabric/core";
+import { Button, ButtonGroup } from "@react-fabric/core";
 
 export const Scroller = ({
   vertical = true,
@@ -45,7 +45,9 @@ export const Scroller = ({
         variant="link"
         aria-label="scroll to top"
         icon={{
-          icon: vertical ? CoreIcons.chevronsUp : CoreIcons.chevronsLeft,
+          icon: vertical
+            ? "icon-[mdi--chevron-double-up]"
+            : "icon-[mdi--chevron-double-left]",
           rtlFlip: true,
         }}
         disabled={(scrollActive & 2) === 0}
@@ -56,7 +58,9 @@ export const Scroller = ({
         variant="link"
         aria-label="scroll up"
         icon={{
-          icon: vertical ? CoreIcons.chevronUp : CoreIcons.chevronLeft,
+          icon: vertical
+            ? "icon-[mdi--chevron-up]"
+            : "icon-[mdi--chevron-left]",
           rtlFlip: true,
         }}
         disabled={(scrollActive & 2) === 0}
@@ -67,7 +71,9 @@ export const Scroller = ({
         variant="link"
         aria-label="scroll down"
         icon={{
-          icon: vertical ? CoreIcons.chevronDown : CoreIcons.chevronRight,
+          icon: vertical
+            ? "icon-[mdi--chevron-down]"
+            : "icon-[mdi--chevron-right]",
           rtlFlip: true,
         }}
         disabled={scrollActive % 2 === 0}
@@ -78,7 +84,9 @@ export const Scroller = ({
         variant="link"
         aria-label="scroll to bottom"
         icon={{
-          icon: vertical ? CoreIcons.chevronsDown : CoreIcons.chevronsRight,
+          icon: vertical
+            ? "icon-[mdi--chevron-double-down]"
+            : "icon-[mdi--chevron-double-right]",
           rtlFlip: true,
         }}
         disabled={scrollActive % 2 === 0}

package/dist/cjs/tree/types.js

@@ -1,30 +0,0 @@
-'use strict';
-
-/*
- * 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.
- */
-
-var 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";
-var 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";
-
-exports.iconCollapseAll = iconCollapseAll;
-exports.iconExpandAll = iconExpandAll;

package/dist/esm/tree/types.js

@@ -1,29 +0,0 @@
-'use client';
-
-/*
- * 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.
- */
-
-var 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";
-var 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";
-
-export { iconCollapseAll, iconExpandAll };