@sphereon/ui-components.ssi-react 0.1.2 → 0.1.3-next.3

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

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

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

@@ -1,11 +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 { 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(() => {
@@ -21,14 +22,14 @@ const getCellFormatting = (type, value, truncationLength) => {
             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 });
+            return _jsx(LabelCell, { children: labels });
         }
         default:
             return _jsx("div", {});
     }
 };
 const SSITableView = (props) => {
-    const { columns, data, enableRowSelection = false, enableFiltering = false, enableMostRecent = 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, {
@@ -71,11 +72,15 @@ const SSITableView = (props) => {
             await onRowClick(row);
         }
     };
-    return (_jsx(SSITableViewContainerStyled, { children: _jsxs("div", { className: "overflow-x-auto", children: [(enableFiltering || enableMostRecent || actions.length > 0) &&
-                    _jsx(SSITableViewHeader, { actions: actions, enableFiltering: enableFiltering, enableMostRecent: enableMostRecent }), _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/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.2",
+  "version": "0.1.3-next.3+2c49b98",
   "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",
+    "@sphereon/ui-components.core": "0.1.3-next.3+2c49b98",
     "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "45285dfa116751f1cda0fef607c8150031c87db8"
+  "gitHead": "2c49b98bc1809930ccb738aa579a7fb2a156e773"
 }