@learningpool/ui 1.6.3 → 1.6.6

package/src/lib/components/navigation/MobileNavigation/MobileNavigationDrawerStyles.tsx

@@ -1,143 +0,0 @@
-import {
-  Box, List, ListItem, ListItemText,
-  ListItemButton, Typography
-} from '../../../index'
-import { Drawer } from '@mui/material'
-import { styled } from '@mui/material/styles'
-import { animated } from '@react-spring/web'
-
-export const StyledSwipeableDrawer = styled(Drawer)`
-  .MuiPaper-root {
-    background-color: ${props => props.theme.palette.mode === 'dark'
-    ? '#003366'
-    : props.theme.palette.background.paper};
-    background-image: ${props => props.theme.palette.mode === 'dark'
-    ? 'none'
-    : 'radial-gradient( circle farthest-corner at 10% 20%, #fdfbfb 0.1%, #ebedee 99.8% )'};
-    height: 100vh;
-    border: none;
-    z-index: 1;
-  }
-`
-
-export const StyledBox = styled(Box)`
-  height: 100%;
-  overflow: auto;
-  padding-bottom: 6rem;
-`
-
-export const StyledDrawerLogo = styled(animated.div)`
-  background-color: transparent;
-  display: flex;
-  align-items: center;
-  margin: 1.5rem 0 2.5rem 1.5rem;
-
-  .MuiSvgIcon-root {
-    width: 2rem;
-    height: 2rem;
-  }
-`
-
-export const StyledDrawerLogoText = styled(Typography)`
-  font-size: 1.2rem;
-  margin-left: .5rem;
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.9)'
-    : '#555'};
-`
-
-export const StyledListItem = styled(ListItem)`
-  flex-direction: column;
-  align-items: flex-start;
-  margin: 0 1rem;
-  max-width: calc(100% - 2rem);
-
-  > .MuiListItemButton-root {
-    padding: .5rem 1.5rem;
-  }
-`
-
-export const StyledListItemButton = styled(ListItemButton)`
-  border-radius: 50px;
-`
-
-export const StyledListItemText = styled(ListItemText)`
-  > .MuiTypography-root {
-    font-size: 1.5rem;
-    font-weight: bold;
-    color: ${props => props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.85)'
-    : '#555'};
-    &:hover,
-    &:focus,
-    &:active {
-      color: ${props => props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.97)'
-    : '#333'};
-    }
-  }
-`
-
-export const StyledChildList = styled(List)`
-  display: flex;
-  flex-wrap: wrap;
-  margin: -.25rem 1rem 0 1.5rem;
-  padding: 0;
-
-`
-
-export const StyledChildListItem = styled(ListItem)`
-  display: flex;
-  align-items: center;
-  padding: 0;
-`
-
-export const StyledChildListItemText = styled(ListItemText)`
-  font-size: .9rem;
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.75)'
-    : '#666'};
-`
-
-export const StyledChildListItemButton = styled(ListItemButton)`
-  border-radius: 50px;
-  flex-grow: 0;
-`
-
-export const StyledListSecondaryList = styled(List)`
-  display: flex;
-  flex-wrap: wrap;
-  margin: 0 1rem;
-`
-
-export const StyledListSecondaryItem = styled(ListItem)`
-  flex: 1 0 50%;
-  display: flex;
-  align-items: center;
-`
-
-export const StyledListSecondaryButton = styled(ListItemButton)`
-  color: ${props => props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.8)'
-    : '#555'};
-  margin: 0.25rem 0.25rem 0.5rem;
-  padding: 0.3rem 1rem;
-  background: ${props => props.theme.palette.mode === 'dark'
-    ? 'rgba(255,255,255,.12)'
-    : 'rgba(255,255,255,.6)'};
-  border-radius: 50px;
-  box-shadow: ${props => props.theme.palette.mode === 'dark'
-    ? '0 6px 15px rgb(36 37 38 / 16%)'
-    : '0 6px 15px rgb(36 37 38 / 8%)'};
-`
-
-export const StyledDivider = styled('div')`
-  background-color: ${props => props.theme.palette.mode === 'dark'
-    ? 'rgba(62, 106, 179, .5)'
-    : 'rgba(0,0,0,.075)'};
-  width: 75%;
-  height: 3px;
-  border: none;
-  border-radius: 3px;
-  margin: 2rem auto;
-`

package/src/lib/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItem.tsx

@@ -1,192 +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 './MobileNavigationItemStyles'
-import { tooltipDelay } from '../../../../utils/theme'
-import MobileNavigationItemFlyoutMenu from './MobileNavigationItemFlyoutMenu'
-
-export interface IMobileNavigationItemProps {
-  label: string
-  icon: React.ReactElement
-  selectedIcon?: React.ReactElement
-  onClick?: any
-  isActive?: boolean
-  children?: IMobileNavigationItemProps[]
-  isDrawerOpen?: boolean
-  index?: number
-  isSecondary?: boolean
-  hasFlyout?: boolean
-  fullHeightFlyout?: boolean
-  content?: React.ReactElement
-  style?: any
-  open?: boolean
-}
-
-const MobileNavigationItem = (
-  props: IMobileNavigationItemProps
-): React.ReactElement => {
-  const theme = useTheme()
-  const {
-    label, icon, onClick, isActive, children, isDrawerOpen,
-    index, hasFlyout, fullHeightFlyout, isSecondary,
-    content, style, ...rest
-  } = props
-  const [isExpanded, setIsExpanded] = React.useState(false)
-  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)
-      return
-    }
-
-    if (children && children.length > 0) {
-      setIsExpanded(!isExpanded)
-      return
-    }
-
-    if (onClick) {
-      onClick(event)
-    }
-
-    setAnchorEl(null)
-  }
-
-  return (
-    <ListItem
-      disablePadding
-      style={style}
-      {...rest}
-      isDrawerOpen={isDrawerOpen}
-    >
-      <ListItemButton
-        // @ts-expect-error
-        component={Link}
-        key={label}
-        onClick={handleClick}
-        isActive={isActive}
-        isDrawerOpen={isDrawerOpen}
-        isExpanded={isExpanded}
-        open={open}
-        onMouseEnter={event => fullHeightFlyout
-          ? null
-          : handlePopoverOpen(event)}
-        onMouseLeave={() => fullHeightFlyout
-          ? null
-          : handlePopoverClose()}
-        onFocus={event => fullHeightFlyout
-          ? null
-          : handlePopoverOpen(event)}
-        onBlur={() => fullHeightFlyout
-          ? null
-          : handlePopoverClose()}
-        aria-expanded={(children && children.length > 0) ? open : null}
-        aria-haspopup={(children && children.length > 0) ? 'true' : null}
-        aria-current={isActive ? 'page' : null}
-        role={(children && children.length > 0) ? '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 && (
-          <Collapse component='div' in={isDrawerOpen ? isExpanded : false} timeout="auto">
-            <List
-              aria-label={label}
-              disablePadding
-            >
-              {children.map((childItem, index) => (
-                <ListItem
-                  disablePadding
-                  isDrawerOpen={isDrawerOpen}
-                >
-                  <ListItemButtonChild
-                    // @ts-expect-error
-                    component={Link}
-                    key={label}
-                    index={index}
-                    isDrawerOpen={isDrawerOpen}
-                  >
-                    <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>
-        )}
-      </ListItemButton>
-
-      {!fullHeightFlyout && children && children.length > 0 && (!isExpanded || !isDrawerOpen) && (
-        <MobileNavigationItemFlyoutMenu
-          isDrawerOpen={isDrawerOpen}
-          anchorEl={anchorEl}
-          open={open}
-          children={children}
-          label={label}
-        />
-      )}
-
-      {fullHeightFlyout && content && (
-        <MobileNavigationItemFlyoutMenu
-          isDrawerOpen={isDrawerOpen}
-          fullHeightFlyout
-          anchorEl={anchorEl}
-          open={open}
-          content={content}
-        />
-      )}
-    </ListItem>
-  )
-}
-
-export default MobileNavigationItem

package/src/lib/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenu.tsx

@@ -1,67 +0,0 @@
-import React from 'react'
-import { Link, ListItemText } from '../../../../index'
-import { IMobileNavigationItemProps } from './MobileNavigationItem'
-import {
-  FlyoutMenuPaper,
-  FlyoutMenuWrap,
-  FlyoutMenuList,
-  FlyoutMenuButton,
-  FlyoutMenuItem
-} from './MobileNavigationItemFlyoutMenuStyles'
-export interface IMobileNavigationItemFlyoutMenuProps {
-  label?: string
-  children?: IMobileNavigationItemProps[]
-  isDrawerOpen?: boolean
-  hasFlyout?: boolean
-  content?: React.ReactElement
-  style?: any
-
-  fullHeightFlyout?: boolean
-  anchorEl?: null | HTMLElement
-  open?: boolean
-}
-
-const MobileNavigationItemFlyoutMenu = (
-  props: IMobileNavigationItemFlyoutMenuProps
-): React.ReactElement => {
-  const {
-    label, children, isDrawerOpen, anchorEl
-  } = props
-  const [flyoutHovered, setFlyoutHovered] = React.useState(false)
-  const open = flyoutHovered || props?.open
-
-  return (
-    <FlyoutMenuPaper
-      isDrawerOpen={isDrawerOpen}
-      open={open}
-      anchorEl={anchorEl ?? undefined}
-      onMouseEnter={() => setFlyoutHovered(true)}
-      onMouseLeave={() => setFlyoutHovered(false)}
-      onFocus={() => setFlyoutHovered(true)}
-      onBlur={() => setFlyoutHovered(false)}
-    >
-      <FlyoutMenuWrap open={open}>
-        <FlyoutMenuList
-          aria-label={label}
-          open={open}
-        >
-          {children?.map(childItem => (
-            <FlyoutMenuItem>
-              <FlyoutMenuButton
-                // @ts-expect-error
-                component={Link}
-                key={childItem.label}
-                onClick={childItem.onClick}
-                role='link'
-              >
-                <ListItemText primary={childItem.label} />
-              </FlyoutMenuButton>
-            </FlyoutMenuItem>
-          ))}
-        </FlyoutMenuList>
-      </FlyoutMenuWrap>
-    </FlyoutMenuPaper>
-  )
-}
-
-export default MobileNavigationItemFlyoutMenu

package/src/lib/components/navigation/MobileNavigation/MobileNavigationItem/MobileNavigationItemFlyoutMenuStyles.tsx

@@ -1,192 +0,0 @@
-import {
-  List, ListItem, ListItemButton as SSListItemButton,
-  Paper, Typography
-} from '../../../../index'
-import { styled } from '@mui/material/styles'
-import { motion } from '../../../../utils/theme'
-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 250ms ${motion.easeInOut}`
-    : `all 150ms ${motion.easeOut}`};
-`
-
-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 225ms ${motion.easeInOut} 0;
-  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 180ms ${motion.easeInOut};
-    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;
-  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 150ms ${motion.easeInOut}` : `all 100ms ${motion.easeOut}`};
-  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;
-`