baseui 0.0.0-next-2992a67 → 0.0.0-next-ecc760f

package/es/list/styled-components.js

@@ -9,7 +9,8 @@ import { artworkSizeToValue } from './utils';
 import { SHAPE } from './constants';
 export const StyledRoot = styled('li', ({
   $theme,
-  $shape
+  $shape,
+  $isTapTarget = false
 }) => {
   return {
     alignItems: 'center',
@@ -21,12 +22,24 @@ export const StyledRoot = styled('li', ({
     borderTopRightRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
     borderBottomLeftRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
     borderBottomRightRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
-    overflow: 'hidden'
+    overflow: 'hidden',
+    ...($isTapTarget ? {
+      // button style reset
+      borderRadius: 0,
+      textAlign: 'inherit',
+      boxShadow: 'none',
+      padding: 0,
+      cursor: 'pointer',
+      border: 'none',
+      color: 'inherit',
+      font: 'inherit'
+    } : {})
   };
 });
 StyledRoot.displayName = "StyledRoot";
 StyledRoot.displayName = 'StyledRoot';
-export const StyledContent = styled('div', ({
+export const StyledContent = styled('div', // @ts-ignore
+({
   $mLeft,
   $sublist,
   $theme

package/es/locale/es_AR.js

@@ -57,6 +57,7 @@ const es_AR = {
     optionsLabel: 'Selecciona una columna para filtrar',
     optionsSearch: 'Busque una columna para filtrar por...',
     optionsEmpty: 'Sin columnas disponibles.',
+    categoricalFilterSearchLabel: 'Buscar categorías',
     categoricalFilterSelectAll: 'Seleccionar Todo',
     categoricalFilterSelectClear: 'Borrar',
     categoricalFilterEmpty: 'No se encontraron categorías',
@@ -79,7 +80,8 @@ const es_AR = {
     booleanColumnTrueShort: 'V',
     booleanColumnFalseShort: 'F',
     selectRow: 'Seleccionar fila',
-    selectAllRows: 'Seleccionar todas las filas'
+    selectAllRows: 'Seleccionar todas las filas',
+    sortColumn: 'Clasificar columna'
   },
   buttongroup: {
     ariaLabel: 'grupo de botones'

package/es/locale/index.js

@@ -4,7 +4,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.
 */
-import * as React from 'react';
+import * as React from 'react'; // @ts-ignore
+
 import extend from 'just-extend';
 import en_US from './en_US';
 export const LocaleContext = /*#__PURE__*/React.createContext(en_US);
@@ -15,9 +16,14 @@ const LocaleProvider = props => {
     children
   } = props;
   const parentLocale = React.useContext(LocaleContext) ?? {};
-  return /*#__PURE__*/React.createElement(LocaleContext.Provider, {
-    value: extend({}, en_US, parentLocale, locale)
-  }, children);
+  return (
+    /*#__PURE__*/
+    // this is poorly documented but specifying true enforces that the object is deeply extended
+    // https://www.npmjs.com/package/just-extend
+    React.createElement(LocaleContext.Provider, {
+      value: extend(true, {}, en_US, parentLocale, locale)
+    }, children)
+  );
 };
 
 export default LocaleProvider;

package/es/locale/tr_TR.js

@@ -57,6 +57,7 @@ const tr_TR = {
     optionsLabel: 'Filtrelenecek sütunu seçin',
     optionsSearch: 'Filtrelemek için bir sütun arayın...',
     optionsEmpty: 'Sütun yok.',
+    categoricalFilterSearchLabel: 'Arama kategorileri',
     categoricalFilterSelectAll: 'Tümünü Seç',
     categoricalFilterSelectClear: 'Temizle',
     categoricalFilterEmpty: 'Kategori bulunamadı',
@@ -79,7 +80,8 @@ const tr_TR = {
     booleanColumnTrueShort: 'D',
     booleanColumnFalseShort: 'Y',
     selectRow: 'satır seç',
-    selectAllRows: 'Tüm satırları seç'
+    selectAllRows: 'Tüm satırları seç',
+    sortColumn: 'Sıralama sütunu'
   },
   buttongroup: {
     ariaLabel: 'buton grup'

package/es/map-marker/calculate-offsets.js

@@ -1,6 +1,5 @@
 /*
 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.
 */

package/es/map-marker/constants.js

@@ -15,7 +15,8 @@ export const NEEDLE_HEIGHTS = Object.freeze({
   [NEEDLE_SIZES.short]: 4,
   [NEEDLE_SIZES.medium]: 12,
   [NEEDLE_SIZES.tall]: 20
-});
+}); // Important: keep this sorted by size, as it used to determine label size when a secondary label is used.
+
 export const PINHEAD_SIZES_SHAPES = Object.freeze({
   xxSmallCircle: 'xx-small-circle',
   xxSmallSquare: 'xx-small-square',
@@ -102,21 +103,28 @@ export const BADGE_ENHANCER_SIZES = Object.freeze({
   mediumIcon: 'medium-icon'
 });
 const xSmallPinheadBadge = {
+  // @ts-ignore
   [BADGE_ENHANCER_SIZES.none]: null,
   [BADGE_ENHANCER_SIZES.xSmall]: {
     x: -5,
     y: -3
   },
+  // @ts-ignore
   [BADGE_ENHANCER_SIZES.small]: null,
+  // @ts-ignore
   [BADGE_ENHANCER_SIZES.mediumText]: null,
+  // @ts-ignore
   [BADGE_ENHANCER_SIZES.mediumIcon]: null
 };
 export const BADGE_ENHANCER_POSITIONS = {
+  // @ts-ignore
   [PINHEAD_SIZES_SHAPES.xxSmallSquare]: null,
+  // @ts-ignore
   [PINHEAD_SIZES_SHAPES.xxSmallCircle]: null,
   [PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadBadge,
   [PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadBadge,
   [PINHEAD_SIZES_SHAPES.small]: {
+    // @ts-ignore
     [BADGE_ENHANCER_SIZES.none]: null,
     [BADGE_ENHANCER_SIZES.xSmall]: {
       x: -7,
@@ -126,10 +134,13 @@ export const BADGE_ENHANCER_POSITIONS = {
       x: -8,
       y: -8
     },
+    // @ts-ignore
     [BADGE_ENHANCER_SIZES.mediumText]: null,
+    // @ts-ignore
     [BADGE_ENHANCER_SIZES.mediumIcon]: null
   },
   [PINHEAD_SIZES_SHAPES.medium]: {
+    // @ts-ignore
     [BADGE_ENHANCER_SIZES.none]: null,
     [BADGE_ENHANCER_SIZES.xSmall]: {
       x: -9,
@@ -149,11 +160,13 @@ export const BADGE_ENHANCER_POSITIONS = {
     }
   },
   [PINHEAD_SIZES_SHAPES.large]: {
+    // @ts-ignore
     [BADGE_ENHANCER_SIZES.none]: null,
     [BADGE_ENHANCER_SIZES.xSmall]: {
       x: -11,
       y: 3
     },
+    // @ts-ignore
     [BADGE_ENHANCER_SIZES.small]: null,
     [BADGE_ENHANCER_SIZES.mediumText]: {
       x: -14,

package/es/map-marker/fixed-marker.js

@@ -45,9 +45,11 @@ const FixedMarker = ({
   kind = KIND.default,
   dragging = false,
   overrides = {},
+  // @ts-ignore
   labelEnhancerContent = null,
   labelEnhancerPosition = LABEL_ENHANCER_POSITIONS.bottom,
   badgeEnhancerSize = null,
+  // @ts-ignore
   badgeEnhancerContent = null,
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
   ...restProps

package/es/map-marker/floating-marker.js

@@ -11,7 +11,7 @@ import { useStyletron } from '../styles';
 import PinHead from './pin-head';
 import { getOverrides } from '../helpers/overrides';
 import { StyledFloatingMarkerRoot, StyledFloatingMarkerAnchorContainer, StyledFloatingMarkerPinHeadContainer } from './styled-components';
-import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, PINHEAD_DIMENSIONS } from './constants';
+import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, PINHEAD_DIMENSIONS } from './constants'; // @ts-ignore
 
 function getAnchorPinHeadSize(anchorType) {
   if (anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle) {
@@ -27,6 +27,7 @@ function getAnchorPinHeadSize(anchorType) {
 
 const FloatingMarker = ({
   label,
+  secondaryLabel,
   size = PINHEAD_SIZES_SHAPES.medium,
   anchor = FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft,
   endEnhancer,
@@ -59,6 +60,7 @@ const FloatingMarker = ({
     background: backgroundPrimary,
     type: PINHEAD_TYPES.floating,
     label: label,
+    secondaryLabel: secondaryLabel,
     startEnhancer: startEnhancer,
     endEnhancer: endEnhancer,
     overrides: overrides

package/es/map-marker/floating-route-marker.js

@@ -2,7 +2,6 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 /*
 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.
 */
@@ -11,13 +10,13 @@ import { useStyletron } from '../styles';
 import { getOverrides } from '../helpers/overrides';
 import { LabelSmall, LabelMedium } from '../typography';
 import { FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS, FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES, FLOATING_ROUTE_MARKER_POINTERS, PINHEAD_SIZES_SHAPES, PINHEAD_DIMENSIONS } from './constants';
-import { StyledFloatingRouteMarkerRoot, StyledContentItem, StyledFloatingRouteMarkerPointerContainer, StyledFloatingRouteMarkerPointer } from './styled-components';
+import { StyledFloatingRouteMarkerRoot, StyledLabelSlot, StyledFloatingRouteMarkerPointerContainer, StyledFloatingRouteMarkerPointer } from './styled-components';
 
 const FloatingRouteMarker = ({
   label,
   secondaryLabel,
-  startEnhancer: StartEnhancer = null,
-  endEnhancer: EndEnhancer = null,
+  startEnhancer: StartEnhancer,
+  endEnhancer: EndEnhancer,
   selected = false,
   anchorPosition = FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft,
   overrides = {}
@@ -27,7 +26,7 @@ const FloatingRouteMarker = ({
   const color = selected ? theme.colors.contentInversePrimary : theme.colors.contentPrimary;
   const secondaryLabelColor = selected ? theme.colors.contentInverseSecondary : theme.colors.contentSecondary;
   const [Root, rootProps] = getOverrides(overrides.Root, StyledFloatingRouteMarkerRoot);
-  const [IconContainer, iconContainerProps] = getOverrides(overrides.IconContainer, StyledContentItem);
+  const [IconContainer, iconContainerProps] = getOverrides(overrides.IconContainer, StyledLabelSlot);
   const [PrimaryLabel, primaryLabelProps] = getOverrides(overrides.Label, LabelMedium);
   const [SecondaryLabel, secondaryLabelProps] = getOverrides(overrides.SecondaryLabel, LabelSmall);
   const [Pointer, pointerProps] = getOverrides(overrides.Pointer, StyledFloatingRouteMarkerPointer);

package/es/map-marker/location-puck.js

@@ -10,7 +10,7 @@ import * as React from 'react';
 import { useStyletron } from '../styles';
 import { getOverrides } from '../helpers/overrides';
 import { LOCATION_PUCK_SIZES, LOCATION_PUCK_TYPES, EARNER_LOCATION_PUCK_CORE_SCALES } from './constants';
-import { LocationPuckContainer, StyledConsumerLocationPuckCore, StyledLocationPuckApproximation, StyledEarnerLocationPuckCore } from './styled-components';
+import { LocationPuckContainer, StyledConsumerLocationPuckCore, StyledLocationPuckApproximation, StyledEarnerLocationPuckCore } from './styled-components'; // @ts-ignore
 
 const ConsumerLocationPuckHeading = ({
   heading
@@ -56,7 +56,8 @@ const ConsumerLocationPuck = ({
   }, locationPuckApproximationProps)), /*#__PURE__*/React.createElement(ConsumerLocationPuckCore, consumerLocationPuckCoreProps), showHeading && /*#__PURE__*/React.createElement(ConsumerLocationPuckHeading, {
     heading: heading
   }));
-};
+}; // @ts-ignore
+
 
 const EarnerLocationPuckHeading = ({
   size,
@@ -70,6 +71,7 @@ const EarnerLocationPuckHeading = ({
       transition: `${theme.animation.timing300} ${theme.animation.easeOutCurve} all`
     }),
     style: {
+      // @ts-ignore
       transform: `rotate(${heading}deg) scale(${EARNER_LOCATION_PUCK_CORE_SCALES[size]})`
     },
     width: "72",
@@ -92,10 +94,13 @@ const EarnerLocationPuck = ({
   overrides
 }) => {
   const [, theme] = useStyletron();
-  const color = theme.colors.contentPrimary;
+  const color = theme.colors.contentPrimary; // @ts-ignore
+
   const [Root, rootProps] = getOverrides(overrides.Root, LocationPuckContainer);
-  const [LocationPuckApproximation, locationPuckApproximationProps] = getOverrides(overrides.LocationPuckApproximation, StyledLocationPuckApproximation);
-  const [EarnerLocationPuckCore, earnerLocationPuckCoreProps] = getOverrides(overrides.EarnerLocationPuckCore, StyledEarnerLocationPuckCore);
+  const [LocationPuckApproximation, locationPuckApproximationProps] = getOverrides( // @ts-ignore
+  overrides.LocationPuckApproximation, StyledLocationPuckApproximation);
+  const [EarnerLocationPuckCore, earnerLocationPuckCoreProps] = getOverrides( // @ts-ignore
+  overrides.EarnerLocationPuckCore, StyledEarnerLocationPuckCore);
   return /*#__PURE__*/React.createElement(Root, rootProps, /*#__PURE__*/React.createElement(LocationPuckApproximation, _extends({
     $color: color,
     $radius: confidenceRadius

package/es/map-marker/pin-head.js

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
 import { getOverrides } from '../helpers/overrides';
-import { StyledInnerXXSmallAnchor, StyledOuterXXSmallAnchor, StyledInnerXSmallAnchor, StyledOuterXSmallAnchor, StyledPinHead, RelativeContainer, StyledContentItem } from './styled-components';
+import { StyledInnerXXSmallAnchor, StyledOuterXXSmallAnchor, StyledInnerXSmallAnchor, StyledOuterXSmallAnchor, StyledPinHead, RelativeContainer, StyledEnhancerSlot, StyledLabelSlot, StyledLabel } from './styled-components';
 import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES, NEEDLE_HEIGHTS, NEEDLE_SIZES } from './constants';
 import BadgeEnhancer from './badge-enhancer';
 import LabelEnhancer from './label-enhancer';
@@ -16,6 +16,7 @@ import LabelEnhancer from './label-enhancer';
 const PinHead = ({
   size = PINHEAD_SIZES_SHAPES.medium,
   label = '',
+  secondaryLabel = '',
   startEnhancer: StartEnhancer,
   endEnhancer: EndEnhancer,
   color,
@@ -38,7 +39,10 @@ const PinHead = ({
     icon
   } = PINHEAD_DIMENSIONS[size];
   const [PinHead, pinHeadProps] = getOverrides(overrides.PinHead, StyledPinHead);
-  const [ContentItem, contentItemProps] = getOverrides(overrides.PinHeadContent, StyledContentItem);
+  const [EnhancerSlot, enhancerSlotProps] = getOverrides(overrides.EnhancerSlot, StyledEnhancerSlot);
+  const [LabelSlot, labelSlotProps] = getOverrides(overrides.LabelSlot, StyledLabelSlot);
+  const [Label, labelProps] = getOverrides(overrides.Label, StyledLabel);
+  const [SecondaryLabel, secondaryLabelProps] = getOverrides(overrides.SecondaryLabel, StyledLabel);
   const [InnerXXSmallAnchor, innerXXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXXSmallAnchor);
   const [OuterXXSmallAnchor, outerXXSmallAnchorProps] = getOverrides(overrides.OuterAnchor, StyledOuterXXSmallAnchor);
   const [InnerXSmallAnchor, innerXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor);
@@ -77,6 +81,7 @@ const PinHead = ({
     }, innerXSmallAnchorProps))));
   }
 
+  const renderSecondaryLabel = (size === PINHEAD_SIZES_SHAPES.large || size === PINHEAD_SIZES_SHAPES.medium) && secondaryLabel;
   return /*#__PURE__*/React.createElement(RelativeContainer, null, /*#__PURE__*/React.createElement(LabelEnhancer, {
     labelEnhancerContent: labelEnhancerContent,
     labelEnhancerPosition: labelEnhancerPosition,
@@ -89,21 +94,25 @@ const PinHead = ({
     $gridTemplateColumns: gridTemplateColumns,
     $forceCircle: forceCircle,
     $type: type
-  }, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
+  }, pinHeadProps), StartEnhancer && /*#__PURE__*/React.createElement(EnhancerSlot, _extends({
     $height: height,
     $color: color,
     $size: size
-  }, contentItemProps), /*#__PURE__*/React.createElement(StartEnhancer, {
+  }, enhancerSlotProps), /*#__PURE__*/React.createElement(StartEnhancer, {
     size: icon
-  })), label && /*#__PURE__*/React.createElement(ContentItem, _extends({
+  })), label && /*#__PURE__*/React.createElement(LabelSlot, labelSlotProps, /*#__PURE__*/React.createElement(Label, _extends({
+    $size: size,
+    $renderSecondaryLabel: renderSecondaryLabel,
+    $color: color
+  }, labelProps), label), renderSecondaryLabel && /*#__PURE__*/React.createElement(SecondaryLabel, _extends({
+    $size: size,
+    $renderSecondaryLabel: renderSecondaryLabel,
+    $color: color
+  }, secondaryLabelProps), secondaryLabel)), EndEnhancer && /*#__PURE__*/React.createElement(EnhancerSlot, _extends({
     $height: height,
     $color: color,
     $size: size
-  }, contentItemProps), label), EndEnhancer && /*#__PURE__*/React.createElement(ContentItem, _extends({
-    $height: height,
-    $color: color,
-    $size: size
-  }, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
+  }, enhancerSlotProps), /*#__PURE__*/React.createElement(EndEnhancer, {
     size: icon
   }))));
 };

package/es/map-marker/styled-components.js

@@ -5,7 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import { styled } from '../styles';
-import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES, EARNER_LOCATION_PUCK_CORE_SCALES, FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS } from './constants';
+import { BADGE_ENHANCER_STYLES, FLOATING_MARKER_ANCHOR_POSITIONS, LABEL_SIZES, EARNER_LOCATION_PUCK_CORE_SCALES, PINHEAD_SIZES_SHAPES, FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS } from './constants';
 export const getAnchorTransform = (anchor, anchorSize) => ({
   [FLOATING_MARKER_ANCHOR_POSITIONS.none]: ``,
   [FLOATING_MARKER_ANCHOR_POSITIONS.topLeft]: `translate(${anchorSize}px, ${anchorSize}px)`,
@@ -185,6 +185,7 @@ export const StyledPinHead = styled('div', ({
     gap: '8px',
     boxShadow: $theme.lighting.shadow600,
     whiteSpace: 'nowrap',
+    // @ts-ignore
     ...sharedStyles[$type],
     ...($forceCircle && {
       width: `${$height}px`,
@@ -259,6 +260,7 @@ export const StyledStrokedLabel = styled('div', ({
    -${strokeWidth}px 0 0 ${strokeColor}`;
   return {
     display: 'flex',
+    // @ts-ignore
     ...$theme.typography[LABEL_SIZES[$size]],
     color: $theme.colors.primaryA,
     transition: `${$theme.animation.timing300} ${$theme.animation.easeOutCurve} all`,
@@ -300,13 +302,14 @@ export const RelativeContainer = styled('div', () => {
 });
 RelativeContainer.displayName = "RelativeContainer";
 RelativeContainer.displayName = 'RelativeContainer';
-export const StyledContentItem = styled('div', ({
+export const StyledEnhancerSlot = styled('div', ({
   $theme,
   $color,
   $height,
   $size
 }) => {
-  return { ...$theme.typography[LABEL_SIZES[$size]],
+  return { // @ts-ignore
+    ...$theme.typography[LABEL_SIZES[$size]],
     display: 'flex',
     alignItems: 'center',
     textAlign: 'center',
@@ -315,8 +318,7 @@ export const StyledContentItem = styled('div', ({
     color: $color
   };
 });
-StyledContentItem.displayName = "StyledContentItem";
-StyledContentItem.displayName = 'StyledContentItem';
+StyledEnhancerSlot.displayName = "StyledEnhancerSlot";
 export const StyledFloatingRouteMarkerRoot = styled('div', ({
   $theme,
   $height,
@@ -339,10 +341,31 @@ export const StyledFloatingRouteMarkerRoot = styled('div', ({
 });
 StyledFloatingRouteMarkerRoot.displayName = "StyledFloatingRouteMarkerRoot";
 StyledFloatingRouteMarkerRoot.displayName = 'StyledFloatingRouteMarkerRoot';
+StyledEnhancerSlot.displayName = 'StyledEnhancerSlot';
+export const StyledLabelSlot = styled('div', () => {
+  return {
+    display: 'flex',
+    justifyContent: 'center',
+    flexDirection: 'column'
+  };
+});
+StyledLabelSlot.displayName = "StyledLabelSlot";
+StyledLabelSlot.displayName = 'StyledLabelSlot';
 export const StyledLabel = styled('div', ({
+  $theme,
+  $size,
+  $renderSecondaryLabel,
   $color
 }) => {
-  return {
+  const pinheadSizeOrder = Object.values(PINHEAD_SIZES_SHAPES);
+  let labelSizeIndex = pinheadSizeOrder.findIndex(x => $size === x);
+
+  if ($renderSecondaryLabel) {
+    labelSizeIndex--;
+  }
+
+  const typographyStyle = LABEL_SIZES[pinheadSizeOrder[labelSizeIndex]];
+  return { ...$theme.typography[typographyStyle],
     color: $color
   };
 });

package/es/menu/menu.js

@@ -52,10 +52,14 @@ export default function Menu(props) {
   const optgroups = Object.keys(groupedItems);
   const [elements] = optgroups.reduce(([els, itemIndex], optgroup) => {
     if (optgroup !== '__ungrouped') {
-      els.push( /*#__PURE__*/React.createElement(OptgroupHeader, _extends({
+      els.push(
+      /*#__PURE__*/
+      // @ts-ignore
+      React.createElement(OptgroupHeader, _extends({
         key: optgroup
       }, optgroupHeaderProps), optgroup));
     } // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-ignore
 
 
     const groupItems = groupedItems[optgroup].map((item, index) => {
@@ -93,7 +97,8 @@ export default function Menu(props) {
       }, restProps, optionProps));
     });
     return [els.concat(groupItems), itemIndex];
-  }, [[], -1]);
+  }, [[], -1]); // @ts-ignore
+
   const isEmpty = optgroups.every(optgroup => !groupedItems[optgroup].length);
   return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(List, _extends({
     "aria-activedescendant": props.activedescendantId || null,
@@ -108,7 +113,8 @@ export default function Menu(props) {
     }, handleFocus),
     onBlur: forkBlur({
       onBlur: unfocusMenu
-    }, handleBlur),
+    }, handleBlur) // @ts-ignore
+    ,
     onKeyDown: event => {
       if (props.isFocused) {
         handleKeyDown(event);

package/es/menu/nested-menus.js

@@ -43,6 +43,7 @@ export default class NestedMenus extends React.Component {
     _defineProperty(this, "mouseLeaveTimeoueId", null);
 
     _defineProperty(this, "handleMenuMouseLeave", event => {
+      // @ts-ignore
       this.mouseLeaveTimeoueId = setTimeout(() => {
         this.setState({
           nestedMenuHoverIndex: -1
@@ -52,9 +53,13 @@ export default class NestedMenus extends React.Component {
 
     _defineProperty(this, "handleMenuMouseEnter", event => {
       if (typeof document !== 'undefined') {
+        // @ts-ignore
         clearTimeout(this.mouseLeaveTimeoueId);
         const index = this.state.menus.findIndex(m => {
-          return m.current && event.currentTarget instanceof Node && m.current.contains(event.currentTarget);
+          return (// @ts-ignore
+            m.current && event.currentTarget instanceof Node && // @ts-ignore
+            m.current.contains(event.currentTarget)
+          );
         });
         this.setState({
           nestedMenuHoverIndex: index
@@ -82,7 +87,9 @@ export default class NestedMenus extends React.Component {
     _defineProperty(this, "removeMenuFromNesting", ref => {
       this.setState(state => {
         for (const r of this.state.menus) {
+          // @ts-ignore
           if (r.current && isSame(r.current, ref.current)) {
+            // @ts-ignore
             const element = r.current;
             element.removeEventListener('mouseenter', this.handleMenuMouseEnter);
             element.removeEventListener('mouseleave', this.handleMenuMouseLeave);
@@ -99,6 +106,7 @@ export default class NestedMenus extends React.Component {
     });
 
     _defineProperty(this, "findMenuIndexByRef", ref => {
+      // @ts-ignore
       return this.state.menus.findIndex(r => isSame(r.current, ref.current));
     });
 

package/es/menu/option-list.js

@@ -29,7 +29,7 @@ function OptionList(props, ref) {
     ...restProps
   } = props;
   const [ListItem, listItemProps] = getOverrides(overrides.ListItem, StyledListItem);
-  const [ListItemAnchor, listItemAnchorProps] = getOverrides(overrides.ListItemAnchor, StyledListItemAnchor);
+  const [ListItemAnchor, listItemAnchorProps] = getOverrides(overrides.ListItemAnchor, StyledListItemAnchor); // @ts-ignore
 
   const getItem = item => {
     if (item.href && renderHrefAsAnchor) {
@@ -62,7 +62,8 @@ function OptionList(props, ref) {
     isHighlighted: $isHighlighted,
     ...item
   }))));
-}
+} // @ts-ignore
+
 
 function areEqualShallow(a, b) {
   if (!a || !b) return false;
@@ -74,11 +75,13 @@ function areEqualShallow(a, b) {
   }
 
   return true;
-}
+} // @ts-ignore
+
 
 function compare(prevProps, nextProps) {
   return prevProps.$isHighlighted === nextProps.$isHighlighted && prevProps.$isFocused === nextProps.$isFocused && areEqualShallow(prevProps.item, nextProps.item) && areEqualShallow(prevProps.overrides, nextProps.overrides) && prevProps.size === nextProps.size && prevProps.getItemLabel === nextProps.getItemLabel && prevProps.getChildMenu === nextProps.getChildMenu && prevProps.resetMenu === nextProps.resetMenu;
-}
+} // @ts-ignore
+
 
 const forwarded = /*#__PURE__*/React.forwardRef(OptionList);
 forwarded.displayName = 'OptionList';

package/es/menu/option-profile.js

@@ -39,8 +39,7 @@ function OptionProfile(props, ref) {
     subtitle,
     body
   } = getProfileItemLabels(item);
-  return /*#__PURE__*/React.createElement(MaybeChildMenu // @ts-expect-error todo(flow->ts)
-  , {
+  return /*#__PURE__*/React.createElement(MaybeChildMenu, {
     ref: ref,
     getChildMenu: getChildMenu,
     isOpen: !!$isHighlighted,
@@ -58,7 +57,8 @@ function OptionProfile(props, ref) {
   /*#__PURE__*/
   // Or just render the entire component user specified
   React.createElement(ItemImg, profileImgProps))), /*#__PURE__*/React.createElement(ProfileLabelsContainer, profileLabelsContainerProps, title && /*#__PURE__*/React.createElement(ProfileTitle, profileTitleProps, title), subtitle && /*#__PURE__*/React.createElement(ProfileSubtitle, profileSubtitleProps, subtitle), body && /*#__PURE__*/React.createElement(ProfileBody, profileBodyProps, body))));
-}
+} // @ts-ignore
+
 
 const forwarded = /*#__PURE__*/React.forwardRef(OptionProfile);
 forwarded.displayName = 'OptionProfile';

package/es/menu/stateful-container.js

@@ -28,6 +28,7 @@ const DEFAULT_PROPS = {
   stateReducer: (changeType, changes) => changes,
   onItemSelect: () => {},
   getRequiredItemProps: () => ({}),
+  // @ts-ignore
   children: () => null,
   // from nested-menus context
   addMenuToNesting: () => {},
@@ -83,6 +84,7 @@ class MenuStatefulContainerInner extends React.Component {
 
         default:
           if (this.props.typeAhead) {
+            // @ts-ignore
             clearTimeout(this.typeAheadTimeOut);
             this.handleAlphaDown(event);
           }
@@ -129,7 +131,8 @@ class MenuStatefulContainerInner extends React.Component {
       });
 
       if (this.refList[nextIndex]) {
-        scrollItemIntoView(this.refList[nextIndex].current, rootRef.current, nextIndex === 0, nextIndex === list.length - 1);
+        scrollItemIntoView(this.refList[nextIndex].current, // @ts-ignore
+        rootRef.current, nextIndex === 0, nextIndex === list.length - 1);
       }
     });
 
@@ -181,7 +184,8 @@ class MenuStatefulContainerInner extends React.Component {
       }
 
       if (this.refList[nextIndex]) {
-        scrollItemIntoView(this.refList[nextIndex].current, rootRef.current, nextIndex === 0, nextIndex === this.getItems().length - 1);
+        scrollItemIntoView(this.refList[nextIndex].current, // @ts-ignore
+        rootRef.current, nextIndex === 0, nextIndex === this.getItems().length - 1);
       }
     });
 
@@ -298,6 +302,7 @@ class MenuStatefulContainerInner extends React.Component {
 
     const optgroups = Object.keys(this.props.items);
     return optgroups.reduce((output, optgroup) => {
+      // @ts-ignore
       return output.concat(this.props.items[optgroup]);
     }, []);
   }
@@ -412,6 +417,7 @@ class MenuStatefulContainerInner extends React.Component {
       highlightedIndex: this.state.highlightedIndex,
       isFocused: this.state.isFocused,
       // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      // @ts-ignore
       handleKeyDown: this.props.keyboardControlNode.current ? event => {} : this.onKeyDown,
       focusMenu: this.focusMenu,
       unfocusMenu: this.unfocusMenu
@@ -424,7 +430,6 @@ class MenuStatefulContainerInner extends React.Component {
 _defineProperty(MenuStatefulContainerInner, "defaultProps", DEFAULT_PROPS);
 
 const MenuStatefulContainer = props => {
-  //$FlowExpectedError[cannot-spread-inexact]
   return /*#__PURE__*/React.createElement(MenuStatefulContainerInner, _extends({
     uidSeed: useUIDSeed()
   }, props));