@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 "../theme/index.js";
import { SystemProps } from "../system/system.js";
import "../system/index.js";
import { IconProp } from "../icon/icon.types.js";
import "../icon/index.js";
import { BadgeProps } from "../badge/badge.types.js";
import { BoxProps } from "../box/box.types.js";
import "../box/index.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