@tdm-design/ui 0.0.14 → 0.0.16

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;

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;