@equinor/eds-core-react 0.14.3 → 0.15.0

package/dist/core-react.cjs.js

@@ -2256,7 +2256,7 @@ var shape$3 = {
     borderRadius: ''
   }
 };
-var spacings$7 = {
+var spacings$9 = {
   comfortable: {
     xxx_large: '48px',
     xx_large: '40px',
@@ -2711,7 +2711,7 @@ var tokens$6 = {
   elevation: elevation$1,
   interactions: interactions,
   shape: shape$3,
-  spacings: spacings$7,
+  spacings: spacings$9,
   typography: typography$j
 };
 
@@ -2730,7 +2730,7 @@ var buttonTypography = tokens$6.typography.navigation.button,
     _tokens$clickbounds$3 = tokens$6.clickbounds,
     clicboundHeight$1 = _tokens$clickbounds$3.default__base,
     compactClickboundHeight$1 = _tokens$clickbounds$3.compact__standard;
-var button = {
+var button$1 = {
   background: 'transparent',
   height: buttonHeight,
   typography: Object.assign(Object.assign({}, buttonTypography), {
@@ -3045,7 +3045,7 @@ var _tokens$colors$i = tokens$6.colors,
     dangerColor$3 = _tokens$colors$intera$j.danger__resting.rgba,
     dangerHoverColor$3 = _tokens$colors$intera$j.danger__hover.rgba,
     buttonBorderRadius$1 = tokens$6.shape.button.borderRadius;
-var primary$9 = mergeDeepRight(button, {
+var primary$9 = mergeDeepRight(button$1, {
   background: primaryColor$8,
   typography: {
     color: primaryWhite
@@ -3103,7 +3103,7 @@ var _tokens$colors$intera$i = tokens$6.colors.interactive,
     dangerHoverColor$2 = _tokens$colors$intera$i.danger__hover.rgba,
     dangerHoverAltColor$2 = _tokens$colors$intera$i.danger__highlight.rgba,
     buttonBorderRadius = tokens$6.shape.button.borderRadius;
-var primary$8 = mergeDeepRight(button, {
+var primary$8 = mergeDeepRight(button$1, {
   typography: {
     color: primaryColor$7
   },
@@ -3181,7 +3181,7 @@ var _tokens$colors$intera$h = tokens$6.colors.interactive,
     dangerColor$1 = _tokens$colors$intera$h.danger__resting.rgba,
     dangerHoverColor$1 = _tokens$colors$intera$h.danger__hover.rgba,
     dangerHoverAltColor$1 = _tokens$colors$intera$h.danger__highlight.rgba;
-var primary$7 = mergeDeepRight(button, {
+var primary$7 = mergeDeepRight(button$1, {
   typography: {
     color: primaryColor$6
   },
@@ -3240,7 +3240,7 @@ var _tokens$colors$intera$g = tokens$6.colors.interactive,
     clicboundHeight = _tokens$clickbounds$2.default__base,
     compactClickboundHeight = _tokens$clickbounds$2.compact__standard,
     shape$2 = tokens$6.shape;
-var primary$6 = mergeDeepRight(button, {
+var primary$6 = mergeDeepRight(button$1, {
   height: shape$2.icon_button.minHeight,
   width: shape$2.icon_button.minWidth,
   typography: {
@@ -7815,7 +7815,7 @@ var List$2 = /*#__PURE__*/React.forwardRef(function List(_a, ref) {
   }), void 0);
 }); // List.displayName = 'List'
 
-var ListItem$4 = /*#__PURE__*/React.forwardRef(function ListItem(_a, ref) {
+var ListItem$2 = /*#__PURE__*/React.forwardRef(function ListItem(_a, ref) {
   var children = _a.children,
       props = __rest(_a, ["children"]);
 
@@ -7827,7 +7827,7 @@ var ListItem$4 = /*#__PURE__*/React.forwardRef(function ListItem(_a, ref) {
 }); // ListItem.displayName = 'ListItem'
 
 var List$1 = List$2;
-List$1.Item = ListItem$4;
+List$1.Item = ListItem$2;
 List$1.Item.displayName = 'List.Item';
 
 var Accordion$1 = /*#__PURE__*/React.forwardRef(function Accordion(_a, ref) {
@@ -8672,13 +8672,13 @@ var primary$3 = primary$4;
 var StyledCard = styled__default['default'].div.withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
-})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";", ""], function (_ref) {
+})(["height:fit-content;width:100%;position:relative;background-color:", ";box-sizing:border-box;display:grid;grid-gap:16px;grid-auto-columns:auto;align-items:center;align-content:start;cursor:", ";", ";"], function (_ref) {
   var background = _ref.background;
   return background;
 }, function (_ref2) {
   var cursor = _ref2.cursor;
   return cursor;
-}, bordersTemplate(primary$3.border), spacingsTemplate(primary$3.spacings));
+}, bordersTemplate(primary$3.border));
 var Card$1 = /*#__PURE__*/React.forwardRef(function Card(_a, ref) {
   var children = _a.children,
       _a$variant = _a.variant,
@@ -8701,13 +8701,14 @@ var Card$1 = /*#__PURE__*/React.forwardRef(function Card(_a, ref) {
   }), void 0);
 });
 
+var spacings$8 = primary$4.spacings;
 var StyledCardActions = styled__default['default'].div.withConfig({
   displayName: "CardActions__StyledCardActions",
   componentId: "sc-1d5vskp-0"
-})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";"], function (_ref) {
+})(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;justify-content:", ";padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], function (_ref) {
   var justifyContent = _ref.justifyContent;
   return justifyContent;
-});
+}, spacings$8.right, spacings$8.left, spacings$8.top, spacings$8.bottom);
 var CardActions = /*#__PURE__*/React.forwardRef(function CardActions(_a, ref) {
   var children = _a.children,
       _a$alignRight = _a.alignRight,
@@ -8730,14 +8731,30 @@ var CardActions = /*#__PURE__*/React.forwardRef(function CardActions(_a, ref) {
   }), void 0);
 });
 
+var spacings$7 = primary$4.spacings;
+var StyledCardContent = styled__default['default'].div.withConfig({
+  displayName: "CardContent__StyledCardContent",
+  componentId: "sc-esm4ym-0"
+})(["display:grid;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}"], spacings$7.right, spacings$7.left, spacings$7.bottom);
+var CardContent = /*#__PURE__*/React.forwardRef(function CardContent(_a, ref) {
+  var children = _a.children,
+      props = __rest(_a, ["children"]);
+
+  return jsxRuntime.exports.jsx(StyledCardContent, Object.assign({
+    ref: ref
+  }, props, {
+    children: children
+  }), void 0);
+});
+
 var spacings$6 = primary$4.spacings,
     border$5 = primary$4.border;
 var StyledCardMedia = styled__default['default'].div.withConfig({
   displayName: "CardMedia__StyledCardMedia",
   componentId: "sc-kr8q9c-0"
-})(["display:flex;width:100%;&:last-child{margin-bottom:8px;}", ""], function (_ref) {
+})(["display:flex;width:auto;", ""], function (_ref) {
   var fullWidth = _ref.fullWidth;
-  return fullWidth ? styled.css(["> *{width:calc(100% + ", " + ", ");margin-left:-", ";margin-right:-", ";}&:first-child{margin-top:-", ";img{border-top-right-radius:", ";border-top-left-radius:", ";}}"], spacings$6.left, spacings$6.right, spacings$6.left, spacings$6.right, spacings$6.top, border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius) : styled.css(["> *{width:100%;}"]);
+  return fullWidth ? styled.css(["> *{width:100%;}&:first-child{img{border-top-right-radius:", ";border-top-left-radius:", ";}}&:last-child{img{border-bottom-right-radius:", ";border-bottom-left-radius:", ";}}"], border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius, border$5.type === 'border' && border$5.radius) : styled.css(["padding:0 ", " 0 ", ";&:first-child{padding:", " ", " 0 ", ";}&:last-child{padding:0 ", " ", " ", ";}> *{width:100%;}"], spacings$6.right, spacings$6.left, spacings$6.top, spacings$6.right, spacings$6.left, spacings$6.right, spacings$6.bottom, spacings$6.left);
 });
 var CardMedia = /*#__PURE__*/React.forwardRef(function CardMedia(_a, ref) {
   var children = _a.children,
@@ -8758,7 +8775,7 @@ var spacings$5 = primary$4.spacings;
 var StyledCardHeader = styled__default['default'].div.withConfig({
   displayName: "CardHeader__StyledCardHeader",
   componentId: "sc-15k8edh-0"
-})(["display:flex;justify-content:space-between;align-items:center;>:not(:first-child){margin-left:", ";}"], spacings$5.left);
+})(["display:flex;justify-content:space-between;align-items:center;padding:0 ", " 0 ", ";>:not(:first-child){margin-left:", ";}:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], spacings$5.right, spacings$5.left, spacings$5.left, spacings$5.top, spacings$5.bottom);
 var CardHeader = /*#__PURE__*/React.forwardRef(function CardHeader(_a, ref) {
   var children = _a.children,
       rest = __rest(_a, ["children"]);
@@ -8789,10 +8806,12 @@ var CardHeaderTitle = /*#__PURE__*/React.forwardRef(function CardHeaderTitle(_a,
 
 var Card = Card$1;
 Card.Actions = CardActions;
+Card.Content = CardContent;
 Card.Header = CardHeader;
 Card.Media = CardMedia;
 Card.HeaderTitle = CardHeaderTitle;
 Card.Actions.displayName = 'Card.Actions';
+Card.Content.displayName = 'Card.Content';
 Card.Header.displayName = 'Card.Header';
 Card.Media.displayName = 'Card.Media';
 Card.HeaderTitle.displayName = 'Card.HeaderTitle';
@@ -8843,7 +8862,7 @@ var TopBar$1 = /*#__PURE__*/React.forwardRef(function TopBar(_a, ref) {
 var StyledActions$1 = styled__default['default'].div.withConfig({
   displayName: "Actions__StyledActions",
   componentId: "sc-1251ang-0"
-})(["grid-area:right;text-align:right;"]);
+})(["grid-area:right;text-align:right;align-items:center;display:flex;"]);
 var Actions$1 = /*#__PURE__*/React.forwardRef(function Actions(_a, ref) {
   var children = _a.children,
       props = __rest(_a, ["children"]);
@@ -8859,7 +8878,7 @@ var StyledHeader = styled__default['default'].div.withConfig({
   displayName: "Header__StyledHeader",
   componentId: "sc-1fpllve-0"
 })(["grid-area:left;display:grid;grid-template-columns:auto auto;grid-gap:24px;align-items:center;"]);
-var Header$1 = /*#__PURE__*/React.forwardRef(function Header(_a, ref) {
+var Header$2 = /*#__PURE__*/React.forwardRef(function Header(_a, ref) {
   var children = _a.children,
       props = __rest(_a, ["children"]);
 
@@ -8887,7 +8906,7 @@ var CustomContent$1 = /*#__PURE__*/React.forwardRef(function CustomContent(_a, r
 
 var TopBar = TopBar$1;
 TopBar.Actions = Actions$1;
-TopBar.Header = Header$1;
+TopBar.Header = Header$2;
 TopBar.CustomContent = CustomContent$1;
 TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
@@ -9315,7 +9334,7 @@ var StyledSideSheet = styled__default['default'].div.withConfig({
   var width = _ref.width;
   return width;
 }, bordersTemplate(border$3), spacingsTemplate(spacings$3));
-var Header = styled__default['default'].div.withConfig({
+var Header$1 = styled__default['default'].div.withConfig({
   displayName: "SideSheet__Header",
   componentId: "sc-wkzlnn-1"
 })(["display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;padding-bottom:24px;padding-right:10px;"]);
@@ -9338,7 +9357,7 @@ var SideSheet = /*#__PURE__*/React.forwardRef(function SideSheet(_a, ref) {
   return open && jsxRuntime.exports.jsxs(StyledSideSheet, Object.assign({}, props, {
     id: "side-sheet"
   }, {
-    children: [jsxRuntime.exports.jsxs(Header, {
+    children: [jsxRuntime.exports.jsxs(Header$1, {
       children: [jsxRuntime.exports.jsx(Typography, Object.assign({
         variant: "h2"
       }, {
@@ -9723,6 +9742,13 @@ var search = {
         },
         height: '36px'
       }
+    },
+    button: {
+      height: '24px',
+      width: '24px',
+      spacings: {
+        right: small$2
+      }
     }
   }
 };
@@ -9736,6 +9762,7 @@ var height = search.height,
     _tokens$entities$4 = search.entities,
     icon$1 = _tokens$entities$4.icon,
     placeholder = _tokens$entities$4.placeholder,
+    button = _tokens$entities$4.button,
     states$2 = search.states;
 var Container$2 = styled__default['default'].span.withConfig({
   displayName: "Search__Container",
@@ -9754,12 +9781,12 @@ var Input$4 = styled__default['default'].input.withConfig({
   var disabled = _ref3.disabled;
   return disabled && styled.css(["cursor:not-allowed;"]);
 });
-var InsideButton = styled__default['default'].div.withConfig({
+var InsideButton = styled__default['default'](Button).withConfig({
   displayName: "Search__InsideButton",
   componentId: "sc-v8l23u-2"
-})(["", " display:flex;align-items:center;visibility:hidden;z-index:1;padding:4px;height:16px;width:16px;position:relative;&::after{z-index:-1;position:absolute;top:-", ";left:0;width:100%;height:", ";content:'';}&::before{position:absolute;top:0;left:0;width:auto;min-height:auto;content:'';}", ""], bordersTemplate(icon$1.border), icon$1.clickbound.offset.top, icon$1.clickbound.height, function (_ref4) {
+})(["visibility:hidden;position:absolute;right:", ";height:", ";width:", ";", ""], button.spacings.right, button.height, button.width, function (_ref4) {
   var isActive = _ref4.isActive;
-  return isActive && styled.css(["visibility:visible;@media (hover:hover) and (pointer:fine){&:hover{cursor:pointer;background:", ";}}"], icon$1.states.hover.background);
+  return isActive && styled.css(["visibility:visible;"]);
 });
 var Search = /*#__PURE__*/React.forwardRef(function Search(_a, ref) {
   var _onChange = _a.onChange,
@@ -9892,8 +9919,6 @@ var Search = /*#__PURE__*/React.forwardRef(function Search(_a, ref) {
   }), value, defaultValue);
   var clearButtonProps = {
     isActive: state.isActive,
-    size: size,
-    role: 'button',
     onClick: function onClick(e) {
       e.stopPropagation();
 
@@ -9908,11 +9933,13 @@ var Search = /*#__PURE__*/React.forwardRef(function Search(_a, ref) {
       "aria-hidden": true,
       size: size
     }, void 0), jsxRuntime.exports.jsx(Input$4, Object.assign({}, inputProps), void 0), jsxRuntime.exports.jsx(InsideButton, Object.assign({}, clearButtonProps, {
-      "aria-label": "Clear search"
+      "aria-label": 'clear search',
+      title: "clear",
+      variant: "ghost_icon"
     }, {
       children: jsxRuntime.exports.jsx(Icon$1, {
         data: close,
-        size: size
+        size: 16
       }, void 0)
     }), void 0)]
   }), void 0);
@@ -11397,7 +11424,7 @@ var OrderedList$1 = styled__default['default'].ol.withConfig({
   displayName: "Breadcrumbs__OrderedList",
   componentId: "sc-12awlbz-0"
 })(["list-style:none;display:flex;padding:0;margin:0;flex-wrap:wrap;"]);
-var ListItem$3 = styled__default['default'].li.withConfig({
+var ListItem$1 = styled__default['default'].li.withConfig({
   displayName: "Breadcrumbs__ListItem",
   componentId: "sc-12awlbz-1"
 })(["display:inline-block;"]);
@@ -11438,7 +11465,7 @@ var Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs(_a, ref)
     }
 
     return [allCrumbs[0], jsxRuntime.exports.jsxs(React.Fragment, {
-      children: [jsxRuntime.exports.jsx(ListItem$3, {
+      children: [jsxRuntime.exports.jsx(ListItem$1, {
         children: jsxRuntime.exports.jsx(Collapsed, Object.assign({
           link: true,
           role: "button",
@@ -11464,7 +11491,7 @@ var Breadcrumbs$1 = /*#__PURE__*/React.forwardRef(function Breadcrumbs(_a, ref)
   var allCrumbs = React.Children.toArray(children).map(function (child, index) {
     return (// eslint-disable-next-line react/no-array-index-key
       jsxRuntime.exports.jsxs(React.Fragment, {
-        children: [jsxRuntime.exports.jsx(ListItem$3, {
+        children: [jsxRuntime.exports.jsx(ListItem$1, {
           children: child
         }, void 0), index !== React.Children.toArray(children).length - 1 && jsxRuntime.exports.jsx("li", Object.assign({
           "aria-hidden": true
@@ -11557,9 +11584,14 @@ var MenuProvider = function MenuProvider(_ref) {
   };
 
   var setOnClose = function setOnClose(onClose) {
+    var onCloseHelper = function onCloseHelper() {
+      onClose();
+      setFocusedIndex(-1);
+    };
+
     setState(function (prevState) {
       return Object.assign(Object.assign({}, prevState), {
-        onClose: onClose
+        onClose: onCloseHelper
       });
     });
   };
@@ -11686,16 +11718,16 @@ var typography$2 = menu.typography,
     hover = _tokens$entities$item.hover,
     disabledToken = _tokens$entities$item.disabled,
     icon = _tokens$entities.icon;
-var ListItem$2 = styled__default['default'].li.attrs(function (_ref) {
+var Item = styled__default['default'].button.attrs(function (_ref) {
   var isFocused = _ref.isFocused;
   return {
     role: 'menuitem',
     tabIndex: isFocused ? -1 : 0
   };
 }).withConfig({
-  displayName: "MenuItem__ListItem",
+  displayName: "MenuItem__Item",
   componentId: "sc-1g9fpbe-0"
-})(["width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography$2), function (_ref2) {
+})(["border:0;background-color:transparent;width:auto;position:relative;z-index:2;", " ", " ", " ", ""], typographyTemplate(typography$2), function (_ref2) {
   var theme = _ref2.theme;
   return spacingsTemplate(theme.entities.item.spacings);
 }, function (_ref3) {
@@ -11703,7 +11735,7 @@ var ListItem$2 = styled__default['default'].li.attrs(function (_ref) {
   return active && styled.css(["background:", ";*{color:", ";}"], activeToken.background, activeToken.typography.color);
 }, function (_ref4) {
   var disabled = _ref4.disabled;
-  return disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{", "}"], hover.background, outlineTemplate(focus.outline));
+  return disabled ? styled.css(["*{color:", ";}svg{fill:", ";}&:focus{outline:none;}@media (hover:hover) and (pointer:fine){&:hover{cursor:not-allowed;}}"], disabledToken.typography.color, icon.states.disabled.typography.color) : styled.css(["@media (hover:hover) and (pointer:fine){&:hover{z-index:1;cursor:pointer;background:", ";}}&:focus{z-index:3;", "}"], hover.background, outlineTemplate(focus.outline));
 });
 var Content = styled__default['default'].div.withConfig({
   displayName: "MenuItem__Content",
@@ -11733,7 +11765,7 @@ var MenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function M
     disabled: disabled,
     isFocused: isFocused
   });
-  return jsxRuntime.exports.jsx(ListItem$2, Object.assign({}, props, {
+  return jsxRuntime.exports.jsx(Item, Object.assign({}, props, {
     ref: useCombinedRefs(ref, function (el) {
       if (el !== null && isFocused) {
         el.focus();
@@ -11743,7 +11775,7 @@ var MenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function M
       return toggleFocus(index);
     },
     onClick: function onClick(e) {
-      if (!disabled && _onClick) {
+      if (_onClick) {
         _onClick(e);
 
         if (onClose !== null) {
@@ -11759,12 +11791,12 @@ var MenuItem = /*#__PURE__*/React.memo( /*#__PURE__*/React.forwardRef(function M
 }));
 MenuItem.displayName = 'MenuItem';
 
-var ListItem$1 = styled__default['default'].li.attrs(function () {
+var Header = styled__default['default'].div.attrs(function () {
   return {
     tabIndex: 0
   };
 }).withConfig({
-  displayName: "MenuSection__ListItem",
+  displayName: "MenuSection__Header",
   componentId: "sc-gfcbvg-0"
 })(["", " &:focus{outline:none;}"], spacingsTemplate(menu.entities.title.spacings));
 var MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(props) {
@@ -11772,11 +11804,11 @@ var MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(props)
       title = props.title,
       index = props.index;
   return jsxRuntime.exports.jsxs(jsxRuntime.exports.Fragment, {
-    children: [index !== 0 && jsxRuntime.exports.jsx("li", {
+    children: [index !== 0 && jsxRuntime.exports.jsx("div", {
       children: jsxRuntime.exports.jsx(Divider, {
         variant: "small"
       }, void 0)
-    }, void 0), title && jsxRuntime.exports.jsx(ListItem$1, {
+    }, void 0), title && jsxRuntime.exports.jsx(Header, {
       children: jsxRuntime.exports.jsx(Typography, Object.assign({
         group: "navigation",
         variant: "label"
@@ -11787,10 +11819,10 @@ var MenuSection = /*#__PURE__*/React__namespace.memo(function MenuSection(props)
   }, void 0);
 });
 
-var List = styled__default['default'].ul.withConfig({
+var List = styled__default['default'].div.withConfig({
   displayName: "MenuList__List",
   componentId: "sc-104rzof-0"
-})(["position:relative;list-style:none;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
+})(["position:relative;list-style:none;display:flex;flex-direction:column;margin:0;", " li:first-child{z-index:3;}"], spacingsTemplate(menu.spacings));
 
 function isIndexable(item) {
   if ( /*#__PURE__*/React.isValidElement(item) && !item.props.disabled && item.type === MenuItem) return true;
@@ -11911,6 +11943,12 @@ var MenuContainer = /*#__PURE__*/React.forwardRef(function MenuContainer(_a, ref
   useGlobalKeyPress('Escape', function () {
     if (open && onClose !== null) {
       onClose();
+      anchorEl.focus();
+    }
+  });
+  useGlobalKeyPress('Enter', function () {
+    if (open && onClose !== null) {
+      if (window.document.contains(anchorEl)) anchorEl.focus();
     }
   });
   return jsxRuntime.exports.jsx(MenuList, Object.assign({}, rest, {