@sphereon/ui-components.ssi-react 0.1.3-next.119 → 0.1.3-next.124

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

@@ -2,9 +2,10 @@ import { FC, MouseEventHandler } from 'react';
 import { ButtonIcon } from '@sphereon/ui-components.core';
 type Props = {
     icon: ButtonIcon;
+    caption?: string;
     onClick: MouseEventHandler;
     disabled?: boolean;
-    color?: string;
+    iconColor?: string;
 };
 declare const SSIIconButton: FC<Props>;
 export default SSIIconButton;

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

@@ -1,14 +1,14 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ButtonIcon, fontColors } from '@sphereon/ui-components.core';
 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 { SSIIconButtonContainerStyled as Container, SSITextH3Styled as Caption } from '../../../styles';
 import MeatBallsIcon from '../../assets/icons/MeatBallsIcon';
 import DeleteIcon from '../../assets/icons/DeleteIcon';
 const SSIIconButton = (props) => {
-    const { icon, onClick, disabled = false, color = fontColors.dark } = props;
-    return _jsx(Container, { onClick: onClick, children: getIcon(icon, color) });
+    const { caption, icon, onClick, disabled = false, iconColor = fontColors.dark } = props;
+    return _jsxs(Container, { onClick: onClick, children: [getIcon(icon, iconColor), caption && _jsx(Caption, { children: caption })] });
 };
 const getIcon = (icon, color) => {
     switch (icon) {
@@ -19,7 +19,7 @@ const getIcon = (icon, color) => {
         case ButtonIcon.MEATBALLS:
             return _jsx(MeatBallsIcon, { color: color });
         case ButtonIcon.DELETE:
-            return _jsx(DeleteIcon, { color: color });
+            return _jsx(DeleteIcon, { color: color, width: 15, height: 16 });
         case ButtonIcon.FILTER:
             return _jsx(SSIFilterIcon, { color: color });
         default:

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

@@ -1,6 +1,6 @@
 import { FC } from 'react';
-import { Button } from '../../../types';
 import { ButtonIcon } from '@sphereon/ui-components.core';
+import { Button } from '../../../types';
 export type Props = {
     icon: ButtonIcon;
     buttons: Array<Button>;

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

@@ -1,9 +1,9 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useState, useRef, useEffect } from 'react';
-import { DropDownListContainerStyled as Container, DropDownContainerStyled as DropDownContainer, DropDownListButtonStyled as ListButton, } from '../../../styles/components';
-import DropDownListItem from '../DropDownListItem';
-import { SSIIconButton } from '../../../index';
 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);

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,10 +1,14 @@
 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 SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
-import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, } 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') })] })), 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

@@ -5,6 +5,7 @@ type Props<T> = {
     data: Array<T>;
     columns: Array<ColumnHeader<T>>;
     onRowClick?: (data: Row<T>) => Promise<void>;
+    onDelete?: (rows: Array<T>) => Promise<void>;
     enableRowSelection?: boolean;
     enableFiltering?: boolean;
     enableMostRecent?: boolean;

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

@@ -1,13 +1,15 @@
 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 { createColumnHelper, flexRender, getCoreRowModel, useReactTable } from '@tanstack/react-table';
+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, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, TableViewRowSelectionCheckboxContainerStyled as RowSelectionCheckboxContainer } from '../../../styles';
 import { TableCellType } from '../../../types';
-import { CredentialMiniCardView, DropDownList, SSIStatusLabel } from '../../../index';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -33,23 +35,28 @@ const getCellFormatting = (type, value, row, opts) => {
             return _jsx(CredentialMiniCardView, { ...value });
         }
         case TableCellType.ACTION_GROUP: {
-            const { actionGroup } = opts ?? {};
-            if (actionGroup) {
-                const actions = actionGroup.actions.map(action => ({
-                    ...action,
-                    onClick: () => action.onClick(row),
-                }));
-                return _jsx(DropDownList, { icon: ButtonIcon.MEATBALLS, buttons: actions, showBorder: true });
-            }
-            return _jsx("div", {});
+            const { actionGroup = { actions: [] } } = opts ?? { actions: [] };
+            const actions = actionGroup.actions.map((action) => ({
+                ...action,
+                onClick: () => action.onClick(row),
+            }));
+            return _jsx(DropDownList, { icon: ButtonIcon.MEATBALLS, buttons: actions, showBorder: true });
         }
         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 = [], onRowClick, } = props;
-    const [rowSelection, setRowSelection] = React.useState({});
+    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = false, enableResultCount = false, columnResizeMode = 'onChange', actions = [], onRowClick, onDelete } = 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,
@@ -68,39 +75,54 @@ const SSITableView = (props) => {
                         indeterminate: table.getIsSomeRowsSelected(),
                         onChange: table.getToggleAllRowsSelectedHandler(),
                     } })),
-                cell: ({ row }) => (_jsx("div", { className: "px-1", children: _jsx(IndeterminateCheckbox, { ...{
-                            checked: row.getIsSelected(),
-                            disabled: !row.getCanSelect(),
-                            indeterminate: row.getIsSomeSelected(),
-                            onChange: row.getToggleSelectedHandler(),
-                        } }) })),
+                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,
         ];
     }
+    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: {
+                    }) })), (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(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 }),
@@ -108,7 +130,7 @@ const SSITableView = (props) => {
                                                 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: {
+                                            } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { 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 }),

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

@@ -1,7 +1,9 @@
 import styled from 'styled-components';
 export const SSIIconButtonContainerStyled = styled.div `
-  width: 32px;
-  aspect-ratio: 1;
+  gap: 8px;
+  height: 32px;
+  min-width: 32px;
+  flex-direction: row;
   display: flex;
   justify-content: center;
   align-items: center;

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

@@ -5,3 +5,4 @@ export declare const SSITableViewRowContainerStyled: import("styled-components")
 export declare const SSITableViewCellContainerStyled: import("styled-components").StyledComponent<"td", any, {}, never>;
 export declare const SSITableViewHeaderCellContainerStyled: import("styled-components").StyledComponent<"th", any, {}, never>;
 export declare const SSITableViewResultCountCaptionStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableViewRowSelectionCheckboxContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -19,11 +19,15 @@ export const SSITableViewTableContainerStyled = styled.table `
 `;
 export const SSITableViewRowContainerStyled = styled.tr `
   border-bottom: 1px solid ${borderColors.lightGrey};
+  background-color: ${backgroundColors.primaryLight};
+
+  &:hover {
+    background-color: #ECECEC;
+  }
 `;
 export const SSITableViewCellContainerStyled = styled.td `
   ${SSITextH3Css};
   color: ${fontColors.dark};
-  background-color: ${backgroundColors.primaryLight};
   padding: 20px 16px 20px 16px;
   text-align: left;
   //setting border-box makes padding be included in the width, otherwise content-box is used and then padding is excluded from the width
@@ -43,3 +47,7 @@ export const SSITableViewResultCountCaptionStyled = styled.div `
   ${SSITextH3Css};
   margin-left: 24px;
 `;
+export const TableViewRowSelectionCheckboxContainerStyled = styled.div `
+  width: 20px; 
+  height: 20px;
+`;

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

@@ -3,3 +3,4 @@ export declare const SSITableViewHeaderContentContainerStyled: import("styled-co
 export declare const SSITableViewHeaderActionsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewHeaderFilterContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const SSITableViewHeaderShowOptionContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const TableViewHeaderStaticActionsContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;

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

@@ -27,3 +27,11 @@ export const SSITableViewHeaderShowOptionContainerStyled = styled.div `
   text-align: left;
   align-items: center;
 `;
+export const TableViewHeaderStaticActionsContainerStyled = styled.div `
+  height: 48px;
+  flex-grow: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 50px;
+`;

package/dist/styles/fonts/index.js

@@ -20,7 +20,8 @@ export const SSITextH2SemiBoldStyled = styled.div `
   ${SSITextH2SemiBoldStyledCss}
 `;
 export const SSITextH3Styled = styled.div `
-  ${SSITextH3Css}
+  ${SSITextH3Css};
+  color: ${fontColors.dark};
 `;
 export const SSITextH3LightStyled = styled(SSITextH3Styled) `
   color: ${fontColors.light};

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

@@ -25,3 +25,7 @@ export type TableColumnActionGroup = {
     label?: string;
     actions: Array<Button>;
 };
+export type TableRowSelection = {
+    rowId: string;
+    rowData: any;
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.3-next.119+7efc6da",
+  "version": "0.1.3-next.124+7c978b9",
   "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-next.119+7efc6da",
+    "@sphereon/ui-components.core": "0.1.3-next.124+7c978b9",
     "@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": "7efc6da3b8ccf4385f8ce733b7e47fcad76681d6"
+  "gitHead": "7c978b9e929d595e3e097b4a07e1d75de99ff352"
 }