@learningpool/ui 1.6.3 → 1.6.6

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigation.tsx

@@ -1,468 +0,0 @@
-import React, { useEffect } from 'react'
-import { useTheme } from '@mui/material/styles'
-import {
-  Avatar, List, Tooltip
-} from '../../../index'
-import { Box, Modal } from '@mui/material'
-import { StreamSuiteLogo, NotchSVG, NotchExtendSVG } from '../../../assets/Images'
-import AppSwitcher from '../../stream/AppSwitcher/AppSwitcher'
-import { Apps, ChevronLeft, ChevronRight, PushPin } from '@mui/icons-material'
-import VerticalNavigationItem from './VerticalNavigationItem/VerticalNavigationItem'
-import {
-  DRAWER_WIDTH, DrawerHeader, DrawerToggle, DrawerToggleHitboxContent,
-  StyledDivider, StyledNav, StyledNavSecondary, DrawerShadow, StyledAside,
-  NotchContainer, NotchBackground, NotchBackgroundClip, NotchSeemMask,
-  StyledDrawer
-} from './VerticalNavigationStyles'
-import { ListItemText } from './VerticalNavigationItem/VerticalNavigationItemStyles'
-import AvatarPanel from './VerticalNavigationAvatar'
-import { motion } from '../../../utils/theme'
-import { handleAvatarInitials, useFadeIn } from '../../../utils/helpers'
-import { DEFAULT_REACT_APP_ID } from '../../../utils/constants'
-import { IApplication, IAvatarMenuItemProps, IVerticalNavigationItemProps } from '../../../types'
-import { animated } from '@react-spring/web'
-
-interface VerticalNavigationProps {
-  logo?: string
-  logoText?: string
-  logoOnClick?: any
-  items?: IVerticalNavigationItemProps[]
-  secondaryItems?: IVerticalNavigationItemProps[]
-  hasStreamHome?: boolean
-  streamHomeAccessToken?: string
-  streamHomeBaseUrl?: string
-  streamHomeApiKey?: string
-  streamHomeApplications?: IApplication[]
-  avatarName?: string
-  isDrawerOpen?: boolean
-  isPersistent?: boolean
-  setIsPersistent?: any
-  appRootID?: string
-
-  // Avatar panel props
-  hasAvatar?: boolean
-  avatarPanelLogoutString?: string
-  avatarPanelOnClickSwitchDirection?: any
-  avatarPanelOnClickLogout?: any
-  avatarPanelOnClickViewProfile?: any
-  avatarPanelViewProfileString?: string
-  avatarPanelOnClickEditProfile?: any
-  avatarPanelEditProfileString?: string
-  avatarPanelMenuItems?: Array<IAvatarMenuItemProps>
-  avatarPanelOnClickMainAction?: any
-  avatarPanelMainActionString?: string
-  avatarPanelSettingItems?: Array<IAvatarMenuItemProps>
-  avatarPanelFootnote?: any
-}
-
-const VerticalNavigation = (
-  props: VerticalNavigationProps
-): React.ReactElement => {
-  const theme = useTheme()
-  const {
-    items, secondaryItems, logo, logoText, logoOnClick, appRootID,
-    hasStreamHome, streamHomeApiKey, streamHomeBaseUrl,
-    streamHomeAccessToken, streamHomeApplications, ...rest
-  } = props
-  const propIsDrawerOpen = typeof props?.isDrawerOpen === 'boolean' ? props.isDrawerOpen : undefined
-  const propIsPersistent = typeof props?.isPersistent === 'boolean' ? props.isPersistent : undefined
-  const avatarName = props?.avatarName ?? 'Avatar name'
-
-  const [isDrawerOpen, setIsDrawerOpen] = React.useState(propIsDrawerOpen ?? false)
-  const [isAvatarOpen, setIsAvatarOpen] = React.useState(false)
-  const [isPersistent, setIsPersistent] = React.useState(propIsPersistent ?? false)
-
-  // Controls whether the application panel is open or not.
-  const [isAppSwitcherOpen, setIsAppSwitcherOpen] = React.useState(false)
-
-  /**
-   * Toggles display of the Stream suite application dialog.
-   */
-  const handleToggleAppsClick = (): void => {
-    setIsAppSwitcherOpen(!isAppSwitcherOpen)
-  }
-
-  const logoHeight = 38
-  const logoWidth = 38
-
-  useEffect(() => setIsDrawerOpen(propIsDrawerOpen ?? false), [propIsDrawerOpen])
-  useEffect(() => setIsDrawerOpen(propIsPersistent ?? false), [propIsPersistent])
-  useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [avatarName])
-
-  // This fixes an issue with how MUI handles the modal and aria-hidden.
-  // When open, the Modal adds aria-hidden="true" to a top-level element,
-  // which causes some screen readers to annouce the elements as "blank".
-  // This fix just overrides the default aria-hidden attribute.
-  //
-  // https://github.com/mui/material-ui/issues/19450
-  useEffect(() => {
-    if (isDrawerOpen) {
-      const root = window.document.getElementById(appRootID ?? DEFAULT_REACT_APP_ID)
-      root?.removeAttribute('aria-hidden')
-    }
-  }, [isDrawerOpen])
-
-  const handleIsPersistent = (): void => {
-    if (props?.setIsPersistent) {
-      props.setIsPersistent(!propIsPersistent ?? false)
-      setIsPersistent(!propIsPersistent ?? false)
-      return
-    }
-
-    setIsPersistent(propIsPersistent ?? false)
-  }
-
-  const [avatarInitials, setAvatarInitials] = React.useState(handleAvatarInitials(avatarName) ?? 'AN')
-
-  const toggleDrawer = (open: boolean) => (event: React.KeyboardEvent | React.MouseEvent) => {
-    event?.stopPropagation()
-
-    if (event.type === 'keydown') {
-      if ((event as React.KeyboardEvent).key === 'Tab' || (event as React.KeyboardEvent).key === 'Shift') {
-        return
-      }
-    }
-
-    setIsAppSwitcherOpen(false)
-    setIsDrawerOpen(open ?? !isDrawerOpen)
-  }
-
-  // First item starts at 70ms
-  // see STAGGER_ITEMS_DELAY in helpers.js
-  let animationCount = 1
-  const incrementAnimationCount = () => animationCount++
-
-  const listContent = (): React.ReactElement => (
-    <Box
-      sx={{
-        display: 'flex',
-        flex: '1 auto',
-        flexDirection: 'column',
-        justifyContent: 'flex-start',
-        '.wrapper': {
-          display: 'flex',
-          position: 'relative'
-        },
-        '.wrapper > :not(:first-child)': {
-          position: 'absolute',
-          right: 0,
-          background: 'transparent',
-          fontSize: 0
-        }
-      }}
-      className='grid-container'
-    >
-      <div
-        className='wrapper'
-        style={{
-          backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.primary.main
-            : theme.palette.background.paper
-        }}
-      >
-        <DrawerHeader
-          onClick={logoOnClick ?? null}
-          isDrawerOpen={isDrawerOpen || isPersistent}
-          style={useFadeIn(animationCount, incrementAnimationCount)}
-        >
-          <Tooltip
-            disableHoverListener={isDrawerOpen || isPersistent}
-            disableFocusListener={isDrawerOpen || isPersistent}
-            disableTouchListener={isDrawerOpen || isPersistent}
-            title={logoText ?? ''}
-            placement={theme.direction === 'rtl' ? 'left' : 'right'}
-          >
-            {logo
-              ? typeof logo === 'string'
-                ? (
-                  <img
-                    src={logo}
-                    height={`${logoHeight}px`}
-                    width={`${logoWidth}px`}
-                    style={{
-                      marginRight: '16px'
-                    }}
-                    alt="Site Logo"
-                  />)
-                : logo
-              : (
-                <StreamSuiteLogo style={{
-                  height: `${logoHeight}px`,
-                  width: `${logoWidth}px`,
-                  marginRight: '16px',
-                  fill: theme.palette.mode === 'dark'
-                    ? theme.palette.primary.contrastText
-                    : theme.palette.primary.main
-                }} />)}
-          </Tooltip>
-          <ListItemText primary={logoText ?? ''} isDrawerOpen={isDrawerOpen || isPersistent} />
-        </DrawerHeader>
-      </div>
-
-      <div className='wrapper'>
-        <NotchContainer sx={{ height: '85px', position: 'relative !important' }}>
-          <NotchBackground />
-          {!isPersistent && <NotchBackgroundClip />}
-          <NotchSeemMask />
-        </NotchContainer>
-        {!isPersistent && <DrawerToggle
-          onClick={toggleDrawer(!isDrawerOpen)}
-          aria-label={isDrawerOpen ? 'Close Navigation' : 'Open Navigation'}
-          aria-expanded={isDrawerOpen ? 'true' : 'false'}
-          aria-controls="vertical-navigation"
-          // @ts-expect-error
-          component={animated.button}
-          style={{
-            ...useFadeIn(animationCount, incrementAnimationCount),
-            transform: 'translate(22px, calc(50% - 5.5px))'
-          }}
-        >
-          <DrawerToggleHitboxContent>
-            {isDrawerOpen
-              ? (
-                <ChevronLeft style={{
-                  fontSize: '1.75rem',
-                  height: '1.75rem',
-                  width: '1.75rem'
-                }} />)
-              : (
-                <ChevronRight style={{
-                  fontSize: '1.75rem',
-                  height: '1.75rem',
-                  width: '1.75rem'
-                }} />)}
-          </DrawerToggleHitboxContent>
-        </DrawerToggle>}
-
-        <Box style={{
-          borderRadius: '50%',
-          boxShadow: '5px 0 15px 0 rgb(0 0 0 / 10%)',
-          display: 'none',
-          height: '50px',
-          left: '12px',
-          position: 'fixed',
-          right: 'auto !important',
-          top: '50%',
-          transform: 'translate(50%, -50%)',
-          width: '50px'
-        }} />
-        <DrawerToggle
-          onClick={handleIsPersistent}
-          aria-label={isDrawerOpen ? 'Close Navigation' : 'Open Navigation'}
-          aria-expanded={isDrawerOpen ? 'true' : 'false'}
-          aria-controls="vertical-navigation"
-          style={{
-            display: 'none',
-            position: 'fixed',
-            top: '50%',
-            transform: 'translate(50%, -50%)',
-            zIndex: 10
-          }}
-        >
-          <NotchExtendSVG style={{
-            display: 'block',
-            fill: theme.palette.mode === 'dark'
-              ? theme.palette.primary.main
-              : theme.palette.background.paper,
-            height: '165px',
-            left: '-12px',
-            padding: '0',
-            position: 'absolute',
-            top: '-61px',
-            transition: 'none',
-            width: '90px',
-            zIndex: '-1'
-          }} />
-          <DrawerToggleHitboxContent style={{
-            background: 'transparent',
-            boxShadow: 'none',
-            fontSize: '1.3rem',
-            height: '1.3rem',
-            padding: theme.spacing(1),
-            width: '1.3rem'
-          }}>
-            {isPersistent
-              ? (
-                <PushPin style={{
-                  fontSize: '1.3rem',
-                  height: '1.3rem',
-                  width: '1.3rem'
-                }} />)
-              : (
-                <PushPin style={{
-                  fontSize: '1.3rem',
-                  height: '1.3rem',
-                  width: '1.3rem'
-                }} />)}
-          </DrawerToggleHitboxContent>
-        </DrawerToggle>
-      </div>
-
-      <NotchSVG style={{ height: '0', position: 'absolute', width: '0' }} />
-
-      <div
-        className='wrapper'
-        style={{
-          backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.primary.main
-            : theme.palette.background.paper,
-          flex: '1 1px',
-          marginTop: '-1px',
-          overflow: 'auto',
-          position: 'relative'
-        }}
-      >
-        <StyledNav tabIndex={-1} aria-label='Primary'>
-          <List
-            style={{
-              height: '100%',
-              width: DRAWER_WIDTH.Expanded,
-              marginTop: `-${theme.spacing(0.5)} !important`
-            }}
-          >
-            {items && items.length > 0 && items.map((item, index) => (
-              <VerticalNavigationItem
-                {...item}
-                index={index}
-                isDrawerOpen={isDrawerOpen || isPersistent}
-                style={useFadeIn(animationCount, incrementAnimationCount)}
-              />
-            ))}
-          </List>
-        </StyledNav>
-      </div>
-
-      <div
-        className='wrapper'
-        style={{
-          backgroundColor: theme.palette.mode === 'dark'
-            ? theme.palette.primary.main
-            : theme.palette.background.paper
-        }}
-      >
-        <StyledNavSecondary
-          aria-label='Secondary'
-          // style={{ height: secondaryItems && secondaryItems.length > 0 ? `${logoHeight * (secondaryItems.length + 1)}px` : logoHeight }}
-        >
-          <StyledDivider isDrawerOpen={isDrawerOpen || isPersistent}/>
-          <List
-            style={{
-              width: DRAWER_WIDTH.Expanded,
-              backgroundColor: theme.palette.mode === 'dark'
-                ? theme.palette.primary.main
-                : theme.palette.background.paper
-            }}
-          >
-            {hasStreamHome
-              ? (
-                <VerticalNavigationItem
-                  label='App Switcher'
-                  icon={<Apps />}
-                  onClick={handleToggleAppsClick}
-                  content={(
-                    <AppSwitcher
-                      isAppSwitcherOpen={isAppSwitcherOpen}
-                      setIsAppSwitcherOpen={setIsAppSwitcherOpen}
-                      applications={streamHomeApplications}
-                      apiKey={streamHomeApiKey ?? ''}
-                      baseUrl={streamHomeBaseUrl ?? ''}
-                      token={streamHomeAccessToken ?? ''}
-                      isDrawerOpen={isDrawerOpen}
-                    />
-                  )}
-                  isDrawerOpen={isDrawerOpen || isPersistent}
-                  isSecondary
-                  hasCustomContent
-                  style={useFadeIn(animationCount, incrementAnimationCount)}
-                />
-              )
-              : null}
-
-            {secondaryItems && secondaryItems.length > 0 && secondaryItems.map((item, index) => (
-              <VerticalNavigationItem
-                {...item}
-                index={index}
-                isDrawerOpen={isDrawerOpen || isPersistent}
-                isSecondary
-                style={useFadeIn(animationCount, incrementAnimationCount)}
-              />
-            ))}
-
-            {avatarName
-              ? (
-                <VerticalNavigationItem
-                  label={avatarName}
-                  aria-controls='avatar-panel'
-                  icon={<Avatar
-                    style={{
-                      // backgroundColor: mainTheme.colorButtonText,
-                      // color: mainTheme.colorButton,
-                      fontSize: '0.75rem',
-                      height: 32,
-                      width: 32
-                    }}
-                  >
-                    {avatarInitials}
-                  </Avatar>}
-                  style={{
-                    maxHeight: isDrawerOpen ? '200px' : '48px',
-                    overflow: 'hidden',
-                    padding: 0,
-                    minHeight: 52,
-                    transition: `max-height 225ms ${motion.easeInOut} 0ms !important`,
-                    ...useFadeIn(animationCount, incrementAnimationCount)
-                  }}
-                  onClick={() => setIsAvatarOpen(!isAvatarOpen)}
-                  hasFlyout
-                  fullHeightFlyout
-                  content={<AvatarPanel
-                    avatarName={avatarName}
-                    isAvatarOpen={isAvatarOpen}
-                    {...rest}
-                  />}
-                  isDrawerOpen={isDrawerOpen}
-                />)
-              : null}
-          </List>
-        </StyledNavSecondary>
-      </div>
-      {/* <NotchBackgroundSVG style={{ height: '0', position: 'absolute', width: '0' }} />
-
-      <svg id='notch-background-svg' viewBox="0 0 25 865" xmlns="http://www.w3.org/2000/svg" style={{ height: '0', position: 'absolute', width: '0' }}>
-        <path fill={theme.palette.mode === 'dark' ? theme.palette.primary.main : theme.palette.background.paper} fill-rule="evenodd" clip-rule="evenodd" d="M25 0H0V865H25V468.5V466.451C24.6432 460.704 21.3624 455.984 18.6792 453.948C9.58731 451.059 3 442.549 3 432.5C3 422.927 8.97844 414.75 17.4054 411.5H17C19.7393 410.587 24.563 405.088 25 398.049V396V0Z" />
-      </svg> */}
-    </Box>
-  )
-
-  return (
-    <StyledAside aria-label="Site navigation">
-      <DrawerShadow
-        className='drawerShadow'
-        aria-hidden='true'
-        isDrawerOpen={isDrawerOpen || isPersistent}
-        style={{
-          display: isPersistent ? 'none' : 'block'
-        }}
-      />
-      <Modal
-        aria-hidden={false}
-        keepMounted={true}
-        disablePortal={true}
-        open={isDrawerOpen}
-        onClose={toggleDrawer(false)}
-      >
-        <StyledDrawer
-          id='vertical-navigation'
-          anchor='left'
-          open={isDrawerOpen || isPersistent}
-          onClose={toggleDrawer(false)}
-          variant='permanent'
-        >
-          {listContent()}
-        </StyledDrawer>
-      </Modal>
-    </StyledAside>
-  )
-}
-
-export default VerticalNavigation

package/src/lib/components/navigation/VerticalNavigation/VerticalNavigationAvatar.tsx

@@ -1,208 +0,0 @@
-import React, { useEffect } from 'react'
-import {
-  Box, ButtonGroup, Button, Link,
-  List, ListItem, ListItemIcon, ListItemText
-} from '../../../index'
-import {
-  StyledBox, StyledBoxProfile,
-  StyledAvatarName, StyledAvatar, StyledOutlineButton,
-  StyledBoxProfileEdit, StyledListItemButton
-} from './VerticalNavigationAvatarStyles'
-import { useTheme } from '@mui/material/styles'
-import EditIcon from '@mui/icons-material/Edit'
-import LogoutIcon from '@mui/icons-material/Logout'
-import { handleAvatarInitials, useStaggerAnimation } from '../../../utils/helpers'
-import { Person, Settings } from '@mui/icons-material'
-import { IAvatarMenuItemProps, IAvatarPanelProps } from '../../../types'
-import { animated } from '@react-spring/web'
-
-const AvatarPanel = (
-  props: IAvatarPanelProps
-): React.ReactElement => {
-  const theme = useTheme()
-  const {
-    avatarName, avatarPanelOnClickLogout, avatarPanelLogoutString,
-    avatarPanelOnClickViewProfile, avatarPanelViewProfileString,
-    avatarPanelOnClickEditProfile, avatarPanelEditProfileString,
-    avatarPanelMenuItems, avatarPanelOnClickMainAction,
-    avatarPanelMainActionString, avatarPanelSettingItems,
-    avatarPanelFootnote, isAvatarOpen
-  } = props
-
-  useEffect(() => setAvatarInitials(handleAvatarInitials(avatarName)), [
-    avatarName
-  ])
-
-  const [avatarInitials, setAvatarInitials] = React.useState(
-    handleAvatarInitials(avatarName) ?? 'AN'
-  )
-
-  // First item starts at 70ms
-  // see STAGGER_ITEMS_DELAY in helpers.js
-  let animationCount = 1
-  const incrementAnimationCount = () => animationCount++
-
-  return (
-    <StyledBox>
-      {avatarPanelOnClickLogout && (
-        <Button
-          // @ts-expect-error
-          component={animated.button}
-          style={{
-            left: theme.direction === 'rtl' ? theme.spacing(1) : 'auto',
-            position: 'absolute',
-            right: theme.direction === 'rtl' ? 'auto' : theme.spacing(1),
-            top: theme.spacing(1),
-            ...useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)
-          }}
-          onClick={avatarPanelOnClickLogout}
-          startIcon={<LogoutIcon />}
-          variant='text'
-          color='inherit'
-        >
-          {avatarPanelLogoutString ?? 'Logout'}
-        </Button>
-      )}
-
-      <Box
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-      >
-        <StyledBoxProfile style={useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)}>
-          <StyledAvatar style={{ marginRight: '0.5rem' }}>
-            {avatarInitials}
-          </StyledAvatar>
-          <StyledAvatarName>
-            <span style={{ fontWeight: 300 }}>
-                Hi,</span> <strong>{avatarName.split(' ')[0]}
-            </strong>
-          </StyledAvatarName>
-        </StyledBoxProfile>
-
-        {avatarPanelOnClickViewProfile && (
-          <StyledBoxProfileEdit
-            style={{
-              flexDirection: 'row',
-              marginBottom: theme.spacing(2),
-              ...useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)
-            }}>
-            <ButtonGroup variant="contained" aria-label="split button">
-              <Button
-                variant='contained'
-                color='primary'
-                size='medium'
-                onClick={avatarPanelOnClickViewProfile}
-                startIcon={<Person />}
-              >{avatarPanelViewProfileString ?? 'View Profile'}</Button>
-              {avatarPanelOnClickEditProfile && (
-                <Button
-                  size='medium'
-                  aria-label={avatarPanelEditProfileString ?? 'Edit Profile'}
-                  onClick={avatarPanelOnClickEditProfile}
-                >
-                  <EditIcon />
-                </Button>
-              )}
-            </ButtonGroup>
-          </StyledBoxProfileEdit>
-        )}
-      </Box>
-
-      <Box
-        style={{
-          alignItems: 'center',
-          display: 'flex',
-          flexDirection: 'column'
-        }}
-      >
-        {avatarPanelMenuItems && avatarPanelMenuItems.length > 0 && (
-          <List style={{
-            marginBottom: theme.spacing(2),
-            maxWidth: '14rem'
-          }}>
-            {avatarPanelMenuItems.map((avatarMenuItem: IAvatarMenuItemProps) => (
-              <ListItem
-                component={animated.div}
-                style={useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)}
-                // whileHover={motionWhileHover}
-                // whileTap={motionWhileTap}
-                disablePadding
-              >
-                <StyledListItemButton
-                  // TODO: figure out if these are links or buttons
-                  // @ts-expect-error
-                  component={Link}
-                  role='link'
-                  onClick={avatarMenuItem.onClick}
-                >
-                  <ListItemIcon
-                    aria-hidden={true}
-                    style={{
-                      minWidth: theme.spacing(5)
-                    }}
-                  >
-                    {avatarMenuItem.icon}
-                  </ListItemIcon>
-                  <ListItemText primary={avatarMenuItem.label} />
-                </StyledListItemButton>
-              </ListItem>
-            ))}
-          </List>
-        )}
-
-        {avatarPanelOnClickMainAction && <StyledOutlineButton
-          // @ts-expect-error
-          component={animated.button}
-          style={useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)}
-          disablePadding
-          variant='outlined'
-          color='primary'
-          size='medium'
-          onClick={avatarPanelOnClickMainAction}
-          startIcon={<Settings />}
-        >{avatarPanelMainActionString}</StyledOutlineButton>}
-
-        <List style={{ marginBottom: theme.spacing(2) }}>
-          {avatarPanelSettingItems &&
-            avatarPanelSettingItems.length > 0 &&
-            avatarPanelSettingItems.map((avatarMenuItem: IAvatarMenuItemProps) => (
-              <ListItem
-                component={animated.div}
-                style={useStaggerAnimation(isAvatarOpen, animationCount, incrementAnimationCount)}
-                // whileHover={motionWhileHover}
-                // whileTap={motionWhileTap}
-                disablePadding
-              >
-                <StyledListItemButton
-                  // TODO: figure out if these are links or buttons
-                  // @ts-expect-error
-                  component={Link}
-                  role='link'
-                  onClick={avatarMenuItem.onClick}
-                >
-                  <ListItemIcon
-                    aria-hidden={true}
-                    style={{
-                      minWidth: theme.spacing(5)
-                    }}
-                  >
-                    {avatarMenuItem.icon}
-                  </ListItemIcon>
-                  <ListItemText primary={avatarMenuItem.label} />
-                </StyledListItemButton>
-              </ListItem>
-            ))}
-        </List>
-      </Box>
-
-      <Box className='avatar-panel-footnote'>
-        {avatarPanelFootnote && avatarPanelFootnote}
-      </Box>
-    </StyledBox>
-  )
-}
-
-export default AvatarPanel