baseui 0.0.0-alpha-3479e57 → 0.0.0-alpha-e79754d

package/menu/styled-components.js

@@ -56,7 +56,6 @@ var StyledList = (0, _styles.styled)('ul', function (_ref) {
 });
 exports.StyledList = StyledList;
 StyledList.displayName = "StyledList";
-StyledList.displayName = 'StyledList';
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -105,7 +104,6 @@ var StyledEmptyState = (0, _styles.styled)('li', function (props) {
 });
 exports.StyledEmptyState = StyledEmptyState;
 StyledEmptyState.displayName = "StyledEmptyState";
-StyledEmptyState.displayName = 'StyledEmptyState';
 var StyledOptgroupHeader = (0, _styles.styled)('li', function (props) {
   var paddingX = props.$theme.sizing.scale300;
   var paddingY = props.$theme.sizing.scale200;
@@ -119,7 +117,6 @@ var StyledOptgroupHeader = (0, _styles.styled)('li', function (props) {
 });
 exports.StyledOptgroupHeader = StyledOptgroupHeader;
 StyledOptgroupHeader.displayName = "StyledOptgroupHeader";
-StyledOptgroupHeader.displayName = 'StyledOptgroupHeader';
 var StyledListItemAnchor = (0, _styles.styled)('a', function (props) {
   return {
     display: 'block',
@@ -128,7 +125,6 @@ var StyledListItemAnchor = (0, _styles.styled)('a', function (props) {
 });
 exports.StyledListItemAnchor = StyledListItemAnchor;
 StyledListItemAnchor.displayName = "StyledListItemAnchor";
-StyledListItemAnchor.displayName = 'StyledListItemAnchor';
 var StyledListItemElement = (0, _styles.styled)('li', function (props) {
   var $disabled = props.$disabled,
       $theme = props.$theme,
@@ -154,16 +150,13 @@ var StyledListItemElement = (0, _styles.styled)('li', function (props) {
 });
 exports.StyledListItemElement = StyledListItemElement;
 StyledListItemElement.displayName = "StyledListItemElement";
-StyledListItemElement.displayName = 'StyledListItemElement';
 var StyledListItem = (0, _styles.withWrapper)(StyledListItemElement, function (Styled) {
-  return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
-    function StyledListItem(_ref2) {
-      var item = _ref2.item,
-          restProps = _objectWithoutProperties(_ref2, _excluded);
+  return function StyledListItem(_ref2) {
+    var item = _ref2.item,
+        restProps = _objectWithoutProperties(_ref2, _excluded);
 
-      return /*#__PURE__*/React.createElement(Styled, restProps);
-    }
-  );
+    return /*#__PURE__*/React.createElement(Styled, restProps);
+  };
 });
 exports.StyledListItem = StyledListItem;
 var StyledListItemProfile = (0, _styles.styled)('li', function (_ref3) {
@@ -187,7 +180,6 @@ var StyledListItemProfile = (0, _styles.styled)('li', function (_ref3) {
 });
 exports.StyledListItemProfile = StyledListItemProfile;
 StyledListItemProfile.displayName = "StyledListItemProfile";
-StyledListItemProfile.displayName = 'StyledListItemProfile';
 var StyledProfileImgContainer = (0, _styles.styled)('div', {
   width: '60px',
   height: '60px',
@@ -197,7 +189,6 @@ var StyledProfileImgContainer = (0, _styles.styled)('div', {
 });
 exports.StyledProfileImgContainer = StyledProfileImgContainer;
 StyledProfileImgContainer.displayName = "StyledProfileImgContainer";
-StyledProfileImgContainer.displayName = 'StyledProfileImgContainer';
 var StyledProfileImg = (0, _styles.styled)('img', {
   width: '100%',
   height: '100%',
@@ -208,7 +199,6 @@ var StyledProfileImg = (0, _styles.styled)('img', {
 });
 exports.StyledProfileImg = StyledProfileImg;
 StyledProfileImg.displayName = "StyledProfileImg";
-StyledProfileImg.displayName = 'StyledProfileImg';
 var StyledProfileLabelsContainer = (0, _styles.styled)('div', function (_ref4) {
   var _ref4$$theme = _ref4.$theme,
       direction = _ref4$$theme.direction,
@@ -225,7 +215,6 @@ var StyledProfileLabelsContainer = (0, _styles.styled)('div', function (_ref4) {
 });
 exports.StyledProfileLabelsContainer = StyledProfileLabelsContainer;
 StyledProfileLabelsContainer.displayName = "StyledProfileLabelsContainer";
-StyledProfileLabelsContainer.displayName = 'StyledProfileLabelsContainer';
 var StyledProfileTitle = (0, _styles.styled)('h6', function (_ref5) {
   var $theme = _ref5.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font350), {}, {
@@ -238,7 +227,6 @@ var StyledProfileTitle = (0, _styles.styled)('h6', function (_ref5) {
 });
 exports.StyledProfileTitle = StyledProfileTitle;
 StyledProfileTitle.displayName = "StyledProfileTitle";
-StyledProfileTitle.displayName = 'StyledProfileTitle';
 var StyledProfileSubtitle = (0, _styles.styled)('p', function (_ref6) {
   var $theme = _ref6.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
@@ -251,7 +239,6 @@ var StyledProfileSubtitle = (0, _styles.styled)('p', function (_ref6) {
 });
 exports.StyledProfileSubtitle = StyledProfileSubtitle;
 StyledProfileSubtitle.displayName = "StyledProfileSubtitle";
-StyledProfileSubtitle.displayName = 'StyledProfileSubtitle';
 var StyledProfileBody = (0, _styles.styled)('p', function (_ref7) {
   var $theme = _ref7.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font100), {}, {
@@ -263,5 +250,4 @@ var StyledProfileBody = (0, _styles.styled)('p', function (_ref7) {
   });
 });
 exports.StyledProfileBody = StyledProfileBody;
-StyledProfileBody.displayName = "StyledProfileBody";
-StyledProfileBody.displayName = 'StyledProfileBody';
+StyledProfileBody.displayName = "StyledProfileBody";

package/modal/modal.js

@@ -217,6 +217,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       }
 
       if (this.animateStartTimer) {
+        // eslint-disable-next-line cup/no-undef
         cancelAnimationFrame(this.animateStartTimer);
       }
     }
@@ -235,7 +236,8 @@ var Modal = /*#__PURE__*/function (_React$Component) {
 
 
       this.clearTimers();
-      this.disableMountNodeScroll();
+      this.disableMountNodeScroll(); // eslint-disable-next-line cup/no-undef
+
       this.animateStartTimer = requestAnimationFrame(function () {
         _this2.setState({
           isVisible: true
@@ -285,7 +287,6 @@ var Modal = /*#__PURE__*/function (_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;
@@ -346,8 +347,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
         }, /*#__PURE__*/React.createElement(Root, _extends({
           "data-baseweb": "modal",
           ref: _this3.rootRef
-        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer // eslint-disable-next-line @typescript-eslint/no-explicit-any
-        , _extends({
+        }, sharedProps, rootProps), /*#__PURE__*/React.createElement(DialogContainer, _extends({
           ref: _this3.dialogContainerRef
         }, sharedProps, dialogContainerProps), /*#__PURE__*/React.createElement(Dialog, _extends({
           tabIndex: -1,

package/modal/modal.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 /* global document */
-
+/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import FocusLock from 'react-focus-lock';
 
@@ -148,6 +148,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
       clearTimeout(this.animateOutTimer);
     }
     if (this.animateStartTimer) {
+      // eslint-disable-next-line cup/no-undef
       cancelAnimationFrame(this.animateStartTimer);
     }
   }
@@ -165,6 +166,7 @@ class Modal extends React.Component<ModalPropsT, ModalStateT> {
 
     this.disableMountNodeScroll();
 
+    // eslint-disable-next-line cup/no-undef
     this.animateStartTimer = requestAnimationFrame(() => {
       this.setState({ isVisible: true });
     });

package/modal/styled-components.js

@@ -50,7 +50,6 @@ var Root = (0, _styles.styled)('div', function (props) {
 });
 exports.Root = Root;
 Root.displayName = "Root";
-Root.displayName = 'Root';
 var DialogContainer = (0, _styles.styled)('div', function (props) {
   var $animate = props.$animate,
       $isOpen = props.$isOpen,
@@ -77,7 +76,6 @@ var DialogContainer = (0, _styles.styled)('div', function (props) {
 });
 exports.DialogContainer = DialogContainer;
 DialogContainer.displayName = "DialogContainer";
-DialogContainer.displayName = 'DialogContainer';
 var Dialog = (0, _styles.styled)('div', function (props) {
   var $animate = props.$animate,
       $isOpen = props.$isOpen,
@@ -115,7 +113,6 @@ var Dialog = (0, _styles.styled)('div', function (props) {
 });
 exports.Dialog = Dialog;
 Dialog.displayName = "Dialog";
-Dialog.displayName = 'Dialog';
 var Close = (0, _styles.styled)('button', function (props) {
   var _ref;
 
@@ -159,7 +156,6 @@ var Close = (0, _styles.styled)('button', function (props) {
 });
 exports.Close = Close;
 Close.displayName = "Close";
-Close.displayName = 'Close';
 var ModalHeader = (0, _styles.styled)('div', function (_ref2) {
   var _objectSpread2;
 
@@ -174,7 +170,6 @@ var ModalHeader = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.ModalHeader = ModalHeader;
 ModalHeader.displayName = "ModalHeader";
-ModalHeader.displayName = 'ModalHeader';
 var ModalBody = (0, _styles.styled)('div', function (_ref3) {
   var $theme = _ref3.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
@@ -187,7 +182,6 @@ var ModalBody = (0, _styles.styled)('div', function (_ref3) {
 });
 exports.ModalBody = ModalBody;
 ModalBody.displayName = "ModalBody";
-ModalBody.displayName = 'ModalBody';
 var ModalFooter = (0, _styles.styled)('div', function (_ref4) {
   var $theme = _ref4.$theme;
   return _objectSpread(_objectSpread({}, $theme.typography.font200), {}, {
@@ -200,5 +194,4 @@ var ModalFooter = (0, _styles.styled)('div', function (_ref4) {
   });
 });
 exports.ModalFooter = ModalFooter;
-ModalFooter.displayName = "ModalFooter";
-ModalFooter.displayName = 'ModalFooter';
+ModalFooter.displayName = "ModalFooter";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "0.0.0-alpha-3479e57",
+  "version": "0.0.0-alpha-e79754d",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -36,7 +36,7 @@
     "e2e:serve": "static-server build-ladle --port 8080",
     "e2e:test": "playwright test",
     "e2e:test:ci": "PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn e2e:test",
-    "vrt": "playwright test --config playwright-vrt.config.ts",
+    "vrt": "playwright test --config playwright-vrt.config.js",
     "vrt:docker:run": "docker-compose run e2e-test bash -c 'PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn vrt'",
     "vrt:docker:update": "docker-compose run e2e-test bash -c 'PUPPETEER_TARGET_URL=http://e2e-server:8080 yarn vrt --update'",
     "vrt:ci": "PUPPETEER_TARGET_URL=http://e2e-server:8080 node ./vrt/ci.js",
@@ -53,7 +53,7 @@
     "documentation:build": "run-s prebuild build:cjs next:build next:export",
     "documentation:serve": "static-server public --port 8081",
     "next:dev": "next dev documentation-site",
-    "next:build": "NODE_OPTIONS=--max_old_space_size=8192 next build documentation-site",
+    "next:build": "NODE_OPTIONS=--max_old_space_size=4096 next build documentation-site",
     "next:export": "next export documentation-site -o public",
     "tsc": "tsc",
     "validate:examples": "node ./scripts/validate-examples.js"
@@ -85,12 +85,12 @@
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
     "@dubstep/core": "^3.5.3",
-    "@ladle/react": "^2.0.2",
+    "@ladle/react": "^1.0.1",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
-    "@playwright/test": "^1.24.0",
+    "@playwright/test": "^1.22.2",
     "@svgr/cli": "^4.3.2",
-    "@testing-library/dom": "^8.17.1",
+    "@testing-library/dom": "^8.13.0",
     "@testing-library/jest-dom": "^5.16.3",
     "@testing-library/react": "^12.1.4",
     "@testing-library/user-event": "^13.5.0",
@@ -117,7 +117,7 @@
     "@typescript-eslint/parser": "^5.26.0",
     "@zeit/next-css": "^1.0.1",
     "@zeit/next-mdx": "^1.2.0",
-    "axe-core": "^4.4.3",
+    "axe-core": "^4.2.2",
     "babel-core": "^7.0.0-bridge.0",
     "babel-eslint": "10.1.0",
     "babel-jest": "^24.0.0",
@@ -145,6 +145,7 @@
     "eslint-plugin-react": "^7.27.0",
     "eslint-plugin-react-hooks": "3.0.0",
     "flow-bin": "0.131.0",
+    "flow-remove-types": "^2.179.0",
     "globby": "^10.0.1",
     "husky": "^3.0.0",
     "isomorphic-fetch": "^2.2.1",
@@ -166,7 +167,7 @@
     "node-fetch": "^2.6.1",
     "now": "16.5.2",
     "npm-run-all": "^4.1.5",
-    "playwright": "^1.24.0",
+    "playwright": "^1.22.2",
     "prettier": "^2.5.1",
     "pretty-proptypes": "^1.0.5",
     "pretty-quick": "^1.4.1",
@@ -186,6 +187,7 @@
     "react-view": "^2.3.3",
     "react-vis": "^1.11.6",
     "remove-flow-types-loader": "^1.1.0",
+    "rollup-pluginutils": "^2.8.2",
     "semver": "^6.2.0",
     "shx": "^0.3.2",
     "static-server": "^2.2.1",
@@ -244,7 +246,7 @@
     }
   },
   "volta": {
-    "node": "16.16.0",
+    "node": "14.15.4",
     "yarn": "1.19.1"
   },
   "engines": {

package/pagination/stateful-container.js

@@ -115,7 +115,6 @@ exports.default = PaginationStatefulContainer;
 
 _defineProperty(PaginationStatefulContainer, "defaultProps", {
   initialState: initialState,
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   stateReducer: function stateReducer(changeType, changes) {
     return changes;
   }

package/pagination/stateful-pagination.js

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

package/pagination/styled-components.js

@@ -23,7 +23,6 @@ var StyledRoot = (0, _styles.styled)('div', function (_ref) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 var StyledMaxLabel = (0, _styles.styled)('span', function (_ref2) {
   var _ref3;
 
@@ -34,7 +33,6 @@ var StyledMaxLabel = (0, _styles.styled)('span', function (_ref2) {
 });
 exports.StyledMaxLabel = StyledMaxLabel;
 StyledMaxLabel.displayName = "StyledMaxLabel";
-StyledMaxLabel.displayName = 'StyledMaxLabel';
 var StyledDropdownContainer = (0, _styles.styled)('div', function (_ref4) {
   var _ref5;
 
@@ -48,5 +46,4 @@ var StyledDropdownContainer = (0, _styles.styled)('div', function (_ref4) {
   }, _defineProperty(_ref5, marginStartDir, $theme.sizing.scale600), _defineProperty(_ref5, marginEndDir, $theme.sizing.scale300), _ref5;
 });
 exports.StyledDropdownContainer = StyledDropdownContainer;
-StyledDropdownContainer.displayName = "StyledDropdownContainer";
-StyledDropdownContainer.displayName = 'StyledDropdownContainer';
+StyledDropdownContainer.displayName = "StyledDropdownContainer";

package/payment-card/styled-components.js

@@ -20,5 +20,4 @@ var IconWrapper = (0, _styles.styled)('div', function (props) {
   return _ref = {}, _defineProperty(_ref, $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft', margin[$size]), _defineProperty(_ref, "height", '100%'), _defineProperty(_ref, "display", 'flex'), _defineProperty(_ref, "alignItems", 'center'), _ref;
 });
 exports.IconWrapper = IconWrapper;
-IconWrapper.displayName = "IconWrapper";
-IconWrapper.displayName = 'IconWrapper';
+IconWrapper.displayName = "IconWrapper";

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

@@ -68,7 +68,6 @@ CountryPicker.defaultProps = {
 };
 
 var DropdownListItem = /*#__PURE__*/_react.default.forwardRef(function (props, ref) {
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
   var children = props.children,
       rest = _objectWithoutProperties(props, _excluded);
 
@@ -222,8 +221,7 @@ function CountryPicker(props) {
 
   return /*#__PURE__*/_react.default.createElement(Select, _extends({
     clearable: false,
-    disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    ,
+    disabled: disabled,
     getOptionLabel: function getOptionLabel(_ref) {
       var option = _ref.option,
           optionState = _ref.optionState;

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

@@ -129,7 +129,6 @@ function CountrySelectDropdown(props) {
             style = _ref2.style;
 
         // resetMenu and getItemLabel should not end up on native html elements
-        // eslint-disable-next-line @typescript-eslint/no-unused-vars
         var _children$index$props = // @ts-expect-error todo(flow->ts) type issue introduced in react 17
         children[index].props,
             item = _children$index$props.item,

package/phone-input/styled-components.js

@@ -39,7 +39,6 @@ var StyledPhoneInputRoot = (0, _styles.styled)('div', {
 });
 exports.StyledPhoneInputRoot = StyledPhoneInputRoot;
 StyledPhoneInputRoot.displayName = "StyledPhoneInputRoot";
-StyledPhoneInputRoot.displayName = 'StyledPhoneInputRoot';
 var StyledFlagContainer = (0, _styles.styled)('span', function (_ref) {
   var _sizeToFont;
 
@@ -50,11 +49,10 @@ var StyledFlagContainer = (0, _styles.styled)('span', function (_ref) {
   return {
     fontSize: sizeToFont[$size]
   };
-});
+}); // An override component for the Select's Root styled element
+
 exports.StyledFlagContainer = StyledFlagContainer;
 StyledFlagContainer.displayName = "StyledFlagContainer";
-StyledFlagContainer.displayName = 'StyledFlagContainer'; // An override component for the Select's Root styled element
-
 var StyledRoot = (0, _styles.withStyle)(_select.StyledRoot, function (props) {
   var _sizeToWidth;
 
@@ -67,7 +65,6 @@ var StyledRoot = (0, _styles.withStyle)(_select.StyledRoot, function (props) {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 var StyledDialCode = (0, _styles.styled)('div', function (_ref2) {
   var _ref3;
 
@@ -79,14 +76,12 @@ var StyledDialCode = (0, _styles.styled)('div', function (_ref2) {
 });
 exports.StyledDialCode = StyledDialCode;
 StyledDialCode.displayName = "StyledDialCode";
-StyledDialCode.displayName = 'StyledDialCode';
 var StyledCountrySelectContainer = (0, _styles.styled)('div', {
   display: 'flex',
   alignItems: 'center'
 });
 exports.StyledCountrySelectContainer = StyledCountrySelectContainer;
 StyledCountrySelectContainer.displayName = "StyledCountrySelectContainer";
-StyledCountrySelectContainer.displayName = 'StyledCountrySelectContainer';
 var StyledCountrySelectDropdownContainer = (0, _styles.withStyle)(_menu.StyledList, function (props) {
   var _props$$height = props.$height,
       $height = _props$$height === void 0 ? _defaultProps.default.maxDropdownHeight : _props$$height;
@@ -98,7 +93,6 @@ var StyledCountrySelectDropdownContainer = (0, _styles.withStyle)(_menu.StyledLi
 });
 exports.StyledCountrySelectDropdownContainer = StyledCountrySelectDropdownContainer;
 StyledCountrySelectDropdownContainer.displayName = "StyledCountrySelectDropdownContainer";
-StyledCountrySelectDropdownContainer.displayName = 'StyledCountrySelectDropdownContainer';
 var StyledCountrySelectDropdownListItemElement = (0, _styles.withStyle)(_select.StyledDropdownListItem, {
   paddingTop: 0,
   paddingBottom: 0,
@@ -110,16 +104,13 @@ var StyledCountrySelectDropdownListItemElement = (0, _styles.withStyle)(_select.
 });
 exports.StyledCountrySelectDropdownListItemElement = StyledCountrySelectDropdownListItemElement;
 StyledCountrySelectDropdownListItemElement.displayName = "StyledCountrySelectDropdownListItemElement";
-StyledCountrySelectDropdownListItemElement.displayName = 'StyledCountrySelectDropdownListItemElement';
 var StyledCountrySelectDropdownListItem = (0, _styles.withWrapper)(StyledCountrySelectDropdownListItemElement, function (Styled) {
-  return (// eslint-disable-next-line @typescript-eslint/no-unused-vars
-    function StyledCountrySelectDropdownListItem(_ref4) {
-      var item = _ref4.item,
-          restProps = _objectWithoutProperties(_ref4, _excluded);
-
-      return /*#__PURE__*/React.createElement(Styled, restProps);
-    }
-  );
+  return function StyledCountrySelectDropdownListItem(_ref4) {
+    var item = _ref4.item,
+        restProps = _objectWithoutProperties(_ref4, _excluded);
+
+    return /*#__PURE__*/React.createElement(Styled, restProps);
+  };
 });
 exports.StyledCountrySelectDropdownListItem = StyledCountrySelectDropdownListItem;
 var StyledCountrySelectDropdownFlagColumn = (0, _styles.styled)('div', function (_ref5) {
@@ -133,7 +124,6 @@ var StyledCountrySelectDropdownFlagColumn = (0, _styles.styled)('div', function
 });
 exports.StyledCountrySelectDropdownFlagColumn = StyledCountrySelectDropdownFlagColumn;
 StyledCountrySelectDropdownFlagColumn.displayName = "StyledCountrySelectDropdownFlagColumn";
-StyledCountrySelectDropdownFlagColumn.displayName = 'StyledCountrySelectDropdownFlagColumn';
 var StyledCountrySelectDropdownNameColumn = (0, _styles.styled)('div', function (_ref7) {
   var _ref7$$theme = _ref7.$theme,
       direction = _ref7$$theme.direction,
@@ -143,7 +133,6 @@ var StyledCountrySelectDropdownNameColumn = (0, _styles.styled)('div', function
 });
 exports.StyledCountrySelectDropdownNameColumn = StyledCountrySelectDropdownNameColumn;
 StyledCountrySelectDropdownNameColumn.displayName = "StyledCountrySelectDropdownNameColumn";
-StyledCountrySelectDropdownNameColumn.displayName = 'StyledCountrySelectDropdownNameColumn';
 var StyledCountrySelectDropdownDialcodeColumn = (0, _styles.styled)('div', function (_ref9) {
   var _ref10;
 
@@ -155,5 +144,4 @@ var StyledCountrySelectDropdownDialcodeColumn = (0, _styles.styled)('div', funct
   return _ref10 = {}, _defineProperty(_ref10, paddingDir, sizing.scale600), _defineProperty(_ref10, marginDir, 'auto'), _ref10;
 });
 exports.StyledCountrySelectDropdownDialcodeColumn = StyledCountrySelectDropdownDialcodeColumn;
-StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";
-StyledCountrySelectDropdownDialcodeColumn.displayName = 'StyledCountrySelectDropdownDialcodeColumn';
+StyledCountrySelectDropdownDialcodeColumn.displayName = "StyledCountrySelectDropdownDialcodeColumn";

package/pin-code/styled-components.js

@@ -17,7 +17,6 @@ var StyledRoot = (0, _styles.styled)('div', {
 });
 exports.StyledRoot = StyledRoot;
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 var StyledInputOverrideRoot = (0, _styles.withStyle)(_input.StyledRoot, function (_ref) {
   var _SIZE$mini$SIZE$compa;
 
@@ -31,12 +30,10 @@ var StyledInputOverrideRoot = (0, _styles.withStyle)(_input.StyledRoot, function
 });
 exports.StyledInputOverrideRoot = StyledInputOverrideRoot;
 StyledInputOverrideRoot.displayName = "StyledInputOverrideRoot";
-StyledInputOverrideRoot.displayName = 'StyledInputOverrideRoot';
 var StyledInputOverrideInput = (0, _styles.withStyle)(_input.StyledInput, {
   textAlign: 'center',
   paddingLeft: '0',
   paddingRight: '0'
 });
 exports.StyledInputOverrideInput = StyledInputOverrideInput;
-StyledInputOverrideInput.displayName = "StyledInputOverrideInput";
-StyledInputOverrideInput.displayName = 'StyledInputOverrideInput';
+StyledInputOverrideInput.displayName = "StyledInputOverrideInput";

package/popover/popover.js

@@ -184,11 +184,13 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       var popper = _this.popperRef.current;
       var anchor = _this.anchorRef.current; // Ignore document click if it came from popover or anchor
 
-      if (!popper || popper === target || target instanceof Node && popper.contains(target)) {
+      if (!popper || popper === target || // eslint-disable-next-line cup/no-undef
+      target instanceof Node && popper.contains(target)) {
         return;
       }
 
-      if (!anchor || anchor === target || target instanceof Node && popper.contains(target)) {
+      if (!anchor || anchor === target || // eslint-disable-next-line cup/no-undef
+      target instanceof Node && popper.contains(target)) {
         return;
       }
 
@@ -212,7 +214,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function componentDidUpdate(prevProps, prevState) {
       this.init(prevProps, prevState);
 
-      if (this.props.accessibilityType !== _constants.ACCESSIBILITY_TYPE.tooltip && this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
+      if (this.props.autoFocus && !this.state.autoFocusAfterPositioning && this.popperRef.current !== null && this.popperRef.current.getBoundingClientRect().top > 0) {
         this.setState({
           autoFocusAfterPositioning: true
         });
@@ -344,6 +346,10 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
     value: function getAnchorProps() {
       var isOpen = this.props.isOpen;
       var 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
       };
       var popoverId = this.getPopoverIdAttr();
@@ -351,8 +357,6 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
       if (this.isAccessibilityTypeMenu()) {
         var 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;
@@ -380,6 +384,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         bodyProps.id = popoverId;
       } else if (this.isAccessibilityTypeTooltip()) {
         bodyProps.id = popoverId;
+        bodyProps.role = 'tooltip';
       }
 
       if (this.isHoverTrigger()) {
@@ -443,9 +448,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
         return /*#__PURE__*/React.cloneElement(anchor, anchorProps);
       }
 
-      return /*#__PURE__*/React.createElement("span", _extends({
-        key: "popover-anchor"
-      }, anchorProps), anchor);
+      return /*#__PURE__*/React.createElement("span", anchorProps, anchor);
     }
   }, {
     key: "renderPopover",
@@ -525,7 +528,7 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
             popperOptions: _objectSpread(_objectSpread({}, defaultPopperOptions), this.props.popperOptions),
             onPopperUpdate: this.onPopperUpdate,
             placement: this.state.placement
-          }, this.props.focusLock && this.props.accessibilityType !== _constants.ACCESSIBILITY_TYPE.tooltip ? /*#__PURE__*/React.createElement(_reactFocusLock.default, {
+          }, this.props.focusLock ? /*#__PURE__*/React.createElement(_reactFocusLock.default, {
             disabled: !this.props.focusLock,
             noFocusGuards: false // see popover-focus-loop.scenario.js for why hover cannot return focus
             ,

package/popover/popover.js.flow

@@ -240,10 +240,20 @@ class PopoverInner extends React.Component<PopoverPropsT, PopoverPrivateStateT>
     const popper = this.popperRef.current;
     const anchor = this.anchorRef.current;
     // Ignore document click if it came from popover or anchor
-    if (!popper || popper === target || (target instanceof Node && popper.contains(target))) {
+    if (
+      !popper ||
+      popper === target ||
+      // eslint-disable-next-line cup/no-undef
+      (target instanceof Node && popper.contains(target))
+    ) {
       return;
     }
-    if (!anchor || anchor === target || (target instanceof Node && popper.contains(target))) {
+    if (
+      !anchor ||
+      anchor === target ||
+      // eslint-disable-next-line cup/no-undef
+      (target instanceof Node && popper.contains(target))
+    ) {
       return;
     }
     if (this.props.onClickOutside) {

package/popover/styled-components.js

@@ -65,13 +65,13 @@ function getBodyStyles(props) {
 }
 
 var Body = (0, _styles.styled)('div', getBodyStyles);
-exports.Body = Body;
-Body.displayName = "Body";
-Body.displayName = 'Body';
 /**
  * Arrow shown between the popover and the anchor element
  */
 
+exports.Body = Body;
+Body.displayName = "Body";
+
 function getArrowStyles(props) {
   var $arrowOffset = props.$arrowOffset,
       $placement = props.$placement,
@@ -87,9 +87,6 @@ function getArrowStyles(props) {
 }
 
 var Arrow = (0, _styles.styled)('div', getArrowStyles);
-exports.Arrow = Arrow;
-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,
@@ -97,6 +94,9 @@ Arrow.displayName = 'Arrow';
  * clips the part of the arrow that extends into the popover.
  */
 
+exports.Arrow = Arrow;
+Arrow.displayName = "Arrow";
+
 function getInnerStyles(_ref) {
   var $theme = _ref.$theme;
   return {
@@ -111,15 +111,14 @@ function getInnerStyles(_ref) {
 }
 
 var Inner = (0, _styles.styled)('div', getInnerStyles);
-exports.Inner = Inner;
-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.
  */
 
+exports.Inner = Inner;
+Inner.displayName = "Inner";
 var Padding = (0, _styles.styled)('div', {
   paddingLeft: '12px',
   paddingTop: '12px',
@@ -128,10 +127,8 @@ var Padding = (0, _styles.styled)('div', {
 });
 exports.Padding = Padding;
 Padding.displayName = "Padding";
-Padding.displayName = 'Padding';
 var Hidden = (0, _styles.styled)('div', {
   display: 'none'
 });
 exports.Hidden = Hidden;
-Hidden.displayName = "Hidden";
-Hidden.displayName = 'Hidden';
+Hidden.displayName = "Hidden";