@nextcloud/focus-trap

@nextcloud/focus-trap

Wrapper over focus-trap library to have more than one instance activate at the same time.

Install

npm install @nextcloud/focus-trap -S

yarn add @nextcloud/focus-trap

The API is the same of focus-trap, just follow the doc.

import { createFocusTrap } from '@nextcloud/focus-trap';

Example

Vue.js v3

Check src/ to full example.

import type { ComputedRef, Ref } from 'vue';
import type { FocusTrap } from '@nextcloud/focus-trap';

import { watchEffect, onBeforeUnmount } from 'vue';
import { createFocusTrap } from '@nextcloud/focus-trap';

type Input = ComputedRef<boolean> | Ref<boolean>;

const useFocusTrap = (state: Input, el: Ref<HTMLElement | null>): void => {
  let focusTrap: FocusTrap | null = null;

  const onOpen = (): void => {
    if (el.value == null) {
      return;
    }

    focusTrap = createFocusTrap(el.value, {
      escapeDeactivates: false,
      allowOutsideClick: true,
    });

    focusTrap.activate();
  };

  const onClose = (): void => {
    if (focusTrap == null) {
      return;
    }

    focusTrap.deactivate();
    focusTrap = null;
  };

  watchEffect(() => {
    state.value
      ? requestAnimationFrame(onOpen)
      : requestAnimationFrame(onClose);
  });

  onBeforeUnmount(onClose);
};

export { useFocusTrap };

Development

This project is build on top of

• focus-trap
• TypeScript
• Vite
• Vitest
• Vue
• Tailwindcss

Install dependencies

npm install

Run tests

# test single run
npm run test

# test with coverage
npm run test -- --coverage

# watch tests and code changes
npm run test:watch

Run demo app

npm run dev

Linter & Format

# apply prettier
npm run format

# run eslint
npm run lint

# apply fix to eslint errors
npm run lint:fix

# check lint and format
npm run check