@hsu-react/ui 1.0.0 → 2.0.1

package/es/components/Search/index.module.scss

@@ -1,5 +1,12 @@
+@use "../../styles/responsive" as r;
+
 .Search {
   --column-number: 4;
+
+  // 小屏一行放不下 4 列搜索项，收成单列
+  @include r.down(md) {
+    --column-number: 1;
+  }
   --column-offset-width: 0px;
   --column-compensate-width: 0px;
 
@@ -9,10 +16,10 @@
   padding: 14px 16px;
 
   // CF style: outlined white card (follows appearance switching), no shadow
-  background: var(--cf-surface);
+  background: var(--vita-surface);
 
-  border-radius: 8px;
-  border: 1px solid var(--cf-border);
+  border-radius: var(--vita-radius);
+  border: 1px solid var(--vita-border);
   box-shadow: none;
 
   .searchOption {
@@ -41,8 +48,23 @@
       align-items: center;
       justify-content: flex-end;
 
+      // min-width: max-content 让按钮组永不收缩，桌面上是为了别把按钮文字压断；
+      // 但在窄屏里它会把整行顶出视口（实测 390px 视口下溢出 131px）。
+      // 小屏改为允许换行收缩。
       min-width: max-content;
-      height: 32px;
+      height: var(--vita-control-height);
+
+      // 小屏：按钮组独占一行。父级 .option 本来就是 flex-wrap: wrap，给个 100% 的 basis
+      // 就会被挤到下一行；只写 min-width: 0 的话它会被兄弟项挤成 0 宽，按钮反而溢出到右边。
+      @include r.down(md) {
+        flex: 0 0 100%;
+        flex-wrap: wrap;
+        justify-content: flex-start;
+
+        min-width: 0;
+        height: auto;
+        row-gap: 5px;
+      }
 
       &.flexStart {
         justify-content: flex-start;
@@ -58,7 +80,7 @@
         align-items: center;
 
         width: max-content;
-        height: 32px;
+        height: var(--vita-control-height);
 
         cursor: pointer;
 
@@ -86,6 +108,12 @@
     .searchOption {
       .option {
         flex-wrap: nowrap;
+
+        // 高级筛选态刻意不换行（桌面上要保持单行紧凑），但窄屏放不下，
+        // 不换行就只能溢出。小屏放开。
+        @include r.down(md) {
+          flex-wrap: wrap;
+        }
       }
     }
   }

package/es/components/SecondConf/index.js

@@ -13,6 +13,8 @@ function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" !=
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+import { mergeSemantic } from "../../utils/semantic";
+import { modalWidth } from "../../styles/tokens";
 import React, { cloneElement, useState } from "react";
 import styles from "./index.module.scss";
 import Icon from "../Icon";
@@ -55,18 +57,26 @@ var SecondConf = function SecondConf(props) {
   };
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [trigger, /*#__PURE__*/_jsxs(Modal, _objectSpread(_objectSpread({
-      width: 800
+      width: modalWidth.md
     }, modalConfig), {}, {
       open: visible,
       onOk: handleOk,
       onCancel: handleCancel,
       centered: true,
       className: styles.SecondConf,
-      classNames: _objectSpread({
-        body: "".concat(styles.body, " ").concat((classNames === null || classNames === void 0 ? void 0 : classNames.body) || "")
-      }, classNames),
-      maskClosable: false,
-      mask: false,
+      classNames: mergeSemantic(classNames, function (outer) {
+        return _objectSpread(_objectSpread({}, outer), {}, {
+          // `...classNames` used to be spread *after* this line, so a caller-supplied `body`
+          // silently dropped `styles.body`. Merge the two instead.
+          body: "".concat(styles.body, " ").concat(outer.body || "")
+        });
+      })
+      // v6 folded `maskClosable` into the `mask` config object
+      ,
+      mask: {
+        enabled: false,
+        closable: false
+      },
       title: " ",
       children: [/*#__PURE__*/_jsx(Icon, {
         icon: "mingcute:question-line",

package/es/components/SecondConf/index.module.scss

@@ -13,7 +13,7 @@
 
     .icon {
       font-size: 50px;
-      color: var(--cf-warning);
+      color: var(--vita-warning);
     }
 
     .content {
@@ -24,12 +24,12 @@
       .title {
         font-size: 20px;
         font-weight: bold;
-        color: var(--cf-text-2);
+        color: var(--vita-muted-foreground);
       }
 
       .text {
         font-size: 16px;
-        color: var(--cf-text-3);
+        color: var(--vita-subtle-foreground);
       }
     }
   }

package/es/components/Select/AutoCompleteSelect/index.js

@@ -43,7 +43,7 @@ var AutoCompleteSelect = function AutoCompleteSelect(props) {
     options = _props$options === void 0 ? [] : _props$options,
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? "bottomLeft" : _props$placement,
-    _onDropdownVisibleChange = props.onDropdownVisibleChange,
+    onDropdownVisibleChange = props.onDropdownVisibleChange,
     popupMatchSelectWidth = props.popupMatchSelectWidth,
     popupMatchContentWidth = props.popupMatchContentWidth,
     _props$optionFontSize = props.optionFontSize,
@@ -224,20 +224,30 @@ var AutoCompleteSelect = function AutoCompleteSelect(props) {
       onChange: onChange,
       onSearch: handleSearch,
       open: mergedOpen,
-      onDropdownVisibleChange: function onDropdownVisibleChange(visible) {
+      // v6 renamed `onDropdownVisibleChange` to `onOpenChange`; this component's own prop
+      // keeps the old name for consumers.
+      onOpenChange: function onOpenChange(visible) {
         setOpen(visible);
-        _onDropdownVisibleChange === null || _onDropdownVisibleChange === void 0 || _onDropdownVisibleChange(visible);
+        onDropdownVisibleChange === null || onDropdownVisibleChange === void 0 || onDropdownVisibleChange(visible);
       },
       className: classNames(styles.antdAutoComplete, selectClassName, _defineProperty({}, styles.legacyHasArrowOrClear, legacyHasSelector && legacyHasArrowOrClear)),
-      popupClassName: "".concat(cls, " ").concat(popupClassName !== null && popupClassName !== void 0 ? popupClassName : ""),
+      classNames: {
+        popup: {
+          root: "".concat(cls, " ").concat(popupClassName !== null && popupClassName !== void 0 ? popupClassName : "")
+        }
+      },
       getPopupContainer: function getPopupContainer() {
         var _autoCompleteRef$curr;
         return (_autoCompleteRef$curr = autoCompleteRef.current) !== null && _autoCompleteRef$curr !== void 0 ? _autoCompleteRef$curr : document.body;
       },
       popupMatchSelectWidth: popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? 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: placement,
       disabled: disabled,

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

@@ -10,7 +10,7 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t.return && (u = t.return(), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-import { Popover, Tabs, Tooltip } from "antd";
+import { Popover, Space, Tabs, Tooltip } from "antd";
 import React, { useEffect, useState } from "react";
 import Icon from "../../Icon";
 import Input from "../../Input";
@@ -126,69 +126,76 @@ var IconSelect = function IconSelect(props) {
     setValue(value);
     onChange === null || onChange === void 0 || onChange(value);
   };
-  return /*#__PURE__*/_jsx(Input, {
-    className: styles.iconSelect,
-    value: _value,
-    onChange: _onChange,
-    disabled: disabled,
-    addonAfter: /*#__PURE__*/_jsx(Popover, {
-      placement: "bottom",
-      trigger: "click",
-      zIndex: 1000,
-      open: open,
-      onOpenChange: setOpen,
-      content: /*#__PURE__*/_jsxs("div", {
-        className: styles.popoverContent,
-        children: [/*#__PURE__*/_jsx(Input, {
-          value: search,
-          onChange: setSearch,
-          placeholder: "\u641C\u7D22",
-          style: {
-            height: "40px"
-          }
-        }), /*#__PURE__*/_jsx(Tabs, {
-          className: styles.tabs,
-          activeKey: currentTab,
-          onChange: function onChange(key) {
-            setCurrentTab(key);
-          },
-          items: ICON_SETS.map(function (type) {
-            var _iconNames$type$name;
-            return {
-              label: type.label,
-              key: type.name,
-              children: /*#__PURE__*/_jsx("div", {
-                className: classNames(styles.typeIcon),
-                children: ((_iconNames$type$name = iconNames[type.name]) !== null && _iconNames$type$name !== void 0 ? _iconNames$type$name : []).filter(function (i) {
-                  return i.includes(search);
-                }).map(function (item) {
-                  return /*#__PURE__*/_jsx(Tooltip, {
-                    title: type.name + ":" + item,
-                    placement: "top",
-                    children: /*#__PURE__*/_jsx("div", {
-                      className: classNames(styles.iconItem, _defineProperty({}, styles.active, activeIcon === type.name + ":" + item)),
-                      onClick: function onClick() {
-                        setActiveIcon(type.name + ":" + item);
-                        _onChange(type.name + ":" + item);
-                      },
-                      children: /*#__PURE__*/_jsx(Icon, {
-                        icon: type.name + ":" + item
-                      })
+  return (
+    /*#__PURE__*/
+    // antd v6 deprecated `addonAfter` in favour of Space.Compact + Space.Addon
+    _jsxs(Space.Compact, {
+      className: styles.iconSelect,
+      children: [/*#__PURE__*/_jsx(Input, {
+        value: _value,
+        onChange: _onChange,
+        disabled: disabled
+      }), /*#__PURE__*/_jsx(Space.Addon, {
+        children: /*#__PURE__*/_jsx(Popover, {
+          placement: "bottom",
+          trigger: "click",
+          zIndex: 1000,
+          open: open,
+          onOpenChange: setOpen,
+          content: /*#__PURE__*/_jsxs("div", {
+            className: styles.popoverContent,
+            children: [/*#__PURE__*/_jsx(Input, {
+              value: search,
+              onChange: setSearch,
+              placeholder: "\u641C\u7D22",
+              style: {
+                height: "40px"
+              }
+            }), /*#__PURE__*/_jsx(Tabs, {
+              className: styles.tabs,
+              activeKey: currentTab,
+              onChange: function onChange(key) {
+                setCurrentTab(key);
+              },
+              items: ICON_SETS.map(function (type) {
+                var _iconNames$type$name;
+                return {
+                  label: type.label,
+                  key: type.name,
+                  children: /*#__PURE__*/_jsx("div", {
+                    className: classNames(styles.typeIcon),
+                    children: ((_iconNames$type$name = iconNames[type.name]) !== null && _iconNames$type$name !== void 0 ? _iconNames$type$name : []).filter(function (i) {
+                      return i.includes(search);
+                    }).map(function (item) {
+                      return /*#__PURE__*/_jsx(Tooltip, {
+                        title: type.name + ":" + item,
+                        placement: "top",
+                        children: /*#__PURE__*/_jsx("div", {
+                          className: classNames(styles.iconItem, _defineProperty({}, styles.active, activeIcon === type.name + ":" + item)),
+                          onClick: function onClick() {
+                            setActiveIcon(type.name + ":" + item);
+                            _onChange(type.name + ":" + item);
+                          },
+                          children: /*#__PURE__*/_jsx(Icon, {
+                            icon: type.name + ":" + item
+                          })
+                        })
+                      }, item);
                     })
-                  }, item);
-                })
+                  })
+                };
               })
-            };
+            })]
+          }),
+          children: /*#__PURE__*/_jsx("div", {
+            className: styles.iconShow,
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: _value
+            })
           })
-        })]
-      }),
-      children: /*#__PURE__*/_jsx("div", {
-        className: styles.iconShow,
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: _value
         })
-      })
+      })]
     })
-  });
+  );
 };
 export default IconSelect;

package/es/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/es/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)