@dbcdk/react-components 0.0.138 → 0.0.140

package/dist/components/clear-button/ClearButton.cjs

@@ -8,8 +8,8 @@ function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
 var styles__default = /*#__PURE__*/_interopDefault(styles);
 
-function ClearButton({ onClick, absolute, ariaLabel = "Ryd" }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.clearButton} ${absolute ? styles__default.default.absolute : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+function ClearButton({ onClick, ariaLabel = "Ryd" }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.clearButton, children: /* @__PURE__ */ jsxRuntime.jsx(
     "button",
     {
       className: styles__default.default.button,

package/dist/components/clear-button/ClearButton.d.ts

@@ -2,8 +2,7 @@ import type { ReactNode } from 'react';
 import * as React from 'react';
 interface ClearButtonProps {
     onClick?: (event?: React.MouseEvent | React.KeyboardEvent) => void;
-    absolute?: boolean;
     ariaLabel?: string;
 }
-export declare function ClearButton({ onClick, absolute, ariaLabel }: ClearButtonProps): ReactNode;
+export declare function ClearButton({ onClick, ariaLabel }: ClearButtonProps): ReactNode;
 export {};

package/dist/components/clear-button/ClearButton.js

@@ -2,8 +2,8 @@ import { jsx } from 'react/jsx-runtime';
 import { X } from 'lucide-react';
 import styles from './ClearButton.module.css';
 
-function ClearButton({ onClick, absolute, ariaLabel = "Ryd" }) {
-  return /* @__PURE__ */ jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ""}`, children: /* @__PURE__ */ jsx(
+function ClearButton({ onClick, ariaLabel = "Ryd" }) {
+  return /* @__PURE__ */ jsx("span", { className: styles.clearButton, children: /* @__PURE__ */ jsx(
     "button",
     {
       className: styles.button,

package/dist/components/clear-button/ClearButton.module.css

@@ -1,3 +1,10 @@
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
 .clearButton .button {
   appearance: none;
   display: flex;
@@ -17,10 +24,3 @@
 .clearButton .button:hover {
   background-color: var(--color-bg-contextual);
 }
-
-.clearButton.absolute .button {
-  position: absolute;
-  right: var(--spacing-xxs);
-  top: 50%;
-  transform: translateY(-50%);
-}

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/forms/input/Input.module.css

@@ -75,9 +75,7 @@
 
 /*
   When onClear exists, do not keep extra inline-end padding on the input itself.
-  The clear affordance already reserves the needed space via:
-  - the inline clearSlot inside endAdornment, or
-  - the absolute clear button path.
+  The clear affordance already reserves the needed space via the inline clearSlot.
 */
 .withClear .input {
   padding-inline-end: 0;

package/dist/components/sidebar/components/sidebar-container/SidebarContainer.module.css

@@ -118,7 +118,7 @@
 }
 
 /* FILTER */
-.filter button {
+.filter > button {
   border-radius: 0;
   min-height: var(--component-size-md);
   width: 100%;

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'] {
@@ -557,6 +571,7 @@
 
 .contextMenuAnchorCell {
   overflow: visible;
+  z-index: 1;
 }
 
 .contextMenuAnchorCell .cellValueEllipsis,
@@ -572,7 +587,7 @@
   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/package.json

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