venice-ui 3.0.52 → 3.0.54

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/dist/cjs/components/ComponentRoot/ComponentRoot.styles.js +1 -0
  2. package/dist/cjs/components/Table/Table.js +2 -1
  3. package/dist/cjs/components/Table/Table.styles.js +2 -2
  4. package/dist/cjs/components/Toggle/Toggle.js +1 -1
  5. package/dist/cjs/components/Toggle/Toggle.styles.js +2 -2
  6. package/dist/cjs/config/config.js +12 -6
  7. package/dist/esm/components/ComponentRoot/ComponentRoot.styles.js +1 -0
  8. package/dist/esm/components/Table/Table.js +2 -1
  9. package/dist/esm/components/Table/Table.styles.js +2 -2
  10. package/dist/esm/components/Toggle/Toggle.js +1 -1
  11. package/dist/esm/components/Toggle/Toggle.styles.js +2 -2
  12. package/dist/esm/config/config.js +12 -6
  13. package/dist/types/components/Table/Table.d.ts +2 -1
  14. package/dist/types/config/config.d.ts +36 -18
  15. package/package.json +1 -1
package/dist/cjs/components/ComponentRoot/ComponentRoot.styles.js CHANGED
@@ -10,6 +10,7 @@ exports.ComponentWrapper = styled_components_1.default.div `
10
10
  flex-direction: row;
11
11
  gap: 4px;
12
12
  align-items: center;
13
+ box-sizing: border-box;
13
14
  overflow: hidden;
14
15
  width: ${({ width, labelInversed }) => width ? width : labelInversed ? 'auto' : '100%'};
15
16
  height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].height}px;
package/dist/cjs/components/Table/Table.js CHANGED
@@ -47,7 +47,7 @@ const Cell_1 = require("./Cell");
47
47
  const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
48
48
  name: '',
49
49
  order: 'none',
50
- }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
50
+ }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, headerExtraContent, }) => {
51
51
  const resolvedThemeData = (0, config_1.resolveThemeWithComponentsConfig)({
52
52
  theme,
53
53
  themeVariant,
@@ -124,6 +124,7 @@ const Table = ({ theme, themeVariant = 'default', headers, elements, hover = tru
124
124
  react_1.default.createElement(react_1.default.Fragment, null,
125
125
  filtrable && (react_1.default.createElement(Table_styles_1.HeaderSection, null,
126
126
  react_1.default.createElement(Filters_1.Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
127
+ headerExtraContent && (react_1.default.createElement(Table_styles_1.HeaderSection, null, headerExtraContent)),
127
128
  pagination && (react_1.default.createElement(Table_styles_1.HeaderSection, { right: true },
128
129
  react_1.default.createElement(Pagination_1.Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
129
130
  react_1.default.createElement(Table_styles_1.TableContentWrapper, { componentHeight: tableHeight },
package/dist/cjs/components/Table/Table.styles.js CHANGED
@@ -15,7 +15,8 @@ exports.TableHeader = styled_components_1.default.div `
15
15
  display: flex;
16
16
  align-items: center;
17
17
  flex-shrink: 0;
18
- justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
18
+ // justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
19
+ justify-content: space-between;
19
20
  height: ${({ theme, config }) => config.size.header.height}px;
20
21
  `;
21
22
  exports.TableContentWrapper = styled_components_1.default.div `
@@ -33,7 +34,6 @@ exports.HeaderSection = styled_components_1.default.div `
33
34
  display: flex;
34
35
  align-items: center;
35
36
  justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
36
- width: 50%;
37
37
  flex-shrink: 0;
38
38
  `;
39
39
  exports.TableContent = styled_components_1.default.table `
package/dist/cjs/components/Toggle/Toggle.js CHANGED
@@ -23,7 +23,7 @@ const Toggle = ({ name, value = true, size = 'md', label, labelPosition = 'top',
23
23
  };
24
24
  return (react_1.default.createElement(ComponentRoot_1.ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${toggleConfig.size[size].width}px` },
25
25
  react_1.default.createElement(Toggle_styles_1.ToggleRoot, { onClick: onClick, isDisabled: isDisabled },
26
- react_1.default.createElement(Toggle_styles_1.ToggleTrack, { size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
26
+ react_1.default.createElement(Toggle_styles_1.ToggleTrack, { id: 'dupa', size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
27
27
  react_1.default.createElement(Toggle_styles_1.TrackThumb, { size: size, theme: resolvedTheme, config: toggleConfig, isActive: value, isDisabled: isDisabled })))));
28
28
  };
29
29
  exports.Toggle = Toggle;
package/dist/cjs/components/Toggle/Toggle.styles.js CHANGED
@@ -8,8 +8,8 @@ const styled_components_1 = __importDefault(require("styled-components"));
8
8
  exports.ToggleTrack = styled_components_1.default.div `
9
9
  display: inline-block;
10
10
  box-sizing: content-box;
11
- width: ${({ theme, config, size }) => config.size[size].width}px;
12
- height: ${({ theme, config, size }) => config.size[size].height}px;
11
+ width: ${({ theme, config, size }) => config.size[size].elementWidth}px;
12
+ height: ${({ theme, config, size }) => config.size[size].elementHeight}px;
13
13
  box-shadow: ${({ theme, config }) => config.shadow.track};
14
14
  position: relative;
15
15
  overflow: hidden;
package/dist/cjs/config/config.js CHANGED
@@ -662,22 +662,28 @@ const createComponentsConfig = (theme = 'default') => {
662
662
  toggle: {
663
663
  size: {
664
664
  sm: {
665
- width: exports.measurements.space.xl4,
666
- height: exports.measurements.size.layout.toggle.sm,
665
+ width: exports.measurements.space.xl4 + 2,
666
+ height: exports.measurements.size.layout.toggle.sm + 2,
667
+ elementWidth: exports.measurements.space.xl4,
668
+ elementHeight: exports.measurements.size.layout.toggle.sm,
667
669
  radius: exports.measurements.size.layout.toggle.sm,
668
670
  sizeThumb: exports.measurements.size.layout.toggleThumb.sm,
669
671
  activePosition: exports.measurements.size.layout.toggleThumbPosition.sm,
670
672
  },
671
673
  md: {
672
- width: exports.measurements.space.xl5,
673
- height: exports.measurements.size.layout.toggle.md,
674
+ width: exports.measurements.space.xl5 + 2,
675
+ height: exports.measurements.size.layout.toggle.md + 2,
676
+ elementWidth: exports.measurements.space.xl5,
677
+ elementHeight: exports.measurements.size.layout.toggle.md,
674
678
  radius: exports.measurements.size.layout.toggle.md,
675
679
  sizeThumb: exports.measurements.size.layout.toggleThumb.md,
676
680
  activePosition: exports.measurements.size.layout.toggleThumbPosition.md,
677
681
  },
678
682
  lg: {
679
- width: exports.measurements.space.xl6,
680
- height: exports.measurements.size.layout.toggle.lg,
683
+ width: exports.measurements.space.xl6 + 2,
684
+ height: exports.measurements.size.layout.toggle.lg + 2,
685
+ elementWidth: exports.measurements.space.xl6,
686
+ elementHeight: exports.measurements.size.layout.toggle.lg,
681
687
  radius: exports.measurements.size.layout.toggle.lg,
682
688
  sizeThumb: exports.measurements.size.layout.toggleThumb.lg,
683
689
  activePosition: exports.measurements.size.layout.toggleThumbPosition.lg,
package/dist/esm/components/ComponentRoot/ComponentRoot.styles.js CHANGED
@@ -4,6 +4,7 @@ export const ComponentWrapper = styled.div `
4
4
  flex-direction: row;
5
5
  gap: 4px;
6
6
  align-items: center;
7
+ box-sizing: border-box;
7
8
  overflow: hidden;
8
9
  width: ${({ width, labelInversed }) => width ? width : labelInversed ? 'auto' : '100%'};
9
10
  height: ${({ inputConfig, inputSize }) => inputConfig.size[inputSize].height}px;
package/dist/esm/components/Table/Table.js CHANGED
@@ -11,7 +11,7 @@ import { Cell } from './Cell';
11
11
  export const Table = ({ theme, themeVariant = 'default', headers, elements, hover = true, selectable = true, filtrable = false, pagination = false, sortable = true, sort = {
12
12
  name: '',
13
13
  order: 'none',
14
- }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, }) => {
14
+ }, pageSize = 20, moreActions = [], onRowClick, filterLabels, paginationCounters, tableHeight, tableWrapperHeight, paginationLabel, calendarLabels, calendarLocaleLabels, paginationZIndex, headerExtraContent, }) => {
15
15
  const resolvedThemeData = resolveThemeWithComponentsConfig({
16
16
  theme,
17
17
  themeVariant,
@@ -88,6 +88,7 @@ export const Table = ({ theme, themeVariant = 'default', headers, elements, hove
88
88
  React.createElement(React.Fragment, null,
89
89
  filtrable && (React.createElement(HeaderSection, null,
90
90
  React.createElement(Filters, { labels: filterLabels, headers: headers, elements: fullElements, fullElements: fullElements, handleSubmitFilters: handleApplyFilters, externalClearSignal: filtersClearSignal, onClear: handleClearFilters, calendarLabels: calendarLabels, calendarLocaleLabels: calendarLocaleLabels }))),
91
+ headerExtraContent && (React.createElement(HeaderSection, null, headerExtraContent)),
91
92
  pagination && (React.createElement(HeaderSection, { right: true },
92
93
  React.createElement(Pagination, { currentPage: currentPage, totalPages: totalPages, pageSize: currentPageSize, onPageChange: setCurrentPage, onPageSizeChange: setCurrentPageSize, label: paginationLabel?.label, availableValues: paginationCounters, zIndex: paginationZIndex })))))),
93
94
  React.createElement(TableContentWrapper, { componentHeight: tableHeight },
package/dist/esm/components/Table/Table.styles.js CHANGED
@@ -9,7 +9,8 @@ export const TableHeader = styled.div `
9
9
  display: flex;
10
10
  align-items: center;
11
11
  flex-shrink: 0;
12
- justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
12
+ // justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
13
+ justify-content: space-between;
13
14
  height: ${({ theme, config }) => config.size.header.height}px;
14
15
  `;
15
16
  export const TableContentWrapper = styled.div `
@@ -27,7 +28,6 @@ export const HeaderSection = styled.div `
27
28
  display: flex;
28
29
  align-items: center;
29
30
  justify-content: ${({ right }) => (right ? 'flex-end' : 'flex-start')};
30
- width: 50%;
31
31
  flex-shrink: 0;
32
32
  `;
33
33
  export const TableContent = styled.table `
package/dist/esm/components/Toggle/Toggle.js CHANGED
@@ -17,6 +17,6 @@ export const Toggle = ({ name, value = true, size = 'md', label, labelPosition =
17
17
  };
18
18
  return (React.createElement(ComponentRoot, { labelPosition: labelPosition, size: size, width: width, disabled: isDisabled, error: error, readOnly: false, required: required, optional: optional, optionalLabel: optionalLabel, helperText: helperText, themeVariant: themeVariant, theme: resolvedTheme, componentConfig: toggleConfig, label: label, isActive: value, labelInversed: labelInversed, smallSize: true, componentWidth: componentWidth ? componentWidth : `${toggleConfig.size[size].width}px` },
19
19
  React.createElement(ToggleRoot, { onClick: onClick, isDisabled: isDisabled },
20
- React.createElement(ToggleTrack, { size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
20
+ React.createElement(ToggleTrack, { id: 'dupa', size: size, theme: resolvedTheme, config: toggleConfig, isDisabled: isDisabled, isActive: value },
21
21
  React.createElement(TrackThumb, { size: size, theme: resolvedTheme, config: toggleConfig, isActive: value, isDisabled: isDisabled })))));
22
22
  };
package/dist/esm/components/Toggle/Toggle.styles.js CHANGED
@@ -2,8 +2,8 @@ import styled from 'styled-components';
2
2
  export const ToggleTrack = styled.div `
3
3
  display: inline-block;
4
4
  box-sizing: content-box;
5
- width: ${({ theme, config, size }) => config.size[size].width}px;
6
- height: ${({ theme, config, size }) => config.size[size].height}px;
5
+ width: ${({ theme, config, size }) => config.size[size].elementWidth}px;
6
+ height: ${({ theme, config, size }) => config.size[size].elementHeight}px;
7
7
  box-shadow: ${({ theme, config }) => config.shadow.track};
8
8
  position: relative;
9
9
  overflow: hidden;
package/dist/esm/config/config.js CHANGED
@@ -657,22 +657,28 @@ export const createComponentsConfig = (theme = 'default') => {
657
657
  toggle: {
658
658
  size: {
659
659
  sm: {
660
- width: measurements.space.xl4,
661
- height: measurements.size.layout.toggle.sm,
660
+ width: measurements.space.xl4 + 2,
661
+ height: measurements.size.layout.toggle.sm + 2,
662
+ elementWidth: measurements.space.xl4,
663
+ elementHeight: measurements.size.layout.toggle.sm,
662
664
  radius: measurements.size.layout.toggle.sm,
663
665
  sizeThumb: measurements.size.layout.toggleThumb.sm,
664
666
  activePosition: measurements.size.layout.toggleThumbPosition.sm,
665
667
  },
666
668
  md: {
667
- width: measurements.space.xl5,
668
- height: measurements.size.layout.toggle.md,
669
+ width: measurements.space.xl5 + 2,
670
+ height: measurements.size.layout.toggle.md + 2,
671
+ elementWidth: measurements.space.xl5,
672
+ elementHeight: measurements.size.layout.toggle.md,
669
673
  radius: measurements.size.layout.toggle.md,
670
674
  sizeThumb: measurements.size.layout.toggleThumb.md,
671
675
  activePosition: measurements.size.layout.toggleThumbPosition.md,
672
676
  },
673
677
  lg: {
674
- width: measurements.space.xl6,
675
- height: measurements.size.layout.toggle.lg,
678
+ width: measurements.space.xl6 + 2,
679
+ height: measurements.size.layout.toggle.lg + 2,
680
+ elementWidth: measurements.space.xl6,
681
+ elementHeight: measurements.size.layout.toggle.lg,
676
682
  radius: measurements.size.layout.toggle.lg,
677
683
  sizeThumb: measurements.size.layout.toggleThumb.lg,
678
684
  activePosition: measurements.size.layout.toggleThumbPosition.lg,
package/dist/types/components/Table/Table.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { AppTheme, ThemeName } from '../../config';
2
- import { FC } from 'react';
2
+ import React, { FC } from 'react';
3
3
  import { FilterType, IAction, ICalendarLocaleLabels, IFilterLabels, InputSize } from 'types';
4
4
  interface ITableProps {
5
5
  theme?: AppTheme;
@@ -23,6 +23,7 @@ interface ITableProps {
23
23
  calendarLabels?: IFilterLabels;
24
24
  calendarLocaleLabels?: ICalendarLocaleLabels;
25
25
  paginationZIndex?: number;
26
+ headerExtraContent?: React.ReactNode;
26
27
  }
27
28
  export interface ITableHeaderProps {
28
29
  name: string;
package/dist/types/config/config.d.ts CHANGED
@@ -665,22 +665,28 @@ export declare const createComponentsConfig: (theme?: ThemeName | AppTheme) => {
665
665
  toggle: {
666
666
  size: {
667
667
  sm: {
668
- width: 32;
669
- height: 18;
668
+ width: number;
669
+ height: number;
670
+ elementWidth: 32;
671
+ elementHeight: 18;
670
672
  radius: 18;
671
673
  sizeThumb: 16;
672
674
  activePosition: 14;
673
675
  };
674
676
  md: {
675
- width: 40;
676
- height: 22;
677
+ width: number;
678
+ height: number;
679
+ elementWidth: 40;
680
+ elementHeight: 22;
677
681
  radius: 22;
678
682
  sizeThumb: 20;
679
683
  activePosition: 18;
680
684
  };
681
685
  lg: {
682
- width: 48;
683
- height: 26;
686
+ width: number;
687
+ height: number;
688
+ elementWidth: 48;
689
+ elementHeight: 26;
684
690
  radius: 26;
685
691
  sizeThumb: 24;
686
692
  activePosition: 22;
@@ -2004,22 +2010,28 @@ export declare const componentsConfig: {
2004
2010
  toggle: {
2005
2011
  size: {
2006
2012
  sm: {
2007
- width: 32;
2008
- height: 18;
2013
+ width: number;
2014
+ height: number;
2015
+ elementWidth: 32;
2016
+ elementHeight: 18;
2009
2017
  radius: 18;
2010
2018
  sizeThumb: 16;
2011
2019
  activePosition: 14;
2012
2020
  };
2013
2021
  md: {
2014
- width: 40;
2015
- height: 22;
2022
+ width: number;
2023
+ height: number;
2024
+ elementWidth: 40;
2025
+ elementHeight: 22;
2016
2026
  radius: 22;
2017
2027
  sizeThumb: 20;
2018
2028
  activePosition: 18;
2019
2029
  };
2020
2030
  lg: {
2021
- width: 48;
2022
- height: 26;
2031
+ width: number;
2032
+ height: number;
2033
+ elementWidth: 48;
2034
+ elementHeight: 26;
2023
2035
  radius: 26;
2024
2036
  sizeThumb: 24;
2025
2037
  activePosition: 22;
@@ -3488,22 +3500,28 @@ export declare const createConfig: (theme?: ThemeName | AppTheme) => {
3488
3500
  toggle: {
3489
3501
  size: {
3490
3502
  sm: {
3491
- width: 32;
3492
- height: 18;
3503
+ width: number;
3504
+ height: number;
3505
+ elementWidth: 32;
3506
+ elementHeight: 18;
3493
3507
  radius: 18;
3494
3508
  sizeThumb: 16;
3495
3509
  activePosition: 14;
3496
3510
  };
3497
3511
  md: {
3498
- width: 40;
3499
- height: 22;
3512
+ width: number;
3513
+ height: number;
3514
+ elementWidth: 40;
3515
+ elementHeight: 22;
3500
3516
  radius: 22;
3501
3517
  sizeThumb: 20;
3502
3518
  activePosition: 18;
3503
3519
  };
3504
3520
  lg: {
3505
- width: 48;
3506
- height: 26;
3521
+ width: number;
3522
+ height: number;
3523
+ elementWidth: 48;
3524
+ elementHeight: 26;
3507
3525
  radius: 26;
3508
3526
  sizeThumb: 24;
3509
3527
  activePosition: 22;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "venice-ui",
3
- "version": "3.0.52",
3
+ "version": "3.0.54",
4
4
  "description": "Component library",
5
5
  "main": "index.js",
6
6
  "module": "./dist/esm/index.js",