@veracity/vui 2.31.0 → 2.33.0

package/src/sidemenuV2/sidemenuItemV2.tsx

@@ -1,93 +1,19 @@
 import type { MouseEvent } from 'react'
-import { useEffect, useMemo, useCallback, memo } from 'react'
+import { useEffect, useMemo, useCallback } from 'react'
 
-import Badge from '../badge'
-import type { BadgeProps } from '../badge/badge.types'
 import Box from '../box'
 import Button from '../button'
 import type { VuiComponent } from '../core'
 import { omitThemingProps, styled, th, vui } from '../core'
-import Icon from '../icon'
-import type { IconProp } from '../icon'
 import Popover from '../popover'
-import T from '../t'
+import { colors } from '../theme'
+import Tooltip from '../tooltip'
 import { cs, generateMenuItemId } from '../utils'
 import { collapsedWidth, expandedWidth } from './consts'
+import SidemenuItemContent from './SidemenuItemContent'
 import type { SidemenuItemV2Props } from './sidemenuV2.types'
 import useSidemenuItem from './useSidemenuItem'
 
-// Internal component for sidemenu item content
-interface SidemenuItemContentProps {
-  icon?: IconProp
-  iconSize?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
-  title: string
-  isMenuExpanded?: boolean
-  isInPopover?: boolean
-  badge?: Pick<BadgeProps, 'text' | 'variant'>
-  badgeLinkUrl?: string
-}
-
-const SidemenuItemContent = memo<SidemenuItemContentProps>(
-  ({ icon, iconSize = 'sm', title, isMenuExpanded, isInPopover, badge, badgeLinkUrl }) => {
-    // Calculate dynamic margins based on menu state
-    const iconBaseMarginLeft = 13 / 8 // 1.625rem (13px)
-    const iconMarginRight = isMenuExpanded
-      ? 10 / 8 // 1.25rem (10px) when expanded
-      : 20 / 8 // 2.5rem (20px) when collapsed
-
-    if (isInPopover)
-      return (
-        <>
-          <T isTruncated size="sm" display="inline-block" fontWeight="500" ml={iconBaseMarginLeft}>
-            {title}
-          </T>
-          {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
-            <Badge
-              {...badge}
-              data-link={btoa(badgeLinkUrl ?? '#')}
-              variant={badge.variant ?? 'subtleGreen'}
-              size="sm"
-              minW="32px"
-              fontSize="12px"
-              lineHeight="16px"
-              ml="10px"
-              mr="10px"
-            />
-          )}
-        </>
-      )
-
-    return (
-      <>
-        {/* Icon container with responsive margins */}
-        <Box ml={iconBaseMarginLeft} mr={iconMarginRight} w="20px" transition="margin 0.2s ease-in-out">
-          {icon && <Icon name={icon} size={iconSize} />}
-        </Box>
-
-        {/* Menu item title and badge */}
-        <T isTruncated size="sm" display="inline-block">
-          {title}
-        </T>
-        {badge && typeof badge === 'object' && typeof badge.text === 'string' && badge.text.trim() !== '' && (
-          <Badge
-            {...badge}
-            data-link={btoa(badgeLinkUrl ?? '#')}
-            variant={badge.variant ?? 'subtleGreen'}
-            size="sm"
-            minW="32px"
-            fontSize="12px"
-            lineHeight="16px"
-            ml="10px"
-            mr="10px"
-          />
-        )}
-      </>
-    )
-  },
-)
-
-SidemenuItemContent.displayName = 'SidemenuItemContent'
-
 export const PopoverHovered = styled.div<{ hoverColor: string }>`
   &:hover .vui-sidemenu-item-popover .vui-button.vui-button {
     background: ${p => th.color(p.hoverColor)};
@@ -97,6 +23,63 @@ export const PopoverHovered = styled.div<{ hoverColor: string }>`
   }
 `
 
+// SidemenuPopover component extracted from inline Popover logic
+const SidemenuPopover = ({
+  isDark,
+  className,
+  buttonStyles,
+  isExactlyActive,
+  icon,
+  title,
+  isMenuExpanded,
+  children,
+}: {
+  isDark: boolean
+  className?: string
+  buttonStyles: any
+  isExactlyActive: boolean
+  icon?: any
+  title: string
+  isMenuExpanded: boolean
+  children: React.ReactNode
+}) => (
+  <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement="right-start" trigger="mouseenter">
+    {({ isOpen }: { isOpen: boolean }) => (
+      <PopoverHovered hoverColor={isDark ? colors.seaBlue.main : colors.skyBlue.selected}>
+        <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
+          <Button
+            {...buttonStyles}
+            borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}
+            isActive={isExactlyActive}
+            className={cs('focusAsBorder')}
+          >
+            <SidemenuItemContent
+              icon={icon}
+              iconSize={buttonStyles.iconSize}
+              title={title}
+              isMenuExpanded={isMenuExpanded}
+            />
+          </Button>
+        </Popover.Trigger>
+        <Popover.Content elevation="none" className={cs('vui-sidemenu-item-content', className)}>
+          <Box flexDirection="column" justifyContent="start" w="100%">
+            <Button
+              {...buttonStyles}
+              borderLeftColor={'transparent!important'}
+              minW={'240px'}
+              isActive={isOpen && isExactlyActive}
+              className={cs('focusAsBorder')}
+            >
+              <SidemenuItemContent title={title} isInPopover={true} />
+            </Button>
+            {children}
+          </Box>
+        </Popover.Content>
+      </PopoverHovered>
+    )}
+  </Popover>
+)
+
 /** A menu item. */
 export const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {
   const {
@@ -253,64 +236,75 @@ export const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) =>
     }
   }, [isSubmenuOpen, themeValues.buttonVariant])
 
+  // Helper: Render collapsed popover
+  const renderPopover = () => (
+    <SidemenuPopover
+      isDark={isDark}
+      className={className}
+      buttonStyles={buttonStyles}
+      isExactlyActive={isExactlyActive}
+      icon={icon}
+      title={title}
+      isMenuExpanded={isMenuExpanded}
+    >
+      {children ? children : undefined}
+    </SidemenuPopover>
+  )
+
+  // Helper: Render expanded button
+  const renderButton = () => {
+    if (level === 0 && !isMenuExpanded) {
+      return (
+        <Tooltip text={title} placement="right" offset={[0, -200]}>
+          <Button
+            className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}
+            {...buttonStyles}
+            isActive={isExactlyActive}
+          >
+            <SidemenuItemContent icon={icon} iconSize={buttonStyles.iconSize} />
+            {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}
+          </Button>
+        </Tooltip>
+      )
+    }
+
+    return (
+      <Button
+        className={cs('vui-sidemenu-item focusAsBorder', isExactlyActive && 'vui-sidemenu-item--active', className)}
+        {...buttonStyles}
+        isActive={isExactlyActive}
+        title={!isMenuExpanded ? title : undefined}
+      >
+        <SidemenuItemContent
+          icon={icon}
+          iconSize={buttonStyles.iconSize}
+          title={title}
+          isMenuExpanded={isMenuExpanded}
+          badge={props.badge}
+          badgeLinkUrl={props.badgeLinkUrl}
+        />
+        {isMenuExpanded && computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />}{' '}
+        {/* Expand/Collapse button */}
+      </Button>
+    )
+    // No leftover return, handled above
+  }
+
+  // Helper: Render expanded children
+  const renderChildren = () => (
+    <Box flexDirection="column" justifyContent="start" w="100%">
+      {children}
+    </Box>
+  )
+
+  const shouldShowPopover = Boolean(!isMenuExpanded && level === 0 && !!children)
+  const shouldShowChildren = computedStates.hasChildrenExpanded
+
   return (
     <Box flexDirection="column" ref={ref} w="100%" mt={onBottom ? 'auto' : 0} id={computedItemId}>
-      {!isMenuExpanded && children ? (
-        <Popover offset={[0, collapsedWidth - expandedWidth - 2]} placement="right-start" trigger="mouseenter">
-          {({ isOpen }) => (
-            <PopoverHovered hoverColor={isDark ?'#003591' : '#d3eef8'}>
-              <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
-                <Button
-                  {...buttonStyles}
-                  borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}
-                  isActive={isExactlyActive}
-                >
-                  <SidemenuItemContent
-                    icon={icon}
-                    iconSize={buttonStyles.iconSize}
-                    title={title}
-                    isMenuExpanded={isMenuExpanded}
-                  />
-                </Button>
-              </Popover.Trigger>
-              <Popover.Content elevation="none" className={cs('vui-sidemenu-item-content', className)}>
-                <Box flexDirection="column" justifyContent="start" w="100%">
-                  <Button
-                    {...buttonStyles}
-                    borderLeftColor={'transparent!important'}
-                    minW={'240px'}
-                    isActive={isOpen && isExactlyActive}
-                  >
-                    <SidemenuItemContent title={title} isInPopover={true} />
-                  </Button>
-                  {children}
-                </Box>
-              </Popover.Content>
-            </PopoverHovered>
-          )}
-        </Popover>
-      ) : (
-        <Button
-          className={cs('vui-sidemenu-item', isExactlyActive && 'vui-sidemenu-item--active', className)}
-          {...buttonStyles}
-          isActive={isExactlyActive}
-        >
-          <SidemenuItemContent
-            icon={icon}
-            iconSize={buttonStyles.iconSize}
-            title={title}
-            isMenuExpanded={isMenuExpanded}
-            badge={props.badge}
-            badgeLinkUrl={props.badgeLinkUrl}
-          />
-          {computedStates.shouldShowExpandButton && <Button {...expandButtonProps} />} {/* Expand/Collapse button */}
-        </Button>
-      )}
-      {computedStates.hasChildrenExpanded && (
-        <Box flexDirection="column" justifyContent="start" w="100%">
-          {children}
-        </Box>
-      )}
+      {shouldShowPopover && renderPopover()}
+      {!shouldShowPopover && renderButton()}
+      {shouldShowChildren && renderChildren()}
     </Box>
   )
 }) as VuiComponent<'div', SidemenuItemV2Props>

package/src/sidemenuV2/sidemenuTopV2.tsx

@@ -0,0 +1,28 @@
+import { Box } from '../box'
+import { omitThemingProps, useStyleConfig } from '../core'
+import { cs } from '../utils'
+import { collapsedWidth } from './consts'
+import type { SidemenuTopPropsV2 } from './sidemenuV2.types'
+
+/** Top container. */
+export const SidemenuTopV2 = (props: SidemenuTopPropsV2) => {
+  const { className, leftSlot, rightSlot, ...rest } = omitThemingProps(props)
+  const styles = useStyleConfig('Sidemenu', props)
+
+  if (!leftSlot && !rightSlot) return null
+
+  return (
+    <Box className={cs('vui-sidemenu-top', className)} mb={1} w="100%" {...styles.sidemenuTop} {...rest}>
+      {!!leftSlot && (
+        <Box alignItems="center" className="vui-sidemenu-top-left" minW={collapsedWidth}>
+          {leftSlot}
+        </Box>
+      )}
+      {!!rightSlot && <Box className="vui-sidemenu-top-left">{rightSlot}</Box>}
+    </Box>
+  )
+}
+
+SidemenuTopV2.displayName = 'SidemenuTopV2'
+
+export default SidemenuTopV2

package/src/sidemenuV2/sidemenuV2.tsx

@@ -9,6 +9,7 @@ import { cs, isActivePath, generateMenuItemId } from '../utils'
 import { collapsedWidth, expandedWidth } from './consts'
 import { SidemenuStateProvider, useSidemenuContext } from './context'
 import SidemenuItemV2 from './sidemenuItemV2'
+import SidemenuTopV2 from './sidemenuTopV2'
 import type { SidemenuItemV2Props, SidemenuV2Props } from './sidemenuV2.types'
 
 // Re-export context provider and hook
@@ -18,9 +19,18 @@ export { SidemenuStateProvider, useSidemenuContext }
 export const SidemenuV2 = vui<'div', SidemenuV2Props>((props, ref) => {
   const {
     isExpandedInitial = true, // Uncontrolled: only affects initial state
+    onExpandedChange, // Extract this to prevent it from being passed to DOM
     size,
     variant = 'light',
-    onExpandedChange,
+    children,
+    className,
+    items,
+    shouldExpand,
+    isSticky,
+    width,
+    top,
+    onNavigate,
+    ...restProps // Only DOM-safe props remain
   } = props
 
   return (
@@ -31,11 +41,26 @@ export const SidemenuV2 = vui<'div', SidemenuV2Props>((props, ref) => {
       size={size}
       isDark={variant === 'dark'}
     >
-      <SidemenuInner {...props} ref={ref} />
+      <SidemenuInner
+        ref={ref}
+        // Only pass DOM-safe props, not onExpandedChange
+        children={children}
+        className={className}
+        items={items}
+        shouldExpand={shouldExpand}
+        isSticky={isSticky}
+        size={size}
+        variant={variant}
+        width={width}
+        top={top}
+        onNavigate={onNavigate}
+        {...restProps} // Remaining DOM-safe props
+      />
     </SidemenuStateProvider>
   )
 }) as VuiComponent<'div', SidemenuV2Props> & {
   Item: typeof SidemenuItemV2
+  Top: typeof SidemenuTopV2
 }
 
 // Inner component that uses context
@@ -264,7 +289,7 @@ const SidemenuInner = vui<'div', SidemenuV2Props>((props, ref) => {
   )
 
   return (
-    <Box elevation="3" {...containerProps}>
+    <Box elevation="1" {...containerProps}>
       <Box
         className="vui-sidemenu-content"
         flexDirection="column"
@@ -292,11 +317,12 @@ const SidemenuInner = vui<'div', SidemenuV2Props>((props, ref) => {
     </Box>
   )
 }) as VuiComponent<'div', SidemenuV2Props> & {
-  // Top: typeof SidemenuTop
+  Top: typeof SidemenuTopV2
   Item: typeof SidemenuItemV2
 }
 
 SidemenuV2.Item = SidemenuItemV2
+SidemenuV2.Top = SidemenuTopV2
 SidemenuV2.displayName = 'SidemenuV2'
 
 export default SidemenuV2

package/src/sidemenuV2/sidemenuV2.types.ts

@@ -313,6 +313,15 @@ export type SidemenuExpandEventV2 = {
   duration: number
 }
 
+export type SidemenuTopPropsV2 = BoxProps & {
+  /** Custom class name */
+  className?: string
+  /** Left slot (always visible) */
+  leftSlot?: ReactNode
+  /** Right slot (hidden if the sidemenu is collapsed) */
+  rightSlot?: ReactNode
+}
+
 // Utility types
 export type SidemenuItemWithChildrenV2 = SidemenuItemV2Props & {
   children: SidemenuItemV2Props[]

package/src/table/tableSortIcon.tsx

@@ -1,27 +1,41 @@
-import { useStyleConfig, vui } from '../core'
+import Box from '../box'
+import { vui } from '../core'
 import { Icon } from '../icon'
 import { cs } from '../utils'
-import { useTableContext } from './context'
 import type { TableSortIconProps } from './table.types'
 
 /** Displays a sort icon with given direction based on sort order. */
 export const TableSortIcon = vui<'svg', TableSortIconProps>((props, ref) => {
-  const { className, order, ...rest } = props
-  const styles = useStyleConfig('Table', useTableContext())
-  const rotate = order === 'asc' ? 180 : 0
-  const pathFill = order ? ['seaBlue.main', 'sandstone.main'] : 'sandstone.main'
+  const { className, order } = props
+  const activeColor = 'seaBlue.main'
+  const inactiveColor = 'sandstone.85'
+
+  const icons = [
+    {
+      color: order === 'asc' ? activeColor : inactiveColor,
+    },
+    {
+      color: order === 'desc' ? activeColor : inactiveColor,
+    },
+  ]
 
   return (
-    <Icon
-      className={cs('vui-tableSortIcon', className)}
-      name="uiSort"
-      pathFill={pathFill}
-      ref={ref}
-      rotate={rotate}
-      size="xs"
-      {...styles.tableSortIcon}
-      {...rest}
-    />
+    <Box ref={ref} column alignItems="center" justifyItems="center" ml="8px">
+      <Icon
+        className={cs('vui-tableSortIcon--top', className)}
+        name={'uiCaretUp'}
+        color={icons[0].color}
+        size="xs"
+        mb="-4px"
+      />
+      <Icon
+        className={cs('vui-tableSortIcon--bottom', className)}
+        name={'uiCaretDown'}
+        color={icons[1].color}
+        size="xs"
+        mt="-4px"
+      />
+    </Box>
   )
 })
 

package/src/tooltip/tooltip.tsx

@@ -26,6 +26,7 @@ export const Tooltip = (props: TooltipProps) => {
     placement = 'top',
     disabled = false,
     visible = false,
+    offset = [0, 2],
   } = props
 
   const isDesktop = useUp('md')
@@ -63,7 +64,7 @@ export const Tooltip = (props: TooltipProps) => {
         )
       }
       interactive
-      offset={[0, 2]}
+      offset={offset}
       placement={placement}
       popperOptions={{
         modifiers: [

package/src/tooltip/tooltip.types.ts

@@ -32,4 +32,5 @@ export interface TooltipProps extends ChildrenProp {
   linkProps?: LinkProps
   /** Keeping the tooltip always visible @default false  */
   visible?: boolean
+  offset?: [number, number]
 }

package/src/tooltip/tooltipContent.tsx

@@ -21,8 +21,8 @@ export const TooltipContent = ({
     maxW={maxWidth}
     overflowY="auto"
     p={1}
-    pl={2}
-    pr={2}
+    px={2}
+    whiteSpace="pre-wrap"
   >
     {children}
   </Box>