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

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

@@ -1,14 +1,13 @@
 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';
 
 class PresenceCollaboratorsList extends React.Component<Props> {
@@ -96,57 +95,6 @@ class PresenceCollaboratorsList extends React.Component<Props> {
         </div>
     );
 
-    renderTimestampMessage = (interactedAt, interactionType) => {
-        const lastActionMessage = determineInteractionMessage(interactionType, interactedAt);
-        const { intl } = this.props;
-        const timeAgo = intl.formatRelativeTime
-            ? intl.formatRelativeTime(interactedAt - Date.now())
-            : intl.formatRelative(interactedAt);
-
-        if (lastActionMessage) {
-            return (
-                <FormattedMessage
-                    {...lastActionMessage}
-                    values={{
-                        timeAgo,
-                    }}
-                />
-            );
-        }
-        return null;
-    };
-
-    renderCollabList = () => {
-        const { collaborators } = this.props;
-        return collaborators.map(collaborator => {
-            const { avatarUrl, id, isActive, interactedAt, interactionType, name, profileUrl } = collaborator;
-
-            return (
-                <div key={id} className="bdl-PresenceCollaboratorsList-item" role="listitem">
-                    <PresenceAvatar avatarUrl={avatarUrl} id={id} isActive={isActive} isDropDownAvatar name={name} />
-                    <div className="bdl-PresenceCollaboratorsList-item-info-container">
-                        <div className="bdl-PresenceCollaboratorsList-item-info-name">
-                            {isEmpty(profileUrl) ? (
-                                <span>{name}</span>
-                            ) : (
-                                <Link href={profileUrl} target="_blank">
-                                    {name}
-                                </Link>
-                            )}
-                        </div>
-                        <div className="bdl-PresenceCollaboratorsList-item-info-time">
-                            {isActive ? (
-                                <FormattedMessage {...messages.activeNowText} />
-                            ) : (
-                                this.renderTimestampMessage(interactedAt, interactionType)
-                            )}
-                        </div>
-                    </div>
-                </div>
-            );
-        });
-    };
-
     renderActions = () => {
         const { getLinkCallback, inviteCallback } = this.props;
 
@@ -172,7 +120,7 @@ class PresenceCollaboratorsList extends React.Component<Props> {
 
     render() {
         const { isScrollableAbove, isScrollableBelow } = this.state;
-        const { getLinkCallback, inviteCallback } = this.props;
+        const { collaborators, getLinkCallback, inviteCallback } = this.props;
         const buttonsPresent = getLinkCallback || inviteCallback;
 
         const dropdownListClasses = classnames('bdl-PresenceCollaboratorsList-list', {
@@ -183,7 +131,6 @@ class PresenceCollaboratorsList extends React.Component<Props> {
         });
 
         const title = this.renderTitle();
-        const collabList = this.renderCollabList();
         const actions = this.renderActions();
 
         return (
@@ -197,7 +144,9 @@ class PresenceCollaboratorsList extends React.Component<Props> {
                     onScroll={this.throttledHandleScroll}
                     role="list"
                 >
-                    {collabList}
+                    {collaborators.map(collaborator => (
+                        <PresenceCollaborator collaborator={collaborator} key={collaborator.id} role="listitem" />
+                    ))}
                 </div>
                 {actions}
             </div>

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/presence/PresenceCollaboratorsList.js"],"names":["React","classnames","isEmpty","PropTypes","throttle","FormattedMessage","injectIntl","Button","Link","messages","PresenceAvatar","determineInteractionMessage","PresenceCollaboratorsList","isScrollableAbove","isScrollableBelow","elem","scrollTop","scrollHeight","clientHeight","event","onScroll","props","elDropdownList","setState","calculateOverflow","handleScroll","leading","trailing","recentActivity","interactedAt","interactionType","lastActionMessage","intl","timeAgo","formatRelativeTime","Date","now","formatRelative","collaborators","map","collaborator","avatarUrl","id","isActive","name","profileUrl","activeNowText","renderTimestampMessage","getLinkCallback","inviteCallback","getLinkButtonText","inviteButtonText","overflow","state","buttonsPresent","dropdownListClasses","title","renderTitle","collabList","renderCollabList","actions","renderActions","list","throttledHandleScroll","Component","arrayOf","shape","string","oneOfType","number","bool","isRequired","func","any","PresenceCollaboratorsListComponent"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport isEmpty from 'lodash/isEmpty';\nimport PropTypes from 'prop-types';\nimport throttle from 'lodash/throttle';\nimport { FormattedMessage, injectIntl } from 'react-intl';\nimport Button from '../../components/button';\nimport Link from '../../components/link/LinkBase';\nimport messages from './messages';\nimport PresenceAvatar from './PresenceAvatar';\nimport { determineInteractionMessage } from './utils/presenceUtils';\nimport './PresenceCollaboratorsList.scss';\n\nclass PresenceCollaboratorsList extends React.Component<Props> {\n    static propTypes = {\n        collaborators: PropTypes.arrayOf(\n            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            }),\n        ).isRequired,\n        /* Get Link button callback. also controls visibility of button */\n        getLinkCallback: PropTypes.func,\n        /* Show Invite button callback. also controls visibility of button */\n        inviteCallback: PropTypes.func,\n        /* Callback for Dropdown onScroll event */\n        onScroll: PropTypes.func,\n        /* Intl object */\n        intl: PropTypes.any,\n    };\n\n    state = {\n        isScrollableAbove: false,\n        isScrollableBelow: false,\n    };\n\n    componentDidMount() {\n        const overflow = this.calculateOverflow(this.elDropdownList);\n        // eslint-disable-next-line react/no-did-mount-set-state\n        this.setState(overflow);\n    }\n\n    componentDidUpdate() {\n        const overflow = this.calculateOverflow(this.elDropdownList);\n        /**\n         * recalculate overflow when dropdown is visible and new collabs are added\n         * This will not go into an infinite loop because we check for changes in local component state\n         */\n        if (\n            overflow.isScrollableAbove !== this.state.isScrollableAbove ||\n            overflow.isScrollableBelow !== this.state.isScrollableBelow\n        ) {\n            // eslint-disable-next-line react/no-did-update-set-state\n            this.setState(overflow);\n        }\n    }\n\n    calculateOverflow = elem => {\n        const isScrollableAbove = elem.scrollTop > 0;\n        const isScrollableBelow = elem.scrollTop < elem.scrollHeight - elem.clientHeight;\n        return {\n            isScrollableAbove,\n            isScrollableBelow,\n        };\n    };\n\n    handleScroll = event => {\n        const { onScroll } = this.props;\n        if (this.elDropdownList) {\n            this.setState(this.calculateOverflow(this.elDropdownList));\n            if (onScroll) {\n                onScroll(event);\n            }\n        }\n    };\n\n    throttledHandleScroll = throttle(this.handleScroll, 50, {\n        leading: true,\n        trailing: true,\n    });\n\n    renderTitle = () => (\n        <div className=\"bdl-PresenceCollaboratorsList-title\">\n            <FormattedMessage {...messages.recentActivity} />\n        </div>\n    );\n\n    renderTimestampMessage = (interactedAt, interactionType) => {\n        const lastActionMessage = determineInteractionMessage(interactionType, interactedAt);\n        const { intl } = this.props;\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\n    renderCollabList = () => {\n        const { collaborators } = this.props;\n        return collaborators.map(collaborator => {\n            const { avatarUrl, id, isActive, interactedAt, interactionType, name, profileUrl } = collaborator;\n\n            return (\n                <div key={id} className=\"bdl-PresenceCollaboratorsList-item\" role=\"listitem\">\n                    <PresenceAvatar avatarUrl={avatarUrl} id={id} isActive={isActive} isDropDownAvatar name={name} />\n                    <div className=\"bdl-PresenceCollaboratorsList-item-info-container\">\n                        <div className=\"bdl-PresenceCollaboratorsList-item-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-PresenceCollaboratorsList-item-info-time\">\n                            {isActive ? (\n                                <FormattedMessage {...messages.activeNowText} />\n                            ) : (\n                                this.renderTimestampMessage(interactedAt, interactionType)\n                            )}\n                        </div>\n                    </div>\n                </div>\n            );\n        });\n    };\n\n    renderActions = () => {\n        const { getLinkCallback, inviteCallback } = this.props;\n\n        return (\n            (getLinkCallback || inviteCallback) && (\n                <div className=\"bdl-PresenceCollaboratorsList-actions\">\n                    <div>\n                        {getLinkCallback && (\n                            <Button onClick={getLinkCallback}>\n                                <FormattedMessage {...messages.getLinkButtonText} />\n                            </Button>\n                        )}\n                        {inviteCallback && (\n                            <Button onClick={inviteCallback}>\n                                <FormattedMessage {...messages.inviteButtonText} />\n                            </Button>\n                        )}\n                    </div>\n                </div>\n            )\n        );\n    };\n\n    render() {\n        const { isScrollableAbove, isScrollableBelow } = this.state;\n        const { getLinkCallback, inviteCallback } = this.props;\n        const buttonsPresent = getLinkCallback || inviteCallback;\n\n        const dropdownListClasses = classnames('bdl-PresenceCollaboratorsList-list', {\n            'dropshadow-list': !buttonsPresent,\n            'dropshadow-list-with-buttons': buttonsPresent,\n            'is-scrollable-above': isScrollableAbove,\n            'is-scrollable-below': isScrollableBelow,\n        });\n\n        const title = this.renderTitle();\n        const collabList = this.renderCollabList();\n        const actions = this.renderActions();\n\n        return (\n            <div className=\"bdl-PresenceCollaboratorsList\">\n                {title}\n                <div\n                    ref={list => {\n                        this.elDropdownList = list;\n                    }}\n                    className={dropdownListClasses}\n                    onScroll={this.throttledHandleScroll}\n                    role=\"list\"\n                >\n                    {collabList}\n                </div>\n                {actions}\n            </div>\n        );\n    }\n}\n\nexport { PresenceCollaboratorsList as PresenceCollaboratorsListComponent };\nexport default injectIntl(PresenceCollaboratorsList);\n"],"file":"PresenceCollaboratorsList.js"}
+{"version":3,"sources":["../../../src/features/presence/PresenceCollaboratorsList.js"],"names":["React","classnames","PropTypes","throttle","FormattedMessage","injectIntl","Button","PresenceCollaborator","messages","PresenceCollaboratorsList","isScrollableAbove","isScrollableBelow","elem","scrollTop","scrollHeight","clientHeight","event","onScroll","props","elDropdownList","setState","calculateOverflow","handleScroll","leading","trailing","recentActivity","getLinkCallback","inviteCallback","getLinkButtonText","inviteButtonText","overflow","state","collaborators","buttonsPresent","dropdownListClasses","title","renderTitle","actions","renderActions","list","throttledHandleScroll","map","collaborator","id","Component","arrayOf","shape","avatarUrl","string","oneOfType","number","isActive","bool","interactedAt","interactionType","name","isRequired","profileUrl","func","intl","any","PresenceCollaboratorsListComponent"],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport classnames from 'classnames';\nimport PropTypes from 'prop-types';\nimport throttle from 'lodash/throttle';\nimport { FormattedMessage, injectIntl } from 'react-intl';\n\nimport Button from '../../components/button';\nimport PresenceCollaborator from './PresenceCollaborator';\nimport messages from './messages';\n\nimport './PresenceCollaboratorsList.scss';\n\nclass PresenceCollaboratorsList extends React.Component<Props> {\n    static propTypes = {\n        collaborators: PropTypes.arrayOf(\n            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            }),\n        ).isRequired,\n        /* Get Link button callback. also controls visibility of button */\n        getLinkCallback: PropTypes.func,\n        /* Show Invite button callback. also controls visibility of button */\n        inviteCallback: PropTypes.func,\n        /* Callback for Dropdown onScroll event */\n        onScroll: PropTypes.func,\n        /* Intl object */\n        intl: PropTypes.any,\n    };\n\n    state = {\n        isScrollableAbove: false,\n        isScrollableBelow: false,\n    };\n\n    componentDidMount() {\n        const overflow = this.calculateOverflow(this.elDropdownList);\n        // eslint-disable-next-line react/no-did-mount-set-state\n        this.setState(overflow);\n    }\n\n    componentDidUpdate() {\n        const overflow = this.calculateOverflow(this.elDropdownList);\n        /**\n         * recalculate overflow when dropdown is visible and new collabs are added\n         * This will not go into an infinite loop because we check for changes in local component state\n         */\n        if (\n            overflow.isScrollableAbove !== this.state.isScrollableAbove ||\n            overflow.isScrollableBelow !== this.state.isScrollableBelow\n        ) {\n            // eslint-disable-next-line react/no-did-update-set-state\n            this.setState(overflow);\n        }\n    }\n\n    calculateOverflow = elem => {\n        const isScrollableAbove = elem.scrollTop > 0;\n        const isScrollableBelow = elem.scrollTop < elem.scrollHeight - elem.clientHeight;\n        return {\n            isScrollableAbove,\n            isScrollableBelow,\n        };\n    };\n\n    handleScroll = event => {\n        const { onScroll } = this.props;\n        if (this.elDropdownList) {\n            this.setState(this.calculateOverflow(this.elDropdownList));\n            if (onScroll) {\n                onScroll(event);\n            }\n        }\n    };\n\n    throttledHandleScroll = throttle(this.handleScroll, 50, {\n        leading: true,\n        trailing: true,\n    });\n\n    renderTitle = () => (\n        <div className=\"bdl-PresenceCollaboratorsList-title\">\n            <FormattedMessage {...messages.recentActivity} />\n        </div>\n    );\n\n    renderActions = () => {\n        const { getLinkCallback, inviteCallback } = this.props;\n\n        return (\n            (getLinkCallback || inviteCallback) && (\n                <div className=\"bdl-PresenceCollaboratorsList-actions\">\n                    <div>\n                        {getLinkCallback && (\n                            <Button onClick={getLinkCallback}>\n                                <FormattedMessage {...messages.getLinkButtonText} />\n                            </Button>\n                        )}\n                        {inviteCallback && (\n                            <Button onClick={inviteCallback}>\n                                <FormattedMessage {...messages.inviteButtonText} />\n                            </Button>\n                        )}\n                    </div>\n                </div>\n            )\n        );\n    };\n\n    render() {\n        const { isScrollableAbove, isScrollableBelow } = this.state;\n        const { collaborators, getLinkCallback, inviteCallback } = this.props;\n        const buttonsPresent = getLinkCallback || inviteCallback;\n\n        const dropdownListClasses = classnames('bdl-PresenceCollaboratorsList-list', {\n            'dropshadow-list': !buttonsPresent,\n            'dropshadow-list-with-buttons': buttonsPresent,\n            'is-scrollable-above': isScrollableAbove,\n            'is-scrollable-below': isScrollableBelow,\n        });\n\n        const title = this.renderTitle();\n        const actions = this.renderActions();\n\n        return (\n            <div className=\"bdl-PresenceCollaboratorsList\">\n                {title}\n                <div\n                    ref={list => {\n                        this.elDropdownList = list;\n                    }}\n                    className={dropdownListClasses}\n                    onScroll={this.throttledHandleScroll}\n                    role=\"list\"\n                >\n                    {collaborators.map(collaborator => (\n                        <PresenceCollaborator collaborator={collaborator} key={collaborator.id} role=\"listitem\" />\n                    ))}\n                </div>\n                {actions}\n            </div>\n        );\n    }\n}\n\nexport { PresenceCollaboratorsList as PresenceCollaboratorsListComponent };\nexport default injectIntl(PresenceCollaboratorsList);\n"],"file":"PresenceCollaboratorsList.js"}

package/es/features/presence/PresenceCollaboratorsList.scss

@@ -77,52 +77,25 @@
     /* end GROWTH-382 */
 }
 
-.bdl-PresenceCollaboratorsList-title {
-    margin-top: 0;
-    margin-bottom: 10px;
-    color: $bdl-gray;
-    font-size: 15px;
-}
-
-.bdl-PresenceCollaboratorsList-item {
+.bdl-PresenceCollaborator {
     display: flex;
     align-items: center;
     margin-top: 10px;
 }
 
-.bdl-PresenceCollaboratorsList-item-info-container {
-    display: inline-block;
-    margin-left: 10px;
-}
-
-.bdl-PresenceCollaboratorsList-item-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-PresenceCollaboratorsList-item-info-time {
-    color: $bdl-gray-62;
-    font-size: 12px;
-}
-
 .bdl-PresenceCollaboratorsList-list {
     max-height: 200px;
     overflow-x: hidden;
     overflow-y: auto;
 }
 
+.bdl-PresenceCollaboratorsList-title {
+    margin-top: 0;
+    margin-bottom: 10px;
+    color: $bdl-gray;
+    font-size: 15px;
+}
+
 .bdl-PresenceCollaboratorsList-actions {
     display: flex;
     justify-content: flex-end;

package/es/features/quick-search/QuickSearch.js

@@ -65,7 +65,8 @@ function (_React$Component) {
           errorMessage = _this$props.errorMessage,
           inputProps = _this$props.inputProps,
           noItemsMessage = _this$props.noItemsMessage,
-          onSelect = _this$props.onSelect;
+          onSelect = _this$props.onSelect,
+          title = _this$props.title;
       var showMessage = this.state.showMessage;
       return React.createElement("div", {
         className: classNames('quick-search', className),
@@ -74,7 +75,8 @@ function (_React$Component) {
       }, React.createElement(SelectorDropdown, {
         dividerIndex: dividerIndex,
         onSelect: onSelect,
-        selector: React.createElement(QuickSearchSelector, inputProps)
+        selector: React.createElement(QuickSearchSelector, inputProps),
+        title: title
       }, children), !!errorMessage && React.createElement(QuickSearchMessage, {
         isShown: showMessage
       }, errorMessage), !!noItemsMessage && React.createElement(QuickSearchMessage, {

package/es/features/quick-search/QuickSearch.js.flow

@@ -24,6 +24,8 @@ type Props = {
     noItemsMessage?: React.Node,
     /** Function called with the index of the selected option and the event (selected by keyboard or click) */
     onSelect?: Function,
+    /** Optional title text that will be rendered above the list */
+    title?: React.Node,
 };
 
 type State = {
@@ -48,7 +50,16 @@ class QuickSearch extends React.Component<Props, State> {
     };
 
     render() {
-        const { children, className, dividerIndex, errorMessage, inputProps, noItemsMessage, onSelect } = this.props;
+        const {
+            children,
+            className,
+            dividerIndex,
+            errorMessage,
+            inputProps,
+            noItemsMessage,
+            onSelect,
+            title,
+        } = this.props;
         const { showMessage } = this.state;
 
         return (
@@ -57,6 +68,7 @@ class QuickSearch extends React.Component<Props, State> {
                     dividerIndex={dividerIndex}
                     onSelect={onSelect}
                     selector={<QuickSearchSelector {...inputProps} />}
+                    title={title}
                 >
                     {children}
                 </SelectorDropdown>

package/es/features/quick-search/QuickSearch.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../src/features/quick-search/QuickSearch.js"],"names":["React","classNames","SelectorDropdown","QuickSearchMessage","QuickSearchSelector","QuickSearch","props","setState","showMessage","state","children","className","dividerIndex","errorMessage","inputProps","noItemsMessage","onSelect","handleBlur","handleFocus","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,gBAAP,MAA6B,oCAA7B;AAEA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,OAAO,oBAAP;;IAuBMC,W;;;;;AACF,uBAAYC,KAAZ,EAA0B;AAAA;;AAAA;;AACtB,qFAAMA,KAAN;;AADsB,kEAQZ,YAAM;AAChB,YAAKC,QAAL,CAAc;AAAEC,QAAAA,WAAW,EAAE;AAAf,OAAd;AACH,KAVyB;;AAAA,iEAYb,YAAM;AACf,YAAKD,QAAL,CAAc;AAAEC,QAAAA,WAAW,EAAE;AAAf,OAAd;AACH,KAdyB;;AAGtB,UAAKC,KAAL,GAAa;AACTD,MAAAA,WAAW,EAAE;AADJ,KAAb;AAHsB;AAMzB;;;;6BAUQ;AAAA,wBAC6F,KAAKF,KADlG;AAAA,UACGI,QADH,eACGA,QADH;AAAA,UACaC,SADb,eACaA,SADb;AAAA,UACwBC,YADxB,eACwBA,YADxB;AAAA,UACsCC,YADtC,eACsCA,YADtC;AAAA,UACoDC,UADpD,eACoDA,UADpD;AAAA,UACgEC,cADhE,eACgEA,cADhE;AAAA,UACgFC,QADhF,eACgFA,QADhF;AAAA,UAEGR,WAFH,GAEmB,KAAKC,KAFxB,CAEGD,WAFH;AAIL,aACI;AAAK,QAAA,SAAS,EAAEP,UAAU,CAAC,cAAD,EAAiBU,SAAjB,CAA1B;AAAuD,QAAA,MAAM,EAAE,KAAKM,UAApE;AAAgF,QAAA,OAAO,EAAE,KAAKC;AAA9F,SACI,oBAAC,gBAAD;AACI,QAAA,YAAY,EAAEN,YADlB;AAEI,QAAA,QAAQ,EAAEI,QAFd;AAGI,QAAA,QAAQ,EAAE,oBAAC,mBAAD,EAAyBF,UAAzB;AAHd,SAKKJ,QALL,CADJ,EAQK,CAAC,CAACG,YAAF,IAAkB,oBAAC,kBAAD;AAAoB,QAAA,OAAO,EAAEL;AAA7B,SAA2CK,YAA3C,CARvB,EASK,CAAC,CAACE,cAAF,IAAoB,oBAAC,kBAAD;AAAoB,QAAA,OAAO,EAAEP;AAA7B,SAA2CO,cAA3C,CATzB,CADJ;AAaH;;;;EAlCqBf,KAAK,CAACmB,S;;AAqChC,eAAed,WAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport SelectorDropdown from '../../components/selector-dropdown';\n\nimport QuickSearchMessage from './QuickSearchMessage';\nimport QuickSearchSelector from './QuickSearchSelector';\n\nimport './QuickSearch.scss';\n\ntype Props = {\n    /** Options to render in the quick search dropdown */\n    children?: React.Node,\n    /** CSS class for the wrapper div */\n    className?: string,\n    /** Index at which to insert the divider */\n    dividerIndex?: number,\n    /** Message to display for the error state */\n    errorMessage?: React.Node,\n    /** Props for the input element (search bar) */\n    inputProps: Object,\n    /** Message to display when no results are found */\n    noItemsMessage?: React.Node,\n    /** Function called with the index of the selected option and the event (selected by keyboard or click) */\n    onSelect?: Function,\n};\n\ntype State = {\n    showMessage: boolean,\n};\n\nclass QuickSearch extends React.Component<Props, State> {\n    constructor(props: Props) {\n        super(props);\n\n        this.state = {\n            showMessage: false,\n        };\n    }\n\n    handleFocus = () => {\n        this.setState({ showMessage: true });\n    };\n\n    handleBlur = () => {\n        this.setState({ showMessage: false });\n    };\n\n    render() {\n        const { children, className, dividerIndex, errorMessage, inputProps, noItemsMessage, onSelect } = this.props;\n        const { showMessage } = this.state;\n\n        return (\n            <div className={classNames('quick-search', className)} onBlur={this.handleBlur} onFocus={this.handleFocus}>\n                <SelectorDropdown\n                    dividerIndex={dividerIndex}\n                    onSelect={onSelect}\n                    selector={<QuickSearchSelector {...inputProps} />}\n                >\n                    {children}\n                </SelectorDropdown>\n                {!!errorMessage && <QuickSearchMessage isShown={showMessage}>{errorMessage}</QuickSearchMessage>}\n                {!!noItemsMessage && <QuickSearchMessage isShown={showMessage}>{noItemsMessage}</QuickSearchMessage>}\n            </div>\n        );\n    }\n}\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}
+{"version":3,"sources":["../../../src/features/quick-search/QuickSearch.js"],"names":["React","classNames","SelectorDropdown","QuickSearchMessage","QuickSearchSelector","QuickSearch","props","setState","showMessage","state","children","className","dividerIndex","errorMessage","inputProps","noItemsMessage","onSelect","title","handleBlur","handleFocus","Component"],"mappings":";;;;;;;;;;;;;;;;;;;;AACA,OAAO,KAAKA,KAAZ,MAAuB,OAAvB;AACA,OAAOC,UAAP,MAAuB,YAAvB;AAEA,OAAOC,gBAAP,MAA6B,oCAA7B;AAEA,OAAOC,kBAAP,MAA+B,sBAA/B;AACA,OAAOC,mBAAP,MAAgC,uBAAhC;AAEA,OAAO,oBAAP;;IAyBMC,W;;;;;AACF,uBAAYC,KAAZ,EAA0B;AAAA;;AAAA;;AACtB,qFAAMA,KAAN;;AADsB,kEAQZ,YAAM;AAChB,YAAKC,QAAL,CAAc;AAAEC,QAAAA,WAAW,EAAE;AAAf,OAAd;AACH,KAVyB;;AAAA,iEAYb,YAAM;AACf,YAAKD,QAAL,CAAc;AAAEC,QAAAA,WAAW,EAAE;AAAf,OAAd;AACH,KAdyB;;AAGtB,UAAKC,KAAL,GAAa;AACTD,MAAAA,WAAW,EAAE;AADJ,KAAb;AAHsB;AAMzB;;;;6BAUQ;AAAA,wBAUD,KAAKF,KAVJ;AAAA,UAEDI,QAFC,eAEDA,QAFC;AAAA,UAGDC,SAHC,eAGDA,SAHC;AAAA,UAIDC,YAJC,eAIDA,YAJC;AAAA,UAKDC,YALC,eAKDA,YALC;AAAA,UAMDC,UANC,eAMDA,UANC;AAAA,UAODC,cAPC,eAODA,cAPC;AAAA,UAQDC,QARC,eAQDA,QARC;AAAA,UASDC,KATC,eASDA,KATC;AAAA,UAWGT,WAXH,GAWmB,KAAKC,KAXxB,CAWGD,WAXH;AAaL,aACI;AAAK,QAAA,SAAS,EAAEP,UAAU,CAAC,cAAD,EAAiBU,SAAjB,CAA1B;AAAuD,QAAA,MAAM,EAAE,KAAKO,UAApE;AAAgF,QAAA,OAAO,EAAE,KAAKC;AAA9F,SACI,oBAAC,gBAAD;AACI,QAAA,YAAY,EAAEP,YADlB;AAEI,QAAA,QAAQ,EAAEI,QAFd;AAGI,QAAA,QAAQ,EAAE,oBAAC,mBAAD,EAAyBF,UAAzB,CAHd;AAII,QAAA,KAAK,EAAEG;AAJX,SAMKP,QANL,CADJ,EASK,CAAC,CAACG,YAAF,IAAkB,oBAAC,kBAAD;AAAoB,QAAA,OAAO,EAAEL;AAA7B,SAA2CK,YAA3C,CATvB,EAUK,CAAC,CAACE,cAAF,IAAoB,oBAAC,kBAAD;AAAoB,QAAA,OAAO,EAAEP;AAA7B,SAA2CO,cAA3C,CAVzB,CADJ;AAcH;;;;EA5CqBf,KAAK,CAACoB,S;;AA+ChC,eAAef,WAAf","sourcesContent":["// @flow\nimport * as React from 'react';\nimport classNames from 'classnames';\n\nimport SelectorDropdown from '../../components/selector-dropdown';\n\nimport QuickSearchMessage from './QuickSearchMessage';\nimport QuickSearchSelector from './QuickSearchSelector';\n\nimport './QuickSearch.scss';\n\ntype Props = {\n    /** Options to render in the quick search dropdown */\n    children?: React.Node,\n    /** CSS class for the wrapper div */\n    className?: string,\n    /** Index at which to insert the divider */\n    dividerIndex?: number,\n    /** Message to display for the error state */\n    errorMessage?: React.Node,\n    /** Props for the input element (search bar) */\n    inputProps: Object,\n    /** Message to display when no results are found */\n    noItemsMessage?: React.Node,\n    /** Function called with the index of the selected option and the event (selected by keyboard or click) */\n    onSelect?: Function,\n    /** Optional title text that will be rendered above the list */\n    title?: React.Node,\n};\n\ntype State = {\n    showMessage: boolean,\n};\n\nclass QuickSearch extends React.Component<Props, State> {\n    constructor(props: Props) {\n        super(props);\n\n        this.state = {\n            showMessage: false,\n        };\n    }\n\n    handleFocus = () => {\n        this.setState({ showMessage: true });\n    };\n\n    handleBlur = () => {\n        this.setState({ showMessage: false });\n    };\n\n    render() {\n        const {\n            children,\n            className,\n            dividerIndex,\n            errorMessage,\n            inputProps,\n            noItemsMessage,\n            onSelect,\n            title,\n        } = this.props;\n        const { showMessage } = this.state;\n\n        return (\n            <div className={classNames('quick-search', className)} onBlur={this.handleBlur} onFocus={this.handleFocus}>\n                <SelectorDropdown\n                    dividerIndex={dividerIndex}\n                    onSelect={onSelect}\n                    selector={<QuickSearchSelector {...inputProps} />}\n                    title={title}\n                >\n                    {children}\n                </SelectorDropdown>\n                {!!errorMessage && <QuickSearchMessage isShown={showMessage}>{errorMessage}</QuickSearchMessage>}\n                {!!noItemsMessage && <QuickSearchMessage isShown={showMessage}>{noItemsMessage}</QuickSearchMessage>}\n            </div>\n        );\n    }\n}\n\nexport default QuickSearch;\n"],"file":"QuickSearch.js"}

package/es/features/unified-share-modal/SharedLinkSection.js

@@ -21,6 +21,7 @@ function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || func
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
 import * as React from 'react';
+import noop from 'lodash/noop';
 import { FormattedMessage } from 'react-intl';
 import PlainButton from '../../components/plain-button';
 import Button from '../../components/button';
@@ -98,8 +99,7 @@ function (_React$Component) {
     _this.state = {
       isAutoCreatingSharedLink: false,
       isCopySuccessful: null,
-      isSharedLinkEditTooltipShown: false,
-      isPermissionElevatedToEdit: false
+      isSharedLinkEditTooltipShown: false
     };
     return _this;
   }
@@ -149,8 +149,7 @@ function (_React$Component) {
       var _this$state = this.state,
           isAutoCreatingSharedLink = _this$state.isAutoCreatingSharedLink,
           isCopySuccessful = _this$state.isCopySuccessful,
-          isSharedLinkEditTooltipShown = _this$state.isSharedLinkEditTooltipShown,
-          isPermissionElevatedToEdit = _this$state.isPermissionElevatedToEdit;
+          isSharedLinkEditTooltipShown = _this$state.isSharedLinkEditTooltipShown;
 
       if (autoCreateSharedLink && !isAutoCreatingSharedLink && !sharedLink.url && !submitting && !sharedLink.isNewSharedLink) {
         this.setState({
@@ -169,18 +168,6 @@ function (_React$Component) {
         }
       }
 
-      if (prevProps.sharedLink.permissionLevel !== '' && prevProps.sharedLink.permissionLevel !== CAN_EDIT && sharedLink.permissionLevel === CAN_EDIT) {
-        this.setState({
-          isPermissionElevatedToEdit: true
-        });
-      }
-
-      if (isPermissionElevatedToEdit && (sharedLink.permissionLevel !== CAN_EDIT || sharedLink.accessLevel !== ANYONE_IN_COMPANY)) {
-        this.setState({
-          isPermissionElevatedToEdit: false
-        });
-      }
-
       if (Browser.canWriteToClipboard() && triggerCopyOnLoad && !isAutoCreatingSharedLink && sharedLink.url && isCopySuccessful === null) {
         onCopyInit();
         navigator.clipboard.writeText(sharedLink.url).then(function () {
@@ -231,7 +218,6 @@ function (_React$Component) {
           tooltips = _this$props4.tooltips;
       var _this$state2 = this.state,
           isCopySuccessful = _this$state2.isCopySuccessful,
-          isPermissionElevatedToEdit = _this$state2.isPermissionElevatedToEdit,
           isSharedLinkEditTooltipShown = _this$state2.isSharedLinkEditTooltipShown;
       var accessLevel = sharedLink.accessLevel,
           accessLevelsDisabledReason = sharedLink.accessLevelsDisabledReason,
@@ -245,7 +231,8 @@ function (_React$Component) {
           onChangeSharedLinkAccessLevel = trackingProps.onChangeSharedLinkAccessLevel,
           onChangeSharedLinkPermissionLevel = trackingProps.onChangeSharedLinkPermissionLevel,
           onSharedLinkAccessMenuOpen = trackingProps.onSharedLinkAccessMenuOpen,
-          onSharedLinkCopy = trackingProps.onSharedLinkCopy,
+          _trackingProps$onShar = trackingProps.onSharedLinkCopy,
+          onSharedLinkCopy = _trackingProps$onShar === void 0 ? noop : _trackingProps$onShar,
           sendSharedLinkButtonProps = trackingProps.sendSharedLinkButtonProps,
           sharedLinkAccessMenuButtonProps = trackingProps.sharedLinkAccessMenuButtonProps,
           sharedLinkPermissionsMenuButtonProps = trackingProps.sharedLinkPermissionsMenuButtonProps;
@@ -277,7 +264,9 @@ function (_React$Component) {
         className: "shared-link-field-container",
         disabled: submitting,
         label: "",
-        onCopySuccess: onSharedLinkCopy,
+        onCopySuccess: function onCopySuccess() {
+          return onSharedLinkCopy(permissionLevel);
+        },
         triggerCopyOnLoad: shouldTriggerCopyOnLoad,
         type: "url",
         value: url
@@ -349,7 +338,7 @@ function (_React$Component) {
         "data-testid": "shared-link-editable-publicly-available-message"
       }, messages.sharedLinkEditablePubliclyAvailable)) : React.createElement(FormattedMessage, _extends({
         "data-testid": "shared-link-publicly-available-message"
-      }, messages.sharedLinkPubliclyAvailable))), accessLevel === ANYONE_IN_COMPANY && isPermissionElevatedToEdit && React.createElement("div", {
+      }, messages.sharedLinkPubliclyAvailable))), accessLevel === ANYONE_IN_COMPANY && permissionLevel === CAN_EDIT && React.createElement("div", {
         className: "security-indicator-note"
       }, React.createElement("span", {
         className: "security-indicator-icon-globe"

package/es/features/unified-share-modal/SharedLinkSection.js.flow

@@ -1,6 +1,7 @@
 // @flow
 
 import * as React from 'react';
+import noop from 'lodash/noop';
 import { FormattedMessage } from 'react-intl';
 
 import PlainButton from '../../components/plain-button';
@@ -74,7 +75,6 @@ type Props = {
 type State = {
     isAutoCreatingSharedLink: boolean,
     isCopySuccessful: ?boolean,
-    isPermissionElevatedToEdit: boolean,
     isSharedLinkEditTooltipShown: boolean,
 };
 
@@ -93,7 +93,6 @@ class SharedLinkSection extends React.Component<Props, State> {
             isAutoCreatingSharedLink: false,
             isCopySuccessful: null,
             isSharedLinkEditTooltipShown: false,
-            isPermissionElevatedToEdit: false,
         };
     }
 
@@ -134,12 +133,7 @@ class SharedLinkSection extends React.Component<Props, State> {
             onCopyInit = () => {},
         } = this.props;
 
-        const {
-            isAutoCreatingSharedLink,
-            isCopySuccessful,
-            isSharedLinkEditTooltipShown,
-            isPermissionElevatedToEdit,
-        } = this.state;
+        const { isAutoCreatingSharedLink, isCopySuccessful, isSharedLinkEditTooltipShown } = this.state;
 
         if (
             autoCreateSharedLink &&
@@ -159,21 +153,6 @@ class SharedLinkSection extends React.Component<Props, State> {
             }
         }
 
-        if (
-            prevProps.sharedLink.permissionLevel !== '' &&
-            prevProps.sharedLink.permissionLevel !== CAN_EDIT &&
-            sharedLink.permissionLevel === CAN_EDIT
-        ) {
-            this.setState({ isPermissionElevatedToEdit: true });
-        }
-
-        if (
-            isPermissionElevatedToEdit &&
-            (sharedLink.permissionLevel !== CAN_EDIT || sharedLink.accessLevel !== ANYONE_IN_COMPANY)
-        ) {
-            this.setState({ isPermissionElevatedToEdit: false });
-        }
-
         if (
             Browser.canWriteToClipboard() &&
             triggerCopyOnLoad &&
@@ -267,7 +246,7 @@ class SharedLinkSection extends React.Component<Props, State> {
             tooltips,
         } = this.props;
 
-        const { isCopySuccessful, isPermissionElevatedToEdit, isSharedLinkEditTooltipShown } = this.state;
+        const { isCopySuccessful, isSharedLinkEditTooltipShown } = this.state;
 
         const {
             accessLevel,
@@ -285,7 +264,7 @@ class SharedLinkSection extends React.Component<Props, State> {
             onChangeSharedLinkAccessLevel,
             onChangeSharedLinkPermissionLevel,
             onSharedLinkAccessMenuOpen,
-            onSharedLinkCopy,
+            onSharedLinkCopy = noop,
             sendSharedLinkButtonProps,
             sharedLinkAccessMenuButtonProps,
             sharedLinkPermissionsMenuButtonProps,
@@ -321,7 +300,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                             className="shared-link-field-container"
                             disabled={submitting}
                             label=""
-                            onCopySuccess={onSharedLinkCopy}
+                            onCopySuccess={() => onSharedLinkCopy(permissionLevel)}
                             triggerCopyOnLoad={shouldTriggerCopyOnLoad}
                             type="url"
                             value={url}
@@ -417,7 +396,7 @@ class SharedLinkSection extends React.Component<Props, State> {
                         )}
                     </div>
                 )}
-                {accessLevel === ANYONE_IN_COMPANY && isPermissionElevatedToEdit && (
+                {accessLevel === ANYONE_IN_COMPANY && permissionLevel === CAN_EDIT && (
                     <div className="security-indicator-note">
                         <span className="security-indicator-icon-globe">
                             <IconGlobe height={12} width={12} />