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

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

@@ -3172,14 +3172,19 @@ const StyledAccordionHeaderTitle = styled__default["default"].span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
 })(_ref => {
-  var _theme$entities$heade;
+  var _header$states$active;
 
   let {
     theme,
     isExpanded,
     disabled
   } = _ref;
-  return styled.css(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], isExpanded && !disabled ? (_theme$entities$heade = theme.entities.header.states.active.typography) === null || _theme$entities$heade === void 0 ? void 0 : _theme$entities$heade.color : 'inherit');
+  const {
+    entities: {
+      header
+    }
+  } = theme;
+  return styled.css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
 const AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHeaderTitle(_ref2, ref) {
   let {
@@ -3195,6 +3200,44 @@ const AccordionHeaderTitle = /*#__PURE__*/react.forwardRef(function AccordionHea
   });
 }); // AccordionHeaderTitle.displayName = 'AccordionHeaderTitle'
 
+const StyledAccordionHeaderActions = styled__default["default"].span.withConfig({
+  displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
+  componentId: "sc-klu9el-0"
+})(_ref => {
+  var _header$states$active;
+
+  let {
+    theme,
+    isExpanded,
+    disabled
+  } = _ref;
+  const {
+    entities: {
+      header
+    }
+  } = theme;
+  return styled.css(["display:flex;align-items:center;justify-content:flex-end;padding-right:", ";", " color:", ";"], header.spacings.right, disabled ? styled.css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : styled.css({
+    color: header.typography.color,
+    cursor: 'pointer'
+  }), isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
+});
+const AccordionHeaderActions = /*#__PURE__*/react.forwardRef(function AccordionHeaderActions(_ref2, ref) {
+  let {
+    isExpanded,
+    disabled,
+    children
+  } = _ref2;
+  return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderActions, {
+    ref: ref,
+    isExpanded: isExpanded,
+    disabled: disabled,
+    children: children
+  });
+});
+
 const {
   entities: {
     chevron: chevronToken
@@ -3203,13 +3246,37 @@ const {
 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 => {
+})(_ref => {
+  let {
+    theme,
+    disabled,
+    parentIndex
+  } = _ref;
+  const {
+    entities: {
+      header
+    },
+    border
+  } = theme;
+  return styled.css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, edsUtils.bordersTemplate(border), parentIndex === 0 ? null : 'none', disabled ? styled.css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : styled.css({
+    color: header.typography.color,
+    cursor: 'pointer',
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: header.states.hover.background
+      }
+    }
+  }));
+});
+const StyledAccordionHeaderButton = styled__default["default"].button.attrs(_ref2 => {
   let {
     panelId,
     isExpanded,
     disabled
-  } = _ref;
+  } = _ref2;
   return {
     'aria-expanded': isExpanded,
     'aria-controls': panelId,
@@ -3220,46 +3287,39 @@ const StyledAccordionHeaderButton = styled__default["default"].button.attrs(_ref
 }).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeaderButton",
   componentId: "sc-cu2e95-1"
-})(_ref2 => {
+})(_ref3 => {
   let {
     theme,
-    disabled,
-    parentIndex
-  } = _ref2;
+    disabled
+  } = _ref3;
   const {
     entities: {
       header,
       icon: iconToken
-    },
-    border
+    }
   } = theme;
-  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({
+  return styled.css(["", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border:0;background-color:transparent;margin:0;display:flex;align-items:center;flex-grow:1;", " > svg{color:", ";}"], edsUtils.typographyTemplate(header.typography), edsUtils.spacingsTemplate(header.spacings), edsUtils.outlineTemplate(header.states.focus.outline), edsUtils.outlineTemplate(header.states.focus.outline), disabled ? styled.css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
   }) : styled.css({
     color: header.typography.color,
-    cursor: 'pointer',
-    '@media (hover: hover) and (pointer: fine)': {
-      ':hover': {
-        background: header.states.hover.background
-      }
-    }
+    cursor: 'pointer'
   }), iconToken.typography.color);
 });
 const StyledIcon$1 = styled__default["default"](Icon$1).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-2"
-})(_ref3 => {
+})(_ref4 => {
   let {
     chevronPosition
-  } = _ref3;
+  } = _ref4;
   return chevronPosition === 'left' ? {
     marginRight: '32px'
   } : {
     marginLeft: '16px'
   };
 });
-const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_ref4, ref) {
+const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_ref5, ref) {
   let {
     parentIndex,
     headerLevel,
@@ -3271,7 +3331,7 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
     toggleExpanded,
     disabled,
     ...props
-  } = _ref4;
+  } = _ref5;
 
   const handleClick = () => {
     if (!disabled) {
@@ -3322,14 +3382,27 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
       });
     }
 
+    if (child.type === AccordionHeaderActions) {
+      return;
+    }
+
     return child;
   });
+  const headerActions = react.Children.map(children, child => {
+    if ( /*#__PURE__*/react.isValidElement(child) && child.type === AccordionHeaderActions) {
+      return /*#__PURE__*/react.cloneElement(child, {
+        isExpanded,
+        disabled
+      });
+    }
+  });
   const newChildren = [chevron, headerChildren];
-  return /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeader, {
+  return /*#__PURE__*/jsxRuntime.jsxs(StyledAccordionHeader, {
+    disabled: disabled,
+    parentIndex: parentIndex,
     as: headerLevel,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderButton, {
+    children: [/*#__PURE__*/jsxRuntime.jsx(StyledAccordionHeaderButton, {
       isExpanded: isExpanded,
-      parentIndex: parentIndex,
       disabled: disabled,
       panelId: panelId,
       onClick: handleClick,
@@ -3337,9 +3410,9 @@ const AccordionHeader = /*#__PURE__*/react.forwardRef(function AccordionHeader(_
       ref: ref,
       ...props,
       children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
-    })
+    }), headerActions && headerActions]
   });
-}); // AccordionHeader.displayName = 'EdsAccordionHeader'
+});
 
 const StyledAccordionPanel = styled__default["default"].div.attrs(_ref => {
   let {
@@ -3387,10 +3460,12 @@ const Accordion = Accordion$1;
 Accordion.Item = AccordionItem;
 Accordion.Header = AccordionHeader;
 Accordion.HeaderTitle = AccordionHeaderTitle;
+Accordion.HeaderActions = AccordionHeaderActions;
 Accordion.Panel = AccordionPanel;
 Accordion.Item.displayName = 'Accordion.Item';
 Accordion.Header.displayName = 'Accordion.Header';
 Accordion.HeaderTitle.displayName = 'Accordion.HeaderTitle';
+Accordion.HeaderActions.displayName = 'Accordion.HeaderActions';
 Accordion.Panel.displayName = 'Accordion.Panel';
 
 const TabsContext = /*#__PURE__*/react.createContext({
@@ -5897,17 +5972,11 @@ const Slider = /*#__PURE__*/react.forwardRef(function Slider(_ref10, ref) {
     inputId = "".concat(overrideId, "-thumb");
   }
 
-  const getAriaLabelledby = () => {
+  const getAriaLabelledby = react.useCallback(() => {
     if (ariaLabelledbyNative) return ariaLabelledbyNative;
-
-    if (ariaLabelledby) {
-      console.warn('Slider: The "ariaLabelledby" prop is deprecated and will be removed in a future version of EDS, please use the native "aria-labelledby" instead');
-      return ariaLabelledby;
-    }
-
+    if (ariaLabelledby) return ariaLabelledby;
     return null;
-  };
-
+  }, [ariaLabelledbyNative, ariaLabelledby]);
   return /*#__PURE__*/jsxRuntime.jsx(jsxRuntime.Fragment, {
     children: isRangeSlider ? /*#__PURE__*/jsxRuntime.jsxs(RangeWrapper, { ...rest,
       ref: ref,
@@ -9961,7 +10030,7 @@ const StyledList = styled__default["default"](List$1).withConfig({
   let {
     theme
   } = _ref2;
-  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:50;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
+  return styled.css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:1400;"], theme.background, theme.boxShadow, edsUtils.bordersTemplate(theme.border));
 });
 const StyledButton = styled__default["default"](Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -10072,7 +10141,19 @@ function AutocompleteInner(props, ref) {
   const [containerEl, setContainerEl] = react.useState();
   const isMounted = edsUtils.useIsMounted();
   const isControlled = Boolean(selectedOptions);
-  const [availableItems, setAvailableItems] = react.useState(options);
+  const [inputOptions, setInputOptions] = react.useState(options);
+  react.useEffect(() => {
+    const availableHash = JSON.stringify(inputOptions);
+    const optionsHash = JSON.stringify(options);
+
+    if (availableHash !== optionsHash) {
+      setInputOptions(options);
+    }
+  }, [options, inputOptions]);
+  react.useEffect(() => {
+    setAvailableItems(inputOptions);
+  }, [inputOptions]);
+  const [availableItems, setAvailableItems] = react.useState(inputOptions);
   const disabledItems = react.useMemo(() => options.filter(optionDisabled), [options, optionDisabled]);
   const {
     density
@@ -10082,18 +10163,28 @@ function AutocompleteInner(props, ref) {
   }, multiple ? multiSelect : selectTokens);
   let placeholderText = placeholder;
   let multipleSelectionProps = {
-    initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : [],
-    onSelectedItemsChange: changes => {
-      if (onOptionsChange) {
-        onOptionsChange(changes);
-      }
-    }
+    initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
   };
 
-  if (isControlled) {
+  if (multiple) {
     multipleSelectionProps = { ...multipleSelectionProps,
-      selectedItems: selectedOptions
+      onSelectedItemsChange: changes => {
+        if (onOptionsChange) {
+          const {
+            selectedItems
+          } = changes;
+          onOptionsChange({
+            selectedItems
+          });
+        }
+      }
     };
+
+    if (isControlled) {
+      multipleSelectionProps = { ...multipleSelectionProps,
+        selectedItems: selectedOptions
+      };
+    }
   }
 
   const {
@@ -10212,7 +10303,17 @@ function AutocompleteInner(props, ref) {
 
   if (isControlled && !multiple) {
     comboBoxProps = { ...comboBoxProps,
-      selectedItem: selectedOptions[0]
+      selectedItem: selectedOptions[0] || null,
+      onSelectedItemChange: changes => {
+        if (onOptionsChange) {
+          const {
+            selectedItem
+          } = changes;
+          onOptionsChange({
+            selectedItems: [selectedItem]
+          });
+        }
+      }
     };
   }
 
@@ -10284,8 +10385,10 @@ function AutocompleteInner(props, ref) {
     reset: resetCombobox
   } = downshift.useCombobox(comboBoxProps);
   react.useEffect(() => {
-    if (anchorRef.current) {
+    if (anchorRef.current && isOpen) {
       setAnchorEl(anchorRef.current);
+    } else {
+      setAnchorEl(null);
     }
 
     if (isControlled) {
@@ -10296,7 +10399,16 @@ function AutocompleteInner(props, ref) {
       setAnchorEl(null);
       setContainerEl(null);
     };
-  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]);
+  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]); //"Turn on" popper on load to position menu correctly and then turn it off
+
+  react.useEffect(() => {
+    if (anchorRef.current) {
+      setAnchorEl(anchorRef.current);
+      setTimeout(() => {
+        setAnchorEl(null);
+      }, 1);
+    }
+  }, []);
   const {
     styles,
     attributes

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

@@ -3,9 +3,10 @@ import styled, { css } from 'styled-components';
 import { chevron_up, chevron_down } from '@equinor/eds-icons';
 import { Icon } from '../Icon/index.js';
 import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
+import { AccordionHeaderActions } from './AccordionHeaderActions.js';
 import { accordion } from './Accordion.tokens.js';
-import { typographyTemplate, bordersTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
-import { jsx } from 'react/jsx-runtime';
+import { bordersTemplate, typographyTemplate, spacingsTemplate, outlineTemplate } from '@equinor/eds-utils';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 const {
   entities: {
@@ -15,13 +16,37 @@ const {
 const StyledAccordionHeader = styled.div.withConfig({
   displayName: "AccordionHeader__StyledAccordionHeader",
   componentId: "sc-cu2e95-0"
-})(["margin:0;padding:0;"]);
-const StyledAccordionHeaderButton = styled.button.attrs(_ref => {
+})(_ref => {
+  let {
+    theme,
+    disabled,
+    parentIndex
+  } = _ref;
+  const {
+    entities: {
+      header
+    },
+    border
+  } = theme;
+  return css(["margin:0;padding:0;height:", ";box-sizing:border-box;display:flex;flex-wrap:nowrap;justify-content:space-between;background-color:", ";", " border-top:", ";", ""], header.height, header.background, bordersTemplate(border), parentIndex === 0 ? null : 'none', disabled ? css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : css({
+    color: header.typography.color,
+    cursor: 'pointer',
+    '@media (hover: hover) and (pointer: fine)': {
+      ':hover': {
+        background: header.states.hover.background
+      }
+    }
+  }));
+});
+const StyledAccordionHeaderButton = styled.button.attrs(_ref2 => {
   let {
     panelId,
     isExpanded,
     disabled
-  } = _ref;
+  } = _ref2;
   return {
     'aria-expanded': isExpanded,
     'aria-controls': panelId,
@@ -32,46 +57,39 @@ const StyledAccordionHeaderButton = styled.button.attrs(_ref => {
 }).withConfig({
   displayName: "AccordionHeader__StyledAccordionHeaderButton",
   componentId: "sc-cu2e95-1"
-})(_ref2 => {
+})(_ref3 => {
   let {
     theme,
-    disabled,
-    parentIndex
-  } = _ref2;
+    disabled
+  } = _ref3;
   const {
     entities: {
       header,
       icon: iconToken
-    },
-    border
+    }
   } = theme;
-  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({
+  return css(["", " ", " &[data-focus-visible-added]:focus{", "}&:focus-visible{", "}border:0;background-color:transparent;margin:0;display:flex;align-items:center;flex-grow:1;", " > svg{color:", ";}"], typographyTemplate(header.typography), spacingsTemplate(header.spacings), outlineTemplate(header.states.focus.outline), outlineTemplate(header.states.focus.outline), disabled ? css({
     color: header.states.disabled.typography.color,
     cursor: 'not-allowed'
   }) : css({
     color: header.typography.color,
-    cursor: 'pointer',
-    '@media (hover: hover) and (pointer: fine)': {
-      ':hover': {
-        background: header.states.hover.background
-      }
-    }
+    cursor: 'pointer'
   }), iconToken.typography.color);
 });
 const StyledIcon = styled(Icon).withConfig({
   displayName: "AccordionHeader__StyledIcon",
   componentId: "sc-cu2e95-2"
-})(_ref3 => {
+})(_ref4 => {
   let {
     chevronPosition
-  } = _ref3;
+  } = _ref4;
   return chevronPosition === 'left' ? {
     marginRight: '32px'
   } : {
     marginLeft: '16px'
   };
 });
-const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4, ref) {
+const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref5, ref) {
   let {
     parentIndex,
     headerLevel,
@@ -83,7 +101,7 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4,
     toggleExpanded,
     disabled,
     ...props
-  } = _ref4;
+  } = _ref5;
 
   const handleClick = () => {
     if (!disabled) {
@@ -134,14 +152,27 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4,
       });
     }
 
+    if (child.type === AccordionHeaderActions) {
+      return;
+    }
+
     return child;
   });
+  const headerActions = Children.map(children, child => {
+    if ( /*#__PURE__*/isValidElement(child) && child.type === AccordionHeaderActions) {
+      return /*#__PURE__*/cloneElement(child, {
+        isExpanded,
+        disabled
+      });
+    }
+  });
   const newChildren = [chevron, headerChildren];
-  return /*#__PURE__*/jsx(StyledAccordionHeader, {
+  return /*#__PURE__*/jsxs(StyledAccordionHeader, {
+    disabled: disabled,
+    parentIndex: parentIndex,
     as: headerLevel,
-    children: /*#__PURE__*/jsx(StyledAccordionHeaderButton, {
+    children: [/*#__PURE__*/jsx(StyledAccordionHeaderButton, {
       isExpanded: isExpanded,
-      parentIndex: parentIndex,
       disabled: disabled,
       panelId: panelId,
       onClick: handleClick,
@@ -149,8 +180,8 @@ const AccordionHeader = /*#__PURE__*/forwardRef(function AccordionHeader(_ref4,
       ref: ref,
       ...props,
       children: chevronPosition === 'left' ? newChildren : newChildren.reverse()
-    })
+    }), headerActions && headerActions]
   });
-}); // AccordionHeader.displayName = 'EdsAccordionHeader'
+});
 
 export { AccordionHeader };

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

@@ -0,0 +1,43 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import { jsx } from 'react/jsx-runtime';
+
+const StyledAccordionHeaderActions = styled.span.withConfig({
+  displayName: "AccordionHeaderActions__StyledAccordionHeaderActions",
+  componentId: "sc-klu9el-0"
+})(_ref => {
+  var _header$states$active;
+
+  let {
+    theme,
+    isExpanded,
+    disabled
+  } = _ref;
+  const {
+    entities: {
+      header
+    }
+  } = theme;
+  return css(["display:flex;align-items:center;justify-content:flex-end;padding-right:", ";", " color:", ";"], header.spacings.right, disabled ? css({
+    color: header.states.disabled.typography.color,
+    cursor: 'not-allowed'
+  }) : css({
+    color: header.typography.color,
+    cursor: 'pointer'
+  }), isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
+});
+const AccordionHeaderActions = /*#__PURE__*/forwardRef(function AccordionHeaderActions(_ref2, ref) {
+  let {
+    isExpanded,
+    disabled,
+    children
+  } = _ref2;
+  return /*#__PURE__*/jsx(StyledAccordionHeaderActions, {
+    ref: ref,
+    isExpanded: isExpanded,
+    disabled: disabled,
+    children: children
+  });
+});
+
+export { AccordionHeaderActions };

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

@@ -6,14 +6,19 @@ const StyledAccordionHeaderTitle = styled.span.withConfig({
   displayName: "AccordionHeaderTitle__StyledAccordionHeaderTitle",
   componentId: "sc-g27uve-0"
 })(_ref => {
-  var _theme$entities$heade;
+  var _header$states$active;
 
   let {
     theme,
     isExpanded,
     disabled
   } = _ref;
-  return css(["flex:1;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;text-align:left;font-family:Equinor;color:", ";"], isExpanded && !disabled ? (_theme$entities$heade = theme.entities.header.states.active.typography) === null || _theme$entities$heade === void 0 ? void 0 : _theme$entities$heade.color : 'inherit');
+  const {
+    entities: {
+      header
+    }
+  } = theme;
+  return css(["display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;flex-grow:1;overflow:hidden;text-align:left;color:", ";"], isExpanded && !disabled ? (_header$states$active = header.states.active.typography) === null || _header$states$active === void 0 ? void 0 : _header$states$active.color : 'inherit');
 });
 const AccordionHeaderTitle = /*#__PURE__*/forwardRef(function AccordionHeaderTitle(_ref2, ref) {
   let {

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

@@ -2,16 +2,19 @@ import { Accordion as Accordion$1 } from './Accordion.js';
 import { AccordionItem } from './AccordionItem.js';
 import { AccordionHeader } from './AccordionHeader.js';
 import { AccordionHeaderTitle } from './AccordionHeaderTitle.js';
+import { AccordionHeaderActions } from './AccordionHeaderActions.js';
 import { AccordionPanel } from './AccordionPanel.js';
 
 const Accordion = Accordion$1;
 Accordion.Item = AccordionItem;
 Accordion.Header = AccordionHeader;
 Accordion.HeaderTitle = AccordionHeaderTitle;
+Accordion.HeaderActions = AccordionHeaderActions;
 Accordion.Panel = AccordionPanel;
 Accordion.Item.displayName = 'Accordion.Item';
 Accordion.Header.displayName = 'Accordion.Header';
 Accordion.HeaderTitle.displayName = 'Accordion.HeaderTitle';
+Accordion.HeaderActions.displayName = 'Accordion.HeaderActions';
 Accordion.Panel.displayName = 'Accordion.Panel';
 
 export { Accordion };

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

@@ -1,4 +1,4 @@
-import { forwardRef, useRef, useState, useMemo, useCallback, useEffect } from 'react';
+import { forwardRef, useRef, useState, useEffect, useMemo, useCallback } from 'react';
 import { createPortal } from 'react-dom';
 import { useMultipleSelection, useCombobox } from 'downshift';
 import styled, { css, ThemeProvider } from 'styled-components';
@@ -38,7 +38,7 @@ const StyledList = styled(List).withConfig({
   let {
     theme
   } = _ref2;
-  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:50;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
+  return css(["background-color:", ";box-shadow:", ";", " overflow-y:auto;max-height:300px;padding:0;position:absolute;right:0;left:0;z-index:1400;"], theme.background, theme.boxShadow, bordersTemplate(theme.border));
 });
 const StyledButton = styled(Button).withConfig({
   displayName: "Autocomplete__StyledButton",
@@ -149,7 +149,19 @@ function AutocompleteInner(props, ref) {
   const [containerEl, setContainerEl] = useState();
   const isMounted = useIsMounted();
   const isControlled = Boolean(selectedOptions);
-  const [availableItems, setAvailableItems] = useState(options);
+  const [inputOptions, setInputOptions] = useState(options);
+  useEffect(() => {
+    const availableHash = JSON.stringify(inputOptions);
+    const optionsHash = JSON.stringify(options);
+
+    if (availableHash !== optionsHash) {
+      setInputOptions(options);
+    }
+  }, [options, inputOptions]);
+  useEffect(() => {
+    setAvailableItems(inputOptions);
+  }, [inputOptions]);
+  const [availableItems, setAvailableItems] = useState(inputOptions);
   const disabledItems = useMemo(() => options.filter(optionDisabled), [options, optionDisabled]);
   const {
     density
@@ -159,18 +171,28 @@ function AutocompleteInner(props, ref) {
   }, multiple ? multiSelect : selectTokens);
   let placeholderText = placeholder;
   let multipleSelectionProps = {
-    initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : [],
-    onSelectedItemsChange: changes => {
-      if (onOptionsChange) {
-        onOptionsChange(changes);
-      }
-    }
+    initialSelectedItems: multiple ? initialSelectedOptions : initialSelectedOptions[0] ? [initialSelectedOptions[0]] : []
   };
 
-  if (isControlled) {
+  if (multiple) {
     multipleSelectionProps = { ...multipleSelectionProps,
-      selectedItems: selectedOptions
+      onSelectedItemsChange: changes => {
+        if (onOptionsChange) {
+          const {
+            selectedItems
+          } = changes;
+          onOptionsChange({
+            selectedItems
+          });
+        }
+      }
     };
+
+    if (isControlled) {
+      multipleSelectionProps = { ...multipleSelectionProps,
+        selectedItems: selectedOptions
+      };
+    }
   }
 
   const {
@@ -289,7 +311,17 @@ function AutocompleteInner(props, ref) {
 
   if (isControlled && !multiple) {
     comboBoxProps = { ...comboBoxProps,
-      selectedItem: selectedOptions[0]
+      selectedItem: selectedOptions[0] || null,
+      onSelectedItemChange: changes => {
+        if (onOptionsChange) {
+          const {
+            selectedItem
+          } = changes;
+          onOptionsChange({
+            selectedItems: [selectedItem]
+          });
+        }
+      }
     };
   }
 
@@ -361,8 +393,10 @@ function AutocompleteInner(props, ref) {
     reset: resetCombobox
   } = useCombobox(comboBoxProps);
   useEffect(() => {
-    if (anchorRef.current) {
+    if (anchorRef.current && isOpen) {
       setAnchorEl(anchorRef.current);
+    } else {
+      setAnchorEl(null);
     }
 
     if (isControlled) {
@@ -373,7 +407,16 @@ function AutocompleteInner(props, ref) {
       setAnchorEl(null);
       setContainerEl(null);
     };
-  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]);
+  }, [anchorRef, isControlled, isOpen, selectedOptions, setSelectedItems]); //"Turn on" popper on load to position menu correctly and then turn it off
+
+  useEffect(() => {
+    if (anchorRef.current) {
+      setAnchorEl(anchorRef.current);
+      setTimeout(() => {
+        setAnchorEl(null);
+      }, 1);
+    }
+  }, []);
   const {
     styles,
     attributes

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

@@ -1,4 +1,4 @@
-import { forwardRef, useState, useEffect, useRef } from 'react';
+import { forwardRef, useState, useEffect, useRef, useCallback } from 'react';
 import styled, { css } from 'styled-components';
 import { slider } from './Slider.tokens.js';
 import { MinMax } from './MinMax.js';
@@ -198,17 +198,11 @@ const Slider = /*#__PURE__*/forwardRef(function Slider(_ref10, ref) {
     inputId = "".concat(overrideId, "-thumb");
   }
 
-  const getAriaLabelledby = () => {
+  const getAriaLabelledby = useCallback(() => {
     if (ariaLabelledbyNative) return ariaLabelledbyNative;
-
-    if (ariaLabelledby) {
-      console.warn('Slider: The "ariaLabelledby" prop is deprecated and will be removed in a future version of EDS, please use the native "aria-labelledby" instead');
-      return ariaLabelledby;
-    }
-
+    if (ariaLabelledby) return ariaLabelledby;
     return null;
-  };
-
+  }, [ariaLabelledbyNative, ariaLabelledby]);
   return /*#__PURE__*/jsx(Fragment, {
     children: isRangeSlider ? /*#__PURE__*/jsxs(RangeWrapper, { ...rest,
       ref: ref,

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

@@ -0,0 +1,14 @@
+import { HTMLAttributes } from 'react';
+export declare type AccordionHeaderActionsProps = {
+    /**  Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /** Accordion item is disabled */
+    disabled?: boolean;
+} & HTMLAttributes<HTMLSpanElement>;
+declare const AccordionHeaderActions: import("react").ForwardRefExoticComponent<{
+    /**  Is AccordionItem expanded */
+    isExpanded?: boolean;
+    /** Accordion item is disabled */
+    disabled?: boolean;
+} & HTMLAttributes<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export { AccordionHeaderActions };

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

@@ -2,14 +2,16 @@ import { Accordion as BaseAccordion } from './Accordion';
 import { AccordionItem, AccordionItemProps } from './AccordionItem';
 import { AccordionHeader, AccordionHeaderProps } from './AccordionHeader';
 import { AccordionHeaderTitle, AccordionHeaderTitleProps } from './AccordionHeaderTitle';
+import { AccordionHeaderActions, AccordionHeaderActionsProps } from './AccordionHeaderActions';
 import { AccordionPanel, AccordionPanelProps } from './AccordionPanel';
 import type { AccordionProps } from './Accordion.types';
 declare type AccordionCompoundProps = typeof BaseAccordion & {
     Item: typeof AccordionItem;
     Header: typeof AccordionHeader;
     HeaderTitle: typeof AccordionHeaderTitle;
+    HeaderActions: typeof AccordionHeaderActions;
     Panel: typeof AccordionPanel;
 };
 declare const Accordion: AccordionCompoundProps;
 export { Accordion };
-export type { AccordionProps, AccordionPanelProps, AccordionHeaderProps, AccordionHeaderTitleProps, AccordionItemProps, };
+export type { AccordionProps, AccordionPanelProps, AccordionHeaderProps, AccordionHeaderTitleProps, AccordionHeaderActionsProps, AccordionItemProps, };

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

@@ -1,6 +1,7 @@
 import { HTMLAttributes } from 'react';
-import { UseMultipleSelectionProps } from 'downshift';
-export declare type AutocompleteChanges<T> = UseMultipleSelectionProps<T>;
+export declare type AutocompleteChanges<T> = {
+    selectedItems: T[];
+};
 export declare type AutocompleteProps<T> = {
     /** List of options to choose from */
     options: T[];

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

@@ -1,6 +1,9 @@
 import { HTMLAttributes, MouseEvent, KeyboardEvent, ChangeEvent } from 'react';
 export declare type SliderProps = {
-    /** Id for the elements that labels this slider (NOTE: will be deprecated and removed in a future version of EDS, please use the native aria-labelledby instead) */
+    /**
+     * Id for the elements that labels this slider
+     * @deprecated  Use the `aria-labelledby` instead
+     * */
     ariaLabelledby?: string;
     /** Components value, range of numbers */
     value: number[] | number;
@@ -24,7 +27,10 @@ export declare type SliderProps = {
     disabled?: boolean;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'onChange'>;
 export declare const Slider: import("react").ForwardRefExoticComponent<{
-    /** Id for the elements that labels this slider (NOTE: will be deprecated and removed in a future version of EDS, please use the native aria-labelledby instead) */
+    /**
+     * Id for the elements that labels this slider
+     * @deprecated  Use the `aria-labelledby` instead
+     * */
     ariaLabelledby?: string;
     /** Components value, range of numbers */
     value: number[] | number;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@equinor/eds-core-react",
-  "version": "0.20.0",
+  "version": "0.20.2-dev.20220616",
   "description": "The React implementation of the Equinor Design System",
   "sideEffects": [
     "**/*.css"
@@ -86,8 +86,8 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.17.9",
-    "@equinor/eds-icons": "0.10.0-dev.202205096",
-    "@equinor/eds-tokens": "0.7.0-dev.202205096",
+    "@equinor/eds-icons": "0.11.0",
+    "@equinor/eds-tokens": "0.7.1",
     "@equinor/eds-utils": "0.2.2",
     "@popperjs/core": "2.9.2",
     "downshift": "^6.1.7",