nntc-ui 0.0.27 → 0.0.28

package/index.css

@@ -148,6 +148,7 @@ button:disabled,
 button[disabled] {
   color: var(--theme-text-inactive);
   pointer-events: none;
+  -webkit-user-select: none;
   user-select: none;
   background-color: var(--theme-grey-700);
 }
@@ -1531,6 +1532,19 @@ button[disabled] {
 .tabs_tab.tabs_selected .tabs_tabIcon {
   color: var(--theme-text-primary);
 }
+.tabs_tab.tabs_disabled {
+  color: var(--theme-text-inactive);
+  pointer-events: none;
+  cursor: default;
+  -webkit-user-select: none;
+  user-select: none;
+}
+.tabs_tab.tabs_disabled .tabs_tabTitle > span {
+  color: var(--theme-text-inactive);
+}
+.tabs_tab.tabs_disabled .tabs_tabIcon {
+  color: var(--theme-text-inactive);
+}
 .tabs_tabs-story-wrapper {
   width: 600px;
 }

package/index.d.ts

@@ -211,6 +211,7 @@ interface Item$1<T> {
     value: T;
     icon?: ReactNode | string;
     onClick?: () => void;
+    isDisabled?: boolean;
 }
 
 type Size$1 = 'medium' | 'small';

package/index.js

@@ -720,7 +720,7 @@ function Select(props) {
     selected: selected5,
     classes,
     ref,
-    disabled,
+    disabled: disabled2,
     id,
     ...inputProps
   } = props;
@@ -734,7 +734,7 @@ function Select(props) {
   const inputClickHandler = useCallback2(
     (e) => {
       e.preventDefault();
-      if (!disabled)
+      if (!disabled2)
         popoverTargetRef?.current?.click();
     },
     [popoverTargetRef]
@@ -794,7 +794,7 @@ function Select(props) {
                   onChange: () => {
                   },
                   onClick: inputClickHandler,
-                  disabled
+                  disabled: disabled2
                 }
               ),
               !!icon6 && /* @__PURE__ */ jsx12("span", { onClick: inputClickHandler, className: classnames6(icon, classes?.icon), children: icon6 }),
@@ -1264,7 +1264,7 @@ var ColorPicker = (props) => {
     classes,
     placeholder,
     ref,
-    disabled,
+    disabled: disabled2,
     defaultValue,
     id,
     onValueChange,
@@ -1280,7 +1280,7 @@ var ColorPicker = (props) => {
   const inputClickHandler = useCallback5(
     (e) => {
       e.preventDefault();
-      if (!disabled)
+      if (!disabled2)
         popoverTargetRef?.current?.click();
     },
     [popoverTargetRef]
@@ -1318,7 +1318,7 @@ var ColorPicker = (props) => {
               onChange: () => {
               },
               onClick: inputClickHandler,
-              disabled
+              disabled: disabled2
             }
           ),
           /* @__PURE__ */ jsx15(
@@ -1670,7 +1670,7 @@ function MultiSelect(props) {
     selected: selected5,
     classes,
     ref,
-    disabled,
+    disabled: disabled2,
     id,
     titleType = "allValue",
     ...inputProps
@@ -1682,7 +1682,7 @@ function MultiSelect(props) {
   const inputClickHandler = useCallback6(
     (e) => {
       e.preventDefault();
-      if (!disabled)
+      if (!disabled2)
         popoverTargetRef?.current?.click();
     },
     [popoverTargetRef]
@@ -1743,7 +1743,7 @@ function MultiSelect(props) {
                   ...inputProps,
                   value: title2,
                   onClick: inputClickHandler,
-                  disabled,
+                  disabled: disabled2,
                   title: activeItems.map((i) => i.name).join(", ")
                 }
               ),
@@ -2244,6 +2244,7 @@ var tabs_exports = {};
 __export(tabs_exports, {
   default: () => tabs_default,
   disableBorder: () => disableBorder,
+  disabled: () => disabled,
   filled: () => filled6,
   iconOnly: () => iconOnly,
   medium: () => medium10,
@@ -2277,6 +2278,7 @@ var tabBorder = "tabs_tabBorder";
 var selected2 = "tabs_selected";
 var tabBorderVertical = "tabs_tabBorderVertical";
 var tabIcon = "tabs_tabIcon";
+var disabled = "tabs_disabled";
 var tabs_story_wrapper = "tabs_tabs-story-wrapper";
 var tabs_default = {
   root: root16,
@@ -2295,6 +2297,7 @@ var tabs_default = {
   selected: selected2,
   tabBorderVertical,
   tabIcon,
+  disabled,
   "tabs-story-wrapper": tabs_story_wrapper
 };
 
@@ -2316,6 +2319,9 @@ function Tabs(props) {
   const [isMounted, setIsMounted] = useState10(false);
   const [selectedTab, setSelectedTab] = useState10(defaultSelected);
   const handleClick = (item3) => () => {
+    if (item3.isDisabled) {
+      return;
+    }
     if (item3.onClick) {
       item3.onClick();
       return;
@@ -2358,8 +2364,10 @@ function Tabs(props) {
               disableBorder2 && disableBorder,
               isSelected ? selected2 : void 0,
               isSelected && filled7 ? selectedFilled : void 0,
+              item3.isDisabled && disabled,
               classes?.tab,
-              isSelected ? classes?.tabSelected : void 0
+              isSelected ? classes?.tabSelected : void 0,
+              item3.isDisabled ? classes?.tabDisabled : void 0
             ),
             onClick: handleClick(item3),
             children: [

package/package.json

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