@veracity/vui 2.28.0 → 2.29.0-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.28.0",
+  "version": "2.29.0-beta.0",
   "description": "Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.",
   "module": "./dist/esm/index.js",
   "main": "./dist/cjs/index.js",

package/src/menu/menu.types.ts

@@ -9,6 +9,8 @@ export type MenuListProps = ListProps & {
   contentProps?: PopoverContentProps
   /** Ref passed to the inner PopoverContent. */
   contentRef?: RefObject<HTMLDivElement>
+  /** Maximum height of the list. */
+  maxH?: number
   /** Custom content displayed at the bottom of the panel */
   slotBottom?: ReactNode
   /** Custom content displayed at the top of the panel */

package/src/menu/menuList.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { useStyleConfig, vui, VuiComponent } from '../core'
 import List from '../list'
@@ -10,8 +8,8 @@ import { MenuListProps } from './menu.types'
 
 /** Displays a list of menu items in a popover content element. */
 export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
-  const { className, contentProps, contentRef, ...rest } = props
-  const { slotTop, slotBottom } = props
+  const { className, contentProps, contentRef, maxH, slotTop, slotBottom, ...rest } = props
+
   const styles = useStyleConfig('Menu', useMenuContext())
 
   return (
@@ -26,7 +24,7 @@ export const MenuList = vui<'ul', MenuListProps>((props, ref) => {
           w="100%"
           {...styles.list}
           {...rest}
-          maxH={295}
+          maxH={maxH}
         />
         {slotBottom}
       </Box>

package/src/sidemenu/consts.ts

@@ -1 +1,3 @@
-export const expandedWidth = 64
+export const collapsedWidth = 64
+
+export const expandedWidth = 280

package/src/sidemenu/sidemenu.tsx

@@ -5,7 +5,7 @@ import Button from '../button'
 import { useStyleConfig, vui, VuiComponent } from '../core'
 import Icon from '../icon'
 import { cs, filterUndefined, isActivePath } from '../utils'
-import { expandedWidth } from './consts'
+import { collapsedWidth, expandedWidth } from './consts'
 import { SidemenuProvider } from './context'
 import { SidemenuItemProps, SidemenuProps } from './sidemenu.types'
 import SidemenuItem from './sidemenuItem'
@@ -21,7 +21,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
     isSticky = false,
     size,
     variant,
-    width = 280,
+    width = expandedWidth,
     onNavigate,
     ...rest
   } = props
@@ -42,7 +42,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
 
   const onToggle = () => setIsExpandedHorizontally(!isExpandedHorizontally)
 
-  const w = isExpandedHorizontally ? width : expandedWidth
+  const w = isExpandedHorizontally ? width : collapsedWidth
   const icon = `falArrow${isExpandedHorizontally ? 'Left' : 'Right'}`
   const justifyContent = isExpandedHorizontally ? 'flex-end' : 'center'
 
@@ -67,7 +67,14 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
         {...styles.container}
         {...rest}
       >
-        <Box flexDirection="column" flexGrow={1} overflowX="hidden" overflowY="auto" w="100%">
+        <Box
+          flexDirection="column"
+          flexGrow={1}
+          justifyContent="flex-start"
+          overflowX="hidden"
+          overflowY="auto"
+          w={expandedWidth - 14}
+        >
           {items
             ? items?.map?.((item: SidemenuItemProps, key: number) => (
                 <SidemenuItem

package/src/sidemenu/sidemenu.types.ts

@@ -26,7 +26,7 @@ export type SidemenuItemProps = BoxProps & {
   /** Children */
   children?: ReactNode
   /** Custom class name */
-  icon: IconProp
+  icon?: IconProp
   /** Icon size @default md  */
   iconSize?: 'md' | 'sm'
   /** Whether the item is active */

package/src/sidemenu/sidemenuItem.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEvent, useEffect } from 'react'
+import { MouseEvent, useEffect } from 'react'
 
 import Box from '../box'
 import Button from '../button'
@@ -7,6 +7,7 @@ import Icon from '../icon'
 import { Popover } from '../popover'
 import T from '../t'
 import { cs } from '../utils'
+import { collapsedWidth, expandedWidth } from './consts'
 import { SidemenuItemProps } from './sidemenu.types'
 import useSidemenuItem from './useSidemenuItem'
 
@@ -19,6 +20,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     iconSize = 'md',
     isActive,
     isExpanded = true,
+    pl = 0,
     onClick,
     onCollapse,
     onExpand,
@@ -38,8 +40,8 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
 
   const innerContent = (
     <Box centerV px={2} py={1} w="100%" whiteSpace="pre">
-      <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />
-      <T isTruncated ml={2}>
+      {!!icon && <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />}
+      <T isTruncated ml={icon ? 2 : 0} pl={isExpandedHorizontally ? 0 : 1}>
         {title}
       </T>
     </Box>
@@ -62,7 +64,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     h: 'auto',
     justifyContent: 'space-between',
     onClick: () => onClick?.(),
-    p: 0,
+    pl,
     size: 'md',
     variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
     w: '100%',
@@ -75,13 +77,13 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
   return (
     <Box flexDirection="column" ref={ref} w="100%">
       {!hasChildrenExpanded && children ? (
-        <Popover offset={[0, 0]} placement="right-start" trigger="mouseenter">
+        <Popover offset={[0, -expandedWidth + collapsedWidth + 9]} placement="right-start" trigger="mouseenter">
           <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
             <Box {...buttonStyles} borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>
               {innerContent}
             </Box>
           </Popover.Trigger>
-          <Popover.Content shadow="none">
+          <Popover.Content elevation="none">
             <Box flexDirection="column" justifyContent="start" w="100%">
               {children}
             </Box>

package/src/sidemenu/sidemenuTop.tsx

@@ -1,5 +1,3 @@
-import React from 'react'
-
 import { Box } from '../box'
 import { omitThemingProps, useStyleConfig } from '../core'
 import { cs } from '../utils'
@@ -17,7 +15,7 @@ export const SidemenuTop = (props: SidemenuTopProps) => {
   return (
     <Box className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...styles.sidemenuTop} {...rest}>
       {!!leftSlot && leftSlot}
-      {!!rightSlot && isExpandedHorizontally && rightSlot}
+      {!!rightSlot && rightSlot}
     </Box>
   )
 }