@tendaui/components 1.0.0

package/select/utils/helper.ts

@@ -0,0 +1,256 @@
+import { ReactElement } from "react";
+import { isPlainObject, get } from "lodash-es";
+import OptionGroup from "../OptionGroup";
+import Option from "../Option";
+
+import { SelectValue, TdOptionProps, SelectKeysType, TdSelectProps, SelectOption, SelectOptionGroup } from "../type";
+
+type SelectLabeledValue = Required<Omit<TdOptionProps, "disabled">>;
+
+export function isSelectOptionGroup(option: SelectOption): option is SelectOptionGroup {
+  return !!option && "group" in option && "children" in option;
+}
+
+export type ValueToOption = {
+  [value: string | number]: TdOptionProps;
+};
+
+function setValueToOptionFormOptionDom(dom: ReactElement, valueToOption: ValueToOption, keys: SelectKeysType) {
+  const { value, label, children } = dom.props;
+
+  valueToOption[value] = {
+    ...dom.props,
+    [keys?.value || "value"]: value,
+    [keys?.label || "label"]: label || children || value
+  };
+}
+
+// 获取 value => option，用于快速基于 value 找到对应的 option
+export const getValueToOption = (
+  children: ReactElement,
+  options: SelectOption[],
+  keys: SelectKeysType
+): ValueToOption => {
+  const valueToOption = {};
+
+  // options 优先级高于 children
+  if (Array.isArray(options)) {
+    options.forEach((option) => {
+      if (isSelectOptionGroup(option)) {
+        option.children?.forEach((child) => {
+          valueToOption[get(child, keys?.value || "value")] = {
+            ...child,
+            value: get(child, keys?.value || "value"),
+            label: get(child, keys?.label || "label")
+          };
+        });
+      } else {
+        valueToOption[get(option, keys?.value || "value")] = {
+          ...(option as object),
+          value: get(option, keys?.value || "value"),
+          label: get(option, keys?.label || "label")
+        } as never;
+      }
+    });
+    return valueToOption;
+  }
+
+  if (isPlainObject(children)) {
+    if (children.type === Option) {
+      setValueToOptionFormOptionDom(children, valueToOption, keys);
+      return valueToOption;
+    }
+
+    if (children.type === OptionGroup) {
+      const groupChildren = children.props.children;
+
+      if (Array.isArray(groupChildren)) {
+        groupChildren.forEach((item) => {
+          setValueToOptionFormOptionDom(item, valueToOption, keys);
+        });
+        return valueToOption;
+      }
+    }
+  }
+
+  /**
+   * children如果存在ReactElement和map函数混写的情况，会出现嵌套数组
+   */
+  if (Array.isArray(children)) {
+    const handlerElement = (item: ReactElement) => {
+      if (item.type === Option) {
+        setValueToOptionFormOptionDom(item, valueToOption, keys);
+      }
+
+      if (item.type === OptionGroup) {
+        const groupChildren = (item.props as SelectOption).children;
+        if (Array.isArray(groupChildren)) {
+          groupChildren.forEach((groupItem) => {
+            setValueToOptionFormOptionDom(groupItem, valueToOption, keys);
+          });
+        }
+      }
+
+      if (Array.isArray(item)) {
+        item.forEach((child) => {
+          handlerElement(child);
+        });
+      }
+    };
+    children.forEach((item: ReactElement) => handlerElement(item));
+  }
+
+  return valueToOption;
+};
+
+// 获取单选的 label
+export const getLabel = (
+  children: ReactElement,
+  value: SelectValue<TdOptionProps>,
+  options: TdOptionProps[],
+  keys: SelectKeysType
+) => {
+  let selectedLabel = "";
+  // 处理带 options 属性的情况
+  if (Array.isArray(options)) {
+    options.some((option) => {
+      if ([get(value, keys?.value || "value"), value].includes(option.value)) {
+        selectedLabel = option.label;
+        return true;
+      }
+      return false;
+    });
+
+    return selectedLabel;
+  }
+
+  if (isPlainObject(children)) {
+    selectedLabel = children.props.label;
+
+    if (children.type === OptionGroup) {
+      const groupChildren = children.props.children;
+
+      if (Array.isArray(groupChildren)) {
+        groupChildren.some((item) => {
+          const selectedValue = isPlainObject(value) ? get(value, "value") : value;
+          if (isPlainObject(item.props) && item.props.value === selectedValue) {
+            selectedLabel = item.props.label || item.props.children;
+            return true;
+          }
+          return false;
+        });
+      }
+    }
+  }
+
+  if (Array.isArray(children)) {
+    children.some((item: ReactElement) => {
+      // 处理分组
+      if (item.type === OptionGroup) {
+        const groupChildren = item.props.children;
+        if (Array.isArray(groupChildren)) {
+          const isSelected = groupChildren.some((item) => {
+            const selectedValue = isPlainObject(value) ? get(value, "value") : value;
+            if (isPlainObject(item.props) && item.props.value === selectedValue) {
+              selectedLabel = item.props.label || item.props.children;
+              return true;
+            }
+            return false;
+          });
+          return isSelected;
+        }
+      }
+      const selectedValue = isPlainObject(value) ? get(value, "value") : value;
+      if (isPlainObject(item.props) && item.props.value === selectedValue) {
+        selectedLabel = item.props.label || item.props.children;
+        return true;
+      }
+      return false;
+    });
+  }
+
+  return selectedLabel;
+};
+
+export const getMultipleTags = (values: SelectValue[], keys: SelectKeysType) => {
+  const tags = values.map((item) => ({
+    label: get(item, keys?.label || "label") || item.toString(),
+    value: get(item, keys?.value || "value") || item
+  }));
+  return tags;
+};
+
+export const getSelectValueArr = (
+  values: SelectValue | SelectValue[],
+  activeValue: SelectValue,
+  selected?: boolean,
+  valueType?: TdSelectProps["valueType"],
+  keys?: SelectKeysType,
+  objVal?: SelectValue
+) => {
+  values = Array.isArray(values) ? values : [];
+
+  if (Array.isArray(values)) {
+    let currentValues = [...values];
+    const isValueObj = valueType === "object";
+    if (selected) {
+      currentValues = currentValues.filter((item: SelectLabeledValue) => {
+        if (isValueObj) {
+          if (isPlainObject(activeValue)) {
+            return get(item, keys?.value || "value") !== get(activeValue, keys?.value || "value");
+          }
+          return get(item, keys?.value || "value") !== activeValue;
+        }
+        return item !== activeValue;
+      });
+    } else {
+      const item = isValueObj ? objVal : activeValue;
+
+      currentValues.push(item as SelectValue);
+    }
+    return currentValues;
+  }
+};
+
+// 计算onChange事件回调的selectedOptions参数
+export const getSelectedOptions = (
+  value: SelectValue,
+  multiple: TdSelectProps["multiple"],
+  valueType: TdSelectProps["valueType"],
+  keys: SelectKeysType,
+  valueToOption: ValueToOption,
+  selectedValue?: SelectValue
+) => {
+  const isObjectType = valueType === "object";
+  // 当前所有选中的选项
+  let currentSelectedOptions = [];
+  // 当前选中的选项
+  let currentOption: SelectOption;
+  // 全选值
+  let allSelectedValue: Array<SelectValue>;
+  // 所有可选项
+  const tmpPropOptions = Object.values(valueToOption);
+  if (multiple) {
+    currentSelectedOptions = isObjectType
+      ? (value as Array<SelectValue>)
+      : tmpPropOptions?.filter?.((v) => (value as Array<string | number>).includes?.(v[keys?.value || "value"]));
+
+    allSelectedValue = isObjectType
+      ? currentSelectedOptions
+      : currentSelectedOptions?.map((v) => v[keys?.value || "value"]);
+
+    currentOption = isObjectType
+      ? (value as Array<SelectValue>).find((v) => v[keys?.value || "value"] === selectedValue)
+      : currentSelectedOptions?.find((option) => option[keys?.value || "value"] === selectedValue);
+  } else {
+    currentSelectedOptions = isObjectType
+      ? [value]
+      : tmpPropOptions?.filter?.((v) => value === v[keys?.value || "value"]) || [];
+    allSelectedValue = currentSelectedOptions;
+    currentOption = isObjectType
+      ? value
+      : currentSelectedOptions?.find((option) => option[keys?.value || "value"] === selectedValue);
+  }
+
+  return { currentSelectedOptions, currentOption, allSelectedValue };
+};

package/select-input/SelectInput.tsx

@@ -0,0 +1,98 @@
+import React, { useRef, useImperativeHandle } from "react";
+import classNames from "classnames";
+import useSingle from "./hook/useSingle";
+import useMultiple from "./hook/useMultiple";
+import Popup, { PopupRef, PopupVisibleChangeContext } from "../popup";
+import useOverlayInnerStyle from "./hook/useOverlayInnerStyle";
+import { TdSelectInputProps } from "./type";
+import { StyledProps } from "../common";
+import { selectInputDefaultProps } from "./defaultProps";
+import useConfig from "../hooks/useConfig";
+import useDefaultProps from "../hooks/useDefaultProps";
+import { InputRef } from "../input";
+
+export interface SelectInputProps extends TdSelectInputProps, StyledProps {
+  updateScrollTop?: (content: HTMLDivElement) => void;
+  options?: unknown[]; // 参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
+
+const SelectInput = React.forwardRef<Partial<PopupRef & InputRef>, SelectInputProps>((originalProps, ref) => {
+  const props = useDefaultProps<SelectInputProps>(originalProps, selectInputDefaultProps);
+  const { classPrefix: prefix } = useConfig();
+  const selectInputRef = useRef<PopupRef>(null);
+  const selectInputWrapRef = useRef<HTMLElement>(null);
+  const { multiple, value, popupVisible, popupProps, borderless, disabled } = props;
+  const { commonInputProps, inputRef, singleInputValue, onInnerClear, renderSelectSingle } = useSingle(props);
+
+  const { tagInputRef, multipleInputValue, renderSelectMultiple } = useMultiple(props);
+  const { tOverlayInnerStyle, innerPopupVisible, onInnerPopupVisibleChange } = useOverlayInnerStyle(props, {
+    afterHidePopups: onInnerBlur
+  });
+
+  const popupClasses = classNames([
+    props.className,
+    `${prefix}-select-input`,
+    {
+      [`${prefix}-select-input--borderless`]: borderless,
+      [`${prefix}-select-input--multiple`]: multiple,
+      [`${prefix}-select-input--popup-visible`]: popupVisible ?? innerPopupVisible,
+      [`${prefix}-select-input--empty`]: value instanceof Array ? !value.length : !value
+    }
+  ]);
+  useImperativeHandle(ref, () => ({
+    ...(selectInputRef.current || {}),
+    ...(inputRef.current || {}),
+    ...(tagInputRef.current || {})
+  }));
+
+  // 浮层显示的受控与非受控
+  const visibleProps = { visible: popupVisible ?? innerPopupVisible };
+  function onInnerBlur(ctx: PopupVisibleChangeContext) {
+    const inputValue = props.multiple ? multipleInputValue : singleInputValue;
+    const params: Parameters<TdSelectInputProps["onBlur"]>[1] = {
+      e: ctx.e,
+      inputValue
+    };
+    props.onBlur?.(props.value, params);
+  }
+  const mainContent = (
+    <div className={popupClasses} style={props.style}>
+      <Popup
+        ref={selectInputRef}
+        trigger={popupProps?.trigger || "click"}
+        placement="bottom-left"
+        content={props.panel}
+        hideEmptyPopup={true}
+        onVisibleChange={onInnerPopupVisibleChange}
+        updateScrollTop={props.updateScrollTop}
+        {...visibleProps}
+        {...popupProps}
+        disabled={disabled}
+        overlayInnerStyle={tOverlayInnerStyle}
+      >
+        {multiple
+          ? renderSelectMultiple({
+              commonInputProps,
+              onInnerClear,
+              popupVisible: visibleProps.visible,
+              allowInput: props.allowInput
+            })
+          : renderSelectSingle(visibleProps.visible)}
+      </Popup>
+    </div>
+  );
+  if (!props.tips) {
+    return mainContent;
+  }
+
+  return (
+    <div ref={selectInputWrapRef as React.Ref<HTMLDivElement>} className={`t-select-input__wrap`}>
+      {mainContent}
+      {props.tips && <div className={`t-input__tips t-input__tips--${props.status || "normal"}`}>{props.tips}</div>}
+    </div>
+  );
+});
+
+SelectInput.displayName = "SelectInput";
+
+export default SelectInput;

package/select-input/defaultProps.ts

@@ -0,0 +1,15 @@
+import { TdSelectInputProps } from "./type";
+
+export const selectInputDefaultProps: TdSelectInputProps = {
+  allowInput: false,
+  autoWidth: false,
+  autofocus: false,
+  borderless: false,
+  clearable: false,
+  loading: false,
+  minCollapsedNum: 0,
+  multiple: false,
+  readonly: false,
+  reserveKeyword: false,
+  status: "default"
+};

package/select-input/hook/useMultiple.tsx

@@ -0,0 +1,100 @@
+import React, { useRef, MouseEvent } from "react";
+import { isObject } from "lodash-es";
+import classNames from "classnames";
+import { TdSelectInputProps, SelectInputChangeContext, SelectInputKeys, SelectInputValue } from "../type";
+import TagInput, { TagInputValue } from "../../tag-input";
+import { SelectInputCommonProperties } from "../interface";
+import useControlled from "../../hooks/useControlled";
+import useConfig from "../../hooks/useConfig";
+import { InputRef } from "../../input";
+import { StyledProps } from "../../common";
+
+export interface RenderSelectMultipleParams {
+  commonInputProps: SelectInputCommonProperties;
+  onInnerClear: (context: { e: MouseEvent<SVGElement> }) => void;
+  popupVisible: boolean;
+  allowInput: boolean;
+}
+
+const DEFAULT_KEYS = {
+  label: "label",
+  key: "key",
+  children: "children"
+};
+
+export interface SelectInputProps extends TdSelectInputProps, StyledProps {
+  options?: unknown[]; // 参数穿透options, 给SelectInput/SelectInput 自定义选中项呈现的内容和多选状态下设置折叠项内容
+}
+
+export default function useMultiple(props: SelectInputProps) {
+  const { value } = props;
+  const { classPrefix } = useConfig();
+  const tagInputRef = useRef<InputRef>(null);
+  const [tInputValue, setTInputValue] = useControlled(props, "inputValue", props.onInputChange);
+  const iKeys: SelectInputKeys = { ...DEFAULT_KEYS, ...props.keys };
+
+  const getTags = () => {
+    if (!(value instanceof Array)) {
+      if (["", null, undefined].includes(String(value))) return [];
+      return isObject(value) ? [value[iKeys.label]] : [value];
+    }
+    return value.map((item: SelectInputValue) => (isObject(item) ? item[iKeys.label] : item));
+  };
+  const tags = getTags();
+  const tPlaceholder = !tags || !tags.length ? props.placeholder : "";
+
+  const onTagInputChange = (val: TagInputValue, context: SelectInputChangeContext) => {
+    // 避免触发浮层的显示或隐藏
+    if (context.trigger === "tag-remove") {
+      context.e?.stopPropagation();
+    }
+    props.onTagChange?.(val, context);
+  };
+
+  const renderSelectMultiple = (p: RenderSelectMultipleParams) => (
+    <TagInput
+      ref={tagInputRef}
+      {...p.commonInputProps}
+      autoWidth={props.autoWidth}
+      readonly={props.readonly}
+      minCollapsedNum={props.minCollapsedNum}
+      collapsedItems={props.collapsedItems}
+      tag={props.tag}
+      valueDisplay={props.valueDisplay}
+      placeholder={tPlaceholder}
+      options={props.options}
+      value={tags}
+      inputValue={p.popupVisible && p.allowInput ? tInputValue : ""}
+      onChange={onTagInputChange}
+      onInputChange={(val, context) => {
+        // 筛选器统一特性：筛选器按下回车时不清空输入框
+        if (context?.trigger === "enter" || context?.trigger === "blur") return;
+        setTInputValue(val, { trigger: context.trigger, e: context.e });
+      }}
+      tagProps={props.tagProps}
+      onClear={p.onInnerClear}
+      // [Important Info]: SelectInput.blur is not equal to TagInput, example: click popup panel
+      onFocus={(val, context) => {
+        props.onFocus?.(props.value, { ...context, tagInputValue: val });
+      }}
+      onBlur={!props.panel ? props.onBlur : null}
+      {...props.tagInputProps}
+      inputProps={{
+        ...props.inputProps,
+        readonly: !props.allowInput || props.readonly,
+        inputClass: classNames(props.tagInputProps?.className, {
+          [`${classPrefix}-input--focused`]: p.popupVisible,
+          [`${classPrefix}-is-focused`]: p.popupVisible
+        })
+      }}
+    />
+  );
+
+  return {
+    tags,
+    tPlaceholder,
+    tagInputRef,
+    multipleInputValue: tInputValue,
+    renderSelectMultiple
+  };
+}

package/select-input/hook/useOverlayInnerStyle.ts

@@ -0,0 +1,84 @@
+import React, { useMemo } from "react";
+import { isObject, isFunction } from "lodash-es";
+import useControlled from "../../hooks/useControlled";
+import { TdSelectInputProps } from "../type";
+import { TdPopupProps, PopupVisibleChangeContext } from "../../popup";
+
+export type overlayStyleProps = Pick<
+  TdSelectInputProps,
+  | "popupProps"
+  | "autoWidth"
+  | "readonly"
+  | "onPopupVisibleChange"
+  | "disabled"
+  | "allowInput"
+  | "popupVisible"
+  | "defaultPopupVisible"
+>;
+
+const MAX_POPUP_WIDTH = 1000;
+
+export default function useOverlayInnerStyle(
+  props: overlayStyleProps,
+  extra?: {
+    afterHidePopups?: (ctx: PopupVisibleChangeContext) => void;
+  }
+) {
+  const { popupProps, autoWidth, readonly, disabled, onPopupVisibleChange, allowInput } = props;
+  const [innerPopupVisible, setInnerPopupVisible] = useControlled(props, "popupVisible", onPopupVisibleChange);
+  const matchWidthFunc = (triggerElement: HTMLElement, popupElement: HTMLElement) => {
+    if (!triggerElement || !popupElement) {
+      return;
+    }
+
+    const prevDisplay = popupElement.style.display;
+    popupElement.style.display = "";
+    const overlayScrollWidth = popupElement.offsetWidth - popupElement.scrollWidth;
+    const width =
+      popupElement.offsetWidth - overlayScrollWidth > triggerElement.offsetWidth
+        ? popupElement.scrollWidth
+        : triggerElement.offsetWidth - overlayScrollWidth;
+    if (prevDisplay === "none") {
+      popupElement.style.display = "none";
+    }
+    let otherOverlayInnerStyle: React.CSSProperties = {};
+    if (popupProps && typeof popupProps.overlayInnerStyle === "object" && !popupProps.overlayInnerStyle.width) {
+      otherOverlayInnerStyle = popupProps.overlayInnerStyle;
+    }
+    return {
+      width: `${Math.min(width, MAX_POPUP_WIDTH)}px`,
+      ...otherOverlayInnerStyle
+    };
+  };
+
+  const onInnerPopupVisibleChange = (visible: boolean, context: PopupVisibleChangeContext) => {
+    if (disabled || readonly) {
+      return;
+    }
+    // 如果点击触发元素（输入框）且为可输入状态，则继续显示下拉框
+    const newVisible = context.trigger === "trigger-element-click" && allowInput ? true : visible;
+    if (props.popupVisible !== newVisible) {
+      setInnerPopupVisible(newVisible, context);
+      if (!newVisible) {
+        extra?.afterHidePopups?.(context);
+      }
+    }
+  };
+  const tOverlayInnerStyle = useMemo(() => {
+    let result: TdPopupProps["overlayInnerStyle"] = {};
+    const overlayInnerStyle = popupProps?.overlayInnerStyle || {};
+    if (isFunction(overlayInnerStyle) || (isObject(overlayInnerStyle) && overlayInnerStyle.width)) {
+      result = overlayInnerStyle;
+    } else if (!autoWidth) {
+      result = matchWidthFunc;
+    }
+    return result;
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [autoWidth, popupProps?.overlayInnerStyle]);
+
+  return {
+    tOverlayInnerStyle,
+    innerPopupVisible,
+    onInnerPopupVisibleChange
+  };
+}

package/select-input/hook/useSingle.tsx

@@ -0,0 +1,112 @@
+import React, { useRef, MouseEvent } from "react";
+import { isObject, pick } from "lodash-es";
+import classNames from "classnames";
+import { SelectInputCommonProperties } from "../interface";
+import { TdSelectInputProps, SelectInputValueChangeContext } from "../type";
+import Input, { InputRef, TdInputProps } from "../../input";
+import useControlled from "../../hooks/useControlled";
+
+export interface RenderSelectSingleInputParams {
+  tPlaceholder: string;
+}
+
+// single 和 multiple 共有特性
+const COMMON_PROPERTIES = [
+  "status",
+  "clearable",
+  "disabled",
+  "label",
+  "placeholder",
+  "readonly",
+  "suffix",
+  "suffixIcon",
+  "onPaste",
+  "onEnter",
+  "onMouseenter",
+  "onMouseleave",
+  "size",
+  "prefixIcon"
+];
+
+const DEFAULT_KEYS: TdSelectInputProps["keys"] = {
+  label: "label",
+  value: "value"
+};
+
+function getInputValue(value: TdSelectInputProps["value"], keys: TdSelectInputProps["keys"]) {
+  const iKeys = keys || DEFAULT_KEYS;
+  return isObject(value) ? value[iKeys.label] : value;
+}
+
+export default function useSingle(props: TdSelectInputProps) {
+  const { value, keys } = props;
+  const inputRef = useRef<InputRef>(null);
+  const [inputValue, setInputValue] = useControlled(props, "inputValue", props.onInputChange);
+  const commonInputProps: SelectInputCommonProperties = {
+    ...pick(props, COMMON_PROPERTIES),
+    suffixIcon: props.suffixIcon
+  };
+
+  const onInnerClear = (context: { e: MouseEvent<SVGSVGElement> }) => {
+    context?.e?.stopPropagation();
+    props.onClear?.(context);
+    setInputValue("", { trigger: "clear" });
+  };
+
+  const onInnerInputChange: TdInputProps["onChange"] = (value, context) => {
+    if (props.allowInput) {
+      setInputValue(value, { ...context, trigger: "input" } as SelectInputValueChangeContext);
+    }
+  };
+
+  const handleEmptyPanelBlur = (value: string, { e }: { e: React.FocusEvent<HTMLInputElement> }) => {
+    props.onBlur?.(value, { e, inputValue: value });
+  };
+
+  const renderSelectSingle = (popupVisible: boolean) => {
+    const singleValueDisplay = !props.multiple ? props.valueDisplay : null;
+    const displayedValue = popupVisible && props.allowInput ? inputValue : getInputValue(value, keys);
+    return (
+      <Input
+        ref={inputRef as unknown as React.Ref<HTMLInputElement>}
+        {...commonInputProps}
+        autoWidth={props.autoWidth}
+        placeholder={props.placeholder}
+        value={singleValueDisplay ? " " : displayedValue}
+        label={
+          (props.label || singleValueDisplay) && (
+            <>
+              {props.label}
+              {singleValueDisplay as React.ReactNode}
+            </>
+          )
+        }
+        onChange={onInnerInputChange}
+        onClear={onInnerClear}
+        // [Important Info]: SelectInput.blur is not equal to Input, example: click popup panel
+        onFocus={(val, context) => {
+          props.onFocus?.(value, { ...context, inputValue: val });
+          // focus might not need to change input value. it will caught some curious errors in tree-select
+          // !popupVisible && setInputValue(getInputValue(value, keys), { ...context, trigger: 'input' });
+        }}
+        onEnter={(val, context) => {
+          props.onEnter?.(value, { ...context, inputValue: val });
+        }}
+        // onBlur need to triggered by input when popup panel is null
+        onBlur={!props.panel ? handleEmptyPanelBlur : null}
+        {...props.inputProps}
+        inputClass={classNames(props.inputProps?.className, {
+          [`t-input--focused`]: popupVisible,
+          [`t-is-focused`]: popupVisible
+        })}
+      ></Input>
+    );
+  };
+  return {
+    inputRef,
+    commonInputProps,
+    singleInputValue: inputValue,
+    onInnerClear,
+    renderSelectSingle
+  };
+}

package/select-input/index.ts

@@ -0,0 +1,6 @@
+import _SelectInput from "./SelectInput";
+import "./style/index.js";
+export type { SelectInputProps } from "./SelectInput";
+export * from "./type";
+export const SelectInput = _SelectInput;
+export default SelectInput;

package/select-input/interface.ts

@@ -0,0 +1,18 @@
+import { TdSelectInputProps } from "./type";
+
+export interface SelectInputCommonProperties {
+  status?: TdSelectInputProps["status"];
+  tips?: TdSelectInputProps["tips"];
+  clearable?: TdSelectInputProps["clearable"];
+  disabled?: TdSelectInputProps["disabled"];
+  label?: TdSelectInputProps["label"];
+  placeholder?: TdSelectInputProps["placeholder"];
+  readonly?: TdSelectInputProps["readonly"];
+  suffix?: TdSelectInputProps["suffix"];
+  suffixIcon?: TdSelectInputProps["suffixIcon"];
+  size?: TdSelectInputProps["size"];
+  onPaste?: TdSelectInputProps["onPaste"];
+  onEnter?: TdSelectInputProps["onEnter"];
+  onMouseenter?: TdSelectInputProps["onMouseenter"];
+  onMouseleave?: TdSelectInputProps["onMouseleave"];
+}

package/select-input/style/css.js

@@ -0,0 +1 @@
+import "./index.css";