@equinor/eds-core-react 0.20.1 → 0.20.3

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({
@@ -3443,6 +3518,12 @@ const {
     focused: {
       width: focusOutlineWidth$5
     }
+  },
+  typography: {
+    navigation: {
+      menu_tabs,
+      menu_title
+    }
   }
 } = edsTokens.tokens;
 const token$1 = {
@@ -3461,6 +3542,8 @@ const token$1 = {
             color: focusOutlineColor$5
           }
         }
+      },
+      typography: { ...menu_title
       }
     },
     tab: {
@@ -3478,7 +3561,8 @@ const token$1 = {
       },
       typography: {
         color: defaultColor,
-        textAlign: 'center'
+        textAlign: 'center',
+        ...menu_tabs
       },
       border: {
         type: 'bordergroup',
@@ -3755,7 +3839,7 @@ const StyledTab = styled__default["default"].button.attrs(_ref => {
       tab
     }
   } = theme;
-  return styled.css(["appearance:none;box-sizing:border-box;font-family:inherit;border:none;outline:none;font-size:1rem;height:", ";", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, edsUtils.spacingsTemplate(tab.spacings), active ? tab.states.active.typography.color : tab.typography.color, tab.background, edsUtils.outlineTemplate(tab.states.focus.outline), edsUtils.outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? edsUtils.bordersTemplate(tab.states.disabled.border) : edsUtils.bordersTemplate(tab.border), active && edsUtils.bordersTemplate(tab.states.active.border));
+  return styled.css(["appearance:none;box-sizing:border-box;border:none;outline:none;height:", ";", " ", " color:", ";background-color:", ";position:relative;white-space:nowrap;text-overflow:ellipsis;overflow-x:hidden;scroll-snap-align:end;scroll-snap-stop:always;&:focus{outline:none;}&[data-focus],&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}&::-moz-focus-inner{border:0;}@media (hover:hover) and (pointer:fine){&[data-hover],&:hover{color:", ";", "}}", " ", ""], tab.height, edsUtils.spacingsTemplate(tab.spacings), edsUtils.typographyTemplate(tab.typography), active ? tab.states.active.typography.color : tab.typography.color, tab.background, edsUtils.outlineTemplate(tab.states.focus.outline), edsUtils.outlineTemplate(tab.states.focus.outline), active ? tab.states.active.states.hover.typography.color : tab.typography.color, disabled ? styled.css(["background:", ";cursor:not-allowed;"], tab.states.disabled.background) : styled.css(["background:", ";cursor:pointer;"], tab.states.hover.background), disabled ? edsUtils.bordersTemplate(tab.states.disabled.border) : edsUtils.bordersTemplate(tab.border), active && edsUtils.bordersTemplate(tab.states.active.border));
 });
 const Tab = /*#__PURE__*/react.forwardRef(function Tab(props, ref) {
   return /*#__PURE__*/jsxRuntime.jsx(StyledTab, {
@@ -3800,7 +3884,7 @@ const StyledTabPanel = styled__default["default"].div.attrs(() => ({
       panel
     }
   } = theme;
-  return styled.css(["", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.spacingsTemplate(panel.spacings), edsUtils.outlineTemplate(panel.states.focus.outline), edsUtils.outlineTemplate(panel.states.focus.outline));
+  return styled.css(["", " ", " &:focus{outline:none;}&[data-focus-visible-added]:focus{", "}&:focus-visible{", "}"], edsUtils.spacingsTemplate(panel.spacings), edsUtils.typographyTemplate(panel.typography), edsUtils.outlineTemplate(panel.states.focus.outline), edsUtils.outlineTemplate(panel.states.focus.outline));
 });
 const TabPanel = /*#__PURE__*/react.forwardRef(function TabPanel(_ref2, ref) {
   let { ...props
@@ -3823,10 +3907,46 @@ Tabs.Panel.displayName = 'Tabs.Panel';
 Tabs.List.displayName = 'Tabs.List';
 
 const {
+  elevation,
   colors: {
     ui: {
       background__default: {
         rgba: background$c
+      }
+    }
+  }
+} = edsTokens.tokens;
+const paper = {
+  background: background$c
+};
+
+const StyledPaper = styled__default["default"].div.withConfig({
+  displayName: "Paper__StyledPaper",
+  componentId: "sc-6ncnv9-0"
+})(["background:", ";box-shadow:", ";"], paper.background, _ref => {
+  let {
+    elevation
+  } = _ref;
+  return elevation;
+});
+const Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
+  let {
+    elevation: elevation$1,
+    ...rest
+  } = _ref2;
+  const props = { ...rest,
+    elevation: elevation[elevation$1] || 'none'
+  };
+  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
+    ref: ref
+  });
+});
+
+const {
+  colors: {
+    ui: {
+      background__default: {
+        rgba: background$b
       },
       background__info: {
         rgba: backgroundInfo
@@ -3851,7 +3971,7 @@ const {
   }
 } = edsTokens.tokens;
 const primary$4 = {
-  background: background$c,
+  background: background$b,
   border: {
     type: 'border',
     radius: borderRadius$8
@@ -3884,7 +4004,7 @@ var tokens$4 = /*#__PURE__*/Object.freeze({
 const {
   primary: primary$3
 } = tokens$4;
-const StyledCard = styled__default["default"].div.withConfig({
+const StyledCard = styled__default["default"](Paper).withConfig({
   displayName: "Card__StyledCard",
   componentId: "sc-bjucjn-0"
 })(["width:100%;position:relative;background-color:", ";box-sizing:border-box;display:flex;flex-direction:column;grid-gap:16px;cursor:", ";", ";"], _ref => {
@@ -3902,6 +4022,7 @@ const Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref3, ref) {
   let {
     children,
     variant = 'default',
+    elevation = 'none',
     onClick,
     ...rest
   } = _ref3;
@@ -3914,7 +4035,9 @@ const Card$1 = /*#__PURE__*/react.forwardRef(function Card(_ref3, ref) {
     cursor,
     ...rest
   };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledCard, { ...props,
+  return /*#__PURE__*/jsxRuntime.jsx(StyledCard, {
+    elevation: elevation,
+    ...props,
     onClick: onClick,
     children: children
   });
@@ -4081,7 +4204,7 @@ const topbar = {
   }
 };
 
-const StyledTopBar = styled__default["default"].header.withConfig({
+const StyledTopBar = styled__default["default"](Paper).withConfig({
   displayName: "TopBar__StyledTopBar",
   componentId: "sc-1yj236q-0"
 })(_ref => {
@@ -4093,6 +4216,7 @@ const StyledTopBar = styled__default["default"].header.withConfig({
 const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   let {
     children,
+    elevation = 'none',
     ...props
   } = _ref2;
   const {
@@ -4101,10 +4225,15 @@ const TopBar$1 = /*#__PURE__*/react.forwardRef(function TopBar(_ref2, ref) {
   const token = edsUtils.useToken({
     density
   }, topbar);
+  const rest = { ...props,
+    ref
+  };
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, { ...props,
-      ref: ref,
+    children: /*#__PURE__*/jsxRuntime.jsx(StyledTopBar, {
+      forwardedAs: 'header',
+      elevation: elevation,
+      ...rest,
       children: children
     })
   });
@@ -4166,44 +4295,6 @@ TopBar.Actions.displayName = 'Topbar.Actions';
 TopBar.Header.displayName = 'Topbar.Header';
 TopBar.CustomContent.displayName = 'Topbar.CustomContent';
 
-const {
-  elevation,
-  colors: {
-    ui: {
-      background__default: {
-        rgba: background$b
-      }
-    }
-  }
-} = edsTokens.tokens;
-const paper = {
-  maxWidth: 'calc(100% - 32px)',
-  minWidth: '96px',
-  background: background$b
-};
-
-const StyledPaper = styled__default["default"].div.withConfig({
-  displayName: "Paper__StyledPaper",
-  componentId: "sc-6ncnv9-0"
-})(["min-width:", ";max-width:", ";background:", ";box-shadow:", ";"], paper.minWidth, paper.maxWidth, paper.background, _ref => {
-  let {
-    elevation
-  } = _ref;
-  return elevation;
-});
-const Paper = /*#__PURE__*/react.forwardRef(function Paper(_ref2, ref) {
-  let {
-    elevation: elevation$1,
-    ...rest
-  } = _ref2;
-  const props = { ...rest,
-    elevation: elevation[elevation$1] || 'none'
-  };
-  return /*#__PURE__*/jsxRuntime.jsx(StyledPaper, { ...props,
-    ref: ref
-  });
-});
-
 const {
   colors: {
     ui: {
@@ -6752,13 +6843,9 @@ const BannerIcon = /*#__PURE__*/react.forwardRef(function BannerIcon(_ref2, ref)
   });
 });
 
-const StyledBanner = styled__default["default"].div.withConfig({
-  displayName: "Banner__StyledBanner",
-  componentId: "sc-1ju451i-0"
-})([""]);
 const Content$1 = styled__default["default"].div.withConfig({
   displayName: "Banner__Content",
-  componentId: "sc-1ju451i-1"
+  componentId: "sc-1ju451i-0"
 })(_ref => {
   let {
     theme,
@@ -6768,12 +6855,13 @@ const Content$1 = styled__default["default"].div.withConfig({
 });
 const NonMarginDivider = styled__default["default"](Divider).withConfig({
   displayName: "Banner__NonMarginDivider",
-  componentId: "sc-1ju451i-2"
+  componentId: "sc-1ju451i-1"
 })(["margin:0;height:2px;"]);
 const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
   let {
     children,
     className,
+    elevation = 'none',
     ...rest
   } = _ref2;
   const childrenWhereBannerIcon = react.Children.map(children, child => {
@@ -6792,8 +6880,9 @@ const Banner$1 = /*#__PURE__*/react.forwardRef(function Banner(_ref2, ref) {
   }, enabled);
   return /*#__PURE__*/jsxRuntime.jsx(styled.ThemeProvider, {
     theme: token,
-    children: /*#__PURE__*/jsxRuntime.jsxs(StyledBanner, { ...props,
+    children: /*#__PURE__*/jsxRuntime.jsxs(Paper, { ...props,
       className: className,
+      elevation: elevation,
       role: "alert",
       children: [/*#__PURE__*/jsxRuntime.jsx(Content$1, {
         hasIcon: hasIcon,
@@ -9955,7 +10044,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",
@@ -10066,7 +10155,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
@@ -10076,18 +10177,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 {
@@ -10141,9 +10252,11 @@ function AutocompleteInner(props, ref) {
       let {
         selectedItem
       } = _ref8;
-
       // Show all options when single select is reopened with a selected item
-      if (availableItems.length === 1 && selectedItem === availableItems[0]) {
+      const availableHash = JSON.stringify(availableItems[0]);
+      const selectedsHash = JSON.stringify(selectedItem);
+
+      if (availableItems.length === 1 && selectedsHash === availableHash) {
         setAvailableItems(options);
       }
     },
@@ -10206,7 +10319,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 ? [selectedItem] : []
+          });
+        }
+      }
     };
   }
 
@@ -10278,8 +10401,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) {
@@ -10290,7 +10415,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