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

package/lib/components/LeftNav/Item/NavCollapsedXItem/index.js

@@ -88,11 +88,12 @@ function MenuItem(props) {
 
   if (kind === 'MenuItemTopLink') {
     var _ref2 = item,
-        Icon = _ref2.icon;
+        Icon = _ref2.icon,
+        selected = _ref2.active;
 
     var _to = (0, _utils.isMenuItemInternalLink)(item) ? item.path : item.url;
 
-    var _active = !disabled && currentPath === _to;
+    var _active = !disabled && (currentPath === _to || selected);
 
     return _react.default.createElement(_ItemWrapper.default, {
       active: _active,
@@ -111,11 +112,12 @@ function MenuItem(props) {
   if (kind === 'MenuItemTopLinkWithSubItems') {
     var _ref3 = item,
         _Icon = _ref3.icon,
-        items = _ref3.items;
+        items = _ref3.items,
+        _selected = _ref3.active;
 
     var _to2 = (0, _utils.isMenuItemInternalLink)(item) ? item.path : item.url;
 
-    var _active2 = !disabled && currentPath === _to2;
+    var _active2 = !disabled && (currentPath === _to2 || _selected);
 
     return _react.default.createElement(MenuItemWithSubItems, {
       onBlur: function onBlur() {
@@ -261,7 +263,7 @@ function MenuItem(props) {
 
 
   var to = (0, _utils.isMenuItemInternalLink)(item) ? item.path : item.url;
-  var active = !disabled && currentPath === to;
+  var active = !disabled && (currentPath === to || item.active);
   return _react.default.createElement(_ItemWrapper.default, {
     active: active,
     disabled: disabled,

package/lib/components/LeftNav/Item/NavExpandedItem/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LeftNav/Item/NavExpandedItem/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAEL,aAAa,EAId,MAAM,aAAa,CAAC;AAarB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAkLlE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LeftNav/Item/NavExpandedItem/index.tsx"],"names":[],"mappings":";AAUA,OAAO,EAEL,aAAa,EAId,MAAM,aAAa,CAAC;AAcrB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAqMlE"}

package/lib/components/LeftNav/Item/NavExpandedItem/index.js

@@ -29,6 +29,8 @@ var _SubItemsWrapper = _interopRequireDefault(require("../SubItemsWrapper"));
 
 var _ItemWrapper = _interopRequireDefault(require("../ItemWrapper"));
 
+var _MenuItemWrapper = _interopRequireDefault(require("../MenuItemWrapper"));
+
 var _useMenuItem2 = _interopRequireDefault(require("../hooks/useMenuItem"));
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -71,11 +73,12 @@ function MenuItem(props) {
 
   if (kind === 'MenuItemTopLink') {
     var _ref2 = item,
-        Icon = _ref2.icon;
+        Icon = _ref2.icon,
+        selected = _ref2.active;
 
     var _to = (0, _utils.isMenuItemInternalLink)(item) ? item.path : item.url;
 
-    var _active = !disabled && currentPath === _to;
+    var _active = !disabled && (currentPath === _to || selected);
 
     return _react.default.createElement(_ItemWrapper.default, {
       active: _active,
@@ -94,29 +97,36 @@ function MenuItem(props) {
   if (kind === 'MenuItemTopLinkWithSubItems') {
     var _ref3 = item,
         _Icon = _ref3.icon,
-        items = _ref3.items;
+        items = _ref3.items,
+        _selected = _ref3.active;
 
     var _to2 = (0, _utils.isMenuItemInternalLink)(item) ? item.path : item.url;
 
-    var _active2 = !disabled && currentPath === _to2;
+    var _active2 = !disabled && (currentPath === _to2 || _selected);
 
     return _react.default.createElement("li", null, _react.default.createElement(_ItemWrapper.default, {
       as: "div",
       active: _active2,
       disabled: disabled,
-      navVariant: navVariant
-    }, _react.default.createElement(_Flex.default, null, _react.default.createElement(_ClickArea.default, {
+      navVariant: navVariant,
+      flexDirection: "column"
+    }, _react.default.createElement(_Flex.default, {
+      flexWrap: "wrap"
+    }, _react.default.createElement(_MenuItemWrapper.default, {
+      flex: "1 0"
+    }, _react.default.createElement(_ClickArea.default, {
       "aria-disabled": disabled,
       as: disabled ? 'div' : MenuItemLink,
       disabled: disabled,
       navVariant: navVariant,
       tabIndex: disabled ? undefined : 0,
       to: disabled ? undefined : _to2
-    }, _react.default.createElement(_IconWrapper.default, null, _react.default.createElement(_Icon, null)), _react.default.createElement(_TextWrapper.default, null, text)), _react.default.createElement(_ClickArea.default, {
+    }, _react.default.createElement(_IconWrapper.default, null, _react.default.createElement(_Icon, null)), _react.default.createElement(_TextWrapper.default, null, text))), _react.default.createElement(_MenuItemWrapper.default, {
+      flexDirection: "column"
+    }, _react.default.createElement(_ClickArea.default, {
       "aria-disabled": disabled,
       as: "button",
       disabled: disabled,
-      flex: 0,
       flexDirection: "column",
       navVariant: navVariant,
       onClick: toggleExpanded,
@@ -128,7 +138,7 @@ function MenuItem(props) {
       size: "small"
     }) : _react.default.createElement(_CaretDown.default, {
       size: "small"
-    }))))), expanded && _react.default.createElement(_SubItemsWrapper.default, {
+    })))))), expanded && _react.default.createElement(_SubItemsWrapper.default, {
       navVariant: navVariant
     }, items.map(function (subItem) {
       var key = subItem.text;
@@ -148,8 +158,9 @@ function MenuItem(props) {
     return _react.default.createElement("li", null, _react.default.createElement(_ItemWrapper.default, {
       as: "div",
       disabled: disabled,
-      navVariant: navVariant
-    }, _react.default.createElement(_ClickArea.default, {
+      navVariant: navVariant,
+      flexDirection: "column"
+    }, _react.default.createElement(_MenuItemWrapper.default, null, _react.default.createElement(_ClickArea.default, {
       "aria-disabled": disabled,
       as: "button",
       disabled: disabled,
@@ -162,7 +173,7 @@ function MenuItem(props) {
       size: "small"
     }) : _react.default.createElement(_CaretDown.default, {
       size: "small"
-    }))), _react.default.createElement(_SubItemsWrapper.default, {
+    })))), _react.default.createElement(_SubItemsWrapper.default, {
       expanded: expanded,
       navVariant: navVariant
     }, expanded && _items.map(function (subItem) {
@@ -178,7 +189,7 @@ function MenuItem(props) {
 
 
   var to = (0, _utils.isMenuItemInternalLink)(item) ? item.path : item.url;
-  var active = !disabled && currentPath === to;
+  var active = !disabled && (currentPath === to || item.active);
   return _react.default.createElement(_ItemWrapper.default, {
     active: active,
     disabled: disabled,

package/lib/components/LeftNav/Item/types.d.ts

@@ -6,9 +6,9 @@ import { MenuItemProps } from '../types';
 export interface MenuItemDisplayProps extends FlexComponentProps {
     active?: boolean;
     disabled?: boolean;
+    navVariant?: keyof typeof NAV_EXPANDED_STATES;
     to?: string;
     variant?: 'expander' | 'sub';
-    navVariant?: keyof typeof NAV_EXPANDED_STATES;
 }
 export declare type RendererProps = MenuItemProps & {
     children: ReactNode;

package/lib/components/LeftNav/Item/types.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;CAC/C;AAED,oBAAY,aAAa,GAAG,aAAa,GAAG;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/types.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AACvC,OAAO,EAAE,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAEpE,OAAO,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEhD,OAAO,EAAE,mBAAmB,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,MAAM,WAAW,oBAAqB,SAAQ,kBAAkB;IAC9D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,OAAO,CAAC,EAAE,UAAU,GAAG,KAAK,CAAC;CAC9B;AAED,oBAAY,aAAa,GAAG,aAAa,GAAG;IAC1C,QAAQ,EAAE,SAAS,CAAC;IACpB,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC5B,CAAC"}

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

@@ -65,12 +65,21 @@ var items = [{
   }, {
     text: 'sub item external link',
     url: 'https://www.google.com'
+  }, {
+    text: 'selected sub level item',
+    path: '/#sub/#im-active',
+    active: true
   }]
 }, {
   icon: _iconix.default.Angry,
   text: 'disabled top level internal link',
   path: '/#angry',
   disabled: true
+}, {
+  icon: _iconix.default.Check,
+  text: 'selected top level item',
+  path: '/#im-active',
+  active: true
 }];
 var defaultProps = {
   currentPath: '/',
@@ -120,14 +129,15 @@ describe('LeftNav', function () {
       test('clicking expander button toggles the sub menu', function () {
         var _render4 = render(_react2.default.createElement(_.default, defaultProps)),
             container = _render4.container,
-            queryByText = _render4.queryByText;
+            queryByText = _render4.queryByText,
+            getByRole = _render4.getByRole;
 
         var linkWithSubItems = items[3];
         var itemLink = queryByText(linkWithSubItems.text);
-        var expanderButton = itemLink.parentElement.nextSibling;
+        var expanderButtonContainer = itemLink.closest('a').parentElement.nextSibling;
         expect(queryByText(linkWithSubItems.items[0].text)).toBe(null);
 
-        _react.fireEvent.click(expanderButton);
+        _react.fireEvent.click((0, _react.within)(expanderButtonContainer).getByRole('button'));
 
         expect(queryByText(linkWithSubItems.items[0].text)).toBeTruthy();
         expect(container).toMatchSnapshot();

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

@@ -1 +1 @@
-{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/LeftNav/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAuC,CAAC;AA2DpD,eAAe,MAAM,CAAC"}
+{"version":3,"file":"schema.d.ts","sourceRoot":"","sources":["../../../src/components/LeftNav/schema.ts"],"names":[],"mappings":"AAGA,QAAA,MAAM,MAAM,KAAuC,CAAC;AA6DpD,eAAe,MAAM,CAAC"}

package/lib/components/LeftNav/schema.js

@@ -17,12 +17,14 @@ schema.propTypes = {
   navExpandedState: _reactDesc.PropTypes.oneOf(['COLLAPSED_XY', 'COLLAPSED_X', 'EXPANDED']).description('A value used to control the expanded state of the nav. If provided, will always override internal values'),
   onChangeNavExpandedState: _reactDesc.PropTypes.func.description('An event handler used to track when a user requests a change to the nav expanded state. Will not be called when the nav expanded state changes based on screen size.'),
   items: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
+    active: _reactDesc.PropTypes.bool.description('Sets the menu item as active.'),
     disabled: _reactDesc.PropTypes.bool.description('Disables the menu item.'),
     icon: _reactDesc.PropTypes.func.description('Which `iconix` icon to render.').isRequired,
     text: _reactDesc.PropTypes.string.description('The label for the menu item.').isRequired,
     path: _reactDesc.PropTypes.string.description('The path for an internal link. Can not be used with a `url` attribute.'),
     url: _reactDesc.PropTypes.string.description('The path for an external link. Can not be used with a `path` attribute.'),
     items: _reactDesc.PropTypes.arrayOf(_reactDesc.PropTypes.shape({
+      active: _reactDesc.PropTypes.bool.description('Sets the menu item as active.'),
       disabled: _reactDesc.PropTypes.bool.description('Disables the menu subitem.'),
       text: _reactDesc.PropTypes.string.description('The label for the menu subitem.').isRequired,
       path: _reactDesc.PropTypes.string.description('The path for an internal link. Can not be used with a `url` attribute.'),

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

@@ -3,6 +3,7 @@ import { IconProps } from '@decisiv/iconix';
 import { NAV_EXPANDED_STATES } from './hooks/useNav';
 declare type IconComponent = (props: IconProps) => JSX.Element;
 interface BaseMenuItem {
+    active?: boolean;
     disabled?: boolean;
     text: string;
 }

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/LeftNav/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,UAAU,YAAY;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAExE,oBAAY,eAAe,GAAG,aAAa,GAAG;IAC5C,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,uBAAuB,GAAG,YAAY,GAAG;IACnD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,oBAAY,2BAA2B,GAAG,oBAAoB,GAAG;IAC/D,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,oBAAY,SAAS,GACjB,eAAe,GACf,uBAAuB,GACvB,2BAA2B,CAAC;AAChC,oBAAY,UAAU,GAAG,SAAS,EAAE,CAAC;AAErC,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,OAAO,EAAE,KAAK,CAAC;CAChB;AAED,oBAAY,aAAa,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC3D,gBAAgB,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IACpD,wBAAwB,CAAC,EAAE,CACzB,gBAAgB,EAAE,MAAM,OAAO,mBAAmB,KAC/C,IAAI,CAAC;CACX"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/LeftNav/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,UAAU,YAAY;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,IAAI,EAAE,MAAM,CAAC;CACd;AAED,MAAM,WAAW,oBAAqB,SAAQ,YAAY;IACxD,GAAG,EAAE,MAAM,CAAC;CACb;AAED,oBAAY,aAAa,GAAG,oBAAoB,GAAG,oBAAoB,CAAC;AAExE,oBAAY,eAAe,GAAG,aAAa,GAAG;IAC5C,IAAI,EAAE,aAAa,CAAC;CACrB,CAAC;AAEF,oBAAY,uBAAuB,GAAG,YAAY,GAAG;IACnD,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,oBAAY,2BAA2B,GAAG,oBAAoB,GAAG;IAC/D,IAAI,EAAE,aAAa,CAAC;IACpB,KAAK,EAAE,aAAa,EAAE,CAAC;CACxB,CAAC;AAEF,oBAAY,SAAS,GACjB,eAAe,GACf,uBAAuB,GACvB,2BAA2B,CAAC;AAChC,oBAAY,UAAU,GAAG,SAAS,EAAE,CAAC;AAErC,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,OAAO,CAAC,EAAE,KAAK,CAAC;CACjB;AAED,UAAU,gBAAgB;IACxB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,EAAE,aAAa,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC9C,OAAO,EAAE,KAAK,CAAC;CAChB;AAED,oBAAY,aAAa,GAAG,gBAAgB,GAAG,gBAAgB,CAAC;AAEhE,MAAM,WAAW,YAAY;IAC3B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,uBAAuB,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IAC3D,gBAAgB,CAAC,EAAE,MAAM,OAAO,mBAAmB,CAAC;IACpD,wBAAwB,CAAC,EAAE,CACzB,gBAAgB,EAAE,MAAM,OAAO,mBAAmB,KAC/C,IAAI,CAAC;CACX"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,OAAO,EAAqB,KAAK,EAAE,MAAM,SAAS,CAAC;AAOnD,cAAc,SAAS,CAAC;AA+GxB,QAAA,MAAM,WAAW,gFAAmB,CAAC;AAsBrC,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/index.tsx"],"names":[],"mappings":"AAEA,OAAO,KAON,MAAM,OAAO,CAAC;AAMf,OAAO,EAAqB,KAAK,EAAE,MAAM,SAAS,CAAC;AAOnD,cAAc,SAAS,CAAC;AAgHxB,QAAA,MAAM,WAAW,gFAAmB,CAAC;AAsBrC,eAAe,WAAW,CAAC"}

package/lib/components/Menu/index.js

@@ -64,7 +64,8 @@ var Menu = function Menu(props, _ref) {
   var _props$items = props.items,
       items = _props$items === void 0 ? [] : _props$items,
       onSelectItem = props.onSelectItem,
-      allowTab = props.allowTab;
+      allowTab = props.allowTab,
+      actions = props.actions;
 
   var _useMemo = (0, _react.useMemo)(function () {
     return items.reduce(function (acc, value) {
@@ -118,6 +119,7 @@ var Menu = function Menu(props, _ref) {
     }
   }, [allowTab]);
   return _react.default.createElement(StyledMenu, {
+    actions: actions,
     items: optionsListItems,
     selectable: false,
     multiple: false,

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

@@ -1,5 +1,6 @@
 /// <reference types="react" />
 import { IconProps } from '@decisiv/iconix';
+import { FooterActions } from '../../atoms/OptionsList/types';
 export declare type MenuRef = HTMLUListElement;
 export declare type MenuItemRef = HTMLDivElement | HTMLAnchorElement;
 export declare type InputMethod = 'mouse' | 'keyboard' | undefined;
@@ -8,6 +9,7 @@ export interface Props {
     items: MenuItem[];
     onSelectItem?: (item: MenuItem) => void;
     allowTab?: boolean;
+    actions?: FooterActions;
 }
 export interface MenuItem {
     id: string;

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

@@ -1 +1 @@
-{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,oBAAY,OAAO,GAAG,gBAAgB,CAAC;AACvC,oBAAY,WAAW,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAC7D,oBAAY,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAE3D,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,oBAAY,aAAa,GAAG,QAAQ,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC"}
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/components/Menu/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C,OAAO,EAAE,aAAa,EAAE,MAAM,+BAA+B,CAAC;AAE9D,oBAAY,OAAO,GAAG,gBAAgB,CAAC;AACvC,oBAAY,WAAW,GAAG,cAAc,GAAG,iBAAiB,CAAC;AAC7D,oBAAY,WAAW,GAAG,OAAO,GAAG,UAAU,GAAG,SAAS,CAAC;AAE3D,oBAAY,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAE9D,MAAM,WAAW,KAAK;IACpB,KAAK,EAAE,QAAQ,EAAE,CAAC;IAClB,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,QAAQ,KAAK,IAAI,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,aAAa,CAAC;CACzB;AAED,MAAM,WAAW,QAAQ;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;CACvB;AAED,oBAAY,aAAa,GAAG,QAAQ,GAAG;IACrC,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,WAAW,EAAE,WAAW,CAAC;IACzB,CAAC,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;CACtB,CAAC;AAEF,oBAAY,iBAAiB,GAAG,aAAa,GAAG;IAC9C,EAAE,EAAE,MAAM,CAAC;CACZ,CAAC"}

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

@@ -46,7 +46,7 @@ export declare const Content: import("styled-components").StyledComponent<"div",
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";
@@ -241,7 +241,7 @@ export declare const Footer: import("styled-components").StyledComponent<"div",
         readonly LG: "LG";
         readonly XL: "XL";
     }> | undefined;
-    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "column" | "column-reverse" | "row" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
+    readonly flexDirection?: "-moz-initial" | "inherit" | "initial" | "revert" | "unset" | "row" | "column" | "column-reverse" | "row-reverse" | import("../../utils/dynamicModifiers").DynamicResponsiveModifiersProp<import("csstype").FlexDirectionProperty, {
         readonly XS: "XS";
         readonly SM: "SM";
         readonly MD: "MD";

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

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

package/lib/components/Modal/index.js

@@ -129,7 +129,7 @@ function Modal(_ref) {
   var handleOverlayClick = (0, _react.useCallback)(function (event) {
     event.preventDefault();
     event.stopPropagation();
-    onClose(event);
+    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.
 
@@ -157,7 +157,7 @@ function Modal(_ref) {
     paddingTop: (_ref2 = {}, _defineProperty(_ref2, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref2, _breakpointObserver.sizes.XS, 2), _ref2),
     paddingX: (_ref3 = {}, _defineProperty(_ref3, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref3, _breakpointObserver.sizes.XS, 2), _ref3),
     size: breakpoint
-  }, _react.default.createElement(_components.CloseButtonContainer, null, _react.default.createElement(_Tooltip.default, {
+  }, onClose && _react.default.createElement(_components.CloseButtonContainer, null, _react.default.createElement(_Tooltip.default, {
     placement: "top",
     target: // eslint-disable-next-line
     _react.default.createElement(_Button.default, {
@@ -175,7 +175,7 @@ function Modal(_ref) {
     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)), _react.default.createElement(_components.Footer, {
+  }, children)), actions && _react.default.createElement(_components.Footer, {
     hasIcon: !!IconComponent,
     id: modalFooterId,
     paddingX: (_ref6 = {}, _defineProperty(_ref6, _breakpointObserver.sizes.LG, 3), _defineProperty(_ref6, _breakpointObserver.sizes.XS, 2), _ref6),
@@ -202,7 +202,7 @@ function Manager(_ref7) {
 
   var onKeyDown = (0, _react.useCallback)(function (event) {
     if (event.key === 'Escape') {
-      onClose(event);
+      onClose && onClose(event);
     }
   }, [onClose]); // Allow closing the modal by pressing the Escape key
 
@@ -229,7 +229,7 @@ function Manager(_ref7) {
 
 
 Manager.propTypes = _objectSpread({}, _schema.default.propTypes, {
-  actions: _proptypeValidators.actionsValidator.isRequired,
+  actions: _proptypeValidators.actionsValidator,
   icon: _propTypes.default.elementType
 });
 Manager.displayName = 'Modal';

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

@@ -12,6 +12,10 @@ 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; }
@@ -80,6 +84,18 @@ describe('Modal', function () {
 
     expect(onClose).toHaveBeenCalled();
   });
+  it('renders a modal without a close button', function () {
+    var onClose = defaultProps.onClose,
+        rest = _objectWithoutProperties(defaultProps, ["onClose"]);
+
+    var _render2 = render(_react.default.createElement(_.default, rest)),
+        baseElement = _render2.baseElement;
+
+    var modalHeader = document.getElementById("modal-header-".concat(defaultProps.id));
+    var closeButton = (0, _react2.queryByLabelText)(modalHeader, /close/i);
+    expect(closeButton).toBeFalsy();
+    expect(baseElement).toMatchSnapshot();
+  });
   it('renders the children as the content of the modal', function () {
     var content = 'Test modal content.';
     render(_react.default.createElement(_.default, defaultProps, content));
@@ -147,6 +163,22 @@ describe('Modal', function () {
 
       expect(onClose).toHaveBeenCalled();
     });
+    it('doest NOT call the onClose when pressing escape and no onClose function is provided', function () {
+      var closeFn = defaultProps.onClose,
+          rest = _objectWithoutProperties(defaultProps, ["onClose"]);
+
+      var onClose = jest.fn();
+      render(_react.default.createElement(_.default, rest));
+
+      _react2.fireEvent.keyDown(document.body, {
+        key: 'Escape',
+        code: 27,
+        keyCode: 27,
+        charCode: 27
+      });
+
+      expect(onClose).not.toHaveBeenCalled();
+    });
   });
   describe('with invalid props', function () {
     beforeEach(function () {

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;AAyDlD,eAAe,MAAM,CAAC"}
+{"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"}

package/lib/components/Modal/schema.js

@@ -17,13 +17,13 @@ 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`.').isRequired,
+  })).description('An array of objects containing a subset of props valid for the Button. Specifically excluded are `kind`, `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.').isRequired,
+  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.'),
   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

@@ -5,14 +5,14 @@ import { ButtonProps } from '../Button/types';
 import { intents } from './constants';
 declare type ActionProps = Exclude<ButtonProps, 'kind' | 'size' | 'variant'>;
 export interface ModalProps {
-    actions: [ActionProps] | [ActionProps, ActionProps];
+    actions?: [ActionProps] | [ActionProps, ActionProps];
     children: React.ReactNode;
     closeHint?: string;
     color?: CommonUIColorKeys;
     icon?: (props: IconProps) => JSX.Element;
     id?: string;
     intent?: keyof typeof intents;
-    onClose: (event: React.MouseEvent<unknown> | KeyboardEvent) => void;
+    onClose?: (event: React.MouseEvent<unknown> | KeyboardEvent) => void;
     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,EAAE,CAAC,WAAW,CAAC,GAAG,CAAC,WAAW,EAAE,WAAW,CAAC,CAAC;IACpD,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,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,OAAO,CAAC,GAAG,aAAa,KAAK,IAAI,CAAC;IACpE,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,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"}

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;