@rovula/ui 0.0.65 → 0.0.67

package/dist/components/Dropdown/Dropdown.js

@@ -17,7 +17,7 @@ import { customInputVariant, dropdownIconVariant, iconWrapperVariant, } from "./
 import { ChevronDownIcon } from "@heroicons/react/16/solid";
 import { cn } from "@/utils/cn";
 const Dropdown = forwardRef((_a, ref) => {
-    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal = true, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName"]);
+    var { id, options = [], value, label, size = "md", rounded = "normal", variant = "outline", helperText, errorMessage, fullwidth = true, disabled = false, error = false, filterMode = false, required = true, modal = false, onChangeText, onSelect, renderOptions: customRenderOptions, optionContainerClassName, optionItemClassName, optionNotFoundItemClassName } = _a, props = __rest(_a, ["id", "options", "value", "label", "size", "rounded", "variant", "helperText", "errorMessage", "fullwidth", "disabled", "error", "filterMode", "required", "modal", "onChangeText", "onSelect", "renderOptions", "optionContainerClassName", "optionItemClassName", "optionNotFoundItemClassName"]);
     const _id = id || `${label}-select`;
     const [isFocused, setIsFocused] = useState(false);
     const [selectedOption, setSelectedOption] = useState(null);
@@ -66,6 +66,7 @@ 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 usePortal = isInsideDialog ? false : modal;
     const updateDropdownPosition = useCallback(() => {
         if (inputRef.current && dropdownRef.current) {
             const rect = inputRef.current.getBoundingClientRect();
@@ -74,7 +75,6 @@ const Dropdown = forwardRef((_a, ref) => {
             const spaceAbove = rect.top;
             const shouldOpenAbove = spaceBelow < dropdownHeight && spaceAbove > spaceBelow;
             setIsAbove(shouldOpenAbove);
-            const usePortal = isInsideDialog ? false : modal;
             if (usePortal) {
                 setDropdownStyles({
                     position: "absolute",
@@ -83,7 +83,7 @@ const Dropdown = forwardRef((_a, ref) => {
                         : `${rect.bottom}px`,
                     left: `${rect.left}px`,
                     width: `${rect.width}px`,
-                    zIndex: 9999, // Ensure it's above everything
+                    zIndex: 9999,
                 });
             }
             else {
@@ -92,20 +92,18 @@ const Dropdown = forwardRef((_a, ref) => {
                     top: shouldOpenAbove ? `-${dropdownHeight}px` : "100%",
                     left: "0",
                     width: "100%",
-                    zIndex: 10,
+                    zIndex: 9999,
                 });
             }
         }
-    }, [modal, isInsideDialog]);
+    }, [modal, isInsideDialog, usePortal]);
     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 = () => {
@@ -118,7 +116,7 @@ const Dropdown = forwardRef((_a, ref) => {
                 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-[9999] max-h-60 overflow-y-auto", isAbove ? "bottom-full mb-1" : "top-full mt-1", optionContainerClassName), style: dropdownStyles, ref: dropdownRef, 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-[9999] max-h-60 overflow-y-auto", !usePortal && (isAbove ? "bottom-full mb-1" : "top-full mt-1"), optionContainerClassName), style: dropdownStyles, ref: dropdownRef, children: [optionsFiltered.map((option) => {
                     if (option.renderLabel) {
                         return (_jsx(Fragment, { children: option.renderLabel({
                                 value: option.value,
@@ -172,7 +170,7 @@ 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: 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 &&
-                ((isInsideDialog ? false : modal) ? (_jsx(Portal.Root, { container: document.body, children: renderOptions() })) : (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 &&
+                (usePortal ? (_jsx(Portal.Root, { container: document.body, children: renderOptions() })) : (renderOptions()))] }));
 });
 export default Dropdown;

package/dist/components/Tabs/Tabs.js

@@ -5,7 +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, keepMounted = false, tabMode = "start", className, tabBarClassName, tabBarContainerClassName, tabBarWrapperClassName, tabButtonClassName, tabButtonActiveClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
+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, tabButtonActiveDisableClassName, tabButtonDisableClassName, tabContentClassName, addTabButtonWrapperClassName, borderSliderClassName, leftAction, rightAction, onAddTab, onTabChange, }) => {
     const [activeTab, setActiveTab] = useState(initialTab);
     const [sliderStyle, setSliderStyle] = useState({
         width: "0px",
@@ -62,25 +62,34 @@ const Tabs = ({ tabs = [], value, initialTab = 0, tabBarSize = 38, enableBorderL
                     [`border-b-[1px] border-base-stroke`]: enableBorderLine,
                     "border-state-disable-outline": disabled,
                     "flex-1": tabMode === "justify",
-                    tabBarContainerClassName,
-                }), children: [leftAction, _jsx("div", { className: cn("relative flex flex-row  overflow-x-auto", {
+                }, tabBarContainerClassName), children: [leftAction, _jsx("div", { className: cn("relative flex flex-row  overflow-x-auto", {
                             "flex-1": tabMode === "justify",
                         }, tabBarWrapperClassName), children: _jsxs("div", { className: cn("tabs-scrollbar overflow-x-auto w-full", `relative flex gap-3 h-[${tabBarSize}px] box-border`, {
                                 "gap-0": tabMode === "justify",
                             }, tabBarClassName), style: {
                                 justifyContent: tabMode === "justify" ? "stretch" : tabMode,
-                            }, role: "tablist", children: [tabs.map((tab, index) => (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6", {
-                                        "text-foreground": index === activeTab,
-                                        "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
-                                        "text-state-disable-solid pointer-events-none": disabled || tab.disabled,
-                                        "text-state-disable-outline": (index === activeTab && disabled) || tab.disabled,
-                                        [tabButtonClassName !== null && tabButtonClassName !== void 0 ? tabButtonClassName : ""]: true,
-                                        [tabButtonActiveClassName !== null && tabButtonActiveClassName !== void 0 ? tabButtonActiveClassName : ""]: index === activeTab,
-                                        "flex-1": tabMode === "justify",
-                                    }), onClick: () => {
-                                        setActiveTab(index);
-                                        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`, {
+                            }, role: "tablist", children: [tabs.map((tab, index) => {
+                                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                                    return (_jsxs("button", { ref: (el) => (tabRefs.current[index] = el), role: "tab", "aria-selected": index === activeTab, "aria-controls": `tab-content-${index}`, disabled: disabled || tab.disabled, id: `tab-${index}`, className: cn("flex justify-center flex-row items-center py-3 cursor-pointer transition-colors duration-300 box-border gap-1 flex-shrink-0  typography-subtitile6", {
+                                            "text-foreground": index === activeTab,
+                                            "text-text-grey-medium hover:text-text-grey-dark active:text-text-dark": index !== activeTab,
+                                            // -- disabled
+                                            "text-state-disable-solid pointer-events-none": disabled || tab.disabled,
+                                            [(_b = (_a = tab.disableClassName) !== null && _a !== void 0 ? _a : tabButtonDisableClassName) !== null && _b !== void 0 ? _b : ""]: disabled || tab.disabled,
+                                            // --
+                                            "text-state-disable-outline": index === activeTab && (disabled || tab.disabled),
+                                            // -- active disabled --
+                                            [(_d = (_c = tab.activeDisableClassName) !== null && _c !== void 0 ? _c : tabButtonActiveDisableClassName) !== null && _d !== void 0 ? _d : ""]: index === activeTab && (disabled || tab.disabled),
+                                            // -- class name
+                                            [(_f = (_e = tab.className) !== null && _e !== void 0 ? _e : tabButtonClassName) !== null && _f !== void 0 ? _f : ""]: true,
+                                            // -- active --
+                                            [(_h = (_g = tab.activeClassName) !== null && _g !== void 0 ? _g : tabButtonActiveClassName) !== null && _h !== void 0 ? _h : ""]: index === activeTab,
+                                            "flex-1": tabMode === "justify",
+                                        }), onClick: () => {
+                                            setActiveTab(index);
+                                            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: tabs.map((tab, idx) => {
                     var _a;

package/dist/components/Tabs/Tabs.stories.js

@@ -174,3 +174,15 @@ export const Controller = {
                     } }))] }));
     },
 };
+export const CustomClassname = {
+    args: {
+        initialTab: 0,
+        tabs: tabs.map((tab, i) => (Object.assign(Object.assign({}, tab), { disabled: i !== 0, activeClassName: "text-green-500", 
+            // className: "text-red-500",
+            disableClassName: i === 1 && "text-pink-200", activeDisableClassName: "text-red-500" }))),
+    },
+    render: (args) => {
+        const props = Object.assign({}, args);
+        return (_jsxs("div", { className: "flex flex-row gap-4", children: [_jsx(Tabs, Object.assign({ tabs: tabs }, props, { tabButtonDisableClassName: "text-red-500", tabButtonActiveDisableClassName: "text-blue-500", tabBarContainerClassName: "border-red-500" })), _jsx(Tabs, Object.assign({ tabs: tabs }, props, { disabled: true, tabButtonDisableClassName: "text-red-500", tabButtonActiveDisableClassName: "text-blue-500", tabBarContainerClassName: "border-blue-500" }))] }));
+    },
+};