@sarunyu/system-one 4.9.23 → 4.9.24

package/dist/index.cjs

@@ -9,6 +9,7 @@ const react = require("@phosphor-icons/react");
 const reactDayPicker = require("react-day-picker");
 const Popover = require("@radix-ui/react-popover");
 const vaul = require("vaul");
+const reactDom = require("react-dom");
 function _interopNamespaceDefault(e) {
   const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
   if (e) {
@@ -2656,6 +2657,9 @@ const Dropdown = React.forwardRef(
     const [search, setSearch] = React.useState("");
     const containerRef = React.useRef(null);
     const inputRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const [menuStyle, setMenuStyle] = React.useState({});
     const controlled = value !== void 0;
     const currentValue = controlled ? value : internalValue;
     const isDisabled = forceState === "disabled";
@@ -2686,12 +2690,29 @@ const Dropdown = React.forwardRef(
     React.useEffect(() => {
       if (!open) setSearch("");
     }, [open]);
+    const updateMenuPosition = React.useCallback(() => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      setMenuStyle({ position: "fixed", top: rect.bottom + 4, left: rect.left, width: rect.width });
+    }, []);
+    React.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]);
     React.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);
@@ -2731,6 +2752,7 @@ const Dropdown = React.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
+              ref: triggerRef,
               onClick: handleToggle,
               className: cn(
                 "relative flex gap-2 items-center rounded-lg px-3.5",
@@ -2887,46 +2909,52 @@ const Dropdown = React.forwardRef(
                     }
                   )
                 ),
-                isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22, className: cn("shrink-0", caretClassName) }),
-                open && !forceState && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22, className: cn("shrink-0", caretClassName) }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22, className: cn("shrink-0", caretClassName) })
+              ]
+            }
+          ),
+          open && !forceState && options.length > 0 && reactDom.createPortal(
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                      "div",
+                    children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-3.5 relative w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: "flex-1 min-w-0", style: { color: leftColor }, children: leftText }) })
         ]
@@ -3114,6 +3142,9 @@ const DropdownMultiple = React.forwardRef(
     const containerRef = React.useRef(null);
     const inputRef = React.useRef(null);
     const measureRef = React.useRef(null);
+    const triggerRef = React.useRef(null);
+    const menuRef = React.useRef(null);
+    const [menuStyle, setMenuStyle] = React.useState({});
     React.useImperativeHandle(ref, () => containerRef.current);
     const controlled = value !== void 0;
     const currentValue = controlled ? value : internalValue;
@@ -3159,12 +3190,29 @@ const DropdownMultiple = React.forwardRef(
     React.useEffect(() => {
       if (!open) setSearch("");
     }, [open]);
+    const updateMenuPosition = React.useCallback(() => {
+      if (!triggerRef.current) return;
+      const rect = triggerRef.current.getBoundingClientRect();
+      setMenuStyle({ position: "fixed", top: rect.bottom + 4, left: rect.left, width: rect.width });
+    }, []);
+    React.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]);
     React.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);
@@ -3398,6 +3446,7 @@ const DropdownMultiple = React.forwardRef(
           /* @__PURE__ */ jsxRuntime.jsxs(
             "div",
             {
+              ref: triggerRef,
               onClick: handleTriggerClick,
               className: cn(
                 "relative flex gap-[8px] items-center rounded-[8px]",
@@ -3433,76 +3482,82 @@ const DropdownMultiple = React.forwardRef(
                     )
                   }
                 ),
-                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22 }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22 }) }),
-                open && !isStatic && options.length > 0 && /* @__PURE__ */ jsxRuntime.jsx(
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", style: { color: caretColor }, children: isFocus ? /* @__PURE__ */ jsxRuntime.jsx(react.CaretUp, { size: 22 }) : /* @__PURE__ */ jsxRuntime.jsx(react.CaretDown, { size: 22 }) })
+              ]
+            }
+          ),
+          open && !isStatic && options.length > 0 && reactDom.createPortal(
+            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
-                                /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-[8px] p-[14px] relative w-full", children: [
+                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-                                  "div",
+                                children: opt.label
+                              }
+                            ),
+                            /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
+                                  react.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__ */ jsxRuntime.jsx(
-                                      react.Check,
-                                      {
-                                        size: 12,
-                                        weight: "bold",
-                                        className: "text-primary-action"
-                                      }
-                                    )
+                                    size: 12,
+                                    weight: "bold",
+                                    className: "text-primary-action"
                                   }
                                 )
-                              ] }) })
-                            },
-                            opt.value
-                          );
-                        }) : /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "w-full shrink-0 bg-popover", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row items-center size-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex items-center p-[14px] relative w-full", children: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx("div", { className: "flex items-start px-[4px] text-[12px] leading-[16px]", children: /* @__PURE__ */ jsxRuntime.jsx(
             "span",
@@ -3578,7 +3633,7 @@ const Input = React.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)"
   };
@@ -3587,7 +3642,8 @@ const Input = React.forwardRef(function Input2({
       "div",
       {
         className: cn(
-          "relative rounded-lg min-h-[48px]",
+          "relative rounded-lg",
+          isFilled ? "min-h-[48px]" : "h-[48px]",
           padding,
           bg,
           containerFlex
@@ -3664,7 +3720,7 @@ const Input = React.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"
@@ -4835,6 +4891,7 @@ const TableRow = React.forwardRef(
     selected = false,
     onSelectedChange,
     hoverable = true,
+    header: _header,
     onMouseEnter,
     onMouseLeave,
     ...props
@@ -4878,6 +4935,7 @@ const TableHeaderCell = React.forwardRef(
     fixed,
     fixedOffset = 0,
     fixedShadow,
+    contentAlign: _contentAlign,
     children = "Title text",
     style: styleProp,
     onClick: onClickProp,
@@ -5061,10 +5119,22 @@ const TableCell = React.forwardRef(function TableCell2({
     }
   );
 });
+const TableHead = React.forwardRef(
+  function TableHead2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.jsx("thead", { ref, className: cn("", className), ...props });
+  }
+);
+const TableBody = React.forwardRef(
+  function TableBody2({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsxRuntime.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 = React.forwardRef(
   function TextArea2({
     placeholder = "Text label",
@@ -5913,6 +5983,8 @@ const index = {
   Tag,
   StatusTag,
   Table,
+  TableHead,
+  TableBody,
   TableRow,
   TableHeaderCell,
   TableCell,
@@ -5941,7 +6013,9 @@ exports.StatusTag = StatusTag;
 exports.Tab = Tab;
 exports.TabGroup = TabGroup;
 exports.Table = Table;
+exports.TableBody = TableBody;
 exports.TableCell = TableCell;
+exports.TableHead = TableHead;
 exports.TableHeaderCell = TableHeaderCell;
 exports.TableRow = TableRow;
 exports.Tag = Tag;