@decisiv/ui-components 2.0.1-alpha.21 → 2.0.1-alpha.211

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 _canUseDOM = _interopRequireDefault(require("../../utils/canUseDOM"));
+var _omit = _interopRequireDefault(require("lodash/omit"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
 
 var _commonUIColors = require("../../utils/commonUIColors");
 
@@ -43,16 +41,20 @@ var _components = require("./components");
 
 var _constants = require("./constants");
 
+var _Manager = _interopRequireDefault(require("./Manager"));
+
 var _proptypeValidators = require("./proptypeValidators");
 
-var _schema = _interopRequireDefault(require("./schema"));
+var _ResponsiveModalWrapper = _interopRequireDefault(require("./ResponsiveModalWrapper"));
 
-var _utils = require("./utils");
+var _schema = _interopRequireDefault(require("./schema"));
 
-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; } }
+var _useStackingContext = require("../../utils/useStackingContext");
 
 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 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 +80,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,
@@ -88,9 +90,11 @@ function Modal(_ref) {
       id = _ref.id,
       intent = _ref.intent,
       onClose = _ref.onClose,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'medium' : _ref$size,
       title = _ref.title,
       _ref$zIndex = _ref.zIndex,
-      zIndex = _ref$zIndex === void 0 ? 100 : _ref$zIndex;
+      zIndex = _ref$zIndex === void 0 ? 1001 : _ref$zIndex;
 
   var breakpoints = _defineProperty({}, _breakpointObserver.sizes.LG, 650);
 
@@ -113,45 +117,22 @@ 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,
+    size: size,
+    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 +149,57 @@ 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;
+function ModalWrapper(_ref8) {
+  var onClose = _ref8.onClose,
+      visible = _ref8.visible,
+      children = _ref8.children,
+      _ref8$zIndex = _ref8.zIndex,
+      zIndex = _ref8$zIndex === void 0 ? 1001 : _ref8$zIndex,
+      rest = _objectWithoutProperties(_ref8, ["onClose", "visible", "children", "zIndex"]);
 
-  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;
+  return _react.default.createElement(_useStackingContext.StackingContextProvider, {
+    zIndex: zIndex
+  }, _react.default.createElement(_Manager.default, {
+    onClose: onClose,
+    visible: visible
+  }, _react.default.createElement(Modal, _extends({
+    onClose: onClose,
+    visible: visible,
+    zIndex: zIndex
+  }, 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;

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

@@ -4,14 +4,24 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
+var _designTokens = require("@decisiv/design-tokens");
+
+var _polished = require("polished");
+
 var _ConfigProvider = require("../../providers/ConfigProvider");
 
 var _constants = require("./constants");
 
 var _ = _interopRequireDefault(require("."));
 
+var _Combobox = _interopRequireDefault(require("../Combobox"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+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 _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; }
@@ -22,8 +32,24 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+// Prevent warnings about missing document methods (createRange, etc.)
+jest.mock('popper.js', function () {
+  var _class, _temp;
+
+  var PopperJS = jest.requireActual('popper.js');
+  return _temp = _class = function _class() {
+    _classCallCheck(this, _class);
+
+    return {
+      destroy: function destroy() {},
+      scheduleUpdate: function scheduleUpdate() {}
+    };
+  }, _defineProperty(_class, "placements", PopperJS.placements), _temp;
+});
 beforeAll(function () {
   var root = document.createElement('div');
   root.setAttribute('id', 'modal-root');
@@ -180,6 +206,28 @@ describe('Modal', function () {
       expect(onClose).not.toHaveBeenCalled();
     });
   });
+  describe('size', function () {
+    describe('medium / default', function () {
+      it('renders the modal with a max-width of 650px', function () {
+        var _render3 = render(_react.default.createElement(_.default, defaultProps)),
+            getByRole = _render3.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toHaveStyle('max-width: 650px');
+      });
+    });
+    describe('large', function () {
+      it("renders the modal with a max-width of ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)), function () {
+        var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+          size: "large"
+        }))),
+            getByRole = _render4.getByRole;
+
+        var modal = getByRole('dialog');
+        expect(modal).toHaveStyle("max-width: ".concat((0, _polished.rem)(_designTokens.spacing.base * 90)));
+      });
+    });
+  });
   describe('with invalid props', function () {
     beforeEach(function () {
       jest.spyOn(console, 'error').mockImplementation(function () {});
@@ -212,4 +260,45 @@ describe('Modal', function () {
       });
     });
   });
+  describe('with a Popover as its children', function () {
+    it('renders the Popover with the same zIndex', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
+      var _render5, getByRole, getByLabelText, modal, combobox, modalZIndex, comboboxOptionsZIndex;
+
+      return regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+                zIndex: 1234
+              }), _react.default.createElement(_Combobox.default, {
+                label: "Nested Combobox",
+                options: [{
+                  id: '1',
+                  value: '1',
+                  label: 'Combobox Opt 1'
+                }]
+              }))), getByRole = _render5.getByRole, getByLabelText = _render5.getByLabelText;
+              modal = getByRole('dialog');
+              combobox = getByLabelText('Nested Combobox');
+              (0, _react2.act)(function () {
+                _react2.fireEvent.click(combobox);
+              });
+              _context.next = 6;
+              return (0, _react2.wait)(function () {
+                expect(getByRole('listbox')).toBeInTheDocument();
+              });
+
+            case 6:
+              modalZIndex = window.getComputedStyle(modal).zIndex;
+              comboboxOptionsZIndex = window.getComputedStyle(getByRole('listbox')).zIndex;
+              expect(modalZIndex).toEqual(comboboxOptionsZIndex);
+
+            case 9:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee);
+    })));
+  });
 });

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAqC,CAAC;AAuDlD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAAqC,CAAC;AA0DlD,eAAe,MAAM,CAAC"}

package/lib/components/Modal/schema.js

@@ -17,13 +17,14 @@ schema.propTypes = {
   actions: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
     onClick: _reactDesc.PropTypes.func.isRequired,
     text: _reactDesc.PropTypes.string.isRequired
-  })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `kind`, `size`, and `variant`.'),
+  })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `size` and `variant`.'),
   closeHint: _reactDesc.PropTypes.string.description('The text to present in the tooltip when hovering over the close button.'),
   color: _reactDesc.PropTypes.oneOf(_commonUIColors.commonUIColorKeys).description('The icon color; Will override the default color associated with any specified `intent`.').format('string'),
   icon: _reactDesc.PropTypes.element.description('Which `iconix` icon to display; Will override the default icon associated with any specified `intent`.'),
   id: _reactDesc.PropTypes.string.description('A unique identifier for the modal.'),
   intent: _reactDesc.PropTypes.oneOf(['information', 'success', 'warning', 'danger', 'help']).description('Shortcuts to the most common combinations of icon and color.'),
   onClose: _reactDesc.PropTypes.func.description('The event handler called to close the modal. If not provided, the modal will not include a close button and closing by clicking outside or pressing the "Esc" key will be disabled.'),
+  size: _reactDesc.PropTypes.oneOf(['medium', 'large']).description('Define the max width size of the modal').defaultValue('medium'),
   title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the modal').isRequired,
   visible: _reactDesc.PropTypes.bool.description('A boolean value used to control whether the modal is visible or not').defaultValue('false'),
   zIndex: _reactDesc.PropTypes.number.description('Sets the z-index value for the modal & overlay.')

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

@@ -3,7 +3,7 @@ import { IconProps } from '@decisiv/iconix';
 import { CommonUIColorKeys } from '../../utils/commonUIColors';
 import { ButtonProps } from '../Button/types';
 import { intents } from './constants';
-declare type ActionProps = Exclude<ButtonProps, 'kind' | 'size' | 'variant'>;
+declare type ActionProps = Exclude<ButtonProps, 'size' | 'variant'>;
 export interface ModalProps {
     actions?: [ActionProps] | [ActionProps, ActionProps];
     children: React.ReactNode;
@@ -13,6 +13,7 @@ export interface ModalProps {
     id?: string;
     intent?: keyof typeof intents;
     onClose?: (event: React.MouseEvent<unknown> | KeyboardEvent) => void;
+    size?: 'medium' | 'large';
     title: string;
     visible?: boolean;
     zIndex?: number;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,aAAK,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAAC,CAAC;AAGrE,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;IACrE,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAE/D,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAE9C,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAEtC,aAAK,WAAW,GAAG,OAAO,CAAC,WAAW,EAAE,MAAM,GAAG,SAAS,CAAC,CAAC;AAG5D,MAAM,WAAW,UAAU;IACzB,OAAO,CAAC,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACrD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,KAAK,CAAC,EAAE,iBAAiB,CAAC;IAC1B,IAAI,CAAC,EAAE,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;IACzC,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,MAAM,CAAC,EAAE,MAAM,OAAO,OAAO,CAAC;IAC9B,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;IACrE,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,CAAC;IAC1B,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB"}

package/lib/components/Modal/types.js

@@ -1 +1,5 @@
-"use strict";
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

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

@@ -1,4 +1,4 @@
 export declare function useReturnFocus(returnFocus: boolean): void;
 export declare function useElement(): [HTMLElement | null, (node: HTMLElement | null) => void];
-export declare function useKeepFocusWithin(container: HTMLElement | null): void;
+export declare function useKeepFocusWithin(container: HTMLElement | null, hasCloseButton: boolean): void;
 //# sourceMappingURL=utils.d.ts.map

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,CAAC,SAAS,EAAE,WAAW,GAAG,IAAI,GAAG,IAAI,CAyDtE"}
+{"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"}

package/lib/components/Modal/utils.js

@@ -95,19 +95,21 @@ function useTabbableElements(container) {
  */
 
 
-function useKeepFocusWithin(container) {
+function useKeepFocusWithin(container, hasCloseButton) {
   var tabbableElements = useTabbableElements(container); // This effect should run only when the container changes from null to an element. Since
   // the component does not control the tabbable elements and they may be updated, we
   // don't want to automatically change the focus at any other time.
 
   (0, _react.useEffect)(function () {
     if (container && !(0, _isEmpty.default)(tabbableElements)) {
-      // The first tabbable element will be the close button, but that isn't where
-      // the user's focus should start. Instead, get the second tabbable element.
-      var secondTabbable = (0, _get.default)(tabbableElements, 1, {
+      // Determine where to set the initial focus within the modal:
+      // - If the modal includes a close button, it will be the first tabbable element. However, user focus should not start there. Instead, move the focus to the second tabbable element.
+      // - If there is no close button, set the focus to the first tabbable element.
+      var focusElementIndex = hasCloseButton ? 1 : 0;
+      var focusElement = (0, _get.default)(tabbableElements, focusElementIndex, {
         focus: function focus() {}
       });
-      secondTabbable.focus();
+      focusElement.focus();
     }
   }, [container]); // eslint-disable-line react-hooks/exhaustive-deps
 

package/lib/components/Notifications/Notification/components.d.ts

@@ -102,9 +102,9 @@ export declare const NotificationCard: import("styled-components").StyledCompone
 }> & {
     borderColor: string;
 }, never>;
-export declare const IconColumn: import("styled-components").StyledComponent<"div", any, import("../../Grid/Column/types").default & {
-    span: string;
-}, "span">;
+export declare const IconColumn: import("styled-components").StyledComponent<"div", any, {
+    right?: boolean | undefined;
+}, never>;
 export declare const CloseButton: import("styled-components").StyledComponent<import("react").RefForwardingComponent<HTMLButtonElement, ButtonProps>, any, ButtonProps, never>;
 export declare const ActionButtonContainer: import("styled-components").StyledComponent<"div", any, {}, never>;
 //# sourceMappingURL=components.d.ts.map

package/lib/components/Notifications/Notification/components.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/components.ts"],"names":[],"mappings":";AAWA,OAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAEnD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAa5B,CAAC;AAEF,eAAO,MAAM,UAAU;;UAGtB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAEvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAGjC,CAAC"}
+{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/components.ts"],"names":[],"mappings":";AAWA,OAAe,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAInD,eAAO,MAAM,gBAAgB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;SAa5B,CAAC;AAEF,eAAO,MAAM,UAAU;;SAOtB,CAAC;AAEF,eAAO,MAAM,WAAW,8IAEvB,CAAC;AAEF,eAAO,MAAM,qBAAqB,oEAGjC,CAAC"}

package/lib/components/Notifications/Notification/components.js

@@ -15,7 +15,7 @@ var _color = _interopRequireDefault(require("@decisiv/design-tokens/lib/color"))
 
 var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
 
-var _dynamicModifiers = require("../../../utils/dynamicModifiers");
+var _utils = require("../../../utils");
 
 var _skyPlane = _interopRequireDefault(require("../../../utils/skyPlane"));
 
@@ -23,6 +23,8 @@ var _Grid = _interopRequireDefault(require("../../Grid"));
 
 var _Button = _interopRequireDefault(require("../../Button"));
 
+var _constants = require("../constants");
+
 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 }; }
@@ -30,17 +32,21 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var NotificationCard = (0, _styledComponents.default)(_Grid.default.Container).withConfig({
   displayName: "components__NotificationCard",
   componentId: "ds1zkc-0"
-})(["background-color:", ";box-shadow:", ";border-radius:2px;width:", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _skyPlane.default)(2), (0, _rem.default)(_spacing.default.base * 34), (0, _dynamicModifiers.applyDynamicModifiers)('borderColor', function (_ref) {
+})(["background-color:", ";box-shadow:", ";border-radius:2px;width:", ";", ";"], (0, _toColorString.default)(_color.default.base.snowWhite), (0, _skyPlane.default)(2), _constants.NOTIFICATION_CARD_WIDTH, (0, _utils.applyDynamicModifiers)('borderColor', function (_ref) {
   var borderColor = _ref.borderColor;
   return (0, _styledComponents.css)(["border-left:2px solid ", ";"], borderColor);
 }));
 exports.NotificationCard = NotificationCard;
-var IconColumn = (0, _styledComponents.default)(_Grid.default.Column).attrs({
-  span: '0'
-}).withConfig({
+
+var IconColumn = _styledComponents.default.div.withConfig({
   displayName: "components__IconColumn",
   componentId: "ds1zkc-1"
-})(["top:1px;width:", ";"], (0, _rem.default)(_spacing.default.base * 4));
+})(["padding-left:", ";", ""], (0, _rem.default)(_spacing.default.base), function (_ref2) {
+  var _ref2$right = _ref2.right,
+      right = _ref2$right === void 0 ? false : _ref2$right;
+  return right && (0, _styledComponents.css)(["padding-right:", ";"], (0, _rem.default)(_spacing.default.base));
+});
+
 exports.IconColumn = IconColumn;
 var CloseButton = (0, _styledComponents.default)(_Button.default).withConfig({
   displayName: "components__CloseButton",

package/lib/components/Notifications/Notification/index.d.ts

@@ -1,13 +1,10 @@
 /// <reference types="react" />
+import PropTypes from 'prop-types';
 import { TNotificationProps } from '../../../providers/NotificationsProvider/types';
 declare function Notification(props: TNotificationProps): JSX.Element;
 declare namespace Notification {
-    var propTypes: any;
-    var defaultProps: {
-        actions: undefined;
-        children: null;
-        icon: undefined;
-    };
+    var propTypes: PropTypes.ValidationMap<TNotificationProps>;
+    var defaultProps: Partial<TNotificationProps>;
     var displayName: string;
 }
 export default Notification;

package/lib/components/Notifications/Notification/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/index.tsx"],"names":[],"mappings":";AASA,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAwBpF,iBAAS,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAiG5D;kBAjGQ,YAAY;;;;;;;;;AAqHrB,eAAe,YAAY,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/Notification/index.tsx"],"names":[],"mappings":";AAGA,OAAO,SAA4B,MAAM,YAAY,CAAC;AAMtD,OAAO,EAAE,kBAAkB,EAAE,MAAM,gDAAgD,CAAC;AAwBpF,iBAAS,YAAY,CAAC,KAAK,EAAE,kBAAkB,GAAG,GAAG,CAAC,OAAO,CAuG5D;kBAvGQ,YAAY;;;;;AA8HrB,eAAe,YAAY,CAAC"}

package/lib/components/Notifications/Notification/index.js

@@ -72,6 +72,8 @@ function Notification(props) {
       _props$intent = props.intent,
       intent = _props$intent === void 0 ? _constants.intentNames.information : _props$intent,
       onClose = props.onClose,
+      onFocus = props.onFocus,
+      onHover = props.onHover,
       title = props.title;
   var translate = (0, _useTranslations.default)();
 
@@ -91,13 +93,15 @@ function Notification(props) {
     id: id,
     borderColor: accentColor,
     margin: 0,
-    padding: 1.5
-  }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_components.IconColumn, {
-    paddingRight: 0
-  }, Icon), _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Typography.P, {
+    padding: 1.5,
+    onFocus: onFocus,
+    onMouseOver: onHover
+  }, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_components.IconColumn, null, Icon), _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Grid.default.Row, null, _react.default.createElement(_Grid.default.Column, null, _react.default.createElement(_Typography.P, {
     shade: 0,
     weight: "semibold"
-  }, title)), _react.default.createElement(_components.IconColumn, null, _react.default.createElement(_Tooltip.default, {
+  }, title)), onClose && _react.default.createElement(_components.IconColumn, {
+    right: true
+  }, _react.default.createElement(_Tooltip.default, {
     target: // eslint-disable-next-line react/jsx-wrap-multilines
     _react.default.createElement(_components.CloseButton, {
       "aria-label": translate(closeHint, 'notification.closeHint'),
@@ -120,21 +124,24 @@ function Notification(props) {
       key: action.text
     }, _react.default.createElement(_Button.default, _extends({}, (0, _omit.default)(action, ['kind', 'size', 'variant']), actionProps[index])));
   }))))));
-} // @ts-ignore
+}
 
-
-Notification.propTypes = _objectSpread({}, _schema.default.propTypes, {
+var propTypes = _objectSpread({}, _schema.default.propTypes, {
   actions: _proptypeValidators.actionsValidator,
-  children: _propTypes.default.elementType,
+  children: _propTypes.default.node,
   icon: _propTypes.default.elementType,
   id: _propTypes.default.string.isRequired,
-  onClose: _propTypes.default.func.isRequired
+  onClose: _propTypes.default.func
 });
-Notification.defaultProps = {
+
+var defaultProps = {
   actions: undefined,
   children: null,
-  icon: undefined
+  icon: undefined,
+  onClose: undefined
 };
+Notification.propTypes = propTypes;
+Notification.defaultProps = defaultProps;
 Notification.displayName = 'Notification';
 var _default = Notification;
 exports.default = _default;