venice-ui 3.0.8 → 3.0.10

package/dist/cjs/components/Card/Card.js

@@ -9,7 +9,7 @@ const react_1 = __importDefault(require("react"));
 const Card_styles_1 = require("./Card.styles");
 const Header_1 = require("../Header");
 const styled_components_1 = require("styled-components");
-const Card = ({ theme, themeVariant = 'default', title, actionLabel, children, customHeader, headerDivader, actionDisabled, handleClick, handleBack, height, options, shadow, }) => {
+const Card = ({ theme, themeVariant = 'default', title, actionLabel, children, customHeader, headerDivader, actionDisabled, handleClick, handleBack, height, options, shadow, noVerticalPadding, }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -20,6 +20,6 @@ const Card = ({ theme, themeVariant = 'default', title, actionLabel, children, c
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
         react_1.default.createElement(Card_styles_1.CardRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig },
             (title || actionLabel) && (react_1.default.createElement(Header_1.Header, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, bottomDivader: headerDivader, actionDisabled: actionDisabled, themeVariant: themeVariant, header: customHeader })),
-            react_1.default.createElement(Card_styles_1.CardContent, { theme: resolvedTheme, config: headerConfig }, children))));
+            react_1.default.createElement(Card_styles_1.CardContent, { theme: resolvedTheme, config: headerConfig, noVerticalPadding: noVerticalPadding }, children))));
 };
 exports.Card = Card;

package/dist/cjs/components/Card/Card.styles.js

@@ -19,7 +19,7 @@ exports.CardRoot = styled_components_1.default.div `
 exports.CardContent = styled_components_1.default.div `
   box-sizing: border-box;
   display: flex;
-  padding: ${({ config }) => config.size.paddingY}px
+  padding: ${({ config, noVerticalPadding }) => (noVerticalPadding ? '0' : `${config.size.paddingY}px`)}
     ${({ config }) => config.size.paddingX}px;
   width: 100%;
   flex-direction: row;

package/dist/cjs/components/Table/Table.js

@@ -47,7 +47,7 @@ const Cell_1 = require("./Cell");
 const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters, tableHeight }) => {
+}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters, tableHeight, tableWrapperHeight, }) => {
     const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
         theme,
         themeVariant,
@@ -148,7 +148,7 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
         return tableProps.elements;
     }, [pagination, paginatedElements, tableProps.elements]);
     return (react_1.default.createElement(styled_components_1.ThemeProvider, { theme: resolvedTheme },
-        react_1.default.createElement(Table_styles_1.TableRoot, { theme: resolvedTheme, config: tableConfig, height: tableHeight },
+        react_1.default.createElement(Table_styles_1.TableRoot, { theme: resolvedTheme, config: tableConfig, componentHeight: tableWrapperHeight },
             react_1.default.createElement(react_1.default.Fragment, null,
                 (filtrable || pagination) && (react_1.default.createElement(Table_styles_1.TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
                     react_1.default.createElement(react_1.default.Fragment, null,
@@ -162,7 +162,7 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
                                     : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
                         pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
                             react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: labels?.pagination, availableValues: paginationCounters })))))),
-                react_1.default.createElement(Table_styles_1.TableContentWrapper, null,
+                react_1.default.createElement(Table_styles_1.TableContentWrapper, { componentHeight: tableWrapperHeight },
                     react_1.default.createElement(Table_styles_1.TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         react_1.default.createElement(Table_styles_1.TableHead, null,
                             react_1.default.createElement(Table_styles_1.TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableProps.headers.map((header) => (react_1.default.createElement(HeaderCell_1.HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort, size: header.size || 'md' }))))),

package/dist/cjs/components/Table/Table.styles.js

@@ -9,7 +9,7 @@ exports.TableRoot = styled_components_1.default.div `
   display: flex;
   width: 100%;
   flex-direction: column;
-  ${({ height }) => height && `height: ${height};`}
+  ${({ componentHeight }) => componentHeight && `height: ${componentHeight};`}
 `;
 exports.TableHeader = styled_components_1.default.div `
   display: flex;
@@ -25,7 +25,7 @@ exports.TableContentWrapper = styled_components_1.default.div `
   max-width: 100vw;
   overflow-y: hidden;
   overflow-x: auto;
-  height: 100%;
+  height: ${({ componentHeight }) => componentHeight || '100%'};
   flex-shrink: 0;
 `;
 exports.HeaderSection = styled_components_1.default.div `
@@ -33,6 +33,7 @@ exports.HeaderSection = styled_components_1.default.div `
   align-items: center;
   justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
   width: 50%;
+  flex-shrink: 0;
 `;
 exports.TableContent = styled_components_1.default.table `
   box-sizing: border-box;
@@ -59,6 +60,7 @@ exports.TableHead = styled_components_1.default.thead `
     top: 0;
     z-index: 2;
   }
+  flex-shrink: 0;
 `;
 exports.TableBody = styled_components_1.default.tbody `
   box-sizing: border-box;

package/dist/esm/components/Card/Card.js

@@ -3,7 +3,7 @@ import React from 'react';
 import { CardContent, CardRoot } from './Card.styles';
 import { Header } from '../Header';
 import { ThemeProvider } from 'styled-components';
-export const Card = ({ theme, themeVariant = 'default', title, actionLabel, children, customHeader, headerDivader, actionDisabled, handleClick, handleBack, height, options, shadow, }) => {
+export const Card = ({ theme, themeVariant = 'default', title, actionLabel, children, customHeader, headerDivader, actionDisabled, handleClick, handleBack, height, options, shadow, noVerticalPadding, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -14,5 +14,5 @@ export const Card = ({ theme, themeVariant = 'default', title, actionLabel, chil
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
         React.createElement(CardRoot, { height: height, shadow: shadow, theme: resolvedTheme, config: headerConfig },
             (title || actionLabel) && (React.createElement(Header, { title: title, actionLabel: actionLabel, handleClick: handleClick, handleBack: handleBack, options: options, theme: theme, bottomDivader: headerDivader, actionDisabled: actionDisabled, themeVariant: themeVariant, header: customHeader })),
-            React.createElement(CardContent, { theme: resolvedTheme, config: headerConfig }, children))));
+            React.createElement(CardContent, { theme: resolvedTheme, config: headerConfig, noVerticalPadding: noVerticalPadding }, children))));
 };

package/dist/esm/components/Card/Card.styles.js

@@ -13,7 +13,7 @@ export const CardRoot = styled.div `
 export const CardContent = styled.div `
   box-sizing: border-box;
   display: flex;
-  padding: ${({ config }) => config.size.paddingY}px
+  padding: ${({ config, noVerticalPadding }) => (noVerticalPadding ? '0' : `${config.size.paddingY}px`)}
     ${({ config }) => config.size.paddingX}px;
   width: 100%;
   flex-direction: row;

package/dist/esm/components/Table/Table.js

@@ -11,7 +11,7 @@ import { Cell } from './Cell';
 export const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
     name: '',
     order: 'none',
-}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters, tableHeight }) => {
+}, pageSize = 20, moreActions = [], onRowClick, labels, paginationCounters, tableHeight, tableWrapperHeight, }) => {
     const resolvedThemeData = resolveThemeWithComponentsConfig({
         theme,
         themeVariant,
@@ -112,7 +112,7 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
         return tableProps.elements;
     }, [pagination, paginatedElements, tableProps.elements]);
     return (React.createElement(ThemeProvider, { theme: resolvedTheme },
-        React.createElement(TableRoot, { theme: resolvedTheme, config: tableConfig, height: tableHeight },
+        React.createElement(TableRoot, { theme: resolvedTheme, config: tableConfig, componentHeight: tableWrapperHeight },
             React.createElement(React.Fragment, null,
                 (filtrable || pagination) && (React.createElement(TableHeader, { theme: resolvedTheme, config: tableConfig, right: pagination && !filtrable },
                     React.createElement(React.Fragment, null,
@@ -126,7 +126,7 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
                                     : elements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters }))),
                         pagination && (React.createElement(HeaderSection, { right: true },
                             React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: labels?.pagination, availableValues: paginationCounters })))))),
-                React.createElement(TableContentWrapper, null,
+                React.createElement(TableContentWrapper, { componentHeight: tableWrapperHeight },
                     React.createElement(TableContent, { theme: resolvedTheme, config: tableConfig, cellPadding: "0", cellSpacing: "0" },
                         React.createElement(TableHead, null,
                             React.createElement(TableHeaderRow, { theme: resolvedTheme, config: tableConfig }, tableProps.headers.map((header) => (React.createElement(HeaderCell, { key: `header_${header.name}`, header: header, sortable: sortable, handleSort: handleHeaderCellClick, sort: tableProps.sort, size: header.size || 'md' }))))),

package/dist/esm/components/Table/Table.styles.js

@@ -3,7 +3,7 @@ export const TableRoot = styled.div `
   display: flex;
   width: 100%;
   flex-direction: column;
-  ${({ height }) => height && `height: ${height};`}
+  ${({ componentHeight }) => componentHeight && `height: ${componentHeight};`}
 `;
 export const TableHeader = styled.div `
   display: flex;
@@ -19,7 +19,7 @@ export const TableContentWrapper = styled.div `
   max-width: 100vw;
   overflow-y: hidden;
   overflow-x: auto;
-  height: 100%;
+  height: ${({ componentHeight }) => componentHeight || '100%'};
   flex-shrink: 0;
 `;
 export const HeaderSection = styled.div `
@@ -27,6 +27,7 @@ export const HeaderSection = styled.div `
   align-items: center;
   justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
   width: 50%;
+  flex-shrink: 0;
 `;
 export const TableContent = styled.table `
   box-sizing: border-box;
@@ -53,6 +54,7 @@ export const TableHead = styled.thead `
     top: 0;
     z-index: 2;
   }
+  flex-shrink: 0;
 `;
 export const TableBody = styled.tbody `
   box-sizing: border-box;

package/dist/types/components/Card/Card.d.ts

@@ -15,6 +15,7 @@ interface ICardProps {
     height?: string;
     options?: IAction[];
     shadow?: boolean;
+    noVerticalPadding?: boolean;
 }
 export declare const Card: FC<ICardProps>;
 export {};

package/dist/types/components/Card/Card.styles.d.ts

@@ -8,6 +8,7 @@ export declare const CardRoot: import("styled-components").StyledComponent<"div"
 interface ICardContentStyles {
     theme?: any;
     config: any;
+    noVerticalPadding?: boolean;
 }
 export declare const CardContent: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ICardContentStyles, never>;
 export {};

package/dist/types/components/Table/Table.d.ts

@@ -18,6 +18,7 @@ interface ITableProps {
     labels?: IFilterLabels;
     paginationCounters?: number[];
     tableHeight?: string;
+    tableWrapperHeight?: string;
 }
 export interface ITableHeaderProps {
     name: string;

package/dist/types/components/Table/Table.styles.d.ts

@@ -3,7 +3,7 @@ import { InputSize } from 'types';
 interface ITableRoot {
     theme: AppTheme;
     config: any;
-    height?: string;
+    componentHeight?: string;
 }
 export declare const TableRoot: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableRoot, never>;
 interface ITableHeaderProps {
@@ -12,7 +12,10 @@ interface ITableHeaderProps {
     right: boolean;
 }
 export declare const TableHeader: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableHeaderProps, never>;
-export declare const TableContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+interface ITableContentWrapperProps {
+    componentHeight?: string;
+}
+export declare const TableContentWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, ITableContentWrapperProps, never>;
 interface IHeaderSectionProps {
     right?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "venice-ui",
-  "version": "3.0.8",
+  "version": "3.0.10",
   "description": "Component library",
   "main": "index.js",
   "module": "./dist/esm/index.js",