@dxc-technology/halstack-react 15.1.0 → 15.1.1

package/dist/index.d.mts

@@ -3048,7 +3048,7 @@ type TabCommonProps = {
      */
     notificationNumber?: boolean | number;
 };
-type TabLabelProps = TabCommonProps & {
+type TabLabelProps = {
     /**
      * Tab label.
      */
@@ -3058,7 +3058,7 @@ type TabLabelProps = TabCommonProps & {
      */
     icon?: string | SVG;
 };
-type TabIconProps = TabCommonProps & {
+type TabIconProps = {
     /**
      * Tab label.
      */
@@ -3071,15 +3071,14 @@ type TabIconProps = TabCommonProps & {
 type TabProps = {
     defaultActive?: boolean;
     active?: boolean;
-    icon?: string | SVG;
-    label: string;
     title?: string;
+    tabId?: string;
     disabled?: boolean;
     notificationNumber?: boolean | number;
     children: ReactNode;
     onClick?: () => void;
     onHover?: () => void;
-};
+} & (TabLabelProps | TabIconProps);
 type LegacyProps = {
     /**
      * Initially active tab, only when it is uncontrolled.
@@ -3093,7 +3092,7 @@ type LegacyProps = {
     /**
      * An array of objects representing the tabs.
      */
-    tabs?: (TabLabelProps | TabIconProps)[];
+    tabs?: (TabCommonProps & (TabLabelProps | TabIconProps))[];
     /**
      * Whether the icon should appear above or to the left of the label.
      */

package/dist/index.d.ts

@@ -3048,7 +3048,7 @@ type TabCommonProps = {
      */
     notificationNumber?: boolean | number;
 };
-type TabLabelProps = TabCommonProps & {
+type TabLabelProps = {
     /**
      * Tab label.
      */
@@ -3058,7 +3058,7 @@ type TabLabelProps = TabCommonProps & {
      */
     icon?: string | SVG;
 };
-type TabIconProps = TabCommonProps & {
+type TabIconProps = {
     /**
      * Tab label.
      */
@@ -3071,15 +3071,14 @@ type TabIconProps = TabCommonProps & {
 type TabProps = {
     defaultActive?: boolean;
     active?: boolean;
-    icon?: string | SVG;
-    label: string;
     title?: string;
+    tabId?: string;
     disabled?: boolean;
     notificationNumber?: boolean | number;
     children: ReactNode;
     onClick?: () => void;
     onHover?: () => void;
-};
+} & (TabLabelProps | TabIconProps);
 type LegacyProps = {
     /**
      * Initially active tab, only when it is uncontrolled.
@@ -3093,7 +3092,7 @@ type LegacyProps = {
     /**
      * An array of objects representing the tabs.
      */
-    tabs?: (TabLabelProps | TabIconProps)[];
+    tabs?: (TabCommonProps & (TabLabelProps | TabIconProps))[];
     /**
      * Whether the icon should appear above or to the left of the label.
      */

package/dist/index.js

@@ -12478,6 +12478,7 @@ var DxcTab2 = (0, import_react72.forwardRef)(
     icon,
     label,
     title,
+    tabId = label,
     disabled = false,
     active,
     notificationNumber = false,
@@ -12490,30 +12491,30 @@ var DxcTab2 = (0, import_react72.forwardRef)(
     const {
       iconPosition = "top",
       tabIndex = 0,
-      focusedLabel,
+      focusedTab,
       isControlled,
-      activeLabel,
+      activeTab,
       hasLabelAndIcon = false,
-      setActiveLabel,
+      setActiveTab,
       setActiveIndicatorWidth,
       setActiveIndicatorLeft
     } = (0, import_react72.useContext)(TabsContext_default) ?? {};
     (0, import_react72.useEffect)(() => {
-      if (focusedLabel === label) {
+      if (focusedTab === tabId) {
         tabRef?.current?.focus();
       }
-    }, [focusedLabel, label]);
+    }, [focusedTab, tabId]);
     (0, import_react72.useEffect)(() => {
-      if (activeLabel === label) {
+      if (activeTab === tabId) {
         setActiveIndicatorWidth?.(tabRef.current?.offsetWidth ?? 0);
         setActiveIndicatorLeft?.(tabRef.current?.offsetLeft ?? 0);
       }
-    }, [activeLabel, label, setActiveIndicatorWidth, setActiveIndicatorLeft]);
+    }, [activeTab, tabId, setActiveIndicatorWidth, setActiveIndicatorLeft]);
     (0, import_react72.useEffect)(() => {
       if (active) {
-        setActiveLabel?.(label);
+        setActiveTab?.(tabId ?? label ?? "");
       }
-    }, [active, label, setActiveLabel]);
+    }, [active, label, setActiveTab]);
     const handleOnKeyDown = (event) => {
       switch (event.key) {
         case " ":
@@ -12530,9 +12531,10 @@ var DxcTab2 = (0, import_react72.forwardRef)(
       {
         role: "tab",
         type: "button",
-        tabIndex: activeLabel === label && !disabled ? tabIndex : -1,
+        tabIndex: activeTab === tabId && !disabled ? tabIndex : -1,
         disabled,
-        "aria-selected": activeLabel === label,
+        "aria-label": label ?? tabId ?? "tab",
+        "aria-selected": activeTab === tabId,
         hasLabelAndIcon,
         iconPosition,
         ref: (anchorRef) => {
@@ -12548,7 +12550,8 @@ var DxcTab2 = (0, import_react72.forwardRef)(
         },
         onClick: () => {
           if (!isControlled) {
-            setActiveLabel?.(label);
+            setActiveTab?.(tabId ?? "");
+            console.log(tabId);
           }
           onClick();
         },
@@ -12564,7 +12567,7 @@ var DxcTab2 = (0, import_react72.forwardRef)(
               disabled,
               children: [
                 icon && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(TabIconContainer2, { hasLabelAndIcon, iconPosition, children: typeof icon === "string" ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Icon_default, { icon }) : icon }),
-                /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Label11, { disabled, activeLabel, label, children: label })
+                label && /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(Label11, { disabled, active: activeTab === tabId, label, children: label })
               ]
             }
           ),
@@ -12656,7 +12659,7 @@ var MainLabelContainer = import_styled_components67.default.div`
 `;
 var Label11 = import_styled_components67.default.span`
   display: inline;
-  color: ${(props) => props.disabled ? props.theme.disabledFontColor : props.activeLabel === props.label ? props.theme.selectedFontColor : props.theme.unselectedFontColor};
+  color: ${(props) => props.disabled ? props.theme.disabledFontColor : props.active ? props.theme.selectedFontColor : props.theme.unselectedFontColor};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.fontSize};
   font-style: ${(props) => props.disabled ? props.theme.disabledFontStyle : props.theme.fontStyle};
@@ -13251,14 +13254,14 @@ var DxcTabs2 = ({
     () => childrenArray.some((child) => (0, import_react75.isValidElement)(child) && child.props.icon && child.props.label),
     [childrenArray]
   );
-  const [activeTabLabel, setActiveTabLabel] = (0, import_react75.useState)(() => {
+  const [activeTab, setActiveTab] = (0, import_react75.useState)(() => {
     const hasActiveChild = childrenArray.some(
       (child) => (0, import_react75.isValidElement)(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     );
     const initialActiveTab = hasActiveChild ? childrenArray.find(
       (child) => (0, import_react75.isValidElement)(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     ) : childrenArray.find((child) => (0, import_react75.isValidElement)(child) && !child.props.disabled);
-    return (0, import_react75.isValidElement)(initialActiveTab) ? initialActiveTab.props.label : "";
+    return (0, import_react75.isValidElement)(initialActiveTab) ? initialActiveTab.props.label ?? initialActiveTab.props.tabId : "";
   });
   const [innerFocusIndex, setInnerFocusIndex] = (0, import_react75.useState)(null);
   const [activeIndicatorWidth, setActiveIndicatorWidth] = (0, import_react75.useState)(0);
@@ -13285,15 +13288,15 @@ var DxcTabs2 = ({
     return {
       iconPosition,
       tabIndex,
-      focusedLabel: (0, import_react75.isValidElement)(focusedChild) ? focusedChild.props.label : "",
+      focusedTab: (0, import_react75.isValidElement)(focusedChild) ? focusedChild.props.label ?? focusedChild.props.tabId : "",
       isControlled: childrenArray.some((child) => (0, import_react75.isValidElement)(child) && typeof child.props.active !== "undefined"),
-      activeLabel: activeTabLabel,
+      activeTab,
       hasLabelAndIcon,
-      setActiveLabel: setActiveTabLabel,
+      setActiveTab,
       setActiveIndicatorWidth,
       setActiveIndicatorLeft
     };
-  }, [iconPosition, tabIndex, innerFocusIndex, activeTabLabel, childrenArray, hasLabelAndIcon]);
+  }, [iconPosition, tabIndex, innerFocusIndex, activeTab, childrenArray, hasLabelAndIcon]);
   const scrollLeft = () => {
     const scrollWidth = (refTabList?.current?.offsetHeight ?? 0) * 0.75;
     let moveX = 0;
@@ -13326,21 +13329,23 @@ var DxcTabs2 = ({
     setCountClick(moveX);
   };
   const handleOnKeyDown = (event) => {
-    const activeTab = childrenArray.findIndex((child) => child.props.label === activeTabLabel);
+    const active = childrenArray.findIndex(
+      (child) => child.props.label ?? child.props.tabId === activeTab
+    );
     switch (event.key) {
       case "Left":
       case "ArrowLeft":
         event.preventDefault();
-        setInnerFocusIndex(getPreviousTabIndex2(childrenArray, innerFocusIndex === null ? activeTab : innerFocusIndex));
+        setInnerFocusIndex(getPreviousTabIndex2(childrenArray, innerFocusIndex === null ? active : innerFocusIndex));
         break;
       case "Right":
       case "ArrowRight":
         event.preventDefault();
-        setInnerFocusIndex(getNextTabIndex2(childrenArray, innerFocusIndex === null ? activeTab : innerFocusIndex));
+        setInnerFocusIndex(getNextTabIndex2(childrenArray, innerFocusIndex === null ? active : innerFocusIndex));
         break;
       case "Tab":
-        if (activeTab !== innerFocusIndex) {
-          setInnerFocusIndex(activeTab);
+        if (active !== innerFocusIndex) {
+          setInnerFocusIndex(active);
         }
         break;
       default:
@@ -13371,7 +13376,7 @@ var DxcTabs2 = ({
               tabWidth: activeIndicatorWidth,
               tabLeft: activeIndicatorLeft,
               "aria-disabled": childrenArray.some(
-                (child) => (0, import_react75.isValidElement)(child) && activeTabLabel === child.props.label && child.props.disabled
+                (child) => (0, import_react75.isValidElement)(child) && activeTab === (child.props.label ?? child.props.tabId) && child.props.disabled
               )
             }
           )
@@ -13391,7 +13396,7 @@ var DxcTabs2 = ({
       ] })
     ] }) }),
     import_react75.Children.map(children, (child) => {
-      if ((0, import_react75.isValidElement)(child) && child.props.label === activeTabLabel) {
+      if ((0, import_react75.isValidElement)(child) && (child.props.label ?? child.props.tabId) === activeTab) {
         return child.props.children;
       }
       return null;

package/dist/index.mjs

@@ -12422,6 +12422,7 @@ var DxcTab2 = forwardRef16(
     icon,
     label,
     title,
+    tabId = label,
     disabled = false,
     active,
     notificationNumber = false,
@@ -12434,30 +12435,30 @@ var DxcTab2 = forwardRef16(
     const {
       iconPosition = "top",
       tabIndex = 0,
-      focusedLabel,
+      focusedTab,
       isControlled,
-      activeLabel,
+      activeTab,
       hasLabelAndIcon = false,
-      setActiveLabel,
+      setActiveTab,
       setActiveIndicatorWidth,
       setActiveIndicatorLeft
     } = useContext48(TabsContext_default) ?? {};
     useEffect23(() => {
-      if (focusedLabel === label) {
+      if (focusedTab === tabId) {
         tabRef?.current?.focus();
       }
-    }, [focusedLabel, label]);
+    }, [focusedTab, tabId]);
     useEffect23(() => {
-      if (activeLabel === label) {
+      if (activeTab === tabId) {
         setActiveIndicatorWidth?.(tabRef.current?.offsetWidth ?? 0);
         setActiveIndicatorLeft?.(tabRef.current?.offsetLeft ?? 0);
       }
-    }, [activeLabel, label, setActiveIndicatorWidth, setActiveIndicatorLeft]);
+    }, [activeTab, tabId, setActiveIndicatorWidth, setActiveIndicatorLeft]);
     useEffect23(() => {
       if (active) {
-        setActiveLabel?.(label);
+        setActiveTab?.(tabId ?? label ?? "");
       }
-    }, [active, label, setActiveLabel]);
+    }, [active, label, setActiveTab]);
     const handleOnKeyDown = (event) => {
       switch (event.key) {
         case " ":
@@ -12474,9 +12475,10 @@ var DxcTab2 = forwardRef16(
       {
         role: "tab",
         type: "button",
-        tabIndex: activeLabel === label && !disabled ? tabIndex : -1,
+        tabIndex: activeTab === tabId && !disabled ? tabIndex : -1,
         disabled,
-        "aria-selected": activeLabel === label,
+        "aria-label": label ?? tabId ?? "tab",
+        "aria-selected": activeTab === tabId,
         hasLabelAndIcon,
         iconPosition,
         ref: (anchorRef) => {
@@ -12492,7 +12494,8 @@ var DxcTab2 = forwardRef16(
         },
         onClick: () => {
           if (!isControlled) {
-            setActiveLabel?.(label);
+            setActiveTab?.(tabId ?? "");
+            console.log(tabId);
           }
           onClick();
         },
@@ -12508,7 +12511,7 @@ var DxcTab2 = forwardRef16(
               disabled,
               children: [
                 icon && /* @__PURE__ */ jsx75(TabIconContainer2, { hasLabelAndIcon, iconPosition, children: typeof icon === "string" ? /* @__PURE__ */ jsx75(Icon_default, { icon }) : icon }),
-                /* @__PURE__ */ jsx75(Label11, { disabled, activeLabel, label, children: label })
+                label && /* @__PURE__ */ jsx75(Label11, { disabled, active: activeTab === tabId, label, children: label })
               ]
             }
           ),
@@ -12600,7 +12603,7 @@ var MainLabelContainer = styled67.div`
 `;
 var Label11 = styled67.span`
   display: inline;
-  color: ${(props) => props.disabled ? props.theme.disabledFontColor : props.activeLabel === props.label ? props.theme.selectedFontColor : props.theme.unselectedFontColor};
+  color: ${(props) => props.disabled ? props.theme.disabledFontColor : props.active ? props.theme.selectedFontColor : props.theme.unselectedFontColor};
   font-family: ${(props) => props.theme.fontFamily};
   font-size: ${(props) => props.theme.fontSize};
   font-style: ${(props) => props.disabled ? props.theme.disabledFontStyle : props.theme.fontStyle};
@@ -13195,14 +13198,14 @@ var DxcTabs2 = ({
     () => childrenArray.some((child) => isValidElement2(child) && child.props.icon && child.props.label),
     [childrenArray]
   );
-  const [activeTabLabel, setActiveTabLabel] = useState33(() => {
+  const [activeTab, setActiveTab] = useState33(() => {
     const hasActiveChild = childrenArray.some(
       (child) => isValidElement2(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     );
     const initialActiveTab = hasActiveChild ? childrenArray.find(
       (child) => isValidElement2(child) && (child.props.active || child.props.defaultActive) && !child.props.disabled
     ) : childrenArray.find((child) => isValidElement2(child) && !child.props.disabled);
-    return isValidElement2(initialActiveTab) ? initialActiveTab.props.label : "";
+    return isValidElement2(initialActiveTab) ? initialActiveTab.props.label ?? initialActiveTab.props.tabId : "";
   });
   const [innerFocusIndex, setInnerFocusIndex] = useState33(null);
   const [activeIndicatorWidth, setActiveIndicatorWidth] = useState33(0);
@@ -13229,15 +13232,15 @@ var DxcTabs2 = ({
     return {
       iconPosition,
       tabIndex,
-      focusedLabel: isValidElement2(focusedChild) ? focusedChild.props.label : "",
+      focusedTab: isValidElement2(focusedChild) ? focusedChild.props.label ?? focusedChild.props.tabId : "",
       isControlled: childrenArray.some((child) => isValidElement2(child) && typeof child.props.active !== "undefined"),
-      activeLabel: activeTabLabel,
+      activeTab,
       hasLabelAndIcon,
-      setActiveLabel: setActiveTabLabel,
+      setActiveTab,
       setActiveIndicatorWidth,
       setActiveIndicatorLeft
     };
-  }, [iconPosition, tabIndex, innerFocusIndex, activeTabLabel, childrenArray, hasLabelAndIcon]);
+  }, [iconPosition, tabIndex, innerFocusIndex, activeTab, childrenArray, hasLabelAndIcon]);
   const scrollLeft = () => {
     const scrollWidth = (refTabList?.current?.offsetHeight ?? 0) * 0.75;
     let moveX = 0;
@@ -13270,21 +13273,23 @@ var DxcTabs2 = ({
     setCountClick(moveX);
   };
   const handleOnKeyDown = (event) => {
-    const activeTab = childrenArray.findIndex((child) => child.props.label === activeTabLabel);
+    const active = childrenArray.findIndex(
+      (child) => child.props.label ?? child.props.tabId === activeTab
+    );
     switch (event.key) {
       case "Left":
       case "ArrowLeft":
         event.preventDefault();
-        setInnerFocusIndex(getPreviousTabIndex2(childrenArray, innerFocusIndex === null ? activeTab : innerFocusIndex));
+        setInnerFocusIndex(getPreviousTabIndex2(childrenArray, innerFocusIndex === null ? active : innerFocusIndex));
         break;
       case "Right":
       case "ArrowRight":
         event.preventDefault();
-        setInnerFocusIndex(getNextTabIndex2(childrenArray, innerFocusIndex === null ? activeTab : innerFocusIndex));
+        setInnerFocusIndex(getNextTabIndex2(childrenArray, innerFocusIndex === null ? active : innerFocusIndex));
         break;
       case "Tab":
-        if (activeTab !== innerFocusIndex) {
-          setInnerFocusIndex(activeTab);
+        if (active !== innerFocusIndex) {
+          setInnerFocusIndex(active);
         }
         break;
       default:
@@ -13315,7 +13320,7 @@ var DxcTabs2 = ({
               tabWidth: activeIndicatorWidth,
               tabLeft: activeIndicatorLeft,
               "aria-disabled": childrenArray.some(
-                (child) => isValidElement2(child) && activeTabLabel === child.props.label && child.props.disabled
+                (child) => isValidElement2(child) && activeTab === (child.props.label ?? child.props.tabId) && child.props.disabled
               )
             }
           )
@@ -13335,7 +13340,7 @@ var DxcTabs2 = ({
       ] })
     ] }) }),
     Children5.map(children, (child) => {
-      if (isValidElement2(child) && child.props.label === activeTabLabel) {
+      if (isValidElement2(child) && (child.props.label ?? child.props.tabId) === activeTab) {
         return child.props.children;
       }
       return null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dxc-technology/halstack-react",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/dxc-technology/halstack-react.git"