@learningpool/ui 1.15.5 → 1.16.0

package/components/stream/AppSwitcher/AppSwitcherStylesStandalone.js

@@ -1,22 +1,256 @@
-var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
-    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
-    return cooked;
-};
 import styled from 'styled-components';
-export var AppSwitcherPanel = styled.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  background-color: #fff;\n  border-radius: 4px;\n  box-shadow: rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px;\n  box-sizing: border-box;\n  height: 450px;\n  padding: 1rem 1.5rem;\n  position: absolute;\n  width: 360px;\n"], ["\n  background-color: #fff;\n  border-radius: 4px;\n  box-shadow: rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px;\n  box-sizing: border-box;\n  height: 450px;\n  padding: 1rem 1.5rem;\n  position: absolute;\n  width: 360px;\n"])));
-export var List = styled.ul(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n"], ["\n"])));
-export var MenuContent = styled.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"], ["\n  align-items: flex-start;\n  flex-direction: row;\n  flex-wrap: wrap;\n  justify-content: flex-start;\n  margin-top: 1rem;\n"])));
-export var SearchContent = styled.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"], ["\n  align-items: flex-start;\n  box-sizing: border-box;\n  flex-direction: column;\n  justify-content: flex-start;\n  padding: 1rem 1rem 2rem;\n"])));
-export var AppListHeader = styled.p(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  align-items: center;\n  color: #757575;\n  display: flex;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 0.5rem 1.25rem 0;\n  text-transform: uppercase;\n\n  & svg {\n    height: 24px;\n    margin-right: 0.5rem;\n    width: 24px;\n  }\n"], ["\n  align-items: center;\n  color: #757575;\n  display: flex;\n  font-weight: normal;\n  justify-content: flex-start;\n  padding: 0.5rem 1.25rem 0;\n  text-transform: uppercase;\n\n  & svg {\n    height: 24px;\n    margin-right: 0.5rem;\n    width: 24px;\n  }\n"])));
-export var AppListItem = styled.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"], ["\n  align-items: center;\n  align-self: stretch;\n  box-sizing: border-box;\n  flex-direction: column;\n  flex: 0 0 ", "%;\n  overflow: visible;\n  padding: 0.25rem;\n  position: relative;\n\n  &:hover {\n    background-color: transparent;\n  }\n"])), 100 / 3);
-export var AppLink = styled.a(templateObject_7 || (templateObject_7 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.85rem;\n  justify-content: center;\n  overflow: hidden;\n  padding: 1rem 0 0.5rem;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  transition: all 200ms ease;\n  width: 100%;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:hover,\n  &:focus {\n    background-color: #ecf4fb;\n    text-decoration: none;\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & svg {\n    height: 60px;\n    width: 60px;\n  }\n\n  &:hover + span,\n  &:focus + span {\n    opacity: 1;\n  }\n"], ["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  box-sizing: border-box;\n  display: flex;\n  flex-direction: column;\n  font-size: 0.85rem;\n  justify-content: center;\n  overflow: hidden;\n  padding: 1rem 0 0.5rem;\n  position: relative;\n  text-align: center;\n  text-decoration: none;\n  transition: all 200ms ease;\n  width: 100%;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:hover,\n  &:focus {\n    background-color: #ecf4fb;\n    text-decoration: none;\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & svg {\n    height: 60px;\n    width: 60px;\n  }\n\n  &:hover + span,\n  &:focus + span {\n    opacity: 1;\n  }\n"])));
-export var BackButton = styled.button(templateObject_8 || (templateObject_8 = __makeTemplateObject(["\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: #aaa;\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0;\n  text-align: left;\n  width: 100%;\n\n  &:focus,\n  &:hover {\n    background-color: #eee;\n  }\n"], ["\n  align-items: center;\n  background: transparent;\n  border: 0;\n  color: #aaa;\n  cursor: pointer;\n  display: flex;\n  padding: 0.25rem 0;\n  text-align: left;\n  width: 100%;\n\n  &:focus,\n  &:hover {\n    background-color: #eee;\n  }\n"])));
-export var SearchBox = styled.input(templateObject_9 || (templateObject_9 = __makeTemplateObject(["\n  background: #f4f4f4;\n  border: thin solid #888;\n  box-sizing: border-box;\n  color: #777;\n  padding: 0.5rem;\n  width: 100%;\n\n  &:hover .MuiOutlinedInput-notchedOutline {\n    border-color: #888;\n  }\n\n  & .MuiOutlinedInput-root {\n    border-radius: 0;\n    color: #777;\n    padding: 0;\n  }\n\n  & .MuiOutlinedInput-input {\n    padding: 0.5rem;\n  }\n\n  & ::placeholder {\n    opacity: 0.75;\n  }\n"], ["\n  background: #f4f4f4;\n  border: thin solid #888;\n  box-sizing: border-box;\n  color: #777;\n  padding: 0.5rem;\n  width: 100%;\n\n  &:hover .MuiOutlinedInput-notchedOutline {\n    border-color: #888;\n  }\n\n  & .MuiOutlinedInput-root {\n    border-radius: 0;\n    color: #777;\n    padding: 0;\n  }\n\n  & .MuiOutlinedInput-input {\n    padding: 0.5rem;\n  }\n\n  & ::placeholder {\n    opacity: 0.75;\n  }\n"])));
-export var AppName = styled.p(templateObject_10 || (templateObject_10 = __makeTemplateObject(["\n  color: #00497D;\n  font-weight: normal;\n  margin: 0.5rem 0 0;\n  white-space: nowrap;\n"], ["\n  color: #00497D;\n  font-weight: normal;\n  margin: 0.5rem 0 0;\n  white-space: nowrap;\n"])));
-export var AppOrganisationCount = styled.span(templateObject_11 || (templateObject_11 = __makeTemplateObject(["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 50px;\n  left: 50%;\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 43%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  z-index: 1;\n"], ["\n  background: #00497D;\n  border-color: #616161;\n  border-radius: 4px;\n  border: none;\n  color: white;\n  font-size: 1rem;\n  font-weight: bold;\n  height: 50px;\n  left: 50%;\n  line-height: 50px;\n  margin-top: 0;\n  opacity: 0;\n  pointer-events: none;\n  position: absolute;\n  top: 43%;\n  transform: translate(-50%, -50%);\n  width: 50px;\n  z-index: 1;\n"])));
-export var SelectedOrganisation = styled.div(templateObject_12 || (templateObject_12 = __makeTemplateObject(["\n  align-items: center;\n  color: #757575;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  text-transform: uppercase;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & h6 {\n    font-size: 1.2rem;\n    font-weight: 600;\n    margin: 0 0 0 1rem;\n  }\n"], ["\n  align-items: center;\n  color: #757575;\n  display: flex;\n  flex-direction: row;\n  justify-content: flex-start;\n  padding: 1.5rem 0;\n  text-transform: uppercase;\n  width: 100%;\n\n  & svg,\n  & svg image {\n    height: 24px;\n    width: 24px;\n  }\n\n  & h6 {\n    font-size: 1.2rem;\n    font-weight: 600;\n    margin: 0 0 0 1rem;\n  }\n"])));
-export var StyledSVG = styled.svg(templateObject_13 || (templateObject_13 = __makeTemplateObject(["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  user-select: none;\n  width: 1em;\n"], ["\n  box-sizing: content-box;\n  display: inline-block;\n  fill: currentcolor;\n  flex-shrink: 0;\n  font-size: 1.5rem;\n  height: 1em;\n  margin: 4px;\n  padding: 0;\n  user-select: none;\n  width: 1em;\n"])));
-export var StyledLogoSVG = styled.svg(templateObject_14 || (templateObject_14 = __makeTemplateObject(["\n  background-color: #E6EAF0;\n  border: thin solid #E6EAF0;\n  position: relative;\n  z-index: 1;\n"], ["\n  background-color: #E6EAF0;\n  border: thin solid #E6EAF0;\n  position: relative;\n  z-index: 1;\n"])));
-export var OrganisationList = styled.div(templateObject_15 || (templateObject_15 = __makeTemplateObject(["\n  height: 300px;\n  overflow: auto;\n  padding-top: 0.5rem;\n  width: 100%;\n"], ["\n  height: 300px;\n  overflow: auto;\n  padding-top: 0.5rem;\n  width: 100%;\n"])));
-export var OrganisationLink = styled.a(templateObject_16 || (templateObject_16 = __makeTemplateObject(["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  color: #777;\n  display: flex;\n  font-size: 1rem;\n  justify-content: space-between;\n  margin: 0 0.125rem;\n  padding: 0.5rem;\n  text-decoration: none;\n  transition: all 200ms ease;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: #f5f5f5;\n\n    & svg {\n      visibility: visible;\n    }\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & .MuiLink-root {\n    align-items: center;\n    color: #777;\n    display: flex;\n    justify-content: space-between;\n    text-decoration: none;\n    width: 100%;\n  }\n\n  & svg {\n    visibility: hidden;\n  }\n"], ["\n  align-items: center;\n  border-radius: 4px;\n  box-shadow: none;\n  color: #777;\n  display: flex;\n  font-size: 1rem;\n  justify-content: space-between;\n  margin: 0 0.125rem;\n  padding: 0.5rem;\n  text-decoration: none;\n  transition: all 200ms ease;\n\n  & .MuiTouchRipple-rippleVisible {\n    color: #004071;\n    opacity: 0.25;\n  }\n\n  &:focus,\n  &:hover {\n    background-color: #f5f5f5;\n\n    & svg {\n      visibility: visible;\n    }\n  }\n\n  &:active {\n    background-color: #f1f1f1;\n  }\n\n  & .MuiLink-root {\n    align-items: center;\n    color: #777;\n    display: flex;\n    justify-content: space-between;\n    text-decoration: none;\n    width: 100%;\n  }\n\n  & svg {\n    visibility: hidden;\n  }\n"])));
-var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16;
+export const AppSwitcherPanel = styled.div `
+  background-color: #fff;
+  border-radius: 4px;
+  box-shadow: rgb(0 0 0 / 20%) 0px 5px 5px -3px, rgb(0 0 0 / 14%) 0px 8px 10px 1px, rgb(0 0 0 / 12%) 0px 3px 14px 2px;
+  box-sizing: border-box;
+  height: 450px;
+  padding: 1rem 1.5rem;
+  position: absolute;
+  width: 360px;
+`;
+export const List = styled.ul `
+`;
+export const MenuContent = styled.div `
+  align-items: flex-start;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  margin-top: 1rem;
+`;
+export const SearchContent = styled.div `
+  align-items: flex-start;
+  box-sizing: border-box;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding: 1rem 1rem 2rem;
+`;
+export const AppListHeader = styled.p `
+  align-items: center;
+  color: #757575;
+  display: flex;
+  font-weight: normal;
+  justify-content: flex-start;
+  padding: 0.5rem 1.25rem 0;
+  text-transform: uppercase;
+
+  & svg {
+    height: 24px;
+    margin-right: 0.5rem;
+    width: 24px;
+  }
+`;
+export const AppListItem = styled.div `
+  align-items: center;
+  align-self: stretch;
+  box-sizing: border-box;
+  flex-direction: column;
+  flex: 0 0 ${100 / 3}%;
+  overflow: visible;
+  padding: 0.25rem;
+  position: relative;
+
+  &:hover {
+    background-color: transparent;
+  }
+`;
+export const AppLink = styled.a `
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: none;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  font-size: 0.85rem;
+  justify-content: center;
+  overflow: hidden;
+  padding: 1rem 0 0.5rem;
+  position: relative;
+  text-align: center;
+  text-decoration: none;
+  transition: all 200ms ease;
+  width: 100%;
+
+  & .MuiTouchRipple-rippleVisible {
+    color: #004071;
+    opacity: 0.25;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: #ecf4fb;
+    text-decoration: none;
+  }
+
+  &:active {
+    background-color: #f1f1f1;
+  }
+
+  & svg {
+    height: 60px;
+    width: 60px;
+  }
+
+  &:hover + span,
+  &:focus + span {
+    opacity: 1;
+  }
+`;
+export const BackButton = styled.button `
+  align-items: center;
+  background: transparent;
+  border: 0;
+  color: #aaa;
+  cursor: pointer;
+  display: flex;
+  padding: 0.25rem 0;
+  text-align: left;
+  width: 100%;
+
+  &:focus,
+  &:hover {
+    background-color: #eee;
+  }
+`;
+export const SearchBox = styled.input `
+  background: #f4f4f4;
+  border: thin solid #888;
+  box-sizing: border-box;
+  color: #777;
+  padding: 0.5rem;
+  width: 100%;
+
+  &:hover .MuiOutlinedInput-notchedOutline {
+    border-color: #888;
+  }
+
+  & .MuiOutlinedInput-root {
+    border-radius: 0;
+    color: #777;
+    padding: 0;
+  }
+
+  & .MuiOutlinedInput-input {
+    padding: 0.5rem;
+  }
+
+  & ::placeholder {
+    opacity: 0.75;
+  }
+`;
+export const AppName = styled.p `
+  color: #00497D;
+  font-weight: normal;
+  margin: 0.5rem 0 0;
+  white-space: nowrap;
+`;
+export const AppOrganisationCount = styled.span `
+  background: #00497D;
+  border-color: #616161;
+  border-radius: 4px;
+  border: none;
+  color: white;
+  font-size: 1rem;
+  font-weight: bold;
+  height: 50px;
+  left: 50%;
+  line-height: 50px;
+  margin-top: 0;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  top: 43%;
+  transform: translate(-50%, -50%);
+  width: 50px;
+  z-index: 1;
+`;
+export const SelectedOrganisation = styled.div `
+  align-items: center;
+  color: #757575;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+  padding: 1.5rem 0;
+  text-transform: uppercase;
+  width: 100%;
+
+  & svg,
+  & svg image {
+    height: 24px;
+    width: 24px;
+  }
+
+  & h6 {
+    font-size: 1.2rem;
+    font-weight: 600;
+    margin: 0 0 0 1rem;
+  }
+`;
+export const StyledSVG = styled.svg `
+  box-sizing: content-box;
+  display: inline-block;
+  fill: currentcolor;
+  flex-shrink: 0;
+  font-size: 1.5rem;
+  height: 1em;
+  margin: 4px;
+  padding: 0;
+  user-select: none;
+  width: 1em;
+`;
+export const StyledLogoSVG = styled.svg `
+  background-color: #E6EAF0;
+  border: thin solid #E6EAF0;
+  position: relative;
+  z-index: 1;
+`;
+export const OrganisationList = styled.div `
+  height: 300px;
+  overflow: auto;
+  padding-top: 0.5rem;
+  width: 100%;
+`;
+export const OrganisationLink = styled.a `
+  align-items: center;
+  border-radius: 4px;
+  box-shadow: none;
+  color: #777;
+  display: flex;
+  font-size: 1rem;
+  justify-content: space-between;
+  margin: 0 0.125rem;
+  padding: 0.5rem;
+  text-decoration: none;
+  transition: all 200ms ease;
+
+  & .MuiTouchRipple-rippleVisible {
+    color: #004071;
+    opacity: 0.25;
+  }
+
+  &:focus,
+  &:hover {
+    background-color: #f5f5f5;
+
+    & svg {
+      visibility: visible;
+    }
+  }
+
+  &:active {
+    background-color: #f1f1f1;
+  }
+
+  & .MuiLink-root {
+    align-items: center;
+    color: #777;
+    display: flex;
+    justify-content: space-between;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  & svg {
+    visibility: hidden;
+  }
+`;

package/components/stream/AppSwitcher/PromotionalCampaignItem.js

@@ -1,22 +1,10 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { CardMedia } from '@mui/material';
 import { useState } from 'react';
 import { PromotionalCampaignCardStyled, PromotionalCampaignCardActionArea } from './AppSwitcherStyles';
-var PromotionalCampaignItem = function (_a) {
-    var imageUrl = _a.imageUrl, altText = _a.altText, linkUrl = _a.linkUrl, onImageError = _a.onImageError;
-    var _b = useState(true), imageLoaded = _b[0], setImageLoaded = _b[1];
-    var handleImageError = function () {
+const PromotionalCampaignItem = ({ imageUrl, altText, linkUrl, onImageError }) => {
+    const [imageLoaded, setImageLoaded] = useState(true);
+    const handleImageError = () => {
         setImageLoaded(false);
         if (onImageError) {
             onImageError();
@@ -24,11 +12,11 @@ var PromotionalCampaignItem = function (_a) {
     };
     if (!imageLoaded)
         return null;
-    return (_jsx(PromotionalCampaignCardStyled, { children: _jsx(PromotionalCampaignCardActionArea, __assign({ onClick: function () { return window.open(linkUrl, '_blank'); } }, { children: _jsx(CardMedia, __assign({ component: "div", sx: {
+    return (_jsx(PromotionalCampaignCardStyled, { children: _jsx(PromotionalCampaignCardActionArea, { onClick: () => window.open(linkUrl, '_blank'), children: _jsx(CardMedia, { component: "div", sx: {
                     width: '100%',
                     height: '100%',
                     position: 'relative'
-                } }, { children: _jsx("img", { src: imageUrl, alt: altText, onError: handleImageError, style: {
+                }, children: _jsx("img", { src: imageUrl, alt: altText, onError: handleImageError, style: {
                         width: '100%',
                         height: '100%',
                         objectFit: 'cover',
@@ -36,6 +24,6 @@ var PromotionalCampaignItem = function (_a) {
                         position: 'absolute',
                         top: 0,
                         left: 0
-                    } }) })) })) }));
+                    } }) }) }) }));
 };
 export default PromotionalCampaignItem;

package/components/stream/AppSwitcher/constants.js

@@ -1,4 +1,4 @@
-export var Constants = Object.freeze({
+export const Constants = Object.freeze({
     LocalStorageKey: {
         Token: 'lp-home-access-token',
         Applications: 'lp-home-applications',
@@ -40,7 +40,7 @@ export var Constants = Object.freeze({
     },
     DefaultStreamHomeUrl: 'https://home.learningpool.com'
 });
-export var applications = [
+export const applications = [
     { applicationId: 1, applicationName: 'Stream LXP', shortName: 'LXP', internalName: 'stream', url: 'https://learningpool.com' },
     { applicationId: 2, applicationName: 'Stream Analytics', shortName: 'Long Wrapping Test Stream Analytics', internalName: 'analytics', url: 'https://learningpool.com?Analytics' },
     { applicationId: 3, applicationName: 'Stream Automation', shortName: 'Event Management', internalName: 'automation', customName: 'Waves 1', url: 'https://learningpool.com?AutomationEventManagement' },
@@ -49,7 +49,7 @@ export var applications = [
     { applicationId: 4, applicationName: 'Stream Authoring', shortName: 'Authoring', internalName: 'authoring', url: 'https://learningpool.com?Authoring' },
     { applicationId: 8, applicationName: 'IQ', shortName: 'IQ', internalName: 'iq', url: 'https://data.applications.com?IQ' }
 ];
-export var promotionalContent = [
+export const promotionalContent = [
     {
         id: 1,
         name: 'AIC campaign',

package/lang/en-us.js

@@ -1,4 +1,4 @@
-export var defaultMessages = {
+export const defaultMessages = {
     // App Switcher
     'app-switcher': 'App Switcher',
     'your-apps': 'Your Apps',

package/package.json

@@ -9,30 +9,35 @@
     "components",
     "ui"
   ],
-  "version": "1.15.5",
+  "version": "1.16.0",
   "private": false,
   "main": "index.js",
   "module": "index.js",
   "dependencies": {
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
+    "@esbuild-plugins/node-modules-polyfill": "^0.2.2",
     "@learningpool/design-tokens": "^1.1.0-beta.7",
     "@mui/icons-material": "^5.14.15",
     "@mui/material": "5.10.6",
     "@mui/x-data-grid": "^5.12.3",
     "@react-spring/web": "^9.7.3",
     "@types/jest": "^27.4.0",
-    "@types/node": "^16.18.59",
+    "@types/node": "^18.19.15",
     "@types/react": "^17.0.69",
     "@types/react-dom": "^17.0.22",
     "@typescript-eslint/parser": "^5.31.0",
     "anysort": "^2.0.0",
+    "babel-plugin-formatjs": "^10.5.13",
+    "crypto-browserify": "^3.12.0",
     "eslint-plugin-n": "^15.2.4",
     "focus-trap-react": "^8.11.0",
     "jwt-decode": "^3.1.2",
+    "path-browserify": "^1.0.1",
     "polished": "^4.2.2",
     "postcss": "^8.4.31",
     "query-string": "^7.1.1",
+    "stream-browserify": "^3.0.0",
     "styled-components": "^5.3.6",
     "tss-react": "^3.3.6",
     "typescript": "^4.9.5",

package/utils/constants.d.ts

@@ -9,3 +9,10 @@ export declare const VERTNAV_COLORS: {
     DARKEN_AMOUNT: number;
 };
 export declare const DEFAULT_MAX_CHARACTERS_PER_LINE = 50;
+export declare const EVENT_KEYS: {
+    Tab: string;
+    Enter: string;
+    Shift: string;
+    Escape: string;
+    Keydown: string;
+};

package/utils/constants.js

@@ -1,13 +1,20 @@
-export var DEFAULT_REACT_APP_ID = 'root';
-export var MOBILE_NAV_PANEL_TYPES = {
+export const DEFAULT_REACT_APP_ID = 'root';
+export const MOBILE_NAV_PANEL_TYPES = {
     DRAWER: 'drawer',
     SEARCH: 'search',
     AVATAR: 'avatar'
 };
-export var VERTNAV_COLORS = {
+export const VERTNAV_COLORS = {
     LIGHTEN_AMOUNT: 0.1,
     DARKEN_AMOUNT: 0.1
 };
 // 50 seems a reasonable default limit
 // https://m2.material.io/design/typography/understanding-typography.html#readability
-export var DEFAULT_MAX_CHARACTERS_PER_LINE = 50;
+export const DEFAULT_MAX_CHARACTERS_PER_LINE = 50;
+export const EVENT_KEYS = {
+    Tab: 'Tab',
+    Enter: 'Enter',
+    Shift: 'Shift',
+    Escape: 'Escape',
+    Keydown: 'Keydown'
+};

package/utils/dataAttributes.js

@@ -1,4 +1,4 @@
-export var defaultAttributes = {
+export const defaultAttributes = {
     // VerticalNavigation data IDs
     VerticalNavigationContainer: 'vertnav-container',
     VerticalNavigationBrand: 'vertnav-brand',

package/utils/helpers.js

@@ -1,14 +1,3 @@
-var __assign = (this && this.__assign) || function () {
-    __assign = Object.assign || function(t) {
-        for (var s, i = 1, n = arguments.length; i < n; i++) {
-            s = arguments[i];
-            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
-                t[p] = s[p];
-        }
-        return t;
-    };
-    return __assign.apply(this, arguments);
-};
 import { useEffect, useRef } from 'react';
 import { useSpring, config } from '@react-spring/web';
 /**
@@ -16,34 +5,33 @@ import { useSpring, config } from '@react-spring/web';
  * @param avatarName string - Expected full name but accepts any string
  * @returns string
  */
-export var handleAvatarInitials = function (avatarName) {
-    var _a, _b;
-    var firstInitial = avatarName.split('')[0] || '';
-    var secondInitial = '';
-    if (((_a = avatarName.split(' ')) === null || _a === void 0 ? void 0 : _a.length) > 1) {
+export const handleAvatarInitials = (avatarName) => {
+    let firstInitial = avatarName.split('')[0] || '';
+    let secondInitial = '';
+    if (avatarName.split(' ')?.length > 1) {
         firstInitial = avatarName.split(' ')[0][0];
-        if (((_b = avatarName.split(' ')[1]) === null || _b === void 0 ? void 0 : _b.length) > 0) {
-            secondInitial = avatarName === null || avatarName === void 0 ? void 0 : avatarName.split(' ')[1][0];
+        if (avatarName.split(' ')[1]?.length > 0) {
+            secondInitial = avatarName?.split(' ')[1][0];
         }
     }
-    return "".concat(firstInitial).concat(secondInitial);
+    return `${firstInitial}${secondInitial}`;
 };
 /**
  * Accepts a string and returns a color hex code e.g. #000000
  * @param string string - Accepts any string
  * @returns string
  */
-export var stringToColor = function (string) {
-    var hash = 0;
-    var i;
+export const stringToColor = (string) => {
+    let hash = 0;
+    let i;
     /* eslint-disable no-bitwise */
     for (i = 0; i < string.length; i += 1) {
         hash = string.charCodeAt(i) + ((hash << 5) - hash);
     }
-    var color = '#';
+    let color = '#';
     for (i = 0; i < 3; i += 1) {
-        var value = (hash >> (i * 8)) & 0xff;
-        color += "00".concat(value.toString(16)).slice(-2);
+        const value = (hash >> (i * 8)) & 0xff;
+        color += `00${value.toString(16)}`.slice(-2);
     }
     /* eslint-enable no-bitwise */
     return color;
@@ -53,7 +41,7 @@ export var stringToColor = function (string) {
  * @param string string - Accepts any string
  * @returns string
  */
-export var stringAvatar = function (name) {
+export const stringAvatar = (name) => {
     return {
         sx: {
             bgcolor: stringToColor(name)
@@ -61,7 +49,7 @@ export var stringAvatar = function (name) {
         children: handleAvatarInitials(name)
     };
 };
-var STAGGER_ITEMS_DELAY = 70;
+const STAGGER_ITEMS_DELAY = 70;
 /**
  * Accepts an order, optional in/out toggle and returns
  * a react-spring style object from useSpring based on the
@@ -71,14 +59,21 @@ var STAGGER_ITEMS_DELAY = 70;
  * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-var useStaggerIn = function (animationConfig, delayOrder, reverse) {
-    var defaultAnimationConfig = {
-        reverse: reverse,
-        config: __assign(__assign({}, config.default), { mass: 1 })
+const useStaggerIn = (animationConfig, delayOrder, reverse) => {
+    const defaultAnimationConfig = {
+        reverse,
+        config: {
+            ...config.default,
+            mass: 1
+        }
     };
-    var animationCountRef = useRef(0);
-    var staggerInAnimation = useSpring(__assign(__assign(__assign({}, defaultAnimationConfig), animationConfig), { delay: STAGGER_ITEMS_DELAY * delayOrder }));
-    useEffect(function () {
+    const animationCountRef = useRef(0);
+    const staggerInAnimation = useSpring({
+        ...defaultAnimationConfig,
+        ...animationConfig,
+        delay: STAGGER_ITEMS_DELAY * delayOrder
+    });
+    useEffect(() => {
         animationCountRef.current += 1;
     });
     return staggerInAnimation;
@@ -91,9 +86,8 @@ var useStaggerIn = function (animationConfig, delayOrder, reverse) {
  * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export var useFadeIn = function (delayOrder, reverse) {
-    if (reverse === void 0) { reverse = false; }
-    var animationConfig = {
+export const useFadeIn = (delayOrder, reverse = false) => {
+    const animationConfig = {
         from: { opacity: 0 },
         to: { opacity: 1 }
     };
@@ -107,9 +101,8 @@ export var useFadeIn = function (delayOrder, reverse) {
  * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export var useFadeAndMoveIn = function (delayOrder, reverse) {
-    if (reverse === void 0) { reverse = false; }
-    var animationConfig = {
+export const useFadeAndMoveIn = (delayOrder, reverse = false) => {
+    const animationConfig = {
         from: { opacity: 0, y: 10 },
         to: { opacity: 1, y: 0 }
     };

package/utils/hooks.js

@@ -1,26 +1,25 @@
 import { useState, useEffect } from 'react';
-var getWidth = function () {
-    var _a, _b;
-    return (_b = (_a = window.innerWidth) !== null && _a !== void 0 ? _a : document.documentElement.clientWidth) !== null && _b !== void 0 ? _b : document.body.clientWidth;
-};
-export var useCurrentWidth = function () {
+const getWidth = () => window.innerWidth ??
+    document.documentElement.clientWidth ??
+    document.body.clientWidth;
+export const useCurrentWidth = () => {
     // save current window width in the state object
-    var _a = useState(getWidth()), width = _a[0], setWidth = _a[1];
+    const [width, setWidth] = useState(getWidth());
     // in this case useEffect will execute only once because
     // it does not have any dependencies.
-    useEffect(function () {
+    useEffect(() => {
         // timeoutId for debounce mechanism
-        var timeoutId;
-        var resizeListener = function () {
+        let timeoutId;
+        const resizeListener = () => {
             // prevent execution of previous setTimeout
             clearTimeout(timeoutId);
             // change width from the state object after 150 milliseconds
-            timeoutId = setTimeout(function () { return setWidth(getWidth()); }, 150);
+            timeoutId = setTimeout(() => setWidth(getWidth()), 150);
         };
         // set resize listener
         window.addEventListener('resize', resizeListener);
         // clean up function
-        return function () {
+        return () => {
             // remove resize listener
             window.removeEventListener('resize', resizeListener);
         };