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

package/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @digigov/ui
 
-<!-- This log was last generated on Mon, 23 Mar 2026 15:59:34 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
+
+- fix(Dropdown): fix position inside a table when floated (kbrani@admin.grnet.gr)
+
 ## 2.0.12
 
 Mon, 23 Mar 2026 15:59:34 GMT

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/navigation/Dropdown/index.js

@@ -22,10 +22,9 @@ const Dropdown_Dropdown = /*#__PURE__*/ react.forwardRef(function({ closeBehavio
             const tbody = element.closest('tbody');
             const parentElement = element?.parentElement;
             if (element.open) {
-                tbody.style.position = 'static';
+                tbody.style.position = 'inherit';
                 const rect = element?.getBoundingClientRect();
                 const parentRect = parentElement.getBoundingClientRect();
-                element.style.position = 'static';
                 const top = rect.top + window.pageYOffset;
                 const left = rect.left + window.pageXOffset;
                 parentElement.style.height = `${parentRect.height}px`;
@@ -34,7 +33,7 @@ const Dropdown_Dropdown = /*#__PURE__*/ react.forwardRef(function({ closeBehavio
                 element.style.left = `${left}px`;
                 element.style.position = "absolute";
                 element.style.display = "block";
-                element.style.background = 'white';
+                element.style.background = 'inherit';
             } else {
                 tbody.style.position = 'relative';
                 parentElement.style.height = '';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/ui",
-  "version": "2.1.0",
+  "version": "2.1.1-platform-238.29-04-26-11-16",
   "description": "@digigov reusable components toolkit",
   "type": "module",
   "publishConfig": {
@@ -14,14 +14,14 @@
     "highlight.js": "11.10.0",
     "react-markdown": "10.1.0",
     "@uides/react-qr-reader": "3.1.0",
-    "@digigov/react-icons": "2.1.0"
+    "@digigov/react-icons": "2.1.1-platform-238.29-04-26-11-16"
   },
   "peerDependencies": {
     "clsx": "2.1.1",
     "react": "^18.3.0 || ^19.1.0",
     "react-dom": "^18.3.0 || ^19.1.0",
-    "@digigov/react-core": "2.1.0",
-    "@digigov/css": "2.1.0"
+    "@digigov/react-core": "2.1.1-platform-238.29-04-26-11-16",
+    "@digigov/css": "2.1.1-platform-238.29-04-26-11-16"
   },
   "peerDependenciesMeta": {
     "react-native": {

package/registry.d.ts

@@ -20,6 +20,8 @@ declare const _default: {
     '@digigov/ui/app/FilterContainer': {};
     '@digigov/ui/app/Footer/FooterLink': {};
     '@digigov/ui/app/Footer': {};
+    '@digigov/ui/app/Loader': {};
+    '@digigov/ui/app/Loader/index.web': {};
     '@digigov/ui/app/Header/HeaderContent': {};
     '@digigov/ui/app/Header/HeaderLogo': {};
     '@digigov/ui/app/Header/HeaderNavMenuContent': {};
@@ -27,8 +29,6 @@ declare const _default: {
     '@digigov/ui/app/Header/HeaderSection': {};
     '@digigov/ui/app/Header/HeaderTitle': {};
     '@digigov/ui/app/Header': {};
-    '@digigov/ui/app/Loader': {};
-    '@digigov/ui/app/Loader/index.web': {};
     '@digigov/ui/app/Masthead': {};
     '@digigov/ui/app/Modal/auto': {};
     '@digigov/ui/app/Modal/hooks': {};
@@ -36,10 +36,10 @@ declare const _default: {
     '@digigov/ui/app/Modal/index.web': {};
     '@digigov/ui/app/NotFound': {};
     '@digigov/ui/app/OutdatedBrowserBanner': {};
-    '@digigov/ui/app/PageTitleContainer': {};
     '@digigov/ui/app/Panel': {};
-    '@digigov/ui/app/QrCodeScanner': {};
+    '@digigov/ui/app/PageTitleContainer': {};
     '@digigov/ui/app/PhaseBannerHeader': {};
+    '@digigov/ui/app/QrCodeScanner': {};
     '@digigov/ui/app/QrCodeViewer': {};
     '@digigov/ui/app/QrCodeViewer/qrcodegen': {};
     '@digigov/ui/app/QrCodeViewer/types': {};

package/registry.js

@@ -19,6 +19,8 @@ import * as __WEBPACK_EXTERNAL_MODULE__app_CloseButton_index_js_9f02facf__ from
 import * as __WEBPACK_EXTERNAL_MODULE__app_FilterContainer_index_js_33dbfb8a__ from "./app/FilterContainer/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Footer_FooterLink_js_7b5df4be__ from "./app/Footer/FooterLink.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Footer_index_js_656d1f1e__ from "./app/Footer/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__app_Loader_index_js_2c2f957b__ from "./app/Loader/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__app_Loader_index_web_js_287ec447__ from "./app/Loader/index.web.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Header_HeaderContent_js_3d3e5dbc__ from "./app/Header/HeaderContent.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Header_HeaderLogo_js_271dbc3a__ from "./app/Header/HeaderLogo.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Header_HeaderNavMenuContent_js_64554766__ from "./app/Header/HeaderNavMenuContent.js";
@@ -26,8 +28,6 @@ import * as __WEBPACK_EXTERNAL_MODULE__app_Header_HeaderSecondaryLogo_js_7031f32
 import * as __WEBPACK_EXTERNAL_MODULE__app_Header_HeaderSection_js_af431557__ from "./app/Header/HeaderSection.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Header_HeaderTitle_js_0b1bcc23__ from "./app/Header/HeaderTitle.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Header_index_js_98820ab3__ from "./app/Header/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__app_Loader_index_js_2c2f957b__ from "./app/Loader/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__app_Loader_index_web_js_287ec447__ from "./app/Loader/index.web.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Masthead_index_js_818bba2d__ from "./app/Masthead/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Modal_auto_js_c687d323__ from "./app/Modal/auto.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Modal_hooks_js_e0234b39__ from "./app/Modal/hooks.js";
@@ -35,10 +35,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__app_Modal_index_js_6d29a44e__ from "./app
 import * as __WEBPACK_EXTERNAL_MODULE__app_Modal_index_web_js_53739084__ from "./app/Modal/index.web.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_NotFound_index_js_50602c54__ from "./app/NotFound/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_OutdatedBrowserBanner_index_js_6d787549__ from "./app/OutdatedBrowserBanner/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__app_PageTitleContainer_index_js_4d16f6eb__ from "./app/PageTitleContainer/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_Panel_index_js_6b0cd9f3__ from "./app/Panel/index.js";
-import * as __WEBPACK_EXTERNAL_MODULE__app_QrCodeScanner_index_js_bf063156__ from "./app/QrCodeScanner/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__app_PageTitleContainer_index_js_4d16f6eb__ from "./app/PageTitleContainer/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_PhaseBannerHeader_index_js_510a3fe5__ from "./app/PhaseBannerHeader/index.js";
+import * as __WEBPACK_EXTERNAL_MODULE__app_QrCodeScanner_index_js_bf063156__ from "./app/QrCodeScanner/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_QrCodeViewer_index_js_4071f8f8__ from "./app/QrCodeViewer/index.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_QrCodeViewer_qrcodegen_js_8c56fa22__ from "./app/QrCodeViewer/qrcodegen.js";
 import * as __WEBPACK_EXTERNAL_MODULE__app_QrCodeViewer_types_js_0b66fe90__ from "./app/QrCodeViewer/types.js";
@@ -218,6 +218,8 @@ const registry = {
     '@digigov/ui/app/FilterContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_FilterContainer_index_js_33dbfb8a__),
     '@digigov/ui/app/Footer/FooterLink': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Footer_FooterLink_js_7b5df4be__),
     '@digigov/ui/app/Footer': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Footer_index_js_656d1f1e__),
+    '@digigov/ui/app/Loader': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Loader_index_js_2c2f957b__),
+    '@digigov/ui/app/Loader/index.web': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Loader_index_web_js_287ec447__),
     '@digigov/ui/app/Header/HeaderContent': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Header_HeaderContent_js_3d3e5dbc__),
     '@digigov/ui/app/Header/HeaderLogo': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Header_HeaderLogo_js_271dbc3a__),
     '@digigov/ui/app/Header/HeaderNavMenuContent': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Header_HeaderNavMenuContent_js_64554766__),
@@ -225,8 +227,6 @@ const registry = {
     '@digigov/ui/app/Header/HeaderSection': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Header_HeaderSection_js_af431557__),
     '@digigov/ui/app/Header/HeaderTitle': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Header_HeaderTitle_js_0b1bcc23__),
     '@digigov/ui/app/Header': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Header_index_js_98820ab3__),
-    '@digigov/ui/app/Loader': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Loader_index_js_2c2f957b__),
-    '@digigov/ui/app/Loader/index.web': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Loader_index_web_js_287ec447__),
     '@digigov/ui/app/Masthead': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Masthead_index_js_818bba2d__),
     '@digigov/ui/app/Modal/auto': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Modal_auto_js_c687d323__),
     '@digigov/ui/app/Modal/hooks': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Modal_hooks_js_e0234b39__),
@@ -234,10 +234,10 @@ const registry = {
     '@digigov/ui/app/Modal/index.web': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Modal_index_web_js_53739084__),
     '@digigov/ui/app/NotFound': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_NotFound_index_js_50602c54__),
     '@digigov/ui/app/OutdatedBrowserBanner': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_OutdatedBrowserBanner_index_js_6d787549__),
-    '@digigov/ui/app/PageTitleContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_PageTitleContainer_index_js_4d16f6eb__),
     '@digigov/ui/app/Panel': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_Panel_index_js_6b0cd9f3__),
-    '@digigov/ui/app/QrCodeScanner': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_QrCodeScanner_index_js_bf063156__),
+    '@digigov/ui/app/PageTitleContainer': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_PageTitleContainer_index_js_4d16f6eb__),
     '@digigov/ui/app/PhaseBannerHeader': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_PhaseBannerHeader_index_js_510a3fe5__),
+    '@digigov/ui/app/QrCodeScanner': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_QrCodeScanner_index_js_bf063156__),
     '@digigov/ui/app/QrCodeViewer': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_QrCodeViewer_index_js_4071f8f8__),
     '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_QrCodeViewer_qrcodegen_js_8c56fa22__),
     '@digigov/ui/app/QrCodeViewer/types': lazyImport(__WEBPACK_EXTERNAL_MODULE__app_QrCodeViewer_types_js_0b66fe90__),

package/src/content/Table/Table.stories.jsx

@@ -10,7 +10,14 @@ import {
   TableBody,
   TableHeadCell,
   TableDataCell,
+  TableFloatingScroll,
 } from '@digigov/ui/content/Table';
+import {
+  Dropdown,
+  DropdownButton,
+  DropdownContent,
+} from '@digigov/ui/navigation/Dropdown';
+import NavList, { NavListItemAction } from '@digigov/ui/navigation/NavList';
 
 export default {
   title: 'Digigov UI/content/Table',
@@ -30,6 +37,9 @@ const data = {
     role: 'Ρόλος',
     email: 'Email',
     phone: 'Ώρες',
+    country: 'Χώρα',
+    active: 'Ενεργός',
+    actions: 'Ενέργειες',
   },
   content: [
     {
@@ -37,100 +47,158 @@ const data = {
       role: 'Χειριστής',
       email: 'marios@mail.com',
       phone: '34',
+      country: 'Ελλάδα',
+      active: true,
     },
     {
       name: 'Καλλιόπη Παπαδοπούλου',
       role: 'Χειριστής',
       email: 'kalliopi@mail.com',
       phone: '65',
+      country: 'Ελλάδα',
+      active: true,
     },
     {
       name: 'Μαρία Φλούπη',
       role: 'Διαχειριστής',
       email: 'maria@mail.com',
       phone: '12',
+      country: 'Ελλάδα',
+      active: false,
     },
     {
       name: 'Ηλέκτρα Αποστόλου',
       role: 'Διαχειριστής',
       email: 'ilektra@mail.com',
       phone: '26',
+      country: 'Ελλάδα',
+      active: true,
     },
   ],
 };
 
 export const WithControls = {
   render: (args) => {
-    return (
-      <TableContainer border={args.containerBorder}>
-        <Table
-          headerVariant={args.headerVariant}
-          verticalBorders={args.verticalBorders}
-          variant={args.variant}
-          dense={args.dense}
-          stacked={args.stacked}
-        >
-          {data && (
-            <>
-              <TableCaption size={args.tableCaptionSize}>
-                {data.title}
-              </TableCaption>
-              <TableHead>
-                <TableRow>
-                  {data.labels &&
-                    Object.keys(data.labels).map((key, index) => (
-                      <TableHeadCell
-                        key={key}
-                        width={index === 0 && args.firstTableHeadCellWidth}
-                        dataType={key === 'phone' && args.tableHeadCellDataType}
-                      >
-                        {data.labels[key]}
-                      </TableHeadCell>
-                    ))}
-                </TableRow>
-              </TableHead>
-              <TableBody>
-                {data.content &&
-                  data.content.map((item, index) => (
-                    <TableRow
-                      key={index}
-                      highlight={index === 1 && args.tableRowHighlight === true}
-                      color={index === 1 && args.tableRowColor}
+    const TableContent = () => (
+      <Table
+        headerVariant={args.headerVariant}
+        verticalBorders={args.verticalBorders}
+        variant={args.variant}
+        dense={args.dense}
+        stacked={args.stacked}
+      >
+        {data && (
+          <>
+            <TableCaption size={args.tableCaptionSize}>
+              {data.title}
+            </TableCaption>
+            <TableHead>
+              <TableRow>
+                {data.labels &&
+                  Object.keys(data.labels).map((key, index) => (
+                    <TableHeadCell
+                      key={key}
+                      width={index === 0 && args.firstTableHeadCellWidth}
+                      dataType={key === 'phone' && args.tableHeadCellDataType}
                     >
-                      <TableDataCell data-label={data.labels.name}>
-                        {item.name}
-                      </TableDataCell>
-                      <TableDataCell
-                        data-label={data.labels.role}
-                        highlight={
-                          index === 2 && args.tableCellHighlight === 'warning'
-                            ? 'warning'
-                            : index === 2 && args.tableCellHighlight === 'error'
-                              ? 'error'
-                              : undefined
-                        }
-                      >
-                        {item.role}
-                      </TableDataCell>
-                      <TableDataCell data-label={data.labels.email}>
-                        {item.email}
-                      </TableDataCell>
-                      <TableDataCell
-                        data-label={data.labels.phone}
-                        dataType={args.tableHeadCellDataType}
-                      >
-                        {item.phone}
-                      </TableDataCell>
-                    </TableRow>
+                      {data.labels[key]}
+                    </TableHeadCell>
                   ))}
-              </TableBody>
-            </>
-          )}
-        </Table>
-      </TableContainer>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.content &&
+                data.content.map((item, index) => (
+                  <TableRow
+                    key={index}
+                    highlight={index === 1 && args.tableRowHighlight === true}
+                    color={index === 1 && args.tableRowColor}
+                  >
+                    <TableDataCell
+                      data-label={data.labels.name}
+                      maxWidthWithOverflow={
+                        args.tableDataCellMaxWidthWithOverflow
+                      }
+                    >
+                      {item.name}
+                    </TableDataCell>
+                    <TableDataCell
+                      data-label={data.labels.role}
+                      highlight={
+                        index === 2 && args.tableCellHighlight === 'warning'
+                          ? 'warning'
+                          : index === 2 && args.tableCellHighlight === 'error'
+                            ? 'error'
+                            : undefined
+                      }
+                    >
+                      {item.role}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.email}>
+                      {item.email}
+                    </TableDataCell>
+                    <TableDataCell
+                      data-label={data.labels.phone}
+                      dataType={args.tableHeadCellDataType}
+                    >
+                      {item.phone}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.country}>
+                      {item.country}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.active}>
+                      {item.active ? 'Ναι' : 'Όχι'}
+                    </TableDataCell>
+                    <TableDataCell
+                      maxWidthWithOverflow={
+                        args.tableDataCellMaxWidthWithOverflow
+                      }
+                      data-label={data.labels.actions}
+                    >
+                      <Dropdown
+                        float={args.actionsFloat}
+                        align="right"
+                        placement="bottom"
+                      >
+                        <DropdownButton variant="link">
+                          Ενέργειες
+                        </DropdownButton>
+                        <DropdownContent>
+                          <NavList layout="vertical">
+                            <NavListItemAction href="#">
+                              Εισαγωγή προτύπου
+                            </NavListItemAction>
+                            <NavListItemAction href="#">
+                              Διαγραφή
+                            </NavListItemAction>
+                          </NavList>
+                        </DropdownContent>
+                      </Dropdown>
+                    </TableDataCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </>
+        )}
+      </Table>
+    );
+    return (
+      <>
+        {args.container === 'FloatingTable' ? (
+          <TableFloatingScroll>
+            <TableContent />
+          </TableFloatingScroll>
+        ) : (
+          <TableContainer border={args.containerBorder}>
+            <TableContent />
+          </TableContainer>
+        )}
+      </>
     );
   },
   args: {
+    actionsFloat: true,
+    container: 'TableContainer',
     containerBorder: false,
     headerVariant: 'light',
     verticalBorders: false,
@@ -143,8 +211,20 @@ export const WithControls = {
     tableRowColor: 'primary',
     firstTableHeadCellWidth: '25%',
     tableHeadCellDataType: 'text',
+    tableDataCellMaxWidthWithOverflow: false,
   },
   argTypes: {
+    actionsFloat: {
+      control: {
+        type: 'boolean',
+      },
+    },
+    container: {
+      control: {
+        type: 'inline-radio',
+      },
+      options: ['TableContainer', 'FloatingTable'],
+    },
     containerBorder: {
       control: {
         type: 'boolean',
@@ -209,6 +289,11 @@ export const WithControls = {
       },
       options: ['numeric', 'text'],
     },
+    tableDataCellMaxWidthWithOverflow: {
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   parameters: {
     controls: { exclude: ['ref'] },
@@ -233,4 +318,5 @@ export { UsingHighlights } from '@digigov/ui/content/Table/__stories__/UsingHigh
 export { MultipleProps } from '@digigov/ui/content/Table/__stories__/MultipleProps';
 export { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
 export { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
+export { WithMaxWidthWithOverflow } from '@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow';
 export { Full } from '@digigov/ui/content/Table/__stories__/Full';

package/src/content/Table/__stories__/WithMaxWidthWithOverflow.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import {
+  TableContainer,
+  Table,
+  TableCaption,
+  TableHead,
+  TableRow,
+  TableBody,
+  TableHeadCell,
+  TableDataCell,
+} from '@digigov/ui/content/Table';
+
+const data = {
+  title: 'Χρήστες',
+  labels: {
+    name: 'Ονοματεπώνυμο',
+    description: 'Περιγραφή',
+    email: 'Email',
+  },
+  content: [
+    {
+      name: 'Μάριος Μενεξές',
+      description:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+      email: 'marios@mail.com',
+    },
+    {
+      name: 'Καλλιόπη Παπαδοπούλου',
+      description:
+        'Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?',
+      email: 'kalliopi@mail.com',
+    },
+  ],
+};
+
+export const WithMaxWidthWithOverflow = (_: any) => {
+  return (
+    <TableContainer>
+      <Table verticalAlign="top">
+        {data && (
+          <>
+            <TableCaption>{data.title}</TableCaption>
+            <TableHead>
+              <TableRow>
+                {data.labels &&
+                  Object.keys(data.labels).map((key) => (
+                    <TableHeadCell key={key}>{data.labels[key]}</TableHeadCell>
+                  ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data.content &&
+                data.content.map((item, index) => (
+                  <TableRow key={index}>
+                    <TableDataCell data-label={data.labels.name}>
+                      {item.name}
+                    </TableDataCell>
+                    <TableDataCell
+                      maxWidthWithOverflow
+                      data-label={data.labels.description}
+                    >
+                      {item.description}
+                    </TableDataCell>
+                    <TableDataCell data-label={data.labels.email}>
+                      {item.email}
+                    </TableDataCell>
+                  </TableRow>
+                ))}
+            </TableBody>
+          </>
+        )}
+      </Table>
+    </TableContainer>
+  );
+};
+export default WithMaxWidthWithOverflow;

package/src/content/Table/index.test.tsx

@@ -18,6 +18,7 @@ import { VerticalBorders } from '@digigov/ui/content/Table/__stories__/VerticalB
 import { VerticalHeaders } from '@digigov/ui/content/Table/__stories__/VerticalHeaders';
 import { WithFloatingScroll } from '@digigov/ui/content/Table/__stories__/WithFloatingScroll';
 import { WithLoader } from '@digigov/ui/content/Table/__stories__/WithLoader';
+import { WithMaxWidthWithOverflow } from '@digigov/ui/content/Table/__stories__/WithMaxWidthWithOverflow';
 import { WithSortFilters } from '@digigov/ui/content/Table/__stories__/WithSortFilters';
 import { ZebraProp } from '@digigov/ui/content/Table/__stories__/ZebraProp';
 const SCREENSHOT_DELAY = 2_000;
@@ -78,6 +79,9 @@ test('renders the All Table variants', async ({ mount, page }) => {
     <TestVariant title="WithLoader">
       <WithLoader />
     </TestVariant>
+    <TestVariant title="WithMaxWidthWithOverflow">
+      <WithMaxWidthWithOverflow />
+    </TestVariant>
     <TestVariant title="WithSortFilters">
       <WithSortFilters />
     </TestVariant>

package/src/navigation/Dropdown/index.tsx

@@ -54,11 +54,9 @@ export const Dropdown = React.forwardRef<HTMLDetailsElement, DropdownProps>(
         const tbody = element.closest('tbody') as HTMLElement;
         const parentElement = element?.parentElement as HTMLElement;
         if (element.open) {
-          tbody.style.position = 'static';
+          tbody.style.position = 'inherit';
           const rect = element?.getBoundingClientRect();
           const parentRect = parentElement.getBoundingClientRect();
-          element.style.position = 'static';
-          // arbitrary spacing of 12 pixels because CSS
           const top = rect.top + window.pageYOffset;
           const left = rect.left + window.pageXOffset;
           parentElement.style.height = `${parentRect.height}px`;
@@ -67,7 +65,7 @@ export const Dropdown = React.forwardRef<HTMLDetailsElement, DropdownProps>(
           element.style.left = `${left}px`;
           element.style.position = `absolute`;
           element.style.display = `block`;
-          element.style.background = 'white';
+          element.style.background = 'inherit';
         } else {
           tbody.style.position = 'relative';
           parentElement.style.height = '';
@@ -76,7 +74,6 @@ export const Dropdown = React.forwardRef<HTMLDetailsElement, DropdownProps>(
           element.style.left = `0`;
           element.style.position = `relative`;
           element.style.display = `table-cell`;
-          // element.style.background = 'transparent';
         }
       };
       if (float) {

package/src/registry.ts

@@ -20,6 +20,8 @@ import * as _digigov_ui_app_CloseButton from "@digigov/ui/app/CloseButton";
 import * as _digigov_ui_app_FilterContainer from "@digigov/ui/app/FilterContainer";
 import * as _digigov_ui_app_Footer_FooterLink from "@digigov/ui/app/Footer/FooterLink";
 import * as _digigov_ui_app_Footer from "@digigov/ui/app/Footer";
+import * as _digigov_ui_app_Loader from "@digigov/ui/app/Loader";
+import * as _digigov_ui_app_Loader_index_web from "@digigov/ui/app/Loader/index.web";
 import * as _digigov_ui_app_Header_HeaderContent from "@digigov/ui/app/Header/HeaderContent";
 import * as _digigov_ui_app_Header_HeaderLogo from "@digigov/ui/app/Header/HeaderLogo";
 import * as _digigov_ui_app_Header_HeaderNavMenuContent from "@digigov/ui/app/Header/HeaderNavMenuContent";
@@ -27,8 +29,6 @@ import * as _digigov_ui_app_Header_HeaderSecondaryLogo from "@digigov/ui/app/Hea
 import * as _digigov_ui_app_Header_HeaderSection from "@digigov/ui/app/Header/HeaderSection";
 import * as _digigov_ui_app_Header_HeaderTitle from "@digigov/ui/app/Header/HeaderTitle";
 import * as _digigov_ui_app_Header from "@digigov/ui/app/Header";
-import * as _digigov_ui_app_Loader from "@digigov/ui/app/Loader";
-import * as _digigov_ui_app_Loader_index_web from "@digigov/ui/app/Loader/index.web";
 import * as _digigov_ui_app_Masthead from "@digigov/ui/app/Masthead";
 import * as _digigov_ui_app_Modal_auto from "@digigov/ui/app/Modal/auto";
 import * as _digigov_ui_app_Modal_hooks from "@digigov/ui/app/Modal/hooks";
@@ -36,10 +36,10 @@ import * as _digigov_ui_app_Modal from "@digigov/ui/app/Modal";
 import * as _digigov_ui_app_Modal_index_web from "@digigov/ui/app/Modal/index.web";
 import * as _digigov_ui_app_NotFound from "@digigov/ui/app/NotFound";
 import * as _digigov_ui_app_OutdatedBrowserBanner from "@digigov/ui/app/OutdatedBrowserBanner";
-import * as _digigov_ui_app_PageTitleContainer from "@digigov/ui/app/PageTitleContainer";
 import * as _digigov_ui_app_Panel from "@digigov/ui/app/Panel";
-import * as _digigov_ui_app_QrCodeScanner from "@digigov/ui/app/QrCodeScanner";
+import * as _digigov_ui_app_PageTitleContainer from "@digigov/ui/app/PageTitleContainer";
 import * as _digigov_ui_app_PhaseBannerHeader from "@digigov/ui/app/PhaseBannerHeader";
+import * as _digigov_ui_app_QrCodeScanner from "@digigov/ui/app/QrCodeScanner";
 import * as _digigov_ui_app_QrCodeViewer from "@digigov/ui/app/QrCodeViewer";
 import * as _digigov_ui_app_QrCodeViewer_qrcodegen from "@digigov/ui/app/QrCodeViewer/qrcodegen";
 import * as _digigov_ui_app_QrCodeViewer_types from "@digigov/ui/app/QrCodeViewer/types";
@@ -228,6 +228,8 @@ export default {
   '@digigov/ui/app/FilterContainer': lazyImport(_digigov_ui_app_FilterContainer),
   '@digigov/ui/app/Footer/FooterLink': lazyImport(_digigov_ui_app_Footer_FooterLink),
   '@digigov/ui/app/Footer': lazyImport(_digigov_ui_app_Footer),
+  '@digigov/ui/app/Loader': lazyImport(_digigov_ui_app_Loader),
+  '@digigov/ui/app/Loader/index.web': lazyImport(_digigov_ui_app_Loader_index_web),
   '@digigov/ui/app/Header/HeaderContent': lazyImport(_digigov_ui_app_Header_HeaderContent),
   '@digigov/ui/app/Header/HeaderLogo': lazyImport(_digigov_ui_app_Header_HeaderLogo),
   '@digigov/ui/app/Header/HeaderNavMenuContent': lazyImport(_digigov_ui_app_Header_HeaderNavMenuContent),
@@ -235,8 +237,6 @@ export default {
   '@digigov/ui/app/Header/HeaderSection': lazyImport(_digigov_ui_app_Header_HeaderSection),
   '@digigov/ui/app/Header/HeaderTitle': lazyImport(_digigov_ui_app_Header_HeaderTitle),
   '@digigov/ui/app/Header': lazyImport(_digigov_ui_app_Header),
-  '@digigov/ui/app/Loader': lazyImport(_digigov_ui_app_Loader),
-  '@digigov/ui/app/Loader/index.web': lazyImport(_digigov_ui_app_Loader_index_web),
   '@digigov/ui/app/Masthead': lazyImport(_digigov_ui_app_Masthead),
   '@digigov/ui/app/Modal/auto': lazyImport(_digigov_ui_app_Modal_auto),
   '@digigov/ui/app/Modal/hooks': lazyImport(_digigov_ui_app_Modal_hooks),
@@ -244,10 +244,10 @@ export default {
   '@digigov/ui/app/Modal/index.web': lazyImport(_digigov_ui_app_Modal_index_web),
   '@digigov/ui/app/NotFound': lazyImport(_digigov_ui_app_NotFound),
   '@digigov/ui/app/OutdatedBrowserBanner': lazyImport(_digigov_ui_app_OutdatedBrowserBanner),
-  '@digigov/ui/app/PageTitleContainer': lazyImport(_digigov_ui_app_PageTitleContainer),
   '@digigov/ui/app/Panel': lazyImport(_digigov_ui_app_Panel),
-  '@digigov/ui/app/QrCodeScanner': lazyImport(_digigov_ui_app_QrCodeScanner),
+  '@digigov/ui/app/PageTitleContainer': lazyImport(_digigov_ui_app_PageTitleContainer),
   '@digigov/ui/app/PhaseBannerHeader': lazyImport(_digigov_ui_app_PhaseBannerHeader),
+  '@digigov/ui/app/QrCodeScanner': lazyImport(_digigov_ui_app_QrCodeScanner),
   '@digigov/ui/app/QrCodeViewer': lazyImport(_digigov_ui_app_QrCodeViewer),
   '@digigov/ui/app/QrCodeViewer/qrcodegen': lazyImport(_digigov_ui_app_QrCodeViewer_qrcodegen),
   '@digigov/ui/app/QrCodeViewer/types': lazyImport(_digigov_ui_app_QrCodeViewer_types),