@konturio/ui-kit

UI Kit Component Library

Component Structure

This document lists all React components found within the ui-kit package, including those in nested directories. It also provides descriptions for utility functions.

Core Components

• ActionsBar ↗
• Animation ↗
• AppHeader ↗
• Autocomplete ↗
  • AutocompleteButton ↗
  • AutocompleteItem ↗
• Button ↗
• ButtonGroup ↗
• Card ↗
• Checkbox ↗
• Details ↗
• Divider ↗
• Dropdown ↗
  • DropdownItem ↗
  • DropdownItems ↗
  • DropdownPopover ↗
  • DropdownProviderContainer ↗
  • DropdownTrigger ↗
• Heading ↗
• Input ↗
• IsochroneSlider ↗
• LanguageSelect ↗
• Legend ↗
• LineItem ↗
• Logo ↗
• MCDALegend ↗
• MenuButton ↗
  • Menu ↗
  • MenuItem ↗
  • MenuLink ↗
  • MenuList ↗
  • MenuPopover ↗
• Modal ↗
• ModalDialog ↗
• Panel ↗
• Popover ↗
• Radio ↗
• Rotator ↗
• Select ↗
  • SelectButton ↗
    • Placeholder ↗
    • SelectContent ↗
  • SelectItem ↗
  • MultiselectChip ↗
  • MultiselectChipWithSearch ↗
• Selector ↗
• Slider ↗
• Tabs ↗
  • Tab ↗
  • TabList ↗
  • TabPanel ↗
• Text ↗
• Textarea ↗
• TimeSlider ↗
• Timeline ↗
• Toggler ↗
• Tooltip ↗

Utility Components and Functions

• component-helpers ↗

  • Polymorphic ↗
    • A utility for creating polymorphic components that can render as different HTML elements or other React components.
  • Descendants ↗
    • Provides utilities for managing a list of descendant components, enabling features like keyboard navigation and focus management within composite components.
    • createDescendantContext: Creates a React context for managing descendant components.
    • DescendantProvider: Provides the descendant context to its children.
    • useDescendant: A hook for registering a component as a descendant within the context.
    • useDescendantKeyDown: A hook for handling keyboard events within a descendant component, used for navigation.
    • useDescendants: A hook that provides access to the list of registered descendants.
    • useDescendantsInit: Initializes the descendant context.

• events ↗ -composeEventHandlers: Combines multiple event handlers into a single function. Useful when you need to call both a component's internal handler and a handler passed in as a prop.

• helpers ↗

  • focusElement: Focuses a given DOM element.
  • getOwnerDocument: Gets the document that owns a given element.
  • isRightClick: Checks if a mouse event was a right-click.
  • makeId: Generates a unique ID string, optionally combining it with a prefix. Useful for creating unique IDs for ARIA attributes.
  • noop: A function that does nothing. Useful as a placeholder for optional callback props.

• hooks ↗

  • useComposedRefs: Combines multiple refs (e.g., a forwarded ref and an internal ref) into a single ref. This is useful when you need to interact with a component's DOM node from both inside and outside the component.
  • useControlledState: A hook for managing state that can be either controlled (by props) or uncontrolled (managed internally).
  • useForceUpdate: Provides a function that forces a component to re-render.
  • usePrevious: Returns the previous value of a given variable.
  • useStatefulRefValue: Creates a ref whose current value is always up-to-date, avoiding stale closure issues.

• typecheck ↗ -isFunction: Checks if a value is a function.

  • isString: Checks if a value is string

Additional Notes

• The components are styled using CSS Modules.
• The library utilizes a descendant system to manage relationships between components.
• The Timeline component wraps the vis-timeline library for enhanced functionality.