@learningpool/ui 1.8.7 → 1.9.0

package/components/stream/AppHub/AppHubProductStyles.d.ts

@@ -26,7 +26,7 @@ export declare const StyledBoxText: import("@emotion/styled").StyledComponent<im
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledTypography: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;
@@ -39,7 +39,7 @@ export declare const StyledTypography: import("@emotion/styled").StyledComponent
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledTypographySubtitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;
@@ -83,5 +83,5 @@ export declare const StyledButton: import("@emotion/styled").StyledComponent<Pic
     touchRippleRef?: import("react").Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
 }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
-}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon">, keyof import("@mui/material/OverridableComponent").CommonProps | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
+}, keyof import("@mui/material/OverridableComponent").CommonProps | "tabIndex" | "color" | "children" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon">, keyof import("@mui/material/OverridableComponent").CommonProps | "form" | "slot" | "title" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "autoFocus" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "nonce" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "content" | "datatype" | "inlist" | "prefix" | "property" | "rel" | "resource" | "rev" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "sx" | "variant" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "TouchRippleProps" | "touchRippleRef" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "name" | "type" | "value"> & import("react").RefAttributes<HTMLButtonElement> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const StyledAutocomplete: import("@emotion/styled").StyledComponent<import("@mui/material").AutocompleteProps<unknown, boolean | undefined, boolean | undefined, boolean | undefined, "div"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;

package/components/stream/AppHub/AppHubStyles.d.ts

@@ -9,7 +9,7 @@ export declare const AppHubRow: import("@emotion/styled").StyledComponent<import
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "ref" | "children" | "sx" | "component" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint")> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const AppHubTitle: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;
@@ -22,7 +22,7 @@ export declare const AppHubTitle: import("@emotion/styled").StyledComponent<impo
     ref?: ((instance: HTMLSpanElement | null) => void) | import("react").RefObject<HTMLSpanElement> | null | undefined;
 }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "variant" | "align" | ("p" | "color" | "alignContent" | "alignItems" | "alignSelf" | "bottom" | "boxShadow" | "boxSizing" | "columnGap" | "display" | "flexBasis" | "flexDirection" | "flexGrow" | "flexShrink" | "flexWrap" | "fontFamily" | "fontSize" | "fontStyle" | "fontWeight" | "gridAutoColumns" | "gridAutoFlow" | "gridAutoRows" | "gridTemplateAreas" | "gridTemplateColumns" | "gridTemplateRows" | "height" | "justifyContent" | "justifyItems" | "justifySelf" | "left" | "letterSpacing" | "lineHeight" | "marginBottom" | "marginLeft" | "marginRight" | "marginTop" | "maxHeight" | "maxWidth" | "minHeight" | "minWidth" | "order" | "paddingBottom" | "paddingLeft" | "paddingRight" | "paddingTop" | "position" | "right" | "rowGap" | "textAlign" | "textOverflow" | "textTransform" | "top" | "visibility" | "whiteSpace" | "width" | "zIndex" | "border" | "borderBottom" | "borderColor" | "borderLeft" | "borderRadius" | "borderRight" | "borderTop" | "flex" | "gap" | "gridArea" | "gridColumn" | "gridRow" | "margin" | "overflow" | "padding" | "bgcolor" | "m" | "mt" | "mr" | "mb" | "ml" | "mx" | "marginX" | "my" | "marginY" | "pt" | "pr" | "pb" | "pl" | "px" | "paddingX" | "py" | "paddingY" | "typography" | "displayPrint") | "gutterBottom" | "noWrap" | "paragraph" | "variantMapping"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {}>;
 export declare const AppHubHeader: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material/styles").Theme> & {
-    align?: "inherit" | "left" | "right" | "center" | "justify" | undefined;
+    align?: "left" | "right" | "inherit" | "center" | "justify" | undefined;
     children?: import("react").ReactNode;
     classes?: Partial<import("@mui/material").TypographyClasses> | undefined;
     gutterBottom?: boolean | undefined;

package/components/stream/AppSwitcher/AppSwitcher.d.ts

@@ -1,6 +1,14 @@
 import { ReactElement } from 'react';
 import PropTypes from 'prop-types';
-import { IApplication } from '../../../types';
+interface IApplication {
+    applicationId: number;
+    applicationName: string;
+    shortName: string;
+    internalName: string;
+    customName?: string;
+    url: string;
+    children?: object[];
+}
 interface IProps {
     userId?: string;
     layout?: string;
@@ -29,7 +37,7 @@ declare const AppSwitcher: {
     };
     defaultProps: {
         layout: string;
-        baseUrl: string;
+        baseUrl: "https://api.home.learningpool.com/";
         localization: {};
         applications: never[];
     };

package/components/stream/AppSwitcher/AppSwitcher.js

@@ -24,7 +24,7 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
     function verb(n) { return function (v) { return step([n, v]); }; }
     function step(op) {
         if (f) throw new TypeError("Generator is already executing.");
-        while (_) try {
+        while (g && (g = 0, op[0] && (_ = 0)), _) try {
             if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
             if (y = 0, t) op = [op[0] & 2, t.value];
             switch (op[0]) {
@@ -49,12 +49,10 @@ import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-run
 import { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import jwtDecode from 'jwt-decode';
-import queryString from 'query-string';
-import { defaultMessages } from '../../../lang/en-us';
+import * as queryString from 'query-string';
 import AppSwitcherItem, { LogoVariants } from './AppSwitcherItem';
 import { AppListHeader, AppListItem, AppOrganisationCount, StyledSVG, BackButton, MenuContent, OrganisationLink, OrganisationList, SearchBox, SearchContent, SelectedOrganisation, AppSwitcherPanel } from './AppSwitcherStyles';
 import { Constants } from './constants';
-import { DRAWER_WIDTH } from '../../navigation/VerticalNavigation/VerticalNavigationStyles';
 import { defaultAttributes } from '../../../utils/dataAttributes';
 var AppSwitcher = function (props) {
     var _a;
@@ -70,7 +68,7 @@ var AppSwitcher = function (props) {
     var _f = useState(null), activeApplication = _f[0], setActiveApplication = _f[1];
     // Stores any org filter text (on the second tab).
     var _g = useState(''), searchString = _g[0], setSearchString = _g[1];
-    var messages = __assign(__assign({}, defaultMessages), localization);
+    var messages = __assign(__assign({}, Constants.DefaultMessages), localization);
     var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
     var userId = (_a = props.userId) !== null && _a !== void 0 ? _a : '';
     /**
@@ -174,7 +172,7 @@ var AppSwitcher = function (props) {
     }); };
     useEffect(function () {
         var loadData = function () { return __awaiter(void 0, void 0, void 0, function () {
-            var applicationInstances, userApplications, parsedQueryString, uniqueApplicationIds, localApplications;
+            var applicationInstances, userApplications, parsedQueryString, match, uniqueApplicationIds, localApplications;
             return __generator(this, function (_a) {
                 switch (_a.label) {
                     case 0:
@@ -185,6 +183,10 @@ var AppSwitcher = function (props) {
                             if (parsedQueryString.token && typeof parsedQueryString.token === 'string') {
                                 token = parsedQueryString.token;
                             }
+                            else {
+                                match = window.location.hash.match(/token=(.*)/);
+                                token = (match && match.length === 2 && match[1]) || '';
+                            }
                         }
                         if (!(!props.applications || props.applications.length === 0)) return [3 /*break*/, 2];
                         return [4 /*yield*/, getApplicationsForUser()];
@@ -265,7 +267,7 @@ var AppSwitcher = function (props) {
     }
     return (_jsxs(AppSwitcherPanel, __assign({ id: "app-switcher-menu", style: {
             display: isAppSwitcherOpen ? 'block' : 'none',
-            left: isDrawerOpen ? DRAWER_WIDTH.Expanded : DRAWER_WIDTH.Collapsed - 3
+            left: isDrawerOpen ? Constants.DrawerWidth.Expanded : Constants.DrawerWidth.Collapsed - 3
         }, role: 'dialog', "aria-label": "App Switcher", onKeyDown: handleKeyDown, "data-id": dataIds.AppSwitcherContainer }, { children: [activeTab === Constants.Tabs.ListApplications
                 ? (_jsxs("div", { children: [_jsxs(AppListHeader, __assign({ "data-id": dataIds.AppSwitcherHeader }, { children: [_jsx("svg", { children: _jsx("image", { xlinkHref: "".concat(Constants.AssetsUrl, "suite/logo/latest/icon.svg"), width: "24", height: "24" }) }), messages['your-apps']] })), _jsx(MenuContent, __assign({ style: {
                                 display: activeTab === 1 ? 'flex' : 'none'

package/components/stream/AppSwitcher/AppSwitcherStylesStandalone.d.ts

@@ -0,0 +1,16 @@
+export declare const AppSwitcherPanel: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const List: import("styled-components").StyledComponent<"ul", any, {}, never>;
+export declare const MenuContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const SearchContent: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AppListHeader: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const AppListItem: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const AppLink: import("styled-components").StyledComponent<"a", any, {}, never>;
+export declare const BackButton: import("styled-components").StyledComponent<"button", any, {}, never>;
+export declare const SearchBox: import("styled-components").StyledComponent<"input", any, {}, never>;
+export declare const AppName: import("styled-components").StyledComponent<"p", any, {}, never>;
+export declare const AppOrganisationCount: import("styled-components").StyledComponent<"span", any, {}, never>;
+export declare const SelectedOrganisation: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const StyledSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;
+export declare const StyledLogoSVG: import("styled-components").StyledComponent<"svg", any, {}, never>;
+export declare const OrganisationList: import("styled-components").StyledComponent<"div", any, {}, never>;
+export declare const OrganisationLink: import("styled-components").StyledComponent<"a", any, {}, never>;

package/components/stream/AppSwitcher/AppSwitcherStylesStandalone.js

@@ -0,0 +1,22 @@
+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;

package/components/stream/AppSwitcher/constants.d.ts

@@ -16,6 +16,25 @@ export declare const Constants: Readonly<{
         ListApplications: number;
         ListOrgs: number;
     };
+    DefaultMessages: {
+        'app-switcher': string;
+        'your-apps': string;
+        'custom-apps': string;
+        'add-item': string;
+        'lp-apps': string;
+        questions: string;
+        'back-to': string;
+        'select-an-organisation': string;
+        search: string;
+        open: string;
+        'select-org': string;
+        'open-in-new-window': string;
+        'stream-hub-welcome': string;
+    };
+    DrawerWidth: {
+        Collapsed: number;
+        Expanded: number;
+    };
 }>;
 export declare const applications: ({
     applicationId: number;

package/components/stream/AppSwitcher/constants.js

@@ -15,6 +15,25 @@ export var Constants = Object.freeze({
     Tabs: {
         ListApplications: 1,
         ListOrgs: 2
+    },
+    DefaultMessages: {
+        'app-switcher': 'App Switcher',
+        'your-apps': 'Your Apps',
+        'custom-apps': 'Explore Custom Apps',
+        'add-item': 'Add item',
+        'lp-apps': 'Explore Learning Pool Apps',
+        questions: 'Questions',
+        'back-to': 'Back',
+        'select-an-organisation': 'Select an organisation',
+        search: 'Search',
+        open: 'Open',
+        'select-org': 'Organisation',
+        'open-in-new-window': 'opens in a new window',
+        'stream-hub-welcome': 'Welcome to Stream Home'
+    },
+    DrawerWidth: {
+        Collapsed: 60,
+        Expanded: 300
     }
 });
 export var applications = [

package/package.json

@@ -9,7 +9,7 @@
     "components",
     "ui"
   ],
-  "version": "1.8.7",
+  "version": "1.9.0",
   "private": false,
   "main": "index.js",
   "module": "index.js",
@@ -18,7 +18,7 @@
     "@emotion/styled": "^11.6.0",
     "@learningpool/design-tokens": "^1.1.0-beta.7",
     "@mui/icons-material": "^5.8.4",
-    "@mui/material": "^5.8.5",
+    "@mui/material": "5.10.6",
     "@mui/x-data-grid": "^5.12.3",
     "@react-spring/web": "9.6.1",
     "@types/jest": "^27.4.0",
@@ -32,8 +32,9 @@
     "jwt-decode": "^3.1.2",
     "polished": "^4.2.2",
     "query-string": "^7.1.1",
+    "styled-components": "^5.3.6",
     "tss-react": "^3.3.6",
-    "typescript": "^4.6.2",
+    "typescript": "^4.9.5",
     "web-vitals": "^2.1.4"
   },
   "publishConfig": {

package/utils/helpers.d.ts

@@ -17,17 +17,20 @@ export declare const stringToColor: (string: string) => string;
  */
 export declare const stringAvatar: (name: string) => any;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param trigger boolean - Trigger to reverse the animation from main component
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades an item
+ * in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export declare const useStaggerAnimation: (trigger: boolean, animationCount: number, incrementAnimationCount: Function) => Object;
+export declare const useFadeIn: (delayOrder: number, reverse?: boolean) => Object;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades and moves
+ * an item in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export declare const useFadeIn: (animationCount: number, incrementAnimationCount: Function) => Object;
+export declare const useFadeAndMoveIn: (delayOrder: number, reverse?: boolean) => Object;

package/utils/helpers.js

@@ -9,6 +9,7 @@ var __assign = (this && this.__assign) || function () {
     };
     return __assign.apply(this, arguments);
 };
+import { useEffect, useRef } from 'react';
 import { useSpring, config } from '@react-spring/web';
 /**
  * Accepts a string and returns 2 characters (max) as initials e.g. AN from Avatar Name
@@ -62,36 +63,55 @@ export var stringAvatar = function (name) {
 };
 var STAGGER_ITEMS_DELAY = 70;
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param trigger boolean - Trigger to reverse the animation from main component
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring based on the
+ * animation configuration provided
+ * @param animationConfig object - Config for useSpring animation (react-spring object)
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export var useStaggerAnimation = function (trigger, animationCount, incrementAnimationCount) {
+var useStaggerIn = function (animationConfig, delayOrder, reverse) {
     var defaultAnimationConfig = {
-        from: { opacity: 0, y: 10 },
-        to: { opacity: 1, y: 0 },
-        reverse: !trigger,
+        reverse: reverse,
         config: __assign(__assign({}, config.default), { mass: 1 })
     };
-    var staggerAnimation = useSpring(__assign(__assign({}, defaultAnimationConfig), { delay: trigger ? STAGGER_ITEMS_DELAY * (animationCount + 1) : 0 }));
-    incrementAnimationCount();
-    return staggerAnimation;
+    var animationCountRef = useRef(0);
+    var staggerInAnimation = useSpring(__assign(__assign(__assign({}, defaultAnimationConfig), animationConfig), { delay: STAGGER_ITEMS_DELAY * delayOrder }));
+    useEffect(function () {
+        animationCountRef.current += 1;
+    });
+    return staggerInAnimation;
 };
 /**
- * Accepts a number and returns a react-spring style object from useSpring
- * @param animationCount number - Count tracking items from main component
- * @param incrementAnimationCount Function - Function to increment animationCount from main component
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades an item
+ * in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @param reverse boolean - Toggles the direction of the animation
  * @returns Object
  */
-export var useFadeIn = function (animationCount, incrementAnimationCount) {
-    var defaultAnimationConfig = {
+export var useFadeIn = function (delayOrder, reverse) {
+    if (reverse === void 0) { reverse = false; }
+    var animationConfig = {
         from: { opacity: 0 },
-        to: { opacity: 1 },
-        config: __assign(__assign({}, config.default), { mass: 1 })
+        to: { opacity: 1 }
+    };
+    return useStaggerIn(animationConfig, delayOrder, reverse);
+};
+/**
+ * Accepts an order, optional in/out toggle and returns
+ * a react-spring style object from useSpring that fades and moves
+ * an item in based on it's order
+ * @param delayOrder number - Order for delaying items
+ * @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 = {
+        from: { opacity: 0, y: 10 },
+        to: { opacity: 1, y: 0 }
     };
-    var staggerFadeInUpAnimation = useSpring(__assign(__assign({}, defaultAnimationConfig), { delay: STAGGER_ITEMS_DELAY * (animationCount + 1) }));
-    incrementAnimationCount();
-    return staggerFadeInUpAnimation;
+    return useStaggerIn(animationConfig, delayOrder, reverse);
 };