@sphereon/ui-components.ssi-react 0.1.2-unstable.30 → 0.1.2-unstable.31

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

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 export interface IProps {
     width?: number;
     height?: number;
     color?: string;
+    style?: CSSProperties;
 }
 declare const SSIArrowDownIcon: FC<IProps>;
 export default SSIArrowDownIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIArrowDownIcon = (props) => {
-    const { width = 16, height = 8, color = fontColors.dark } = props;
-    return (_jsx("div", { style: { width, height, display: 'flex' }, children: _jsx("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color }) }) }));
+    const { width = 16, height = 8, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "16", height: "8", viewBox: "0 0 16 8", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M8.03265 7.74886C8.14951 7.74175 8.26065 7.69465 8.34825 7.61511L15.3133 1.19499C15.367 1.1489 15.411 1.09224 15.4429 1.02837C15.4747 0.964504 15.4937 0.894731 15.4987 0.823204C15.5037 0.751676 15.4946 0.67985 15.4719 0.611995C15.4493 0.54414 15.4135 0.481647 15.3668 0.428216C15.3201 0.374784 15.2634 0.331504 15.2001 0.300961C15.1367 0.270419 15.068 0.253238 14.9981 0.250423C14.9281 0.247608 14.8583 0.259221 14.7928 0.28458C14.7273 0.309939 14.6675 0.348517 14.6168 0.398032L8 6.49492L1.38317 0.398032C1.33252 0.348517 1.27268 0.309939 1.20718 0.28458C1.14169 0.259221 1.07189 0.247597 1.00193 0.250412C0.931963 0.253227 0.863266 0.270419 0.799918 0.300961C0.736569 0.331504 0.679861 0.374784 0.633164 0.428216C0.586466 0.481647 0.550732 0.54414 0.528085 0.611995C0.505437 0.67985 0.496338 0.751676 0.501329 0.823204C0.506319 0.894731 0.525297 0.964504 0.557135 1.02837C0.588973 1.09224 0.633022 1.1489 0.686663 1.19499L7.65174 7.61511C7.70344 7.6621 7.76372 7.69811 7.82911 7.72107C7.89449 7.74403 7.96367 7.75348 8.03265 7.74886Z", fill: color }) }) }));
 };
 export default SSIArrowDownIcon;

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

@@ -1,8 +1,9 @@
-import { FC } from 'react';
+import { CSSProperties, FC } from 'react';
 export interface IProps {
     width?: number;
     height?: number;
     color?: string;
+    style?: CSSProperties;
 }
 declare const SSIFilterIcon: FC<IProps>;
 export default SSIFilterIcon;

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

@@ -1,7 +1,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { fontColors } from '@sphereon/ui-components.core';
 const SSIFilterIcon = (props) => {
-    const { height = 16, width = 18, color = fontColors.dark } = props;
-    return (_jsx("div", { style: { width, height, display: 'flex' }, children: _jsx("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
+    const { height = 16, width = 18, color = fontColors.dark, style } = props;
+    return (_jsx("div", { style: { ...style, width, height, display: 'flex' }, children: _jsx("svg", { width: "18", height: "16", viewBox: "0 0 18 16", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M16.5 1.5H1.5L7.5 8.33222V13.0556L10.5 14.5V8.33222L16.5 1.5Z", stroke: color, strokeOpacity: "0.8", strokeWidth: "1.29412", strokeLinecap: "round", strokeLinejoin: "round" }) }) }));
 };
 export default SSIFilterIcon;

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

@@ -2,6 +2,7 @@ import React from 'react';
 import { Button } from '../../../../types';
 export type Props = {
     enableFiltering?: boolean;
+    enableMostRecent?: boolean;
     actions?: Array<Button>;
 };
 declare const SSITableViewHeader: React.FC<Props>;

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

@@ -6,7 +6,8 @@ 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/components';
 const SSITableViewHeader = (props) => {
-    const { enableFiltering = false, actions = [] } = props;
-    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIconsEnum.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), _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 = [] } = props;
+    return (_jsx(Container, { children: _jsx(ContentContainer, { children: _jsxs(ActionsContainer, { children: [enableFiltering && (_jsxs(FilterContainer, { children: [_jsx(SSIIconButton, { icon: ButtonIconsEnum.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)))] }) }) }));
 };
 export default SSITableViewHeader;

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

@@ -7,6 +7,8 @@ export type Props<T> = {
     onRowClick?: (data: Row<T>) => Promise<void>;
     enableRowSelection?: boolean;
     enableFiltering?: boolean;
+    enableMostRecent?: boolean;
+    enableResultCount?: boolean;
     columnResizeMode?: ColumnResizeMode;
     actions?: Array<Button>;
 };

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

@@ -1,12 +1,12 @@
 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 { TableCellTypeEnum } from '../../../types';
 import SSITableViewHeader from './SSITableViewHeader';
 import SSITypeLabel from '../../labels/SSITypeLabel';
 import SSIText from '../../labels/SSIText';
-import { SSITableViewCellContainerStyled, SSITableViewContainerStyled, SSITableViewHeaderCellContainerStyled, SSITableViewLabelCellStyled, SSITableViewRowContainerStyled, SSITableViewTableContainerStyled, } from '../../../styles/components';
-import SSIGenericStatusLabel from "../../labels/SSIGenericStatusLabel";
+import { SSITableViewCellContainerStyled as CellContainer, SSITableViewContainerStyled as Container, SSITableViewHeaderCellContainerStyled as HeaderCellContainer, SSITableViewLabelCellStyled as LabelCell, SSITableViewResultCountCaptionStyled as ResultCountCaption, SSITableViewRowContainerStyled as RowContainer, SSITableViewTableContainerStyled as TableContainer, } from '../../../styles/components';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
     React.useEffect(() => {
@@ -16,30 +16,26 @@ function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     }, [ref, indeterminate]);
     return _jsx("input", { type: "checkbox", ref: ref, className: className + ' cursor-pointer', ...rest });
 }
-const getCellFormatting = (props) => {
-    const { type, value, truncationLength, statusLabel } = props;
+const getCellFormatting = (type, value, truncationLength) => {
     switch (type) {
         case TableCellTypeEnum.TEXT:
             return _jsx(SSIText, { value: value, ...(truncationLength && { truncationLength }) });
         case TableCellTypeEnum.LABEL: {
             const labels = Array.isArray(value) ? value.map((label) => _jsx(SSITypeLabel, { type: label })) : _jsx(SSITypeLabel, { type: value });
-            return _jsx(SSITableViewLabelCellStyled, { children: labels });
-        }
-        case TableCellTypeEnum.STATUS: {
-            return _jsx(SSIGenericStatusLabel, { status: value, textColorMapping: statusLabel.textColorMapping, showIcon: statusLabel?.showIcon, style: statusLabel?.style, getStatusBadge: statusLabel?.getStatusBadge, getStatusTranslation: statusLabel?.getStatusTranslation });
+            return _jsx(LabelCell, { children: labels });
         }
         default:
             return _jsx("div", {});
     }
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, columnResizeMode = 'onChange', actions = [], 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({ type: header.type, value: info.getValue(), statusLabel: header.statusLabel, truncationLength: header.truncationLength }),
+        cell: (info) => getCellFormatting(header.type, info.getValue(), header.truncationLength),
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -76,10 +72,15 @@ const SSITableView = (props) => {
             await onRowClick(row);
         }
     };
-    return (_jsx(SSITableViewContainerStyled, { children: _jsxs("div", { className: "overflow-x-auto", children: [_jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering }), _jsxs(SSITableViewTableContainerStyled, { children: [_jsx("thead", { children: table.getHeaderGroups().map((headerGroup) => (_jsx(SSITableViewRowContainerStyled, { children: headerGroup.headers.map((header) => (_jsxs(SSITableViewHeaderCellContainerStyled, { colSpan: header.colSpan, style: { width: header.getSize() }, 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: {
+    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: { width: header.getSize() }, 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(SSITableViewRowContainerStyled, { onClick: () => onRowClicked(row), children: row.getVisibleCells().map((cell) => (_jsx(SSITableViewCellContainerStyled, { style: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
+                                            } })] }, 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: { width: cell.column.getSize() }, children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id))) }, row.id))) })] })] }) }));
 };
 export default SSITableView;

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

@@ -4,3 +4,4 @@ export declare const SSITableViewTableContainerStyled: import("styled-components
 export declare const SSITableViewRowContainerStyled: import("styled-components").StyledComponent<"tr", any, {}, never>;
 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>;

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

@@ -2,7 +2,6 @@ import styled from 'styled-components';
 import { backgroundColors, borderColors, fontColors } from '@sphereon/ui-components.core';
 import { SSITextH2Css, SSITextH3Css } from '../../../css';
 export const SSITableViewContainerStyled = styled.div `
-  background-color: ${backgroundColors.lightGrey};
   display: flex;
   flex-grow: 1;
   flex-direction: column;
@@ -16,6 +15,7 @@ export const SSITableViewTableContainerStyled = styled.table `
   user-select: text;
   width: 100%;
   border-collapse: collapse;
+  background-color: ${backgroundColors.lightGrey};
 `;
 export const SSITableViewRowContainerStyled = styled.tr `
   border-bottom: 1px solid ${borderColors.lightGrey};
@@ -35,3 +35,7 @@ export const SSITableViewHeaderCellContainerStyled = styled.th `
   color: ${fontColors.lightGrey};
   text-align: left;
 `;
+export const SSITableViewResultCountCaptionStyled = styled.div `
+  ${SSITextH3Css};
+  margin-left: 24px;
+`;

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

@@ -1,6 +1,5 @@
 import { ComponentType } from 'react';
 import { AccessorFn, DeepKeys } from '@tanstack/react-table';
-import { StatusLabelProps } from "../../components/labels/SSIGenericStatusLabel";
 export type TabRoute = {
     key: string;
     title: string;
@@ -21,7 +20,6 @@ export type ColumnHeader<T> = {
     accessor: AccessorFn<T> | DeepKeys<T>;
     type: TableCellTypeEnum;
     label?: string;
-    statusLabel?: Omit<StatusLabelProps, 'status'>;
     truncationLength?: number;
 };
 export type Button = {
@@ -36,6 +34,5 @@ export declare enum LabelTypeEnum {
 }
 export declare enum TableCellTypeEnum {
     TEXT = "text",
-    LABEL = "label",
-    STATUS = "status"
+    LABEL = "label"
 }

package/dist/types/component/index.js

@@ -13,5 +13,4 @@ export var TableCellTypeEnum;
 (function (TableCellTypeEnum) {
     TableCellTypeEnum["TEXT"] = "text";
     TableCellTypeEnum["LABEL"] = "label";
-    TableCellTypeEnum["STATUS"] = "status";
 })(TableCellTypeEnum || (TableCellTypeEnum = {}));

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.2-unstable.30+9035e04",
+  "version": "0.1.2-unstable.31+f20578f",
   "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.2-unstable.30+9035e04",
+    "@sphereon/ui-components.core": "0.1.2-unstable.31+f20578f",
     "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "9035e0400afac1b86560fd217359e3c84d2d0624"
+  "gitHead": "f20578f76e5c503146c1963305d54cd7afac000a"
 }

package/dist/components/labels/SSIGenericStatusLabel/index.d.ts

@@ -1,11 +0,0 @@
-import { CSSProperties, FC, ReactElement } from "react";
-export type StatusLabelProps = {
-    status: string;
-    showIcon?: boolean;
-    textColorMapping: Map<string, string>;
-    style?: CSSProperties;
-    getStatusBadge?: (status: string, backgroundColor?: string) => ReactElement;
-    getStatusTranslation?: (status: string) => string;
-};
-declare const SSIGenericStatusLabel: FC<StatusLabelProps>;
-export default SSIGenericStatusLabel;

package/dist/components/labels/SSIGenericStatusLabel/index.js

@@ -1,8 +0,0 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { SSIStatusLabelBadgeContainer as BadgeContainer, SSIStatusLabelContainerStyled as Container, SSIStatusLabelStatusCaptionStyled as StatusCaption } from "../../../styles/components";
-const SSIGenericStatusLabel = (props) => {
-    const { getStatusBadge, getStatusTranslation, status, textColorMapping, style, showIcon = false } = props;
-    const color = textColorMapping?.has(status) ? textColorMapping.get(status) : 'black';
-    return (_jsxs(Container, { style: { ...style, borderColor: color }, children: [showIcon && getStatusBadge && _jsx(BadgeContainer, { children: getStatusBadge(status, color) }), _jsx(StatusCaption, { style: { color }, children: getStatusTranslation ? getStatusTranslation(status) : status })] }));
-};
-export default SSIGenericStatusLabel;