@sphereon/ui-components.ssi-react 0.1.2-next.21 → 0.1.2-next.27

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

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+export type Props = {
+    truncationLength?: number;
+    value: string;
+};
+declare const SSIText: FC<Props>;
+export default SSIText;

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

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { SSITruncatedTextStyled, SSITruncatedContainerStyled, SSITruncatedFullTextStyled } from '../../../styles/components/components/SSIText';
+const SSIText = (props) => {
+    const { value, truncationLength } = props;
+    if (truncationLength && value.length > truncationLength) {
+        const truncatedText = value.substring(0, truncationLength);
+        return (_jsxs(SSITruncatedContainerStyled, { children: [_jsx(SSITruncatedTextStyled, { children: truncatedText }), _jsx(SSITruncatedFullTextStyled, { children: value })] }));
+    }
+    else {
+        return _jsx("p", { children: value });
+    }
+};
+export default SSIText;

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

@@ -4,6 +4,7 @@ import { createColumnHelper, flexRender, getCoreRowModel, useReactTable, } from
 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';
 function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     const ref = React.useRef(null);
@@ -14,10 +15,10 @@ function IndeterminateCheckbox({ indeterminate, className = '', ...rest }) {
     }, [ref, indeterminate]);
     return _jsx("input", { type: "checkbox", ref: ref, className: className + ' cursor-pointer', ...rest });
 }
-const getCellFormatting = (type, value) => {
+const getCellFormatting = (type, value, truncationLength) => {
     switch (type) {
         case TableCellTypeEnum.TEXT:
-            return _jsx("p", { children: value });
+            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 });
@@ -33,7 +34,7 @@ const SSITableView = (props) => {
     let availableColumns = columns.map((header) => columnHelper.accessor(header.accessor, {
         id: header.accessor,
         header: header.label,
-        cell: (info) => getCellFormatting(header.type, info.getValue()),
+        cell: (info) => getCellFormatting(header.type, info.getValue(), header.truncationLength),
     }));
     if (enableRowSelection) {
         availableColumns = [
@@ -70,7 +71,7 @@ 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, { style: { width: table.getCenterTotalSize() }, 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(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: {
                                                 transform: columnResizeMode === 'onEnd' && header.column.getIsResizing()
                                                     ? `translateX(${table.getState().columnSizingInfo.deltaOffset}px)`
                                                     : '',

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

@@ -14,7 +14,7 @@ export const SSITableViewLabelCellStyled = styled.div `
 `;
 export const SSITableViewTableContainerStyled = styled.table `
   user-select: text;
-  width: fit-content;
+  width: 100%;
   border-collapse: collapse;
 `;
 export const SSITableViewRowContainerStyled = styled.tr `

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

@@ -0,0 +1,3 @@
+export declare const SSITruncatedFullTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SSITruncatedContainerStyled: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SSITruncatedTextStyled: import("styled-components").StyledComponent<"span", any, {}, never>;

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

@@ -0,0 +1,21 @@
+import styled from 'styled-components';
+export const SSITruncatedFullTextStyled = styled.span `
+  display: none;
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: #fff;
+  border: 1px solid #ccc;
+  padding: 5px;
+  z-index: 1;
+`;
+export const SSITruncatedContainerStyled = styled.div `
+  position: relative;
+
+  &:hover ${SSITruncatedFullTextStyled} {
+    display: block;
+  }
+`;
+export const SSITruncatedTextStyled = styled.span `
+  display: 'inline';
+`;

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

@@ -20,6 +20,7 @@ export type ColumnHeader<T> = {
     accessor: AccessorFn<T> | DeepKeys<T>;
     type: TableCellTypeEnum;
     label?: string;
+    truncationLength?: number;
 };
 export type Button = {
     caption: string;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.1.2-next.21+5ebdbbe",
+  "version": "0.1.2-next.27+8da7f08",
   "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-next.21+5ebdbbe",
+    "@sphereon/ui-components.core": "0.1.2-next.27+8da7f08",
     "@tanstack/react-table": "^8.9.3",
     "styled-components": "^5.3.3"
   },
@@ -40,5 +40,5 @@
   "peerDependencies": {
     "react": ">= 16.8.0"
   },
-  "gitHead": "5ebdbbe46283cdec64e4fd87e0dcd297551ba310"
+  "gitHead": "8da7f088dce61cddd475572c7bf15f0cbd4bf6d0"
 }