@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.3

package/dist/DatePicker/typings.d.ts

@@ -12,84 +12,153 @@ export type DatePickerRef = {
     setVisible: (value: boolean) => void;
 };
 export interface DatePickerProps extends Omit<FormControlBaseProps, 'name' | 'value' | 'defaultValue' | 'onChange'>, BaseProps, NativeProps, AnimationEventProps, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'className' | 'style' | 'readOnly' | 'disabled' | 'children'> {
+    /** 等价于原生 name 属性 */
     name?: string;
+    /** 选中项绑定值 */
     value?: string;
+    /** 默认值 */
     defaultValue?: string;
+    /** 只读 */
     readonly?: boolean;
+    /** 必输项*/
     required?: boolean;
+    /** 是否显示清除按钮 */
     clearable?: boolean;
+    /** 非范围选择时的占位内容 */
     placeholder?: string;
+    /** 是否展示“今天”按钮 */
     showToday?: boolean;
+    /** 显示类型 */
     type?: DateType;
+    /** 显示在输入框中的格式 */
     format?: string;
+    /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
     valueFormat?: string;
+    /** 设置ISO周数，其中1为星期一，7为星期日 */
     isoWeek?: boolean;
+    /** 表单校验错误提示 */
     error?: boolean;
+    /** 表单校验警告提示 */
     warning?: boolean;
+    /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
+    /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
+    /** 是否纯文本模式，即无边框 */
     plain?: boolean;
     size?: TypeAttributes.Size;
+    /** 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 */
     disabledDate?: (time: Date) => boolean;
     shortcuts?: Shortcuts[];
+    /** 是否追加到body下 */
     appendToBody?: boolean;
+    /** 点击确定按钮的回调 */
     onOk?: () => void;
     onChange?: (value: string | Date | number, event?: Event) => void;
+    /** 格式化 */
     formatter?: (value: Dayjs, text: number) => React.ReactElement;
 }
 export interface DatePickerRangeProps extends Omit<FormControlBaseProps, 'name' | 'value' | 'defaultValue' | 'onChange'>, BaseProps, AnimationEventProps, NativeProps {
+    /** 等价于原生 name 属性 */
     name?: [string, string];
+    /** 选中项绑定值 */
     value?: [string, string];
+    /** 默认值 */
     defaultValue?: [string, string];
+    /** 只读 */
     readOnly?: boolean;
+    /** 禁用 */
     disabled?: boolean;
+    /** 是否显示清除按钮 */
     clearable?: boolean;
+    /** 范围选择时开始日期的占位内容 */
     startPlaceholder?: string;
+    /** 范围选择时结束日期的占位内容 */
     endPlaceholder?: string;
+    /** 显示类型 */
     type?: DateRangeType;
+    /** 显示在输入框中的格式 */
     format?: string;
+    /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
     valueFormat?: string;
+    /** 选择范围时的分隔符 */
     rangeSeparator?: string;
+    /** 在范围选择器里取消两个日期面板之间的联动 */
     unlinkPanels?: boolean;
+    /** 设置ISO周数，其中1为星期一，7为星期日 */
     isoWeek?: boolean;
+    /** 表单校验错误提示 */
     error?: boolean;
+    /** 表单校验警告提示 */
     warning?: boolean;
+    /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
+    /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
+    /** 点击确定按钮的回调 */
     onOk?: () => void;
+    /** 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 */
     disabledDate?: (time: Date) => boolean;
     onChange?: (value: [string, string] | [Date, Date] | [number, number], event?: Event) => void;
+    /** 格式化 */
     formatter?: (value: Dayjs, text: number) => React.ReactElement;
 }
 export interface AllDatePickerProps extends Omit<FormControlBaseProps, 'name' | 'value' | 'defaultValue' | 'onChange'>, BaseProps, NativeProps, AnimationEventProps, Omit<React.AllHTMLAttributes<HTMLInputElement>, 'name' | 'value' | 'defaultValue' | 'size' | 'prefix' | 'type' | 'onInput' | 'onChange' | 'className' | 'style' | 'readOnly' | 'disabled' | 'children'> {
+    /** 等价于原生 name 属性 */
     name?: string | [string, string];
+    /** 选中项绑定值 */
     value?: string | Date | number | [string, string] | [Date, Date] | [number, number];
+    /** 默认值 */
     defaultValue?: string | Date | number | [string, string] | [Date, Date] | [number, number];
+    /** 只读 */
     readonly?: boolean;
+    /** 必输项*/
     required?: boolean;
+    /** 是否显示清除按钮 */
     clearable?: boolean;
+    /** 非范围选择时的占位内容 */
     placeholder?: string;
+    /** 是否展示“今天”按钮 */
     showToday?: boolean;
+    /** 显示类型 */
     type?: DateType | DateRangeType;
+    /** 显示在输入框中的格式 */
     format?: string;
+    /** 可选，绑定值的格式。 不指定则绑定值为 Date 对象 */
     valueFormat?: string;
+    /** 设置ISO周数，其中1为星期一，7为星期日 */
     isoWeek?: boolean;
+    /** 表单校验错误提示 */
     error?: boolean;
+    /** 表单校验警告提示 */
     warning?: boolean;
+    /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
+    /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
+    /** 是否纯文本模式，即无边框 */
     plain?: boolean;
     size?: TypeAttributes.Size;
+    /** 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。 */
     disabledDate?: (time: Date) => boolean;
     shortcuts?: Shortcuts[];
+    /** 是否追加到body下 */
     appendToBody?: boolean;
+    /** 点击确定按钮的回调 */
     onOk?: () => void;
     onChange?: (value: string | Date | number | [string, string] | [Date, Date] | [number, number], event?: Event) => void;
+    /** 格式化 */
     formatter?: (value: Dayjs, text: number) => React.ReactElement;
+    /** 只读 */
     readOnly?: boolean;
+    /** 禁用 */
     disabled?: boolean;
+    /** 范围选择时开始日期的占位内容 */
     startPlaceholder?: string;
+    /** 范围选择时结束日期的占位内容 */
     endPlaceholder?: string;
+    /** 选择范围时的分隔符 */
     rangeSeparator?: string;
+    /** 在范围选择器里取消两个日期面板之间的联动 */
     unlinkPanels?: boolean;
 }

package/dist/DateTimePicker/DateTimePicker.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { DateTimePickerRef } from './typings';
-declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").DatePickerProps, "type" | "value" | "name" | "defaultValue" | "onChange"> & {
+declare const _default: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<import("..").DatePickerProps, "name" | "value" | "type" | "defaultValue" | "onChange"> & {
     name?: string;
     value?: string;
     defaultValue?: string;

package/dist/DateTimePicker/DateTimePicker.js

@@ -45,6 +45,15 @@ var import_Util = require("../Util");
 var import_hooks = require("../hooks");
 var import_util = require("./util");
 var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
+  props = {
+    format: "YYYY-MM-DD HH:mm:ss",
+    readonly: true,
+    isoWeek: true,
+    clearable: true,
+    disabled: false,
+    placeholder: "请选择日期时间",
+    ...props
+  };
   const {
     name,
     readonly,
@@ -181,6 +190,7 @@ var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
       /* @__PURE__ */ import_react.default.createElement(import_Calendar.Calendar, { hasTime: true }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`time-header` }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`editor-wrap` }, /* @__PURE__ */ import_react.default.createElement(import_Input.Input, { placeholder: "选择日期", value: date, clearable: false })), /* @__PURE__ */ import_react.default.createElement("div", { className: e`editor-wrap` }, /* @__PURE__ */ import_react.default.createElement(import_Input.Input, { placeholder: "选择时间", value: time, clearable: false, onFocus: () => setShowTime(true), ref: timeReferenceElement }), /* @__PURE__ */ import_react.default.createElement(
         import_Transition.Transition,
         {
+          nodeRef: () => ({ current: timePanelRef.current.ref }),
           visible: showTime,
           name: "r-slide-up",
           transitionAppear: true,
@@ -215,13 +225,5 @@ var DateTimePicker = (0, import_react.forwardRef)((props, ref) => {
     )
   ));
 });
-DateTimePicker.defaultProps = {
-  format: "YYYY-MM-DD HH:mm:ss",
-  readonly: true,
-  isoWeek: true,
-  clearable: true,
-  disabled: false,
-  placeholder: "请选择日期时间"
-};
 DateTimePicker.displayName = "DateTimePicker";
 var DateTimePicker_default = (0, import_react.memo)(DateTimePicker);

package/dist/DateTimePicker/typings.d.ts

@@ -4,6 +4,7 @@ import { PopperOptionRef } from '../Popper';
 export type DateTimePickerRef = {
     inputInstance?: InputRef;
     popperInstRef: PopperOptionRef;
+    /** �Ƿ�׷�ӵ�body�� */
     appendToBody?: boolean;
     getValue: () => string;
     setValue: (value: string) => void;

package/dist/Descriptions/Descriptions.js

@@ -38,7 +38,7 @@ var import_hooks = require("../hooks");
 var import_DescriptionsContext = require("./DescriptionsContext");
 var import_DescriptionsRow = __toESM(require("./DescriptionsRow"));
 var Descriptions = (0, import_react.forwardRef)((props, ref) => {
-  const { border, column, direction, title, size, extra, classPrefix = "descriptions", className, style } = props;
+  const { border, column = 3, direction = "horizontal", title, size, extra, classPrefix = "descriptions", className, style } = props;
   const { b, e, m, is } = (0, import_hooks.useClassNames)(classPrefix);
   const getChildInstance = (0, import_hooks.useChildrenInstance)("DescriptionsItem");
   const filledNode = (0, import_react.useCallback)((node, span, count, isLast = false) => {
@@ -89,8 +89,4 @@ var Descriptions = (0, import_react.forwardRef)((props, ref) => {
   return /* @__PURE__ */ import_react.default.createElement("div", { ref, className: (0, import_classnames.default)(b(), { [m(size)]: size }, className), style }, (title || extra) && /* @__PURE__ */ import_react.default.createElement("div", { className: e`header` }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`title` }, title), /* @__PURE__ */ import_react.default.createElement("div", { className: e`extra` }, extra)), /* @__PURE__ */ import_react.default.createElement(import_DescriptionsContext.DescriptionsContext.Provider, { value: { direction, border } }, /* @__PURE__ */ import_react.default.createElement("div", { className: e`body` }, /* @__PURE__ */ import_react.default.createElement("table", { className: (0, import_classnames.default)(e`table`, is({ bordered: border })) }, /* @__PURE__ */ import_react.default.createElement("tbody", null, rows.map((row) => /* @__PURE__ */ import_react.default.createElement(import_DescriptionsRow.default, { row })))))));
 });
 Descriptions.displayName = "Descriptions";
-Descriptions.defaultProps = {
-  column: 3,
-  direction: "horizontal"
-};
 var Descriptions_default = (0, import_react.memo)(Descriptions);

package/dist/Descriptions/DescriptionsContext.d.ts

@@ -1,6 +1,8 @@
 /// <reference types="react" />
 interface DescriptionsContextProps {
+    /** 排列的方向 */
     direction?: 'vertical' | 'horizontal';
+    /** 是否带有边框 */
     border?: boolean;
 }
 export declare const DescriptionsContext: import("react").Context<DescriptionsContextProps>;

package/dist/Descriptions/typings.d.ts

@@ -1,19 +1,32 @@
 import React from 'react';
 import { BaseProps, NativeProps, TypeAttributes } from '../types/common';
 export interface DescriptionsProps extends BaseProps<React.ReactElement<DescriptionsItemProps> | React.ReactElement<DescriptionsItemProps>[]>, NativeProps<'--el-descriptions-table-border' | '--el-descriptions-item-bordered-label-background'> {
+    /** 是否带有边框 */
     border?: boolean;
+    /** 一行 Descriptions Item 的数量 */
     column?: number;
+    /** 排列的方向 */
     direction?: 'vertical' | 'horizontal';
+    /** 列表的尺寸 */
     size?: TypeAttributes.Size;
+    /** 标题文本，显示在左上方 */
     title?: string | React.ReactElement<any>;
+    /** 操作区文本，显示在右上方 */
     extra?: string | React.ReactElement<any>;
 }
 export interface DescriptionsItemProps extends BaseProps, NativeProps {
+    /** 标签文本 */
     label?: string | React.ReactElement<any>;
+    /** 列的数量 */
     span?: number;
+    /** 列的宽度，不同行相同列的宽度按最大值设定（如无 border ，宽度包含标签与内容） */
     width?: number | string;
+    /** 列的最小宽度，与 width 的区别是 width 是固定的，minWidth 会把剩余宽度按比例分配给设置了 minWidth 的列（如无 border，宽度包含标签与内容） */
     minWidth?: number | string;
+    /** 列的内容对齐方式（如无 border，对标签和内容均生效） */
     align?: 'left' | 'center' | 'right';
+    /** 列的标签对齐方式，若不设置该项，则使用内容的对齐方式（如无 border，请使用 align 参数） */
     labelAlign?: 'left' | 'center' | 'right';
+    /** 列标题自定义类名 */
     labelClassName?: string;
 }

package/dist/Dialog/Dialog.d.ts

@@ -8,7 +8,6 @@ declare const Comp: (props: DialogProps & {
 type InternalType = typeof Comp;
 interface CompInterface extends InternalType {
     displayName?: string;
-    defaultProps?: Partial<DialogProps>;
     body: typeof DialogBody;
     footer: typeof DialogFooter;
 }

package/dist/Dialog/Dialog.js

@@ -47,10 +47,10 @@ var import_DialogHeader = __toESM(require("./DialogHeader"));
 var import_useDraggable = require("./useDraggable");
 function InternalElDialog(props, ref) {
   const {
-    modal,
+    modal = true,
     closeOnClickModal = true,
     width = "50%",
-    overflow,
+    overflow = false,
     title,
     showClose,
     border,
@@ -136,6 +136,7 @@ function InternalElDialog(props, ref) {
     /* @__PURE__ */ import_react.default.createElement(
       import_Transition.Transition,
       {
+        nodeRef: wrapperRef,
         visible,
         transitionAppear: true,
         unmountOnExit: props.unmountOnExit || !draggable,
@@ -202,10 +203,6 @@ function InternalElDialog(props, ref) {
 }
 var Comp = (0, import_react.memo)((0, import_react.forwardRef)(InternalElDialog));
 var Dialog = Comp;
-Dialog.defaultProps = {
-  modal: true,
-  overflow: false
-};
 Dialog.body = import_DialogBody.default;
 Dialog.footer = import_DialogFooter.default;
 Dialog.displayName = "ElDialog";

package/dist/Dialog/DialogBody.js

@@ -57,7 +57,4 @@ var DialogBody = (0, import_react.memo)(
   })
 );
 DialogBody.displayName = "ElDialogBody";
-DialogBody.defaultProps = {
-  padding: "0 20px"
-};
 var DialogBody_default = DialogBody;

package/dist/Dialog/DialogContext.d.ts

@@ -1,13 +1,21 @@
 /// <reference types="react" />
 interface DialogContentProps {
+    /** 当设置为 true，Dialog 打开时会显示背景，点击背景会关闭 Dialog，如果不想关闭 Dialog，可以设置为 'static' */
     backdrop: boolean | 'static';
     setVisible: (visible: boolean) => void;
+    /** 隐藏时的回调函数 */
     doClose: () => void;
+    /** 是否可控 */
     isControlled: boolean;
+    /** 是否让 Dialog 的 header 和 footer 部分居中排列 */
     center: boolean;
+    /** body 内容过长时自动设置高度 */
     overflow: boolean;
+    /** 是否加载成功 */
     mounted?: boolean;
+    /** 是否有标题 */
     haveTitle: boolean;
+    /** 是否有按钮组 */
     haveFooter: boolean;
 }
 export declare const DialogContext: import("react").Context<DialogContentProps>;

package/dist/Dialog/DialogHeader.js

@@ -39,15 +39,12 @@ var import_hooks = require("../hooks");
 var import_DialogContext = require("./DialogContext");
 var DialogHeader = (0, import_react.memo)(
   (0, import_react.forwardRef)((props, ref) => {
-    const { showClose, classPrefix = "dialog", border } = props;
+    const { showClose = true, classPrefix = "dialog", border } = props;
     const { e, is } = (0, import_hooks.useClassNames)(classPrefix);
     const { doClose, center } = (0, import_react.useContext)(import_DialogContext.DialogContext);
     const isString = (0, import_react.useMemo)(() => typeof props.children === "string", [props.children]);
     return /* @__PURE__ */ import_react.default.createElement("div", { ref, className: (0, import_classnames.default)(e`header`, is({ border }), { "show-close": showClose }, props.headerClass) }, isString ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, /* @__PURE__ */ import_react.default.createElement("div", { className: e`title`, style: center ? { textAlign: "center" } : {} }, props.children), showClose && /* @__PURE__ */ import_react.default.createElement("button", { className: e`headerbtn`, onClick: doClose }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "xmark", className: e`close` }))) : props.children);
   })
 );
-DialogHeader.defaultProps = {
-  showClose: true
-};
 DialogHeader.displayName = "ElDialogHeader";
 var DialogHeader_default = DialogHeader;

package/dist/Dialog/typings.d.ts

@@ -2,47 +2,83 @@ import React from 'react';
 import { TransitionProps } from '../Transition';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 export interface DialogProps extends AnimationEventProps, BaseProps, NativeProps, TransitionProps {
+    /** 是否显示模态框（可控） */
     visible?: boolean;
+    /** 默认是否显示模态框 */
     defaultVisible?: boolean;
+    /** 是否需要遮罩层 */
     modal?: boolean;
+    /** 遮罩的自定义类名 */
     className?: string;
+    /** 是否可以通过点击 modal 关闭 Dialog */
     closeOnClickModal?: boolean;
+    /** 应用于 backdrop DOM 节点的 css class */
     backdropClassName?: string;
+    /** 对话框的宽度，默认值为 50% */
     width?: string | number;
+    /** header 部分的自定义 class 名 */
     headerClass?: string;
+    /** Dialog 对话框 Dialog 的标题， 也可通过ElDialog.header传入 */
     title?: string | React.ReactElement;
+    /** 当设置为 true, 显示关闭按钮 */
     showClose?: boolean;
+    /** 标题是否有边框 */
     border?: boolean;
+    /** dialog CSS 中的 margin-top 值，默认为 15vh */
     top?: string;
+    /** 是否让 Dialog 的 header 和 footer 部分居中排列 */
     center?: boolean;
+    /** 是否水平垂直对齐对话框 */
     alignCenter?: boolean;
+    /** 为 Dialog 启用可拖拽功能 */
     draggable?: boolean;
+    /** 拖动范围可以超出可视区 */
     overflow?: boolean;
+    /** 是否为全屏 Dialog */
     fullscreen?: boolean;
+    /** 是否在 Dialog 出现时将 body 滚动锁定 */
     lockScroll?: boolean;
+    /** 是否可以通过按下 ESC 关闭 Dialog */
+    /** 和原生的 CSS 的 z-index 相同，改变 z 轴的顺序 */
     zIndex?: number;
+    /** Dialog 打开的回调 */
     onOpen?: () => void;
+    /** Dialog 打开动画结束时的回调 */
     onOpened?: () => void;
+    /** Dialog 关闭的回调 */
     onClose?: () => void;
+    /** Dialog 关闭动画结束时的回调 */
     onClosed?: () => void;
+    /** 关闭弹窗函数 */
     close?: () => void;
+    /** 关闭前的回调，会暂停 Dialog 的关闭. 回调函数内执行 done 参数方法的时候才是真正关闭对话框的时候. */
     beforeClose?: DialogBeforeCloseFn;
 }
 type DoneFn = (cancel?: boolean) => void;
 export type DialogBeforeCloseFn = (done: DoneFn) => void;
 export interface DialogHeaderProps extends BaseProps {
+    /** header 部分的自定义 class 名 */
     headerClass?: string;
+    /** 当设置为 true, 显示关闭按钮 */
     showClose?: boolean;
+    /** 标题是否有边框 */
     border?: boolean;
+    /** 组件 CSS 类的前缀 */
     classPrefix?: string;
+    /** 隐藏时的回调函数 */
+    /** 自定义标题内联样式 */
     titleStyle?: React.CSSProperties;
 }
 export interface DialogBodyProps extends BaseProps, NativeProps {
+    /** 组件 CSS 类的前缀 */
     classPrefix?: string;
+    /** 内容区域padding */
     padding?: string | number;
 }
 export interface DialogFooterProps extends BaseProps, NativeProps {
+    /** 组件 CSS 类的前缀 */
     classPrefix?: string;
+    /** 内容位置 */
     position?: 'left' | 'center' | 'right';
 }
 export {};

package/dist/Divider/Divider.d.ts

@@ -1,9 +1,13 @@
 import React from 'react';
 import { BaseProps, NativeProps } from '../types/common';
 export interface DividerProps extends BaseProps, NativeProps<'--el-divider-text-bg-color' | '--el-divider-border-color' | '--el-divider-margin' | '--el-divider-tip-bg-color' | '--el-border-style'> {
+    /** 设置分割线方向 */
     direction?: 'horizontal' | 'vertical';
+    /** 设置分隔符样式 */
     borderStyle?: string;
+    /** 自定义文本样式 */
     textStyle?: React.CSSProperties;
+    /** 设置分割线文案的位置 */
     contentPosition?: 'left' | 'right' | 'center';
 }
 declare const _default: React.NamedExoticComponent<DividerProps>;

package/dist/Divider/Divider.js

@@ -36,17 +36,12 @@ var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
 var import_hooks = require("../hooks");
 var Divider = (props) => {
-  const { direction, borderStyle, contentPosition, classPrefix = "divider" } = props;
+  const { direction = "horizontal", borderStyle = "solid", contentPosition = "left", classPrefix = "divider" } = props;
   const { b, m, e, is } = (0, import_hooks.useClassNames)(classPrefix);
   return (
     // @ts-ignore
     /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), m(direction), props.className), style: { ...props.style, "--el-border-style": borderStyle } }, props.children && /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(e`text`, is(contentPosition)), style: props.textStyle }, props.children))
   );
 };
-Divider.defaultProps = {
-  direction: "horizontal",
-  borderStyle: "solid",
-  contentPosition: "left"
-};
 Divider.displayName = "Divider";
 var Divider_default = (0, import_react.memo)(Divider);

package/dist/Drawer/Drawer.js

@@ -44,6 +44,14 @@ var import_DrawerContext = require("./DrawerContext");
 var import_DrawerFooter = __toESM(require("./DrawerFooter"));
 var import_DrawerHeader = __toESM(require("./DrawerHeader"));
 function InternalComp(props, ref) {
+  props = (0, import_Util.mergeDefaultProps)(
+    {
+      placement: "right",
+      backdrop: true,
+      size: "small"
+    },
+    props
+  );
   const { backdrop, size, placement, children, onClose, classPrefix = "drawer" } = props;
   const { b, wb } = (0, import_hooks.useClassNames)(classPrefix);
   const [visible, setVisible, isControlled] = (0, import_hooks.useControlled)(props.visible, props.defaultVisible);
@@ -80,6 +88,7 @@ function InternalComp(props, ref) {
     /* @__PURE__ */ import_react.default.createElement(
       import_Transition.Transition,
       {
+        nodeRef: backdropRef,
         visible,
         transitionAppear: true,
         unmountOnExit: true,
@@ -98,6 +107,7 @@ function InternalComp(props, ref) {
     /* @__PURE__ */ import_react.default.createElement(
       import_Transition.Transition,
       {
+        nodeRef: ref || wrapperRef,
         visible,
         transitionAppear: true,
         unmountOnExit: true,
@@ -124,11 +134,6 @@ function InternalComp(props, ref) {
 }
 var Comp = (0, import_react.forwardRef)(InternalComp);
 var Drawer = Comp;
-Drawer.defaultProps = {
-  placement: "right",
-  backdrop: true,
-  size: "small"
-};
 Drawer.Header = import_DrawerHeader.default;
 Drawer.Body = import_DrawerBody.default;
 Drawer.Footer = import_DrawerFooter.default;

package/dist/Drawer/DrawerBody.js

@@ -38,7 +38,7 @@ var import_react = __toESM(require("react"));
 var import_Scrollbar = require("../Scrollbar");
 var import_hooks = require("../hooks");
 var DrawerBody = (0, import_react.forwardRef)((props, ref) => {
-  const { classPrefix = "drawer-body", padding } = props;
+  const { classPrefix = "drawer-body", padding = "0 20px" } = props;
   const { b } = (0, import_hooks.useClassNames)(classPrefix);
   const scrollbarInstance = (0, import_react.useRef)(null);
   const resizeFn = (0, import_debounce.default)(
@@ -57,7 +57,4 @@ var DrawerBody = (0, import_react.forwardRef)((props, ref) => {
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b(), props.className), ref, style: props.style }, /* @__PURE__ */ import_react.default.createElement(import_Scrollbar.Scrollbar, { ref: scrollbarInstance }, /* @__PURE__ */ import_react.default.createElement("div", { style: { padding } }, props.children)));
 });
 DrawerBody.displayName = "DrawerBody";
-DrawerBody.defaultProps = {
-  padding: "0 20px"
-};
 var DrawerBody_default = DrawerBody;

package/dist/Drawer/DrawerContext.d.ts

@@ -1,9 +1,19 @@
 /// <reference types="react" />
 interface DrawerContentProps {
+    /** 当设置为 true，Drawer 打开时会显示背景，点击背景会关闭 Drawer，如果不想关闭 Drawer，可以设置为 'static' */
     backdrop: boolean | 'static';
     setVisible: (visible: boolean) => void;
+    /** 隐藏时的回调函数 */
     onClose: () => void;
+    /** 是否可控 */
     isControlled: boolean;
 }
+/**
+ * @author	Parker
+ * @CreateTime	2022/3/20下午3:10:40
+ * @LastEditor	Parker
+ * @ModifyTime	2022/5/3 22:55:13
+ * @Description 模态框上下文
+ */
 export declare const DrawerContext: import("react").Context<DrawerContentProps>;
 export {};

package/dist/Drawer/DrawerHeader.js

@@ -38,7 +38,7 @@ var import_Icon = require("../Icon");
 var import_hooks = require("../hooks");
 var import_DrawerContext = require("./DrawerContext");
 var DrawerHeader = (props) => {
-  const { closeButton, onClose: onCloseHeader, classPrefix = "drawer", border } = props;
+  const { closeButton = true, onClose: onCloseHeader, classPrefix = "drawer", border } = props;
   const { b, is } = (0, import_hooks.useClassNames)(classPrefix);
   const { setVisible, isControlled, onClose } = (0, import_react.useContext)(import_DrawerContext.DrawerContext);
   const handleCloseDialog = (0, import_react.useCallback)(() => {
@@ -51,8 +51,5 @@ var DrawerHeader = (props) => {
   }, [isControlled, onClose, onCloseHeader, setVisible]);
   return /* @__PURE__ */ import_react.default.createElement("div", { className: (0, import_classnames.default)(b`header`, props.className, is({ border })), style: props.style }, /* @__PURE__ */ import_react.default.createElement("h4", { className: b`title`, style: props.titleStyle }, props.children), closeButton && /* @__PURE__ */ import_react.default.createElement("span", { className: b`header-close`, onClick: handleCloseDialog }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "xmark" })));
 };
-DrawerHeader.defaultProps = {
-  closeButton: true
-};
 DrawerHeader.displayName = "DrawerHeader";
 var DrawerHeader_default = DrawerHeader;

package/dist/Drawer/typings.d.ts

@@ -1,26 +1,42 @@
 import React from 'react';
 import { AnimationEventProps, BaseProps, NativeProps } from '../types/common';
 export interface DrawerProps extends AnimationEventProps, BaseProps, NativeProps {
+    /** 是否显示抽屉（可控） */
     visible?: boolean;
+    /** 默认是否显示抽屉 */
     defaultVisible?: boolean;
+    /** 当设置为 true，Drawer 打开时会显示背景，点击背景会关闭 Drawer，如果不想关闭 Drawer，可以设置为 'static' */
     backdrop?: boolean | 'static';
+    /** 应用于 backdrop DOM 节点的 css class */
     backdropClassName?: string;
+    /** 设置 Drawer 尺寸 */
     size?: 'full' | 'large' | 'md' | 'small' | 'xs';
+    /** 设置 Drawer 显示的位置 */
     placement?: 'top' | 'bottom' | 'right' | 'left';
+    /** 显示时的回调函数 */
     onOpen?: () => void;
+    /** 隐藏时的回调函数 */
     onClose?: () => void;
 }
 export interface DrawerHeaderProps extends BaseProps, NativeProps {
+    /** 当设置为 true, 显示关闭按钮 */
     closeButton?: boolean;
+    /** 标题是否有边框 */
     border?: boolean;
+    /** 组件 CSS 类的前缀 */
     classPrefix?: string;
+    /** 隐藏时的回调函数 */
     onClose?: () => void;
+    /** 自定义标题内联样式 */
     titleStyle?: React.CSSProperties;
 }
 export interface DrawerBodyProps extends BaseProps, NativeProps {
+    /** 组件 CSS 类的前缀 */
     classPrefix?: string;
+    /** 内容区域padding */
     padding?: string | number;
 }
 export interface DrawerFooterProps extends BaseProps, NativeProps {
+    /** 组件 CSS 类的前缀 */
     classPrefix?: string;
 }