box-ui-elements 16.1.0-beta.9 → 17.0.0

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityItem.js

@@ -6,16 +6,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import * as React from 'react';
 import classNames from 'classnames';
+import './ActivityItem.scss';
 
 function ActivityItem(_ref, ref) {
   var children = _ref.children,
       className = _ref.className,
       isFocused = _ref.isFocused,
-      rest = _objectWithoutProperties(_ref, ["children", "className", "isFocused"]);
+      _ref$isHoverable = _ref.isHoverable,
+      isHoverable = _ref$isHoverable === void 0 ? false : _ref$isHoverable,
+      _ref$hasNewThreadedRe = _ref.hasNewThreadedReplies,
+      hasNewThreadedReplies = _ref$hasNewThreadedRe === void 0 ? false : _ref$hasNewThreadedRe,
+      rest = _objectWithoutProperties(_ref, ["children", "className", "isFocused", "isHoverable", "hasNewThreadedReplies"]);
 
   return React.createElement("li", _extends({
     className: classNames('bcs-ActivityItem', className, {
-      'bcs-is-focused': isFocused
+      'bcs-is-focused': isFocused,
+      'bcs-is-hoverable': isHoverable && hasNewThreadedReplies,
+      hasNewThreadedReplies: hasNewThreadedReplies
     }),
     ref: ref
   }, rest), children);

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityItem.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/content-sidebar/activity-feed/activity-feed/ActivityItem.tsx"],"names":["React","classNames","ActivityItem","ref","children","className","isFocused","rest","forwardRef"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;;AAQA,SAASC,YAAT,OAA0EC,GAA1E,EAAyG;AAAA,MAAjFC,QAAiF,QAAjFA,QAAiF;AAAA,MAAvEC,SAAuE,QAAvEA,SAAuE;AAAA,MAA5DC,SAA4D,QAA5DA,SAA4D;AAAA,MAA9CC,IAA8C;;AACrG,SACI;AAAI,IAAA,SAAS,EAAEN,UAAU,CAAC,kBAAD,EAAqBI,SAArB,EAAgC;AAAE,wBAAkBC;AAApB,KAAhC,CAAzB;AAA2F,IAAA,GAAG,EAAEH;AAAhG,KAAyGI,IAAzG,GACKH,QADL,CADJ;AAKH;;AAED,eAAeJ,KAAK,CAACQ,UAAN,CAAiBN,YAAjB,CAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\n\ntype Props = {\n    children: React.ReactNode;\n    className?: string;\n    isFocused?: boolean;\n};\n\nfunction ActivityItem({ children, className, isFocused, ...rest }: Props, ref: React.Ref<HTMLLIElement>) {\n    return (\n        <li className={classNames('bcs-ActivityItem', className, { 'bcs-is-focused': isFocused })} ref={ref} {...rest}>\n            {children}\n        </li>\n    );\n}\n\nexport default React.forwardRef(ActivityItem);\n"],"file":"ActivityItem.js"}
+{"version":3,"sources":["../../../../../src/elements/content-sidebar/activity-feed/activity-feed/ActivityItem.tsx"],"names":["React","classNames","ActivityItem","ref","children","className","isFocused","isHoverable","hasNewThreadedReplies","rest","forwardRef"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,OAAO,qBAAP;;AAUA,SAASC,YAAT,OAEIC,GAFJ,EAGE;AAAA,MAFIC,QAEJ,QAFIA,QAEJ;AAAA,MAFcC,SAEd,QAFcA,SAEd;AAAA,MAFyBC,SAEzB,QAFyBA,SAEzB;AAAA,8BAFoCC,WAEpC;AAAA,MAFoCA,WAEpC,iCAFkD,KAElD;AAAA,mCAFyDC,qBAEzD;AAAA,MAFyDA,qBAEzD,sCAFiF,KAEjF;AAAA,MAF2FC,IAE3F;;AACE,SACI;AACI,IAAA,SAAS,EAAER,UAAU,CAAC,kBAAD,EAAqBI,SAArB,EAAgC;AACjD,wBAAkBC,SAD+B;AAEjD,0BAAoBC,WAAW,IAAIC,qBAFc;AAGjDA,MAAAA,qBAAqB,EAArBA;AAHiD,KAAhC,CADzB;AAMI,IAAA,GAAG,EAAEL;AANT,KAOQM,IAPR,GASKL,QATL,CADJ;AAaH;;AAED,eAAeJ,KAAK,CAACU,UAAN,CAAiBR,YAAjB,CAAf","sourcesContent":["import * as React from 'react';\nimport classNames from 'classnames';\nimport './ActivityItem.scss';\n\ntype Props = {\n    children: React.ReactNode;\n    className?: string;\n    isFocused?: boolean;\n    isHoverable?: boolean;\n    hasNewThreadedReplies?: boolean;\n};\n\nfunction ActivityItem(\n    { children, className, isFocused, isHoverable = false, hasNewThreadedReplies = false, ...rest }: Props,\n    ref: React.Ref<HTMLLIElement>,\n) {\n    return (\n        <li\n            className={classNames('bcs-ActivityItem', className, {\n                'bcs-is-focused': isFocused,\n                'bcs-is-hoverable': isHoverable && hasNewThreadedReplies,\n                hasNewThreadedReplies,\n            })}\n            ref={ref}\n            {...rest}\n        >\n            {children}\n        </li>\n    );\n}\n\nexport default React.forwardRef(ActivityItem);\n"],"file":"ActivityItem.js"}

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityItem.scss

@@ -0,0 +1,28 @@
+@import '../../../common/variables';
+
+.bcs-ActivityItem {
+    &.hasNewThreadedReplies {
+        padding: 2px $bdl-grid-unit * 2;
+
+        & > div {
+            padding: $bdl-grid-unit * 2;
+            padding-right: $bdl-grid-unit * 4;
+        }
+
+        &.bcs-is-hoverable:hover {
+            background-color: $bdl-light-blue-05;
+        }
+    }
+}
+
+.bcs-ActivityItem.bcs-is-focused {
+    &.hasNewThreadedReplies {
+        background-color: $white;
+
+        & > div {
+            background-color: $bdl-light-blue-05;
+            border-radius: $bdl-border-radius-size-med;
+            box-shadow: 0 0 0 2px $bdl-box-blue;
+        }
+    }
+}

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.js

@@ -3,7 +3,6 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import noop from 'lodash/noop';
-import LoadingIndicator from '../../../../components/loading-indicator';
 import PlainButton from '../../../../components/plain-button';
 import ActivityThreadReplies from './ActivityThreadReplies';
 import ActivityThreadReplyForm from './ActivityThreadReplyForm';
@@ -16,9 +15,12 @@ var ActivityThread = function ActivityThread(_ref) {
       getAvatarUrl = _ref.getAvatarUrl,
       getMentionWithQuery = _ref.getMentionWithQuery,
       getUserProfileUrl = _ref.getUserProfileUrl,
+      _ref$hasNewThreadedRe = _ref.hasNewThreadedReplies,
+      hasNewThreadedReplies = _ref$hasNewThreadedRe === void 0 ? false : _ref$hasNewThreadedRe,
       hasReplies = _ref.hasReplies,
       _ref$isAlwaysExpanded = _ref.isAlwaysExpanded,
       isAlwaysExpanded = _ref$isAlwaysExpanded === void 0 ? false : _ref$isAlwaysExpanded,
+      isPending = _ref.isPending,
       isRepliesLoading = _ref.isRepliesLoading,
       mentionSelectorContacts = _ref.mentionSelectorContacts,
       _ref$onHideReplies = _ref.onHideReplies,
@@ -28,6 +30,8 @@ var ActivityThread = function ActivityThread(_ref) {
       onReplyDelete = _ref$onReplyDelete === void 0 ? noop : _ref$onReplyDelete,
       _ref$onReplyEdit = _ref.onReplyEdit,
       onReplyEdit = _ref$onReplyEdit === void 0 ? noop : _ref$onReplyEdit,
+      _ref$onReplySelect = _ref.onReplySelect,
+      onReplySelect = _ref$onReplySelect === void 0 ? noop : _ref$onReplySelect,
       _ref$onShowReplies = _ref.onShowReplies,
       onShowReplies = _ref$onShowReplies === void 0 ? noop : _ref$onShowReplies,
       _ref$replies = _ref.replies,
@@ -44,6 +48,14 @@ var ActivityThread = function ActivityThread(_ref) {
     }
   };
 
+  var handleFormFocusOrShow = function handleFormFocusOrShow() {
+    onReplySelect(true);
+  };
+
+  var handleFormHide = function handleFormHide() {
+    onReplySelect(false);
+  };
+
   var renderButton = function renderButton() {
     if (isAlwaysExpanded || isRepliesLoading) {
       return null;
@@ -81,24 +93,32 @@ var ActivityThread = function ActivityThread(_ref) {
   return React.createElement("div", {
     className: "bcs-ActivityThread",
     "data-testid": "activity-thread"
-  }, children, isRepliesLoading && React.createElement("div", {
-    className: "bcs-ActivityThread-loading",
-    "data-testid": "activity-thread-loading"
-  }, React.createElement(LoadingIndicator, null)), renderButton(), !isRepliesLoading && repliesTotalCount > 0 && repliesLength > 0 && React.createElement(ActivityThreadReplies, {
+  }, React.createElement("div", {
+    className: "bcs-ActivityThread-selectWrapper"
+  }, React.createElement("div", {
+    className: "bcs-ActivityThread-content"
+  }, children, renderButton(), repliesTotalCount > 0 && repliesLength > 0 && React.createElement(ActivityThreadReplies, {
     currentUser: currentUser,
     getAvatarUrl: getAvatarUrl,
     getMentionWithQuery: getMentionWithQuery,
     getUserProfileUrl: getUserProfileUrl,
+    hasNewThreadedReplies: hasNewThreadedReplies,
+    isRepliesLoading: isRepliesLoading,
     mentionSelectorContacts: mentionSelectorContacts,
     onDelete: onReplyDelete,
     onEdit: onReplyEdit,
+    onSelect: onReplySelect,
     replies: replies,
     translations: translations
-  }), onReplyCreate ? React.createElement(ActivityThreadReplyForm, {
+  })), onReplyCreate && React.createElement(ActivityThreadReplyForm, {
     getMentionWithQuery: getMentionWithQuery,
+    isDisabled: isPending,
     mentionSelectorContacts: mentionSelectorContacts,
+    onFocus: handleFormFocusOrShow,
+    onHide: handleFormHide,
+    onShow: handleFormFocusOrShow,
     onReplyCreate: onReplyCreate
-  }) : null);
+  })));
 };
 
 export default ActivityThread;

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.js.flow

@@ -3,7 +3,6 @@ import * as React from 'react';
 import { FormattedMessage } from 'react-intl';
 import noop from 'lodash/noop';
 
-import LoadingIndicator from '../../../../components/loading-indicator';
 import PlainButton from '../../../../components/plain-button';
 import ActivityThreadReplies from './ActivityThreadReplies';
 import ActivityThreadReplyForm from './ActivityThreadReplyForm';
@@ -23,8 +22,10 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
+    hasNewThreadedReplies?: boolean,
     hasReplies: boolean,
     isAlwaysExpanded?: boolean,
+    isPending?: boolean,
     isRepliesLoading?: boolean,
     mentionSelectorContacts?: SelectorItems<>,
     onHideReplies?: (lastReply: CommentType) => void,
@@ -39,6 +40,7 @@ type Props = {
         onSuccess: ?Function,
         onError: ?Function,
     ) => void,
+    onReplySelect?: (isSelected: boolean) => void,
     onShowReplies?: () => void,
     replies?: Array<CommentType>,
     repliesTotalCount?: number,
@@ -51,14 +53,17 @@ const ActivityThread = ({
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
+    hasNewThreadedReplies = false,
     hasReplies,
     isAlwaysExpanded = false,
+    isPending,
     isRepliesLoading,
     mentionSelectorContacts,
     onHideReplies = noop,
     onReplyCreate,
     onReplyDelete = noop,
     onReplyEdit = noop,
+    onReplySelect = noop,
     onShowReplies = noop,
     replies = [],
     repliesTotalCount = 0,
@@ -73,6 +78,14 @@ const ActivityThread = ({
         }
     };
 
+    const handleFormFocusOrShow = () => {
+        onReplySelect(true);
+    };
+
+    const handleFormHide = () => {
+        onReplySelect(false);
+    };
+
     const renderButton = () => {
         if (isAlwaysExpanded || isRepliesLoading) {
             return null;
@@ -111,36 +124,42 @@ const ActivityThread = ({
     }
     return (
         <div className="bcs-ActivityThread" data-testid="activity-thread">
-            {children}
+            <div className="bcs-ActivityThread-selectWrapper">
+                <div className="bcs-ActivityThread-content">
+                    {children}
+
+                    {renderButton()}
 
-            {isRepliesLoading && (
-                <div className="bcs-ActivityThread-loading" data-testid="activity-thread-loading">
-                    <LoadingIndicator />
+                    {repliesTotalCount > 0 && repliesLength > 0 && (
+                        <ActivityThreadReplies
+                            currentUser={currentUser}
+                            getAvatarUrl={getAvatarUrl}
+                            getMentionWithQuery={getMentionWithQuery}
+                            getUserProfileUrl={getUserProfileUrl}
+                            hasNewThreadedReplies={hasNewThreadedReplies}
+                            isRepliesLoading={isRepliesLoading}
+                            mentionSelectorContacts={mentionSelectorContacts}
+                            onDelete={onReplyDelete}
+                            onEdit={onReplyEdit}
+                            onSelect={onReplySelect}
+                            replies={replies}
+                            translations={translations}
+                        />
+                    )}
                 </div>
-            )}
-            {renderButton()}
-
-            {!isRepliesLoading && repliesTotalCount > 0 && repliesLength > 0 && (
-                <ActivityThreadReplies
-                    currentUser={currentUser}
-                    getAvatarUrl={getAvatarUrl}
-                    getMentionWithQuery={getMentionWithQuery}
-                    getUserProfileUrl={getUserProfileUrl}
-                    mentionSelectorContacts={mentionSelectorContacts}
-                    onDelete={onReplyDelete}
-                    onEdit={onReplyEdit}
-                    replies={replies}
-                    translations={translations}
-                />
-            )}
-
-            {onReplyCreate ? (
-                <ActivityThreadReplyForm
-                    getMentionWithQuery={getMentionWithQuery}
-                    mentionSelectorContacts={mentionSelectorContacts}
-                    onReplyCreate={onReplyCreate}
-                />
-            ) : null}
+
+                {onReplyCreate && (
+                    <ActivityThreadReplyForm
+                        getMentionWithQuery={getMentionWithQuery}
+                        isDisabled={isPending}
+                        mentionSelectorContacts={mentionSelectorContacts}
+                        onFocus={handleFormFocusOrShow}
+                        onHide={handleFormHide}
+                        onShow={handleFormFocusOrShow}
+                        onReplyCreate={onReplyCreate}
+                    />
+                )}
+            </div>
         </div>
     );
 };

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.js"],"names":["React","FormattedMessage","noop","LoadingIndicator","PlainButton","ActivityThreadReplies","ActivityThreadReplyForm","messages","ActivityThread","children","currentUser","getAvatarUrl","getMentionWithQuery","getUserProfileUrl","hasReplies","isAlwaysExpanded","isRepliesLoading","mentionSelectorContacts","onHideReplies","onReplyCreate","onReplyDelete","onReplyEdit","onShowReplies","replies","repliesTotalCount","translations","repliesLength","length","repliesToLoadCount","Math","max","onHideRepliesHandler","renderButton","showReplies","hideReplies"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport noop from 'lodash/noop';\n\nimport LoadingIndicator from '../../../../components/loading-indicator';\nimport PlainButton from '../../../../components/plain-button';\nimport ActivityThreadReplies from './ActivityThreadReplies';\nimport ActivityThreadReplyForm from './ActivityThreadReplyForm';\n\nimport type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';\nimport type { Translations } from '../../flowTypes';\nimport type { SelectorItems, User } from '../../../../common/types/core';\nimport type { BoxCommentPermission, Comment as CommentType, FeedItemStatus } from '../../../../common/types/feed';\n\nimport messages from './messages';\n\nimport './ActivityThread.scss';\n\ntype Props = {\n    children: React.Node,\n    currentUser?: User,\n    getAvatarUrl: GetAvatarUrlCallback,\n    getMentionWithQuery?: Function,\n    getUserProfileUrl?: GetProfileUrlCallback,\n    hasReplies: boolean,\n    isAlwaysExpanded?: boolean,\n    isRepliesLoading?: boolean,\n    mentionSelectorContacts?: SelectorItems<>,\n    onHideReplies?: (lastReply: CommentType) => void,\n    onReplyCreate?: (text: string) => void,\n    onReplyDelete?: ({ id: string, permissions: BoxCommentPermission }) => void,\n    onReplyEdit?: (\n        id: string,\n        text: string,\n        status?: FeedItemStatus,\n        hasMention?: boolean,\n        permissions: BoxCommentPermission,\n        onSuccess: ?Function,\n        onError: ?Function,\n    ) => void,\n    onShowReplies?: () => void,\n    replies?: Array<CommentType>,\n    repliesTotalCount?: number,\n    translations?: Translations,\n};\n\nconst ActivityThread = ({\n    children,\n    currentUser,\n    getAvatarUrl,\n    getMentionWithQuery,\n    getUserProfileUrl,\n    hasReplies,\n    isAlwaysExpanded = false,\n    isRepliesLoading,\n    mentionSelectorContacts,\n    onHideReplies = noop,\n    onReplyCreate,\n    onReplyDelete = noop,\n    onReplyEdit = noop,\n    onShowReplies = noop,\n    replies = [],\n    repliesTotalCount = 0,\n    translations,\n}: Props) => {\n    const { length: repliesLength } = replies;\n    const repliesToLoadCount = Math.max(repliesTotalCount - repliesLength, 0);\n\n    const onHideRepliesHandler = () => {\n        if (repliesLength) {\n            onHideReplies(replies[repliesLength - 1]);\n        }\n    };\n\n    const renderButton = () => {\n        if (isAlwaysExpanded || isRepliesLoading) {\n            return null;\n        }\n\n        if (repliesTotalCount > repliesLength) {\n            return (\n                <PlainButton\n                    className=\"bcs-ActivityThread-toggle\"\n                    onClick={onShowReplies}\n                    type=\"button\"\n                    data-testid=\"activity-thread-button\"\n                >\n                    <FormattedMessage values={{ repliesToLoadCount }} {...messages.showReplies} />\n                </PlainButton>\n            );\n        }\n        if (repliesTotalCount > 1 && repliesTotalCount === repliesLength) {\n            return (\n                <PlainButton\n                    className=\"bcs-ActivityThread-toggle\"\n                    onClick={onHideRepliesHandler}\n                    type=\"button\"\n                    data-testid=\"activity-thread-button\"\n                >\n                    <FormattedMessage {...messages.hideReplies} />\n                </PlainButton>\n            );\n        }\n\n        return null;\n    };\n\n    if (!hasReplies) {\n        return children;\n    }\n    return (\n        <div className=\"bcs-ActivityThread\" data-testid=\"activity-thread\">\n            {children}\n\n            {isRepliesLoading && (\n                <div className=\"bcs-ActivityThread-loading\" data-testid=\"activity-thread-loading\">\n                    <LoadingIndicator />\n                </div>\n            )}\n            {renderButton()}\n\n            {!isRepliesLoading && repliesTotalCount > 0 && repliesLength > 0 && (\n                <ActivityThreadReplies\n                    currentUser={currentUser}\n                    getAvatarUrl={getAvatarUrl}\n                    getMentionWithQuery={getMentionWithQuery}\n                    getUserProfileUrl={getUserProfileUrl}\n                    mentionSelectorContacts={mentionSelectorContacts}\n                    onDelete={onReplyDelete}\n                    onEdit={onReplyEdit}\n                    replies={replies}\n                    translations={translations}\n                />\n            )}\n\n            {onReplyCreate ? (\n                <ActivityThreadReplyForm\n                    getMentionWithQuery={getMentionWithQuery}\n                    mentionSelectorContacts={mentionSelectorContacts}\n                    onReplyCreate={onReplyCreate}\n                />\n            ) : null}\n        </div>\n    );\n};\n\nexport default ActivityThread;\n"],"file":"ActivityThread.js"}
+{"version":3,"sources":["../../../../../src/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.js"],"names":["React","FormattedMessage","noop","PlainButton","ActivityThreadReplies","ActivityThreadReplyForm","messages","ActivityThread","children","currentUser","getAvatarUrl","getMentionWithQuery","getUserProfileUrl","hasNewThreadedReplies","hasReplies","isAlwaysExpanded","isPending","isRepliesLoading","mentionSelectorContacts","onHideReplies","onReplyCreate","onReplyDelete","onReplyEdit","onReplySelect","onShowReplies","replies","repliesTotalCount","translations","repliesLength","length","repliesToLoadCount","Math","max","onHideRepliesHandler","handleFormFocusOrShow","handleFormHide","renderButton","showReplies","hideReplies"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage } from 'react-intl';\nimport noop from 'lodash/noop';\n\nimport PlainButton from '../../../../components/plain-button';\nimport ActivityThreadReplies from './ActivityThreadReplies';\nimport ActivityThreadReplyForm from './ActivityThreadReplyForm';\n\nimport type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';\nimport type { Translations } from '../../flowTypes';\nimport type { SelectorItems, User } from '../../../../common/types/core';\nimport type { BoxCommentPermission, Comment as CommentType, FeedItemStatus } from '../../../../common/types/feed';\n\nimport messages from './messages';\n\nimport './ActivityThread.scss';\n\ntype Props = {\n    children: React.Node,\n    currentUser?: User,\n    getAvatarUrl: GetAvatarUrlCallback,\n    getMentionWithQuery?: Function,\n    getUserProfileUrl?: GetProfileUrlCallback,\n    hasNewThreadedReplies?: boolean,\n    hasReplies: boolean,\n    isAlwaysExpanded?: boolean,\n    isPending?: boolean,\n    isRepliesLoading?: boolean,\n    mentionSelectorContacts?: SelectorItems<>,\n    onHideReplies?: (lastReply: CommentType) => void,\n    onReplyCreate?: (text: string) => void,\n    onReplyDelete?: ({ id: string, permissions: BoxCommentPermission }) => void,\n    onReplyEdit?: (\n        id: string,\n        text: string,\n        status?: FeedItemStatus,\n        hasMention?: boolean,\n        permissions: BoxCommentPermission,\n        onSuccess: ?Function,\n        onError: ?Function,\n    ) => void,\n    onReplySelect?: (isSelected: boolean) => void,\n    onShowReplies?: () => void,\n    replies?: Array<CommentType>,\n    repliesTotalCount?: number,\n    translations?: Translations,\n};\n\nconst ActivityThread = ({\n    children,\n    currentUser,\n    getAvatarUrl,\n    getMentionWithQuery,\n    getUserProfileUrl,\n    hasNewThreadedReplies = false,\n    hasReplies,\n    isAlwaysExpanded = false,\n    isPending,\n    isRepliesLoading,\n    mentionSelectorContacts,\n    onHideReplies = noop,\n    onReplyCreate,\n    onReplyDelete = noop,\n    onReplyEdit = noop,\n    onReplySelect = noop,\n    onShowReplies = noop,\n    replies = [],\n    repliesTotalCount = 0,\n    translations,\n}: Props) => {\n    const { length: repliesLength } = replies;\n    const repliesToLoadCount = Math.max(repliesTotalCount - repliesLength, 0);\n\n    const onHideRepliesHandler = () => {\n        if (repliesLength) {\n            onHideReplies(replies[repliesLength - 1]);\n        }\n    };\n\n    const handleFormFocusOrShow = () => {\n        onReplySelect(true);\n    };\n\n    const handleFormHide = () => {\n        onReplySelect(false);\n    };\n\n    const renderButton = () => {\n        if (isAlwaysExpanded || isRepliesLoading) {\n            return null;\n        }\n\n        if (repliesTotalCount > repliesLength) {\n            return (\n                <PlainButton\n                    className=\"bcs-ActivityThread-toggle\"\n                    onClick={onShowReplies}\n                    type=\"button\"\n                    data-testid=\"activity-thread-button\"\n                >\n                    <FormattedMessage values={{ repliesToLoadCount }} {...messages.showReplies} />\n                </PlainButton>\n            );\n        }\n        if (repliesTotalCount > 1 && repliesTotalCount === repliesLength) {\n            return (\n                <PlainButton\n                    className=\"bcs-ActivityThread-toggle\"\n                    onClick={onHideRepliesHandler}\n                    type=\"button\"\n                    data-testid=\"activity-thread-button\"\n                >\n                    <FormattedMessage {...messages.hideReplies} />\n                </PlainButton>\n            );\n        }\n\n        return null;\n    };\n\n    if (!hasReplies) {\n        return children;\n    }\n    return (\n        <div className=\"bcs-ActivityThread\" data-testid=\"activity-thread\">\n            <div className=\"bcs-ActivityThread-selectWrapper\">\n                <div className=\"bcs-ActivityThread-content\">\n                    {children}\n\n                    {renderButton()}\n\n                    {repliesTotalCount > 0 && repliesLength > 0 && (\n                        <ActivityThreadReplies\n                            currentUser={currentUser}\n                            getAvatarUrl={getAvatarUrl}\n                            getMentionWithQuery={getMentionWithQuery}\n                            getUserProfileUrl={getUserProfileUrl}\n                            hasNewThreadedReplies={hasNewThreadedReplies}\n                            isRepliesLoading={isRepliesLoading}\n                            mentionSelectorContacts={mentionSelectorContacts}\n                            onDelete={onReplyDelete}\n                            onEdit={onReplyEdit}\n                            onSelect={onReplySelect}\n                            replies={replies}\n                            translations={translations}\n                        />\n                    )}\n                </div>\n\n                {onReplyCreate && (\n                    <ActivityThreadReplyForm\n                        getMentionWithQuery={getMentionWithQuery}\n                        isDisabled={isPending}\n                        mentionSelectorContacts={mentionSelectorContacts}\n                        onFocus={handleFormFocusOrShow}\n                        onHide={handleFormHide}\n                        onShow={handleFormFocusOrShow}\n                        onReplyCreate={onReplyCreate}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n\nexport default ActivityThread;\n"],"file":"ActivityThread.js"}

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityThread.scss

@@ -1,21 +1,63 @@
 @import '../../../common/variables';
 
+$sidebarThreadedActivityCardSpacingTop: 10px;
+$sidebarThreadedActivityCardSpacingHorizontal: $sidebarActivityFeedSpacingHorizontal - $sidebarActivityFeedSelectedItemSpacing;
+$sidebarActivityFeedSelectedItemBorderWidth: 2px;
+
 .bcs-ActivityThread {
+    padding: $sidebarActivityFeedSelectedItemBorderWidth $sidebarActivityFeedSelectedItemSpacing;
+    box-shadow: 0 1px 0 0 $bdl-gray-10;
+
+    &:hover {
+        background-color: $bdl-light-blue-05;
+    }
+
+    .bcs-ActivityThread-selectWrapper {
+        padding-bottom: $sidebarActivityFeedSpacingVertical - $sidebarActivityFeedSelectedItemBorderWidth;
+    }
+
+    .bcs-ActivityCard {
+        padding: $sidebarThreadedActivityCardSpacingTop $sidebarThreadedActivityCardSpacingHorizontal $sidebarActivityFeedSpacingVertical;
+    }
+
+    .bcs-ActivityThread-content > .bcs-ActivityCard {
+        padding-top: $sidebarThreadedActivityCardSpacingTop - $sidebarActivityFeedSelectedItemBorderWidth;
+    }
+
     .bcs-ActivityThread-toggle {
         color: $bdl-box-blue;
 
         &,
         &:hover,
         &:active {
-            margin-top: -$bdl-grid-unit * 2; // to decreased spacing with parent comment
+            margin-bottom: $sidebarActivityFeedSpacingVertical;
             margin-left: $sidebarActivityFeedSpacingHorizontal;
             font-weight: bold;
         }
     }
 
-    .bcs-ActivityCard {
-        margin: $sidebarActivityFeedSpacingVertical $sidebarActivityFeedSpacingHorizontal;
-        padding: 0;
+    .bcs-SelectableActivityCard[aria-disabled='false'] {
+        &:hover,
+        &:focus {
+            background-color: transparent;
+            box-shadow: none;
+        }
+    }
+
+    .bcs-AnnotationActivity-menu {
+        top: 10px;
+    }
+
+    .bcs-Comment-timestamp {
+        margin-bottom: 16px;
+
+        .bcs-ActivityTimestamp {
+            color: $bdl-gray;
+        }
+    }
+
+    .bcs-CommentForm-input {
+        background-color: $white;
     }
 
     .btn-plain:focus-visible {
@@ -23,6 +65,27 @@
     }
 }
 
-.bcs-ActivityThread-loading {
-    padding-bottom: $bdl-grid-unit * 5;
+.bcs-ActivityItem.bcs-is-focused .bcs-ActivityThread {
+    box-shadow: none;
+
+    &,
+    &:hover {
+        background-color: $white;
+    }
+
+    .bcs-ActivityThread-selectWrapper {
+        background-color: $bdl-light-blue-05;
+        border-radius: $bdl-border-radius-size-med;
+        box-shadow: 0 0 0 $sidebarActivityFeedSelectedItemBorderWidth $bdl-box-blue;
+    }
+}
+
+.be .bcs-activity-feed .bcs-activity-feed-items-container .bcs-ActivityItem.bcs-is-focused .bcs-ActivityThread .bcs-ActivityCard {
+    box-shadow: none;
+    animation: none;
+}
+
+// Disable legacy annotation select indicator (orange bar)
+.be .bcs-activity-feed-annotation-activity.bcs-ActivityItem.bcs-is-focused .bcs-ActivityThread .bcs-ActivityCard::before {
+    content: none;
 }

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.js

@@ -2,6 +2,8 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 import React from 'react';
 import Comment from '../comment';
+import LoadingIndicator from '../../../../components/loading-indicator';
+import { BaseComment } from '../comment/BaseComment';
 import './ActivityThreadReplies.scss';
 
 var ActivityThreadReplies = function ActivityThreadReplies(_ref) {
@@ -9,9 +11,13 @@ var ActivityThreadReplies = function ActivityThreadReplies(_ref) {
       getAvatarUrl = _ref.getAvatarUrl,
       getMentionWithQuery = _ref.getMentionWithQuery,
       getUserProfileUrl = _ref.getUserProfileUrl,
+      _ref$hasNewThreadedRe = _ref.hasNewThreadedReplies,
+      hasNewThreadedReplies = _ref$hasNewThreadedRe === void 0 ? false : _ref$hasNewThreadedRe,
+      isRepliesLoading = _ref.isRepliesLoading,
       mentionSelectorContacts = _ref.mentionSelectorContacts,
       onDelete = _ref.onDelete,
       onEdit = _ref.onEdit,
+      onSelect = _ref.onSelect,
       replies = _ref.replies,
       translations = _ref.translations;
 
@@ -31,10 +37,24 @@ var ActivityThreadReplies = function ActivityThreadReplies(_ref) {
     };
   };
 
-  return React.createElement("div", {
-    className: "bcs-ActivityThreadReplies",
-    "data-testid": "activity-thread-replies"
-  }, replies.map(function (reply) {
+  var renderComment = function renderComment(reply) {
+    if (hasNewThreadedReplies) {
+      return React.createElement(BaseComment, _extends({
+        key: "".concat(reply.type).concat(reply.id)
+      }, reply, {
+        currentUser: currentUser,
+        getAvatarUrl: getAvatarUrl,
+        getMentionWithQuery: getMentionWithQuery,
+        getUserProfileUrl: getUserProfileUrl,
+        mentionSelectorContacts: mentionSelectorContacts,
+        onDelete: onDelete,
+        onEdit: onEdit,
+        onSelect: onSelect,
+        permissions: getReplyPermissions(reply),
+        translations: translations
+      }));
+    }
+
     return React.createElement(Comment, _extends({
       key: "".concat(reply.type).concat(reply.id)
     }, reply, {
@@ -45,9 +65,20 @@ var ActivityThreadReplies = function ActivityThreadReplies(_ref) {
       mentionSelectorContacts: mentionSelectorContacts,
       onDelete: onDelete,
       onEdit: onEdit,
+      onSelect: onSelect,
       permissions: getReplyPermissions(reply),
       translations: translations
     }));
+  };
+
+  return React.createElement("div", {
+    className: "bcs-ActivityThreadReplies",
+    "data-testid": "activity-thread-replies"
+  }, isRepliesLoading && React.createElement("div", {
+    className: "bcs-ActivityThreadReplies-loading",
+    "data-testid": "activity-thread-replies-loading"
+  }, React.createElement(LoadingIndicator, null)), replies.map(function (reply) {
+    return renderComment(reply);
   }));
 };
 

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.js.flow

@@ -1,6 +1,8 @@
 // @flow
 import React from 'react';
 import Comment from '../comment';
+import LoadingIndicator from '../../../../components/loading-indicator';
+import { BaseComment } from '../comment/BaseComment';
 
 import type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';
 import type { Translations } from '../../flowTypes';
@@ -14,9 +16,12 @@ type Props = {
     getAvatarUrl: GetAvatarUrlCallback,
     getMentionWithQuery?: Function,
     getUserProfileUrl?: GetProfileUrlCallback,
+    hasNewThreadedReplies?: boolean,
+    isRepliesLoading?: boolean,
     mentionSelectorContacts?: SelectorItems<>,
     onDelete?: Function,
     onEdit?: Function,
+    onSelect?: (isSelected: boolean) => void,
     replies: Array<CommentType>,
     translations?: Translations,
 };
@@ -26,9 +31,12 @@ const ActivityThreadReplies = ({
     getAvatarUrl,
     getMentionWithQuery,
     getUserProfileUrl,
+    hasNewThreadedReplies = false,
+    isRepliesLoading,
     mentionSelectorContacts,
     onDelete,
     onEdit,
+    onSelect,
     replies,
     translations,
 }: Props) => {
@@ -41,10 +49,10 @@ const ActivityThreadReplies = ({
         };
     };
 
-    return (
-        <div className="bcs-ActivityThreadReplies" data-testid="activity-thread-replies">
-            {replies.map((reply: CommentType) => (
-                <Comment
+    const renderComment = (reply: CommentType) => {
+        if (hasNewThreadedReplies) {
+            return (
+                <BaseComment
                     key={`${reply.type}${reply.id}`}
                     {...reply}
                     currentUser={currentUser}
@@ -54,10 +62,39 @@ const ActivityThreadReplies = ({
                     mentionSelectorContacts={mentionSelectorContacts}
                     onDelete={onDelete}
                     onEdit={onEdit}
+                    onSelect={onSelect}
                     permissions={getReplyPermissions(reply)}
                     translations={translations}
                 />
-            ))}
+            );
+        }
+
+        return (
+            <Comment
+                key={`${reply.type}${reply.id}`}
+                {...reply}
+                currentUser={currentUser}
+                getAvatarUrl={getAvatarUrl}
+                getMentionWithQuery={getMentionWithQuery}
+                getUserProfileUrl={getUserProfileUrl}
+                mentionSelectorContacts={mentionSelectorContacts}
+                onDelete={onDelete}
+                onEdit={onEdit}
+                onSelect={onSelect}
+                permissions={getReplyPermissions(reply)}
+                translations={translations}
+            />
+        );
+    };
+
+    return (
+        <div className="bcs-ActivityThreadReplies" data-testid="activity-thread-replies">
+            {isRepliesLoading && (
+                <div className="bcs-ActivityThreadReplies-loading" data-testid="activity-thread-replies-loading">
+                    <LoadingIndicator />
+                </div>
+            )}
+            {replies.map((reply: CommentType) => renderComment(reply))}
         </div>
     );
 };

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.js"],"names":["React","Comment","ActivityThreadReplies","currentUser","getAvatarUrl","getMentionWithQuery","getUserProfileUrl","mentionSelectorContacts","onDelete","onEdit","replies","translations","getReplyPermissions","reply","permissions","can_delete","can_edit","can_resolve","map","type","id"],"mappings":";;AACA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,OAAP,MAAoB,YAApB;AAOA,OAAO,8BAAP;;AAcA,IAAMC,qBAAqB,GAAG,SAAxBA,qBAAwB,OAUjB;AAAA,MATTC,WASS,QATTA,WASS;AAAA,MARTC,YAQS,QARTA,YAQS;AAAA,MAPTC,mBAOS,QAPTA,mBAOS;AAAA,MANTC,iBAMS,QANTA,iBAMS;AAAA,MALTC,uBAKS,QALTA,uBAKS;AAAA,MAJTC,QAIS,QAJTA,QAIS;AAAA,MAHTC,MAGS,QAHTA,MAGS;AAAA,MAFTC,OAES,QAFTA,OAES;AAAA,MADTC,YACS,QADTA,YACS;;AACT,MAAMC,mBAAmB,GAAG,SAAtBA,mBAAsB,CAACC,KAAD,EAA8C;AAAA,6BACsBA,KADtB,CAC9DC,WAD8D;AAAA,yDACe,EADf;AAAA,mDAC/CC,UAD+C;AAAA,QAC/CA,UAD+C,sCAClC,KADkC;AAAA,oDAC3BC,QAD2B;AAAA,QAC3BA,QAD2B,uCAChB,KADgB;AAAA,oDACTC,WADS;AAAA,QACTA,WADS,uCACK,KADL;AAEtE,WAAO;AACHF,MAAAA,UAAU,EAAVA,UADG;AAEHC,MAAAA,QAAQ,EAARA,QAFG;AAGHC,MAAAA,WAAW,EAAXA;AAHG,KAAP;AAKH,GAPD;;AASA,SACI;AAAK,IAAA,SAAS,EAAC,2BAAf;AAA2C,mBAAY;AAAvD,KACKP,OAAO,CAACQ,GAAR,CAAY,UAACL,KAAD;AAAA,WACT,oBAAC,OAAD;AACI,MAAA,GAAG,YAAKA,KAAK,CAACM,IAAX,SAAkBN,KAAK,CAACO,EAAxB;AADP,OAEQP,KAFR;AAGI,MAAA,WAAW,EAAEV,WAHjB;AAII,MAAA,YAAY,EAAEC,YAJlB;AAKI,MAAA,mBAAmB,EAAEC,mBALzB;AAMI,MAAA,iBAAiB,EAAEC,iBANvB;AAOI,MAAA,uBAAuB,EAAEC,uBAP7B;AAQI,MAAA,QAAQ,EAAEC,QARd;AASI,MAAA,MAAM,EAAEC,MATZ;AAUI,MAAA,WAAW,EAAEG,mBAAmB,CAACC,KAAD,CAVpC;AAWI,MAAA,YAAY,EAAEF;AAXlB,OADS;AAAA,GAAZ,CADL,CADJ;AAmBH,CAvCD;;AAyCA,eAAeT,qBAAf","sourcesContent":["// @flow\nimport React from 'react';\nimport Comment from '../comment';\n\nimport type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';\nimport type { Translations } from '../../flowTypes';\nimport type { SelectorItems, User } from '../../../../common/types/core';\nimport type { BoxCommentPermission, Comment as CommentType } from '../../../../common/types/feed';\n\nimport './ActivityThreadReplies.scss';\n\ntype Props = {\n    currentUser?: User,\n    getAvatarUrl: GetAvatarUrlCallback,\n    getMentionWithQuery?: Function,\n    getUserProfileUrl?: GetProfileUrlCallback,\n    mentionSelectorContacts?: SelectorItems<>,\n    onDelete?: Function,\n    onEdit?: Function,\n    replies: Array<CommentType>,\n    translations?: Translations,\n};\n\nconst ActivityThreadReplies = ({\n    currentUser,\n    getAvatarUrl,\n    getMentionWithQuery,\n    getUserProfileUrl,\n    mentionSelectorContacts,\n    onDelete,\n    onEdit,\n    replies,\n    translations,\n}: Props) => {\n    const getReplyPermissions = (reply: CommentType): BoxCommentPermission => {\n        const { permissions: { can_delete = false, can_edit = false, can_resolve = false } = {} } = reply;\n        return {\n            can_delete,\n            can_edit,\n            can_resolve,\n        };\n    };\n\n    return (\n        <div className=\"bcs-ActivityThreadReplies\" data-testid=\"activity-thread-replies\">\n            {replies.map((reply: CommentType) => (\n                <Comment\n                    key={`${reply.type}${reply.id}`}\n                    {...reply}\n                    currentUser={currentUser}\n                    getAvatarUrl={getAvatarUrl}\n                    getMentionWithQuery={getMentionWithQuery}\n                    getUserProfileUrl={getUserProfileUrl}\n                    mentionSelectorContacts={mentionSelectorContacts}\n                    onDelete={onDelete}\n                    onEdit={onEdit}\n                    permissions={getReplyPermissions(reply)}\n                    translations={translations}\n                />\n            ))}\n        </div>\n    );\n};\n\nexport default ActivityThreadReplies;\n"],"file":"ActivityThreadReplies.js"}
+{"version":3,"sources":["../../../../../src/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.js"],"names":["React","Comment","LoadingIndicator","BaseComment","ActivityThreadReplies","currentUser","getAvatarUrl","getMentionWithQuery","getUserProfileUrl","hasNewThreadedReplies","isRepliesLoading","mentionSelectorContacts","onDelete","onEdit","onSelect","replies","translations","getReplyPermissions","reply","permissions","can_delete","can_edit","can_resolve","renderComment","type","id","map"],"mappings":"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","sourcesContent":["// @flow\nimport React from 'react';\nimport Comment from '../comment';\nimport LoadingIndicator from '../../../../components/loading-indicator';\nimport { BaseComment } from '../comment/BaseComment';\n\nimport type { GetAvatarUrlCallback, GetProfileUrlCallback } from '../../../common/flowTypes';\nimport type { Translations } from '../../flowTypes';\nimport type { SelectorItems, User } from '../../../../common/types/core';\nimport type { BoxCommentPermission, Comment as CommentType } from '../../../../common/types/feed';\n\nimport './ActivityThreadReplies.scss';\n\ntype Props = {\n    currentUser?: User,\n    getAvatarUrl: GetAvatarUrlCallback,\n    getMentionWithQuery?: Function,\n    getUserProfileUrl?: GetProfileUrlCallback,\n    hasNewThreadedReplies?: boolean,\n    isRepliesLoading?: boolean,\n    mentionSelectorContacts?: SelectorItems<>,\n    onDelete?: Function,\n    onEdit?: Function,\n    onSelect?: (isSelected: boolean) => void,\n    replies: Array<CommentType>,\n    translations?: Translations,\n};\n\nconst ActivityThreadReplies = ({\n    currentUser,\n    getAvatarUrl,\n    getMentionWithQuery,\n    getUserProfileUrl,\n    hasNewThreadedReplies = false,\n    isRepliesLoading,\n    mentionSelectorContacts,\n    onDelete,\n    onEdit,\n    onSelect,\n    replies,\n    translations,\n}: Props) => {\n    const getReplyPermissions = (reply: CommentType): BoxCommentPermission => {\n        const { permissions: { can_delete = false, can_edit = false, can_resolve = false } = {} } = reply;\n        return {\n            can_delete,\n            can_edit,\n            can_resolve,\n        };\n    };\n\n    const renderComment = (reply: CommentType) => {\n        if (hasNewThreadedReplies) {\n            return (\n                <BaseComment\n                    key={`${reply.type}${reply.id}`}\n                    {...reply}\n                    currentUser={currentUser}\n                    getAvatarUrl={getAvatarUrl}\n                    getMentionWithQuery={getMentionWithQuery}\n                    getUserProfileUrl={getUserProfileUrl}\n                    mentionSelectorContacts={mentionSelectorContacts}\n                    onDelete={onDelete}\n                    onEdit={onEdit}\n                    onSelect={onSelect}\n                    permissions={getReplyPermissions(reply)}\n                    translations={translations}\n                />\n            );\n        }\n\n        return (\n            <Comment\n                key={`${reply.type}${reply.id}`}\n                {...reply}\n                currentUser={currentUser}\n                getAvatarUrl={getAvatarUrl}\n                getMentionWithQuery={getMentionWithQuery}\n                getUserProfileUrl={getUserProfileUrl}\n                mentionSelectorContacts={mentionSelectorContacts}\n                onDelete={onDelete}\n                onEdit={onEdit}\n                onSelect={onSelect}\n                permissions={getReplyPermissions(reply)}\n                translations={translations}\n            />\n        );\n    };\n\n    return (\n        <div className=\"bcs-ActivityThreadReplies\" data-testid=\"activity-thread-replies\">\n            {isRepliesLoading && (\n                <div className=\"bcs-ActivityThreadReplies-loading\" data-testid=\"activity-thread-replies-loading\">\n                    <LoadingIndicator />\n                </div>\n            )}\n            {replies.map((reply: CommentType) => renderComment(reply))}\n        </div>\n    );\n};\n\nexport default ActivityThreadReplies;\n"],"file":"ActivityThreadReplies.js"}

package/es/elements/content-sidebar/activity-feed/activity-feed/ActivityThreadReplies.scss

@@ -2,6 +2,7 @@
 
 .bcs-ActivityThreadReplies {
     position: relative;
+    margin-bottom: $sidebarActivityFeedSpacingVertical;
     padding-left: $sidebarActivityFeedSpacingHorizontal;
 
     &::before {
@@ -14,4 +15,18 @@
         border-radius: $bdl-border-radius-size;
         content: '';
     }
+
+    .bcs-ActivityCard {
+        &:first-child {
+            padding-top: 0;
+        }
+
+        &:last-child {
+            padding-bottom: 0;
+        }
+    }
+}
+
+.bcs-ActivityThreadReplies-loading {
+    padding-bottom: $bdl-grid-unit * 5;
 }