@dxc-technology/halstack-react 15.0.1 → 15.1.1

package/dist/index.js

@@ -2279,6 +2279,7 @@ var AccordionLabel = import_styled_components4.default.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-align: left;
 `;
 var SubLabel = import_styled_components4.default.span`
   height: 20px;
@@ -6190,13 +6191,15 @@ var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @_
           return newRows;
         });
       }
-    }
+    },
+    disabled: !rows.some((row2) => uniqueRowId in row2)
   }
 );
 var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
   "button",
   {
     type: "button",
+    disabled: !rows.some((row) => uniqueRowId in row),
     onClick: () => {
       let newRowsToRender = [...rows];
       if (!triggerRow.visibleChildren) {
@@ -6255,13 +6258,14 @@ var renderCheckbox = (rows, row, uniqueRowId, selectedRows, onSelectRows) => /*
         getParentSelectedState(rows, row.parentKey, uniqueRowId, selected, checked);
       }
       onSelectRows(selected);
-    }
+    },
+    disabled: !rows.some((row2) => uniqueRowId in row2)
   }
 );
 var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, colorsTheme, onSelectRows) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(HalstackProvider, { advancedTheme: overwriteTheme(colorsTheme), children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   Checkbox_default,
   {
-    checked: !rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId))),
+    checked: rows.length > 0 && !rows.some((row) => !selectedRows.has(rowKeyGetter(row, uniqueRowId))),
     onChange: (checked) => {
       const updatedSelection = new Set(selectedRows);
       if (checked) {
@@ -6280,7 +6284,8 @@ var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, colorsTheme, onSele
         });
       }
       onSelectRows(updatedSelection);
-    }
+    },
+    disabled: rows.length === 0 || !rows.some((row) => uniqueRowId in row)
   }
 ) });
 var rowKeyGetter = (row, uniqueRowId) => {
@@ -6334,7 +6339,7 @@ var sortHierarchyRows = (rows, sortColumns, sortFunctions, uniqueRowId) => {
     true
   );
   while (sortedChildren.length) {
-    if (uniqueRowId) {
+    if (uniqueRowId && sortedChildren.some((row) => uniqueRowId in row)) {
       sortedChildren = sortedChildren.reduce(
         (remainingChilds, child) => {
           const parentIndex = parentsSorted.findIndex(
@@ -6387,6 +6392,9 @@ var getChildrenSelection = (rowList, uniqueRowId, selectedRows, checked) => {
   });
 };
 var getParentSelectedState = (rowList, parentKeyValue, uniqueRowId, selectedRows, checkedStateToMatch) => {
+  if (!rowList.some((row) => uniqueRowId in row)) {
+    return;
+  }
   const parentRow = rowFinderBasedOnId(rowList, uniqueRowId, parentKeyValue);
   if (!parentRow) {
     return;
@@ -7711,6 +7719,142 @@ var Table_default = DxcTable;
 
 // src/data-grid/DataGrid.tsx
 var import_jsx_runtime44 = require("react/jsx-runtime");
+var ActionContainer = import_styled_components37.default.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  width: 100%;
+`;
+var HierarchyContainer = import_styled_components37.default.div`
+  padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`};
+  button {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0px;
+    border: 0px;
+    width: 100%;
+    height: ${(props) => props.theme.dataRowHeight}px;
+    background: transparent;
+    text-align: left;
+    font-size: ${(props) => props.theme.dataFontSize};
+    font-family: inherit;
+    color: inherit;
+    cursor: pointer;
+  }
+`;
+var DataGridContainer = import_styled_components37.default.div`
+  width: 100%;
+  height: ${(props) => props.paginatorRendered ? `calc(100% - 50px)` : `100%`};
+  .rdg {
+    border-radius: 4px;
+    height: 100%;
+    border: 0px;
+    &::-webkit-scrollbar {
+      width: 8px;
+      height: 8px;
+    }
+    &::-webkit-scrollbar-thumb {
+      background-color: ${(props) => props.theme.scrollBarThumbColor};
+      border-radius: 6px;
+    }
+    &::-webkit-scrollbar-track {
+      background-color: ${(props) => props.theme.scrollBarTrackColor};
+      border-radius: 6px;
+    }
+  }
+  .rdg-cell:has(> #action) {
+    padding: 0px;
+  }
+  .rdg-cell {
+    display: grid;
+    align-items: center;
+    width: 100%;
+    padding: 0px ${(props) => props.theme.dataPaddingRight} 0 ${(props) => props.theme.dataPaddingLeft};
+    font-family: ${(props) => props.theme.dataFontFamily};
+    font-size: ${(props) => props.theme.dataFontSize};
+    font-style: ${(props) => props.theme.dataFontStyle};
+    font-weight: ${(props) => props.theme.dataFontWeight};
+    color: ${(props) => props.theme.dataFontColor};
+    text-transform: ${(props) => props.theme.dataFontTextTransform};
+    line-height: ${(props) => props.theme.dataTextLineHeight};
+    border-bottom: ${(props) => `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
+    border-right: ${(props) => `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
+    background-color: ${(props) => props.theme.dataBackgroundColor};
+    outline-color: ${(props) => props.theme.focusColor} !important;
+    .rdg-text-editor:focus {
+      border-color: transparent;
+      background-color: transparent;
+      color: ${(props) => props.theme.dataFontColor};
+    }
+  }
+  .rdg-header-row {
+    border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
+    border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
+    .rdg-cell {
+      font-family: ${(props) => props.theme.headerFontFamily};
+      font-size: ${(props) => props.theme.headerFontSize};
+      font-style: ${(props) => props.theme.headerFontStyle};
+      font-weight: ${(props) => props.theme.headerFontWeight};
+      color: ${(props) => props.theme.headerFontColor};
+      text-transform: ${(props) => props.theme.headerFontTextTransform};
+      padding: 0px ${(props) => props.theme.headerPaddingRight} 0 ${(props) => props.theme.headerPaddingLeft};
+      line-height: ${(props) => props.theme.headerTextLineHeight};
+      background-color: ${(props) => props.theme.headerBackgroundColor};
+      .sortIconContainer {
+        margin-left: 0.5rem;
+        display: flex;
+        height: 100%;
+        align-items: center;
+      }
+    }
+  }
+  .rdg-row {
+    .rdg-cell:last-child {
+      border-right: 0px;
+    }
+  }
+  .rdg-summary-row {
+    background-color: #fafafa;
+    .rdg-cell {
+      border: 0px;
+      font-weight: 600;
+    }
+  }
+  .ellipsis-cell {
+    text-overflow: ellipsis;
+    overflow: hidden;
+    white-space: nowrap;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+  }
+  .align-left {
+    text-align: left;
+    justify-content: flex-start;
+  }
+  .align-center {
+    text-align: center;
+    justify-content: center;
+  }
+  .align-right {
+    text-align: right;
+    justify-content: flex-end;
+  }
+  .header-align-left {
+    text-align: left;
+  }
+  .header-align-center {
+    text-align: center;
+  }
+  .header-align-right {
+    text-align: right;
+  }
+`;
 var DxcDataGrid = ({
   columns,
   rows,
@@ -7728,11 +7872,12 @@ var DxcDataGrid = ({
   itemsPerPageFunction,
   onSort,
   onPageChange,
-  totalItems
+  totalItems,
+  defaultPage = 1
 }) => {
   const [rowsToRender, setRowsToRender] = (0, import_react42.useState)(rows);
   const colorsTheme = (0, import_react42.useContext)(HalstackContext);
-  const [page, changePage] = (0, import_react42.useState)(1);
+  const [page, changePage] = (0, import_react42.useState)(defaultPage);
   const goToPage = (newPage) => {
     if (onPageChange) {
       onPageChange(newPage);
@@ -7814,7 +7959,21 @@ var DxcDataGrid = ({
     setColumnsOrder(Array.from({ length: columnsToRender.length }, (_, index) => index));
   }, [columnsToRender.length]);
   (0, import_react42.useEffect)(() => {
-    setRowsToRender(rows);
+    const finalRows = [...rows];
+    if (expandable) {
+      rows.forEach((row, index) => {
+        if (row.contentIsExpanded && !rows.some((row2) => row2[uniqueRowId] === `${rowKeyGetter(row2, uniqueRowId)}_expanded`)) {
+          addRow(finalRows, index + 1, {
+            isExpandedChildContent: row.contentIsExpanded,
+            [uniqueRowId]: `${rowKeyGetter(row, uniqueRowId)}_expanded`,
+            expandedChildContent: row.expandedContent,
+            triggerRowKey: rowKeyGetter(row, uniqueRowId),
+            expandedContentHeight: row.expandedContentHeight
+          });
+        }
+      });
+    }
+    setRowsToRender(finalRows);
   }, [rows]);
   const reorderedColumns = (0, import_react42.useMemo)(
     () => (
@@ -7851,23 +8010,28 @@ var DxcDataGrid = ({
   const sortedRows = (0, import_react42.useMemo)(() => {
     const sortFunctions = getCustomSortFn(columns);
     if (!onSort) {
-      if (expandable && sortColumns.length > 0) {
-        const innerSortedRows = sortRows(
-          rowsToRender.filter((row) => !row.isExpandedChildContent),
-          sortColumns,
-          sortFunctions
-        );
-        rowsToRender.filter((row) => row.isExpandedChildContent).map(
-          (expandedRow) => addRow(
-            innerSortedRows,
-            innerSortedRows.findIndex((trigger) => rowKeyGetter(trigger, uniqueRowId) === expandedRow.triggerRowKey) + 1,
-            expandedRow
-          )
-        );
-        return innerSortedRows;
-      }
-      if (!expandable && sortColumns.length > 0 && uniqueRowId) {
-        return sortHierarchyRows(rowsToRender, sortColumns, sortFunctions, uniqueRowId);
+      if (sortColumns.length > 0 && uniqueRowId) {
+        if (expandable) {
+          const innerSortedRows = sortRows(
+            rowsToRender.filter((row) => !row.isExpandedChildContent),
+            sortColumns,
+            sortFunctions
+          );
+          if (innerSortedRows.some((row) => uniqueRowId in row)) {
+            rowsToRender.filter((row) => row.isExpandedChildContent).map(
+              (expandedRow) => addRow(
+                innerSortedRows,
+                innerSortedRows.findIndex(
+                  (trigger) => rowKeyGetter(trigger, uniqueRowId) === expandedRow.triggerRowKey
+                ) + 1,
+                expandedRow
+              )
+            );
+            return innerSortedRows;
+          }
+        } else {
+          return sortHierarchyRows(rowsToRender, sortColumns, sortFunctions, uniqueRowId);
+        }
       }
     }
     return rowsToRender;
@@ -7883,7 +8047,7 @@ var DxcDataGrid = ({
     }
     return !showPaginator || onPageChange ? sortedRows : getPaginatedNodes(sortedRows, uniqueRowId, minItemsPerPageIndex, maxItemsPerPageIndex + 1);
   }, [sortedRows, minItemsPerPageIndex, maxItemsPerPageIndex]);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_styled_components37.ThemeProvider, { theme: colorsTheme.dataGrid, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DataGridContainer, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_styled_components37.ThemeProvider, { theme: colorsTheme.dataGrid, children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(DataGridContainer, { paginatorRendered: showPaginator && (totalItems ?? rows.length) > itemsPerPage, children: [
     /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       import_react_data_grid2.default,
       {
@@ -7903,7 +8067,7 @@ var DxcDataGrid = ({
         className: "fill-grid"
       }
     ),
-    showPaginator && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    showPaginator && (totalItems ?? rows.length) > itemsPerPage && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
       Paginator_default,
       {
         totalItems: totalItems ?? rows.length,
@@ -7917,140 +8081,6 @@ var DxcDataGrid = ({
     )
   ] }) });
 };
-var ActionContainer = import_styled_components37.default.div`
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  width: 100%;
-`;
-var HierarchyContainer = import_styled_components37.default.div`
-  padding-left: ${(props) => `calc(${props.theme.dataPaddingLeft} * ${props.level})`};
-  button {
-    display: grid;
-    grid-template-columns: auto 1fr;
-    align-items: center;
-    gap: 0.5rem;
-    padding: 0px;
-    border: 0px;
-    width: 100%;
-    height: ${(props) => props.theme.dataRowHeight}px;
-    background: transparent;
-    text-align: left;
-    font-size: ${(props) => props.theme.dataFontSize};
-    font-family: inherit;
-    color: inherit;
-    cursor: pointer;
-  }
-`;
-var DataGridContainer = import_styled_components37.default.div`
-  width: 100%;
-  height: 100%;
-  .rdg {
-    border-radius: 4px;
-    height: 100%;
-    border: 0px;
-    &::-webkit-scrollbar {
-      width: 8px;
-      height: 8px;
-    }
-    &::-webkit-scrollbar-thumb {
-      background-color: ${(props) => props.theme.scrollBarThumbColor};
-      border-radius: 6px;
-    }
-    &::-webkit-scrollbar-track {
-      background-color: ${(props) => props.theme.scrollBarTrackColor};
-      border-radius: 6px;
-    }
-  }
-  .rdg-cell:has(> #action) {
-    padding: 0px;
-  }
-  .rdg-cell {
-    display: grid;
-    align-items: center;
-    width: 100%;
-    padding: 0px ${(props) => props.theme.dataPaddingRight} 0 ${(props) => props.theme.dataPaddingLeft};
-    font-family: ${(props) => props.theme.dataFontFamily};
-    font-size: ${(props) => props.theme.dataFontSize};
-    font-style: ${(props) => props.theme.dataFontStyle};
-    font-weight: ${(props) => props.theme.dataFontWeight};
-    color: ${(props) => props.theme.dataFontColor};
-    text-transform: ${(props) => props.theme.dataFontTextTransform};
-    line-height: ${(props) => props.theme.dataTextLineHeight};
-    border-bottom: ${(props) => `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
-    border-right: ${(props) => `${props.theme.rowSeparatorThickness} ${props.theme.rowSeparatorStyle} ${props.theme.rowSeparatorColor}`};
-    background-color: ${(props) => props.theme.dataBackgroundColor};
-    outline-color: ${(props) => props.theme.focusColor} !important;
-    .rdg-text-editor:focus {
-      border-color: transparent;
-    }
-  }
-  .rdg-header-row {
-    border-top-left-radius: ${(props) => props.theme.headerBorderRadius};
-    border-top-right-radius: ${(props) => props.theme.headerBorderRadius};
-    .rdg-cell {
-      font-family: ${(props) => props.theme.headerFontFamily};
-      font-size: ${(props) => props.theme.headerFontSize};
-      font-style: ${(props) => props.theme.headerFontStyle};
-      font-weight: ${(props) => props.theme.headerFontWeight};
-      color: ${(props) => props.theme.headerFontColor};
-      text-transform: ${(props) => props.theme.headerFontTextTransform};
-      padding: 0px ${(props) => props.theme.headerPaddingRight} 0 ${(props) => props.theme.headerPaddingLeft};
-      line-height: ${(props) => props.theme.headerTextLineHeight};
-      background-color: ${(props) => props.theme.headerBackgroundColor};
-      .sortIconContainer {
-        margin-left: 0.5rem;
-        display: flex;
-        height: 100%;
-        align-items: center;
-      }
-    }
-  }
-  .rdg-row {
-    .rdg-cell:last-child {
-      border-right: 0px;
-    }
-  }
-  .rdg-summary-row {
-    background-color: #fafafa;
-    .rdg-cell {
-      border: 0px;
-      font-weight: 600;
-    }
-  }
-  .ellipsis-cell {
-    text-overflow: ellipsis;
-    overflow: hidden;
-    white-space: nowrap;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-  }
-  .align-left {
-    text-align: left;
-    justify-content: flex-start;
-  }
-  .align-center {
-    text-align: center;
-    justify-content: center;
-  }
-  .align-right {
-    text-align: right;
-    justify-content: flex-end;
-  }
-  .header-align-left {
-    text-align: left;
-  }
-  .header-align-center {
-    text-align: center;
-  }
-  .header-align-right {
-    text-align: right;
-  }
-`;
 DxcDataGrid.ActionsCell = DxcActionsCell;
 var DataGrid_default = DxcDataGrid;
 
@@ -12448,6 +12478,7 @@ var DxcTab2 = (0, import_react72.forwardRef)(
     icon,
     label,
     title,
+    tabId = label,
     disabled = false,
     active,
     notificationNumber = false,
@@ -12460,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 " ":
@@ -12500,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) => {
@@ -12518,7 +12550,8 @@ var DxcTab2 = (0, import_react72.forwardRef)(
         },
         onClick: () => {
           if (!isControlled) {
-            setActiveLabel?.(label);
+            setActiveTab?.(tabId ?? "");
+            console.log(tabId);
           }
           onClick();
         },
@@ -12534,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 })
               ]
             }
           ),
@@ -12626,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};
@@ -13221,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);
@@ -13255,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;
@@ -13296,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:
@@ -13341,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
               )
             }
           )
@@ -13361,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;