@hi-ui/grid 5.0.0-experimental.0 → 5.0.0-rc.0

package/CHANGELOG.md

@@ -1,6 +1,6 @@
 # @hi-ui/grid
 
-## 5.0.0-experimental.0
+## 5.0.0-rc.0
 
 ### Major Changes
 
@@ -13,19 +13,26 @@
 ### Patch Changes
 
 - 9b34d99bc: chore: 将代码中 v4 改为 v5 (5.0)
+- c6197357f: 新增 AutoGrid 及 DynamicGrid 组件
 - 2e56529f7: styles: 主题定制功能完善&&样式变量化写法改造&&兼容 RTL (5.0)
 - 33da3144e: build: 将 package.json 中 exports 配置中的 types 配置放在最上面 (5.0)
+- Updated dependencies [eb17c4697]
 - Updated dependencies [8c0ee78f0]
 - Updated dependencies [8f3aa85e4]
 - Updated dependencies [fd4c20bbd]
 - Updated dependencies [79ea480f3]
 - Updated dependencies [f1ab51725]
+- Updated dependencies [d91a8bb0f]
 - Updated dependencies [33da3144e]
 - Updated dependencies [58ad82e94]
-  - @hi-ui/core@5.0.0-experimental.0
-  - @hi-ui/classname@5.0.0-experimental.0
-  - @hi-ui/env@5.0.0-experimental.0
-  - @hi-ui/type-assertion@5.0.0-experimental.0
+- Updated dependencies [95d930354]
+  - @hi-ui/core@5.0.0-rc.0
+  - @hi-ui/use-latest@5.0.0-rc.0
+  - @hi-ui/use-merge-refs@5.0.0-rc.0
+  - @hi-ui/classname@5.0.0-rc.0
+  - @hi-ui/env@5.0.0-rc.0
+  - @hi-ui/func-utils@5.0.0-rc.0
+  - @hi-ui/type-assertion@5.0.0-rc.0
 
 ## 4.0.9
 

package/lib/cjs/auto-grid/AutoGrid.js

@@ -0,0 +1,88 @@
+/** @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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var Grid = require('../Grid.js');
+var useColumnCount = require('./use-column-count.js');
+var utils = require('./utils.js');
+var env = require('@hi-ui/env');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var DEFAULT_COLUMNS = 24;
+var AutoGrid = /*#__PURE__*/React.forwardRef(function (_a, ref) {
+  var _b;
+  var nodes = _a.nodes,
+    children = _a.children,
+    _a$columnCount = _a.columnCount,
+    columnCountProp = _a$columnCount === void 0 ? useColumnCount.DEFAULT_COLUMN_COUNT : _a$columnCount,
+    _a$columns = _a.columns,
+    columns = _a$columns === void 0 ? DEFAULT_COLUMNS : _a$columns,
+    _a$gutter = _a.gutter,
+    gutter = _a$gutter === void 0 ? true : _a$gutter,
+    _a$rowGap = _a.rowGap,
+    rowGap = _a$rowGap === void 0 ? 0 : _a$rowGap,
+    restRowProps = tslib.__rest(_a, ["nodes", "children", "columnCount", "columns", "gutter", "rowGap"]);
+  var rowProps = Object.assign({
+    columns: columns,
+    gutter: gutter,
+    rowGap: rowGap
+  }, restRowProps);
+  var validColumns = (_b = rowProps.columns) !== null && _b !== void 0 ? _b : DEFAULT_COLUMNS;
+  var colSpan = Math.floor(validColumns / columnCountProp);
+  // 存在 children 时，自动按照默认的配置增加网格配置
+  if (children != null) {
+    var validChildren = React__default["default"].Children.toArray(children).filter(function (child) {
+      return /*#__PURE__*/React__default["default"].isValidElement(child);
+    });
+    if (validChildren.length === 0) return null;
+    return /*#__PURE__*/React__default["default"].createElement(Grid.Row, Object.assign({
+      ref: ref
+    }, rowProps), validChildren.map(function (child, index) {
+      var _a, _b;
+      var span = (_a = utils.getGridElSpan(child)) !== null && _a !== void 0 ? _a : colSpan;
+      return /*#__PURE__*/React__default["default"].createElement(Grid.Col, {
+        key: (_b = child.key) !== null && _b !== void 0 ? _b : index,
+        span: span
+      }, child);
+    }));
+  }
+  if (!(nodes === null || nodes === void 0 ? void 0 : nodes.length)) return null;
+  return /*#__PURE__*/React__default["default"].createElement(Grid.Row, Object.assign({
+    ref: ref
+  }, rowProps), nodes.map(function (col, index) {
+    var _a;
+    var baseColProps = {
+      span: colSpan
+    };
+    var resolvedProps = typeof col.props === 'function' ? col.props({
+      columns: validColumns,
+      columnCount: columnCountProp
+    }) : col.props;
+    var colProps = Object.assign(Object.assign({}, baseColProps), resolvedProps);
+    if (utils.isInvalidGridEl(col.elem)) return null;
+    return /*#__PURE__*/React__default["default"].createElement(Grid.Col, Object.assign({
+      key: (_a = col.key) !== null && _a !== void 0 ? _a : index
+    }, colProps), col.elem);
+  }));
+});
+if (env.__DEV__) {
+  AutoGrid.displayName = 'AutoGrid';
+}
+exports.AutoGrid = AutoGrid;

package/lib/cjs/auto-grid/DynamicGrid.js

@@ -0,0 +1,59 @@
+/** @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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var tslib = require('tslib');
+var React = require('react');
+var useMergeRefs = require('@hi-ui/use-merge-refs');
+var useColumnCount = require('./use-column-count.js');
+var AutoGrid = require('./AutoGrid.js');
+var env = require('@hi-ui/env');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+var DynamicGrid = /*#__PURE__*/React.forwardRef(function DynamicGrid(props, ref) {
+  var columnCountProp = props.columnCount,
+    defaultColumnCount = props.defaultColumnCount,
+    wrapperElRefProp = props.wrapperElRef,
+    onColumnCountChange = props.onColumnCountChange,
+    breakpoints = props.breakpoints,
+    sensitive = props.sensitive,
+    autoGridProps = tslib.__rest(props, ["columnCount", "defaultColumnCount", "wrapperElRef", "onColumnCountChange", "breakpoints", "sensitive"]);
+  var wrapperRef = React.useRef(null);
+  var wrapperElRef = wrapperElRefProp !== null && wrapperElRefProp !== void 0 ? wrapperElRefProp : wrapperRef;
+  var columnCount = useColumnCount.useColumnCount({
+    columnCount: columnCountProp,
+    defaultColumnCount: defaultColumnCount,
+    wrapperElRef: columnCountProp == null ? wrapperElRef : undefined,
+    onColumnCountChange: onColumnCountChange,
+    breakpoints: breakpoints,
+    sensitive: sensitive
+  });
+  var mergedRef = useMergeRefs.useMergeRefs(wrapperElRefProp !== null && wrapperElRefProp !== void 0 ? wrapperElRefProp : wrapperRef, ref);
+  return /*#__PURE__*/React__default["default"].createElement("div", {
+    ref: mergedRef,
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React__default["default"].createElement(AutoGrid.AutoGrid, Object.assign({}, autoGridProps, {
+    columnCount: columnCount
+  })));
+});
+if (env.__DEV__) {
+  DynamicGrid.displayName = 'DynamicGrid';
+}
+exports.DynamicGrid = DynamicGrid;

package/lib/cjs/auto-grid/use-column-count.js

@@ -0,0 +1,167 @@
+/** @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
+});
+var React = require('react');
+var useLatest = require('@hi-ui/use-latest');
+var funcUtils = require('@hi-ui/func-utils');
+var types = require('../types.js');
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+var DEFAULT_COLUMN_COUNT = 3;
+/** 元素未挂载时轮询检查的最大时长（ms） */
+var MAX_EL_READY_POLL_DURATION = 3000;
+/** 轮询检查元素的间隔（ms） */
+var EL_READY_POLL_INTERVAL = 50;
+// 根据容器宽度动态计算列数（与 GridResponsiveSize 断点一致）
+var DEFAULT_BREAKPOINTS = [[types.GRID_VIEWPORT_BREAKPOINTS.sm, 1], [types.GRID_VIEWPORT_BREAKPOINTS.md, 2], [types.GRID_VIEWPORT_BREAKPOINTS.lg, 3], [types.GRID_VIEWPORT_BREAKPOINTS.xl, 4], [Infinity, 4] // xl: 宽度 >= 1200px，4 列
+];
+
+function useColumnCount(ctx) {
+  var _a, _b;
+  var ctxRef = useLatest.useLatestRef(ctx);
+  var _useState = React.useState((_b = (_a = ctx.columnCount) !== null && _a !== void 0 ? _a : ctx.defaultColumnCount) !== null && _b !== void 0 ? _b : DEFAULT_COLUMN_COUNT),
+    columnCount = _useState[0],
+    _setColumnCount = _useState[1];
+  var columnCountRef = useLatest.useLatestRef(columnCount);
+  var onColumnCountChangeRef = useLatest.useLatestRef(ctx.onColumnCountChange);
+  var setColumnCount = React.useMemo(function () {
+    return funcUtils.debounce(function (next) {
+      var prev = columnCountRef.current;
+      _setColumnCount(next);
+      // 如果外部有传入，并且实际可视列数变化了，则触发回调
+      var fn = onColumnCountChangeRef.current;
+      if (fn && prev !== next) fn(next);
+    }, 32);
+  }, [columnCountRef, onColumnCountChangeRef]);
+  var isFirstCalcRef = React.useRef(true);
+  var breakpointsRef = useLatest.useLatestRef(ctx.breakpoints);
+  var pollTimerRef = React.useRef(null);
+  var observerRef = React.useRef(null);
+  React.useEffect(function () {
+    var _a;
+    // 外部有传入，直接使用
+    if (ctx.columnCount != null) {
+      setColumnCount(ctx.columnCount);
+      return;
+    }
+    var setupObserver = function setupObserver(targetEl) {
+      // 监听元素宽度变化
+      var observer = new ResizeObserver(function (entries) {
+        var _a, _b, _c;
+        if (((_a = ctxRef.current) === null || _a === void 0 ? void 0 : _a.sensitive) && isFirstCalcRef.current) {
+          isFirstCalcRef.current = false;
+          setColumnCount((_b = columnCountRef.current) !== null && _b !== void 0 ? _b : DEFAULT_COLUMN_COUNT);
+          return;
+        }
+        var entry = entries[0];
+        var width = entry.contentRect.width;
+        var breakpoints = (_c = breakpointsRef.current) !== null && _c !== void 0 ? _c : DEFAULT_BREAKPOINTS;
+        setColumnCount(calcColumnCount(width, breakpoints));
+      });
+      observer.observe(targetEl);
+      observerRef.current = observer;
+    };
+    var cleanup = function cleanup() {
+      if (pollTimerRef.current) {
+        clearInterval(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      setColumnCount.cancel();
+    };
+    var el = (_a = ctx.wrapperElRef) === null || _a === void 0 ? void 0 : _a.current;
+    // 元素已挂载时，直接启动监听
+    if (el) {
+      setupObserver(el);
+      return cleanup;
+    }
+    // 元素未挂载时，启动定时器轮询检查，超时后使用默认值
+    // 元素未挂载时，启动定时器轮询检查
+    var startTime = Date.now();
+    pollTimerRef.current = setInterval(function () {
+      var _a, _b, _c, _d;
+      // 1. 检查元素是否已挂载
+      var currentEl = (_b = (_a = ctxRef.current) === null || _a === void 0 ? void 0 : _a.wrapperElRef) === null || _b === void 0 ? void 0 : _b.current;
+      if (currentEl) {
+        // 2. 已挂载：清除定时器，设置 ResizeObserver
+        if (pollTimerRef.current) {
+          clearInterval(pollTimerRef.current);
+          pollTimerRef.current = null;
+        }
+        setupObserver(currentEl);
+        return;
+      }
+      // 3. 未挂载且超时：清除定时器，使用默认列数
+      if (Date.now() - startTime >= MAX_EL_READY_POLL_DURATION) {
+        if (pollTimerRef.current) {
+          clearInterval(pollTimerRef.current);
+          pollTimerRef.current = null;
+        }
+        setColumnCount((_d = (_c = ctxRef.current) === null || _c === void 0 ? void 0 : _c.defaultColumnCount) !== null && _d !== void 0 ? _d : DEFAULT_COLUMN_COUNT);
+      }
+    }, EL_READY_POLL_INTERVAL);
+    return cleanup;
+  }, [ctx.columnCount, ctx.wrapperElRef, ctxRef, setColumnCount, breakpointsRef, columnCountRef]);
+  return columnCount;
+}
+function calcColumnCount(width, breakpoints) {
+  var column = 1; // 默认为1列
+  for (var _iterator = _createForOfIteratorHelperLoose(breakpoints), _step; !(_step = _iterator()).done;) {
+    var _step$value = _step.value,
+      breakpoint = _step$value[0],
+      cols = _step$value[1];
+    if (width <= breakpoint) {
+      column = cols;
+      break;
+    }
+  }
+  return column;
+}
+exports.DEFAULT_COLUMN_COUNT = DEFAULT_COLUMN_COUNT;
+exports.calcColumnCount = calcColumnCount;
+exports.useColumnCount = useColumnCount;

package/lib/cjs/auto-grid/utils.js

@@ -0,0 +1,48 @@
+/** @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';
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, '__esModule', {
+  value: true
+});
+var React = require('react');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var React__default = /*#__PURE__*/_interopDefaultCompat(React);
+function isInvalidGridEl(el) {
+  var _a;
+  // null 直接返回
+  if (el === null) return true;
+  var isValidElement = /*#__PURE__*/React__default["default"].isValidElement(el);
+  // 无效元素直接返回
+  if (!isValidElement) return true;
+  // 如果是一个元素，并且被配置为隐藏，则认为是一个无效的元素
+  var element = el;
+  var isHiddenEl = (_a = element === null || element === void 0 ? void 0 : element.props) === null || _a === void 0 ? void 0 : _a['data-grid-hidden'];
+  if (isHiddenEl) return true;
+  return false;
+}
+function getGridElSpan(el) {
+  var _a, _b;
+  try {
+    var props = (_a = el) === null || _a === void 0 ? void 0 : _a.props;
+    var span = (_b = props === null || props === void 0 ? void 0 : props.span) !== null && _b !== void 0 ? _b : props === null || props === void 0 ? void 0 : props['data-span'];
+    if (typeof span === 'number' && !isNaN(span) && span >= 0) return span;
+    return null;
+  } catch (_c) {
+    return null;
+  }
+}
+exports.getGridElSpan = getGridElSpan;
+exports.isInvalidGridEl = isInvalidGridEl;

package/lib/cjs/index.js

@@ -14,10 +14,16 @@ Object.defineProperty(exports, '__esModule', {
 });
 require('./styles/index.scss.js');
 var Grid$1 = require('./Grid.js');
+var types = require('./types.js');
+var AutoGrid = require('./auto-grid/AutoGrid.js');
+var DynamicGrid = require('./auto-grid/DynamicGrid.js');
 var Grid = {
   Row: Grid$1.Row,
   Col: Grid$1.Col
 };
 exports.Col = Grid$1.Col;
 exports.Row = Grid$1.Row;
+exports.GRID_VIEWPORT_BREAKPOINTS = types.GRID_VIEWPORT_BREAKPOINTS;
+exports.AutoGrid = AutoGrid.AutoGrid;
+exports.DynamicGrid = DynamicGrid.DynamicGrid;
 exports["default"] = Grid;

package/lib/cjs/types.js

@@ -0,0 +1,31 @@
+/** @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
+});
+
+/**
+ * 栅格响应式断点
+ * - xs: 0px ~ 575px
+ * - sm: 576px ~ 767px
+ * - md: 768px ~ 991px
+ * - lg: 992px ~ 1199px
+ * - xl: 1200px ~ Infinity
+ */
+var GRID_VIEWPORT_BREAKPOINTS = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200
+};
+exports.GRID_VIEWPORT_BREAKPOINTS = GRID_VIEWPORT_BREAKPOINTS;

package/lib/esm/auto-grid/AutoGrid.js

@@ -0,0 +1,76 @@
+/** @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 { __rest } from 'tslib';
+import React, { forwardRef } from 'react';
+import { Row, Col } from '../Grid.js';
+import { DEFAULT_COLUMN_COUNT } from './use-column-count.js';
+import { getGridElSpan, isInvalidGridEl } from './utils.js';
+import { __DEV__ } from '@hi-ui/env';
+var DEFAULT_COLUMNS = 24;
+var AutoGrid = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _b;
+  var nodes = _a.nodes,
+    children = _a.children,
+    _a$columnCount = _a.columnCount,
+    columnCountProp = _a$columnCount === void 0 ? DEFAULT_COLUMN_COUNT : _a$columnCount,
+    _a$columns = _a.columns,
+    columns = _a$columns === void 0 ? DEFAULT_COLUMNS : _a$columns,
+    _a$gutter = _a.gutter,
+    gutter = _a$gutter === void 0 ? true : _a$gutter,
+    _a$rowGap = _a.rowGap,
+    rowGap = _a$rowGap === void 0 ? 0 : _a$rowGap,
+    restRowProps = __rest(_a, ["nodes", "children", "columnCount", "columns", "gutter", "rowGap"]);
+  var rowProps = Object.assign({
+    columns: columns,
+    gutter: gutter,
+    rowGap: rowGap
+  }, restRowProps);
+  var validColumns = (_b = rowProps.columns) !== null && _b !== void 0 ? _b : DEFAULT_COLUMNS;
+  var colSpan = Math.floor(validColumns / columnCountProp);
+  // 存在 children 时，自动按照默认的配置增加网格配置
+  if (children != null) {
+    var validChildren = React.Children.toArray(children).filter(function (child) {
+      return /*#__PURE__*/React.isValidElement(child);
+    });
+    if (validChildren.length === 0) return null;
+    return /*#__PURE__*/React.createElement(Row, Object.assign({
+      ref: ref
+    }, rowProps), validChildren.map(function (child, index) {
+      var _a, _b;
+      var span = (_a = getGridElSpan(child)) !== null && _a !== void 0 ? _a : colSpan;
+      return /*#__PURE__*/React.createElement(Col, {
+        key: (_b = child.key) !== null && _b !== void 0 ? _b : index,
+        span: span
+      }, child);
+    }));
+  }
+  if (!(nodes === null || nodes === void 0 ? void 0 : nodes.length)) return null;
+  return /*#__PURE__*/React.createElement(Row, Object.assign({
+    ref: ref
+  }, rowProps), nodes.map(function (col, index) {
+    var _a;
+    var baseColProps = {
+      span: colSpan
+    };
+    var resolvedProps = typeof col.props === 'function' ? col.props({
+      columns: validColumns,
+      columnCount: columnCountProp
+    }) : col.props;
+    var colProps = Object.assign(Object.assign({}, baseColProps), resolvedProps);
+    if (isInvalidGridEl(col.elem)) return null;
+    return /*#__PURE__*/React.createElement(Col, Object.assign({
+      key: (_a = col.key) !== null && _a !== void 0 ? _a : index
+    }, colProps), col.elem);
+  }));
+});
+if (__DEV__) {
+  AutoGrid.displayName = 'AutoGrid';
+}
+export { AutoGrid };

package/lib/esm/auto-grid/DynamicGrid.js

@@ -0,0 +1,47 @@
+/** @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 { __rest } from 'tslib';
+import React, { forwardRef, useRef } from 'react';
+import { useMergeRefs } from '@hi-ui/use-merge-refs';
+import { useColumnCount } from './use-column-count.js';
+import { AutoGrid } from './AutoGrid.js';
+import { __DEV__ } from '@hi-ui/env';
+var DynamicGrid = /*#__PURE__*/forwardRef(function DynamicGrid(props, ref) {
+  var columnCountProp = props.columnCount,
+    defaultColumnCount = props.defaultColumnCount,
+    wrapperElRefProp = props.wrapperElRef,
+    onColumnCountChange = props.onColumnCountChange,
+    breakpoints = props.breakpoints,
+    sensitive = props.sensitive,
+    autoGridProps = __rest(props, ["columnCount", "defaultColumnCount", "wrapperElRef", "onColumnCountChange", "breakpoints", "sensitive"]);
+  var wrapperRef = useRef(null);
+  var wrapperElRef = wrapperElRefProp !== null && wrapperElRefProp !== void 0 ? wrapperElRefProp : wrapperRef;
+  var columnCount = useColumnCount({
+    columnCount: columnCountProp,
+    defaultColumnCount: defaultColumnCount,
+    wrapperElRef: columnCountProp == null ? wrapperElRef : undefined,
+    onColumnCountChange: onColumnCountChange,
+    breakpoints: breakpoints,
+    sensitive: sensitive
+  });
+  var mergedRef = useMergeRefs(wrapperElRefProp !== null && wrapperElRefProp !== void 0 ? wrapperElRefProp : wrapperRef, ref);
+  return /*#__PURE__*/React.createElement("div", {
+    ref: mergedRef,
+    style: {
+      width: '100%'
+    }
+  }, /*#__PURE__*/React.createElement(AutoGrid, Object.assign({}, autoGridProps, {
+    columnCount: columnCount
+  })));
+});
+if (__DEV__) {
+  DynamicGrid.displayName = 'DynamicGrid';
+}
+export { DynamicGrid };

package/lib/esm/auto-grid/use-column-count.js

@@ -0,0 +1,160 @@
+/** @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 { useState, useMemo, useRef, useEffect } from 'react';
+import { useLatestRef } from '@hi-ui/use-latest';
+import { debounce } from '@hi-ui/func-utils';
+import { GRID_VIEWPORT_BREAKPOINTS } from '../types.js';
+function _createForOfIteratorHelperLoose(o, allowArrayLike) {
+  var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
+  if (it) return (it = it.call(o)).next.bind(it);
+  if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") {
+    if (it) o = it;
+    var i = 0;
+    return function () {
+      if (i >= o.length) return {
+        done: true
+      };
+      return {
+        done: false,
+        value: o[i++]
+      };
+    };
+  }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(o, minLen) {
+  if (!o) return;
+  if (typeof o === "string") return _arrayLikeToArray(o, minLen);
+  var n = Object.prototype.toString.call(o).slice(8, -1);
+  if (n === "Object" && o.constructor) n = o.constructor.name;
+  if (n === "Map" || n === "Set") return Array.from(o);
+  if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen);
+}
+function _arrayLikeToArray(arr, len) {
+  if (len == null || len > arr.length) len = arr.length;
+  for (var i = 0, arr2 = new Array(len); i < len; i++) {
+    arr2[i] = arr[i];
+  }
+  return arr2;
+}
+var DEFAULT_COLUMN_COUNT = 3;
+/** 元素未挂载时轮询检查的最大时长（ms） */
+var MAX_EL_READY_POLL_DURATION = 3000;
+/** 轮询检查元素的间隔（ms） */
+var EL_READY_POLL_INTERVAL = 50;
+// 根据容器宽度动态计算列数（与 GridResponsiveSize 断点一致）
+var DEFAULT_BREAKPOINTS = [[GRID_VIEWPORT_BREAKPOINTS.sm, 1], [GRID_VIEWPORT_BREAKPOINTS.md, 2], [GRID_VIEWPORT_BREAKPOINTS.lg, 3], [GRID_VIEWPORT_BREAKPOINTS.xl, 4], [Infinity, 4] // xl: 宽度 >= 1200px，4 列
+];
+
+function useColumnCount(ctx) {
+  var _a, _b;
+  var ctxRef = useLatestRef(ctx);
+  var _useState = useState((_b = (_a = ctx.columnCount) !== null && _a !== void 0 ? _a : ctx.defaultColumnCount) !== null && _b !== void 0 ? _b : DEFAULT_COLUMN_COUNT),
+    columnCount = _useState[0],
+    _setColumnCount = _useState[1];
+  var columnCountRef = useLatestRef(columnCount);
+  var onColumnCountChangeRef = useLatestRef(ctx.onColumnCountChange);
+  var setColumnCount = useMemo(function () {
+    return debounce(function (next) {
+      var prev = columnCountRef.current;
+      _setColumnCount(next);
+      // 如果外部有传入，并且实际可视列数变化了，则触发回调
+      var fn = onColumnCountChangeRef.current;
+      if (fn && prev !== next) fn(next);
+    }, 32);
+  }, [columnCountRef, onColumnCountChangeRef]);
+  var isFirstCalcRef = useRef(true);
+  var breakpointsRef = useLatestRef(ctx.breakpoints);
+  var pollTimerRef = useRef(null);
+  var observerRef = useRef(null);
+  useEffect(function () {
+    var _a;
+    // 外部有传入，直接使用
+    if (ctx.columnCount != null) {
+      setColumnCount(ctx.columnCount);
+      return;
+    }
+    var setupObserver = function setupObserver(targetEl) {
+      // 监听元素宽度变化
+      var observer = new ResizeObserver(function (entries) {
+        var _a, _b, _c;
+        if (((_a = ctxRef.current) === null || _a === void 0 ? void 0 : _a.sensitive) && isFirstCalcRef.current) {
+          isFirstCalcRef.current = false;
+          setColumnCount((_b = columnCountRef.current) !== null && _b !== void 0 ? _b : DEFAULT_COLUMN_COUNT);
+          return;
+        }
+        var entry = entries[0];
+        var width = entry.contentRect.width;
+        var breakpoints = (_c = breakpointsRef.current) !== null && _c !== void 0 ? _c : DEFAULT_BREAKPOINTS;
+        setColumnCount(calcColumnCount(width, breakpoints));
+      });
+      observer.observe(targetEl);
+      observerRef.current = observer;
+    };
+    var cleanup = function cleanup() {
+      if (pollTimerRef.current) {
+        clearInterval(pollTimerRef.current);
+        pollTimerRef.current = null;
+      }
+      if (observerRef.current) {
+        observerRef.current.disconnect();
+        observerRef.current = null;
+      }
+      setColumnCount.cancel();
+    };
+    var el = (_a = ctx.wrapperElRef) === null || _a === void 0 ? void 0 : _a.current;
+    // 元素已挂载时，直接启动监听
+    if (el) {
+      setupObserver(el);
+      return cleanup;
+    }
+    // 元素未挂载时，启动定时器轮询检查，超时后使用默认值
+    // 元素未挂载时，启动定时器轮询检查
+    var startTime = Date.now();
+    pollTimerRef.current = setInterval(function () {
+      var _a, _b, _c, _d;
+      // 1. 检查元素是否已挂载
+      var currentEl = (_b = (_a = ctxRef.current) === null || _a === void 0 ? void 0 : _a.wrapperElRef) === null || _b === void 0 ? void 0 : _b.current;
+      if (currentEl) {
+        // 2. 已挂载：清除定时器，设置 ResizeObserver
+        if (pollTimerRef.current) {
+          clearInterval(pollTimerRef.current);
+          pollTimerRef.current = null;
+        }
+        setupObserver(currentEl);
+        return;
+      }
+      // 3. 未挂载且超时：清除定时器，使用默认列数
+      if (Date.now() - startTime >= MAX_EL_READY_POLL_DURATION) {
+        if (pollTimerRef.current) {
+          clearInterval(pollTimerRef.current);
+          pollTimerRef.current = null;
+        }
+        setColumnCount((_d = (_c = ctxRef.current) === null || _c === void 0 ? void 0 : _c.defaultColumnCount) !== null && _d !== void 0 ? _d : DEFAULT_COLUMN_COUNT);
+      }
+    }, EL_READY_POLL_INTERVAL);
+    return cleanup;
+  }, [ctx.columnCount, ctx.wrapperElRef, ctxRef, setColumnCount, breakpointsRef, columnCountRef]);
+  return columnCount;
+}
+function calcColumnCount(width, breakpoints) {
+  var column = 1; // 默认为1列
+  for (var _iterator = _createForOfIteratorHelperLoose(breakpoints), _step; !(_step = _iterator()).done;) {
+    var _step$value = _step.value,
+      breakpoint = _step$value[0],
+      cols = _step$value[1];
+    if (width <= breakpoint) {
+      column = cols;
+      break;
+    }
+  }
+  return column;
+}
+export { DEFAULT_COLUMN_COUNT, calcColumnCount, useColumnCount };

package/lib/esm/auto-grid/utils.js

@@ -0,0 +1,35 @@
+/** @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 React from 'react';
+function isInvalidGridEl(el) {
+  var _a;
+  // null 直接返回
+  if (el === null) return true;
+  var isValidElement = /*#__PURE__*/React.isValidElement(el);
+  // 无效元素直接返回
+  if (!isValidElement) return true;
+  // 如果是一个元素，并且被配置为隐藏，则认为是一个无效的元素
+  var element = el;
+  var isHiddenEl = (_a = element === null || element === void 0 ? void 0 : element.props) === null || _a === void 0 ? void 0 : _a['data-grid-hidden'];
+  if (isHiddenEl) return true;
+  return false;
+}
+function getGridElSpan(el) {
+  var _a, _b;
+  try {
+    var props = (_a = el) === null || _a === void 0 ? void 0 : _a.props;
+    var span = (_b = props === null || props === void 0 ? void 0 : props.span) !== null && _b !== void 0 ? _b : props === null || props === void 0 ? void 0 : props['data-span'];
+    if (typeof span === 'number' && !isNaN(span) && span >= 0) return span;
+    return null;
+  } catch (_c) {
+    return null;
+  }
+}
+export { getGridElSpan, isInvalidGridEl };

package/lib/esm/index.js

@@ -9,6 +9,9 @@
  */
 import './styles/index.scss.js';
 import { Row, Col } from './Grid.js';
+export { GRID_VIEWPORT_BREAKPOINTS } from './types.js';
+export { AutoGrid } from './auto-grid/AutoGrid.js';
+export { DynamicGrid } from './auto-grid/DynamicGrid.js';
 var Grid = {
   Row: Row,
   Col: Col

package/lib/esm/types.js

@@ -0,0 +1,25 @@
+/** @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.
+ */
+/**
+ * 栅格响应式断点
+ * - xs: 0px ~ 575px
+ * - sm: 576px ~ 767px
+ * - md: 768px ~ 991px
+ * - lg: 992px ~ 1199px
+ * - xl: 1200px ~ Infinity
+ */
+var GRID_VIEWPORT_BREAKPOINTS = {
+  xs: 0,
+  sm: 576,
+  md: 768,
+  lg: 992,
+  xl: 1200
+};
+export { GRID_VIEWPORT_BREAKPOINTS };

package/lib/types/auto-grid/AutoGrid.d.ts

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { RowProps, ColProps } from '../Grid';
+export interface AutoGridNodeType {
+    key: React.Key;
+    elem: React.ReactElement | null;
+    props?: ColProps | ((ctx: {
+        columns: number;
+        columnCount: number;
+    }) => ColProps);
+}
+export declare type AutoGridProps = RowProps & {
+    /** 列元素清单 */
+    nodes?: AutoGridNodeType[];
+    /**
+     * 子元素清单
+     * - 存在子元素时，会自动按照默认的配置增加网格包裹
+     * - 如需控制子元素占据的网格数，请在元素上增加 span 或者 data-span 属性
+     */
+    children?: React.ReactNode[];
+    /** 列数 */
+    columnCount?: number;
+};
+export declare const AutoGrid: React.ForwardRefExoticComponent<RowProps & {
+    /** 列元素清单 */
+    nodes?: AutoGridNodeType[] | undefined;
+    /**
+     * 子元素清单
+     * - 存在子元素时，会自动按照默认的配置增加网格包裹
+     * - 如需控制子元素占据的网格数，请在元素上增加 span 或者 data-span 属性
+     */
+    children?: React.ReactNode[] | undefined;
+    /** 列数 */
+    columnCount?: number | undefined;
+} & React.RefAttributes<HTMLDivElement | null>>;

package/lib/types/auto-grid/DynamicGrid.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import type { UseColumnCountCtxType } from './use-column-count';
+import type { AutoGridProps } from './AutoGrid';
+export declare type DynamicGridProps = AutoGridProps & UseColumnCountCtxType;
+export declare const DynamicGrid: React.ForwardRefExoticComponent<import("..").RowProps & {
+    nodes?: import("./AutoGrid").AutoGridNodeType[] | undefined;
+    children?: React.ReactNode[] | undefined;
+    columnCount?: number | undefined;
+} & UseColumnCountCtxType & React.RefAttributes<HTMLDivElement | null>>;

package/lib/types/auto-grid/index.d.ts

@@ -0,0 +1,4 @@
+export { AutoGrid } from './AutoGrid';
+export type { AutoGridProps, AutoGridNodeType } from './AutoGrid';
+export { DynamicGrid } from './DynamicGrid';
+export type { DynamicGridProps } from './DynamicGrid';

package/lib/types/auto-grid/use-column-count.d.ts

@@ -0,0 +1,39 @@
+import React from 'react';
+export declare type BreakpointType = [width: number, column: number];
+export declare type UseColumnCountCtxType = {
+    /**
+     * 列数，表示一行包含元素的数量
+     * @default 3
+     * @desc 传入此值时，列数固定，不因容器宽度变化而变化
+     * @desc 不传时，但额外传入 wrapperElRef 时，列数会根据容器宽度变化而变化
+     */
+    columnCount?: number;
+    /**
+     * 默认列数
+     * @desc 与 columnCount 的区别是，仅会在初始化时使用
+     * @desc 传入后，列数仍会根据容器宽度变化而变化
+     */
+    defaultColumnCount?: number;
+    /**
+     * 组件的外部包裹元素
+     * @desc 传入此值，同时不传 columnCount 时，列数会根据容器宽度变化而变化
+     */
+    wrapperElRef?: React.RefObject<HTMLElement>;
+    /**
+     * 实际可视列数变化回调
+     */
+    onColumnCountChange?: (columnCount: number) => void;
+    /**
+     * 列数变化断点
+     * @desc 默认使用 GRID_VIEWPORT_BREAKPOINTS: [576, 1], [768, 2], [992, 3], [1200, 4], [Infinity, 4]
+     */
+    breakpoints?: BreakpointType[];
+    /**
+     * 是否对初始布局变化敏感
+     * @desc 当设置为 true 时，会等待布局稳定后再渲染内容，避免视觉跳动
+     */
+    sensitive?: boolean;
+};
+export declare const DEFAULT_COLUMN_COUNT = 3;
+export declare function useColumnCount(ctx: UseColumnCountCtxType): number;
+export declare function calcColumnCount(width: number, breakpoints: BreakpointType[]): number;

package/lib/types/auto-grid/utils.d.ts

@@ -0,0 +1,2 @@
+export declare function isInvalidGridEl(el: unknown): boolean;
+export declare function getGridElSpan(el: unknown): number | null;

package/lib/types/context.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 interface GridContext {
     columns?: number;
 }

package/lib/types/index.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import './styles/index.scss';
 declare const Grid: {
     Row: import("react").ForwardRefExoticComponent<import("./Grid").RowProps & import("react").RefAttributes<HTMLDivElement | null>>;
@@ -6,3 +7,4 @@ declare const Grid: {
 export default Grid;
 export * from './Grid';
 export * from './types';
+export * from './auto-grid';

package/lib/types/types.d.ts

@@ -1,5 +1,20 @@
-export type GridJustifyEnum = 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between';
-export type GridAlignEnum = 'flex-start' | 'flex-end' | 'center' | 'stretch';
+/**
+ * 栅格响应式断点
+ * - xs: 0px ~ 575px
+ * - sm: 576px ~ 767px
+ * - md: 768px ~ 991px
+ * - lg: 992px ~ 1199px
+ * - xl: 1200px ~ Infinity
+ */
+export declare const GRID_VIEWPORT_BREAKPOINTS: {
+    readonly xs: 0;
+    readonly sm: 576;
+    readonly md: 768;
+    readonly lg: 992;
+    readonly xl: 1200;
+};
+export declare type GridJustifyEnum = 'flex-start' | 'flex-end' | 'center' | 'space-around' | 'space-between';
+export declare type GridAlignEnum = 'flex-start' | 'flex-end' | 'center' | 'stretch';
 export interface GridResponsiveSize<T> {
     /**
      * 设置屏幕 < 576px 时响应式栅格数

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hi-ui/grid",
-  "version": "5.0.0-experimental.0",
+  "version": "5.0.0-rc.0",
   "description": "A sub-package for @hi-ui/hiui.",
   "keywords": [],
   "author": "HiUI <mi-hiui@xiaomi.com>",
@@ -44,18 +44,21 @@
     "url": "https://github.com/XiaoMi/hiui/issues"
   },
   "dependencies": {
-    "@hi-ui/classname": "^5.0.0-experimental.0",
-    "@hi-ui/env": "^5.0.0-experimental.0",
-    "@hi-ui/type-assertion": "^5.0.0-experimental.0"
+    "@hi-ui/classname": "^5.0.0-rc.0",
+    "@hi-ui/env": "^5.0.0-rc.0",
+    "@hi-ui/func-utils": "^5.0.0-rc.0",
+    "@hi-ui/type-assertion": "^5.0.0-rc.0",
+    "@hi-ui/use-latest": "^5.0.0-rc.0",
+    "@hi-ui/use-merge-refs": "^5.0.0-rc.0"
   },
   "peerDependencies": {
-    "@hi-ui/core": ">=5.0.0-experimental.0",
+    "@hi-ui/core": ">=5.0.0-rc.0",
     "react": ">=16.8.6",
     "react-dom": ">=16.8.6"
   },
   "devDependencies": {
-    "@hi-ui/core": "^5.0.0-experimental.0",
-    "@hi-ui/core-css": "^5.0.0-experimental.0",
+    "@hi-ui/core": "^5.0.0-rc.0",
+    "@hi-ui/core-css": "^5.0.0-rc.0",
     "react": "^17.0.1",
     "react-dom": "^17.0.1"
   }