@rc-component/select 1.0.0

package/es/interface.d.ts

@@ -0,0 +1,23 @@
+import type * as React from 'react';
+export type RawValueType = string | number;
+export interface FlattenOptionData<OptionType> {
+    label?: React.ReactNode;
+    data: OptionType;
+    key: React.Key;
+    value?: RawValueType;
+    groupOption?: boolean;
+    group?: boolean;
+}
+export interface DisplayValueType {
+    key?: React.Key;
+    value?: RawValueType;
+    label?: React.ReactNode;
+    title?: React.ReactNode;
+    disabled?: boolean;
+    index?: number;
+}
+export type RenderNode = React.ReactNode | ((props: any) => React.ReactNode);
+export type RenderDOMFunc = (props: any) => HTMLElement;
+export type Mode = 'multiple' | 'tags' | 'combobox';
+export type Placement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+export type DisplayInfoType = 'add' | 'remove' | 'clear';

package/es/interface.js

@@ -0,0 +1 @@
+export {};

package/es/utils/__mocks__/platformUtil.d.ts

@@ -0,0 +1 @@
+export declare function isPlatformMac(): boolean;

package/es/utils/__mocks__/platformUtil.js

@@ -0,0 +1,3 @@
+export function isPlatformMac() {
+  return true;
+}

package/es/utils/commonUtil.d.ts

@@ -0,0 +1,9 @@
+import type { DisplayValueType } from '../BaseSelect';
+export declare function toArray<T>(value: T | T[]): T[];
+export declare const isClient: HTMLElement;
+/** Is client side and not jsdom */
+export declare const isBrowserClient: HTMLElement;
+export declare function hasValue(value: any): boolean;
+/** combo mode no value judgment function */
+export declare function isComboNoValue(value: any): boolean;
+export declare function getTitle(item: DisplayValueType): string;

package/es/utils/commonUtil.js

@@ -0,0 +1,32 @@
+export function toArray(value) {
+  if (Array.isArray(value)) {
+    return value;
+  }
+  return value !== undefined ? [value] : [];
+}
+export const isClient = typeof window !== 'undefined' && window.document && window.document.documentElement;
+
+/** Is client side and not jsdom */
+export const isBrowserClient = process.env.NODE_ENV !== 'test' && isClient;
+export function hasValue(value) {
+  return value !== undefined && value !== null;
+}
+
+/** combo mode no value judgment function */
+export function isComboNoValue(value) {
+  return !value && value !== 0;
+}
+function isTitleType(title) {
+  return ['string', 'number'].includes(typeof title);
+}
+export function getTitle(item) {
+  let title = undefined;
+  if (item) {
+    if (isTitleType(item.title)) {
+      title = item.title.toString();
+    } else if (isTitleType(item.label)) {
+      title = item.label.toString();
+    }
+  }
+  return title;
+}

package/es/utils/keyUtil.d.ts

@@ -0,0 +1,2 @@
+/** keyCode Judgment function */
+export declare function isValidateOpenKey(currentKeyCode: number): boolean;

package/es/utils/keyUtil.js

@@ -0,0 +1,16 @@
+import KeyCode from "@rc-component/util/es/KeyCode";
+
+/** keyCode Judgment function */
+export function isValidateOpenKey(currentKeyCode) {
+  return (
+    // Undefined for Edge bug:
+    // https://github.com/ant-design/ant-design/issues/51292
+    currentKeyCode &&
+    // Other keys
+    ![
+    // System function button
+    KeyCode.ESC, KeyCode.SHIFT, KeyCode.BACKSPACE, KeyCode.TAB, KeyCode.WIN_KEY, KeyCode.ALT, KeyCode.META, KeyCode.WIN_KEY_RIGHT, KeyCode.CTRL, KeyCode.SEMICOLON, KeyCode.EQUALS, KeyCode.CAPS_LOCK, KeyCode.CONTEXT_MENU,
+    // F1-F12
+    KeyCode.F1, KeyCode.F2, KeyCode.F3, KeyCode.F4, KeyCode.F5, KeyCode.F6, KeyCode.F7, KeyCode.F8, KeyCode.F9, KeyCode.F10, KeyCode.F11, KeyCode.F12].includes(currentKeyCode)
+  );
+}

package/es/utils/legacyUtil.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import type { BaseOptionType, DefaultOptionType } from '../Select';
+export declare function convertChildrenToData<OptionType extends BaseOptionType = DefaultOptionType>(nodes: React.ReactNode, optionOnly?: boolean): OptionType[];

package/es/utils/legacyUtil.js

@@ -0,0 +1,44 @@
+import * as React from 'react';
+import toArray from "@rc-component/util/es/Children/toArray";
+function convertNodeToOption(node) {
+  const {
+    key,
+    props: {
+      children,
+      value,
+      ...restProps
+    }
+  } = node;
+  return {
+    key,
+    value: value !== undefined ? value : key,
+    children,
+    ...restProps
+  };
+}
+export function convertChildrenToData(nodes, optionOnly = false) {
+  return toArray(nodes).map((node, index) => {
+    if (! /*#__PURE__*/React.isValidElement(node) || !node.type) {
+      return null;
+    }
+    const {
+      type: {
+        isSelectOptGroup
+      },
+      key,
+      props: {
+        children,
+        ...restProps
+      }
+    } = node;
+    if (optionOnly || !isSelectOptGroup) {
+      return convertNodeToOption(node);
+    }
+    return {
+      key: `__RC_SELECT_GRP__${key === null ? index : key}__`,
+      label: key,
+      ...restProps,
+      options: convertChildrenToData(children)
+    };
+  }).filter(data => data);
+}

package/es/utils/platformUtil.d.ts

@@ -0,0 +1 @@
+export declare function isPlatformMac(): boolean;

package/es/utils/platformUtil.js

@@ -0,0 +1,4 @@
+/* istanbul ignore file */
+export function isPlatformMac() {
+  return /(mac\sos|macintosh)/i.test(navigator.appVersion);
+}

package/es/utils/valueUtil.d.ts

@@ -0,0 +1,24 @@
+import type { BaseOptionType, DefaultOptionType } from '../Select';
+import type { FieldNames } from '../Select';
+import type { FlattenOptionData } from '../interface';
+export declare function isValidCount(value?: number): boolean;
+export declare function fillFieldNames(fieldNames: FieldNames | undefined, childrenAsData: boolean): {
+    label: string;
+    value: string;
+    options: string;
+    groupLabel: string;
+};
+/**
+ * Flat options into flatten list.
+ * We use `optionOnly` here is aim to avoid user use nested option group.
+ * Here is simply set `key` to the index if not provided.
+ */
+export declare function flattenOptions<OptionType extends BaseOptionType = DefaultOptionType>(options: OptionType[], { fieldNames, childrenAsData }?: {
+    fieldNames?: FieldNames;
+    childrenAsData?: boolean;
+}): FlattenOptionData<OptionType>[];
+/**
+ * Inject `props` into `option` for legacy usage
+ */
+export declare function injectPropsWithOption<T extends object>(option: T): T;
+export declare const getSeparatedContent: (text: string, tokens: string[], end?: number) => string[];

package/es/utils/valueUtil.js

@@ -0,0 +1,128 @@
+import warning from "@rc-component/util/es/warning";
+function getKey(data, index) {
+  const {
+    key
+  } = data;
+  let value;
+  if ('value' in data) {
+    ({
+      value
+    } = data);
+  }
+  if (key !== null && key !== undefined) {
+    return key;
+  }
+  if (value !== undefined) {
+    return value;
+  }
+  return `rc-index-key-${index}`;
+}
+export function isValidCount(value) {
+  return typeof value !== 'undefined' && !Number.isNaN(value);
+}
+export function fillFieldNames(fieldNames, childrenAsData) {
+  const {
+    label,
+    value,
+    options,
+    groupLabel
+  } = fieldNames || {};
+  const mergedLabel = label || (childrenAsData ? 'children' : 'label');
+  return {
+    label: mergedLabel,
+    value: value || 'value',
+    options: options || 'options',
+    groupLabel: groupLabel || mergedLabel
+  };
+}
+
+/**
+ * Flat options into flatten list.
+ * We use `optionOnly` here is aim to avoid user use nested option group.
+ * Here is simply set `key` to the index if not provided.
+ */
+export function flattenOptions(options, {
+  fieldNames,
+  childrenAsData
+} = {}) {
+  const flattenList = [];
+  const {
+    label: fieldLabel,
+    value: fieldValue,
+    options: fieldOptions,
+    groupLabel
+  } = fillFieldNames(fieldNames, false);
+  function dig(list, isGroupOption) {
+    if (!Array.isArray(list)) {
+      return;
+    }
+    list.forEach(data => {
+      if (isGroupOption || !(fieldOptions in data)) {
+        const value = data[fieldValue];
+
+        // Option
+        flattenList.push({
+          key: getKey(data, flattenList.length),
+          groupOption: isGroupOption,
+          data,
+          label: data[fieldLabel],
+          value
+        });
+      } else {
+        let grpLabel = data[groupLabel];
+        if (grpLabel === undefined && childrenAsData) {
+          grpLabel = data.label;
+        }
+
+        // Option Group
+        flattenList.push({
+          key: getKey(data, flattenList.length),
+          group: true,
+          data,
+          label: grpLabel
+        });
+        dig(data[fieldOptions], true);
+      }
+    });
+  }
+  dig(options, false);
+  return flattenList;
+}
+
+/**
+ * Inject `props` into `option` for legacy usage
+ */
+export function injectPropsWithOption(option) {
+  const newOption = {
+    ...option
+  };
+  if (!('props' in newOption)) {
+    Object.defineProperty(newOption, 'props', {
+      get() {
+        warning(false, 'Return type is option instead of Option instance. Please read value directly instead of reading from `props`.');
+        return newOption;
+      }
+    });
+  }
+  return newOption;
+}
+export const getSeparatedContent = (text, tokens, end) => {
+  if (!tokens || !tokens.length) {
+    return null;
+  }
+  let match = false;
+  const separate = (str, [token, ...restTokens]) => {
+    if (!token) {
+      return [str];
+    }
+    const list = str.split(token);
+    match = match || list.length > 1;
+    return list.reduce((prevList, unitStr) => [...prevList, ...separate(unitStr, restTokens)], []).filter(Boolean);
+  };
+  const list = separate(text, tokens);
+  if (match) {
+    return typeof end !== 'undefined' ? list.slice(0, end) : list;
+  } else {
+    return null;
+  }
+};

package/es/utils/warningPropsUtil.d.ts

@@ -0,0 +1,4 @@
+import type { DefaultOptionType, FieldNames, SelectProps } from '../Select';
+declare function warningProps(props: SelectProps): void;
+export declare function warningNullOptions(options: DefaultOptionType[], fieldNames: FieldNames): void;
+export default warningProps;

package/es/utils/warningPropsUtil.js

@@ -0,0 +1,119 @@
+import toNodeArray from "@rc-component/util/es/Children/toArray";
+import warning, { noteOnce } from "@rc-component/util/es/warning";
+import * as React from 'react';
+import { isMultiple } from "../BaseSelect";
+import { toArray } from "./commonUtil";
+import { convertChildrenToData } from "./legacyUtil";
+function warningProps(props) {
+  const {
+    mode,
+    options,
+    children,
+    backfill,
+    allowClear,
+    placeholder,
+    getInputElement,
+    showSearch,
+    onSearch,
+    defaultOpen,
+    autoFocus,
+    labelInValue,
+    value,
+    optionLabelProp
+  } = props;
+  const multiple = isMultiple(mode);
+  const mergedShowSearch = showSearch !== undefined ? showSearch : multiple || mode === 'combobox';
+  const mergedOptions = options || convertChildrenToData(children);
+
+  // `tags` should not set option as disabled
+  warning(mode !== 'tags' || mergedOptions.every(opt => !opt.disabled), 'Please avoid setting option to disabled in tags mode since user can always type text as tag.');
+
+  // `combobox` & `tags` should option be `string` type
+  if (mode === 'tags' || mode === 'combobox') {
+    const hasNumberValue = mergedOptions.some(item => {
+      if (item.options) {
+        return item.options.some(opt => typeof ('value' in opt ? opt.value : opt.key) === 'number');
+      }
+      return typeof ('value' in item ? item.value : item.key) === 'number';
+    });
+    warning(!hasNumberValue, '`value` of Option should not use number type when `mode` is `tags` or `combobox`.');
+  }
+
+  // `combobox` should not use `optionLabelProp`
+  warning(mode !== 'combobox' || !optionLabelProp, '`combobox` mode not support `optionLabelProp`. Please set `value` on Option directly.');
+
+  // Only `combobox` support `backfill`
+  warning(mode === 'combobox' || !backfill, '`backfill` only works with `combobox` mode.');
+
+  // Only `combobox` support `getInputElement`
+  warning(mode === 'combobox' || !getInputElement, '`getInputElement` only work with `combobox` mode.');
+
+  // Customize `getInputElement` should not use `allowClear` & `placeholder`
+  noteOnce(mode !== 'combobox' || !getInputElement || !allowClear || !placeholder, 'Customize `getInputElement` should customize clear and placeholder logic instead of configuring `allowClear` and `placeholder`.');
+
+  // `onSearch` should use in `combobox` or `showSearch`
+  if (onSearch && !mergedShowSearch && mode !== 'combobox' && mode !== 'tags') {
+    warning(false, '`onSearch` should work with `showSearch` instead of use alone.');
+  }
+  noteOnce(!defaultOpen || autoFocus, '`defaultOpen` makes Select open without focus which means it will not close by click outside. You can set `autoFocus` if needed.');
+  if (value !== undefined && value !== null) {
+    const values = toArray(value);
+    warning(!labelInValue || values.every(val => typeof val === 'object' && ('key' in val || 'value' in val)), '`value` should in shape of `{ value: string | number, label?: ReactNode }` when you set `labelInValue` to `true`');
+    warning(!multiple || Array.isArray(value), '`value` should be array when `mode` is `multiple` or `tags`');
+  }
+
+  // Syntactic sugar should use correct children type
+  if (children) {
+    let invalidateChildType = null;
+    toNodeArray(children).some(node => {
+      if (! /*#__PURE__*/React.isValidElement(node) || !node.type) {
+        return false;
+      }
+      const {
+        type
+      } = node;
+      if (type.isSelectOption) {
+        return false;
+      }
+      if (type.isSelectOptGroup) {
+        const allChildrenValid = toNodeArray(node.props.children).every(subNode => {
+          if (! /*#__PURE__*/React.isValidElement(subNode) || !node.type || subNode.type.isSelectOption) {
+            return true;
+          }
+          invalidateChildType = subNode.type;
+          return false;
+        });
+        if (allChildrenValid) {
+          return false;
+        }
+        return true;
+      }
+      invalidateChildType = type;
+      return true;
+    });
+    if (invalidateChildType) {
+      warning(false, `\`children\` should be \`Select.Option\` or \`Select.OptGroup\` instead of \`${invalidateChildType.displayName || invalidateChildType.name || invalidateChildType}\`.`);
+    }
+  }
+}
+
+// value in Select option should not be null
+// note: OptGroup has options too
+export function warningNullOptions(options, fieldNames) {
+  if (options) {
+    const recursiveOptions = (optionsList, inGroup = false) => {
+      for (let i = 0; i < optionsList.length; i++) {
+        const option = optionsList[i];
+        if (option[fieldNames?.value] === null) {
+          warning(false, '`value` in Select options should not be `null`.');
+          return true;
+        }
+        if (!inGroup && Array.isArray(option[fieldNames?.options]) && recursiveOptions(option[fieldNames?.options], true)) {
+          break;
+        }
+      }
+    };
+    recursiveOptions(options);
+  }
+}
+export default warningProps;

package/lib/BaseSelect/Polite.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+import type { DisplayValueType } from '.';
+export interface PoliteProps {
+    visible: boolean;
+    values: DisplayValueType[];
+}
+export default function Polite(props: PoliteProps): React.JSX.Element;

package/lib/BaseSelect/Polite.js

@@ -0,0 +1,34 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Polite;
+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 Polite(props) {
+  const {
+    visible,
+    values
+  } = props;
+  if (!visible) {
+    return null;
+  }
+
+  // Only cut part of values since it's a screen reader
+  const MAX_COUNT = 50;
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-live": "polite",
+    style: {
+      width: 0,
+      height: 0,
+      position: 'absolute',
+      overflow: 'hidden',
+      opacity: 0
+    }
+  }, `${values.slice(0, MAX_COUNT).map(({
+    label,
+    value
+  }) => ['number', 'string'].includes(typeof label) ? label : value).join(', ')}`, values.length > MAX_COUNT ? ', ...' : null);
+}

package/lib/BaseSelect/index.d.ts

@@ -0,0 +1,118 @@
+import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/interface';
+import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
+import * as React from 'react';
+import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
+export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType, };
+export interface RefOptionListProps {
+    onKeyDown: React.KeyboardEventHandler;
+    onKeyUp: React.KeyboardEventHandler;
+    scrollTo?: (args: number | ScrollConfig) => void;
+}
+export type CustomTagProps = {
+    label: React.ReactNode;
+    value: any;
+    disabled: boolean;
+    onClose: (event?: React.MouseEvent<HTMLElement, MouseEvent>) => void;
+    closable: boolean;
+    isMaxTag: boolean;
+    index: number;
+};
+export interface BaseSelectRef {
+    focus: (options?: FocusOptions) => void;
+    blur: () => void;
+    scrollTo: ScrollTo;
+    nativeElement: HTMLElement;
+}
+export interface BaseSelectPrivateProps {
+    id: string;
+    prefixCls: string;
+    omitDomProps?: string[];
+    displayValues: DisplayValueType[];
+    onDisplayValuesChange: (values: DisplayValueType[], info: {
+        type: DisplayInfoType;
+        values: DisplayValueType[];
+    }) => void;
+    /** Current dropdown list active item string value */
+    activeValue?: string;
+    /** Link search input with target element */
+    activeDescendantId?: string;
+    onActiveValueChange?: (value: string | null) => void;
+    searchValue: string;
+    autoClearSearchValue?: boolean;
+    /** Trigger onSearch, return false to prevent trigger open event */
+    onSearch: (searchValue: string, info: {
+        source: 'typing' | 'effect' | 'submit' | 'blur';
+    }) => void;
+    /** Trigger when search text match the `tokenSeparators`. Will provide split content */
+    onSearchSplit?: (words: string[]) => void;
+    OptionList: React.ForwardRefExoticComponent<React.PropsWithoutRef<any> & React.RefAttributes<RefOptionListProps>>;
+    /** Tell if provided `options` is empty */
+    emptyOptions: boolean;
+}
+export type BaseSelectPropsWithoutPrivate = Omit<BaseSelectProps, keyof BaseSelectPrivateProps>;
+export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttributes {
+    className?: string;
+    style?: React.CSSProperties;
+    title?: string;
+    showSearch?: boolean;
+    tagRender?: (props: CustomTagProps) => React.ReactElement;
+    direction?: 'ltr' | 'rtl';
+    maxLength?: number;
+    showScrollBar?: boolean | 'optional';
+    tabIndex?: number;
+    autoFocus?: boolean;
+    notFoundContent?: React.ReactNode;
+    placeholder?: React.ReactNode;
+    onClear?: () => void;
+    choiceTransitionName?: string;
+    mode?: Mode;
+    disabled?: boolean;
+    loading?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onPopupVisibleChange?: (open: boolean) => void;
+    /** @private Internal usage. Do not use in your production. */
+    getInputElement?: () => JSX.Element;
+    /** @private Internal usage. Do not use in your production. */
+    getRawInputElement?: () => JSX.Element;
+    maxTagTextLength?: number;
+    maxTagCount?: number | 'responsive';
+    maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
+    tokenSeparators?: string[];
+    allowClear?: boolean | {
+        clearIcon?: RenderNode;
+    };
+    prefix?: React.ReactNode;
+    suffixIcon?: RenderNode;
+    /**
+     * Clear all icon
+     * @deprecated Please use `allowClear` instead
+     **/
+    clearIcon?: RenderNode;
+    /** Selector remove icon */
+    removeIcon?: RenderNode;
+    animation?: string;
+    transitionName?: string;
+    popupStyle?: React.CSSProperties;
+    popupClassName?: string;
+    popupMatchSelectWidth?: boolean | number;
+    popupRender?: (menu: React.ReactElement) => React.ReactElement;
+    popupAlign?: AlignType;
+    placement?: Placement;
+    builtinPlacements?: BuildInPlacements;
+    getPopupContainer?: RenderDOMFunc;
+    showAction?: ('focus' | 'click')[];
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onKeyUp?: React.KeyboardEventHandler<HTMLDivElement>;
+    onKeyDown?: React.KeyboardEventHandler<HTMLDivElement>;
+    onMouseDown?: React.MouseEventHandler<HTMLDivElement>;
+    onPopupScroll?: React.UIEventHandler<HTMLDivElement>;
+    onInputKeyDown?: React.KeyboardEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
+    onClick?: React.MouseEventHandler<HTMLDivElement>;
+}
+export declare const isMultiple: (mode: Mode) => boolean;
+declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & React.RefAttributes<BaseSelectRef>>;
+export default BaseSelect;