@rc-component/select 1.1.4 → 1.2.0-alpha.0

package/es/SelectInput/Content/MultipleContent.js

@@ -0,0 +1,152 @@
+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); }
+import * as React from 'react';
+import { clsx } from 'clsx';
+import Overflow from 'rc-overflow';
+import Input from "../Input";
+import { useSelectInputContext } from "../context";
+import TransBtn from "../../TransBtn";
+import { getTitle } from "../../utils/commonUtil";
+import useBaseProps from "../../hooks/useBaseProps";
+import Placeholder from "./Placeholder";
+function itemKey(value) {
+  return value.key ?? value.value;
+}
+const onPreventMouseDown = event => {
+  event.preventDefault();
+  event.stopPropagation();
+};
+export default /*#__PURE__*/React.forwardRef(function MultipleContent({
+  inputProps
+}, ref) {
+  const {
+    prefixCls,
+    displayValues,
+    searchValue,
+    mode,
+    onSelectorRemove,
+    removeIcon: removeIconFromContext
+  } = useSelectInputContext();
+  const {
+    disabled,
+    showSearch,
+    triggerOpen,
+    toggleOpen,
+    autoClearSearchValue,
+    tagRender: tagRenderFromContext,
+    maxTagPlaceholder: maxTagPlaceholderFromContext,
+    maxTagTextLength,
+    maxTagCount
+  } = useBaseProps();
+  const selectionItemPrefixCls = `${prefixCls}-selection-item`;
+
+  // ===================== Search ======================
+  // Apply autoClearSearchValue logic: when dropdown is closed and autoClearSearchValue is not false (default true), clear search value
+  let computedSearchValue = searchValue;
+  if (!triggerOpen && mode === 'multiple' && autoClearSearchValue !== false) {
+    computedSearchValue = '';
+  }
+  const inputValue = showSearch ? computedSearchValue || '' : '';
+  const inputEditable = showSearch && !disabled;
+
+  // Props from context with safe defaults
+  const removeIcon = removeIconFromContext ?? '×';
+  const maxTagPlaceholder = maxTagPlaceholderFromContext ?? (omittedValues => `+ ${omittedValues.length} ...`);
+  const tagRender = tagRenderFromContext;
+  const onToggleOpen = newOpen => {
+    toggleOpen(newOpen);
+  };
+  const onRemove = value => {
+    onSelectorRemove?.(value);
+  };
+
+  // ======================== Item ========================
+  // >>> Render Selector Node. Includes Item & Rest
+  const defaultRenderSelector = (item, content, itemDisabled, closable, onClose) => /*#__PURE__*/React.createElement("span", {
+    title: getTitle(item),
+    className: clsx(selectionItemPrefixCls, {
+      [`${selectionItemPrefixCls}-disabled`]: itemDisabled
+    })
+  }, /*#__PURE__*/React.createElement("span", {
+    className: `${selectionItemPrefixCls}-content`
+  }, content), closable && /*#__PURE__*/React.createElement(TransBtn, {
+    className: `${selectionItemPrefixCls}-remove`,
+    onMouseDown: onPreventMouseDown,
+    onClick: onClose,
+    customizeIcon: removeIcon
+  }, "\xD7"));
+  const customizeRenderSelector = (value, content, itemDisabled, closable, onClose, isMaxTag, info) => {
+    const onMouseDown = e => {
+      onPreventMouseDown(e);
+      onToggleOpen(!triggerOpen);
+    };
+    return /*#__PURE__*/React.createElement("span", {
+      onMouseDown: onMouseDown
+    }, tagRender({
+      label: content,
+      value,
+      index: info?.index,
+      disabled: itemDisabled,
+      closable,
+      onClose,
+      isMaxTag: !!isMaxTag
+    }));
+  };
+
+  // ====================== Overflow ======================
+  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 (!displayValues.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);
+  };
+
+  // ======================= Render =======================
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Placeholder, {
+    show: !searchValue || !triggerOpen
+  }), /*#__PURE__*/React.createElement(Overflow, {
+    prefixCls: `${prefixCls}-content`,
+    data: displayValues,
+    renderItem: renderItem,
+    renderRest: renderRest
+    // suffix={inputNode}
+    ,
+    suffix: /*#__PURE__*/React.createElement(Input, _extends({
+      ref: ref,
+      disabled: disabled,
+      readOnly: !inputEditable
+    }, inputProps, {
+      value: inputValue || '',
+      syncWidth: true
+    })),
+    itemKey: itemKey,
+    maxCount: maxTagCount
+  }));
+});

package/es/SelectInput/Content/Placeholder.d.ts

@@ -0,0 +1,5 @@
+import * as React from 'react';
+export interface PlaceholderProps {
+    show: boolean;
+}
+export default function Placeholder(props: PlaceholderProps): React.JSX.Element;

package/es/SelectInput/Content/Placeholder.js

@@ -0,0 +1,21 @@
+import * as React from 'react';
+import { useSelectInputContext } from "../context";
+export default function Placeholder(props) {
+  const {
+    prefixCls,
+    placeholder,
+    displayValues
+  } = useSelectInputContext();
+  const {
+    show
+  } = props;
+  if (displayValues.length) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-placeholder`,
+    style: {
+      visibility: show ? 'visible' : 'hidden'
+    }
+  }, placeholder);
+}

package/es/SelectInput/Content/SingleContent.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import type { SharedContentProps } from '.';
+declare const SingleContent: React.ForwardRefExoticComponent<SharedContentProps & React.RefAttributes<HTMLInputElement>>;
+export default SingleContent;

package/es/SelectInput/Content/SingleContent.js

@@ -0,0 +1,98 @@
+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); }
+import * as React from 'react';
+import { clsx } from 'clsx';
+import Input from "../Input";
+import { useSelectInputContext } from "../context";
+import useBaseProps from "../../hooks/useBaseProps";
+import Placeholder from "./Placeholder";
+import SelectContext from "../../SelectContext";
+import { getTitle } from "../../utils/commonUtil";
+const SingleContent = /*#__PURE__*/React.forwardRef(({
+  inputProps
+}, ref) => {
+  const {
+    prefixCls,
+    searchValue,
+    activeValue,
+    displayValues,
+    maxLength,
+    mode
+  } = useSelectInputContext();
+  const {
+    triggerOpen,
+    title: rootTitle,
+    showSearch
+  } = useBaseProps();
+  const selectContext = React.useContext(SelectContext);
+  const [inputChanged, setInputChanged] = React.useState(false);
+  const combobox = mode === 'combobox';
+  const displayValue = displayValues[0];
+
+  // Implement the same logic as the old SingleSelector
+  const mergedSearchValue = React.useMemo(() => {
+    if (combobox && activeValue && !inputChanged && triggerOpen) {
+      return activeValue;
+    }
+    return showSearch ? searchValue : '';
+  }, [combobox, activeValue, inputChanged, triggerOpen, searchValue, showSearch]);
+
+  // Extract option props, excluding label and value, and handle className/style merging
+  const optionProps = React.useMemo(() => {
+    let restProps = {
+      className: `${prefixCls}-content-value`,
+      style: {
+        visibility: mergedSearchValue ? 'hidden' : 'visible'
+      }
+    };
+    if (displayValue && selectContext?.flattenOptions) {
+      const option = selectContext.flattenOptions.find(opt => opt.value === displayValue.value);
+      if (option?.data) {
+        const {
+          label,
+          value,
+          className,
+          style,
+          key,
+          ...rest
+        } = option.data;
+        restProps = {
+          ...restProps,
+          ...rest,
+          title: getTitle(option.data),
+          className: clsx(restProps.className, className),
+          style: {
+            ...restProps.style,
+            ...style
+          }
+        };
+      }
+    }
+    if (displayValue && !restProps.title) {
+      restProps.title = getTitle(displayValue);
+    }
+    if (rootTitle !== undefined) {
+      restProps.title = rootTitle;
+    }
+    return restProps;
+  }, [displayValue, selectContext?.flattenOptions, prefixCls, mergedSearchValue, rootTitle]);
+  React.useEffect(() => {
+    if (combobox) {
+      setInputChanged(false);
+    }
+  }, [combobox, activeValue]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-content`
+  }, displayValue ? /*#__PURE__*/React.createElement("div", optionProps, displayValue.label) : /*#__PURE__*/React.createElement(Placeholder, {
+    show: !mergedSearchValue
+  }), /*#__PURE__*/React.createElement(Input, _extends({
+    ref: ref
+  }, inputProps, {
+    value: mergedSearchValue,
+    maxLength: mode === 'combobox' ? maxLength : undefined,
+    onChange: e => {
+      setInputChanged(true);
+      inputProps.onChange?.(e);
+    }
+  })));
+});
+export default SingleContent;

package/es/SelectInput/Content/index.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+export interface SharedContentProps {
+    inputProps: React.InputHTMLAttributes<HTMLInputElement>;
+}
+declare const SelectContent: React.ForwardRefExoticComponent<React.RefAttributes<HTMLInputElement>>;
+export default SelectContent;

package/es/SelectInput/Content/index.js

@@ -0,0 +1,37 @@
+import * as React from 'react';
+import pickAttrs from "@rc-component/util/es/pickAttrs";
+import SingleContent from "./SingleContent";
+import MultipleContent from "./MultipleContent";
+import { useSelectInputContext } from "../context";
+import useBaseProps from "../../hooks/useBaseProps";
+const SelectContent = /*#__PURE__*/React.forwardRef(function SelectContent(_, ref) {
+  const {
+    multiple,
+    onInputKeyDown,
+    tabIndex
+  } = useSelectInputContext();
+  const baseProps = useBaseProps();
+  const {
+    showSearch
+  } = baseProps;
+  const ariaProps = pickAttrs(baseProps, {
+    aria: true
+  });
+  const sharedInputProps = {
+    ...ariaProps,
+    onKeyDown: onInputKeyDown,
+    readOnly: !showSearch,
+    tabIndex
+  };
+  if (multiple) {
+    return /*#__PURE__*/React.createElement(MultipleContent, {
+      ref: ref,
+      inputProps: sharedInputProps
+    });
+  }
+  return /*#__PURE__*/React.createElement(SingleContent, {
+    ref: ref,
+    inputProps: sharedInputProps
+  });
+});
+export default SelectContent;

package/es/SelectInput/Input.d.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+export interface InputProps {
+    id?: string;
+    readOnly?: boolean;
+    value?: string;
+    onChange?: React.ChangeEventHandler<HTMLInputElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
+    onFocus?: React.FocusEventHandler<HTMLInputElement>;
+    onBlur?: React.FocusEventHandler<HTMLInputElement>;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    maxLength?: number;
+    /** width always match content width */
+    syncWidth?: boolean;
+    /** autoComplete for input */
+    autoComplete?: string;
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+export default Input;

package/es/SelectInput/Input.js

@@ -0,0 +1,214 @@
+import * as React from 'react';
+import { clsx } from 'clsx';
+import { useSelectInputContext } from "./context";
+import useLayoutEffect from "@rc-component/util/es/hooks/useLayoutEffect";
+import useBaseProps from "../hooks/useBaseProps";
+import { composeRef } from "@rc-component/util/es/ref";
+const Input = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    onChange,
+    onKeyDown,
+    onBlur,
+    style,
+    syncWidth,
+    value,
+    className,
+    autoComplete,
+    ...restProps
+  } = props;
+  const {
+    prefixCls,
+    mode,
+    onSearch,
+    onSearchSubmit,
+    onInputBlur,
+    autoFocus,
+    tokenWithEnter,
+    components: {
+      input: InputComponent = 'input'
+    }
+  } = useSelectInputContext();
+  const {
+    id,
+    classNames,
+    styles,
+    open,
+    activeDescendantId,
+    role,
+    disabled
+  } = useBaseProps() || {};
+  const inputCls = clsx(`${prefixCls}-input`, classNames?.input, className);
+
+  // Used to handle input method composition status
+  const compositionStatusRef = React.useRef(false);
+
+  // Used to handle paste content, similar to original Selector implementation
+  const pastedTextRef = React.useRef(null);
+
+  // ============================== Refs ==============================
+  const inputRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => inputRef.current);
+
+  // ============================== Data ==============================
+  // Handle input changes
+  const handleChange = event => {
+    let {
+      value: nextVal
+    } = event.target;
+
+    // Handle pasted text with tokenWithEnter, similar to original Selector implementation
+    if (tokenWithEnter && pastedTextRef.current && /[\r\n]/.test(pastedTextRef.current)) {
+      // CRLF will be treated as a single space for input element
+      const replacedText = pastedTextRef.current.replace(/[\r\n]+$/, '').replace(/\r\n/g, ' ').replace(/[\r\n]/g, ' ');
+      nextVal = nextVal.replace(replacedText, pastedTextRef.current);
+    }
+
+    // Reset pasted text reference
+    pastedTextRef.current = null;
+
+    // Call onSearch callback
+    if (onSearch) {
+      onSearch(nextVal, true, compositionStatusRef.current);
+    }
+
+    // Call original onChange callback
+    onChange?.(event);
+  };
+
+  // ============================ Keyboard ============================
+  // Handle keyboard events
+  const handleKeyDown = event => {
+    const {
+      key
+    } = event;
+    const {
+      value: nextVal
+    } = event.currentTarget;
+
+    // Handle Enter key submission - referencing Selector implementation
+    if (key === 'Enter' && mode === 'tags' && !compositionStatusRef.current && onSearchSubmit) {
+      onSearchSubmit(nextVal);
+    }
+
+    // Call original onKeyDown callback
+    onKeyDown?.(event);
+  };
+
+  // Handle blur events
+  const handleBlur = event => {
+    // Call onInputBlur callback
+    onInputBlur?.();
+
+    // Call original onBlur callback
+    onBlur?.(event);
+  };
+
+  // Handle input method composition start
+  const handleCompositionStart = () => {
+    compositionStatusRef.current = true;
+  };
+
+  // Handle input method composition end
+  const handleCompositionEnd = event => {
+    compositionStatusRef.current = false;
+
+    // Trigger search when input method composition ends, similar to original Selector
+    if (mode !== 'combobox') {
+      const {
+        value: nextVal
+      } = event.currentTarget;
+      onSearch?.(nextVal, true, false);
+    }
+  };
+
+  // Handle paste events to track pasted content
+  const handlePaste = event => {
+    const {
+      clipboardData
+    } = event;
+    const pastedValue = clipboardData?.getData('text');
+    pastedTextRef.current = pastedValue || '';
+  };
+
+  // ============================= Width ==============================
+  const [widthCssVar, setWidthCssVar] = React.useState(undefined);
+
+  // When syncWidth is enabled, adjust input width based on content
+  useLayoutEffect(() => {
+    const input = inputRef.current;
+    if (syncWidth && input) {
+      input.style.width = '0px';
+      const scrollWidth = input.scrollWidth;
+      setWidthCssVar(scrollWidth);
+
+      // Reset input style
+      input.style.width = '';
+    }
+  }, [syncWidth, value]);
+
+  // ============================= Render =============================
+  // Extract shared input props
+  const sharedInputProps = {
+    id,
+    type: mode === 'combobox' ? 'text' : 'search',
+    ...restProps,
+    ref: inputRef,
+    style: {
+      ...styles?.input,
+      ...style,
+      '--select-input-width': widthCssVar
+    },
+    autoFocus,
+    autoComplete: autoComplete || 'off',
+    className: inputCls,
+    disabled,
+    value: value || '',
+    onChange: handleChange,
+    onKeyDown: handleKeyDown,
+    onBlur: handleBlur,
+    onPaste: handlePaste,
+    onCompositionStart: handleCompositionStart,
+    onCompositionEnd: handleCompositionEnd,
+    // Accessibility attributes
+    role: 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
+  };
+
+  // Handle different InputComponent types
+  if ( /*#__PURE__*/React.isValidElement(InputComponent)) {
+    // If InputComponent is a ReactElement, use cloneElement with merged props
+    const existingProps = InputComponent.props || {};
+
+    // Start with shared props as base
+    const mergedProps = {
+      ...sharedInputProps,
+      ...existingProps
+    };
+
+    // Batch update function calls
+    Object.keys(existingProps).forEach(key => {
+      const existingValue = existingProps[key];
+      if (typeof existingValue === 'function') {
+        // Merge event handlers
+        mergedProps[key] = (...args) => {
+          existingValue(...args);
+          sharedInputProps[key]?.(...args);
+        };
+      }
+    });
+
+    // Update ref
+    mergedProps.ref = composeRef(InputComponent.ref, sharedInputProps.ref);
+    return /*#__PURE__*/React.cloneElement(InputComponent, mergedProps);
+  }
+
+  // If InputComponent is a component type, render normally
+  const Component = InputComponent;
+  return /*#__PURE__*/React.createElement(Component, sharedInputProps);
+});
+export default Input;

package/es/SelectInput/context.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+import type { SelectInputProps } from '.';
+export type ContentContextProps = SelectInputProps;
+declare const SelectInputContext: React.Context<SelectInputProps>;
+export declare function useSelectInputContext(): SelectInputProps;
+export default SelectInputContext;

package/es/SelectInput/context.js

@@ -0,0 +1,6 @@
+import * as React from 'react';
+const SelectInputContext = /*#__PURE__*/React.createContext(null);
+export function useSelectInputContext() {
+  return React.useContext(SelectInputContext);
+}
+export default SelectInputContext;

package/es/SelectInput/index.d.ts

@@ -0,0 +1,39 @@
+import * as React from 'react';
+import type { DisplayValueType, Mode, RenderNode } from '../interface';
+import type { ComponentsConfig } from '../hooks/useComponents';
+export interface SelectInputRef {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    nativeElement: HTMLDivElement;
+}
+export interface SelectInputProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'prefix'> {
+    prefixCls: string;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    clearIcon?: React.ReactNode;
+    removeIcon?: RenderNode;
+    multiple?: boolean;
+    displayValues: DisplayValueType[];
+    placeholder?: React.ReactNode;
+    searchValue?: string;
+    activeValue?: string;
+    mode?: Mode;
+    autoClearSearchValue?: boolean;
+    onSearch?: (searchText: string, fromTyping: boolean, isCompositing: boolean) => void;
+    onSearchSubmit?: (searchText: string) => void;
+    onInputBlur?: () => void;
+    onClearMouseDown?: React.MouseEventHandler<HTMLElement>;
+    onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onSelectorRemove?: (value: DisplayValueType) => void;
+    maxLength?: number;
+    autoFocus?: boolean;
+    /** Check if `tokenSeparators` contains `\n` or `\r\n` */
+    tokenWithEnter?: boolean;
+    className?: string;
+    style?: React.CSSProperties;
+    focused?: boolean;
+    components: ComponentsConfig;
+    children?: React.ReactElement;
+}
+declare const _default: React.ForwardRefExoticComponent<SelectInputProps & React.RefAttributes<SelectInputRef>>;
+export default _default;