@hi-ui/table 4.5.6-alpha.0 → 4.6.0

package/lib/cjs/packages/ui/radio/lib/esm/index.js

@@ -0,0 +1,33 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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('./styles/index.scss.js');
+var Radio$1 = require('./Radio.js');
+var RadioGroup = require('./RadioGroup.js');
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var Radio = Object.assign(Radio$1.Radio, {
+  Group: RadioGroup.RadioGroup
+});
+exports.Radio = Radio$1.Radio;
+exports.RadioGroup = RadioGroup.RadioGroup;
+exports["default"] = Radio;

package/lib/cjs/packages/ui/radio/lib/esm/styles/index.scss.js

@@ -0,0 +1,35 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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 __styleInject__ = require('@hi-ui/style-inject');
+function _interopDefaultCompat(e) {
+  return e && _typeof(e) === 'object' && 'default' in e ? e : {
+    'default': e
+  };
+}
+var __styleInject____default = /*#__PURE__*/_interopDefaultCompat(__styleInject__);
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var css_248z = ".hi-v4-radio {overflow-wrap: break-word;font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;vertical-align: middle;}.hi-v4-radio--type-button {height: 32px;padding: 0 12px;color: var(--hi-v4-color-gray-600, #5f6a7a);background: var(--hi-v4-color-gray-100, #f2f4f7);cursor: pointer;-webkit-transition: all var(--hi-v4-motion-duration-normal, 200ms);transition: all var(--hi-v4-motion-duration-normal, 200ms);}.hi-v4-radio--type-button .hi-v4-radio__input {display: none;}.hi-v4-radio--type-button .hi-v4-radio__input:focus + .hi-v4-radio__label {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-radio--type-button .hi-v4-radio__controller {display: none;}.hi-v4-radio--type-button:hover, .hi-v4-radio--type-button[data-checked] {background: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-radio--type-button[data-disabled] {cursor: not-allowed;background: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-radio--type-button[data-checked].hi-v4-radio--type-button[data-disabled] {background: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-300, var(--hi-v4-color-brandblue-300, #70b8ff));}.hi-v4-radio--type-default .hi-v4-radio__input:focus + .hi-v4-radio__controller {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));}.hi-v4-radio--type-default .hi-v4-radio__controller {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;width: 16px;height: 16px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-radius: var(--hi-v4-border-radius-full, 9999px);-webkit-transition: all var(--hi-v4-motion-duration-normal, 200ms);transition: all var(--hi-v4-motion-duration-normal, 200ms);-webkit-box-flex: 0;-ms-flex: none;flex: none;}.hi-v4-radio--type-default .hi-v4-radio__controller::after {position: absolute;top: 0;left: 0;-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: 14px;height: 14px;content: \"\";background: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: var(--hi-v4-border-radius-full, 9999px);opacity: 0;-webkit-transition: all var(--hi-v4-motion-duration-normal, 200ms);transition: all var(--hi-v4-motion-duration-normal, 200ms);-webkit-transform: scale(0);transform: scale(0);}.hi-v4-radio--type-default .hi-v4-radio__label {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-margin-start: var(--hi-v4-spacing-4, 8px);margin-inline-start: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-radio--type-default:hover .hi-v4-radio__controller {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-radio--type-default[data-checked] .hi-v4-radio__controller {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-radio--type-default[data-checked] .hi-v4-radio__controller::after {opacity: 1;-webkit-transform: scale(0.3);transform: scale(0.3);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-radio--type-default[data-checked].hi-v4-radio--type-default[data-disabled] .hi-v4-radio__controller {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));opacity: 0.4;}.hi-v4-radio--type-default[data-checked].hi-v4-radio--type-default[data-disabled] .hi-v4-radio__controller::after {opacity: 1;-webkit-transform: scale(0.3);transform: scale(0.3);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-radio--type-default[data-disabled] {cursor: not-allowed;}.hi-v4-radio--type-default[data-disabled] .hi-v4-radio__controller {border-color: var(--hi-v4-color-gray-300, #dfe2e8);background: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-radio--type-default[data-disabled] .hi-v4-radio__controller::after {background: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-radio--type-default[data-disabled] .hi-v4-radio__label {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-radio-group {position: relative;}.hi-v4-radio-group--data-wrap {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;z-index: var(--hi-v4-zindex-normal, 0);}.hi-v4-radio-group--type-button {border-radius: var(--hi-v4-border-radius-md, 4px);overflow: hidden;}.hi-v4-radio-group--type-default.hi-v4-radio-group--data-wrap {gap: var(--hi-v4-spacing-8, 16px);}.hi-v4-radio-group--placement-horizontal.hi-v4-radio-group--data-wrap {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-radio-group--placement-horizontal.hi-v4-radio-group--auto-width {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-radio-group--placement-horizontal.hi-v4-radio-group--auto-width .hi-v4-radio--type-button {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-radio-group--placement-horizontal .hi-v4-radio--type-button::after {content: \"\";background: var(--hi-v4-color-gray-300, #dfe2e8);width: 1px;left: 100%;top: 8px;bottom: 8px;position: absolute;z-index: var(--hi-v4-zindex-absolute, 1);}.hi-v4-radio-group--placement-vertical {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-radio-group--placement-vertical .hi-v4-radio--type-button::after {content: \"\";background: var(--hi-v4-color-gray-300, #dfe2e8);height: 1px;left: 8px;right: 8px;top: 100%;position: absolute;z-index: var(--hi-v4-zindex-absolute, 1);}";
+__styleInject____default["default"](css_248z);
+exports["default"] = css_248z;

package/lib/cjs/packages/ui/radio/lib/esm/types.js

@@ -0,0 +1,34 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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
+});
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var RadioGroupPlacementEnum = {
+  VERTICAL: 'vertical',
+  HORIZONTAL: 'horizontal'
+};
+var RadioGroupTypeEnum = {
+  DEFAULT: 'default',
+  BUTTON: 'button'
+};
+exports.RadioGroupPlacementEnum = RadioGroupPlacementEnum;
+exports.RadioGroupTypeEnum = RadioGroupTypeEnum;

package/lib/cjs/packages/ui/radio/lib/esm/use-radio-group.js

@@ -0,0 +1,61 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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 tslib = require('tslib');
+var React = require('react');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var useRadioGroup = function useRadioGroup(_a) {
+  var name = _a.name,
+    valueProp = _a.value,
+    onChange = _a.onChange,
+    _a$defaultValue = _a.defaultValue,
+    defaultValue = _a$defaultValue === void 0 ? '' : _a$defaultValue,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    rest = tslib.__rest(_a, ["name", "value", "onChange", "defaultValue", "disabled"]);
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultValue, valueProp, onChange),
+    value = _useUncontrolledState[0],
+    tryChangeValue = _useUncontrolledState[1];
+  var handleChange = React.useCallback(function (value) {
+    if (disabled) {
+      return;
+    }
+    tryChangeValue(value);
+  }, [disabled, tryChangeValue]);
+  var isChecked = React.useCallback(function (valueArg) {
+    return valueArg === value;
+  }, [value]);
+  var rootProps = Object.assign(Object.assign({}, rest), {
+    role: 'radiogroup'
+  });
+  return {
+    rootProps: rootProps,
+    value: value,
+    onChange: handleChange,
+    name: name,
+    isChecked: isChecked,
+    disabled: disabled
+  };
+};
+exports.useRadioGroup = useRadioGroup;

package/lib/cjs/packages/ui/radio/lib/esm/use-radio.js

@@ -0,0 +1,88 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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 tslib = require('tslib');
+var React = require('react');
+var useUncontrolledState = require('@hi-ui/use-uncontrolled-state');
+var domUtils = require('@hi-ui/dom-utils');
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var useRadio = function useRadio(_a) {
+  var nameProp = _a.name,
+    valueProp = _a.value,
+    _a$autoFocus = _a.autoFocus,
+    autoFocus = _a$autoFocus === void 0 ? false : _a$autoFocus,
+    _a$defaultChecked = _a.defaultChecked,
+    defaultChecked = _a$defaultChecked === void 0 ? false : _a$defaultChecked,
+    onChange = _a.onChange,
+    checkedProp = _a.checked,
+    _a$readOnly = _a.readOnly,
+    readOnly = _a$readOnly === void 0 ? false : _a$readOnly,
+    _a$disabled = _a.disabled,
+    disabled = _a$disabled === void 0 ? false : _a$disabled,
+    rest = tslib.__rest(_a, ["name", "value", "autoFocus", "defaultChecked", "onChange", "checked", "readOnly", "disabled"]);
+  var _useUncontrolledState = useUncontrolledState.useUncontrolledState(defaultChecked, checkedProp, function (_, evt) {
+      onChange === null || onChange === void 0 ? void 0 : onChange(evt);
+    }),
+    checked = _useUncontrolledState[0],
+    tryChangeChecked = _useUncontrolledState[1];
+  var nonInteractive = disabled || readOnly;
+  var handleChange = React.useCallback(function (evt) {
+    if (nonInteractive) {
+      // 不可交互，不触发事件的任何默认行为
+      evt.preventDefault();
+      return;
+    }
+    tryChangeChecked(evt.target.checked, evt);
+  }, [nonInteractive, tryChangeChecked]);
+  var getInputProps = React.useCallback(function () {
+    return {
+      style: domUtils.hiddenStyle,
+      type: 'radio',
+      checked: checked,
+      disabled: disabled,
+      readOnly: readOnly,
+      onChange: handleChange,
+      autoFocus: autoFocus,
+      name: nameProp,
+      value: valueProp
+    };
+  }, [nameProp, handleChange, checked, disabled, readOnly, autoFocus, valueProp]);
+  var state = React.useMemo(function () {
+    return {
+      disabled: disabled,
+      checked: checked,
+      readOnly: readOnly
+    };
+  }, [disabled, checked, readOnly]);
+  var rootProps = Object.assign(Object.assign({}, rest), {
+    'data-disabled': domUtils.setAttrStatus(disabled),
+    'data-checked': domUtils.setAttrStatus(checked),
+    'data-readonly': domUtils.setAttrStatus(readOnly)
+  });
+  return {
+    state: state,
+    rootProps: rootProps,
+    getInputProps: getInputProps
+  };
+};
+exports.useRadio = useRadio;

package/lib/esm/Table.js

@@ -20,6 +20,7 @@ import { withDefaultProps } from '@hi-ui/react-utils';
 import { TableSettingMenu } from './TableSettingMenu.js';
 import Loading from '@hi-ui/loading';
 import Checkbox from '@hi-ui/checkbox';
+import Radio from './packages/ui/radio/lib/esm/index.js';
 import { useTableCheck } from './hooks/use-check.js';
 import { isNullish } from '@hi-ui/type-assertion';
 import { cloneTree, flattenTree } from '@hi-ui/tree-utils';
@@ -180,16 +181,19 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
     tryCheckAllRow = _useTableCheck.tryCheckAllRow,
     isCheckedRowKey = _useTableCheck.isCheckedRowKey,
     onCheckedRowKeysChange = _useTableCheck.onCheckedRowKeysChange,
+    onRadioCheckedRowKeysChange = _useTableCheck.onRadioCheckedRowKeysChange,
     checkRowIsDisabledCheckbox = _useTableCheck.checkRowIsDisabledCheckbox;
   // 表格列多选操作区
   var getSelectionColumn = React__default.useCallback(function (rowSelection) {
+    var _rowSelection$type = rowSelection.type,
+      type = _rowSelection$type === void 0 ? 'checkbox' : _rowSelection$type;
     var renderCell = function renderCell(_, rowItem, rowIndex) {
       var rowKey = getRowKeyField(rowItem);
       var checked = isCheckedRowKey(rowKey);
       var disabledCheckbox = checkRowIsDisabledCheckbox(rowItem);
       return {
-        node: ( /*#__PURE__*/React__default.createElement(Checkbox, {
-          checked: isCheckedRowKey(rowKey),
+        node: type === 'checkbox' ? ( /*#__PURE__*/React__default.createElement(Checkbox, {
+          checked: checked,
           disabled: disabledCheckbox,
           onChange: function onChange(evt) {
             onCheckedRowKeysChange(rowItem, evt.target.checked);
@@ -197,6 +201,15 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
           onClick: function onClick(evt) {
             evt.stopPropagation();
           }
+        })) : ( /*#__PURE__*/React__default.createElement(Radio, {
+          checked: checked,
+          disabled: disabledCheckbox,
+          onChange: function onChange(evt) {
+            onRadioCheckedRowKeysChange(rowItem, evt.target.checked);
+          },
+          onClick: function onClick(evt) {
+            evt.stopPropagation();
+          }
         })),
         checked: checked
       };
@@ -247,12 +260,12 @@ var Table = /*#__PURE__*/forwardRef(function (_a, ref) {
       // selectionColumn 宽度固定，防止自动被拉伸
       fixed: true,
       className: prefixCls + "__selection-col",
-      title: renderSelectionTitleCell,
+      title: type === 'checkbox' ? renderSelectionTitleCell : undefined,
       // @ts-ignore
       render: renderSelectionCell
     };
     return selectionColumn;
-  }, [getRowKeyField, checkedAll, semiChecked, tryCheckAllRow, checkboxColWidth, isCheckedRowKey, onCheckedRowKeysChange, checkRowIsDisabledCheckbox, prefixCls]);
+  }, [checkboxColWidth, prefixCls, getRowKeyField, isCheckedRowKey, checkRowIsDisabledCheckbox, onCheckedRowKeysChange, onRadioCheckedRowKeysChange, checkedAll, semiChecked, tryCheckAllRow]);
   var mergedColumns = React__default.useMemo(function () {
     if (rowSelection) {
       var selectionColumn = getSelectionColumn(rowSelection);

package/lib/esm/hooks/use-check.js

@@ -59,6 +59,13 @@ var useTableCheck = function useTableCheck(_ref) {
     }
     handleCheckedRowKeysChange(rowItem, checked);
   }, [checkedRowDataItems, checkedRowKeys, fieldKey, handleCheckedRowKeysChange]);
+  var onRadioCheckedRowKeysChange = React__default.useCallback(function (rowItem, checked) {
+    var _a;
+    checkedRowDataItemsRef.current = [rowItem];
+    trySetCheckedRowKeys((_a = checkedRowDataItemsRef.current) === null || _a === void 0 ? void 0 : _a.map(function (item) {
+      return item[fieldKey];
+    }), rowItem, checked, checkedRowDataItemsRef.current);
+  }, [fieldKey, trySetCheckedRowKeys]);
   // 判断是否全选
   var _React$useMemo = React__default.useMemo(function () {
       if (rowSelection) {
@@ -118,12 +125,13 @@ var useTableCheck = function useTableCheck(_ref) {
       });
       return Array.from(checkedRowKeysSet);
     }, targetRowItems, true, checkedRowDataItemsRef.current);
-  }, [trySetCheckedRowKeys, flattedData, checkRowIsDisabledCheckbox, checkedAll]);
+  }, [flattedData, checkedAll, trySetCheckedRowKeys, checkRowIsDisabledCheckbox, fieldKey]);
   return {
     tryCheckAllRow: tryCheckAllRow,
     checkedAll: checkedAll,
     semiChecked: semiChecked,
     onCheckedRowKeysChange: onCheckedRowKeysChange,
+    onRadioCheckedRowKeysChange: onRadioCheckedRowKeysChange,
     isCheckedRowKey: isCheckedRowKey,
     checkedRowKeys: checkedRowKeys,
     trySetCheckedRowKeys: trySetCheckedRowKeys,

package/lib/esm/packages/ui/radio/lib/esm/Radio.js

@@ -0,0 +1,88 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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__default, { forwardRef } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { useRadio } from './use-radio.js';
+import { useRadioGroupContext } from './context.js';
+import { isNullish } from '@hi-ui/type-assertion';
+import { callAllFuncs } from '@hi-ui/func-utils';
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var RADIO_PREFIX = getPrefixCls('radio');
+/**
+ * 单选
+ */
+var Radio = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? RADIO_PREFIX : _a$prefixCls,
+    _a$role = _a.role,
+    role = _a$role === void 0 ? 'radio' : _a$role,
+    className = _a.className,
+    children = _a.children,
+    rest = __rest(_a, ["prefixCls", "role", "className", "children"]);
+  var groupContext = useRadioGroupContext();
+  var _ref = groupContext || {},
+    disabledContext = _ref.disabled,
+    isCheckedContext = _ref.isChecked,
+    nameContext = _ref.name,
+    onChangeContext = _ref.onChange,
+    _ref$type = _ref.type,
+    type = _ref$type === void 0 ? 'default' : _ref$type;
+  var checkedProp = rest.checked,
+    valueProp = rest.value,
+    _rest$disabled = rest.disabled,
+    disabled = _rest$disabled === void 0 ? disabledContext : _rest$disabled,
+    _rest$name = rest.name,
+    name = _rest$name === void 0 ? nameContext : _rest$name,
+    onChangeProp = rest.onChange;
+  // Group's priority is higher than its own.
+  var checked = isCheckedContext && !isNullish(valueProp) ? isCheckedContext(valueProp) : checkedProp;
+  var onChange = onChangeContext && !isNullish(valueProp) ? callAllFuncs(function (evt) {
+    if (evt.target.checked) {
+      onChangeContext(valueProp);
+    }
+  }, onChangeProp) : onChangeProp;
+  var _useRadio = useRadio(Object.assign(Object.assign({}, rest), {
+      disabled: disabled,
+      name: name,
+      checked: checked,
+      onChange: onChange
+    })),
+    rootProps = _useRadio.rootProps,
+    getInputProps = _useRadio.getInputProps;
+  var inputProps = getInputProps();
+  var cls = cx(prefixCls, className, prefixCls + "--type-" + type);
+  return /*#__PURE__*/React__default.createElement("label", Object.assign({
+    ref: ref,
+    role: role,
+    className: cls
+  }, rootProps), /*#__PURE__*/React__default.createElement("input", Object.assign({}, inputProps, {
+    tabIndex: 0,
+    className: prefixCls + "__input"
+  })), /*#__PURE__*/React__default.createElement("span", {
+    className: prefixCls + "__controller"
+  }), children ? /*#__PURE__*/React__default.createElement("span", {
+    className: prefixCls + "__label"
+  }, children) : null);
+});
+if (__DEV__) {
+  Radio.displayName = 'Radio';
+}
+export { Radio };

package/lib/esm/packages/ui/radio/lib/esm/RadioGroup.js

@@ -0,0 +1,92 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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__default, { forwardRef, useMemo } from 'react';
+import { getPrefixCls, cx } from '@hi-ui/classname';
+import { __DEV__ } from '@hi-ui/env';
+import { useRadioGroup } from './use-radio-group.js';
+import { RadioGroupProvider } from './context.js';
+import { RadioGroupTypeEnum, RadioGroupPlacementEnum } from './types.js';
+import { isArrayNonEmpty } from '@hi-ui/type-assertion';
+import { Radio } from './Radio.js';
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var RADIO_GROUP_PREFIX = getPrefixCls('radio-group');
+/**
+ * 单选组合器
+ */
+var RadioGroup = /*#__PURE__*/forwardRef(function (_a, ref) {
+  var _a$prefixCls = _a.prefixCls,
+    prefixCls = _a$prefixCls === void 0 ? RADIO_GROUP_PREFIX : _a$prefixCls,
+    className = _a.className,
+    children = _a.children,
+    data = _a.data,
+    _a$type = _a.type,
+    type = _a$type === void 0 ? RadioGroupTypeEnum.DEFAULT : _a$type,
+    _a$placement = _a.placement,
+    placement = _a$placement === void 0 ? RadioGroupPlacementEnum.HORIZONTAL : _a$placement,
+    _a$autoWidth = _a.autoWidth,
+    autoWidth = _a$autoWidth === void 0 ? false : _a$autoWidth,
+    rest = __rest(_a, ["prefixCls", "className", "children", "data", "type", "placement", "autoWidth"]);
+  var _useRadioGroup = useRadioGroup(rest),
+    rootProps = _useRadioGroup.rootProps,
+    name = _useRadioGroup.name,
+    value = _useRadioGroup.value,
+    onChange = _useRadioGroup.onChange,
+    isChecked = _useRadioGroup.isChecked,
+    disabled = _useRadioGroup.disabled;
+  var providedValue = useMemo(function () {
+    return {
+      name: name,
+      onChange: onChange,
+      value: value,
+      isChecked: isChecked,
+      disabled: disabled,
+      type: type,
+      placement: placement
+    };
+  }, [name, onChange, value, isChecked, disabled, type, placement]);
+  var hasData = isArrayNonEmpty(data);
+  // data 优先级大于内嵌式组合
+  if (hasData) {
+    children = data.map(function (_ref) {
+      var id = _ref.id,
+        disabled = _ref.disabled,
+        title = _ref.title;
+      return /*#__PURE__*/React__default.createElement(Radio, {
+        key: id,
+        value: id,
+        name: name,
+        disabled: disabled,
+        checked: isChecked(id),
+        className: prefixCls + "__item"
+      }, title);
+    });
+  }
+  var cls = cx(prefixCls, className, prefixCls + "--placement-" + placement, autoWidth && type === RadioGroupTypeEnum.BUTTON && prefixCls + "--auto-width", prefixCls + "--type-" + type, hasData && prefixCls + "--data-wrap");
+  return /*#__PURE__*/React__default.createElement(RadioGroupProvider, {
+    value: providedValue
+  }, /*#__PURE__*/React__default.createElement("div", Object.assign({
+    ref: ref,
+    className: cls
+  }, rootProps), children));
+});
+if (__DEV__) {
+  RadioGroup.displayName = 'RadioGroup';
+}
+export { RadioGroup };

package/lib/esm/packages/ui/radio/lib/esm/context.js

@@ -0,0 +1,31 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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 { useContext, createContext } from 'react';
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var RadioGroupContext = /*#__PURE__*/createContext(null);
+var RadioGroupProvider = RadioGroupContext.Provider;
+var useRadioGroupContext = function useRadioGroupContext() {
+  var context = useContext(RadioGroupContext);
+  // 允许 Radio 单独存在，不做检查
+  // if (!context) {
+  // throw new Error('The RadioGroupContext context should using in Radio.')
+  // }
+  return context;
+};
+export { RadioGroupProvider, useRadioGroupContext };

package/lib/esm/packages/ui/radio/lib/esm/index.js

@@ -0,0 +1,26 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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 './styles/index.scss.js';
+import { Radio as Radio$1 } from './Radio.js';
+import { RadioGroup } from './RadioGroup.js';
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var Radio = Object.assign(Radio$1, {
+  Group: RadioGroup
+});
+export { Radio$1 as Radio, RadioGroup, Radio as default };

package/lib/esm/packages/ui/radio/lib/esm/styles/index.scss.js

@@ -0,0 +1,23 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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 __styleInject__ from '@hi-ui/style-inject';
+
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var css_248z = ".hi-v4-radio {overflow-wrap: break-word;font-size: var(--hi-v4-text-size-md, 0.875rem);line-height: var(--hi-v4-text-lineheight-md, 1.375rem);position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;cursor: pointer;display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;-webkit-box-align: center;-ms-flex-align: center;align-items: center;vertical-align: middle;}.hi-v4-radio--type-button {height: 32px;padding: 0 12px;color: var(--hi-v4-color-gray-600, #5f6a7a);background: var(--hi-v4-color-gray-100, #f2f4f7);cursor: pointer;-webkit-transition: all var(--hi-v4-motion-duration-normal, 200ms);transition: all var(--hi-v4-motion-duration-normal, 200ms);}.hi-v4-radio--type-button .hi-v4-radio__input {display: none;}.hi-v4-radio--type-button .hi-v4-radio__input:focus + .hi-v4-radio__label {color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-radio--type-button .hi-v4-radio__controller {display: none;}.hi-v4-radio--type-button:hover, .hi-v4-radio--type-button[data-checked] {background: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-radio--type-button[data-disabled] {cursor: not-allowed;background: var(--hi-v4-color-gray-200, #ebedf0);color: var(--hi-v4-color-gray-400, #b5bcc7);}.hi-v4-radio--type-button[data-checked].hi-v4-radio--type-button[data-disabled] {background: var(--hi-v4-color-primary-50, var(--hi-v4-color-brandblue-50, #e2f3fe));color: var(--hi-v4-color-primary-300, var(--hi-v4-color-brandblue-300, #70b8ff));}.hi-v4-radio--type-default .hi-v4-radio__input:focus + .hi-v4-radio__controller {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));-webkit-box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));box-shadow: 0 0 0 2px var(--hi-v4-color-primary-100, var(--hi-v4-color-brandblue-100, #bde2ff));}.hi-v4-radio--type-default .hi-v4-radio__controller {display: -webkit-box;display: -ms-flexbox;display: flex;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;-webkit-box-align: center;-ms-flex-align: center;align-items: center;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-ms-flex-direction: row;flex-direction: row;position: relative;-webkit-box-sizing: border-box;box-sizing: border-box;width: 16px;height: 16px;border: 1px solid var(--hi-v4-color-gray-300, #dfe2e8);border-radius: var(--hi-v4-border-radius-full, 9999px);-webkit-transition: all var(--hi-v4-motion-duration-normal, 200ms);transition: all var(--hi-v4-motion-duration-normal, 200ms);-webkit-box-flex: 0;-ms-flex: none;flex: none;}.hi-v4-radio--type-default .hi-v4-radio__controller::after {position: absolute;top: 0;left: 0;-webkit-box-sizing: border-box;box-sizing: border-box;display: inline-block;width: 14px;height: 14px;content: \"\";background: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));border-radius: var(--hi-v4-border-radius-full, 9999px);opacity: 0;-webkit-transition: all var(--hi-v4-motion-duration-normal, 200ms);transition: all var(--hi-v4-motion-duration-normal, 200ms);-webkit-transform: scale(0);transform: scale(0);}.hi-v4-radio--type-default .hi-v4-radio__label {-webkit-box-sizing: border-box;box-sizing: border-box;-webkit-margin-start: var(--hi-v4-spacing-4, 8px);margin-inline-start: var(--hi-v4-spacing-4, 8px);color: var(--hi-v4-color-gray-700, #1f2733);}.hi-v4-radio--type-default:hover .hi-v4-radio__controller {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-radio--type-default[data-checked] .hi-v4-radio__controller {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));}.hi-v4-radio--type-default[data-checked] .hi-v4-radio__controller::after {opacity: 1;-webkit-transform: scale(0.3);transform: scale(0.3);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-radio--type-default[data-checked].hi-v4-radio--type-default[data-disabled] .hi-v4-radio__controller {border-color: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));background: var(--hi-v4-color-primary-500, var(--hi-v4-color-brandblue-500, #237ffa));opacity: 0.4;}.hi-v4-radio--type-default[data-checked].hi-v4-radio--type-default[data-disabled] .hi-v4-radio__controller::after {opacity: 1;-webkit-transform: scale(0.3);transform: scale(0.3);background-color: var(--hi-v4-color-static-white, #fff);}.hi-v4-radio--type-default[data-disabled] {cursor: not-allowed;}.hi-v4-radio--type-default[data-disabled] .hi-v4-radio__controller {border-color: var(--hi-v4-color-gray-300, #dfe2e8);background: var(--hi-v4-color-gray-100, #f2f4f7);}.hi-v4-radio--type-default[data-disabled] .hi-v4-radio__controller::after {background: var(--hi-v4-color-gray-300, #dfe2e8);}.hi-v4-radio--type-default[data-disabled] .hi-v4-radio__label {color: var(--hi-v4-color-gray-500, #929aa6);}.hi-v4-radio-group {position: relative;}.hi-v4-radio-group--data-wrap {display: -webkit-inline-box;display: -ms-inline-flexbox;display: inline-flex;z-index: var(--hi-v4-zindex-normal, 0);}.hi-v4-radio-group--type-button {border-radius: var(--hi-v4-border-radius-md, 4px);overflow: hidden;}.hi-v4-radio-group--type-default.hi-v4-radio-group--data-wrap {gap: var(--hi-v4-spacing-8, 16px);}.hi-v4-radio-group--placement-horizontal.hi-v4-radio-group--data-wrap {-webkit-box-align: center;-ms-flex-align: center;align-items: center;}.hi-v4-radio-group--placement-horizontal.hi-v4-radio-group--auto-width {display: -webkit-box;display: -ms-flexbox;display: flex;}.hi-v4-radio-group--placement-horizontal.hi-v4-radio-group--auto-width .hi-v4-radio--type-button {-webkit-box-flex: 1;-ms-flex: 1 1;flex: 1 1;-webkit-box-pack: center;-ms-flex-pack: center;justify-content: center;}.hi-v4-radio-group--placement-horizontal .hi-v4-radio--type-button::after {content: \"\";background: var(--hi-v4-color-gray-300, #dfe2e8);width: 1px;left: 100%;top: 8px;bottom: 8px;position: absolute;z-index: var(--hi-v4-zindex-absolute, 1);}.hi-v4-radio-group--placement-vertical {-webkit-box-orient: vertical;-webkit-box-direction: normal;-ms-flex-direction: column;flex-direction: column;}.hi-v4-radio-group--placement-vertical .hi-v4-radio--type-button::after {content: \"\";background: var(--hi-v4-color-gray-300, #dfe2e8);height: 1px;left: 8px;right: 8px;top: 100%;position: absolute;z-index: var(--hi-v4-zindex-absolute, 1);}";
+__styleInject__(css_248z);
+export { css_248z as default };

package/lib/esm/packages/ui/radio/lib/esm/types.js

@@ -0,0 +1,27 @@
+/** @LICENSE
+ * @hi-ui/table
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/table#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.
+ */
+/** @LICENSE
+ * @hi-ui/radio
+ * https://github.com/XiaoMi/hiui/tree/master/packages/ui/radio#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.
+ */
+var RadioGroupPlacementEnum = {
+  VERTICAL: 'vertical',
+  HORIZONTAL: 'horizontal'
+};
+var RadioGroupTypeEnum = {
+  DEFAULT: 'default',
+  BUTTON: 'button'
+};
+export { RadioGroupPlacementEnum, RadioGroupTypeEnum };