@bbl-digital/snorre 2.3.19 → 2.3.22

package/dist/bundle.js

@@ -1,13 +1,14 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/styled/base'), require('react'), require('@emotion/react'), require('react/jsx-runtime'), require('@emotion/react/jsx-runtime'), require('react-transition-group'), require('body-scroll-lock'), require('recharts'), require('react-day-picker/DayPickerInput'), require('react-day-picker'), require('react-draft-wysiwyg'), require('draft-js'), require('draft-js-import-html'), require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css'), require('draft-convert'), require('draftjs-to-html'), require('@tinymce/tinymce-react')) :
-  typeof define === 'function' && define.amd ? define(['exports', '@emotion/styled/base', 'react', '@emotion/react', 'react/jsx-runtime', '@emotion/react/jsx-runtime', 'react-transition-group', 'body-scroll-lock', 'recharts', 'react-day-picker/DayPickerInput', 'react-day-picker', 'react-draft-wysiwyg', 'draft-js', 'draft-js-import-html', 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css', 'draft-convert', 'draftjs-to-html', '@tinymce/tinymce-react'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Snorre = {}, global._styled, global.React, global.react, global.jsxRuntime, global.jsxRuntime$1, global.reactTransitionGroup, global.bodyScrollLock, global.recharts, global.DayPickerInput, global.DayPicker, global.reactDraftWysiwyg, global.draftJs, global.draftJsImportHtml, null, global.draftConvert, global.draftToHtml, global.tinymceReact));
-}(this, (function (exports, _styled, React, react, jsxRuntime, jsxRuntime$1, reactTransitionGroup, bodyScrollLock, recharts, DayPickerInput, DayPicker, reactDraftWysiwyg, draftJs, draftJsImportHtml, reactDraftWysiwyg_css, draftConvert, draftToHtml, tinymceReact) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('@emotion/styled/base'), require('react'), require('@emotion/react'), require('react/jsx-runtime'), require('@emotion/react/jsx-runtime'), require('react-transition-group'), require('body-scroll-lock'), require('focus-trap-react'), require('recharts'), require('react-day-picker/DayPickerInput'), require('react-day-picker'), require('react-draft-wysiwyg'), require('draft-js'), require('draft-js-import-html'), require('react-draft-wysiwyg/dist/react-draft-wysiwyg.css'), require('draft-convert'), require('draftjs-to-html'), require('@tinymce/tinymce-react')) :
+  typeof define === 'function' && define.amd ? define(['exports', '@emotion/styled/base', 'react', '@emotion/react', 'react/jsx-runtime', '@emotion/react/jsx-runtime', 'react-transition-group', 'body-scroll-lock', 'focus-trap-react', 'recharts', 'react-day-picker/DayPickerInput', 'react-day-picker', 'react-draft-wysiwyg', 'draft-js', 'draft-js-import-html', 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css', 'draft-convert', 'draftjs-to-html', '@tinymce/tinymce-react'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.Snorre = {}, global._styled, global.React, global.react, global.jsxRuntime, global.jsxRuntime$1, global.reactTransitionGroup, global.bodyScrollLock, global.FocusTrap, global.recharts, global.DayPickerInput, global.DayPicker, global.reactDraftWysiwyg, global.draftJs, global.draftJsImportHtml, null, global.draftConvert, global.draftToHtml, global.tinymceReact));
+}(this, (function (exports, _styled, React, react, jsxRuntime, jsxRuntime$1, reactTransitionGroup, bodyScrollLock, FocusTrap, recharts, DayPickerInput, DayPicker, reactDraftWysiwyg, draftJs, draftJsImportHtml, reactDraftWysiwyg_css, draftConvert, draftToHtml, tinymceReact) { 'use strict';
 
   function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
   var _styled__default = /*#__PURE__*/_interopDefaultLegacy(_styled);
   var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+  var FocusTrap__default = /*#__PURE__*/_interopDefaultLegacy(FocusTrap);
   var DayPickerInput__default = /*#__PURE__*/_interopDefaultLegacy(DayPickerInput);
   var DayPicker__default = /*#__PURE__*/_interopDefaultLegacy(DayPicker);
   var draftToHtml__default = /*#__PURE__*/_interopDefaultLegacy(draftToHtml);
@@ -984,7 +985,7 @@
         setValueChanged(e.target.value);
       }
 
-      if (props.onChange) {
+      if (props.onChange && !props.disabled) {
         props.onChange(e);
       }
     };
@@ -24442,52 +24443,54 @@
       classNames: "overlay",
       children: jsxRuntime$1.jsx(Overlay, {
         onClick: onOutsideClick,
-        children: jsxRuntime$1.jsxs(Content$3, {
-          width: width,
-          isFullscreen: isFullscreen,
-          canToggleFullscreen: !!toggleFullscreen,
-          onClick: e => e.stopPropagation(),
-          children: [(!hideCloseButton || hasCollapse || toggleFullscreen) && jsxRuntime$1.jsxs(CloseWrapper, {
-            children: [hasCollapse && jsxRuntime$1.jsx(Button, {
-              nostyle: true,
-              onClick: onCollapse,
-              focusable: true,
-              children: jsxRuntime$1.jsx(IconMinus$1, {})
-            }), toggleFullscreen && jsxRuntime$1.jsx(Button, {
-              nostyle: true,
-              onClick: () => setIsFullscreen(!isFullscreen),
-              focusable: true,
-              children: isFullscreen ? jsxRuntime$1.jsx(IconFullscreenClose$1, {
-                size: "20px"
-              }) : jsxRuntime$1.jsx(IconFullscreenOpen$1, {
-                size: "20px"
+        children: jsxRuntime$1.jsx(FocusTrap__default['default'], {
+          children: jsxRuntime$1.jsxs(Content$3, {
+            width: width,
+            isFullscreen: isFullscreen,
+            canToggleFullscreen: !!toggleFullscreen,
+            onClick: e => e.stopPropagation(),
+            children: [(!hideCloseButton || hasCollapse || toggleFullscreen) && jsxRuntime$1.jsxs(CloseWrapper, {
+              children: [hasCollapse && jsxRuntime$1.jsx(Button, {
+                nostyle: true,
+                onClick: onCollapse,
+                focusable: true,
+                children: jsxRuntime$1.jsx(IconMinus$1, {})
+              }), toggleFullscreen && jsxRuntime$1.jsx(Button, {
+                nostyle: true,
+                onClick: () => setIsFullscreen(!isFullscreen),
+                focusable: true,
+                children: isFullscreen ? jsxRuntime$1.jsx(IconFullscreenClose$1, {
+                  size: "20px"
+                }) : jsxRuntime$1.jsx(IconFullscreenOpen$1, {
+                  size: "20px"
+                })
+              }), !hideCloseButton && jsxRuntime$1.jsx(Button, {
+                nostyle: true,
+                onClick: setClose,
+                focusable: true,
+                children: jsxRuntime$1.jsx(IconClose$1, {})
+              })]
+            }), jsxRuntime$1.jsx(HeaderWrapper$2, {
+              css: headerCss,
+              withCollapse: hasCollapse,
+              ref: handleHeaderRef,
+              children: header && header
+            }), jsxRuntime$1.jsx(ModalContent, {
+              css: contentCss,
+              scrollable: !disableScrollableContent,
+              ref: disableScrollableContent ? modalRef : undefined,
+              children: disableScrollableContent ? children : jsxRuntime$1.jsx(ScrollableDiv, {
+                ref: modalRef,
+                hasActionButton: !!actionButton,
+                isFullscreen: isFullscreen,
+                windowHeight: window.innerHeight,
+                headerHeight: headerHeight,
+                children: children
               })
-            }), !hideCloseButton && jsxRuntime$1.jsx(Button, {
-              nostyle: true,
-              onClick: setClose,
-              focusable: true,
-              children: jsxRuntime$1.jsx(IconClose$1, {})
+            }), actionButton && jsxRuntime$1.jsx(ActionButtonWrapper, {
+              children: actionButton
             })]
-          }), jsxRuntime$1.jsx(HeaderWrapper$2, {
-            css: headerCss,
-            withCollapse: hasCollapse,
-            ref: handleHeaderRef,
-            children: header && header
-          }), jsxRuntime$1.jsx(ModalContent, {
-            css: contentCss,
-            scrollable: !disableScrollableContent,
-            ref: disableScrollableContent ? modalRef : undefined,
-            children: disableScrollableContent ? children : jsxRuntime$1.jsx(ScrollableDiv, {
-              ref: modalRef,
-              hasActionButton: !!actionButton,
-              isFullscreen: isFullscreen,
-              windowHeight: window.innerHeight,
-              headerHeight: headerHeight,
-              children: children
-            })
-          }), actionButton && jsxRuntime$1.jsx(ActionButtonWrapper, {
-            children: actionButton
-          })]
+          })
         })
       })
     });
@@ -31708,6 +31711,7 @@
           onEditorChange: handleChange,
           disabled: disabled,
           init: {
+            browser_spellcheck: true,
             height,
             min_height: 100,
             max_height: maxHeight,

package/esm/core/Editor/index.js

@@ -61,6 +61,7 @@ const Editor = ({
         onEditorChange: handleChange,
         disabled: disabled,
         init: {
+          browser_spellcheck: true,
           height,
           min_height: 100,
           max_height: maxHeight,

package/esm/core/Input/index.js

@@ -38,7 +38,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
       setValueChanged(e.target.value);
     }
 
-    if (props.onChange) {
+    if (props.onChange && !props.disabled) {
       props.onChange(e);
     }
   };

package/esm/core/Modal/index.js

@@ -7,6 +7,7 @@ import IconClose from '../../icons/General/IconClose';
 import { Button, IconFullscreenClose } from '../..';
 import IconMinus from '../../icons/General/IconMinus';
 import IconFullscreenOpen from '../../icons/General/IconFullscreenOpen';
+import FocusTrap from 'focus-trap-react';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 
@@ -82,52 +83,54 @@ const Modal = ({
     classNames: "overlay",
     children: _jsx(Overlay, {
       onClick: onOutsideClick,
-      children: _jsxs(Content, {
-        width: width,
-        isFullscreen: isFullscreen,
-        canToggleFullscreen: !!toggleFullscreen,
-        onClick: e => e.stopPropagation(),
-        children: [(!hideCloseButton || hasCollapse || toggleFullscreen) && _jsxs(CloseWrapper, {
-          children: [hasCollapse && _jsx(Button, {
-            nostyle: true,
-            onClick: onCollapse,
-            focusable: true,
-            children: _jsx(IconMinus, {})
-          }), toggleFullscreen && _jsx(Button, {
-            nostyle: true,
-            onClick: () => setIsFullscreen(!isFullscreen),
-            focusable: true,
-            children: isFullscreen ? _jsx(IconFullscreenClose, {
-              size: "20px"
-            }) : _jsx(IconFullscreenOpen, {
-              size: "20px"
+      children: _jsx(FocusTrap, {
+        children: _jsxs(Content, {
+          width: width,
+          isFullscreen: isFullscreen,
+          canToggleFullscreen: !!toggleFullscreen,
+          onClick: e => e.stopPropagation(),
+          children: [(!hideCloseButton || hasCollapse || toggleFullscreen) && _jsxs(CloseWrapper, {
+            children: [hasCollapse && _jsx(Button, {
+              nostyle: true,
+              onClick: onCollapse,
+              focusable: true,
+              children: _jsx(IconMinus, {})
+            }), toggleFullscreen && _jsx(Button, {
+              nostyle: true,
+              onClick: () => setIsFullscreen(!isFullscreen),
+              focusable: true,
+              children: isFullscreen ? _jsx(IconFullscreenClose, {
+                size: "20px"
+              }) : _jsx(IconFullscreenOpen, {
+                size: "20px"
+              })
+            }), !hideCloseButton && _jsx(Button, {
+              nostyle: true,
+              onClick: setClose,
+              focusable: true,
+              children: _jsx(IconClose, {})
+            })]
+          }), _jsx(HeaderWrapper, {
+            css: headerCss,
+            withCollapse: hasCollapse,
+            ref: handleHeaderRef,
+            children: header && header
+          }), _jsx(ModalContent, {
+            css: contentCss,
+            scrollable: !disableScrollableContent,
+            ref: disableScrollableContent ? modalRef : undefined,
+            children: disableScrollableContent ? children : _jsx(ScrollableDiv, {
+              ref: modalRef,
+              hasActionButton: !!actionButton,
+              isFullscreen: isFullscreen,
+              windowHeight: window.innerHeight,
+              headerHeight: headerHeight,
+              children: children
             })
-          }), !hideCloseButton && _jsx(Button, {
-            nostyle: true,
-            onClick: setClose,
-            focusable: true,
-            children: _jsx(IconClose, {})
+          }), actionButton && _jsx(ActionButtonWrapper, {
+            children: actionButton
           })]
-        }), _jsx(HeaderWrapper, {
-          css: headerCss,
-          withCollapse: hasCollapse,
-          ref: handleHeaderRef,
-          children: header && header
-        }), _jsx(ModalContent, {
-          css: contentCss,
-          scrollable: !disableScrollableContent,
-          ref: disableScrollableContent ? modalRef : undefined,
-          children: disableScrollableContent ? children : _jsx(ScrollableDiv, {
-            ref: modalRef,
-            hasActionButton: !!actionButton,
-            isFullscreen: isFullscreen,
-            windowHeight: window.innerHeight,
-            headerHeight: headerHeight,
-            children: children
-          })
-        }), actionButton && _jsx(ActionButtonWrapper, {
-          children: actionButton
-        })]
+        })
       })
     })
   });

package/lib/core/Editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAA;AAgBpC,UAAU,MAAM;IACd,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;IAClC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACzB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,mBAAmB;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3D;AAID,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,MAAM,CAsGtB,CAAA;AAED,eAAe,MAAM,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Editor/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,EAAE,EAAE,EAAY,MAAM,OAAO,CAAA;AAgBpC,UAAU,MAAM;IACd,iBAAiB;IACjB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,qCAAqC;IACrC,IAAI,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAA;IAClC,sDAAsD;IACtD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,yBAAyB;IACzB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,mCAAmC;IACnC,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,sCAAsC;IACtC,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,qCAAqC;IACrC,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,oBAAoB;IACpB,cAAc,CAAC,EAAE,MAAM,CAAA;IACvB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8BAA8B;IAC9B,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,8CAA8C;IAC9C,MAAM,CAAC,EAAE,OAAO,GAAG,MAAM,CAAA;IACzB,2EAA2E;IAC3E,eAAe,CAAC,EAAE,MAAM,CAAA;IACxB,mDAAmD;IACnD,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,iBAAiB;IACjB,MAAM,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAA;IAChC,mBAAmB;IACnB,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,eAAe,EAAE,MAAM,KAAK,IAAI,CAAA;CAC3D;AAID,QAAA,MAAM,MAAM,EAAE,EAAE,CAAC,MAAM,CAuGtB,CAAA;AAED,eAAe,MAAM,CAAA"}

package/lib/core/Editor/index.js

@@ -61,6 +61,7 @@ const Editor = ({
         onEditorChange: handleChange,
         disabled: disabled,
         init: {
+          browser_spellcheck: true,
           height,
           min_height: 100,
           max_height: maxHeight,

package/lib/core/Input/index.js

@@ -38,7 +38,7 @@ const Input = /*#__PURE__*/React.forwardRef(({
       setValueChanged(e.target.value);
     }
 
-    if (props.onChange) {
+    if (props.onChange && !props.disabled) {
       props.onChange(e);
     }
   };

package/lib/core/Modal/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Modal/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAsD,MAAM,OAAO,CAAA;AAkB1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAIjD,UAAU,MAAM;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,oCAAoC;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kCAAkC;IAClC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAA;IAClB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8HAA8H;IAC9H,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,2BAA2B;IAC3B,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA6I3B,CAAA;AAED,eAAe,KAAK,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/packages/core/Modal/index.tsx"],"names":[],"mappings":"AAAA,sCAAsC;AACtC,OAAO,KAAsD,MAAM,OAAO,CAAA;AAkB1E,OAAO,EAAE,gBAAgB,EAAE,MAAM,gBAAgB,CAAA;AAKjD,UAAU,MAAM;IACd,8BAA8B;IAC9B,IAAI,CAAC,EAAE,OAAO,CAAA;IACd,sCAAsC;IACtC,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,oCAAoC;IACpC,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC9B,kBAAkB;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,qCAAqC;IACrC,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAC7B,wBAAwB;IACxB,eAAe,CAAC,EAAE,OAAO,CAAA;IACzB,kCAAkC;IAClC,UAAU,CAAC,EAAE,GAAG,EAAE,CAAA;IAClB,6CAA6C;IAC7C,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,8HAA8H;IAC9H,wBAAwB,CAAC,EAAE,OAAO,CAAA;IAClC,2BAA2B;IAC3B,UAAU,CAAC,EAAE,gBAAgB,CAAA;IAC7B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,wCAAwC;IACxC,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,+CAA+C;IAC/C,gBAAgB,CAAC,EAAE,OAAO,CAAA;IAC1B,0CAA0C;IAC1C,iBAAiB,CAAC,EAAE,OAAO,CAAA;IAC3B,mCAAmC;IACnC,OAAO,CAAC,EAAE,MAAM,IAAI,CAAA;IACpB,4CAA4C;IAC5C,UAAU,CAAC,EAAE,MAAM,IAAI,CAAA;CACxB;AAED,QAAA,MAAM,KAAK,EAAE,KAAK,CAAC,EAAE,CAAC,MAAM,CA+I3B,CAAA;AAED,eAAe,KAAK,CAAA"}

package/lib/core/Modal/index.js

@@ -7,6 +7,7 @@ import IconClose from '../../icons/General/IconClose';
 import { Button, IconFullscreenClose } from '../..';
 import IconMinus from '../../icons/General/IconMinus';
 import IconFullscreenOpen from '../../icons/General/IconFullscreenOpen';
+import FocusTrap from 'focus-trap-react';
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
 import { jsxs as _jsxs } from "@emotion/react/jsx-runtime";
 
@@ -82,52 +83,54 @@ const Modal = ({
     classNames: "overlay",
     children: _jsx(Overlay, {
       onClick: onOutsideClick,
-      children: _jsxs(Content, {
-        width: width,
-        isFullscreen: isFullscreen,
-        canToggleFullscreen: !!toggleFullscreen,
-        onClick: e => e.stopPropagation(),
-        children: [(!hideCloseButton || hasCollapse || toggleFullscreen) && _jsxs(CloseWrapper, {
-          children: [hasCollapse && _jsx(Button, {
-            nostyle: true,
-            onClick: onCollapse,
-            focusable: true,
-            children: _jsx(IconMinus, {})
-          }), toggleFullscreen && _jsx(Button, {
-            nostyle: true,
-            onClick: () => setIsFullscreen(!isFullscreen),
-            focusable: true,
-            children: isFullscreen ? _jsx(IconFullscreenClose, {
-              size: "20px"
-            }) : _jsx(IconFullscreenOpen, {
-              size: "20px"
+      children: _jsx(FocusTrap, {
+        children: _jsxs(Content, {
+          width: width,
+          isFullscreen: isFullscreen,
+          canToggleFullscreen: !!toggleFullscreen,
+          onClick: e => e.stopPropagation(),
+          children: [(!hideCloseButton || hasCollapse || toggleFullscreen) && _jsxs(CloseWrapper, {
+            children: [hasCollapse && _jsx(Button, {
+              nostyle: true,
+              onClick: onCollapse,
+              focusable: true,
+              children: _jsx(IconMinus, {})
+            }), toggleFullscreen && _jsx(Button, {
+              nostyle: true,
+              onClick: () => setIsFullscreen(!isFullscreen),
+              focusable: true,
+              children: isFullscreen ? _jsx(IconFullscreenClose, {
+                size: "20px"
+              }) : _jsx(IconFullscreenOpen, {
+                size: "20px"
+              })
+            }), !hideCloseButton && _jsx(Button, {
+              nostyle: true,
+              onClick: setClose,
+              focusable: true,
+              children: _jsx(IconClose, {})
+            })]
+          }), _jsx(HeaderWrapper, {
+            css: headerCss,
+            withCollapse: hasCollapse,
+            ref: handleHeaderRef,
+            children: header && header
+          }), _jsx(ModalContent, {
+            css: contentCss,
+            scrollable: !disableScrollableContent,
+            ref: disableScrollableContent ? modalRef : undefined,
+            children: disableScrollableContent ? children : _jsx(ScrollableDiv, {
+              ref: modalRef,
+              hasActionButton: !!actionButton,
+              isFullscreen: isFullscreen,
+              windowHeight: window.innerHeight,
+              headerHeight: headerHeight,
+              children: children
             })
-          }), !hideCloseButton && _jsx(Button, {
-            nostyle: true,
-            onClick: setClose,
-            focusable: true,
-            children: _jsx(IconClose, {})
+          }), actionButton && _jsx(ActionButtonWrapper, {
+            children: actionButton
           })]
-        }), _jsx(HeaderWrapper, {
-          css: headerCss,
-          withCollapse: hasCollapse,
-          ref: handleHeaderRef,
-          children: header && header
-        }), _jsx(ModalContent, {
-          css: contentCss,
-          scrollable: !disableScrollableContent,
-          ref: disableScrollableContent ? modalRef : undefined,
-          children: disableScrollableContent ? children : _jsx(ScrollableDiv, {
-            ref: modalRef,
-            hasActionButton: !!actionButton,
-            isFullscreen: isFullscreen,
-            windowHeight: window.innerHeight,
-            headerHeight: headerHeight,
-            children: children
-          })
-        }), actionButton && _jsx(ActionButtonWrapper, {
-          children: actionButton
-        })]
+        })
       })
     })
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bbl-digital/snorre",
-  "version": "2.3.19",
+  "version": "2.3.22",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -24,6 +24,7 @@
     "draft-js": "^0.11.7",
     "draft-js-import-html": "^1.4.1",
     "draftjs-to-html": "^0.9.1",
+    "focus-trap-react": "^9.0.0",
     "react-day-picker": "^7.4.8",
     "react-draft-wysiwyg": "^1.14.7",
     "recharts": "^2.1.5"