@qsxy/element-plus-react 1.0.2 → 2.0.0

package/dist/Popper/Popper.js

@@ -1,6 +1,6 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _templateObject;
-var _excluded = ["visible", "onDestroy", "referenceElement", "children", "appendToBody", "appendTo", "className", "popperClass", "showArrow", "popperStyle", "popperInstRef", "onMouseEnter", "onMouseLeave", "effect"];
+var _templateObject, _templateObject2;
+var _excluded = ["visible", "onDestroy", "referenceElement", "children", "appendToBody", "appendTo", "className", "popperClass", "showArrow", "popperStyle", "popperInstRef", "onMouseEnter", "onMouseLeave", "effect", "disableTransition"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
@@ -37,7 +37,8 @@ var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     popperClass: '',
     showArrow: true,
     gpuAcceleration: false,
-    strategy: 'absolute'
+    strategy: 'absolute',
+    disableTransition: false
   }, props);
   var _props = props,
     visible = _props.visible,
@@ -56,6 +57,7 @@ var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     onMouseLeave = _props.onMouseLeave,
     _props$effect = _props.effect,
     effect = _props$effect === void 0 ? 'light' : _props$effect,
+    disableTransition = _props.disableTransition,
     rest = _objectWithoutProperties(_props, _excluded);
   var _partitionAnimationPr = partitionAnimationProps(rest),
     _partitionAnimationPr2 = _slicedToArray(_partitionAnimationPr, 1),
@@ -141,31 +143,50 @@ var Popper = /*#__PURE__*/forwardRef(function (props, ref) {
     };
   });
   var content = useMemo(function () {
-    return /*#__PURE__*/React.createElement(Transition, _extends({
-      nodeRef: {
-        current: popperElement
-      },
-      visible: visible,
-      name: animation,
-      className: className,
-      afterLeave: afterLeave
-    }, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
-      id: "".concat(namespace, "-popper-").concat(id),
-      className: classNames(b(), is(effect), popperClass),
-      onMouseEnter: onMouseEnter,
-      onMouseLeave: onMouseLeave,
-      style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), popperStyle), {}, {
-        zIndex: zIndex
-      })
-    }, attributes.popper, {
-      ref: setPopperElement
-    }), props.children, showArrow ? /*#__PURE__*/React.createElement("div", {
-      className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["arrow"]))),
-      "data-popper-arrow": true,
-      ref: setArrowElement,
-      style: _objectSpread({}, styles.arrow)
-    }) : null));
-  }, [afterLeave, animation, attributes.popper, b, className, e, effect, id, is, onMouseEnter, onMouseLeave, popperClass, popperElement, popperStyle, props.children, showArrow, styles.arrow, styles.popper, transitionProps, visible, zIndex]);
+    if (disableTransition) {
+      return visible ? /*#__PURE__*/React.createElement("div", _extends({
+        id: "".concat(namespace, "-popper-").concat(id),
+        className: classNames(b(), is(effect), popperClass),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), popperStyle), {}, {
+          zIndex: zIndex
+        })
+      }, attributes.popper, {
+        ref: setPopperElement
+      }), props.children, showArrow ? /*#__PURE__*/React.createElement("div", {
+        className: e(_templateObject || (_templateObject = _taggedTemplateLiteral(["arrow"]))),
+        "data-popper-arrow": true,
+        ref: setArrowElement,
+        style: _objectSpread({}, styles.arrow)
+      }) : null) : null;
+    } else {
+      return /*#__PURE__*/React.createElement(Transition, _extends({
+        nodeRef: {
+          current: popperElement
+        },
+        visible: visible,
+        name: animation,
+        className: className,
+        afterLeave: afterLeave
+      }, transitionProps), /*#__PURE__*/React.createElement("div", _extends({
+        id: "".concat(namespace, "-popper-").concat(id),
+        className: classNames(b(), is(effect), popperClass),
+        onMouseEnter: onMouseEnter,
+        onMouseLeave: onMouseLeave,
+        style: _objectSpread(_objectSpread(_objectSpread({}, styles.popper), popperStyle), {}, {
+          zIndex: zIndex
+        })
+      }, attributes.popper, {
+        ref: setPopperElement
+      }), props.children, showArrow ? /*#__PURE__*/React.createElement("div", {
+        className: e(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["arrow"]))),
+        "data-popper-arrow": true,
+        ref: setArrowElement,
+        style: _objectSpread({}, styles.arrow)
+      }) : null));
+    }
+  }, [afterLeave, animation, attributes.popper, b, className, disableTransition, e, effect, id, is, onMouseEnter, onMouseLeave, popperClass, popperElement, popperStyle, props.children, showArrow, styles.arrow, styles.popper, transitionProps, visible, zIndex]);
   return appendToBody ? /*#__PURE__*/createPortal(content, appendTo) : content;
   // <Transition visible={visible} name={animation} className={className} afterLeave={afterLeave} {...transitionProps}>
   //     {Children.toArray(props.children).map(child => {

package/dist/Popper/popperOptions.js

@@ -133,6 +133,7 @@ export function buildModifier(props) {
         // the arrow size is an equailateral triangle with 10px side length, the 3rd side length ~ 14.1px
         // adding a offset to the ceil of 4.1 should be 5 this resolves the problem of arrow overflowing out of popper.
         padding: arrowOffset !== null && arrowOffset !== void 0 ? arrowOffset : 10
+        // padding: ({ popper, reference, placement }) => popper.width / reference.width,
       }
     });
   }

package/dist/Popper/typings.d.ts

@@ -41,6 +41,8 @@ export type PopperProps = {
         current: VirtualElement;
     });
     onDestroy: () => void;
+    /** 是否禁用过渡动画 */
+    disableTransition?: boolean;
 } & Partial<{
     id?: string;
     children: ComponentChildren;

package/dist/Radio/Radio.d.ts

@@ -1,14 +1,4 @@
-import React, { RefObject } from 'react';
-import RadioButton from './RadioButton';
+import React from 'react';
 import { RadioProps, RadioRef } from './typings';
-declare const Comp: (props: RadioProps & {
-    ref?: RefObject<RadioRef>;
-}) => React.ReactElement;
-type InternalType = typeof Comp;
-interface CompInterface extends InternalType {
-    displayName?: string;
-    defaultProps?: RadioProps;
-    Button: typeof RadioButton;
-}
-declare const Radio: CompInterface;
+declare const Radio: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioProps<import("./typings").ValueType> & React.RefAttributes<RadioRef>>>;
 export default Radio;

package/dist/Radio/Radio.js

@@ -19,8 +19,7 @@ import React, { forwardRef, memo, useCallback, useContext, useImperativeHandle,
 import { partitionHTMLProps, useClassNames, useControlled, useDisabled, useSize } from "../hooks";
 import { RadioContext } from "../RadioGroup/RadioGroup";
 import Tooltip from "../Tooltip/Tooltip";
-import RadioButton from "./RadioButton";
-var InternalRadio = function InternalRadio(props, ref) {
+var Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   var _useContext = useContext(RadioContext),
     groupValue = _useContext.value,
     nameContext = _useContext.name,
@@ -160,9 +159,6 @@ var InternalRadio = function InternalRadio(props, ref) {
   return title ? /*#__PURE__*/React.createElement(Tooltip, {
     content: title
   }, main) : main;
-};
-var Comp = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(InternalRadio));
-var Radio = Comp;
-Radio.Button = RadioButton;
+}));
 Radio.displayName = 'ElRadio';
 export default Radio;

package/dist/Radio/RadioButton.d.ts

@@ -1,4 +1,4 @@
 import React from 'react';
 import { RadioProps, RadioRef } from './typings';
-declare const RadioButton: React.ForwardRefExoticComponent<RadioProps<import("./typings").ValueType> & React.RefAttributes<RadioRef>>;
+declare const RadioButton: React.MemoExoticComponent<React.ForwardRefExoticComponent<RadioProps<import("./typings").ValueType> & React.RefAttributes<RadioRef>>>;
 export default RadioButton;

package/dist/Radio/RadioButton.js

@@ -15,10 +15,10 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from 'classnames';
-import React, { forwardRef, useCallback, useContext, useImperativeHandle, useRef } from 'react';
+import React, { forwardRef, memo, useCallback, useContext, useImperativeHandle, useRef } from 'react';
 import { RadioContext } from "../RadioGroup/RadioGroup";
 import { partitionHTMLProps, useClassNames, useControlled, useDisabled, useSize } from "../hooks";
-var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
+var RadioButton = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
   var _useContext = useContext(RadioContext),
     groupValue = _useContext.value,
     nameContext = _useContext.name,
@@ -138,6 +138,6 @@ var RadioButton = /*#__PURE__*/forwardRef(function (props, ref) {
       handleChange === null || handleChange === void 0 || handleChange(event);
     }
   }, children));
-});
-RadioButton.displayName = 'ElRadio.Button';
+}));
+RadioButton.displayName = 'ElRadioButton';
 export default RadioButton;

package/dist/Radio/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Radio } from './Radio';
+export { default as RadioButton } from './RadioButton';
 export type { RadioProps, ValueType } from './typings';

package/dist/Radio/index.js

@@ -1 +1,2 @@
-export { default as Radio } from "./Radio";
+export { default as Radio } from "./Radio";
+export { default as RadioButton } from "./RadioButton";

package/dist/Radio/typings.d.ts

@@ -7,7 +7,7 @@ export type RadioRef = {
     isChcked: () => boolean;
     setChecked: (value: boolean) => void;
 };
-export interface RadioProps<T = ValueType> extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'style' | 'children'>, Omit<FormControlBaseProps<T>, 'onChange'>, BaseProps, NativeProps {
+export interface RadioProps<T = ValueType> extends Omit<React.AllHTMLAttributes<HTMLInputElement>, 'size' | 'prefix' | 'type' | 'value' | 'defaultValue' | 'onChange' | 'style' | 'children'>, Omit<FormControlBaseProps<T>, 'onChange'>, BaseProps, NativeProps<'--el-radio-text-color' | '--el-radio-input-height' | '--el-radio-input-width' | '--el-radio-input-bg-color' | '--el-radio-input-border-color' | '--el-radio-input-border-color-hover'> {
     /** tooltip 提示*/
     title?: string;
     /** 是否只读 */

package/dist/RadioGroup/RadioGroup.js

@@ -1,5 +1,5 @@
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["className", "children", "classPrefix", "value", "defaultValue", "appearance", "name", "readOnly", "onChange"];
+var _excluded = ["className", "children", "classPrefix", "value", "defaultValue", "appearance", "name", "readOnly", "options", "onChange"];
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
 function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
@@ -12,23 +12,30 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 import classNames from 'classnames';
-import React, { createContext, forwardRef, useCallback, useMemo } from 'react';
-import { isNotEmpty, randomCode } from "../Util";
+import React, { Children, createContext, forwardRef, useCallback, useMemo } from 'react';
+import { Radio } from "../Radio";
+import { isNotEmpty, mergeDefaultProps, randomCode } from "../Util";
 import { useClassNames, useControlled, useDisabled, useSize } from "../hooks";
 export var RadioContext = /*#__PURE__*/createContext({});
 var RadioGroup = /*#__PURE__*/forwardRef(function (props, ref) {
-  var className = props.className,
-    children = props.children,
-    _props$classPrefix = props.classPrefix,
+  props = mergeDefaultProps({
+    appearance: 'default',
+    props: {},
+    options: []
+  }, props);
+  var _props = props,
+    className = _props.className,
+    children = _props.children,
+    _props$classPrefix = _props.classPrefix,
     classPrefix = _props$classPrefix === void 0 ? 'radio-group' : _props$classPrefix,
-    valueProp = props.value,
-    defaultValue = props.defaultValue,
-    _props$appearance = props.appearance,
-    appearance = _props$appearance === void 0 ? 'default' : _props$appearance,
-    name = props.name,
-    readOnly = props.readOnly,
-    onChange = props.onChange,
-    rest = _objectWithoutProperties(props, _excluded);
+    valueProp = _props.value,
+    defaultValue = _props.defaultValue,
+    appearance = _props.appearance,
+    name = _props.name,
+    readOnly = _props.readOnly,
+    options = _props.options,
+    onChange = _props.onChange,
+    rest = _objectWithoutProperties(_props, _excluded);
   var _useClassNames = useClassNames(classPrefix),
     wb = _useClassNames.wb,
     m = _useClassNames.m;
@@ -39,6 +46,11 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (props, ref) {
     isControlled = _useControlled2[2];
   var disabled = useDisabled(props.disabled);
   var size = useSize(props.size);
+  var aliasProps = mergeDefaultProps({
+    value: 'value',
+    label: 'label',
+    disabled: 'disabled'
+  }, props.props);
   var handleChange = useCallback(function (nextValue, event) {
     setValue(nextValue);
     onChange === null || onChange === void 0 || onChange(nextValue, event);
@@ -54,13 +66,29 @@ var RadioGroup = /*#__PURE__*/forwardRef(function (props, ref) {
       onChange: handleChange
     };
   }, [disabled, handleChange, isControlled, name, readOnly, size, value]);
+  var optionChilds = useMemo(function () {
+    if (Children.count(children) > 0) {
+      return children;
+    }
+    if (options.length > 0) {
+      var radios = options.map(function (item) {
+        return /*#__PURE__*/React.createElement(Radio, {
+          key: item[aliasProps.value],
+          value: item[aliasProps.value],
+          disabled: item[aliasProps.disabled]
+        }, item[aliasProps.label]);
+      });
+      return radios;
+    }
+    return children;
+  }, [children, options, aliasProps.disabled, aliasProps.label, aliasProps.value]);
   return /*#__PURE__*/React.createElement(RadioContext.Provider, {
     value: contextValue
   }, /*#__PURE__*/React.createElement("div", {
     /* {...omit(rest, ['disabled', 'size', 'error', 'warning'])} */ref: ref,
     className: classNames(className, wb(appearance), m(_defineProperty({}, size, size))),
     style: props.style
-  }, children));
+  }, optionChilds));
 });
-RadioGroup.displayName = 'ElRadio.Group';
+RadioGroup.displayName = 'ElRadioGroup';
 export default RadioGroup;

package/dist/RadioGroup/typings.d.ts

@@ -15,4 +15,14 @@ export interface RadioContextProps {
 export interface RadioGroupProps extends FormControlBaseProps, BaseProps, NativeProps {
     appearance?: 'default' | 'picker';
     name?: string;
+    /** 选项的数据源， value 的 key 和 label 和  disabled可以通过 props自定义. */
+    options?: Array<{
+        [key: string]: any;
+    }>;
+    /** options 的配置 */
+    props?: {
+        value?: string;
+        label?: string;
+        disabled?: string;
+    };
 }

package/dist/Segmented/Segmented.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Option, SegmentedComponentProps } from './typings';
+declare const Segmented: React.MemoExoticComponent<React.ForwardRefExoticComponent<SegmentedComponentProps<Option> & React.RefAttributes<any>>>;
+export default Segmented;

package/dist/Segmented/Segmented.js

@@ -0,0 +1,208 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure 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; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+import classNames from 'classnames';
+import isObject from 'lodash/isObject';
+import React, { forwardRef, memo, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
+import { useClassNames, useControlled, useDisabled, useSize } from "../hooks";
+import { useResizeObserver } from "../hooks/useResizeObserver";
+import { defaultProps as defaultAliasProps } from "./typings";
+var Segmented = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (props, ref) {
+  var _props$direction = props.direction,
+    direction = _props$direction === void 0 ? 'horizontal' : _props$direction,
+    size = props.size,
+    disabled = props.disabled,
+    options = props.options,
+    block = props.block,
+    id = props.id,
+    nameProp = props.name,
+    ariaLabel = props.ariaLabel,
+    onChange = props.onChange,
+    className = props.className,
+    style = props.style,
+    children = props.children;
+  var ns = useClassNames('segmented');
+  var segmentedSize = useSize(size);
+  var _disabled = useDisabled(disabled);
+  var segmentedRef = useRef(null);
+  var _useState = useState({
+      isInit: false,
+      width: 0,
+      height: 0,
+      translateX: 0,
+      translateY: 0,
+      focusVisible: false
+    }),
+    _useState2 = _slicedToArray(_useState, 2),
+    indicator = _useState2[0],
+    setIndicator = _useState2[1];
+  var _useControlled = useControlled(props.value, props.defaultValue),
+    _useControlled2 = _slicedToArray(_useControlled, 2),
+    value = _useControlled2[0],
+    setValue = _useControlled2[1];
+  var aliasProps = useMemo(function () {
+    return _objectSpread(_objectSpread({}, defaultAliasProps), props.props);
+  }, [props.props]);
+  var getValue = useCallback(function (item) {
+    return isObject(item) ? item[aliasProps.value] : item;
+  }, [aliasProps.value]);
+  var getLabel = useCallback(function (item) {
+    return isObject(item) ? item[aliasProps.label] : item;
+  }, [aliasProps.label]);
+  var getDisabled = useCallback(function (item) {
+    return !!(_disabled || (isObject(item) ? item[aliasProps.disabled] : false));
+  }, [_disabled, aliasProps.disabled]);
+  var getSelected = useCallback(function (item) {
+    return value === getValue(item);
+  }, [value, getValue]);
+  var getOption = useCallback(function (val) {
+    return options.find(function (item) {
+      return getValue(item) === val;
+    });
+  }, [options, getValue]);
+  var updateSelect = useCallback(function () {
+    if (!segmentedRef.current) {
+      return;
+    }
+    var selectedItem = segmentedRef.current.querySelector('.is-selected');
+    var selectedItemInput = segmentedRef.current.querySelector('.is-selected input');
+    if (!selectedItem || !selectedItemInput) {
+      setIndicator(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          width: 0,
+          height: 0,
+          translateX: 0,
+          translateY: 0,
+          focusVisible: false
+        });
+      });
+      return;
+    }
+    setIndicator(function (prev) {
+      return _objectSpread(_objectSpread({}, prev), {}, {
+        isInit: true
+      });
+    });
+    var focusVisible = false;
+    try {
+      focusVisible = selectedItemInput.matches(':focus-visible');
+    } catch (_unused) {
+      //
+    }
+    if (direction === 'vertical') {
+      setIndicator(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          height: selectedItem.offsetHeight,
+          translateY: selectedItem.offsetTop,
+          focusVisible: focusVisible
+        });
+      });
+    } else {
+      setIndicator(function (prev) {
+        return _objectSpread(_objectSpread({}, prev), {}, {
+          width: selectedItem.offsetWidth,
+          translateX: selectedItem.offsetLeft
+        });
+      });
+    }
+  }, [direction]);
+  var handleChange = useCallback(function (evt, item) {
+    var newValue = getValue(item);
+    setValue(newValue);
+    onChange === null || onChange === void 0 || onChange(newValue);
+    evt.target.checked = value === newValue;
+  }, [getValue, setValue, onChange, value]);
+  var selectedStyle = useMemo(function () {
+    if (direction === 'vertical') {
+      return {
+        width: '100%',
+        height: "".concat(indicator.height, "px"),
+        transform: "translateY(".concat(indicator.translateY, "px)"),
+        display: indicator.isInit ? 'block' : 'none'
+      };
+    }
+    return {
+      width: "".concat(indicator.width, "px"),
+      height: '100%',
+      transform: "translateX(".concat(indicator.translateX, "px)"),
+      display: indicator.isInit ? 'block' : 'none'
+    };
+  }, [direction, indicator]);
+  var segmentedCls = classNames(ns.b(), ns.m(segmentedSize), ns.is({
+    block: block
+  }), className);
+  var selectedCls = classNames(ns.e('item-selected'), ns.is({
+    disabled: getDisabled(getOption(value))
+  }), ns.is({
+    'focus-visible': indicator.focusVisible
+  }));
+  var name = nameProp || id;
+  var domId = id;
+  useResizeObserver(segmentedRef, updateSelect);
+  useEffect(function () {
+    updateSelect();
+  }, [options]);
+  useEffect(function () {
+    updateSelect();
+  }, [value]);
+  useImperativeHandle(ref, function () {
+    return {
+      updateSelect: updateSelect
+    };
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    id: domId,
+    ref: segmentedRef,
+    className: segmentedCls,
+    role: "radiogroup",
+    "aria-label": ariaLabel || 'segmented',
+    style: style
+  }, /*#__PURE__*/React.createElement("div", {
+    className: classNames(ns.e('group'), ns.m(direction))
+  }, /*#__PURE__*/React.createElement("div", {
+    style: selectedStyle,
+    className: selectedCls
+  }), options.map(function (item, index) {
+    var value = getValue(item);
+    var label = getLabel(item);
+    if (children) {
+      if (children && typeof children === 'function') {
+        label = children(item);
+      } else {
+        label = children;
+      }
+    }
+    var isDisabled = getDisabled(item);
+    var isSelected = getSelected(item);
+    var itemCls = classNames(ns.e('item'), ns.is({
+      selected: isSelected,
+      disabled: isDisabled
+    }));
+    return /*#__PURE__*/React.createElement("label", {
+      key: index,
+      className: itemCls
+    }, /*#__PURE__*/React.createElement("input", {
+      className: ns.e('item-input'),
+      type: "radio",
+      name: name,
+      disabled: isDisabled,
+      checked: isSelected,
+      onChange: function onChange(e) {
+        return handleChange(e, item);
+      }
+    }), /*#__PURE__*/React.createElement("div", {
+      className: ns.e('item-label')
+    }, label));
+  })));
+}));
+Segmented.displayName = 'ElSegmented';
+export default Segmented;

package/dist/Segmented/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Segmented } from './Segmented';
+export type { Option, SegmentedComponentProps, SegmentedProps } from './typings';

package/dist/Segmented/index.js

@@ -0,0 +1 @@
+export { default as Segmented } from "./Segmented";

package/dist/Segmented/typings.d.ts

@@ -0,0 +1,20 @@
+import { ReactElement } from 'react';
+import { BaseProps, FormControlBaseProps, NativeProps } from '../types/common';
+export type Option = Record<string, any> | string | number | boolean;
+export interface SegmentedProps {
+    label?: string;
+    value?: string;
+    disabled?: string;
+}
+export declare const defaultProps: Required<SegmentedProps>;
+export interface SegmentedComponentProps<T extends Option = Option> extends BaseProps<ReactElement | ReactElement[] | ((data: T) => ReactElement | ReactElement[])>, NativeProps<'--el-segmented-color' | '--el-segmented-bg-color' | '--el-segmented-padding' | '--el-segmented-item-selected-color' | '--el-segmented-item-selected-bg-color' | '--el-segmented-item-selected-disabled-bg-color' | '--el-segmented-item-hover-color' | '--el-segmented-item-hover-bg-color' | '--el-segmented-item-active-bg-color' | '--el-segmented-item-disabled-color'>, FormControlBaseProps<string | number | boolean> {
+    direction?: 'vertical' | 'horizontal';
+    options?: T[];
+    props?: SegmentedProps;
+    block?: boolean;
+    validateEvent?: boolean;
+    id?: string;
+    name?: string;
+    ariaLabel?: string;
+    onChange?: (val: string | number | boolean) => void;
+}

package/dist/Segmented/typings.js

@@ -0,0 +1,5 @@
+export var defaultProps = {
+  label: 'label',
+  value: 'value',
+  disabled: 'disabled'
+};

package/dist/Select/SelectContext.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import { RefObject } from 'react';
 import { OptionData, OptionValue, ValueType } from './typings';
 export interface SelectContextProps {
     value: ValueType;
@@ -6,5 +6,6 @@ export interface SelectContextProps {
     setHover: (value: ValueType) => void;
     onChoose: (value: OptionValue, data: OptionData, e: any) => void;
     multiple: boolean;
+    cachedOptions: RefObject<Map<OptionValue, OptionData>>;
 }
 export declare const SelectContext: import("react").Context<SelectContextProps>;

package/dist/Select/SelectContext.js

@@ -5,5 +5,6 @@ export var SelectContext = /*#__PURE__*/createContext({
   hover: '',
   setHover: noop,
   onChoose: noop,
-  multiple: false
+  multiple: false,
+  cachedOptions: null
 });