@bigbinary/neeto-molecules 3.3.22 → 3.3.24

package/dist/EmojiPicker.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiPicker.js","sources":["../src/components/EmojiPicker/api.js","../src/components/EmojiPicker/constants.js","../src/components/EmojiPicker/hooks/useEmojiData.js","../src/components/EmojiPicker/EmojiPickerMenu.jsx","../src/components/EmojiPicker/index.jsx"],"sourcesContent":["import axios from \"axios\";\n\nconst fetch = () => axios.get(\"https://cdn.jsdelivr.net/npm/@emoji-mart/data\");\n\nconst emojiPickerApi = { fetch };\n\nexport default emojiPickerApi;\n","export const QUERY_KEYS = { EMOJI_DATA: \"emoji-data\" };\n","import { useQuery } from \"@tanstack/react-query\";\n\nimport emojiPickerApi from \"../api\";\nimport { QUERY_KEYS } from \"../constants\";\n\nexport const useEmojiData = () =>\n  useQuery({\n    queryKey: [QUERY_KEYS.EMOJI_DATA],\n    queryFn: emojiPickerApi.fetch,\n  });\n","import { Picker } from \"emoji-mart\";\nimport PropTypes from \"prop-types\";\n\nimport { useEmojiData } from \"./hooks/useEmojiData\";\n\nconst EmojiPickerMenu = ({ onEmojiSelect }) => {\n  const { data } = useEmojiData();\n\n  const createPicker = ref => {\n    new Picker({\n      autoFocus: true,\n      data,\n      native: true,\n      onEmojiSelect,\n      previewPosition: \"none\",\n      ref: { current: ref },\n      skinTonePosition: \"none\",\n      style: { maxWidth: \"100%\" },\n      theme: \"light\",\n    });\n  };\n\n  return <div ref={createPicker} style={{ minWidth: \"350px\" }} />;\n};\n\nEmojiPickerMenu.propTypes = { onEmojiSelect: PropTypes.func };\n\nexport default EmojiPickerMenu;\n","import { useState } from \"react\";\n\nimport { SmileFaceGrey } from \"neetoicons\";\nimport { Dropdown } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport EmojiPickerMenu from \"./EmojiPickerMenu\";\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      closeOnSelect={false}\n      dropdownProps={{ className: \"neeto-ui-shadow-s z-10\" }}\n      position=\"bottom-start\"\n      strategy=\"fixed\"\n      buttonProps={{\n        \"data-cy\": \"emoji-picker-dropdown-icon\",\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      <EmojiPickerMenu onEmojiSelect={onEmojiClick} />\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":["fetch","axios","get","emojiPickerApi","QUERY_KEYS","EMOJI_DATA","useEmojiData","useQuery","queryKey","queryFn","EmojiPickerMenu","_ref","onEmojiSelect","_useEmojiData","data","createPicker","ref","Picker","autoFocus","previewPosition","current","skinTonePosition","style","maxWidth","theme","_jsx","minWidth","EmojiPicker","onSelect","dropdownProps","_ref$open","open","_useTranslation","useTranslation","t","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","onEmojiClick","emoji","Dropdown","_objectSpread","closeOnEsc","closeOnSelect","className","position","strategy","buttonProps","icon","SmileFaceGrey","tooltipProps","content","onClick","onClickOutside","onClose","children"],"mappings":"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"}
+{"version":3,"file":"EmojiPicker.js","sources":["../src/components/EmojiPicker/api.js","../src/components/EmojiPicker/constants.js","../src/components/EmojiPicker/hooks/useEmojiData.js","../src/components/EmojiPicker/EmojiPickerMenu.jsx","../src/components/EmojiPicker/index.jsx"],"sourcesContent":["import axios from \"axios\";\n\nconst fetch = () => axios.get(\"https://cdn.jsdelivr.net/npm/@emoji-mart/data\");\n\nconst emojiPickerApi = { fetch };\n\nexport default emojiPickerApi;\n","export const QUERY_KEYS = { EMOJI_DATA: \"emoji-data\" };\n","import { useQuery } from \"@tanstack/react-query\";\n\nimport emojiPickerApi from \"../api\";\nimport { QUERY_KEYS } from \"../constants\";\n\nexport const useEmojiData = () =>\n  useQuery({\n    queryKey: [QUERY_KEYS.EMOJI_DATA],\n    queryFn: emojiPickerApi.fetch,\n  });\n","import { Picker } from \"emoji-mart\";\nimport PropTypes from \"prop-types\";\n\nimport { useEmojiData } from \"./hooks/useEmojiData\";\n\nconst EmojiPickerMenu = ({ onEmojiSelect }) => {\n  const { data } = useEmojiData();\n\n  const createPicker = ref => {\n    new Picker({\n      autoFocus: true,\n      data,\n      native: true,\n      onEmojiSelect,\n      previewPosition: \"none\",\n      ref: { current: ref },\n      skinTonePosition: \"none\",\n      style: { maxWidth: \"100%\" },\n      theme: \"light\",\n    });\n  };\n\n  return <div ref={createPicker} style={{ minWidth: \"350px\" }} />;\n};\n\nEmojiPickerMenu.propTypes = { onEmojiSelect: PropTypes.func };\n\nexport default EmojiPickerMenu;\n","import { useState } from \"react\";\n\nimport { SmileFaceGrey } from \"neetoicons\";\nimport { Dropdown } from \"neetoui\";\nimport PropTypes from \"prop-types\";\nimport { useTranslation } from \"react-i18next\";\n\nimport EmojiPickerMenu from \"./EmojiPickerMenu\";\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      closeOnSelect={false}\n      dropdownProps={{ className: \"neeto-ui-shadow-s z-10\" }}\n      position=\"bottom-start\"\n      strategy=\"fixed\"\n      buttonProps={{\n        \"data-cy\": \"emoji-picker-dropdown-icon\",\n        icon: SmileFaceGrey,\n        tooltipProps: {\n          content: t(\"neetoMolecules.common.emojiPicker\"),\n          position: \"top\",\n          touch: [\"hold\", 500],\n        },\n        onClick: () => setIsOpen(true),\n        style: \"text\",\n      }}\n      onClickOutside={() => setIsOpen(false)}\n      onClose={() => setIsOpen(false)}\n      {...dropdownProps}\n    >\n      <EmojiPickerMenu onEmojiSelect={onEmojiClick} />\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":["fetch","axios","get","emojiPickerApi","QUERY_KEYS","EMOJI_DATA","useEmojiData","useQuery","queryKey","queryFn","EmojiPickerMenu","_ref","onEmojiSelect","_useEmojiData","data","createPicker","ref","Picker","autoFocus","previewPosition","current","skinTonePosition","style","maxWidth","theme","_jsx","minWidth","EmojiPicker","onSelect","dropdownProps","_ref$open","open","_useTranslation","useTranslation","t","_useState","useState","_useState2","_slicedToArray","isOpen","setIsOpen","onEmojiClick","emoji","Dropdown","_objectSpread","closeOnEsc","closeOnSelect","className","position","strategy","buttonProps","icon","SmileFaceGrey","tooltipProps","content","touch","onClick","onClickOutside","onClose","children"],"mappings":"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"}

package/dist/EmojiReactions.js

@@ -38,6 +38,7 @@ var EmojiReactions = function EmojiReactions(_ref) {
       var reaction = grouped[0];
       return /*#__PURE__*/jsx(Tooltip, {
         position: "top",
+        touch: ["hold", 500],
         content: /*#__PURE__*/jsxs("div", {
           className: "flex flex-col items-center justify-center",
           children: [/*#__PURE__*/jsx("div", {

package/dist/EmojiReactions.js.map

@@ -1 +1 @@
-{"version":3,"file":"EmojiReactions.js","sources":["../src/components/EmojiReactions/utils.js","../src/components/EmojiReactions/index.jsx"],"sourcesContent":["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 { 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":["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","_jsx","_Fragment","children","Object","entries","map","_ref2","_ref3","_slicedToArray","unified","grouped","groupedNames","pluck","join","reaction","Tooltip","position","content","_jsxs","className","concat","classNames","onClick","Typography","style","length"],"mappings":"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"}
+{"version":3,"file":"EmojiReactions.js","sources":["../src/components/EmojiReactions/utils.js","../src/components/EmojiReactions/index.jsx"],"sourcesContent":["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 { 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            touch={[\"hold\", 500]}\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":["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","_jsx","_Fragment","children","Object","entries","map","_ref2","_ref3","_slicedToArray","unified","grouped","groupedNames","pluck","join","reaction","Tooltip","position","touch","content","_jsxs","className","concat","classNames","onClick","Typography","style","length"],"mappings":"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"}

package/dist/IconPicker.js

@@ -949,6 +949,7 @@ var Icon = function Icon(_ref) {
   return /*#__PURE__*/jsx(Tooltip, {
     content: humanize(icon),
     position: "bottom",
+    touch: ["hold", 500],
     children: /*#__PURE__*/jsx("div", {
       style: style,
       "data-testid": "icon-picker-icon-".concat(icon),