musae 0.3.7 → 0.3.9

package/dist/components/avatar/group.cjs

@@ -24,15 +24,14 @@ var _Group = function Group(_ref) {
   };
   var children = React.useMemo(function () {
     var _Children$toArray$red = React.Children.toArray(_children).reduce(function (prev, child, index) {
-        // @ts-ignore
-        var element = /*#__PURE__*/React.cloneElement(child, {
+        var _child = /*#__PURE__*/ /*#__PURE__*/React.isValidElement(child) ? /*#__PURE__*/React.cloneElement(child, {
           key: "avatars-".concat(index)
-        });
+        }) : child;
         // great than max, hide current node
         if (index >= max) {
-          prev[1].push(element);
+          prev[1].push(_child);
         } else {
-          prev[0].push(element);
+          prev[0].push(_child);
         }
         return prev;
       }, [[], []]),

package/dist/components/avatar/group.mjs

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useMemo, Children, cloneElement } from 'react';
+import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
 import { Context } from './context.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { AvatarClassToken } from '../../utils/class-name.mjs';
@@ -22,15 +22,14 @@ var _Group = function Group(_ref) {
   };
   var children = useMemo(function () {
     var _Children$toArray$red = Children.toArray(_children).reduce(function (prev, child, index) {
-        // @ts-ignore
-        var element = /*#__PURE__*/cloneElement(child, {
+        var _child = /*#__PURE__*/ /*#__PURE__*/isValidElement(child) ? /*#__PURE__*/cloneElement(child, {
           key: "avatars-".concat(index)
-        });
+        }) : child;
         // great than max, hide current node
         if (index >= max) {
-          prev[1].push(element);
+          prev[1].push(_child);
         } else {
-          prev[0].push(element);
+          prev[0].push(_child);
         }
         return prev;
       }, [[], []]),

package/dist/components/countdown/countdown.cjs

@@ -1,5 +1,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var _regeneratorRuntime = require('@babel/runtime/helpers/regeneratorRuntime');
+var _asyncToGenerator = require('@babel/runtime/helpers/asyncToGenerator');
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
 var React = require('react');
 var button = require('../button/button.cjs');
@@ -25,7 +27,8 @@ var Countdown = function Countdown(_ref) {
     _ref$ripple = _ref.ripple,
     ripple = _ref$ripple === void 0 ? true : _ref$ripple,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    onClick = _ref.onClick;
   var trigger = React.useRef(null);
   var counter = React.useRef(null);
   var stopper = React.useRef(null);
@@ -64,11 +67,27 @@ var Countdown = function Countdown(_ref) {
       }
     })) !== null && _counter$current$subs !== void 0 ? _counter$current$subs : null;
   });
-  var start = relax.useEvent(function (e) {
-    var _trigger$current2;
-    countdown();
-    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
-  });
+  var start = relax.useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
+      var _trigger$current2;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return Promise.resolve(onClick === null || onClick === void 0 ? void 0 : onClick(e));
+          case 2:
+            countdown();
+            (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
   return /*#__PURE__*/React.createElement(button.Button, {
     onClick: start,
     disabled: disabled || isCounting,

package/dist/components/countdown/countdown.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { CountdownProps } from "musae/types/countdown";
-declare const Countdown: ({ count, children, interval: _interval, disabled, variant, color, shape, size, ripple, className, style, }: CountdownProps) => React.JSX.Element;
+declare const Countdown: ({ count, children, interval: _interval, disabled, variant, color, shape, size, ripple, className, style, onClick, }: CountdownProps) => React.JSX.Element;
 export default Countdown;

package/dist/components/countdown/countdown.mjs

@@ -1,3 +1,5 @@
+import _regeneratorRuntime from '@babel/runtime/helpers/regeneratorRuntime';
+import _asyncToGenerator from '@babel/runtime/helpers/asyncToGenerator';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useState } from 'react';
 import { Button } from '../button/button.mjs';
@@ -23,7 +25,8 @@ var Countdown = function Countdown(_ref) {
     _ref$ripple = _ref.ripple,
     ripple = _ref$ripple === void 0 ? true : _ref$ripple,
     className = _ref.className,
-    style = _ref.style;
+    style = _ref.style,
+    onClick = _ref.onClick;
   var trigger = useRef(null);
   var counter = useRef(null);
   var stopper = useRef(null);
@@ -62,11 +65,27 @@ var Countdown = function Countdown(_ref) {
       }
     })) !== null && _counter$current$subs !== void 0 ? _counter$current$subs : null;
   });
-  var start = useEvent(function (e) {
-    var _trigger$current2;
-    countdown();
-    (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
-  });
+  var start = useEvent(/*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime().mark(function _callee(e) {
+      var _trigger$current2;
+      return _regeneratorRuntime().wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return Promise.resolve(onClick === null || onClick === void 0 ? void 0 : onClick(e));
+          case 2:
+            countdown();
+            (_trigger$current2 = trigger.current) === null || _trigger$current2 === void 0 || _trigger$current2.next(e);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function (_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }());
   return /*#__PURE__*/React.createElement(Button, {
     onClick: start,
     disabled: disabled || isCounting,

package/dist/components/form/field/field.cjs

@@ -14,6 +14,7 @@ var framerMotion = require('framer-motion');
 var theme = require('../../theme/theme.cjs');
 var useClassNames = require('../../../hooks/use-class-names.cjs');
 var componentToken = require('../../../utils/component-token.cjs');
+var useLocale = require('../../../locale/use-locale.cjs');
 
 var _excluded = ["required", "children", "className", "style"];
 var styles = {
@@ -29,18 +30,22 @@ var styles = {
  * if there is name prop, it will render
  */
 var Field = function Field(_ref) {
+  var _props$label;
   var required = _ref.required,
     _children = _ref.children,
     className$1 = _ref.className,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Form);
+  var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Form),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   var _useController = reactHookForm.useController({
       name: props.name,
       rules: {
         required: {
           value: required,
-          message: "".concat(props.name, " is required")
+          message: relax.toFunction(locale.required)((_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.name)
         }
       }
     }),
@@ -71,7 +76,7 @@ var Field = function Field(_ref) {
       }, relax.isRefable(_child) && {
         ref: ref
       }))), true];
-    }, [[], false]);
+    }, [[], false]).at(0);
   }, [_children, name, value, invalid, ref, onChange, onBlur]);
   var styled = {
     supporting: stylex.default.props(styles.supporting, theme.typography.body.small)
@@ -81,7 +86,7 @@ var Field = function Field(_ref) {
     required: required,
     className: classNames[className.FormClassToken.Item]
   }, /*#__PURE__*/React.createElement("div", {
-    className: className$1,
+    className: relax.clsx(classNames[className.FormClassToken.Field], className$1),
     style: style
   }, children), /*#__PURE__*/React.createElement("div", {
     className: relax.clsx(classNames[className.FormClassToken.FieldSupporting], styled.supporting.className),

package/dist/components/form/field/field.mjs

@@ -3,7 +3,7 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import React, { useMemo, Children, isValidElement, cloneElement } from 'react';
 import { useController } from 'react-hook-form';
-import { chain, isRefable, clsx } from '@aiszlab/relax';
+import { toFunction, chain, isRefable, clsx } from '@aiszlab/relax';
 import { FormClassToken } from '../../../utils/class-name.mjs';
 import _stylex from '../../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import Layout from './layout.mjs';
@@ -12,6 +12,7 @@ import { AnimatePresence } from 'framer-motion';
 import { typography } from '../../theme/theme.mjs';
 import { useClassNames } from '../../../hooks/use-class-names.mjs';
 import { ComponentToken } from '../../../utils/component-token.mjs';
+import { useLocale } from '../../../locale/use-locale.mjs';
 
 var _excluded = ["required", "children", "className", "style"];
 var styles = {
@@ -27,18 +28,22 @@ var styles = {
  * if there is name prop, it will render
  */
 var Field = function Field(_ref) {
+  var _props$label;
   var required = _ref.required,
     _children = _ref.children,
     className = _ref.className,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var classNames = useClassNames(ComponentToken.Form);
+  var _useLocale = useLocale(ComponentToken.Form),
+    _useLocale2 = _slicedToArray(_useLocale, 1),
+    locale = _useLocale2[0];
   var _useController = useController({
       name: props.name,
       rules: {
         required: {
           value: required,
-          message: "".concat(props.name, " is required")
+          message: toFunction(locale.required)((_props$label = props.label) !== null && _props$label !== void 0 ? _props$label : props.name)
         }
       }
     }),
@@ -69,7 +74,7 @@ var Field = function Field(_ref) {
       }, isRefable(_child) && {
         ref: ref
       }))), true];
-    }, [[], false]);
+    }, [[], false]).at(0);
   }, [_children, name, value, invalid, ref, onChange, onBlur]);
   var styled = {
     supporting: _stylex.props(styles.supporting, typography.body.small)
@@ -79,7 +84,7 @@ var Field = function Field(_ref) {
     required: required,
     className: classNames[FormClassToken.Item]
   }, /*#__PURE__*/React.createElement("div", {
-    className: className,
+    className: clsx(classNames[FormClassToken.Field], className),
     style: style
   }, children), /*#__PURE__*/React.createElement("div", {
     className: clsx(classNames[FormClassToken.FieldSupporting], styled.supporting.className),

package/dist/components/form/item.cjs

@@ -5,8 +5,12 @@ var _objectWithoutProperties = require('@babel/runtime/helpers/objectWithoutProp
 var React = require('react');
 var field = require('./field/field.cjs');
 var layout = require('./field/layout.cjs');
+var useClassNames = require('../../hooks/use-class-names.cjs');
+var componentToken = require('../../utils/component-token.cjs');
+var relax = require('@aiszlab/relax');
+var className = require('../../utils/class-name.cjs');
 
-var _excluded = ["required"];
+var _excluded = ["required", "className", "style"];
 /**
  * @description
  * item render
@@ -14,9 +18,14 @@ var _excluded = ["required"];
 var Item = function Item(_ref) {
   var _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
+    className$1 = _ref.className,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Form);
   if (props.name) {
     return /*#__PURE__*/React.createElement(field.default, _objectSpread(_objectSpread({}, props), {}, {
+      className: className$1,
+      style: style,
       name: props.name,
       required: required
     }));
@@ -26,10 +35,12 @@ var Item = function Item(_ref) {
     labelCol: props.labelCol,
     wrapperCol: props.wrapperCol,
     required: required,
-    className: props.className,
-    style: props.style,
-    space: true
-  }, props.children);
+    space: true,
+    className: classNames[className.FormClassToken.Item]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: relax.clsx(classNames[className.FormClassToken.Field], className$1),
+    style: style
+  }, props.children));
 };
 
 exports.default = Item;

package/dist/components/form/item.d.ts

@@ -1,9 +1,9 @@
-import { FormItemProps } from "musae/types/form";
+import type { FormItemProps } from "musae/types/form";
 import React from "react";
 import type { FieldValues } from "react-hook-form";
 /**
  * @description
  * item render
  */
-declare const Item: <T extends FieldValues = FieldValues>({ required, ...props }: FormItemProps<T>) => React.JSX.Element;
+declare const Item: <T extends FieldValues = FieldValues>({ required, className, style, ...props }: FormItemProps<T>) => React.JSX.Element;
 export default Item;

package/dist/components/form/item.mjs

@@ -3,8 +3,12 @@ import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProper
 import React from 'react';
 import Field from './field/field.mjs';
 import Layout from './field/layout.mjs';
+import { useClassNames } from '../../hooks/use-class-names.mjs';
+import { ComponentToken } from '../../utils/component-token.mjs';
+import { clsx } from '@aiszlab/relax';
+import { FormClassToken } from '../../utils/class-name.mjs';
 
-var _excluded = ["required"];
+var _excluded = ["required", "className", "style"];
 /**
  * @description
  * item render
@@ -12,9 +16,14 @@ var _excluded = ["required"];
 var Item = function Item(_ref) {
   var _ref$required = _ref.required,
     required = _ref$required === void 0 ? false : _ref$required,
+    className = _ref.className,
+    style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
+  var classNames = useClassNames(ComponentToken.Form);
   if (props.name) {
     return /*#__PURE__*/React.createElement(Field, _objectSpread(_objectSpread({}, props), {}, {
+      className: className,
+      style: style,
       name: props.name,
       required: required
     }));
@@ -24,10 +33,12 @@ var Item = function Item(_ref) {
     labelCol: props.labelCol,
     wrapperCol: props.wrapperCol,
     required: required,
-    className: props.className,
-    style: props.style,
-    space: true
-  }, props.children);
+    space: true,
+    className: classNames[FormClassToken.Item]
+  }, /*#__PURE__*/React.createElement("div", {
+    className: clsx(classNames[FormClassToken.Field], className),
+    style: style
+  }, props.children));
 };
 
 export { Item as default };

package/dist/components/otp-input/hooks.cjs

@@ -28,10 +28,7 @@ var useValue = function useValue(_ref) {
     var changed = Array.from(values);
     changed[index] = otp;
     var changedValue = changed.join("");
-    if (relax.isUndefined(_value)) {
-      setValue(changedValue);
-      return;
-    }
+    setValue(changedValue);
     onChange === null || onChange === void 0 || onChange(changedValue);
   });
   return {

package/dist/components/otp-input/hooks.mjs

@@ -1,5 +1,5 @@
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import { useControlledState, useEvent, isUndefined } from '@aiszlab/relax';
+import { useControlledState, useEvent } from '@aiszlab/relax';
 import { useMemo } from 'react';
 import { Keyboard } from '../../utils/keyboard.mjs';
 
@@ -28,10 +28,7 @@ var useValue = function useValue(_ref) {
     var changed = Array.from(values);
     changed[index] = otp;
     var changedValue = changed.join("");
-    if (isUndefined(_value)) {
-      setValue(changedValue);
-      return;
-    }
+    setValue(changedValue);
     onChange === null || onChange === void 0 || onChange(changedValue);
   });
   return {

package/dist/components/otp-input/otp-input.cjs

@@ -11,7 +11,9 @@ var OtpInput = function OtpInput(_ref) {
   var _ref$length = _ref.length,
     length = _ref$length === void 0 ? 6 : _ref$length,
     onChange = _ref.onChange,
-    _value = _ref.value;
+    _value = _ref.value,
+    className = _ref.className,
+    style = _ref.style;
   var _useValue = hooks.useValue({
       length: length,
       onChange: onChange,
@@ -63,8 +65,8 @@ var OtpInput = function OtpInput(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styled.otp.className,
-    style: styled.otp.style
+    className: relax.clsx(styled.otp.className, className),
+    style: _objectSpread(_objectSpread({}, styled.otp.style), style)
   }, value.map(function (item, index) {
     return /*#__PURE__*/React.createElement(input.default, {
       key: index,

package/dist/components/otp-input/otp-input.d.ts

@@ -1,4 +1,4 @@
 import React from "react";
 import type { OtpInputProps } from "musae/types/otp-input";
-declare const OtpInput: ({ length, onChange, value: _value }: OtpInputProps) => React.JSX.Element;
+declare const OtpInput: ({ length, onChange, value: _value, className, style }: OtpInputProps) => React.JSX.Element;
 export default OtpInput;

package/dist/components/otp-input/otp-input.mjs

@@ -3,13 +3,15 @@ import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
 import React, { useRef, useState } from 'react';
 import { useValue, useInputEvents } from './hooks.mjs';
 import Input from '../input/input.mjs';
-import { useEvent, clamp } from '@aiszlab/relax';
+import { useEvent, clamp, clsx } from '@aiszlab/relax';
 
 var OtpInput = function OtpInput(_ref) {
   var _ref$length = _ref.length,
     length = _ref$length === void 0 ? 6 : _ref$length,
     onChange = _ref.onChange,
-    _value = _ref.value;
+    _value = _ref.value,
+    className = _ref.className,
+    style = _ref.style;
   var _useValue = useValue({
       length: length,
       onChange: onChange,
@@ -61,8 +63,8 @@ var OtpInput = function OtpInput(_ref) {
     }
   };
   return /*#__PURE__*/React.createElement("div", {
-    className: styled.otp.className,
-    style: styled.otp.style
+    className: clsx(styled.otp.className, className),
+    style: _objectSpread(_objectSpread({}, styled.otp.style), style)
   }, value.map(function (item, index) {
     return /*#__PURE__*/React.createElement(Input, {
       key: index,

package/dist/components/popconfirm/popconfirm.cjs

@@ -56,17 +56,17 @@ var styles = {
     $$css: true
   }
 };
-var Popconfirm = function Popconfirm(_ref2) {
-  var content = _ref2.content,
-    title = _ref2.title,
-    onConfirm = _ref2.onConfirm,
-    onCancel = _ref2.onCancel,
-    className$1 = _ref2.className,
-    _ref2$placement = _ref2.placement,
-    placement = _ref2$placement === void 0 ? "top" : _ref2$placement,
-    _children = _ref2.children,
-    style = _ref2.style;
-  var _ref = React.useRef(null);
+var Popconfirm = function Popconfirm(_ref) {
+  var content = _ref.content,
+    title = _ref.title,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel,
+    className$1 = _ref.className,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top" : _ref$placement,
+    _children = _ref.children,
+    style = _ref.style;
+  var ref = React.useRef(null);
   var _useBoolean = relax.useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
@@ -74,7 +74,6 @@ var Popconfirm = function Popconfirm(_ref2) {
     turnOff = _useBoolean2$.turnOff,
     toggle = _useBoolean2$.toggle;
   var classNames = useClassNames.useClassNames(componentToken.ComponentToken.Popconfirm);
-  var childRef = relax.useRefs(_ref, _children.props.ref);
   var popperRef = React.useRef(null);
   var theme$1 = hooks.useTheme();
   var _useLocale = useLocale.useLocale(componentToken.ComponentToken.Popconfirm),
@@ -92,14 +91,22 @@ var Popconfirm = function Popconfirm(_ref2) {
     onCancel === null || onCancel === void 0 || onCancel();
     turnOff();
   });
-  // @ts-ignore
-  var children = /*#__PURE__*/React.cloneElement(_children, {
-    ref: childRef,
-    onClick: onClick
-  });
+  var children = React.useMemo(function () {
+    var props = {
+      ref: ref,
+      onClick: onClick
+    };
+    if (/*#__PURE__*/React.isValidElement(_children)) {
+      return /*#__PURE__*/React.cloneElement(_children, props);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      onClick: onClick
+    }, _children);
+  }, [ref, onClick, _children]);
   relax.useClickAway(function () {
     turnOff();
-  }, [popperRef, _ref]);
+  }, [popperRef, ref]);
   var styled = {
     popconfirm: {
       className: "musaex-2wmp0v musaex-16xn7b0 musaex-rvj5dj musaex-183ukxf musaex-1lsrmdg"
@@ -114,7 +121,7 @@ var Popconfirm = function Popconfirm(_ref2) {
     }
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(popper.default, {
-    trigger: _ref.current,
+    trigger: ref.current,
     open: isOpen,
     arrow: true,
     placement: placement,

package/dist/components/popconfirm/popconfirm.mjs

@@ -1,12 +1,12 @@
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
-import React, { useRef, cloneElement } from 'react';
+import React, { useRef, useMemo, isValidElement, cloneElement } from 'react';
 import _stylex from '../../node_modules/.pnpm/@stylexjs_stylex@0.7.5/node_modules/@stylexjs/stylex/lib/es/stylex.mjs';
 import { useClassNames } from '../../hooks/use-class-names.mjs';
 import { PopconfirmClassToken } from '../../utils/class-name.mjs';
 import Space from '../space/space.mjs';
 import { Button } from '../button/button.mjs';
-import { useBoolean, useRefs, useEvent, useClickAway, clsx } from '@aiszlab/relax';
+import { useBoolean, useEvent, useClickAway, clsx } from '@aiszlab/relax';
 import Popper from '../popper/popper.mjs';
 import { typography } from '../theme/theme.mjs';
 import { useTheme } from '../theme/hooks.mjs';
@@ -54,17 +54,17 @@ var styles = {
     $$css: true
   }
 };
-var Popconfirm = function Popconfirm(_ref2) {
-  var content = _ref2.content,
-    title = _ref2.title,
-    onConfirm = _ref2.onConfirm,
-    onCancel = _ref2.onCancel,
-    className = _ref2.className,
-    _ref2$placement = _ref2.placement,
-    placement = _ref2$placement === void 0 ? "top" : _ref2$placement,
-    _children = _ref2.children,
-    style = _ref2.style;
-  var _ref = useRef(null);
+var Popconfirm = function Popconfirm(_ref) {
+  var content = _ref.content,
+    title = _ref.title,
+    onConfirm = _ref.onConfirm,
+    onCancel = _ref.onCancel,
+    className = _ref.className,
+    _ref$placement = _ref.placement,
+    placement = _ref$placement === void 0 ? "top" : _ref$placement,
+    _children = _ref.children,
+    style = _ref.style;
+  var ref = useRef(null);
   var _useBoolean = useBoolean(),
     _useBoolean2 = _slicedToArray(_useBoolean, 2),
     isOpen = _useBoolean2[0],
@@ -72,7 +72,6 @@ var Popconfirm = function Popconfirm(_ref2) {
     turnOff = _useBoolean2$.turnOff,
     toggle = _useBoolean2$.toggle;
   var classNames = useClassNames(ComponentToken.Popconfirm);
-  var childRef = useRefs(_ref, _children.props.ref);
   var popperRef = useRef(null);
   var theme = useTheme();
   var _useLocale = useLocale(ComponentToken.Popconfirm),
@@ -90,14 +89,22 @@ var Popconfirm = function Popconfirm(_ref2) {
     onCancel === null || onCancel === void 0 || onCancel();
     turnOff();
   });
-  // @ts-ignore
-  var children = /*#__PURE__*/cloneElement(_children, {
-    ref: childRef,
-    onClick: onClick
-  });
+  var children = useMemo(function () {
+    var props = {
+      ref: ref,
+      onClick: onClick
+    };
+    if (/*#__PURE__*/isValidElement(_children)) {
+      return /*#__PURE__*/cloneElement(_children, props);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      ref: ref,
+      onClick: onClick
+    }, _children);
+  }, [ref, onClick, _children]);
   useClickAway(function () {
     turnOff();
-  }, [popperRef, _ref]);
+  }, [popperRef, ref]);
   var styled = {
     popconfirm: {
       className: "musaex-2wmp0v musaex-16xn7b0 musaex-rvj5dj musaex-183ukxf musaex-1lsrmdg"
@@ -112,7 +119,7 @@ var Popconfirm = function Popconfirm(_ref2) {
     }
   };
   return /*#__PURE__*/React.createElement(React.Fragment, null, children, /*#__PURE__*/React.createElement(Popper, {
-    trigger: _ref.current,
+    trigger: ref.current,
     open: isOpen,
     arrow: true,
     placement: placement,

package/dist/components/popover/hooks.cjs

@@ -60,5 +60,33 @@ var useIsOpen = function useIsOpen(popperRef) {
     disappear: disappear
   }];
 };
+/**
+ * @description
+ * used triggers
+ */
+var useTriggerBy = function useTriggerBy(triggerBy) {
+  var _triggerBy = React.useMemo(function () {
+    return new Set(relax.toArray(triggerBy));
+  }, [triggerBy]);
+  var isHoverable = React.useMemo(function () {
+    return _triggerBy.has("hover");
+  }, [_triggerBy]);
+  var isFocusable = React.useMemo(function () {
+    return _triggerBy.has("focus");
+  }, [_triggerBy]);
+  var isClickable = React.useMemo(function () {
+    return _triggerBy.has("click");
+  }, [_triggerBy]);
+  var isContextMenuable = React.useMemo(function () {
+    return _triggerBy.has("contextMenu");
+  }, [_triggerBy]);
+  return {
+    isHoverable: isHoverable,
+    isFocusable: isFocusable,
+    isClickable: isClickable,
+    isContextMenuable: isContextMenuable
+  };
+};
 
 exports.useIsOpen = useIsOpen;
+exports.useTriggerBy = useTriggerBy;