@multiplatform.one/frappe-ui 7.28.1 → 7.29.0

package/dist/cjs/report/ReportGrid.cjs

@@ -0,0 +1,453 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all) __defProp(target, name, {
+    get: all[name],
+    enumerable: true
+  });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from)) if (!__hasOwnProp.call(to, key) && key !== except) __defProp(to, key, {
+      get: () => from[key],
+      enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable
+    });
+  }
+  return to;
+};
+var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
+  value: true
+}), mod);
+var ReportGrid_exports = {};
+__export(ReportGrid_exports, {
+  ReportGrid: () => ReportGrid
+});
+module.exports = __toCommonJS(ReportGrid_exports);
+var import_components = require("@multiplatform.one/components");
+var import_forms = require("@multiplatform.one/forms");
+var import_table = require("@multiplatform.one/table");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("@phosphor-icons/react");
+var import_react2 = require("react");
+var import_react_i18next = require("react-i18next");
+var import_listFormat = require("../list/listFormat.cjs");
+var import_reportViewModel = require("./reportViewModel.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const ROW_NUMBER_WIDTH = 56;
+const INTERACTIVE_SELECTOR = ["a[href]", "button", "input", "select", "textarea", "label", '[contenteditable="true"]', '[role="button"]', '[role="checkbox"]', '[role="combobox"]', '[role="link"]', '[role="menuitem"]', '[role="option"]', '[role="radio"]', '[role="slider"]', '[role="spinbutton"]', '[role="switch"]', '[role="textbox"]', "[aria-expanded]"].join(", ");
+function isInteractiveInnerTarget(target, boundary) {
+  if (typeof Element === "undefined") return false;
+  if (!(target instanceof Element)) return false;
+  const boundaryEl = boundary instanceof Element ? boundary : null;
+  let node = target;
+  while (node && node !== boundaryEl) {
+    if (node.matches(INTERACTIVE_SELECTOR)) return true;
+    const tabIndex = node.getAttribute("tabindex");
+    if (tabIndex != null && Number(tabIndex) >= 0) return true;
+    node = node.parentElement;
+  }
+  return false;
+}
+function alignToJustify(align) {
+  return align === "right" ? "flex-end" : align === "center" ? "center" : "flex-start";
+}
+function formatNumericCell(value, fieldtype) {
+  switch (fieldtype) {
+    case "Currency":
+      return (0, import_theme.formatCurrency)(value);
+    case "Int":
+      return (0, import_theme.formatNumber)(Math.round(value), {
+        maximumFractionDigits: 0
+      });
+    case "Percent":
+      return (0, import_theme.formatPercent)(value, {
+        precision: 1
+      });
+    default:
+      return (0, import_theme.formatNumber)(value);
+  }
+}
+function ReportCellValue({
+  column,
+  row,
+  onOpenLink
+}) {
+  const raw = row[column.fieldname];
+  if (raw === null || raw === void 0 || raw === "") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$3",
+      color: "$color8",
+      children: "\u2014"
+    });
+  }
+  if (column.fieldtype === "Check") {
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$3",
+      color: raw ? "$green11" : "$color8",
+      children: raw ? "\u2713" : "\u2014"
+    });
+  }
+  if (import_reportViewModel.REPORT_NUMERIC_FIELDTYPES.has(column.fieldtype)) {
+    const numeric = Number(raw);
+    return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+      fontSize: "$3",
+      color: "$color12",
+      fontFamily: "$mono",
+      children: Number.isFinite(numeric) ? formatNumericCell(numeric, column.fieldtype) : String(raw)
+    });
+  }
+  const value = String(raw);
+  switch (column.fieldtype) {
+    case "Date":
+    case "Datetime":
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$3",
+        color: "$color11",
+        numberOfLines: 1,
+        children: (0, import_listFormat.formatDateCell)(value)
+      });
+    case "Link":
+      {
+        const target = column.options;
+        if (target && onOpenLink) {
+          return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+            fontSize: "$3",
+            color: "$color11",
+            textDecorationLine: "underline",
+            cursor: "pointer",
+            numberOfLines: 1,
+            role: "link",
+            onPress: event => {
+              event?.stopPropagation?.();
+              onOpenLink(target, value);
+            },
+            children: value
+          });
+        }
+        return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+          fontSize: "$3",
+          color: "$color11",
+          numberOfLines: 1,
+          children: value
+        });
+      }
+    default:
+      return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+        fontSize: "$3",
+        color: "$color11",
+        numberOfLines: 1,
+        children: value
+      });
+  }
+}
+function ReportGrid({
+  columns,
+  rows,
+  sort,
+  onSortChange,
+  columnFilters,
+  onColumnFilterChange,
+  onOpenRow,
+  onOpenLink,
+  totals,
+  groupByColumn
+}) {
+  const {
+    t
+  } = (0, import_react_i18next.useTranslation)();
+  const handleSortPress = (0, import_react2.useCallback)(fieldname => {
+    if (sort.field === fieldname) {
+      onSortChange({
+        field: fieldname,
+        order: sort.order === "asc" ? "desc" : "asc"
+      });
+    } else {
+      onSortChange({
+        field: fieldname,
+        order: "asc"
+      });
+    }
+  }, [sort, onSortChange]);
+  const isSSR = typeof window === "undefined";
+  const [rowAnchor, setRowAnchor] = (0, import_react2.useState)(0);
+  const dataRowCount = rows.reduce((count, row) => row.kind === "row" ? count + 1 : count, 0);
+  const effectiveRowAnchor = Math.min(rowAnchor, Math.max(dataRowCount - 1, 0));
+  const getRowPressProps = (0, import_react2.useCallback)((row, pressIndex) => {
+    const handlePress = event => {
+      if (event?.defaultPrevented) return;
+      const targetEl = event?.target ?? event?.nativeEvent?.target;
+      if (import_components.isWeb && typeof Element !== "undefined" && targetEl instanceof Element) {
+        const boundary = targetEl.closest('[data-report-row="true"]');
+        if (isInteractiveInnerTarget(targetEl, boundary)) return;
+      }
+      onOpenRow?.(row.name);
+    };
+    return {
+      // Accessible row name from doc identity (DG-A11Y-06); positional
+      // fallback for the defensive empty-name case.
+      "aria-label": row.name || t("report.rowLabel", {
+        defaultValue: "Row {{row}}",
+        row: pressIndex + 1
+      }),
+      onPress: handlePress,
+      cursor: "pointer",
+      hoverStyle: {
+        backgroundColor: "$color2"
+      },
+      pressStyle: {
+        backgroundColor: "$color4"
+      },
+      ...(import_components.isWeb && !isSSR ? {
+        tabIndex: pressIndex === effectiveRowAnchor ? 0 : -1,
+        outlineWidth: 0,
+        focusStyle: {
+          outlineWidth: 0
+        },
+        focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+          outlineOffset: -2
+        }),
+        "data-report-row": "true",
+        onFocus: event => {
+          if (event.target === event.currentTarget) setRowAnchor(pressIndex);
+        },
+        onBlur: event => {
+          const next = event.relatedTarget;
+          if (!(next instanceof Element) || !next.closest('[data-report-row="true"]')) {
+            setRowAnchor(0);
+          }
+        },
+        onKeyDown: event => {
+          if (event.defaultPrevented) return;
+          if (event.target !== event.currentTarget) return;
+          const key = event.key;
+          if (key === "Enter" || key === " " || key === "Spacebar") {
+            event.preventDefault();
+            event.stopPropagation();
+            if (event.repeat) return;
+            onOpenRow?.(row.name);
+            return;
+          }
+          if (key === "ArrowDown" || key === "ArrowUp" || key === "Home" || key === "End") {
+            event.preventDefault();
+            event.stopPropagation();
+            const rowEl = event.currentTarget;
+            const scope = rowEl.closest('[data-report-grid="true"]') ?? rowEl.ownerDocument;
+            const pressRows = Array.from(scope.querySelectorAll('[data-report-row="true"]'));
+            const currentIdx = pressRows.indexOf(rowEl);
+            if (currentIdx < 0) return;
+            const nextIdx = key === "Home" ? 0 : key === "End" ? pressRows.length - 1 : Math.min(Math.max(currentIdx + (key === "ArrowDown" ? 1 : -1), 0), pressRows.length - 1);
+            pressRows[nextIdx]?.focus();
+          }
+        }
+      } : {})
+    };
+  }, [onOpenRow, effectiveRowAnchor, isSSR, t]);
+  const totalsByField = new Map(totals.map(total => [total.fieldname, total]));
+  const gridWidth = ROW_NUMBER_WIDTH + columns.reduce((sum, column) => sum + column.width, 0);
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.ScrollView, {
+    horizontal: true,
+    showsHorizontalScrollIndicator: true,
+    flexGrow: 0,
+    flexShrink: 1,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table.Table, {
+      minWidth: gridWidth,
+      width: gridWidth,
+      displayMode: "flex",
+      cellHeight: "$3",
+      ...{
+        "data-report-grid": "true"
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table.Table.Head, {
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table.Table.Row, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.HeaderCell, {
+            cellWidth: ROW_NUMBER_WIDTH,
+            "aria-label": t("report.rowNumber", "Row number"),
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              fontSize: "$2",
+              color: "$color9",
+              children: "#"
+            })
+          }), columns.map(column => {
+            const sorted = sort.field === column.fieldname ? sort.order : void 0;
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.HeaderCell, {
+              cellWidth: column.width,
+              justifyContent: alignToJustify(column.align),
+              "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : "none",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Tooltip, {
+                content: sorted === "asc" ? t("report.sortDesc", "Sorted ascending (press to sort descending)") : sorted === "desc" ? t("report.sortAsc", "Sorted descending (press to sort ascending)") : t("report.sortColumn", "Sort by this column"),
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_components.XStack, {
+                  gap: "$1.5",
+                  alignItems: "center",
+                  cursor: "pointer",
+                  role: "button",
+                  tabIndex: 0,
+                  outlineWidth: 0,
+                  focusStyle: {
+                    outlineWidth: 0
+                  },
+                  focusVisibleStyle: (0, import_theme.ensureFocusVisibleRing)({
+                    outlineOffset: -2
+                  }),
+                  "aria-label": t("report.sortBy", {
+                    defaultValue: "Sort by {{column}}",
+                    column: column.label
+                  }),
+                  onPress: () => handleSortPress(column.fieldname),
+                  onKeyDown: event => {
+                    if (event.key === "Enter" || event.key === " ") {
+                      event.preventDefault?.();
+                      handleSortPress(column.fieldname);
+                    }
+                  },
+                  hoverStyle: {
+                    opacity: 0.8
+                  },
+                  children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+                    fontSize: "$3",
+                    fontWeight: "400",
+                    numberOfLines: 1,
+                    children: column.label
+                  }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.View, {
+                    "aria-hidden": true,
+                    role: "presentation",
+                    children: sorted ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretDownIcon, {
+                      size: 12,
+                      color: "var(--color10)",
+                      style: sorted === "desc" ? {
+                        transform: "rotate(180deg)"
+                      } : void 0
+                    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_react.CaretUpDownIcon, {
+                      size: 12,
+                      color: "var(--color8)"
+                    })
+                  })]
+                })
+              })
+            }, column.fieldname);
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table.Table.Row, {
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.HeaderCell, {
+            cellWidth: ROW_NUMBER_WIDTH,
+            paddingVertical: "$1.5"
+          }), columns.map(column => {
+            const placeholder = column.kind === "number" || column.kind === "date" ? t("report.filterComparablePlaceholder", "= > <\u2026") : column.kind === "check" ? t("report.filterCheckPlaceholder", "yes / no") : t("report.filterPlaceholder", "Filter\u2026");
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.HeaderCell, {
+              cellWidth: column.width,
+              paddingVertical: "$1.5",
+              overflow: "visible",
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.View, {
+                flex: 1,
+                minWidth: 0,
+                overflow: "visible",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_forms.Input, {
+                  size: "$2",
+                  compact: true,
+                  value: columnFilters[column.fieldname] ?? "",
+                  onChangeText: next => onColumnFilterChange(column.fieldname, next),
+                  placeholder,
+                  inputProps: {
+                    "aria-label": t("report.filterColumn", {
+                      defaultValue: "Filter {{column}}",
+                      column: column.label
+                    })
+                  }
+                })
+              })
+            }, column.fieldname);
+          })]
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.Body, {
+        children: (() => {
+          let pressCursor = -1;
+          return rows.map(gridRow => {
+            if (gridRow.kind === "group") {
+              const label = gridRow.value === null || gridRow.value === void 0 || gridRow.value === "" ? t("report.groupEmpty", "(blank)") : String(gridRow.value);
+              return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.Row, {
+                backgroundColor: "$color2",
+                children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.Cell, {
+                  cellWidth: gridWidth,
+                  paddingVertical: "$1.5",
+                  role: "rowheader",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+                    fontSize: "$2",
+                    fontWeight: "400",
+                    color: "$color11",
+                    numberOfLines: 1,
+                    children: groupByColumn ? t("report.groupHeader", {
+                      defaultValue: "{{field}}: {{value}} \xB7 {{count}}",
+                      field: groupByColumn.label,
+                      value: label,
+                      count: gridRow.count
+                    }) : label
+                  })
+                })
+              }, gridRow.key);
+            }
+            pressCursor += 1;
+            return (
+              // Spread LAST so the roving tabIndex/handlers stay in
+              // charge of this row's interactivity (DataTable precedent).
+              /* @__PURE__ */
+              (0, import_jsx_runtime.jsxs)(import_table.Table.Row, {
+                ...(onOpenRow ? getRowPressProps(gridRow.row, pressCursor) : {
+                  "aria-label": gridRow.row.name
+                }),
+                children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.Cell, {
+                  cellWidth: ROW_NUMBER_WIDTH,
+                  paddingVertical: "$2",
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+                    fontSize: "$2",
+                    color: "$color9",
+                    fontFamily: "$mono",
+                    children: gridRow.index
+                  })
+                }), columns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.Cell, {
+                  cellWidth: column.width,
+                  paddingVertical: "$2",
+                  justifyContent: alignToJustify(column.align),
+                  children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(ReportCellValue, {
+                    column,
+                    row: gridRow.row,
+                    onOpenLink
+                  })
+                }, column.fieldname))]
+              }, gridRow.key)
+            );
+          });
+        })()
+      }), totals.length > 0 && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.Foot, {
+        borderTopWidth: 1,
+        borderTopColor: "$color6",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_table.Table.Row, {
+          backgroundColor: "$color2",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.Cell, {
+            cellWidth: ROW_NUMBER_WIDTH,
+            paddingVertical: "$2",
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+              fontSize: "$2",
+              fontWeight: "400",
+              color: "$color10",
+              children: t("report.totals", "Totals")
+            })
+          }), columns.map(column => {
+            const total = totalsByField.get(column.fieldname);
+            return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_table.Table.Cell, {
+              cellWidth: column.width,
+              paddingVertical: "$2",
+              justifyContent: alignToJustify(column.align),
+              children: total ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_components.Text, {
+                fontSize: "$3",
+                fontWeight: "400",
+                color: "$color12",
+                fontFamily: "$mono",
+                children: formatNumericCell(total.value, total.fieldtype)
+              }) : null
+            }, column.fieldname);
+          })]
+        })
+      })]
+    })
+  });
+}