@equinor/eds-core-react 0.21.0 → 0.22.0

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

@@ -8,8 +8,8 @@ var edsTokens = require('@equinor/eds-tokens');
 var edsUtils = require('@equinor/eds-utils');
 var jsxRuntime = require('react/jsx-runtime');
 var edsIcons = require('@equinor/eds-icons');
-var ReactDom = require('react-dom');
 var reactDomInteractions = require('@floating-ui/react-dom-interactions');
+var ReactDom = require('react-dom');
 var downshift = require('downshift');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
@@ -873,16 +873,17 @@ const InnerFullWidth = /*#__PURE__*/react.forwardRef(function InnerFullWidth(_re
 });
 
 const initalState$3 = {
+  /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
 const EdsContext = /*#__PURE__*/react.createContext(initalState$3);
 const EdsProvider = _ref => {
   let {
     children,
-    density = 'comfortable'
+    density
   } = _ref;
   const [state, setState] = react.useState({ ...initalState$3,
-    density
+    density: density || 'comfortable'
   });
 
   const setDensity = density => setState(prevState => ({ ...prevState,
@@ -895,7 +896,8 @@ const EdsProvider = _ref => {
     }
   }, [density, state.density]);
   const value = {
-    density: state.density
+    density: state.density,
+    setDensity
   };
   return /*#__PURE__*/jsxRuntime.jsx(EdsContext.Provider, {
     value: value,
@@ -1048,9 +1050,60 @@ const ButtonGroup = /*#__PURE__*/react.forwardRef(function ButtonGroup(_ref2, re
   });
 });
 
+const ToggleButton = /*#__PURE__*/react.forwardRef(function ToggleButton(_ref, ref) {
+  let {
+    children,
+    multiple,
+    selectedIndexes,
+    onChange,
+    ...props
+  } = _ref;
+  const [pickedIndexes, setPickedIndexes] = react.useState(selectedIndexes || []);
+  react.useEffect(() => {
+    if (Array.isArray(selectedIndexes)) {
+      setPickedIndexes(selectedIndexes);
+    }
+  }, [selectedIndexes]);
+  const updatedChildren = react.Children.map(children, (child, index) => {
+    const isSelected = pickedIndexes.includes(index);
+    const childElement = child;
+
+    if ( /*#__PURE__*/react.isValidElement(child) && child.type === Button$1) {
+      const buttonProps = {
+        'aria-pressed': isSelected ? true : undefined,
+        variant: isSelected ? 'contained' : 'outlined',
+        onClick: e => {
+          var _childElement$props, _childElement$props$o;
+
+          (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
+          let updatedSelection = [index];
+
+          if (multiple) {
+            updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(i => i !== index) : [...pickedIndexes, index];
+          }
+
+          setPickedIndexes(updatedSelection);
+
+          if (onChange) {
+            onChange(updatedSelection);
+          }
+        }
+      };
+      return /*#__PURE__*/react.cloneElement(child, buttonProps);
+    }
+  });
+  return /*#__PURE__*/jsxRuntime.jsx(ButtonGroup, {
+    ref: ref,
+    ...props,
+    children: updatedChildren
+  });
+});
+
 const Button = Button$1;
 Button.Group = ButtonGroup;
+Button.Toggle = ToggleButton;
 Button.Group.displayName = 'Button.Group';
+Button.Toggle.displayName = 'Button.Toggle';
 
 const {
   typography: typography$i,
@@ -1825,17 +1878,6 @@ const {
     }
   }
 } = edsTokens.tokens;
-const dividerHeight = 1;
-
-const reduceByValue = subtractValue => valueWithUnit => {
-  const valueAndUnit = valueWithUnit.split(/(\d+)/).filter(val => val.length > 0);
-  return "".concat(parseInt(valueAndUnit[0]) - subtractValue) + valueAndUnit[1];
-};
-
-const reduceValueByDividerHeight = reduceByValue(dividerHeight);
-const baseDivider$1 = {
-  height: "".concat(dividerHeight, "px")
-};
 const divider$1 = {
   lighter: {
     background: lighter
@@ -1847,47 +1889,54 @@ const divider$1 = {
     background: mediumColor
   }
 };
-const small$7 = { ...baseDivider$1,
+const small$7 = {
   spacings: {
     top: spacingSmall$5,
-    bottom: reduceValueByDividerHeight(spacingSmall$5)
+    bottom: spacingSmall$5
   }
 };
-const medium$3 = { ...baseDivider$1,
+const medium$3 = {
   spacings: {
     top: spacingMedium$9,
-    bottom: reduceValueByDividerHeight(spacingMedium$9)
+    bottom: spacingMedium$9
   }
 };
 
 var tokens$7 = /*#__PURE__*/Object.freeze({
   __proto__: null,
-  baseDivider: baseDivider$1,
   divider: divider$1,
   small: small$7,
   medium: medium$3
 });
 
 const {
-  divider,
-  baseDivider
+  divider
 } = tokens$7;
 const StyledDivider$3 = styled__default["default"].hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
-})(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref, ref) {
+})(_ref => {
+  let {
+    backgroundColor,
+    marginTop,
+    marginBottom,
+    dividerHeight
+  } = _ref;
+  return styled.css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], backgroundColor, marginTop, marginBottom, dividerHeight, dividerHeight);
+});
+const Divider = /*#__PURE__*/react.forwardRef(function Divider(_ref2, ref) {
   let {
     color = 'medium',
     variant = 'medium',
+    size = '1',
     ...rest
-  } = _ref;
+  } = _ref2;
   const colorValue = color === 'medium' ? 'mediumColor' : color;
   const props = {
     backgroundColor: divider[colorValue].background,
     marginTop: tokens$7[variant].spacings.top,
     marginBottom: tokens$7[variant].spacings.bottom,
-    dividerHeight: baseDivider.height,
+    dividerHeight: parseInt(size),
     ...rest
   };
   return /*#__PURE__*/jsxRuntime.jsx(StyledDivider$3, { ...props,
@@ -4323,14 +4372,16 @@ const StyledTopBar = styled__default["default"](Paper).withConfig({
   componentId: "sc-1yj236q-0"
 })(_ref => {
   let {
-    theme
+    theme,
+    sticky
   } = _ref;
-  return styled.css(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:1100;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], theme.height, theme.background, theme.spacings.left, edsUtils.bordersTemplate(theme.border), edsUtils.spacingsTemplate(theme.spacings), edsUtils.typographyTemplate(theme.typography));
+  return styled.css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, edsUtils.bordersTemplate(theme.border), edsUtils.spacingsTemplate(theme.spacings), edsUtils.typographyTemplate(theme.typography), sticky && styled.css(["position:sticky;top:0;z-index:1100;"]));
 });
 const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   let {
     children,
     elevation = 'none',
+    sticky = true,
     ...props
   } = _ref2;
   const {
@@ -4347,6 +4398,7 @@ const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
     children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, {
       forwardedAs: 'header',
       elevation: elevation,
+      sticky: sticky,
       ...rest,
       children: children
     })
@@ -4419,20 +4471,16 @@ const {
   }
 } = edsTokens.tokens;
 const scrim = {
-  width: '100%',
-  height: '100%',
   background: background$a
 };
 
 const {
-  height: height$1,
-  width,
   background: background$9
 } = scrim;
-const StyledScrim = styled__default["default"].div.withConfig({
+const StyledScrim = styled__default["default"](reactDomInteractions.FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["width:", ";height:", ";background:", ";position:fixed;z-index:1300;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height$1, background$9);
+})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background$9);
 const ScrimContent = styled__default["default"].div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
@@ -4447,11 +4495,6 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
   } = _ref;
   const scrimRef = react.useRef(null);
   const combinedScrimRef = react.useMemo(() => edsUtils.mergeRefs(scrimRef, ref), [scrimRef, ref]);
-  const props = { ...rest,
-    open,
-    isDismissable
-  };
-  edsUtils.useHideBodyScroll(open);
   edsUtils.useGlobalKeyPress('Escape', () => {
     if (isDismissable && onClose && open) {
       onClose();
@@ -4471,9 +4514,10 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledScrim, {
+    lockScroll: true,
     onClick: handleMouseClose,
     ref: combinedScrimRef,
-    ...props,
+    ...rest,
     children: /*#__PURE__*/jsxRuntime.jsx(ScrimContent, {
       children: children
     })
@@ -4568,39 +4612,46 @@ const Dialog$1 = /*#__PURE__*/react.forwardRef(function Dialog(_ref2, ref) {
     isDismissable = false,
     ...props
   } = _ref2;
-  const rest = { ...props,
-    open,
-    ref
-  };
   const {
     density
   } = useEds();
   const token = edsUtils.useToken({
     density
   }, dialog);
+  const {
+    floating,
+    context
+  } = reactDomInteractions.useFloating();
 
   const handleDismiss = () => {
     onClose && onClose();
   };
 
-  if (!open) {
-    return null;
-  }
-
-  return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
-    children: /*#__PURE__*/ReactDom.createPortal( /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
+  const dialogRef = react.useMemo(() => edsUtils.mergeRefs(floating, ref), [floating, ref]);
+  const rest = { ...props,
+    open
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingPortal, {
+    id: "eds-dialog-container",
+    children: /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
       theme: token,
-      children: /*#__PURE__*/jsxRuntime.jsx(Scrim, {
+      children: open && /*#__PURE__*/jsxRuntime.jsx(Scrim, {
         open: true,
         isDismissable: isDismissable,
         onClose: handleDismiss,
-        children: /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
-          elevation: "above_scrim",
-          ...rest,
-          children: children
+        children: /*#__PURE__*/jsxRuntime.jsx(reactDomInteractions.FloatingFocusManager, {
+          context: context,
+          modal: true,
+          returnFocus: true,
+          children: /*#__PURE__*/jsxRuntime.jsx(StyledDialog, {
+            elevation: "above_scrim",
+            ...rest,
+            ref: dialogRef,
+            children: children
+          })
         })
       })
-    }), document.body)
+    })
   });
 }); // Dialog.displayName = 'EdsDialog'
 
@@ -6395,8 +6446,8 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
           ref: tooltipRef,
           style: { ...style,
             position: strategy,
-            top: y !== null && y !== void 0 ? y : 0,
-            left: x !== null && x !== void 0 ? x : 0
+            top: y || 0,
+            left: x || 0
           }
         }),
         children: [title, /*#__PURE__*/jsxRuntime.jsx(ArrowWrapper$1, {
@@ -6643,9 +6694,9 @@ const PopoverPaper = styled__default["default"](Paper).withConfig({
     theme,
     open
   } = _ref;
-  return styled.css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:1400;overflow:auto;"], {
-    visibility: open ? null : 'hidden'
-  }, edsUtils.typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, edsUtils.bordersTemplate(theme.border));
+  return styled.css(["", " ", " background:", ";", " z-index:1400;"], {
+    display: open ? 'block' : 'none'
+  }, edsUtils.typographyTemplate(theme.typography), theme.background, edsUtils.bordersTemplate(theme.border));
 });
 const ArrowWrapper = styled__default["default"].div.withConfig({
   displayName: "Popover__ArrowWrapper",
@@ -6663,7 +6714,7 @@ const InnerWrapper = styled__default["default"].div.withConfig({
   let {
     theme
   } = _ref3;
-  return styled.css(["display:grid;grid-gap:", ";"], theme.spacings.bottom);
+  return styled.css(["display:grid;grid-gap:", ";max-height:", ";width:max-content;max-width:", ";overflow:auto;"], theme.spacings.bottom, theme.maxHeight, theme.maxWidth);
 });
 const PopoverArrow = styled__default["default"].svg.withConfig({
   displayName: "Popover__PopoverArrow",
@@ -6779,8 +6830,8 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
         ref: popoverRef,
         style: { ...style,
           position: strategy,
-          top: y !== null && y !== void 0 ? y : 0,
-          left: x !== null && x !== void 0 ? x : 0
+          top: y || 0,
+          left: x || 0
         }
       }),
       children: [/*#__PURE__*/jsxRuntime.jsx(ArrowWrapper, {
@@ -6828,7 +6879,7 @@ const ContentWrapper = styled__default["default"].div.withConfig({
   let {
     theme
   } = _ref;
-  return styled.css(["overflow:hidden;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+  return styled.css(["padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
 const PopoverContent = /*#__PURE__*/react.forwardRef(function PopoverContent(_ref2, ref) {
   let {
@@ -6880,7 +6931,7 @@ const StyledPopoverActions = styled__default["default"].div.withConfig({
   let {
     theme
   } = _ref;
-  return styled.css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+  return styled.css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
 const PopoverActions = /*#__PURE__*/react.forwardRef(function PopoverActions(_ref2, ref) {
   let {
@@ -8159,12 +8210,12 @@ const {
 const MenuPaper = styled__default["default"](Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ""], edsUtils.bordersTemplate(border), _ref => {
+})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], edsUtils.bordersTemplate(border), _ref => {
   let {
     open
   } = _ref;
   return styled.css({
-    visibility: open ? null : 'hidden'
+    display: open ? 'block' : 'none'
   });
 });
 const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2, ref) {
@@ -8304,8 +8355,8 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
             ref: popoverRef,
             style: { ...style,
               position: strategy,
-              top: y !== null && y !== void 0 ? y : 0,
-              left: x !== null && x !== void 0 ? x : 0
+              top: y || 0,
+              left: x || 0
             }
           }),
           children: /*#__PURE__*/jsxRuntime.jsx(MenuProvider, {
@@ -10714,8 +10765,9 @@ function AutocompleteInner(props, ref) {
       ref: floating,
       style: {
         position: strategy,
-        top: y !== null && y !== void 0 ? y : 0,
-        left: x !== null && x !== void 0 ? x : 0
+        top: y || 0,
+        left: x || 0,
+        zIndex: 1400
       }
     }),
     children: /*#__PURE__*/jsxRuntime.jsx(StyledList, { ...getMenuProps({

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

@@ -463,8 +463,9 @@ function AutocompleteInner(props, ref) {
       ref: floating,
       style: {
         position: strategy,
-        top: y !== null && y !== void 0 ? y : 0,
-        left: x !== null && x !== void 0 ? x : 0
+        top: y || 0,
+        left: x || 0,
+        zIndex: 1400
       }
     }),
     children: /*#__PURE__*/jsx(StyledList, { ...getMenuProps({

package/dist/esm/components/Button/ToggleButton/ToggleButton.js

@@ -0,0 +1,55 @@
+import { forwardRef, useState, useEffect, Children, isValidElement, cloneElement } from 'react';
+import { Button } from '../Button.js';
+import { ButtonGroup } from '../ButtonGroup/ButtonGroup.js';
+import { jsx } from 'react/jsx-runtime';
+
+const ToggleButton = /*#__PURE__*/forwardRef(function ToggleButton(_ref, ref) {
+  let {
+    children,
+    multiple,
+    selectedIndexes,
+    onChange,
+    ...props
+  } = _ref;
+  const [pickedIndexes, setPickedIndexes] = useState(selectedIndexes || []);
+  useEffect(() => {
+    if (Array.isArray(selectedIndexes)) {
+      setPickedIndexes(selectedIndexes);
+    }
+  }, [selectedIndexes]);
+  const updatedChildren = Children.map(children, (child, index) => {
+    const isSelected = pickedIndexes.includes(index);
+    const childElement = child;
+
+    if ( /*#__PURE__*/isValidElement(child) && child.type === Button) {
+      const buttonProps = {
+        'aria-pressed': isSelected ? true : undefined,
+        variant: isSelected ? 'contained' : 'outlined',
+        onClick: e => {
+          var _childElement$props, _childElement$props$o;
+
+          (_childElement$props = childElement.props) === null || _childElement$props === void 0 ? void 0 : (_childElement$props$o = _childElement$props.onClick) === null || _childElement$props$o === void 0 ? void 0 : _childElement$props$o.call(_childElement$props, e);
+          let updatedSelection = [index];
+
+          if (multiple) {
+            updatedSelection = pickedIndexes.includes(index) ? pickedIndexes.filter(i => i !== index) : [...pickedIndexes, index];
+          }
+
+          setPickedIndexes(updatedSelection);
+
+          if (onChange) {
+            onChange(updatedSelection);
+          }
+        }
+      };
+      return /*#__PURE__*/cloneElement(child, buttonProps);
+    }
+  });
+  return /*#__PURE__*/jsx(ButtonGroup, {
+    ref: ref,
+    ...props,
+    children: updatedChildren
+  });
+});
+
+export { ToggleButton };

package/dist/esm/components/Button/index.js

@@ -1,8 +1,11 @@
 import { Button as Button$1 } from './Button.js';
 import { ButtonGroup } from './ButtonGroup/ButtonGroup.js';
+import { ToggleButton } from './ToggleButton/ToggleButton.js';
 
 const Button = Button$1;
 Button.Group = ButtonGroup;
+Button.Toggle = ToggleButton;
 Button.Group.displayName = 'Button.Group';
+Button.Toggle.displayName = 'Button.Toggle';
 
 export { Button };

package/dist/esm/components/Dialog/Dialog.js

@@ -1,12 +1,12 @@
-import { forwardRef } from 'react';
-import { createPortal } from 'react-dom';
+import { forwardRef, useMemo } from 'react';
 import styled, { css, ThemeProvider } from 'styled-components';
-import { typographyTemplate, bordersTemplate, useToken } from '@equinor/eds-utils';
+import { typographyTemplate, bordersTemplate, useToken, mergeRefs } from '@equinor/eds-utils';
 import { Paper } from '../Paper/Paper.js';
 import { Scrim } from '../Scrim/Scrim.js';
 import { dialog } from './Dialog.tokens.js';
 import { useEds } from '../EdsProvider/eds.context.js';
-import { jsx, Fragment } from 'react/jsx-runtime';
+import { useFloating, FloatingPortal, FloatingFocusManager } from '@floating-ui/react-dom-interactions';
+import { jsx } from 'react/jsx-runtime';
 
 const StyledDialog = styled(Paper).attrs({
   tabIndex: 0,
@@ -31,39 +31,46 @@ const Dialog = /*#__PURE__*/forwardRef(function Dialog(_ref2, ref) {
     isDismissable = false,
     ...props
   } = _ref2;
-  const rest = { ...props,
-    open,
-    ref
-  };
   const {
     density
   } = useEds();
   const token = useToken({
     density
   }, dialog);
+  const {
+    floating,
+    context
+  } = useFloating();
 
   const handleDismiss = () => {
     onClose && onClose();
   };
 
-  if (!open) {
-    return null;
-  }
-
-  return /*#__PURE__*/jsx(Fragment, {
-    children: /*#__PURE__*/createPortal( /*#__PURE__*/jsx(ThemeProvider, {
+  const dialogRef = useMemo(() => mergeRefs(floating, ref), [floating, ref]);
+  const rest = { ...props,
+    open
+  };
+  return /*#__PURE__*/jsx(FloatingPortal, {
+    id: "eds-dialog-container",
+    children: /*#__PURE__*/jsx(ThemeProvider, {
       theme: token,
-      children: /*#__PURE__*/jsx(Scrim, {
+      children: open && /*#__PURE__*/jsx(Scrim, {
         open: true,
         isDismissable: isDismissable,
         onClose: handleDismiss,
-        children: /*#__PURE__*/jsx(StyledDialog, {
-          elevation: "above_scrim",
-          ...rest,
-          children: children
+        children: /*#__PURE__*/jsx(FloatingFocusManager, {
+          context: context,
+          modal: true,
+          returnFocus: true,
+          children: /*#__PURE__*/jsx(StyledDialog, {
+            elevation: "above_scrim",
+            ...rest,
+            ref: dialogRef,
+            children: children
+          })
         })
       })
-    }), document.body)
+    })
   });
 }); // Dialog.displayName = 'EdsDialog'
 

package/dist/esm/components/Divider/Divider.js

@@ -1,28 +1,36 @@
 import { forwardRef } from 'react';
-import styled from 'styled-components';
+import styled, { css } from 'styled-components';
 import * as Divider_tokens from './Divider.tokens.js';
 import { jsx } from 'react/jsx-runtime';
 
 const {
-  divider,
-  baseDivider
+  divider
 } = Divider_tokens;
 const StyledDivider = styled.hr.withConfig({
   displayName: "Divider__StyledDivider",
   componentId: "sc-1d8osde-0"
-})(["border:none;background-color:", ";margin-top:", ";margin-bottom:", ";height:", ";"], props => props.backgroundColor, props => props.marginTop, props => props.marginBottom, props => props.dividerHeight);
-const Divider = /*#__PURE__*/forwardRef(function Divider(_ref, ref) {
+})(_ref => {
+  let {
+    backgroundColor,
+    marginTop,
+    marginBottom,
+    dividerHeight
+  } = _ref;
+  return css(["border:none;background-color:", ";margin-top:", ";margin-bottom:calc(", " - ", "px);height:", "px;"], backgroundColor, marginTop, marginBottom, dividerHeight, dividerHeight);
+});
+const Divider = /*#__PURE__*/forwardRef(function Divider(_ref2, ref) {
   let {
     color = 'medium',
     variant = 'medium',
+    size = '1',
     ...rest
-  } = _ref;
+  } = _ref2;
   const colorValue = color === 'medium' ? 'mediumColor' : color;
   const props = {
     backgroundColor: divider[colorValue].background,
     marginTop: Divider_tokens[variant].spacings.top,
     marginBottom: Divider_tokens[variant].spacings.bottom,
-    dividerHeight: baseDivider.height,
+    dividerHeight: parseInt(size),
     ...rest
   };
   return /*#__PURE__*/jsx(StyledDivider, { ...props,

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

@@ -21,17 +21,6 @@ const {
     }
   }
 } = tokens$1;
-const dividerHeight = 1;
-
-const reduceByValue = subtractValue => valueWithUnit => {
-  const valueAndUnit = valueWithUnit.split(/(\d+)/).filter(val => val.length > 0);
-  return "".concat(parseInt(valueAndUnit[0]) - subtractValue) + valueAndUnit[1];
-};
-
-const reduceValueByDividerHeight = reduceByValue(dividerHeight);
-const baseDivider = {
-  height: "".concat(dividerHeight, "px")
-};
 const divider = {
   lighter: {
     background: lighter
@@ -43,17 +32,17 @@ const divider = {
     background: mediumColor
   }
 };
-const small = { ...baseDivider,
+const small = {
   spacings: {
     top: spacingSmall,
-    bottom: reduceValueByDividerHeight(spacingSmall)
+    bottom: spacingSmall
   }
 };
-const medium = { ...baseDivider,
+const medium = {
   spacings: {
     top: spacingMedium,
-    bottom: reduceValueByDividerHeight(spacingMedium)
+    bottom: spacingMedium
   }
 };
 
-export { baseDivider, divider, medium, small };
+export { divider, medium, small };

package/dist/esm/components/EdsProvider/eds.context.js

@@ -2,16 +2,17 @@ import { useState, useEffect, useContext, createContext } from 'react';
 import { jsx } from 'react/jsx-runtime';
 
 const initalState = {
+  /** Density for all components inside `EdsProvider` */
   density: 'comfortable'
 };
 const EdsContext = /*#__PURE__*/createContext(initalState);
 const EdsProvider = _ref => {
   let {
     children,
-    density = 'comfortable'
+    density
   } = _ref;
   const [state, setState] = useState({ ...initalState,
-    density
+    density: density || 'comfortable'
   });
 
   const setDensity = density => setState(prevState => ({ ...prevState,
@@ -24,7 +25,8 @@ const EdsProvider = _ref => {
     }
   }, [density, state.density]);
   const value = {
-    density: state.density
+    density: state.density,
+    setDensity
   };
   return /*#__PURE__*/jsx(EdsContext.Provider, {
     value: value,

package/dist/esm/components/Menu/Menu.js

@@ -15,12 +15,12 @@ const {
 const MenuPaper = styled(Paper).withConfig({
   displayName: "Menu__MenuPaper",
   componentId: "sc-1vlnqcj-0"
-})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ""], bordersTemplate(border), _ref => {
+})(["position:absolute;z-index:1400;width:fit-content;min-width:fit-content;", ";", ";"], bordersTemplate(border), _ref => {
   let {
     open
   } = _ref;
   return css({
-    visibility: open ? null : 'hidden'
+    display: open ? 'block' : 'none'
   });
 });
 const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref) {
@@ -160,8 +160,8 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
             ref: popoverRef,
             style: { ...style,
               position: strategy,
-              top: y !== null && y !== void 0 ? y : 0,
-              left: x !== null && x !== void 0 ? x : 0
+              top: y || 0,
+              left: x || 0
             }
           }),
           children: /*#__PURE__*/jsx(MenuProvider, {

package/dist/esm/components/Popover/Popover.js

@@ -15,9 +15,9 @@ const PopoverPaper = styled(Paper).withConfig({
     theme,
     open
   } = _ref;
-  return css(["", " ", " display:grid;grid-auto-columns:auto;align-items:center;align-content:start;background:", ";width:max-content;max-height:", ";max-width:", ";", " z-index:1400;overflow:auto;"], {
-    visibility: open ? null : 'hidden'
-  }, typographyTemplate(theme.typography), theme.background, theme.maxHeight, theme.maxWidth, bordersTemplate(theme.border));
+  return css(["", " ", " background:", ";", " z-index:1400;"], {
+    display: open ? 'block' : 'none'
+  }, typographyTemplate(theme.typography), theme.background, bordersTemplate(theme.border));
 });
 const ArrowWrapper = styled.div.withConfig({
   displayName: "Popover__ArrowWrapper",
@@ -35,7 +35,7 @@ const InnerWrapper = styled.div.withConfig({
   let {
     theme
   } = _ref3;
-  return css(["display:grid;grid-gap:", ";"], theme.spacings.bottom);
+  return css(["display:grid;grid-gap:", ";max-height:", ";width:max-content;max-width:", ";overflow:auto;"], theme.spacings.bottom, theme.maxHeight, theme.maxWidth);
 });
 const PopoverArrow = styled.svg.withConfig({
   displayName: "Popover__PopoverArrow",
@@ -151,8 +151,8 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
         ref: popoverRef,
         style: { ...style,
           position: strategy,
-          top: y !== null && y !== void 0 ? y : 0,
-          left: x !== null && x !== void 0 ? x : 0
+          top: y || 0,
+          left: x || 0
         }
       }),
       children: [/*#__PURE__*/jsx(ArrowWrapper, {

package/dist/esm/components/Popover/PopoverActions.js

@@ -9,7 +9,7 @@ const StyledPopoverActions = styled.div.withConfig({
   let {
     theme
   } = _ref;
-  return css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+  return css(["display:grid;grid-gap:8px;grid-auto-flow:column;align-items:center;padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
 const PopoverActions = /*#__PURE__*/forwardRef(function PopoverActions(_ref2, ref) {
   let {

package/dist/esm/components/Popover/PopoverContent.js

@@ -9,7 +9,7 @@ const ContentWrapper = styled.div.withConfig({
   let {
     theme
   } = _ref;
-  return css(["overflow:hidden;padding:0 ", " 0 ", ";:last-child{padding-bottom:", ";}:first-child{padding-top:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.bottom, theme.spacings.top);
+  return css(["padding:0 ", " 0 ", ";:first-child{padding-top:", ";}:last-child{padding-bottom:", ";}"], theme.spacings.right, theme.spacings.left, theme.spacings.top, theme.spacings.bottom);
 });
 const PopoverContent = /*#__PURE__*/forwardRef(function PopoverContent(_ref2, ref) {
   let {

package/dist/esm/components/Scrim/Scrim.js

@@ -1,18 +1,17 @@
 import { forwardRef, useRef, useMemo } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
-import { mergeRefs, useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
+import { mergeRefs, useGlobalKeyPress } from '@equinor/eds-utils';
+import { FloatingOverlay } from '@floating-ui/react-dom-interactions';
 import { jsx } from 'react/jsx-runtime';
 
 const {
-  height,
-  width,
   background
 } = scrim;
-const StyledScrim = styled.div.withConfig({
+const StyledScrim = styled(FloatingOverlay).withConfig({
   displayName: "Scrim__StyledScrim",
   componentId: "sc-1fr7uvy-0"
-})(["width:", ";height:", ";background:", ";position:fixed;z-index:1300;top:0;left:0;align-items:center;justify-content:center;display:flex;"], width, height, background);
+})(["background:", ";z-index:1300;align-items:center;justify-content:center;display:flex;"], background);
 const ScrimContent = styled.div.withConfig({
   displayName: "Scrim__ScrimContent",
   componentId: "sc-1fr7uvy-1"
@@ -27,11 +26,6 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
   } = _ref;
   const scrimRef = useRef(null);
   const combinedScrimRef = useMemo(() => mergeRefs(scrimRef, ref), [scrimRef, ref]);
-  const props = { ...rest,
-    open,
-    isDismissable
-  };
-  useHideBodyScroll(open);
   useGlobalKeyPress('Escape', () => {
     if (isDismissable && onClose && open) {
       onClose();
@@ -51,9 +45,10 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
   }
 
   return /*#__PURE__*/jsx(StyledScrim, {
+    lockScroll: true,
     onClick: handleMouseClose,
     ref: combinedScrimRef,
-    ...props,
+    ...rest,
     children: /*#__PURE__*/jsx(ScrimContent, {
       children: children
     })

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

@@ -10,8 +10,6 @@ const {
   }
 } = tokens;
 const scrim = {
-  width: '100%',
-  height: '100%',
   background
 };
 

package/dist/esm/components/Tooltip/Tooltip.js

@@ -116,8 +116,8 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
           ref: tooltipRef,
           style: { ...style,
             position: strategy,
-            top: y !== null && y !== void 0 ? y : 0,
-            left: x !== null && x !== void 0 ? x : 0
+            top: y || 0,
+            left: x || 0
           }
         }),
         children: [title, /*#__PURE__*/jsx(ArrowWrapper, {

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

@@ -11,14 +11,16 @@ const StyledTopBar = styled(Paper).withConfig({
   componentId: "sc-1yj236q-0"
 })(_ref => {
   let {
-    theme
+    theme,
+    sticky
   } = _ref;
-  return css(["height:", ";top:0;position:sticky;background:", ";box-sizing:border-box;z-index:1100;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", ""], theme.height, theme.background, theme.spacings.left, bordersTemplate(theme.border), spacingsTemplate(theme.spacings), typographyTemplate(theme.typography));
+  return css(["height:", ";background:", ";box-sizing:border-box;display:grid;grid-column-gap:", ";grid-template-columns:auto 1fr auto;grid-template-areas:'left center right';align-items:center;", " ", ";", " ", ""], theme.height, theme.background, theme.spacings.left, bordersTemplate(theme.border), spacingsTemplate(theme.spacings), typographyTemplate(theme.typography), sticky && css(["position:sticky;top:0;z-index:1100;"]));
 });
 const TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
   let {
     children,
     elevation = 'none',
+    sticky = true,
     ...props
   } = _ref2;
   const {
@@ -35,6 +37,7 @@ const TopBar = /*#__PURE__*/forwardRef(function TopBar(_ref2, ref) {
     children: /*#__PURE__*/jsx(StyledTopBar, {
       forwardedAs: 'header',
       elevation: elevation,
+      sticky: sticky,
       ...rest,
       children: children
     })

package/dist/types/components/Button/ToggleButton/ToggleButton.d.ts

@@ -0,0 +1,18 @@
+import { HTMLAttributes } from 'react';
+import { ButtonGroupProps } from '../ButtonGroup';
+export declare type ToggleButtonProps = {
+    /** Multiple */
+    multiple?: boolean;
+    /** Array of selected indexses. */
+    selectedIndexes?: number[];
+    /** OnChange */
+    onChange?: (indexes: number[]) => void;
+} & Omit<HTMLAttributes<HTMLElement>, 'onChange'> & Pick<ButtonGroupProps, 'vertical'>;
+export declare const ToggleButton: import("react").ForwardRefExoticComponent<{
+    /** Multiple */
+    multiple?: boolean;
+    /** Array of selected indexses. */
+    selectedIndexes?: number[];
+    /** OnChange */
+    onChange?: (indexes: number[]) => void;
+} & Omit<HTMLAttributes<HTMLElement>, "onChange"> & Pick<ButtonGroupProps, "vertical"> & import("react").RefAttributes<HTMLDivElement>>;

package/dist/types/components/Button/ToggleButton/index.d.ts

@@ -0,0 +1 @@
+export * from './ToggleButton';

package/dist/types/components/Button/index.d.ts

@@ -1,8 +1,10 @@
 import { Button as ButtonWrapper, ButtonProps } from './Button';
 import { ButtonGroup, ButtonGroupProps } from './ButtonGroup/ButtonGroup';
+import { ToggleButton, ToggleButtonProps } from './ToggleButton/ToggleButton';
 declare type ButtonCompoundProps = typeof ButtonWrapper & {
     Group: typeof ButtonGroup;
+    Toggle: typeof ToggleButton;
 };
 declare const Button: ButtonCompoundProps;
 export { Button };
-export type { ButtonProps, ButtonGroupProps };
+export type { ButtonProps, ButtonGroupProps, ToggleButtonProps };

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

@@ -4,6 +4,8 @@ export declare type DividerProps = {
     color?: 'lighter' | 'light' | 'medium';
     /** Vertical spacings */
     variant?: 'small' | 'medium';
+    /** Divider thickness in px*/
+    size?: '1' | '2';
     /** @ignore */
     className?: string;
 } & HTMLAttributes<HTMLHRElement>;
@@ -12,6 +14,8 @@ export declare const Divider: import("react").ForwardRefExoticComponent<{
     color?: 'lighter' | 'light' | 'medium';
     /** Vertical spacings */
     variant?: 'small' | 'medium';
+    /** Divider thickness in px*/
+    size?: '1' | '2';
     /** @ignore */
     className?: string;
 } & HTMLAttributes<HTMLHRElement> & import("react").RefAttributes<HTMLHRElement>>;

package/dist/types/components/Divider/Divider.tokens.d.ts

@@ -5,7 +5,6 @@ declare type DividerVariantsToken = {
     light: DividerToken;
     mediumColor: DividerToken;
 };
-export declare const baseDivider: DividerToken;
 export declare const divider: DividerVariantsToken;
 export declare const small: DividerToken;
 export declare const medium: DividerToken;

package/dist/types/components/EdsProvider/eds.context.d.ts

@@ -4,6 +4,7 @@ declare type State = {
     density: Density;
 };
 declare type UseEdsProps<T> = {
+    /** Use this to update the `density` from nested components in `EdsProvider` */
     setDensity: (density: Density) => void;
 } & T;
 export declare type EdsProviderProps = {

package/dist/types/components/Select/commonStyles.d.ts

@@ -23,6 +23,11 @@ export declare const StyledButton: import("styled-components").StyledComponent<i
     Group: import("react").ForwardRefExoticComponent<{
         vertical?: boolean;
     } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Toggle: import("react").ForwardRefExoticComponent<{
+        multiple?: boolean;
+        selectedIndexes?: number[];
+        onChange?: (indexes: number[]) => void;
+    } & Omit<HTMLAttributes<HTMLElement>, "onChange"> & Pick<import("../Button").ButtonGroupProps, "vertical"> & import("react").RefAttributes<HTMLDivElement>>;
 }, import("styled-components").DefaultTheme, {}, never>;
 export declare const StyledInputWrapper: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
 export {};

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

@@ -3,8 +3,12 @@ import type { Elevations } from '@equinor/eds-tokens';
 declare type AvailableElevations = keyof Pick<Elevations, 'none' | 'raised'>;
 export declare type TopbarProps = {
     elevation?: AvailableElevations;
+    /** Topbar will stick to top when scrolling. */
+    sticky?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 export declare const TopBar: import("react").ForwardRefExoticComponent<{
     elevation?: AvailableElevations;
+    /** Topbar will stick to top when scrolling. */
+    sticky?: boolean;
 } & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.21.0",
+  "version": "0.22.0",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -86,7 +86,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@equinor/eds-icons": "0.12.0",
+    "@equinor/eds-icons": "0.14.0",
     "@equinor/eds-tokens": "0.7.1",
     "@equinor/eds-utils": "0.3.0",
     "@floating-ui/react-dom-interactions": "^0.6.6",