@esri/calcite-components
Version:
Web Components for Esri's Calcite Design System.
44 lines (43 loc) • 1.61 kB
TypeScript
import { TemplateResult } from 'lit-html';
import { JsxNode, LuminaJsx } from '@arcgis/lumina';
export interface InteractiveComponent {
/** The host element. */
readonly el: InteractiveHTMLElement;
/**
* When true, prevents user interaction.
*
* Notes:
*
* This prop should use the `@Prop` decorator and reflect.
* The `disabled` Sass mixin must be added to the component's stylesheet.
*/
disabled: boolean;
}
/**
* Exported for testing purposes only.
*
* @private
*/
export type InteractiveHTMLElement = HTMLElement & Pick<InteractiveComponent, "disabled">;
/**
* This helper updates the host element to prevent keyboard interaction on its subtree and sets the appropriate aria attribute for accessibility.
*
* This should be used in the `componentDidRender` lifecycle hook.
*
* **Notes**
*
* this util is not needed for simple components whose root element or elements are an interactive component (custom element or native control). For those cases, set the `disabled` props on the root components instead.
* technically, users can override `tabindex` and restore keyboard navigation, but this will be considered user error
*
* @param component
*/
export declare function updateHostInteraction(component: InteractiveComponent): void;
export interface InteractiveContainerProps extends LuminaJsx.CustomAttributes {
disabled: boolean;
}
export declare const CSS: {
container: string;
};
export declare const InteractiveContainer: ({ children, disabled, }: InteractiveContainerProps & {
children: JsxNode;
}) => TemplateResult;