@sarunyu/system-one 4.9.23 → 4.9.25

package/dist/index.js

@@ -8,6 +8,7 @@ import { BellSimple, FunnelSimple, CheckCircle, Warning, XCircle, Info, Bookmark
 import { DayPicker, useDayPicker } from "react-day-picker";
 import * as Popover from "@radix-ui/react-popover";
 import { Drawer as Drawer$1 } from "vaul";
+import { createPortal } from "react-dom";
 function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
@@ -2637,6 +2638,9 @@ const Dropdown = forwardRef(
     const [search, setSearch] = useState("");
     const containerRef = useRef(null);
     const inputRef = useRef(null);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const [menuStyle, setMenuStyle] = useState({});
     const controlled = value !== void 0;
     const currentValue = controlled ? value : internalValue;
     const isDisabled = forceState === "disabled";
@@ -2667,12 +2671,29 @@ const Dropdown = forwardRef(
     useEffect(() => {
       if (!open) setSearch("");
     }, [open]);
+    const updateMenuPosition = useCallback(() => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      setMenuStyle({ position: "fixed", top: rect.bottom + 4, left: rect.left, width: rect.width });
+    }, []);
+    useEffect(() => {
+      if (!open) return;
+      updateMenuPosition();
+      window.addEventListener("scroll", updateMenuPosition, true);
+      window.addEventListener("resize", updateMenuPosition);
+      return () => {
+        window.removeEventListener("scroll", updateMenuPosition, true);
+        window.removeEventListener("resize", updateMenuPosition);
+      };
+    }, [open, updateMenuPosition]);
     useEffect(() => {
       if (!open) return;
       const handler = (e) => {
-        if (containerRef.current && !containerRef.current.contains(e.target)) {
-          setOpen(false);
-        }
+        var _a2, _b;
+        const target = e.target;
+        const inContainer = ((_a2 = containerRef.current) == null ? void 0 : _a2.contains(target)) ?? false;
+        const inMenu = ((_b = menuRef.current) == null ? void 0 : _b.contains(target)) ?? false;
+        if (!inContainer && !inMenu) setOpen(false);
       };
       document.addEventListener("mousedown", handler);
       return () => document.removeEventListener("mousedown", handler);
@@ -2712,6 +2733,7 @@ const Dropdown = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
+              ref: triggerRef,
               onClick: handleToggle,
               className: cn(
                 "relative flex gap-2 items-center rounded-lg px-3.5",
@@ -2868,46 +2890,52 @@ const Dropdown = forwardRef(
                     }
                   )
                 ),
-                isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsx(CaretDown, { size: 22, className: cn("shrink-0", caretClassName) }),
-                open && !forceState && options.length > 0 && /* @__PURE__ */ jsx(
+                isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsx(CaretDown, { size: 22, className: cn("shrink-0", caretClassName) })
+              ]
+            }
+          ),
+          open && !forceState && options.length > 0 && createPortal(
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: menuRef,
+                className: cn(
+                  "bg-popover rounded-lg overflow-clip p-2 flex flex-col items-start text-popover-foreground",
+                  filteredOptions.length > 10 && "overflow-y-auto"
+                ),
+                style: {
+                  ...menuStyle,
+                  boxShadow: "var(--elevation-popover)",
+                  zIndex: 9999,
+                  ...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
+                },
+                children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsx(
                   "div",
                   {
+                    onClick: (e) => {
+                      e.stopPropagation();
+                      handleSelect(opt.value);
+                    },
                     className: cn(
-                      "absolute top-full left-0 w-full mt-1 bg-popover rounded-lg overflow-clip p-2 z-50 flex flex-col items-start text-popover-foreground",
-                      filteredOptions.length > 10 && "overflow-y-auto"
+                      "w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
+                      opt.value === currentValue ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
                     ),
-                    style: {
-                      boxShadow: "var(--elevation-popover)",
-                      ...filteredOptions.length > 10 ? { maxHeight: 10 * 48 + 16 } : {}
-                    },
-                    children: filteredOptions.length > 0 ? filteredOptions.map((opt) => /* @__PURE__ */ jsx(
-                      "div",
+                    children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsx(
+                      "p",
                       {
-                        onClick: (e) => {
-                          e.stopPropagation();
-                          handleSelect(opt.value);
-                        },
                         className: cn(
-                          "w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
-                          opt.value === currentValue ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
+                          "flex-1 min-w-0 min-h-[1px] leading-5 not-italic overflow-hidden text-sm text-ellipsis whitespace-nowrap",
+                          opt.value === currentValue ? "text-primary-action" : "text-foreground"
                         ),
-                        children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsx(
-                          "p",
-                          {
-                            className: cn(
-                              "flex-1 min-w-0 min-h-[1px] leading-5 not-italic overflow-hidden text-sm text-ellipsis whitespace-nowrap",
-                              opt.value === currentValue ? "text-primary-action" : "text-foreground"
-                            ),
-                            children: opt.label
-                          }
-                        ) }) })
-                      },
-                      opt.value
-                    )) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
-                  }
-                )
-              ]
-            }
+                        children: opt.label
+                      }
+                    ) }) })
+                  },
+                  opt.value
+                )) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
+              }
+            ),
+            document.body
           ),
           showBelow && /* @__PURE__ */ jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) })
         ]
@@ -3095,6 +3123,9 @@ const DropdownMultiple = forwardRef(
     const containerRef = useRef(null);
     const inputRef = useRef(null);
     const measureRef = useRef(null);
+    const triggerRef = useRef(null);
+    const menuRef = useRef(null);
+    const [menuStyle, setMenuStyle] = useState({});
     React__default.useImperativeHandle(ref, () => containerRef.current);
     const controlled = value !== void 0;
     const currentValue = controlled ? value : internalValue;
@@ -3140,12 +3171,29 @@ const DropdownMultiple = forwardRef(
     useEffect(() => {
       if (!open) setSearch("");
     }, [open]);
+    const updateMenuPosition = useCallback(() => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      setMenuStyle({ position: "fixed", top: rect.bottom + 4, left: rect.left, width: rect.width });
+    }, []);
+    useEffect(() => {
+      if (!open) return;
+      updateMenuPosition();
+      window.addEventListener("scroll", updateMenuPosition, true);
+      window.addEventListener("resize", updateMenuPosition);
+      return () => {
+        window.removeEventListener("scroll", updateMenuPosition, true);
+        window.removeEventListener("resize", updateMenuPosition);
+      };
+    }, [open, updateMenuPosition]);
     useEffect(() => {
       if (!open) return;
       const handler = (e) => {
-        if (containerRef.current && !containerRef.current.contains(e.target)) {
-          setOpen(false);
-        }
+        var _a, _b;
+        const target = e.target;
+        const inContainer = ((_a = containerRef.current) == null ? void 0 : _a.contains(target)) ?? false;
+        const inMenu = ((_b = menuRef.current) == null ? void 0 : _b.contains(target)) ?? false;
+        if (!inContainer && !inMenu) setOpen(false);
       };
       document.addEventListener("mousedown", handler);
       return () => document.removeEventListener("mousedown", handler);
@@ -3379,6 +3427,7 @@ const DropdownMultiple = forwardRef(
           /* @__PURE__ */ jsxs(
             "div",
             {
+              ref: triggerRef,
               onClick: handleTriggerClick,
               className: cn(
                 "relative flex gap-[8px] items-center rounded-[8px]",
@@ -3414,76 +3463,82 @@ const DropdownMultiple = forwardRef(
                     )
                   }
                 ),
-                /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22 }) : /* @__PURE__ */ jsx(CaretDown, { size: 22 }) }),
-                open && !isStatic && options.length > 0 && /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsx(CaretUp, { size: 22 }) : /* @__PURE__ */ jsx(CaretDown, { size: 22 }) })
+              ]
+            }
+          ),
+          open && !isStatic && options.length > 0 && createPortal(
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                ref: menuRef,
+                className: "bg-popover rounded-[8px] overflow-clip p-[8px] flex flex-col items-start text-popover-foreground",
+                style: {
+                  ...menuStyle,
+                  boxShadow: "var(--elevation-popover)",
+                  zIndex: 9999
+                },
+                children: /* @__PURE__ */ jsx(
                   "div",
                   {
-                    className: "absolute top-full left-0 w-full mt-1 bg-popover rounded-[8px] overflow-clip p-[8px] z-50 flex flex-col items-start text-popover-foreground",
-                    style: {
-                      boxShadow: "var(--elevation-popover)"
-                    },
-                    children: /* @__PURE__ */ jsx(
-                      "div",
-                      {
-                        className: cn(
-                          "w-full flex flex-col",
-                          filteredOptions.length > 10 && "overflow-y-auto"
-                        ),
-                        style: filteredOptions.length > 10 ? { maxHeight: 10 * 48 } : void 0,
-                        children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
-                          const isSelected = currentValue.includes(opt.value);
-                          return /* @__PURE__ */ jsx(
-                            "div",
-                            {
-                              onClick: (e) => {
-                                var _a;
-                                e.stopPropagation();
-                                handleToggleOption(opt.value);
-                                (_a = inputRef.current) == null ? void 0 : _a.focus();
-                              },
-                              className: cn(
-                                "w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
-                                isSelected ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
-                              ),
-                              children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
-                                /* @__PURE__ */ jsx(
-                                  "p",
-                                  {
-                                    className: cn(
-                                      "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
-                                      isSelected ? "text-primary-action" : "text-foreground"
-                                    ),
-                                    children: opt.label
-                                  }
+                    className: cn(
+                      "w-full flex flex-col",
+                      filteredOptions.length > 10 && "overflow-y-auto"
+                    ),
+                    style: filteredOptions.length > 10 ? { maxHeight: 10 * 48 } : void 0,
+                    children: filteredOptions.length > 0 ? filteredOptions.map((opt) => {
+                      const isSelected = currentValue.includes(opt.value);
+                      return /* @__PURE__ */ jsx(
+                        "div",
+                        {
+                          onClick: (e) => {
+                            var _a;
+                            e.stopPropagation();
+                            handleToggleOption(opt.value);
+                            (_a = inputRef.current) == null ? void 0 : _a.focus();
+                          },
+                          className: cn(
+                            "w-full shrink-0 rounded-[4px] cursor-pointer transition-colors duration-100",
+                            isSelected ? "bg-primary-action-light" : "bg-popover hover:bg-disabled-bg"
+                          ),
+                          children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
+                            /* @__PURE__ */ jsx(
+                              "p",
+                              {
+                                className: cn(
+                                  "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic overflow-hidden text-[14px] text-ellipsis whitespace-nowrap",
+                                  isSelected ? "text-primary-action" : "text-foreground"
                                 ),
-                                /* @__PURE__ */ jsx(
-                                  "div",
+                                children: opt.label
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              "div",
+                              {
+                                className: cn(
+                                  "shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
+                                  "bg-transparent"
+                                ),
+                                children: isSelected && /* @__PURE__ */ jsx(
+                                  Check,
                                   {
-                                    className: cn(
-                                      "shrink-0 w-[16px] h-[16px] rounded-[3px] flex items-center justify-center transition-colors duration-100",
-                                      "bg-transparent"
-                                    ),
-                                    children: isSelected && /* @__PURE__ */ jsx(
-                                      Check,
-                                      {
-                                        size: 12,
-                                        weight: "bold",
-                                        className: "text-primary-action"
-                                      }
-                                    )
+                                    size: 12,
+                                    weight: "bold",
+                                    className: "text-primary-action"
                                   }
                                 )
-                              ] }) })
-                            },
-                            opt.value
-                          );
-                        }) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
-                      }
-                    )
+                              }
+                            )
+                          ] }) })
+                        },
+                        opt.value
+                      );
+                    }) : /* @__PURE__ */ jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsx("p", { className: "flex-1 min-w-0 min-h-[1px] leading-[20px] not-italic text-[14px] text-disabled", children: "No results found" }) }) }) })
                   }
                 )
-              ]
-            }
+              }
+            ),
+            document.body
           ),
           showBelow && /* @__PURE__ */ jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsx(
             "span",
@@ -3559,7 +3614,7 @@ const Input = forwardRef(function Input2({
     onBlurProp == null ? void 0 : onBlurProp(e);
     setFocused(false);
   };
-  const containerFlex = isFilled ? !hasRight ? "flex-col items-start justify-center" : rightIcon ? "flex items-center gap-[8px]" : "flex items-end gap-[8px]" : cn("flex items-center", hasRight && "gap-[8px]");
+  const containerFlex = isFilled ? !hasRight ? "flex-col items-start justify-center" : rightIcon ? "flex items-center gap-[8px]" : "flex items-center gap-[8px]" : cn("flex items-center", hasRight && "gap-[8px]");
   const inputCaretStyle = {
     caretColor: "var(--caret-color)"
   };
@@ -3568,7 +3623,8 @@ const Input = forwardRef(function Input2({
       "div",
       {
         className: cn(
-          "relative rounded-lg min-h-[48px]",
+          "relative rounded-lg",
+          isFilled ? "min-h-[48px]" : "h-[48px]",
           padding,
           bg,
           containerFlex
@@ -3645,7 +3701,7 @@ const Input = forwardRef(function Input2({
                     } : {
                       ...inputStyleProp,
                       color: "transparent",
-                      caretColor: isFocus ? "var(--caret-color)" : "transparent",
+                      caretColor: focused ? "var(--caret-color)" : "transparent",
                       padding: hasRight ? "12px 14px" : "14px",
                       fontSize: "16px",
                       lineHeight: "24px"
@@ -4037,16 +4093,16 @@ const Notification = forwardRef(
           style: { width: (mobileAlign == null ? void 0 : mobileAlign.width) ?? panelWidth },
           children: /* @__PURE__ */ jsxs("div", { className: "max-h-[480px] overflow-y-auto", children: [
             !hasItems && /* @__PURE__ */ jsx("div", { className: "px-4 py-8 text-center text-sm text-muted-foreground", children: emptyText }),
-            groups.map((group) => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { children: group.items.map((item) => /* @__PURE__ */ jsx(
+            groups.map((group, gi) => /* @__PURE__ */ jsx("div", { className: "w-full", children: /* @__PURE__ */ jsx("div", { children: group.items.map((item, ii) => /* @__PURE__ */ jsx(
               NotificationRow,
               {
                 item,
                 onItemClick: handleItemClick,
-                hideIndicator: clickedItemIds.has(item.id),
+                hideIndicator: item.id ? clickedItemIds.has(item.id) : false,
                 demoteNewBackground: wasDismissed
               },
-              item.id
-            )) }) }, group.label))
+              item.id ?? `${gi}-${ii}`
+            )) }) }, group.label ?? gi))
           ] })
         }
       ) })
@@ -4816,6 +4872,7 @@ const TableRow = forwardRef(
     selected = false,
     onSelectedChange,
     hoverable = true,
+    header: _header,
     onMouseEnter,
     onMouseLeave,
     ...props
@@ -4859,6 +4916,7 @@ const TableHeaderCell = forwardRef(
     fixed,
     fixedOffset = 0,
     fixedShadow,
+    contentAlign: _contentAlign,
     children = "Title text",
     style: styleProp,
     onClick: onClickProp,
@@ -5042,10 +5100,22 @@ const TableCell = forwardRef(function TableCell2({
     }
   );
 });
+const TableHead = forwardRef(
+  function TableHead2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("thead", { ref, className: cn("", className), ...props });
+  }
+);
+const TableBody = forwardRef(
+  function TableBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx("tbody", { ref, className: cn("", className), ...props });
+  }
+);
 Table.displayName = "Table";
 TableRow.displayName = "TableRow";
 TableHeaderCell.displayName = "TableHeaderCell";
 TableCell.displayName = "TableCell";
+TableHead.displayName = "TableHead";
+TableBody.displayName = "TableBody";
 const TextArea = forwardRef(
   function TextArea2({
     placeholder = "Text label",
@@ -5894,6 +5964,8 @@ const index = {
   Tag,
   StatusTag,
   Table,
+  TableHead,
+  TableBody,
   TableRow,
   TableHeaderCell,
   TableCell,
@@ -5923,7 +5995,9 @@ export {
   Tab,
   TabGroup,
   Table,
+  TableBody,
   TableCell,
+  TableHead,
   TableHeaderCell,
   TableRow,
   Tag,