@dxc-technology/halstack-react 15.0.1 → 15.1.0

package/dist/index.d.mts

@@ -1263,6 +1263,7 @@ type HierarchyGridRow = GridRow & {
 type ExpandableGridRow = GridRow & {
     expandedContent?: ReactNode;
     expandedContentHeight?: number;
+    contentIsExpanded?: boolean;
 };
 type ExpandableRows = {
     rows: ExpandableGridRow[];
@@ -1339,6 +1340,10 @@ type PaginatedProps$1 = {
      * Function called whenever the current page is changed.
      */
     onPageChange?: (_page: number) => void;
+    /**
+     * Default page in which the datagrid is rendered
+     */
+    defaultPage?: number;
 };
 type NonPaginatedProps$1 = {
     /**
@@ -1370,6 +1375,10 @@ type NonPaginatedProps$1 = {
      * Function called whenever the current page is changed.
      */
     onPageChange?: never;
+    /**
+     * Default page in which the datagrid is rendered
+     */
+    defaultPage?: never;
 };
 type CommonProps$6 = {
     columns: GridColumn[];
@@ -1397,7 +1406,7 @@ type BasicGridProps = {
 type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
 
 declare const DxcDataGrid: {
-    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, }: Props$t): JSX.Element;
+    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$t): JSX.Element;
     ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
 };
 

package/dist/index.d.ts

@@ -1263,6 +1263,7 @@ type HierarchyGridRow = GridRow & {
 type ExpandableGridRow = GridRow & {
     expandedContent?: ReactNode;
     expandedContentHeight?: number;
+    contentIsExpanded?: boolean;
 };
 type ExpandableRows = {
     rows: ExpandableGridRow[];
@@ -1339,6 +1340,10 @@ type PaginatedProps$1 = {
      * Function called whenever the current page is changed.
      */
     onPageChange?: (_page: number) => void;
+    /**
+     * Default page in which the datagrid is rendered
+     */
+    defaultPage?: number;
 };
 type NonPaginatedProps$1 = {
     /**
@@ -1370,6 +1375,10 @@ type NonPaginatedProps$1 = {
      * Function called whenever the current page is changed.
      */
     onPageChange?: never;
+    /**
+     * Default page in which the datagrid is rendered
+     */
+    defaultPage?: never;
 };
 type CommonProps$6 = {
     columns: GridColumn[];
@@ -1397,7 +1406,7 @@ type BasicGridProps = {
 type Props$t = CommonProps$6 & (PaginatedProps$1 | NonPaginatedProps$1) & ((BasicGridProps & SelectableGridProps) | (ExpandableRows & SelectableGridProps) | (HierarchyRows & SelectableGridProps));
 
 declare const DxcDataGrid: {
-    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, }: Props$t): JSX.Element;
+    ({ columns, rows, selectable, expandable, onSelectRows, selectedRows, uniqueRowId, summaryRow, onGridRowsChange, showPaginator, showGoToPage, itemsPerPage, itemsPerPageOptions, itemsPerPageFunction, onSort, onPageChange, totalItems, defaultPage, }: Props$t): JSX.Element;
     ActionsCell: ({ actions }: ActionCellsPropsType) => JSX.Element;
 };
 

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;
 

package/dist/index.mjs

@@ -2191,6 +2191,7 @@ var AccordionLabel = styled4.span`
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+  text-align: left;
 `;
 var SubLabel = styled4.span`
   height: 20px;
@@ -6102,13 +6103,15 @@ var renderExpandableTrigger = (row, rows, uniqueRowId, setRowsToRender) => /* @_
           return newRows;
         });
       }
-    }
+    },
+    disabled: !rows.some((row2) => uniqueRowId in row2)
   }
 );
 var renderHierarchyTrigger = (rows, triggerRow, uniqueRowId, columnKey, setRowsToRender) => /* @__PURE__ */ jsxs24(
   "button",
   {
     type: "button",
+    disabled: !rows.some((row) => uniqueRowId in row),
     onClick: () => {
       let newRowsToRender = [...rows];
       if (!triggerRow.visibleChildren) {
@@ -6167,13 +6170,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__ */ jsx38(HalstackProvider, { advancedTheme: overwriteTheme(colorsTheme), children: /* @__PURE__ */ jsx38(
   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) {
@@ -6192,7 +6196,8 @@ var renderHeaderCheckbox = (rows, uniqueRowId, selectedRows, colorsTheme, onSele
         });
       }
       onSelectRows(updatedSelection);
-    }
+    },
+    disabled: rows.length === 0 || !rows.some((row) => uniqueRowId in row)
   }
 ) });
 var rowKeyGetter = (row, uniqueRowId) => {
@@ -6246,7 +6251,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(
@@ -6299,6 +6304,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;
@@ -7631,6 +7639,142 @@ var Table_default = DxcTable;
 
 // src/data-grid/DataGrid.tsx
 import { jsx as jsx44, jsxs as jsxs30 } from "react/jsx-runtime";
+var ActionContainer = styled37.div`
+  display: flex;
+  height: 100%;
+  align-items: center;
+  justify-content: center;
+  font-size: 14px;
+  width: 100%;
+`;
+var HierarchyContainer = styled37.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 = styled37.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,
@@ -7648,11 +7792,12 @@ var DxcDataGrid = ({
   itemsPerPageFunction,
   onSort,
   onPageChange,
-  totalItems
+  totalItems,
+  defaultPage = 1
 }) => {
   const [rowsToRender, setRowsToRender] = useState17(rows);
   const colorsTheme = useContext24(HalstackContext);
-  const [page, changePage] = useState17(1);
+  const [page, changePage] = useState17(defaultPage);
   const goToPage = (newPage) => {
     if (onPageChange) {
       onPageChange(newPage);
@@ -7734,7 +7879,21 @@ var DxcDataGrid = ({
     setColumnsOrder(Array.from({ length: columnsToRender.length }, (_, index) => index));
   }, [columnsToRender.length]);
   useEffect8(() => {
-    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 = useMemo10(
     () => (
@@ -7771,23 +7930,28 @@ var DxcDataGrid = ({
   const sortedRows = useMemo10(() => {
     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;
@@ -7803,7 +7967,7 @@ var DxcDataGrid = ({
     }
     return !showPaginator || onPageChange ? sortedRows : getPaginatedNodes(sortedRows, uniqueRowId, minItemsPerPageIndex, maxItemsPerPageIndex + 1);
   }, [sortedRows, minItemsPerPageIndex, maxItemsPerPageIndex]);
-  return /* @__PURE__ */ jsx44(ThemeProvider17, { theme: colorsTheme.dataGrid, children: /* @__PURE__ */ jsxs30(DataGridContainer, { children: [
+  return /* @__PURE__ */ jsx44(ThemeProvider17, { theme: colorsTheme.dataGrid, children: /* @__PURE__ */ jsxs30(DataGridContainer, { paginatorRendered: showPaginator && (totalItems ?? rows.length) > itemsPerPage, children: [
     /* @__PURE__ */ jsx44(
       DataGrid,
       {
@@ -7823,7 +7987,7 @@ var DxcDataGrid = ({
         className: "fill-grid"
       }
     ),
-    showPaginator && /* @__PURE__ */ jsx44(
+    showPaginator && (totalItems ?? rows.length) > itemsPerPage && /* @__PURE__ */ jsx44(
       Paginator_default,
       {
         totalItems: totalItems ?? rows.length,
@@ -7837,140 +8001,6 @@ var DxcDataGrid = ({
     )
   ] }) });
 };
-var ActionContainer = styled37.div`
-  display: flex;
-  height: 100%;
-  align-items: center;
-  justify-content: center;
-  font-size: 14px;
-  width: 100%;
-`;
-var HierarchyContainer = styled37.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 = styled37.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;
 

package/package.json

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