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

package/cjs/components/date-picker/date-picker-date-utils.js

@@ -60,21 +60,6 @@ function generateDatePickerColumns(selected, min, max, precision, renderLabel, f
   const maxMinute = max.getMinutes();
   const maxSecond = max.getSeconds();
   const rank = precisionRankRecord[precision];
-
-  if (rank >= precisionRankRecord.year) {
-    const years = [];
-
-    for (let i = minYear; i <= maxYear; i++) {
-      const value = i.toString();
-      years.push({
-        label: renderLabel ? renderLabel('year', i) : value,
-        value
-      });
-    }
-
-    ret.push(years);
-  }
-
   const selectedYear = parseInt(selected[0]);
   const firstDayInSelectedMonth = (0, _dayjs.default)(convertStringArrayToDate([selected[0], selected[1], '1']));
   const selectedMonth = parseInt(selected[1]);
@@ -115,6 +100,18 @@ function generateDatePickerColumns(selected, min, max, precision, renderLabel, f
     return column;
   };
 
+  if (rank >= precisionRankRecord.year) {
+    const lower = minYear;
+    const upper = maxYear;
+    const years = generateColumn(lower, upper, 'year');
+    ret.push(years.map(v => {
+      return {
+        label: renderLabel('year', v),
+        value: v.toString()
+      };
+    }));
+  }
+
   if (rank >= precisionRankRecord.month) {
     const lower = isInMinYear ? minMonth : 1;
     const upper = isInMaxYear ? maxMonth : 12;

package/cjs/components/date-picker/date-picker-week-utils.js

@@ -39,21 +39,6 @@ function generateDatePickerColumns(selected, min, max, precision, renderLabel, f
   const minYear = min.getFullYear();
   const maxYear = max.getFullYear();
   const rank = precisionRankRecord[precision];
-
-  if (rank >= precisionRankRecord.year) {
-    const years = [];
-
-    for (let i = minYear; i <= maxYear; i++) {
-      const value = i.toString();
-      years.push({
-        label: renderLabel ? renderLabel('year', i) : value,
-        value
-      });
-    }
-
-    ret.push(years);
-  }
-
   const selectedYear = parseInt(selected[0]);
   const isInMinYear = selectedYear === minYear;
   const isInMaxYear = selectedYear === maxYear;
@@ -91,6 +76,18 @@ function generateDatePickerColumns(selected, min, max, precision, renderLabel, f
     return column;
   };
 
+  if (rank >= precisionRankRecord.year) {
+    const lower = minYear;
+    const upper = maxYear;
+    const years = generateColumn(lower, upper, 'year');
+    ret.push(years.map(v => {
+      return {
+        label: renderLabel('year', v),
+        value: v.toString()
+      };
+    }));
+  }
+
   if (rank >= precisionRankRecord.week) {
     const lower = isInMinYear ? minWeek : 1;
     const upper = isInMaxYear ? maxWeek : selectedYearWeeks;

package/cjs/components/date-picker/date-picker.d.ts

@@ -3,7 +3,7 @@ import type { PickerProps, PickerRef, PickerActions } from '../picker';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from './date-picker-utils';
 export declare type DatePickerRef = PickerRef;
-export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel'> & {
+export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' | 'closeOnMaskClick' | 'visible' | 'confirmText' | 'cancelText' | 'getContainer' | 'loading' | 'loadingContent' | 'afterShow' | 'afterClose' | 'onClick' | 'title' | 'stopPropagation' | 'style' | 'mouseWheel' | 'forceRender' | 'destroyOnClose'> & {
     value?: Date | null;
     defaultValue?: Date | null;
     onSelect?: (value: Date) => void;
@@ -15,7 +15,7 @@ export declare type DatePickerProps = Pick<PickerProps, 'onCancel' | 'onClose' |
     renderLabel?: (type: Precision, data: number) => ReactNode;
     filter?: DatePickerFilter;
 } & NativeProps;
-export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "cancelText" | "closeOnMaskClick" | "mouseWheel" | "confirmText"> & {
+export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
     onSelect?: ((value: Date) => void) | undefined;
@@ -28,4 +28,8 @@ export declare const DatePicker: React.ForwardRefExoticComponent<Pick<PickerProp
     filter?: Partial<Record<Precision, (val: number, extend: {
         date: Date;
     }) => boolean>> | undefined;
-} & NativeProps<never> & React.RefAttributes<PickerActions>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<PickerActions>>;

package/cjs/components/date-picker/date-picker.js

@@ -54,7 +54,7 @@ const DatePicker = (0, _react.forwardRef)((p, ref) => {
     return (0, _datePickerUtils.convertDateToStringArray)(date, props.precision);
   }, [value, props.precision, props.min, props.max]);
   const onConfirm = (0, _react.useCallback)(val => {
-    setValue((0, _datePickerUtils.convertStringArrayToDate)(val, props.precision));
+    setValue((0, _datePickerUtils.convertStringArrayToDate)(val, props.precision), true);
   }, [setValue, props.precision]);
   const onSelect = (0, _ahooks.useMemoizedFn)(val => {
     var _a;
@@ -76,12 +76,16 @@ const DatePicker = (0, _react.forwardRef)((p, ref) => {
     onConfirm: onConfirm,
     onSelect: onSelect,
     getContainer: props.getContainer,
+    loading: props.loading,
+    loadingContent: props.loadingContent,
     afterShow: props.afterShow,
     afterClose: props.afterClose,
     onClick: props.onClick,
     title: props.title,
     stopPropagation: props.stopPropagation,
-    mouseWheel: props.mouseWheel
+    mouseWheel: props.mouseWheel,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender
   }, (_, actions) => {
     var _a;
 

package/cjs/components/date-picker/index.d.ts

@@ -3,7 +3,7 @@ import './date-picker.less';
 import { prompt } from './prompt';
 export type { DatePickerProps, DatePickerRef } from './date-picker';
 export type { DatePickerFilter } from './date-picker-utils';
-declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "cancelText" | "closeOnMaskClick" | "mouseWheel" | "confirmText"> & {
+declare const _default: import("react").ForwardRefExoticComponent<Pick<import("../picker").PickerProps, "style" | "title" | "onClick" | "visible" | "destroyOnClose" | "forceRender" | "getContainer" | "afterShow" | "afterClose" | "stopPropagation" | "onCancel" | "onClose" | "loading" | "closeOnMaskClick" | "cancelText" | "mouseWheel" | "loadingContent" | "confirmText"> & {
     value?: Date | null | undefined;
     defaultValue?: Date | null | undefined;
     onSelect?: ((value: Date) => void) | undefined;
@@ -16,7 +16,11 @@ declare const _default: import("react").ForwardRefExoticComponent<Pick<import(".
     filter?: Partial<Record<import("./date-picker-utils").Precision, (val: number, extend: {
         date: Date;
     }) => boolean>> | undefined;
-} & import("../../utils/native-props").NativeProps<never> & import("react").RefAttributes<import("../picker").PickerActions>> & {
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("../picker").PickerActions>> & {
     prompt: typeof prompt;
 };
 export default _default;

package/cjs/components/date-picker-view/date-picker-view.d.ts

@@ -2,7 +2,7 @@ import { FC, ReactNode } from 'react';
 import type { PickerViewProps } from '../picker-view';
 import { NativeProps } from '../../utils/native-props';
 import type { Precision, DatePickerFilter } from '../date-picker/date-picker-utils';
-export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel'> & {
+export declare type DatePickerViewProps = Pick<PickerViewProps, 'style' | 'mouseWheel' | 'loading' | 'loadingContent'> & {
     value?: Date;
     defaultValue?: Date;
     onChange?: (value: Date) => void;

package/cjs/components/date-picker-view/date-picker-view.js

@@ -52,6 +52,8 @@ const DatePickerView = p => {
   }, [props.onChange, props.precision]);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_pickerView.default, {
     columns: selected => (0, _datePickerUtils.generateDatePickerColumns)(selected, props.min, props.max, props.precision, props.renderLabel, props.filter),
+    loading: props.loading,
+    loadingContent: props.loadingContent,
     value: pickerValue,
     mouseWheel: props.mouseWheel,
     onChange: onChange

package/cjs/components/dialog/dialog.css

@@ -1,26 +1,14 @@
 .adm-dialog {
   --z-index: var(--adm-dialog-z-index, 1000);
-  position: fixed;
-  z-index: var(--z-index);
+  ---z-index: var(--z-index);
 }
-.adm-dialog .adm-dialog-mask {
-  z-index: 0;
-}
-.adm-dialog-wrap {
-  position: fixed;
-  z-index: 1;
-  top: 50%;
-  left: 50%;
-  width: 75vw;
-  max-width: 500px;
-  transform: translate(-50%, -50%);
+.adm-dialog .adm-center-popup {
+  --z-index: var(---z-index);
 }
 .adm-dialog-body {
   width: 100%;
   max-height: 70vh;
-  font-size: 14px;
-  background-color: white;
-  border-radius: 8px;
+  font-size: var(--adm-font-size-6);
   overflow: hidden;
   display: flex;
   flex-direction: column;
@@ -34,57 +22,58 @@
 .adm-dialog-body:not(.adm-dialog-with-image) {
   padding-top: 20px;
 }
-.adm-dialog-body .adm-dialog-image-container {
+.adm-dialog-image-container {
   margin-bottom: 12px;
   max-height: 40vh;
 }
-.adm-dialog-body .adm-dialog-header {
+.adm-dialog-header {
   margin-bottom: 8px;
   padding: 0 12px;
 }
-.adm-dialog-body .adm-dialog-title {
+.adm-dialog-title {
   margin-bottom: 8px;
   padding: 0 12px;
   font-weight: bold;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   text-align: center;
 }
-.adm-dialog-body .adm-dialog-content {
+.adm-dialog-content {
   padding: 0 12px 20px;
   max-height: 70vh;
   overflow-x: hidden;
   overflow-y: auto;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   line-height: 1.4;
-  color: #333;
+  color: var(--adm-color-text);
 }
-.adm-dialog-body .adm-dialog-content-empty {
+.adm-dialog-content-empty {
   padding: 0;
   height: 12px;
 }
-.adm-dialog-body .adm-dialog-footer {
-  user-select: none;
+.adm-dialog-footer {
+  -webkit-user-select: none;
+          user-select: none;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row {
+.adm-dialog-footer .adm-dialog-action-row {
   display: flex;
   align-items: stretch;
-  border-top: 0.5px solid var(--adm-border-color);
+  border-top: 0.5px solid var(--adm-color-border);
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > * {
+.adm-dialog-footer .adm-dialog-action-row > * {
   flex: 1;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button {
   padding: 10px;
-  font-size: 18px;
+  font-size: var(--adm-font-size-10);
   line-height: 25px;
   border-radius: 0;
-  border-right: solid 0.5px var(--adm-border-color);
+  border-right: solid 0.5px var(--adm-color-border);
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button-bold {
   font-weight: bold;
 }
-.adm-dialog-body .adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
+.adm-dialog-footer .adm-dialog-action-row > .adm-dialog-button:last-child {
   border-right: none;
 }
 .adm-dialog-image-container {

package/cjs/components/dialog/dialog.d.ts

@@ -1,27 +1,16 @@
-import React, { FC, ReactNode } from 'react';
+import { FC, ReactNode } from 'react';
 import { Action } from './dialog-action-button';
-import { GetContainer } from '../../utils/render-to-container';
-import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { NativeProps } from '../../utils/native-props';
-export declare type DialogProps = {
-    afterClose?: () => void;
-    afterShow?: () => void;
+import { CenterPopupProps } from '../center-popup';
+export declare type DialogProps = Pick<CenterPopupProps, 'afterClose' | 'afterShow' | 'bodyClassName' | 'bodyStyle' | 'destroyOnClose' | 'disableBodyScroll' | 'forceRender' | 'getContainer' | 'maskClassName' | 'maskStyle' | 'stopPropagation' | 'visible'> & {
     image?: string;
     header?: ReactNode;
     title?: ReactNode;
     content?: ReactNode;
     actions?: (Action | Action[])[];
     onAction?: (action: Action, index: number) => void | Promise<void>;
-    closeOnAction?: boolean;
     onClose?: () => void;
+    closeOnAction?: boolean;
     closeOnMaskClick?: boolean;
-    visible?: boolean;
-    getContainer?: GetContainer;
-    bodyStyle?: React.CSSProperties;
-    bodyClassName?: string;
-    maskStyle?: React.CSSProperties;
-    maskClassName?: string;
-    stopPropagation?: PropagationEvent[];
-    disableBodyScroll?: boolean;
 } & NativeProps;
 export declare const Dialog: FC<DialogProps>;

package/cjs/components/dialog/dialog.js

@@ -7,80 +7,33 @@ exports.Dialog = void 0;
 
 var _tslib = require("tslib");
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = _interopRequireDefault(require("react"));
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _ahooks = require("ahooks");
-
-var _mask = _interopRequireDefault(require("../mask"));
-
 var _dialogActionButton = require("./dialog-action-button");
 
 var _image = _interopRequireDefault(require("../image"));
 
-var _renderToContainer = require("../../utils/render-to-container");
-
-var _withStopPropagation = require("../../utils/with-stop-propagation");
-
 var _autoCenter = _interopRequireDefault(require("../auto-center"));
 
-var _web = require("@react-spring/web");
-
-var _nativeProps = require("../../utils/native-props");
+var _centerPopup = _interopRequireDefault(require("../center-popup"));
 
 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 = {
-  visible: false,
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false,
-  stopPropagation: ['click'],
-  getContainer: null,
-  disableBodyScroll: true
+  getContainer: null
 };
 
 const Dialog = 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
-    },
-    onStart: () => {
-      setActive(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);
-
-  const body = _react.default.createElement("div", {
-    className: (0, _classnames.default)(cls('body'), props.image && cls('with-image'), props.bodyClassName),
-    style: props.bodyStyle
-  }, !!props.image && _react.default.createElement("div", {
+
+  const element = _react.default.createElement(_react.default.Fragment, null, !!props.image && _react.default.createElement("div", {
     className: cls('image-container')
   }, _react.default.createElement(_image.default, {
     src: props.image,
@@ -114,26 +67,29 @@ const Dialog = p => {
     })));
   })));
 
-  const node = (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: cls(),
-    style: {
-      display: active ? undefined : 'none'
-    }
-  }, _react.default.createElement(_mask.default, {
+  return _react.default.createElement(_centerPopup.default, {
+    className: (0, _classnames.default)(cls(), props.className),
+    style: props.style,
+    afterClose: props.afterClose,
+    afterShow: props.afterShow,
+    onMaskClick: props.closeOnMaskClick ? () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    } : undefined,
     visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: (0, _classnames.default)(cls('mask'), props.maskClassName),
-    disableBodyScroll: props.disableBodyScroll
-  }), _react.default.createElement("div", {
-    className: cls('wrap'),
-    style: {
-      pointerEvents: props.visible ? undefined : 'none'
-    }
-  }, _react.default.createElement(_web.animated.div, {
-    style: style
-  }, body))));
-  return (0, _renderToContainer.renderToContainer)(props.getContainer, (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, node));
+    getContainer: props.getContainer,
+    bodyStyle: props.bodyStyle,
+    bodyClassName: (0, _classnames.default)(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    maskStyle: props.maskStyle,
+    maskClassName: props.maskClassName,
+    stopPropagation: props.stopPropagation,
+    disableBodyScroll: props.disableBodyScroll,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender,
+    role: 'dialog',
+    "aria-label": props['aria-label']
+  }, element);
 };
 
 exports.Dialog = Dialog;

package/cjs/components/dialog/show.d.ts

@@ -1,5 +1,5 @@
 import { DialogProps } from './dialog';
-export declare type DialogShowProps = Omit<DialogProps, 'visible'>;
+export declare type DialogShowProps = Omit<DialogProps, 'visible' | 'destroyOnClose' | 'forceRender'>;
 export declare type DialogShowHandler = {
     close: () => void;
 };

package/cjs/components/divider/divider.css

@@ -3,7 +3,7 @@
   align-items: center;
   margin: 16px 0;
   border-width: 0;
-  border-color: var(--adm-border-color);
+  border-color: var(--adm-color-border);
   border-style: solid;
   color: var(--adm-color-weak);
   font-size: 14px;
@@ -35,5 +35,5 @@
   margin: 0 16px;
   vertical-align: middle;
   border-top: 0;
-  border-left: 1px solid var(--adm-border-color);
+  border-left: 1px solid var(--adm-color-border);
 }

package/cjs/components/dropdown/dropdown.css

@@ -1,12 +1,12 @@
 .adm-dropdown {
-  background-color: white;
+  background-color: var(--adm-color-background);
 }
 .adm-dropdown .adm-dropdown-nav {
   display: flex;
   border-bottom: 1px solid transparent;
 }
 .adm-dropdown-open .adm-dropdown-nav {
-  border-bottom-color: var(--adm-border-color);
+  border-bottom-color: var(--adm-color-border);
 }
 .adm-dropdown-item {
   display: flex;
@@ -20,7 +20,7 @@
   align-items: center;
   position: relative;
   max-width: 100%;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
   padding: 12px;
 }
 .adm-dropdown-item .adm-dropdown-item-title-text {
@@ -32,7 +32,7 @@
 .adm-dropdown-item .adm-dropdown-item-title-arrow {
   color: var(--adm-color-light);
   font-size: 9px;
-  transform: rotate(0deg) translateY(-1px);
+  transform: rotate(0deg) translateY(1px);
   transition: all ease 0.2s;
 }
 .adm-dropdown-item .adm-dropdown-item-title-arrow-active {
@@ -50,7 +50,7 @@
 }
 .adm-dropdown-item-content {
   width: 100%;
-  background: white;
+  background: var(--adm-color-background);
 }
 .adm-dropdown-item-content-hidden {
   display: none;

package/cjs/components/dropdown/dropdown.d.ts

@@ -18,7 +18,11 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
     closeOnClickAway?: boolean | undefined;
     onChange?: ((key: string | null) => void) | undefined;
     arrow?: React.ReactNode;
-} & NativeProps<never> & {
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & {
     children?: React.ReactNode;
 } & React.RefAttributes<DropdownRef>>;
 export default Dropdown;

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

@@ -9,7 +9,11 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     closeOnClickAway?: boolean | undefined;
     onChange?: ((key: string | null) => void) | undefined;
     arrow?: import("react").ReactNode;
-} & import("../../utils/native-props").NativeProps<never> & {
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & {
     children?: import("react").ReactNode;
 } & import("react").RefAttributes<import("./dropdown").DropdownRef>> & {
     Item: import("react").FC<import("./item").DropdownItemProps>;

package/cjs/components/ellipsis/ellipsis.js

@@ -57,7 +57,6 @@ const Ellipsis = p => {
     container.style.textOverflow = 'clip';
     container.style.whiteSpace = 'normal';
     container.style.webkitLineClamp = 'unset';
-    container.style.webkitBoxOrient = 'unset';
     container.style.display = 'block';
     const lineHeight = pxToNumber(originStyle.lineHeight);
     const maxHeight = Math.floor(lineHeight * (props.rows + 0.5) + pxToNumber(originStyle.paddingTop) + pxToNumber(originStyle.paddingBottom));
@@ -116,7 +115,7 @@ const Ellipsis = p => {
         }
 
         const leftPartMiddle = Math.floor((leftPart[0] + leftPart[1]) / 2);
-        const rightPartMiddle = Math.floor((rightPart[0] + rightPart[1]) / 2);
+        const rightPartMiddle = Math.ceil((rightPart[0] + rightPart[1]) / 2);
         container.innerText = props.content.slice(0, leftPartMiddle) + '...' + actionText + '...' + props.content.slice(rightPartMiddle, end);
 
         if (container.offsetHeight <= maxHeight) {

package/cjs/components/empty/empty.css

@@ -11,9 +11,10 @@
 }
 .adm-empty-image-container .adm-empty-image {
   width: 64px;
+  height: intrinsic;
 }
 .adm-empty-description {
   margin-top: 8px;
-  font-size: 14px;
+  font-size: var(--adm-font-size-6);
   color: var(--adm-color-light);
 }

package/cjs/components/error-block/create-error-block.d.ts

@@ -0,0 +1,12 @@
+import React, { ReactElement, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+import type { ErrorBlockStatus, ImageRecord } from '.';
+export declare type ErrorBlockProps = {
+    status?: ErrorBlockStatus;
+    title?: ReactNode;
+    image?: string | ReactElement;
+    description?: ReactNode;
+    fullPage?: boolean;
+    children?: React.ReactNode;
+} & NativeProps<'--image-height' | '--image-height-full-page' | '--image-width' | '--image-width-full-page'>;
+export declare function createErrorBlock(imageRecord: ImageRecord): React.FC<ErrorBlockProps>;

package/cjs/components/error-block/create-error-block.js

@@ -0,0 +1,59 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.createErrorBlock = createErrorBlock;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _withDefaultProps = require("../../utils/with-default-props");
+
+var _nativeProps = require("../../utils/native-props");
+
+var _configProvider = require("../config-provider");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const classPrefix = `adm-error-block`;
+const defaultProps = {
+  status: 'default'
+};
+
+function createErrorBlock(imageRecord) {
+  const ErrorBlock = p => {
+    var _a;
+
+    const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+    const {
+      locale
+    } = (0, _configProvider.useConfig)();
+    const contentPack = locale.ErrorBlock[props.status];
+    const des = 'description' in props ? props.description : contentPack.description;
+    const title = 'title' in props ? props.title : contentPack.title;
+    const image = (_a = props.image) !== null && _a !== void 0 ? _a : imageRecord[props.status];
+    const imageNode = typeof image === 'string' ? _react.default.createElement("img", {
+      src: image,
+      alt: 'error block image'
+    }) : image;
+    return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+      className: (0, _classnames.default)(classPrefix, {
+        [`${classPrefix}-full-page`]: props.fullPage
+      })
+    }, _react.default.createElement("div", {
+      className: `${classPrefix}-image`
+    }, imageNode), _react.default.createElement("div", {
+      className: `${classPrefix}-description`
+    }, title && _react.default.createElement("div", {
+      className: `${classPrefix}-description-title`
+    }, title), des && _react.default.createElement("div", {
+      className: `${classPrefix}-description-subtitle`
+    }, des)), props.children && _react.default.createElement("div", {
+      className: `${classPrefix}-content`
+    }, props.children)));
+  };
+
+  return ErrorBlock;
+}