@multiplatform.one/components 7.11.0 → 7.16.0

package/dist/cjs/views/Matrix.cjs

@@ -0,0 +1,568 @@
+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 Matrix_exports = {};
+__export(Matrix_exports, {
+  MatrixView: () => MatrixView
+});
+module.exports = __toCommonJS(Matrix_exports);
+var import_componentColors = require("../componentColors.cjs");
+var import_AsyncBoundary = require("../layouts/AsyncBoundary.cjs");
+var import_Skeleton = require("../Skeleton/index.cjs");
+var import_ViewSwitcher = require("../layouts/ViewSwitcher.cjs");
+var import_t = require("../shared/t.cjs");
+var import_theme = require("@multiplatform.one/theme");
+var import_react = require("react");
+var import_i18n = require("../shared/i18n.cjs");
+var import_react_native = require("react-native-web");
+var import_tamagui = require("tamagui");
+var import_ganttMath = require("./ganttMath.cjs");
+var import_matrixMath = require("./matrixMath.cjs");
+var import_jsx_runtime = require("react/jsx-runtime");
+const CanvasScroller = import_tamagui.isWeb ? import_tamagui.ScrollView : import_react_native.ScrollView;
+const hairlineEnd = import_tamagui.isWeb ? {
+  borderInlineEndWidth: import_theme.hairlineWidth,
+  borderInlineEndStyle: "solid",
+  className: "mp-hairline-ie"
+} : {
+  borderEndWidth: import_theme.hairlineWidth
+};
+const FILL_FLOOR = 0.14;
+const ON_FILL_INK_FROM = 0.55;
+const LEGEND_STEPS = [0, 0.25, 0.5, 0.75, 1];
+function CellIntentWrap({
+  intent,
+  children
+}) {
+  if (!intent || intent === "accent") return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, {
+    children
+  });
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_theme.Intent, {
+    name: intent,
+    children
+  });
+}
+function resolveFill(color, intent) {
+  return color ?? (intent && intent !== "accent" ? "$color9" : "$accentBackground");
+}
+function fillOpacity(intensity) {
+  return FILL_FLOOR + (1 - FILL_FLOOR) * intensity;
+}
+function MatrixCellBox({
+  row,
+  bucket,
+  summary,
+  intensity,
+  fill,
+  text,
+  name,
+  width,
+  height,
+  lastColumn,
+  onPress
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const readable = (0, import_theme.useReadableTextOn)(fill);
+  const [keyboardRing, setKeyboardRing] = (0, import_react.useState)(false);
+  const empty = summary === void 0;
+  const state = summary === void 0 ? "empty" : summary.value === 0 ? "zero" : "value";
+  const ink = !empty && intensity >= ON_FILL_INK_FROM && readable ? readable : "$color";
+  const pressable = onPress !== void 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    width,
+    height,
+    alignItems: "center",
+    justifyContent: "center",
+    position: "relative",
+    overflow: "hidden",
+    ...(lastColumn ? null : hairlineEnd),
+    borderColor: import_componentColors.componentColors.divider,
+    cursor: pressable ? "pointer" : void 0,
+    hoverStyle: pressable ? {
+      backgroundColor: import_componentColors.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,
+    ...(keyboardRing ? import_theme.keyboardFocusRingProps : {
+      outlineWidth: 0
+    }),
+    onFocus: pressable ? () => setKeyboardRing((0, import_theme.wasKeyboardFocus)()) : void 0,
+    onBlur: pressable ? () => setKeyboardRing(false) : void 0,
+    onPress,
+    onKeyDown: pressable ? ke => {
+      if (ke.key !== "Enter" && ke.key !== " ") return;
+      ke.preventDefault?.();
+      onPress();
+    } : void 0,
+    ...{
+      "data-matrix-cell": `${row.id}:${bucket.key}`,
+      "data-matrix-cell-state": state,
+      ...(summary?.intent ? {
+        "data-matrix-cell-intent": summary.intent
+      } : null)
+    },
+    children: [!empty && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: fill,
+      opacity: fillOpacity(intensity),
+      pointerEvents: "none",
+      ...{
+        "data-matrix-fill": String(intensity)
+      }
+    }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      ...knobProps.label,
+      color: empty ? import_componentColors.componentColors.text.subtle : ink,
+      numberOfLines: 1,
+      pointerEvents: "none",
+      zIndex: 1,
+      "aria-hidden": true,
+      children: empty ? "\xB7" : text
+    })]
+  });
+}
+function LegendSwatch({
+  intensity,
+  fill,
+  empty
+}) {
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+    width: 14,
+    height: 14,
+    ...knobProps.borderRadius,
+    position: "relative",
+    overflow: "hidden",
+    alignItems: "center",
+    justifyContent: "center",
+    borderWidth: import_theme.hairlineWidth,
+    borderColor: import_componentColors.componentColors.surface.border,
+    ...{
+      "data-matrix-legend-swatch": empty ? "empty" : String(intensity ?? 1)
+    },
+    children: empty ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+      fontSize: 10,
+      lineHeight: 10,
+      color: import_componentColors.componentColors.text.subtle,
+      "aria-hidden": true,
+      children: "\xB7"
+    }) : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+      position: "absolute",
+      top: 0,
+      left: 0,
+      right: 0,
+      bottom: 0,
+      backgroundColor: fill ?? "$accentBackground",
+      opacity: fillOpacity(intensity ?? 1)
+    })
+  });
+}
+const SKELETON_ROWS = [96, 72, 112, 64, 88];
+function MatrixSkeleton({
+  labelWidth,
+  columnWidth,
+  rowHeight
+}) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const edgePad = knobProps.panelPadding.padding;
+  const columns = [0, 1, 2, 3, 4, 5];
+  return /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+    width: "100%",
+    "aria-busy": true,
+    "aria-label": t("Loading"),
+    ...{
+      "data-matrix-skeleton": "true",
+      "data-async-skeleton": "matrix"
+    },
+    children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      height: rowHeight,
+      alignItems: "center",
+      ...import_theme.hairline.bottom,
+      borderColor: "$borderColor",
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        width: labelWidth,
+        paddingHorizontal: edgePad,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          width: 64,
+          height: 12
+        })
+      }), columns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        width: columnWidth,
+        justifyContent: "center",
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          width: Math.max(24, columnWidth - 24),
+          height: 12
+        })
+      }, column))]
+    }), SKELETON_ROWS.map((labelSkeletonWidth, index) => /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+      height: rowHeight,
+      alignItems: "center",
+      ...(index < SKELETON_ROWS.length - 1 ? import_theme.hairline.bottom : null),
+      borderColor: import_componentColors.componentColors.divider,
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        width: labelWidth,
+        paddingHorizontal: edgePad,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          width: labelSkeletonWidth,
+          height: 12
+        })
+      }), columns.map(column => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+        width: columnWidth,
+        justifyContent: "center",
+        children: (column + index) % 3 === 0 ? null : /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_Skeleton.Skeleton, {
+          variant: "rounded",
+          width: Math.max(16, columnWidth - 16),
+          height: Math.max(10, rowHeight - 20)
+        })
+      }, column))]
+    }, index))]
+  });
+}
+function MatrixView({
+  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
+}) {
+  const {
+    t
+  } = (0, import_i18n.useTranslation)();
+  const {
+    knobProps
+  } = (0, import_theme.useResolvedKnobs)();
+  const [rule, setRule] = (0, import_react.useState)(initialRule);
+  if (typeof document !== "undefined") (0, import_theme.ensureKeyboardModalityTracking)();
+  const sz = knobProps.sizeToken;
+  const height = heightProp ?? (sz === "$3" ? 400 : sz === "$5" ? 560 : 480);
+  const rowHeight = Math.max(import_theme.MIN_PRESS_TARGET, sz === "$3" ? 44 : sz === "$5" ? 56 : 48);
+  const columnWidth = Math.max(import_theme.MIN_PRESS_TARGET, columnWidthProp ?? (sz === "$3" ? 56 : sz === "$5" ? 72 : 64));
+  const axisHeight = sz === "$3" ? 40 : sz === "$5" ? 52 : 46;
+  const range = (0, import_react.useMemo)(() => rangeProp ? (0, import_matrixMath.alignMatrixRange)(rangeProp, rule, firstDayOfWeek) : (0, import_matrixMath.computeMatrixRange)(cells.map(cell => cell.date), rule, firstDayOfWeek), [rangeProp, cells, rule, firstDayOfWeek]);
+  const buckets = (0, import_react.useMemo)(() => (0, import_matrixMath.generateBuckets)(range, rule, firstDayOfWeek), [range, rule, firstDayOfWeek]);
+  const summaries = (0, import_react.useMemo)(() => (0, import_matrixMath.summarizeMatrixCells)(cells, rule, firstDayOfWeek), [cells, rule, firstDayOfWeek]);
+  const maxValue = (0, import_react.useMemo)(() => {
+    const rowIds = new Set(rows.map(row => row.id));
+    const bucketKeys = new Set(buckets.map(bucket => bucket.key));
+    return (0, import_matrixMath.matrixMaxValue)(Array.from(summaries.values()).filter(summary => rowIds.has(summary.rowId) && bucketKeys.has(summary.bucketKey)));
+  }, [summaries, rows, buckets]);
+  const gridWidth = buckets.length * columnWidth;
+  const rangeLabel = (0, import_react.useMemo)(() => (0, import_ganttMath.formatRangeLabel)(range), [range]);
+  const changeRule = (0, import_react.useCallback)(next => {
+    setRule(next);
+    onRuleChange?.(next);
+  }, [onRuleChange]);
+  const cellText = (0, import_react.useCallback)(summary => {
+    if (formatCell) return formatCell(summary);
+    if (summary.label !== void 0) return summary.label;
+    return (0, import_theme.formatNumber)(summary.value ?? summary.count);
+  }, [formatCell]);
+  const axisScrollRef = (0, import_react.useRef)(null);
+  const handleCanvasScroll = (0, import_react.useCallback)(event => {
+    const x = event?.nativeEvent?.contentOffset?.x ?? 0;
+    axisScrollRef.current?.scrollTo?.({
+      x,
+      animated: false
+    });
+  }, []);
+  const scrollerDirection = {
+    direction: "ltr"
+  };
+  const showSkeleton = !error && isLoading && rows.length === 0;
+  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_AsyncBoundary.AsyncBoundary, {
+    loading: showSkeleton ? /* @__PURE__ */(0, import_jsx_runtime.jsx)(MatrixSkeleton, {
+      labelWidth,
+      columnWidth,
+      rowHeight
+    }) : false,
+    empty: !error && !isLoading && rows.length === 0,
+    error,
+    onRetry,
+    emptyTitle: emptyTitle ?? t("No subjects"),
+    emptyDescription,
+    ...stackProps,
+    children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.YStack, {
+      height,
+      overflow: "hidden",
+      backgroundColor: "$background",
+      elevation: knobProps.elevation,
+      ...knobProps.containerRadius,
+      ...{
+        "data-matrix-view": rule,
+        "data-size": knobProps.size,
+        "data-density": knobProps.density
+      },
+      children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...knobProps.panelPadding,
+        alignItems: "center",
+        justifyContent: "space-between",
+        ...knobProps.gap,
+        ...import_theme.hairline.bottom,
+        borderColor: "$borderColor",
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+          ...knobProps.heading,
+          ...import_componentColors.sectionHeading,
+          numberOfLines: 1,
+          children: rangeLabel
+        }), showRuleSwitcher && /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_ViewSwitcher.ViewSwitcher, {
+          views: [{
+            type: "day",
+            label: t("Day")
+          }, {
+            type: "week",
+            label: t("Week")
+          }, {
+            type: "month",
+            label: t("Month")
+          }],
+          currentView: rule,
+          onViewChange: val => changeRule(val)
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...import_theme.hairline.bottom,
+        borderColor: "$borderColor",
+        ...{
+          "data-matrix-axis-row": "true"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+          width: labelWidth,
+          flexShrink: 0,
+          height: axisHeight,
+          alignItems: "center",
+          paddingHorizontal: knobProps.panelPadding.padding,
+          ...hairlineEnd,
+          borderColor: "$borderColor",
+          ...{
+            backgroundColor: import_componentColors.componentColors.surface.background
+          },
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            numberOfLines: 1,
+            children: subjectLabel ?? t("Subject")
+          })
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+          ref: axisScrollRef,
+          horizontal: true,
+          flex: 1,
+          scrollEnabled: false,
+          showsHorizontalScrollIndicator: false,
+          style: scrollerDirection,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+            width: gridWidth,
+            height: axisHeight,
+            ...{
+              backgroundColor: import_componentColors.componentColors.surface.background,
+              "data-matrix-axis": rule
+            },
+            children: buckets.map((bucket, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+              width: columnWidth,
+              height: axisHeight,
+              alignItems: "center",
+              justifyContent: "center",
+              ...(index === buckets.length - 1 ? null : hairlineEnd),
+              borderColor: import_componentColors.componentColors.divider,
+              "aria-label": bucket.name,
+              ...{
+                "data-matrix-column": bucket.key
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                ...knobProps.label,
+                color: knobProps.textAccentColor,
+                numberOfLines: 1,
+                children: bucket.label
+              })
+            }, bucket.key))
+          })
+        })]
+      }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.ScrollView, {
+        flex: 1,
+        children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          ...{
+            "data-matrix-scroll-body": "true"
+          },
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+            width: labelWidth,
+            flexShrink: 0,
+            ...hairlineEnd,
+            borderColor: "$borderColor",
+            ...{
+              "data-matrix-labels": "true"
+            },
+            children: rows.map((row, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+              height: rowHeight,
+              alignItems: "center",
+              paddingHorizontal: knobProps.panelPadding.padding,
+              ...(index === rows.length - 1 ? null : import_theme.hairline.bottom),
+              borderColor: import_componentColors.componentColors.divider,
+              ...{
+                "data-matrix-row-label": row.id
+              },
+              children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+                ...knobProps.body,
+                numberOfLines: 1,
+                color: "$color",
+                children: row.label
+              })
+            }, row.id))
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(CanvasScroller, {
+            horizontal: true,
+            ...(import_tamagui.isWeb ? {
+              flex: 1
+            } : null),
+            showsHorizontalScrollIndicator: true,
+            onScroll: handleCanvasScroll,
+            scrollEventThrottle: 16,
+            style: import_tamagui.isWeb ? scrollerDirection : [{
+              flex: 1
+            }, scrollerDirection],
+            children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.YStack, {
+              width: gridWidth,
+              ...{
+                "data-matrix-canvas": "true"
+              },
+              children: rows.map((row, rowIndex) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.XStack, {
+                height: rowHeight,
+                ...(rowIndex === rows.length - 1 ? null : import_theme.hairline.bottom),
+                borderColor: import_componentColors.componentColors.divider,
+                ...{
+                  "data-matrix-row": row.id
+                },
+                children: buckets.map((bucket, columnIndex) => {
+                  const summary = summaries.get((0, import_matrixMath.matrixCellKey)(row.id, bucket.key));
+                  const intensity = summary ? (0, import_matrixMath.matrixCellIntensity)(summary, maxValue) : 0;
+                  const fill = resolveFill(summary?.color, summary?.intent);
+                  const text = summary ? cellText(summary) : t("No data");
+                  const name = (0, import_t.withInterp)(t("{{subject}}, {{bucket}}: {{value}}"), {
+                    subject: row.label,
+                    bucket: bucket.name,
+                    value: text
+                  });
+                  return /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellIntentWrap, {
+                    intent: summary?.color ? void 0 : summary?.intent,
+                    children: /* @__PURE__ */(0, import_jsx_runtime.jsx)(MatrixCellBox, {
+                      row,
+                      bucket,
+                      summary,
+                      intensity,
+                      fill,
+                      text,
+                      name,
+                      width: columnWidth,
+                      height: rowHeight,
+                      lastColumn: columnIndex === buckets.length - 1,
+                      onPress: onCellPress ? () => onCellPress({
+                        row,
+                        bucket,
+                        summary
+                      }) : void 0
+                    })
+                  }, bucket.key);
+                })
+              }, row.id))
+            })
+          })]
+        })
+      }), showLegend && /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+        ...knobProps.panelPadding,
+        alignItems: "center",
+        flexWrap: "wrap",
+        ...knobProps.gap,
+        ...import_theme.hairline.top,
+        borderColor: "$borderColor",
+        ...{
+          "data-matrix-legend": "true"
+        },
+        children: [/* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "center",
+          gap: "$1.5",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(LegendSwatch, {
+            empty: true
+          }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("No data")
+          })]
+        }), /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+          alignItems: "center",
+          gap: "$1.5",
+          children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("Less")
+          }), LEGEND_STEPS.map(step => /* @__PURE__ */(0, import_jsx_runtime.jsx)(LegendSwatch, {
+            intensity: step
+          }, step)), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+            ...knobProps.label,
+            color: knobProps.textAccentColor,
+            children: t("More")
+          })]
+        }), legendItems?.map((item, index) => /* @__PURE__ */(0, import_jsx_runtime.jsx)(CellIntentWrap, {
+          intent: item.color ? void 0 : item.intent,
+          children: /* @__PURE__ */(0, import_jsx_runtime.jsxs)(import_tamagui.XStack, {
+            alignItems: "center",
+            gap: "$1.5",
+            children: [/* @__PURE__ */(0, import_jsx_runtime.jsx)(LegendSwatch, {
+              fill: resolveFill(item.color, item.intent)
+            }), /* @__PURE__ */(0, import_jsx_runtime.jsx)(import_tamagui.Text, {
+              ...knobProps.label,
+              color: knobProps.textAccentColor,
+              children: item.label
+            })]
+          })
+        }, `${item.label}-${index}`))]
+      })]
+    })
+  });
+}