@sphereon/ui-components.ssi-react 0.5.0 → 0.5.1-next.4

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

@@ -3,7 +3,7 @@ import { Stack } from '@mui/material';
 import { GoToInputContainer, GoToInputStyled, PaginationContainerStyled, PaginationStyled } from '../../../../styles';
 import { Localization } from '@sphereon/ui-components.core';
 const PaginationControls = (props) => {
-    const { onKeyDown, containerStyle, goToInputId = 'goTo' } = props;
-    return (_jsxs(PaginationContainerStyled, { style: containerStyle, children: [_jsx(Stack, { children: _jsx(PaginationStyled, { ...props }) }), _jsxs(GoToInputContainer, { children: [Localization.translate('table_pagination_input_caption_go_to'), _jsx(GoToInputStyled, { id: goToInputId, onKeyDown: onKeyDown }), Localization.translate('table_pagination_input_caption_page')] })] }));
+    const { onKeyDown, containerStyle, goToInputId = 'goTo', ...paginationProps } = props;
+    return (_jsxs(PaginationContainerStyled, { style: containerStyle, children: [_jsx(Stack, { children: _jsx(PaginationStyled, { ...paginationProps }) }), _jsxs(GoToInputContainer, { children: [Localization.translate('table_pagination_input_caption_go_to'), _jsx(GoToInputStyled, { id: goToInputId, onKeyDown: onKeyDown }), Localization.translate('table_pagination_input_caption_page')] })] }));
 };
 export default PaginationControls;

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

@@ -3,11 +3,17 @@ import { ButtonIcon, Localization, statusColors } from '@sphereon/ui-components.
 import IconButton from '../../../buttons/IconButton';
 import PrimaryButton from '../../../buttons/PrimaryButton';
 import { SSITableViewHeaderActionsContainerStyled as ActionsContainer, SSITableViewHeaderContainerStyled as Container, SSITableViewHeaderContentContainerStyled as ContentContainer, SSITextH3Styled as FilterCaption, SSITableViewHeaderFilterContainerStyled as FilterContainer, TableViewHeaderStaticActionsContainerStyled as StaticActionsContainer, } from '../../../../styles';
+const headerActionButtonStyle = {
+    width: 'fit-content',
+    minWidth: '180px',
+    flexShrink: 0,
+    whiteSpace: 'nowrap',
+};
 const SSITableViewHeader = (props) => {
     const { enableFiltering = false, enableMostRecent = false, actions = [], onDelete } = props;
     const onDeleteClick = async () => {
         await onDelete?.();
     };
-    return (_jsxs(Container, { children: [_jsx(StaticActionsContainer, { children: onDelete && (_jsx(IconButton, { 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(IconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), actions.map((action, index) => (_jsx(PrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon }, index)))] }) })] }));
+    return (_jsxs(Container, { children: [_jsx(StaticActionsContainer, { children: onDelete && (_jsx(IconButton, { 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(IconButton, { icon: ButtonIcon.FILTER, onClick: async () => console.log('add filter clicked') }), _jsx(FilterCaption, { children: Localization.translate('action_filter_caption') })] })), actions.map((action, index) => (_jsx(PrimaryButton, { caption: action.caption, onClick: action.onClick, icon: action.icon, style: headerActionButtonStyle }, index)))] }) })] }));
 };
 export default SSITableViewHeader;

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

@@ -135,7 +135,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, { enableHover: enableRowHover, onClick: () => onRowClicked(row), onMouseEnter: () => onFocusRow(row.id), onMouseLeave: () => onFocusRow(), style: { ...(row.getIsSelected() && { backgroundColor: selectionElementColors.selectedRow }) }, children: row.getVisibleCells().map((cell) => (_jsx(CellContainer, { style: {
+                                                } })] }, header.id))) }, headerGroup.id))) }), _jsx("tbody", { children: table.getRowModel().rows.map((row) => (_jsx(RowContainer, { "$enableHover": enableRowHover, 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/SSITableView/index.d.ts

@@ -4,7 +4,7 @@ export declare const SSITableViewLabelCellStyled: IStyledComponent<'web', React.
 export declare const SSITableViewTableContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.TableHTMLAttributes<HTMLTableElement>, HTMLTableElement>>;
 export declare const SSITableViewHeaderRowContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement>>;
 export declare const SSITableViewRowContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.HTMLAttributes<HTMLTableRowElement>, HTMLTableRowElement> & {
-    enableHover?: boolean;
+    $enableHover?: boolean;
 }>;
 export declare const SSITableViewCellContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.TdHTMLAttributes<HTMLTableDataCellElement>, HTMLTableDataCellElement>>;
 export declare const SSITableViewHeaderCellContainerStyled: IStyledComponent<'web', React.DetailedHTMLProps<React.ThHTMLAttributes<HTMLTableHeaderCellElement>, HTMLTableHeaderCellElement>>;

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

@@ -28,7 +28,7 @@ export const SSITableViewRowContainerStyled = styled.tr `
     border-bottom: 1px solid ${borderColors.lightGrey};
   }
 
-  ${props => props.enableHover &&
+  ${props => props.$enableHover &&
     css `
       &:hover {
         background-color: #ececec; // TODO

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@sphereon/ui-components.ssi-react",
   "private": false,
-  "version": "0.5.0",
+  "version": "0.5.1-next.4+b2b924b",
   "description": "SSI UI components for React",
   "repository": "git@github.com:Sphereon-Opensource/UI-Components.git",
   "author": "Sphereon <dev@sphereon.com>",
@@ -50,7 +50,7 @@
     "@mui/x-date-pickers": "^8.18.0",
     "@sphereon/ssi-sdk.data-store-types": "0.37.0",
     "@sphereon/ssi-types": "0.37.0",
-    "@sphereon/ui-components.core": "0.5.0",
+    "@sphereon/ui-components.core": "0.5.1-next.4+b2b924b",
     "@tanstack/react-table": "^8.9.3",
     "ajv": "^8.17.1",
     "ajv-formats": "^3.0.1",
@@ -72,5 +72,5 @@
   "peerDependencies": {
     "react": ">= 18"
   },
-  "gitHead": "b8da30f97e814cf7b8bf0ae6cd1917683f9715e6"
+  "gitHead": "b2b924b7baae7f3d4f2675c5023ba44900c7f603"
 }