@factorialco/f0-react 7.23.0 → 7.24.1

package/dist/i18n-provider-defaults.d.ts

@@ -490,6 +490,7 @@ export declare const defaultTranslations: {
             readonly list: "List";
             readonly kanban: "Kanban";
             readonly graph: "Graph";
+            readonly map: "Map";
             readonly pagination: {
                 readonly of: "of";
             };
@@ -497,6 +498,11 @@ export declare const defaultTranslations: {
             readonly reset: "Reset to default";
             readonly viewSelectorLabel: "Select view";
         };
+        readonly map: {
+            readonly notOnMap: "Not on map";
+            readonly onMap: "On map";
+            readonly notOnMapCount: "{{count}} not on map";
+        };
         readonly table: {
             readonly seeMoreChildren: "See more";
             readonly settings: {
@@ -1389,11 +1395,15 @@ export declare const defaultTranslations: {
         readonly loadError: "Couldn't load the map.";
         readonly retry: "Retry";
         readonly currentLocation: "Your location";
+        readonly panel: "Map panel";
+        readonly detailPanel: "Map detail panel";
         readonly controls: {
             readonly zoomIn: "Zoom in";
             readonly zoomOut: "Zoom out";
             readonly fit: "Fit to markers";
             readonly locate: "My location";
+            readonly showPanel: "Show panel";
+            readonly hidePanel: "Hide panel";
         };
     };
     readonly wizard: {
@@ -1528,9 +1538,11 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        fontSize: {
-            setFontSize: (fontSize: string) => ReturnType;
-            unsetFontSize: () => ReturnType;
+        enhanceHighlight: {
+            setEnhanceHighlight: (from: number, to: number, options?: {
+                placeholder?: string;
+            }) => ReturnType;
+            clearEnhanceHighlight: () => ReturnType;
         };
     }
 }
@@ -1538,11 +1550,9 @@ declare module "@tiptap/core" {
 
 declare module "@tiptap/core" {
     interface Commands<ReturnType> {
-        enhanceHighlight: {
-            setEnhanceHighlight: (from: number, to: number, options?: {
-                placeholder?: string;
-            }) => ReturnType;
-            clearEnhanceHighlight: () => ReturnType;
+        fontSize: {
+            setFontSize: (fontSize: string) => ReturnType;
+            unsetFontSize: () => ReturnType;
         };
     }
 }

package/dist/i18n-provider-defaults.js

@@ -490,6 +490,7 @@ const e = {
       list: "List",
       kanban: "Kanban",
       graph: "Graph",
+      map: "Map",
       pagination: {
         of: "of"
       },
@@ -497,6 +498,11 @@ const e = {
       reset: "Reset to default",
       viewSelectorLabel: "Select view"
     },
+    map: {
+      notOnMap: "Not on map",
+      onMap: "On map",
+      notOnMapCount: "{{count}} not on map"
+    },
     table: {
       seeMoreChildren: "See more",
       settings: {
@@ -1397,11 +1403,15 @@ const e = {
     loadError: "Couldn't load the map.",
     retry: "Retry",
     currentLocation: "Your location",
+    panel: "Map panel",
+    detailPanel: "Map detail panel",
     controls: {
       zoomIn: "Zoom in",
       zoomOut: "Zoom out",
       fit: "Fit to markers",
-      locate: "My location"
+      locate: "My location",
+      showPanel: "Show panel",
+      hidePanel: "Hide panel"
     }
   },
   wizard: {

package/dist/index-BUqW79F1.js

@@ -0,0 +1,4 @@
+import { F as r } from "./F0VideoPlayer-DKPfOJBp.js";
+export {
+  r as F0VideoPlayer
+};

package/dist/index-BWwc7G48.js

@@ -0,0 +1,410 @@
+import { jsxs as k, jsx as o, Fragment as rn } from "react/jsx-runtime";
+import { useRef as p, useEffect as v, useMemo as M, useCallback as A, useState as w } from "react";
+import { o as En, q as Fn, r as ln, s as Tn, t as Dn, v as Pn, w as Bn, x as Ln, u as sn } from "./F0CanvasPanel-DnlpQoxW.js";
+import { d as L, f as on, u as In } from "./tooltip-CrXp1Uaz.js";
+import { a as cn, u as Qn, S as jn } from "./MapProvider-bLF59EA-.js";
+import { a as Kn, b as Un, R as tn } from "./F0Map-BK43p1Ck.js";
+const R = 3, _n = ({
+  title: e,
+  count: t,
+  ariaLabel: r,
+  avatars: a,
+  onClick: i,
+  dataTestId: s
+}) => /* @__PURE__ */ k(
+  "button",
+  {
+    type: "button",
+    onClick: i,
+    "aria-label": r,
+    "data-testid": s,
+    className: L(
+      "flex h-8 items-center gap-2 rounded-md pl-3 pr-1.5",
+      "hover:bg-f1-background-hover",
+      on()
+    ),
+    children: [
+      /* @__PURE__ */ o("span", { className: "whitespace-nowrap", children: /* @__PURE__ */ o(
+        En,
+        {
+          variant: "label",
+          content: e,
+          markdown: !1,
+          className: "text-f1-foreground-secondary"
+        }
+      ) }),
+      a && a.length > 0 ? (
+        // `sm`: at `xs` the "+N" bubble becomes an ellipsis, and the number is
+        // the point. The rest go in as `remainingCount`, not items, which would
+        // make the bubble a button inside this button.
+        /* @__PURE__ */ o(
+          Fn,
+          {
+            type: "person",
+            avatars: a.slice(0, R),
+            remainingCount: t > R ? t - R : void 0,
+            size: "sm",
+            max: R,
+            noTooltip: !0
+          }
+        )
+      ) : /* @__PURE__ */ o(ln, { value: t, size: "sm" })
+    ]
+  }
+), an = ({
+  title: e,
+  count: t,
+  open: r,
+  onOpenChange: a,
+  defaultOpen: i = !0,
+  children: s,
+  dataTestId: l
+}) => {
+  const [c = i, u] = In({
+    prop: r,
+    defaultProp: i,
+    onChange: a
+  });
+  return /* @__PURE__ */ k(Tn, { open: c, onOpenChange: u, "data-testid": l, children: [
+    /* @__PURE__ */ o(Dn, { asChild: !0, children: /* @__PURE__ */ k(
+      "button",
+      {
+        type: "button",
+        className: L(
+          // Wider than its rows, padded so the title aligns with them.
+          "flex w-full items-center gap-2 rounded-md px-2.5 py-1.5 text-left",
+          "hover:bg-f1-background-hover",
+          on()
+        ),
+        children: [
+          /* @__PURE__ */ o("span", { className: "min-w-0 flex-1", children: /* @__PURE__ */ o(cn, { variant: "label", content: e, markdown: !1, ellipsis: !0 }) }),
+          /* @__PURE__ */ o(ln, { value: t, size: "sm" }),
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: L(
+                "flex shrink-0 text-f1-icon transition-transform duration-200 motion-reduce:transition-none",
+                c && "rotate-180"
+              ),
+              children: /* @__PURE__ */ o(Pn, { icon: Bn, size: "sm" })
+            }
+          )
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ o(Ln, { className: "px-0.5", children: s })
+  ] });
+}, Wn = ({
+  rows: e,
+  unplaced: t,
+  placed: r,
+  matches: a,
+  notOnMapOpen: i,
+  onNotOnMapOpenChange: s
+}) => {
+  const l = sn();
+  return /* @__PURE__ */ o("div", { className: "flex h-full min-h-0 flex-col gap-1 overflow-y-auto px-1 pb-1.5 pt-0.5", children: a ? (
+    // Section rows step in 2px; so do matches, to stay where they were.
+    /* @__PURE__ */ o("div", { className: "px-0.5", "data-testid": "map-panel-search-results", children: a.length > 0 ? e(a) : /* @__PURE__ */ o("div", { className: "px-2 py-1.5", children: /* @__PURE__ */ o(
+      cn,
+      {
+        variant: "description",
+        content: l.select.noResults,
+        markdown: !1
+      }
+    ) }) })
+  ) : /* @__PURE__ */ k(rn, { children: [
+    t.length > 0 ? /* @__PURE__ */ o(
+      an,
+      {
+        title: l.collections.map.notOnMap,
+        count: t.length,
+        open: i,
+        onOpenChange: s,
+        dataTestId: "map-panel-not-on-map",
+        children: e(t)
+      }
+    ) : null,
+    /* @__PURE__ */ o(
+      an,
+      {
+        title: l.collections.map.onMap,
+        count: r.length,
+        dataTestId: "map-panel-on-map",
+        children: e(r)
+      }
+    )
+  ] }) });
+}, Xn = ({
+  querySignature: e,
+  records: t,
+  markerKey: r,
+  isLoading: a,
+  reframe: i
+}) => {
+  const s = p(null), l = p(
+    null
+  ), c = p(null);
+  return v(() => {
+    s.current !== null && s.current !== e && (l.current = { records: t, markerKey: r }), s.current = e;
+  }, [e, t, r]), v(() => {
+    const u = l.current;
+    if (!u || a || u.records === t)
+      return;
+    l.current = null;
+    const E = c.current;
+    c.current = null, u.markerKey !== r ? i() : E?.();
+  }, [a, t, r, i]), {
+    /** Runs `fn` now, or once a pending query lands without new markers. */
+    ifUnchanged: (u) => {
+      l.current ? c.current = u : u();
+    }
+  };
+}, $n = ({
+  selectedId: e,
+  search: t,
+  zoomedInRef: r,
+  fitToMarkers: a,
+  ifUnchanged: i
+}) => {
+  const s = p(null);
+  v(() => {
+    const c = s.current;
+    s.current = e, c && !e && r.current && a(), e || (r.current = !1);
+  }, [e, a, r]);
+  const l = p(t);
+  v(() => {
+    const c = l.current;
+    l.current = t, !(!c || t) && (r.current && i(a), r.current = !1);
+  }, [t, a, r]);
+}, qn = (e, {
+  coordinates: t,
+  label: r,
+  marker: a,
+  recordId: i
+}) => {
+  const s = {
+    points: [],
+    placed: [],
+    unplaced: [],
+    placedIds: /* @__PURE__ */ new Set(),
+    unplacedKinds: /* @__PURE__ */ new Map()
+  };
+  for (const l of e) {
+    const c = i(l), u = t(l);
+    if (!Array.isArray(u)) {
+      s.unplaced.push(l), s.unplacedKinds.set(c, u?.kind ?? null);
+      continue;
+    }
+    s.placedIds.add(c), s.placed.push(l), s.points.push({
+      id: c,
+      coordinates: u,
+      label: r?.(l),
+      ...a?.(l) ?? { variant: "default" }
+    });
+  }
+  return s;
+}, zn = (e) => e.every((t) => t.variant === "employee") ? e.map(({ firstName: t, lastName: r, src: a }) => ({
+  firstName: t,
+  lastName: r,
+  src: a
+})) : null, Hn = ({
+  hasSidebar: e,
+  panel: t,
+  expanded: r,
+  onToggle: a,
+  unplacedCount: i,
+  countButton: s,
+  search: l
+}) => e ? {
+  sidebar: t,
+  sidebarExpanded: r,
+  onSidebarToggle: a,
+  sidebarToggleAddon: i > 0 ? s : void 0,
+  sidebarHeaderStart: l
+} : {}, ee = ({
+  source: e,
+  coordinates: t,
+  label: r,
+  marker: a,
+  getRecordId: i,
+  selectedRecordId: s,
+  onSelect: l,
+  revealRecordId: c,
+  searchSelectionNonce: u,
+  viewportInset: E,
+  initialViewport: un,
+  showControls: pn,
+  projection: dn,
+  provider: fn,
+  markerLimit: mn,
+  ariaLabel: hn,
+  sidebar: I,
+  sidebarSearchText: C,
+  detail: F,
+  onSidebarToggle: gn,
+  onLoadData: vn,
+  onLoadError: bn
+}) => {
+  const Q = sn(), j = Math.min(
+    mn ?? tn,
+    tn
+  ), Mn = M(
+    () => e.dataAdapter.paginationType ? { ...e.dataAdapter, perPage: j } : e.dataAdapter,
+    [e.dataAdapter, j]
+  ), { data: Cn, paginationInfo: K, isInitialLoading: U, isLoading: xn } = Qn({ ...e, dataAdapter: Mn }, { onError: bn }), d = Cn.records;
+  v(() => {
+    vn({
+      totalItems: K?.total || d.length,
+      filters: e.currentFilters,
+      search: e.currentSearch,
+      isInitialLoading: U,
+      data: d
+    });
+  }, [K?.total, d]);
+  const f = A(
+    (n) => i ? i(n) : String(n.id),
+    [i]
+  ), { points: _, placed: T, unplaced: m, placedIds: x, unplacedKinds: W } = M(
+    () => qn(d, { coordinates: t, label: r, marker: a, recordId: f }),
+    [d, t, r, a, f]
+  ), [On, Sn] = w(
+    null
+  ), h = s !== void 0 ? s : On, O = p(null), X = p(null), $ = p(h);
+  $.current = h;
+  const D = p(!1), b = A(
+    (n) => {
+      if (n !== null && n === O.current) {
+        O.current = null;
+        return;
+      }
+      X.current = n, n !== null && (D.current = !1), s === void 0 && Sn(n), l?.(
+        n === null ? null : d.find((g) => f(g) === n) ?? null
+      );
+    },
+    [l, d, f, s]
+  ), S = p(null), N = A(
+    (n) => {
+      b(n), x.has(n) && S.current && (O.current = n, S.current.focusMarker(n), O.current = null, D.current = !0);
+    },
+    [x, b]
+  ), q = p(l);
+  q.current = l, v(
+    () => () => {
+      (X.current !== null || $.current !== null) && q.current?.(null);
+    },
+    []
+  );
+  const [P, Nn] = w(!1), [yn, z] = w(!1), [B, H] = w(""), J = (n) => {
+    n !== P && (Nn(n), gn?.(n));
+  }, An = () => {
+    z(!0), H(""), J(!0);
+  }, Z = M(
+    () => ({
+      select: (n) => n ? N(f(n)) : b(null),
+      selectedRecordId: h,
+      placement: (n) => {
+        const g = f(n);
+        return x.has(g) ? "placed" : W.get(g) ?? "unplaced";
+      }
+    }),
+    [N, b, f, h, x, W]
+  ), y = h ? d.find((n) => f(n) === h) ?? null : null, G = p(null);
+  y && (G.current = y);
+  const V = y ?? G.current, Y = A(() => S.current?.fitToMarkers(), []), wn = Xn({
+    querySignature: JSON.stringify({
+      filters: e.currentFilters ?? {},
+      search: e.currentSearch ?? ""
+    }),
+    records: d,
+    markerKey: _.map((n) => n.id).join(","),
+    isLoading: xn,
+    reframe: Y
+  });
+  $n({
+    selectedId: h,
+    search: e.currentSearch,
+    zoomedInRef: D,
+    fitToMarkers: Y,
+    ifUnchanged: wn.ifUnchanged
+  });
+  const nn = p(null);
+  v(() => {
+    const n = `${c}:${u ?? 0}`;
+    !c || nn.current === n || !d.some((g) => f(g) === c) || (nn.current = n, N(c));
+  }, [c, u, d, f, N]);
+  const Rn = M(() => {
+    const n = B.trim().toLowerCase();
+    return !C || !n ? null : [...m, ...T].filter(
+      (g) => C(g).toLowerCase().includes(n)
+    );
+  }, [C, B, m, T]), kn = M(
+    () => a ? zn(m.map(a)) : null,
+    [m, a]
+  ), en = "flex h-full min-h-0 flex-1 flex-col border-0 border-t border-solid border-f1-border-secondary";
+  return U ? /* @__PURE__ */ o("div", { className: en, children: /* @__PURE__ */ o(Kn, {}) }) : /* @__PURE__ */ o("div", { className: en, children: /* @__PURE__ */ o(
+    Un,
+    {
+      ref: S,
+      markers: _,
+      selectedMarkerId: h,
+      onMarkerSelect: b,
+      centerOnMarkerClick: !0,
+      viewportInset: E,
+      initialViewport: un,
+      showControls: pn,
+      projection: dn,
+      provider: fn,
+      ariaLabel: hn,
+      ...Hn({
+        hasSidebar: !!I,
+        panel: /* @__PURE__ */ o(
+          Wn,
+          {
+            rows: (n) => I?.(n, Z),
+            unplaced: m,
+            placed: T,
+            matches: Rn,
+            notOnMapOpen: yn,
+            onNotOnMapOpenChange: z
+          }
+        ),
+        expanded: P,
+        onToggle: () => J(!P),
+        unplacedCount: m.length,
+        countButton: /* @__PURE__ */ o(
+          _n,
+          {
+            title: Q.collections.map.notOnMap,
+            count: m.length,
+            ariaLabel: Q.t("collections.map.notOnMapCount", {
+              count: m.length
+            }),
+            avatars: kn,
+            onClick: An,
+            dataTestId: "map-not-on-map"
+          }
+        ),
+        search: C ? /* @__PURE__ */ o(
+          jn,
+          {
+            value: B,
+            onChange: (n) => H(n ?? ""),
+            variant: "ghost",
+            expandedWidth: "fill"
+          }
+        ) : void 0
+      }),
+      detail: F ? V ? F(V, Z) : (
+        // oxlint-disable-next-line react/jsx-no-useless-fragment -- a node, not null: see above
+        /* @__PURE__ */ o(rn, {})
+      ) : null,
+      detailOpen: !!y,
+      clearSelectionOnBackgroundClick: !F,
+      fullScreen: !0
+    }
+  ) });
+};
+export {
+  ee as MapCollection
+};

package/dist/{index-CyVOH26Y.js → index-CCea6fTM.js}

@@ -1,4 +1,4 @@
-import { n as L } from "./F0CanvasPanel-B2aaoYnV.js";
+import { n as L } from "./F0CanvasPanel-DnlpQoxW.js";
 const O = (e) => e.map(([n, s]) => ({ lat: s, lng: n })), x = (e, n) => ({
   strokeColor: n && e.hover?.color || e.color,
   strokeWeight: n && e.hover?.width || e.width,