@veracity/vui/dist/sidemenuV2/sidemenuV2.types.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { ThemingProps } from "../theme/types.js";
import { SystemProps } from "../system/system.js";
import { IconProp } from "../icon/icon.types.js";
import { BadgeProps } from "../badge/badge.types.js";
import { BoxProps } from "../box/box.types.js";
import { ComponentProps, ReactNode } from "react";

//#region src/sidemenuV2/sidemenuV2.types.d.ts
type SidemenuOrientationV2 = 'vertical' | 'horizontal';
type SidemenuSizeV2 = 'md';
type SidemenuVariantV2 = 'default' | 'dark' | 'light';
type SidemenuCollapseModeV2 = 'auto' | 'manual' | 'responsive';
type SidemenuV2Props = SystemProps & ThemingProps<'Sidemenu'> & {
  /** Collection of menu items */items?: SidemenuItemV2Props[]; /** Initial expansion state (uncontrolled) @default true */
  isExpandedInitial?: boolean; /** Callback to control when expansion should be allowed */
  shouldExpand?: (trigger: 'toggle' | 'navigation', currentState: boolean) => boolean; /** Whether the menu is sticky @default false */
  isSticky?: boolean; /** External callback for navigation to the item path, could be a custom function or React Router hook: https://reactrouter.com/en/main/hooks/use-navigate */
  onNavigate?: (to: string, item?: SidemenuItemV2Props) => void; /** Custom navigation component for different routing libraries */
  NavigationComponent?: React.ComponentType<{
    to: string;
    children: ReactNode;
  }>; /** Width of the container when the side menu is expanded @default 280 */
  width?: number; /** Width of the container when collapsed @default 64 */
  collapsedWidth?: number; /** Sidemenu orientation @default 'vertical' */
  orientation?: SidemenuOrientationV2; /** Sidemenu size variant @default 'md' */
  size?: SidemenuSizeV2; /** Sidemenu visual variant @default 'default' */
  variant?: SidemenuVariantV2; /** Collapse behavior @default 'manual' */
  collapseMode?: SidemenuCollapseModeV2; /** Breakpoint for responsive collapse */
  collapseBreakpoint?: string; /** Custom header content */
  header?: ReactNode; /** Custom footer content */
  footer?: ReactNode; /** Show tooltips on collapsed items @default true */
  showTooltips?: boolean; /** Allow multiple expanded groups @default false */
  allowMultipleExpanded?: boolean; /** Callback when expansion state changes */
  onExpandedChange?: (isExpanded: boolean) => void; /** Callback when an item is selected */
  onItemSelect?: (item: SidemenuItemV2Props) => void; /** ARIA label for the sidemenu */
  'aria-label'?: string; /** ARIA labelledby for the sidemenu */
  'aria-labelledby'?: string; /** Test ID for automated testing */
  'data-testid'?: string; /** Enable keyboard navigation @default true */
  enableKeyboardNavigation?: boolean; /** Auto-collapse siblings when expanding @default false */
  autoCollapseSiblings?: boolean; /** Loading state @default false */
  isLoading?: boolean; /** Error state */
  error?: string | ReactNode; /** Empty state content */
  emptyContent?: ReactNode; /** Animation duration in milliseconds @default 250 */
  animationDuration?: number; /** Disable animations @default false */
  disableAnimation?: boolean;
};
type SidemenuItemBadgeV2Props = {
  /** Badge content */content?: string | number; /** Badge variant @default 'default' */
  variant?: 'default' | 'success' | 'warning' | 'error' | 'info'; /** Show badge as dot @default false */
  isDot?: boolean; /** Maximum count to display @default 99 */
  maxCount?: number;
};
type SidemenuItemV2Props = BoxProps & {
  /** Custom class name */className?: string; /** Children (submenu items) */
  children?: ReactNode; /** Icon name or component */
  icon?: IconProp; /** Icon size @default 'md' */
  iconSize?: 'md' | 'sm' | 'lg'; /** Whether the item is active */
  isActive?: boolean; /** Whether the item is expanded vertically */
  isExpanded?: boolean; /** Unique identifier for submenu state management */
  itemId?: string; /** Whether the item is disabled @default false */
  disabled?: boolean; /** Whether the item is loading @default false */
  isLoading?: boolean; /** On click callback */
  onClick?: (item?: SidemenuItemV2Props) => void; /** On collapse callback */
  onCollapse?: (item?: SidemenuItemV2Props) => void; /** On expand callback */
  onExpand?: (item?: SidemenuItemV2Props) => void; /** Router path */
  path?: string; /** Display title */
  title: string; /** Subtitle or description */
  subtitle?: string; /** Tooltip content (shown when collapsed) */
  tooltip?: string | ReactNode; /** Badge configuration */
  badge?: Pick<BadgeProps, 'label' | 'variant' | 'color'>;
  badgeLinkUrl?: string; /** Keyboard shortcut display */
  shortcut?: string; /** Item visibility @default true */
  visible?: boolean; /** Item priority for sorting @default 0 */
  priority?: number; /** Nesting level (auto-calculated if not provided) */
  level?: number; /** External link indicator @default false */
  isExternal?: boolean; /** Target for external links @default '_blank' */
  target?: string; /** Whether item is new (shows indicator) @default false */
  isNew?: boolean; /** Whether item is beta (shows indicator) @default false */
  isBeta?: boolean; /** Custom status text */
  status?: string; /** Item category for grouping */
  category?: string; /** ARIA label override */
  'aria-label'?: string; /** ARIA description */
  'aria-describedby'?: string; /** Test ID for this specific item */
  'data-testid'?: string; /** Custom component to render as */
  as?: React.ElementType; /** Before icon slot */
  beforeIcon?: ReactNode; /** After icon slot */
  afterIcon?: ReactNode; /** Custom metadata */
  meta?: Record<string, any>; /** Whether item is positioned at bottom @default false */
  onBottom?: boolean;
};
type SidemenuTopV2Props = BoxProps & {
  /** Custom class name */className?: string; /** Left slot (always visible) */
  leftSlot?: ReactNode; /** Right slot (hidden when collapsed) */
  rightSlot?: ReactNode; /** Center slot for title/branding */
  centerSlot?: ReactNode; /** Whether to show collapse toggle @default true */
  showCollapseToggle?: boolean; /** Custom collapse toggle component */
  CollapseToggle?: React.ComponentType<{
    isExpanded: boolean;
    onClick: () => void;
    disabled?: boolean;
  }>; /** Collapse toggle position @default 'right' */
  collapseTogglePosition?: 'left' | 'right' | 'center'; /** Top section height @default 'auto' */
  height?: string | number; /** Sticky behavior @default false */
  isSticky?: boolean; /** Background variant */
  background?: 'transparent' | 'default' | 'brand'; /** Border configuration */
  border?: 'none' | 'bottom' | 'full'; /** Custom actions */
  actions?: ReactNode; /** Test ID */
  'data-testid'?: string; /** Disabled state @default false */
  disabled?: boolean; /** Loading state @default false */
  isLoading?: boolean; /** Error state */
  error?: string | ReactNode;
};
type SidemenuGroupV2Props = {
  /** Group title */title?: string; /** Group items */
  items: SidemenuItemV2Props[]; /** Whether group is collapsible @default true */
  collapsible?: boolean; /** Whether group is expanded by default @default true */
  defaultExpanded?: boolean; /** Group icon */
  icon?: IconProp; /** Group priority for ordering @default 0 */
  priority?: number; /** Group visibility @default true */
  visible?: boolean; /** Group category */
  category?: string; /** Divider after group @default false */
  showDivider?: boolean; /** Custom group header renderer */
  renderHeader?: (props: SidemenuGroupV2Props) => ReactNode; /** Test ID for group */
  'data-testid'?: string;
};
type SidemenuContextV2Value = {
  /** Current expansion state */isExpanded: boolean; /** Toggle expansion */
  toggleExpanded: () => void; /** Current size */
  size: SidemenuSizeV2; /** Current variant */
  variant: SidemenuVariantV2; /** Navigation function */
  navigate: (to: string, item?: SidemenuItemV2Props) => void; /** Active item path */
  activePath?: string; /** Set active item */
  setActivePath: (path: string) => void; /** Disabled state */
  disabled?: boolean; /** Loading state */
  isLoading?: boolean; /** Theme context */
  isDark?: boolean; /** Width values */
  width: number;
  collapsedWidth: number; /** Animation settings */
  animationDuration: number;
  disableAnimation: boolean;
};
type UseSidemenuV2Return = {
  /** Expansion state */isExpanded: boolean; /** Toggle function */
  toggle: () => void; /** Expand function */
  expand: () => void; /** Collapse function */
  collapse: () => void; /** Navigation function */
  navigate: (to: string) => void; /** Active item */
  activeItem?: SidemenuItemV2Props; /** Set active item */
  setActiveItem: (item: SidemenuItemV2Props) => void; /** Context value */
  contextValue: SidemenuContextV2Value;
};
type UseSidemenuItemV2Return = {
  /** Item expansion state */isExpandedVertically: boolean; /** Toggle vertical expansion */
  setIsExpandedVertically: (expanded: boolean) => void; /** Theme detection */
  isDark: boolean; /** Size from context */
  size: SidemenuSizeV2; /** Horizontal expansion from sidemenu */
  isExpandedHorizontally: boolean; /** Computed styles */
  styles: Record<string, any>; /** Item ref */
  itemRef: React.RefObject<HTMLElement>; /** Focus management */
  focus: () => void; /** Blur management */
  blur: () => void; /** Active state */
  isActive: boolean; /** Disabled state */
  disabled: boolean;
};
type SidemenuItemClickEventV2 = {
  item: SidemenuItemV2Props;
  path?: string;
  preventDefault: () => void;
  isDefaultPrevented: boolean;
};
type SidemenuExpandEventV2 = {
  isExpanded: boolean;
  width: number;
  duration: number;
};
type SidemenuTopPropsV2 = BoxProps & {
  /** Custom class name */className?: string; /** Left slot (always visible) */
  leftSlot?: ReactNode; /** Right slot (hidden if the sidemenu is collapsed) */
  rightSlot?: ReactNode;
};
type SidemenuItemWithChildrenV2 = SidemenuItemV2Props & {
  children: SidemenuItemV2Props[];
};
type SidemenuFlatItemV2 = SidemenuItemV2Props & {
  level: number;
  parentPath?: string;
  fullPath: string;
};
type SidemenuComponentV2Props = ComponentProps<'nav'> & SidemenuV2Props;
type SidemenuItemComponentV2Props = ComponentProps<'button'> & SidemenuItemV2Props;
type SidemenuTopComponentV2Props = ComponentProps<'div'> & SidemenuTopV2Props;
//#endregion
export { SidemenuCollapseModeV2, SidemenuComponentV2Props, SidemenuContextV2Value, SidemenuExpandEventV2, SidemenuFlatItemV2, SidemenuGroupV2Props, SidemenuItemBadgeV2Props, SidemenuItemClickEventV2, SidemenuItemComponentV2Props, SidemenuItemV2Props, SidemenuItemWithChildrenV2, SidemenuOrientationV2, SidemenuSizeV2, SidemenuTopComponentV2Props, SidemenuTopPropsV2, SidemenuTopV2Props, SidemenuV2Props, SidemenuVariantV2, UseSidemenuItemV2Return, UseSidemenuV2Return };

//# sourceMappingURL=sidemenuV2.types.d.ts.map