@equinor/eds-core-react 0.20.2-dev.20220616 → 0.20.4

package/dist/eds-core-react.cjs.js

@@ -2720,6 +2720,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
     inputIcon,
     helperIcon,
     rowsMax,
+    style,
     ...other
   } = _ref;
   const helperTextId = edsUtils.useId(null, 'helpertext');
@@ -2746,7 +2747,7 @@ const TextField = /*#__PURE__*/react.forwardRef(function TextField(_ref, ref) {
   const containerProps = {
     ref,
     className,
-    style: other.style
+    style
   };
   const labelProps = {
     htmlFor: id,
@@ -2860,7 +2861,7 @@ const findIcon = (name, data, size) => {
 
 const Icon$2 = /*#__PURE__*/react.forwardRef(function Icon(_ref4, ref) {
   let {
-    size = 24,
+    size,
     color = 'currentColor',
     name,
     rotation,
@@ -3518,6 +3519,12 @@ const {
     focused: {
       width: focusOutlineWidth$5
     }
+  },
+  typography: {
+    navigation: {
+      menu_tabs,
+      menu_title
+    }
   }
 } = edsTokens.tokens;
 const token$1 = {
@@ -3536,6 +3543,8 @@ const token$1 = {
             color: focusOutlineColor$5
           }
         }
+      },
+      typography: { ...menu_title
       }
     },
     tab: {
@@ -3553,7 +3562,8 @@ const token$1 = {
       },
       typography: {
         color: defaultColor,
-        textAlign: 'center'
+        textAlign: 'center',
+        ...menu_tabs
       },
       border: {
         type: 'bordergroup',
@@ -3830,7 +3840,7 @@ const StyledTab = styled__default["default"].button.attrs(_ref => {
       tab
     }
   } = theme;
-  return styled.css(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, edsUtils.spacingsTemplate(tab.spacings), active ? tab.states.active.typography.color : tab.typography.color, tab.background, edsUtils.outlineTemplate(tab.states.focus.outline), edsUtils.outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? edsUtils.bordersTemplate(tab.states.disabled.border) : edsUtils.bordersTemplate(tab.border), active && edsUtils.bordersTemplate(tab.states.active.border));
+  return styled.css(["appearance:none;box-sizing:border-box;border:none;outline:none;height:", ";", " ", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, edsUtils.spacingsTemplate(tab.spacings), edsUtils.typographyTemplate(tab.typography), active ? tab.states.active.typography.color : tab.typography.color, tab.background, edsUtils.outlineTemplate(tab.states.focus.outline), edsUtils.outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? edsUtils.bordersTemplate(tab.states.disabled.border) : edsUtils.bordersTemplate(tab.border), active && edsUtils.bordersTemplate(tab.states.active.border));
 });
 const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledTab, {
@@ -3875,7 +3885,7 @@ const StyledTabPanel = styled__default["default"].div.attrs(() => ({
       panel
     }
   } = theme;
-  return styled.css(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.spacingsTemplate(panel.spacings), edsUtils.outlineTemplate(panel.states.focus.outline), edsUtils.outlineTemplate(panel.states.focus.outline));
+  return styled.css(["", " ", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), edsUtils.outlineTemplate(panel.states.focus.outline), edsUtils.outlineTemplate(panel.states.focus.outline));
 });
 const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(_ref2, ref) {
   let { ...props
@@ -3898,10 +3908,46 @@ Tabs.Panel.displayName = 'Tabs.Panel';
 Tabs.List.displayName = 'Tabs.List';
 
 const {
+  elevation,
   colors: {
     ui: {
       background__default: {
         rgba: background$c
+      }
+    }
+  }
+} = edsTokens.tokens;
+const paper = {
+  background: background$c
+};
+
+const StyledPaper = styled__default["default"].div.withConfig({
+  displayName: "Paper__StyledPaper",
+  componentId: "sc-6ncnv9-0"
+})(["background:", ";box-shadow:", ";"], paper.background, _ref => {
+  let {
+    elevation
+  } = _ref;
+  return elevation;
+});
+const Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
+  let {
+    elevation: elevation$1,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    elevation: elevation[elevation$1] || 'none'
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
+    ref: ref
+  });
+});
+
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background$b
       },
       background__info: {
         rgba: backgroundInfo
@@ -3926,7 +3972,7 @@ const {
   }
 } = edsTokens.tokens;
 const primary$4 = {
-  background: background$c,
+  background: background$b,
   border: {
     type: 'border',
     radius: borderRadius$8
@@ -3959,7 +4005,7 @@ var tokens$4 = /*#__PURE__*/Object.freeze({
 const {
   primary: primary$3
 } = tokens$4;
-const StyledCard = styled__default["default"].div.withConfig({
+const StyledCard = styled__default["default"](Paper).withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
 })(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;cursor:", ";", ";"], _ref => {
@@ -3977,6 +4023,7 @@ const Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref3, ref) {
   let {
     children,
     variant = 'default',
+    elevation = 'none',
     onClick,
     ...rest
   } = _ref3;
@@ -3989,7 +4036,9 @@ const Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref3, ref) {
     cursor,
     ...rest
   };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledCard, { ...props,
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCard, {
+    elevation: elevation,
+    ...props,
     onClick: onClick,
     children: children
   });
@@ -4156,7 +4205,7 @@ const topbar = {
   }
 };
 
-const StyledTopBar = styled__default["default"].header.withConfig({
+const StyledTopBar = styled__default["default"](Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
 })(_ref => {
@@ -4168,6 +4217,7 @@ const StyledTopBar = styled__default["default"].header.withConfig({
 const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   let {
     children,
+    elevation = 'none',
     ...props
   } = _ref2;
   const {
@@ -4176,10 +4226,15 @@ const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   const token = edsUtils.useToken({
     density
   }, topbar);
+  const rest = { ...props,
+    ref
+  };
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, { ...props,
-      ref: ref,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, {
+      forwardedAs: 'header',
+      elevation: elevation,
+      ...rest,
       children: children
     })
   });
@@ -4241,44 +4296,6 @@ TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
 TopBar.CustomContent.displayName = 'Topbar.CustomContent';
 
-const {
-  elevation,
-  colors: {
-    ui: {
-      background__default: {
-        rgba: background$b
-      }
-    }
-  }
-} = edsTokens.tokens;
-const paper = {
-  maxWidth: 'calc(100% - 32px)',
-  minWidth: '96px',
-  background: background$b
-};
-
-const StyledPaper = styled__default["default"].div.withConfig({
-  displayName: "Paper__StyledPaper",
-  componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
-  let {
-    elevation
-  } = _ref;
-  return elevation;
-});
-const Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
-  let {
-    elevation: elevation$1,
-    ...rest
-  } = _ref2;
-  const props = { ...rest,
-    elevation: elevation[elevation$1] || 'none'
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
-    ref: ref
-  });
-});
-
 const {
   colors: {
     ui: {
@@ -6827,13 +6844,9 @@ const BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref)
   });
 });
 
-const StyledBanner = styled__default["default"].div.withConfig({
-  displayName: "Banner__StyledBanner",
-  componentId: "sc-1ju451i-0"
-})([""]);
 const Content$1 = styled__default["default"].div.withConfig({
   displayName: "Banner__Content",
-  componentId: "sc-1ju451i-1"
+  componentId: "sc-1ju451i-0"
 })(_ref => {
   let {
     theme,
@@ -6843,12 +6856,13 @@ const Content$1 = styled__default["default"].div.withConfig({
 });
 const NonMarginDivider = styled__default["default"](Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
-  componentId: "sc-1ju451i-2"
+  componentId: "sc-1ju451i-1"
 })(["margin:0;height:2px;"]);
 const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
   let {
     children,
     className,
+    elevation = 'none',
     ...rest
   } = _ref2;
   const childrenWhereBannerIcon = react.Children.map(children, child => {
@@ -6867,8 +6881,9 @@ const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
   }, enabled);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(StyledBanner, { ...props,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Paper, { ...props,
       className: className,
+      elevation: elevation,
       role: "alert",
       children: [/*#__PURE__*/jsxRuntime.jsx(Content$1, {
         hasIcon: hasIcon,
@@ -10238,9 +10253,11 @@ function AutocompleteInner(props, ref) {
       let {
         selectedItem
       } = _ref8;
-
       // Show all options when single select is reopened with a selected item
-      if (availableItems.length === 1 && selectedItem === availableItems[0]) {
+      const availableHash = JSON.stringify(availableItems[0]);
+      const selectedsHash = JSON.stringify(selectedItem);
+
+      if (availableItems.length === 1 && selectedsHash === availableHash) {
         setAvailableItems(options);
       }
     },
@@ -10301,20 +10318,25 @@ function AutocompleteInner(props, ref) {
     }
   };
 
-  if (isControlled && !multiple) {
+  if (!multiple) {
     comboBoxProps = { ...comboBoxProps,
-      selectedItem: selectedOptions[0] || null,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
           const {
             selectedItem
           } = changes;
           onOptionsChange({
-            selectedItems: [selectedItem]
+            selectedItems: selectedItem ? [selectedItem] : []
           });
         }
       }
     };
+
+    if (isControlled) {
+      comboBoxProps = { ...comboBoxProps,
+        selectedItem: selectedOptions[0] || null
+      };
+    }
   }
 
   if (multiple) {

package/dist/esm/components/Autocomplete/Autocomplete.js

@@ -246,9 +246,11 @@ function AutocompleteInner(props, ref) {
       let {
         selectedItem
       } = _ref8;
-
       // Show all options when single select is reopened with a selected item
-      if (availableItems.length === 1 && selectedItem === availableItems[0]) {
+      const availableHash = JSON.stringify(availableItems[0]);
+      const selectedsHash = JSON.stringify(selectedItem);
+
+      if (availableItems.length === 1 && selectedsHash === availableHash) {
         setAvailableItems(options);
       }
     },
@@ -309,20 +311,25 @@ function AutocompleteInner(props, ref) {
     }
   };
 
-  if (isControlled && !multiple) {
+  if (!multiple) {
     comboBoxProps = { ...comboBoxProps,
-      selectedItem: selectedOptions[0] || null,
       onSelectedItemChange: changes => {
         if (onOptionsChange) {
           const {
             selectedItem
           } = changes;
           onOptionsChange({
-            selectedItems: [selectedItem]
+            selectedItems: selectedItem ? [selectedItem] : []
           });
         }
       }
     };
+
+    if (isControlled) {
+      comboBoxProps = { ...comboBoxProps,
+        selectedItem: selectedOptions[0] || null
+      };
+    }
   }
 
   if (multiple) {

package/dist/esm/components/Banner/Banner.js

@@ -1,19 +1,16 @@
 import { forwardRef, Children, isValidElement } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { spacingsTemplate, useToken } from '@equinor/eds-utils';
+import { Paper } from '../Paper/Paper.js';
 import { enabled } from './Banner.tokens.js';
 import { Divider } from '../Divider/Divider.js';
 import { BannerIcon } from './BannerIcon.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx, jsxs } from 'react/jsx-runtime';
 
-const StyledBanner = styled.div.withConfig({
-  displayName: "Banner__StyledBanner",
-  componentId: "sc-1ju451i-0"
-})([""]);
 const Content = styled.div.withConfig({
   displayName: "Banner__Content",
-  componentId: "sc-1ju451i-1"
+  componentId: "sc-1ju451i-0"
 })(_ref => {
   let {
     theme,
@@ -23,12 +20,13 @@ const Content = styled.div.withConfig({
 });
 const NonMarginDivider = styled(Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
-  componentId: "sc-1ju451i-2"
+  componentId: "sc-1ju451i-1"
 })(["margin:0;height:2px;"]);
 const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
   let {
     children,
     className,
+    elevation = 'none',
     ...rest
   } = _ref2;
   const childrenWhereBannerIcon = Children.map(children, child => {
@@ -47,8 +45,9 @@ const Banner = /*#__PURE__*/forwardRef(function Banner(_ref2, ref) {
   }, enabled);
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxs(StyledBanner, { ...props,
+    children: /*#__PURE__*/jsxs(Paper, { ...props,
       className: className,
+      elevation: elevation,
       role: "alert",
       children: [/*#__PURE__*/jsx(Content, {
         hasIcon: hasIcon,

package/dist/esm/components/Card/Card.js

@@ -1,5 +1,6 @@
 import { forwardRef } from 'react';
 import styled from 'styled-components';
+import { Paper } from '../Paper/Paper.js';
 import * as Card_tokens from './Card.tokens.js';
 import { bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
@@ -7,7 +8,7 @@ import { jsx } from 'react/jsx-runtime';
 const {
   primary
 } = Card_tokens;
-const StyledCard = styled.div.withConfig({
+const StyledCard = styled(Paper).withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
 })(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;cursor:", ";", ";"], _ref => {
@@ -25,6 +26,7 @@ const Card = /*#__PURE__*/forwardRef(function Card(_ref3, ref) {
   let {
     children,
     variant = 'default',
+    elevation = 'none',
     onClick,
     ...rest
   } = _ref3;
@@ -37,7 +39,9 @@ const Card = /*#__PURE__*/forwardRef(function Card(_ref3, ref) {
     cursor,
     ...rest
   };
-  return /*#__PURE__*/jsx(StyledCard, { ...props,
+  return /*#__PURE__*/jsx(StyledCard, {
+    elevation: elevation,
+    ...props,
     onClick: onClick,
     children: children
   });

package/dist/esm/components/Icon/Icon.js

@@ -70,7 +70,7 @@ const findIcon = (name, data, size) => {
 
 const Icon = /*#__PURE__*/forwardRef(function Icon(_ref4, ref) {
   let {
-    size = 24,
+    size,
     color = 'currentColor',
     name,
     rotation,

package/dist/esm/components/Paper/Paper.js

@@ -6,7 +6,7 @@ import { jsx } from 'react/jsx-runtime';
 const StyledPaper = styled.div.withConfig({
   displayName: "Paper__StyledPaper",
   componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
+})(["background:", ";box-shadow:", ";"], paper.background, _ref => {
   let {
     elevation
   } = _ref;

package/dist/esm/components/Paper/Paper.tokens.js

@@ -11,8 +11,6 @@ const {
   }
 } = tokens;
 const paper = {
-  maxWidth: 'calc(100% - 32px)',
-  minWidth: '96px',
   background
 };
 

package/dist/esm/components/Tabs/Tab.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { spacingsTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
+import { spacingsTemplate, typographyTemplate, outlineTemplate, bordersTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledTab = styled.button.attrs(_ref => {
@@ -29,7 +29,7 @@ const StyledTab = styled.button.attrs(_ref => {
       tab
     }
   } = theme;
-  return css(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), active && bordersTemplate(tab.states.active.border));
+  return css(["appearance:none;box-sizing:border-box;border:none;outline:none;height:", ";", " ", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, spacingsTemplate(tab.spacings), typographyTemplate(tab.typography), active ? tab.states.active.typography.color : tab.typography.color, tab.background, outlineTemplate(tab.states.focus.outline), outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? bordersTemplate(tab.states.disabled.border) : bordersTemplate(tab.border), active && bordersTemplate(tab.states.active.border));
 });
 const Tab = /*#__PURE__*/forwardRef(function Tab(props, ref) {
   return /*#__PURE__*/jsx(StyledTab, {

package/dist/esm/components/Tabs/TabPanel.js

@@ -1,6 +1,6 @@
 import { forwardRef } from 'react';
 import styled, { css } from 'styled-components';
-import { spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { spacingsTemplate, typographyTemplate, outlineTemplate } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
 const StyledTabPanel = styled.div.attrs(() => ({
@@ -18,7 +18,7 @@ const StyledTabPanel = styled.div.attrs(() => ({
       panel
     }
   } = theme;
-  return css(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
+  return css(["", " ", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], spacingsTemplate(panel.spacings), typographyTemplate(panel.typography), outlineTemplate(panel.states.focus.outline), outlineTemplate(panel.states.focus.outline));
 });
 const TabPanel = /*#__PURE__*/forwardRef(function TabPanel(_ref2, ref) {
   let { ...props

package/dist/esm/components/Tabs/Tabs.tokens.js

@@ -39,6 +39,12 @@ const {
     focused: {
       width: focusOutlineWidth
     }
+  },
+  typography: {
+    navigation: {
+      menu_tabs,
+      menu_title
+    }
   }
 } = tokens;
 const token = {
@@ -57,6 +63,8 @@ const token = {
             color: focusOutlineColor
           }
         }
+      },
+      typography: { ...menu_title
       }
     },
     tab: {
@@ -74,7 +82,8 @@ const token = {
       },
       typography: {
         color: defaultColor,
-        textAlign: 'center'
+        textAlign: 'center',
+        ...menu_tabs
       },
       border: {
         type: 'bordergroup',

package/dist/esm/components/TextField/TextField.js

@@ -29,6 +29,7 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
     inputIcon,
     helperIcon,
     rowsMax,
+    style,
     ...other
   } = _ref;
   const helperTextId = useId(null, 'helpertext');
@@ -55,7 +56,7 @@ const TextField = /*#__PURE__*/forwardRef(function TextField(_ref, ref) {
   const containerProps = {
     ref,
     className,
-    style: other.style
+    style
   };
   const labelProps = {
     htmlFor: id,

package/dist/esm/components/TopBar/TopBar.js

@@ -1,11 +1,12 @@
 import { forwardRef } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
 import { bordersTemplate, spacingsTemplate, typographyTemplate, useToken } from '@equinor/eds-utils';
+import { Paper } from '../Paper/Paper.js';
 import { topbar } from './TopBar.tokens.js';
 import { useEds } from '../EdsProvider/eds.context.js';
 import { jsx } from 'react/jsx-runtime';
 
-const StyledTopBar = styled.header.withConfig({
+const StyledTopBar = styled(Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
 })(_ref => {
@@ -17,6 +18,7 @@ const StyledTopBar = styled.header.withConfig({
 const TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
   let {
     children,
+    elevation = 'none',
     ...props
   } = _ref2;
   const {
@@ -25,10 +27,15 @@ const TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
   const token = useToken({
     density
   }, topbar);
+  const rest = { ...props,
+    ref
+  };
   return /*#__PURE__*/jsx(ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsx(StyledTopBar, { ...props,
-      ref: ref,
+    children: /*#__PURE__*/jsx(StyledTopBar, {
+      forwardedAs: 'header',
+      elevation: elevation,
+      ...rest,
       children: children
     })
   });

package/dist/types/components/Banner/Banner.d.ts

@@ -1,7 +1,12 @@
 import { HTMLAttributes, ReactNode } from 'react';
+import type { Elevations } from '@equinor/eds-tokens';
+declare type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>;
 export declare type BannerProps = {
+    elevation?: AvailableElevations;
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Banner: import("react").ForwardRefExoticComponent<{
+    elevation?: AvailableElevations;
     children: ReactNode;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/Card/Card.d.ts

@@ -1,9 +1,16 @@
 import { HTMLAttributes } from 'react';
+import type { Elevations } from '@equinor/eds-tokens';
+declare type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised' | 'overlay'>;
 export declare type CardProps = {
     /** Variant */
     variant?: 'default' | 'info' | 'warning' | 'danger';
+    /** Elevation */
+    elevation?: AvailableElevations;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const Card: import("react").ForwardRefExoticComponent<{
     /** Variant */
     variant?: 'default' | 'info' | 'warning' | 'danger';
+    /** Elevation */
+    elevation?: AvailableElevations;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/dist/types/components/TopBar/TopBar.d.ts

@@ -1,3 +1,10 @@
 import { HTMLAttributes } from 'react';
-export declare type TopbarProps = HTMLAttributes<HTMLElement>;
-export declare const TopBar: import("react").ForwardRefExoticComponent<TopbarProps & import("react").RefAttributes<HTMLElement>>;
+import type { Elevations } from '@equinor/eds-tokens';
+declare type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised'>;
+export declare type TopbarProps = {
+    elevation?: AvailableElevations;
+} & HTMLAttributes<HTMLDivElement>;
+export declare const TopBar: import("react").ForwardRefExoticComponent<{
+    elevation?: AvailableElevations;
+} & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.20.2-dev.20220616",
+  "version": "0.20.4",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -88,11 +88,10 @@
     "@babel/runtime": "^7.17.9",
     "@equinor/eds-icons": "0.11.0",
     "@equinor/eds-tokens": "0.7.1",
-    "@equinor/eds-utils": "0.2.2",
+    "@equinor/eds-utils": "0.2.3",
     "@popperjs/core": "2.9.2",
     "downshift": "^6.1.7",
-    "react-fast-compare": "3.2.0",
-    "react-popper": "2.2.5"
+    "react-fast-compare": "3.2.0"
   },
   "engines": {
     "pnpm": ">=4",
@@ -100,13 +99,13 @@
   },
   "browserslist": "defaults, not IE 11",
   "scripts": {
-    "build": "rollup -c && tsc -p tsconfig.json",
+    "build": "rollup -c && tsc -p tsconfig.build.json",
     "test": "tsc -p tsconfig.test.json && jest",
     "test:watch": "tsc-watch -p tsconfig.test.json --onFirstSuccess  \"jest --watch\"",
     "test:update-snapshots": "jest --updateSnapshot",
     "storybook": "start-storybook -p 9000 --ci",
     "build:storybook": "build-storybook -o storybook-build",
-    "types": "tsc"
+    "types": "tsc -p tsconfig.build.json"
   },
   "module": "dist/esm/index.js"
 }