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

package/cjs/components/index-bar/index-bar.d.ts

@@ -2,6 +2,7 @@ import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type IndexBarProps = {
     sticky?: boolean;
+    onIndexChange?: (index: string) => void;
     children?: React.ReactNode;
 } & NativeProps<'--sticky-offset-top'>;
 export declare type IndexBarRef = {
@@ -9,5 +10,10 @@ export declare type IndexBarRef = {
 };
 export declare const IndexBar: React.ForwardRefExoticComponent<{
     sticky?: boolean | undefined;
+    onIndexChange?: ((index: string) => void) | undefined;
     children?: React.ReactNode;
-} & NativeProps<"--sticky-offset-top"> & React.RefAttributes<IndexBarRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--sticky-offset-top", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<IndexBarRef>>;

package/cjs/components/index-bar/index-bar.js

@@ -72,6 +72,8 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
   }));
 
   function scrollTo(index) {
+    var _a;
+
     const body = bodyRef.current;
     if (!body) return;
     const children = body.children;
@@ -84,6 +86,7 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
       if (panelIndex === index) {
         body.scrollTop = panel.offsetTop;
         setActiveIndex(index);
+        activeIndex !== index && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, index));
         return;
       }
     }
@@ -92,6 +95,8 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
   const {
     run: checkActiveIndex
   } = (0, _ahooks.useThrottleFn)(() => {
+    var _a;
+
     const body = bodyRef.current;
     if (!body) return;
     const scrollTop = body.scrollTop;
@@ -105,6 +110,7 @@ const IndexBar = (0, _react.forwardRef)((p, ref) => {
 
       if (panel.offsetTop + panel.clientHeight - titleHeight > scrollTop) {
         setActiveIndex(panelIndex);
+        activeIndex !== panelIndex && ((_a = props.onIndexChange) === null || _a === void 0 ? void 0 : _a.call(props, panelIndex));
         return;
       }
     }

package/cjs/components/index-bar/index.d.ts

@@ -4,8 +4,13 @@ export type { IndexBarProps, IndexBarRef } from './index-bar';
 export type { IndexBarPanelProps } from './panel';
 declare const _default: import("react").ForwardRefExoticComponent<{
     sticky?: boolean | undefined;
+    onIndexChange?: ((index: string) => void) | undefined;
     children?: import("react").ReactNode;
-} & import("../../utils/native-props").NativeProps<"--sticky-offset-top"> & import("react").RefAttributes<import("./index-bar").IndexBarRef>> & {
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--sticky-offset-top", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./index-bar").IndexBarRef>> & {
     Panel: import("react").FC<import("./panel").IndexBarPanelProps>;
 };
 export default _default;

package/cjs/components/infinite-scroll/infinite-scroll.css

@@ -4,5 +4,9 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
+}
+.adm-infinite-scroll-failed-text {
+  display: inline-block;
+  margin-right: 8px;
 }

package/cjs/components/infinite-scroll/infinite-scroll.d.ts

@@ -1,9 +1,9 @@
 import React, { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type InfiniteScrollProps = {
-    loadMore: () => Promise<void>;
+    loadMore: (isRetry: boolean) => Promise<void>;
     hasMore: boolean;
     threshold?: number;
-    children?: React.ReactNode;
+    children?: React.ReactNode | ((hasMore: boolean, failed: boolean, retry: () => void) => React.ReactNode);
 } & NativeProps;
 export declare const InfiniteScroll: FC<InfiniteScrollProps>;

package/cjs/components/infinite-scroll/infinite-scroll.js

@@ -32,31 +32,41 @@ function isWindow(element) {
 }
 
 const classPrefix = `adm-infinite-scroll`;
-
-const InfiniteScrollContent = ({
-  hasMore
-}) => {
-  const {
-    locale
-  } = (0, _configProvider.useConfig)();
-  return _react.default.createElement(_react.default.Fragment, null, hasMore ? _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", null, locale.common.loading), _react.default.createElement(_dotLoading.default, null)) : _react.default.createElement("span", null, locale.InfiniteScroll.noMore));
+const defaultProps = {
+  threshold: 250,
+  children: (hasMore, failed, retry) => _react.default.createElement(InfiniteScrollContent, {
+    hasMore: hasMore,
+    failed: failed,
+    retry: retry
+  })
 };
 
 const InfiniteScroll = p => {
-  const props = (0, _withDefaultProps.mergeProps)({
-    threshold: 250
-  }, p);
-  const doLoadMore = (0, _ahooks.useLockFn)(() => props.loadMore());
-  const elementRef = (0, _react.useRef)(null);
+  const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const [failed, setFailed] = (0, _react.useState)(false);
+  const doLoadMore = (0, _ahooks.useLockFn)(isRetry => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
+    try {
+      yield props.loadMore(isRetry);
+    } catch (e) {
+      setFailed(true);
+      throw e;
+    }
+  }));
+  const elementRef = (0, _react.useRef)(null); // Prevent duplicated trigger of `check` function
+
   const [flag, setFlag] = (0, _react.useState)({});
   const nextFlagRef = (0, _react.useRef)(flag);
-  const check = (0, _ahooks.useMemoizedFn)(() => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
+  const [scrollParent, setScrollParent] = (0, _react.useState)();
+  const {
+    run: check
+  } = (0, _ahooks.useThrottleFn)(() => (0, _tslib.__awaiter)(void 0, void 0, void 0, function* () {
     if (nextFlagRef.current !== flag) return;
     if (!props.hasMore) return;
     const element = elementRef.current;
     if (!element) return;
     if (!element.offsetParent) return;
     const parent = (0, _getScrollParent.getScrollParent)(element);
+    setScrollParent(parent);
     if (!parent) return;
     const rect = element.getBoundingClientRect();
     const elementTop = rect.top;
@@ -65,10 +75,14 @@ const InfiniteScroll = p => {
     if (current >= elementTop - props.threshold) {
       const nextFlag = {};
       nextFlagRef.current = nextFlag;
-      yield doLoadMore();
+      yield doLoadMore(false);
       setFlag(nextFlag);
     }
-  })); // 确保在内容不足时会自动触发加载事件
+  }), {
+    wait: 100,
+    leading: true,
+    trailing: true
+  }); // Make sure to trigger `loadMore` when content changes
 
   (0, _react.useEffect)(() => {
     check();
@@ -76,24 +90,52 @@ const InfiniteScroll = p => {
   (0, _react.useEffect)(() => {
     const element = elementRef.current;
     if (!element) return;
-    const parent = (0, _getScrollParent.getScrollParent)(element);
-    if (!parent) return;
+    if (!scrollParent) return;
 
     function onScroll() {
       check();
     }
 
-    parent.addEventListener('scroll', onScroll);
+    scrollParent.addEventListener('scroll', onScroll);
     return () => {
-      parent.removeEventListener('scroll', onScroll);
+      scrollParent.removeEventListener('scroll', onScroll);
     };
-  }, []);
+  }, [scrollParent]);
+
+  function retry() {
+    return (0, _tslib.__awaiter)(this, void 0, void 0, function* () {
+      setFailed(false);
+      yield doLoadMore(true);
+      setFlag(nextFlagRef.current);
+    });
+  }
+
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
     className: classPrefix,
     ref: elementRef
-  }, props.children && props.children, !props.children && _react.default.createElement(InfiniteScrollContent, {
-    hasMore: props.hasMore
-  })));
+  }, typeof props.children === 'function' ? props.children(props.hasMore, failed, retry) : props.children));
 };
 
-exports.InfiniteScroll = InfiniteScroll;
+exports.InfiniteScroll = InfiniteScroll;
+
+const InfiniteScrollContent = props => {
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
+
+  if (!props.hasMore) {
+    return _react.default.createElement("span", null, locale.InfiniteScroll.noMore);
+  }
+
+  if (props.failed) {
+    return _react.default.createElement("span", null, _react.default.createElement("span", {
+      className: `${classPrefix}-failed-text`
+    }, locale.InfiniteScroll.failedToLoad), _react.default.createElement("a", {
+      onClick: () => {
+        props.retry();
+      }
+    }, locale.InfiniteScroll.retry));
+  }
+
+  return _react.default.createElement(_react.default.Fragment, null, _react.default.createElement("span", null, locale.common.loading), _react.default.createElement(_dotLoading.default, null));
+};

package/cjs/components/input/input.css

@@ -1,5 +1,5 @@
 .adm-input {
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
   --text-align: left;
@@ -32,10 +32,15 @@
   background: transparent;
   border: 0;
   outline: none;
-  appearance: none;
+  -webkit-appearance: none;
+          appearance: none;
   min-height: 1.5em;
   text-align: var(--text-align);
 }
+.adm-input-element::-webkit-input-placeholder {
+  color: var(--placeholder-color);
+  font-family: inherit;
+}
 .adm-input-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
@@ -52,6 +57,9 @@
 .adm-input-element::-ms-clear {
   display: none;
 }
+.adm-input-element::-ms-reveal {
+  display: none;
+}
 .adm-input-element::-webkit-search-cancel-button {
   display: none;
 }
@@ -84,5 +92,5 @@
 }
 .adm-input-clear .antd-mobile-icon {
   display: block;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }

package/cjs/components/input/input.d.ts

@@ -1,7 +1,10 @@
 import React from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type NativeInputProps = React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
-export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick'> & {
+declare type AriaProps = {
+    role?: string;
+};
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'autoComplete' | 'autoFocus' | 'pattern' | 'inputMode' | 'type' | 'name' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd' | 'onClick' | 'step'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -16,14 +19,14 @@ export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength
     enterKeyHint?: 'enter' | 'done' | 'go' | 'next' | 'previous' | 'search' | 'send';
     min?: number;
     max?: number;
-} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'>;
+} & NativeProps<'--font-size' | '--color' | '--placeholder-color' | '--text-align'> & AriaProps;
 export declare type InputRef = {
     clear: () => void;
     focus: () => void;
     blur: () => void;
     nativeElement: HTMLInputElement | null;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "autoFocus" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProps, "pattern" | "onClick" | "name" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "autoFocus" | "maxLength" | "minLength" | "step"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;
@@ -38,5 +41,9 @@ export declare const Input: React.ForwardRefExoticComponent<Pick<NativeInputProp
     enterKeyHint?: "search" | "enter" | "done" | "go" | "next" | "previous" | "send" | undefined;
     min?: number | undefined;
     max?: number | undefined;
-} & NativeProps<"--color" | "--font-size" | "--placeholder-color" | "--text-align"> & React.RefAttributes<InputRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--color" | "--font-size" | "--placeholder-color" | "--text-align", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & AriaProps & React.RefAttributes<InputRef>>;
 export {};

package/cjs/components/input/input.js

@@ -21,6 +21,10 @@ var _ahooks = require("ahooks");
 
 var _bound = require("../../utils/bound");
 
+var _validate = require("../../utils/validate");
+
+var _configProvider = require("../config-provider");
+
 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); }
@@ -36,7 +40,11 @@ const Input = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
   const [hasFocus, setHasFocus] = (0, _react.useState)(false);
+  const compositionStartRef = (0, _react.useRef)(false);
   const nativeInputRef = (0, _react.useRef)(null);
+  const {
+    locale
+  } = (0, _configProvider.useConfig)();
   (0, _react.useImperativeHandle)(ref, () => ({
     clear: () => {
       setValue('');
@@ -142,20 +150,41 @@ const Input = (0, _react.forwardRef)((p, ref) => {
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
     onKeyUp: props.onKeyUp,
-    onCompositionStart: props.onCompositionStart,
-    onCompositionEnd: props.onCompositionEnd,
-    onClick: props.onClick
+    onCompositionStart: e => {
+      var _a;
+
+      compositionStartRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    onCompositionEnd: e => {
+      var _a;
+
+      compositionStartRef.current = false;
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
+    },
+    onClick: props.onClick,
+    role: props.role,
+    "aria-valuenow": props['aria-valuenow'],
+    "aria-valuemax": props['aria-valuemax'],
+    "aria-valuemin": props['aria-valuemin'],
+    "aria-label": props['aria-label']
   }), shouldShowClear && _react.default.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();
     },
     onClick: () => {
-      var _a;
+      var _a, _b;
 
       setValue('');
-      (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props);
-    }
+      (_a = props.onClear) === null || _a === void 0 ? void 0 : _a.call(props); // https://github.com/ant-design/ant-design-mobile/issues/5212
+
+      if ((0, _validate.isIOS)() && compositionStartRef.current) {
+        compositionStartRef.current = false;
+        (_b = nativeInputRef.current) === null || _b === void 0 ? void 0 : _b.blur();
+      }
+    },
+    "aria-label": locale.Input.clear
   }, _react.default.createElement(_antdMobileIcons.CloseCircleFill, null))));
 });
 exports.Input = Input;

package/cjs/components/jumbo-tabs/jumbo-tabs.css

@@ -5,7 +5,7 @@
 }
 .adm-jumbo-tabs-header {
   position: relative;
-  border-bottom: solid 1px var(--adm-border-color);
+  border-bottom: solid 1px var(--adm-color-border);
 }
 .adm-jumbo-tabs-tab-list {
   display: flex;
@@ -30,11 +30,12 @@
   flex-direction: column;
   align-items: center;
   position: relative;
+  width: -webkit-min-content;
   width: min-content;
   margin: 0 auto;
   padding: 12px 0;
   cursor: pointer;
-  font-size: 17px;
+  font-size: var(--adm-font-size-9);
   white-space: nowrap;
 }
 .adm-jumbo-tabs-tab-title {
@@ -42,18 +43,19 @@
   padding: 0 4px;
 }
 .adm-jumbo-tabs-tab-description {
+  width: -webkit-min-content;
   width: min-content;
   padding: 0 8px;
   border-radius: 10px;
   color: var(--adm-color-weak);
   font-size: var(--adm-font-size-main);
-  background-color: #f5f5f5;
+  background-color: var(--adm-color-box);
 }
 .adm-jumbo-tabs-tab-active {
   color: var(--adm-color-primary);
 }
 .adm-jumbo-tabs-tab-active .adm-jumbo-tabs-tab-description {
-  color: #fff;
+  color: var(--adm-color-white);
   background-color: var(--adm-color-primary);
 }
 .adm-jumbo-tabs-tab-disabled {
@@ -63,20 +65,3 @@
 .adm-jumbo-tabs-content {
   padding: 12px;
 }
-.adm-jumbo-tabs-header-mask {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 1;
-  width: 30px;
-  height: 100%;
-  pointer-events: none;
-}
-.adm-jumbo-tabs-header-mask-left {
-  left: 0;
-  background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
-}
-.adm-jumbo-tabs-header-mask-right {
-  right: 0;
-  background: linear-gradient(to left, #fff, rgba(255, 255, 255, 0));
-}

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

@@ -1,8 +1,16 @@
 /// <reference types="react" />
 import './list.less';
-export type { ListProps } from './list';
+export type { ListProps, ListRef } from './list';
 export type { ListItemProps } from './list-item';
-declare const _default: import("react").FC<import("./list").ListProps> & {
+declare const _default: import("react").ForwardRefExoticComponent<{
+    header?: import("react").ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: import("react").ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--active-background-color" | "--align-items" | "--border-bottom" | "--border-inner" | "--border-top" | "--extra-max-width" | "--font-size" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./list").ListRef>> & {
     Item: import("react").FC<import("./list-item").ListItemProps>;
 };
 export default _default;

package/cjs/components/list/list.css

@@ -1,15 +1,16 @@
 .adm-list {
-  --header-font-size: 15px;
+  --header-font-size: var(--adm-font-size-7);
   --prefix-width: 'auto';
   --prefix-padding-right: 12px;
   --align-items: center;
-  --active-background-color: var(--adm-border-color);
-  --border-inner: solid 1px var(--adm-border-color);
-  --border-top: solid 1px var(--adm-border-color);
-  --border-bottom: solid 1px var(--adm-border-color);
+  --active-background-color: var(--adm-color-border);
+  --border-inner: solid 1px var(--adm-color-border);
+  --border-top: solid 1px var(--adm-color-border);
+  --border-bottom: solid 1px var(--adm-color-border);
   --padding-left: 12px;
   --padding-right: 12px;
-  --font-size: 17px;
+  --font-size: var(--adm-font-size-9);
+  --extra-max-width: 70%;
 }
 .adm-list-header {
   color: var(--adm-color-weak);
@@ -17,7 +18,7 @@
   padding: 8px var(--padding-right) 8px var(--padding-left);
 }
 .adm-list-body {
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   overflow: hidden;
   font-size: var(--font-size);
 }
@@ -41,13 +42,13 @@
   display: block;
   padding-left: var(--padding-left);
   position: relative;
-  background-color: #ffffff;
+  background-color: var(--adm-color-background);
   line-height: 1.5;
 }
 .adm-list-item-title,
 .adm-list-item-description {
   color: var(--adm-color-weak);
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-list-item-content {
   display: flex;
@@ -68,8 +69,9 @@
 .adm-list-item-content-extra {
   flex: none;
   padding-left: 12px;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   color: var(--adm-color-weak);
+  max-width: var(--extra-max-width);
 }
 .adm-list-item-content-arrow {
   flex: none;

package/cjs/components/list/list.d.ts

@@ -1,8 +1,19 @@
-import { FC, ReactNode } from 'react';
+import React, { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ListProps = {
     header?: ReactNode;
     mode?: 'default' | 'card';
     children?: ReactNode;
-} & NativeProps<'--header-font-size' | '--prefix-width' | '--prefix-padding-right' | '--align-items' | '--active-background-color' | '--border-inner' | '--border-top' | '--border-bottom' | '--padding-left' | '--padding-right' | '--font-size'>;
-export declare const List: FC<ListProps>;
+} & NativeProps<'--active-background-color' | '--align-items' | '--border-bottom' | '--border-inner' | '--border-top' | '--extra-max-width' | '--font-size' | '--header-font-size' | '--padding-left' | '--padding-right' | '--prefix-padding-right' | '--prefix-width'>;
+export declare type ListRef = {
+    nativeElement: HTMLDivElement | null;
+};
+export declare const List: React.ForwardRefExoticComponent<{
+    header?: ReactNode;
+    mode?: "default" | "card" | undefined;
+    children?: ReactNode;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--active-background-color" | "--align-items" | "--border-bottom" | "--border-inner" | "--border-top" | "--extra-max-width" | "--font-size" | "--header-font-size" | "--padding-left" | "--padding-right" | "--prefix-padding-right" | "--prefix-width", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<ListRef>>;

package/cjs/components/list/list.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.List = void 0;
 
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -15,15 +15,26 @@ var _withDefaultProps = require("../../utils/with-default-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 classPrefix = `adm-list`;
 const defaultProps = {
   mode: 'default'
 };
-
-const List = p => {
+const List = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
+  const nativeElementRef = (0, _react.useRef)(null);
+  (0, _react.useImperativeHandle)(ref, () => ({
+    get nativeElement() {
+      return nativeElementRef.current;
+    }
+
+  }));
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
-    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.mode}`)
+    className: (0, _classnames.default)(classPrefix, `${classPrefix}-${props.mode}`),
+    ref: nativeElementRef
   }, props.header && _react.default.createElement("div", {
     className: `${classPrefix}-header`
   }, props.header), _react.default.createElement("div", {
@@ -31,6 +42,5 @@ const List = p => {
   }, _react.default.createElement("div", {
     className: `${classPrefix}-body-inner`
   }, props.children))));
-};
-
+});
 exports.List = List;

package/cjs/components/mask/mask.js

@@ -69,7 +69,7 @@ const Mask = p => {
     config: {
       precision: 0.01,
       mass: 1,
-      tension: 200,
+      tension: 250,
       friction: 30,
       clamp: true
     },
@@ -89,14 +89,12 @@ const Mask = p => {
       }
     }
   });
-  const shouldRender = (0, _shouldRender.useShouldRender)(active, props.forceRender, props.destroyOnClose);
   const node = (0, _withStopPropagation.withStopPropagation)(props.stopPropagation, (0, _nativeProps.withNativeProps)(props, _react.default.createElement(_web.animated.div, {
     className: classPrefix,
     ref: ref,
-    style: Object.assign(Object.assign({
+    style: Object.assign(Object.assign({}, props.style), {
       background,
-      opacity
-    }, props.style), {
+      opacity,
       display: active ? undefined : 'none'
     }),
     onClick: e => {
@@ -113,8 +111,12 @@ const Mask = p => {
     onClick: props.onMaskClick
   }), _react.default.createElement("div", {
     className: `${classPrefix}-content`
-  }, shouldRender && props.children))));
-  return (0, _renderToContainer.renderToContainer)(props.getContainer, node);
+  }, props.children))));
+  return _react.default.createElement(_shouldRender.ShouldRender, {
+    active: active,
+    forceRender: props.forceRender,
+    destroyOnClose: props.destroyOnClose
+  }, (0, _renderToContainer.renderToContainer)(props.getContainer, node));
 };
 
 exports.Mask = Mask;

package/cjs/components/mask/mask.patch.css

@@ -0,0 +1,3 @@
+.adm-mask {
+  z-index: 1000;
+}

package/cjs/components/modal/modal-action-button.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type Action = {
     key: string | number;
-    text: string;
+    text: ReactNode;
     disabled?: boolean;
     danger?: boolean;
     primary?: boolean;