@skygraph/react 0.5.3 → 0.6.4

package/dist/index.cjs

@@ -1985,6 +1985,7 @@ function Field({
   noStyle,
   normalize,
   getValueFromEvent: _getValueFromEvent,
+  valuePropName,
   validateFirst,
   validateStatus: manualStatus,
   hasFeedback,
@@ -2025,6 +2026,18 @@ function Field({
     prevValueRef.current = normalized;
     field.onChange(normalized);
   } : field.onChange;
+  const valueProp = valuePropName ?? "value";
+  const extractValue = (...args) => {
+    if (_getValueFromEvent) return _getValueFromEvent(...args);
+    const first = args[0];
+    if (first !== null && typeof first === "object" && "target" in first) {
+      const target = first.target;
+      if (target && typeof target === "object" && "value" in target) {
+        return valueProp === "checked" ? target.checked : target.value;
+      }
+    }
+    return first;
+  };
   const effectiveStatus = manualStatus ?? field.status;
   const hasErrors = field.errors.length > 0;
   const hasWarnings = field.warnings.length > 0;
@@ -2060,6 +2073,34 @@ function Field({
       ] });
     }
     if (children) {
+      if ((0, import_react13.isValidElement)(children)) {
+        const childProps = children.props;
+        const childOnChange = childProps.onChange;
+        const childOnBlur = childProps.onBlur;
+        const injected = {
+          [valueProp]: field.value,
+          onChange: (...args) => {
+            wrappedOnChange(extractValue(...args));
+            childOnChange?.(...args);
+          },
+          onBlur: (...args) => {
+            field.onBlur();
+            childOnBlur?.(...args);
+          }
+        };
+        if (childProps.id === void 0) injected.id = fieldId;
+        if (childProps.disabled === void 0 && disabled) injected.disabled = true;
+        if (childProps["aria-describedby"] === void 0 && describedBy) {
+          injected["aria-describedby"] = describedBy;
+        }
+        if (childProps["aria-invalid"] === void 0 && hasErrors) {
+          injected["aria-invalid"] = true;
+        }
+        return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
+          (0, import_react13.cloneElement)(children, injected),
+          feedbackIcon
+        ] });
+      }
       return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
         children,
         feedbackIcon
@@ -3741,14 +3782,11 @@ function TableBody(props) {
       onContextMenu({ x: e.clientX, y: e.clientY, items: items2 });
     }
   };
-  const handleCellCopy = (0, import_react20.useCallback)(
-    async (rowId, colKey, value) => {
-      await copyToClipboard(String(value ?? ""));
-      setCopiedCell(`${rowId}:${colKey}`);
-      setTimeout(() => setCopiedCell(null), 1500);
-    },
-    []
-  );
+  const handleCellCopy = (0, import_react20.useCallback)(async (rowId, colKey, value) => {
+    await copyToClipboard(String(value ?? ""));
+    setCopiedCell(`${rowId}:${colKey}`);
+    setTimeout(() => setCopiedCell(null), 1500);
+  }, []);
   if (flatRows.length === 0) {
     return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
       "div",
@@ -3813,7 +3851,13 @@ function TableBody(props) {
               {
                 className: "sg-table-td sg-table-cell-drag-handle",
                 role: "cell",
-                style: { cursor: "grab", userSelect: "none", display: "flex", alignItems: "center", justifyContent: "center" },
+                style: {
+                  cursor: "grab",
+                  userSelect: "none",
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "center"
+                },
                 children: "\u283F"
               }
             ),
@@ -3825,10 +3869,24 @@ function TableBody(props) {
                 role: "cell",
                 onClick: (e) => {
                   e.stopPropagation();
-                  onSelectRow(row.id, row.data);
+                  if (e.target === e.currentTarget) {
+                    onSelectRow(row.id, row.data);
+                  }
                 },
-                children: rowSelection.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "radio", checked: !!isSelected, readOnly: true }) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Checkbox, { checked: !!isSelected, onChange: () => {
-                } })
+                children: rowSelection.type === "radio" ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  "input",
+                  {
+                    type: "radio",
+                    checked: !!isSelected,
+                    onChange: () => onSelectRow(row.id, row.data)
+                  }
+                ) : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  Checkbox,
+                  {
+                    checked: !!isSelected,
+                    onChange: () => onSelectRow(row.id, row.data)
+                  }
+                )
               }
             ),
             expandable && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "sg-table-td sg-table-cell-expand", role: "cell", children: canExpand && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
@@ -3851,10 +3909,8 @@ function TableBody(props) {
               const isFocused = keyboardNavigation && focusedCell?.row === rowIdx && focusedCell?.col === colIndex;
               const isCopied = copiedCell === cellKey;
               const cellStyle = { ...fixedStyle(col) };
-              if (span?.colSpan && span.colSpan > 1)
-                cellStyle.gridColumn = `span ${span.colSpan}`;
-              if (span?.rowSpan && span.rowSpan > 1)
-                cellStyle.gridRow = `span ${span.rowSpan}`;
+              if (span?.colSpan && span.colSpan > 1) cellStyle.gridColumn = `span ${span.colSpan}`;
+              if (span?.rowSpan && span.rowSpan > 1) cellStyle.gridRow = `span ${span.rowSpan}`;
               const isFirstCol = colIndex === 0;
               const treeIndent = isTreeMode && isFirstCol ? row.depth * indentSize : 0;
               const cellClsExtra = typeof col.cellClassName === "function" ? col.cellClassName(val, row.data, row.id) : col.cellClassName ?? "";
@@ -4868,6 +4924,13 @@ function useTableState(props) {
     [table, refresh]
   );
   const resizeRef = (0, import_react24.useRef)(null);
+  const resizeCleanupRef = (0, import_react24.useRef)(null);
+  (0, import_react24.useEffect)(
+    () => () => {
+      resizeCleanupRef.current?.();
+    },
+    []
+  );
   const [contextMenu, setContextMenu] = (0, import_react24.useState)(null);
   const columns = (0, import_react24.useMemo)(() => {
     const base = hasColumnGroups ? leafColumns : (() => {
@@ -4993,9 +5056,8 @@ function useTableState(props) {
   );
   const handleToggleExpand = (id) => {
     const open = expandedKeys.has(id);
-    if (expandable?.onExpand) {
-      expandable.onExpand(!open, id);
-    } else {
+    expandable?.onExpand?.(!open, id);
+    if (expandable?.expandedKeys == null) {
       setInternalExpanded((prev) => {
         const next = new Set(prev);
         if (open) {
@@ -5071,28 +5133,34 @@ function useTableState(props) {
   const handleResizeStart = (e, colKey) => {
     e.preventDefault();
     e.stopPropagation();
+    resizeCleanupRef.current?.();
     resizeRef.current = {
       col: colKey,
       startX: e.clientX,
       startW: colWidths[colKey] ?? DEFAULT_COL_WIDTH
     };
     const onMove = (ev) => {
-      if (!resizeRef.current) return;
-      const diff = ev.clientX - resizeRef.current.startX;
-      const min = leafColumns.find((c) => c.key === resizeRef.current.col)?.minWidth ?? MIN_COL_WIDTH;
+      const ref = resizeRef.current;
+      if (!ref) return;
+      const diff = ev.clientX - ref.startX;
+      const min = leafColumns.find((c) => c.key === ref.col)?.minWidth ?? MIN_COL_WIDTH;
+      const nextWidth = Math.max(min, ref.startW + diff);
+      const col = ref.col;
       setColWidths((prev) => ({
         ...prev,
-        [resizeRef.current.col]: Math.max(min, resizeRef.current.startW + diff)
+        [col]: nextWidth
       }));
-      setUserResizedCols(
-        (prev) => prev.has(resizeRef.current.col) ? prev : new Set(prev).add(resizeRef.current.col)
-      );
+      setUserResizedCols((prev) => prev.has(col) ? prev : new Set(prev).add(col));
     };
-    const onUp = () => {
-      const ref = resizeRef.current;
+    const cleanup = () => {
       resizeRef.current = null;
       document.removeEventListener("mousemove", onMove);
       document.removeEventListener("mouseup", onUp);
+      resizeCleanupRef.current = null;
+    };
+    const onUp = () => {
+      const ref = resizeRef.current;
+      cleanup();
       if (!ref) return;
       setColWidths((prev) => {
         const w = prev[ref.col];
@@ -5100,6 +5168,7 @@ function useTableState(props) {
         return prev;
       });
     };
+    resizeCleanupRef.current = cleanup;
     document.addEventListener("mousemove", onMove);
     document.addEventListener("mouseup", onUp);
   };
@@ -5120,13 +5189,11 @@ function useTableState(props) {
       setDragOver(null);
       return;
     }
-    setColOrder((prev) => {
-      const next = prev.filter((k) => k !== dragCol);
-      const idx = next.indexOf(targetKey);
-      next.splice(idx, 0, dragCol);
-      onColumnOrderChange?.(next);
-      return next;
-    });
+    const next = colOrder.filter((k) => k !== dragCol);
+    const idx = next.indexOf(targetKey);
+    next.splice(idx, 0, dragCol);
+    setColOrder(next);
+    onColumnOrderChange?.(next);
     setDragCol(null);
     setDragOver(null);
   };
@@ -5157,31 +5224,24 @@ function useTableState(props) {
     }));
     table.groupBy(groupBy, aggregates2);
   }, [groupBy, leafColumns, table]);
-  const [expandedGroups, setExpandedGroups] = (0, import_react24.useState)(() => {
-    return defaultGroupExpanded ? /* @__PURE__ */ new Set(["__all__"]) : /* @__PURE__ */ new Set();
-  });
+  const [expandedGroups, setExpandedGroups] = (0, import_react24.useState)(() => /* @__PURE__ */ new Set());
+  const allGroupKeysRef = (0, import_react24.useRef)([]);
+  const groupsSeededRef = (0, import_react24.useRef)(false);
   const toggleGroupExpand = (0, import_react24.useCallback)(
     (groupKey) => {
+      const willExpand = !expandedGroups.has(groupKey);
       setExpandedGroups((prev) => {
         const next = new Set(prev);
-        const wasExpanded = next.has(groupKey);
-        if (wasExpanded) {
-          next.delete(groupKey);
-        } else {
-          next.add(groupKey);
-        }
-        onGroupExpandChange?.(groupKey, !wasExpanded);
+        if (next.has(groupKey)) next.delete(groupKey);
+        else next.add(groupKey);
         return next;
       });
+      onGroupExpandChange?.(groupKey, willExpand);
     },
-    [onGroupExpandChange]
+    [onGroupExpandChange, expandedGroups]
   );
   const expandAllGroups = (0, import_react24.useCallback)(() => {
-    setExpandedGroups((prev) => {
-      const next = new Set(prev);
-      next.add("__all__");
-      return next;
-    });
+    setExpandedGroups(new Set(allGroupKeysRef.current));
   }, []);
   const collapseAllGroups = (0, import_react24.useCallback)(() => {
     setExpandedGroups(/* @__PURE__ */ new Set());
@@ -5274,11 +5334,32 @@ function useTableState(props) {
     }
     return flattenTreeRows(visibleRows, childrenKey, treeExpanded);
   }, [visibleRows, isTreeMode, childrenKey, treeExpanded]);
+  const allGroupKeys = (0, import_react24.useMemo)(() => {
+    if (!groupBy) return [];
+    const seen = /* @__PURE__ */ new Set();
+    const keys = [];
+    for (const r of baseFlatRows) {
+      const k = String(r.data[groupBy] ?? "Other");
+      if (!seen.has(k)) {
+        seen.add(k);
+        keys.push(k);
+      }
+    }
+    return keys;
+  }, [baseFlatRows, groupBy]);
+  allGroupKeysRef.current = allGroupKeys;
+  (0, import_react24.useEffect)(() => {
+    groupsSeededRef.current = false;
+  }, [groupBy]);
+  (0, import_react24.useEffect)(() => {
+    if (!groupBy || !defaultGroupExpanded) return;
+    if (groupsSeededRef.current || allGroupKeys.length === 0) return;
+    groupsSeededRef.current = true;
+    setExpandedGroups(new Set(allGroupKeys));
+  }, [groupBy, defaultGroupExpanded, allGroupKeys]);
   const groupedRows = (0, import_react24.useMemo)(() => {
     if (!groupBy) return baseFlatRows;
-    const allExpanded = expandedGroups.has("__all__");
-    const effectiveExpanded = allExpanded ? /* @__PURE__ */ new Set([...expandedGroups, ...baseFlatRows.map((r) => String(r.data[groupBy] ?? "Other"))]) : expandedGroups;
-    return groupByColumn(baseFlatRows, groupBy, columns, effectiveExpanded);
+    return groupByColumn(baseFlatRows, groupBy, columns, expandedGroups);
   }, [baseFlatRows, groupBy, columns, expandedGroups]);
   const {
     top: pinnedTop,
@@ -9458,6 +9539,21 @@ function startOfDay(d) {
 function cloneDate(d) {
   return new Date(d.getTime());
 }
+function startOfWeek(d) {
+  const s = startOfDay(d);
+  s.setDate(s.getDate() - s.getDay());
+  return s;
+}
+function endOfWeek(d) {
+  const e = startOfWeek(d);
+  e.setDate(e.getDate() + 6);
+  return e;
+}
+function getWeekOfYear(d) {
+  const oneJan = new Date(d.getFullYear(), 0, 1);
+  const dayOfYear = Math.floor((startOfDay(d).getTime() - startOfDay(oneJan).getTime()) / 864e5) + 1;
+  return Math.ceil((dayOfYear + oneJan.getDay()) / 7);
+}
 function toValidDate(input) {
   if (input == null || input === "") return null;
   if (input instanceof Date) return isNaN(input.getTime()) ? null : input;
@@ -9859,6 +9955,7 @@ function DatePicker({
   const okBtnLabel = config.locale?.modal?.okText ?? "OK";
   const timeConfig = typeof showTime === "object" ? showTime : {};
   const hasTime = !!showTime;
+  const isWeek = picker === "week";
   const fmt = formatProp ?? (hasTime ? "YYYY-MM-DD HH:mm:ss" : picker === "month" ? "YYYY-MM" : picker === "year" ? "YYYY" : "YYYY-MM-DD");
   const normalizedValue = toValidDate(value);
   const normalizedDefault = toValidDate(defaultValue);
@@ -10008,7 +10105,8 @@ function DatePicker({
     }
     if (e.key === "Escape") closeDropdown();
   };
-  const displayText = isInputting ? inputText : currentValue ? formatDate(currentValue, fmt) : "";
+  const formatValue2 = (d) => isWeek ? `${d.getFullYear()}-W${String(getWeekOfYear(d)).padStart(2, "0")}` : formatDate(d, fmt);
+  const displayText = isInputting ? inputText : currentValue ? formatValue2(currentValue) : "";
   const wrapperCls = unstyled ? className ?? "" : [
     "sg-datepicker",
     `sg-datepicker-${size}`,
@@ -10073,7 +10171,9 @@ function DatePicker({
           {
             viewYear,
             viewMonth,
-            selectedDate: currentValue,
+            selectedDate: isWeek ? null : currentValue,
+            rangeStart: isWeek && currentValue ? startOfWeek(currentValue) : void 0,
+            rangeEnd: isWeek && currentValue ? endOfWeek(currentValue) : void 0,
             disabledDate,
             onSelect: handleDateSelect,
             onMonthChange: (d) => {
@@ -10189,7 +10289,8 @@ function RangePicker({
   const [internalOpen, setInternalOpen] = (0, import_react38.useState)(false);
   const [activeIndex, setActiveIndex] = (0, import_react38.useState)(0);
   const [hoverDate, setHoverDate] = (0, import_react38.useState)(null);
-  const currentValue = normalizedValue ?? internalValue;
+  const [draft, setDraft] = (0, import_react38.useState)(null);
+  const currentValue = draft ?? normalizedValue ?? internalValue;
   const isOpen = openProp ?? internalOpen;
   const now = /* @__PURE__ */ new Date();
   const [leftYear, setLeftYear] = (0, import_react38.useState)(() => (currentValue[0] ?? now).getFullYear());
@@ -10206,6 +10307,8 @@ function RangePicker({
       if (ref.current && !ref.current.contains(e.target)) {
         setInternalOpen(false);
         onOpenChange?.(false);
+        setDraft(null);
+        setActiveIndex(0);
       }
     };
     document.addEventListener("mousedown", handle);
@@ -10228,7 +10331,7 @@ function RangePicker({
   };
   const handleDateSelect = (date) => {
     if (activeIndex === 0) {
-      setInternalValue([date, null]);
+      setDraft([date, null]);
       setActiveIndex(1);
     } else {
       let start = currentValue[0];
@@ -10242,9 +10345,10 @@ function RangePicker({
         s.setHours(tempTimes[0].getHours(), tempTimes[0].getMinutes(), tempTimes[0].getSeconds());
         const e = cloneDate(end);
         e.setHours(tempTimes[1].getHours(), tempTimes[1].getMinutes(), tempTimes[1].getSeconds());
-        setInternalValue([s, e]);
+        setDraft([s, e]);
       } else {
         commitRange([start, end]);
+        setDraft(null);
         setInternalOpen(false);
         onOpenChange?.(false);
         setActiveIndex(0);
@@ -10253,6 +10357,7 @@ function RangePicker({
   };
   const handleTimeOk = () => {
     commitRange(currentValue);
+    setDraft(null);
     setInternalOpen(false);
     onOpenChange?.(false);
     setActiveIndex(0);
@@ -10260,6 +10365,7 @@ function RangePicker({
   const handleClear = (e) => {
     e.stopPropagation();
     commitRange([null, null]);
+    setDraft(null);
     setActiveIndex(0);
   };
   const handlePresetSelect = (val) => {
@@ -10268,6 +10374,8 @@ function RangePicker({
     } else {
       commitRange([val, val]);
     }
+    setDraft(null);
+    setActiveIndex(0);
     setInternalOpen(false);
     onOpenChange?.(false);
   };
@@ -10561,12 +10669,18 @@ function TimePicker({
   }, [secondStep]);
   const disHours = (0, import_react39.useMemo)(() => new Set(disabledHours?.() ?? []), [disabledHours]);
   const disMinutes = (0, import_react39.useMemo)(() => new Set(disabledMinutes?.(hour) ?? []), [disabledMinutes, hour]);
-  const disSecs = (0, import_react39.useMemo)(() => new Set(disabledSeconds?.(hour, minute) ?? []), [disabledSeconds, hour, minute]);
-  const commitTime = (0, import_react39.useCallback)((h, m, s) => {
-    const str = formatTime(h, m, s, fmt, use12Hours);
-    setInternalValue(str);
-    onChange?.(str);
-  }, [fmt, use12Hours, onChange]);
+  const disSecs = (0, import_react39.useMemo)(
+    () => new Set(disabledSeconds?.(hour, minute) ?? []),
+    [disabledSeconds, hour, minute]
+  );
+  const commitTime = (0, import_react39.useCallback)(
+    (h, m, s) => {
+      const str = formatTime(h, m, s, fmt, use12Hours);
+      setInternalValue(str);
+      onChange?.(str);
+    },
+    [fmt, use12Hours, onChange]
+  );
   const handleHourChange = (h) => {
     const realH = use12Hours ? h === 12 ? hour >= 12 ? 12 : 0 : hour >= 12 ? h + 12 : h : h;
     setHour(realH);
@@ -10621,10 +10735,26 @@ function TimePicker({
         "aria-label": ariaLabel,
         "aria-labelledby": ariaLabelledBy,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: currentValue ? "" : unstyled ? "" : "sg-timepicker-placeholder", children: currentValue || placeholder }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            "span",
+            {
+              className: unstyled ? "" : currentValue ? "sg-timepicker-value" : "sg-timepicker-placeholder",
+              children: currentValue || placeholder
+            }
+          ),
           /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: unstyled ? "" : "sg-timepicker-suffix", children: loading ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Spin, { size: "small", unstyled }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
             allowClear && currentValue && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: unstyled ? "" : "sg-timepicker-clear", onClick: handleClear, children: "\xD7" }),
-            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("svg", { className: unstyled ? "" : "sg-timepicker-icon-svg", viewBox: "0 0 16 16", width: "14", height: "14", fill: "currentColor", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm.5 3v4.5l3 1.5-.5 1-3.5-1.75V4h1z" }) })
+            /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+              "svg",
+              {
+                className: unstyled ? "" : "sg-timepicker-icon-svg",
+                viewBox: "0 0 16 16",
+                width: "14",
+                height: "14",
+                fill: "currentColor",
+                children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("path", { d: "M8 0a8 8 0 110 16A8 8 0 018 0zm0 1a7 7 0 100 14A7 7 0 008 1zm.5 3v4.5l3 1.5-.5 1-3.5-1.75V4h1z" })
+              }
+            )
           ] }) })
         ]
       }
@@ -10722,7 +10852,9 @@ function TimeRangePicker({
   const size = sizeProp ?? config.size ?? "middle";
   const disabled = disabledProp ?? config.disabled ?? false;
   const fmt = formatProp ?? (use12Hours ? "hh:mm:ss A" : showSecond ? "HH:mm:ss" : "HH:mm");
-  const [internalValue, setInternalValue] = (0, import_react39.useState)(value ?? defaultValue ?? ["", ""]);
+  const [internalValue, setInternalValue] = (0, import_react39.useState)(
+    value ?? defaultValue ?? ["", ""]
+  );
   const [internalOpen, setInternalOpen] = (0, import_react39.useState)(false);
   const currentValue = value ?? internalValue;
   const isOpen = openProp ?? internalOpen;
@@ -10767,12 +10899,19 @@ function TimeRangePicker({
     className
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: wrapperCls, ref, style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: unstyled ? "" : "sg-timepicker-input sg-timepicker-range-input", onClick: openDropdown, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: currentValue[0] || placeholder[0] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: unstyled ? "" : "sg-timepicker-separator", children: separator }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: currentValue[1] || placeholder[1] }),
-      /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: unstyled ? "" : "sg-timepicker-suffix", children: allowClear && (currentValue[0] || currentValue[1]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: unstyled ? "" : "sg-timepicker-clear", onClick: handleClear, children: "\xD7" }) })
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+      "div",
+      {
+        className: unstyled ? "" : "sg-timepicker-input sg-timepicker-range-input",
+        onClick: openDropdown,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: currentValue[0] || placeholder[0] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: unstyled ? "" : "sg-timepicker-separator", children: separator }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: currentValue[1] || placeholder[1] }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: unstyled ? "" : "sg-timepicker-suffix", children: allowClear && (currentValue[0] || currentValue[1]) && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: unstyled ? "" : "sg-timepicker-clear", onClick: handleClear, children: "\xD7" }) })
+        ]
+      }
+    ),
     isOpen && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: unstyled ? "" : "sg-tp-dropdown sg-tp-dropdown-range", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: unstyled ? "" : "sg-tp-range-panels", children: [
       /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         TimePicker,
@@ -10837,9 +10976,7 @@ function AutoComplete({
   const [open, setOpen] = (0, import_react40.useState)(false);
   const ref = (0, import_react40.useRef)(null);
   const currentValue = value ?? internalValue;
-  const filtered = options.filter(
-    (o) => o.label.toLowerCase().includes(currentValue.toLowerCase())
-  );
+  const filtered = options.filter((o) => o.label.toLowerCase().includes(currentValue.toLowerCase()));
   (0, import_react40.useEffect)(() => {
     const handleClickOutside = (e) => {
       if (ref.current && !ref.current.contains(e.target)) setOpen(false);
@@ -10860,7 +10997,12 @@ function AutoComplete({
     onSelect?.(opt.value, opt);
     setOpen(false);
   };
-  const wrapperClass = unstyled ? className ?? "" : ["sg-autocomplete", `sg-autocomplete-${size}`, loading ? "sg-autocomplete-loading" : "", className].filter(Boolean).join(" ");
+  const wrapperClass = unstyled ? className ?? "" : [
+    "sg-autocomplete",
+    `sg-autocomplete-${size}`,
+    loading ? "sg-autocomplete-loading" : "",
+    className
+  ].filter(Boolean).join(" ");
   return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: wrapperClass, ref, style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: unstyled ? "" : "sg-input-wrapper", children: [
       /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
@@ -10873,7 +11015,8 @@ function AutoComplete({
           className: unstyled ? "" : `sg-input sg-input-${size}`,
           value: currentValue,
           placeholder,
-          disabled: disabled || loading,
+          disabled,
+          "aria-busy": loading || void 0,
           onChange: handleChange,
           onFocus: () => setOpen(true),
           onBlur
@@ -11341,25 +11484,34 @@ function NotificationCard({
   const type = item.type ?? "info";
   const closeAriaLabel = useConfig().locale?.notification?.closeAriaLabel ?? "Close";
   if (unstyled) {
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { role: "alert", children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { role: "alert", className: item.className, style: item.style, children: [
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: typeIcons[type] }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { children: item.message }),
       item.description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { children: item.description }),
       /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { onClick: onClose, "aria-label": closeAriaLabel, children: "\xD7" })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: `sg-notification sg-notification-${type}`, role: "alert", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "sg-notification-icon", children: typeIcons[type] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "sg-notification-content", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "sg-notification-message", children: item.message }),
-      item.description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "sg-notification-description", children: item.description })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "sg-notification-close", onClick: onClose, "aria-label": closeAriaLabel, children: "\xD7" })
-  ] });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    "div",
+    {
+      className: ["sg-notification", `sg-notification-${type}`, item.className].filter(Boolean).join(" "),
+      style: item.style,
+      role: "alert",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "sg-notification-icon", children: typeIcons[type] }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "sg-notification-content", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "sg-notification-message", children: item.message }),
+          item.description && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "sg-notification-description", children: item.description })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("button", { className: "sg-notification-close", onClick: onClose, "aria-label": closeAriaLabel, children: "\xD7" })
+      ]
+    }
+  );
 }
 
 // src/components/ui/Drawer.tsx
 var import_react45 = require("react");
+var import_react_dom2 = require("react-dom");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var PLACEMENT_TRANSITION = {
   left: "sg-slide-left",
@@ -11367,6 +11519,18 @@ var PLACEMENT_TRANSITION = {
   top: "sg-slide-down",
   bottom: "sg-slide-up"
 };
+function getScopedCssVars(scope) {
+  if (!scope || typeof window === "undefined") return {};
+  const computed = window.getComputedStyle(scope);
+  const vars = {};
+  for (let i = 0; i < computed.length; i += 1) {
+    const name = computed.item(i);
+    if (name.startsWith("--sg-")) {
+      vars[name] = computed.getPropertyValue(name);
+    }
+  }
+  return vars;
+}
 function Drawer({
   open,
   onClose,
@@ -11387,6 +11551,7 @@ function Drawer({
   const titleId = `${uid}-title`;
   const bodyId = `${uid}-body`;
   const trapRef = useFocusTrap(open);
+  const scopeRef = (0, import_react45.useRef)(null);
   const { locale } = useConfig();
   const closeAriaLabel = locale?.drawer?.closeAriaLabel ?? "Close";
   const handleKeyDown = (0, import_react45.useCallback)(
@@ -11424,7 +11589,8 @@ function Drawer({
     );
   }
   const transitionName = PLACEMENT_TRANSITION[placement] ?? "sg-slide-right";
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Transition, { visible: open, name: "sg-fade", unmountOnExit: true, duration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "sg-drawer-root", children: [
+  const portalTarget = typeof document !== "undefined" ? document.body : null;
+  const drawer = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Transition, { visible: open, name: "sg-fade", unmountOnExit: true, duration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "sg-drawer-root", style: getScopedCssVars(scopeRef.current), children: [
     mask && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "sg-drawer-mask", onClick: maskClosable ? onClose : void 0 }),
     /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Transition, { visible: open, name: transitionName, unmountOnExit: true, duration: 300, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
@@ -11456,6 +11622,10 @@ function Drawer({
       }
     ) })
   ] }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { ref: scopeRef, hidden: true }),
+    portalTarget ? (0, import_react_dom2.createPortal)(drawer, portalTarget) : drawer
+  ] });
 }
 
 // src/components/ui/Popconfirm.tsx
@@ -21200,7 +21370,8 @@ function ListInner({
     (e, index) => {
       if (!draggable || dragIndex === null) return;
       e.preventDefault();
-      setDropIndex(index);
+      e.dataTransfer.dropEffect = "move";
+      setDropIndex((prev) => prev === index ? prev : index);
     },
     [draggable, dragIndex]
   );
@@ -21282,7 +21453,6 @@ function ListInner({
           onDragOver: (e) => handleDragOver(e, index),
           onDrop: (e) => handleDrop(e, index),
           onDragEnd: handleDragEnd,
-          onDragLeave: () => setDropIndex(null),
           children: [
             draggable && /* @__PURE__ */ (0, import_jsx_runtime85.jsx)("span", { className: "sg-list-drag-handle", children: "\u283F" }),
             renderItem(item, index)