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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.29.0-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/sidemenu.tsx

@@ -79,6 +79,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             ? 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

@@ -33,6 +33,8 @@ export type SidemenuItemProps = BoxProps & {
   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

@@ -20,7 +20,9 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     iconSize = 'md',
     isActive,
     isExpanded = true,
+    isTitleVisible = true,
     pl = 0,
+    py = 0,
     onClick,
     onCollapse,
     onExpand,
@@ -38,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 && <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />}
-      <T isTruncated ml={icon ? 2 : 0} pl={isExpandedHorizontally ? 0 : 1}>
+      {icon && <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />}
+      <T isTruncated ml={icon ? 2 : 0} visibility={isTitleVisible ? 'visible' : 'hidden'}>
         {title}
       </T>
     </Box>
@@ -65,6 +67,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     justifyContent: 'space-between',
     onClick: () => onClick?.(),
     pl,
+    py,
     size: 'md',
     variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
     w: '100%',
@@ -80,7 +83,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
         <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 elevation="none">
@@ -91,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'}