Utilities and Contexts

/**
 * Utility functions namespace
 */
namespace Util {
  /**
   * Map CSS class names to CSS Modules
   * @param className - Space-separated class names
   * @param cssModule - CSS Module mapping object
   * @returns Mapped class names string
   */
  function mapToCssModules(className?: string, cssModule?: object): string;

  /**
   * Remove specified keys from an object
   * @param obj - Source object
   * @param omitKeys - Array of keys to remove
   * @returns New object without omitted keys
   */
  function omit(obj: object, omitKeys: string[]): object;

  /**
   * Select only specified keys from an object
   * @param obj - Source object  
   * @param keys - Array of keys to select
   * @returns New object with only selected keys
   */
  function pick(obj: object, keys: string[]): object;

  /**
   * Set global CSS Module for all components
   * @param cssModule - Global CSS Module mapping
   */
  function setGlobalCssModule(cssModule: object): void;

  /**
   * Get browser scrollbar width
   * @returns Scrollbar width in pixels
   */
  function getScrollbarWidth(): number;

  /**
   * Set body padding to account for scrollbar
   * @param padding - Padding value in pixels
   */
  function setScrollbarWidth(padding: number): void;

  /**
   * Check if document body overflows viewport
   * @returns True if body overflows
   */
  function isBodyOverflowing(): boolean;

  /**
   * Get original body padding-right value
   * @returns Original padding in pixels
   */
  function getOriginalBodyPadding(): number;

  /**
   * Conditionally update scrollbar based on overflow
   */
  function conditionallyUpdateScrollbar(): void;

  /**
   * Display deprecation warning once per message
   * @param message - Warning message to display
   */
  function warnOnce(message: string): void;

  /**
   * Create deprecated prop type validator
   * @param propType - Original prop type validator
   * @param explanation - Deprecation explanation
   * @returns Deprecated prop type validator
   */
  function deprecated(propType: Function, explanation: string): Function;

  /**
   * Find DOM elements from various target types
   * @param target - Target selector, element, or function
   * @returns DOM element or NodeList
   */
  function findDOMElements(target: string | Element | Function): Element | NodeList;

  /**
   * Get target element(s) with optional multiple selection
   * @param target - Target selector, element, or function
   * @param allElements - Return all matching elements
   * @returns Single element or array of elements
   */
  function getTarget(target: any, allElements?: boolean): Element | Element[];

  /**
   * Add event listeners to multiple elements
   * @param els - Elements or element array
   * @param handler - Event handler function
   * @param events - Event types to listen for
   * @param useCapture - Use capture phase
   * @returns Function to remove all listeners
   */
  function addMultipleEventListeners(
    els: Element | Element[],
    handler: Function,
    events: string | string[],
    useCapture?: boolean
  ): () => void;

  /**
   * Check if value is React ref object
   * @param target - Value to check
   * @returns True if React ref object
   */
  function isReactRefObj(target: any): boolean;

  /**
   * Check if value is object type
   * @param value - Value to check
   * @returns True if object
   */
  function isObject(value: any): boolean;

  /**
   * Convert value to number
   * @param value - Value to convert
   * @returns Numeric value or NaN
   */
  function toNumber(value: any): number;

  /**
   * Check if value is function
   * @param value - Value to check
   * @returns True if function
   */
  function isFunction(value: any): boolean;

  /**
   * Check if value is array or NodeList
   * @param els - Value to check
   * @returns True if array or NodeList
   */
  function isArrayOrNodeList(els: any): boolean;

  /**
   * Merge default props with component props
   * @param defaultProps - Default prop values
   * @param props - Component props
   * @returns Merged props object
   */
  function addDefaultProps(defaultProps: object, props: object): object;
}

/**
 * Animation timeouts matching Bootstrap CSS variables
 */
const TransitionTimeouts: {
  Fade: 150;
  Collapse: 350;
  Modal: 300;
  Carousel: 600;
  Offcanvas: 300;
};

/**
 * Keyboard key codes for interaction handling
 */
const keyCodes: {
  esc: 27;
  space: 32;
  enter: 13;
  tab: 9;
  up: 38;
  down: 40;
  home: 36;
  end: 35;
  n: 78;
  p: 80;
};

/**
 * Valid Popper.js placement options
 */
const PopperPlacements: string[];

/**
 * Default toggle events for interactive components
 */
const defaultToggleEvents: string[];

/**
 * CSS selector for focusable elements
 */
const focusableElements: string[];

/**
 * Transition status constants
 */
const TransitionStatuses: {
  ENTERING: 'entering';
  ENTERED: 'entered';
  EXITING: 'exiting';
  EXITED: 'exited';
};

/**
 * Transition prop type keys
 */
const TransitionPropTypeKeys: string[];

/**
 * Boolean indicating DOM availability
 */
const canUseDOM: boolean;

/**
 * PropType for DOM element references
 */
const DOMElement: PropTypes.Validator;

/**
 * PropType for component target elements
 */
const targetPropType: PropTypes.Validator;

/**
 * PropType for HTML tag or React component
 */
const tagPropType: PropTypes.Validator;

/**
 * Context for dropdown component state
 */
const DropdownContext: React.Context<{
  toggle: () => void;
  isOpen: boolean;
  direction: string;
  inNavbar: boolean;
  disabled: boolean;
}>;

/**
 * Context for accordion component state
 */
const AccordionContext: React.Context<{
  open: string | string[];
  toggle: (id: string) => void;
  stayOpen: boolean;
}>;

/**
 * Fade transition component
 * @param props.baseClass - Base CSS class for transition
 * @param props.baseClassActive - Active state CSS class
 * @param props.tag - HTML element to render as (default: 'div')
 * @param props.className - Additional CSS classes
 * @param props.cssModule - CSS Module mapping object
 * @param props.children - Content to animate
 * @param props.in - Control transition state
 * @param props.appear - Run transition on initial mount
 * @param props.enter - Enable enter transitions
 * @param props.exit - Enable exit transitions
 * @param props.timeout - Transition duration
 * @param props.onEnter - Callback when entering
 * @param props.onEntering - Callback while entering
 * @param props.onEntered - Callback when entered
 * @param props.onExit - Callback when exiting
 * @param props.onExiting - Callback while exiting
 * @param props.onExited - Callback when exited
 */
function Fade(props: {
  baseClass?: string;
  baseClassActive?: string;
  tag?: React.ElementType;
  className?: string;
  cssModule?: object;
  children?: React.ReactNode;
  in?: boolean;
  appear?: boolean;
  enter?: boolean;
  exit?: boolean;
  timeout?: number;
  onEnter?: () => void;
  onEntering?: () => void;
  onEntered?: () => void;
  onExit?: () => void;
  onExiting?: () => void;
  onExited?: () => void;
}): JSX.Element;

/**
 * Popper.js content wrapper for positioning
 */
function PopperContent(props: {
  placement?: string;
  isOpen?: boolean;
  target: any;
  container?: any;
  modifiers?: object[];
  strategy?: string;
  offset?: [number, number];
  flip?: boolean;
  shift?: boolean;
  preventOverflow?: boolean;
  arrow?: boolean;
  transform?: boolean;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Helper for Popper.js target elements
 */
function PopperTargetHelper(props: {
  placement?: string;
  isOpen?: boolean;
  target: any;
  container?: any;
  children?: React.ReactNode;
}): JSX.Element;

/**
 * Browser polyfills namespace
 */
namespace Polyfill {
  /**
   * CustomEvent polyfill for IE
   */
  function CustomEvent(event: string, params?: object): Event;

  /**
   * Object.values polyfill for older browsers
   */
  function values(obj: object): any[];
}

import { Button } from 'reactstrap';
import { setGlobalCssModule } from 'reactstrap/lib/utils';
import styles from './styles.module.css';

// Set global CSS module
setGlobalCssModule(styles);

function StyledButton() {
  return (
    <Button 
      color="primary"
      className="custom-button"
      cssModule={styles}
    >
      Styled Button
    </Button>
  );
}

import { omit, pick, mapToCssModules } from 'reactstrap/lib/utils';

function UtilityExample() {
  const props = {
    color: 'primary',
    size: 'lg',
    onClick: () => {},
    'data-test': 'button'
  };

  // Remove internal props
  const htmlProps = omit(props, ['color', 'size']);
  
  // Select only specific props
  const buttonProps = pick(props, ['color', 'size']);
  
  // Map CSS classes
  const classes = mapToCssModules('btn btn-primary', cssModule);

  return <button className={classes} {...htmlProps} />;
}

import { useContext } from 'react';
import { DropdownContext } from 'reactstrap';

function CustomDropdownItem() {
  const { toggle, isOpen } = useContext(DropdownContext);

  return (
    <button onClick={toggle}>
      Custom Item (Dropdown is {isOpen ? 'open' : 'closed'})
    </button>
  );
}

import { Fade, Button } from 'reactstrap';

function FadeExample() {
  const [fadeIn, setFadeIn] = useState(true);

  return (
    <div>
      <Button color="primary" onClick={() => setFadeIn(!fadeIn)}>
        Toggle Fade
      </Button>
      <Fade in={fadeIn}>
        <div className="mt-3">
          This content will fade in and out!
        </div>
      </Fade>
    </div>
  );
}

import { TransitionTimeouts, keyCodes } from 'reactstrap/lib/utils';

function CustomComponent() {
  const handleKeyDown = (event) => {
    if (event.keyCode === keyCodes.esc) {
      // Handle escape key
    }
  };

  return (
    <div 
      onKeyDown={handleKeyDown}
      style={{ 
        transition: `opacity ${TransitionTimeouts.Fade}ms ease-in-out` 
      }}
    >
      Custom component with Reactstrap timing
    </div>
  );
}

/**
 * Polyfill namespace providing browser compatibility patches
 * Includes polyfills for:
 * - CustomEvent constructor for legacy IE support
 * - Object.values for older JavaScript environments
 * 
 * Import to automatically patch the global environment:
 * import 'reactstrap/lib/polyfill';
 * 
 * Or access via namespace:
 * import { Polyfill } from 'reactstrap';
 */
namespace Polyfill {
  // Polyfills are automatically applied when imported
  // No direct API - patches global objects
}