baseui 12.0.0 → 12.1.2

package/es/message-card/message-card.js

@@ -0,0 +1,114 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { StyledRoot, StyledImage, StyledContentContainer, StyledHeadingContainer, StyledParagraphContainer } from './styled-components';
+import { Button as DefaultButton, SHAPE, SIZE } from '../button';
+import { useStyletron } from '../styles/index';
+import { ThemeProvider, LightTheme } from '../';
+import { getBackgroundColorType } from './utils';
+import { colors } from '../tokens';
+import { getOverrides } from '../helpers/overrides';
+import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE, BUTTON_KIND } from './constants';
+
+const ButtonAlwaysLightTheme = ({
+  children,
+  ...restProps
+}) => /*#__PURE__*/React.createElement(ThemeProvider, {
+  theme: LightTheme
+}, /*#__PURE__*/React.createElement(DefaultButton, restProps, children));
+
+const MessageCard = ({
+  backgroundColor = colors.white,
+  backgroundColorType: backgroundColorTypeProp,
+  buttonKind = BUTTON_KIND.secondary,
+  buttonLabel,
+  heading,
+  image,
+  onClick,
+  overrides = {},
+  paragraph
+}) => {
+  const {
+    src,
+    layout = IMAGE_LAYOUT.top,
+    backgroundPosition,
+    ariaLabel
+  } = image || {};
+  const [Root, RootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [ContentContainer, ContentContainerProps] = getOverrides(overrides.ContentContainer, StyledContentContainer);
+  const [HeadingContainer, HeadingContainerProps] = getOverrides(overrides.HeadingContainer, StyledHeadingContainer);
+  const [ParagraphContainer, ParagraphContainerProps] = getOverrides(overrides.ParagraphContainer, StyledParagraphContainer);
+  const [Image, ImageProps] = getOverrides(overrides.Image, StyledImage);
+  const [Button, ButtonProps] = getOverrides(overrides.Button, ButtonAlwaysLightTheme);
+  const [, theme] = useStyletron();
+  let backgroundColorType = backgroundColorTypeProp || getBackgroundColorType(backgroundColor);
+
+  if (!backgroundColorType) {
+    backgroundColorType = BACKGROUND_COLOR_TYPE.dark;
+
+    if (process.env.NODE_ENV !== "production") {
+      console.warn(`The provided value for 'backgroundColor', ${backgroundColor}, is not recognized as a \
+        Base Web primitive color. Please use the 'backgroundColorType' prop to indicate whether\
+         this color is light or dark so the rest of the component can be styled accordingly.`);
+    }
+  }
+
+  let buttonColors;
+
+  if (buttonKind === BUTTON_KIND.tertiary && backgroundColorType === BACKGROUND_COLOR_TYPE.dark) {
+    buttonColors = {
+      color: theme.colors.contentOnColor,
+      backgroundColor: theme.colors.buttonTertiaryFill
+    };
+  }
+
+  if (buttonKind !== BUTTON_KIND.tertiary && backgroundColor !== colors.white) {
+    buttonColors = {
+      color: theme.colors.contentOnColorInverse,
+      backgroundColor: theme.colors.backgroundAlwaysLight
+    };
+  }
+
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    onClick: onClick,
+    $backgroundColor: backgroundColor,
+    $backgroundColorType: backgroundColorType,
+    $imageLayout: layout
+  }, RootProps), image && /*#__PURE__*/React.createElement(Image, _extends({
+    role: "img",
+    "aria-label": ariaLabel,
+    $src: src,
+    $imageLayout: layout,
+    $backgroundPosition: backgroundPosition
+  }, ImageProps)), /*#__PURE__*/React.createElement(ContentContainer, ContentContainerProps, heading && /*#__PURE__*/React.createElement(HeadingContainer, HeadingContainerProps, heading), paragraph && /*#__PURE__*/React.createElement(ParagraphContainer, ParagraphContainerProps, paragraph), buttonLabel && /*#__PURE__*/React.createElement(Button, _extends({
+    $as: "div",
+    kind: buttonKind,
+    shape: SHAPE.pill,
+    size: SIZE.compact,
+    role: "none",
+    tabIndex: -1,
+    colors: buttonColors,
+    overrides: {
+      BaseButton: {
+        style: {
+          textAlign: 'center',
+          pointerEvents: 'none',
+          ...(buttonKind === BUTTON_KIND.tertiary ? {
+            marginTop: theme.sizing.scale100,
+            transform: theme.direction === 'rtl' ? `translateX(${theme.sizing.scale500})` : `translateX(-${theme.sizing.scale500})`
+          } : {
+            marginTop: theme.sizing.scale500
+          })
+        }
+      }
+    }
+  }, ButtonProps), buttonLabel)));
+};
+
+export default MessageCard;

package/es/message-card/styled-components.js

@@ -0,0 +1,108 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { styled } from '../styles';
+import { IMAGE_LAYOUT, BACKGROUND_COLOR_TYPE } from './constants';
+export const StyledRoot = styled('button', ({
+  $theme,
+  $backgroundColor,
+  $backgroundColorType,
+  $imageLayout = IMAGE_LAYOUT.top
+}) => {
+  const lightBackgroundStyle = {
+    color: $theme.colors.contentOnColorInverse,
+    borderStyle: 'solid',
+    borderWidth: $theme.sizing.scale0,
+    borderColor: $theme.colors.borderOpaque
+  };
+  const darkBackgroundStyle = {
+    color: $theme.colors.contentOnColor,
+    border: 'none'
+  };
+  return {
+    alignItems: 'stretch',
+    backgroundColor: $backgroundColor,
+    borderRadius: $theme.borders.radius400,
+    cursor: 'pointer',
+    display: 'flex',
+    flexDirection: $imageLayout === IMAGE_LAYOUT.top ? 'column' : 'row',
+    overflow: 'hidden',
+    padding: '0',
+    position: 'relative',
+    textAlign: 'start',
+    width: '100%',
+    boxShadow: `inset 999px 999px 0px ${$theme.colors.backgroundOverlayArt}`,
+    ...($backgroundColorType === BACKGROUND_COLOR_TYPE.light ? lightBackgroundStyle : darkBackgroundStyle),
+    ':focus': {
+      outlineWidth: '3px',
+      outlineStyle: 'solid',
+      outlineColor: $theme.colors.borderAccent,
+      outlineOffset: '-3px'
+    },
+    ':hover:after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      zIndex: '1',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.04)' : 'rgba(255, 255, 255, 0.10)'
+    },
+    ':active:after': {
+      content: '""',
+      width: '100%',
+      height: '100%',
+      zIndex: '1',
+      position: 'absolute',
+      top: '0',
+      left: '0',
+      backgroundColor: $backgroundColorType === BACKGROUND_COLOR_TYPE.light ? 'rgba(0, 0, 0, 0.08)' : 'rgba(255, 255, 255, 0.20)'
+    }
+  };
+});
+StyledRoot.displayName = "StyledRoot";
+export const StyledImage = styled('div', ({
+  $imageLayout = IMAGE_LAYOUT.top,
+  $backgroundPosition = 'center',
+  $src
+}) => {
+  return {
+    backgroundImage: `url(${$src})`,
+    backgroundSize: 'cover',
+    backgroundPosition: $backgroundPosition,
+    ...($imageLayout === IMAGE_LAYOUT.top ? {
+      height: '132px',
+      width: '100%'
+    } : {
+      width: '112px',
+      order: '1'
+    })
+  };
+});
+StyledImage.displayName = "StyledImage";
+export const StyledContentContainer = styled('div', ({
+  $theme
+}) => ({
+  width: '100%',
+  boxSizing: 'border-box',
+  paddingTop: $theme.sizing.scale600,
+  paddingRight: $theme.sizing.scale300,
+  paddingBottom: $theme.sizing.scale600,
+  paddingLeft: $theme.sizing.scale600
+}));
+StyledContentContainer.displayName = "StyledContentContainer";
+export const StyledHeadingContainer = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.HeadingXSmall
+}));
+StyledHeadingContainer.displayName = "StyledHeadingContainer";
+export const StyledParagraphContainer = styled('div', ({
+  $theme
+}) => ({ ...$theme.typography.ParagraphSmall,
+  marginTop: $theme.sizing.scale100
+}));
+StyledParagraphContainer.displayName = "StyledParagraphContainer";

package/es/message-card/types.js

@@ -0,0 +1 @@
+export {};

package/es/message-card/utils.js

@@ -0,0 +1,27 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { colors } from '../tokens';
+import { BACKGROUND_COLOR_TYPE } from './constants';
+const LIGHT_COLORS = new Set([colors.red50, colors.red100, colors.red200, colors.red300, colors.green50, colors.green100, colors.green200, colors.green300, colors.teal50, colors.teal100, colors.teal200, colors.teal300, colors.blue50, colors.blue100, colors.blue200, colors.blue300, colors.cobalt50, colors.cobalt100, colors.cobalt200, colors.purple50, colors.purple100, colors.purple200, colors.purple300, colors.magenta50, colors.magenta100, colors.magenta200, colors.magenta300, colors.brown50, colors.brown100, colors.brown200, colors.brown300, colors.orange50, colors.orange100, colors.orange200, colors.orange300, colors.orange400, colors.lime50, colors.lime100, colors.lime200, colors.lime300, colors.lime400, colors.platinum50, colors.platinum100, colors.platinum200, colors.platinum300, colors.platinum400, colors.yellow50, colors.yellow100, colors.yellow200, colors.yellow300, colors.yellow400, colors.yellow500, colors.white, colors.gray50, colors.gray100, colors.gray200, colors.gray300, colors.gray400]);
+const DARK_COLORS = new Set([colors.red400, colors.red500, colors.red600, colors.red700, colors.green400, colors.green500, colors.green600, colors.green700, colors.teal400, colors.teal500, colors.teal600, colors.teal700, colors.blue400, colors.blue500, colors.blue600, colors.blue700, colors.cobalt300, colors.cobalt400, colors.cobalt500, colors.cobalt600, colors.cobalt700, colors.purple400, colors.purple500, colors.purple600, colors.purple700, colors.magenta400, colors.magenta500, colors.magenta600, colors.magenta700, colors.brown400, colors.brown500, colors.brown600, colors.brown700, colors.orange500, colors.orange600, colors.orange700, colors.lime500, colors.lime600, colors.lime700, colors.platinum500, colors.platinum600, colors.platinum700, colors.platinum800, colors.yellow600, colors.yellow700, colors.gray500, colors.gray600, colors.gray700, colors.gray800, colors.gray900, colors.black]);
+const POOR_CONTRAST_COLORS = new Set([colors.red300, colors.gray500, colors.yellow600]);
+export function getBackgroundColorType(backgroundColor) {
+  if (process.env.NODE_ENV !== "production" && POOR_CONTRAST_COLORS.has(backgroundColor)) {
+    console.warn(`The provided value for backgroundColor, ${backgroundColor}, is not supported because \
+        it does not pass accessibility contrast tests for either white or black text.`);
+  }
+
+  if (LIGHT_COLORS.has(backgroundColor)) {
+    return BACKGROUND_COLOR_TYPE.light;
+  }
+
+  if (DARK_COLORS.has(backgroundColor)) {
+    return BACKGROUND_COLOR_TYPE.dark;
+  }
+
+  return null;
+}

package/es/modal/modal.js

@@ -10,8 +10,6 @@ LICENSE file in the root directory of this source tree.
 */
 
 /* global document */
-
-/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 import { LocaleContext } from '../locale';
@@ -153,7 +151,6 @@ class Modal extends React.Component {
     }
 
     if (this.animateStartTimer) {
-      // eslint-disable-next-line cup/no-undef
       cancelAnimationFrame(this.animateStartTimer);
     }
   }
@@ -169,8 +166,7 @@ class Modal extends React.Component {
 
 
     this.clearTimers();
-    this.disableMountNodeScroll(); // eslint-disable-next-line cup/no-undef
-
+    this.disableMountNodeScroll();
     this.animateStartTimer = requestAnimationFrame(() => {
       this.setState({
         isVisible: true
@@ -219,6 +215,7 @@ class Modal extends React.Component {
     if (mountNode) {
       return mountNode;
     } // Flow thinks body could be null (cast through any)
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
 
     return document.body;
@@ -261,7 +258,8 @@ class Modal extends React.Component {
     }, /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "modal",
       ref: this.rootRef
-    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer, _extends({
+    }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    , _extends({
       ref: this.dialogContainerRef
     }, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
       tabIndex: -1,

package/es/modal/styled-components.js

@@ -43,6 +43,7 @@ export const Root = styled('div', props => {
   };
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export const DialogContainer = styled('div', props => {
   const {
     $animate,
@@ -71,6 +72,7 @@ export const DialogContainer = styled('div', props => {
   };
 });
 DialogContainer.displayName = "DialogContainer";
+DialogContainer.displayName = 'DialogContainer';
 export const Dialog = styled('div', props => {
   const {
     $animate,
@@ -109,6 +111,7 @@ export const Dialog = styled('div', props => {
   };
 });
 Dialog.displayName = "Dialog";
+Dialog.displayName = 'Dialog';
 export const Close = styled('button', props => {
   const {
     $theme,
@@ -158,6 +161,7 @@ export const Close = styled('button', props => {
   };
 });
 Close.displayName = "Close";
+Close.displayName = 'Close';
 export const ModalHeader = styled('div', ({
   $theme
 }) => {
@@ -173,6 +177,7 @@ export const ModalHeader = styled('div', ({
   };
 });
 ModalHeader.displayName = "ModalHeader";
+ModalHeader.displayName = 'ModalHeader';
 export const ModalBody = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -183,6 +188,7 @@ export const ModalBody = styled('div', ({
   marginBottom: $theme.sizing.scale700
 }));
 ModalBody.displayName = "ModalBody";
+ModalBody.displayName = 'ModalBody';
 export const ModalFooter = styled('div', ({
   $theme
 }) => ({ ...$theme.typography.font200,
@@ -193,4 +199,5 @@ export const ModalFooter = styled('div', ({
   paddingBottom: $theme.sizing.scale500,
   textAlign: $theme.direction === 'rtl' ? 'left' : 'right'
 }));
-ModalFooter.displayName = "ModalFooter";
+ModalFooter.displayName = "ModalFooter";
+ModalFooter.displayName = 'ModalFooter';

package/es/pagination/stateful-container.js

@@ -74,5 +74,6 @@ export default class PaginationStatefulContainer extends React.Component {
 
 _defineProperty(PaginationStatefulContainer, "defaultProps", {
   initialState,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   stateReducer: (changeType, changes) => changes
 });

package/es/pagination/stateful-pagination.js

@@ -29,6 +29,7 @@ StatefulPagination.defaultProps = {
   initialState: {
     currentPage: 1
   },
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   stateReducer: (changeType, changes) => changes,
   overrides: {}
 };

package/es/pagination/styled-components.js

@@ -14,6 +14,7 @@ export const StyledRoot = styled('div', ({
   ...$theme.typography.font350
 }));
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledMaxLabel = styled('span', ({
   $theme
 }) => {
@@ -25,6 +26,7 @@ export const StyledMaxLabel = styled('span', ({
   };
 });
 StyledMaxLabel.displayName = "StyledMaxLabel";
+StyledMaxLabel.displayName = 'StyledMaxLabel';
 export const StyledDropdownContainer = styled('div', ({
   $theme,
   $isFocusVisible
@@ -38,4 +40,5 @@ export const StyledDropdownContainer = styled('div', ({
     [marginEndDir]: $theme.sizing.scale300
   };
 });
-StyledDropdownContainer.displayName = "StyledDropdownContainer";
+StyledDropdownContainer.displayName = "StyledDropdownContainer";
+StyledDropdownContainer.displayName = 'StyledDropdownContainer';

package/es/payment-card/styled-components.js

@@ -24,4 +24,5 @@ export const IconWrapper = styled('div', props => {
     alignItems: 'center'
   };
 });
-IconWrapper.displayName = "IconWrapper";
+IconWrapper.displayName = "IconWrapper";
+IconWrapper.displayName = 'IconWrapper';

package/es/phone-input/base-country-picker.js

@@ -27,6 +27,7 @@ CountryPicker.defaultProps = {
   required: defaultProps.required
 };
 const DropdownListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   const {
     children,
     ...rest
@@ -152,7 +153,8 @@ export default function CountryPicker(props) {
   const [Dialcode, dialcodeProps] = getOverrides(overrides.CountrySelectDropdownDialcodeColumn, DefaultDialcodeColumn);
   return /*#__PURE__*/React.createElement(Select, _extends({
     clearable: false,
-    disabled: disabled,
+    disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    ,
     getOptionLabel: ({
       option,
       optionState

package/es/phone-input/country-select-dropdown.js

@@ -63,6 +63,7 @@ function CountrySelectDropdown(props) {
         style
       }) => {
         // resetMenu and getItemLabel should not end up on native html elements
+        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         const {
           item,
           resetMenu,

package/es/phone-input/styled-components.js

@@ -15,6 +15,7 @@ export const StyledPhoneInputRoot = styled('div', {
   display: 'flex'
 });
 StyledPhoneInputRoot.displayName = "StyledPhoneInputRoot";
+StyledPhoneInputRoot.displayName = 'StyledPhoneInputRoot';
 export const StyledFlagContainer = styled('span', ({
   $size = SIZE.default,
   $theme: {
@@ -30,9 +31,10 @@ export const StyledFlagContainer = styled('span', ({
   return {
     fontSize: sizeToFont[$size]
   };
-}); // An override component for the Select's Root styled element
-
+});
 StyledFlagContainer.displayName = "StyledFlagContainer";
+StyledFlagContainer.displayName = 'StyledFlagContainer'; // An override component for the Select's Root styled element
+
 export const StyledRoot = withStyle(SelectStyledRoot, props => {
   // hard coded widths for the flag dropdown anchor
   const sizeToWidth = {
@@ -47,6 +49,7 @@ export const StyledRoot = withStyle(SelectStyledRoot, props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledDialCode = styled('div', ({
   $theme: {
     direction,
@@ -61,11 +64,13 @@ export const StyledDialCode = styled('div', ({
   };
 });
 StyledDialCode.displayName = "StyledDialCode";
+StyledDialCode.displayName = 'StyledDialCode';
 export const StyledCountrySelectContainer = styled('div', {
   display: 'flex',
   alignItems: 'center'
 });
 StyledCountrySelectContainer.displayName = "StyledCountrySelectContainer";
+StyledCountrySelectContainer.displayName = 'StyledCountrySelectContainer';
 export const StyledCountrySelectDropdownContainer = withStyle(StyledList, props => {
   const {
     $height = defaultProps.maxDropdownHeight
@@ -77,6 +82,7 @@ export const StyledCountrySelectDropdownContainer = withStyle(StyledList, props
   };
 });
 StyledCountrySelectDropdownContainer.displayName = "StyledCountrySelectDropdownContainer";
+StyledCountrySelectDropdownContainer.displayName = 'StyledCountrySelectDropdownContainer';
 export const StyledCountrySelectDropdownListItemElement = withStyle(StyledDropdownListItem, {
   paddingTop: 0,
   paddingBottom: 0,
@@ -87,7 +93,9 @@ export const StyledCountrySelectDropdownListItemElement = withStyle(StyledDropdo
   height: '42px'
 });
 StyledCountrySelectDropdownListItemElement.displayName = "StyledCountrySelectDropdownListItemElement";
-export const StyledCountrySelectDropdownListItem = withWrapper(StyledCountrySelectDropdownListItemElement, Styled => function StyledCountrySelectDropdownListItem({
+StyledCountrySelectDropdownListItemElement.displayName = 'StyledCountrySelectDropdownListItemElement';
+export const StyledCountrySelectDropdownListItem = withWrapper(StyledCountrySelectDropdownListItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
+function StyledCountrySelectDropdownListItem({
   item,
   ...restProps
 }) {
@@ -107,6 +115,7 @@ export const StyledCountrySelectDropdownFlagColumn = styled('div', ({
   };
 });
 StyledCountrySelectDropdownFlagColumn.displayName = "StyledCountrySelectDropdownFlagColumn";
+StyledCountrySelectDropdownFlagColumn.displayName = 'StyledCountrySelectDropdownFlagColumn';
 export const StyledCountrySelectDropdownNameColumn = styled('div', ({
   $theme: {
     direction,
@@ -119,6 +128,7 @@ export const StyledCountrySelectDropdownNameColumn = styled('div', ({
   };
 });
 StyledCountrySelectDropdownNameColumn.displayName = "StyledCountrySelectDropdownNameColumn";
+StyledCountrySelectDropdownNameColumn.displayName = 'StyledCountrySelectDropdownNameColumn';
 export const StyledCountrySelectDropdownDialcodeColumn = styled('div', ({
   $theme: {
     direction,
@@ -132,4 +142,5 @@ export const StyledCountrySelectDropdownDialcodeColumn = styled('div', ({
     [marginDir]: 'auto'
   };
 });
-StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
+StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
+StyledCountrySelectDropdownDialcodeColumn.displayName = 'StyledCountrySelectDropdownDialcodeColumn';

package/es/pin-code/styled-components.js

@@ -11,6 +11,7 @@ export const StyledRoot = styled('div', {
   alignItems: 'center'
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledInputOverrideRoot = withStyle(StyledInputRoot, ({
   $size = SIZE.default
 }) => {
@@ -26,9 +27,11 @@ export const StyledInputOverrideRoot = withStyle(StyledInputRoot, ({
   };
 });
 StyledInputOverrideRoot.displayName = "StyledInputOverrideRoot";
+StyledInputOverrideRoot.displayName = 'StyledInputOverrideRoot';
 export const StyledInputOverrideInput = withStyle(StyledInputInput, {
   textAlign: 'center',
   paddingLeft: '0',
   paddingRight: '0'
 });
-StyledInputOverrideInput.displayName = "StyledInputOverrideInput";
+StyledInputOverrideInput.displayName = "StyledInputOverrideInput";
+StyledInputOverrideInput.displayName = 'StyledInputOverrideInput';

package/es/popover/popover.js

@@ -128,13 +128,11 @@ class PopoverInner extends React.Component {
       const popper = this.popperRef.current;
       const anchor = this.anchorRef.current; // Ignore document click if it came from popover or anchor
 
-      if (!popper || popper === target || // eslint-disable-next-line cup/no-undef
-      target instanceof Node && popper.contains(target)) {
+      if (!popper || popper === target || target instanceof Node && popper.contains(target)) {
         return;
       }
 
-      if (!anchor || anchor === target || // eslint-disable-next-line cup/no-undef
-      target instanceof Node && popper.contains(target)) {
+      if (!anchor || anchor === target || target instanceof Node && popper.contains(target)) {
         return;
       }
 
@@ -153,7 +151,7 @@ class PopoverInner extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     this.init(prevProps, prevState);
 
-    if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+    if (this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip && this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
       this.setState({
         autoFocusAfterPositioning: true
       });
@@ -272,10 +270,6 @@ class PopoverInner extends React.Component {
       isOpen
     } = this.props;
     const anchorProps = {
-      'aria-haspopup': true,
-      'aria-expanded': isOpen ? true : false,
-      // @ts-expect-error todo(flow->ts): should it be here?
-      key: 'popover-anchor',
       ref: this.anchorRef
     };
     const popoverId = this.getPopoverIdAttr();
@@ -283,6 +277,8 @@ class PopoverInner extends React.Component {
     if (this.isAccessibilityTypeMenu()) {
       const relationAttr = this.isClickTrigger() ? 'aria-controls' : 'aria-owns';
       anchorProps[relationAttr] = isOpen ? popoverId : null;
+      anchorProps['aria-haspopup'] = true;
+      anchorProps['aria-expanded'] = Boolean(isOpen);
     } else if (this.isAccessibilityTypeTooltip()) {
       anchorProps.id = this.getAnchorIdAttr();
       anchorProps['aria-describedby'] = isOpen ? popoverId : null;
@@ -373,7 +369,9 @@ class PopoverInner extends React.Component {
       return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
     }
 
-    return /*#__PURE__*/React.createElement("span", anchorProps, anchor);
+    return /*#__PURE__*/React.createElement("span", _extends({
+      key: "popover-anchor"
+    }, anchorProps), anchor);
   }
 
   renderPopover(renderedContent) {
@@ -446,7 +444,7 @@ class PopoverInner extends React.Component {
           },
           onPopperUpdate: this.onPopperUpdate,
           placement: this.state.placement
-        }, this.props.focusLock ? /*#__PURE__*/React.createElement(FocusLock, {
+        }, this.props.focusLock && this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip ? /*#__PURE__*/React.createElement(FocusLock, {
           disabled: !this.props.focusLock,
           noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
           ,

package/es/popover/stateful-container.js

@@ -8,6 +8,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { ACCESSIBILITY_TYPE, PLACEMENT, STATE_CHANGE_TYPE, TRIGGER_TYPE, POPOVER_MARGIN } from './constants';
+import { isFocusVisible } from '../utils/focusVisible';
 
 const defaultStateReducer = (type, nextState) => nextState;
 
@@ -57,7 +58,9 @@ class StatefulContainer extends React.Component {
         this.props.onFocus(e);
       }
 
-      this.open();
+      if (isFocusVisible(e)) {
+        this.open();
+      }
     });
 
     _defineProperty(this, "onMouseEnter", e => {

package/es/popover/styled-components.js

@@ -56,11 +56,12 @@ export function getBodyStyles(props) {
   };
 }
 export const Body = styled('div', getBodyStyles);
+Body.displayName = "Body";
+Body.displayName = 'Body';
 /**
  * Arrow shown between the popover and the anchor element
  */
 
-Body.displayName = "Body";
 export function getArrowStyles(props) {
   const {
     $arrowOffset,
@@ -78,6 +79,8 @@ export function getArrowStyles(props) {
   };
 }
 export const Arrow = styled('div', getArrowStyles);
+Arrow.displayName = "Arrow";
+Arrow.displayName = 'Arrow';
 /**
  * Extra div that holds the popover content. This extra element
  * is needed for the arrow–the arrow is just a 45deg rotated div,
@@ -85,7 +88,6 @@ export const Arrow = styled('div', getArrowStyles);
  * clips the part of the arrow that extends into the popover.
  */
 
-Arrow.displayName = "Arrow";
 export function getInnerStyles({
   $theme
 }) {
@@ -100,13 +102,14 @@ export function getInnerStyles({
   };
 }
 export const Inner = styled('div', getInnerStyles);
+Inner.displayName = "Inner";
+Inner.displayName = 'Inner';
 /**
  * A drop-in component that provides the recommended padding
  * for popovers. Mostly a convenience for users so they don't
  * have to define this themselves.
  */
 
-Inner.displayName = "Inner";
 export const Padding = styled('div', {
   paddingLeft: '12px',
   paddingTop: '12px',
@@ -114,7 +117,9 @@ export const Padding = styled('div', {
   paddingBottom: '12px'
 });
 Padding.displayName = "Padding";
+Padding.displayName = 'Padding';
 export const Hidden = styled('div', {
   display: 'none'
 });
-Hidden.displayName = "Hidden";
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';