V15.3.1

.github/workflows/publish-release.yml

@@ -1,8 +1,6 @@
 name: Publish Release
 
-on:
-  release:
-    types: [published]
+on: push
 
 jobs:
   build:
@@ -34,31 +32,14 @@ jobs:
       - name: Build library and website
         run: npm run build
 
-      - name: Test library
-        run: npm run test
-
-      - name: Test library accessibility
-        run: npm run test:accessibility
-
-      - name: Publish RELEASE to npm
-        run: |
-          sed -i "s#\"version\": \".*\"#\"version\": \"${TAG_NAME}\"#" ./packages/lib/package.json
-          cd packages/lib
-          npm publish --access public
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.NODE_AUTH_TOKEN }}
-          TAG_NAME: ${{ github.event.release.tag_name }}
-
       - name: Install scripts dependencies
         run: cd scripts && npm install
 
       - name: Move RELEASE website to S3
-        run: node scripts/release-website.js $TAG_NAME
-        env:
-          TAG_NAME: ${{ github.event.release.tag_name }}
+        run: node scripts/release-website.js 15.3.0
 
       - name: Execute script version
-        run: node scripts/create-version.js $TAG_NAME
+        run: node scripts/create-version.js 15.3.0
 
       - name: Deploy version to S3 Bucket
         run: |

apps/website/eslint.config.mjs

@@ -0,0 +1,12 @@
+import nextConfig from "@dxc-technology/eslint-config/next.js";
+import { fileURLToPath } from "url";
+import { dirname } from "path";
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+/** @type {import("eslint").Config[]} */
+export default [
+  { ignores: ["out/**", ".next/**", "eslint.config.mjs"] },
+  ...nextConfig({ tsconfigRootDir: __dirname }),
+];

apps/website/screens/common/themes/advanced-theme.json

@@ -551,7 +551,7 @@
     "logoHeight": "40px",
     "logoWidth": "auto",
     "menuBackgroundColor": "#ffffff",
-    "menuZindex": "2000",
+    "menuZindex": "210",
     "menuTabletWidth": "60vw",
     "menuMobileWidth": "100vw",
     "minHeight": "64px",

apps/website/screens/components/container/code/ContainerCodePage.tsx

@@ -360,6 +360,14 @@ const sections = [
             <TableCode>'static'</TableCode>
           </td>
         </tr>
+        <tr>
+          <td>ref</td>
+          <td>
+            <TableCode>{"React.Ref<HTMLDivElement>"}</TableCode>
+          </td>
+          <td>Reference to the component.</td>
+          <td>-</td>
+        </tr>
         <tr>
           <td>width</td>
           <td>

apps/website/screens/components/data-grid/code/DataGridCodePage.tsx

@@ -21,7 +21,8 @@ const columnsTypeString = `{
   label: string;
   resizable?: boolean;
   sortable?: boolean;
-  sortFn?: (a: ReactNode, b: ReactNode) => number;
+  sortFn?: (a: ReactNode, b: ReactNode) => 
+            number;
   draggable?: boolean;
   textEditable?: boolean;
   summaryKey?: string;
@@ -34,14 +35,20 @@ const GridRowTypeString = `{
 
 const HierarchyGridRowTypeString = `GridRow & {
   childRows?: HierarchyGridRow[] | GridRow[];
+  childrenTrigger?: (
+    open: boolean,
+    triggerRow: HierarchyGridRow
+  ) => (HierarchyGridRow[] | GridRow[]) 
+   | Promise<HierarchyGridRow[] | GridRow[]>;
 }`;
 
 const ExpandableGridRowTypeString = `GridRow & {
   expandedContent?: React.ReactNode;
   expandedContentHeight?: number;
+  contentIsExpanded?: boolean;
 }`;
 
-const actionsType = `{
+const actionsTypeString = `{
   icon: string | SVG;
   title: string;
   onClick: () => void;
@@ -55,6 +62,10 @@ const actionsType = `{
   options: Option[];
 }[]`;
 
+const childrenTriggerTypeString = `(open: boolean, triggerRow: HierarchyGridRow) => 
+(HierarchyGridRow[] | GridRow[]) 
+| Promise<HierarchyGridRow[] | GridRow[]>`;
+
 const sections = [
   {
     title: "Props",
@@ -116,26 +127,11 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
+            <td>defaultPage</td>
             <td>
-              <StatusBadge status="required" />
-              rows
-            </td>
-            <td>
-              <TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
-              <p>Each one of them being in order:</p>
-              <p>
-                <ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
-              </p>
-              <p>
-                <ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
-              </p>
-              <p>
-                <ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
-              </p>
-            </td>
-            <td>
-              List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
+              <TableCode>number</TableCode>
             </td>
+            <td>Default page in which the datagrid is rendered.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -147,61 +143,74 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>summaryRow</td>
+            <td>itemsPerPage</td>
             <td>
-              <TableCode>GridRow</TableCode>
+              <TableCode>number</TableCode>
             </td>
-            <td>Extra row that will be always visible.</td>
-            <td>-</td>
+            <td>Number of items per page.</td>
+            <td>5</td>
           </tr>
           <tr>
-            <td>selectable</td>
+            <td>itemsPerPageFunction</td>
             <td>
-              <TableCode>boolean</TableCode>
+              <TableCode>{`(value: number) => void`}</TableCode>
+            </td>
+            <td>
+              This function will be called when the user selects an item per page option. The value selected will be
+              passed as a parameter.
             </td>
-            <td>Whether the rows are selectable or not.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>selectedRows</td>
-            <td>
-              <TableCode>{`Set<string | number>`}</TableCode>
-            </td>
+            <td>itemsPerPageOptions</td>
             <td>
-              Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
-              <Code>uniqueRowId</Code> key will be used to identify the each row.
+              <TableCode>number[]</TableCode>
             </td>
+            <td>An array of numbers representing the items per page options.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>onSelectRows</td>
             <td>
-              <TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
+              <DxcFlex direction="column" gap="0.5rem" alignItems="baseline">
+                <StatusBadge status="new" />
+                childrenTrigger
+              </DxcFlex>
             </td>
             <td>
-              Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
-              set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
+              <ExtendedTableCode>{childrenTriggerTypeString}</ExtendedTableCode>
+            </td>
+            <td>
+              Function called whenever a cell with children (<Code>HierarchyGridRow</Code>) is expanded or collapsed
+              (based on the value of <Code>open</Code>). Returns (or resolves to) the array of child rows nested under
+              this row to display when expanded.
             </td>
             <td>-</td>
           </tr>
           <tr>
-            <td>uniqueRowId</td>
+            <td>onGridRowsChange</td>
             <td>
-              <TableCode>string</TableCode>
+              <TableCode>{`(rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void`}</TableCode>
             </td>
+            <td>Function called whenever a cell is edited.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>onPageChange</td>
             <td>
-              This prop indicates the unique key that can be used to identify each row. The value of that key can be
-              either a number or a string. This prop is mandatory if <Code>selectable</Code> is set to true,{" "}
-              <Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
+              <TableCode>{`(page: number) => void`}</TableCode>
             </td>
+            <td>Function called whenever the current page is changed.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>onGridRowsChange</td>
+            <td>onSelectRows</td>
             <td>
-              <TableCode>{`(rows: GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]) => void`}</TableCode>
+              <TableCode>{`(selectedRows: Set<number | string>) => void`}</TableCode>
+            </td>
+            <td>
+              Function called whenever the selected values changes. This prop is mandatory if <Code>selectable</Code> is
+              set to true.The <Code>uniqueRowId</Code> key will be used to identify the rows.
             </td>
-            <td>Function called whenever a cell is edited.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -216,27 +225,45 @@ const sections = [
             <td>-</td>
           </tr>
           <tr>
-            <td>onPageChange</td>
             <td>
-              <TableCode>{`(page: number) => void`}</TableCode>
+              <StatusBadge status="required" />
+              rows
+            </td>
+            <td>
+              <TableCode>GridRow[] | HierarchyGridRow[] | ExpandableGridRow[]</TableCode>
+              <p>Each one of them being in order:</p>
+              <p>
+                <ExtendedTableCode>{GridRowTypeString}</ExtendedTableCode>
+              </p>
+              <p>
+                <ExtendedTableCode>{HierarchyGridRowTypeString}</ExtendedTableCode>
+              </p>
+              <p>
+                <ExtendedTableCode>{ExpandableGridRowTypeString}</ExtendedTableCode>
+              </p>
+            </td>
+            <td>
+              List of rows that will be rendered in each cell based on the <Code>key</Code> in each column.
             </td>
-            <td>Function called whenever the current page is changed.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>showPaginator</td>
+            <td>selectable</td>
             <td>
               <TableCode>boolean</TableCode>
             </td>
-            <td>If true, paginator will be displayed.</td>
-            <td>false</td>
+            <td>Whether the rows are selectable or not.</td>
+            <td>-</td>
           </tr>
           <tr>
-            <td>totalItems</td>
+            <td>selectedRows</td>
             <td>
-              <TableCode>number</TableCode>
+              <TableCode>{`Set<string | number>`}</TableCode>
+            </td>
+            <td>
+              Set of selected rows. This prop is mandatory if <Code>selectable</Code> is set to true. The{" "}
+              <Code>uniqueRowId</Code> key will be used to identify the each row.
             </td>
-            <td>Number of total items.</td>
             <td>-</td>
           </tr>
           <tr>
@@ -248,29 +275,38 @@ const sections = [
             <td>true</td>
           </tr>
           <tr>
-            <td>itemsPerPage</td>
+            <td>showPaginator</td>
             <td>
-              <TableCode>number</TableCode>
+              <TableCode>boolean</TableCode>
             </td>
-            <td>Number of items per page.</td>
-            <td>5</td>
+            <td>If true, paginator will be displayed.</td>
+            <td>false</td>
           </tr>
           <tr>
-            <td>itemsPerPageOptions</td>
+            <td>summaryRow</td>
             <td>
-              <TableCode>number[]</TableCode>
+              <TableCode>GridRow</TableCode>
             </td>
-            <td>An array of numbers representing the items per page options.</td>
+            <td>Extra row that will be always visible.</td>
             <td>-</td>
           </tr>
           <tr>
-            <td>itemsPerPageFunction</td>
+            <td>totalItems</td>
             <td>
-              <TableCode>{`(value: number) => void`}</TableCode>
+              <TableCode>number</TableCode>
             </td>
+            <td>Number of total items.</td>
+            <td>-</td>
+          </tr>
+          <tr>
+            <td>uniqueRowId</td>
             <td>
-              This function will be called when the user selects an item per page option. The value selected will be
-              passed as a parameter.
+              <TableCode>string</TableCode>
+            </td>
+            <td>
+              This prop indicates the unique key that can be used to identify each row. The value of that key can be
+              either a number or a string. This prop is mandatory if <Code>selectable</Code> is set to true,{" "}
+              <Code>expandable</Code> is set to true or <Code>rows</Code> is of type <Code>HierarchyGridRow[]</Code>.
             </td>
             <td>-</td>
           </tr>
@@ -301,13 +337,13 @@ const sections = [
             <tbody>
               <tr>
                 <td>
-                  <DxcFlex direction="column" gap="0.25rem" alignItems="baseline">
+                  <DxcFlex direction="column" gap="0.5rem" alignItems="baseline">
                     <StatusBadge status="required" />
                     actions
                   </DxcFlex>
                 </td>
                 <td>
-                  <ExtendedTableCode>{actionsType}</ExtendedTableCode>
+                  <ExtendedTableCode>{actionsTypeString}</ExtendedTableCode>
                 </td>
                 <td>
                   <p>