antd-mobile 5.32.3 → 5.33.0

package/2x/es/components/result/result.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ResultProps = {
     status?: 'success' | 'error' | 'info' | 'waiting' | 'warning';

package/2x/es/components/result-page/result-page-card.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type ResultPageCardProps = {
     children?: ReactNode;

package/2x/es/components/result-page/result-page.css

@@ -113,6 +113,7 @@
   justify-content: center;
   background-color: var(--adm-color-box);
   z-index: 3;
+  box-sizing: border-box;
 }
 
 .adm-result-page-footer-btn {

package/2x/es/components/result-page/result-page.d.ts

@@ -1,4 +1,5 @@
-import React, { FC, ReactNode } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 interface ResultPageDetail {
     label: ReactNode;
@@ -12,7 +13,7 @@ export declare type ResultPageProps = {
     title: ReactNode;
     description?: ReactNode;
     icon?: ReactNode;
-    details?: ResultPageDetails;
+    details?: ResultPageDetails | null;
     children?: ReactNode;
     primaryButtonText?: ReactNode;
     secondaryButtonText?: ReactNode;

package/2x/es/components/result-page/result-page.js

@@ -44,7 +44,7 @@ export const ResultPage = p => {
     className: `${classPrefix}-title`
   }, title), isNodeWithContent(description) ? React.createElement("div", {
     className: `${classPrefix}-description`
-  }, description) : null, details.length ? React.createElement("div", {
+  }, description) : null, (details === null || details === void 0 ? void 0 : details.length) ? React.createElement("div", {
     className: `${classPrefix}-details`
   }, (collapse ? details.slice(0, 3) : details).map((detail, index) => {
     return React.createElement("div", {
@@ -61,7 +61,7 @@ export const ResultPage = p => {
     className: `${classPrefix}-bg`
   }))), React.createElement("div", {
     className: `${classPrefix}-content`
-  }, props.children), React.createElement("div", {
+  }, props.children), (showPrimaryButton || showSecondaryButton) && React.createElement("div", {
     className: `${classPrefix}-footer`
   }, showSecondaryButton && React.createElement(Button, {
     block: true,

package/2x/es/components/scroll-mask/scroll-mask.d.ts

@@ -1,4 +1,4 @@
-import { FC, RefObject } from 'react';
+import type { FC, RefObject } from 'react';
 export declare type ScrollMaskProps = {
     scrollTrackRef: RefObject<HTMLElement>;
 };

package/2x/es/components/search-bar/search-bar.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { InputRef, InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
 export declare type SearchBarRef = InputRef;

package/2x/es/components/selector/check-mark.d.ts

@@ -1,2 +1,2 @@
 import React from 'react';
-export declare const CheckMark: React.MemoExoticComponent<() => JSX.Element>;
+export declare const CheckMark: React.MemoExoticComponent<() => React.JSX.Element>;

package/2x/es/components/selector/selector.d.ts

@@ -1,13 +1,15 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { GridProps } from '../grid';
+import type { FieldNamesType, BaseOptionType } from '../../hooks';
 declare type SelectorValue = string | number;
-export interface SelectorOption<V> {
-    label: ReactNode;
+export declare type SelectorOption<V> = {
+    label?: ReactNode;
     description?: ReactNode;
-    value: V;
+    value?: V;
     disabled?: boolean;
-}
+} & BaseOptionType;
 export declare type SelectorProps<V> = {
     options: SelectorOption<V>[];
     columns?: GridProps['columns'];
@@ -19,6 +21,7 @@ export declare type SelectorProps<V> = {
         items: SelectorOption<V>[];
     }) => void;
     showCheckMark?: boolean;
+    fieldNames?: FieldNamesType;
 } & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding' | '--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Selector: <V extends SelectorValue>(p: SelectorProps<V>) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 export {};

package/2x/es/components/selector/selector.js

@@ -7,6 +7,7 @@ import Grid from '../grid';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CheckMark } from './check-mark';
 import { useConfig } from '../config-provider';
+import { useFieldNames } from '../../hooks';
 const classPrefix = `adm-selector`;
 const defaultProps = {
   multiple: false,
@@ -15,6 +16,7 @@ const defaultProps = {
 };
 export const Selector = p => {
   const props = mergeProps(defaultProps, p);
+  const [labelName, valueName,, disabledName] = useFieldNames(props.fieldNames);
   const [value, setValue] = usePropsValue({
     value: props.value,
     defaultValue: props.defaultValue,
@@ -22,7 +24,7 @@ export const Selector = p => {
       var _a;
       const extend = {
         get items() {
-          return props.options.filter(option => val.includes(option.value));
+          return props.options.filter(option => val.includes(option[valueName]));
         }
       };
       (_a = props.onChange) === null || _a === void 0 ? void 0 : _a.call(props, val, extend);
@@ -32,31 +34,31 @@ export const Selector = p => {
     locale
   } = useConfig();
   const items = props.options.map(option => {
-    const active = (value || []).includes(option.value);
-    const disabled = option.disabled || props.disabled;
+    const active = (value || []).includes(option[valueName]);
+    const disabled = option[disabledName] || props.disabled;
     const itemCls = classNames(`${classPrefix}-item`, {
       [`${classPrefix}-item-active`]: active && !props.multiple,
       [`${classPrefix}-item-multiple-active`]: active && props.multiple,
       [`${classPrefix}-item-disabled`]: disabled
     });
     return React.createElement("div", {
-      key: option.value,
+      key: option[valueName],
       className: itemCls,
       onClick: () => {
         if (disabled) {
           return;
         }
         if (props.multiple) {
-          const val = active ? value.filter(v => v !== option.value) : [...value, option.value];
+          const val = active ? value.filter(v => v !== option[valueName]) : [...value, option[valueName]];
           setValue(val);
         } else {
-          const val = active ? [] : [option.value];
+          const val = active ? [] : [option[valueName]];
           setValue(val);
         }
       },
       role: 'option',
       "aria-selected": active && !props.multiple || active && props.multiple
-    }, option.label, option.description && React.createElement("div", {
+    }, option[labelName], option.description && React.createElement("div", {
       className: `${classPrefix}-item-description`
     }, option.description), active && props.showCheckMark && React.createElement("div", {
       className: `${classPrefix}-check-mark-wrapper`
@@ -66,9 +68,9 @@ export const Selector = p => {
     className: classPrefix,
     role: 'listbox',
     "aria-label": locale.Selector.name
-  }, !props.columns && React.createElement(Space, {
-    wrap: true
-  }, items), props.columns && React.createElement(Grid, {
+  }, props.columns ? React.createElement(Grid, {
     columns: props.columns
+  }, items) : React.createElement(Space, {
+    wrap: true
   }, items)));
 };

package/2x/es/components/side-bar/side-bar.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { BadgeProps } from '../badge';
 import { NativeProps } from '../../utils/native-props';
 export declare type SideBarItemProps = {
@@ -11,6 +11,6 @@ export declare type SideBarProps = {
     activeKey?: string | null;
     defaultActiveKey?: string | null;
     onChange?: (key: string) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--width' | '--height' | '--item-border-radius' | '--background-color'>;
 export declare const SideBar: FC<SideBarProps>;

package/2x/es/components/slider/marks.d.ts

@@ -1,6 +1,6 @@
-import React, { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 export declare type SliderMarks = {
-    [key: number]: React.ReactNode;
+    [key: number]: ReactNode;
 };
 declare type MarksProps = {
     marks: SliderMarks;

package/2x/es/components/slider/slider.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { SliderMarks } from './marks';
 export declare type SliderValue = number | [number, number];

package/2x/es/components/slider/thumb-icon.d.ts

@@ -1,3 +1,3 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare const ThumbIcon: FC<NativeProps>;

package/2x/es/components/slider/thumb.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, RefObject, ReactNode } from 'react';
+import type { FC, RefObject, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type ThumbProps = {
     value: number;
@@ -7,7 +7,7 @@ declare type ThumbProps = {
     disabled: boolean;
     onDrag: (value: number, first: boolean, last: boolean) => void;
     trackRef: RefObject<HTMLDivElement>;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     popover: boolean | ((value: number) => ReactNode);
     residentPopover: boolean;
 } & NativeProps;

package/2x/es/components/slider/ticks.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 declare type TicksProps = {
     points: number[];
     max: number;

package/2x/es/components/space/space.d.ts

@@ -1,4 +1,5 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SpaceProps = {
     direction?: 'horizontal' | 'vertical';
@@ -7,6 +8,6 @@ export declare type SpaceProps = {
     wrap?: boolean;
     block?: boolean;
     onClick?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--gap' | '--gap-vertical' | '--gap-horizontal'>;
 export declare const Space: FC<SpaceProps>;

package/2x/es/components/steps/step.d.ts

@@ -1,9 +1,9 @@
-import React, { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type StepProps = {
-    title?: React.ReactNode;
-    description?: React.ReactNode;
-    icon?: React.ReactNode;
+    title?: ReactNode;
+    description?: ReactNode;
+    icon?: ReactNode;
     status?: 'wait' | 'process' | 'finish' | 'error';
 } & NativeProps;
 export declare const Step: FC<StepProps>;

package/2x/es/components/steps/steps.d.ts

@@ -1,10 +1,10 @@
-import React, { FC } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type Direction = 'horizontal' | 'vertical';
 export declare type StepsProps = {
     current?: number;
     direction?: Direction;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--title-font-size' | '--description-font-size' | '--indicator-margin-right' | '--icon-size'>;
 export declare const Steps: FC<StepsProps>;
 export {};

package/2x/es/components/swipe-action/swipe-action.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 declare type SideType = 'left' | 'right';

package/2x/es/components/swipe-action/swipe-action.js

@@ -92,7 +92,6 @@ export const SwipeAction = forwardRef((p, ref) => {
         right: leftWidth
       };
     },
-    // rubberband: true,
     axis: 'x',
     preventScroll: true,
     pointer: {

package/2x/es/components/swiper/swiper-item.d.ts

@@ -1,8 +1,9 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 declare type Props = {
     onClick?: (e: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps;
 export declare const SwiperItem: FC<Props>;
 export {};

package/2x/es/components/swiper/swiper.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactElement, ReactNode } from 'react';
+import React from 'react';
+import type { ReactNode, ReactElement } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { PageIndicatorProps } from '../page-indicator';
 declare const eventToPropRecord: {

package/2x/es/components/switch/switch.d.ts

@@ -1,4 +1,4 @@
-import { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type SwitchProps = {
     loading?: boolean;

package/2x/es/components/tab-bar/tab-bar.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { BadgeProps } from '../badge';
 export declare type TabBarItemProps = {
@@ -12,6 +12,6 @@ export declare type TabBarProps = {
     defaultActiveKey?: string | null;
     onChange?: (key: string) => void;
     safeArea?: boolean;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps;
 export declare const TabBar: FC<TabBarProps>;

package/2x/es/components/tabs/tabs.d.ts

@@ -1,4 +1,4 @@
-import React, { FC, ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TabProps = {
     title: ReactNode;
@@ -14,6 +14,7 @@ export declare type TabsProps = {
     activeLineMode?: 'auto' | 'full' | 'fixed';
     stretch?: boolean;
     onChange?: (key: string) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
+    direction?: 'ltr' | 'rtl';
 } & NativeProps<'--fixed-active-line-width' | '--active-line-height' | '--active-line-border-radius' | '--title-font-size' | '--content-padding' | '--active-title-color' | '--active-line-color'>;
 export declare const Tabs: FC<TabsProps>;

package/2x/es/components/tabs/tabs.js

@@ -17,7 +17,8 @@ export const Tab = () => {
 };
 const defaultProps = {
   activeLineMode: 'auto',
-  stretch: true
+  stretch: true,
+  direction: 'ltr'
 };
 export const Tabs = p => {
   var _a;
@@ -27,6 +28,7 @@ export const Tabs = p => {
   const keyToIndexRecord = {};
   let firstActiveKey = null;
   const panes = [];
+  const isRTL = props.direction === 'rtl';
   traverseReactNode(props.children, (child, index) => {
     if (!isValidElement(child)) return;
     const key = child.key;
@@ -111,6 +113,14 @@ export const Tabs = p => {
     } else {
       x = activeTabLeft + (activeTabWidth - activeLineWidth) / 2;
     }
+    if (isRTL) {
+      /**
+       * In RTL mode, x equals the container width minus the x-coordinate of the current tab minus the width of the current tab.
+       * https://github.com/Fog3211/reproduce-codesandbox/blob/f0a3396a114cc00e88a51a67d3be60a746519b30/assets/images/antd_mobile_tabs_rtl_x.jpg?raw=true
+       */
+      const w = ['auto', 'full'].includes(props.activeLineMode) ? width : activeLineWidth;
+      x = -(containerWidth - x - w);
+    }
     api.start({
       x,
       width,
@@ -118,7 +128,16 @@ export const Tabs = p => {
     });
     const maxScrollDistance = containerScrollWidth - containerWidth;
     if (maxScrollDistance <= 0) return;
-    const nextScrollLeft = bound(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, containerScrollWidth - containerWidth);
+    let nextScrollLeft = 0;
+    if (isRTL) {
+      /**
+       * 位移距离等于：activeTab的中心坐标距离容器中心坐标的距离，然后RTL取负数
+       * containerWidth / 2 - (activeTabLeft + (activeTabWidth - activeLineWidth) / 2) - activeLineWidth / 2,
+       */
+      nextScrollLeft = -bound(containerWidth / 2 - activeTabLeft + activeTabWidth / 2 - activeLineWidth, 0, maxScrollDistance);
+    } else {
+      nextScrollLeft = bound(activeTabLeft - (containerWidth - activeTabWidth) / 2, 0, maxScrollDistance);
+    }
     scrollApi.start({
       scrollLeft: nextScrollLeft,
       from: {
@@ -149,8 +168,20 @@ export const Tabs = p => {
     const container = tabListContainerRef.current;
     if (!container) return;
     const scrollLeft = container.scrollLeft;
-    const showLeftMask = scrollLeft > 0;
-    const showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    let showLeftMask = false;
+    let showRightMask = false;
+    if (isRTL) {
+      /**
+       * RTL模式下，只要滑动过，scrollLeft就再也回不到0（chrome是0.5）
+       * 所以要加round才能终止触发条件
+       * round(443.5) + 375 < 819
+       */
+      showLeftMask = Math.round(-scrollLeft) + container.offsetWidth < container.scrollWidth;
+      showRightMask = scrollLeft < 0;
+    } else {
+      showLeftMask = scrollLeft > 0;
+      showRightMask = scrollLeft + container.offsetWidth < container.scrollWidth;
+    }
     maskApi.start({
       leftMaskOpacity: showLeftMask ? 1 : 0,
       rightMaskOpacity: showRightMask ? 1 : 0,
@@ -165,7 +196,10 @@ export const Tabs = p => {
     updateMask(true);
   }, []);
   return withNativeProps(props, React.createElement("div", {
-    className: classPrefix
+    className: classPrefix,
+    style: {
+      direction: props.direction
+    }
   }, React.createElement("div", {
     className: `${classPrefix}-header`
   }, React.createElement(animated.div, {

package/2x/es/components/tag/tag.d.ts

@@ -1,10 +1,11 @@
-import React, { FC } from 'react';
+import React from 'react';
+import type { FC, ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type TagProps = {
     color?: 'default' | 'primary' | 'success' | 'warning' | 'danger' | (string & {});
     fill?: 'solid' | 'outline';
     round?: boolean;
     onClick?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void;
-    children?: React.ReactNode;
+    children?: ReactNode;
 } & NativeProps<'--border-color' | '--background-color' | '--text-color' | '--border-radius'>;
 export declare const Tag: FC<TagProps>;

package/2x/es/components/toast/toast.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import type { FC, ReactNode } from 'react';
 import type { MaskProps } from '../mask';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
 import { GetContainer } from '../../utils/render-to-container';
@@ -8,11 +8,11 @@ export interface ToastProps {
     maskClassName?: string;
     maskClickable?: boolean;
     content?: ReactNode;
-    icon?: 'success' | 'fail' | 'loading' | React.ReactNode;
+    icon?: 'success' | 'fail' | 'loading' | ReactNode;
     duration?: number;
     position?: 'top' | 'bottom' | 'center';
     visible?: boolean;
     getContainer?: GetContainer;
     stopPropagation?: PropagationEvent[];
 }
-export declare const InternalToast: React.FC<ToastProps>;
+export declare const InternalToast: FC<ToastProps>;

package/2x/es/components/tree-select/multiple.d.ts

@@ -1,17 +1,14 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 import { TreeSelectOption } from '.';
+import type { FieldNamesType } from '../../hooks';
 export declare type MultipleProps = {
     options: TreeSelectOption[];
     defaultValue?: string[];
     value?: string[];
     onChange?: (value: string[], nodes: TreeSelectOption[]) => void;
     selectAllText?: string[];
-    fieldNames?: {
-        label: string;
-        value: string;
-        children: string;
-    };
+    fieldNames?: FieldNamesType;
     expandKeys?: string[];
     defaultExpandKeys?: string[];
     onExpand?: (expandedKeys: string[], nodes: TreeSelectOption[]) => void;

package/2x/es/components/tree-select/multiple.js

@@ -6,6 +6,7 @@ import { mergeProps } from '../../utils/with-default-props';
 import Checkbox from '../checkbox';
 import { usePropsValue } from '../../utils/use-props-value';
 import { devWarning } from '../../utils/dev-log';
+import { useFieldNames } from '../../hooks';
 const classPrefix = `adm-tree-select-multiple`;
 export const Multiple = p => {
   const props = mergeProps({
@@ -18,9 +19,7 @@ export const Multiple = p => {
   useEffect(() => {
     devWarning('TreeSelect', 'TreeSelect.Multiple has been deprecated.');
   }, []);
-  const labelName = props.fieldNames.label || 'label';
-  const valueName = props.fieldNames.value || 'value';
-  const childrenName = props.fieldNames.children || 'children';
+  const [labelName, valueName, childrenName] = useFieldNames(props.fieldNames);
   // 打开的 keys
   const [expandKeys, setExpandKeys] = usePropsValue({
     value: props.expandKeys,

package/2x/es/components/tree-select/tree-select.d.ts

@@ -1,8 +1,13 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export interface TreeSelectOption {
+import type { FieldNamesType } from '../../hooks';
+export declare type TreeSelectOption = {
+    label?: string;
+    value?: string;
+    children?: TreeSelectOption[];
+} & {
     [key: string]: any;
-}
+};
 export declare type TreeSelectProps = {
     options: TreeSelectOption[];
     defaultValue?: string[];
@@ -10,10 +15,6 @@ export declare type TreeSelectProps = {
     onChange?: (value: string[], extend: {
         options: TreeSelectOption[];
     }) => void;
-    fieldNames?: {
-        label: string;
-        value: string;
-        children: string;
-    };
+    fieldNames?: FieldNamesType;
 } & NativeProps;
 export declare const TreeSelect: FC<TreeSelectProps>;

package/2x/es/components/tree-select/tree-select.js

@@ -4,6 +4,7 @@ import { withNativeProps } from '../../utils/native-props';
 import { getTreeDeep } from '../../utils/tree';
 import { mergeProps } from '../../utils/with-default-props';
 import { usePropsValue } from '../../utils/use-props-value';
+import { useFieldNames } from '../../hooks';
 const classPrefix = `adm-tree-select`;
 const defaultProps = {
   options: [],
@@ -12,9 +13,7 @@ const defaultProps = {
 };
 export const TreeSelect = p => {
   const props = mergeProps(defaultProps, p);
-  const labelName = props.fieldNames.label || 'label';
-  const valueName = props.fieldNames.value || 'value';
-  const childrenName = props.fieldNames.children || 'children';
+  const [labelName, valueName, childrenName] = useFieldNames(props.fieldNames);
   const [value, setValue] = usePropsValue({
     value: props.value,
     defaultValue: props.defaultValue

package/2x/es/components/virtual-input/virtual-input.d.ts

@@ -1,4 +1,5 @@
-import React, { ReactElement } from 'react';
+import React from 'react';
+import type { ReactElement } from 'react';
 import type { InputProps } from '../input';
 import { NativeProps } from '../../utils/native-props';
 import { NumberKeyboardProps } from '../number-keyboard';

package/2x/es/components/water-mark/water-mark.d.ts

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import type { FC } from 'react';
 import { NativeProps } from '../../utils/native-props';
 export declare type WaterMarkProps = {
     gapX?: number;

package/2x/es/components/water-mark/water-mark.js

@@ -77,7 +77,8 @@ export const WaterMark = p => {
     style: {
       zIndex,
       backgroundSize: `${gapX + width}px`,
-      backgroundImage: `url('${base64Url}')`
+      // Not give `url` if its empty. Which will cause 404 error.
+      backgroundImage: base64Url === '' ? undefined : `url('${base64Url}')`
     }
   }));
 };

package/2x/es/global/global.css

@@ -53,12 +53,12 @@ html[data-prefers-color-scheme='dark'] {
   --adm-color-border: #2b2b2b;
   --adm-color-box: #0a0a0a;
   --adm-color-background: #1a1a1a;
+  --adm-color-background-body: var(--adm-color-background);
   --adm-border-color: var(--adm-color-border);
 }
 
 :root {
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-  --adm-color-background-body: var(--adm-color-background);
 }
 
 html {

package/2x/es/global/theme-dark.css

@@ -13,5 +13,6 @@ html[data-prefers-color-scheme='dark'] {
   --adm-color-border: #2b2b2b;
   --adm-color-box: #0a0a0a;
   --adm-color-background: #1a1a1a;
+  --adm-color-background-body: var(--adm-color-background);
   --adm-border-color: var(--adm-color-border);
 }

package/2x/es/hooks/index.d.ts

@@ -0,0 +1,5 @@
+export { useFieldNames } from './useFieldNames';
+export type { FieldNamesType } from './useFieldNames';
+export declare type BaseOptionType = {
+    [key: string]: any;
+};

package/2x/es/hooks/index.js

@@ -0,0 +1 @@
+export { useFieldNames } from './useFieldNames';