@vizel/react 1.0.0 → 1.1.0

package/dist/index25.js

@@ -1,8 +1,38 @@
-import { jsx as r } from "react/jsx-runtime";
-import { VizelInternalProvider as t } from "./index17.js";
-function l({ editor: i, children: o, className: e }) {
-  return /* @__PURE__ */ r(t, { editor: i, children: /* @__PURE__ */ r("div", { className: e, "data-vizel-root": "", children: o }) });
+import { jsx as n } from "react/jsx-runtime";
+import { getVizelPortalContainer as s, VIZEL_PORTAL_Z_INDEX as f } from "@vizel/core";
+import { useState as m, useEffect as p } from "react";
+import { createPortal as u } from "react-dom";
+function d({
+  children: t,
+  layer: o = "dropdown",
+  className: e,
+  disabled: r = !1
+}) {
+  const [a, i] = m(!1);
+  if (p(() => {
+    i(!0);
+  }, []), !a || r)
+    return t;
+  const l = s();
+  return u(
+    /* @__PURE__ */ n(
+      "div",
+      {
+        "data-vizel-portal-layer": o,
+        className: e,
+        style: {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          zIndex: f[o]
+        },
+        children: t
+      }
+    ),
+    l
+  );
 }
+d.displayName = "VizelPortal";
 export {
-  l as VizelProvider
+  d as VizelPortal
 };

package/dist/index26.js

@@ -1,71 +1,8 @@
-import { jsxs as m, jsx as e } from "react/jsx-runtime";
-import { formatVizelRelativeTime as p } from "@vizel/core";
-import { useState as h, useEffect as f } from "react";
-import { VizelIcon as i } from "./index20.js";
-function I({
-  status: r,
-  lastSaved: a,
-  showTimestamp: c = !0,
-  className: o
-}) {
-  const [n, t] = h("");
-  f(() => {
-    if (!a) {
-      t("");
-      return;
-    }
-    const s = () => {
-      t(p(a));
-    };
-    s();
-    const u = setInterval(s, 1e4);
-    return () => clearInterval(u);
-  }, [a]);
-  const l = () => {
-    switch (r) {
-      case "saved":
-        return /* @__PURE__ */ e(i, { name: "check" });
-      case "saving":
-        return /* @__PURE__ */ e("span", { className: "vizel-save-indicator-spinner", "aria-hidden": "true", children: /* @__PURE__ */ e(i, { name: "loader" }) });
-      case "unsaved":
-        return /* @__PURE__ */ e(i, { name: "circle" });
-      case "error":
-        return /* @__PURE__ */ e(i, { name: "warning" });
-      default:
-        return null;
-    }
-  }, v = () => {
-    switch (r) {
-      case "saved":
-        return "Saved";
-      case "saving":
-        return "Saving...";
-      case "unsaved":
-        return "Unsaved";
-      case "error":
-        return "Error saving";
-      default:
-        return "";
-    }
-  }, d = c && a && n && r === "saved";
-  return (
-    // biome-ignore lint/a11y/useSemanticElements: role="status" is appropriate for non-form status announcements
-    /* @__PURE__ */ m(
-      "div",
-      {
-        className: `vizel-save-indicator vizel-save-indicator--${r} ${o ?? ""}`,
-        role: "status",
-        "aria-live": "polite",
-        "data-vizel-save-indicator": !0,
-        children: [
-          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-icon", "aria-hidden": "true", children: l() }),
-          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-text", children: v() }),
-          d && /* @__PURE__ */ e("span", { className: "vizel-save-indicator-timestamp", children: n })
-        ]
-      }
-    )
-  );
+import { jsx as r } from "react/jsx-runtime";
+import { VizelInternalProvider as t } from "./index17.js";
+function l({ editor: i, children: o, className: e }) {
+  return /* @__PURE__ */ r(t, { editor: i, children: /* @__PURE__ */ r("div", { className: e, "data-vizel-root": "", children: o }) });
 }
 export {
-  I as VizelSaveIndicator
+  l as VizelProvider
 };

package/dist/index27.js

@@ -1,94 +1,71 @@
-import { jsx as u, jsxs as E } from "react/jsx-runtime";
-import { groupVizelSlashCommands as D } from "@vizel/core";
-import { useState as N, useRef as j, useMemo as b, useEffect as p, useCallback as h, useImperativeHandle as A } from "react";
-import { VizelSlashMenuEmpty as R } from "./index28.js";
-import { VizelSlashMenuItem as $ } from "./index29.js";
-function B({
-  ref: S,
-  items: m,
-  command: v,
-  className: x,
-  showGroups: z = !0,
-  renderItem: I,
-  renderEmpty: y,
-  groupOrder: k
+import { jsxs as m, jsx as e } from "react/jsx-runtime";
+import { formatVizelRelativeTime as p } from "@vizel/core";
+import { useState as h, useEffect as f } from "react";
+import { VizelIcon as i } from "./index21.js";
+function I({
+  status: r,
+  lastSaved: a,
+  showTimestamp: c = !0,
+  className: o
 }) {
-  const [i, f] = N(0), c = j([]), r = b(() => !z || m.length <= 5 ? [{ name: "", items: m }] : D(m, k), [m, z, k]), t = b(() => r.flatMap((e) => e.items), [r]);
-  p(() => {
-    c.current.length > t.length && (c.current.length = t.length);
-  }, [t.length]), p(() => {
-    const e = c.current[i];
-    e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
-  }, [i]);
-  const d = h(
-    (e) => {
-      const s = t[e];
-      s && v(s);
-    },
-    [t, v]
-  ), w = h(() => {
-    f((e) => (e + t.length - 1) % t.length);
-  }, [t.length]), H = h(() => {
-    f((e) => (e + 1) % t.length);
-  }, [t.length]), M = h(() => {
-    d(i);
-  }, [d, i]), V = h(() => {
-    if (r.length <= 1) return;
-    let e = 0, s = 0;
-    for (let n = 0; n < r.length; n++) {
-      const l = r[n];
-      if (l) {
-        if (i < s + l.items.length) {
-          e = n;
-          break;
-        }
-        s += l.items.length;
-      }
+  const [n, t] = h("");
+  f(() => {
+    if (!a) {
+      t("");
+      return;
+    }
+    const s = () => {
+      t(p(a));
+    };
+    s();
+    const u = setInterval(s, 1e4);
+    return () => clearInterval(u);
+  }, [a]);
+  const l = () => {
+    switch (r) {
+      case "saved":
+        return /* @__PURE__ */ e(i, { name: "check" });
+      case "saving":
+        return /* @__PURE__ */ e("span", { className: "vizel-save-indicator-spinner", "aria-hidden": "true", children: /* @__PURE__ */ e(i, { name: "loader" }) });
+      case "unsaved":
+        return /* @__PURE__ */ e(i, { name: "circle" });
+      case "error":
+        return /* @__PURE__ */ e(i, { name: "warning" });
+      default:
+        return null;
     }
-    const a = (e + 1) % r.length;
-    let o = 0;
-    for (let n = 0; n < a; n++) {
-      const l = r[n];
-      l && (o += l.items.length);
+  }, v = () => {
+    switch (r) {
+      case "saved":
+        return "Saved";
+      case "saving":
+        return "Saving...";
+      case "unsaved":
+        return "Unsaved";
+      case "error":
+        return "Error saving";
+      default:
+        return "";
     }
-    f(o);
-  }, [r, i]);
-  if (p(() => {
-    f(0);
-  }, [r]), A(S, () => ({
-    onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (w(), !0) : e.key === "ArrowDown" ? (H(), !0) : e.key === "Enter" ? (M(), !0) : e.key === "Tab" ? (e.preventDefault(), V(), !0) : !1
-  })), t.length === 0)
-    return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: y?.() ?? /* @__PURE__ */ u(R, {}) });
-  let C = 0;
-  return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: r.map((e) => {
-    const s = e.items.map((a) => {
-      const o = C++, n = o === i, l = () => d(o);
-      return I ? /* @__PURE__ */ u(
-        "div",
-        {
-          ref: (g) => {
-            c.current[o] = g;
-          },
-          children: I({ item: a, isSelected: n, onClick: l })
-        },
-        a.title
-      ) : /* @__PURE__ */ u(
-        "div",
-        {
-          ref: (g) => {
-            c.current[o] = g;
-          },
-          children: /* @__PURE__ */ u($, { item: a, isSelected: n, onClick: l })
-        },
-        a.title
-      );
-    });
-    return e.name ? /* @__PURE__ */ E("div", { className: "vizel-slash-menu-group", "data-vizel-slash-menu-group": !0, children: [
-      /* @__PURE__ */ u("div", { className: "vizel-slash-menu-group-header", children: e.name }),
-      s
-    ] }, e.name) : s;
-  }) });
+  }, d = c && a && n && r === "saved";
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: role="status" is appropriate for non-form status announcements
+    /* @__PURE__ */ m(
+      "div",
+      {
+        className: `vizel-save-indicator vizel-save-indicator--${r} ${o ?? ""}`,
+        role: "status",
+        "aria-live": "polite",
+        "data-vizel-save-indicator": !0,
+        children: [
+          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-icon", "aria-hidden": "true", children: l() }),
+          /* @__PURE__ */ e("span", { className: "vizel-save-indicator-text", children: v() }),
+          d && /* @__PURE__ */ e("span", { className: "vizel-save-indicator-timestamp", children: n })
+        ]
+      }
+    )
+  );
 }
 export {
-  B as VizelSlashMenu
+  I as VizelSaveIndicator
 };

package/dist/index28.js

@@ -1,7 +1,94 @@
-import { jsx as l } from "react/jsx-runtime";
-function m({ children: e, className: s }) {
-  return /* @__PURE__ */ l("div", { className: `vizel-slash-menu-empty ${s ?? ""}`, "data-vizel-slash-menu-empty": "", children: e ?? "No results" });
+import { jsx as u, jsxs as E } from "react/jsx-runtime";
+import { groupVizelSlashCommands as D } from "@vizel/core";
+import { useState as N, useRef as j, useMemo as b, useEffect as p, useCallback as h, useImperativeHandle as A } from "react";
+import { VizelSlashMenuEmpty as R } from "./index29.js";
+import { VizelSlashMenuItem as $ } from "./index30.js";
+function B({
+  ref: S,
+  items: m,
+  command: v,
+  className: x,
+  showGroups: z = !0,
+  renderItem: I,
+  renderEmpty: y,
+  groupOrder: k
+}) {
+  const [i, f] = N(0), c = j([]), r = b(() => !z || m.length <= 5 ? [{ name: "", items: m }] : D(m, k), [m, z, k]), t = b(() => r.flatMap((e) => e.items), [r]);
+  p(() => {
+    c.current.length > t.length && (c.current.length = t.length);
+  }, [t.length]), p(() => {
+    const e = c.current[i];
+    e && e.scrollIntoView({ block: "nearest", behavior: "smooth" });
+  }, [i]);
+  const d = h(
+    (e) => {
+      const s = t[e];
+      s && v(s);
+    },
+    [t, v]
+  ), w = h(() => {
+    f((e) => (e + t.length - 1) % t.length);
+  }, [t.length]), H = h(() => {
+    f((e) => (e + 1) % t.length);
+  }, [t.length]), M = h(() => {
+    d(i);
+  }, [d, i]), V = h(() => {
+    if (r.length <= 1) return;
+    let e = 0, s = 0;
+    for (let n = 0; n < r.length; n++) {
+      const l = r[n];
+      if (l) {
+        if (i < s + l.items.length) {
+          e = n;
+          break;
+        }
+        s += l.items.length;
+      }
+    }
+    const a = (e + 1) % r.length;
+    let o = 0;
+    for (let n = 0; n < a; n++) {
+      const l = r[n];
+      l && (o += l.items.length);
+    }
+    f(o);
+  }, [r, i]);
+  if (p(() => {
+    f(0);
+  }, [r]), A(S, () => ({
+    onKeyDown: ({ event: e }) => e.key === "ArrowUp" ? (w(), !0) : e.key === "ArrowDown" ? (H(), !0) : e.key === "Enter" ? (M(), !0) : e.key === "Tab" ? (e.preventDefault(), V(), !0) : !1
+  })), t.length === 0)
+    return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: y?.() ?? /* @__PURE__ */ u(R, {}) });
+  let C = 0;
+  return /* @__PURE__ */ u("div", { className: `vizel-slash-menu ${x ?? ""}`, "data-vizel-slash-menu": "", children: r.map((e) => {
+    const s = e.items.map((a) => {
+      const o = C++, n = o === i, l = () => d(o);
+      return I ? /* @__PURE__ */ u(
+        "div",
+        {
+          ref: (g) => {
+            c.current[o] = g;
+          },
+          children: I({ item: a, isSelected: n, onClick: l })
+        },
+        a.title
+      ) : /* @__PURE__ */ u(
+        "div",
+        {
+          ref: (g) => {
+            c.current[o] = g;
+          },
+          children: /* @__PURE__ */ u($, { item: a, isSelected: n, onClick: l })
+        },
+        a.title
+      );
+    });
+    return e.name ? /* @__PURE__ */ E("div", { className: "vizel-slash-menu-group", "data-vizel-slash-menu-group": !0, children: [
+      /* @__PURE__ */ u("div", { className: "vizel-slash-menu-group-header", children: e.name }),
+      s
+    ] }, e.name) : s;
+  }) });
 }
 export {
-  m as VizelSlashMenuEmpty
+  B as VizelSlashMenu
 };

package/dist/index29.js

@@ -1,39 +1,7 @@
-import { jsxs as n, jsx as l } from "react/jsx-runtime";
-import { splitVizelTextByMatches as c } from "@vizel/core";
-import { VizelIcon as r } from "./index20.js";
-const o = (e, t) => {
-  const a = c(e, t);
-  let i = 0;
-  return a.map((s) => {
-    const h = `${i}-${s.highlight}`;
-    return i += s.text.length, s.highlight ? /* @__PURE__ */ l("mark", { className: "vizel-slash-menu-highlight", children: s.text }, h) : s.text;
-  });
-};
-function p({
-  item: e,
-  isSelected: t = !1,
-  onClick: a,
-  className: i,
-  titleMatches: s
-}) {
-  return /* @__PURE__ */ n(
-    "button",
-    {
-      type: "button",
-      className: `vizel-slash-menu-item ${t ? "is-selected" : ""} ${i ?? ""}`,
-      onClick: a,
-      "data-selected": t || void 0,
-      children: [
-        /* @__PURE__ */ l("span", { className: "vizel-slash-menu-icon", children: /* @__PURE__ */ l(r, { name: e.icon }) }),
-        /* @__PURE__ */ n("div", { className: "vizel-slash-menu-text", children: [
-          /* @__PURE__ */ l("span", { className: "vizel-slash-menu-title", children: o(e.title, s) }),
-          /* @__PURE__ */ l("span", { className: "vizel-slash-menu-description", children: e.description })
-        ] }),
-        e.shortcut && /* @__PURE__ */ l("span", { className: "vizel-slash-menu-shortcut", children: e.shortcut })
-      ]
-    }
-  );
+import { jsx as l } from "react/jsx-runtime";
+function m({ children: e, className: s }) {
+  return /* @__PURE__ */ l("div", { className: `vizel-slash-menu-empty ${s ?? ""}`, "data-vizel-slash-menu-empty": "", children: e ?? "No results" });
 }
 export {
-  p as VizelSlashMenuItem
+  m as VizelSlashMenuEmpty
 };

package/dist/index30.js

@@ -1,56 +1,39 @@
-import { jsx as d } from "react/jsx-runtime";
-import { getStoredVizelTheme as v, VIZEL_DEFAULT_THEME_STORAGE_KEY as x, VIZEL_DEFAULT_THEME as S, getVizelSystemTheme as _, resolveVizelTheme as L, applyVizelTheme as P, createVizelSystemThemeListener as C, storeVizelTheme as y } from "@vizel/core";
-import { createContext as A, useContext as V, useState as T, useMemo as h, useEffect as c, useCallback as M } from "react";
-const s = A(null);
-function H({
-  children: t,
-  defaultTheme: z = S,
-  storageKey: n = x,
-  targetSelector: i,
-  disableTransitionOnChange: l = !1
+import { jsxs as n, jsx as l } from "react/jsx-runtime";
+import { splitVizelTextByMatches as c } from "@vizel/core";
+import { VizelIcon as r } from "./index21.js";
+const o = (e, t) => {
+  const a = c(e, t);
+  let i = 0;
+  return a.map((s) => {
+    const h = `${i}-${s.highlight}`;
+    return i += s.text.length, s.highlight ? /* @__PURE__ */ l("mark", { className: "vizel-slash-menu-highlight", children: s.text }, h) : s.text;
+  });
+};
+function p({
+  item: e,
+  isSelected: t = !1,
+  onClick: a,
+  className: i,
+  titleMatches: s
 }) {
-  const [r, E] = T(() => {
-    const e = v(n);
-    return e || z;
-  }), [o, f] = T(() => _()), m = h(() => L(r, o), [r, o]);
-  c(() => {
-    P(m, i, l);
-  }, [m, i, l]), c(() => C((a) => {
-    f(a);
-  }), []);
-  const u = M(
-    (e) => {
-      E(e), y(n, e);
-    },
-    [n]
-  ), p = h(
-    () => ({
-      theme: r,
-      resolvedTheme: m,
-      systemTheme: o,
-      setTheme: u
-    }),
-    [r, m, o, u]
+  return /* @__PURE__ */ n(
+    "button",
+    {
+      type: "button",
+      className: `vizel-slash-menu-item ${t ? "is-selected" : ""} ${i ?? ""}`,
+      onClick: a,
+      "data-selected": t || void 0,
+      children: [
+        /* @__PURE__ */ l("span", { className: "vizel-slash-menu-icon", children: /* @__PURE__ */ l(r, { name: e.icon }) }),
+        /* @__PURE__ */ n("div", { className: "vizel-slash-menu-text", children: [
+          /* @__PURE__ */ l("span", { className: "vizel-slash-menu-title", children: o(e.title, s) }),
+          /* @__PURE__ */ l("span", { className: "vizel-slash-menu-description", children: e.description })
+        ] }),
+        e.shortcut && /* @__PURE__ */ l("span", { className: "vizel-slash-menu-shortcut", children: e.shortcut })
+      ]
+    }
   );
-  return /* @__PURE__ */ d(s.Provider, { value: p, children: t });
-}
-function I() {
-  const t = V(s);
-  if (!t)
-    throw new Error(
-      `[Vizel] useVizelTheme must be used within a VizelThemeProvider.
-Example:
-  <VizelThemeProvider>
-    <YourComponent />
-  </VizelThemeProvider>`
-    );
-  return t;
-}
-function U() {
-  return V(s);
 }
 export {
-  H as VizelThemeProvider,
-  I as useVizelTheme,
-  U as useVizelThemeSafe
+  p as VizelSlashMenuItem
 };

package/dist/index31.js

@@ -1,15 +1,56 @@
-import { jsx as r } from "react/jsx-runtime";
-import { useVizelContextSafe as n } from "./index17.js";
-import { VizelToolbarDefault as m } from "./index33.js";
-function s({
-  editor: t,
-  className: e,
-  showDefaultToolbar: l = !0,
-  children: i
+import { jsx as d } from "react/jsx-runtime";
+import { getStoredVizelTheme as v, VIZEL_DEFAULT_THEME_STORAGE_KEY as x, VIZEL_DEFAULT_THEME as S, getVizelSystemTheme as _, resolveVizelTheme as L, applyVizelTheme as P, createVizelSystemThemeListener as C, storeVizelTheme as y } from "@vizel/core";
+import { createContext as A, useContext as V, useState as T, useMemo as h, useEffect as c, useCallback as M } from "react";
+const s = A(null);
+function H({
+  children: t,
+  defaultTheme: z = S,
+  storageKey: n = x,
+  targetSelector: i,
+  disableTransitionOnChange: l = !1
 }) {
-  const a = n(), o = t ?? a?.editor ?? null;
-  return o ? /* @__PURE__ */ r("div", { className: `vizel-toolbar ${e ?? ""}`, role: "toolbar", "aria-label": "Formatting", children: i ?? (l && /* @__PURE__ */ r(m, { editor: o })) }) : null;
+  const [r, E] = T(() => {
+    const e = v(n);
+    return e || z;
+  }), [o, f] = T(() => _()), m = h(() => L(r, o), [r, o]);
+  c(() => {
+    P(m, i, l);
+  }, [m, i, l]), c(() => C((a) => {
+    f(a);
+  }), []);
+  const u = M(
+    (e) => {
+      E(e), y(n, e);
+    },
+    [n]
+  ), p = h(
+    () => ({
+      theme: r,
+      resolvedTheme: m,
+      systemTheme: o,
+      setTheme: u
+    }),
+    [r, m, o, u]
+  );
+  return /* @__PURE__ */ d(s.Provider, { value: p, children: t });
+}
+function I() {
+  const t = V(s);
+  if (!t)
+    throw new Error(
+      `[Vizel] useVizelTheme must be used within a VizelThemeProvider.
+Example:
+  <VizelThemeProvider>
+    <YourComponent />
+  </VizelThemeProvider>`
+    );
+  return t;
+}
+function U() {
+  return V(s);
 }
 export {
-  s as VizelToolbar
+  H as VizelThemeProvider,
+  I as useVizelTheme,
+  U as useVizelThemeSafe
 };

package/dist/index32.js

@@ -1,28 +1,15 @@
-import { jsx as i } from "react/jsx-runtime";
-function u({
-  onClick: a,
-  isActive: t = !1,
-  disabled: o = !1,
-  children: e,
-  title: r,
-  className: n,
-  action: l
+import { jsx as r } from "react/jsx-runtime";
+import { useVizelContextSafe as n } from "./index17.js";
+import { VizelToolbarDefault as m } from "./index34.js";
+function s({
+  editor: t,
+  className: e,
+  showDefaultToolbar: l = !0,
+  children: i
 }) {
-  return /* @__PURE__ */ i(
-    "button",
-    {
-      type: "button",
-      onClick: a,
-      disabled: o,
-      "aria-pressed": t,
-      className: `vizel-toolbar-button ${t ? "is-active" : ""} ${n ?? ""}`,
-      title: r,
-      "data-active": t || void 0,
-      "data-action": l,
-      children: e
-    }
-  );
+  const a = n(), o = t ?? a?.editor ?? null;
+  return o ? /* @__PURE__ */ r("div", { className: `vizel-toolbar ${e ?? ""}`, role: "toolbar", "aria-label": "Formatting", children: i ?? (l && /* @__PURE__ */ r(m, { editor: o })) }) : null;
 }
 export {
-  u as VizelToolbarButton
+  s as VizelToolbar
 };