@digigov/react-core 2.1.0 → 2.1.1-platform-238.29-04-26-11-16

package/CHANGELOG.md

@@ -1,6 +1,16 @@
 # Change Log - @digigov/react-core
 
-This log was last generated on Wed, 11 Feb 2026 14:46:37 GMT and should not be manually modified.
+<!-- This log was last generated on Wed, 29 Apr 2026 11:16:37 GMT and should not be manually modified. -->
+
+<!-- Start content -->
+
+## 2.1.1-platform-238.29-04-26-11-16
+
+Wed, 29 Apr 2026 11:16:37 GMT
+
+### Minor changes
+
+- feat(TableDataCell): add maxWidthWithOverflow prop, new stories, updated tests (kbrani@admin.grnet.gr)
 
 ## 2.0.8
 Wed, 11 Feb 2026 14:46:37 GMT
@@ -701,4 +711,3 @@ Fri, 05 Nov 2021 12:24:20 GMT
 ### Minor changes
 
 - test and adjust core components
-

package/TableDataCell/index.d.ts

@@ -32,6 +32,7 @@ export interface TableDataCellProps extends BaseProps<'td'> {
      */
     highlight?: 'warning' | 'error';
     highlightAssistiveText?: string;
+    maxWidthWithOverflow?: boolean;
 }
 /**
  * Use TableDataCell inside the Table component to fill the data of a cell in a table.

package/TableDataCell/index.js

@@ -2,7 +2,7 @@ import react from "react";
 import clsx from "clsx";
 import Base from "../Base/index.js";
 import VisuallyHidden from "../VisuallyHidden/index.js";
-const TableDataCell_TableDataCell = /*#__PURE__*/ react.forwardRef(function({ dataType = 'text', variant = 'border', wordBreak = 'none', highlight, highlightAssistiveText, className, children, ...props }, ref) {
+const TableDataCell_TableDataCell = /*#__PURE__*/ react.forwardRef(function({ dataType = 'text', variant = 'border', wordBreak = 'none', highlight, highlightAssistiveText, maxWidthWithOverflow = false, className, children, ...props }, ref) {
     const calculatedHighlightAssistiveText = highlightAssistiveText || ('warning' === highlight ? 'Προσοχή' : 'error' === highlight ? 'Λανθασμένο πεδίο' : void 0);
     return /*#__PURE__*/ react.createElement(Base, {
         as: "td",
@@ -13,10 +13,13 @@ const TableDataCell_TableDataCell = /*#__PURE__*/ react.forwardRef(function({ da
             'ds-table__cell--break-all': 'break-all' === wordBreak,
             'ds-table__cell--numeric': 'numeric' === dataType,
             'ds-table__cell--warning': 'warning' === highlight,
-            'ds-table__cell--error': 'error' === highlight
+            'ds-table__cell--error': 'error' === highlight,
+            'ds-table__cell--max-w': true === maxWidthWithOverflow
         }),
         ...props
-    }, calculatedHighlightAssistiveText && /*#__PURE__*/ react.createElement(VisuallyHidden, null, calculatedHighlightAssistiveText), children);
+    }, maxWidthWithOverflow ? /*#__PURE__*/ react.createElement("div", {
+        className: "ds-table__cell__content"
+    }, calculatedHighlightAssistiveText && /*#__PURE__*/ react.createElement(VisuallyHidden, null, calculatedHighlightAssistiveText), children) : /*#__PURE__*/ react.createElement(react.Fragment, null, calculatedHighlightAssistiveText && /*#__PURE__*/ react.createElement(VisuallyHidden, null, calculatedHighlightAssistiveText), children));
 });
 const src_TableDataCell = TableDataCell_TableDataCell;
 export { TableDataCell_TableDataCell as TableDataCell, src_TableDataCell as default };

package/index.js

@@ -1,4 +1,4 @@
-/** @license Digigov v2.1.0
+/** @license Digigov v2.1.1-platform-238.29-04-26-11-16
  *
  * This source code is licensed under the BSD-2-Clause license found in the
  * LICENSE file in the root directory of this source tree.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "2.1.0",
+  "version": "2.1.1-platform-238.29-04-26-11-16",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -17,8 +17,8 @@
     "react-native-svg": "^15.2.0",
     "expo-router": "^3.5.14",
     "nativewind": "^4.1.1",
-    "@digigov/css": "2.1.0",
-    "@digigov/react-icons": "2.1.0"
+    "@digigov/css": "2.1.1-platform-238.29-04-26-11-16",
+    "@digigov/react-icons": "2.1.1-platform-238.29-04-26-11-16"
   },
   "peerDependenciesMeta": {
     "react-native": {

package/src/Table/__snapshots__/index.test.tsx.snap

@@ -1,5 +1,19 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
+exports[`renders the Table with always stacked prop 1`] = `
+<body>
+  <div>
+    <table
+      class="ds-table ds-table--stacked-always"
+    >
+      <tbody
+        class="ds-table__body"
+      />
+    </table>
+  </div>
+</body>
+`;
+
 exports[`renders the Table with dark headerVariant prop 1`] = `
 <body>
   <div>
@@ -14,6 +28,20 @@ exports[`renders the Table with dark headerVariant prop 1`] = `
 </body>
 `;
 
+exports[`renders the Table with dense prop 1`] = `
+<body>
+  <div>
+    <table
+      class="ds-table ds-table--dense"
+    >
+      <tbody
+        class="ds-table__body"
+      />
+    </table>
+  </div>
+</body>
+`;
+
 exports[`renders the Table with light headerVariant prop 1`] = `
 <body>
   <div>
@@ -28,6 +56,34 @@ exports[`renders the Table with light headerVariant prop 1`] = `
 </body>
 `;
 
+exports[`renders the Table with md stacked prop 1`] = `
+<body>
+  <div>
+    <table
+      class="ds-table ds-table--stacked-md"
+    >
+      <tbody
+        class="ds-table__body"
+      />
+    </table>
+  </div>
+</body>
+`;
+
+exports[`renders the Table with middle vertical align prop 1`] = `
+<body>
+  <div>
+    <table
+      class="ds-table"
+    >
+      <tbody
+        class="ds-table__body"
+      />
+    </table>
+  </div>
+</body>
+`;
+
 exports[`renders the Table with no props 1`] = `
 <body>
   <div>
@@ -42,6 +98,20 @@ exports[`renders the Table with no props 1`] = `
 </body>
 `;
 
+exports[`renders the Table with top vertical align prop 1`] = `
+<body>
+  <div>
+    <table
+      class="ds-table ds-table--align-top"
+    >
+      <tbody
+        class="ds-table__body"
+      />
+    </table>
+  </div>
+</body>
+`;
+
 exports[`renders the Table with verticalBorders prop 1`] = `
 <body>
   <div>

package/src/Table/index.test.tsx

@@ -34,10 +34,10 @@ it('renders the Table with light headerVariant prop', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the Table with zebra prop', () => {
+it('renders the Table with dense prop', () => {
   expect(
     render(
-      <Table variant="zebra">
+      <Table dense>
         <TableBody></TableBody>
       </Table>
     ).baseElement
@@ -53,3 +53,52 @@ it('renders the Table with verticalBorders prop', () => {
     ).baseElement
   ).toMatchSnapshot();
 });
+it('renders the Table with always stacked prop', () => {
+  expect(
+    render(
+      <Table stacked="always">
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the Table with md stacked prop', () => {
+  expect(
+    render(
+      <Table stacked="md">
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the Table with zebra prop', () => {
+  expect(
+    render(
+      <Table variant="zebra">
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the Table with top vertical align prop', () => {
+  expect(
+    render(
+      <Table verticalAlign="top">
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
+});
+
+it('renders the Table with middle vertical align prop', () => {
+  expect(
+    render(
+      <Table verticalAlign="middle">
+        <TableBody></TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/TableDataCell/__snapshots__/index.test.tsx.snap

@@ -53,6 +53,34 @@ exports[`renders the Table with highlight warning prop 1`] = `
 </body>
 `;
 
+exports[`renders the Table with maxWidthWithOverflow prop 1`] = `
+<body>
+  <div>
+    <table
+      class="ds-table"
+    >
+      <tbody
+        class="ds-table__body"
+      >
+        <tr
+          class="ds-table__row"
+        >
+          <td
+            class="ds-table__cell ds-table__cell--border ds-table__cell--max-w"
+          >
+            <div
+              class="ds-table__cell__content"
+            >
+              hello
+            </div>
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</body>
+`;
+
 exports[`renders the Table with no props 1`] = `
 <body>
   <div>

package/src/TableDataCell/index.test.tsx

@@ -75,3 +75,16 @@ it('renders the Table with highlight warning prop', () => {
     ).baseElement
   ).toMatchSnapshot();
 });
+it('renders the Table with maxWidthWithOverflow prop', () => {
+  expect(
+    render(
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableDataCell maxWidthWithOverflow={true}>hello</TableDataCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    ).baseElement
+  ).toMatchSnapshot();
+});

package/src/TableDataCell/index.tsx

@@ -44,6 +44,14 @@ export interface TableDataCellProps extends BaseProps<'td'> {
    * @default undefined
    */
   highlightAssistiveText?: string;
+
+  /*
+   * maxWidthWithOverflow is optional.
+   * Use this prop to set max-width of the cell and allow overflow when the content is too long.
+   * This is used in combination with the TableFloatingScroll component to allow horizontal scrolling of the table when there are cells with long content.
+   * @default false
+   */
+  maxWidthWithOverflow?: boolean;
 }
 /**
  * Use TableDataCell inside the Table component to fill the data of a cell in a table.
@@ -58,6 +66,7 @@ export const TableDataCell = React.forwardRef<
     wordBreak = 'none',
     highlight,
     highlightAssistiveText,
+    maxWidthWithOverflow = false,
     className,
     children,
     ...props
@@ -83,13 +92,25 @@ export const TableDataCell = React.forwardRef<
         'ds-table__cell--numeric': dataType === 'numeric',
         'ds-table__cell--warning': highlight === 'warning',
         'ds-table__cell--error': highlight === 'error',
+        'ds-table__cell--max-w': maxWidthWithOverflow === true,
       })}
       {...props}
     >
-      {calculatedHighlightAssistiveText && (
-        <VisuallyHidden>{calculatedHighlightAssistiveText}</VisuallyHidden>
+      {maxWidthWithOverflow ? (
+        <div className="ds-table__cell__content">
+          {calculatedHighlightAssistiveText && (
+            <VisuallyHidden>{calculatedHighlightAssistiveText}</VisuallyHidden>
+          )}
+          {children}
+        </div>
+      ) : (
+        <>
+          {calculatedHighlightAssistiveText && (
+            <VisuallyHidden>{calculatedHighlightAssistiveText}</VisuallyHidden>
+          )}
+          {children}
+        </>
       )}
-      {children}
     </Base>
   );
 });