@rc-component/select 1.0.0

package/es/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/es/Selector/Input.js

@@ -0,0 +1,114 @@
+import * as React from 'react';
+import classNames from 'classnames';
+import { composeRef } from "@rc-component/util/es/ref";
+import { warning } from "@rc-component/util/es/warning";
+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;
+  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: composeRef(ref, originRef),
+    disabled,
+    tabIndex,
+    autoComplete: autoComplete || 'off',
+    autoFocus,
+    className: classNames(`${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';
+}
+export default RefInput;

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

@@ -0,0 +1,185 @@
+import * as React from 'react';
+import { useState } from 'react';
+import classNames from 'classnames';
+import pickAttrs from "@rc-component/util/es/pickAttrs";
+import Overflow from 'rc-overflow';
+import TransBtn from "../TransBtn";
+import Input from "./Input";
+import useLayoutEffect from "../hooks/useLayoutEffect";
+import { getTitle } from "../utils/commonUtil";
+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] = useState(0);
+  const [focused, setFocused] = 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
+  useLayoutEffect(() => {
+    setInputWidth(measureRef.current.scrollWidth);
+  }, [inputValue]);
+
+  // ===================== Render ======================
+  // >>> Render Selector Node. Includes Item & Rest
+  const defaultRenderSelector = (item, content, itemDisabled, closable, onClose) => /*#__PURE__*/React.createElement("span", {
+    title: getTitle(item),
+    className: classNames(`${selectionPrefixCls}-item`, {
+      [`${selectionPrefixCls}-item-disabled`]: itemDisabled
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${selectionPrefixCls}-item-content`
+  }, content), closable && /*#__PURE__*/React.createElement(TransBtn, {
+    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, {
+    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: pickAttrs(props, true)
+  }), /*#__PURE__*/React.createElement("span", {
+    ref: measureRef,
+    className: `${selectionPrefixCls}-search-mirror`,
+    "aria-hidden": true
+  }, inputValue, "\xA0"));
+
+  // >>> Selections
+  const selectionNode = /*#__PURE__*/React.createElement(Overflow, {
+    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));
+};
+export default SelectSelector;

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

@@ -0,0 +1,104 @@
+import * as React from 'react';
+import pickAttrs from "@rc-component/util/es/pickAttrs";
+import Input from "./Input";
+import { getTitle } from "../utils/commonUtil";
+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 ? 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, {
+    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: pickAttrs(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);
+};
+export default SingleSelector;

package/es/Selector/index.d.ts

@@ -0,0 +1,85 @@
+/**
+ * Cursor rule:
+ * 1. Only `showSearch` enabled
+ * 2. Only `open` is `true`
+ * 3. When typing, set `open` to `true` which hit rule of 2
+ *
+ * Accessibility:
+ * - https://www.w3.org/TR/wai-aria-practices/examples/combobox/aria1.1pattern/listbox-combo.html
+ */
+import type { ScrollTo } from 'rc-virtual-list/lib/List';
+import * as React from 'react';
+import type { CustomTagProps, DisplayValueType, Mode, RenderNode } from '../BaseSelect';
+export interface InnerSelectorProps {
+    prefixCls: string;
+    id: string;
+    mode: Mode;
+    title?: string;
+    inputRef: React.Ref<HTMLInputElement | HTMLTextAreaElement>;
+    placeholder?: React.ReactNode;
+    disabled?: boolean;
+    autoFocus?: boolean;
+    autoComplete?: string;
+    values: DisplayValueType[];
+    showSearch?: boolean;
+    searchValue: string;
+    autoClearSearchValue?: boolean;
+    activeDescendantId?: string;
+    open: boolean;
+    tabIndex?: number;
+    maxLength?: number;
+    onInputKeyDown: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputMouseDown: React.MouseEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputChange: React.ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputPaste: React.ClipboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputCompositionStart: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputCompositionEnd: React.CompositionEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputBlur: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+}
+export interface RefSelectorProps {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    scrollTo?: ScrollTo;
+}
+export interface SelectorProps {
+    id: string;
+    prefixCls: string;
+    showSearch?: boolean;
+    open: boolean;
+    /** Display in the Selector value, it's not same as `value` prop */
+    values: DisplayValueType[];
+    mode: Mode;
+    searchValue: string;
+    activeValue: string;
+    autoClearSearchValue: boolean;
+    inputElement: JSX.Element;
+    maxLength?: number;
+    autoFocus?: boolean;
+    activeDescendantId?: string;
+    tabIndex?: number;
+    disabled?: boolean;
+    placeholder?: React.ReactNode;
+    removeIcon?: RenderNode;
+    prefix?: React.ReactNode;
+    maxTagCount?: number | 'responsive';
+    maxTagTextLength?: number;
+    maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
+    tagRender?: (props: CustomTagProps) => React.ReactElement;
+    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
+    tokenWithEnter?: boolean;
+    choiceTransitionName?: string;
+    onToggleOpen: (open?: boolean) => void;
+    /** `onSearch` returns go next step boolean to check if need do toggle open */
+    onSearch: (searchText: string, fromTyping: boolean, isCompositing: boolean) => boolean;
+    onSearchSubmit?: (searchText: string) => void;
+    onRemove: (value: DisplayValueType) => void;
+    onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onInputBlur?: () => void;
+    /**
+     * @private get real dom for trigger align.
+     * This may be removed after React provides replacement of `findDOMNode`
+     */
+    domRef: React.Ref<HTMLDivElement>;
+}
+declare const ForwardSelector: React.ForwardRefExoticComponent<SelectorProps & React.RefAttributes<RefSelectorProps>>;
+export default ForwardSelector;