@instructure/platform-notebook 1.3.1 → 1.4.0

package/dist/NoteChip.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"NoteChip.d.ts","sourceRoot":"","sources":["../src/NoteChip.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,aAAa,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAeD,eAAO,MAAM,QAAQ,GAAI,6CAAqD,aAAa,4CAkD1F,CAAA"}
+{"version":3,"file":"NoteChip.d.ts","sourceRoot":"","sources":["../src/NoteChip.tsx"],"names":[],"mappings":"AAMA,OAAO,EAAE,aAAa,EAAE,MAAM,SAAS,CAAA;AAEvC,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,EAAE,aAAa,CAAA;IACnB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,IAAI,CAAA;IAC5C,mBAAmB,CAAC,EAAE,OAAO,CAAA;CAC9B,CAAA;AAeD,eAAO,MAAM,QAAQ,GAAI,6CAAqD,aAAa,4CAwE1F,CAAA"}

package/dist/index.js

@@ -1,5 +1,5 @@
 import { jsx as i, jsxs as S, Fragment as nt } from "react/jsx-runtime";
-import { createContext as $e, useMemo as ae, useContext as ze, useReducer as Ue, useRef as J, useEffect as Z, useState as z, useCallback as q } from "react";
+import { createContext as Ue, useMemo as ae, useContext as $e, useReducer as ze, useRef as J, useEffect as Q, useState as $, useCallback as q } from "react";
 import { createPortal as ot } from "react-dom";
 import { z as d } from "zod";
 import rt from "diff-match-patch";
@@ -103,7 +103,7 @@ d.object({
   deleteNote: d.string()
 });
 var qe = /* @__PURE__ */ ((t) => (t[t.FORWARDS = 1] = "FORWARDS", t[t.BACKWARDS = 2] = "BACKWARDS", t))(qe || {});
-class Q {
+class V {
   constructor(e, n) {
     this.start = e, this.end = n;
   }
@@ -121,17 +121,17 @@ class Q {
     return o.setStart(e.node, e.offset), o.setEnd(n.node, n.offset), o;
   }
   static fromRange(e) {
-    const n = U.fromPoint(e.startContainer, e.startOffset), o = U.fromPoint(e.endContainer, e.endOffset);
-    return !n || !o ? null : new Q(n, o);
+    const n = z.fromPoint(e.startContainer, e.startOffset), o = z.fromPoint(e.endContainer, e.endOffset);
+    return !n || !o ? null : new V(n, o);
   }
   static fromOffsets(e, n, o) {
-    return new Q(new U(e, n), new U(e, o));
+    return new V(new z(e, n), new z(e, o));
   }
   relativeTo(e) {
-    return new Q(this.start.relativeTo(e), this.end.relativeTo(e));
+    return new V(this.start.relativeTo(e), this.end.relativeTo(e));
   }
 }
-class U {
+class z {
   constructor(e, n) {
     n < 0 && console.error("Offset is invalid"), this.element = e, this.offset = n;
   }
@@ -153,9 +153,9 @@ class U {
   static fromCharOffset(e, n) {
     switch (e.nodeType) {
       case Node.TEXT_NODE:
-        return U.fromPoint(e, n);
+        return z.fromPoint(e, n);
       case Node.ELEMENT_NODE:
-        return new U(e, n);
+        return new z(e, n);
       default:
         return console.error("Node is not an element or text node"), null;
     }
@@ -168,7 +168,7 @@ class U {
         if (!e.parentElement)
           return console.error("Text node has no parent"), null;
         const o = Be(e) + n;
-        return new U(e.parentElement, o);
+        return new z(e.parentElement, o);
       }
       case Node.ELEMENT_NODE: {
         if (n < 0 || n > e.childNodes.length)
@@ -176,7 +176,7 @@ class U {
         let o = 0;
         for (let r = 0; r < n; r++)
           o += Ke(e.childNodes[r]);
-        return new U(e, o);
+        return new z(e, o);
       }
       default:
         return console.error("Point is not in an element or text node"), null;
@@ -188,7 +188,7 @@ class U {
     let n = this.element, o = this.offset;
     for (; n !== e; )
       o += Be(n), n.parentElement && (n = n.parentElement);
-    return new U(n, o);
+    return new z(n, o);
   }
 }
 const bt = (t) => {
@@ -268,10 +268,10 @@ class ne {
     const r = Me(n.endContainer, e);
     if (!r)
       return console.error("Failed to resolve endContainer XPath"), null;
-    const s = U.fromCharOffset(o, n.startOffset), l = U.fromCharOffset(r, n.endOffset);
+    const s = z.fromCharOffset(o, n.startOffset), l = z.fromCharOffset(r, n.endOffset);
     if (!s || !l)
       return null;
-    const a = new Q(s, l).toRange();
+    const a = new V(s, l).toRange();
     return a ? new ne(e, a) : null;
   }
   toRange() {
@@ -279,7 +279,7 @@ class ne {
   }
   toSelector() {
     var s;
-    const e = (s = Q.fromRange(this.range)) == null ? void 0 : s.toRange(), n = e && Q.fromRange(e), o = n && Fe(n.start.element, this.root), r = n && Fe(n.end.element, this.root);
+    const e = (s = V.fromRange(this.range)) == null ? void 0 : s.toRange(), n = e && V.fromRange(e), o = n && Fe(n.start.element, this.root), r = n && Fe(n.end.element, this.root);
     return !o || !r ? null : {
       startContainer: o,
       startOffset: n.start.offset,
@@ -294,7 +294,7 @@ class ee {
   }
   static fromRange(e, n) {
     var r;
-    const o = (r = Q.fromRange(n)) == null ? void 0 : r.relativeTo(e);
+    const o = (r = V.fromRange(n)) == null ? void 0 : r.relativeTo(e);
     return o ? new ee(e, o.start.offset, o.end.offset) : null;
   }
   static fromSelector(e, n) {
@@ -307,7 +307,7 @@ class ee {
     };
   }
   toRange() {
-    return Q.fromOffsets(this.root, this.start, this.end).toRange();
+    return V.fromOffsets(this.root, this.start, this.end).toRange();
   }
 }
 const Ke = (t) => {
@@ -348,16 +348,16 @@ const Ke = (t) => {
   if (e.length > 32) {
     const l = e.slice(0, 32), a = e.slice(-32), f = o - n;
     let c = r.match_main(s, l, n);
-    const m = r.match_main(s, a, o), h = m + a.length;
+    const m = r.match_main(s, a, o), g = m + a.length;
     if (c === -1 || m === -1)
       return null;
-    const u = h - c, N = Math.abs(u - f);
-    if ((c > h || N > 5) && (r.Match_Distance = e.length + 100, c = r.match_main(s, l, h), c !== -1 && c < h))
-      return Ct(t, c, h, f);
-    if (c < h && N <= 5)
+    const u = g - c, p = Math.abs(u - f);
+    if ((c > g || p > 5) && (r.Match_Distance = e.length + 100, c = r.match_main(s, l, g), c !== -1 && c < g))
+      return Ct(t, c, g, f);
+    if (c < g && p <= 5)
       return ee.fromSelector(t, {
         start: c,
-        end: h
+        end: g
       });
   } else {
     const l = r.match_main(s, e, n);
@@ -434,25 +434,25 @@ const Ke = (t) => {
     return y >= s && E <= a - s;
   };
   let m;
-  const h = n.right - ue;
-  if (f(h))
-    m = h;
+  const g = n.right - ue;
+  if (f(g))
+    m = g;
   else {
     const y = n.left;
     if (f(y))
       m = y;
     else {
-      const p = (n.left + n.right) / 2 - ue / 2;
-      f(p) ? m = p : h < s ? m = s : m = l - ue - s;
+      const N = (n.left + n.right) / 2 - ue / 2;
+      f(N) ? m = N : g < s ? m = s : m = l - ue - s;
     }
   }
   let u;
-  const N = o.bottom + r;
-  if (c(N))
-    u = N;
+  const p = o.bottom + r;
+  if (c(p))
+    u = p;
   else {
     const y = n.top - de - r;
-    c(y) ? u = y : N + de > a - s ? u = a - de - s : u = s;
+    c(y) ? u = y : p + de > a - s ? u = a - de - s : u = s;
   }
   return { top: u, left: m };
 }, Rt = (t, e) => {
@@ -471,7 +471,7 @@ const Ke = (t) => {
   } catch {
     return !1;
   }
-}, Dt = (t) => {
+}, Lt = (t) => {
   var s;
   if (t.collapsed)
     return [];
@@ -493,35 +493,35 @@ const Ke = (t) => {
     l === t.endContainer && t.endOffset < l.data.length && l.splitText(t.endOffset), n.push(l), r = (o == null ? void 0 : o.nextNode()) || null;
   }
   return n;
-}, Lt = (t, e, n) => {
+}, Dt = (t, e, n) => {
   if (t.collapsed) return;
   const o = e.id ?? "", r = ke(o);
   if (document.getElementById(Oe(o))) {
     At(e, n);
     return;
   }
-  const l = e.type === k.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, f = e.id === e.selectedNoteId ? l : Re(l, 0.5), c = e.type === k.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, m = e.type === k.IMPORTANT ? "solid" : "dashed", h = t.toString(), u = document.createElement("span");
-  u.id = `${r}-start`, u.className = "highlight-marker-start", u.dataset.highlightId = o || "", u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-label", h), u.style.position = "relative", u.style.fontSize = "0", u.style.lineHeight = "0", u.style.width = "0", u.style.height = "0", u.style.margin = "0", u.style.padding = "0", u.style.border = "0";
-  const N = document.createElement("span");
-  N.id = Qe(o), N.className = "highlight-marker-end", N.dataset.highlightId = o || "";
+  const l = e.type === k.IMPORTANT ? n.colors.importantBackground : n.colors.confusingBackground, f = e.id === e.selectedNoteId ? l : Re(l, 0.5), c = e.type === k.IMPORTANT ? n.colors.importantUnderline : n.colors.confusingUnderline, m = e.type === k.IMPORTANT ? "solid" : "dashed", g = t.toString(), u = document.createElement("span");
+  u.id = `${r}-start`, u.className = "highlight-marker-start", u.dataset.highlightId = o || "", u.setAttribute("role", "button"), u.setAttribute("tabindex", "0"), u.setAttribute("aria-label", g), u.style.position = "relative", u.style.fontSize = "0", u.style.lineHeight = "0", u.style.width = "0", u.style.height = "0", u.style.margin = "0", u.style.padding = "0", u.style.border = "0";
+  const p = document.createElement("span");
+  p.id = Qe(o), p.className = "highlight-marker-end", p.dataset.highlightId = o || "";
   const y = t.cloneRange();
-  y.collapse(!1), y.insertNode(N);
+  y.collapse(!1), y.insertNode(p);
   const E = t.cloneRange();
   E.collapse(!0), E.insertNode(u);
-  const p = document.createRange();
-  p.setStartAfter(u), p.setEndBefore(N);
-  const w = Dt(p).filter((b) => b.textContent && b.textContent.length > 0);
+  const N = document.createRange();
+  N.setStartAfter(u), N.setEndBefore(p);
+  const w = Lt(N).filter((b) => b.textContent && b.textContent.length > 0);
   w.forEach((b, C) => {
     var W;
     const O = b.parentElement;
     if ((O == null ? void 0 : O.dataset.highlightId) === o) return;
-    const I = C === 0, B = C === w.length - 1, L = w.length === 1;
+    const I = C === 0, B = C === w.length - 1, D = w.length === 1;
     let P;
-    L ? P = "single" : I ? P = "first" : B ? P = "last" : P = "middle";
+    D ? P = "single" : I ? P = "first" : B ? P = "last" : P = "middle";
     const R = document.createElement("span");
-    R.className = "highlight-content", R.dataset.highlightId = o || "", R.dataset.position = P, R.style.backgroundColor = f, R.style.textDecorationLine = "underline", R.style.textDecorationColor = c, R.style.textDecorationStyle = m, R.style.textDecorationThickness = n.borderWidthSmall, R.style.textUnderlineOffset = n.underlineOffset, R.style.cursor = "pointer", R.addEventListener("click", (Y) => {
+    R.className = "highlight-content", R.dataset.highlightId = o || "", R.dataset.position = P, R.style.backgroundColor = f, R.style.textDecorationLine = "underline", R.style.textDecorationColor = c, R.style.textDecorationStyle = m, R.style.textDecorationThickness = n.borderWidthSmall, R.style.textUnderlineOffset = n.underlineOffset, R.style.cursor = "pointer", R.addEventListener("click", (Z) => {
       var A;
-      Y.target.tagName !== "A" && ((A = e.onClick) == null || A.call(e));
+      Z.target.tagName !== "A" && ((A = e.onClick) == null || A.call(e));
     }), (W = b.parentNode) == null || W.insertBefore(R, b), R.appendChild(b);
   }), u.addEventListener("click", (b) => {
     var C;
@@ -633,12 +633,12 @@ function Bt(t) {
     }
   });
 }
-const Ht = "Notebook", jt = "Notes", $t = "Important", zt = "Unclear", Ut = "Back", Gt = "Edit note", Wt = "Save", qt = "Cancel", Kt = "Delete note", Xt = "note", Qt = "Add note (optional)", Vt = "Remove from Notebook", Yt = "Add a note (optional)", Zt = "Mark important", Jt = "Mark unclear", en = "Saved to Notebook.", tn = "Note updated", nn = "Note deleted", on = "Error saving to Notebook.", rn = "Error updating note", sn = "Note deletion failed", ln = "Loading notes", an = "Failed to load notes", cn = "Start capturing your notes", dn = "Your notes from learning materials will appear here. Highlight key ideas, reflections, or questions as you learn—they'll all be saved in your Notebook for easy review later.", un = "Nothing here yet", fn = "Adjust your filters or create a new note to get started.", mn = "You have no notes for the selected filter", gn = "Previous page", hn = "Next page", pn = "All courses", Nn = "All notes", yn = "Close Notebook panel", bn = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", En = "The content you highlighted is no longer available.", Pe = {
+const Ht = "Notebook", jt = "Notes", Ut = "Important", $t = "Unclear", zt = "Back", Gt = "Edit note", Wt = "Save", qt = "Cancel", Kt = "Delete note", Xt = "note", Qt = "Add note (optional)", Vt = "Remove from Notebook", Yt = "Add a note (optional)", Zt = "Mark important", Jt = "Mark unclear", en = "Saved to Notebook.", tn = "Note updated", nn = "Note deleted", on = "Error saving to Notebook.", rn = "Error updating note", sn = "Note deletion failed", ln = "Loading notes", an = "Failed to load notes", cn = "Start capturing your notes", dn = "Your notes from learning materials will appear here. Highlight key ideas, reflections, or questions as you learn—they'll all be saved in your Notebook for easy review later.", un = "Nothing here yet", fn = "Adjust your filters or create a new note to get started.", mn = "You have no notes for the selected filter", gn = "Previous page", hn = "Next page", pn = "All courses", Nn = "All notes", yn = "Close Notebook panel", bn = "To use the Notebook feature, highlight an excerpt from your learning material to flag it as 'confusing' or 'important' and leave an optional note.", En = "The content you highlighted is no longer available.", Pe = {
   notebook: Ht,
   notes: jt,
-  important: $t,
-  unclear: zt,
-  back: Ut,
+  important: Ut,
+  unclear: $t,
+  back: zt,
   editNote: Gt,
   save: Wt,
   cancel: qt,
@@ -669,7 +669,7 @@ const Ht = "Notebook", jt = "Notes", $t = "Important", zt = "Unclear", Ut = "Bac
   closeNotebookPanel: yn,
   featureDescription: bn,
   highlightUnavailable: En
-}, Ve = $e(null);
+}, Ve = Ue(null);
 function Ye(t, e) {
   const n = Pe[t] ?? t;
   return e ? n.replace(/%\{([^}]+)}/g, (o, r) => String(e[r] ?? `%{${r}}`)) : n;
@@ -688,8 +688,8 @@ function Sn({
   );
   return /* @__PURE__ */ i(Ve.Provider, { value: o, children: n });
 }
-function V() {
-  const t = ze(Ve);
+function Y() {
+  const t = $e(Ve);
   return t || { translations: Pe, translate: Ye };
 }
 const vn = (t) => ({
@@ -717,7 +717,7 @@ function Tn(t, e) {
       return t;
   }
 }
-const Ze = $e(null);
+const Ze = Ue(null);
 function no({
   api: t,
   currentUserId: e,
@@ -730,9 +730,9 @@ function no({
   initialNoteId: f,
   translations: c,
   translate: m,
-  children: h
+  children: g
 }) {
-  const [u, N] = Ue(Tn, vn(f)), y = J(f != null), E = ae(
+  const [u, p] = ze(Tn, vn(f)), y = J(f != null), E = ae(
     () => ({
       api: t,
       currentUserId: e,
@@ -742,14 +742,14 @@ function no({
       pageLastModifiedAt: s,
       onAnalyticsEvent: l,
       ...u,
-      selectNote: (p, _ = !1) => N({ type: "SELECT_NOTE", payload: { id: p, isEditing: _ } }),
-      clearSelectedNote: () => N({ type: "CLEAR_SELECTED_NOTE" }),
-      setEditing: (p) => N({ type: "SET_EDITING", payload: p }),
+      selectNote: (N, _ = !1) => p({ type: "SELECT_NOTE", payload: { id: N, isEditing: _ } }),
+      clearSelectedNote: () => p({ type: "CLEAR_SELECTED_NOTE" }),
+      setEditing: (N) => p({ type: "SET_EDITING", payload: N }),
       openTray: () => {
-        y.current || (y.current = !0, a == null || a()), N({ type: "OPEN_TRAY" });
+        y.current || (y.current = !0, a == null || a()), p({ type: "OPEN_TRAY" });
       },
       closeTray: () => {
-        y.current = !1, N({ type: "CLOSE_TRAY" });
+        y.current = !1, p({ type: "CLOSE_TRAY" });
       }
     }),
     [
@@ -764,17 +764,17 @@ function no({
       u
     ]
   );
-  return /* @__PURE__ */ i(Ze.Provider, { value: E, children: /* @__PURE__ */ i(Sn, { translations: c, translate: m, children: h }) });
+  return /* @__PURE__ */ i(Ze.Provider, { value: E, children: /* @__PURE__ */ i(Sn, { translations: c, translate: m, children: g }) });
 }
 function Je() {
-  const t = ze(Ze);
+  const t = $e(Ze);
   if (!t)
     throw new Error("useNotebook must be used within a NotebookProvider");
   return t;
 }
 const Cn = ({ currentType: t, onSelectReaction: e }) => {
-  const { translations: n } = V(), o = J(null), r = J(null);
-  return Z(() => {
+  const { translations: n } = Y(), o = J(null), r = J(null);
+  return Q(() => {
     t === k.CONFUSING && o.current ? o.current.focus() : t === k.IMPORTANT && r.current ? r.current.focus() : o.current && o.current.focus();
   }, [t]), /* @__PURE__ */ i(
     G,
@@ -826,9 +826,9 @@ function oo({
     objectType: f,
     courseId: c,
     pageLastModifiedAt: m,
-    selectedNoteId: h,
+    selectedNoteId: g,
     selectNote: u,
-    openTray: N
+    openTray: p
   } = Je(), { data: y } = Ee({
     api: l,
     filter: {
@@ -836,105 +836,105 @@ function oo({
     },
     courseId: c,
     pageSize: 100
-  }), { mutate: E } = Ft(l), { mutateAsync: p } = Bt(l), { mutate: _ } = Mt(l), w = J([]), [b, C] = z([]), [O, I] = z(null), [B, L] = z(""), [P, R] = z(null), [W, Y] = z(!1);
-  Z(() => {
-    const g = t.current;
-    if (!g) return;
-    const v = g.closest(".user_content") ?? g;
+  }), { mutate: E } = Ft(l), { mutateAsync: N } = Bt(l), { mutate: _ } = Mt(l), w = J([]), [b, C] = $([]), [O, I] = $(null), [B, D] = $(""), [P, R] = $(null), [W, Z] = $(!1);
+  Q(() => {
+    const h = t.current;
+    if (!h) return;
+    const v = h.closest(".user_content") ?? h;
     if (v.classList.contains("enhanced")) {
-      Y(!0);
+      Z(!0);
       return;
     }
     const j = new MutationObserver((F) => {
-      for (const $ of F)
-        if ($.type === "attributes" && $.attributeName === "class" && $.target.classList.contains("enhanced")) {
-          Y(!0), j.disconnect();
+      for (const U of F)
+        if (U.type === "attributes" && U.attributeName === "class" && U.target.classList.contains("enhanced")) {
+          Z(!0), j.disconnect();
           return;
         }
     });
     return j.observe(v, { attributes: !0, attributeFilter: ["class"] }), () => j.disconnect();
   }, [t]);
   const A = q(() => {
-    R(null), I(null), L("");
+    R(null), I(null), D("");
   }, []);
-  Z(() => {
+  Q(() => {
     if (!W || !t.current) return;
     let v = null;
     const j = () => {
       v && clearTimeout(v), v = setTimeout(() => {
-        var Le;
+        var De;
         const x = window.getSelection(), M = t.current;
         if (!(x != null && x.rangeCount) || !M) return;
         const oe = x.toString().trim();
         if (oe === "") return;
         const ce = x.getRangeAt(0);
         if (!M.contains(ce.commonAncestorContainer)) return;
-        const De = (Le = ee.fromRange(M, ce)) == null ? void 0 : Le.toSelector();
-        De && !Rt(De, b) && (I(ce.cloneRange()), L(oe), R(Ot(ce)));
+        const Le = (De = ee.fromRange(M, ce)) == null ? void 0 : De.toSelector();
+        Le && !Rt(Le, b) && (I(ce.cloneRange()), D(oe), R(Ot(ce)));
       }, n);
     }, F = (x) => {
       if (!(x.target instanceof Node)) return;
       const M = document.getElementById(pe);
       M != null && M.contains(x.target) ? (x.preventDefault(), x.stopImmediatePropagation()) : A();
-    }, $ = () => {
+    }, U = () => {
       A();
-    }, D = (x) => {
+    }, L = (x) => {
       x.key === "Escape" && A();
     };
-    return document.addEventListener("selectionchange", j), document.addEventListener("mousedown", F), document.addEventListener("touchstart", F), document.addEventListener("keydown", D), window.addEventListener("scroll", $, !0), () => {
-      v && clearTimeout(v), document.removeEventListener("selectionchange", j), document.removeEventListener("mousedown", F), document.removeEventListener("touchstart", F), document.removeEventListener("keydown", D), window.removeEventListener("scroll", $, !0);
+    return document.addEventListener("selectionchange", j), document.addEventListener("mousedown", F), document.addEventListener("touchstart", F), document.addEventListener("keydown", L), window.addEventListener("scroll", U, !0), () => {
+      v && clearTimeout(v), document.removeEventListener("selectionchange", j), document.removeEventListener("mousedown", F), document.removeEventListener("touchstart", F), document.removeEventListener("keydown", L), window.removeEventListener("scroll", U, !0);
     };
   }, [W, b, n, t, A]);
   const H = q(
-    (g) => {
+    (h) => {
       var M;
       const v = t.current;
-      if (!v || !g.highlightData) return null;
-      const { highlightData: j, reaction: F, id: $ } = g, { range: D } = j, x = D && ((M = ne.fromSelector(v, D)) == null ? void 0 : M.toRange());
+      if (!v || !h.highlightData) return null;
+      const { highlightData: j, reaction: F, id: U } = h, { range: L } = j, x = L && ((M = ne.fromSelector(v, L)) == null ? void 0 : M.toRange());
       if (x) {
         const oe = {
-          id: $,
-          selectedNoteId: h,
+          id: U,
+          selectedNoteId: g,
           type: F[0],
           onClick: () => {
-            u($), N();
+            u(U), p();
           }
         };
-        return Lt(x, oe, e), j.textPosition;
+        return Dt(x, oe, e), j.textPosition;
       }
       return null;
     },
-    [t, h, e, u, N]
+    [t, g, e, u, p]
   );
-  Z(() => {
+  Q(() => {
     if (!W || !y || !t.current) return;
-    const g = t.current, v = y.notes, j = /* @__PURE__ */ new Set(), F = [], $ = [];
+    const h = t.current, v = y.notes, j = /* @__PURE__ */ new Set(), F = [], U = [];
     if (v.length === 0) {
       if (w.current.length > 0) {
-        for (const D of w.current)
-          He(D, g);
+        for (const L of w.current)
+          He(L, h);
         w.current = [], C([]);
       }
       return;
     }
     if (m && v[0].highlightData.pageLastModifiedAt !== m) {
-      const { notesForUpdate: D, noteIdsForDelete: x } = wt(
-        g,
+      const { notesForUpdate: L, noteIdsForDelete: x } = wt(
+        h,
         v,
         m
       );
-      for (const M of D)
-        p({ id: M.id, input: M }).catch((oe) => r == null ? void 0 : r(oe));
+      for (const M of L)
+        N({ id: M.id, input: M }).catch((oe) => r == null ? void 0 : r(oe));
       for (const M of x)
         _(M, { onError: s });
     } else {
-      for (const D of v) {
-        const x = H(D);
-        j.add(D.id), x && (F.push(D), $.push(x));
+      for (const L of v) {
+        const x = H(L);
+        j.add(L.id), x && (F.push(L), U.push(x));
       }
-      for (const D of w.current)
-        j.has(D.id) || He(D, g);
-      C($), w.current = F, h && kt(h);
+      for (const L of w.current)
+        j.has(L.id) || He(L, h);
+      C(U), w.current = F, g && kt(g);
     }
   }, [
     W,
@@ -942,11 +942,11 @@ function oo({
     H,
     m,
     t,
-    p,
+    N,
     _,
-    h
+    g
   ]);
-  const te = (g) => {
+  const te = (h) => {
     const v = t.current;
     if (!O || !v) return;
     const j = ne.fromRange(v, O), F = ee.fromRange(v, O);
@@ -956,7 +956,7 @@ function oo({
         objectId: a,
         objectType: f,
         userText: "",
-        reaction: [g],
+        reaction: [h],
         highlightData: {
           selectedText: B,
           textPosition: (F == null ? void 0 : F.toSelector()) ?? null,
@@ -965,10 +965,10 @@ function oo({
         }
       },
       {
-        onSuccess: ($) => {
+        onSuccess: (U) => {
           var x;
-          const D = $.id;
-          A(), (x = window.getSelection()) == null || x.removeAllRanges(), u(D), N();
+          const L = U.id;
+          A(), (x = window.getSelection()) == null || x.removeAllRanges(), u(L), p();
         },
         onError: o
       }
@@ -987,9 +987,9 @@ function oo({
           left: P.left,
           whiteSpace: "nowrap"
         },
-        onBlur: (g) => {
+        onBlur: (h) => {
           const v = document.getElementById(pe);
-          v != null && v.contains(g.relatedTarget) || A();
+          v != null && v.contains(h.relatedTarget) || A();
         },
         children: /* @__PURE__ */ i(Cn, { onSelectReaction: te })
       }
@@ -1019,7 +1019,7 @@ const In = (t, e) => ({
   };
   return /* @__PURE__ */ i("span", { "data-note-highlight": "true", style: l, children: t });
 }, et = () => {
-  const { translations: t } = V();
+  const { translations: t } = Y();
   return /* @__PURE__ */ S(T, { gap: "xx-small", alignItems: "start", as: "div", children: [
     /* @__PURE__ */ i(T.Item, { as: "div", children: /* @__PURE__ */ i(it, { color: "error" }) }),
     /* @__PURE__ */ i(T.Item, { padding: "xxx-small none", shouldShrink: !0, children: /* @__PURE__ */ i(be, { maxLines: 3, children: t.highlightUnavailable }) })
@@ -1066,18 +1066,18 @@ function ro({
   pageSize: r = 16,
   focusNoteId: s
 }) {
-  const [l, a] = Ue(kn, wn), { filter: f, courseFilter: c, currentPage: m, totalPages: h } = l;
-  Z(() => {
+  const [l, a] = ze(kn, wn), { filter: f, courseFilter: c, currentPage: m, totalPages: g } = l;
+  Q(() => {
     a({ type: "SET_PAGE", payload: 1 });
   }, [r]);
-  const u = n ? c : e, N = (m - 1) * r, y = {
+  const u = n ? c : e, p = (m - 1) * r, y = {
     ...u ? { courseId: u } : {},
     ...f ? { reactions: [f] } : {},
     ...o ? { learningObject: o } : {}
-  }, { data: E, isLoading: p, isError: _ } = Ee({
+  }, { data: E, isLoading: N, isError: _ } = Ee({
     api: t,
     filter: y,
-    offset: N,
+    offset: p,
     pageSize: r
   }), { data: w } = Ee({
     api: t,
@@ -1086,22 +1086,22 @@ function ro({
     pageSize: xn,
     enabled: !!s
   }), b = J(null);
-  Z(() => {
+  Q(() => {
     if (!s) {
       b.current = null;
       return;
     }
     if (b.current === s) return;
-    const H = (w == null ? void 0 : w.notes.findIndex((g) => g.id === s)) ?? -1;
+    const H = (w == null ? void 0 : w.notes.findIndex((h) => h.id === s)) ?? -1;
     if (H === -1) return;
     b.current = s;
     const te = Math.floor(H / r) + 1;
     te !== m && a({ type: "FOCUS_PAGE", payload: te });
   }, [s, w, r, m]);
-  const C = (E == null ? void 0 : E.notes) ?? [], O = E == null ? void 0 : E.pageInfo, I = (O == null ? void 0 : O.totalNrOfPages) ?? void 0, B = s && w ? Math.ceil(w.notes.length / r) : void 0, L = I === void 0 && B === void 0 ? void 0 : Math.max(I ?? 0, B ?? 0);
-  Z(() => {
-    a({ type: "SET_TOTAL_PAGES", payload: L });
-  }, [L]);
+  const C = (E == null ? void 0 : E.notes) ?? [], O = E == null ? void 0 : E.pageInfo, I = (O == null ? void 0 : O.totalNrOfPages) ?? void 0, B = s && w ? Math.ceil(w.notes.length / r) : void 0, D = I === void 0 && B === void 0 ? void 0 : Math.max(I ?? 0, B ?? 0);
+  Q(() => {
+    a({ type: "SET_TOTAL_PAGES", payload: D });
+  }, [D]);
   const P = q((H) => {
     a({ type: "SET_PAGE", payload: H });
   }, []), R = q(() => {
@@ -1114,7 +1114,7 @@ function ro({
       type: "DECREMENT_PAGE"
       /* DecrementPage */
     });
-  }, []), Y = q((H) => {
+  }, []), Z = q((H) => {
     a({ type: "SET_FILTER", payload: H });
   }, []), A = q((H) => {
     a({ type: "SET_COURSE_FILTER", payload: H });
@@ -1122,13 +1122,13 @@ function ro({
   return {
     notes: C,
     pageInfo: O,
-    isLoading: p,
+    isLoading: N,
     isError: _,
     filter: f,
     courseFilter: c,
     currentPage: m,
-    totalPages: h,
-    setFilter: Y,
+    totalPages: g,
+    setFilter: Z,
     setCourseFilter: A,
     setPage: P,
     fetchNextPage: R,
@@ -1137,7 +1137,7 @@ function ro({
 }
 const Ne = "all";
 function so({ filter: t, setFilter: e }) {
-  const { translations: n } = V(), o = ae(
+  const { translations: n } = Y(), o = ae(
     () => [
       { label: n.allNotes, value: Ne },
       { label: n.important, value: k.IMPORTANT },
@@ -1168,14 +1168,14 @@ function so({ filter: t, setFilter: e }) {
   };
 }
 const On = ({ hasActiveFilter: t = !1 }) => {
-  const { translations: e } = V(), n = t ? e.nothingHereYet : e.emptyStateHeading, o = t ? e.adjustFiltersOrCreate : e.emptyStateDescription;
+  const { translations: e } = Y(), n = t ? e.nothingHereYet : e.emptyStateHeading, o = t ? e.adjustFiltersOrCreate : e.emptyStateDescription;
   return /* @__PURE__ */ i(G, { as: "div", textAlign: "center", children: /* @__PURE__ */ S(T, { direction: "column", alignItems: "center", gap: "small", children: [
     !t && /* @__PURE__ */ i(lt, { size: "medium" }),
     /* @__PURE__ */ i(ge, { level: "h3", children: n }),
     /* @__PURE__ */ i(K, { color: "secondary", children: o })
   ] }) });
 }, io = ({ children: t }) => {
-  const { isTrayOpen: e, closeTray: n } = Je(), { translations: o } = V();
+  const { isTrayOpen: e, closeTray: n } = Je(), { translations: o } = Y();
   return /* @__PURE__ */ i(
     dt,
     {
@@ -1213,18 +1213,28 @@ const On = ({ hasActiveFilter: t = !1 }) => {
     icon: /* @__PURE__ */ i(Ce, { size: "x-small" })
   }
 }, tt = ({ type: t, onTypeChange: e, renderAsMenuTrigger: n = !1 }) => {
-  const { translations: o } = V(), r = Rn[t], s = o[r.translationKey], [l, a] = z(!1), f = J(null), c = J(null), m = q(
-    (h) => {
-      e == null || e(h), a(!1);
+  const { translations: o } = Y(), r = Rn[t], s = o[r.translationKey], [l, a] = $(!1), f = J(null), c = J(null), m = q(
+    (g) => {
+      e == null || e(g), a(!1);
     },
     [e]
   );
-  return n && e ? /* @__PURE__ */ S(
+  return Q(() => {
+    if (!l) return;
+    const g = (p) => {
+      p.key === "Escape" && p.stopPropagation();
+    }, u = (p) => {
+      p.key === "Escape" && (p.stopPropagation(), a(!1));
+    };
+    return document.addEventListener("keydown", g, !0), document.addEventListener("keyup", u, !0), () => {
+      document.removeEventListener("keydown", g, !0), document.removeEventListener("keyup", u, !0);
+    };
+  }, [l]), n && e ? /* @__PURE__ */ S(
     re,
     {
       placement: "bottom start",
       show: l,
-      onToggle: (h) => a(h),
+      onToggle: (g) => a(g),
       shouldHideOnSelect: !0,
       shouldFocusTriggerOnClose: !0,
       trigger: /* @__PURE__ */ i(_e, { color: r.color, renderIcon: r.icon, children: s }),
@@ -1260,23 +1270,23 @@ const Pn = ({
   onTypeChange: f,
   isActive: c,
   isPanelView: m = !1,
-  courseName: h,
+  courseName: g,
   locale: u,
-  highlightTheme: N,
+  highlightTheme: p,
   renderLink: y,
   href: E
 }) => {
-  const { translations: p } = V(), [_, w] = z(!1), [b, C] = z(!1), [O, I] = z(o || ""), [B, L] = z(!1), P = J(null), R = q((g) => {
-    P.current = g;
+  const { translations: N } = Y(), [_, w] = $(!1), [b, C] = $(!1), [O, I] = $(o || ""), [B, D] = $(!1), P = J(null), R = q((h) => {
+    P.current = h;
   }, []);
-  Z(() => {
-    var g, v;
-    c && ((g = P.current) == null || g.scrollIntoView({ behavior: "smooth", block: "nearest" }), (v = P.current) == null || v.focus());
+  Q(() => {
+    var h, v;
+    c && ((h = P.current) == null || h.scrollIntoView({ behavior: "smooth", block: "nearest" }), (v = P.current) == null || v.focus());
   }, [c]);
-  const W = r === k.IMPORTANT ? p.important : p.unclear, Y = (g) => {
-    g.key === "Enter" && (g.preventDefault(), s == null || s());
-  }, A = [W, p.note];
-  n && A.push(n), o && A.push(o), e && A.push(je(e, u)), h && A.push(h);
+  const W = r === k.IMPORTANT ? N.important : N.unclear, Z = (h) => {
+    h.key === "Enter" && (h.preventDefault(), s == null || s());
+  }, A = [W, N.note];
+  n && A.push(n), o && A.push(o), e && A.push(je(e, u)), g && A.push(g);
   const H = A.join(", "), te = /* @__PURE__ */ S(
     G,
     {
@@ -1294,7 +1304,7 @@ const Pn = ({
       onClick: c ? void 0 : s,
       onMouseEnter: () => w(!0),
       onMouseLeave: () => w(!1),
-      onKeyDown: c ? void 0 : Y,
+      onKeyDown: c ? void 0 : Z,
       cursor: b ? "default" : "pointer",
       children: [
         /* @__PURE__ */ S(T, { direction: "column", gap: "small", children: [
@@ -1302,7 +1312,7 @@ const Pn = ({
             tt,
             {
               type: r,
-              onTypeChange: m && f ? (g) => f(t, g) : void 0,
+              onTypeChange: m && f ? (h) => f(t, h) : void 0,
               renderAsMenuTrigger: m && !!f && !!c
             }
           ),
@@ -1311,7 +1321,7 @@ const Pn = ({
             {
               type: r,
               isCardActive: !!c || _,
-              theme: N,
+              theme: p,
               children: n
             }
           ) : /* @__PURE__ */ i(be, { maxLines: 3, truncate: "word", children: /* @__PURE__ */ i(
@@ -1319,7 +1329,7 @@ const Pn = ({
             {
               type: r,
               isCardActive: !!c || _,
-              theme: N,
+              theme: p,
               children: n
             }
           ) }) }) }) : /* @__PURE__ */ i(et, {}),
@@ -1328,10 +1338,10 @@ const Pn = ({
               /* @__PURE__ */ i(
                 We,
                 {
-                  label: /* @__PURE__ */ i(Ge, { children: p.editNote }),
+                  label: /* @__PURE__ */ i(Ge, { children: N.editNote }),
                   value: O,
-                  onChange: (g) => I(g.target.value),
-                  placeholder: p.addNoteOptional
+                  onChange: (h) => I(h.target.value),
+                  placeholder: N.addNoteOptional
                 }
               ),
               /* @__PURE__ */ S(T, { gap: "xx-small", children: [
@@ -1344,7 +1354,7 @@ const Pn = ({
                     onClick: () => {
                       I(o || ""), C(!1);
                     },
-                    children: p.cancel
+                    children: N.cancel
                   }
                 ) }),
                 /* @__PURE__ */ i(T.Item, { shouldGrow: !0, children: /* @__PURE__ */ i(
@@ -1357,7 +1367,7 @@ const Pn = ({
                     onClick: () => {
                       a == null || a(t, O.trim()), C(!1);
                     },
-                    children: p.save
+                    children: N.save
                   }
                 ) })
               ] })
@@ -1370,16 +1380,16 @@ const Pn = ({
                   size: "small",
                   withBackground: !1,
                   withBorder: !1,
-                  screenReaderLabel: p.editNote,
+                  screenReaderLabel: N.editNote,
                   "data-testid": `note-card-${t}-edit`,
-                  onClick: (g) => {
-                    g.stopPropagation(), C(!0);
+                  onClick: (h) => {
+                    h.stopPropagation(), C(!0);
                   },
                   children: /* @__PURE__ */ i(ye, {})
                 }
               )
             ] }) : /* @__PURE__ */ i(K, { children: /* @__PURE__ */ i(be, { maxLines: 3, truncate: "word", children: o }) }) }) : m && c ? /* @__PURE__ */ i("div", { children: /* @__PURE__ */ S(K, { color: "secondary", children: [
-              p.addNotePrompt,
+              N.addNotePrompt,
               " ",
               /* @__PURE__ */ i(
                 ie,
@@ -1387,10 +1397,10 @@ const Pn = ({
                   size: "small",
                   withBackground: !1,
                   withBorder: !1,
-                  screenReaderLabel: p.editNote,
+                  screenReaderLabel: N.editNote,
                   "data-testid": `note-card-${t}-edit`,
-                  onClick: (g) => {
-                    g.stopPropagation(), C(!0);
+                  onClick: (h) => {
+                    h.stopPropagation(), C(!0);
                   },
                   children: /* @__PURE__ */ i(ye, {})
                 }
@@ -1405,16 +1415,16 @@ const Pn = ({
                   withBackground: !1,
                   withBorder: !1,
                   color: "danger",
-                  screenReaderLabel: p.deleteNote,
+                  screenReaderLabel: N.deleteNote,
                   "data-testid": `note-card-${t}-delete`,
-                  onClick: (g) => {
-                    g.stopPropagation(), L(!0);
+                  onClick: (h) => {
+                    h.stopPropagation(), D(!0);
                   },
                   children: /* @__PURE__ */ i(me, {})
                 }
               )
             ] }),
-            h && /* @__PURE__ */ i(K, { size: "small", color: "secondary", children: h })
+            g && /* @__PURE__ */ i(K, { size: "small", color: "secondary", children: g })
           ] })
         ] }),
         B && l && /* @__PURE__ */ i(
@@ -1447,10 +1457,10 @@ const Pn = ({
                       size: "small",
                       renderIcon: /* @__PURE__ */ i(me, {}),
                       "data-testid": `note-card-${t}-confirm-delete`,
-                      onClick: (g) => {
-                        g.stopPropagation(), l(t), L(!1);
+                      onClick: (h) => {
+                        h.stopPropagation(), l(t), D(!1);
                       },
-                      children: p.deleteNote
+                      children: N.deleteNote
                     }
                   ),
                   /* @__PURE__ */ i(
@@ -1459,10 +1469,10 @@ const Pn = ({
                       display: "block",
                       size: "small",
                       "data-testid": `note-card-${t}-cancel-delete`,
-                      onClick: (g) => {
-                        g.stopPropagation(), L(!1);
+                      onClick: (h) => {
+                        h.stopPropagation(), D(!1);
                       },
-                      children: p.cancel
+                      children: N.cancel
                     }
                   )
                 ]
@@ -1475,13 +1485,13 @@ const Pn = ({
   );
   return E && y ? y({ href: E, children: te, ariaLabel: H }) : te;
 };
-function Dn(t, e) {
+function Ln(t, e) {
   const n = Array.from({ length: e }, () => []);
   return t.forEach((o, r) => {
     n[r % e].push(o);
   }), n;
 }
-const Ln = {
+const Dn = {
   display: "flex",
   gap: "1rem",
   boxSizing: "border-box",
@@ -1505,15 +1515,15 @@ const Ln = {
   onNoteSave: f,
   onNoteTypeChange: c,
   selectedNoteId: m,
-  hasActiveFilter: h = !1,
+  hasActiveFilter: g = !1,
   columnCount: u = 1,
-  highlightTheme: N,
+  highlightTheme: p,
   locale: y,
   renderNoteLink: E,
-  noteHref: p
+  noteHref: N
 }) => {
-  const { translations: _ } = V(), w = ae(
-    () => Dn(t, u),
+  const { translations: _ } = Y(), w = ae(
+    () => Ln(t, u),
     [t, u]
   );
   if (e)
@@ -1521,10 +1531,10 @@ const Ln = {
   if (n)
     return /* @__PURE__ */ i(G, { as: "div", textAlign: "center", padding: "large", "data-testid": "notes-error", children: /* @__PURE__ */ i(ge, { level: "h4", children: _.failedToLoadNotes }) });
   if (t.length === 0)
-    return /* @__PURE__ */ i(G, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ i(On, { hasActiveFilter: h }) });
+    return /* @__PURE__ */ i(G, { as: "div", padding: "large", "data-testid": "empty-notes", children: /* @__PURE__ */ i(On, { hasActiveFilter: g }) });
   const b = typeof o == "number" && typeof r == "number" && r > 1 && s !== void 0;
   return /* @__PURE__ */ S(nt, { children: [
-    /* @__PURE__ */ i("div", { style: Ln, "data-testid": "notes-grid", children: w.map((C, O) => (
+    /* @__PURE__ */ i("div", { style: Dn, "data-testid": "notes-grid", children: w.map((C, O) => (
       // oxlint-disable-next-line react/no-array-index-key -- columns are positional, index is stable
       /* @__PURE__ */ i("div", { style: An, children: C.map((I) => {
         var B;
@@ -1539,13 +1549,13 @@ const Ln = {
             isActive: m === I.id,
             isPanelView: !!m,
             onClick: l ? () => l(I.id) : void 0,
-            onDelete: a ? (L) => a(L) : void 0,
-            onSaveNote: f ? (L, P) => f(L, P) : void 0,
-            onTypeChange: c ? (L, P) => c(L, P) : void 0,
-            highlightTheme: N,
+            onDelete: a ? (D) => a(D) : void 0,
+            onSaveNote: f ? (D, P) => f(D, P) : void 0,
+            onTypeChange: c ? (D, P) => c(D, P) : void 0,
+            highlightTheme: p,
             locale: y,
             renderLink: E,
-            href: p ? p(I.id, I) : void 0
+            href: N ? N(I.id, I) : void 0
           },
           I.id
         );
@@ -1575,7 +1585,7 @@ const Ln = {
   onBack: a,
   editing: f = !1
 }) => {
-  const { translations: c } = V(), [m, h] = z(f), [u, N] = z(t || ""), [y, E] = z(!1);
+  const { translations: c } = Y(), [m, g] = $(f), [u, p] = $(t || ""), [y, E] = $(!1);
   return /* @__PURE__ */ S(T, { direction: "column", gap: "small", "data-testid": "single-note", children: [
     n != null ? /* @__PURE__ */ i(G, { as: "div", children: /* @__PURE__ */ i(K, { children: /* @__PURE__ */ i(Se, { type: e, isCardActive: !0, theme: o, children: n }) }) }) : /* @__PURE__ */ i(et, {}),
     /* @__PURE__ */ i(tt, { type: e, onTypeChange: l, renderAsMenuTrigger: !!l }),
@@ -1585,7 +1595,7 @@ const Ln = {
         {
           label: c.addNoteOptional,
           value: u,
-          onChange: (p) => N(p.target.value),
+          onChange: (N) => p(N.target.value),
           resize: "vertical"
         }
       ),
@@ -1597,7 +1607,7 @@ const Ln = {
             size: "small",
             "data-testid": "single-note-cancel",
             onClick: () => {
-              N(t || ""), h(!1);
+              p(t || ""), g(!1);
             },
             children: c.cancel
           }
@@ -1610,7 +1620,7 @@ const Ln = {
             size: "small",
             "data-testid": "single-note-save",
             onClick: () => {
-              r(u), h(!1);
+              r(u), g(!1);
             },
             children: c.save
           }
@@ -1654,7 +1664,7 @@ const Ln = {
               withBorder: !1,
               screenReaderLabel: c.editNote,
               "data-testid": "single-note-edit",
-              onClick: () => h(!0),
+              onClick: () => g(!0),
               children: /* @__PURE__ */ i(ye, {})
             }
           )
@@ -1708,7 +1718,7 @@ export {
   Mt as useDeleteNote,
   Ee as useGetNotes,
   Je as useNotebook,
-  V as useNotebookTranslations,
+  Y as useNotebookTranslations,
   ro as useNotesData,
   so as useReactionFilter,
   Bt as useUpdateNote

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/platform-notebook",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "type": "module",
   "main": "./dist/index.js",
   "module": "./dist/index.js",