# @askrjs/ui/dismissable-layer

> Published API exports for @askrjs/ui/dismissable-layer.

Source: [https://askrjs.com/docs/reference/api/ui/dismissable-layer](https://askrjs.com/docs/reference/api/ui/dismissable-layer)

Status: stable. Packages: @askrjs/ui/dismissable-layer.

**Published packages are authoritative.** Examples may lag behind a published contract. When guidance differs, verify the exports and TypeScript declarations in your installed package, then file an issue.

## Exports

This entrypoint publishes 6 exports from the declarations shipped by @askrjs/ui.

### `DISMISSABLE_LAYER_A11Y_CONTRACT`

```ts
DISMISSABLE_LAYER_A11Y_CONTRACT: { readonly DISMISS_EVENTS: readonly ["escape-key", "outside-pointer"]; readonly INTERACTION_POLICY: "background-dismissable"; }
```

Dismissable layer accessibility contract.

### `DismissableLayer`

```ts
DismissableLayer: { (props: DismissableLayerProps): JSX.Element; (props: DismissableLayerAsChildProps): JSX.Element; }
```

Renders a part of `dismissable-layer`.

Supports polymorphic rendering via `asChild`.

### `DismissableLayerA11yContract`

```ts
DismissableLayerA11yContract: typeof DISMISSABLE_LAYER_A11Y_CONTRACT
```

Type of the Dismissable Layer A11y Contract object.

### `DismissableLayerAsChildProps`

```ts
DismissableLayerAsChildProps: DismissableLayerOwnProps & {
  asChild: true;
  children: JSXElement;
  ref?: Ref<Element>;
}
```

Props for the `asChild` (polymorphic) rendering of Dismissable Layer.

- `asChild`: asChild: true;

- `children`: children: JSXElement;

- `disabled`: disabled?: boolean | undefined;

- `disableOutsidePointerEvents`: disableOutsidePointerEvents?: boolean | undefined;

- `id`: id?: string | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<Element>;

### `DismissableLayerOwnProps`

```ts
DismissableLayerOwnProps: {
  children?: unknown;
  id?: string;
  disabled?: boolean;
  disableOutsidePointerEvents?: boolean;
  onEscapeKeyDown?: (event: KeyboardEvent) => void;
  onPointerDownOutside?: (event: PointerEvent) => void;
  onInteractOutside?: (event: Event) => void;
  onDismiss?: () => void;
}
```

Own props for Dismissable Layer, before merging with native element attributes.

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `disableOutsidePointerEvents`: disableOutsidePointerEvents?: boolean | undefined;

- `id`: id?: string | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

### `DismissableLayerProps`

```ts
DismissableLayerProps: Omit<JSX.IntrinsicElements['div'], 'children' | 'ref'> & DismissableLayerOwnProps & {
  asChild?: false;
  ref?: Ref<HTMLDivElement>;
}
```

Props for Dismissable Layer.

- `asChild`: asChild?: false | undefined;

- `children`: children?: unknown;

- `disabled`: disabled?: boolean | undefined;

- `disableOutsidePointerEvents`: disableOutsidePointerEvents?: boolean | undefined;

- `id`: id?: string | undefined;

- `onDismiss`: onDismiss?: (() => void) | undefined;

- `onEscapeKeyDown`: onEscapeKeyDown?: ((event: KeyboardEvent) => void) | undefined;

- `onInteractOutside`: onInteractOutside?: ((event: Event) => void) | undefined;

- `onPointerDownOutside`: onPointerDownOutside?: ((event: PointerEvent) => void) | undefined;

- `ref`: ref?: Ref<HTMLDivElement>;

## Documentation navigation

[Previous](https://askrjs.com/docs/reference/api/ui/dialog/index.md) | [Next](https://askrjs.com/docs/reference/api/ui/dropdown/index.md)