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

package/es/components/dialog/dialog.js

@@ -1,58 +1,20 @@
 import { __awaiter } from "tslib";
-import React, { useState } from 'react';
+import React from 'react';
 import { mergeProps } from '../../utils/with-default-props';
 import classNames from 'classnames';
-import { useUnmountedRef } from 'ahooks';
-import Mask from '../mask';
 import { DialogActionButton } from './dialog-action-button';
 import Image from '../image';
-import { renderToContainer } from '../../utils/render-to-container';
-import { withStopPropagation } from '../../utils/with-stop-propagation';
 import AutoCenter from '../auto-center';
-import { useSpring, animated } from '@react-spring/web';
-import { withNativeProps } from '../../utils/native-props';
+import CenterPopup from '../center-popup';
 const defaultProps = {
-  visible: false,
   actions: [],
   closeOnAction: false,
   closeOnMaskClick: false,
-  stopPropagation: ['click'],
-  getContainer: null,
-  disableBodyScroll: true
+  getContainer: null
 };
 export const Dialog = p => {
   const props = mergeProps(defaultProps, p);
-  const unmountedRef = useUnmountedRef();
-  const style = useSpring({
-    scale: props.visible ? 1 : 0.8,
-    opacity: props.visible ? 1 : 0,
-    config: {
-      mass: 1.2,
-      tension: 200,
-      friction: 25,
-      clamp: true
-    },
-    onStart: () => {
-      setActive(true);
-    },
-    onRest: () => {
-      var _a, _b;
-
-      if (unmountedRef.current) return;
-      setActive(props.visible);
-
-      if (props.visible) {
-        (_a = props.afterShow) === null || _a === void 0 ? void 0 : _a.call(props);
-      } else {
-        (_b = props.afterClose) === null || _b === void 0 ? void 0 : _b.call(props);
-      }
-    }
-  });
-  const [active, setActive] = useState(props.visible);
-  const body = React.createElement("div", {
-    className: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
-    style: props.bodyStyle
-  }, !!props.image && React.createElement("div", {
+  const element = React.createElement(React.Fragment, null, !!props.image && React.createElement("div", {
     className: cls('image-container')
   }, React.createElement(Image, {
     src: props.image,
@@ -85,26 +47,29 @@ export const Dialog = p => {
       })
     })));
   })));
-  const node = withNativeProps(props, React.createElement("div", {
-    className: cls(),
-    style: {
-      display: active ? undefined : 'none'
-    }
-  }, React.createElement(Mask, {
+  return React.createElement(CenterPopup, {
+    className: classNames(cls(), props.className),
+    style: props.style,
+    afterClose: props.afterClose,
+    afterShow: props.afterShow,
+    onMaskClick: props.closeOnMaskClick ? () => {
+      var _a;
+
+      (_a = props.onClose) === null || _a === void 0 ? void 0 : _a.call(props);
+    } : undefined,
     visible: props.visible,
-    onMaskClick: props.closeOnMaskClick ? props.onClose : undefined,
-    style: props.maskStyle,
-    className: classNames(cls('mask'), props.maskClassName),
-    disableBodyScroll: props.disableBodyScroll
-  }), React.createElement("div", {
-    className: cls('wrap'),
-    style: {
-      pointerEvents: props.visible ? undefined : 'none'
-    }
-  }, React.createElement(animated.div, {
-    style: style
-  }, body))));
-  return renderToContainer(props.getContainer, withStopPropagation(props.stopPropagation, node));
+    getContainer: props.getContainer,
+    bodyStyle: props.bodyStyle,
+    bodyClassName: classNames(cls('body'), props.image && cls('with-image'), props.bodyClassName),
+    maskStyle: props.maskStyle,
+    maskClassName: props.maskClassName,
+    stopPropagation: props.stopPropagation,
+    disableBodyScroll: props.disableBodyScroll,
+    destroyOnClose: props.destroyOnClose,
+    forceRender: props.forceRender,
+    role: 'dialog',
+    "aria-label": props['aria-label']
+  }, element);
 };
 
 function cls(name = '') {

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

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

package/es/components/divider/divider.css

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

package/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

@@ -39,7 +39,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 +97,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/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/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.js

@@ -1,6 +1,7 @@
 import { __rest } from "tslib";
 import React, { useContext, useCallback, useState, useRef } from 'react';
 import classNames from 'classnames';
+import { withNativeProps } from '../../utils/native-props';
 import { Field } from 'rc-field-form';
 import FieldContext from 'rc-field-form/lib/FieldContext';
 import { devWarning } from '../../utils/dev-log';
@@ -62,6 +63,9 @@ const FormItemLayout = props => {
           className: `${classPrefix}-required-text`
         }, "(", locale.Form.optional, ")");
 
+      case 'none':
+        return null;
+
       default:
         return null;
     }
@@ -80,14 +84,14 @@ const FormItemLayout = props => {
       e.preventDefault();
     }
   }, React.createElement(QuestionCircleOutline, null)))) : null;
-  const description = React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
+  const description = props.description || hasFeedback ? React.createElement(React.Fragment, null, props.description, hasFeedback && React.createElement(React.Fragment, null, props.errors.map((error, index) => React.createElement("div", {
     key: `error-${index}`,
     className: `${classPrefix}-feedback-error`
   }, error)), props.warnings.map((warning, index) => React.createElement("div", {
     key: `warning-${index}`,
     className: `${classPrefix}-feedback-warning`
-  }, warning))));
-  return React.createElement(List.Item, {
+  }, warning)))) : null;
+  return withNativeProps(props, React.createElement(List.Item, {
     style: style,
     title: layout === 'vertical' && labelElement,
     prefix: layout === 'horizontal' && labelElement,
@@ -105,7 +109,7 @@ const FormItemLayout = props => {
     className: classNames(`${classPrefix}-child`, `${classPrefix}-child-position-${childElementPosition}`)
   }, React.createElement("div", {
     className: classNames(`${classPrefix}-child-inner`)
-  }, children)));
+  }, children))));
 };
 
 export const FormItem = props => {
@@ -197,7 +201,7 @@ export const FormItem = props => {
 
       return subWarnings;
     }, curWarnings);
-    return React.createElement(FormItemLayout, {
+    return withNativeProps(props, React.createElement(FormItemLayout, {
       className: className,
       style: style,
       label: label,
@@ -218,7 +222,7 @@ export const FormItem = props => {
       arrow: arrow
     }, React.createElement(NoStyleItemContext.Provider, {
       value: onSubMetaChange
-    }, baseChildren));
+    }, baseChildren)));
   }
 
   const isRenderProps = typeof children === 'function';
@@ -228,10 +232,7 @@ export const FormItem = props => {
   }
 
   let Variables = {};
-
-  if (typeof label === 'string') {
-    Variables.label = label;
-  }
+  Variables.label = typeof label === 'string' ? label : '';
 
   if (messageVariables) {
     Variables = Object.assign(Object.assign({}, Variables), messageVariables);