@rovula/ui 0.0.62 → 0.0.64

package/dist/cjs/types/components/Dropdown/Dropdown.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from "react";
+import React, { CSSProperties, ReactNode } from "react";
 import { InputProps } from "../TextInput/TextInput";
 type RenderLabelCallbackArg = {
     value: string;
@@ -36,6 +36,8 @@ export type DropdownProps = {
         optionsFiltered: Options[];
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
+        style?: CSSProperties;
+        dropdownRef?: React.RefObject<HTMLUListElement>;
     }) => ReactNode;
 } & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React.ForwardRefExoticComponent<{
@@ -63,6 +65,8 @@ declare const Dropdown: React.ForwardRefExoticComponent<{
         optionsFiltered: Options[];
         selectedOption: Options | null | undefined;
         onClick: (option: Options) => void;
+        style?: CSSProperties;
+        dropdownRef?: React.RefObject<HTMLUListElement>;
     }) => ReactNode) | undefined;
 } & Omit<InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
 export default Dropdown;

package/dist/cjs/types/components/Dropdown/Dropdown.stories.d.ts

@@ -27,6 +27,8 @@ declare const meta: {
             optionsFiltered: Options[];
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
+            style?: React.CSSProperties | undefined;
+            dropdownRef?: React.RefObject<HTMLUListElement> | undefined;
         }) => React.ReactNode) | undefined;
     } & Omit<import("../..").InputProps, "onSelect" | "value"> & React.RefAttributes<HTMLInputElement>>;
     tags: string[];
@@ -58,6 +60,8 @@ declare const meta: {
             optionsFiltered: Options[];
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
+            style?: React.CSSProperties | undefined;
+            dropdownRef?: React.RefObject<HTMLUListElement> | undefined;
         }) => React.ReactNode) | undefined;
         suppressHydrationWarning?: boolean | undefined;
         color?: string | undefined;

package/dist/cjs/types/components/Search/Search.stories.d.ts

@@ -322,6 +322,8 @@ declare const meta: {
             optionsFiltered: Options[];
             selectedOption: Options | null | undefined;
             onClick: (option: Options) => void;
+            style?: React.CSSProperties | undefined;
+            dropdownRef?: React.RefObject<HTMLUListElement> | undefined;
         }) => React.ReactNode) | undefined;
         optionContainerClassName?: string | undefined;
         optionItemClassName?: string | undefined;

package/dist/cjs/types/components/Tabs/Tabs.d.ts

@@ -30,6 +30,7 @@ type TabsProps = {
     leftAction?: React.ReactNode;
     rightAction?: React.ReactNode;
     disabled?: boolean;
+    keepMounted?: boolean;
     onAddTab?: () => void;
     onTabChange?: (tabIndex: number) => void;
 };

package/dist/cjs/types/components/Tabs/Tabs.stories.d.ts

@@ -30,6 +30,7 @@ declare const meta: {
         leftAction?: React.ReactNode;
         rightAction?: React.ReactNode;
         disabled?: boolean | undefined;
+        keepMounted?: boolean | undefined;
         onAddTab?: (() => void) | undefined;
         onTabChange?: ((tabIndex: number) => void) | undefined;
     }>;
@@ -66,6 +67,7 @@ declare const meta: {
         leftAction?: React.ReactNode;
         rightAction?: React.ReactNode;
         disabled?: boolean | undefined;
+        keepMounted?: boolean | undefined;
         onAddTab?: (() => void) | undefined;
         onTabChange?: ((tabIndex: number) => void) | undefined;
     }>) => import("react/jsx-runtime").JSX.Element)[];

package/dist/components/Dropdown/Dropdown.js

@@ -10,7 +10,8 @@ var __rest = (this && this.__rest) || function (s, e) {
     return t;
 };
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Fragment, forwardRef, useCallback, useEffect, useMemo, useRef, useState, } from "react";
+import { Fragment, forwardRef, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState, } from "react";
+import * as Portal from "@radix-ui/react-portal";
 import TextInput from "../TextInput/TextInput";
 import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./Dropdown.styles";
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
@@ -22,6 +23,10 @@ const Dropdown = forwardRef((_a, ref) => {
     const [selectedOption, setSelectedOption] = useState(null);
     const [textValue, setTextValue] = useState("");
     const keyCode = useRef("");
+    const dropdownRef = useRef(null);
+    const inputRef = useRef(null);
+    const [dropdownStyles, setDropdownStyles] = useState({});
+    useImperativeHandle(ref, () => inputRef === null || inputRef === void 0 ? void 0 : inputRef.current);
     useEffect(() => {
         var _a;
         setSelectedOption(value);
@@ -46,15 +51,49 @@ const Dropdown = forwardRef((_a, ref) => {
                 ((_a = option.label) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(textValue === null || textValue === void 0 ? void 0 : textValue.toLowerCase()));
         });
     }, [options, filterMode, textValue]);
+    const updateDropdownPosition = useCallback(() => {
+        var _a;
+        if (inputRef.current) {
+            const rect = inputRef.current.getBoundingClientRect();
+            const dropdownHeight = ((_a = dropdownRef.current) === null || _a === void 0 ? void 0 : _a.offsetHeight) || 0;
+            const spaceBelow = window.innerHeight - rect.bottom;
+            const spaceAbove = rect.top;
+            const position = spaceBelow >= dropdownHeight || spaceBelow > spaceAbove
+                ? {
+                    top: `${rect.bottom + window.scrollY}px`,
+                    left: `${rect.left + window.scrollX}px`,
+                    width: `${rect.width}px`,
+                }
+                : {
+                    top: `${rect.top - dropdownHeight + window.scrollY}px`,
+                    left: `${rect.left + window.scrollX}px`,
+                    width: `${rect.width}px`,
+                };
+            setDropdownStyles(position);
+        }
+    }, []);
+    useEffect(() => {
+        if (isFocused) {
+            updateDropdownPosition();
+            window.addEventListener("resize", updateDropdownPosition);
+            window.addEventListener("scroll", updateDropdownPosition, true);
+        }
+        return () => {
+            window.removeEventListener("resize", updateDropdownPosition);
+            window.removeEventListener("scroll", updateDropdownPosition, true);
+        };
+    }, [isFocused, updateDropdownPosition]);
     const renderOptions = () => {
         if (customRenderOptions) {
             return customRenderOptions({
                 optionsFiltered,
                 selectedOption,
                 onClick: handleOptionClick,
+                style: dropdownStyles,
+                dropdownRef,
             });
         }
-        return (_jsxs("ul", { className: cn("absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-10 max-h-60 overflow-y-auto", optionContainerClassName), children: [optionsFiltered.map((option) => {
+        return (_jsxs("ul", { className: cn("absolute mt-1 w-full bg-base-popup border border-base-popup text-base-popup-foreground rounded-md shadow-md z-50 max-h-60 overflow-y-auto", optionContainerClassName), style: dropdownStyles, ref: dropdownRef, children: [optionsFiltered.map((option) => {
                     if (option.renderLabel) {
                         return (_jsx(Fragment, { children: option.renderLabel({
                                 value: option.value,
@@ -106,6 +145,6 @@ const Dropdown = forwardRef((_a, ref) => {
         keyCode.current = e.code;
         (_a = props === null || props === void 0 ? void 0 : props.onKeyDown) === null || _a === void 0 ? void 0 : _a.call(props, e);
     }, [props === null || props === void 0 ? void 0 : props.onKeyDown]);
-    return (_jsxs("div", { className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: ref, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused && renderOptions()] }));
+    return (_jsxs("div", { className: `relative ${fullwidth ? "w-full" : ""}`, children: [_jsx(TextInput, Object.assign({ hasClearIcon: false, endIcon: _jsx("div", { className: iconWrapperVariant({ size }), children: _jsx(ChevronDownIcon, { className: dropdownIconVariant({ size, isFocus: isFocused }) }) }) }, props, { ref: inputRef, readOnly: !filterMode, value: textValue, onChange: handleOnChangeText, label: label, placeholder: " ", type: "text", autoComplete: "off", rounded: rounded, variant: variant, helperText: helperText, errorMessage: errorMessage, fullwidth: fullwidth, error: error, required: required, id: _id, disabled: disabled, size: size, className: customInputVariant({ size }), onFocus: handleOnFocus, onBlur: handleOnBlur, onKeyDown: handleOnKeyDown })), isFocused && _jsx(Portal.Root, { children: renderOptions() })] }));
 });
 export default Dropdown;

package/dist/components/Input/Input.js

@@ -14,7 +14,7 @@ import { forwardRef } from "react";
 import { cn } from "@/utils/cn";
 import { inputVariants } from "./Input.styles";
 const Input = forwardRef((_a, ref) => {
-    var { className, type = "text", size = "md", variant = "outline", fullwidth = false, disabled = false, error = false, required = false, hiddenPlaceholder = false } = _a, props = __rest(_a, ["className", "type", "size", "variant", "fullwidth", "disabled", "error", "required", "hiddenPlaceholder"]);
+    var { className, type = "text", size = "md", variant = "outline", rounded = "normal", fullwidth = false, disabled = false, error = false, required = false, hiddenPlaceholder = false } = _a, props = __rest(_a, ["className", "type", "size", "variant", "rounded", "fullwidth", "disabled", "error", "required", "hiddenPlaceholder"]);
     return (_jsx("input", Object.assign({ type: type, className: cn(inputVariants({
             size,
             variant,
@@ -22,6 +22,7 @@ const Input = forwardRef((_a, ref) => {
             error,
             hiddenPlaceholder,
             disabled,
+            rounded,
         }), className), ref: ref, disabled: disabled }, props)));
 });
 Input.displayName = "Input";

package/dist/components/Tabs/Tabs.js

@@ -5,8 +5,7 @@ import "./Tabs.css";
 import ActionButton from "../ActionButton/ActionButton";
 import Icon from "../Icon/Icon";
 import { Loading } from "@/index";
-const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
-    var _a;
+const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderLine = true, enableAddTabButton = false, keepIconSpace = true, disabled = false, keepMounted = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
     const [activeTab, setActiveTab] = useState(initialTab);
     const [sliderStyle, setSliderStyle] = useState({
         width: "0px",
@@ -19,47 +18,46 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
             setActiveTab(value);
         }
     }, [value]);
-    // const updateSliderStyle = () => {
-    //   const activeTabElement = tabRefs.current[activeTab];
-    //   if (activeTabElement) {
-    //     setSliderStyle({
-    //       width: `${activeTabElement.offsetWidth}px`,
-    //       transform: `translateX(${activeTabElement.offsetLeft}px)`,
-    //     });
-    //   }
-    // };
-    // useEffect(() => {
-    //   let timer: NodeJS.Timeout;
-    //   if (isInitialMount.current) {
-    //     isInitialMount.current = false;
-    //     // Set initial position without animation
-    //     const activeTabElement = tabRefs.current[activeTab];
-    //     if (activeTabElement) {
-    //       setSliderStyle({
-    //         width: "0px",
-    //         transform: `translateX(${
-    //           activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2
-    //         }px)`,
-    //       });
-    //       // Trigger reflow
-    //       timer = setTimeout(() => {
-    //         updateSliderStyle();
-    //       }, 50);
-    //     }
-    //   } else {
-    //     updateSliderStyle();
-    //   }
-    //   const handleResize = () => {
-    //     updateSliderStyle();
-    //   };
-    //   window.addEventListener("resize", handleResize);
-    //   return () => {
-    //     window.removeEventListener("resize", handleResize);
-    //     if (timer) {
-    //       clearTimeout(timer);
-    //     }
-    //   };
-    // }, [activeTab, tabs, tabMode, keepIconSpace]);
+    const updateSliderStyle = () => {
+        const activeTabElement = tabRefs.current[activeTab];
+        if (activeTabElement) {
+            setSliderStyle({
+                width: `${activeTabElement.offsetWidth}px`,
+                transform: `translateX(${activeTabElement.offsetLeft}px)`,
+            });
+        }
+    };
+    useEffect(() => {
+        let timeout;
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            // Set initial position without animation
+            const activeTabElement = tabRefs.current[activeTab];
+            if (activeTabElement) {
+                setSliderStyle({
+                    width: "0px",
+                    transform: `translateX(${activeTabElement.offsetLeft + activeTabElement.offsetWidth / 2}px)`,
+                });
+                // Trigger reflow
+                timeout = setTimeout(() => {
+                    updateSliderStyle();
+                }, 50);
+            }
+        }
+        else {
+            updateSliderStyle();
+        }
+        const handleResize = () => {
+            updateSliderStyle();
+        };
+        window.addEventListener("resize", handleResize);
+        return () => {
+            window.removeEventListener("resize", handleResize);
+            if (timeout) {
+                clearTimeout(timeout);
+            }
+        };
+    }, [activeTab, tabs, tabMode, keepIconSpace]);
     return (_jsxs("div", { className: cn("w-full", className), children: [_jsxs("div", { className: cn(" relative flex flex-row w-full", {
                     [`border-b-[1px] border-base-stroke`]: enableBorderLine,
                     "border-state-disable-outline": disabled,
@@ -84,6 +82,12 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
                                         onTabChange === null || onTabChange === void 0 ? void 0 : onTabChange(index);
                                     }, children: [(keepIconSpace || tab.startTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.isLoading ? _jsx(Loading, {}) : tab.startTabContent })), tab.label, (keepIconSpace || tab.endTabContent) && (_jsx("div", { className: "h-full w-3 flex items-center justify-center", children: tab.endTabContent }))] }, index))), _jsx("div", { className: cn(`absolute left-0 bottom-0 h-[2px]  rounded-full bg-foreground transition-all duration-300 ease-in-out`, {
                                         "bg-state-disable-solid": disabled,
-                                    }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-foreground", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: (_a = tabs[activeTab]) === null || _a === void 0 ? void 0 : _a.content })] }));
+                                    }, borderSliderClassName), style: sliderStyle })] }) }), enableAddTabButton && (_jsx("div", { className: cn("sticky right-0 flex content-center items-center mx-4", addTabButtonWrapperClassName), children: _jsx(ActionButton, { variant: "outline", size: "sm", onClick: () => onAddTab === null || onAddTab === void 0 ? void 0 : onAddTab(), disabled: disabled, children: _jsx(Icon, { name: "plus" }) }) })), rightAction] }), _jsx("div", { className: cn("mt-4 text-foreground", tabContentClassName), role: "tabpanel", id: `tab-content-${activeTab}`, "aria-labelledby": `tab-${activeTab}`, children: tabs.map((tab, idx) => {
+                    var _a;
+                    if (!keepMounted && activeTab !== idx) {
+                        return null;
+                    }
+                    return (_jsx("div", { className: `transition ${activeTab === idx ? "block" : "hidden"}`, children: tab.content }, (_a = tab.id) !== null && _a !== void 0 ? _a : idx));
+                }) })] }));
 };
 export default Tabs;