@veracity/vui 2.30.0-beta.0 → 2.30.0

package/src/input/input.tsx

@@ -217,7 +217,7 @@ export const Input = vui<'div', InputProps>((props, ref) => {
               {allowClear && (
                 <IconButton
                   disabled={!valueInternal}
-                  icon="falTimes"
+                  icon="uiTimes"
                   mr={0.5}
                   onClick={onClear}
                   size={clearIconSize[size]}

package/src/link/link.tsx

@@ -46,10 +46,10 @@ export const LinkBase = styled.aBox.attrs((props: LinkProps) => ({
   &:not(.vui-linkNoUnderline) .vui-linkIcon {
     margin-bottom: 2px;
   }
-    
+
   &:hover > .vui-t {
-    animation: linkSwipe 0.3s ease forwards;
-    background-size: 100% 1px;
+    animation: ${({ isUnderlined }) => (isUnderlined ? 'none' : 'linkSwipe 0.3s ease forwards')};
+    background-size: ${({ isUnderlined }) => (isUnderlined ? '100% 2px' : '100% 1px')};
   }
 `
 

package/src/link/theme.ts

@@ -3,7 +3,7 @@ const baseStyle = {
     dislplay: 'inline',
   },
   icon: {
-    size: 'xs'
+    size: 'xs',
   },
   text: {
     fontSize: 'inherit',
@@ -46,7 +46,7 @@ const sizes = {
       lineHeight: '18px',
     },
     icon: {
-      size: 'xxs'
+      size: 'xxs',
     },
   },
   sm: {
@@ -66,7 +66,7 @@ const sizes = {
       fontSize: 'lg',
       lineHeight: '32px',
     },
-  }
+  },
 }
 
 export default {

package/src/notification/notification.tsx

@@ -69,7 +69,7 @@ export const Notification = vui<'div', NotificationProps>((props, ref) => {
           <NotificationButton
             alignSelf={alignSelf}
             aria-label="close"
-            icon="falTimes"
+            icon="uiTimes"
             onClick={onClose}
             variant={closeButtonVariantMapping?.[variant] ?? variant}
             w="32px"

package/src/select/select.tsx

@@ -103,7 +103,7 @@ export function Select(props: SelectProps) {
               {showOptionsFilter && (
                 <Box>
                   <Input
-                    iconLeft="falSearch"
+                    iconLeft="uiSearch"
                     id={id}
                     m={1}
                     mt={0}

package/src/sidemenuV2/consts.ts

@@ -0,0 +1,3 @@
+export const collapsedWidth = 52
+
+export const expandedWidth = 240

package/src/sidemenuV2/context.tsx

@@ -0,0 +1,164 @@
+import type { ReactNode } from 'react'
+import { useMemo, useState, useCallback, useReducer } from 'react'
+
+import type { Dict } from '../utils'
+import { createContext } from '../utils'
+
+export interface SidemenuContextValue extends Dict {
+  // Existing properties
+  variant?: string
+  size?: string
+  isMenuExpanded?: boolean
+
+  // Submenu state management
+  submenuStates?: Record<string, boolean>
+  setSubmenuState?: (itemId: string, isOpen: boolean) => void
+  toggleSubmenu?: (itemId: string) => void
+
+  // Expansion state management
+  setIsExpanded?: (isExpanded: boolean) => void
+  onExpandedChange?: (isExpanded: boolean) => void
+
+  // Memoized reset functions
+  resetAllStates?: () => void
+  resetExpansionOnly?: () => void
+  resetSubmenuOnly?: () => void
+}
+
+// Submenu state reducer for more stable state management
+type SubmenuAction =
+  | { type: 'SET_SUBMENU'; itemId: string; isOpen: boolean }
+  | { type: 'TOGGLE_SUBMENU'; itemId: string }
+  | { type: 'RESET_ALL' }
+  | { type: 'RESTORE_STATE'; state: Record<string, boolean> }
+
+const submenuReducer = (state: Record<string, boolean>, action: SubmenuAction): Record<string, boolean> => {
+  let newState: Record<string, boolean>
+
+  switch (action.type) {
+    case 'SET_SUBMENU': {
+      if (state[action.itemId] === action.isOpen) {
+        return state // Return same reference if no change
+      }
+      newState = { ...state, [action.itemId]: action.isOpen }
+      break
+    }
+    case 'TOGGLE_SUBMENU': {
+      const currentValue = state[action.itemId] || false
+      newState = { ...state, [action.itemId]: !currentValue }
+      break
+    }
+    case 'RESTORE_STATE': {
+      newState = action.state
+      break
+    }
+    case 'RESET_ALL': {
+      newState = {}
+      break
+    }
+    default:
+      return state
+  }
+
+  // Submenu states are now persisted in context only
+  return newState
+}
+
+interface SidemenuStateProviderProps {
+  children: ReactNode
+  isExpandedInitial?: boolean
+  onExpandedChange?: (isExpanded: boolean) => void
+  variant?: string
+  size?: string
+  isDark?: boolean
+}
+
+const [SidemenuProvider, useSidemenuContext] = createContext<SidemenuContextValue>({ isOptional: true })
+
+// Enhanced provider that manages state
+export const SidemenuStateProvider = ({
+  children,
+  isExpandedInitial = true,
+  onExpandedChange,
+  variant,
+  size,
+  isDark,
+}: SidemenuStateProviderProps) => {
+  // Pure uncontrolled state without persistence - context only
+  const [isExpanded, setIsExpanded] = useState(isExpandedInitial)
+
+  // Initialize submenu states as empty - persisted in context only
+  const [submenuStates, dispatchSubmenu] = useReducer(submenuReducer, {})
+
+  // Submenu state management functions using reducer dispatch - memoized
+  const setSubmenuState = useCallback((itemId: string, isOpen: boolean) => {
+    dispatchSubmenu({ type: 'SET_SUBMENU', itemId, isOpen })
+  }, [])
+
+  const toggleSubmenu = useCallback((itemId: string) => {
+    dispatchSubmenu({ type: 'TOGGLE_SUBMENU', itemId })
+  }, [])
+
+  // Enhanced setIsExpanded that handles callbacks - memoized
+  const handleSetIsExpanded = useCallback(
+    (newIsExpanded: boolean) => {
+      setIsExpanded(newIsExpanded)
+      onExpandedChange?.(newIsExpanded)
+    },
+    [onExpandedChange],
+  )
+
+  // Memoized reset functions for external use
+  const resetAllStates = useCallback(() => {
+    dispatchSubmenu({ type: 'RESET_ALL' })
+    const defaultExpanded = isExpandedInitial
+    setIsExpanded(defaultExpanded)
+    onExpandedChange?.(defaultExpanded)
+  }, [isExpandedInitial, onExpandedChange])
+
+  const resetExpansionOnly = useCallback(() => {
+    const defaultExpanded = isExpandedInitial
+    setIsExpanded(defaultExpanded)
+    onExpandedChange?.(defaultExpanded)
+  }, [isExpandedInitial, onExpandedChange])
+
+  const resetSubmenuOnly = useCallback(() => {
+    dispatchSubmenu({ type: 'RESET_ALL' })
+  }, [])
+
+  // Memoized context value with all state management functions
+  const contextValue = useMemo(
+    () => ({
+      size,
+      variant,
+      isDark,
+      isMenuExpanded: isExpanded,
+      submenuStates,
+      setSubmenuState,
+      toggleSubmenu,
+      setIsExpanded: handleSetIsExpanded,
+      onExpandedChange,
+      resetAllStates,
+      resetExpansionOnly,
+      resetSubmenuOnly,
+    }),
+    [
+      size,
+      variant,
+      isDark,
+      isExpanded,
+      submenuStates,
+      setSubmenuState,
+      toggleSubmenu,
+      handleSetIsExpanded,
+      onExpandedChange,
+      resetAllStates,
+      resetExpansionOnly,
+      resetSubmenuOnly,
+    ],
+  )
+
+  return <SidemenuProvider value={contextValue}>{children}</SidemenuProvider>
+}
+
+export { SidemenuProvider, useSidemenuContext }

package/src/sidemenuV2/index.ts

@@ -0,0 +1,3 @@
+export * from './sidemenuV2'
+export { default } from './sidemenuV2'
+export type * from './sidemenuV2.types'

package/src/sidemenuV2/sidemenuItemV2.tsx

@@ -0,0 +1,273 @@
+import type { MouseEvent } from 'react'
+import { useEffect, useMemo, useCallback, memo } 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, vui } from '../core'
+import Icon from '../icon'
+import type { IconProp } from '../icon'
+import Popover from '../popover'
+import T from '../t'
+import { cs, generateMenuItemId } from '../utils'
+import { collapsedWidth, expandedWidth } from './consts'
+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
+  badge?: Pick<BadgeProps, 'text' | 'variant'>
+  badgeLinkUrl?: string
+}
+
+const SidemenuItemContent = memo<SidemenuItemContentProps>(
+  ({ icon, iconSize = 'sm', title, isMenuExpanded, 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
+
+    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'
+
+/** A menu item. */
+export const SidemenuItemV2 = vui<'button', SidemenuItemV2Props>((props, ref) => {
+  const {
+    children,
+    className,
+    disabled = false,
+    icon,
+    isActive = false,
+    isExpanded = true,
+    itemId,
+    level = 0,
+    onBottom = false,
+    onClick,
+    onCollapse,
+    onExpand,
+    title,
+    ...rest
+  } = omitThemingProps(props)
+
+  // Use consistent itemId generation - prioritize provided itemId, then use utility function
+  const computedItemId = itemId || generateMenuItemId(title, level) || `item-${Math.random().toString(36).substr(2, 9)}`
+
+  const { isDark, isMenuExpanded, styles, size, isSubmenuOpen, toggleSubmenu } = useSidemenuItem(computedItemId)
+
+  // Use the isActive prop directly - parent should handle exact path matching
+  const isExactlyActive = isActive
+
+  useEffect(() => {
+    // Only call onExpand/onCollapse if the main menu is expanded
+    // This prevents child items from expanding the main menu when it's collapsed
+    if (isMenuExpanded) {
+      if (isSubmenuOpen) onExpand?.()
+      if (!isSubmenuOpen) onCollapse?.()
+    }
+  }, [isSubmenuOpen, onExpand, onCollapse, isMenuExpanded])
+
+  // Memoized computed values for better performance
+  const computedStates = useMemo(() => {
+    const hasChildren = !!children
+    const isSubmenuCollapsed = hasChildren && !isSubmenuOpen
+    // Only allow submenu expansion when main menu is expanded
+    const isSubmenuExpanded = hasChildren && isSubmenuOpen && isMenuExpanded
+    const shouldShowExpandButton = hasChildren && isMenuExpanded
+    const buttonSize = level < 1 ? ('lg' as const) : ('md' as const)
+    const iconSize = level < 1 ? ('sm' as const) : ('xs' as const)
+
+    const states = {
+      hasChildren,
+      hasChildrenCollapsed: isSubmenuCollapsed,
+      hasChildrenExpanded: isSubmenuExpanded,
+      shouldShowExpandButton,
+      buttonSize,
+      iconSize,
+      isDisabled: disabled,
+      shouldShowBorder: !hasChildren || isSubmenuOpen,
+    }
+
+    return states
+  }, [children, isSubmenuOpen, isMenuExpanded, disabled, size, level])
+
+  // Memoized theme values to prevent recalculation
+  const themeValues = useMemo(
+    () => ({
+      activeColor: isDark ? 'digiGreen.main' : 'seaBlue.main',
+      buttonVariant: isDark ? 'menuDark' : 'menuLight',
+    }),
+    [isDark],
+  )
+
+  // Optimized stable callback
+  const handleClick = useCallback(
+    (event: MouseEvent) => {
+      if (!computedStates.isDisabled) {
+        const targetTag = event.target as HTMLElement
+        if (
+          (targetTag.classList.contains('vui-tagText') || targetTag.classList.contains('vui-tag')) &&
+          typeof window !== 'undefined' &&
+          (targetTag.parentElement?.dataset.link || targetTag?.dataset.link)
+        ) {
+          const url = atob(targetTag.parentElement?.dataset.link ?? targetTag?.dataset.link ?? '')
+          window.open(url, '_blank', 'noopener,noreferrer')
+        } else {
+          event?.stopPropagation?.()
+          onClick?.()
+        }
+      }
+      toggleSubmenu?.()
+    },
+    [onClick, computedStates.isDisabled],
+  )
+
+  // Memoized button styles - Major performance improvement
+  const buttonStyles = useMemo(
+    () => ({
+      // Get base item styles from theme
+      ...(styles && 'item' in styles && styles.item ? styles.item : {}),
+
+      // Dynamic border color based on active state
+      borderLeftColor: isExactlyActive ? themeValues.activeColor : 'transparent',
+
+      // Animation properties (enhanced from theme)
+      transitionProperty: 'background-color, border-color, color, transform, opacity',
+
+      // Button specific properties
+      size: computedStates.buttonSize,
+      h: computedStates.buttonSize === 'lg' ? 40 : 36,
+      iconSize: computedStates.iconSize,
+      variant: themeValues.buttonVariant,
+
+      // Event handlers
+      onClick: handleClick,
+      disabled: computedStates.isDisabled,
+
+      // Accessibility
+      role: 'button',
+      tabIndex: computedStates.isDisabled ? -1 : 0,
+      'aria-disabled': computedStates.isDisabled,
+      'aria-pressed': isExactlyActive,
+
+      // Merge custom props
+      ...rest,
+    }),
+    [
+      // Dependencies grouped logically - simplified since computedStates contains most values
+      styles,
+      computedStates,
+      isExactlyActive,
+      themeValues,
+      handleClick,
+      rest,
+    ],
+  )
+
+  // Memoized expand/collapse button properties
+  const expandButtonProps = useMemo(() => {
+    const isExpanded = isSubmenuOpen
+    const chevronIcon = isExpanded ? 'falChevronUp' : 'falChevronDown'
+    const ariaLabel = isExpanded ? 'Collapse' : 'Expand'
+
+    return {
+      'aria-label': ariaLabel,
+      className: 'vui-sidemenu-item-expand',
+      variant: themeValues.buttonVariant,
+      icon: chevronIcon,
+      size: 'sm' as const,
+      pl: '4px',
+      pr: '16px',
+      ml: 'auto',
+      h: '100%',
+      border: 'none',
+      bg: 'transparent',
+      hoverBg: 'transparent',
+      activeBg: 'transparent',
+      hoverActiveBg: 'transparent',
+    }
+  }, [isSubmenuOpen, themeValues.buttonVariant])
+
+  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">
+          <Popover.Trigger as={Box} className={cs('vui-sidemenu-item-popover', className)}>
+            <Box {...buttonStyles} borderLeft={`3px solid ${isDark ? 'digiGreen.main' : 'seaBlue.main'}`}>
+              <SidemenuItemContent
+                icon={icon}
+                iconSize={buttonStyles.iconSize}
+                title={title}
+                isMenuExpanded={isMenuExpanded}
+              />
+            </Box>
+          </Popover.Trigger>
+          <Popover.Content elevation="none">
+            <Box flexDirection="column" justifyContent="start" w="100%">
+              {children}
+            </Box>
+          </Popover.Content>
+        </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>
+      )}
+    </Box>
+  )
+}) as VuiComponent<'div', SidemenuItemV2Props>
+
+SidemenuItemV2.displayName = 'SidemenuItemV2'
+
+export default SidemenuItemV2