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

package/lib/{hooks/useLayoutEffect.js → SelectInput/Affix.js}

@@ -3,23 +3,18 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = useLayoutEffect;
+exports.default = Affix;
 var React = _interopRequireWildcard(require("react"));
-var _commonUtil = require("../utils/commonUtil");
 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; }
-/* eslint-disable react-hooks/rules-of-hooks */
-
-/**
- * Wrap `React.useLayoutEffect` which will not throw warning message in test env
- */
-function useLayoutEffect(effect, deps) {
-  // Never happen in test env
-  if (_commonUtil.isBrowserClient) {
-    /* istanbul ignore next */
-    React.useLayoutEffect(effect, deps);
-  } else {
-    React.useEffect(effect, deps);
+// Affix is a simple wrapper which should not read context or logical props
+function Affix(props) {
+  const {
+    children,
+    ...restProps
+  } = props;
+  if (!children) {
+    return null;
   }
-}
-/* eslint-enable */
+  return /*#__PURE__*/React.createElement("div", restProps, children);
+}

package/lib/SelectInput/Content/MultipleContent.d.ts

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

package/lib/{Selector/MultipleSelector.js → SelectInput/Content/MultipleContent.js}

@@ -4,18 +4,19 @@ 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 React = _interopRequireWildcard(require("react"));
+var _clsx = require("clsx");
 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");
+var _Input = _interopRequireDefault(require("../Input"));
+var _context = require("../context");
+var _TransBtn = _interopRequireDefault(require("../../TransBtn"));
+var _commonUtil = require("../../utils/commonUtil");
+var _useBaseProps = _interopRequireDefault(require("../../hooks/useBaseProps"));
+var _Placeholder = _interopRequireDefault(require("./Placeholder"));
 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 _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function itemKey(value) {
   return value.key ?? value.value;
 }
@@ -23,63 +24,61 @@ const onPreventMouseDown = event => {
   event.preventDefault();
   event.stopPropagation();
 };
-const SelectSelector = props => {
+var _default = exports.default = /*#__PURE__*/React.forwardRef(function MultipleContent({
+  inputProps
+}, ref) {
   const {
-    id,
     prefixCls,
-    values,
-    open,
+    displayValues,
     searchValue,
-    autoClearSearchValue,
-    inputRef,
-    placeholder,
-    disabled,
     mode,
+    onSelectorRemove,
+    removeIcon: removeIconFromContext
+  } = (0, _context.useSelectInputContext)();
+  const {
+    disabled,
     showSearch,
-    autoFocus,
-    autoComplete,
-    activeDescendantId,
-    tabIndex,
-    removeIcon,
-    maxTagCount,
+    triggerOpen,
+    toggleOpen,
+    autoClearSearchValue,
+    tagRender: tagRenderFromContext,
+    maxTagPlaceholder: maxTagPlaceholderFromContext,
     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`;
+    maxTagCount
+  } = (0, _useBaseProps.default)();
+  const selectionItemPrefixCls = `${prefixCls}-selection-item`;
 
   // ===================== Search ======================
-  const inputValue = open || mode === 'multiple' && autoClearSearchValue === false || mode === 'tags' ? searchValue : '';
-  const inputEditable = mode === 'tags' || mode === 'multiple' && autoClearSearchValue === false || showSearch && (open || focused);
+  // 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;
 
-  // We measure width and set to the input immediately
-  (0, _useLayoutEffect.default)(() => {
-    setInputWidth(measureRef.current.scrollWidth);
-  }, [inputValue]);
+  // 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);
+  };
 
-  // ===================== Render ======================
+  // ======================== Item ========================
   // >>> 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
+    className: (0, _clsx.clsx)(selectionItemPrefixCls, {
+      [`${selectionItemPrefixCls}-disabled`]: itemDisabled
     })
   }, /*#__PURE__*/React.createElement("span", {
-    className: `${selectionPrefixCls}-item-content`
+    className: `${selectionItemPrefixCls}-content`
   }, content), closable && /*#__PURE__*/React.createElement(_TransBtn.default, {
-    className: `${selectionPrefixCls}-item-remove`,
+    className: `${selectionItemPrefixCls}-remove`,
     onMouseDown: onPreventMouseDown,
     onClick: onClose,
     customizeIcon: removeIcon
@@ -87,7 +86,7 @@ const SelectSelector = props => {
   const customizeRenderSelector = (value, content, itemDisabled, closable, onClose, isMaxTag, info) => {
     const onMouseDown = e => {
       onPreventMouseDown(e);
-      onToggleOpen(!open);
+      onToggleOpen(!triggerOpen);
     };
     return /*#__PURE__*/React.createElement("span", {
       onMouseDown: onMouseDown
@@ -101,6 +100,8 @@ const SelectSelector = props => {
       isMaxTag: !!isMaxTag
     }));
   };
+
+  // ====================== Overflow ======================
   const renderItem = (valueItem, info) => {
     const {
       disabled: itemDisabled,
@@ -127,7 +128,7 @@ const SelectSelector = props => {
   };
   const renderRest = omittedValues => {
     // https://github.com/ant-design/ant-design/issues/48930
-    if (!values.length) {
+    if (!displayValues.length) {
       return null;
     }
     const content = typeof maxTagPlaceholder === 'function' ? maxTagPlaceholder(omittedValues) : maxTagPlaceholder;
@@ -136,59 +137,25 @@ const SelectSelector = props => {
     }, 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,
+  // ======================= Render =======================
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(_Placeholder.default, {
+    show: !searchValue || !triggerOpen
+  }), /*#__PURE__*/React.createElement(_rcOverflow.default, {
+    prefixCls: `${prefixCls}-content`,
+    data: displayValues,
     renderItem: renderItem,
-    renderRest: renderRest,
-    suffix: inputNode,
+    renderRest: renderRest
+    // suffix={inputNode}
+    ,
+    suffix: /*#__PURE__*/React.createElement(_Input.default, _extends({
+      ref: ref,
+      disabled: disabled,
+      readOnly: !inputEditable
+    }, inputProps, {
+      value: inputValue || '',
+      syncWidth: true
+    })),
     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/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/lib/SelectInput/Content/Placeholder.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Placeholder;
+var React = _interopRequireWildcard(require("react"));
+var _context = require("../context");
+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 Placeholder(props) {
+  const {
+    prefixCls,
+    placeholder,
+    displayValues
+  } = (0, _context.useSelectInputContext)();
+  const {
+    show
+  } = props;
+  if (displayValues.length) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement("div", {
+    className: `${prefixCls}-placeholder`,
+    style: {
+      visibility: show ? 'visible' : 'hidden'
+    }
+  }, placeholder);
+}

package/lib/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/lib/SelectInput/Content/SingleContent.js

@@ -0,0 +1,107 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _clsx = require("clsx");
+var _Input = _interopRequireDefault(require("../Input"));
+var _context = require("../context");
+var _useBaseProps = _interopRequireDefault(require("../../hooks/useBaseProps"));
+var _Placeholder = _interopRequireDefault(require("./Placeholder"));
+var _SelectContext = _interopRequireDefault(require("../../SelectContext"));
+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 _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 SingleContent = /*#__PURE__*/React.forwardRef(({
+  inputProps
+}, ref) => {
+  const {
+    prefixCls,
+    searchValue,
+    activeValue,
+    displayValues,
+    maxLength,
+    mode
+  } = (0, _context.useSelectInputContext)();
+  const {
+    triggerOpen,
+    title: rootTitle,
+    showSearch
+  } = (0, _useBaseProps.default)();
+  const selectContext = React.useContext(_SelectContext.default);
+  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: (0, _commonUtil.getTitle)(option.data),
+          className: (0, _clsx.clsx)(restProps.className, className),
+          style: {
+            ...restProps.style,
+            ...style
+          }
+        };
+      }
+    }
+    if (displayValue && !restProps.title) {
+      restProps.title = (0, _commonUtil.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.default, {
+    show: !mergedSearchValue
+  }), /*#__PURE__*/React.createElement(_Input.default, _extends({
+    ref: ref
+  }, inputProps, {
+    value: mergedSearchValue,
+    maxLength: mode === 'combobox' ? maxLength : undefined,
+    onChange: e => {
+      setInputChanged(true);
+      inputProps.onChange?.(e);
+    }
+  })));
+});
+var _default = exports.default = SingleContent;

package/lib/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/lib/SelectInput/Content/index.js

@@ -0,0 +1,46 @@
+"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 _SingleContent = _interopRequireDefault(require("./SingleContent"));
+var _MultipleContent = _interopRequireDefault(require("./MultipleContent"));
+var _context = require("../context");
+var _useBaseProps = _interopRequireDefault(require("../../hooks/useBaseProps"));
+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 SelectContent = /*#__PURE__*/React.forwardRef(function SelectContent(_, ref) {
+  const {
+    multiple,
+    onInputKeyDown,
+    tabIndex
+  } = (0, _context.useSelectInputContext)();
+  const baseProps = (0, _useBaseProps.default)();
+  const {
+    showSearch
+  } = baseProps;
+  const ariaProps = (0, _pickAttrs.default)(baseProps, {
+    aria: true
+  });
+  const sharedInputProps = {
+    ...ariaProps,
+    onKeyDown: onInputKeyDown,
+    readOnly: !showSearch,
+    tabIndex
+  };
+  if (multiple) {
+    return /*#__PURE__*/React.createElement(_MultipleContent.default, {
+      ref: ref,
+      inputProps: sharedInputProps
+    });
+  }
+  return /*#__PURE__*/React.createElement(_SingleContent.default, {
+    ref: ref,
+    inputProps: sharedInputProps
+  });
+});
+var _default = exports.default = SelectContent;

package/lib/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;