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

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],
   );
@@ -356,7 +356,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,13 +22,13 @@
  */
 
 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 (

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(item[column.id], 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"
       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>
   );

package/src/table/BodyRow.tsx

@@ -0,0 +1,143 @@
+/*
+ * 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 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,
+  index,
+  data,
+  keyProperty,
+  measureElement,
+  state,
+  hideableColumns,
+  wrapperStart,
+  wrapperEnd,
+  onRowClick,
+  checkableRows,
+  checked,
+  toggleChecked,
+  canExpand,
+  expanded,
+  toggleExpand,
+  expandRow,
+}: {
+  rowKey: Key;
+  index: number;
+  data: KeyValue;
+  keyProperty?: Key;
+  measureElement: AnyObject;
+  state: KeyValue<TableColumn[]>;
+  hideableColumns?: boolean;
+  wrapperStart: string;
+  wrapperEnd: string;
+  checkableRows?: boolean;
+  checked: 0 | 1;
+  onRowClick?: AnyObject;
+  canExpand?: AnyObject;
+  expandRow?: AnyObject;
+  expanded: boolean;
+  toggleExpand: (key: Key) => void;
+  toggleChecked: (key: Key) => void;
+}) => {
+  return (
+    <div
+      ref={measureElement}
+      data-index={index}
+      className={index % 2 ? "bg-even" : "bg-odd"}
+    >
+      <div
+        role="none"
+        data-row={index}
+        className={classNames(
+          "flex flex-nowrap datatable-row data-[hilight]:outline-1 -outline-offset-1 outline-primary-500",
+          onRowClick && "hover:bg-primary-50 active:bg-primary-100",
+          index % 2 ? "bg-even" : "bg-odd",
+        )}
+        onClick={() =>
+          checkableRows && keyProperty && !onRowClick
+            ? toggleChecked(data[keyProperty])
+            : onRowClick?.(data)
+        }
+      >
+        <div className={wrapperStart}>
+          {!!canExpand && (
+            <div
+              className={classNames(
+                "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}
+                onClick={(e) => [
+                  keyProperty && toggleExpand(data[keyProperty]),
+                  e.stopPropagation(),
+                ]}
+              />
+            </div>
+          )}
+          {checkableRows && keyProperty && (
+            <CheckboxCell
+              onClick={() => toggleChecked(data[keyProperty])}
+              state={checked}
+            />
+          )}
+          {state.start?.map((col, ids) => (
+            <BodyCell
+              key={`${String(rowKey)}:${ids}`}
+              column={col}
+              item={data}
+              index={ids}
+            />
+          ))}
+        </div>
+        {state.cols?.map((col, idc) => (
+          <BodyCell
+            key={`${String(rowKey)}:${idc}`}
+            column={col}
+            item={data}
+            index={idc}
+          />
+        ))}
+        <div className={wrapperEnd}>
+          {state.end?.map((col, ide) => (
+            <BodyCell
+              key={`${String(rowKey)}:${ide}`}
+              column={col}
+              item={data}
+              index={ide}
+            />
+          ))}
+          {hideableColumns && <div className="w-6" />}
+        </div>
+      </div>
+      {expanded && expandRow(data)}
+    </div>
+  );
+};

package/src/table/CheckboxCell.tsx

@@ -31,7 +31,7 @@ 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

package/src/table/EmptyCell.tsx

@@ -27,7 +27,7 @@ import {
   COL_DEFAULT_WIDTH,
   COL_MAX_WIDTH,
   COL_MIN_WIDTH,
-  type ColumnType,
+  type TableColumn,
 } from "./types";
 
 export const EmptyCell = ({
@@ -35,7 +35,7 @@ export const EmptyCell = ({
   width: _width,
   maxWidth,
   minWidth,
-}: ColumnType) => {
+}: TableColumn) => {
   const { widths } = useTableContext();
 
   const width = useMemo(

package/src/table/HeaderCell.tsx

@@ -23,6 +23,7 @@
 
 import {
   CoreIcons,
+  Divider,
   DropdownTool,
   Icon,
   Menu,
@@ -35,7 +36,7 @@ import {
   COL_DEFAULT_WIDTH,
   COL_MAX_WIDTH,
   COL_MIN_WIDTH,
-  type ColumnType,
+  type TableColumn,
   type TableProps,
 } from "./types";
 
@@ -48,6 +49,7 @@ export const HeaderCell = ({
   rtlFlip,
   actions,
   locked,
+  tooltip,
   sortable,
   resizable,
   width: _width,
@@ -55,7 +57,7 @@ export const HeaderCell = ({
   minWidth,
   sort,
   onSort,
-}: ColumnType & Pick<TableProps, "sort" | "onSort">) => {
+}: TableColumn & Pick<TableProps, "sort" | "onSort">) => {
   const { startResize, widths } = useTableContext();
 
   const width = useMemo(
@@ -63,13 +65,17 @@ export const HeaderCell = ({
     [widths, _width, id],
   );
 
-  const handleSort = useCallback(() => {
-    sortable &&
-      onSort?.({
-        id: id.toString(),
-        order: sort?.id === id && sort.order === "asc" ? "desc" : "asc",
-      });
-  }, [onSort, name, sort, sortable]);
+  const handleSort = useCallback(
+    (order?: "asc" | "desc") => {
+      sortable &&
+        onSort?.({
+          id: id.toString(),
+          order:
+            order ?? (sort?.id === id && sort.order === "asc" ? "desc" : "asc"),
+        });
+    },
+    [onSort, sort, sortable],
+  );
 
   const menus = useMemo(() => {
     const ret = [];
@@ -79,30 +85,38 @@ export const HeaderCell = ({
           key="sort-asc"
           label="Sort ascending"
           icon={CoreIcons.sortAsc}
+          onClick={() => handleSort("asc")}
         />,
         <MenuItem
           key="sort-desc"
           label="Sort descending"
           icon={CoreIcons.sortDesc}
+          onClick={() => handleSort("desc")}
         />,
       );
     }
+    if (sortable && actions) {
+      ret.push(<Divider />);
+    }
+    if (actions) {
+      ret.push(...actions);
+    }
     return ret;
-  }, [sortable]);
+  }, [sortable, actions]);
 
   return (
     <div
       role="none"
       data-id={id}
-      onClick={handleSort}
-      className="group font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
+      onClick={() => handleSort()}
+      className="group/tool font-medium border-e flex flex-nowrap text-start items-center table-header-cell"
       style={{
         width: width ?? COL_DEFAULT_WIDTH,
         minWidth: minWidth ?? COL_MIN_WIDTH,
         maxWidth: maxWidth ?? COL_MAX_WIDTH,
       }}
     >
-      <Tooltip content={label} disabled={!label}>
+      <Tooltip content={tooltip ?? label} disabled={!(tooltip ?? label)}>
         <div className="flex-initial px-2 py-1 text-sm truncate sticky start-0">
           {icon && (
             <Icon icon={icon} bg={iconBg} color={iconColor} rtlFlip={rtlFlip} />