@atlaskit/reactions 21.4.0 → 21.6.0

package/dist/cjs/components/ReactionPicker.js

@@ -1,289 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ReactionPicker = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _reactDom = _interopRequireDefault(require("react-dom"));
-
-var _core = require("@emotion/core");
-
-var _picker = require("@atlaskit/emoji/picker");
-
-var _popper = require("@atlaskit/popper");
-
-var _constants = require("@atlaskit/theme/constants");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _Selector = require("./Selector");
-
-var _Trigger = require("./Trigger");
-
-var _analytics = require("../analytics");
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var pickerStyle = (0, _core.css)({
-  verticalAlign: 'middle',
-  '&.miniMode': {
-    display: 'inline-block',
-    marginRight: '4px'
-  }
-});
-var contentStyle = (0, _core.css)({
-  display: 'flex'
-});
-var popupStyle = (0, _core.css)({
-  background: (0, _tokens.token)('elevation.surface.overlay', _colors.N0),
-  borderRadius: "".concat((0, _constants.borderRadius)(), "px"),
-  boxShadow: (0, _tokens.token)('elevation.shadow.overlay', "0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A)),
-  '&> div': {
-    boxShadow: undefined
-  }
-});
-
-function noop() {}
-
-var ReactionPicker = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(ReactionPicker, _PureComponent);
-
-  var _super = _createSuper(ReactionPicker);
-
-  function ReactionPicker(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ReactionPicker);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updatePopper", noop);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleClickOutside", function (e) {
-      var isOpen = _this.state.isOpen;
-
-      if (!isOpen) {
-        return;
-      }
-
-      var domNode = _reactDom.default.findDOMNode((0, _assertThisInitialized2.default)(_this));
-
-      if (!domNode || e.target instanceof Node && !domNode.contains(e.target)) {
-        if (_this.props.onCancel) {
-          _this.props.onCancel();
-        }
-
-        _this.close();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "showFullPicker", function (e) {
-      e.preventDefault();
-      var onMore = _this.props.onMore;
-
-      if (onMore) {
-        onMore();
-      } // Update popper position
-
-
-      _this.setState({
-        isOpen: true,
-        showFullPicker: true
-      }, function () {
-        return _this.updatePopper();
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onEmojiSelected", function (emoji) {
-      var onSelection = _this.props.onSelection;
-
-      if (!emoji.id) {
-        return;
-      }
-
-      onSelection(emoji.id, _this.state.showFullPicker ? 'emojiPicker' : 'quickSelector');
-
-      _this.close(emoji.id);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onTriggerClick", function () {
-      // ufo start reaction experience
-      _analytics.UFO.PickerRender.start();
-
-      if (_this.props.onOpen) {
-        _this.props.onOpen();
-      }
-
-      _this.setState({
-        isOpen: !_this.state.isOpen,
-        showFullPicker: false
-      }, function () {
-        // ufo add reaction success
-        _analytics.UFO.PickerRender.success();
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "popperModifiers", [{
-      name: 'applyStyle',
-      enabled: false
-    }, {
-      name: 'hide',
-      enabled: false
-    }, {
-      name: 'offset',
-      enabled: true,
-      options: {
-        offset: [0, 0]
-      }
-    }, {
-      name: 'flip',
-      enabled: true,
-      options: {
-        flipVariations: true,
-        boundariesElement: 'scrollParent'
-      }
-    }, {
-      name: 'preventOverflow',
-      enabled: true
-    }]);
-    _this.state = {
-      isOpen: false,
-      showFullPicker: false
-    };
-    return _this;
-  }
-
-  (0, _createClass2.default)(ReactionPicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      document.addEventListener('click', this.handleClickOutside);
-    }
-  }, {
-    key: "componentWillUnmount",
-    value: function componentWillUnmount() {
-      document.removeEventListener('click', this.handleClickOutside);
-
-      _analytics.UFO.PickerRender.abort({
-        metadata: {
-          source: 'Reaction-Picker',
-          reason: 'unmount'
-        }
-      });
-    }
-  }, {
-    key: "close",
-    value: function close(_emojiId) {
-      this.setState({
-        isOpen: false,
-        showFullPicker: false
-      }, function () {
-        // ufo abort reaction experience
-        _analytics.UFO.PickerRender.abort({
-          metadata: {
-            emojiId: _emojiId,
-            source: 'Reaction-Picker',
-            reason: 'close dialog'
-          }
-        });
-      });
-    }
-  }, {
-    key: "renderSelector",
-    value: function renderSelector() {
-      var _this$props = this.props,
-          emojiProvider = _this$props.emojiProvider,
-          allowAllEmojis = _this$props.allowAllEmojis;
-      return (0, _core.jsx)("div", {
-        css: contentStyle
-      }, (0, _core.jsx)(_Selector.Selector, {
-        emojiProvider: emojiProvider,
-        onSelection: this.onEmojiSelected,
-        showMore: allowAllEmojis,
-        onMoreClick: this.showFullPicker
-      }));
-    }
-  }, {
-    key: "renderEmojiPicker",
-    value: function renderEmojiPicker() {
-      return (0, _core.jsx)(_picker.EmojiPicker, {
-        emojiProvider: this.props.emojiProvider,
-        onSelection: this.onEmojiSelected
-      });
-    }
-  }, {
-    key: "renderContent",
-    value: function renderContent() {
-      return this.state.showFullPicker ? this.renderEmojiPicker() : this.renderSelector();
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var isOpen = this.state.isOpen;
-      var _this$props2 = this.props,
-          miniMode = _this$props2.miniMode,
-          className = _this$props2.className;
-      return (0, _core.jsx)("div", {
-        className: " ".concat(isOpen ? 'isOpen' : '', " ").concat(miniMode ? 'miniMode' : '', " ").concat(className),
-        css: pickerStyle
-      }, (0, _core.jsx)(_popper.Manager, null, (0, _core.jsx)(_popper.Reference, null, function (_ref) {
-        var ref = _ref.ref;
-        return (0, _core.jsx)(_Trigger.Trigger, {
-          ref: ref,
-          onClick: _this2.onTriggerClick,
-          miniMode: miniMode,
-          disabled: _this2.props.disabled
-        });
-      }), (0, _core.jsx)(_popper.Popper, {
-        placement: "bottom-start",
-        modifiers: this.popperModifiers
-      }, function (_ref2) {
-        var ref = _ref2.ref,
-            style = _ref2.style,
-            update = _ref2.update;
-        _this2.updatePopper = update;
-        return (0, _core.jsx)(_react.Fragment, null, isOpen && (0, _core.jsx)("div", {
-          style: _objectSpread({
-            zIndex: _constants.layers.layer()
-          }, style),
-          ref: ref
-        }, (0, _core.jsx)("div", {
-          css: popupStyle
-        }, _this2.renderContent())));
-      })));
-    }
-  }]);
-  return ReactionPicker;
-}(_react.PureComponent);
-
-exports.ReactionPicker = ReactionPicker;
-(0, _defineProperty2.default)(ReactionPicker, "defaultProps", {
-  disabled: false
-});

package/dist/cjs/components/ReactionTooltip.js

@@ -1,82 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ReactionTooltip = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _core = require("@emotion/core");
-
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
-var _reactIntlNext = require("react-intl-next");
-
-var _tokens = require("@atlaskit/tokens");
-
-var _colors = require("@atlaskit/theme/colors");
-
-var _i18n = require("./i18n");
-
-/** @jsx jsx */
-var verticalMargin = 5;
-var tooltipStyle = (0, _core.css)({
-  maxWidth: '150px',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  marginBottom: verticalMargin,
-  ul: {
-    listStyle: 'none',
-    margin: 0,
-    padding: 0,
-    textAlign: 'left'
-  },
-  li: {
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-    marginTop: verticalMargin
-  }
-});
-var emojiNameStyle = (0, _core.css)({
-  textTransform: 'capitalize',
-  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
-  fontWeight: 600
-});
-var footerStyle = (0, _core.css)({
-  color: (0, _tokens.token)('color.text.inverse', _colors.N90),
-  fontWeight: 300
-});
-var TOOLTIP_USERS_LIMIT = 5;
-
-var ReactionTooltip = function ReactionTooltip(_ref) {
-  var emojiName = _ref.emojiName,
-      children = _ref.children,
-      users = _ref.reaction.users;
-  var content = !users || users.length === 0 ? null : (0, _core.jsx)("div", {
-    css: tooltipStyle
-  }, (0, _core.jsx)("ul", null, emojiName ? (0, _core.jsx)("li", {
-    css: emojiNameStyle
-  }, emojiName) : null, users.slice(0, TOOLTIP_USERS_LIMIT).map(function (user, index) {
-    return (0, _core.jsx)("li", {
-      key: index
-    }, user.displayName);
-  }), users.length > TOOLTIP_USERS_LIMIT ? (0, _core.jsx)("li", {
-    css: footerStyle
-  }, (0, _core.jsx)(_reactIntlNext.FormattedMessage, (0, _extends2.default)({}, _i18n.messages.otherUsers, {
-    values: {
-      count: users.length - TOOLTIP_USERS_LIMIT
-    }
-  }))) : null));
-  return (0, _core.jsx)(_tooltip.default, {
-    content: content,
-    position: "bottom"
-  }, _react.default.Children.only(children));
-};
-
-exports.ReactionTooltip = ReactionTooltip;

package/dist/cjs/components/Reactions.js

@@ -1,194 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ReactionsWithoutAnalytics = exports.Reactions = void 0;
-
-var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
-
-var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
-
-var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
-
-var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
-
-var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
-
-var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
-
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _core = require("@emotion/core");
-
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _reactIntlNext = require("react-intl-next");
-
-var _analytics = require("../analytics");
-
-var _ReactionStatus = require("../types/ReactionStatus");
-
-var _i18n = require("./i18n");
-
-var _Reaction = require("./Reaction");
-
-var _ReactionPicker = require("./ReactionPicker");
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-var reactionStyle = (0, _core.css)({
-  display: 'inline-block',
-  // top margin of 2px to allow spacing between rows when wrapped (paired with top margin in reactionsStyle)
-  margin: '2px 4px 0 4px'
-});
-var wrapperStyle = (0, _core.css)({
-  display: 'flex',
-  flexWrap: 'wrap',
-  position: 'relative',
-  alignItems: 'center',
-  borderRadius: '15px',
-  // To allow to row spacing of 2px on wrap, and 0px on first row
-  marginTop: '-2px',
-  '> :first-of-type > :first-child': {
-    marginLeft: 0
-  }
-});
-
-var ReactionsWithoutAnalytics = /*#__PURE__*/function (_React$PureComponent) {
-  (0, _inherits2.default)(ReactionsWithoutAnalytics, _React$PureComponent);
-
-  var _super = _createSuper(ReactionsWithoutAnalytics);
-
-  function ReactionsWithoutAnalytics(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, ReactionsWithoutAnalytics);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidUpdate", function () {
-      if (_this.props.status === _ReactionStatus.ReactionStatus.ready && _this.renderTime) {
-        (0, _analytics.createAndFireSafe)(_this.props.createAnalyticsEvent, _analytics.createReactionsRenderedEvent, _this.renderTime);
-        _this.renderTime = undefined;
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isDisabled", function () {
-      return _this.props.status !== _ReactionStatus.ReactionStatus.ready;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getTooltip", function () {
-      var _this$props = _this.props,
-          status = _this$props.status,
-          errorMessage = _this$props.errorMessage;
-
-      switch (status) {
-        case _ReactionStatus.ReactionStatus.error:
-          return errorMessage ? errorMessage : (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.unexpectedError);
-
-        case _ReactionStatus.ReactionStatus.loading:
-        case _ReactionStatus.ReactionStatus.notLoaded:
-          return (0, _core.jsx)(_reactIntlNext.FormattedMessage, _i18n.messages.loadingReactions);
-
-        default:
-          return undefined;
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleReactionMouseEnter", function (reaction) {
-      if (_this.props.onReactionHover) {
-        _this.props.onReactionHover(reaction.emojiId);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handlePickerOpen", function () {
-      _this.openTime = Date.now();
-      (0, _analytics.createAndFireSafe)(_this.props.createAnalyticsEvent, _analytics.createPickerButtonClickedEvent, _this.props.reactions.length);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnCancel", function () {
-      (0, _analytics.createAndFireSafe)(_this.props.createAnalyticsEvent, _analytics.createPickerCancelledEvent, _this.openTime);
-      _this.openTime = undefined;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnMore", function () {
-      (0, _analytics.createAndFireSafe)(_this.props.createAnalyticsEvent, _analytics.createPickerMoreClickedEvent, _this.openTime);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOnSelection", function (emojiId, source) {
-      (0, _analytics.createAndFireSafe)(_this.props.createAnalyticsEvent, _analytics.createReactionSelectionEvent, source, emojiId, _this.props.reactions.find(function (reaction) {
-        return reaction.emojiId === emojiId;
-      }), _this.openTime);
-      _this.openTime = undefined;
-
-      if (_this.props.onSelection) {
-        _this.props.onSelection(emojiId);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderReaction", function (reaction) {
-      return (0, _core.jsx)(_Reaction.Reaction, {
-        key: reaction.emojiId,
-        css: reactionStyle,
-        reaction: reaction,
-        emojiProvider: _this.props.emojiProvider,
-        onClick: _this.props.onReactionClick,
-        onMouseEnter: _this.handleReactionMouseEnter,
-        flash: _this.props.flash[reaction.emojiId]
-      });
-    });
-
-    if (props.status !== _ReactionStatus.ReactionStatus.ready) {
-      _this.renderTime = Date.now();
-    }
-
-    return _this;
-  }
-
-  (0, _createClass2.default)(ReactionsWithoutAnalytics, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      if (this.props.status === _ReactionStatus.ReactionStatus.notLoaded) {
-        this.props.loadReaction();
-      }
-    }
-  }, {
-    key: "renderPicker",
-    value: function renderPicker() {
-      var _this$props2 = this.props,
-          emojiProvider = _this$props2.emojiProvider,
-          boundariesElement = _this$props2.boundariesElement,
-          allowAllEmojis = _this$props2.allowAllEmojis;
-      return (0, _core.jsx)(_tooltip.default, {
-        content: this.getTooltip()
-      }, (0, _core.jsx)(_ReactionPicker.ReactionPicker, {
-        css: reactionStyle,
-        emojiProvider: emojiProvider,
-        miniMode: true,
-        boundariesElement: boundariesElement,
-        allowAllEmojis: allowAllEmojis,
-        disabled: this.isDisabled(),
-        onSelection: this.handleOnSelection,
-        onOpen: this.handlePickerOpen,
-        onCancel: this.handleOnCancel,
-        onMore: this.handleOnMore
-      }));
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return (0, _core.jsx)("div", {
-        css: wrapperStyle
-      }, this.props.reactions.map(this.renderReaction), this.renderPicker());
-    }
-  }]);
-  return ReactionsWithoutAnalytics;
-}(_react.default.PureComponent);
-
-exports.ReactionsWithoutAnalytics = ReactionsWithoutAnalytics;
-(0, _defineProperty2.default)(ReactionsWithoutAnalytics, "defaultProps", {
-  flash: {},
-  reactions: []
-});
-(0, _defineProperty2.default)(ReactionsWithoutAnalytics, "displayName", 'Reactions');
-var Reactions = (0, _analyticsNext.withAnalyticsEvents)()(ReactionsWithoutAnalytics);
-exports.Reactions = Reactions;