cozy-ui 122.11.1 → 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,11 @@
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
+
1
9
  ## [122.11.1](https://github.com/cozy/cozy-ui/compare/v122.11.0...v122.11.1) (2025-04-28)
2
10
 
3
11
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cozy-ui",
3
- "version": "122.11.1",
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
 
@@ -114,7 +114,10 @@ const useCozyDialog = props => {
114
114
  }),
115
115
  ...componentsProps?.dialogContent?.classes
116
116
  },
117
- className: 'cozyDialogContent'
117
+ className: cx(
118
+ 'cozyDialogContent',
119
+ componentsProps?.dialogContent?.className
120
+ )
118
121
  }
119
122
 
120
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, _componentsProps$dial2;
27
+ var _componentsProps$dial, _componentsProps$dial2, _componentsProps$dial3;
28
28
 
29
29
  var size = props.size,
30
30
  actions = props.actions,
@@ -118,7 +118,7 @@ var useCozyDialog = function useCozyDialog(props) {
118
118
  disableGutters: disableGutters
119
119
  })
120
120
  }, componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$dial2 = componentsProps.dialogContent) === null || _componentsProps$dial2 === void 0 ? void 0 : _componentsProps$dial2.classes),
121
- className: 'cozyDialogContent'
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': {