@box/activity-feed 2.4.1 → 3.0.0
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/activity-feed-list.js +1 -1
- package/dist/esm/lib/scroll/create-activity-feed-scroll.js +1 -1
- package/dist/styles/activity-feed-list.css +1 -1
- package/dist/types/index.d.ts +1 -1
- package/dist/types/lib/activity-feed.d.ts +1 -1
- package/dist/types/lib/scroll/index.d.ts +1 -1
- package/dist/types/lib/scroll/types.d.ts +10 -2
- package/package.json +5 -5
|
@@ -1 +1 @@
|
|
|
1
|
-
import{useActivityFeedContext}from"../esm/lib/activity-feed-context.js";import{t as EmptyState}from"./empty-state.js";import{useListScrollState}from"../esm/lib/components/activity-feed-list/use-list-scroll-state.js";import{Children,isValidElement}from"react";import clsx from"clsx";import{jsx}from"react/jsx-runtime";import '../styles/activity-feed-list.css';var activity_feed_list_module_default={emptyStateWrapper:`
|
|
1
|
+
import{useActivityFeedContext}from"../esm/lib/activity-feed-context.js";import{t as EmptyState}from"./empty-state.js";import{useListScrollState}from"../esm/lib/components/activity-feed-list/use-list-scroll-state.js";import{Children,isValidElement}from"react";import clsx from"clsx";import{jsx}from"react/jsx-runtime";import '../styles/activity-feed-list.css';var activity_feed_list_module_default={emptyStateWrapper:`_emptyStateWrapper_1eewe_1`,commentsDisabled:`_commentsDisabled_1eewe_7`,list:`_list_1eewe_11`,fadeTop:`_fadeTop_1eewe_30`,fadeBottom:`_fadeBottom_1eewe_30`},ActivityFeedList=({children})=>{let{areCommentsDisabled}=useActivityFeedContext(),{isAtBottom,isAtTop,setContainer}=useListScrollState();return Children.toArray(children).length===0?jsx(`div`,{className:clsx(activity_feed_list_module_default.emptyStateWrapper,{[activity_feed_list_module_default.commentsDisabled]:areCommentsDisabled}),children:jsx(EmptyState,{})}):jsx(`ul`,{ref:setContainer,className:clsx(activity_feed_list_module_default.list,{[activity_feed_list_module_default.commentsDisabled]:areCommentsDisabled,[activity_feed_list_module_default.fadeBottom]:!areCommentsDisabled&&!isAtBottom,[activity_feed_list_module_default.fadeTop]:!isAtTop}),"data-activity-feed-list":!0,"data-testid":`activity-feed-list`,children:Children.map(children,(child,index)=>{if(!isValidElement(child))return jsx(`li`,{children:child},`activity-feed-row-${index}`);let activityId=child.key==null?void 0:String(child.key),liKey=activityId??`activity-feed-row-${index}`;return jsx(`li`,{"data-activity-id":activityId,children:child},liKey)})})};export{ActivityFeedList as t};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
function createActivityFeedScroll(){let container=null,attachContainer=node=>{container=node},scrollSelectorIntoView=selector=>{let el=container?.querySelector(selector);return
|
|
1
|
+
var LIST_SELECTOR=`[data-activity-feed-list]`,SCROLL_THRESHOLD_PX=2,SCROLL_SETTLE_MS=120;function createActivityFeedScroll(){let container=null,pinToBottom=!1,pinCleanup=null,deferredEndScrollFrameId=0,cancelDeferredEndScroll=()=>{deferredEndScrollFrameId!==0&&(cancelAnimationFrame(deferredEndScrollFrameId),deferredEndScrollFrameId=0)},clearPin=()=>{pinCleanup?.(),pinCleanup=null,pinToBottom=!1},attachContainer=node=>{node!==container&&(cancelDeferredEndScroll(),clearPin()),container=node},getList=()=>container?.querySelector(LIST_SELECTOR)??null,isAtBottom=list=>list.scrollTop+list.clientHeight>=list.scrollHeight-SCROLL_THRESHOLD_PX,snapToBottom=()=>{let list=getList();!list||!pinToBottom||(list.scrollTop=list.scrollHeight)},enablePinToBottom=()=>{let list=getList();if(!list)return;clearPin(),pinToBottom=!0;let resizeSnapEnabled=!1,isEndScrollSettled=!1,hasProgrammaticScrollStarted=!1,settleTimer=0,noScrollDetectOuterFrameId=0,noScrollDetectInnerFrameId=0,unpinGeneration=0,lastScrollTop=list.scrollTop,enableResizeSnap=markEndScrollSettled=>{!pinToBottom||isEndScrollSettled||(resizeSnapEnabled=!0,settleTimer!==0&&(window.clearTimeout(settleTimer),settleTimer=0),markEndScrollSettled?(isEndScrollSettled=!0,isAtBottom(list)||snapToBottom()):isAtBottom(list)&&(isEndScrollSettled=!0))},scheduleSettle=()=>{isEndScrollSettled||!pinToBottom||(window.clearTimeout(settleTimer),settleTimer=window.setTimeout(()=>{settleTimer=0,enableResizeSnap(!0)},SCROLL_SETTLE_MS))},scheduleUnpinIfStillAway=()=>{unpinGeneration+=1;let generation=unpinGeneration;requestAnimationFrame(()=>{requestAnimationFrame(()=>{generation!==unpinGeneration||!pinToBottom||!isEndScrollSettled||isAtBottom(list)||clearPin()})})},onScroll=()=>{hasProgrammaticScrollStarted=!0;let{scrollTop}=list;if(isEndScrollSettled){lastScrollTop=scrollTop,isAtBottom(list)||scheduleUnpinIfStillAway();return}if(scrollTop<lastScrollTop){lastScrollTop=scrollTop,clearPin();return}lastScrollTop=scrollTop,scheduleSettle()},onScrollEnd=()=>{enableResizeSnap(!0)},onUserScrollIntent=()=>{clearPin()};list.addEventListener(`scroll`,onScroll),list.addEventListener(`scrollend`,onScrollEnd,{once:!0}),noScrollDetectOuterFrameId=requestAnimationFrame(()=>{noScrollDetectInnerFrameId=requestAnimationFrame(()=>{hasProgrammaticScrollStarted||enableResizeSnap(!1)})});let resizeObserver=null,isInitialResizeDelivery=!0;if(typeof ResizeObserver<`u`&&(resizeObserver=new ResizeObserver(()=>{if(isInitialResizeDelivery){isInitialResizeDelivery=!1;return}resizeSnapEnabled&&(unpinGeneration+=1,snapToBottom())}),resizeObserver.observe(list),container)){resizeObserver.observe(container);for(let child of Array.from(container.children))resizeObserver.observe(child)}list.addEventListener(`wheel`,onUserScrollIntent,{passive:!0}),list.addEventListener(`touchmove`,onUserScrollIntent,{passive:!0}),list.addEventListener(`pointerdown`,onUserScrollIntent),pinCleanup=()=>{unpinGeneration+=1,cancelAnimationFrame(noScrollDetectOuterFrameId),cancelAnimationFrame(noScrollDetectInnerFrameId),settleTimer!==0&&(window.clearTimeout(settleTimer),settleTimer=0),resizeObserver?.disconnect(),list.removeEventListener(`scroll`,onScroll),list.removeEventListener(`scrollend`,onScrollEnd),list.removeEventListener(`wheel`,onUserScrollIntent),list.removeEventListener(`touchmove`,onUserScrollIntent),list.removeEventListener(`pointerdown`,onUserScrollIntent)}},scrollSelectorIntoView=(selector,options)=>{let el=container?.querySelector(selector);if(!el)return!1;let block=options?.block??`end`;cancelDeferredEndScroll();let scrollIntoViewAndSyncPin=()=>{el.scrollIntoView({behavior:`smooth`,block}),block===`end`?enablePinToBottom():clearPin()};return block===`end`?deferredEndScrollFrameId=requestAnimationFrame(()=>{deferredEndScrollFrameId=0,scrollIntoViewAndSyncPin()}):scrollIntoViewAndSyncPin(),!0},surface={scrollTo:(id,options)=>scrollSelectorIntoView(`[data-activity-id="${CSS.escape(id)}"]`,options),scrollToMessage:(messageId,options)=>scrollSelectorIntoView(`[data-message-id="${CSS.escape(messageId)}"]`,options)};return Object.defineProperty(surface,"attachContainer",{configurable:!0,enumerable:!1,value:attachContainer,writable:!0}),surface}export{createActivityFeedScroll};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.
|
|
1
|
+
._emptyStateWrapper_1eewe_1{flex:auto;justify-content:center;align-items:center;display:flex}._emptyStateWrapper_1eewe_1._commentsDisabled_1eewe_7{padding-bottom:calc(2 * var(--bp-space-040) + var(--bp-font-line-height-04))}._list_1eewe_11._list_1eewe_11{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_1eewe_11._list_1eewe_11._commentsDisabled_1eewe_7{padding-bottom:calc(2 * var(--bp-space-040) + var(--bp-font-line-height-04))}._list_1eewe_11>li,._list_1eewe_11 [data-message-id]{scroll-margin-bottom:var(--bp-space-040);scroll-margin-top:var(--bp-space-040)}._list_1eewe_11._fadeTop_1eewe_30._fadeBottom_1eewe_30{-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_1eewe_11._fadeTop_1eewe_30:not(._fadeBottom_1eewe_30){-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_1eewe_11._fadeBottom_1eewe_30:not(._fadeTop_1eewe_30){-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/types/index.d.ts
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export { ActivityFeed, useActivityFeedScroll } from './lib/activity-feed';
|
|
2
|
-
export type { ActivityFeedScrollHandle } from './lib/activity-feed';
|
|
2
|
+
export type { ActivityFeedScrollHandle, ActivityFeedScrollToOptions } from './lib/activity-feed';
|
|
3
3
|
export type * from './lib/types';
|
|
4
4
|
export { AppActivityItem } from './lib/components/app-activity-item';
|
|
5
5
|
export type { AppActivityItemProps } from './lib/components/app-activity-item';
|
|
@@ -6,7 +6,7 @@ import { TaskItem } from './components/task-item';
|
|
|
6
6
|
import { VersionItem } from './components/version-item';
|
|
7
7
|
import { useActivityFeedScroll, ActivityFeedScrollHandle } from './scroll';
|
|
8
8
|
export { useActivityFeedScroll } from './scroll';
|
|
9
|
-
export type { ActivityFeedScrollHandle } from './scroll';
|
|
9
|
+
export type { ActivityFeedScrollHandle, ActivityFeedScrollToOptions } from './scroll';
|
|
10
10
|
/** Props for `ActivityFeed.Root`. */
|
|
11
11
|
interface ActivityFeedRootProps {
|
|
12
12
|
/**
|
|
@@ -1,4 +1,4 @@
|
|
|
1
1
|
export { createActivityFeedScroll } from './create-activity-feed-scroll';
|
|
2
|
-
export type { ActivityFeedScrollHandle, InternalActivityFeedScrollHandle } from './types';
|
|
2
|
+
export type { ActivityFeedScrollHandle, ActivityFeedScrollToOptions, InternalActivityFeedScrollHandle } from './types';
|
|
3
3
|
export { isAttachableActivityFeedScrollHandle } from './types';
|
|
4
4
|
export { useActivityFeedScroll } from './use-activity-feed-scroll';
|
|
@@ -1,13 +1,21 @@
|
|
|
1
|
+
/** Options for programmatic row / message scroll. */
|
|
2
|
+
export interface ActivityFeedScrollToOptions {
|
|
3
|
+
/**
|
|
4
|
+
* Vertical alignment inside the feed viewport. Defaults to `'end'` (latest item / pin to bottom).
|
|
5
|
+
* Use `'start'` for deeplink / focus so the row aligns to the top of the viewport.
|
|
6
|
+
*/
|
|
7
|
+
block?: ScrollLogicalPosition;
|
|
8
|
+
}
|
|
1
9
|
/** Public handle: scroll a keyed list row, or a single thread message, into view (smooth). */
|
|
2
10
|
export interface ActivityFeedScrollHandle {
|
|
3
11
|
/** Scroll the row (whole thread) for `id` into view via `data-activity-id`. Returns false when the row is not mounted. */
|
|
4
|
-
scrollTo: (id: string) => boolean;
|
|
12
|
+
scrollTo: (id: string, options?: ActivityFeedScrollToOptions) => boolean;
|
|
5
13
|
/**
|
|
6
14
|
* Scroll a single thread message into view via `data-message-id` (root or reply). Returns false when
|
|
7
15
|
* the message is not in the DOM — expand the owning thread first (e.g. render it with `defaultExpanded`)
|
|
8
16
|
* so hidden replies are mounted.
|
|
9
17
|
*/
|
|
10
|
-
scrollToMessage: (messageId: string) => boolean;
|
|
18
|
+
scrollToMessage: (messageId: string, options?: ActivityFeedScrollToOptions) => boolean;
|
|
11
19
|
}
|
|
12
20
|
/** Internal: same API plus container registration for `ActivityFeed.Root`. */
|
|
13
21
|
export interface InternalActivityFeedScrollHandle extends ActivityFeedScrollHandle {
|
package/package.json
CHANGED
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@box/activity-feed",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "3.0.0",
|
|
4
4
|
"license": "SEE LICENSE IN LICENSE",
|
|
5
5
|
"peerDependencies": {
|
|
6
6
|
"@box/blueprint-web": "^16.20.6",
|
|
7
7
|
"@box/blueprint-web-assets": "^5.7.13",
|
|
8
8
|
"@box/collaboration-popover": "^2.2.22",
|
|
9
9
|
"@box/readable-time": "^2.2.22",
|
|
10
|
-
"@box/threaded-annotations": "^4.8.
|
|
11
|
-
"@box/user-selector": "^
|
|
10
|
+
"@box/threaded-annotations": "^4.8.7",
|
|
11
|
+
"@box/user-selector": "^3.0.0",
|
|
12
12
|
"clsx": "^1.2.1",
|
|
13
13
|
"react": "^18.0.0",
|
|
14
14
|
"react-dom": "^18.0.0",
|
|
@@ -24,8 +24,8 @@
|
|
|
24
24
|
"@box/eslint-plugin-blueprint": "2.2.8",
|
|
25
25
|
"@box/readable-time": "^2.2.22",
|
|
26
26
|
"@box/storybook-utils": "1.2.22",
|
|
27
|
-
"@box/threaded-annotations": "^4.8.
|
|
28
|
-
"@box/user-selector": "^
|
|
27
|
+
"@box/threaded-annotations": "^4.8.7",
|
|
28
|
+
"@box/user-selector": "^3.0.0",
|
|
29
29
|
"react-intl": "^6.4.2"
|
|
30
30
|
},
|
|
31
31
|
"files": [
|