@zohodesk/components 1.1.0 → 1.2.0-temp-195

package/es/MultiSelect/props/propTypes.js

@@ -1,143 +1,4 @@
 import PropTypes from 'prop-types';
-export const AdvancedGroupMultiSelect_propTypes = {
-  animationStyle: PropTypes.string,
-  autoComplete: PropTypes.bool,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  customClass: PropTypes.string,
-  dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  emptyMessage: PropTypes.string.isRequired,
-  getContainerRef: PropTypes.func,
-  getFooter: PropTypes.func,
-  groupedOptions: PropTypes.array.isRequired,
-  i18nKeys: PropTypes.shape({
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    clearLabel: PropTypes.string
-  }),
-  isDataLoaded: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isPadding: PropTypes.bool,
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  needBorder: PropTypes.bool,
-  needResponsive: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
-  notifyPopupToggle: PropTypes.func,
-  onFocus: PropTypes.func,
-  onKeyDown: PropTypes.func,
-  onSearch: PropTypes.func,
-  placeHolder: PropTypes.string,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  searchDebounceTime: PropTypes.number,
-  searchEmptyMessage: PropTypes.string,
-  selectAllText: PropTypes.string,
-  selectedGroupOptions: PropTypes.array.isRequired,
-  selectedOptionDetails: PropTypes.object,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  title: PropTypes.string,
-  variant: PropTypes.string,
-  htmlId: PropTypes.string,
-  isSearchClearOnSelect: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark']),
-  needEffect: true,
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
-};
-export const AdvancedMultiSelect_propTypes = {
-  id: PropTypes.string.isRequired,
-  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
-    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-    photoURL: PropTypes.string
-  }))]).isRequired,
-  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
-  getNextOptions: PropTypes.func,
-  selectedOptionsLimit: PropTypes.number,
-  getSelectedOptionDetails: PropTypes.func,
-  emptyMessage: PropTypes.string.isRequired,
-  getRef: PropTypes.func,
-  searchDebounceTime: PropTypes.number,
-  isNextOptions: PropTypes.bool,
-  isDisabled: PropTypes.bool,
-  isReadOnly: PropTypes.bool,
-  needLocalSearch: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
-  onChange: PropTypes.func.isRequired,
-  onDropBoxClose: PropTypes.func,
-  onDropBoxOpen: PropTypes.func,
-  onSearch: PropTypes.func,
-  searchEmptyMessage: PropTypes.string,
-  placeHolder: PropTypes.string,
-  selectAllText: PropTypes.string,
-  textField: PropTypes.string,
-  valueField: PropTypes.string,
-  imageField: PropTypes.string,
-  iconName: PropTypes.string,
-  prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  //For grouping multiSelect
-  getPublicMethods: PropTypes.func,
-  optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
-  needEffect: PropTypes.bool,
-  animationStyle: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  isAnimate: PropTypes.bool,
-  onFocus: PropTypes.func,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  title: PropTypes.string,
-  variant: PropTypes.string,
-  dataIdClearIcon: PropTypes.string,
-  dataIdLoading: PropTypes.string,
-  dataIdMultiSelectComp: PropTypes.string,
-  dataIdNoMreOptionMsg: PropTypes.string,
-  dataIdSelectAllEle: PropTypes.string,
-  isSearchClearOnClose: PropTypes.bool,
-
-  /**** Popup Props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
-  getTargetRef: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  closePopupOnly: PropTypes.func,
-  position: PropTypes.string,
-  removeClose: PropTypes.func,
-  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
-  needBorder: PropTypes.bool,
-  htmlId: PropTypes.string,
-  i18nKeys: PropTypes.shape({
-    clearText: PropTypes.string,
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    clearLabel: PropTypes.string
-  }),
-  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
-  isBoxPaddingNeed: PropTypes.bool,
-  isSearchClearOnSelect: PropTypes.bool,
-  disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  getFooter: PropTypes.func,
-  customProps: PropTypes.shape({
-    SuggestionsProps: PropTypes.object,
-    DropBoxProps: PropTypes.object
-  }),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
-};
 export const EmptyState_propTypes = {
   dataId: PropTypes.string,
   emptyMessage: PropTypes.string,
@@ -166,7 +27,7 @@ export const MultiSelect_propTypes = {
   borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
   closePopupOnly: PropTypes.func,
   dataId: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
   disableAction: PropTypes.bool,
   dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   emptyMessage: PropTypes.string.isRequired,
@@ -199,7 +60,6 @@ export const MultiSelect_propTypes = {
   needBorder: PropTypes.bool,
   needLocalSearch: PropTypes.bool,
   needResponsive: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
   needToCloseOnSelect: PropTypes.bool,
   //For Group multiSelect
   noMoreOptionsMessage: PropTypes.string,
@@ -221,7 +81,6 @@ export const MultiSelect_propTypes = {
   removeClose: PropTypes.func,
   searchDebounceTime: PropTypes.number,
   searchEmptyMessage: PropTypes.string,
-  selectAllText: PropTypes.string,
   selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
   size: PropTypes.oneOf(['medium', 'xmedium']),
   textBoxClass: PropTypes.string,
@@ -241,92 +100,30 @@ export const MultiSelect_propTypes = {
   boxSize: PropTypes.string,
   isLoading: PropTypes.bool,
   dataSelectorId: PropTypes.string,
-  keepSelectedOptions: PropTypes.bool
+  keepSelectedOptions: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  selectAllText: PropTypes.string,
+  setAriaId: PropTypes.string,
+  ariaErrorId: PropTypes.string
 };
 export const MultiSelectHeader_propTypes = {
   dataId: PropTypes.string,
-  needSelectAll: PropTypes.bool,
   onSelect: PropTypes.func,
   selectAllText: PropTypes.string,
   suggestions: PropTypes.array
 };
 export const MultiSelectWithAvatar_propTypes = {
-  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
   options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
     photoURL: PropTypes.string
   }))]).isRequired,
-  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
-  placeHolder: PropTypes.string,
-  onChange: PropTypes.func.isRequired,
-  emptyMessage: PropTypes.string.isRequired,
-  valueField: PropTypes.string,
-  textField: PropTypes.string,
   imageField: PropTypes.string,
-  isReadOnly: PropTypes.bool,
-  needSelectAll: PropTypes.bool,
-  selectAllText: PropTypes.string,
-  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
-  onDropBoxOpen: PropTypes.func,
-  onDropBoxClose: PropTypes.func,
-  onSearch: PropTypes.func,
-  searchDebounceTime: PropTypes.number,
-  isNextOptions: PropTypes.bool,
-  getNextOptions: PropTypes.func,
-  needLocalSearch: PropTypes.bool,
-  searchEmptyMessage: PropTypes.string,
-  noMoreOptionsMessage: PropTypes.string,
-  getRef: PropTypes.func,
-  isAnimate: PropTypes.bool,
-  animationStyle: PropTypes.string,
-  size: PropTypes.oneOf(['medium', 'xmedium']),
-  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
-  variant: PropTypes.string,
-  isDisabled: PropTypes.bool,
-  title: PropTypes.string,
-  needResponsive: PropTypes.bool,
-  dataId: PropTypes.string,
-  borderColor: PropTypes.oneOf(['transparent', 'default']),
-  textBoxClass: PropTypes.string,
-  needBorder: PropTypes.bool,
-  disableAction: PropTypes.bool,
-  isSearchClearOnClose: PropTypes.bool,
-  palette: PropTypes.oneOf(['default', 'dark']),
-  htmlId: PropTypes.string,
-  isBoxPaddingNeed: PropTypes.bool,
-  needEffect: PropTypes.bool,
-  keepSelectedOptions: PropTypes.bool,
   customProps: PropTypes.shape({
     SuggestionsProps: PropTypes.object,
     DropBoxProps: PropTypes.object
   }),
-
-  /**** Popup props ****/
-  isPopupOpen: PropTypes.bool,
-  isPopupReady: PropTypes.bool,
-  togglePopup: PropTypes.func,
-  removeClose: PropTypes.func,
-  closePopupOnly: PropTypes.func,
-  position: PropTypes.string,
-  getTargetRef: PropTypes.func,
-  getContainerRef: PropTypes.func,
-  i18nKeys: PropTypes.shape({
-    clearText: PropTypes.string,
-    loadingText: PropTypes.string,
-    emptyText: PropTypes.string,
-    noMoreText: PropTypes.string,
-    searchEmptyText: PropTypes.string
-  }),
-  a11y: PropTypes.shape({
-    clearLabel: PropTypes.string
-  }),
-  children: PropTypes.node,
-  customChildrenClass: PropTypes.string,
-  isSearchClearOnSelect: PropTypes.bool,
-  disabledOptions: PropTypes.arrayOf(PropTypes.string),
-  isLoading: PropTypes.bool,
-  dataSelectorId: PropTypes.string
+  ...MultiSelect_propTypes
 };
 export const SelectedOptions_propTypes = {
   getRef: PropTypes.func,
@@ -341,7 +138,8 @@ export const SelectedOptions_propTypes = {
     logo: PropTypes.string,
     optionType: PropTypes.string
   })),
-  size: PropTypes.oneOf(['medium', 'xmedium'])
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  palette: PropTypes.string
 };
 export const Suggestions_propTypes = {
   a11y: PropTypes.shape({
@@ -371,4 +169,144 @@ export const Suggestions_propTypes = {
     optionType: PropTypes.string,
     listItemProps: PropTypes.object
   }))
+};
+export const AdvancedGroupMultiSelect_propTypes = {
+  animationStyle: PropTypes.string,
+  autoComplete: PropTypes.bool,
+  borderColor: PropTypes.oneOf(['transparent', 'default']),
+  customClass: PropTypes.string,
+  dataId: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  emptyMessage: PropTypes.string.isRequired,
+  getContainerRef: PropTypes.func,
+  getFooter: PropTypes.func,
+  groupedOptions: PropTypes.array.isRequired,
+  i18nKeys: PropTypes.shape({
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  isDataLoaded: PropTypes.bool,
+  isDisabled: PropTypes.bool,
+  isPadding: PropTypes.bool,
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  needResponsive: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  notifyPopupToggle: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  onSearch: PropTypes.func,
+  placeHolder: PropTypes.string,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  searchDebounceTime: PropTypes.number,
+  searchEmptyMessage: PropTypes.string,
+  selectAllText: PropTypes.string,
+  selectedGroupOptions: PropTypes.array.isRequired,
+  selectedOptionDetails: PropTypes.object,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  htmlId: PropTypes.string,
+  isSearchClearOnSelect: PropTypes.bool,
+  palette: PropTypes.oneOf(['default', 'dark']),
+  needEffect: true,
+  dataSelectorId: PropTypes.string,
+  valueField: PropTypes.string,
+  textField: PropTypes.string,
+  getTargetRef: PropTypes.func,
+  togglePopup: PropTypes.func,
+  needLocalSearch: PropTypes.bool,
+  isNextOptions: PropTypes.bool,
+  getNextOptions: PropTypes.func,
+  isPopupOpenOnEnter: PropTypes.bool,
+  onChange: PropTypes.func,
+  needToCloseOnSelect: PropTypes.func,
+  searchStr: PropTypes.string,
+  children: PropTypes.node,
+  dataSelectorId: PropTypes.string
+};
+export const AdvancedMultiSelect_propTypes = { ...MultiSelect_propTypes,
+  selectedOptionDetails: PropTypes.string,
+  iconSize: PropTypes.string,
+  id: PropTypes.string.isRequired,
+  options: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])), PropTypes.arrayOf(PropTypes.shape({
+    id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    text: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+    photoURL: PropTypes.string
+  }))]).isRequired,
+  selectedOptions: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.number])).isRequired,
+  selectedOptionsLimit: PropTypes.number,
+  getSelectedOptionDetails: PropTypes.func,
+  emptyMessage: PropTypes.string.isRequired,
+  isDisabled: PropTypes.bool,
+  isReadOnly: PropTypes.bool,
+  needLocalSearch: PropTypes.bool,
+  needSelectAll: PropTypes.bool,
+  onChange: PropTypes.func.isRequired,
+  searchEmptyMessage: PropTypes.string,
+  placeHolder: PropTypes.string,
+  selectAllText: PropTypes.string,
+  textField: PropTypes.string,
+  valueField: PropTypes.string,
+  imageField: PropTypes.string,
+  iconName: PropTypes.string,
+  prefixText: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  //For grouping multiSelect
+  optionType: PropTypes.oneOf(['default', 'avatar', 'icon']),
+  needEffect: PropTypes.bool,
+  animationStyle: PropTypes.string,
+  defaultDropBoxPosition: PropTypes.oneOf(['bottom', 'top', 'left', 'right']),
+  dropBoxSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  isAnimate: PropTypes.bool,
+  size: PropTypes.oneOf(['medium', 'xmedium']),
+  textBoxSize: PropTypes.oneOf(['small', 'medium', 'xmedium']),
+  title: PropTypes.string,
+  variant: PropTypes.string,
+  dataIdClearIcon: PropTypes.string,
+  dataIdLoading: PropTypes.string,
+  dataIdMultiSelectComp: PropTypes.string,
+  dataIdSelectAllEle: PropTypes.string,
+
+  /**** Popup Props ****/
+  isPopupOpen: PropTypes.bool,
+  isPopupReady: PropTypes.bool,
+  togglePopup: PropTypes.func,
+  getContainerRef: PropTypes.func,
+  position: PropTypes.string,
+  removeClose: PropTypes.func,
+  listItemSize: PropTypes.oneOf(['small', 'medium', 'large']),
+  needBorder: PropTypes.bool,
+  htmlId: PropTypes.string,
+  i18nKeys: PropTypes.shape({
+    clearText: PropTypes.string,
+    loadingText: PropTypes.string,
+    emptyText: PropTypes.string,
+    noMoreText: PropTypes.string,
+    searchEmptyText: PropTypes.string
+  }),
+  a11y: PropTypes.shape({
+    clearLabel: PropTypes.string
+  }),
+  borderColor: PropTypes.oneOf(['transparent', 'default', 'dark']),
+  isBoxPaddingNeed: PropTypes.bool,
+  isSearchClearOnSelect: PropTypes.bool,
+  disabledOptions: PropTypes.arrayOf(PropTypes.string),
+  getFooter: PropTypes.func,
+  customProps: PropTypes.shape({
+    SuggestionsProps: PropTypes.object,
+    DropBoxProps: PropTypes.object
+  }),
+  isLoading: PropTypes.bool,
+  dataSelectorId: PropTypes.string
 };

package/es/PopOver/PopOver.js

@@ -109,15 +109,7 @@ class PopOver extends React.Component {
 }
 
 PopOver.defaultProps = PopOver_defaultProps;
-PopOver.propTypes = PopOver_propTypes; // if (__DOCS__) {
-//   PopOver.docs = {
-//     componentGroup: 'Form Elements',
-//     folderName: 'Style Guide',
-//     description: ' ',
-//     external: true
-//   };
-// }
-
+PopOver.propTypes = PopOver_propTypes;
 export default Popup(PopOver);
 export class PopOverTarget extends React.Component {
   constructor(props) {

package/es/PopOver/PopOver.module.css

@@ -1,8 +1,9 @@
-.popup {
-  position: relative;
-  background-color: var(--dot_white);
-}
-.target {
-  composes: offSelection from '../common/common.module.css';
-  cursor: pointer;
-}
+.popup {
+  position: relative;
+  background-color: var(--zdt_popover_default_bg);
+}
+
+.target {
+  composes: offSelection from '../common/common.module.css';
+  cursor: pointer;
+}

package/es/Popup/Popup.js

@@ -1,5 +1,3 @@
-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); }
-
 /**** Libraries ****/
 import React from 'react';
 import PropTypes from 'prop-types';
@@ -623,14 +621,15 @@ const Popup = function (Component) {
         isPopupOpen
       } = this.state;
       const localState = isPopupReady ? this.state : {};
-      return /*#__PURE__*/React.createElement(Component, _extends({}, this.props, this.state, {
+      return /*#__PURE__*/React.createElement(Component, { ...this.props,
+        ...this.state,
         openPopupOnly: this.openPopupOnly,
         closePopupOnly: this.closePopupOnly,
         togglePopup: this.togglePopup,
         removeClose: this.removeClose,
         getTargetRef: this.getTargetRef,
         getContainerRef: this.getContainerRef
-      }));
+      });
     }
 
   }

package/es/Popup/PositionMapping.json

@@ -1,74 +1,74 @@
-{ 
-    "absolutePositionMapping" : {
-        "bottomCenter": "bottomCenter",
-        "bottomRight": "bottomLeftToRight",
-        "bottomLeft": "bottomRightToLeft",
-        "topCenter": "topCenter",
-        "topRight": "topLeftToRight",
-        "topLeft": "topRightToLeft",
-        "rightCenter": "rightCenter",
-        "rightBottom": "rightTopToBottom",
-        "rightTop": "rightBottomToTop",
-        "leftCenter": "leftCenter",
-        "leftBottom": "leftTopToBottom",
-        "leftTop": "leftBottomToTop",
-        "bottomLeftToRight": "bottomLeftToRight",
-        "bottomRightToLeft": "bottomRightToLeft",
-        "topLeftToRight": "topLeftToRight",
-        "topRightToLeft": "topRightToLeft",
-        "rightTopToBottom": "rightTopToBottom",
-        "rightBottomToTop": "rightBottomToTop",
-        "leftTopToBottom": "leftTopToBottom"
-    },
-    "rtlAbsolutePositionMapping" : {
-        "bottomCenter": "bottomCenter",
-        "bottomRight": "bottomRightToLeft",
-        "bottomLeft": "bottomLeftToRight",
-        "topCenter": "topCenter",
-        "topRight": "topRightToLeft",
-        "topLeft": "topLeftToRight",
-        "rightCenter": "leftCenter",
-        "rightBottom": "leftTopToBottom",
-        "rightTop": "leftBottomToTop",
-        "leftCenter": "rightCenter",
-        "leftBottom": "rightTopToBottom",
-        "leftTop": "rightBottomToTop",
-        "bottomLeftToRight": "bottomLeftToRight",
-        "bottomRightToLeft": "bottomRightToLeft",
-        "topLeftToRight": "topLeftToRight",
-        "topRightToLeft": "topRightToLeft",
-        "rightTopToBottom": "rightTopToBottom",
-        "rightBottomToTop": "rightBottomToTop",
-        "leftTopToBottom": "leftTopToBottom"
-    },
-    "rtlFixedPositionMapping": {
-        "bottomCenter":"bottomCenter",
-        "bottomLeftToRight": "bottomRightToLeft",
-        "bottomCenterToRight": "bottomCenterToLeft",
-        "bottomRightToLeft": "bottomLeftToRight",
-        "bottomCenterToLeft": "bottomCenterToRight",
-        "topCenter": "topCenter",
-        "topLeftToRight": "topRightToLeft",
-        "topCenterToRight": "topCenterToLeft",
-        "topRightToLeft": "topLeftToRight",
-        "topCenterToLeft": "topCenterToRight",
-        "rightTopToBottom": "leftTopToBottom",
-        "rightCenterToBottom": "leftCenterToBottom",
-        "rightCenter": "leftCenter",
-        "rightBottomToTop": "leftBottomToTop",
-        "rightCenterToTop": "leftCenterToTop",
-        "leftTopToBottom": "rightTopToBottom",
-        "leftCenterToBottom": "rightCenterToBottom",
-        "leftCenter": "rightCenter",
-        "leftBottomToTop": "rightBottomToTop",
-        "leftCenterToTop": "rightCenterToTop",
-        "bottomRight": "bottomLeft",
-        "bottomLeft": "bottomRight",
-        "topRight": "topLeft",
-        "topLeft": "topRight",
-        "rightBottom": "leftBottom",
-        "rightTop": "leftTop",
-        "leftBottom": "rightBottom",
-        "leftTop": "rightTop"      
-    }
+{ 
+    "absolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomLeftToRight",
+        "bottomLeft": "bottomRightToLeft",
+        "topCenter": "topCenter",
+        "topRight": "topLeftToRight",
+        "topLeft": "topRightToLeft",
+        "rightCenter": "rightCenter",
+        "rightBottom": "rightTopToBottom",
+        "rightTop": "rightBottomToTop",
+        "leftCenter": "leftCenter",
+        "leftBottom": "leftTopToBottom",
+        "leftTop": "leftBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlAbsolutePositionMapping" : {
+        "bottomCenter": "bottomCenter",
+        "bottomRight": "bottomRightToLeft",
+        "bottomLeft": "bottomLeftToRight",
+        "topCenter": "topCenter",
+        "topRight": "topRightToLeft",
+        "topLeft": "topLeftToRight",
+        "rightCenter": "leftCenter",
+        "rightBottom": "leftTopToBottom",
+        "rightTop": "leftBottomToTop",
+        "leftCenter": "rightCenter",
+        "leftBottom": "rightTopToBottom",
+        "leftTop": "rightBottomToTop",
+        "bottomLeftToRight": "bottomLeftToRight",
+        "bottomRightToLeft": "bottomRightToLeft",
+        "topLeftToRight": "topLeftToRight",
+        "topRightToLeft": "topRightToLeft",
+        "rightTopToBottom": "rightTopToBottom",
+        "rightBottomToTop": "rightBottomToTop",
+        "leftTopToBottom": "leftTopToBottom"
+    },
+    "rtlFixedPositionMapping": {
+        "bottomCenter":"bottomCenter",
+        "bottomLeftToRight": "bottomRightToLeft",
+        "bottomCenterToRight": "bottomCenterToLeft",
+        "bottomRightToLeft": "bottomLeftToRight",
+        "bottomCenterToLeft": "bottomCenterToRight",
+        "topCenter": "topCenter",
+        "topLeftToRight": "topRightToLeft",
+        "topCenterToRight": "topCenterToLeft",
+        "topRightToLeft": "topLeftToRight",
+        "topCenterToLeft": "topCenterToRight",
+        "rightTopToBottom": "leftTopToBottom",
+        "rightCenterToBottom": "leftCenterToBottom",
+        "rightCenter": "leftCenter",
+        "rightBottomToTop": "leftBottomToTop",
+        "rightCenterToTop": "leftCenterToTop",
+        "leftTopToBottom": "rightTopToBottom",
+        "leftCenterToBottom": "rightCenterToBottom",
+        "leftCenter": "rightCenter",
+        "leftBottomToTop": "rightBottomToTop",
+        "leftCenterToTop": "rightCenterToTop",
+        "bottomRight": "bottomLeft",
+        "bottomLeft": "bottomRight",
+        "topRight": "topLeft",
+        "topLeft": "topRight",
+        "rightBottom": "leftBottom",
+        "rightTop": "leftTop",
+        "leftBottom": "rightBottom",
+        "leftTop": "rightTop"      
+    }
 }