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 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
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "122.11.0",
3
+ "version": "122.12.0",
4
4
  "description": "Cozy apps UI SDK",
5
5
  "main": "./index.js",
6
6
  "bin": {
@@ -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
- <CozyTheme variant="inverted">
35
- <ConfirmDialog
36
- open={open}
37
- size="small"
38
- disableTitleAutoPadding
39
- classes={{
40
- // remove overflow in makeOverride and replace it by u-ov-visible when https://github.com/cozy/cozy-ui/issues/2284 is solved
41
- paper: 'overflow'
42
- }}
43
- componentsProps={{
44
- dialogTitle: {
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
- content={content}
69
- actions={actions}
70
- actionsLayout={actionsLayout}
71
- onClose={onClose}
72
- />
73
- </CozyTheme>
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: 'cozyDialogContent'
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(CozyTheme, {
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
- // remove overflow in makeOverride and replace it by u-ov-visible when https://github.com/cozy/cozy-ui/issues/2284 is solved
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(CozyTheme, {
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 u-bg-white')
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
- }))), title),
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': {