Primitives / foldkit-primitives/interaction

DismissLayer

namespace · packages/primitives/src/interaction/dismiss-layer.ts:12

export * as DismissLayer from './dismiss-layer.js'

Dismissable layers: Escape closes the topmost open layer, a pointer press outside closes the layers it is outside of. One Bundle, placed once, owns the document listeners; each layer's Behavior marks its container (and its trigger) with data attributes. The stack is the DOM order of the marked elements at the moment of the event, so a layer opening or closing needs no registration. A press inside a parent layer is outside its children, so the parent stays and the children go; a press on a layer's trigger counts as inside it, so a trigger never dismisses and reopens in one click. What a dismissal does is the placement's onOut.

In the guides

Members

DismissLayer.behavior

function · packages/primitives/src/interaction/dismiss-layer.ts:177

function behavior<Field extends string>(
  _declared: Declared<typeof bundle, Field>,
): <Slots>(
  slots: Slots,
) => <Input, ParentMessage>(
  options: BehaviorOptions<Input, Slots>,
) => Behavior.NamedBehavior<Slots, Input, ParentMessage>

Marks the layer's container and trigger for the placed stack. The layer takes part only while its element is rendered, so an open flag in the parent Model is the whole lifecycle. Not for an element with popover, which the browser dismisses itself.

DismissLayer.BehaviorOptions

interface · packages/primitives/src/interaction/dismiss-layer.ts:159

interface BehaviorOptions<Input, Slots> {
  readonly layer: keyof Slots & string
  readonly trigger?: keyof Slots & string
  readonly id: (input: Input) => string
  readonly outsidePress?: boolean
  readonly escape?: boolean
}

DismissLayer.bundle

const · packages/primitives/src/interaction/dismiss-layer.ts:77

const bundle: Bundle.Bundle<
  'DismissLayer',
  void,
  {
    readonly layers: readonly {
      readonly id: string
      readonly outside: boolean
      readonly escape: boolean
    }[]
  },
  | {
      readonly _tag: 'PressedEscape'
      readonly layers: readonly {
        readonly id: string
        readonly outside: boolean
        readonly escape: boolean
      }[]
    }
  | {
      readonly _tag: 'PressedAt'
      readonly layers: readonly {
        readonly id: string
        readonly outside: boolean
        readonly escape: boolean
      }[]
      readonly inside: readonly string[]
    },
  { readonly _tag: 'Dismiss'; readonly ids: readonly string[] },
  never,
  never,
  void,
  {},
  {}
>

DismissLayer.Dismiss

const · packages/primitives/src/interaction/dismiss-layer.ts:48

const Dismiss: Schema.TaggedStruct<
  'Dismiss',
  { readonly ids: Schema.$Array<Schema.String> }
>

DismissLayer.Layer

const · packages/primitives/src/interaction/dismiss-layer.ts:26

const Layer: Schema.Struct<{
  readonly id: Schema.String
  readonly outside: Schema.Boolean
  readonly escape: Schema.Boolean
}>

An open layer as the document showed it: bottom to top is DOM order.

DismissLayer.LAYER_ATTRIBUTE

const · packages/primitives/src/interaction/dismiss-layer.ts:20

const LAYER_ATTRIBUTE: 'data-foldkit-plus-layer'

DismissLayer.layersOnPath

function · packages/primitives/src/interaction/dismiss-layer.ts:114

function layersOnPath(path: ReadonlyArray<EventTarget>): ReadonlyArray<string>

The layer ids whose element or trigger is on the event's composed path.

DismissLayer.Message

const · packages/primitives/src/interaction/dismiss-layer.ts:41

const Message: MessageUnion<{
  readonly PressedAt: {
    readonly layers: Schema.$Array<
      Schema.Struct<{
        readonly id: Schema.String
        readonly outside: Schema.Boolean
        readonly escape: Schema.Boolean
      }>
    >
    readonly inside: Schema.$Array<Schema.String>
  }
  readonly PressedEscape: {
    readonly layers: Schema.$Array<
      Schema.Struct<{
        readonly id: Schema.String
        readonly outside: Schema.Boolean
        readonly escape: Schema.Boolean
      }>
    >
  }
}>

DismissLayer.Model

const · packages/primitives/src/interaction/dismiss-layer.ts:35

const Model: Schema.Struct<{
  readonly layers: Schema.$Array<
    Schema.Struct<{
      readonly id: Schema.String
      readonly outside: Schema.Boolean
      readonly escape: Schema.Boolean
    }>
  >
}>

DismissLayer.toDismiss

function · packages/primitives/src/interaction/dismiss-layer.ts:52

function toDismiss(
  layers: ReadonlyArray<Layer>,
  inside: ReadonlyArray<string>,
): ReadonlyArray<string>

Which layers a press inside inside dismisses: every layer above the topmost one hit, or all when none was.

DismissLayer.TRIGGER_ATTRIBUTE

const · packages/primitives/src/interaction/dismiss-layer.ts:21

const TRIGGER_ATTRIBUTE: 'data-foldkit-plus-layer-trigger'