@learningpool/ui 1.6.0 → 1.6.1

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

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

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

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

@@ -0,0 +1,212 @@
+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'};
+  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;
+`