@hi-ui/grid 4.0.0-beta.9 → 4.0.2

package/lib/cjs/Grid.js

@@ -2,7 +2,7 @@
  * @hi-ui/grid
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -25,7 +25,7 @@ var env = require('@hi-ui/env');
 
 var context = require('./context.js');
 
-var index = require('./utils/type-assertion/lib/esm/index.js');
+var typeAssertion = require('@hi-ui/type-assertion');
 
 function _interopDefaultLegacy(e) {
   return e && _typeof(e) === 'object' && 'default' in e ? e : {
@@ -37,6 +37,7 @@ var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 var rowPrefix = classname.getPrefixCls('grid-row');
 var gutterNameVar = classname.getPrefixStyleVar('grid-row-gutter');
+var columnsNameVar = classname.getPrefixStyleVar('grid-row-columns');
 var gapNameVar = classname.getPrefixStyleVar('grid-row-gap'); // Row 与 Row 默认间距
 
 var DEFAULT_ROW_GAP = 16; // Row 内每项 Col 默认间距
@@ -68,7 +69,7 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       return gutterProp ? DEFAULT_GUTTER_GAP : 0;
     }
 
-    if (index.isNumeric(gutterProp)) {
+    if (typeAssertion.isNumeric(gutterProp)) {
       var gap = Number(gutterProp);
 
       if (gap < 0) {
@@ -81,10 +82,18 @@ var Row = /*#__PURE__*/React.forwardRef(function (_a, ref) {
 
     return 0;
   }, [gutterProp]);
-  var style = Object.assign(justifyContent ? {
-    display: 'flex',
-    justifyContent: justifyContent
-  } : {}, styleProp, (_Object$assign = {}, _Object$assign[gutterNameVar] = gutter + "px", _Object$assign[gapNameVar] = rowGap + "px", _Object$assign));
+  var justifyContentStyle = calcResponsiveGrid({
+    name: 'row-justify',
+    value: justifyContent,
+    defaultValue: 'flex-start',
+    allowSet: typeAssertion.isString,
+    setValue: function setValue(value) {
+      return value;
+    }
+  });
+  var style = Object.assign(justifyContent ? Object.assign(Object.assign(Object.assign({}, styleProp), {
+    display: 'flex'
+  }), justifyContentStyle) : Object.assign({}, styleProp), (_Object$assign = {}, _Object$assign[gutterNameVar] = gutter + "px", _Object$assign[gapNameVar] = rowGap + "px", _Object$assign[columnsNameVar] = "" + columns, _Object$assign));
   var cls = classname.cx(prefixCls, className);
   var providedContext = React.useMemo(function () {
     return {
@@ -104,16 +113,22 @@ if (env.__DEV__) {
   Row.displayName = 'Row';
 }
 
-var colPrefix = classname.getPrefixCls('grid-col');
-var spanNameVar = classname.getPrefixStyleVar('grid-col-span');
-var offsetNameVar = classname.getPrefixStyleVar('grid-col-offset');
+var colPrefix = classname.getPrefixCls('grid-col'); // const spanNameVar = getPrefixStyleVar('grid-col-span')
+// const offsetNameVar = getPrefixStyleVar('grid-col-offset')
+
+var getGridStyleVar = function getGridStyleVar(prop, size) {
+  if (size) {
+    return classname.getPrefixStyleVar('grid-' + prop + '-' + size);
+  }
+
+  return classname.getPrefixStyleVar('grid-' + prop);
+};
 /**
  * TODO: What is Grid Col
  */
 
-var Col = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _Object$assign2;
 
+var Col = /*#__PURE__*/React.forwardRef(function (_a, ref) {
   var _a$prefixCls2 = _a.prefixCls,
       prefixCls = _a$prefixCls2 === void 0 ? colPrefix : _a$prefixCls2,
       className = _a.className,
@@ -123,19 +138,59 @@ var Col = /*#__PURE__*/React.forwardRef(function (_a, ref) {
       _a$offset = _a.offset,
       offsetProp = _a$offset === void 0 ? 0 : _a$offset,
       justifyContent = _a.justify,
-      rest = tslib.__rest(_a, ["prefixCls", "className", "children", "style", "span", "offset", "justify"]);
+      order = _a.order,
+      rest = tslib.__rest(_a, ["prefixCls", "className", "children", "style", "span", "offset", "justify", "order"]);
 
   var _useGridContext = context.useGridContext(),
       _useGridContext$colum = _useGridContext.columns,
-      columns = _useGridContext$colum === void 0 ? 24 : _useGridContext$colum; // 需要 warning 不合法
-
-
-  var span = index.isNumeric(spanProp) && spanProp >= 0 && spanProp <= columns ? spanProp : null;
-  var offset = index.isNumeric(offsetProp) && offsetProp >= 0 && offsetProp < columns ? offsetProp : 0;
-  var style = Object.assign(justifyContent ? Object.assign(Object.assign({}, styleProp), {
-    display: 'flex',
-    justifyContent: justifyContent
-  }) : {}, styleProp, (_Object$assign2 = {}, _Object$assign2[spanNameVar] = span === null ? 'unset' : "calc(" + span + " / " + columns + " * 100%)", _Object$assign2[offsetNameVar] = "calc(" + offset + " / " + columns + " * 100%)", _Object$assign2));
+      columns = _useGridContext$colum === void 0 ? 24 : _useGridContext$colum;
+
+  var spanStyle = calcResponsiveGrid({
+    name: 'col-span',
+    value: spanProp,
+    noneCallback: function noneCallback(style) {
+      style.flexBasis = 'auto';
+      style.maxWidth = '100%';
+    },
+    allowSet: typeAssertion.isNumeric,
+    setValue: function setValue(value) {
+      return setGridSpan(value, 0, columns, 'offset');
+    }
+  });
+  var offsetStyle = calcResponsiveGrid({
+    name: 'col-offset',
+    value: offsetProp,
+    defaultValue: 0,
+    allowSet: typeAssertion.isNumeric,
+    setValue: function setValue(value) {
+      return setGridSpan(value, 0, columns, 'offset');
+    }
+  });
+  var orderStyle = calcResponsiveGrid({
+    name: 'col-order',
+    value: order,
+    defaultValue: 0,
+    allowSet: typeAssertion.isNumeric,
+    setValue: function setValue(value) {
+      return Number(value);
+    }
+  });
+  var justifyContentStyle = calcResponsiveGrid({
+    name: 'col-justify',
+    value: justifyContent,
+    defaultValue: 'flex-start',
+    allowSet: typeAssertion.isString,
+    setValue: function setValue(value) {
+      return value;
+    }
+  });
+  var style = Object.assign(justifyContent ? Object.assign(Object.assign(Object.assign({}, styleProp), {
+    display: 'flex'
+  }), justifyContentStyle) : Object.assign({}, styleProp), spanStyle, offsetStyle, orderStyle // {
+  // [spanNameVar]: span === null ? 'unset' : `calc(${span} / ${columns} * 100%)`,
+  // [offsetNameVar]: `calc(${offset} / ${columns} * 100%)`,
+  // }
+  );
   var cls = classname.cx(prefixCls, className);
   return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
     ref: ref,
@@ -148,34 +203,58 @@ if (env.__DEV__) {
   Col.displayName = 'Col';
 }
 
-var brPrefix = classname.getPrefixCls('grid-br');
-/**
- * TODO: What is Grid Br
- */
+var setGridSpan = function setGridSpan(value, min, max, propName) {
+  var nextValue = Number(value);
+
+  if (env.__DEV__) {
+    env.invariant(nextValue >= min && nextValue <= max, "Please set " + propName + " in the range [" + min + ", " + max + "] When using Grid component.");
+  }
+
+  if (nextValue < 0) nextValue = 0;
+  if (nextValue > max) nextValue = max;
+  return nextValue;
+};
+
+var GRID_SIZE_ARRAY = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+function calcResponsiveGrid(_ref) {
+  var value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      allowSet = _ref.allowSet,
+      setValue = _ref.setValue,
+      name = _ref.name,
+      noneCallback = _ref.noneCallback;
+  var style = {};
+
+  if (typeAssertion.isObject(value)) {
+    var prevSpan;
+    GRID_SIZE_ARRAY.forEach(function (key) {
+      var varName = getGridStyleVar(name, key); // @ts-ignore
+
+      var sizeValue = value[key]; // @ts-ignore
+
+      style[varName] = allowSet(sizeValue) ? setValue(sizeValue) : prevSpan; // @ts-ignore
+
+      prevSpan = style[varName];
+    });
+  } else {
+    if (allowSet(value)) {
+      value = setValue(value);
+    } else {
+      if (noneCallback) {
+        noneCallback(style);
+      } else if (typeof defaultValue !== 'undefined') {
+        value = defaultValue;
+      }
+    }
 
-var Br = /*#__PURE__*/React.forwardRef(function (_a, ref) {
-  var _a$prefixCls3 = _a.prefixCls,
-      prefixCls = _a$prefixCls3 === void 0 ? brPrefix : _a$prefixCls3,
-      className = _a.className,
-      styleProp = _a.style,
-      height = _a.height,
-      rest = tslib.__rest(_a, ["prefixCls", "className", "style", "height"]);
+    var varName = getGridStyleVar(name); // @ts-ignore
 
-  var cls = classname.cx(prefixCls, className);
-  var style = height ? Object.assign(Object.assign({}, styleProp), {
-    height: height
-  }) : styleProp;
-  return /*#__PURE__*/React__default["default"].createElement("div", Object.assign({
-    ref: ref,
-    className: cls,
-    style: style
-  }, rest));
-});
+    style[varName] = value;
+  }
 
-if (env.__DEV__) {
-  Br.displayName = 'Br';
+  return style;
 }
 
-exports.Br = Br;
 exports.Col = Col;
 exports.Row = Row;

package/lib/cjs/context.js

@@ -2,7 +2,7 @@
  * @hi-ui/grid
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/cjs/index.js

@@ -2,7 +2,7 @@
  * @hi-ui/grid
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -19,10 +19,8 @@ var Grid$1 = require('./Grid.js');
 
 var Grid = {
   Row: Grid$1.Row,
-  Col: Grid$1.Col,
-  Br: Grid$1.Br
+  Col: Grid$1.Col
 };
-exports.Br = Grid$1.Br;
 exports.Col = Grid$1.Col;
 exports.Row = Grid$1.Row;
 exports["default"] = Grid;

package/lib/cjs/styles/index.scss.js

@@ -2,7 +2,7 @@
  * @hi-ui/grid
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -12,9 +12,9 @@
 Object.defineProperty(exports, '__esModule', {
   value: true
 });
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-grid-row {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  margin-left: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);\n  margin-right: calc(-1 * var(--hi-v4-grid-row-gutter) / 2); }\n.hi-v4-grid-row + .hi-v4-grid-row {\n    margin-top: var(--hi-v4-grid-row-gap); }\n.hi-v4-grid-col {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  -webkit-box-flex: 0;\n      -ms-flex-positive: 0;\n          flex-grow: 0;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -ms-flex-preferred-size: var(--hi-v4-grid-col-span);\n      flex-basis: var(--hi-v4-grid-col-span);\n  max-width: var(--hi-v4-grid-col-span);\n  margin-left: var(--hi-v4-grid-col-offset);\n  padding-left: calc(var(--hi-v4-grid-row-gutter) / 2);\n  padding-right: calc(var(--hi-v4-grid-row-gutter) / 2); }\n";
+var css_248z = ".hi-v4-grid-row {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v4-grid-row-gap);margin-left: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);margin-right: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);-webkit-box-pack: var(--hi-v4-grid-row-justify);-ms-flex-pack: var(--hi-v4-grid-row-justify);justify-content: var(--hi-v4-grid-row-justify); }.hi-v4-grid-row + .hi-v4-grid-row {margin-top: var(--hi-v4-grid-row-gap); }.hi-v4-grid-col {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 0;-ms-flex-positive: 0;flex-grow: 0;-ms-flex-negative: 0;flex-shrink: 0;min-width: 1px;padding-left: calc(var(--hi-v4-grid-row-gutter) / 2);padding-right: calc(var(--hi-v4-grid-row-gutter) / 2);-ms-flex-preferred-size: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);flex-basis: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);max-width: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);-webkit-margin-start: calc(var(--hi-v4-grid-col-offset) / var(--hi-v4-grid-row-columns) * 100%);margin-inline-start: calc(var(--hi-v4-grid-col-offset) / var(--hi-v4-grid-row-columns) * 100%);-webkit-box-ordinal-group: NaN;-ms-flex-order: var(--hi-v4-grid-col-order);order: var(--hi-v4-grid-col-order);-webkit-box-pack: var(--hi-v4-grid-col-justify);-ms-flex-pack: var(--hi-v4-grid-col-justify);justify-content: var(--hi-v4-grid-col-justify); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-xs);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-xs);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-xs);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-xs); }.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-xs); }@media only screen and (min-width: 576px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-sm); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-sm);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-sm);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-sm);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-sm); } }@media only screen and (min-width: 768px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-md); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-md);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-md);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-md);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-md); } }@media only screen and (min-width: 992px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-lg); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-lg);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-lg);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-lg);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-lg); } }@media only screen and (min-width: 1200px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-xl); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-xl);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-xl);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-xl);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-xl); } }";
 
-var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+var __styleInject__ = require('inject-head-style')["default"];
 
 __styleInject__(css_248z);
 

package/lib/esm/Grid.js

@@ -2,7 +2,7 @@
  * @hi-ui/grid
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
@@ -10,11 +10,12 @@
 import { __rest } from 'tslib';
 import React, { forwardRef, useMemo } from 'react';
 import { getPrefixCls, getPrefixStyleVar, cx } from '@hi-ui/classname';
-import { __DEV__ } from '@hi-ui/env';
+import { __DEV__, invariant } from '@hi-ui/env';
 import { GridProvider, useGridContext } from './context.js';
-import { isNumeric } from './utils/type-assertion/lib/esm/index.js';
+import { isNumeric, isObject, isString } from '@hi-ui/type-assertion';
 var rowPrefix = getPrefixCls('grid-row');
 var gutterNameVar = getPrefixStyleVar('grid-row-gutter');
+var columnsNameVar = getPrefixStyleVar('grid-row-columns');
 var gapNameVar = getPrefixStyleVar('grid-row-gap'); // Row 与 Row 默认间距
 
 var DEFAULT_ROW_GAP = 16; // Row 内每项 Col 默认间距
@@ -59,10 +60,18 @@ var Row = /*#__PURE__*/forwardRef(function (_a, ref) {
 
     return 0;
   }, [gutterProp]);
-  var style = Object.assign(justifyContent ? {
-    display: 'flex',
-    justifyContent: justifyContent
-  } : {}, styleProp, (_Object$assign = {}, _Object$assign[gutterNameVar] = gutter + "px", _Object$assign[gapNameVar] = rowGap + "px", _Object$assign));
+  var justifyContentStyle = calcResponsiveGrid({
+    name: 'row-justify',
+    value: justifyContent,
+    defaultValue: 'flex-start',
+    allowSet: isString,
+    setValue: function setValue(value) {
+      return value;
+    }
+  });
+  var style = Object.assign(justifyContent ? Object.assign(Object.assign(Object.assign({}, styleProp), {
+    display: 'flex'
+  }), justifyContentStyle) : Object.assign({}, styleProp), (_Object$assign = {}, _Object$assign[gutterNameVar] = gutter + "px", _Object$assign[gapNameVar] = rowGap + "px", _Object$assign[columnsNameVar] = "" + columns, _Object$assign));
   var cls = cx(prefixCls, className);
   var providedContext = useMemo(function () {
     return {
@@ -82,16 +91,22 @@ if (__DEV__) {
   Row.displayName = 'Row';
 }
 
-var colPrefix = getPrefixCls('grid-col');
-var spanNameVar = getPrefixStyleVar('grid-col-span');
-var offsetNameVar = getPrefixStyleVar('grid-col-offset');
+var colPrefix = getPrefixCls('grid-col'); // const spanNameVar = getPrefixStyleVar('grid-col-span')
+// const offsetNameVar = getPrefixStyleVar('grid-col-offset')
+
+var getGridStyleVar = function getGridStyleVar(prop, size) {
+  if (size) {
+    return getPrefixStyleVar('grid-' + prop + '-' + size);
+  }
+
+  return getPrefixStyleVar('grid-' + prop);
+};
 /**
  * TODO: What is Grid Col
  */
 
-var Col = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _Object$assign2;
 
+var Col = /*#__PURE__*/forwardRef(function (_a, ref) {
   var _a$prefixCls2 = _a.prefixCls,
       prefixCls = _a$prefixCls2 === void 0 ? colPrefix : _a$prefixCls2,
       className = _a.className,
@@ -101,19 +116,59 @@ var Col = /*#__PURE__*/forwardRef(function (_a, ref) {
       _a$offset = _a.offset,
       offsetProp = _a$offset === void 0 ? 0 : _a$offset,
       justifyContent = _a.justify,
-      rest = __rest(_a, ["prefixCls", "className", "children", "style", "span", "offset", "justify"]);
+      order = _a.order,
+      rest = __rest(_a, ["prefixCls", "className", "children", "style", "span", "offset", "justify", "order"]);
 
   var _useGridContext = useGridContext(),
       _useGridContext$colum = _useGridContext.columns,
-      columns = _useGridContext$colum === void 0 ? 24 : _useGridContext$colum; // 需要 warning 不合法
-
-
-  var span = isNumeric(spanProp) && spanProp >= 0 && spanProp <= columns ? spanProp : null;
-  var offset = isNumeric(offsetProp) && offsetProp >= 0 && offsetProp < columns ? offsetProp : 0;
-  var style = Object.assign(justifyContent ? Object.assign(Object.assign({}, styleProp), {
-    display: 'flex',
-    justifyContent: justifyContent
-  }) : {}, styleProp, (_Object$assign2 = {}, _Object$assign2[spanNameVar] = span === null ? 'unset' : "calc(" + span + " / " + columns + " * 100%)", _Object$assign2[offsetNameVar] = "calc(" + offset + " / " + columns + " * 100%)", _Object$assign2));
+      columns = _useGridContext$colum === void 0 ? 24 : _useGridContext$colum;
+
+  var spanStyle = calcResponsiveGrid({
+    name: 'col-span',
+    value: spanProp,
+    noneCallback: function noneCallback(style) {
+      style.flexBasis = 'auto';
+      style.maxWidth = '100%';
+    },
+    allowSet: isNumeric,
+    setValue: function setValue(value) {
+      return setGridSpan(value, 0, columns, 'offset');
+    }
+  });
+  var offsetStyle = calcResponsiveGrid({
+    name: 'col-offset',
+    value: offsetProp,
+    defaultValue: 0,
+    allowSet: isNumeric,
+    setValue: function setValue(value) {
+      return setGridSpan(value, 0, columns, 'offset');
+    }
+  });
+  var orderStyle = calcResponsiveGrid({
+    name: 'col-order',
+    value: order,
+    defaultValue: 0,
+    allowSet: isNumeric,
+    setValue: function setValue(value) {
+      return Number(value);
+    }
+  });
+  var justifyContentStyle = calcResponsiveGrid({
+    name: 'col-justify',
+    value: justifyContent,
+    defaultValue: 'flex-start',
+    allowSet: isString,
+    setValue: function setValue(value) {
+      return value;
+    }
+  });
+  var style = Object.assign(justifyContent ? Object.assign(Object.assign(Object.assign({}, styleProp), {
+    display: 'flex'
+  }), justifyContentStyle) : Object.assign({}, styleProp), spanStyle, offsetStyle, orderStyle // {
+  // [spanNameVar]: span === null ? 'unset' : `calc(${span} / ${columns} * 100%)`,
+  // [offsetNameVar]: `calc(${offset} / ${columns} * 100%)`,
+  // }
+  );
   var cls = cx(prefixCls, className);
   return /*#__PURE__*/React.createElement("div", Object.assign({
     ref: ref,
@@ -126,32 +181,57 @@ if (__DEV__) {
   Col.displayName = 'Col';
 }
 
-var brPrefix = getPrefixCls('grid-br');
-/**
- * TODO: What is Grid Br
- */
+var setGridSpan = function setGridSpan(value, min, max, propName) {
+  var nextValue = Number(value);
+
+  if (__DEV__) {
+    invariant(nextValue >= min && nextValue <= max, "Please set " + propName + " in the range [" + min + ", " + max + "] When using Grid component.");
+  }
+
+  if (nextValue < 0) nextValue = 0;
+  if (nextValue > max) nextValue = max;
+  return nextValue;
+};
+
+var GRID_SIZE_ARRAY = ['xs', 'sm', 'md', 'lg', 'xl'];
+
+function calcResponsiveGrid(_ref) {
+  var value = _ref.value,
+      defaultValue = _ref.defaultValue,
+      allowSet = _ref.allowSet,
+      setValue = _ref.setValue,
+      name = _ref.name,
+      noneCallback = _ref.noneCallback;
+  var style = {};
+
+  if (isObject(value)) {
+    var prevSpan;
+    GRID_SIZE_ARRAY.forEach(function (key) {
+      var varName = getGridStyleVar(name, key); // @ts-ignore
+
+      var sizeValue = value[key]; // @ts-ignore
+
+      style[varName] = allowSet(sizeValue) ? setValue(sizeValue) : prevSpan; // @ts-ignore
+
+      prevSpan = style[varName];
+    });
+  } else {
+    if (allowSet(value)) {
+      value = setValue(value);
+    } else {
+      if (noneCallback) {
+        noneCallback(style);
+      } else if (typeof defaultValue !== 'undefined') {
+        value = defaultValue;
+      }
+    }
 
-var Br = /*#__PURE__*/forwardRef(function (_a, ref) {
-  var _a$prefixCls3 = _a.prefixCls,
-      prefixCls = _a$prefixCls3 === void 0 ? brPrefix : _a$prefixCls3,
-      className = _a.className,
-      styleProp = _a.style,
-      height = _a.height,
-      rest = __rest(_a, ["prefixCls", "className", "style", "height"]);
+    var varName = getGridStyleVar(name); // @ts-ignore
 
-  var cls = cx(prefixCls, className);
-  var style = height ? Object.assign(Object.assign({}, styleProp), {
-    height: height
-  }) : styleProp;
-  return /*#__PURE__*/React.createElement("div", Object.assign({
-    ref: ref,
-    className: cls,
-    style: style
-  }, rest));
-});
+    style[varName] = value;
+  }
 
-if (__DEV__) {
-  Br.displayName = 'Br';
+  return style;
 }
 
-export { Br, Col, Row };
+export { Col, Row };

package/lib/esm/context.js

@@ -2,7 +2,7 @@
  * @hi-ui/grid
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.

package/lib/esm/index.js

@@ -2,17 +2,16 @@
  * @hi-ui/grid
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
 import './styles/index.scss.js';
-import { Row, Col, Br } from './Grid.js';
-export { Br, Col, Row } from './Grid.js';
+import { Row, Col } from './Grid.js';
+export { Col, Row } from './Grid.js';
 var Grid = {
   Row: Row,
-  Col: Col,
-  Br: Br
+  Col: Col
 };
 export { Grid as default };

package/lib/esm/styles/index.scss.js

@@ -2,14 +2,13 @@
  * @hi-ui/grid
  * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
  *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
+ * Copyright (c) HiUI <mi-hiui@xiaomi.com>.
  *
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  */
-var css_248z = "@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n@use 'sass:map';\n.hi-v4-grid-row {\n  position: relative;\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  display: -webkit-box;\n  display: -ms-flexbox;\n  display: flex;\n  margin-left: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);\n  margin-right: calc(-1 * var(--hi-v4-grid-row-gutter) / 2); }\n.hi-v4-grid-row + .hi-v4-grid-row {\n    margin-top: var(--hi-v4-grid-row-gap); }\n.hi-v4-grid-col {\n  -webkit-box-sizing: border-box;\n          box-sizing: border-box;\n  -webkit-box-flex: 0;\n      -ms-flex-positive: 0;\n          flex-grow: 0;\n  -ms-flex-negative: 0;\n      flex-shrink: 0;\n  -ms-flex-preferred-size: var(--hi-v4-grid-col-span);\n      flex-basis: var(--hi-v4-grid-col-span);\n  max-width: var(--hi-v4-grid-col-span);\n  margin-left: var(--hi-v4-grid-col-offset);\n  padding-left: calc(var(--hi-v4-grid-row-gutter) / 2);\n  padding-right: calc(var(--hi-v4-grid-row-gutter) / 2); }\n";
-
-var __styleInject__ = require('style-inject/dist/style-inject.es.js')["default"];
+import __styleInject__ from 'inject-head-style';
+var css_248z = ".hi-v4-grid-row {position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;-ms-flex-wrap: wrap;flex-wrap: wrap;row-gap: var(--hi-v4-grid-row-gap);margin-left: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);margin-right: calc(-1 * var(--hi-v4-grid-row-gutter) / 2);-webkit-box-pack: var(--hi-v4-grid-row-justify);-ms-flex-pack: var(--hi-v4-grid-row-justify);justify-content: var(--hi-v4-grid-row-justify); }.hi-v4-grid-row + .hi-v4-grid-row {margin-top: var(--hi-v4-grid-row-gap); }.hi-v4-grid-col {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-box-flex: 0;-ms-flex-positive: 0;flex-grow: 0;-ms-flex-negative: 0;flex-shrink: 0;min-width: 1px;padding-left: calc(var(--hi-v4-grid-row-gutter) / 2);padding-right: calc(var(--hi-v4-grid-row-gutter) / 2);-ms-flex-preferred-size: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);flex-basis: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);max-width: calc(var(--hi-v4-grid-col-span) / var(--hi-v4-grid-row-columns) * 100%);-webkit-margin-start: calc(var(--hi-v4-grid-col-offset) / var(--hi-v4-grid-row-columns) * 100%);margin-inline-start: calc(var(--hi-v4-grid-col-offset) / var(--hi-v4-grid-row-columns) * 100%);-webkit-box-ordinal-group: NaN;-ms-flex-order: var(--hi-v4-grid-col-order);order: var(--hi-v4-grid-col-order);-webkit-box-pack: var(--hi-v4-grid-col-justify);-ms-flex-pack: var(--hi-v4-grid-col-justify);justify-content: var(--hi-v4-grid-col-justify); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-xs);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-xs);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-xs);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-xs); }.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-xs); }@media only screen and (min-width: 576px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-sm); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-sm);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-sm);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-sm);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-sm); } }@media only screen and (min-width: 768px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-md); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-md);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-md);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-md);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-md); } }@media only screen and (min-width: 992px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-lg); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-lg);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-lg);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-lg);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-lg); } }@media only screen and (min-width: 1200px) {.hi-v4-grid-row {--hi-v4-grid-row-justify: var(--hi-v4-grid-row-justify-xl); }.hi-v4-grid-col {--hi-v4-grid-col-span: var(--hi-v4-grid-col-span-xl);--hi-v4-grid-col-offset: var(--hi-v4-grid-col-offset-xl);--hi-v4-grid-col-order: var(--hi-v4-grid-col-order-xl);--hi-v4-grid-col-justify: var(--hi-v4-grid-col-justify-xl); } }";
 
 __styleInject__(css_248z);
 

package/lib/types/Grid.d.ts

@@ -1,5 +1,6 @@
 import React from 'react';
 import { HiBaseHTMLProps } from '@hi-ui/core';
+import { GridJustifyEnum, GridResponsiveSize } from './types';
 /**
  * TODO: What is Grid Row
  */
@@ -8,14 +9,13 @@ export interface RowProps extends HiBaseHTMLProps<'div'> {
     /**
      * 里面的元素排布方式
      */
-    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between';
+    justify?: GridJustifyEnum | GridResponsiveSize<GridJustifyEnum>;
     /**
      * Row 里面元素之间是否有外边距，建议使用偶数
      */
     gutter?: boolean | number;
     /**
-     * 设置栅格列总数，一般是 24 或者 48。暂不对外暴露
-     * @private
+     * 设置栅格列总数，一般是 12 或者 24 或者 48
      */
     columns?: number;
     /**
@@ -31,23 +31,17 @@ export interface ColProps extends HiBaseHTMLProps<'div'> {
     /**
      *  Col 元素占多少个栅格
      */
-    span?: number;
+    span?: number | GridResponsiveSize<number>;
     /**
      *  Col 元素偏移多少个栅格
      */
-    offset?: number;
+    offset?: number | GridResponsiveSize<number>;
     /**
      * 里面的元素排布方式
      */
-    justify?: 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between';
-}
-/**
- * TODO: What is Grid Br
- */
-export declare const Br: React.ForwardRefExoticComponent<BrProps & React.RefAttributes<HTMLDivElement | null>>;
-export interface BrProps extends HiBaseHTMLProps<'div'> {
+    justify?: GridJustifyEnum | GridResponsiveSize<GridJustifyEnum>;
     /**
-     *  换行符高度
+     * Col项重排序，数值越大，越在后面展示
      */
-    height?: number;
+    order?: number | GridResponsiveSize<number>;
 }

package/lib/types/index.d.ts

@@ -3,7 +3,7 @@ import './styles/index.scss';
 declare const Grid: {
     Row: import("react").ForwardRefExoticComponent<import("./Grid").RowProps & import("react").RefAttributes<HTMLDivElement | null>>;
     Col: import("react").ForwardRefExoticComponent<import("./Grid").ColProps & import("react").RefAttributes<HTMLDivElement | null>>;
-    Br: import("react").ForwardRefExoticComponent<import("./Grid").BrProps & import("react").RefAttributes<HTMLDivElement | null>>;
 };
 export default Grid;
 export * from './Grid';
+export * from './types';

package/lib/types/types.d.ts

@@ -0,0 +1,23 @@
+export declare type GridJustifyEnum = 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between';
+export interface GridResponsiveSize<T> {
+    /**
+     * 设置屏幕 < 576px 时响应式栅格数
+     */
+    xs?: T;
+    /**
+     * 设置屏幕 >= 576px 时响应式栅格数
+     */
+    sm?: T;
+    /**
+     * 设置屏幕 >= 768px 时响应式栅格数
+     */
+    md?: T;
+    /**
+     * 设置屏幕 >= 992px 时响应式栅格数
+     */
+    lg?: T;
+    /**
+     * 设置屏幕 >= 1200px 时响应式栅格数
+     */
+    xl?: T;
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@hi-ui/grid",
-  "version": "4.0.0-beta.9",
+  "version": "4.0.2",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
-  "author": "HIUI <mi-hiui@xiaomi.com>",
+  "author": "HiUI <mi-hiui@xiaomi.com>",
   "homepage": "https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme",
   "license": "MIT",
   "directories": {
@@ -43,19 +43,21 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/classname": "^4.0.0-beta.0",
-    "@hi-ui/core": "^4.0.0-beta.5",
-    "@hi-ui/core-css": "^4.0.0-beta.3",
-    "@hi-ui/env": "^4.0.0-beta.0"
+    "@hi-ui/classname": "^4.0.1",
+    "@hi-ui/env": "^4.0.1",
+    "@hi-ui/type-assertion": "^4.0.1"
   },
   "peerDependencies": {
+    "@hi-ui/core": ">=4.0.0",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/hi-build": "^4.0.0-beta.3",
+    "@hi-ui/core": "^4.0.1",
+    "@hi-ui/core-css": "^4.0.1",
+    "@hi-ui/hi-build": "^4.0.1",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   },
-  "gitHead": "81afa0b917a45440e9afd759b24e4c9a7fa9fec0"
+  "gitHead": "cc2be2029ebdd139b4c658071db864827d138f70"
 }

package/lib/cjs/utils/type-assertion/lib/esm/index.js

@@ -1,26 +0,0 @@
-/** @LICENSE
- * @hi-ui/grid
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-'use strict';
-
-Object.defineProperty(exports, '__esModule', {
-  value: true
-});
-
-require('@babel/runtime/helpers/esm/typeof');
-/**
- * Assert is numeric
- */
-
-
-var isNumeric = function isNumeric(arg) {
-  return !Number.isNaN(Number(arg));
-};
-
-exports.isNumeric = isNumeric;

package/lib/esm/utils/type-assertion/lib/esm/index.js

@@ -1,19 +0,0 @@
-/** @LICENSE
- * @hi-ui/grid
- * https://github.com/XiaoMi/hiui/tree/master/packages/ui/grid#readme
- *
- * Copyright (c) HIUI <mi-hiui@xiaomi.com>.
- *
- * This source code is licensed under the MIT license found in the
- * LICENSE file in the root directory of this source tree.
- */
-import '@babel/runtime/helpers/esm/typeof';
-/**
- * Assert is numeric
- */
-
-var isNumeric = function isNumeric(arg) {
-  return !Number.isNaN(Number(arg));
-};
-
-export { isNumeric };