@learningpool/ui 1.7.8 → 1.8.0

package/components/navigation/VerticalNavigation/VerticalNavigation.js

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { createElement as _createElement } from "react";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import React, { useEffect } from 'react';
 import { useTheme } from '@mui/material/styles';
@@ -192,9 +193,9 @@ var VerticalNavigation = function (props) {
                             height: '100%',
                             width: DRAWER_WIDTH.Expanded,
                             marginTop: "-".concat(theme.spacing(0.5), " !important")
-                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: { width: DRAWER_WIDTH.Expanded } }, { children: [hasStreamHome
+                        } }, { children: items && items.length > 0 && items.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, style: useFadeIn(animationCount, incrementAnimationCount) }))); }) })) })) })), _jsx("div", __assign({ className: 'wrapper', style: { backgroundColor: getNavigationBackground(theme) } }, { children: _jsxs(StyledNavSecondary, __assign({ "aria-label": 'Secondary' }, { children: [_jsx(StyledDivider, { isDrawerOpen: isDrawerOpen || isPersistent }), _jsxs(List, __assign({ style: { width: DRAWER_WIDTH.Expanded } }, { children: [hasStreamHome
                                     ? (_jsx(VerticalNavigationItem, { label: messages['app-switcher'], icon: _jsx(Apps, {}), onClick: handleToggleAppsClick, content: (_jsx(AppSwitcher, { isAppSwitcherOpen: isAppSwitcherOpen, setIsAppSwitcherOpen: setIsAppSwitcherOpen, applications: streamHomeApplications, apiKey: streamHomeApiKey !== null && streamHomeApiKey !== void 0 ? streamHomeApiKey : '', baseUrl: streamHomeBaseUrl !== null && streamHomeBaseUrl !== void 0 ? streamHomeBaseUrl : '', token: streamHomeAccessToken !== null && streamHomeAccessToken !== void 0 ? streamHomeAccessToken : '', isDrawerOpen: isDrawerOpen })), isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, hasCustomContent: true, style: useFadeIn(animationCount, incrementAnimationCount) }))
-                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_jsx(VerticalNavigationItem, __assign({}, item, { index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
+                                    : null, secondaryItems && secondaryItems.length > 0 && secondaryItems.map(function (item, index) { return (_createElement(VerticalNavigationItem, __assign({}, item, { key: "".concat(item.label, " - ").concat(index), index: index, isDrawerOpen: isDrawerOpen || isPersistent, isSecondary: true, style: useFadeIn(animationCount, incrementAnimationCount) }))); }), hasAvatar && avatarName && (_jsx(VerticalNavigationItem, { label: avatarName, "aria-controls": 'avatar-panel', icon: _jsx(Avatar, __assign({ style: {
                                             fontSize: '0.75rem',
                                             height: 32,
                                             width: 32

package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js

@@ -49,19 +49,19 @@ var AvatarPanel = function (props) {
                 } }, { children: [avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (_jsx(List, __assign({ style: {
                             marginBottom: theme.spacing(2),
                             maxWidth: '14rem'
-                        } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
+                        } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
                             // TODO: figure out if these are links or buttons
                             // @ts-expect-error
                             , __assign({ 
                                 // TODO: figure out if these are links or buttons
                                 // @ts-expect-error
-                                component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: { minWidth: theme.spacing(5) } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledButton
+                                component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: { minWidth: theme.spacing(5) } }, { children: avatarMenuItem.icon })), _jsx(FlyoutMenuItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index))); }) }))), avatarPanelOnClickMainAction && _jsx(StyledButton
                     // @ts-expect-error
                     , __assign({ 
                         // @ts-expect-error
-                        component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
+                        component: animated.button, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), variant: 'outlined', color: 'inherit', size: 'medium', onClick: avatarPanelOnClickMainAction, startIcon: _jsx(Settings, {}) }, { children: avatarPanelMainActionString })), _jsx(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: avatarPanelSettingItems &&
                             avatarPanelSettingItems.length > 0 &&
-                            avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
+                            avatarPanelSettingItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount), disablePadding: true }, { children: _jsxs(StyledListItemButton
                                 // TODO: figure out if these are links or buttons
                                 // @ts-expect-error
                                 , __assign({ 
@@ -69,6 +69,6 @@ var AvatarPanel = function (props) {
                                     // @ts-expect-error
                                     component: Link, role: 'link', onClick: avatarMenuItem.onClick }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
                                                 minWidth: theme.spacing(5)
-                                            } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }) }))] })), _jsx(Box, __assign({ className: 'avatar-panel-footnote' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
+                                            } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }), "".concat(avatarMenuItem.label, " - ").concat(index))); }) }))] })), _jsx(Box, __assign({ className: 'avatar-panel-footnote' }, { children: avatarPanelFootnote && avatarPanelFootnote }))] }));
 };
 export default AvatarPanel;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItem.js

@@ -91,6 +91,6 @@ var VerticalNavigationItem = function (props) {
                                         '& .MuiTypography-root': {
                                             fontSize: '14px !important'
                                         }
-                                    } })] }), label) }))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
+                                    } })] }), label) }), "".concat(childItem.label, " - ").concat(index))); }) })) }))), hasCustomContent && content, !fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, anchorEl: anchorEl, open: open, children: children, label: label })), fullHeightFlyout && content && (_jsx(VerticalNavigationItemFlyoutMenu, { isDrawerOpen: isDrawerOpen, fullHeightFlyout: true, anchorEl: anchorEl, open: open, content: content }))] })));
 };
 export default VerticalNavigationItem;

package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenu.js

@@ -20,10 +20,10 @@ var VerticalNavigationItemFlyoutMenu = function (props) {
     if (fullHeightFlyout && content) {
         return (_jsx(FullHeightFlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, id: "avatar-panel" }, { children: _jsxs(FullHeightFlyoutMenuWrapper, __assign({ open: open }, { children: [_jsx(FlyoutNotchMask, {}), _jsx(NotchMini, { tabIndex: -1, style: { bottom: '24px' } }), content] })) })));
     }
-    return (_jsx(FlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setFlyoutHovered(true); }, onMouseLeave: function () { return setFlyoutHovered(false); }, onFocus: function () { return setFlyoutHovered(true); }, onBlur: function () { return setFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
+    return (_jsx(FlyoutMenuPaper, __assign({ isDrawerOpen: isDrawerOpen, open: open, anchorEl: anchorEl !== null && anchorEl !== void 0 ? anchorEl : undefined, onMouseEnter: function () { return setFlyoutHovered(true); }, onMouseLeave: function () { return setFlyoutHovered(false); }, onFocus: function () { return setFlyoutHovered(true); }, onBlur: function () { return setFlyoutHovered(false); } }, { children: _jsxs(FlyoutMenuWrap, __assign({ open: open }, { children: [_jsx(NotchMini, { style: { top: '12px' } }), _jsx(FlyoutMenuHeader, { children: label }), _jsx(FlyoutMenuList, __assign({ "aria-label": label, open: open }, { children: children === null || children === void 0 ? void 0 : children.map(function (childItem, index) { return (_jsx(FlyoutMenuItem, { children: _jsx(FlyoutMenuButton
                         // @ts-expect-error
                         , __assign({ 
                             // @ts-expect-error
-                            component: Link, role: 'link', onClick: childItem.onClick }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) })); }) }))] })) })));
+                            component: Link, role: 'link', onClick: childItem.onClick }, { children: _jsx(FlyoutMenuItemText, { primary: childItem.label }) }), childItem.label) }, "".concat(childItem.label, " - ").concat(index))); }) }))] })) })));
 };
 export default VerticalNavigationItemFlyoutMenu;

package/components/stream/AppHub/AppHub.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { defaultMessages } from '../../../lang/en-us';
 import AppHubItem from './AppHubProduct';
@@ -29,8 +40,8 @@ var AppHub = function (props) {
                         , __assign({ 
                             // @ts-ignore
                             component: isPageLayout ? 'h2' : 'div' }, { children: title })), _jsx(Grid, __assign({ container: true, spacing: { xs: 2, md: 3 }, rowSpacing: { xs: 3, md: 4 }, columns: { xs: 12 } }, { children: items.map(function (_a, index) {
-                                var subtitle = _a.subtitle, shortName = _a.shortName, internalName = _a.internalName, url = _a.url, children = _a.children;
-                                return (_jsxs(Grid, __assign({ xs: 12, sm: 6, md: 4 }, { children: [url && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, url: url })), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children }))] }), "".concat(shortName, "_").concat(rowIndex, "_").concat(index)));
+                                var subtitle = _a.subtitle, shortName = _a.shortName, internalName = _a.internalName, url = _a.url, children = _a.children, rest = __rest(_a, ["subtitle", "shortName", "internalName", "url", "children"]);
+                                return (_jsxs(Grid, __assign({ xs: 12, sm: 6, md: 4 }, { children: [url && (_jsx(AppHubItem, __assign({ internalName: internalName, shortName: shortName, subtitle: subtitle, url: url }, rest))), children && (_jsx(AppHubItem, { internalName: internalName, shortName: shortName, subtitle: subtitle, options: children }))] }), "".concat(shortName, "_").concat(rowIndex, "_").concat(index)));
                             }) }))] }, "row_".concat(rowIndex)));
             }
             case Constants.DataRowType.CustomLink: {

package/components/stream/AppHub/AppHubProduct.js

@@ -9,6 +9,17 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
 import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ListItemButton, Link, TextField, Tooltip } from '../../../index';
 import LaunchIcon from '@mui/icons-material/Launch';
@@ -37,7 +48,7 @@ var renderApplicationLogo = function (internalName, logoVariant) {
     return (_jsx("img", { src: urlToIcon, width: "90", height: "90", alt: internalName !== null && internalName !== void 0 ? internalName : '' }));
 };
 var AppHubItem = function (props) {
-    var internalName = props.internalName, shortName = props.shortName, customName = props.customName, url = props.url, subtitle = props.subtitle, localization = props.localization, options = props.options;
+    var internalName = props.internalName, shortName = props.shortName, customName = props.customName, url = props.url, subtitle = props.subtitle, localization = props.localization, options = props.options, rest = __rest(props, ["internalName", "shortName", "customName", "url", "subtitle", "localization", "options"]);
     var initialOptions = __assign({}, options);
     var solidLogo = renderApplicationLogo(internalName, LogoVariants.Solid);
     var messages = __assign(__assign({}, defaultMessages), localization);
@@ -51,7 +62,7 @@ var AppHubItem = function (props) {
                                 // @ts-ignore
                                 component: 'div', className: 'appHubCardTitle' }, { children: customName !== null && customName !== void 0 ? customName : shortName })) })), url && (_jsxs(StyledButton, __assign({ href: url, 
                             // @ts-expect-error
-                            component: Link, target: '_blank', variant: 'outlined' }, { children: [messages.open, _jsxs("span", __assign({ style: visuallyHidden }, { children: [", ", messages['open-in-new-window']] }))] }))), options && options.length > 0 && (_jsx(StyledAutocomplete, { disablePortal: true, size: 'small', options: options.map(function (option) { return option.applicationName; }), 
+                            component: Link, target: '_blank', variant: 'outlined' }, rest, { children: [messages.open, _jsxs("span", __assign({ style: visuallyHidden }, { children: [", ", messages['open-in-new-window']] }))] }))), options && options.length > 0 && (_jsx(StyledAutocomplete, { disablePortal: true, size: 'small', options: options.map(function (option) { return option.applicationName; }), 
                             // TODO: Add link, icon and screen reader text here:
                             renderOption: function (option) {
                                 // Autocomplete only uses applicationName and we need more properties

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.7.8",
+  "version": "1.8.0",
   "private": false,
   "main": "index.js",
   "module": "index.js",