@box/activity-feed 1.22.10 → 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/chunks/header.js +7 -5
- 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/styles/header.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,
|
package/dist/chunks/header.js
CHANGED
|
@@ -7,11 +7,12 @@ import { useIntl as l } from "react-intl";
|
|
|
7
7
|
import { jsx as u, jsxs as d } from "react/jsx-runtime";
|
|
8
8
|
import { Funnel as f, XMark as p } from "@box/blueprint-web-assets/icons/Medium";
|
|
9
9
|
import '../styles/header.css';var m = {
|
|
10
|
-
header: "
|
|
11
|
-
title: "
|
|
12
|
-
actions: "
|
|
13
|
-
filterMenuContent: "
|
|
14
|
-
filtersTitle: "
|
|
10
|
+
header: "_header_almui_2",
|
|
11
|
+
title: "_title_almui_12",
|
|
12
|
+
actions: "_actions_almui_20",
|
|
13
|
+
filterMenuContent: "_filterMenuContent_almui_27",
|
|
14
|
+
filtersTitle: "_filtersTitle_almui_31",
|
|
15
|
+
filterTrigger: "_filterTrigger_almui_35"
|
|
15
16
|
}, h = Object.assign(({ children: e, title: t }) => /* @__PURE__ */ d("div", {
|
|
16
17
|
className: m.header,
|
|
17
18
|
children: [/* @__PURE__ */ u(c, {
|
|
@@ -42,6 +43,7 @@ import '../styles/header.css';var m = {
|
|
|
42
43
|
open: o,
|
|
43
44
|
children: [/* @__PURE__ */ u(a.Trigger, { children: /* @__PURE__ */ u(s, {
|
|
44
45
|
"aria-label": r(e.filterAriaLabel),
|
|
46
|
+
className: m.filterTrigger,
|
|
45
47
|
icon: f,
|
|
46
48
|
pressed: o || n,
|
|
47
49
|
size: "small"
|
|
@@ -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)}
|
package/dist/styles/header.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._header_almui_2{background:var(--surface-surface-secondary);box-sizing:border-box;padding:var(--space-3) var(--space-5) 0;justify-content:space-between;align-items:center;width:100%;display:flex}._title_almui_12{-webkit-line-clamp:1;-webkit-box-orient:vertical;min-width:0;display:-webkit-box;overflow:hidden}._actions_almui_20{align-items:center;gap:var(--space-2);flex-shrink:0;display:flex}._filterMenuContent_almui_27{--blueprint-web-dropdown-content-max-width:18rem}._filtersTitle_almui_31{padding:var(--space-2)}._filterTrigger_almui_35[data-modern]{--icon-toggle-button-off-background:transparent}
|
|
@@ -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": [
|