nntc-ui 0.0.24 → 0.0.26

package/index.d.ts

@@ -210,6 +210,7 @@ interface Item$1<T> {
     name?: string;
     value: T;
     icon?: ReactNode | string;
+    onClick?: () => void;
 }
 
 type Size$1 = 'medium' | 'small';
@@ -221,6 +222,7 @@ interface Props$8<T> {
     filled?: boolean;
     isVertical?: boolean;
     disableBorder?: boolean;
+    allowDeselect?: boolean;
 }
 declare function Tabs<T>(props: UiProps<Props$8<T>>): react_jsx_runtime.JSX.Element;
 

package/index.js

@@ -2020,15 +2020,24 @@ function Tabs(props) {
     filled: filled7 = false,
     isVertical = false,
     disableBorder: disableBorder2 = false,
+    allowDeselect = false,
     classes
   } = props;
   const [isMounted, setIsMounted] = useState8(false);
   const [selectedTab, setSelectedTab] = useState8(defaultSelected);
-  const handleClick = (newValue) => () => {
-    setSelectedTab(newValue);
+  const handleClick = (item3) => () => {
+    if (item3.onClick) {
+      item3.onClick();
+      return;
+    }
+    if (allowDeselect && selectedTab === item3.value) {
+      setSelectedTab(void 0);
+    } else {
+      setSelectedTab(item3.value);
+    }
   };
   useEffect5(() => {
-    if (isMounted && !!selectedTab) {
+    if (isMounted) {
       onChange?.(selectedTab);
     }
     if (!isMounted) {
@@ -2046,51 +2055,55 @@ function Tabs(props) {
         tabs_exports[size],
         classes?.root
       ),
-      children: items2.map((item3) => /* @__PURE__ */ jsxs13(
-        "div",
-        {
-          className: classnames15(
-            tab,
-            filled7 && tabFilled,
-            isVertical && tabVertical,
-            disableBorder2 && disableBorder,
-            selectedTab === item3.value ? selected2 : void 0,
-            selectedTab === item3.value && filled7 ? selectedFilled : void 0,
-            classes?.tab,
-            selectedTab === item3.value ? classes?.tabSelected : void 0
-          ),
-          onClick: handleClick(item3.value),
-          children: [
-            /* @__PURE__ */ jsxs13(
-              "div",
-              {
-                className: classnames15(
-                  tabTitle,
-                  classes?.tabTitle,
-                  selectedTab === item3.value ? classes?.tabSelectedTitle : void 0
-                ),
-                children: [
-                  item3.icon && /* @__PURE__ */ jsx24("span", { className: tabIcon, children: typeof item3.icon === "string" ? /* @__PURE__ */ jsx24("span", { className: tabIcon, dangerouslySetInnerHTML: { __html: item3.icon } }) : item3.icon }),
-                  item3.name && /* @__PURE__ */ jsx24("span", { title: item3.name, children: item3.name })
-                ]
-              }
+      children: items2.map((item3) => {
+        const isButton = !!item3.onClick;
+        const isSelected = !isButton && selectedTab === item3.value;
+        return /* @__PURE__ */ jsxs13(
+          "div",
+          {
+            className: classnames15(
+              tab,
+              filled7 && tabFilled,
+              isVertical && tabVertical,
+              disableBorder2 && disableBorder,
+              isSelected ? selected2 : void 0,
+              isSelected && filled7 ? selectedFilled : void 0,
+              classes?.tab,
+              isSelected ? classes?.tabSelected : void 0
             ),
-            /* @__PURE__ */ jsx24(
-              "div",
-              {
-                className: classnames15(
-                  tabBorder,
-                  isVertical && tabBorderVertical,
-                  disableBorder2 && disableBorder,
-                  classes?.tabBorder,
-                  selectedTab === item3.value ? classes?.tabSelectedBorder : void 0
-                )
-              }
-            )
-          ]
-        },
-        `tab-${item3.value}`
-      ))
+            onClick: handleClick(item3),
+            children: [
+              /* @__PURE__ */ jsxs13(
+                "div",
+                {
+                  className: classnames15(
+                    tabTitle,
+                    classes?.tabTitle,
+                    isSelected ? classes?.tabSelectedTitle : void 0
+                  ),
+                  children: [
+                    item3.icon && /* @__PURE__ */ jsx24("span", { className: tabIcon, children: typeof item3.icon === "string" ? /* @__PURE__ */ jsx24("span", { className: tabIcon, dangerouslySetInnerHTML: { __html: item3.icon } }) : item3.icon }),
+                    item3.name && /* @__PURE__ */ jsx24("span", { title: item3.name, children: item3.name })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx24(
+                "div",
+                {
+                  className: classnames15(
+                    tabBorder,
+                    isVertical && tabBorderVertical,
+                    disableBorder2 && disableBorder,
+                    classes?.tabBorder,
+                    isSelected ? classes?.tabSelectedBorder : void 0
+                  )
+                }
+              )
+            ]
+          },
+          `tab-${item3.value}`
+        );
+      })
     }
   );
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nntc-ui",
-  "version": "0.0.24",
+  "version": "0.0.26",
   "author": "NNTC",
   "description": "React UI-kit for NNTC",
   "type": "module",