@selfcommunity/react-ui 1.2.0 → 1.2.1-alpha.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.
Files changed (6) hide show
  1. package/lib/cjs/components/PlatformWidget/PlatformWidget.js +1 -94
  2. package/lib/cjs/shared/BackdropScrollDisabled/BackdropScrollDisabled.js +5 -1
  3. package/lib/esm/components/PlatformWidget/PlatformWidget.js +1 -94
  4. package/lib/esm/shared/BackdropScrollDisabled/BackdropScrollDisabled.js +6 -2
  5. package/lib/umd/react-ui.js +1 -1
  6. package/package.json +8 -8
package/lib/cjs/components/PlatformWidget/PlatformWidget.js CHANGED
@@ -35,100 +35,7 @@ const classes = {
35
35
  const Root = (0, material_1.styled)(Widget_1.default, {
36
36
  name: constants_1.PREFIX,
37
37
  slot: 'Root'
38
- })(({ theme }) => ({
39
- padding: '0px !important',
40
- [`&.${classes.tutorialOpen}`]: {
41
- position: 'relative',
42
- zIndex: theme.zIndex.drawer + 2,
43
- [`& .${classes.tutorial}`]: {
44
- padding: 0
45
- }
46
- },
47
- [`& .${classes.title}`]: {
48
- display: 'flex',
49
- justifyContent: 'center',
50
- marginBottom: theme.spacing(1)
51
- },
52
- [`& .${classes.content}`]: {
53
- padding: `${theme.spacing(2)} 0 0 0`,
54
- backgroundColor: '#EFEFEF'
55
- },
56
- [`& .${classes.actions}`]: {
57
- display: 'flex',
58
- paddingBottom: 0,
59
- boxShadow: 'inset -1px -3px 7px -4px #CECECE',
60
- WebkitOverflowScrolling: 'touch',
61
- overflowX: 'auto',
62
- overflowY: 'hidden',
63
- scrollbarWidth: 'none' /* Firefox */,
64
- MsOverflowStyle: 'none' /* IE and Edge */,
65
- '&::-webkit-scrollbar': {
66
- display: 'none'
67
- }
68
- },
69
- [`& .${classes.action}`]: {
70
- padding: `0px 2px ${theme.spacing(2)} 2px`,
71
- display: 'flex',
72
- flexGrow: 1,
73
- justifyContent: 'center',
74
- '& .MuiButton-root': {
75
- color: theme.palette.getContrastText(theme.palette.common.white),
76
- backgroundColor: theme.palette.common.white,
77
- '&:hover': {
78
- color: theme.palette.getContrastText(theme.palette.primary.main),
79
- backgroundColor: theme.palette.primary.main
80
- }
81
- }
82
- },
83
- [`& .${classes.tutorialContent}`]: {
84
- width: '100%'
85
- },
86
- [`& .${classes.divider}`]: {
87
- paddingTop: theme.spacing()
88
- },
89
- [`& .${classes.tutorialTitle}`]: {
90
- position: 'relative',
91
- fontWeight: 700,
92
- fontSize: 15,
93
- padding: `${theme.spacing(3)} ${theme.spacing()} ${theme.spacing()} ${theme.spacing(3)}`
94
- },
95
- [`& .${classes.tutorialTitleClose}`]: {
96
- position: 'absolute',
97
- top: theme.spacing(3),
98
- right: theme.spacing(3)
99
- },
100
- [`& .${classes.tutorialDesc}`]: {
101
- fontSize: 14,
102
- fontWeight: 500,
103
- color: theme.palette.grey[700],
104
- padding: `0px ${theme.spacing(3)} ${theme.spacing()} ${theme.spacing(3)}`
105
- },
106
- [`& .${classes.tutorialControls}`]: {
107
- padding: theme.spacing(2)
108
- },
109
- [`& .${classes.actionHighlighted}`]: {
110
- position: 'relative',
111
- '&:before': {
112
- content: '""',
113
- display: 'block',
114
- position: 'absolute',
115
- bottom: -11,
116
- width: 10,
117
- height: 10,
118
- transform: 'translateY(-50%) rotate(45deg)',
119
- boxShadow: '0px -20px 20px 0px #CECECE',
120
- zIndex: 0,
121
- backgroundColor: theme.palette.common.white
122
- },
123
- '& .MuiButton-root': {
124
- backgroundColor: theme.palette.primary.main,
125
- color: theme.palette.common.white
126
- }
127
- },
128
- [`& .${classes.btnStep}`]: {
129
- borderRadius: 3
130
- }
131
- }));
38
+ })(() => ({}));
132
39
  /**
133
40
  * > API documentation for the Community-JS PlatformWidget component. Learn about the available props and the CSS API.
134
41
  *
package/lib/cjs/shared/BackdropScrollDisabled/BackdropScrollDisabled.js CHANGED
@@ -6,9 +6,13 @@ const material_1 = require("@mui/material");
6
6
  * Prevents scrolling of content behind the backdrop
7
7
  */
8
8
  function BackdropScrollDisabled(props) {
9
+ const theme = (0, material_1.useTheme)();
9
10
  const onTouchMove = (event) => {
10
11
  event.preventDefault();
11
12
  };
12
- return (0, jsx_runtime_1.jsx)(material_1.Backdrop, Object.assign({}, props, { onTouchMove: onTouchMove, style: { touchAction: 'none' } }));
13
+ return ((0, jsx_runtime_1.jsx)(material_1.Backdrop, Object.assign({}, props, { onTouchMove: onTouchMove, style: {
14
+ touchAction: 'none',
15
+ backgroundColor: (0, material_1.getContrastRatio)(theme.palette.background.default, theme.palette.common.white) > 4.5 ? 'rgba(255, 255, 255, 0.5)' : undefined
16
+ } })));
13
17
  }
14
18
  exports.default = BackdropScrollDisabled;
package/lib/esm/components/PlatformWidget/PlatformWidget.js CHANGED
@@ -33,100 +33,7 @@ const classes = {
33
33
  const Root = styled(Widget, {
34
34
  name: PREFIX,
35
35
  slot: 'Root'
36
- })(({ theme }) => ({
37
- padding: '0px !important',
38
- [`&.${classes.tutorialOpen}`]: {
39
- position: 'relative',
40
- zIndex: theme.zIndex.drawer + 2,
41
- [`& .${classes.tutorial}`]: {
42
- padding: 0
43
- }
44
- },
45
- [`& .${classes.title}`]: {
46
- display: 'flex',
47
- justifyContent: 'center',
48
- marginBottom: theme.spacing(1)
49
- },
50
- [`& .${classes.content}`]: {
51
- padding: `${theme.spacing(2)} 0 0 0`,
52
- backgroundColor: '#EFEFEF'
53
- },
54
- [`& .${classes.actions}`]: {
55
- display: 'flex',
56
- paddingBottom: 0,
57
- boxShadow: 'inset -1px -3px 7px -4px #CECECE',
58
- WebkitOverflowScrolling: 'touch',
59
- overflowX: 'auto',
60
- overflowY: 'hidden',
61
- scrollbarWidth: 'none' /* Firefox */,
62
- MsOverflowStyle: 'none' /* IE and Edge */,
63
- '&::-webkit-scrollbar': {
64
- display: 'none'
65
- }
66
- },
67
- [`& .${classes.action}`]: {
68
- padding: `0px 2px ${theme.spacing(2)} 2px`,
69
- display: 'flex',
70
- flexGrow: 1,
71
- justifyContent: 'center',
72
- '& .MuiButton-root': {
73
- color: theme.palette.getContrastText(theme.palette.common.white),
74
- backgroundColor: theme.palette.common.white,
75
- '&:hover': {
76
- color: theme.palette.getContrastText(theme.palette.primary.main),
77
- backgroundColor: theme.palette.primary.main
78
- }
79
- }
80
- },
81
- [`& .${classes.tutorialContent}`]: {
82
- width: '100%'
83
- },
84
- [`& .${classes.divider}`]: {
85
- paddingTop: theme.spacing()
86
- },
87
- [`& .${classes.tutorialTitle}`]: {
88
- position: 'relative',
89
- fontWeight: 700,
90
- fontSize: 15,
91
- padding: `${theme.spacing(3)} ${theme.spacing()} ${theme.spacing()} ${theme.spacing(3)}`
92
- },
93
- [`& .${classes.tutorialTitleClose}`]: {
94
- position: 'absolute',
95
- top: theme.spacing(3),
96
- right: theme.spacing(3)
97
- },
98
- [`& .${classes.tutorialDesc}`]: {
99
- fontSize: 14,
100
- fontWeight: 500,
101
- color: theme.palette.grey[700],
102
- padding: `0px ${theme.spacing(3)} ${theme.spacing()} ${theme.spacing(3)}`
103
- },
104
- [`& .${classes.tutorialControls}`]: {
105
- padding: theme.spacing(2)
106
- },
107
- [`& .${classes.actionHighlighted}`]: {
108
- position: 'relative',
109
- '&:before': {
110
- content: '""',
111
- display: 'block',
112
- position: 'absolute',
113
- bottom: -11,
114
- width: 10,
115
- height: 10,
116
- transform: 'translateY(-50%) rotate(45deg)',
117
- boxShadow: '0px -20px 20px 0px #CECECE',
118
- zIndex: 0,
119
- backgroundColor: theme.palette.common.white
120
- },
121
- '& .MuiButton-root': {
122
- backgroundColor: theme.palette.primary.main,
123
- color: theme.palette.common.white
124
- }
125
- },
126
- [`& .${classes.btnStep}`]: {
127
- borderRadius: 3
128
- }
129
- }));
36
+ })(() => ({}));
130
37
  /**
131
38
  * > API documentation for the Community-JS PlatformWidget component. Learn about the available props and the CSS API.
132
39
  *
package/lib/esm/shared/BackdropScrollDisabled/BackdropScrollDisabled.js CHANGED
@@ -1,11 +1,15 @@
1
1
  import { jsx as _jsx } from "react/jsx-runtime";
2
- import { Backdrop } from '@mui/material';
2
+ import { Backdrop, getContrastRatio, useTheme } from '@mui/material';
3
3
  /**
4
4
  * Prevents scrolling of content behind the backdrop
5
5
  */
6
6
  export default function BackdropScrollDisabled(props) {
7
+ const theme = useTheme();
7
8
  const onTouchMove = (event) => {
8
9
  event.preventDefault();
9
10
  };
10
- return _jsx(Backdrop, Object.assign({}, props, { onTouchMove: onTouchMove, style: { touchAction: 'none' } }));
11
+ return (_jsx(Backdrop, Object.assign({}, props, { onTouchMove: onTouchMove, style: {
12
+ touchAction: 'none',
13
+ backgroundColor: getContrastRatio(theme.palette.background.default, theme.palette.common.white) > 4.5 ? 'rgba(255, 255, 255, 0.5)' : undefined
14
+ } })));
11
15
  }