@selfcommunity/react-theme-default 0.1.0-alpha.32 → 0.1.0-alpha.320

package/lib/esm/components/SCCustomSnackMessage.js

@@ -1,15 +1,31 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
+            width: 370,
+            [theme.breakpoints.up('sm')]: {
+                minWidth: '345px !important'
+            },
             '& .SCCustomSnackMessage-card': {
                 width: '100%',
                 '& .SCCustomSnackMessage-content': {
                     position: 'relative',
-                    padding: theme.spacing(2, 4, 2, 2)
+                    padding: theme.spacing(2, 4, 2, 2),
+                    '& .SCCustomSnackMessage-close': {
+                        position: 'absolute',
+                        right: 0,
+                        top: 0,
+                        zIndex: 1
+                    },
+                    a: {
+                        color: theme.palette.text.primary,
+                        textDecoration: 'none',
+                        '&:hover': {
+                            textDecoration: 'underline'
+                        }
+                    }
                 }
             }
         })
     }
 };
 export default Component;
-//# sourceMappingURL=SCCustomSnackMessage.js.map

package/lib/esm/components/SCDateTimeAgo.d.ts

@@ -1,10 +1,10 @@
 declare const Component: {
     styleOverrides: {
         root: ({ theme }: any) => {
-            color: any;
+            color: string;
+            verticalAlign: string;
             '& .MuiIcon-root': {
                 fontSize: string;
-                lineHeight: string;
                 marginRight: number;
             };
             '& .MuiTypography-root': {
@@ -15,4 +15,3 @@ declare const Component: {
     };
 };
 export default Component;
-//# sourceMappingURL=SCDateTimeAgo.d.ts.map

package/lib/esm/components/SCDateTimeAgo.js

@@ -1,10 +1,10 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
-            color: theme.palette.text.secondary,
+            color: 'inherit',
+            verticalAlign: 'middle',
             '& .MuiIcon-root': {
                 fontSize: '1rem',
-                lineHeight: '1.143rem',
                 marginRight: 2
             },
             '& .MuiTypography-root': {
@@ -15,4 +15,3 @@ const Component = {
     }
 };
 export default Component;
-//# sourceMappingURL=SCDateTimeAgo.js.map

package/lib/esm/components/SCEditor.d.ts

@@ -1,13 +1,297 @@
 declare const Component: {
     styleOverrides: {
         root: ({ theme }: any) => {
+            boxSizing: string;
+            padding: any;
+            position: string;
+            cursor: string;
+            '& .SCEditor-content': {
+                position: string;
+                outline: string;
+                minHeight: number;
+                paddingBottom: number;
+                '& > p': {
+                    margin: number;
+                };
+                '& img': {
+                    margin: number;
+                };
+                '& mention': {
+                    backgroundColor: string;
+                };
+                '& hashtag': {
+                    backgroundColor: string;
+                };
+            };
+            '& .SCEditor-placeholder': {
+                position: string;
+                top: any;
+                left: any;
+                color: any;
+            };
             '& .SCEditor-actions': {
+                position: string;
+                bottom: number;
+                right: any;
+                color: any;
+                zIndex: number;
                 '& .MuiIcon-root': {
                     fontSize: string;
                 };
             };
+            '& .SCEditor-image': {
+                position: string;
+                display: string;
+                '& .selected': {
+                    border: string;
+                };
+            };
+            '& hr': {
+                cursor: string;
+                margin: string;
+                '&.selected': {
+                    outline: string;
+                    userSelect: string;
+                };
+            };
+            '& .SCEditor-ltr': {
+                textAlign: string;
+            };
+            '& .SCEditor-rtl': {
+                textAlign: string;
+            };
+            '& .SCEditor-paragraph': {
+                margin: number;
+                position: string;
+            };
+            '& .SCEditor-quote': {
+                margin: number;
+                marginLeft: any;
+                marginBottom: any;
+                color: any;
+                borderLeftColor: any;
+                borderLeftWidth: any;
+                borderLeftStyle: string;
+                paddingLeft: any;
+            };
+            '& .SCEditor-h1': {
+                fontSize: string;
+                color: any;
+                fontWeight: any;
+                margin: any;
+            };
+            '& .SCEditor-h2': {
+                fontSize: string;
+                color: any;
+                fontWeight: any;
+                margin: any;
+            };
+            '& .SCEditor-h3': {
+                fontSize: string;
+                color: any;
+                fontWeight: any;
+                margin: any;
+            };
+            '& .SCEditor-textBold': {
+                fontWeight: string;
+            };
+            '& .SCEditor-textItalic': {
+                fontStyle: string;
+            };
+            '& .SCEditor-textUnderline': {
+                textDecoration: string;
+            };
+            '& .SCEditor-textStrikethrough': {
+                textDecoration: string;
+            };
+            '& .SCEditor-textUnderlineStrikethrough': {
+                textDecoration: string;
+            };
+            '& .SCEditor-textSubscript': {
+                fontSize: string;
+                verticalAlign: string;
+            };
+            '& .SCEditor-textSuperscript': {
+                fontSize: string;
+                verticalAlign: string;
+            };
+            '& .SCEditor-link': {
+                color: any;
+                textDecoration: string;
+            };
+            '& .SCEditor-link:hover': {
+                textDecoration: string;
+                cursor: string;
+            };
+            '& .SCEditor-ol1': {
+                padding: number;
+                margin: number;
+            };
+            '& .SCEditor-ol2': {
+                padding: number;
+                margin: number;
+                listStyleType: string;
+            };
+            '& .SCEditor-ol3': {
+                padding: number;
+                margin: number;
+                listStyleType: string;
+            };
+            '& .SCEditor-ol4': {
+                padding: number;
+                margin: number;
+                listStyleType: string;
+            };
+            '& .SCEditor-ol5': {
+                padding: number;
+                margin: number;
+                listStyleType: string;
+            };
+            '& .SCEditor-ul': {
+                padding: number;
+                margin: number;
+            };
+            '& .SCEditor-listItem': {
+                margin: string;
+            };
+        };
+        toolbar: ({ theme }: any) => {
+            '& .SCEditor-placeholder': {
+                top: any;
+                left: any;
+            };
+        };
+        skeletonRoot: ({ theme }: any) => {};
+        emojiPluginRoot: ({ theme }: any) => {};
+        floatingLinkPluginRoot: ({ theme }: any) => {
+            zIndex: number;
+            '& .MuiPaper-root': {
+                borderRadius: number;
+            };
+        };
+        hashtagPluginRoot: ({ theme }: any) => {
+            position: string;
+            background: any;
+            boxShadow: string;
+            borderRadius: number;
+            marginLeft: number;
+            marginTop: number;
+            zIndex: number;
+            '& ul': {
+                padding: number;
+                listStyle: string;
+                margin: number;
+                borderRadius: number;
+                '& li': {
+                    padding: any;
+                    margin: number;
+                    minWidth: number;
+                    fontSize: any;
+                    outline: string;
+                    cursor: string;
+                    display: string;
+                    flexDirection: string;
+                    justifyContent: string;
+                    alignItems: string;
+                    '&.selected': {
+                        background: any;
+                    };
+                    '&.hovered': {
+                        background: any;
+                    };
+                    '& .MuiAvatar-root': {
+                        width: number;
+                        height: number;
+                        marginRight: any;
+                    };
+                };
+            };
+        };
+        imagePluginRoot: ({ theme }: any) => {};
+        mentionPluginRoot: ({ theme }: any) => {
+            position: string;
+            background: any;
+            boxShadow: string;
+            borderRadius: number;
+            marginLeft: number;
+            marginTop: number;
+            zIndex: number;
+            '& ul': {
+                padding: number;
+                listStyle: string;
+                margin: number;
+                borderRadius: number;
+                '& li': {
+                    padding: any;
+                    margin: number;
+                    minWidth: number;
+                    fontSize: any;
+                    outline: string;
+                    cursor: string;
+                    display: string;
+                    flexDirection: string;
+                    justifyContent: string;
+                    alignItems: string;
+                    '&.selected': {
+                        background: any;
+                    };
+                    '&.hovered': {
+                        background: any;
+                    };
+                    '& .MuiAvatar-root': {
+                        width: number;
+                        height: number;
+                        marginRight: any;
+                    };
+                };
+            };
+        };
+        toolbarPluginRoot: ({ theme }: any) => {
+            borderRadius: number;
+            borderColor: string;
+            borderWidth: number;
+            borderStyle: string;
+            display: string;
+            flexDirection: string;
+            alignItems: string;
+            justifyContent: string;
+            marginBottom: any;
+            padding: number;
+            overflowX: string;
+            MsOverflowStyle: string;
+            scrollbarWidth: string;
+            '&::-webkit-scrollbar': {
+                display: string;
+            };
+            '& .MuiTextField-root': {
+                minWidth: number;
+                margin: any;
+            };
+            '& .MuiButtonBase-root': {
+                margin: any;
+                padding: any;
+                fontSize: string;
+                border: number;
+                borderRadius: number;
+                '&.Mui-disabled': {
+                    border: number;
+                };
+                '&.MuiToggleButtonGroup-grouped:not(:last-of-type)': {
+                    borderTopRightRadius: number;
+                    borderBottomRightRadius: number;
+                };
+                '&.MuiToggleButtonGroup-grouped:not(:first-of-type)': {
+                    borderTopRightRadius: number;
+                    borderBottomRightRadius: number;
+                    borderTopLeftRadius: number;
+                    borderBottomLeftRadius: number;
+                };
+            };
+            '& .SCEditor-block-format .MuiIcon-root:first-of-type': {
+                display: string;
+                marginRight: any;
+            };
         };
     };
 };
 export default Component;
-//# sourceMappingURL=SCEditor.d.ts.map

package/lib/esm/components/SCEditor.js

@@ -1,13 +1,298 @@
+import { alpha } from '@mui/system';
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
+            boxSizing: 'borderBox',
+            padding: theme.spacing(1, 2),
+            position: 'relative',
+            cursor: 'text',
+            '& .SCEditor-content': {
+                position: 'relative',
+                outline: 'none',
+                minHeight: 40,
+                paddingBottom: 20,
+                '& > p': {
+                    margin: 0
+                },
+                '& img': {
+                    margin: 0
+                },
+                '& mention': {
+                    backgroundColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity)
+                },
+                '& hashtag': {
+                    backgroundColor: alpha(theme.palette.secondary.main, theme.palette.action.activatedOpacity)
+                }
+            },
+            '& .SCEditor-placeholder': {
+                position: 'absolute',
+                top: theme.spacing(1),
+                left: theme.spacing(2),
+                color: theme.palette.text.disabled
+            },
             '& .SCEditor-actions': {
+                position: 'absolute',
+                bottom: 0,
+                right: theme.spacing(),
+                color: theme.palette.text.primary,
+                zIndex: 1,
                 '& .MuiIcon-root': {
                     fontSize: '1.143rem'
                 }
+            },
+            '& .SCEditor-image': {
+                position: 'relative',
+                display: 'block',
+                '& .selected': {
+                    border: `2px solid ${theme.palette.secondary.main}`
+                }
+            },
+            '& hr': {
+                cursor: 'pointer',
+                margin: '1em 0',
+                '&.selected': {
+                    outline: `2px solid ${theme.palette.secondary.main}`,
+                    userSelect: 'none'
+                }
+            },
+            '& .SCEditor-ltr': {
+                textAlign: 'left'
+            },
+            '& .SCEditor-rtl': {
+                textAlign: 'right'
+            },
+            '& .SCEditor-paragraph': {
+                margin: 0,
+                position: 'relative'
+            },
+            '& .SCEditor-quote': {
+                margin: 0,
+                marginLeft: theme.spacing(2),
+                marginBottom: theme.spacing(1),
+                color: theme.palette.text.secondary,
+                borderLeftColor: theme.palette.primary.main,
+                borderLeftWidth: theme.spacing(0.25),
+                borderLeftStyle: 'solid',
+                paddingLeft: theme.spacing(2)
+            },
+            '& .SCEditor-h1': {
+                fontSize: '1.429rem',
+                color: theme.palette.text.primary,
+                fontWeight: theme.typography.fontWeightBold,
+                margin: theme.spacing(0, 0, 1, 0)
+            },
+            '& .SCEditor-h2': {
+                fontSize: '1.143rem',
+                color: theme.palette.text.primary,
+                fontWeight: theme.typography.fontWeightBold,
+                margin: theme.spacing(0, 0, 0.8, 0)
+            },
+            '& .SCEditor-h3': {
+                fontSize: '1rem',
+                color: theme.palette.text.primary,
+                fontWeight: theme.typography.fontWeightBold,
+                margin: theme.spacing(0, 0, 0.5, 0)
+            },
+            '& .SCEditor-textBold': {
+                fontWeight: 'bold'
+            },
+            '& .SCEditor-textItalic': {
+                fontStyle: 'italic'
+            },
+            '& .SCEditor-textUnderline': {
+                textDecoration: 'underline'
+            },
+            '& .SCEditor-textStrikethrough': {
+                textDecoration: 'line-through'
+            },
+            '& .SCEditor-textUnderlineStrikethrough': {
+                textDecoration: 'underline line-through'
+            },
+            '& .SCEditor-textSubscript': {
+                fontSize: '0.8em',
+                verticalAlign: 'sub !important'
+            },
+            '& .SCEditor-textSuperscript': {
+                fontSize: '0.8em',
+                verticalAlign: 'super'
+            },
+            '& .SCEditor-link': {
+                color: theme.palette.text.secondary,
+                textDecoration: 'underline'
+            },
+            '& .SCEditor-link:hover': {
+                textDecoration: 'none',
+                cursor: 'pointer'
+            },
+            '& .SCEditor-ol1': {
+                padding: 0,
+                margin: 0
+            },
+            '& .SCEditor-ol2': {
+                padding: 0,
+                margin: 0,
+                listStyleType: 'upper-alpha'
+            },
+            '& .SCEditor-ol3': {
+                padding: 0,
+                margin: 0,
+                listStyleType: 'lower-alpha'
+            },
+            '& .SCEditor-ol4': {
+                padding: 0,
+                margin: 0,
+                listStyleType: 'upper-roman'
+            },
+            '& .SCEditor-ol5': {
+                padding: 0,
+                margin: 0,
+                listStyleType: 'lower-roman'
+            },
+            '& .SCEditor-ul': {
+                padding: 0,
+                margin: 0
+            },
+            '& .SCEditor-listItem': {
+                margin: '0 32px'
+            }
+        }),
+        toolbar: ({ theme }) => ({
+            '& .SCEditor-placeholder': {
+                top: theme.spacing(7),
+                left: theme.spacing(2)
+            }
+        }),
+        skeletonRoot: ({ theme }) => ({}),
+        emojiPluginRoot: ({ theme }) => ({}),
+        floatingLinkPluginRoot: ({ theme }) => ({
+            zIndex: 2000,
+            '& .MuiPaper-root': {
+                borderRadius: 5
+            }
+        }),
+        hashtagPluginRoot: ({ theme }) => ({
+            position: 'absolute',
+            background: theme.palette.background.paper,
+            boxShadow: '0px 5px 10px rgba(0, 0, 0, 0.3)',
+            borderRadius: 8,
+            marginLeft: 7,
+            marginTop: 18,
+            zIndex: 3000,
+            '& ul': {
+                padding: 0,
+                listStyle: 'none',
+                margin: 0,
+                borderRadius: 10,
+                '& li': {
+                    padding: theme.spacing(1),
+                    margin: 0,
+                    minWidth: 180,
+                    fontSize: theme.typography.body2.fontSize,
+                    outline: 'none',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'left',
+                    alignItems: 'center',
+                    '&.selected': {
+                        background: theme.palette.action.selected
+                    },
+                    '&.hovered': {
+                        background: theme.palette.action.hover
+                    },
+                    '& .MuiAvatar-root': {
+                        width: 20,
+                        height: 20,
+                        marginRight: theme.spacing()
+                    }
+                }
+            }
+        }),
+        imagePluginRoot: ({ theme }) => ({}),
+        mentionPluginRoot: ({ theme }) => ({
+            position: 'absolute',
+            background: theme.palette.background.paper,
+            boxShadow: '0px 5px 10px rgba(0, 0, 0, 0.3)',
+            borderRadius: 8,
+            marginLeft: 7,
+            marginTop: 18,
+            zIndex: 3000,
+            '& ul': {
+                padding: 0,
+                listStyle: 'none',
+                margin: 0,
+                borderRadius: 10,
+                '& li': {
+                    padding: theme.spacing(1),
+                    margin: 0,
+                    minWidth: 180,
+                    fontSize: theme.typography.body2.fontSize,
+                    outline: 'none',
+                    cursor: 'pointer',
+                    display: 'flex',
+                    flexDirection: 'row',
+                    justifyContent: 'left',
+                    alignItems: 'center',
+                    '&.selected': {
+                        background: theme.palette.action.selected
+                    },
+                    '&.hovered': {
+                        background: theme.palette.action.hover
+                    },
+                    '& .MuiAvatar-root': {
+                        width: 20,
+                        height: 20,
+                        marginRight: theme.spacing()
+                    }
+                }
+            }
+        }),
+        toolbarPluginRoot: ({ theme }) => ({
+            borderRadius: theme.shape.borderRadius * 0.2,
+            borderColor: alpha(theme.palette.primary.main, theme.palette.action.activatedOpacity),
+            borderWidth: 1,
+            borderStyle: 'solid',
+            display: 'flex',
+            flexDirection: 'row',
+            alignItems: 'center',
+            justifyContent: 'left',
+            marginBottom: theme.spacing(1),
+            padding: 0,
+            overflowX: 'scroll',
+            MsOverflowStyle: 'none',
+            scrollbarWidth: 'none',
+            '&::-webkit-scrollbar': {
+                display: 'none'
+            },
+            '& .MuiTextField-root': {
+                minWidth: 100,
+                margin: theme.spacing(0, 0.5)
+            },
+            '& .MuiButtonBase-root': {
+                margin: theme.spacing(0.5),
+                padding: theme.spacing(1),
+                fontSize: '1rem',
+                border: 0,
+                borderRadius: theme.shape.borderRadius * 0.2,
+                '&.Mui-disabled': {
+                    border: 0
+                },
+                '&.MuiToggleButtonGroup-grouped:not(:last-of-type)': {
+                    borderTopRightRadius: theme.shape.borderRadius * 0.2,
+                    borderBottomRightRadius: theme.shape.borderRadius * 0.2
+                },
+                '&.MuiToggleButtonGroup-grouped:not(:first-of-type)': {
+                    borderTopRightRadius: theme.shape.borderRadius * 0.2,
+                    borderBottomRightRadius: theme.shape.borderRadius * 0.2,
+                    borderTopLeftRadius: theme.shape.borderRadius * 0.2,
+                    borderBottomLeftRadius: theme.shape.borderRadius * 0.2
+                }
+            },
+            '& .SCEditor-block-format .MuiIcon-root:first-of-type': {
+                display: 'inline-block',
+                marginRight: theme.spacing(1)
             }
         })
     }
 };
 export default Component;
-//# sourceMappingURL=SCEditor.js.map

package/lib/esm/components/SCEmojiPicker.d.ts

@@ -0,0 +1,10 @@
+declare const Component: {
+    styleOverrides: {
+        root: ({ theme }: any) => {
+            '& .EmojiPickerReact.epr-main': {
+                borderWidth: number;
+            };
+        };
+    };
+};
+export default Component;

package/lib/esm/components/{SCLoyaltyProgramDetail.js → SCEmojiPicker.js}

@@ -1,10 +1,10 @@
 const Component = {
     styleOverrides: {
         root: ({ theme }) => ({
-            boxShadow: 'none',
-            borderRadius: 0
+            '& .EmojiPickerReact.epr-main': {
+                borderWidth: 0
+            }
         })
     }
 };
 export default Component;
-//# sourceMappingURL=SCLoyaltyProgramDetail.js.map