antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.92d6290f7

package/es/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/es/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/es/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/es/components/ellipsis/ellipsis.js

@@ -23,6 +23,7 @@ export const Ellipsis = p => {
   function calcEllipsised() {
     const root = rootRef.current;
     if (!root) return;
+    if (!root.offsetParent) return;
     const originStyle = window.getComputedStyle(root);
     const container = document.createElement('div');
     const styleNames = Array.prototype.slice.apply(originStyle);
@@ -39,7 +40,6 @@ export 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));
@@ -98,7 +98,7 @@ export 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/es/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/es/components/empty/empty.d.ts

@@ -5,4 +5,5 @@ export declare type EmptyProps = {
     imageStyle?: React.CSSProperties;
     description?: ReactNode;
 } & NativeProps;
+/** @deprecated Empty has been deprecated and will be removed in the next major version. */
 export declare const Empty: React.FC<EmptyProps>;

package/es/components/empty/empty.js

@@ -3,6 +3,8 @@ import classNames from 'classnames';
 import { withNativeProps } from '../../utils/native-props';
 import { EmptyIcon } from './empty-icon';
 const classPrefix = `adm-empty`;
+/** @deprecated Empty has been deprecated and will be removed in the next major version. */
+
 export const Empty = props => {
   function renderImageNode() {
     const {

package/es/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/es/components/error-block/create-error-block.js

@@ -0,0 +1,44 @@
+import React from 'react';
+import classNames from 'classnames';
+import { mergeProps } from '../../utils/with-default-props';
+import { withNativeProps } from '../../utils/native-props';
+import { useConfig } from '../config-provider';
+const classPrefix = `adm-error-block`;
+const defaultProps = {
+  status: 'default'
+};
+export function createErrorBlock(imageRecord) {
+  const ErrorBlock = p => {
+    var _a;
+
+    const props = mergeProps(defaultProps, p);
+    const {
+      locale
+    } = 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.createElement("img", {
+      src: image,
+      alt: 'error block image'
+    }) : image;
+    return withNativeProps(props, React.createElement("div", {
+      className: classNames(classPrefix, {
+        [`${classPrefix}-full-page`]: props.fullPage
+      })
+    }, React.createElement("div", {
+      className: `${classPrefix}-image`
+    }, imageNode), React.createElement("div", {
+      className: `${classPrefix}-description`
+    }, title && React.createElement("div", {
+      className: `${classPrefix}-description-title`
+    }, title), des && React.createElement("div", {
+      className: `${classPrefix}-description-subtitle`
+    }, des)), props.children && React.createElement("div", {
+      className: `${classPrefix}-content`
+    }, props.children)));
+  };
+
+  return ErrorBlock;
+}

package/es/components/error-block/error-block.css

@@ -17,13 +17,13 @@
   height: 100%;
 }
 .adm-error-block-description {
-  font-size: 12px;
+  font-size: var(--adm-font-size-4);
   color: #999;
   line-height: 1.4;
   margin-top: 12px;
 }
 .adm-error-block-description-title {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-error-block-description-subtitle {
   margin-top: 8px;
@@ -40,9 +40,9 @@
 }
 .adm-error-block-full-page .adm-error-block-description {
   margin-top: 20px;
-  font-size: 13px;
+  font-size: var(--adm-font-size-main);
 }
 .adm-error-block-full-page .adm-error-block-description-title {
   font-size: 20px;
-  color: #333;
+  color: var(--adm-color-text);
 }

package/es/components/error-block/error-block.d.ts

@@ -1,11 +1,2 @@
-import React, { FC, ReactElement, ReactNode } from 'react';
-import { NativeProps } from '../../utils/native-props';
-export declare type ErrorBlockProps = {
-    status?: 'default' | 'disconnected' | 'empty' | 'busy';
-    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 const ErrorBlock: FC<ErrorBlockProps>;
+/// <reference types="react" />
+export declare const ErrorBlock: import("react").FC<import("./create-error-block").ErrorBlockProps>;

package/es/components/error-block/error-block.js

@@ -1,47 +1,9 @@
-import React from 'react';
-import classNames from 'classnames';
-import { mergeProps } from '../../utils/with-default-props';
-import { withNativeProps } from '../../utils/native-props';
-import { useConfig } from '../config-provider';
-import { imageRecord } from './images';
-const classPrefix = `adm-error-block`;
-const defaultProps = {
-  status: 'default'
+import { createErrorBlock } from './create-error-block';
+import { busyImage, defaultImage, disconnectedImage, emptyImage } from './images';
+const imageRecord = {
+  'default': defaultImage,
+  'disconnected': disconnectedImage,
+  'empty': emptyImage,
+  'busy': busyImage
 };
-export const ErrorBlock = p => {
-  const props = mergeProps(defaultProps, p);
-  const {
-    locale
-  } = 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;
-  let imageNode = imageRecord[props.status];
-
-  if (props.image) {
-    if (typeof props.image === 'string') {
-      imageNode = React.createElement("img", {
-        src: props.image,
-        alt: 'error block image'
-      });
-    } else {
-      imageNode = props.image;
-    }
-  }
-
-  return withNativeProps(props, React.createElement("div", {
-    className: classNames(classPrefix, {
-      [`${classPrefix}-full-page`]: props.fullPage
-    })
-  }, React.createElement("div", {
-    className: `${classPrefix}-image`
-  }, imageNode), React.createElement("div", {
-    className: `${classPrefix}-description`
-  }, title && React.createElement("div", {
-    className: `${classPrefix}-description-title`
-  }, title), des && React.createElement("div", {
-    className: `${classPrefix}-description-subtitle`
-  }, des)), props.children && React.createElement("div", {
-    className: `${classPrefix}-content`
-  }, props.children)));
-};
+export const ErrorBlock = createErrorBlock(imageRecord);

package/es/components/error-block/error-block.patch.css

@@ -0,0 +1,23 @@
+.adm-error-block-image {
+  height: 100px;
+  width: auto;
+}
+.adm-error-block-description {
+  font-size: var(--adm-font-size-4);
+}
+.adm-error-block-description-title {
+  font-size: var(--adm-font-size-7);
+}
+.adm-error-block-full-page {
+  padding-top: calc(50vh - 200px);
+}
+.adm-error-block-full-page .adm-error-block-image {
+  height: 200px;
+  width: auto;
+}
+.adm-error-block-full-page .adm-error-block-description {
+  font-size: var(--adm-font-size-main);
+}
+.adm-error-block-full-page .adm-error-block-description-title {
+  color: #333333;
+}

package/es/components/error-block/images/busy.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const busyImage: JSX.Element;

package/es/components/error-block/images/default.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const defaultImage: JSX.Element;

package/es/components/error-block/images/disconnected.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const disconnectedImage: JSX.Element;

package/es/components/error-block/images/empty.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export declare const emptyImage: JSX.Element;

package/es/components/error-block/images/index.d.ts

@@ -1,2 +1,4 @@
-import { ReactElement } from 'react';
-export declare const imageRecord: Record<'default' | 'disconnected' | 'empty' | 'busy', ReactElement>;
+export { defaultImage } from './default';
+export { disconnectedImage } from './disconnected';
+export { emptyImage } from './empty';
+export { busyImage } from './busy';

package/es/components/error-block/images/index.js

@@ -1,10 +1,4 @@
-import { defaultImage } from './default';
-import { disconnectedImage } from './disconnected';
-import { emptyImage } from './empty';
-import { busyImage } from './busy';
-export const imageRecord = {
-  'default': defaultImage,
-  'disconnected': disconnectedImage,
-  'empty': emptyImage,
-  'busy': busyImage
-};
+export { defaultImage } from './default';
+export { disconnectedImage } from './disconnected';
+export { emptyImage } from './empty';
+export { busyImage } from './busy';

package/es/components/error-block/index.d.ts

@@ -1,4 +1,8 @@
 import './error-block.less';
+import { ReactNode } from 'react';
 import { ErrorBlock } from './error-block';
-export type { ErrorBlockProps } from './error-block';
+export { createErrorBlock } from './create-error-block';
+export type { ErrorBlockProps } from './create-error-block';
+export declare type ErrorBlockStatus = 'default' | 'disconnected' | 'empty' | 'busy';
+export declare type ImageRecord = Partial<Record<ErrorBlockStatus, string | ReactNode>>;
 export default ErrorBlock;

package/es/components/error-block/index.js

@@ -1,3 +1,4 @@
 import "./error-block.css";
 import { ErrorBlock } from './error-block';
+export { createErrorBlock } from './create-error-block';
 export default ErrorBlock;

package/es/components/floating-bubble/floating-bubble.css

@@ -39,7 +39,8 @@
   overflow: hidden;
   cursor: pointer;
   transition: opacity ease 0.15s;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
   touch-action: none;
   background: var(--background);
   color: var(--adm-color-white);

package/es/components/floating-panel/floating-panel.css

@@ -2,9 +2,6 @@
   --border-radius: 8px;
   --header-height: 28px;
   --z-index: var(--adm-floating-panel-z-index, 900);
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-  background: var(--adm-color-white);
   position: fixed;
   z-index: var(--z-index);
   bottom: 0;
@@ -30,7 +27,7 @@
   bottom: -100vh;
   height: 100vh;
   width: 100vw;
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
 }
 .adm-floating-panel .adm-floating-panel-header {
   flex: none;
@@ -38,8 +35,13 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  cursor: -webkit-grab;
   cursor: grab;
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
+  background-color: var(--adm-color-background);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
 }
 .adm-floating-panel .adm-floating-panel-header .adm-floating-panel-bar {
   height: 3px;
@@ -50,4 +52,5 @@
 .adm-floating-panel .adm-floating-panel-content {
   flex: 1;
   overflow-y: scroll;
+  background: var(--adm-color-background);
 }

package/es/components/floating-panel/floating-panel.d.ts

@@ -16,4 +16,8 @@ export declare const FloatingPanel: React.ForwardRefExoticComponent<{
     children: ReactNode;
     onHeightChange?: ((height: number, animating: boolean) => void) | undefined;
     handleDraggingOfContent?: boolean | undefined;
-} & NativeProps<"--z-index" | "--border-radius" | "--header-height"> & React.RefAttributes<FloatingPanelRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--z-index" | "--border-radius" | "--header-height", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<FloatingPanelRef>>;

package/es/components/floating-panel/floating-panel.js

@@ -113,8 +113,8 @@ export const FloatingPanel = forwardRef((p, ref) => {
     ref: elementRef,
     className: 'adm-floating-panel',
     style: {
-      height: maxHeight,
-      translateY: y.to(y => `calc(100% + (${y}px))`)
+      height: Math.round(maxHeight),
+      translateY: y.to(y => `calc(100% + (${Math.round(y)}px))`)
     }
   }, React.createElement("div", {
     className: 'adm-floating-panel-mask',

package/es/components/footer/footer.css

@@ -0,0 +1,51 @@
+.adm-footer {
+  --background-color: var(--adm-color-background);
+  color: var(--adm-color-text);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: var(--background-color);
+}
+.adm-footer-label {
+  width: 100%;
+}
+.adm-footer-label .adm-divider.adm-divider {
+  color: var(--adm-color-light);
+}
+.adm-footer-links {
+  margin: 8px 0;
+  color: var(--adm-color-primary);
+  white-space: nowrap;
+}
+.adm-footer-links a {
+  text-decoration: none;
+}
+.adm-footer-content {
+  display: flex;
+  align-items: center;
+  margin: 8px 0;
+  color: var(--adm-color-light);
+}
+.adm-footer-chips {
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+  margin: 8px 0;
+}
+.adm-footer-chip {
+  white-space: nowrap;
+  margin-right: 20px;
+  font-size: 12px;
+  background-color: var(--adm-color-box);
+  color: var(--adm-color-weak);
+  padding: 4px 12px;
+  border-radius: 100px;
+}
+.adm-footer-chip-link {
+  cursor: pointer;
+  background-color: #e7f1ff;
+  color: var(--adm-color-primary);
+}
+.adm-footer-chip:last-child {
+  margin-right: 0;
+}

package/es/components/footer/footer.d.ts

@@ -0,0 +1,19 @@
+import { FC, ReactNode } from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare type LinkItem = {
+    text: string;
+    href: string;
+};
+export declare type ChipItem = {
+    text: ReactNode;
+    type?: 'plain' | 'link';
+};
+export declare type FooterProps = {
+    label?: ReactNode;
+    links?: LinkItem[];
+    content?: ReactNode;
+    chips?: ChipItem[];
+    onChipClick?: (item: ChipItem, index: number) => void;
+    onLinkClick?: (item: LinkItem, index: number) => void;
+} & NativeProps<'--background-color'>;
+export declare const Footer: FC<FooterProps>;

package/es/components/footer/footer.js

@@ -0,0 +1,66 @@
+import React from 'react';
+import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
+import { mergeProps } from '../../utils/with-default-props';
+import { Divider } from '../divider/divider';
+const classPrefix = `adm-footer`;
+const defaultProps = {
+  label: '',
+  links: [],
+  content: '',
+  chips: []
+};
+export const Footer = p => {
+  const props = mergeProps(defaultProps, p);
+  const {
+    label,
+    links,
+    content,
+    chips,
+    onChipClick,
+    onLinkClick
+  } = props;
+
+  const clickChipItem = (item, index) => {
+    if ((chips === null || chips === void 0 ? void 0 : chips.length) && item.type === 'link') {
+      onChipClick === null || onChipClick === void 0 ? void 0 : onChipClick(item, index);
+    }
+  };
+
+  const clickLinkItem = (item, index, e) => {
+    if (onLinkClick) {
+      e.preventDefault();
+      onLinkClick(item, index);
+    }
+  };
+
+  return withNativeProps(props, React.createElement("div", {
+    className: classNames(classPrefix)
+  }, label && React.createElement("div", {
+    className: `${classPrefix}-label`
+  }, React.createElement(Divider, null, label)), links && links.length > 0 && React.createElement("div", {
+    className: `${classPrefix}-links`
+  }, links.map((link, index) => {
+    return React.createElement(React.Fragment, {
+      key: index
+    }, React.createElement("a", {
+      href: link.href,
+      rel: 'noopener noreferrer',
+      onClick: event => clickLinkItem(link, index, event)
+    }, link.text), index !== links.length - 1 && React.createElement(Divider, {
+      direction: 'vertical'
+    }));
+  })), content && React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, content), chips && chips.length > 0 && React.createElement("div", {
+    className: `${classPrefix}-chips`
+  }, chips.map((chip, index) => {
+    return React.createElement("div", {
+      key: index,
+      onClick: () => clickChipItem(chip, index),
+      className: classNames(`${classPrefix}-chip`, {
+        [`${classPrefix}-chip-link`]: chip.type === 'link'
+      })
+    }, chip.text);
+  }))));
+};

package/es/components/footer/index.d.ts

@@ -0,0 +1,4 @@
+import './footer.less';
+import { Footer } from './footer';
+export type { FooterProps, ChipItem, LinkItem } from './footer';
+export default Footer;

package/es/components/footer/index.js

@@ -0,0 +1,3 @@
+import "./footer.css";
+import { Footer } from './footer';
+export default Footer;

package/es/components/form/context.d.ts

@@ -5,7 +5,7 @@ export declare type FormContextType = {
     name?: string;
     hasFeedback: boolean;
     layout: FormLayout;
-    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional';
+    requiredMarkStyle: 'asterisk' | 'text-required' | 'text-optional' | 'none';
     disabled: boolean;
 };
 export declare const defaultFormContext: FormContextType;

package/es/components/form/form-item.css

@@ -7,7 +7,7 @@
   line-height: 1.5;
   box-sizing: border-box;
   position: relative;
-  color: #666666;
+  color: var(--adm-color-text-secondary);
 }
 .adm-form-item-label .adm-form-item-required-asterisk {
   position: absolute;
@@ -15,7 +15,8 @@
   top: 0;
   font-family: SimSun, sans-serif;
   color: var(--adm-color-danger);
-  user-select: none;
+  -webkit-user-select: none;
+          user-select: none;
 }
 .adm-form-item-label .adm-form-item-required-text {
   margin-left: 4px;
@@ -63,6 +64,6 @@
   align-self: center;
 }
 .adm-form-item.adm-form-item-vertical .adm-form-item-label {
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
   margin-bottom: 4px;
 }

package/es/components/form/form-item.d.ts

@@ -7,7 +7,7 @@ import type { FormLayout } from './index';
 declare type RenderChildren<Values = any> = (form: FormInstance<Values>) => React.ReactNode;
 declare type ChildrenType<Values = any> = RenderChildren<Values> | React.ReactNode;
 declare type RcFieldProps = Omit<FieldProps, 'children'>;
-export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
+export declare type FormItemProps = Pick<RcFieldProps, 'dependencies' | 'valuePropName' | 'name' | 'rules' | 'messageVariables' | 'trigger' | 'validateTrigger' | 'shouldUpdate' | 'initialValue' | 'getValueFromEvent' | 'getValueProps' | 'normalize' | 'preserve' | 'validateFirst'> & Pick<ListItemProps, 'style' | 'extra' | 'clickable' | 'arrow' | 'description'> & {
     label?: React.ReactNode;
     help?: React.ReactNode;
     hasFeedback?: boolean;