@selfcommunity/react-ui 0.7.0-alpha.80 → 0.7.0-alpha.82

package/lib/cjs/components/PrivateMessageEditor/MessageMediaUploader/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/PrivateMessageEditor/MessageMediaUploader/index.tsx"],"names":[],"mappings":"AAwCA,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,kBAAkB,CAAC,EAAE,CAAC,IAAI,KAAA,KAAK,IAAI,CAAC;IACpC;;;OAGG;IACH,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,OAAO,CAAC;IACf;;;OAGG;IACH,cAAc,CAAC,EAAE,MAAM,IAAI,CAAC;IAC5B;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,IAAI,CAAC;CAC5B;AAED,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,KAAK,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,CA8H1F"}

package/lib/cjs/components/{MessageEditor → PrivateMessageEditor}/MessageMediaUploader/index.js

@@ -43,7 +43,7 @@ const UploadButton = (0, upload_button_1.asUploadButton)((0, react_1.forwardRef)
 const PREFIX = 'SCMessageMediaUploader';
 const classes = {
     previewContainer: `${PREFIX}-preview-container`,
-    uploadButton: `${PREFIX}-upload-button`,
+    upload: `${PREFIX}-upload`,
     docPreview: `${PREFIX}-doc-preview`,
     docLoadingPreview: `${PREFIX}-doc-loading-preview`,
     progress: `${PREFIX}-progress`,
@@ -53,54 +53,7 @@ const Root = (0, styles_1.styled)(Widget_1.default, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    '& .MuiCardHeader-root': {
-        paddingRight: theme.spacing(2),
-        paddingTop: theme.spacing(1)
-    },
-    backgroundColor: theme.palette.grey['A200'],
-    [`& .${classes.previewContainer}`]: {
-        display: 'flex',
-        justifyContent: 'center',
-        img: {
-            maxWidth: '50%'
-        },
-        video: {
-            maxWidth: '40%'
-        }
-    },
-    [`& .${classes.uploadButton}`]: {
-        backgroundColor: theme.palette.common.white
-    },
-    [`& .${classes.docPreview}`]: {
-        [theme.breakpoints.down('md')]: {
-            height: 100,
-            width: 200
-        },
-        height: 200,
-        width: 400,
-        position: 'relative'
-    },
-    [`& .${classes.docLoadingPreview}`]: {
-        backgroundColor: theme.palette.background.default,
-        height: 100,
-        width: 200,
-        position: 'relative',
-        '& .MuiCircularProgress-root': {
-            position: 'absolute',
-            top: '40%',
-            left: '45%'
-        },
-        [`& .${classes.progress}`]: {
-            display: 'flex',
-            justifyContent: 'center'
-        },
-        [`& .${classes.clearMedia}`]: {
-            display: 'flex',
-            justifyContent: 'flex-end'
-        }
-    }
-}));
+})(({ theme }) => ({}));
 function MessageMediaUploader(props) {
     //PROPS
     const { forwardMessageFile, onClose, onFileUploaded, onFileCleared } = props;
@@ -177,9 +130,11 @@ function MessageMediaUploader(props) {
                     method: api_services_1.Endpoints.PrivateMessageUploadMediaInChunks.method
                 }, chunkSize: 204800, chunked: true },
                 react_1.default.createElement(MessageChunkUploader_1.default, { onStart: handleStart, onSuccess: handleSuccess, onProgress: handleProgress, onError: handleError }),
-                react_1.default.createElement(material_1.Box, { className: classes.progress }, Object.values(uploading).map((chunk, index) => (react_1.default.createElement("div", { key: index },
+                react_1.default.createElement(material_1.Box, { className: classes.progress }, Object.values(uploading).map((chunk, index) => (react_1.default.createElement(react_1.default.Fragment, { key: index },
                     react_1.default.createElement(material_1.Typography, { align: "center" }, `${Math.round(chunk.completed)}%`))))),
-                react_1.default.createElement(material_1.Box, { sx: { display: 'flex', justifyContent: 'center' } }, !file && !loading && react_1.default.createElement(UploadButton, { className: classes.uploadButton, inputFieldName: "qqfile" })),
+                react_1.default.createElement(material_1.Box, { className: classes.upload },
+                    " ",
+                    !file && !loading && react_1.default.createElement(UploadButton, { inputFieldName: "qqfile" })),
                 react_1.default.createElement(material_1.Box, { className: classes.clearMedia }, previews.length && loaded ? (react_1.default.createElement(material_1.IconButton, { onClick: onClear },
                     react_1.default.createElement(Icon_1.default, null, "close"))) : null),
                 react_1.default.createElement(material_1.Box, { className: classes.previewContainer }, fileType && fileType.startsWith(types_1.SCMessageFileType.DOCUMENT) ? (react_1.default.createElement(material_1.Box, { className: loaded ? classes.docPreview : classes.docLoadingPreview }, file && loaded ? (react_1.default.createElement("iframe", { src: file.file_url, title: "file", width: "100%", height: "100%", style: { resize: 'both' }, loading: "lazy" })) : (react_1.default.createElement(material_1.CircularProgress, { size: 30 })))) : (react_1.default.createElement(upload_preview_1.default, { rememberPreviousBatches: true, previewMethodsRef: previewMethodsRef, onPreviewsChanged: onPreviewsChanged })))))));

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/components/PrivateMessageEditor/MessageMediaUploader/index.tsx"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,48 @@
+import { SCMessageFileType } from '@selfcommunity/types';
+export interface PrivateMessageEditorProps {
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * Callback to send the message
+     */
+    send?: (message?: string, file?: SCMessageFileType) => void;
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *
+ > API documentation for the Community-JS Private Message Editor component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PrivateMessageEditor} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPrivateMessageEditor` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPrivateMessageEditor-root|Styles applied to the root element.|
+ |messageInput|.SCPrivateMessageEditor-card|Styles applied to the message input element.|
+ |sendMediaSection|.SCPrivateMessageEditor-send-media-section|Styles applied to the send media section.|
+
+ * @param inProps
+ */
+export default function PrivateMessageEditor(inProps: PrivateMessageEditorProps): JSX.Element;
+//# sourceMappingURL=PrivateMessageEditor.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrivateMessageEditor.d.ts","sourceRoot":"","sources":["../../../../src/components/PrivateMessageEditor/PrivateMessageEditor.tsx"],"names":[],"mappings":"AASA,OAAO,EAAC,iBAAiB,EAAC,MAAM,sBAAsB,CAAC;AA+BvD,MAAM,WAAW,yBAAyB;IACxC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,EAAE,iBAAiB,KAAK,IAAI,CAAC;IAC5D;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,MAAM,CAAC,OAAO,UAAU,oBAAoB,CAAC,OAAO,EAAE,yBAAyB,GAAG,GAAG,CAAC,OAAO,CA2J5F"}

package/lib/cjs/components/{MessageEditor/MessageEditor.js → PrivateMessageEditor/PrivateMessageEditor.js}

@@ -52,7 +52,13 @@ typeof window !== 'undefined' &&
     Promise.resolve().then(() => __importStar(require('emoji-picker-react'))).then((_module) => {
         Picker = _module.default;
     });
-const PREFIX = 'SCMessageEditor';
+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`,
     messageInput: `${PREFIX}-message-input`,
@@ -62,60 +68,33 @@ const Root = (0, styles_1.styled)(material_1.Box, {
     name: PREFIX,
     slot: 'Root',
     overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    width: '100%',
-    position: 'absolute',
-    bottom: '0px',
-    zIndex: 1,
-    [`& .${classes.messageInput}`]: {
-        width: '100%'
-    },
-    [`& .${classes.sendMediaSection}`]: {
-        backgroundColor: theme.palette.grey['A200'],
-        display: 'flex',
-        justifyContent: 'center'
-    }
-}));
-const MobileRoot = (0, styles_1.styled)(material_1.AppBar, {
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    position: 'fixed',
-    top: 'auto',
-    bottom: 0,
-    backgroundColor: theme.palette.common.white,
-    [`& .${classes.sendMediaSection}`]: {
-        backgroundColor: theme.palette.grey['A200'],
-        display: 'flex',
-        justifyContent: 'center'
-    }
-}));
+})(({ theme }) => ({}));
 /**
  *
- > API documentation for the Community-JS Message Editor component. Learn about the available props and the CSS API.
+ > API documentation for the Community-JS Private Message Editor component. Learn about the available props and the CSS API.
 
  #### Import
 
  ```jsx
- import {MessageEditor} from '@selfcommunity/react-ui';
+ import {PrivateMessageEditor} from '@selfcommunity/react-ui';
  ```
 
  #### Component Name
 
- The name `SCMessageEditor` can be used when providing style overrides in the theme.
+ The name `SCPrivateMessageEditor` can be used when providing style overrides in the theme.
 
 
  #### CSS
 
  |Rule Name|Global class|Description|
  |---|---|---|
- |root|.SCMessageEditor-root|Styles applied to the root element.|
- |messageInput|.SCMessageEditor-card|Styles applied to the message input element.|
- |sendMediaSection|.SCMessageEditor-send-media-section|Styles applied to the send media section.|
+ |root|.SCPrivateMessageEditor-root|Styles applied to the root element.|
+ |messageInput|.SCPrivateMessageEditor-card|Styles applied to the message input element.|
+ |sendMediaSection|.SCPrivateMessageEditor-send-media-section|Styles applied to the send media section.|
 
  * @param inProps
  */
-function MessageEditor(inProps) {
+function PrivateMessageEditor(inProps) {
     // PROPS
     const props = (0, system_1.useThemeProps)({
         props: inProps,
@@ -128,9 +107,11 @@ function MessageEditor(inProps) {
     const [message, setMessage] = (0, react_1.useState)('');
     const [messageFile, setMessageFile] = (0, react_1.useState)(null);
     const [show, setShow] = (0, react_1.useState)(false);
-    const [emojiAnchorEl, setEmojiAnchorEl] = react_1.default.useState(null);
+    const [emojiAnchorEl, setEmojiAnchorEl] = (0, react_1.useState)(false);
     const [openMediaSection, setOpenMediaSection] = (0, react_1.useState)(false);
     const [threadId, setThreadId] = (0, react_1.useState)(null);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
     // REF
     const ref = (0, react_1.useRef)(null);
     // HANDLERS
@@ -154,9 +135,9 @@ function MessageEditor(inProps) {
     const handleToggleEmoji = (event) => {
         setEmojiAnchorEl(emojiAnchorEl ? null : event.currentTarget);
     };
-    const handleEmojiClick = (event, emojiObject) => {
+    const handleEmojiClick = (emojiData, event) => {
         const cursor = ref.current.selectionStart;
-        const text = message.slice(0, cursor) + emojiObject.emoji;
+        const text = message.slice(0, cursor) + emojiData.emoji;
         setMessage(text);
         setShow(true);
     };
@@ -175,34 +156,30 @@ function MessageEditor(inProps) {
         return (react_1.default.createElement(react_1.default.Fragment, null,
             openMediaSection && (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(material_1.Box, { className: classes.sendMediaSection }, show && (react_1.default.createElement(material_1.Button, { disabled: !messageFile, onClick: handleMessageSend, variant: "outlined" },
-                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.messageEditor.button.send", defaultMessage: "ui.messageEditor.button.send" })))),
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.editor.button.send", defaultMessage: "ui.privateMessage.editor.button.send" })))),
                 react_1.default.createElement(index_1.default, { open: openMediaSection, onClose: handleMediaSectionClose, forwardMessageFile: handleMessageFile, onFileUploaded: () => setShow(true), onFileCleared: () => setShow(false) }))),
-            react_1.default.createElement(material_1.TextField, { size: "small", ref: ref, className: classes.messageInput, multiline: true, placeholder: "Aa", value: message, onChange: handleMessageInput, InputProps: {
-                    endAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
-                        react_1.default.createElement(material_1.InputAdornment, { position: "end" },
+            react_1.default.createElement(material_1.TextField, { size: "small", ref: ref, className: classes.messageInput, multiline: true, placeholder: `${intl.formatMessage(messages.placeholder)}`, value: message, onChange: handleMessageInput, maxRows: 2, InputProps: {
+                    startAdornment: (react_1.default.createElement(react_1.default.Fragment, null,
+                        react_1.default.createElement(material_1.Stack, null,
+                            react_1.default.createElement(material_1.IconButton, { onClick: handleToggleEmoji },
+                                react_1.default.createElement(Icon_1.default, null, "sentiment_satisfied_alt")),
+                            isMobile ? (react_1.default.createElement(BaseDrawer_1.default, { open: Boolean(emojiAnchorEl), onClose: handleToggleEmoji, width: '100%' }, Picker && react_1.default.createElement(Picker, { onEmojiClick: handleEmojiClick }))) : (react_1.default.createElement(material_1.Popover, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: handleToggleEmoji, TransitionComponent: material_1.Fade, anchorOrigin: {
+                                    vertical: 'top',
+                                    horizontal: 'right'
+                                }, transformOrigin: {
+                                    vertical: 'bottom',
+                                    horizontal: 'left'
+                                }, sx: (theme) => {
+                                    return { zIndex: theme.zIndex.tooltip };
+                                } }, Picker && react_1.default.createElement(Picker, { onEmojiClick: handleEmojiClick })))),
+                        react_1.default.createElement(material_1.InputAdornment, { position: "start" },
                             react_1.default.createElement(material_1.IconButton, { disabled: message !== '', onClick: () => setOpenMediaSection(true) },
-                                react_1.default.createElement(Icon_1.default, null, "attach_file"))),
-                        react_1.default.createElement(material_1.InputAdornment, { position: "end" },
-                            react_1.default.createElement(material_1.Stack, null,
-                                react_1.default.createElement("div", null,
-                                    react_1.default.createElement(material_1.IconButton, { size: "small", onClick: handleToggleEmoji },
-                                        react_1.default.createElement(Icon_1.default, null, "sentiment_satisfied_alt")),
-                                    isMobile ? (react_1.default.createElement(BaseDrawer_1.default, { open: Boolean(emojiAnchorEl), onClose: handleToggleEmoji, width: '100%' }, Picker && react_1.default.createElement(Picker, { onEmojiClick: handleEmojiClick }))) : (react_1.default.createElement(material_1.Popover, { open: Boolean(emojiAnchorEl), anchorEl: emojiAnchorEl, onClose: handleToggleEmoji, anchorOrigin: {
-                                            vertical: 'top',
-                                            horizontal: 'right'
-                                        }, transformOrigin: {
-                                            vertical: 'bottom',
-                                            horizontal: 'left'
-                                        }, sx: (theme) => {
-                                            return { zIndex: theme.zIndex.tooltip };
-                                        } }, Picker && react_1.default.createElement(Picker, { onEmojiClick: handleEmojiClick }))))),
-                            react_1.default.createElement(material_1.IconButton, { disabled: messageFile !== null, onClick: handleMessageSend }, show && react_1.default.createElement(Icon_1.default, null, "send")))))
+                                react_1.default.createElement(Icon_1.default, null, "attach_file"))))),
+                    endAdornment: (react_1.default.createElement(material_1.IconButton, { disabled: messageFile !== null || !message, onClick: handleMessageSend },
+                        react_1.default.createElement(Icon_1.default, null, "send")))
                 } })));
     }
-    if (isMobile) {
-        return react_1.default.createElement(MobileRoot, null, renderContent());
-    }
     return (react_1.default.createElement(Root, Object.assign({}, rest, { className: (0, classnames_1.default)(classes.root, className) }), renderContent()));
 }
-exports.default = MessageEditor;
-//# sourceMappingURL=MessageEditor.js.map
+exports.default = PrivateMessageEditor;
+//# sourceMappingURL=PrivateMessageEditor.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrivateMessageEditor.js","sourceRoot":"","sources":["../../../../src/components/PrivateMessageEditor/PrivateMessageEditor.tsx"],"names":[],"mappings":"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"}

package/lib/{esm/components/MessageEditor → cjs/components/PrivateMessageEditor}/Skeleton.d.ts

@@ -4,7 +4,7 @@
  #### Import
 
  ```jsx
- import {MessageEditorSkeleton} from '@selfcommunity/react-ui';
+ import {PrivateMessageEditorSkeleton} from '@selfcommunity/react-ui';
  ```
 
  #### Component Name
@@ -18,5 +18,5 @@
  |root|.SCMessageEditorSkeleton-root|Styles applied to the root element.|
  *
  */
-export default function MessageEditorSkeleton(): JSX.Element;
+export default function PrivateMessageEditorSkeleton(): JSX.Element;
 //# sourceMappingURL=Skeleton.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.d.ts","sourceRoot":"","sources":["../../../../src/components/PrivateMessageEditor/Skeleton.tsx"],"names":[],"mappings":"AAeA;;;;;;;;;;;;;;;;;;;GAmBG;AACH,MAAM,CAAC,OAAO,UAAU,4BAA4B,IAAI,GAAG,CAAC,OAAO,CAElE"}

package/lib/cjs/components/{MessageEditor → PrivateMessageEditor}/Skeleton.js

@@ -21,7 +21,7 @@ const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
  #### Import
 
  ```jsx
- import {MessageEditorSkeleton} from '@selfcommunity/react-ui';
+ import {PrivateMessageEditorSkeleton} from '@selfcommunity/react-ui';
  ```
 
  #### Component Name
@@ -35,8 +35,8 @@ const Root = (0, styles_1.styled)(Skeleton_1.GenericSkeleton, {
  |root|.SCMessageEditorSkeleton-root|Styles applied to the root element.|
  *
  */
-function MessageEditorSkeleton() {
+function PrivateMessageEditorSkeleton() {
     return react_1.default.createElement(Root, { className: classes.root });
 }
-exports.default = MessageEditorSkeleton;
+exports.default = PrivateMessageEditorSkeleton;
 //# sourceMappingURL=Skeleton.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sourceRoot":"","sources":["../../../../src/components/PrivateMessageEditor/Skeleton.tsx"],"names":[],"mappings":";;;;;AAAA,kDAA0B;AAC1B,0CAA4C;AAC5C,iDAA4C;AAE5C,MAAM,MAAM,GAAG,yBAAyB,CAAC;AAEzC,MAAM,OAAO,GAAG;IACd,IAAI,EAAE,GAAG,MAAM,OAAO;CACvB,CAAC;AAEF,MAAM,IAAI,GAAG,IAAA,eAAM,EAAC,0BAAe,EAAE;IACnC,IAAI,EAAE,MAAM;IACZ,IAAI,EAAE,MAAM;IACZ,iBAAiB,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI;CAClD,CAAC,CAAC,CAAC,EAAC,KAAK,EAAC,EAAE,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC;AACtB;;;;;;;;;;;;;;;;;;;GAmBG;AACH,SAAwB,4BAA4B;IAClD,OAAO,8BAAC,IAAI,IAAC,SAAS,EAAE,OAAO,CAAC,IAAI,GAAI,CAAC;AAC3C,CAAC;AAFD,+CAEC"}

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

@@ -0,0 +1,5 @@
+import PrivateMessageEditor, { PrivateMessageEditorProps } from './PrivateMessageEditor';
+import PrivateMessageEditorSkeleton from './Skeleton';
+export default PrivateMessageEditor;
+export { PrivateMessageEditorProps, PrivateMessageEditorSkeleton };
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/PrivateMessageEditor/index.tsx"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,EAAE,EAAC,yBAAyB,EAAC,MAAM,wBAAwB,CAAC;AACvF,OAAO,4BAA4B,MAAM,YAAY,CAAC;AACtD,eAAe,oBAAoB,CAAC;AACpC,OAAO,EAAC,yBAAyB,EAAE,4BAA4B,EAAC,CAAC"}

package/lib/cjs/components/{Message → PrivateMessageEditor}/index.js

@@ -3,9 +3,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.MessageSkeleton = void 0;
-const Message_1 = __importDefault(require("./Message"));
+exports.PrivateMessageEditorSkeleton = void 0;
+const PrivateMessageEditor_1 = __importDefault(require("./PrivateMessageEditor"));
 const Skeleton_1 = __importDefault(require("./Skeleton"));
-exports.MessageSkeleton = Skeleton_1.default;
-exports.default = Message_1.default;
+exports.PrivateMessageEditorSkeleton = Skeleton_1.default;
+exports.default = PrivateMessageEditor_1.default;
 //# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/PrivateMessageEditor/index.tsx"],"names":[],"mappings":";;;;;;AAAA,kFAAuF;AACvF,0DAAsD;AAEnB,uCAF5B,kBAA4B,CAE4B;AAD/D,kBAAe,8BAAoB,CAAC"}

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

@@ -0,0 +1,58 @@
+import { SCPrivateMessageSnippetType } from '@selfcommunity/types';
+export interface PrivateMessageSnippetItemProps {
+    /**
+     * Overrides or extends the styles applied to the component.
+     * @default null
+     */
+    className?: string;
+    /**
+     * PrivateMessageItem Object
+     * @default null
+     */
+    message?: SCPrivateMessageSnippetType;
+    /**
+     * Hides this component
+     * @default false
+     */
+    autoHide?: boolean;
+    /**
+     * Props to spread item actions
+     */
+    actions?: {
+        onItemClick?: () => void;
+        onMenuClick?: () => void;
+    };
+    /**
+     * Any other properties
+     */
+    [p: string]: any;
+}
+/**
+ *
+ > API documentation for the Community-JS PrivateMessageSnippetItem component. Learn about the available props and the CSS API.
+
+ #### Import
+
+ ```jsx
+ import {PrivateMessageSnippetItem} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPrivateMessageSnippetItem` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPrivateMessageSnippetItem-root|Styles applied to the root element.|
+ |username|.SCPrivateMessageSnippetItem-username|Styles applied to the username element.|
+ |badgeLabel|.SCPrivateMessageSnippetItem-badgeLabel|Styles applied to the badgeLabel element.|
+ |time|.SCPrivateMessageSnippetItem-time|Styles applied to the time element.|
+ |menuItem|.SCPrivateMessageSnippetItem-menu-item|Styles applied to the menu item element.|
+
+ * @param inProps
+ */
+export default function PrivateMessageSnippetItem(inProps: PrivateMessageSnippetItemProps): JSX.Element;
+//# sourceMappingURL=PrivateMessageSnippetItem.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PrivateMessageSnippetItem.d.ts","sourceRoot":"","sources":["../../../../src/components/PrivateMessageSnippetItem/PrivateMessageSnippetItem.tsx"],"names":[],"mappings":"AAkBA,OAAO,EAAC,2BAA2B,EAAC,MAAM,sBAAsB,CAAC;AAyBjE,MAAM,WAAW,8BAA8B;IAC7C;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,OAAO,CAAC,EAAE,2BAA2B,CAAC;IACtC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IACH,OAAO,CAAC,EAAE;QACR,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;QACzB,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;KAC1B,CAAC;IACF;;OAEG;IACH,CAAC,CAAC,EAAE,MAAM,GAAG,GAAG,CAAC;CAClB;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;GA0BG;AACH,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,OAAO,EAAE,8BAA8B,GAAG,GAAG,CAAC,OAAO,CAoHtG"}

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

@@ -0,0 +1,162 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importStar(require("react"));
+const styles_1 = require("@mui/material/styles");
+const material_1 = require("@mui/material");
+const Skeleton_1 = __importDefault(require("./Skeleton"));
+const react_intl_1 = require("react-intl");
+const react_core_1 = require("@selfcommunity/react-core");
+const Icon_1 = __importDefault(require("@mui/material/Icon"));
+const classnames_1 = __importDefault(require("classnames"));
+const system_1 = require("@mui/system");
+const HiddenPlaceholder_1 = __importDefault(require("../../shared/HiddenPlaceholder"));
+const useMediaQuery_1 = __importDefault(require("@mui/material/useMediaQuery"));
+const PREFIX = 'SCPrivateMessageSnippetItem';
+const classes = {
+    root: `${PREFIX}-root`,
+    username: `${PREFIX}-username`,
+    badgeLabel: `${PREFIX}-badge-label`,
+    time: `${PREFIX}-time`,
+    menuItem: `${PREFIX}-menu-item`
+};
+const Root = (0, styles_1.styled)(material_1.ListItem, {
+    name: PREFIX,
+    slot: 'Root',
+    overridesResolver: (props, styles) => styles.root
+})(({ theme }) => ({}));
+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.
+
+ #### Import
+
+ ```jsx
+ import {PrivateMessageSnippetItem} from '@selfcommunity/react-ui';
+ ```
+
+ #### Component Name
+
+ The name `SCPrivateMessageSnippetItem` can be used when providing style overrides in the theme.
+
+
+ #### CSS
+
+ |Rule Name|Global class|Description|
+ |---|---|---|
+ |root|.SCPrivateMessageSnippetItem-root|Styles applied to the root element.|
+ |username|.SCPrivateMessageSnippetItem-username|Styles applied to the username element.|
+ |badgeLabel|.SCPrivateMessageSnippetItem-badgeLabel|Styles applied to the badgeLabel element.|
+ |time|.SCPrivateMessageSnippetItem-time|Styles applied to the time element.|
+ |menuItem|.SCPrivateMessageSnippetItem-menu-item|Styles applied to the menu item element.|
+
+ * @param inProps
+ */
+function PrivateMessageSnippetItem(inProps) {
+    var _a, _b, _c;
+    // PROPS
+    const props = (0, system_1.useThemeProps)({
+        props: inProps,
+        name: PREFIX
+    });
+    const { autoHide = false, message = null, className = null, actions = {} } = props, rest = __rest(props, ["autoHide", "message", "className", "actions"]);
+    // CONTEXT
+    const scUserContext = (0, react_1.useContext)(react_core_1.SCUserContext);
+    // PREFERENCES
+    const scPreferences = (0, react_core_1.useSCPreferences)();
+    const preferences = (0, react_1.useMemo)(() => {
+        const _preferences = {};
+        PREFERENCES.map((p) => (_preferences[p] = p in scPreferences.preferences ? scPreferences.preferences[p].value : null));
+        return _preferences;
+    }, [scPreferences.preferences]);
+    // INTL
+    const intl = (0, react_intl_1.useIntl)();
+    // STATE
+    const theme = (0, material_1.useTheme)();
+    const isMobile = (0, useMediaQuery_1.default)(theme.breakpoints.down('md'));
+    const isNew = message ? message.thread_status === 'new' : null;
+    const hasBadge = message === null || message === void 0 ? void 0 : message.receiver.community_badge;
+    const [anchorEl, setAnchorEl] = react_1.default.useState(null);
+    const open = Boolean(anchorEl);
+    //HANDLERS
+    const handleOpenMenu = (event) => {
+        setAnchorEl(event.currentTarget);
+    };
+    const handleMenuClose = () => {
+        setAnchorEl(null);
+    };
+    const handleMenuItemClick = () => {
+        actions.onMenuClick();
+        handleMenuClose();
+    };
+    /**
+     *
+     */
+    if (!message) {
+        return react_1.default.createElement(Skeleton_1.default, { elevation: 0 });
+    }
+    /**
+     * Renders root object (if not hidden by autoHide prop)
+     */
+    if (autoHide) {
+        return react_1.default.createElement(HiddenPlaceholder_1.default, null);
+    }
+    return (react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { secondaryAction: !isMobile && (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(material_1.IconButton, { size: "small", onClick: handleOpenMenu },
+                react_1.default.createElement(Icon_1.default, null, "more_vert")),
+            react_1.default.createElement(material_1.Menu, { anchorEl: anchorEl, open: open, onClose: handleMenuClose },
+                react_1.default.createElement(material_1.MenuItem, { classes: { root: classes.menuItem }, onClick: handleMenuItemClick },
+                    react_1.default.createElement(material_1.ListItemIcon, null,
+                        react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),
+                    react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessage.snippetItem.menu.item.delete", defaultMessage: "ui.privateMessage.snippetItem.menu.item.delete" }))))), disablePadding: true }),
+        react_1.default.createElement(material_1.ListItemButton, { onClick: actions.onItemClick },
+            react_1.default.createElement(material_1.ListItemAvatar, null, ((_a = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _a === void 0 ? void 0 : _a.username) === message.receiver.username ? (react_1.default.createElement(material_1.Avatar, { alt: message.sender.username, src: message.sender.avatar })) : (react_1.default.createElement(material_1.Avatar, { alt: message.receiver.username, src: message.receiver.avatar }))),
+            react_1.default.createElement(material_1.ListItemText, { primary: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(material_1.Typography, { component: "span", className: classes.username }, ((_b = scUserContext === null || scUserContext === void 0 ? void 0 : scUserContext.user) === null || _b === void 0 ? void 0 : _b.username) === message.receiver.username ? message.sender.username : message.receiver.username),
+                    hasBadge && preferences && (react_1.default.createElement(material_1.Chip, { component: "span", className: classes.badgeLabel, size: "small", label: preferences[react_core_1.SCPreferences.STAFF_STAFF_BADGE_LABEL] })),
+                    react_1.default.createElement(material_1.Typography, { color: "secondary", className: classes.time, component: "span" }, `${intl.formatDate(message.last_message_at, {
+                        weekday: 'long',
+                        day: 'numeric'
+                    })}`)), secondary: react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement(material_1.Typography, { component: "span", color: "text.secondary", dangerouslySetInnerHTML: { __html: (_c = message.headline) !== null && _c !== void 0 ? _c : message.message } }),
+                    isNew && (react_1.default.createElement(Icon_1.default, { fontSize: "small", color: "secondary" }, "fiber_manual_record"))) }))));
+}
+exports.default = PrivateMessageSnippetItem;
+//# sourceMappingURL=PrivateMessageSnippetItem.js.map