@selfcommunity/react-ui 0.7.0-alpha.365 → 0.7.0-alpha.367

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (12) hide show
  1. package/lib/cjs/components/BottomNavigation/BottomNavigation.js +1 -1
  2. package/lib/cjs/components/ComposerIconButton/ComposerIconButton.d.ts +3 -6
  3. package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js +3 -4
  4. package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js +24 -25
  5. package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js +2 -4
  6. package/lib/esm/components/BottomNavigation/BottomNavigation.js +1 -1
  7. package/lib/esm/components/ComposerIconButton/ComposerIconButton.d.ts +3 -6
  8. package/lib/esm/components/ComposerIconButton/ComposerIconButton.js +3 -3
  9. package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js +24 -25
  10. package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js +2 -4
  11. package/lib/umd/react-ui.js +1 -1
  12. package/package.json +2 -2
package/lib/cjs/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -70,7 +70,7 @@ function BottomNavigation(inProps) {
70
70
  react_1.default.createElement(material_1.BottomNavigationAction, { key: "home", className: classes.action, component: react_core_1.Link, to: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: react_1.default.createElement(material_1.Icon, null, "home") }),
71
71
  (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
72
72
  preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "explore", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Icon, null, "explore") })) : null,
73
- react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default }),
73
+ react_1.default.createElement(material_1.BottomNavigationAction, { key: "composer", className: (0, classnames_1.default)(classes.composer, classes.action), component: ComposerIconButton_1.default, disableRipple: true }),
74
74
  scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "notifications", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
75
75
  react_1.default.createElement(material_1.Icon, null, "notifications_active")) })) : null,
76
76
  privateMessagingEnabled && scUserContext.user ? (react_1.default.createElement(material_1.BottomNavigationAction, { key: "messages", className: classes.action, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: react_1.default.createElement(material_1.Badge, { badgeContent: 0, color: "secondary" },
package/lib/cjs/components/ComposerIconButton/ComposerIconButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactElement } from 'react';
1
+ import React from 'react';
2
2
  import { IconButtonProps } from '@mui/material';
3
3
  import { ComposerProps } from '../Composer';
4
4
  export interface ComposerIconButtonProps extends IconButtonProps {
@@ -7,10 +7,6 @@ export interface ComposerIconButtonProps extends IconButtonProps {
7
7
  * @default null
8
8
  */
9
9
  ComposerProps?: ComposerProps;
10
- /**
11
- * Other props
12
- */
13
- items?: any;
14
10
  }
15
11
  /**
16
12
  * > API documentation for the Community-JS Composer Icon Button component. Learn about the available props and the CSS API.
@@ -34,4 +30,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
34
30
 
35
31
  * @param inProps
36
32
  */
37
- export default function ComposerIconButton(inProps: ComposerIconButtonProps): ReactElement;
33
+ declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "form" | "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" | "component" | "sx" | "name" | "classes" | "value" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "ComposerProps"> & React.RefAttributes<HTMLButtonElement>>;
34
+ export default _default;
package/lib/cjs/components/ComposerIconButton/ComposerIconButton.js CHANGED
@@ -41,7 +41,7 @@ const Root = (0, styles_1.styled)(material_1.IconButton, {
41
41
 
42
42
  * @param inProps
43
43
  */
44
- function ComposerIconButton(inProps) {
44
+ exports.default = react_1.default.forwardRef(function ComposerIconButton(inProps, ref) {
45
45
  // PROPS
46
46
  const props = (0, system_1.useThemeProps)({
47
47
  props: inProps,
@@ -86,8 +86,7 @@ function ComposerIconButton(inProps) {
86
86
  });
87
87
  }, []);
88
88
  return (react_1.default.createElement(react_1.default.Fragment, null,
89
- react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleClick }),
89
+ react_1.default.createElement(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { onClick: handleClick, ref: ref }),
90
90
  react_1.default.createElement(material_1.Icon, null, "add_circle_outline")),
91
91
  react_1.default.createElement(Composer_1.default, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
92
- }
93
- exports.default = ComposerIconButton;
92
+ });
package/lib/cjs/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js CHANGED
@@ -22,19 +22,16 @@ const classes = {
22
22
  };
23
23
  const Root = (0, styles_1.styled)(material_1.IconButton, {
24
24
  name: PREFIX,
25
- slot: 'Root',
26
- overridesResolver: (props, styles) => styles.root
27
- })(({ theme }) => ({}));
25
+ slot: 'Root'
26
+ })(() => ({}));
28
27
  const SwipeableDrawerRoot = (0, styles_1.styled)(material_1.SwipeableDrawer, {
29
28
  name: PREFIX,
30
- slot: 'Root',
31
- overridesResolver: (props, styles) => styles.drawerRoot
32
- })(({ theme }) => ({}));
29
+ slot: 'DrawerRoot'
30
+ })(() => ({}));
33
31
  const MenuRoot = (0, styles_1.styled)(material_1.Menu, {
34
32
  name: PREFIX,
35
- slot: 'Root',
36
- overridesResolver: (props, styles) => styles.menuRoot
37
- })(({ theme }) => ({}));
33
+ slot: 'MenuRoot'
34
+ })(() => ({}));
38
35
  /**
39
36
  * > API documentation for the Community-JS PrivateMessageSettingsIconButton component. Learn about the available props and the CSS API.
40
37
 
@@ -107,26 +104,28 @@ function PrivateMessageSettingsIconButton(inProps) {
107
104
  const renderList = () => {
108
105
  if (isMobile) {
109
106
  return [
110
- react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "profile", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
111
- react_1.default.createElement(material_1.ListItemIcon, null,
112
- react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "people_alt")),
113
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
114
- react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
115
- react_1.default.createElement(material_1.ListItemIcon, null,
116
- react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),
117
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
107
+ react_1.default.createElement(react_1.default.Fragment, null,
108
+ user && (react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "profile", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
109
+ react_1.default.createElement(material_1.ListItemIcon, null,
110
+ react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "people_alt")),
111
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
112
+ react_1.default.createElement(material_1.ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
113
+ react_1.default.createElement(material_1.ListItemIcon, null,
114
+ react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),
115
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })))
118
116
  ];
119
117
  }
120
118
  else {
121
119
  return [
122
- react_1.default.createElement(material_1.MenuItem, { className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
123
- react_1.default.createElement(material_1.ListItemIcon, null,
124
- react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "people_alt")),
125
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
126
- react_1.default.createElement(material_1.MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
127
- react_1.default.createElement(material_1.ListItemIcon, null,
128
- react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),
129
- react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
120
+ react_1.default.createElement(react_1.default.Fragment, null,
121
+ user && (react_1.default.createElement(material_1.MenuItem, { className: classes.item, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
122
+ react_1.default.createElement(material_1.ListItemIcon, null,
123
+ react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "people_alt")),
124
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
125
+ react_1.default.createElement(material_1.MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
126
+ react_1.default.createElement(material_1.ListItemIcon, null,
127
+ react_1.default.createElement(Icon_1.default, { fontSize: "small" }, "delete")),
128
+ react_1.default.createElement(react_intl_1.FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })))
130
129
  ];
131
130
  }
132
131
  };
package/lib/cjs/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js CHANGED
@@ -122,8 +122,7 @@ function PrivateMessageThreadItem(inProps) {
122
122
  }
123
123
  let section = null;
124
124
  const defaultSection = (react_1.default.createElement(material_1.Box, { className: classes.other },
125
- react_1.default.createElement(material_1.Button, { onClick: () => handleDownload(m.file) },
126
- react_1.default.createElement(Icon_1.default, null, "download"),
125
+ react_1.default.createElement(material_1.Button, { onClick: () => handleDownload(m.file), startIcon: react_1.default.createElement(Icon_1.default, null, "download") },
127
126
  react_1.default.createElement(material_1.Typography, null, m.file.filename),
128
127
  react_1.default.createElement(material_1.Typography, null, (0, sizeCoverter_1.bytesToSize)(m.file.filesize)))));
129
128
  if (m.file) {
@@ -147,8 +146,7 @@ function PrivateMessageThreadItem(inProps) {
147
146
  case type.startsWith(types_1.SCMessageFileType.DOCUMENT):
148
147
  section = (react_1.default.createElement(material_1.Box, { className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other },
149
148
  m.file.filename.endsWith('.pdf') && react_1.default.createElement("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }),
150
- react_1.default.createElement(material_1.Button, { onClick: () => handleDownload(m.file) },
151
- react_1.default.createElement(Icon_1.default, null, "download"),
149
+ react_1.default.createElement(material_1.Button, { onClick: () => handleDownload(m.file), startIcon: react_1.default.createElement(Icon_1.default, null, "download") },
152
150
  react_1.default.createElement(material_1.Typography, null, m.file.filename),
153
151
  react_1.default.createElement(material_1.Typography, null, (0, sizeCoverter_1.bytesToSize)(m.file.filesize)))));
154
152
  break;
package/lib/esm/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -68,7 +68,7 @@ export default function BottomNavigation(inProps) {
68
68
  React.createElement(BottomNavigationAction, { key: "home", className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: React.createElement(Icon, null, "home") }),
69
69
  (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value) &&
70
70
  preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED].value ? (React.createElement(BottomNavigationAction, { key: "explore", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}), icon: React.createElement(Icon, null, "explore") })) : null,
71
- React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton }),
71
+ React.createElement(BottomNavigationAction, { key: "composer", className: classNames(classes.composer, classes.action), component: ComposerIconButton, disableRipple: true }),
72
72
  scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "notifications", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" },
73
73
  React.createElement(Icon, null, "notifications_active")) })) : null,
74
74
  privateMessagingEnabled && scUserContext.user ? (React.createElement(BottomNavigationAction, { key: "messages", className: classes.action, component: Link, to: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), value: scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}), icon: React.createElement(Badge, { badgeContent: 0, color: "secondary" },
package/lib/esm/components/ComposerIconButton/ComposerIconButton.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { ReactElement } from 'react';
1
+ import React from 'react';
2
2
  import { IconButtonProps } from '@mui/material';
3
3
  import { ComposerProps } from '../Composer';
4
4
  export interface ComposerIconButtonProps extends IconButtonProps {
@@ -7,10 +7,6 @@ export interface ComposerIconButtonProps extends IconButtonProps {
7
7
  * @default null
8
8
  */
9
9
  ComposerProps?: ComposerProps;
10
- /**
11
- * Other props
12
- */
13
- items?: any;
14
10
  }
15
11
  /**
16
12
  * > API documentation for the Community-JS Composer Icon Button component. Learn about the available props and the CSS API.
@@ -34,4 +30,5 @@ export interface ComposerIconButtonProps extends IconButtonProps {
34
30
 
35
31
  * @param inProps
36
32
  */
37
- export default function ComposerIconButton(inProps: ComposerIconButtonProps): ReactElement;
33
+ declare const _default: React.ForwardRefExoticComponent<Pick<ComposerIconButtonProps, "form" | "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" | "component" | "sx" | "name" | "classes" | "value" | "type" | "autoFocus" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "action" | "size" | "centerRipple" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableFocusRipple" | "edge" | "ComposerProps"> & React.RefAttributes<HTMLButtonElement>>;
34
+ export default _default;
package/lib/esm/components/ComposerIconButton/ComposerIconButton.js CHANGED
@@ -39,7 +39,7 @@ const Root = styled(IconButton, {
39
39
 
40
40
  * @param inProps
41
41
  */
42
- export default function ComposerIconButton(inProps) {
42
+ export default React.forwardRef(function ComposerIconButton(inProps, ref) {
43
43
  // PROPS
44
44
  const props = useThemeProps({
45
45
  props: inProps,
@@ -84,7 +84,7 @@ export default function ComposerIconButton(inProps) {
84
84
  });
85
85
  }, []);
86
86
  return (React.createElement(React.Fragment, null,
87
- React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleClick }),
87
+ React.createElement(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { onClick: handleClick, ref: ref }),
88
88
  React.createElement(Icon, null, "add_circle_outline")),
89
89
  React.createElement(Composer, Object.assign({ open: open, fullWidth: true, onClose: handleClose, onSuccess: handleSuccess }, ComposerProps))));
90
- }
90
+ });
package/lib/esm/components/PrivateMessageSettingsIconButton/PrivateMessageSettingsIconButton.js CHANGED
@@ -20,19 +20,16 @@ const classes = {
20
20
  };
21
21
  const Root = styled(IconButton, {
22
22
  name: PREFIX,
23
- slot: 'Root',
24
- overridesResolver: (props, styles) => styles.root
25
- })(({ theme }) => ({}));
23
+ slot: 'Root'
24
+ })(() => ({}));
26
25
  const SwipeableDrawerRoot = styled(SwipeableDrawer, {
27
26
  name: PREFIX,
28
- slot: 'Root',
29
- overridesResolver: (props, styles) => styles.drawerRoot
30
- })(({ theme }) => ({}));
27
+ slot: 'DrawerRoot'
28
+ })(() => ({}));
31
29
  const MenuRoot = styled(Menu, {
32
30
  name: PREFIX,
33
- slot: 'Root',
34
- overridesResolver: (props, styles) => styles.menuRoot
35
- })(({ theme }) => ({}));
31
+ slot: 'MenuRoot'
32
+ })(() => ({}));
36
33
  /**
37
34
  * > API documentation for the Community-JS PrivateMessageSettingsIconButton component. Learn about the available props and the CSS API.
38
35
 
@@ -105,26 +102,28 @@ export default function PrivateMessageSettingsIconButton(inProps) {
105
102
  const renderList = () => {
106
103
  if (isMobile) {
107
104
  return [
108
- React.createElement(ListItem, { className: classes.item, key: "profile", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
109
- React.createElement(ListItemIcon, null,
110
- React.createElement(Icon, { fontSize: "small" }, "people_alt")),
111
- React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
112
- React.createElement(ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
113
- React.createElement(ListItemIcon, null,
114
- React.createElement(Icon, { fontSize: "small" }, "delete")),
115
- React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
105
+ React.createElement(React.Fragment, null,
106
+ user && (React.createElement(ListItem, { className: classes.item, key: "profile", component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user) },
107
+ React.createElement(ListItemIcon, null,
108
+ React.createElement(Icon, { fontSize: "small" }, "people_alt")),
109
+ React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
110
+ React.createElement(ListItem, { className: classes.item, key: "delete", onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick },
111
+ React.createElement(ListItemIcon, null,
112
+ React.createElement(Icon, { fontSize: "small" }, "delete")),
113
+ React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })))
116
114
  ];
117
115
  }
118
116
  else {
119
117
  return [
120
- React.createElement(MenuItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
121
- React.createElement(ListItemIcon, null,
122
- React.createElement(Icon, { fontSize: "small" }, "people_alt")),
123
- React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" })),
124
- React.createElement(MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
125
- React.createElement(ListItemIcon, null,
126
- React.createElement(Icon, { fontSize: "small" }, "delete")),
127
- React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" }))
118
+ React.createElement(React.Fragment, null,
119
+ user && (React.createElement(MenuItem, { className: classes.item, component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, user), key: "profile" },
120
+ React.createElement(ListItemIcon, null,
121
+ React.createElement(Icon, { fontSize: "small" }, "people_alt")),
122
+ React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.profile", defaultMessage: "ui.privateMessageSettingsIconButton.item.profile" }))),
123
+ React.createElement(MenuItem, { className: classes.item, onClick: threadToDelete ? handleOpenDialog : onMenuItemDeleteClick, key: "delete" },
124
+ React.createElement(ListItemIcon, null,
125
+ React.createElement(Icon, { fontSize: "small" }, "delete")),
126
+ React.createElement(FormattedMessage, { id: "ui.privateMessageSettingsIconButton.item.delete", defaultMessage: "ui.privateMessageSettingsIconButton.item.delete" })))
128
127
  ];
129
128
  }
130
129
  };
package/lib/esm/components/PrivateMessageThreadItem/PrivateMessageThreadItem.js CHANGED
@@ -120,8 +120,7 @@ export default function PrivateMessageThreadItem(inProps) {
120
120
  }
121
121
  let section = null;
122
122
  const defaultSection = (React.createElement(Box, { className: classes.other },
123
- React.createElement(Button, { onClick: () => handleDownload(m.file) },
124
- React.createElement(Icon, null, "download"),
123
+ React.createElement(Button, { onClick: () => handleDownload(m.file), startIcon: React.createElement(Icon, null, "download") },
125
124
  React.createElement(Typography, null, m.file.filename),
126
125
  React.createElement(Typography, null, bytesToSize(m.file.filesize)))));
127
126
  if (m.file) {
@@ -145,8 +144,7 @@ export default function PrivateMessageThreadItem(inProps) {
145
144
  case type.startsWith(SCMessageFileType.DOCUMENT):
146
145
  section = (React.createElement(Box, { className: m.file.filename.endsWith('.pdf') ? classes.document : classes.other },
147
146
  m.file.filename.endsWith('.pdf') && React.createElement("img", { src: m.file.thumbnail, loading: "lazy", alt: 'img' }),
148
- React.createElement(Button, { onClick: () => handleDownload(m.file) },
149
- React.createElement(Icon, null, "download"),
147
+ React.createElement(Button, { onClick: () => handleDownload(m.file), startIcon: React.createElement(Icon, null, "download") },
150
148
  React.createElement(Typography, null, m.file.filename),
151
149
  React.createElement(Typography, null, bytesToSize(m.file.filesize)))));
152
150
  break;