@box/threaded-annotations 3.0.6 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -7,44 +7,46 @@ import s from "clsx";
7
7
  import { useCallback as c, useEffect as l, useMemo as u, useRef as d } from "react";
8
8
  import { jsx as f, jsxs as p } from "react/jsx-runtime";
9
9
  import '../styles/threaded-annotations2.css';var m = {
10
- threadedAnnotations: "_threadedAnnotations_1ujic_1",
11
- expandable: "_expandable_1ujic_10",
12
- annotations: "_annotations_1ujic_18"
13
- }, h = ({ messages: r, isResolved: h = !1, resolvedBy: g, resolvedAt: _, maxCharacterCount: v, onDelete: y, onThreadDelete: b, onAvatarClick: x, onCopyLink: S, onEdit: C, onEditError: w, onResolve: T, onUnresolve: E, onPost: D, onPostError: O, userSelectorProps: k, onEditorOpenChange: A, annotationTarget: j, onAnnotationBadgeClick: M, originalContentDeleted: N }) => {
14
- let { viewState: P, dispatch: F, editingMessageId: I, replyMention: L, isReplyDisabled: R, isAnnotations: z } = i(), B = d(null), V = P !== n.Collapsed, H = r.length > 2, U = P === n.Collapsed && (H || !R && !h);
10
+ threadedAnnotations: "_threadedAnnotations_16hhz_1",
11
+ expandable: "_expandable_16hhz_10",
12
+ annotations: "_annotations_16hhz_18",
13
+ highlighted: "_highlighted_16hhz_18"
14
+ }, h = ({ messages: r, isResolved: h = !1, resolvedBy: g, resolvedAt: _, maxCharacterCount: v, onDelete: y, onThreadDelete: b, onAvatarClick: x, onCopyLink: S, onEdit: C, onEditError: w, onResolve: T, onUnresolve: E, onPost: D, onPostError: O, userSelectorProps: k, onEditorOpenChange: A, annotationTarget: j, onAnnotationBadgeClick: M, originalContentDeleted: N, isHighlighted: P = !1 }) => {
15
+ let { viewState: F, dispatch: I, editingMessageId: L, replyMention: R, isReplyDisabled: z, isAnnotations: B } = i(), V = d(null), H = F !== n.Collapsed, U = r.length > 2, W = F === n.Collapsed && (U || !z && !h);
15
16
  l(() => {
16
- I && !r.some((e) => e.id === I) && F({ type: "CLEAR_EDIT" });
17
+ L && !r.some((e) => e.id === L) && I({ type: "CLEAR_EDIT" });
17
18
  }, [
18
- I,
19
+ L,
19
20
  r,
20
- F
21
+ I
21
22
  ]), l(() => {
22
- A?.(V);
23
- }, [V, A]), l(() => {
24
- if (!V) return;
23
+ A?.(H);
24
+ }, [H, A]), l(() => {
25
+ if (!H) return;
25
26
  let t = `[${Object.keys(e)[0]}]`, n = (e) => {
26
27
  let n = e.target;
27
- B.current?.contains(n) || document.querySelector(t)?.contains(n) || F({ type: "COLLAPSE" });
28
+ V.current?.contains(n) || document.querySelector(t)?.contains(n) || I({ type: "COLLAPSE" });
28
29
  };
29
30
  return document.addEventListener("mousedown", n), () => document.removeEventListener("mousedown", n);
30
- }, [V, F]);
31
- let W = r.length === 0, G = c(() => F({ type: "CLEAR_MENTION" }), [F]), K = u(() => L ? o(L) : null, [L]), q = c((e) => {
32
- if (!U) return;
31
+ }, [H, I]);
32
+ let G = r.length === 0, K = c(() => I({ type: "CLEAR_MENTION" }), [I]), q = u(() => R ? o(R) : null, [R]), J = c((e) => {
33
+ if (!W) return;
33
34
  let t = e.target;
34
- !e.currentTarget.contains(t) || t.closest("[data-no-expand]") || F({ type: "EXPAND" });
35
- }, [U, F]);
36
- return z && W ? /* @__PURE__ */ f(t, {
35
+ !e.currentTarget.contains(t) || t.closest("[data-no-expand]") || I({ type: "EXPAND" });
36
+ }, [W, I]);
37
+ return B && G ? /* @__PURE__ */ f(t, {
37
38
  isFirstAnnotation: !0,
38
39
  maxCharacterCount: v,
39
40
  onPost: D,
40
41
  onPostError: O,
41
- onPostSuccess: G,
42
+ onPostSuccess: K,
42
43
  userSelectorProps: k
43
44
  }) : /* @__PURE__ */ p("div", {
44
- ref: B,
45
- className: s(m.threadedAnnotations, U && m.expandable, z && m.annotations),
46
- "data-thread-expandable": U ? !0 : void 0,
47
- onClick: U ? q : void 0,
45
+ ref: V,
46
+ className: s(m.threadedAnnotations, W && m.expandable, B && m.annotations, P && m.highlighted),
47
+ "data-thread-expandable": W ? !0 : void 0,
48
+ "data-thread-highlighted": P ? !0 : void 0,
49
+ onClick: W ? J : void 0,
48
50
  children: [/* @__PURE__ */ f(a, {
49
51
  messages: r,
50
52
  isResolved: h,
@@ -63,12 +65,12 @@ import '../styles/threaded-annotations2.css';var m = {
63
65
  annotationTarget: j,
64
66
  onAnnotationBadgeClick: M,
65
67
  originalContentDeleted: N
66
- }), P === n.Composing && /* @__PURE__ */ f(t, {
67
- initialContent: K,
68
+ }), F === n.Composing && /* @__PURE__ */ f(t, {
69
+ initialContent: q,
68
70
  maxCharacterCount: v,
69
71
  onPost: D,
70
72
  onPostError: O,
71
- onPostSuccess: G,
73
+ onPostSuccess: K,
72
74
  isReply: !0,
73
75
  userSelectorProps: k
74
76
  })]
@@ -1 +1 @@
1
- ._threadedAnnotations_1ujic_1{padding:var(--space-3) var(--space-4) var(--space-4) var(--space-3);background-color:var(--surface-surface);border:var(--border-1) solid var(--gray-10);border-radius:var(--radius-6);flex-direction:column;gap:1.125rem;display:flex}._threadedAnnotations_1ujic_1._expandable_1ujic_10{cursor:pointer}._threadedAnnotations_1ujic_1._expandable_1ujic_10 [data-message-body],._threadedAnnotations_1ujic_1._expandable_1ujic_10 [data-message-author]{cursor:pointer;-webkit-user-select:none;user-select:none}._threadedAnnotations_1ujic_1._expandable_1ujic_10:not(._annotations_1ujic_18):hover{background-color:var(--surface-surface-hover);--avatar-border-color:var(--surface-surface-hover);--fade-bg:var(--surface-surface-hover)}
1
+ ._threadedAnnotations_16hhz_1{padding:var(--space-3) var(--space-4) var(--space-4) var(--space-3);background-color:var(--surface-surface);border:var(--border-1) solid var(--gray-10);border-radius:var(--radius-6);flex-direction:column;gap:1.125rem;display:flex}._threadedAnnotations_16hhz_1._expandable_16hhz_10{cursor:pointer}._threadedAnnotations_16hhz_1._expandable_16hhz_10 [data-message-body],._threadedAnnotations_16hhz_1._expandable_16hhz_10 [data-message-author]{cursor:pointer;-webkit-user-select:none;user-select:none}._threadedAnnotations_16hhz_1._expandable_16hhz_10:not(._annotations_16hhz_18,._highlighted_16hhz_18):hover{background-color:var(--surface-surface-hover);--avatar-border-color:var(--surface-surface-hover);--fade-bg:var(--surface-surface-hover)}._threadedAnnotations_16hhz_1._highlighted_16hhz_18{background-color:var(--surface-item-surface-selected);border-color:var(--border-item-border-selected);--avatar-border-color:var(--surface-item-surface-selected);--fade-bg:var(--surface-item-surface-selected)}
@@ -7,8 +7,9 @@ export declare const defaultUserSelectorProps: Omit<import('@box/user-selector')
7
7
  export declare const DefaultThreadedAnnotations: (props: ThreadedAnnotationsProps) => import("react/jsx-runtime").JSX.Element;
8
8
  interface InteractiveModuleBaseProps {
9
9
  initialMessages?: TextMessageType[];
10
- isReplyDisabled?: boolean;
11
10
  isEditDisabled?: boolean;
11
+ isHighlighted?: boolean;
12
+ isReplyDisabled?: boolean;
12
13
  maxCharacterCount?: number;
13
14
  onCopyLink?: (id: string) => void;
14
15
  }
@@ -43,6 +43,8 @@ interface ThreadedAnnotationsBaseProps {
43
43
  onEditorOpenChange?: (isOpen: boolean) => void;
44
44
  /** When true, collapses the editor and replies panel. */
45
45
  collapsed?: boolean;
46
+ /** When true, applies a visual highlight (border + background tint) to the thread card. Not a focus state. */
47
+ isHighlighted?: boolean;
46
48
  }
47
49
  interface AnnotationModeProps extends ThreadedAnnotationsBaseProps {
48
50
  isAnnotations: true;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/threaded-annotations",
3
- "version": "3.0.6",
3
+ "version": "3.1.1",
4
4
  "license": "SEE LICENSE IN LICENSE",
5
5
  "dependencies": {
6
6
  "@floating-ui/dom": "^1.6.0",
@@ -17,23 +17,23 @@
17
17
  "uuid": "^9.0.1"
18
18
  },
19
19
  "peerDependencies": {
20
- "@box/blueprint-web": "^16.6.0",
21
- "@box/blueprint-web-assets": "^5.2.12",
22
- "@box/collaboration-popover": "^2.1.15",
23
- "@box/readable-time": "^2.1.15",
24
- "@box/user-selector": "^2.1.16",
20
+ "@box/blueprint-web": "^16.6.1",
21
+ "@box/blueprint-web-assets": "^5.2.13",
22
+ "@box/collaboration-popover": "^2.1.16",
23
+ "@box/readable-time": "^2.1.16",
24
+ "@box/user-selector": "^2.1.17",
25
25
  "clsx": "^1.2.1",
26
26
  "react": "^18.0.0",
27
27
  "react-dom": "^18.0.0",
28
28
  "react-intl": "^6.4.2"
29
29
  },
30
30
  "devDependencies": {
31
- "@box/blueprint-web": "^16.6.0",
32
- "@box/blueprint-web-assets": "^5.2.12",
33
- "@box/eslint-plugin-blueprint": "2.1.8",
34
- "@box/readable-time": "^2.1.15",
35
- "@box/storybook-utils": "^1.1.14",
36
- "@box/user-selector": "^2.1.16",
31
+ "@box/blueprint-web": "^16.6.1",
32
+ "@box/blueprint-web-assets": "^5.2.13",
33
+ "@box/eslint-plugin-blueprint": "2.1.9",
34
+ "@box/readable-time": "^2.1.16",
35
+ "@box/storybook-utils": "^1.1.15",
36
+ "@box/user-selector": "^2.1.17",
37
37
  "react": "^18.0.0",
38
38
  "react-dom": "^18.0.0"
39
39
  },