@decisiv/ui-components 2.0.1-alpha.8 → 2.0.1-alpha.97

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;

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

@@ -6,12 +6,16 @@ var _react2 = require("@testing-library/react");
 
 var _constants = require("../../../constants");
 
-var _ConfigProvider = require("../../../providers/ConfigProvider");
+var _providers = require("../../../providers");
 
 var _ = _interopRequireDefault(require("."));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 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; }
@@ -20,12 +24,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_providers.ConfigProvider, null, children);
+};
+
 var render = function render(ui, options) {
   return (0, _react2.render)(ui, _objectSpread({}, options, {
-    wrapper: function wrapper(_ref) {
-      var children = _ref.children;
-      return _react.default.createElement(_ConfigProvider.ConfigProvider, null, children);
-    }
+    wrapper: wrapper
   }));
 };
 
@@ -60,26 +66,39 @@ describe('Notification', function () {
 
     expect(queryByText(defaultProps.title)).toBeTruthy();
   });
-  it('renders a close button in the header of the notification', function () {
-    var onClose = jest.fn();
+  describe('when onClose is NOT provided', function () {
+    it('does NOT render a close button in the header of the notification', function () {
+      var onClose = defaultProps.onClose,
+          testProps = _objectWithoutProperties(defaultProps, ["onClose"]);
 
-    var _render3 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
-      onClose: onClose
-    }))),
-        queryByLabelText = _render3.queryByLabelText;
+      var _render3 = render(_react.default.createElement(_.default, testProps)),
+          queryByLabelText = _render3.queryByLabelText;
+
+      expect(queryByLabelText(/close/i)).not.toBeTruthy();
+    });
+  });
+  describe('when onClose is provided', function () {
+    it('renders a close button in the header of the notification', function () {
+      var onClose = jest.fn();
+
+      var _render4 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+        onClose: onClose
+      }))),
+          queryByLabelText = _render4.queryByLabelText;
 
-    var closeButton = queryByLabelText(/close/i);
-    expect(closeButton).toBeTruthy();
+      var closeButton = queryByLabelText(/close/i);
+      expect(closeButton).toBeTruthy();
 
-    _react2.fireEvent.click(closeButton);
+      _react2.fireEvent.click(closeButton);
 
-    expect(onClose).toHaveBeenCalled();
+      expect(onClose).toHaveBeenCalled();
+    });
   });
   it('renders the children as the content of the notification', function () {
     var content = 'Test modal content.';
 
-    var _render4 = render(_react.default.createElement(_.default, defaultProps, content)),
-        queryByText = _render4.queryByText;
+    var _render5 = render(_react.default.createElement(_.default, defaultProps, content)),
+        queryByText = _render5.queryByText;
 
     expect(queryByText(content)).toBeTruthy();
   });
@@ -94,10 +113,10 @@ describe('Notification', function () {
       text: 'secondary'
     }];
 
-    var _render5 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
+    var _render6 = render(_react.default.createElement(_.default, _extends({}, defaultProps, {
       actions: actions
     }))),
-        queryByText = _render5.queryByText;
+        queryByText = _render6.queryByText;
 
     var primaryActionButton = queryByText(actions[0].text);
     expect(primaryActionButton).toBeTruthy();

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

@@ -1,10 +1,11 @@
 /// <reference types="react" />
 import { TNotifications } from '../../../providers/NotificationsProvider/types';
 interface TNotificationsContainerProps {
+    scroll?: boolean;
     notifications?: TNotifications;
     marginTop?: number;
     zIndex?: number;
 }
-declare function NotificationsPanel({ marginTop, zIndex, }: TNotificationsContainerProps): JSX.Element;
+declare function NotificationsPanel({ marginTop, zIndex, }: TNotificationsContainerProps): JSX.Element | null;
 export default NotificationsPanel;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/NotificationsPanel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAEL,cAAc,EACf,MAAM,gDAAgD,CAAC;AAYxD,UAAU,4BAA4B;IACpC,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAwDD,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,MAAM,GACP,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,CAwC5C;AAED,eAAe,kBAAkB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/Notifications/NotificationsPanel/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAEL,cAAc,EACf,MAAM,gDAAgD,CAAC;AAcxD,UAAU,4BAA4B;IACpC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,aAAa,CAAC,EAAE,cAAc,CAAC;IAC/B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AA4ED,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,MAAM,GACP,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,GAAG,IAAI,CA2CnD;AAED,eAAe,kBAAkB,CAAC"}

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

@@ -37,6 +37,8 @@ var _Notification = _interopRequireDefault(require("../Notification"));
 
 var _useNotifications2 = _interopRequireDefault(require("../useNotifications"));
 
+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 }; }
@@ -54,14 +56,30 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var NotificationsContainer = _styledComponents.default.div.withConfig({
   displayName: "NotificationsPanel__NotificationsContainer",
   componentId: "sc-1u8dp2k-0"
-})(["bottom:", ";margin-top:", ";overflow-y:auto;padding-bottom:", ";position:fixed;right:", ";top:0;z-index:", ";overflow-x:hidden;"], (0, _rem.default)(_spacing.default.base * 0.5), function (_ref) {
+})(["max-height:", ";margin-bottom:", ";margin-top:", ";overflow-y:hidden;padding-bottom:", ";position:fixed;right:", ";top:0;min-width:calc(1.25rem + ", ");z-index:", ";overflow-x:hidden;scrollbar-width:thin;", ";", ";"], function (_ref) {
   var _ref$marginTop = _ref.marginTop,
       marginTop = _ref$marginTop === void 0 ? 0 : _ref$marginTop;
+  return "calc(100vh - ".concat((0, _rem.default)(_spacing.default.base * marginTop), ");");
+}, function (_ref2) {
+  var _ref2$marginTop = _ref2.marginTop,
+      marginTop = _ref2$marginTop === void 0 ? 0 : _ref2$marginTop;
+  return (0, _rem.default)(_spacing.default.base * marginTop);
+}, function (_ref3) {
+  var _ref3$marginTop = _ref3.marginTop,
+      marginTop = _ref3$marginTop === void 0 ? 0 : _ref3$marginTop;
   return (0, _rem.default)(_spacing.default.base * marginTop);
-}, (0, _rem.default)(_spacing.default.base * 0.5), (0, _rem.default)(_spacing.default.base), function (_ref2) {
-  var _ref2$zIndex = _ref2.zIndex,
-      zIndex = _ref2$zIndex === void 0 ? 100 : _ref2$zIndex;
+}, (0, _rem.default)(_spacing.default.base * 0.8), (0, _rem.default)(_spacing.default.base), _constants.NOTIFICATION_CARD_WIDTH, function (_ref4) {
+  var _ref4$zIndex = _ref4.zIndex,
+      zIndex = _ref4$zIndex === void 0 ? 100 : _ref4$zIndex;
   return zIndex;
+}, function (_ref5) {
+  var scroll = _ref5.scroll,
+      _ref5$notifications = _ref5.notifications,
+      notifications = _ref5$notifications === void 0 ? [] : _ref5$notifications;
+  return scroll && notifications.length > 2 ? "overflow-y: auto;" : "overflow-y: hidden;";
+}, function (_ref6) {
+  var notifications = _ref6.notifications;
+  return (0, _isEmpty.default)(notifications) && "width : 0";
 });
 
 var FloatingButton = (0, _styledComponents.default)(_Button.default).attrs({
@@ -71,41 +89,46 @@ var FloatingButton = (0, _styledComponents.default)(_Button.default).attrs({
   componentId: "sc-1u8dp2k-1"
 })(["box-shadow:", ";&:focus,&:focus:not(:active){border-color:", ";", ";}&:hover,&:hover:not(:active){background-color:", ";color:", ";}"], (0, _skyPlane.default)(2), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _focusRingWithColor.default)((0, _toColorString.default)(_color.default.interaction.pacificOcean40)), (0, _toColorString.default)(_color.default.interaction.pacificOcean), (0, _toColorString.default)(_color.default.interaction.pacificOcean.fg));
 
+var FloatingButtonColumn = _styledComponents.default.div.withConfig({
+  displayName: "NotificationsPanel__FloatingButtonColumn",
+  componentId: "sc-1u8dp2k-2"
+})(["display:flex;flex:1;height:24px;justify-content:flex-end;padding-left:", ";padding-right:", ";"], (0, _rem.default)(_spacing.default.base), (0, _rem.default)(_spacing.default.base));
+
 var NotificationContainer = _styledComponents.default.div.withConfig({
   displayName: "NotificationsPanel__NotificationContainer",
-  componentId: "sc-1u8dp2k-2"
+  componentId: "sc-1u8dp2k-3"
 })(["height:auto;max-height:0;opacity:0;transition:opacity 1s cubic-bezier(0.33,1,0.68,1),max-height 1s cubic-bezier(0.33,1,0.68,1);", ";"], (0, _styledComponentsModifiers.applyStyleModifiers)(_defineProperty({}, _types.NotificationState.DISPLAYING, function () {
   return (0, _styledComponents.css)(["max-height:100vh;opacity:1;"]);
 }), 'renderState'));
 
-function NotificationsPanel(_ref3) {
-  var marginTop = _ref3.marginTop,
-      zIndex = _ref3.zIndex;
+function NotificationsPanel(_ref7) {
+  var marginTop = _ref7.marginTop,
+      zIndex = _ref7.zIndex;
 
   var _useNotifications = (0, _useNotifications2.default)(),
       dismissAll = _useNotifications.dismissAll,
+      isDismissingAll = _useNotifications.isDismissingAll,
       notifications = _useNotifications.notifications;
 
   var translate = (0, _useTranslations.default)();
-  return _react.default.createElement(NotificationsContainer, {
+  return (0, _isEmpty.default)(notifications) ? null : _react.default.createElement(NotificationsContainer, {
+    scroll: !isDismissingAll,
     marginTop: marginTop,
-    zIndex: zIndex
+    zIndex: zIndex,
+    notifications: notifications
   }, _react.default.createElement(_Grid.default.Container, null, _react.default.createElement(_Grid.default.Row, {
     alignment: "end"
-  }, _react.default.createElement(_Grid.default.Column, {
-    height: "24px",
-    span: "0"
-  }, notifications.length >= 2 && _react.default.createElement(FloatingButton, {
+  }, _react.default.createElement(FloatingButtonColumn, null, !isDismissingAll && notifications.length >= 2 && _react.default.createElement(FloatingButton, {
     onClick: dismissAll,
     size: "small",
     text: translate(undefined, 'notifications.dismissAll')
-  })))), !(0, _isEmpty.default)(notifications) && _react.default.createElement(_Grid.default.Container, null, (notifications || []).map(function (_ref4) {
-    var _ref5 = _slicedToArray(_ref4, 3),
-        notificationProps = _ref5[0],
-        body = _ref5[1],
-        _ref5$ = _ref5[2],
-        notificationID = _ref5$.notificationID,
-        state = _ref5$.state;
+  })))), _react.default.createElement(_Grid.default.Container, null, (notifications || []).map(function (_ref8) {
+    var _ref9 = _slicedToArray(_ref8, 3),
+        notificationProps = _ref9[0],
+        body = _ref9[1],
+        _ref9$ = _ref9[2],
+        notificationID = _ref9$.notificationID,
+        state = _ref9$.state;
 
     return _react.default.createElement(_Grid.default.Row, {
       key: notificationID,

package/lib/components/Notifications/NotificationsPanel/schema.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _reactDesc = require("react-desc");
 
-// @ts-ignore no module typings
+// @ts-ignore no module typings for react-desc
 var schema = (0, _reactDesc.describe)({
   displayName: 'NotificationsPanel'
 });

package/lib/components/Notifications/Notifier.test.js

@@ -4,7 +4,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _ConfigProvider = require("../../providers/ConfigProvider");
+var _providers = require("../../providers");
 
 var _NotificationsPanel = _interopRequireDefault(require("./NotificationsPanel"));
 
@@ -12,6 +12,10 @@ var _Notifier = _interopRequireDefault(require("./Notifier"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+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; }
+
 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); }); }; }
@@ -22,12 +26,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 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; }
 
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_providers.ConfigProvider, null, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_NotificationsPanel.default, null), children));
+};
+
 var render = function render(ui, options) {
   return (0, _react2.render)(ui, _objectSpread({}, options, {
-    wrapper: function wrapper(_ref) {
-      var children = _ref.children;
-      return _react.default.createElement(_ConfigProvider.ConfigProvider, null, _react.default.createElement(_react.default.Fragment, null, _react.default.createElement(_NotificationsPanel.default, null), children));
-    }
+    wrapper: wrapper
   }));
 };
 
@@ -70,7 +76,7 @@ describe('Notifier', function () {
 
               expect((0, _react2.queryAllByText)(baseElement, defaultProps.title)).toHaveLength(1);
 
-              _react2.fireEvent.click((0, _react2.queryByLabelText)(baseElement, /close/gi));
+              _react2.fireEvent.click((0, _react2.getByLabelText)(baseElement, /close/gi));
 
               _context.next = 7;
               return (0, _react2.wait)(function () {
@@ -96,18 +102,19 @@ describe('Notifier', function () {
   });
   describe('dispatching more than one notification', function () {
     it('renders a dismiss all button in the notifications panel', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
-      var buttonText, _render2, baseElement, getByText;
+      var buttonText, onClose, testProps, _render2, baseElement, getByText;
 
       return regeneratorRuntime.wrap(function _callee2$(_context2) {
         while (1) {
           switch (_context2.prev = _context2.next) {
             case 0:
               buttonText = 'notify';
+              onClose = defaultProps.onClose, testProps = _objectWithoutProperties(defaultProps, ["onClose"]);
               _render2 = render(_react.default.createElement(_Notifier.default, null, function (_ref5) {
                 var notify = _ref5.notify;
                 return _react.default.createElement("button", {
                   onClick: function onClick() {
-                    notify(defaultProps);
+                    notify(testProps);
                   },
                   type: "button"
                 }, buttonText);
@@ -125,7 +132,7 @@ describe('Notifier', function () {
 
               _react2.fireEvent.click((0, _react2.getByText)(baseElement, /dismiss all/gi));
 
-              _context2.next = 11;
+              _context2.next = 12;
               return (0, _react2.wait)(function () {
                 return expect((0, _react2.queryAllByText)(baseElement, defaultProps.title)).toHaveLength(0);
               },
@@ -139,12 +146,74 @@ describe('Notifier', function () {
                 timeout: 2750
               });
 
-            case 11:
+            case 12:
             case "end":
               return _context2.stop();
           }
         }
       }, _callee2);
     })));
+    it('fires onClose for each notification when clicking dismiss all', /*#__PURE__*/_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
+      var buttonText, onClose, _render3, baseElement, getByText, notifications;
+
+      return regeneratorRuntime.wrap(function _callee3$(_context3) {
+        while (1) {
+          switch (_context3.prev = _context3.next) {
+            case 0:
+              buttonText = 'notify';
+              onClose = jest.fn();
+              jest.useFakeTimers();
+              _render3 = render(_react.default.createElement(_Notifier.default, null, function (_ref7) {
+                var notify = _ref7.notify;
+                return _react.default.createElement("button", {
+                  onClick: function onClick() {
+                    notify(_objectSpread({}, defaultProps, {
+                      onClose: onClose
+                    }));
+                  },
+                  type: "button"
+                }, buttonText);
+              })), baseElement = _render3.baseElement, getByText = _render3.getByText;
+              (0, _react2.act)(function () {
+                _react2.fireEvent.click(getByText(buttonText));
+
+                _react2.fireEvent.click(getByText(buttonText));
+
+                _react2.fireEvent.click(getByText(buttonText));
+
+                jest.runAllTimers();
+              });
+              notifications = (0, _react2.queryAllByText)(baseElement, defaultProps.title);
+              expect(notifications).toHaveLength(3);
+              (0, _react2.act)(function () {
+                _react2.fireEvent.click((0, _react2.getByText)(baseElement, /dismiss all/gi));
+              });
+              _context3.next = 10;
+              return (0, _react2.wait)(function () {
+                (0, _react2.act)(function () {
+                  return jest.runAllTimers();
+                });
+                expect((0, _react2.queryAllByText)(baseElement, defaultProps.title)).toHaveLength(0);
+              },
+              /**
+               * this timeout is important in checking that the notifications were dismissed via
+               * `dismissAll` instead of just timing out. If just timing out, the notifications would
+               * dismiss after 5.2 seconds. Selecting a timeout shorter than that verifies `dismissAll`
+               * was fired.
+               */
+              {
+                timeout: 2750
+              });
+
+            case 10:
+              expect(onClose).toHaveBeenCalledTimes(3);
+
+            case 11:
+            case "end":
+              return _context3.stop();
+          }
+        }
+      }, _callee3);
+    })));
   });
 });

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

@@ -0,0 +1,2 @@
+export declare const NOTIFICATION_CARD_WIDTH: string;
+//# sourceMappingURL=constants.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/constants.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,uBAAuB,QAAyB,CAAC"}

package/lib/components/Notifications/constants.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.NOTIFICATION_CARD_WIDTH = void 0;
+
+var _rem = _interopRequireDefault(require("polished/lib/helpers/rem"));
+
+var _spacing = _interopRequireDefault(require("@decisiv/design-tokens/lib/spacing"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+// eslint-disable-next-line import/prefer-default-export
+var NOTIFICATION_CARD_WIDTH = (0, _rem.default)(_spacing.default.base * 34);
+exports.NOTIFICATION_CARD_WIDTH = NOTIFICATION_CARD_WIDTH;

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAA4C,CAAC;AAsDzD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/schema.ts"],"names":[],"mappings":"AAKA,QAAA,MAAM,MAAM,KAA4C,CAAC;AA0DzD,eAAe,MAAM,CAAC"}

package/lib/components/Notifications/schema.js

@@ -18,13 +18,14 @@ schema.propTypes = {
     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`.').isRequired,
+  duration: _reactDesc.PropTypes.number.description('An integer representing the amount of milliseconds to wait until dismissing the notification if no user interaction is captured. If omitted, notification will remain until manually closed.'),
   children: _reactDesc.PropTypes.func.description('The body of the notification containing additional UI elements').format('React Component'),
   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/ border color. Will override the default color associated with any specified `intent`.').format('string'),
   icon: _reactDesc.PropTypes.element.description('The `iconix` icon to display. Will override the default icon associated with any specified `intent`.').format('Iconix Icon'),
   id: _reactDesc.PropTypes.string.description('A unique identifier for the notification.'),
   intent: _reactDesc.PropTypes.oneOf(['information', 'success', 'warning', 'danger']).description('Shortcuts to the most common combinations of icon and color.'),
-  onClose: _reactDesc.PropTypes.func.description('The event handler called to close the notification. WILL NOT be called if notification times out or is closed because an action button is clicked.'),
+  onClose: _reactDesc.PropTypes.func.description('The event handler called when the notification is manually closed. Will also be called with a blank event if "DISMISS ALL" is clicked. WILL NOT be called if notification times out or is closed because an action button is clicked. In IE, will be called with an empty object.'),
   title: _reactDesc.PropTypes.string.description('The text for rendering in the H2 at the top of the notification').isRequired
 };
 var _default = schema;

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

@@ -1,6 +1,7 @@
 import { TNotificationsContext } from '../../providers/NotificationsProvider';
 export interface TUseNotifications {
     dismissAll: TNotificationsContext['dismissAll'];
+    isDismissingAll: TNotificationsContext['isDismissingAll'];
     notifications: TNotificationsContext['notifications'];
     notify: TNotificationsContext['notify'];
 }

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

@@ -1 +1 @@
-{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/useNotifications.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAChD,aAAa,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED,iBAAS,gBAAgB,IAAI,iBAAiB,CAI7C;AAED,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"useNotifications.d.ts","sourceRoot":"","sources":["../../../src/components/Notifications/useNotifications.ts"],"names":[],"mappings":"AAEA,OAAO,EAEL,qBAAqB,EACtB,MAAM,uCAAuC,CAAC;AAE/C,MAAM,WAAW,iBAAiB;IAChC,UAAU,EAAE,qBAAqB,CAAC,YAAY,CAAC,CAAC;IAChD,eAAe,EAAE,qBAAqB,CAAC,iBAAiB,CAAC,CAAC;IAC1D,aAAa,EAAE,qBAAqB,CAAC,eAAe,CAAC,CAAC;IACtD,MAAM,EAAE,qBAAqB,CAAC,QAAQ,CAAC,CAAC;CACzC;AAED,iBAAS,gBAAgB,IAAI,iBAAiB,CAI7C;AAED,eAAe,gBAAgB,CAAC"}

package/lib/components/Notifications/useNotifications.js

@@ -10,10 +10,10 @@ var _react = require("react");
 var _NotificationsProvider = require("../../providers/NotificationsProvider");
 
 function useNotifications() {
-  var ctx = (0, _react.useContext)(_NotificationsProvider.NotificationsContext);
+  var context = (0, _react.useContext)(_NotificationsProvider.NotificationsContext);
   return (0, _react.useMemo)(function () {
-    return ctx;
-  }, [ctx]);
+    return context;
+  }, [context]);
 }
 
 var _default = useNotifications;

package/lib/components/Notifications/useNotifications.test.js

@@ -19,11 +19,14 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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; }
 
 jest.useFakeTimers();
+
+var wrapper = function wrapper(_ref) {
+  var children = _ref.children;
+  return _react.default.createElement(_NotificationsProvider.default, null, _react.default.createElement(_react.default.Fragment, null, children));
+};
+
 var defaultRenderHookOptions = {
-  wrapper: function wrapper(_ref) {
-    var children = _ref.children;
-    return _react.default.createElement(_NotificationsProvider.default, null, _react.default.createElement(_react.default.Fragment, null, children));
-  }
+  wrapper: wrapper
 };
 var defaultNotificationOptions = {
   id: 'test-0',

package/lib/components/Pagination/Pagination.d.ts

@@ -12,7 +12,7 @@ interface DefaultPaginationProps {
 export interface PaginationProps extends DefaultPaginationProps {
     totalPages: number;
 }
-declare function Pagination(props: PaginationProps): JSX.Element;
+declare function Pagination(props: PaginationProps): JSX.Element | null;
 declare namespace Pagination {
     var propTypes: {
         variant: PropTypes.Requireable<string>;