@rovula/ui 0.0.62 → 0.0.63

package/dist/esm/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/esm/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/esm/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/esm/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/esm/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/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import React__default, { ReactElement, ReactNode, FC, ComponentPropsWithoutRef, CSSProperties } from 'react';
+import React__default, { ReactElement, ReactNode, CSSProperties, FC, ComponentPropsWithoutRef } from 'react';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as class_variance_authority_dist_types from 'class-variance-authority/dist/types';
 import * as LabelPrimitive from '@radix-ui/react-label';
@@ -135,6 +135,7 @@ type TabsProps = {
     leftAction?: React__default.ReactNode;
     rightAction?: React__default.ReactNode;
     disabled?: boolean;
+    keepMounted?: boolean;
     onAddTab?: () => void;
     onTabChange?: (tabIndex: number) => void;
 };
@@ -176,6 +177,8 @@ type DropdownProps = {
         optionsFiltered: Options$1[];
         selectedOption: Options$1 | null | undefined;
         onClick: (option: Options$1) => void;
+        style?: CSSProperties;
+        dropdownRef?: React__default.RefObject<HTMLUListElement>;
     }) => ReactNode;
 } & Omit<InputProps, "value" | "onSelect">;
 declare const Dropdown: React__default.ForwardRefExoticComponent<{
@@ -203,6 +206,8 @@ declare const Dropdown: React__default.ForwardRefExoticComponent<{
         optionsFiltered: Options$1[];
         selectedOption: Options$1 | null | undefined;
         onClick: (option: Options$1) => void;
+        style?: CSSProperties;
+        dropdownRef?: React__default.RefObject<HTMLUListElement>;
     }) => ReactNode) | undefined;
 } & Omit<InputProps, "onSelect" | "value"> & React__default.RefAttributes<HTMLInputElement>>;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rovula/ui",
-  "version": "0.0.62",
+  "version": "0.0.63",
   "main": "dist/cjs/bundle.js",
   "module": "dist/esm/bundle.js",
   "types": "dist/index.d.ts",

package/src/components/Dropdown/Dropdown.tsx

@@ -1,14 +1,16 @@
 import React, {
+  CSSProperties,
   Fragment,
   ReactNode,
   forwardRef,
   useCallback,
   useEffect,
+  useImperativeHandle,
   useMemo,
   useRef,
   useState,
 } from "react";
-
+import * as Portal from "@radix-ui/react-portal";
 import TextInput, { InputProps } from "../TextInput/TextInput";
 import {
   customInputVariant,
@@ -57,6 +59,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">;
 
@@ -96,6 +100,12 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
     const [textValue, setTextValue] = useState("");
     const keyCode = useRef("");
 
+    const dropdownRef = useRef<HTMLUListElement>(null);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const [dropdownStyles, setDropdownStyles] = useState({});
+
+    useImperativeHandle(ref, () => inputRef?.current as HTMLInputElement);
+
     useEffect(() => {
       setSelectedOption(value);
       setTextValue(value?.label ?? "");
@@ -130,12 +140,51 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
       );
     }, [options, filterMode, textValue]);
 
+    const updateDropdownPosition = useCallback(() => {
+      if (inputRef.current) {
+        const rect = inputRef.current.getBoundingClientRect();
+        const dropdownHeight = dropdownRef.current?.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,
         });
       }
 
@@ -145,6 +194,8 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             "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
           )}
+          style={dropdownStyles}
+          ref={dropdownRef}
         >
           {optionsFiltered.map((option) => {
             if (option.renderLabel) {
@@ -265,7 +316,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
             </div>
           }
           {...props}
-          ref={ref}
+          ref={inputRef}
           readOnly={!filterMode}
           value={textValue}
           onChange={handleOnChangeText}
@@ -288,7 +339,7 @@ const Dropdown = forwardRef<HTMLInputElement, DropdownProps>(
           onBlur={handleOnBlur}
           onKeyDown={handleOnKeyDown}
         />
-        {isFocused && renderOptions()}
+        {isFocused && <Portal.Root>{renderOptions()}</Portal.Root>}
       </div>
     );
   }

package/src/components/Input/Input.tsx

@@ -21,6 +21,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
       type = "text",
       size = "md",
       variant = "outline",
+      rounded = "normal",
       fullwidth = false,
       disabled = false,
       error = false,
@@ -41,6 +42,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(
             error,
             hiddenPlaceholder,
             disabled,
+            rounded,
           }),
           className
         )}

package/src/components/Tabs/Tabs.tsx

@@ -36,6 +36,7 @@ type TabsProps = {
   leftAction?: React.ReactNode;
   rightAction?: React.ReactNode;
   disabled?: boolean;
+  keepMounted?: boolean;
   onAddTab?: () => void;
   onTabChange?: (tabIndex: number) => void;
 };
@@ -49,6 +50,7 @@ const Tabs: React.FC<TabsProps> = ({
   enableAddTabButton = false,
   keepIconSpace = true,
   disabled = false,
+  keepMounted = false,
   tabMode = "start",
   className,
   tabBarClassName,
@@ -78,53 +80,54 @@ const Tabs: React.FC<TabsProps> = ({
     }
   }, [value]);
 
-  // const updateSliderStyle = () => {
-  //   const activeTabElement = tabRefs.current[activeTab];
-  //   if (activeTabElement) {
-  //     setSliderStyle({
-  //       width: `${activeTabElement.offsetWidth}px`,
-  //       transform: `translateX(${activeTabElement.offsetLeft}px)`,
-  //     });
-  //   }
-  // };
+  const updateSliderStyle = () => {
+    const activeTabElement = tabRefs.current[activeTab];
+    if (activeTabElement) {
+      setSliderStyle({
+        width: `${activeTabElement.offsetWidth}px`,
+        transform: `translateX(${activeTabElement.offsetLeft}px)`,
+      });
+    }
+  };
+
+  useEffect(() => {
+    let timeout: NodeJS.Timeout;
 
-  // useEffect(() => {
-  //   let timer: NodeJS.Timeout;
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
 
-  //   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)`,
+        });
 
-  //     // 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();
+    }
 
-  //       // Trigger reflow
-  //       timer = setTimeout(() => {
-  //         updateSliderStyle();
-  //       }, 50);
-  //     }
-  //   } else {
-  //     updateSliderStyle();
-  //   }
+    const handleResize = () => {
+      updateSliderStyle();
+    };
 
-  //   const handleResize = () => {
-  //     updateSliderStyle();
-  //   };
+    window.addEventListener("resize", handleResize);
+    return () => {
+      window.removeEventListener("resize", handleResize);
 
-  //   window.addEventListener("resize", handleResize);
-  //   return () => {
-  //     window.removeEventListener("resize", handleResize);
-  //     if (timer) {
-  //       clearTimeout(timer);
-  //     }
-  //   };
-  // }, [activeTab, tabs, tabMode, keepIconSpace]);
+      if (timeout) {
+        clearTimeout(timeout);
+      }
+    };
+  }, [activeTab, tabs, tabMode, keepIconSpace]);
 
   return (
     <div className={cn("w-full", className)}>
@@ -240,7 +243,19 @@ const Tabs: React.FC<TabsProps> = ({
         id={`tab-content-${activeTab}`}
         aria-labelledby={`tab-${activeTab}`}
       >
-        {tabs[activeTab]?.content}
+        {tabs.map((tab, idx) => {
+          if (!keepMounted && activeTab !== idx) {
+            return null;
+          }
+          return (
+            <div
+              key={tab.id ?? idx}
+              className={`transition ${activeTab === idx ? "block" : "hidden"}`}
+            >
+              {tab.content}
+            </div>
+          );
+        })}
       </div>
     </div>
   );