@multiplatform.one/components 7.11.0 → 7.15.0

package/dist/esm/views/Matrix.native.js

@@ -0,0 +1,573 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { componentColors, sectionHeading } from "../componentColors.native.js";
+import { AsyncBoundary } from "../layouts/AsyncBoundary.native.js";
+import { Skeleton } from "../Skeleton/index.native.js";
+import { ViewSwitcher } from "../layouts/ViewSwitcher.native.js";
+import { withInterp } from "../shared/t.native.js";
+import { Intent, MIN_PRESS_TARGET, ensureKeyboardModalityTracking, formatNumber, hairline, hairlineWidth, keyboardFocusRingProps, useReadableTextOn, useResolvedKnobs, wasKeyboardFocus } from "@multiplatform.one/theme";
+import React, { useCallback, useMemo, useRef, useState } from "react";
+import { useTranslation } from "../shared/i18n.native.js";
+import { ScrollView as RNScrollView } from "react-native";
+import { ScrollView, Text, XStack, YStack, isWeb } from "tamagui";
+import { formatRangeLabel } from "./ganttMath.native.js";
+import { alignMatrixRange, matrixCellIntensity, matrixCellKey, computeMatrixRange, generateBuckets, matrixMaxValue, summarizeMatrixCells } from "./matrixMath.native.js";
+var CanvasScroller = isWeb ? ScrollView : RNScrollView;
+var hairlineEnd = isWeb ? {
+  borderInlineEndWidth: hairlineWidth,
+  borderInlineEndStyle: "solid",
+  className: "mp-hairline-ie"
+} : {
+  borderEndWidth: hairlineWidth
+};
+var FILL_FLOOR = 0.14;
+var ON_FILL_INK_FROM = 0.55;
+var LEGEND_STEPS = [0, 0.25, 0.5, 0.75, 1];
+function CellIntentWrap(param) {
+  var {
+    intent,
+    children
+  } = param;
+  if (!intent || intent === "accent") return /* @__PURE__ */_jsx(_Fragment, {
+    children
+  });
+  return /* @__PURE__ */_jsx(Intent, {
+    name: intent,
+    children
+  });
+}
+function resolveFill(color, intent) {
+  return color !== null && color !== void 0 ? color : intent && intent !== "accent" ? "$color9" : "$accentBackground";
+}
+function fillOpacity(intensity) {
+  return FILL_FLOOR + (1 - FILL_FLOOR) * intensity;
+}
+function MatrixCellBox(param) {
+  var {
+    row,
+    bucket,
+    summary,
+    intensity,
+    fill,
+    text,
+    name,
+    width,
+    height,
+    lastColumn,
+    onPress
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var readable = useReadableTextOn(fill);
+  var [keyboardRing, setKeyboardRing] = useState(false);
+  var empty = summary === void 0;
+  var state = summary === void 0 ? "empty" : summary.value === 0 ? "zero" : "value";
+  var ink = !empty && intensity >= ON_FILL_INK_FROM && readable ? readable : "$color";
+  var pressable = onPress !== void 0;
+  return /* @__PURE__ */_jsxs(YStack, {
+    width,
+    height,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+    ...(lastColumn ? null : hairlineEnd),
+    borderColor: componentColors.divider,
+    cursor: pressable ? "pointer" : void 0,
+    hoverStyle: pressable ? {
+      backgroundColor: componentColors.interactive.hover
+    } : void 0,
+    pressStyle: pressable ? {
+      opacity: 0.8
+    } : void 0,
+    role: pressable ? "button" : void 0,
+    tabIndex: pressable ? 0 : void 0,
+    "aria-label": name,
+    // LC-71: one ring on the cell (the perceived control), keyboard-only.
+    ...(keyboardRing ? keyboardFocusRingProps : {
+      outlineWidth: 0
+    }),
+    onFocus: pressable ? function () {
+      return setKeyboardRing(wasKeyboardFocus());
+    } : void 0,
+    onBlur: pressable ? function () {
+      return setKeyboardRing(false);
+    } : void 0,
+    onPress,
+    onKeyDown: pressable ? function (ke) {
+      var _ke_preventDefault;
+      if (ke.key !== "Enter" && ke.key !== " ") return;
+      (_ke_preventDefault = ke.preventDefault) === null || _ke_preventDefault === void 0 ? void 0 : _ke_preventDefault.call(ke);
+      onPress();
+    } : void 0,
+    "data-matrix-cell": `${row.id}:${bucket.key}`,
+    "data-matrix-cell-state": state,
+    ...((summary === null || summary === void 0 ? void 0 : summary.intent) ? {
+      "data-matrix-cell-intent": summary.intent
+    } : null),
+    children: [!empty && /* @__PURE__ */_jsx(YStack, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: fill,
+      opacity: fillOpacity(intensity),
+      pointerEvents: "none",
+      "data-matrix-fill": String(intensity)
+    }), /* @__PURE__ */_jsx(Text, {
+      ...knobProps.label,
+      color: empty ? componentColors.text.subtle : ink,
+      numberOfLines: 1,
+      pointerEvents: "none",
+      zIndex: 1,
+      "aria-hidden": true,
+      children: empty ? "\xB7" : text
+    })]
+  });
+}
+function LegendSwatch(param) {
+  var {
+    intensity,
+    fill,
+    empty
+  } = param;
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  return /* @__PURE__ */_jsx(YStack, {
+    width: 14,
+    height: 14,
+    ...knobProps.borderRadius,
+    position: "relative",
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: hairlineWidth,
+    borderColor: componentColors.surface.border,
+    "data-matrix-legend-swatch": empty ? "empty" : String(intensity !== null && intensity !== void 0 ? intensity : 1),
+    children: empty ? /* @__PURE__ */_jsx(Text, {
+      fontSize: 10,
+      lineHeight: 10,
+      color: componentColors.text.subtle,
+      "aria-hidden": true,
+      children: "\xB7"
+    }) : /* @__PURE__ */_jsx(YStack, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: fill !== null && fill !== void 0 ? fill : "$accentBackground",
+      opacity: fillOpacity(intensity !== null && intensity !== void 0 ? intensity : 1)
+    })
+  });
+}
+var SKELETON_ROWS = [96, 72, 112, 64, 88];
+function MatrixSkeleton(param) {
+  var {
+    labelWidth,
+    columnWidth,
+    rowHeight
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var edgePad = knobProps.panelPadding.padding;
+  var columns = [0, 1, 2, 3, 4, 5];
+  return /* @__PURE__ */_jsxs(YStack, {
+    width: "100%",
+    "aria-busy": true,
+    "aria-label": t("Loading"),
+    "data-matrix-skeleton": "true",
+    "data-async-skeleton": "matrix",
+    children: [/* @__PURE__ */_jsxs(XStack, {
+      height: rowHeight,
+      alignItems: "center",
+      ...hairline.bottom,
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */_jsx(XStack, {
+        width: labelWidth,
+        paddingHorizontal: edgePad,
+        children: /* @__PURE__ */_jsx(Skeleton, {
+          width: 64,
+          height: 12
+        })
+      }), columns.map(function (column) {
+        return /* @__PURE__ */_jsx(XStack, {
+          width: columnWidth,
+          justifyContent: "center",
+          children: /* @__PURE__ */_jsx(Skeleton, {
+            width: Math.max(24, columnWidth - 24),
+            height: 12
+          })
+        }, column);
+      })]
+    }), SKELETON_ROWS.map(function (labelSkeletonWidth, index) {
+      return /* @__PURE__ */_jsxs(XStack, {
+        height: rowHeight,
+        alignItems: "center",
+        ...(index < SKELETON_ROWS.length - 1 ? hairline.bottom : null),
+        borderColor: componentColors.divider,
+        children: [/* @__PURE__ */_jsx(XStack, {
+          width: labelWidth,
+          paddingHorizontal: edgePad,
+          children: /* @__PURE__ */_jsx(Skeleton, {
+            width: labelSkeletonWidth,
+            height: 12
+          })
+        }), columns.map(function (column) {
+          return /* @__PURE__ */_jsx(XStack, {
+            width: columnWidth,
+            justifyContent: "center",
+            children: (column + index) % 3 === 0 ? null : /* @__PURE__ */_jsx(Skeleton, {
+              variant: "rounded",
+              width: Math.max(16, columnWidth - 16),
+              height: Math.max(10, rowHeight - 20)
+            })
+          }, column);
+        })]
+      }, index);
+    })]
+  });
+}
+function MatrixView(param) {
+  var {
+    rows,
+    cells,
+    rule: initialRule = "month",
+    onRuleChange,
+    range: rangeProp,
+    firstDayOfWeek = 0,
+    onCellPress,
+    formatCell,
+    isLoading = false,
+    error = null,
+    onRetry,
+    emptyTitle,
+    emptyDescription,
+    height: heightProp,
+    labelWidth = 180,
+    columnWidth: columnWidthProp,
+    subjectLabel,
+    showRuleSwitcher = true,
+    showLegend = true,
+    legendItems,
+    ...stackProps
+  } = param;
+  var {
+    t
+  } = useTranslation();
+  var {
+    knobProps
+  } = useResolvedKnobs();
+  var [rule, setRule] = useState(initialRule);
+  if (typeof document !== "undefined") ensureKeyboardModalityTracking();
+  var sz = knobProps.sizeToken;
+  var height = heightProp !== null && heightProp !== void 0 ? heightProp : sz === "$3" ? 400 : sz === "$5" ? 560 : 480;
+  var rowHeight = Math.max(MIN_PRESS_TARGET, sz === "$3" ? 44 : sz === "$5" ? 56 : 48);
+  var columnWidth = Math.max(MIN_PRESS_TARGET, columnWidthProp !== null && columnWidthProp !== void 0 ? columnWidthProp : sz === "$3" ? 56 : sz === "$5" ? 72 : 64);
+  var axisHeight = sz === "$3" ? 40 : sz === "$5" ? 52 : 46;
+  var range = useMemo(function () {
+    return rangeProp ? alignMatrixRange(rangeProp, rule, firstDayOfWeek) : computeMatrixRange(cells.map(function (cell) {
+      return cell.date;
+    }), rule, firstDayOfWeek);
+  }, [rangeProp, cells, rule, firstDayOfWeek]);
+  var buckets = useMemo(function () {
+    return generateBuckets(range, rule, firstDayOfWeek);
+  }, [range, rule, firstDayOfWeek]);
+  var summaries = useMemo(function () {
+    return summarizeMatrixCells(cells, rule, firstDayOfWeek);
+  }, [cells, rule, firstDayOfWeek]);
+  var maxValue = useMemo(function () {
+    var rowIds = new Set(rows.map(function (row) {
+      return row.id;
+    }));
+    var bucketKeys = new Set(buckets.map(function (bucket) {
+      return bucket.key;
+    }));
+    return matrixMaxValue(Array.from(summaries.values()).filter(function (summary) {
+      return rowIds.has(summary.rowId) && bucketKeys.has(summary.bucketKey);
+    }));
+  }, [summaries, rows, buckets]);
+  var gridWidth = buckets.length * columnWidth;
+  var rangeLabel = useMemo(function () {
+    return formatRangeLabel(range);
+  }, [range]);
+  var changeRule = useCallback(function (next) {
+    setRule(next);
+    onRuleChange === null || onRuleChange === void 0 ? void 0 : onRuleChange(next);
+  }, [onRuleChange]);
+  var cellText = useCallback(function (summary) {
+    var _summary_value;
+    if (formatCell) return formatCell(summary);
+    if (summary.label !== void 0) return summary.label;
+    return formatNumber((_summary_value = summary.value) !== null && _summary_value !== void 0 ? _summary_value : summary.count);
+  }, [formatCell]);
+  var axisScrollRef = useRef(null);
+  var handleCanvasScroll = useCallback(function (event) {
+    var _ref;
+    var _event_nativeEvent_contentOffset, _event_nativeEvent, _axisScrollRef_current_scrollTo, _axisScrollRef_current;
+    var x = (_ref = event === null || event === void 0 ? void 0 : (_event_nativeEvent = event.nativeEvent) === null || _event_nativeEvent === void 0 ? void 0 : (_event_nativeEvent_contentOffset = _event_nativeEvent.contentOffset) === null || _event_nativeEvent_contentOffset === void 0 ? void 0 : _event_nativeEvent_contentOffset.x) !== null && _ref !== void 0 ? _ref : 0;
+    (_axisScrollRef_current = axisScrollRef.current) === null || _axisScrollRef_current === void 0 ? void 0 : (_axisScrollRef_current_scrollTo = _axisScrollRef_current.scrollTo) === null || _axisScrollRef_current_scrollTo === void 0 ? void 0 : _axisScrollRef_current_scrollTo.call(_axisScrollRef_current, {
+      x,
+      animated: false
+    });
+  }, []);
+  var scrollerDirection = {
+    direction: "ltr"
+  };
+  var showSkeleton = !error && isLoading && rows.length === 0;
+  return /* @__PURE__ */_jsx(AsyncBoundary, {
+    loading: showSkeleton ? /* @__PURE__ */_jsx(MatrixSkeleton, {
+      labelWidth,
+      columnWidth,
+      rowHeight
+    }) : false,
+    empty: !error && !isLoading && rows.length === 0,
+    error,
+    onRetry,
+    emptyTitle: emptyTitle !== null && emptyTitle !== void 0 ? emptyTitle : t("No subjects"),
+    emptyDescription,
+    ...stackProps,
+    children: /* @__PURE__ */_jsxs(YStack, {
+      height,
+      overflow: "hidden",
+      backgroundColor: "$background",
+      elevation: knobProps.elevation,
+      ...knobProps.containerRadius,
+      "data-matrix-view": rule,
+      "data-size": knobProps.size,
+      "data-density": knobProps.density,
+      children: [/* Header */
+      /* @__PURE__ */_jsxs(XStack, {
+        ...knobProps.panelPadding,
+        alignItems: "center",
+        justifyContent: "space-between",
+        ...knobProps.gap,
+        ...hairline.bottom,
+        borderColor: "$borderColor",
+        children: [/* @__PURE__ */_jsx(Text, {
+          ...knobProps.heading,
+          ...sectionHeading,
+          numberOfLines: 1,
+          children: rangeLabel
+        }), showRuleSwitcher && /* @__PURE__ */_jsx(ViewSwitcher, {
+          views: [{
+            type: "day",
+            label: t("Day")
+          }, {
+            type: "week",
+            label: t("Week")
+          }, {
+            type: "month",
+            label: t("Month")
+          }],
+          currentView: rule,
+          onViewChange: function onViewChange(val) {
+            return changeRule(val);
+          }
+        })]
+      }),
+      /* Pinned axis row: the subject header cell + the bucket header strip
+      stay put while rows scroll vertically. The strip follows the grid
+      scroller, so headers and cells can never drift apart. */
+      /* @__PURE__ */
+      _jsxs(XStack, {
+        ...hairline.bottom,
+        borderColor: "$borderColor",
+        "data-matrix-axis-row": "true",
+        children: [/* @__PURE__ */_jsx(XStack, {
+          width: labelWidth,
+          flexShrink: 0,
+          height: axisHeight,
+          alignItems: "center",
+          paddingHorizontal: knobProps.panelPadding.padding,
+          ...hairlineEnd,
+          borderColor: "$borderColor",
+          backgroundColor: componentColors.surface.background,
+          children: /* @__PURE__ */_jsx(Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            numberOfLines: 1,
+            children: subjectLabel !== null && subjectLabel !== void 0 ? subjectLabel : t("Subject")
+          })
+        }), /* @__PURE__ */_jsx(ScrollView, {
+          ref: axisScrollRef,
+          horizontal: true,
+          flex: 1,
+          scrollEnabled: false,
+          showsHorizontalScrollIndicator: false,
+          style: scrollerDirection,
+          children: /* @__PURE__ */_jsx(XStack, {
+            width: gridWidth,
+            height: axisHeight,
+            backgroundColor: componentColors.surface.background,
+            "data-matrix-axis": rule,
+            children: buckets.map(function (bucket, index) {
+              return /* @__PURE__ */_jsx(XStack, {
+                width: columnWidth,
+                height: axisHeight,
+                alignItems: "center",
+                justifyContent: "center",
+                ...(index === buckets.length - 1 ? null : hairlineEnd),
+                borderColor: componentColors.divider,
+                "aria-label": bucket.name,
+                "data-matrix-column": bucket.key,
+                children: /* @__PURE__ */_jsx(Text, {
+                  ...knobProps.label,
+                  color: knobProps.textAccentColor,
+                  numberOfLines: 1,
+                  children: bucket.label
+                })
+              }, bucket.key);
+            })
+          })
+        })]
+      }),
+      /* Body: subject labels + grid share one vertical scroller so rows stay
+      aligned; the grid owns its horizontal scroller (LC-10). */
+      /* @__PURE__ */
+      _jsx(ScrollView, {
+        flex: 1,
+        children: /* @__PURE__ */_jsxs(XStack, {
+          "data-matrix-scroll-body": "true",
+          children: [/* @__PURE__ */_jsx(YStack, {
+            width: labelWidth,
+            flexShrink: 0,
+            ...hairlineEnd,
+            borderColor: "$borderColor",
+            "data-matrix-labels": "true",
+            children: rows.map(function (row, index) {
+              return /* @__PURE__ */_jsx(XStack, {
+                height: rowHeight,
+                alignItems: "center",
+                paddingHorizontal: knobProps.panelPadding.padding,
+                ...(index === rows.length - 1 ? null : hairline.bottom),
+                borderColor: componentColors.divider,
+                "data-matrix-row-label": row.id,
+                children: /* @__PURE__ */_jsx(Text, {
+                  ...knobProps.body,
+                  numberOfLines: 1,
+                  color: "$color",
+                  children: row.label
+                })
+              }, row.id);
+            })
+          }), /* @__PURE__ */_jsx(CanvasScroller, {
+            horizontal: true,
+            ...(isWeb ? {
+              flex: 1
+            } : null),
+            showsHorizontalScrollIndicator: true,
+            onScroll: handleCanvasScroll,
+            scrollEventThrottle: 16,
+            style: isWeb ? scrollerDirection : [{
+              flex: 1
+            }, scrollerDirection],
+            children: /* @__PURE__ */_jsx(YStack, {
+              width: gridWidth,
+              "data-matrix-canvas": "true",
+              children: rows.map(function (row, rowIndex) {
+                return /* @__PURE__ */_jsx(XStack, {
+                  height: rowHeight,
+                  ...(rowIndex === rows.length - 1 ? null : hairline.bottom),
+                  borderColor: componentColors.divider,
+                  "data-matrix-row": row.id,
+                  children: buckets.map(function (bucket, columnIndex) {
+                    var summary = summaries.get(matrixCellKey(row.id, bucket.key));
+                    var intensity = summary ? matrixCellIntensity(summary, maxValue) : 0;
+                    var fill = resolveFill(summary === null || summary === void 0 ? void 0 : summary.color, summary === null || summary === void 0 ? void 0 : summary.intent);
+                    var text = summary ? cellText(summary) : t("No data");
+                    var name = withInterp(t("{{subject}}, {{bucket}}: {{value}}"), {
+                      subject: row.label,
+                      bucket: bucket.name,
+                      value: text
+                    });
+                    return /* @__PURE__ */_jsx(CellIntentWrap, {
+                      intent: (summary === null || summary === void 0 ? void 0 : summary.color) ? void 0 : summary === null || summary === void 0 ? void 0 : summary.intent,
+                      children: /* @__PURE__ */_jsx(MatrixCellBox, {
+                        row,
+                        bucket,
+                        summary,
+                        intensity,
+                        fill,
+                        text,
+                        name,
+                        width: columnWidth,
+                        height: rowHeight,
+                        lastColumn: columnIndex === buckets.length - 1,
+                        onPress: onCellPress ? function () {
+                          return onCellPress({
+                            row,
+                            bucket,
+                            summary
+                          });
+                        } : void 0
+                      })
+                    }, bucket.key);
+                  })
+                }, row.id);
+              })
+            })
+          })]
+        })
+      }), showLegend && /* @__PURE__ */_jsxs(XStack, {
+        ...knobProps.panelPadding,
+        alignItems: "center",
+        flexWrap: "wrap",
+        ...knobProps.gap,
+        ...hairline.top,
+        borderColor: "$borderColor",
+        "data-matrix-legend": "true",
+        children: [/* @__PURE__ */_jsxs(XStack, {
+          alignItems: "center",
+          gap: "$1.5",
+          children: [/* @__PURE__ */_jsx(LegendSwatch, {
+            empty: true
+          }), /* @__PURE__ */_jsx(Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("No data")
+          })]
+        }), /* @__PURE__ */_jsxs(XStack, {
+          alignItems: "center",
+          gap: "$1.5",
+          children: [/* @__PURE__ */_jsx(Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("Less")
+          }), LEGEND_STEPS.map(function (step) {
+            return /* @__PURE__ */_jsx(LegendSwatch, {
+              intensity: step
+            }, step);
+          }), /* @__PURE__ */_jsx(Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("More")
+          })]
+        }), legendItems === null || legendItems === void 0 ? void 0 : legendItems.map(function (item, index) {
+          return /* @__PURE__ */_jsx(CellIntentWrap, {
+            intent: item.color ? void 0 : item.intent,
+            children: /* @__PURE__ */_jsxs(XStack, {
+              alignItems: "center",
+              gap: "$1.5",
+              children: [/* @__PURE__ */_jsx(LegendSwatch, {
+                fill: resolveFill(item.color, item.intent)
+              }), /* @__PURE__ */_jsx(Text, {
+                ...knobProps.label,
+                color: knobProps.textAccentColor,
+                children: item.label
+              })]
+            })
+          }, `${item.label}-${index}`);
+        })]
+      })]
+    })
+  });
+}
+export { MatrixView };
+//# sourceMappingURL=Matrix.native.js.map