baseui 12.0.0 → 12.1.0

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

package/es/select/styled-components.js

@@ -19,6 +19,21 @@ function getFont(size = SIZE.default, typography) {
   }[size];
 }
 
+function getBorderRadius(size, borders) {
+  let radius = borders.inputBorderRadius;
+
+  if (size === SIZE.mini) {
+    radius = borders.inputBorderRadiusMini;
+  }
+
+  return {
+    borderTopLeftRadius: radius,
+    borderBottomLeftRadius: radius,
+    borderTopRightRadius: radius,
+    borderBottomRightRadius: radius
+  };
+}
+
 function getControlPadding(props) {
   const {
     $theme,
@@ -72,6 +87,7 @@ export const StyledDropdownContainer = styled('div', props => {
   };
 });
 StyledDropdownContainer.displayName = "StyledDropdownContainer";
+StyledDropdownContainer.displayName = 'StyledDropdownContainer';
 export const StyledDropdown = StyledList;
 export const StyledDropdownListItem = StyledListItem;
 export const StyledOptionContent = styled('div', props => {
@@ -88,6 +104,7 @@ export const StyledOptionContent = styled('div', props => {
   };
 });
 StyledOptionContent.displayName = "StyledOptionContent";
+StyledOptionContent.displayName = 'StyledOptionContent';
 export const StyledRoot = styled('div', props => {
   const {
     $theme: {
@@ -102,6 +119,7 @@ export const StyledRoot = styled('div', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 
 function getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $positive, $error, colors) {
   if ($disabled) {
@@ -167,17 +185,14 @@ export const StyledControlContainer = styled('div', props => {
     $isPseudoFocused,
     $type,
     $searchable,
+    $size,
     $theme: {
       borders,
       colors,
       animation
     }
   } = props;
-  return {
-    borderTopLeftRadius: borders.inputBorderRadius,
-    borderTopRightRadius: borders.inputBorderRadius,
-    borderBottomRightRadius: borders.inputBorderRadius,
-    borderBottomLeftRadius: borders.inputBorderRadius,
+  return { ...getBorderRadius($size, borders),
     boxSizing: 'border-box',
     overflow: 'hidden',
     width: '100%',
@@ -199,6 +214,7 @@ export const StyledControlContainer = styled('div', props => {
   };
 });
 StyledControlContainer.displayName = "StyledControlContainer";
+StyledControlContainer.displayName = 'StyledControlContainer';
 export const StyledValueContainer = styled('div', props => {
   const padding = getControlPadding(props);
   return {
@@ -215,6 +231,7 @@ export const StyledValueContainer = styled('div', props => {
   };
 });
 StyledValueContainer.displayName = "StyledValueContainer";
+StyledValueContainer.displayName = 'StyledValueContainer';
 export const StyledPlaceholder = styled('div', props => {
   const {
     $disabled,
@@ -231,6 +248,7 @@ export const StyledPlaceholder = styled('div', props => {
   };
 });
 StyledPlaceholder.displayName = "StyledPlaceholder";
+StyledPlaceholder.displayName = 'StyledPlaceholder';
 export const StyledSingleValue = styled('div', props => {
   const {
     $searchable,
@@ -252,6 +270,7 @@ export const StyledSingleValue = styled('div', props => {
   };
 });
 StyledSingleValue.displayName = "StyledSingleValue";
+StyledSingleValue.displayName = 'StyledSingleValue';
 export const StyledInputContainer = styled('div', props => {
   const {
     $size,
@@ -288,6 +307,7 @@ export const StyledInputContainer = styled('div', props => {
   };
 });
 StyledInputContainer.displayName = "StyledInputContainer";
+StyledInputContainer.displayName = 'StyledInputContainer';
 export const StyledInput = styled('input', props => {
   const {
     $theme: {
@@ -322,6 +342,7 @@ export const StyledInput = styled('input', props => {
   };
 });
 StyledInput.displayName = "StyledInput";
+StyledInput.displayName = 'StyledInput';
 export const StyledInputSizer = styled('div', ({
   $size,
   $theme,
@@ -341,6 +362,7 @@ export const StyledInputSizer = styled('div', ({
   };
 });
 StyledInputSizer.displayName = "StyledInputSizer";
+StyledInputSizer.displayName = 'StyledInputSizer';
 export const StyledIconsContainer = styled('div', ({
   $theme,
   $theme: {
@@ -359,6 +381,7 @@ export const StyledIconsContainer = styled('div', ({
   };
 });
 StyledIconsContainer.displayName = "StyledIconsContainer";
+StyledIconsContainer.displayName = 'StyledIconsContainer';
 
 function getSvgStyles({
   $theme
@@ -403,6 +426,7 @@ export const StyledSelectArrow = styled('svg', props => {
   };
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
+StyledSelectArrow.displayName = 'StyledSelectArrow';
 export const StyledClearIcon = styled('svg', props => {
   const {
     $theme,
@@ -433,6 +457,7 @@ export const StyledClearIcon = styled('svg', props => {
   };
 });
 StyledClearIcon.displayName = "StyledClearIcon";
+StyledClearIcon.displayName = 'StyledClearIcon';
 export const StyledLoadingIndicator = withStyle(Spinner, ({
   $theme
 }) => {
@@ -449,6 +474,7 @@ export const StyledLoadingIndicator = withStyle(Spinner, ({
   };
 });
 StyledLoadingIndicator.displayName = "StyledLoadingIndicator";
+StyledLoadingIndicator.displayName = 'StyledLoadingIndicator';
 export const StyledSearchIconContainer = styled('div', props => {
   const {
     $disabled,
@@ -470,4 +496,5 @@ export const StyledSearchIconContainer = styled('div', props => {
     height: '100%'
   };
 });
-StyledSearchIconContainer.displayName = "StyledSearchIconContainer";
+StyledSearchIconContainer.displayName = "StyledSearchIconContainer";
+StyledSearchIconContainer.displayName = 'StyledSearchIconContainer';

package/es/select/value.js

@@ -8,14 +8,13 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { StyledSingleValue } from './styled-components';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides } from '../helpers/overrides'; // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export default function Value(props) {
   const {
     overrides = {},
     ...restProps
   } = props;
   const [SingleValue, singleValueProps] = getOverrides(overrides.SingleValue, StyledSingleValue);
-  return /*#__PURE__*/React.createElement(SingleValue, _extends({
-    "aria-selected": "true"
-  }, restProps, singleValueProps), props.children);
+  return /*#__PURE__*/React.createElement(SingleValue, _extends({}, restProps, singleValueProps), props.children);
 }

package/es/side-navigation/index.js

@@ -10,4 +10,5 @@ export { default as NavItem } from './nav-item'; // Styled elements
 export * from './styled-components'; // Types
 
 export * from './types';
-/** @deprecated type is already removed*/
+/** @deprecated type is already removed*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars

package/es/side-navigation/nav-item.js

@@ -48,6 +48,7 @@ class NavItem extends React.Component {
   }
 
   render() {
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       item,
       overrides,

package/es/side-navigation/nav.js

@@ -90,7 +90,7 @@ export default class SideNav extends React.Component {
         overrides: overrides
       }, sharedProps)), item.subNav ? /*#__PURE__*/React.createElement(SubNavContainer, _extends({
         role: "list"
-      }, sharedProps, subNavContainerProps), item.subNav.map((subitem, idx) => {
+      }, sharedProps, subNavContainerProps), item.subNav.map(subitem => {
         return renderNavItem(subitem, level + 1, index);
       })) : null));
     };

package/es/side-navigation/stateful-container.js

@@ -47,6 +47,7 @@ class StatefulContainer extends React.Component {
 
   render() {
     // eslint-disable-next-line no-unused-vars
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const {
       children,
       initialState,

package/es/side-navigation/styled-components.js

@@ -27,8 +27,10 @@ export const StyledRoot = styled('nav', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledNavItemContainer = styled('li', {});
 StyledNavItemContainer.displayName = "StyledNavItemContainer";
+StyledNavItemContainer.displayName = 'StyledNavItemContainer';
 export const StyledNavLink = styled('a', ({
   $theme,
   $isFocusVisible
@@ -48,6 +50,7 @@ export const StyledNavLink = styled('a', ({
   }
 }));
 StyledNavLink.displayName = "StyledNavLink";
+StyledNavLink.displayName = 'StyledNavLink';
 export const StyledNavItemElement = styled('div', props => {
   const {
     $active,
@@ -98,7 +101,9 @@ export const StyledNavItemElement = styled('div', props => {
   };
 });
 StyledNavItemElement.displayName = "StyledNavItemElement";
-export const StyledNavItem = withWrapper(StyledNavItemElement, Styled => function StyledNav({
+StyledNavItemElement.displayName = 'StyledNavItemElement';
+export const StyledNavItem = withWrapper(StyledNavItemElement, Styled => // eslint-disable-next-line @typescript-eslint/no-unused-vars
+function StyledNav({
   item,
   ...restProps
 }) {
@@ -115,4 +120,5 @@ export const StyledSubNavContainer = styled('ul', {
   paddingLeft: 0,
   paddingRight: 0
 });
-StyledSubNavContainer.displayName = "StyledSubNavContainer";
+StyledSubNavContainer.displayName = "StyledSubNavContainer";
+StyledSubNavContainer.displayName = 'StyledSubNavContainer';

package/es/skeleton/styled-components.js

@@ -60,6 +60,7 @@ export const StyledRoot = styled('div', props => {
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledRow = styled('div', props => {
   return { ...(props.$animation ? { ...animationStyle,
       backgroundImage: getAnimationColor(props)
@@ -71,4 +72,5 @@ export const StyledRow = styled('div', props => {
     marginBottom: props.$isLastRow ? '0px' : '10px'
   };
 });
-StyledRow.displayName = "StyledRow";
+StyledRow.displayName = "StyledRow";
+StyledRow.displayName = 'StyledRow';

package/es/slider/slider.js

@@ -45,11 +45,13 @@ function Slider({
   const handleFocus = React.useCallback(event => {
     if (focusVisible(event)) {
       setIsFocusVisible(true);
-    }
+    } // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 
     const index = event.target.parentNode.firstChild === event.target ? 0 : 1;
     setFocusedThumbIndex(index);
-  }, []);
+  }, []); // eslint-disable-next-line @typescript-eslint/no-unused-vars
+
   const handleBlur = React.useCallback(event => {
     if (isFocusVisible !== false) {
       setIsFocusVisible(false);

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

@@ -48,8 +48,10 @@ class StatefulSliderContainer 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

package/es/slider/styled-components.js

@@ -11,6 +11,7 @@ export const Root = styled('div', {
   width: '100%'
 });
 Root.displayName = "Root";
+Root.displayName = 'Root';
 Root.displayName = 'StyledRoot';
 export const Track = styled('div', props => {
   const {
@@ -43,6 +44,7 @@ export const Track = styled('div', props => {
   };
 });
 Track.displayName = "Track";
+Track.displayName = 'Track';
 Track.displayName = 'StyledTrack';
 export const InnerTrack = styled('div', props => {
   const {
@@ -77,6 +79,7 @@ export const InnerTrack = styled('div', props => {
   };
 });
 InnerTrack.displayName = "InnerTrack";
+InnerTrack.displayName = 'InnerTrack';
 InnerTrack.displayName = 'StyledInnerTrack';
 export const Mark = styled('div', props => {
   return {
@@ -87,6 +90,7 @@ export const Mark = styled('div', props => {
   };
 });
 Mark.displayName = "Mark";
+Mark.displayName = 'Mark';
 Mark.displayName = 'StyledMark';
 export const Tick = styled('div', props => {
   return { ...props.$theme.typography.font200,
@@ -94,6 +98,7 @@ export const Tick = styled('div', props => {
   };
 });
 Tick.displayName = "Tick";
+Tick.displayName = 'Tick';
 Tick.displayName = 'StyledTick';
 export const TickBar = styled('div', props => {
   const {
@@ -112,6 +117,7 @@ export const TickBar = styled('div', props => {
   };
 });
 TickBar.displayName = "TickBar";
+TickBar.displayName = 'TickBar';
 TickBar.displayName = 'StyledTickBar';
 export const Thumb = styled('div', props => {
   const {
@@ -145,6 +151,7 @@ export const Thumb = styled('div', props => {
   };
 });
 Thumb.displayName = "Thumb";
+Thumb.displayName = 'Thumb';
 Thumb.displayName = 'StyledThumb';
 export const InnerThumb = styled('div', props => {
   const {
@@ -160,6 +167,7 @@ export const InnerThumb = styled('div', props => {
   };
 });
 InnerThumb.displayName = "InnerThumb";
+InnerThumb.displayName = 'InnerThumb';
 InnerThumb.displayName = 'StyledInnerThumb';
 export const ThumbValue = styled('div', props => {
   const {
@@ -184,4 +192,5 @@ export const ThumbValue = styled('div', props => {
   };
 });
 ThumbValue.displayName = "ThumbValue";
+ThumbValue.displayName = 'ThumbValue';
 ThumbValue.displayName = 'StyledThumbValue';

package/es/snackbar/snackbar-element.js

@@ -12,6 +12,7 @@ import { getOverrides } from '../helpers/overrides';
 import { useStyletron } from '../styles';
 import { StyledRoot, StyledContent, StyledStartEnhancerContainer, StyledSpinner, StyledMessage, StyledWrapActionButtonContainer, StyledActionButtonContainer } from './styled-components';
 // todo(flow->ts): types
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
 const ActionButton = /*#__PURE__*/React.forwardRef(({
   onClick,
   message,

package/es/snackbar/styled-components.js

@@ -24,12 +24,14 @@ export const StyledRoot = styled('div', ({
   };
 });
 StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
 export const StyledContent = styled('div', {
   alignItems: 'center',
   display: 'inline-flex',
   width: '100%'
 });
 StyledContent.displayName = "StyledContent";
+StyledContent.displayName = 'StyledContent';
 export const StyledStartEnhancerContainer = styled('span', ({
   $theme
 }) => {
@@ -41,6 +43,7 @@ export const StyledStartEnhancerContainer = styled('span', ({
   };
 });
 StyledStartEnhancerContainer.displayName = "StyledStartEnhancerContainer";
+StyledStartEnhancerContainer.displayName = 'StyledStartEnhancerContainer';
 export const StyledSpinner = withStyle(Spinner, ({
   $height,
   $width
@@ -52,6 +55,7 @@ export const StyledSpinner = withStyle(Spinner, ({
   };
 });
 StyledSpinner.displayName = "StyledSpinner";
+StyledSpinner.displayName = 'StyledSpinner';
 export const StyledMessage = styled('p', //$FlowExpectedError[incompatible-shape]
 ({
   $theme,
@@ -71,11 +75,13 @@ export const StyledMessage = styled('p', //$FlowExpectedError[incompatible-shape
   };
 });
 StyledMessage.displayName = "StyledMessage";
+StyledMessage.displayName = 'StyledMessage';
 export const StyledWrapActionButtonContainer = styled('div', {
   display: 'flex',
   justifyContent: 'flex-end'
 });
 StyledWrapActionButtonContainer.displayName = "StyledWrapActionButtonContainer";
+StyledWrapActionButtonContainer.displayName = 'StyledWrapActionButtonContainer';
 export const StyledActionButtonContainer = styled('div', ({
   $theme
 }) => {
@@ -85,6 +91,7 @@ export const StyledActionButtonContainer = styled('div', ({
   };
 });
 StyledActionButtonContainer.displayName = "StyledActionButtonContainer";
+StyledActionButtonContainer.displayName = 'StyledActionButtonContainer';
 
 function placementRules(placement) {
   switch (placement) {
@@ -162,4 +169,5 @@ export const StyledPlacementContainer = styled('div', ({
     }
   };
 });
-StyledPlacementContainer.displayName = "StyledPlacementContainer";
+StyledPlacementContainer.displayName = "StyledPlacementContainer";
+StyledPlacementContainer.displayName = 'StyledPlacementContainer';

package/es/spinner/styled-components.js

@@ -73,4 +73,5 @@ export const StyledSpinner = styled('i', ({
     cursor: 'wait'
   };
 });
-StyledSpinner.displayName = "StyledSpinner";
+StyledSpinner.displayName = "StyledSpinner";
+StyledSpinner.displayName = 'StyledSpinner';

package/es/styles/__mocks__/styled.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.
 */
-
-/* flowlint unclear-type:off */
 import * as React from 'react';
 import { getInitialStyle } from 'styletron-standard';
 import { LightTheme } from '../../themes';
@@ -19,6 +17,7 @@ const MOCK_THEME = createMockTheme(LightTheme);
 const IDENTITY = x => x;
 
 export function useStyletron() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   function css(styles) {
     return {
       label: 'useStyletron mock describes the applied css properties',
@@ -27,7 +26,8 @@ export function useStyletron() {
   }
 
   return [css, MOCK_THEME];
-}
+} // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export function styled(ElementName, objOrFn = {}) {
   class MockStyledComponent extends React.Component {
     constructor(...args) {
@@ -63,6 +63,7 @@ export function styled(ElementName, objOrFn = {}) {
     }
 
     getPassedProps() {
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
       const {
         forwardedRef,
         ...restProps
@@ -99,8 +100,10 @@ export function styled(ElementName, objOrFn = {}) {
   }, props)));
 }
 export const withStyle = styled;
-export function withWrapper(StyledElement, wrapperFn) {
-  // eslint-disable-next-line react/display-name
+export function withWrapper( // eslint-disable-next-line @typescript-eslint/no-explicit-any
+StyledElement, // eslint-disable-next-line @typescript-eslint/no-explicit-any
+wrapperFn) {
+  // eslint-disable-next-line react/display-name,@typescript-eslint/no-explicit-any
   return /*#__PURE__*/React.forwardRef((props, ref) => wrapperFn(StyledElement)({
     ref: ref,
     ...props,

package/es/styles/styled.js

@@ -20,32 +20,33 @@ const wrapper = StyledComponent => {
   }))));
 };
 
-/* eslint-enable flowtype/generic-spacing */
-
-/* flowlint unclear-type:error */
 export function createThemedStyled() {
   return createStyled({
     wrapper,
     getInitialStyle,
-    driver
+    driver // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
   });
 }
 export const styled = createThemedStyled();
 export function createThemedWithStyle() {
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   return styletronWithStyle;
 }
 export const withStyle = createThemedWithStyle();
 export function createThemedUseStyletron() {
   return function () {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
     const theme = React.useContext(ThemeContext);
     const [css] = styletronUseStyletron();
     return [css, theme];
   };
 }
-export const useStyletron = createThemedUseStyletron();
+export const useStyletron = createThemedUseStyletron(); // eslint-disable-next-line @typescript-eslint/no-explicit-any
+
 export function withWrapper(StyledElement, wrapperFn) {
   return styletronWithWrapper(StyledElement, Styled => {
-    // eslint-disable-next-line react/display-name
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any,react/display-name
     return /*#__PURE__*/React.forwardRef((props, ref) => /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => // @ts-ignore
     wrapperFn(Styled)({
       ref: ref,

package/es/table/index.js

@@ -13,4 +13,5 @@ export { SORT_DIRECTION } from './constants'; // Styled elements
 export { StyledTable, StyledFilterButton, StyledFilterContent, StyledFilterHeading, StyledFilterFooter, StyledHead, StyledHeadCell, StyledBody, StyledRow, StyledCell, StyledAction, StyledSortableLabel } from './styled-components'; // Flow
 
 export * from './types';
-/** @deprecated use HeadCellOverrides instead. To be removed in future versions.*/
+/** @deprecated use HeadCellOverrides instead. To be removed in future versions.*/
+// eslint-disable-next-line @typescript-eslint/no-unused-vars