@nutui/nutui-react 1.5.11 → 1.5.12

package/CHANGELOG.md

@@ -1,3 +1,10 @@
+# v1.5.12
+`2023-07-12`
+
+* :bug: fix: 修复menu组件使用的overlay在小程序中高度计算错误问题 (#1189) @oasis-cloud
+* :bug: fix: 修复gridItem组件外部传入样式为空时冲掉组件内置样式问题 (#1214) @cuicuiworld
+
+
 # v1.5.11
 `2023-07-05`
 

package/dist/esm/GridItem.js

@@ -1,6 +1,6 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["children", "columnNum", "index", "gutter", "square", "text", "fontSize", "color", "icon", "iconColor", "iconSize", "parentIconSize", "parentIconColor", "border", "center", "reverse", "direction", "iconClassPrefix", "iconFontClassName", "onClick"];
+var _excluded = ["children", "columnNum", "index", "gutter", "square", "text", "fontSize", "color", "icon", "iconColor", "iconSize", "parentIconSize", "parentIconColor", "border", "center", "reverse", "direction", "iconClassPrefix", "iconFontClassName", "onClick", "style"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import React__default, { useContext } from 'react';
@@ -51,6 +51,7 @@ var GridItem = function GridItem(props) {
     iconClassPrefix = _defaultProps$props.iconClassPrefix,
     iconFontClassName = _defaultProps$props.iconFontClassName,
     onClick = _defaultProps$props.onClick,
+    style = _defaultProps$props.style,
     rest = _objectWithoutProperties(_defaultProps$props, _excluded);
   var b = cn('grid-item');
   var context = useContext(GridContext);
@@ -58,18 +59,18 @@ var GridItem = function GridItem(props) {
     return Number.isNaN(Number(value)) ? String(value) : "".concat(value, "px");
   };
   var rootStyle = function rootStyle() {
-    var style = {
+    var rootStyle = {
       flexBasis: "".concat(100 / +columnNum, "%")
     };
     if (square) {
-      style.paddingTop = "".concat(100 / +columnNum, "%");
+      rootStyle.paddingTop = "".concat(100 / +columnNum, "%");
     } else if (gutter) {
-      style.paddingRight = pxCheck(gutter);
+      rootStyle.paddingRight = pxCheck(gutter);
       if (index >= columnNum) {
-        style.marginTop = pxCheck(gutter);
+        rootStyle.marginTop = pxCheck(gutter);
       }
     }
-    return style;
+    return _objectSpread(_objectSpread({}, rootStyle), style);
   };
   var contentClass = function contentClass() {
     var _classNames;

package/dist/esm/MenuItem.js

@@ -103,37 +103,24 @@ var MenuItem = forwardRef(function (props, ref) {
   };
   var getPosition = function getPosition() {
     return direction === 'down' ? {
-      position: 'absolute',
-      height: "".concat(window.innerHeight, "px")
+      top: "".concat(position.top + position.height, "px")
     } : {
-      position: 'absolute',
-      bottom: '100%',
-      top: 'auto',
-      height: "".concat(window.innerHeight, "px")
+      bottom: "".concat(window.innerHeight - position.top, "px"),
+      top: 'auto'
     };
   };
   var placeholderStyle = function placeholderStyle() {
     if (direction === 'down') {
       return _objectSpread(_objectSpread({
-        height: "".concat(position.top + position.height, "px"),
-        top: 'auto',
-        bottom: '-100%'
+        height: "".concat(position.top + position.height, "px")
       }, isShow()), style);
     }
     return _objectSpread(_objectSpread({
       height: "".concat(window.innerHeight - position.top, "px"),
-      bottom: "auto",
-      top: '0'
+      top: 'auto'
     }, isShow()), style);
   };
-  return React__default.createElement("div", {
-    className: "nut-menu-item-container",
-    style: {
-      position: 'absolute',
-      left: 0,
-      right: 0
-    }
-  }, React__default.createElement("div", {
+  return React__default.createElement(React__default.Fragment, null, React__default.createElement("div", {
     className: "placeholder-element ".concat(classNames({
       up: direction === 'up'
     })),

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:39 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.12 Wed Jul 12 2023 16:58:10 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:39 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.12 Wed Jul 12 2023 16:58:10 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:39 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.12 Wed Jul 12 2023 16:58:10 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:39 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.12 Wed Jul 12 2023 16:58:10 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:39 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.12 Wed Jul 12 2023 16:58:10 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:39 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.12 Wed Jul 12 2023 16:58:10 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.mjs

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:19 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.12 Wed Jul 12 2023 16:57:49 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3301,6 +3301,7 @@ const GridItem = (props) => {
     iconClassPrefix,
     iconFontClassName,
     onClick,
+    style,
     ...rest
   } = {
     ...defaultProps$1i,
@@ -3312,18 +3313,18 @@ const GridItem = (props) => {
     return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
   };
   const rootStyle = () => {
-    const style = {
+    const rootStyle2 = {
       flexBasis: `${100 / +columnNum}%`
     };
     if (square) {
-      style.paddingTop = `${100 / +columnNum}%`;
+      rootStyle2.paddingTop = `${100 / +columnNum}%`;
     } else if (gutter) {
-      style.paddingRight = pxCheck2(gutter);
+      rootStyle2.paddingRight = pxCheck2(gutter);
       if (index >= columnNum) {
-        style.marginTop = pxCheck2(gutter);
+        rootStyle2.marginTop = pxCheck2(gutter);
       }
     }
-    return style;
+    return { ...rootStyle2, ...style };
   };
   const contentClass = () => {
     return classNames(b2("content"), {
@@ -9324,116 +9325,99 @@ const MenuItem = forwardRef((props, ref) => {
     return { display: "none" };
   };
   const getPosition = () => {
-    return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
-      position: "absolute",
-      bottom: "100%",
-      top: "auto",
-      height: `${window.innerHeight}px`
-    };
+    return direction === "down" ? { top: `${position.top + position.height}px` } : { bottom: `${window.innerHeight - position.top}px`, top: "auto" };
   };
   const placeholderStyle = () => {
     if (direction === "down") {
       return {
         height: `${position.top + position.height}px`,
-        top: "auto",
-        bottom: "-100%",
         ...isShow(),
         ...style
       };
     }
     return {
       height: `${window.innerHeight - position.top}px`,
-      bottom: `auto`,
-      top: "0",
+      top: "auto",
       ...isShow(),
       ...style
     };
   };
-  return /* @__PURE__ */ React__default.createElement(
+  return /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, /* @__PURE__ */ React__default.createElement(
     "div",
     {
-      className: "nut-menu-item-container",
-      style: { position: "absolute", left: 0, right: 0 }
-    },
-    /* @__PURE__ */ React__default.createElement(
-      "div",
-      {
-        className: `placeholder-element ${classNames({
-          up: direction === "up"
-        })}`,
-        style: placeholderStyle(),
-        onClick: () => parent.toggleItemShow(orderKey)
+      className: `placeholder-element ${classNames({
+        up: direction === "up"
+      })}`,
+      style: placeholderStyle(),
+      onClick: () => parent.toggleItemShow(orderKey)
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    Overlay,
+    {
+      overlayClass: "nut-menu__overlay",
+      style: getPosition(),
+      lockScroll: parent.lockScroll,
+      visible: _showPopup,
+      closeOnClickOverlay: parent.closeOnClickOverlay,
+      onClick: () => {
+        parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
       }
-    ),
-    /* @__PURE__ */ React__default.createElement(
-      Overlay,
-      {
-        overlayClass: "nut-menu__overlay",
-        style: getPosition(),
-        lockScroll: parent.lockScroll,
-        visible: _showPopup,
-        closeOnClickOverlay: parent.closeOnClickOverlay,
-        onClick: () => {
-          parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
-        }
+    }
+  ), /* @__PURE__ */ React__default.createElement(
+    "div",
+    {
+      className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
+      style: {
+        // ...getPosition(),
+        ...isShow()
       }
-    ),
+    },
     /* @__PURE__ */ React__default.createElement(
-      "div",
+      CSSTransition$1,
       {
-        className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
-        style: {
-          // ...getPosition(),
-          ...isShow()
-        }
+        in: _showPopup,
+        timeout: 100,
+        classNames: direction === "down" ? "menu-item" : "menu-item-up"
       },
-      /* @__PURE__ */ React__default.createElement(
-        CSSTransition$1,
-        {
-          in: _showPopup,
-          timeout: 100,
-          classNames: direction === "down" ? "menu-item" : "menu-item-up"
-        },
-        /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
-          return /* @__PURE__ */ React__default.createElement(
+      /* @__PURE__ */ React__default.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
+        return /* @__PURE__ */ React__default.createElement(
+          "div",
+          {
+            className: `nut-menu-item__option ${classNames({
+              active: item.value === _value
+            })}`,
+            key: item.text,
+            style: {
+              flexBasis: `${100 / columns}%`
+            },
+            onClick: () => {
+              handleClick2(item);
+            }
+          },
+          item.value === _value ? /* @__PURE__ */ React__default.createElement(
+            Icon,
+            {
+              classPrefix: iconClassPrefix,
+              fontClassName: iconFontClassName,
+              className: getIconCName(item.value, value),
+              name: optionsIcon,
+              color: activeColor
+            }
+          ) : null,
+          /* @__PURE__ */ React__default.createElement(
             "div",
             {
-              className: `nut-menu-item__option ${classNames({
-                active: item.value === _value
-              })}`,
-              key: item.text,
+              className: getIconCName(item.value, value),
               style: {
-                flexBasis: `${100 / columns}%`
-              },
-              onClick: () => {
-                handleClick2(item);
+                color: `${item.value === _value ? activeColor : ""}`
               }
             },
-            item.value === _value ? /* @__PURE__ */ React__default.createElement(
-              Icon,
-              {
-                classPrefix: iconClassPrefix,
-                fontClassName: iconFontClassName,
-                className: getIconCName(item.value, value),
-                name: optionsIcon,
-                color: activeColor
-              }
-            ) : null,
-            /* @__PURE__ */ React__default.createElement(
-              "div",
-              {
-                className: getIconCName(item.value, value),
-                style: {
-                  color: `${item.value === _value ? activeColor : ""}`
-                }
-              },
-              item.text
-            )
-          );
-        }), children)
-      )
+            item.text
+          )
+        );
+      }), children)
     )
-  );
+  ));
 });
 MenuItem.defaultProps = defaultProps$1a;
 MenuItem.displayName = "NutMenuItem";

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v1.5.11 Wed Jul 05 2023 11:12:19 GMT+0800 (中国标准时间)
+* @nutui/nutui-react v1.5.12 Wed Jul 12 2023 16:57:49 GMT+0800 (中国标准时间)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -3319,6 +3319,7 @@ var __publicField = (obj, key, value) => {
       iconClassPrefix,
       iconFontClassName,
       onClick,
+      style,
       ...rest
     } = {
       ...defaultProps$1i,
@@ -3330,18 +3331,18 @@ var __publicField = (obj, key, value) => {
       return Number.isNaN(Number(value)) ? String(value) : `${value}px`;
     };
     const rootStyle = () => {
-      const style = {
+      const rootStyle2 = {
         flexBasis: `${100 / +columnNum}%`
       };
       if (square) {
-        style.paddingTop = `${100 / +columnNum}%`;
+        rootStyle2.paddingTop = `${100 / +columnNum}%`;
       } else if (gutter) {
-        style.paddingRight = pxCheck2(gutter);
+        rootStyle2.paddingRight = pxCheck2(gutter);
         if (index >= columnNum) {
-          style.marginTop = pxCheck2(gutter);
+          rootStyle2.marginTop = pxCheck2(gutter);
         }
       }
-      return style;
+      return { ...rootStyle2, ...style };
     };
     const contentClass = () => {
       return classNames(b2("content"), {
@@ -9342,116 +9343,99 @@ Please add \`${key}Action\` when creating your handler.`);
       return { display: "none" };
     };
     const getPosition = () => {
-      return direction === "down" ? { position: "absolute", height: `${window.innerHeight}px` } : {
-        position: "absolute",
-        bottom: "100%",
-        top: "auto",
-        height: `${window.innerHeight}px`
-      };
+      return direction === "down" ? { top: `${position.top + position.height}px` } : { bottom: `${window.innerHeight - position.top}px`, top: "auto" };
     };
     const placeholderStyle = () => {
       if (direction === "down") {
         return {
           height: `${position.top + position.height}px`,
-          top: "auto",
-          bottom: "-100%",
           ...isShow(),
           ...style
         };
       }
       return {
         height: `${window.innerHeight - position.top}px`,
-        bottom: `auto`,
-        top: "0",
+        top: "auto",
         ...isShow(),
         ...style
       };
     };
-    return /* @__PURE__ */ React.createElement(
+    return /* @__PURE__ */ React.createElement(React.Fragment, null, /* @__PURE__ */ React.createElement(
       "div",
       {
-        className: "nut-menu-item-container",
-        style: { position: "absolute", left: 0, right: 0 }
-      },
-      /* @__PURE__ */ React.createElement(
-        "div",
-        {
-          className: `placeholder-element ${classNames({
-            up: direction === "up"
-          })}`,
-          style: placeholderStyle(),
-          onClick: () => parent.toggleItemShow(orderKey)
+        className: `placeholder-element ${classNames({
+          up: direction === "up"
+        })}`,
+        style: placeholderStyle(),
+        onClick: () => parent.toggleItemShow(orderKey)
+      }
+    ), /* @__PURE__ */ React.createElement(
+      Overlay,
+      {
+        overlayClass: "nut-menu__overlay",
+        style: getPosition(),
+        lockScroll: parent.lockScroll,
+        visible: _showPopup,
+        closeOnClickOverlay: parent.closeOnClickOverlay,
+        onClick: () => {
+          parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
         }
-      ),
-      /* @__PURE__ */ React.createElement(
-        Overlay,
-        {
-          overlayClass: "nut-menu__overlay",
-          style: getPosition(),
-          lockScroll: parent.lockScroll,
-          visible: _showPopup,
-          closeOnClickOverlay: parent.closeOnClickOverlay,
-          onClick: () => {
-            parent.closeOnClickOverlay && parent.toggleItemShow(orderKey);
-          }
+      }
+    ), /* @__PURE__ */ React.createElement(
+      "div",
+      {
+        className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
+        style: {
+          // ...getPosition(),
+          ...isShow()
         }
-      ),
+      },
       /* @__PURE__ */ React.createElement(
-        "div",
+        CSSTransition$1,
         {
-          className: direction === "down" ? "nut-menu-item__wrap" : "nut-menu-item__wrap-up",
-          style: {
-            // ...getPosition(),
-            ...isShow()
-          }
+          in: _showPopup,
+          timeout: 100,
+          classNames: direction === "down" ? "menu-item" : "menu-item-up"
         },
-        /* @__PURE__ */ React.createElement(
-          CSSTransition$1,
-          {
-            in: _showPopup,
-            timeout: 100,
-            classNames: direction === "down" ? "menu-item" : "menu-item-up"
-          },
-          /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
-            return /* @__PURE__ */ React.createElement(
+        /* @__PURE__ */ React.createElement("div", { className: "nut-menu-item__content" }, options2 == null ? void 0 : options2.map((item, index) => {
+          return /* @__PURE__ */ React.createElement(
+            "div",
+            {
+              className: `nut-menu-item__option ${classNames({
+                active: item.value === _value
+              })}`,
+              key: item.text,
+              style: {
+                flexBasis: `${100 / columns}%`
+              },
+              onClick: () => {
+                handleClick2(item);
+              }
+            },
+            item.value === _value ? /* @__PURE__ */ React.createElement(
+              Icon,
+              {
+                classPrefix: iconClassPrefix,
+                fontClassName: iconFontClassName,
+                className: getIconCName(item.value, value),
+                name: optionsIcon,
+                color: activeColor
+              }
+            ) : null,
+            /* @__PURE__ */ React.createElement(
               "div",
               {
-                className: `nut-menu-item__option ${classNames({
-                  active: item.value === _value
-                })}`,
-                key: item.text,
+                className: getIconCName(item.value, value),
                 style: {
-                  flexBasis: `${100 / columns}%`
-                },
-                onClick: () => {
-                  handleClick2(item);
+                  color: `${item.value === _value ? activeColor : ""}`
                 }
               },
-              item.value === _value ? /* @__PURE__ */ React.createElement(
-                Icon,
-                {
-                  classPrefix: iconClassPrefix,
-                  fontClassName: iconFontClassName,
-                  className: getIconCName(item.value, value),
-                  name: optionsIcon,
-                  color: activeColor
-                }
-              ) : null,
-              /* @__PURE__ */ React.createElement(
-                "div",
-                {
-                  className: getIconCName(item.value, value),
-                  style: {
-                    color: `${item.value === _value ? activeColor : ""}`
-                  }
-                },
-                item.text
-              )
-            );
-          }), children)
-        )
+              item.text
+            )
+          );
+        }), children)
       )
-    );
+    ));
   });
   MenuItem.defaultProps = defaultProps$1a;
   MenuItem.displayName = "NutMenuItem";

package/dist/packages/menuitem/menuitem.scss

@@ -65,15 +65,15 @@
 }
 
 .placeholder-element {
-  position: absolute;
-  top: -$menu-bar-line-height;
+  position: fixed;
+  top: $menu-placeholder-top;
   left: 0;
   right: 0;
   z-index: $menu-bar-opened-z-index;
   background-color: transparent;
 
   &.up {
-    bottom: -$menu-bar-line-height;
+    bottom: $menu-placeholder-top;
   }
 }