antd-mobile 5.0.0-rc.22 → 5.0.0-rc.26

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

@@ -1,7 +1,7 @@
 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' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp'> & {
+export declare type InputProps = Pick<NativeInputProps, 'maxLength' | 'minLength' | 'max' | 'min' | 'autoComplete' | 'pattern' | 'inputMode' | 'type' | 'onFocus' | 'onBlur' | 'autoCapitalize' | 'autoCorrect' | 'onKeyDown' | 'onKeyUp' | 'onCompositionStart' | 'onCompositionEnd'> & {
     value?: string;
     defaultValue?: string;
     onChange?: (val: string) => void;
@@ -19,7 +19,7 @@ export declare type InputRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
+export declare const Input: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "pattern" | "max" | "min" | "type" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "onKeyDown" | "onKeyUp" | "autoCapitalize" | "autoCorrect" | "inputMode" | "autoComplete" | "maxLength" | "minLength"> & {
     value?: string | undefined;
     defaultValue?: string | undefined;
     onChange?: ((val: string) => void) | undefined;

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

@@ -1,9 +1,10 @@
-import React, { useState, forwardRef, useImperativeHandle, useRef, useLayoutEffect } from 'react';
+import React, { useState, forwardRef, useImperativeHandle, useRef } from 'react';
 import { usePropsValue } from '../../utils/use-props-value';
 import { CloseCircleFill } from 'antd-mobile-icons';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = `adm-input`;
 const defaultProps = {
   defaultValue: ''
@@ -39,7 +40,7 @@ export const Input = forwardRef((p, ref) => {
     (_a = props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
   };
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     var _a;
 
     if (!props.enterKeyHint) return;
@@ -86,8 +87,10 @@ export const Input = forwardRef((p, ref) => {
     autoCapitalize: props.autoCapitalize,
     autoCorrect: props.autoCorrect,
     onKeyDown: handleKeydown,
-    onKeyUp: props.onKeyUp
-  }), props.clearable && !!value && React.createElement("div", {
+    onKeyUp: props.onKeyUp,
+    onCompositionStart: props.onCompositionStart,
+    onCompositionEnd: props.onCompositionEnd
+  }), props.clearable && !!value && !props.readOnly && React.createElement("div", {
     className: `${classPrefix}-clear`,
     onMouseDown: e => {
       e.preventDefault();

package/2x/es/components/list/list.css

@@ -99,11 +99,11 @@
   pointer-events: none;
 }
 
-a.adm-list-item:active {
+a.adm-list-item:active:not(.adm-list-item-disabled) {
   background-color: var(--active-background-color);
 }
 
-a.adm-list-item:active::after {
+a.adm-list-item:active:not(.adm-list-item-disabled)::after {
   content: ' ';
   display: block;
   position: absolute;
@@ -111,8 +111,4 @@ a.adm-list-item:active::after {
   bottom: -2px;
   left: 0;
   border-bottom: var(--border-inner);
-}
-
-a.adm-list-item.adm-list-item-disabled:active {
-  background-color: unset;
 }

package/2x/es/components/modal/modal.css

@@ -22,10 +22,12 @@
 .adm-modal-main {
   width: 100%;
   max-height: 70vh;
+  box-sizing: border-box;
   font-size: 28px;
   background-color: white;
   border-radius: 16px;
-  overflow: hidden;
+  overflow-x: hidden;
+  overflow-y: auto;
   display: flex;
   flex-direction: column;
 }
@@ -40,14 +42,12 @@
 
 .adm-modal-main .adm-modal-body {
   padding: 40px 24px 24px;
+  display: flex;
+  flex-direction: column;
 }
 
-.adm-modal-main .adm-modal-body .adm-modal-close {
-  position: absolute;
-  right: 24px;
-  top: 24px;
-  color: var(--adm-color-weak);
-  padding: 4px;
+.adm-modal-main .adm-modal-body > * + * {
+  margin-top: 16px;
 }
 
 .adm-modal-main .adm-modal-body-header-wrapper {
@@ -63,39 +63,44 @@
 }
 
 .adm-modal-main .adm-modal-body-content {
-  max-height: 70vh;
-  overflow-x: hidden;
-  overflow-y: auto;
   font-size: 30px;
   line-height: 1.4;
   color: #333;
 }
 
-.adm-modal-main .adm-modal-footer {
+.adm-modal-main .adm-modal-close {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  color: var(--adm-color-weak);
+  padding: 8px;
+  font-size: 36px;
+}
+
+.adm-modal-footer {
   user-select: none;
   padding: 16px 24px 24px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button {
-  font-size: 36px;
-  line-height: 50px;
-  border-right: solid 1px var(--adm-border-color);
+.adm-modal-footer.adm-space {
+  --gap-vertical: 40px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:last-child {
-  border-right: none;
+.adm-modal-footer .adm-modal-button {
+  font-size: 36px;
+  line-height: 50px;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary) {
   padding-top: 0;
   padding-bottom: 0;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary)::before {
   display: none;
 }
 
-.adm-modal-main .adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
+.adm-modal-footer .adm-modal-button:not(.adm-modal-button-primary):active {
   opacity: 0.7;
 }
 

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

@@ -71,7 +71,10 @@ export const Modal = p => {
     style: Object.assign({}, style),
     onClick: e => e.stopPropagation(),
     className: `${classPrefix}-main`
-  }, !!props.image && React.createElement("div", {
+  }, props.showCloseButton && React.createElement("a", {
+    className: classNames(`${classPrefix}-close`, 'adm-plain-anchor'),
+    onClick: props.onClose
+  }, React.createElement(CloseOutline, null)), !!props.image && React.createElement("div", {
     className: `${classPrefix}-image-container`
   }, React.createElement(Image, {
     src: props.image,
@@ -80,12 +83,6 @@ export const Modal = p => {
   })), React.createElement("div", {
     style: props.bodyStyle,
     className: classNames(`${classPrefix}-body`, props.bodyClassName)
-  }, props.showCloseButton && React.createElement("a", {
-    className: classNames(`${classPrefix}-close`, 'adm-plain-anchor'),
-    onClick: props.onClose
-  }, React.createElement(CloseOutline, null)), React.createElement(Space, {
-    direction: 'vertical',
-    block: true
   }, !!props.header && React.createElement("div", {
     className: `${classPrefix}-body-header-wrapper`
   }, React.createElement("div", {
@@ -94,11 +91,10 @@ export const Modal = p => {
     className: `${classPrefix}-body-title`
   }, props.title), !!props.content && React.createElement("div", {
     className: `${classPrefix}-body-content`
-  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content))), React.createElement("div", {
-    className: `${classPrefix}-footer`
-  }, React.createElement(Space, {
+  }, typeof props.content === 'string' ? React.createElement(AutoCenter, null, props.content) : props.content)), React.createElement(Space, {
     direction: 'vertical',
-    block: true
+    block: true,
+    className: `${classPrefix}-footer`
   }, props.actions.map((action, index) => {
     return React.createElement(ModalActionButton, {
       key: action.key,
@@ -113,6 +109,6 @@ export const Modal = p => {
         }
       })
     });
-  }))))))));
+  })))))));
   return renderToContainer(props.getContainer, node);
 };

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

@@ -14,7 +14,7 @@ export declare type PasscodeInputProps = {
     onFocus?: () => void;
     keyboard?: ReactElement<NumberKeyboardProps>;
     onFill?: (val: string) => void;
-} & NativeProps<'--cell-gap' | '--cell-size'>;
+} & NativeProps<'--cell-gap' | '--cell-size' | '--dot-size' | '--border-color' | '--border-radius'>;
 export declare type PasscodeInputRef = {
     focus: () => void;
     blur: () => void;
@@ -32,4 +32,4 @@ export declare const PasscodeInput: React.ForwardRefExoticComponent<{
     onFocus?: (() => void) | undefined;
     keyboard?: React.ReactElement<NumberKeyboardProps, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)> | undefined;
     onFill?: ((val: string) => void) | undefined;
-} & NativeProps<"--cell-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;
+} & NativeProps<"--border-radius" | "--border-color" | "--cell-size" | "--dot-size" | "--cell-gap"> & React.RefAttributes<PasscodeInputRef>>;

package/2x/es/components/picker/picker.css

@@ -1,10 +1,18 @@
 .adm-picker {
+  --header-button-font-size: 30px;
+  --title-font-size: 30px;
+  --item-font-size: 32px;
   width: 100%;
   height: 600px;
   overflow: hidden;
   position: relative;
   display: flex;
   flex-direction: column;
+  ---item-font-size: var(--item-font-size);
+}
+
+.adm-picker .adm-picker-view.adm-picker-view {
+  --item-font-size: var(---item-font-size);
 }
 
 .adm-picker-header {
@@ -17,14 +25,14 @@
 }
 
 .adm-picker-header-button {
-  font-size: 30px;
+  font-size: var(--header-button-font-size);
   display: inline-block;
   padding: 16px 16px;
 }
 
 .adm-picker-header-title {
   padding: 8px 8px;
-  font-size: 30px;
+  font-size: var(--title-font-size);
   color: var(--adm-color-text);
   text-align: center;
   flex: 1;

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

@@ -15,5 +15,5 @@ export declare type PickerProps = {
     confirmText?: ReactNode;
     cancelText?: ReactNode;
     children?: (items: (PickerColumnItem | null)[]) => ReactNode;
-} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps;
+} & Pick<PopupProps, 'getContainer' | 'afterShow' | 'afterClose' | 'onClick' | 'stopPropagation'> & NativeProps<'--header-button-font-size' | '--title-font-size' | '--item-font-size'>;
 export declare const Picker: React.NamedExoticComponent<PickerProps>;

package/2x/es/components/picker-view/picker-view.css

@@ -1,5 +1,6 @@
 .adm-picker-view {
   --height: 480px;
+  --item-font-size: 32px;
   height: var(--height);
   width: 100%;
   display: flex;
@@ -44,7 +45,7 @@
 }
 
 .adm-picker-view-column-item {
-  font-size: 32px;
+  font-size: var(--item-font-size);
   padding: 0 12px;
   height: 68px;
   display: flex;
@@ -66,6 +67,7 @@
   display: flex;
   flex-direction: column;
   position: relative;
+  z-index: 0;
 }
 
 .adm-picker-view-column-accessible > * {
@@ -86,7 +88,7 @@
 
 .adm-picker-view-mask {
   position: absolute;
-  z-index: 100;
+  z-index: 10000;
   left: 0;
   top: 0;
   width: 100%;

package/2x/es/components/picker-view/picker-view.d.ts

@@ -14,5 +14,5 @@ export declare type PickerViewProps = {
     value?: PickerValue[];
     defaultValue?: PickerValue[];
     onChange?: (value: PickerValue[], extend: PickerValueExtend) => void;
-} & NativeProps<'--height'>;
+} & NativeProps<'--height' | '--item-font-size'>;
 export declare const PickerView: React.NamedExoticComponent<PickerViewProps>;

package/2x/es/components/picker-view/wheel.js

@@ -1,10 +1,11 @@
-import React, { memo, useLayoutEffect, useRef } from 'react';
+import React, { memo, useRef } from 'react';
 import { useSpring, animated } from '@react-spring/web';
 import { useDrag } from '@use-gesture/react';
 import { convertPx } from '../../utils/convert-px';
 import { rubberbandIfOutOfBounds } from '../../utils/rubberband';
 import { bound } from '../../utils/bound';
 import isEqual from 'lodash/isEqual';
+import { useIsomorphicLayoutEffect } from 'ahooks';
 const classPrefix = `adm-picker-view`;
 export const Wheel = memo(props => {
   const itemHeight = convertPx(34);
@@ -29,7 +30,7 @@ export const Wheel = memo(props => {
     }
   }));
   const draggingRef = useRef(false);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (draggingRef.current) return;
     if (!value) return;
     const targetIndex = column.findIndex(item => item.value === value);
@@ -40,7 +41,7 @@ export const Wheel = memo(props => {
       immediate: y.goal !== finalPosition
     });
   }, [value, column]);
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     if (column.length === 0) {
       if (value !== null) {
         onSelect(null);
@@ -126,7 +127,7 @@ export const Wheel = memo(props => {
     className: `${classPrefix}-column`
   }, bind()), React.createElement(animated.div, {
     style: {
-      y
+      translateY: y
     },
     className: `${classPrefix}-column-wheel`,
     "aria-hidden": true

package/2x/es/components/popover/arrow.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { NativeProps } from '../../utils/native-props';
+export declare const Arrow: React.NamedExoticComponent<NativeProps<never>>;

package/2x/es/components/popover/arrow.js

@@ -0,0 +1,12 @@
+import React, { memo } from 'react';
+import { withNativeProps } from '../../utils/native-props';
+export const Arrow = memo(props => {
+  return withNativeProps(props, React.createElement("svg", {
+    viewBox: '0 0 30 16'
+  }, React.createElement("g", {
+    transform: 'translate(-1300.000000, -841.000000)',
+    fill: 'currentColor'
+  }, React.createElement("path", {
+    d: 'M1300,841 L1330,841 L1318.07289,855.312538 C1316.65863,857.009645 1314.13637,857.238942 1312.43926,855.824685 C1312.25341,855.669808 1312.08199,855.49839 1311.92711,855.312538 L1300,841 L1300,841 Z'
+  }))));
+});

package/2x/es/components/popover/index.d.ts

@@ -1,27 +1,19 @@
 /// <reference types="react" />
 import './popover.less';
-export type { BasePopoverProps, PopoverRef } from './popover';
-export type { PopMenuProps, Action } from './pop-menu';
+import './popover-menu.less';
+export type { PopoverProps, PopoverRef } from './popover';
+export type { PopoverMenuProps, Action } from './popover-menu';
 declare const _default: import("react").ForwardRefExoticComponent<{
-    getContainer?: (() => HTMLElement) | undefined;
+    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
     destroyOnHide?: boolean | undefined;
     children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
+    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
     stopPropagation?: "click"[] | undefined;
-} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
     content: import("react").ReactNode;
-} & import("react").RefAttributes<import("./popover").PopoverRef>> & {
-    Menu: <T extends import("./pop-menu").Action = import("./pop-menu").Action>(props: {
-        getContainer?: (() => HTMLElement) | undefined;
-        destroyOnHide?: boolean | undefined;
-        children: import("react").ReactElement<any, string | ((props: any) => import("react").ReactElement<any, any> | null) | (new (props: any) => import("react").Component<any, any, any>)>;
-        mode?: "dark" | "light" | undefined;
-        trigger?: "click" | undefined;
-        placement: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom";
-        stopPropagation?: "click"[] | undefined;
-    } & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & import("../../utils/native-props").NativeProps<"--z-index"> & {
+} & Pick<import("rc-tooltip/lib/Tooltip").TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & import("../../utils/native-props").NativeProps<"--z-index"> & import("react").RefAttributes<import("./popover").PopoverRef>> & {
+    Menu: <T extends import("./popover-menu").Action = import("./popover-menu").Action>(props: Pick<import("./popover").PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "trigger" | "defaultVisible" | "onVisibleChange" | "placement" | "destroyOnHide"> & {
         actions: T[];
         onAction?: ((text: T) => void) | undefined;
     } & {

package/2x/es/components/popover/index.js

@@ -1,7 +1,8 @@
 import "./popover.css";
+import "./popover-menu.css";
 import { attachPropertiesToComponent } from '../../utils/attach-properties-to-component';
-import { PopMenu } from './pop-menu';
+import { PopoverMenu } from './popover-menu';
 import { Popover } from './popover';
 export default attachPropertiesToComponent(Popover, {
-  Menu: PopMenu
+  Menu: PopoverMenu
 });

package/2x/es/components/popover/popover-menu.css

@@ -0,0 +1,63 @@
+.adm-popover-menu {
+  --border-color: var(--adm-border-color);
+}
+
+.adm-popover-menu.adm-popover {
+  --content-padding: 0;
+}
+
+.adm-popover-menu-list {
+  overflow: hidden;
+  min-width: 240px;
+}
+
+.adm-popover-menu-list-inner {
+  margin-top: -2px;
+}
+
+.adm-popover-menu-item {
+  display: flex;
+  padding-left: 40px;
+  justify-content: flex-start;
+  align-items: center;
+  position: relative;
+}
+
+.adm-popover-menu-item-icon {
+  flex: none;
+  padding-right: 16px;
+  font-size: 40px;
+}
+
+.adm-popover-menu-item-text {
+  flex: auto;
+  padding: 28px 40px 28px 0;
+  border-top: solid 2px var(--border-color);
+}
+
+.adm-popover-menu-item-disabled {
+  cursor: not-allowed;
+}
+
+.adm-popover-menu-item-disabled > * {
+  opacity: 0.4;
+}
+
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled) {
+  background-color: var(--border-color);
+}
+
+.adm-popover-menu-item:active:not(.adm-popover-menu-item-disabled)::after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 100%;
+  bottom: -2px;
+  left: 0;
+  border-bottom: solid 2px var(--border-color);
+}
+
+.adm-popover.adm-popover-dark.adm-popover-menu {
+  --border-color: #333333;
+  --background: rgba(0, 0, 0, 0.9);
+}

package/2x/es/components/popover/popover-menu.d.ts

@@ -0,0 +1,20 @@
+import React, { ReactElement, Ref } from 'react';
+import { PopoverProps, PopoverRef } from './popover';
+export declare type Action = {
+    text: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    key?: string;
+    onClick?: () => void;
+    [key: string]: any;
+};
+export declare type PopoverMenuProps<T> = Omit<PopoverProps, 'content'> & {
+    actions: T[];
+    onAction?: (text: T) => void;
+};
+export declare const PopoverMenu: <T extends Action = Action>(props: Pick<PopoverProps, "children" | "style" | "visible" | "className" | "tabIndex" | "mode" | "align" | "getContainer" | "stopPropagation" | "trigger" | "defaultVisible" | "onVisibleChange" | "placement" | "destroyOnHide"> & {
+    actions: T[];
+    onAction?: ((text: T) => void) | undefined;
+} & {
+    ref?: ((instance: PopoverRef | null) => void) | React.RefObject<PopoverRef> | null | undefined;
+}) => ReactElement;

package/2x/es/components/popover/popover-menu.js

@@ -0,0 +1,52 @@
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef } from 'react';
+import classNames from 'classnames';
+import { Popover } from './popover';
+const classPrefix = `adm-popover-menu`;
+export const PopoverMenu = forwardRef((props, ref) => {
+  const innerRef = useRef(null);
+  useImperativeHandle(ref, () => innerRef.current, []);
+  const onClick = useCallback(e => {
+    var _a;
+
+    const {
+      onAction
+    } = props;
+
+    if (onAction) {
+      onAction(e);
+    }
+
+    (_a = innerRef.current) === null || _a === void 0 ? void 0 : _a.hide();
+  }, [props.onAction]);
+  const overlay = useMemo(() => {
+    return React.createElement("div", {
+      className: `${classPrefix}-list`
+    }, React.createElement("div", {
+      className: `${classPrefix}-list-inner`
+    }, props.actions.map((action, index) => {
+      var _a;
+
+      return React.createElement("a", {
+        key: (_a = action.key) !== null && _a !== void 0 ? _a : index,
+        className: classNames(`${classPrefix}-item`, 'adm-plain-anchor', action.disabled && `${classPrefix}-item-disabled`),
+        onClick: () => {
+          var _a;
+
+          if (action.disabled) return;
+          onClick(action);
+          (_a = action.onClick) === null || _a === void 0 ? void 0 : _a.call(action);
+        }
+      }, action.icon && React.createElement("div", {
+        className: `${classPrefix}-item-icon`
+      }, action.icon), React.createElement("div", {
+        className: `${classPrefix}-item-text`
+      }, action.text));
+    })));
+  }, [props.actions, onClick]);
+  return React.createElement(Popover, Object.assign({
+    ref: innerRef
+  }, props, {
+    className: classNames(classPrefix, props.className),
+    content: overlay
+  }), props.children);
+});