@fattureincloud/fic-design-system 0.7.7 → 0.7.8-tmp-scroll-table

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 (21) hide show
  1. package/dist/components/modals/stepModal/types.d.ts +1 -0
  2. package/dist/components/newTable/Table.d.ts +1 -1
  3. package/dist/components/newTable/components/body/Body.d.ts +3 -4
  4. package/dist/components/newTable/components/cell/customActionCell/CustomActionCell.d.ts +3 -1
  5. package/dist/components/newTable/components/cell/customCell/CustomCell.d.ts +1 -1
  6. package/dist/components/newTable/components/cell/hooks/useCellValues.d.ts +1 -0
  7. package/dist/components/newTable/components/cell/loadingCell/LoadingCell.d.ts +2 -1
  8. package/dist/components/newTable/components/cell/styled.d.ts +2 -1
  9. package/dist/components/newTable/components/header/headerCell/styled.d.ts +1 -0
  10. package/dist/components/newTable/components/header/hooks/useHeaderValues.d.ts +1 -0
  11. package/dist/components/newTable/components/row/styled.d.ts +1 -1
  12. package/dist/components/newTable/types.d.ts +4 -0
  13. package/dist/components/pagination/Pagination.d.ts +1 -0
  14. package/dist/components/pagination/types.d.ts +1 -0
  15. package/dist/index.css +128 -0
  16. package/dist/index.esm.css +128 -0
  17. package/dist/index.esm.js +5 -5
  18. package/dist/index.esm.js.map +1 -1
  19. package/dist/index.js +5 -5
  20. package/dist/index.js.map +1 -1
  21. package/package.json +1 -1
package/dist/components/modals/stepModal/types.d.ts CHANGED
@@ -8,6 +8,7 @@ export declare type StepModalCommonProps = {
8
8
  minHeight?: number;
9
9
  setIsOpen: (o: boolean) => void;
10
10
  setStep: (s: number) => void;
11
+ onActionClose?: () => void;
11
12
  };
12
13
  declare type StepModalComponent<T extends UknObj> = React.FunctionComponent<StepModalCommonProps & T>;
13
14
  declare type HasChildren = {
package/dist/components/newTable/Table.d.ts CHANGED
@@ -30,5 +30,5 @@ import { TableProps } from './types';
30
30
  * @param {function} renderEmptyState Render a custom empty state for the table's body
31
31
  * @param {function} onRowClick Callback called after a click on a row, returns the row
32
32
  */
33
- declare const Table: <T>({ data, columns, isSelectable, onRowSelectionChange, favorites, onFavoritesChange, toggles, onTogglesChange, rowSize, headerSize, isFavoritesSortable, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, }: TableProps<T>) => JSX.Element;
33
+ declare const Table: <T>({ data, columns, isSelectable, onRowSelectionChange, favorites, onFavoritesChange, toggles, onTogglesChange, rowSize, headerSize, isFavoritesSortable, isTogglesSortable, sortable, sortDescFirst, enableSettings, settingsDropdownConfig, rowActions, bulkActions, isLoading, allSelectedCTA, noPagination, pageSize: pageLength, listSize, paginationPreviousText, paginationNextText, onPaginationChange, uniqueId, onSort, renderEmptyState, onRowClick, bodyHeight, totalPages, }: TableProps<T>) => JSX.Element;
34
34
  export default Table;
package/dist/components/newTable/components/body/Body.d.ts CHANGED
@@ -1,11 +1,10 @@
1
1
  /// <reference types="react" />
2
2
  import { Row } from '@tanstack/react-table';
3
- import { CellProps } from 'react-table';
4
3
  import { TableProps } from '../../types';
5
- interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize'> {
4
+ interface BodyProps<T> extends Pick<TableProps<T>, 'rowSize' | 'bodyHeight'> {
6
5
  rows: Row<T>[];
7
6
  isLoading?: boolean;
8
- onRowClick?: (row: Row<CellProps | T>) => void;
7
+ onRowClick?: (row: Row<T>) => void;
9
8
  }
10
- declare const Body: <T>({ rows, rowSize, isLoading, onRowClick }: BodyProps<T>) => JSX.Element;
9
+ declare const Body: <T>({ rows, rowSize, isLoading, onRowClick, bodyHeight }: BodyProps<T>) => JSX.Element;
11
10
  export default Body;
package/dist/components/newTable/components/cell/customActionCell/CustomActionCell.d.ts CHANGED
@@ -7,6 +7,8 @@ interface Props<T> extends ActionColumnDef<T> {
7
7
  isFavorite?: boolean;
8
8
  isToggled?: boolean;
9
9
  column: Column<T, unknown>;
10
+ maxWidth?: number;
11
+ minWidth?: number;
10
12
  }
11
- declare const CustomActionCell: <T>({ actionType, row, isFavorite, isToggled, onActionChange, rowActions, column, }: Props<T>) => JSX.Element;
13
+ declare const CustomActionCell: <T>({ actionType, row, isFavorite, isToggled, onActionChange, rowActions, column, maxWidth, minWidth, }: Props<T>) => JSX.Element;
12
14
  export default CustomActionCell;
package/dist/components/newTable/components/cell/customCell/CustomCell.d.ts CHANGED
@@ -8,5 +8,5 @@ declare type Props<CellProps> = {
8
8
  rowSize?: RowSize;
9
9
  onRowClick?: (row: Row<CellProps>) => void;
10
10
  } & CustomCellProps & AccessorColumnDef<CellProps> & ActionColumnDef<CellProps> & AdditionalColumnDef<CellProps>;
11
- declare const CustomCell: <CellProps>({ content, isEditable, tag, unitSymbol, headline, leadingIcon, avatar, actionType, row, rowSize, onActionChange, isFavorite, isToggled, hover, onChange, trailingMicroTag, minWidth, rowActions, context, onRowClick, }: Props<CellProps>) => JSX.Element;
11
+ declare const CustomCell: <CellProps>({ content, isEditable, tag, unitSymbol, headline, leadingIcon, avatar, actionType, row, rowSize, onActionChange, isFavorite, isToggled, hover, onChange, trailingMicroTag, minWidth, rowActions, context, onRowClick, maxWidth, }: Props<CellProps>) => JSX.Element;
12
12
  export default CustomCell;
package/dist/components/newTable/components/cell/hooks/useCellValues.d.ts CHANGED
@@ -10,6 +10,7 @@ interface CellValues<T> {
10
10
  values: CustomCellProps;
11
11
  onActionChange?: (id: string) => void;
12
12
  minWidth?: number;
13
+ maxWidth?: number;
13
14
  rowActions?: RowActions<T>;
14
15
  }
15
16
  declare const useCellValues: <T>(cell: TCell<T, unknown>, row: Row<T>) => CellValues<T>;
package/dist/components/newTable/components/cell/loadingCell/LoadingCell.d.ts CHANGED
@@ -2,6 +2,7 @@
2
2
  interface LoadingCellProps {
3
3
  isActionCell?: boolean;
4
4
  minWidth?: number;
5
+ maxWidth?: number;
5
6
  }
6
- declare const LoadingCell: ({ isActionCell, minWidth }: LoadingCellProps) => JSX.Element;
7
+ declare const LoadingCell: ({ isActionCell, minWidth, maxWidth }: LoadingCellProps) => JSX.Element;
7
8
  export default LoadingCell;
package/dist/components/newTable/components/cell/styled.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- export declare const Td: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
1
+ export declare const Td: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
2
2
  cellHasOnClick: boolean;
3
3
  minWidth?: number | undefined;
4
+ maxWidth?: number | undefined;
4
5
  }, never>;
5
6
  export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
6
7
  export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/dist/components/newTable/components/header/headerCell/styled.d.ts CHANGED
@@ -3,6 +3,7 @@ export declare const TextHeaderCell: import("styled-components").StyledComponent
3
3
  export declare const Th: import("styled-components").StyledComponent<"td", import("styled-components").DefaultTheme, {
4
4
  size?: RowSize | undefined;
5
5
  minWidth?: number | undefined;
6
+ maxWidth?: number | undefined;
6
7
  sortable: boolean;
7
8
  }, never>;
8
9
  export declare const TextHeaderCellWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
package/dist/components/newTable/components/header/hooks/useHeaderValues.d.ts CHANGED
@@ -8,6 +8,7 @@ interface HeaderValues<T> {
8
8
  isSorted: boolean;
9
9
  isSortedDesc: string | null;
10
10
  minWidth?: number;
11
+ maxWidth?: number;
11
12
  tooltip?: TooltipProps;
12
13
  }
13
14
  declare const useHeaderValues: <T>(header: Header<T, unknown>) => HeaderValues<T>;
package/dist/components/newTable/components/row/styled.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { RowSize } from '../../types';
2
- export declare const TRow: import("styled-components").StyledComponent<"tr", import("styled-components").DefaultTheme, {
2
+ export declare const TRow: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {
3
3
  mouseHover?: boolean | undefined;
4
4
  size?: RowSize | undefined;
5
5
  selected?: boolean | undefined;
package/dist/components/newTable/types.d.ts CHANGED
@@ -38,6 +38,8 @@ export interface TableProps<T> {
38
38
  onPaginationChange?: (pagination: PaginationState) => void;
39
39
  renderEmptyState?: () => JSX.Element;
40
40
  onRowClick?: (row: Row<T>) => void;
41
+ bodyHeight?: number;
42
+ totalPages?: number;
41
43
  }
42
44
  interface SettingsDropdownConfig {
43
45
  settingsTooltip?: TooltipProps;
@@ -88,6 +90,7 @@ export declare type ActionColumnDef<T> = {
88
90
  export declare type AdditionalColumnDef<T> = {
89
91
  unitSymbol?: string;
90
92
  minWidth?: number;
93
+ maxWidth?: number;
91
94
  headerTooltip?: TooltipProps;
92
95
  customCell?: (row: Row<T>) => JSX.Element;
93
96
  };
@@ -107,6 +110,7 @@ export declare type ColumnsType<T> = ({
107
110
  interface BaseColumnsType<T> {
108
111
  key: keyof T | Lowercase<keyof typeof ActionType>;
109
112
  customCell?: () => JSX.Element;
113
+ maxWidth?: number;
110
114
  }
111
115
  interface CustomCellWithAvatar extends BasicCustomCell {
112
116
  avatar?: AvatarProps;
package/dist/components/pagination/Pagination.d.ts CHANGED
@@ -10,6 +10,7 @@ import { PaginationProps } from './types';
10
10
  * @param {number} currentPage Used to set the current page number
11
11
  * @param {string} prevText Define previous label text
12
12
  * @param {string} nextText Define next label text
13
+ * @param {number} totalPages Define number of pages
13
14
  */
14
15
  declare const Pagination: (props: PaginationProps) => JSX.Element;
15
16
  export default Pagination;
package/dist/components/pagination/types.d.ts CHANGED
@@ -15,6 +15,7 @@ export declare type PaginationProps = {
15
15
  currentPage: number;
16
16
  prevText: string;
17
17
  nextText: string;
18
+ totalPages?: number;
18
19
  };
19
20
  declare type PaginationNumbersStatus = 'normal' | 'hover' | 'active';
20
21
  declare type PaginationButtonsStatus = 'normal' | 'disabled';
package/dist/index.css ADDED
@@ -0,0 +1,128 @@
1
+ .DS-ReactTable {
2
+ position: relative;
3
+ display: -webkit-box;
4
+ display: -ms-flexbox;
5
+ display: flex;
6
+ -webkit-box-orient: vertical;
7
+ -webkit-box-direction: normal;
8
+ -ms-flex-direction: column;
9
+ flex-direction: column;
10
+ overflow: hidden;
11
+ }
12
+
13
+ .DS-ReactTable .DS-rt-table {
14
+ -webkit-box-flex: 1;
15
+ -ms-flex: 1;
16
+ flex: 1;
17
+ display: -webkit-box;
18
+ display: -ms-flexbox;
19
+ display: flex;
20
+ -webkit-box-orient: vertical;
21
+ -webkit-box-direction: normal;
22
+ -ms-flex-direction: column;
23
+ flex-direction: column;
24
+ -webkit-box-align: stretch;
25
+ -ms-flex-align: stretch;
26
+ align-items: stretch;
27
+ width: 100%;
28
+ border-collapse: collapse;
29
+ overflow-x: auto;
30
+ overflow-y: hidden;
31
+ }
32
+
33
+ .DS-ReactTable .DS-rt-thead {
34
+ -webkit-box-flex: 1;
35
+ -ms-flex: 1 0 auto;
36
+ flex: 1 0 auto;
37
+ display: -webkit-box;
38
+ display: -ms-flexbox;
39
+ display: flex;
40
+ -webkit-box-orient: vertical;
41
+ -webkit-box-direction: normal;
42
+ -ms-flex-direction: column;
43
+ flex-direction: column;
44
+ -webkit-user-select: none;
45
+ -moz-user-select: none;
46
+ -ms-user-select: none;
47
+ user-select: none;
48
+ cursor: default;
49
+ }
50
+
51
+ .DS-ReactTable .DS-rt-thead .DS-rt-th {
52
+ position: relative;
53
+ }
54
+ .DS-ReactTable .DS-rt-thead .DS-rt-td {
55
+ line-height: normal;
56
+ position: relative;
57
+ }
58
+
59
+ .DS-ReactTable .DS-rt-thead .DS-rt-resizable-header:last-child {
60
+ overflow: hidden;
61
+ }
62
+ .DS-ReactTable .DS-rt-thead .DS-rt-resizable-header-content {
63
+ overflow: hidden;
64
+ text-overflow: ellipsis;
65
+ }
66
+
67
+ .DS-ReactTable .DS-rt-thead.DS-header .DS-rt-th:after {
68
+ content: "";
69
+ display: block;
70
+ position: absolute;
71
+ }
72
+
73
+ .DS-ReactTable .DS-rt-tbody {
74
+ display: flex;
75
+ flex-direction: column;
76
+ overflow: auto;
77
+ }
78
+
79
+ .DS-ReactTable .DS-rt-tbody .DS-rt-tr-group {
80
+ flex: none;
81
+ }
82
+
83
+ .DS-ReactTable .DS-rt-tr-group {
84
+ -webkit-box-flex: 1;
85
+ -ms-flex: 1 0 auto;
86
+ flex: 1 0 auto;
87
+ display: -webkit-box;
88
+ display: -ms-flexbox;
89
+ display: flex;
90
+ -webkit-box-orient: vertical;
91
+ -webkit-box-direction: normal;
92
+ -ms-flex-direction: column;
93
+ flex-direction: column;
94
+ -webkit-box-align: stretch;
95
+ -ms-flex-align: stretch;
96
+ align-items: stretch;
97
+ cursor: pointer;
98
+ }
99
+
100
+ .DS-ReactTable .DS-rt-tr {
101
+ flex: 1 0 auto;
102
+ display: inline-flex;
103
+ flex-direction: row;
104
+ flex-wrap: wrap;
105
+ align-content: center;
106
+ justify-content: center;
107
+ align-items: center;
108
+ }
109
+
110
+ .DS-ReactTable .DS-rt-th {
111
+ -webkit-box-flex: 1;
112
+ -ms-flex: 1;
113
+ flex: 1;
114
+ white-space: nowrap;
115
+ vertical-align: middle;
116
+ align-self: center;
117
+ overflow: hidden;
118
+ }
119
+
120
+ .DS-ReactTable .DS-rt-td {
121
+ -webkit-box-flex: 1;
122
+ -ms-flex: 1;
123
+ flex: 1;
124
+ white-space: nowrap;
125
+ text-overflow: ellipsis;
126
+ align-self: center;
127
+ overflow: hidden;
128
+ }
package/dist/index.esm.css ADDED
@@ -0,0 +1,128 @@
1
+ .DS-ReactTable {
2
+ position: relative;
3
+ display: -webkit-box;
4
+ display: -ms-flexbox;
5
+ display: flex;
6
+ -webkit-box-orient: vertical;
7
+ -webkit-box-direction: normal;
8
+ -ms-flex-direction: column;
9
+ flex-direction: column;
10
+ overflow: hidden;
11
+ }
12
+
13
+ .DS-ReactTable .DS-rt-table {
14
+ -webkit-box-flex: 1;
15
+ -ms-flex: 1;
16
+ flex: 1;
17
+ display: -webkit-box;
18
+ display: -ms-flexbox;
19
+ display: flex;
20
+ -webkit-box-orient: vertical;
21
+ -webkit-box-direction: normal;
22
+ -ms-flex-direction: column;
23
+ flex-direction: column;
24
+ -webkit-box-align: stretch;
25
+ -ms-flex-align: stretch;
26
+ align-items: stretch;
27
+ width: 100%;
28
+ border-collapse: collapse;
29
+ overflow-x: auto;
30
+ overflow-y: hidden;
31
+ }
32
+
33
+ .DS-ReactTable .DS-rt-thead {
34
+ -webkit-box-flex: 1;
35
+ -ms-flex: 1 0 auto;
36
+ flex: 1 0 auto;
37
+ display: -webkit-box;
38
+ display: -ms-flexbox;
39
+ display: flex;
40
+ -webkit-box-orient: vertical;
41
+ -webkit-box-direction: normal;
42
+ -ms-flex-direction: column;
43
+ flex-direction: column;
44
+ -webkit-user-select: none;
45
+ -moz-user-select: none;
46
+ -ms-user-select: none;
47
+ user-select: none;
48
+ cursor: default;
49
+ }
50
+
51
+ .DS-ReactTable .DS-rt-thead .DS-rt-th {
52
+ position: relative;
53
+ }
54
+ .DS-ReactTable .DS-rt-thead .DS-rt-td {
55
+ line-height: normal;
56
+ position: relative;
57
+ }
58
+
59
+ .DS-ReactTable .DS-rt-thead .DS-rt-resizable-header:last-child {
60
+ overflow: hidden;
61
+ }
62
+ .DS-ReactTable .DS-rt-thead .DS-rt-resizable-header-content {
63
+ overflow: hidden;
64
+ text-overflow: ellipsis;
65
+ }
66
+
67
+ .DS-ReactTable .DS-rt-thead.DS-header .DS-rt-th:after {
68
+ content: "";
69
+ display: block;
70
+ position: absolute;
71
+ }
72
+
73
+ .DS-ReactTable .DS-rt-tbody {
74
+ display: flex;
75
+ flex-direction: column;
76
+ overflow: auto;
77
+ }
78
+
79
+ .DS-ReactTable .DS-rt-tbody .DS-rt-tr-group {
80
+ flex: none;
81
+ }
82
+
83
+ .DS-ReactTable .DS-rt-tr-group {
84
+ -webkit-box-flex: 1;
85
+ -ms-flex: 1 0 auto;
86
+ flex: 1 0 auto;
87
+ display: -webkit-box;
88
+ display: -ms-flexbox;
89
+ display: flex;
90
+ -webkit-box-orient: vertical;
91
+ -webkit-box-direction: normal;
92
+ -ms-flex-direction: column;
93
+ flex-direction: column;
94
+ -webkit-box-align: stretch;
95
+ -ms-flex-align: stretch;
96
+ align-items: stretch;
97
+ cursor: pointer;
98
+ }
99
+
100
+ .DS-ReactTable .DS-rt-tr {
101
+ flex: 1 0 auto;
102
+ display: inline-flex;
103
+ flex-direction: row;
104
+ flex-wrap: wrap;
105
+ align-content: center;
106
+ justify-content: center;
107
+ align-items: center;
108
+ }
109
+
110
+ .DS-ReactTable .DS-rt-th {
111
+ -webkit-box-flex: 1;
112
+ -ms-flex: 1;
113
+ flex: 1;
114
+ white-space: nowrap;
115
+ vertical-align: middle;
116
+ align-self: center;
117
+ overflow: hidden;
118
+ }
119
+
120
+ .DS-ReactTable .DS-rt-td {
121
+ -webkit-box-flex: 1;
122
+ -ms-flex: 1;
123
+ flex: 1;
124
+ white-space: nowrap;
125
+ text-overflow: ellipsis;
126
+ align-self: center;
127
+ overflow: hidden;
128
+ }