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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veracity/vui",
-  "version": "2.29.0-beta.0",
+  "version": "2.29.0-beta.2",
   "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,3 +1,3 @@
-export const collapsedWidth = 64
+export const collapsedWidth = 52
 
-export const expandedWidth = 280
+export const expandedWidth = 240

package/src/sidemenu/sidemenu.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useMemo, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 
 import Box from '../box'
 import Button from '../button'
@@ -71,9 +71,10 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
           flexDirection="column"
           flexGrow={1}
           justifyContent="flex-start"
+          minW={expandedWidth}
           overflowX="hidden"
           overflowY="auto"
-          w={expandedWidth - 14}
+          w="100%"
         >
           {items
             ? items?.map?.((item: SidemenuItemProps, key: number) => (
@@ -93,6 +94,7 @@ export const Sidemenu = vui<'div', SidemenuProps>((props, ref) => {
             justifyContent={justifyContent}
             minH={size === 'lg' ? '56px' : '40px'}
             onClick={onToggle}
+            pl={0}
             size="md"
             variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}
             w="100%"

package/src/sidemenu/sidemenuItem.tsx

@@ -21,6 +21,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     isActive,
     isExpanded = true,
     pl = 0,
+    py = 0,
     onClick,
     onCollapse,
     onExpand,
@@ -38,10 +39,10 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
 
   const hasChildrenExpanded = !!children && isExpandedHorizontally
 
-  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}>
+  const InnerContent = () => (
+    <Box centerV px={1.5} py={1} w="100%" whiteSpace="pre">
+      {icon && <Icon ml={iconSize === 'sm' ? '4px' : 0} name={icon} size={iconSize} />}
+      <T isTruncated ml={icon ? 2 : 0}>
         {title}
       </T>
     </Box>
@@ -65,6 +66,7 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
     justifyContent: 'space-between',
     onClick: () => onClick?.(),
     pl,
+    py,
     size: 'md',
     variant: isDark ? 'tertiaryLight' : 'tertiaryDark',
     w: '100%',
@@ -77,10 +79,10 @@ export const SidemenuItem = vui<'button', SidemenuItemProps>((props, ref) => {
   return (
     <Box flexDirection="column" ref={ref} w="100%">
       {!hasChildrenExpanded && children ? (
-        <Popover offset={[0, -expandedWidth + collapsedWidth + 9]} placement="right-start" trigger="mouseenter">
+        <Popover offset={[0, collapsedWidth - expandedWidth - 2]} 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,13 +93,12 @@ 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'}
               className="vui-sidemenu-item-expand"
               icon={isExpandedVertically ? 'falChevronUp' : 'falChevronDown'}
-              mr={1}
               onClick={toggle}
               size="sm"
               variant={isDark ? 'tertiaryLight' : 'tertiaryDark'}

package/src/sidemenu/sidemenuTop.tsx

@@ -1,21 +1,24 @@
 import { Box } from '../box'
 import { omitThemingProps, useStyleConfig } from '../core'
 import { cs } from '../utils'
-import { useSidemenuContext } from './context'
+import { collapsedWidth } from './consts'
 import { SidemenuTopProps } from './sidemenu.types'
 
 /** Top container. */
 export const SidemenuTop = (props: SidemenuTopProps) => {
   const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)
   const styles = useStyleConfig('Sidemenu', props)
-  const { isExpandedHorizontally } = useSidemenuContext()
 
   if (!leftSlot && !rightSlot) return null
 
   return (
     <Box className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...styles.sidemenuTop} {...rest}>
-      {!!leftSlot && leftSlot}
-      {!!rightSlot && rightSlot}
+      {!!leftSlot && (
+        <Box alignItems="center" className="vui-sidemenu-top-left" minW={collapsedWidth}>
+          {leftSlot}
+        </Box>
+      )}
+      {!!rightSlot && <Box className="vui-sidemenu-top-left">{rightSlot}</Box>}
     </Box>
   )
 }