@tdm-design/ui 0.0.15 → 0.0.16

package/es/select/SortableSelect.js

@@ -0,0 +1,173 @@
+"use client";
+
+import React, { useCallback, useEffect, useState } from 'react';
+import Select from './Select';
+import { DndContext, closestCenter, KeyboardSensor, PointerSensor, useSensor, useSensors } from '@dnd-kit/core';
+import { arrayMove, SortableContext, sortableKeyboardCoordinates, useSortable, horizontalListSortingStrategy } from '@dnd-kit/sortable';
+import { CSS } from '@dnd-kit/utilities';
+import { ConfigContext } from '../config-provider';
+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;
+}
+import CloseOutlinedIcon from '@tdm-design/icons/CloseOutlinedIcon';
+const DraggableTag = props => {
+  const {
+    value,
+    closable,
+    onClose,
+    label,
+    disabled,
+    prefixCls,
+    customTagRender
+  } = props;
+  const id = extractValueId(value);
+  const {
+    attributes,
+    listeners,
+    setNodeRef,
+    transform,
+    transition,
+    isDragging
+  } = useSortable({
+    id,
+    disabled: disabled || !id
+  });
+  const mergedStyle = {
+    transform: CSS.Transform.toString(transform),
+    transition,
+    opacity: isDragging ? 0.4 : undefined,
+    zIndex: isDragging ? 1 : undefined,
+    cursor: disabled || !id ? 'default' : 'move'
+  };
+  const onMouseDown = e => {
+    e.preventDefault();
+    e.stopPropagation();
+  };
+  if (customTagRender) {
+    return /*#__PURE__*/React.createElement("span", {
+      ref: setNodeRef,
+      style: {
+        ...mergedStyle,
+        display: 'inline-flex'
+      },
+      ...attributes,
+      ...listeners,
+      onMouseDown: onMouseDown
+    }, customTagRender(props));
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    ref: setNodeRef,
+    style: mergedStyle,
+    className: `${prefixCls}-selection-item${disabled ? ` ${prefixCls}-selection-item-disabled` : ''}`,
+    ...attributes,
+    ...listeners,
+    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: e => {
+      e.preventDefault();
+      e.stopPropagation();
+    }
+  }, /*#__PURE__*/React.createElement(CloseOutlinedIcon, null))));
+};
+const SortableSelect = props => {
+  const {
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    prefixCls: customizePrefixCls,
+    tagRender: customTagRender,
+    ...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 [];
+  });
+  // Sync with controlled value
+  useEffect(() => {
+    if (value !== undefined) {
+      setInternalValue(value);
+    }
+  }, [value]);
+  const sensors = useSensors(useSensor(PointerSensor, {
+    activationConstraint: {
+      distance: 5
+    }
+  }), useSensor(KeyboardSensor, {
+    coordinateGetter: sortableKeyboardCoordinates
+  }));
+  const handleDragEnd = useCallback(event => {
+    const {
+      active,
+      over
+    } = event;
+    if (!over || active.id === over.id) {
+      return;
+    }
+    setInternalValue(prev => {
+      const prevArray = Array.isArray(prev) ? prev : [];
+      const oldIndex = prevArray.findIndex(item => extractValueId(item) === active.id);
+      const newIndex = prevArray.findIndex(item => extractValueId(item) === over.id);
+      if (oldIndex !== -1 && newIndex !== -1) {
+        const newArray = arrayMove(prevArray, oldIndex, newIndex);
+        // Only call onChange if the new array is actually different
+        onChange?.(newArray, []); // We skip options parameter for simplicity here
+        return newArray;
+      }
+      return prev;
+    });
+  }, [onChange]);
+  const handleChange = (val, opt) => {
+    if (value === undefined) {
+      setInternalValue(val);
+    }
+    onChange?.(val, opt);
+  };
+  const tagRender = useCallback(tagProps => {
+    return /*#__PURE__*/React.createElement(DraggableTag, {
+      ...tagProps,
+      disabled: !!disabled,
+      prefixCls: prefixCls,
+      customTagRender: customTagRender
+    });
+  }, [disabled, prefixCls, customTagRender]);
+  // Extract sortable items
+  const items = Array.isArray(internalValue) ? internalValue.map(extractValueId) : [];
+  return /*#__PURE__*/React.createElement(DndContext, {
+    sensors: sensors,
+    collisionDetection: closestCenter,
+    onDragEnd: handleDragEnd
+  }, /*#__PURE__*/React.createElement(SortableContext, {
+    items: items,
+    strategy: horizontalListSortingStrategy
+  }, /*#__PURE__*/React.createElement(Select, {
+    ...restProps,
+    mode: restProps.mode || 'multiple',
+    value: internalValue,
+    onChange: handleChange,
+    disabled: disabled,
+    prefixCls: customizePrefixCls,
+    tagRender: tagRender,
+    // Force disable maxTagCount & maxLines so all tags are rendered
+    maxTagCount: undefined,
+    maxLines: undefined
+  })));
+};
+export default SortableSelect;

package/es/select/index.d.ts

@@ -1,125 +1,8 @@
-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;
-    /** @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;
+import Select from './Select';
+import SortableSelect from './SortableSelect';
+import SingleDisplaySelect from './SingleDisplaySelect';
+export type { SortableSelectProps } from './SortableSelect';
+export type { SingleDisplaySelectProps } from './SingleDisplaySelect';
+export * from './Select';
+export { SortableSelect, SingleDisplaySelect };
 export default Select;

package/es/select/index.js

@@ -1,277 +1,10 @@
 "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,
-    ...rest
-  } = props;
-  const {
-    getPopupContainer: getContextPopupContainer,
-    getPrefixCls,
-    renderEmpty,
-    direction: contextDirection,
-    virtual,
-    popupMatchSelectWidth: contextPopupMatchSelectWidth,
-    popupOverflow
-  } = React.useContext(ConfigContext);
-  const {
-    showSearch,
-    optionFilterProp: contextOptionFilterProp,
-    style: contextStyle,
-    styles: contextStyles,
-    className: contextClassName,
-    classNames: contextClassNames
-  } = useComponentConfig('select');
-  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;
-  }
-  // ====================== zIndex =========================
-  const [zIndex] = useZIndex('SelectLike', mergedStyles.popup?.root?.zIndex ?? mergedPopupStyle?.zIndex);
-  // ====================== Render =======================
-  return /*#__PURE__*/React.createElement(RcSelect, {
-    ref: ref,
-    virtual: virtual,
-    classNames: mergedClassNames,
-    styles: mergedStyles,
-    showSearch: showSearch,
-    optionFilterProp: optionFilterProp ?? contextOptionFilterProp ?? 'label',
-    ...selectProps,
-    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';
-}
+import Select from './Select';
+import SortableSelect from './SortableSelect';
+import SingleDisplaySelect from './SingleDisplaySelect';
+export * from './Select';
+export { SortableSelect, SingleDisplaySelect };
+Select.SortableSelect = SortableSelect;
+Select.SingleDisplaySelect = SingleDisplaySelect;
 export default Select;

package/es/select/style/select-input-multiple.js

@@ -63,7 +63,10 @@ const genSelectInputMultipleStyle = token => {
         },
         '&-item': {
           lineHeight: 1,
-          maxWidth: `calc(100% - ${FIXED_INPUT_MIN_WIDTH}px)`
+          maxWidth: `calc(50% - ${FIXED_INPUT_MIN_WIDTH}px)`
+        },
+        '&-item-suffix': {
+          maxWidth: '100%'
         },
         [`${componentCls}-content-item-prefix + ${componentCls}-content-item-suffix,
           ${componentCls}-content-item-suffix:first-child`]: {