@equinor/eds-core-react 0.18.0 → 0.19.0-dev.20220404

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

@@ -126,7 +126,7 @@ const button = {
     focus: {
       outline: {
         type: 'outline',
-        offset: '2px',
+        offset: '3px',
         style: 'dashed',
         color: outline.color,
         width: outline.width
@@ -716,7 +716,12 @@ const {
     default__base: clicboundHeight,
     compact__standard: compactClickboundHeight
   },
-  shape: shape$3
+  shape: shape$3,
+  interactions: {
+    focused: {
+      width: focusOutlineWidth$8
+    }
+  }
 } = edsTokens.tokens;
 const primary$6 = mergeDeepRight$1(button, {
   height: shape$3.icon_button.minHeight,
@@ -756,7 +761,7 @@ const primary$6 = mergeDeepRight$1(button, {
     },
     focus: {
       outline: {
-        offset: '0px'
+        offset: "-".concat(parseInt(focusOutlineWidth$8), "px")
       }
     }
   },
@@ -974,7 +979,12 @@ const Button = /*#__PURE__*/react.forwardRef(function Button(_ref2, ref) {
 
 const {
   typography: typography$g,
-  colors: colorsToken
+  colors: colorsToken,
+  interactions: {
+    focused: {
+      width: focusOutlineWidth$7
+    }
+  }
 } = edsTokens.tokens;
 const {
   heading,
@@ -1020,7 +1030,7 @@ const link = {
   states: {
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth$7,
         color: focus$1,
         style: 'dashed',
         type: 'outline',
@@ -3038,6 +3048,11 @@ const {
     comfortable: {
       medium: mediumSpacing
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth$6
+    }
   }
 } = edsTokens.tokens;
 const accordion = {
@@ -3070,7 +3085,7 @@ const accordion = {
             type: 'outline',
             color: focusOutlineColor$6,
             style: 'dashed',
-            width: '1px',
+            width: focusOutlineWidth$6,
             offset: '2px'
           }
         },
@@ -3217,7 +3232,11 @@ const {
     chevron: chevronToken
   }
 } = accordion;
-const StyledAccordionHeader = styled__default["default"].div.attrs(_ref => {
+const StyledAccordionHeader = styled__default["default"].div.withConfig({
+  displayName: "AccordionHeader__StyledAccordionHeader",
+  componentId: "sc-cu2e95-0"
+})(["margin:0;padding:0;"]);
+const StyledAccordionHeaderButton = styled__default["default"].button.attrs(_ref => {
   let {
     panelId,
     isExpanded,
@@ -3226,14 +3245,13 @@ const StyledAccordionHeader = styled__default["default"].div.attrs(_ref => {
   return {
     'aria-expanded': isExpanded,
     'aria-controls': panelId,
-    role: 'button',
     'aria-disabled': isExpanded && disabled,
     tabIndex: disabled ? -1 : 0,
     disabled
   };
 }).withConfig({
-  displayName: "AccordionHeader__StyledAccordionHeader",
-  componentId: "sc-cu2e95-0"
+  displayName: "AccordionHeader__StyledAccordionHeaderButton",
+  componentId: "sc-cu2e95-1"
 })(_ref2 => {
   let {
     theme,
@@ -3247,7 +3265,7 @@ const StyledAccordionHeader = styled__default["default"].div.attrs(_ref => {
     },
     border
   } = theme;
-  return styled.css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], edsUtils.typographyTemplate(header.typography), edsUtils.bordersTemplate(border), edsUtils.spacingsTemplate(header.spacings), edsUtils.outlineTemplate(header.states.focus.outline), edsUtils.outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? styled.css({
+  return styled.css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";width:100%;background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], edsUtils.typographyTemplate(header.typography), edsUtils.bordersTemplate(border), edsUtils.spacingsTemplate(header.spacings), edsUtils.outlineTemplate(header.states.focus.outline), edsUtils.outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? styled.css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
   }) : styled.css({
@@ -3262,7 +3280,7 @@ const StyledAccordionHeader = styled__default["default"].div.attrs(_ref => {
 });
 const StyledIcon$1 = styled__default["default"](Icon$1).withConfig({
   displayName: "AccordionHeader__StyledIcon",
-  componentId: "sc-cu2e95-1"
+  componentId: "sc-cu2e95-2"
 })(_ref3 => {
   let {
     chevronPosition
@@ -3340,16 +3358,18 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
   });
   const newChildren = [chevron, headerChildren];
   return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeader, {
-    isExpanded: isExpanded,
-    parentIndex: parentIndex,
     as: headerLevel,
-    disabled: disabled,
-    ...props,
-    panelId: panelId,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    ref: ref,
-    children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderButton, {
+      isExpanded: isExpanded,
+      parentIndex: parentIndex,
+      disabled: disabled,
+      panelId: panelId,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: ref,
+      ...props,
+      children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
+    })
   });
 }); // AccordionHeader.displayName = 'EdsAccordionHeader'
 
@@ -3450,6 +3470,11 @@ const {
     comfortable: {
       medium: spacingMedium$7
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth$5
+    }
   }
 } = edsTokens.tokens;
 const token$1 = {
@@ -3463,7 +3488,7 @@ const token$1 = {
         focus: {
           outline: {
             type: 'outline',
-            width: '1px',
+            width: focusOutlineWidth$5,
             style: 'dashed',
             color: focusOutlineColor$5
           }
@@ -3510,8 +3535,8 @@ const token$1 = {
         focus: {
           outline: {
             type: 'outline',
-            width: '1px',
-            offset: '-1px',
+            width: focusOutlineWidth$5,
+            offset: "-".concat(parseInt(focusOutlineWidth$5), "px"),
             style: 'dashed',
             color: focusOutlineColor$5
           }
@@ -4247,10 +4272,11 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
     isDismissable = false,
     ...rest
   } = _ref;
+  const scrimRef = react.useRef(null);
+  const combinedScrimRef = edsUtils.useCombinedRefs(scrimRef, ref);
   const props = { ...rest,
     open,
-    isDismissable,
-    ref
+    isDismissable
   };
   edsUtils.useHideBodyScroll(open);
   edsUtils.useGlobalKeyPress('Escape', () => {
@@ -4260,27 +4286,22 @@ const Scrim = /*#__PURE__*/react.forwardRef(function Scrim(_ref, ref) {
   });
 
   const handleMouseClose = event => {
-    if (event) {
+    if (event && event.target === scrimRef.current) {
       if (event.type === 'click' && isDismissable && open) {
         onClose && onClose();
       }
     }
   };
 
-  const handleContentClick = event => {
-    // Avoid event bubbling inside dialog/content inside scrim
-    event.stopPropagation();
-  };
-
   if (!open) {
     return null;
   }
 
   return /*#__PURE__*/jsxRuntime.jsx(StyledScrim, {
     onClick: handleMouseClose,
+    ref: combinedScrimRef,
     ...props,
     children: /*#__PURE__*/jsxRuntime.jsx(ScrimContent, {
-      onClick: handleContentClick,
       children: children
     })
   });
@@ -4866,6 +4887,11 @@ const {
     rounded: {
       borderRadius: borderRadius$4
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth$4
+    }
   }
 } = edsTokens.tokens;
 const enabled$3 = {
@@ -4898,11 +4924,11 @@ const enabled$3 = {
     },
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth$4,
         color: focusOutlineColor$4,
         style: 'dashed',
         type: 'outline',
-        offset: '2px'
+        offset: '3px'
       }
     },
     active: {
@@ -5514,6 +5540,11 @@ const {
   },
   typography: {
     paragraph
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth$3
+    }
   }
 } = edsTokens.tokens;
 const slider = {
@@ -5566,9 +5597,9 @@ const slider = {
           outline: {
             type: 'outline',
             color: focusOutlineColor$3,
-            width: '1px',
+            width: focusOutlineWidth$3,
             style: 'dashed',
-            offset: '2px'
+            offset: '3px'
           }
         },
         hover: {
@@ -5802,7 +5833,22 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     ...rest
   } = _ref10;
   const isRangeSlider = Array.isArray(value);
-  const [sliderValue, setSliderValue] = react.useState(isRangeSlider ? value : [value]);
+  const parsedValue = isRangeSlider ? value : [value];
+  const [initalValue, setInitalValue] = react.useState(parsedValue);
+  const [sliderValue, setSliderValue] = react.useState(parsedValue);
+  react.useEffect(() => {
+    if (isRangeSlider) {
+      if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
+        setInitalValue(value);
+        setSliderValue(value);
+      }
+    } else {
+      if (value !== initalValue[0]) {
+        setInitalValue([value]);
+        setSliderValue([value]);
+      }
+    }
+  }, [value, initalValue, isRangeSlider]);
   const minRange = react.useRef(null);
   const maxRange = react.useRef(null);
 
@@ -5832,7 +5878,7 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
   };
 
   const handleKeyUp = event => {
-    if (event.keyCode === 37 || event.keyCode === 39) {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
       handleCommitedValue(event);
     }
   };
@@ -6092,7 +6138,13 @@ const Tooltip = /*#__PURE__*/react.forwardRef(function Tooltip(_ref, ref) {
   const {
     styles,
     attributes
-  } = edsUtils.usePopper(anchorRef.current, popperEl, arrowRef, placement, 14);
+  } = edsUtils.usePopper({
+    anchorEl: anchorRef.current,
+    popperEl,
+    arrowRef,
+    placement,
+    offset: 14
+  });
   const props = {
     open,
     style: { ...styles.popper,
@@ -6424,7 +6476,12 @@ const Popover$1 = /*#__PURE__*/react.forwardRef(function Popover(_ref5, ref) {
   const {
     styles,
     attributes
-  } = edsUtils.usePopper(storedAnchorEl, popperEl, arrowRef, placement);
+  } = edsUtils.usePopper({
+    anchorEl: storedAnchorEl,
+    popperEl,
+    arrowRef,
+    placement
+  });
   const props = {
     open,
     ...rest,
@@ -7363,6 +7420,7 @@ Breadcrumbs.Breadcrumb.displayName = 'Breadcrumbs.Breadcrumb';
 
 const initalState = {
   focusedIndex: -1,
+  initialFocus: null,
   onClose: null
 };
 const MenuContext = /*#__PURE__*/react.createContext(initalState);
@@ -7373,6 +7431,7 @@ const MenuProvider = _ref => {
   const [state, setState] = react.useState(initalState);
   const {
     focusedIndex,
+    initialFocus,
     onClose
   } = state;
 
@@ -7382,9 +7441,16 @@ const MenuProvider = _ref => {
     }));
   };
 
+  const setInitialFocus = initialFocus => {
+    setState(prevState => ({ ...prevState,
+      initialFocus: initialFocus
+    }));
+  };
+
   const setOnClose = onClose => {
     const onCloseHelper = () => {
       setFocusedIndex(-1);
+      setInitialFocus(null);
       onClose();
     };
 
@@ -7396,6 +7462,8 @@ const MenuProvider = _ref => {
   const value = {
     setFocusedIndex,
     focusedIndex,
+    setInitialFocus,
+    initialFocus,
     setOnClose,
     onClose
   };
@@ -7670,17 +7738,21 @@ function isIndexable(item) {
 const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
   let {
     children,
-    focus,
     ...rest
   } = _ref;
   const {
     focusedIndex,
-    setFocusedIndex
+    setFocusedIndex,
+    initialFocus
   } = useMenu();
   let index = -1;
   const focusableIndexs = react.useMemo(() => [], []);
   const updatedChildren = react.useMemo(() => react.Children.map(children, child => {
+    if (!child) return child;
+
     if (child.type === MenuSection) {
+      index++;
+      const menuSectionIndex = index;
       const updatedGrandChildren = react.Children.map(child.props.children, grandChild => {
         index++;
         if (isIndexable(grandChild)) focusableIndexs.push(index);
@@ -7688,7 +7760,9 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
           index
         });
       });
-      return /*#__PURE__*/react.cloneElement(child, null, updatedGrandChildren);
+      return /*#__PURE__*/react.cloneElement(child, {
+        index: menuSectionIndex
+      }, updatedGrandChildren);
     } else {
       index++;
       if (isIndexable(child)) focusableIndexs.push(index);
@@ -7700,15 +7774,15 @@ const MenuList = /*#__PURE__*/react.forwardRef(function MenuList(_ref, ref) {
   const firstFocusIndex = focusableIndexs[0];
   const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
   react.useEffect(() => {
-    if (focus === 'first') {
+    if (initialFocus === 'first') {
       setFocusedIndex(firstFocusIndex);
     }
 
-    if (focus === 'last') {
+    if (initialFocus === 'last') {
       setFocusedIndex(lastFocusIndex);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [focus, firstFocusIndex, lastFocusIndex]);
+  }, [initialFocus, firstFocusIndex, lastFocusIndex]);
 
   const handleMenuItemChange = (direction, fallbackIndex) => {
     const i = direction === 'down' ? 1 : -1;
@@ -7769,13 +7843,45 @@ const MenuContainer = /*#__PURE__*/react.forwardRef(function MenuContainer(_ref2
   } = _ref2;
   const {
     setOnClose,
-    onClose
+    onClose,
+    setInitialFocus
   } = useMenu();
   react.useEffect(() => {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
   }, [onClose, onCloseCallback, setOnClose]);
+  react.useEffect(() => {
+    const openWithKey = e => {
+      const {
+        key
+      } = e; //activate menu with arrows according to wai-aria best practices
+
+      if (key === 'ArrowDown' || key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        anchorEl.dispatchEvent(new Event('click', {
+          bubbles: true
+        }));
+      }
+
+      switch (key) {
+        case 'Enter':
+        case 'ArrowDown':
+          setInitialFocus('first');
+          break;
+
+        case 'ArrowUp':
+          setInitialFocus('last');
+          break;
+      }
+    };
+
+    if (anchorEl) anchorEl.addEventListener('keydown', openWithKey);
+    return () => {
+      if (anchorEl) anchorEl.removeEventListener('keydown', openWithKey);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorEl]);
   edsUtils.useOutsideClick(containerEl, e => {
     if (open && onClose !== null && !anchorEl.contains(e.target)) {
       onClose();
@@ -7826,7 +7932,12 @@ const Menu$1 = /*#__PURE__*/react.forwardRef(function Menu(_ref3, ref) {
   const {
     styles,
     attributes
-  } = edsUtils.usePopper(storedAnchorEl, containerEl, null, placement, 4);
+  } = edsUtils.usePopper({
+    anchorEl: storedAnchorEl,
+    popperEl: containerEl,
+    placement,
+    offset: 4
+  });
   const props = {
     open,
     style: { ...styles.popper,
@@ -8550,6 +8661,11 @@ const {
   clickbounds: {
     default__base: clicboundSize$1,
     compact__standard: compactClickboundSize$1
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth$2
+    }
   }
 } = edsTokens.tokens;
 const checkbox = {
@@ -8575,9 +8691,9 @@ const checkbox = {
       outline: {
         type: 'outline',
         style: 'dashed',
-        width: '1px',
+        width: focusOutlineWidth$2,
         color: focusOutlineColor$2,
-        offset: '11px'
+        offset: '10px'
       }
     }
   },
@@ -8597,9 +8713,9 @@ const checkbox = {
           outline: {
             type: 'outline',
             style: 'dashed',
-            width: '1px',
+            width: focusOutlineWidth$2,
             color: focusOutlineColor$2,
-            offset: '3px'
+            offset: '2px'
           }
         }
       }
@@ -9011,6 +9127,11 @@ const {
   clickbounds: {
     default__base: clicboundSize,
     compact__standard: compactClickboundSize
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth$1
+    }
   }
 } = edsTokens.tokens;
 const comfortable$1 = {
@@ -9036,9 +9157,9 @@ const comfortable$1 = {
       outline: {
         type: 'outline',
         style: 'dashed',
-        width: '1px',
+        width: focusOutlineWidth$1,
         color: focusOutlineColor$1,
-        offset: '11px'
+        offset: '10px'
       }
     }
   },
@@ -9058,9 +9179,9 @@ const comfortable$1 = {
           outline: {
             type: 'outline',
             style: 'dashed',
-            width: '1px',
+            width: focusOutlineWidth$1,
             color: focusOutlineColor$1,
-            offset: '3px'
+            offset: '2px'
           }
         }
       }
@@ -9441,6 +9562,11 @@ const {
         icon_button: compactIconButton
       }
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = edsTokens.tokens;
 const comfortable = {
@@ -9532,7 +9658,7 @@ const comfortable = {
     },
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth,
         type: 'outline',
         style: 'dashed',
         color: focusOutlineColor

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

@@ -42,6 +42,11 @@ const {
     comfortable: {
       medium: mediumSpacing
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const accordion = {
@@ -74,7 +79,7 @@ const accordion = {
             type: 'outline',
             color: focusOutlineColor,
             style: 'dashed',
-            width: '1px',
+            width: focusOutlineWidth,
             offset: '2px'
           }
         },

package/dist/esm/components/Accordion/AccordionHeader.js

@@ -12,7 +12,11 @@ const {
     chevron: chevronToken
   }
 } = accordion;
-const StyledAccordionHeader = styled.div.attrs(_ref => {
+const StyledAccordionHeader = styled.div.withConfig({
+  displayName: "AccordionHeader__StyledAccordionHeader",
+  componentId: "sc-cu2e95-0"
+})(["margin:0;padding:0;"]);
+const StyledAccordionHeaderButton = styled.button.attrs(_ref => {
   let {
     panelId,
     isExpanded,
@@ -21,14 +25,13 @@ const StyledAccordionHeader = styled.div.attrs(_ref => {
   return {
     'aria-expanded': isExpanded,
     'aria-controls': panelId,
-    role: 'button',
     'aria-disabled': isExpanded && disabled,
     tabIndex: disabled ? -1 : 0,
     disabled
   };
 }).withConfig({
-  displayName: "AccordionHeader__StyledAccordionHeader",
-  componentId: "sc-cu2e95-0"
+  displayName: "AccordionHeader__StyledAccordionHeaderButton",
+  componentId: "sc-cu2e95-1"
 })(_ref2 => {
   let {
     theme,
@@ -42,7 +45,7 @@ const StyledAccordionHeader = styled.div.attrs(_ref => {
     },
     border
   } = theme;
-  return css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? css({
+  return css(["", " ", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border-top:", ";width:100%;background:", ";height:", ";margin:0;display:flex;align-items:center;box-sizing:border-box;", " > svg{color:", ";}"], typographyTemplate(header.typography), bordersTemplate(border), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), parentIndex === 0 ? null : 'none', header.background, header.height, disabled ? css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
   }) : css({
@@ -57,7 +60,7 @@ const StyledAccordionHeader = styled.div.attrs(_ref => {
 });
 const StyledIcon = styled(Icon).withConfig({
   displayName: "AccordionHeader__StyledIcon",
-  componentId: "sc-cu2e95-1"
+  componentId: "sc-cu2e95-2"
 })(_ref3 => {
   let {
     chevronPosition
@@ -135,16 +138,18 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4,
   });
   const newChildren = [chevron, headerChildren];
   return /*#__PURE__*/jsx(StyledAccordionHeader, {
-    isExpanded: isExpanded,
-    parentIndex: parentIndex,
     as: headerLevel,
-    disabled: disabled,
-    ...props,
-    panelId: panelId,
-    onClick: handleClick,
-    onKeyDown: handleKeyDown,
-    ref: ref,
-    children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
+    children: /*#__PURE__*/jsx(StyledAccordionHeaderButton, {
+      isExpanded: isExpanded,
+      parentIndex: parentIndex,
+      disabled: disabled,
+      panelId: panelId,
+      onClick: handleClick,
+      onKeyDown: handleKeyDown,
+      ref: ref,
+      ...props,
+      children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
+    })
   });
 }); // AccordionHeader.displayName = 'EdsAccordionHeader'
 

package/dist/esm/components/Button/tokens/button.js

@@ -92,7 +92,7 @@ const button = {
     focus: {
       outline: {
         type: 'outline',
-        offset: '2px',
+        offset: '3px',
         style: 'dashed',
         color: outline.color,
         width: outline.width

package/dist/esm/components/Button/tokens/icon.js

@@ -35,7 +35,12 @@ const {
     default__base: clicboundHeight,
     compact__standard: compactClickboundHeight
   },
-  shape
+  shape,
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
+  }
 } = tokens;
 const primary = mergeDeepRight(button, {
   height: shape.icon_button.minHeight,
@@ -75,7 +80,7 @@ const primary = mergeDeepRight(button, {
     },
     focus: {
       outline: {
-        offset: '0px'
+        offset: "-".concat(parseInt(focusOutlineWidth), "px")
       }
     }
   },

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

@@ -31,6 +31,11 @@ const {
   clickbounds: {
     default__base: clicboundSize,
     compact__standard: compactClickboundSize
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const checkbox = {
@@ -56,9 +61,9 @@ const checkbox = {
       outline: {
         type: 'outline',
         style: 'dashed',
-        width: '1px',
+        width: focusOutlineWidth,
         color: focusOutlineColor,
-        offset: '11px'
+        offset: '10px'
       }
     }
   },
@@ -78,9 +83,9 @@ const checkbox = {
           outline: {
             type: 'outline',
             style: 'dashed',
-            width: '1px',
+            width: focusOutlineWidth,
             color: focusOutlineColor,
-            offset: '3px'
+            offset: '2px'
           }
         }
       }

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

@@ -56,6 +56,11 @@ const {
     rounded: {
       borderRadius
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens$1;
 const enabled = {
@@ -88,11 +93,11 @@ const enabled = {
     },
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth,
         color: focusOutlineColor,
         style: 'dashed',
         type: 'outline',
-        offset: '2px'
+        offset: '3px'
       }
     },
     active: {

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

@@ -3,6 +3,7 @@ import { jsx } from 'react/jsx-runtime';
 
 const initalState = {
   focusedIndex: -1,
+  initialFocus: null,
   onClose: null
 };
 const MenuContext = /*#__PURE__*/createContext(initalState);
@@ -13,6 +14,7 @@ const MenuProvider = _ref => {
   const [state, setState] = useState(initalState);
   const {
     focusedIndex,
+    initialFocus,
     onClose
   } = state;
 
@@ -22,9 +24,16 @@ const MenuProvider = _ref => {
     }));
   };
 
+  const setInitialFocus = initialFocus => {
+    setState(prevState => ({ ...prevState,
+      initialFocus: initialFocus
+    }));
+  };
+
   const setOnClose = onClose => {
     const onCloseHelper = () => {
       setFocusedIndex(-1);
+      setInitialFocus(null);
       onClose();
     };
 
@@ -36,6 +45,8 @@ const MenuProvider = _ref => {
   const value = {
     setFocusedIndex,
     focusedIndex,
+    setInitialFocus,
+    initialFocus,
     setOnClose,
     onClose
   };

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

@@ -34,13 +34,45 @@ const MenuContainer = /*#__PURE__*/forwardRef(function MenuContainer(_ref2, ref)
   } = _ref2;
   const {
     setOnClose,
-    onClose
+    onClose,
+    setInitialFocus
   } = useMenu();
   useEffect(() => {
     if (onClose === null && onCloseCallback) {
       setOnClose(onCloseCallback);
     }
   }, [onClose, onCloseCallback, setOnClose]);
+  useEffect(() => {
+    const openWithKey = e => {
+      const {
+        key
+      } = e; //activate menu with arrows according to wai-aria best practices
+
+      if (key === 'ArrowDown' || key === 'ArrowUp') {
+        e.preventDefault();
+        e.stopPropagation();
+        anchorEl.dispatchEvent(new Event('click', {
+          bubbles: true
+        }));
+      }
+
+      switch (key) {
+        case 'Enter':
+        case 'ArrowDown':
+          setInitialFocus('first');
+          break;
+
+        case 'ArrowUp':
+          setInitialFocus('last');
+          break;
+      }
+    };
+
+    if (anchorEl) anchorEl.addEventListener('keydown', openWithKey);
+    return () => {
+      if (anchorEl) anchorEl.removeEventListener('keydown', openWithKey);
+    }; // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [anchorEl]);
   useOutsideClick(containerEl, e => {
     if (open && onClose !== null && !anchorEl.contains(e.target)) {
       onClose();
@@ -91,7 +123,12 @@ const Menu = /*#__PURE__*/forwardRef(function Menu(_ref3, ref) {
   const {
     styles,
     attributes
-  } = usePopper(storedAnchorEl, containerEl, null, placement, 4);
+  } = usePopper({
+    anchorEl: storedAnchorEl,
+    popperEl: containerEl,
+    placement,
+    offset: 4
+  });
   const props = {
     open,
     style: { ...styles.popper,

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

@@ -20,17 +20,21 @@ function isIndexable(item) {
 const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
   let {
     children,
-    focus,
     ...rest
   } = _ref;
   const {
     focusedIndex,
-    setFocusedIndex
+    setFocusedIndex,
+    initialFocus
   } = useMenu();
   let index = -1;
   const focusableIndexs = useMemo(() => [], []);
   const updatedChildren = useMemo(() => Children.map(children, child => {
+    if (!child) return child;
+
     if (child.type === MenuSection) {
+      index++;
+      const menuSectionIndex = index;
       const updatedGrandChildren = Children.map(child.props.children, grandChild => {
         index++;
         if (isIndexable(grandChild)) focusableIndexs.push(index);
@@ -38,7 +42,9 @@ const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
           index
         });
       });
-      return /*#__PURE__*/cloneElement(child, null, updatedGrandChildren);
+      return /*#__PURE__*/cloneElement(child, {
+        index: menuSectionIndex
+      }, updatedGrandChildren);
     } else {
       index++;
       if (isIndexable(child)) focusableIndexs.push(index);
@@ -50,15 +56,15 @@ const MenuList = /*#__PURE__*/forwardRef(function MenuList(_ref, ref) {
   const firstFocusIndex = focusableIndexs[0];
   const lastFocusIndex = focusableIndexs[focusableIndexs.length - 1];
   useEffect(() => {
-    if (focus === 'first') {
+    if (initialFocus === 'first') {
       setFocusedIndex(firstFocusIndex);
     }
 
-    if (focus === 'last') {
+    if (initialFocus === 'last') {
       setFocusedIndex(lastFocusIndex);
     } // eslint-disable-next-line react-hooks/exhaustive-deps
 
-  }, [focus, firstFocusIndex, lastFocusIndex]);
+  }, [initialFocus, firstFocusIndex, lastFocusIndex]);
 
   const handleMenuItemChange = (direction, fallbackIndex) => {
     const i = direction === 'down' ? 1 : -1;

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

@@ -75,7 +75,12 @@ const Popover = /*#__PURE__*/forwardRef(function Popover(_ref5, ref) {
   const {
     styles,
     attributes
-  } = usePopper(storedAnchorEl, popperEl, arrowRef, placement);
+  } = usePopper({
+    anchorEl: storedAnchorEl,
+    popperEl,
+    arrowRef,
+    placement
+  });
   const props = {
     open,
     ...rest,

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

@@ -31,6 +31,11 @@ const {
   clickbounds: {
     default__base: clicboundSize,
     compact__standard: compactClickboundSize
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const comfortable = {
@@ -56,9 +61,9 @@ const comfortable = {
       outline: {
         type: 'outline',
         style: 'dashed',
-        width: '1px',
+        width: focusOutlineWidth,
         color: focusOutlineColor,
-        offset: '11px'
+        offset: '10px'
       }
     }
   },
@@ -78,9 +83,9 @@ const comfortable = {
           outline: {
             type: 'outline',
             style: 'dashed',
-            width: '1px',
+            width: focusOutlineWidth,
             color: focusOutlineColor,
-            offset: '3px'
+            offset: '2px'
           }
         }
       }

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

@@ -1,7 +1,7 @@
-import { forwardRef } from 'react';
+import { forwardRef, useRef } from 'react';
 import styled from 'styled-components';
 import { scrim } from './Scrim.tokens.js';
-import { useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
+import { useCombinedRefs, useHideBodyScroll, useGlobalKeyPress } from '@equinor/eds-utils';
 import { jsx } from 'react/jsx-runtime';
 
 const {
@@ -25,10 +25,11 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
     isDismissable = false,
     ...rest
   } = _ref;
+  const scrimRef = useRef(null);
+  const combinedScrimRef = useCombinedRefs(scrimRef, ref);
   const props = { ...rest,
     open,
-    isDismissable,
-    ref
+    isDismissable
   };
   useHideBodyScroll(open);
   useGlobalKeyPress('Escape', () => {
@@ -38,27 +39,22 @@ const Scrim = /*#__PURE__*/forwardRef(function Scrim(_ref, ref) {
   });
 
   const handleMouseClose = event => {
-    if (event) {
+    if (event && event.target === scrimRef.current) {
       if (event.type === 'click' && isDismissable && open) {
         onClose && onClose();
       }
     }
   };
 
-  const handleContentClick = event => {
-    // Avoid event bubbling inside dialog/content inside scrim
-    event.stopPropagation();
-  };
-
   if (!open) {
     return null;
   }
 
   return /*#__PURE__*/jsx(StyledScrim, {
     onClick: handleMouseClose,
+    ref: combinedScrimRef,
     ...props,
     children: /*#__PURE__*/jsx(ScrimContent, {
-      onClick: handleContentClick,
       children: children
     })
   });

package/dist/esm/components/Slider/Slider.js

@@ -1,4 +1,4 @@
-import { forwardRef, useState, useRef } from 'react';
+import { forwardRef, useState, useEffect, useRef } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
 import { MinMax } from './MinMax.js';
@@ -101,7 +101,22 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     ...rest
   } = _ref10;
   const isRangeSlider = Array.isArray(value);
-  const [sliderValue, setSliderValue] = useState(isRangeSlider ? value : [value]);
+  const parsedValue = isRangeSlider ? value : [value];
+  const [initalValue, setInitalValue] = useState(parsedValue);
+  const [sliderValue, setSliderValue] = useState(parsedValue);
+  useEffect(() => {
+    if (isRangeSlider) {
+      if (value[0] !== initalValue[0] || value[1] !== initalValue[1]) {
+        setInitalValue(value);
+        setSliderValue(value);
+      }
+    } else {
+      if (value !== initalValue[0]) {
+        setInitalValue([value]);
+        setSliderValue([value]);
+      }
+    }
+  }, [value, initalValue, isRangeSlider]);
   const minRange = useRef(null);
   const maxRange = useRef(null);
 
@@ -131,7 +146,7 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
   };
 
   const handleKeyUp = event => {
-    if (event.keyCode === 37 || event.keyCode === 39) {
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
       handleCommitedValue(event);
     }
   };

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

@@ -41,6 +41,11 @@ const {
   },
   typography: {
     paragraph
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const slider = {
@@ -93,9 +98,9 @@ const slider = {
           outline: {
             type: 'outline',
             color: focusOutlineColor,
-            width: '1px',
+            width: focusOutlineWidth,
             style: 'dashed',
-            offset: '2px'
+            offset: '3px'
           }
         },
         hover: {

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

@@ -57,6 +57,11 @@ const {
         icon_button: compactIconButton
       }
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const comfortable = {
@@ -148,7 +153,7 @@ const comfortable = {
     },
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth,
         type: 'outline',
         style: 'dashed',
         color: focusOutlineColor

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

@@ -34,6 +34,11 @@ const {
     comfortable: {
       medium: spacingMedium
     }
+  },
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
   }
 } = tokens;
 const token = {
@@ -47,7 +52,7 @@ const token = {
         focus: {
           outline: {
             type: 'outline',
-            width: '1px',
+            width: focusOutlineWidth,
             style: 'dashed',
             color: focusOutlineColor
           }
@@ -94,8 +99,8 @@ const token = {
         focus: {
           outline: {
             type: 'outline',
-            width: '1px',
-            offset: '-1px',
+            width: focusOutlineWidth,
+            offset: "-".concat(parseInt(focusOutlineWidth), "px"),
             style: 'dashed',
             color: focusOutlineColor
           }

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

@@ -68,7 +68,13 @@ const Tooltip = /*#__PURE__*/forwardRef(function Tooltip(_ref, ref) {
   const {
     styles,
     attributes
-  } = usePopper(anchorRef.current, popperEl, arrowRef, placement, 14);
+  } = usePopper({
+    anchorEl: anchorRef.current,
+    popperEl,
+    arrowRef,
+    placement,
+    offset: 14
+  });
   const props = {
     open,
     style: { ...styles.popper,

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

@@ -2,7 +2,12 @@ import { tokens } from '@equinor/eds-tokens';
 
 const {
   typography,
-  colors: colorsToken
+  colors: colorsToken,
+  interactions: {
+    focused: {
+      width: focusOutlineWidth
+    }
+  }
 } = tokens;
 const {
   heading,
@@ -48,7 +53,7 @@ const link = {
   states: {
     focus: {
       outline: {
-        width: '1px',
+        width: focusOutlineWidth,
         color: focus,
         style: 'dashed',
         type: 'outline',

package/dist/types/components/Accordion/AccordionHeader.d.ts

@@ -15,7 +15,7 @@ export declare type AccordionHeaderProps = {
     toggleExpanded?: () => void;
     /** Accordion item toggle callback */
     onToggle?: () => void;
-} & AccordionProps & HTMLAttributes<HTMLDivElement>;
+} & AccordionProps & HTMLAttributes<HTMLButtonElement>;
 declare const AccordionHeader: import("react").ForwardRefExoticComponent<{
     /** The id of the button that toggles expansion */
     id?: string;
@@ -31,5 +31,5 @@ declare const AccordionHeader: import("react").ForwardRefExoticComponent<{
     toggleExpanded?: () => void;
     /** Accordion item toggle callback */
     onToggle?: () => void;
-} & AccordionProps & HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+} & AccordionProps & HTMLAttributes<HTMLButtonElement> & import("react").RefAttributes<HTMLButtonElement>>;
 export { AccordionHeader };

package/dist/types/components/Menu/Menu.context.d.ts

@@ -1,10 +1,13 @@
 import { ReactNode, MouseEvent } from 'react';
+import type { FocusTarget } from './Menu.types';
 export declare type State = {
     focusedIndex: number;
+    initialFocus: FocusTarget;
     onClose: (e?: MouseEvent) => void;
 };
 declare type UseMenu<T> = T & {
     setFocusedIndex: (index: number) => void;
+    setInitialFocus: (initialFocus: FocusTarget) => void;
     setOnClose: (onClose: (e?: MouseEvent) => void) => void;
 };
 declare type ProviderProps = {

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

@@ -1,13 +1,10 @@
 import { HTMLAttributes } from 'react';
 import { Placement } from '@equinor/eds-utils';
-import type { FocusTarget } from './Menu.types';
 export declare type MenuProps = {
     /** Anchor element for Menu */
     anchorEl?: HTMLElement | null;
     /** Is Menu open */
     open: boolean;
-    /** Which Menu child to focus when open */
-    focus?: FocusTarget;
     /** onClose handler */
     onClose?: () => void;
     /** Menu placement relative to anchorEl */
@@ -18,8 +15,6 @@ export declare const Menu: import("react").ForwardRefExoticComponent<{
     anchorEl?: HTMLElement | null;
     /** Is Menu open */
     open: boolean;
-    /** Which Menu child to focus when open */
-    focus?: FocusTarget;
     /** onClose handler */
     onClose?: () => void;
     /** Menu placement relative to anchorEl */

package/dist/types/components/Menu/MenuList.d.ts

@@ -1,7 +1,5 @@
 import { ReactNode } from 'react';
-import type { FocusTarget } from './Menu.types';
 declare type MenuListProps = {
-    focus?: FocusTarget;
     children: ReactNode;
 };
 export declare const MenuList: import("react").ForwardRefExoticComponent<MenuListProps & import("react").RefAttributes<HTMLDivElement>>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.18.0",
+  "version": "0.19.0-dev.20220404",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -72,7 +72,7 @@
     "rollup-plugin-postcss": "^4.0.2",
     "styled-components": "5.3.0",
     "tsc-watch": "^4.6.0",
-    "typescript": "^4.5.5"
+    "typescript": "^4.6.3"
   },
   "peerDependencies": {
     "react": ">=16.8",
@@ -83,7 +83,7 @@
     "@babel/runtime": "^7.17.0",
     "@equinor/eds-icons": "0.10.0",
     "@equinor/eds-tokens": "0.7.0",
-    "@equinor/eds-utils": "0.1.0",
+    "@equinor/eds-utils": "0.2.0",
     "@popperjs/core": "2.9.2",
     "downshift": "^6.1.7",
     "react-fast-compare": "3.2.0",