@hsu-react/ui 0.0.25 → 2.0.0

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

@@ -119,7 +119,7 @@ var TreeSelect = function TreeSelect(props) {
     treeExpandedKeys: treeExpandedKeys
   }), {}, {
     onTreeExpand: handleTreeExpand,
-    onDropdownVisibleChange: setOpen,
+    onOpenChange: setOpen,
     className: classNames(styles.treeSelect, className),
     onSearch: function onSearch(value) {
       if (!isComposing) {
@@ -136,14 +136,25 @@ var TreeSelect = function TreeSelect(props) {
       var title = (_node$title$toString = node === null || node === void 0 || (_node$title = node.title) === null || _node$title === void 0 ? void 0 : _node$title.toString()) !== null && _node$title$toString !== void 0 ? _node$title$toString : "";
       return title.includes(searchValue);
     },
-    getPopupContainer: getPopupContainer,
-    popupClassName: "".concat(cls, " ").concat(popupClassName !== null && popupClassName !== void 0 ? 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: "".concat(cls, " ").concat(popupClassName !== null && popupClassName !== void 0 ? popupClassName : "")
+      }
+    },
     style: style,
     popupMatchSelectWidth: popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? popupMatchSelectWidth : containerElement ? containerElement.offsetWidth : undefined,
-    dropdownStyle: _objectSpread(_objectSpread({}, dropdownStyle), {}, {
-      left: containerElement ? getElementLeft(containerElement) : undefined,
-      right: "auto"
-    }),
+    styles: {
+      popup: {
+        root: _objectSpread(_objectSpread({}, dropdownStyle), {}, {
+          left: containerElement ? getElementLeft(containerElement) : undefined,
+          right: "auto"
+        })
+      }
+    },
     suffixIcon: /*#__PURE__*/_jsx(Icon, {
       icon: "ep:arrow-down"
     }),

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

@@ -24,6 +24,9 @@ import { getElementLeft, calculatePopupWidth, filterOption as _filterOption } fr
 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";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 var Select = function Select(props) {
@@ -195,15 +198,25 @@ var Select = function Select(props) {
         });
       },
       className: classNames(styles.antdSelect, selectClassName, _defineProperty(_defineProperty({}, styles.noArrowAnimation, !arrowAnimation), styles.legacyHasArrowOrClear, legacyHasSelector && legacyHasArrowOrClear)),
-      popupClassName: "".concat(cls, " ").concat(popupClassName !== null && popupClassName !== void 0 ? 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: "".concat(cls, " ").concat(popupClassName !== null && popupClassName !== void 0 ? popupClassName : "")
+        }
+      },
       getPopupContainer: function getPopupContainer() {
         var _selectRef$current;
         return (_selectRef$current = selectRef.current) !== null && _selectRef$current !== void 0 ? _selectRef$current : document.body;
       },
       popupMatchSelectWidth: popupMatchSelectWidth !== null && popupMatchSelectWidth !== void 0 ? 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 !== null && customSuffixIcon !== void 0 ? customSuffixIcon : /*#__PURE__*/_jsx(Icon, {
         icon: "ep:arrow-down"
@@ -217,4 +230,9 @@ var Select = function Select(props) {
     })]
   });
 };
+Select.Tree = TreeSelect;
+Select.AutoComplete = AutoCompleteSelect;
+Select.Icon = IconSelect;
+Select.Option = AntdSelect.Option;
+Select.OptGroup = AntdSelect.OptGroup;
 export default Select;

package/es/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/es/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/es/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/es/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/es/components/Table/_components/Drag/index.js

@@ -9,7 +9,10 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 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 React, { useContext, useMemo } from "react";
 import { SortableContext, useSortable, verticalListSortingStrategy } from "@dnd-kit/sortable";
-import { Button } from "antd";
+
+// 用本库的 Button 而不是 antd 原生的：props 类型本来就取的是本库的 ButtonProps，
+// 之前混用导致 variant="surface" 这类本库扩展传不进去。
+import Button from "../../../Button";
 import { CSS } from "@dnd-kit/utilities";
 import { DndContext } from "@dnd-kit/core";
 import { HolderOutlined } from "@ant-design/icons";

package/es/components/Table/_hooks/useTableColumns.js

@@ -183,7 +183,7 @@ var useTableColumns = function useTableColumns(params) {
           icon: "material-symbols:help",
           className: styles.help,
           fontSize: 16,
-          color: "var(--cf-text-3)"
+          color: "var(--vita-subtle-foreground)"
         })
       }))]
     });

package/es/components/Table/_utils/tableUtils.d.ts

@@ -15,7 +15,7 @@ export declare const HELP_TOOLTIP_CONFIG: {
     placement: "top";
     color: string;
     styles: {
-        body: {
+        container: {
             color: string;
             padding: string;
         };

package/es/components/Table/_utils/tableUtils.js

@@ -32,10 +32,11 @@ export function getDepartmentRowSpan(record, index, dataSource, key) {
 export var HELP_TOOLTIP_CONFIG = {
   arrow: false,
   placement: "top",
-  color: "var(--cf-subtle)",
+  color: "var(--vita-muted)",
+  // antd v6 renamed Tooltip's `body` slot to `container`
   styles: {
-    body: {
-      color: "var(--cf-text)",
+    container: {
+      color: "var(--vita-foreground)",
       padding: "6px 16px"
     }
   }

package/es/components/Table/index.d.ts

@@ -1,5 +1,5 @@
 import { ColumnType as AntColumnType, ColumnGroupType as AntColumnGroupType } from "antd/lib/table";
-import { TableProps as AntdTableProps, TooltipProps } from "antd";
+import { Table as AntdTable, TableProps as AntdTableProps, TooltipProps } from "antd";
 import Drag, { DragProps } from "./_components/Drag";
 import { PaginationProps } from "../Pagination";
 import React, { ReactNode } from "react";
@@ -101,6 +101,22 @@ export interface TableProps<RecordType = AnyObject> extends Omit<AntdTableProps<
     showTotal?: false | ((total: number, range: [number, number]) => ReactNode);
     isExpandedCellTable?: boolean;
 }
-type TableFC = (<T extends AnyObject>(props: TableProps<T>) => JSX.Element | null) & React.FC<TableProps<AnyObject>>;
+type TableFC = (<T extends AnyObject>(props: TableProps<T>) => JSX.Element | null) & React.FC<TableProps<AnyObject>> & {
+    /** antd 的 `Table.Summary`，用来渲染合计行 */
+    Summary: typeof AntdTable.Summary;
+    /** antd 的 `Table.Column`，供 JSX 声明列（本库更推荐用 `columns` 属性） */
+    Column: typeof AntdTable.Column;
+    /** antd 的 `Table.ColumnGroup` */
+    ColumnGroup: typeof AntdTable.ColumnGroup;
+    /** 展开列的占位符，放进 `columns` 里可指定展开图标的位置 */
+    EXPAND_COLUMN: typeof AntdTable.EXPAND_COLUMN;
+    /** 选择列的占位符，同上 */
+    SELECTION_COLUMN: typeof AntdTable.SELECTION_COLUMN;
+    SELECTION_ALL: typeof AntdTable.SELECTION_ALL;
+    SELECTION_INVERT: typeof AntdTable.SELECTION_INVERT;
+    SELECTION_NONE: typeof AntdTable.SELECTION_NONE;
+    /** 拖拽排序：`Table.Drag.Handle` 作为拖拽手柄列 */
+    Drag: typeof Drag;
+};
 declare const Table: TableFC;
 export default Table;