@sphereon/ui-components.ssi-react 0.1.3-unstable.100 → 0.1.3-unstable.102

package/dist/components/buttons/RowActionMenuButton/index.d.ts

@@ -1,13 +1,13 @@
-import { CSSProperties, FC } from 'react';
+import { CSSProperties, ReactElement } from 'react';
 import { ButtonIcon } from '@sphereon/ui-components.core';
 import { ActionButton } from '../../../index';
 import { Row } from '@tanstack/react-table';
-type Props = {
-    actions: ActionButton[];
+type Props<T> = {
+    actions: ActionButton<T>[];
     icon: ButtonIcon;
     color?: string;
     style?: CSSProperties;
-    rowData?: Row<any>;
+    rowData: Row<T>;
 };
-declare const RowActionMenuButton: FC<Props>;
+declare const RowActionMenuButton: <T>({ actions, icon, color, style, rowData }: Props<T>) => ReactElement;
 export default RowActionMenuButton;

package/dist/components/buttons/RowActionMenuButton/index.js

@@ -17,11 +17,17 @@ const RowActionMenuButton = ({ actions, icon, color, style = {}, rowData }) => {
             document.removeEventListener('mousedown', handleClickOutside);
         };
     }, [dropdownRef]);
-    const toggleDropdown = async () => {
+    const toggleDropdown = (event) => {
+        event?.stopPropagation();
         setIsDropdownVisible(!isDropdownVisible);
     };
+    const handleActionClick = (action, rowData) => async (event) => {
+        event.stopPropagation();
+        await action.onClick(rowData);
+        setIsDropdownVisible(false);
+    };
     const renderDropdown = () => {
-        return (_jsx(DropdownContainer, { ref: dropdownRef, style: { display: isDropdownVisible ? 'block' : 'none' }, children: actions.map((action, index) => (_jsxs(ActionItemContainer, { onClick: () => action.onClick(rowData), children: [_jsx(ItemCaption, { children: action.caption }), action.icon && _jsx(SSIIconButton, { onClick: () => action.onClick(rowData), icon: action.icon })] }, index))) }));
+        return (_jsx(DropdownContainer, { ref: dropdownRef, style: { display: isDropdownVisible ? 'block' : 'none' }, children: actions.map((action, index) => (_jsxs(ActionItemContainer, { onClick: handleActionClick(action, rowData), children: [_jsx(ItemCaption, { children: action.caption }), action.icon && _jsx(SSIIconButton, { onClick: handleActionClick(action, rowData), icon: action.icon })] }, index))) }));
     };
     return (_jsxs(ButtonContainer, { style: { ...style }, children: [_jsx(SSIIconButton, { icon: icon || ButtonIcon.BITTERBALLEN, color: color, onClick: toggleDropdown }), renderDropdown()] }));
 };

package/dist/components/buttons/SSIIconButton/index.d.ts

@@ -1,8 +1,8 @@
-import { FC } from 'react';
+import { FC, MouseEventHandler } from 'react';
 import { ButtonIcon } from '@sphereon/ui-components.core';
 type Props = {
     icon: ButtonIcon;
-    onClick: () => Promise<void>;
+    onClick: MouseEventHandler;
     disabled?: boolean;
     color?: string;
 };

package/dist/components/views/SSITableView/index.d.ts

@@ -11,7 +11,7 @@ type Props<T> = {
     enableResultCount?: boolean;
     columnResizeMode?: ColumnResizeMode;
     actions?: Array<Button>;
-    actionGroup?: ActionGroup;
+    actionGroup?: ActionGroup<T>;
 };
 declare const SSITableView: <T extends {}>(props: Props<T>) => ReactElement;
 export default SSITableView;

package/dist/styles/components/components/RowActionMenuButton/index.js

@@ -24,4 +24,6 @@ export const RowActionDropdownContainerStyled = styled.div `
   background-color: #fff;
   width: auto;
   padding: 10px;
+  background: #fbfbfb;
+  border-radius: 0px 0px 6px 6px;
 `;

package/dist/types/table/index.d.ts

@@ -1,4 +1,4 @@
-import { AccessorFn, DeepKeys } from '@tanstack/react-table';
+import { AccessorFn, DeepKeys, Row } from '@tanstack/react-table';
 import { ButtonIcon } from '@sphereon/ui-components.core';
 export declare enum TableCellType {
     TEXT = "text",
@@ -19,13 +19,13 @@ export type TableCellOptions = {
     columnMaxWidth?: number;
     columnWidth?: number;
 };
-export type ActionGroup = {
+export type ActionGroup<T> = {
     caption: string;
-    actions: ActionButton[];
+    actions: ActionButton<T>[];
 };
-export type ActionButton = {
+export type ActionButton<T> = {
     caption: string;
-    onClick: (rowData: any) => Promise<void>;
+    onClick: (rowData: Row<T>) => Promise<void>;
     icon?: ButtonIcon;
     disabled?: boolean;
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.100+ebfaae1",
+  "version": "0.1.3-unstable.102+c69e63d",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -28,7 +28,7 @@
     "access": "public"
   },
   "dependencies": {
-    "@sphereon/ui-components.core": "0.1.3-unstable.100+ebfaae1",
+    "@sphereon/ui-components.core": "0.1.3-unstable.102+c69e63d",
     "@tanstack/react-table": "^8.9.3",
     "react-loader-spinner": "^5.4.5",
     "react-toastify": "^9.1.3",
@@ -42,5 +42,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "ebfaae17db7a979b5235dcc65b7dbfc8fb90b436"
+  "gitHead": "c69e63d160b0a84bd636c89ad421b1f33c99c334"
 }