@decisiv/ui-components 2.0.2-alpha.7 → 2.0.2-alpha.8

package/lib/components/Modal/index.test.js

@@ -22,6 +22,14 @@ 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); }); }; }
 
+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; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -178,6 +186,34 @@ describe('Modal', function () {
     });
     describe('on close', function () {
       it.todo('returns the focus to where it was before opening the modal');
+    }); // Regression test for PD-2746: initial focus must not auto-scroll the
+    // modal's scrollable ancestor. JSDOM doesn't simulate browser
+    // auto-scroll-on-focus, so we assert the focus call uses preventScroll.
+
+    it('focuses the initial element without scrolling', function () {
+      // useTabbableElements filters on offsetParent, which JSDOM returns as
+      // null. Stub it so the focus hook sees the modal's interactive elements.
+      var offsetParentDescriptor = Object.getOwnPropertyDescriptor(HTMLElement.prototype, 'offsetParent');
+      Object.defineProperty(HTMLElement.prototype, 'offsetParent', {
+        configurable: true,
+        get: function get() {
+          return this.parentNode;
+        }
+      });
+      var focusSpy = jest.spyOn(HTMLElement.prototype, 'focus');
+      render(_react.default.createElement(_.default, defaultProps));
+      var preventScrollCalls = focusSpy.mock.calls.filter(function (_ref2) {
+        var _ref3 = _slicedToArray(_ref2, 1),
+            options = _ref3[0];
+
+        return options && options.preventScroll === true;
+      });
+      expect(preventScrollCalls.length).toBeGreaterThan(0);
+      focusSpy.mockRestore();
+
+      if (offsetParentDescriptor) {
+        Object.defineProperty(HTMLElement.prototype, 'offsetParent', offsetParentDescriptor);
+      }
     });
   });
   describe('keyboard interactions', function () {
@@ -256,10 +292,10 @@ describe('Modal', function () {
         actions: [],
         test: 'with no actions provided',
         error: "Warning: Failed prop type: Invalid prop `actions` supplied to `Modal`, expected an array with one or two options. Validation failed.\n    in Modal"
-      }].forEach(function (_ref2) {
-        var actions = _ref2.actions,
-            test = _ref2.test,
-            error = _ref2.error;
+      }].forEach(function (_ref4) {
+        var actions = _ref4.actions,
+            test = _ref4.test,
+            error = _ref4.error;
         it(test, function () {
           render(_react.default.createElement(_.default, _extends({}, defaultProps, {
             actions: actions

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

@@ -1 +1 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/utils.tsx"],"names":[],"mappings":"AAaA,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,CAWzD;AAUD,wBAAgB,UAAU,IAAI,CAC5B,WAAW,GAAG,IAAI,EAClB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CACnC,CAUA;AAoCD,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,cAAc,EAAE,OAAO,GACtB,IAAI,CA2DN"}
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/utils.tsx"],"names":[],"mappings":"AAcA,wBAAgB,cAAc,CAAC,WAAW,EAAE,OAAO,GAAG,IAAI,CAWzD;AAUD,wBAAgB,UAAU,IAAI,CAC5B,WAAW,GAAG,IAAI,EAClB,CAAC,IAAI,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CACnC,CAUA;AAoCD,wBAAgB,kBAAkB,CAChC,SAAS,EAAE,WAAW,GAAG,IAAI,EAC7B,cAAc,EAAE,OAAO,GACtB,IAAI,CA2DN"}

package/lib/components/Modal/utils.js

@@ -17,6 +17,8 @@ var _react = require("react");
 
 var _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
 
+var _focusWithoutScrolling = _interopRequireDefault(require("../../utils/focusWithoutScrolling"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest(); }
@@ -109,7 +111,7 @@ function useKeepFocusWithin(container, hasCloseButton) {
       var focusElement = (0, _get.default)(tabbableElements, focusElementIndex, {
         focus: function focus() {}
       });
-      focusElement.focus();
+      (0, _focusWithoutScrolling.default)(focusElement);
     }
   }, [container]); // eslint-disable-line react-hooks/exhaustive-deps
 

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

@@ -11,6 +11,7 @@ export interface Step {
 export interface WizardProps extends Pick<ModalProps, 'id' | 'visible' | 'zIndex'> {
     title: string;
     size?: 'normal' | 'extraLarge';
+    stickyHeader?: boolean;
     steps: Step[];
     activeStep: number;
     submitButtonProps?: ButtonProps;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QACxB,IAAI,EAAE,IAAI,CAAC;QACX,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;QACrB,UAAU,EAAE,OAAO,CAAC;QACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;KACjC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AA8ID,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/index.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAO1D,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAGxC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAa5C,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,eAAe,CAAC,EAAE,WAAW,CAAC;IAC9B,mBAAmB,CAAC,EAAE,WAAW,CAAC;IAClC,aAAa,CAAC,EAAE,OAAO,CAAC;CACzB;AAED,MAAM,WAAW,WACf,SAAQ,IAAI,CAAC,UAAU,EAAE,IAAI,GAAG,SAAS,GAAG,QAAQ,CAAC;IACrD,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,QAAQ,GAAG,YAAY,CAAC;IAC/B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,KAAK,EAAE,IAAI,EAAE,CAAC;IACd,UAAU,EAAE,MAAM,CAAC;IACnB,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,iBAAiB,CAAC,EAAE,WAAW,CAAC;IAChC,QAAQ,CAAC,EAAE,UAAU,CAAC,SAAS,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE;QACxB,IAAI,EAAE,IAAI,CAAC;QACX,SAAS,EAAE,MAAM,CAAC;QAClB,WAAW,EAAE,OAAO,CAAC;QACrB,UAAU,EAAE,OAAO,CAAC;QACpB,cAAc,EAAE,KAAK,CAAC,SAAS,CAAC;KACjC,KAAK,KAAK,CAAC,SAAS,CAAC;CACvB;AAoJD,iBAAS,YAAY,CAAC,KAAK,EAAE,iBAAiB,CAAC,WAAW,CAAC,eAQ1D;kBARQ,YAAY;;;;AAiBrB,eAAe,YAAY,CAAC"}

package/lib/components/Wizard/index.js

@@ -64,6 +64,8 @@ var Wizard = function Wizard(_ref) {
       cancelButtonProps = _ref.cancelButtonProps,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'normal' : _ref$size,
+      _ref$stickyHeader = _ref.stickyHeader,
+      stickyHeader = _ref$stickyHeader === void 0 ? true : _ref$stickyHeader,
       steps = _ref.steps,
       onCancel = _ref.onCancel,
       renderActions = _ref.renderActions,
@@ -112,24 +114,25 @@ var Wizard = function Wizard(_ref) {
       disabled: cancelButtonProps ? !cancelButtonProps.onClick : !onCancel
     }, cancelButtonProps)));
   }, [breakpoint, showSubmit, translate, submitButtonProps, showNext, nextButtonProps, showPrevious, previousButtonProps, onCancel, cancelButtonProps]);
+
+  var headerNode = _react.default.createElement(_styles.Header, {
+    size: breakpoint
+  }, _react.default.createElement(_.Flex, {
+    justifyContent: "center"
+  }, _react.default.createElement(_Typography.H2, null, wizardTitle)), _react.default.createElement(_StepTracker.default, {
+    steps: stepsTitles,
+    activeStep: currentStepNumber
+  }));
+
   return _react.default.createElement(_ResponsiveModalWrapper.default, {
     id: id,
     size: sizeMapping[size],
     zIndex: zIndex,
     breakpoint: breakpoint,
     observedElementRef: observedElementRef
-  }, _react.default.createElement(_styles.WizardContainer, null, _react.default.createElement(_styles.ScrollYBox, {
-    size: breakpoint
-  }, _react.default.createElement(_styles.Header, {
+  }, _react.default.createElement(_styles.WizardContainer, null, stickyHeader && headerNode, _react.default.createElement(_styles.ScrollYBox, {
     size: breakpoint
-  }, _react.default.createElement(_.Flex, {
-    justifyContent: "center"
-  }, _react.default.createElement(_Typography.H2, null, wizardTitle)), _react.default.createElement(_StepTracker.default, {
-    steps: stepsTitles,
-    activeStep: currentStepNumber
-  })), _react.default.createElement(_styles.StepContainer, {
-    tabIndex: 0
-  }, !hideBodyTitle && _react.default.createElement(_.Flex, {
+  }, !stickyHeader && headerNode, _react.default.createElement(_styles.StepContainer, null, !hideBodyTitle && _react.default.createElement(_.Flex, {
     marginBottom: 2
   }, _react.default.createElement(_Typography.H3, null, title)), content)), _react.default.createElement(_styles.Footer, {
     size: breakpoint,

package/lib/components/Wizard/index.test.js

@@ -14,6 +14,8 @@ var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _extends() { _extends = Object.assign || 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 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; }
@@ -937,4 +939,82 @@ describe('Wizard', function () {
       });
     });
   });
+  describe('stickyHeader', function () {
+    var stickyHeaderSteps = [{
+      title: 'First Step',
+      content: _react.default.createElement(StepContent, {
+        text: "Step 1 Content"
+      })
+    }, {
+      title: 'Second Step',
+      content: _react.default.createElement(StepContent, {
+        text: "Step 2 Content"
+      })
+    }];
+
+    var depthBetween = function depthBetween(descendant, ancestor) {
+      var depth = 0;
+      var cur = descendant;
+
+      while (cur && cur !== ancestor) {
+        cur = cur.parentElement;
+        depth += 1;
+      }
+
+      if (!cur) throw new Error('ancestor is not actually an ancestor');
+      return depth;
+    };
+
+    var renderWizard = function renderWizard(stickyHeader) {
+      return render(_react.default.createElement(_.default, _extends({
+        title: "Wizard Title",
+        visible: true,
+        activeStep: 1,
+        submitButtonProps: {
+          onClick: function onClick() {
+            return null;
+          }
+        },
+        steps: stickyHeaderSteps
+      }, stickyHeader !== undefined ? {
+        stickyHeader: stickyHeader
+      } : {})));
+    };
+
+    it('renders the title and step content in both modes', function () {
+      [true, false].forEach(function (sticky) {
+        var _renderWizard = renderWizard(sticky),
+            getByRole = _renderWizard.getByRole,
+            unmount = _renderWizard.unmount;
+
+        var modal = getByRole('dialog');
+        expect((0, _react2.within)(modal).getByText('Wizard Title', {
+          selector: 'h2'
+        })).toBeInTheDocument();
+        expect((0, _react2.within)(modal).getByText('Step 1 Content')).toBeInTheDocument();
+        unmount();
+      });
+    });
+    it('places the header outside the scroll container by default and inside when stickyHeader is false', function () {
+      var measure = function measure(stickyHeader) {
+        var _renderWizard2 = renderWizard(stickyHeader),
+            getByRole = _renderWizard2.getByRole,
+            unmount = _renderWizard2.unmount;
+
+        var modal = getByRole('dialog');
+        var title = (0, _react2.within)(modal).getByText('Wizard Title', {
+          selector: 'h2'
+        });
+        var depth = depthBetween(title, modal);
+        unmount();
+        return depth;
+      };
+
+      var stickyDepth = measure(true);
+      var defaultDepth = measure();
+      var nonStickyDepth = measure(false);
+      expect(defaultDepth).toBe(stickyDepth);
+      expect(nonStickyDepth).toBe(stickyDepth + 1);
+    });
+  });
 });

package/lib/components/Wizard/schema.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;AAsDnD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAsC,CAAC;AA2DnD,eAAe,MAAM,CAAC"}

package/lib/components/Wizard/schema.js

@@ -14,6 +14,7 @@ var schema = (0, _reactDesc.describe)({
 schema.propTypes = {
   id: _reactDesc.PropTypes.string.description('A unique identifier for the modal.'),
   size: _reactDesc.PropTypes.oneOf(['normal', 'extraLarge']).description('Define the max width size of the modal').defaultValue('normal'),
+  stickyHeader: _reactDesc.PropTypes.bool.description('When true (default), the title and step tracker stay pinned above the scrollable step content. When false, the header scrolls with the content.').defaultValue(true),
   title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the modal').isRequired,
   onCancel: _reactDesc.PropTypes.func.description('The event handler called when the Cancel button is clicked or the Esc key is pressed. If not provided, the Cancel button will be disabled and pressing Esc will not close the modal.'),
   visible: _reactDesc.PropTypes.bool.description('A boolean value used to control whether the modal is visible or not').defaultValue('false'),

package/lib/components/Wizard/styles.d.ts

@@ -389,12 +389,11 @@ export declare const Header: import("styled-components").StyledComponent<"div",
         readonly XL: "XL";
     }>;
 }> & {
-    flex: number;
     padding: number;
     paddingBottom: number;
     flexDirection: string;
     justifyContent: string;
-}, "flexDirection" | "justifyContent" | "paddingBottom" | "flex" | "padding">;
+}, "flexDirection" | "justifyContent" | "paddingBottom" | "padding">;
 export declare const StepContainer: import("styled-components").StyledComponent<"div", any, Partial<{
     readonly alignContent?: string | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<string, {
         readonly XS: "XS";

package/lib/components/Wizard/styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/styles.ts"],"names":[],"mappings":";AAkBA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAQ3B,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6EAYlB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAMzB,CAAC;AAEF,eAAO,MAAM,UAAU;;;SAYtB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuBlB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA0BlC,CAAC"}
+{"version":3,"file":"styles.d.ts","sourceRoot":"","sources":["../../../src/components/Wizard/styles.ts"],"names":[],"mappings":";AAkBA,eAAO,MAAM,eAAe;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAQ3B,CAAC;AAEF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;oEAYlB,CAAC;AAEF,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;wCAMzB,CAAC;AAEF,eAAO,MAAM,UAAU;;;SAetB,CAAC;AAGF,eAAO,MAAM,MAAM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAuBlB,CAAC;AAEF,eAAO,MAAM,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;6BA0BlC,CAAC"}

package/lib/components/Wizard/styles.js

@@ -36,10 +36,9 @@ var WizardContainer = (0, _styledComponents.default)(_Flex.default).attrs({
 }).withConfig({
   displayName: "styles__WizardContainer",
   componentId: "sc-5745v5-0"
-})(["width:100%;height:100%;overflow-y:auto;"]);
+})(["width:100%;height:100%;min-height:0;"]);
 exports.WizardContainer = WizardContainer;
 var Header = (0, _styledComponents.default)(_Flex.default).attrs({
-  flex: 1,
   padding: 3,
   paddingBottom: 2,
   flexDirection: 'column',
@@ -47,7 +46,7 @@ var Header = (0, _styledComponents.default)(_Flex.default).attrs({
 }).withConfig({
   displayName: "styles__Header",
   componentId: "sc-5745v5-1"
-})(["width:100%;background-color:", ";row-gap:", ";text-align:center;border-bottom:1px solid ", ";"], (0, _polished.toColorString)(_designTokens.color.base.fullMoon), (0, _polished.rem)(_designTokens.spacing.base * 2), (0, _polished.toColorString)(_designTokens.color.opacity.charcoal15));
+})(["width:100%;flex-shrink:0;background-color:", ";row-gap:", ";text-align:center;border-bottom:1px solid ", ";"], (0, _polished.toColorString)(_designTokens.color.base.fullMoon), (0, _polished.rem)(_designTokens.spacing.base * 2), (0, _polished.toColorString)(_designTokens.color.opacity.charcoal15));
 exports.Header = Header;
 var StepContainer = (0, _styledComponents.default)(_Flex.default).attrs({
   flex: 1,
@@ -61,7 +60,7 @@ exports.StepContainer = StepContainer;
 var ScrollYBox = (0, _styledComponents.default)(_components.ScrollYBox).withConfig({
   displayName: "styles__ScrollYBox",
   componentId: "sc-5745v5-3"
-})(["max-height:calc(100vh - ", ");", ";"], (0, _polished.rem)(_designTokens.spacing.base * 14.2), (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["position:relative;max-height:unset;overflow-y:unset;"]))); // this is not styled as mobile first because the button itself isnt yet
+})(["flex:1;min-height:0;max-height:none;height:auto;", ";"], (0, _styleModifiers.when)('size', _breakpointObserver.sizes.XS, (0, _styledComponents.css)(["position:relative;max-height:unset;overflow-y:unset;flex:0 0 auto;"]))); // this is not styled as mobile first because the button itself isnt yet
 
 exports.ScrollYBox = ScrollYBox;
 var Footer = (0, _styledComponents.default)(_components.Footer).withConfig({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decisiv/ui-components",
-  "version": "2.0.2-alpha.7",
+  "version": "2.0.2-alpha.8",
   "description": "Decisiv's design system React components",
   "author": "Decisiv UI Development Team",
   "license": "MIT",