@sia.soul/sia-react-ui 0.1.23 → 0.1.25

package/dist/{chunk-VX2JECOU.js → chunk-QCBKT5FV.js}

@@ -1,18 +1,19 @@
 import {
   Dropdown,
   Icon,
-  Input,
-  PopupPortal
-} from "./chunk-KLI65JVD.js";
+  Input
+} from "./chunk-27ZYAKII.js";
 import {
   Button
-} from "./chunk-TZGUBGA4.js";
+} from "./chunk-IYNS423D.js";
 import {
   ControlSizeContext,
+  PopupPortal,
   useControlSize,
   useControllableState,
-  useFloatingPlaceholder
-} from "./chunk-3VJ4CZDQ.js";
+  useFloatingPlaceholder,
+  withTitleTooltip
+} from "./chunk-RAO3JHDL.js";
 
 // src/components/Checkbox.tsx
 import { createContext, forwardRef, useContext, useEffect, useId, useMemo, useRef } from "react";
@@ -37,7 +38,7 @@ var CheckboxRoot = forwardRef(function Checkbox({ value, size: sizeProp, indeter
     /* @__PURE__ */ jsx(
       "input",
       {
-        ...props,
+        ...withTitleTooltip(props),
         ref: setRef,
         id: props.id ?? fallbackId,
         className: "sia-checkbox__input",
@@ -289,7 +290,7 @@ function Popover({ title, content, trigger = "click", overlayClassName = "", ...
 function Timeline({ items = [], mode = "left", pending = false, pendingDot, reverse = false, className = "", ...props }) {
   const values = [...items, ...pending ? [{ children: pending === true ? "\u52A0\u8F7D\u4E2D..." : pending, dot: pendingDot ?? /* @__PURE__ */ jsx2(Icon, { name: "loader", className: "sia-spin-icon" }) }] : []];
   if (reverse) values.reverse();
-  return /* @__PURE__ */ jsx2("ul", { className: `sia-timeline sia-timeline--${mode} ${className}`.trim(), ...props, children: values.map((item, index) => {
+  return /* @__PURE__ */ jsx2("ul", { className: `sia-timeline sia-timeline--${mode} ${className}`.trim(), ...withTitleTooltip(props), children: values.map((item, index) => {
     const position = item.position ?? (mode === "alternate" ? index % 2 ? "right" : "left" : mode);
     return /* @__PURE__ */ jsxs2("li", { className: `sia-timeline__item sia-timeline__item--${position}`, children: [
       item.label ? /* @__PURE__ */ jsx2("span", { className: "sia-timeline__label", children: item.label }) : null,
@@ -478,7 +479,7 @@ function Tree({
         /* @__PURE__ */ jsx2(
           "div",
           {
-            ...rowProps,
+            ...withTitleTooltip(rowProps),
             className: `sia-tree__row${blockNode ? " sia-tree__row--block" : ""}${sticky ? " sia-tree__row--sticky" : ""} ${rowClassName}`.trim(),
             style: {
               ...rowStyle,
@@ -538,7 +539,7 @@ function Tree({
       ] }, node.key);
     });
   }
-  return /* @__PURE__ */ jsx2("div", { className: `sia-tree${showLine ? " sia-tree--line" : ""}${stickyAncestors ? " sia-tree--sticky-ancestors" : ""} ${className}`.trim(), role: "tree", "aria-multiselectable": multiple || void 0, ...props, children: render(treeData) });
+  return /* @__PURE__ */ jsx2("div", { className: `sia-tree${showLine ? " sia-tree--line" : ""}${stickyAncestors ? " sia-tree--sticky-ancestors" : ""} ${className}`.trim(), role: "tree", "aria-multiselectable": multiple || void 0, ...withTitleTooltip(props), children: render(treeData) });
 }
 
 // src/components/Modal.tsx
@@ -653,6 +654,7 @@ var ModalRoot = forwardRef2(function Modal({
   keyboard = true,
   centered = false,
   width = 520,
+  height,
   zIndex = 1e3,
   getContainer,
   onOk,
@@ -728,6 +730,7 @@ var ModalRoot = forwardRef2(function Modal({
   useOverlayLifecycle(rendered, localRef, requestClose, keyboard);
   if (!rendered) return null;
   const mergedStyle = {
+    ...height !== void 0 ? { display: "flex", flexDirection: "column", height, maxHeight: "calc(100dvh - 48px)" } : {},
     ...style,
     "--sia-modal-width": typeof width === "number" ? `${width}px` : width
   };
@@ -755,17 +758,17 @@ var ModalRoot = forwardRef2(function Modal({
           "aria-modal": "true",
           "aria-labelledby": title ? titleId : void 0,
           tabIndex: -1,
-          ...props,
+          ...withTitleTooltip(props),
           children: [
-            /* @__PURE__ */ jsxs3("div", { className: "sia-modal__header", children: [
+            /* @__PURE__ */ jsxs3("div", { className: "sia-modal__header", style: height !== void 0 ? { flexShrink: 0 } : void 0, children: [
               /* @__PURE__ */ jsxs3("div", { className: "sia-modal__heading", children: [
                 typeIcons[type] ? /* @__PURE__ */ jsx3("span", { className: "sia-modal__type-icon", "aria-hidden": "true", children: typeIcons[type] }) : null,
                 title ? /* @__PURE__ */ jsx3("strong", { id: titleId, children: title }) : null
               ] }),
               closable ? /* @__PURE__ */ jsx3("button", { type: "button", className: "sia-modal__close", "aria-label": "\u5173\u95ED\u5BF9\u8BDD\u6846", onClick: requestClose, children: /* @__PURE__ */ jsx3(Icon, { name: "close", size: 17 }) }) : null
             ] }),
-            children !== void 0 ? /* @__PURE__ */ jsx3("div", { className: "sia-modal__body", children }) : null,
-            footer !== null ? /* @__PURE__ */ jsxs3("div", { className: "sia-modal__footer", children: [
+            children !== void 0 ? /* @__PURE__ */ jsx3("div", { className: "sia-modal__body", style: height !== void 0 ? { flex: 1, minHeight: 0, overflow: "auto" } : void 0, children }) : null,
+            footer !== null ? /* @__PURE__ */ jsxs3("div", { className: "sia-modal__footer", style: height !== void 0 ? { flexShrink: 0 } : void 0, children: [
               footer === void 0 && footerExtra != null ? /* @__PURE__ */ jsx3("div", { style: { marginRight: "auto" }, children: footerExtra }) : null,
               footer ?? defaultFooter
             ] }) : null
@@ -1543,9 +1546,10 @@ var Select = forwardRef3(function Select2({
     }
   });
   const selectedValues = useMemo4(() => {
+    if (currentValue == null || currentValue === "" && !options.some((option) => option.value === "")) return [];
     if (mode === "multiple") return Array.isArray(currentValue) ? currentValue : currentValue === null ? [] : [currentValue];
     return Array.isArray(currentValue) ? currentValue.slice(0, 1) : currentValue === null ? [] : [currentValue];
-  }, [currentValue, mode]);
+  }, [currentValue, mode, options]);
   const selectedValueSet = useMemo4(() => new Set(selectedValues), [selectedValues]);
   const availableOptions = useMemo4(() => {
     if (!allowInput) return options;
@@ -1762,7 +1766,7 @@ var Select = forwardRef3(function Select2({
     /* @__PURE__ */ jsxs6(
       "button",
       {
-        ...props,
+        ...withTitleTooltip(props),
         ref: forwardedRef,
         className: `sia-select__trigger${floating.className}`,
         id: selectId,

package/dist/chunk-RAO3JHDL.js

@@ -0,0 +1,284 @@
+// src/components/titleTooltip.tsx
+import { createRoot } from "react-dom/client";
+import { jsx } from "react/jsx-runtime";
+var documents = /* @__PURE__ */ new WeakSet();
+function withTitleTooltip(props) {
+  if (!props || typeof props !== "object" || !("title" in props)) return props;
+  const { title, ...rest } = props;
+  if (typeof document !== "undefined") installTitleTooltips(document);
+  return { ...rest, "data-sia-title": title == null ? void 0 : String(title) };
+}
+function installTitleTooltips(doc) {
+  if (documents.has(doc)) return;
+  documents.add(doc);
+  let hovered = null;
+  let focused = null;
+  let active = null;
+  let pending = null;
+  let timer;
+  let root;
+  let observer;
+  let tooltipId = "";
+  const candidate = (target) => {
+    if (!(target instanceof Element)) return null;
+    const element = target.closest("[data-sia-title]");
+    return element?.getAttribute("data-sia-title") && !element.closest(".sia-floating") ? element : null;
+  };
+  const hasExplicitTooltip = (target) => target instanceof Element && Boolean(target.closest(".sia-floating"));
+  const hide = () => {
+    clearTimeout(timer);
+    pending = null;
+    observer?.disconnect();
+    observer = void 0;
+    if (active) {
+      const ids = (active.getAttribute("aria-describedby") ?? "").split(/\s+/).filter((id) => id && id !== tooltipId);
+      if (ids.length) active.setAttribute("aria-describedby", ids.join(" "));
+      else active.removeAttribute("aria-describedby");
+    }
+    active = null;
+    root?.render(null);
+  };
+  const render = () => {
+    const text = active?.getAttribute("data-sia-title");
+    if (!active?.isConnected || !text) {
+      hide();
+      return;
+    }
+    if (!root) {
+      const host = doc.createElement("div");
+      host.setAttribute("data-sia-title-tooltip-host", "");
+      doc.body.append(host);
+      root = createRoot(host);
+      tooltipId = `sia-title-tooltip-${Math.random().toString(36).slice(2)}`;
+    }
+    const ids = new Set((active.getAttribute("aria-describedby") ?? "").split(/\s+/).filter(Boolean));
+    ids.add(tooltipId);
+    active.setAttribute("aria-describedby", [...ids].join(" "));
+    root.render(/* @__PURE__ */ jsx(
+      PopupPortal,
+      {
+        anchorRef: { current: active },
+        placement: "top-start",
+        id: tooltipId,
+        role: "tooltip",
+        className: "sia-title-tooltip",
+        children: text
+      }
+    ));
+  };
+  const show = (element) => {
+    if (!element && !active && !pending) return;
+    if (element && (element === active || element === pending)) return;
+    hide();
+    if (!element) return;
+    pending = element;
+    timer = setTimeout(() => {
+      pending = null;
+      if (!element.isConnected) return;
+      active = element;
+      render();
+      if (!active) return;
+      observer = new MutationObserver(() => {
+        if (!active?.isConnected) hide();
+        else if (active.getAttribute("data-sia-title") !== doc.getElementById(tooltipId)?.textContent) render();
+      });
+      observer.observe(doc.body, { childList: true, subtree: true, attributes: true, attributeFilter: ["data-sia-title"] });
+    }, 600);
+  };
+  doc.addEventListener("pointerover", (event) => {
+    if (event.pointerType === "touch") return;
+    hovered = candidate(event.target);
+    if (hasExplicitTooltip(event.target)) hide();
+    else show(hovered ?? focused);
+  }, true);
+  doc.addEventListener("pointermove", (event) => {
+    if (event.pointerType === "touch" || event.buttons) return;
+    hovered = candidate(event.target);
+    if (!hasExplicitTooltip(event.target)) show(hovered ?? focused);
+  }, true);
+  doc.addEventListener("pointerout", (event) => {
+    if (event.pointerType === "touch") return;
+    hovered = candidate(event.relatedTarget);
+    if (hasExplicitTooltip(event.relatedTarget)) hide();
+    else show(hovered ?? focused);
+  }, true);
+  doc.addEventListener("focusin", (event) => {
+    focused = candidate(event.target);
+    if (hasExplicitTooltip(event.target)) hide();
+    else show(focused ?? hovered);
+  }, true);
+  doc.addEventListener("focusout", (event) => {
+    focused = candidate(event.relatedTarget);
+    show(hovered ?? focused);
+  }, true);
+  doc.addEventListener("pointerdown", hide, true);
+  doc.addEventListener("keydown", (event) => {
+    if (event.key === "Escape") hide();
+  }, true);
+  doc.addEventListener("scroll", hide, true);
+  doc.defaultView?.addEventListener("blur", () => {
+    hovered = focused = null;
+    hide();
+  });
+}
+
+// src/components/PopupPortal.tsx
+import { forwardRef, useLayoutEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
+import { jsx as jsx2 } from "react/jsx-runtime";
+function setForwardedRef(ref, value) {
+  if (typeof ref === "function") ref(value);
+  else if (ref) ref.current = value;
+}
+function clamp(value, min, max) {
+  return Math.min(Math.max(value, min), Math.max(min, max));
+}
+var PopupPortal = forwardRef(function PopupPortal2({
+  anchorRef,
+  open = true,
+  placement = "bottom-start",
+  offset = 6,
+  viewportPadding = 8,
+  className = "",
+  style,
+  children,
+  ...props
+}, forwardedRef) {
+  const popupRef = useRef(null);
+  const [position, setPosition] = useState();
+  useLayoutEffect(() => {
+    if (!open || typeof document === "undefined") {
+      setPosition(void 0);
+      return;
+    }
+    const update = () => {
+      const anchor = anchorRef.current;
+      const popup = popupRef.current;
+      if (!anchor || !popup) return;
+      const anchorRect = anchor.getBoundingClientRect();
+      const popupRect = popup.getBoundingClientRect();
+      const viewportWidth = document.documentElement.clientWidth;
+      const viewportHeight = document.documentElement.clientHeight;
+      let resolvedPlacement = placement;
+      const availableBelow = Math.max(0, viewportHeight - viewportPadding - anchorRect.bottom - offset);
+      const availableAbove = Math.max(0, anchorRect.top - offset - viewportPadding);
+      const availableRight = Math.max(0, viewportWidth - viewportPadding - anchorRect.right - offset);
+      const availableLeft = Math.max(0, anchorRect.left - offset - viewportPadding);
+      const horizontalSide = placement.startsWith("right") || placement.startsWith("left");
+      if (horizontalSide) {
+        const prefersRight = placement.startsWith("right");
+        const fitsRight = popupRect.width <= availableRight;
+        const fitsLeft = popupRect.width <= availableLeft;
+        if (prefersRight && !fitsRight && (fitsLeft || availableLeft > availableRight)) {
+          resolvedPlacement = placement.replace("right", "left");
+        } else if (!prefersRight && !fitsLeft && (fitsRight || availableRight > availableLeft)) {
+          resolvedPlacement = placement.replace("left", "right");
+        }
+      } else {
+        const prefersBottom = placement.startsWith("bottom");
+        const fitsBelow = popupRect.height <= availableBelow;
+        const fitsAbove = popupRect.height <= availableAbove;
+        if (prefersBottom && !fitsBelow && (fitsAbove || availableAbove > availableBelow)) {
+          resolvedPlacement = placement.replace("bottom", "top");
+        } else if (!prefersBottom && !fitsAbove && (fitsBelow || availableBelow > availableAbove)) {
+          resolvedPlacement = placement.replace("top", "bottom");
+        }
+      }
+      const resolvedHorizontalSide = resolvedPlacement.startsWith("right") || resolvedPlacement.startsWith("left");
+      const top = resolvedHorizontalSide ? resolvedPlacement.endsWith("end") ? anchorRect.bottom - popupRect.height : anchorRect.top : resolvedPlacement.startsWith("bottom") ? anchorRect.bottom + offset : anchorRect.top - popupRect.height - offset;
+      const availableHeight = resolvedHorizontalSide ? Math.max(0, viewportHeight - viewportPadding * 2) : resolvedPlacement.startsWith("bottom") ? availableBelow : availableAbove;
+      const alignedLeft = resolvedHorizontalSide ? resolvedPlacement.startsWith("right") ? anchorRect.right + offset : anchorRect.left - popupRect.width - offset : resolvedPlacement.endsWith("end") ? anchorRect.right - popupRect.width : anchorRect.left;
+      const next = {
+        top: clamp(top, viewportPadding, viewportHeight - popupRect.height - viewportPadding),
+        left: clamp(alignedLeft, viewportPadding, viewportWidth - popupRect.width - viewportPadding),
+        anchorWidth: anchorRect.width,
+        availableHeight,
+        placement: resolvedPlacement
+      };
+      setPosition((current) => current && current.top === next.top && current.left === next.left && current.anchorWidth === next.anchorWidth && current.availableHeight === next.availableHeight && current.placement === next.placement ? current : next);
+    };
+    update();
+    window.addEventListener("resize", update);
+    window.addEventListener("scroll", update, true);
+    const observer = new ResizeObserver(update);
+    if (anchorRef.current) observer.observe(anchorRef.current);
+    if (popupRef.current) observer.observe(popupRef.current);
+    return () => {
+      window.removeEventListener("resize", update);
+      window.removeEventListener("scroll", update, true);
+      observer.disconnect();
+    };
+  }, [anchorRef, offset, open, placement, viewportPadding]);
+  if (!open || typeof document === "undefined") return null;
+  return createPortal(
+    /* @__PURE__ */ jsx2(
+      "div",
+      {
+        ref: (node) => {
+          popupRef.current = node;
+          setForwardedRef(forwardedRef, node);
+        },
+        className: `sia-popup-portal ${className}`.trim(),
+        "data-sia-popup-layer": "",
+        "data-placement": position?.placement ?? placement,
+        style: {
+          ...style,
+          "--sia-popup-anchor-width": `${position?.anchorWidth ?? anchorRef.current?.getBoundingClientRect().width ?? 0}px`,
+          "--sia-popup-available-height": position ? `${position.availableHeight}px` : void 0,
+          top: position?.top ?? 0,
+          left: position?.left ?? 0,
+          visibility: position ? "visible" : "hidden"
+        },
+        ...withTitleTooltip(props),
+        children
+      }
+    ),
+    document.body
+  );
+});
+
+// src/components/shared.ts
+import { createContext, useCallback, useContext, useState as useState2 } from "react";
+var ControlSizeContext = createContext("medium");
+function useControlSize(size) {
+  const inherited = useContext(ControlSizeContext);
+  return size ?? inherited;
+}
+var PlaceholderModeContext = createContext("default");
+function usePlaceholderMode(mode) {
+  const inherited = useContext(PlaceholderModeContext);
+  return mode ?? inherited;
+}
+function useControllableState({ value, defaultValue, onChange }) {
+  const [internalValue, setInternalValue] = useState2(defaultValue);
+  const controlled = value !== void 0;
+  const currentValue = controlled ? value : internalValue;
+  const setValue = useCallback((nextValue) => {
+    if (Object.is(currentValue, nextValue)) return;
+    if (!controlled) setInternalValue(nextValue);
+    onChange?.(nextValue);
+  }, [controlled, currentValue, onChange]);
+  return [currentValue, setValue];
+}
+
+// src/components/FloatingPlaceholder.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function useFloatingPlaceholder({ mode, placeholder, filled, active = false }) {
+  const enabled = usePlaceholderMode(mode) === "floating" && Boolean(placeholder);
+  return {
+    enabled,
+    className: enabled ? ` sia-placeholder-floating${filled ? " sia-placeholder-floating--filled" : ""}${active ? " sia-placeholder-floating--active" : ""}` : "",
+    label: enabled ? /* @__PURE__ */ jsx3("span", { className: "sia-floating-placeholder", "aria-hidden": "true", children: placeholder }) : null
+  };
+}
+
+export {
+  PopupPortal,
+  withTitleTooltip,
+  ControlSizeContext,
+  useControlSize,
+  PlaceholderModeContext,
+  usePlaceholderMode,
+  useControllableState,
+  useFloatingPlaceholder
+};

package/dist/{chunk-RWGSZW32.js → chunk-RWODH2LW.js}

@@ -2,13 +2,14 @@ import {
   Dropdown,
   Icon,
   Input
-} from "./chunk-KLI65JVD.js";
+} from "./chunk-27ZYAKII.js";
 import {
   Button
-} from "./chunk-TZGUBGA4.js";
+} from "./chunk-IYNS423D.js";
 import {
-  useFloatingPlaceholder
-} from "./chunk-3VJ4CZDQ.js";
+  useFloatingPlaceholder,
+  withTitleTooltip
+} from "./chunk-RAO3JHDL.js";
 
 // src/components/RichTextEditor.tsx
 import { useEffect, useMemo, useRef, useState } from "react";
@@ -42,7 +43,7 @@ function sanitizeContent(value) {
 function RichTextContent({ content, emptyText = "\u6682\u65E0\u5185\u5BB9", className = "", ...props }) {
   const html = useMemo(() => sanitizeContent(content), [content]);
   if (!html.trim()) return /* @__PURE__ */ jsx("div", { className: `sia-rich-text-content sia-rich-text-content--empty ${className}`.trim(), children: emptyText });
-  return /* @__PURE__ */ jsx("article", { className: `sia-rich-text-content ${className}`.trim(), dangerouslySetInnerHTML: { __html: html }, ...props });
+  return /* @__PURE__ */ jsx("article", { className: `sia-rich-text-content ${className}`.trim(), dangerouslySetInnerHTML: { __html: html }, ...withTitleTooltip(props) });
 }
 function RichTextEditor({
   value,
@@ -222,7 +223,7 @@ function RichTextEditor({
     }
   };
   const floating = useFloatingPlaceholder({ mode: placeholderMode, placeholder, filled: editor ? !editor.isEmpty : Boolean(value ?? defaultValue) });
-  return /* @__PURE__ */ jsxs("div", { ...props, id, style: mergedStyle, className: `sia-rich-text-editor${floating.className}${disabled ? " is-disabled" : ""} sia-rich-text-editor--${toolbar} ${className}`.trim(), children: [
+  return /* @__PURE__ */ jsxs("div", { ...withTitleTooltip(props), id, style: mergedStyle, className: `sia-rich-text-editor${floating.className}${disabled ? " is-disabled" : ""} sia-rich-text-editor--${toolbar} ${className}`.trim(), children: [
     floating.label,
     /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__toolbar", "aria-label": "\u6587\u672C\u683C\u5F0F\u5DE5\u5177\u680F", children: [
       /* @__PURE__ */ jsxs("div", { className: "sia-rich-text-editor__toolbar-main", children: [