@veracity/vui 2.28.1-beta.0 → 2.29.0-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.28.1-beta.0",
+  "version": "2.29.0-beta.1",
   "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/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,11 +67,19 @@ 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
                   isActive={isActivePath(item?.path)}
+                  isTitleVisible={isExpandedHorizontally}
                   key={key}
                   {...item}
                   onClick={() => onItemClick(item)}

package/src/sidemenu/sidemenu.types.ts

@@ -26,13 +26,15 @@ 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 */
   isActive?: boolean
   /** Whether the item is expanded vertically */
   isExpanded?: boolean
+  /** Whether the title is visible, should be hidden if the parent is collapsed @default true*/
+  isTitleVisible?: boolean
   /** On click callback */
   onClick?: () => void
   /** On collapse callback @default true */

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,9 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     iconSize = 'md',
     isActive,
     isExpanded = true,
+    isTitleVisible = true,
+    pl = 0,
+    py = 0,
     onClick,
     onCollapse,
     onExpand,
@@ -36,10 +40,10 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
 
   const hasChildrenExpanded = !!children && isExpandedHorizontally
 
-  const innerContent = (
+  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} visibility={isTitleVisible ? 'visible' : 'hidden'}>
         {title}
       </T>
     </Box>
@@ -62,7 +66,8 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     h: 'auto',
     justifyContent: 'space-between',
     onClick: () => onClick?.(),
-    p: 0,
+    pl,
+    py,
     size: 'md',
     variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
     w: '100%',
@@ -75,13 +80,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}
+              <InnerContent />
             </Box>
           </Popover.Trigger>
-          <Popover.Content shadow="none">
+          <Popover.Content elevation="none">
             <Box flexDirection="column" justifyContent="start" w="100%">
               {children}
             </Box>
@@ -89,7 +94,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
         </Popover>
       ) : (
         <Button className={cs('vui-sidemenu-item', className)} {...buttonStyles}>
-          {innerContent}
+          <InnerContent />
           {hasChildrenExpanded && (
             <Button
               aria-label={isExpandedVertically ? 'Collapse' : 'Expand'}

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>
   )
 }