@tdm-design/ui 0.0.14 → 0.0.16

package/lib/index.js

@@ -208,6 +208,12 @@ Object.defineProperty(exports, "Select", {
     return _select.default;
   }
 });
+Object.defineProperty(exports, "SingleDisplaySelect", {
+  enumerable: true,
+  get: function () {
+    return _select.SingleDisplaySelect;
+  }
+});
 Object.defineProperty(exports, "Skeleton", {
   enumerable: true,
   get: function () {
@@ -220,6 +226,12 @@ Object.defineProperty(exports, "Slider", {
     return _slider.default;
   }
 });
+Object.defineProperty(exports, "SortableSelect", {
+  enumerable: true,
+  get: function () {
+    return _select.SortableSelect;
+  }
+});
 Object.defineProperty(exports, "Space", {
   enumerable: true,
   get: function () {
@@ -359,7 +371,7 @@ var _radio = _interopRequireDefault(require("./radio"));
 var _result = _interopRequireDefault(require("./result"));
 var _row = _interopRequireDefault(require("./row"));
 var _segmented = _interopRequireDefault(require("./segmented"));
-var _select = _interopRequireDefault(require("./select"));
+var _select = _interopRequireWildcard(require("./select"));
 var _skeleton = _interopRequireDefault(require("./skeleton"));
 var _slider = _interopRequireDefault(require("./slider"));
 var _space = _interopRequireDefault(require("./space"));
@@ -377,6 +389,7 @@ var _upload = _interopRequireDefault(require("./upload"));
 var _version = _interopRequireDefault(require("./version"));
 var _watermark = _interopRequireDefault(require("./watermark"));
 var _styled = _interopRequireDefault(require("./config-provider/styled"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
 // export { default as Alert } from './alert'; // TODO: Uncomment when alert implementation is completed
 // export type { AlertProps, ErrorBoundaryProps } from './alert'; // TODO: Uncomment when anchor implementation is completed
 

package/lib/modal/style/confirm.js

@@ -61,7 +61,8 @@ const genModalConfirmStyle = token => {
         display: 'flex',
         flexDirection: 'column',
         flex: 'auto',
-        gap: token.marginXXS
+        gap: token.marginXXS,
+        minWidth: 0
       },
       [`${confirmComponentCls}-body-no-icon ${confirmComponentCls}-paragraph`]: {
         maxWidth: '100%'
@@ -70,7 +71,10 @@ const genModalConfirmStyle = token => {
         color: token.colorTextStrong,
         fontWeight: token.fontWeightStrong,
         fontSize: fontSizeTextLG,
-        lineHeight: lineHeightTextLG
+        lineHeight: lineHeightTextLG,
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
       },
       [`${confirmComponentCls}-container`]: {
         color: token.colorText,

package/lib/modal/style/index.js

@@ -127,7 +127,10 @@ const genModalStyle = token => {
         fontWeight: token.fontWeightStrong,
         fontSize: token.titleFontSize,
         lineHeight: token.titleLineHeight,
-        wordWrap: 'break-word'
+        wordWrap: 'break-word',
+        whiteSpace: 'nowrap',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis'
       },
       [`${componentCls}-container`]: {
         position: 'relative',
@@ -186,9 +189,11 @@ const genModalStyle = token => {
         background: token.headerBg,
         borderRadius: `${(0, _cssinjs.unit)(token.borderRadiusLG)} ${(0, _cssinjs.unit)(token.borderRadiusLG)} 0 0`,
         padding: token.headerPadding,
+        paddingInlineEnd: token.calc(token.modalHeaderHeight).equal(),
         borderBottom: token.headerBorderBottom,
         // boxShadow: token.boxShadowMD,
-        flex: '0 0 auto'
+        flex: '0 0 auto',
+        overflow: 'hidden'
       },
       [`${componentCls}-body`]: {
         fontSize: token.fontSize,

package/lib/select/Select.d.ts

@@ -0,0 +1,130 @@
+import * as React from 'react';
+import type { BaseSelectRef, SelectProps as RcSelectProps } from '@rc-component/select';
+import { OptGroup, Option } from '@rc-component/select';
+import type { OptionProps } from '@rc-component/select/lib/Option';
+import type { BaseOptionType, DefaultOptionType } from '@rc-component/select/lib/Select';
+import type { SemanticClassNamesType, SemanticStylesType } from '../_util/hooks';
+import type { SelectCommonPlacement } from '../_util/motion';
+import type { InputStatus } from '../_util/statusUtils';
+import type { Variant } from '../config-provider';
+import type { SizeType } from '../config-provider/SizeContext';
+type RawValue = string | number;
+export type { BaseOptionType, DefaultOptionType, OptionProps, BaseSelectRef as RefSelectProps };
+export interface LabeledValue {
+    key?: string;
+    value: RawValue;
+    label: React.ReactNode;
+}
+export type SelectValue = RawValue | RawValue[] | LabeledValue | LabeledValue[] | undefined;
+export interface InternalSelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<RcSelectProps<ValueType, OptionType>, 'mode'> {
+    rootClassName?: string;
+    prefix?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    size?: SizeType;
+    disabled?: boolean;
+    mode?: 'multiple' | 'tags' | 'SECRET_COMBOBOX_MODE_DO_NOT_USE' | 'combobox';
+    /** @deprecated Use `variant` instead. */
+    bordered?: boolean;
+    /**
+     * @deprecated `showArrow` is deprecated which will be removed in next major version. It will be a
+     *   default behavior, you can hide it by setting `suffixIcon` to null.
+     */
+    showArrow?: boolean;
+    /**
+     * @since 5.13.0
+     * @default "outlined"
+     */
+    variant?: Variant;
+    classNames?: SelectSemanticClassNames & {
+        popup?: SelectPopupSemanticClassNames;
+    };
+    styles?: SelectSemanticStyles & {
+        popup?: SelectPopupSemanticStyles;
+    };
+    /**
+     * @description Whether the option is a filter item
+     * @default false
+     * @type boolean
+     * TDM_CUSTOM: custom select filter (BEGIN)
+     */
+    isFilterItem?: boolean;
+}
+export type SelectSemanticName = keyof SelectSemanticClassNames & keyof SelectSemanticStyles;
+export type SelectSemanticClassNames = {
+    root?: string;
+    prefix?: string;
+    suffix?: string;
+    input?: string;
+    placeholder?: string;
+    content?: string;
+    item?: string;
+    itemContent?: string;
+    itemRemove?: string;
+    clear?: string;
+};
+export type SelectSemanticStyles = {
+    root?: React.CSSProperties;
+    prefix?: React.CSSProperties;
+    suffix?: React.CSSProperties;
+    input?: React.CSSProperties;
+    placeholder?: React.CSSProperties;
+    content?: React.CSSProperties;
+    item?: React.CSSProperties;
+    itemContent?: React.CSSProperties;
+    itemRemove?: React.CSSProperties;
+    clear?: React.CSSProperties;
+};
+export type SelectPopupSemanticName = keyof SelectPopupSemanticClassNames & keyof SelectPopupSemanticStyles;
+export type SelectPopupSemanticClassNames = {
+    root?: string;
+    listItem?: string;
+    list?: string;
+};
+export type SelectPopupSemanticStyles = {
+    root?: React.CSSProperties;
+    listItem?: React.CSSProperties;
+    list?: React.CSSProperties;
+};
+export type SelectClassNamesType = SemanticClassNamesType<SelectProps, SelectSemanticClassNames, {
+    popup?: SelectPopupSemanticClassNames;
+}>;
+export type SelectStylesType = SemanticStylesType<SelectProps, SelectSemanticStyles, {
+    popup?: SelectPopupSemanticStyles;
+}>;
+export interface SelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> extends Omit<InternalSelectProps<ValueType, OptionType>, 'mode' | 'getInputElement' | 'getRawInputElement' | 'backfill' | 'placement' | 'dropdownClassName' | 'dropdownStyle'> {
+    placement?: SelectCommonPlacement;
+    mode?: 'multiple' | 'tags';
+    status?: InputStatus;
+    /**
+     * @description Maximum number of lines to display tags before collapsing into `+N`
+     * @type number
+     */
+    maxLines?: number;
+    /** @deprecated Please use `classNames.popup.root` instead */
+    popupClassName?: string;
+    /** @deprecated Please use `classNames.popup.root` instead */
+    dropdownClassName?: string;
+    /** @deprecated Please use `styles.popup` instead */
+    dropdownStyle?: React.CSSProperties;
+    /** @deprecated Please use `popupRender` instead */
+    dropdownRender?: SelectProps['popupRender'];
+    /** @deprecated Please use `onOpenChange` instead */
+    onDropdownVisibleChange?: SelectProps['onPopupVisibleChange'];
+    /** @deprecated Please use `popupMatchSelectWidth` instead */
+    dropdownMatchSelectWidth?: boolean | number;
+    popupMatchSelectWidth?: boolean | number;
+    styles?: SelectStylesType;
+    classNames?: SelectClassNamesType;
+    onOpenChange?: (visible: boolean) => void;
+}
+declare const Select: (<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: React.PropsWithChildren<SelectProps<ValueType, OptionType>> & React.RefAttributes<BaseSelectRef>) => React.ReactElement) & {
+    displayName?: string;
+    SECRET_COMBOBOX_MODE_DO_NOT_USE: string;
+    /** @deprecated Please use `options` instead. */
+    Option: typeof Option;
+    /** @deprecated Please use `options` instead. */
+    OptGroup: typeof OptGroup;
+    _InternalPanelDoNotUseOrYouWillBeFired: typeof PurePanel;
+};
+declare const PurePanel: (props: import("../_util/type").AnyObject) => React.JSX.Element;
+export default Select;

package/lib/select/Select.js

@@ -0,0 +1,340 @@
+"use strict";
+"use client";
+
+// TODO: 4.0 - codemod should help to change `filterOption` to support node props.
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _select = _interopRequireWildcard(require("@rc-component/select"));
+var _util = require("@rc-component/util");
+var _clsx = require("clsx");
+var _hooks = require("../_util/hooks");
+var _motion = require("../_util/motion");
+var _PurePanel = _interopRequireDefault(require("../_util/PurePanel"));
+var _statusUtils = require("../_util/statusUtils");
+var _warning = require("../_util/warning");
+var _configProvider = require("../config-provider");
+var _context = require("../config-provider/context");
+var _defaultRenderEmpty = _interopRequireDefault(require("../config-provider/defaultRenderEmpty"));
+var _DisabledContext = _interopRequireDefault(require("../config-provider/DisabledContext"));
+var _useCSSVarCls = _interopRequireDefault(require("../config-provider/hooks/useCSSVarCls"));
+var _useSize = _interopRequireDefault(require("../config-provider/hooks/useSize"));
+var _context2 = require("../form/context");
+var _useVariants = _interopRequireDefault(require("../form/hooks/useVariants"));
+var _Compact = require("../space/Compact");
+var _internal = require("../theme/internal");
+var _mergedBuiltinPlacements = _interopRequireDefault(require("./mergedBuiltinPlacements"));
+var _style = _interopRequireDefault(require("./style"));
+var _useIcons = _interopRequireDefault(require("./useIcons"));
+var _usePopupRender = _interopRequireDefault(require("./usePopupRender"));
+var _useShowArrow = _interopRequireDefault(require("./useShowArrow"));
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+const SECRET_COMBOBOX_MODE_DO_NOT_USE = 'SECRET_COMBOBOX_MODE_DO_NOT_USE';
+const InternalSelect = (props, ref) => {
+  const {
+    prefixCls: customizePrefixCls,
+    bordered,
+    className,
+    rootClassName,
+    getPopupContainer,
+    popupClassName,
+    dropdownClassName,
+    listHeight = 256,
+    placement,
+    listItemHeight: customListItemHeight,
+    size: customizeSize,
+    disabled: customDisabled,
+    notFoundContent,
+    status: customStatus,
+    builtinPlacements,
+    dropdownMatchSelectWidth,
+    popupMatchSelectWidth,
+    direction: propDirection,
+    style,
+    allowClear,
+    variant: customizeVariant,
+    popupStyle,
+    dropdownStyle,
+    transitionName,
+    tagRender,
+    maxCount,
+    prefix,
+    dropdownRender,
+    /**
+     * @since 5.25.0
+     */
+    popupRender,
+    onDropdownVisibleChange,
+    onOpenChange,
+    styles,
+    classNames,
+    isFilterItem,
+    // TDM_CUSTOM: custom select filter
+    optionFilterProp,
+    maxLines,
+    ...rest
+  } = props;
+  const {
+    getPopupContainer: getContextPopupContainer,
+    getPrefixCls,
+    renderEmpty,
+    direction: contextDirection,
+    virtual,
+    popupMatchSelectWidth: contextPopupMatchSelectWidth,
+    popupOverflow
+  } = React.useContext(_configProvider.ConfigContext);
+  const {
+    showSearch,
+    optionFilterProp: contextOptionFilterProp,
+    maxLines: contextMaxLines,
+    style: contextStyle,
+    styles: contextStyles,
+    className: contextClassName,
+    classNames: contextClassNames
+  } = (0, _context.useComponentConfig)('select');
+  const mergedMaxLines = maxLines ?? contextMaxLines;
+  const [, token] = (0, _internal.useToken)();
+  const listItemHeight = customListItemHeight ?? token?.controlHeight;
+  const prefixCls = getPrefixCls('select', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
+  const direction = propDirection ?? contextDirection;
+  const {
+    compactSize,
+    compactItemClassnames
+  } = (0, _Compact.useCompactItemContext)(prefixCls, direction);
+  const [variant, enableVariantCls] = (0, _useVariants.default)('select', customizeVariant, bordered);
+  const rootCls = (0, _useCSSVarCls.default)(prefixCls);
+  const [hashId, cssVarCls] = (0, _style.default)(prefixCls, rootCls);
+  const mode = React.useMemo(() => {
+    const {
+      mode: m
+    } = props;
+    if (m === 'combobox') {
+      return undefined;
+    }
+    if (m === SECRET_COMBOBOX_MODE_DO_NOT_USE) {
+      return 'combobox';
+    }
+    return m;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [props.mode]);
+  const isMultiple = mode === 'multiple' || mode === 'tags';
+  const showSuffixIcon = (0, _useShowArrow.default)(props.suffixIcon, props.showArrow);
+  const mergedPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth ?? contextPopupMatchSelectWidth;
+  const mergedPopupRender = (0, _usePopupRender.default)(popupRender || dropdownRender);
+  const mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
+  // ===================== Form Status =====================
+  const {
+    status: contextStatus,
+    hasFeedback,
+    isFormItemInput,
+    feedbackIcon
+  } = React.useContext(_context2.FormItemInputContext);
+  const mergedStatus = (0, _statusUtils.getMergedStatus)(contextStatus, customStatus);
+  // ===================== Empty =====================
+  let mergedNotFound;
+  if (notFoundContent !== undefined) {
+    mergedNotFound = notFoundContent;
+  } else if (mode === 'combobox') {
+    mergedNotFound = null;
+  } else {
+    mergedNotFound = renderEmpty?.('Select') || /*#__PURE__*/React.createElement(_defaultRenderEmpty.default, {
+      componentName: "Select"
+    });
+  }
+  // ===================== Icons =====================
+  const {
+    suffixIcon,
+    itemIcon,
+    removeIcon,
+    clearIcon
+  } = (0, _useIcons.default)({
+    ...rest,
+    multiple: isMultiple,
+    hasFeedback,
+    feedbackIcon,
+    showSuffixIcon,
+    prefixCls,
+    componentName: 'Select'
+  });
+  const mergedAllowClear = allowClear === true ? {
+    clearIcon
+  } : allowClear;
+  const selectProps = (0, _util.omit)(rest, ['suffixIcon', 'itemIcon']);
+  const mergedSize = (0, _useSize.default)(ctx => customizeSize ?? compactSize ?? ctx);
+  // ===================== Disabled =====================
+  const disabled = React.useContext(_DisabledContext.default);
+  const mergedDisabled = customDisabled ?? disabled;
+  // ========== Merged Props for Semantic ==================
+  const mergedProps = {
+    ...props,
+    variant,
+    status: mergedStatus,
+    disabled: mergedDisabled,
+    size: mergedSize
+  };
+  const [mergedClassNames, mergedStyles] = (0, _hooks.useMergeSemantic)([contextClassNames, classNames], [contextStyles, styles], {
+    props: mergedProps
+  }, {
+    popup: {
+      _default: 'root'
+    }
+  });
+  const mergedPopupClassName = (0, _clsx.clsx)(mergedClassNames.popup?.root, popupClassName, dropdownClassName, {
+    [`${prefixCls}-dropdown-${direction}`]: direction === 'rtl'
+  }, rootClassName, cssVarCls, rootCls, hashId);
+  const mergedPopupStyle = {
+    ...mergedStyles.popup?.root,
+    ...(popupStyle ?? dropdownStyle)
+  };
+  const mergedClassName = (0, _clsx.clsx)({
+    [`${prefixCls}-lg`]: mergedSize === 'large',
+    [`${prefixCls}-sm`]: mergedSize === 'small',
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+    [`${prefixCls}-${variant}`]: enableVariantCls,
+    [`${prefixCls}-in-form-item`]: isFormItemInput,
+    // TDM_CUSTOM: custom select filter
+    [`${prefixCls}-filter`]: isFilterItem
+  }, (0, _statusUtils.getStatusClassNames)(prefixCls, mergedStatus, hasFeedback), compactItemClassnames, contextClassName, className, mergedClassNames.root, rootClassName, cssVarCls, rootCls, hashId);
+  // ===================== Placement =====================
+  const memoPlacement = React.useMemo(() => {
+    if (placement !== undefined) {
+      return placement;
+    }
+    return direction === 'rtl' ? 'bottomRight' : 'bottomLeft';
+  }, [placement, direction]);
+  // ====================== Warning ======================
+  if (process.env.NODE_ENV !== 'production') {
+    const warning = (0, _warning.devUseWarning)('Select');
+    const deprecatedProps = {
+      dropdownMatchSelectWidth: 'popupMatchSelectWidth',
+      dropdownStyle: 'styles.popup.root',
+      dropdownClassName: 'classNames.popup.root',
+      popupClassName: 'classNames.popup.root',
+      dropdownRender: 'popupRender',
+      onDropdownVisibleChange: 'onOpenChange',
+      bordered: 'variant'
+    };
+    Object.entries(deprecatedProps).forEach(([oldProp, newProp]) => {
+      warning.deprecated(!(oldProp in props), oldProp, newProp);
+    });
+    process.env.NODE_ENV !== "production" ? warning(!('showArrow' in props), 'deprecated', '`showArrow` is deprecated which will be removed in next major version. It will be a default behavior, you can hide it by setting `suffixIcon` to null.') : void 0;
+    process.env.NODE_ENV !== "production" ? warning(!(typeof maxCount !== 'undefined' && !isMultiple), 'usage', '`maxCount` only works with mode `multiple` or `tags`') : void 0;
+  }
+  // ====================== MaxLines ======================
+  const internalSelectRef = React.useRef(null);
+  React.useImperativeHandle(ref, () => internalSelectRef.current);
+  const [linesMaxTagCount, setLinesMaxTagCount] = React.useState(undefined);
+  const calculateMaxLinesTags = React.useCallback(() => {
+    if (!mergedMaxLines || !isMultiple) return;
+    const container = internalSelectRef.current?.nativeElement;
+    if (!container) return;
+    const tagElements = container.querySelectorAll(`.${prefixCls}-selection-item, .${prefixCls}-content-item`);
+    if (tagElements.length === 0) {
+      setLinesMaxTagCount(undefined);
+      return;
+    }
+    const firstTagTop = tagElements[0].offsetTop;
+    const tagHeight = tagElements[0].offsetHeight || 24;
+    const rowHeightThreshold = tagHeight + 6;
+    const maxAllowedTop = firstTagTop + rowHeightThreshold * (mergedMaxLines - 1);
+    let fitCount = tagElements.length;
+    for (let i = 0; i < tagElements.length; i++) {
+      const el = tagElements[i];
+      if (el.offsetTop > maxAllowedTop) {
+        fitCount = Math.max(1, i - 1);
+        break;
+      }
+    }
+    if (fitCount < tagElements.length) {
+      setLinesMaxTagCount(fitCount);
+    } else {
+      setLinesMaxTagCount(undefined);
+    }
+  }, [mergedMaxLines, isMultiple, prefixCls]);
+  React.useLayoutEffect(() => {
+    if (!mergedMaxLines || !isMultiple) {
+      setLinesMaxTagCount(undefined);
+      return;
+    }
+    setLinesMaxTagCount(undefined);
+    const timer = requestAnimationFrame(() => {
+      calculateMaxLinesTags();
+    });
+    return () => cancelAnimationFrame(timer);
+  }, [props.value, mergedMaxLines, isMultiple, calculateMaxLinesTags]);
+  React.useLayoutEffect(() => {
+    if (!mergedMaxLines || !isMultiple) return;
+    const container = internalSelectRef.current?.nativeElement;
+    if (!container || typeof ResizeObserver === 'undefined') return;
+    const resizeObserver = new ResizeObserver(() => {
+      calculateMaxLinesTags();
+    });
+    resizeObserver.observe(container);
+    return () => resizeObserver.disconnect();
+  }, [mergedMaxLines, isMultiple, calculateMaxLinesTags]);
+  // ====================== zIndex =========================
+  const [zIndex] = (0, _hooks.useZIndex)('SelectLike', mergedStyles.popup?.root?.zIndex ?? mergedPopupStyle?.zIndex);
+  // ====================== Render =======================
+  return /*#__PURE__*/React.createElement(_select.default, {
+    ref: internalSelectRef,
+    virtual: virtual,
+    classNames: mergedClassNames,
+    styles: mergedStyles,
+    showSearch: showSearch,
+    optionFilterProp: optionFilterProp ?? contextOptionFilterProp ?? 'label',
+    ...selectProps,
+    maxTagCount: mergedMaxLines && isMultiple ? linesMaxTagCount : props.maxTagCount ?? (isMultiple ? maxCount : undefined),
+    style: {
+      ...mergedStyles.root,
+      ...contextStyle,
+      ...style
+    },
+    popupMatchSelectWidth: mergedPopupMatchSelectWidth,
+    transitionName: (0, _motion.getTransitionName)(rootPrefixCls, 'slide-up', transitionName),
+    builtinPlacements: (0, _mergedBuiltinPlacements.default)(builtinPlacements, popupOverflow),
+    listHeight: listHeight,
+    listItemHeight: listItemHeight,
+    mode: mode,
+    prefixCls: prefixCls,
+    placement: memoPlacement,
+    direction: direction,
+    prefix: prefix,
+    suffixIcon: suffixIcon,
+    menuItemSelectedIcon: itemIcon,
+    removeIcon: removeIcon,
+    allowClear: mergedAllowClear,
+    notFoundContent: mergedNotFound,
+    className: mergedClassName,
+    getPopupContainer: getPopupContainer || getContextPopupContainer,
+    popupClassName: mergedPopupClassName,
+    disabled: mergedDisabled,
+    popupStyle: {
+      ...mergedStyles.popup?.root,
+      ...mergedPopupStyle,
+      zIndex
+    },
+    maxCount: isMultiple ? maxCount : undefined,
+    tagRender: isMultiple ? tagRender : undefined,
+    popupRender: mergedPopupRender,
+    onPopupVisibleChange: mergedOnOpenChange
+  });
+};
+if (process.env.NODE_ENV !== 'production') {
+  InternalSelect.displayName = 'Select';
+}
+const Select = /*#__PURE__*/React.forwardRef(InternalSelect);
+// We don't care debug panel
+/* istanbul ignore next */
+const PurePanel = (0, _PurePanel.default)(Select, 'popupAlign');
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
+Select.Option = _select.Option;
+Select.OptGroup = _select.OptGroup;
+Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+if (process.env.NODE_ENV !== 'production') {
+  Select.displayName = 'Select';
+}
+var _default = exports.default = Select;

package/lib/select/SingleDisplaySelect.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { SelectProps, BaseOptionType, DefaultOptionType } from './Select';
+export type SingleDisplaySelectProps<ValueType = any, OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType> = SelectProps<ValueType, OptionType>;
+declare const SingleDisplaySelect: <ValueType extends any[] = any[], OptionType extends BaseOptionType | DefaultOptionType = DefaultOptionType>(props: SingleDisplaySelectProps<ValueType, OptionType>) => React.JSX.Element;
+export default SingleDisplaySelect;