baseui 12.0.0 → 12.1.2

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 = {},

package/es/select/select-component.js

@@ -8,15 +8,13 @@ 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 } from '../popover';
+import { Popover, PLACEMENT, ACCESSIBILITY_TYPE } from '../popover';
 import { UIDConsumer } from 'react-uid';
 import AutosizeInput from './autosize-input';
 import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants';
@@ -35,6 +33,7 @@ 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);
   }
 };
@@ -694,7 +693,7 @@ class Select extends React.Component {
     }, "Loading"));
   }
 
-  renderValue(valueArray, isOpen, locale) {
+  renderValue(valueArray) {
     const {
       overrides = {}
     } = this.props;
@@ -751,13 +750,10 @@ 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,
@@ -811,7 +807,8 @@ 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,
@@ -840,7 +837,8 @@ 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,
@@ -997,11 +995,13 @@ 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, 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))))));
+    }, 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))))));
   }
 
 }

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 MultiSelect(props) {
+function SingleSelect(props) {
   return /*#__PURE__*/React.createElement(SelectComponent, _extends({}, props, {
     multi: false,
     valueComponent: Value
   }));
 }
 
-export default MultiSelect;
+export default SingleSelect;

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

@@ -36,8 +36,10 @@ 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