@box/activity-feed 1.22.11 → 1.22.12
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.
- package/dist/chunks/TaskItemFooter.js +10 -10
- package/dist/chunks/TaskMessage.js +17 -17
- package/dist/chunks/activity-feed-list.js +32 -20
- package/dist/chunks/editor.js +1 -1
- package/dist/esm/lib/components/activity-feed-list/use-list-scroll-state.js +33 -0
- package/dist/styles/TaskItemFooter.css +1 -1
- package/dist/styles/activity-feed-list.css +1 -1
- package/dist/styles/editor.css +1 -1
- package/dist/types/lib/components/activity-feed-list/use-list-scroll-state.d.ts +10 -0
- package/dist/types/lib/stories/shared.d.ts +3 -1
- package/package.json +15 -15
|
@@ -6,16 +6,16 @@ import { useIntl as i } from "react-intl";
|
|
|
6
6
|
import { jsx as a, jsxs as o } from "react/jsx-runtime";
|
|
7
7
|
import { Checkmark as s, XMark as c } from "@box/blueprint-web-assets/icons/Medium";
|
|
8
8
|
import '../styles/TaskItemFooter.css';var l = {
|
|
9
|
-
taskItem: "
|
|
10
|
-
header: "
|
|
11
|
-
headerTitleRow: "
|
|
12
|
-
headerLeadingIcon: "
|
|
13
|
-
cardBody: "
|
|
14
|
-
textMessageFooterSlot: "
|
|
15
|
-
marginBottom: "
|
|
16
|
-
approvalActionsRow: "
|
|
17
|
-
approvalApproveIcon: "
|
|
18
|
-
approvalRejectIcon: "
|
|
9
|
+
taskItem: "_taskItem_156h2_1",
|
|
10
|
+
header: "_header_156h2_10",
|
|
11
|
+
headerTitleRow: "_headerTitleRow_156h2_18",
|
|
12
|
+
headerLeadingIcon: "_headerLeadingIcon_156h2_24",
|
|
13
|
+
cardBody: "_cardBody_156h2_31",
|
|
14
|
+
textMessageFooterSlot: "_textMessageFooterSlot_156h2_38",
|
|
15
|
+
marginBottom: "_marginBottom_156h2_46",
|
|
16
|
+
approvalActionsRow: "_approvalActionsRow_156h2_50",
|
|
17
|
+
approvalApproveIcon: "_approvalApproveIcon_156h2_57",
|
|
18
|
+
approvalRejectIcon: "_approvalRejectIcon_156h2_61"
|
|
19
19
|
};
|
|
20
20
|
function u({ assignees: u, canApprove: d, canReject: f, disabled: p = !1, dueDate: m, hasNextPage: h, onApprove: g, onComplete: _, onLoadAllAssignee: v, onReject: y, pendingAction: b, showActionButtons: x, showApprovalActions: S, showGeneralComplete: C }) {
|
|
21
21
|
let w = i(), T = b !== void 0;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
import { MessageRenderer as e } from "../esm/lib/components/task-item/components/task-message/MessageRenderer.js";
|
|
2
2
|
import { t } from "./task-options-menu.js";
|
|
3
3
|
import { useState as n } from "react";
|
|
4
|
-
import
|
|
5
|
-
import {
|
|
6
|
-
import {
|
|
7
|
-
import c from "
|
|
4
|
+
import r from "clsx";
|
|
5
|
+
import { Avatar as i, Text as a } from "@box/blueprint-web";
|
|
6
|
+
import { jsx as o, jsxs as s } from "react/jsx-runtime";
|
|
7
|
+
import { ReadableTime as c } from "@box/readable-time";
|
|
8
8
|
import '../styles/TaskMessage.css';var l = {
|
|
9
9
|
taskMessage: "_taskMessage_9yucp_1",
|
|
10
10
|
headerContainer: "_headerContainer_9yucp_11",
|
|
@@ -29,23 +29,23 @@ function d(e) {
|
|
|
29
29
|
}
|
|
30
30
|
function f({ id: f, author: p, message: m, createdAt: h, canEdit: g = !1, canDelete: _ = !1, disabled: v = !1, onEdit: y, onDelete: b, onView: x, showThreadedIndicator: S = !1, children: C }) {
|
|
31
31
|
let [w, T] = n(!1), E = g && !!y || _ && !!b || !!x, D = d(p.name);
|
|
32
|
-
return /* @__PURE__ */
|
|
32
|
+
return /* @__PURE__ */ s("div", {
|
|
33
33
|
className: l.taskMessage,
|
|
34
34
|
"data-message-wrapper": !0,
|
|
35
|
-
children: [/* @__PURE__ */
|
|
35
|
+
children: [/* @__PURE__ */ s("div", {
|
|
36
36
|
className: l.headerContainer,
|
|
37
|
-
children: [/* @__PURE__ */
|
|
37
|
+
children: [/* @__PURE__ */ s("div", {
|
|
38
38
|
className: l.information,
|
|
39
|
-
children: [/* @__PURE__ */
|
|
39
|
+
children: [/* @__PURE__ */ o(i, {
|
|
40
40
|
alt: p.name,
|
|
41
41
|
className: l.avatar,
|
|
42
42
|
colorIndex: parseInt(p.id, 10) || 0,
|
|
43
43
|
size: "medium",
|
|
44
44
|
src: p.avatarUrl || "",
|
|
45
45
|
text: D
|
|
46
|
-
}), /* @__PURE__ */
|
|
46
|
+
}), /* @__PURE__ */ o("div", {
|
|
47
47
|
className: l.textContainer,
|
|
48
|
-
children: /* @__PURE__ */ a
|
|
48
|
+
children: /* @__PURE__ */ o(a, {
|
|
49
49
|
as: "p",
|
|
50
50
|
className: l.author,
|
|
51
51
|
color: "textOnLightDefault",
|
|
@@ -53,10 +53,10 @@ function f({ id: f, author: p, message: m, createdAt: h, canEdit: g = !1, canDel
|
|
|
53
53
|
children: p.name
|
|
54
54
|
})
|
|
55
55
|
})]
|
|
56
|
-
}), E && /* @__PURE__ */
|
|
56
|
+
}), E && /* @__PURE__ */ o("div", {
|
|
57
57
|
className: l.optionsMenu,
|
|
58
58
|
"data-state": w ? "open" : "closed",
|
|
59
|
-
children: /* @__PURE__ */
|
|
59
|
+
children: /* @__PURE__ */ o(t, {
|
|
60
60
|
canDelete: _,
|
|
61
61
|
canEdit: g,
|
|
62
62
|
disabled: v,
|
|
@@ -66,15 +66,15 @@ function f({ id: f, author: p, message: m, createdAt: h, canEdit: g = !1, canDel
|
|
|
66
66
|
onOpenChange: T
|
|
67
67
|
})
|
|
68
68
|
})]
|
|
69
|
-
}), /* @__PURE__ */
|
|
69
|
+
}), /* @__PURE__ */ s("div", {
|
|
70
70
|
className: l.contentWrapper,
|
|
71
|
-
children: [/* @__PURE__ */
|
|
71
|
+
children: [/* @__PURE__ */ o("div", { className: r(l.threadedIndicator, !S && l.threadedIndicatorHidden) }), /* @__PURE__ */ s("div", {
|
|
72
72
|
className: l.messageContent,
|
|
73
73
|
children: [
|
|
74
|
-
/* @__PURE__ */
|
|
75
|
-
/* @__PURE__ */
|
|
74
|
+
/* @__PURE__ */ o(e, { messageObject: m }),
|
|
75
|
+
/* @__PURE__ */ o("div", {
|
|
76
76
|
className: l.messageFooter,
|
|
77
|
-
children: /* @__PURE__ */
|
|
77
|
+
children: /* @__PURE__ */ o(c, {
|
|
78
78
|
textProps: u,
|
|
79
79
|
timestamp: h
|
|
80
80
|
})
|
|
@@ -1,21 +1,33 @@
|
|
|
1
1
|
import { t as e } from "./empty-state.js";
|
|
2
|
-
import {
|
|
3
|
-
import {
|
|
4
|
-
import
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
2
|
+
import { useListScrollState as t } from "../esm/lib/components/activity-feed-list/use-list-scroll-state.js";
|
|
3
|
+
import { Children as n, isValidElement as r } from "react";
|
|
4
|
+
import i from "clsx";
|
|
5
|
+
import { jsx as a } from "react/jsx-runtime";
|
|
6
|
+
import '../styles/activity-feed-list.css';var o = {
|
|
7
|
+
emptyStateWrapper: "_emptyStateWrapper_7n7vb_1",
|
|
8
|
+
list: "_list_7n7vb_8",
|
|
9
|
+
fadeTop: "_fadeTop_7n7vb_19",
|
|
10
|
+
fadeBottom: "_fadeBottom_7n7vb_19"
|
|
11
|
+
}, s = ({ children: s }) => {
|
|
12
|
+
let { isAtBottom: c, isAtTop: l, setContainer: u } = t();
|
|
13
|
+
return n.toArray(s).length === 0 ? /* @__PURE__ */ a("div", {
|
|
14
|
+
className: o.emptyStateWrapper,
|
|
15
|
+
children: /* @__PURE__ */ a(e, {})
|
|
16
|
+
}) : /* @__PURE__ */ a("ul", {
|
|
17
|
+
ref: u,
|
|
18
|
+
className: i(o.list, {
|
|
19
|
+
[o.fadeBottom]: !c,
|
|
20
|
+
[o.fadeTop]: !l
|
|
21
|
+
}),
|
|
22
|
+
"data-testid": "activity-feed-list",
|
|
23
|
+
children: n.map(s, (e, t) => {
|
|
24
|
+
if (!/* @__PURE__ */ r(e)) return /* @__PURE__ */ a("li", { children: e }, `activity-feed-row-${t}`);
|
|
25
|
+
let n = e.key == null ? void 0 : String(e.key), i = n ?? `activity-feed-row-${t}`;
|
|
26
|
+
return /* @__PURE__ */ a("li", {
|
|
27
|
+
"data-activity-id": n,
|
|
28
|
+
children: e
|
|
29
|
+
}, i);
|
|
30
|
+
})
|
|
31
|
+
});
|
|
32
|
+
};
|
|
33
|
+
export { s as t };
|
package/dist/chunks/editor.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { MessageEditorV2 as e } from "@box/threaded-annotations";
|
|
2
2
|
import { jsx as t } from "react/jsx-runtime";
|
|
3
|
-
import '../styles/editor.css';var n = { editorWrapper: "
|
|
3
|
+
import '../styles/editor.css';var n = { editorWrapper: "_editorWrapper_ht77e_1" }, r = ({ disableComponent: r, maxCharacterCount: i, onPost: a, onPostError: o, onPostSuccess: s, userSelectorProps: c }) => /* @__PURE__ */ t("div", {
|
|
4
4
|
className: n.editorWrapper,
|
|
5
5
|
children: /* @__PURE__ */ t(e, {
|
|
6
6
|
disableComponent: r,
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { useCallback as e, useLayoutEffect as t, useState as n } from "react";
|
|
2
|
+
var r = 2, i = () => typeof window < "u" && "ResizeObserver" in window, a = () => typeof window < "u" && "MutationObserver" in window, o = () => {
|
|
3
|
+
let [o, s] = n(null), [c, l] = n(!0), [u, d] = n(!0), f = e((e) => {
|
|
4
|
+
s(e);
|
|
5
|
+
}, []);
|
|
6
|
+
return t(() => {
|
|
7
|
+
if (!o) return;
|
|
8
|
+
let e = () => {
|
|
9
|
+
l(o.scrollTop <= r), d(o.scrollTop + o.clientHeight >= o.scrollHeight - r);
|
|
10
|
+
};
|
|
11
|
+
e();
|
|
12
|
+
let t = null;
|
|
13
|
+
if (i()) {
|
|
14
|
+
t = new ResizeObserver(e), t.observe(o);
|
|
15
|
+
for (let e of Array.from(o.children)) t.observe(e);
|
|
16
|
+
}
|
|
17
|
+
let n = null;
|
|
18
|
+
return a() && (n = new MutationObserver(() => {
|
|
19
|
+
if (t) {
|
|
20
|
+
t.disconnect(), t.observe(o);
|
|
21
|
+
for (let e of Array.from(o.children)) t.observe(e);
|
|
22
|
+
}
|
|
23
|
+
e();
|
|
24
|
+
}), n.observe(o, { childList: !0 })), o.addEventListener("scroll", e), () => {
|
|
25
|
+
n?.disconnect(), t?.disconnect(), o.removeEventListener("scroll", e);
|
|
26
|
+
};
|
|
27
|
+
}, [o]), {
|
|
28
|
+
isAtBottom: u,
|
|
29
|
+
isAtTop: c,
|
|
30
|
+
setContainer: f
|
|
31
|
+
};
|
|
32
|
+
};
|
|
33
|
+
export { o as useListScrollState };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._taskItem_156h2_1{box-sizing:border-box;border:var(--border-1) solid var(--border-card-border);border-radius:var(--space-5);background:var(--surface-primary);width:100%;padding:0}._header_156h2_10{padding:var(--space-3);padding-left:var(--space-5);border-bottom:var(--border-1) solid var(--border-card-border);border-radius:var(--space-5) var(--space-5) 0 0;background:var(--bp-gray-02)}._headerTitleRow_156h2_18{align-items:center;gap:var(--space-2);display:flex}._headerLeadingIcon_156h2_24{color:var(--text-text-on-light-secondary);font-size:var(--space-5);flex-shrink:0;display:block}._cardBody_156h2_31{padding:var(--space-4);flex-direction:column;min-width:0;display:flex}._textMessageFooterSlot_156h2_38{gap:var(--space-2);flex-direction:column;width:100%;min-width:0;display:flex}._marginBottom_156h2_46{margin-bottom:var(--space-2)}._approvalActionsRow_156h2_50{gap:var(--space-3);flex-wrap:wrap;align-items:center;display:flex}._approvalApproveIcon_156h2_57{color:var(--bp-green-light-135)}._approvalRejectIcon_156h2_61{color:var(--text-text-error-on-light)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._emptyStateWrapper_7n7vb_1{flex:auto;justify-content:center;align-items:center;display:flex}._list_7n7vb_8{gap:var(--space-4);min-height:0;padding:var(--space-4);flex-direction:column;flex:auto;margin:0;list-style:none;display:flex;overflow-y:auto}._list_7n7vb_8._fadeTop_7n7vb_19._fadeBottom_7n7vb_19{-webkit-mask-image:linear-gradient(to bottom, transparent 0, black var(--space-4), black calc(100% - var(--space-4)), transparent 100%);mask-image:linear-gradient(to bottom, transparent 0, black var(--space-4), black calc(100% - var(--space-4)), transparent 100%)}._list_7n7vb_8._fadeTop_7n7vb_19:not(._fadeBottom_7n7vb_19){-webkit-mask-image:linear-gradient(to bottom, transparent 0, black var(--space-4), black 100%);mask-image:linear-gradient(to bottom, transparent 0, black var(--space-4), black 100%)}._list_7n7vb_8._fadeBottom_7n7vb_19:not(._fadeTop_7n7vb_19){-webkit-mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--space-4)), transparent 100%);mask-image:linear-gradient(to bottom, black 0, black calc(100% - var(--space-4)), transparent 100%)}
|
package/dist/styles/editor.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._editorWrapper_ht77e_1{padding:0 var(--space-4) var(--space-5)}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
export interface ListScrollState {
|
|
2
|
+
readonly isAtBottom: boolean;
|
|
3
|
+
readonly isAtTop: boolean;
|
|
4
|
+
}
|
|
5
|
+
export interface UseListScrollStateResult extends ListScrollState {
|
|
6
|
+
/** Callback ref — attach to the scroll container so the hook re-subscribes on remount. */
|
|
7
|
+
readonly setContainer: (node: HTMLElement | null) => void;
|
|
8
|
+
}
|
|
9
|
+
/** Tracks whether a scroll container is at its top/bottom edge so callers can render fade masks. */
|
|
10
|
+
export declare const useListScrollState: () => UseListScrollStateResult;
|
|
@@ -8,8 +8,10 @@ export interface InteractiveActivityFeedProps {
|
|
|
8
8
|
initialShowResolvedComments?: boolean;
|
|
9
9
|
/** Storybook-only: when set, scroll the row with this id into view on mount/change. */
|
|
10
10
|
scrollToItemId?: string;
|
|
11
|
+
/** Storybook-only: position the inner list scroll for VRT. */
|
|
12
|
+
initialScrollPosition?: 'top' | 'middle' | 'bottom';
|
|
11
13
|
/** Close callback. */
|
|
12
14
|
onClose: () => void;
|
|
13
15
|
}
|
|
14
16
|
/** Full Storybook harness for ActivityFeed. */
|
|
15
|
-
export declare const InteractiveActivityFeed: ({ initialMentionMe, initialShowResolvedComments, items, scrollToItemId, onClose, }: InteractiveActivityFeedProps) => import("react/jsx-runtime").JSX.Element;
|
|
17
|
+
export declare const InteractiveActivityFeed: ({ initialMentionMe, initialScrollPosition, initialShowResolvedComments, items, scrollToItemId, onClose, }: InteractiveActivityFeedProps) => import("react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/activity-feed",
|
|
3
|
-
"version": "1.22.
|
|
3
|
+
"version": "1.22.12",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"peerDependencies": {
|
|
6
|
-
"@box/blueprint-web": "^15.5.
|
|
7
|
-
"@box/blueprint-web-assets": "^4.
|
|
8
|
-
"@box/collaboration-popover": "^1.63.
|
|
9
|
-
"@box/readable-time": "^1.42.
|
|
10
|
-
"@box/threaded-annotations": "^1.
|
|
11
|
-
"@box/user-selector": "^1.77.
|
|
6
|
+
"@box/blueprint-web": "^15.5.1",
|
|
7
|
+
"@box/blueprint-web-assets": "^4.122.0",
|
|
8
|
+
"@box/collaboration-popover": "^1.63.10",
|
|
9
|
+
"@box/readable-time": "^1.42.10",
|
|
10
|
+
"@box/threaded-annotations": "^1.95.0",
|
|
11
|
+
"@box/user-selector": "^1.77.10",
|
|
12
12
|
"clsx": "^1.2.1",
|
|
13
13
|
"react": "^18.0.0",
|
|
14
14
|
"react-dom": "^18.0.0",
|
|
@@ -18,14 +18,14 @@
|
|
|
18
18
|
"access": "public"
|
|
19
19
|
},
|
|
20
20
|
"devDependencies": {
|
|
21
|
-
"@box/blueprint-web": "^15.5.
|
|
22
|
-
"@box/blueprint-web-assets": "^4.
|
|
23
|
-
"@box/collaboration-popover": "^1.63.
|
|
24
|
-
"@box/eslint-plugin-blueprint": "1.2.
|
|
25
|
-
"@box/readable-time": "^1.42.
|
|
26
|
-
"@box/storybook-utils": "0.20.
|
|
27
|
-
"@box/threaded-annotations": "^1.
|
|
28
|
-
"@box/user-selector": "^1.77.
|
|
21
|
+
"@box/blueprint-web": "^15.5.1",
|
|
22
|
+
"@box/blueprint-web-assets": "^4.122.0",
|
|
23
|
+
"@box/collaboration-popover": "^1.63.10",
|
|
24
|
+
"@box/eslint-plugin-blueprint": "1.2.5",
|
|
25
|
+
"@box/readable-time": "^1.42.10",
|
|
26
|
+
"@box/storybook-utils": "0.20.9",
|
|
27
|
+
"@box/threaded-annotations": "^1.95.0",
|
|
28
|
+
"@box/user-selector": "^1.77.10",
|
|
29
29
|
"react-intl": "^6.4.2"
|
|
30
30
|
},
|
|
31
31
|
"files": [
|