@hsu-react/ui 1.0.0 → 2.0.1

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` 并重新定义）：

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

@@ -8,43 +8,47 @@
   height: 100%;
   // When the parent has no explicit height (height:100% resolves to auto), guarantee a min height
   // consistent with Input and other form controls, so it is neither squashed nor mis-sized in search rows.
-  min-height: 32px;
+  min-height: var(--vita-control-height);
   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;
 
     .antdSelect {
       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;
     }
@@ -52,9 +56,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;
   }
@@ -81,20 +85,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);
     }
   }
 
@@ -116,162 +120,98 @@
     font-weight: inherit;
     color: inherit !important;
 
-    &:has(> :global(.ant-select-arrow)),
-    &:has(> :global(.ant-select-clear)) {
-      :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, which is this very element, so it is neutralised here instead of on a descendant.
+    // (`.select`, the outer wrapper, is what actually draws the visible box.)
+    padding: 0 !important;
+    border: none !important;
+    background: transparent !important;
 
-    &.legacyHasArrowOrClear {
-      :global(.ant-select-selector) {
-        padding-right: 20px;
-      }
+    &::after {
+      content: none;
     }
 
-    :global(.ant-select-selector) {
-      width: 100%;
-      height: 100%;
-      padding: 0;
+    // v6 lays the root out with flexbox and keeps the suffix / clear icons in the normal flow,
+    // so the old "reserve 20px on the right for the absolutely positioned arrow" rules — and the
+    // `:has()`-less `legacyHasArrowOrClear` fallback that mirrored them — are no longer needed.
 
-      border: none !important;
-      border-radius: inherit;
+    // 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;
-        }
-      }
+      color: inherit;
+    }
 
-      :global(.ant-select-selection-placeholder) {
-        display: inline-flex;
-        align-items: center;
+    :global(.ant-select-placeholder) {
+      display: inline-flex;
+      align-items: center;
 
-        height: 100%;
+      height: 100%;
 
-        line-height: normal;
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-      }
+      line-height: normal;
+      font-family: inherit;
+      font-size: inherit;
+      font-weight: inherit;
+    }
 
-      :global(.ant-select-selection-item) {
-        padding-inline-end: 0px;
+    // Multiple mode only: `.ant-select-selection-item` is the tag.
+    :global(.ant-select-selection-item) {
+      line-height: normal;
 
-        font-family: inherit;
-        font-size: inherit;
-        font-weight: inherit;
-        color: inherit;
-      }
+      padding-inline-end: 4px;
 
-      :global(.ant-select-selection-overflow-item) {
-        :global(.ant-select-selection-item) {
-          line-height: normal;
-
-          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-arrow) {
+    :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;
-    }
-
     &: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;
       }
     }
   }

package/src/components/Select/index.tsx

@@ -1,6 +1,6 @@
 import { Select as AntdSelect, SelectProps as AntdSelectProps } from "antd";
 import React, { ReactNode, useEffect, useMemo, useRef, useState } from "react";
-import { BaseSelectRef } from "rc-select";
+import type { SelectRef } from "../../types/antd";
 import { DefaultOptionType } from "antd/es/select";
 import Icon from "../Icon";
 import classNames from "classnames";
@@ -11,6 +11,9 @@ import { getElementLeft, calculatePopupWidth, filterOption } from "./_utils";
 import { Prefix } from "./_components/Prefix";
 import { Suffix } from "./_components/Suffix";
 import { isLegacyHasSelectorBrowser } from "../../utils/cssSupports";
+import TreeSelect from "./TreeSelect";
+import AutoCompleteSelect from "./AutoCompleteSelect";
+import IconSelect from "./IconSelect";
 
 export interface SelectOption<T = number | string> {
   label: string;
@@ -35,7 +38,20 @@ export interface SelectProps extends Omit<
   valueInlabel?: "before" | "after";
 }
 
-const Select: React.FC<SelectProps> = (props) => {
+interface SelectFC extends React.FC<SelectProps> {
+  /** 树形选择器 */
+  Tree: typeof TreeSelect;
+  /** 自动补全选择器 */
+  AutoComplete: typeof AutoCompleteSelect;
+  /** 图标选择器 */
+  Icon: typeof IconSelect;
+  /** antd 的 `Select.Option`，供 JSX 写法（本库更推荐用 `options` 属性） */
+  Option: typeof AntdSelect.Option;
+  /** antd 的 `Select.OptGroup` */
+  OptGroup: typeof AntdSelect.OptGroup;
+}
+
+const Select = ((props: SelectProps) => {
   const {
     prefix,
     suffix,
@@ -62,7 +78,7 @@ const Select: React.FC<SelectProps> = (props) => {
     ...antdSelctConfig
   } = props;
   const [focused, setFocused] = useState<boolean>(false);
-  const ref = useRef<BaseSelectRef>(null);
+  const ref = useRef<SelectRef>(null);
   const selectRef = useRef<HTMLDivElement>(null);
   const [open, setOpen] = useState<boolean>(false);
   const [legacyHasErrorStatus, setLegacyHasErrorStatus] =
@@ -242,15 +258,21 @@ const Select: React.FC<SelectProps> = (props) => {
             [styles.legacyHasArrowOrClear]:
               legacyHasSelector && legacyHasArrowOrClear,
           }),
-          popupClassName: `${cls} ${popupClassName ?? ""}`,
+          // v6 replaced `popupClassName` / `dropdownStyle` with the `popup.root` semantic slot.
+          // The public `popupClassName` prop of this component is kept as-is for consumers.
+          classNames: { popup: { root: `${cls} ${popupClassName ?? ""}` } },
           getPopupContainer: () => selectRef.current ?? document.body,
           popupMatchSelectWidth:
             popupMatchSelectWidth ?? (calculatedPopupWidth || undefined),
-          dropdownStyle: {
-            left: selectRef.current
-              ? getElementLeft(selectRef.current)
-              : undefined,
-            right: "auto",
+          styles: {
+            popup: {
+              root: {
+                left: selectRef.current
+                  ? getElementLeft(selectRef.current)
+                  : undefined,
+                right: "auto",
+              },
+            },
           },
           suffixIcon: customSuffixIcon ?? <Icon icon="ep:arrow-down" />,
           placement,
@@ -261,6 +283,12 @@ const Select: React.FC<SelectProps> = (props) => {
       {suffix && <Suffix suffix={suffix} />}
     </div>
   );
-};
+}) as SelectFC;
+
+Select.Tree = TreeSelect;
+Select.AutoComplete = AutoCompleteSelect;
+Select.Icon = IconSelect;
+Select.Option = AntdSelect.Option;
+Select.OptGroup = AntdSelect.OptGroup;
 
 export default Select;

package/src/components/Slider/index.module.scss

@@ -1,6 +1,6 @@
 .slider {
   width: 100%;
-  height: 32px;
+  height: var(--vita-control-height);
   margin: 0px;
   padding-block: 0px;
 

package/src/components/Switch/index.module.scss

@@ -3,5 +3,5 @@
 .SwitchWrapper {
   display: inline-flex;
   align-items: center;
-  min-height: 32px;
+  min-height: var(--vita-control-height);
 }

package/src/components/TabBar/index.module.scss

@@ -2,10 +2,10 @@
   display: flex;
   align-items: center;
   width: max-content;
-  height: 32px;
-  min-height: 32px;
+  height: var(--vita-control-height);
+  min-height: var(--vita-control-height);
 
-  border-radius: 6px;
+  border-radius: var(--vita-radius-sm);
   overflow: hidden;
 
   .TabBarItem {
@@ -20,13 +20,13 @@
     padding: 0px 15px;
 
     font-size: 14px;
-    color: var(--cf-text);
+    color: var(--vita-foreground);
 
     transition: all 0.3s;
 
     cursor: pointer;
 
-    border: 1px solid var(--cf-border);
+    border: 1px solid var(--vita-border);
 
     &:not(:first-child) {
       margin-left: -1px;
@@ -45,11 +45,11 @@
     }
 
     &:hover {
-      color: var(--primary-color);
+      color: var(--vita-primary);
     }
 
     &.active {
-      background: var(--primary-color);
+      background: var(--vita-primary);
 
       color: #fff;
 
@@ -78,12 +78,12 @@
       background: transparent !important;
 
       font-size: 16px !important;
-      color: var(--cf-text) !important;
+      color: var(--vita-foreground) !important;
 
       transition: all 0.2s;
 
       &:hover {
-        color: var(--primary-color) !important;
+        color: var(--vita-primary) !important;
       }
 
       &::after {
@@ -103,10 +103,10 @@
       &.active {
         font-weight: 500;
         font-size: 16px;
-        color: var(--primary-color) !important;
+        color: var(--vita-primary) !important;
 
         &::after {
-          background: var(--primary-color);
+          background: var(--vita-primary);
         }
       }
     }

package/src/components/Table/_components/Drag/index.tsx

@@ -5,8 +5,9 @@ import {
   verticalListSortingStrategy,
 } from "@dnd-kit/sortable";
 
-import { Button } from "antd";
-import { ButtonProps } from "../../../Button";
+// 用本库的 Button 而不是 antd 原生的：props 类型本来就取的是本库的 ButtonProps，
+// 之前混用导致 variant="surface" 这类本库扩展传不进去。
+import Button, { ButtonProps } from "../../../Button";
 import { CSS } from "@dnd-kit/utilities";
 import { DndContext } from "@dnd-kit/core";
 import type { DragEndEvent } from "@dnd-kit/core";

package/src/components/Table/_hooks/useTableColumns.tsx

@@ -237,7 +237,7 @@ const useTableColumns = <T extends AnyObject>(
               icon="material-symbols:help"
               className={styles.help}
               fontSize={16}
-              color="var(--cf-text-3)"
+              color="var(--vita-subtle-foreground)"
             />
           </Tooltip>
         </>

package/src/components/Table/_utils/tableUtils.ts

@@ -38,6 +38,7 @@ export function getDepartmentRowSpan<T extends Record<string, unknown>>(
 export const HELP_TOOLTIP_CONFIG = {
   arrow: false,
   placement: "top" as const,
-  color: "var(--cf-subtle)",
-  styles: { body: { color: "var(--cf-text)", padding: "6px 16px" } },
+  color: "var(--vita-muted)",
+  // antd v6 renamed Tooltip's `body` slot to `container`
+  styles: { container: { color: "var(--vita-foreground)", padding: "6px 16px" } },
 };

package/src/components/Table/index.md

@@ -39,6 +39,22 @@ export default () => (
 );
 ```
 
+## 子组件
+
+```tsx | pure
+Table.Drag              // 拖拽排序：Table.Drag.Handle 作为拖拽手柄列
+Table.Summary           // antd 的合计行
+Table.Column            // antd 的 JSX 声明列
+Table.ColumnGroup
+Table.EXPAND_COLUMN     // 展开列占位符，放进 columns 可指定展开图标位置
+Table.SELECTION_COLUMN  // 选择列占位符，同上
+Table.SELECTION_ALL
+Table.SELECTION_INVERT
+Table.SELECTION_NONE
+```
+
+`Summary` 最常用（渲染合计行）。`Column` / `ColumnGroup` 是 antd 的 JSX 列声明写法，与本库的 `columns` 属性是两条路子，混用会绕过本库的列处理管线（权限过滤、宽度分档、省略 tooltip 等），一般不建议。
+
 ## API
 
 在 [antd TableProps](https://ant.design/components/table-cn) 基础上扩展（`scroll`、`pagination`、`columns` 被重写），常用新增/重写属性如下：