@g4rcez/components 0.2.4 → 0.2.5

package/dist/preset/src/styles/common.js

@@ -18,7 +18,7 @@ export var spacing = {
 };
 export var zIndex = {
     normal: "1",
-    navbar: "19",
+    navbar: "22",
     calendar: "2",
     overlay: "21",
     tooltip: "20",

package/dist/src/components/floating/modal.js

@@ -8,7 +8,7 @@ import { AnimatePresence, motion, useMotionValue } from "motion/react";
 import { Fragment, useId } from "react";
 import { useMediaQuery } from "../../hooks/use-media-query";
 import { useRemoveScroll } from "../../hooks/use-remove-scroll";
-import { css } from "../../lib/dom";
+import { css, mergeRefs } from "../../lib/dom";
 const animationDuration = "600ms";
 const drawerLeft = {
     exit: { translateX: ["0%", "-30%"], opacity: 0, animationDuration },
@@ -86,7 +86,7 @@ const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
     return forceType ? positions[type] : positions.sheet;
 };
 export const Modal = ({ open, title, footer, asChild, trigger, children, layoutId, onChange, className, resizer = true, closable = true, forceType = false, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, ariaTitle, ...props }) => {
-    useRemoveScroll(open);
+    const removeScrollRef = useRemoveScroll(open, "overflow-hidden");
     const headingId = useId();
     const descriptionId = useId();
     const isDesktop = useMediaQuery("(min-width: 64rem)");
@@ -103,7 +103,7 @@ export const Modal = ({ open, title, footer, asChild, trigger, children, layoutI
     const Trigger = trigger;
     const floatingSize = useMotionValue(undefined);
     const onClose = () => onChange(false);
-    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", initial: "initial", variants: animation, "data-component": "modal", ref: refs.setFloating, "aria-modal": open, layoutId: layoutId, className: css(variants({ position, type }), className), style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, ...(title
+    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: refs.setReference, ...getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: refs.setReference, ...getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { children: _jsx(AnimatePresence, { mode: "wait", presenceAffectsLayout: true, children: open ? (_jsx(FloatingOverlay, { lockScroll: false, className: css(`inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70 ${type === "drawer" ? "" : "flex items-start justify-center p-10"}`, overlayClassName), children: _jsx(FloatingFocusManager, { visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: context, children: _jsxs(motion.div, { ...props, exit: "exit", animate: "enter", "aria-modal": open, initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", ref: mergeRefs(refs.setFloating, removeScrollRef), className: css(variants({ position, type }), className), style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, ...(title
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,

package/dist/src/components/form/autocomplete.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAOzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAiCF,eAAO,MAAM,YAAY,yGAyWxB,CAAC"}
+{"version":3,"file":"autocomplete.d.ts","sourceRoot":"","sources":["../../../../src/components/form/autocomplete.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAAoF,MAAM,OAAO,CAAC;AAQzG,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AACpC,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,qBAAqB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAErF,MAAM,MAAM,iBAAiB,GAAG,IAAI,CAAC,eAAe,CAAC,OAAO,CAAC,EAAE,OAAO,CAAC,GAAG;IACtE,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,qBAAqB,EAAE,CAAC;CACpC,CAAC;AAmCF,eAAO,MAAM,YAAY,yGA4VxB,CAAC"}

package/dist/src/components/form/autocomplete.js

@@ -8,8 +8,9 @@ import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { Virtuoso } from "react-virtuoso";
 import { Is } from "sidekicker";
+import { useRemoveScroll } from "../../hooks/use-remove-scroll";
 import { useTranslations } from "../../hooks/use-translations";
-import { css, dispatchInput, initializeInputDataset } from "../../lib/dom";
+import { css, dispatchInput, getRemainingSize, initializeInputDataset, mergeRefs } from "../../lib/dom";
 import { safeRegex } from "../../lib/fns";
 import { InputField } from "./input-field";
 const Frag = (props) => _jsx(Fragment, { children: props.children });
@@ -22,20 +23,20 @@ const transitionStyles = {
 const fuzzyOptions = { caseSensitive: false, sort: false };
 const emptyRef = [];
 const List = forwardRef(function VirtualList(props, ref) {
-    return (_jsx(motion.ul, { ...props, ref: ref, className: "w-full rounded-lg border-b border-tooltip-border last:border-transparent", children: _jsx(AnimatePresence, { children: props.children }) }));
+    return (_jsx(motion.ul, { ...props, ref: ref, className: "w-full overscroll-contain rounded-lg border-b border-tooltip-border last:border-transparent", children: _jsx(AnimatePresence, { children: props.children }) }));
 });
 const Item = forwardRef(function VirtualItem({ item, context, ...props }, ref) {
     return _jsx(motion.li, { ...props, ref: ref, className: "first:rounded-t-lg last:rounded-t-lg" });
 });
 const components = { List, Item };
-const DEFAULT_SIZE = 320;
 const MIN_SIZE = 40;
 export const Autocomplete = forwardRef(({ left, error, right, loading, options, container, rightLabel, interactive, emptyMessage, optionalText, labelClassName, feedback = null, hideLeft = false, required = false, dynamicOption = false, ...props }, externalRef) => {
+    const scroller = useRef(null);
     const fieldset = useRef(null);
     const virtuoso = useRef(null);
     const defaults = props.value ?? props.defaultValue ?? "";
     const translation = useTranslations();
-    const [h, setH] = useState(() => Math.min(DEFAULT_SIZE, MIN_SIZE * options.length));
+    const [h, setH] = useState(() => Math.min(320, MIN_SIZE * options.length));
     const [open, setOpen] = useState(false);
     const [shadow, setShadow] = useState("");
     const [value, setValue] = useState(defaults);
@@ -53,6 +54,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
         ]
         : options;
     const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
+    const removeScrollRef = useRemoveScroll(open, "block-only");
     const setClosed = () => {
         setOpen(false);
         setH(0);
@@ -61,35 +63,10 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
     const pattern = dynamicOption
         ? undefined
         : `^(${options.map((x) => `${safeRegex(x.value)}${x.label ? "|" + safeRegex(x.label) : ""}`).join("|")})$`;
-    useEffect(() => {
-        if (props.value) {
-            const item = options.find((x) => x.value === props.value);
-            setValue(item?.label ?? props.value);
-        }
-    }, [props.value]);
-    useEffect(() => {
-        if (!open)
-            setH(0);
-    }, [open]);
-    useEffect(() => {
-        if (!open)
-            return;
-        const ul = refs.floating;
-        if (ul.current === null)
-            return;
-        let size = 0;
-        const items = Array.from(ul.current.querySelectorAll("li")).slice(0, Math.min(displayList.length, 10));
-        items.forEach((x) => {
-            const rect = x.getBoundingClientRect();
-            size += rect.height;
-        });
-        const s = Math.min(size, DEFAULT_SIZE);
-        setH(s);
-    }, [shadow, open]);
     const { x, y, strategy, refs, context } = useFloating({
         open,
         transform: true,
-        strategy: "absolute",
+        placement: "bottom-start",
         onOpenChange: setOpen,
         whileElementsMounted: autoUpdate,
         middleware: [
@@ -97,22 +74,14 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             size({
                 padding: 10,
                 elementContext: "reference",
-                apply(a) {
-                    const w = fieldset.current.getBoundingClientRect().width;
-                    const ul = a.elements.floating.querySelector("ul");
+                apply(args) {
+                    const ul = args.elements.floating.querySelector("ul");
                     const fullSize = ul?.getBoundingClientRect().height || 0;
-                    const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE);
-                    flushSync(() => setTimeout(() => {
-                        const currentH = ul?.getBoundingClientRect().height ?? 0;
-                        if (currentH < MIN_SIZE)
-                            return void setH(maxH);
-                        return void setH(Math.min(currentH, DEFAULT_SIZE));
-                    }, 50));
-                    Object.assign(a.elements.floating.style, {
-                        width: `${w}px`,
-                        maxWidth: `${w}px`,
-                        maxHeight: `${DEFAULT_SIZE}`,
-                    });
+                    const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
+                    const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE, args.availableHeight);
+                    const size = displayList.length === 0 ? MIN_SIZE : Math.min(maxH, DEFAULT_SIZE, fullSize);
+                    const mw = `${fieldset.current.getBoundingClientRect().width}px`;
+                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw, height: size });
                 },
             }),
         ],
@@ -132,9 +101,23 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
             focusItemOnOpen: "auto",
             openOnArrowKeyDown: true,
             scrollItemIntoView: true,
-            // onNavigate: (n) => setIndex((prev) => n ?? prev)
         }),
     ]);
+    useEffect(() => {
+        if (props.value) {
+            const item = options.find((x) => x.value === props.value);
+            setValue(item?.label ?? props.value);
+        }
+    }, [props.value]);
+    useEffect(() => {
+        if (!open)
+            return setH(0);
+        const inputRef = refs.reference;
+        if (inputRef.current === null)
+            return;
+        const s = getRemainingSize(inputRef.current, window.innerHeight);
+        setTimeout(() => setH(Math.min(s, displayList.length * MIN_SIZE)), 100);
+    }, [shadow, open, refs.reference]);
     useEffect(() => {
         const input = refs.reference.current;
         if (!input)
@@ -226,15 +209,17 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                             }
                         }
                     },
-                }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.ul, { ...getFloatingProps({
-                            ref: refs.setFloating,
-                            style: {
-                                ...transitions.styles,
-                                top: y ?? 0,
-                                position: strategy,
-                                left: (x ?? 0) + (value ? 36 : 25),
-                            },
-                        }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: [isEmpty ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h }, components: components, className: "rounded-lg border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
+                }), "data-value": value, "data-error": !!error, "data-name": id, "data-target": id, required: required, value: open ? shadow : label || value, "aria-autocomplete": "list", autoComplete: "off", className: css("input placeholder-input-mask group h-input-height w-full flex-1", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", props.className) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || value || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs(motion.div, { ...getFloatingProps({
+                            ref: mergeRefs(removeScrollRef, refs.setFloating),
+                            style: { ...transitions.styles, left: x, top: y ?? 0, position: strategy },
+                        }), initial: false, "data-floating": "true", animate: { height: isEmpty ? "auto" : h }, className: "isolate z-floating m-0 max-h-80 origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating ease-in-out", onAnimationComplete: () => {
+                            if (!open)
+                                return setH(0);
+                            const ul = refs.floating.current;
+                            const li = ul.querySelectorAll("li").item(0);
+                            const sum = (li ? li.getBoundingClientRect().height : MIN_SIZE) * displayList.length;
+                            return flushSync(() => setH(sum + 2));
+                        }, children: [isEmpty ? (_jsx("div", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, _jsx(Virtuoso, { overscan: 40, ref: virtuoso, hidden: isEmpty, data: displayList, style: { height: h }, defaultItemHeight: MIN_SIZE, components: components, scrollerRef: (e) => void (scroller.current = e), className: "max-h-80 overscroll-contain rounded-lg border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
                                     const Label = option.Render ?? Frag;
                                     const active = value === option.value || value === option.label;
                                     const selected = index === i;
@@ -248,7 +233,7 @@ export const Autocomplete = forwardRef(({ left, error, right, loading, options,
                                             "aria-selected": active,
                                             "aria-busy": option.disabled,
                                             onClick: () => onSelect(option, i),
-                                            className: `cursor-pointer w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
+                                            className: `cursor-pointer min-h-10 hover:bg-floating-hover w-full p-2 text-left ${active ? "bg-primary-hover text-primary-foreground" : ""} ${selected ? "bg-floating-hover text-floating-foreground" : ""}`,
                                         }), children: _jsx(Label, { ...props, label: option.label, value: option.value, children: children }) }));
                                 } })] }) })) : null })] }));
 });

package/dist/src/components/form/multi-select.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAOlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA0DF,eAAO,MAAM,WAAW,wGAkYvB,CAAC"}
+{"version":3,"file":"multi-select.d.ts","sourceRoot":"","sources":["../../../../src/components/form/multi-select.tsx"],"names":[],"mappings":"AAiBA,OAAO,KAA6F,MAAM,OAAO,CAAC;AAQlH,OAAO,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAG9C,OAAO,EAAc,eAAe,EAAE,MAAM,eAAe,CAAC;AAC5D,OAAO,EAAE,KAAK,WAAW,EAAE,MAAM,UAAU,CAAC;AAE5C,MAAM,MAAM,oBAAoB,GAAG,WAAW,GAAG;IAAE,MAAM,CAAC,EAAE,KAAK,CAAC,EAAE,CAAC,WAAW,CAAC,CAAA;CAAE,CAAC;AAEpF,MAAM,MAAM,gBAAgB,GAAG,QAAQ,CACnC,eAAe,CAAC,OAAO,CAAC,EACxB;IACI,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,EAAE,CAAC;IACjB,YAAY,CAAC,EAAE,KAAK,CAAC;IACrB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,YAAY,CAAC,EAAE,MAAM,EAAE,CAAC;IACxB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,OAAO,EAAE,oBAAoB,EAAE,CAAC;IAChC,eAAe,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,KAAK,IAAI,CAAC;CACjD,CACJ,CAAC;AA4DF,eAAO,MAAM,WAAW,wGAsZvB,CAAC"}

package/dist/src/components/form/multi-select.js

@@ -7,13 +7,15 @@ import { AnimatePresence, motion } from "motion/react";
 import React, { forwardRef, Fragment, useEffect, useMemo, useRef, useState } from "react";
 import { flushSync } from "react-dom";
 import { Virtuoso } from "react-virtuoso";
+import { useRemoveScroll } from "../../hooks/use-remove-scroll";
 import { useTranslations } from "../../hooks/use-translations";
 import { Dict } from "../../lib/dict";
-import { css, initializeInputDataset } from "../../lib/dom";
+import { css, getRemainingSize, initializeInputDataset } from "../../lib/dom";
 import { noop } from "../../lib/fns";
 import { Tag } from "../core/tag";
 import { Checkbox } from "./checkbox";
 import { InputField } from "./input-field";
+const MIN_SIZE = 40;
 const Frag = (props) => _jsx(Fragment, { children: props.children });
 const transitionStyles = {
     duration: 300,
@@ -84,20 +86,13 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
         ]
         : options;
     const list = new Fuzzy(innerOptions, ["value", "label"], fuzzyOptions).search(shadow);
-    useEffect(() => {
-        if (!open)
-            setH(0);
-    }, [open]);
-    useEffect(() => {
-        if (props.value) {
-            setValue(new Dict(props.value.map((x) => [x, map.get(x)])));
-        }
-    }, [props.value, map]);
+    const removeScrollRef = useRemoveScroll(open, "block-only");
     const displayList = list.filter((x) => x.hidden !== true);
     const isEmpty = displayList.length === 0;
     const { x, y, strategy, refs, context } = useFloating({
         open,
         transform: true,
+        placement: "bottom-start",
         strategy: "absolute",
         onOpenChange: setOpen,
         whileElementsMounted: autoUpdate,
@@ -106,18 +101,14 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
             size({
                 padding: 10,
                 elementContext: "reference",
-                apply(a) {
-                    if (fieldset.current === null)
-                        return;
-                    const w = fieldset.current.getBoundingClientRect().width;
-                    const maxH = 360;
-                    flushSync(() => setTimeout(() => setH(maxH), 200));
-                    Object.assign(a.elements.floating.style, {
-                        width: `${w}px`,
-                        maxWidth: `${w}px`,
-                        maxHeight: isEmpty ? "auto" : `${maxH}px`,
-                        height: isEmpty ? "auto" : `${maxH}px`,
-                    });
+                apply(args) {
+                    const ul = args.elements.floating.querySelector("ul");
+                    const fullSize = ul?.getBoundingClientRect().height || 0;
+                    const DEFAULT_SIZE = getRemainingSize(refs.reference.current, window.innerHeight);
+                    const maxH = Math.min(fullSize < MIN_SIZE ? DEFAULT_SIZE : fullSize, DEFAULT_SIZE, args.availableHeight);
+                    const size = displayList.length === 0 ? MIN_SIZE : Math.min(maxH, DEFAULT_SIZE, fullSize);
+                    const mw = `${fieldset.current.getBoundingClientRect().width}px`;
+                    Object.assign(args.elements.floating.style, { width: mw, maxWidth: mw, height: size });
                 },
             }),
         ],
@@ -140,6 +131,20 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
             onNavigate: (n) => setIndex((prev) => n ?? prev),
         }),
     ]);
+    useEffect(() => {
+        if (!open)
+            return setH(0);
+        const inputRef = refs.reference;
+        if (inputRef.current === null)
+            return;
+        const s = getRemainingSize(inputRef.current, window.innerHeight);
+        setTimeout(() => setH(Math.min(s, displayList.length * 40)), 100);
+    }, [shadow, open, refs.reference]);
+    useEffect(() => {
+        if (props.value) {
+            setValue(new Dict(props.value.map((x) => [x, map.get(x)])));
+        }
+    }, [props.value, map]);
     useEffect(() => {
         const input = refs.reference.current;
         if (!input)
@@ -190,24 +195,22 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
     };
     const id = props.id || props.name;
     const tags = value.map((x, i) => (_jsx(Tag, { size: "small", icon: _jsx("button", { type: "button", className: "text-current hover:text-danger focus:text-danger", onClick: (e) => {
+                e.preventDefault();
                 e.stopPropagation();
                 onSelect(x, i);
+                setOpen(false);
             }, children: _jsx(XIcon, { size: 14 }) }), children: x.label ?? x.value }, `MultiSelect-${x.value}-x`)));
-    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [right, _jsxs("button", { type: "button", className: "transition-colors link:text-primary", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("button", { ...getReferenceProps({
+    const scrollableContainerStyle = { height: isEmpty ? "0" : value.size === 0 ? h - 49 : h - 86 };
+    return (_jsxs(InputField, { ...props, left: left, error: error, ref: fieldset, form: props.form, name: props.name, feedback: feedback, hideLeft: hideLeft, required: required, title: props.title, container: container, rightLabel: rightLabel, interactive: interactive, id: props.name || props.id, optionalText: optionalText, componentName: "autocomplete", labelClassName: labelClassName, placeholder: props.placeholder, right: _jsxs("span", { className: "flex items-center gap-0.5", children: [right, _jsxs("button", { type: "button", className: "transition-colors link:text-primary", onClick: onCaretDownClick, children: [_jsx(ChevronDown, { size: 20 }), _jsx("span", { className: "sr-only", children: translation.inputCaretDown })] }), value ? (_jsx("button", { type: "button", onClick: onClose, className: "transition-colors link:text-danger", children: _jsx("svg", { width: "15", height: "15", viewBox: "0 0 15 15", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.7816 4.03157C12.0062 3.80702 12.0062 3.44295 11.7816 3.2184C11.5571 2.99385 11.193 2.99385 10.9685 3.2184L7.50005 6.68682L4.03164 3.2184C3.80708 2.99385 3.44301 2.99385 3.21846 3.2184C2.99391 3.44295 2.99391 3.80702 3.21846 4.03157L6.68688 7.49999L3.21846 10.9684C2.99391 11.193 2.99391 11.557 3.21846 11.7816C3.44301 12.0061 3.80708 12.0061 4.03164 11.7816L7.50005 8.31316L10.9685 11.7816C11.193 12.0061 11.5571 12.0061 11.7816 11.7816C12.0062 11.557 12.0062 11.193 11.7816 10.9684L8.31322 7.49999L11.7816 4.03157Z", fill: "currentColor", fillRule: "evenodd", clipRule: "evenodd" }) }) })) : null] }), children: [_jsx("li", { ...getReferenceProps({
                     ...props,
                     onFocus,
                     id: `${id}-shadow`,
                     name: `${id}-shadow`,
                     ref: refs.setReference,
-                }), type: "button", "data-name": id, "data-target": id, "data-shadow": "true", "data-error": !!error, "aria-autocomplete": "list", "data-value": deriveValue.join(","), value: open ? shadow : label || value, className: css("input placeholder-input-mask group h-input-height w-full", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-2 whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate overflow-ellipsis", props.className), children: _jsx(OverflowControl, { label: selectedLabel, children: tags }) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || deriveValue || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs("div", { ...getFloatingProps({
+                }), tabIndex: 0, role: "button", "data-name": id, "data-target": id, "data-shadow": "true", "data-error": !!error, "aria-autocomplete": "list", "data-value": deriveValue.join(","), value: open ? shadow : label || value, className: css("input placeholder-input-mask group h-input-height w-full", "rounded-md bg-transparent px-input-x py-input-y text-foreground", "outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary", "group-error:text-danger group-error:placeholder-input-mask-error", "group-focus-within:border-primary group-hover:border-primary", "flex flex-row items-center gap-2 whitespace-nowrap text-left", "max-w-full overflow-x-auto truncate overflow-ellipsis", props.className), children: _jsx(OverflowControl, { label: selectedLabel, children: tags }) }), _jsx("input", { id: id, name: id, type: "hidden", "data-origin": id, ref: externalRef, required: required, defaultValue: props.value || deriveValue || undefined }), _jsx(FloatingPortal, { preserveTabOrder: true, children: open ? (_jsx(FloatingFocusManager, { modal: true, guards: true, returnFocus: false, context: context, initialFocus: -1, visuallyHiddenDismiss: true, children: _jsxs("div", { ...getFloatingProps({
                             ref: refs.setFloating,
-                            style: {
-                                ...transitions.styles,
-                                top: y ?? 0,
-                                position: strategy,
-                                left: (x ?? 0) + (value ? 26 : 18),
-                            },
-                        }), "data-floating": "true", className: "isolate z-floating m-0 w-full origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: [_jsx("input", { autoFocus: true, value: shadow, onChange: onChange, title: props.title, placeholder: translation.multiSelectInnerPlaceholder, onKeyDown: (event) => {
+                            style: { ...transitions.styles, top: y ?? 0, position: strategy, left: x },
+                        }), "data-floating": "true", className: "isolate z-floating m-0 max-h-80 w-full origin-[top_center] list-none overscroll-contain rounded-b-lg rounded-t-lg border border-floating-border bg-floating-background p-0 text-foreground shadow-floating", children: [_jsx("input", { autoFocus: true, value: shadow, onChange: onChange, title: props.title, placeholder: translation.multiSelectInnerPlaceholder, onKeyDown: (event) => {
                                     if (event.key === "ArrowDown") {
                                         let next = index + 1;
                                         if (next > displayList.length - 1)
@@ -236,23 +239,30 @@ export const MultiSelect = forwardRef(({ left, error, right, options, container,
                                             return onSelect(displayList[0], 0);
                                         }
                                     }
-                                }, className: "input placeholder-input-mask group mb-1 h-10 w-full flex-1 border-b border-input-border bg-transparent px-input-x py-input-y outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary" }), isEmpty ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, isEmpty ? null : (_jsx(Virtuoso, { ref: virtuoso, hidden: isEmpty, data: displayList, components: components, style: { height: isEmpty ? "0" : value.size === 0 ? h - 49 : h - 86 }, className: "border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
-                                    const Label = option.Render ?? Frag;
-                                    const active = value.has(option.value) || value.has(option.label ?? "");
-                                    const selected = index === i;
-                                    const children = option.label ?? option.value;
-                                    return (_jsxs("button", { "data-value": option.value, ...getItemProps({
-                                            ref: (node) => void (listRef.current[i] = node),
-                                            role: "option",
-                                            type: "button",
-                                            "aria-checked": active,
-                                            "aria-current": active,
-                                            "aria-selected": active,
-                                            "aria-busy": option.disabled,
-                                            onClick: () => onSelect(option, i),
-                                        }), className: `flex w-full max-w-full cursor-pointer items-center justify-start p-2 text-left hover:bg-floating-hover focus:bg-floating-hover ${active || selected ? "bg-floating-hover text-floating-foreground" : ""}`, children: [_jsx(Checkbox, { onChange: noop, checked: active, "aria-checked": active, onClick: (e) => {
-                                                    e.stopPropagation();
-                                                    onSelect(option, i);
-                                                } }), _jsx(Label, { ...props, label: option.label, value: option.value, children: children })] }));
-                                } })), value.size === 0 ? null : (_jsx("div", { className: "sticky bottom-0 flex w-full flex-nowrap items-center gap-2 overflow-x-auto rounded-b-lg bg-floating-background p-2", children: tags }))] }) })) : null })] }));
+                                }, className: "input placeholder-input-mask group mb-1 h-10 w-full flex-1 border-b border-input-border bg-transparent px-input-x py-input-y outline-none transition-colors focus:ring-2 focus:ring-inset focus:ring-primary" }), isEmpty ? (_jsx("li", { role: "option", className: "w-full border-b border-tooltip-border last:border-transparent", children: _jsx("span", { className: "flex w-full justify-between p-2 text-left text-disabled", children: emptyMessage || translation.autocompleteEmpty }) })) : null, isEmpty ? null : (_jsx(motion.div, { initial: false, "data-floating": "true", ref: removeScrollRef, animate: { height: isEmpty ? "auto" : h }, style: scrollableContainerStyle, className: "max-h-80 w-full overscroll-contain", onAnimationComplete: () => {
+                                    if (!open)
+                                        return setH(0);
+                                    const ul = refs.floating.current;
+                                    const li = ul.querySelectorAll("li").item(0);
+                                    const sum = (li ? li.getBoundingClientRect().height : 40) * displayList.length;
+                                    return flushSync(() => setH(sum + 2));
+                                }, children: _jsx(Virtuoso, { ref: virtuoso, hidden: isEmpty, data: displayList, components: components, style: scrollableContainerStyle, className: "max-h-80 border-floating-border bg-floating-background p-0 text-foreground", itemContent: (i, option) => {
+                                        const Label = option.Render ?? Frag;
+                                        const active = value.has(option.value) || value.has(option.label ?? "");
+                                        const selected = index === i;
+                                        const children = option.label ?? option.value;
+                                        return (_jsxs("button", { "data-value": option.value, ...getItemProps({
+                                                ref: (node) => void (listRef.current[i] = node),
+                                                role: "option",
+                                                type: "button",
+                                                "aria-checked": active,
+                                                "aria-current": active,
+                                                "aria-selected": active,
+                                                "aria-busy": option.disabled,
+                                                onClick: () => onSelect(option, i),
+                                            }), className: `flex w-full max-w-full cursor-pointer items-center justify-start p-2 text-left hover:bg-floating-hover focus:bg-floating-hover ${active || selected ? "bg-floating-hover text-floating-foreground" : ""}`, children: [_jsx(Checkbox, { onChange: noop, checked: active, "aria-checked": active, onClick: (e) => {
+                                                        e.stopPropagation();
+                                                        onSelect(option, i);
+                                                    } }), _jsx(Label, { ...props, label: option.label, value: option.value, children: children })] }));
+                                    } }) })), value.size === 0 ? null : (_jsx("div", { className: "sticky bottom-0 flex w-full flex-nowrap items-center gap-2 overflow-x-auto rounded-b-lg bg-floating-background p-2", children: tags }))] }) })) : null })] }));
 });

package/dist/src/hooks/use-remove-scroll.d.ts

@@ -1,2 +1,4 @@
-export declare const useRemoveScroll: (remove: boolean) => void;
+type ScrollRemoveStyle = "overflow-hidden" | "block-only";
+export declare const useRemoveScroll: <T extends HTMLElement>(remove: boolean, removeStyle?: ScrollRemoveStyle) => import("react").RefObject<T | null>;
+export {};
 //# sourceMappingURL=use-remove-scroll.d.ts.map

package/dist/src/hooks/use-remove-scroll.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-remove-scroll.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-remove-scroll.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,GAAI,QAAQ,OAAO,SA4B9C,CAAC"}
+{"version":3,"file":"use-remove-scroll.d.ts","sourceRoot":"","sources":["../../../src/hooks/use-remove-scroll.ts"],"names":[],"mappings":"AAMA,KAAK,iBAAiB,GAAG,iBAAiB,GAAG,YAAY,CAAC;AAE1D,eAAO,MAAM,eAAe,GAAI,CAAC,SAAS,WAAW,EAAE,QAAQ,OAAO,EAAE,cAAa,iBAAqC,wCAkDzH,CAAC"}

package/dist/src/hooks/use-remove-scroll.js

@@ -1,34 +1,58 @@
 import { useEffect, useRef } from "react";
+import { Is, onlyNumbers } from "sidekicker";
 import { hasVerticalScroll } from "../lib/dom";
 import { isMobile, isSsr } from "../lib/fns";
 import { useIsCoarseDevice } from "./use-is-coarse-device";
-export const useRemoveScroll = (remove) => {
+export const useRemoveScroll = (remove, removeStyle = "overflow-hidden") => {
+    const ref = useRef(null);
     const isCoarseDevice = useIsCoarseDevice();
     const prev = useRef(isSsr() ? "" : document.documentElement.style.overflowY);
     useEffect(() => {
         const html = document.documentElement;
-        if (remove) {
-            prev.current = document.documentElement.style.overflowY;
-            html.style.overflowY = "hidden";
-            if (isCoarseDevice || isMobile())
-                return;
-            html.style.padding = hasVerticalScroll(html) ? "0 15px 0 0" : "";
+        if (removeStyle === "overflow-hidden") {
+            if (remove) {
+                prev.current = document.documentElement.style.overflowY;
+                html.style.overflowY = "hidden";
+                if (isCoarseDevice || isMobile())
+                    return;
+                html.style.padding = hasVerticalScroll(html) ? "0 15px 0 0" : "";
+            }
+            else {
+                html.style.padding = "";
+                document.documentElement.style.overflowY = prev.current;
+            }
         }
-        else {
-            html.style.padding = "";
-            document.documentElement.style.overflowY = prev.current;
-        }
-    }, [remove, isCoarseDevice]);
+    }, [remove, isCoarseDevice, removeStyle]);
     useEffect(() => {
         if (!remove)
             return;
         const controller = new AbortController();
         const html = document.documentElement;
-        const removeScroll = (e) => (e.target === html && remove ? e.preventDefault() : undefined);
+        const removeScroll = (e) => {
+            const el = ref.current;
+            if (el) {
+                if (el.contains(e.target)) {
+                    const rect = el.getBoundingClientRect();
+                    const realHeight = el.style.height ? Number(onlyNumbers(el.style.height)) : null;
+                    const scrollable = Is.number(realHeight) ? realHeight : rect.height;
+                    const hasScroll = el.scrollHeight <= scrollable;
+                    if (scrollable === el.scrollHeight)
+                        return remove ? e.preventDefault() : undefined;
+                    if (hasScroll)
+                        return;
+                    return remove ? e.preventDefault() : undefined;
+                }
+            }
+            if (e.currentTarget === document.documentElement) {
+                return remove ? e.preventDefault() : undefined;
+            }
+            return remove ? e.preventDefault() : undefined;
+        };
         html.addEventListener("wheel", removeScroll, { signal: controller.signal, passive: false });
         html.addEventListener("scroll", removeScroll, { signal: controller.signal, passive: false });
         return () => {
             controller.abort();
         };
     }, [remove]);
+    return ref;
 };

package/dist/src/lib/dom.d.ts

@@ -10,4 +10,5 @@ export declare const dispatchInput: (input: HTMLInputElement | undefined | null)
 };
 export declare const initializeInputDataset: (input: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement) => () => void;
 export declare const hasVerticalScroll: (htmlElement: HTMLElement) => boolean;
+export declare const getRemainingSize: (element: HTMLElement, windowSize: number) => number;
 //# sourceMappingURL=dom.d.ts.map

package/dist/src/lib/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/lib/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,eAAO,MAAM,SAAS,GACjB,CAAC,EAAE,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,KAAG,WAAW,CAAC,CAAC,CAS3E,CAAC;AAEN,eAAO,MAAM,gBAAgB,GAAI,GAAG,GAAG,KAAG,CAAC,IAAI,KAAK,CAAC,YAQpD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,GAAG,GAAG,gCAAmB,CAAC;AAEpD,eAAO,MAAM,GAAG,GAAI,GAAG,QAAQ,UAAU,EAAE,WAA0B,CAAC;AAEtE,eAAO,MAAM,aAAa,GAAI,OAAO,gBAAgB,GAAG,SAAS,GAAG,IAAI;;;CAIvE,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,eAIvG,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,aAAa,WAAW,YAAwD,CAAC"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/lib/dom.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,MAAM,CAAC;AACxC,OAAO,KAAK,EAAE,EAAE,GAAG,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAI3D,eAAO,MAAM,SAAS,GACjB,CAAC,EAAE,GAAG,MAAM,KAAK,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,GAAG,CAAC,CAAC,CAAC,GAAG,SAAS,GAAG,IAAI,CAAC,KAAG,WAAW,CAAC,CAAC,CAS3E,CAAC;AAEN,eAAO,MAAM,gBAAgB,GAAI,GAAG,GAAG,KAAG,CAAC,IAAI,KAAK,CAAC,YAQpD,CAAC;AAEF,eAAO,MAAM,SAAS,GAAI,GAAG,GAAG,gCAAmB,CAAC;AAEpD,eAAO,MAAM,GAAG,GAAI,GAAG,QAAQ,UAAU,EAAE,WAA0B,CAAC;AAEtE,eAAO,MAAM,aAAa,GAAI,OAAO,gBAAgB,GAAG,SAAS,GAAG,IAAI;;;CAIvE,CAAC;AAEF,eAAO,MAAM,sBAAsB,GAAI,OAAO,gBAAgB,GAAG,mBAAmB,GAAG,iBAAiB,eAIvG,CAAC;AAEF,eAAO,MAAM,iBAAiB,GAAI,aAAa,WAAW,YAAwD,CAAC;AAEnH,eAAO,MAAM,gBAAgB,GAAI,SAAS,WAAW,EAAE,YAAY,MAAM,WAGxE,CAAC"}

package/dist/src/lib/dom.js

@@ -33,3 +33,7 @@ export const initializeInputDataset = (input) => {
     return () => input.removeEventListener("focus", focus);
 };
 export const hasVerticalScroll = (htmlElement) => htmlElement.scrollHeight > htmlElement.clientHeight;
+export const getRemainingSize = (element, windowSize) => {
+    const rect = element.getBoundingClientRect();
+    return Math.abs(windowSize - rect.bottom);
+};

package/dist/src/styles/common.js

@@ -18,7 +18,7 @@ export const spacing = {
 };
 export const zIndex = {
     normal: "1",
-    navbar: "19",
+    navbar: "22",
     calendar: "2",
     overlay: "21",
     tooltip: "20",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@g4rcez/components",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "sideEffects": false,
   "private": false,
   "packageManager": "pnpm@10.7.0",
@@ -57,7 +57,7 @@
     "react-remove-scroll-bar": "2.3.8",
     "react-use-measure": "2.1.7",
     "react-virtuoso": "4.12.6",
-    "sidekicker": "0.1.9",
+    "sidekicker": "0.1.10",
     "storage-manager-js": "4.2.6-5",
     "tailwind-merge": "3.0.2",
     "the-mask-input": "3.3.13",