@sphereon/ui-components.ssi-react 0.1.3-unstable.96 → 0.1.3-unstable.98

package/dist/components/assets/icons/BitterballenIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    size?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const BitterballenIcon: FC<Props>;
+export default BitterballenIcon;

package/dist/components/assets/icons/BitterballenIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const BitterballenIcon = (props) => {
+    const { size = 42, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1, display: 'flex' }, children: _jsxs("svg", { width: "42", height: "43", viewBox: "0 0 42 43", fill: color, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "13", cy: "21.5", r: "2", fill: "#303030" }), _jsx("circle", { cx: "21", cy: "21.5", r: "2", fill: "#303030" }), _jsx("circle", { cx: "29", cy: "21.5", r: "2", fill: "#303030" })] }) }));
+};
+export default BitterballenIcon;

package/dist/components/assets/icons/DeleteIcon/index.d.ts

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+type Props = {
+    size?: number;
+    color?: string;
+    style?: CSSProperties;
+};
+declare const DeleteIcon: FC<Props>;
+export default DeleteIcon;

package/dist/components/assets/icons/DeleteIcon/index.js

@@ -0,0 +1,7 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { fontColors } from '@sphereon/ui-components.core';
+const DeleteIcon = (props) => {
+    const { size = 21, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width: size, aspectRatio: 1, display: 'flex' }, children: _jsx("svg", { width: "32", height: "32", viewBox: "0 0 32 32", fill: color, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M24.8277 8.98905V24.6058C24.8277 26.4672 23.3113 28 21.4699 28H10.5336C8.68863 28 7.1722 26.4672 7.1722 24.6058V8.98905H5.97712C4.9409 8.98905 4.9409 7.39781 5.97712 7.39781H12.1114V5.87226C12.1114 4.87591 12.8841 4 13.8914 4H18.1121C19.1158 4 19.8921 4.87956 19.8921 5.87226V7.39781H26.0228C27.059 7.39781 27.059 8.98905 26.0228 8.98905H24.8277ZM13.6856 7.39781H18.3143V5.87226C18.3143 5.75547 18.2457 5.59124 18.1121 5.59124H13.8914C13.7542 5.59124 13.6856 5.75547 13.6856 5.87226V7.39781ZM19.43 21.9635C19.43 23.0073 17.8558 23.0073 17.8558 21.9635V13.2993C17.8558 12.2555 19.43 12.2555 19.43 13.2993V21.9635ZM14.1441 21.9635C14.1441 23.0073 12.5699 23.0073 12.5699 21.9635V13.2993C12.5699 12.2555 14.1441 12.2518 14.1441 13.2993V21.9635ZM23.2535 8.98905C18.419 8.98905 13.5845 8.98905 8.75001 8.98905V24.6058C8.75001 25.5985 9.54793 26.4088 10.5336 26.4088H21.4699C22.452 26.4088 23.2535 25.5985 23.2535 24.6058V8.98905Z", fill: "#D74500" }) }) }));
+};
+export default DeleteIcon;

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

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

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

@@ -0,0 +1,28 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useEffect, useRef } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+import { SSIIconButton } from '../../../index';
+import { RowActionMenuButtonContainerStyled as ButtonContainer, RowActionDropdownContainerStyled as DropdownContainer, ActionItemContainerStyled as ActionItemContainer, ActionItemCaptionStyled as ItemCaption, } from '../../../styles';
+const RowActionMenuButton = ({ actions, icon, color, style = {}, rowData }) => {
+    const [isDropdownVisible, setIsDropdownVisible] = useState(false);
+    const dropdownRef = useRef(null);
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setIsDropdownVisible(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [dropdownRef]);
+    const toggleDropdown = async () => {
+        setIsDropdownVisible(!isDropdownVisible);
+    };
+    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, { style: { marginLeft: '10px' }, children: action.caption }), action.icon && _jsx(SSIIconButton, { onClick: () => action.onClick(rowData), icon: action.icon })] }, index))) }));
+    };
+    return (_jsxs(ButtonContainer, { style: { ...style }, children: [_jsx(SSIIconButton, { icon: icon || ButtonIcon.BITTERBALLEN, color: color, onClick: toggleDropdown }), renderDropdown()] }));
+};
+export default RowActionMenuButton;

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

@@ -4,6 +4,8 @@ import SSIAddIcon from '../../assets/icons/SSIAddIcon';
 import SSIFilterIcon from '../../assets/icons/SSIFilterIcon';
 import SSIArrowDownIcon from '../../assets/icons/SSIArrowDownIcon';
 import { SSIIconButtonContainerStyled as Container } from '../../../styles';
+import BitterballenIcon from '../../assets/icons/BitterballenIcon';
+import DeleteIcon from '../../assets/icons/DeleteIcon';
 const SSIIconButton = (props) => {
     const { icon, onClick, disabled = false, color = fontColors.dark } = props;
     return _jsx(Container, { onClick: onClick, children: getIcon(icon, color) });
@@ -12,10 +14,14 @@ const getIcon = (icon, color) => {
     switch (icon) {
         case ButtonIcon.ADD:
             return _jsx(SSIAddIcon, { color: color });
-        case ButtonIcon.FILTER:
-            return _jsx(SSIFilterIcon, { color: color });
         case ButtonIcon.ARROW_DOWN:
             return _jsx(SSIArrowDownIcon, { color: color });
+        case ButtonIcon.BITTERBALLEN:
+            return _jsx(BitterballenIcon, { color: color });
+        case ButtonIcon.DELETE:
+            return _jsx(DeleteIcon, { color: color });
+        case ButtonIcon.FILTER:
+            return _jsx(SSIFilterIcon, { color: color });
         default:
             return _jsx("div", {});
     }

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

@@ -1,6 +1,6 @@
 import { ReactElement } from 'react';
 import { ColumnResizeMode, Row } from '@tanstack/react-table';
-import { Button, ColumnHeader } from '../../../types';
+import { ActionGroup, Button, ColumnHeader } from '../../../types';
 type Props<T> = {
     data: Array<T>;
     columns: Array<ColumnHeader<T>>;
@@ -11,6 +11,7 @@ type Props<T> = {
     enableResultCount?: boolean;
     columnResizeMode?: ColumnResizeMode;
     actions?: Array<Button>;
+    actionGroup?: ActionGroup;
 };
 declare const SSITableView: <T extends {}>(props: Props<T>) => ReactElement;
 export default SSITableView;

package/dist/components/views/SSITableView/index.js

@@ -1,13 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
-import { Localization } from '@sphereon/ui-components.core';
+import { ButtonIcon, Localization } from '@sphereon/ui-components.core';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
 import SSIHoverText from '../../fields/SSIHoverText';
 import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles';
 import { TableCellType } from '../../../types';
 import { CredentialMiniCardView, SSIStatusLabel } from '../../../index';
+import RowActionMenuButton from '../../buttons/RowActionMenuButton';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -37,7 +38,7 @@ const getCellFormatting = (type, value, opts) => {
     }
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, } = props;
+    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], actionGroup, onRowClick, } = props;
     const [rowSelection, setRowSelection] = React.useState({});
     const columnHelper = createColumnHelper();
     let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
@@ -67,6 +68,16 @@ const SSITableView = (props) => {
             ...availableColumns,
         ];
     }
+    if (actionGroup) {
+        availableColumns = [
+            ...availableColumns,
+            {
+                id: 'actions',
+                header: actionGroup.caption,
+                cell: ({ row }) => (_jsx("div", { className: "px-1", children: _jsx(RowActionMenuButton, { actions: actionGroup.actions, icon: ButtonIcon.BITTERBALLEN, rowData: row }) })),
+            },
+        ];
+    }
     const table = useReactTable({
         defaultColumn: {
             size: 0,

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

@@ -0,0 +1,4 @@
+export declare const RowActionMenuButtonContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionItemContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const ActionItemCaptionStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const RowActionDropdownContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,27 @@
+import styled from 'styled-components';
+export const RowActionMenuButtonContainerStyled = styled.div `
+  position: relative;
+`;
+export const ActionItemContainerStyled = styled.div `
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 5px;
+  cursor: pointer;
+  max-width: 250px;
+`;
+export const ActionItemCaptionStyled = styled.span `
+  font-family: Poppins;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  letter-spacing: 0em;
+  text-align: left;
+`;
+export const RowActionDropdownContainerStyled = styled.div `
+  position: absolute;
+  z-index: 1000;
+  background-color: #fff;
+  width: auto;
+  padding: 10px;
+`;

package/dist/styles/components/components/index.d.ts

@@ -1,3 +1,4 @@
+export * from './RowActionMenuButton';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';

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

@@ -1,3 +1,4 @@
+export * from './RowActionMenuButton';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';

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

@@ -1,4 +1,5 @@
 import { AccessorFn, DeepKeys } from '@tanstack/react-table';
+import { ButtonIcon } from '@sphereon/ui-components.core';
 export declare enum TableCellType {
     TEXT = "text",
     LABEL = "label",
@@ -18,3 +19,13 @@ export type TableCellOptions = {
     columnMaxWidth?: number;
     columnWidth?: number;
 };
+export type ActionGroup = {
+    caption: string;
+    actions: ActionButton[];
+};
+export type ActionButton = {
+    caption: string;
+    onClick: (rowData: any) => 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.96+91c4f85",
+  "version": "0.1.3-unstable.98+04b3a9f",
   "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.96+91c4f85",
+    "@sphereon/ui-components.core": "0.1.3-unstable.98+04b3a9f",
     "@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": "91c4f8599fa96bf99497141e34e3129f83c2b0e3"
+  "gitHead": "04b3a9f8779dc02b73dd05d9e2a81b5131822ba5"
 }