@decisiv/ui-components 2.0.1-alpha.15 → 2.0.1-alpha.152

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

@@ -1 +1 @@
-{"version":3,"file":"ClickArea.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/ClickArea.ts"],"names":[],"mappings":"AAqBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,SAAS,sFAiId,CAAC;AAEF,eAAe,SAAS,CAAC"}
+{"version":3,"file":"ClickArea.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/ClickArea.ts"],"names":[],"mappings":"AAqBA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,SAAS,sFAkId,CAAC;AAEF,eAAe,SAAS,CAAC"}

package/lib/components/LeftNav/Item/ClickArea.js

@@ -43,10 +43,10 @@ var ClickArea = _styledComponents.default.div.withConfig({
 })(["", ";", ";background-color:transparent;border:2px solid transparent;color:", ";flex:1;font-size:", ";font-weight:", ";max-width:100%;text-align:left;padding:", " 0;&:active,&:focus{outline:none;}&:active,&:hover{color:", ";}&:hover{background-color:", ";}&:focus{border:2px solid ", ";}", ";", ";", ";", ";"], (0, _modifiers.withFlex)(), (0, _modifiers.withSpacing)(), (0, _toColorString.default)(_constants.FG_COLOR), (0, _rem.default)(_typography.default.size.scale[1]), _typography.default.weight.scale[1], (0, _rem.default)(_spacing.default.base), (0, _toColorString.default)(_constants.FG_COLOR), (0, _toColorString.default)(_constants.HOVER_BG_COLOR), (0, _toColorString.default)(_constants.FOCUS_BORDER_COLOR), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["background-color:inherit;color:", ";cursor:not-allowed;&:hover{background-color:inherit;color:", ";}"], (0, _toColorString.default)(_constants.DISABLED_FG_COLOR), (0, _toColorString.default)(_constants.DISABLED_FG_COLOR))), (0, _styledComponentsModifiers.applyStyleModifiers)((_applyStyleModifiers = {}, _defineProperty(_applyStyleModifiers, _useNav.NAV_EXPANDED_STATES.COLLAPSED_XY, function () {
   return (0, _styledComponents.css)(["display:none;visibility:hidden;"]);
 }), _defineProperty(_applyStyleModifiers, _useNav.NAV_EXPANDED_STATES.COLLAPSED_X, function () {
-  return (0, _styledComponents.css)(["", ";display:block;text-align:center;", "{display:block;font-size:8px;max-width:100%;overflow:hidden;padding:0 ", ";text-overflow:ellipsis;white-space:nowrap;text-align:center;}", ";", ";"], (0, _styleModifiers.when)('variant', 'expander', (0, _styledComponents.css)(["display:none;visibility:hidden;"])), _TextWrapper.default, (0, _rem.default)(_spacing.default.base * 0.5), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["", "{padding-left:56px;}"], _TextWrapper.default)), (0, _styleModifiers.when)('variant', 'sub', (0, _styledComponents.css)(["", "{font-size:", ";", ";}"], _TextWrapper.default, (0, _rem.default)(_typography.default.size.scale[0]), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["padding-left:6px;white-space:normal;text-overflow:unset;overflow:unset;"])))));
+  return (0, _styledComponents.css)(["", ";display:block;text-align:center;", "{display:block;font-size:8px;max-width:100%;overflow:hidden;padding:0 ", ";text-overflow:ellipsis;white-space:nowrap;text-align:center;}", ";", ";"], (0, _styleModifiers.when)('variant', 'expander', (0, _styledComponents.css)(["display:none;visibility:hidden;"])), _TextWrapper.default, (0, _rem.default)(_spacing.default.base * 0.5), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["", "{padding-left:56px;}"], _TextWrapper.default)), (0, _styleModifiers.when)('variant', 'sub', (0, _styledComponents.css)(["", "{font-size:", ";", ";}"], _TextWrapper.default, (0, _rem.default)(_typography.default.size.scale[1]), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["padding-left:6px;white-space:normal;text-overflow:unset;overflow:unset;"])))));
 }), _defineProperty(_applyStyleModifiers, _useNav.NAV_EXPANDED_STATES.EXPANDED, function () {
   return (0, _styledComponents.css)(["", "{padding-left:22px;padding-right:22px;}"], _IconWrapper.default);
-}), _applyStyleModifiers), 'navVariant'), (0, _styleModifiers.when)('variant', 'expander', (0, _styledComponents.css)(["flex:0;"])), (0, _styleModifiers.when)('variant', 'sub', (0, _styledComponents.css)(["padding:", " 0;"], (0, _rem.default)(_spacing.default.base * 0.5))));
+}), _applyStyleModifiers), 'navVariant'), (0, _styleModifiers.when)('variant', 'expander', (0, _styledComponents.css)(["flex:1 0;"])), (0, _styleModifiers.when)('variant', 'sub', (0, _styledComponents.css)(["padding:", " 0;font-size:", ";"], (0, _rem.default)(_spacing.default.base * 0.5), (0, _rem.default)(_typography.default.size.alias.paragraph2))));
 
 var _default = ClickArea;
 exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"ItemWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/ItemWrapper.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,WAAW,qFA4ChB,CAAC;AAEF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ItemWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/ItemWrapper.ts"],"names":[],"mappings":"AAQA,OAAO,EAAE,oBAAoB,EAAE,MAAM,SAAS,CAAC;AAE/C,QAAA,MAAM,WAAW,qFAoChB,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/lib/components/LeftNav/Item/ItemWrapper.js

@@ -9,9 +9,9 @@ var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorS
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _styleModifiers = require("../../../utils/styleModifiers");
+var _dynamicModifiers = require("../../../utils/dynamicModifiers");
 
-var _useNav = require("../hooks/useNav");
+var _styleModifiers = require("../../../utils/styleModifiers");
 
 var _constants = require("../constants");
 
@@ -22,7 +22,7 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 var ItemWrapper = _styledComponents.default.li.withConfig({
   displayName: "ItemWrapper",
   componentId: "fky2d1-0"
-})(["display:flex;flex-direction:column;margin:0;position:relative;white-space:normal;&:focus{outline:none;}", ";", ";"], (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["background-color:", ";border-left:4px solid ", ";a{position:relative;& >:first-child{margin-left:-4px;}}", ";"], (0, _toColorString.default)(_constants.ACTIVE_BG_COLOR), (0, _toColorString.default)(_constants.ACTIVE_BORDER_COLOR), (0, _styleModifiers.when)('navVariant', [_useNav.NAV_EXPANDED_STATES.COLLAPSED_X], (0, _styledComponents.css)(["a > *{margin-left:-4px;}"])))), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["&:hover{background-color:", ";}"], (0, _toColorString.default)(_constants.BG_COLOR))));
+})(["display:flex;margin:0;position:relative;white-space:normal;", " &:focus{outline:none;}", ";", ";"], (0, _dynamicModifiers.applyDynamicModifiers)('flexDirection', 'flex-direction'), (0, _styleModifiers.when)('active', (0, _styledComponents.css)(["background-color:", ";&::before{border-left:4px solid ", ";position:absolute;top:0;left:0;height:100%;content:'';pointer-events:none;}"], (0, _toColorString.default)(_constants.ACTIVE_BG_COLOR), (0, _toColorString.default)(_constants.ACTIVE_BORDER_COLOR))), (0, _styleModifiers.when)('disabled', (0, _styledComponents.css)(["&:hover{background-color:", ";}"], (0, _toColorString.default)(_constants.BG_COLOR))));
 
 var _default = ItemWrapper;
 exports.default = _default;

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

@@ -0,0 +1,7 @@
+interface MenuItemWrapperProps {
+    flex?: string;
+    flexDirection?: string;
+}
+declare const MenuItemWrapper: import("styled-components").StyledComponent<"div", any, MenuItemWrapperProps, never>;
+export default MenuItemWrapper;
+//# sourceMappingURL=MenuItemWrapper.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"MenuItemWrapper.d.ts","sourceRoot":"","sources":["../../../../src/components/LeftNav/Item/MenuItemWrapper.ts"],"names":[],"mappings":"AAIA,UAAU,oBAAoB;IAC5B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAED,QAAA,MAAM,eAAe,sFAKpB,CAAC;AAEF,eAAe,eAAe,CAAC"}

package/lib/components/LeftNav/Item/MenuItemWrapper.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _dynamicModifiers = require("../../../utils/dynamicModifiers");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var MenuItemWrapper = _styledComponents.default.div.withConfig({
+  displayName: "MenuItemWrapper",
+  componentId: "sc-1c8sxsx-0"
+})(["display:flex;", " ", ";"], (0, _dynamicModifiers.applyDynamicModifiers)('flex'), (0, _dynamicModifiers.applyDynamicModifiers)('flexDirection', 'flex-direction'));
+
+var _default = MenuItemWrapper;
+exports.default = _default;

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LeftNav/Item/NavCollapsedXItem/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAEL,aAAa,EAId,MAAM,aAAa,CAAC;AAiBrB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAqQlE"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/LeftNav/Item/NavCollapsedXItem/index.tsx"],"names":[],"mappings":";AAWA,OAAO,EAEL,aAAa,EAId,MAAM,aAAa,CAAC;AAiBrB,MAAM,CAAC,OAAO,UAAU,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,GAAG,CAAC,OAAO,CAyQlE"}

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/Item/types.js

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

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/LeftNav/types.js

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

package/lib/components/Link/DisabledLink.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { LinkRendererProps } from '../../providers/ConfigProvider';
+declare const _default: import("styled-components").StyledComponent<React.ForwardRefExoticComponent<Pick<LinkRendererProps, "children" | "to"> & React.RefAttributes<HTMLAnchorElement>>, any, {
+    size?: "small" | "medium" | undefined;
+}, never>;
+export default _default;
+//# sourceMappingURL=DisabledLink.d.ts.map

package/lib/components/Link/DisabledLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DisabledLink.d.ts","sourceRoot":"","sources":["../../../src/components/Link/DisabledLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA0B,MAAM,OAAO,CAAC;AAM/C,OAAO,EACL,iBAAiB,EAElB,MAAM,gCAAgC,CAAC;;;;AAwBxC,wBAEE"}

package/lib/components/Link/DisabledLink.js

@@ -0,0 +1,46 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _toColorString = _interopRequireDefault(require("polished/lib/color/toColorString"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _designTokens = require("@decisiv/design-tokens");
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _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 _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; }
+
+var DisabledLink = function DisabledLink(props, ref) {
+  var to = props.to,
+      children = props.children,
+      rest = _objectWithoutProperties(props, ["to", "children"]);
+
+  return _react.default.createElement("span", _extends({}, rest, {
+    ref: ref
+  }), children);
+};
+
+var DisabledLinkWithRef = (0, _react.forwardRef)(DisabledLink);
+var disabledLinkStyles = (0, _styledComponents.css)(["cursor:not-allowed;color:", ";", ";"], (0, _toColorString.default)(_designTokens.color.opacity.charcoal40), _styles.sharedLinkStyles);
+
+var _default = (0, _styledComponents.default)(DisabledLinkWithRef).withConfig({
+  displayName: "DisabledLink",
+  componentId: "sc-129tszc-0"
+})(["", ""], disabledLinkStyles);
+
+exports.default = _default;

package/lib/components/Link/Link.d.ts

@@ -0,0 +1,4 @@
+import { Ref } from 'react';
+import { LinkProps, LinkRef } from './types';
+export default function Link(props: LinkProps, ref: Ref<LinkRef>): JSX.Element;
+//# sourceMappingURL=Link.d.ts.map

package/lib/components/Link/Link.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/components/Link/Link.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,GAAG,EAAW,MAAM,OAAO,CAAC;AAO5C,OAAO,EAAiB,SAAS,EAAE,OAAO,EAAsB,MAAM,SAAS,CAAC;AAEhF,MAAM,CAAC,OAAO,UAAU,IAAI,CAAC,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,CAAC,OAAO,CAAC,GAAG,GAAG,CAAC,OAAO,CA4C7E"}

package/lib/components/Link/Link.js

@@ -0,0 +1,67 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = Link;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _ConfigProvider = require("../../providers/ConfigProvider");
+
+var _DisabledLink = _interopRequireDefault(require("./DisabledLink"));
+
+var _styles = require("./styles");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = Object.defineProperty && Object.getOwnPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : {}; if (desc.get || desc.set) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; return newObj; } }
+
+function _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 _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 Link(props, ref) {
+  var _useConfig = (0, _ConfigProvider.useConfig)(),
+      linkRenderer = _useConfig.linkRenderer;
+  /* istanbul ignore next: iconPosition and size default values */
+
+
+  var disabled = props.disabled,
+      text = props.text,
+      icon = props.icon,
+      _props$iconPosition = props.iconPosition,
+      iconPosition = _props$iconPosition === void 0 ? 'left' : _props$iconPosition,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'medium' : _props$size,
+      rest = _objectWithoutProperties(props, ["disabled", "text", "icon", "iconPosition", "size"]);
+
+  var StyledLink = (0, _react.useMemo)(function () {
+    return disabled ? _DisabledLink.default : (0, _styledComponents.default)(linkRenderer).withConfig({
+      displayName: "Link",
+      componentId: "j02y1q-0"
+    })(["", ";"], _styles.linkStyles);
+  }, [linkRenderer, disabled]);
+  var LinkIcon = (0, _react.useMemo)(function () {
+    if (!icon) {
+      return null;
+    }
+
+    var Icon = icon;
+    return _react.default.createElement(_styles.IconContainer, {
+      "aria-hidden": true,
+      position: iconPosition,
+      withText: !!text
+    }, _react.default.createElement(Icon, {
+      size: size
+    }));
+  }, [icon, iconPosition, size, text]);
+  return _react.default.createElement(StyledLink, _extends({}, rest, {
+    ref: ref,
+    size: size
+  }), !!icon && iconPosition === 'left' && LinkIcon, text, !!icon && iconPosition === 'right' && LinkIcon);
+}

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

@@ -1,27 +1,8 @@
-import { RgbaColor, RgbColor } from 'polished/lib/types/color';
-import { ComponentPropsWithRef, RefForwardingComponent } from 'react';
-import { FlattenSimpleInterpolation } from 'styled-components';
-import { IconProps } from '@decisiv/iconix';
-import { LinkRendererRef } from '../../providers/ConfigProvider';
+import { RefForwardingComponent } from 'react';
+import { LinkProps, LinkRef } from './types';
+export { linkColorStyles } from './styles';
 export { makeLinkSchemaPropTypes } from './schema';
-export declare type LinkRef = LinkRendererRef;
-export declare type LinkSize = 'medium' | 'small';
-export declare type IconPosition = 'left' | 'right';
-export declare type LinkVariant = 'normal' | 'inverted';
-declare type Color = RgbColor | RgbaColor;
-declare type IconComponent = (props: IconProps) => JSX.Element;
-export interface LinkProps extends ComponentPropsWithRef<'a'> {
-    icon?: IconComponent;
-    iconPosition?: IconPosition;
-    size?: LinkSize;
-    text?: string;
-    to: string;
-    variant?: LinkVariant;
-}
-export declare function linkColorStyles(normalColor: Color, visitedColor: Color, hoverColor: Color, focusColors?: {
-    border: Color;
-    shadow: Color;
-}): FlattenSimpleInterpolation;
+export { LinkProps };
 declare const LinkWithRef: RefForwardingComponent<LinkRef, LinkProps>;
 export default LinkWithRef;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,0BAA0B,CAAC;AAE/D,OAAc,EACZ,qBAAqB,EAGrB,sBAAsB,EAGvB,MAAM,OAAO,CAAC;AACf,OAAe,EACb,0BAA0B,EAI3B,MAAM,mBAAmB,CAAC;AAI3B,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAG5C,OAAO,EAEL,eAAe,EAGhB,MAAM,gCAAgC,CAAC;AAMxC,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AAEnD,oBAAY,OAAO,GAAG,eAAe,CAAC;AACtC,oBAAY,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAC1C,oBAAY,YAAY,GAAG,MAAM,GAAG,OAAO,CAAC;AAC5C,oBAAY,WAAW,GAAG,QAAQ,GAAG,UAAU,CAAC;AAEhD,aAAK,KAAK,GAAG,QAAQ,GAAG,SAAS,CAAC;AAClC,aAAK,aAAa,GAAG,CAAC,KAAK,EAAE,SAAS,KAAK,GAAG,CAAC,OAAO,CAAC;AAEvD,MAAM,WAAW,SAAU,SAAQ,qBAAqB,CAAC,GAAG,CAAC;IAC3D,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,CAAC,EAAE,WAAW,CAAC;CACvB;AAyBD,wBAAgB,eAAe,CAC7B,WAAW,EAAE,KAAK,EAClB,YAAY,EAAE,KAAK,EACnB,UAAU,EAAE,KAAK,EACjB,WAAW,CAAC,EAAE;IAAE,MAAM,EAAE,KAAK,CAAC;IAAC,MAAM,EAAE,KAAK,CAAA;CAAE,GAC7C,0BAA0B,CAsC5B;AA0ID,QAAA,MAAM,WAAW,EAAE,sBAAsB,CAAC,OAAO,EAAE,SAAS,CAE3D,CAAC;AAuBF,eAAe,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/Link/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAc,sBAAsB,EAAE,MAAM,OAAO,CAAC;AAM3D,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,MAAM,SAAS,CAAC;AAE7C,OAAO,EAAE,eAAe,EAAE,MAAM,UAAU,CAAC;AAC3C,OAAO,EAAE,uBAAuB,EAAE,MAAM,UAAU,CAAC;AACnD,OAAO,EAAE,SAAS,EAAE,CAAC;AAErB,QAAA,MAAM,WAAW,EAAE,sBAAsB,CAAC,OAAO,EAAE,SAAS,CAE3D,CAAC;AAwBF,eAAe,WAAW,CAAC"}