@multiplatform.one/backoffice 7.28.0 → 7.29.0

package/dist/cjs/report/report-grid.cjs

@@ -22,431 +22,7 @@ var __toCommonJS = mod => __copyProps(__defProp({}, "__esModule", {
 }), mod);
 var report_grid_exports = {};
 __export(report_grid_exports, {
-  ReportGrid: () => ReportGrid
+  ReportGrid: () => import_frappe_ui.ReportGrid
 });
 module.exports = __toCommonJS(report_grid_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_i18n = require("../i18n/index.cjs");
-var import_frappe_ui = require("@multiplatform.one/frappe-ui");
-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_frappe_ui.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)(import_i18n.BACKOFFICE_I18N_NAMESPACE);
-  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, {
-                ...getRowPressProps(gridRow.row, pressCursor),
-                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);
-          })]
-        })
-      })]
-    })
-  });
-}
+var import_frappe_ui = require("@multiplatform.one/frappe-ui");