lecom-ui 5.4.46 → 5.4.47

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 };

package/dist/index.d.ts

@@ -792,8 +792,8 @@ interface HeaderProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<
 
 declare const inputVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "small" | "default" | "large" | null | undefined;
-    radius?: "small" | "default" | "large" | "full" | null | undefined;
+    size?: "default" | "small" | "large" | null | undefined;
+    radius?: "default" | "small" | "large" | "full" | null | undefined;
     status?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface InputProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, 'size' | 'sufix' | 'prefix'>, VariantProps<typeof inputVariants> {
@@ -1010,7 +1010,7 @@ declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimi
 declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 
 declare const ResizablePanelGroup: ({ className, ...props }: React$1.ComponentProps<typeof ResizablePrimitive.PanelGroup>) => React$1.JSX.Element;
-declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLInputElement | HTMLHeadingElement | HTMLParagraphElement | HTMLLabelElement | HTMLUListElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLVideoElement>, "id" | "onResize"> & {
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLDivElement | HTMLElement | HTMLButtonElement | HTMLOListElement | HTMLLIElement | HTMLAnchorElement | HTMLSpanElement | HTMLLabelElement | HTMLParagraphElement | HTMLHeadingElement | HTMLInputElement | HTMLObjectElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableCaptionElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDialogElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLFormElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLImageElement | HTMLLegendElement | HTMLLinkElement | HTMLMapElement | HTMLMenuElement | HTMLMetaElement | HTMLMeterElement | HTMLOptGroupElement | HTMLOptionElement | HTMLOutputElement | HTMLPictureElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSlotElement | HTMLSourceElement | HTMLStyleElement | HTMLTableElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTemplateElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTitleElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement>, "id" | "onResize"> & {
     className?: string;
     collapsedSize?: number | undefined;
     collapsible?: boolean | undefined;
@@ -1177,8 +1177,8 @@ declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.
 
 declare const textareaVariants: (props?: ({
     variant?: "default" | "filled" | "borderless" | null | undefined;
-    size?: "small" | "default" | "large" | null | undefined;
-    radius?: "small" | "default" | "large" | "full" | null | undefined;
+    size?: "default" | "small" | "large" | null | undefined;
+    radius?: "default" | "small" | "large" | "full" | null | undefined;
     resize?: "default" | "both" | "horizontal" | "vertical" | "vertical-limited" | null | undefined;
     status?: "default" | "error" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
@@ -1251,12 +1251,14 @@ type ComboboxProps = {
     size?: ComboboxSize;
     allowCreate?: boolean;
     onCreateOption?: (inputValue: string) => void;
+    matchTriggerWidth?: boolean;
+    modalPopover?: boolean;
+    side?: 'top' | 'right' | 'bottom' | 'left';
     dynamicHeight?: boolean;
     dynamicHeightBottomPadding?: number;
     dynamicHeightMinHeight?: number;
-    modalPopover?: boolean;
 };
-declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, itemsClassName, rounded, showSearch, size, allowCreate, onCreateOption, dynamicHeight, dynamicHeightBottomPadding, dynamicHeightMinHeight, modalPopover, }: ComboboxProps): React$1.JSX.Element;
+declare function Combobox({ options, value, onChange, placeholder, disabled, notFoundContent, status, searchTerm, triggerClassName, contentClassName, itemsClassName, rounded, showSearch, size, allowCreate, onCreateOption, matchTriggerWidth, modalPopover, side, dynamicHeight, dynamicHeightBottomPadding, dynamicHeightMinHeight, }: ComboboxProps): React$1.JSX.Element;
 
 interface TagItem {
     label: string;