next-helios-fe 1.8.20 → 1.8.21

package/package.json

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

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

@@ -12,15 +12,23 @@ interface TabProps {
   options?: {
     variant?: "vertical" | "horizontal";
     border?: boolean;
+    disablePadding?: boolean;
   };
   onChangeTab?: (tab: any) => void;
+  onCloseTab?: (tab: any) => void;
 }
 
 interface TabComponent extends React.FC<TabProps> {
   Window: React.FC<WindowProps>;
 }
 
-export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
+export const Tab: TabComponent = ({
+  children,
+  tabs,
+  options,
+  onChangeTab,
+  onCloseTab,
+}) => {
   const childrenList = React.Children.toArray(children);
   const windowList = childrenList.filter((child) => {
     return (child as React.ReactElement).type === Tab.Window;
@@ -48,21 +56,45 @@ export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
         <div className="flex overflow-auto [&::-webkit-scrollbar]:hidden">
           {tabs?.slice(0, childrenList?.length).map((tab, index) => {
             return (
-              <button
-                key={index}
-                type="button"
-                className={`flex items-center gap-2 px-6 pt-2 pb-1.5 border-b-2 whitespace-nowrap duration-300 ${
-                  activeTab === index
-                    ? "text-primary border-primary"
-                    : "border-transparent hover:text-primary hover:border-primary-transparent"
-                }`}
-                onClick={() => {
-                  setActiveTab(index);
-                }}
-              >
-                {tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
-                {tab.title}
-              </button>
+              <div className="relative flex items-center">
+                <button
+                  key={index}
+                  type="button"
+                  className={`flex items-center gap-2 pt-2 pb-1.5 border-b-2 select-none whitespace-nowrap duration-300 ${
+                    activeTab === index
+                      ? "text-primary border-primary"
+                      : "border-transparent hover:text-primary hover:border-primary-transparent"
+                  } ${
+                    onCloseTab && childrenList.length !== 1
+                      ? "ps-6 pe-10"
+                      : "px-6"
+                  }`}
+                  onClick={() => {
+                    setActiveTab(index);
+                  }}
+                >
+                  {tab?.icon && <Icon icon={tab?.icon} className="text-lg" />}
+                  {tab.title}
+                </button>
+                {onCloseTab && childrenList.length !== 1 && (
+                  <button
+                    type="button"
+                    className="absolute right-2 p-0.5 rounded-full hover:text-warning"
+                    onClick={() => {
+                      setActiveTab(
+                        activeTab === index
+                          ? index === 0
+                            ? index
+                            : index - 1
+                          : activeTab
+                      );
+                      onCloseTab(index);
+                    }}
+                  >
+                    <Icon icon="pajamas:close" />
+                  </button>
+                )}
+              </div>
             );
           })}
         </div>
@@ -73,7 +105,7 @@ export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
               <button
                 key={index}
                 type="button"
-                className={`flex items-center gap-2 px-6 pt-2 pb-1.5 border-b-2 lg:border-b-0 border-r-0 lg:border-r-2 text-left whitespace-nowrap duration-300 ${
+                className={`flex items-center gap-2 px-6 pt-2 pb-1.5 border-b-2 lg:border-b-0 border-r-0 lg:border-r-2 text-left select-none whitespace-nowrap duration-300 ${
                   activeTab === index
                     ? "text-primary border-primary"
                     : "border-transparent hover:text-primary hover:border-primary-transparent"
@@ -91,9 +123,11 @@ export const Tab: TabComponent = ({ children, tabs, options, onChangeTab }) => {
       )}
       <div
         className={`flex-1 overflow-auto ${
-          options?.variant !== "horizontal"
-            ? "px-6 py-8"
-            : "px-6 lg:px-8 py-8 lg:py-6"
+          !options?.disablePadding
+            ? options?.variant !== "horizontal"
+              ? "px-6 py-8"
+              : "px-6 lg:px-8 py-8 lg:py-6"
+            : ""
         }`}
       >
         {windowList[activeTab]}