@digigov/react-core 2.1.2-govgr-4546.13-05-26-14-00 → 2.2.1

package/CHANGELOG.md

@@ -1,6 +1,24 @@
 # 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 Fri, 15 May 2026 10:38:56 GMT and should not be manually modified. -->
+
+<!-- Start content -->
+
+## 2.2.1
+
+Fri, 15 May 2026 10:38:56 GMT
+
+### Patches
+
+- Fix keyboard a11y on FileUpload (sangelopoulos@admin.grnet.gr)
+
+## 2.2.0
+
+Thu, 14 May 2026 13:49:43 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 +719,3 @@ Fri, 05 Nov 2021 12:24:20 GMT
 ### Minor changes
 
 - test and adjust core components
-

package/FileUpload/index.js

@@ -2,10 +2,20 @@ import react from "react";
 import clsx from "clsx";
 import Base from "../Base/index.js";
 const FileUpload_FileUpload = /*#__PURE__*/ react.forwardRef(function({ name, className, children, disabled, hasFiles = false, variant = 'button', ...props }, ref) {
+    const handleKeyDown = (e)=>{
+        if (disabled) return;
+        if ('Enter' === e.key || ' ' === e.key) {
+            e.preventDefault();
+            e.currentTarget.click();
+        }
+    };
     return /*#__PURE__*/ react.createElement(Base, {
         as: "label",
         tabIndex: 0,
         role: "button",
+        "aria-disabled": disabled,
+        "aria-haspopup": "dialog",
+        onKeyDown: handleKeyDown,
         className: clsx(className, {
             'ds-label-file': true,
             'ds-btn': !hasFiles && 'button' === variant,

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.2-govgr-4546.13-05-26-14-00
+/** @license Digigov v2.2.1
  *
  * 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.2-govgr-4546.13-05-26-14-00",
+  "version": "2.2.1",
   "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.2-govgr-4546.13-05-26-14-00",
-    "@digigov/react-icons": "2.1.2-govgr-4546.13-05-26-14-00"
+    "@digigov/css": "2.2.1",
+    "@digigov/react-icons": "2.2.1"
   },
   "peerDependenciesMeta": {
     "react-native": {

package/registry.d.ts

@@ -25,15 +25,15 @@ declare const _default: {
     '@digigov/react-core/AutoCompleteResultListItem': {};
     '@digigov/react-core/AutoCompleteStatus': {};
     '@digigov/react-core/AutoCompleteStatusContainer': {};
-    '@digigov/react-core/BackToTopContainer': {};
     '@digigov/react-core/BackLinkBase': {};
+    '@digigov/react-core/BackToTopContainer': {};
     '@digigov/react-core/BackToTopLimit': {};
     '@digigov/react-core/BackToTopLink': {};
     '@digigov/react-core/BannerContainer': {};
-    '@digigov/react-core/Blockquote': {};
     '@digigov/react-core/Base': {};
     '@digigov/react-core/Base/index.web': {};
     '@digigov/react-core/Base/utils': {};
+    '@digigov/react-core/Blockquote': {};
     '@digigov/react-core/Bottom': {};
     '@digigov/react-core/BottomInfo': {};
     '@digigov/react-core/BottomInfoContainer': {};

package/registry.js

@@ -24,15 +24,15 @@ import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteResultList_index_js_a3f3ae52_
 import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteResultListItem_index_js_5791371a__ from "./AutoCompleteResultListItem/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteStatus_index_js_b4a797bb__ from "./AutoCompleteStatus/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__AutoCompleteStatusContainer_index_js_0557363b__ from "./AutoCompleteStatusContainer/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__BackToTopContainer_index_js_642ad67f__ from "./BackToTopContainer/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__BackLinkBase_index_js_8872906a__ from "./BackLinkBase/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__BackToTopContainer_index_js_642ad67f__ from "./BackToTopContainer/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__BackToTopLimit_index_js_2e2b66c4__ from "./BackToTopLimit/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__BackToTopLink_index_js_c32b8f4e__ from "./BackToTopLink/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__BannerContainer_index_js_39907ea4__ from "./BannerContainer/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__Blockquote_index_js_9f9375e2__ from "./Blockquote/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Base_index_js_36312f72__ from "./Base/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Base_index_web_js_720b25e8__ from "./Base/index.web.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Base_utils_js_33caa975__ from "./Base/utils.js";
+import * as __WEBPACK_EXTERNAL_MODULE__Blockquote_index_js_9f9375e2__ from "./Blockquote/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__Bottom_index_js_75736bbf__ from "./Bottom/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__BottomInfo_index_js_72d9481e__ from "./BottomInfo/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__BottomInfoContainer_index_js_692b8134__ from "./BottomInfoContainer/index.js";
@@ -298,15 +298,15 @@ const registry = {
     '@digigov/react-core/AutoCompleteResultListItem': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteResultListItem_index_js_5791371a__),
     '@digigov/react-core/AutoCompleteStatus': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteStatus_index_js_b4a797bb__),
     '@digigov/react-core/AutoCompleteStatusContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__AutoCompleteStatusContainer_index_js_0557363b__),
-    '@digigov/react-core/BackToTopContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackToTopContainer_index_js_642ad67f__),
     '@digigov/react-core/BackLinkBase': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackLinkBase_index_js_8872906a__),
+    '@digigov/react-core/BackToTopContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackToTopContainer_index_js_642ad67f__),
     '@digigov/react-core/BackToTopLimit': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackToTopLimit_index_js_2e2b66c4__),
     '@digigov/react-core/BackToTopLink': lazyImport(__WEBPACK_EXTERNAL_MODULE__BackToTopLink_index_js_c32b8f4e__),
     '@digigov/react-core/BannerContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__BannerContainer_index_js_39907ea4__),
-    '@digigov/react-core/Blockquote': lazyImport(__WEBPACK_EXTERNAL_MODULE__Blockquote_index_js_9f9375e2__),
     '@digigov/react-core/Base': lazyImport(__WEBPACK_EXTERNAL_MODULE__Base_index_js_36312f72__),
     '@digigov/react-core/Base/index.web': lazyImport(__WEBPACK_EXTERNAL_MODULE__Base_index_web_js_720b25e8__),
     '@digigov/react-core/Base/utils': lazyImport(__WEBPACK_EXTERNAL_MODULE__Base_utils_js_33caa975__),
+    '@digigov/react-core/Blockquote': lazyImport(__WEBPACK_EXTERNAL_MODULE__Blockquote_index_js_9f9375e2__),
     '@digigov/react-core/Bottom': lazyImport(__WEBPACK_EXTERNAL_MODULE__Bottom_index_js_75736bbf__),
     '@digigov/react-core/BottomInfo': lazyImport(__WEBPACK_EXTERNAL_MODULE__BottomInfo_index_js_72d9481e__),
     '@digigov/react-core/BottomInfoContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__BottomInfoContainer_index_js_692b8134__),

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

@@ -4,6 +4,7 @@ exports[`renders the FileUpload with name prop 1`] = `
 <body>
   <div>
     <label
+      aria-haspopup="dialog"
       class="ds-label-file ds-btn ds-btn-secondary"
       role="button"
       tabindex="0"
@@ -22,6 +23,7 @@ exports[`renders the FileUpload with no props 1`] = `
 <body>
   <div>
     <label
+      aria-haspopup="dialog"
       class="ds-label-file ds-btn ds-btn-secondary"
       role="button"
       tabindex="0"

package/src/FileUpload/index.tsx

@@ -36,11 +36,22 @@ export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
     },
     ref
   ) {
+    const handleKeyDown = (e: React.KeyboardEvent<HTMLLabelElement>) => {
+      if (disabled) return;
+      if (e.key === 'Enter' || e.key === ' ') {
+        e.preventDefault();
+        e.currentTarget.click();
+      }
+    };
+
     return (
       <Base
         as="label"
         tabIndex={0}
         role="button"
+        aria-disabled={disabled}
+        aria-haspopup="dialog"
+        onKeyDown={handleKeyDown}
         className={clsx(className, {
           'ds-label-file': true,
           'ds-btn': !hasFiles && variant === 'button',

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>
   );
 });

package/src/registry.ts

@@ -25,15 +25,15 @@ import * as _digigov_react_core_AutoCompleteResultList from "@digigov/react-core
 import * as _digigov_react_core_AutoCompleteResultListItem from "@digigov/react-core/AutoCompleteResultListItem";
 import * as _digigov_react_core_AutoCompleteStatus from "@digigov/react-core/AutoCompleteStatus";
 import * as _digigov_react_core_AutoCompleteStatusContainer from "@digigov/react-core/AutoCompleteStatusContainer";
-import * as _digigov_react_core_BackToTopContainer from "@digigov/react-core/BackToTopContainer";
 import * as _digigov_react_core_BackLinkBase from "@digigov/react-core/BackLinkBase";
+import * as _digigov_react_core_BackToTopContainer from "@digigov/react-core/BackToTopContainer";
 import * as _digigov_react_core_BackToTopLimit from "@digigov/react-core/BackToTopLimit";
 import * as _digigov_react_core_BackToTopLink from "@digigov/react-core/BackToTopLink";
 import * as _digigov_react_core_BannerContainer from "@digigov/react-core/BannerContainer";
-import * as _digigov_react_core_Blockquote from "@digigov/react-core/Blockquote";
 import * as _digigov_react_core_Base from "@digigov/react-core/Base";
 import * as _digigov_react_core_Base_index_web from "@digigov/react-core/Base/index.web";
 import * as _digigov_react_core_Base_utils from "@digigov/react-core/Base/utils";
+import * as _digigov_react_core_Blockquote from "@digigov/react-core/Blockquote";
 import * as _digigov_react_core_Bottom from "@digigov/react-core/Bottom";
 import * as _digigov_react_core_BottomInfo from "@digigov/react-core/BottomInfo";
 import * as _digigov_react_core_BottomInfoContainer from "@digigov/react-core/BottomInfoContainer";
@@ -308,15 +308,15 @@ export default {
   '@digigov/react-core/AutoCompleteResultListItem': lazyImport(_digigov_react_core_AutoCompleteResultListItem),
   '@digigov/react-core/AutoCompleteStatus': lazyImport(_digigov_react_core_AutoCompleteStatus),
   '@digigov/react-core/AutoCompleteStatusContainer': lazyImport(_digigov_react_core_AutoCompleteStatusContainer),
-  '@digigov/react-core/BackToTopContainer': lazyImport(_digigov_react_core_BackToTopContainer),
   '@digigov/react-core/BackLinkBase': lazyImport(_digigov_react_core_BackLinkBase),
+  '@digigov/react-core/BackToTopContainer': lazyImport(_digigov_react_core_BackToTopContainer),
   '@digigov/react-core/BackToTopLimit': lazyImport(_digigov_react_core_BackToTopLimit),
   '@digigov/react-core/BackToTopLink': lazyImport(_digigov_react_core_BackToTopLink),
   '@digigov/react-core/BannerContainer': lazyImport(_digigov_react_core_BannerContainer),
-  '@digigov/react-core/Blockquote': lazyImport(_digigov_react_core_Blockquote),
   '@digigov/react-core/Base': lazyImport(_digigov_react_core_Base),
   '@digigov/react-core/Base/index.web': lazyImport(_digigov_react_core_Base_index_web),
   '@digigov/react-core/Base/utils': lazyImport(_digigov_react_core_Base_utils),
+  '@digigov/react-core/Blockquote': lazyImport(_digigov_react_core_Blockquote),
   '@digigov/react-core/Bottom': lazyImport(_digigov_react_core_Bottom),
   '@digigov/react-core/BottomInfo': lazyImport(_digigov_react_core_BottomInfo),
   '@digigov/react-core/BottomInfoContainer': lazyImport(_digigov_react_core_BottomInfoContainer),