@veracity/vui 2.31.0 → 2.32.0

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
@@ -20,22 +21,25 @@ export const SidemenuV2 = vui<'div', SidemenuV2Props>((props, ref) => {
     isExpandedInitial = true, // Uncontrolled: only affects initial state
     size,
     variant = 'light',
-    onExpandedChange,
   } = props
 
   return (
     <SidemenuStateProvider
       isExpandedInitial={isExpandedInitial}
-      onExpandedChange={onExpandedChange}
+      onExpandedChange={props.onExpandedChange}
       variant={variant}
       size={size}
       isDark={variant === 'dark'}
     >
-      <SidemenuInner {...props} ref={ref} />
+      <SidemenuInner
+        ref={ref}
+        {...props} // Spread all props to inner component
+      />
     </SidemenuStateProvider>
   )
 }) as VuiComponent<'div', SidemenuV2Props> & {
   Item: typeof SidemenuItemV2
+  Top: typeof SidemenuTopV2
 }
 
 // Inner component that uses context
@@ -264,7 +268,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 +296,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/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>