@learningpool/ui 1.8.7 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/components/atoms/Button/Button.d.ts +1 -1
  2. package/components/landmarks/Header/HeaderStyles.d.ts +1 -1
  3. package/components/navigation/Drawer/Drawer.d.ts +1 -1
  4. package/components/navigation/MobileNavigation/MobileNavigationAvatar.js +46 -31
  5. package/components/navigation/MobileNavigation/MobileNavigationAvatarStyles.d.ts +207 -141
  6. package/components/navigation/MobileNavigation/MobileNavigationDrawer.js +39 -27
  7. package/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.d.ts +75 -53
  8. package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenuStyles.d.ts +4 -4
  9. package/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemStyles.d.ts +6 -6
  10. package/components/navigation/MobileNavigation/MobileNavigationSearchStyles.d.ts +68 -46
  11. package/components/navigation/MobileNavigation/MobileNavigationStyles.d.ts +1 -1
  12. package/components/navigation/VerticalNavigation/VerticalNavigation.js +131 -105
  13. package/components/navigation/VerticalNavigation/VerticalNavigationAvatar.js +42 -18
  14. package/components/navigation/VerticalNavigation/VerticalNavigationAvatarStyles.d.ts +207 -141
  15. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemFlyoutMenuStyles.d.ts +4 -4
  16. package/components/navigation/VerticalNavigation/VerticalNavigationItem/VerticalNavigationItemStyles.d.ts +6 -6
  17. package/components/navigation/VerticalNavigation/VerticalNavigationStyles.d.ts +69 -47
  18. package/components/stream/AppHub/AppHubCustomStyles.d.ts +4 -4
  19. package/components/stream/AppHub/AppHubProductStyles.d.ts +3 -3
  20. package/components/stream/AppHub/AppHubStyles.d.ts +2 -2
  21. package/components/stream/AppSwitcher/AppSwitcher.d.ts +10 -2
  22. package/components/stream/AppSwitcher/AppSwitcher.js +9 -7
  23. package/components/stream/AppSwitcher/AppSwitcherStylesStandalone.d.ts +16 -0
  24. package/components/stream/AppSwitcher/AppSwitcherStylesStandalone.js +22 -0
  25. package/components/stream/AppSwitcher/constants.d.ts +19 -0
  26. package/components/stream/AppSwitcher/constants.js +19 -0
  27. package/package.json +4 -3
  28. package/utils/helpers.d.ts +12 -9
  29. package/utils/helpers.js +41 -21
@@ -31,5 +31,5 @@ declare const Button: React.ForwardRefExoticComponent<Pick<{
31
31
  touchRippleRef?: React.Ref<import("@mui/material/ButtonBase/TouchRipple").TouchRippleActions> | undefined;
32
32
  }, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof React.ButtonHTMLAttributes<HTMLButtonElement>> & {
33
33
  ref?: ((instance: HTMLButtonElement | null) => void) | React.RefObject<HTMLButtonElement> | null | undefined;
34
- }, 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"> & React.RefAttributes<HTMLButtonElement>>;
34
+ }, 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"> & React.RefAttributes<HTMLButtonElement>>;
35
35
  export default Button;
@@ -20,7 +20,7 @@ export declare const StyledBreadcrumbs: import("@emotion/styled").StyledComponen
20
20
  sx?: import("@mui/material").SxProps<import("@mui/material").Theme> | undefined;
21
21
  } & import("@mui/material/OverridableComponent").CommonProps & Omit<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "key" | keyof import("react").HTMLAttributes<HTMLElement>> & {
22
22
  ref?: ((instance: HTMLElement | null) => void) | import("react").RefObject<HTMLElement> | null | undefined;
23
- }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "separator" | "sx" | "expandText" | "itemsAfterCollapse" | "itemsBeforeCollapse" | "maxItems"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
23
+ }, keyof import("@mui/material/OverridableComponent").CommonProps | "children" | "sx" | "separator" | "expandText" | "itemsAfterCollapse" | "itemsBeforeCollapse" | "maxItems"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
24
24
  export declare const StyledHeaderPrimary: import("@emotion/styled").StyledComponent<import("@mui/system").SystemProps<import("@mui/material").Theme> & {
25
25
  children?: import("react").ReactNode;
26
26
  component?: import("react").ElementType<any> | undefined;
@@ -3,5 +3,5 @@ import { DrawerProps } from '@mui/material/Drawer';
3
3
  interface IDrawerProps extends DrawerProps {
4
4
  component?: string | JSX.Element;
5
5
  }
6
- declare const Drawer: React.ForwardRefExoticComponent<Pick<IDrawerProps, "className" | "style" | "classes" | "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" | "anchor" | "transitionDuration" | "elevation" | "open" | "onClose" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "container" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "component" | "ModalProps" | "PaperProps" | "SlideProps"> & React.RefAttributes<HTMLDivElement>>;
6
+ declare const Drawer: React.ForwardRefExoticComponent<Pick<IDrawerProps, "className" | "style" | "classes" | "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" | "anchor" | "transitionDuration" | "container" | "elevation" | "open" | "onClose" | "components" | "componentsProps" | "BackdropComponent" | "BackdropProps" | "closeAfterTransition" | "disableAutoFocus" | "disableEnforceFocus" | "disableEscapeKeyDown" | "disablePortal" | "disableRestoreFocus" | "disableScrollLock" | "hideBackdrop" | "keepMounted" | "onBackdropClick" | "component" | "ModalProps" | "PaperProps" | "SlideProps"> & React.RefAttributes<HTMLDivElement>>;
7
7
  export default Drawer;
@@ -9,6 +9,15 @@ var __assign = (this && this.__assign) || function () {
9
9
  };
10
10
  return __assign.apply(this, arguments);
11
11
  };
12
+ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
13
+ if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
14
+ if (ar || !(i in from)) {
15
+ if (!ar) ar = Array.prototype.slice.call(from, 0, i);
16
+ ar[i] = from[i];
17
+ }
18
+ }
19
+ return to.concat(ar || Array.prototype.slice.call(from));
20
+ };
12
21
  import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
13
22
  import React, { useEffect } from 'react';
14
23
  import { Box, ButtonGroup, Button, Link, List, ListItem, ListItemIcon, ListItemText } from '../../../index';
@@ -18,15 +27,15 @@ import EditIcon from '@mui/icons-material/Edit';
18
27
  import LogoutIcon from '@mui/icons-material/Logout';
19
28
  import ToggleOffIcon from '@mui/icons-material/ToggleOff';
20
29
  import ToggleOnIcon from '@mui/icons-material/ToggleOn';
21
- import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers';
30
+ import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers';
22
31
  import { animated } from '@react-spring/web';
23
32
  import { defaultAttributes } from '../../../utils/dataAttributes';
24
33
  var SwipeableTemporaryAvatar = function (props) {
25
- var _a;
34
+ var _a, _b, _c, _d;
26
35
  var theme = useTheme();
27
36
  var avatarName = props.avatarName, mobileNavDirection = props.mobileNavDirection, avatarPanelLogoutString = props.avatarPanelLogoutString, isAvatarOpen = props.isAvatarOpen, setIsAvatarOpen = props.setIsAvatarOpen, setMobileNavDirection = props.setMobileNavDirection, avatarPanelOnClickSwitchDirection = props.avatarPanelOnClickSwitchDirection, avatarPanelOnClickLogout = props.avatarPanelOnClickLogout, avatarPanelOnClickViewProfile = props.avatarPanelOnClickViewProfile, avatarPanelViewProfileString = props.avatarPanelViewProfileString, avatarPanelOnClickEditProfile = props.avatarPanelOnClickEditProfile, avatarPanelEditProfileString = props.avatarPanelEditProfileString, avatarPanelMenuItems = props.avatarPanelMenuItems, avatarPanelOnClickMainAction = props.avatarPanelOnClickMainAction, avatarPanelMainActionString = props.avatarPanelMainActionString, avatarPanelSettingItems = props.avatarPanelSettingItems, avatarPanelInvertNavString = props.avatarPanelInvertNavString, dataAttributes = props.dataAttributes;
28
37
  var dataIds = __assign(__assign({}, defaultAttributes), dataAttributes);
29
- var _b = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _b[0], setIsOpen = _b[1];
38
+ var _e = React.useState(isAvatarOpen !== null && isAvatarOpen !== void 0 ? isAvatarOpen : false), isOpen = _e[0], setIsOpen = _e[1];
30
39
  React.useEffect(function () { return handleOpenState(isAvatarOpen); }, [isAvatarOpen]);
31
40
  var handleOpenState = function (open) {
32
41
  setIsOpen(open);
@@ -42,30 +51,42 @@ var SwipeableTemporaryAvatar = function (props) {
42
51
  handleOpenState(open);
43
52
  };
44
53
  };
45
- var _c = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _c[0], setAvatarInitials = _c[1];
54
+ var _f = React.useState((_a = handleAvatarInitials(avatarName)) !== null && _a !== void 0 ? _a : 'AN'), avatarInitials = _f[0], setAvatarInitials = _f[1];
46
55
  useEffect(function () { return setAvatarInitials(handleAvatarInitials(avatarName)); }, [avatarName]);
47
56
  var handleOnClickSwitchDirection = function () {
48
57
  setMobileNavDirection(mobileNavDirection === 'rtl' ? 'ltr' : 'rtl');
49
58
  avatarPanelOnClickSwitchDirection && avatarPanelOnClickSwitchDirection();
50
59
  };
51
- // First item starts at 70ms
52
- // see STAGGER_ITEMS_DELAY in helpers.js
53
- var animationCount = 1;
54
- var incrementAnimationCount = function () { return animationCount++; };
60
+ // Workaround to handle the react-spring calls without
61
+ // adding additional hook calls on prop or state changes
62
+ // --
63
+ // Store the total possible number of animations in a ref
64
+ // this way the number of hook calls never changes
65
+ // --
66
+ // First item starts at 70ms, see STAGGER_ITEMS_DELAY in helpers.js
67
+ var additionalItems = [
68
+ 'avatarPanelOnClickLogout',
69
+ 'avatarName',
70
+ 'avatarPanelOnClickViewProfile',
71
+ 'avatarPanelOnClickMainAction',
72
+ 'mobileNavDirection'
73
+ ];
74
+ var totalItems = __spreadArray(__spreadArray(__spreadArray([], avatarPanelMenuItems !== null && avatarPanelMenuItems !== void 0 ? avatarPanelMenuItems : [], true), avatarPanelSettingItems !== null && avatarPanelSettingItems !== void 0 ? avatarPanelSettingItems : [], true), additionalItems, true);
75
+ var animationRefs = React.useRef(totalItems && totalItems.map(function (item, index) { return useFadeIn(index, !isAvatarOpen); }));
55
76
  return (_jsx(StyledSwipeableAvatar, __assign({ "data-id": dataIds.MobileNavAvatarPanel, anchor: 'bottom', open: isOpen, onClose: toggleAvatar(false), hideBackdrop: true, ModalProps: {
56
77
  keepMounted: true
57
78
  } }, { children: _jsxs(StyledBox, { children: [avatarPanelOnClickLogout && (_jsx(Button
58
79
  // @ts-expect-error
59
80
  , __assign({
60
81
  // @ts-expect-error
61
- component: animated.button, style: __assign({ left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto', position: 'absolute', right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1), top: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)), onClick: function () {
82
+ component: animated.button, style: __assign({ left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto', position: 'absolute', right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1), top: theme.spacing(1) }, animationRefs.current[0]), onClick: function () {
62
83
  handleOpenState(false);
63
84
  avatarPanelOnClickLogout();
64
85
  }, startIcon: _jsx(LogoutIcon, {}), variant: 'text', color: 'inherit' }, { children: avatarPanelLogoutString !== null && avatarPanelLogoutString !== void 0 ? avatarPanelLogoutString : 'Logout' }))), _jsxs(Box, __assign({ "data-id": dataIds.MobileNavAvatarProfile, style: {
65
86
  alignItems: 'center',
66
87
  display: 'flex',
67
88
  flexDirection: 'column'
68
- } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount) }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, useStaggerAnimation(isOpen, animationCount, incrementAnimationCount)) }, { children: _jsxs(ButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledOutlineButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
89
+ } }, { children: [_jsxs(StyledBoxProfile, __assign({ style: animationRefs.current[1] }, { children: [_jsx(StyledAvatar, __assign({ style: { marginRight: '0.5rem' } }, { children: avatarInitials })), _jsxs(StyledAvatarName, { children: [_jsx("span", __assign({ style: { fontWeight: 300 } }, { children: "Hi," })), " ", _jsx("strong", { children: avatarName.split(' ')[0] })] })] })), avatarPanelOnClickViewProfile && (_jsx(StyledBoxProfileEdit, __assign({ style: __assign({ flexDirection: 'row', marginBottom: theme.spacing(1) }, animationRefs.current[2]) }, { children: _jsxs(ButtonGroup, __assign({ variant: 'outlined', "aria-label": "split button" }, { children: [_jsx(StyledOutlineButton, __assign({ variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
69
90
  handleOpenState(false);
70
91
  avatarPanelOnClickViewProfile();
71
92
  } }, { children: avatarPanelViewProfileString !== null && avatarPanelViewProfileString !== void 0 ? avatarPanelViewProfileString : 'View Profile' })), avatarPanelOnClickEditProfile && (_jsx(StyledOutlineButton, __assign({ size: 'medium', variant: 'outlined', color: 'inherit', "aria-label": avatarPanelEditProfileString !== null && avatarPanelEditProfileString !== void 0 ? avatarPanelEditProfileString : 'Edit Profile', onClick: function () {
@@ -79,10 +100,7 @@ var SwipeableTemporaryAvatar = function (props) {
79
100
  marginInlineStart: '3rem',
80
101
  marginBottom: theme.spacing(2),
81
102
  maxWidth: '18rem'
82
- } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount),
83
- // whileHover={motionWhileHover}
84
- // whileTap={motionWhileTap}
85
- disablePadding: true }, { children: _jsxs(StyledListItemButton
103
+ } }, { children: avatarPanelMenuItems.map(function (avatarMenuItem, index) { return (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[index + 2], disablePadding: true }, { children: _jsxs(StyledListItemButton
86
104
  // TODO: figure out if these are links or buttons
87
105
  // @ts-expect-error
88
106
  , __assign({
@@ -97,29 +115,26 @@ var SwipeableTemporaryAvatar = function (props) {
97
115
  // @ts-expect-error
98
116
  , __assign({
99
117
  // @ts-expect-error
100
- component: animated.button, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount), disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
118
+ component: animated.button, style: animationRefs.current[((_b = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _b !== void 0 ? _b : 0) + 3], disablePadding: true, variant: 'outlined', color: 'inherit', size: 'medium', onClick: function () {
101
119
  handleOpenState(false);
102
120
  avatarPanelOnClickMainAction();
103
121
  } }, { children: avatarPanelMainActionString })), _jsxs(List, __assign({ style: { marginBottom: theme.spacing(2) } }, { children: [avatarPanelSettingItems &&
104
122
  avatarPanelSettingItems.length > 0 &&
105
- avatarPanelSettingItems.map(function (avatarMenuItem) { return (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount),
106
- // whileHover={motionWhileHover}
107
- // whileTap={motionWhileTap}
108
- disablePadding: true }, { children: _jsxs(StyledListItemButton
109
- // TODO: figure out if these are links or buttons
110
- // @ts-expect-error
111
- , __assign({
123
+ avatarPanelSettingItems.map(function (avatarMenuItem, index) {
124
+ var _a;
125
+ return (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[((_a = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _a !== void 0 ? _a : 0) + index + 3], disablePadding: true }, { children: _jsxs(StyledListItemButton
112
126
  // TODO: figure out if these are links or buttons
113
127
  // @ts-expect-error
114
- component: Link, role: 'link', onClick: function () {
115
- handleOpenState(false);
116
- avatarMenuItem.onClick();
117
- } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
118
- minWidth: theme.spacing(5)
119
- } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) }))); }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: animated.div, style: useStaggerAnimation(isOpen, animationCount, incrementAnimationCount),
120
- // whileHover={motionWhileHover}
121
- // whileTap={motionWhileTap}
122
- disablePadding: true }, { children: _jsxs(StyledListItemButton
128
+ , __assign({
129
+ // TODO: figure out if these are links or buttons
130
+ // @ts-expect-error
131
+ component: Link, role: 'link', onClick: function () {
132
+ handleOpenState(false);
133
+ avatarMenuItem.onClick();
134
+ } }, { children: [_jsx(ListItemIcon, __assign({ "aria-hidden": true, style: {
135
+ minWidth: theme.spacing(5)
136
+ } }, { children: avatarMenuItem.icon })), _jsx(ListItemText, { primary: avatarMenuItem.label })] })) })));
137
+ }), avatarPanelOnClickSwitchDirection && (_jsx(ListItem, __assign({ component: animated.div, style: animationRefs.current[((_c = avatarPanelMenuItems === null || avatarPanelMenuItems === void 0 ? void 0 : avatarPanelMenuItems.length) !== null && _c !== void 0 ? _c : 0) + ((_d = avatarPanelSettingItems === null || avatarPanelSettingItems === void 0 ? void 0 : avatarPanelSettingItems.length) !== null && _d !== void 0 ? _d : 0) + 4], disablePadding: true }, { children: _jsxs(StyledListItemButton
123
138
  // TODO: figure out if these are links or buttons
124
139
  // @ts-expect-error
125
140
  , __assign({