@selfcommunity/react-ui 0.11.0-alpha.33 → 0.11.0-alpha.35

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 (26) hide show
  1. package/lib/cjs/components/Editor/Editor.js +9 -9
  2. package/lib/cjs/components/Editor/plugins/HorizontalRulePlugin.d.ts +8 -0
  3. package/lib/cjs/components/Editor/plugins/HorizontalRulePlugin.js +34 -0
  4. package/lib/cjs/components/Editor/plugins/LexicalRichTextPlugin.d.ts +2 -2
  5. package/lib/cjs/components/Editor/plugins/LexicalRichTextPlugin.js +2 -3
  6. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts +1 -1
  7. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +2 -2
  8. package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts +1 -1
  9. package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js +4 -4
  10. package/lib/cjs/components/SearchDialog/SearchDialog.d.ts +4 -1
  11. package/lib/cjs/components/SearchDialog/SearchDialog.js +2 -2
  12. package/lib/esm/components/Editor/Editor.js +8 -8
  13. package/lib/esm/components/Editor/plugins/HorizontalRulePlugin.d.ts +8 -0
  14. package/lib/esm/components/Editor/plugins/HorizontalRulePlugin.js +30 -0
  15. package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.d.ts +2 -2
  16. package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.js +1 -1
  17. package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts +1 -1
  18. package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +2 -2
  19. package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts +1 -1
  20. package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js +4 -4
  21. package/lib/esm/components/SearchDialog/SearchDialog.d.ts +4 -1
  22. package/lib/esm/components/SearchDialog/SearchDialog.js +2 -2
  23. package/lib/umd/{212.js → 336.js} +2 -2
  24. package/lib/umd/react-ui.js +1 -1
  25. package/package.json +5 -5
  26. /package/lib/umd/{212.js.LICENSE.txt → 336.js.LICENSE.txt} +0 -0
package/lib/cjs/components/Editor/Editor.js CHANGED
@@ -11,19 +11,19 @@ const system_1 = require("@mui/system");
11
11
  const nodes_1 = tslib_1.__importDefault(require("./nodes"));
12
12
  const LexicalComposer_1 = require("@lexical/react/LexicalComposer");
13
13
  const LexicalContentEditable_1 = require("@lexical/react/LexicalContentEditable");
14
- const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
14
+ const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin"));
15
+ const constants_1 = require("./constants");
16
+ const HorizontalRulePlugin_1 = require("./plugins/HorizontalRulePlugin");
15
17
  const LexicalRichTextPlugin_1 = require("./plugins/LexicalRichTextPlugin");
16
- const LexicalErrorBoundary_1 = tslib_1.__importDefault(require("@lexical/react/LexicalErrorBoundary"));
17
- const LexicalHorizontalRulePlugin_1 = require("@lexical/react/LexicalHorizontalRulePlugin");
18
+ const LexicalErrorBoundary_1 = require("@lexical/react/LexicalErrorBoundary");
18
19
  const plugins_1 = require("./plugins");
20
+ const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
21
+ const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
19
22
  const LexicalLinkPlugin_1 = require("@lexical/react/LexicalLinkPlugin");
23
+ const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
20
24
  const ApiPlugin_1 = tslib_1.__importDefault(require("./plugins/ApiPlugin"));
21
- const ToolbarPlugin_1 = tslib_1.__importDefault(require("./plugins/ToolbarPlugin"));
25
+ const LexicalHistoryPlugin_1 = require("@lexical/react/LexicalHistoryPlugin");
22
26
  const LexicalListPlugin_1 = require("@lexical/react/LexicalListPlugin");
23
- const FloatingLinkPlugin_1 = tslib_1.__importDefault(require("./plugins/FloatingLinkPlugin"));
24
- const OnBlurPlugin_1 = tslib_1.__importDefault(require("./plugins/OnBlurPlugin"));
25
- const OnFocusPlugin_1 = tslib_1.__importDefault(require("./plugins/OnFocusPlugin"));
26
- const constants_1 = require("./constants");
27
27
  const classes = {
28
28
  root: `${constants_1.PREFIX}-root`,
29
29
  focused: `${constants_1.PREFIX}-focused`,
@@ -145,6 +145,6 @@ const Editor = (inProps, ref) => {
145
145
  nodes: [...nodes_1.default],
146
146
  theme: editorTheme
147
147
  }), [editable]);
148
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarPlugin_1.default, { uploadImage: uploadImage }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalHorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && (0, jsx_runtime_1.jsx)(plugins_1.ImagePlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, {})] }))), (0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: classes.content }), placeholder: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) })), ErrorBoundary: LexicalErrorBoundary_1.default }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] })) })));
148
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ id: id, className: (0, classnames_1.default)(classes.root, className, { [classes.toolbar]: toolbar, [classes.focused]: focused }) }, { children: (0, jsx_runtime_1.jsxs)(LexicalComposer_1.LexicalComposer, Object.assign({ initialConfig: initialConfig }, { children: [toolbar ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(ToolbarPlugin_1.default, { uploadImage: uploadImage }), (0, jsx_runtime_1.jsx)(LexicalListPlugin_1.ListPlugin, {}), (0, jsx_runtime_1.jsx)(HorizontalRulePlugin_1.HorizontalRulePlugin, {})] })) : ((0, jsx_runtime_1.jsxs)(material_1.Stack, Object.assign({ className: classes.actions, direction: "row" }, { children: [uploadImage && (0, jsx_runtime_1.jsx)(plugins_1.ImagePlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.EmojiPlugin, {})] }))), (0, jsx_runtime_1.jsx)(LexicalRichTextPlugin_1.RichTextPlugin, { contentEditable: (0, jsx_runtime_1.jsx)(LexicalContentEditable_1.ContentEditable, { className: classes.content }), placeholder: (0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.placeholder, onClick: handleFocus }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.editor.placeholder", defaultMessage: "ui.editor.placeholder" }) })), ErrorBoundary: LexicalErrorBoundary_1.LexicalErrorBoundary }), (0, jsx_runtime_1.jsx)(plugins_1.DefaultHtmlValuePlugin, { defaultValue: defaultValue }), (0, jsx_runtime_1.jsx)(LexicalHistoryPlugin_1.HistoryPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.OnChangePlugin, { onChange: handleChange }), (0, jsx_runtime_1.jsx)(OnBlurPlugin_1.default, { onBlur: handleHasBlur }), (0, jsx_runtime_1.jsx)(OnFocusPlugin_1.default, { onFocus: handleHasFocus }), (0, jsx_runtime_1.jsx)(plugins_1.AutoLinkPlugin, {}), (0, jsx_runtime_1.jsx)(plugins_1.MentionsPlugin, {}), (0, jsx_runtime_1.jsx)(LexicalLinkPlugin_1.LinkPlugin, {}), (0, jsx_runtime_1.jsx)(FloatingLinkPlugin_1.default, {}), (0, jsx_runtime_1.jsx)(ApiPlugin_1.default, { ref: apiRef })] })) })));
149
149
  };
150
150
  exports.default = (0, react_1.forwardRef)(Editor);
package/lib/cjs/components/Editor/plugins/HorizontalRulePlugin.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+ export declare function HorizontalRulePlugin(): null;
package/lib/cjs/components/Editor/plugins/HorizontalRulePlugin.js ADDED
@@ -0,0 +1,34 @@
1
+ "use strict";
2
+ /**
3
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
4
+ *
5
+ * This source code is licensed under the MIT license found in the
6
+ * LICENSE file in the root directory of this source tree.
7
+ *
8
+ */
9
+ Object.defineProperty(exports, "__esModule", { value: true });
10
+ exports.HorizontalRulePlugin = void 0;
11
+ const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
12
+ const LexicalHorizontalRuleNode_1 = require("@lexical/react/LexicalHorizontalRuleNode");
13
+ const utils_1 = require("@lexical/utils");
14
+ const lexical_1 = require("lexical");
15
+ const react_1 = require("react");
16
+ function HorizontalRulePlugin() {
17
+ const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
18
+ (0, react_1.useEffect)(() => {
19
+ return editor.registerCommand(LexicalHorizontalRuleNode_1.INSERT_HORIZONTAL_RULE_COMMAND, (type) => {
20
+ const selection = (0, lexical_1.$getSelection)();
21
+ if (!(0, lexical_1.$isRangeSelection)(selection)) {
22
+ return false;
23
+ }
24
+ const focusNode = selection.focus.getNode();
25
+ if (focusNode !== null) {
26
+ const horizontalRuleNode = (0, LexicalHorizontalRuleNode_1.$createHorizontalRuleNode)();
27
+ (0, utils_1.$insertNodeToNearestRoot)(horizontalRuleNode);
28
+ }
29
+ return true;
30
+ }, lexical_1.COMMAND_PRIORITY_EDITOR);
31
+ }, [editor]);
32
+ return null;
33
+ }
34
+ exports.HorizontalRulePlugin = HorizontalRulePlugin;
package/lib/cjs/components/Editor/plugins/LexicalRichTextPlugin.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ErrorBoundaryType } from '../shared/useDecorators';
2
2
  export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }: {
3
3
  contentEditable: JSX.Element;
4
- placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
5
- ErrorBoundary: ErrorBoundaryType;
4
+ placeholder?: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
5
+ ErrorBoundary?: ErrorBoundaryType;
6
6
  }): JSX.Element;
package/lib/cjs/components/Editor/plugins/LexicalRichTextPlugin.js CHANGED
@@ -1,10 +1,9 @@
1
1
  "use strict";
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.RichTextPlugin = void 0;
4
- const tslib_1 = require("tslib");
5
4
  const jsx_runtime_1 = require("react/jsx-runtime");
6
5
  const LexicalComposerContext_1 = require("@lexical/react/LexicalComposerContext");
7
- const useLexicalEditable_1 = tslib_1.__importDefault(require("@lexical/react/useLexicalEditable"));
6
+ const useLexicalEditable_1 = require("@lexical/react/useLexicalEditable");
8
7
  const useDecorators_1 = require("../shared/useDecorators");
9
8
  const useEditorFocus_1 = require("../shared/useEditorFocus");
10
9
  const useCanShowPlaceholder_1 = require("../shared/useCanShowPlaceholder");
@@ -19,7 +18,7 @@ exports.RichTextPlugin = RichTextPlugin;
19
18
  function Placeholder({ content }) {
20
19
  const [editor] = (0, LexicalComposerContext_1.useLexicalComposerContext)();
21
20
  const showPlaceholder = (0, useCanShowPlaceholder_1.useCanShowPlaceholder)(editor);
22
- const editable = (0, useLexicalEditable_1.default)();
21
+ const editable = (0, useLexicalEditable_1.useLexicalEditable)();
23
22
  const hasFocus = (0, useEditorFocus_1.useEditorFocus)();
24
23
  if (!showPlaceholder || hasFocus) {
25
24
  return null;
package/lib/cjs/components/NavigationToolbar/NavigationToolbar.d.ts CHANGED
@@ -17,7 +17,7 @@ export interface NavigationToolbarProps extends ToolbarProps {
17
17
  /**
18
18
  * Searchbar props
19
19
  */
20
- SearchAutocompleteProps?: SearchAutocompleteProps;
20
+ SearchAutocompleteComponentProps?: SearchAutocompleteProps;
21
21
  /**
22
22
  * The navigation path
23
23
  */
package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js CHANGED
@@ -98,7 +98,7 @@ function NavigationToolbar(inProps) {
98
98
  props: inProps,
99
99
  name: constants_1.PREFIX
100
100
  });
101
- const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
101
+ const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
102
102
  // CONTEXT
103
103
  const scUserContext = (0, react_core_1.useSCUser)();
104
104
  const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -148,7 +148,7 @@ function NavigationToolbar(inProps) {
148
148
  }), "aria-label": "Groups", to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.events, {
149
149
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}))
150
150
  }), "aria-label": "Events", to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}), component: react_core_1.Link }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "CalendarIcon" }) })))] })));
151
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[react_core_1.SCPreferences.ADDONS_CLOSED_COMMUNITY] && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? ((0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.search })), startActions, scUserContext.user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showComposer && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scUserContext.user.username }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.notification, {
151
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[react_core_1.SCPreferences.ADDONS_CLOSED_COMMUNITY] && ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? ((0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? ((0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteComponentProps))) : ((0, jsx_runtime_1.jsx)(material_1.Box, { className: classes.search })), startActions, scUserContext.user ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [showComposer && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), (0, jsx_runtime_1.jsx)(material_1.Tooltip, Object.assign({ title: scUserContext.user.username }, { children: (0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: (0, jsx_runtime_1.jsx)(material_1.Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.notification, {
152
152
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
153
153
  }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "notifications_active" }) })) })), Boolean(anchorNotification) && ((0, jsx_runtime_1.jsx)(NotificationMenu_1.default, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: true, onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps)))] }), privateMessagingEnabled && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.messages, {
154
154
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts CHANGED
@@ -16,7 +16,7 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
16
16
  /**
17
17
  * Props spread to SearchAutocomplete component
18
18
  */
19
- SearchAutocompleteProps?: SearchAutocompleteProps;
19
+ SearchAutocompleteComponentProps?: SearchAutocompleteProps;
20
20
  /**
21
21
  * Actions to be inserted before composer IconButton
22
22
  */
package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js CHANGED
@@ -71,7 +71,7 @@ function NavigationToolbarMobile(inProps) {
71
71
  props: inProps,
72
72
  name: constants_1.PREFIX
73
73
  });
74
- const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, ComposerIconButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
74
+ const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteComponentProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, ComposerIconButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteComponentProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
75
75
  // CONTEXT
76
76
  const scUserContext = (0, react_core_1.useSCUser)();
77
77
  const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -98,10 +98,10 @@ function NavigationToolbarMobile(inProps) {
98
98
  // HANDLERS
99
99
  const handleOpenSearch = (0, react_1.useCallback)(() => {
100
100
  setSearchOpen(true);
101
- }, []);
101
+ }, [setSearchOpen]);
102
102
  const handleCloseSearch = (0, react_1.useCallback)(() => {
103
103
  setSearchOpen(false);
104
- }, []);
104
+ }, [setSearchOpen]);
105
105
  // RENDER
106
106
  if (scUserContext.loading) {
107
107
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
@@ -109,7 +109,7 @@ function NavigationToolbarMobile(inProps) {
109
109
  const _children = children || ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(NavigationMenuIconButtonComponent, {}), (0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), className: (0, classnames_1.default)(className, classes.logo, {
110
110
  [classes.logoFlex]: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
111
111
  }) }, { children: !preserveDesktopLogo ? ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : ((0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && ((0, jsx_runtime_1.jsx)(react_core_1.Link, Object.assign({ target: "blank", to: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: (0, jsx_runtime_1.jsx)("img", { src: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
112
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "search" }) })), (0, jsx_runtime_1.jsx)(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
112
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "search" }) })), (0, jsx_runtime_1.jsx)(SearchDialog_1.default, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (react_core_1.UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
113
113
  (scUserContext.user || contentAvailable) &&
114
114
  exploreStreamEnabled && (0, jsx_runtime_1.jsx)(ComposerIconButton_1.default, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: classes.notifications, component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(material_1.Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { children: "notifications_active" }) })) }))), scUserContext.user ? ((0, jsx_runtime_1.jsx)(NavigationSettingsIconButtonComponent, { className: classes.settings })) : ((0, jsx_runtime_1.jsx)(material_1.Button, Object.assign({ className: classes.login, color: "inherit", component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
115
115
  }
package/lib/cjs/components/SearchDialog/SearchDialog.d.ts CHANGED
@@ -6,7 +6,10 @@ export interface SearchDialogProps extends DialogProps {
6
6
  * @default null
7
7
  */
8
8
  className?: string;
9
- SearchAutocompleteProps: SearchAutocompleteProps;
9
+ /**
10
+ * Overrides props for the SearchAutocomplete component.
11
+ */
12
+ SearchAutocompleteComponentProps: SearchAutocompleteProps;
10
13
  /**
11
14
  * Other props
12
15
  */
package/lib/cjs/components/SearchDialog/SearchDialog.js CHANGED
@@ -30,7 +30,7 @@ function Search(inProps) {
30
30
  props: inProps,
31
31
  name: PREFIX
32
32
  });
33
- const { className, SearchAutocompleteProps = { autoFocus: true } } = props, rest = tslib_1.__rest(props, ["className", "SearchAutocompleteProps"]);
34
- return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteProps)) }) })));
33
+ const { className, SearchAutocompleteComponentProps = { autoFocus: true } } = props, rest = tslib_1.__rest(props, ["className", "SearchAutocompleteComponentProps"]);
34
+ return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: (0, jsx_runtime_1.jsx)(material_1.DialogContent, { children: (0, jsx_runtime_1.jsx)(SearchAutocomplete_1.default, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteComponentProps)) }) })));
35
35
  }
36
36
  exports.default = Search;
package/lib/esm/components/Editor/Editor.js CHANGED
@@ -8,19 +8,19 @@ import { useThemeProps } from '@mui/system';
8
8
  import nodes from './nodes';
9
9
  import { LexicalComposer } from '@lexical/react/LexicalComposer';
10
10
  import { ContentEditable } from '@lexical/react/LexicalContentEditable';
11
- import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
11
+ import ToolbarPlugin from './plugins/ToolbarPlugin';
12
+ import { PREFIX } from './constants';
13
+ import { HorizontalRulePlugin } from './plugins/HorizontalRulePlugin';
12
14
  import { RichTextPlugin } from './plugins/LexicalRichTextPlugin';
13
- import LexicalErrorBoundary from '@lexical/react/LexicalErrorBoundary';
14
- import { HorizontalRulePlugin } from '@lexical/react/LexicalHorizontalRulePlugin';
15
+ import { LexicalErrorBoundary } from '@lexical/react/LexicalErrorBoundary';
15
16
  import { AutoLinkPlugin, DefaultHtmlValuePlugin, EmojiPlugin, ImagePlugin, MentionsPlugin, OnChangePlugin } from './plugins';
17
+ import OnBlurPlugin from './plugins/OnBlurPlugin';
18
+ import OnFocusPlugin from './plugins/OnFocusPlugin';
16
19
  import { LinkPlugin } from '@lexical/react/LexicalLinkPlugin';
20
+ import FloatingLinkPlugin from './plugins/FloatingLinkPlugin';
17
21
  import ApiPlugin from './plugins/ApiPlugin';
18
- import ToolbarPlugin from './plugins/ToolbarPlugin';
22
+ import { HistoryPlugin } from '@lexical/react/LexicalHistoryPlugin';
19
23
  import { ListPlugin } from '@lexical/react/LexicalListPlugin';
20
- import FloatingLinkPlugin from './plugins/FloatingLinkPlugin';
21
- import OnBlurPlugin from './plugins/OnBlurPlugin';
22
- import OnFocusPlugin from './plugins/OnFocusPlugin';
23
- import { PREFIX } from './constants';
24
24
  const classes = {
25
25
  root: `${PREFIX}-root`,
26
26
  focused: `${PREFIX}-focused`,
package/lib/esm/components/Editor/plugins/HorizontalRulePlugin.d.ts ADDED
@@ -0,0 +1,8 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+ export declare function HorizontalRulePlugin(): null;
package/lib/esm/components/Editor/plugins/HorizontalRulePlugin.js ADDED
@@ -0,0 +1,30 @@
1
+ /**
2
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
3
+ *
4
+ * This source code is licensed under the MIT license found in the
5
+ * LICENSE file in the root directory of this source tree.
6
+ *
7
+ */
8
+ import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
9
+ import { $createHorizontalRuleNode, INSERT_HORIZONTAL_RULE_COMMAND } from '@lexical/react/LexicalHorizontalRuleNode';
10
+ import { $insertNodeToNearestRoot } from '@lexical/utils';
11
+ import { $getSelection, $isRangeSelection, COMMAND_PRIORITY_EDITOR } from 'lexical';
12
+ import { useEffect } from 'react';
13
+ export function HorizontalRulePlugin() {
14
+ const [editor] = useLexicalComposerContext();
15
+ useEffect(() => {
16
+ return editor.registerCommand(INSERT_HORIZONTAL_RULE_COMMAND, (type) => {
17
+ const selection = $getSelection();
18
+ if (!$isRangeSelection(selection)) {
19
+ return false;
20
+ }
21
+ const focusNode = selection.focus.getNode();
22
+ if (focusNode !== null) {
23
+ const horizontalRuleNode = $createHorizontalRuleNode();
24
+ $insertNodeToNearestRoot(horizontalRuleNode);
25
+ }
26
+ return true;
27
+ }, COMMAND_PRIORITY_EDITOR);
28
+ }, [editor]);
29
+ return null;
30
+ }
package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.d.ts CHANGED
@@ -1,6 +1,6 @@
1
1
  import { ErrorBoundaryType } from '../shared/useDecorators';
2
2
  export declare function RichTextPlugin({ contentEditable, placeholder, ErrorBoundary }: {
3
3
  contentEditable: JSX.Element;
4
- placeholder: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
5
- ErrorBoundary: ErrorBoundaryType;
4
+ placeholder?: ((isEditable: boolean) => null | JSX.Element) | null | JSX.Element;
5
+ ErrorBoundary?: ErrorBoundaryType;
6
6
  }): JSX.Element;
package/lib/esm/components/Editor/plugins/LexicalRichTextPlugin.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useLexicalComposerContext } from '@lexical/react/LexicalComposerContext';
3
- import useLexicalEditable from '@lexical/react/useLexicalEditable';
3
+ import { useLexicalEditable } from '@lexical/react/useLexicalEditable';
4
4
  import { useDecorators } from '../shared/useDecorators';
5
5
  import { useEditorFocus } from '../shared/useEditorFocus';
6
6
  import { useCanShowPlaceholder } from '../shared/useCanShowPlaceholder';
package/lib/esm/components/NavigationToolbar/NavigationToolbar.d.ts CHANGED
@@ -17,7 +17,7 @@ export interface NavigationToolbarProps extends ToolbarProps {
17
17
  /**
18
18
  * Searchbar props
19
19
  */
20
- SearchAutocompleteProps?: SearchAutocompleteProps;
20
+ SearchAutocompleteComponentProps?: SearchAutocompleteProps;
21
21
  /**
22
22
  * The navigation path
23
23
  */
package/lib/esm/components/NavigationToolbar/NavigationToolbar.js CHANGED
@@ -96,7 +96,7 @@ export default function NavigationToolbar(inProps) {
96
96
  props: inProps,
97
97
  name: PREFIX
98
98
  });
99
- const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
99
+ const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
100
100
  // CONTEXT
101
101
  const scUserContext = useSCUser();
102
102
  const scRoutingContext = useSCRouting();
@@ -146,7 +146,7 @@ export default function NavigationToolbar(inProps) {
146
146
  }), "aria-label": "Groups", to: scRoutingContext.url(SCRoutes.GROUPS_SUBSCRIBED_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "groups" }) }))), eventsEnabled && (scUserContext.user || preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY]) && (_jsx(IconButton, Object.assign({ className: classNames(classes.events, {
147
147
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}))
148
148
  }), "aria-label": "Events", to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}), component: Link }, { children: _jsx(Icon, { children: "CalendarIcon" }) })))] })));
149
- return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
149
+ return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsx(NavigationMenuIconButtonComponent, Object.assign({}, NavigationMenuIconButtonComponentProps)), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classes.logo }, { children: _jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO], alt: "logo" }) })), !scUserContext.user && !preferences[SCPreferences.ADDONS_CLOSED_COMMUNITY] && (_jsx(Button, Object.assign({ color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNUP_ROUTE_NAME, {}), className: classes.register }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.register", defaultMessage: "ui.appBar.navigation.register" }) }))), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED] && (_jsx(_Fragment, { children: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] ? (_jsx(Tooltip, Object.assign({ title: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_TEXT] }, { children: _jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) })) }))) : (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL], className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE], alt: "custom_item" }) }))) })), _children, (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) && !disableSearch ? (_jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: true }, SearchAutocompleteComponentProps))) : (_jsx(Box, { className: classes.search })), startActions, scUserContext.user ? (_jsxs(_Fragment, { children: [showComposer && _jsx(ComposerIconButton, Object.assign({ className: classes.composer }, ComposerIconButtonProps)), _jsx(Tooltip, Object.assign({ title: scUserContext.user.username }, { children: _jsx(IconButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.USER_PROFILE_ROUTE_NAME, scUserContext.user), "aria-label": "Profile", className: classes.profile }, { children: _jsx(Avatar, { alt: scUserContext.user.username, src: scUserContext.user.avatar }) })) })), _jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classNames(classes.notification, {
150
150
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}))
151
151
  }), "aria-label": "Notification", onClick: handleOpenNotificationMenu }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) })), Boolean(anchorNotification) && (_jsx(NotificationMenu, Object.assign({ className: classes.notificationsMenu, id: "notification-menu", anchorEl: anchorNotification, open: true, onClose: handleCloseNotificationMenu, onClick: handleCloseNotificationMenu, transformOrigin: { horizontal: 'right', vertical: 'top' }, anchorOrigin: { horizontal: 'right', vertical: 'bottom' } }, NotificationMenuProps)))] }), privateMessagingEnabled && (_jsx(IconButton, Object.assign({ className: classNames(classes.messages, {
152
152
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.USER_PRIVATE_MESSAGES_ROUTE_NAME, {}))
package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.d.ts CHANGED
@@ -16,7 +16,7 @@ export interface NavigationToolbarMobileProps extends ToolbarProps {
16
16
  /**
17
17
  * Props spread to SearchAutocomplete component
18
18
  */
19
- SearchAutocompleteProps?: SearchAutocompleteProps;
19
+ SearchAutocompleteComponentProps?: SearchAutocompleteProps;
20
20
  /**
21
21
  * Actions to be inserted before composer IconButton
22
22
  */
package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js CHANGED
@@ -69,7 +69,7 @@ export default function NavigationToolbarMobile(inProps) {
69
69
  props: inProps,
70
70
  name: PREFIX
71
71
  });
72
- const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, ComposerIconButtonProps = {} } = props, rest = __rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
72
+ const { className = '', disableSearch = false, preserveDesktopLogo = false, SearchAutocompleteComponentProps = {}, children = null, startActions = null, endActions = null, NavigationMenuIconButtonComponent = NavigationMenuIconButton, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, ComposerIconButtonProps = {} } = props, rest = __rest(props, ["className", "disableSearch", "preserveDesktopLogo", "SearchAutocompleteComponentProps", "children", "startActions", "endActions", "NavigationMenuIconButtonComponent", "NavigationSettingsIconButtonComponent", "ComposerIconButtonProps"]);
73
73
  // CONTEXT
74
74
  const scUserContext = useSCUser();
75
75
  const scRoutingContext = useSCRouting();
@@ -96,10 +96,10 @@ export default function NavigationToolbarMobile(inProps) {
96
96
  // HANDLERS
97
97
  const handleOpenSearch = useCallback(() => {
98
98
  setSearchOpen(true);
99
- }, []);
99
+ }, [setSearchOpen]);
100
100
  const handleCloseSearch = useCallback(() => {
101
101
  setSearchOpen(false);
102
- }, []);
102
+ }, [setSearchOpen]);
103
103
  // RENDER
104
104
  if (scUserContext.loading) {
105
105
  return _jsx(NavigationToolbarMobileSkeleton, {});
@@ -107,7 +107,7 @@ export default function NavigationToolbarMobile(inProps) {
107
107
  const _children = children || (_jsxs(_Fragment, { children: [_jsx(NavigationMenuIconButtonComponent, {}), _jsx(Link, Object.assign({ to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), className: classNames(className, classes.logo, {
108
108
  [classes.logoFlex]: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
109
109
  }) }, { children: !preserveDesktopLogo ? (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO_MOBILE].value, alt: "logo" })) : (_jsx("img", { src: preferences[SCPreferences.LOGO_NAVBAR_LOGO].value, alt: "logo" })) })), preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_ENABLED].value && (_jsx(Link, Object.assign({ target: "blank", to: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value, className: classes.customItem }, { children: _jsx("img", { src: preferences[SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_IMAGE].value, alt: "custom_item" }) })))] }));
110
- return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteProps: Object.assign(Object.assign({}, SearchAutocompleteProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
110
+ return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_children, startActions, (contentAvailable || scUserContext.user) && !disableSearch && (_jsxs(_Fragment, { children: [_jsx(IconButton, Object.assign({ className: classes.search, onClick: handleOpenSearch }, { children: _jsx(Icon, { children: "search" }) })), _jsx(SearchDialog, { className: classes.searchDialog, fullScreen: true, open: searchOpen, SearchAutocompleteComponentProps: Object.assign(Object.assign({}, SearchAutocompleteComponentProps), { onClear: handleCloseSearch }) })] })), endActions, (!postOnlyStaffEnabled || (UserUtils.isStaff(scUserContext.user) && postOnlyStaffEnabled)) &&
111
111
  (scUserContext.user || contentAvailable) &&
112
112
  exploreStreamEnabled && _jsx(ComposerIconButton, Object.assign({}, ComposerIconButtonProps)), scUserContext.user && (groupsEnabled || eventsEnabled) && (_jsx(IconButton, Object.assign({ className: classes.notifications, component: Link, to: scRoutingContext.url(SCRoutes.USER_NOTIFICATIONS_ROUTE_NAME, {}) }, { children: _jsx(Badge, Object.assign({ badgeContent: scUserContext.user.unseen_notification_banners_counter + scUserContext.user.unseen_interactions_counter, color: "secondary" }, { children: _jsx(Icon, { children: "notifications_active" }) })) }))), scUserContext.user ? (_jsx(NavigationSettingsIconButtonComponent, { className: classes.settings })) : (_jsx(Button, Object.assign({ className: classes.login, color: "inherit", component: Link, to: scRoutingContext.url(SCRoutes.SIGNIN_ROUTE_NAME, {}) }, { children: _jsx(FormattedMessage, { id: "ui.appBar.navigation.login", defaultMessage: "ui.appBar.navigation.login" }) })))] })));
113
113
  }
package/lib/esm/components/SearchDialog/SearchDialog.d.ts CHANGED
@@ -6,7 +6,10 @@ export interface SearchDialogProps extends DialogProps {
6
6
  * @default null
7
7
  */
8
8
  className?: string;
9
- SearchAutocompleteProps: SearchAutocompleteProps;
9
+ /**
10
+ * Overrides props for the SearchAutocomplete component.
11
+ */
12
+ SearchAutocompleteComponentProps: SearchAutocompleteProps;
10
13
  /**
11
14
  * Other props
12
15
  */
package/lib/esm/components/SearchDialog/SearchDialog.js CHANGED
@@ -28,6 +28,6 @@ export default function Search(inProps) {
28
28
  props: inProps,
29
29
  name: PREFIX
30
30
  });
31
- const { className, SearchAutocompleteProps = { autoFocus: true } } = props, rest = __rest(props, ["className", "SearchAutocompleteProps"]);
32
- return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(DialogContent, { children: _jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteProps)) }) })));
31
+ const { className, SearchAutocompleteComponentProps = { autoFocus: true } } = props, rest = __rest(props, ["className", "SearchAutocompleteComponentProps"]);
32
+ return (_jsx(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: _jsx(DialogContent, { children: _jsx(SearchAutocomplete, Object.assign({ className: classes.search, blurOnSelect: false, open: true, disablePortal: true }, SearchAutocompleteComponentProps)) }) })));
33
33
  }