box-ui-elements 15.0.0-beta.7 → 15.0.0

package/es/features/header-flyout/HeaderFlyout.js.flow

@@ -1,7 +1,7 @@
 // @flow
 import * as React from 'react';
 import classNames from 'classnames';
-import { Flyout, Overlay } from '../../components/flyout';
+import { Flyout, Overlay, OverlayHeader } from '../../components/flyout';
 import ScrollWrapper from '../../components/scroll-wrapper';
 import type { FlyoutProps } from '../../components/flyout/Flyout';
 
@@ -34,20 +34,16 @@ class HeaderFlyout extends React.Component<Props> {
 
         return (
             <Flyout
-                closeOnClick={false}
-                offset={HeaderFlyout.panelOffset}
                 className={classNames('header-flyout', className)}
+                closeOnClick={false}
                 constrainToWindow
+                offset={HeaderFlyout.panelOffset}
                 {...rest}
             >
                 {flyoutButton}
                 <Overlay className="header-flyout-overlay">
+                    <OverlayHeader>{header && <h4 className="header-flyout-title">{header}</h4>}</OverlayHeader>
                     <div className="header-flyout-list-container">
-                        {header && (
-                            <div className="flyout-list-container-title">
-                                <h4 className="flyout-list-title">{header}</h4>
-                            </div>
-                        )}
                         <div
                             className={classNames('flyout-list-container-body', {
                                 'with-header': !!header,

package/es/features/header-flyout/HeaderFlyout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/header-flyout/HeaderFlyout.js"],"names":["React","classNames","Flyout","Overlay","ScrollWrapper","HeaderFlyout","props","header","footer","flyoutButton","children","scrollRefFn","className","rest","panelOffset","Component","position"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,MAAT,EAAiBC,OAAjB,QAAgC,yBAAhC;AACA,OAAOC,aAAP,MAA0B,iCAA1B;AAGA,OAAO,4BAAP;;IAiBMC,Y;;;;;;;;;;;;;6BAOO;AAAA,wBAC+E,KAAKC,KADpF;AAAA,UACGC,MADH,eACGA,MADH;AAAA,UACWC,MADX,eACWA,MADX;AAAA,UACmBC,YADnB,eACmBA,YADnB;AAAA,UACiCC,QADjC,eACiCA,QADjC;AAAA,UAC2CC,WAD3C,eAC2CA,WAD3C;AAAA,UACwDC,SADxD,eACwDA,SADxD;AAAA,UACsEC,IADtE;;AAGL,aACI,oBAAC,MAAD;AACI,QAAA,YAAY,EAAE,KADlB;AAEI,QAAA,MAAM,EAAER,YAAY,CAACS,WAFzB;AAGI,QAAA,SAAS,EAAEb,UAAU,CAAC,eAAD,EAAkBW,SAAlB,CAHzB;AAII,QAAA,iBAAiB;AAJrB,SAKQC,IALR,GAOKJ,YAPL,EAQI,oBAAC,OAAD;AAAS,QAAA,SAAS,EAAC;AAAnB,SACI;AAAK,QAAA,SAAS,EAAC;AAAf,SACKF,MAAM,IACH;AAAK,QAAA,SAAS,EAAC;AAAf,SACI;AAAI,QAAA,SAAS,EAAC;AAAd,SAAmCA,MAAnC,CADJ,CAFR,EAMI;AACI,QAAA,SAAS,EAAEN,UAAU,CAAC,4BAAD,EAA+B;AAChD,yBAAe,CAAC,CAACM,MAD+B;AAEhD,yBAAe,CAAC,CAACC;AAF+B,SAA/B;AADzB,SAMKE,QAAQ,IAAI,IAAZ,IACG,oBAAC,aAAD;AAAe,QAAA,WAAW,EAAEC,WAA5B;AAAyC,QAAA,UAAU,EAAC;AAApD,SACKD,QADL,CAPR,CANJ,EAkBKF,MAAM,IAAI;AAAK,QAAA,SAAS,EAAC;AAAf,SAA+CA,MAA/C,CAlBf,CADJ,CARJ,CADJ;AAiCH;;;;EA3CsBR,KAAK,CAACe,S;;gBAA3BV,Y,iBACmB,U;;gBADnBA,Y,kBAGoB;AAClBW,EAAAA,QAAQ,EAAE;AADQ,C;;AA2C1B,eAAeX,YAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Flyout, Overlay } from '../../components/flyout';\nimport ScrollWrapper from '../../components/scroll-wrapper';\nimport type { FlyoutProps } from '../../components/flyout/Flyout';\n\nimport './styles/HeaderFlyout.scss';\n\ntype Props = FlyoutProps & {\n    /** Components to render in the overlay */\n    children: ?React.Node,\n    /** Set className to the overlay wrapper */\n    className?: string,\n    /** Custom button to trigger for opening/closing the flyout */\n    flyoutButton: React.Element<any>,\n    /** What content to display in the footer */\n    footer?: React.Element<any>,\n    /** What content to display in the header */\n    header?: React.Element<any>,\n    /** Optional function to get the scrollRef in parent components */\n    scrollRefFn?: any => any,\n};\n\nclass HeaderFlyout extends React.Component<Props> {\n    static panelOffset = '-4px 0px';\n\n    static defaultProps = {\n        position: 'bottom-left',\n    };\n\n    render() {\n        const { header, footer, flyoutButton, children, scrollRefFn, className, ...rest } = this.props;\n\n        return (\n            <Flyout\n                closeOnClick={false}\n                offset={HeaderFlyout.panelOffset}\n                className={classNames('header-flyout', className)}\n                constrainToWindow\n                {...rest}\n            >\n                {flyoutButton}\n                <Overlay className=\"header-flyout-overlay\">\n                    <div className=\"header-flyout-list-container\">\n                        {header && (\n                            <div className=\"flyout-list-container-title\">\n                                <h4 className=\"flyout-list-title\">{header}</h4>\n                            </div>\n                        )}\n                        <div\n                            className={classNames('flyout-list-container-body', {\n                                'with-header': !!header,\n                                'with-footer': !!footer,\n                            })}\n                        >\n                            {children != null && (\n                                <ScrollWrapper scrollRefFn={scrollRefFn} shadowSize=\"contain\">\n                                    {children}\n                                </ScrollWrapper>\n                            )}\n                        </div>\n                        {footer && <div className=\"flyout-list-container-footer\">{footer}</div>}\n                    </div>\n                </Overlay>\n            </Flyout>\n        );\n    }\n}\n\nexport default HeaderFlyout;\n"],"file":"HeaderFlyout.js"}
+{"version":3,"sources":["../../../src/features/header-flyout/HeaderFlyout.js"],"names":["React","classNames","Flyout","Overlay","OverlayHeader","ScrollWrapper","HeaderFlyout","props","header","footer","flyoutButton","children","scrollRefFn","className","rest","panelOffset","Component","position"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,MAAT,EAAiBC,OAAjB,EAA0BC,aAA1B,QAA+C,yBAA/C;AACA,OAAOC,aAAP,MAA0B,iCAA1B;AAGA,OAAO,4BAAP;;IAiBMC,Y;;;;;;;;;;;;;6BAOO;AAAA,wBAC+E,KAAKC,KADpF;AAAA,UACGC,MADH,eACGA,MADH;AAAA,UACWC,MADX,eACWA,MADX;AAAA,UACmBC,YADnB,eACmBA,YADnB;AAAA,UACiCC,QADjC,eACiCA,QADjC;AAAA,UAC2CC,WAD3C,eAC2CA,WAD3C;AAAA,UACwDC,SADxD,eACwDA,SADxD;AAAA,UACsEC,IADtE;;AAGL,aACI,oBAAC,MAAD;AACI,QAAA,SAAS,EAAEb,UAAU,CAAC,eAAD,EAAkBY,SAAlB,CADzB;AAEI,QAAA,YAAY,EAAE,KAFlB;AAGI,QAAA,iBAAiB,MAHrB;AAII,QAAA,MAAM,EAAEP,YAAY,CAACS;AAJzB,SAKQD,IALR,GAOKJ,YAPL,EAQI,oBAAC,OAAD;AAAS,QAAA,SAAS,EAAC;AAAnB,SACI,oBAAC,aAAD,QAAgBF,MAAM,IAAI;AAAI,QAAA,SAAS,EAAC;AAAd,SAAqCA,MAArC,CAA1B,CADJ,EAEI;AAAK,QAAA,SAAS,EAAC;AAAf,SACI;AACI,QAAA,SAAS,EAAEP,UAAU,CAAC,4BAAD,EAA+B;AAChD,yBAAe,CAAC,CAACO,MAD+B;AAEhD,yBAAe,CAAC,CAACC;AAF+B,SAA/B;AADzB,SAMKE,QAAQ,IAAI,IAAZ,IACG,oBAAC,aAAD;AAAe,QAAA,WAAW,EAAEC,WAA5B;AAAyC,QAAA,UAAU,EAAC;AAApD,SACKD,QADL,CAPR,CADJ,EAaKF,MAAM,IAAI;AAAK,QAAA,SAAS,EAAC;AAAf,SAA+CA,MAA/C,CAbf,CAFJ,CARJ,CADJ;AA6BH;;;;EAvCsBT,KAAK,CAACgB,S;;gBAA3BV,Y,iBACmB,U;;gBADnBA,Y,kBAGoB;AAClBW,EAAAA,QAAQ,EAAE;AADQ,C;;AAuC1B,eAAeX,YAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\nimport { Flyout, Overlay, OverlayHeader } from '../../components/flyout';\nimport ScrollWrapper from '../../components/scroll-wrapper';\nimport type { FlyoutProps } from '../../components/flyout/Flyout';\n\nimport './styles/HeaderFlyout.scss';\n\ntype Props = FlyoutProps & {\n    /** Components to render in the overlay */\n    children: ?React.Node,\n    /** Set className to the overlay wrapper */\n    className?: string,\n    /** Custom button to trigger for opening/closing the flyout */\n    flyoutButton: React.Element<any>,\n    /** What content to display in the footer */\n    footer?: React.Element<any>,\n    /** What content to display in the header */\n    header?: React.Element<any>,\n    /** Optional function to get the scrollRef in parent components */\n    scrollRefFn?: any => any,\n};\n\nclass HeaderFlyout extends React.Component<Props> {\n    static panelOffset = '-4px 0px';\n\n    static defaultProps = {\n        position: 'bottom-left',\n    };\n\n    render() {\n        const { header, footer, flyoutButton, children, scrollRefFn, className, ...rest } = this.props;\n\n        return (\n            <Flyout\n                className={classNames('header-flyout', className)}\n                closeOnClick={false}\n                constrainToWindow\n                offset={HeaderFlyout.panelOffset}\n                {...rest}\n            >\n                {flyoutButton}\n                <Overlay className=\"header-flyout-overlay\">\n                    <OverlayHeader>{header && <h4 className=\"header-flyout-title\">{header}</h4>}</OverlayHeader>\n                    <div className=\"header-flyout-list-container\">\n                        <div\n                            className={classNames('flyout-list-container-body', {\n                                'with-header': !!header,\n                                'with-footer': !!footer,\n                            })}\n                        >\n                            {children != null && (\n                                <ScrollWrapper scrollRefFn={scrollRefFn} shadowSize=\"contain\">\n                                    {children}\n                                </ScrollWrapper>\n                            )}\n                        </div>\n                        {footer && <div className=\"flyout-list-container-footer\">{footer}</div>}\n                    </div>\n                </Overlay>\n            </Flyout>\n        );\n    }\n}\n\nexport default HeaderFlyout;\n"],"file":"HeaderFlyout.js"}

package/es/features/header-flyout/styles/HeaderFlyout.scss

@@ -1,3 +1,4 @@
+@import '../../../components/flyout/variables';
 @import '../../../styles/variables';
 @import '../../../styles/mixins/overlay';
 @import './variables';
@@ -17,43 +18,35 @@
 
         padding: (2 * $flyout-header-spacer) $flyout-list-padding 0;
     }
-}
-
-.header-flyout-list-container {
-    padding: 0;
-
-    .flyout-list-container-title {
-        padding-bottom: $flyout-header-spacer;
-    }
 
-    .flyout-list-title {
+    .header-flyout-title {
         margin: 0;
+        padding-bottom: $flyout-header-spacer;
         font-size: $flyout-title-font-size;
         line-height: $flyout-title-line-height;
     }
+}
 
+.header-flyout-list-container {
     .flyout-list-container-body {
-        $title-height: $flyout-title-line-height + $flyout-header-spacer;
-        $footer-height: $flyout-title-line-height + 2 * $flyout-footer-spacer;
-
         // the overall height, minus the top and bottom padding
         height: $flyout-list-height - 2 * $flyout-list-padding;
         margin-bottom: $flyout-list-padding;
 
         &.with-header {
             // the overall height minus the padding, and header height
-            height: $flyout-list-height - (2 * $flyout-list-padding + $title-height);
+            height: $flyout-list-height - (2 * $flyout-list-padding + $flyout-title-height);
         }
 
         &.with-footer {
             // the overall height minus the padding, and the footer height
-            height: $flyout-list-height - ($flyout-list-padding + $footer-height);
+            height: $flyout-list-height - ($flyout-list-padding + $flyout-footer-height);
             margin-bottom: 0;
         }
 
         &.with-header.with-footer {
             // the overall height minus the padding, and both text hbdl-gray-50
-            height: $flyout-list-height - ($flyout-list-padding + $title-height + $footer-height);
+            height: $flyout-list-height - ($flyout-list-padding + $flyout-title-height + $flyout-footer-height);
             margin-bottom: 0;
         }
     }
@@ -69,3 +62,49 @@
         }
     }
 }
+
+@include breakpoint($medium-screen) {
+    .bdl-Flyout--responsive {
+        .header-flyout-list-container {
+            .flyout-list-container-body {
+                $header-height: $bdl-OverlayHeader-height;
+
+                height: calc(100vh - #{$header-height});
+
+                &.with-header {
+                    height: calc(100vh - #{$header-height});
+                }
+
+                &.with-footer {
+                    height: calc(100vh - #{$flyout-footer-height});
+                }
+
+                &.with-header.with-footer {
+                    height: calc(100vh - #{$header-height} - #{$flyout-footer-height});
+                }
+
+                .scroll-container {
+                    overflow-y: auto;
+
+                    .scroll-wrap-container {
+                        &::before,
+                        &::after {
+                            display: none;
+                        }
+                    }
+                }
+            }
+
+            .flyout-list-container-footer {
+                height: $flyout-footer-height;
+                padding: $flyout-footer-spacer;
+            }
+        }
+
+        .header-flyout-overlay {
+            .header-flyout-title {
+                padding-bottom: 0;
+            }
+        }
+    }
+}

package/es/features/header-flyout/styles/_variables.scss

@@ -11,6 +11,10 @@ $flyout-title-line-height: 16px;
 $flyout-footer-font-size: 13px;
 $flyout-footer-line-height: 16px;
 
+// Variables for title and footer height to help calculate component height
+$flyout-title-height: $flyout-title-line-height + $flyout-header-spacer;
+$flyout-footer-height: $flyout-title-line-height + 2 * $flyout-footer-spacer;
+
 // Consumable mixins - to use with the contents of a header flyout
 @mixin header-flyout-row-padding {
     padding: 12px 0;

package/es/features/message-center/components/message-center-modal/MessageCenterModal.js

@@ -243,6 +243,7 @@ function MessageCenterModal(_ref) {
       rowCount: filteredMessages.length,
       rowHeight: cache.rowHeight,
       rowRenderer: rowRenderer,
+      scrollToIndex: 0,
       style: listStyle,
       width: width - SCROLLBAR_MARGIN
     });

package/es/features/message-center/components/message-center-modal/MessageCenterModal.js.flow

@@ -242,6 +242,7 @@ function MessageCenterModal({
                 rowCount={filteredMessages.length}
                 rowHeight={cache.rowHeight}
                 rowRenderer={rowRenderer}
+                scrollToIndex={0}
                 style={listStyle}
                 width={width - SCROLLBAR_MARGIN}
             />

package/es/features/message-center/components/message-center-modal/MessageCenterModal.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/features/message-center/components/message-center-modal/MessageCenterModal.js"],"names":["React","FormattedMessage","injectIntl","classNames","AutoSizer","CellMeasurer","CellMeasurerCache","List","debounce","AnimateHeight","Scrollbar","Modal","CategorySelector","CollapsibleScrollbar","Message","intlMessages","MessagePreviewGhost","ContentGhost","BottomContentWrapper","ErrorState","EmptyState","ALL","cache","defaultHeight","fixedWidth","SCROLLBAR_MARGIN","listStyle","overflowX","overflowY","trackYStyles","marginLeft","MessageCenterModal","apiHost","contentPreviewProps","onRequestClose","messages","getToken","intl","overscanRowCount","onMessageShown","categories","useMemo","Array","isArray","messageCategoriesSet","Set","forEach","category","templateParams","add","size","value","displayText","formatMessage","all","product","events","boxEducation","listRef","useRef","isMouseInTitleRef","messageLoadCacheRef","Map","useState","setCategory","isExpanded","setIsExpanded","width","height","dimensions","setDimensions","scrollRef","title","current","clearAll","filteredMessages","filter","sort","activateDateA","activateDate","priorityA","priority","activateDateB","priorityB","useEffect","scrollbarRef","scrollToTop","rowRenderer","index","parent","style","isVisible","message","messageId","id","isFirstTimeBeingShown","has","set","registerChild","handleOnScroll","clientHeight","scrollTop","prevClientHeight","prevScrollTop","isScrollingDown","handleResize","resizeDimensions","handlOnResize","useCallback","renderMessages","length","rowHeight","scrollLeft","Grid","handleScrollEvent","Error","errorFetchingPosts"],"mappings":";;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,SAASC,gBAAT,EAA2BC,UAA3B,QAA2E,YAA3E;AACA,OAAOC,UAAP,MAAuB,YAAvB;AACA,SAASC,SAAT,EAAoBC,YAApB,EAAkCC,iBAAlC,EAAqDC,IAArD,QAAiE,wBAAjE;AACA,OAAOC,QAAP,MAAqB,iBAArB;AACA,OAAOC,aAAP,MAA0B,sBAA1B;AACA,OAAOC,SAAP,MAAsB,yBAAtB;AAEA,OAAOC,KAAP,MAAkB,oCAAlB;AACA,OAAOC,gBAAP,MAA6B,2DAA7B;AAEA,OAAOC,oBAAP,MAAiC,gDAAjC;AACA,OAAOC,OAAP,MAAoB,oBAApB;AACA,OAAOC,YAAP,MAAyB,gBAAzB;AAGA,OAAO,2BAAP;AACA,OAAOC,mBAAP,MAAgC,oDAAhC;AACA,OAAOC,YAAP,MAAyB,kCAAzB;AACA,OAAOC,oBAAP,MAAiC,0CAAjC;AACA,OAAOC,UAAP,MAAuB,2BAAvB;AACA,OAAOC,UAAP,MAAuB,cAAvB;AAYA,IAAMC,GAAG,GAAG,KAAZ;AACA,IAAMC,KAAK,GAAG,IAAIhB,iBAAJ,CAAsB;AAChCiB,EAAAA,aAAa,EAAE,GADiB;AAEhCC,EAAAA,UAAU,EAAE;AAFoB,CAAtB,CAAd;AAKA,IAAMC,gBAAgB,GAAG,EAAzB;AACA,IAAMC,SAAS,GAAG;AAAEC,EAAAA,SAAS,EAAE,KAAb;AAAoBC,EAAAA,SAAS,EAAE;AAA/B,CAAlB;AACA,IAAMC,YAAY,GAAG;AAAEC,EAAAA,UAAU,YAAKL,gBAAL;AAAZ,CAArB;;AAEA,SAASM,kBAAT,OASoC;AAAA,MARhCC,OAQgC,QARhCA,OAQgC;AAAA,MAPhCC,mBAOgC,QAPhCA,mBAOgC;AAAA,MANhCC,cAMgC,QANhCA,cAMgC;AAAA,MALhCC,QAKgC,QALhCA,QAKgC;AAAA,MAJhCC,QAIgC,QAJhCA,QAIgC;AAAA,MAHhCC,IAGgC,QAHhCA,IAGgC;AAAA,mCAFhCC,gBAEgC;AAAA,MAFhCA,gBAEgC,sCAFb,CAEa;AAAA,MADhCC,cACgC,QADhCA,cACgC;AAChC,MAAMC,UAAgE,GAAGxC,KAAK,CAACyC,OAAN,CAAc,YAAM;AACzF,QAAI,CAACC,KAAK,CAACC,OAAN,CAAcR,QAAd,CAAL,EAA8B;AAC1B,aAAO,IAAP;AACH;;AAED,QAAMS,oBAAoB,GAAG,IAAIC,GAAJ,EAA7B;AACAV,IAAAA,QAAQ,CAACW,OAAT,CAAiB,iBAAsC;AAAA,UAAjBC,QAAiB,SAAnCC,cAAmC,CAAjBD,QAAiB;AACnDH,MAAAA,oBAAoB,CAACK,GAArB,CAAyBF,QAAzB;AACH,KAFD;;AAIA,QAAIH,oBAAoB,CAACM,IAArB,IAA6B,CAAjC,EAAoC;AAChC,aAAO,IAAP;AACH;;AAED,WAAO,CACH;AACIC,MAAAA,KAAK,EAAE9B,GADX;AAEI+B,MAAAA,WAAW,EAAEf,IAAI,CAACgB,aAAL,CAAmBtC,YAAY,CAACuC,GAAhC;AAFjB,KADG,EAKH;AACIH,MAAAA,KAAK,EAAE,SADX;AAEIC,MAAAA,WAAW,EAAEf,IAAI,CAACgB,aAAL,CAAmBtC,YAAY,CAACwC,OAAhC;AAFjB,KALG,EASH;AACIJ,MAAAA,KAAK,EAAE,QADX;AAEIC,MAAAA,WAAW,EAAEf,IAAI,CAACgB,aAAL,CAAmBtC,YAAY,CAACyC,MAAhC;AAFjB,KATG,EAaH;AACIL,MAAAA,KAAK,EAAE,WADX;AAEIC,MAAAA,WAAW,EAAEf,IAAI,CAACgB,aAAL,CAAmBtC,YAAY,CAAC0C,YAAhC;AAFjB,KAbG,CAAP;AAkBH,GAhCwE,EAgCtE,CAACpB,IAAD,EAAOF,QAAP,CAhCsE,CAAzE;AAiCA,MAAMuB,OAAO,GAAG1D,KAAK,CAAC2D,MAAN,CAAa,IAAb,CAAhB;AACA,MAAMC,iBAAiB,GAAG5D,KAAK,CAAC2D,MAAN,CAAa,KAAb,CAA1B;AACA,MAAME,mBAAmB,GAAG7D,KAAK,CAAC2D,MAAN,CAAa,IAAIG,GAAJ,EAAb,CAA5B;;AApCgC,wBAqCA9D,KAAK,CAAC+D,QAAN,CAAe1C,GAAf,CArCA;AAAA;AAAA,MAqCzB0B,QArCyB;AAAA,MAqCfiB,WArCe;;AAAA,yBAsCIhE,KAAK,CAAC+D,QAAN,CAAe,IAAf,CAtCJ;AAAA;AAAA,MAsCzBE,UAtCyB;AAAA,MAsCbC,aAtCa;;AAAA,yBAuCIlE,KAAK,CAAC+D,QAAN,CAAe;AAAEI,IAAAA,KAAK,EAAE,CAAT;AAAYC,IAAAA,MAAM,EAAE;AAApB,GAAf,CAvCJ;AAAA;AAAA,MAuCzBC,UAvCyB;AAAA,MAuCbC,aAvCa;;AAwChC,MAAMC,SAAS,GAAGvE,KAAK,CAAC2D,MAAN,CAA0E,IAA1E,CAAlB;AAEA,MAAMa,KAAK,GACP;AACI,IAAA,SAAS,EAAErE,UAAU,CAAC,8BAAD,EAAiC;AAClD,qBAAe8D,UADmC;AAElD,sBAAgB,CAACA;AAFiC,KAAjC,CADzB;AAKI,mBAAY,aALhB;AAMI,IAAA,YAAY,EAAE,wBAAM;AAChBL,MAAAA,iBAAiB,CAACa,OAAlB,GAA4B,IAA5B;AACAP,MAAAA,aAAa,CAAC,IAAD,CAAb;AACH,KATL;AAUI,IAAA,YAAY,EAAE,wBAAM;AAChBN,MAAAA,iBAAiB,CAACa,OAAlB,GAA4B,KAA5B;AACH;AAZL,KAcI;AAAK,IAAA,SAAS,EAAC;AAAf,KACI,oBAAC,gBAAD,EAAsB1D,YAAY,CAACyD,KAAnC,CADJ,CAdJ,EAiBKhC,UAAU,IACP,oBAAC,aAAD;AAAe,IAAA,QAAQ,EAAE,GAAzB;AAA8B,IAAA,MAAM,EAAEyB,UAAU,GAAG,MAAH,GAAY;AAA5D,KACI;AAAS,IAAA,SAAS,EAAC;AAAnB,KACI,oBAAC,gBAAD;AACI,IAAA,eAAe,EAAElB,QADrB;AAEI,IAAA,UAAU,EAAEP,UAFhB;AAGI,IAAA,QAAQ,EAAE,kBAAAW,KAAK,EAAI;AACf7B,MAAAA,KAAK,CAACoD,QAAN;AACAV,MAAAA,WAAW,CAACb,KAAD,CAAX;AACH;AANL,IADJ,CADJ,CAlBR,CADJ;AAmCA,MAAMwB,gBAAgB,GAAG3E,KAAK,CAACyC,OAAN,CAAc,YAAM;AACzC,QAAI,CAACC,KAAK,CAACC,OAAN,CAAcR,QAAd,CAAL,EAA8B;AAC1B,aAAO,EAAP;AACH;;AAED,WAAOA,QAAQ,CACVyC,MADE,CACK,iBAAwB;AAAA,UAArB5B,cAAqB,SAArBA,cAAqB;AAC5B,aAAOD,QAAQ,KAAK1B,GAAb,IAAoB2B,cAAc,CAACD,QAAf,KAA4BA,QAAvD;AACH,KAHE,EAIF8B,IAJE,CAKC,wBAGK;AAAA,UAFeC,aAEf,SAFCC,YAED;AAAA,UAFwCC,SAExC,SAF8BC,QAE9B;AAAA,UADeC,aACf,SADCH,YACD;AAAA,UADwCI,SACxC,SAD8BF,QAC9B;;AACD;AACA,UAAIH,aAAa,GAAGI,aAApB,EAAmC;AAC/B,eAAO,CAAC,CAAR;AACH;;AAED,UAAIJ,aAAa,GAAGI,aAApB,EAAmC;AAC/B,eAAO,CAAP;AACH;;AAED,UAAIF,SAAS,GAAGG,SAAhB,EAA2B;AACvB,eAAO,CAAC,CAAR;AACH;;AAED,UAAIH,SAAS,GAAGG,SAAhB,EAA2B;AACvB,eAAO,CAAP;AACH;;AAED,aAAO,CAAP;AACH,KA3BF,CAAP;AA6BH,GAlCwB,EAkCtB,CAACpC,QAAD,EAAWZ,QAAX,CAlCsB,CAAzB;AAoCAnC,EAAAA,KAAK,CAACoF,SAAN,CAAgB,YAAM;AAClB,QAAIb,SAAS,CAACE,OAAV,IAAqBF,SAAS,CAACE,OAAV,CAAkBY,YAAvC,IAAuDd,SAAS,CAACE,OAAV,CAAkBY,YAAlB,CAA+BZ,OAA1F,EAAmG;AAC/FF,MAAAA,SAAS,CAACE,OAAV,CAAkBY,YAAlB,CAA+BZ,OAA/B,CAAuCa,WAAvC;AACH;AACJ,GAJD,EAIG,CAACvC,QAAD,CAJH;;AAMA,WAASwC,WAAT,QAAkE;AAAA,QAA3CC,KAA2C,SAA3CA,KAA2C;AAAA,QAApCC,MAAoC,SAApCA,MAAoC;AAAA,QAA5BC,KAA4B,SAA5BA,KAA4B;AAAA,QAArBC,SAAqB,SAArBA,SAAqB;AAC9D,QAAMC,OAAO,GAAGjB,gBAAgB,CAACa,KAAD,CAAhC;AACA,QAAMK,SAAS,GAAGD,OAAO,CAACE,EAA1B;AACA,QAAMC,qBAAqB,GAAG,CAAClC,mBAAmB,CAACY,OAApB,CAA4BuB,GAA5B,CAAgCH,SAAhC,CAA/B;;AACA,QAAIF,SAAS,IAAII,qBAAjB,EAAwC;AACpClC,MAAAA,mBAAmB,CAACY,OAApB,CAA4BwB,GAA5B,CAAgCJ,SAAhC,EAA2C,IAA3C;AACAtD,MAAAA,cAAc,CAACqD,OAAD,CAAd;AACH;;AAED,WACI,oBAAC,YAAD;AAAc,MAAA,GAAG,EAAEC,SAAnB;AAA8B,MAAA,KAAK,EAAEvE,KAArC;AAA4C,MAAA,WAAW,EAAE,CAAzD;AAA4D,MAAA,MAAM,EAAEmE,MAApE;AAA4E,MAAA,QAAQ,EAAED;AAAtF,OACK;AAAA,UAAGU,aAAH,SAAGA,aAAH;AAAA,aACG;AACI,QAAA,GAAG,EAAEA,aADT;AAEI,QAAA,SAAS,EAAC,gCAFd;AAGI,QAAA,KAAK,EAAER,KAHX;AAII,uBAAY;AAJhB,SAMI,oBAAC,OAAD;AACI,QAAA,mBAAmB,EAAEzD,mBADzB;AAEI,QAAA,OAAO,EAAED;AAFb,SAGQ4D,OAHR;AAII,QAAA,QAAQ,EAAExD;AAJd,SANJ,CADH;AAAA,KADL,CADJ;AAmBH;;AAED,WAAS+D,cAAT,CAAwBC,YAAxB,EAAsCC,SAAtC,EAAiDC,gBAAjD,EAAmEC,aAAnE,EAAkF;AAC9E,QAAIH,YAAY,GAAG,CAAf,IAAoBA,YAAY,KAAKE,gBAArC,IAAyD,CAAC1C,iBAAiB,CAACa,OAAhF,EAAyF;AACrF,UAAM+B,eAAe,GAAGD,aAAa,GAAGF,SAAxC;;AACA,UAAIpC,UAAU,IAAIuC,eAAlB,EAAmC;AAC/BtC,QAAAA,aAAa,CAAC,KAAD,CAAb;AACH,OAFD,MAEO,IAAI,CAACD,UAAD,IAAe,CAACuC,eAApB,EAAqC;AACxCtC,QAAAA,aAAa,CAAC,IAAD,CAAb;AACH;AACJ;AACJ;;AAED,WAASuC,YAAT,CAAsBC,gBAAtB,EAAwC;AACpCpC,IAAAA,aAAa,CAACoC,gBAAD,CAAb;AACH;;AAED,MAAMC,aAAa,GAAG3G,KAAK,CAAC4G,WAAN,CAAkBpG,QAAQ,CAACiG,YAAD,EAAe,GAAf,CAA1B,EAA+C,EAA/C,CAAtB;;AAEA,WAASI,cAAT,CAAwB1C,KAAxB,EAAuCC,MAAvC,EAAmE;AAC/D,QAAI,CAACjC,QAAL,EAAe;AACX,aACI;AAAK,QAAA,SAAS,EAAC;AAAf,SACI;AAAK,QAAA,SAAS,EAAC;AAAf,SACI,oBAAC,mBAAD,OADJ,EAEI,oBAAC,oBAAD,QACI,oBAAC,YAAD,OADJ,CAFJ,CADJ,CADJ;AAUH;;AAED,WACI,oBAAC,IAAD;AACI,MAAA,GAAG,EAAEuB,OADT;AAEI,MAAA,SAAS,EAAC,6BAFd;AAGI,MAAA,wBAAwB,EAAEpC,KAH9B;AAII,MAAA,MAAM,EAAE+C,UAAU,CAACD,MAAX,IAAqBA,MAJjC;AAKI,MAAA,cAAc,EAAEhD,UALpB;AAMI,MAAA,gBAAgB,EAAEkB,gBANtB;AAOI,MAAA,QAAQ,EAAEqC,gBAAgB,CAACmC,MAP/B;AAQI,MAAA,SAAS,EAAExF,KAAK,CAACyF,SARrB;AASI,MAAA,WAAW,EAAExB,WATjB;AAUI,MAAA,KAAK,EAAE7D,SAVX;AAWI,MAAA,KAAK,EAAEyC,KAAK,GAAG1C;AAXnB,MADJ;AAeH;;AAED,SACI,oBAAC,KAAD;AACI,IAAA,SAAS,EAAC,wBADd;AAEI,4BAAqB,oBAFzB;AAGI,mBAAY,oBAHhB;AAII,IAAA,MAAM,MAJV;AAKI,IAAA,cAAc,EAAES,cALpB;AAMI,IAAA,KAAK,EAAEsC;AANX,KAQI;AAAS,IAAA,SAAS,EAAC;AAAnB,KACI,oBAAC,SAAD;AAAW,IAAA,QAAQ,EAAEmC;AAArB,KACK;AAAA,QAAGvC,MAAH,SAAGA,MAAH;AAAA,QAAWD,KAAX,SAAWA,KAAX;AAAA,WACG,oBAAC,oBAAD;AACI,MAAA,GAAG,EAAEI,SADT;AAEI,MAAA,QAAQ,EAAE,iCAGL;AAAA,YAFC6B,YAED,SAFCA,YAED;AAAA,YAFeC,SAEf,SAFeA,SAEf;AAAA,YAF0BW,UAE1B,SAF0BA,UAE1B;AAAA,YADeV,gBACf,UADCF,YACD;AAAA,YAD4CG,aAC5C,UADiCF,SACjC;AACDF,QAAAA,cAAc,CAACC,YAAD,EAAeC,SAAf,EAA0BC,gBAA1B,EAA4CC,aAA5C,CAAd;;AACA,YAAI7C,OAAO,CAACe,OAAR,IAAmBf,OAAO,CAACe,OAAR,CAAgBwC,IAAvC,EAA6C;AAAA,cACjCA,IADiC,GACxBvD,OAAO,CAACe,OADgB,CACjCwC,IADiC;AAEzCA,UAAAA,IAAI,CAACC,iBAAL,CAAuB;AAAEb,YAAAA,SAAS,EAATA,SAAF;AAAaW,YAAAA,UAAU,EAAVA;AAAb,WAAvB;AACH;AACJ,OAXL;AAYI,MAAA,eAAe,MAZnB;AAaI,MAAA,KAAK,EAAE;AAAE7C,QAAAA,KAAK,EAALA,KAAF;AAASC,QAAAA,MAAM,EAANA;AAAT,OAbX;AAcI,MAAA,YAAY,EAAEvC;AAdlB,OAgBKM,QAAQ,YAAYgF,KAApB,GACG,oBAAC,UAAD,QACI,oBAAC,gBAAD,EAAsBpG,YAAY,CAACqG,kBAAnC,CADJ,CADH,GAKGP,cAAc,CAAC1C,KAAD,EAAQC,MAAR,CArBtB,CADH;AAAA,GADL,CADJ,CARJ,CADJ;AAyCH;;AAED,eAAelE,UAAU,CAAC6B,kBAAD,CAAzB","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage, injectIntl, type InjectIntlProvidedProps } from 'react-intl';\nimport classNames from 'classnames';\nimport { AutoSizer, CellMeasurer, CellMeasurerCache, List } from '@box/react-virtualized';\nimport debounce from 'lodash/debounce';\nimport AnimateHeight from 'react-animate-height';\nimport Scrollbar from 'react-scrollbars-custom';\nimport type { Token } from '../../../../common/types/core';\nimport Modal from '../../../../components/modal/Modal';\nimport CategorySelector from '../../../../components/category-selector/CategorySelector';\n\nimport CollapsibleScrollbar from '../collapsibile-scrollbar/CollapsibleScrollbar';\nimport Message from '../message/Message';\nimport intlMessages from '../../messages';\nimport type { EligibleMessageCenterMessage } from '../../types';\nimport type { ContentPreviewProps } from '../../../message-preview-content/MessagePreviewContent';\nimport './MessageCenterModal.scss';\nimport MessagePreviewGhost from '../../../message-preview-ghost/MessagePreviewGhost';\nimport ContentGhost from '../templates/common/ContentGhost';\nimport BottomContentWrapper from '../templates/common/BottomContentWrapper';\nimport ErrorState from '../error-state/ErrorState';\nimport EmptyState from './EmptyState';\n\ntype Props = {|\n    apiHost: string,\n    contentPreviewProps?: ContentPreviewProps,\n    getToken: (fileId: string) => Promise<Token>,\n    messages: Array<EligibleMessageCenterMessage> | null | Error,\n    onMessageShown: EligibleMessageCenterMessage => void,\n    onRequestClose: () => void,\n    overscanRowCount?: number,\n|};\n\nconst ALL = 'all';\nconst cache = new CellMeasurerCache({\n    defaultHeight: 400,\n    fixedWidth: true,\n});\n\nconst SCROLLBAR_MARGIN = 16;\nconst listStyle = { overflowX: false, overflowY: false };\nconst trackYStyles = { marginLeft: `${SCROLLBAR_MARGIN}px` };\n\nfunction MessageCenterModal({\n    apiHost,\n    contentPreviewProps,\n    onRequestClose,\n    messages,\n    getToken,\n    intl,\n    overscanRowCount = 1,\n    onMessageShown,\n}: Props & InjectIntlProvidedProps) {\n    const categories: Array<{ displayText: string, value: string }> | null = React.useMemo(() => {\n        if (!Array.isArray(messages)) {\n            return null;\n        }\n\n        const messageCategoriesSet = new Set<string>();\n        messages.forEach(({ templateParams: { category } }) => {\n            messageCategoriesSet.add(category);\n        });\n\n        if (messageCategoriesSet.size <= 1) {\n            return null;\n        }\n\n        return [\n            {\n                value: ALL,\n                displayText: intl.formatMessage(intlMessages.all),\n            },\n            {\n                value: 'product',\n                displayText: intl.formatMessage(intlMessages.product),\n            },\n            {\n                value: 'events',\n                displayText: intl.formatMessage(intlMessages.events),\n            },\n            {\n                value: 'education',\n                displayText: intl.formatMessage(intlMessages.boxEducation),\n            },\n        ];\n    }, [intl, messages]);\n    const listRef = React.useRef(null);\n    const isMouseInTitleRef = React.useRef(false);\n    const messageLoadCacheRef = React.useRef(new Map<number, boolean>());\n    const [category, setCategory] = React.useState(ALL);\n    const [isExpanded, setIsExpanded] = React.useState(true);\n    const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });\n    const scrollRef = React.useRef<{ scrollbarRef: React.ElementRef<typeof Scrollbar> } | null>(null);\n\n    const title = (\n        <section\n            className={classNames('bdl-MessageCenterModal-title', {\n                'is-expanded': isExpanded,\n                'is-collapsed': !isExpanded,\n            })}\n            data-testid=\"modal-title\"\n            onMouseEnter={() => {\n                isMouseInTitleRef.current = true;\n                setIsExpanded(true);\n            }}\n            onMouseLeave={() => {\n                isMouseInTitleRef.current = false;\n            }}\n        >\n            <div className=\"bdl-MessageCenterModal-whatsNew\">\n                <FormattedMessage {...intlMessages.title} />\n            </div>\n            {categories && (\n                <AnimateHeight duration={300} height={isExpanded ? 'auto' : 0}>\n                    <section className=\"bdl-MessageCenterModal-categorySelector\">\n                        <CategorySelector\n                            currentCategory={category}\n                            categories={categories}\n                            onSelect={value => {\n                                cache.clearAll();\n                                setCategory(value);\n                            }}\n                        />\n                    </section>\n                </AnimateHeight>\n            )}\n        </section>\n    );\n\n    const filteredMessages = React.useMemo(() => {\n        if (!Array.isArray(messages)) {\n            return [];\n        }\n\n        return messages\n            .filter(({ templateParams }) => {\n                return category === ALL || templateParams.category === category;\n            })\n            .sort(\n                (\n                    { activateDate: activateDateA, priority: priorityA },\n                    { activateDate: activateDateB, priority: priorityB },\n                ) => {\n                    // sort by date (descending), secondary sort by priority (descending)\n                    if (activateDateA > activateDateB) {\n                        return -1;\n                    }\n\n                    if (activateDateA < activateDateB) {\n                        return 1;\n                    }\n\n                    if (priorityA > priorityB) {\n                        return -1;\n                    }\n\n                    if (priorityA < priorityB) {\n                        return 1;\n                    }\n\n                    return 0;\n                },\n            );\n    }, [category, messages]);\n\n    React.useEffect(() => {\n        if (scrollRef.current && scrollRef.current.scrollbarRef && scrollRef.current.scrollbarRef.current) {\n            scrollRef.current.scrollbarRef.current.scrollToTop();\n        }\n    }, [category]);\n\n    function rowRenderer({ index, parent, style, isVisible }: Object) {\n        const message = filteredMessages[index];\n        const messageId = message.id;\n        const isFirstTimeBeingShown = !messageLoadCacheRef.current.has(messageId);\n        if (isVisible && isFirstTimeBeingShown) {\n            messageLoadCacheRef.current.set(messageId, true);\n            onMessageShown(message);\n        }\n\n        return (\n            <CellMeasurer key={messageId} cache={cache} columnIndex={0} parent={parent} rowIndex={index}>\n                {({ registerChild }) => (\n                    <div\n                        ref={registerChild}\n                        className=\"bdl-MessageCenterModal-message\"\n                        style={style}\n                        data-testid=\"messagecentermodalmessage\"\n                    >\n                        <Message\n                            contentPreviewProps={contentPreviewProps}\n                            apiHost={apiHost}\n                            {...message}\n                            getToken={getToken}\n                        />\n                    </div>\n                )}\n            </CellMeasurer>\n        );\n    }\n\n    function handleOnScroll(clientHeight, scrollTop, prevClientHeight, prevScrollTop) {\n        if (clientHeight > 0 && clientHeight === prevClientHeight && !isMouseInTitleRef.current) {\n            const isScrollingDown = prevScrollTop < scrollTop;\n            if (isExpanded && isScrollingDown) {\n                setIsExpanded(false);\n            } else if (!isExpanded && !isScrollingDown) {\n                setIsExpanded(true);\n            }\n        }\n    }\n\n    function handleResize(resizeDimensions) {\n        setDimensions(resizeDimensions);\n    }\n\n    const handlOnResize = React.useCallback(debounce(handleResize, 300), []);\n\n    function renderMessages(width: number, height: number): React.Node {\n        if (!messages) {\n            return (\n                <div className=\"bdl-MessageCenterModal-message\">\n                    <div className=\"bdl-MessageCenterModal-ghost\">\n                        <MessagePreviewGhost />\n                        <BottomContentWrapper>\n                            <ContentGhost />\n                        </BottomContentWrapper>\n                    </div>\n                </div>\n            );\n        }\n\n        return (\n            <List\n                ref={listRef}\n                className=\"bdl-MessageCenterModal-list\"\n                deferredMeasurementCache={cache}\n                height={dimensions.height || height}\n                noRowsRenderer={EmptyState}\n                overscanRowCount={overscanRowCount}\n                rowCount={filteredMessages.length}\n                rowHeight={cache.rowHeight}\n                rowRenderer={rowRenderer}\n                style={listStyle}\n                width={width - SCROLLBAR_MARGIN}\n            />\n        );\n    }\n\n    return (\n        <Modal\n            className=\"bdl-MessageCenterModal\"\n            data-resin-component=\"messageCenterModal\"\n            data-testid=\"messagecentermodal\"\n            isOpen\n            onRequestClose={onRequestClose}\n            title={title}\n        >\n            <section className=\"bdl-MessageCenterModal-messages\">\n                <AutoSizer onResize={handlOnResize}>\n                    {({ height, width }) => (\n                        <CollapsibleScrollbar\n                            ref={scrollRef}\n                            onScroll={(\n                                { clientHeight, scrollTop, scrollLeft },\n                                { clientHeight: prevClientHeight, scrollTop: prevScrollTop },\n                            ) => {\n                                handleOnScroll(clientHeight, scrollTop, prevClientHeight, prevScrollTop);\n                                if (listRef.current && listRef.current.Grid) {\n                                    const { Grid } = listRef.current;\n                                    Grid.handleScrollEvent({ scrollTop, scrollLeft });\n                                }\n                            }}\n                            permanentTrackY\n                            style={{ width, height }}\n                            trackYStyles={trackYStyles}\n                        >\n                            {messages instanceof Error ? (\n                                <ErrorState>\n                                    <FormattedMessage {...intlMessages.errorFetchingPosts} />\n                                </ErrorState>\n                            ) : (\n                                renderMessages(width, height)\n                            )}\n                        </CollapsibleScrollbar>\n                    )}\n                </AutoSizer>\n            </section>\n        </Modal>\n    );\n}\n\nexport default injectIntl(MessageCenterModal);\n"],"file":"MessageCenterModal.js"}
+{"version":3,"sources":["../../../../../src/features/message-center/components/message-center-modal/MessageCenterModal.js"],"names":["React","FormattedMessage","injectIntl","classNames","AutoSizer","CellMeasurer","CellMeasurerCache","List","debounce","AnimateHeight","Scrollbar","Modal","CategorySelector","CollapsibleScrollbar","Message","intlMessages","MessagePreviewGhost","ContentGhost","BottomContentWrapper","ErrorState","EmptyState","ALL","cache","defaultHeight","fixedWidth","SCROLLBAR_MARGIN","listStyle","overflowX","overflowY","trackYStyles","marginLeft","MessageCenterModal","apiHost","contentPreviewProps","onRequestClose","messages","getToken","intl","overscanRowCount","onMessageShown","categories","useMemo","Array","isArray","messageCategoriesSet","Set","forEach","category","templateParams","add","size","value","displayText","formatMessage","all","product","events","boxEducation","listRef","useRef","isMouseInTitleRef","messageLoadCacheRef","Map","useState","setCategory","isExpanded","setIsExpanded","width","height","dimensions","setDimensions","scrollRef","title","current","clearAll","filteredMessages","filter","sort","activateDateA","activateDate","priorityA","priority","activateDateB","priorityB","useEffect","scrollbarRef","scrollToTop","rowRenderer","index","parent","style","isVisible","message","messageId","id","isFirstTimeBeingShown","has","set","registerChild","handleOnScroll","clientHeight","scrollTop","prevClientHeight","prevScrollTop","isScrollingDown","handleResize","resizeDimensions","handlOnResize","useCallback","renderMessages","length","rowHeight","scrollLeft","Grid","handleScrollEvent","Error","errorFetchingPosts"],"mappings":"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","sourcesContent":["// @flow\nimport * as React from 'react';\nimport { FormattedMessage, injectIntl, type InjectIntlProvidedProps } from 'react-intl';\nimport classNames from 'classnames';\nimport { AutoSizer, CellMeasurer, CellMeasurerCache, List } from '@box/react-virtualized';\nimport debounce from 'lodash/debounce';\nimport AnimateHeight from 'react-animate-height';\nimport Scrollbar from 'react-scrollbars-custom';\nimport type { Token } from '../../../../common/types/core';\nimport Modal from '../../../../components/modal/Modal';\nimport CategorySelector from '../../../../components/category-selector/CategorySelector';\n\nimport CollapsibleScrollbar from '../collapsibile-scrollbar/CollapsibleScrollbar';\nimport Message from '../message/Message';\nimport intlMessages from '../../messages';\nimport type { EligibleMessageCenterMessage } from '../../types';\nimport type { ContentPreviewProps } from '../../../message-preview-content/MessagePreviewContent';\nimport './MessageCenterModal.scss';\nimport MessagePreviewGhost from '../../../message-preview-ghost/MessagePreviewGhost';\nimport ContentGhost from '../templates/common/ContentGhost';\nimport BottomContentWrapper from '../templates/common/BottomContentWrapper';\nimport ErrorState from '../error-state/ErrorState';\nimport EmptyState from './EmptyState';\n\ntype Props = {|\n    apiHost: string,\n    contentPreviewProps?: ContentPreviewProps,\n    getToken: (fileId: string) => Promise<Token>,\n    messages: Array<EligibleMessageCenterMessage> | null | Error,\n    onMessageShown: EligibleMessageCenterMessage => void,\n    onRequestClose: () => void,\n    overscanRowCount?: number,\n|};\n\nconst ALL = 'all';\nconst cache = new CellMeasurerCache({\n    defaultHeight: 400,\n    fixedWidth: true,\n});\n\nconst SCROLLBAR_MARGIN = 16;\nconst listStyle = { overflowX: false, overflowY: false };\nconst trackYStyles = { marginLeft: `${SCROLLBAR_MARGIN}px` };\n\nfunction MessageCenterModal({\n    apiHost,\n    contentPreviewProps,\n    onRequestClose,\n    messages,\n    getToken,\n    intl,\n    overscanRowCount = 1,\n    onMessageShown,\n}: Props & InjectIntlProvidedProps) {\n    const categories: Array<{ displayText: string, value: string }> | null = React.useMemo(() => {\n        if (!Array.isArray(messages)) {\n            return null;\n        }\n\n        const messageCategoriesSet = new Set<string>();\n        messages.forEach(({ templateParams: { category } }) => {\n            messageCategoriesSet.add(category);\n        });\n\n        if (messageCategoriesSet.size <= 1) {\n            return null;\n        }\n\n        return [\n            {\n                value: ALL,\n                displayText: intl.formatMessage(intlMessages.all),\n            },\n            {\n                value: 'product',\n                displayText: intl.formatMessage(intlMessages.product),\n            },\n            {\n                value: 'events',\n                displayText: intl.formatMessage(intlMessages.events),\n            },\n            {\n                value: 'education',\n                displayText: intl.formatMessage(intlMessages.boxEducation),\n            },\n        ];\n    }, [intl, messages]);\n    const listRef = React.useRef(null);\n    const isMouseInTitleRef = React.useRef(false);\n    const messageLoadCacheRef = React.useRef(new Map<number, boolean>());\n    const [category, setCategory] = React.useState(ALL);\n    const [isExpanded, setIsExpanded] = React.useState(true);\n    const [dimensions, setDimensions] = React.useState({ width: 0, height: 0 });\n    const scrollRef = React.useRef<{ scrollbarRef: React.ElementRef<typeof Scrollbar> } | null>(null);\n\n    const title = (\n        <section\n            className={classNames('bdl-MessageCenterModal-title', {\n                'is-expanded': isExpanded,\n                'is-collapsed': !isExpanded,\n            })}\n            data-testid=\"modal-title\"\n            onMouseEnter={() => {\n                isMouseInTitleRef.current = true;\n                setIsExpanded(true);\n            }}\n            onMouseLeave={() => {\n                isMouseInTitleRef.current = false;\n            }}\n        >\n            <div className=\"bdl-MessageCenterModal-whatsNew\">\n                <FormattedMessage {...intlMessages.title} />\n            </div>\n            {categories && (\n                <AnimateHeight duration={300} height={isExpanded ? 'auto' : 0}>\n                    <section className=\"bdl-MessageCenterModal-categorySelector\">\n                        <CategorySelector\n                            currentCategory={category}\n                            categories={categories}\n                            onSelect={value => {\n                                cache.clearAll();\n                                setCategory(value);\n                            }}\n                        />\n                    </section>\n                </AnimateHeight>\n            )}\n        </section>\n    );\n\n    const filteredMessages = React.useMemo(() => {\n        if (!Array.isArray(messages)) {\n            return [];\n        }\n\n        return messages\n            .filter(({ templateParams }) => {\n                return category === ALL || templateParams.category === category;\n            })\n            .sort(\n                (\n                    { activateDate: activateDateA, priority: priorityA },\n                    { activateDate: activateDateB, priority: priorityB },\n                ) => {\n                    // sort by date (descending), secondary sort by priority (descending)\n                    if (activateDateA > activateDateB) {\n                        return -1;\n                    }\n\n                    if (activateDateA < activateDateB) {\n                        return 1;\n                    }\n\n                    if (priorityA > priorityB) {\n                        return -1;\n                    }\n\n                    if (priorityA < priorityB) {\n                        return 1;\n                    }\n\n                    return 0;\n                },\n            );\n    }, [category, messages]);\n\n    React.useEffect(() => {\n        if (scrollRef.current && scrollRef.current.scrollbarRef && scrollRef.current.scrollbarRef.current) {\n            scrollRef.current.scrollbarRef.current.scrollToTop();\n        }\n    }, [category]);\n\n    function rowRenderer({ index, parent, style, isVisible }: Object) {\n        const message = filteredMessages[index];\n        const messageId = message.id;\n        const isFirstTimeBeingShown = !messageLoadCacheRef.current.has(messageId);\n        if (isVisible && isFirstTimeBeingShown) {\n            messageLoadCacheRef.current.set(messageId, true);\n            onMessageShown(message);\n        }\n\n        return (\n            <CellMeasurer key={messageId} cache={cache} columnIndex={0} parent={parent} rowIndex={index}>\n                {({ registerChild }) => (\n                    <div\n                        ref={registerChild}\n                        className=\"bdl-MessageCenterModal-message\"\n                        style={style}\n                        data-testid=\"messagecentermodalmessage\"\n                    >\n                        <Message\n                            contentPreviewProps={contentPreviewProps}\n                            apiHost={apiHost}\n                            {...message}\n                            getToken={getToken}\n                        />\n                    </div>\n                )}\n            </CellMeasurer>\n        );\n    }\n\n    function handleOnScroll(clientHeight, scrollTop, prevClientHeight, prevScrollTop) {\n        if (clientHeight > 0 && clientHeight === prevClientHeight && !isMouseInTitleRef.current) {\n            const isScrollingDown = prevScrollTop < scrollTop;\n            if (isExpanded && isScrollingDown) {\n                setIsExpanded(false);\n            } else if (!isExpanded && !isScrollingDown) {\n                setIsExpanded(true);\n            }\n        }\n    }\n\n    function handleResize(resizeDimensions) {\n        setDimensions(resizeDimensions);\n    }\n\n    const handlOnResize = React.useCallback(debounce(handleResize, 300), []);\n\n    function renderMessages(width: number, height: number): React.Node {\n        if (!messages) {\n            return (\n                <div className=\"bdl-MessageCenterModal-message\">\n                    <div className=\"bdl-MessageCenterModal-ghost\">\n                        <MessagePreviewGhost />\n                        <BottomContentWrapper>\n                            <ContentGhost />\n                        </BottomContentWrapper>\n                    </div>\n                </div>\n            );\n        }\n\n        return (\n            <List\n                ref={listRef}\n                className=\"bdl-MessageCenterModal-list\"\n                deferredMeasurementCache={cache}\n                height={dimensions.height || height}\n                noRowsRenderer={EmptyState}\n                overscanRowCount={overscanRowCount}\n                rowCount={filteredMessages.length}\n                rowHeight={cache.rowHeight}\n                rowRenderer={rowRenderer}\n                scrollToIndex={0}\n                style={listStyle}\n                width={width - SCROLLBAR_MARGIN}\n            />\n        );\n    }\n\n    return (\n        <Modal\n            className=\"bdl-MessageCenterModal\"\n            data-resin-component=\"messageCenterModal\"\n            data-testid=\"messagecentermodal\"\n            isOpen\n            onRequestClose={onRequestClose}\n            title={title}\n        >\n            <section className=\"bdl-MessageCenterModal-messages\">\n                <AutoSizer onResize={handlOnResize}>\n                    {({ height, width }) => (\n                        <CollapsibleScrollbar\n                            ref={scrollRef}\n                            onScroll={(\n                                { clientHeight, scrollTop, scrollLeft },\n                                { clientHeight: prevClientHeight, scrollTop: prevScrollTop },\n                            ) => {\n                                handleOnScroll(clientHeight, scrollTop, prevClientHeight, prevScrollTop);\n                                if (listRef.current && listRef.current.Grid) {\n                                    const { Grid } = listRef.current;\n                                    Grid.handleScrollEvent({ scrollTop, scrollLeft });\n                                }\n                            }}\n                            permanentTrackY\n                            style={{ width, height }}\n                            trackYStyles={trackYStyles}\n                        >\n                            {messages instanceof Error ? (\n                                <ErrorState>\n                                    <FormattedMessage {...intlMessages.errorFetchingPosts} />\n                                </ErrorState>\n                            ) : (\n                                renderMessages(width, height)\n                            )}\n                        </CollapsibleScrollbar>\n                    )}\n                </AutoSizer>\n            </section>\n        </Modal>\n    );\n}\n\nexport default injectIntl(MessageCenterModal);\n"],"file":"MessageCenterModal.js"}

package/es/features/presence/PresenceCollaborator.js

@@ -0,0 +1,90 @@
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+import * as React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from 'react-intl';
+import Link from '../../components/link/LinkBase';
+import messages from './messages';
+import PresenceAvatar from './PresenceAvatar';
+import { determineInteractionMessage } from './utils/presenceUtils';
+import './PresenceCollaborator.scss';
+export var renderTimestampMessage = function renderTimestampMessage(interactedAt, interactionType, intl) {
+  var lastActionMessage = determineInteractionMessage(interactionType, interactedAt);
+  var timeAgo = intl.formatRelativeTime ? intl.formatRelativeTime(interactedAt - Date.now()) : intl.formatRelative(interactedAt);
+
+  if (lastActionMessage) {
+    return React.createElement(FormattedMessage, _extends({}, lastActionMessage, {
+      values: {
+        timeAgo: timeAgo
+      }
+    }));
+  }
+
+  return null;
+};
+
+var PresenceCollaborator = function PresenceCollaborator(_ref) {
+  var collaborator = _ref.collaborator,
+      intl = _ref.intl,
+      props = _objectWithoutProperties(_ref, ["collaborator", "intl"]);
+
+  var avatarUrl = collaborator.avatarUrl,
+      id = collaborator.id,
+      interactedAt = collaborator.interactedAt,
+      interactionType = collaborator.interactionType,
+      isActive = collaborator.isActive,
+      name = collaborator.name,
+      profileUrl = collaborator.profileUrl;
+  return React.createElement("div", _extends({
+    className: "bdl-PresenceCollaborator"
+  }, props), React.createElement(PresenceAvatar, {
+    avatarUrl: avatarUrl,
+    id: id,
+    isActive: isActive,
+    isDropDownAvatar: true,
+    name: name
+  }), React.createElement("div", {
+    className: "bdl-PresenceCollaborator-info-container"
+  }, React.createElement("div", {
+    className: "bdl-PresenceCollaborator-info-name"
+  }, isEmpty(profileUrl) ? React.createElement("span", null, name) : React.createElement(Link, {
+    href: profileUrl,
+    target: "_blank"
+  }, name)), React.createElement("div", {
+    className: "bdl-PresenceCollaborator-info-time"
+  }, isActive ? React.createElement(FormattedMessage, messages.activeNowText) : renderTimestampMessage(interactedAt, interactionType, intl))));
+};
+
+PresenceCollaborator.propTypes = {
+  collaborator: PropTypes.shape({
+    /** Url to avatar image. If passed in, component will render the avatar image instead of the initials */
+    avatarUrl: PropTypes.string,
+
+    /** Users id */
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    isActive: PropTypes.bool,
+
+    /** Unix timestamp of when the user last interacted with the document */
+    interactedAt: PropTypes.number,
+
+    /** The type of interaction by the user */
+    interactionType: PropTypes.string,
+
+    /** User's full name */
+    name: PropTypes.string.isRequired,
+
+    /** Custom Profile URL */
+    profileUrl: PropTypes.string
+  }).isRequired,
+
+  /* Intl object */
+  intl: PropTypes.any
+};
+export { PresenceCollaborator as PresenceCollaboratorComponent };
+export default injectIntl(PresenceCollaborator);
+//# sourceMappingURL=PresenceCollaborator.js.map

package/es/features/presence/PresenceCollaborator.js.flow

@@ -0,0 +1,81 @@
+import * as React from 'react';
+import isEmpty from 'lodash/isEmpty';
+import PropTypes from 'prop-types';
+import { FormattedMessage, injectIntl } from 'react-intl';
+
+import Link from '../../components/link/LinkBase';
+import messages from './messages';
+import PresenceAvatar from './PresenceAvatar';
+import { determineInteractionMessage } from './utils/presenceUtils';
+
+import './PresenceCollaborator.scss';
+
+export const renderTimestampMessage = (interactedAt, interactionType, intl) => {
+    const lastActionMessage = determineInteractionMessage(interactionType, interactedAt);
+    const timeAgo = intl.formatRelativeTime
+        ? intl.formatRelativeTime(interactedAt - Date.now())
+        : intl.formatRelative(interactedAt);
+
+    if (lastActionMessage) {
+        return (
+            <FormattedMessage
+                {...lastActionMessage}
+                values={{
+                    timeAgo,
+                }}
+            />
+        );
+    }
+    return null;
+};
+
+const PresenceCollaborator = ({ collaborator, intl, ...props }) => {
+    const { avatarUrl, id, interactedAt, interactionType, isActive, name, profileUrl } = collaborator;
+
+    return (
+        <div className="bdl-PresenceCollaborator" {...props}>
+            <PresenceAvatar avatarUrl={avatarUrl} id={id} isActive={isActive} isDropDownAvatar name={name} />
+            <div className="bdl-PresenceCollaborator-info-container">
+                <div className="bdl-PresenceCollaborator-info-name">
+                    {isEmpty(profileUrl) ? (
+                        <span>{name}</span>
+                    ) : (
+                        <Link href={profileUrl} target="_blank">
+                            {name}
+                        </Link>
+                    )}
+                </div>
+                <div className="bdl-PresenceCollaborator-info-time">
+                    {isActive ? (
+                        <FormattedMessage {...messages.activeNowText} />
+                    ) : (
+                        renderTimestampMessage(interactedAt, interactionType, intl)
+                    )}
+                </div>
+            </div>
+        </div>
+    );
+};
+
+PresenceCollaborator.propTypes = {
+    collaborator: PropTypes.shape({
+        /** Url to avatar image. If passed in, component will render the avatar image instead of the initials */
+        avatarUrl: PropTypes.string,
+        /** Users id */
+        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+        isActive: PropTypes.bool,
+        /** Unix timestamp of when the user last interacted with the document */
+        interactedAt: PropTypes.number,
+        /** The type of interaction by the user */
+        interactionType: PropTypes.string,
+        /** User's full name */
+        name: PropTypes.string.isRequired,
+        /** Custom Profile URL */
+        profileUrl: PropTypes.string,
+    }).isRequired,
+    /* Intl object */
+    intl: PropTypes.any,
+};
+
+export { PresenceCollaborator as PresenceCollaboratorComponent };
+export default injectIntl(PresenceCollaborator);

package/es/features/presence/PresenceCollaborator.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/features/presence/PresenceCollaborator.js"],"names":["React","isEmpty","PropTypes","FormattedMessage","injectIntl","Link","messages","PresenceAvatar","determineInteractionMessage","renderTimestampMessage","interactedAt","interactionType","intl","lastActionMessage","timeAgo","formatRelativeTime","Date","now","formatRelative","PresenceCollaborator","collaborator","props","avatarUrl","id","isActive","name","profileUrl","activeNowText","propTypes","shape","string","oneOfType","number","bool","isRequired","any","PresenceCollaboratorComponent"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport isEmpty from 'lodash/isEmpty';\nimport PropTypes from 'prop-types';\nimport { FormattedMessage, injectIntl } from 'react-intl';\n\nimport Link from '../../components/link/LinkBase';\nimport messages from './messages';\nimport PresenceAvatar from './PresenceAvatar';\nimport { determineInteractionMessage } from './utils/presenceUtils';\n\nimport './PresenceCollaborator.scss';\n\nexport const renderTimestampMessage = (interactedAt, interactionType, intl) => {\n    const lastActionMessage = determineInteractionMessage(interactionType, interactedAt);\n    const timeAgo = intl.formatRelativeTime\n        ? intl.formatRelativeTime(interactedAt - Date.now())\n        : intl.formatRelative(interactedAt);\n\n    if (lastActionMessage) {\n        return (\n            <FormattedMessage\n                {...lastActionMessage}\n                values={{\n                    timeAgo,\n                }}\n            />\n        );\n    }\n    return null;\n};\n\nconst PresenceCollaborator = ({ collaborator, intl, ...props }) => {\n    const { avatarUrl, id, interactedAt, interactionType, isActive, name, profileUrl } = collaborator;\n\n    return (\n        <div className=\"bdl-PresenceCollaborator\" {...props}>\n            <PresenceAvatar avatarUrl={avatarUrl} id={id} isActive={isActive} isDropDownAvatar name={name} />\n            <div className=\"bdl-PresenceCollaborator-info-container\">\n                <div className=\"bdl-PresenceCollaborator-info-name\">\n                    {isEmpty(profileUrl) ? (\n                        <span>{name}</span>\n                    ) : (\n                        <Link href={profileUrl} target=\"_blank\">\n                            {name}\n                        </Link>\n                    )}\n                </div>\n                <div className=\"bdl-PresenceCollaborator-info-time\">\n                    {isActive ? (\n                        <FormattedMessage {...messages.activeNowText} />\n                    ) : (\n                        renderTimestampMessage(interactedAt, interactionType, intl)\n                    )}\n                </div>\n            </div>\n        </div>\n    );\n};\n\nPresenceCollaborator.propTypes = {\n    collaborator: PropTypes.shape({\n        /** Url to avatar image. If passed in, component will render the avatar image instead of the initials */\n        avatarUrl: PropTypes.string,\n        /** Users id */\n        id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n        isActive: PropTypes.bool,\n        /** Unix timestamp of when the user last interacted with the document */\n        interactedAt: PropTypes.number,\n        /** The type of interaction by the user */\n        interactionType: PropTypes.string,\n        /** User's full name */\n        name: PropTypes.string.isRequired,\n        /** Custom Profile URL */\n        profileUrl: PropTypes.string,\n    }).isRequired,\n    /* Intl object */\n    intl: PropTypes.any,\n};\n\nexport { PresenceCollaborator as PresenceCollaboratorComponent };\nexport default injectIntl(PresenceCollaborator);\n"],"file":"PresenceCollaborator.js"}

package/es/features/presence/PresenceCollaborator.scss

@@ -0,0 +1,28 @@
+@import './styles';
+
+.bdl-PresenceCollaborator-info-container {
+    display: inline-block;
+    margin-left: 10px;
+}
+
+.bdl-PresenceCollaborator-info-name {
+    width: 180px;
+    overflow: hidden;
+    color: $bdl-gray;
+    font-size: 13px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+
+    a {
+        color: $bdl-gray;
+
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
+
+.bdl-PresenceCollaborator-info-time {
+    color: $bdl-gray-62;
+    font-size: 12px;
+}

package/es/features/presence/PresenceCollaboratorsList.js

@@ -1,7 +1,5 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -22,15 +20,12 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 
 import * as React from 'react';
 import classnames from 'classnames';
-import isEmpty from 'lodash/isEmpty';
 import PropTypes from 'prop-types';
 import throttle from 'lodash/throttle';
 import { FormattedMessage, injectIntl } from 'react-intl';
 import Button from '../../components/button';
-import Link from '../../components/link/LinkBase';
+import PresenceCollaborator from './PresenceCollaborator';
 import messages from './messages';
-import PresenceAvatar from './PresenceAvatar';
-import { determineInteractionMessage } from './utils/presenceUtils';
 import './PresenceCollaboratorsList.scss';
 
 var PresenceCollaboratorsList =
@@ -88,55 +83,6 @@ function (_React$Component) {
       }, React.createElement(FormattedMessage, messages.recentActivity));
     });
 
-    _defineProperty(_assertThisInitialized(_this), "renderTimestampMessage", function (interactedAt, interactionType) {
-      var lastActionMessage = determineInteractionMessage(interactionType, interactedAt);
-      var intl = _this.props.intl;
-      var timeAgo = intl.formatRelativeTime ? intl.formatRelativeTime(interactedAt - Date.now()) : intl.formatRelative(interactedAt);
-
-      if (lastActionMessage) {
-        return React.createElement(FormattedMessage, _extends({}, lastActionMessage, {
-          values: {
-            timeAgo: timeAgo
-          }
-        }));
-      }
-
-      return null;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderCollabList", function () {
-      var collaborators = _this.props.collaborators;
-      return collaborators.map(function (collaborator) {
-        var avatarUrl = collaborator.avatarUrl,
-            id = collaborator.id,
-            isActive = collaborator.isActive,
-            interactedAt = collaborator.interactedAt,
-            interactionType = collaborator.interactionType,
-            name = collaborator.name,
-            profileUrl = collaborator.profileUrl;
-        return React.createElement("div", {
-          key: id,
-          className: "bdl-PresenceCollaboratorsList-item",
-          role: "listitem"
-        }, React.createElement(PresenceAvatar, {
-          avatarUrl: avatarUrl,
-          id: id,
-          isActive: isActive,
-          isDropDownAvatar: true,
-          name: name
-        }), React.createElement("div", {
-          className: "bdl-PresenceCollaboratorsList-item-info-container"
-        }, React.createElement("div", {
-          className: "bdl-PresenceCollaboratorsList-item-info-name"
-        }, isEmpty(profileUrl) ? React.createElement("span", null, name) : React.createElement(Link, {
-          href: profileUrl,
-          target: "_blank"
-        }, name)), React.createElement("div", {
-          className: "bdl-PresenceCollaboratorsList-item-info-time"
-        }, isActive ? React.createElement(FormattedMessage, messages.activeNowText) : _this.renderTimestampMessage(interactedAt, interactionType))));
-      });
-    });
-
     _defineProperty(_assertThisInitialized(_this), "renderActions", function () {
       var _this$props = _this.props,
           getLinkCallback = _this$props.getLinkCallback,
@@ -183,6 +129,7 @@ function (_React$Component) {
           isScrollableAbove = _this$state.isScrollableAbove,
           isScrollableBelow = _this$state.isScrollableBelow;
       var _this$props2 = this.props,
+          collaborators = _this$props2.collaborators,
           getLinkCallback = _this$props2.getLinkCallback,
           inviteCallback = _this$props2.inviteCallback;
       var buttonsPresent = getLinkCallback || inviteCallback;
@@ -193,7 +140,6 @@ function (_React$Component) {
         'is-scrollable-below': isScrollableBelow
       });
       var title = this.renderTitle();
-      var collabList = this.renderCollabList();
       var actions = this.renderActions();
       return React.createElement("div", {
         className: "bdl-PresenceCollaboratorsList"
@@ -204,7 +150,13 @@ function (_React$Component) {
         className: dropdownListClasses,
         onScroll: this.throttledHandleScroll,
         role: "list"
-      }, collabList), actions);
+      }, collaborators.map(function (collaborator) {
+        return React.createElement(PresenceCollaborator, {
+          collaborator: collaborator,
+          key: collaborator.id,
+          role: "listitem"
+        });
+      })), actions);
     }
   }]);