@aloudata/aloudata-design 0.2.7 → 0.3.0-beta.1

package/es/Select/rc-select/SelectTrigger.js

@@ -0,0 +1,136 @@
+var _excluded = ["prefixCls", "disabled", "visible", "children", "popupElement", "containerWidth", "animation", "transitionName", "dropdownStyle", "dropdownClassName", "direction", "placement", "dropdownMatchSelectWidth", "dropdownRender", "dropdownAlign", "getPopupContainer", "empty", "getTriggerDOMNode", "onPopupVisibleChange", "onPopupMouseEnter"];
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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; }
+
+// @ts-nocheck
+import * as React from 'react';
+import Trigger from 'rc-trigger';
+import classNames from 'classnames';
+
+var getBuiltInPlacements = function getBuiltInPlacements(dropdownMatchSelectWidth) {
+  // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
+  var adjustX = dropdownMatchSelectWidth === true ? 0 : 1;
+  return {
+    bottomLeft: {
+      points: ['tl', 'bl'],
+      offset: [0, 4],
+      overflow: {
+        adjustX: adjustX,
+        adjustY: 1
+      }
+    },
+    bottomRight: {
+      points: ['tr', 'br'],
+      offset: [0, 4],
+      overflow: {
+        adjustX: adjustX,
+        adjustY: 1
+      }
+    },
+    topLeft: {
+      points: ['bl', 'tl'],
+      offset: [0, -4],
+      overflow: {
+        adjustX: adjustX,
+        adjustY: 1
+      }
+    },
+    topRight: {
+      points: ['br', 'tr'],
+      offset: [0, -4],
+      overflow: {
+        adjustX: adjustX,
+        adjustY: 1
+      }
+    }
+  };
+};
+
+var SelectTrigger = function SelectTrigger(props, ref) {
+  var prefixCls = props.prefixCls,
+      disabled = props.disabled,
+      visible = props.visible,
+      children = props.children,
+      popupElement = props.popupElement,
+      containerWidth = props.containerWidth,
+      animation = props.animation,
+      transitionName = props.transitionName,
+      dropdownStyle = props.dropdownStyle,
+      dropdownClassName = props.dropdownClassName,
+      _props$direction = props.direction,
+      direction = _props$direction === void 0 ? 'ltr' : _props$direction,
+      placement = props.placement,
+      dropdownMatchSelectWidth = props.dropdownMatchSelectWidth,
+      dropdownRender = props.dropdownRender,
+      dropdownAlign = props.dropdownAlign,
+      getPopupContainer = props.getPopupContainer,
+      empty = props.empty,
+      getTriggerDOMNode = props.getTriggerDOMNode,
+      onPopupVisibleChange = props.onPopupVisibleChange,
+      onPopupMouseEnter = props.onPopupMouseEnter,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var dropdownPrefixCls = "".concat(prefixCls, "-dropdown");
+  var popupNode = popupElement;
+
+  if (dropdownRender) {
+    popupNode = dropdownRender(popupElement);
+  }
+
+  var builtInPlacements = React.useMemo(function () {
+    return getBuiltInPlacements(dropdownMatchSelectWidth);
+  }, [dropdownMatchSelectWidth]); // ===================== Motion ======================
+
+  var mergedTransitionName = animation ? "".concat(dropdownPrefixCls, "-").concat(animation) : transitionName; // ======================= Ref =======================
+
+  var popupRef = React.useRef(null);
+  React.useImperativeHandle(ref, function () {
+    return {
+      getPopupElement: function getPopupElement() {
+        return popupRef.current;
+      }
+    };
+  });
+
+  var popupStyle = _objectSpread({
+    minWidth: containerWidth
+  }, dropdownStyle);
+
+  if (typeof dropdownMatchSelectWidth === 'number') {
+    popupStyle.width = dropdownMatchSelectWidth;
+  } else if (dropdownMatchSelectWidth) {
+    popupStyle.width = containerWidth;
+  }
+
+  return /*#__PURE__*/React.createElement(Trigger, Object.assign({}, restProps, {
+    showAction: onPopupVisibleChange ? ['click'] : [],
+    hideAction: onPopupVisibleChange ? ['click'] : [],
+    popupPlacement: placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft'),
+    builtinPlacements: builtInPlacements,
+    prefixCls: dropdownPrefixCls,
+    popupTransitionName: mergedTransitionName,
+    popup: /*#__PURE__*/React.createElement("div", {
+      ref: popupRef,
+      onMouseEnter: onPopupMouseEnter
+    }, popupNode),
+    popupAlign: dropdownAlign,
+    popupVisible: visible,
+    getPopupContainer: getPopupContainer,
+    popupClassName: classNames(dropdownClassName, _defineProperty({}, "".concat(dropdownPrefixCls, "-empty"), empty), 'ald-select-dropdown'),
+    popupStyle: popupStyle,
+    getTriggerDOMNode: getTriggerDOMNode,
+    onPopupVisibleChange: onPopupVisibleChange
+  }), children);
+};
+
+var RefSelectTrigger = /*#__PURE__*/React.forwardRef(SelectTrigger);
+RefSelectTrigger.displayName = 'SelectTrigger';
+export default RefSelectTrigger;

package/es/Select/rc-select/Selector/Input.d.ts

@@ -0,0 +1,26 @@
+import * as React from 'react';
+declare type InputRef = HTMLInputElement | HTMLTextAreaElement;
+interface InputProps {
+    prefixCls: string;
+    id: string;
+    inputElement: React.ReactElement;
+    disabled: boolean;
+    autoFocus: boolean;
+    autoComplete: string;
+    editable: boolean;
+    activeDescendantId?: string;
+    value: string;
+    maxLength?: number;
+    open: boolean;
+    tabIndex: number;
+    /** Pass accessibility props to input */
+    attrs: Record<string, unknown>;
+    onKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+    onMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+    onChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+    onPaste: React.ClipboardEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+    onCompositionStart: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+    onCompositionEnd: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement | HTMLElement>;
+}
+declare const RefInput: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<InputRef>>;
+export default RefInput;

package/es/Select/rc-select/Selector/Input.js

@@ -0,0 +1,114 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+// @ts-nocheck
+import * as React from 'react';
+import classNames from 'classnames';
+import { composeRef } from 'rc-util/lib/ref';
+import { warning } from 'rc-util/lib/warning';
+
+var Input = function Input(_ref, ref) {
+  var _inputNode2, _inputNode2$props;
+
+  var prefixCls = _ref.prefixCls,
+      id = _ref.id,
+      inputElement = _ref.inputElement,
+      disabled = _ref.disabled,
+      tabIndex = _ref.tabIndex,
+      autoFocus = _ref.autoFocus,
+      autoComplete = _ref.autoComplete,
+      editable = _ref.editable,
+      activeDescendantId = _ref.activeDescendantId,
+      value = _ref.value,
+      maxLength = _ref.maxLength,
+      _onKeyDown = _ref.onKeyDown,
+      _onMouseDown = _ref.onMouseDown,
+      _onChange = _ref.onChange,
+      onPaste = _ref.onPaste,
+      _onCompositionStart = _ref.onCompositionStart,
+      _onCompositionEnd = _ref.onCompositionEnd,
+      open = _ref.open,
+      attrs = _ref.attrs;
+  var inputNode = inputElement || /*#__PURE__*/React.createElement("input", null);
+  var _inputNode = inputNode,
+      originRef = _inputNode.ref,
+      originProps = _inputNode.props;
+  var onOriginKeyDown = originProps.onKeyDown,
+      onOriginChange = originProps.onChange,
+      onOriginMouseDown = originProps.onMouseDown,
+      onOriginCompositionStart = originProps.onCompositionStart,
+      onOriginCompositionEnd = originProps.onCompositionEnd,
+      style = originProps.style;
+  warning(!('maxLength' in inputNode.props), "Passing 'maxLength' to input element directly may not work because input in BaseSelect is controlled.");
+  inputNode = /*#__PURE__*/React.cloneElement(inputNode, _objectSpread(_objectSpread(_objectSpread({
+    type: 'search'
+  }, originProps), {}, {
+    // Override over origin props
+    id: id,
+    ref: composeRef(ref, originRef),
+    disabled: disabled,
+    tabIndex: tabIndex,
+    autoComplete: autoComplete || 'off',
+    autoFocus: autoFocus,
+    className: classNames("".concat(prefixCls, "-selection-search-input"), (_inputNode2 = inputNode) === null || _inputNode2 === void 0 ? void 0 : (_inputNode2$props = _inputNode2.props) === null || _inputNode2$props === void 0 ? void 0 : _inputNode2$props.className),
+    role: 'combobox',
+    'aria-expanded': open,
+    'aria-haspopup': 'listbox',
+    'aria-owns': "".concat(id, "_list"),
+    'aria-autocomplete': 'list',
+    'aria-controls': "".concat(id, "_list"),
+    'aria-activedescendant': activeDescendantId
+  }, attrs), {}, {
+    value: editable ? value : '',
+    maxLength: maxLength,
+    readOnly: !editable,
+    unselectable: !editable ? 'on' : null,
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      opacity: editable ? null : 0
+    }),
+    onKeyDown: function onKeyDown(event) {
+      _onKeyDown(event);
+
+      if (onOriginKeyDown) {
+        onOriginKeyDown(event);
+      }
+    },
+    onMouseDown: function onMouseDown(event) {
+      _onMouseDown(event);
+
+      if (onOriginMouseDown) {
+        onOriginMouseDown(event);
+      }
+    },
+    onChange: function onChange(event) {
+      _onChange(event);
+
+      if (onOriginChange) {
+        onOriginChange(event);
+      }
+    },
+    onCompositionStart: function onCompositionStart(event) {
+      _onCompositionStart(event);
+
+      if (onOriginCompositionStart) {
+        onOriginCompositionStart(event);
+      }
+    },
+    onCompositionEnd: function onCompositionEnd(event) {
+      _onCompositionEnd(event);
+
+      if (onOriginCompositionEnd) {
+        onOriginCompositionEnd(event);
+      }
+    },
+    onPaste: onPaste
+  }));
+  return inputNode;
+};
+
+var RefInput = /*#__PURE__*/React.forwardRef(Input);
+RefInput.displayName = 'Input';
+export default RefInput;

package/es/Select/rc-select/Selector/MultipleSelector.d.ts

@@ -0,0 +1,16 @@
+import * as React from 'react';
+import type { InnerSelectorProps } from '.';
+import type { DisplayValueType, RenderNode, CustomTagProps } from '../BaseSelect';
+interface SelectorProps extends InnerSelectorProps {
+    removeIcon?: RenderNode;
+    maxTagCount?: number | 'responsive';
+    maxTagTextLength?: number;
+    maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
+    tokenSeparators?: string[];
+    tagRender?: (props: CustomTagProps) => React.ReactElement;
+    onToggleOpen: (open?: boolean) => void;
+    choiceTransitionName?: string;
+    onRemove: (value: DisplayValueType) => void;
+}
+declare const SelectSelector: React.FC<SelectorProps>;
+export default SelectSelector;

package/es/Select/rc-select/Selector/MultipleSelector.js

@@ -0,0 +1,236 @@
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+// @ts-nocheck
+import * as React from 'react';
+import { useState } from 'react';
+import classNames from 'classnames';
+import pickAttrs from 'rc-util/lib/pickAttrs';
+import Overflow from 'rc-overflow';
+import TransBtn from '../TransBtn';
+import Input from './Input';
+import useLayoutEffect from '../hooks/useLayoutEffect';
+import SelectStyle from '../../style/variables.less';
+
+var onPreventMouseDown = function onPreventMouseDown(event) {
+  event.preventDefault();
+  event.stopPropagation();
+};
+
+var SelectSelector = function SelectSelector(props) {
+  var id = props.id,
+      prefixCls = props.prefixCls,
+      prefix = props.prefix,
+      values = props.values,
+      open = props.open,
+      searchValue = props.searchValue,
+      inputRef = props.inputRef,
+      prefixRef = props.prefixRef,
+      placeholder = props.placeholder,
+      disabled = props.disabled,
+      mode = props.mode,
+      showSearch = props.showSearch,
+      autoFocus = props.autoFocus,
+      autoComplete = props.autoComplete,
+      activeDescendantId = props.activeDescendantId,
+      tabIndex = props.tabIndex,
+      removeIcon = props.removeIcon,
+      _props$maxTagCount = props.maxTagCount,
+      maxTagCount = _props$maxTagCount === void 0 ? "responsive" : _props$maxTagCount,
+      maxTagTextLength = props.maxTagTextLength,
+      _props$maxTagPlacehol = props.maxTagPlaceholder,
+      maxTagPlaceholder = _props$maxTagPlacehol === void 0 ? function (omittedValues) {
+    return "\u7B49".concat(omittedValues.length, "\u9879");
+  } : _props$maxTagPlacehol,
+      _props$tagRender = props.tagRender,
+      tagRender = _props$tagRender === void 0 ? function (props) {
+    var label = props.label,
+        value = props.value,
+        closable = props.closable,
+        onClose = props.onClose; // const onPreventMouseDown = (event: React.MouseEvent<HTMLSpanElement>) => {
+    //   event.preventDefault();
+    //   event.stopPropagation();
+    // };
+
+    return /*#__PURE__*/React.createElement("div", {
+      className: 'ald-select-multiple-tag-default'
+    }, label);
+  } : _props$tagRender,
+      onToggleOpen = props.onToggleOpen,
+      onRemove = props.onRemove,
+      onInputChange = props.onInputChange,
+      onInputPaste = props.onInputPaste,
+      onInputKeyDown = props.onInputKeyDown,
+      onInputMouseDown = props.onInputMouseDown,
+      onInputCompositionStart = props.onInputCompositionStart,
+      onInputCompositionEnd = props.onInputCompositionEnd;
+  var measureRef = React.useRef(null);
+
+  var _useState = useState(0),
+      _useState2 = _slicedToArray(_useState, 2),
+      inputWidth = _useState2[0],
+      setInputWidth = _useState2[1];
+
+  var _useState3 = useState(false),
+      _useState4 = _slicedToArray(_useState3, 2),
+      focused = _useState4[0],
+      setFocused = _useState4[1];
+
+  var _useState5 = useState(0),
+      _useState6 = _slicedToArray(_useState5, 2),
+      placeholderLeft = _useState6[0],
+      setPlaceholderLeft = _useState6[1];
+
+  var selectionPrefixCls = "".concat(prefixCls, "-selection"); // ===================== Search ======================
+
+  var inputValue = open || mode === 'tags' ? searchValue : '';
+  var inputEditable = mode === 'tags' || showSearch && (open || focused); // We measure width and set to the input immediately
+
+  useLayoutEffect(function () {
+    setInputWidth(measureRef.current.scrollWidth);
+  }, [inputValue]); // ===================== Render ======================
+  // >>> Render Selector Node. Includes Item & Rest
+
+  function defaultRenderSelector(title, content, itemDisabled, closable, onClose) {
+    return /*#__PURE__*/React.createElement("span", {
+      className: classNames("".concat(selectionPrefixCls, "-item"), _defineProperty({}, "".concat(selectionPrefixCls, "-item-disabled"), itemDisabled)),
+      title: typeof title === 'string' || typeof title === 'number' ? title.toString() : undefined
+    }, /*#__PURE__*/React.createElement("span", {
+      className: "".concat(selectionPrefixCls, "-item-content")
+    }, content), closable && /*#__PURE__*/React.createElement(TransBtn, {
+      className: "".concat(selectionPrefixCls, "-item-remove"),
+      onMouseDown: onPreventMouseDown,
+      onClick: onClose,
+      customizeIcon: removeIcon
+    }, "\xD7"));
+  }
+
+  function customizeRenderSelector(value, content, itemDisabled, closable, onClose) {
+    var onMouseDown = function onMouseDown(e) {
+      onPreventMouseDown(e);
+      onToggleOpen(!open);
+    };
+
+    return /*#__PURE__*/React.createElement("span", {
+      className: 'ald-select-multiple-customize-tag',
+      onMouseDown: onMouseDown
+    }, tagRender({
+      label: content,
+      value: value,
+      disabled: itemDisabled,
+      closable: closable,
+      onClose: onClose
+    }));
+  }
+
+  function renderItem(valueItem) {
+    var itemDisabled = valueItem.disabled,
+        label = valueItem.label,
+        value = valueItem.value;
+    var closable = !disabled && !itemDisabled;
+    var displayLabel = label;
+
+    if (typeof maxTagTextLength === 'number') {
+      if (typeof label === 'string' || typeof label === 'number') {
+        var strLabel = String(displayLabel);
+
+        if (strLabel.length > maxTagTextLength) {
+          displayLabel = "".concat(strLabel.slice(0, maxTagTextLength), "...");
+        }
+      }
+    }
+
+    var onClose = function onClose(event) {
+      if (event) event.stopPropagation();
+      onRemove(valueItem);
+    };
+
+    return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose) : defaultRenderSelector(label, displayLabel, itemDisabled, closable, onClose);
+  }
+
+  function renderRest(omittedValues) {
+    var content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
+    return defaultRenderSelector(content, content, false);
+  } // >>> Input Node
+
+
+  var inputNode = /*#__PURE__*/React.createElement("div", {
+    className: "".concat(selectionPrefixCls, "-search"),
+    style: {
+      width: inputWidth
+    },
+    onFocus: function onFocus() {
+      setFocused(true);
+    },
+    onBlur: function onBlur() {
+      setFocused(false);
+    }
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: inputRef,
+    open: open,
+    prefixCls: prefixCls,
+    id: id,
+    inputElement: null,
+    disabled: disabled,
+    autoFocus: autoFocus,
+    autoComplete: autoComplete,
+    editable: inputEditable,
+    activeDescendantId: activeDescendantId,
+    value: inputValue,
+    onKeyDown: onInputKeyDown,
+    onMouseDown: onInputMouseDown,
+    onChange: onInputChange,
+    onPaste: onInputPaste,
+    onCompositionStart: onInputCompositionStart,
+    onCompositionEnd: onInputCompositionEnd,
+    tabIndex: tabIndex,
+    attrs: pickAttrs(props, true)
+  }), /*#__PURE__*/React.createElement("span", {
+    ref: measureRef,
+    className: "".concat(selectionPrefixCls, "-search-mirror"),
+    "aria-hidden": true
+  }, inputValue, "\xA0")); // >>> Selections
+
+  var selectionNode = /*#__PURE__*/React.createElement(Overflow, {
+    prefixCls: "".concat(selectionPrefixCls, "-overflow"),
+    data: values,
+    renderItem: renderItem,
+    renderRest: renderRest,
+    suffix: inputNode,
+    itemKey: "key",
+    maxCount: maxTagCount
+  }); // 计算placeholder的left值
+
+  React.useEffect(function () {
+    var prefixEl = prefixRef.current;
+    var size = ['large', 'small', 'mini'].includes(props.size) ? props.size.toUpperCase() : 'MIDDLE';
+    var selectorPaddingLeft = parseInt(SelectStyle["SELECTOR_PADDING_LEFT"]);
+
+    if (prefixEl) {
+      var prefixOffsetWidth = prefixEl.offsetWidth;
+      var prefixMarginRight = parseInt(SelectStyle["PREFIX_MARGIN_RIGHT_".concat(size)]);
+      return setPlaceholderLeft(prefixOffsetWidth + prefixMarginRight + selectorPaddingLeft);
+    }
+
+    return setPlaceholderLeft(selectorPaddingLeft);
+  }, []);
+  return /*#__PURE__*/React.createElement(React.Fragment, null, selectionNode, !values.length && !inputValue && /*#__PURE__*/React.createElement("span", {
+    className: classNames("".concat(selectionPrefixCls, "-placeholder"), 'ald-select-selection-placeholder', _defineProperty({}, "ald-select-selection-placeholder-prefix", prefix)),
+    style: {
+      left: placeholderLeft
+    }
+  }, placeholder));
+};
+
+export default SelectSelector;

package/es/Select/rc-select/Selector/SingleSelector.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+import type { InnerSelectorProps } from '.';
+interface SelectorProps extends InnerSelectorProps {
+    inputElement: React.ReactElement;
+    activeValue: string;
+}
+declare const SingleSelector: React.FC<SelectorProps>;
+export default SingleSelector;

package/es/Select/rc-select/Selector/SingleSelector.js

@@ -0,0 +1,112 @@
+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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+// @ts-nocheck
+import * as React from 'react';
+import pickAttrs from 'rc-util/lib/pickAttrs';
+import Input from './Input';
+
+var SingleSelector = function SingleSelector(props) {
+  var inputElement = props.inputElement,
+      prefixCls = props.prefixCls,
+      id = props.id,
+      inputRef = props.inputRef,
+      disabled = props.disabled,
+      autoFocus = props.autoFocus,
+      autoComplete = props.autoComplete,
+      activeDescendantId = props.activeDescendantId,
+      mode = props.mode,
+      open = props.open,
+      values = props.values,
+      placeholder = props.placeholder,
+      tabIndex = props.tabIndex,
+      showSearch = props.showSearch,
+      searchValue = props.searchValue,
+      activeValue = props.activeValue,
+      maxLength = props.maxLength,
+      onInputKeyDown = props.onInputKeyDown,
+      onInputMouseDown = props.onInputMouseDown,
+      onInputChange = props.onInputChange,
+      onInputPaste = props.onInputPaste,
+      onInputCompositionStart = props.onInputCompositionStart,
+      onInputCompositionEnd = props.onInputCompositionEnd;
+
+  var _React$useState = React.useState(false),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      inputChanged = _React$useState2[0],
+      setInputChanged = _React$useState2[1];
+
+  var combobox = mode === 'combobox';
+  var inputEditable = combobox || showSearch;
+  var item = values[0];
+  var inputValue = searchValue || '';
+
+  if (combobox && activeValue && !inputChanged) {
+    inputValue = activeValue;
+  }
+
+  React.useEffect(function () {
+    if (combobox) {
+      setInputChanged(false);
+    }
+  }, [combobox, activeValue]); // Not show text when closed expect combobox mode
+
+  var hasTextInput = mode !== 'combobox' && !open && !showSearch ? false : !!inputValue;
+  var title = item && (typeof item.label === 'string' || typeof item.label === 'number') ? item.label.toString() : undefined;
+
+  var renderPlaceholder = function renderPlaceholder() {
+    if (item) {
+      return null;
+    }
+
+    var hiddenStyle = hasTextInput ? {
+      visibility: 'hidden'
+    } : undefined;
+    return /*#__PURE__*/React.createElement("span", {
+      className: "".concat(prefixCls, "-selection-placeholder"),
+      style: hiddenStyle
+    }, placeholder);
+  };
+
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-selection-search")
+  }, /*#__PURE__*/React.createElement(Input, {
+    ref: inputRef,
+    prefixCls: prefixCls,
+    id: id,
+    open: open,
+    inputElement: inputElement,
+    disabled: disabled,
+    autoFocus: autoFocus,
+    autoComplete: autoComplete,
+    editable: inputEditable,
+    activeDescendantId: activeDescendantId,
+    value: inputValue,
+    onKeyDown: onInputKeyDown,
+    onMouseDown: onInputMouseDown,
+    onChange: function onChange(e) {
+      setInputChanged(true);
+      onInputChange(e);
+    },
+    onPaste: onInputPaste,
+    onCompositionStart: onInputCompositionStart,
+    onCompositionEnd: onInputCompositionEnd,
+    tabIndex: tabIndex,
+    attrs: pickAttrs(props, true),
+    maxLength: combobox ? maxLength : undefined
+  })), !combobox && item && !hasTextInput && /*#__PURE__*/React.createElement("span", {
+    className: "".concat(prefixCls, "-selection-item"),
+    title: title
+  }, item.label), renderPlaceholder());
+};
+
+export default SingleSelector;