@hsu-react/ui 1.0.0 → 2.0.1

package/lib/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/lib/components/Select/IconSelect/index.js

@@ -90,66 +90,73 @@ const IconSelect = props => {
     setValue(value);
     onChange?.(value);
   };
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
-    className: _indexModule.default.iconSelect,
-    value: _value,
-    onChange: _onChange,
-    disabled: disabled,
-    addonAfter: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
-      placement: "bottom",
-      trigger: "click",
-      zIndex: 1000,
-      open: open,
-      onOpenChange: setOpen,
-      content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: _indexModule.default.popoverContent,
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
-          value: search,
-          onChange: setSearch,
-          placeholder: "\u641C\u7D22",
-          style: {
-            height: "40px"
-          }
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
-          className: _indexModule.default.tabs,
-          activeKey: currentTab,
-          onChange: key => {
-            setCurrentTab(key);
-          },
-          items: ICON_SETS.map(type => ({
-            label: type.label,
-            key: type.name,
-            children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-              className: (0, _classnames.default)(_indexModule.default.typeIcon),
-              children: (iconNames[type.name] ?? []).filter(i => i.includes(search)).map(item => {
-                return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
-                  title: type.name + ":" + item,
-                  placement: "top",
-                  children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-                    className: (0, _classnames.default)(_indexModule.default.iconItem, {
-                      [_indexModule.default.active]: activeIcon === type.name + ":" + item
-                    }),
-                    onClick: () => {
-                      setActiveIcon(type.name + ":" + item);
-                      _onChange(type.name + ":" + item);
-                    },
-                    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-                      icon: type.name + ":" + item
-                    })
+  return (
+    /*#__PURE__*/
+    // antd v6 deprecated `addonAfter` in favour of Space.Compact + Space.Addon
+    (0, _jsxRuntime.jsxs)(_antd.Space.Compact, {
+      className: _indexModule.default.iconSelect,
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+        value: _value,
+        onChange: _onChange,
+        disabled: disabled
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Space.Addon, {
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Popover, {
+          placement: "bottom",
+          trigger: "click",
+          zIndex: 1000,
+          open: open,
+          onOpenChange: setOpen,
+          content: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+            className: _indexModule.default.popoverContent,
+            children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_Input.default, {
+              value: search,
+              onChange: setSearch,
+              placeholder: "\u641C\u7D22",
+              style: {
+                height: "40px"
+              }
+            }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tabs, {
+              className: _indexModule.default.tabs,
+              activeKey: currentTab,
+              onChange: key => {
+                setCurrentTab(key);
+              },
+              items: ICON_SETS.map(type => ({
+                label: type.label,
+                key: type.name,
+                children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                  className: (0, _classnames.default)(_indexModule.default.typeIcon),
+                  children: (iconNames[type.name] ?? []).filter(i => i.includes(search)).map(item => {
+                    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_antd.Tooltip, {
+                      title: type.name + ":" + item,
+                      placement: "top",
+                      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+                        className: (0, _classnames.default)(_indexModule.default.iconItem, {
+                          [_indexModule.default.active]: activeIcon === type.name + ":" + item
+                        }),
+                        onClick: () => {
+                          setActiveIcon(type.name + ":" + item);
+                          _onChange(type.name + ":" + item);
+                        },
+                        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+                          icon: type.name + ":" + item
+                        })
+                      })
+                    }, item);
                   })
-                }, item);
-              })
+                })
+              }))
+            })]
+          }),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+            className: _indexModule.default.iconShow,
+            children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+              icon: _value
             })
-          }))
-        })]
-      }),
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: _indexModule.default.iconShow,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
-          icon: _value
+          })
         })
-      })
+      })]
     })
-  });
+  );
 };
 var _default = exports.default = IconSelect;

package/lib/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/lib/components/Select/TreeSelect/_utils/getExpandedKeysByLevel.d.ts

@@ -1,4 +1,4 @@
-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)
  * @param treeData Tree data (DataNode type)

package/lib/components/Select/TreeSelect/index.js

@@ -103,7 +103,7 @@ const TreeSelect = props => {
       treeExpandedKeys
     }),
     onTreeExpand: handleTreeExpand,
-    onDropdownVisibleChange: setOpen,
+    onOpenChange: setOpen,
     className: (0, _classnames.default)(_indexModule.default.treeSelect, className),
     onSearch: value => {
       if (!isComposing) {
@@ -117,14 +117,25 @@ const TreeSelect = props => {
       const title = node?.title?.toString() ?? "";
       return title.includes(searchValue);
     },
-    getPopupContainer: getPopupContainer,
-    popupClassName: `${cls} ${popupClassName ?? ""}`,
+    getPopupContainer: getPopupContainer
+    // 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 ? (0, _utils.getElementLeft)(containerElement) : undefined,
-      right: "auto"
+    styles: {
+      popup: {
+        root: {
+          ...dropdownStyle,
+          left: containerElement ? (0, _utils.getElementLeft)(containerElement) : undefined,
+          right: "auto"
+        }
+      }
     },
     suffixIcon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
       icon: "ep:arrow-down"

package/lib/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/lib/components/Select/index.d.ts

@@ -1,6 +1,9 @@
-import { SelectProps as AntdSelectProps } from "antd";
+import { Select as AntdSelect, SelectProps as AntdSelectProps } from "antd";
 import React, { ReactNode } from "react";
 import { DefaultOptionType } from "antd/es/select";
+import TreeSelect from "./TreeSelect";
+import AutoCompleteSelect from "./AutoCompleteSelect";
+import IconSelect from "./IconSelect";
 export interface SelectOption<T = number | string> {
     label: string;
     value: T;
@@ -19,5 +22,17 @@ export interface SelectProps extends Omit<AntdSelectProps, "placement" | "filter
     optionFontSize?: number;
     valueInlabel?: "before" | "after";
 }
-declare const Select: React.FC<SelectProps>;
+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;
+}
+declare const Select: SelectFC;
 export default Select;

package/lib/components/Select/index.js

@@ -15,6 +15,9 @@ var _utils = require("./_utils");
 var _Prefix = require("./_components/Prefix");
 var _Suffix = require("./_components/Suffix");
 var _cssSupports = require("../../utils/cssSupports");
+var _TreeSelect = _interopRequireDefault(require("./TreeSelect"));
+var _AutoCompleteSelect = _interopRequireDefault(require("./AutoCompleteSelect"));
+var _IconSelect = _interopRequireDefault(require("./IconSelect"));
 var _jsxRuntime = require("react/jsx-runtime");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
@@ -179,12 +182,22 @@ const Select = props => {
         [_indexModule.default.noArrowAnimation]: !arrowAnimation,
         [_indexModule.default.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 ? (0, _utils.getElementLeft)(selectRef.current) : undefined,
-        right: "auto"
+      styles: {
+        popup: {
+          root: {
+            left: selectRef.current ? (0, _utils.getElementLeft)(selectRef.current) : undefined,
+            right: "auto"
+          }
+        }
       },
       suffixIcon: customSuffixIcon ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
         icon: "ep:arrow-down"
@@ -197,4 +210,9 @@ const Select = props => {
     })]
   });
 };
+Select.Tree = _TreeSelect.default;
+Select.AutoComplete = _AutoCompleteSelect.default;
+Select.Icon = _IconSelect.default;
+Select.Option = _antd.Select.Option;
+Select.OptGroup = _antd.Select.OptGroup;
 var _default = exports.default = Select;