@decisiv/ui-components 2.0.1-alpha.20 → 2.0.1-alpha.200

package/lib/components/Modal/ResponsiveModalWrapper.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _components = require("./components");
+
+var _useUniqueId = _interopRequireDefault(require("../../utils/useUniqueId"));
+
+var _utils = require("./utils");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance"); }
+
+function _iterableToArrayLimit(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var ResponsiveModalWrapper = function ResponsiveModalWrapper(_ref) {
+  var children = _ref.children,
+      breakpoint = _ref.breakpoint,
+      _ref$hasFooter = _ref.hasFooter,
+      hasFooter = _ref$hasFooter === void 0 ? true : _ref$hasFooter,
+      id = _ref.id,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'normal' : _ref$size,
+      onClose = _ref.onClose,
+      _ref$zIndex = _ref.zIndex,
+      zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex,
+      observedElementRef = _ref.observedElementRef;
+  // Any click within the overlay should stay within the overlay. This click event should close
+  // the modal, but not bubble up to any parent elements.
+  var handleOverlayClick = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+    onClose && onClose(event);
+  }, [onClose]); // Any click within the body should stay within the body. This prevents the click event from
+  // bubbling up and firing the onClose handler via the Overlay's onClick.
+
+  var handleBodyClick = (0, _react.useCallback)(function (event) {
+    event.preventDefault();
+    event.stopPropagation();
+  }, []);
+
+  var _useElement = (0, _utils.useElement)(),
+      _useElement2 = _slicedToArray(_useElement, 2),
+      container = _useElement2[0],
+      containerRef = _useElement2[1];
+
+  (0, _utils.useKeepFocusWithin)(container, onClose !== undefined);
+  var uuid = (0, _useUniqueId.default)(id, 'modal-');
+  var modalHeaderId = "modal-header-".concat(uuid);
+  var modalContentId = "modal-content-".concat(uuid);
+  return _react.default.createElement(_components.Overlay, {
+    onClick: handleOverlayClick,
+    ref: observedElementRef,
+    zIndex: zIndex
+  }, _react.default.createElement(_components.Body, {
+    hasFooter: hasFooter,
+    widthSize: size,
+    "aria-describedby": modalContentId,
+    "aria-labelledby": modalHeaderId,
+    "aria-modal": "true",
+    size: breakpoint,
+    id: uuid,
+    onClick: handleBodyClick,
+    ref: containerRef,
+    role: "dialog"
+  }, children));
+};
+
+var _default = ResponsiveModalWrapper;
+exports.default = _default;

package/lib/components/Modal/components.d.ts

@@ -4,11 +4,208 @@ export declare const Overlay: import("styled-components").StyledComponent<"div",
 }, never>;
 export declare const Body: import("styled-components").StyledComponent<"div", any, {
     size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+    hasFooter: boolean;
+    widthSize: "normal" | "extraLarge" | undefined;
 }, never>;
 export declare const ScrollYBox: import("styled-components").StyledComponent<"div", any, {
     size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+    hasFooter?: boolean | undefined;
 }, never>;
-export declare const Header: import("styled-components").StyledComponent<"div", any, import("../Flex").FlexComponentProps, never>;
+export declare const Header: import("styled-components").StyledComponent<"div", any, Partial<{
+    readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly alignSelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flex?: string | number | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("react").ReactText, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexBasis?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexGrow?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexShrink?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly flexWrap?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "nowrap" | "wrap" | "wrap-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexWrapProperty, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifyItems?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly justifySelf?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly order?: number | "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").GlobalsNumber, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }> | undefined;
+    readonly size?: "XS" | "SM" | "MD" | "LG" | "XL" | undefined;
+}> & Partial<{
+    readonly margin: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly marginY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly padding: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingBottom: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingLeft: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingRight: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingTop: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingX: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+    readonly paddingY: import("../../utils/dynamicModifiers").DynamicModifiersProp<number, {
+        readonly XS: "XS";
+        readonly SM: "SM";
+        readonly MD: "MD";
+        readonly LG: "LG";
+        readonly XL: "XL";
+    }>;
+}> & {
+    flexDirection: string;
+}, "flexDirection">;
 export declare const CloseButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 export declare const Content: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
@@ -46,7 +243,7 @@ export declare const Content: import("styled-components").StyledComponent<"div",
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -241,7 +438,7 @@ export declare const Footer: import("styled-components").StyledComponent<"div",
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -400,4 +597,5 @@ export declare const Footer: import("styled-components").StyledComponent<"div",
 }> & {
     hasIcon?: boolean | undefined;
 }, never>;
+export declare const ActionWrapper: import("styled-components").StyledComponent<"div", any, import("../Flex").FlexComponentProps, never>;
 //# sourceMappingURL=components.d.ts.map

package/lib/components/Modal/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/components.tsx"],"names":[],"mappings":";AAwCA,eAAO,MAAM,OAAO;;SASnB,CAAC;AAEF,eAAO,MAAM,IAAI;;SA6BhB,CAAC;AAEF,eAAO,MAAM,UAAU;;SAetB,CAAC;AAEF,eAAO,MAAM,MAAM,sGAAiB,CAAC;AAErC,eAAO,MAAM,oBAAoB,oEAIhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAOnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoBlB,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/components.tsx"],"names":[],"mappings":";AAaA,eAAO,MAAM,OAAO;;SASnB,CAAC;AAEF,eAAO,MAAM,IAAI;;;;SAgDhB,CAAC;AAEF,eAAO,MAAM,UAAU;;;SA4BtB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;mBAAoD,CAAC;AAExE,eAAO,MAAM,oBAAoB,oEAIhC,CAAC;AAEF,eAAO,MAAM,OAAO;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAKnB,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAoBlB,CAAC;AAEF,eAAO,MAAM,aAAa,sGAkBzB,CAAC"}

package/lib/components/Modal/components.js

@@ -3,10 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.Footer = exports.Content = exports.CloseButtonContainer = exports.Header = exports.ScrollYBox = exports.Body = exports.Overlay = void 0;
+exports.ActionWrapper = exports.Footer = exports.Content = exports.CloseButtonContainer = exports.Header = exports.ScrollYBox = exports.Body = exports.Overlay = void 0;
 
 var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
@@ -23,23 +25,6 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-function withIcon() {
-  return (0, _styledComponents.css)(["", ";"], (0, _dynamicModifiers.applyDynamicModifiers)('hasIcon', function (_ref) {
-    var hasIcon = _ref.hasIcon,
-        size = _ref.size;
-
-    if (hasIcon) {
-      if (size === _breakpointObserver.sizes.XS) {
-        return (0, _styledComponents.css)(["padding-left:", "px;"], _designTokens.spacing.base * 2 + 42);
-      }
-
-      return (0, _styledComponents.css)(["padding-left:", "px;"], _designTokens.spacing.base * 3 + 42);
-    }
-
-    return '';
-  }));
-}
-
 var Overlay = _styledComponents.default.div.withConfig({
   displayName: "components__Overlay",
   componentId: "zcog99-0"
@@ -50,17 +35,19 @@ exports.Overlay = Overlay;
 var Body = _styledComponents.default.div.withConfig({
   displayName: "components__Body",
   componentId: "zcog99-1"
-})(["background:", ";border-radius:2px;box-shadow:0 1px 4px ", ";margin:40px auto;max-height:calc(100% - 80px);max-width:650px;overflow:hidden;padding-bottom:75px;position:relative;width:100%;", ";"], (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.shadow.light.default), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["border-radius:0;bottom:0;left:0;margin:0;max-height:100%;overflow:hidden;position:fixed;right:0;top:0;"])));
+})(["background:", ";border-radius:2px;box-shadow:0 1px 4px ", ";margin:40px auto;max-height:calc(100% - 80px);max-width:650px;overflow:hidden;padding-bottom:75px;position:relative;width:100%;", ";", ";", ""], (0, _toColorString.default)(_designTokens.color.base.snowWhite), (0, _toColorString.default)(_designTokens.color.shadow.light.default), (0, _styleModifiers.when)('hasFooter', false, (0, _styledComponents.css)(["padding-bottom:0;"])), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["border-radius:0;bottom:0;left:0;margin:0;max-height:100%;overflow:hidden;position:fixed;right:0;top:0;padding-bottom:0;"])), (0, _styleModifiers.when)('widthSize', 'extraLarge', (0, _styledComponents.css)(["max-width:", ";"], (0, _rem.default)(_designTokens.spacing.base * 90))));
 
 exports.Body = Body;
 
 var ScrollYBox = _styledComponents.default.div.withConfig({
   displayName: "components__ScrollYBox",
   componentId: "zcog99-2"
-})(["overflow-y:auto;position:relative;height:100%;max-height:calc(100vh - 150px);", ";"], (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["max-height:calc(100vh - 70px);"])));
+})(["width:100%;overflow-y:auto;position:relative;height:100%;max-height:calc(100vh - 150px);", ";", ";"], (0, _styleModifiers.when)('hasFooter', false, (0, _styledComponents.css)(["max-height:calc(100vh - 75px);"])), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["max-height:calc(100vh - 70px);"])));
 
 exports.ScrollYBox = ScrollYBox;
-var Header = (0, _styledComponents.default)(_Flex.default).withConfig({
+var Header = (0, _styledComponents.default)(_Flex.default).attrs({
+  flexDirection: 'column'
+}).withConfig({
   displayName: "components__Header",
   componentId: "zcog99-3"
 })([""]);
@@ -75,10 +62,15 @@ exports.CloseButtonContainer = CloseButtonContainer;
 var Content = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "components__Content",
   componentId: "zcog99-5"
-})(["flex:1;flex-direction:row;", ";"], withIcon());
+})(["flex:1;flex-direction:row;"]);
 exports.Content = Content;
 var Footer = (0, _styledComponents.default)(_Flex.default).withConfig({
   displayName: "components__Footer",
   componentId: "zcog99-6"
-})(["background-color:", ";border-radius:0 0 2px 2px;border-top:1px solid ", ";bottom:0;left:0;position:absolute;right:0;", ";", ";"], (0, _toColorString.default)(_designTokens.color.base.fullMoon), (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), withIcon(), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["border-radius:0;"])));
-exports.Footer = Footer;
+})(["background-color:", ";border-radius:0 0 2px 2px;border-top:1px solid ", ";bottom:0;left:0;position:absolute;right:0;", ";"], (0, _toColorString.default)(_designTokens.color.base.fullMoon), (0, _toColorString.default)(_designTokens.color.opacity.charcoal15), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["border-radius:0;background-color:", ";flex-direction:column;"], (0, _toColorString.default)(_designTokens.color.base.fullMoon))));
+exports.Footer = Footer;
+var ActionWrapper = (0, _styledComponents.default)(_Flex.default).withConfig({
+  displayName: "components__ActionWrapper",
+  componentId: "zcog99-7"
+})(["", ";"], (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["width:100%;&:not(:first-child){margin-top:", ";}button{font-size:", ";width:100%;height:", ";}"], (0, _rem.default)(_designTokens.spacing.base * 0.5), (0, _rem.default)(_designTokens.typography.size.alias.extraLarge), (0, _rem.default)(_designTokens.spacing.base * 5))));
+exports.ActionWrapper = ActionWrapper;

package/lib/components/Modal/index.d.ts

@@ -1,9 +1,13 @@
-import React from 'react';
+/// <reference types="react" />
 import { ModalProps } from './types';
-declare function Manager({ onClose, visible, children, ...rest }: ModalProps): React.ReactPortal | null;
-declare namespace Manager {
+declare function ModalWrapper({ onClose, visible, children, ...rest }: ModalProps): JSX.Element;
+declare namespace ModalWrapper {
     var propTypes: any;
+    var defaultProps: {
+        actions: undefined;
+        icon: undefined;
+    };
     var displayName: string;
 }
-export default Manager;
+export default ModalWrapper;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":"AAIA,OAAO,KAA0C,MAAM,OAAO,CAAC;AA8B/D,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAyJrC,iBAAS,OAAO,CAAC,EACf,OAAO,EACP,OAAO,EACP,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,UAAU,GAAG,KAAK,CAAC,WAAW,GAAG,IAAI,CAmCvC;kBAxCQ,OAAO;;;;AAmDhB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/index.tsx"],"names":[],"mappings":";AAgCA,OAAO,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AA+HrC,iBAAS,YAAY,CAAC,EAAE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,eAQxE;kBARQ,YAAY;;;;;;;;AAwBrB,eAAe,YAAY,CAAC"}

package/lib/components/Modal/index.js

@@ -5,25 +5,23 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _get = _interopRequireDefault(require("lodash/get"));
-
-var _omit = _interopRequireDefault(require("lodash/omit"));
-
-var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireWildcard(require("react"));
-
 var _breakpointObserver = require("@decisiv/breakpoint-observer");
 
 var _designTokens = require("@decisiv/design-tokens");
 
 var _Times = _interopRequireDefault(require("@decisiv/iconix/lib/components/Times"));
 
-var _ConfigProvider = require("../../providers/ConfigProvider");
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _isEmpty = _interopRequireDefault(require("lodash/isEmpty"));
+
+var _omit = _interopRequireDefault(require("lodash/omit"));
 
-var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
 var _commonUIColors = require("../../utils/commonUIColors");
 
@@ -43,16 +41,18 @@ var _components = require("./components");
 
 var _constants = require("./constants");
 
+var _Manager = _interopRequireDefault(require("./Manager"));
+
 var _proptypeValidators = require("./proptypeValidators");
 
+var _ResponsiveModalWrapper = _interopRequireDefault(require("./ResponsiveModalWrapper"));
+
 var _schema = _interopRequireDefault(require("./schema"));
 
-var _utils = require("./utils");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { keys.push.apply(keys, Object.getOwnPropertySymbols(object)); } if (enumerableOnly) keys = keys.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -78,7 +78,7 @@ var actionProps = [{}, {
 }];
 
 function Modal(_ref) {
-  var _ref2, _ref3, _ref4, _ref5, _ref6;
+  var _ref2, _ref3, _ref4, _ref5, _ref6, _ref7;
 
   var actions = _ref.actions,
       children = _ref.children,
@@ -113,45 +113,21 @@ function Modal(_ref) {
 
     return null;
   }, [colorProp, icon, intent]);
-
-  var _useElement = (0, _utils.useElement)(),
-      _useElement2 = _slicedToArray(_useElement, 2),
-      container = _useElement2[0],
-      containerRef = _useElement2[1];
-
-  (0, _utils.useKeepFocusWithin)(container);
   var uuid = (0, _useUniqueId.default)(id, 'modal-');
   var modalHeaderId = "modal-header-".concat(uuid);
   var modalContentId = "modal-content-".concat(uuid);
-  var modalFooterId = "modal-footer-".concat(uuid); // Any click within the overlay should stay within the overlay. This click event should close
-  // the modal, but not bubble up to any parent elements.
-
-  var handleOverlayClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-    onClose && onClose(event);
-  }, [onClose]); // Any click within the body should stay within the body. This prevents the click event from
-  // bubbling up and firing the onClose handler via the Overlay's onClick.
-
-  var handleBodyClick = (0, _react.useCallback)(function (event) {
-    event.preventDefault();
-    event.stopPropagation();
-  }, []);
-  return _react.default.createElement(_components.Overlay, {
-    onClick: handleOverlayClick,
-    ref: observedElementRef,
-    zIndex: zIndex
-  }, _react.default.createElement(_components.Body, {
-    "aria-describedby": modalContentId,
-    "aria-labelledby": modalHeaderId,
-    "aria-modal": "true",
-    size: breakpoint,
-    id: uuid,
-    onClick: handleBodyClick,
-    ref: containerRef,
-    role: "dialog"
+  var modalFooterId = "modal-footer-".concat(uuid);
+  var hasFooter = !(0, _isEmpty.default)(actions);
+  return _react.default.createElement(_ResponsiveModalWrapper.default, {
+    id: id,
+    zIndex: zIndex,
+    onClose: onClose,
+    breakpoint: breakpoint,
+    hasFooter: hasFooter,
+    observedElementRef: observedElementRef
   }, _react.default.createElement(_components.ScrollYBox, {
-    size: breakpoint
+    size: breakpoint,
+    hasFooter: hasFooter
   }, _react.default.createElement(_components.Header, {
     id: modalHeaderId,
     paddingTop: (_ref2 = {}, _defineProperty(_ref2, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref2, _breakpointObserver.sizes.XS, 2), _ref2),
@@ -168,70 +144,52 @@ function Modal(_ref) {
     }),
     zIndex: zIndex + 10
   }, translate(closeHint, 'modal.closeHint'))), IconComponent && _react.default.createElement(_Flex.default, {
-    marginRight: 1
+    marginBottom: 0.5
   }, IconComponent), _react.default.createElement(_Typography.H2, null, title)), _react.default.createElement(_components.Content, {
     hasIcon: !!IconComponent,
     id: modalContentId,
     paddingBottom: (_ref4 = {}, _defineProperty(_ref4, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref4, _breakpointObserver.sizes.XS, 2), _ref4),
     paddingX: (_ref5 = {}, _defineProperty(_ref5, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref5, _breakpointObserver.sizes.XS, 2), _ref5),
     size: breakpoint
-  }, children)), actions && _react.default.createElement(_components.Footer, {
+  }, children)), hasFooter && _react.default.createElement(_components.Footer, {
     hasIcon: !!IconComponent,
     id: modalFooterId,
     paddingX: (_ref6 = {}, _defineProperty(_ref6, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref6, _breakpointObserver.sizes.XS, 2), _ref6),
-    paddingY: 2,
+    paddingY: (_ref7 = {}, _defineProperty(_ref7, _breakpointObserver.sizes.LG, 2), _defineProperty(_ref7, _breakpointObserver.sizes.XS, 1.5), _ref7),
     size: breakpoint
-  }, actions.map(function (action, index) {
-    return _react.default.createElement(_Flex.default, {
+  }, actions && actions.map(function (action, index) {
+    return _react.default.createElement(_components.ActionWrapper, {
       key: action.text,
-      marginRight: 0.5
-    }, _react.default.createElement(_Button.default, _extends({}, (0, _omit.default)(action, ['kind', 'size', 'variant']), actionProps[index])));
-  }))));
+      marginRight: 0.5,
+      size: breakpoint
+    }, _react.default.createElement(_Button.default, _extends({}, actionProps[index], (0, _omit.default)(action, ['size', 'variant']))));
+  })));
 }
 
-function Manager(_ref7) {
-  var onClose = _ref7.onClose,
-      visible = _ref7.visible,
-      children = _ref7.children,
-      rest = _objectWithoutProperties(_ref7, ["onClose", "visible", "children"]);
-
-  (0, _utils.useReturnFocus)(!visible);
-
-  var _useConfig = (0, _ConfigProvider.useConfig)(),
-      createPortal = _useConfig.createPortal;
-
-  var onKeyDown = (0, _react.useCallback)(function (event) {
-    if (event.key === 'Escape') {
-      onClose && onClose(event);
-    }
-  }, [onClose]); // Allow closing the modal by pressing the Escape key
-
-  (0, _react.useEffect)(function () {
-    if (visible && _canUseDOM.default) {
-      document.addEventListener('keydown', onKeyDown);
-      return function () {
-        document.removeEventListener('keydown', onKeyDown);
-      };
-    } // eslint has issues with no return statement here...
-
-
-    return undefined;
-  }, [visible, onKeyDown]);
-
-  if (visible) {
-    return createPortal(_react.default.createElement(Modal, _extends({
-      onClose: onClose
-    }, rest), children));
-  }
-
-  return null;
+function ModalWrapper(_ref8) {
+  var onClose = _ref8.onClose,
+      visible = _ref8.visible,
+      children = _ref8.children,
+      rest = _objectWithoutProperties(_ref8, ["onClose", "visible", "children"]);
+
+  return _react.default.createElement(_Manager.default, {
+    onClose: onClose,
+    visible: visible
+  }, _react.default.createElement(Modal, _extends({
+    onClose: onClose,
+    visible: visible
+  }, rest), children));
 } // @ts-ignore
 
 
-Manager.propTypes = _objectSpread({}, _schema.default.propTypes, {
+ModalWrapper.propTypes = _objectSpread({}, _schema.default.propTypes, {
   actions: _proptypeValidators.actionsValidator,
   icon: _propTypes.default.elementType
 });
-Manager.displayName = 'Modal';
-var _default = Manager;
+ModalWrapper.defaultProps = {
+  actions: undefined,
+  icon: undefined
+};
+ModalWrapper.displayName = 'Modal';
+var _default = ModalWrapper;
 exports.default = _default;