@selfcommunity/react-ui 0.11.0-alpha.94 → 0.11.0-alpha.96

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 (20) hide show
  1. package/lib/cjs/components/BottomNavigation/BottomNavigation.js +13 -1
  2. package/lib/cjs/components/CategoryHeader/CategoryHeader.d.ts +6 -0
  3. package/lib/cjs/components/CategoryHeader/CategoryHeader.js +6 -3
  4. package/lib/cjs/components/NavigationMenuIconButton/DefaultDrawerContent.d.ts +1 -0
  5. package/lib/cjs/components/NavigationMenuIconButton/DefaultDrawerContent.js +14 -2
  6. package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js +14 -2
  7. package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js +13 -1
  8. package/lib/cjs/components/UserAutocomplete/UserAutocomplete.d.ts +0 -1
  9. package/lib/cjs/components/UserAutocomplete/UserAutocomplete.js +29 -19
  10. package/lib/esm/components/BottomNavigation/BottomNavigation.js +14 -2
  11. package/lib/esm/components/CategoryHeader/CategoryHeader.d.ts +6 -0
  12. package/lib/esm/components/CategoryHeader/CategoryHeader.js +6 -3
  13. package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.d.ts +1 -0
  14. package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js +15 -3
  15. package/lib/esm/components/NavigationToolbar/NavigationToolbar.js +15 -3
  16. package/lib/esm/components/NavigationToolbarMobile/NavigationToolbarMobile.js +13 -1
  17. package/lib/esm/components/UserAutocomplete/UserAutocomplete.d.ts +0 -1
  18. package/lib/esm/components/UserAutocomplete/UserAutocomplete.js +31 -21
  19. package/lib/umd/react-ui.js +1 -1
  20. package/package.json +6 -6
package/lib/cjs/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -10,6 +10,7 @@ const classnames_1 = tslib_1.__importDefault(require("classnames"));
10
10
  const types_1 = require("@selfcommunity/types");
11
11
  const utils_1 = require("@selfcommunity/utils");
12
12
  const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
13
+ const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
13
14
  const PREFIX = 'SCBottomNavigation';
14
15
  const classes = {
15
16
  root: `${PREFIX}-root`,
@@ -84,11 +85,22 @@ function BottomNavigation(inProps) {
84
85
  const postOnlyStaffEnabled = preferences[react_core_1.SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
85
86
  const contentAvailable = preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
86
87
  const isIOS = (0, react_1.useMemo)(() => (0, utils_1.iOS)(), []);
88
+ const handleClickHome = (0, react_1.useCallback)(() => {
89
+ if (onClickHome) {
90
+ onClickHome();
91
+ }
92
+ else {
93
+ const pathName = window.location.pathname;
94
+ if (pathName && (pathName === '/' || pathName === scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}))) {
95
+ (0, seamless_scroll_polyfill_1.scroll)(window, { top: 0, behavior: 'smooth' });
96
+ }
97
+ }
98
+ }, [onClickHome]);
87
99
  // RENDER
88
100
  return ((0, jsx_runtime_1.jsx)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root, { [classes.ios]: isIOS }) }, rest, { children: children
89
101
  ? children
90
102
  : [
91
- (0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, Object.assign({ 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: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }, (onClickHome && { onClick: onClickHome })), "home"),
103
+ (0, jsx_runtime_1.jsx)(material_1.BottomNavigationAction, { 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: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }), onClick: handleClickHome }, "home"),
92
104
  // (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (
93
105
  // <BottomNavigationAction
94
106
  // key="explore"
package/lib/cjs/components/CategoryHeader/CategoryHeader.d.ts CHANGED
@@ -27,6 +27,11 @@ export interface CategoryHeaderProps {
27
27
  * @default {}
28
28
  */
29
29
  CategoryFollowersButtonProps?: Pick<CategoryFollowersButtonProps, Exclude<keyof CategoryFollowersButtonProps, 'category' | 'categoryId'>>;
30
+ /**
31
+ * shows category tags
32
+ * @default false
33
+ */
34
+ showTags?: boolean;
30
35
  /**
31
36
  * Any other properties
32
37
  */
@@ -56,6 +61,7 @@ export interface CategoryHeaderProps {
56
61
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
57
62
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
58
63
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
64
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
59
65
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
60
66
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
61
67
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
package/lib/cjs/components/CategoryHeader/CategoryHeader.js CHANGED
@@ -13,12 +13,14 @@ const system_1 = require("@mui/system");
13
13
  const CategoryFollowersButton_1 = tslib_1.__importDefault(require("../CategoryFollowersButton"));
14
14
  const constants_1 = require("./constants");
15
15
  const BuyButton_1 = tslib_1.__importDefault(require("../BuyButton"));
16
+ const TagChip_1 = tslib_1.__importDefault(require("../../shared/TagChip"));
16
17
  const classes = {
17
18
  root: `${constants_1.PREFIX}-root`,
18
19
  cover: `${constants_1.PREFIX}-cover`,
19
20
  name: `${constants_1.PREFIX}-name`,
20
21
  slogan: `${constants_1.PREFIX}-slogan`,
21
22
  info: `${constants_1.PREFIX}-info`,
23
+ tags: `${constants_1.PREFIX}-tags`,
22
24
  followedCounter: `${constants_1.PREFIX}-followed-counter`,
23
25
  followed: `${constants_1.PREFIX}-followed`,
24
26
  action: `${constants_1.PREFIX}-action`
@@ -51,6 +53,7 @@ const Root = (0, material_1.styled)(material_1.Box, {
51
53
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
52
54
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
53
55
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
56
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
54
57
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
55
58
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
56
59
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
@@ -58,13 +61,13 @@ const Root = (0, material_1.styled)(material_1.Box, {
58
61
  * @param inProps
59
62
  */
60
63
  function CategoryHeader(inProps) {
61
- var _a;
64
+ var _a, _b;
62
65
  // PROPS
63
66
  const props = (0, system_1.useThemeProps)({
64
67
  props: inProps,
65
68
  name: constants_1.PREFIX
66
69
  });
67
- const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
70
+ const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {}, showTags = false } = props, rest = tslib_1.__rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps", "showTags"]);
68
71
  // STATE
69
72
  const { scCategory, setSCCategory } = (0, react_core_1.useSCFetchCategory)({ id: categoryId, category });
70
73
  const categoryFollowEnabled = (0, react_core_1.useSCPreferenceEnabled)(react_core_1.SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
@@ -81,6 +84,6 @@ function CategoryHeader(inProps) {
81
84
  if (!scCategory) {
82
85
  return null;
83
86
  }
84
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), categoryFollowEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scCategory.payment_order && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory })), (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
87
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(classes.root, className) }, rest, { children: [(0, jsx_runtime_1.jsx)(material_1.Paper, { style: _backgroundCover, classes: { root: classes.cover } }), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.info }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && ((0, jsx_runtime_1.jsx)(material_1.Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => ((0, jsx_runtime_1.jsx)(TagChip_1.default, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.followed }, { children: [(0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), (0, jsx_runtime_1.jsx)(CategoryFollowersButton_1.default, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), (0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 && scCategory.payment_order && ((0, jsx_runtime_1.jsx)(BuyButton_1.default, { contentType: types_1.SCContentType.CATEGORY, content: scCategory })), (0, jsx_runtime_1.jsx)(CategoryFollowButton_1.default, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
85
88
  }
86
89
  exports.default = CategoryHeader;
package/lib/cjs/components/NavigationMenuIconButton/DefaultDrawerContent.d.ts CHANGED
@@ -3,5 +3,6 @@ import { CategoryProps } from '../Category';
3
3
  export interface DefaultDrawerContentProps extends BoxProps {
4
4
  CategoryItemProps?: CategoryProps;
5
5
  tagImage?: string;
6
+ onClickHome?: () => void;
6
7
  }
7
8
  export default function DefaultDrawerContent(inProps: DefaultDrawerContentProps): JSX.Element;
package/lib/cjs/components/NavigationMenuIconButton/DefaultDrawerContent.js CHANGED
@@ -14,6 +14,7 @@ const system_1 = require("@mui/system");
14
14
  const BaseItem_1 = tslib_1.__importDefault(require("../../shared/BaseItem"));
15
15
  const formazione_1 = tslib_1.__importDefault(require("../../assets/custom/formazione"));
16
16
  const DefaultDrawerContent_1 = require("../../constants/DefaultDrawerContent");
17
+ const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
17
18
  const PREFIX = 'SCDefaultDrawerContent';
18
19
  const classes = {
19
20
  root: `${PREFIX}-root`,
@@ -31,7 +32,7 @@ function DefaultDrawerContent(inProps) {
31
32
  props: inProps,
32
33
  name: PREFIX
33
34
  });
34
- const { className, CategoryItemProps = { showTooltip: true }, tagImage = '/' } = props, rest = tslib_1.__rest(props, ["className", "CategoryItemProps", "tagImage"]);
35
+ const { className, CategoryItemProps = { showTooltip: true }, tagImage = '/', onClickHome } = props, rest = tslib_1.__rest(props, ["className", "CategoryItemProps", "tagImage", "onClickHome"]);
35
36
  // HOOKS
36
37
  const { categories } = (0, react_core_1.useSCFetchCategories)();
37
38
  const [categoriesOrdered, setCategoriesOrdered] = (0, react_1.useState)([]);
@@ -79,6 +80,17 @@ function DefaultDrawerContent(inProps) {
79
80
  const handleChange = (tagName) => (_event, isExpanded) => {
80
81
  setExpanded(isExpanded ? tagName : false);
81
82
  };
83
+ const handleClickHome = (0, react_1.useCallback)(() => {
84
+ if (onClickHome) {
85
+ onClickHome();
86
+ }
87
+ else {
88
+ const pathName = window.location.pathname;
89
+ if (pathName && (pathName === '/' || pathName === scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}))) {
90
+ (0, seamless_scroll_polyfill_1.scroll)(window, { top: 0, behavior: 'smooth' });
91
+ }
92
+ }
93
+ }, [onClickHome]);
82
94
  // Order categories
83
95
  (0, react_1.useEffect)(() => {
84
96
  if (!scUserContext.user || (scUserContext.user && showAllCategories)) {
@@ -111,7 +123,7 @@ function DefaultDrawerContent(inProps) {
111
123
  }
112
124
  });
113
125
  //order
114
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
126
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: (0, classnames_1.default)(className, classes.root) }, rest, { children: [(0, jsx_runtime_1.jsxs)(material_1.List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), onClickHome: handleClickHome }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "courses" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "groups" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "CalendarIcon" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && ((0, jsx_runtime_1.jsx)(material_1.ListItem, Object.assign({ disablePadding: true }, { children: (0, jsx_runtime_1.jsxs)(material_1.ListItemButton, Object.assign({ component: react_core_1.Link, to: scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [(0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "explore" }) }), (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), (0, jsx_runtime_1.jsx)(material_1.Divider, {}), (0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && ((0, jsx_runtime_1.jsx)(material_1.Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), (0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
115
127
  var _a;
116
128
  if (!categories.length || !((_a = categories[0].tags) === null || _a === void 0 ? void 0 : _a.length))
117
129
  return null;
package/lib/cjs/components/NavigationToolbar/NavigationToolbar.js CHANGED
@@ -16,6 +16,7 @@ const types_1 = require("@selfcommunity/types");
16
16
  const react_core_1 = require("@selfcommunity/react-core");
17
17
  const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("../NavigationMenuIconButton"));
18
18
  const constants_1 = require("./constants");
19
+ const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
19
20
  const classes = {
20
21
  root: `${constants_1.PREFIX}-root`,
21
22
  logo: `${constants_1.PREFIX}-logo`,
@@ -99,7 +100,7 @@ function NavigationToolbar(inProps) {
99
100
  props: inProps,
100
101
  name: constants_1.PREFIX
101
102
  });
102
- 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 = {}, onClickHome, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onClickHome", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
103
+ const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton_1.default, NavigationMenuIconButtonComponent = NavigationMenuIconButton_1.default, NavigationMenuIconButtonComponentProps = {}, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onClickHome, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = tslib_1.__rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponent", "NavigationMenuIconButtonComponentProps", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onClickHome", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
103
104
  // CONTEXT
104
105
  const scUserContext = (0, react_core_1.useSCUser)();
105
106
  const scRoutingContext = (0, react_core_1.useSCRouting)();
@@ -147,11 +148,22 @@ function NavigationToolbar(inProps) {
147
148
  setAnchorNotification(null);
148
149
  onCloseNotificationMenu && onCloseNotificationMenu();
149
150
  };
151
+ const handleClickHome = (0, react_1.useCallback)(() => {
152
+ if (onClickHome) {
153
+ onClickHome();
154
+ }
155
+ else {
156
+ const pathName = window.location.pathname;
157
+ if (pathName && (pathName === '/' || pathName === scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}))) {
158
+ (0, seamless_scroll_polyfill_1.scroll)(window, { top: 0, behavior: 'smooth' });
159
+ }
160
+ }
161
+ }, [onClickHome]);
150
162
  // RENDER
151
163
  if (scUserContext.loading) {
152
164
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
153
165
  }
154
- const _children = children || ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), component: react_core_1.Link }, (onClickHome && { onClick: onClickHome }), { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
166
+ const _children = children || ((0, jsx_runtime_1.jsxs)(material_1.Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}), component: react_core_1.Link, onClick: handleClickHome }, { children: (0, jsx_runtime_1.jsx)(material_1.Icon, { children: "home" }) }))), preferences[react_core_1.SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
155
167
  (preferences[react_core_1.SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) &&
156
168
  (!scUserContext.user || (!groupsEnabled && !coursesEnabled && !eventsEnabled)) && ((0, jsx_runtime_1.jsx)(material_1.IconButton, Object.assign({ className: (0, classnames_1.default)(classes.explore, {
157
169
  [classes.active]: value.startsWith(scRoutingContext.url(react_core_1.SCRoutes.EXPLORE_ROUTE_NAME, {}))
package/lib/cjs/components/NavigationToolbarMobile/NavigationToolbarMobile.js CHANGED
@@ -14,6 +14,7 @@ const NavigationSettingsIconButton_1 = tslib_1.__importDefault(require("../Navig
14
14
  const NavigationMenuIconButton_1 = tslib_1.__importDefault(require("../NavigationMenuIconButton"));
15
15
  const constants_1 = require("./constants");
16
16
  const types_1 = require("@selfcommunity/types");
17
+ const seamless_scroll_polyfill_1 = require("seamless-scroll-polyfill");
17
18
  const ComposerIconButton_1 = tslib_1.__importDefault(require("../ComposerIconButton"));
18
19
  const classes = {
19
20
  root: `${constants_1.PREFIX}-root`,
@@ -101,13 +102,24 @@ function NavigationToolbarMobile(inProps) {
101
102
  const handleCloseSearch = (0, react_1.useCallback)(() => {
102
103
  setSearchOpen(false);
103
104
  }, [setSearchOpen]);
105
+ const handleClickHome = (0, react_1.useCallback)(() => {
106
+ if (onClickHome) {
107
+ onClickHome();
108
+ }
109
+ else {
110
+ const pathName = window.location.pathname;
111
+ if (pathName && (pathName === '/' || pathName === scRoutingContext.url(react_core_1.SCRoutes.HOME_ROUTE_NAME, {}))) {
112
+ (0, seamless_scroll_polyfill_1.scroll)(window, { top: 0, behavior: 'smooth' });
113
+ }
114
+ }
115
+ }, [onClickHome]);
104
116
  // RENDER
105
117
  if (scUserContext.loading) {
106
118
  return (0, jsx_runtime_1.jsx)(Skeleton_1.default, {});
107
119
  }
108
120
  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, {
109
121
  [classes.logoFlex]: preferences[react_core_1.SCPreferences.CONFIGURATIONS_CUSTOM_NAVBAR_ITEM_URL].value
110
- }) }, (onClickHome && { onClick: onClickHome }), { 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" }) })))] }));
122
+ }), onClick: handleClickHome }, { 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" }) })))] }));
111
123
  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)(material_1.Icon, { 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) || react_core_1.UserUtils.isPublisher(scUserContext.user)) &&
112
124
  (scUserContext.user || contentAvailable) &&
113
125
  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)(material_1.Icon, { 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" }) })))] })));
package/lib/cjs/components/UserAutocomplete/UserAutocomplete.d.ts CHANGED
@@ -16,7 +16,6 @@ export interface UserAutocompleteProps extends Pick<AutocompleteProps<SCUserAuto
16
16
  * @default 0
17
17
  */
18
18
  limitCountGroups?: number;
19
- endpointQueryParams?: Record<string, string | number | boolean>;
20
19
  }
21
20
  declare const UserAutocomplete: (inProps: UserAutocompleteProps) => JSX.Element;
22
21
  export default UserAutocomplete;
package/lib/cjs/components/UserAutocomplete/UserAutocomplete.js CHANGED
@@ -9,6 +9,7 @@ const match_1 = tslib_1.__importDefault(require("autosuggest-highlight/match"));
9
9
  const material_1 = require("@mui/material");
10
10
  const react_core_1 = require("@selfcommunity/react-core");
11
11
  const system_1 = require("@mui/system");
12
+ const api_services_1 = require("@selfcommunity/api-services");
12
13
  const PREFIX = 'SCUserAutocomplete';
13
14
  const classes = {
14
15
  root: `${PREFIX}-root`,
@@ -39,15 +40,21 @@ const UserAutocomplete = (inProps) => {
39
40
  const [inputValue, setInputValue] = (0, react_1.useState)('');
40
41
  const [value, setValue] = (0, react_1.useState)(Array.isArray(defaultValue) ? defaultValue : defaultValue ? [defaultValue] : []);
41
42
  const [textAreaValue, setTextAreaValue] = (0, react_1.useState)('');
42
- // Fetch users
43
- const { users, isLoading } = (0, react_core_1.useSCFetchUsers)({ search: inputValue });
43
+ // Exclude selected users by ID
44
+ const excludeIds = (0, react_1.useMemo)(() => value
45
+ .map((u) => (typeof u === 'object' ? u.id : null))
46
+ .filter(Boolean)
47
+ .join(','), [value]);
48
+ // Fetch users excluding selected ones
49
+ const { users, isLoading } = (0, react_core_1.useSCFetchUsers)({ search: inputValue, exclude: excludeIds });
50
+ const filteredUsers = users.filter((u) => !excludeIds.includes(u.id));
44
51
  (0, react_1.useEffect)(() => {
45
52
  onChange === null || onChange === void 0 ? void 0 : onChange(value);
46
53
  setTextAreaValue(value.map((u) => (typeof u === 'object' ? u.username : u)).join('\n'));
47
54
  }, [value]);
48
55
  // Handlers
49
56
  const handleOpen = () => {
50
- users.length > 0 && setOpen(true);
57
+ filteredUsers.length > 0 && setOpen(true);
51
58
  };
52
59
  const handleClose = () => {
53
60
  setOpen(false);
@@ -55,26 +62,29 @@ const UserAutocomplete = (inProps) => {
55
62
  const handleChange = (_event, newValue) => {
56
63
  setValue(newValue);
57
64
  };
58
- const handleTextAreaChange = (e) => {
59
- const names = e.target.value
65
+ const handleTextAreaChange = (e) => tslib_1.__awaiter(void 0, void 0, void 0, function* () {
66
+ const names = Array.from(new Set(e.target.value
60
67
  .split(/\s|,|\n/)
61
68
  .map((s) => s.trim())
62
- .filter(Boolean);
63
- const matched = names.map((name) => {
64
- const user = users.find((u) => u.username === name);
65
- return user || name;
66
- });
67
- setValue(matched);
69
+ .filter(Boolean)));
70
+ let resolvedUsers = [];
71
+ try {
72
+ if (names.length > 0) {
73
+ const resp = yield api_services_1.UserService.matchUsernames(names.join(','));
74
+ const matchedMap = new Map(resp.map((u) => [u.username, u]));
75
+ resolvedUsers = names.map((name) => matchedMap.get(name) || name);
76
+ }
77
+ }
78
+ catch (err) {
79
+ console.error(`Failed fetching users`, err);
80
+ resolvedUsers = names;
81
+ }
82
+ setValue(resolvedUsers);
68
83
  setTextAreaValue(e.target.value);
69
- };
70
- return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: users || [], getOptionLabel: (option) => option.username || '', value: value, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
84
+ });
85
+ return ((0, jsx_runtime_1.jsxs)(Root, Object.assign({ className: classes.root }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteRoot, Object.assign({ multiple: true, className: classes.autocompleteRoot, open: open, onOpen: handleOpen, onClose: handleClose, options: filteredUsers || [], getOptionLabel: (option) => option.username || '', value: value, inputValue: inputValue, onInputChange: (_event, newInputValue) => {
71
86
  setInputValue(newInputValue);
72
- }, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => {
73
- if (typeof val === 'string') {
74
- return option.username === val;
75
- }
76
- return option.id === val.id;
77
- }, renderTags: (value, getTagProps) => value.map((option, index) => {
87
+ }, selectOnFocus: true, clearOnBlur: true, blurOnSelect: true, handleHomeEndKeys: true, clearIcon: null, disabled: disabled || isLoading, noOptionsText: (0, jsx_runtime_1.jsx)(react_intl_1.FormattedMessage, { id: "ui.userAutocomplete.empty", defaultMessage: "ui.userAutocomplete.empty" }), onChange: handleChange, isOptionEqualToValue: (option, val) => option.id === val.id, renderTags: (value, getTagProps) => value.map((option, index) => {
78
88
  const username = typeof option === 'string' ? option : option.username;
79
89
  const avatar = typeof option === 'string' ? '' : option.avatar;
80
90
  const id = typeof option === 'string' ? `fallback-${option}` : option.id;
package/lib/esm/components/BottomNavigation/BottomNavigation.js CHANGED
@@ -1,13 +1,14 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx } from "react/jsx-runtime";
3
3
  import { Badge, BottomNavigation as MuiBottomNavigation, BottomNavigationAction, Icon, styled } from '@mui/material';
4
- import { useMemo } from 'react';
4
+ import { useCallback, useMemo } from 'react';
5
5
  import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
6
6
  import { useThemeProps } from '@mui/system';
7
7
  import classNames from 'classnames';
8
8
  import { SCFeatureName } from '@selfcommunity/types';
9
9
  import { iOS } from '@selfcommunity/utils';
10
10
  import ComposerIconButton from '../ComposerIconButton';
11
+ import { scroll } from 'seamless-scroll-polyfill';
11
12
  const PREFIX = 'SCBottomNavigation';
12
13
  const classes = {
13
14
  root: `${PREFIX}-root`,
@@ -82,11 +83,22 @@ export default function BottomNavigation(inProps) {
82
83
  const postOnlyStaffEnabled = preferences[SCPreferences.CONFIGURATIONS_POST_ONLY_STAFF_ENABLED].value;
83
84
  const contentAvailable = preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY].value;
84
85
  const isIOS = useMemo(() => iOS(), []);
86
+ const handleClickHome = useCallback(() => {
87
+ if (onClickHome) {
88
+ onClickHome();
89
+ }
90
+ else {
91
+ const pathName = window.location.pathname;
92
+ if (pathName && (pathName === '/' || pathName === scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}))) {
93
+ scroll(window, { top: 0, behavior: 'smooth' });
94
+ }
95
+ }
96
+ }, [onClickHome]);
85
97
  // RENDER
86
98
  return (_jsx(Root, Object.assign({ className: classNames(className, classes.root, { [classes.ios]: isIOS }) }, rest, { children: children
87
99
  ? children
88
100
  : [
89
- _jsx(BottomNavigationAction, Object.assign({ className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: _jsx(Icon, { children: "home" }) }, (onClickHome && { onClick: onClickHome })), "home"),
101
+ _jsx(BottomNavigationAction, { className: classes.action, component: Link, to: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', value: scUserContext.user ? scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) : '/', icon: _jsx(Icon, { children: "home" }), onClick: handleClickHome }, "home"),
90
102
  // (scUserContext.user || contentAvailable) && exploreStreamEnabled ? (
91
103
  // <BottomNavigationAction
92
104
  // key="explore"
package/lib/esm/components/CategoryHeader/CategoryHeader.d.ts CHANGED
@@ -27,6 +27,11 @@ export interface CategoryHeaderProps {
27
27
  * @default {}
28
28
  */
29
29
  CategoryFollowersButtonProps?: Pick<CategoryFollowersButtonProps, Exclude<keyof CategoryFollowersButtonProps, 'category' | 'categoryId'>>;
30
+ /**
31
+ * shows category tags
32
+ * @default false
33
+ */
34
+ showTags?: boolean;
30
35
  /**
31
36
  * Any other properties
32
37
  */
@@ -56,6 +61,7 @@ export interface CategoryHeaderProps {
56
61
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
57
62
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
58
63
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
64
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
59
65
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
60
66
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
61
67
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
package/lib/esm/components/CategoryHeader/CategoryHeader.js CHANGED
@@ -11,12 +11,14 @@ import { useThemeProps } from '@mui/system';
11
11
  import CategoryFollowersButton from '../CategoryFollowersButton';
12
12
  import { PREFIX } from './constants';
13
13
  import BuyButton from '../BuyButton';
14
+ import TagChip from '../../shared/TagChip';
14
15
  const classes = {
15
16
  root: `${PREFIX}-root`,
16
17
  cover: `${PREFIX}-cover`,
17
18
  name: `${PREFIX}-name`,
18
19
  slogan: `${PREFIX}-slogan`,
19
20
  info: `${PREFIX}-info`,
21
+ tags: `${PREFIX}-tags`,
20
22
  followedCounter: `${PREFIX}-followed-counter`,
21
23
  followed: `${PREFIX}-followed`,
22
24
  action: `${PREFIX}-action`
@@ -49,6 +51,7 @@ const Root = styled(Box, {
49
51
  |name|.SCCategoryHeader-name|Styles applied to the name element.|
50
52
  |slogan|.SCCategoryHeader-slogan|Styles applied to the slogan element.|
51
53
  |info|.SCCategoryHeader-info|Styles applied to the info element.|
54
+ |tags|.SCCategoryHeader-tags|Styles applied to the tags elements.|
52
55
  |followedCounter|.SCCategoryHeader-followed-by-counter|Styles applied to the followers counter element.|
53
56
  |followed|.SCCategoryHeader-followed|Styles applied to the followers avatars section.|
54
57
  |action|.SCCategoryHeader-action|Styles applied to the action section.|
@@ -56,13 +59,13 @@ const Root = styled(Box, {
56
59
  * @param inProps
57
60
  */
58
61
  export default function CategoryHeader(inProps) {
59
- var _a;
62
+ var _a, _b;
60
63
  // PROPS
61
64
  const props = useThemeProps({
62
65
  props: inProps,
63
66
  name: PREFIX
64
67
  });
65
- const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {} } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps"]);
68
+ const { className, categoryId, category, CategoryFollowButtonProps = {}, CategoryFollowersButtonProps = {}, showTags = false } = props, rest = __rest(props, ["className", "categoryId", "category", "CategoryFollowButtonProps", "CategoryFollowersButtonProps", "showTags"]);
66
69
  // STATE
67
70
  const { scCategory, setSCCategory } = useSCFetchCategory({ id: categoryId, category });
68
71
  const categoryFollowEnabled = useSCPreferenceEnabled(SCPreferences.CONFIGURATIONS_CATEGORY_FOLLOW_ENABLED);
@@ -79,5 +82,5 @@ export default function CategoryHeader(inProps) {
79
82
  if (!scCategory) {
80
83
  return null;
81
84
  }
82
- return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), categoryFollowEnabled && (_jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), _jsxs(Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_a = scCategory.paywalls) === null || _a === void 0 ? void 0 : _a.length) > 0 && scCategory.payment_order && (_jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory })), _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
85
+ return (_jsxs(Root, Object.assign({ className: classNames(classes.root, className) }, rest, { children: [_jsx(Paper, { style: _backgroundCover, classes: { root: classes.cover } }), _jsxs(Box, Object.assign({ className: classes.info }, { children: [_jsx(Typography, Object.assign({ variant: "h3", className: classes.name, gutterBottom: true }, { children: scCategory.name })), scCategory.slogan && (_jsx(Typography, Object.assign({ variant: "h5", className: classes.slogan }, { children: scCategory.slogan }))), showTags && ((_a = scCategory.tags) === null || _a === void 0 ? void 0 : _a.length) > 0 && (_jsx(Box, Object.assign({ className: classes.tags }, { children: scCategory.tags.map((t) => (_jsx(TagChip, { tag: t, disposable: false, clickable: false }, t.id))) }))), categoryFollowEnabled && (_jsxs(Box, Object.assign({ className: classes.followed }, { children: [_jsx(Typography, Object.assign({ className: classes.followedCounter, component: "div" }, { children: _jsx(FormattedMessage, { id: "ui.categoryHeader.followedBy", defaultMessage: "ui.categoryHeader.followedBy", values: { total: scCategory.followers_counter } }) })), _jsx(CategoryFollowersButton, Object.assign({ category: scCategory, categoryId: scCategory === null || scCategory === void 0 ? void 0 : scCategory.id }, CategoryFollowersButtonProps))] }))), _jsxs(Box, Object.assign({ className: classes.action }, { children: [isPaymentsEnabled && ((_b = scCategory.paywalls) === null || _b === void 0 ? void 0 : _b.length) > 0 && scCategory.payment_order && (_jsx(BuyButton, { contentType: SCContentType.CATEGORY, content: scCategory })), _jsx(CategoryFollowButton, Object.assign({ category: scCategory, onFollow: handleFollow }, CategoryFollowButtonProps))] }))] }))] })));
83
86
  }
package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.d.ts CHANGED
@@ -3,5 +3,6 @@ import { CategoryProps } from '../Category';
3
3
  export interface DefaultDrawerContentProps extends BoxProps {
4
4
  CategoryItemProps?: CategoryProps;
5
5
  tagImage?: string;
6
+ onClickHome?: () => void;
6
7
  }
7
8
  export default function DefaultDrawerContent(inProps: DefaultDrawerContentProps): JSX.Element;
package/lib/esm/components/NavigationMenuIconButton/DefaultDrawerContent.js CHANGED
@@ -2,7 +2,7 @@ import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import { Box, Divider, Icon, List, ListItem, ListItemButton, ListItemIcon, ListItemText, Typography, Zoom, styled, AccordionDetails, Accordion, AccordionSummary, Avatar } from '@mui/material';
4
4
  import { Link, SCPreferences, SCRoutes, useSCFetchCategories, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
5
- import { useEffect, useMemo, useState } from 'react';
5
+ import { useCallback, useEffect, useMemo, useState } from 'react';
6
6
  import Category from '../Category';
7
7
  import { FormattedMessage } from 'react-intl';
8
8
  import { sortByAttr } from '@selfcommunity/utils';
@@ -12,6 +12,7 @@ import { useThemeProps } from '@mui/system';
12
12
  import BaseItem from '../../shared/BaseItem';
13
13
  import FormazionePlaceholder from '../../assets/custom/formazione';
14
14
  import { DefaultCategoryTagName } from '../../constants/DefaultDrawerContent';
15
+ import { scroll } from 'seamless-scroll-polyfill';
15
16
  const PREFIX = 'SCDefaultDrawerContent';
16
17
  const classes = {
17
18
  root: `${PREFIX}-root`,
@@ -29,7 +30,7 @@ export default function DefaultDrawerContent(inProps) {
29
30
  props: inProps,
30
31
  name: PREFIX
31
32
  });
32
- const { className, CategoryItemProps = { showTooltip: true }, tagImage = '/' } = props, rest = __rest(props, ["className", "CategoryItemProps", "tagImage"]);
33
+ const { className, CategoryItemProps = { showTooltip: true }, tagImage = '/', onClickHome } = props, rest = __rest(props, ["className", "CategoryItemProps", "tagImage", "onClickHome"]);
33
34
  // HOOKS
34
35
  const { categories } = useSCFetchCategories();
35
36
  const [categoriesOrdered, setCategoriesOrdered] = useState([]);
@@ -77,6 +78,17 @@ export default function DefaultDrawerContent(inProps) {
77
78
  const handleChange = (tagName) => (_event, isExpanded) => {
78
79
  setExpanded(isExpanded ? tagName : false);
79
80
  };
81
+ const handleClickHome = useCallback(() => {
82
+ if (onClickHome) {
83
+ onClickHome();
84
+ }
85
+ else {
86
+ const pathName = window.location.pathname;
87
+ if (pathName && (pathName === '/' || pathName === scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}))) {
88
+ scroll(window, { top: 0, behavior: 'smooth' });
89
+ }
90
+ }
91
+ }, [onClickHome]);
80
92
  // Order categories
81
93
  useEffect(() => {
82
94
  if (!scUserContext.user || (scUserContext.user && showAllCategories)) {
@@ -109,7 +121,7 @@ export default function DefaultDrawerContent(inProps) {
109
121
  }
110
122
  });
111
123
  //order
112
- return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "courses" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), _jsxs(_Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
124
+ return (_jsxs(Root, Object.assign({ className: classNames(className, classes.root) }, rest, { children: [_jsxs(List, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), onClickHome: handleClickHome }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "home" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.home" }) })] })) }))), coursesEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.COURSES_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "courses" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.courses" }) })] })) }))), groupsEnabled && scUserContext.user && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.GROUPS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "groups" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.groups" }) })] })) }))), eventsEnabled && (scUserContext.user || contentAvailable) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EVENTS_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "CalendarIcon" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.events" }) })] })) }))), exploreStreamEnabled && (contentAvailable || scUserContext.user) && (_jsx(ListItem, Object.assign({ disablePadding: true }, { children: _jsxs(ListItemButton, Object.assign({ component: Link, to: scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}) }, { children: [_jsx(ListItemIcon, { children: _jsx(Icon, { children: "explore" }) }), _jsx(ListItemText, { primary: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.navigation.explore" }) })] })) })))] })), _jsx(Divider, {}), _jsx(Typography, Object.assign({ variant: "subtitle1", className: classes.title }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.title", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.title" }) })), !categoriesOrdered.length && (_jsx(Typography, Object.assign({ variant: "body1", className: classes.noResults }, { children: _jsx(FormattedMessage, { id: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults", defaultMessage: "ui.navigationMenuIconButton.defaultDrawerContent.category.noResults" }) }))), _jsxs(_Fragment, { children: [Object.entries(taggedCategories).map(([tagName, categories]) => {
113
125
  var _a;
114
126
  if (!categories.length || !((_a = categories[0].tags) === null || _a === void 0 ? void 0 : _a.length))
115
127
  return null;
package/lib/esm/components/NavigationToolbar/NavigationToolbar.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { __rest } from "tslib";
2
2
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
3
3
  import { Avatar, Badge, Box, Button, IconButton, styled, Toolbar, Tooltip, Icon } from '@mui/material';
4
- import React, { useMemo } from 'react';
4
+ import React, { useCallback, useMemo } from 'react';
5
5
  import { useThemeProps } from '@mui/system';
6
6
  import classNames from 'classnames';
7
7
  import NavigationToolbarSkeleton from './Skeleton';
@@ -14,6 +14,7 @@ import { SCFeatureName } from '@selfcommunity/types';
14
14
  import { Link, SCPreferences, SCRoutes, UserUtils, useSCPreferences, useSCRouting, useSCUser } from '@selfcommunity/react-core';
15
15
  import NavigationMenuIconButton from '../NavigationMenuIconButton';
16
16
  import { PREFIX } from './constants';
17
+ import { scroll } from 'seamless-scroll-polyfill';
17
18
  const classes = {
18
19
  root: `${PREFIX}-root`,
19
20
  logo: `${PREFIX}-logo`,
@@ -97,7 +98,7 @@ export default function NavigationToolbar(inProps) {
97
98
  props: inProps,
98
99
  name: PREFIX
99
100
  });
100
- const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponentProps = {}, NavigationMenuIconButtonComponent = NavigationMenuIconButton, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onClickHome, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponentProps", "NavigationMenuIconButtonComponent", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onClickHome", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
101
+ const { value = '', className = '', disableSearch = false, disableComposer = false, SearchAutocompleteComponentProps = {}, startActions = null, endActions = null, NavigationSettingsIconButtonComponent = NavigationSettingsIconButton, NavigationMenuIconButtonComponent = NavigationMenuIconButton, NavigationMenuIconButtonComponentProps = {}, children = null, NotificationMenuProps = {}, ComposerIconButtonProps = {}, onClickHome, onOpenNotificationMenu, onCloseNotificationMenu } = props, rest = __rest(props, ["value", "className", "disableSearch", "disableComposer", "SearchAutocompleteComponentProps", "startActions", "endActions", "NavigationSettingsIconButtonComponent", "NavigationMenuIconButtonComponent", "NavigationMenuIconButtonComponentProps", "children", "NotificationMenuProps", "ComposerIconButtonProps", "onClickHome", "onOpenNotificationMenu", "onCloseNotificationMenu"]);
101
102
  // CONTEXT
102
103
  const scUserContext = useSCUser();
103
104
  const scRoutingContext = useSCRouting();
@@ -145,11 +146,22 @@ export default function NavigationToolbar(inProps) {
145
146
  setAnchorNotification(null);
146
147
  onCloseNotificationMenu && onCloseNotificationMenu();
147
148
  };
149
+ const handleClickHome = useCallback(() => {
150
+ if (onClickHome) {
151
+ onClickHome();
152
+ }
153
+ else {
154
+ const pathName = window.location.pathname;
155
+ if (pathName && (pathName === '/' || pathName === scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}))) {
156
+ scroll(window, { top: 0, behavior: 'smooth' });
157
+ }
158
+ }
159
+ }, [onClickHome]);
148
160
  // RENDER
149
161
  if (scUserContext.loading) {
150
162
  return _jsx(NavigationToolbarSkeleton, {});
151
163
  }
152
- const _children = children || (_jsxs(Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), component: Link }, (onClickHome && { onClick: onClickHome }), { children: _jsx(Icon, { children: "home" }) }))), preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
164
+ const _children = children || (_jsxs(Box, Object.assign({ className: classes.navigation }, { children: [scUserContext.user && (_jsx(IconButton, Object.assign({ className: classNames(classes.home, { [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {})) }), "aria-label": "Home", to: scRoutingContext.url(SCRoutes.HOME_ROUTE_NAME, {}), component: Link, onClick: handleClickHome }, { children: _jsx(Icon, { children: "home" }) }))), preferences[SCPreferences.CONFIGURATIONS_EXPLORE_STREAM_ENABLED] &&
153
165
  (preferences[SCPreferences.CONFIGURATIONS_CONTENT_AVAILABILITY] || scUserContext.user) &&
154
166
  (!scUserContext.user || (!groupsEnabled && !coursesEnabled && !eventsEnabled)) && (_jsx(IconButton, Object.assign({ className: classNames(classes.explore, {
155
167
  [classes.active]: value.startsWith(scRoutingContext.url(SCRoutes.EXPLORE_ROUTE_NAME, {}))