@uncinc/uncinc-react-kitchen-sink 2.5.1 → 2.5.3

package/dist/components/Dialog/DialogHelpersStory/index.js

@@ -0,0 +1,43 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DialogHelpersStory = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _useBoolean2 = _interopRequireDefault(require("../../../hooks/useBoolean"));
+var _useDialogHelpers2 = _interopRequireDefault(require("../../../hooks/useDialogHelpers"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var DialogHelpersStory = function DialogHelpersStory(args) {
+  var _useBoolean = (0, _useBoolean2.default)(),
+    dialogIsOpen = _useBoolean.value,
+    openDialog = _useBoolean.setTrue,
+    closeDialog = _useBoolean.setFalse;
+  var wrapper = (0, _react.useRef)(null);
+  var _useDialogHelpers = (0, _useDialogHelpers2.default)({
+      wrapperElement: wrapper,
+      closeFunction: closeDialog,
+      isOpen: dialogIsOpen
+    }),
+    dialogHelpersProps = _useDialogHelpers.dialogHelpersProps;
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: openDialog
+  }, "Click me to open another Dialog"), dialogIsOpen && /*#__PURE__*/_react.default.createElement("div", _extends({}, dialogHelpersProps, {
+    className: "Dialog"
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Dialog__wrapper",
+    ref: wrapper
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "Dialog__inner"
+  }, /*#__PURE__*/_react.default.createElement("p", null, "I've been implemented using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialogHelpers"), " hook.", /*#__PURE__*/_react.default.createElement("br", null), "This hook consists of three hooks:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "useClickOutside"), " - close the Dialog by clicking outside of it"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "useEscape"), " - press escape to close"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "useTrapFocus"), " - bring and keep focus within the Dialog"))))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "Dialog__backdrop"
+  })));
+};
+exports.DialogHelpersStory = DialogHelpersStory;
+var _default = DialogHelpersStory;
+exports.default = _default;

package/dist/components/Dialog/DialogHookStory/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DialogHookStory = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _uuid = require("uuid");
+var _useDialog2 = _interopRequireDefault(require("../../../hooks/useDialog"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var DialogHookStory = function DialogHookStory(args) {
+  var Content = function Content() {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "I've been created using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialog"), " hook.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "This hook provides you with:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "DialogComponent"), " - the Dialog component"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "dialogIsOpen"), " - a const which tells you if the dialog is open or closed"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "openDialog"), " - a function to open the dialog"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeDialog"), " - a function to close the dialog")), "The ", /*#__PURE__*/_react.default.createElement("code", null, "DialogComponent"), " has several arguments:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "id"), " - a unique identifier (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "title"), " - a header element, or any element, really (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "children"), " - the dialog's content. Wrapped within the dialog."), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "showCloseButton"), " - render a close button? (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "showCloseIcon"), " - render a close icon? (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeButtonText"), " - text for the close button (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeIcon"), " - what icon to use. Default 'icon-cross' (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "dialogLabel"), " - a label for a11y - default 'dialog' (optional)")), "Depending on where the dialog is being used, you might need to add a z-index.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "This Dialog handles several things for you: Taking focus and keeping it inside and it allows you to close the Dialog by either pressing Escape or clicking outside of it. This is done by several different hooks.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Alternatively, if you need a more custom approach, you can opt to use the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialogHelpers"), " hook instead."));
+  };
+  var title = function title() {
+    return /*#__PURE__*/_react.default.createElement("h2", null, "I'm a Dialog!");
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, _toConsumableArray(Array(3)).map(function () {
+    var _useDialog = (0, _useDialog2.default)(),
+      openDialog = _useDialog.openDialog,
+      DialogComponent = _useDialog.DialogComponent;
+    var uuid = (0, _uuid.v4)();
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      onClick: openDialog
+    }, "Open a dialog"), /*#__PURE__*/_react.default.createElement(DialogComponent, _extends({
+      id: uuid,
+      title: title,
+      showCloseButton: true,
+      closeButtonText: "Click here to close me.",
+      showCloseIcon: true,
+      closeIcon: "icon-cross"
+    }, args), /*#__PURE__*/_react.default.createElement(Content, null)));
+  }));
+};
+exports.DialogHookStory = DialogHookStory;
+var _default = DialogHookStory;
+exports.default = _default;

package/dist/components/Dialog/DialogOverrideStory/index.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.DialogOverrideStory = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _useDialog2 = _interopRequireDefault(require("../../../hooks/useDialog"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+var DialogOverrideStory = function DialogOverrideStory(args) {
+  var _useDialog = (0, _useDialog2.default)(),
+    openDialog = _useDialog.openDialog,
+    closeDialog = _useDialog.closeDialog,
+    DialogComponent = _useDialog.DialogComponent;
+  var Content = function Content() {
+    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "You could pass the ", /*#__PURE__*/_react.default.createElement("code", null, "disableClosers"), " prop.", /*#__PURE__*/_react.default.createElement("br", null), "That way you can create pesky pop-ups or cookiebars that users can't close without doing whatever you require first.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Don't forget to add a ", /*#__PURE__*/_react.default.createElement("button", {
+      type: "button",
+      onClick: closeDialog
+    }, "close"), " button in the content though..."));
+  };
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
+    type: "button",
+    onClick: openDialog
+  }, "Open a dialog"), /*#__PURE__*/_react.default.createElement(DialogComponent, _extends({
+    disableClosers: true
+  }, args), /*#__PURE__*/_react.default.createElement(Content, null)));
+};
+exports.DialogOverrideStory = DialogOverrideStory;
+var _default = DialogOverrideStory;
+exports.default = _default;

package/dist/components/Dialog/index.d.ts

@@ -3,6 +3,7 @@ declare function Dialog(props: any): React.ReactPortal;
 declare namespace Dialog {
     namespace propTypes {
         let id: PropTypes.Requireable<string>;
+        let title: PropTypes.Requireable<PropTypes.ReactElementLike>;
         let children: PropTypes.Validator<PropTypes.ReactElementLike>;
         let isOpen: PropTypes.Requireable<boolean>;
         let closeFunction: PropTypes.Requireable<(...args: any[]) => any>;
@@ -12,10 +13,13 @@ declare namespace Dialog {
         let closeIcon: PropTypes.Requireable<string>;
         let dialogLabel: PropTypes.Requireable<string>;
         let portalTarget: PropTypes.Requireable<PropTypes.ReactElementLike>;
+        let disableClosers: PropTypes.Requireable<boolean>;
     }
     namespace defaultProps {
         let id_1: any;
         export { id_1 as id };
+        let title_1: any;
+        export { title_1 as title };
         let showCloseButton_1: boolean;
         export { showCloseButton_1 as showCloseButton };
         let closeButtonText_1: string;
@@ -32,6 +36,8 @@ declare namespace Dialog {
         export { closeFunction_1 as closeFunction };
         let portalTarget_1: HTMLElement;
         export { portalTarget_1 as portalTarget };
+        let disableClosers_1: boolean;
+        export { disableClosers_1 as disableClosers };
     }
 }
 import React from 'react';

package/dist/components/Dialog/index.js

@@ -19,6 +19,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 var Dialog = function Dialog(props) {
   var id = props.id,
+    title = props.title,
     children = props.children,
     isOpen = props.isOpen,
     closeFunction = props.closeFunction,
@@ -27,7 +28,8 @@ var Dialog = function Dialog(props) {
     showCloseIcon = props.showCloseIcon,
     closeIcon = props.closeIcon,
     dialogLabel = props.dialogLabel,
-    portalTarget = props.portalTarget;
+    portalTarget = props.portalTarget,
+    disableClosers = props.disableClosers;
   var wrapper = (0, _react.useRef)(null);
   var _useTranslation = (0, _reactI18next.useTranslation)(),
     t = _useTranslation.t;
@@ -35,7 +37,8 @@ var Dialog = function Dialog(props) {
       id: id,
       wrapperElement: wrapper,
       closeFunction: closeFunction,
-      isOpen: isOpen
+      isOpen: isOpen,
+      disableClosers: disableClosers
     }),
     labelId = _useDialogHelpers.labelId,
     dialogHelpersProps = _useDialogHelpers.dialogHelpersProps;
@@ -49,7 +52,9 @@ var Dialog = function Dialog(props) {
   }), /*#__PURE__*/_react.default.createElement("div", {
     id: labelId,
     className: "Dialog__sr-only"
-  }, dialogLabel), showCloseIcon && /*#__PURE__*/_react.default.createElement("button", {
+  }, dialogLabel), title && /*#__PURE__*/_react.default.createElement("div", {
+    className: "Dialog__title"
+  }, title()), showCloseIcon && /*#__PURE__*/_react.default.createElement("button", {
     type: "button",
     className: "Dialog__closeicon",
     "aria-label": t('general.close', 'Close'),
@@ -71,6 +76,7 @@ var Dialog = function Dialog(props) {
 };
 Dialog.propTypes = {
   id: _propTypes.default.string,
+  title: _propTypes.default.element,
   children: _propTypes.default.element.isRequired,
   isOpen: _propTypes.default.bool,
   closeFunction: _propTypes.default.func,
@@ -79,10 +85,12 @@ Dialog.propTypes = {
   showCloseIcon: _propTypes.default.bool,
   closeIcon: _propTypes.default.string,
   dialogLabel: _propTypes.default.string,
-  portalTarget: _propTypes.default.element
+  portalTarget: _propTypes.default.element,
+  disableClosers: _propTypes.default.bool
 };
 Dialog.defaultProps = {
   id: (0, _uuid.v4)(),
+  title: null,
   showCloseButton: false,
   closeButtonText: 'Close',
   showCloseIcon: false,
@@ -90,7 +98,8 @@ Dialog.defaultProps = {
   dialogLabel: 'dialog',
   isOpen: false,
   closeFunction: null,
-  portalTarget: typeof document !== 'undefined' ? document.body : null
+  portalTarget: typeof document !== 'undefined' ? document.body : null,
+  disableClosers: false
 };
 var _default = Dialog;
 exports.default = _default;

package/dist/components/Dialog/stories.js

@@ -5,41 +5,17 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = exports.Default = void 0;
 var _react = _interopRequireDefault(require("react"));
-var _uuid = require("uuid");
-var _useDialog2 = _interopRequireDefault(require("../../hooks/useDialog"));
+var _DialogHookStory = _interopRequireDefault(require("./DialogHookStory"));
+var _DialogHelpersStory = _interopRequireDefault(require("./DialogHelpersStory"));
+var _DialogOverrideStory = _interopRequireDefault(require("./DialogOverrideStory"));
 var _ = _interopRequireDefault(require("."));
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
-function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
-function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
-function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
-function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
-function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 var _default = {
   title: 'Molecules/Dialog',
   component: _.default
 };
 exports.default = _default;
 var Default = function Default(args) {
-  var Content = function Content() {
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("h1", null, "I'm a Dialog!"), /*#__PURE__*/_react.default.createElement("p", null, "I've been created using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialog"), " hook.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "This hook provides you with:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "DialogComponent"), " - the Dialog component"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "dialogIsOpen"), " - a const which tells you if the dialog is open or closed"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "openDialog"), " - a function to open the dialog"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeDialog"), " - a function to close the dialog")), "The ", /*#__PURE__*/_react.default.createElement("code", null, "DialogComponent"), " has several arguments:", /*#__PURE__*/_react.default.createElement("ul", null, /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "id"), " - a unique identifier (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "children"), " - the dialog's content. Wrapped within the dialog."), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "showCloseButton"), " - render a close button? (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "showCloseIcon"), " - render a close icon? (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeButtonText"), " - text for the close button (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "closeIcon"), " - what icon to use. Default 'icon-cross' (optional)"), /*#__PURE__*/_react.default.createElement("li", null, /*#__PURE__*/_react.default.createElement("code", null, "dialogLabel"), " - a label for a11y - default 'dialog' (optional)")), "Depending on where the dialog is being used, you might need to add a z-index.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "This Dialog handles several things for you: Taking focus and keeping it inside and it allows you to close the Dialog by either pressing Escape or clicking outside of it. This is done by several different hooks.", /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("br", null), "Alternatively, if you need a more custom approach, you can opt to use the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialogControls"), " hook instead."));
-  };
-  return /*#__PURE__*/_react.default.createElement("div", null, _toConsumableArray(Array(3)).map(function () {
-    var _useDialog = (0, _useDialog2.default)(),
-      openDialog = _useDialog.openDialog,
-      DialogComponent = _useDialog.DialogComponent;
-    var uuid = (0, _uuid.v4)();
-    return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("button", {
-      type: "button",
-      onClick: openDialog
-    }, "Open a dialog"), /*#__PURE__*/_react.default.createElement(DialogComponent, _extends({
-      id: uuid,
-      showCloseButton: true,
-      closeButtonText: "Click here to close me.",
-      showCloseIcon: true,
-      closeIcon: "icon-cross"
-    }, args), /*#__PURE__*/_react.default.createElement(Content, null)));
-  }));
+  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement("p", null, "Here, you see the Dialog implemented using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialog"), " hook. Use the story code as a reference."), /*#__PURE__*/_react.default.createElement(_DialogHookStory.default, null), /*#__PURE__*/_react.default.createElement("p", null, "This is the dialog implemented by using the ", /*#__PURE__*/_react.default.createElement("code", null, "useDialogHelpers"), " hook. This offers some more flexibility."), /*#__PURE__*/_react.default.createElement(_DialogHelpersStory.default, null), /*#__PURE__*/_react.default.createElement("p", null, "You can also disable the ", /*#__PURE__*/_react.default.createElement("code", null, "useClickOutside"), " and ", /*#__PURE__*/_react.default.createElement("code", null, "useEscape"), " hooks."), /*#__PURE__*/_react.default.createElement(_DialogOverrideStory.default, null));
 };
 exports.Default = Default;

package/dist/components/Form/Checkboxes/index.test.js

@@ -2,12 +2,12 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _react = _interopRequireDefault(require("react"));
-var _chai = _interopRequireWildcard(require("chai"));
-var _enzyme = require("enzyme");
 var _react2 = require("@testing-library/react");
+var _chai = _interopRequireWildcard(require("chai"));
 var _sinon = _interopRequireDefault(require("sinon"));
 var _sinonChai = _interopRequireDefault(require("sinon-chai"));
-var _stories = require("./stories");
+var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
+var _ = _interopRequireDefault(require("."));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,105 +16,140 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 // Use sinon-chai for spies.
 _chai.default.use(_sinonChai.default);
+var renderCheckboxes = function renderCheckboxes() {
+  var onSubmit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _sinon.default.spy();
+  return (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
+    initialValues: {
+      'poison': []
+    },
+    onSubmit: onSubmit
+  }, /*#__PURE__*/_react.default.createElement(_.default, {
+    title: "Pick your poison",
+    required: true,
+    description: "Please select your poison.",
+    fieldName: "poison",
+    options: {
+      beer: 'Beer',
+      wine: 'Wine',
+      rum: 'Rum',
+      whisky: 'Whisk(e)y',
+      '__other__': 'Anders'
+    },
+    validation: function validation(value) {
+      var error;
+      if (value && value.length === 0) {
+        error = 'This field is required';
+      }
+      return error;
+    },
+    otherLabel: "Anders"
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    type: "submit",
+    value: "Verzenden"
+  })));
+};
 describe('<Checkboxes />', function () {
-  it('renders 5 label elements', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.Checkboxes, null));
-    (0, _chai.expect)(wrapper.find('label')).to.have.lengthOf(5);
-  });
-  it('renders a description element', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.Checkboxes, null));
-    (0, _chai.expect)(wrapper.find('div.Checkboxes__description')).to.have.lengthOf(1);
+  test('renders 5 label elements', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
+    var _renderCheckboxes, container;
+    return _regeneratorRuntime().wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _renderCheckboxes = renderCheckboxes(), container = _renderCheckboxes.container;
+          (0, _chai.expect)(container.querySelector('.Checkboxes__inner').querySelectorAll('label')).to.have.lengthOf(5);
+        case 2:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  })));
+  test('renders a description element', function () {
+    var _renderCheckboxes2 = renderCheckboxes(),
+      container = _renderCheckboxes2.container;
+    (0, _chai.expect)(container.querySelectorAll('div.Checkboxes__description')).to.have.lengthOf(1);
   });
-  it('displays a required error message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var wrapper;
-    return _regeneratorRuntime().wrap(function _callee2$(_context2) {
-      while (1) switch (_context2.prev = _context2.next) {
+  test('displays a required error message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
+    var _renderCheckboxes3, container;
+    return _regeneratorRuntime().wrap(function _callee3$(_context3) {
+      while (1) switch (_context3.prev = _context3.next) {
         case 0:
-          wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.Checkboxes, null));
-          (0, _chai.expect)(wrapper.find('div.Checkboxes__error')).to.have.lengthOf(0);
-          _context2.next = 4;
-          return (0, _react2.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
-            return _regeneratorRuntime().wrap(function _callee$(_context) {
-              while (1) switch (_context.prev = _context.next) {
+          _renderCheckboxes3 = renderCheckboxes(), container = _renderCheckboxes3.container;
+          (0, _chai.expect)(container.querySelectorAll('div.Checkboxes__error')).to.have.lengthOf(0);
+          _context3.next = 4;
+          return (0, _react2.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+            return _regeneratorRuntime().wrap(function _callee2$(_context2) {
+              while (1) switch (_context2.prev = _context2.next) {
                 case 0:
-                  // Submit values, and wait for Formik to complete.
-                  wrapper.find('Formik').simulate('submit');
-                  _context.next = 3;
+                  // Submit values, and wait for form to complete.
+                  container.querySelector('form').submit();
+                  _context2.next = 3;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
                   });
                 case 3:
                 case "end":
-                  return _context.stop();
+                  return _context2.stop();
               }
-            }, _callee);
+            }, _callee2);
           })));
         case 4:
-          wrapper.update();
-          (0, _chai.expect)(wrapper.find('div.Checkboxes__error')).to.have.lengthOf(1);
-        case 6:
+          (0, _chai.expect)(container.querySelectorAll('div.Checkboxes__error')).to.have.lengthOf(1);
+        case 5:
         case "end":
-          return _context2.stop();
+          return _context3.stop();
       }
-    }, _callee2);
+    }, _callee3);
   })));
-  it('sets the correct value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-    var onSubmitCallback, wrapper, input;
-    return _regeneratorRuntime().wrap(function _callee4$(_context4) {
-      while (1) switch (_context4.prev = _context4.next) {
+  test('sets the correct value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee5() {
+    var onSubmitCallback, _renderCheckboxes4, container, inputs;
+    return _regeneratorRuntime().wrap(function _callee5$(_context5) {
+      while (1) switch (_context5.prev = _context5.next) {
         case 0:
           onSubmitCallback = _sinon.default.spy();
-          wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.Checkboxes, {
-            onSubmit: onSubmitCallback
-          }));
-          input = wrapper.find('input');
-          (0, _chai.expect)(wrapper.find('div.Checkboxes__error')).to.have.lengthOf(0);
-          _context4.next = 6;
-          return (0, _react2.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
-            return _regeneratorRuntime().wrap(function _callee3$(_context3) {
-              while (1) switch (_context3.prev = _context3.next) {
+          _renderCheckboxes4 = renderCheckboxes(onSubmitCallback), container = _renderCheckboxes4.container;
+          inputs = container.querySelectorAll('input');
+          (0, _chai.expect)(container.querySelectorAll('div.Checkboxes__error')).to.have.lengthOf(0);
+          _context5.next = 6;
+          return (0, _react2.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+            return _regeneratorRuntime().wrap(function _callee4$(_context4) {
+              while (1) switch (_context4.prev = _context4.next) {
                 case 0:
-                  // Set value, and wait for Formik to complete.
-                  input.at(2).instance().checked = 'checked';
-                  input.at(2).simulate('change');
-                  _context3.next = 4;
+                  // Set value, and wait for form to complete.
+                  inputs[2].click();
+                  _context4.next = 3;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
                   });
-                case 4:
-                  input.at(3).instance().checked = 'checked';
-                  input.at(3).simulate('change');
-                  _context3.next = 8;
+                case 3:
+                  inputs[3].click();
+                  _context4.next = 6;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
                   });
-                case 8:
-                  // Submit values, and wait for Formik to complete.
-                  wrapper.find('Formik').simulate('submit');
-                  _context3.next = 11;
+                case 6:
+                  // Submit values, and wait for form to complete.
+                  container.querySelector('form').submit();
+                  _context4.next = 9;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
                   });
-                case 11:
+                case 9:
                 case "end":
-                  return _context3.stop();
+                  return _context4.stop();
               }
-            }, _callee3);
+            }, _callee4);
           })));
         case 6:
-          wrapper.update();
-
           // Should not display an error message.
-          (0, _chai.expect)(wrapper.find('div.Checkboxes__error')).to.have.lengthOf(0);
+          (0, _chai.expect)(container.querySelectorAll('div.Checkboxes__error')).to.have.lengthOf(0);
 
-          // Submitted values should contain my value.
+          // Submitted values should contain my value.;
           (0, _chai.expect)(onSubmitCallback).to.have.been.calledWith({
             poison: ['rum', 'whisky']
           });
-        case 9:
+        case 8:
         case "end":
-          return _context4.stop();
+          return _context5.stop();
       }
-    }, _callee4);
+    }, _callee5);
   })));
 });

package/dist/components/Form/RadioButtons/index.test.js

@@ -2,12 +2,12 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _react = _interopRequireDefault(require("react"));
-var _chai = _interopRequireWildcard(require("chai"));
-var _enzyme = require("enzyme");
 var _react2 = require("@testing-library/react");
+var _chai = _interopRequireWildcard(require("chai"));
 var _sinon = _interopRequireDefault(require("sinon"));
 var _sinonChai = _interopRequireDefault(require("sinon-chai"));
-var _stories = require("./stories");
+var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
+var _ = _interopRequireDefault(require("."));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,29 +16,68 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 // Use sinon-chai for spies.
 _chai.default.use(_sinonChai.default);
+var renderRadioButtons = function renderRadioButtons() {
+  var onSubmit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _sinon.default.spy();
+  return (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
+    initialValues: {
+      'poison': null
+    },
+    onSubmit: onSubmit
+  }, /*#__PURE__*/_react.default.createElement(_.default, {
+    title: "Pick your poison",
+    required: true,
+    description: "Please select your poison.",
+    fieldName: "poison",
+    options: {
+      beer: 'Beer',
+      wine: 'Wine',
+      rum: 'Rum',
+      whisky: 'Whisk(e)y',
+      '__other__': 'Anders'
+    },
+    descriptions: {
+      beer: 'Bier is lekker',
+      wine: 'Wijn ook wel',
+      whisky: 'Maar whiskey is het lekkerst'
+    },
+    validation: function validation(value) {
+      var error;
+      if (!value) {
+        error = 'This field is required';
+      }
+      return error;
+    },
+    otherLabel: "Anders"
+  }), /*#__PURE__*/_react.default.createElement("input", {
+    type: "submit",
+    value: "Verzenden"
+  })));
+};
 describe('<RadioButtons />', function () {
-  it('renders 5 label elements', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.RadioButtons, null));
-    (0, _chai.expect)(wrapper.find('label')).to.have.lengthOf(5);
+  test('renders 5 label elements', function () {
+    var _renderRadioButtons = renderRadioButtons(),
+      container = _renderRadioButtons.container;
+    (0, _chai.expect)(container.querySelector('.RadioButtons__inner').querySelectorAll('label')).to.have.lengthOf(5);
   });
-  it('renders a description element', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.RadioButtons, null));
-    (0, _chai.expect)(wrapper.find('div.RadioButtons__description')).to.have.lengthOf(1);
+  test('renders a description element', function () {
+    var _renderRadioButtons2 = renderRadioButtons(),
+      container = _renderRadioButtons2.container;
+    (0, _chai.expect)(container.querySelectorAll('div.RadioButtons__description')).to.have.lengthOf(1);
   });
-  it('displays a required error message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var wrapper;
+  test('displays a required error message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _renderRadioButtons3, container;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.RadioButtons, null));
-          (0, _chai.expect)(wrapper.find('div.RadioButtons__error')).to.have.lengthOf(0);
+          _renderRadioButtons3 = renderRadioButtons(), container = _renderRadioButtons3.container;
+          (0, _chai.expect)(container.querySelectorAll('div.RadioButtons__error')).to.have.lengthOf(0);
           _context2.next = 4;
           return (0, _react2.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
-                  // Submit values, and wait for Formik to complete.
-                  wrapper.find('Formik').simulate('submit');
+                  // Submit values, and wait for form to complete.
+                  container.querySelector('form').submit();
                   _context.next = 3;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
@@ -50,61 +89,55 @@ describe('<RadioButtons />', function () {
             }, _callee);
           })));
         case 4:
-          wrapper.update();
-          (0, _chai.expect)(wrapper.find('div.RadioButtons__error')).to.have.lengthOf(1);
-        case 6:
+          (0, _chai.expect)(container.querySelectorAll('div.RadioButtons__error')).to.have.lengthOf(1);
+        case 5:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   })));
-  it('sets the correct value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-    var onSubmitCallback, wrapper, input;
+  test('sets the correct value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+    var onSubmitCallback, _renderRadioButtons4, container, inputs;
     return _regeneratorRuntime().wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
           onSubmitCallback = _sinon.default.spy();
-          wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.RadioButtons, {
-            onSubmit: onSubmitCallback
-          }));
-          input = wrapper.find('input');
-          (0, _chai.expect)(wrapper.find('div.RadioButtons__error')).to.have.lengthOf(0);
+          _renderRadioButtons4 = renderRadioButtons(onSubmitCallback), container = _renderRadioButtons4.container;
+          inputs = container.querySelectorAll('input');
+          (0, _chai.expect)(container.querySelectorAll('div.RadioButtons__error')).to.have.lengthOf(0);
           _context4.next = 6;
           return (0, _react2.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
             return _regeneratorRuntime().wrap(function _callee3$(_context3) {
               while (1) switch (_context3.prev = _context3.next) {
                 case 0:
-                  // Set value, and wait for Formik to complete.
-                  input.at(2).instance().checked = 'checked';
-                  input.at(2).simulate('change');
-                  _context3.next = 4;
+                  // Set value, and wait for form to complete.
+                  inputs[2].click();
+                  _context3.next = 3;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
                   });
-                case 4:
-                  // Submit values, and wait for Formik to complete.
-                  wrapper.find('Formik').simulate('submit');
-                  _context3.next = 7;
+                case 3:
+                  // Submit values, and wait for form to complete.
+                  container.querySelector('form').submit();
+                  _context3.next = 6;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
                   });
-                case 7:
+                case 6:
                 case "end":
                   return _context3.stop();
               }
             }, _callee3);
           })));
         case 6:
-          wrapper.update();
-
           // Should not display an error message.
-          (0, _chai.expect)(wrapper.find('div.RadioButtons__error')).to.have.lengthOf(0);
+          (0, _chai.expect)(container.querySelectorAll('div.RadioButtons__error')).to.have.lengthOf(0);
 
           // Submitted values should contain my value.
           (0, _chai.expect)(onSubmitCallback).to.have.been.calledWith({
             poison: 'rum'
           });
-        case 9:
+        case 8:
         case "end":
           return _context4.stop();
       }

package/dist/components/Form/Select/index.js

@@ -24,7 +24,11 @@ var Select = function Select(props) {
     _props$disabled = props.disabled,
     disabled = _props$disabled === void 0 ? false : _props$disabled,
     _props$multiple = props.multiple,
-    multiple = _props$multiple === void 0 ? false : _props$multiple;
+    multiple = _props$multiple === void 0 ? false : _props$multiple,
+    _props$isSearchable = props.isSearchable,
+    isSearchable = _props$isSearchable === void 0 ? true : _props$isSearchable,
+    _props$isClearable = props.isClearable,
+    isClearable = _props$isClearable === void 0 ? true : _props$isClearable;
   return /*#__PURE__*/_react.default.createElement(_GenericFormElement.default, {
     className: (0, _classnames.default)('Select', wrapperClassName),
     title: title,
@@ -40,7 +44,9 @@ var Select = function Select(props) {
       'error': error && touched
     }),
     disabled: disabled,
-    multiple: multiple
+    multiple: multiple,
+    isSearchable: isSearchable,
+    isClearable: isClearable
   })));
 };
 var _default = Select;

package/dist/components/Form/TextField/index.js

@@ -51,7 +51,7 @@ var TextField = function TextField(props) {
     touched: touched,
     error: error,
     displayRequiredIndicator: displayRequiredIndicator
-  }, /*#__PURE__*/_react.default.createElement(_formik.Field, _extends({
+  }, /*#__PURE__*/_react.default.createElement(_formik.Field, _extends({}, restProps, {
     className: (0, _classnames.default)(className, {
       'error': error && touched
     }),
@@ -63,7 +63,7 @@ var TextField = function TextField(props) {
     validate: validation,
     onKeyUp: handleChange,
     disabled: disabled
-  }, restProps)));
+  })));
 };
 var _default = (0, _withMapping.default)(TextField);
 exports.default = _default;

package/dist/components/Form/TextField/index.test.js

@@ -2,12 +2,12 @@
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
 var _react = _interopRequireDefault(require("react"));
-var _chai = _interopRequireWildcard(require("chai"));
-var _enzyme = require("enzyme");
 var _react2 = require("@testing-library/react");
+var _chai = _interopRequireWildcard(require("chai"));
 var _sinon = _interopRequireDefault(require("sinon"));
 var _sinonChai = _interopRequireDefault(require("sinon-chai"));
-var _stories = require("./stories");
+var _FormikWrapper = _interopRequireDefault(require("../FormikWrapper"));
+var _ = _interopRequireDefault(require("."));
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -16,30 +16,58 @@ function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try
 function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
 // Use sinon-chai for spies.
 _chai.default.use(_sinonChai.default);
+var renderTextField = function renderTextField() {
+  var onSubmit = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _sinon.default.spy();
+  return (0, _react2.render)( /*#__PURE__*/_react.default.createElement(_FormikWrapper.default, {
+    initialValues: {
+      firstname: ''
+    },
+    displayRequiredIndicator: "required",
+    onSubmit: onSubmit
+  }, /*#__PURE__*/_react.default.createElement(_.default, {
+    title: "First name",
+    required: true,
+    description: "This is a test input.",
+    placeholder: "This is a placeholder",
+    fieldName: "firstname",
+    validation: function validation(value) {
+      var error;
+      if (!value) {
+        error = 'Dit is een vereist veld.';
+      }
+      return error;
+    },
+    onChange: function onChange(e) {
+      return console.log(e.target.value);
+    }
+  })));
+};
 describe('<TextField />', function () {
-  it('renders a label element', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.TextField, null));
-    (0, _chai.expect)(wrapper.find('label')).to.have.lengthOf(1);
+  test('renders a label element', function () {
+    var _renderTextField = renderTextField(),
+      container = _renderTextField.container;
+    (0, _chai.expect)(container.querySelectorAll('label')).to.have.lengthOf(1);
   });
-  it('renders a description element', function () {
-    var wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.TextField, null));
-    (0, _chai.expect)(wrapper.find('div.TextField__description')).to.have.lengthOf(1);
+  test('renders a description element', function () {
+    var _renderTextField2 = renderTextField(),
+      container = _renderTextField2.container;
+    (0, _chai.expect)(container.querySelectorAll('div.TextField__description')).to.have.lengthOf(1);
   });
-  it('displays a required error message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
-    var wrapper, input;
+  test('displays a required error message', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee2() {
+    var _renderTextField3, container, input;
     return _regeneratorRuntime().wrap(function _callee2$(_context2) {
       while (1) switch (_context2.prev = _context2.next) {
         case 0:
-          wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.TextField, null));
-          input = wrapper.find('input');
-          (0, _chai.expect)(wrapper.find('div.TextField__error')).to.have.lengthOf(0);
+          _renderTextField3 = renderTextField(), container = _renderTextField3.container;
+          input = container.querySelector('#firstname');
+          (0, _chai.expect)(container.querySelectorAll('div.TextField__error')).to.have.lengthOf(0);
           _context2.next = 5;
           return (0, _react2.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee() {
             return _regeneratorRuntime().wrap(function _callee$(_context) {
               while (1) switch (_context.prev = _context.next) {
                 case 0:
-                  input.simulate('focus');
-                  input.simulate('blur');
+                  input.focus();
+                  input.blur();
                 case 2:
                 case "end":
                   return _context.stop();
@@ -47,62 +75,59 @@ describe('<TextField />', function () {
             }, _callee);
           })));
         case 5:
-          wrapper.update();
-          (0, _chai.expect)(wrapper.find('div.TextField__error')).to.have.lengthOf(1);
-        case 7:
+          (0, _chai.expect)(container.querySelectorAll('div.TextField__error')).to.have.lengthOf(1);
+        case 6:
         case "end":
           return _context2.stop();
       }
     }, _callee2);
   })));
-  it('sets the correct value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
-    var value, onSubmitCallback, wrapper, input;
+  test('sets the correct value', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee4() {
+    var value, onSubmitCallback, _renderTextField4, container;
     return _regeneratorRuntime().wrap(function _callee4$(_context4) {
       while (1) switch (_context4.prev = _context4.next) {
         case 0:
           value = 'My First Name';
           onSubmitCallback = _sinon.default.spy();
-          wrapper = (0, _enzyme.mount)( /*#__PURE__*/_react.default.createElement(_stories.TextField, {
-            onSubmit: onSubmitCallback
-          }));
-          input = wrapper.find('input');
-          (0, _chai.expect)(wrapper.find('div.TextField__error')).to.have.lengthOf(0);
-          _context4.next = 7;
+          _renderTextField4 = renderTextField(onSubmitCallback), container = _renderTextField4.container;
+          (0, _chai.expect)(container.querySelectorAll('div.TextField__error')).to.have.lengthOf(0);
+          _context4.next = 6;
           return (0, _react2.act)( /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/_regeneratorRuntime().mark(function _callee3() {
             return _regeneratorRuntime().wrap(function _callee3$(_context3) {
               while (1) switch (_context3.prev = _context3.next) {
                 case 0:
-                  // Set value, and wait for Formik to complete.
-                  input.instance().value = value;
-                  input.simulate('change');
-                  _context3.next = 4;
+                  // Set value, and wait for form to complete.
+                  _react2.fireEvent.change(container.querySelector('#firstname'), {
+                    target: {
+                      value: value
+                    }
+                  });
+                  _context3.next = 3;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
                   });
-                case 4:
+                case 3:
                   // Submit values, and wait for Formik to complete.
-                  wrapper.find('Formik').simulate('submit');
-                  _context3.next = 7;
+                  container.querySelector('form').submit();
+                  _context3.next = 6;
                   return new Promise(function (resolve) {
                     setTimeout(resolve);
                   });
-                case 7:
+                case 6:
                 case "end":
                   return _context3.stop();
               }
             }, _callee3);
           })));
-        case 7:
-          wrapper.update();
-
+        case 6:
           // Should not display an error message.
-          (0, _chai.expect)(wrapper.find('div.TextField__error')).to.have.lengthOf(0);
+          (0, _chai.expect)(container.querySelectorAll('div.TextField__error')).to.have.lengthOf(0);
 
           // Submitted values should contain my value.
           (0, _chai.expect)(onSubmitCallback).to.have.been.calledWith({
             firstname: value
           });
-        case 10:
+        case 8:
         case "end":
           return _context4.stop();
       }

package/dist/components/SearchKit/Facets/SelectFacet/index.js

@@ -47,6 +47,8 @@ var SelectFacet = function SelectFacet(_ref) {
     placeholder: placeHolder,
     fieldName: facet.identifier,
     options: options,
+    isSearchable: facet.isSearchable,
+    isClearable: facet.isClearable,
     onChange: function onChange(value) {
       api.removeFiltersByIdentifier(facet.identifier);
       api.setPage({

package/dist/hooks/useDialogHelpers.d.ts

@@ -4,6 +4,7 @@ export interface UseDialogHelpersOptions<T extends HTMLElement> {
     wrapperElement: MutableRefObject<T>;
     closeFunction: () => void;
     isOpen: boolean;
+    disableClosers: boolean;
 }
 /**
  * Hook to allow you to implement your own Dialog component.

package/dist/hooks/useDialogHelpers.js

@@ -20,22 +20,28 @@ function useDialogHelpers(options) {
     id = _options$id === void 0 ? (0, _uuid.v4)() : _options$id,
     wrapperElement = options.wrapperElement,
     closeFunction = options.closeFunction,
-    isOpen = options.isOpen;
+    isOpen = options.isOpen,
+    disableClosers = options.disableClosers;
 
   /**
-   * Close the Dialog by pressing Escape.
+   * Allows you to disable these two hooks.
    */
-  (0, _useClickOutside.default)({
-    refs: [wrapperElement],
-    onClick: closeFunction
-  });
+  if (!disableClosers) {
+    /**
+     * Close the Dialog by pressing Escape.
+     */
+    (0, _useClickOutside.default)({
+      refs: [wrapperElement],
+      onClick: closeFunction
+    });
 
-  /**
-   * Close the Dialog by pressing Escape.
-   */
-  (0, _useEscape.default)({
-    onPress: closeFunction
-  });
+    /**
+     * Close the Dialog by pressing Escape.
+     */
+    (0, _useEscape.default)({
+      onPress: closeFunction
+    });
+  }
 
   /**
    * Make sure focus does not leave the Dialog while it's open.

package/dist/index.js

@@ -315,6 +315,66 @@ Object.defineProperty(exports, "WysiwygField", {
     return _WysiwygField.default;
   }
 });
+Object.defineProperty(exports, "doubleDigits", {
+  enumerable: true,
+  get: function get() {
+    return _date.doubleDigits;
+  }
+});
+Object.defineProperty(exports, "gtm", {
+  enumerable: true,
+  get: function get() {
+    return _gtm.default;
+  }
+});
+Object.defineProperty(exports, "isExternalLink", {
+  enumerable: true,
+  get: function get() {
+    return _link.isExternalLink;
+  }
+});
+Object.defineProperty(exports, "isValidDate", {
+  enumerable: true,
+  get: function get() {
+    return _date.isValidDate;
+  }
+});
+Object.defineProperty(exports, "normalizeLink", {
+  enumerable: true,
+  get: function get() {
+    return _link.normalizeLink;
+  }
+});
+Object.defineProperty(exports, "parseDateWithTimezoneOffset", {
+  enumerable: true,
+  get: function get() {
+    return _date.parseDateWithTimezoneOffset;
+  }
+});
+Object.defineProperty(exports, "useBoolean", {
+  enumerable: true,
+  get: function get() {
+    return _useBoolean.default;
+  }
+});
+Object.defineProperty(exports, "useDialog", {
+  enumerable: true,
+  get: function get() {
+    return _useDialog.default;
+  }
+});
+Object.defineProperty(exports, "useDialogHelpers", {
+  enumerable: true,
+  get: function get() {
+    return _useDialogHelpers.default;
+  }
+});
+Object.defineProperty(exports, "useEscape", {
+  enumerable: true,
+  get: function get() {
+    return _useEscape.default;
+  }
+});
 Object.defineProperty(exports, "useOnScreen", {
   enumerable: true,
   get: function get() {
@@ -333,66 +393,80 @@ Object.defineProperty(exports, "useScrollPosition", {
     return _useScrollPosition.default;
   }
 });
+Object.defineProperty(exports, "useValueForCurrentViewPort", {
+  enumerable: true,
+  get: function get() {
+    return _useValueForCurrentViewPort.default;
+  }
+});
 Object.defineProperty(exports, "useWindowDimensions", {
   enumerable: true,
   get: function get() {
     return _useWindowDimensions.default;
   }
 });
+var _AbbreviationAnnotation = _interopRequireDefault(require("./components/AbbreviationAnnotation"));
 var _Accordion = _interopRequireDefault(require("./components/Accordion"));
 var _AccordionItem = _interopRequireDefault(require("./components/Accordion/AccordionItem"));
 var _AccordionItemVariant = _interopRequireDefault(require("./components/Accordion/AccordionItemVariant"));
-var _Container = _interopRequireDefault(require("./components/Layout/Container"));
 var _Button = _interopRequireDefault(require("./components/Button"));
-var _Header = _interopRequireDefault(require("./components/Header"));
 var _Hamburger = _interopRequireDefault(require("./components/Hamburger"));
-var _WysiwygField = _interopRequireDefault(require("./components/WysiwygField"));
-var _ApiAutocomplete = _interopRequireDefault(require("./components/ApiAutocomplete"));
-var _FontSizeSwitcher = _interopRequireDefault(require("./components/FontSizeSwitcher"));
-var _Pagination = _interopRequireDefault(require("./components/Pagination"));
-var _QuickLayout = _interopRequireDefault(require("./components/Layout/QuickLayout"));
-var _Lottie = _interopRequireDefault(require("./components/Lottie"));
-var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./components/Lottie/LottieAnimationWithMousePosition"));
-var _MagicLine = _interopRequireDefault(require("./components/MagicLine"));
-var _NavigationScroll = _interopRequireDefault(require("./components/NavigationScroll"));
 var _Image = _interopRequireDefault(require("./components/Image"));
 var _Background = _interopRequireDefault(require("./components/Image/Background"));
-var _InlineMenu = _interopRequireDefault(require("./components/InlineMenu"));
-var _Picture = _interopRequireDefault(require("./components/Image/Picture"));
+var _Lottie = _interopRequireDefault(require("./components/Lottie"));
+var _LottieAnimationWithMousePosition = _interopRequireDefault(require("./components/Lottie/LottieAnimationWithMousePosition"));
+var _WysiwygField = _interopRequireDefault(require("./components/WysiwygField"));
+var _ChipFacet = _interopRequireDefault(require("./components/SearchKit/Facets/ChipFacet"));
 var _Dialog = _interopRequireDefault(require("./components/Dialog"));
-var _Share = _interopRequireDefault(require("./components/Share"));
-var _SliderRelated = _interopRequireDefault(require("./components/Sliders/SliderRelated"));
-var _FormikWrapper = _interopRequireDefault(require("./components/Form/FormikWrapper"));
+var _FontSizeSwitcher = _interopRequireDefault(require("./components/FontSizeSwitcher"));
 var _Checkbox = _interopRequireDefault(require("./components/Form/Checkbox"));
 var _Checkboxes = _interopRequireDefault(require("./components/Form/Checkboxes"));
 var _Date = _interopRequireDefault(require("./components/Form/Date"));
 var _DatePicker = _interopRequireDefault(require("./components/Form/DatePicker"));
 var _DateSelect = _interopRequireDefault(require("./components/Form/DateSelect"));
 var _Email = _interopRequireDefault(require("./components/Form/Email"));
+var _FormikWrapper = _interopRequireDefault(require("./components/Form/FormikWrapper"));
 var _Number = _interopRequireDefault(require("./components/Form/Number"));
 var _RadioButtons = _interopRequireDefault(require("./components/Form/RadioButtons"));
 var _SearchField = _interopRequireDefault(require("./components/Form/SearchField"));
 var _Select = _interopRequireDefault(require("./components/Form/Select"));
 var _Textarea = _interopRequireDefault(require("./components/Form/Textarea"));
 var _TextField = _interopRequireDefault(require("./components/Form/TextField"));
-var _KitchenSinkComponentMapperContext = _interopRequireDefault(require("./Context/KitchenSinkComponentMapperContext"));
-var _ViewportContext = _interopRequireDefault(require("./Context/ViewportContext"));
-var _SearchKit = _interopRequireDefault(require("./components/SearchKit"));
-var _SearchField2 = _interopRequireDefault(require("./components/SearchKit/SearchField"));
-var _SearchFacets = _interopRequireDefault(require("./components/SearchKit/SearchFacets"));
-var _SelectFacet = _interopRequireDefault(require("./components/SearchKit/Facets/SelectFacet"));
+var _InlineMenu = _interopRequireDefault(require("./components/InlineMenu"));
 var _ListFacet = _interopRequireDefault(require("./components/SearchKit/Facets/ListFacet"));
-var _ChipFacet = _interopRequireDefault(require("./components/SearchKit/Facets/ChipFacet"));
-var _SearchSelectedFilters = _interopRequireDefault(require("./components/SearchKit/SearchSelectedFilters"));
-var _SearchSorting = _interopRequireDefault(require("./components/SearchKit/SearchSorting"));
+var _MagicLine = _interopRequireDefault(require("./components/MagicLine"));
+var _NavigationScroll = _interopRequireDefault(require("./components/NavigationScroll"));
+var _Pagination = _interopRequireDefault(require("./components/Pagination"));
+var _Picture = _interopRequireDefault(require("./components/Image/Picture"));
+var _SearchFacets = _interopRequireDefault(require("./components/SearchKit/SearchFacets"));
+var _SearchField2 = _interopRequireDefault(require("./components/SearchKit/SearchField"));
+var _SearchKit = _interopRequireDefault(require("./components/SearchKit"));
+var _SearchLoadMore = _interopRequireDefault(require("./components/SearchKit/SearchLoadMore"));
+var _SearchPagination = _interopRequireDefault(require("./components/SearchKit/SearchPagination"));
 var _SearchReset = _interopRequireDefault(require("./components/SearchKit/SearchReset"));
 var _SearchResults = _interopRequireDefault(require("./components/SearchKit/SearchResults"));
-var _SearchPagination = _interopRequireDefault(require("./components/SearchKit/SearchPagination"));
-var _SearchLoadMore = _interopRequireDefault(require("./components/SearchKit/SearchLoadMore"));
+var _SearchSelectedFilters = _interopRequireDefault(require("./components/SearchKit/SearchSelectedFilters"));
+var _SearchSorting = _interopRequireDefault(require("./components/SearchKit/SearchSorting"));
+var _SelectFacet = _interopRequireDefault(require("./components/SearchKit/Facets/SelectFacet"));
+var _ApiAutocomplete = _interopRequireDefault(require("./components/ApiAutocomplete"));
 var _Cookie = _interopRequireDefault(require("./components/Cookie"));
+var _Header = _interopRequireDefault(require("./components/Header"));
+var _Share = _interopRequireDefault(require("./components/Share"));
+var _SliderRelated = _interopRequireDefault(require("./components/Sliders/SliderRelated"));
+var _Container = _interopRequireDefault(require("./components/Layout/Container"));
+var _QuickLayout = _interopRequireDefault(require("./components/Layout/QuickLayout"));
+var _KitchenSinkComponentMapperContext = _interopRequireDefault(require("./Context/KitchenSinkComponentMapperContext"));
+var _ViewportContext = _interopRequireDefault(require("./Context/ViewportContext"));
+var _useBoolean = _interopRequireDefault(require("./hooks/useBoolean"));
+var _useDialog = _interopRequireDefault(require("./hooks/useDialog"));
+var _useDialogHelpers = _interopRequireDefault(require("./hooks/useDialogHelpers"));
+var _useEscape = _interopRequireDefault(require("./hooks/useEscape"));
 var _useOnScreen = _interopRequireDefault(require("./hooks/useOnScreen"));
 var _usePrevious = _interopRequireDefault(require("./hooks/usePrevious"));
 var _useScrollPosition = _interopRequireDefault(require("./hooks/useScrollPosition"));
 var _useWindowDimensions = _interopRequireDefault(require("./hooks/useWindowDimensions"));
-var _AbbreviationAnnotation = _interopRequireDefault(require("./components/AbbreviationAnnotation"));
+var _gtm = _interopRequireDefault(require("./helpers/gtm"));
+var _useValueForCurrentViewPort = _interopRequireDefault(require("./helpers/useValueForCurrentViewPort"));
+var _date = require("./helpers/date");
+var _link = require("./helpers/link");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

package/dist/setupTests.js

@@ -1,14 +1,21 @@
 "use strict";
 
 require("@testing-library/jest-dom/extend-expect");
-var _enzyme = require("enzyme");
-var _enzymeAdapterReact = _interopRequireDefault(require("enzyme-adapter-react-16"));
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+require("@testing-library/jest-dom");
 // jest-dom adds custom jest matchers for asserting on DOM nodes.
 // allows you to do things like:
 // expect(element).toHaveTextContent(/react/i)
 // learn more: https://github.com/testing-library/jest-dom
 
-(0, _enzyme.configure)({
-  adapter: new _enzymeAdapterReact.default()
+jest.mock('react-i18next', function () {
+  return {
+    // this mock makes sure any components using the translate hook can use it without a warning being shown
+    useTranslation: function useTranslation() {
+      return {
+        t: function t(str) {
+          return str;
+        }
+      };
+    }
+  };
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uncinc/uncinc-react-kitchen-sink",
-  "version": "2.5.1",
+  "version": "2.5.3",
   "description": "Default React components that are easily extended.",
   "author": "uncinc",
   "license": "MIT",
@@ -30,7 +30,8 @@
     "build": "react-scripts build",
     "build:js": "cross-env NODE_ENV=production && rm -rf dist && mkdir dist && npx babel src --out-dir dist --copy-files --extensions .ts,.js,.tsx,.jsx,.cjs,.mjs",
     "build:types": "tsc --outDir dist",
-    "test": "jest",
+    "test": "react-scripts test",
+    "test:ci": "react-scripts test --collectCoverage --coverageReporters=cobertura --coverageDirectory=\"./__tests__/coverage\" --ci --reporters=default --reporters=jest-junit --watchAll=false",
     "eject": "react-scripts eject",
     "prepare": "yarn run publish:npm",
     "storybook": "storybook dev -p 6006",
@@ -115,8 +116,8 @@
     "@storybook/react-webpack5": "^7.0.18",
     "@storybook/testing-library": "^0.0.14-next.2",
     "@storybook/theming": "^7.0.18",
-    "@testing-library/jest-dom": "^4.2.4",
-    "@testing-library/react": "^9.3.2",
+    "@testing-library/jest-dom": "^5.11.2",
+    "@testing-library/react": "^14.0.0",
     "@testing-library/user-event": "^7.1.2",
     "@uncinc/eslint-config": "^1.0.5",
     "@uncinc/stylelint-config": "^1.0.2",
@@ -124,9 +125,9 @@
     "babel-plugin-named-exports-order": "^0.0.2",
     "chai": "^4.2.0",
     "cross-env": "^7.0.2",
-    "enzyme": "^3.11.0",
-    "enzyme-adapter-react-16": "^1.15.2",
     "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.5.0",
+    "jest-junit": "^16.0.0",
     "prop-types": "^15.8.1",
     "react-scripts": "^5.0.1",
     "react-test-renderer": "^18.2.0",