@sia.soul/sia-react-ui 0.1.20 → 0.1.22

package/dist/core.cjs

@@ -1368,6 +1368,7 @@ function DropdownRoot({
   open,
   defaultOpen = false,
   disabled = false,
+  showTriggerIcon = true,
   arrow = false,
   autoFocus = false,
   openDelay = 80,
@@ -1528,6 +1529,10 @@ function DropdownRoot({
       className: "sia-dropdown__menu"
     }
   );
+  const triggerNode = showTriggerIcon && (0, import_react7.isValidElement)(children) && children.type === Button && children.props.children !== void 0 && children.props.children !== null ? (0, import_react7.cloneElement)(children, {}, /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: "sia-dropdown__trigger-content", children: [
+    children.props.children,
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Icon, { name: "chevron-down", size: 14, className: "sia-dropdown__trigger-icon" })
+  ] })) : children;
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
     "span",
     {
@@ -1543,7 +1548,7 @@ function DropdownRoot({
       onKeyDown: handleKeyDown,
       ...props,
       children: [
-        children,
+        triggerNode,
         /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
           "span",
           {
@@ -1590,7 +1595,7 @@ function DropdownButton({
 }) {
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("span", { className: `sia-dropdown-button ${className}`.trim(), children: [
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(Button, { ...buttonProps, disabled, onClick, children }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownRoot, { ...dropdownProps, disabled, trigger, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(DropdownRoot, { ...dropdownProps, disabled, trigger, showTriggerIcon: false, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
       Button,
       {
         ...buttonProps,
@@ -1602,7 +1607,10 @@ function DropdownButton({
     ) })
   ] });
 }
-var Dropdown = Object.assign(DropdownRoot, { Button: DropdownButton });
+var Dropdown = Object.assign(DropdownRoot, {
+  /** 组合主操作按钮与下拉菜单的按钮组件。 */
+  Button: DropdownButton
+});
 
 // src/components/Tabs.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
@@ -1895,7 +1903,10 @@ function CheckboxGroup({
     children
   ] }) }) });
 }
-var Checkbox2 = Object.assign(CheckboxRoot, { Group: CheckboxGroup });
+var Checkbox2 = Object.assign(CheckboxRoot, {
+  /** 组合多个子项并统一管理布局或选择状态。 */
+  Group: CheckboxGroup
+});
 
 // src/components/FloatingDisplay.tsx
 var import_jsx_runtime11 = require("react/jsx-runtime");
@@ -2511,12 +2522,19 @@ function preset(type, defaults = {}) {
   });
 }
 var Modal2 = Object.assign(ModalRoot, {
+  /** 直接打开实例，返回可用于更新或关闭的操作句柄。 */
   open: openModal,
+  /** 显示普通信息提示。 */
   info: preset("info", { title: "\u63D0\u793A" }),
+  /** 显示成功提示。 */
   success: preset("success", { title: "\u64CD\u4F5C\u6210\u529F" }),
+  /** 显示警告提示。 */
   warning: preset("warning", { title: "\u8BF7\u6CE8\u610F" }),
+  /** 显示错误提示。 */
   error: preset("error", { title: "\u64CD\u4F5C\u5931\u8D25" }),
+  /** 打开确认弹框，支持异步确认；返回 false 可阻止关闭。 */
   confirm: preset("confirm", { title: "\u786E\u8BA4\u64CD\u4F5C" }),
+  /** 关闭由此 API 打开的所有弹层。 */
   destroyAll() {
     [...modalHandles].forEach((handle) => handle.destroy());
   }
@@ -2653,6 +2671,8 @@ function SelectionPanel({
   const search = searchValue ?? localSearch;
   const [scrollTop, setScrollTop] = (0, import_react16.useState)(0);
   const [active, setActive] = (0, import_react16.useState)();
+  const [keyboardActive, setKeyboardActive] = (0, import_react16.useState)(false);
+  const [deselectedHover, setDeselectedHover] = (0, import_react16.useState)();
   const listRef = (0, import_react16.useRef)(null);
   const id = (0, import_react16.useId)();
   const selected = (0, import_react16.useMemo)(() => new Set(value), [value]);
@@ -2697,9 +2717,11 @@ function SelectionPanel({
     if (listRef.current) listRef.current.scrollTop = 0;
     setActive(void 0);
   }, [search, selectedOnly, count]);
-  function toggle(option) {
+  function toggle(option, keyboard = false) {
     if (disabled || loading || option.disabled || option.optionType === "divider") return;
     setActive(option.value);
+    setKeyboardActive(keyboard);
+    setDeselectedHover(!keyboard && !multiple && allowDeselect && selected.has(option.value) ? option.value : void 0);
     onChange(multiple ? selected.has(option.value) ? value.filter((item) => item !== option.value) : [...value, option.value] : allowDeselect && selected.has(option.value) ? [] : [option.value]);
   }
   function batch(operation) {
@@ -2749,6 +2771,10 @@ function SelectionPanel({
         className: "sia-selection-panel__list",
         style: { maxHeight },
         onScroll: (event) => setScrollTop(event.currentTarget.scrollTop),
+        onPointerDown: () => setKeyboardActive(false),
+        onBlur: (event) => {
+          if (!event.currentTarget.contains(event.relatedTarget)) setKeyboardActive(false);
+        },
         "aria-activedescendant": active !== void 0 ? `${id}-${typeof active}-${active}` : void 0,
         onKeyDown: (event) => {
           if (event.target instanceof HTMLInputElement) return;
@@ -2756,6 +2782,8 @@ function SelectionPanel({
           const index = enabled.findIndex((option) => option.value === active);
           if (["ArrowDown", "ArrowUp", "Home", "End"].includes(event.key)) {
             event.preventDefault();
+            setKeyboardActive(true);
+            setDeselectedHover(void 0);
             const next = event.key === "Home" ? 0 : event.key === "End" ? enabled.length - 1 : Math.max(0, Math.min(enabled.length - 1, index + (event.key === "ArrowDown" ? 1 : -1)));
             const option = enabled[next];
             setActive(option.value);
@@ -2766,7 +2794,7 @@ function SelectionPanel({
             }
           } else if ((event.key === "Enter" || event.key === " ") && index >= 0) {
             event.preventDefault();
-            toggle(enabled[index]);
+            toggle(enabled[index], true);
           }
         },
         children: loading ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { role: "status", children: "\u52A0\u8F7D\u4E2D\u2026" }) : !rows.length ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "sia-selection-panel__empty", children: "\u6682\u65E0\u5339\u914D\u9009\u9879" }) : /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { style: { height: totalHeight, position: "relative" }, children: renderedRows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
@@ -2782,7 +2810,11 @@ function SelectionPanel({
                 tabIndex: -1,
                 "aria-selected": selected.has(option.value),
                 "aria-disabled": disabled || option.disabled || void 0,
-                className: `sia-selection-panel__option${active === option.value ? " is-active" : ""}`,
+                className: `sia-selection-panel__option${keyboardActive && active === option.value ? " is-active" : ""}`,
+                "data-deselected-hover": deselectedHover === option.value || void 0,
+                onPointerLeave: () => {
+                  if (deselectedHover === option.value) setDeselectedHover(void 0);
+                },
                 onClick: (event) => {
                   if (!event.target.closest(".sia-checkbox")) toggle(option);
                 },
@@ -3234,7 +3266,8 @@ function defaultFilterOption(query, option) {
 var Select = (0, import_react20.forwardRef)(function Select2({
   options,
   mode = "single",
-  popupMode = "dropdown",
+  popupMode: popupModeProp,
+  modalThreshold = 15,
   modalConfig,
   value,
   defaultValue,
@@ -3243,7 +3276,7 @@ var Select = (0, import_react20.forwardRef)(function Select2({
   placeholderMode,
   size: sizeProp,
   status = "default",
-  allowClear = false,
+  allowClear = true,
   loading = false,
   showSearch = false,
   showValue = false,
@@ -3276,6 +3309,9 @@ var Select = (0, import_react20.forwardRef)(function Select2({
   const searchRef = (0, import_react20.useRef)(null);
   const listRef = (0, import_react20.useRef)(null);
   const [open, setOpen] = (0, import_react20.useState)(false);
+  const automaticMode = popupModeProp ?? (options.length > modalThreshold ? "modal" : "dropdown");
+  const [openedMode, setOpenedMode] = (0, import_react20.useState)(automaticMode);
+  const popupMode = open ? openedMode : automaticMode;
   const [modalValues, setModalValues] = (0, import_react20.useState)([]);
   const [selectedOnly, setSelectedOnly] = (0, import_react20.useState)(false);
   const [query, setQuery] = (0, import_react20.useState)("");
@@ -3347,9 +3383,10 @@ var Select = (0, import_react20.forwardRef)(function Select2({
   }
   function openDropdown() {
     if (disabled || loading) return;
+    setOpenedMode(automaticMode);
     const selectedIndex = filteredOptions.findIndex((option) => selectedValueSet.has(option.value) && !option.disabled);
     setActiveIndex(selectedIndex >= 0 ? selectedIndex : firstEnabledIndex());
-    if (popupMode === "modal") {
+    if (automaticMode === "modal") {
       setModalValues([...selectedValues]);
       setSelectedOnly(false);
     }
@@ -3780,7 +3817,12 @@ function UploadDragger({ hint = "\u652F\u6301\u5355\u4E2A\u6216\u6279\u91CF\u4E0
     /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { children: hint })
   ] }) });
 }
-var Upload = Object.assign(UploadRoot, { Dragger: UploadDragger, LIST_IGNORE });
+var Upload = Object.assign(UploadRoot, {
+  /** 支持拖入文件上传的区域组件。 */
+  Dragger: UploadDragger,
+  /** beforeUpload 返回此标记时忽略该文件，不加入上传列表。 */
+  LIST_IGNORE
+});
 
 // src/components/Message.tsx
 var import_client3 = require("react-dom/client");
@@ -3860,12 +3902,19 @@ function shortcut(type) {
   return (content, duration) => openMessage({ content, duration, type });
 }
 var message = {
+  /** 直接打开实例，返回可用于更新或关闭的操作句柄。 */
   open: openMessage,
+  /** 显示普通信息提示。 */
   info: shortcut("info"),
+  /** 显示成功提示。 */
   success: shortcut("success"),
+  /** 显示警告提示。 */
   warning: shortcut("warning"),
+  /** 显示错误提示。 */
   error: shortcut("error"),
+  /** 显示持续加载提示。 */
   loading: shortcut("loading"),
+  /** 关闭指定实例；未指定标识时关闭所有实例。 */
   destroy(key) {
     if (key !== void 0) {
       closeMessage(key);
@@ -3873,6 +3922,7 @@ var message = {
     }
     [...messageItems].forEach((item) => closeMessage(item.key));
   },
+  /** 配置消息默认持续时间和最大同时显示数量。 */
   config(config) {
     if (config.duration !== void 0) defaultDuration = config.duration;
     if (config.maxCount !== void 0) maxCount = Math.max(1, config.maxCount);
@@ -4112,7 +4162,16 @@ function Link({ disabled, className = "", onClick, href, target, rel, ...props }
 function TypographyRoot({ className = "", ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { ...props, className: `sia-typography ${className}`.trim() });
 }
-var Typography = Object.assign(TypographyRoot, { Title, Text, Paragraph, Link });
+var Typography = Object.assign(TypographyRoot, {
+  /** 语义化标题，支持标题级别、复制和编辑。 */
+  Title,
+  /** 行内文本，支持强调、复制、编辑和省略。 */
+  Text,
+  /** 段落文本，支持复制、编辑和省略。 */
+  Paragraph,
+  /** 具有排版样式的链接。 */
+  Link
+});
 
 // src/components/FloatButton.tsx
 var import_react24 = require("react");
@@ -4243,7 +4302,12 @@ function FloatButtonBackTop({ target, visibilityHeight = 400, behavior = "smooth
     element?.scrollTo({ top: 0, behavior: window.matchMedia("(prefers-reduced-motion: reduce)").matches ? "auto" : behavior });
   } });
 }
-var FloatButton2 = Object.assign(FloatButtonRoot, { Group: FloatButtonGroup, BackTop: FloatButtonBackTop });
+var FloatButton2 = Object.assign(FloatButtonRoot, {
+  /** 组合多个子项并统一管理布局或选择状态。 */
+  Group: FloatButtonGroup,
+  /** 滚动超过指定距离后显示的返回顶部按钮。 */
+  BackTop: FloatButtonBackTop
+});
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Breadcrumb,

package/dist/core.css

@@ -4757,15 +4757,22 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
-  gap: 12px;
+  gap: var(--sia-query-field-gap, 12px);
   padding-top: 8px;
 }
 .sia-query-form__field {
-  flex: 0 1 var(--sia-query-field-width, 220px);
-  width: var(--sia-query-field-width, 220px);
+  --sia-query-item-width: var(--sia-query-field-width, 220px);
+  flex: 0 1 var(--sia-query-item-width);
+  width: var(--sia-query-item-width);
   min-width: 0;
   max-width: 100%;
 }
+.sia-query-form__field:has(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical) > :nth-child(2)) {
+  --sia-query-item-width: calc(var(--sia-query-field-width, 220px) + var(--sia-query-field-width, 220px) + var(--sia-query-field-gap, 12px));
+}
+.sia-query-form__field :is(.sia-picker-range-control, .sia-time-range, .sia-select-date-range, .sia-space-compact:not(.sia-space-compact--vertical)) {
+  width: 100%;
+}
 .sia-query-form__field[hidden] {
   display: none;
 }
@@ -4848,7 +4855,7 @@ fieldset:disabled .sia-input-number__floating-placeholder {
 @media (max-width: 600px) {
   .sia-query-form__fields.is-collapsed > .sia-query-form__field {
     flex-basis: auto !important;
-    width: var(--sia-query-field-width, 220px) !important;
+    width: var(--sia-query-item-width) !important;
   }
 }
 .sia-query-form__quick > .sia-badge:has(.sia-badge__count) {
@@ -7377,6 +7384,14 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   cursor: not-allowed;
   opacity: .55;
 }
+.sia-dropdown__trigger-content {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+.sia-dropdown__trigger-icon {
+  flex: none;
+}
 .sia-dropdown__context-anchor {
   position: fixed;
   width: 0;
@@ -7514,6 +7529,9 @@ fieldset:disabled .sia-input-number__floating-placeholder {
   gap: 4px;
   white-space: nowrap;
 }
+.sia-pagination__current-count {
+  white-space: nowrap;
+}
 .sia-pagination__size-select.sia-select {
   width: 94px;
 }
@@ -8529,6 +8547,12 @@ body > .sia-popup-portal[data-sia-popup-layer] {
   position: relative;
   display: inline-flex;
 }
+.sia-floating.sia-table__cell-tooltip {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
 .sia-floating__overlay {
   --sia-floating-color: rgb(24 24 27 / 94%);
   --sia-floating-arrow-border: transparent;
@@ -9579,7 +9603,7 @@ button.sia-treemap__tile:focus-visible,
   min-width: 0;
   font: inherit;
 }
-.sia-selection-panel__option:hover,
+.sia-selection-panel__option:hover:not([data-deselected-hover=true]),
 .sia-selection-panel__option.is-active {
   background: var(--sia-color-fill-secondary, #f2f5f8);
 }

package/dist/core.d.cts

@@ -1,4 +1,4 @@
-export { h as Breadcrumb, i as BreadcrumbItem, j as BreadcrumbProps, k as Button, B as ButtonProps, c as ButtonSize, l as ButtonVariant, n as Card, o as CardAccent, p as CardProps, t as Collapse, u as CollapseItem, v as CollapseKey, w as CollapseProps, H as FilledIconName, I as FloatButton, J as FloatButtonBackTopProps, K as FloatButtonGroupProps, L as FloatButtonProps, N as FloatButtonShape, S as Icon, U as IconName, V as IconProps, W as IconVariant, a0 as Input, a1 as InputProps, a8 as MessageConfig, a9 as MessageHandle, aa as MessageKey, ab as MessageType, ac as Modal, b as ModalActionResult, M as ModalOpenConfig, ad as ModalProps, ae as ModalType, a as OverlayApiHandle, am as Progress, an as ProgressProps, ao as ProgressStatus, ar as Segmented, as as SegmentedOption, at as SegmentedProps, au as SegmentedValue, aB as TabItem, aC as Tabs, aE as TabsOrientation, aF as TabsPosition, aG as TabsProps, aH as TabsType, aI as Tag, aJ as TagProps, T as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-CM79w-7A.cjs';
-export { c as Select, S as SelectOption, b as SelectProps, e as SelectValue } from './Select-Da9CLN0X.cjs';
+export { h as Breadcrumb, i as BreadcrumbItem, j as BreadcrumbProps, k as Button, B as ButtonProps, c as ButtonSize, l as ButtonVariant, n as Card, o as CardAccent, p as CardProps, t as Collapse, u as CollapseItem, v as CollapseKey, w as CollapseProps, H as FilledIconName, I as FloatButton, J as FloatButtonBackTopProps, K as FloatButtonGroupProps, L as FloatButtonProps, N as FloatButtonShape, S as Icon, U as IconName, V as IconProps, W as IconVariant, a0 as Input, a1 as InputProps, a8 as MessageConfig, a9 as MessageHandle, aa as MessageKey, ab as MessageType, ac as Modal, b as ModalActionResult, M as ModalOpenConfig, ad as ModalProps, ae as ModalType, a as OverlayApiHandle, am as Progress, an as ProgressProps, ao as ProgressStatus, ar as Segmented, as as SegmentedOption, at as SegmentedProps, au as SegmentedValue, aB as TabItem, aC as Tabs, aE as TabsOrientation, aF as TabsPosition, aG as TabsProps, aH as TabsType, aI as Tag, aJ as TagProps, T as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-C5OnrCi4.cjs';
+export { c as Select, S as SelectOption, b as SelectProps, e as SelectValue } from './Select-4hGJt3RJ.cjs';
 import 'react';
-import './shared-DAYZvZVu.cjs';
+import './shared-Bx4B28Wh.cjs';

package/dist/core.d.ts

@@ -1,4 +1,4 @@
-export { h as Breadcrumb, i as BreadcrumbItem, j as BreadcrumbProps, k as Button, B as ButtonProps, c as ButtonSize, l as ButtonVariant, n as Card, o as CardAccent, p as CardProps, t as Collapse, u as CollapseItem, v as CollapseKey, w as CollapseProps, H as FilledIconName, I as FloatButton, J as FloatButtonBackTopProps, K as FloatButtonGroupProps, L as FloatButtonProps, N as FloatButtonShape, S as Icon, U as IconName, V as IconProps, W as IconVariant, a0 as Input, a1 as InputProps, a8 as MessageConfig, a9 as MessageHandle, aa as MessageKey, ab as MessageType, ac as Modal, b as ModalActionResult, M as ModalOpenConfig, ad as ModalProps, ae as ModalType, a as OverlayApiHandle, am as Progress, an as ProgressProps, ao as ProgressStatus, ar as Segmented, as as SegmentedOption, at as SegmentedProps, au as SegmentedValue, aB as TabItem, aC as Tabs, aE as TabsOrientation, aF as TabsPosition, aG as TabsProps, aH as TabsType, aI as Tag, aJ as TagProps, T as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-CdoVqv0o.js';
-export { c as Select, S as SelectOption, b as SelectProps, e as SelectValue } from './Select-Cz3hzQl_.js';
+export { h as Breadcrumb, i as BreadcrumbItem, j as BreadcrumbProps, k as Button, B as ButtonProps, c as ButtonSize, l as ButtonVariant, n as Card, o as CardAccent, p as CardProps, t as Collapse, u as CollapseItem, v as CollapseKey, w as CollapseProps, H as FilledIconName, I as FloatButton, J as FloatButtonBackTopProps, K as FloatButtonGroupProps, L as FloatButtonProps, N as FloatButtonShape, S as Icon, U as IconName, V as IconProps, W as IconVariant, a0 as Input, a1 as InputProps, a8 as MessageConfig, a9 as MessageHandle, aa as MessageKey, ab as MessageType, ac as Modal, b as ModalActionResult, M as ModalOpenConfig, ad as ModalProps, ae as ModalType, a as OverlayApiHandle, am as Progress, an as ProgressProps, ao as ProgressStatus, ar as Segmented, as as SegmentedOption, at as SegmentedProps, au as SegmentedValue, aB as TabItem, aC as Tabs, aE as TabsOrientation, aF as TabsPosition, aG as TabsProps, aH as TabsType, aI as Tag, aJ as TagProps, T as TagStatus, aK as TagVariant, aY as Typography, aZ as TypographyLinkProps, a_ as TypographyProps, a$ as TypographyTitleProps, b0 as TypographyType, b1 as Upload, b2 as UploadChangeInfo, b3 as UploadDraggerProps, b4 as UploadFile, b5 as UploadFileStatus, b6 as UploadProps, b7 as UploadRequestOptions, bb as message } from './core-DeZknKwc.js';
+export { c as Select, S as SelectOption, b as SelectProps, e as SelectValue } from './Select-BNSE67xn.js';
 import 'react';
-import './shared-DAYZvZVu.js';
+import './shared-Bx4B28Wh.js';

package/dist/core.js

@@ -9,17 +9,17 @@ import {
   Typography,
   Upload,
   message
-} from "./chunk-3RWL67CK.js";
+} from "./chunk-7RNS52YG.js";
 import "./chunk-YT6E3X2K.js";
 import {
   Modal,
   Select
-} from "./chunk-4HB6GC24.js";
+} from "./chunk-3TRRBMXY.js";
 import {
   Icon,
   Input,
   Segmented
-} from "./chunk-SUMXP2SF.js";
+} from "./chunk-KLI65JVD.js";
 import {
   Button
 } from "./chunk-TZGUBGA4.js";