@react-fabric/data 1.0.0-beta.6 → 1.0.0-beta.61

package/src/i18n/ar.json

@@ -32,5 +32,10 @@
     "uncheckAll": "الغاءالكل",
     "addFilter": "أضف عامل تصفية",
     "addFilterNot": "إضافة لا تصفية"
+  },
+  "data": {
+    "tree": {
+      "noItems": "لا توجد عناصر شجرة متوفرة"
+    }
   }
 }

package/src/i18n/en.json

@@ -32,5 +32,10 @@
     "uncheckAll": "Uncheck All",
     "addFilter": "Add Filter",
     "addFilterNot": "Add not Filter"
+  },
+  "data": {
+    "tree": {
+      "noItems": "No tree items available"
+    }
   }
 }

package/src/json/JsonViewer.tsx

@@ -22,10 +22,8 @@
  */
 
 import {
-  ActionLabel,
   Button,
   Copy,
-  CoreIcons,
   EmptyContent,
   Icon,
   Meter,
@@ -181,6 +179,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 +216,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="icon-[mdi--filter-minus]"
+              aria-label="Filter Negative"
+              onClick={() => onFilter?.(pathWithoutOrdinal, actualValue, true)}
+            />
+            <Button
+              key="positive"
+              color="primary"
+              size="xs"
+              variant="link"
+              icon="icon-[mdi--filter-plus]"
+              aria-label="Filter"
+              onClick={() => onFilter?.(pathWithoutOrdinal, actualValue)}
+            />
+          </div>
+        )}
         {labeler?.(path) ?? field}
-      </ActionLabel>
+      </div>
     ),
     [field, labeler, pathWithoutOrdinal, actualValue, canExpand, canFilter],
   );
@@ -277,15 +276,24 @@ const JsonEntry = ({
             {canExpand && (
               <Icon
                 rtlFlip
-                icon={expanded ? CoreIcons.chevronDown : CoreIcons.chevronRight}
+                icon={
+                  expanded
+                    ? "icon-[mdi--chevron-down]"
+                    : "icon-[mdi--chevron-right]"
+                }
               />
             )}
             {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 +317,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>
       )}
@@ -336,6 +349,32 @@ const JsonEntry = ({
   );
 };
 
+/**
+ * JsonViewer component to display JSON data in a structured format.
+ * It supports inline display, property filtering, and custom formatting.
+ * The component can handle nested objects and arrays, displaying them in a tree-like structure.
+ * It also provides options for copying values and filtering properties.
+ *
+ * @param {JsonViewProps<T>} props - The properties for the JsonViewer component.
+ * @returns {JSX.Element} The rendered JsonViewer component.
+ *
+ * @example
+ * ```jsx
+ * <JsonViewer
+ *   json={{ name: "John", age: 30, address: { city: "New York", zip: "10001" } }}
+ *   copy={true}
+ *   filters={true}
+ *   propertyScheme={{ date: ["createdAt"], phone: ["contact"] }}
+ *   inline={true}
+ *   labelWidth="25%"
+ *   formatter={(path, value) => (path === "age" ? `${value} years` : value)}
+ *   labeler={(path) => path.replace(/_/g, " ").toUpperCase()}
+ *   onFilter={(path, value, negate) => console.log(`Filter ${negate ? "negate" : ""} on ${path}:`, value)}
+ * />
+ * ```
+ *
+ * @see {@link https://adarshpastakia.github.io/react-fabric/?path=/docs/data-jsonviewer--docs}
+ */
 export const JsonViewer = <T extends KeyValue = KeyValue>({
   className,
   json,
@@ -356,7 +395,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/pagination/Pagination.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 { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 import classNames from "classnames";
 import { Fragment, memo, useMemo } from "react";
 
@@ -48,6 +48,16 @@ export interface PaginationProps {
   onPageChange: (page: number) => void;
 }
 
+/**
+ * Pagination component to navigate through pages of data.
+ * It displays buttons for navigating to the first, previous, next, and last pages,
+ * as well as buttons for specific page numbers based on the provided ranges.
+ * The component supports a minimal view that shows the current page and total pages.
+ * It uses memoization to optimize rendering performance.
+ *
+ * @param {PaginationProps} props - The properties for the Pagination component.
+ * @returns {JSX.Element} The rendered Pagination component.
+ */
 export const Pagination = memo(
   ({ page, ranges, totalPages, minimal, onPageChange }: PaginationProps) => {
     const [start, mid, last] = ranges;
@@ -115,7 +125,7 @@ export const Pagination = memo(
             page === 0 && "pointer-events-none text-tint-300",
           )}
         >
-          <Icon icon={CoreIcons.chevronsLeft} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-double-left]" rtlFlip />
         </button>
         <button
           onClick={() => onPageChange(page - 1)}
@@ -124,7 +134,7 @@ export const Pagination = memo(
             page === 0 && "pointer-events-none text-tint-300",
           )}
         >
-          <Icon icon={CoreIcons.chevronLeft} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-left]" rtlFlip />
         </button>
         {!minimal && pageBody}
         {minimal && (
@@ -139,7 +149,7 @@ export const Pagination = memo(
             page + 1 >= totalPages && "pointer-events-none text-tint-300",
           )}
         >
-          <Icon icon={CoreIcons.chevronRight} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-right]" rtlFlip />
         </button>
         <button
           onClick={() => onPageChange(totalPages - 1)}
@@ -148,7 +158,7 @@ export const Pagination = memo(
             page + 1 >= totalPages && "pointer-events-none text-tint-300",
           )}
         >
-          <Icon icon={CoreIcons.chevronsRight} rtlFlip />
+          <Icon icon="icon-[mdi--chevron-double-right]" rtlFlip />
         </button>
       </div>
     );

package/src/table/AddColumn.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 { CoreIcons, Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
+import { Dropdown, Icon, Menu, MenuItem } from "@react-fabric/core";
 import { type TableColumn } from "./types";
 
 export const AddColumn = ({
@@ -32,10 +32,10 @@ export const AddColumn = ({
   onClick: (id: string) => void;
 }) => {
   return (
-    <div className="group font-medium w-6 flex flex-nowrap text-start items-end">
+    <div className="group font-medium w-6 flex flex-nowrap text-start items-center">
       <Dropdown placement="bottom-end">
         <Icon
-          icon={CoreIcons.insert}
+          icon="icon-[mdi--plus-circle-outline]"
           className="p-1 rounded-t rounded-b-none hover:outline"
         />
         <Menu className="text-sm" onClick={onClick}>
@@ -45,7 +45,7 @@ export const AddColumn = ({
               id={String(col.id)}
               data-dropdown-dismiss="false"
               label={`${col.label ?? String(col.id)}`}
-              icon={!col.hidden ? CoreIcons.tick : ""}
+              icon={!col.hidden ? "icon-[mdi--check]" : ""}
             />
           ))}
         </Menu>

package/src/table/BodyCell.tsx

@@ -22,7 +22,13 @@
  */
 
 import { DateDisplay } from "@react-fabric/date";
-import { Format, getByPath, 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";
@@ -52,29 +58,38 @@ export const BodyCell = ({
   const content = useMemo(() => {
     const value = getByPath(item, column.id.toString());
     if (column.renderer != null) {
-      return column.renderer(item[column.id], item, index);
+      return column.renderer(value, item, index);
     }
     if (column.dataType === "boolean") {
-      const map = column.valueMap ?? { true: "Yes", false: "no" };
+      const map = column.valueMap ?? { true: "Yes", false: "No" };
       return map[`${isTrue(value) ? "true" : "false"}`];
     }
     if (column.valueMap != null) {
-      if (column.dataType === "string" && value in column.valueMap) {
+      if (
+        ["number", "string"].includes(column.dataType ?? "string") &&
+        value in column.valueMap
+      ) {
         return column.valueMap[value];
       }
     }
-    if (column.dataType === "date") {
+    if (["date", "time", "datetime"].includes(column.dataType ?? "")) {
       return <DateDisplay date={value} format={column.format} />;
     }
     if (column.dataType === "number") {
       return Format.number(value, column.format);
     }
+    if (isObject(value)) {
+      return JSON.stringify(value);
+    }
+    if (isArray(value)) {
+      return value.join(", ");
+    }
     return value ?? "";
   }, [item, column]);
 
   return (
     <div
-      className="overflow-hidden bg-inherit start-0"
+      className="overflow-hidden bg-inherit start-0 border-e group/table-col"
       style={{
         width: width ?? COL_DEFAULT_WIDTH,
         minWidth: column.minWidth ?? COL_MIN_WIDTH,
@@ -83,7 +98,9 @@ export const BodyCell = ({
     >
       <div
         className={classNames(
-          "px-2 py-1 border-e truncate",
+          "px-2 py-1",
+          column.className,
+          column.truncate && "truncate",
           column.align === "center" && "text-center",
           column.align === "end" && "text-end",
         )}

package/src/table/BodyRow.tsx

@@ -21,11 +21,11 @@
  * TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
  */
 
+import { Icon } from "@react-fabric/core";
 import classNames from "classnames";
 import { BodyCell } from "./BodyCell";
 import { CheckboxCell } from "./CheckboxCell";
 import { type TableColumn } from "./types";
-import { CoreIcons, Icon } from "@react-fabric/core";
 
 export const BodyRow = ({
   rowKey,
@@ -74,8 +74,9 @@ export const BodyRow = ({
         role="none"
         data-row={index}
         className={classNames(
-          "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500",
+          "flex flex-nowrap datatable-row data-hilight:outline-1 -outline-offset-1 outline-primary-500 group/table-row",
           onRowClick && "hover:bg-primary-50 active:bg-primary-100",
+          index % 2 ? "bg-even" : "bg-odd",
         )}
         onClick={() =>
           checkableRows && keyProperty && !onRowClick
@@ -87,13 +88,15 @@ export const BodyRow = ({
           {!!canExpand && (
             <div
               className={classNames(
-                "group font-medium w-6 flex flex-nowrap text-start items-center",
+                "group font-medium w-6 flex flex-nowrap text-start py-1",
                 !canExpand(data) && "pointer-events-none opacity-35",
               )}
             >
               <Icon
                 className="p-1 text-tint-700 hover:text-primary-600"
-                icon={expanded ? CoreIcons.collapse : CoreIcons.expand}
+                icon={
+                  expanded ? "icon-[mdi--minus-box]" : "icon-[mdi--plus-box]"
+                }
                 onClick={(e) => [
                   keyProperty && toggleExpand(data[keyProperty]),
                   e.stopPropagation(),

package/src/table/CheckboxCell.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 { CoreIcons, Icon } from "@react-fabric/core";
+import { Icon } from "@react-fabric/core";
 
 export const CheckboxCell = ({
   state,
@@ -31,14 +31,14 @@ export const CheckboxCell = ({
   onClick?: () => void;
 }) => {
   return (
-    <div className="group font-medium border-e w-6 flex flex-nowrap text-start items-center">
+    <div className="group font-medium border-e w-6 flex flex-nowrap text-start py-1">
       <Icon
         icon={
           state === 2
-            ? CoreIcons.checkboxInt
+            ? "icon-[mdi--checkbox-intermediate]"
             : state === 1
-              ? CoreIcons.checkboxOn
-              : CoreIcons.checkboxOff
+              ? "icon-[mdi--checkbox-marked]"
+              : "icon-[mdi--checkbox-blank-outline]"
         }
         className="p-1 text-tint-700 hover:text-primary-600"
         onClick={(e) => [onClick?.(), e.stopPropagation()]}

package/src/table/ColumnFilters.tsx

@@ -0,0 +1,105 @@
+/*
+ * React Fabric
+ * @version: 1.0.0
+ *
+ *
+ * The MIT License (MIT)
+ * Copyright (c) 2025 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 { Button, DropdownDismiss } from "@react-fabric/core";
+import { Checkbox, Input, Search } from "@react-fabric/form";
+import { EMPTY_ARRAY, matchString } from "@react-fabric/utilities";
+import { useState } from "react";
+import { useFilteredList } from "../hooks/useFilteredList";
+import { type TableColumn } from "./types";
+
+interface FilterProps {
+  type: TableColumn["dataType"];
+  onFilter: (value: AnyObject) => void;
+  list?: AnyObject[];
+  filter: AnyObject;
+}
+
+const ListFilter = ({
+  list = EMPTY_ARRAY,
+  filter,
+  onFilter,
+}: Partial<FilterProps>) => {
+  const [selected, setSelected] = useState<Set<string>>(new Set(filter));
+
+  const { filteredList, query, onSearch } = useFilteredList(
+    list,
+    (item, query) => {
+      return matchString(item.id ?? item, query);
+    },
+  );
+
+  return (
+    <div className="flex flex-col">
+      <div>
+        <Search autoFocus value={query} onSearch={onSearch} searchOnChange />
+      </div>
+      <div className="flex-1 overflow-auto scroll-thin">
+        {filteredList.map((v, idx) => (
+          <div key={idx} className="flex gap-x-1 text-xs items-center">
+            <Checkbox
+              checked={selected.has(v.id ?? v)}
+              onChange={(b) => {
+                const set = new Set(Array.from(selected.values()));
+                b ? set.add(v.id ?? v) : set.delete(v.id ?? v);
+                setSelected(set);
+              }}
+              label={<span className="truncate">{v.label ?? v}</span>}
+            />
+          </div>
+        ))}
+        {filteredList.length === 0 && (
+          <span className="text-muted text-xs">No items found</span>
+        )}
+      </div>
+      <div className="flex justify-end">
+        <DropdownDismiss>
+          <Button size="xs" onClick={() => onFilter?.(Array.from(selected))}>
+            Apply
+          </Button>
+        </DropdownDismiss>
+      </div>
+    </div>
+  );
+};
+
+export const ColumnFilters = ({
+  type,
+  list,
+  filter,
+  onFilter,
+}: FilterProps) => {
+  return (
+    <div className="flex flex-col min-w-[16rem]">
+      {list && <ListFilter list={list} filter={filter} onFilter={onFilter} />}
+      {!list && type === "string" && (
+        <Input
+          autoFocus
+          allowClear
+          value={filter}
+          onEnterPressed={(e: AnyObject) => onFilter(e.target.value ?? "")}
+        />
+      )}
+    </div>
+  );
+};