@selfcommunity/react-ui 0.7.0-alpha.335 → 0.7.0-alpha.336

package/lib/esm/components/Composer/Layer/LocationLayer/LocationLayer.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { BoxProps } from '@mui/material';
+import { SCContributionLocation } from '@selfcommunity/types/src/index';
+import { ComposerLayerProps } from '../../../../types/composer';
+export interface LocationLayerProps extends Omit<BoxProps, 'defaultValue'>, Omit<ComposerLayerProps, 'defaultValue'> {
+    defaultValue: SCContributionLocation;
+}
+declare const LocationLayer: React.ForwardRefExoticComponent<Pick<LocationLayerProps, "p" | "slot" | "style" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "border" | "borderTop" | "borderRight" | "borderBottom" | "borderLeft" | "borderColor" | "borderRadius" | "display" | "displayPrint" | "overflow" | "textOverflow" | "visibility" | "whiteSpace" | "flexBasis" | "flexDirection" | "flexWrap" | "justifyContent" | "alignItems" | "alignContent" | "order" | "flex" | "flexGrow" | "flexShrink" | "alignSelf" | "justifyItems" | "justifySelf" | "gap" | "columnGap" | "rowGap" | "gridColumn" | "gridRow" | "gridAutoFlow" | "gridAutoColumns" | "gridAutoRows" | "gridTemplateColumns" | "gridTemplateRows" | "gridTemplateAreas" | "gridArea" | "bgcolor" | "zIndex" | "position" | "top" | "right" | "bottom" | "left" | "boxShadow" | "width" | "maxWidth" | "minWidth" | "height" | "maxHeight" | "minHeight" | "boxSizing" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "my" | "pt" | "pr" | "pb" | "pl" | "px" | "py" | "margin" | "marginTop" | "marginRight" | "marginBottom" | "marginLeft" | "marginX" | "marginY" | "marginInline" | "marginInlineStart" | "marginInlineEnd" | "marginBlock" | "marginBlockStart" | "marginBlockEnd" | "padding" | "paddingTop" | "paddingRight" | "paddingBottom" | "paddingLeft" | "paddingX" | "paddingY" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "typography" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "letterSpacing" | "lineHeight" | "textAlign" | "textTransform" | "component" | "sx" | "classes" | "onClose" | "onSave"> & React.RefAttributes<unknown>>;
+export default LocationLayer;

package/lib/esm/components/Composer/Layer/LocationLayer/LocationLayer.js

@@ -0,0 +1,39 @@
+import { __rest } from "tslib";
+import React, { useCallback, useState } from 'react';
+import { FormattedMessage } from 'react-intl';
+import { Box, Button, DialogTitle, IconButton, Typography } from '@mui/material';
+import { styled } from '@mui/material/styles';
+import Icon from '@mui/material/Icon';
+import LocationAutocomplete from '../../../LocationAutocomplete';
+import DialogContent from '@mui/material/DialogContent';
+import classNames from 'classnames';
+import { PREFIX } from '../../constants';
+const classes = {
+    root: `${PREFIX}-layer-location-root`,
+    title: `${PREFIX}-layer-title`,
+    content: `${PREFIX}-layer-content`
+};
+const Root = styled(Box, {
+    name: PREFIX,
+    slot: 'LayerLocationRoot'
+})(() => ({}));
+const LocationLayer = React.forwardRef((props, ref) => {
+    // Props
+    const { className, onClose, onSave, defaultValue = null } = props, rest = __rest(props, ["className", "onClose", "onSave", "defaultValue"]);
+    // STATE
+    const [value, setValue] = useState(defaultValue);
+    // HANDLERS
+    const handleSave = useCallback(() => onSave(value), [value, onSave]);
+    const handleChange = useCallback((location) => setValue(location), []);
+    return React.createElement(Root, Object.assign({ ref: ref, className: classNames(className, classes.root) }, rest),
+        React.createElement(DialogTitle, { className: classes.title },
+            React.createElement(IconButton, { onClick: onClose },
+                React.createElement(Icon, null, "arrow_back")),
+            React.createElement(Typography, null,
+                React.createElement(FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" })),
+            React.createElement(Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave },
+                React.createElement(FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }))),
+        React.createElement(DialogContent, { className: classes.content },
+            React.createElement(LocationAutocomplete, { onChange: handleChange, defaultValue: value ? value : '' })));
+});
+export default LocationLayer;

package/lib/esm/components/Composer/Layer/LocationLayer/index.d.ts

@@ -0,0 +1,3 @@
+import LocationLayer, { LocationLayerProps } from './LocationLayer';
+export default LocationLayer;
+export { LocationLayerProps };

package/lib/esm/components/Composer/Layer/LocationLayer/index.js

@@ -0,0 +1,2 @@
+import LocationLayer from './LocationLayer';
+export default LocationLayer;

package/lib/esm/components/Composer/Skeleton.d.ts

@@ -16,10 +16,6 @@
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCComposerSkeleton-root|Styles applied to the root element.|
- |title|.SCComposerSkeleton-title|Styles applied to the title element.|
- |avatar|.SCComposerSkeleton-avatar|Styles applied to the avatar element.|
- |content|.SCComposerSkeleton-content|Styles applied to the content element.|
- |actions|.SCComposerSkeleton-actions|Styles applied to the actions section.|
  *
  */
 export default function ComposerSkeleton(): JSX.Element;

package/lib/esm/components/Composer/Skeleton.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import { styled } from '@mui/material/styles';
 import Skeleton from '@mui/material/Skeleton';
-import { Box, DialogActions, DialogContent, DialogTitle, useTheme } from '@mui/material';
-const PREFIX = 'SCComposerSkeleton';
+import { Box } from '@mui/material';
+import { PREFIX } from './constants';
 const classes = {
-    root: `${PREFIX}-root`,
+    root: `${PREFIX}-skeleton-root`,
     title: `${PREFIX}-title`,
     avatar: `${PREFIX}-avatar`,
     content: `${PREFIX}-content`,
@@ -12,54 +12,8 @@ const classes = {
 };
 const Root = styled(Box, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({
-    [`& .${classes.title}`]: {
-        borderBottom: '1px solid #D1D1D1',
-        padding: theme.spacing(),
-        paddingLeft: theme.spacing(2),
-        paddingRight: theme.spacing(2),
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'nowrap',
-        justifyContent: 'space-between',
-        alignItems: 'center',
-        '& > div': {
-            flex: 1,
-            textAlign: 'center'
-        },
-        '& > div:first-of-type': {
-            textAlign: 'left'
-        },
-        '& > div:last-of-type': {
-            textAlign: 'right',
-            display: 'block'
-        }
-    },
-    [`& .${classes.avatar}`]: {
-        width: theme.spacing(4),
-        height: theme.spacing(4),
-        display: 'inline-block'
-    },
-    [`& .${classes.content}`]: {
-        paddingLeft: 0,
-        paddingRight: 0,
-        paddingBottom: 0,
-        position: 'relative',
-        overflowY: 'visible'
-    },
-    [`& .${classes.actions}`]: {
-        margin: 0,
-        borderTop: '1px solid #D1D1D1',
-        padding: theme.spacing(1),
-        display: 'flex',
-        flexDirection: 'row',
-        flexWrap: 'nowrap',
-        justifyContent: 'space-between',
-        alignItems: 'center'
-    }
-}));
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Composer Skeleton component. Learn about the available props and the CSS API.
 
@@ -78,25 +32,9 @@ const Root = styled(Box, {
  |Rule Name|Global class|Description|
  |---|---|---|
  |root|.SCComposerSkeleton-root|Styles applied to the root element.|
- |title|.SCComposerSkeleton-title|Styles applied to the title element.|
- |avatar|.SCComposerSkeleton-avatar|Styles applied to the avatar element.|
- |content|.SCComposerSkeleton-content|Styles applied to the content element.|
- |actions|.SCComposerSkeleton-actions|Styles applied to the actions section.|
  *
  */
 export default function ComposerSkeleton() {
-    const theme = useTheme();
     return (React.createElement(Root, { className: classes.root },
-        React.createElement(DialogTitle, { className: classes.title },
-            React.createElement(Box, null,
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: "100%" })),
-            React.createElement(Box, null,
-                React.createElement(Skeleton, { className: classes.avatar, animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium })),
-            React.createElement(Box, null,
-                React.createElement(Skeleton, { animation: "wave", height: 10, width: "100%" }))),
-        React.createElement(DialogContent, { className: classes.content },
-            React.createElement(Skeleton, { sx: { height: 190 }, animation: "wave", variant: "rectangular" })),
-        React.createElement(DialogActions, { className: classes.actions },
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" }),
-            React.createElement(Skeleton, { animation: "wave", height: 10, width: "40%" }))));
+        React.createElement(Skeleton, { sx: { height: 190 }, animation: "wave", variant: "rectangular" })));
 }

package/lib/esm/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.d.ts

@@ -0,0 +1,6 @@
+import { ToggleButtonGroupProps } from '@mui/material';
+import { ReactElement } from 'react';
+export interface ComposerTypeButtonGroupProps extends Omit<ToggleButtonGroupProps, 'exclusive' | 'children' | 'defaultValue' | 'onChange'> {
+    onChange?: (value: string) => void;
+}
+export default function ComposerTypeButtonGroup(props: ComposerTypeButtonGroupProps): ReactElement;

package/lib/esm/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js

@@ -0,0 +1,44 @@
+import { __rest } from "tslib";
+import { styled } from '@mui/material/styles';
+import { ToggleButton, ToggleButtonGroup } from '@mui/material';
+import React, { useCallback, useEffect, useMemo } from 'react';
+import classNames from 'classnames';
+import { FormattedMessage } from 'react-intl';
+import { SCPreferences, UserUtils, useSCPreferences, useSCUser, } from '@selfcommunity/react-core';
+import { COMPOSER_TYPE_DISCUSSION, COMPOSER_TYPE_POLL, COMPOSER_TYPE_POST } from '../../../constants/Composer';
+import { PREFIX } from '../constants';
+const classes = {
+    root: `${PREFIX}-typeswitch-root`
+};
+const Root = styled(ToggleButtonGroup, {
+    name: PREFIX,
+    slot: 'TypeSwitchButtonGroupRoot'
+})(() => ({}));
+export default function ComposerTypeButtonGroup(props) {
+    // Context
+    const { preferences } = useSCPreferences();
+    const scUserContext = useSCUser();
+    // MEMO
+    const hasPollType = useMemo(() => preferences[SCPreferences.ADDONS_POLLS_ENABLED].value || UserUtils.isStaff(scUserContext.user), [preferences, scUserContext.user]);
+    const hasPostType = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_POST_TYPE_ENABLED].value, [preferences]);
+    const hasDiscussionType = useMemo(() => preferences[SCPreferences.CONFIGURATIONS_DISCUSSION_TYPE_ENABLED].value, [preferences]);
+    // PROPS
+    const { className, onChange, value } = props, rest = __rest(props, ["className", "onChange", "value"]);
+    // EFFECTS
+    useEffect(() => {
+        if (value === null) {
+            onChange && onChange(hasPostType ? COMPOSER_TYPE_POST : COMPOSER_TYPE_DISCUSSION);
+        }
+    }, [value]);
+    // HANDLERS
+    const handleChange = useCallback((event, value) => {
+        onChange && onChange(value);
+    }, [onChange]);
+    return React.createElement(Root, Object.assign({ className: classNames(classes.root, className), onChange: handleChange, exclusive: true, value: value }, rest),
+        hasPostType && React.createElement(ToggleButton, { value: COMPOSER_TYPE_POST },
+            React.createElement(FormattedMessage, { id: "ui.composer.typeSwitch.post", defaultMessage: "ui.composer.typeSwitch.post" })),
+        hasDiscussionType && React.createElement(ToggleButton, { value: COMPOSER_TYPE_DISCUSSION },
+            React.createElement(FormattedMessage, { id: "ui.composer.typeSwitch.discussion", defaultMessage: "ui.composer.typeSwitch.discussion" })),
+        hasPollType && React.createElement(ToggleButton, { value: COMPOSER_TYPE_POLL },
+            React.createElement(FormattedMessage, { id: "ui.composer.typeSwitch.poll", defaultMessage: "ui.composer.typeSwitch.poll" })));
+}

package/lib/esm/components/Composer/TypeSwitchButtonGroup/index.d.ts

@@ -0,0 +1,3 @@
+import ComposerHeader, { ComposerTypeButtonGroupProps } from './TypeSwitchButtonGroup';
+export default ComposerHeader;
+export type { ComposerTypeButtonGroupProps };

package/lib/esm/components/Composer/TypeSwitchButtonGroup/index.js

@@ -0,0 +1,2 @@
+import ComposerHeader from './TypeSwitchButtonGroup';
+export default ComposerHeader;

package/lib/esm/components/Composer/constants.d.ts

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

package/lib/esm/components/Composer/constants.js

@@ -0,0 +1 @@
+export const PREFIX = 'SCComposer';

package/lib/esm/components/Composer/index.d.ts

@@ -1,4 +1,3 @@
-import Composer, { ComposerProps, MAIN_VIEW, POLL_VIEW } from './Composer';
-import ComposerSkeleton from './Skeleton';
+import Composer, { ComposerProps } from './Composer';
 export default Composer;
-export { ComposerProps, ComposerSkeleton, MAIN_VIEW, POLL_VIEW };
+export { ComposerProps };

package/lib/esm/components/Composer/index.js

@@ -1,4 +1,2 @@
-import Composer, { MAIN_VIEW, POLL_VIEW } from './Composer';
-import ComposerSkeleton from './Skeleton';
+import Composer from './Composer';
 export default Composer;
-export { ComposerSkeleton, MAIN_VIEW, POLL_VIEW };

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

@@ -1,3 +1,4 @@
+import { ReactElement } from 'react';
 import { IconButtonProps } from '@mui/material';
 import { ComposerProps } from '../Composer';
 export interface ComposerIconButtonProps extends IconButtonProps {
@@ -33,4 +34,4 @@ export interface ComposerIconButtonProps extends IconButtonProps {
 
  * @param inProps
  */
-export default function ComposerIconButton(inProps: ComposerIconButtonProps): JSX.Element;
+export default function ComposerIconButton(inProps: ComposerIconButtonProps): ReactElement;

package/lib/esm/components/ComposerIconButton/ComposerIconButton.js

@@ -15,9 +15,8 @@ const classes = {
 };
 const Root = styled(IconButton, {
     name: PREFIX,
-    slot: 'Root',
-    overridesResolver: (props, styles) => styles.root
-})(({ theme }) => ({}));
+    slot: 'Root'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Composer Icon Button component. Learn about the available props and the CSS API.
 
@@ -46,7 +45,7 @@ export default function ComposerIconButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, ComposerProps = {} } = props, rest = __rest(props, ["className", "ComposerProps"]);
+    const { className = null, ComposerProps = {}, onClick } = props, rest = __rest(props, ["className", "ComposerProps", "onClick"]);
     // STATE
     const [open, setOpen] = useState(false);
     // CONTEXT
@@ -55,7 +54,7 @@ export default function ComposerIconButton(inProps) {
     const scRoutingContext = useSCRouting();
     const { enqueueSnackbar } = useSnackbar();
     // HANDLERS
-    const handleOpen = useCallback((event) => {
+    const handleClick = useCallback((event) => {
         if (scUserContext.user) {
             if (UserUtils.isBlocked(scUserContext.user)) {
                 enqueueSnackbar(React.createElement(FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
@@ -70,7 +69,8 @@ export default function ComposerIconButton(inProps) {
         else {
             scContext.settings.handleAnonymousAction();
         }
-    }, [enqueueSnackbar, scContext.settings, scUserContext.user]);
+        onClick && onClick(event);
+    }, [onClick, enqueueSnackbar, scContext.settings, scUserContext.user]);
     const handleClose = useCallback(() => {
         setOpen(false);
     }, []);
@@ -84,7 +84,7 @@ export default function ComposerIconButton(inProps) {
         });
     }, []);
     return (React.createElement(React.Fragment, null,
-        React.createElement(Root, Object.assign({ className: classNames(classes.root, className), onClick: handleOpen }, rest),
+        React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleClick }),
             React.createElement(Icon, null, "add_circle_outline")),
-        React.createElement(Composer, Object.assign({ open: open, fullWidth: true, scroll: "body", onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
+        React.createElement(Composer, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
 }

package/lib/esm/components/Editor/Editor.js

@@ -1,7 +1,7 @@
-import React, { forwardRef, useImperativeHandle, useMemo, useRef } from 'react';
+import React, { forwardRef, useCallback, useImperativeHandle, useMemo, useRef, useState, } from 'react';
 import { styled } from '@mui/material/styles';
 import { FormattedMessage } from 'react-intl';
-import { Box, Stack, useTheme } from '@mui/material';
+import { Box, Stack } from '@mui/material';
 import classNames from 'classnames';
 import { useThemeProps } from '@mui/system';
 import nodes from './nodes';
@@ -22,6 +22,7 @@ import OnFocusPlugin from './plugins/OnFocusPlugin';
 const PREFIX = 'SCEditor';
 const classes = {
     root: `${PREFIX}-root`,
+    focused: `${PREFIX}-focused`,
     toolbar: `${PREFIX}-toolbar`,
     content: `${PREFIX}-content`,
     placeholder: `${PREFIX}-placeholder`,
@@ -104,8 +105,8 @@ const Editor = (inProps, ref) => {
     });
     const { id = 'editor', className = null, defaultValue = '', toolbar = false, uploadImage = false, editable = true, onChange = null, onFocus = null, onBlur = null } = props;
     const apiRef = useRef();
-    // MEMO
-    const theme = useTheme();
+    // STATE
+    const [focused, setFocused] = useState(false);
     // HANDLERS
     const handleChange = (value) => {
         onChange && onChange(value);
@@ -116,6 +117,14 @@ const Editor = (inProps, ref) => {
     const handleFocus = () => {
         apiRef.current.focus();
     };
+    const handleHasFocus = useCallback((event) => {
+        setFocused(true);
+        onFocus && onFocus(event);
+    }, [onFocus]);
+    const handleHasBlur = useCallback((event) => {
+        setFocused(false);
+        onBlur && onBlur(event);
+    }, [onBlur]);
     // EXPOSED METHODS
     useImperativeHandle(ref, () => ({
         focus: () => {
@@ -130,7 +139,7 @@ const Editor = (inProps, ref) => {
         nodes: [...nodes],
         theme: editorTheme
     }), [editable]);
-    return (React.createElement(Root, { id: id, className: classNames(classes.root, className, { [classes.toolbar]: toolbar }) },
+    return (React.createElement(Root, { id: id, className: classNames(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) },
         React.createElement(LexicalComposer, { initialConfig: initialConfig },
             toolbar ? (React.createElement(React.Fragment, null,
                 React.createElement(ToolbarPlugin, { uploadImage: uploadImage }),
@@ -143,8 +152,8 @@ const Editor = (inProps, ref) => {
             React.createElement(DefaultHtmlValuePlugin, { defaultValue: defaultValue }),
             React.createElement(HistoryPlugin, null),
             React.createElement(OnChangePlugin, { onChange: handleChange }),
-            React.createElement(OnBlurPlugin, { onBlur: onBlur }),
-            React.createElement(OnFocusPlugin, { onFocus: onFocus }),
+            React.createElement(OnBlurPlugin, { onBlur: handleHasBlur }),
+            React.createElement(OnFocusPlugin, { onFocus: handleHasFocus }),
             React.createElement(AutoLinkPlugin, null),
             React.createElement(MentionsPlugin, null),
             React.createElement(LinkPlugin, null),

package/lib/esm/components/Feed/Feed.js

@@ -1,6 +1,6 @@
 // @ts-nocheck
-import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
-import { Link, SCCache, SCPreferences, SCPreferencesContext, SCUserContext, useSCFetchFeed, usePreviousValue, useIsComponentMountedRef } from '@selfcommunity/react-core';
+import React, { forwardRef, useContext, useEffect, useImperativeHandle, useMemo, useRef, useState, } from 'react';
+import { Link, SCCache, SCPreferences, SCPreferencesContext, SCUserContext, useIsComponentMountedRef, usePreviousValue, useSCFetchFeed, } from '@selfcommunity/react-core';
 import { styled, useTheme } from '@mui/material/styles';
 import { Box, CardContent, Grid, Hidden, useMediaQuery } from '@mui/material';
 import { FormattedMessage } from 'react-intl';
@@ -13,9 +13,9 @@ import PubSub from 'pubsub-js';
 import { useThemeProps } from '@mui/system';
 import Widget from '../Widget';
 import InfiniteScroll from '../../shared/InfiniteScroll';
-import VirtualizedScroller, { VirtualScrollChild } from '../../shared/VirtualizedScroller';
+import VirtualizedScroller, { VirtualScrollChild, } from '../../shared/VirtualizedScroller';
 import { DEFAULT_WIDGETS_NUMBER, WIDGET_PREFIX_KEY } from '../../constants/Feed';
-import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_QUERY_PARAM_NAME } from '../../constants/Pagination';
+import { DEFAULT_PAGINATION_LIMIT, DEFAULT_PAGINATION_OFFSET, DEFAULT_PAGINATION_QUERY_PARAM_NAME, } from '../../constants/Pagination';
 import { widgetSort } from '../../utils/feed';
 import Footer from '../Footer';
 import FeedSkeleton from './Skeleton';