cozy-ui 122.11.0 → 122.12.0
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.
- package/CHANGELOG.md +15 -0
- package/package.json +1 -1
- package/react/CozyDialogs/PermissionDialog.jsx +32 -40
- package/react/CozyDialogs/useCozyDialog.js +6 -2
- package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +0 -6
- package/transpiled/react/CozyDialogs/PermissionDialog.js +10 -15
- package/transpiled/react/CozyDialogs/useCozyDialog.js +4 -4
- package/transpiled/react/MuiCozyTheme/overrides/makeDarkInvertedOverrides.d.ts +0 -6
- package/transpiled/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.d.ts +0 -6
- package/transpiled/react/MuiCozyTheme/overrides/makeLightInvertedOverrides.d.ts +0 -6
- package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.d.ts +0 -6
- package/transpiled/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js +0 -8
- package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkInvertedOverrides.d.ts +0 -6
- package/transpiled/react/MuiCozyTheme/overrides/twake/makeDarkNormalOverrides.d.ts +0 -6
- package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightInvertedOverrides.d.ts +0 -6
- package/transpiled/react/MuiCozyTheme/overrides/twake/makeLightNormalOverrides.d.ts +0 -6
package/CHANGELOG.md
CHANGED
|
@@ -1,3 +1,18 @@
|
|
|
1
|
+
# [122.12.0](https://github.com/cozy/cozy-ui/compare/v122.11.1...v122.12.0) (2025-05-05)
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
### Features
|
|
5
|
+
|
|
6
|
+
* **Dialogs:** Add `componentsProps.dialogContent.className` support ([cfa17e5](https://github.com/cozy/cozy-ui/commit/cfa17e5))
|
|
7
|
+
* **PermissionDialog:** Remove `inverted` theme ([43d3049](https://github.com/cozy/cozy-ui/commit/43d3049))
|
|
8
|
+
|
|
9
|
+
## [122.11.1](https://github.com/cozy/cozy-ui/compare/v122.11.0...v122.11.1) (2025-04-28)
|
|
10
|
+
|
|
11
|
+
|
|
12
|
+
### Bug Fixes
|
|
13
|
+
|
|
14
|
+
* Expose overriding DialogContent classes ([a4f6de6](https://github.com/cozy/cozy-ui/commit/a4f6de6))
|
|
15
|
+
|
|
1
16
|
# [122.11.0](https://github.com/cozy/cozy-ui/compare/v122.10.1...v122.11.0) (2025-04-24)
|
|
2
17
|
|
|
3
18
|
|
package/package.json
CHANGED
|
@@ -5,7 +5,6 @@ import React from 'react'
|
|
|
5
5
|
import ConfirmDialog from './ConfirmDialog'
|
|
6
6
|
import Icon from '../Icon'
|
|
7
7
|
import Paper from '../Paper'
|
|
8
|
-
import CozyTheme from '../providers/CozyTheme'
|
|
9
8
|
import { makeStyles } from '../styles'
|
|
10
9
|
|
|
11
10
|
const useStyles = makeStyles({
|
|
@@ -31,46 +30,39 @@ const PermissionDialog = ({
|
|
|
31
30
|
const styles = useStyles()
|
|
32
31
|
|
|
33
32
|
return (
|
|
34
|
-
<
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
className: 'u-ta-center u-pt-2 u-pb-half'
|
|
46
|
-
}
|
|
47
|
-
}}
|
|
48
|
-
title={
|
|
49
|
-
<>
|
|
50
|
-
<CozyTheme
|
|
51
|
-
variant="normal"
|
|
52
|
-
className="u-flex u-flex-justify-center"
|
|
53
|
-
>
|
|
54
|
-
<Paper
|
|
55
|
-
square
|
|
56
|
-
elevation={2}
|
|
57
|
-
className={cx(
|
|
58
|
-
styles.floatingIcon,
|
|
59
|
-
'u-pos-absolute u-bdrs-circle u-flex u-bg-white'
|
|
60
|
-
)}
|
|
61
|
-
>
|
|
62
|
-
<Icon className="u-m-auto" icon={icon} size={48} />
|
|
63
|
-
</Paper>
|
|
64
|
-
</CozyTheme>
|
|
65
|
-
{title}
|
|
66
|
-
</>
|
|
33
|
+
<ConfirmDialog
|
|
34
|
+
open={open}
|
|
35
|
+
size="small"
|
|
36
|
+
disableTitleAutoPadding
|
|
37
|
+
classes={{ paper: 'u-ov-visible' }}
|
|
38
|
+
componentsProps={{
|
|
39
|
+
dialogTitle: {
|
|
40
|
+
className: 'u-flex u-flex-justify-center u-ta-center u-pt-2 u-pb-half'
|
|
41
|
+
},
|
|
42
|
+
dialogContent: {
|
|
43
|
+
className: 'u-ov-visible'
|
|
67
44
|
}
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
45
|
+
}}
|
|
46
|
+
title={
|
|
47
|
+
<>
|
|
48
|
+
<Paper
|
|
49
|
+
elevation={2}
|
|
50
|
+
className={cx(
|
|
51
|
+
styles.floatingIcon,
|
|
52
|
+
'u-pos-absolute u-bdrs-circle u-flex'
|
|
53
|
+
)}
|
|
54
|
+
>
|
|
55
|
+
<Icon className="u-m-auto" icon={icon} size={48} />
|
|
56
|
+
</Paper>
|
|
57
|
+
|
|
58
|
+
{title}
|
|
59
|
+
</>
|
|
60
|
+
}
|
|
61
|
+
content={content}
|
|
62
|
+
actions={actions}
|
|
63
|
+
actionsLayout={actionsLayout}
|
|
64
|
+
onClose={onClose}
|
|
65
|
+
/>
|
|
74
66
|
)
|
|
75
67
|
}
|
|
76
68
|
|
|
@@ -111,9 +111,13 @@ const useCozyDialog = props => {
|
|
|
111
111
|
classes: {
|
|
112
112
|
root: cx({
|
|
113
113
|
disableGutters
|
|
114
|
-
})
|
|
114
|
+
}),
|
|
115
|
+
...componentsProps?.dialogContent?.classes
|
|
115
116
|
},
|
|
116
|
-
className:
|
|
117
|
+
className: cx(
|
|
118
|
+
'cozyDialogContent',
|
|
119
|
+
componentsProps?.dialogContent?.className
|
|
120
|
+
)
|
|
117
121
|
}
|
|
118
122
|
|
|
119
123
|
return {
|
|
@@ -564,12 +564,6 @@ export const makeLightNormalOverrides = theme => ({
|
|
|
564
564
|
'&.full': {
|
|
565
565
|
width: '100%',
|
|
566
566
|
maxWidth: '100%'
|
|
567
|
-
},
|
|
568
|
-
'&.overflow': {
|
|
569
|
-
overflowY: 'visible !important', // Allow the icon to overflow the dialog, otherwise it will be cut off,
|
|
570
|
-
'& .cozyDialogContent': {
|
|
571
|
-
overflowY: 'visible !important' // This allow the overflow to work also on iOS
|
|
572
|
-
}
|
|
573
567
|
}
|
|
574
568
|
},
|
|
575
569
|
scrollPaper: {
|
|
@@ -4,7 +4,6 @@ import React from 'react';
|
|
|
4
4
|
import ConfirmDialog from "cozy-ui/transpiled/react/CozyDialogs/ConfirmDialog";
|
|
5
5
|
import Icon from "cozy-ui/transpiled/react/Icon";
|
|
6
6
|
import Paper from "cozy-ui/transpiled/react/Paper";
|
|
7
|
-
import CozyTheme from "cozy-ui/transpiled/react/providers/CozyTheme";
|
|
8
7
|
import { makeStyles } from "cozy-ui/transpiled/react/styles";
|
|
9
8
|
var useStyles = makeStyles({
|
|
10
9
|
floatingIcon: {
|
|
@@ -26,38 +25,34 @@ var PermissionDialog = function PermissionDialog(_ref) {
|
|
|
26
25
|
actionsLayout = _ref.actionsLayout,
|
|
27
26
|
onClose = _ref.onClose;
|
|
28
27
|
var styles = useStyles();
|
|
29
|
-
return /*#__PURE__*/React.createElement(
|
|
30
|
-
variant: "inverted"
|
|
31
|
-
}, /*#__PURE__*/React.createElement(ConfirmDialog, {
|
|
28
|
+
return /*#__PURE__*/React.createElement(ConfirmDialog, {
|
|
32
29
|
open: open,
|
|
33
30
|
size: "small",
|
|
34
31
|
disableTitleAutoPadding: true,
|
|
35
32
|
classes: {
|
|
36
|
-
|
|
37
|
-
paper: 'overflow'
|
|
33
|
+
paper: 'u-ov-visible'
|
|
38
34
|
},
|
|
39
35
|
componentsProps: {
|
|
40
36
|
dialogTitle: {
|
|
41
|
-
className: 'u-ta-center u-pt-2 u-pb-half'
|
|
37
|
+
className: 'u-flex u-flex-justify-center u-ta-center u-pt-2 u-pb-half'
|
|
38
|
+
},
|
|
39
|
+
dialogContent: {
|
|
40
|
+
className: 'u-ov-visible'
|
|
42
41
|
}
|
|
43
42
|
},
|
|
44
|
-
title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(
|
|
45
|
-
variant: "normal",
|
|
46
|
-
className: "u-flex u-flex-justify-center"
|
|
47
|
-
}, /*#__PURE__*/React.createElement(Paper, {
|
|
48
|
-
square: true,
|
|
43
|
+
title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Paper, {
|
|
49
44
|
elevation: 2,
|
|
50
|
-
className: cx(styles.floatingIcon, 'u-pos-absolute u-bdrs-circle u-flex
|
|
45
|
+
className: cx(styles.floatingIcon, 'u-pos-absolute u-bdrs-circle u-flex')
|
|
51
46
|
}, /*#__PURE__*/React.createElement(Icon, {
|
|
52
47
|
className: "u-m-auto",
|
|
53
48
|
icon: icon,
|
|
54
49
|
size: 48
|
|
55
|
-
}))
|
|
50
|
+
})), title),
|
|
56
51
|
content: content,
|
|
57
52
|
actions: actions,
|
|
58
53
|
actionsLayout: actionsLayout,
|
|
59
54
|
onClose: onClose
|
|
60
|
-
})
|
|
55
|
+
});
|
|
61
56
|
};
|
|
62
57
|
|
|
63
58
|
PermissionDialog.propTypes = {
|
|
@@ -24,7 +24,7 @@ var useStyles = makeStyles({
|
|
|
24
24
|
});
|
|
25
25
|
|
|
26
26
|
var useCozyDialog = function useCozyDialog(props) {
|
|
27
|
-
var _componentsProps$dial;
|
|
27
|
+
var _componentsProps$dial, _componentsProps$dial2, _componentsProps$dial3;
|
|
28
28
|
|
|
29
29
|
var size = props.size,
|
|
30
30
|
actions = props.actions,
|
|
@@ -113,12 +113,12 @@ var useCozyDialog = function useCozyDialog(props) {
|
|
|
113
113
|
});
|
|
114
114
|
|
|
115
115
|
var dialogContentProps = _objectSpread(_objectSpread({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.dialogContent), {}, {
|
|
116
|
-
classes: {
|
|
116
|
+
classes: _objectSpread({
|
|
117
117
|
root: cx({
|
|
118
118
|
disableGutters: disableGutters
|
|
119
119
|
})
|
|
120
|
-
},
|
|
121
|
-
className: 'cozyDialogContent'
|
|
120
|
+
}, componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$dial2 = componentsProps.dialogContent) === null || _componentsProps$dial2 === void 0 ? void 0 : _componentsProps$dial2.classes),
|
|
121
|
+
className: cx('cozyDialogContent', componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$dial3 = componentsProps.dialogContent) === null || _componentsProps$dial3 === void 0 ? void 0 : _componentsProps$dial3.className)
|
|
122
122
|
});
|
|
123
123
|
|
|
124
124
|
return {
|
|
@@ -631,12 +631,6 @@ export function makeDarkInvertedOverrides(theme: any): {
|
|
|
631
631
|
width: string;
|
|
632
632
|
maxWidth: string;
|
|
633
633
|
};
|
|
634
|
-
'&.overflow': {
|
|
635
|
-
overflowY: string;
|
|
636
|
-
'& .cozyDialogContent': {
|
|
637
|
-
overflowY: string;
|
|
638
|
-
};
|
|
639
|
-
};
|
|
640
634
|
};
|
|
641
635
|
scrollPaper: {
|
|
642
636
|
'&.alignTop': {
|
|
@@ -631,12 +631,6 @@ export function makeDarkNormalOverrides(theme: any): {
|
|
|
631
631
|
width: string;
|
|
632
632
|
maxWidth: string;
|
|
633
633
|
};
|
|
634
|
-
'&.overflow': {
|
|
635
|
-
overflowY: string;
|
|
636
|
-
'& .cozyDialogContent': {
|
|
637
|
-
overflowY: string;
|
|
638
|
-
};
|
|
639
|
-
};
|
|
640
634
|
};
|
|
641
635
|
scrollPaper: {
|
|
642
636
|
'&.alignTop': {
|
|
@@ -631,12 +631,6 @@ export function makeLightInvertedOverrides(theme: any): {
|
|
|
631
631
|
width: string;
|
|
632
632
|
maxWidth: string;
|
|
633
633
|
};
|
|
634
|
-
'&.overflow': {
|
|
635
|
-
overflowY: string;
|
|
636
|
-
'& .cozyDialogContent': {
|
|
637
|
-
overflowY: string;
|
|
638
|
-
};
|
|
639
|
-
};
|
|
640
634
|
};
|
|
641
635
|
scrollPaper: {
|
|
642
636
|
'&.alignTop': {
|
|
@@ -631,12 +631,6 @@ export function makeLightNormalOverrides(theme: any): {
|
|
|
631
631
|
width: string;
|
|
632
632
|
maxWidth: string;
|
|
633
633
|
};
|
|
634
|
-
'&.overflow': {
|
|
635
|
-
overflowY: string;
|
|
636
|
-
'& .cozyDialogContent': {
|
|
637
|
-
overflowY: string;
|
|
638
|
-
};
|
|
639
|
-
};
|
|
640
634
|
};
|
|
641
635
|
scrollPaper: {
|
|
642
636
|
'&.alignTop': {
|
|
@@ -528,14 +528,6 @@ export var makeLightNormalOverrides = function makeLightNormalOverrides(theme) {
|
|
|
528
528
|
'&.full': {
|
|
529
529
|
width: '100%',
|
|
530
530
|
maxWidth: '100%'
|
|
531
|
-
},
|
|
532
|
-
'&.overflow': {
|
|
533
|
-
overflowY: 'visible !important',
|
|
534
|
-
// Allow the icon to overflow the dialog, otherwise it will be cut off,
|
|
535
|
-
'& .cozyDialogContent': {
|
|
536
|
-
overflowY: 'visible !important' // This allow the overflow to work also on iOS
|
|
537
|
-
|
|
538
|
-
}
|
|
539
531
|
}
|
|
540
532
|
},
|
|
541
533
|
scrollPaper: {
|
|
@@ -631,12 +631,6 @@ export function makeDarkInvertedTwakeOverrides(theme: any): {
|
|
|
631
631
|
width: string;
|
|
632
632
|
maxWidth: string;
|
|
633
633
|
};
|
|
634
|
-
'&.overflow': {
|
|
635
|
-
overflowY: string;
|
|
636
|
-
'& .cozyDialogContent': {
|
|
637
|
-
overflowY: string;
|
|
638
|
-
};
|
|
639
|
-
};
|
|
640
634
|
};
|
|
641
635
|
scrollPaper: {
|
|
642
636
|
'&.alignTop': {
|
|
@@ -631,12 +631,6 @@ export function makeDarkNormalTwakeOverrides(theme: any): {
|
|
|
631
631
|
width: string;
|
|
632
632
|
maxWidth: string;
|
|
633
633
|
};
|
|
634
|
-
'&.overflow': {
|
|
635
|
-
overflowY: string;
|
|
636
|
-
'& .cozyDialogContent': {
|
|
637
|
-
overflowY: string;
|
|
638
|
-
};
|
|
639
|
-
};
|
|
640
634
|
};
|
|
641
635
|
scrollPaper: {
|
|
642
636
|
'&.alignTop': {
|
|
@@ -631,12 +631,6 @@ export function makeLightInvertedTwakeOverrides(theme: any): {
|
|
|
631
631
|
width: string;
|
|
632
632
|
maxWidth: string;
|
|
633
633
|
};
|
|
634
|
-
'&.overflow': {
|
|
635
|
-
overflowY: string;
|
|
636
|
-
'& .cozyDialogContent': {
|
|
637
|
-
overflowY: string;
|
|
638
|
-
};
|
|
639
|
-
};
|
|
640
634
|
};
|
|
641
635
|
scrollPaper: {
|
|
642
636
|
'&.alignTop': {
|
|
@@ -631,12 +631,6 @@ export function makeLightNormalTwakeOverrides(theme: any): {
|
|
|
631
631
|
width: string;
|
|
632
632
|
maxWidth: string;
|
|
633
633
|
};
|
|
634
|
-
'&.overflow': {
|
|
635
|
-
overflowY: string;
|
|
636
|
-
'& .cozyDialogContent': {
|
|
637
|
-
overflowY: string;
|
|
638
|
-
};
|
|
639
|
-
};
|
|
640
634
|
};
|
|
641
635
|
scrollPaper: {
|
|
642
636
|
'&.alignTop': {
|