@nutui/nutui-react 4.0.0-beta.6 → 4.0.0-beta.7

package/dist/es/packages/noticebar/style-jrkf/noticebar.scss

@@ -20,10 +20,17 @@
       .nut-noticebar-box-wrap {
         height: auto;
       }
+
+      .nut-noticebar-box-left-icon {
+        height: $noticebar-left-icon-wrap-width;
+        min-width: $noticebar-left-icon-wrap-width;
+      }
     }
 
     &-wrapable {
       .nut-noticebar-box-wrap {
+        flex: initial;
+
         .nut-noticebar-box-wrap-content {
           position: relative;
           white-space: normal;
@@ -51,26 +58,75 @@
 
     &-left-icon {
       display: flex;
+      align-items: center;
+      justify-content: center;
       height: $noticebar-left-icon-width;
       min-width: $noticebar-left-icon-width;
       margin-right: $noticebar-icon-gap;
       background-size: 100% 100%;
+
       .nut-icon {
-        color: $noticebar-color;
+        color: $noticebar-icon-color;
       }
+
+      img {
+        border-radius: $noticebar-left-icon-border-radius;
+      }
+    }
+
+    &-content-wrapper {
+      flex: 1;
+      overflow: hidden;
+      min-width: 0;
+    }
+
+    &-content-main {
+      display: flex;
+      align-items: center;
+    }
+
+    &-description {
+      font-size: $noticebar-description-font-size;
+      color: $noticebar-description-color;
+      line-height: $noticebar-description-line-height;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+
+    &-tag {
+      display: flex;
+      align-items: center;
+      width: $noticebar-tag-size;
+      height: $noticebar-tag-size;
+      margin-left: $noticebar-tag-gap;
+      flex-shrink: 0;
+    }
+
+    &-action {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      max-width: $noticebar-action-max-width;
+      margin-left: $noticebar-action-gap;
+      font-size: $noticebar-action-font-size;
+      color: $color-primary;
+      flex-shrink: 0;
+      white-space: nowrap;
     }
 
     &-right-icon {
       display: flex;
       align-items: center;
       justify-content: center;
-      width: $noticebar-right-icon-width;
-      margin-left: $noticebar-icon-gap;
+      width: $noticebar-close-size;
+      height: $noticebar-close-size;
+      margin-left: $noticebar-action-gap;
+      flex-shrink: 0;
+      cursor: pointer;
 
       .nut-icon {
-        width: scale-px(12px);
-        height: scale-px(12px);
-        color: $noticebar-color;
+        color: $noticebar-close-color;
       }
     }
 
@@ -79,6 +135,49 @@
       height: $icon-size-12;
     }
 
+    &-close-countdown {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: $noticebar-close-size;
+      height: $noticebar-close-size;
+      background: conic-gradient(
+        $noticebar-close-ring-color 0% var(--progress),
+        $noticebar-close-ring-shadow-color var(--progress) 100%
+      );
+      border-radius: 50%;
+
+      &::before {
+        content: '';
+        position: absolute;
+        inset: scale-px(1px);
+        background: $noticebar-background;
+        border-radius: 50%;
+      }
+    }
+
+    &-close-icon {
+      position: relative;
+      width: $noticebar-close-icon-size;
+      height: $noticebar-close-icon-size;
+      color: $noticebar-close-color;
+    }
+
+    &-left-icon--product {
+      height: scale-px(32px);
+      min-width: scale-px(32px);
+
+      img {
+        background: $white;
+        border-radius: $noticebar-left-icon-border-radius;
+      }
+    }
+
+    &-right {
+      flex-shrink: 0;
+    }
+
     &-wrap {
       display: flex;
       flex: 1;
@@ -158,11 +257,12 @@
       flex-direction: column;
     }
 
+    .nut-noticebar-box-description {
+      white-space: normal;
+    }
+
     .nut-noticebar-box-right-icon {
       align-self: center;
-      display: flex;
-      justify-content: center;
-      width: $noticebar-right-icon-width;
       margin-left: $noticebar-icon-gap;
     }
   }
@@ -196,7 +296,17 @@
 
     &-right-icon {
       margin-left: 0;
-      margin-right: $noticebar-icon-gap;
+      margin-right: $noticebar-action-gap;
+    }
+
+    &-tag {
+      margin-left: 0;
+      margin-right: $noticebar-tag-gap;
+    }
+
+    &-action {
+      margin-left: 0;
+      margin-right: $noticebar-action-gap;
     }
 
     .play {
@@ -225,5 +335,15 @@
       margin-left: 0;
       margin-right: $noticebar-icon-gap;
     }
+
+    .nut-noticebar-box-tag {
+      margin-left: 0;
+      margin-right: $noticebar-tag-gap;
+    }
+
+    .nut-noticebar-box-action {
+      margin-left: 0;
+      margin-right: $noticebar-action-gap;
+    }
   }
 }

package/dist/es/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/es/packages/notify/Notification.js

@@ -130,7 +130,13 @@ var Notification = /*#__PURE__*/ function(_superClass) {
 _define_property(Notification, "newInstance", void 0);
 export { Notification as default };
 Notification.newInstance = function(properties, callback) {
-    var ref = function ref(instance) {
+    var element = document.createElement('div');
+    var id = properties.id ? properties.id : "".concat(Date.now());
+    element.id = id;
+    properties.id = id;
+    document.body.appendChild(element);
+    var called = false;
+    function ref(instance) {
         if (called) {
             return;
         }
@@ -144,13 +150,7 @@ Notification.newInstance = function(properties, callback) {
                 }, 300);
             }
         });
-    };
-    var element = document.createElement('div');
-    var id = properties.id ? properties.id : "".concat(Date.now());
-    element.id = id;
-    properties.id = id;
-    document.body.appendChild(element);
-    var called = false;
+    }
     reactRender(/*#__PURE__*/ React.createElement(Notification, _object_spread_props(_object_spread({}, properties), {
         ref: ref
     })), element);

package/dist/es/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/es/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/es/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/es/packages/popover/popover.js

@@ -16,18 +16,21 @@ import { getAllScrollableParents } from "../../utils/get-scroll-parent";
 import { useRtl } from "../configprovider";
 var defaultProps = _object_spread_props(_object_spread({}, 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() {},
@@ -36,9 +39,10 @@ var defaultProps = _object_spread_props(_object_spread({}, ComponentDefaults), {
 var classPrefix = "nut-popover";
 export var Popover = function Popover(props) {
     var rtl = useRtl();
-    var _$_object_spread = _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 = _object_without_properties(_$_object_spread, [
+    var _$_object_spread = _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 = _object_without_properties(_$_object_spread, [
         "children",
         "list",
+        "type",
         "theme",
         "location",
         "visible",
@@ -48,6 +52,8 @@ export var Popover = function Popover(props) {
         "overlay",
         "closeOnOutsideClick",
         "closeOnActionClick",
+        "autoShow",
+        "duration",
         "className",
         "showArrow",
         "style",
@@ -71,6 +77,27 @@ export var Popover = function Popover(props) {
         visible,
         location
     ]);
+    useEffect(function() {
+        if (autoShow) {
+            onOpen === null || onOpen === void 0 ? void 0 : onOpen();
+        }
+    }, []);
+    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 update = useRef(function(e) {
         getWrapperPosition();
     });
@@ -125,7 +152,7 @@ export var Popover = function Popover(props) {
             right: rtl ? left : right
         });
     };
-    var classes = classNames(classPrefix, _define_property({}, "".concat(classPrefix, "-").concat(theme), theme === 'dark'), className);
+    var classes = classNames(classPrefix, "".concat(classPrefix, "--").concat(type), _define_property({}, "".concat(classPrefix, "-light"), theme === 'light'), className);
     var popoverArrow = function popoverArrow() {
         var prefixCls = 'nut-popover-arrow';
         var direction = location.split('-')[0];
@@ -152,6 +179,7 @@ export var Popover = function Popover(props) {
         }
         if (width) {
             var dir = rtl ? 'right' : 'left';
+            var edgeOffset = arrowOffset;
             if ([
                 'bottom',
                 'top'
@@ -162,10 +190,10 @@ export var Popover = function Popover(props) {
                     styles[dir] = "".concat(-(popWidth - width) / 2 + wrapperPosition[dir] + parallel, "px");
                 }
                 if (skew === 'left') {
-                    styles.left = "".concat(left + parallel, "px");
+                    styles.left = "".concat(left + width / 2 - edgeOffset + parallel, "px");
                 }
                 if (skew === 'right') {
-                    styles.left = "".concat(right + parallel, "px");
+                    styles.left = "".concat(left + width / 2 + edgeOffset + parallel, "px");
                 }
             }
             if ([
@@ -175,7 +203,7 @@ export var Popover = function Popover(props) {
                 var contentW = direction === 'left' ? -(popWidth + cross) : width + cross;
                 styles.left = "".concat(left + contentW, "px");
                 if (!skew) {
-                    styles.top = "".concat(top - popHeight / 2 + height / 2 - 4 + parallel, "px");
+                    styles.top = "".concat(top - popHeight / 2 + height / 2 + parallel, "px");
                 }
                 if (skew === 'top') {
                     styles.top = "".concat(top + parallel, "px");
@@ -192,37 +220,18 @@ export 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;