baseui 12.1.3 → 13.0.0

package/es/layout-grid/index.js

@@ -12,7 +12,8 @@ export { StyledGrid, StyledCell, Grid, Cell };
 export * from './constants';
 const componentName = 'Layout Grid (baseui/layout-grid)';
 export const Unstable_StyledGrid = DeprecatedHOC(StyledGrid, componentName);
-export const Unstable_StyledCell = DeprecatedHOC(StyledCell, componentName);
+export const Unstable_StyledCell = DeprecatedHOC(StyledCell, componentName); // @ts-ignore
+
 export const Unstable_Grid = DeprecatedHOC(Grid, componentName);
 export const Unstable_Cell = DeprecatedHOC(Cell, componentName);
 export * from './types';

package/es/layout-grid/styled-components.js

@@ -7,7 +7,8 @@ LICENSE file in the root directory of this source tree.
 import { styled } from '../styles';
 import { getMediaQueries } from '../helpers/responsive-helpers';
 import { BEHAVIOR } from './constants';
-export const StyledGridWrapper = styled('div', ({
+export const StyledGridWrapper = styled('div', // @ts-ignore
+({
   $theme,
   $behavior = BEHAVIOR.fixed,
   $gridMargins = $theme.grid.margins,
@@ -19,7 +20,8 @@ export const StyledGridWrapper = styled('div', ({
 }));
 StyledGridWrapper.displayName = "StyledGridWrapper";
 StyledGridWrapper.displayName = 'StyledGridWrapper';
-export const StyledGrid = styled('div', ({
+export const StyledGrid = styled('div', // @ts-ignore
+({
   $theme,
   $align = null,
   $behavior = BEHAVIOR.fixed,
@@ -56,7 +58,8 @@ export const StyledGrid = styled('div', ({
 });
 StyledGrid.displayName = "StyledGrid";
 StyledGrid.displayName = 'StyledGrid';
-export const StyledCell = styled('div', ({
+export const StyledCell = styled('div', // @ts-ignore
+({
   $theme,
   $align = null,
   $order = null,

package/es/link/index.js

@@ -12,6 +12,7 @@ import { Link } from './styled-components';
 import { withWrapper } from '../styles';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 
+// @ts-ignore
 function LinkFocus(props) {
   const [focusVisible, setFocusVisible] = React.useState(false);
 

package/es/list/list-heading.js

@@ -11,6 +11,7 @@ import * as ReactIs from 'react-is';
 import { getOverrides } from '../helpers/overrides';
 import { StyledHeadingRoot, StyledHeadingContent, StyledHeadingContentRow, StyledHeadingEndEnhancerContainer, StyledHeadingEndEnhancerDescriptionContainer, StyledHeadingMainHeading, StyledHeadingSubHeading } from './styled-components';
 
+// @ts-ignore
 function RenderNode(props) {
   const {
     component,
@@ -31,7 +32,8 @@ function RenderNode(props) {
   }
 
   return Component;
-}
+} // @ts-ignore
+
 
 function isMaxLinesValid(maxLines) {
   return maxLines === 1 || maxLines === 2;
@@ -63,27 +65,24 @@ const ListHeading = /*#__PURE__*/React.forwardRef((props, ref) => {
     }
   }
 
-  return (
-    /*#__PURE__*/
-    // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    React.createElement(Root, _extends({
-      ref: ref
-    }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
-      $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
-    }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-      component: props.heading
-    })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
-      $isText: isEndEnhancerString
-    }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-      component: EndEnhancer
-    }))), (Boolean(SubHeading) || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
-      $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
-    }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
-      component: SubHeading
-    })), Boolean(EndEnhancerDescription) && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
-      component: EndEnhancerDescription
-    })))))
-  );
+  return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  , _extends({
+    ref: ref
+  }, rootProps), /*#__PURE__*/React.createElement(Content, contentProps, /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(HeadingContainer, _extends({
+    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
+  }, headingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: props.heading
+  })), EndEnhancer && /*#__PURE__*/React.createElement(EndEnhancerContainer, _extends({
+    $isText: isEndEnhancerString
+  }, endEnhancerContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancer
+  }))), (Boolean(SubHeading) || EndEnhancerDescription) && /*#__PURE__*/React.createElement(StyledHeadingContentRow, null, /*#__PURE__*/React.createElement(SubHeadingContainer, _extends({
+    $maxLines: isMaxLinesValid(maxLines) ? maxLines : 1
+  }, subHeadingContainerProps), /*#__PURE__*/React.createElement(RenderNode, {
+    component: SubHeading
+  })), Boolean(EndEnhancerDescription) && isEndEnhancerString && /*#__PURE__*/React.createElement(EndEnhancerDescriptionContainer, endEnhancerDescriptionContainerProps, /*#__PURE__*/React.createElement(RenderNode, {
+    component: EndEnhancerDescription
+  })))));
 });
 ListHeading.displayName = 'ListHeading';
 export default ListHeading;

package/es/list/list-item.js

@@ -38,14 +38,18 @@ const ListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
       return props.artworkSize || ARTWORK_SIZES.MEDIUM;
     }
   }, [props.artworkSize, props.sublist]);
+  const isTapTarget = Boolean(props.onClick);
   return /*#__PURE__*/React.createElement(Root // eslint-disable-next-line @typescript-eslint/no-explicit-any
   , _extends({
     ref: ref,
     $shape: props.shape || SHAPE.DEFAULT,
+    $as: isTapTarget ? 'button' : 'li',
+    $isTapTarget: isTapTarget,
     "aria-label": props['aria-label'],
     "aria-selected": props['aria-selected'],
     id: props.id,
-    role: props.role
+    role: props.role,
+    onClick: props.onClick
   }, rootProps), Artwork && /*#__PURE__*/React.createElement(ArtworkContainer, _extends({
     $artworkSize: artworkSize,
     $sublist: Boolean(props.sublist)

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

@@ -0,0 +1,20 @@
+/*
+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 { FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS } from './constants';
+const arrowSize = 8;
+const FLOATING_ROUTE_MARKER_OFFSETS = Object.freeze({
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft]: offset => `translate(calc(${arrowSize}px + ${offset}px), calc(${arrowSize}px + ${offset}px))`,
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topRight]: offset => `translate(calc(-100% - ${arrowSize}px - ${offset}px), calc(${arrowSize}px + ${offset}px))`,
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft]: offset => `translate(calc(${arrowSize}px + ${offset}px), calc(-100% - ${arrowSize}px - ${offset}px))`,
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomRight]: offset => `translate(calc(-100% - ${arrowSize}px - ${offset}px), calc(-100% - ${arrowSize}px - ${offset}px))`,
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topCenter]: offset => `translate(-50%, calc(${arrowSize}px + ${offset}px))`,
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomCenter]: offset => `translate(-50%, calc(-100% - ${arrowSize}px - ${offset}px))`,
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.leftCenter]: offset => `translate(calc(${arrowSize}px + ${offset}px), -50% )`,
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.rightCenter]: offset => `translate(calc(-100% - ${arrowSize}px - ${offset}px), -50%)`
+});
+export function calculateFloatingRouteMarkerOffsets(anchorPosition, offset = 0) {
+  return FLOATING_ROUTE_MARKER_OFFSETS[anchorPosition](offset);
+}

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,
@@ -224,4 +237,106 @@ export const EARNER_LOCATION_PUCK_CORE_SCALES = Object.freeze({
   [LOCATION_PUCK_SIZES.small]: '50%',
   [LOCATION_PUCK_SIZES.medium]: '75%',
   [LOCATION_PUCK_SIZES.large]: '100%'
+});
+export const FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS = Object.freeze({
+  topLeft: 'top-left',
+  topCenter: 'top-center',
+  topRight: 'top-right',
+  rightCenter: 'right-center',
+  bottomRight: 'bottom-right',
+  bottomCenter: 'bottom-center',
+  bottomLeft: 'bottom-left',
+  leftCenter: 'left-center'
+});
+export const FLOATING_ROUTE_MARKER_POINTER_TYPES = Object.freeze({
+  diagonal: 'diagonal',
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+});
+export const FLOATING_ROUTE_MARKER_POINTERS = Object.freeze({
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft]: {
+    type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+    path: 'M0 0L24 8L8 24L0 0Z'
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topRight]: {
+    type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+    path: 'M24 0L0 8L16 24L24 0Z'
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topCenter]: {
+    type: FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical,
+    path: 'M8.49928 0L0.499411 8L16.5006 8L8.49928 0Z'
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft]: {
+    type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+    path: 'M0 24L24 16L8 0L0 24Z'
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomRight]: {
+    type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+    path: 'M24 24L0 16L16 0L24 24Z'
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomCenter]: {
+    type: FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical,
+    path: 'M8.00133 8L16.0012 0H0L8.00133 8Z'
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.leftCenter]: {
+    type: FLOATING_ROUTE_MARKER_POINTER_TYPES.horizontal,
+    path: 'M0.000610352 8.00059L8.00061 16.0005L8.00061 -0.000732422L0.000610352 8.00059Z'
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.rightCenter]: {
+    type: FLOATING_ROUTE_MARKER_POINTER_TYPES.horizontal,
+    path: 'M8.00061 7.99916L0.000610352 -0.000711441L0.000610352 16.0005L8.00061 7.99916Z'
+  }
+});
+export const FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS = Object.freeze({
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft]: {
+    transform: `translate(-33.33%, -33.33%)`
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topRight]: {
+    right: 0,
+    transform: `translate(33.33%, -33.33%)`
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft]: {
+    transform: `translate(-33.33%, 33.33%)`,
+    bottom: 0
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomRight]: {
+    right: 0,
+    transform: `translate(33.33%, 33.33%)`,
+    bottom: 0
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topCenter]: {
+    right: '50%',
+    transform: `translate(50%, -100%)`
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomCenter]: {
+    bottom: 0,
+    right: '50%',
+    transform: `translate(50%, 100%)`
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.leftCenter]: {
+    top: '50%',
+    transform: `translate(-100%, -50%)`
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.rightCenter]: {
+    left: '100%',
+    top: '50%',
+    transform: `translate(0%, -50%)`
+  }
+});
+export const FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES = Object.freeze({
+  [FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal]: {
+    height: '24',
+    width: '24',
+    viewBox: '0 0 24 24'
+  },
+  [FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical]: {
+    height: '8',
+    width: '17',
+    viewBox: '0 0 17 8'
+  },
+  [FLOATING_ROUTE_MARKER_POINTER_TYPES.horizontal]: {
+    height: '16',
+    width: '8',
+    viewBox: '0 0 8 16'
+  }
 });

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

@@ -0,0 +1,72 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+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 { 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, StyledLabelSlot, StyledFloatingRouteMarkerPointerContainer, StyledFloatingRouteMarkerPointer } from './styled-components';
+
+const FloatingRouteMarker = ({
+  label,
+  secondaryLabel,
+  startEnhancer: StartEnhancer,
+  endEnhancer: EndEnhancer,
+  selected = false,
+  anchorPosition = FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft,
+  overrides = {}
+}) => {
+  const [css, theme] = useStyletron();
+  const backgroundColor = selected ? theme.colors.backgroundInversePrimary : theme.colors.backgroundPrimary;
+  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, StyledLabelSlot);
+  const [PrimaryLabel, primaryLabelProps] = getOverrides(overrides.Label, LabelMedium);
+  const [SecondaryLabel, secondaryLabelProps] = getOverrides(overrides.SecondaryLabel, LabelSmall);
+  const [Pointer, pointerProps] = getOverrides(overrides.Pointer, StyledFloatingRouteMarkerPointer);
+  const [PointerContainer, pointerContainerProps] = getOverrides(overrides.PointerContainer, StyledFloatingRouteMarkerPointerContainer);
+  const size = PINHEAD_SIZES_SHAPES.medium;
+  const {
+    icon
+  } = PINHEAD_DIMENSIONS[size];
+  const activeElements = [label, StartEnhancer, EndEnhancer].filter(x => x);
+  const gridTemplateColumns = activeElements.map(() => 'auto').join(' ');
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    "data-baseweb": "floating-route-map-marker",
+    $background: backgroundColor,
+    $gridTemplateColumns: gridTemplateColumns
+  }, rootProps), StartEnhancer && /*#__PURE__*/React.createElement(IconContainer, _extends({
+    $color: color,
+    $size: size
+  }, iconContainerProps), /*#__PURE__*/React.createElement(StartEnhancer, {
+    size: icon
+  })), label && /*#__PURE__*/React.createElement("div", {
+    className: css({
+      display: 'flex',
+      flexDirection: 'column'
+    })
+  }, /*#__PURE__*/React.createElement(PrimaryLabel, _extends({
+    $color: color
+  }, primaryLabelProps), label), /*#__PURE__*/React.createElement(SecondaryLabel, _extends({
+    $color: secondaryLabelColor
+  }, secondaryLabelProps), secondaryLabel)), EndEnhancer && /*#__PURE__*/React.createElement(IconContainer, _extends({
+    $color: color,
+    $size: size
+  }, iconContainerProps), /*#__PURE__*/React.createElement(EndEnhancer, {
+    size: icon
+  })), /*#__PURE__*/React.createElement(PointerContainer, _extends({
+    $position: anchorPosition,
+    xmlns: "http://www.w3.org/2000/svg"
+  }, FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES[FLOATING_ROUTE_MARKER_POINTERS[anchorPosition].type], pointerContainerProps), /*#__PURE__*/React.createElement(Pointer, _extends({
+    d: FLOATING_ROUTE_MARKER_POINTERS[anchorPosition].path,
+    $background: backgroundColor
+  }, pointerProps))));
+};
+
+export default FloatingRouteMarker;

package/es/map-marker/index.js

@@ -7,6 +7,8 @@ LICENSE file in the root directory of this source tree.
 export { default as FixedMarker } from './fixed-marker';
 export { default as FloatingMarker } from './floating-marker';
 export { default as LocationPuck } from './location-puck';
-export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND, PINHEAD_DIMENSIONS, LOCATION_PUCK_SIZES, LOCATION_PUCK_TYPES } from './constants';
+export { default as FloatingRouteMarker } from './floating-route-marker';
+export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND, PINHEAD_DIMENSIONS, LOCATION_PUCK_SIZES, LOCATION_PUCK_TYPES, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS } from './constants';
+export { calculateFloatingRouteMarkerOffsets } from './calculate-offsets';
 export * from './types';
 /** @deprecated use AnchorPositions instead. To be removed in future versions.*/

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