@selfcommunity/react-ui 0.7.0-alpha.349 → 0.7.0-alpha.350

package/lib/cjs/components/PrivateMessageComponent/PrivateMessageComponent.js

@@ -10,18 +10,17 @@ const system_1 = require("@mui/system");
 const types_1 = require("@selfcommunity/types");
 const PrivateMessageThread_1 = tslib_1.__importDefault(require("../PrivateMessageThread"));
 const PrivateMessageSnippets_1 = tslib_1.__importDefault(require("../PrivateMessageSnippets"));
-const PREFIX = 'SCPrivateMessageComponent';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    snippetsBox: `${PREFIX}-snippets-box`,
-    threadBox: `${PREFIX}-thread-box`,
-    hide: `${PREFIX}-hide`
+    root: `${constants_1.PREFIX}-root`,
+    snippetsBox: `${constants_1.PREFIX}-snippets-box`,
+    threadBox: `${constants_1.PREFIX}-thread-box`,
+    hide: `${constants_1.PREFIX}-hide`
 };
 const Root = (0, styles_1.styled)(material_1.Grid, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  *
  * > API documentation for the Community-JS Private Messages component. Learn about the available props and the CSS API.
@@ -56,7 +55,7 @@ function PrivateMessageComponent(inProps) {
     //PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { id = null, className = null, onItemClick = null, onThreadBack = null, onSingleMessageOpen = null } = props, rest = tslib_1.__rest(props, ["id", "className", "onItemClick", "onThreadBack", "onSingleMessageOpen"]);
     // CONTEXT

package/lib/cjs/components/PrivateMessageComponent/Skeleton.d.ts

@@ -24,9 +24,9 @@ export declare type PrivateMessageComponentProps = React.PropsWithChildren<Priva
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageComponentSkeleton-root|Styles applied to the root element.|
- |snippetsSection|.SCPrivateMessageComponentSkeleton-snippets-section|Styles applied to the snippets section|
- |threadSection|.SCPrivateMessageComponentSkeleton-thread-section|Styles applied to the thread section|
+ |root|.SCPrivateMessageComponent-skeleton-root|Styles applied to the root element.|
+ |snippetsSection|.SCPrivateMessageComponent-snippets-section|Styles applied to the snippets section|
+ |threadSection|.SCPrivateMessageComponent-thread-section|Styles applied to the thread section|
  *
  */
 export default function PrivateMessageComponentSkeleton(props: PrivateMessageComponentProps): JSX.Element;

package/lib/cjs/components/PrivateMessageComponent/Skeleton.js

@@ -7,16 +7,15 @@ const material_1 = require("@mui/material");
 const Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageSnippets/Skeleton"));
 const Skeleton_2 = tslib_1.__importDefault(require("../PrivateMessageThread/Skeleton"));
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
-const PREFIX = 'SCPrivateMessageComponentSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    snippetsSection: `${PREFIX}-snippets-section`,
-    threadSection: `${PREFIX}-thread-section`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    snippetsSection: `${constants_1.PREFIX}-snippets-section`,
+    threadSection: `${constants_1.PREFIX}-thread-section`
 };
 const Root = (0, styles_1.styled)(material_1.Grid, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
 })(() => ({}));
 /**
  * > API documentation for the Community-JS Private Messages Skeleton Template. Learn about the available props and the CSS API.
@@ -35,9 +34,9 @@ const Root = (0, styles_1.styled)(material_1.Grid, {
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageComponentSkeleton-root|Styles applied to the root element.|
- |snippetsSection|.SCPrivateMessageComponentSkeleton-snippets-section|Styles applied to the snippets section|
- |threadSection|.SCPrivateMessageComponentSkeleton-thread-section|Styles applied to the thread section|
+ |root|.SCPrivateMessageComponent-skeleton-root|Styles applied to the root element.|
+ |snippetsSection|.SCPrivateMessageComponent-snippets-section|Styles applied to the snippets section|
+ |threadSection|.SCPrivateMessageComponent-thread-section|Styles applied to the thread section|
  *
  */
 function PrivateMessageComponentSkeleton(props) {

package/lib/cjs/components/PrivateMessageComponent/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageComponent";

package/lib/cjs/components/PrivateMessageComponent/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPrivateMessageComponent';

package/lib/cjs/components/PrivateMessageEditor/MessageMediaUploader/index.js

@@ -17,26 +17,25 @@ const react_intl_1 = require("react-intl");
 const thumbnailCoverter_1 = require("../../../utils/thumbnailCoverter");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const sizeCoverter_1 = require("../../../utils/sizeCoverter");
+const constants_1 = require("../constants");
 const MAX_FILE_SIZE = 10485760;
 const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)((props, ref) => (react_1.default.createElement(material_1.IconButton, Object.assign({}, props, { ref: ref, color: "inherit" }),
     react_1.default.createElement(Icon_1.default, null, "upload")))));
-const PREFIX = 'SCMessageMediaUploader';
 const classes = {
-    root: `${PREFIX}-root`,
-    uploadSection: `${PREFIX}-upload-section`,
-    uploadButton: `${PREFIX}-upload-button`,
-    closeButton: `${PREFIX}-close-button`,
-    previewContent: `${PREFIX}-preview-content`,
-    previewItem: `${PREFIX}-preview-item`,
-    previewActions: `${PREFIX}-preview-actions`,
-    progress: `${PREFIX}-progress`,
-    previewInfo: `${PREFIX}-preview-info`
+    root: `${constants_1.PREFIX}-message-media-uploader-root`,
+    uploadSection: `${constants_1.PREFIX}-upload-section`,
+    uploadButton: `${constants_1.PREFIX}-upload-button`,
+    closeButton: `${constants_1.PREFIX}-close-button`,
+    previewContent: `${constants_1.PREFIX}-preview-content`,
+    previewItem: `${constants_1.PREFIX}-preview-item`,
+    previewActions: `${constants_1.PREFIX}-preview-actions`,
+    progress: `${constants_1.PREFIX}-progress`,
+    previewInfo: `${constants_1.PREFIX}-preview-info`
 };
 const Root = (0, styles_1.styled)(Widget_1.default, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'MessageMediaUploader'
+})(() => ({}));
 function MessageMediaUploader(props) {
     //PROPS
     const { className, forwardMessageFile, onClose, isUploading, action } = props;

package/lib/cjs/components/PrivateMessageEditor/PrivateMessageEditor.d.ts

@@ -48,7 +48,7 @@ export interface PrivateMessageEditorProps {
  |---|---|---|
  |root|.SCPrivateMessageEditor-root|Styles applied to the root element.|
  |messageInput|.SCPrivateMessageEditor-card|Styles applied to the message input element.|
- |uploadMediaSection|.SCPrivateMessageEditor-upload-media-section|Styles applied to the upload media section.|
+ |mediaUploader|.SCPrivateMessageEditor-media-uploader|Styles applied to the message media uploader section.|
  |emojiSection|.SCPrivateMessageEditor-emoji-section|Styles applied to the emoji section.|
 
  * @param inProps

package/lib/cjs/components/PrivateMessageEditor/PrivateMessageEditor.js

@@ -11,25 +11,24 @@ const react_intl_1 = require("react-intl");
 const system_1 = require("@mui/system");
 const EmojiPicker_1 = tslib_1.__importDefault(require("../../shared/EmojiPicker"));
 const utils_1 = require("@selfcommunity/utils");
+const constants_1 = require("./constants");
 const messages = (0, react_intl_1.defineMessages)({
     placeholder: {
         id: 'ui.privateMessage.editor.placeholder',
         defaultMessage: 'ui.privateMessage.editor.placeholder'
     }
 });
-const PREFIX = 'SCPrivateMessageEditor';
 const classes = {
-    root: `${PREFIX}-root`,
-    ios: `${PREFIX}-ios`,
-    messageInput: `${PREFIX}-message-input`,
-    uploadMediaSection: `${PREFIX}-upload-media-section`,
-    emojiSection: `${PREFIX}-emoji-section`
+    root: `${constants_1.PREFIX}-root`,
+    ios: `${constants_1.PREFIX}-ios`,
+    messageInput: `${constants_1.PREFIX}-message-input`,
+    mediaUploader: `${constants_1.PREFIX}-media-uploader`,
+    emojiSection: `${constants_1.PREFIX}-emoji-section`
 };
 const Root = (0, styles_1.styled)(material_1.Box, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Private Message Editor component. Learn about the available props and the CSS API.
 
@@ -50,7 +49,7 @@ const Root = (0, styles_1.styled)(material_1.Box, {
  |---|---|---|
  |root|.SCPrivateMessageEditor-root|Styles applied to the root element.|
  |messageInput|.SCPrivateMessageEditor-card|Styles applied to the message input element.|
- |uploadMediaSection|.SCPrivateMessageEditor-upload-media-section|Styles applied to the upload media section.|
+ |mediaUploader|.SCPrivateMessageEditor-media-uploader|Styles applied to the message media uploader section.|
  |emojiSection|.SCPrivateMessageEditor-emoji-section|Styles applied to the emoji section.|
 
  * @param inProps
@@ -59,7 +58,7 @@ function PrivateMessageEditor(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { autoHide = null, className = null, send = null, onThreadChangeId, error = false, onErrorRemove = null, autoHideDeletion } = props, rest = tslib_1.__rest(props, ["autoHide", "className", "send", "onThreadChangeId", "error", "onErrorRemove", "autoHideDeletion"]);
     // STATE
@@ -130,7 +129,7 @@ function PrivateMessageEditor(inProps) {
             react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.error.send.msg", defaultMessage: "ui.privateMessage.editor.error.send.msg" })));
     }
     function renderContent() {
-        return (react_1.default.createElement(react_1.default.Fragment, null, openMediaSection ? (react_1.default.createElement(MessageMediaUploader_1.default, { className: classes.uploadMediaSection, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: react_1.default.createElement(material_1.IconButton, { disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend },
+        return (react_1.default.createElement(react_1.default.Fragment, null, openMediaSection ? (react_1.default.createElement(MessageMediaUploader_1.default, { className: classes.mediaUploader, open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFiles, isUploading: setUploading, action: react_1.default.createElement(material_1.IconButton, { disabled: (!message && !messageFiles.length) || uploading, onClick: handleMessageSend },
                 react_1.default.createElement(Icon_1.default, null, "send")) })) : (react_1.default.createElement(react_1.default.Fragment, null,
             openEmojiSection && react_1.default.createElement(EmojiPicker_1.default, { className: classes.emojiSection, onEmojiClick: handleEmojiClick, width: "100%", searchDisabled: true }),
             react_1.default.createElement(material_1.TextField, { size: "small", inputRef: ref, disabled: Boolean(messageFiles.length) || openMediaSection, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, onSelect: () => setOpenEmojiSection(false), InputProps: {

package/lib/cjs/components/PrivateMessageEditor/Skeleton.js

@@ -4,15 +4,14 @@ const tslib_1 = require("tslib");
 const react_1 = tslib_1.__importDefault(require("react"));
 const Skeleton_1 = require("../Skeleton");
 const styles_1 = require("@mui/material/styles");
-const PREFIX = 'SCMessageEditorSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`
+    root: `${constants_1.PREFIX}-skeleton-root`
 };
 const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Message Editor Skeleton component. Learn about the available props and the CSS API.
 

package/lib/cjs/components/PrivateMessageEditor/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageEditor";

package/lib/cjs/components/PrivateMessageEditor/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPrivateMessageEditor';

package/lib/cjs/components/PrivateMessageSnippetItem/PrivateMessageSnippetItem.js

@@ -11,20 +11,19 @@ const react_core_1 = require("@selfcommunity/react-core");
 const classnames_1 = tslib_1.__importDefault(require("classnames"));
 const system_1 = require("@mui/system");
 const UserAvatar_1 = tslib_1.__importDefault(require("../../shared/UserAvatar"));
-const PREFIX = 'SCPrivateMessageSnippetItem';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    username: `${PREFIX}-username`,
-    badgeLabel: `${PREFIX}-badge-label`,
-    time: `${PREFIX}-time`,
-    menuItem: `${PREFIX}-menu-item`,
-    unread: `${PREFIX}-unread`
+    root: `${constants_1.PREFIX}-root`,
+    username: `${constants_1.PREFIX}-username`,
+    badgeLabel: `${constants_1.PREFIX}-badge-label`,
+    time: `${constants_1.PREFIX}-time`,
+    menuItem: `${constants_1.PREFIX}-menu-item`,
+    unread: `${constants_1.PREFIX}-unread`
 };
 const Root = (0, styles_1.styled)(material_1.ListItem, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 const PREFERENCES = [react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL, react_core_1.SCPreferences.STAFF_STAFF_BADGE_ICON];
 /**
  * > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.
@@ -58,7 +57,7 @@ function PrivateMessageSnippetItem(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { message = null, className = null, onItemClick = null, secondaryAction = null } = props, rest = tslib_1.__rest(props, ["message", "className", "onItemClick", "secondaryAction"]);
     // CONTEXT

package/lib/cjs/components/PrivateMessageSnippetItem/Skeleton.d.ts

@@ -9,14 +9,14 @@
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetItemSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippetItem-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetItemSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageSnippetItemSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippetItem-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageSnippetItem-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageSnippetItemSkeleton(props: any): JSX.Element;

package/lib/cjs/components/PrivateMessageSnippetItem/Skeleton.js

@@ -8,14 +8,15 @@ const ListItemText_1 = tslib_1.__importDefault(require("@mui/material/ListItemTe
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("@mui/material/Skeleton"));
 const material_1 = require("@mui/material");
-const PREFIX = 'SCPrivateMessageSnippetItemSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    list: `${PREFIX}-list`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(ListItem_1.default)(({ theme }) => ({
-    maxWidth: 700
-}));
+const Root = (0, styles_1.styled)(ListItem_1.default, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSnippetItem Skeleton component. Learn about the available props and the CSS API.
 
@@ -27,14 +28,14 @@ const Root = (0, styles_1.styled)(ListItem_1.default)(({ theme }) => ({
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetItemSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippetItem-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetItemSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageSnippetItemSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippetItem-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageSnippetItem-list|Styles applied to the list element.|
  *
  */
 function PrivateMessageSnippetItemSkeleton(props) {

package/lib/cjs/components/PrivateMessageSnippetItem/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageSnippetItem";

package/lib/cjs/components/PrivateMessageSnippetItem/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPrivateMessageSnippetItem';

package/lib/cjs/components/PrivateMessageSnippets/PrivateMessageSnippets.js

@@ -15,26 +15,25 @@ const react_core_1 = require("@selfcommunity/react-core");
 const utils_1 = require("@selfcommunity/utils");
 const PrivateMessageSettingsIconButton_1 = tslib_1.__importDefault(require("../PrivateMessageSettingsIconButton"));
 const useMediaQuery_1 = tslib_1.__importDefault(require("@mui/material/useMediaQuery"));
+const constants_1 = require("./constants");
 const messages = (0, react_intl_1.defineMessages)({
     placeholder: {
         id: 'ui.privateMessage.snippets.searchBar.placeholder',
         defaultMessage: 'ui.privateMessage.snippets.searchBar.placeholder'
     }
 });
-const PREFIX = 'SCPrivateMessageSnippets';
 const classes = {
-    root: `${PREFIX}-root`,
-    searchBar: `${PREFIX}-search-bar`,
-    icon: `${PREFIX}-icon`,
-    input: `${PREFIX}-input`,
-    clear: `${PREFIX}-clear`,
-    newMessageButton: `${PREFIX}-new-message-button`
+    root: `${constants_1.PREFIX}-root`,
+    searchBar: `${constants_1.PREFIX}-search-bar`,
+    icon: `${constants_1.PREFIX}-icon`,
+    input: `${constants_1.PREFIX}-input`,
+    clear: `${constants_1.PREFIX}-clear`,
+    newMessageButton: `${constants_1.PREFIX}-new-message-button`
 };
 const Root = (0, styles_1.styled)(material_1.Card, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSnippets component. Learn about the available props and the CSS API.
  *
@@ -70,7 +69,7 @@ function PrivateMessageSnippets(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { className = null, userObj = null, snippetActions, clearSearch } = props, rest = tslib_1.__rest(props, ["className", "userObj", "snippetActions", "clearSearch"]);
     // STATE
@@ -211,7 +210,7 @@ function PrivateMessageSnippets(inProps) {
             react_1.default.createElement(material_1.Button, { variant: "outlined", size: "medium", className: classes.newMessageButton, onClick: handleOpenNewMessage },
                 react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.snippets.button.newMessage", defaultMessage: "ui.privateMessage.snippets.button.newMessage" })),
             data.snippets.length !== 0 && (react_1.default.createElement(react_1.default.Fragment, null,
-                react_1.default.createElement(material_1.TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, InputProps: {
+                react_1.default.createElement(material_1.TextField, { className: classes.searchBar, variant: "outlined", margin: "normal", fullWidth: true, id: `${constants_1.PREFIX}-search`, placeholder: `${intl.formatMessage(messages.placeholder)}`, size: "small", onChange: handleChange, value: search, InputProps: {
                         className: classes.input,
                         startAdornment: react_1.default.createElement(material_1.Icon, { className: classes.icon }, "search"),
                         endAdornment: (react_1.default.createElement(material_1.IconButton, { className: classes.clear, disabled: !search, onClick: handleClear, size: "small" },

package/lib/cjs/components/PrivateMessageSnippets/Skeleton.d.ts

@@ -9,16 +9,16 @@
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetsSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippets-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetsSkeleton-root|Styles applied to the root element.|
- |searchBar|.SCPrivateMessageSnippetsSkeleton-search-bar|Styles applied to the search bar element.|
- |button|.SCPrivateMessageSnippetsSkeleton-button|Styles applied to the button element.|
- |list|.SCPrivateMessageSnippetsSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippets-skeleton-root|Styles applied to the root element.|
+ |searchBar|.SCPrivateMessageSnippets-search-bar|Styles applied to the search bar element.|
+ |button|.SCPrivateMessageSnippets-button|Styles applied to the button element.|
+ |list|.SCPrivateMessageSnippets-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageSnippetsSkeleton(props: any): JSX.Element;

package/lib/cjs/components/PrivateMessageSnippets/Skeleton.js

@@ -6,14 +6,17 @@ const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const styles_1 = require("@mui/material/styles");
 const Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageSnippetItem/Skeleton"));
 const material_1 = require("@mui/material");
-const PREFIX = 'SCPrivateMessageSnippetsSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    searchBar: `${PREFIX}-search-bar`,
-    button: `${PREFIX}-button`,
-    list: `${PREFIX}-list`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    searchBar: `${constants_1.PREFIX}-search-bar`,
+    button: `${constants_1.PREFIX}-button`,
+    list: `${constants_1.PREFIX}-list`
 };
-const Root = (0, styles_1.styled)(material_1.Card)(({ theme }) => ({}));
+const Root = (0, styles_1.styled)(material_1.Card, {
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessageSnippets Skeleton component. Learn about the available props and the CSS API.
 
@@ -25,16 +28,16 @@ const Root = (0, styles_1.styled)(material_1.Card)(({ theme }) => ({}));
 
  #### Component Name
 
- The name `SCPrivateMessageSnippetsSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageSnippets-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageSnippetsSkeleton-root|Styles applied to the root element.|
- |searchBar|.SCPrivateMessageSnippetsSkeleton-search-bar|Styles applied to the search bar element.|
- |button|.SCPrivateMessageSnippetsSkeleton-button|Styles applied to the button element.|
- |list|.SCPrivateMessageSnippetsSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageSnippets-skeleton-root|Styles applied to the root element.|
+ |searchBar|.SCPrivateMessageSnippets-search-bar|Styles applied to the search bar element.|
+ |button|.SCPrivateMessageSnippets-button|Styles applied to the button element.|
+ |list|.SCPrivateMessageSnippets-list|Styles applied to the list element.|
  *
  */
 function PrivateMessageSnippetsSkeleton(props) {

package/lib/cjs/components/PrivateMessageSnippets/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageSnippets";

package/lib/cjs/components/PrivateMessageSnippets/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPrivateMessageSnippets';

package/lib/cjs/components/PrivateMessageThread/PrivateMessageThread.js

@@ -21,6 +21,7 @@ const utils_1 = require("@selfcommunity/utils");
 const notistack_1 = require("notistack");
 const ConfirmDialog_1 = tslib_1.__importDefault(require("../../shared/ConfirmDialog/ConfirmDialog"));
 const InfiniteScroll_1 = tslib_1.__importDefault(require("../../shared/InfiniteScroll"));
+const constants_1 = require("./constants");
 const translMessages = (0, react_intl_1.defineMessages)({
     placeholder: {
         id: 'ui.privateMessage.thread.newMessage.autocomplete.placeholder',
@@ -31,27 +32,25 @@ const translMessages = (0, react_intl_1.defineMessages)({
         defaultMessage: 'ui.privateMessage.thread.message.deleted'
     }
 });
-const PREFIX = 'SCPrivateMessageThread';
 const classes = {
-    root: `${PREFIX}-root`,
-    subHeader: `${PREFIX}-subheader`,
-    section: `${PREFIX}-section`,
-    emptyMessage: `${PREFIX}-empty-message`,
-    newMessageHeader: `${PREFIX}-new-message-header`,
-    newMessageHeaderContent: `${PREFIX}-new-message-header-content`,
-    newMessageHeaderIcon: `${PREFIX}-new-message-header-icon`,
-    newMessageContent: `${PREFIX}-new-message-content`,
-    sender: `${PREFIX}-sender`,
-    receiver: `${PREFIX}-receiver`,
-    autocomplete: `${PREFIX}-autocomplete`,
-    autocompleteDialog: `${PREFIX}-autocomplete-dialog`,
-    editor: `${PREFIX}-editor`
+    root: `${constants_1.PREFIX}-root`,
+    subHeader: `${constants_1.PREFIX}-subheader`,
+    section: `${constants_1.PREFIX}-section`,
+    emptyMessage: `${constants_1.PREFIX}-empty-message`,
+    newMessageHeader: `${constants_1.PREFIX}-new-message-header`,
+    newMessageHeaderContent: `${constants_1.PREFIX}-new-message-header-content`,
+    newMessageHeaderIcon: `${constants_1.PREFIX}-new-message-header-icon`,
+    newMessageContent: `${constants_1.PREFIX}-new-message-content`,
+    sender: `${constants_1.PREFIX}-sender`,
+    receiver: `${constants_1.PREFIX}-receiver`,
+    autocomplete: `${constants_1.PREFIX}-autocomplete`,
+    autocompleteDialog: `${constants_1.PREFIX}-autocomplete-dialog`,
+    editor: `${constants_1.PREFIX}-editor`
 };
 const Root = (0, styles_1.styled)(material_1.Card, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessage Thread component. Learn about the available props and the CSS API.
  *
@@ -94,7 +93,7 @@ function PrivateMessageThread(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
-        name: PREFIX
+        name: constants_1.PREFIX
     });
     const { userObj, openNewMessage = false, onNewMessageClose = null, onNewMessageSent = null, onSingleMessageOpen = null, className } = props, rest = tslib_1.__rest(props, ["userObj", "openNewMessage", "onNewMessageClose", "onNewMessageSent", "onSingleMessageOpen", "className"]);
     // CONTEXT

package/lib/cjs/components/PrivateMessageThread/Skeleton.d.ts

@@ -9,14 +9,14 @@
 
  #### Component Name
 
- The name `SCPrivateMessageThreadSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThread-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThread-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThread-list|Styles applied to the list element.|
  *
  */
 export default function PrivateMessageThreadSkeleton(props: any): JSX.Element;

package/lib/cjs/components/PrivateMessageThread/Skeleton.js

@@ -6,17 +6,16 @@ const styles_1 = require("@mui/material/styles");
 const material_1 = require("@mui/material");
 const List_1 = tslib_1.__importDefault(require("@mui/material/List"));
 const Skeleton_1 = tslib_1.__importDefault(require("../PrivateMessageThreadItem/Skeleton"));
-const PREFIX = 'SCPrivateMessageThreadSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    list: `${PREFIX}-list`,
-    editor: `${PREFIX}-editor`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    list: `${constants_1.PREFIX}-list`,
+    editor: `${constants_1.PREFIX}-editor`
 };
 const Root = (0, styles_1.styled)(material_1.Card, {
-    name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS PrivateMessage Thread Skeleton component. Learn about the available props and the CSS API.
 
@@ -28,14 +27,14 @@ const Root = (0, styles_1.styled)(material_1.Card, {
 
  #### Component Name
 
- The name `SCPrivateMessageThreadSkeleton` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageThread-skeleton-root` can be used when providing style overrides in the theme.
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCPrivateMessageThreadSkeleton-root|Styles applied to the root element.|
- |list|.SCPrivateMessageThreadSkeleton-list|Styles applied to the list element.|
+ |root|.SCPrivateMessageThread-skeleton-root|Styles applied to the root element.|
+ |list|.SCPrivateMessageThread-list|Styles applied to the list element.|
  *
  */
 function PrivateMessageThreadSkeleton(props) {

package/lib/cjs/components/PrivateMessageThread/constants.d.ts

@@ -0,0 +1 @@
+export declare const PREFIX = "SCPrivateMessageThread";

package/lib/cjs/components/PrivateMessageThread/constants.js

@@ -0,0 +1,4 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PREFIX = void 0;
+exports.PREFIX = 'SCPrivateMessageThread';

package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.d.ts

@@ -62,6 +62,7 @@ export interface PrivateMessageThreadItemProps {
  |video|.SCPrivateMessageThreadItem-video|Styles applied to the message video element.|
  |messageTime|.SCPrivateMessageThreadItem-message-time|Styles applied to the thread message time element.|
  |menuItem|.SCPrivateMessageThreadItem-menu-item|Styles applied to the thread message menu item element.|
+ |dialogRoot|.SCPrivateMessageThreadItem-dialog-root|Styles applied to dialog root element.|
 
 
  * @param inProps