@digigov/react-core 2.2.3 → 2.2.4-govgr-3925.02-06-26-09-54

package/CHANGELOG.md

@@ -1,9 +1,17 @@
 # Change Log - @digigov/react-core
 
-<!-- This log was last generated on Thu, 28 May 2026 09:16:18 GMT and should not be manually modified. -->
+<!-- This log was last generated on Tue, 02 Jun 2026 09:54:09 GMT and should not be manually modified. -->
 
 <!-- Start content -->
 
+## 2.2.4-govgr-3925.02-06-26-09-54
+
+Tue, 02 Jun 2026 09:54:09 GMT
+
+### Minor changes
+
+- fix(libs-ui/TableDataCell): add a protective div to preserve cell-width when action positions absolute (cpapakon@admin.grnet.gr)
+
 ## 2.2.3
 
 Thu, 28 May 2026 09:16:18 GMT

package/TableDataCell/index.d.ts

@@ -45,6 +45,13 @@ export interface TableDataCellProps extends BaseProps<'td'> {
      * @default false
      */
     maxWidthWithOverflow?: boolean;
+    /**
+     * maxWidthWithOverflow is optional.
+     * Use this prop to add an invisible element that has the same width as the cell content to preserve the cell width when the content is positioned absolute.
+     * This is useful in cells that contain for example action dropdowns (see dilosi) to prevent the table from collapsing the cell width when the dropdown is open.
+     * @default false
+     */
+    preserveCellWidth?: boolean;
 }
 /**
  * Use TableDataCell inside the Table component to fill the data of a cell in a table.

package/TableDataCell/index.js

@@ -1,8 +1,18 @@
-import react from "react";
+import react, { useEffect, useId } 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, maxWidthWithOverflow = false, className, children, ...props }, ref) {
+const TableDataCell_TableDataCell = /*#__PURE__*/ react.forwardRef(function({ dataType = 'text', variant = 'border', wordBreak = 'none', highlight, highlightAssistiveText, maxWidthWithOverflow = false, preserveCellWidth = false, className, children, ...props }, ref) {
+    const cellUniqueId = useId();
+    useEffect(()=>{
+        if (preserveCellWidth) {
+            const correctiveWidthEl = document.getElementById(cellUniqueId);
+            if (correctiveWidthEl) {
+                const contentWidth = correctiveWidthEl.getBoundingClientRect().width;
+                correctiveWidthEl.style.width = `${contentWidth}px`;
+            }
+        }
+    }, []);
     const calculatedHighlightAssistiveText = highlightAssistiveText || ('warning' === highlight ? 'Προσοχή' : 'error' === highlight ? 'Λανθασμένο πεδίο' : void 0);
     return /*#__PURE__*/ react.createElement(Base, {
         as: "td",
@@ -19,7 +29,14 @@ const TableDataCell_TableDataCell = /*#__PURE__*/ react.forwardRef(function({ da
         ...props
     }, 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));
+    }, calculatedHighlightAssistiveText && /*#__PURE__*/ react.createElement(VisuallyHidden, null, calculatedHighlightAssistiveText), children) : /*#__PURE__*/ react.createElement(react.Fragment, null, calculatedHighlightAssistiveText && /*#__PURE__*/ react.createElement(VisuallyHidden, null, calculatedHighlightAssistiveText), preserveCellWidth && /*#__PURE__*/ react.createElement("div", {
+        id: cellUniqueId,
+        className: "table-cell-corrective-width-element",
+        style: {
+            height: '1px',
+            marginTop: '-1px'
+        }
+    }), 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.2.3
+/** @license Digigov v2.2.4-govgr-3925.02-06-26-09-54
  *
  * 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.2.3",
+  "version": "2.2.4-govgr-3925.02-06-26-09-54",
   "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.2.3",
-    "@digigov/react-icons": "2.2.3"
+    "@digigov/css": "2.2.4-govgr-3925.02-06-26-09-54",
+    "@digigov/react-icons": "2.2.4-govgr-3925.02-06-26-09-54"
   },
   "peerDependenciesMeta": {
     "react-native": {

package/src/TableDataCell/index.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useId } from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 import VisuallyHidden from '@digigov/react-core/VisuallyHidden';
@@ -52,6 +52,13 @@ export interface TableDataCellProps extends BaseProps<'td'> {
    * @default false
    */
   maxWidthWithOverflow?: boolean;
+  /**
+   * maxWidthWithOverflow is optional.
+   * Use this prop to add an invisible element that has the same width as the cell content to preserve the cell width when the content is positioned absolute.
+   * This is useful in cells that contain for example action dropdowns (see dilosi) to prevent the table from collapsing the cell width when the dropdown is open.
+   * @default false
+   */
+  preserveCellWidth?: boolean;
 }
 /**
  * Use TableDataCell inside the Table component to fill the data of a cell in a table.
@@ -67,12 +74,33 @@ export const TableDataCell = React.forwardRef<
     highlight,
     highlightAssistiveText,
     maxWidthWithOverflow = false,
+    preserveCellWidth = false,
     className,
     children,
     ...props
   },
   ref
 ) {
+  const cellUniqueId = useId();
+
+  useEffect(() => {
+    // If preserveCellWidth is true, the cell contains an action dropdown
+    // (see dilosi), so we need to set the width of the corrective-width-element
+    // to the width of the content to allow the table to keep the correct width
+    // for the cell even when the cell content needs to position itself absolute.
+    if (preserveCellWidth) {
+      const correctiveWidthEl = document.getElementById(
+        cellUniqueId
+      ) as HTMLElement;
+      if (correctiveWidthEl) {
+        // Get the width after rendering and set it to the corrective element
+        // explicitly in pixels
+        const contentWidth = correctiveWidthEl.getBoundingClientRect().width;
+        correctiveWidthEl.style.width = `${contentWidth}px`;
+      }
+    }
+  }, []);
+
   const calculatedHighlightAssistiveText =
     highlightAssistiveText ||
     (highlight === 'warning'
@@ -108,6 +136,13 @@ export const TableDataCell = React.forwardRef<
           {calculatedHighlightAssistiveText && (
             <VisuallyHidden>{calculatedHighlightAssistiveText}</VisuallyHidden>
           )}
+          {preserveCellWidth && (
+            <div
+              id={cellUniqueId}
+              className="table-cell-corrective-width-element"
+              style={{ height: '1px', marginTop: '-1px' }}
+            ></div>
+          )}
           {children}
         </>
       )}