@rc-component/select 1.0.0

package/lib/BaseSelect/index.js

@@ -0,0 +1,579 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isMultiple = exports.default = void 0;
+var _classnames = _interopRequireDefault(require("classnames"));
+var _useLayoutEffect = _interopRequireDefault(require("@rc-component/util/lib/hooks/useLayoutEffect"));
+var _useMergedState = _interopRequireDefault(require("@rc-component/util/lib/hooks/useMergedState"));
+var _isMobile = _interopRequireDefault(require("@rc-component/util/lib/isMobile"));
+var _ref = require("@rc-component/util/lib/ref");
+var React = _interopRequireWildcard(require("react"));
+var _useAllowClear = require("../hooks/useAllowClear");
+var _useBaseProps = require("../hooks/useBaseProps");
+var _useDelayReset = _interopRequireDefault(require("../hooks/useDelayReset"));
+var _useLock = _interopRequireDefault(require("../hooks/useLock"));
+var _useSelectTriggerControl = _interopRequireDefault(require("../hooks/useSelectTriggerControl"));
+var _Selector = _interopRequireDefault(require("../Selector"));
+var _SelectTrigger = _interopRequireDefault(require("../SelectTrigger"));
+var _TransBtn = _interopRequireDefault(require("../TransBtn"));
+var _valueUtil = require("../utils/valueUtil");
+var _SelectContext = _interopRequireDefault(require("../SelectContext"));
+var _Polite = _interopRequireDefault(require("./Polite"));
+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 DEFAULT_OMIT_PROPS = ['value', 'onChange', 'removeIcon', 'placeholder', 'autoFocus', 'maxTagCount', 'maxTagTextLength', 'maxTagPlaceholder', 'choiceTransitionName', 'onInputKeyDown', 'onPopupScroll', 'tabIndex'];
+const isMultiple = mode => mode === 'tags' || mode === 'multiple';
+exports.isMultiple = isMultiple;
+const BaseSelect = /*#__PURE__*/React.forwardRef((props, ref) => {
+  const {
+    id,
+    prefixCls,
+    className,
+    showSearch,
+    tagRender,
+    showScrollBar = 'optional',
+    direction,
+    omitDomProps,
+    // Value
+    displayValues,
+    onDisplayValuesChange,
+    emptyOptions,
+    notFoundContent = 'Not Found',
+    onClear,
+    // Mode
+    mode,
+    // Status
+    disabled,
+    loading,
+    // Customize Input
+    getInputElement,
+    getRawInputElement,
+    // Open
+    open,
+    defaultOpen,
+    onPopupVisibleChange,
+    // Active
+    activeValue,
+    onActiveValueChange,
+    activeDescendantId,
+    // Search
+    searchValue,
+    autoClearSearchValue,
+    onSearch,
+    onSearchSplit,
+    tokenSeparators,
+    // Icons
+    allowClear,
+    prefix,
+    suffixIcon,
+    clearIcon,
+    // Dropdown
+    OptionList,
+    animation,
+    transitionName,
+    popupStyle,
+    popupClassName,
+    popupMatchSelectWidth,
+    popupRender,
+    popupAlign,
+    placement,
+    builtinPlacements,
+    getPopupContainer,
+    // Focus
+    showAction = [],
+    onFocus,
+    onBlur,
+    // Rest Events
+    onKeyUp,
+    onKeyDown,
+    onMouseDown,
+    // Rest Props
+    ...restProps
+  } = props;
+
+  // ============================== MISC ==============================
+  const multiple = isMultiple(mode);
+  const mergedShowSearch = (showSearch !== undefined ? showSearch : multiple) || mode === 'combobox';
+  const domProps = {
+    ...restProps
+  };
+  DEFAULT_OMIT_PROPS.forEach(propName => {
+    delete domProps[propName];
+  });
+  omitDomProps?.forEach(propName => {
+    delete domProps[propName];
+  });
+
+  // ============================= Mobile =============================
+  const [mobile, setMobile] = React.useState(false);
+  React.useEffect(() => {
+    // Only update on the client side
+    setMobile((0, _isMobile.default)());
+  }, []);
+
+  // ============================== Refs ==============================
+  const containerRef = React.useRef(null);
+  const selectorDomRef = React.useRef(null);
+  const triggerRef = React.useRef(null);
+  const selectorRef = React.useRef(null);
+  const listRef = React.useRef(null);
+  const blurRef = React.useRef(false);
+
+  /** Used for component focused management */
+  const [mockFocused, setMockFocused, cancelSetMockFocused] = (0, _useDelayReset.default)();
+
+  // =========================== Imperative ===========================
+  React.useImperativeHandle(ref, () => ({
+    focus: selectorRef.current?.focus,
+    blur: selectorRef.current?.blur,
+    scrollTo: arg => listRef.current?.scrollTo(arg),
+    nativeElement: containerRef.current || selectorDomRef.current
+  }));
+
+  // ========================== Search Value ==========================
+  const mergedSearchValue = React.useMemo(() => {
+    if (mode !== 'combobox') {
+      return searchValue;
+    }
+    const val = displayValues[0]?.value;
+    return typeof val === 'string' || typeof val === 'number' ? String(val) : '';
+  }, [searchValue, mode, displayValues]);
+
+  // ========================== Custom Input ==========================
+  // Only works in `combobox`
+  const customizeInputElement = mode === 'combobox' && typeof getInputElement === 'function' && getInputElement() || null;
+
+  // Used for customize replacement for `rc-cascader`
+  const customizeRawInputElement = typeof getRawInputElement === 'function' && getRawInputElement();
+  const customizeRawInputRef = (0, _ref.useComposeRef)(selectorDomRef, customizeRawInputElement?.props?.ref);
+
+  // ============================== Open ==============================
+  // SSR not support Portal which means we need delay `open` for the first time render
+  const [rendered, setRendered] = React.useState(false);
+  (0, _useLayoutEffect.default)(() => {
+    setRendered(true);
+  }, []);
+  const [innerOpen, setInnerOpen] = (0, _useMergedState.default)(false, {
+    defaultValue: defaultOpen,
+    value: open
+  });
+  let mergedOpen = rendered ? innerOpen : false;
+
+  // Not trigger `open` in `combobox` when `notFoundContent` is empty
+  const emptyListContent = !notFoundContent && emptyOptions;
+  if (disabled || emptyListContent && mergedOpen && mode === 'combobox') {
+    mergedOpen = false;
+  }
+  const triggerOpen = emptyListContent ? false : mergedOpen;
+  const onToggleOpen = React.useCallback(newOpen => {
+    const nextOpen = newOpen !== undefined ? newOpen : !mergedOpen;
+    if (!disabled) {
+      setInnerOpen(nextOpen);
+      if (mergedOpen !== nextOpen) {
+        onPopupVisibleChange?.(nextOpen);
+      }
+    }
+  }, [disabled, mergedOpen, setInnerOpen, onPopupVisibleChange]);
+
+  // ============================= Search =============================
+  const tokenWithEnter = React.useMemo(() => (tokenSeparators || []).some(tokenSeparator => ['\n', '\r\n'].includes(tokenSeparator)), [tokenSeparators]);
+  const {
+    maxCount,
+    rawValues
+  } = React.useContext(_SelectContext.default) || {};
+  const onInternalSearch = (searchText, fromTyping, isCompositing) => {
+    if (multiple && (0, _valueUtil.isValidCount)(maxCount) && rawValues?.size >= maxCount) {
+      return;
+    }
+    let ret = true;
+    let newSearchText = searchText;
+    onActiveValueChange?.(null);
+    const separatedList = (0, _valueUtil.getSeparatedContent)(searchText, tokenSeparators, (0, _valueUtil.isValidCount)(maxCount) ? maxCount - rawValues.size : undefined);
+
+    // Check if match the `tokenSeparators`
+    const patchLabels = isCompositing ? null : separatedList;
+
+    // Ignore combobox since it's not split-able
+    if (mode !== 'combobox' && patchLabels) {
+      newSearchText = '';
+      onSearchSplit?.(patchLabels);
+
+      // Should close when paste finish
+      onToggleOpen(false);
+
+      // Tell Selector that break next actions
+      ret = false;
+    }
+    if (onSearch && mergedSearchValue !== newSearchText) {
+      onSearch(newSearchText, {
+        source: fromTyping ? 'typing' : 'effect'
+      });
+    }
+    return ret;
+  };
+
+  // Only triggered when menu is closed & mode is tags
+  // If menu is open, OptionList will take charge
+  // If mode isn't tags, press enter is not meaningful when you can't see any option
+  const onInternalSearchSubmit = searchText => {
+    // prevent empty tags from appearing when you click the Enter button
+    if (!searchText || !searchText.trim()) {
+      return;
+    }
+    onSearch(searchText, {
+      source: 'submit'
+    });
+  };
+
+  // Close will clean up single mode search text
+  React.useEffect(() => {
+    if (!mergedOpen && !multiple && mode !== 'combobox') {
+      onInternalSearch('', false, false);
+    }
+  }, [mergedOpen]);
+
+  // ============================ Disabled ============================
+  // Close dropdown & remove focus state when disabled change
+  React.useEffect(() => {
+    if (innerOpen && disabled) {
+      setInnerOpen(false);
+    }
+
+    // After onBlur is triggered, the focused does not need to be reset
+    if (disabled && !blurRef.current) {
+      setMockFocused(false);
+    }
+  }, [disabled]);
+
+  // ============================ Keyboard ============================
+  /**
+   * We record input value here to check if can press to clean up by backspace
+   * - null: Key is not down, this is reset by key up
+   * - true: Search text is empty when first time backspace down
+   * - false: Search text is not empty when first time backspace down
+   */
+  const [getClearLock, setClearLock] = (0, _useLock.default)();
+  const keyLockRef = React.useRef(false);
+
+  // KeyDown
+  const onInternalKeyDown = (event, ...rest) => {
+    const clearLock = getClearLock();
+    const {
+      key
+    } = event;
+    const isEnterKey = key === 'Enter';
+    if (isEnterKey) {
+      // Do not submit form when type in the input
+      if (mode !== 'combobox') {
+        event.preventDefault();
+      }
+
+      // We only manage open state here, close logic should handle by list component
+      if (!mergedOpen) {
+        onToggleOpen(true);
+      }
+    }
+    setClearLock(!!mergedSearchValue);
+
+    // Remove value by `backspace`
+    if (key === 'Backspace' && !clearLock && multiple && !mergedSearchValue && displayValues.length) {
+      const cloneDisplayValues = [...displayValues];
+      let removedDisplayValue = null;
+      for (let i = cloneDisplayValues.length - 1; i >= 0; i -= 1) {
+        const current = cloneDisplayValues[i];
+        if (!current.disabled) {
+          cloneDisplayValues.splice(i, 1);
+          removedDisplayValue = current;
+          break;
+        }
+      }
+      if (removedDisplayValue) {
+        onDisplayValuesChange(cloneDisplayValues, {
+          type: 'remove',
+          values: [removedDisplayValue]
+        });
+      }
+    }
+    if (mergedOpen && (!isEnterKey || !keyLockRef.current)) {
+      // Lock the Enter key after it is pressed to avoid repeated triggering of the onChange event.
+      if (isEnterKey) {
+        keyLockRef.current = true;
+      }
+      listRef.current?.onKeyDown(event, ...rest);
+    }
+    onKeyDown?.(event, ...rest);
+  };
+
+  // KeyUp
+  const onInternalKeyUp = (event, ...rest) => {
+    if (mergedOpen) {
+      listRef.current?.onKeyUp(event, ...rest);
+    }
+    if (event.key === 'Enter') {
+      keyLockRef.current = false;
+    }
+    onKeyUp?.(event, ...rest);
+  };
+
+  // ============================ Selector ============================
+  const onSelectorRemove = val => {
+    const newValues = displayValues.filter(i => i !== val);
+    onDisplayValuesChange(newValues, {
+      type: 'remove',
+      values: [val]
+    });
+  };
+  const onInputBlur = () => {
+    // Unlock the Enter key after the input blur; otherwise, the Enter key needs to be pressed twice to trigger the correct effect.
+    keyLockRef.current = false;
+  };
+
+  // ========================== Focus / Blur ==========================
+  /** Record real focus status */
+  const focusRef = React.useRef(false);
+  const onContainerFocus = (...args) => {
+    setMockFocused(true);
+    if (!disabled) {
+      if (onFocus && !focusRef.current) {
+        onFocus(...args);
+      }
+
+      // `showAction` should handle `focus` if set
+      if (showAction.includes('focus')) {
+        onToggleOpen(true);
+      }
+    }
+    focusRef.current = true;
+  };
+  const onContainerBlur = (...args) => {
+    blurRef.current = true;
+    setMockFocused(false, () => {
+      focusRef.current = false;
+      blurRef.current = false;
+      onToggleOpen(false);
+    });
+    if (disabled) {
+      return;
+    }
+    if (mergedSearchValue) {
+      // `tags` mode should move `searchValue` into values
+      if (mode === 'tags') {
+        onSearch(mergedSearchValue, {
+          source: 'submit'
+        });
+      } else if (mode === 'multiple') {
+        // `multiple` mode only clean the search value but not trigger event
+        onSearch('', {
+          source: 'blur'
+        });
+      }
+    }
+    if (onBlur) {
+      onBlur(...args);
+    }
+  };
+
+  // Give focus back of Select
+  const activeTimeoutIds = [];
+  React.useEffect(() => () => {
+    activeTimeoutIds.forEach(timeoutId => clearTimeout(timeoutId));
+    activeTimeoutIds.splice(0, activeTimeoutIds.length);
+  }, []);
+  const onInternalMouseDown = (event, ...restArgs) => {
+    const {
+      target
+    } = event;
+    const popupElement = triggerRef.current?.getPopupElement();
+
+    // We should give focus back to selector if clicked item is not focusable
+    if (popupElement && popupElement.contains(target)) {
+      const timeoutId = setTimeout(() => {
+        const index = activeTimeoutIds.indexOf(timeoutId);
+        if (index !== -1) {
+          activeTimeoutIds.splice(index, 1);
+        }
+        cancelSetMockFocused();
+        if (!mobile && !popupElement.contains(document.activeElement)) {
+          selectorRef.current?.focus();
+        }
+      });
+      activeTimeoutIds.push(timeoutId);
+    }
+    onMouseDown?.(event, ...restArgs);
+  };
+
+  // ============================ Dropdown ============================
+  const [, forceUpdate] = React.useState({});
+  // We need force update here since popup dom is render async
+  function onPopupMouseEnter() {
+    forceUpdate({});
+  }
+
+  // Used for raw custom input trigger
+  let onTriggerVisibleChange;
+  if (customizeRawInputElement) {
+    onTriggerVisibleChange = newOpen => {
+      onToggleOpen(newOpen);
+    };
+  }
+
+  // Close when click on non-select element
+  (0, _useSelectTriggerControl.default)(() => [containerRef.current, triggerRef.current?.getPopupElement()], triggerOpen, onToggleOpen, !!customizeRawInputElement);
+
+  // ============================ Context =============================
+  const baseSelectContext = React.useMemo(() => ({
+    ...props,
+    notFoundContent,
+    open: mergedOpen,
+    triggerOpen,
+    id,
+    showSearch: mergedShowSearch,
+    multiple,
+    toggleOpen: onToggleOpen,
+    showScrollBar
+  }), [props, notFoundContent, triggerOpen, mergedOpen, id, mergedShowSearch, multiple, onToggleOpen, showScrollBar]);
+
+  // ==================================================================
+  // ==                            Render                            ==
+  // ==================================================================
+
+  // ============================= Arrow ==============================
+  const showSuffixIcon = !!suffixIcon || loading;
+  let arrowNode;
+  if (showSuffixIcon) {
+    arrowNode = /*#__PURE__*/React.createElement(_TransBtn.default, {
+      className: (0, _classnames.default)(`${prefixCls}-arrow`, {
+        [`${prefixCls}-arrow-loading`]: loading
+      }),
+      customizeIcon: suffixIcon,
+      customizeIconProps: {
+        loading,
+        searchValue: mergedSearchValue,
+        open: mergedOpen,
+        focused: mockFocused,
+        showSearch: mergedShowSearch
+      }
+    });
+  }
+
+  // ============================= Clear ==============================
+  const onClearMouseDown = () => {
+    onClear?.();
+    selectorRef.current?.focus();
+    onDisplayValuesChange([], {
+      type: 'clear',
+      values: displayValues
+    });
+    onInternalSearch('', false, false);
+  };
+  const {
+    allowClear: mergedAllowClear,
+    clearIcon: clearNode
+  } = (0, _useAllowClear.useAllowClear)(prefixCls, onClearMouseDown, displayValues, allowClear, clearIcon, disabled, mergedSearchValue, mode);
+
+  // =========================== OptionList ===========================
+  const optionList = /*#__PURE__*/React.createElement(OptionList, {
+    ref: listRef
+  });
+
+  // ============================= Select =============================
+  const mergedClassName = (0, _classnames.default)(prefixCls, className, {
+    [`${prefixCls}-focused`]: mockFocused,
+    [`${prefixCls}-multiple`]: multiple,
+    [`${prefixCls}-single`]: !multiple,
+    [`${prefixCls}-allow-clear`]: allowClear,
+    [`${prefixCls}-show-arrow`]: showSuffixIcon,
+    [`${prefixCls}-disabled`]: disabled,
+    [`${prefixCls}-loading`]: loading,
+    [`${prefixCls}-open`]: mergedOpen,
+    [`${prefixCls}-customize-input`]: customizeInputElement,
+    [`${prefixCls}-show-search`]: mergedShowSearch
+  });
+
+  // >>> Selector
+  const selectorNode = /*#__PURE__*/React.createElement(_SelectTrigger.default, {
+    ref: triggerRef,
+    disabled: disabled,
+    prefixCls: prefixCls,
+    visible: triggerOpen,
+    popupElement: optionList,
+    animation: animation,
+    transitionName: transitionName,
+    popupStyle: popupStyle,
+    popupClassName: popupClassName,
+    direction: direction,
+    popupMatchSelectWidth: popupMatchSelectWidth,
+    popupRender: popupRender,
+    popupAlign: popupAlign,
+    placement: placement,
+    builtinPlacements: builtinPlacements,
+    getPopupContainer: getPopupContainer,
+    empty: emptyOptions,
+    getTriggerDOMNode: node =>
+    // TODO: This is workaround and should be removed in `rc-select`
+    // And use new standard `nativeElement` for ref.
+    // But we should update `rc-resize-observer` first.
+    selectorDomRef.current || node,
+    onPopupVisibleChange: onTriggerVisibleChange,
+    onPopupMouseEnter: onPopupMouseEnter
+  }, customizeRawInputElement ? ( /*#__PURE__*/React.cloneElement(customizeRawInputElement, {
+    ref: customizeRawInputRef
+  })) : /*#__PURE__*/React.createElement(_Selector.default, _extends({}, props, {
+    domRef: selectorDomRef,
+    prefixCls: prefixCls,
+    inputElement: customizeInputElement,
+    ref: selectorRef,
+    id: id,
+    prefix: prefix,
+    showSearch: mergedShowSearch,
+    autoClearSearchValue: autoClearSearchValue,
+    mode: mode,
+    activeDescendantId: activeDescendantId,
+    tagRender: tagRender,
+    values: displayValues,
+    open: mergedOpen,
+    onToggleOpen: onToggleOpen,
+    activeValue: activeValue,
+    searchValue: mergedSearchValue,
+    onSearch: onInternalSearch,
+    onSearchSubmit: onInternalSearchSubmit,
+    onRemove: onSelectorRemove,
+    tokenWithEnter: tokenWithEnter,
+    onInputBlur: onInputBlur
+  })));
+
+  // >>> Render
+  let renderNode;
+
+  // Render raw
+  if (customizeRawInputElement) {
+    renderNode = selectorNode;
+  } else {
+    renderNode = /*#__PURE__*/React.createElement("div", _extends({
+      className: mergedClassName
+    }, domProps, {
+      ref: containerRef,
+      onMouseDown: onInternalMouseDown,
+      onKeyDown: onInternalKeyDown,
+      onKeyUp: onInternalKeyUp,
+      onFocus: onContainerFocus,
+      onBlur: onContainerBlur
+    }), /*#__PURE__*/React.createElement(_Polite.default, {
+      visible: mockFocused && !mergedOpen,
+      values: displayValues
+    }), selectorNode, arrowNode, mergedAllowClear && clearNode);
+  }
+  return /*#__PURE__*/React.createElement(_useBaseProps.BaseSelectContext.Provider, {
+    value: baseSelectContext
+  }, renderNode);
+});
+
+// Set display name for dev
+if (process.env.NODE_ENV !== 'production') {
+  BaseSelect.displayName = 'BaseSelect';
+}
+var _default = exports.default = BaseSelect;

package/lib/OptGroup.d.ts

@@ -0,0 +1,12 @@
+import type * as React from 'react';
+import type { DefaultOptionType } from './Select';
+export interface OptGroupProps extends Omit<DefaultOptionType, 'options'> {
+    children?: React.ReactNode;
+}
+export interface OptionGroupFC extends React.FC<OptGroupProps> {
+    /** Legacy for check if is a Option Group */
+    isSelectOptGroup: boolean;
+}
+/** This is a placeholder, not real render in dom */
+declare const OptGroup: OptionGroupFC;
+export default OptGroup;

package/lib/OptGroup.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* istanbul ignore file */
+
+/** This is a placeholder, not real render in dom */
+const OptGroup = () => null;
+OptGroup.isSelectOptGroup = true;
+var _default = exports.default = OptGroup;

package/lib/Option.d.ts

@@ -0,0 +1,14 @@
+import type * as React from 'react';
+import type { DefaultOptionType } from './Select';
+export interface OptionProps extends Omit<DefaultOptionType, 'label'> {
+    children: React.ReactNode;
+    /** Save for customize data */
+    [prop: string]: any;
+}
+export interface OptionFC extends React.FC<OptionProps> {
+    /** Legacy for check if is a Option Group */
+    isSelectOption: boolean;
+}
+/** This is a placeholder, not real render in dom */
+declare const Option: OptionFC;
+export default Option;

package/lib/Option.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+/* istanbul ignore file */
+
+/** This is a placeholder, not real render in dom */
+const Option = () => null;
+Option.isSelectOption = true;
+var _default = exports.default = Option;

package/lib/OptionList.d.ts

@@ -0,0 +1,10 @@
+import type { ScrollConfig } from 'rc-virtual-list/lib/List';
+import * as React from 'react';
+export type OptionListProps = Record<string, never>;
+export interface RefOptionListProps {
+    onKeyDown: React.KeyboardEventHandler;
+    onKeyUp: React.KeyboardEventHandler;
+    scrollTo?: (args: number | ScrollConfig) => void;
+}
+declare const RefOptionList: React.ForwardRefExoticComponent<React.RefAttributes<RefOptionListProps>>;
+export default RefOptionList;