@rc-component/select 1.0.0

package/es/OptionList.js

@@ -0,0 +1,379 @@
+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 classNames from 'classnames';
+import KeyCode from "@rc-component/util/es/KeyCode";
+import useMemo from "@rc-component/util/es/hooks/useMemo";
+import omit from "@rc-component/util/es/omit";
+import pickAttrs from "@rc-component/util/es/pickAttrs";
+import List from 'rc-virtual-list';
+import * as React from 'react';
+import { useEffect } from 'react';
+import SelectContext from "./SelectContext";
+import TransBtn from "./TransBtn";
+import useBaseProps from "./hooks/useBaseProps";
+import { isPlatformMac } from "./utils/platformUtil";
+import { isValidCount } from "./utils/valueUtil";
+
+// export interface OptionListProps<OptionsType extends object[]> {
+
+function isTitleType(content) {
+  return typeof content === 'string' || typeof content === 'number';
+}
+
+/**
+ * Using virtual list of option display.
+ * Will fallback to dom if use customize render.
+ */
+const OptionList = (_, ref) => {
+  const {
+    prefixCls,
+    id,
+    open,
+    multiple,
+    mode,
+    searchValue,
+    toggleOpen,
+    notFoundContent,
+    onPopupScroll,
+    showScrollBar
+  } = useBaseProps();
+  const {
+    maxCount,
+    flattenOptions,
+    onActiveValue,
+    defaultActiveFirstOption,
+    onSelect,
+    menuItemSelectedIcon,
+    rawValues,
+    fieldNames,
+    virtual,
+    direction,
+    listHeight,
+    listItemHeight,
+    optionRender
+  } = React.useContext(SelectContext);
+  const itemPrefixCls = `${prefixCls}-item`;
+  const memoFlattenOptions = useMemo(() => flattenOptions, [open, flattenOptions], (prev, next) => next[0] && prev[1] !== next[1]);
+
+  // =========================== List ===========================
+  const listRef = React.useRef(null);
+  const overMaxCount = React.useMemo(() => multiple && isValidCount(maxCount) && rawValues?.size >= maxCount, [multiple, maxCount, rawValues?.size]);
+  const onListMouseDown = event => {
+    event.preventDefault();
+  };
+  const scrollIntoView = args => {
+    listRef.current?.scrollTo(typeof args === 'number' ? {
+      index: args
+    } : args);
+  };
+
+  // https://github.com/ant-design/ant-design/issues/34975
+  const isSelected = React.useCallback(value => {
+    if (mode === 'combobox') {
+      return false;
+    }
+    return rawValues.has(value);
+  }, [mode, [...rawValues].toString(), rawValues.size]);
+
+  // ========================== Active ==========================
+  const getEnabledActiveIndex = (index, offset = 1) => {
+    const len = memoFlattenOptions.length;
+    for (let i = 0; i < len; i += 1) {
+      const current = (index + i * offset + len) % len;
+      const {
+        group,
+        data
+      } = memoFlattenOptions[current] || {};
+      if (!group && !data?.disabled && (isSelected(data.value) || !overMaxCount)) {
+        return current;
+      }
+    }
+    return -1;
+  };
+  const [activeIndex, setActiveIndex] = React.useState(() => getEnabledActiveIndex(0));
+  const setActive = (index, fromKeyboard = false) => {
+    setActiveIndex(index);
+    const info = {
+      source: fromKeyboard ? 'keyboard' : 'mouse'
+    };
+
+    // Trigger active event
+    const flattenItem = memoFlattenOptions[index];
+    if (!flattenItem) {
+      onActiveValue(null, -1, info);
+      return;
+    }
+    onActiveValue(flattenItem.value, index, info);
+  };
+
+  // Auto active first item when list length or searchValue changed
+  useEffect(() => {
+    setActive(defaultActiveFirstOption !== false ? getEnabledActiveIndex(0) : -1);
+  }, [memoFlattenOptions.length, searchValue]);
+
+  // https://github.com/ant-design/ant-design/issues/48036
+  const isAriaSelected = React.useCallback(value => {
+    if (mode === 'combobox') {
+      return String(value).toLowerCase() === searchValue.toLowerCase();
+    }
+    return rawValues.has(value);
+  }, [mode, searchValue, [...rawValues].toString(), rawValues.size]);
+
+  // Auto scroll to item position in single mode
+  useEffect(() => {
+    /**
+     * React will skip `onChange` when component update.
+     * `setActive` function will call root accessibility state update which makes re-render.
+     * So we need to delay to let Input component trigger onChange first.
+     */
+    const timeoutId = setTimeout(() => {
+      if (!multiple && open && rawValues.size === 1) {
+        const value = Array.from(rawValues)[0];
+        const index = memoFlattenOptions.findIndex(({
+          data
+        }) => data.value === value);
+        if (index !== -1) {
+          setActive(index);
+          scrollIntoView(index);
+        }
+      }
+    });
+
+    // Force trigger scrollbar visible when open
+    if (open) {
+      listRef.current?.scrollTo(undefined);
+    }
+    return () => clearTimeout(timeoutId);
+  }, [open, searchValue]);
+
+  // ========================== Values ==========================
+  const onSelectValue = value => {
+    if (value !== undefined) {
+      onSelect(value, {
+        selected: !rawValues.has(value)
+      });
+    }
+
+    // Single mode should always close by select
+    if (!multiple) {
+      toggleOpen(false);
+    }
+  };
+
+  // ========================= Keyboard =========================
+  React.useImperativeHandle(ref, () => ({
+    onKeyDown: event => {
+      const {
+        which,
+        ctrlKey
+      } = event;
+      switch (which) {
+        // >>> Arrow keys & ctrl + n/p on Mac
+        case KeyCode.N:
+        case KeyCode.P:
+        case KeyCode.UP:
+        case KeyCode.DOWN:
+          {
+            let offset = 0;
+            if (which === KeyCode.UP) {
+              offset = -1;
+            } else if (which === KeyCode.DOWN) {
+              offset = 1;
+            } else if (isPlatformMac() && ctrlKey) {
+              if (which === KeyCode.N) {
+                offset = 1;
+              } else if (which === KeyCode.P) {
+                offset = -1;
+              }
+            }
+            if (offset !== 0) {
+              const nextActiveIndex = getEnabledActiveIndex(activeIndex + offset, offset);
+              scrollIntoView(nextActiveIndex);
+              setActive(nextActiveIndex, true);
+            }
+            break;
+          }
+
+        // >>> Select (Tab / Enter)
+        case KeyCode.TAB:
+        case KeyCode.ENTER:
+          {
+            // value
+            const item = memoFlattenOptions[activeIndex];
+            if (item && !item?.data?.disabled && !overMaxCount) {
+              onSelectValue(item.value);
+            } else {
+              onSelectValue(undefined);
+            }
+            if (open) {
+              event.preventDefault();
+            }
+            break;
+          }
+
+        // >>> Close
+        case KeyCode.ESC:
+          {
+            toggleOpen(false);
+            if (open) {
+              event.stopPropagation();
+            }
+          }
+      }
+    },
+    onKeyUp: () => {},
+    scrollTo: index => {
+      scrollIntoView(index);
+    }
+  }));
+
+  // ========================== Render ==========================
+  if (memoFlattenOptions.length === 0) {
+    return /*#__PURE__*/React.createElement("div", {
+      role: "listbox",
+      id: `${id}_list`,
+      className: `${itemPrefixCls}-empty`,
+      onMouseDown: onListMouseDown
+    }, notFoundContent);
+  }
+  const omitFieldNameList = Object.keys(fieldNames).map(key => fieldNames[key]);
+  const getLabel = item => item.label;
+  function getItemAriaProps(item, index) {
+    const {
+      group
+    } = item;
+    return {
+      role: group ? 'presentation' : 'option',
+      id: `${id}_list_${index}`
+    };
+  }
+  const renderItem = index => {
+    const item = memoFlattenOptions[index];
+    if (!item) {
+      return null;
+    }
+    const itemData = item.data || {};
+    const {
+      value
+    } = itemData;
+    const {
+      group
+    } = item;
+    const attrs = pickAttrs(itemData, true);
+    const mergedLabel = getLabel(item);
+    return item ? /*#__PURE__*/React.createElement("div", _extends({
+      "aria-label": typeof mergedLabel === 'string' && !group ? mergedLabel : null
+    }, attrs, {
+      key: index
+    }, getItemAriaProps(item, index), {
+      "aria-selected": isAriaSelected(value)
+    }), value) : null;
+  };
+  const a11yProps = {
+    role: 'listbox',
+    id: `${id}_list`
+  };
+  return /*#__PURE__*/React.createElement(React.Fragment, null, virtual && /*#__PURE__*/React.createElement("div", _extends({}, a11yProps, {
+    style: {
+      height: 0,
+      width: 0,
+      overflow: 'hidden'
+    }
+  }), renderItem(activeIndex - 1), renderItem(activeIndex), renderItem(activeIndex + 1)), /*#__PURE__*/React.createElement(List, {
+    itemKey: "key",
+    ref: listRef,
+    data: memoFlattenOptions,
+    height: listHeight,
+    itemHeight: listItemHeight,
+    fullHeight: false,
+    onMouseDown: onListMouseDown,
+    onScroll: onPopupScroll,
+    virtual: virtual,
+    direction: direction,
+    innerProps: virtual ? null : a11yProps,
+    showScrollBar: showScrollBar
+  }, (item, itemIndex) => {
+    const {
+      group,
+      groupOption,
+      data,
+      label,
+      value
+    } = item;
+    const {
+      key
+    } = data;
+
+    // Group
+    if (group) {
+      const groupTitle = data.title ?? (isTitleType(label) ? label.toString() : undefined);
+      return /*#__PURE__*/React.createElement("div", {
+        className: classNames(itemPrefixCls, `${itemPrefixCls}-group`, data.className),
+        title: groupTitle
+      }, label !== undefined ? label : key);
+    }
+    const {
+      disabled,
+      title,
+      children,
+      style,
+      className,
+      ...otherProps
+    } = data;
+    const passedProps = omit(otherProps, omitFieldNameList);
+
+    // Option
+    const selected = isSelected(value);
+    const mergedDisabled = disabled || !selected && overMaxCount;
+    const optionPrefixCls = `${itemPrefixCls}-option`;
+    const optionClassName = classNames(itemPrefixCls, optionPrefixCls, className, {
+      [`${optionPrefixCls}-grouped`]: groupOption,
+      [`${optionPrefixCls}-active`]: activeIndex === itemIndex && !mergedDisabled,
+      [`${optionPrefixCls}-disabled`]: mergedDisabled,
+      [`${optionPrefixCls}-selected`]: selected
+    });
+    const mergedLabel = getLabel(item);
+    const iconVisible = !menuItemSelectedIcon || typeof menuItemSelectedIcon === 'function' || selected;
+
+    // https://github.com/ant-design/ant-design/issues/34145
+    const content = typeof mergedLabel === 'number' ? mergedLabel : mergedLabel || value;
+    // https://github.com/ant-design/ant-design/issues/26717
+    let optionTitle = isTitleType(content) ? content.toString() : undefined;
+    if (title !== undefined) {
+      optionTitle = title;
+    }
+    return /*#__PURE__*/React.createElement("div", _extends({}, pickAttrs(passedProps), !virtual ? getItemAriaProps(item, itemIndex) : {}, {
+      "aria-selected": isAriaSelected(value),
+      className: optionClassName,
+      title: optionTitle,
+      onMouseMove: () => {
+        if (activeIndex === itemIndex || mergedDisabled) {
+          return;
+        }
+        setActive(itemIndex);
+      },
+      onClick: () => {
+        if (!mergedDisabled) {
+          onSelectValue(value);
+        }
+      },
+      style: style
+    }), /*#__PURE__*/React.createElement("div", {
+      className: `${optionPrefixCls}-content`
+    }, typeof optionRender === 'function' ? optionRender(item, {
+      index: itemIndex
+    }) : content), /*#__PURE__*/React.isValidElement(menuItemSelectedIcon) || selected, iconVisible && /*#__PURE__*/React.createElement(TransBtn, {
+      className: `${itemPrefixCls}-option-state`,
+      customizeIcon: menuItemSelectedIcon,
+      customizeIconProps: {
+        value,
+        disabled: mergedDisabled,
+        isSelected: selected
+      }
+    }, selected ? '✓' : null));
+  }));
+};
+const RefOptionList = /*#__PURE__*/React.forwardRef(OptionList);
+if (process.env.NODE_ENV !== 'production') {
+  RefOptionList.displayName = 'OptionList';
+}
+export default RefOptionList;

package/es/Select.d.ts

@@ -0,0 +1,114 @@
+/**
+ * To match accessibility requirement, we always provide an input in the component.
+ * Other element will not set `tabIndex` to avoid `onBlur` sequence problem.
+ * For focused select, we set `aria-live="polite"` to update the accessibility content.
+ *
+ * ref:
+ * - keyboard: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role#Keyboard_interactions
+ *
+ * New api:
+ * - listHeight
+ * - listItemHeight
+ * - component
+ *
+ * Remove deprecated api:
+ * - multiple
+ * - tags
+ * - combobox
+ * - firstActiveValue
+ * - dropdownMenuStyle
+ * - openClassName (Not list in api)
+ *
+ * Update:
+ * - `backfill` only support `combobox` mode
+ * - `combobox` mode not support `labelInValue` since it's meaningless
+ * - `getInputElement` only support `combobox` mode
+ * - `onChange` return OptionData instead of ReactNode
+ * - `filterOption` `onChange` `onSelect` accept OptionData instead of ReactNode
+ * - `combobox` mode trigger `onChange` will get `undefined` if no `value` match in Option
+ * - `combobox` mode not support `optionLabelProp`
+ */
+import * as React from 'react';
+import type { BaseSelectPropsWithoutPrivate, BaseSelectRef, DisplayValueType, RenderNode } from './BaseSelect';
+import OptGroup from './OptGroup';
+import Option from './Option';
+import type { FlattenOptionData } from './interface';
+export type OnActiveValue = (active: RawValueType, index: number, info?: {
+    source?: 'keyboard' | 'mouse';
+}) => void;
+export type OnInternalSelect = (value: RawValueType, info: {
+    selected: boolean;
+}) => void;
+export type RawValueType = string | number;
+export interface LabelInValueType {
+    label: React.ReactNode;
+    value: RawValueType;
+}
+export type DraftValueType = RawValueType | LabelInValueType | DisplayValueType | (RawValueType | LabelInValueType | DisplayValueType)[];
+export type FilterFunc<OptionType> = (inputValue: string, option?: OptionType) => boolean;
+export interface FieldNames {
+    value?: string;
+    label?: string;
+    groupLabel?: string;
+    options?: string;
+}
+export interface BaseOptionType {
+    disabled?: boolean;
+    className?: string;
+    title?: string;
+    [name: string]: any;
+}
+export interface DefaultOptionType extends BaseOptionType {
+    label?: React.ReactNode;
+    value?: string | number | null;
+    children?: Omit<DefaultOptionType, 'children'>[];
+}
+export type SelectHandler<ValueType, OptionType extends BaseOptionType = DefaultOptionType> = (value: ValueType, option: OptionType) => void;
+type ArrayElementType<T> = T extends (infer E)[] ? E : T;
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType = DefaultOptionType> extends BaseSelectPropsWithoutPrivate {
+    prefixCls?: string;
+    id?: string;
+    backfill?: boolean;
+    fieldNames?: FieldNames;
+    searchValue?: string;
+    onSearch?: (value: string) => void;
+    autoClearSearchValue?: boolean;
+    onSelect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    onDeselect?: SelectHandler<ArrayElementType<ValueType>, OptionType>;
+    /**
+     * In Select, `false` means do nothing.
+     * In TreeSelect, `false` will highlight match item.
+     * It's by design.
+     */
+    filterOption?: boolean | FilterFunc<OptionType>;
+    filterSort?: (optionA: OptionType, optionB: OptionType, info: {
+        searchValue: string;
+    }) => number;
+    optionFilterProp?: string;
+    optionLabelProp?: string;
+    children?: React.ReactNode;
+    options?: OptionType[];
+    optionRender?: (oriOption: FlattenOptionData<OptionType>, info: {
+        index: number;
+    }) => React.ReactNode;
+    defaultActiveFirstOption?: boolean;
+    virtual?: boolean;
+    direction?: 'ltr' | 'rtl';
+    listHeight?: number;
+    listItemHeight?: number;
+    labelRender?: (props: LabelInValueType) => React.ReactNode;
+    menuItemSelectedIcon?: RenderNode;
+    mode?: 'combobox' | 'multiple' | 'tags';
+    labelInValue?: boolean;
+    value?: ValueType | null;
+    defaultValue?: ValueType | null;
+    maxCount?: number;
+    onChange?: (value: ValueType, option?: OptionType | OptionType[]) => void;
+}
+declare const TypedSelect: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SelectProps<ValueType, OptionType> & {
+    children?: React.ReactNode;
+} & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+    Option: typeof Option;
+    OptGroup: typeof OptGroup;
+};
+export default TypedSelect;