@nutui/nutui-react 2.4.2 → 2.5.1-beta.0

package/dist/nutui.react.es.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 19:59:52 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.5.1 Fri Mar 29 2024 15:52:31 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2398,6 +2398,9 @@ const defaultConfigRef = {
     locale: zhCN
   }
 };
+const setDefaultConfig = (config2) => {
+  defaultConfigRef.current = config2;
+};
 const getDefaultConfig = () => {
   return defaultConfigRef.current;
 };
@@ -12069,8 +12072,8 @@ const CustomRender = (props) => {
       onClose: () => {
         onClose == null ? void 0 : onClose();
       },
-      onChange: (val) => {
-        onChange == null ? void 0 : onChange(val);
+      onChange: (val, params) => {
+        onChange == null ? void 0 : onChange(val, params);
       },
       onPathChange,
       ...rest
@@ -14636,8 +14639,12 @@ const DatePicker = (props) => {
         return result;
     }
   };
-  const handlePickerChange = (selectedOptions, selectedValue, index) => {
+  const compareDateChange = (currentDate, newDate) => {
     var _a;
+    const isEqual2 = ((_a = new Date(currentDate)) == null ? void 0 : _a.getTime()) === (newDate == null ? void 0 : newDate.getTime());
+    newDate && isDate(newDate) && !isEqual2 && setSelectedDate(formatValue(newDate));
+  };
+  const handlePickerChange = (selectedOptions, selectedValue, index) => {
     const rangeType = type4.toLocaleLowerCase();
     if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
       rangeType
@@ -14676,8 +14683,22 @@ const DatePicker = (props) => {
       } else if (rangeType === "datehour") {
         date4 = new Date(year, month, day, Number(formatDate[3]));
       }
-      const isEqual2 = ((_a = new Date(selectedDate)) == null ? void 0 : _a.getTime()) === (date4 == null ? void 0 : date4.getTime());
-      date4 && isDate(date4) && !isEqual2 && setSelectedDate(formatValue(date4));
+      compareDateChange(selectedDate, date4);
+    } else {
+      const [hour, minute, seconds] = selectedValue;
+      const currentDate = new Date(selectedDate);
+      const year = currentDate.getFullYear();
+      const month = currentDate.getMonth();
+      const day = currentDate.getDate();
+      const date4 = new Date(
+        year,
+        month,
+        day,
+        Number(hour),
+        Number(minute),
+        rangeType === "time" ? Number(seconds) : 0
+      );
+      compareDateChange(selectedDate, date4);
     }
     props.onChange && props.onChange(selectedOptions, selectedValue, index);
   };
@@ -16298,6 +16319,7 @@ const defaultProps$V = {
 };
 const Input = forwardRef(
   (props, ref) => {
+    const rtl = useRtl();
     const { locale } = useConfig();
     const {
       type: type4,
@@ -16415,8 +16437,14 @@ const Input = forwardRef(
           className: "nut-input-native",
           ref: inputRef,
           style: {
-            textAlign: `${// eslint-disable-next-line no-nested-ternary
-            align === "right" ? "end" : align === "left" ? "start" : "center"}`
+            // eslint-disable-next-line no-nested-ternary
+            textAlign: rtl ? (
+              // eslint-disable-next-line no-nested-ternary
+              align === "right" ? (
+                // eslint-disable-next-line no-nested-ternary
+                "left"
+              ) : align === "left" ? "right" : "center"
+            ) : align
           },
           type: inputType(type4),
           maxLength,
@@ -18650,11 +18678,7 @@ const Progress = (props) => {
     };
     observer.current = new IntersectionObserver((entires, self2) => {
       entires.forEach((item) => {
-        if (item.isIntersecting) {
-          setIntersecting(true);
-        } else {
-          setIntersecting(false);
-        }
+        setIntersecting(item.isIntersecting);
       });
     }, options2);
     observer.current.observe(progressRef.current);
@@ -19473,7 +19497,7 @@ const defaultProps$E = {
   disableConfirmButton: false,
   footerDirection: "horizontal",
   lockScroll: true,
-  closeIconPosition: "top-right",
+  closeIconPosition: "bottom",
   closeIcon: false,
   beforeCancel: () => true,
   beforeClose: () => true
@@ -20538,6 +20562,7 @@ const defaultProps$y = {
 };
 const classPrefix$b = `nut-popover`;
 const Popover = (props) => {
+  const rtl = useRtl();
   const {
     children,
     list,
@@ -20618,9 +20643,9 @@ const Popover = (props) => {
     setRootPosition({
       width: rect.width,
       height: rect.height,
-      left: rect.left,
+      left: rtl ? rect.right : rect.left,
       top: rect.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop),
-      right: rect.right
+      right: rtl ? rect.left : rect.right
     });
   };
   const classes = classNames(
@@ -20648,15 +20673,17 @@ const Popover = (props) => {
     let cross = 0;
     let parallel = 0;
     if (Array.isArray(offset) && offset.length === 2) {
+      const rtloffset = rtl ? -offset[0] : offset[0];
       cross += +offset[1];
-      parallel += +offset[0];
+      parallel += +rtloffset;
     }
     if (width) {
+      const dir = rtl ? "right" : "left";
       if (["bottom", "top"].includes(direction)) {
         const h = direction === "bottom" ? height + cross : -(contentHeight + cross);
         styles.top = `${top + h}px`;
         if (!skew) {
-          styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
+          styles[dir] = `${-(contentWidth - width) / 2 + rootPosition[dir] + parallel}px`;
         }
         if (skew === "start") {
           styles.left = `${left + parallel}px`;
@@ -20687,15 +20714,17 @@ const Popover = (props) => {
     const skew = location.split("-")[1];
     const base = 16;
     if (props.arrowOffset !== 0) {
+      const dir = rtl ? "right" : "left";
+      const dir2 = rtl ? "left" : "right";
       if (["bottom", "top"].includes(direction)) {
         if (!skew) {
-          styles.left = `calc(50% + ${arrowOffset}px)`;
+          styles[dir] = `calc(50% + ${arrowOffset}px)`;
         }
         if (skew === "start") {
-          styles.left = `${base + arrowOffset}px`;
+          styles[dir] = `${base + arrowOffset}px`;
         }
         if (skew === "end") {
-          styles.right = `${base - arrowOffset}px`;
+          styles[dir2] = `${base - arrowOffset}px`;
         }
       }
       if (["left", "right"].includes(direction)) {
@@ -22519,13 +22548,17 @@ const Ellipsis = (props) => {
     onChange,
     ...rest
   } = { ...defaultProps$k, ...props };
+  const rtl = useRtl();
   let container = null;
   let maxHeight = 0;
   const [exceeded, setExceeded] = useState(false);
   const [expanded, setExpanded] = useState(false);
   const ellipsis = useRef();
   const root2 = useRef(null);
-  const classes = classNames(classPrefix$5, className);
+  const rtlClasses = classNames({
+    [`${classPrefix$5}-rtl`]: rtl
+  });
+  const classes = classNames(classPrefix$5, rtlClasses, className);
   useIsomorphicLayoutEffect(() => {
     if (content) {
       createContainer();
@@ -22644,7 +22677,7 @@ const Ellipsis = (props) => {
   const handleClick2 = () => {
     onClick && onClick();
   };
-  return /* @__PURE__ */ React__default.createElement("div", { className: classes, onClick: handleClick2, ref: root2, ...rest }, /* @__PURE__ */ React__default.createElement("div", null, !exceeded ? content : null, exceeded && !expanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, (_a = ellipsis.current) == null ? void 0 : _a.leading, expandText ? /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement("div", { className: classes, onClick: handleClick2, ref: root2, ...rest }, !exceeded ? content : null, exceeded && !expanded ? /* @__PURE__ */ React__default.createElement("span", null, (_a = ellipsis.current) == null ? void 0 : _a.leading, expandText ? /* @__PURE__ */ React__default.createElement(
     "span",
     {
       className: "nut-ellipsis-text",
@@ -22654,7 +22687,7 @@ const Ellipsis = (props) => {
       }
     },
     expandText
-  ) : null, (_b = ellipsis.current) == null ? void 0 : _b.tailing) : null, exceeded && expanded ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, content, expandText ? /* @__PURE__ */ React__default.createElement(
+  ) : null, (_b = ellipsis.current) == null ? void 0 : _b.tailing) : null, exceeded && expanded ? /* @__PURE__ */ React__default.createElement("span", null, content, expandText ? /* @__PURE__ */ React__default.createElement(
     "span",
     {
       className: "nut-ellipsis-text",
@@ -22664,7 +22697,7 @@ const Ellipsis = (props) => {
       }
     },
     collapseText
-  ) : null) : null));
+  ) : null) : null);
 };
 Ellipsis.defaultProps = defaultProps$k;
 Ellipsis.displayName = "NutEllipsis";
@@ -24483,7 +24516,7 @@ const VirtualList = (props) => {
             "li",
             {
               "data-index": `${dataIndex}`,
-              className: dataIndex % 2 === 0 ? "nut-virtuallist-item even" : "nut-virtuallist-item odd",
+              className: "nut-virtuallist-item",
               key: `${keyVal}`,
               style: { display: styleVal }
             },
@@ -25497,5 +25530,9 @@ export {
   Uploader,
   Video,
   VirtualList,
-  WaterMark
+  WaterMark,
+  getDefaultConfig,
+  setDefaultConfig,
+  useConfig,
+  useRtl
 };

package/dist/nutui.react.umd.js

@@ -2,7 +2,7 @@
   typeof exports === "object" && typeof module !== "undefined" ? factory(exports, require("react"), require("react-dom")) : typeof define === "function" && define.amd ? define(["exports", "react", "react-dom"], factory) : (global2 = typeof globalThis !== "undefined" ? globalThis : global2 || self, factory((global2.nutui = global2.nutui || {}, global2.nutui.react = {}), global2.React, global2.ReactDOM));
 })(this, function(exports2, React, ReactDOM) {
   "use strict";/*!
-* @nutui/nutui-react v2.4.2 Wed Mar 20 2024 19:59:52 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.5.1 Fri Mar 29 2024 15:52:31 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -2416,6 +2416,9 @@ Check the top-level render call using <` + t2 + ">.");
       locale: zhCN
     }
   };
+  const setDefaultConfig = (config2) => {
+    defaultConfigRef.current = config2;
+  };
   const getDefaultConfig = () => {
     return defaultConfigRef.current;
   };
@@ -12087,8 +12090,8 @@ Please add \`${key}Action\` when creating your handler.`);
         onClose: () => {
           onClose == null ? void 0 : onClose();
         },
-        onChange: (val) => {
-          onChange == null ? void 0 : onChange(val);
+        onChange: (val, params) => {
+          onChange == null ? void 0 : onChange(val, params);
         },
         onPathChange,
         ...rest
@@ -14654,8 +14657,12 @@ Please add \`${key}Action\` when creating your handler.`);
           return result;
       }
     };
-    const handlePickerChange = (selectedOptions, selectedValue, index) => {
+    const compareDateChange = (currentDate, newDate) => {
       var _a;
+      const isEqual2 = ((_a = new Date(currentDate)) == null ? void 0 : _a.getTime()) === (newDate == null ? void 0 : newDate.getTime());
+      newDate && isDate(newDate) && !isEqual2 && setSelectedDate(formatValue(newDate));
+    };
+    const handlePickerChange = (selectedOptions, selectedValue, index) => {
       const rangeType = type2.toLocaleLowerCase();
       if (["date", "datetime", "datehour", "month-day", "year-month"].includes(
         rangeType
@@ -14694,8 +14701,22 @@ Please add \`${key}Action\` when creating your handler.`);
         } else if (rangeType === "datehour") {
           date2 = new Date(year, month, day, Number(formatDate[3]));
         }
-        const isEqual2 = ((_a = new Date(selectedDate)) == null ? void 0 : _a.getTime()) === (date2 == null ? void 0 : date2.getTime());
-        date2 && isDate(date2) && !isEqual2 && setSelectedDate(formatValue(date2));
+        compareDateChange(selectedDate, date2);
+      } else {
+        const [hour, minute, seconds] = selectedValue;
+        const currentDate = new Date(selectedDate);
+        const year = currentDate.getFullYear();
+        const month = currentDate.getMonth();
+        const day = currentDate.getDate();
+        const date2 = new Date(
+          year,
+          month,
+          day,
+          Number(hour),
+          Number(minute),
+          rangeType === "time" ? Number(seconds) : 0
+        );
+        compareDateChange(selectedDate, date2);
       }
       props.onChange && props.onChange(selectedOptions, selectedValue, index);
     };
@@ -16316,6 +16337,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const Input = React.forwardRef(
     (props, ref) => {
+      const rtl = useRtl();
       const { locale } = useConfig();
       const {
         type: type2,
@@ -16433,8 +16455,14 @@ Please add \`${key}Action\` when creating your handler.`);
             className: "nut-input-native",
             ref: inputRef,
             style: {
-              textAlign: `${// eslint-disable-next-line no-nested-ternary
-              align === "right" ? "end" : align === "left" ? "start" : "center"}`
+              // eslint-disable-next-line no-nested-ternary
+              textAlign: rtl ? (
+                // eslint-disable-next-line no-nested-ternary
+                align === "right" ? (
+                  // eslint-disable-next-line no-nested-ternary
+                  "left"
+                ) : align === "left" ? "right" : "center"
+              ) : align
             },
             type: inputType(type2),
             maxLength,
@@ -18668,11 +18696,7 @@ Please add \`${key}Action\` when creating your handler.`);
       };
       observer.current = new IntersectionObserver((entires, self2) => {
         entires.forEach((item) => {
-          if (item.isIntersecting) {
-            setIntersecting(true);
-          } else {
-            setIntersecting(false);
-          }
+          setIntersecting(item.isIntersecting);
         });
       }, options2);
       observer.current.observe(progressRef.current);
@@ -19491,7 +19515,7 @@ Please add \`${key}Action\` when creating your handler.`);
     disableConfirmButton: false,
     footerDirection: "horizontal",
     lockScroll: true,
-    closeIconPosition: "top-right",
+    closeIconPosition: "bottom",
     closeIcon: false,
     beforeCancel: () => true,
     beforeClose: () => true
@@ -20556,6 +20580,7 @@ Please add \`${key}Action\` when creating your handler.`);
   };
   const classPrefix$b = `nut-popover`;
   const Popover = (props) => {
+    const rtl = useRtl();
     const {
       children,
       list,
@@ -20636,9 +20661,9 @@ Please add \`${key}Action\` when creating your handler.`);
       setRootPosition({
         width: rect.width,
         height: rect.height,
-        left: rect.left,
+        left: rtl ? rect.right : rect.left,
         top: rect.top + Math.max(document.documentElement.scrollTop, document.body.scrollTop),
-        right: rect.right
+        right: rtl ? rect.left : rect.right
       });
     };
     const classes = classNames(
@@ -20666,15 +20691,17 @@ Please add \`${key}Action\` when creating your handler.`);
       let cross = 0;
       let parallel = 0;
       if (Array.isArray(offset) && offset.length === 2) {
+        const rtloffset = rtl ? -offset[0] : offset[0];
         cross += +offset[1];
-        parallel += +offset[0];
+        parallel += +rtloffset;
       }
       if (width) {
+        const dir = rtl ? "right" : "left";
         if (["bottom", "top"].includes(direction)) {
           const h = direction === "bottom" ? height + cross : -(contentHeight + cross);
           styles.top = `${top + h}px`;
           if (!skew) {
-            styles.left = `${-(contentWidth - width) / 2 + left + parallel}px`;
+            styles[dir] = `${-(contentWidth - width) / 2 + rootPosition[dir] + parallel}px`;
           }
           if (skew === "start") {
             styles.left = `${left + parallel}px`;
@@ -20705,15 +20732,17 @@ Please add \`${key}Action\` when creating your handler.`);
       const skew = location.split("-")[1];
       const base = 16;
       if (props.arrowOffset !== 0) {
+        const dir = rtl ? "right" : "left";
+        const dir2 = rtl ? "left" : "right";
         if (["bottom", "top"].includes(direction)) {
           if (!skew) {
-            styles.left = `calc(50% + ${arrowOffset}px)`;
+            styles[dir] = `calc(50% + ${arrowOffset}px)`;
           }
           if (skew === "start") {
-            styles.left = `${base + arrowOffset}px`;
+            styles[dir] = `${base + arrowOffset}px`;
           }
           if (skew === "end") {
-            styles.right = `${base - arrowOffset}px`;
+            styles[dir2] = `${base - arrowOffset}px`;
           }
         }
         if (["left", "right"].includes(direction)) {
@@ -22537,13 +22566,17 @@ Please add \`${key}Action\` when creating your handler.`);
       onChange,
       ...rest
     } = { ...defaultProps$k, ...props };
+    const rtl = useRtl();
     let container = null;
     let maxHeight = 0;
     const [exceeded, setExceeded] = React.useState(false);
     const [expanded, setExpanded] = React.useState(false);
     const ellipsis = React.useRef();
     const root2 = React.useRef(null);
-    const classes = classNames(classPrefix$5, className);
+    const rtlClasses = classNames({
+      [`${classPrefix$5}-rtl`]: rtl
+    });
+    const classes = classNames(classPrefix$5, rtlClasses, className);
     useIsomorphicLayoutEffect(() => {
       if (content) {
         createContainer();
@@ -22662,7 +22695,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const handleClick2 = () => {
       onClick && onClick();
     };
-    return /* @__PURE__ */ React.createElement("div", { className: classes, onClick: handleClick2, ref: root2, ...rest }, /* @__PURE__ */ React.createElement("div", null, !exceeded ? content : null, exceeded && !expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, (_a = ellipsis.current) == null ? void 0 : _a.leading, expandText ? /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement("div", { className: classes, onClick: handleClick2, ref: root2, ...rest }, !exceeded ? content : null, exceeded && !expanded ? /* @__PURE__ */ React.createElement("span", null, (_a = ellipsis.current) == null ? void 0 : _a.leading, expandText ? /* @__PURE__ */ React.createElement(
       "span",
       {
         className: "nut-ellipsis-text",
@@ -22672,7 +22705,7 @@ Please add \`${key}Action\` when creating your handler.`);
         }
       },
       expandText
-    ) : null, (_b = ellipsis.current) == null ? void 0 : _b.tailing) : null, exceeded && expanded ? /* @__PURE__ */ React.createElement(React.Fragment, null, content, expandText ? /* @__PURE__ */ React.createElement(
+    ) : null, (_b = ellipsis.current) == null ? void 0 : _b.tailing) : null, exceeded && expanded ? /* @__PURE__ */ React.createElement("span", null, content, expandText ? /* @__PURE__ */ React.createElement(
       "span",
       {
         className: "nut-ellipsis-text",
@@ -22682,7 +22715,7 @@ Please add \`${key}Action\` when creating your handler.`);
         }
       },
       collapseText
-    ) : null) : null));
+    ) : null) : null);
   };
   Ellipsis.defaultProps = defaultProps$k;
   Ellipsis.displayName = "NutEllipsis";
@@ -24501,7 +24534,7 @@ Please add \`${key}Action\` when creating your handler.`);
               "li",
               {
                 "data-index": `${dataIndex}`,
-                className: dataIndex % 2 === 0 ? "nut-virtuallist-item even" : "nut-virtuallist-item odd",
+                className: "nut-virtuallist-item",
                 key: `${keyVal}`,
                 style: { display: styleVal }
               },
@@ -25515,5 +25548,9 @@ Please add \`${key}Action\` when creating your handler.`);
   exports2.Video = Video;
   exports2.VirtualList = VirtualList;
   exports2.WaterMark = WaterMark;
+  exports2.getDefaultConfig = getDefaultConfig;
+  exports2.setDefaultConfig = setDefaultConfig;
+  exports2.useConfig = useConfig;
+  exports2.useRtl = useRtl;
   Object.defineProperty(exports2, Symbol.toStringTag, { value: "Module" });
 });

package/dist/packages/dialog/dialog.scss

@@ -42,6 +42,11 @@
     align-items: center;
     top: $dialog-close-top;
     color: $dialog-close-color;
+    .nut-icon {
+      font-size: 24px;
+      height: 24px;
+      width: 24px;
+    }
 
     &-top-right {
       right: $dialog-close-right;

package/dist/packages/ellipsis/ellipsis.scss

@@ -4,7 +4,7 @@
   .nut-ellipsis-text {
     cursor: pointer;
     color: $ellipsis-expand-collapse-color;
-    display: inline;
+    display: inline-block;
   }
 
   .nut-ellipsis-wordbreak {

package/dist/packages/form/form.scss

@@ -1,6 +1,6 @@
 
 .form-layout-right .nut-form-item-label {
-  text-align: end;
+  text-align: right;
   font-size: 14px;
   padding-right: 24px;
   white-space: nowrap;
@@ -8,7 +8,7 @@
 
 .form-layout-left .nut-form-item-label {
   position: relative;
-  text-align: start;
+  text-align: left;
   font-size: 14px;
   padding-left: 12px;
   white-space: nowrap;
@@ -41,12 +41,14 @@
 
 [dir='rtl'] .form-layout-right .nut-form-item-label,
 .nut-rtl .form-layout-right .nut-form-item-label {
+  text-align: left;
   padding-right: 0;
   padding-left: 24px;
 }
 
 [dir='rtl'] .form-layout-left .nut-form-item-label,
 .nut-rtl .form-layout-left .nut-form-item-label {
+  text-align: right;
   padding-left: 0;
   padding-right: 12px;
 

package/dist/packages/formitem/formitem.scss

@@ -78,6 +78,7 @@
 [dir='rtl'] .nut-form-item,
 .nut-rtl .nut-form-item {
   &-label {
+    text-align: right;
     margin-right: 0;
     margin-left: $form-item-label-margin-right;
 
@@ -88,4 +89,22 @@
       }
     }
   }
+  &-body {
+    &-slots {
+      text-align: right;
+      .nut-icon-ArrowRight,
+      .nut-icon-ArrowLeft {
+        transform: rotateY(180deg);
+      }
+      .nut-input-text {
+        text-align: right;
+      }
+      .nut-textarea-textarea {
+        text-align: right;
+      }
+    }
+  }
+  &-tips {
+    text-align: right;
+  }
 }

package/dist/packages/popover/popover.scss

@@ -100,11 +100,11 @@
         border-bottom: none;
       }
 
-      &:hover {
-        cursor: pointer;
-        color: $popover-hover-text-color;
-        background-color: $popover-hover-background-color;
-      }
+      // &:hover:not(:only-child) {
+      //   cursor: pointer;
+      //   color: $popover-hover-text-color;
+      //   background-color: $popover-hover-background-color;
+      // }
 
       &:hover:nth-of-type(2) {
         border-radius: 8px 8px 0px 0px;
@@ -121,17 +121,20 @@
         width: 12px;
         height: 12px;
         font-size: 12px;
+        .nut-icon {
+          width: 12px;
+          height: 12px;
+          font-size: 12px;
+        }
       }
 
       &-name {
         width: 100%;
         word-break: keep-all;
-        margin-left: 4px;
+        margin: 0 6px 0 4px;
       }
 
       &-action-icon {
-        position: absolute;
-        right: $popover-menu-item-padding;
         display: flex;
         justify-content: center;
         align-items: center;
@@ -241,29 +244,6 @@
 
 [dir='rtl'] .nut-popover,
 .nut-rtl .nut-popover {
-  &-arrow {
-    &-left {
-      right: auto;
-      left: 0px;
-      border-left-color: currentcolor;
-      border-right-color: $popover-border-color;
-      border-right-width: medium;
-      border-left-width: 0;
-      margin-right: 0;
-      margin-left: -8px;
-    }
-
-    &-right {
-      left: auto;
-      right: 0px;
-      border-right-color: currentcolor;
-      border-left-color: $popover-border-color;
-      border-left-width: medium;
-      border-right-width: 0;
-      margin-left: 0;
-      margin-right: -8px;
-    }
-  }
   .nut-popover-content {
     .nut-popover-menu-item {
       &-name {