@dbcdk/react-components 0.0.137 → 0.0.139

package/dist/components/forms/input/Input.cjs

@@ -152,8 +152,7 @@ const Input = react.forwardRef(function Input2({
                       }
                     ) : null,
                     endAdornment
-                  ] }),
-                  hasVisibleClear && !hasEndAdornment && onClear ? /* @__PURE__ */ jsxRuntime.jsx(ClearButton.ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel, absolute: true }) : null
+                  ] })
                 ]
               }
             ),

package/dist/components/forms/input/Input.js

@@ -146,8 +146,7 @@ const Input = forwardRef(function Input2({
                       }
                     ) : null,
                     endAdornment
-                  ] }),
-                  hasVisibleClear && !hasEndAdornment && onClear ? /* @__PURE__ */ jsx(ClearButton, { onClick: onClear, ariaLabel: clearAriaLabel, absolute: true }) : null
+                  ] })
                 ]
               }
             ),

package/dist/components/table/Table.module.css

@@ -186,6 +186,7 @@
   background: var(--table-component-row-bg);
   overflow: hidden;
   line-height: 20px;
+  height: 40px;
 }
 
 .md .headerCell {
@@ -208,6 +209,19 @@
   padding-inline: var(--spacing-sm);
   font-size: var(--font-size-xs);
   line-height: 20px;
+  height: 32px;
+}
+
+.sm .contextMenuOverlay {
+  inset-block: 0;
+  min-block-size: 0;
+  block-size: min(100%, 32px);
+}
+
+.sm .contextMenuTrigger {
+  min-block-size: 0;
+  block-size: 100%;
+  border-radius: 0;
 }
 
 .cell[data-vertical-align='top'] {
@@ -539,6 +553,15 @@
   text-overflow: clip;
 }
 
+.row:focus-within > .cell:not(.selectionCell) .cellContent,
+.row:focus-within > .cell:not(.selectionCell) .cellValueEllipsis {
+  white-space: normal;
+  overflow-wrap: break-word;
+  word-break: normal;
+  overflow: visible;
+  text-overflow: clip;
+}
+
 .contextMenuTrigger {
   color: var(--color-fg-subtle);
   min-inline-size: 36px;
@@ -548,6 +571,7 @@
 
 .contextMenuAnchorCell {
   overflow: visible;
+  z-index: 1;
 }
 
 .contextMenuAnchorCell .cellValueEllipsis,
@@ -557,14 +581,13 @@
 
 .contextMenuOverlay {
   position: absolute;
-  inset-block-start: 50%;
+  inset-block-start: 0;
   inset-inline-end: 0;
-  transform: translateY(-50%);
   display: inline-flex;
   align-items: center;
   justify-content: center;
   min-inline-size: 40px;
-  min-block-size: 40px;
+  block-size: min(100%, 40px);
   z-index: 3;
 }
 

package/dist/components/table/components/TableRow.cjs

@@ -162,7 +162,14 @@ function TableRow({
                         children: cellValue
                       }
                     ),
-                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsxRuntime.jsx(RowContextMenu, { rowId, items: contextMenuItems }) : null
+                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsxRuntime.jsx(
+                      RowContextMenu,
+                      {
+                        rowId,
+                        items: contextMenuItems,
+                        onRowClick: onRowClick ? () => onRowClick(row) : void 0
+                      }
+                    ) : null
                   ]
                 }
               )
@@ -176,7 +183,8 @@ function TableRow({
 }
 function RowContextMenu({
   rowId,
-  items
+  items,
+  onRowClick
 }) {
   const toggleRef = react.useRef(null);
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -189,6 +197,11 @@ function RowContextMenu({
         e.stopPropagation();
         (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
       },
+      onContextMenu: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRowClick == null ? void 0 : onRowClick();
+      },
       children: /* @__PURE__ */ jsxRuntime.jsx(
         Popover.Popover,
         {

package/dist/components/table/components/TableRow.js

@@ -156,7 +156,14 @@ function TableRow({
                         children: cellValue
                       }
                     ),
-                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsx(RowContextMenu, { rowId, items: contextMenuItems }) : null
+                    hasContextMenu && isLastColumn ? /* @__PURE__ */ jsx(
+                      RowContextMenu,
+                      {
+                        rowId,
+                        items: contextMenuItems,
+                        onRowClick: onRowClick ? () => onRowClick(row) : void 0
+                      }
+                    ) : null
                   ]
                 }
               )
@@ -170,7 +177,8 @@ function TableRow({
 }
 function RowContextMenu({
   rowId,
-  items
+  items,
+  onRowClick
 }) {
   const toggleRef = useRef(null);
   return /* @__PURE__ */ jsx(
@@ -183,6 +191,11 @@ function RowContextMenu({
         e.stopPropagation();
         (_a = toggleRef.current) == null ? void 0 : _a.call(toggleRef, e);
       },
+      onContextMenu: (e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onRowClick == null ? void 0 : onRowClick();
+      },
       children: /* @__PURE__ */ jsx(
         Popover,
         {

package/dist/components/table/hooks/useTableRowInteractions.cjs

@@ -14,6 +14,7 @@ function useTableRowInteractions({
   const handleRowClick = react.useCallback(
     (e) => {
       var _a, _b;
+      if (e.button !== 0) return;
       const target = e.target;
       if (((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) || ((_b = target == null ? void 0 : target.closest) == null ? void 0 : _b.call(target, '[data-row-context-menu="true"]'))) {
         return;

package/dist/components/table/hooks/useTableRowInteractions.js

@@ -12,6 +12,7 @@ function useTableRowInteractions({
   const handleRowClick = useCallback(
     (e) => {
       var _a, _b;
+      if (e.button !== 0) return;
       const target = e.target;
       if (((_a = target == null ? void 0 : target.closest) == null ? void 0 : _a.call(target, '[data-selection-control="true"]')) || ((_b = target == null ? void 0 : target.closest) == null ? void 0 : _b.call(target, '[data-row-context-menu="true"]'))) {
         return;

package/dist/index.d.ts

@@ -23,3 +23,4 @@ export * from './components/forms/input-container/InputContainer';
 export * from './components/divider/Divider';
 export * from './components/grid/Grid';
 export * from './components/metric-tile/MetricTile';
+export type { TableContextMenuItem } from './components/table/Table.types';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dbcdk/react-components",
-  "version": "0.0.137",
+  "version": "0.0.139",
   "description": "Reusable React components for DBC projects",
   "license": "ISC",
   "author": "",