@centreon/ui 25.5.8 → 25.6.1

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 (36) hide show
  1. package/package.json +15 -6
  2. package/src/Dashboard/Dashboard.styles.ts +1 -1
  3. package/src/Dashboard/Layout.tsx +1 -1
  4. package/src/Graph/BarChart/BarChart.cypress.spec.tsx +0 -2
  5. package/src/Listing/ActionBar/Pagination.tsx +10 -23
  6. package/src/Listing/ActionBar/PaginationActions.tsx +1 -10
  7. package/src/Listing/Cell/DataCell.tsx +6 -6
  8. package/src/Listing/Cell/EllipsisTypography.tsx +10 -32
  9. package/src/Listing/Cell/index.tsx +37 -76
  10. package/src/Listing/Checkbox.tsx +8 -20
  11. package/src/Listing/Header/Cell/ListingHeaderCell.tsx +17 -14
  12. package/src/Listing/Header/Cell/SelectActionListingHeaderCell.tsx +5 -9
  13. package/src/Listing/Header/ListingHeader.tsx +2 -5
  14. package/src/Listing/Header/_internals/Label.tsx +1 -17
  15. package/src/Listing/Row/EmptyRow.tsx +2 -6
  16. package/src/Listing/Row/Row.tsx +7 -36
  17. package/src/Listing/index.stories.tsx +1 -0
  18. package/src/Listing/index.tsx +20 -22
  19. package/src/StoryBookThemeProvider/index.tsx +3 -1
  20. package/src/ThemeProvider/index.tsx +3 -1
  21. package/src/ThemeProvider/tailwindcss.css +202 -0
  22. package/src/components/Avatar/Avatar.stories.tsx +1 -0
  23. package/src/components/Button/Button.module.css +38 -0
  24. package/src/components/Button/Button.stories.tsx +25 -0
  25. package/src/components/Button/Button.tsx +2 -5
  26. package/src/components/CrudPage/CrudPageRoot.tsx +1 -1
  27. package/src/components/DataTable/EmptyState/DataTableEmptyState.tsx +4 -1
  28. package/src/components/Layout/AreaIndicator.tsx +4 -6
  29. package/src/Listing/Cell/DataCell.styles.ts +0 -27
  30. package/src/Listing/Header/Cell/ListingHeaderCell.styles.ts +0 -71
  31. package/src/Listing/Header/Cell/SelectActionListingHeaderCell.styles.ts +0 -26
  32. package/src/Listing/Header/ListingHeader.styles.ts +0 -16
  33. package/src/Listing/Listing.styles.ts +0 -78
  34. package/src/Listing/Row/EmptyRow.styles.ts +0 -14
  35. package/src/components/Button/Button.styles.ts +0 -44
  36. package/src/components/Layout/AreaIndicator.styles.ts +0 -33
@@ -1,27 +0,0 @@
1
- import { makeStyles } from 'tss-react/mui';
2
-
3
- const useStyles = makeStyles()((theme) => ({
4
- cell: {
5
- alignItems: 'center',
6
- display: 'flex',
7
- height: '100%',
8
- overflow: 'hidden',
9
- whiteSpace: 'nowrap'
10
- },
11
- clickable: {
12
- cursor: 'default'
13
- },
14
- componentColumn: {
15
- width: theme.spacing(2.75)
16
- },
17
- rowNotHovered: {
18
- color: theme.palette.text.secondary
19
- },
20
- text: {
21
- overflow: 'hidden',
22
- textOverflow: 'ellipsis',
23
- whiteSpace: 'nowrap'
24
- }
25
- }));
26
-
27
- export { useStyles };
@@ -1,71 +0,0 @@
1
- import { makeStyles } from 'tss-react/mui';
2
-
3
- import { ListingVariant } from '@centreon/ui-context';
4
-
5
- import { getTextStyleByViewMode } from '../../useStyleTable';
6
-
7
- interface StylesProps {
8
- isDragging?: boolean;
9
- isInDragOverlay?: boolean;
10
- listingVariant?: ListingVariant;
11
- }
12
-
13
- const useStyles = makeStyles<StylesProps>()(
14
- (theme, { isDragging, isInDragOverlay, listingVariant }) => ({
15
- active: {
16
- '&, &:hover, &:focus': {
17
- color: theme.palette.common.white
18
- },
19
- '&.Mui-active': {
20
- '& .MuiTableSortLabel-icon': {
21
- color: theme.palette.common.white
22
- },
23
- color: theme.palette.common.white
24
- }
25
- },
26
- content: {
27
- alignItems: 'center',
28
- borderRadius: isDragging && isInDragOverlay ? theme.spacing(0.5) : 0,
29
- color: theme.palette.common.white,
30
- display: 'flex',
31
- height: '100%',
32
- justifyContent: 'space-between'
33
- },
34
- dragHandle: {
35
- '&, &.Mui-focus, &:focus': {
36
- color: theme.palette.common.white
37
- },
38
- color: theme.palette.common.white,
39
-
40
- cursor: isDragging ? 'grabbing' : 'grab',
41
- opacity: 0,
42
- padding: 0
43
- },
44
- simpleHeaderCellContent: {
45
- alignItems: 'center',
46
- display: 'inline-flex',
47
- marginRight: theme.spacing(2),
48
- userSelect: 'none'
49
- },
50
- tableCell: {
51
- backgroundColor: isInDragOverlay
52
- ? 'transparent'
53
- : theme.palette.background.listingHeader,
54
- borderBottom: 'none',
55
- height: 'inherit',
56
- padding: theme.spacing(0, 1),
57
- ...getTextStyleByViewMode({ listingVariant, theme }),
58
- '&:hover, &:focus-within, &[data-isdragging=true]': {
59
- '& .dragHandle': {
60
- opacity: 1
61
- }
62
- },
63
- '&[data-isindragoverlay=true]': {
64
- display: 'block',
65
- opacity: 0.7
66
- }
67
- }
68
- })
69
- );
70
-
71
- export { useStyles, type StylesProps };
@@ -1,26 +0,0 @@
1
- import { makeStyles } from 'tss-react/mui';
2
-
3
- const useStyles = makeStyles()((theme) => ({
4
- checkbox: {
5
- '&.Mui-checked': {
6
- color: theme.palette.common.white
7
- },
8
- '&.MuiCheckbox-indeterminate': {
9
- color: theme.palette.common.white
10
- },
11
- color: theme.palette.common.white
12
- },
13
- checkboxHeaderCell: {
14
- alignItems: 'center',
15
- backgroundColor: theme.palette.background.listingHeader,
16
- borderBottom: 'none',
17
- display: 'flex',
18
- justifyContent: 'start',
19
- lineHeight: 'inherit'
20
- },
21
- predefinedRowsMenu: {
22
- color: theme.palette.common.white
23
- }
24
- }));
25
-
26
- export { useStyles };
@@ -1,16 +0,0 @@
1
- import { makeStyles } from 'tss-react/mui';
2
-
3
- const useStyles = makeStyles()((theme) => ({
4
- headerLabelDragging: {
5
- cursor: 'grabbing'
6
- },
7
- root: {
8
- height: '100%',
9
- padding: theme.spacing(0, 1)
10
- },
11
- row: {
12
- display: 'contents'
13
- }
14
- }));
15
-
16
- export { useStyles };
@@ -1,78 +0,0 @@
1
- import { makeStyles } from 'tss-react/mui';
2
-
3
- import { TableStyleAtom as TableStyle } from './models';
4
-
5
- const loadingIndicatorHeight = 3;
6
-
7
- interface StylesProps {
8
- dataStyle: TableStyle;
9
- gridTemplateColumn: string;
10
- isResponsive: string;
11
- rows: Array<unknown>;
12
- }
13
-
14
- const useListingStyles = makeStyles<StylesProps>()(
15
- (theme, { dataStyle, gridTemplateColumn, rows, isResponsive }) => ({
16
- actionBar: {
17
- alignItems: 'center',
18
- display: 'flex'
19
- },
20
- checkbox: {
21
- justifyContent: 'start'
22
- },
23
- container: {
24
- background: 'none',
25
- display: 'flex',
26
- flexDirection: 'column',
27
- height: '100%',
28
- width: '100%'
29
- },
30
- listingContainer: {
31
- height: '100%',
32
- overflow: 'hidden',
33
- width: '100%'
34
- },
35
- loadingIndicator: {
36
- height: loadingIndicatorHeight,
37
- width: '100%'
38
- },
39
- table: {
40
- '.listingHeader': {
41
- backgroundColor: theme.palette.background.listingHeader,
42
- padding: theme.spacing(0, 1)
43
- },
44
- '.listingHeader > div > div': {
45
- backgroundColor: theme.palette.background.listingHeader,
46
- height: theme.spacing(dataStyle.header.height / 8)
47
- },
48
- '.listingHeader > div > div:first-of-type': {
49
- height: '100%',
50
- padding: theme.spacing(0, 0.5, 0, 1.5)
51
- },
52
- alignItems: 'center',
53
- display: 'grid',
54
- gridTemplateColumns: gridTemplateColumn,
55
- gridTemplateRows: `${theme.spacing(dataStyle.header.height / 8)} repeat(${
56
- rows?.length || 1
57
- }, ${isResponsive ? 'auto' : `${dataStyle.body.height}px`})`,
58
- position: 'relative'
59
- },
60
- tableBody: {
61
- '.MuiTableRow-root > div:first-of-type': {
62
- paddingLeft: theme.spacing(1.5)
63
- },
64
-
65
- display: 'contents',
66
- 'div:first-of-type': {
67
- gridColumnStart: 1
68
- },
69
- position: 'relative'
70
- },
71
- tableWrapper: {
72
- borderBottom: 'none',
73
- overflow: 'auto'
74
- }
75
- })
76
- );
77
-
78
- export { useListingStyles, loadingIndicatorHeight };
@@ -1,14 +0,0 @@
1
- import { makeStyles } from 'tss-react/mui';
2
-
3
- const useStyles = makeStyles()(() => ({
4
- emptyDataCell: {
5
- flexDirection: 'column',
6
- gridColumn: 'auto / -1',
7
- justifyContent: 'center'
8
- },
9
- emptyDataRow: {
10
- display: 'contents'
11
- }
12
- }));
13
-
14
- export { useStyles };
@@ -1,44 +0,0 @@
1
- import { makeStyles } from 'tss-react/mui';
2
-
3
- const useStyles = makeStyles()((theme) => ({
4
- button: {
5
- '&[data-size="medium"]': {
6
- fontSize: '16px',
7
- height: 'unset',
8
- lineHeight: '24px'
9
- },
10
-
11
- '&[data-size="small"]': {
12
- '&[data-variant="primary"], &[data-variant="secondary"]': {
13
- paddingLeft: theme.spacing(2),
14
- paddingRight: theme.spacing(2)
15
- },
16
- fontSize: '14px',
17
- height: 'unset',
18
- lineHeight: '22px'
19
- },
20
-
21
- '&[data-variant="primary"]:not(:disabled)': {
22
- '&[data-is-danger="true"]': {
23
- backgroundColor: theme.palette.error.main
24
- },
25
-
26
- backgroundColor: theme.palette.primary.main
27
- },
28
-
29
- '&[data-variant="secondary"]:not(:disabled)': {
30
- '&[data-is-danger="true"]': {
31
- borderColor: theme.palette.error.main,
32
- color: theme.palette.error.main
33
- },
34
-
35
- borderColor: theme.palette.primary.main,
36
- color: theme.palette.primary.main
37
- },
38
-
39
- textWrap: 'noWrap',
40
- transition: 'unset'
41
- }
42
- }));
43
-
44
- export { useStyles };
@@ -1,33 +0,0 @@
1
- import { makeStyles } from 'tss-react/mui';
2
-
3
- export const useStyles = makeStyles()((theme) => ({
4
- areaIndicator: {
5
- '& .areaIndicator': {
6
- left: theme.spacing(10)
7
- },
8
- '& label:first-of-type': {
9
- border: '1px dashed #9747FF7F',
10
- borderRadius: '4px',
11
- color: '#9747FFFF',
12
- fontSize: '0.75rem',
13
- fontWeight: 500,
14
- left: theme.spacing(1),
15
- padding: theme.spacing(0.125, 1),
16
- position: 'absolute',
17
- top: theme.spacing(0.75)
18
- },
19
- '&[data-depth="1"]': {
20
- '& label:first-of-type': {
21
- '&:before': {
22
- content: '"+ "'
23
- },
24
- left: theme.spacing(10)
25
- }
26
- },
27
-
28
- backgroundColor: '#9747FF19',
29
- minHeight: theme.spacing(4),
30
-
31
- position: 'relative'
32
- }
33
- }));