@zohodesk/components 1.2.36 → 1.2.38

package/es/v1/Select/props/defaultProps.js

@@ -1,4 +1,4 @@
-import { getLibraryConfig } from '../../../Provider/Config';
+import { getLibraryConfig } from "../../../Provider/Config";
 export const Select_defaultProps = {
   animationStyle: 'bounce',
   autoComplete: getLibraryConfig('autoComplete'),

package/es/v1/Stencils/Stencils.js

@@ -1,7 +1,7 @@
 import React, { memo } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../Stencils/Stencils.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../Stencils/Stencils.module.css";
 
 function Stencils(props) {
   let {

package/es/v1/Switch/Switch.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { Container, Box } from '../Layout';
-import Label from '../Label/Label';
-import style from '../../Switch/Switch.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { Container, Box } from "../Layout";
+import Label from "../Label/Label";
+import style from "../../Switch/Switch.module.css";
 
 const Switch = props => {
   let {

package/es/v1/Tab/Tab.js

@@ -1,9 +1,9 @@
 import React, { useMemo, useCallback } from 'react';
-import { Tab_defaultProps } from './props/defaultProps';
-import { Tab_propTypes } from './props/propTypes';
-import { Box, Container } from '../Layout';
-import { cs } from '../../utils/Common';
-import styles from './v1Tab.module.css';
+import { Tab_defaultProps } from "./props/defaultProps";
+import { Tab_propTypes } from "./props/propTypes";
+import { Box, Container } from "../Layout";
+import { cs } from "../../utils/Common";
+import styles from "./v1Tab.module.css";
 const tabTypes = {
   alpha: {
     active: 'alphaActive',

package/es/v1/Tab/TabContent.js

@@ -1,8 +1,8 @@
 import React from 'react';
-import { TabContent_defaultProps } from './props/defaultProps';
-import { TabContent_propTypes } from './props/propTypes';
-import { Container } from '../Layout';
-import style from './v1TabContent.module.css';
+import { TabContent_defaultProps } from "./props/defaultProps";
+import { TabContent_propTypes } from "./props/propTypes";
+import { Container } from "../Layout";
+import style from "./v1TabContent.module.css";
 /* eslint-disable react/forbid-component-props */
 
 const TabContent = _ref => {

package/es/v1/Tab/TabContentWrapper.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { TabContentWrapper_defaultProps } from './props/defaultProps';
-import { TabContentWrapper_propTypes } from './props/propTypes';
-import { Box } from '../Layout';
+import { TabContentWrapper_defaultProps } from "./props/defaultProps";
+import { TabContentWrapper_propTypes } from "./props/propTypes";
+import { Box } from "../Layout";
 /* eslint-disable react/forbid-component-props */
 
 const TabContentWrapper = _ref => {

package/es/v1/Tab/TabWrapper.js

@@ -1,7 +1,7 @@
 import React, { useState, useCallback } from 'react';
-import { TabWrapper_defaultProps } from './props/defaultProps';
-import { TabWrapper_propTypes } from './props/propTypes';
-import { Container } from '../Layout';
+import { TabWrapper_defaultProps } from "./props/defaultProps";
+import { TabWrapper_propTypes } from "./props/propTypes";
+import { Container } from "../Layout";
 
 function TabWrapper(_ref) {
   let {

package/es/v1/Tab/Tabs.js

@@ -1,18 +1,18 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import useEffectCallOnlyAfterState from '@zohodesk/hooks/es/utils/useEffectCallOnlyAfterState';
-import Tab from './Tab';
-import { Tabs_defaultProps } from './props/defaultProps';
-import { Tabs_propTypes } from './props/propTypes';
-import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from '../../utils/Common';
-import { Box, Container } from '../Layout';
-import ResizeObserver from '../../Responsive/ResizeObserver';
-import ListItem from '../ListItem/ListItem';
+import Tab from "./Tab";
+import { Tabs_defaultProps } from "./props/defaultProps";
+import { Tabs_propTypes } from "./props/propTypes";
+import { remConvert, getTotalDimension, cs, throttle, cancelBubblingEffect } from "../../utils/Common";
+import { Box, Container } from "../Layout";
+import ResizeObserver from "../../Responsive/ResizeObserver";
+import ListItem from "../ListItem/ListItem";
 import { Icon } from '@zohodesk/icons';
-import tabsStyle from './v1Tabs.module.css';
-import Popup from '../Popup/Popup';
-import ResponsiveDropBox from '../ResponsiveDropBox/ResponsiveDropBox';
-import { ResponsiveReceiver } from '../../Responsive/CustomResponsive';
-import btnstyle from '../../semantic/Button/semanticButton.module.css';
+import tabsStyle from "./v1Tabs.module.css";
+import Popup from "../Popup/Popup";
+import ResponsiveDropBox from "../ResponsiveDropBox/ResponsiveDropBox";
+import { ResponsiveReceiver } from "../../Responsive/CustomResponsive";
+import btnstyle from "../../semantic/Button/semanticButton.module.css";
 
 const Tabs = props => {
   const [totalDimension, setTotalDimension] = useState(null);
@@ -368,7 +368,8 @@ const Tabs = props => {
       getTargetRef,
       position,
       customProps,
-      getCustomDropBoxHeaderPlaceHolder
+      getCustomDropBoxHeaderPlaceHolder,
+      dataId
     } = props;
     let {
       DropBoxProps = {},

package/es/v1/Tab/index.js

@@ -1,5 +1,5 @@
-export { default as TabWrapper } from './TabWrapper';
-export { default as TabContentWrapper } from './TabContentWrapper';
-export { default as TabContent } from './TabContent';
-export { default as Tabs } from './Tabs';
-export { default as Tab } from './Tab';
+export { default as TabWrapper } from "./TabWrapper";
+export { default as TabContentWrapper } from "./TabContentWrapper";
+export { default as TabContent } from "./TabContent";
+export { default as Tabs } from "./Tabs";
+export { default as Tab } from "./Tab";

package/es/v1/Tag/Tag.js

@@ -1,12 +1,12 @@
 import React, { memo } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { Icon } from '@zohodesk/icons';
-import Avatar from '../Avatar/Avatar';
-import { Container } from '../Layout';
-import Button from '../semantic/Button/Button';
-import { useUniqueId } from '../../Provider/IdProvider';
-import style from '../../Tag/Tag.module.css';
+import Avatar from "../Avatar/Avatar";
+import { Container } from "../Layout";
+import Button from "../semantic/Button/Button";
+import { useUniqueId } from "../../Provider/IdProvider";
+import style from "../../Tag/Tag.module.css";
 /*
  * eslint css-modules/no-unused-class: [2, { markAsUsed: ['small', 'medium',
  * 'closedanger', 'closeprimary', 'default', 'danger', 'secondary',

package/es/v1/TextBox/TextBox.js

@@ -1,7 +1,7 @@
 import React, { memo, useRef, useCallback } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../TextBox/TextBox.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../TextBox/TextBox.module.css";
 
 function TextBox(props) {
   let {

package/es/v1/TextBoxIcon/TextBoxIcon.js

@@ -1,11 +1,11 @@
 import React, { useState, useRef, useCallback } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import TextBox from '../TextBox/TextBox';
-import { Container, Box } from '../Layout';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import TextBox from "../TextBox/TextBox";
+import { Container, Box } from "../Layout";
 import { Icon } from '@zohodesk/icons';
-import btnStyle from '../../semantic/Button/semanticButton.module.css';
-import style from '../../TextBoxIcon/TextBoxIcon.module.css';
+import btnStyle from "../../semantic/Button/semanticButton.module.css";
+import style from "../../TextBoxIcon/TextBoxIcon.module.css";
 /* eslint-disable react/forbid-component-props */
 
 export default function TextBoxIcon(props) {

package/es/v1/TextBoxIcon/props/propTypes.js

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { propTypes as TextBox_propTypes } from '../../TextBox/props/propTypes';
+import { propTypes as TextBox_propTypes } from "../../TextBox/props/propTypes";
 export const propTypes = { ...TextBox_propTypes,
   borderColor: PropTypes.oneOf(['transparent', 'default', 'error']),
   children: PropTypes.node,

package/es/v1/Textarea/Textarea.js

@@ -1,7 +1,7 @@
 import React, { useRef } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../Textarea/Textarea.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../Textarea/Textarea.module.css";
 export default function Textarea(props) {
   let {
     size,

package/es/v1/Tooltip/Tooltip.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import { getLibraryConfig } from '../../Provider/Config';
-import style from '../../Tooltip/Tooltip.module.css';
-import ResizeObserver from '../../Responsive/ResizeObserver';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import { getLibraryConfig } from "../../Provider/Config";
+import style from "../../Tooltip/Tooltip.module.css";
+import ResizeObserver from "../../Responsive/ResizeObserver";
 import selectn from 'selectn';
 export default class Tooltip extends React.Component {
   constructor(props) {

package/es/v1/Typography/Typography.js

@@ -1,9 +1,9 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import cssJSLogic from './css/cssJSLogic';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import cssJSLogic from "./css/cssJSLogic";
 import { mergeStyle } from '@zohodesk/utils';
-import defaultStyle from './css/Typography.module.css';
+import defaultStyle from "./css/Typography.module.css";
 
 const Typography = props => {
   const {

package/es/v1/Typography/css/cssJSLogic.js

@@ -1,5 +1,5 @@
 import { compileClassNames } from '@zohodesk/utils';
-import { letterspacingMapping, lineheightMapping } from '../utils';
+import { letterspacingMapping, lineheightMapping } from "../utils";
 export default function cssJSLogic(_ref) {
   let {
     props,

package/es/v1/VelocityAnimation/VelocityAnimation/VelocityAnimation.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { VelocityComponent } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../../Provider/LibraryContextInit';
+import LibraryContext from "../../../Provider/LibraryContextInit";
 export default function VelocityAnimation(props) {
   let {
     children,

package/es/v1/VelocityAnimation/VelocityAnimationGroup/VelocityAnimationGroup.js

@@ -1,9 +1,9 @@
 import React, { useContext } from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
 import { VelocityTransitionGroup } from 'velocity-react';
 import 'velocity-animate/velocity.ui';
-import LibraryContext from '../../../Provider/LibraryContextInit';
+import LibraryContext from "../../../Provider/LibraryContextInit";
 
 function clearProps(props) {
   let newProps = Object.assign({}, props);

package/es/v1/semantic/Button/Button.js

@@ -1,7 +1,7 @@
 import React from 'react';
-import { defaultProps } from './props/defaultProps';
-import { propTypes } from './props/propTypes';
-import style from '../../../semantic/Button/semanticButton.module.css';
+import { defaultProps } from "./props/defaultProps";
+import { propTypes } from "./props/propTypes";
+import style from "../../../semantic/Button/semanticButton.module.css";
 export default function Button(props) {
   const {
     value,

package/es/v1/semantic/index.js

@@ -1 +1 @@
-export { default as SemanticButton } from './Button/Button';
+export { default as SemanticButton } from "./Button/Button";

package/lib/CheckBox/CheckBox.js

@@ -103,7 +103,8 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
           a11y = _this$props3.a11y,
           customClass = _this$props3.customClass,
           customProps = _this$props3.customProps,
-          dataSelectorId = _this$props3.dataSelectorId;
+          dataSelectorId = _this$props3.dataSelectorId,
+          renderRightPlaceholderNode = _this$props3.renderRightPlaceholderNode;
       var _customProps$CheckBox = customProps.CheckBoxProps,
           CheckBoxProps = _customProps$CheckBox === void 0 ? {} : _customProps$CheckBox,
           _customProps$LabelPro = customProps.LabelProps,
@@ -204,7 +205,7 @@ var CheckBox = /*#__PURE__*/function (_React$Component) {
         variant: variant,
         customClass: "".concat(active && !disabled ? "".concat(_CheckBoxModule["default"]["active".concat(palette, "Label")]) : '', "\n                            ").concat(checked && active ? "".concat(_CheckBoxModule["default"]["checked".concat(palette, "Label")]) : '', " \n                            ").concat(accessMode, " ").concat(customLabel),
         title: toolTip ? toolTip : text
-      }, LabelProps))));
+      }, LabelProps))), renderRightPlaceholderNode ? renderRightPlaceholderNode : null);
     }
   }]);
 

package/lib/CheckBox/props/propTypes.js

@@ -47,6 +47,7 @@ var propTypes = {
   customProps: _propTypes["default"].shape({
     CheckBoxProps: _propTypes["default"].object,
     LabelProps: _propTypes["default"].object
-  })
+  }),
+  renderRightPlaceholderNode: _propTypes["default"].node
 };
 exports.propTypes = propTypes;

package/lib/DateTime/DateWidget.js

@@ -47,6 +47,8 @@ var _constants = require("./constants");
 
 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -1035,7 +1037,9 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
       var _customProps$DateTime = customProps.DateTimeProps,
           DateTimeProps = _customProps$DateTime === void 0 ? {} : _customProps$DateTime,
           _customProps$TextBoxP = customProps.TextBoxProps,
-          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP;
+          TextBoxProps = _customProps$TextBoxP === void 0 ? {} : _customProps$TextBoxP,
+          _customProps$TextBoxI = customProps.TextBoxIconProps,
+          TextBoxIconProps = _customProps$TextBoxI === void 0 ? {} : _customProps$TextBoxI;
       var _this$state6 = this.state,
           _this$state6$selected = _this$state6.selected,
           value = _this$state6$selected === void 0 ? '' : _this$state6$selected,
@@ -1060,7 +1064,7 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         className: "".concat(className ? className : '', " ").concat(_DateWidgetModule["default"].textBox, " ").concat(isPopupOpen && !isDisabled ? _DateWidgetModule["default"].textBoxFocus : '', " ").concat(isDisabled ? _DateWidgetModule["default"].disabled : isReadOnly ? _DateWidgetModule["default"].readOnly : _DateWidgetModule["default"].enabled),
         onClick: !isAllowedDateType ? isDisabled || isReadOnly ? null : this.handleTogglePopup : null,
         ref: getTargetRef
-      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], {
+      }, /*#__PURE__*/_react["default"].createElement(_TextBoxIcon["default"], _extends({
         htmlId: htmlId,
         value: showValue ? showValue : placeholder,
         needBorder: needBorder,
@@ -1089,10 +1093,13 @@ var DateWidgetComponent = /*#__PURE__*/function (_React$Component) {
         autoComplete: false,
         a11y: a11y,
         customProps: TextBoxProps
-      }, /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+      }, TextBoxIconProps), /*#__PURE__*/_react["default"].createElement(_Layout.Container, {
+        isInline: true,
         align: "both",
+        isCover: false,
         onClick: isDisabled || isReadOnly ? null : this.handleDateIconClick,
-        dataId: "".concat(dataId, "_datePicker")
+        dataId: "".concat(dataId, "_datePicker"),
+        className: _DateWidgetModule["default"].datePickIcon
       }, /*#__PURE__*/_react["default"].createElement(_icons.Icon, {
         name: "ZD-datepicker",
         size: "12"

package/lib/DateTime/DateWidget.module.css

@@ -3,6 +3,7 @@
   position: relative;
   composes: offSelection from '../common/common.module.css';
 }
+.datePickIcon{height:100% }
 .readOnly, .readOnly > input, .disabled {
   cursor: not-allowed;
 }

package/lib/DateTime/__tests__/__snapshots__/DateTime.spec.js.snap

@@ -670,7 +670,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -770,7 +770,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"
@@ -870,7 +870,7 @@ exports[`DateTime rendering the isActive is true and isDefaultPosition is true 1
                         data-test-id="boxComponent"
                       >
                         <div
-                          class="flex cover rowdir both"
+                          class="rightPlaceholder inflex rowdir both"
                           data-id="containerComponent"
                           data-selector-id="container"
                           data-test-id="containerComponent"

package/lib/DateTime/__tests__/__snapshots__/DateWidget.spec.js.snap

@@ -52,7 +52,7 @@ exports[`DateWidget rendering the defult props 1`] = `
               data-test-id="boxComponent"
             >
               <div
-                class="flex cover coldir both"
+                class="datePickIcon inflex coldir both"
                 data-id="dateWidget_datePicker"
                 data-selector-id="container"
                 data-test-id="dateWidget_datePicker"

package/lib/DateTime/__tests__/__snapshots__/Time.spec.js.snap

@@ -77,7 +77,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -175,7 +175,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"
@@ -273,7 +273,7 @@ exports[`Time rendering the defult props 1`] = `
                   data-test-id="boxComponent"
                 >
                   <div
-                    class="flex cover rowdir both"
+                    class="rightPlaceholder inflex rowdir both"
                     data-id="containerComponent"
                     data-selector-id="container"
                     data-test-id="containerComponent"

package/lib/DropBox/DropBoxElement/DropBoxElement.js

@@ -11,7 +11,7 @@ var _useDropboxPosCalc2 = _interopRequireDefault(require("./useDropboxPosCalc"))
 
 var _cssJSLogic2 = _interopRequireDefault(require("./css/cssJSLogic"));
 
-var _DropBoxPositionMapping = require("../DropBoxPositionMapping.json");
+var _DropBoxPositionMapping = require("../DropBoxPositionMapping.js");
 
 var _defaultProps = require("./props/defaultProps");
 

package/lib/DropBox/DropBoxPositionMapping.js

@@ -0,0 +1,149 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.positionMapping = void 0;
+var positionMapping = {
+  "bottomCenter": {
+    "direction": "bottom",
+    "arrowPosition": "mid",
+    "positionStyle": "bottomMid"
+  },
+  "bottomLeftToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomCenterToRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomRightToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "bottomCenterToLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topCenter": {
+    "direction": "top",
+    "arrowPosition": "mid",
+    "positionStyle": "topMid"
+  },
+  "topLeftToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topCenterToRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topRightToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "topCenterToLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightCenter": {
+    "direction": "right",
+    "arrowPosition": "mid",
+    "positionStyle": "rightMid"
+  },
+  "rightTopToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightCenterToBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightBottomToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "rightCenterToTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftCenter": {
+    "direction": "left",
+    "arrowPosition": "mid",
+    "positionStyle": "leftMid"
+  },
+  "leftTopToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftCenterToBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftBottomToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "leftCenterToTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  },
+  "bottomRight": {
+    "direction": "bottom",
+    "arrowPosition": "start",
+    "positionStyle": "bottomEnd"
+  },
+  "bottomLeft": {
+    "direction": "bottom",
+    "arrowPosition": "end",
+    "positionStyle": "bottomStart"
+  },
+  "topRight": {
+    "direction": "top",
+    "arrowPosition": "start",
+    "positionStyle": "topEnd"
+  },
+  "topLeft": {
+    "direction": "top",
+    "arrowPosition": "end",
+    "positionStyle": "topStart"
+  },
+  "rightBottom": {
+    "direction": "right",
+    "arrowPosition": "start",
+    "positionStyle": "rightEnd"
+  },
+  "rightTop": {
+    "direction": "right",
+    "arrowPosition": "end",
+    "positionStyle": "rightStart"
+  },
+  "leftBottom": {
+    "direction": "left",
+    "arrowPosition": "start",
+    "positionStyle": "leftEnd"
+  },
+  "leftTop": {
+    "direction": "left",
+    "arrowPosition": "end",
+    "positionStyle": "leftStart"
+  }
+};
+exports.positionMapping = positionMapping;