baseui 10.7.4 → 10.9.1

package/form-control/form-control.js

@@ -1,7 +1,5 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -21,6 +19,8 @@ function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj;
 
 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); }
 
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
 function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
@@ -76,6 +76,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
       var _this$props = this.props,
           _this$props$overrides = _this$props.overrides,
           LabelOverride = _this$props$overrides.Label,
+          LabelEndEnhancerOverride = _this$props$overrides.LabelEndEnhancer,
+          LabelContainerOverride = _this$props$overrides.LabelContainer,
           CaptionOverride = _this$props$overrides.Caption,
           ControlContainerOverride = _this$props$overrides.ControlContainer,
           label = _this$props.label,
@@ -84,7 +86,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
           error = _this$props.error,
           positive = _this$props.positive,
           htmlFor = _this$props.htmlFor,
-          children = _this$props.children;
+          children = _this$props.children,
+          counter = _this$props.counter;
       var onlyChildProps = React.Children.only(children).props;
       var sharedProps = {
         $disabled: !!disabled,
@@ -94,6 +97,10 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
 
       var Label = (0, _overrides.getOverride)(LabelOverride) || _styledComponents.Label;
 
+      var LabelEndEnhancer = (0, _overrides.getOverride)(LabelEndEnhancerOverride) || _styledComponents.LabelEndEnhancer;
+
+      var LabelContainer = (0, _overrides.getOverride)(LabelContainerOverride) || _styledComponents.LabelContainer;
+
       var Caption = (0, _overrides.getOverride)(CaptionOverride) || _styledComponents.Caption;
 
       var ControlContainer = (0, _overrides.getOverride)(ControlContainerOverride) || _styledComponents.ControlContainer;
@@ -107,10 +114,55 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
         }
       }
 
-      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(Label, _extends({
+      var labelEndEnhancer = this.props.labelEndEnhancer;
+
+      if (counter) {
+        // inferred values are preferred but if the user specifies the value
+        // that is then used as the default.
+        var maxLength = null;
+        var length = null;
+        var counterError = null;
+
+        if (_typeof(counter) === 'object') {
+          length = counter.length;
+          maxLength = counter.maxLength;
+          counterError = counter.error;
+        }
+
+        maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
+
+        if (length == null && typeof onlyChildProps.value === 'string') {
+          length = onlyChildProps.value.length;
+        }
+
+        if (length == null) {
+          length = 0;
+
+          if (process.env.NODE_ENV !== "production") {
+            console.warn("[FromControl] `length` must either be explicitly set via `counter` object property, or `value` string property on the child component.");
+          }
+        }
+
+        sharedProps.$length = length;
+
+        if (maxLength == null) {
+          if (!labelEndEnhancer) labelEndEnhancer = "".concat(length);
+        } else {
+          sharedProps.$maxLength = length;
+          if (!labelEndEnhancer) labelEndEnhancer = "".concat(length, "/").concat(maxLength);
+          if (length > maxLength && counterError == null) counterError = true;
+        }
+
+        if (counterError) {
+          sharedProps.$error = true;
+          sharedProps.$counterError = true;
+        }
+      }
+
+      return /*#__PURE__*/React.createElement(React.Fragment, null, label && /*#__PURE__*/React.createElement(LabelContainer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelContainerOverride)), /*#__PURE__*/React.createElement(Label, _extends({
         "data-baseweb": "form-control-label",
         htmlFor: htmlFor || onlyChildProps.id
-      }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (captionId) {
+      }, sharedProps, (0, _overrides.getOverrideProps)(LabelOverride)), typeof label === 'function' ? label(sharedProps) : label), labelEndEnhancer && /*#__PURE__*/React.createElement(LabelEndEnhancer, _extends({}, sharedProps, (0, _overrides.getOverrideProps)(LabelEndEnhancerOverride)), typeof labelEndEnhancer === 'function' ? labelEndEnhancer(sharedProps) : labelEndEnhancer)), /*#__PURE__*/React.createElement(_reactUid.UIDConsumer, null, function (captionId) {
         return /*#__PURE__*/React.createElement(ControlContainer, _extends({
           "data-baseweb": "form-control-container"
         }, sharedProps, (0, _overrides.getOverrideProps)(ControlContainerOverride)), React.Children.map(children, function (child, index) {
@@ -121,8 +173,8 @@ var FormControl = /*#__PURE__*/function (_React$Component) {
             'aria-errormessage': error ? captionId : null,
             'aria-describedby': caption || positive ? captionId : null,
             disabled: onlyChildProps.disabled || disabled,
-            error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : error,
-            positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : positive
+            error: typeof onlyChildProps.error !== 'undefined' ? onlyChildProps.error : sharedProps.$error,
+            positive: typeof onlyChildProps.positive !== 'undefined' ? onlyChildProps.positive : sharedProps.$positive
           });
         }), (caption || error || positive) && /*#__PURE__*/React.createElement(Caption, _extends({
           "data-baseweb": "form-control-caption",
@@ -141,5 +193,6 @@ _defineProperty(FormControl, "defaultProps", {
   overrides: {},
   label: null,
   caption: null,
-  disabled: false
+  disabled: false,
+  counter: false
 });

package/form-control/form-control.js.flow

@@ -11,10 +11,16 @@ import {getOverride, getOverrideProps} from '../helpers/overrides.js';
 import {UIDConsumer} from 'react-uid';
 import {
   Label as StyledLabel,
+  LabelEndEnhancer as StyledLabelEndEnhancer,
+  LabelContainer as StyledLabelContainer,
   Caption as StyledCaption,
   ControlContainer as StyledControlContainer,
 } from './styled-components.js';
-import type {FormControlPropsT, FormControlStateT} from './types.js';
+import type {
+  FormControlPropsT,
+  FormControlStateT,
+  StylePropsT,
+} from './types.js';
 
 function chooseRenderedHint(caption, error, positive, sharedProps) {
   if (error && typeof error !== 'boolean') {
@@ -41,12 +47,15 @@ export default class FormControl extends React.Component<
     label: null,
     caption: null,
     disabled: false,
+    counter: false,
   };
 
   render() {
     const {
       overrides: {
         Label: LabelOverride,
+        LabelEndEnhancer: LabelEndEnhancerOverride,
+        LabelContainer: LabelContainerOverride,
         Caption: CaptionOverride,
         ControlContainer: ControlContainerOverride,
       },
@@ -57,17 +66,22 @@ export default class FormControl extends React.Component<
       positive,
       htmlFor,
       children,
+      counter,
     } = this.props;
 
     const onlyChildProps = React.Children.only(children).props;
 
-    const sharedProps = {
+    const sharedProps: StylePropsT = {
       $disabled: !!disabled,
       $error: !!error,
       $positive: !!positive,
     };
 
     const Label = getOverride(LabelOverride) || StyledLabel;
+    const LabelEndEnhancer =
+      getOverride(LabelEndEnhancerOverride) || StyledLabelEndEnhancer;
+    const LabelContainer =
+      getOverride(LabelContainerOverride) || StyledLabelContainer;
     const Caption = getOverride(CaptionOverride) || StyledCaption;
     const ControlContainer =
       getOverride(ControlContainerOverride) || StyledControlContainer;
@@ -83,17 +97,75 @@ export default class FormControl extends React.Component<
       }
     }
 
+    let labelEndEnhancer = this.props.labelEndEnhancer;
+    if (counter) {
+      // inferred values are preferred but if the user specifies the value
+      // that is then used as the default.
+      let maxLength: ?number = null;
+      let length: ?number = null;
+      let counterError: ?boolean = null;
+
+      if (typeof counter === 'object') {
+        length = counter.length;
+        maxLength = counter.maxLength;
+        counterError = counter.error;
+      }
+
+      maxLength = maxLength ? maxLength : onlyChildProps.maxLength;
+      if (length == null && typeof onlyChildProps.value === 'string') {
+        length = onlyChildProps.value.length;
+      }
+
+      if (length == null) {
+        length = 0;
+        if (__DEV__) {
+          console.warn(
+            `[FromControl] \`length\` must either be explicitly set via \`counter\` object property, or \`value\` string property on the child component.`,
+          );
+        }
+      }
+
+      sharedProps.$length = length;
+      if (maxLength == null) {
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}`;
+      } else {
+        sharedProps.$maxLength = length;
+        if (!labelEndEnhancer) labelEndEnhancer = `${length}/${maxLength}`;
+        if (length > maxLength && counterError == null) counterError = true;
+      }
+
+      if (counterError) {
+        sharedProps.$error = true;
+        sharedProps.$counterError = true;
+      }
+    }
+
     return (
       <React.Fragment>
         {label && (
-          <Label
-            data-baseweb="form-control-label"
-            htmlFor={htmlFor || onlyChildProps.id}
+          <LabelContainer
             {...sharedProps}
-            {...getOverrideProps(LabelOverride)}
+            {...getOverrideProps(LabelContainerOverride)}
           >
-            {typeof label === 'function' ? label(sharedProps) : label}
-          </Label>
+            <Label
+              data-baseweb="form-control-label"
+              htmlFor={htmlFor || onlyChildProps.id}
+              {...sharedProps}
+              {...getOverrideProps(LabelOverride)}
+            >
+              {typeof label === 'function' ? label(sharedProps) : label}
+            </Label>
+            {labelEndEnhancer && (
+              <LabelEndEnhancer
+                {...sharedProps}
+                {...getOverrideProps(LabelEndEnhancerOverride)}
+              >
+                {typeof labelEndEnhancer === 'function'
+                  ? labelEndEnhancer(sharedProps)
+                  : labelEndEnhancer}
+              </LabelEndEnhancer>
+            )}
+          </LabelContainer>
         )}
         <UIDConsumer>
           {captionId => (
@@ -114,11 +186,11 @@ export default class FormControl extends React.Component<
                   error:
                     typeof onlyChildProps.error !== 'undefined'
                       ? onlyChildProps.error
-                      : error,
+                      : sharedProps.$error,
                   positive:
                     typeof onlyChildProps.positive !== 'undefined'
                       ? onlyChildProps.positive
-                      : positive,
+                      : sharedProps.$positive,
                 });
               })}
               {(caption || error || positive) && (

package/form-control/index.d.ts

@@ -25,6 +25,7 @@ export interface FormControlProps {
   error?: boolean | React.ReactNode;
   positive?: React.ReactNode;
   htmlFor?: string;
+  counter?: boolean | {length?: number; maxLength?: number; error?: boolean};
 }
 
 export class FormControl extends React.Component<

package/form-control/styled-components.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ControlContainer = exports.Caption = exports.Label = void 0;
+exports.ControlContainer = exports.Caption = exports.LabelEndEnhancer = exports.LabelContainer = exports.Label = void 0;
 
 var _index = require("../styles/index.js");
 
@@ -17,7 +17,6 @@ var Label = (0, _index.styled)('label', function (props) {
   var $disabled = props.$disabled,
       _props$$theme = props.$theme,
       colors = _props$$theme.colors,
-      sizing = _props$$theme.sizing,
       typography = _props$$theme.typography;
   return _objectSpread(_objectSpread({}, typography.font250), {}, {
     fontWeight: 500,
@@ -27,15 +26,38 @@ var Label = (0, _index.styled)('label', function (props) {
     paddingTop: 0,
     paddingRight: 0,
     paddingBottom: 0,
-    paddingLeft: 0,
+    paddingLeft: 0
+  });
+});
+exports.Label = Label;
+Label.displayName = "Label";
+var LabelContainer = (0, _index.styled)('span', function (_ref) {
+  var sizing = _ref.$theme.sizing;
+  return {
+    display: 'flex',
+    width: '100%',
     marginTop: sizing.scale300,
     marginRight: 0,
     marginBottom: sizing.scale300,
     marginLeft: 0
+  };
+});
+exports.LabelContainer = LabelContainer;
+LabelContainer.displayName = "LabelContainer";
+var LabelEndEnhancer = (0, _index.styled)('span', function (_ref2) {
+  var $disabled = _ref2.$disabled,
+      $counterError = _ref2.$counterError,
+      _ref2$$theme = _ref2.$theme,
+      colors = _ref2$$theme.colors,
+      typography = _ref2$$theme.typography;
+  return _objectSpread(_objectSpread({}, typography.font100), {}, {
+    flex: 0,
+    width: '100%',
+    color: $counterError ? colors.negative400 : $disabled ? colors.contentSecondary : colors.contentPrimary
   });
 });
-exports.Label = Label;
-Label.displayName = "Label";
+exports.LabelEndEnhancer = LabelEndEnhancer;
+LabelEndEnhancer.displayName = "LabelEndEnhancer";
 var Caption = (0, _index.styled)('div', function (props) {
   var $error = props.$error,
       $positive = props.$positive,

package/form-control/styled-components.js.flow

@@ -12,7 +12,7 @@ import type {StylePropsT} from './types.js';
 export const Label = styled<StylePropsT>('label', props => {
   const {
     $disabled,
-    $theme: {colors, sizing, typography},
+    $theme: {colors, typography},
   } = props;
   return {
     ...typography.font250,
@@ -24,12 +24,34 @@ export const Label = styled<StylePropsT>('label', props => {
     paddingRight: 0,
     paddingBottom: 0,
     paddingLeft: 0,
+  };
+});
+
+export const LabelContainer = styled<StylePropsT>(
+  'span',
+  ({$theme: {sizing}}) => ({
+    display: 'flex',
+    width: '100%',
     marginTop: sizing.scale300,
     marginRight: 0,
     marginBottom: sizing.scale300,
     marginLeft: 0,
-  };
-});
+  }),
+);
+
+export const LabelEndEnhancer = styled<StylePropsT>(
+  'span',
+  ({$disabled, $counterError, $theme: {colors, typography}}) => ({
+    ...typography.font100,
+    flex: 0,
+    width: '100%',
+    color: $counterError
+      ? colors.negative400
+      : $disabled
+      ? colors.contentSecondary
+      : colors.contentPrimary,
+  }),
+);
 
 export const Caption = styled<StylePropsT>('div', props => {
   const {

package/form-control/types.js.flow

@@ -13,15 +13,20 @@ export type FormControlStateT = {|
   captionId: string,
 |};
 
+export type OverridesT = {
+  /** Customizes the label element. */
+  Label?: OverrideT,
+  /** Customizes the label end enhancer element. */
+  LabelEndEnhancer?: OverrideT,
+  /** Customizes the label container element. */
+  LabelContainer?: OverrideT,
+  /** Customizes the caption element. */
+  Caption?: OverrideT,
+  /** Customizes the container element. */
+  ControlContainer?: OverrideT,
+};
 export type FormControlPropsT = {
-  overrides: {
-    /** Customizes the label element. */
-    Label?: OverrideT,
-    /** Customizes the caption element. */
-    Caption?: OverrideT,
-    /** Customizes the container element. */
-    ControlContainer?: OverrideT,
-  },
+  overrides: OverridesT,
   /** A label rendered above the input field. */
   label: ?(React.Node | ((props: {}) => React.Node)),
   /** A caption rendered below the input field. */
@@ -34,6 +39,10 @@ export type FormControlPropsT = {
   positive?: React.Node | ((props: {}) => React.Node),
   /** The id of the related form element. Defaults to the id property of the child, if any. */
   htmlFor?: string,
+  /** Adds a label end enhancer to the label */
+  labelEndEnhancer?: ?(React.Node | ((props: {}) => React.Node)),
+  /** Adds a length counter to the form control. If your input does not have a "string" value exposed as a prop, you provide the length as an object.*/
+  counter?: boolean | {|length?: number, maxLength?: number, error?: boolean|},
   children: React.Node,
 };
 
@@ -41,6 +50,9 @@ export type StylePropsT = {
   $disabled?: boolean,
   $error?: boolean,
   $positive?: boolean,
+  $length?: number,
+  $maxLength?: number,
+  $counterError?: boolean,
 };
 
 declare var __DEV__: boolean;

package/index.js

@@ -129,6 +129,12 @@ Object.defineProperty(exports, "BaseProvider", {
     return _baseProvider.default;
   }
 });
+Object.defineProperty(exports, "getOverrides", {
+  enumerable: true,
+  get: function get() {
+    return _overrides.getOverrides;
+  }
+});
 Object.defineProperty(exports, "mergeOverrides", {
   enumerable: true,
   get: function get() {

package/index.js.flow

@@ -30,7 +30,7 @@ export {
 } from './themes/index.js';
 export {default as LocaleProvider} from './locale/index.js';
 export {default as BaseProvider} from './helpers/base-provider.js';
-export {mergeOverrides} from './helpers/overrides.js';
+export {getOverrides, mergeOverrides} from './helpers/overrides.js';
 export type {PrimitivesT} from './themes/types.js';
 export type {ThemeT} from './styles/types.js';
 

package/map-marker/badge-enhancer.js

@@ -0,0 +1,90 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var React = _interopRequireWildcard(require("react"));
+
+var _overrides = require("../helpers/overrides.js");
+
+var _styledComponents = require("./styled-components.js");
+
+var _constants = require("./constants.js");
+
+function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+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); }
+
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { if (typeof Symbol === "undefined" || !(Symbol.iterator in Object(arr))) return; var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+var BadgeEnhancer = function BadgeEnhancer(_ref) {
+  var pinHeadSize = _ref.pinHeadSize,
+      markerType = _ref.markerType,
+      _ref$badgeEnhancerSiz = _ref.badgeEnhancerSize,
+      badgeEnhancerSize = _ref$badgeEnhancerSiz === void 0 ? _constants.BADGE_ENHANCER_SIZES.none : _ref$badgeEnhancerSiz,
+      BadgeEnhancerContent = _ref.badgeEnhancerContent,
+      _ref$overrides = _ref.overrides,
+      overrides = _ref$overrides === void 0 ? {} : _ref$overrides;
+
+  if (badgeEnhancerSize === null || badgeEnhancerSize == _constants.BADGE_ENHANCER_SIZES.none) {
+    return null;
+  }
+
+  if (badgeEnhancerSize !== _constants.BADGE_ENHANCER_SIZES.xSmall && !BadgeEnhancerContent) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Badges (except for size ".concat(_constants.BADGE_ENHANCER_SIZES.xSmall, ") must contain content"));
+    }
+
+    return null;
+  }
+
+  if (markerType === _constants.PINHEAD_TYPES.floating) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Badges can only be rendered on fixed markers");
+    }
+
+    return null;
+  }
+
+  var positions = _constants.BADGE_ENHANCER_POSITIONS[pinHeadSize];
+  var position = positions ? positions[badgeEnhancerSize] : null;
+
+  if (!position) {
+    if (process.env.NODE_ENV !== "production") {
+      console.warn("Badge size ".concat(badgeEnhancerSize, " cannot be rendered with pinhead size ").concat(pinHeadSize));
+    }
+
+    return null;
+  }
+
+  var _getOverrides = (0, _overrides.getOverrides)(overrides.BadgeEnhancer, _styledComponents.StyledBadgeEnhancerRoot),
+      _getOverrides2 = _slicedToArray(_getOverrides, 2),
+      BadgeEnhancerRoot = _getOverrides2[0],
+      badgeEnhancerRootProps = _getOverrides2[1];
+
+  return /*#__PURE__*/React.createElement(BadgeEnhancerRoot, _extends({
+    $size: badgeEnhancerSize,
+    $position: position
+  }, badgeEnhancerRootProps), BadgeEnhancerContent && badgeEnhancerSize !== _constants.BADGE_ENHANCER_SIZES.xSmall && /*#__PURE__*/React.createElement(BadgeEnhancerContent, {
+    size: _constants.BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]
+  }));
+};
+
+var _default = BadgeEnhancer;
+exports.default = _default;

package/map-marker/badge-enhancer.js.flow

@@ -0,0 +1,86 @@
+/*
+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.
+*/
+
+// @flow
+import * as React from 'react';
+import type {BadgeEnhancerComponentT} from './types.js';
+import {getOverrides} from '../helpers/overrides.js';
+import {StyledBadgeEnhancerRoot} from './styled-components.js';
+import {
+  PINHEAD_TYPES,
+  BADGE_ENHANCER_SIZES,
+  BADGE_ENHANCER_POSITIONS,
+  BADGE_ENHANCER_CONTENT_SIZE,
+} from './constants.js';
+
+const BadgeEnhancer = ({
+  pinHeadSize,
+  markerType,
+  badgeEnhancerSize = BADGE_ENHANCER_SIZES.none,
+  badgeEnhancerContent: BadgeEnhancerContent,
+  overrides = {},
+}: BadgeEnhancerComponentT) => {
+  if (
+    badgeEnhancerSize === null ||
+    badgeEnhancerSize == BADGE_ENHANCER_SIZES.none
+  ) {
+    return null;
+  }
+  if (
+    badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall &&
+    !BadgeEnhancerContent
+  ) {
+    if (__DEV__) {
+      console.warn(
+        `Badges (except for size ${BADGE_ENHANCER_SIZES.xSmall}) must contain content`,
+      );
+    }
+    return null;
+  }
+  if (markerType === PINHEAD_TYPES.floating) {
+    if (__DEV__) {
+      console.warn(`Badges can only be rendered on fixed markers`);
+    }
+    return null;
+  }
+  const positions = BADGE_ENHANCER_POSITIONS[pinHeadSize];
+  const position = positions ? positions[badgeEnhancerSize] : null;
+  if (!position) {
+    if (__DEV__) {
+      console.warn(
+        `Badge size ${badgeEnhancerSize} cannot be rendered with pinhead size ${pinHeadSize}`,
+      );
+    }
+    return null;
+  }
+
+  const [BadgeEnhancerRoot, badgeEnhancerRootProps] = getOverrides(
+    overrides.BadgeEnhancer,
+    StyledBadgeEnhancerRoot,
+  );
+
+  return (
+    <BadgeEnhancerRoot
+      $size={badgeEnhancerSize}
+      $position={position}
+      {...badgeEnhancerRootProps}
+    >
+      {BadgeEnhancerContent &&
+        badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && (
+          <BadgeEnhancerContent
+            size={BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]}
+          />
+        )}
+    </BadgeEnhancerRoot>
+  );
+};
+
+export default BadgeEnhancer;
+
+declare var __DEV__: boolean;
+declare var __NODE__: boolean;
+declare var __BROWSER__: boolean;