@zohoim/chat-components 1.0.9-beta.6 → 1.0.9-beta.7

package/es/EmojisFooter/EmojisFooter.js

@@ -0,0 +1,71 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React, { useMemo } from 'react';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Emoji from "../Emoji/Emoji";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import emojisFooterDefaultProps from "./props/defaultProps";
+import emojisFooterPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/EmojisFooter.module.css";
+
+const capitalize = function () {
+  let str = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+};
+
+export default function EmojisFooter(props) {
+  const {
+    customStyle,
+    customProps,
+    emojisList = dummyObject,
+    onSelect,
+    selectedTab
+  } = props;
+  const {
+    emojiProps = dummyObject
+  } = customProps || dummyObject;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  const emojiCustomStyle = useMemo(() => ({
+    emoji: newStyle.emoji
+  }), [newStyle.emoji]);
+  return /*#__PURE__*/React.createElement(Container, {
+    alignBox: "row",
+    className: newStyle.footerTab,
+    isCover: false
+  }, Object.keys(emojisList).map(groupName => {
+    const emojis = emojisList[groupName];
+    const emojiName = Object.keys(emojis)[0];
+    const emoji = emojis[emojiName];
+    const id = `emoji_${emojiName}`;
+    return /*#__PURE__*/React.createElement(Box, {
+      key: id,
+      className: newStyle.tabIcon,
+      flexible: true
+    }, /*#__PURE__*/React.createElement(Emoji, {
+      customStyle: emojiCustomStyle,
+      customTitle: capitalize(groupName),
+      emoji: emoji,
+      emojiName: emojiName,
+      id: groupName,
+      onSelect: onSelect,
+      ...emojiProps
+    }), selectedTab === groupName ? /*#__PURE__*/React.createElement("span", {
+      className: newStyle.tabLine
+    }) : null);
+  }));
+}
+EmojisFooter.propTypes = emojisFooterPropTypes;
+EmojisFooter.defaultProps = emojisFooterDefaultProps;
+EmojisFooter.displayName = 'EmojisFooter';

package/es/EmojisFooter/css/EmojisFooter.module.css

@@ -0,0 +1,40 @@
+.footerTab {
+  position: relative;
+  border-top: 1px solid var(--imlib_chat_components_emojiFooter_border_color);
+}
+
+.tabIcon {
+  /* padding: var(--zd_size10) var(--zd_size16); */
+  position: relative;
+  height: var(--zd_size35) ;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: 1% ;
+}
+
+.tabLine {
+  display: inline-block;
+  position: absolute;
+  top: 0 ;
+  height: var(--zd_size2) ;
+  transition: 0.3s ease;
+  width: 100% ;
+  background-color: var(--imlib_chat_components_emojiFooter_tabLine);
+}
+
+[dir=ltr] .tabLine {
+  left: 0 ;
+}
+
+[dir=rtl] .tabLine {
+  right: 0 ;
+}
+
+.emoji {
+  width: auto ;
+  height: auto ;
+  margin: 0 ;
+  padding: 8% ;
+}

package/es/EmojisFooter/index.js

@@ -0,0 +1 @@
+export { default as EmojisFooter } from "./EmojisFooter";

package/es/EmojisFooter/props/defaultProps.js

@@ -0,0 +1,7 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const emojisFooterDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject
+};
+export default emojisFooterDefaultProps;

package/es/EmojisFooter/props/propTypes.js

@@ -0,0 +1,12 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const emojisFooterPropTypes = {
+  customStyle: PropTypes.object,
+  customProps: PropTypes.shape({
+    emojiProps: PropTypes.object
+  }),
+  emojisList: PropTypes.object.isRequired,
+  onSelect: PropTypes.func,
+  selectedTab: PropTypes.string
+};
+export default emojisFooterPropTypes;

package/es/EmojisHeader/EmojisHeader.js

@@ -0,0 +1,65 @@
+/** ** Libraries *** */
+import React from 'react';
+/** ** Components *** */
+
+import { Container, Box } from '@zohodesk/components/es/Layout';
+import Icon from '@zohodesk/icons/es/Icon';
+import TextBox from '@zohodesk/components/es/TextBox/TextBox';
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+/** ** Constants *** */
+
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+import emojisHeaderDefaultProps from "./props/defaultProps";
+import emojisHeaderPropTypes from "./props/propTypes";
+/** ** Styles *** */
+
+import style from "./css/EmojisHeader.module.css";
+export default function EmojisHeader(props) {
+  const {
+    customStyle,
+    customProps = dummyObject,
+    searchString,
+    getRef,
+    onChange,
+    searchPlaceHolder
+  } = props;
+  const {
+    textBoxProps = dummyObject
+  } = customProps;
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  return /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.container
+  }, /*#__PURE__*/React.createElement(Container, {
+    align: "vertical",
+    alignBox: "row",
+    className: newStyle.emojisSearch
+  }, /*#__PURE__*/React.createElement(Box, {
+    className: newStyle.searchIcon
+  }, /*#__PURE__*/React.createElement(Icon, {
+    name: "ZD-search",
+    size: "13"
+  })), /*#__PURE__*/React.createElement(Box, {
+    flexible: true
+  }, /*#__PURE__*/React.createElement(TextBox, {
+    customClass: newStyle.searchInput,
+    inputRef: getRef,
+    isDisabled: false,
+    isReadOnly: false,
+    name: "emojiSearch",
+    needBorder: false,
+    onChange: onChange,
+    placeHolder: searchPlaceHolder,
+    size: "medium",
+    type: "text",
+    value: searchString,
+    variant: "default",
+    ...textBoxProps
+  }))));
+}
+EmojisHeader.propTypes = emojisHeaderPropTypes;
+EmojisHeader.defaultProps = emojisHeaderDefaultProps;
+EmojisHeader.displayName = 'EmojisHeader';

package/es/EmojisHeader/css/EmojisHeader.module.css

@@ -0,0 +1,36 @@
+.container {
+  padding: var(--zd_size10) ;
+  border-bottom: 1px solid
+    var(--imlib_chat_components_emojisHeader_border_color);
+}
+
+.emojisSearch {
+  position: relative;
+  background-color: var(--imlib_chat_components_emojisHeader_bg_color);
+}
+
+.searchInput {
+  box-sizing: border-box;
+  min-height: var(--zd_size38) ;
+  outline: 0;
+}
+
+[dir=ltr] .searchInput {
+  padding-left: var(--zd_size31) ;
+}
+
+[dir=rtl] .searchInput {
+  padding-right: var(--zd_size31) ;
+}
+
+.searchIcon {
+  position: absolute;
+}
+
+[dir=ltr] .searchIcon {
+  left: var(--zd_size10) ;
+}
+
+[dir=rtl] .searchIcon {
+  right: var(--zd_size10) ;
+}

package/es/EmojisHeader/index.js

@@ -0,0 +1 @@
+export { default as EmojisHeader } from "./EmojisHeader";

package/es/EmojisHeader/props/defaultProps.js

@@ -0,0 +1,8 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+const emojisHeaderDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  searchPlaceHolder: 'Search...'
+};
+export default emojisHeaderDefaultProps;

package/es/EmojisHeader/props/propTypes.js

@@ -0,0 +1,13 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const emojisHeaderPropTypes = {
+  customStyle: PropTypes.object,
+  customProps: PropTypes.shape({
+    textBoxProps: PropTypes.object
+  }),
+  searchString: PropTypes.string,
+  getRef: PropTypes.func,
+  onChange: PropTypes.func,
+  searchPlaceHolder: PropTypes.string
+};
+export default emojisHeaderPropTypes;

package/es/EmojisList/EmojisList.js

@@ -0,0 +1,130 @@
+/* eslint-disable max-len */
+
+/** ** Libraries *** */
+import React, { useCallback } from 'react';
+/** ** Components *** */
+
+import Emoji from "../Emoji/Emoji";
+import EmojisEmptyState from "../EmojisEmptyState/EmojisEmptyState";
+/** ** Hooks *** */
+
+import useMergeStyle from '@zohodesk/hooks/es/utils/useMergeStyle';
+import useEmojisList from '@zohoim/chat-components-hooks/es/EmojisList/useEmojisList';
+/** ** Constants *** */
+
+import emojisListDefaultProps from "./props/defaultProps";
+import emojisListPropTypes from "./props/propTypes";
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants/emptyConstants';
+/** ** Methods *** */
+
+import renderHandler from '@zohoim/chat-components-utils/es/common/renderHandler';
+import cssJSLogic from "./css/cssJSLogic";
+/** ** Styles *** */
+
+import style from "./css/EmojisList.module.css";
+export default function EmojisList(props) {
+  const {
+    customStyle,
+    customProps,
+    searchString,
+    isShowGroupBasedList,
+    onChangeGroup,
+    getMethods,
+    onSelect,
+    selectedGroup,
+    rowType,
+    emojisList: propsEmojisList,
+    renderEmpty,
+    isShowOnlyContent
+  } = props;
+  const {
+    emojiProps = dummyObject,
+    emojisEmptyStateProps = dummyObject
+  } = customProps;
+  const {
+    emojisList,
+    setGroupRefs,
+    setContainerRef: listContainerRef,
+    isAllEmpty,
+    isGroupEmpty,
+    isRenderEmptyState,
+    isRenderElement
+  } = useEmojisList({
+    emojisList: propsEmojisList,
+    searchString,
+    isShowGroupBasedList,
+    onChangeGroup,
+    getMethods,
+    selectedGroup,
+    isShowOnlyContent
+  });
+  /* External customization */
+
+  const newStyle = useMergeStyle(style, customStyle);
+  /* CSS classnames added based on logic */
+
+  const {
+    emojisListClass,
+    groupClass
+  } = cssJSLogic({
+    rowType,
+    isShowGroupBasedList,
+    isShowOnlyContent,
+    isEmpty: isAllEmpty
+  }, newStyle);
+  const renderGroup = useCallback(_ref => {
+    let {
+      groupName,
+      emojis
+    } = _ref;
+    const isEmptyGroup = isGroupEmpty[groupName];
+    return !isEmptyGroup ? /*#__PURE__*/React.createElement("div", {
+      key: groupName,
+      ref: el => {
+        setGroupRefs(el, groupName);
+      },
+      className: groupClass
+    }, isShowGroupBasedList ? /*#__PURE__*/React.createElement("div", {
+      className: newStyle.groupName
+    }, groupName) : null, Object.keys(emojis).map(emojiName => {
+      const emoji = emojis[emojiName];
+      const id = `emoji_${emojiName}`;
+      return /*#__PURE__*/React.createElement(Emoji, {
+        key: id,
+        emoji: emoji,
+        emojiName: emojiName,
+        onSelect: onSelect,
+        ...emojiProps
+      });
+    })) : null;
+  }, [emojiProps, isGroupEmpty, groupClass, isShowGroupBasedList, newStyle.groupName, onSelect, setGroupRefs]);
+  const renderDefaultEmptyState = useCallback(() => /*#__PURE__*/React.createElement(EmojisEmptyState, { ...emojisEmptyStateProps
+  }), [emojisEmptyStateProps]);
+  const renderEmptyState = useCallback(() => {
+    /* Render EmptyState */
+    if (isRenderEmptyState) {
+      const emptyState = renderHandler(renderEmpty || renderDefaultEmptyState)();
+
+      if (emptyState) {
+        return emptyState;
+      }
+
+      return null;
+    }
+
+    return null;
+  }, [renderEmpty, renderDefaultEmptyState, isRenderEmptyState]);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, isRenderElement ? /*#__PURE__*/React.createElement("div", {
+    ref: listContainerRef,
+    className: emojisListClass
+  }, !isAllEmpty ? Object.keys(emojisList).map(groupName => {
+    const emojis = emojisList[groupName];
+    return renderGroup({
+      groupName,
+      emojis
+    });
+  }) : renderEmptyState()) : null);
+}
+EmojisList.propTypes = emojisListPropTypes;
+EmojisList.defaultProps = emojisListDefaultProps;
+EmojisList.displayName = 'EmojisList';

package/es/EmojisList/css/EmojisList.module.css

@@ -0,0 +1,50 @@
+.varClass {
+  --emoji-groupName-size: var(--zd_font_size13);
+  --emoji-singleList-size: var(--zd_size32);
+  --emoji-multipleList-size: var(--zd_size300);
+}
+
+.emojisList {
+  composes: varClass;
+  transition: 0.2s ease;
+  flex-direction: row;
+  flex-shrink: 0;
+  width: 100% ;
+  word-wrap: break-word;
+  font-size: 0 ;
+}
+
+.emojisListHide {
+  display: none;
+}
+
+.emojisListSingle {
+  height: var(--emoji-singleList-size);
+  white-space: nowrap;
+  overflow-x: auto;
+}
+
+.emojisListMultiple {
+  height: var(--emoji-multipleList-size);
+  overflow-y: auto;
+}
+
+.groupName {
+  width: 100% ;
+  font-size: var(--emoji-groupName-size);
+  text-transform: capitalize;
+  color: var(--imlib_chat_components_emojiPopup_titleColor);
+  padding: var(--zd_size8) var(--zd_size10) ;
+  margin-bottom: var(--zd_size5) ;
+}
+
+.groupContainer {
+  font-size: 0 ;
+}
+.groupSeperate {
+  display: inline-block;
+}
+
+.groupAll {
+  display: inline;
+}

package/es/EmojisList/css/cssJSLogic.js

@@ -0,0 +1,25 @@
+/** ** Methods *** */
+import compileClassNames from '@zohodesk/utils/es/compileClassNames';
+export default function cssJSLogic(props, style) {
+  const {
+    rowType,
+    isShowGroupBasedList,
+    isShowOnlyContent,
+    isEmpty
+  } = props;
+  const emojisListClass = compileClassNames({
+    [style.emojisList]: true,
+    [style.emojisListSingle]: rowType === 'single',
+    [style.emojisListMultiple]: rowType === 'multiple',
+    [style.emojisListHide]: isShowOnlyContent ? isEmpty : false
+  });
+  const groupClass = compileClassNames({
+    [style.groupContainer]: true,
+    [style.groupSeperate]: !!isShowGroupBasedList,
+    [style.groupAll]: !isShowGroupBasedList
+  });
+  return {
+    emojisListClass,
+    groupClass
+  };
+}

package/es/EmojisList/index.js

@@ -0,0 +1 @@
+export { default as EmojisList } from "./EmojisList";

package/es/EmojisList/props/defaultProps.js

@@ -0,0 +1,10 @@
+/** ** Constants *** */
+import { dummyObject } from '@zohoim/chat-components-utils/es/constants';
+const emojisListDefaultProps = {
+  customStyle: dummyObject,
+  customProps: dummyObject,
+  rowType: 'multiple',
+  isShowGroupBasedList: true,
+  isShowOnlyContent: false
+};
+export default emojisListDefaultProps;

package/es/EmojisList/props/propTypes.js

@@ -0,0 +1,20 @@
+/** ** Libraries *** */
+import PropTypes from 'prop-types';
+const emojisListPropTypes = {
+  emojisList: PropTypes.object.isRequired,
+  customProps: PropTypes.shape({
+    emojiProps: PropTypes.object,
+    emojisEmptyStateProps: PropTypes.object
+  }),
+  customStyle: PropTypes.object,
+  getMethods: PropTypes.func,
+  isShowGroupBasedList: PropTypes.bool,
+  isShowOnlyContent: PropTypes.bool,
+  onChangeGroup: PropTypes.func,
+  onSelect: PropTypes.func,
+  renderEmpty: PropTypes.func,
+  rowType: PropTypes.oneOf(['single', 'multiple']),
+  searchString: PropTypes.string,
+  selectedGroup: PropTypes.string
+};
+export default emojisListPropTypes;

package/es/Message/Message.js

@@ -1,5 +1,5 @@
 /** ** Libraries *** */
-import React, { useState, useCallback } from 'react';
+import React, { useCallback } from 'react';
 /** ** Constants *** */
 
 import messageDefaultProps from "./props/defaultProps";
@@ -35,10 +35,6 @@ export default function Message(props) {
     renderContent,
     customProps
   } = props;
-  const [retainMessageActions, _setRetainMessageActions] = useState(false);
-  const setRetainMessageActions = useCallback(retain => {
-    _setRetainMessageActions(retain);
-  }, []);
   const {
     messageBubbleProps = dummyObject,
     messageOwnerProps = dummyObject,
@@ -115,8 +111,7 @@ export default function Message(props) {
       actions,
       onSelect: onSelectAction,
       renderSecondaryActions,
-      onMouseEnter: onMouseEnterAction,
-      setRetainMessageActions
+      onMouseEnter: onMouseEnterAction
     };
     return /*#__PURE__*/React.createElement(MessageActions, { ...props,
       ...messageActionsProps
@@ -130,7 +125,6 @@ export default function Message(props) {
     renderMessageActions: handleRenderMessageActions,
     renderMessageBox: handleRenderMessageBox,
     renderMessageOwner: handleRenderMessageOwner,
-    retainMessageActions: retainMessageActions,
     ...messageBubbleProps
   });
 }

package/es/MessageActions/MessageActions.js

@@ -26,7 +26,6 @@ export default function MessageActions(props) {
     defaultShowCount,
     onSelect,
     onMouseEnter,
-    setRetainMessageActions,
     renderSecondaryActions,
     customStyle,
     customProps
@@ -113,7 +112,6 @@ export default function MessageActions(props) {
     actions: allActions,
     defaultShowCount: defaultShowCount,
     renderMoreIcon: renderMore,
-    setRetainMessageActions: setRetainMessageActions,
     ...messageActionsWrapperProps
   }), secondaryActions ? /*#__PURE__*/React.createElement("div", {
     className: newStyle.secondaryActions

package/es/MessageActions/props/propTypes.js

@@ -20,7 +20,6 @@ const messageActionsPropTypes = {
   }),
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
-  renderSecondaryActions: PropTypes.func,
-  setRetainMessageActions: PropTypes.func
+  renderSecondaryActions: PropTypes.func
 };
 export default messageActionsPropTypes;

package/es/MessageActionsMore/MessageActionsMore.js

@@ -2,8 +2,8 @@
 import React, { useCallback, useMemo } from 'react';
 /** ** Components *** */
 
-import Popup from '@zohodesk/components/lib/Popup/Popup';
-import DropBox from '@zohodesk/components/lib/DropBox/DropBox';
+import Popup from '@zohodesk/components/es/Popup/Popup';
+import DropBox from '@zohodesk/components/es/DropBox/DropBox';
 /** ** Constants *** */
 
 import messageActionsMoreDefaultProps from "./props/defaultProps";
@@ -25,7 +25,6 @@ function MessageActionsMoreComp(props) {
     actions,
     renderMoreIcon,
     customStyle,
-    setRetainMessageActions,
     popupSize,
     defaultPopupPosition,
 
@@ -67,10 +66,9 @@ function MessageActionsMoreComp(props) {
       id,
       isShowInMore: true,
       action,
-      setRetainMessageActions,
       closePopup: closePopupOnly
     }); // id, isRenderInMorePopup
-  }), [actions, closePopupOnly, setRetainMessageActions]);
+  }), [actions, closePopupOnly]);
   const isRenderPopup = !!(moreIcon && isPopupOpen);
   return /*#__PURE__*/React.createElement("span", {
     className: newStyle.morePopupContainer

package/es/MessageActionsMore/props/propTypes.js

@@ -1,14 +1,16 @@
 /** ** Libraries *** */
 import PropTypes from 'prop-types';
+/** ** Constants *** */
+
+import { popupPosition, popupSize } from "../../constants/propConstants/popupPropConstants";
 const messageActionsMorePropTypes = {
   actions: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.string.isRequired,
     renderFunction: PropTypes.func
   })).isRequired,
   renderMoreIcon: PropTypes.func.isRequired,
-  setRetainMessageActions: PropTypes.func,
   customStyle: PropTypes.object,
-  popupSize: PropTypes.oneOf(['mini', 'xmini', 'xsmall', 'small', 'medium', 'large', 'mlarge', 'xlarge', 'xxlarge', 'default']),
-  defaultPopupPosition: PropTypes.oneOf([['bottomCenter', 'bottomLeftToRight', 'bottomCenterToRight', 'bottomRightToLeft', 'bottomCenterToLeft', 'topCenter', 'topLeftToRight', 'topCenterToRight', 'topRightToLeft', 'topCenterToLeft', 'rightTopToBottom', 'rightCenterToBottom', 'rightCenter', 'rightBottomToTop', 'rightCenterToTop', 'leftTopToBottom', 'leftCenterToBottom', 'leftCenter', 'leftBottomToTop', 'leftCenterToTop', 'bottomRight', 'bottomLeft', 'topRight', 'topLeft', 'rightBottom', 'rightTop', 'leftBottom', 'leftTop']])
+  popupSize: PropTypes.oneOf(popupSize),
+  defaultPopupPosition: PropTypes.oneOf(popupPosition)
 };
 export default messageActionsMorePropTypes;

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -2,7 +2,7 @@
 import React, { useCallback } from 'react';
 /** ** Components *** */
 
-import { Container } from '@zohodesk/components/lib/Layout';
+import { Container } from '@zohodesk/components/es/Layout';
 import MessageActionsMore from "../MessageActionsMore/MessageActionsMore";
 /** ** Hooks *** */
 
@@ -25,8 +25,7 @@ export default function MessageActionsWrapper(props) {
     renderMoreIcon,
     defaultShowCount,
     customStyle,
-    customProps,
-    setRetainMessageActions
+    customProps
   } = props;
   const {
     messageActionsMoreProps = dummyObject
@@ -47,16 +46,14 @@ export default function MessageActionsWrapper(props) {
     return renderHandler(renderFunction)({
       id,
       isShowInMore: false,
-      setRetainMessageActions,
       action
     }); // id, isRenderInMorePopup
-  }), [defaultActions, setRetainMessageActions]);
+  }), [defaultActions]);
   const renderMoreActions = useCallback(() => /*#__PURE__*/React.createElement(MessageActionsMore, {
     actions: moreActions,
     renderMoreIcon: renderMoreIcon,
-    setRetainMessageActions: setRetainMessageActions,
     ...messageActionsMoreProps
-  }), [moreActions, renderMoreIcon, messageActionsMoreProps, setRetainMessageActions]);
+  }), [moreActions, renderMoreIcon, messageActionsMoreProps]);
   const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
     className: newStyle.row,

package/es/MessageActionsWrapper/props/propTypes.js

@@ -10,7 +10,6 @@ const messageActionsWrapperPropTypes = {
   }),
   customStyle: PropTypes.object,
   defaultShowCount: PropTypes.number,
-  renderMoreIcon: PropTypes.func,
-  setRetainMessageActions: PropTypes.func
+  renderMoreIcon: PropTypes.func
 };
 export default messageActionsWrapperPropTypes;