flowbite-svelte 0.26.30 → 0.27.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (16) hide show
  1. package/CHANGELOG.md +35 -0
  2. package/forms/Iconinput.svelte +67 -43
  3. package/forms/Iconinput.svelte.d.ts +13 -0
  4. package/forms/Input.svelte +29 -28
  5. package/forms/Input.svelte.d.ts +1 -0
  6. package/modals/Modal.svelte +85 -86
  7. package/modals/Modal.svelte.d.ts +1 -0
  8. package/package.json +1 -1
  9. package/tabs/TabHead.svelte +1 -1
  10. package/tabs/TabHead.svelte.d.ts +1 -1
  11. package/tabs/TabHeadItem.svelte +1 -1
  12. package/tabs/TabHeadItem.svelte.d.ts +1 -1
  13. package/tabs/TabWrapper.svelte +1 -2
  14. package/tabs/TabWrapper.svelte.d.ts +0 -2
  15. package/utils/focusTrap.d.ts +1 -2
  16. package/utils/focusTrap.js +37 -50
package/CHANGELOG.md CHANGED
@@ -2,6 +2,41 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [0.27.1](https://github.com/themesberg/flowbite-svelte/compare/v0.27.0...v0.27.1) (2022-09-24)
6
+
7
+
8
+ ### Features
9
+
10
+ * modal block background scroll ([f3eb627](https://github.com/themesberg/flowbite-svelte/commit/f3eb62732dc899d6f1483d9f86a5c644c8d2edd2))
11
+ * modal internal scrolling ([7ca08ea](https://github.com/themesberg/flowbite-svelte/commit/7ca08ea939e0116241c564738ec237bd501ca32c))
12
+
13
+
14
+ ### Bug Fixes
15
+
16
+ * placement and padding ([169c749](https://github.com/themesberg/flowbite-svelte/commit/169c749004d16d9b7c1aef46448608beefd3caf7))
17
+
18
+ ## [0.27.0](https://github.com/themesberg/flowbite-svelte/compare/v0.26.31...v0.27.0) (2022-09-24)
19
+
20
+
21
+ ### Features
22
+
23
+ * add server hooks to redirect component pages and add redirect.spec test ([9e2cb72](https://github.com/themesberg/flowbite-svelte/commit/9e2cb72653cb2de16f77c30d73bd69a69bd73bd5))
24
+
25
+
26
+ ### Bug Fixes
27
+
28
+ * add other dir ([dc5e73f](https://github.com/themesberg/flowbite-svelte/commit/dc5e73feaa44c3fc7f020967f2e342b08bafccdf))
29
+ * add redirect to all other directories ([6ca9ce0](https://github.com/themesberg/flowbite-svelte/commit/6ca9ce0c38c2a417fc1bcd88520e609a0e1b2b0e))
30
+
31
+ ### [0.26.31](https://github.com/themesberg/flowbite-svelte/compare/v0.26.30...v0.26.31) (2022-09-23)
32
+
33
+
34
+ ### Bug Fixes
35
+
36
+ * add default style to TabHeadItem and TabHead and removed {tabStyle} from default example in tab page ([a9025c4](https://github.com/themesberg/flowbite-svelte/commit/a9025c432d57fe6896ab20249d711ff7739c9f1c))
37
+ * add events to IconInput and on:input to Input components ([6668918](https://github.com/themesberg/flowbite-svelte/commit/66689185cd6cdf94ab66e1ff05ba33fbcaf6be0f))
38
+ * remove activeTabvalue from TabWrapper and let:tabId vrom tab page examples ([ee1b444](https://github.com/themesberg/flowbite-svelte/commit/ee1b444cd552de4cd0c13e4356159ce44a864024))
39
+
5
40
  ### [0.26.30](https://github.com/themesberg/flowbite-svelte/compare/v0.26.29...v0.26.30) (2022-09-22)
6
41
 
7
42
 
package/forms/Iconinput.svelte CHANGED
@@ -10,48 +10,72 @@ export let noBorderDivClass = 'flex absolute inset-y-0 left-0 items-center pl-3'
10
10
  </script>
11
11
 
12
12
  {#if noBorder}
13
- <div class="relative">
14
- <div
15
- class={classNames(
16
- noBorderDivClass,
17
- {
18
- 'p-2 sm:text-xs': size === 'sm',
19
- 'p-2.5 text-sm': size === 'md',
20
- 'sm:text-md p-4': size === 'lg'
21
- },
22
- pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
23
- )}>
24
- <slot />
25
- </div>
26
- <input
27
- {...$$restProps}
28
- bind:value
29
- class={classNames(
30
- noBorderInputClass,
31
- {
32
- 'p-2 sm:text-xs pl-9': size === 'sm',
33
- 'p-2.5 text-sm pl-10': size === 'md',
34
- 'sm:text-md p-4 pl-11': size === 'lg'
35
- },
36
- $$props.class
37
- )} />
38
- </div>
13
+ <div class="relative">
14
+ <div
15
+ class={classNames(
16
+ noBorderDivClass,
17
+ {
18
+ 'p-2 sm:text-xs': size === 'sm',
19
+ 'p-2.5 text-sm': size === 'md',
20
+ 'sm:text-md p-4': size === 'lg'
21
+ },
22
+ pointerEvent ? 'cursor-pointer' : 'pointer-events-none'
23
+ )}>
24
+ <slot />
25
+ </div>
26
+ <input
27
+ {...$$restProps}
28
+ bind:value
29
+ on:blur
30
+ on:change
31
+ on:click
32
+ on:focus
33
+ on:keydown
34
+ on:keypress
35
+ on:keyup
36
+ on:mouseover
37
+ on:mouseenter
38
+ on:mouseleave
39
+ on:paste
40
+ on:input
41
+ class={classNames(
42
+ noBorderInputClass,
43
+ {
44
+ 'p-2 sm:text-xs pl-9': size === 'sm',
45
+ 'p-2.5 text-sm pl-10': size === 'md',
46
+ 'sm:text-md p-4 pl-11': size === 'lg'
47
+ },
48
+ $$props.class
49
+ )} />
50
+ </div>
39
51
  {:else}
40
- <div class="flex">
41
- <span class={spanClass}>
42
- <slot />
43
- </span>
44
- <input
45
- {...$$restProps}
46
- bind:value
47
- class={classNames(
48
- inputClass,
49
- {
50
- 'p-2 sm:text-xs': size === 'sm',
51
- 'p-2.5 text-sm': size === 'md',
52
- 'sm:text-md p-4': size === 'lg'
53
- },
54
- $$props.class
55
- )} />
56
- </div>
52
+ <div class="flex">
53
+ <span class={spanClass}>
54
+ <slot />
55
+ </span>
56
+ <input
57
+ {...$$restProps}
58
+ bind:value
59
+ on:blur
60
+ on:change
61
+ on:click
62
+ on:focus
63
+ on:keydown
64
+ on:keypress
65
+ on:keyup
66
+ on:mouseover
67
+ on:mouseenter
68
+ on:mouseleave
69
+ on:paste
70
+ on:input
71
+ class={classNames(
72
+ inputClass,
73
+ {
74
+ 'p-2 sm:text-xs': size === 'sm',
75
+ 'p-2.5 text-sm': size === 'md',
76
+ 'sm:text-md p-4': size === 'lg'
77
+ },
78
+ $$props.class
79
+ )} />
80
+ </div>
57
81
  {/if}
package/forms/Iconinput.svelte.d.ts CHANGED
@@ -12,6 +12,19 @@ declare const __propDef: {
12
12
  noBorderDivClass?: string | undefined;
13
13
  };
14
14
  events: {
15
+ blur: FocusEvent;
16
+ change: Event;
17
+ click: MouseEvent;
18
+ focus: FocusEvent;
19
+ keydown: KeyboardEvent;
20
+ keypress: KeyboardEvent;
21
+ keyup: KeyboardEvent;
22
+ mouseover: MouseEvent;
23
+ mouseenter: MouseEvent;
24
+ mouseleave: MouseEvent;
25
+ paste: ClipboardEvent;
26
+ input: Event;
27
+ } & {
15
28
  [evt: string]: CustomEvent<any>;
16
29
  };
17
30
  slots: {
package/forms/Input.svelte CHANGED
@@ -19,31 +19,32 @@ const setType = (node) => {
19
19
  </script>
20
20
 
21
21
  <input
22
- {...$$restProps}
23
- bind:value
24
- on:blur
25
- on:change
26
- on:click
27
- on:focus
28
- on:keydown
29
- on:keypress
30
- on:keyup
31
- on:mouseover
32
- on:mouseenter
33
- on:mouseleave
34
- on:paste
35
- use:setType
36
- class={classNames(
37
- inputClass,
38
- colorClasses[color],
39
- color === 'base' &&
40
- (background
41
- ? 'dark:bg-gray-600 dark:border-gray-500'
42
- : 'dark:bg-gray-700 dark:border-gray-600'),
43
- {
44
- 'p-2 sm:text-xs': size === 'sm',
45
- 'p-2.5 text-sm': size === 'md',
46
- 'sm:text-md p-4': size === 'lg'
47
- },
48
- $$props.class
49
- )} />
22
+ {...$$restProps}
23
+ bind:value
24
+ on:blur
25
+ on:change
26
+ on:click
27
+ on:focus
28
+ on:keydown
29
+ on:keypress
30
+ on:keyup
31
+ on:mouseover
32
+ on:mouseenter
33
+ on:mouseleave
34
+ on:paste
35
+ on:input
36
+ use:setType
37
+ class={classNames(
38
+ inputClass,
39
+ colorClasses[color],
40
+ color === 'base' &&
41
+ (background
42
+ ? 'dark:bg-gray-600 dark:border-gray-500'
43
+ : 'dark:bg-gray-700 dark:border-gray-600'),
44
+ {
45
+ 'p-2 sm:text-xs': size === 'sm',
46
+ 'p-2.5 text-sm': size === 'md',
47
+ 'sm:text-md p-4': size === 'lg'
48
+ },
49
+ $$props.class
50
+ )} />
package/forms/Input.svelte.d.ts CHANGED
@@ -21,6 +21,7 @@ declare const __propDef: {
21
21
  mouseenter: MouseEvent;
22
22
  mouseleave: MouseEvent;
23
23
  paste: ClipboardEvent;
24
+ input: Event;
24
25
  } & {
25
26
  [evt: string]: CustomEvent<any>;
26
27
  };
package/modals/Modal.svelte CHANGED
@@ -1,61 +1,53 @@
1
- <script>import Frame from '../utils/Frame.svelte';
1
+ <script>import classNames from 'classnames';
2
+ import Frame from '../utils/Frame.svelte';
2
3
  import { createEventDispatcher } from 'svelte';
3
4
  import CloseButton from '../utils/CloseButton.svelte';
4
5
  import focusTrap from '../utils/focusTrap';
5
6
  export let open = false;
6
- export let title = undefined;
7
+ export let title = '';
7
8
  export let size = 'md';
8
9
  export let placement = 'center';
9
10
  export let autoclose = true;
10
- export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80 fixed inset-0 z-40';
11
+ export let backdropClasses = 'bg-gray-900 bg-opacity-50 dark:bg-opacity-80';
11
12
  const dispatch = createEventDispatcher();
12
- const allPlacementClasses = [
13
- 'justify-start',
14
- 'justify-center',
15
- 'justify-end',
16
- 'items-start',
17
- 'items-center',
18
- 'items-end'
19
- ];
20
- let backdropEl;
21
- const init = (node, _open) => {
22
- getPlacementClasses().map((c) => node.classList.add(c));
23
- _open && createBackdrop(node);
13
+ function blockEvent(e) {
14
+ e.preventDefault();
15
+ e.stopPropagation();
16
+ return false;
17
+ }
18
+ function contentInit(node) {
19
+ function keydownHandler(e) {
20
+ if (open && e.key === 'Escape')
21
+ return hide();
22
+ const target = e.target;
23
+ if (node.contains(target))
24
+ return true;
25
+ if (e.key === 'ArrowDown' || e.key === 'ArrowUp')
26
+ return blockEvent(e);
27
+ return true;
28
+ }
29
+ document.addEventListener('keydown', keydownHandler, { passive: false });
30
+ node.focus();
24
31
  return {
25
- update(_open) {
26
- allPlacementClasses.map((c) => node.classList.remove(c));
27
- getPlacementClasses().map((c) => node.classList.add(c));
28
- _open ? createBackdrop(node) : destroyBackdrop(node);
29
- },
30
32
  destroy() {
31
- destroyBackdrop(node);
33
+ document.removeEventListener('keydown', keydownHandler);
32
34
  }
33
35
  };
34
- };
35
- const handleEscape = (e) => {
36
- if (open && e.key === 'Escape')
37
- open = false;
38
- };
39
- const createBackdrop = (node) => {
40
- if (!backdropEl) {
41
- backdropEl = document.createElement('div');
42
- backdropEl.classList.add(...backdropClasses.split(' '));
43
- const body = document.querySelector('body');
44
- body.append(backdropEl);
45
- body.style.overflow = 'hidden';
46
- document.addEventListener('keydown', handleEscape, true);
36
+ }
37
+ function init(node) {
38
+ function preventScroll(e) {
39
+ if (e.target === node)
40
+ return blockEvent(e);
47
41
  }
42
+ node.addEventListener('wheel', preventScroll, { passive: false });
48
43
  dispatch('show', node);
49
- };
50
- const destroyBackdrop = (node) => {
51
- const body = document.querySelector('body');
52
- body.style.overflow = 'auto';
53
- if (backdropEl)
54
- backdropEl.remove();
55
- backdropEl = undefined;
56
- document.removeEventListener('keydown', handleEscape, true);
57
- dispatch('hide', node);
58
- };
44
+ return {
45
+ destroy() {
46
+ node.removeEventListener('wheel', preventScroll);
47
+ dispatch('hide', node);
48
+ }
49
+ };
50
+ }
59
51
  const getPlacementClasses = () => {
60
52
  switch (placement) {
61
53
  // top
@@ -90,53 +82,60 @@ const sizes = {
90
82
  lg: 'max-w-4xl',
91
83
  xl: 'max-w-7xl'
92
84
  };
93
- const onButtonsClick = ({ target }) => {
94
- if (autoclose && target.tagName === 'BUTTON')
85
+ const onAutoClose = (e) => {
86
+ const target = e.target;
87
+ if (autoclose && target?.tagName === 'BUTTON')
95
88
  open = !open;
96
89
  };
97
90
  const hide = () => {
98
91
  open = false;
99
92
  };
93
+ let mainClass;
94
+ $: mainClass = classNames('flex overflow-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full', backdropClasses, getPlacementClasses().join(' '), $$props.class);
100
95
  </script>
101
96
 
102
97
  <!-- Main modal -->
103
- <div
104
- tabindex="-1"
105
- class="hidden overflow-y-auto overflow-x-hidden fixed top-0 right-0 left-0 z-50 w-full md:inset-0 h-modal md:h-full"
106
- class:flex={open}
107
- class:hidden={!open}
108
- aria-hidden={open ? undefined : 'true'}
109
- aria-modal={open ? 'true' : undefined}
110
- role={open ? 'dialog' : undefined}
111
- use:init={open}
112
- use:focusTrap={open}
113
- on:click={onButtonsClick}>
114
- <div class="relative p-4 w-full {sizes[size]} h-full md:h-auto">
115
- <!-- Modal content -->
116
- <Frame rounded shadow class="relative">
117
- <!-- Modal header -->
118
- {#if $$slots.header || title}
119
- <div class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">
120
- <slot name="header">
121
- <h3 class="text-xl font-semibold text-gray-900 dark:text-white p-0">
122
- {title}
123
- </h3>
124
- </slot>
125
- <CloseButton name="Close modal" on:click={hide} />
126
- </div>
127
- {:else}
128
- <CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} />
129
- {/if}
130
- <!-- Modal body -->
131
- <div class="p-6 space-y-6">
132
- <slot />
133
- </div>
134
- <!-- Modal footer -->
135
- {#if $$slots.footer}
136
- <div class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
137
- <slot name="footer" />
138
- </div>
139
- {/if}
140
- </Frame>
141
- </div>
142
- </div>
98
+ {#if open}
99
+ <div
100
+ tabindex="-1"
101
+ class={mainClass}
102
+ aria-modal="true"
103
+ role="dialog"
104
+ use:init
105
+ use:focusTrap
106
+ on:click={autoclose ? onAutoClose : null}>
107
+ <div class="flex p-4 w-full {sizes[size]} h-full md:h-auto max-h-screen">
108
+ <!-- Modal content -->
109
+ <Frame rounded shadow class="relative flex flex-col w-full h-full md:h-auto">
110
+ <!-- Modal header -->
111
+ {#if $$slots.header || title}
112
+ <div
113
+ class="flex justify-between items-center p-4 rounded-t border-b dark:border-gray-600">
114
+ <slot name="header">
115
+ <h3 class="text-xl font-semibold text-gray-900 dark:text-white p-0">
116
+ {title}
117
+ </h3>
118
+ </slot>
119
+ <CloseButton name="Close modal" on:click={hide} />
120
+ </div>
121
+ {:else}
122
+ <CloseButton name="Close modal" class="absolute top-3 right-2.5" on:click={hide} />
123
+ {/if}
124
+ <!-- Modal body -->
125
+ <div
126
+ class="p-6 space-y-6 flex-1 overflow-y-auto overscroll-contain"
127
+ tabindex="0"
128
+ use:contentInit>
129
+ <slot />
130
+ </div>
131
+ <!-- Modal footer -->
132
+ {#if $$slots.footer}
133
+ <div
134
+ class="flex items-center p-6 space-x-2 rounded-b border-t border-gray-200 dark:border-gray-600">
135
+ <slot name="footer" />
136
+ </div>
137
+ {/if}
138
+ </Frame>
139
+ </div>
140
+ </div>
141
+ {/if}
package/modals/Modal.svelte.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
+ [x: string]: any;
4
5
  open?: boolean | undefined;
5
6
  title?: string | undefined;
6
7
  size?: "xs" | "sm" | "md" | "lg" | "xl" | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "flowbite-svelte",
3
- "version": "0.26.30",
3
+ "version": "0.27.1",
4
4
  "description": "Flowbite components for Svelte",
5
5
  "main": "index.js",
6
6
  "author": {
package/tabs/TabHead.svelte CHANGED
@@ -1,4 +1,4 @@
1
- <script>export let tabStyle;
1
+ <script>export let tabStyle = 'default';
2
2
  export let customDivClass = '';
3
3
  export let customUlClass = '';
4
4
  const divClasses = {
package/tabs/TabHead.svelte.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import { SvelteComponentTyped } from "svelte";
2
2
  declare const __propDef: {
3
3
  props: {
4
- tabStyle: 'default' | 'full' | 'icon' | 'pill' | 'underline' | 'custom';
4
+ tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
5
5
  customDivClass?: string | undefined;
6
6
  customUlClass?: string | undefined;
7
7
  };
package/tabs/TabHeadItem.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script>import classNames from 'classnames';
2
2
  export let id;
3
- export let tabStyle;
3
+ export let tabStyle = 'default';
4
4
  export let activeTabValue;
5
5
  export let customActiveClass = '';
6
6
  export let customInActiveClass = '';
package/tabs/TabHeadItem.svelte.d.ts CHANGED
@@ -3,7 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  id: number;
6
- tabStyle: string;
6
+ tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
7
7
  activeTabValue: number;
8
8
  customActiveClass?: string | undefined;
9
9
  customInActiveClass?: string | undefined;
package/tabs/TabWrapper.svelte CHANGED
@@ -1,9 +1,8 @@
1
1
  <script>import classNames from 'classnames';
2
2
  export let divClass = 'w-full';
3
3
  export let tabStyle = 'default';
4
- export let activeTabValue;
5
4
  </script>
6
5
 
7
6
  <div class={classNames(divClass, $$props.class)}>
8
- <slot {tabStyle} {activeTabValue} />
7
+ <slot {tabStyle} />
9
8
  </div>
package/tabs/TabWrapper.svelte.d.ts CHANGED
@@ -4,7 +4,6 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  divClass?: string | undefined;
6
6
  tabStyle?: "default" | "icon" | "custom" | "pill" | "underline" | "full" | undefined;
7
- activeTabValue: number;
8
7
  };
9
8
  events: {
10
9
  [evt: string]: CustomEvent<any>;
@@ -12,7 +11,6 @@ declare const __propDef: {
12
11
  slots: {
13
12
  default: {
14
13
  tabStyle: "default" | "icon" | "custom" | "pill" | "underline" | "full";
15
- activeTabValue: number;
16
14
  };
17
15
  };
18
16
  };
package/utils/focusTrap.d.ts CHANGED
@@ -1,4 +1,3 @@
1
- export default function focusTrap(node: any, _open: any): {
2
- update(_open: any): void;
1
+ export default function focusTrap(node: any): {
3
2
  destroy(): void;
4
3
  };
package/utils/focusTrap.js CHANGED
@@ -4,58 +4,45 @@
4
4
 
5
5
  // add all the elements inside modal which you want to make focusable
6
6
  const focusableElements =
7
- 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
7
+ 'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])';
8
8
 
9
9
  function getFocusable(node) {
10
- const focusableContent = node.querySelectorAll(focusableElements);
11
- return [focusableContent[0], focusableContent[focusableContent.length - 1]];
10
+ const focusableContent = node.querySelectorAll(focusableElements);
11
+ return [focusableContent[0], focusableContent[focusableContent.length - 1]];
12
12
  }
13
13
 
14
- export default function focusTrap(node, _open) {
15
- let firstFocusableElement, lastFocusableElement; // first and last element to be focused inside modal
16
-
17
- function handleFocusTrap(e) {
18
- let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
19
-
20
- if (!isTabPressed) {
21
- return;
22
- }
23
-
24
- if (e.shiftKey) {
25
- // if shift key pressed for shift + tab combination
26
- if (document.activeElement === firstFocusableElement) {
27
- lastFocusableElement.focus(); // add focus for the last focusable element
28
- e.preventDefault();
29
- }
30
- } else {
31
- // if tab key is pressed
32
- if (document.activeElement === lastFocusableElement) {
33
- // if focused has reached to last focusable element then focus first focusable element after pressing tab
34
- firstFocusableElement.focus(); // add focus for the first focusable element
35
- e.preventDefault();
36
- }
37
- }
38
- }
39
-
40
- if (_open) {
41
- [firstFocusableElement, lastFocusableElement] = getFocusable(node);
42
- document.addEventListener('keydown', handleFocusTrap, true);
43
- firstFocusableElement.focus();
44
- }
45
-
46
- return {
47
- update(_open) {
48
- if (_open) {
49
- [firstFocusableElement, lastFocusableElement] = getFocusable(node);
50
- document.addEventListener('keydown', handleFocusTrap, true);
51
- firstFocusableElement.focus();
52
- } else {
53
- document.removeEventListener('keydown', handleFocusTrap, true);
54
- }
55
- },
56
-
57
- destroy() {
58
- document.removeEventListener('keydown', handleFocusTrap, true);
59
- }
60
- };
14
+ export default function focusTrap(node) {
15
+ let firstFocusableElement, lastFocusableElement; // first and last element to be focused inside modal
16
+
17
+ function handleFocusTrap(e) {
18
+ let isTabPressed = e.key === 'Tab' || e.keyCode === 9;
19
+
20
+ if (!isTabPressed) {
21
+ return;
22
+ }
23
+
24
+ if (e.shiftKey) {
25
+ // if shift key pressed for shift + tab combination
26
+ if (document.activeElement === firstFocusableElement) {
27
+ lastFocusableElement.focus(); // add focus for the last focusable element
28
+ e.preventDefault();
29
+ }
30
+ } else {
31
+ // if tab key is pressed
32
+ if (document.activeElement === lastFocusableElement) {
33
+ // if focused has reached to last focusable element then focus first focusable element after pressing tab
34
+ firstFocusableElement.focus(); // add focus for the first focusable element
35
+ e.preventDefault();
36
+ }
37
+ }
38
+ }
39
+
40
+ [firstFocusableElement, lastFocusableElement] = getFocusable(node);
41
+ document.addEventListener('keydown', handleFocusTrap, true);
42
+
43
+ return {
44
+ destroy() {
45
+ document.removeEventListener('keydown', handleFocusTrap, true);
46
+ }
47
+ };
61
48
  }