@bbl-digital/snorre 2.3.27 → 2.4.0

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('@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', '@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.tinymceReact));
-}(this, (function (exports, _styled, React, react, jsxRuntime, jsxRuntime$1, reactTransitionGroup, bodyScrollLock, recharts, DayPickerInput, DayPicker, 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('@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', '@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.tinymceReact));
+}(this, (function (exports, _styled, React, react, jsxRuntime, jsxRuntime$1, reactTransitionGroup, bodyScrollLock, FocusTrap, recharts, DayPickerInput, DayPicker, 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);
 
@@ -24441,52 +24442,57 @@
       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'], {
+          focusTrapOptions: {
+            allowOutsideClick: true
+          },
+          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
-          })]
+          })
         })
       })
     });

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,57 @@ 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, {
+        focusTrapOptions: {
+          allowOutsideClick: true
+        },
+        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/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,57 @@ 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, {
+        focusTrapOptions: {
+          allowOutsideClick: true
+        },
+        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.27",
+  "version": "2.4.0",
   "description": "Design library for BBL Digital",
   "license": "MIT",
   "main": "./lib/index.js",
@@ -20,6 +20,7 @@
   "author": "bbl-digital",
   "dependencies": {
     "@tinymce/tinymce-react": "^3.13.1",
+    "focus-trap-react": "^9.0.1",
     "react-day-picker": "^7.4.8",
     "recharts": "^2.1.5"
   },
@@ -42,7 +43,8 @@
     "build:umd": "rollup --config",
     "test": "jest",
     "test:watch": "jest --watch",
-    "npm-publish": "npm version patch && yarn run build && yarn run build:tsc && npm publish"
+    "npm-publish": "npm version patch && yarn run build && yarn run build:tsc && npm publish",
+    "npm-publish-minor": "npm version minor && yarn run build && yarn run build:tsc && npm publish"
   },
   "devDependencies": {
     "@babel/cli": "^7.14.5",