@rc-component/select 1.1.5 → 1.2.0-alpha.1

package/assets/index.css

@@ -1,3 +1,72 @@
+.rc-select.rc-select {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  border: 1px solid blue;
+  position: relative;
+}
+.rc-select.rc-select .rc-select-content {
+  flex: auto;
+  display: flex;
+  align-items: center;
+  /* Prevent content from wrapping */
+  min-width: 0;
+  /* allow flex item to shrink */
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  position: relative;
+}
+.rc-select.rc-select .rc-select-input {
+  border: none;
+  background: transparent;
+}
+.rc-select.rc-select .rc-select-placeholder {
+  opacity: 0.5;
+}
+.rc-select.rc-select .rc-select-placeholder::after {
+  content: '\00a0';
+  width: 0;
+  overflow: hidden;
+}
+.rc-select.rc-select .rc-select-content,
+.rc-select.rc-select .rc-select-input,
+.rc-select.rc-select .rc-select-placeholder {
+  padding: 0;
+  margin: 0;
+  line-height: 1.5;
+  font-size: 14px;
+  font-weight: normal;
+}
+.rc-select.rc-select .rc-select-prefix,
+.rc-select.rc-select .rc-select-suffix,
+.rc-select.rc-select .rc-select-clear {
+  flex: none;
+}
+.rc-select.rc-select .rc-select-clear {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.rc-select.rc-select-single .rc-select-input {
+  position: absolute;
+  inset: 0;
+}
+.rc-select.rc-select-multiple .rc-select-selection-item {
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  margin-right: 4px;
+}
+.rc-select.rc-select-multiple .rc-select-placeholder {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+}
+.rc-select.rc-select-multiple .rc-select-input {
+  width: calc(var(--select-input-width, 10) * 1px);
+  min-width: 4px;
+}
 * {
   box-sizing: border-box;
 }

package/assets/index.less

@@ -1,4 +1,5 @@
 @select-prefix: ~'rc-select';
+@import url('./patch.less');
 
 * {
   box-sizing: border-box;

package/assets/patch.less

@@ -0,0 +1,90 @@
+// This is used for semantic refactoring
+@import (reference) url('./index.less');
+
+.@{select-prefix}.@{select-prefix} {
+  display: inline-flex;
+  align-items: center;
+  user-select: none;
+  border: 1px solid blue;
+  position: relative;
+
+  // Content 部分自动占据剩余宽度
+  .@{select-prefix}-content {
+    flex: auto;
+    display: flex;
+    align-items: center;
+    /* Prevent content from wrapping */
+    min-width: 0; /* allow flex item to shrink */
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    position: relative;
+  }
+
+  .@{select-prefix}-input {
+    border: none;
+    background: transparent;
+  }
+
+  .@{select-prefix}-placeholder {
+    opacity: 0.5;
+
+    &::after {
+      content: '\00a0'; // nbsp placeholder
+      width: 0;
+      overflow: hidden;
+    }
+  }
+
+  .@{select-prefix}-content,
+  .@{select-prefix}-input,
+  .@{select-prefix}-placeholder {
+    padding: 0;
+    margin: 0;
+    line-height: 1.5;
+    font-size: 14px;
+    font-weight: normal;
+  }
+
+  // 其他部分禁止自动宽度，使用内容宽度
+  .@{select-prefix}-prefix,
+  .@{select-prefix}-suffix,
+  .@{select-prefix}-clear {
+    flex: none;
+  }
+
+  .@{select-prefix}-clear {
+    position: absolute;
+    top: 0;
+    right: 0;
+  }
+
+  // ============================= Single =============================
+  &-single {
+    .@{select-prefix}-input {
+      position: absolute;
+      inset: 0;
+    }
+  }
+
+  // ============================ Multiple ============================
+  &-multiple {
+    .@{select-prefix}-selection-item {
+      background: rgba(0, 0, 0, 0.1);
+      border-radius: 8px;
+      margin-right: 4px;
+    }
+
+    .@{select-prefix}-placeholder {
+      position: absolute;
+      left: 0;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+
+    .@{select-prefix}-input {
+      width: calc(var(--select-input-width, 10) * 1px);
+      min-width: 4px;
+    }
+  }
+}

package/es/BaseSelect/index.d.ts

@@ -2,7 +2,15 @@ import type { AlignType, BuildInPlacements } from '@rc-component/trigger/lib/int
 import type { ScrollConfig, ScrollTo } from 'rc-virtual-list/lib/List';
 import * as React from 'react';
 import type { DisplayInfoType, DisplayValueType, Mode, Placement, RawValueType, RenderDOMFunc, RenderNode } from '../interface';
-export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input';
+import type { ComponentsConfig } from '../hooks/useComponents';
+export type BaseSelectSemanticName = 'prefix' | 'suffix' | 'input' | 'clear';
+/**
+ * ZombieJ:
+ * We are currently refactoring the semantic structure of the component. Changelog:
+ * - Remove `suffixIcon` and change to `suffix`.
+ * - Add `components.root` for replacing response element.
+ *   - Remove `getInputElement` and `getRawInputElement` since we can use `components.input` instead.
+ */
 export type { DisplayInfoType, DisplayValueType, Mode, Placement, RenderDOMFunc, RenderNode, RawValueType, };
 export interface RefOptionListProps {
     onKeyDown: React.KeyboardEventHandler;
@@ -84,15 +92,17 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
     maxTagPlaceholder?: React.ReactNode | ((omittedValues: DisplayValueType[]) => React.ReactNode);
     tokenSeparators?: string[];
     allowClear?: boolean | {
-        clearIcon?: RenderNode;
+        clearIcon?: React.ReactNode;
     };
     prefix?: React.ReactNode;
+    /** @deprecated Please use `suffix` instead. */
     suffixIcon?: RenderNode;
+    suffix?: RenderNode;
     /**
      * Clear all icon
      * @deprecated Please use `allowClear` instead
      **/
-    clearIcon?: RenderNode;
+    clearIcon?: React.ReactNode;
     /** Selector remove icon */
     removeIcon?: RenderNode;
     animation?: string;
@@ -116,6 +126,7 @@ export interface BaseSelectProps extends BaseSelectPrivateProps, React.AriaAttri
     onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
     onClick?: React.MouseEventHandler<HTMLDivElement>;
+    components?: ComponentsConfig;
 }
 export declare const isMultiple: (mode: Mode) => boolean;
 declare const BaseSelect: React.ForwardRefExoticComponent<BaseSelectProps & React.RefAttributes<BaseSelectRef>>;