@react-fabric/data 1.0.0-beta.5 → 1.0.0-beta.51

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@react-fabric/data",
-  "version": "1.0.0-beta.5",
+  "version": "1.0.0-beta.51",
   "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,23 +35,24 @@
     "watch": "npm-run-all -p watch:rollup watch:dts"
   },
   "dependencies": {
-    "@react-fabric/core": "^1.0.0-beta.5",
-    "@react-fabric/form": "^1.0.0-beta.5",
-    "@react-fabric/utilities": "^1.0.0-beta.5",
-    "@tanstack/react-virtual": "^3.8.6",
+    "@react-fabric/core": "^1.0.0-beta.51",
+    "@react-fabric/date": "^1.0.0-beta.51",
+    "@react-fabric/form": "^1.0.0-beta.51",
+    "@react-fabric/utilities": "^1.0.0-beta.50",
+    "@tanstack/react-virtual": "^3.13.9",
     "classnames": "^2.5.1",
     "color": "^4.2.3",
     "memoize-one": "^6.0.0"
   },
   "peerDependencies": {
-    "i18next": "^23.15.1",
-    "react": ">=18.0.0 <20.0.0",
-    "react-dom": ">=18.0.0 <20.0.0",
-    "react-i18next": "^15.0.2"
+    "i18next": "^25.2.1",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-i18next": "^15.5.2"
   },
   "engines": {
     "node": ">=18.12.0",
     "npm": ">=8.19.0"
   },
-  "gitHead": "7d4a7ed1ea9890652826bef58d01c31280d761c8"
+  "gitHead": "a1b04de4663045f82992bff2aef8db26608eac74"
 }

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,17 +22,17 @@
  */
 
 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 (
-    <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}

package/src/table/BodyCell.tsx

@@ -21,6 +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 { DateDisplay } from "@react-fabric/date";
+import { Format, getByPath, isTrue } from "@react-fabric/utilities";
 import classNames from "classnames";
 import { useMemo } from "react";
 import { useTableContext } from "./Context";
@@ -28,15 +30,17 @@ import {
   COL_DEFAULT_WIDTH,
   COL_MAX_WIDTH,
   COL_MIN_WIDTH,
-  type ColumnType,
+  type TableColumn,
 } from "./types";
 
 export const BodyCell = ({
   column,
   item,
+  index,
 }: {
-  column: ColumnType;
+  column: TableColumn;
   item: KeyValue;
+  index: number;
 }) => {
   const { widths } = useTableContext();
 
@@ -45,9 +49,32 @@ export const BodyCell = ({
     [widths, column],
   );
 
+  const content = useMemo(() => {
+    const value = getByPath(item, column.id.toString());
+    if (column.renderer != null) {
+      return column.renderer(value, item, index);
+    }
+    if (column.dataType === "boolean") {
+      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) {
+        return column.valueMap[value];
+      }
+    }
+    if (["date", "time", "datetime"].includes(column.dataType ?? "")) {
+      return <DateDisplay date={value} format={column.format} />;
+    }
+    if (column.dataType === "number") {
+      return Format.number(value, column.format);
+    }
+    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,
@@ -56,12 +83,14 @@ 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",
         )}
       >
-        {column.renderer?.(item[column.id], item) ?? item[column.id]}
+        {content}
       </div>
     </div>
   );