@sphereon/ui-components.ssi-react 0.1.3-unstable.103 → 0.1.3-unstable.104

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

@@ -1,6 +1,7 @@
 import { CSSProperties, FC } from 'react';
 type Props = {
-    size?: number;
+    width?: number;
+    height?: number;
     color?: string;
     style?: CSSProperties;
 };

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

@@ -1,7 +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" }) }) }));
+    const { width = 19, height = 21, color = fontColors.light, style = {} } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "19", height: "21", viewBox: "0 0 19 21", 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: color }) }) }));
 };
 export default DeleteIcon;

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

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

package/dist/components/assets/icons/MeatBallsIcon/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 MeatBallsIcon = (props) => {
+    const { width = 20, height = 4, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "20", height: "4", viewBox: "0 0 20 4", fill: color, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "13", cy: "21.5", r: "2", fill: color }), _jsx("circle", { cx: "21", cy: "21.5", r: "2", fill: color }), _jsx("circle", { cx: "29", cy: "21.5", r: "2", fill: color })] }) }));
+};
+export default MeatBallsIcon;

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

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

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

@@ -1,34 +1,32 @@
 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 }) => {
+import { SSIIconButton, DropDownList } from '../../../index';
+import { RowActionMenuButtonContainerStyled as ButtonContainer } from '../../../styles';
+const RowActionMenuButton = (props) => {
+    const { actions, icon = ButtonIcon.MEATBALLS, color, style = {} } = props;
     const [isDropdownVisible, setIsDropdownVisible] = useState(false);
     const dropdownRef = useRef(null);
     useEffect(() => {
-        const handleClickOutside = (event) => {
+        const onClickOutside = (event) => {
             if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
                 setIsDropdownVisible(false);
             }
         };
-        document.addEventListener('mousedown', handleClickOutside);
+        document.addEventListener('mousedown', onClickOutside);
         return () => {
-            document.removeEventListener('mousedown', handleClickOutside);
+            document.removeEventListener('mousedown', onClickOutside);
         };
     }, [dropdownRef]);
     const toggleDropdown = (event) => {
         event?.stopPropagation();
         setIsDropdownVisible(!isDropdownVisible);
     };
-    const handleActionClick = (action, rowData) => async (event) => {
+    const onActionClick = (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: 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()] }));
+    return (_jsxs(ButtonContainer, { style: { ...style }, children: [_jsx(SSIIconButton, { icon: icon, color: color, onClick: toggleDropdown }), _jsx(DropDownList, { buttons: actions })] }));
 };
 export default RowActionMenuButton;

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

@@ -4,7 +4,7 @@ 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 MeatBallsIcon from '../../assets/icons/MeatBallsIcon';
 import DeleteIcon from '../../assets/icons/DeleteIcon';
 const SSIIconButton = (props) => {
     const { icon, onClick, disabled = false, color = fontColors.dark } = props;
@@ -16,8 +16,8 @@ const getIcon = (icon, color) => {
             return _jsx(SSIAddIcon, { color: color });
         case ButtonIcon.ARROW_DOWN:
             return _jsx(SSIArrowDownIcon, { color: color });
-        case ButtonIcon.BITTERBALLEN:
-            return _jsx(BitterballenIcon, { color: color });
+        case ButtonIcon.MEATBALLS:
+            return _jsx(MeatBallsIcon, { color: color });
         case ButtonIcon.DELETE:
             return _jsx(DeleteIcon, { color: color });
         case ButtonIcon.FILTER:

package/dist/components/lists/DropDownList/index.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { GeneralButton } from '../../../types';
+export type Props = {
+    buttons: Array<GeneralButton>;
+};
+declare const DropDownList: FC<Props>;
+export default DropDownList;

package/dist/components/lists/DropDownList/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { SSIDropDownListContainerStyled as Container } from '../../../styles/components';
+import DropDownListItem from '../DropDownListItem';
+const DropDownList = (props) => {
+    const getItems = () => {
+        const { buttons } = props;
+        return buttons.map((item, index) => {
+            const showBorder = buttons.length > 1 && index !== buttons.length - 1;
+            return (_jsx(DropDownListItem, { showBorder: showBorder, caption: item.caption, onClick: item.onClick, icon: item.icon, fontColor: item.fontColor }, index));
+        });
+    };
+    return _jsx(Container, { children: getItems() });
+};
+export default DropDownList;

package/dist/components/lists/DropDownListItem/index.d.ts

@@ -0,0 +1,12 @@
+import { FC } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
+    caption: string;
+    onClick: (args?: any) => Promise<void>;
+    disabled?: boolean;
+    icon?: ButtonIcon;
+    showBorder?: boolean;
+    fontColor?: string;
+};
+declare const DropDownListItem: FC<Props>;
+export default DropDownListItem;

package/dist/components/lists/DropDownListItem/index.js

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ButtonFlexRowStyled as Button, DropDownListItemContainerStyled as Container, DropDownListItemIconContainerStyled as IconContainer, DropDownListItemCaptionContainerStyled as ListItemCaption, } from '../../../styles/components';
+import DeleteIcon from '../../assets/icons/DeleteIcon';
+import { borderColors, ButtonIcon, fontColors, OpacityStyleEnum } from '@sphereon/ui-components.core';
+const DropDownListItem = (props) => {
+    const { disabled, caption, icon, showBorder = false, fontColor = fontColors.dark } = props;
+    const onClick = async () => {
+        await props.onClick();
+    };
+    const getIcon = (icon) => {
+        const { fontColor = fontColors.dark } = props;
+        switch (icon) {
+            case ButtonIcon.DELETE:
+                return _jsx(DeleteIcon, { color: fontColor });
+            default:
+                return _jsx("div", {});
+        }
+    };
+    return (_jsx(Button, { onClick: onClick, disabled: disabled, style: {
+            ...(disabled && { opacity: OpacityStyleEnum.DISABLED }),
+        }, children: _jsxs(Container, { style: { ...(showBorder && { borderBottomWidth: 2, borderBottomColor: borderColors.light }) }, children: [_jsx(ListItemCaption, { style: { color: fontColor }, children: caption }), icon && _jsx(IconContainer, { children: getIcon(icon) })] }) }));
+};
+export default DropDownListItem;

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

@@ -1,11 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, Localization } from '@sphereon/ui-components.core';
 import SSIIconButton from '../../../buttons/SSIIconButton';
-import SSIDropDownList from '../../../lists/SSIDropDownList';
 import SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
-import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, SSITableViewHeaderShowOptionContainerStyled as ShowOptionContainer, } from '../../../../styles';
+import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, } from '../../../../styles';
 const SSITableViewHeader = (props) => {
     const { enableFiltering = false, enableMostRecent = false, actions = [] } = props;
-    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), enableMostRecent && (_jsx(ShowOptionContainer, { children: _jsx(SSIDropDownList, { label: Localization.translate('action_show_caption'), initialValue: 'Most recent' }) })), actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) }) }));
+    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), "//todo: revisit this part when we have the most recent functionality", actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) }) }));
 };
 export default SSITableViewHeader;

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

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

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

@@ -1,7 +1,7 @@
 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 { ButtonIcon, Localization } from '@sphereon/ui-components.core';
+import { Localization } from '@sphereon/ui-components.core';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
 import SSIHoverText from '../../fields/SSIHoverText';
@@ -18,7 +18,7 @@ function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     }, [ref, indeterminate]);
     return _jsx("input", { type: "checkbox", ref: ref, className: className + ' cursor-pointer', ...rest });
 }
-const getCellFormatting = (type, value, opts) => {
+const getCellFormatting = (type, value, row, opts) => {
     switch (type) {
         case TableCellType.TEXT:
             const { truncationLength, enableHover = false } = opts ?? {};
@@ -33,18 +33,25 @@ const getCellFormatting = (type, value, opts) => {
         case TableCellType.CREDENTIAL_CARD: {
             return _jsx(CredentialMiniCardView, { ...value });
         }
+        case TableCellType.ACTION_GROUP: {
+            const { actionGroup } = opts ?? {};
+            if (actionGroup) {
+                return _jsx(RowActionMenuButton, { icon: actionGroup.icon, actions: actionGroup.actions, rowData: row });
+            }
+            return _jsx("div", {});
+        }
         default:
             return _jsx("div", {});
     }
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], actionGroup, onRowClick, } = props;
+    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, } = props;
     const [rowSelection, setRowSelection] = React.useState({});
     const columnHelper = createColumnHelper();
     let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
         id: header.accessor,
         header: header.label,
-        cell: (info) => getCellFormatting(header.type, info.getValue(), header.opts),
+        cell: (info) => getCellFormatting(header.type, info.getValue(), info.row, header.opts),
         minSize: header.opts?.columnMinWidth,
         maxSize: header.opts?.columnMaxWidth,
         size: header.opts?.columnWidth,
@@ -68,16 +75,6 @@ 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/index.d.ts

@@ -13,7 +13,7 @@ import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import SSIIconButton from './components/buttons/SSIIconButton';
 import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
-import SSIDropDownList from './components/lists/SSIDropDownList';
+import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
@@ -29,4 +29,4 @@ import { Row } from '@tanstack/react-table';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
-export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, Row, };
+export { SSICredentialCardView, CredentialMiniCardView, CredentialMiniCardViewProps, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, Row, };

package/dist/index.js

@@ -12,7 +12,7 @@ import SSIArrowDownIcon from './components/assets/icons/SSIArrowDownIcon';
 import SSITypeLabel from './components/labels/SSITypeLabel';
 import SSIIconButton from './components/buttons/SSIIconButton';
 import SSIPrimaryButton from './components/buttons/SSIPrimaryButton';
-import SSIDropDownList from './components/lists/SSIDropDownList';
+import DropDownList from './components/lists/DropDownList';
 import SSITableView from './components/views/SSITableView';
 import SSITableViewHeader from './components/views/SSITableView/SSITableViewHeader';
 import SSITabView from './components/views/SSITabView';
@@ -27,4 +27,4 @@ import StepMarker from './components/assets/markers/StepMarker';
 export * from './styles/fonts';
 export * from './types';
 export * from './helpers';
-export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, SSIDropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, };
+export { SSICredentialCardView, CredentialMiniCardView, SSIStatusLabel, SSICheckmarkBadge, SSIExclamationMarkBadge, SSIPlaceholderLogo, SSILogo, SSIAddIcon, SSIFilterIcon, SSIArrowDownIcon, SSITypeLabel, SSIIconButton, SSIPrimaryButton, SSISecondaryButton, DropDownList, SSITableView, SSITableViewHeader, SSITabView, SSITabViewHeader, SSIProfileIcon, SSIToastContainer, SSICheckbox, SSIActivityIndicator, SSIHoverText, StepMarker, ProgressStepIndicator, };

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

@@ -0,0 +1,3 @@
+export declare const DropDownListItemContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropDownListItemCaptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropDownListItemIconContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -0,0 +1,17 @@
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import styled from 'styled-components';
+import { backgroundColors } from '@sphereon/ui-components.core';
+import { SSITextH2Styled } from '../../../fonts';
+export const DropDownListItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  flex: 1;
+  background-color: ${backgroundColors.primaryLight};
+`;
+export const DropDownListItemCaptionContainerStyled = styled(SSITextH2Styled) `
+  margin: 13px 0 11px 16px;
+`;
+export const DropDownListItemIconContainerStyled = styled.div `
+  width: 42px;
+  margin: 4px 6px 2px auto;
+  align-items: center;
+  justify-content: center;
+`;

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

@@ -0,0 +1 @@
+export declare const ButtonFlexRowStyled: import("styled-components").StyledComponent<"button", any, {}, never>;

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

@@ -0,0 +1,4 @@
+import styled from 'styled-components';
+export const ButtonFlexRowStyled = styled('button') `
+  flex-direction: row;
+`;

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

@@ -1,3 +1,5 @@
+export * from './buttons';
+export * from './DropDownListItem';
 export * from './RowActionMenuButton';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
@@ -5,7 +7,7 @@ export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
 export * from './SSISecondaryButton';
 export * from './SSIIconButton';
-export * from './SSIDropDownList';
+export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
 export * from './SSITableView';

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

@@ -1,3 +1,5 @@
+export * from './buttons';
+export * from './DropDownListItem';
 export * from './RowActionMenuButton';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
@@ -5,7 +7,7 @@ export * from './SSIStatusLabel';
 export * from './SSIPrimaryButton';
 export * from './SSISecondaryButton';
 export * from './SSIIconButton';
-export * from './SSIDropDownList';
+export * from './DropDownList';
 export * from './SSITypeLabel';
 export * from './SSITableViewHeader';
 export * from './SSITableView';

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

@@ -1,7 +1,10 @@
 import { ButtonIcon } from '@sphereon/ui-components.core';
+import { TableColumnActionButton } from '../table';
 export type Button = {
     caption: string;
     onClick: () => Promise<void>;
     icon?: ButtonIcon;
+    fontColor?: string;
     disabled?: boolean;
 };
+export type GeneralButton = Button | TableColumnActionButton;

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

@@ -4,7 +4,8 @@ export declare enum TableCellType {
     TEXT = "text",
     LABEL = "label",
     STATUS = "status",
-    CREDENTIAL_CARD = "credentialCard"
+    CREDENTIAL_CARD = "credentialCard",
+    ACTION_GROUP = "actionGroup"
 }
 export type ColumnHeader<T> = {
     accessor: AccessorFn<T> | DeepKeys<T>;
@@ -18,14 +19,17 @@ export type TableCellOptions = {
     columnMinWidth?: number;
     columnMaxWidth?: number;
     columnWidth?: number;
+    actionGroup?: TableColumnActionGroup;
 };
-export type ActionGroup<T> = {
+export type TableColumnActionGroup = {
     caption: string;
-    actions: ActionButton<T>[];
+    icon?: ButtonIcon;
+    actions: Array<TableColumnActionButton>;
 };
-export type ActionButton<T> = {
+export type TableColumnActionButton = {
     caption: string;
-    onClick: (rowData: Row<T>) => Promise<void>;
+    onClick: (rowData: Row<any>) => Promise<void>;
     icon?: ButtonIcon;
+    fontColor?: string;
     disabled?: boolean;
 };

package/dist/types/table/index.js

@@ -4,4 +4,5 @@ export var TableCellType;
     TableCellType["LABEL"] = "label";
     TableCellType["STATUS"] = "status";
     TableCellType["CREDENTIAL_CARD"] = "credentialCard";
+    TableCellType["ACTION_GROUP"] = "actionGroup";
 })(TableCellType || (TableCellType = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-unstable.103+b911546",
+  "version": "0.1.3-unstable.104+2de960b",
   "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.103+b911546",
+    "@sphereon/ui-components.core": "0.1.3-unstable.104+2de960b",
     "@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": "b911546860dd4fee85478893d41458267dc08c71"
+  "gitHead": "2de960bdb8327783e162afeaed458e49ac76290e"
 }

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

@@ -1,8 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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/lists/SSIDropDownList/index.d.ts

@@ -1,7 +0,0 @@
-import { FC } from 'react';
-type Props = {
-    initialValue: string;
-    label?: string;
-};
-declare const SSIDropDownList: FC<Props>;
-export default SSIDropDownList;

package/dist/components/lists/SSIDropDownList/index.js

@@ -1,11 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import React from 'react';
-import { ButtonIcon } from '@sphereon/ui-components.core';
-import SSIIconButton from '../../buttons/SSIIconButton';
-import { SSIDropDownListContainerStyled as Container, SSITextH3Styled as LabelCaption, SSIDropDownListSelectedValueStyled as SelectedValue, } from '../../../styles';
-const SSIDropDownList = (props) => {
-    const { initialValue, label } = props;
-    const [value, setValue] = React.useState(initialValue);
-    return (_jsxs(Container, { children: [label && _jsx(LabelCaption, { children: label }), _jsx(SelectedValue, { children: value }), _jsx(SSIIconButton, { icon: ButtonIcon.ARROW_DOWN, onClick: async () => console.log('drop down clicked') })] }));
-};
-export default SSIDropDownList;