@learningpool/ui 1.6.3 → 1.6.6

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

@@ -1,75 +0,0 @@
-import {
-  Avatar, Button,
-  ListItemButton, Typography
-} from '../../../index'
-import { Drawer } from '@mui/material'
-import { styled } from '@mui/material/styles'
-import { animated } from '@react-spring/web'
-
-export const StyledSwipeableAvatar = styled(Drawer)`
-  .MuiPaper-root {
-    color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary};
-    height: 100vh;
-    border: none;
-    z-index: 1;
-  }
-`
-
-export const StyledBox = styled(animated.div)`
-  align-items: center;
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.dark
-    : '#E6EAF0'};
-  display: flex;
-  flex-direction: column;
-  font-family: ${props => props.theme.typography.fontFamily};
-  height: 100%;
-  justify-content: flex-start;
-  overflow: auto;
-  padding: 15vh ${props => props.theme.spacing(2)};
-  position: relative;
-`
-
-export const StyledBoxProfile = styled(animated.div)`
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  margin-bottom: 2rem;
-`
-
-export const StyledBoxProfileEdit = styled(animated.div)`
-  display: flex;
-`
-
-export const StyledAvatarName = styled(Typography)`
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.text.primary};
-  font-size: 1.75rem;
-`
-
-export const StyledOutlineButton = styled(Button)`
-  border-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main};
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main};
-`
-
-export const StyledAvatar = styled(Avatar)`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.primary.main};
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.primary.contrastText};
-  font-size: 0.85rem;
-`
-
-export const StyledListItemButton = styled(ListItemButton)`
-  border-radius: 50px;
-  white-space: normal;
-`

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

@@ -1,196 +0,0 @@
-import React from 'react'
-import { useTheme } from '@mui/material/styles'
-import {
-  Link, List, Tooltip, Collapse
-} from '../../../../index'
-import MailIcon from '@mui/icons-material/Mail'
-import {
-  ListItem, ListItemButton, ListItemButtonChild,
-  ListItemIcon, ListItemText
-} from './VerticalNavigationItemStyles'
-import { tooltipDelay } from '../../../../utils/theme'
-import VerticalNavigationItemFlyoutMenu from './VerticalNavigationItemFlyoutMenu'
-import { IVerticalNavigationItemProps } from '../../../../types'
-import { animated } from '@react-spring/web'
-
-const VerticalNavigationItem = (
-  props: IVerticalNavigationItemProps
-): React.ReactElement => {
-  const theme = useTheme()
-  const {
-    label, icon, onClick, isActive, children, isDrawerOpen,
-    index, hasFlyout, fullHeightFlyout, isSecondary,
-    content, style, hasCustomContent, ...rest
-  } = props
-  const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null)
-  const open = Boolean(anchorEl)
-  const handlePopoverOpen = (event: (React.MouseEvent<HTMLElement> | any)): void => {
-    if (open) {
-      handlePopoverClose()
-      return
-    }
-
-    setAnchorEl(event?.currentTarget)
-  }
-
-  const handlePopoverClose = (): void => {
-    setAnchorEl(null)
-  }
-
-  const handleClick = (event: (React.MouseEvent<HTMLElement> | any)): void => {
-    if (fullHeightFlyout) {
-      handlePopoverOpen(event)
-      onClick && onClick(event)
-      return
-    }
-
-    if (onClick) {
-      onClick(event)
-    }
-
-    setAnchorEl(null)
-  }
-
-  const handleChildItemClick = (event: (React.MouseEvent<HTMLElement> | any), item: IVerticalNavigationItemProps): void => {
-    if (!event) {
-      return
-    }
-
-    event.preventDefault()
-
-    if (item.onClick) {
-      item.onClick(event)
-    }
-  }
-
-  return (
-    <ListItem
-      disablePadding
-      // @ts-expect-error
-      component={animated.li}
-      style={style}
-      {...rest}
-      isDrawerOpen={isDrawerOpen}
-    >
-      <ListItemButton
-        // @ts-expect-error
-        component={Link}
-        key={label}
-        onClick={handleClick}
-        isActive={isActive}
-        isDrawerOpen={isDrawerOpen}
-        open={open}
-        onMouseEnter={event => (fullHeightFlyout || isDrawerOpen)
-          ? null
-          : handlePopoverOpen(event)}
-        onMouseLeave={() => (fullHeightFlyout || isDrawerOpen)
-          ? null
-          : handlePopoverClose()}
-        onFocus={event => (fullHeightFlyout || isDrawerOpen)
-          ? null
-          : handlePopoverOpen(event)}
-        onBlur={() => (fullHeightFlyout || isDrawerOpen)
-          ? null
-          : handlePopoverClose()}
-        aria-expanded={fullHeightFlyout ? open : null}
-        // aria-haspopup={(children && children.length > 0) ? 'true' : null}
-        aria-current={isActive ? 'page' : null}
-        role={(children && children.length > 0) || fullHeightFlyout ? 'button' : 'link'}
-      >
-        <Tooltip
-          disableHoverListener={(children && children.length > 0) ?? isDrawerOpen}
-          disableFocusListener={(children && children.length > 0) ?? isDrawerOpen}
-          disableTouchListener={(children && children.length > 0) ?? isDrawerOpen}
-          title={label}
-          placement={theme.direction === 'rtl' ? 'left' : 'right'}
-          enterDelay={tooltipDelay.start}
-          leaveDelay={tooltipDelay.end}
-        >
-          <ListItemIcon aria-hidden={true}>
-            {icon ?? <MailIcon />}
-          </ListItemIcon>
-        </Tooltip>
-        <ListItemText
-          primary={label}
-          isDrawerOpen={isDrawerOpen}
-          index={index}
-          sx={{
-            '& .MuiTypography-root': {
-              fontSize: isSecondary ? '14px' : 'inherit'
-            }
-          }}
-        />
-        {/* {children && children.length > 0
-          ? isExpanded
-            ? <StyledExpandLess isDrawerOpen={isDrawerOpen} />
-            : <StyledExpandMore isDrawerOpen={isDrawerOpen} />
-          : null
-        } */}
-      </ListItemButton>
-
-      {children && children.length > 0 && (
-        <Collapse component='div' in={isDrawerOpen}>
-          <List
-            aria-label={label}
-            disablePadding
-          >
-            {children.map((childItem, index) => (
-              <ListItem
-                disablePadding
-                isDrawerOpen={isDrawerOpen}
-              >
-                <ListItemButtonChild
-                  // @ts-expect-error
-                  component={Link}
-                  role='link'
-                  key={label}
-                  index={index}
-                  isDrawerOpen={isDrawerOpen}
-                  onClick={event => handleChildItemClick(event, childItem)}
-                >
-                  <ListItemIcon>{childItem.icon}</ListItemIcon>
-                  <ListItemText
-                    primary={childItem.label}
-                    isDrawerOpen={isDrawerOpen}
-                    sx={{
-                      '& .MuiTypography-root': {
-                        fontSize: '14px !important',
-                        color: theme.palette.mode === 'dark'
-                          ? theme.palette.primary.contrastText
-                          : theme.palette.getContrastText(theme.palette.background.paper)
-                      }
-                    }}
-                  />
-                </ListItemButtonChild>
-              </ListItem>
-            ))}
-          </List>
-        </Collapse>
-      )}
-
-      {hasCustomContent && content}
-
-      {!fullHeightFlyout && children && children.length > 0 && !isDrawerOpen && (
-        <VerticalNavigationItemFlyoutMenu
-          isDrawerOpen={isDrawerOpen}
-          anchorEl={anchorEl}
-          open={open}
-          children={children}
-          label={label}
-        />
-      )}
-
-      {fullHeightFlyout && content && (
-        <VerticalNavigationItemFlyoutMenu
-          isDrawerOpen={isDrawerOpen}
-          fullHeightFlyout
-          anchorEl={anchorEl}
-          open={open}
-          content={content}
-        />
-      )}
-    </ListItem>
-  )
-}
-
-export default VerticalNavigationItem

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

@@ -1,94 +0,0 @@
-import React from 'react'
-import { Link, ListItemText } from '../../../../index'
-import { IVerticalNavigationItemProps } from '../../../../types'
-import {
-  FullHeightFlyoutMenuPaper,
-  FullHeightFlyoutMenuWrapper,
-  FlyoutNotchMask,
-  NotchMini,
-  FlyoutMenuHeader,
-  FlyoutMenuPaper,
-  FlyoutMenuWrap,
-  FlyoutMenuList,
-  FlyoutMenuButton,
-  FlyoutMenuItem
-} from './VerticalNavigationItemFlyoutMenuStyles'
-export interface IVerticalNavigationItemFlyoutMenuProps {
-  label?: string
-  children?: IVerticalNavigationItemProps[]
-  isDrawerOpen?: boolean
-  hasFlyout?: boolean
-  content?: React.ReactElement
-  style?: any
-
-  fullHeightFlyout?: boolean
-  anchorEl?: null | HTMLElement
-  open?: boolean
-}
-
-const VerticalNavigationItemFlyoutMenu = (
-  props: IVerticalNavigationItemFlyoutMenuProps
-): React.ReactElement => {
-  const {
-    label, children, isDrawerOpen,
-    fullHeightFlyout,
-    content, anchorEl
-  } = props
-  const [flyoutHovered, setFlyoutHovered] = React.useState(false)
-  const open = flyoutHovered || props?.open
-
-  if (fullHeightFlyout && content) {
-    return (
-      <FullHeightFlyoutMenuPaper
-        isDrawerOpen={isDrawerOpen}
-        open={open}
-        id="avatar-panel"
-      >
-        <FullHeightFlyoutMenuWrapper open={open}>
-          <FlyoutNotchMask />
-          <NotchMini tabIndex={-1} style={{ bottom: '24px' }} />
-          {content}
-        </FullHeightFlyoutMenuWrapper>
-      </FullHeightFlyoutMenuPaper>
-    )
-  }
-
-  return (
-    <FlyoutMenuPaper
-      isDrawerOpen={isDrawerOpen}
-      open={open}
-      anchorEl={anchorEl ?? undefined}
-      onMouseEnter={() => setFlyoutHovered(true)}
-      onMouseLeave={() => setFlyoutHovered(false)}
-      onFocus={() => setFlyoutHovered(true)}
-      onBlur={() => setFlyoutHovered(false)}
-    >
-      <FlyoutMenuWrap open={open}>
-        <NotchMini style={{ top: '12px' }} />
-        <FlyoutMenuHeader>
-          {label}
-        </FlyoutMenuHeader>
-        <FlyoutMenuList
-          aria-label={label}
-          open={open}
-        >
-          {children?.map(childItem => (
-            <FlyoutMenuItem>
-              <FlyoutMenuButton
-                // @ts-expect-error
-                component={Link}
-                role='link'
-                key={childItem.label}
-                onClick={childItem.onClick}
-              >
-                <ListItemText primary={childItem.label} />
-              </FlyoutMenuButton>
-            </FlyoutMenuItem>
-          ))}
-        </FlyoutMenuList>
-      </FlyoutMenuWrap>
-    </FlyoutMenuPaper>
-  )
-}
-
-export default VerticalNavigationItemFlyoutMenu

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

@@ -1,212 +0,0 @@
-import {
-  List, ListItem, ListItemButton as SSListItemButton,
-  Paper, Typography
-} from '../../../../index'
-import { styled } from '@mui/material/styles'
-import { NotchMiniSVG } from '../../../../assets/Images'
-
-export const DRAWER_WIDTH = {
-  Collapsed: 60,
-  Expanded: 300
-}
-
-export const FlyoutMenuPaper = styled(Paper, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'open' && prop !== 'anchorEl'
-})<{
-  anchorEl: HTMLElement | undefined
-  isDrawerOpen?: boolean
-  open?: boolean
-}>`
-  background: transparent none;
-  box-shadow: none;
-  left: ${props => props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px`};
-  perspective: 800px;
-  pointer-events: ${props => props.open ? 'auto' : 'none'};
-  position: fixed;
-  /* Check against height of browser should be top or bottom positioned */
-  top: ${props => props.anchorEl
-    ? `${props.anchorEl.getBoundingClientRect().top}px`
-    : 'auto'};
-  min-width: 200px;
-  z-index: 2;
-`
-
-export const FlyoutMenuWrap = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'open'
-})<{ open?: boolean }>`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.dark
-    : '#E6EAF0'};
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  border-radius: 0 8px 8px 0;
-  box-shadow: 5px 7px 8px -10px rgb(0 0 0 / 20%), 5px 12px 17px -10px rgb(0 0 0 / 14%), 5px 5px 22px -10px rgb(0 0 0 / 12%);
-  opacity: ${props => props.open ? 1 : 0};
-  visibility: ${props => props.open ? 'visible' : 'hidden'};
-  transform: ${props => props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(15deg) scale(.97)'};
-  transform-origin: left center;
-  transition: ${props => props.open
-    ? `all
-      ${props.theme.transitions.duration.enteringScreen}ms
-      ${props.theme.transitions.easing.easeOut}`
-    : `all
-      ${props.theme.transitions.duration.leavingScreen}ms
-      ${props.theme.transitions.easing.easeIn}`};
-`
-
-export const FlyoutMenuList = styled(List, {
-  shouldForwardProp: (prop) => prop !== 'open'
-})<{ open?: boolean }>`
-  padding: ${props => props.theme.spacing(1, 2)};
-  pointer-events: ${props => props.open ? 'auto' : 'none'};
-`
-
-export const FlyoutMenuHeader = styled(Typography)`
-  font-weight: bold;
-  padding: 12px ${props => props.theme.spacing(2)} 0 ${props => props.theme.spacing(3)};
-`
-
-export const FlyoutMenuItem = styled(ListItem)`
-  font-size: 14px;
-  padding: 0;
-  white-space: normal;
-  background: transparent !important;
-`
-
-export const FlyoutMenuButton = styled(SSListItemButton, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'isExpanded'
-})<{
-  isDrawerOpen?: boolean
-  isExpanded?: boolean
-}>`
-  align-items: flex-start;
-  background-color: transparent;
-  color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.contrastText
-      : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  border-radius: 5px;
-  display: flex;
-  flex-wrap: wrap;
-  text-decoration: none;
-  text-transform: none;
-  transition: all
-              ${props => props.theme.transitions.duration.enteringScreen}ms
-              ${props => props.theme.transitions.easing.easeOut};
-  padding: ${props => props.theme.spacing(1, 2)};
-  width: 100%;
-
-  /* Indicator */
-  :before {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? 'rgba(255, 255, 255, 0.5)'
-      : props.theme.palette.primary.main};
-    border-radius: 50px;
-    content: '';
-    height: calc(100% - 10px);
-    opacity: 0;
-    position: absolute;
-    top: 5px;
-    left: 5px;
-    transition: all
-                ${props => props.theme.transitions.duration.enteringScreen}ms
-                ${props => props.theme.transitions.easing.easeOut};
-    width: 4px;
-    transform: scale(.95);
-  }
-
-  :hover:before,
-  :focus:before {
-    opacity: 1;
-    transform: scale(1);
-  }
-
-  :hover {
-    background-color: rgba(0, 0, 0, .05);
-  }
-
-  :focus {
-    background-color: ${props =>
-    props.theme.palette.mode === 'dark'
-      ? props.theme.palette.primary.dark
-      : '#E6EAF0'};
-  }
-`
-
-// FullHeight
-export const FullHeightFlyoutMenuPaper = styled(Paper, {
-  shouldForwardProp: (prop) => prop !== 'isDrawerOpen' && prop !== 'open'
-})<{
-  isDrawerOpen?: boolean
-  open?: boolean
-}>`
-  background: transparent none;
-  box-shadow: none;
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.contrastText
-    : props.theme.palette.getContrastText(props.theme.palette.background.paper)};
-  height: 100%;
-  left: ${props => props.isDrawerOpen ? `${DRAWER_WIDTH.Expanded}px` : `${DRAWER_WIDTH.Collapsed - 3}px`};
-  perspective: 800px;
-  pointer-events: ${props => props.open ? 'auto' : 'none'};
-  position: fixed;
-  top: 0;
-  transition: ${props => props.open
-    ? `all
-      ${props.theme.transitions.duration.enteringScreen}ms
-      ${props.theme.transitions.easing.easeOut}`
-    : `all
-      ${props.theme.transitions.duration.leavingScreen}ms
-      ${props.theme.transitions.easing.easeIn}`};
-  z-index: 1;
-`
-
-export const FullHeightFlyoutMenuWrapper = styled('div', {
-  shouldForwardProp: (prop) => prop !== 'open'
-})<{ open?: boolean }>`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.main
-    : props.theme.palette.background.paper};
-  box-shadow: 35px 0 15px 0 rgb(0 0 0 / 10%);
-  height: 100%;
-  max-width: 300px;
-  min-width: 300px;
-  opacity: ${props => props.open ? 1 : 0};
-  pointer-events: ${props => props.open ? 'auto' : 'none'};
-  transform: ${props => props.open ? 'rotateY(0deg) scale(1)' : 'rotateY(8deg) scale(.98)'};
-  transform-origin: left center;
-  transition: ${props => props.open
-    ? `all
-      ${props.theme.transitions.duration.enteringScreen}ms
-      ${props.theme.transitions.easing.easeOut}`
-    : `all
-      ${props.theme.transitions.duration.leavingScreen}ms
-      ${props.theme.transitions.easing.easeIn}`};
-  visibility: ${props => props.open ? 'visible' : 'hidden'};
-  width: ${props => props.open ? '300' : 0};
-`
-
-export const FlyoutNotchMask = styled('div')`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.dark
-    : '#E6EAF0'};
-  content: '';
-  display: block;
-  height: 80px;
-  left: -40px;
-  position: absolute;
-  top: 65px;
-  width: 80px;
-  z-index: -1;
-`
-
-export const NotchMini = styled(NotchMiniSVG)`
-  fill: ${props => props.theme.palette.mode === 'dark'
-    ? props.theme.palette.primary.dark
-    : '#E6EAF0'};
-  left: -12px;
-  pointer-events: none;
-  position: absolute;
-`