@ucloud-fe/react-components 1.5.17 → 1.5.18

package/lib/components/Collapse/Panel.js

@@ -0,0 +1,98 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _isFunction = _interopRequireDefault(require("../../utils/isFunction"));
+
+var _style = require("./style");
+
+var _hooks = require("./hooks");
+
+var _excluded = ["open", "defaultOpen", "onChange", "disabled", "panelKey", "titlePosition", "title", "ignoreUpdateWhenClose", "forceRender", "children"];
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var Panel = function Panel(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var _open = _ref.open,
+      defaultOpen = _ref.defaultOpen,
+      onChange = _ref.onChange,
+      disabled = _ref.disabled,
+      _ref$panelKey = _ref.panelKey,
+      panelKey = _ref$panelKey === void 0 ? '' : _ref$panelKey,
+      _ref$titlePosition = _ref.titlePosition,
+      titlePosition = _ref$titlePosition === void 0 ? 'top' : _ref$titlePosition,
+      title = _ref.title,
+      ignoreUpdateWhenClose = _ref.ignoreUpdateWhenClose,
+      forceRender = _ref.forceRender,
+      children = _ref.children,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _usePanel = (0, _hooks.usePanel)({
+    open: _open,
+    defaultOpen: defaultOpen,
+    onChange: onChange,
+    disabled: disabled,
+    panelKey: panelKey,
+    forceRender: forceRender,
+    ignoreUpdateWhenClose: ignoreUpdateWhenClose
+  }),
+      _usePanel2 = (0, _slicedToArray2.default)(_usePanel, 3),
+      shouldRender = _usePanel2[0],
+      open = _usePanel2[1],
+      handleToggle = _usePanel2[2];
+
+  var finalTitle = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this2);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      onClick: handleToggle
+    }, (0, _isFunction.default)(title) ? title({
+      open: open,
+      disabled: disabled,
+      toggle: handleToggle
+    }) : title);
+  }.bind(this), [disabled, handleToggle, open, title]);
+  return /*#__PURE__*/_react.default.createElement("div", rest, titlePosition === 'top' && finalTitle, /*#__PURE__*/_react.default.createElement(_style.PanelWrap, {
+    open: open
+  }, shouldRender ? children : null), titlePosition === 'bottom' && finalTitle);
+}.bind(void 0);
+
+Panel.propTypes = {
+  title: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),
+  onChange: _propTypes.default.func,
+  open: _propTypes.default.bool,
+  defaultOpen: _propTypes.default.bool,
+  forceRender: _propTypes.default.bool,
+  ignoreUpdateWhenClose: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  titlePosition: _propTypes.default.oneOf(['top', 'bottom'])
+};
+
+var MemoPanel = /*#__PURE__*/_react.default.memo(Panel);
+
+MemoPanel.isCollapsePanel = true;
+var _default = MemoPanel;
+exports.default = _default;

package/lib/components/Collapse/hooks.d.ts

@@ -0,0 +1,29 @@
+import { Key } from '../../hooks/group';
+export interface CollapseProps {
+    /** 激活的面板，multiple 时为数组值，controlled */
+    openKeys?: Key[];
+    /** 默认激活的面板，multiple 时为数组值，uncontrolled */
+    defaultOpenKeys?: Key[];
+    /** 变化回调 */
+    onChange?: (keys: Key[]) => void;
+    /** 是否可以多个同时打开 */
+    multiple?: boolean;
+}
+export declare const useCollapse: ({ openKeys: _openKeys, defaultOpenKeys, onChange: _onChange, multiple }: CollapseProps) => import("../../hooks/group").GroupContext[];
+export interface PanelProps {
+    /** 是否展开，controlled */
+    open?: boolean;
+    /** 默认展开状态，uncontrolled */
+    defaultOpen?: boolean;
+    /** 修改回调 */
+    onChange?: (open: boolean) => void;
+    /** 是否禁用 */
+    disabled?: boolean;
+    /** 唯一键值 */
+    panelKey?: Key;
+    /** 是否强制渲染 */
+    forceRender?: boolean;
+    /** 关闭时子组件不会更新 */
+    ignoreUpdateWhenClose?: boolean;
+}
+export declare const usePanel: ({ open: _open, defaultOpen, onChange: _onChange, disabled, panelKey, forceRender, ignoreUpdateWhenClose }: PanelProps) => [boolean, boolean, () => void];

package/lib/components/Collapse/hooks.js

@@ -0,0 +1,103 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.usePanel = exports.useCollapse = void 0;
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _group = require("../../hooks/group");
+
+var _useUncontrolled5 = _interopRequireDefault(require("../../hooks/useUncontrolled"));
+
+var _CollapseContext = _interopRequireDefault(require("./CollapseContext"));
+
+var _this = void 0;
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+var useCollapse = function useCollapse(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var _openKeys = _ref.openKeys,
+      _ref$defaultOpenKeys = _ref.defaultOpenKeys,
+      defaultOpenKeys = _ref$defaultOpenKeys === void 0 ? [] : _ref$defaultOpenKeys,
+      _onChange = _ref.onChange,
+      _ref$multiple = _ref.multiple,
+      multiple = _ref$multiple === void 0 ? true : _ref$multiple;
+
+  var _useUncontrolled = (0, _useUncontrolled5.default)(_openKeys, defaultOpenKeys, _onChange),
+      _useUncontrolled2 = (0, _slicedToArray2.default)(_useUncontrolled, 2),
+      openKeys = _useUncontrolled2[0],
+      onChangeS = _useUncontrolled2[1];
+
+  var onChange = (0, _react.useCallback)(function (keys) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    onChangeS(keys);
+  }.bind(this), [onChangeS]);
+
+  var _useGroup = (0, _group.useGroup)(openKeys, onChange, multiple),
+      _useGroup2 = (0, _slicedToArray2.default)(_useGroup, 1),
+      collapseContext = _useGroup2[0];
+
+  return [collapseContext];
+}.bind(void 0);
+
+exports.useCollapse = useCollapse;
+
+var usePanel = function usePanel(_ref2) {
+  var _this3 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var _open = _ref2.open,
+      defaultOpen = _ref2.defaultOpen,
+      _onChange = _ref2.onChange,
+      disabled = _ref2.disabled,
+      _ref2$panelKey = _ref2.panelKey,
+      panelKey = _ref2$panelKey === void 0 ? '' : _ref2$panelKey,
+      forceRender = _ref2.forceRender,
+      ignoreUpdateWhenClose = _ref2.ignoreUpdateWhenClose;
+
+  var _useUncontrolled3 = (0, _useUncontrolled5.default)(_open, defaultOpen, _onChange),
+      _useUncontrolled4 = (0, _slicedToArray2.default)(_useUncontrolled3, 2),
+      openS = _useUncontrolled4[0],
+      onChange = _useUncontrolled4[1];
+
+  var collapseContext = (0, _react.useContext)(_CollapseContext.default);
+
+  var _useItem = (0, _group.useItem)(panelKey, collapseContext, openS),
+      _useItem2 = (0, _slicedToArray2.default)(_useItem, 2),
+      open = _useItem2[0],
+      toggle = _useItem2[1];
+
+  var handleToggle = (0, _react.useCallback)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+
+    if (!disabled) {
+      onChange(!open);
+      toggle(!open);
+    }
+  }.bind(this), [disabled, onChange, open, toggle]);
+  var renderedRef = (0, _react.useRef)(false);
+  var shouldRender = (0, _react.useMemo)(function () {
+    (0, _newArrowCheck2.default)(this, _this3);
+    var shouldRender = forceRender || open || ignoreUpdateWhenClose && renderedRef.current || false;
+    if (renderedRef.current || shouldRender) renderedRef.current = shouldRender;
+    return shouldRender;
+  }.bind(this), [forceRender, ignoreUpdateWhenClose, open]);
+  return [shouldRender, open, handleToggle];
+}.bind(void 0);
+
+exports.usePanel = usePanel;

package/lib/components/Collapse/index.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import Panel from './Panel';
+declare const ExportCollapse: import("react").NamedExoticComponent<import("./Collapse").CollapseProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("./Collapse").CollapseProps>> & {
+    readonly type: ({ openKeys, defaultOpenKeys, onChange, multiple, component, children, ...rest }: import("./Collapse").CollapseProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("./Collapse").CollapseProps>) => JSX.Element;
+} & {
+    Panel: import("react").MemoExoticComponent<({ open: _open, defaultOpen, onChange, disabled, panelKey, titlePosition, title, ignoreUpdateWhenClose, forceRender, children, ...rest }: import("./Panel").PanelProps & Omit<import("react").HTMLAttributes<HTMLDivElement>, keyof import("./Panel").PanelProps>) => JSX.Element>;
+};
+export default ExportCollapse;
+export { Panel };

package/lib/components/Collapse/index.js

@@ -0,0 +1,26 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "Panel", {
+  enumerable: true,
+  get: function get() {
+    return _Panel.default;
+  }
+});
+exports.default = void 0;
+
+var _type = require("../../type");
+
+var _Collapse = _interopRequireDefault(require("./Collapse"));
+
+var _Panel = _interopRequireDefault(require("./Panel"));
+
+var ExportCollapse = (0, _type.ExportComponent)(_Collapse.default, {
+  Panel: _Panel.default
+});
+var _default = ExportCollapse;
+exports.default = _default;

package/lib/components/Collapse/style/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const PanelWrap: import("react").ForwardRefExoticComponent<{
+    open?: boolean | undefined;
+} & import("react").HTMLAttributes<HTMLElement> & {
+    theme?: import("../../../style").Theme | undefined;
+} & import("react").RefAttributes<HTMLElement>>;

package/lib/components/Collapse/style/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.PanelWrap = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@emotion/core");
+
+var _style = require("../../../style");
+
+var _this = void 0;
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "y7yzr3-PanelWrap",
+  styles: "display:none;;label:PanelWrap;"
+} : {
+  name: "y7yzr3-PanelWrap",
+  styles: "display:none;;label:PanelWrap;",
+  map: "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbGxhcHNlL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQVNlIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbGxhcHNlL3N0eWxlL2luZGV4LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCB7IHNXcmFwIH0gZnJvbSAnc3JjL3N0eWxlJztcblxuZXhwb3J0IGNvbnN0IFBhbmVsV3JhcCA9IHNXcmFwPHsgb3Blbj86IGJvb2xlYW4gfT4oe30pKFxuICAgIHN0eWxlZCgnZGl2JykocHJvcHMgPT4ge1xuICAgICAgICByZXR1cm4gY3NzYFxuICAgICAgICAgICAgJHshcHJvcHMub3BlbiAmJlxuICAgICAgICAgICAgY3NzYFxuICAgICAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgICAgICBgfTtcbiAgICAgICAgYDtcbiAgICB9KVxuKTtcbiJdfQ== */",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var PanelWrap = (0, _style.sWrap)({})(( /*#__PURE__*/0, _styledBase.default)('div', {
+  target: "e1mskuhl0",
+  label: "PanelWrap"
+})(function (props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  return /*#__PURE__*/(0, _core.css)(!props.open && _ref, ";;label:PanelWrap;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbGxhcHNlL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU9rQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Db2xsYXBzZS9zdHlsZS9pbmRleC50cyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCBzdHlsZWQgZnJvbSAnQGVtb3Rpb24vc3R5bGVkJztcbmltcG9ydCB7IGNzcyB9IGZyb20gJ0BlbW90aW9uL2NvcmUnO1xuXG5pbXBvcnQgeyBzV3JhcCB9IGZyb20gJ3NyYy9zdHlsZSc7XG5cbmV4cG9ydCBjb25zdCBQYW5lbFdyYXAgPSBzV3JhcDx7IG9wZW4/OiBib29sZWFuIH0+KHt9KShcbiAgICBzdHlsZWQoJ2RpdicpKHByb3BzID0+IHtcbiAgICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgICAgICR7IXByb3BzLm9wZW4gJiZcbiAgICAgICAgICAgIGNzc2BcbiAgICAgICAgICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICAgICAgYH07XG4gICAgICAgIGA7XG4gICAgfSlcbik7XG4iXX0= */"));
+}.bind(void 0), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbGxhcHNlL3N0eWxlL2luZGV4LnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQU1JIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbGxhcHNlL3N0eWxlL2luZGV4LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCB7IHNXcmFwIH0gZnJvbSAnc3JjL3N0eWxlJztcblxuZXhwb3J0IGNvbnN0IFBhbmVsV3JhcCA9IHNXcmFwPHsgb3Blbj86IGJvb2xlYW4gfT4oe30pKFxuICAgIHN0eWxlZCgnZGl2JykocHJvcHMgPT4ge1xuICAgICAgICByZXR1cm4gY3NzYFxuICAgICAgICAgICAgJHshcHJvcHMub3BlbiAmJlxuICAgICAgICAgICAgY3NzYFxuICAgICAgICAgICAgICAgIGRpc3BsYXk6IG5vbmU7XG4gICAgICAgICAgICBgfTtcbiAgICAgICAgYDtcbiAgICB9KVxuKTtcbiJdfQ== */"));
+exports.PanelWrap = PanelWrap;

package/lib/components/Combine/Combine.d.ts

@@ -0,0 +1,19 @@
+import React, { HTMLAttributes, ReactNode } from 'react';
+export interface DefinedCombineProps {
+    children: ReactNode;
+    /** children 共享属性 */
+    sharedProps?: {
+        /** 尺寸 */
+        size?: 'sm' | 'md' | 'lg';
+        /** className */
+        className?: string;
+        [key: string]: unknown;
+    };
+    /** 间距 */
+    spacing?: 'compact' | 'smart' | 'sm' | 'md' | 'lg' | string;
+    /** 分隔符 */
+    separator?: ReactNode;
+}
+export declare type CombineProps = DefinedCombineProps & Omit<HTMLAttributes<HTMLDivElement>, keyof DefinedCombineProps>;
+declare const _default: React.MemoExoticComponent<({ children, sharedProps, spacing, separator, ...rest }: CombineProps) => JSX.Element>;
+export default _default;

package/lib/components/Combine/Combine.js

@@ -0,0 +1,80 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _style = require("./style");
+
+var _excluded = ["children", "sharedProps", "spacing", "separator"];
+
+var _this = void 0;
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+var Combine = function Combine(_ref) {
+  var _this2 = this;
+
+  (0, _newArrowCheck2.default)(this, _this);
+  var children = _ref.children,
+      _ref$sharedProps = _ref.sharedProps,
+      sharedProps = _ref$sharedProps === void 0 ? {} : _ref$sharedProps,
+      _ref$spacing = _ref.spacing,
+      spacing = _ref$spacing === void 0 ? 'smart' : _ref$spacing,
+      separator = _ref.separator,
+      rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _sharedProps$size = sharedProps.size,
+      size = _sharedProps$size === void 0 ? 'md' : _sharedProps$size;
+  var isFirstItem;
+  return /*#__PURE__*/_react.default.createElement(_style.CombineWrap, (0, _extends2.default)({
+    spacing: spacing === 'smart' ? size : spacing
+  }, rest), _react.default.Children.map(children, function (child) {
+    (0, _newArrowCheck2.default)(this, _this2);
+    if (child == null || child === false) return child;
+    isFirstItem = isFirstItem === undefined ? true : false;
+
+    var _child = /*#__PURE__*/_react.default.createElement("div", {
+      className: _style.itemCls
+    }, /*#__PURE__*/_react.default.isValidElement(child) ? /*#__PURE__*/_react.default.cloneElement(child, _objectSpread(_objectSpread({}, sharedProps), {}, {
+      className: (0, _classnames.default)(child.props.className, sharedProps.className)
+    })) : child);
+
+    return separator && !isFirstItem ? [/*#__PURE__*/_react.default.createElement("span", {
+      className: _style.separatorCls,
+      key: "separator"
+    }, separator), _child] : _child;
+  }.bind(this)));
+}.bind(void 0);
+
+Combine.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  sharedProps: _propTypes.default.shape({
+    size: _propTypes.default.oneOf(['sm', 'md', 'lg']),
+    className: _propTypes.default.string
+  }),
+  spacing: _propTypes.default.oneOfType([_propTypes.default.oneOf(['compact']), _propTypes.default.oneOf(['smart']), _propTypes.default.oneOf(['sm']), _propTypes.default.oneOf(['md']), _propTypes.default.oneOf(['lg']), _propTypes.default.string]),
+  separator: _propTypes.default.node
+};
+
+var _default = /*#__PURE__*/_react.default.memo(Combine);
+
+exports.default = _default;

package/lib/components/Combine/index.d.ts

@@ -0,0 +1,3 @@
+import Combine, { CombineProps } from './Combine';
+export default Combine;
+export type { CombineProps };

package/lib/components/Combine/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Combine = _interopRequireDefault(require("./Combine"));
+
+var _default = _Combine.default;
+exports.default = _default;

package/lib/components/Combine/style/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const itemCls: string;
+export declare const separatorCls: string;
+export declare const CombineWrap: import("react").ForwardRefExoticComponent<{
+    spacing: string;
+} & import("react").HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/Combine/style/index.js

@@ -0,0 +1,60 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.CombineWrap = exports.separatorCls = exports.itemCls = void 0;
+
+var _newArrowCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/newArrowCheck"));
+
+var _styledBase = _interopRequireDefault(require("@emotion/styled-base"));
+
+var _core = require("@emotion/core");
+
+var _config = _interopRequireDefault(require("../../../config"));
+
+var _styledWrap = _interopRequireDefault(require("../../../utils/styledWrap"));
+
+var _this = void 0;
+
+var _prefixCls = _config.default.prefixCls;
+var prefixCls = _prefixCls + '-combine';
+var itemCls = prefixCls + '-item';
+exports.itemCls = itemCls;
+var separatorCls = prefixCls + '-separator';
+exports.separatorCls = separatorCls;
+var spacingMap = {
+  sm: 'T_SPACING_COMMON_XS',
+  md: 'T_SPACING_COMMON_SM',
+  lg: 'T_SPACING_COMMON_MD'
+};
+
+var isBuildInSpacing = function isBuildInSpacing(spacing) {
+  (0, _newArrowCheck2.default)(this, _this);
+  return Object.prototype.hasOwnProperty.call(spacingMap, spacing);
+}.bind(void 0);
+
+var CombineWrap = (0, _styledWrap.default)({
+  className: prefixCls
+})(( /*#__PURE__*/0, _styledBase.default)('div', {
+  target: "evbd6d0",
+  label: "CombineWrap"
+})(function (props) {
+  (0, _newArrowCheck2.default)(this, _this);
+  var spacing = props.spacing,
+      DT = props.theme.designTokens;
+  var space;
+
+  if (spacing === 'compact') {
+    space = '-1px';
+  } else if (isBuildInSpacing(spacing)) {
+    space = DT[spacingMap[spacing]];
+  } else {
+    space = spacing;
+  }
+
+  return /*#__PURE__*/(0, _core.css)("> .", itemCls, ",> .", separatorCls, "{vertical-align:middle;display:inline-block;}> .", itemCls, "{&:focus{z-index:2;}&:hover{z-index:3;}}> .", itemCls, "+.", itemCls, ",> .", separatorCls, "+.", itemCls, ",> .", itemCls, "+.", separatorCls, "{margin-left:", space, ";};label:CombineWrap;" + (process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbWJpbmUvc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBdUNrQiIsImZpbGUiOiIuLi8uLi8uLi8uLi9zcmMvY29tcG9uZW50cy9Db21iaW5lL3N0eWxlL2luZGV4LnRzIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgY3NzIH0gZnJvbSAnQGVtb3Rpb24vY29yZSc7XG5cbmltcG9ydCBjb25maWcgZnJvbSAnc3JjL2NvbmZpZyc7XG5pbXBvcnQgc3R5bGVkV3JhcCwgeyBEZXNpZ25Ub2tlbiB9IGZyb20gJ3NyYy91dGlscy9zdHlsZWRXcmFwJztcblxuY29uc3QgeyBwcmVmaXhDbHM6IF9wcmVmaXhDbHMgfSA9IGNvbmZpZztcbmNvbnN0IHByZWZpeENscyA9IF9wcmVmaXhDbHMgKyAnLWNvbWJpbmUnO1xuXG5leHBvcnQgY29uc3QgaXRlbUNscyA9IHByZWZpeENscyArICctaXRlbSc7XG5leHBvcnQgY29uc3Qgc2VwYXJhdG9yQ2xzID0gcHJlZml4Q2xzICsgJy1zZXBhcmF0b3InO1xuXG5jb25zdCBzcGFjaW5nTWFwID0ge1xuICAgIHNtOiAnVF9TUEFDSU5HX0NPTU1PTl9YUycgYXMgRGVzaWduVG9rZW4sXG4gICAgbWQ6ICdUX1NQQUNJTkdfQ09NTU9OX1NNJyBhcyBEZXNpZ25Ub2tlbixcbiAgICBsZzogJ1RfU1BBQ0lOR19DT01NT05fTUQnIGFzIERlc2lnblRva2VuXG59O1xuXG5jb25zdCBpc0J1aWxkSW5TcGFjaW5nID0gKHNwYWNpbmc6IHN0cmluZyk6IHNwYWNpbmcgaXMga2V5b2YgdHlwZW9mIHNwYWNpbmdNYXAgPT4ge1xuICAgIHJldHVybiBPYmplY3QucHJvdG90eXBlLmhhc093blByb3BlcnR5LmNhbGwoc3BhY2luZ01hcCwgc3BhY2luZyk7XG59O1xuXG5leHBvcnQgY29uc3QgQ29tYmluZVdyYXAgPSBzdHlsZWRXcmFwPHsgc3BhY2luZzogc3RyaW5nIH0+KHtcbiAgICBjbGFzc05hbWU6IHByZWZpeENsc1xufSkoXG4gICAgc3R5bGVkKCdkaXYnKShwcm9wcyA9PiB7XG4gICAgICAgIGNvbnN0IHtcbiAgICAgICAgICAgIHNwYWNpbmcsXG4gICAgICAgICAgICB0aGVtZTogeyBkZXNpZ25Ub2tlbnM6IERUIH1cbiAgICAgICAgfSA9IHByb3BzO1xuICAgICAgICBsZXQgc3BhY2U6IHN0cmluZztcbiAgICAgICAgaWYgKHNwYWNpbmcgPT09ICdjb21wYWN0Jykge1xuICAgICAgICAgICAgc3BhY2UgPSAnLTFweCc7XG4gICAgICAgIH0gZWxzZSBpZiAoaXNCdWlsZEluU3BhY2luZyhzcGFjaW5nKSkge1xuICAgICAgICAgICAgc3BhY2UgPSBEVFtzcGFjaW5nTWFwW3NwYWNpbmddXTtcbiAgICAgICAgfSBlbHNlIHtcbiAgICAgICAgICAgIHNwYWNlID0gc3BhY2luZztcbiAgICAgICAgfVxuXG4gICAgICAgIHJldHVybiBjc3NgXG4gICAgICAgICAgICA+IC4ke2l0ZW1DbHN9LCA+IC4ke3NlcGFyYXRvckNsc30ge1xuICAgICAgICAgICAgICAgIHZlcnRpY2FsLWFsaWduOiBtaWRkbGU7XG4gICAgICAgICAgICAgICAgZGlzcGxheTogaW5saW5lLWJsb2NrO1xuICAgICAgICAgICAgfVxuICAgICAgICAgICAgPiAuJHtpdGVtQ2xzfSB7XG4gICAgICAgICAgICAgICAgJjpmb2N1cyB7XG4gICAgICAgICAgICAgICAgICAgIHotaW5kZXg6IDI7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgICAgICY6aG92ZXIge1xuICAgICAgICAgICAgICAgICAgICB6LWluZGV4OiAzO1xuICAgICAgICAgICAgICAgIH1cbiAgICAgICAgICAgIH1cbiAgICAgICAgICAgID4gLiR7aXRlbUNsc30rLiR7aXRlbUNsc30sID4gLiR7c2VwYXJhdG9yQ2xzfSsuJHtpdGVtQ2xzfSwgPiAuJHtpdGVtQ2xzfSsuJHtzZXBhcmF0b3JDbHN9IHtcbiAgICAgICAgICAgICAgICBtYXJnaW4tbGVmdDogJHtzcGFjZX07XG4gICAgICAgICAgICB9XG4gICAgICAgIGA7XG4gICAgfSlcbik7XG4iXX0= */"));
+}.bind(void 0), process.env.NODE_ENV === "production" ? "" : "/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbWJpbmUvc3R5bGUvaW5kZXgudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBeUJJIiwiZmlsZSI6Ii4uLy4uLy4uLy4uL3NyYy9jb21wb25lbnRzL0NvbWJpbmUvc3R5bGUvaW5kZXgudHMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgc3R5bGVkIGZyb20gJ0BlbW90aW9uL3N0eWxlZCc7XG5pbXBvcnQgeyBjc3MgfSBmcm9tICdAZW1vdGlvbi9jb3JlJztcblxuaW1wb3J0IGNvbmZpZyBmcm9tICdzcmMvY29uZmlnJztcbmltcG9ydCBzdHlsZWRXcmFwLCB7IERlc2lnblRva2VuIH0gZnJvbSAnc3JjL3V0aWxzL3N0eWxlZFdyYXAnO1xuXG5jb25zdCB7IHByZWZpeENsczogX3ByZWZpeENscyB9ID0gY29uZmlnO1xuY29uc3QgcHJlZml4Q2xzID0gX3ByZWZpeENscyArICctY29tYmluZSc7XG5cbmV4cG9ydCBjb25zdCBpdGVtQ2xzID0gcHJlZml4Q2xzICsgJy1pdGVtJztcbmV4cG9ydCBjb25zdCBzZXBhcmF0b3JDbHMgPSBwcmVmaXhDbHMgKyAnLXNlcGFyYXRvcic7XG5cbmNvbnN0IHNwYWNpbmdNYXAgPSB7XG4gICAgc206ICdUX1NQQUNJTkdfQ09NTU9OX1hTJyBhcyBEZXNpZ25Ub2tlbixcbiAgICBtZDogJ1RfU1BBQ0lOR19DT01NT05fU00nIGFzIERlc2lnblRva2VuLFxuICAgIGxnOiAnVF9TUEFDSU5HX0NPTU1PTl9NRCcgYXMgRGVzaWduVG9rZW5cbn07XG5cbmNvbnN0IGlzQnVpbGRJblNwYWNpbmcgPSAoc3BhY2luZzogc3RyaW5nKTogc3BhY2luZyBpcyBrZXlvZiB0eXBlb2Ygc3BhY2luZ01hcCA9PiB7XG4gICAgcmV0dXJuIE9iamVjdC5wcm90b3R5cGUuaGFzT3duUHJvcGVydHkuY2FsbChzcGFjaW5nTWFwLCBzcGFjaW5nKTtcbn07XG5cbmV4cG9ydCBjb25zdCBDb21iaW5lV3JhcCA9IHN0eWxlZFdyYXA8eyBzcGFjaW5nOiBzdHJpbmcgfT4oe1xuICAgIGNsYXNzTmFtZTogcHJlZml4Q2xzXG59KShcbiAgICBzdHlsZWQoJ2RpdicpKHByb3BzID0+IHtcbiAgICAgICAgY29uc3Qge1xuICAgICAgICAgICAgc3BhY2luZyxcbiAgICAgICAgICAgIHRoZW1lOiB7IGRlc2lnblRva2VuczogRFQgfVxuICAgICAgICB9ID0gcHJvcHM7XG4gICAgICAgIGxldCBzcGFjZTogc3RyaW5nO1xuICAgICAgICBpZiAoc3BhY2luZyA9PT0gJ2NvbXBhY3QnKSB7XG4gICAgICAgICAgICBzcGFjZSA9ICctMXB4JztcbiAgICAgICAgfSBlbHNlIGlmIChpc0J1aWxkSW5TcGFjaW5nKHNwYWNpbmcpKSB7XG4gICAgICAgICAgICBzcGFjZSA9IERUW3NwYWNpbmdNYXBbc3BhY2luZ11dO1xuICAgICAgICB9IGVsc2Uge1xuICAgICAgICAgICAgc3BhY2UgPSBzcGFjaW5nO1xuICAgICAgICB9XG5cbiAgICAgICAgcmV0dXJuIGNzc2BcbiAgICAgICAgICAgID4gLiR7aXRlbUNsc30sID4gLiR7c2VwYXJhdG9yQ2xzfSB7XG4gICAgICAgICAgICAgICAgdmVydGljYWwtYWxpZ246IG1pZGRsZTtcbiAgICAgICAgICAgICAgICBkaXNwbGF5OiBpbmxpbmUtYmxvY2s7XG4gICAgICAgICAgICB9XG4gICAgICAgICAgICA+IC4ke2l0ZW1DbHN9IHtcbiAgICAgICAgICAgICAgICAmOmZvY3VzIHtcbiAgICAgICAgICAgICAgICAgICAgei1pbmRleDogMjtcbiAgICAgICAgICAgICAgICB9XG4gICAgICAgICAgICAgICAgJjpob3ZlciB7XG4gICAgICAgICAgICAgICAgICAgIHotaW5kZXg6IDM7XG4gICAgICAgICAgICAgICAgfVxuICAgICAgICAgICAgfVxuICAgICAgICAgICAgPiAuJHtpdGVtQ2xzfSsuJHtpdGVtQ2xzfSwgPiAuJHtzZXBhcmF0b3JDbHN9Ky4ke2l0ZW1DbHN9LCA+IC4ke2l0ZW1DbHN9Ky4ke3NlcGFyYXRvckNsc30ge1xuICAgICAgICAgICAgICAgIG1hcmdpbi1sZWZ0OiAke3NwYWNlfTtcbiAgICAgICAgICAgIH1cbiAgICAgICAgYDtcbiAgICB9KVxuKTtcbiJdfQ== */"));
+exports.CombineWrap = CombineWrap;

package/lib/components/Compact/Compact.js

@@ -0,0 +1,108 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _typeof = require("@babel/runtime/helpers/typeof");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _Combine = _interopRequireDefault(require("../../components/Combine"));
+
+var _deprecatedLog = _interopRequireDefault(require("../../utils/deprecatedLog"));
+
+var _style = require("./style");
+
+var _excluded = ["className", "sharedProps"];
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+var deprecatedLogForReplace = (0, _deprecatedLog.default)('Compact', 'Combine(spacing="compact")');
+/**
+ * @deprecated 请使用 Combine 替代
+ */
+
+var Compact = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Compact, _Component);
+
+  var _super = _createSuper(Compact);
+
+  function Compact(props) {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Compact);
+    _this = _super.call(this, props);
+    deprecatedLogForReplace();
+    return _this;
+  }
+
+  (0, _createClass2.default)(Compact, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          className = _this$props.className,
+          sharedProps = _this$props.sharedProps,
+          rest = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
+      var controllerClassName = sharedProps.className;
+      return /*#__PURE__*/_react.default.createElement(_Combine.default, (0, _extends2.default)({
+        spacing: "compact",
+        sharedProps: _objectSpread(_objectSpread({}, sharedProps), {}, {
+          className: (0, _classnames.default)(controllerClassName, _style.controllerPrefix)
+        })
+      }, rest, {
+        className: (0, _classnames.default)(_style.prefixCls, className)
+      }));
+    }
+  }]);
+  return Compact;
+}(_react.Component);
+
+Compact.propTypes = {
+  /** @ignore */
+  children: _propTypes.default.node,
+
+  /** @ignore */
+  className: _propTypes.default.string,
+
+  /** 组件共享的props，如size、className、style等 */
+  sharedProps: _propTypes.default.object
+};
+Compact.defaultProps = {
+  sharedProps: {}
+};
+var _default = Compact;
+exports.default = _default;

package/lib/components/Compact/index.js

@@ -0,0 +1,13 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _Compact = _interopRequireDefault(require("./Compact"));
+
+var _default = _Compact.default;
+exports.default = _default;