@atlaskit/mention 27.17.1 → 27.18.1

package/dist/esm/components/MentionPicker/index.js

@@ -1,230 +1,20 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
-function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
-import React from 'react';
-import { IntlProvider, injectIntl } from 'react-intl';
-import { Text } from '@atlaskit/primitives/compiled';
-import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
-import { fireAnalyticsMentionTypeaheadEvent } from '../../util/analytics';
-import uniqueId from '../../util/id';
-import debug from '../../util/logger';
-import Popup from '../Popup';
-import ResourcedMentionList from '../ResourcedMentionList';
-import { MentionPickerInfoStyle, MentionPickerStyle } from './styles';
-/**
- * @class MentionPicker
- */
-export var MentionPicker = /*#__PURE__*/function (_React$PureComponent) {
-  function MentionPicker(props) {
-    var _this;
-    _classCallCheck(this, MentionPicker);
-    _this = _callSuper(this, MentionPicker, [props]);
-    _defineProperty(_this, "selectNext", function () {
-      if (_this.mentionListRef) {
-        _this.mentionListRef.selectNext();
-      }
-    });
-    _defineProperty(_this, "selectPrevious", function () {
-      if (_this.mentionListRef) {
-        _this.mentionListRef.selectPrevious();
-      }
-    });
-    _defineProperty(_this, "selectIndex", function (index, callback) {
-      if (_this.mentionListRef) {
-        _this.mentionListRef.selectIndex(index, callback);
-      }
-    });
-    _defineProperty(_this, "selectId", function (id, callback) {
-      if (_this.mentionListRef) {
-        _this.mentionListRef.selectId(id, callback);
-      }
-    });
-    _defineProperty(_this, "chooseCurrentSelection", function () {
-      if (_this.mentionListRef) {
-        _this.mentionListRef.chooseCurrentSelection();
-      }
-    });
-    _defineProperty(_this, "mentionsCount", function () {
-      if (_this.mentionListRef) {
-        return _this.mentionListRef.mentionsCount();
-      }
-      return 0;
-    });
-    /**
-     * Called after the 'visible' state is changed to decide whether the onOpen or onClose
-     * handlers should be called.
-     *
-     * It should be noted that the visible state of the component is not considered in
-     * this function. Instead the old state and new state should be passed as parameters.
-     */
-    _defineProperty(_this, "onFilterVisibilityChange", function (oldVisibility, newVisibility) {
-      if (oldVisibility !== newVisibility) {
-        if (newVisibility) {
-          if (_this.props.onOpen) {
-            _this.props.onOpen();
-          }
-        } else {
-          if (_this.props.onClose) {
-            _this.props.onClose();
-          }
-        }
-      }
-    });
-    // internal, used for callbacks
-    _defineProperty(_this, "filterChange", function (mentions, query, stats) {
-      debug('ak-mention-picker.filterChange', mentions.length);
-      var wasVisible = _this.state.visible;
-      var visible = mentions.length > 0;
-      _this.setState({
-        visible: visible
-      });
-      _this.onFilterVisibilityChange(wasVisible, visible);
-      fireAnalyticsMentionTypeaheadEvent(_this.props)('rendered', stats && stats.duration, mentions.map(function (mention) {
-        return mention.id;
-      }), query);
-    });
-    _defineProperty(_this, "filterError", function (error) {
-      debug('ak-mention-picker.filterError', error);
-      var wasVisible = _this.state.visible;
-      _this.setState({
-        visible: true,
-        info: undefined
-      });
-      _this.onFilterVisibilityChange(wasVisible, true);
-    });
-    _defineProperty(_this, "filterInfo", function (info) {
-      debug('ak-mention-picker.filterInfo', info);
-      _this.setState({
-        info: info
-      });
-    });
-    _defineProperty(_this, "handleMentionListRef", function (ref) {
-      _this.mentionListRef = ref;
-    });
-    _this.subscriberKey = uniqueId('ak-mention-picker');
-    _this.state = {
-      visible: false
-    };
-    _this.applyPropChanges({}, props);
-    return _this;
-  }
-  _inherits(MentionPicker, _React$PureComponent);
-  return _createClass(MentionPicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.subscribeResourceProvider(this.props.resourceProvider);
-    }
-  }, {
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      this.applyPropChanges(this.props, nextProps);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      this.unsubscribeResourceProvider(this.props.resourceProvider);
-    }
-  }, {
-    key: "applyPropChanges",
-    value:
-    // Internal
-    function applyPropChanges(prevProps, nextProps) {
-      var oldResourceProvider = prevProps.resourceProvider;
-      var newResourceProvider = nextProps.resourceProvider;
-      var resourceProviderChanged = oldResourceProvider !== newResourceProvider;
+/* eslint-disable @repo/internal/deprecations/deprecation-ticket-required -- VOLTC-139 tracks removal of these deprecated re-export shims. */
 
-      // resource provider
-      if (resourceProviderChanged) {
-        this.unsubscribeResourceProvider(oldResourceProvider);
-        this.subscribeResourceProvider(newResourceProvider);
-      }
-    }
-  }, {
-    key: "subscribeResourceProvider",
-    value: function subscribeResourceProvider(resourceProvider) {
-      if (resourceProvider) {
-        resourceProvider.subscribe(this.subscriberKey, this.filterChange, this.filterError, this.filterInfo, undefined);
-      }
-    }
-  }, {
-    key: "unsubscribeResourceProvider",
-    value: function unsubscribeResourceProvider(resourceProvider) {
-      if (resourceProvider) {
-        resourceProvider.unsubscribe(this.subscriberKey);
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-        resourceProvider = _this$props.resourceProvider,
-        presenceProvider = _this$props.presenceProvider,
-        onSelection = _this$props.onSelection,
-        query = _this$props.query,
-        target = _this$props.target,
-        position = _this$props.position,
-        zIndex = _this$props.zIndex,
-        offsetX = _this$props.offsetX,
-        offsetY = _this$props.offsetY,
-        intl = _this$props.intl;
-      var _this$state = this.state,
-        visible = _this$state.visible,
-        info = _this$state.info;
-      var resourceMentionList = /*#__PURE__*/React.createElement(ResourcedMentionList, {
-        resourceProvider: resourceProvider,
-        presenceProvider: presenceProvider,
-        onSelection: onSelection,
-        query: query,
-        ref: this.handleMentionListRef
-      });
-      var infoContent = info && !visible ? /*#__PURE__*/React.createElement(MentionPickerInfoStyle, null, /*#__PURE__*/React.createElement(Text, {
-        as: "p"
-      }, info)) : null;
-      var content;
-      if (position) {
-        debug('target, position', target, position);
-        if (target) {
-          content = /*#__PURE__*/React.createElement(Popup, {
-            target: target,
-            relativePosition: position,
-            zIndex: zIndex,
-            offsetX: offsetX,
-            offsetY: offsetY
-          }, /*#__PURE__*/React.createElement(IntlProvider, {
-            locale: (intl === null || intl === void 0 ? void 0 : intl.locale) || 'en'
-          }, /*#__PURE__*/React.createElement("div", null, resourceMentionList, infoContent)));
-        } else {
-          // don't show if we have a position, but no target yet
-          content = null;
-        }
-      } else {
-        content = /*#__PURE__*/React.createElement("div", null, resourceMentionList, infoContent);
-      }
-      return (
-        /*#__PURE__*/
-        /* old classnames are essential for Confluence tests */
-        React.createElement(MentionPickerStyle
-        // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-        , {
-          className: "ak-mention-picker",
-          visible: visible || info
-        }, content)
-      );
-    }
-  }]);
-}(React.PureComponent);
-_defineProperty(MentionPicker, "defaultProps", {
-  onSelection: function onSelection() {},
-  onOpen: function onOpen() {},
-  onClose: function onClose() {}
-});
+import { injectIntl } from 'react-intl';
+import withAnalyticsEvents from '@atlaskit/analytics-next/withAnalyticsEvents';
+import { MentionPicker } from './MentionPicker';
 var MentionPickerWithIntl = injectIntl(MentionPicker, {
   forwardRef: true
 });
 export var MentionPickerWithAnalytics = withAnalyticsEvents({})(MentionPickerWithIntl);
-export default MentionPickerWithAnalytics;
+
+// Merges with the `const` above so that `MentionPickerWithAnalytics` is usable in a type
+// position as the component instance type (e.g. for refs). Both halves of a declaration
+// merge must live in the same module, so this alias cannot be split out.
+
+export default MentionPickerWithAnalytics;
+
+/**
+ * @deprecated Use `import { MentionPicker } from '@atlaskit/mention/mention-picker'` instead.
+ */
+export { MentionPicker } from './MentionPicker';

package/dist/esm/components/MessagesIntlProvider/index.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React from 'react';
 import { IntlProvider, useIntl } from 'react-intl';
-import { getMessagesForLocale } from '../../util/i18n';
+import { getMessagesForLocale } from '../../util/get-messages-for-locale';
 var EMPTY = {};
 var useI18n = function useI18n(locale) {
   var _React$useState = React.useState(EMPTY),

package/dist/esm/components/ResourcedMentionList/ResourcedMentionListWithoutAnalytics.js

@@ -0,0 +1,221 @@
+import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
+import _createClass from "@babel/runtime/helpers/createClass";
+import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
+import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
+import _inherits from "@babel/runtime/helpers/inherits";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
+function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+import React from 'react';
+import { SLI_EVENT_TYPE } from '../../util/analytics';
+import { fireSliAnalyticsEvent } from '../../util/fire-sli-analytics-event';
+import uniqueId from '../../util/id';
+import debug from '../../util/logger';
+import MentionList from '../MentionList';
+function applyPresence(mentions, presences) {
+  var updatedMentions = [];
+  for (var i = 0; i < mentions.length; i++) {
+    // Shallow copy
+    var mention = _objectSpread({}, mentions[i]);
+    var presence = presences[mention.id];
+    if (presence) {
+      mention.presence = presence;
+    }
+    updatedMentions.push(mention);
+  }
+  return updatedMentions;
+}
+function extractPresences(mentions) {
+  var presences = {};
+  for (var i = 0; i < mentions.length; i++) {
+    var mention = mentions[i];
+    if (mention.presence) {
+      presences[mention.id] = mention.presence;
+    }
+  }
+  return presences;
+}
+export var ResourcedMentionListWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
+  function ResourcedMentionListWithoutAnalytics(props) {
+    var _this;
+    _classCallCheck(this, ResourcedMentionListWithoutAnalytics);
+    _this = _callSuper(this, ResourcedMentionListWithoutAnalytics, [props]);
+    // API
+    _defineProperty(_this, "selectNext", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectNext();
+      }
+    });
+    _defineProperty(_this, "selectPrevious", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectPrevious();
+      }
+    });
+    _defineProperty(_this, "selectIndex", function (index, callback) {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectIndex(index, callback);
+      }
+    });
+    _defineProperty(_this, "selectId", function (id, callback) {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.selectId(id, callback);
+      }
+    });
+    _defineProperty(_this, "chooseCurrentSelection", function () {
+      if (_this.mentionListRef) {
+        _this.mentionListRef.chooseCurrentSelection();
+      }
+    });
+    _defineProperty(_this, "mentionsCount", function () {
+      if (_this.mentionListRef) {
+        return _this.mentionListRef.mentionsCount();
+      }
+      return 0;
+    });
+    // internal, used for callbacks
+    _defineProperty(_this, "filterChange", function (mentions) {
+      // Retain known presence
+      var currentPresences = extractPresences(_this.state.mentions);
+      _this.setState({
+        resourceError: undefined,
+        mentions: applyPresence(mentions, currentPresences)
+      });
+      _this.refreshPresences(mentions);
+    });
+    _defineProperty(_this, "sendAnalytics", function (event, actionSubject, action) {
+      if (event === SLI_EVENT_TYPE) {
+        fireSliAnalyticsEvent(_this.props)(actionSubject, action);
+      }
+    });
+    _defineProperty(_this, "filterError", function (error) {
+      debug('ak-resourced-mentions-list._filterError', error);
+      _this.setState({
+        resourceError: error
+      });
+    });
+    _defineProperty(_this, "presenceUpdate", function (presences) {
+      _this.setState({
+        mentions: applyPresence(_this.state.mentions, presences)
+      });
+    });
+    _defineProperty(_this, "notifySelection", function (mention) {
+      _this.props.resourceProvider.recordMentionSelection(mention);
+      if (_this.props.onSelection) {
+        _this.props.onSelection(mention);
+      }
+    });
+    _defineProperty(_this, "handleMentionListRef", function (ref) {
+      _this.mentionListRef = ref;
+    });
+    _this.subscriberKey = uniqueId('ak-resourced-mention-list');
+    _this.state = {
+      resourceError: undefined,
+      mentions: []
+    };
+    _this.applyPropChanges({}, props);
+    return _this;
+  }
+  _inherits(ResourcedMentionListWithoutAnalytics, _React$PureComponent);
+  return _createClass(ResourcedMentionListWithoutAnalytics, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.subscribeMentionProvider(this.props.resourceProvider);
+      this.subscribePresenceProvider(this.props.presenceProvider);
+    }
+  }, {
+    key: "UNSAFE_componentWillReceiveProps",
+    value: function UNSAFE_componentWillReceiveProps(nextProps) {
+      this.applyPropChanges(this.props, nextProps);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.unsubscribeMentionProvider(this.props.resourceProvider);
+      this.unsubscribePresenceProvider(this.props.presenceProvider);
+    }
+  }, {
+    key: "subscribeMentionProvider",
+    value:
+    // internal
+    function subscribeMentionProvider(mentionProvider) {
+      if (mentionProvider) {
+        mentionProvider.subscribe(this.subscriberKey, this.filterChange, this.filterError, undefined, undefined, this.sendAnalytics);
+      }
+    }
+  }, {
+    key: "subscribePresenceProvider",
+    value: function subscribePresenceProvider(presenceProvider) {
+      if (presenceProvider) {
+        presenceProvider.subscribe(this.subscriberKey, this.presenceUpdate);
+      }
+    }
+  }, {
+    key: "unsubscribeMentionProvider",
+    value: function unsubscribeMentionProvider(mentionProvider) {
+      if (mentionProvider) {
+        mentionProvider.unsubscribe(this.subscriberKey);
+      }
+    }
+  }, {
+    key: "unsubscribePresenceProvider",
+    value: function unsubscribePresenceProvider(presenceProvider) {
+      if (presenceProvider) {
+        presenceProvider.unsubscribe(this.subscriberKey);
+      }
+    }
+  }, {
+    key: "applyPropChanges",
+    value: function applyPropChanges(prevProps, nextProps) {
+      var oldResourceProvider = prevProps.resourceProvider;
+      var oldPresenceProvider = prevProps.presenceProvider;
+      var oldQuery = prevProps.query;
+      var newResourceProvider = nextProps.resourceProvider;
+      var newPresenceProvider = nextProps.presenceProvider;
+      var newQuery = nextProps.query;
+      var resourceProviderChanged = oldResourceProvider !== newResourceProvider;
+      var queryChanged = oldQuery !== newQuery;
+      var canFilter = !!(typeof newQuery === 'string' && newResourceProvider);
+      var shouldFilter = canFilter && (queryChanged || resourceProviderChanged);
+
+      // resource provider
+      if (resourceProviderChanged) {
+        this.unsubscribeMentionProvider(oldResourceProvider);
+        this.subscribeMentionProvider(newResourceProvider);
+      }
+
+      // presence provider
+      if (oldPresenceProvider !== newPresenceProvider) {
+        this.unsubscribePresenceProvider(oldPresenceProvider);
+        this.subscribePresenceProvider(newPresenceProvider);
+      }
+      if (shouldFilter) {
+        newResourceProvider.filter(newQuery);
+      }
+    }
+  }, {
+    key: "refreshPresences",
+    value: function refreshPresences(mentions) {
+      if (this.props.presenceProvider) {
+        var ids = mentions.map(function (mention) {
+          return mention.id;
+        });
+        this.props.presenceProvider.refreshPresence(ids);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$state = this.state,
+        mentions = _this$state.mentions,
+        resourceError = _this$state.resourceError;
+      return /*#__PURE__*/React.createElement(MentionList, {
+        mentions: mentions,
+        resourceError: resourceError,
+        onSelection: this.notifySelection,
+        ref: this.handleMentionListRef
+      });
+    }
+  }]);
+}(React.PureComponent);