baseui 12.0.0 → 12.1.0

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;
@@ -309,7 +305,6 @@ class PopoverInner extends React.Component {
       bodyProps.id = popoverId;
     } else if (this.isAccessibilityTypeTooltip()) {
       bodyProps.id = popoverId;
-      bodyProps.role = 'tooltip';
     }
 
     if (this.isHoverTrigger()) {
@@ -373,7 +368,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 +443,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/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';

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

@@ -54,6 +54,7 @@ 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,7 +16,8 @@ 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 {
@@ -24,6 +25,7 @@ export const StyledRoot = styled('div', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledBarContainer = styled('div', props => {
   const {
     $theme
@@ -40,6 +42,7 @@ export const StyledBarContainer = styled('div', props => {
   };
 });
 StyledBarContainer.displayName = "StyledBarContainer";
+StyledBarContainer.displayName = 'StyledBarContainer';
 export const StyledBar = styled('div', props => {
   const {
     $theme,
@@ -70,6 +73,7 @@ export const StyledBar = styled('div', props => {
   };
 });
 StyledBar.displayName = "StyledBar";
+StyledBar.displayName = 'StyledBar';
 export const StyledBarProgress = styled('div', props => {
   const {
     $theme,
@@ -151,6 +155,7 @@ export const StyledBarProgress = styled('div', props => {
   };
 });
 StyledBarProgress.displayName = "StyledBarProgress";
+StyledBarProgress.displayName = 'StyledBarProgress';
 export const StyledInfiniteBar = styled('div', props => {
   const {
     $theme,
@@ -217,6 +222,7 @@ export const StyledInfiniteBar = styled('div', props => {
   };
 });
 StyledInfiniteBar.displayName = "StyledInfiniteBar";
+StyledInfiniteBar.displayName = 'StyledInfiniteBar';
 export const StyledLabel = styled('div', props => {
   return {
     textAlign: 'center',
@@ -225,6 +231,7 @@ 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',
@@ -262,6 +269,7 @@ export const StyledProgressBarRoundedRoot = styled('div', ({
   };
 });
 StyledProgressBarRoundedRoot.displayName = "StyledProgressBarRoundedRoot";
+StyledProgressBarRoundedRoot.displayName = 'StyledProgressBarRoundedRoot';
 
 const _StyledProgressBarRoundedSvg = styled('svg', ({
   $size
@@ -275,6 +283,7 @@ 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}`,
@@ -293,6 +302,7 @@ 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
@@ -316,6 +326,7 @@ 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
@@ -330,4 +341,5 @@ 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,7 +16,8 @@ function ProgressSteps({
   children
 }) {
   const [Root, rootProps] = getOverrides(overrides.Root, StyledProgressSteps);
-  const numChildren = React.Children.count(children);
+  const numChildren = React.Children.count(children); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   const modifiedChildren = React.Children.map(children, (child, index) => {
     if (!child) return;
     const childOverrides = child.props.overrides || {};

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

@@ -19,6 +19,8 @@ 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
 }) => {
@@ -29,7 +31,9 @@ export const StyledStep = styled('li', ({
   };
 });
 StyledStep.displayName = "StyledStep";
-export const StyledIconContainer = styled('div', ({
+StyledStep.displayName = 'StyledStep';
+export const StyledIconContainer = styled('div', // eslint-disable-next-line @typescript-eslint/no-unused-vars
+({
   $theme,
   $isActive,
   $isCompleted,
@@ -70,11 +74,11 @@ export const StyledIconContainer = styled('div', ({
   };
 });
 StyledIconContainer.displayName = "StyledIconContainer";
+StyledIconContainer.displayName = 'StyledIconContainer';
 export const StyledIcon = styled('div', ({
   $theme,
   $isActive,
-  $isCompleted,
-  $disabled
+  $isCompleted
 }) => {
   let currentColor = $theme.colors.mono400;
   let size = $theme.sizing.scale300;
@@ -106,6 +110,7 @@ export const StyledIcon = styled('div', ({
   };
 });
 StyledIcon.displayName = "StyledIcon";
+StyledIcon.displayName = 'StyledIcon';
 export const StyledInnerIcon = styled('div', ({
   $theme
 }) => {
@@ -122,6 +127,7 @@ export const StyledInnerIcon = styled('div', ({
   };
 });
 StyledInnerIcon.displayName = "StyledInnerIcon";
+StyledInnerIcon.displayName = 'StyledInnerIcon';
 export const StyledContent = styled('div', ({
   $theme
 }) => {
@@ -131,6 +137,7 @@ export const StyledContent = styled('div', ({
   };
 });
 StyledContent.displayName = "StyledContent";
+StyledContent.displayName = 'StyledContent';
 export const StyledContentTitle = styled('div', ({
   $theme,
   $isActive,
@@ -152,6 +159,7 @@ export const StyledContentTitle = styled('div', ({
   };
 });
 StyledContentTitle.displayName = "StyledContentTitle";
+StyledContentTitle.displayName = 'StyledContentTitle';
 export const StyledContentTail = styled('div', ({
   $theme,
   $isCompleted,
@@ -184,6 +192,7 @@ export const StyledContentTail = styled('div', ({
   };
 });
 StyledContentTail.displayName = "StyledContentTail";
+StyledContentTail.displayName = 'StyledContentTail';
 export const StyledContentDescription = styled('div', ({
   $theme
 }) => {
@@ -192,9 +201,8 @@ export const StyledContentDescription = styled('div', ({
   };
 });
 StyledContentDescription.displayName = "StyledContentDescription";
-export const StyledNumberStep = styled('li', ({
-  $theme
-}) => {
+StyledContentDescription.displayName = 'StyledContentDescription';
+export const StyledNumberStep = styled('li', () => {
   return {
     listStyleType: 'none',
     position: 'relative',
@@ -202,11 +210,11 @@ export const StyledNumberStep = styled('li', ({
   };
 });
 StyledNumberStep.displayName = "StyledNumberStep";
+StyledNumberStep.displayName = 'StyledNumberStep';
 export const StyledNumberIcon = styled('div', ({
   $theme,
   $isActive,
-  $isCompleted,
-  $disabled
+  $isCompleted
 }) => {
   let backgroundColor = $theme.colors.mono400;
   let color = $theme.colors.contentStateDisabled;
@@ -247,11 +255,10 @@ export const StyledNumberIcon = styled('div', ({
   };
 });
 StyledNumberIcon.displayName = "StyledNumberIcon";
+StyledNumberIcon.displayName = 'StyledNumberIcon';
 export const StyledNumberContentTail = styled('div', ({
   $theme,
-  $isActive,
-  $isCompleted,
-  $disabled
+  $isCompleted
 }) => {
   let currentColor = $theme.colors.mono300;
   let size = $theme.sizing.scale950;
@@ -276,4 +283,5 @@ 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,10 +48,13 @@ 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,6 +161,7 @@ export const RadioGroupRoot = styled('div', props => {
   };
 });
 RadioGroupRoot.displayName = "RadioGroupRoot";
+RadioGroupRoot.displayName = 'RadioGroupRoot';
 export const Root = styled('label', props => {
   const {
     $disabled,
@@ -185,6 +186,7 @@ export const Root = styled('label', props => {
   };
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 export const RadioMarkInner = styled('div', props => {
   const {
     animation,
@@ -203,6 +205,7 @@ export const RadioMarkInner = styled('div', props => {
   };
 });
 RadioMarkInner.displayName = "RadioMarkInner";
+RadioMarkInner.displayName = 'RadioMarkInner';
 export const RadioMarkOuter = styled('div', props => {
   const {
     animation,
@@ -232,6 +235,7 @@ export const RadioMarkOuter = styled('div', props => {
   };
 });
 RadioMarkOuter.displayName = "RadioMarkOuter";
+RadioMarkOuter.displayName = 'RadioMarkOuter';
 export const Label = styled('div', props => {
   const {
     $theme: {
@@ -244,9 +248,10 @@ export const Label = styled('div', props => {
     color: getLabelColor(props),
     ...typography.LabelMedium
   };
-}); // tricky style for focus event cause display: none doesn't work
-
+});
 Label.displayName = "Label";
+Label.displayName = 'Label'; // tricky style for focus event cause display: none doesn't work
+
 export const Input = styled('input', {
   width: 0,
   height: 0,
@@ -262,6 +267,7 @@ export const Input = styled('input', {
   position: 'absolute'
 });
 Input.displayName = "Input";
+Input.displayName = 'Input';
 export const Description = styled('div', props => {
   const {
     $theme,
@@ -278,4 +284,5 @@ export const Description = styled('div', props => {
     maxWidth: '240px'
   };
 });
-Description.displayName = "Description";
+Description.displayName = "Description";
+Description.displayName = 'Description';

package/es/rating/emoticon-rating.js

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

package/es/rating/star-rating.js

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

package/es/rating/styled-components.js

@@ -6,6 +6,7 @@ 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
 }) => {
@@ -25,6 +26,7 @@ export const StyledRoot = styled('ul', ({
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledStar = styled('li', ({
   $theme,
   $isActive,
@@ -89,6 +91,7 @@ export const StyledStar = styled('li', ({
   return styles;
 });
 StyledStar.displayName = "StyledStar";
+StyledStar.displayName = 'StyledStar';
 export const StyledEmoticon = styled('li', ({
   $theme,
   $isActive,
@@ -129,4 +132,5 @@ export const StyledEmoticon = styled('li', ({
   };
   return styles;
 });
-StyledEmoticon.displayName = "StyledEmoticon";
+StyledEmoticon.displayName = "StyledEmoticon";
+StyledEmoticon.displayName = 'StyledEmoticon';

package/es/select/autosize-input.js

@@ -8,8 +8,6 @@ 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';
@@ -33,7 +31,8 @@ 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/default-props.js

@@ -28,7 +28,7 @@ const defaultProps = {
   ignoreCase: true,
   isLoading: false,
   labelKey: 'label',
-  maxDropdownHeight: '900px',
+  maxDropdownHeight: '40vh',
   multi: false,
   onBlur: () => {},
   onBlurResetsInput: true,

package/es/select/dropdown.js

@@ -116,7 +116,8 @@ 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,7 +8,8 @@ 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';
+import { Tag, VARIANT as TAG_VARIANT } from '../tag'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export default function MultiValue(props) {
   const {
     overrides = {},