Skip to content

Commit

Permalink
(focus-trap) Remove possibility to preovide lock as a function
Browse files Browse the repository at this point in the history
Is not really necessary, and I am trying to simplify the API as much as possible.
  • Loading branch information
DaviDevMod committed May 31, 2023
1 parent 97e8843 commit d6d2ecc
Show file tree
Hide file tree
Showing 5 changed files with 19 additions and 21 deletions.
5 changes: 5 additions & 0 deletions .changeset/beige-moons-develop.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@davidevmod/focus-trap': major
---

Remove possibility to preovide `lock` as a function.
22 changes: 11 additions & 11 deletions packages/focus-trap/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ A tiny library to trap the focus within your DOM elements.

- Trap the focus within a group of DOM elements
- Choose an element receiving the initial focus
- Customise the behaviour of clicks on elements outside of the trap
- Prevent clicks on elements outside of the trap
- Decide whether to demolish a trap after an <kbd>Esc</kbd> key press
- Choose an element receiving the focus after a trap is demolished
- Build, demolish, pause and resume your focus trap at any time
Expand Down Expand Up @@ -36,7 +36,7 @@ interface TrapConfig {
roots: Roots;
initialFocus?: boolean | Focusable | string;
returnFocus?: boolean | Focusable | string;
lock?: boolean | ((event: KeyboardEvent) => void);
lock?: boolean;
escape?: boolean;
}

Expand Down Expand Up @@ -92,13 +92,13 @@ By default, when building a focus trap by providing only `roots`, this is what h

You can tweak the behaviour of your trap by providing a `TrapConfig`:

| Property | Required | Type | Default value |
| ------------ | -------- | --------------------------------------------- | :-----------: |
| roots | Yes | `(Focusable \| string)[]` | - |
| initialFocus | No | `boolean \| Focusable \| string` | `true` |
| returnFocus | No | `boolean \| Focusable \| string` | `true` |
| lock | No | `boolean \| ((event: KeyboardEvent) => void)` | `true` |
| escape | No | `boolean` | `true` |
| Property | Required | Type | Default value |
| ------------ | -------- | -------------------------------- | :-----------: |
| roots | Yes | `(Focusable \| string)[]` | - |
| initialFocus | No | `boolean \| Focusable \| string` | `true` |
| returnFocus | No | `boolean \| Focusable \| string` | `true` |
| lock | No | `boolean` | `true` |
| escape | No | `boolean` | `true` |

- **roots**
The array of elements (and/or IDs) within which the focus has to be trapped.
Expand All @@ -116,7 +116,7 @@ You can tweak the behaviour of your trap by providing a `TrapConfig`:
- **lock**
The behavior for clicks outside of the trap.
By default clicks on elements outside of the trap are prevented.
You can provide the boolean `false` to switch off the default behaviour or alternatively your own handler for the click events in question.
You can provide the boolean `false` to switch off the default behaviour.

> **Note**
> Only `mousedown`, `touchstart`, `click` and the browser default behavior are prevented.
Expand All @@ -142,7 +142,7 @@ interface NormalisedTrapConfig {
roots: Focusable[];
initialFocus: boolean | Focusable;
returnFocus: Focusable | null;
lock: boolean | ((event: KeyboardEvent) => void);
lock: boolean;
escape: boolean;
}
```
Expand Down
3 changes: 0 additions & 3 deletions packages/focus-trap/cypress/e2e/trap-config/lock.cy.ts
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,5 @@ context('Test the `lock` trap configuration option.', () => {

cy.get('@attemptFocus').should('be.focused');
});

// I will write it eventually.
it.skip('`lock` should be used as handler for clicks outside of the trap, when passed as a function', () => {});
});
});
6 changes: 1 addition & 5 deletions packages/focus-trap/src/events.ts
Original file line number Diff line number Diff line change
Expand Up @@ -46,11 +46,7 @@ export const eventListeners = (action: 'ADD' | 'REMOVE'): void => {

if (state.normalisedConfig?.lock) {
for (const event of ['mousedown', 'touchstart', 'click']) {
(document[listenerActions[action]] as Function)(
event,
state.normalisedConfig.lock === true ? handleOutsideClick : state.normalisedConfig.lock,
true
);
(document[listenerActions[action]] as Function)(event, handleOutsideClick, true);
}
}
};
4 changes: 2 additions & 2 deletions packages/focus-trap/src/state.ts
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export interface TrapConfig {
roots: Roots;
initialFocus?: boolean | Focusable | string;
returnFocus?: boolean | Focusable | string;
lock?: boolean | ((event: KeyboardEvent) => void);
lock?: boolean;
escape?: boolean;
}

Expand All @@ -23,7 +23,7 @@ export interface NormalisedTrapConfig {
roots: Focusable[];
initialFocus: boolean | Focusable;
returnFocus: Focusable | null;
lock: boolean | ((event: KeyboardEvent) => void);
lock: boolean;
escape: boolean;
}

Expand Down

0 comments on commit d6d2ecc

Please sign in to comment.