@nutui/nutui-react-taro 4.0.0-beta.5 → 4.0.0-beta.7

package/dist/cjs/packages/noticebar/style-jrkf/style.css

@@ -23,6 +23,13 @@
 .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-wrap {
   height: auto;
 }
+.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-left-icon, .nut-noticebar .nut-noticebar-box-center .nut-noticebar-box-left-icon {
+  height: var(--nutui-noticebar-left-icon-wrap-width, 32px);
+  min-width: var(--nutui-noticebar-left-icon-wrap-width, 32px);
+}
+.nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap {
+  flex: initial;
+}
 .nut-noticebar .nut-noticebar-box-wrapable .nut-noticebar-box-wrap .nut-noticebar-box-wrap-content {
   position: relative;
   white-space: normal;
@@ -44,30 +51,106 @@
 }
 .nut-noticebar .nut-noticebar-box-left-icon {
   display: flex;
+  align-items: center;
+  justify-content: center;
   height: var(--nutui-noticebar-left-icon-width, 16px);
   min-width: var(--nutui-noticebar-left-icon-width, 16px);
   margin-right: var(--nutui-noticebar-icon-gap, 4px);
   background-size: 100% 100%;
 }
 .nut-noticebar .nut-noticebar-box-left-icon .nut-icon {
-  color: var(--nutui-noticebar-color, #d9500b);
+  color: var(--nutui-noticebar-icon-color, var(--nutui-color-primary, #ff6666));
+}
+.nut-noticebar .nut-noticebar-box-left-icon img {
+  border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px);
+}
+.nut-noticebar .nut-noticebar-box-content-wrapper {
+  flex: 1;
+  overflow: hidden;
+  min-width: 0;
+}
+.nut-noticebar .nut-noticebar-box-content-main {
+  display: flex;
+  align-items: center;
+}
+.nut-noticebar .nut-noticebar-box-description {
+  font-size: var(--nutui-noticebar-description-font-size, 11px);
+  color: var(--nutui-noticebar-description-color, var(--nutui-color-text));
+  line-height: var(--nutui-noticebar-description-line-height, 16px);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.nut-noticebar .nut-noticebar-box-tag {
+  display: flex;
+  align-items: center;
+  width: var(--nutui-noticebar-tag-size, 12px);
+  height: var(--nutui-noticebar-tag-size, 12px);
+  margin-left: var(--nutui-noticebar-tag-gap, 4px);
+  flex-shrink: 0;
+}
+.nut-noticebar .nut-noticebar-box-action {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  max-width: var(--nutui-noticebar-action-max-width, 99px);
+  margin-left: var(--nutui-noticebar-action-gap, 12px);
+  font-size: var(--nutui-noticebar-action-font-size, var(--nutui-font-text-xs));
+  color: var(--nutui-color-primary, #ff6666);
+  flex-shrink: 0;
+  white-space: nowrap;
 }
 .nut-noticebar .nut-noticebar-box-right-icon {
   display: flex;
   align-items: center;
   justify-content: center;
-  width: var(--nutui-noticebar-right-icon-width, 16px);
-  margin-left: var(--nutui-noticebar-icon-gap, 4px);
+  width: var(--nutui-noticebar-close-size, 20px);
+  height: var(--nutui-noticebar-close-size, 20px);
+  margin-left: var(--nutui-noticebar-action-gap, 12px);
+  flex-shrink: 0;
+  cursor: pointer;
 }
 .nut-noticebar .nut-noticebar-box-right-icon .nut-icon {
-  width: scale-px(12px);
-  height: scale-px(12px);
-  color: var(--nutui-noticebar-color, #d9500b);
+  color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help));
 }
 .nut-noticebar .nut-noticebar-box-right-icon-default {
   width: var(--nutui-icon-size-12, 12px);
   height: var(--nutui-icon-size-12, 12px);
 }
+.nut-noticebar .nut-noticebar-box-close-countdown {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--nutui-noticebar-close-size, 20px);
+  height: var(--nutui-noticebar-close-size, 20px);
+  background: conic-gradient(var(--nutui-noticebar-close-ring-color, var(--nutui-color-text-help)) 0% var(--progress), var(--nutui-noticebar-close-ring-shadow-color, var(--nutui-color-border)) var(--progress) 100%);
+  border-radius: 50%;
+}
+.nut-noticebar .nut-noticebar-box-close-countdown::before {
+  content: "";
+  position: absolute;
+  inset: scale-px(1px);
+  background: var(--nutui-noticebar-background, rgb(251, 248, 220));
+  border-radius: 50%;
+}
+.nut-noticebar .nut-noticebar-box-close-icon {
+  position: relative;
+  width: var(--nutui-noticebar-close-icon-size, 10px);
+  height: var(--nutui-noticebar-close-icon-size, 10px);
+  color: var(--nutui-noticebar-close-color, var(--nutui-color-text-help));
+}
+.nut-noticebar .nut-noticebar-box-left-icon--product {
+  height: scale-px(32px);
+  min-width: scale-px(32px);
+}
+.nut-noticebar .nut-noticebar-box-left-icon--product img {
+  background: #ffffff;
+  border-radius: var(--nutui-noticebar-left-icon-border-radius, 4px);
+}
+.nut-noticebar .nut-noticebar-box-right {
+  flex-shrink: 0;
+}
 .nut-noticebar .nut-noticebar-box-wrap {
   display: flex;
   flex: 1;
@@ -136,11 +219,11 @@
   -webkit-box-direction: normal;
   flex-direction: column;
 }
+.nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-description {
+  white-space: normal;
+}
 .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
   align-self: center;
-  display: flex;
-  justify-content: center;
-  width: var(--nutui-noticebar-right-icon-width, 16px);
   margin-left: var(--nutui-noticebar-icon-gap, 4px);
 }
 @keyframes nut-notice-bar-play {
@@ -167,7 +250,17 @@
 [dir=rtl] .nut-noticebar .nut-noticebar-box-right-icon,
 .nut-rtl .nut-noticebar .nut-noticebar-box-right-icon {
   margin-left: 0;
-  margin-right: var(--nutui-noticebar-icon-gap, 4px);
+  margin-right: var(--nutui-noticebar-action-gap, 12px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-box-tag,
+.nut-rtl .nut-noticebar .nut-noticebar-box-tag {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-tag-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-box-action,
+.nut-rtl .nut-noticebar .nut-noticebar-box-action {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-action-gap, 12px);
 }
 [dir=rtl] .nut-noticebar .nut-noticebar-box .play,
 .nut-rtl .nut-noticebar .nut-noticebar-box .play {
@@ -191,4 +284,14 @@
 .nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-right-icon {
   margin-left: 0;
   margin-right: var(--nutui-noticebar-icon-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag,
+.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-tag {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-tag-gap, 4px);
+}
+[dir=rtl] .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action,
+.nut-rtl .nut-noticebar .nut-noticebar-vertical .nut-noticebar-box-action {
+  margin-left: 0;
+  margin-right: var(--nutui-noticebar-action-gap, 12px);
 }

package/dist/cjs/packages/numberkeyboard/style/style.css

@@ -8,12 +8,6 @@ page {
   --nut-icon-line-height: calc(16px * var(--nut-scale-icon, var(--nut-scale-f, 1))) !important;
 }
 
-.nut-numberkeyboard {
-  width: 100%;
-  padding: var(--nutui-numberkeyboard-padding, 0 0 calc(22px * var(--nut-scale-f, 1)) 0);
-  user-select: none;
-  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5));
-}
 .nut-numberkeyboard-close-icon {
   width: var(--nutui-icon-size-18, calc(18px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   height: var(--nutui-icon-size-18, calc(18px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
@@ -22,6 +16,12 @@ page {
   width: calc(28px * var(--nut-scale-f, 1));
   height: calc(28px * var(--nut-scale-f, 1));
 }
+.nut-numberkeyboard {
+  width: 100%;
+  padding: var(--nutui-numberkeyboard-padding, 0 0 calc(22px * var(--nut-scale-f, 1)) 0);
+  user-select: none;
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5));
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;

package/dist/cjs/packages/numberkeyboard/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);
@@ -412,12 +418,6 @@ page {
   right: 0;
 }
 
-.nut-numberkeyboard {
-  width: 100%;
-  padding: var(--nutui-numberkeyboard-padding, 0 0 calc(22px * var(--nut-scale-f, 1)) 0);
-  user-select: none;
-  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5));
-}
 .nut-numberkeyboard-close-icon {
   width: var(--nutui-icon-size-18, calc(18px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
   height: var(--nutui-icon-size-18, calc(18px * var(--nut-scale-icon, var(--nut-scale-f, 1))));
@@ -426,6 +426,12 @@ page {
   width: calc(28px * var(--nut-scale-f, 1));
   height: calc(28px * var(--nut-scale-f, 1));
 }
+.nut-numberkeyboard {
+  width: 100%;
+  padding: var(--nutui-numberkeyboard-padding, 0 0 calc(22px * var(--nut-scale-f, 1)) 0);
+  user-select: none;
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-background, #f2f3f5));
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;

package/dist/cjs/packages/numberkeyboard/style-jmapp/style.css

@@ -2,12 +2,6 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-numberkeyboard {
-  width: 100%;
-  padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
-  user-select: none;
-  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
-}
 .nut-numberkeyboard-close-icon {
   width: var(--nutui-icon-size-18, 18px);
   height: var(--nutui-icon-size-18, 18px);
@@ -16,6 +10,12 @@
   width: scale-px(28px);
   height: scale-px(28px);
 }
+.nut-numberkeyboard {
+  width: 100%;
+  padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
+  user-select: none;
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;

package/dist/cjs/packages/numberkeyboard/style-jrkf/style.css

@@ -2,12 +2,6 @@
 /* #endif */
 /* #ifndef harmony */
 /* #endif */
-.nut-numberkeyboard {
-  width: 100%;
-  padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
-  user-select: none;
-  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
-}
 .nut-numberkeyboard-close-icon {
   width: var(--nutui-icon-size-18, 18px);
   height: var(--nutui-icon-size-18, 18px);
@@ -16,6 +10,12 @@
   width: scale-px(28px);
   height: scale-px(28px);
 }
+.nut-numberkeyboard {
+  width: 100%;
+  padding: var(--nutui-numberkeyboard-padding, 0 0 22px 0);
+  user-select: none;
+  background-color: var(--nutui-numberkeyboard-background-color, var(--nutui-color-surface-1));
+}
 .nut-numberkeyboard-header {
   position: relative;
   display: flex;

package/dist/cjs/packages/picker/style/style.harmony.css

@@ -189,12 +189,6 @@ page {
 .nut-popup-top.nut-popup-round {
   border-radius: 0 0 var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1)))) var(--nutui-popup-border-radius, var(--nutui-radius-xl, calc(12px * var(--nut-scale-f, 1))));
 }
-.nut-popup-slide {
-  /* 从顶部滑出 */
-  /* 从右侧滑出 */
-  /* 从底部滑出 */
-  /* 从左侧滑出 */
-}
 @keyframes popup-scale-fade-in {
   from {
     opacity: 0;
@@ -251,6 +245,9 @@ page {
   animation-name: popup-fade-out;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从顶部滑出 */
+}
 @keyframes popup-slide-top-enter {
   from {
     transform: translate3d(0, -100%, 0);
@@ -278,6 +275,9 @@ page {
   animation-name: popup-slide-top-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从右侧滑出 */
+}
 @keyframes popup-slide-right-enter {
   from {
     transform: translate3d(100%, 0, 0);
@@ -305,6 +305,9 @@ page {
   animation-name: popup-slide-right-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从底部滑出 */
+}
 @keyframes popup-slide-bottom-enter {
   from {
     transform: translate3d(0, 100%, 0);
@@ -332,6 +335,9 @@ page {
   animation-name: slide-bottom-exit;
   animation-duration: var(--nutui-popup-animation-duration, 0.3s);
 }
+.nut-popup-slide {
+  /* 从左侧滑出 */
+}
 @keyframes popup-slide-left-enter {
   from {
     transform: translate3d(-100%, 0, 0);

package/dist/cjs/packages/popover/popover.js

@@ -30,18 +30,21 @@ var _pxtransform = require("../../utils/taro/px-transform");
 var _useuuid = require("../../hooks/use-uuid");
 var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typings.ComponentDefaults), {
     list: [],
-    theme: 'light',
+    type: 'status',
+    theme: 'dark',
     location: 'bottom',
     visible: false,
     offset: [
         0,
         8
     ],
-    arrowOffset: 0,
+    arrowOffset: 20,
     targetId: '',
     showArrow: true,
     closeOnOutsideClick: true,
     closeOnActionClick: true,
+    autoShow: false,
+    duration: 0,
     overlay: false,
     onClick: function onClick() {},
     onOpen: function onOpen() {},
@@ -50,9 +53,10 @@ var defaultProps = (0, _object_spread_props._)((0, _object_spread._)({}, _typing
 var classPrefix = "nut-popover";
 var Popover = function Popover(props) {
     var rtl = (0, _index1.useRtl)();
-    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, list = _$_object_spread.list, theme = _$_object_spread.theme, location = _$_object_spread.location, visible = _$_object_spread.visible, offset = _$_object_spread.offset, arrowOffset = _$_object_spread.arrowOffset, targetId = _$_object_spread.targetId, overlay = _$_object_spread.overlay, closeOnOutsideClick = _$_object_spread.closeOnOutsideClick, closeOnActionClick = _$_object_spread.closeOnActionClick, className = _$_object_spread.className, showArrow = _$_object_spread.showArrow, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onSelect = _$_object_spread.onSelect, rest = (0, _object_without_properties._)(_$_object_spread, [
+    var _$_object_spread = (0, _object_spread._)({}, defaultProps, props), children = _$_object_spread.children, list = _$_object_spread.list, type = _$_object_spread.type, theme = _$_object_spread.theme, location = _$_object_spread.location, visible = _$_object_spread.visible, offset = _$_object_spread.offset, arrowOffset = _$_object_spread.arrowOffset, targetId = _$_object_spread.targetId, overlay = _$_object_spread.overlay, closeOnOutsideClick = _$_object_spread.closeOnOutsideClick, closeOnActionClick = _$_object_spread.closeOnActionClick, autoShow = _$_object_spread.autoShow, duration = _$_object_spread.duration, className = _$_object_spread.className, showArrow = _$_object_spread.showArrow, style = _$_object_spread.style, onClick = _$_object_spread.onClick, onOpen = _$_object_spread.onOpen, onClose = _$_object_spread.onClose, onSelect = _$_object_spread.onSelect, rest = (0, _object_without_properties._)(_$_object_spread, [
         "children",
         "list",
+        "type",
         "theme",
         "location",
         "visible",
@@ -62,6 +66,8 @@ var Popover = function Popover(props) {
         "overlay",
         "closeOnOutsideClick",
         "closeOnActionClick",
+        "autoShow",
+        "duration",
         "className",
         "showArrow",
         "style",
@@ -84,6 +90,27 @@ var Popover = function Popover(props) {
     }, [
         visible
     ]);
+    (0, _react.useEffect)(function() {
+        if (autoShow) {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+    }, []);
+    (0, _react.useEffect)(function() {
+        if (visible && duration > 0) {
+            var timer = setTimeout(function() {
+                onClick === null || onClick === void 0 ? void 0 : onClick();
+                onClose === null || onClose === void 0 ? void 0 : onClose();
+            }, duration);
+            return function() {
+                return clearTimeout(timer);
+            };
+        }
+    }, [
+        visible,
+        duration,
+        onClick,
+        onClose
+    ]);
     var uid = (0, _useuuid.useUuid)();
     var popoverId = "popover-".concat(uid);
     var getWrapperPosition = function getWrapperPosition() {
@@ -177,7 +204,7 @@ var Popover = function Popover(props) {
             onClose === null || onClose === void 0 ? void 0 : onClose();
         }
     };
-    var classes = (0, _classnames.default)(classPrefix, (0, _define_property._)({}, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), className);
+    var classes = (0, _classnames.default)(classPrefix, "".concat(classPrefix, "--").concat(type), (0, _define_property._)({}, "".concat(classPrefix, "-light"), theme === 'light'), className);
     var popoverArrow = function popoverArrow() {
         var prefixCls = 'nut-popover-arrow';
         var direction = location.split('-')[0];
@@ -201,6 +228,7 @@ var Popover = function Popover(props) {
         }
         if (width) {
             var dir = rtl ? 'right' : 'left';
+            var edgeOffset = arrowOffset;
             if ([
                 'bottom',
                 'top'
@@ -211,10 +239,10 @@ var Popover = function Popover(props) {
                     styles[dir] = (0, _pxtransform.pxTransform)(-(popWidth - width) / 2 + wrapperPosition[dir] + parallel);
                 }
                 if (skew === 'left') {
-                    styles.left = (0, _pxtransform.pxTransform)(left + parallel);
+                    styles.left = (0, _pxtransform.pxTransform)(left + width / 2 - edgeOffset + parallel);
                 }
                 if (skew === 'right') {
-                    styles.left = (0, _pxtransform.pxTransform)(right + parallel);
+                    styles.left = (0, _pxtransform.pxTransform)(left + width / 2 + edgeOffset + parallel);
                 }
             }
             if ([
@@ -224,7 +252,7 @@ var Popover = function Popover(props) {
                 var contentW = direction === 'left' ? -(popWidth + cross) : width + cross;
                 styles.left = (0, _pxtransform.pxTransform)(left + contentW);
                 if (!skew) {
-                    styles.top = (0, _pxtransform.pxTransform)(top - popHeight / 2 + height / 2 - 4 + parallel);
+                    styles.top = (0, _pxtransform.pxTransform)(top - popHeight / 2 + height / 2 + parallel);
                 }
                 if (skew === 'top') {
                     styles.top = (0, _pxtransform.pxTransform)(top + parallel);
@@ -241,37 +269,18 @@ var Popover = function Popover(props) {
         var styles = {};
         var direction = location.split('-')[0];
         var skew = location.split('-')[1];
-        var base = 16;
-        if (arrowOffset !== 0) {
-            var dir = rtl ? 'right' : 'left';
-            var dir2 = rtl ? 'left' : 'right';
-            if ([
-                'bottom',
-                'top'
-            ].includes(direction)) {
-                if (!skew) {
-                    styles[dir] = "calc(50% + ".concat(arrowOffset, "px)");
-                }
-                if (skew === 'left') {
-                    styles[dir] = "".concat(base + arrowOffset, "px");
-                }
-                if (skew === 'right') {
-                    styles[dir2] = "".concat(base - arrowOffset, "px");
-                }
+        var dir = rtl ? 'right' : 'left';
+        var dir2 = rtl ? 'left' : 'right';
+        var edgeOffset = arrowOffset;
+        if ([
+            'bottom',
+            'top'
+        ].includes(direction)) {
+            if (skew === 'left') {
+                styles[dir] = "".concat(edgeOffset, "px");
             }
-            if ([
-                'left',
-                'right'
-            ].includes(direction)) {
-                if (!skew) {
-                    styles.top = "calc(50% - ".concat(arrowOffset, "px)");
-                }
-                if (skew === 'top') {
-                    styles.top = "".concat(base - arrowOffset, "px");
-                }
-                if (skew === 'bottom') {
-                    styles.bottom = "".concat(base + arrowOffset, "px");
-                }
+            if (skew === 'right') {
+                styles[dir2] = "".concat(edgeOffset, "px");
             }
         }
         return styles;