@bigbinary/neeto-molecules 1.7.10 → 1.8.0

package/dist/cjs/EmojiPicker.js

@@ -0,0 +1,142 @@
+'use strict';
+
+var React = require('react');
+var data = require('@emoji-mart/data/sets/14/apple.json');
+var Picker = require('@emoji-mart/react');
+var neetoIcons = require('@bigbinary/neeto-icons');
+var neetoui = require('@bigbinary/neetoui');
+var reactI18next = require('react-i18next');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var data__default = /*#__PURE__*/_interopDefaultLegacy(data);
+var Picker__default = /*#__PURE__*/_interopDefaultLegacy(Picker);
+
+function _extends() {
+  _extends = Object.assign ? Object.assign.bind() : function (target) {
+    for (var i = 1; i < arguments.length; i++) {
+      var source = arguments[i];
+      for (var key in source) {
+        if (Object.prototype.hasOwnProperty.call(source, key)) {
+          target[key] = source[key];
+        }
+      }
+    }
+    return target;
+  };
+  return _extends.apply(this, arguments);
+}
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var EmojiPicker = function EmojiPicker(_ref) {
+  var onSelect = _ref.onSelect,
+    dropdownProps = _ref.dropdownProps,
+    _ref$open = _ref.open,
+    open = _ref$open === void 0 ? false : _ref$open;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var _useState = React.useState(open),
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
+  var onEmojiClick = function onEmojiClick(emoji) {
+    setIsOpen(false);
+    onSelect(emoji);
+  };
+  return /*#__PURE__*/React__default["default"].createElement(neetoui.Dropdown, _extends({
+    isOpen: isOpen,
+    closeOnEsc: true,
+    appendTo: function appendTo() {
+      return document.body;
+    },
+    closeOnSelect: false,
+    dropdownProps: {
+      className: "neeto-ui-shadow-s z-10"
+    },
+    position: "bottom-start",
+    buttonProps: {
+      icon: neetoIcons.SmileFaceGrey,
+      tooltipProps: {
+        content: t("neetoMolecules.common.emojiPicker"),
+        position: "top"
+      },
+      onClick: function onClick() {
+        return setIsOpen(true);
+      },
+      style: "text"
+    },
+    onClickOutside: function onClickOutside() {
+      return setIsOpen(false);
+    },
+    onClose: function onClose() {
+      return setIsOpen(false);
+    }
+  }, dropdownProps), /*#__PURE__*/React__default["default"].createElement(Picker__default["default"], {
+    data: data__default["default"],
+    autoFocus: true,
+    "native": true,
+    previewPosition: "none",
+    set: "apple",
+    skinTonePosition: "none",
+    theme: "light",
+    onEmojiSelect: onEmojiClick
+  }));
+};
+
+module.exports = EmojiPicker;
+//# sourceMappingURL=EmojiPicker.js.map

package/dist/cjs/EmojiPicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiPicker.js","sources":["../../node_modules/@babel/runtime/helpers/esm/extends.js","../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js","../../src/components/EmojiPicker.jsx"],"sourcesContent":["export default function _extends() {\n  _extends = Object.assign ? Object.assign.bind() : function (target) {\n    for (var i = 1; i < arguments.length; i++) {\n      var source = arguments[i];\n      for (var key in source) {\n        if (Object.prototype.hasOwnProperty.call(source, key)) {\n          target[key] = source[key];\n        }\n      }\n    }\n    return target;\n  };\n  return _extends.apply(this, arguments);\n}","export default function _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}","export default function _iterableToArrayLimit(r, l) {\n  var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"];\n  if (null != t) {\n    var e,\n      n,\n      i,\n      u,\n      a = [],\n      f = !0,\n      o = !1;\n    try {\n      if (i = (t = t.call(r)).next, 0 === l) {\n        if (Object(t) !== t) return;\n        f = !1;\n      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);\n    } catch (r) {\n      o = !0, n = r;\n    } finally {\n      try {\n        if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return;\n      } finally {\n        if (o) throw n;\n      }\n    }\n    return a;\n  }\n}","export default function _arrayLikeToArray(arr, len) {\n  if (len == null || len > arr.length) len = arr.length;\n  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n  return arr2;\n}","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _unsupportedIterableToArray(o, minLen) {\n  if (!o) return;\n  if (typeof o === \"string\") return arrayLikeToArray(o, minLen);\n  var n = Object.prototype.toString.call(o).slice(8, -1);\n  if (n === \"Object\" && o.constructor) n = o.constructor.name;\n  if (n === \"Map\" || n === \"Set\") return Array.from(o);\n  if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);\n}","export default function _nonIterableRest() {\n  throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","import arrayWithHoles from \"./arrayWithHoles.js\";\nimport iterableToArrayLimit from \"./iterableToArrayLimit.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableRest from \"./nonIterableRest.js\";\nexport default function _slicedToArray(arr, i) {\n  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();\n}","import React, { useState } from \"react\";\n\nimport data from \"@emoji-mart/data/sets/14/apple.json\";\nimport Picker from \"@emoji-mart/react\";\nimport { SmileFaceGrey } from \"neetoicons\";\nimport { Dropdown } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nconst EmojiPicker = ({ onSelect, dropdownProps, open = false }) => {\n  const { t } = useTranslation();\n  const [isOpen, setIsOpen] = useState(open);\n\n  const onEmojiClick = emoji => {\n    setIsOpen(false);\n    onSelect(emoji);\n  };\n\n  return (\n    <Dropdown\n      {...{ isOpen }}\n      closeOnEsc\n      appendTo={() => document.body}\n      closeOnSelect={false}\n      dropdownProps={{ className: \"neeto-ui-shadow-s z-10\" }}\n      position=\"bottom-start\"\n      buttonProps={{\n        icon: SmileFaceGrey,\n        tooltipProps: {\n          content: t(\"neetoMolecules.common.emojiPicker\"),\n          position: \"top\",\n        },\n        onClick: () => setIsOpen(true),\n        style: \"text\",\n      }}\n      onClickOutside={() => setIsOpen(false)}\n      onClose={() => setIsOpen(false)}\n      {...dropdownProps}\n    >\n      <Picker\n        {...{ data }}\n        autoFocus\n        native\n        previewPosition=\"none\"\n        set=\"apple\"\n        skinTonePosition=\"none\"\n        theme=\"light\"\n        onEmojiSelect={onEmojiClick}\n      />\n    </Dropdown>\n  );\n};\n\nEmojiPicker.propTypes = {\n  /**\n   * Function to be called when an emoji is selected\n   */\n  onSelect: PropTypes.func,\n  /**\n   * Props to be passed to the dropdown component.\n   */\n  dropdownProps: PropTypes.shape({\n    strategy: PropTypes.oneOf(Object.values([\"absolute\", \"fixed\"])),\n  }),\n  /**\n   * Whether to open the emoji picker by default or not.\n   */\n  open: PropTypes.bool,\n};\n\nexport default EmojiPicker;\n"],"names":["arrayLikeToArray","arrayWithHoles","iterableToArrayLimit","unsupportedIterableToArray","nonIterableRest","EmojiPicker","_ref","onSelect","dropdownProps","_ref$open","open","_useTranslation","useTranslation","t","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","onEmojiClick","emoji","React","createElement","Dropdown","_extends","closeOnEsc","appendTo","document","body","closeOnSelect","className","position","buttonProps","icon","SmileFaceGrey","tooltipProps","content","onClick","style","onClickOutside","onClose","Picker","data","autoFocus","previewPosition","set","skinTonePosition","theme","onEmojiSelect"],"mappings":"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"}

package/dist/cjs/EmojiReactions.js

@@ -0,0 +1,130 @@
+'use strict';
+
+var React = require('react');
+var classNames = require('classnames');
+var neetoCist = require('@bigbinary/neeto-cist');
+var neetoui = require('@bigbinary/neetoui');
+var ramda = require('ramda');
+var reactI18next = require('react-i18next');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var classNames__default = /*#__PURE__*/_interopDefaultLegacy(classNames);
+
+function _arrayWithHoles(arr) {
+  if (Array.isArray(arr)) return arr;
+}
+
+function _iterableToArrayLimit(r, l) {
+  var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (null != t) {
+    var e,
+      n,
+      i,
+      u,
+      a = [],
+      f = !0,
+      o = !1;
+    try {
+      if (i = (t = t.call(r)).next, 0 === l) {
+        if (Object(t) !== t) return;
+        f = !1;
+      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);
+    } catch (r) {
+      o = !0, n = r;
+    } finally {
+      try {
+        if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return;
+      } finally {
+        if (o) throw n;
+      }
+    }
+    return a;
+  }
+}
+
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];
+  return arr2;
+}
+
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+
+function _nonIterableRest() {
+  throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+
+function _slicedToArray(arr, i) {
+  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest();
+}
+
+var groupBy = function groupBy(objectArray, groupKey) {
+  return objectArray.reduce(function (data, obj) {
+    (data[obj[groupKey]] = data[obj[groupKey]] || []).push(obj);
+    return data;
+  }, {});
+};
+
+var EmojiReactions = function EmojiReactions(_ref) {
+  var isUpdating = _ref.isUpdating,
+    reactions = _ref.reactions,
+    _ref$onReactionClick = _ref.onReactionClick,
+    onReactionClick = _ref$onReactionClick === void 0 ? neetoCist.noop : _ref$onReactionClick,
+    _ref$emojiSize = _ref.emojiSize,
+    emojiSize = _ref$emojiSize === void 0 ? "text-sm" : _ref$emojiSize,
+    _ref$emojiBoxStyle = _ref.emojiBoxStyle,
+    emojiBoxStyle = _ref$emojiBoxStyle === void 0 ? "neeto-ui-bg-white py-1 px-2" : _ref$emojiBoxStyle;
+  var _useTranslation = reactI18next.useTranslation(),
+    t = _useTranslation.t;
+  var groupedReactions = React.useMemo(function () {
+    return groupBy(reactions || [], "unified");
+  }, [reactions]);
+  return /*#__PURE__*/React__default["default"].createElement(React__default["default"].Fragment, null, Object.entries(groupedReactions).map(function (_ref2) {
+    var _ref3 = _slicedToArray(_ref2, 2),
+      unified = _ref3[0],
+      grouped = _ref3[1];
+    var groupedNames = ramda.pluck("userName", reactions).join(", ");
+    var reaction = grouped[0];
+    return /*#__PURE__*/React__default["default"].createElement(neetoui.Tooltip, {
+      key: unified,
+      position: "top",
+      content: /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "flex flex-col items-center justify-center"
+      }, /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "neeto-ui-bg-white neeto-ui-rounded mb-1 flex h-10 w-10 items-center justify-center"
+      }, reaction["native"]), /*#__PURE__*/React__default["default"].createElement("p", {
+        className: "text-center text-xs"
+      }, t("neetoMolecules.reactions.content", {
+        groupedNames: groupedNames
+      })))
+    }, /*#__PURE__*/React__default["default"].createElement("div", {
+      "data-cy": "emoji-reactions-".concat(reaction.unified),
+      className: classNames__default["default"](["neeto-ui-rounded-full hover:neeto-ui-bg-gray-100 neeto-ui-bg-gray-100 flex cursor-pointer items-center justify-center px-2 py-1", emojiBoxStyle], {
+        "opacity-80": isUpdating
+      }),
+      onClick: function onClick() {
+        return !isUpdating && onReactionClick({
+          "native": reaction["native"],
+          unified: reaction.unified
+        }, grouped);
+      }
+    }, /*#__PURE__*/React__default["default"].createElement(neetoui.Typography, {
+      className: "space-x-2 text-sm",
+      style: "body2"
+    }, /*#__PURE__*/React__default["default"].createElement("span", {
+      className: emojiSize
+    }, reaction["native"]), /*#__PURE__*/React__default["default"].createElement("span", null, grouped.length))));
+  }));
+};
+
+module.exports = EmojiReactions;
+//# sourceMappingURL=EmojiReactions.js.map

package/dist/cjs/EmojiReactions.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EmojiReactions.js","sources":["../../node_modules/@babel/runtime/helpers/esm/arrayWithHoles.js","../../node_modules/@babel/runtime/helpers/esm/iterableToArrayLimit.js","../../node_modules/@babel/runtime/helpers/esm/arrayLikeToArray.js","../../node_modules/@babel/runtime/helpers/esm/unsupportedIterableToArray.js","../../node_modules/@babel/runtime/helpers/esm/nonIterableRest.js","../../node_modules/@babel/runtime/helpers/esm/slicedToArray.js","../../src/components/EmojiReactions/utils.js","../../src/components/EmojiReactions/index.jsx"],"sourcesContent":["export default function _arrayWithHoles(arr) {\n  if (Array.isArray(arr)) return arr;\n}","export default function _iterableToArrayLimit(r, l) {\n  var t = null == r ? null : \"undefined\" != typeof Symbol && r[Symbol.iterator] || r[\"@@iterator\"];\n  if (null != t) {\n    var e,\n      n,\n      i,\n      u,\n      a = [],\n      f = !0,\n      o = !1;\n    try {\n      if (i = (t = t.call(r)).next, 0 === l) {\n        if (Object(t) !== t) return;\n        f = !1;\n      } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0);\n    } catch (r) {\n      o = !0, n = r;\n    } finally {\n      try {\n        if (!f && null != t[\"return\"] && (u = t[\"return\"](), Object(u) !== u)) return;\n      } finally {\n        if (o) throw n;\n      }\n    }\n    return a;\n  }\n}","export default function _arrayLikeToArray(arr, len) {\n  if (len == null || len > arr.length) len = arr.length;\n  for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i];\n  return arr2;\n}","import arrayLikeToArray from \"./arrayLikeToArray.js\";\nexport default function _unsupportedIterableToArray(o, minLen) {\n  if (!o) return;\n  if (typeof o === \"string\") return arrayLikeToArray(o, minLen);\n  var n = Object.prototype.toString.call(o).slice(8, -1);\n  if (n === \"Object\" && o.constructor) n = o.constructor.name;\n  if (n === \"Map\" || n === \"Set\") return Array.from(o);\n  if (n === \"Arguments\" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return arrayLikeToArray(o, minLen);\n}","export default function _nonIterableRest() {\n  throw new TypeError(\"Invalid attempt to destructure non-iterable instance.\\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.\");\n}","import arrayWithHoles from \"./arrayWithHoles.js\";\nimport iterableToArrayLimit from \"./iterableToArrayLimit.js\";\nimport unsupportedIterableToArray from \"./unsupportedIterableToArray.js\";\nimport nonIterableRest from \"./nonIterableRest.js\";\nexport default function _slicedToArray(arr, i) {\n  return arrayWithHoles(arr) || iterableToArrayLimit(arr, i) || unsupportedIterableToArray(arr, i) || nonIterableRest();\n}","export const groupBy = (objectArray, groupKey) =>\n  objectArray.reduce((data, obj) => {\n    (data[obj[groupKey]] = data[obj[groupKey]] || []).push(obj);\n\n    return data;\n  }, {});\n","import React, { useMemo } from \"react\";\n\nimport classNames from \"classnames\";\nimport { noop } from \"neetocist\";\nimport { Tooltip, Typography } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { pluck } from \"ramda\";\nimport { useTranslation } from \"react-i18next\";\n\nimport { groupBy } from \"./utils\";\n\nconst EmojiReactions = ({\n  isUpdating,\n  reactions,\n  onReactionClick = noop,\n  emojiSize = \"text-sm\",\n  emojiBoxStyle = \"neeto-ui-bg-white py-1 px-2\",\n}) => {\n  const { t } = useTranslation();\n  const groupedReactions = useMemo(\n    () => groupBy(reactions || [], \"unified\"),\n    [reactions]\n  );\n\n  return (\n    <>\n      {Object.entries(groupedReactions).map(([unified, grouped]) => {\n        const groupedNames = pluck(\"userName\", reactions).join(\", \");\n        const reaction = grouped[0];\n\n        return (\n          <Tooltip\n            key={unified}\n            position=\"top\"\n            content={\n              <div className=\"flex flex-col items-center justify-center\">\n                <div className=\"neeto-ui-bg-white neeto-ui-rounded mb-1 flex h-10 w-10 items-center justify-center\">\n                  {reaction.native}\n                </div>\n                <p className=\"text-center text-xs\">\n                  {t(\"neetoMolecules.reactions.content\", { groupedNames })}\n                </p>\n              </div>\n            }\n          >\n            <div\n              data-cy={`emoji-reactions-${reaction.unified}`}\n              className={classNames(\n                [\n                  \"neeto-ui-rounded-full hover:neeto-ui-bg-gray-100 neeto-ui-bg-gray-100 flex cursor-pointer items-center justify-center px-2 py-1\",\n                  emojiBoxStyle,\n                ],\n                { \"opacity-80\": isUpdating }\n              )}\n              onClick={() =>\n                !isUpdating &&\n                onReactionClick(\n                  {\n                    native: reaction.native,\n                    unified: reaction.unified,\n                  },\n                  grouped\n                )\n              }\n            >\n              <Typography className=\"space-x-2 text-sm\" style=\"body2\">\n                <span className={emojiSize}>{reaction.native}</span>\n                <span>{grouped.length}</span>\n              </Typography>\n            </div>\n          </Tooltip>\n        );\n      })}\n    </>\n  );\n};\n\nEmojiReactions.propTypes = {\n  /**\n   * Array of reactions to be displayed\n   */\n  reactions: PropTypes.arrayOf(\n    PropTypes.shape({\n      native: PropTypes.string,\n      unified: PropTypes.string,\n      userName: PropTypes.string,\n    })\n  ),\n  /**\n   * Callback function to be called when user click on an existing reaction\n   */\n  onReactionClick: PropTypes.func,\n  /**\n   * Size of the emoji\n   */\n  emojiSize: PropTypes.string,\n  /**\n   * Emoji picker box style\n   */\n  emojiBoxStyle: PropTypes.string,\n  /**\n   * Use this flag to block click action while backend is updating.\n   */\n  isUpdating: PropTypes.bool,\n};\n\nexport default EmojiReactions;\n"],"names":["arrayLikeToArray","arrayWithHoles","iterableToArrayLimit","unsupportedIterableToArray","nonIterableRest","groupBy","objectArray","groupKey","reduce","data","obj","push","EmojiReactions","_ref","isUpdating","reactions","_ref$onReactionClick","onReactionClick","noop","_ref$emojiSize","emojiSize","_ref$emojiBoxStyle","emojiBoxStyle","_useTranslation","useTranslation","t","groupedReactions","useMemo","React","createElement","Fragment","Object","entries","map","_ref2","_ref3","_slicedToArray","unified","grouped","groupedNames","pluck","join","reaction","Tooltip","key","position","content","className","concat","classNames","onClick","Typography","style","length"],"mappings":"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"}

package/dist/cjs/ProductEmbed.js

@@ -562,39 +562,76 @@ var embedBaseScript = function embedBaseScript(embedScriptLink) {
 var embedEnv = function embedEnv() {
   return globalProps.railsEnv !== "production" ? "\n\t  env: \"".concat(globalProps.railsEnv, "\",") : "";
 };
-var inlineEmbedCode = function inlineEmbedCode(customization, id, embedScriptLink) {
+var parseExtraArgs = function parseExtraArgs(extraArgs) {
+  return ramda.toPairs(extraArgs).map(function (_ref) {
+    var _ref2 = _slicedToArray(_ref, 2),
+      key = _ref2[0],
+      value = _ref2[1];
+    return "\n\t  ".concat(key, ": \"").concat(value, "\"");
+  });
+};
+var inlineEmbedCode = function inlineEmbedCode(_ref3) {
+  var customization = _ref3.customization,
+    id = _ref3.id,
+    embedScriptLink = _ref3.embedScriptLink,
+    extraArgs = _ref3.extraArgs;
   var elementSelector = customization.elementSelector,
     _customization$width = customization.width,
     width = _customization$width === void 0 ? 100 : _customization$width,
     _customization$height = customization.height,
     height = _customization$height === void 0 ? 100 : _customization$height;
-  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"min-width: 90vw; height: 90vh;\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\"},").concat(embedEnv(), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
+  return "\n  <!-- ".concat(globalProps.appName, " inline embed code begins -->\n  <div style=\"min-width: 90vw; height: 90vh;\" id=\"").concat(elementSelector, "\">\n    <!-- ").concat(globalProps.appName, " widget will be added here -->\n  </div>\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"inline\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",\n      styles: { height: \"").concat(height, "%\", width: \"").concat(width, "%\"},").concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " inline embed code ends -->");
 };
-var floatingPopupEmbedCode = function floatingPopupEmbedCode(customization, id, embedScriptLink) {
+var floatingPopupEmbedCode = function floatingPopupEmbedCode(_ref4) {
+  var customization = _ref4.customization,
+    id = _ref4.id,
+    embedScriptLink = _ref4.embedScriptLink,
+    extraArgs = _ref4.extraArgs;
   var btnTextColor = customization.btnTextColor,
     showIcon = customization.showIcon,
     btnText = customization.btnText,
     btnPosition = customization.btnPosition,
     btnColor = customization.btnColor,
     icon = customization.icon;
-  return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"floatingPopup\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      styles: {\n        btnTextColor: \"").concat(btnTextColor, "\",\n        btnPosition: \"").concat(btnPosition, "\",\n        btnColor: \"").concat(btnColor, "\",\n        btnText: \"").concat(btnText, "\", ").concat(icon ? "\n\t\tshowIcon: ".concat(showIcon, ",") : "", "\n      },").concat(embedEnv(), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
+  return "\n  <!-- ".concat(globalProps.appName, " floating-popup embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"floatingPopup\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      styles: {\n        btnTextColor: \"").concat(btnTextColor, "\",\n        btnPosition: \"").concat(btnPosition, "\",\n        btnColor: \"").concat(btnColor, "\",\n        btnText: \"").concat(btnText, "\", ").concat(icon ? "\n\t\tshowIcon: ".concat(showIcon, ",") : "", "\n      },").concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " floating-popup embed code ends -->");
 };
-var elementPopupEmbedCode = function elementPopupEmbedCode(customization, id, embedScriptLink) {
+var elementPopupEmbedCode = function elementPopupEmbedCode(_ref5) {
+  var customization = _ref5.customization,
+    id = _ref5.id,
+    embedScriptLink = _ref5.embedScriptLink,
+    extraArgs = _ref5.extraArgs;
   var elementSelector = customization.elementSelector;
-  return "\n  <!-- ".concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"elementClick\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",").concat(embedEnv(), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
+  return "\n  <!-- ".concat(globalProps.appName, " element-click embed code begins -->\n  ").concat(embedBaseScript(embedScriptLink), "\n  <script>\n    ").concat(globalProps.appName, ".embed({\n      type: \"elementClick\",\n      id: \"").concat(id, "\",\n      organization: \"").concat(globalProps.organization.subdomain, "\",\n      elementSelector: \"#").concat(elementSelector, "\",").concat(embedEnv()).concat(parseExtraArgs(extraArgs), "\n    });\n  </script>\n  <!-- ").concat(globalProps.appName, " element-click embed code ends -->");
 };
-var embedCode = function embedCode(_ref) {
-  var type = _ref.type,
-    customization = _ref.customization,
-    id = _ref.id,
-    embedScriptLink = _ref.embedScriptLink;
+var embedCode = function embedCode(_ref6) {
+  var type = _ref6.type,
+    customization = _ref6.customization,
+    id = _ref6.id,
+    embedScriptLink = _ref6.embedScriptLink,
+    _ref6$extraArgs = _ref6.extraArgs,
+    extraArgs = _ref6$extraArgs === void 0 ? {} : _ref6$extraArgs;
   switch (type) {
     case "inline":
-      return inlineEmbedCode(customization, id, embedScriptLink);
+      return inlineEmbedCode({
+        customization: customization,
+        id: id,
+        embedScriptLink: embedScriptLink,
+        extraArgs: extraArgs
+      });
     case "floatingPopup":
-      return floatingPopupEmbedCode(customization, id, embedScriptLink);
+      return floatingPopupEmbedCode({
+        customization: customization,
+        id: id,
+        embedScriptLink: embedScriptLink,
+        extraArgs: extraArgs
+      });
     case "elementPopup":
-      return elementPopupEmbedCode(customization, id, embedScriptLink);
+      return elementPopupEmbedCode({
+        customization: customization,
+        id: id,
+        embedScriptLink: embedScriptLink,
+        extraArgs: extraArgs
+      });
     default:
       return "";
   }
@@ -616,7 +653,9 @@ var ProductEmbed = function ProductEmbed(_ref) {
     goBackLink = _ref$goBackLink === void 0 ? "" : _ref$goBackLink,
     id = _ref.id,
     _ref$options = _ref.options,
-    options = _ref$options === void 0 ? {} : _ref$options;
+    options = _ref$options === void 0 ? {} : _ref$options,
+    _ref$extraArgs = _ref.extraArgs,
+    extraArgs = _ref$extraArgs === void 0 ? {} : _ref$extraArgs;
   var _useState = React.useState(true),
     _useState2 = _slicedToArray(_useState, 2),
     isScriptLoading = _useState2[0],
@@ -642,7 +681,8 @@ var ProductEmbed = function ProductEmbed(_ref) {
     id: id,
     type: selectedOption,
     customization: customizations[selectedOption],
-    embedScriptLink: embedScriptLink
+    embedScriptLink: embedScriptLink,
+    extraArgs: extraArgs
   });
   var loadScript = function loadScript() {
     var script = document.createElement("script");