@zohoim/chat-components 1.1.4 → 1.1.6-beta.1

package/lib/EmojiPopup/EmojiPopup.js

@@ -0,0 +1,138 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Popup = _interopRequireDefault(require("@zohodesk/components/es/Popup/Popup"));
+
+var _DropBox = _interopRequireDefault(require("@zohodesk/components/es/DropBox/DropBox"));
+
+var _IconButton = _interopRequireDefault(require("@zohodesk/dot/es/IconButton/IconButton"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _Emojis = _interopRequireDefault(require("../Emojis/Emojis"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _useEmojiPopup2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/EmojiPopup/useEmojiPopup"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _constants = require("../constants");
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _EmojiPopupModule = _interopRequireDefault(require("./css/EmojiPopup.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _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 EmojiPopupComp(props) {
+  var customStyle = props.customStyle,
+      customProps = props.customProps,
+      popupSize = props.popupSize,
+      defaultPopupPosition = props.defaultPopupPosition,
+      tooltip = props.tooltip,
+      propOnSelect = props.onSelect,
+      needCloseOnSelect = props.needCloseOnSelect,
+      onPopupOpen = props.onPopupOpen,
+      onPopupClose = props.onPopupClose,
+      getTargetRef = props.getTargetRef,
+      getContainerRef = props.getContainerRef,
+      position = props.position,
+      togglePopup = props.togglePopup,
+      isPopupReady = props.isPopupReady,
+      isPopupOpen = props.isPopupOpen,
+      removeClose = props.removeClose,
+      closePopupOnly = props.closePopupOnly,
+      isAbsolutePositioningNeeded = props.isAbsolutePositioningNeeded,
+      positionsOffset = props.positionsOffset;
+
+  var _ref = customProps || _emptyConstants.dummyObject,
+      _ref$iconProps = _ref.iconProps,
+      iconProps = _ref$iconProps === void 0 ? _emptyConstants.dummyObject : _ref$iconProps,
+      _ref$dropBoxProps = _ref.dropBoxProps,
+      dropBoxProps = _ref$dropBoxProps === void 0 ? _emptyConstants.dummyObject : _ref$dropBoxProps,
+      _ref$emojisProps = _ref.emojisProps,
+      emojisProps = _ref$emojisProps === void 0 ? _emptyConstants.dummyObject : _ref$emojisProps;
+
+  var _useEmojiPopup = (0, _useEmojiPopup2["default"])({
+    togglePopup: togglePopup,
+    defaultPopupPosition: defaultPopupPosition,
+    needCloseOnSelect: needCloseOnSelect,
+    closePopupOnly: closePopupOnly,
+    onSelect: propOnSelect,
+    isPopupOpen: isPopupOpen,
+    onPopupOpen: onPopupOpen,
+    onPopupClose: onPopupClose
+  }),
+      onSelect = _useEmojiPopup.onSelect,
+      onTogglePopup = _useEmojiPopup.onTogglePopup;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_EmojiPopupModule["default"], customStyle);
+  var popupClass = (0, _react.useMemo)(function () {
+    return {
+      customDropBox: newStyle.popup,
+      customMobileDropBox: newStyle.mobilePopup,
+      customDropBoxWrap: newStyle.popupWrapper,
+      customMobileDropBoxWrap: newStyle.mobilePopupWrapper
+    };
+  }, [newStyle.popup, newStyle.mobilePopup, newStyle.popupWrapper, newStyle.mobilePopupWrapper]);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "column"
+  }, /*#__PURE__*/_react["default"].createElement(_IconButton["default"], _extends({
+    a11y: {
+      ariaLabel: tooltip
+    },
+    className: newStyle.iconWrapper,
+    eleRef: getTargetRef,
+    iconClass: newStyle.icon,
+    iconName: "ZD-TT-happiness",
+    iconSize: "14",
+    isActive: isPopupOpen,
+    onClick: onTogglePopup,
+    title: tooltip
+  }, iconProps)), isPopupOpen ? /*#__PURE__*/_react["default"].createElement(_DropBox["default"], _extends({
+    boxPosition: position,
+    customClass: popupClass,
+    customStyle: _emptyConstants.dummyObject,
+    getRef: getContainerRef,
+    isAbsolutePositioningNeeded: isAbsolutePositioningNeeded,
+    isActive: isPopupReady,
+    isAnimate: true,
+    isArrow: false,
+    onClick: removeClose,
+    portalId: _constants.EDITOR_POPUP_PORTAL,
+    positionsOffset: positionsOffset,
+    size: popupSize
+  }, dropBoxProps), /*#__PURE__*/_react["default"].createElement(_Emojis["default"], _extends({
+    onSelect: onSelect
+  }, emojisProps))) : null);
+}
+
+var EmojiPopup = (0, _Popup["default"])(EmojiPopupComp, undefined, undefined, {
+  isAbsolutePositioningNeeded: false
+});
+EmojiPopupComp.defaultProps = _defaultProps["default"];
+EmojiPopupComp.propTypes = _propTypes["default"];
+EmojiPopup.defaultProps = _defaultProps["default"];
+EmojiPopup.propTypes = _propTypes["default"];
+EmojiPopup.displayName = 'EmojiPopup';
+var _default = EmojiPopup;
+exports["default"] = _default;

package/lib/EmojiPopup/css/EmojiPopup.module.css

@@ -0,0 +1,50 @@
+/** ** Styles *** */
+
+.emojiPopup {
+  /** ** Use this class for css customisation *** */
+}
+
+.container {
+  display: inline-block;
+}
+
+.popup {
+  /** ** Use this class for css customisation *** */
+}
+
+.popupWrapper {
+  composes: container;
+}
+
+.mobilePopup {
+  composes: container;
+}
+
+.mobilePopupWrapper {
+  composes: container;
+}
+
+.icon {
+  /* margin-right: 5px; */
+}
+
+.iconWrapper {
+  color: initial;
+}
+
+[dir=ltr] .iconWrapper {
+  margin-right: var(--zd_size5) ;
+}
+
+[dir=rtl] .iconWrapper {
+  margin-left: var(--zd_size5) ;
+}
+
+.icon :global .path1:before {
+  color: var(--imlib_chat_components_twotone_icon_bg) !important;
+  opacity: 1;
+}
+
+.icon :global .path2:before {
+  color: var(--imlib_chat_components_twotone_icon_border) !important;
+}

package/lib/EmojiPopup/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EmojiPopup", {
+  enumerable: true,
+  get: function get() {
+    return _EmojiPopup["default"];
+  }
+});
+
+var _EmojiPopup = _interopRequireDefault(require("./EmojiPopup"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/EmojiPopup/props/defaultProps.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var emojiPopupDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  customProps: _emptyConstants.dummyObject,
+  popupSize: 'large',
+  defaultPopupPosition: 'topCenter',
+  tooltip: 'Add Emoji',
+  needCloseOnSelect: true
+};
+var _default = emojiPopupDefaultProps;
+exports["default"] = _default;

package/lib/EmojiPopup/props/propTypes.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _popupPropConstants = require("../../constants/propConstants/popupPropConstants");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+
+/** ** Constants *** */
+var emojiPopupPropTypes = {
+  customStyle: _propTypes["default"].object,
+  customProps: _propTypes["default"].shape({
+    dropBoxProps: _propTypes["default"].object,
+    emojisProps: _propTypes["default"].object,
+    iconProps: _propTypes["default"].object
+  }),
+  popupSize: _propTypes["default"].oneOf(_popupPropConstants.popupSize),
+  defaultPopupPosition: _propTypes["default"].oneOf(_popupPropConstants.popupPosition),
+  tooltip: _propTypes["default"].string,
+  onSelect: _propTypes["default"].func,
+  needCloseOnSelect: _propTypes["default"].bool,
+  onPopupOpen: _propTypes["default"].func,
+  onPopupClose: _propTypes["default"].func
+};
+var _default = emojiPopupPropTypes;
+exports["default"] = _default;

package/lib/Emojis/Emojis.js

@@ -0,0 +1,92 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Emojis;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _EmojisList = _interopRequireDefault(require("../EmojisList/EmojisList"));
+
+var _EmojisHeader = _interopRequireDefault(require("../EmojisHeader/EmojisHeader"));
+
+var _EmojisFooter = _interopRequireDefault(require("../EmojisFooter/EmojisFooter"));
+
+var _useEmojis2 = _interopRequireDefault(require("@zohoim/chat-components-hooks/es/Emojis/useEmojis"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _emojisList = _interopRequireDefault(require("@zohoim/chat-components-utils/es/constants/emojisList"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 Emojis(props) {
+  var searchString = props.searchString,
+      isShowGroupBasedList = props.isShowGroupBasedList,
+      isShowSearchBox = props.isShowSearchBox,
+      emojisRowType = props.emojisRowType,
+      propOnSelect = props.onSelect,
+      needAutoFocus = props.needAutoFocus,
+      customProps = props.customProps,
+      isShowOnlyContent = props.isShowOnlyContent,
+      searchPlaceHolder = props.searchPlaceHolder,
+      getMethods = props.getMethods;
+
+  var _ref = customProps || _emptyConstants.dummyObject,
+      _ref$emojisListProps = _ref.emojisListProps,
+      emojisListProps = _ref$emojisListProps === void 0 ? _emptyConstants.dummyObject : _ref$emojisListProps,
+      _ref$emojisHeaderProp = _ref.emojisHeaderProps,
+      emojisHeaderProps = _ref$emojisHeaderProp === void 0 ? _emptyConstants.dummyObject : _ref$emojisHeaderProp,
+      _ref$emojisFooterProp = _ref.emojisFooterProps,
+      emojisFooterProps = _ref$emojisFooterProp === void 0 ? _emptyConstants.dummyObject : _ref$emojisFooterProp;
+
+  var _useEmojis = (0, _useEmojis2["default"])({
+    searchString: searchString,
+    isShowSearchBox: isShowSearchBox,
+    needAutoFocus: needAutoFocus,
+    onSelect: propOnSelect,
+    emojisList: _emojisList["default"],
+    isShowGroupBasedList: isShowGroupBasedList,
+    getMethods: getMethods
+  }),
+      searchValue = _useEmojis.searchValue,
+      onSearch = _useEmojis.onSearch,
+      getSearchRef = _useEmojis.getSearchRef,
+      onChangeGroup = _useEmojis.onChangeGroup,
+      selectedGroup = _useEmojis.selectedGroup,
+      getEmojisListMethods = _useEmojis.getEmojisListMethods,
+      onSelect = _useEmojis.onSelect,
+      onSelectTab = _useEmojis.onSelectTab;
+
+  return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, isShowSearchBox ? /*#__PURE__*/_react["default"].createElement(_EmojisHeader["default"], _extends({
+    getRef: getSearchRef,
+    onChange: onSearch,
+    searchPlaceHolder: searchPlaceHolder,
+    searchString: searchValue
+  }, emojisHeaderProps)) : null, /*#__PURE__*/_react["default"].createElement(_EmojisList["default"], _extends({
+    emojisList: _emojisList["default"],
+    getMethods: getEmojisListMethods,
+    isShowGroupBasedList: searchValue ? false : isShowGroupBasedList,
+    isShowOnlyContent: isShowOnlyContent,
+    onChangeGroup: onChangeGroup,
+    onSelect: onSelect,
+    rowType: emojisRowType,
+    searchString: searchValue,
+    selectedGroup: selectedGroup
+  }, emojisListProps)), isShowGroupBasedList ? /*#__PURE__*/_react["default"].createElement(_EmojisFooter["default"], _extends({
+    emojisList: _emojisList["default"],
+    onSelect: onSelectTab,
+    selectedTab: selectedGroup
+  }, emojisFooterProps)) : null);
+}
+
+Emojis.propTypes = _propTypes["default"];
+Emojis.defaultProps = _defaultProps["default"];
+Emojis.displayName = 'Emojis';

package/lib/Emojis/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Emojis", {
+  enumerable: true,
+  get: function get() {
+    return _Emojis["default"];
+  }
+});
+
+var _Emojis = _interopRequireDefault(require("./Emojis"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/Emojis/props/defaultProps.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var emojisDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  isShowGroupBasedList: true,
+  emojisRowType: 'multiple',
+  needAutoFocus: true,
+  isShowSearchBox: true
+};
+var _default = emojisDefaultProps;
+exports["default"] = _default;

package/lib/Emojis/props/propTypes.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var emojisPropTypes = {
+  customStyle: _propTypes["default"].object,
+  searchString: _propTypes["default"].string,
+  isShowGroupBasedList: _propTypes["default"].bool,
+  isShowSearchBox: _propTypes["default"].bool,
+  emojisRowType: _propTypes["default"].oneOf(['single', 'multiple']),
+  onSelect: _propTypes["default"].func,
+  needAutoFocus: _propTypes["default"].bool,
+  customProps: _propTypes["default"].shape({
+    emojisFooterProps: _propTypes["default"].object,
+    emojisHeaderProps: _propTypes["default"].object,
+    emojisListProps: _propTypes["default"].object
+  }),
+  isShowOnlyContent: _propTypes["default"].bool,
+  searchPlaceHolder: _propTypes["default"].string,
+  getMethods: _propTypes["default"].func
+};
+var _default = emojisPropTypes;
+exports["default"] = _default;

package/lib/EmojisEmptyState/EmojisEmptyState.js

@@ -0,0 +1,74 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = EmojisEmptyState;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _Emoji = _interopRequireDefault(require("../Emoji/Emoji"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _EmojisEmptyStateModule = _interopRequireDefault(require("./css/EmojisEmptyState.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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; }
+
+/** ** Libraries *** */
+
+/** ** Components *** */
+
+/** ** Hooks *** */
+
+/** ** Constants *** */
+
+/** ** Styles *** */
+function EmojisEmptyState(props) {
+  var customStyle = props.customStyle,
+      title = props.title,
+      description = props.description;
+  /* External customization */
+
+  var newStyle = (0, _useMergeStyle["default"])(_EmojisEmptyStateModule["default"], customStyle);
+
+  var _useMemo = (0, _react.useMemo)(function () {
+    return {
+      emoji: ['#x1f622'],
+      name: ':cry:'
+    };
+  }, []),
+      emoji = _useMemo.emoji,
+      name = _useMemo.name;
+
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    align: "both"
+  }, /*#__PURE__*/_react["default"].createElement(_Layout.Box, null, /*#__PURE__*/_react["default"].createElement(_Emoji["default"], {
+    autoHover: false,
+    emoji: emoji,
+    emojiName: name,
+    needTitle: false
+  })), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.title,
+    "data-title": title
+  }, title), /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+    className: newStyle.description,
+    "data-title": description
+  }, description));
+}
+
+EmojisEmptyState.propTypes = _propTypes["default"];
+EmojisEmptyState.defaultProps = _defaultProps["default"];
+EmojisEmptyState.displayName = 'EmojisEmptyState';

package/lib/EmojisEmptyState/css/EmojisEmptyState.module.css

@@ -0,0 +1,18 @@
+.title {
+  color: var(--zd_im_primary_text);
+  font-size: var(--zd_font_size16);
+  font-family: var(--zd_semibold);
+  max-width: 100% ;
+  composes: dotted from '../../css/common.module.css';
+  margin-bottom: var(--zd_size7);
+}
+
+.description {
+  font-size: var(--zd_font_size14);
+  color: var(--zd_im_secondary_text);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-align: center;
+}

package/lib/EmojisEmptyState/index.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EmojisEmptyState", {
+  enumerable: true,
+  get: function get() {
+    return _EmojisEmptyState["default"];
+  }
+});
+
+var _EmojisEmptyState = _interopRequireDefault(require("./EmojisEmptyState"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/EmojisEmptyState/props/defaultProps.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+/** ** Constants *** */
+var emojisEmptyStateDefaultProps = {
+  customStyle: _emptyConstants.dummyObject,
+  title: 'No Emoji(s) found!',
+  // eslint-disable-next-line quotes
+  description: "Sorry, we couldn't find any emojis."
+};
+var _default = emojisEmptyStateDefaultProps;
+exports["default"] = _default;

package/lib/EmojisEmptyState/props/propTypes.js

@@ -0,0 +1,19 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+/** ** Libraries *** */
+var emojisEmptyStatePropTypes = {
+  customStyle: _propTypes["default"].object,
+  title: _propTypes["default"].string.isRequired,
+  description: _propTypes["default"].string
+};
+var _default = emojisEmptyStatePropTypes;
+exports["default"] = _default;

package/lib/EmojisFooter/EmojisFooter.js

@@ -0,0 +1,87 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = EmojisFooter;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _Layout = require("@zohodesk/components/es/Layout");
+
+var _Emoji = _interopRequireDefault(require("../Emoji/Emoji"));
+
+var _useMergeStyle = _interopRequireDefault(require("@zohodesk/hooks/es/utils/useMergeStyle"));
+
+var _emptyConstants = require("@zohoim/chat-components-utils/es/constants/emptyConstants");
+
+var _defaultProps = _interopRequireDefault(require("./props/defaultProps"));
+
+var _propTypes = _interopRequireDefault(require("./props/propTypes"));
+
+var _EmojisFooterModule = _interopRequireDefault(require("./css/EmojisFooter.module.css"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
+
+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 _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); }
+
+var capitalize = function capitalize() {
+  var str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+};
+
+function EmojisFooter(props) {
+  var customStyle = props.customStyle,
+      customProps = props.customProps,
+      _props$emojisList = props.emojisList,
+      emojisList = _props$emojisList === void 0 ? _emptyConstants.dummyObject : _props$emojisList,
+      onSelect = props.onSelect,
+      selectedTab = props.selectedTab;
+
+  var _ref = customProps || _emptyConstants.dummyObject,
+      _ref$emojiProps = _ref.emojiProps,
+      emojiProps = _ref$emojiProps === void 0 ? _emptyConstants.dummyObject : _ref$emojiProps;
+  /* External customization */
+
+
+  var newStyle = (0, _useMergeStyle["default"])(_EmojisFooterModule["default"], customStyle);
+  var emojiCustomStyle = (0, _react.useMemo)(function () {
+    return {
+      emoji: newStyle.emoji
+    };
+  }, [newStyle.emoji]);
+  return /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+    alignBox: "row",
+    className: newStyle.footerTab,
+    isCover: false
+  }, Object.keys(emojisList).map(function (groupName) {
+    var emojis = emojisList[groupName];
+    var emojiName = Object.keys(emojis)[0];
+    var emoji = emojis[emojiName];
+    var id = "emoji_".concat(emojiName);
+    return /*#__PURE__*/_react["default"].createElement(_Layout.Box, {
+      key: id,
+      className: newStyle.tabIcon,
+      flexible: true
+    }, /*#__PURE__*/_react["default"].createElement(_Emoji["default"], _extends({
+      customStyle: emojiCustomStyle,
+      customTitle: capitalize(groupName),
+      emoji: emoji,
+      emojiName: emojiName,
+      id: groupName,
+      onSelect: onSelect
+    }, emojiProps)), selectedTab === groupName ? /*#__PURE__*/_react["default"].createElement("span", {
+      className: newStyle.tabLine
+    }) : null);
+  }));
+}
+
+EmojisFooter.propTypes = _propTypes["default"];
+EmojisFooter.defaultProps = _defaultProps["default"];
+EmojisFooter.displayName = 'EmojisFooter';