baseui 12.1.3 → 13.0.0

package/map-marker/constants.d.ts

@@ -238,3 +238,105 @@ export declare const EARNER_LOCATION_PUCK_CORE_SCALES: Readonly<{
     readonly medium: "75%";
     readonly large: "100%";
 }>;
+export declare const FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS: Readonly<{
+    readonly topLeft: "top-left";
+    readonly topCenter: "top-center";
+    readonly topRight: "top-right";
+    readonly rightCenter: "right-center";
+    readonly bottomRight: "bottom-right";
+    readonly bottomCenter: "bottom-center";
+    readonly bottomLeft: "bottom-left";
+    readonly leftCenter: "left-center";
+}>;
+export declare const FLOATING_ROUTE_MARKER_POINTER_TYPES: Readonly<{
+    readonly diagonal: "diagonal";
+    readonly horizontal: "horizontal";
+    readonly vertical: "vertical";
+}>;
+export declare const FLOATING_ROUTE_MARKER_POINTERS: Readonly<{
+    readonly "top-left": {
+        readonly type: "diagonal";
+        readonly path: "M0 0L24 8L8 24L0 0Z";
+    };
+    readonly "top-right": {
+        readonly type: "diagonal";
+        readonly path: "M24 0L0 8L16 24L24 0Z";
+    };
+    readonly "top-center": {
+        readonly type: "vertical";
+        readonly path: "M8.49928 0L0.499411 8L16.5006 8L8.49928 0Z";
+    };
+    readonly "bottom-left": {
+        readonly type: "diagonal";
+        readonly path: "M0 24L24 16L8 0L0 24Z";
+    };
+    readonly "bottom-right": {
+        readonly type: "diagonal";
+        readonly path: "M24 24L0 16L16 0L24 24Z";
+    };
+    readonly "bottom-center": {
+        readonly type: "vertical";
+        readonly path: "M8.00133 8L16.0012 0H0L8.00133 8Z";
+    };
+    readonly "left-center": {
+        readonly type: "horizontal";
+        readonly path: "M0.000610352 8.00059L8.00061 16.0005L8.00061 -0.000732422L0.000610352 8.00059Z";
+    };
+    readonly "right-center": {
+        readonly type: "horizontal";
+        readonly path: "M8.00061 7.99916L0.000610352 -0.000711441L0.000610352 16.0005L8.00061 7.99916Z";
+    };
+}>;
+export declare const FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS: Readonly<{
+    readonly "top-left": {
+        readonly transform: "translate(-33.33%, -33.33%)";
+    };
+    readonly "top-right": {
+        readonly right: 0;
+        readonly transform: "translate(33.33%, -33.33%)";
+    };
+    readonly "bottom-left": {
+        readonly transform: "translate(-33.33%, 33.33%)";
+        readonly bottom: 0;
+    };
+    readonly "bottom-right": {
+        readonly right: 0;
+        readonly transform: "translate(33.33%, 33.33%)";
+        readonly bottom: 0;
+    };
+    readonly "top-center": {
+        readonly right: "50%";
+        readonly transform: "translate(50%, -100%)";
+    };
+    readonly "bottom-center": {
+        readonly bottom: 0;
+        readonly right: "50%";
+        readonly transform: "translate(50%, 100%)";
+    };
+    readonly "left-center": {
+        readonly top: "50%";
+        readonly transform: "translate(-100%, -50%)";
+    };
+    readonly "right-center": {
+        readonly left: "100%";
+        readonly top: "50%";
+        readonly transform: "translate(0%, -50%)";
+    };
+}>;
+export declare const FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES: Readonly<{
+    readonly diagonal: {
+        readonly height: "24";
+        readonly width: "24";
+        readonly viewBox: "0 0 24 24";
+    };
+    readonly vertical: {
+        readonly height: "8";
+        readonly width: "17";
+        readonly viewBox: "0 0 17 8";
+    };
+    readonly horizontal: {
+        readonly height: "16";
+        readonly width: "8";
+        readonly viewBox: "0 0 8 16";
+    };
+}>;

package/map-marker/constants.js

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.xxSmallPinheadDimension = exports.xSmallPinheadDimension = exports.dragShadowWidth = exports.dragShadowMarginTop = exports.dragShadowHeight = exports.anchorSize = exports.PINHEAD_TYPES = exports.PINHEAD_SIZES_SHAPES = exports.PINHEAD_DIMENSIONS = exports.NEEDLE_SIZES = exports.NEEDLE_HEIGHTS = exports.LOCATION_PUCK_TYPES = exports.LOCATION_PUCK_SIZES = exports.LABEL_SIZES = exports.LABEL_ENHANCER_POSITIONS = exports.KIND = exports.FLOATING_MARKER_SIZES = exports.FLOATING_MARKER_ANCHOR_TYPES = exports.FLOATING_MARKER_ANCHOR_POSITIONS = exports.EARNER_LOCATION_PUCK_CORE_SCALES = exports.BADGE_ENHANCER_STYLES = exports.BADGE_ENHANCER_SIZES = exports.BADGE_ENHANCER_POSITIONS = exports.BADGE_ENHANCER_CONTENT_SIZE = void 0;
+exports.xxSmallPinheadDimension = exports.xSmallPinheadDimension = exports.dragShadowWidth = exports.dragShadowMarginTop = exports.dragShadowHeight = exports.anchorSize = exports.PINHEAD_TYPES = exports.PINHEAD_SIZES_SHAPES = exports.PINHEAD_DIMENSIONS = exports.NEEDLE_SIZES = exports.NEEDLE_HEIGHTS = exports.LOCATION_PUCK_TYPES = exports.LOCATION_PUCK_SIZES = exports.LABEL_SIZES = exports.LABEL_ENHANCER_POSITIONS = exports.KIND = exports.FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES = exports.FLOATING_ROUTE_MARKER_POINTER_TYPES = exports.FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS = exports.FLOATING_ROUTE_MARKER_POINTERS = exports.FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS = exports.FLOATING_MARKER_SIZES = exports.FLOATING_MARKER_ANCHOR_TYPES = exports.FLOATING_MARKER_ANCHOR_POSITIONS = exports.EARNER_LOCATION_PUCK_CORE_SCALES = exports.BADGE_ENHANCER_STYLES = exports.BADGE_ENHANCER_SIZES = exports.BADGE_ENHANCER_POSITIONS = exports.BADGE_ENHANCER_CONTENT_SIZE = void 0;
 
-var _Object$freeze, _Object$freeze2, _LABEL_SIZES, _xSmallPinheadBadge, _PINHEAD_SIZES_SHAPES, _PINHEAD_SIZES_SHAPES2, _PINHEAD_SIZES_SHAPES3, _BADGE_ENHANCER_POSIT, _BADGE_ENHANCER_STYLE, _BADGE_ENHANCER_CONTE, _Object$freeze3;
+var _Object$freeze, _Object$freeze2, _LABEL_SIZES, _xSmallPinheadBadge, _PINHEAD_SIZES_SHAPES, _PINHEAD_SIZES_SHAPES2, _PINHEAD_SIZES_SHAPES3, _BADGE_ENHANCER_POSIT, _BADGE_ENHANCER_STYLE, _BADGE_ENHANCER_CONTE, _Object$freeze3, _Object$freeze4, _Object$freeze5, _Object$freeze6;
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
@@ -22,7 +22,8 @@ var NEEDLE_SIZES = Object.freeze({
   tall: 'tall'
 });
 exports.NEEDLE_SIZES = NEEDLE_SIZES;
-var NEEDLE_HEIGHTS = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, NEEDLE_SIZES.none, 0), _defineProperty(_Object$freeze, NEEDLE_SIZES.short, 4), _defineProperty(_Object$freeze, NEEDLE_SIZES.medium, 12), _defineProperty(_Object$freeze, NEEDLE_SIZES.tall, 20), _Object$freeze));
+var NEEDLE_HEIGHTS = Object.freeze((_Object$freeze = {}, _defineProperty(_Object$freeze, NEEDLE_SIZES.none, 0), _defineProperty(_Object$freeze, NEEDLE_SIZES.short, 4), _defineProperty(_Object$freeze, NEEDLE_SIZES.medium, 12), _defineProperty(_Object$freeze, NEEDLE_SIZES.tall, 20), _Object$freeze)); // Important: keep this sorted by size, as it used to determine label size when a secondary label is used.
+
 exports.NEEDLE_HEIGHTS = NEEDLE_HEIGHTS;
 var PINHEAD_SIZES_SHAPES = Object.freeze({
   xxSmallCircle: 'xx-small-circle',
@@ -190,4 +191,89 @@ var LOCATION_PUCK_TYPES = Object.freeze({
 });
 exports.LOCATION_PUCK_TYPES = LOCATION_PUCK_TYPES;
 var EARNER_LOCATION_PUCK_CORE_SCALES = Object.freeze((_Object$freeze3 = {}, _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.small, '50%'), _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.medium, '75%'), _defineProperty(_Object$freeze3, LOCATION_PUCK_SIZES.large, '100%'), _Object$freeze3));
-exports.EARNER_LOCATION_PUCK_CORE_SCALES = EARNER_LOCATION_PUCK_CORE_SCALES;
+exports.EARNER_LOCATION_PUCK_CORE_SCALES = EARNER_LOCATION_PUCK_CORE_SCALES;
+var 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'
+});
+exports.FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS = FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS;
+var FLOATING_ROUTE_MARKER_POINTER_TYPES = Object.freeze({
+  diagonal: 'diagonal',
+  horizontal: 'horizontal',
+  vertical: 'vertical'
+});
+exports.FLOATING_ROUTE_MARKER_POINTER_TYPES = FLOATING_ROUTE_MARKER_POINTER_TYPES;
+var FLOATING_ROUTE_MARKER_POINTERS = Object.freeze((_Object$freeze4 = {}, _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+  path: 'M0 0L24 8L8 24L0 0Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topRight, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+  path: 'M24 0L0 8L16 24L24 0Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topCenter, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical,
+  path: 'M8.49928 0L0.499411 8L16.5006 8L8.49928 0Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+  path: 'M0 24L24 16L8 0L0 24Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomRight, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal,
+  path: 'M24 24L0 16L16 0L24 24Z'
+}), _defineProperty(_Object$freeze4, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomCenter, {
+  type: FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical,
+  path: 'M8.00133 8L16.0012 0H0L8.00133 8Z'
+}), _defineProperty(_Object$freeze4, 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'
+}), _defineProperty(_Object$freeze4, 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'
+}), _Object$freeze4));
+exports.FLOATING_ROUTE_MARKER_POINTERS = FLOATING_ROUTE_MARKER_POINTERS;
+var FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS = Object.freeze((_Object$freeze5 = {}, _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topLeft, {
+  transform: "translate(-33.33%, -33.33%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topRight, {
+  right: 0,
+  transform: "translate(33.33%, -33.33%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomLeft, {
+  transform: "translate(-33.33%, 33.33%)",
+  bottom: 0
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomRight, {
+  right: 0,
+  transform: "translate(33.33%, 33.33%)",
+  bottom: 0
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.topCenter, {
+  right: '50%',
+  transform: "translate(50%, -100%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.bottomCenter, {
+  bottom: 0,
+  right: '50%',
+  transform: "translate(50%, 100%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.leftCenter, {
+  top: '50%',
+  transform: "translate(-100%, -50%)"
+}), _defineProperty(_Object$freeze5, FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.rightCenter, {
+  left: '100%',
+  top: '50%',
+  transform: "translate(0%, -50%)"
+}), _Object$freeze5));
+exports.FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS = FLOATING_ROUTE_MARKER_POINTER_TRANSFORMS;
+var FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES = Object.freeze((_Object$freeze6 = {}, _defineProperty(_Object$freeze6, FLOATING_ROUTE_MARKER_POINTER_TYPES.diagonal, {
+  height: '24',
+  width: '24',
+  viewBox: '0 0 24 24'
+}), _defineProperty(_Object$freeze6, FLOATING_ROUTE_MARKER_POINTER_TYPES.vertical, {
+  height: '8',
+  width: '17',
+  viewBox: '0 0 17 8'
+}), _defineProperty(_Object$freeze6, FLOATING_ROUTE_MARKER_POINTER_TYPES.horizontal, {
+  height: '16',
+  width: '8',
+  viewBox: '0 0 8 16'
+}), _Object$freeze6));
+exports.FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES = FLOATING_ROUTE_MARKER_POINTER_TYPE_WRAPPER_SIZES;

package/map-marker/constants.js.flow

@@ -238,6 +238,73 @@ export const EARNER_LOCATION_PUCK_CORE_SCALES = Object.freeze({
   [LOCATION_PUCK_SIZES.large]: '100%',
 });
 
+export const FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS = Object.freeze({
+  topLeft: 'top-left',
+  topRight: 'top-right',
+  topCenter: 'top-center',
+  bottomLeft: 'bottom-left',
+  bottomRight: 'bottom-right',
+  bottomCenter: 'bottom-center',
+  leftCenter: 'left-center',
+  rightCenter: 'right-center',
+});
+
+export const FLOATING_ROUTE_MARKER_POINTER_POSITIONS = 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.topCenter]: {
+    right: '50%',
+    transform: `translate(50%, -100%) rotate(180deg)`,
+  },
+  [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.bottomCenter]: {
+    bottom: 0,
+    right: '50%',
+    transform: `translate(50%, 100%)`,
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.leftCenter]: {
+    top: '50%',
+    transform: `translate(0%, -50%) rotate(90deg)`,
+  },
+  [FLOATING_ROUTE_MARKER_ANCHOR_POSITIONS.rightCenter]: {
+    left: '100%',
+    top: '50%',
+    transform: `translate(0%, -50%) rotate(270deg)`,
+    transformOrigin: 'center',
+  },
+});
+
+export const FLOATING_ROUTE_MARKER_POINTER_TYPES = Object.freeze({
+  diagonal: 'diagonal',
+  standard: 'standard',
+});
+
+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.standard]: {
+    height: '10',
+    width: '18',
+    viewBox: '0 0 18 10',
+  },
+});
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

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

@@ -6,136 +6,12 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import { useStyletron, type ThemeT } from '../styles/index.js';
-import { getOverrides } from '../helpers/overrides.js';
-import {
-  PINHEAD_TYPES,
-  NEEDLE_SIZES,
-  PINHEAD_SIZES_SHAPES,
-  LABEL_ENHANCER_POSITIONS,
-  KIND,
-  dragShadowHeight,
-  dragShadowMarginTop,
-} from './constants.js';
-import PinHead from './pin-head.js';
-import Needle from './needle.js';
-import DragShadow from './drag-shadow.js';
-import { StyledFixedMarkerDragContainer, StyledFixedMarkerRoot } from './styled-components.js';
-import type { FixedMarkerPropsT, KindT } from './types.js';
-
-type Colors = {
-  color: string,
-  backgroundColor: string,
-};
-
-function getColors(kind: KindT, theme: ThemeT): Colors {
-  if (kind === KIND.accent) {
-    return {
-      color: theme.colors.contentInversePrimary,
-      backgroundColor: theme.colors.backgroundAccent,
-    };
-  }
-  if (kind === KIND.negative) {
-    return {
-      color: theme.colors.contentInversePrimary,
-      backgroundColor: theme.colors.backgroundNegative,
-    };
-  }
-  return {
-    color: theme.colors.contentInversePrimary,
-    backgroundColor: theme.colors.backgroundInversePrimary,
-  };
-}
-
-const FixedMarker = ({
-  size = PINHEAD_SIZES_SHAPES.medium,
-  needle = NEEDLE_SIZES.medium,
-  label,
-  startEnhancer,
-  endEnhancer,
-  kind = KIND.default,
-  dragging = false,
-  overrides = {},
-  labelEnhancerContent = null,
-  labelEnhancerPosition = LABEL_ENHANCER_POSITIONS.bottom,
-  badgeEnhancerSize = null,
-  badgeEnhancerContent = null,
-  ...restProps
-}: FixedMarkerPropsT) => {
-  const [, theme] = useStyletron();
-  const { color, backgroundColor } = getColors(kind, theme);
-
-  const doesPinHeadTransformOnDrag =
-    needle !== NEEDLE_SIZES.none &&
-    size !== PINHEAD_SIZES_SHAPES.xxSmallCircle &&
-    size !== PINHEAD_SIZES_SHAPES.xxSmallSquare;
-
-  const [Root, rootProps] = getOverrides(overrides.Root, StyledFixedMarkerRoot);
-  const [FixedMarkerDragContainer, fixedMarkerDragContainerProps] = getOverrides(
-    overrides.DragContainer,
-    StyledFixedMarkerDragContainer
-  );
-
-  const renderNeedle =
-    needle !== NEEDLE_SIZES.none &&
-    ![PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare].includes(size);
-
-  if (__DEV__) {
-    if (
-      needle !== NEEDLE_SIZES.none &&
-      [PINHEAD_SIZES_SHAPES.xxSmallCircle, PINHEAD_SIZES_SHAPES.xxSmallSquare].includes(size)
-    ) {
-      console.warn(
-        `Needles cannot be rendered with ${PINHEAD_SIZES_SHAPES.xxSmallCircle} or ${PINHEAD_SIZES_SHAPES.xxSmallSquare} pin heads`
-      );
-    }
-  }
-  const enhancers = {};
-  if (startEnhancer) {
-    enhancers.startEnhancer = startEnhancer;
-  }
-  if (endEnhancer) {
-    enhancers.endEnhancer = endEnhancer;
-  }
-  return (
-    <Root data-baseweb="fixed-map-marker" {...rootProps}>
-      <FixedMarkerDragContainer
-        $translateAmount={dragShadowMarginTop + dragShadowHeight}
-        $performTranslate={doesPinHeadTransformOnDrag && !dragging}
-        {...fixedMarkerDragContainerProps}
-      >
-        <PinHead
-          size={size}
-          label={label}
-          {...enhancers}
-          color={color}
-          background={backgroundColor}
-          type={PINHEAD_TYPES.fixed}
-          overrides={overrides}
-          badgeEnhancerSize={badgeEnhancerSize}
-          badgeEnhancerContent={badgeEnhancerContent}
-          labelEnhancerContent={labelEnhancerContent}
-          labelEnhancerPosition={labelEnhancerPosition}
-          needle={needle}
-        />
-        {renderNeedle && (
-          <Needle size={needle} background={backgroundColor} overrides={overrides} />
-        )}
-      </FixedMarkerDragContainer>
-      {doesPinHeadTransformOnDrag && (
-        <DragShadow
-          background={backgroundColor}
-          dragging={dragging}
-          height={dragShadowMarginTop + dragShadowHeight}
-          overrides={overrides}
-        />
-      )}
-    </Root>
-  );
-};
+import type { FixedMarkerPropsT } from './types.js';
+declare var FixedMarker: (props: FixedMarkerPropsT) => React.Node;
 
 export default FixedMarker;
 
+
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;

package/map-marker/floating-marker.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import type { FloatingMarkerProps } from './types';
-declare const FloatingMarker: ({ label, size, anchor, endEnhancer, startEnhancer, anchorType, overrides, }: FloatingMarkerProps) => JSX.Element;
+declare const FloatingMarker: ({ label, secondaryLabel, size, anchor, endEnhancer, startEnhancer, anchorType, overrides, }: FloatingMarkerProps) => JSX.Element;
 export default FloatingMarker;

package/map-marker/floating-marker.js

@@ -39,6 +39,7 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+// @ts-ignore
 function getAnchorPinHeadSize(anchorType) {
   if (anchorType === _constants.FLOATING_MARKER_ANCHOR_TYPES.circle) {
     return _constants.PINHEAD_SIZES_SHAPES.xSmallCircle;
@@ -53,6 +54,7 @@ function getAnchorPinHeadSize(anchorType) {
 
 var FloatingMarker = function FloatingMarker(_ref) {
   var label = _ref.label,
+      secondaryLabel = _ref.secondaryLabel,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? _constants.PINHEAD_SIZES_SHAPES.medium : _ref$size,
       _ref$anchor = _ref.anchor,
@@ -102,6 +104,7 @@ var FloatingMarker = function FloatingMarker(_ref) {
     background: backgroundPrimary,
     type: _constants.PINHEAD_TYPES.floating,
     label: label,
+    secondaryLabel: secondaryLabel,
     startEnhancer: startEnhancer,
     endEnhancer: endEnhancer,
     overrides: overrides

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

@@ -6,98 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import { useStyletron } from '../styles/index.js';
-import PinHead from './pin-head.js';
-import { getOverrides } from '../helpers/overrides.js';
-import {
-  StyledFloatingMarkerRoot,
-  StyledFloatingMarkerAnchorContainer,
-  StyledFloatingMarkerPinHeadContainer,
-} from './styled-components.js';
 import type { FloatingMarkerPropsT } from './types.js';
-import {
-  FLOATING_MARKER_ANCHOR_POSITIONS,
-  PINHEAD_SIZES_SHAPES,
-  PINHEAD_TYPES,
-  FLOATING_MARKER_ANCHOR_TYPES,
-  PINHEAD_DIMENSIONS,
-} from './constants.js';
-
-function getAnchorPinHeadSize(anchorType) {
-  if (anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle) {
-    return PINHEAD_SIZES_SHAPES.xSmallCircle;
-  } else if (anchorType === FLOATING_MARKER_ANCHOR_TYPES.square) {
-    return PINHEAD_SIZES_SHAPES.xSmallSquare;
-  } else if (anchorType === FLOATING_MARKER_ANCHOR_TYPES.xxSmallSquare) {
-    return PINHEAD_SIZES_SHAPES.xxSmallSquare;
-  } else {
-    return PINHEAD_SIZES_SHAPES.xxSmallCircle;
-  }
-}
-
-const FloatingMarker = ({
-  label,
-  size = PINHEAD_SIZES_SHAPES.medium,
-  anchor = FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft,
-  endEnhancer,
-  startEnhancer,
-  anchorType = FLOATING_MARKER_ANCHOR_TYPES.circle,
-  overrides = {},
-}: FloatingMarkerPropsT) => {
-  const [, theme] = useStyletron();
-  const {
-    colors: { backgroundPrimary, backgroundInversePrimary, primaryA, primaryB },
-  } = theme;
-
-  const anchorPinHeadSize = getAnchorPinHeadSize(anchorType);
-
-  const [Root, rootProps] = getOverrides(overrides.Root, StyledFloatingMarkerRoot);
-  const [FloatingMarkerPinHeadContainer, floatingMarkerPinHeadContainerProps] = getOverrides(
-    overrides.PinHeadContainer,
-    StyledFloatingMarkerPinHeadContainer
-  );
-
-  const [FloatingMarkerAnchorContainer, floatingMarkerAnchorContainerProps] = getOverrides(
-    overrides.AnchorContainer,
-    StyledFloatingMarkerAnchorContainer
-  );
-
-  return (
-    <Root
-      data-baseweb="floating-map-marker"
-      $size={PINHEAD_DIMENSIONS[anchorPinHeadSize].height}
-      {...rootProps}
-    >
-      <FloatingMarkerPinHeadContainer
-        $anchor={anchor}
-        $anchorSize={PINHEAD_DIMENSIONS[anchorPinHeadSize].height}
-        {...floatingMarkerPinHeadContainerProps}
-      >
-        <PinHead
-          size={size}
-          color={primaryA}
-          background={backgroundPrimary}
-          type={PINHEAD_TYPES.floating}
-          label={label}
-          startEnhancer={startEnhancer}
-          endEnhancer={endEnhancer}
-          overrides={overrides}
-        />
-      </FloatingMarkerPinHeadContainer>
-      {anchor !== FLOATING_MARKER_ANCHOR_POSITIONS.none && (
-        <FloatingMarkerAnchorContainer {...floatingMarkerAnchorContainerProps}>
-          <PinHead
-            size={anchorPinHeadSize}
-            color={primaryB}
-            background={backgroundInversePrimary}
-            type={PINHEAD_TYPES.fixed}
-            overrides={overrides}
-          />
-        </FloatingMarkerAnchorContainer>
-      )}
-    </Root>
-  );
-};
+declare var FloatingMarker: (props: FloatingMarkerPropsT) => React.Node;
 
 export default FloatingMarker;
 

package/map-marker/floating-route-marker.d.ts

@@ -0,0 +1,4 @@
+/// <reference types="react" />
+import type { FloatingRouteMarkerProps } from './types';
+declare const FloatingRouteMarker: ({ label, secondaryLabel, startEnhancer: StartEnhancer, endEnhancer: EndEnhancer, selected, anchorPosition, overrides, }: FloatingRouteMarkerProps) => JSX.Element;
+export default FloatingRouteMarker;