@sphereon/ui-components.ssi-react 0.1.3-unstable.99 → 0.2.1-unstable.2

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

@@ -0,0 +1,34 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect } from 'react';
+import { borderColors } from '@sphereon/ui-components.core';
+import DropDownListItem from '../DropDownListItem';
+import SSIIconButton from '../../buttons/SSIIconButton';
+import { DropDownListContainerStyled as Container, DropDownContainerStyled as DropDownContainer, DropDownListButtonStyled as ListButton, } from '../../../styles/components';
+const DropDownList = (props) => {
+    const { icon, buttons, showBorder = false } = props;
+    const [showActionsMenu, setShowActionsMenu] = useState(false);
+    const dropdownRef = useRef(null);
+    const onMore = (event) => {
+        setShowActionsMenu(!showActionsMenu);
+        event.stopPropagation();
+    };
+    useEffect(() => {
+        const onClickOutside = (event) => {
+            if (dropdownRef.current && !dropdownRef.current.contains(event.target)) {
+                setShowActionsMenu(false);
+            }
+        };
+        document.addEventListener('mousedown', onClickOutside);
+        return () => {
+            document.removeEventListener('mousedown', onClickOutside);
+        };
+    }, [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 }, index));
+        });
+    };
+    return (_jsxs(Container, { ref: dropdownRef, children: [_jsx(ListButton, { children: _jsx(SSIIconButton, { icon: icon, onClick: onMore }) }), showActionsMenu && (_jsx(DropDownContainer, { style: { ...(showBorder && { borderWidth: 2, borderColor: borderColors.lightGrey, borderStyle: 'solid' }) }, children: getItems() }))] }));
+};
+export default DropDownList;

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

@@ -0,0 +1,13 @@
+import { FC } from 'react';
+import { ButtonIcon } from '@sphereon/ui-components.core';
+type Props = {
+    label: string;
+    onClick: (args?: any) => Promise<void>;
+    disabled?: boolean;
+    icon?: ButtonIcon;
+    fontColor?: string;
+    showBorder?: boolean;
+    borderColor?: 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 { DropDownListItemContainerStyled as Container, DropDownListItemIconContainerStyled as IconContainer, DropDownListItemCaptionContainerStyled as ListItemCaption, } from '../../../styles/components';
+import DeleteIcon from '../../assets/icons/DeleteIcon';
+import { borderColors, ButtonIcon, fontColors } from '@sphereon/ui-components.core';
+const DropDownListItem = (props) => {
+    const { disabled, label, icon, showBorder = false, fontColor = fontColors.dark, borderColor = borderColors.light, onClick } = props;
+    const getIcon = (icon) => {
+        switch (icon) {
+            case ButtonIcon.DELETE:
+                return _jsx(DeleteIcon, { color: fontColors.dark });
+            default:
+                return _jsx("div", {});
+        }
+    };
+    const onContainerClick = async (event) => {
+        event.stopPropagation();
+        if (onClick) {
+            await onClick();
+        }
+    };
+    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/CredentialIssuanceWizardView/index.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { CredentialFormData, CredentialFormSelectionType } from '../../../types';
+type Props = {
+    credentialTypes: Array<CredentialFormSelectionType>;
+    onSelectCredentialTypeChange?: (credentialType: CredentialFormSelectionType) => Promise<void>;
+    onCredentialFormDataChange?: (credentialFormData: CredentialFormData) => Promise<void>;
+    credentialData?: Record<any, any>;
+};
+declare const CredentialIssuanceWizardView: FC<Props>;
+export default CredentialIssuanceWizardView;

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

@@ -0,0 +1,43 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useState } from 'react';
+import { Autocomplete, TextField } from '@mui/material';
+import { materialCells } from '@jsonforms/material-renderers';
+import { JsonForms } from '@jsonforms/react';
+import { Localization } from '@sphereon/ui-components.core';
+import FileSelection from '../../fields/FileSelection';
+import DragAndDropBox from '../../fields/DragAndDropBox';
+import { jsonFormsMaterialRenderers } from '../../../renders/jsonFormsRenders';
+import { CredentialIssuanceWizardViewContainerStyled as Container, CredentialIssuanceWizardViewCredentialTypeContainerStyled as CredentialTypeContainer, CredentialIssuanceWizardViewCredentialTypeTitleStyled as CredentialTypeTitle, CredentialIssuanceWizardViewFormContainerStyled as FormContainer, CredentialIssuanceWizardViewEvidenceContainerStyled as EvidenceContainer, CredentialIssuanceWizardViewEvidenceContentContainerStyled as EvidenceContentContainer, CredentialIssuanceWizardViewEvidenceTitleContainerStyled as EvidenceTitleContainer, SSITextH2SemiBoldStyled as EvidenceTitle, CredentialIssuanceWizardViewEvidenceTitleOptionalStyled as EvidenceTitleOptional, SSITextH2Styled as EvidenceDescription, CredentialIssuanceWizardViewEvidenceFilesContainerStyled as EvidenceFilesContainer } from '../../../styles';
+const CredentialIssuanceWizardView = (props) => {
+    const { credentialData, credentialTypes, onSelectCredentialTypeChange, onCredentialFormDataChange } = props;
+    const [selectedCredentialType, setSelectedCredentialType] = useState(null);
+    const [credentialInput, setCredentialInput] = useState(null);
+    const [evidence, setEvidence] = useState([]);
+    const onCredentialTypeChange = (event, value) => {
+        setCredentialInput(null);
+        setEvidence([]);
+        setSelectedCredentialType(value);
+        onSelectCredentialTypeChange?.(value);
+    };
+    const onCredentialFormInputChange = (state) => {
+        setCredentialInput(state);
+        onCredentialFormDataChange?.({ ...state, evidence });
+    };
+    const onAddEvidence = async (file) => {
+        const evidenceFiles = [...evidence, file];
+        setEvidence(evidenceFiles);
+        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
+    };
+    const onRemoveEvidence = async (index) => {
+        evidence.splice(index, 1);
+        const evidenceFiles = [...evidence];
+        setEvidence(evidenceFiles);
+        onCredentialFormDataChange?.({ ...credentialInput, evidence: evidenceFiles });
+    };
+    const getEvidenceElements = () => {
+        return evidence.map((file, index) => _jsx(FileSelection, { file: file, onRemove: async () => onRemoveEvidence(index) }, index));
+    };
+    return (_jsxs(Container, { children: [_jsxs(CredentialTypeContainer, { children: [_jsx(CredentialTypeTitle, { children: Localization.translate('credential_issuance_wizard_title') }), _jsx(Autocomplete, { options: credentialTypes, sx: { flexGrow: 1 }, renderInput: (params) => _jsx(TextField, { ...params, label: Localization.translate('credential_issuance_wizard_credential_type_label') }), onChange: onCredentialTypeChange })] }), selectedCredentialType &&
+                _jsxs(_Fragment, { children: [_jsx(FormContainer, { children: _jsx(JsonForms, { schema: selectedCredentialType.schema, uischema: selectedCredentialType.uiSchema, data: credentialData, renderers: jsonFormsMaterialRenderers, cells: materialCells, onChange: onCredentialFormInputChange }) }), _jsx(EvidenceContainer, { children: _jsxs(EvidenceContentContainer, { children: [_jsxs("div", { children: [_jsxs(EvidenceTitleContainer, { children: [_jsx(EvidenceTitle, { children: Localization.translate('credential_issuance_wizard_evidence_title') }), _jsx(EvidenceTitleOptional, { children: Localization.translate('credential_issuance_wizard_evidence_optional_title') })] }), _jsx(EvidenceDescription, { children: Localization.translate('credential_issuance_wizard_evidence_description') })] }), _jsxs(EvidenceFilesContainer, { children: [_jsx(DragAndDropBox, { caption: Localization.translate('drag_and_drop_upload_evidence_caption'), description: Localization.translate('credential_attach_evidence_description'), onChangeFile: onAddEvidence }), getEvidenceElements()] })] }) })] })] }));
+};
+export default CredentialIssuanceWizardView;

package/dist/components/views/CredentialIssuanceWizardView/styles.css

@@ -0,0 +1,87 @@
+.MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline {
+    border-color: #7276F7 !important;
+}
+
+.MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline {
+    border-color: #7276F7 !important;
+}
+
+.MuiInputLabel-root.MuiFormLabel-root {
+    color: #303030 !important;
+}
+
+.MuiTypography-h6 {
+    color: #303030 !important;
+    font-size: 16px !important;
+    font-style: normal !important;
+    font-weight: 600 !important;
+}
+
+.MuiGrid-container {
+    padding: 0 !important;
+}
+
+.MuiFormControl-root {
+    padding: 0 !important;
+
+}
+
+.MuiCardContent-root {
+    padding: 0 !important;
+}
+
+.MuiCardHeader-root {
+    padding: 0 !important;
+}
+
+.MuiPaper-root {
+    margin: 0 !important;
+    background-color: #FBFBFB !important;
+    box-shadow: none !important;
+}
+
+.MuiCardHeader-title {
+    font-family: Poppins, serif !important;
+    font-size: 16px !important;
+    font-style: normal !important;
+    font-weight: 400 !important;
+    margin-bottom: 10px !important;
+    color: #303030 !important;
+}
+
+.MuiGrid-root.MuiGrid-container.MuiGrid-direction-xs-column {
+    gap: 24px !important;
+}
+
+.MuiFormLabel-root.MuiInputLabel-root {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiInputBase-root.MuiOutlinedInput-root .MuiInputBase-input {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiInputBase-root.MuiOutlinedInput-root {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiTypography-root {
+    font-family: 'Poppins', sans-serif !important;
+}
+
+.MuiDateCalendar-root {
+    background-color: #ECE6F0 !important;
+    border-radius: 16px !important;
+}
+
+.MuiPaper-root.MuiPaper-elevation.MuiPaper-rounded.MuiPaper-elevation8.MuiPickersPopper-paper {
+    border-radius: 16px !important;
+}
+
+.MuiButtonBase-root.MuiPickersDay-root.Mui-selected.MuiPickersDay-dayWithMargin {
+    background-color: #7276F7 !important;
+}
+
+.MuiButtonBase-root.MuiPickersDay-root.MuiPickersDay-dayWithMargin:hover {
+    background-color: #B7B8D9 !important;
+}

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

@@ -6,6 +6,6 @@ const CredentialMiniCardView = (props) => {
     const { backgroundColor = credentialCardColors.default, backgroundImage, logo, logoColor, style } = props;
     return (_jsx(Container, { style: { ...style, backgroundColor }, children: _jsx(BackgroundImage, { style: {
                 ...(backgroundImage?.uri && { background: `url(${backgroundImage.uri})`, backgroundSize: 'cover' }),
-            }, children: (!backgroundImage || logo) && _jsx(SSILogo, { logo: logo, color: logoColor }) }) }));
+            }, children: (!backgroundImage || logo) && _jsx(SSILogo, { logo: logo, color: logoColor, size: logo?.style?.height }) }) }));
 };
 export default CredentialMiniCardView;

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

@@ -0,0 +1,16 @@
+import { CSSProperties, FC } from 'react';
+import { CredentialStatus } from '@sphereon/ui-components.core';
+import { CredentialMiniCardViewProps } from '../CredentialMiniCardView';
+type Props = {
+    credentialTitle: string;
+    credentialStatus: CredentialStatus;
+    issuerName: string;
+    issueDate: number;
+    expirationDate?: number;
+    showTime?: boolean;
+    showCard?: boolean;
+    credentialBranding?: CredentialMiniCardViewProps;
+    style?: CSSProperties;
+};
+declare const CredentialViewItem: FC<Props>;
+export default CredentialViewItem;

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

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Localization, toLocalDateString, toLocalDateTimeString } from '@sphereon/ui-components.core';
+import SSIStatusLabel from '../../labels/SSIStatusLabel';
+import CredentialMiniCardView from '../CredentialMiniCardView';
+import { CredentialViewItemContainerStyled as Container, CredentialViewItemDetailsContainerStyled as DetailsContainer, SSIFlexDirectionRowViewStyled as ContentRowContainer, CredentialViewItemTitleCaptionStyled as TitleCaption, SSITextH4Styled as IssuerCaption, CredentialViewItemStatusContainerStyled as StatusContainer, SSITextH5Styled as IssueDateCaption, CredentialViewItemExpirationDateCaptionStyled as ExpirationDateCaption, } from '../../../styles';
+const CredentialViewItem = (props) => {
+    const { credentialStatus, credentialTitle, issuerName, showTime = false, showCard = true, credentialBranding, style } = props;
+    const issueDate = showTime ? toLocalDateTimeString(props.issueDate) : toLocalDateString(props.issueDate);
+    const expirationDate = props.expirationDate
+        ? `${Localization.translate('credentials_view_item_expires_on')} ${showTime
+            ? toLocalDateTimeString(props.expirationDate)
+            : toLocalDateString(props.expirationDate)}`
+        : Localization.translate('credential_status_never_expires_date_label');
+    return (_jsxs(Container, { style: { ...style }, children: [showCard &&
+                _jsx(CredentialMiniCardView, { ...credentialBranding }), _jsxs(DetailsContainer, { children: [_jsxs(ContentRowContainer, { children: [_jsxs("div", { children: [_jsx(TitleCaption, { children: credentialTitle }), _jsx(IssuerCaption, { children: issuerName })] }), _jsx(StatusContainer, { children: _jsx(SSIStatusLabel, { status: credentialStatus }) })] }), _jsxs(ContentRowContainer, { children: [_jsx(IssueDateCaption, { children: issueDate }), _jsx(ExpirationDateCaption, { children: expirationDate })] })] })] }));
+};
+export default CredentialViewItem;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+type Props = {
+    data: Record<string, any>;
+    showHeader?: boolean;
+    shouldExpandNodeInitially?: (() => boolean) | boolean;
+};
+declare const JSONDataView: FC<Props>;
+export default JSONDataView;

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

@@ -0,0 +1,85 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React, { useEffect } from 'react';
+import { JSONTree } from 'react-json-tree';
+import { backgroundColors, calculateAspectRatio, fontColors, isBase64ImageUri, isBoolean, Localization, parseToBoolean } from '@sphereon/ui-components.core';
+import SSICheckmarkBadge from '../../assets/badges/SSICheckmarkBadge';
+import SSIExclamationMarkBadge from '../../assets/badges/SSIExclamationMarkBadge';
+import { getImageSize } from '../../../utils';
+import { JSONDataViewContainerStyled as Container, JSONDataViewHeaderContainerStyled as HeaderContainer, JSONDataViewColumnHeaderCaptionStyled as ColumnHeaderCaption, JSONDataViewDataContainerCaptionStyled as ContainerCaption, JSONDataViewDataImageValueStyled as ImageValue, JSONDataViewDataTextValueStyled as TextValue, JSONDataViewDataLabelStyled as Label } from '../../../styles';
+const JSONDataView = (props) => {
+    const { showHeader = true, shouldExpandNodeInitially = () => false } = props;
+    const expandNodeInitially = typeof shouldExpandNodeInitially === 'function' ? shouldExpandNodeInitially : () => shouldExpandNodeInitially;
+    const [focused, setFocused] = React.useState(false);
+    const [data, setData] = React.useState();
+    const preprocessData = async (data) => {
+        if (typeof data !== 'object' || data === null) {
+            return data;
+        }
+        const processedData = {};
+        await Promise.all(Object.entries(data).map(async ([key, value]) => {
+            if (typeof value === 'object' && value !== null) {
+                processedData[key] = await preprocessData(value);
+            }
+            else if (typeof value === 'string' && isBase64ImageUri(value)) {
+                const base64Uri = value;
+                const dimensions = await getImageSize(base64Uri);
+                processedData[key] = {
+                    uri: base64Uri,
+                    dimensions: {
+                        height: dimensions.height,
+                        width: dimensions.width,
+                        aspectRatio: calculateAspectRatio(dimensions.width, dimensions.height)
+                    }
+                };
+            }
+            else {
+                processedData[key] = value;
+            }
+        }));
+        return processedData;
+    };
+    useEffect(() => {
+        preprocessData(props.data).then((data) => setData(data));
+    }, [props.data]);
+    const getItemString = () => {
+        return null;
+    };
+    const valueRenderer = (valueAsString, value) => {
+        if (isBoolean(value)) {
+            return parseToBoolean(value) ? _jsx(SSICheckmarkBadge, {}) : _jsx(SSIExclamationMarkBadge, {});
+        }
+        if (typeof value === 'object'
+            && value !== null
+            && 'uri' in value) {
+            const imageData = value;
+            return _jsx(ImageValue, { style: {
+                    aspectRatio: imageData.dimensions?.aspectRatio,
+                    backgroundImage: `url(${imageData.uri})`,
+                } });
+        }
+        return _jsx(TextValue, { children: value?.toString() });
+    };
+    const labelRenderer = ([key]) => {
+        return _jsx(Label, { children: key });
+    };
+    const isCustomNode = (value) => {
+        return typeof value === 'object' && value !== null && 'uri' in value && 'dimensions' in value;
+    };
+    return (_jsxs(Container, { children: [showHeader &&
+                _jsxs(HeaderContainer, { children: [_jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_attribute_column_label') }), _jsx(ColumnHeaderCaption, { children: Localization.translate('json_data_view_value_column_label') })] }), _jsx(ContainerCaption, { onMouseEnter: () => setFocused(true), onMouseLeave: () => setFocused(false), children: data &&
+                    _jsx(JSONTree, { theme: {
+                            base0D: fontColors.dark,
+                            tree: {
+                                margin: 0,
+                                backgroundColor: backgroundColors.primaryLight,
+                            },
+                            arrowContainer: {
+                                paddingRight: 6,
+                            },
+                            arrow: {
+                                fontSize: 10,
+                                ...(!focused && { display: 'none' }),
+                            },
+                        }, hideRoot: true, shouldExpandNodeInitially: expandNodeInitially, getItemString: getItemString, labelRenderer: labelRenderer, valueRenderer: valueRenderer, isCustomNode: isCustomNode, data: data }) })] }));
+};
+export default JSONDataView;

package/dist/components/views/SSITabView/SSITabViewHeader/index.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
-import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITextH3Styled as TitleCaption, } from '../../../../styles';
+import { SSITabViewHeaderContainerStyled as Container, SSITabViewHeaderTitleContainerStyled as TitleContainer, SSITabViewHeaderTitleCaptionStyled as TitleCaption, } from '../../../../styles';
 const SSITabViewHeader = (props) => {
     const { navigationState, onIndexChange } = props;
     return (_jsx(Container, { children: navigationState.routes.map((value, index) => {

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

@@ -0,0 +1,8 @@
+import { CSSProperties, FC } from 'react';
+import { PaginationProps } from '@mui/material';
+export type PaginationControlsProps = PaginationProps & {
+    goToInputId?: string;
+    containerStyle?: CSSProperties;
+};
+declare const PaginationControls: FC<PaginationControlsProps>;
+export default PaginationControls;

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

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Stack } from '@mui/material';
+import { GoToInputContainer, GoToInputStyled, PaginationContainerStyled, PaginationStyled } from '../../../../styles';
+import { Localization } from '@sphereon/ui-components.core';
+const PaginationControls = (props) => {
+    const { onKeyDown, containerStyle, goToInputId = 'goTo' } = props;
+    return (_jsxs(PaginationContainerStyled, { style: containerStyle, children: [_jsx(Stack, { children: _jsx(PaginationStyled, { ...props }) }), _jsxs(GoToInputContainer, { children: [Localization.translate('table_pagination_input_caption_go_to'), _jsx(GoToInputStyled, { id: goToInputId, onKeyDown: onKeyDown }), Localization.translate('table_pagination_input_caption_page')] })] }));
+};
+export default PaginationControls;

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

@@ -4,6 +4,7 @@ type Props = {
     enableFiltering?: boolean;
     enableMostRecent?: boolean;
     actions?: Array<Button>;
+    onDelete?: () => Promise<void>;
 };
 declare const SSITableViewHeader: React.FC<Props>;
 export default SSITableViewHeader;

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

@@ -1,11 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { ButtonIcon, Localization } from '@sphereon/ui-components.core';
+import { ButtonIcon, Localization, statusColors } 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, TableViewHeaderStaticActionsContainerStyled as StaticActionsContainer, } 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)))] }) }) }));
+    const { enableFiltering = false, enableMostRecent = false, actions = [], onDelete } = props;
+    const onDeleteClick = async () => {
+        await onDelete?.();
+    };
+    return (_jsxs(Container, { children: [_jsx(StaticActionsContainer, { children: onDelete && (_jsx(SSIIconButton, { caption: Localization.translate('action_delete_label'), icon: ButtonIcon.DELETE, iconColor: statusColors.error, onClick: onDeleteClick })) }), _jsx(ContentContainer, { style: { width: 'fit-content' }, 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,17 +1,20 @@
 import { ReactElement } from 'react';
 import { ColumnResizeMode, Row } from '@tanstack/react-table';
-import { ActionGroup, Button, ColumnHeader } from '../../../types';
+import { Button, ColumnHeader } from '../../../types';
+import { PaginationControlsProps } from './PaginationControls';
 type Props<T> = {
     data: Array<T>;
     columns: Array<ColumnHeader<T>>;
     onRowClick?: (data: Row<T>) => Promise<void>;
+    onDelete?: (rows: Array<T>) => Promise<void>;
     enableRowSelection?: boolean;
+    enableRowHover?: boolean;
     enableFiltering?: boolean;
     enableMostRecent?: boolean;
     enableResultCount?: boolean;
     columnResizeMode?: ColumnResizeMode;
     actions?: Array<Button>;
-    actionGroup?: ActionGroup;
+    pagination?: PaginationControlsProps;
 };
 declare const SSITableView: <T extends {}>(props: Props<T>) => ReactElement;
 export default SSITableView;

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

@@ -1,14 +1,18 @@
 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 { ButtonIcon, Localization, selectionElementColors } 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 SSIStatusLabel from '../../labels/SSIStatusLabel';
+import CredentialMiniCardView from '../CredentialMiniCardView';
+import DropDownList from '../../lists/DropDownList';
+import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewHeaderRowContainerStyled as HeaderRowContainer, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer, } from '../../../styles';
 import { TableCellType } from '../../../types';
-import { CredentialMiniCardView, SSIStatusLabel } from '../../../index';
-import RowActionMenuButton from '../../buttons/RowActionMenuButton';
+import PaginationControls from './PaginationControls';
+import ComboBox from "../../fields/ComboBox";
+import CredentialDetailsView from "../CredentialViewItem";
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -18,10 +22,10 @@ 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, options) => {
     switch (type) {
         case TableCellType.TEXT:
-            const { truncationLength, enableHover = false } = opts ?? {};
+            const { truncationLength, enableHover = false } = options ?? {};
             return _jsx(SSIHoverText, { text: value, truncationLength: truncationLength, enableHover: enableHover });
         case TableCellType.LABEL: {
             const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
@@ -33,21 +37,44 @@ const getCellFormatting = (type, value, opts) => {
         case TableCellType.CREDENTIAL_CARD: {
             return _jsx(CredentialMiniCardView, { ...value });
         }
+        case TableCellType.CREDENTIAL_DETAILS: {
+            return _jsx(CredentialDetailsView, { ...value, style: { maxWidth: 261 } });
+        }
+        case TableCellType.ACTIONS: {
+            const { actions = [] } = options ?? {};
+            const buttons = actions.map((action) => ({
+                ...action,
+                onClick: () => action.onClick(row),
+            }));
+            return _jsx(DropDownList, { icon: ButtonIcon.MEATBALLS, buttons: buttons, showBorder: true });
+        }
+        case TableCellType.COMBOBOX: {
+            const { defaultValue, onChange, selectOptions = [] } = options ?? {};
+            return _jsx(ComboBox, { defaultValue: defaultValue, value: value, onChange: onChange, options: selectOptions });
+        }
         default:
             return _jsx("div", {});
     }
 };
+const toRowSelectionObject = (rows) => {
+    const rowSelectionObject = {};
+    rows.forEach((row) => {
+        rowSelectionObject[row.rowId] = true;
+    });
+    return rowSelectionObject;
+};
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], actionGroup, onRowClick, } = props;
-    const [rowSelection, setRowSelection] = React.useState({});
+    const { columns, data, enableRowSelection = false, enableRowHover = true, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, onDelete, pagination, } = props;
+    const [rowSelection, setRowSelection] = React.useState([]);
+    const [focusedRowId, setFocusedRowId] = 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),
-        minSize: header.opts?.columnMinWidth,
-        maxSize: header.opts?.columnMaxWidth,
-        size: header.opts?.columnWidth,
+        cell: (info) => getCellFormatting(header.type, info.getValue(), info.row, header.columnOptions?.cellOptions),
+        minSize: header.columnOptions?.columnMinWidth,
+        maxSize: header.columnOptions?.columnMaxWidth,
+        size: header.columnOptions?.columnWidth,
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -58,60 +85,64 @@ const SSITableView = (props) => {
                         indeterminate: table.getIsSomeRowsSelected(),
                         onChange: table.getToggleAllRowsSelectedHandler(),
                     } })),
-                cell: ({ row }) => (_jsx("div", { className: "px-1", children: _jsx(IndeterminateCheckbox, { ...{
+                cell: ({ row }) => (_jsx(RowSelectionCheckboxContainer, { children: (row.id === focusedRowId || rowSelection.length > 0) && (_jsx(IndeterminateCheckbox, { ...{
                             checked: row.getIsSelected(),
                             disabled: !row.getCanSelect(),
                             indeterminate: row.getIsSomeSelected(),
                             onChange: row.getToggleSelectedHandler(),
-                        } }) })),
+                        } })) })),
             },
             ...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 onFocusRow = (rowId) => {
+        setFocusedRowId(rowId);
+    };
+    const onRowSelectionChange = (updatedRowSelection) => {
+        const currentRowSelection = updatedRowSelection(toRowSelectionObject(rowSelection));
+        const selection = Object.keys(currentRowSelection).map((key) => {
+            return {
+                rowId: key,
+                rowData: data[Number(key)],
+            };
+        });
+        setRowSelection(selection);
+    };
     const table = useReactTable({
         defaultColumn: {
             size: 0,
         },
         state: {
-            rowSelection,
+            rowSelection: toRowSelectionObject(rowSelection),
         },
         enableRowSelection,
-        onRowSelectionChange: setRowSelection,
+        onRowSelectionChange: onRowSelectionChange,
         data,
         columns: availableColumns,
         columnResizeMode,
         getCoreRowModel: getCoreRowModel(),
     });
     const onRowClicked = async (row) => {
-        if (onRowClick) {
-            await onRowClick(row);
-        }
+        await onRowClick?.(row);
+    };
+    const onDeleteClicked = async () => {
+        await onDelete?.(rowSelection.map((row) => row.rowData));
     };
-    return (_jsx(Container, { children: _jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
-                        count: data.length,
-                        maxCount: data.length,
-                    }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(RowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: {
-                                        ...(header.column.columnDef.minSize && { minWidth: header.column.columnDef.minSize }),
-                                        ...(header.column.columnDef.maxSize && { maxWidth: header.column.columnDef.maxSize }),
-                                        ...(header.column.columnDef.size !== 0 && { width: header.column.columnDef.size }),
-                                    }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
-                                                transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
-                                                    ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
-                                                    : '',
-                                            } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { onClick: () => onRowClicked(row), children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
-                                        ...(cell.column.columnDef.minSize && { minWidth: cell.column.columnDef.minSize }),
-                                        ...(cell.column.columnDef.maxSize && { maxWidth: cell.column.columnDef.maxSize }),
-                                        ...(cell.column.columnDef.size !== 0 && { width: cell.column.columnDef.size }),
-                                    }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
+    return (_jsxs(Container, { children: [_jsxs("div", { className: "overflow-x-auto", children: [enableResultCount && (_jsx(ResultCountCaption, { children: Localization.translate('result_count_label', {
+                            count: data.length,
+                            maxCount: data.length,
+                        }) })), (enableFiltering || enableMostRecent || actions.length > 0) && (_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent, ...(onDelete && { onDelete: onDeleteClicked }) })), _jsxs(TableContainer, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(HeaderRowContainer, { children: headerGroup.headers.map((header) => (_jsxs(HeaderCellContainer, { colSpan: header.colSpan, style: {
+                                            ...(header.column.columnDef.minSize && { minWidth: header.column.columnDef.minSize }),
+                                            ...(header.column.columnDef.maxSize && { maxWidth: header.column.columnDef.maxSize }),
+                                            ...(header.column.columnDef.size !== 0 && { width: header.column.columnDef.size }),
+                                        }, children: [header.isPlaceholder ? null : flexRender(header.column.columnDef.header, header.getContext()), _jsx("div", { className: `resizer ${header.column.getIsResizing() ? 'isResizing' : ''}`, onMouseDown: header.getResizeHandler(), onTouchStart: header.getResizeHandler(), style: {
+                                                    transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
+                                                        ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
+                                                        : '',
+                                                } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { enableHover: enableRowHover, onClick: () => onRowClicked(row), onMouseEnter: () => onFocusRow(row.id), onMouseLeave: () => onFocusRow(), style: { ...(row.getIsSelected() && { backgroundColor: selectionElementColors.selectedRow }) }, children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
+                                            ...(cell.column.columnDef.minSize && { minWidth: cell.column.columnDef.minSize }),
+                                            ...(cell.column.columnDef.maxSize && { maxWidth: cell.column.columnDef.maxSize }),
+                                            ...(cell.column.columnDef.size !== 0 && { width: cell.column.columnDef.size }),
+                                        }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }), pagination && _jsx(PaginationControls, { ...pagination })] }));
 };
 export default SSITableView;