@hsu-react/ui 1.0.0 → 2.0.0

package/src/components/Select/AutoCompleteSelect/index.module.scss

@@ -9,37 +9,41 @@
   padding: 0px 11px;
 
   // CF style: outlined input control that follows appearance switching
-  border: 1px solid var(--cf-border);
-  border-radius: 6px;
+  border: 1px solid var(--vita-border);
+  border-radius: var(--vita-radius);
 
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
   transition: border-color 0.3s, box-shadow 0.3s;
 
   &.disabled {
-    background: var(--cf-subtle);
+    background: var(--vita-muted);
 
-    color: var(--cf-text-3);
+    color: var(--vita-subtle-foreground);
 
-    border-color: var(--cf-border);
+    border-color: var(--vita-border);
 
     cursor: not-allowed;
 
     .antdAutoComplete {
       cursor: not-allowed;
 
+      // v6 renders the single-mode value straight into `.ant-select-content` / `.ant-select-input`;
+      // `.ant-select-selection-item` only survives as the tag in multiple mode.
+      :global(.ant-select-content),
+      :global(.ant-select-input),
       :global(.ant-select-selection-item) {
-        color: var(--cf-text-3);
+        color: var(--vita-subtle-foreground);
       }
 
-      :global(.ant-select-arrow) {
+      :global(.ant-select-suffix) {
         cursor: not-allowed;
       }
     }
 
     &:hover,
     &.focused {
-      border-color: var(--cf-border);
+      border-color: var(--vita-border);
 
       box-shadow: none;
     }
@@ -47,9 +51,9 @@
 
   &:hover,
   &.focused {
-    border-color: var(--primary-color);
+    border-color: var(--vita-primary);
 
-    box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary-color) 12%, transparent);
+    box-shadow: var(--vita-focus-ring);
 
     outline: 0;
   }
@@ -76,20 +80,20 @@
   }
 
   &:has(:global(.ant-select-status-error)) {
-    border: 1px solid var(--cf-error);
+    border: 1px solid var(--vita-error);
 
     .prefix,
     .suffix {
-      color: var(--cf-error);
+      color: var(--vita-error);
     }
   }
 
   &.legacyHasErrorStatus {
-    border: 1px solid var(--cf-error);
+    border: 1px solid var(--vita-error);
 
     .prefix,
     .suffix {
-      color: var(--cf-error);
+      color: var(--vita-error);
     }
   }
 
@@ -108,167 +112,104 @@
     font-weight: inherit;
     color: inherit !important;
 
-    &:has(> :global(.ant-select-arrow)),
-    &:has(> :global(.ant-select-clear)) {
-      :global(.ant-select-selector) {
-        padding-right: 20px;
-      }
-    }
-
-    &.legacyHasArrowOrClear {
-      :global(.ant-select-selector) {
-        padding-right: 20px;
-      }
-    }
-
+    // antd v6 flattened the Select DOM. The chrome that used to be drawn on the
+    // `.ant-select-selector` child — border, background, padding — now lives on the `.ant-select`
+    // root, so it is neutralised there instead of on a descendant. v6 also lays the root out with
+    // flexbox and keeps suffix / clear in the normal flow, so the old "reserve 20px on the right
+    // for the absolutely positioned arrow" rules (and their `:has()`-less `legacyHasArrowOrClear`
+    // fallback) are gone.
     &:global(.ant-select) {
       width: 100%;
       height: 100%;
+      padding: 0 !important;
 
-      :global(.ant-select-selector) {
-        width: 100%;
-        height: 100%;
-        padding: 0;
+      border: none !important;
+      background: transparent !important;
 
-        border: none !important;
+      &::after {
+        content: none;
+      }
+
+      // v5's `.ant-select-selection-wrap` / `.ant-select-selection-search` collapsed into a single
+      // `.ant-select-content > input.ant-select-input`.
+      :global(.ant-select-content),
+      :global(.ant-select-input) {
+        height: 100%;
 
         font-family: inherit;
         font-size: inherit;
         font-weight: inherit;
-        color: inherit !important;
-
-        background: transparent !important;
-
-        &::after {
-          content: none;
-        }
-
-        :global(.ant-select-selection-wrap) {
-          height: 100%;
-
-          font-family: inherit;
-          font-size: inherit;
-          font-weight: inherit;
-          color: inherit;
-        }
-
-        :global(.ant-select-selection-search) {
-          inset-inline-start: 0px;
-          inset-inline-end: 0px;
-
-          font-family: inherit;
-          font-size: inherit;
-          font-weight: inherit;
-          color: inherit;
-
-          input[type="search"] {
-            height: 100%;
-
-            font-family: inherit;
-            font-size: inherit;
-            font-weight: inherit;
-            color: inherit;
-          }
-        }
-
-        :global(.ant-select-selection-placeholder) {
-          display: inline-flex;
-          align-items: center;
+        color: inherit;
+      }
 
-          height: 100%;
+      :global(.ant-select-placeholder) {
+        display: inline-flex;
+        align-items: center;
 
-          line-height: normal;
-          font-family: inherit;
-          font-size: inherit;
-          font-weight: inherit;
-        }
+        height: 100%;
 
-        :global(.ant-select-selection-item) {
-          padding-inline-end: 0px;
+        line-height: normal;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+      }
 
-          font-family: inherit;
-          font-size: inherit;
-          font-weight: inherit;
-          color: inherit;
-        }
+      // Multiple mode only: `.ant-select-selection-item` is the tag.
+      :global(.ant-select-selection-item) {
+        line-height: normal;
 
-        :global(.ant-select-selection-overflow-item) {
-          :global(.ant-select-selection-item) {
-            line-height: normal;
+        padding-inline-end: 4px;
 
-            padding-inline-end: 4px;
-          }
-        }
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        color: inherit;
       }
 
-      &:global(.ant-select-focused) {
-        :global(.ant-select-selector) {
-          border: none !important;
+      &:global(.ant-select-focused),
+      &:global(.ant-select-status-error) {
+        border: none !important;
 
-          box-shadow: none !important;
-        }
+        box-shadow: none !important;
       }
 
       &:global(.ant-select-open) {
-        :global(.ant-select-arrow) {
-          transform: rotate(-180deg) translateY(50%);
+        :global(.ant-select-suffix) {
+          // No `translateY(-50%)` companion any more — the suffix sits in the flex flow.
+          transform: rotate(180deg);
         }
 
         &.noArrowAnimation {
-          :global(.ant-select-arrow) {
-            transform: translateY(-50%);
+          :global(.ant-select-suffix) {
+            transform: none;
             transition: none !important;
           }
         }
       }
 
-      &:global(.ant-select-status-error) {
-        :global(.ant-select-selector) {
-          border: none !important;
-        }
-      }
-
       &:global(.ant-select-multiple) {
-        > :global(.ant-select-selector) {
-          > :global(.ant-select-selection-overflow) {
-            :global(.ant-select-selection-search) {
-              width: 0px !important;
+        // Keep the search input from claiming a slot of its own between the tags.
+        :global(.ant-select-input) {
+          width: 0px !important;
 
-              margin-inline-start: 0px;
-            }
-          }
-
-          > :global(.ant-select-selection-placeholder) {
-            inset-inline-start: 0px;
-          }
+          margin-inline-start: 0px;
         }
       }
 
-      :global(.ant-select-arrow) {
+      // Both icons are laid out by v6's flexbox root, so the absolute-position compensation
+      // (`inset-inline-end` / `translateY(-50%)`) that v5 needed is gone.
+      :global(.ant-select-suffix),
+      :global(.ant-select-clear) {
         width: 14px;
         height: 14px;
         margin-top: 0px;
-        inset-inline-end: 0px;
 
         font-size: 14px;
 
         transition: transform 0.3s;
-        transform: translateY(-50%);
 
         pointer-events: all;
       }
-
-      :global(.ant-select-clear) {
-        width: 14px;
-        height: 14px;
-        margin-top: 0px;
-
-        font-size: 14px;
-
-        transform: translateY(-50%);
-
-        inset-inline-end: 0px;
-      }
     }
   }
 

package/src/components/Select/AutoCompleteSelect/index.tsx

@@ -255,7 +255,9 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
           onChange,
           onSearch: handleSearch,
           open: mergedOpen,
-          onDropdownVisibleChange: (visible) => {
+          // v6 renamed `onDropdownVisibleChange` to `onOpenChange`; this component's own prop
+          // keeps the old name for consumers.
+          onOpenChange: (visible: boolean) => {
             setOpen(visible);
             onDropdownVisibleChange?.(visible);
           },
@@ -263,15 +265,19 @@ const AutoCompleteSelect: React.FC<AutoCompleteSelectProps> = (props) => {
             [styles.legacyHasArrowOrClear]:
               legacyHasSelector && legacyHasArrowOrClear,
           }),
-          popupClassName: `${cls} ${popupClassName ?? ""}`,
+          classNames: { popup: { root: `${cls} ${popupClassName ?? ""}` } },
           getPopupContainer: () => autoCompleteRef.current ?? document.body,
           popupMatchSelectWidth:
             popupMatchSelectWidth ?? (calculatedPopupWidth || undefined),
-          dropdownStyle: {
-            left: autoCompleteRef.current
-              ? getElementLeft(autoCompleteRef.current)
-              : undefined,
-            right: "auto",
+          styles: {
+            popup: {
+              root: {
+                left: autoCompleteRef.current
+                  ? getElementLeft(autoCompleteRef.current)
+                  : undefined,
+                right: "auto",
+              },
+            },
           },
           placement,
           disabled,

package/src/components/Select/IconSelect/index.module.scss

@@ -10,7 +10,8 @@
     cursor: pointer;
   }
 
-  :global(.ant-input-group-addon) {
+  // v5's `.ant-input-group-addon` is v6's `Space.Addon`
+  :global(.ant-space-addon) {
     padding: 0;
   }
 }
@@ -54,12 +55,12 @@
 
       font-size: 16px;
 
-      border: 1px solid var(--cf-border-weak);
+      border: 1px solid var(--vita-border-weak);
 
       cursor: pointer;
 
       &.active {
-        background: var(--cf-row-hover);
+        background: var(--vita-hover);
       }
     }
   }

package/src/components/Select/IconSelect/index.tsx

@@ -1,4 +1,4 @@
-import { Popover, Tabs, Tooltip } from "antd";
+import { Popover, Space, Tabs, Tooltip } from "antd";
 import React, { useEffect, useState } from "react";
 
 import Icon from "../../Icon";
@@ -108,12 +108,10 @@ const IconSelect: React.FC<IconSelectProps> = (props) => {
   };
 
   return (
-    <Input
-      className={styles.iconSelect}
-      value={_value}
-      onChange={_onChange}
-      disabled={disabled}
-      addonAfter={
+    // antd v6 deprecated `addonAfter` in favour of Space.Compact + Space.Addon
+    <Space.Compact className={styles.iconSelect}>
+      <Input value={_value} onChange={_onChange} disabled={disabled} />
+      <Space.Addon>
         <Popover
           placement="bottom"
           trigger="click"
@@ -175,8 +173,8 @@ const IconSelect: React.FC<IconSelectProps> = (props) => {
             <Icon icon={_value} />
           </div>
         </Popover>
-      }
-    />
+      </Space.Addon>
+    </Space.Compact>
   );
 };
 

package/src/components/Select/TreeSelect/_utils/getExpandedKeysByLevel.ts

@@ -1,4 +1,7 @@
-import { DataNode, SafeKey } from "rc-tree-select/lib/interface";
+import type {
+  TreeSelectDataNode as DataNode,
+  SafeKey,
+} from "../../../../types/antd";
 
 /**
  * Compute the node keys that should be expanded based on the default expand level (for TreeSelect)

package/src/components/Select/TreeSelect/index.module.scss

@@ -6,57 +6,32 @@
   width: 100%;
   height: 100%;
 
-  // CF style: outlined input control that follows appearance switching
-  background: var(--cf-surface);
-  border: 1px solid var(--cf-border);
-  border-radius: 6px;
+  // CF style: outlined input control that follows appearance switching.
+  //
+  // antd v6 flattened the Select DOM: the box (border / background / padding) that used to be
+  // drawn on the `.ant-select-selector` child now sits on the `.ant-select` root — i.e. on this
+  // very element. So antd's own chrome is overridden here rather than neutralised on a descendant,
+  // and the old `.ant-select-selection-{wrap,search,item,placeholder}` rules are gone: v6 renders
+  // a single `.ant-select-content > input.ant-select-input` and lays it out with flexbox, so the
+  // font-inheritance plumbing collapses to two selectors.
+  &:global(.ant-select) {
+    background: var(--vita-surface) !important;
+    border: 1px solid var(--vita-border) !important;
+    border-radius: var(--vita-radius) !important;
+  }
 
-  :global(.ant-select-selector) {
+  :global(.ant-select-content),
+  :global(.ant-select-input),
+  :global(.ant-select-placeholder) {
     font-family: inherit;
     font-size: inherit;
     font-weight: inherit;
     color: inherit;
-
-    background: transparent !important;
-    border: none !important;
-    border-radius: inherit !important;
-
-    :global(.ant-select-selection-wrap) {
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: inherit;
-      color: inherit;
-    }
-
-    :global(.ant-select-selection-search) {
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: inherit;
-      color: inherit;
-
-      input[type="search"] {
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        color: inherit;
-      }
-    }
-
-    :global(.ant-select-selection-placeholder) {
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: inherit;
-    }
-
-    :global(.ant-select-selection-item) {
-      font-family: inherit;
-      font-size: inherit;
-      font-weight: inherit;
-      color: inherit;
-    }
   }
 
-  :global(.ant-select-arrow) {
+  // v5's arrow slot is v6's `.ant-select-suffix`, and it now sits in the flex flow instead of
+  // being absolutely positioned.
+  :global(.ant-select-suffix) {
     width: 14px;
     height: 14px;
 

package/src/components/Select/TreeSelect/index.tsx

@@ -10,7 +10,7 @@ import React, {
   useEffect,
   CSSProperties,
 } from "react";
-import { BaseSelectRef } from "rc-select";
+import type { TreeSelectRef } from "../../../types/antd";
 import Icon from "../../Icon";
 import classNames from "classnames";
 import styles from "./index.module.scss";
@@ -62,7 +62,7 @@ const TreeSelect: React.FC<TreeSelectProps> = (props) => {
     ...antdTreeSelectConfig
   } = props;
   const cls = useMemo(() => generateRandomStr(10), []);
-  const ref = useRef<BaseSelectRef>(null);
+  const ref = useRef<TreeSelectRef>(null);
   const containerRef = useRef<HTMLDivElement | null>(null);
   const [containerElement, setContainerElement] =
     useState<HTMLDivElement | null>(null);
@@ -190,7 +190,7 @@ const TreeSelect: React.FC<TreeSelectProps> = (props) => {
       treeData={treeData}
       {...(treeExpandedKeys !== undefined && { treeExpandedKeys })}
       onTreeExpand={handleTreeExpand}
-      onDropdownVisibleChange={setOpen}
+      onOpenChange={setOpen}
       className={classNames(styles.treeSelect, className)}
       onSearch={(value) => {
         if (!isComposing) {
@@ -213,16 +213,24 @@ const TreeSelect: React.FC<TreeSelectProps> = (props) => {
             }
       }
       getPopupContainer={getPopupContainer}
-      popupClassName={`${cls} ${popupClassName ?? ""}`}
+      // v6 replaced `popupClassName` / `dropdownStyle` with the `popup.root` semantic slot; this
+      // component's own props keep the old names for consumers.
+      classNames={{ popup: { root: `${cls} ${popupClassName ?? ""}` } }}
       style={style}
       popupMatchSelectWidth={
         popupMatchSelectWidth ??
         (containerElement ? containerElement.offsetWidth : undefined)
       }
-      dropdownStyle={{
-        ...dropdownStyle,
-        left: containerElement ? getElementLeft(containerElement) : undefined,
-        right: "auto",
+      styles={{
+        popup: {
+          root: {
+            ...dropdownStyle,
+            left: containerElement
+              ? getElementLeft(containerElement)
+              : undefined,
+            right: "auto",
+          },
+        },
       }}
       suffixIcon={<Icon icon="ep:arrow-down" />}
       ref={ref}

package/src/components/Select/index.md

@@ -43,6 +43,18 @@ export default () => {
 };
 ```
 
+## 子组件
+
+```tsx | pure
+Select.Tree          // 树形选择器（TreeSelect）
+Select.AutoComplete  // 自动补全选择器
+Select.Icon          // 图标选择器
+Select.Option        // antd 的 Select.Option
+Select.OptGroup      // antd 的 Select.OptGroup
+```
+
+前三个是本库自己的封装，2.0 之前只在库内部使用、并未对外导出。`Option` / `OptGroup` 是 antd 原样透出，供 JSX 写法 —— 本库更推荐用 `options` 属性，选项多时性能也更好。
+
 ## API
 
 在 [antd SelectProps](https://ant.design/components/select-cn) 基础上扩展（移除了 `placement`、`filterOption` 并重新定义）：