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

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: "20", height: "21", viewBox: "0 0 20 21", fill: color, xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M17.3126 4.36542V18.0301C17.3126 19.6588 15.975 21 14.3509 21H4.70454C3.07718 21 1.73962 19.6588 1.73962 18.0301V4.36542H0.685498C-0.228499 4.36542 -0.228499 2.97308 0.685498 2.97308H6.09623V1.63823C6.09623 0.766423 6.77775 0 7.66627 0H11.3891C12.2745 0 12.9592 0.769617 12.9592 1.63823V2.97308H18.3667C19.2807 2.97308 19.2807 4.36542 18.3667 4.36542H17.3126ZM7.48474 2.97308H11.5675V1.63823C11.5675 1.53604 11.507 1.39234 11.3891 1.39234H7.66627C7.54525 1.39234 7.48474 1.53604 7.48474 1.63823V2.97308ZM12.5515 15.7181C12.5515 16.6314 11.163 16.6314 11.163 15.7181V8.13686C11.163 7.22354 12.5515 7.22354 12.5515 8.13686V15.7181ZM7.8892 15.7181C7.8892 16.6314 6.50068 16.6314 6.50068 15.7181V8.13686C6.50068 7.22354 7.8892 7.22035 7.8892 8.13686V15.7181ZM15.9241 4.36542C11.6598 4.36542 7.39557 4.36542 3.13132 4.36542V18.0301C3.13132 18.8987 3.83513 19.6077 4.70454 19.6077H14.3509C15.2171 19.6077 15.9241 18.8987 15.9241 18.0301V4.36542Z", 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 = 20, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "20", height: "20", viewBox: "0 0 32 32", fill: color, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "8", cy: "16", r: "2", fill: color }), _jsx("circle", { cx: "16", cy: "16", r: "2", fill: color }), _jsx("circle", { cx: "24", cy: "16", r: "2", fill: color })] }) }));
+};
+export default MeatBallsIcon;

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,14 @@
+import { FC } from 'react';
+import { GeneralButton } from '../../../types';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+import { Row } from '@tanstack/react-table';
+export type Props = {
+    icon: ButtonIcon;
+    buttons: Array<GeneralButton>;
+    opts?: DropDownListOpts;
+};
+export type DropDownListOpts = {
+    rowData?: Row<any>;
+};
+declare const DropDownList: FC<Props>;
+export default DropDownList;

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

@@ -0,0 +1,33 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { SSIDropDownListContainerStyled as Container, DropDownContainerStyled as DropDownContainer, DropDownListButtonStyled as ListButton, } from '../../../styles/components';
+import DropDownListItem from '../DropDownListItem';
+import { SSIIconButton } from '../../../index';
+const DropDownList = (props) => {
+    const { icon, buttons, opts } = props;
+    const [showActionsMenu, setShowActionsMenu] = useState(false);
+    const dropdownRef = useRef(null);
+    const onMore = (event) => {
+        setShowActionsMenu(!showActionsMenu);
+        event.stopPropagation();
+    };
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setShowActionsMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [showActionsMenu]);
+    const getItems = () => {
+        return buttons.map((item, index) => {
+            const showBorder = buttons.length > 1 && index !== buttons.length - 1;
+            return (_jsx(DropDownListItem, { showBorder: showBorder, label: item.caption, onClick: item.onClick, icon: item.icon, fontColor: item.fontColor, opts: opts }, index));
+        });
+    };
+    return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(SSIIconButton, { icon: icon, color: 'black', onClick: onMore }) }), showActionsMenu && _jsx(DropDownContainer, { children: getItems() })] }));
+};
+export default DropDownList;

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

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

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

@@ -0,0 +1,22 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { DropDownListItemContainerStyled as Container, DropDownListItemIconContainerStyled as IconContainer, DropDownListItemCaptionContainerStyled as ListItemCaption, } from '../../../styles/components';
+import DeleteIcon from '../../assets/icons/DeleteIcon';
+import { ButtonIcon, fontColors } from '@sphereon/ui-components.core';
+const DropDownListItem = (props) => {
+    const { disabled, label, icon, showBorder = false, fontColor = fontColors.dark, borderColor = fontColors.dark, opts, onClick } = props;
+    const getIcon = (icon) => {
+        switch (icon) {
+            case ButtonIcon.DELETE:
+                return _jsx(DeleteIcon, { color: fontColors.dark });
+            default:
+                return _jsx("div", {});
+        }
+    };
+    const onContainerClick = (event) => {
+        if (onClick) {
+            onClick(opts);
+        }
+    };
+    return (_jsxs(Container, { onClick: onContainerClick, style: { ...(showBorder && { borderBottomWidth: 2, borderBottomColor: borderColor }) }, children: [_jsx(ListItemCaption, { children: label }), 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') })] })), 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

@@ -7,8 +7,7 @@ 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';
+import { CredentialMiniCardView, DropDownList, SSIStatusLabel } from '../../../index';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -18,7 +17,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 +32,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(DropDownList, { icon: actionGroup.icon ?? ButtonIcon.MEATBALLS, buttons: actionGroup.actions, opts: { 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 +74,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/{SSIDropDownList → DropDownList}/index.d.ts

@@ -1,2 +1,4 @@
 export declare const SSIDropDownListContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSIDropDownListSelectedValueStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropDownListButtonStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const DropDownContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/styles/components/components/{SSIDropDownList → DropDownList}/index.js

@@ -2,7 +2,10 @@ import styled from 'styled-components';
 import { SSIFlexDirectionRowViewStyled } from '../../containers';
 import { SSITextH3Styled } from '../../../fonts';
 import { gradient100TextCss } from '../../../css';
+import { backgroundColors } from '@sphereon/ui-components.core';
 export const SSIDropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  position: relative;
+  display: inline-block;
   text-align: left;
   align-items: center;
   gap: 2px;
@@ -10,3 +13,15 @@ export const SSIDropDownListContainerStyled = styled(SSIFlexDirectionRowViewStyl
 export const SSIDropDownListSelectedValueStyled = styled(SSITextH3Styled) `
   ${gradient100TextCss}
 `;
+export const DropDownListButtonStyled = styled.div `
+  display: inline-block !important;
+`;
+export const DropDownContainerStyled = styled.div `
+  position: absolute;
+  top: 100%;
+  left: 0;
+  width: 250px;
+  background-color: ${backgroundColors.primaryLight};
+  border-radius: 8px;
+  z-index: 1000;
+`;

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,22 @@
+import styled from 'styled-components';
+import { SSIFlexDirectionRowViewStyled } from '../../containers';
+import { SSITextH2Styled } from '../../../fonts';
+import { backgroundColors, fontColors } from '@sphereon/ui-components.core';
+export const DropDownListItemContainerStyled = styled(SSIFlexDirectionRowViewStyled) `
+  flex-direction: row;
+  align-items: center;
+  background-color: ${backgroundColors.primaryLight};
+  padding: 10px 16px;
+`;
+export const DropDownListItemCaptionContainerStyled = styled(SSITextH2Styled) `
+  flex: 1;
+  margin-right: 8px;
+  color: ${fontColors.dark};
+`;
+export const DropDownListItemIconContainerStyled = styled.div `
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 4px;
+  margin-right: 12px;
+`;

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,11 +1,12 @@
-export * from './RowActionMenuButton';
+export * from './buttons';
+export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 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,11 +1,12 @@
-export * from './RowActionMenuButton';
+export * from './buttons';
+export * from './DropDownListItem';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 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> = {
-    caption: string;
-    actions: ActionButton<T>[];
+export type TableColumnActionGroup = {
+    label?: string;
+    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.106+c72e879",
   "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.106+c72e879",
     "@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": "c72e8791c86a4b27e790d6d005fd5d120c9607cd"
 }

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/buttons/RowActionMenuButton/index.d.ts

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

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

@@ -1,34 +0,0 @@
-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 = (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: 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()] }));
-};
-export default RowActionMenuButton;

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;

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

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

@@ -1,29 +0,0 @@
-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;
-  background: #fbfbfb;
-  border-radius: 0px 0px 6px 6px;
-`;