@tdm-design/ui 0.0.15 → 0.0.16

package/es/config-provider/context.d.ts

@@ -175,7 +175,7 @@ export type FloatButtonConfig = ComponentStyleConfig & Pick<FloatButtonProps, 'c
 export type FloatButtonGroupConfig = ComponentStyleConfig & Pick<FloatButtonGroupProps, 'closeIcon' | 'classNames' | 'styles'>;
 export type PaginationConfig = ComponentStyleConfig & Pick<PaginationProps, 'showSizeChanger' | 'totalBoundaryShowSizeChanger' | 'classNames' | 'styles'>;
 export type ProgressConfig = ComponentStyleConfig & Pick<ProgressProps, 'classNames' | 'styles'>;
-export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch' | 'variant' | 'classNames' | 'styles' | 'optionFilterProp'>;
+export type SelectConfig = ComponentStyleConfig & Pick<SelectProps, 'showSearch' | 'variant' | 'classNames' | 'styles' | 'optionFilterProp' | 'maxLines'>;
 export type SpaceConfig = ComponentStyleConfig & Pick<SpaceProps, 'size' | 'classNames' | 'styles'>;
 export type TooltipConfig = Pick<TooltipProps, 'className' | 'style' | 'styles' | 'classNames' | 'arrow' | 'trigger'> & {
     /**

package/es/index.d.ts

@@ -68,8 +68,8 @@ export { default as Row } from './row';
 export type { RowProps } from './row';
 export { default as Segmented } from './segmented';
 export type { SegmentedProps } from './segmented';
-export { default as Select } from './select';
-export type { RefSelectProps, SelectProps } from './select';
+export { default as Select, SortableSelect, SingleDisplaySelect } from './select';
+export type { RefSelectProps, SelectProps, SortableSelectProps, SingleDisplaySelectProps } from './select';
 export { default as Skeleton } from './skeleton';
 export type { SkeletonProps } from './skeleton';
 export { default as Slider } from './slider';

package/es/index.js

@@ -75,7 +75,7 @@ export { default as Radio } from './radio';
 export { default as Result } from './result';
 export { default as Row } from './row';
 export { default as Segmented } from './segmented';
-export { default as Select } from './select';
+export { default as Select, SortableSelect, SingleDisplaySelect } from './select';
 export { default as Skeleton } from './skeleton';
 export { default as Slider } from './slider';
 export { default as Space } from './space';

package/es/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/es/select/Select.js

@@ -0,0 +1,333 @@
+"use client";
+
+// TODO: 4.0 - codemod should help to change `filterOption` to support node props.
+import * as React from 'react';
+import RcSelect, { OptGroup, Option } from '@rc-component/select';
+import { omit } from '@rc-component/util';
+import { clsx } from 'clsx';
+import { useMergeSemantic, useZIndex } from '../_util/hooks';
+import { getTransitionName } from '../_util/motion';
+import genPurePanel from '../_util/PurePanel';
+import { getMergedStatus, getStatusClassNames } from '../_util/statusUtils';
+import { devUseWarning } from '../_util/warning';
+import { ConfigContext } from '../config-provider';
+import { useComponentConfig } from '../config-provider/context';
+import DefaultRenderEmpty from '../config-provider/defaultRenderEmpty';
+import DisabledContext from '../config-provider/DisabledContext';
+import useCSSVarCls from '../config-provider/hooks/useCSSVarCls';
+import useSize from '../config-provider/hooks/useSize';
+import { FormItemInputContext } from '../form/context';
+import useVariants from '../form/hooks/useVariants';
+import { useCompactItemContext } from '../space/Compact';
+import { useToken } from '../theme/internal';
+import mergedBuiltinPlacements from './mergedBuiltinPlacements';
+import useStyle from './style';
+import useIcons from './useIcons';
+import usePopupRender from './usePopupRender';
+import useShowArrow from './useShowArrow';
+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(ConfigContext);
+  const {
+    showSearch,
+    optionFilterProp: contextOptionFilterProp,
+    maxLines: contextMaxLines,
+    style: contextStyle,
+    styles: contextStyles,
+    className: contextClassName,
+    classNames: contextClassNames
+  } = useComponentConfig('select');
+  const mergedMaxLines = maxLines ?? contextMaxLines;
+  const [, token] = useToken();
+  const listItemHeight = customListItemHeight ?? token?.controlHeight;
+  const prefixCls = getPrefixCls('select', customizePrefixCls);
+  const rootPrefixCls = getPrefixCls();
+  const direction = propDirection ?? contextDirection;
+  const {
+    compactSize,
+    compactItemClassnames
+  } = useCompactItemContext(prefixCls, direction);
+  const [variant, enableVariantCls] = useVariants('select', customizeVariant, bordered);
+  const rootCls = useCSSVarCls(prefixCls);
+  const [hashId, cssVarCls] = useStyle(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 = useShowArrow(props.suffixIcon, props.showArrow);
+  const mergedPopupMatchSelectWidth = popupMatchSelectWidth ?? dropdownMatchSelectWidth ?? contextPopupMatchSelectWidth;
+  const mergedPopupRender = usePopupRender(popupRender || dropdownRender);
+  const mergedOnOpenChange = onOpenChange || onDropdownVisibleChange;
+  // ===================== Form Status =====================
+  const {
+    status: contextStatus,
+    hasFeedback,
+    isFormItemInput,
+    feedbackIcon
+  } = React.useContext(FormItemInputContext);
+  const mergedStatus = 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, {
+      componentName: "Select"
+    });
+  }
+  // ===================== Icons =====================
+  const {
+    suffixIcon,
+    itemIcon,
+    removeIcon,
+    clearIcon
+  } = useIcons({
+    ...rest,
+    multiple: isMultiple,
+    hasFeedback,
+    feedbackIcon,
+    showSuffixIcon,
+    prefixCls,
+    componentName: 'Select'
+  });
+  const mergedAllowClear = allowClear === true ? {
+    clearIcon
+  } : allowClear;
+  const selectProps = omit(rest, ['suffixIcon', 'itemIcon']);
+  const mergedSize = useSize(ctx => customizeSize ?? compactSize ?? ctx);
+  // ===================== Disabled =====================
+  const disabled = React.useContext(DisabledContext);
+  const mergedDisabled = customDisabled ?? disabled;
+  // ========== Merged Props for Semantic ==================
+  const mergedProps = {
+    ...props,
+    variant,
+    status: mergedStatus,
+    disabled: mergedDisabled,
+    size: mergedSize
+  };
+  const [mergedClassNames, mergedStyles] = useMergeSemantic([contextClassNames, classNames], [contextStyles, styles], {
+    props: mergedProps
+  }, {
+    popup: {
+      _default: 'root'
+    }
+  });
+  const mergedPopupClassName = clsx(mergedClassNames.popup?.root, popupClassName, dropdownClassName, {
+    [`${prefixCls}-dropdown-${direction}`]: direction === 'rtl'
+  }, rootClassName, cssVarCls, rootCls, hashId);
+  const mergedPopupStyle = {
+    ...mergedStyles.popup?.root,
+    ...(popupStyle ?? dropdownStyle)
+  };
+  const mergedClassName = 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
+  }, 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 = 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] = useZIndex('SelectLike', mergedStyles.popup?.root?.zIndex ?? mergedPopupStyle?.zIndex);
+  // ====================== Render =======================
+  return /*#__PURE__*/React.createElement(RcSelect, {
+    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: getTransitionName(rootPrefixCls, 'slide-up', transitionName),
+    builtinPlacements: mergedBuiltinPlacements(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 = genPurePanel(Select, 'popupAlign');
+Select.SECRET_COMBOBOX_MODE_DO_NOT_USE = SECRET_COMBOBOX_MODE_DO_NOT_USE;
+Select.Option = Option;
+Select.OptGroup = OptGroup;
+Select._InternalPanelDoNotUseOrYouWillBeFired = PurePanel;
+if (process.env.NODE_ENV !== 'production') {
+  Select.displayName = 'Select';
+}
+export default Select;

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

package/es/select/SingleDisplaySelect.js

@@ -0,0 +1,153 @@
+"use client";
+
+import React, { useState, useEffect, useCallback } from 'react';
+import Select from './Select';
+import Popover from '../popover';
+import Tag from '../tag';
+import { ConfigContext } from '../config-provider';
+import CloseOutlinedIcon from '@tdm-design/icons/CloseOutlinedIcon';
+function extractValueId(val) {
+  if (typeof val === 'object' && val !== null) {
+    if ('key' in val && val.key !== undefined) return val.key;
+    if ('value' in val && val.value !== undefined) return val.value;
+  }
+  return val;
+}
+const SingleDisplaySelect = props => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    tagRender,
+    maxTagPlaceholder,
+    prefixCls: customizePrefixCls,
+    ...restProps
+  } = props;
+  const {
+    getPrefixCls
+  } = React.useContext(ConfigContext);
+  const prefixCls = getPrefixCls('select', customizePrefixCls);
+  // Maintain internal state for uncontrolled usage
+  const [internalValue, setInternalValue] = useState(() => {
+    if (value !== undefined) return value;
+    if (defaultValue !== undefined) return defaultValue;
+    return [];
+  });
+  // Keep track of the options to properly call onChange
+  const [internalOptions, setInternalOptions] = useState([]);
+  // Sync with controlled value
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  // Sync internalOptions when value changes externally if possible
+  // In a real scenario we'd need to lookup options from the list if we don't have them
+  // For simplicity we just rely on onChange to provide them.
+  const handleChange = (val, opt) => {
+    if (value === undefined) {
+      setInternalValue(val);
+    }
+    setInternalOptions(opt);
+    onChange?.(val, opt);
+  };
+  const handleRemove = (itemValue, e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    const prevArray = Array.isArray(internalValue) ? internalValue : [];
+    const newValue = prevArray.filter(v => extractValueId(v) !== itemValue);
+    // We try to filter internalOptions, if it's not maintained correctly, we might pass [] 
+    // which is better than passing the wrong options.
+    const newOptions = Array.isArray(internalOptions) ? internalOptions.filter(opt => extractValueId(opt.value) !== itemValue) : [];
+    handleChange(newValue, newOptions);
+  };
+  const defaultTagRender = useCallback(tagProps => {
+    const {
+      label,
+      closable,
+      onClose,
+      disabled: itemDisabled
+    } = tagProps;
+    const onMouseDown = e => {
+      e.preventDefault();
+      e.stopPropagation();
+    };
+    return /*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-selection-item${itemDisabled ? ` ${prefixCls}-selection-item-disabled` : ''}`,
+      onMouseDown: onMouseDown
+    }, /*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-selection-item-content`
+    }, label), closable && (/*#__PURE__*/React.createElement("span", {
+      className: `${prefixCls}-selection-item-remove`,
+      onClick: e => {
+        e.stopPropagation();
+        onClose?.(e);
+      },
+      onMouseDown: onMouseDown
+    }, /*#__PURE__*/React.createElement(CloseOutlinedIcon, null))));
+  }, [prefixCls]);
+  const mergedTagRender = tagRender || defaultTagRender;
+  const defaultMaxTagPlaceholder = useCallback(omittedValues => {
+    return /*#__PURE__*/React.createElement(Popover, {
+      content: /*#__PURE__*/React.createElement("div", {
+        style: {
+          display: 'flex',
+          flexWrap: 'wrap',
+          gap: 6,
+          maxWidth: 350,
+          padding: 8
+        }
+      }, omittedValues.map(v => (/*#__PURE__*/React.createElement(Tag, {
+        key: extractValueId(v.value),
+        closable: !disabled && !v.disabled,
+        closeIcon: /*#__PURE__*/React.createElement("span", {
+          style: {
+            fontSize: 10,
+            display: 'inline-flex',
+            alignItems: 'center',
+            marginLeft: 6
+          }
+        }, "\u2715"),
+        onClose: e => handleRemove(extractValueId(v.value), e),
+        style: {
+          margin: 0,
+          display: 'flex',
+          alignItems: 'center',
+          padding: '2px 6px',
+          borderRadius: 4
+        }
+      }, v.label)))),
+      placement: "top",
+      trigger: "hover"
+    }, /*#__PURE__*/React.createElement("span", null, "+", omittedValues.length, " ..."));
+  }, [disabled, internalValue, internalOptions]);
+  const mergedMaxTagPlaceholder = maxTagPlaceholder || defaultMaxTagPlaceholder;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("style", null, `
+        .tdm-single-display-select .${prefixCls}-selector {
+          align-items: center !important;
+        }
+        .tdm-single-display-select .${prefixCls}-selection-item {
+          margin-top: 0 !important;
+          margin-bottom: 0 !important;
+          max-width: 100% !important;
+        }
+        .tdm-single-display-select .${prefixCls}-content-item {
+          max-width: 100% !important;
+        }
+        .tdm-single-display-select .${prefixCls}-selection-overflow-item {
+          max-width: 100% !important;
+        }
+      `), /*#__PURE__*/React.createElement(Select, {
+    ...restProps,
+    className: `tdm-single-display-select ${restProps.className || ''}`,
+    mode: restProps.mode || 'multiple',
+    value: internalValue,
+    onChange: handleChange,
+    disabled: disabled,
+    maxTagCount: restProps.maxTagCount !== undefined ? restProps.maxTagCount : 1,
+    tagRender: mergedTagRender,
+    maxTagPlaceholder: mergedMaxTagPlaceholder
+  }));
+};
+export default SingleDisplaySelect;

package/es/select/SortableSelect.d.ts

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