antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/cjs/components/cascader/cascader.js

@@ -29,10 +29,11 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const classPrefix = `adm-cascader`;
 const defaultProps = {
-  defaultValue: []
+  defaultValue: [],
+  destroyOnClose: true,
+  forceRender: false
 };
-
-const Cascader = p => {
+const Cascader = (0, _react.forwardRef)((p, ref) => {
   var _a;
 
   const {
@@ -43,6 +44,29 @@ const Cascader = p => {
     cancelText: locale.common.cancel,
     placeholder: locale.Cascader.placeholder
   }, p);
+  const [visible, setVisible] = (0, _usePropsValue.usePropsValue)({
+    value: props.visible,
+    defaultValue: false,
+    onChange: v => {
+      var _a;
+
+      if (v === false) {
+        (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      }
+    }
+  });
+  const actions = {
+    toggle: () => {
+      setVisible(v => !v);
+    },
+    open: () => {
+      setVisible(true);
+    },
+    close: () => {
+      setVisible(false);
+    }
+  };
+  (0, _react.useImperativeHandle)(ref, () => actions);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(Object.assign(Object.assign({}, props), {
     onChange: val => {
       var _a;
@@ -53,12 +77,12 @@ const Cascader = p => {
   const generateValueExtend = (0, _useCascaderValueExtend.useCascaderValueExtend)(props.options);
   const [innerValue, setInnerValue] = (0, _react.useState)(value);
   (0, _react.useEffect)(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
-  }, [props.visible]);
+  }, [visible]);
   (0, _react.useEffect)(() => {
-    if (!props.visible) {
+    if (!visible) {
       setInnerValue(value);
     }
   }, [value]);
@@ -69,20 +93,18 @@ const Cascader = p => {
   }, _react.default.createElement("a", {
     className: `${classPrefix}-header-button`,
     onClick: () => {
-      var _a, _b;
+      var _a;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     }
   }, props.cancelText), _react.default.createElement("div", {
     className: `${classPrefix}-header-title`
   }, props.title), _react.default.createElement("a", {
     className: `${classPrefix}-header-button`,
     onClick: () => {
-      var _a;
-
-      setValue(innerValue);
-      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+      setValue(innerValue, true);
+      setVisible(false);
     }
   }, props.confirmText)), _react.default.createElement("div", {
     className: `${classPrefix}-body`
@@ -93,30 +115,30 @@ const Cascader = p => {
 
       setInnerValue(val);
 
-      if (props.visible) {
+      if (visible) {
         (_a = props.onSelect) === null || _a === void 0 ? void 0 : _a.call(props, val, ext);
       }
     }
   })))));
 
   const popupElement = _react.default.createElement(_popup.default, {
-    visible: props.visible,
+    visible: visible,
     position: 'bottom',
     onMaskClick: () => {
-      var _a, _b;
+      var _a;
 
       (_a = props.onCancel) === null || _a === void 0 ? void 0 : _a.call(props);
-      (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      setVisible(false);
     },
     getContainer: props.getContainer,
-    destroyOnClose: true,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
     stopPropagation: props.stopPropagation
   }, cascaderElement);
 
-  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items));
-};
-
+  return _react.default.createElement(_react.default.Fragment, null, popupElement, (_a = props.children) === null || _a === void 0 ? void 0 : _a.call(props, generateValueExtend(value).items, actions));
+});
 exports.Cascader = Cascader;

package/cjs/components/cascader/index.d.ts

@@ -1,9 +1,29 @@
 /// <reference types="react" />
 import { prompt } from './prompt';
 import './cascader.less';
-export type { CascaderProps } from './cascader';
+export type { CascaderProps, CascaderRef, CascaderActions } from './cascader';
 export type { CascaderValue, CascaderValueExtend, CascaderOption, } from '../cascader-view';
-declare const _default: import("react").FC<import("./cascader").CascaderProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    options: import("../cascader-view").CascaderOption[];
+    value?: string[] | undefined;
+    defaultValue?: string[] | undefined;
+    placeholder?: string | undefined;
+    onSelect?: ((value: string[], extend: import("../cascader-view").CascaderValueExtend) => void) | undefined;
+    onConfirm?: ((value: string[], extend: import("../cascader-view").CascaderValueExtend) => void) | undefined;
+    onCancel?: (() => void) | undefined;
+    onClose?: (() => void) | undefined;
+    visible?: boolean | undefined;
+    title?: import("react").ReactNode;
+    confirmText?: import("react").ReactNode;
+    cancelText?: import("react").ReactNode;
+    children?: ((items: (import("../cascader-view").CascaderOption | null)[], actions: import("./cascader").CascaderActions) => import("react").ReactNode) | undefined;
+    onTabsChange?: ((index: number) => void) | undefined;
+    activeIcon?: import("react").ReactNode;
+} & Pick<import("../popup").PopupProps, "onClick" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation"> & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./cascader").CascaderActions>> & {
     prompt: typeof prompt;
     optionSkeleton: import("../cascader-view").CascaderOption[];
 };

package/cjs/components/cascader-view/cascader-view.css

@@ -2,7 +2,7 @@
   --height: auto;
 }
 .adm-cascader-view-tabs.adm-tabs {
-  --title-font-size: 14px;
+  --title-font-size: var(--adm-font-size-6);
   --content-padding: none;
 }
 .adm-cascader-view-header-title {
@@ -21,7 +21,7 @@
   --border-top: none;
 }
 .adm-cascader-view-item {
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
 }
 .adm-cascader-view-item-active {
   color: var(--adm-color-primary);

package/cjs/components/cascader-view/cascader-view.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CascaderValue = string;
 export declare type CascaderOption = {
@@ -17,5 +17,7 @@ export declare type CascaderViewProps = {
     defaultValue?: CascaderValue[];
     onChange?: (value: CascaderValue[], extend: CascaderValueExtend) => void;
     placeholder?: string;
+    onTabsChange?: (index: number) => void;
+    activeIcon?: ReactNode;
 } & NativeProps<'--height'>;
 export declare const CascaderView: FC<CascaderViewProps>;

package/cjs/components/cascader-view/cascader-view.js

@@ -27,6 +27,8 @@ var _optionSkeleton = require("./option-skeleton");
 
 var _skeleton = _interopRequireDefault(require("../skeleton"));
 
+var _ahooks = require("ahooks");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -52,7 +54,12 @@ const CascaderView = p => {
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, generateValueExtend(val));
     }
   }));
-  const [tabActiveKey, setTabActiveKey] = (0, _react.useState)(0);
+  const [tabActiveIndex, setTabActiveIndex] = (0, _react.useState)(0);
+  (0, _ahooks.useUpdateEffect)(() => {
+    var _a;
+
+    (_a = props.onTabsChange) === null || _a === void 0 ? void 0 : _a.call(props, tabActiveIndex);
+  }, [tabActiveIndex]);
   const generateValueExtend = (0, _useCascaderValueExtend.useCascaderValueExtend)(props.options);
   const levels = (0, _react.useMemo)(() => {
     const ret = [];
@@ -84,15 +91,15 @@ const CascaderView = p => {
     return ret;
   }, [value, props.options]);
   (0, _react.useEffect)(() => {
-    setTabActiveKey(levels.length - 1);
+    setTabActiveIndex(levels.length - 1);
   }, [value]);
   (0, _react.useEffect)(() => {
     const max = levels.length - 1;
 
-    if (tabActiveKey > max) {
-      setTabActiveKey(max);
+    if (tabActiveIndex > max) {
+      setTabActiveIndex(max);
     }
-  }, [tabActiveKey, levels]);
+  }, [tabActiveIndex, levels]);
 
   const onItemSelect = (selectValue, depth) => {
     const next = value.slice(0, depth);
@@ -107,14 +114,17 @@ const CascaderView = p => {
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix
   }, _react.default.createElement(_tabs.default, {
-    activeKey: tabActiveKey.toString(),
-    onChange: key => setTabActiveKey(parseInt(key)),
+    activeKey: tabActiveIndex.toString(),
+    onChange: key => {
+      const activeIndex = parseInt(key);
+      setTabActiveIndex(activeIndex);
+    },
     stretch: false,
     className: `${classPrefix}-tabs`
   }, levels.map((level, index) => {
     const selected = level.selected;
     return _react.default.createElement(_tabs.default.Tab, {
-      key: index,
+      key: index.toString(),
       title: _react.default.createElement("div", {
         className: `${classPrefix}-header-title`
       }, selected ? selected.label : props.placeholder),
@@ -137,7 +147,8 @@ const CascaderView = p => {
       animated: true
     })) : _react.default.createElement(_checkList.default, {
       value: [value[index]],
-      onChange: selectValue => onItemSelect(selectValue[0], index)
+      onChange: selectValue => onItemSelect(selectValue[0], index),
+      activeIcon: props.activeIcon
     }, level.options.map(option => {
       const active = value[index] === option.value;
       return _react.default.createElement(_checkList.default.Item, {

package/cjs/components/cascader-view/use-cascader-value-extend.js

@@ -34,21 +34,12 @@ function useCascaderValueExtend(options) {
   }, [options]);
   const generateIsLeaf = (0, _react.useMemo)(() => {
     return (0, _memoize.default)(val => {
-      var _a;
+      const children = val.reduce((currentOptions, v) => {
+        var _a;
 
-      let isLeaf = false;
-
-      for (const v of val) {
-        const target = options.find(option => option.value === v);
-
-        if (!target) {
-          break;
-        }
-
-        isLeaf = ((_a = target.children) === null || _a === void 0 ? void 0 : _a.length) === val.length;
-      }
-
-      return isLeaf;
+        return ((_a = currentOptions.find(option => option.value === v)) === null || _a === void 0 ? void 0 : _a.children) || [];
+      }, options);
+      return children.length === 0;
     }, val => JSON.stringify(val));
   }, [options]);
 

package/cjs/components/center-popup/center-popup.css

@@ -0,0 +1,36 @@
+.adm-center-popup {
+  --background-color: var(--adm-center-popup-background-color, var(--adm-color-background));
+  --border-radius: var(--adm-center-popup-border-radius, 8px);
+  --max-width: var(--adm-center-popup-max-width, 75vw);
+  --min-width: var(--adm-center-popup-min-width, 280px);
+  --z-index: var(--adm-center-popup-z-index, 1000);
+  position: fixed;
+  z-index: var(--z-index);
+}
+.adm-center-popup .adm-center-popup-mask {
+  z-index: 0;
+}
+.adm-center-popup-wrap {
+  position: fixed;
+  z-index: 1;
+  top: 50%;
+  left: 50%;
+  width: auto;
+  min-width: var(--min-width);
+  max-width: var(--max-width);
+  transform: translate(-50%, -50%);
+}
+.adm-center-popup-body {
+  background-color: var(--background-color);
+  border-radius: var(--border-radius);
+}
+.adm-center-popup-close {
+  position: absolute;
+  z-index: 100;
+  right: 8px;
+  top: 8px;
+  cursor: pointer;
+  padding: 4px;
+  font-size: 18px;
+  color: var(--adm-color-weak);
+}

package/cjs/components/center-popup/center-popup.d.ts

@@ -0,0 +1,7 @@
+import { FC, PropsWithChildren } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import { PopupBaseProps } from '../popup/popup-base-props';
+export declare type CenterPopupProps = PopupBaseProps & PropsWithChildren<{
+    role?: string;
+}> & NativeProps<'--background-color' | '--border-radius' | '--max-width' | '--min-width' | '--z-index'>;
+export declare const CenterPopup: FC<CenterPopupProps>;

package/cjs/components/center-popup/center-popup.js

@@ -0,0 +1,131 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CenterPopup = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _renderToContainer = require("../../utils/render-to-container");
+
+var _mask = _interopRequireDefault(require("../mask"));
+
+var _withStopPropagation = require("../../utils/with-stop-propagation");
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _ahooks = require("ahooks");
+
+var _web = require("@react-spring/web");
+
+var _useInnerVisible = require("../../utils/use-inner-visible");
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _nativeProps = require("../../utils/native-props");
+
+var _shouldRender = require("../../utils/should-render");
+
+var _useLockScroll = require("../../utils/use-lock-scroll");
+
+var _antdMobileIcons = require("antd-mobile-icons");
+
+var _popupBaseProps = require("../popup/popup-base-props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+const defaultProps = Object.assign(Object.assign({}, _popupBaseProps.defaultPopupBaseProps), {
+  getContainer: null
+});
+
+const CenterPopup = p => {
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const unmountedRef = (0, _ahooks.useUnmountedRef)();
+  const style = (0, _web.useSpring)({
+    scale: props.visible ? 1 : 0.8,
+    opacity: props.visible ? 1 : 0,
+    config: {
+      mass: 1.2,
+      tension: 200,
+      friction: 25,
+      clamp: true
+    },
+    onRest: () => {
+      var _a, _b;
+
+      if (unmountedRef.current) return;
+      setActive(props.visible);
+
+      if (props.visible) {
+        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
+      } else {
+        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    }
+  });
+  const [active, setActive] = (0, _react.useState)(props.visible);
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
+    if (props.visible) {
+      setActive(true);
+    }
+  }, [props.visible]);
+  const ref = (0, _react.useRef)(null);
+  (0, _useLockScroll.useLockScroll)(ref, props.disableBodyScroll && active);
+  const maskVisible = (0, _useInnerVisible.useInnerVisible)(active && props.visible);
+
+  const body = _react.default.createElement("div", {
+    className: (0, _classnames.default)('adm-center-popup-body', props.bodyClassName),
+    style: props.bodyStyle
+  }, props.children);
+
+  const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: 'adm-center-popup',
+    style: {
+      display: active ? undefined : 'none',
+      pointerEvents: active ? undefined : 'none'
+    }
+  }, props.mask && _react.default.createElement(_mask.default, {
+    visible: maskVisible,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose,
+    onMaskClick: e => {
+      var _a, _b;
+
+      (_a = props.onMaskClick) === null || _a === void 0 ? void 0 : _a.call(props, e);
+
+      if (props.closeOnMaskClick) {
+        (_b = props.onClose) === null || _b === void 0 ? void 0 : _b.call(props);
+      }
+    },
+    style: props.maskStyle,
+    className: (0, _classnames.default)('adm-center-popup-mask', props.maskClassName),
+    disableBodyScroll: false,
+    stopPropagation: props.stopPropagation
+  }), _react.default.createElement("div", {
+    className: 'adm-center-popup-wrap',
+    role: props.role,
+    "aria-label": props['aria-label']
+  }, _react.default.createElement(_web.animated.div, {
+    style: style,
+    ref: ref
+  }, props.showCloseButton && _react.default.createElement("a", {
+    className: (0, _classnames.default)('adm-center-popup-close', 'adm-plain-anchor'),
+    onClick: () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    }
+  }, _react.default.createElement(_antdMobileIcons.CloseOutline, null)), body)))));
+  return _react.default.createElement(_shouldRender.ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, (0, _renderToContainer.renderToContainer)(props.getContainer, node));
+};
+
+exports.CenterPopup = CenterPopup;

package/cjs/components/center-popup/center-popup.patch.css

@@ -0,0 +1,11 @@
+.adm-center-popup {
+  z-index: 1000;
+}
+.adm-center-popup-wrap {
+  min-width: 280px;
+  max-width: 75vw;
+}
+.adm-center-popup-body {
+  background-color: #ffffff;
+  border-radius: 8px;
+}

package/cjs/components/center-popup/index.d.ts

@@ -0,0 +1,4 @@
+import './center-popup.less';
+import { CenterPopup } from './center-popup';
+export type { CenterPopupProps } from './center-popup';
+export default CenterPopup;

package/cjs/components/center-popup/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("./center-popup.css");
+
+var _centerPopup2 = require("./center-popup");
+
+var _default = _centerPopup2.CenterPopup;
+exports.default = _default;

package/cjs/components/check-list/check-list.css

@@ -1,5 +1,5 @@
 .adm-check-list-item-extra {
-  font-size: 16px;
+  font-size: var(--adm-font-size-8);
   line-height: 1;
   color: var(--adm-color-primary);
 }

package/cjs/components/checkbox/checkbox.css

@@ -1,6 +1,6 @@
 .adm-checkbox {
   --icon-size: 22px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --gap: 8px;
   display: inline-flex;
   vertical-align: text-bottom;
@@ -41,13 +41,13 @@
 .adm-checkbox.adm-checkbox-disabled .adm-checkbox-icon.adm-checkbox-icon {
   color: #b7b7b7;
   border-color: var(--adm-color-light);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-checkbox .adm-checkbox-custom-icon {
   font-size: var(--icon-size);
 }
 .adm-checkbox.adm-checkbox-indeterminate .adm-checkbox-icon {
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   color: var(--adm-color-primary);
 }
 .adm-checkbox-content {

package/cjs/components/checkbox/checkbox.d.ts

@@ -1,4 +1,4 @@
-import React, { FC } from 'react';
+import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type CheckboxValue = string | number;
 export declare type CheckboxProps = {
@@ -13,4 +13,24 @@ export declare type CheckboxProps = {
     icon?: (checked: boolean, indeterminate: boolean) => React.ReactNode;
     children?: React.ReactNode;
 } & NativeProps<'--icon-size' | '--font-size' | '--gap'>;
-export declare const Checkbox: FC<CheckboxProps>;
+export declare type CheckboxRef = {
+    check: () => void;
+    uncheck: () => void;
+    toggle: () => void;
+};
+export declare const Checkbox: React.ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => React.ReactNode) | undefined;
+    children?: React.ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--font-size" | "--icon-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<CheckboxRef>>;

package/cjs/components/checkbox/checkbox.js

@@ -38,8 +38,7 @@ const defaultProps = {
   defaultChecked: false,
   indeterminate: false
 };
-
-const Checkbox = p => {
+const Checkbox = (0, _react.forwardRef)((p, ref) => {
   const groupContext = (0, _react.useContext)(_groupContext.CheckboxGroupContext);
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   let [checked, setChecked] = (0, _usePropsValue.usePropsValue)({
@@ -80,6 +79,18 @@ const Checkbox = p => {
     disabled = disabled || groupContext.disabled;
   }
 
+  (0, _react.useImperativeHandle)(ref, () => ({
+    check: () => {
+      setChecked(true);
+    },
+    uncheck: () => {
+      setChecked(false);
+    },
+    toggle: () => {
+      setChecked(!checked);
+    }
+  }));
+
   const renderIcon = () => {
     if (props.icon) {
       return _react.default.createElement("div", {
@@ -108,6 +119,5 @@ const Checkbox = p => {
   }), renderIcon(), props.children && _react.default.createElement("div", {
     className: `${classPrefix}-content`
   }, props.children)));
-};
-
+});
 exports.Checkbox = Checkbox;

package/cjs/components/checkbox/index.d.ts

@@ -1,8 +1,23 @@
 /// <reference types="react" />
 import './checkbox.less';
-export type { CheckboxValue, CheckboxProps } from './checkbox';
+export type { CheckboxValue, CheckboxProps, CheckboxRef } from './checkbox';
 export type { CheckboxGroupProps } from './group';
-declare const _default: import("react").FC<import("./checkbox").CheckboxProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    checked?: boolean | undefined;
+    defaultChecked?: boolean | undefined;
+    disabled?: boolean | undefined;
+    onChange?: ((checked: boolean) => void) | undefined;
+    value?: import("./checkbox").CheckboxValue | undefined;
+    indeterminate?: boolean | undefined;
+    block?: boolean | undefined;
+    id?: string | undefined;
+    icon?: ((checked: boolean, indeterminate: boolean) => import("react").ReactNode) | undefined;
+    children?: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--font-size" | "--icon-size" | "--gap", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./checkbox").CheckboxRef>> & {
     Group: import("react").FC<import("./group").CheckboxGroupProps>;
 };
 export default _default;

package/cjs/components/checkbox/native-input.js

@@ -7,23 +7,25 @@ exports.NativeInput = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _ahooks = require("ahooks");
+
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const NativeInput = props => {
   const inputRef = (0, _react.useRef)(null);
+  const handleClick = (0, _ahooks.useMemoizedFn)(e => {
+    e.stopPropagation();
+    e.stopImmediatePropagation();
+    const latestChecked = e.target.checked;
+    if (latestChecked === props.checked) return;
+    props.onChange(latestChecked);
+  });
   (0, _react.useEffect)(() => {
     if (props.disabled) return;
     if (!inputRef.current) return;
     const input = inputRef.current;
-
-    function handleClick(e) {
-      e.stopPropagation();
-      e.stopImmediatePropagation();
-      props.onChange(input.checked);
-    }
-
     input.addEventListener('click', handleClick);
     return () => {
       input.removeEventListener('click', handleClick);
@@ -31,7 +33,7 @@ const NativeInput = props => {
   }, [props.disabled, props.onChange]);
   return _react.default.createElement("input", {
     ref: inputRef,
-    type: 'checkbox',
+    type: props.type,
     checked: props.checked,
     onChange: () => {},
     disabled: props.disabled,