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

package/es/popover/popover.js

@@ -128,11 +128,13 @@ 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 || 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;
       }
 
@@ -151,7 +153,7 @@ class PopoverInner extends React.Component {
   componentDidUpdate(prevProps, prevState) {
     this.init(prevProps, prevState);
 
-    if (this.props.accessibilityType !== 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
       });
@@ -270,6 +272,10 @@ 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();
@@ -277,8 +283,6 @@ 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;
@@ -305,6 +309,7 @@ class PopoverInner extends React.Component {
       bodyProps.id = popoverId;
     } else if (this.isAccessibilityTypeTooltip()) {
       bodyProps.id = popoverId;
+      bodyProps.role = 'tooltip';
     }
 
     if (this.isHoverTrigger()) {
@@ -368,9 +373,7 @@ class PopoverInner extends 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);
   }
 
   renderPopover(renderedContent) {
@@ -443,7 +446,7 @@ class PopoverInner extends React.Component {
           },
           onPopperUpdate: this.onPopperUpdate,
           placement: this.state.placement
-        }, this.props.focusLock && this.props.accessibilityType !== ACCESSIBILITY_TYPE.tooltip ? /*#__PURE__*/React.createElement(FocusLock, {
+        }, this.props.focusLock ? /*#__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/styled-components.js

@@ -56,12 +56,11 @@ 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,
@@ -79,8 +78,6 @@ 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,
@@ -88,6 +85,7 @@ Arrow.displayName = 'Arrow';
  * clips the part of the arrow that extends into the popover.
  */
 
+Arrow.displayName = "Arrow";
 export function getInnerStyles({
   $theme
 }) {
@@ -102,14 +100,13 @@ 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',
@@ -117,9 +114,7 @@ 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";

package/es/progress-bar/progressbar-rounded.js

@@ -54,7 +54,6 @@ function ProgressBarRounded({
       setPathLength(pathRef.current.getTotalLength());
     }
   }, []); // Animation
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
 
   const animationFrameRef = React.useRef();
   const [pathProgress, setPathProgress] = React.useState(0);

package/es/progress-bar/styled-components.js

@@ -16,8 +16,7 @@ function getBarHeight(size) {
     [SIZE.medium]: '4px',
     [SIZE.large]: '8px'
   }[size];
-} // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+}
 
 export const StyledRoot = styled('div', props => {
   return {
@@ -25,7 +24,6 @@ export const StyledRoot = styled('div', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 export const StyledBarContainer = styled('div', props => {
   const {
     $theme
@@ -42,7 +40,6 @@ export const StyledBarContainer = styled('div', props => {
   };
 });
 StyledBarContainer.displayName = "StyledBarContainer";
-StyledBarContainer.displayName = 'StyledBarContainer';
 export const StyledBar = styled('div', props => {
   const {
     $theme,
@@ -73,7 +70,6 @@ export const StyledBar = styled('div', props => {
   };
 });
 StyledBar.displayName = "StyledBar";
-StyledBar.displayName = 'StyledBar';
 export const StyledBarProgress = styled('div', props => {
   const {
     $theme,
@@ -155,7 +151,6 @@ export const StyledBarProgress = styled('div', props => {
   };
 });
 StyledBarProgress.displayName = "StyledBarProgress";
-StyledBarProgress.displayName = 'StyledBarProgress';
 export const StyledInfiniteBar = styled('div', props => {
   const {
     $theme,
@@ -222,7 +217,6 @@ export const StyledInfiniteBar = styled('div', props => {
   };
 });
 StyledInfiniteBar.displayName = "StyledInfiniteBar";
-StyledInfiniteBar.displayName = 'StyledInfiniteBar';
 export const StyledLabel = styled('div', props => {
   return {
     textAlign: 'center',
@@ -231,7 +225,6 @@ export const StyledLabel = styled('div', props => {
   };
 });
 StyledLabel.displayName = "StyledLabel";
-StyledLabel.displayName = 'StyledLabel';
 const PROGRESS_BAR_ROUNDED_SIZES = {
   [SIZE.large]: {
     d: 'M47.5 4H71.5529C82.2933 4 91 12.9543 91 24C91 35.0457 82.2933 44 71.5529 44H23.4471C12.7067 44 4 35.0457 4 24C4 12.9543 12.7067 4 23.4471 4H47.5195',
@@ -269,7 +262,6 @@ export const StyledProgressBarRoundedRoot = styled('div', ({
   };
 });
 StyledProgressBarRoundedRoot.displayName = "StyledProgressBarRoundedRoot";
-StyledProgressBarRoundedRoot.displayName = 'StyledProgressBarRoundedRoot';
 
 const _StyledProgressBarRoundedSvg = styled('svg', ({
   $size
@@ -283,7 +275,6 @@ const _StyledProgressBarRoundedSvg = styled('svg', ({
 });
 
 _StyledProgressBarRoundedSvg.displayName = "_StyledProgressBarRoundedSvg";
-_StyledProgressBarRoundedSvg.displayName = '_StyledProgressBarRoundedSvg';
 export const StyledProgressBarRoundedSvg = withWrapper(_StyledProgressBarRoundedSvg, Styled => function StyledProgressBarRoundedSvg(props) {
   return /*#__PURE__*/React.createElement(Styled, _extends({
     viewBox: `0 0 ${PROGRESS_BAR_ROUNDED_SIZES[props.$size].width} ${PROGRESS_BAR_ROUNDED_SIZES[props.$size].height}`,
@@ -302,7 +293,6 @@ const _StyledProgressBarRoundedTrackBackground = styled('path', ({
 });
 
 _StyledProgressBarRoundedTrackBackground.displayName = "_StyledProgressBarRoundedTrackBackground";
-_StyledProgressBarRoundedTrackBackground.displayName = '_StyledProgressBarRoundedTrackBackground';
 export const StyledProgressBarRoundedTrackBackground = withWrapper(_StyledProgressBarRoundedTrackBackground, Styled => function StyledProgressBarRoundedSvg(props) {
   return /*#__PURE__*/React.createElement(Styled, _extends({
     d: PROGRESS_BAR_ROUNDED_SIZES[props.$size].d
@@ -326,7 +316,6 @@ const _StyledProgressBarRoundedTrackForeground = styled('path', ({
 });
 
 _StyledProgressBarRoundedTrackForeground.displayName = "_StyledProgressBarRoundedTrackForeground";
-_StyledProgressBarRoundedTrackForeground.displayName = '_StyledProgressBarRoundedTrackForeground';
 export const StyledProgressBarRoundedTrackForeground = withWrapper(_StyledProgressBarRoundedTrackForeground, Styled => function StyledProgressBarRoundedSvg(props) {
   return /*#__PURE__*/React.createElement(Styled, _extends({
     d: PROGRESS_BAR_ROUNDED_SIZES[props.$size].d
@@ -341,5 +330,4 @@ export const StyledProgressBarRoundedText = styled('div', ({
     ...$theme.typography[PROGRESS_BAR_ROUNDED_SIZES[$size].typography]
   };
 });
-StyledProgressBarRoundedText.displayName = "StyledProgressBarRoundedText";
-StyledProgressBarRoundedText.displayName = 'StyledProgressBarRoundedText';
+StyledProgressBarRoundedText.displayName = "StyledProgressBarRoundedText";

package/es/progress-steps/progress-steps.js

@@ -16,8 +16,7 @@ function ProgressSteps({
   children
 }) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledProgressSteps);
-  const numChildren = React.Children.count(children); // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  const numChildren = React.Children.count(children);
   const modifiedChildren = React.Children.map(children, (child, index) => {
     if (!child) return;
     const childOverrides = child.props.overrides || {};

package/es/progress-steps/styled-components.js

@@ -19,8 +19,6 @@ export const StyledProgressSteps = styled('ol', ({
   };
 });
 StyledProgressSteps.displayName = "StyledProgressSteps";
-StyledProgressSteps.displayName = 'StyledProgressSteps'; // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
 export const StyledStep = styled('li', ({
   $theme
 }) => {
@@ -31,9 +29,7 @@ export const StyledStep = styled('li', ({
   };
 });
 StyledStep.displayName = "StyledStep";
-StyledStep.displayName = 'StyledStep';
-export const StyledIconContainer = styled('div', // eslint-disable-next-line @typescript-eslint/no-unused-vars
-({
+export const StyledIconContainer = styled('div', ({
   $theme,
   $isActive,
   $isCompleted,
@@ -74,11 +70,11 @@ export const StyledIconContainer = styled('div', // eslint-disable-next-line @ty
   };
 });
 StyledIconContainer.displayName = "StyledIconContainer";
-StyledIconContainer.displayName = 'StyledIconContainer';
 export const StyledIcon = styled('div', ({
   $theme,
   $isActive,
-  $isCompleted
+  $isCompleted,
+  $disabled
 }) => {
   let currentColor = $theme.colors.mono400;
   let size = $theme.sizing.scale300;
@@ -110,7 +106,6 @@ export const StyledIcon = styled('div', ({
   };
 });
 StyledIcon.displayName = "StyledIcon";
-StyledIcon.displayName = 'StyledIcon';
 export const StyledInnerIcon = styled('div', ({
   $theme
 }) => {
@@ -127,7 +122,6 @@ export const StyledInnerIcon = styled('div', ({
   };
 });
 StyledInnerIcon.displayName = "StyledInnerIcon";
-StyledInnerIcon.displayName = 'StyledInnerIcon';
 export const StyledContent = styled('div', ({
   $theme
 }) => {
@@ -137,7 +131,6 @@ export const StyledContent = styled('div', ({
   };
 });
 StyledContent.displayName = "StyledContent";
-StyledContent.displayName = 'StyledContent';
 export const StyledContentTitle = styled('div', ({
   $theme,
   $isActive,
@@ -159,7 +152,6 @@ export const StyledContentTitle = styled('div', ({
   };
 });
 StyledContentTitle.displayName = "StyledContentTitle";
-StyledContentTitle.displayName = 'StyledContentTitle';
 export const StyledContentTail = styled('div', ({
   $theme,
   $isCompleted,
@@ -192,7 +184,6 @@ export const StyledContentTail = styled('div', ({
   };
 });
 StyledContentTail.displayName = "StyledContentTail";
-StyledContentTail.displayName = 'StyledContentTail';
 export const StyledContentDescription = styled('div', ({
   $theme
 }) => {
@@ -201,8 +192,9 @@ export const StyledContentDescription = styled('div', ({
   };
 });
 StyledContentDescription.displayName = "StyledContentDescription";
-StyledContentDescription.displayName = 'StyledContentDescription';
-export const StyledNumberStep = styled('li', () => {
+export const StyledNumberStep = styled('li', ({
+  $theme
+}) => {
   return {
     listStyleType: 'none',
     position: 'relative',
@@ -210,11 +202,11 @@ export const StyledNumberStep = styled('li', () => {
   };
 });
 StyledNumberStep.displayName = "StyledNumberStep";
-StyledNumberStep.displayName = 'StyledNumberStep';
 export const StyledNumberIcon = styled('div', ({
   $theme,
   $isActive,
-  $isCompleted
+  $isCompleted,
+  $disabled
 }) => {
   let backgroundColor = $theme.colors.mono400;
   let color = $theme.colors.contentStateDisabled;
@@ -255,10 +247,11 @@ export const StyledNumberIcon = styled('div', ({
   };
 });
 StyledNumberIcon.displayName = "StyledNumberIcon";
-StyledNumberIcon.displayName = 'StyledNumberIcon';
 export const StyledNumberContentTail = styled('div', ({
   $theme,
-  $isCompleted
+  $isActive,
+  $isCompleted,
+  $disabled
 }) => {
   let currentColor = $theme.colors.mono300;
   let size = $theme.sizing.scale950;
@@ -283,5 +276,4 @@ export const StyledNumberContentTail = styled('div', ({
     display: 'inline-block'
   };
 });
-StyledNumberContentTail.displayName = "StyledNumberContentTail";
-StyledNumberContentTail.displayName = 'StyledNumberContentTail';
+StyledNumberContentTail.displayName = "StyledNumberContentTail";

package/es/radio/stateful-radiogroup-container.js

@@ -48,13 +48,10 @@ class StatefulRadioGroupContainer extends React.Component {
 
   render() {
     const {
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       children = childProps => null,
       // eslint-disable-line no-unused-vars
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       initialState,
       // eslint-disable-line no-unused-vars
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       stateReducer,
       // eslint-disable-line no-unused-vars
       ...restProps

package/es/radio/styled-components.js

@@ -161,7 +161,6 @@ export const RadioGroupRoot = styled('div', props => {
   };
 });
 RadioGroupRoot.displayName = "RadioGroupRoot";
-RadioGroupRoot.displayName = 'RadioGroupRoot';
 export const Root = styled('label', props => {
   const {
     $disabled,
@@ -186,7 +185,6 @@ export const Root = styled('label', props => {
   };
 });
 Root.displayName = "Root";
-Root.displayName = 'Root';
 export const RadioMarkInner = styled('div', props => {
   const {
     animation,
@@ -205,7 +203,6 @@ export const RadioMarkInner = styled('div', props => {
   };
 });
 RadioMarkInner.displayName = "RadioMarkInner";
-RadioMarkInner.displayName = 'RadioMarkInner';
 export const RadioMarkOuter = styled('div', props => {
   const {
     animation,
@@ -235,7 +232,6 @@ export const RadioMarkOuter = styled('div', props => {
   };
 });
 RadioMarkOuter.displayName = "RadioMarkOuter";
-RadioMarkOuter.displayName = 'RadioMarkOuter';
 export const Label = styled('div', props => {
   const {
     $theme: {
@@ -248,10 +244,9 @@ export const Label = styled('div', props => {
     color: getLabelColor(props),
     ...typography.LabelMedium
   };
-});
-Label.displayName = "Label";
-Label.displayName = 'Label'; // tricky style for focus event cause display: none doesn't work
+}); // tricky style for focus event cause display: none doesn't work
 
+Label.displayName = "Label";
 export const Input = styled('input', {
   width: 0,
   height: 0,
@@ -267,7 +262,6 @@ export const Input = styled('input', {
   position: 'absolute'
 });
 Input.displayName = "Input";
-Input.displayName = 'Input';
 export const Description = styled('div', props => {
   const {
     $theme,
@@ -284,5 +278,4 @@ export const Description = styled('div', props => {
     maxWidth: '240px'
   };
 });
-Description.displayName = "Description";
-Description.displayName = 'Description';
+Description.displayName = "Description";

package/es/rating/emoticon-rating.js

@@ -79,8 +79,7 @@ class EmoticonRating extends React.Component {
         refs.push(starRef);
         ratings.push( /*#__PURE__*/React.createElement(Emoticon, _extends({
           key: x,
-          role: "radio" // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          ,
+          role: "radio",
           ref: starRef,
           tabIndex: isFocusable ? '0' : '-1',
           "aria-setsize": 5,

package/es/rating/star-rating.js

@@ -81,8 +81,7 @@ class StarRating extends React.Component {
         ratings.push( /*#__PURE__*/React.createElement(Star, _extends({
           key: x,
           role: "radio",
-          title: "rating" // eslint-disable-next-line @typescript-eslint/no-explicit-any
-          ,
+          title: "rating",
           ref: starRef,
           tabIndex: isFocusable ? '0' : '-1',
           "aria-setsize": numItems,

package/es/rating/styled-components.js

@@ -6,7 +6,6 @@ LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles';
 import { starSVG, angryRatingSVG, sadRatingSVG, neutralRatingSVG, happyRatingSVG, veryHappyRatingSVG } from './svg-icons';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
 export const StyledRoot = styled('ul', ({
   $theme
 }) => {
@@ -26,7 +25,6 @@ export const StyledRoot = styled('ul', ({
   };
 });
 StyledRoot.displayName = "StyledRoot";
-StyledRoot.displayName = 'StyledRoot';
 export const StyledStar = styled('li', ({
   $theme,
   $isActive,
@@ -91,7 +89,6 @@ export const StyledStar = styled('li', ({
   return styles;
 });
 StyledStar.displayName = "StyledStar";
-StyledStar.displayName = 'StyledStar';
 export const StyledEmoticon = styled('li', ({
   $theme,
   $isActive,
@@ -132,5 +129,4 @@ export const StyledEmoticon = styled('li', ({
   };
   return styles;
 });
-StyledEmoticon.displayName = "StyledEmoticon";
-StyledEmoticon.displayName = 'StyledEmoticon';
+StyledEmoticon.displayName = "StyledEmoticon";

package/es/select/autosize-input.js

@@ -8,6 +8,8 @@ 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.
 */
+
+/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import { StyledInput, StyledInputSizer } from './styled-components';
 import { getOverrides } from '../helpers/overrides';
@@ -31,8 +33,7 @@ export default class AutosizeInput extends React.Component {
   componentDidMount() {
     this.mounted = true;
     this.updateInputWidth();
-  } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+  }
 
   componentDidUpdate(prevProps, prevState) {
     this.updateInputWidth();

package/es/select/dropdown.js

@@ -116,8 +116,7 @@ export default class SelectDropdown extends React.Component {
       $type: type,
       $width: width
     };
-  } // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+  }
 
   render() {
     // TODO(#185) Add no-results and loading states to menu

package/es/select/multi-value.js

@@ -8,8 +8,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides';
-import { Tag, VARIANT as TAG_VARIANT } from '../tag'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
-
+import { Tag, VARIANT as TAG_VARIANT } from '../tag';
 export default function MultiValue(props) {
   const {
     overrides = {},

package/es/select/select-component.js

@@ -8,13 +8,15 @@ 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.
 */
+
+/* eslint-disable cup/no-undef */
 import * as React from 'react';
 import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import DeleteAlt from '../icon/delete-alt';
 import TriangleDownIcon from '../icon/triangle-down';
 import SearchIconComponent from '../icon/search';
 import { LocaleContext } from '../locale';
-import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
+import { Popover, PLACEMENT } from '../popover';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input';
 import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants';
@@ -33,7 +35,6 @@ const isLeftClick = event => event.button !== null && event.button !== undefined
 
 const containsNode = (parent, child) => {
   if (typeof document !== 'undefined') {
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     return child && parent && parent.contains(child);
   }
 };
@@ -693,7 +694,7 @@ class Select extends React.Component {
     }, "Loading"));
   }
 
-  renderValue(valueArray) {
+  renderValue(valueArray, isOpen, locale) {
     const {
       overrides = {}
     } = this.props;
@@ -750,10 +751,13 @@ class Select extends React.Component {
 
     if (!this.props.searchable) {
       return /*#__PURE__*/React.createElement(InputContainer, _extends({
+        role: "listbox",
         "aria-activedescendant": this.state.activeDescendant,
+        "aria-expanded": isOpen,
         "aria-describedby": this.props['aria-describedby'],
         "aria-errormessage": this.props['aria-errormessage'],
         "aria-disabled": this.props.disabled,
+        "aria-label": label,
         "aria-labelledby": this.props['aria-labelledby'],
         "aria-owns": this.state.isOpen ? listboxId : null,
         "aria-required": this.props.required || null,
@@ -807,8 +811,7 @@ class Select extends React.Component {
 
     if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
       return;
-    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+    }
 
     const {
       $size,
@@ -837,8 +840,7 @@ class Select extends React.Component {
   renderArrow() {
     if (this.props.type !== TYPE.select) {
       return null;
-    } // eslint-disable-next-line @typescript-eslint/no-unused-vars
-
+    }
 
     const {
       $size,
@@ -995,13 +997,11 @@ class Select extends React.Component {
     // apply the ref to the Root component below it would be overwritten before the popover
     // renders it. Using this strategy, we will get a ref to the popover, then reuse its
     // anchorRef so we can check if clicks are on the select component or not.
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     , _extends({
       innerRef: ref => {
         if (!ref) return;
         this.anchor = ref.anchorRef;
       },
-      accessibilityType: ACCESSIBILITY_TYPE.none,
       autoFocus: false,
       focusLock: false,
       mountNode: this.props.mountNode,
@@ -1046,7 +1046,7 @@ class Select extends React.Component {
       onTouchEnd: this.handleTouchEnd,
       onTouchMove: this.handleTouchMove,
       onTouchStart: this.handleTouchStart
-    }, sharedProps, controlContainerProps), type === TYPE.search ? this.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), this.renderValue(valueArray), this.renderInput(listboxId), this.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof this.props.placeholder !== 'undefined' ? this.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), this.renderLoading(), this.renderClear(), type === TYPE.select ? this.renderArrow() : null))))));
+    }, sharedProps, controlContainerProps), type === TYPE.search ? this.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), this.renderValue(valueArray, isOpen, locale), this.renderInput(listboxId), this.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof this.props.placeholder !== 'undefined' ? this.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), this.renderLoading(), this.renderClear(), type === TYPE.select ? this.renderArrow() : null))))));
   }
 
 }

package/es/select/single-select.js

@@ -10,11 +10,11 @@ import * as React from 'react';
 import SelectComponent from './select-component';
 import Value from './value';
 
-function SingleSelect(props) {
+function MultiSelect(props) {
   return /*#__PURE__*/React.createElement(SelectComponent, _extends({}, props, {
     multi: false,
     valueComponent: Value
   }));
 }
 
-export default SingleSelect;
+export default MultiSelect;

package/es/select/stateful-select-container.js

@@ -36,10 +36,8 @@ class StatefulSelectContainer extends React.Component {
   render() {
     const {
       children,
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       initialState,
       // eslint-disable-line no-unused-vars
-      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       stateReducer,
       // eslint-disable-line no-unused-vars
       ...restProps