@rc-component/select 1.0.0

package/lib/SelectTrigger.js

@@ -0,0 +1,147 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _trigger = _interopRequireDefault(require("@rc-component/trigger"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var React = _interopRequireWildcard(require("react"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+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); }
+const getBuiltInPlacements = popupMatchSelectWidth => {
+  // Enable horizontal overflow auto-adjustment when a custom dropdown width is provided
+  const adjustX = popupMatchSelectWidth === true ? 0 : 1;
+  return {
+    bottomLeft: {
+      points: ['tl', 'bl'],
+      offset: [0, 4],
+      overflow: {
+        adjustX,
+        adjustY: 1
+      },
+      htmlRegion: 'scroll'
+    },
+    bottomRight: {
+      points: ['tr', 'br'],
+      offset: [0, 4],
+      overflow: {
+        adjustX,
+        adjustY: 1
+      },
+      htmlRegion: 'scroll'
+    },
+    topLeft: {
+      points: ['bl', 'tl'],
+      offset: [0, -4],
+      overflow: {
+        adjustX,
+        adjustY: 1
+      },
+      htmlRegion: 'scroll'
+    },
+    topRight: {
+      points: ['br', 'tr'],
+      offset: [0, -4],
+      overflow: {
+        adjustX,
+        adjustY: 1
+      },
+      htmlRegion: 'scroll'
+    }
+  };
+};
+const SelectTrigger = (props, ref) => {
+  const {
+    prefixCls,
+    disabled,
+    visible,
+    children,
+    popupElement,
+    animation,
+    transitionName,
+    popupStyle,
+    popupClassName,
+    direction = 'ltr',
+    placement,
+    builtinPlacements,
+    popupMatchSelectWidth,
+    popupRender,
+    popupAlign,
+    getPopupContainer,
+    empty,
+    getTriggerDOMNode,
+    onPopupVisibleChange,
+    onPopupMouseEnter,
+    ...restProps
+  } = props;
+
+  // We still use `dropdown` className to keep compatibility
+  // This is used for:
+  // 1. Styles
+  // 2. Animation
+  // 3. Theme customization
+  // Please do not modify this since it's a breaking change
+  const popupPrefixCls = `${prefixCls}-dropdown`;
+  let popupNode = popupElement;
+  if (popupRender) {
+    popupNode = popupRender(popupElement);
+  }
+  const mergedBuiltinPlacements = React.useMemo(() => builtinPlacements || getBuiltInPlacements(popupMatchSelectWidth), [builtinPlacements, popupMatchSelectWidth]);
+
+  // ===================== Motion ======================
+  const mergedTransitionName = animation ? `${popupPrefixCls}-${animation}` : transitionName;
+
+  // =================== Popup Width ===================
+  const isNumberPopupWidth = typeof popupMatchSelectWidth === 'number';
+  const stretch = React.useMemo(() => {
+    if (isNumberPopupWidth) {
+      return null;
+    }
+    return popupMatchSelectWidth === false ? 'minWidth' : 'width';
+  }, [popupMatchSelectWidth, isNumberPopupWidth]);
+  let mergedPopupStyle = popupStyle;
+  if (isNumberPopupWidth) {
+    mergedPopupStyle = {
+      ...popupStyle,
+      width: popupMatchSelectWidth
+    };
+  }
+
+  // ======================= Ref =======================
+  const triggerPopupRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => ({
+    getPopupElement: () => triggerPopupRef.current?.popupElement
+  }));
+  return /*#__PURE__*/React.createElement(_trigger.default, _extends({}, restProps, {
+    showAction: onPopupVisibleChange ? ['click'] : [],
+    hideAction: onPopupVisibleChange ? ['click'] : [],
+    popupPlacement: placement || (direction === 'rtl' ? 'bottomRight' : 'bottomLeft'),
+    builtinPlacements: mergedBuiltinPlacements,
+    prefixCls: popupPrefixCls,
+    popupMotion: {
+      motionName: mergedTransitionName
+    },
+    popup: /*#__PURE__*/React.createElement("div", {
+      onMouseEnter: onPopupMouseEnter
+    }, popupNode),
+    ref: triggerPopupRef,
+    stretch: stretch,
+    popupAlign: popupAlign,
+    popupVisible: visible,
+    getPopupContainer: getPopupContainer,
+    popupClassName: (0, _classnames.default)(popupClassName, {
+      [`${popupPrefixCls}-empty`]: empty
+    }),
+    popupStyle: mergedPopupStyle,
+    getTriggerDOMNode: getTriggerDOMNode,
+    onPopupVisibleChange: onPopupVisibleChange
+  }), children);
+};
+const RefSelectTrigger = /*#__PURE__*/React.forwardRef(SelectTrigger);
+if (process.env.NODE_ENV !== 'production') {
+  RefSelectTrigger.displayName = 'SelectTrigger';
+}
+var _default = exports.default = RefSelectTrigger;

package/lib/Selector/Input.d.ts

@@ -0,0 +1,27 @@
+import * as React from 'react';
+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>;
+    onBlur: React.FocusEventHandler<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/lib/Selector/Input.js

@@ -0,0 +1,123 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+var _ref = require("@rc-component/util/lib/ref");
+var _warning = require("@rc-component/util/lib/warning");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const Input = (props, ref) => {
+  const {
+    prefixCls,
+    id,
+    inputElement,
+    disabled,
+    tabIndex,
+    autoFocus,
+    autoComplete,
+    editable,
+    activeDescendantId,
+    value,
+    maxLength,
+    onKeyDown,
+    onMouseDown,
+    onChange,
+    onPaste,
+    onCompositionStart,
+    onCompositionEnd,
+    onBlur,
+    open,
+    attrs
+  } = props;
+  let inputNode = inputElement || /*#__PURE__*/React.createElement("input", null);
+  const {
+    ref: originRef,
+    props: originProps
+  } = inputNode;
+  const {
+    onKeyDown: onOriginKeyDown,
+    onChange: onOriginChange,
+    onMouseDown: onOriginMouseDown,
+    onCompositionStart: onOriginCompositionStart,
+    onCompositionEnd: onOriginCompositionEnd,
+    onBlur: onOriginBlur,
+    style
+  } = originProps;
+  (0, _warning.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, {
+    type: 'search',
+    ...originProps,
+    // Override over origin props
+    id,
+    ref: (0, _ref.composeRef)(ref, originRef),
+    disabled,
+    tabIndex,
+    autoComplete: autoComplete || 'off',
+    autoFocus,
+    className: (0, _classnames.default)(`${prefixCls}-selection-search-input`, inputNode?.props?.className),
+    role: 'combobox',
+    'aria-expanded': open || false,
+    'aria-haspopup': 'listbox',
+    'aria-owns': `${id}_list`,
+    'aria-autocomplete': 'list',
+    'aria-controls': `${id}_list`,
+    'aria-activedescendant': open ? activeDescendantId : undefined,
+    ...attrs,
+    value: editable ? value : '',
+    maxLength,
+    readOnly: !editable,
+    unselectable: !editable ? 'on' : null,
+    style: {
+      ...style,
+      opacity: editable ? null : 0
+    },
+    onKeyDown: event => {
+      onKeyDown(event);
+      if (onOriginKeyDown) {
+        onOriginKeyDown(event);
+      }
+    },
+    onMouseDown: event => {
+      onMouseDown(event);
+      if (onOriginMouseDown) {
+        onOriginMouseDown(event);
+      }
+    },
+    onChange: event => {
+      onChange(event);
+      if (onOriginChange) {
+        onOriginChange(event);
+      }
+    },
+    onCompositionStart(event) {
+      onCompositionStart(event);
+      if (onOriginCompositionStart) {
+        onOriginCompositionStart(event);
+      }
+    },
+    onCompositionEnd(event) {
+      onCompositionEnd(event);
+      if (onOriginCompositionEnd) {
+        onOriginCompositionEnd(event);
+      }
+    },
+    onPaste,
+    onBlur(event) {
+      onBlur(event);
+      if (onOriginBlur) {
+        onOriginBlur(event);
+      }
+    }
+  });
+  return inputNode;
+};
+const RefInput = /*#__PURE__*/React.forwardRef(Input);
+if (process.env.NODE_ENV !== 'production') {
+  RefInput.displayName = 'Input';
+}
+var _default = exports.default = RefInput;

package/lib/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/lib/Selector/MultipleSelector.js

@@ -0,0 +1,194 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
+var _rcOverflow = _interopRequireDefault(require("rc-overflow"));
+var _TransBtn = _interopRequireDefault(require("../TransBtn"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _useLayoutEffect = _interopRequireDefault(require("../hooks/useLayoutEffect"));
+var _commonUtil = require("../utils/commonUtil");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function itemKey(value) {
+  return value.key ?? value.value;
+}
+const onPreventMouseDown = event => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+const SelectSelector = props => {
+  const {
+    id,
+    prefixCls,
+    values,
+    open,
+    searchValue,
+    autoClearSearchValue,
+    inputRef,
+    placeholder,
+    disabled,
+    mode,
+    showSearch,
+    autoFocus,
+    autoComplete,
+    activeDescendantId,
+    tabIndex,
+    removeIcon,
+    maxTagCount,
+    maxTagTextLength,
+    maxTagPlaceholder = omittedValues => `+ ${omittedValues.length} ...`,
+    tagRender,
+    onToggleOpen,
+    onRemove,
+    onInputChange,
+    onInputPaste,
+    onInputKeyDown,
+    onInputMouseDown,
+    onInputCompositionStart,
+    onInputCompositionEnd,
+    onInputBlur
+  } = props;
+  const measureRef = React.useRef(null);
+  const [inputWidth, setInputWidth] = (0, _react.useState)(0);
+  const [focused, setFocused] = (0, _react.useState)(false);
+  const selectionPrefixCls = `${prefixCls}-selection`;
+
+  // ===================== Search ======================
+  const inputValue = open || mode === 'multiple' && autoClearSearchValue === false || mode === 'tags' ? searchValue : '';
+  const inputEditable = mode === 'tags' || mode === 'multiple' && autoClearSearchValue === false || showSearch && (open || focused);
+
+  // We measure width and set to the input immediately
+  (0, _useLayoutEffect.default)(() => {
+    setInputWidth(measureRef.current.scrollWidth);
+  }, [inputValue]);
+
+  // ===================== Render ======================
+  // >>> Render Selector Node. Includes Item & Rest
+  const defaultRenderSelector = (item, content, itemDisabled, closable, onClose) => /*#__PURE__*/React.createElement("span", {
+    title: (0, _commonUtil.getTitle)(item),
+    className: (0, _classnames.default)(`${selectionPrefixCls}-item`, {
+      [`${selectionPrefixCls}-item-disabled`]: itemDisabled
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${selectionPrefixCls}-item-content`
+  }, content), closable && /*#__PURE__*/React.createElement(_TransBtn.default, {
+    className: `${selectionPrefixCls}-item-remove`,
+    onMouseDown: onPreventMouseDown,
+    onClick: onClose,
+    customizeIcon: removeIcon
+  }, "\xD7"));
+  const customizeRenderSelector = (value, content, itemDisabled, closable, onClose, isMaxTag, info) => {
+    const onMouseDown = e => {
+      onPreventMouseDown(e);
+      onToggleOpen(!open);
+    };
+    return /*#__PURE__*/React.createElement("span", {
+      onMouseDown: onMouseDown
+    }, tagRender({
+      label: content,
+      value,
+      index: info?.index,
+      disabled: itemDisabled,
+      closable,
+      onClose,
+      isMaxTag: !!isMaxTag
+    }));
+  };
+  const renderItem = (valueItem, info) => {
+    const {
+      disabled: itemDisabled,
+      label,
+      value
+    } = valueItem;
+    const closable = !disabled && !itemDisabled;
+    let displayLabel = label;
+    if (typeof maxTagTextLength === 'number') {
+      if (typeof label === 'string' || typeof label === 'number') {
+        const strLabel = String(displayLabel);
+        if (strLabel.length > maxTagTextLength) {
+          displayLabel = `${strLabel.slice(0, maxTagTextLength)}...`;
+        }
+      }
+    }
+    const onClose = event => {
+      if (event) {
+        event.stopPropagation();
+      }
+      onRemove(valueItem);
+    };
+    return typeof tagRender === 'function' ? customizeRenderSelector(value, displayLabel, itemDisabled, closable, onClose, undefined, info) : defaultRenderSelector(valueItem, displayLabel, itemDisabled, closable, onClose);
+  };
+  const renderRest = omittedValues => {
+    // https://github.com/ant-design/ant-design/issues/48930
+    if (!values.length) {
+      return null;
+    }
+    const content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
+    return typeof tagRender === 'function' ? customizeRenderSelector(undefined, content, false, false, undefined, true) : defaultRenderSelector({
+      title: content
+    }, content, false);
+  };
+
+  // >>> Input Node
+  const inputNode = /*#__PURE__*/React.createElement("div", {
+    className: `${selectionPrefixCls}-search`,
+    style: {
+      width: inputWidth
+    },
+    onFocus: () => {
+      setFocused(true);
+    },
+    onBlur: () => {
+      setFocused(false);
+    }
+  }, /*#__PURE__*/React.createElement(_Input.default, {
+    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,
+    onBlur: onInputBlur,
+    tabIndex: tabIndex,
+    attrs: (0, _pickAttrs.default)(props, true)
+  }), /*#__PURE__*/React.createElement("span", {
+    ref: measureRef,
+    className: `${selectionPrefixCls}-search-mirror`,
+    "aria-hidden": true
+  }, inputValue, "\xA0"));
+
+  // >>> Selections
+  const selectionNode = /*#__PURE__*/React.createElement(_rcOverflow.default, {
+    prefixCls: `${selectionPrefixCls}-overflow`,
+    data: values,
+    renderItem: renderItem,
+    renderRest: renderRest,
+    suffix: inputNode,
+    itemKey: itemKey,
+    maxCount: maxTagCount
+  });
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${selectionPrefixCls}-wrap`
+  }, selectionNode, !values.length && !inputValue && /*#__PURE__*/React.createElement("span", {
+    className: `${selectionPrefixCls}-placeholder`
+  }, placeholder));
+};
+var _default = exports.default = SelectSelector;

package/lib/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/lib/Selector/SingleSelector.js

@@ -0,0 +1,113 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _pickAttrs = _interopRequireDefault(require("@rc-component/util/lib/pickAttrs"));
+var _Input = _interopRequireDefault(require("./Input"));
+var _commonUtil = require("../utils/commonUtil");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+const SingleSelector = props => {
+  const {
+    inputElement,
+    prefixCls,
+    id,
+    inputRef,
+    disabled,
+    autoFocus,
+    autoComplete,
+    activeDescendantId,
+    mode,
+    open,
+    values,
+    placeholder,
+    tabIndex,
+    showSearch,
+    searchValue,
+    activeValue,
+    maxLength,
+    onInputKeyDown,
+    onInputMouseDown,
+    onInputChange,
+    onInputPaste,
+    onInputCompositionStart,
+    onInputCompositionEnd,
+    onInputBlur,
+    title
+  } = props;
+  const [inputChanged, setInputChanged] = React.useState(false);
+  const combobox = mode === 'combobox';
+  const inputEditable = combobox || showSearch;
+  const item = values[0];
+  let inputValue = searchValue || '';
+  if (combobox && activeValue && !inputChanged) {
+    inputValue = activeValue;
+  }
+  React.useEffect(() => {
+    if (combobox) {
+      setInputChanged(false);
+    }
+  }, [combobox, activeValue]);
+
+  // Not show text when closed expect combobox mode
+  const hasTextInput = mode !== 'combobox' && !open && !showSearch ? false : !!inputValue;
+
+  // Get title of selection item
+  const selectionTitle = title === undefined ? (0, _commonUtil.getTitle)(item) : title;
+  const placeholderNode = React.useMemo(() => {
+    if (item) {
+      return null;
+    }
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-selection-placeholder`,
+      style: hasTextInput ? {
+        visibility: 'hidden'
+      } : undefined
+    }, placeholder);
+  }, [item, hasTextInput, placeholder, prefixCls]);
+  return /*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-selection-wrap`
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-selection-search`
+  }, /*#__PURE__*/React.createElement(_Input.default, {
+    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: e => {
+      setInputChanged(true);
+      onInputChange(e);
+    },
+    onPaste: onInputPaste,
+    onCompositionStart: onInputCompositionStart,
+    onCompositionEnd: onInputCompositionEnd,
+    onBlur: onInputBlur,
+    tabIndex: tabIndex,
+    attrs: (0, _pickAttrs.default)(props, true),
+    maxLength: combobox ? maxLength : undefined
+  })), !combobox && item ? /*#__PURE__*/React.createElement("span", {
+    className: `${prefixCls}-selection-item`,
+    title: selectionTitle
+    // 当 Select 已经选中选项时，还需 selection 隐藏但留在原地占位
+    // https://github.com/ant-design/ant-design/issues/27688
+    // https://github.com/ant-design/ant-design/issues/41530
+    ,
+    style: hasTextInput ? {
+      visibility: 'hidden'
+    } : undefined
+  }, item.label) : null, placeholderNode);
+};
+var _default = exports.default = SingleSelector;