lecom-ui 5.4.46 → 5.4.48

package/dist/components/Accordion/Accordion.js

@@ -31,7 +31,7 @@ const accordionVariants = cva(
 const Accordion = AccordionPrimitive.Root;
 const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Item, { ref, className: cn(className), ...props }));
 AccordionItem.displayName = "AccordionItem";
-const AccordionIcon = ({ disabled }) => {
+const AccordionIcon = ({ disabled, isOpen }) => {
   const { t } = useTranslation();
   const icon = /* @__PURE__ */ React.createElement(
     ChevronDown,
@@ -42,7 +42,7 @@ const AccordionIcon = ({ disabled }) => {
       )
     }
   );
-  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Typography, { className: "inline-flex" }, icon)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, /* @__PURE__ */ React.createElement(Typography, { className: "[[data-state=open]_&]:hidden" }, t("accordion.expand")), /* @__PURE__ */ React.createElement(Typography, { className: "hidden [[data-state=open]_&]:inline" }, t("accordion.collapse")))));
+  return /* @__PURE__ */ React.createElement(TooltipProvider, null, /* @__PURE__ */ React.createElement(Tooltip, null, /* @__PURE__ */ React.createElement(TooltipTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(Typography, { className: "inline-flex" }, icon)), /* @__PURE__ */ React.createElement(TooltipContent, { color: "black" }, isOpen ? t("accordion.collapse") : t("accordion.expand"))));
 };
 AccordionIcon.displayName = "AccordionIcon";
 const AccordionTrigger = React.forwardRef(
@@ -56,21 +56,43 @@ const AccordionTrigger = React.forwardRef(
     iconPosition = "right",
     iconDirection = "down-to-up",
     ...props
-  }, ref) => /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
-    AccordionPrimitive.Trigger,
-    {
-      ref,
-      className: cn(
-        accordionVariants({ variant, size, className }),
-        iconDirection === "down-to-up" && "[&[data-state=open]_svg]:rotate-180",
-        iconDirection === "right-to-down" && "[&_svg]:rotate-[-90deg] [&[data-state=open]_svg]:rotate-0"
-      ),
-      ...props,
-      disabled,
-      asChild
-    },
-    asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, iconPosition === "left" && /* @__PURE__ */ React.createElement(AccordionIcon, { disabled }), children, iconPosition === "right" && /* @__PURE__ */ React.createElement(AccordionIcon, { disabled }))
-  ))
+  }, ref) => {
+    const triggerRef = React.useRef(null);
+    const [isOpen, setIsOpen] = React.useState(false);
+    React.useEffect(() => {
+      const element = triggerRef.current;
+      if (!element) return;
+      const observer = new MutationObserver(() => {
+        setIsOpen(element.dataset.state === "open");
+      });
+      observer.observe(element, { attributes: true, attributeFilter: ["data-state"] });
+      setIsOpen(element.dataset.state === "open");
+      return () => observer.disconnect();
+    }, []);
+    return /* @__PURE__ */ React.createElement(AccordionPrimitive.Header, null, /* @__PURE__ */ React.createElement(
+      AccordionPrimitive.Trigger,
+      {
+        ref: (node) => {
+          triggerRef.current = node;
+          if (typeof ref === "function") {
+            ref(node);
+          } else if (ref) {
+            ref.current = node;
+          }
+        },
+        className: cn(
+          "group",
+          accordionVariants({ variant, size, className }),
+          iconDirection === "down-to-up" && "[&[data-state=open]_svg]:rotate-180",
+          iconDirection === "right-to-down" && "[&_svg]:rotate-[-90deg] [&[data-state=open]_svg]:rotate-0"
+        ),
+        ...props,
+        disabled,
+        asChild
+      },
+      asChild ? children : /* @__PURE__ */ React.createElement(React.Fragment, null, iconPosition === "left" && /* @__PURE__ */ React.createElement(AccordionIcon, { disabled, isOpen }), children, iconPosition === "right" && /* @__PURE__ */ React.createElement(AccordionIcon, { disabled, isOpen }))
+    ));
+  }
 );
 AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName;
 const AccordionContent = React.forwardRef(({ className, children, disabled = false, ...props }, ref) => /* @__PURE__ */ React.createElement(

package/dist/components/Button/Button.js

@@ -5,7 +5,7 @@ import { Spin } from '../Spin/Spin.js';
 import { CustomButton } from './CustomButton.js';
 
 const buttonVariants = cva(
-  "flex items-center justify-center gap-2 rounded-full font-roboto font-medium shadow-sm outline-none transition-all duration-300",
+  "flex items-center justify-center gap-2 rounded-full shadow-sm outline-none transition-all duration-300",
   {
     variants: {
       variant: {
@@ -15,10 +15,10 @@ const buttonVariants = cva(
         ghost: ""
       },
       size: {
-        small: "h-8 px-3 py-2 text-sm leading-none [&>svg]:w-5 [&>svg]:h-5",
-        medium: "h-10 px-4 py-3 text-sm leading-none [&>svg]:w-5 [&>svg]:h-5",
-        large: "h-12 px-5 py-4 text-base leading-none [&>svg]:w-5 [&>svg]:h-5",
-        extraLarge: "h-14 px-6 py-5 text-base leading-none [&>svg]:w-6 [&>svg]:h-6"
+        small: "h-8 px-3 py-2 text-sm leading-none [&>svg]:w-5 [&>svg]:h-5 body-medium-500",
+        medium: "h-10 px-4 py-3 text-sm leading-none [&>svg]:w-5 [&>svg]:h-5 body-medium-500",
+        large: "h-12 px-5 py-4 text-base leading-none [&>svg]:w-5 [&>svg]:h-5 body-large-500",
+        extraLarge: "h-14 px-6 py-5 text-base leading-none [&>svg]:w-6 [&>svg]:h-6 body-large-500"
       },
       color: {
         blue: "",

package/dist/components/Combobox/Combobox.js

@@ -57,7 +57,7 @@ const getFontVariant = (size) => {
   return sizeMap[size ?? "medium"];
 };
 const comboboxItemVariants = cva(
-  "text-grey-800 flex items-center justify-start gap-2 hover:bg-grey-50 hover:cursor-pointer py-1 w-full",
+  "text-grey-800 flex items-center justify-start gap-2 hover:bg-grey-50 hover:cursor-pointer py-1 w-full min-w-0",
   {
     variants: {
       size: {
@@ -140,7 +140,7 @@ const ComboboxItemContent = ({
         variant: fontVariant,
         className: cn(
           textColor,
-          "whitespace-normal flex items-center justify-center break-words"
+          "whitespace-normal min-w-0 break-words"
         )
       },
       option.label
@@ -394,6 +394,84 @@ const ComboboxTriggerButton = React.forwardRef(
   }
 );
 ComboboxTriggerButton.displayName = "ComboboxTriggerButton";
+function ComboboxPopoverContent({
+  dynamicHeightRef,
+  dynamicHeightStyle,
+  contentClassName,
+  side,
+  preferredSide,
+  dynamicHeight,
+  showSearch,
+  searchTerm,
+  t,
+  size,
+  search,
+  setSearch,
+  commandListRef,
+  showCreateOption,
+  onCreateOption,
+  handleClose,
+  notFoundContent,
+  filteredOptions,
+  value,
+  onChange,
+  itemsClassName,
+  matchTriggerWidth
+}) {
+  return /* @__PURE__ */ React.createElement(
+    PopoverContent,
+    {
+      ref: dynamicHeightRef,
+      style: dynamicHeightStyle,
+      className: cn(
+        " pt-0 px-1 pb-1 flex flex-col",
+        matchTriggerWidth && "w-[var(--radix-popover-trigger-width)]",
+        contentClassName
+      ),
+      side: side ?? (dynamicHeight ? preferredSide : "bottom"),
+      avoidCollisions: true,
+      onWheel: (e) => e.stopPropagation()
+    },
+    /* @__PURE__ */ React.createElement(Command, { shouldFilter: false, className: cn(SEARCH_INPUT_CLASSES[size], "max-h-full flex flex-col") }, showSearch && /* @__PURE__ */ React.createElement(
+      CommandInput,
+      {
+        placeholder: searchTerm || t("multiSelect.search"),
+        value: search,
+        onValueChange: setSearch
+      }
+    ), /* @__PURE__ */ React.createElement(
+      CommandList,
+      {
+        ref: commandListRef,
+        key: search,
+        className: cn(
+          "flex-1 overflow-y-auto overflow-x-hidden",
+          "[&::-webkit-scrollbar]:w-1.5",
+          "[&::-webkit-scrollbar-track]:bg-transparent",
+          "[&::-webkit-scrollbar-thumb]:bg-grey-300",
+          "[&::-webkit-scrollbar-thumb]:rounded-full",
+          "[&::-webkit-scrollbar-thumb]:hover:bg-grey-400",
+          dynamicHeight ? "max-h-none" : "max-h-44"
+        )
+      },
+      /* @__PURE__ */ React.createElement(
+        ComboboxContent,
+        {
+          showCreateOption,
+          search,
+          onCreateOption,
+          onClose: handleClose,
+          size,
+          notFoundContent,
+          filteredOptions,
+          value,
+          onChange,
+          itemsClassName
+        }
+      )
+    ))
+  );
+}
 function Combobox({
   options,
   value,
@@ -411,19 +489,23 @@ function Combobox({
   size = "medium",
   allowCreate = false,
   onCreateOption,
+  matchTriggerWidth = true,
+  modalPopover = false,
+  side,
   dynamicHeight = true,
-  dynamicHeightBottomPadding = 50,
-  dynamicHeightMinHeight = 120,
-  modalPopover = false
+  dynamicHeightBottomPadding,
+  dynamicHeightMinHeight
 }) {
   const { t } = useTranslation();
   const [open, setOpen] = React.useState(false);
   const [search, setSearch] = React.useState("");
   const commandListRef = React.useRef(null);
-  const { ref: dynamicHeightRef, style: dynamicHeightStyle } = useDynamicMaxHeight({
+  const triggerRef = React.useRef(null);
+  const { ref: dynamicHeightRef, style: dynamicHeightStyle, preferredSide } = useDynamicMaxHeight({
     enabled: open && dynamicHeight,
     bottomPadding: dynamicHeightBottomPadding,
-    minHeight: dynamicHeightMinHeight
+    minHeight: dynamicHeightMinHeight,
+    triggerRef
   });
   const lastOpenOptionsRef = React.useRef(options);
   React.useEffect(() => {
@@ -455,6 +537,7 @@ function Combobox({
   return /* @__PURE__ */ React.createElement(Popover, { open, onOpenChange: handleOpenChange, modal: modalPopover }, /* @__PURE__ */ React.createElement(PopoverTrigger, { asChild: true }, /* @__PURE__ */ React.createElement(
     ComboboxTriggerButton,
     {
+      ref: triggerRef,
       open,
       disabled,
       value,
@@ -466,52 +549,31 @@ function Combobox({
       size
     }
   )), /* @__PURE__ */ React.createElement(
-    PopoverContent,
+    ComboboxPopoverContent,
     {
-      ref: dynamicHeightRef,
-      style: dynamicHeightStyle,
-      className: cn(
-        "w-[var(--radix-popover-trigger-width)] pt-0 px-1 pb-1 flex flex-col z-40",
-        contentClassName
-      )
-    },
-    /* @__PURE__ */ React.createElement(Command, { shouldFilter: false, className: SEARCH_INPUT_CLASSES[size] }, showSearch && /* @__PURE__ */ React.createElement(
-      CommandInput,
-      {
-        placeholder: searchTerm || t("multiSelect.search"),
-        value: search,
-        onValueChange: setSearch
-      }
-    ), /* @__PURE__ */ React.createElement(
-      CommandList,
-      {
-        ref: commandListRef,
-        key: search,
-        className: cn(
-          "overflow-y-auto overflow-x-hidden",
-          "[&::-webkit-scrollbar]:w-1.5",
-          "[&::-webkit-scrollbar-track]:bg-transparent",
-          "[&::-webkit-scrollbar-thumb]:bg-grey-300",
-          "[&::-webkit-scrollbar-thumb]:rounded-full",
-          "[&::-webkit-scrollbar-thumb]:hover:bg-grey-400"
-        )
-      },
-      /* @__PURE__ */ React.createElement(
-        ComboboxContent,
-        {
-          showCreateOption,
-          search,
-          onCreateOption,
-          onClose: handleClose,
-          size,
-          notFoundContent,
-          filteredOptions,
-          value,
-          onChange,
-          itemsClassName
-        }
-      )
-    ))
+      dynamicHeightRef,
+      dynamicHeightStyle,
+      contentClassName,
+      side,
+      preferredSide,
+      dynamicHeight,
+      showSearch,
+      searchTerm,
+      t,
+      size,
+      search,
+      setSearch,
+      commandListRef,
+      showCreateOption,
+      onCreateOption,
+      handleClose,
+      notFoundContent,
+      filteredOptions,
+      value,
+      onChange,
+      itemsClassName,
+      matchTriggerWidth
+    }
   ));
 }
 

package/dist/components/CustomTagInput/CustomTagInput.js

@@ -54,6 +54,10 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
   }, [editValue, item.id, item.label, onEdit]);
   const handleKeyDown = React.useCallback(
     (e) => {
+      if (e.key === ";") {
+        e.preventDefault();
+        return;
+      }
       if (e.key === "Enter") {
         e.preventDefault();
         handleSave();
@@ -90,7 +94,7 @@ const CustomTagItemComponent = React.memo(function CustomTagItemComponent2({
         type: "text",
         value: editValue,
         onChange: (e) => {
-          let newValue = e.target.value;
+          let newValue = e.target.value.replace(/;/g, "");
           if (maxEditLength !== void 0 && newValue.length > maxEditLength) {
             newValue = newValue.slice(0, maxEditLength);
           }

package/dist/components/MultiSelect/MultiSelect.js

@@ -47,7 +47,7 @@ const MultiSelect = React.forwardRef(
     maxCount,
     modalPopover = false,
     className,
-    side = "bottom",
+    side,
     treeOptions,
     treeSelectionStrategy = "leaf",
     selectAllLabel,
@@ -66,8 +66,8 @@ const MultiSelect = React.forwardRef(
     readOnly = false,
     status = "default",
     dynamicHeight = true,
-    dynamicHeightBottomPadding = 50,
-    dynamicHeightMinHeight = 120
+    dynamicHeightBottomPadding,
+    dynamicHeightMinHeight
   }, ref) => {
     const { t } = useTranslation();
     const [selectedValues, setSelectedValues] = React.useState(value);
@@ -77,10 +77,11 @@ const MultiSelect = React.forwardRef(
       selectedValues.length || 1
     );
     const buttonRef = React.useRef(null);
-    const { ref: dynamicHeightRef, style: dynamicHeightStyle } = useDynamicMaxHeight({
+    const { ref: dynamicHeightRef, style: dynamicHeightStyle, preferredSide } = useDynamicMaxHeight({
       enabled: dynamicHeight && isPopoverOpen,
       bottomPadding: dynamicHeightBottomPadding,
-      minHeight: dynamicHeightMinHeight
+      minHeight: dynamicHeightMinHeight,
+      triggerRef: buttonRef
     });
     React.useEffect(() => {
       const shallowEqual = (a, b) => {
@@ -638,19 +639,21 @@ const MultiSelect = React.forwardRef(
           ref: dynamicHeightRef,
           style: dynamicHeightStyle,
           className: cn(
-            "p-0 flex flex-col overflow-hidden z-40",
+            "p-0 flex flex-col overflow-hidden",
             matchTriggerWidth && "w-[var(--radix-popover-trigger-width)]",
+            !dynamicHeight && "max-h-80",
             classNameContent
           ),
-          side,
+          side: side ?? (dynamicHeight ? preferredSide : "bottom"),
           align: "start",
+          avoidCollisions: true,
           onEscapeKeyDown: () => setIsPopoverOpen(false)
         },
         !isTree && /* @__PURE__ */ React.createElement(
           Command,
           {
             shouldFilter: false,
-            className: cn(SEARCH_INPUT_CLASSES[size], "max-h-full flex flex-col")
+            className: cn("max-h-full flex flex-col", SEARCH_INPUT_CLASSES[size])
           },
           /* @__PURE__ */ React.createElement(
             CommandInput,
@@ -665,7 +668,7 @@ const MultiSelect = React.forwardRef(
           /* @__PURE__ */ React.createElement(
             CommandList,
             {
-              className: "[&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-grey-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-grey-400"
+              className: cn("flex-1 [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-grey-300 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-grey-400", dynamicHeight && "max-h-none")
             },
             /* @__PURE__ */ React.createElement(CommandGroup, null, (effectiveOptions.length === 0 || query && filteredOptions.length === 0) && /* @__PURE__ */ React.createElement(
               CommandEmpty,
@@ -756,11 +759,11 @@ const MultiSelect = React.forwardRef(
                         }
                       )
                     ),
-                    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 truncate min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
+                    /* @__PURE__ */ React.createElement("div", { className: "flex items-center gap-2 min-w-0" }, option.prefix && /* @__PURE__ */ React.createElement(Typography, { className: "flex items-center flex-shrink-0" }, option.prefix), /* @__PURE__ */ React.createElement(
                       Typography,
                       {
                         variant: getFontVariant(size),
-                        className: "text-grey-800 break-words"
+                        className: "text-grey-800 whitespace-normal min-w-0 break-words"
                       },
                       highlight(option.label, query)
                     ))
@@ -801,7 +804,7 @@ const MultiSelect = React.forwardRef(
                   Typography,
                   {
                     variant: getFontVariant(size),
-                    className: "text-grey-800 break-words"
+                    className: "text-grey-800 whitespace-normal min-w-0 break-words"
                   },
                   highlight(option.label, query)
                 ))
@@ -809,7 +812,7 @@ const MultiSelect = React.forwardRef(
             }))
           )
         ),
-        isTree && /* @__PURE__ */ React.createElement("div", { className: "min-w-[260px] overflow-hidden flex flex-col max-h-full flex-1" }, treeSearch && /* @__PURE__ */ React.createElement("div", { className: "px-1 pt-2 pb-0 border-b border-grey-300 flex-shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
+        isTree && /* @__PURE__ */ React.createElement("div", { className: cn("min-w-[260px] overflow-hidden flex flex-col flex-1", dynamicHeight ? "max-h-full" : "max-h-80") }, treeSearch && /* @__PURE__ */ React.createElement("div", { className: "px-1 pt-2 pb-0 border-b border-grey-300 flex-shrink-0" }, /* @__PURE__ */ React.createElement("div", { className: "relative" }, /* @__PURE__ */ React.createElement(
           "svg",
           {
             className: "absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground",

package/dist/components/Tooltip/Tooltip.js

@@ -9,7 +9,7 @@ const TooltipTrigger = TooltipPrimitive.Trigger;
 const TooltipArrow = TooltipPrimitive.Arrow;
 const TooltipPortal = TooltipPrimitive.Portal;
 const tooltipContentVariants = cva(
-  "z-50 overflow-hidden rounded-lg px-3 py-2 max-w-80 body-small-500 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+  "z-[100] overflow-hidden rounded-lg px-3 py-2 max-w-80 body-small-500 shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
   {
     variants: {
       color: {
@@ -45,7 +45,7 @@ const TooltipContent = React.forwardRef(
     className,
     children,
     ...props
-  }, ref) => /* @__PURE__ */ React.createElement(
+  }, ref) => /* @__PURE__ */ React.createElement(TooltipPortal, null, /* @__PURE__ */ React.createElement(
     TooltipPrimitive.Content,
     {
       ref,
@@ -58,7 +58,7 @@ const TooltipContent = React.forwardRef(
     },
     children,
     arrow && /* @__PURE__ */ React.createElement(TooltipArrow, { className: "tooltip-arrow", width: 12, height: 6 })
-  )
+  ))
 );
 TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 

package/dist/hooks/useDynamicMaxHeight.js

@@ -1,50 +1,119 @@
 import * as React from 'react';
 
-const DEFAULT_BOTTOM_PADDING = 50;
+const DEFAULT_BOTTOM_PADDING = 25;
 const DEFAULT_MIN_HEIGHT = 120;
+function findDialogContainer(element) {
+  if (!element) return null;
+  let current = element;
+  while (current) {
+    if (current.hasAttribute("data-radix-dialog-content")) {
+      return current;
+    }
+    if (current.getAttribute("role") === "dialog") {
+      const isInsidePopover = current.closest("[data-radix-popper-content-wrapper]");
+      if (!isInsidePopover) {
+        return current;
+      }
+    }
+    if (current.classList.contains("dialog-content") || current.classList.contains("modal-content")) {
+      return current;
+    }
+    current = current.parentElement;
+  }
+  return null;
+}
 function useDynamicMaxHeight(options = {}) {
   const {
     enabled = false,
     bottomPadding = DEFAULT_BOTTOM_PADDING,
-    minHeight = DEFAULT_MIN_HEIGHT
+    minHeight = DEFAULT_MIN_HEIGHT,
+    triggerRef,
+    detectDialogContainer = true
   } = options;
+  const minHeightToFlip = minHeight ?? DEFAULT_MIN_HEIGHT;
   const ref = React.useRef(null);
   const [maxHeight, setMaxHeight] = React.useState(
     void 0
   );
+  const [preferredSide, setPreferredSide] = React.useState("bottom");
+  const [isInsideDialog, setIsInsideDialog] = React.useState(false);
   const lastCalculatedHeight = React.useRef(void 0);
-  React.useEffect(() => {
-    if (!enabled) {
-      return;
+  const cachedDialogRef = React.useRef(null);
+  const initialHeightRef = React.useRef(void 0);
+  const calculateHeight = React.useCallback(() => {
+    const triggerElement = triggerRef?.current;
+    if (!triggerElement) return;
+    let dialogElement = null;
+    if (detectDialogContainer) {
+      if (!cachedDialogRef.current) {
+        cachedDialogRef.current = findDialogContainer(triggerElement);
+      }
+      dialogElement = cachedDialogRef.current;
+    }
+    const triggerRect = triggerElement.getBoundingClientRect();
+    let boundaryTop;
+    let boundaryBottom;
+    let boundaryHeight;
+    if (dialogElement) {
+      const containerRect = dialogElement.getBoundingClientRect();
+      const dialogPadding = 24;
+      boundaryTop = containerRect.top + dialogPadding;
+      boundaryBottom = containerRect.bottom - dialogPadding;
+      boundaryHeight = boundaryBottom - boundaryTop;
+    } else {
+      boundaryTop = 0;
+      boundaryBottom = window.innerHeight;
+      boundaryHeight = window.innerHeight;
     }
-    const calculateHeight = () => {
-      if (!ref.current) return;
-      const rect = ref.current.getBoundingClientRect();
-      const viewportHeight = window.innerHeight;
-      const elementTop = rect.top;
-      const adjustedBottomPadding = viewportHeight < 500 ? 10 : bottomPadding;
-      const availableHeight = viewportHeight - elementTop - adjustedBottomPadding;
-      const finalHeight = Math.max(availableHeight, minHeight);
+    const triggerBottom = triggerRect.bottom;
+    const triggerTop = triggerRect.top;
+    const insideDialog = !!dialogElement;
+    setIsInsideDialog(insideDialog);
+    const effectiveBottomPadding = insideDialog ? 0 : bottomPadding;
+    const adjustedBottomPadding = boundaryHeight < 500 ? 10 : effectiveBottomPadding;
+    const adjustedMinBeforeFlip = insideDialog ? 0 : minHeightToFlip;
+    const spaceBelow = boundaryBottom - triggerBottom;
+    const spaceAbove = triggerTop - boundaryTop;
+    let finalHeight;
+    if (spaceBelow >= adjustedMinBeforeFlip + adjustedBottomPadding) {
+      setPreferredSide("bottom");
+      const availableHeight = spaceBelow - adjustedBottomPadding;
+      finalHeight = Math.max(availableHeight, minHeight);
+    } else {
+      setPreferredSide("top");
+      const availableHeight = spaceAbove - adjustedBottomPadding;
+      finalHeight = Math.max(availableHeight, minHeight);
+    }
+    if (initialHeightRef.current === void 0) {
+      initialHeightRef.current = finalHeight;
       lastCalculatedHeight.current = finalHeight;
       setMaxHeight(finalHeight);
-    };
-    requestAnimationFrame(() => {
-      requestAnimationFrame(() => {
+    }
+  }, [triggerRef, detectDialogContainer, bottomPadding, minHeight, minHeightToFlip]);
+  React.useLayoutEffect(() => {
+    if (!enabled) {
+      cachedDialogRef.current = null;
+      initialHeightRef.current = void 0;
+      setMaxHeight(void 0);
+      return;
+    }
+    cachedDialogRef.current = null;
+    initialHeightRef.current = void 0;
+    calculateHeight();
+    const rafId = requestAnimationFrame(() => {
+      if (initialHeightRef.current === void 0) {
         calculateHeight();
-      });
+      }
     });
-    window.addEventListener("resize", calculateHeight);
-    window.addEventListener("scroll", calculateHeight, true);
     return () => {
-      window.removeEventListener("resize", calculateHeight);
-      window.removeEventListener("scroll", calculateHeight, true);
+      cancelAnimationFrame(rafId);
     };
-  }, [enabled, bottomPadding, minHeight]);
+  }, [enabled, calculateHeight]);
   const style = React.useMemo(() => {
     if (maxHeight === void 0) return {};
     return { maxHeight: `${maxHeight}px` };
   }, [maxHeight]);
-  return { ref, maxHeight, style };
+  return { ref, maxHeight, style, preferredSide, isInsideDialog };
 }
 
 export { useDynamicMaxHeight };