Package-level declarations

Types

Link copied to clipboard
object Aria

Predefined constants for all ARIA attributes

Link copied to clipboard
class AriaReferenceHook<C : Tag<*>>(name: String) : Hook<C, Unit, Unit>

This hook encapsulates the generation of some ARIA-attribute, that deals with referencing some other tag by id.

Link copied to clipboard
class AttributeHook<C : Tag<*>, T>(valueSetter: C.(T) -> Unit, flowOfValueSetter: C.(Flow<T>) -> Unit) : Hook<C, Unit, Unit>

This Hook encapsulates the effect of setting an attribute to a Tag.

Link copied to clipboard
class BooleanAttributeHook<C : Tag<*>>(valueSetter: C.(Boolean, String) -> Unit, flowOfValueSetter: C.(Flow<Boolean>, String) -> Unit, trueValue: String = "") : Hook<C, Unit, Unit>

This Hook encapsulates the effect of setting a boolean attribute to a Tag.

Link copied to clipboard

This property keeps track of the external data-binding of some component.

Link copied to clipboard

Expressive model for any Direction with usable value for index manipulation:

Link copied to clipboard
typealias Effect<C, R, P> = C.(P, R.() -> Unit?) -> Unit

This alias should express the main concept of a Hook: The encapsulated effect; that is applying some function with a payload P onto a receiver C (often some Tag). Optionally you can pass in an also-expression that is called on the Result R.

Link copied to clipboard
class Exporter<T : Any>(initialize: Exporter<T>.() -> Unit)

An Exporter is a simple container for capturing some return value. Its main purpose is to reduce boilerplate code if the value to be returned is created within some nested structure and would therefor need some preliminary defined var outside the structure and some explicit return of the value afterwards.

Link copied to clipboard
data class FocusOptions(val first: Boolean = false, val previous: Boolean = false, val next: Boolean = false, val last: Boolean = false, val wrapAround: Boolean = false, val noScroll: Boolean = false)
Link copied to clipboard
Link copied to clipboard
abstract class Hook<C, R, P> : Property<Effect<C, R, P>>

A Hook is a special kind of Property that encapsulates an Effect as the Property's value.

Link copied to clipboard

This type is used to decide which strategy for setting an initial focus is appropriate for trapFocus function.

Link copied to clipboard
abstract class OpenClose

Base class that provides all functionality needed for components, that have some "open" and "close" state of representation.

Link copied to clipboard

Expressive model for the orientation of some (UI) element.

Link copied to clipboard
abstract class PopUpPanel<C : HTMLElement>(renderContext: RenderContext, tagFactory: TagFactory<Tag<C>>, classes: String?, id: String?, scope: ScopeContext.() -> Unit, opened: Flow<Boolean>, fullWidth: Boolean = true, reference: Tag<HTMLElement>?, ariaHasPopup: String, popperDiv: HtmlTag<HTMLDivElement> = renderContext.div(POPUP_HIDDEN) {}, tag: Tag<C> = tagFactory(popperDiv, classes, id, scope) {}) : Tag<C>

Base class that provides the functionality to create popup components.

Link copied to clipboard
abstract class Property<T>

This class implements the concept of some data holder, that can be configured after construction by some client code. A property is usually used within some kind of component, which needs to hold some specific data portion in order to work, but to delegate the setup of the data to the client code.

Link copied to clipboard
Link copied to clipboard
data class Sorting<T>(val comparatorAscending: Comparator<T>, val comparatorDescending: Comparator<T>)
Link copied to clipboard
data class SortingOrder<T>(val sorting: Sorting<T>, val direction: SortDirection)
Link copied to clipboard
typealias TagFactory<C> = (RenderContext, String?, String?, ScopeContext.() -> Unit, C.() -> Unit) -> C

Alias in order to reduce boilerplate code for the awkward signature of a Tag-factory of RenderContext.

In order to provide some instance, just refer to one of the existing factories in RenderContext:

val div: TagFactory<HTMLDivElement> = RenderContext::div
Link copied to clipboard
abstract class TagHook<R : Tag<*>, P, I> : Hook<RenderContext, R, TagPayload<P>>

This hook abstraction simplifies a Tag creating Hook by offering static invoke methods, which already deal with constructing the value field, so that an abstract renderTag method is called. This covers the typical use case where a client only wants to configure exactly one value (flow or static) and the hook should use this to render some artifact.

Link copied to clipboard
typealias TagPayload<P> = Triple<String?, String?, P>

This specialized payload alias should express the common needed parameters when the Effect render some Tag, so it uses a Triple to group a String for the classes, a String for the Tag's id and the unspecific payload P itself.

Always use this special payload type, if the Hook creates some Tag!

Link copied to clipboard

Functions

Link copied to clipboard
fun addComponentStructureInfo(comment: String, scope: Scope, context: RenderContext): Unit?

This function will add the name of the corresponding component factory or brick into the DOM as comment node.

Link copied to clipboard
fun <N : Element> Tag<N>.attrIfNotSet(name: String, value: String)

Sets an attribute only if it is not present yet.

Link copied to clipboard
fun <T : Any> export(scope: Exporter<T>.() -> Unit): T

Scoping function to capture some value by an Exporter and return the value.

Link copied to clipboard
fun focusIn(container: HTMLElement, focusOptions: FocusOptions): FocusResult
Link copied to clipboard
fun getFocusableElements(container: HTMLElement? = document.body): List<HTMLElement>
Link copied to clipboard
fun <C, R> C.hook(h: Hook<C, R, Unit>): Unit?

This hook method applies a Hook's encapsulated behaviour to the calling context.

fun <C, R> C.hook(vararg h: Hook<C, R, Unit>)

This hook method applies multiple Hook's encapsulated behaviour to the calling context with the payload of type Unit.

fun <C, R, P> C.hook(h: Hook<C, R, P>, payload: P): Unit?

This hook method applies a Hook's encapsulated behaviour to the calling context and passes a given payload.

fun <C, R, P> C.hook(h: Hook<C, R, TagPayload<P>>, classes: String?, id: String?, payload: P): Unit?

This hook method applies a Hook's encapsulated behaviour to the calling context with a specific payload TagPayload, which is tailored to Tag creation, as it offers parameters for the id and a styling parameter classes on top to the generic payload P.

Link copied to clipboard
fun isElementWithinFocusableElements(element: HTMLElement, container: HTMLElement? = document.body): Boolean
Link copied to clipboard
fun <T> List<T>.rotateNext(element: T): T?

Implements a forward cycling through a List instance.

Link copied to clipboard
fun <T> List<T>.rotatePrevious(element: T): T?

Implements a backwards cycling through a List instance.

Link copied to clipboard
suspend fun Tag<HTMLElement>.setFocus(maxRetries: Int = 10)

Sets focus on the Tag it is called on. Continues to try setting the focus until it was successful or the maximum number of retries is reached. Use this function for example to set the focus on an element that just becomes visible.

Link copied to clipboard

Mark some Tag with a data-attribute INITIAL_FOCUS_DATA_ATTR so that the trapFocus function can find this Tag and set the initial focus to it.

Link copied to clipboard
fun Tag<HTMLElement>.trapFocus(restoreFocus: Boolean = true, setInitialFocus: InitialFocus = TryToSet)

This function enables a so called focus-trap. This enforces the specific behaviour within the receiver Tag, that switching the focus is only possible on elements that are inside the receiver. No other focusable elements outside the enclosing container will get the focus.

Link copied to clipboard
fun Tag<HTMLElement>.trapFocusWhenever(condition: Flow<Boolean>, restoreFocus: Boolean = true, setInitialFocus: InitialFocus = TryToSet)

This variant of trapFocus allows to reactively trap a focus based on a conditional Flow of Boolean.

Properties

Link copied to clipboard
Link copied to clipboard

This key is used to enable helpful information about the structure of headless components within the final HTML representation.