nntc-ui 0.0.28 → 0.0.30

package/index.css

@@ -1474,8 +1474,13 @@ button[disabled] {
   display: flex;
   gap: 8px;
   align-items: center;
+}
+.tabs_medium .tabs_tabTitle {
   padding: 0 16px;
 }
+.tabs_small .tabs_tabTitle {
+  padding: 0 12px;
+}
 .tabs_tabTitle.tabs_iconOnly {
   gap: 0;
   padding: 0 8px;

package/index.d.ts

@@ -225,7 +225,16 @@ interface Props$8<T> {
     disableBorder?: boolean;
     allowDeselect?: boolean;
     showTooltips?: boolean;
-}
+    /** Использовать внешнее состояние вместо внутреннего.
+     *  При включении компонент не управляет состоянием самостоятельно, а использует переданные value и onChange
+     * */
+    useExternalState?: boolean;
+    /** Текущее значение выбранной вкладки. Используется только при useExternalState=true */
+    value?: T;
+}
+/**
+ * Компонент вкладок с поддержкой как внутреннего, так и внешнего состояния
+ * */
 declare function Tabs<T>(props: UiProps<Props$8<T>>): react_jsx_runtime.JSX.Element;
 
 interface TableCell {

package/index.js

@@ -2314,10 +2314,13 @@ function Tabs(props) {
     disableBorder: disableBorder2 = false,
     allowDeselect = false,
     showTooltips = false,
+    useExternalState = false,
+    value,
     classes
   } = props;
   const [isMounted, setIsMounted] = useState10(false);
   const [selectedTab, setSelectedTab] = useState10(defaultSelected);
+  const currentValue = useExternalState ? value : selectedTab;
   const handleClick = (item3) => () => {
     if (item3.isDisabled) {
       return;
@@ -2326,20 +2329,28 @@ function Tabs(props) {
       item3.onClick();
       return;
     }
-    if (allowDeselect && selectedTab === item3.value) {
-      setSelectedTab(void 0);
+    if (useExternalState) {
+      if (allowDeselect && currentValue === item3.value) {
+        onChange?.(void 0);
+      } else {
+        onChange?.(item3.value);
+      }
     } else {
-      setSelectedTab(item3.value);
+      if (allowDeselect && selectedTab === item3.value) {
+        setSelectedTab(void 0);
+      } else {
+        setSelectedTab(item3.value);
+      }
     }
   };
   useEffect5(() => {
-    if (isMounted) {
+    if (isMounted && !useExternalState) {
       onChange?.(selectedTab);
     }
     if (!isMounted) {
       setIsMounted(true);
     }
-  }, [selectedTab]);
+  }, [selectedTab, useExternalState]);
   return /* @__PURE__ */ jsx28(
     "div",
     {
@@ -2353,7 +2364,7 @@ function Tabs(props) {
       ),
       children: items2.map((item3) => {
         const isButton = !!item3.onClick;
-        const isSelected = !isButton && selectedTab === item3.value;
+        const isSelected = !isButton && currentValue === item3.value;
         const tabContent = /* @__PURE__ */ jsxs15(
           "div",
           {

package/package.json

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