next-helios-fe 1.8.107 → 1.8.109

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "next-helios-fe",
-  "version": "1.8.107",
+  "version": "1.8.109",
   "description": "",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/src/components/content-container/tab/index.tsx

@@ -1,5 +1,5 @@
 "use client";
-import React, { useState } from "react";
+import React, { useState, useEffect } from "react";
 import { Icon } from "@iconify/react";
 import { Window, type WindowProps } from "./window";
 
@@ -15,8 +15,9 @@ interface TabProps {
     disablePadding?: boolean;
   };
   cornerComponent?: React.ReactNode;
-  onChangeTab?: (tab: any) => void;
-  onCloseTab?: (tab: any) => void;
+  activeTab?: number;
+  onChangeTab?: (tab: { index: number; title: string }) => void;
+  onCloseTab?: (tab: number) => void;
 }
 
 interface TabComponent extends React.FC<TabProps> {
@@ -28,6 +29,7 @@ export const Tab: TabComponent = ({
   tabs,
   options,
   cornerComponent,
+  activeTab,
   onChangeTab,
   onCloseTab,
 }) => {
@@ -35,7 +37,13 @@ export const Tab: TabComponent = ({
   const windowList = childrenList.filter((child) => {
     return (child as React.ReactElement).type === Tab.Window;
   });
-  const [activeTab, setActiveTab] = useState(0);
+  const [tempActiveTab, setTempActiveTab] = useState(0);
+
+  useEffect(() => {
+    if (activeTab !== undefined) {
+      setTempActiveTab(activeTab);
+    }
+  }, [activeTab]);
 
   return (
     <div
@@ -54,7 +62,7 @@ export const Tab: TabComponent = ({
                   <button
                     type="button"
                     className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 pb-1.5 pt-2 duration-300 ${
-                      activeTab === index
+                      tempActiveTab === index
                         ? "border-primary text-primary"
                         : "border-transparent hover:border-primary-transparent hover:text-primary"
                     } ${
@@ -63,7 +71,9 @@ export const Tab: TabComponent = ({
                         : "px-6"
                     }`}
                     onClick={() => {
-                      setActiveTab(index);
+                      if (activeTab === undefined) {
+                        setTempActiveTab(index);
+                      }
 
                       if (onChangeTab) {
                         onChangeTab({
@@ -81,13 +91,15 @@ export const Tab: TabComponent = ({
                       type="button"
                       className="absolute right-2 rounded-full p-0.5 hover:text-warning"
                       onClick={() => {
-                        setActiveTab(
-                          activeTab === index
-                            ? index === 0
-                              ? index
-                              : index - 1
-                            : activeTab
-                        );
+                        if (activeTab === undefined) {
+                          setTempActiveTab(
+                            tempActiveTab === index
+                              ? index === 0
+                                ? index
+                                : index - 1
+                              : tempActiveTab
+                          );
+                        }
 
                         onCloseTab(index);
                       }}
@@ -114,12 +126,14 @@ export const Tab: TabComponent = ({
                   key={index}
                   type="button"
                   className={`flex select-none items-center gap-2 whitespace-nowrap border-b-2 border-r-0 px-6 pb-1.5 pt-2 text-left duration-300 lg:border-b-0 lg:border-r-2 ${
-                    activeTab === index
+                    tempActiveTab === index
                       ? "border-primary text-primary"
                       : "border-transparent hover:border-primary-transparent hover:text-primary"
                   }`}
                   onClick={() => {
-                    setActiveTab(index);
+                    if (activeTab === undefined) {
+                      setTempActiveTab(index);
+                    }
 
                     if (onChangeTab) {
                       onChangeTab({
@@ -149,7 +163,7 @@ export const Tab: TabComponent = ({
             : ""
         }`}
       >
-        {windowList[activeTab]}
+        {windowList[tempActiveTab]}
       </div>
     </div>
   );

package/src/components/form/input/date.tsx

@@ -115,7 +115,7 @@ export const Date: React.FC<DateProps> = ({
           {!options?.buttonOnly && (
             <input
               type="text"
-              className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
+              className={`w-full ps-4 pe-14 border-default border rounded-md bg-secondary-bg cursor-default placeholder:duration-300 placeholder:translate-x-0 focus:placeholder:translate-x-1 placeholder:text-silent focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled ${height}`}
               disabled={rest.disabled}
               readOnly
               value={

package/src/components/form/other/multipleSelect.tsx

@@ -62,9 +62,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
   onRemove,
   ...rest
 }) => {
+  const componentRef = useRef<HTMLDivElement>(null);
   const itemContainerRef = useRef<HTMLDivElement>(null);
   const inputRef = useRef<HTMLInputElement>(null);
-  const dropdownRef = useRef<HTMLButtonElement>(null);
+  const dropdownTriggerRef = useRef<HTMLButtonElement>(null);
   const [tempValue, setTempValue] = useState<string[]>([]);
   const [openDropdown, setOpenDropdown] = useState(false);
   const [inputHeight, setInputHeight] = useState<number>(0);
@@ -78,11 +79,16 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
       : "py-[5px]";
 
   useEffect(() => {
-    document.addEventListener("mousedown", (e) => {
-      if (e.target instanceof HTMLElement) {
+    function handleClickOutside(event: MouseEvent) {
+      if (
+        componentRef.current &&
+        !componentRef.current.contains(event.target as Node)
+      ) {
         setOpenDropdown(false);
       }
-    });
+    }
+
+    document.addEventListener("mousedown", handleClickOutside);
 
     const observer = new ResizeObserver((entries) => {
       for (let entry of entries) {
@@ -92,7 +98,10 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
 
     observer.observe(itemContainerRef.current!);
 
-    return () => observer.disconnect();
+    return () => {
+      document.removeEventListener("mousedown", handleClickOutside);
+      observer.disconnect();
+    };
   }, []);
 
   useEffect(() => {
@@ -117,7 +126,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
 
   return (
     <div className="relative">
-      <div className="flex flex-row-reverse items-end">
+      <div ref={componentRef} className="flex flex-row-reverse items-end">
         <label className={`flex flex-col gap-2 ${width}`}>
           {(label || description) && (
             <div className="flex justify-between items-center gap-2">
@@ -146,7 +155,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
               <input
                 ref={inputRef}
                 type="text"
-                className="w-full ps-4 pe-14 border border-default rounded-md bg-secondary-bg text-transparent cursor-pointer caret-transparent duration-150 placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:text-disabled disabled:cursor-default"
+                className="w-full ps-4 pe-14 border border-default rounded-md bg-secondary-bg text-transparent cursor-pointer caret-transparent duration-150 placeholder:duration-300 placeholder:text-silent focus:placeholder:translate-x-1 focus:outline-none focus:ring-1 focus:ring-primary focus:shadow focus:shadow-primary focus:border-primary-dark disabled:bg-secondary-light disabled:cursor-default"
                 style={{
                   height:
                     tempValue.length !== 0
@@ -170,7 +179,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                 onClick={(e) => {
                   e.preventDefault();
                   setOpenDropdown(true);
-                  dropdownRef.current?.click();
+                  dropdownTriggerRef.current?.click();
                   setDropdownWidth(
                     inputRef?.current?.getBoundingClientRect()?.width || 0
                   );
@@ -198,7 +207,7 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
               trigger={
                 <button
                   type="button"
-                  ref={dropdownRef}
+                  ref={dropdownTriggerRef}
                   className="w-0"
                   style={{
                     height:
@@ -229,6 +238,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                       e.preventDefault();
                       inputRef.current?.focus();
                       setOpenDropdown(false);
+                    } else if (e.key === "Tab") {
+                      setOpenDropdown(false);
                     }
                   }}
                 >
@@ -267,6 +278,8 @@ export const MultipleSelect: React.FC<MultipleSelectProps> = ({
                           e.preventDefault();
                           inputRef.current?.focus();
                           setOpenDropdown(false);
+                        } else if (e.key === "Tab") {
+                          setOpenDropdown(false);
                         }
                       }}
                     >

package/src/components/form/other/select.tsx

@@ -35,7 +35,7 @@ export const Select: React.FC<SelectProps> = ({
   const [openDropdown, setOpenDropdown] = useState(false);
   const [dropdownWidth, setDropdownWidth] = useState<number>(0);
   const inputRef = useRef<HTMLInputElement>(null);
-  const dropdownRef = useRef<HTMLButtonElement>(null);
+  const dropdownTriggerRef = useRef<HTMLButtonElement>(null);
   const width = options?.width === "fit" ? "w-fit" : "w-full";
   const height =
     options?.height === "short"
@@ -116,7 +116,7 @@ export const Select: React.FC<SelectProps> = ({
             onClick={(e) => {
               e.preventDefault();
               setOpenDropdown(true);
-              dropdownRef.current?.click();
+              dropdownTriggerRef.current?.click();
               setDropdownWidth(
                 inputRef?.current?.getBoundingClientRect()?.width || 0
               );
@@ -146,7 +146,7 @@ export const Select: React.FC<SelectProps> = ({
           trigger={
             <button
               type="button"
-              ref={dropdownRef}
+              ref={dropdownTriggerRef}
               className={`w-0 my-0.5 ${height}`}
               tabIndex={-1}
               disabled={rest.disabled ?? false}
@@ -162,6 +162,8 @@ export const Select: React.FC<SelectProps> = ({
                   e.preventDefault();
                   inputRef.current?.focus();
                   setOpenDropdown(false);
+                } else if (e.key === "Tab") {
+                  setOpenDropdown(false);
                 }
               }}
             >
@@ -195,6 +197,8 @@ export const Select: React.FC<SelectProps> = ({
                       e.preventDefault();
                       inputRef.current?.focus();
                       setOpenDropdown(false);
+                    } else if (e.key === "Tab") {
+                      setOpenDropdown(false);
                     }
                   }}
                 >