@orioro/react-reactions 0.0.1

package/dist/index.mjs

@@ -0,0 +1,961 @@
+import React, { useState, useEffect, useMemo, useCallback, forwardRef, useImperativeHandle, createContext, useContext } from 'react';
+import { Popover, IconButton, Tooltip, Avatar, Text, Spinner, Tabs } from '@radix-ui/themes';
+import EmojiMartPicker from '@emoji-mart/react';
+import PT_BR from '@emoji-mart/data/i18n/pt.json';
+import { Icon } from '@mdi/react';
+import { mdiEmoticonHappyOutline, mdiClose } from '@mdi/js';
+import { Flex, DotDotDot, Box, Button } from '@orioro/react-ui-core';
+import styled from 'styled-components';
+import { AnimatePresence, motion } from 'framer-motion';
+import { usePrevious, usePreviousDistinct } from 'react-use';
+
+var DEFAULT_SIZE = 18;
+
+function EmojiPicker(_a) {
+  var _b = _a.i18n,
+    i18n = _b === void 0 ? PT_BR : _b,
+    data = _a.data,
+    open = _a.open,
+    onSetOpen = _a.onSetOpen,
+    _onEmojiSelect = _a.onEmojiSelect,
+    trigger = _a.trigger,
+    _c = _a.size,
+    size = _c === void 0 ? DEFAULT_SIZE : _c;
+  var _d = useState(open),
+    localOpen = _d[0],
+    setLocalOpen = _d[1];
+  useEffect(function () {
+    if (localOpen !== open && typeof onSetOpen === 'function') {
+      onSetOpen(localOpen);
+    }
+  }, [localOpen, onSetOpen]);
+  return /*#__PURE__*/React.createElement(Popover.Root, {
+    open: localOpen,
+    onOpenChange: setLocalOpen
+  }, /*#__PURE__*/React.createElement(Popover.Trigger, null, trigger ? trigger : ( /*#__PURE__*/React.createElement(IconButton, {
+    radius: "full",
+    variant: "ghost",
+    size: "1",
+    onClick: function onClick() {
+      return setLocalOpen(true);
+    }
+  }, /*#__PURE__*/React.createElement(Tooltip, {
+    content: "Adicionar rea\xE7\xE3o",
+    delayDuration: 1000
+  }, /*#__PURE__*/React.createElement(Icon, {
+    path: mdiEmoticonHappyOutline,
+    size: "".concat(1.15 * size, "px")
+  }))))), /*#__PURE__*/React.createElement(Popover.Content, {
+    style: {
+      padding: 0,
+      minWidth: 350
+    },
+    sideOffset: -24 - 4
+  }, /*#__PURE__*/React.createElement(EmojiMartPicker, {
+    data: data,
+    onEmojiSelect: function onEmojiSelect(emoji) {
+      setLocalOpen(false);
+      _onEmojiSelect(emoji);
+    },
+    i18n: i18n,
+    autofocus: true,
+    skinTonePosition: "none",
+    previewPosition: "none"
+  })));
+}
+
+function _typeof(o) {
+  "@babel/helpers - typeof";
+
+  return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) {
+    return typeof o;
+  } : function (o) {
+    return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o;
+  }, _typeof(o);
+}
+
+var _assign = function __assign() {
+  _assign = Object.assign || function __assign(t) {
+    for (var s, i = 1, n = arguments.length; i < n; i++) {
+      s = arguments[i];
+      for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+    }
+    return t;
+  };
+  return _assign.apply(this, arguments);
+};
+function __awaiter(thisArg, _arguments, P, generator) {
+  function adopt(value) {
+    return value instanceof P ? value : new P(function (resolve) {
+      resolve(value);
+    });
+  }
+  return new (P || (P = Promise))(function (resolve, reject) {
+    function fulfilled(value) {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function rejected(value) {
+      try {
+        step(generator["throw"](value));
+      } catch (e) {
+        reject(e);
+      }
+    }
+    function step(result) {
+      result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected);
+    }
+    step((generator = generator.apply(thisArg, _arguments || [])).next());
+  });
+}
+function __generator(thisArg, body) {
+  var _ = {
+      label: 0,
+      sent: function sent() {
+        if (t[0] & 1) throw t[1];
+        return t[1];
+      },
+      trys: [],
+      ops: []
+    },
+    f,
+    y,
+    t,
+    g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
+  return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function () {
+    return this;
+  }), g;
+  function verb(n) {
+    return function (v) {
+      return step([n, v]);
+    };
+  }
+  function step(op) {
+    if (f) throw new TypeError("Generator is already executing.");
+    while (g && (g = 0, op[0] && (_ = 0)), _) try {
+      if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
+      if (y = 0, t) op = [op[0] & 2, t.value];
+      switch (op[0]) {
+        case 0:
+        case 1:
+          t = op;
+          break;
+        case 4:
+          _.label++;
+          return {
+            value: op[1],
+            done: false
+          };
+        case 5:
+          _.label++;
+          y = op[1];
+          op = [0];
+          continue;
+        case 7:
+          op = _.ops.pop();
+          _.trys.pop();
+          continue;
+        default:
+          if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) {
+            _ = 0;
+            continue;
+          }
+          if (op[0] === 3 && (!t || op[1] > t[0] && op[1] < t[3])) {
+            _.label = op[1];
+            break;
+          }
+          if (op[0] === 6 && _.label < t[1]) {
+            _.label = t[1];
+            t = op;
+            break;
+          }
+          if (t && _.label < t[2]) {
+            _.label = t[2];
+            _.ops.push(op);
+            break;
+          }
+          if (t[2]) _.ops.pop();
+          _.trys.pop();
+          continue;
+      }
+      op = body.call(thisArg, _);
+    } catch (e) {
+      op = [6, e];
+      y = 0;
+    } finally {
+      f = t = 0;
+    }
+    if (op[0] & 5) throw op[1];
+    return {
+      value: op[0] ? op[1] : void 0,
+      done: true
+    };
+  }
+}
+function __spreadArray(to, from, pack) {
+  if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+    if (ar || !(i in from)) {
+      if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+      ar[i] = from[i];
+    }
+  }
+  return to.concat(ar || Array.prototype.slice.call(from));
+}
+function __makeTemplateObject(cooked, raw) {
+  if (Object.defineProperty) {
+    Object.defineProperty(cooked, "raw", {
+      value: raw
+    });
+  } else {
+    cooked.raw = raw;
+  }
+  return cooked;
+}
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+  var e = new Error(message);
+  return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
+var Btn = styled.button(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n  padding: 0;\n  text-align: left;\n"], ["\n  cursor: pointer;\n  border: none;\n  background-color: transparent;\n  padding: 0;\n  text-align: left;\n"])));
+function ReactionCard(_a) {
+  var reaction = _a.reaction,
+    onRemoveReaction = _a.onRemoveReaction,
+    onViewReaction = _a.onViewReaction,
+    authedUserId = _a.authedUserId;
+  var isAuthedUserReaction = useMemo(function () {
+    return reaction.user.id === authedUserId;
+  }, [reaction, authedUserId]);
+  var onClick = useMemo(function () {
+    return reaction.isPersisting ? undefined : isAuthedUserReaction ? typeof onRemoveReaction === 'function' ? function () {
+      return onRemoveReaction(reaction.id);
+    } : typeof onViewReaction === 'function' ? function () {
+      return onViewReaction(reaction.id);
+    } : undefined : typeof onViewReaction === 'function' ? function () {
+      return onViewReaction(reaction.id);
+    } : undefined;
+  }, [isAuthedUserReaction, onRemoveReaction, onViewReaction, reaction]);
+  return /*#__PURE__*/React.createElement(Btn, {
+    type: "button",
+    onClick: onClick
+  }, /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    gap: "3",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Avatar, {
+    src: reaction.user.pictureUrl,
+    fallback: reaction.user.name ? reaction.user.name.split(/\s+/).slice(0, 2).map(function (part) {
+      return part.substring(0, 1);
+    }).join('').toUpperCase() : '',
+    radius: "full"
+  }), /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    gap: "0",
+    flexGrow: "1"
+  }, isAuthedUserReaction && typeof onRemoveReaction === 'function' ? ( /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    gap: "3",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    gap: "0",
+    flexGrow: "1"
+  }, /*#__PURE__*/React.createElement(Text, {
+    weight: "bold",
+    size: "2"
+  }, reaction.user.name ? "".concat(reaction.user.name, " (voc\xEA)") : 'Você'), reaction.isPersisting ? ( /*#__PURE__*/React.createElement(Text, {
+    size: "1",
+    color: "gray"
+  }, /*#__PURE__*/React.createElement(DotDotDot, null, "Salvando"))) : ( /*#__PURE__*/React.createElement(Text, {
+    size: "1",
+    color: "gray"
+  }, "Clique para remover"))), reaction.isPersisting ? ( /*#__PURE__*/React.createElement(Spinner, null)) : ( /*#__PURE__*/React.createElement(Icon, {
+    path: mdiClose,
+    size: "1rem"
+  })))) : ( /*#__PURE__*/React.createElement(React.Fragment, null, reaction.user.name && ( /*#__PURE__*/React.createElement(Text, {
+    weight: "bold",
+    size: "2",
+    style: {
+      display: '-webkit-box',
+      lineClamp: 1,
+      WebkitLineClamp: 1,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, reaction.user.name)), reaction.user.description && ( /*#__PURE__*/React.createElement(Text, {
+    size: "1",
+    color: "gray",
+    style: {
+      display: '-webkit-box',
+      lineClamp: 2,
+      WebkitLineClamp: 2,
+      WebkitBoxOrient: 'vertical',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis'
+    }
+  }, reaction.user.description))))), /*#__PURE__*/React.createElement(Flex, {
+    style: {
+      marginLeft: 20
+    },
+    flexShrink: "0",
+    direction: "row",
+    gap: "1"
+  }, /*#__PURE__*/React.createElement("em-emoji", {
+    size: "1.5em",
+    key: reaction.emoji.id,
+    id: reaction.emoji.id
+  }))));
+}
+var templateObject_1;
+
+function arrayGroupBy(array, iteratee) {
+  return array.reduce(function (result, item) {
+    var key = iteratee(item);
+    if (!result[key]) {
+      result[key] = [];
+    }
+    result[key].push(item);
+    return result;
+  }, {});
+}
+
+function hashReactionSet(reactions) {
+  return reactions.sort(function (rA, rB) {
+    return rA.user.id < rB.user.id ? -1 : 1;
+  }).reduce(function (acc, reaction) {
+    return "".concat(acc, "|").concat(reaction.user.id).concat(reaction.emoji.id);
+  }, '');
+}
+function areReactionSetsEqual(setA, setB) {
+  return hashReactionSet(setA) === hashReactionSet(setB);
+}
+
+function ReactionGroupTabs(_a) {
+  var reactions = _a.reactions,
+    _b = _a.authedUserId,
+    authedUserId = _b === void 0 ? null : _b,
+    onViewReaction = _a.onViewReaction,
+    onRemoveReaction = _a.onRemoveReaction;
+  var sortedReactions = useMemo(function () {
+    return authedUserId ? reactions.reduce(function (acc, reaction) {
+      return reaction.user.id === authedUserId ? __spreadArray([reaction], acc, true) : __spreadArray(__spreadArray([], acc, true), [reaction], false);
+    }, []) : reactions;
+  }, [reactions, authedUserId]);
+  var groups = useMemo(function () {
+    return Object.entries(arrayGroupBy(sortedReactions, function (reaction) {
+      return reaction.emoji.id;
+    })).map(function (_a) {
+      var emojiId = _a[0],
+        reactions = _a[1];
+      return {
+        emojiId: emojiId,
+        reactions: reactions
+      };
+    }).sort(function (gA, gB) {
+      return gB.reactions.length - gA.reactions.length;
+    });
+  }, [sortedReactions]);
+  return /*#__PURE__*/React.createElement(Tabs.Root, {
+    defaultValue: "_all"
+  }, /*#__PURE__*/React.createElement(Tabs.List, {
+    size: groups.length > 8 ? '1' : '2',
+    //
+    // Prevent clicking on tabs from propagating (closing popover)
+    //
+    onClick: function onClick(e) {
+      return e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(Tabs.Trigger, {
+    value: "_all"
+  }, "Todas ", reactions.length), groups.map(function (group) {
+    return /*#__PURE__*/React.createElement(Tabs.Trigger, {
+      key: group.emojiId,
+      value: "emoji_".concat(group.emojiId)
+    }, /*#__PURE__*/React.createElement(Flex, {
+      direction: "row",
+      alignItems: "center",
+      gap: "2"
+    }, /*#__PURE__*/React.createElement("em-emoji", {
+      size: "1.25em",
+      id: group.emojiId
+    }), /*#__PURE__*/React.createElement("span", null, group.reactions.length)));
+  })), /*#__PURE__*/React.createElement(Box, {
+    p: "3"
+  }, /*#__PURE__*/React.createElement(Tabs.Content, {
+    value: "_all"
+  }, /*#__PURE__*/React.createElement(Flex, {
+    direction: "column",
+    gap: "3"
+  }, sortedReactions.map(function (reaction, index) {
+    return /*#__PURE__*/React.createElement(ReactionCard, {
+      key: reaction.id || index,
+      reaction: reaction,
+      onViewReaction: onViewReaction,
+      onRemoveReaction: onRemoveReaction,
+      authedUserId: authedUserId
+    });
+  }))), groups.map(function (group) {
+    return /*#__PURE__*/React.createElement(Tabs.Content, {
+      key: group.emojiId,
+      value: "emoji_".concat(group.emojiId)
+    }, /*#__PURE__*/React.createElement(Flex, {
+      direction: "column",
+      gap: "3"
+    }, group.reactions.map(function (reaction, index) {
+      return /*#__PURE__*/React.createElement(ReactionCard, {
+        key: reaction.id || index,
+        reaction: reaction,
+        onViewReaction: onViewReaction,
+        onRemoveReaction: onRemoveReaction,
+        authedUserId: authedUserId
+      });
+    })));
+  })));
+}
+
+var variants = {
+  enter: function enter(direction) {
+    return {
+      y: direction > 0 ? 20 : -20,
+      opacity: 0,
+      scale: 0
+    };
+  },
+  center: {
+    zIndex: 1,
+    y: 0,
+    opacity: 1,
+    scale: 1
+  },
+  exit: function exit(direction) {
+    return {
+      zIndex: 0,
+      y: direction < 0 ? 20 : -20,
+      opacity: 0,
+      scale: 0
+    };
+  }
+};
+function AnimatedCounter(_a) {
+  var _b = _a.value,
+    value = _b === void 0 ? 0 : _b,
+    _c = _a.style,
+    style = _c === void 0 ? {} : _c;
+  var previous = usePrevious(value);
+  var direction = value - (previous || 0);
+  return /*#__PURE__*/React.createElement("div", {
+    style: _assign({
+      position: 'relative'
+    }, style)
+  }, /*#__PURE__*/React.createElement("div", {
+    // Placeholder element
+    style: {
+      opacity: 0,
+      pointerEvents: 'none'
+    }
+  }, value), /*#__PURE__*/React.createElement(AnimatePresence, {
+    custom: direction
+  }, /*#__PURE__*/React.createElement(motion.div, {
+    style: {
+      position: 'absolute',
+      top: 0
+      // fontSize: '1em',
+    },
+    key: value,
+    variants: variants,
+    initial: "enter",
+    exit: "exit",
+    custom: direction,
+    animate: "center",
+    transition: {
+      duration: 0.2
+    }
+  }, value)));
+}
+
+var MOTION_VARIANTS = {
+  enter: {
+    opacity: 0,
+    scale: 1.5,
+    width: 0
+  },
+  // Set width relative to font size
+  display: function display(_a) {
+    var size = _a.size;
+    var targetWidth = size + 4;
+    return {
+      opacity: 1,
+      scale: 1,
+      width: targetWidth,
+      height: targetWidth
+    };
+  },
+  exit: {
+    opacity: 0,
+    scale: 0,
+    width: 0
+  }
+};
+function _hashGroupedReactions(groups) {
+  return Object.entries(groups).sort(function (_a, _b) {
+    var idA = _a[0];
+    var idB = _b[0];
+    return idA < idB ? -1 : 1;
+  }).reduce(function (acc, _a) {
+    var id = _a[0],
+      reactions = _a[1];
+    return "".concat(acc, "|").concat(id, "-").concat(reactions.length);
+  }, '');
+}
+function _areGroupedReactionsEqual(groupA, groupB) {
+  return _hashGroupedReactions(groupA) === _hashGroupedReactions(groupB);
+}
+function ReactionsBar(_a) {
+  var reactions = _a.reactions,
+    _b = _a.authedUserId,
+    authedUserId = _b === void 0 ? null : _b,
+    _c = _a.maxLength,
+    maxLength = _c === void 0 ? 10 : _c,
+    _d = _a.counter,
+    counter = _d === void 0 ? true : _d,
+    _e = _a.size,
+    size = _e === void 0 ? DEFAULT_SIZE : _e;
+  var authedUserReaction = useMemo(function () {
+    return authedUserId && reactions.find(function (reaction) {
+      var _a;
+      return ((_a = reaction.user) === null || _a === void 0 ? void 0 : _a.id) === authedUserId;
+    });
+  }, [reactions, authedUserId]);
+  var groupedReactions = useMemo(function () {
+    return arrayGroupBy(reactions, function (reaction) {
+      return reaction.emoji.id;
+    });
+  }, [reactions]);
+  var prevGroupedReactions = usePreviousDistinct(groupedReactions, function (prev, next) {
+    return Boolean(prev) && _areGroupedReactionsEqual(prev, next);
+  });
+  var reactionUpdates = useMemo(function () {
+    if (prevGroupedReactions && groupedReactions !== prevGroupedReactions) {
+      return Object.fromEntries(Object.entries(groupedReactions).map(function (_a) {
+        var emojiId = _a[0],
+          reactions = _a[1];
+        var prevCount = prevGroupedReactions[emojiId] ? prevGroupedReactions[emojiId].length : 0;
+        return [emojiId, reactions.length - prevCount];
+      }).filter(function (_a) {
+        var diff = _a[1];
+        return diff !== 0;
+      }));
+    } else {
+      return null;
+    }
+  }, [groupedReactions]);
+  var _f = useMemo(function () {
+      var all = Object.entries(groupedReactions).map(function (_a) {
+        var emojiId = _a[0],
+          reactions = _a[1];
+        return {
+          emojiId: emojiId,
+          reactions: reactions
+        };
+      }).sort(function (gA, gB) {
+        return authedUserReaction && gA.emojiId === authedUserReaction.emoji.id ? -1 : authedUserReaction && gB.emojiId === authedUserReaction.emoji.id ? 1 : gB.reactions.length - gA.reactions.length;
+      });
+      var display = all.slice(0, maxLength);
+      return {
+        all: all,
+        display: display
+      };
+    }, [groupedReactions, authedUserReaction]),
+    display = _f.display,
+    all = _f.all;
+  return /*#__PURE__*/React.createElement(Flex, {
+    direction: "row",
+    gap: "3",
+    alignItems: "center"
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      flexWrap: 'wrap'
+    }
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, display.map(function (_a, index) {
+    var emojiId = _a.emojiId,
+      reactions = _a.reactions;
+    var animationClassName = Boolean(reactionUpdates && reactionUpdates[emojiId]) ? reactionUpdates[emojiId] > 0 ? 'react-reactions--bounce' : 'react-reactions--shake' : undefined;
+    var namedReactions = reactions.filter(function (reaction) {
+      return Boolean(reaction.user.name);
+    });
+    var displayReactions = namedReactions.slice(0, 5);
+    var remainingReactions = namedReactions.slice(5);
+    return /*#__PURE__*/React.createElement(motion.div, {
+      key: "".concat(emojiId),
+      custom: {
+        size: size
+      },
+      variants: MOTION_VARIANTS,
+      initial: "enter",
+      animate: "display",
+      exit: "exit",
+      style: {
+        display: 'flex',
+        alignItems: 'center'
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      className: animationClassName
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      content: displayReactions.length === 0 ? reactions.length : ( /*#__PURE__*/React.createElement(React.Fragment, null, displayReactions.map(function (reaction) {
+        return /*#__PURE__*/React.createElement(React.Fragment, {
+          key: reaction.id
+        }, reaction.user.name, /*#__PURE__*/React.createElement("br", null));
+      }), remainingReactions.length === 0 ? null : remainingReactions.length === 1 ? remainingReactions[0].user.name : "+ ".concat(remainingReactions.length, " pessoas")))
+    }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("em-emoji", {
+      id: emojiId,
+      size: size
+    })))));
+  })), all.length > display.length ? /*#__PURE__*/React.createElement("div", null, "\u2026") : null), counter && reactions.length > 0 && ( /*#__PURE__*/React.createElement(AnimatedCounter, {
+    style: {
+      fontWeight: 'bold',
+      fontSize: Math.max(10, 0.75 * size)
+    },
+    value: reactions.length
+  })));
+}
+
+function ReactionsDisplay(_a) {
+  var reactions = _a.reactions,
+    _b = _a.authedUserId,
+    authedUserId = _b === void 0 ? null : _b,
+    onViewReaction = _a.onViewReaction,
+    onRemoveReaction = _a.onRemoveReaction,
+    _c = _a.size,
+    size = _c === void 0 ? DEFAULT_SIZE : _c,
+    maxLength = _a.maxLength,
+    counter = _a.counter;
+  var _d = useState(false),
+    popoverOpen = _d[0],
+    setPopoverOpen = _d[1];
+  var onClosePopover = useCallback(function () {
+    return setPopoverOpen(false);
+  }, [setPopoverOpen]);
+  return /*#__PURE__*/React.createElement(Popover.Root, {
+    open: popoverOpen,
+    onOpenChange: setPopoverOpen
+  }, reactions.length > 0 && ( /*#__PURE__*/React.createElement(Popover.Trigger, null, /*#__PURE__*/React.createElement(Button, {
+    variant: "ghost",
+    style: {
+      lineHeight: 1,
+      maxWidth: '100%'
+    },
+    radius: "full"
+  }, /*#__PURE__*/React.createElement(ReactionsBar, {
+    reactions: reactions,
+    authedUserId: authedUserId,
+    size: size,
+    maxLength: maxLength,
+    counter: counter
+  })))), /*#__PURE__*/React.createElement(Popover.Content, {
+    size: "1",
+    style: {
+      padding: 0
+    },
+    maxHeight: "50vh"
+  }, /*#__PURE__*/React.createElement(Box, {
+    style: {
+      maxWidth: {
+        xs: '90vw',
+        sm: '480px'
+      }
+    },
+    onClick: onClosePopover
+  }, /*#__PURE__*/React.createElement(ReactionGroupTabs, {
+    reactions: reactions,
+    authedUserId: authedUserId,
+    onViewReaction: onViewReaction,
+    onRemoveReaction: onRemoveReaction
+  }))));
+}
+
+var LOCAL_TARGET = Symbol();
+var LOCAL_ID_PREFIX = '$$LOCAL_ID_';
+function _localId() {
+  return "".concat(LOCAL_ID_PREFIX).concat(Math.random().toString(36).substring(2, 9));
+}
+function _isLocalId(reactionId) {
+  return typeof reactionId === 'string' && reactionId.startsWith(LOCAL_ID_PREFIX);
+}
+var ReactionsControl = /*#__PURE__*/forwardRef(function ReactionsControlInner(_a, ref) {
+  var _this = this;
+  var externalReactions = _a.reactions,
+    authedUser = _a.authedUser,
+    onAuthenticate = _a.onAuthenticate,
+    onViewReaction = _a.onViewReaction,
+    onRemoveReaction = _a.onRemoveReaction,
+    onSetReaction = _a.onSetReaction,
+    _b = _a.picker,
+    picker = _b === void 0 ? true : _b,
+    _c = _a.alwaysShowPicker,
+    alwaysShowPicker = _c === void 0 ? false : _c,
+    _d = _a.counter,
+    counter = _d === void 0 ? true : _d,
+    maxLength = _a.maxLength,
+    _e = _a.style,
+    style = _e === void 0 ? {} : _e,
+    _f = _a.size,
+    size = _f === void 0 ? DEFAULT_SIZE : _f;
+  var _g = useState(false),
+    isPersisting = _g[0],
+    setIsPersisting = _g[1];
+  //
+  // Locally track reaction state in order to provide instantaneous
+  // ui feedback
+  //
+  var _h = useState(externalReactions),
+    localReactions = _h[0],
+    setLocalReactions = _h[1];
+  var _j = useState(false),
+    pickerOpen = _j[0],
+    setPickerOpen = _j[1];
+  var authedUserReaction = useMemo(function () {
+    return authedUser && localReactions.find(function (reaction) {
+      return reaction.user.id === authedUser.id;
+    });
+  }, [authedUser, localReactions]);
+  var onRemoveReaction_ = useMemo(function () {
+    return typeof onRemoveReaction !== 'function' ? null : function (reactionId) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var err_1;
+        return __generator(this, function (_a) {
+          switch (_a.label) {
+            case 0:
+              //
+              // Immediately update local reactions
+              //
+              setLocalReactions(function (localReactions) {
+                return localReactions.filter(function (localReaction) {
+                  return localReaction.id !== reactionId;
+                });
+              });
+              if (!!_isLocalId(reactionId)) return [3 /*break*/, 5];
+              setIsPersisting(true);
+              _a.label = 1;
+            case 1:
+              _a.trys.push([1, 3,, 4]);
+              return [4 /*yield*/, onRemoveReaction(reactionId)];
+            case 2:
+              _a.sent();
+              return [3 /*break*/, 4];
+            case 3:
+              err_1 = _a.sent();
+              console.error(err_1);
+              return [3 /*break*/, 4];
+            case 4:
+              setIsPersisting(false);
+              _a.label = 5;
+            case 5:
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+  }, [onRemoveReaction, isPersisting]);
+  var setReaction = useMemo(function () {
+    return typeof onSetReaction !== 'function' ? null : function (emoji) {
+      return __awaiter(_this, void 0, void 0, function () {
+        var authedUser_, _a, _b, mockLocalReaction_1, persistedReaction_1, err_2;
+        return __generator(this, function (_c) {
+          switch (_c.label) {
+            case 0:
+              _a = authedUser;
+              if (_a) return [3 /*break*/, 3];
+              _b = typeof onAuthenticate === 'function';
+              if (!_b) return [3 /*break*/, 2];
+              return [4 /*yield*/, onAuthenticate()];
+            case 1:
+              _b = _c.sent();
+              _c.label = 2;
+            case 2:
+              _a = _b;
+              _c.label = 3;
+            case 3:
+              authedUser_ = _a || null;
+              if (!authedUser_) return [3 /*break*/, 8];
+              mockLocalReaction_1 = {
+                isPersisting: true,
+                targetId: LOCAL_TARGET,
+                id: _localId(),
+                emoji: emoji,
+                user: authedUser_
+              };
+              //
+              // Mock a local reaction for immediate user feedback
+              //
+              setLocalReactions(__spreadArray([mockLocalReaction_1], localReactions.filter(function (localR) {
+                return localR.user.id !== authedUser_.id;
+              }), true));
+              //
+              // Request reaction to be set
+              //
+              setIsPersisting(true);
+              _c.label = 4;
+            case 4:
+              _c.trys.push([4, 6,, 7]);
+              return [4 /*yield*/, onSetReaction(emoji)];
+            case 5:
+              persistedReaction_1 = _c.sent();
+              if (_typeof(persistedReaction_1) !== 'object') {
+                console.error(persistedReaction_1);
+                throw new Error('Invalid persisted reaction: ' + persistedReaction_1);
+              }
+              //
+              // Replace local reaction with persited version and
+              // unset isPersisting flag
+              //
+              setLocalReactions(function (currentReactions) {
+                return currentReactions.map(function (localR) {
+                  return localR === mockLocalReaction_1 ? persistedReaction_1 : localR;
+                });
+              });
+              return [3 /*break*/, 7];
+            case 6:
+              err_2 = _c.sent();
+              console.error(err_2);
+              return [3 /*break*/, 7];
+            case 7:
+              setIsPersisting(false);
+              _c.label = 8;
+            case 8:
+              return [2 /*return*/];
+          }
+        });
+      });
+    };
+  }, [localReactions, onSetReaction, authedUser]);
+  //
+  // Expose local setReaction method so that
+  // external components may use it to provide instant
+  // reaction feedback
+  //
+  useImperativeHandle(ref, function () {
+    return {
+      setReaction: setReaction
+    };
+  }, [setReaction]);
+  //
+  // Sync external reactions with localReactions
+  //
+  useEffect(function () {
+    //
+    // Use a hashing comparison that takes into account
+    // only user id and reaction (ignoring reaction.id),
+    //
+    if (!areReactionSetsEqual(externalReactions, localReactions) && !isPersisting) {
+      setLocalReactions(externalReactions);
+    }
+  }, [externalReactions]);
+  return /*#__PURE__*/React.createElement("div", {
+    style: _assign({
+      display: 'flex',
+      alignItems: 'center'
+    }, style)
+  }, /*#__PURE__*/React.createElement(AnimatePresence, null, localReactions.length > 0 && ( /*#__PURE__*/React.createElement(motion.div, {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: size
+    },
+    initial: {
+      opacity: 0
+    },
+    animate: {
+      opacity: 1
+    },
+    exit: {
+      opacity: 0,
+      scale: 0,
+      width: 0
+    }
+  }, /*#__PURE__*/React.createElement(ReactionsDisplay, {
+    reactions: localReactions,
+    authedUserId: authedUser === null || authedUser === void 0 ? void 0 : authedUser.id,
+    onViewReaction: onViewReaction,
+    onRemoveReaction: onRemoveReaction_,
+    counter: counter,
+    maxLength: maxLength,
+    size: size
+  })))), picker && setReaction && ( /*#__PURE__*/React.createElement(AnimatePresence, null, (!authedUserReaction || alwaysShowPicker) && ( /*#__PURE__*/React.createElement(motion.div, {
+    style: {
+      display: 'flex',
+      alignItems: 'center',
+      fontSize: size
+    },
+    initial: {
+      opacity: 0,
+      marginLeft: 0
+    },
+    animate: {
+      opacity: 1,
+      marginLeft: localReactions.length > 0 ? '1em' : 0
+    },
+    exit: {
+      opacity: 0,
+      marginLeft: 0
+    }
+  }, /*#__PURE__*/React.createElement(EmojiPicker, {
+    open: pickerOpen,
+    onSetOpen: setPickerOpen,
+    onEmojiSelect: setReaction,
+    size: size
+  }))))));
+});
+
+var ReactionsContext = /*#__PURE__*/createContext({
+  authedUser: null,
+  reactions: [],
+  setReaction: function setReaction() {
+    throw new Error('ReactionsContext#setReaction undefined');
+  },
+  removeReaction: function removeReaction() {
+    throw new Error('ReactionsContext#removeReaction undefined');
+  }
+});
+function ReactionsProvider(_a) {
+  var authedUser = _a.authedUser,
+    reactions = _a.reactions,
+    children = _a.children,
+    onSetReaction = _a.onSetReaction,
+    onRemoveReaction = _a.onRemoveReaction;
+  var ctxValue = useMemo(function () {
+    return {
+      authedUser: authedUser,
+      reactions: reactions,
+      setReaction: function setReaction(emoji) {
+        if (!authedUser) {
+          throw new Error('Unable to set reaction without authedUser');
+        }
+        return Promise.resolve(onSetReaction(_assign(_assign({}, emoji), {
+          userId: authedUser === null || authedUser === void 0 ? void 0 : authedUser.id
+        })));
+      },
+      removeReaction: function removeReaction(reactionId) {
+        return Promise.resolve(onRemoveReaction(reactionId));
+      }
+    };
+  }, [onSetReaction, onRemoveReaction, reactions, authedUser]);
+  return /*#__PURE__*/React.createElement(ReactionsContext.Provider, {
+    value: ctxValue
+  }, children);
+}
+function useReactions(_a) {
+  var targetId = _a.targetId;
+  var ctxValue = useContext(ReactionsContext);
+  return targetId ? _assign(_assign({}, ctxValue), {
+    reactions: ctxValue.reactions.filter(function (reaction) {
+      return reaction.targetId === targetId;
+    })
+  }) : ctxValue;
+}
+
+export { EmojiPicker, ReactionCard, ReactionGroupTabs, ReactionsBar, ReactionsContext, ReactionsControl, ReactionsDisplay, ReactionsProvider, useReactions };