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

package/lib/cjs/components/Composer/Layer/CloseLayer/CloseLayer.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importDefault(require("react"));
+const react_intl_1 = require("react-intl");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const classes = {
+    root: `${constants_1.PREFIX}-layer-close-root`,
+    title: `${constants_1.PREFIX}-layer-title`,
+    content: `${constants_1.PREFIX}-layer-content`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'LayerCloseRoot'
+})(() => ({}));
+const CloseLayer = react_1.default.forwardRef((props, ref) => {
+    // Props
+    const { className, onClose, onSave, defaultValue = [] } = props, rest = tslib_1.__rest(props, ["className", "onClose", "onSave", "defaultValue"]);
+    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest),
+        react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
+            react_1.default.createElement(material_1.IconButton, { onClick: onClose },
+                react_1.default.createElement(Icon_1.default, null, "arrow_back")),
+            react_1.default.createElement(material_1.Typography, null,
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.title", defaultMessage: "ui.composer.layer.close.title" }))),
+        react_1.default.createElement(DialogContent_1.default, { className: classes.content },
+            react_1.default.createElement(material_1.Typography, null,
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.text", defaultMessage: "ui.composer.layer.close.text" })),
+            react_1.default.createElement(material_1.List, null,
+                react_1.default.createElement(material_1.ListItem, null,
+                    react_1.default.createElement(material_1.ListItemButton, { onClick: onClose },
+                        react_1.default.createElement(material_1.ListItemText, { primary: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.no", defaultMessage: "ui.composer.layer.close.no" }) }))),
+                react_1.default.createElement(material_1.ListItem, null,
+                    react_1.default.createElement(material_1.ListItemButton, { onClick: onSave },
+                        react_1.default.createElement(material_1.ListItemText, { primary: react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.close.yes", defaultMessage: "ui.composer.layer.close.yes" }) }))))));
+});
+exports.default = CloseLayer;

package/lib/cjs/components/Composer/Layer/CloseLayer/index.d.ts

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

package/lib/cjs/components/Composer/{Audience → Layer/CloseLayer}/index.js

@@ -1,5 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 const tslib_1 = require("tslib");
-const Audience_1 = tslib_1.__importDefault(require("./Audience"));
-exports.default = Audience_1.default;
+const CloseLayer_1 = tslib_1.__importDefault(require("./CloseLayer"));
+exports.default = CloseLayer_1.default;

package/lib/cjs/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/cjs/components/Composer/Layer/LocationLayer/LocationLayer.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const react_intl_1 = require("react-intl");
+const material_1 = require("@mui/material");
+const styles_1 = require("@mui/material/styles");
+const Icon_1 = tslib_1.__importDefault(require("@mui/material/Icon"));
+const LocationAutocomplete_1 = tslib_1.__importDefault(require("../../../LocationAutocomplete"));
+const DialogContent_1 = tslib_1.__importDefault(require("@mui/material/DialogContent"));
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const constants_1 = require("../../constants");
+const classes = {
+    root: `${constants_1.PREFIX}-layer-location-root`,
+    title: `${constants_1.PREFIX}-layer-title`,
+    content: `${constants_1.PREFIX}-layer-content`
+};
+const Root = (0, styles_1.styled)(material_1.Box, {
+    name: constants_1.PREFIX,
+    slot: 'LayerLocationRoot'
+})(() => ({}));
+const LocationLayer = react_1.default.forwardRef((props, ref) => {
+    // Props
+    const { className, onClose, onSave, defaultValue = null } = props, rest = tslib_1.__rest(props, ["className", "onClose", "onSave", "defaultValue"]);
+    // STATE
+    const [value, setValue] = (0, react_1.useState)(defaultValue);
+    // HANDLERS
+    const handleSave = (0, react_1.useCallback)(() => onSave(value), [value, onSave]);
+    const handleChange = (0, react_1.useCallback)((location) => setValue(location), []);
+    return react_1.default.createElement(Root, Object.assign({ ref: ref, className: (0, classnames_1.default)(className, classes.root) }, rest),
+        react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
+            react_1.default.createElement(material_1.IconButton, { onClick: onClose },
+                react_1.default.createElement(Icon_1.default, null, "arrow_back")),
+            react_1.default.createElement(material_1.Typography, null,
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.location.title", defaultMessage: "ui.composer.layer.location.title" })),
+            react_1.default.createElement(material_1.Button, { size: "small", color: "secondary", variant: "contained", onClick: handleSave },
+                react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.composer.layer.save", defaultMessage: "ui.composer.layer.save" }))),
+        react_1.default.createElement(DialogContent_1.default, { className: classes.content },
+            react_1.default.createElement(LocationAutocomplete_1.default, { onChange: handleChange, defaultValue: value ? value : '' })));
+});
+exports.default = LocationLayer;

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const LocationLayer_1 = tslib_1.__importDefault(require("./LocationLayer"));
+exports.default = LocationLayer_1.default;

package/lib/cjs/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/cjs/components/Composer/Skeleton.js

@@ -5,64 +5,18 @@ const react_1 = tslib_1.__importDefault(require("react"));
 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 = 'SCComposerSkeleton';
+const constants_1 = require("./constants");
 const classes = {
-    root: `${PREFIX}-root`,
-    title: `${PREFIX}-title`,
-    avatar: `${PREFIX}-avatar`,
-    content: `${PREFIX}-content`,
-    actions: `${PREFIX}-actions`
+    root: `${constants_1.PREFIX}-skeleton-root`,
+    title: `${constants_1.PREFIX}-title`,
+    avatar: `${constants_1.PREFIX}-avatar`,
+    content: `${constants_1.PREFIX}-content`,
+    actions: `${constants_1.PREFIX}-actions`
 };
 const Root = (0, styles_1.styled)(material_1.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'
-    }
-}));
+    name: constants_1.PREFIX,
+    slot: 'SkeletonRoot'
+})(() => ({}));
 /**
  * > API documentation for the Community-JS Composer Skeleton component. Learn about the available props and the CSS API.
 
@@ -81,26 +35,10 @@ const Root = (0, styles_1.styled)(material_1.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.|
  *
  */
 function ComposerSkeleton() {
-    const theme = (0, material_1.useTheme)();
     return (react_1.default.createElement(Root, { className: classes.root },
-        react_1.default.createElement(material_1.DialogTitle, { className: classes.title },
-            react_1.default.createElement(material_1.Box, null,
-                react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "100%" })),
-            react_1.default.createElement(material_1.Box, null,
-                react_1.default.createElement(Skeleton_1.default, { className: classes.avatar, animation: "wave", variant: "circular", width: theme.selfcommunity.user.avatar.sizeMedium, height: theme.selfcommunity.user.avatar.sizeMedium })),
-            react_1.default.createElement(material_1.Box, null,
-                react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "100%" }))),
-        react_1.default.createElement(material_1.DialogContent, { className: classes.content },
-            react_1.default.createElement(Skeleton_1.default, { sx: { height: 190 }, animation: "wave", variant: "rectangular" })),
-        react_1.default.createElement(material_1.DialogActions, { className: classes.actions },
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }),
-            react_1.default.createElement(Skeleton_1.default, { animation: "wave", height: 10, width: "40%" }))));
+        react_1.default.createElement(Skeleton_1.default, { sx: { height: 190 }, animation: "wave", variant: "rectangular" })));
 }
 exports.default = ComposerSkeleton;

package/lib/cjs/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/cjs/components/Composer/TypeSwitchButtonGroup/TypeSwitchButtonGroup.js

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

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

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

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

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const TypeSwitchButtonGroup_1 = tslib_1.__importDefault(require("./TypeSwitchButtonGroup"));
+exports.default = TypeSwitchButtonGroup_1.default;

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

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

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

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

package/lib/cjs/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/cjs/components/Composer/index.js

@@ -1,10 +1,5 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.POLL_VIEW = exports.MAIN_VIEW = exports.ComposerSkeleton = void 0;
 const tslib_1 = require("tslib");
-const Composer_1 = tslib_1.__importStar(require("./Composer"));
-Object.defineProperty(exports, "MAIN_VIEW", { enumerable: true, get: function () { return Composer_1.MAIN_VIEW; } });
-Object.defineProperty(exports, "POLL_VIEW", { enumerable: true, get: function () { return Composer_1.POLL_VIEW; } });
-const Skeleton_1 = tslib_1.__importDefault(require("./Skeleton"));
-exports.ComposerSkeleton = Skeleton_1.default;
+const Composer_1 = tslib_1.__importDefault(require("./Composer"));
 exports.default = Composer_1.default;

package/lib/cjs/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/cjs/components/ComposerIconButton/ComposerIconButton.js

@@ -17,9 +17,8 @@ const classes = {
 };
 const Root = (0, styles_1.styled)(material_1.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.
 
@@ -48,7 +47,7 @@ function ComposerIconButton(inProps) {
         props: inProps,
         name: PREFIX
     });
-    const { className = null, ComposerProps = {} } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps"]);
+    const { className = null, ComposerProps = {}, onClick } = props, rest = tslib_1.__rest(props, ["className", "ComposerProps", "onClick"]);
     // STATE
     const [open, setOpen] = (0, react_1.useState)(false);
     // CONTEXT
@@ -57,7 +56,7 @@ function ComposerIconButton(inProps) {
     const scRoutingContext = (0, react_core_1.useSCRouting)();
     const { enqueueSnackbar } = (0, notistack_1.useSnackbar)();
     // HANDLERS
-    const handleOpen = (0, react_1.useCallback)((event) => {
+    const handleClick = (0, react_1.useCallback)((event) => {
         if (scUserContext.user) {
             if (react_core_1.UserUtils.isBlocked(scUserContext.user)) {
                 enqueueSnackbar(react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.common.userBlocked", defaultMessage: "ui.common.userBlocked" }), {
@@ -72,7 +71,8 @@ function ComposerIconButton(inProps) {
         else {
             scContext.settings.handleAnonymousAction();
         }
-    }, [enqueueSnackbar, scContext.settings, scUserContext.user]);
+        onClick && onClick(event);
+    }, [onClick, enqueueSnackbar, scContext.settings, scUserContext.user]);
     const handleClose = (0, react_1.useCallback)(() => {
         setOpen(false);
     }, []);
@@ -86,8 +86,8 @@ function ComposerIconButton(inProps) {
         });
     }, []);
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className), onClick: handleOpen }, rest),
+        react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleClick }),
             react_1.default.createElement(material_1.Icon, null, "add_circle_outline")),
-        react_1.default.createElement(Composer_1.default, Object.assign({ open: open, fullWidth: true, scroll: "body", onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
+        react_1.default.createElement(Composer_1.default, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
 }
 exports.default = ComposerIconButton;

package/lib/cjs/components/Editor/Editor.js

@@ -25,6 +25,7 @@ const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin
 const PREFIX = 'SCEditor';
 const classes = {
     root: `${PREFIX}-root`,
+    focused: `${PREFIX}-focused`,
     toolbar: `${PREFIX}-toolbar`,
     content: `${PREFIX}-content`,
     placeholder: `${PREFIX}-placeholder`,
@@ -107,8 +108,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 = (0, react_1.useRef)();
-    // MEMO
-    const theme = (0, material_1.useTheme)();
+    // STATE
+    const [focused, setFocused] = (0, react_1.useState)(false);
     // HANDLERS
     const handleChange = (value) => {
         onChange && onChange(value);
@@ -119,6 +120,14 @@ const Editor = (inProps, ref) => {
     const handleFocus = () => {
         apiRef.current.focus();
     };
+    const handleHasFocus = (0, react_1.useCallback)((event) => {
+        setFocused(true);
+        onFocus && onFocus(event);
+    }, [onFocus]);
+    const handleHasBlur = (0, react_1.useCallback)((event) => {
+        setFocused(false);
+        onBlur && onBlur(event);
+    }, [onBlur]);
     // EXPOSED METHODS
     (0, react_1.useImperativeHandle)(ref, () => ({
         focus: () => {
@@ -133,7 +142,7 @@ const Editor = (inProps, ref) => {
         nodes: [...nodes_1.default],
         theme: editorTheme
     }), [editable]);
-    return (react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar }) },
+    return (react_1.default.createElement(Root, { id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) },
         react_1.default.createElement(LexicalComposer_1.LexicalComposer, { initialConfig: initialConfig },
             toolbar ? (react_1.default.createElement(react_1.default.Fragment, null,
                 react_1.default.createElement(ToolbarPlugin_1.default, { uploadImage: uploadImage }),
@@ -146,8 +155,8 @@ const Editor = (inProps, ref) => {
             react_1.default.createElement(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }),
             react_1.default.createElement(LexicalHistoryPlugin_1.HistoryPlugin, null),
             react_1.default.createElement(plugins_1.OnChangePlugin, { onChange: handleChange }),
-            react_1.default.createElement(OnBlurPlugin_1.default, { onBlur: onBlur }),
-            react_1.default.createElement(OnFocusPlugin_1.default, { onFocus: onFocus }),
+            react_1.default.createElement(OnBlurPlugin_1.default, { onBlur: handleHasBlur }),
+            react_1.default.createElement(OnFocusPlugin_1.default, { onFocus: handleHasFocus }),
             react_1.default.createElement(plugins_1.AutoLinkPlugin, null),
             react_1.default.createElement(plugins_1.MentionsPlugin, null),
             react_1.default.createElement(LexicalLinkPlugin_1.LinkPlugin, null),