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

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

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const MeatBallsIcon = (props) => {
-    const { width = 20, height = 4, color = fontColors.dark, style } = props;
-    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsxs("svg", { width: "20", height: "4", viewBox: "0 0 20 4", fill: color, xmlns: "http://www.w3.org/2000/svg", children: [_jsx("circle", { cx: "13", cy: "21.5", r: "2", fill: color }), _jsx("circle", { cx: "21", cy: "21.5", r: "2", fill: color }), _jsx("circle", { cx: "29", cy: "21.5", r: "2", fill: color })] }) }));
+    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/lists/DropDownList/index.d.ts

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

@@ -1,14 +1,33 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { SSIDropDownListContainerStyled as Container } from '../../../styles/components';
+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 = () => {
-        const { buttons } = props;
         return buttons.map((item, index) => {
             const showBorder = buttons.length > 1 && index !== buttons.length - 1;
-            return (_jsx(DropDownListItem, { showBorder: showBorder, caption: item.caption, onClick: item.onClick, icon: item.icon, fontColor: item.fontColor }, index));
+            return (_jsx(DropDownListItem, { showBorder: showBorder, label: item.caption, onClick: item.onClick, icon: item.icon, fontColor: item.fontColor, opts: opts }, index));
         });
     };
-    return _jsx(Container, { children: getItems() });
+    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

@@ -1,12 +1,18 @@
 import { FC } from 'react';
 import { ButtonIcon } from '@sphereon/ui-components.core';
+import { Row } from '@tanstack/react-table';
 type Props = {
-    caption: string;
+    label: string;
     onClick: (args?: any) => Promise<void>;
     disabled?: boolean;
     icon?: ButtonIcon;
-    showBorder?: boolean;
     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

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

@@ -5,6 +5,6 @@ import SSIPrimaryButton from '../../../buttons/SSIPrimaryButton';
 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') })] })), "//todo: revisit this part when we have the most recent functionality", actions.map((action, index) => (_jsx(SSIPrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) }) }));
+    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.js

@@ -1,14 +1,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React from 'react';
 import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from '@tanstack/react-table';
-import { Localization } from '@sphereon/ui-components.core';
+import { ButtonIcon, Localization } from '@sphereon/ui-components.core';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
 import SSIHoverText from '../../fields/SSIHoverText';
 import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles';
 import { TableCellType } from '../../../types';
-import { CredentialMiniCardView, SSIStatusLabel } from '../../../index';
-import RowActionMenuButton from '../../buttons/RowActionMenuButton';
+import { CredentialMiniCardView, DropDownList, SSIStatusLabel } from '../../../index';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -36,7 +35,7 @@ const getCellFormatting = (type, value, row, opts) => {
         case TableCellType.ACTION_GROUP: {
             const { actionGroup } = opts ?? {};
             if (actionGroup) {
-                return _jsx(RowActionMenuButton, { icon: actionGroup.icon, actions: actionGroup.actions, rowData: row });
+                return _jsx(DropDownList, { icon: actionGroup.icon ?? ButtonIcon.MEATBALLS, buttons: actionGroup.actions, opts: { rowData: row } });
             }
             return _jsx("div", {});
         }

package/dist/styles/components/components/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/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.js

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

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

@@ -1,6 +1,5 @@
 export * from './buttons';
 export * from './DropDownListItem';
-export * from './RowActionMenuButton';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';

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

@@ -1,6 +1,5 @@
 export * from './buttons';
 export * from './DropDownListItem';
-export * from './RowActionMenuButton';
 export * from './SSICredentialCardView';
 export * from './SSICredentialMiniCardView';
 export * from './SSIStatusLabel';

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

@@ -22,7 +22,7 @@ export type TableCellOptions = {
     actionGroup?: TableColumnActionGroup;
 };
 export type TableColumnActionGroup = {
-    caption: string;
+    label?: string;
     icon?: ButtonIcon;
     actions: Array<TableColumnActionButton>;
 };

package/package.json

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

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 { TableColumnActionButton } from '../../../index';
-import { Row } from '@tanstack/react-table';
-type Props = {
-    actions: Array<TableColumnActionButton>;
-    rowData: Row<any>;
-    icon?: ButtonIcon;
-    color?: string;
-    style?: CSSProperties;
-};
-declare const RowActionMenuButton: (props: Props) => ReactElement;
-export default RowActionMenuButton;

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

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

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;
-`;