@kne/form-info 0.1.7 → 0.1.10

package/dist/index.js

@@ -5,15 +5,19 @@ var react = require('react');
 var InfoPage = require('@kne/info-page');
 var flexBox = require('@kne/flex-box');
 var reactFormPlus = require('@kne/react-form-plus');
+var responsiveUtils = require('@kne/responsive-utils');
 var antd = require('antd');
 var jsxRuntime = require('react/jsx-runtime');
 var icons = require('@ant-design/icons');
 var reactIntl = require('@kne/react-intl');
+var TableView = require('@kne/table-view');
+require('@kne/table-view/dist/index.css');
 var useControlValue = require('@kne/use-control-value');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var InfoPage__default = /*#__PURE__*/_interopDefaultLegacy(InfoPage);
+var TableView__default = /*#__PURE__*/_interopDefaultLegacy(TableView);
 var useControlValue__default = /*#__PURE__*/_interopDefaultLegacy(useControlValue);
 
 function _extends() {
@@ -117,7 +121,7 @@ var classnames = createCommonjsModule(function (module) {
 }());
 });
 
-var style = {"form-outer":"_ZQNNL","form-info":"_GW4Xx","extra-btn":"_eY4qR","list-part":"_SL3dC","list-item":"_PNnMa","is-important":"_Xkp38","list-item-part":"_HiB5Q","table-list-inner":"_Uw-3T","multi-field-item":"_uogqr","react-form__field-label":"_UGjS9","multi-field-add-btn":"_rjVPh","table-list":"_r8-bn","table-list-field":"_Qkutm","table-list-header":"_9WdfD","is-req":"_CsPaL","table-options":"_8smwK","steps":"_IOdkE","steps-form-inner":"_uc1HZ","steps-modal":"_vWPQO","table-list-empty":"_DXskv","extra-container":"_wU-w4"};
+var style = {"kne-responsive-boundary":"kne-form-info_gh14z","kne-responsive-scroll":"kne-form-info_Kfn6L","form-outer":"kne-form-info_ZQNNL","form-info":"kne-form-info_GW4Xx","extra-btn":"kne-form-info_eY4qR","list-part":"kne-form-info_SL3dC","list-item":"kne-form-info_PNnMa","list-item-part":"kne-form-info_HiB5Q","is-important":"kne-form-info_Xkp38","table-list-inner":"kne-form-info_Uw-3T","multi-field-item":"kne-form-info_uogqr","react-form__field-label":"kne-form-info_UGjS9","multi-field-add-btn":"kne-form-info_rjVPh","table-list-view":"kne-form-info_ZD9zd","table-list":"kne-form-info_r8-bn","is-mobile":"kne-form-info_LtgJz","table-list-mobile-list":"kne-form-info_5uGUh","table-list-mobile-card":"kne-form-info_H8TZT","table-list-mobile-card-body":"kne-form-info_3Mhy7","table-list-mobile-field":"kne-form-info_-e-f1","table-list-mobile-actions":"kne-form-info_FVPV7","table-list-field":"kne-form-info_Qkutm","table-list-header":"kne-form-info_9WdfD","is-req":"kne-form-info_CsPaL","table-options":"kne-form-info_8smwK","steps":"kne-form-info_IOdkE","steps-vertical":"kne-form-info_03aHQ","steps-form-inner":"kne-form-info_uc1HZ","steps-modal":"kne-form-info_vWPQO","table-list-empty":"kne-form-info_DXskv","extra-container":"kne-form-info_wU-w4"};
 
 const _excluded$7 = ["className", "column", "list", "gap"];
 const FormInfo = props => {
@@ -125,18 +129,16 @@ const FormInfo = props => {
       column: 2,
       list: []
     }, props),
-    {
-      className,
-      column,
-      list,
-      gap
-    } = _Object$assign,
+    className = _Object$assign.className,
+    column = _Object$assign.column,
+    list = _Object$assign.list,
+    gap = _Object$assign.gap,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$7);
-  const isFlexBox = !(Number.isInteger(column) && column > 0);
-  const {
-    ref: flexBoxRef,
-    column: flexBoxColumn
-  } = flexBox.useFlexBox(isFlexBox ? column : {});
+  const isMobile = responsiveUtils.useIsMobile();
+  const isFlexBox = !isMobile && !(Number.isInteger(column) && column > 0);
+  const _useFlexBox = flexBox.useFlexBox(isFlexBox ? column : {}),
+    flexBoxRef = _useFlexBox.ref,
+    flexBoxColumn = _useFlexBox.column;
   const renderInner = (column, notLayout) => {
     return /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.FormInfo, {
       list: list,
@@ -167,6 +169,9 @@ const FormInfo = props => {
     });
   };
   const renderColumn = () => {
+    if (isMobile) {
+      return renderInner(1);
+    }
     if (!isFlexBox) {
       return renderInner(column);
     }
@@ -210,12 +215,12 @@ const withLocale = reactIntl.createWithIntlProvider({
   namespace: 'form-info'
 });
 
-const _excluded$6 = ["className", "itemClassName", "removeIcon", "removeText", "addText", "addIcon", "important", "title"],
+const _excluded$6 = ["className", "itemClassName", "removeIcon", "removeText", "addText", "addIcon", "important", "title", "bordered"],
   _excluded2$2 = ["id", "allowRemove", "onRemove", "index", "groupArgs"];
 const List = withLocale(p => {
-  const {
-    formatMessage
-  } = reactIntl.useIntl();
+  const _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
+  const isMobile = responsiveUtils.useIsMobile();
   const _Object$assign = Object.assign({}, {
       addText: formatMessage({
         id: 'addText'
@@ -229,31 +234,29 @@ const List = withLocale(p => {
         description: false
       })
     }, p),
-    {
-      className,
-      itemClassName,
-      removeIcon,
-      removeText,
-      addText,
-      addIcon,
-      important,
-      title
-    } = _Object$assign,
+    className = _Object$assign.className,
+    itemClassName = _Object$assign.itemClassName,
+    removeIcon = _Object$assign.removeIcon,
+    removeText = _Object$assign.removeText,
+    addText = _Object$assign.addText,
+    addIcon = _Object$assign.addIcon,
+    important = _Object$assign.important,
+    title = _Object$assign.title,
+    bordered = _Object$assign.bordered,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$6);
+  const showBorder = isMobile ? false : bordered;
   return /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.SubList, _extends({}, others, {
-    className: classnames(className, style['list-part']),
     listRender: _ref => {
-      let {
-          id,
-          allowRemove,
-          onRemove
-        } = _ref,
+      let id = _ref.id,
+        allowRemove = _ref.allowRemove,
+        onRemove = _ref.onRemove,
         props = _objectWithoutPropertiesLoose(_ref, _excluded2$2);
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classnames(style['list-item'], {
           [style['is-important']]: important
         }),
         children: [/*#__PURE__*/jsxRuntime.jsx(FormInfo, _extends({}, props, {
+          bordered: showBorder,
           className: style['list-item-part'],
           gap: 16,
           extra: allowRemove && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
@@ -268,13 +271,12 @@ const List = withLocale(p => {
       }, id);
     },
     children: (children, _ref2) => {
-      let {
-        allowAdd,
-        onAdd
-      } = _ref2;
+      let allowAdd = _ref2.allowAdd,
+        onAdd = _ref2.onAdd;
       return /*#__PURE__*/jsxRuntime.jsx(InfoPage__default["default"].Part, {
-        className: itemClassName,
+        className: classnames(className, itemClassName, style['list-part']),
         title: title,
+        bordered: showBorder,
         extra: /*#__PURE__*/jsxRuntime.jsx("div", {
           className: style['extra-container'],
           children: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
@@ -292,9 +294,8 @@ const List = withLocale(p => {
 
 const _excluded$5 = ["className", "addText", "addIcon", "removeIcon", "removeText"];
 const MultiField = withLocale(p => {
-  const {
-    formatMessage
-  } = reactIntl.useIntl();
+  const _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
   const _Object$assign = Object.assign({}, {
       addText: formatMessage({
         id: 'addText'
@@ -306,21 +307,17 @@ const MultiField = withLocale(p => {
         description: false
       })
     }, p),
-    {
-      className,
-      addText,
-      addIcon,
-      removeIcon,
-      removeText
-    } = _Object$assign,
+    className = _Object$assign.className,
+    addText = _Object$assign.addText,
+    addIcon = _Object$assign.addIcon,
+    removeIcon = _Object$assign.removeIcon,
+    removeText = _Object$assign.removeText,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$5);
   return /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.MultiField, _extends({}, others, {
     itemRender: (children, _ref) => {
-      let {
-        id,
-        allowRemove,
-        onRemove
-      } = _ref;
+      let id = _ref.id,
+        allowRemove = _ref.allowRemove,
+        onRemove = _ref.onRemove;
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classnames('multi-field-item', style['multi-field-item']),
         children: [children, /*#__PURE__*/jsxRuntime.jsxs("div", {
@@ -336,10 +333,8 @@ const MultiField = withLocale(p => {
       }, id);
     },
     children: (children, _ref2) => {
-      let {
-        allowAdd,
-        onAdd
-      } = _ref2;
+      let allowAdd = _ref2.allowAdd,
+        onAdd = _ref2.onAdd;
       return /*#__PURE__*/jsxRuntime.jsxs("div", {
         className: classnames(className, 'multi-field', style['multi-field']),
         children: [children, allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
@@ -354,11 +349,28 @@ const MultiField = withLocale(p => {
   }));
 });
 
-const _excluded$4 = ["className", "addIcon", "addText", "removeIcon", "removeText", "title"];
+const _excluded$4 = ["className", "addIcon", "addText", "removeIcon", "removeText", "title", "bordered", "renderMobile", "list"];
+const buildColumns = (list, _ref) => {
+  let removeText = _ref.removeText;
+  const fieldList = Array.isArray(list) ? list : [];
+  return [...fieldList.filter(item => {
+    var _item$props, _item$props2;
+    return (item == null || (_item$props = item.props) == null ? void 0 : _item$props.display) !== false && !(item != null && (_item$props2 = item.props) != null && _item$props2.hidden);
+  }).map(item => ({
+    name: item.props.name,
+    title: item.props.label,
+    render: value => value
+  })), {
+    name: '__options__',
+    type: 'options',
+    title: removeText || '',
+    width: 100,
+    render: value => value
+  }];
+};
 const TableList = withLocale(p => {
-  const {
-    formatMessage
-  } = reactIntl.useIntl();
+  const _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
   const _Object$assign = Object.assign({}, {
       empty: /*#__PURE__*/jsxRuntime.jsx(antd.Empty, {
         description: false,
@@ -373,20 +385,46 @@ const TableList = withLocale(p => {
         id: 'deleteText'
       })
     }, p),
-    {
-      className,
-      addIcon,
-      addText,
-      removeIcon,
-      removeText,
-      title
-    } = _Object$assign,
+    className = _Object$assign.className,
+    addIcon = _Object$assign.addIcon,
+    addText = _Object$assign.addText,
+    removeIcon = _Object$assign.removeIcon,
+    removeText = _Object$assign.removeText,
+    title = _Object$assign.title,
+    bordered = _Object$assign.bordered,
+    _Object$assign$render = _Object$assign.renderMobile,
+    renderMobile = _Object$assign$render === void 0 ? true : _Object$assign$render,
+    list = _Object$assign.list,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$4);
-  return /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.TableList, _extends({}, others, {
-    headerRender: (children, _ref) => {
-      let {
-        width
-      } = _ref;
+  const isMobile = responsiveUtils.useIsMobile();
+  const useMobileRender = TableView.isRenderMobileActive(renderMobile, isMobile);
+  const resolvedRenderMobile = react.useMemo(() => TableView.resolveRenderMobile(renderMobile), [renderMobile]);
+  const columns = react.useMemo(() => buildColumns(list, {
+    removeText
+  }), [list, removeText]);
+  const renderPart = (children, _ref2, extraClassName) => {
+    let onAdd = _ref2.onAdd,
+      allowAdd = _ref2.allowAdd;
+    return /*#__PURE__*/jsxRuntime.jsx(InfoPage__default["default"].Part, {
+      title: title,
+      className: classnames(className, style['table-list'], extraClassName),
+      bordered: bordered,
+      extra: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style['extra-container'],
+        children: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+          className: style['extra-btn'],
+          icon: addIcon,
+          onClick: onAdd,
+          children: addText
+        })
+      }),
+      children: children
+    });
+  };
+  const renderDesktop = () => /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.TableList, _extends({}, others, {
+    list: list,
+    headerRender: (children, _ref3) => {
+      let width = _ref3.width;
       return /*#__PURE__*/jsxRuntime.jsxs(antd.Row, {
         className: style['table-list-header'],
         wrap: false,
@@ -398,11 +436,9 @@ const TableList = withLocale(p => {
         })]
       });
     },
-    headerItemRender: (children, _ref2) => {
-      let {
-        id,
-        isReq
-      } = _ref2;
+    headerItemRender: (children, _ref4) => {
+      let id = _ref4.id,
+        isReq = _ref4.isReq;
       return /*#__PURE__*/jsxRuntime.jsx(antd.Col, {
         className: classnames({
           [style['is-req']]: isReq
@@ -417,13 +453,11 @@ const TableList = withLocale(p => {
         children: children
       });
     },
-    listRender: (children, _ref3) => {
-      let {
-        id,
-        width,
-        onRemove,
-        allowRemove
-      } = _ref3;
+    listRender: (children, _ref5) => {
+      let id = _ref5.id,
+        width = _ref5.width,
+        onRemove = _ref5.onRemove,
+        allowRemove = _ref5.allowRemove;
       return /*#__PURE__*/jsxRuntime.jsxs(antd.Row, {
         wrap: false,
         align: "top",
@@ -443,30 +477,67 @@ const TableList = withLocale(p => {
         })]
       }, id);
     },
-    children: (children, _ref4) => {
-      let {
-        onAdd,
-        allowAdd
-      } = _ref4;
-      return /*#__PURE__*/jsxRuntime.jsx(InfoPage__default["default"].Part, {
-        title: title,
-        className: classnames(className, style['table-list']),
-        extra: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: style['extra-container'],
-          children: allowAdd && /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
-            className: style['extra-btn'],
-            icon: addIcon,
-            onClick: onAdd,
-            children: addText
+    children: (children, controls) => renderPart(/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: style['table-list-inner'],
+      children: children
+    }), controls)
+  }));
+  const renderMobileList = () => /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.SubList, _extends({}, others, {
+    list: list,
+    listRender: _ref6 => {
+      let id = _ref6.id,
+        rowList = _ref6.list,
+        groupArgs = _ref6.groupArgs,
+        onRemove = _ref6.onRemove,
+        allowRemove = _ref6.allowRemove;
+      return /*#__PURE__*/jsxRuntime.jsxs("div", {
+        className: classnames(style['table-list-mobile-card'], 'info-page-table-mobile-card'),
+        children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+          className: style['table-list-mobile-card-body'],
+          children: /*#__PURE__*/jsxRuntime.jsx(reactFormPlus.FieldList, {
+            list: rowList,
+            groupArgs: groupArgs,
+            itemRender: (children, targetProps) => {
+              if (targetProps.hidden) {
+                return /*#__PURE__*/jsxRuntime.jsx("div", {
+                  style: {
+                    display: 'none'
+                  },
+                  children: children
+                });
+              }
+              return /*#__PURE__*/jsxRuntime.jsx("div", {
+                className: style['table-list-mobile-field'],
+                children: children
+              });
+            }
           })
-        }),
-        children: /*#__PURE__*/jsxRuntime.jsx("div", {
-          className: style['table-list-inner'],
-          children: children
-        })
-      });
-    }
+        }), /*#__PURE__*/jsxRuntime.jsx("div", {
+          className: style['table-list-mobile-actions'],
+          children: /*#__PURE__*/jsxRuntime.jsx(antd.Button, {
+            type: "link",
+            onClick: onRemove,
+            danger: true,
+            disabled: !allowRemove,
+            icon: removeIcon,
+            children: removeText
+          })
+        })]
+      }, id);
+    },
+    children: (children, controls) => renderPart(/*#__PURE__*/jsxRuntime.jsx("div", {
+      className: classnames(style['table-list-mobile-list'], 'info-page-table-mobile-card-list'),
+      children: children
+    }), controls, style['is-mobile'])
   }));
+  return /*#__PURE__*/jsxRuntime.jsx(TableView__default["default"], {
+    columns: columns,
+    dataSource: [],
+    empty: null,
+    className: style['table-list-view'],
+    renderMobile: useMobileRender ? typeof resolvedRenderMobile === 'function' ? resolvedRenderMobile : () => renderMobileList() : false,
+    render: () => renderDesktop()
+  });
 });
 
 const _excluded$3 = ["className", "children"];
@@ -474,10 +545,8 @@ const Form = /*#__PURE__*/react.forwardRef((props, ref) => {
   const _Object$assign = Object.assign({}, {
       type: 'inner'
     }, props),
-    {
-      className,
-      children
-    } = _Object$assign,
+    className = _Object$assign.className,
+    children = _Object$assign.children,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded$3);
   return /*#__PURE__*/jsxRuntime.jsx(reactFormAntd.FormAntd, _extends({}, others, {
     ref: ref,
@@ -3345,7 +3414,9 @@ var hasOwnProperty$1 = objectProto$1.hasOwnProperty;
 function baseUnset(object, path) {
   path = _castPath(path, object);
 
-  // Prevent prototype pollution, see: https://github.com/lodash/lodash/security/advisories/GHSA-xxjr-mmjv-4gpg
+  // Prevent prototype pollution:
+  // https://github.com/lodash/lodash/security/advisories/GHSA-xxjr-mmjv-4gpg
+  // https://github.com/lodash/lodash/security/advisories/GHSA-f23m-r3pf-42rh
   var index = -1,
       length = path.length;
 
@@ -3353,32 +3424,17 @@ function baseUnset(object, path) {
     return true;
   }
 
-  var isRootPrimitive = object == null || (typeof object !== 'object' && typeof object !== 'function');
-
   while (++index < length) {
-    var key = path[index];
-
-    // skip non-string keys (e.g., Symbols, numbers)
-    if (typeof key !== 'string') {
-      continue;
-    }
+    var key = _toKey(path[index]);
 
     // Always block "__proto__" anywhere in the path if it's not expected
     if (key === '__proto__' && !hasOwnProperty$1.call(object, '__proto__')) {
       return false;
     }
 
-    // Block "constructor.prototype" chains
-    if (key === 'constructor' &&
-        (index + 1) < length &&
-        typeof path[index + 1] === 'string' &&
-        path[index + 1] === 'prototype') {
-
-      // Allow ONLY when the path starts at a primitive root, e.g., _.unset(0, 'constructor.prototype.a')
-      if (isRootPrimitive && index === 0) {
-        continue;
-      }
-
+    // Block constructor/prototype as non-terminal traversal keys to prevent
+    // escaping the object graph into built-in constructors and prototypes.
+    if ((key === 'constructor' || key === 'prototype') && index < length - 1) {
       return false;
     }
   }
@@ -3778,15 +3834,13 @@ const _excluded$2 = ["children", "cancelText", "cancelButtonProps", "okButtonPro
   _excluded2$1 = ["formProps", "autoClose", "children", "modalRender"],
   _excluded3$1 = ["formProps", "okType", "okButtonProps", "okText", "onOk", "cancelButtonProps", "cancelText", "footer", "renderModal", "modalRender", "autoClose"];
 const ModalFooter = props => {
-  const {
-      children,
-      cancelText,
-      cancelButtonProps,
-      okButtonProps,
-      okType,
-      onOk,
-      okText
-    } = props,
+  const children = props.children,
+    cancelText = props.cancelText,
+    cancelButtonProps = props.cancelButtonProps,
+    okButtonProps = props.okButtonProps,
+    okType = props.okType,
+    onOk = props.onOk,
+    okText = props.okText,
     others = _objectWithoutPropertiesLoose(props, _excluded$2);
   const defaultFooter = /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
     justify: "space-between",
@@ -3817,12 +3871,10 @@ const ModalFooter = props => {
   return defaultFooter;
 };
 const ModalForm = props => {
-  const {
-      formProps,
-      autoClose,
-      children,
-      modalRender
-    } = props,
+  const formProps = props.formProps,
+    autoClose = props.autoClose,
+    children = props.children,
+    modalRender = props.modalRender,
     others = _objectWithoutPropertiesLoose(props, _excluded2$1);
   const formChildren = /*#__PURE__*/jsxRuntime.jsx(Form, _extends({}, Object.assign({}, formProps, {
     onSubmit: function (data) {
@@ -3850,9 +3902,8 @@ const ModalForm = props => {
   }) : formChildren;
 };
 const FormModal = withLocale(p => {
-  const {
-    formatMessage
-  } = reactIntl.useIntl();
+  const _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
   const _Object$assign = Object.assign({}, {
       formProps: {},
       autoClose: true,
@@ -3865,19 +3916,17 @@ const FormModal = withLocale(p => {
       }),
       renderModal: props => /*#__PURE__*/jsxRuntime.jsx(antd.Modal, _extends({}, props))
     }, p),
-    {
-      formProps,
-      okType,
-      okButtonProps,
-      okText,
-      onOk,
-      cancelButtonProps,
-      cancelText,
-      footer,
-      renderModal,
-      modalRender,
-      autoClose
-    } = _Object$assign,
+    formProps = _Object$assign.formProps,
+    okType = _Object$assign.okType,
+    okButtonProps = _Object$assign.okButtonProps,
+    okText = _Object$assign.okText,
+    onOk = _Object$assign.onOk,
+    cancelButtonProps = _Object$assign.cancelButtonProps,
+    cancelText = _Object$assign.cancelText,
+    footer = _Object$assign.footer,
+    renderModal = _Object$assign.renderModal,
+    modalRender = _Object$assign.modalRender,
+    autoClose = _Object$assign.autoClose,
     others = _objectWithoutPropertiesLoose(_Object$assign, _excluded3$1);
   return renderModal(Object.assign({}, others, {
     modalRender: children => /*#__PURE__*/jsxRuntime.jsx(ModalForm, _extends({}, Object.assign({}, others, {
@@ -3909,18 +3958,19 @@ const FormSteps = p => {
       items: [],
       onComplete: () => {}
     }, p),
-    {
-      className,
-      stepsClassName,
-      autoStep,
-      onComplete,
-      children
-    } = _Object$assign,
+    className = _Object$assign.className,
+    stepsClassName = _Object$assign.stepsClassName,
+    autoStep = _Object$assign.autoStep,
+    onComplete = _Object$assign.onComplete,
+    children = _Object$assign.children,
     stepProps = _objectWithoutPropertiesLoose(_Object$assign, _excluded$1);
-  const [currentStep, onStepChange] = useControlValue__default["default"](stepProps, {
-    value: 'current',
-    defaultValue: 'defaultCurrent'
-  });
+  const isMobile = responsiveUtils.useIsMobile();
+  const _useControlValue = useControlValue__default["default"](stepProps, {
+      value: 'current',
+      defaultValue: 'defaultCurrent'
+    }),
+    currentStep = _useControlValue[0],
+    onStepChange = _useControlValue[1];
   const stepCacheRef = react.useRef([]);
   const isLastStep = currentStep === stepProps.items.length - 1;
   const currentFormProps = Object.assign({}, (_stepProps$items$curr = stepProps.items[currentStep]) == null ? void 0 : _stepProps$items$curr.formProps, {
@@ -3942,12 +3992,20 @@ const FormSteps = p => {
     }
     return currentItem;
   });
+
+  // 移动端强制垂直布局，不允许水平 Steps
+  const stepsDirection = isMobile ? 'vertical' : stepProps.direction || stepProps.orientation;
+  const isVerticalSteps = stepsDirection === 'vertical';
   const inner = /*#__PURE__*/jsxRuntime.jsxs(antd.Flex, {
     className: className,
-    vertical: stepProps.direction !== 'vertical' || stepProps.orientation !== 'vertical',
+    vertical: !isVerticalSteps || isMobile,
     gap: 24,
-    children: [/*#__PURE__*/jsxRuntime.jsx(antd.Steps, _extends({}, omit_1(stepProps, ['current', 'defaultCurrent', 'onChange']), {
-      className: classnames(stepsClassName, style['steps']),
+    children: [/*#__PURE__*/jsxRuntime.jsx(antd.Steps, _extends({}, omit_1(stepProps, ['current', 'defaultCurrent', 'onChange', 'direction', 'orientation']), {
+      direction: stepsDirection,
+      orientation: stepsDirection,
+      className: classnames(stepsClassName, style['steps'], {
+        [style['steps-vertical']]: isVerticalSteps
+      }),
       items: stepItems,
       current: currentStep
     })), /*#__PURE__*/jsxRuntime.jsx("div", {
@@ -4379,36 +4437,29 @@ const _excluded = ["completeText", "nextText"],
   _excluded2 = ["modalProps", "completeText", "nextText", "className"],
   _excluded3 = ["children"];
 const childrenContext = /*#__PURE__*/react.createContext({});
-const {
-  Provider
-} = childrenContext;
+const Provider = childrenContext.Provider;
 const useChildrenContext = () => {
   return react.useContext(childrenContext);
 };
 const StepChildren = () => {
-  const {
-    stepChildren
-  } = useChildrenContext();
+  const _useChildrenContext = useChildrenContext(),
+    stepChildren = _useChildrenContext.stepChildren;
   return stepChildren;
 };
 const StepFormFooter = p => {
   const _Object$assign = Object.assign({}, p),
-    {
-      completeText,
-      nextText
-    } = _Object$assign,
+    completeText = _Object$assign.completeText,
+    nextText = _Object$assign.nextText,
     props = _objectWithoutPropertiesLoose(_Object$assign, _excluded);
-  const {
-    isLastStep
-  } = useChildrenContext();
+  const _useChildrenContext2 = useChildrenContext(),
+    isLastStep = _useChildrenContext2.isLastStep;
   return /*#__PURE__*/jsxRuntime.jsx(ModalFooter, _extends({}, props, {
     okText: isLastStep ? completeText : nextText
   }));
 };
 const FormStepsModal = withLocale(p => {
-  const {
-    formatMessage
-  } = reactIntl.useIntl();
+  const _useIntl = reactIntl.useIntl(),
+    formatMessage = _useIntl.formatMessage;
   const _merge = merge_1({}, {
       autoStep: true,
       modalProps: {
@@ -4421,18 +4472,14 @@ const FormStepsModal = withLocale(p => {
         id: 'next'
       })
     }, p),
-    {
-      modalProps,
-      completeText,
-      nextText,
-      className
-    } = _merge,
+    modalProps = _merge.modalProps,
+    completeText = _merge.completeText,
+    nextText = _merge.nextText,
+    className = _merge.className,
     others = _objectWithoutPropertiesLoose(_merge, _excluded2);
   return /*#__PURE__*/jsxRuntime.jsx(FormModal, _extends({}, modalProps, {
     modalRender: _ref => {
-      let {
-        defaultChildren
-      } = _ref;
+      let defaultChildren = _ref.defaultChildren;
       return /*#__PURE__*/jsxRuntime.jsx(FormSteps, _extends({}, Object.assign({}, others, {
         items: others.items.map(item => {
           return Object.assign({}, item, {
@@ -4458,9 +4505,7 @@ const FormStepsModal = withLocale(p => {
           }
         },
         children: _ref2 => {
-          let {
-              children: stepChildren
-            } = _ref2,
+          let stepChildren = _ref2.children,
             props = _objectWithoutPropertiesLoose(_ref2, _excluded3);
           return /*#__PURE__*/jsxRuntime.jsx(Provider, {
             value: _extends({
@@ -4472,9 +4517,7 @@ const FormStepsModal = withLocale(p => {
       }));
     },
     footer: _ref3 => {
-      let {
-        props
-      } = _ref3;
+      let props = _ref3.props;
       return /*#__PURE__*/jsxRuntime.jsx(StepFormFooter, _extends({}, props, {
         completeText: completeText,
         nextText: nextText