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

package/lib/components/Modal/schema.js

@@ -17,7 +17,7 @@ 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`.'),

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;

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,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;

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;AAsDD,iBAAS,kBAAkB,CAAC,EAC1B,SAAS,EACT,MAAM,GACP,EAAE,4BAA4B,GAAG,GAAG,CAAC,OAAO,CA4C5C;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,16 +56,29 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 var NotificationsContainer = _styledComponents.default.div.withConfig({
   displayName: "NotificationsPanel__NotificationsContainer",
   componentId: "sc-1u8dp2k-0"
-})(["max-height:100vh;margin-top:", ";overflow-y:auto;padding-bottom:", ";position:fixed;right:", ";top:0;z-index:", ";overflow-x:hidden;", ";"], 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);
-}, (0, _rem.default)(_spacing.default.base * 0.8), (0, _rem.default)(_spacing.default.base), function (_ref2) {
-  var _ref2$zIndex = _ref2.zIndex,
-      zIndex = _ref2$zIndex === void 0 ? 100 : _ref2$zIndex;
-  return zIndex;
 }, function (_ref3) {
-  var notifications = _ref3.notifications;
+  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.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";
 });
 
@@ -74,42 +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(_ref4) {
-  var marginTop = _ref4.marginTop,
-      zIndex = _ref4.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,
     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 (_ref5) {
-    var _ref6 = _slicedToArray(_ref5, 3),
-        notificationProps = _ref6[0],
-        body = _ref6[1],
-        _ref6$ = _ref6[2],
-        notificationID = _ref6$.notificationID,
-        state = _ref6$.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"}