baseui 10.7.2 → 10.9.0

package/es/map-marker/drag-shadow.js

@@ -0,0 +1,32 @@
+function _extends() { _extends = Object.assign || 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 { getOverrides } from '../helpers/overrides.js';
+import { dragShadowWidth } from './constants.js';
+import { StyledDragShadow, StyledDragShadowContainer } from './styled-components.js';
+
+const DragShadow = ({
+  background,
+  dragging,
+  height,
+  overrides = {}
+}) => {
+  const [DragShadowContainer, dragShadowContainerProps] = getOverrides(overrides.DragShadowContainer, StyledDragShadowContainer);
+  const [DragShadow, dragShadowProps] = getOverrides(overrides.DragShadow, StyledDragShadow);
+  return /*#__PURE__*/React.createElement(DragShadowContainer, _extends({
+    $width: dragShadowWidth,
+    $height: height,
+    $dragging: dragging
+  }, dragShadowContainerProps), /*#__PURE__*/React.createElement(DragShadow, _extends({
+    $width: dragShadowWidth,
+    $background: background
+  }, dragShadowProps)));
+};
+
+export default DragShadow;

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

@@ -9,39 +9,32 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import { useStyletron } from '../styles/index.js';
 import { getOverrides } from '../helpers/overrides.js';
-import { PINHEAD_TYPES, NEEDLE_SIZES, NEEDLE_HEIGHTS, PINHEAD_SIZES_SHAPES, dragShadowHeight, dragShadowMarginTop, dragShadowWidth } from './constants.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 { FixedMarkerDragContainer as StyledFixedMarkerDragContainer, FixedMarkerRoot as StyledRoot, Needle as StyledNeedle, DragShadow as StyledDragShadow, DragShadowContainer as StyledDragShadowContainer } from './styled-components.js';
+import Needle from './needle.js';
+import DragShadow from './drag-shadow.js';
+import { StyledFixedMarkerDragContainer, StyledFixedMarkerRoot } from './styled-components.js';
 
-const Needle = ({
-  size,
-  background,
-  overrides = {}
-}) => {
-  const [Needle, needleProps] = getOverrides(overrides.Needle, StyledNeedle);
-  return /*#__PURE__*/React.createElement(Needle, _extends({
-    $background: background,
-    $height: NEEDLE_HEIGHTS[size]
-  }, needleProps));
-};
+function getColors(kind, theme) {
+  if (kind === KIND.accent) {
+    return {
+      color: theme.colors.contentInversePrimary,
+      backgroundColor: theme.colors.backgroundAccent
+    };
+  }
 
-const DragShadow = ({
-  background,
-  dragging,
-  height,
-  overrides = {}
-}) => {
-  const [DragShadowContainer, dragShadowContainerProps] = getOverrides(overrides.DragShadowContainer, StyledDragShadowContainer);
-  const [DragShadow, dragShadowProps] = getOverrides(overrides.DragShadow, StyledDragShadow);
-  return /*#__PURE__*/React.createElement(DragShadowContainer, _extends({
-    $width: dragShadowWidth,
-    $height: height,
-    $dragging: dragging
-  }, dragShadowContainerProps), /*#__PURE__*/React.createElement(DragShadow, _extends({
-    $width: dragShadowWidth,
-    $background: background
-  }, dragShadowProps)));
-};
+  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,
@@ -49,28 +42,36 @@ const FixedMarker = ({
   label,
   startEnhancer,
   endEnhancer,
-  color,
-  background,
+  kind = KIND.default,
   dragging = false,
-  overrides = {}
+  overrides = {},
+  labelEnhancerContent = null,
+  labelEnhancerPosition = LABEL_ENHANCER_POSITIONS.bottom,
+  badgeEnhancerSize = null,
+  badgeEnhancerContent = null,
+  ...restProps
 }) => {
   const [, theme] = useStyletron();
   const {
-    colors: {
-      backgroundInversePrimary,
-      primaryB
-    }
-  } = theme;
-  color = color || primaryB;
-  background = background || backgroundInversePrimary;
-  const doesPinHeadTransformOnDrag = needle !== NEEDLE_SIZES.none;
-  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+    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 (process.env.NODE_ENV !== "production") {
+    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`);
+    }
+  }
+
   return /*#__PURE__*/React.createElement(Root, _extends({
     "data-baseweb": "fixed-map-marker"
   }, rootProps), /*#__PURE__*/React.createElement(FixedMarkerDragContainer, _extends({
     $translateAmount: dragShadowMarginTop + dragShadowHeight,
-    $performTranslate: doesPinHeadTransformOnDrag && dragging
+    $performTranslate: doesPinHeadTransformOnDrag && !dragging
   }, fixedMarkerDragContainerProps), /*#__PURE__*/React.createElement(PinHead, _extends({
     size: size,
     label: label
@@ -80,15 +81,20 @@ const FixedMarker = ({
     endEnhancer
   } : {}, {
     color: color,
-    background: background,
+    background: backgroundColor,
     type: PINHEAD_TYPES.fixed,
-    overrides: overrides
-  })), /*#__PURE__*/React.createElement(Needle, {
+    overrides: overrides,
+    badgeEnhancerSize: badgeEnhancerSize,
+    badgeEnhancerContent: badgeEnhancerContent,
+    labelEnhancerContent: labelEnhancerContent,
+    labelEnhancerPosition: labelEnhancerPosition,
+    needle: needle
+  })), renderNeedle && /*#__PURE__*/React.createElement(Needle, {
     size: needle,
-    background: background,
+    background: backgroundColor,
     overrides: overrides
   })), doesPinHeadTransformOnDrag && /*#__PURE__*/React.createElement(DragShadow, {
-    background: background,
+    background: backgroundColor,
     dragging: dragging,
     height: dragShadowMarginTop + dragShadowHeight,
     overrides: overrides

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

@@ -10,12 +10,22 @@ import * as React from 'react';
 import { useStyletron } from '../styles/index.js';
 import PinHead from './pin-head.js';
 import { getOverrides } from '../helpers/overrides.js';
-import { FloatingMarkerRoot as StyledRoot, FloatingMarkerAnchorContainer as StyledFloatingMarkerAnchorContainer, FloatingMarkerPinHeadContainer as StyledFloatingMarkerPinHeadContainer } from './styled-components.js';
-import { FLOATING_MARKER_ANCHOR_POSITIONS, PINHEAD_SIZES_SHAPES, PINHEAD_TYPES, FLOATING_MARKER_ANCHOR_TYPES, anchorSize } from './constants.js';
+import { StyledFloatingMarkerRoot, StyledFloatingMarkerAnchorContainer, StyledFloatingMarkerPinHeadContainer } from './styled-components.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 = ({
-  color,
-  background,
   label,
   size = PINHEAD_SIZES_SHAPES.medium,
   anchor = FLOATING_MARKER_ANCHOR_POSITIONS.bottomLeft,
@@ -33,21 +43,20 @@ const FloatingMarker = ({
       primaryB
     }
   } = theme;
-  color = color || primaryA;
-  background = background || backgroundPrimary;
-  const anchorPinHeadSize = anchorType === FLOATING_MARKER_ANCHOR_TYPES.circle ? PINHEAD_SIZES_SHAPES.xSmallCircle : PINHEAD_SIZES_SHAPES.xSmallSquare;
-  const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
+  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 /*#__PURE__*/React.createElement(Root, _extends({
-    "data-baseweb": "floating-map-marker"
+    "data-baseweb": "floating-map-marker",
+    $size: PINHEAD_DIMENSIONS[anchorPinHeadSize].height
   }, rootProps), /*#__PURE__*/React.createElement(FloatingMarkerPinHeadContainer, _extends({
     $anchor: anchor,
-    $anchorSize: anchorSize
+    $anchorSize: PINHEAD_DIMENSIONS[anchorPinHeadSize].height
   }, floatingMarkerPinHeadContainerProps), /*#__PURE__*/React.createElement(PinHead, {
     size: size,
-    color: color,
-    background: background,
+    color: primaryA,
+    background: backgroundPrimary,
     type: PINHEAD_TYPES.floating,
     label: label,
     startEnhancer: startEnhancer,

package/es/map-marker/index.js

@@ -6,4 +6,4 @@ LICENSE file in the root directory of this source tree.
 */
 export { default as FixedMarker } from './fixed-marker.js';
 export { default as FloatingMarker } from './floating-marker.js';
-export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES } from './constants.js';
+export { FLOATING_MARKER_ANCHOR_POSITIONS, FLOATING_MARKER_SIZES, FLOATING_MARKER_ANCHOR_TYPES, NEEDLE_SIZES, PINHEAD_SIZES_SHAPES, BADGE_ENHANCER_SIZES, LABEL_ENHANCER_POSITIONS, KIND } from './constants.js';

package/es/map-marker/label-enhancer.js

@@ -0,0 +1,39 @@
+function _extends() { _extends = Object.assign || 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 { getOverrides } from '../helpers/overrides.js';
+import { RelativeContainer, StyledStrokedLabel, StyledStrokedLabelContainer } from './styled-components.js';
+import { LABEL_ENHANCER_POSITIONS } from './constants.js';
+
+const LabelEnhancer = ({
+  labelEnhancerContent,
+  labelEnhancerPosition,
+  needleHeight,
+  size,
+  overrides = {}
+}) => {
+  if (!labelEnhancerPosition || labelEnhancerPosition === LABEL_ENHANCER_POSITIONS.none) {
+    return null;
+  }
+
+  if (!labelEnhancerContent) {
+    return null;
+  }
+
+  const [StrokedLabelContainer, strokedLabelContainerProps] = getOverrides(overrides.LabelEnhancerContainer, StyledStrokedLabelContainer);
+  const [StrokedLabel, strokedLabelProps] = getOverrides(overrides.LabelEnhancer, StyledStrokedLabel);
+  return /*#__PURE__*/React.createElement(StrokedLabelContainer, _extends({
+    $position: labelEnhancerPosition,
+    $labelOffset: needleHeight
+  }, strokedLabelContainerProps), /*#__PURE__*/React.createElement(RelativeContainer, null, /*#__PURE__*/React.createElement(StrokedLabel, _extends({
+    $size: size
+  }, strokedLabelProps), labelEnhancerContent)));
+};
+
+export default LabelEnhancer;

package/es/map-marker/needle.js

@@ -0,0 +1,26 @@
+function _extends() { _extends = Object.assign || 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 { getOverrides } from '../helpers/overrides.js';
+import { NEEDLE_HEIGHTS } from './constants.js';
+import { StyledNeedle } from './styled-components.js';
+
+const Needle = ({
+  size,
+  background,
+  overrides = {}
+}) => {
+  const [Needle, needleProps] = getOverrides(overrides.Needle, StyledNeedle);
+  return /*#__PURE__*/React.createElement(Needle, _extends({
+    $background: background,
+    $height: NEEDLE_HEIGHTS[size]
+  }, needleProps));
+};
+
+export default Needle;

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

@@ -7,33 +7,11 @@ 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, styled } from '../styles/index.js';
 import { getOverrides } from '../helpers/overrides.js';
-import { InnerXSmallAnchor as StyledInnerXSmallAnchor, OuterXSmallAnchor as StyledOuterXSmallAnchor, PinHead as StyledPinHead } from './styled-components.js';
-import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES } from './constants.js';
-export const _ContentItem = styled('div', ({
-  $theme,
-  $color,
-  $height,
-  $size
-}) => {
-  const match = {
-    [PINHEAD_SIZES_SHAPES.xSmallCircle]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.xSmallSquare]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.small]: 'LabelSmall',
-    [PINHEAD_SIZES_SHAPES.medium]: 'LabelMedium',
-    [PINHEAD_SIZES_SHAPES.large]: 'LabelLarge'
-  };
-  return { ...$theme.typography[match[$size]],
-    display: 'flex',
-    alignItems: 'center',
-    textAlign: 'center',
-    lineHeight: `${$height}px`,
-    height: `${$height}px`,
-    color: $color
-  };
-});
-_ContentItem.displayName = "_ContentItem";
+import { StyledInnerXXSmallAnchor, StyledOuterXXSmallAnchor, StyledInnerXSmallAnchor, StyledOuterXSmallAnchor, StyledPinHead, RelativeContainer, StyledContentItem } from './styled-components.js';
+import { PINHEAD_DIMENSIONS, PINHEAD_TYPES, PINHEAD_SIZES_SHAPES, NEEDLE_HEIGHTS, NEEDLE_SIZES } from './constants.js';
+import BadgeEnhancer from './badge-enhancer.js';
+import LabelEnhancer from './label-enhancer.js';
 
 const PinHead = ({
   size = PINHEAD_SIZES_SHAPES.medium,
@@ -44,17 +22,13 @@ const PinHead = ({
   background,
   type = PINHEAD_TYPES.fixed,
   anchorType,
+  needle = NEEDLE_SIZES.none,
+  labelEnhancerContent,
+  labelEnhancerPosition,
+  badgeEnhancerSize,
+  badgeEnhancerContent,
   overrides = {}
 }) => {
-  const [, theme] = useStyletron();
-  const {
-    colors: {
-      backgroundPrimary,
-      primaryA
-    }
-  } = theme;
-  color = color || backgroundPrimary;
-  background = background || primaryA;
   const activeElements = [label, StartEnhancer, EndEnhancer].filter(x => x);
   const gridTemplateColumns = activeElements.map(() => 'auto').join(' ');
   const forceCircle = activeElements.length === 1 && !label;
@@ -63,13 +37,35 @@ const PinHead = ({
     icon
   } = PINHEAD_DIMENSIONS[size];
   const [PinHead, pinHeadProps] = getOverrides(overrides.PinHead, StyledPinHead);
-  const [ContentItem, contentItemProps] = getOverrides(overrides.PinHeadContent, _ContentItem);
+  const [ContentItem, contentItemProps] = getOverrides(overrides.PinHeadContent, StyledContentItem);
+  const [InnerXXSmallAnchor, innerXXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXXSmallAnchor);
+  const [OuterXXSmallAnchor, outerXXSmallAnchorProps] = getOverrides(overrides.OuterAnchor, StyledOuterXXSmallAnchor);
   const [InnerXSmallAnchor, innerXSmallAnchorProps] = getOverrides(overrides.InnerAnchor, StyledInnerXSmallAnchor);
   const [OuterXSmallAnchor, outerXSmallAnchorProps] = getOverrides(overrides.OuterAnchor, StyledOuterXSmallAnchor);
+  const badge = /*#__PURE__*/React.createElement(BadgeEnhancer, {
+    markerType: type,
+    pinHeadSize: size,
+    badgeEnhancerSize: badgeEnhancerSize,
+    badgeEnhancerContent: badgeEnhancerContent,
+    overrides: overrides
+  });
+
+  if (type === PINHEAD_TYPES.fixed && (size === PINHEAD_SIZES_SHAPES.xxSmallCircle || size === PINHEAD_SIZES_SHAPES.xxSmallSquare)) {
+    const round = size === PINHEAD_SIZES_SHAPES.xxSmallCircle;
+    return /*#__PURE__*/React.createElement(OuterXXSmallAnchor, _extends({
+      $round: round,
+      $background: background,
+      $size: height
+    }, outerXXSmallAnchorProps), /*#__PURE__*/React.createElement(InnerXXSmallAnchor, _extends({
+      $color: color,
+      $round: round,
+      $size: icon
+    }, innerXXSmallAnchorProps)));
+  }
 
   if (type === PINHEAD_TYPES.fixed && (size === PINHEAD_SIZES_SHAPES.xSmallSquare || size === PINHEAD_SIZES_SHAPES.xSmallCircle)) {
     const round = size === PINHEAD_SIZES_SHAPES.xSmallCircle;
-    return /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
+    return /*#__PURE__*/React.createElement(RelativeContainer, null, badge, /*#__PURE__*/React.createElement(OuterXSmallAnchor, _extends({
       $round: round,
       $background: background,
       $size: height
@@ -77,10 +73,16 @@ const PinHead = ({
       $color: color,
       $round: round,
       $size: icon
-    }, innerXSmallAnchorProps)));
+    }, innerXSmallAnchorProps))));
   }
 
-  return /*#__PURE__*/React.createElement(PinHead, _extends({
+  return /*#__PURE__*/React.createElement(RelativeContainer, null, /*#__PURE__*/React.createElement(LabelEnhancer, {
+    labelEnhancerContent: labelEnhancerContent,
+    labelEnhancerPosition: labelEnhancerPosition,
+    needleHeight: NEEDLE_HEIGHTS[needle],
+    size: size,
+    overrides: overrides
+  }), badge, /*#__PURE__*/React.createElement(PinHead, _extends({
     $background: background,
     $height: height,
     $gridTemplateColumns: gridTemplateColumns,
@@ -102,7 +104,7 @@ const PinHead = ({
     $size: size
   }, contentItemProps), /*#__PURE__*/React.createElement(EndEnhancer, {
     size: icon
-  })));
+  }))));
 };
 
 export default PinHead;