@nutui/nutui-react 2.0.13 → 2.0.15-beta.0

package/CHANGELOG.md

@@ -1,3 +1,22 @@
+# v2.0.15
+`2023-08-30`
+
+* :sparkles: feat: support next.js (#1326) @oasis-cloud
+* :bug: fix: dialog content 失效 (#1323) @oasis-cloud
+* :bug: fix: space 复制按钮重复 (#1322) @oasis-cloud
+* 🔨 chore(tabs): 更新文档与 demo (#1339) @Eiinu
+
+
+# v2.0.14
+`2023-08-18`
+
+* :bug: fix: skeleton row 设置为 1 时, 宽度只能固定为70% (#1306) @ivan-My
+* :bug: fix: loading 构建产物增加类型注释 (#1320) @oasis-cloud
+* :bug: fix: space 构建产物增加类型注释 (#1321) @oasis-cloud
+* 📖 docs: dialog 指令式用法注意事项 (#1318) @oasis-cloud
+
+
+
 # v2.0.13
 `2023-08-16`
 

package/dist/esm/Ellipsis.js

@@ -23,9 +23,11 @@ function _objectSpread(target) {
   }
   return target;
 }
-import React__default, { useState, useRef, useLayoutEffect } from "react";
+import React__default, { useLayoutEffect, useEffect, useState, useRef } from "react";
 import classNames from "classnames";
 import { C as ComponentDefaults } from "./typings.js";
+import { c as canUseDom } from "./can-use-dom.js";
+var useIsomorphicLayoutEffect = canUseDom ? useLayoutEffect : useEffect;
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   content: "",
   direction: "end",
@@ -46,7 +48,7 @@ var Ellipsis = function Ellipsis2(props) {
   var ellipsis = useRef();
   var root = useRef(null);
   var classes = classNames(classPrefix, className);
-  useLayoutEffect(function() {
+  useIsomorphicLayoutEffect(function() {
     if (content) {
       createContainer();
     }

package/dist/esm/Popover.js

@@ -29,6 +29,7 @@ import Popup from "./Popup.js";
 import { g as getRect } from "./use-client-rect.js";
 import { C as ComponentDefaults } from "./typings.js";
 import { u as useClickAway } from "./use-click-away.js";
+import { c as canUseDom } from "./can-use-dom.js";
 import "./index.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   list: [],
@@ -65,7 +66,11 @@ var Popover = function Popover2(props) {
       }, 0);
     }
   }, [visible]);
-  var targetSet = [targetId ? document.querySelector("#".concat(targetId)) : popoverRef.current, popoverContentRef.current];
+  var element;
+  if (canUseDom) {
+    element = targetId && document.querySelector("#".concat(targetId));
+  }
+  var targetSet = [targetId ? element : popoverRef.current, popoverContentRef.current];
   useClickAway(function() {
     props.onClick && props.onClick();
     onClose2 && onClose2();

package/dist/esm/PullToRefresh.js

@@ -27,7 +27,8 @@ import React__default, { useState, useRef, useEffect } from "react";
 import { useDrag } from "@use-gesture/react";
 import { useSpring, animated } from "@react-spring/web";
 import { useConfig } from "./ConfigProvider.js";
-import { c as canUseDom, g as getScrollParent } from "./get-scroll-parent.js";
+import { g as getScrollParent } from "./get-scroll-parent.js";
+import { c as canUseDom } from "./can-use-dom.js";
 import { C as ComponentDefaults } from "./typings.js";
 function bound(position, min, max) {
   var ret = position;

package/dist/esm/Signature.js

@@ -26,6 +26,7 @@ function _objectSpread(target) {
 import React__default, { useRef, useState, useEffect, useImperativeHandle } from "react";
 import { useConfig } from "./ConfigProvider.js";
 import { C as ComponentDefaults } from "./typings.js";
+import { c as canUseDom } from "./can-use-dom.js";
 var defaultProps = _objectSpread(_objectSpread({}, ComponentDefaults), {}, {
   type: "png",
   lineWidth: 2,
@@ -41,20 +42,24 @@ var InternalSignature = function InternalSignature2(props, ref) {
   var _useState = useState(0), _useState2 = _slicedToArray(_useState, 2), canvasHeight = _useState2[0], setCanvasHeight = _useState2[1];
   var _useState3 = useState(0), _useState4 = _slicedToArray(_useState3, 2), canvasWidth = _useState4[0], setCanvasWidth = _useState4[1];
   var ctx = useRef(null);
-  var isCanvasSupported = function isCanvasSupported2() {
+  var checkCanvas = function checkCanvas2() {
     var elem = document.createElement("canvas");
     return !!(elem.getContext && elem.getContext("2d"));
   };
-  var isSupportTouch = "ontouchstart" in window;
+  var _useState5 = useState(false), _useState6 = _slicedToArray(_useState5, 2), isCanvasSupported = _useState6[0], setIsCanvasSupported = _useState6[1];
+  var isSupportTouch = canUseDom ? "ontouchstart" in window : false;
   var events = isSupportTouch ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"];
   useEffect(function() {
-    if (isCanvasSupported() && canvasRef.current && wrapRef.current) {
+    setIsCanvasSupported(checkCanvas);
+  }, []);
+  useEffect(function() {
+    if (isCanvasSupported && canvasRef.current && wrapRef.current) {
       ctx.current = canvasRef.current.getContext("2d");
       setCanvasWidth(wrapRef.current.offsetWidth);
       setCanvasHeight(wrapRef.current.offsetHeight);
       addEvent();
     }
-  }, []);
+  }, [isCanvasSupported]);
   var startEventHandler = function startEventHandler2(event) {
     event.preventDefault();
     if (ctx.current && canvasRef.current) {
@@ -135,11 +140,11 @@ var InternalSignature = function InternalSignature2(props, ref) {
   }, rest), React__default.createElement("div", {
     className: "".concat(classPrefix, "__inner"),
     ref: wrapRef
-  }, isCanvasSupported() ? React__default.createElement("canvas", {
+  }, React__default.createElement(React__default.Fragment, null, isCanvasSupported ? React__default.createElement("canvas", {
     ref: canvasRef,
     height: canvasHeight,
     width: canvasWidth
-  }) : React__default.createElement(React__default.Fragment, null, unsupported || React__default.createElement("p", {
+  }) : unsupported ? React__default.createElement(React__default.Fragment, null, unsupported) : React__default.createElement("p", {
     className: "".concat(classPrefix, "__unsupport")
   }, locale.signature.unsupported))));
 };

package/dist/esm/Skeleton/style/style.css

@@ -1 +1 @@
-.nut-avatar-group{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto}.nut-avatar-group .nut-avatar{border:1px solid #fff}.nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:-8px}.nut-avatar{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto;text-align:center}.nut-avatar .avatar-img{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);flex-shrink:0}.nut-avatar .icon{background-size:100% 100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nut-avatar .nut-icon__img{width:100%;height:100%}.nut-avatar .text{display:inline-block;width:100%;height:100%;text-align:center;overflow:hidden}.nut-avatar-large{width:var(--nutui-avatar-large-width, 60px);height:var(--nutui-avatar-large-height, 60px);line-height:var(--nutui-avatar-large-height, 60px)}.nut-avatar-small{width:var(--nutui-avatar-small-width, 32px);height:var(--nutui-avatar-small-height, 32px);line-height:var(--nutui-avatar-small-height, 32px)}.nut-avatar-normal{width:var(--nutui-avatar-normal-width, 40px);height:var(--nutui-avatar-normal-height, 40px);line-height:var(--nutui-avatar-normal-height, 40px)}.nut-avatar-round{border-radius:50%;overflow:hidden}.nut-avatar-square{border-radius:var(--nutui-avatar-square, 5px)}.nut-skeleton{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;width:100%}.nut-skeleton__content{display:flex}.nut-skeleton__content .avatar{margin-right:20px;background:var(--nutui-skeleton-background, rgb(239, 239, 239))!important}.nut-skeleton__content .nut-skeleton__block{width:var(--nutui-skeleton-line-width, 100%);height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, rgb(239, 239, 239));margin-top:10px;border-radius:var(--nutui-skeleton-line-border-radius, 0)}.nut-skeleton__content .nut-skeleton__block:last-child{width:70%}.nut-skeleton__content-line{width:100%;display:flex;flex-direction:column}.nut-skeleton__content-line .nut-skeleton__title{width:30%;height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, rgb(239, 239, 239))}.nut-skeleton__animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 80%);background-repeat:no-repeat;animation:nut-skeleton 2s ease-in-out 0s infinite}@keyframes nut-skeleton{0%{background-position-x:-500px}to{background-position-x:calc(500px + 100%)}}
+.nut-avatar-group{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto}.nut-avatar-group .nut-avatar{border:1px solid #fff}.nut-avatar-group .nut-avatar:not(:first-of-type){margin-left:-8px}.nut-avatar{background-size:100% 100%;background-repeat:no-repeat;background-position:center center;display:inline-block;position:relative;flex:0 0 auto;text-align:center}.nut-avatar .avatar-img{position:absolute;width:100%;height:100%;top:50%;left:50%;transform:translate(-50%,-50%);flex-shrink:0}.nut-avatar .icon{background-size:100% 100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.nut-avatar .nut-icon__img{width:100%;height:100%}.nut-avatar .text{display:inline-block;width:100%;height:100%;text-align:center;overflow:hidden}.nut-avatar-large{width:var(--nutui-avatar-large-width, 60px);height:var(--nutui-avatar-large-height, 60px);line-height:var(--nutui-avatar-large-height, 60px)}.nut-avatar-small{width:var(--nutui-avatar-small-width, 32px);height:var(--nutui-avatar-small-height, 32px);line-height:var(--nutui-avatar-small-height, 32px)}.nut-avatar-normal{width:var(--nutui-avatar-normal-width, 40px);height:var(--nutui-avatar-normal-height, 40px);line-height:var(--nutui-avatar-normal-height, 40px)}.nut-avatar-round{border-radius:50%;overflow:hidden}.nut-avatar-square{border-radius:var(--nutui-avatar-square, 5px)}.nut-skeleton{display:inline-block;position:relative;overflow:hidden;vertical-align:middle;width:100%}.nut-skeleton__content{display:flex}.nut-skeleton__content .avatar{margin-right:20px;background:var(--nutui-skeleton-background, rgb(239, 239, 239))!important}.nut-skeleton__content .nut-skeleton__block{width:var(--nutui-skeleton-line-width, 100%);height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, rgb(239, 239, 239));margin-top:10px;border-radius:var(--nutui-skeleton-line-border-radius, 0)}.nut-skeleton__content-line{width:100%;display:flex;flex-direction:column}.nut-skeleton__content-line .nut-skeleton__title{width:30%;height:var(--nutui-skeleton-line-height, 15px);background:var(--nutui-skeleton-background, rgb(239, 239, 239))}.nut-skeleton__content-line .nut-skeleton__block:last-child{width:70%}.nut-skeleton__animation{position:absolute;top:0;left:0;width:100%;height:100%;z-index:1;background:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.5) 50%,hsla(0,0%,100%,0) 80%);background-repeat:no-repeat;animation:nut-skeleton 2s ease-in-out 0s infinite}@keyframes nut-skeleton{0%{background-position-x:-500px}to{background-position-x:calc(500px + 100%)}}

package/dist/esm/Sticky.js

@@ -28,6 +28,7 @@ import classNames from "classnames";
 import { g as getScrollParent } from "./get-scroll-parent.js";
 import { g as getRect } from "./use-client-rect.js";
 import { C as ComponentDefaults } from "./typings.js";
+import "./can-use-dom.js";
 function useWatch(dep, callback) {
   var config = arguments.length > 2 && arguments[2] !== void 0 ? arguments[2] : {
     immediate: false

package/dist/esm/can-use-dom.js

@@ -0,0 +1,4 @@
+var canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
+export {
+  canUseDom as c
+};

package/dist/esm/get-scroll-parent.js

@@ -1,4 +1,4 @@
-var canUseDom = !!(typeof window !== "undefined" && typeof document !== "undefined" && window.document && window.document.createElement);
+import { c as canUseDom } from "./can-use-dom.js";
 var defaultRoot = canUseDom ? window : void 0;
 var overflowStylePatterns = ["scroll", "auto", "overlay"];
 function isElement(node) {
@@ -21,6 +21,5 @@ function getScrollParent(el) {
   return root;
 }
 export {
-  canUseDom as c,
   getScrollParent as g
 };

package/dist/esm/types/src/packages/sidenavbar/sidenavbar.d.ts

@@ -3,9 +3,9 @@ import { BasicComponent } from '@/utils/typings';
 export interface SideNavBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, BasicComponent {
     title: ReactNode;
     visible: boolean;
-    width?: string;
-    indent?: number;
-    position?: 'left' | 'right';
+    width: string;
+    indent: number;
+    position: 'left' | 'right';
     onClose: () => void;
 }
-export declare const SideNavBar: FunctionComponent<SideNavBarProps>;
+export declare const SideNavBar: FunctionComponent<Partial<SideNavBarProps>>;

package/dist/esm/types/src/packages/sidenavbar/sidenavbar.taro.d.ts

@@ -3,9 +3,9 @@ import { BasicComponent } from '@/utils/typings';
 export interface SideNavBarProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, BasicComponent {
     title: ReactNode;
     visible: boolean;
-    width?: string;
-    indent?: number;
-    position?: 'left' | 'right';
+    width: string;
+    indent: number;
+    position: 'left' | 'right';
     onClose: () => void;
 }
-export declare const SideNavBar: FunctionComponent<SideNavBarProps>;
+export declare const SideNavBar: FunctionComponent<Partial<SideNavBarProps>>;

package/dist/esm/types/src/utils/use-isomprphic-layout-effect.d.ts

@@ -0,0 +1,2 @@
+import { useEffect } from 'react';
+export declare const useIsomorphicLayoutEffect: typeof useEffect;

package/dist/locales/base.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:43:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:05:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/en-US.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:43:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:05:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/id-ID.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:43:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:05:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/tr-TR.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:43:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:05:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-CN.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:43:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:05:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-TW.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:43:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:05:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/locales/zh-UG.js

@@ -1,5 +1,5 @@
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:43:07 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:05:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */

package/dist/nutui.react.es.js

@@ -6,7 +6,7 @@ var __publicField = (obj, key, value) => {
 };
 var _a;
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:42:21 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:04:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -9138,10 +9138,10 @@ function deprecateDirectCall() {
 function isAnimatedString(value) {
   return is.str(value) && (value[0] == "#" || /\d/.test(value) || !isSSR() && cssVariableRegex.test(value) || value in (colors$1 || {}));
 }
-const useIsomorphicLayoutEffect = isSSR() ? useEffect : useLayoutEffect;
+const useIsomorphicLayoutEffect$1 = isSSR() ? useEffect : useLayoutEffect;
 const useIsMounted = () => {
   const isMounted = useRef(false);
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     isMounted.current = true;
     return () => {
       isMounted.current = false;
@@ -9423,7 +9423,7 @@ const withAnimated = (Component2, host2) => {
     };
     const observer = new PropsObserver(callback, deps);
     const observerRef = useRef();
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
       observerRef.current = observer;
       each(deps, (dep) => addFluidObserver(dep, observer));
       return () => {
@@ -11108,7 +11108,7 @@ function useSprings(length, props, deps) {
   const context = useContext(SpringContext);
   const prevContext = usePrev(context);
   const hasContext = context !== prevContext && hasProps(context);
-  useIsomorphicLayoutEffect(() => {
+  useIsomorphicLayoutEffect$1(() => {
     layoutId.current++;
     state.ctrls = ctrls.current;
     const {
@@ -18577,20 +18577,24 @@ const InternalSignature = (props, ref) => {
   const [canvasHeight, setCanvasHeight] = useState(0);
   const [canvasWidth, setCanvasWidth] = useState(0);
   const ctx2 = useRef(null);
-  const isCanvasSupported = () => {
+  const checkCanvas = () => {
     const elem = document.createElement("canvas");
     return !!(elem.getContext && elem.getContext("2d"));
   };
-  const isSupportTouch = "ontouchstart" in window;
+  const [isCanvasSupported, setIsCanvasSupported] = useState(false);
+  const isSupportTouch = canUseDom ? "ontouchstart" in window : false;
   const events = isSupportTouch ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"];
   useEffect(() => {
-    if (isCanvasSupported() && canvasRef.current && wrapRef.current) {
+    setIsCanvasSupported(checkCanvas);
+  }, []);
+  useEffect(() => {
+    if (isCanvasSupported && canvasRef.current && wrapRef.current) {
       ctx2.current = canvasRef.current.getContext("2d");
       setCanvasWidth(wrapRef.current.offsetWidth);
       setCanvasHeight(wrapRef.current.offsetHeight);
       addEvent();
     }
-  }, []);
+  }, [isCanvasSupported]);
   const startEventHandler = (event) => {
     event.preventDefault();
     if (ctx2.current && canvasRef.current) {
@@ -18663,7 +18667,7 @@ const InternalSignature = (props, ref) => {
       handleClearBtn();
     }
   }));
-  return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2} ${className}`, style, ...rest }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__inner`, ref: wrapRef }, isCanvasSupported() ? /* @__PURE__ */ React__default.createElement("canvas", { ref: canvasRef, height: canvasHeight, width: canvasWidth }) : /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, unsupported || /* @__PURE__ */ React__default.createElement("p", { className: `${classPrefix2}__unsupport` }, locale.signature.unsupported))));
+  return /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2} ${className}`, style, ...rest }, /* @__PURE__ */ React__default.createElement("div", { className: `${classPrefix2}__inner`, ref: wrapRef }, /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, isCanvasSupported ? /* @__PURE__ */ React__default.createElement("canvas", { ref: canvasRef, height: canvasHeight, width: canvasWidth }) : unsupported ? /* @__PURE__ */ React__default.createElement(React__default.Fragment, null, unsupported) : /* @__PURE__ */ React__default.createElement("p", { className: `${classPrefix2}__unsupport` }, locale.signature.unsupported))));
 };
 const Signature = React__default.forwardRef(InternalSignature);
 Signature.defaultProps = defaultProps$J;
@@ -20813,8 +20817,12 @@ const Popover = (props) => {
       }, 0);
     }
   }, [visible]);
+  let element;
+  if (canUseDom) {
+    element = targetId && document.querySelector(`#${targetId}`);
+  }
   const targetSet = [
-    targetId ? document.querySelector(`#${targetId}`) : popoverRef.current,
+    targetId ? element : popoverRef.current,
     popoverContentRef.current
   ];
   useClickAway(
@@ -22719,6 +22727,7 @@ const InternalCountDown = (props, ref) => {
 const CountDown = React__default.forwardRef(InternalCountDown);
 CountDown.defaultProps = defaultProps$k;
 CountDown.displayName = "NutCountDown";
+const useIsomorphicLayoutEffect = canUseDom ? useLayoutEffect : useEffect;
 const defaultProps$j = {
   ...ComponentDefaults,
   content: "",
@@ -22753,7 +22762,7 @@ const Ellipsis = (props) => {
   const ellipsis = useRef();
   const root2 = useRef(null);
   const classes = classNames(classPrefix$4, className);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (content) {
       createContainer();
     }

package/dist/nutui.react.umd.js

@@ -9,7 +9,7 @@ var __publicField = (obj, key, value) => {
   return value;
 };
 /*!
-* @nutui/nutui-react v2.0.13 Wed Aug 16 2023 13:42:21 GMT+0800 (China Standard Time)
+* @nutui/nutui-react v2.0.15 Wed Aug 30 2023 14:04:32 GMT+0800 (China Standard Time)
 * (c) 2023 @jdf2e.
 * Released under the MIT License.
 */
@@ -9156,10 +9156,10 @@ Please add \`${key}Action\` when creating your handler.`);
   function isAnimatedString(value) {
     return is.str(value) && (value[0] == "#" || /\d/.test(value) || !isSSR() && cssVariableRegex.test(value) || value in (colors$1 || {}));
   }
-  const useIsomorphicLayoutEffect = isSSR() ? React.useEffect : React.useLayoutEffect;
+  const useIsomorphicLayoutEffect$1 = isSSR() ? React.useEffect : React.useLayoutEffect;
   const useIsMounted = () => {
     const isMounted = React.useRef(false);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
       isMounted.current = true;
       return () => {
         isMounted.current = false;
@@ -9441,7 +9441,7 @@ Please add \`${key}Action\` when creating your handler.`);
       };
       const observer = new PropsObserver(callback, deps);
       const observerRef = React.useRef();
-      useIsomorphicLayoutEffect(() => {
+      useIsomorphicLayoutEffect$1(() => {
         observerRef.current = observer;
         each(deps, (dep) => addFluidObserver(dep, observer));
         return () => {
@@ -11126,7 +11126,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const context = React.useContext(SpringContext);
     const prevContext = usePrev(context);
     const hasContext = context !== prevContext && hasProps(context);
-    useIsomorphicLayoutEffect(() => {
+    useIsomorphicLayoutEffect$1(() => {
       layoutId.current++;
       state.ctrls = ctrls.current;
       const {
@@ -18595,20 +18595,24 @@ Please add \`${key}Action\` when creating your handler.`);
     const [canvasHeight, setCanvasHeight] = React.useState(0);
     const [canvasWidth, setCanvasWidth] = React.useState(0);
     const ctx2 = React.useRef(null);
-    const isCanvasSupported = () => {
+    const checkCanvas = () => {
       const elem = document.createElement("canvas");
       return !!(elem.getContext && elem.getContext("2d"));
     };
-    const isSupportTouch = "ontouchstart" in window;
+    const [isCanvasSupported, setIsCanvasSupported] = React.useState(false);
+    const isSupportTouch = canUseDom ? "ontouchstart" in window : false;
     const events = isSupportTouch ? ["touchstart", "touchmove", "touchend", "touchleave"] : ["mousedown", "mousemove", "mouseup", "mouseleave"];
     React.useEffect(() => {
-      if (isCanvasSupported() && canvasRef.current && wrapRef.current) {
+      setIsCanvasSupported(checkCanvas);
+    }, []);
+    React.useEffect(() => {
+      if (isCanvasSupported && canvasRef.current && wrapRef.current) {
         ctx2.current = canvasRef.current.getContext("2d");
         setCanvasWidth(wrapRef.current.offsetWidth);
         setCanvasHeight(wrapRef.current.offsetHeight);
         addEvent();
       }
-    }, []);
+    }, [isCanvasSupported]);
     const startEventHandler = (event) => {
       event.preventDefault();
       if (ctx2.current && canvasRef.current) {
@@ -18681,7 +18685,7 @@ Please add \`${key}Action\` when creating your handler.`);
         handleClearBtn();
       }
     }));
-    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__inner`, ref: wrapRef }, isCanvasSupported() ? /* @__PURE__ */ React.createElement("canvas", { ref: canvasRef, height: canvasHeight, width: canvasWidth }) : /* @__PURE__ */ React.createElement(React.Fragment, null, unsupported || /* @__PURE__ */ React.createElement("p", { className: `${classPrefix2}__unsupport` }, locale.signature.unsupported))));
+    return /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2} ${className}`, style, ...rest }, /* @__PURE__ */ React.createElement("div", { className: `${classPrefix2}__inner`, ref: wrapRef }, /* @__PURE__ */ React.createElement(React.Fragment, null, isCanvasSupported ? /* @__PURE__ */ React.createElement("canvas", { ref: canvasRef, height: canvasHeight, width: canvasWidth }) : unsupported ? /* @__PURE__ */ React.createElement(React.Fragment, null, unsupported) : /* @__PURE__ */ React.createElement("p", { className: `${classPrefix2}__unsupport` }, locale.signature.unsupported))));
   };
   const Signature = React.forwardRef(InternalSignature);
   Signature.defaultProps = defaultProps$J;
@@ -20831,8 +20835,12 @@ Please add \`${key}Action\` when creating your handler.`);
         }, 0);
       }
     }, [visible]);
+    let element;
+    if (canUseDom) {
+      element = targetId && document.querySelector(`#${targetId}`);
+    }
     const targetSet = [
-      targetId ? document.querySelector(`#${targetId}`) : popoverRef.current,
+      targetId ? element : popoverRef.current,
       popoverContentRef.current
     ];
     useClickAway(
@@ -22737,6 +22745,7 @@ Please add \`${key}Action\` when creating your handler.`);
   const CountDown = React.forwardRef(InternalCountDown);
   CountDown.defaultProps = defaultProps$k;
   CountDown.displayName = "NutCountDown";
+  const useIsomorphicLayoutEffect = canUseDom ? React.useLayoutEffect : React.useEffect;
   const defaultProps$j = {
     ...ComponentDefaults,
     content: "",
@@ -22771,7 +22780,7 @@ Please add \`${key}Action\` when creating your handler.`);
     const ellipsis = React.useRef();
     const root2 = React.useRef(null);
     const classes = classNames(classPrefix$4, className);
-    React.useLayoutEffect(() => {
+    useIsomorphicLayoutEffect(() => {
       if (content) {
         createContainer();
       }

package/dist/packages/skeleton/skeleton.scss

@@ -20,10 +20,6 @@
       background: $skeleton-background;
       margin-top: 10px;
       border-radius: $skeleton-line-border-radius;
-
-      &:last-child {
-        width: 70%;
-      }
     }
 
     &-line {
@@ -36,6 +32,9 @@
         height: $skeleton-line-height;
         background: $skeleton-background;
       }
+      .nut-skeleton__block:last-child {
+        width: 70%;
+      }
     }
   }