@fattureincloud/fic-design-system 0.10.1 → 0.10.2-tmp

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 (25) hide show
  1. package/dist/assets/index-7ee742e8.css +154 -0
  2. package/dist/assets/index-9fc4893a.css +155 -0
  3. package/dist/assets/index.esm-bff8cd71.css +155 -0
  4. package/dist/assets/index.esm-c9d742c9.css +154 -0
  5. package/dist/components/dropdown/DropdownImpl.d.ts +1 -1
  6. package/dist/components/dropdown/dropdown.stories.d.ts +1 -0
  7. package/dist/components/dropdown/styled.d.ts +4 -0
  8. package/dist/components/dropdown/types.d.ts +2 -0
  9. package/dist/components/newTable/Table.d.ts +3 -1
  10. package/dist/components/newTable/components/body/Body.d.ts +3 -2
  11. package/dist/components/newTable/components/cell/Cell.d.ts +3 -1
  12. package/dist/components/newTable/components/cell/customCell/CustomCell.d.ts +3 -1
  13. package/dist/components/newTable/components/cell/styled.d.ts +2 -0
  14. package/dist/components/newTable/components/header/Header.d.ts +3 -1
  15. package/dist/components/newTable/components/header/headerCell/HeaderCell.d.ts +3 -1
  16. package/dist/components/newTable/components/header/headerCell/styled.d.ts +3 -0
  17. package/dist/components/newTable/components/row/Row.d.ts +3 -1
  18. package/dist/components/newTable/styled.d.ts +1 -0
  19. package/dist/components/newTable/types.d.ts +2 -1
  20. package/dist/index.css +154 -0
  21. package/dist/index.esm.js +8 -8
  22. package/dist/index.esm.js.map +1 -1
  23. package/dist/index.js +9 -9
  24. package/dist/index.js.map +1 -1
  25. package/package.json +1 -1
package/dist/components/newTable/components/cell/customCell/CustomCell.d.ts CHANGED
@@ -8,6 +8,8 @@ declare type Props<CellProps> = {
8
8
  rowSize?: RowSize;
9
9
  actionColumnWidth: number;
10
10
  onRowClick?: (row: Row<CellProps>) => void;
11
+ fixedWidthCells: boolean;
12
+ columnsBreakpointWidth: string;
11
13
  } & CustomCellProps & AccessorColumnDef<CellProps> & ActionColumnDef<CellProps> & AdditionalColumnDef<CellProps>;
12
- declare const CustomCell: <CellProps>({ content, isEditable, tag, unitSymbol, headline, leadingIcon, avatar, actionType, row, rowSize, onActionChange, isToggled, hover, onChange, trailingMicroTag, minWidth, rowActions, context, onRowClick, maxWidth, align, disableClick, actionColumnWidth, }: Props<CellProps>) => JSX.Element;
14
+ declare const CustomCell: <CellProps>({ content, isEditable, tag, unitSymbol, headline, leadingIcon, avatar, actionType, row, rowSize, onActionChange, isToggled, hover, onChange, trailingMicroTag, minWidth, rowActions, context, onRowClick, maxWidth, align, disableClick, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: Props<CellProps>) => JSX.Element;
13
15
  export default CustomCell;
package/dist/components/newTable/components/cell/styled.d.ts CHANGED
@@ -3,6 +3,8 @@ export declare const Td: import("styled-components").StyledComponent<"div", impo
3
3
  minWidth?: number | undefined;
4
4
  maxWidth?: number | undefined;
5
5
  align?: "center" | "left" | "right" | undefined;
6
+ fixedWidthCells: boolean;
7
+ columnsBreakpointWidth: string;
6
8
  }, never>;
7
9
  export declare const Wrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
8
10
  export declare const LeadingIconContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/dist/components/newTable/components/header/Header.d.ts CHANGED
@@ -17,6 +17,8 @@ interface HeaderProps<T> {
17
17
  onChangeTableSettings?: onChangeTableSettings;
18
18
  isLoading: boolean;
19
19
  actionColumnWidth: number;
20
+ fixedWidthCells: boolean;
21
+ columnsBreakpointWidth: string;
20
22
  }
21
- declare const Header: <T>({ headerGroup, headerSize, onSort, forceHideSettings, rowSelection, setRowSelection, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, isLoading, actionColumnWidth, }: HeaderProps<T>) => JSX.Element;
23
+ declare const Header: <T>({ headerGroup, headerSize, onSort, forceHideSettings, rowSelection, setRowSelection, preSettedTableSettings, onChangeTableSettings, notRemovableColumns, isLoading, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: HeaderProps<T>) => JSX.Element;
22
24
  export default Header;
package/dist/components/newTable/components/header/headerCell/HeaderCell.d.ts CHANGED
@@ -15,6 +15,8 @@ interface HeaderCellProps<T> {
15
15
  onChangeTableSettings?: onChangeTableSettings;
16
16
  isLoading: boolean;
17
17
  actionColumnWidth: number;
18
+ fixedWidthCells: boolean;
19
+ columnsBreakpointWidth: string;
18
20
  }
19
- declare const HeaderCell: <T>({ header, headerSize, onSort, customSorted, setCustomSorted, forceHideSettings, rowSelection, setRowSelection, notRemovableColumns, dimensionRow, onChangeTableSettings, isLoading, actionColumnWidth, }: HeaderCellProps<T>) => JSX.Element;
21
+ declare const HeaderCell: <T>({ header, headerSize, onSort, customSorted, setCustomSorted, forceHideSettings, rowSelection, setRowSelection, notRemovableColumns, dimensionRow, onChangeTableSettings, isLoading, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: HeaderCellProps<T>) => JSX.Element;
20
22
  export default HeaderCell;
package/dist/components/newTable/components/header/headerCell/styled.d.ts CHANGED
@@ -6,6 +6,9 @@ export declare const Th: import("styled-components").StyledComponent<"div", impo
6
6
  maxWidth?: number | undefined;
7
7
  sortable: boolean;
8
8
  isActionColumn: boolean;
9
+ isCheckboxColumn: boolean;
10
+ fixedWidthCells: boolean;
11
+ columnsBreakpointWidth: string;
9
12
  }, never>;
10
13
  export declare const TextHeaderCellWrapper: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, {}, never>;
11
14
  export declare const ActionCell: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/dist/components/newTable/components/row/Row.d.ts CHANGED
@@ -9,6 +9,8 @@ interface TrProps<T> extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLTa
9
9
  isRowHighlighted: boolean;
10
10
  rowHighlightColor?: TableProps<T>['rowHighlightColor'];
11
11
  actionColumnWidth: number;
12
+ fixedWidthCells: boolean;
13
+ columnsBreakpointWidth: string;
12
14
  }
13
- declare const Tr: <T>({ row, isLoading, onRowClick, isRowHighlighted, rowHighlightColor, defaultRowSize, actionColumnWidth, }: TrProps<T>) => JSX.Element;
15
+ declare const Tr: <T>({ row, isLoading, onRowClick, isRowHighlighted, rowHighlightColor, defaultRowSize, actionColumnWidth, fixedWidthCells, columnsBreakpointWidth, }: TrProps<T>) => JSX.Element;
14
16
  export default Tr;
package/dist/components/newTable/styled.d.ts CHANGED
@@ -4,3 +4,4 @@ export declare const ScrollableContent: import("styled-components").StyledCompon
4
4
  export declare const TableWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
5
5
  export declare const SortIndicator: import("styled-components").StyledComponent<({ onClick, isDisabled, ...props }: import("../icon").IconProps) => JSX.Element, import("styled-components").DefaultTheme, {}, never>;
6
6
  export declare const PaginationContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
7
+ export declare const HeaderBodyWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
package/dist/components/newTable/types.d.ts CHANGED
@@ -52,8 +52,9 @@ export interface TableProps<T> {
52
52
  notRemovableColumns?: string[];
53
53
  onChangeTableSettings?: onChangeTableSettings;
54
54
  actionColumnWidth?: number;
55
- disableScrollX?: boolean;
56
55
  resetPageIndex?: boolean;
56
+ columnsBreakpointWidth?: string;
57
+ tableBreakpoint?: number;
57
58
  }
58
59
  export declare type onChangeTableSettings = (key: keyof PreSettedTableSettings, valueChange: Pick<PreSettedTableSettings, 'orderColumns' | 'dimensionRow' | 'notVisibleColumns'>) => void;
59
60
  export interface PreSettedTableSettings {
package/dist/index.css ADDED
@@ -0,0 +1,154 @@
1
+ :root {
2
+ --columns-breakpoint-width: 100px; /* default value */
3
+ --table-breakpoint: px100; /* relates to TableBreakpoints enum */
4
+ }
5
+
6
+ .Table-container {
7
+ container-type: inline-size;
8
+ container-name: var(--table-breakpoint);
9
+ }
10
+
11
+ /* width breakpoints corresponds to TableBreakpoints enum */
12
+ @container px100 (width < 100px) {
13
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
14
+ min-width: var(--columns-breakpoint-width);
15
+ max-width: var(--columns-breakpoint-width);
16
+ }
17
+
18
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
19
+ min-width: var(--columns-breakpoint-width);
20
+ max-width: var(--columns-breakpoint-width);
21
+ }
22
+ }
23
+
24
+ @container px200 (width < 200px) {
25
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
26
+ min-width: var(--columns-breakpoint-width);
27
+ max-width: var(--columns-breakpoint-width);
28
+ }
29
+
30
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
31
+ min-width: var(--columns-breakpoint-width);
32
+ max-width: var(--columns-breakpoint-width);
33
+ }
34
+ }
35
+
36
+ @container px300 (width < 300px) {
37
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
38
+ min-width: var(--columns-breakpoint-width);
39
+ max-width: var(--columns-breakpoint-width);
40
+ }
41
+
42
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
43
+ min-width: var(--columns-breakpoint-width);
44
+ max-width: var(--columns-breakpoint-width);
45
+ }
46
+ }
47
+
48
+ @container px400 (width < 400px) {
49
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
50
+ min-width: var(--columns-breakpoint-width);
51
+ max-width: var(--columns-breakpoint-width);
52
+ }
53
+
54
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
55
+ min-width: var(--columns-breakpoint-width);
56
+ max-width: var(--columns-breakpoint-width);
57
+ }
58
+ }
59
+
60
+ @container px500 (width < 500px) {
61
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
62
+ min-width: var(--columns-breakpoint-width);
63
+ max-width: var(--columns-breakpoint-width);
64
+ }
65
+
66
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
67
+ min-width: var(--columns-breakpoint-width);
68
+ max-width: var(--columns-breakpoint-width);
69
+ }
70
+ }
71
+
72
+ @container px600 (width < 600px) {
73
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
74
+ min-width: var(--columns-breakpoint-width);
75
+ max-width: var(--columns-breakpoint-width);
76
+ }
77
+
78
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
79
+ min-width: var(--columns-breakpoint-width);
80
+ max-width: var(--columns-breakpoint-width);
81
+ }
82
+ }
83
+
84
+ @container px700 (width < 700px) {
85
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
86
+ min-width: var(--columns-breakpoint-width);
87
+ max-width: var(--columns-breakpoint-width);
88
+ }
89
+
90
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
91
+ min-width: var(--columns-breakpoint-width);
92
+ max-width: var(--columns-breakpoint-width);
93
+ }
94
+ }
95
+
96
+ @container px800 (width < 800px) {
97
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
98
+ min-width: var(--columns-breakpoint-width);
99
+ max-width: var(--columns-breakpoint-width);
100
+ }
101
+
102
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
103
+ min-width: var(--columns-breakpoint-width);
104
+ max-width: var(--columns-breakpoint-width);
105
+ }
106
+ }
107
+
108
+ @container px900 (width < 900px) {
109
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
110
+ min-width: var(--columns-breakpoint-width);
111
+ max-width: var(--columns-breakpoint-width);
112
+ }
113
+
114
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
115
+ min-width: var(--columns-breakpoint-width);
116
+ max-width: var(--columns-breakpoint-width);
117
+ }
118
+ }
119
+
120
+ @container px1000 (width < 1000px) {
121
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
122
+ min-width: var(--columns-breakpoint-width);
123
+ max-width: var(--columns-breakpoint-width);
124
+ }
125
+
126
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
127
+ min-width: var(--columns-breakpoint-width);
128
+ max-width: var(--columns-breakpoint-width);
129
+ }
130
+ }
131
+
132
+ @container px1100 (width < 1100px) {
133
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
134
+ min-width: var(--columns-breakpoint-width);
135
+ max-width: var(--columns-breakpoint-width);
136
+ }
137
+
138
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
139
+ min-width: var(--columns-breakpoint-width);
140
+ max-width: var(--columns-breakpoint-width);
141
+ }
142
+ }
143
+
144
+ @container px1200 (width < 1200px) {
145
+ .DS-rt-th:not(.DS-header-tour-checkbox, .DS-header-row-actions) {
146
+ min-width: var(--columns-breakpoint-width);
147
+ max-width: var(--columns-breakpoint-width);
148
+ }
149
+
150
+ .DS-rt-td:not(.DS-tour-checkbox, .DS-row-actions) {
151
+ min-width: var(--columns-breakpoint-width);
152
+ max-width: var(--columns-breakpoint-width);
153
+ }
154
+ }