baseui 10.9.2 → 10.11.1

package/list/styled-components.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled, expandBorderStyles} from '../styles/index.js';
+import { styled, expandBorderStyles } from '../styles/index.js';
 
 import type {
   StyledRootPropsT,
@@ -14,10 +14,10 @@ import type {
   StyledArtworkContainerPropsT,
   StyledHeadingHeadingPropsT,
 } from './types.js';
-import {artworkSizeToValue} from './utils.js';
-import {SHAPE} from './constants.js';
+import { artworkSizeToValue } from './utils.js';
+import { SHAPE } from './constants.js';
 
-export const StyledRoot = styled<StyledRootPropsT>('li', ({$theme, $shape}) => {
+export const StyledRoot = styled<StyledRootPropsT>('li', ({ $theme, $shape }) => {
   return {
     alignItems: 'center',
     backgroundColor: $theme.colors.backgroundPrimary,
@@ -26,39 +26,34 @@ export const StyledRoot = styled<StyledRootPropsT>('li', ({$theme, $shape}) => {
     width: '100%',
     borderTopLeftRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
     borderTopRightRadius: $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
-    borderBottomLeftRadius:
-      $shape === SHAPE.ROUND ? $theme.borders.radius400 : 0,
-    borderBottomRightRadius:
-      $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',
   };
 });
 
-export const StyledContent = styled<StyledContentPropsT>(
-  'div',
-  ({$mLeft, $sublist, $theme}) => {
-    return {
-      ...expandBorderStyles($theme.borders.border100),
-      alignItems: 'center',
-      borderTopStyle: 'none',
-      borderRightStyle: 'none',
-      borderLeftStyle: 'none',
-      display: 'flex',
-      flexGrow: 1,
-      minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
-      justifyContent: 'space-between',
-      ...($theme.direction === 'rtl'
-        ? {
-            paddingLeft: $theme.sizing.scale600,
-            marginRight: $mLeft ? $theme.sizing.scale600 : null,
-          }
-        : {
-            paddingRight: $theme.sizing.scale600,
-            marginLeft: $mLeft ? $theme.sizing.scale600 : null,
-          }),
-    };
-  },
-);
+export const StyledContent = styled<StyledContentPropsT>('div', ({ $mLeft, $sublist, $theme }) => {
+  return {
+    ...expandBorderStyles($theme.borders.border100),
+    alignItems: 'center',
+    borderTopStyle: 'none',
+    borderRightStyle: 'none',
+    borderLeftStyle: 'none',
+    display: 'flex',
+    flexGrow: 1,
+    minHeight: $sublist ? 'initial' : $theme.sizing.scale1600,
+    justifyContent: 'space-between',
+    ...($theme.direction === 'rtl'
+      ? {
+          paddingLeft: $theme.sizing.scale600,
+          marginRight: $mLeft ? $theme.sizing.scale600 : null,
+        }
+      : {
+          paddingRight: $theme.sizing.scale600,
+          marginLeft: $mLeft ? $theme.sizing.scale600 : null,
+        }),
+  };
+});
 
 export const StyledEndEnhancerContainer = styled('div', {
   alignItems: 'center',
@@ -67,7 +62,7 @@ export const StyledEndEnhancerContainer = styled('div', {
 
 export const StyledArtworkContainer = styled<StyledArtworkContainerPropsT>(
   'div',
-  ({$artworkSize, $sublist, $theme}) => {
+  ({ $artworkSize, $sublist, $theme }) => {
     let sizeValue: number =
       typeof $artworkSize === 'number'
         ? $artworkSize
@@ -88,10 +83,10 @@ export const StyledArtworkContainer = styled<StyledArtworkContainerPropsT>(
       justifyContent: 'center',
       width: $theme.sizing.scale1600,
     };
-  },
+  }
 );
 
-export const StyledLabelContent = styled<{||}>('p', ({$theme}) => {
+export const StyledLabelContent = styled<{||}>('p', ({ $theme }) => {
   return {
     ...$theme.typography.LabelMedium,
     color: $theme.colors.contentPrimary,
@@ -100,7 +95,7 @@ export const StyledLabelContent = styled<{||}>('p', ({$theme}) => {
   };
 });
 
-export const StyledLabelDescription = styled<{||}>('p', ({$theme}) => {
+export const StyledLabelDescription = styled<{||}>('p', ({ $theme }) => {
   return {
     ...$theme.typography.ParagraphSmall,
     color: $theme.colors.contentPrimary,
@@ -109,7 +104,7 @@ export const StyledLabelDescription = styled<{||}>('p', ({$theme}) => {
   };
 });
 
-export const StyledLabelSublistContent = styled<{||}>('p', ({$theme}) => {
+export const StyledLabelSublistContent = styled<{||}>('p', ({ $theme }) => {
   return {
     ...$theme.typography.LabelMedium,
     color: $theme.colors.contentPrimary,
@@ -118,7 +113,7 @@ export const StyledLabelSublistContent = styled<{||}>('p', ({$theme}) => {
   };
 });
 
-export const StyledHeadingRoot = styled<StyledRootPropsT>('div', ({$theme}) => {
+export const StyledHeadingRoot = styled<StyledRootPropsT>('div', ({ $theme }) => {
   return {
     display: 'flex',
     alignItems: 'center',
@@ -129,7 +124,7 @@ export const StyledHeadingRoot = styled<StyledRootPropsT>('div', ({$theme}) => {
   };
 });
 
-export const StyledHeadingContent = styled<{}>('div', ({$theme}) => {
+export const StyledHeadingContent = styled<{}>('div', ({ $theme }) => {
   return {
     flexGrow: 1,
     width: '100%',
@@ -157,7 +152,7 @@ export const StyledHeadingContentRow = styled('div', {
 export const StyledHeadingMainHeading = styled<StyledHeadingHeadingPropsT>(
   'p',
   // $FlowFixMe - suppressing due to webkit properties
-  ({$maxLines = 1, $theme}) => {
+  ({ $maxLines = 1, $theme }) => {
     return {
       ...$theme.typography.HeadingSmall,
       color: $theme.colors.contentPrimary,
@@ -169,13 +164,13 @@ export const StyledHeadingMainHeading = styled<StyledHeadingHeadingPropsT>(
       '-webkit-box-orient': 'vertical',
       overflow: 'hidden',
     };
-  },
+  }
 );
 
 export const StyledHeadingSubHeading = styled<StyledHeadingHeadingPropsT>(
   'p',
   // $FlowFixMe - suppressing due to webkit properties
-  ({$maxLines = 1, $theme}) => {
+  ({ $maxLines = 1, $theme }) => {
     return {
       ...$theme.typography.ParagraphLarge,
       color: $theme.colors.contentPrimary,
@@ -187,34 +182,31 @@ export const StyledHeadingSubHeading = styled<StyledHeadingHeadingPropsT>(
       '-webkit-box-orient': 'vertical',
       overflow: 'hidden',
     };
-  },
+  }
 );
 
-export const StyledHeadingEndEnhancerContainer = styled<{$isText: boolean}>(
+export const StyledHeadingEndEnhancerContainer = styled<{ $isText: boolean }>(
   'div',
-  ({$isText, $theme}) => ({
+  ({ $isText, $theme }) => ({
     ...$theme.typography.LabelMedium,
     display: 'flex',
     alignItems: $isText ? 'flex-end' : 'center',
     whiteSpace: 'nowrap',
     overflow: 'hidden',
     textOverflow: 'ellipsis',
-  }),
+  })
 );
 
-export const StyledHeadingEndEnhancerDescriptionContainer = styled<{}>(
-  'p',
-  ({$theme}) => ({
-    ...$theme.typography.ParagraphMedium,
-    marginTop: 0,
-    marginBottom: 0,
-    display: 'flex',
-    alignItems: 'flex-start',
-    whiteSpace: 'nowrap',
-    overflow: 'hidden',
-    textOverflow: 'ellipsis',
-  }),
-);
+export const StyledHeadingEndEnhancerDescriptionContainer = styled<{}>('p', ({ $theme }) => ({
+  ...$theme.typography.ParagraphMedium,
+  marginTop: 0,
+  marginBottom: 0,
+  display: 'flex',
+  alignItems: 'flex-start',
+  whiteSpace: 'nowrap',
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
+}));
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/list/types.js.flow

@@ -8,9 +8,9 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import type {IconPropsT} from '../icon/types.js';
-import {ARTWORK_SIZES, SHAPE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { IconPropsT } from '../icon/types.js';
+import { ARTWORK_SIZES, SHAPE } from './constants.js';
 
 export type ArtworkSizesT =
   | typeof ARTWORK_SIZES.SMALL
@@ -26,14 +26,14 @@ export type StyledArtworkContainerPropsT = {
   $artworkSize: ArtworkSizesT | number,
   $sublist?: boolean,
 };
-export type StyledContentPropsT = {$mLeft: boolean, $sublist: boolean};
+export type StyledContentPropsT = { $mLeft: boolean, $sublist: boolean };
 
-export type OverridesT = {|
+export type OverridesT = {
   Root?: OverrideT,
   ArtworkContainer?: OverrideT,
   Content?: OverrideT,
   EndEnhancerContainer?: OverrideT,
-|};
+};
 
 export type PropsT = {|
   artwork?: React.AbstractComponent<{
@@ -59,14 +59,14 @@ export type LabelPropsT = {|
   |},
 |};
 
-export type HeadingOverridesT = {|
+export type HeadingOverridesT = {
   Root?: OverrideT,
   Content?: OverrideT,
   HeadingContainer?: OverrideT,
   SubHeadingContainer?: OverrideT,
   EndEnhancerContainer?: OverrideT,
   EndEnhancerDescriptionContainer?: OverrideT,
-|};
+};
 
 export type HeadingPropsT = {|
   heading: React.Node | React.AbstractComponent<{}>,
@@ -83,10 +83,10 @@ export type StyledHeadingHeadingPropsT = {|
 
 export type MenuAdapterPropsT = {
   ...PropsT,
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   item?: any,
-  onMouseEnter?: MouseEvent => mixed,
-  onClick?: MouseEvent => mixed,
+  onMouseEnter?: (MouseEvent) => mixed,
+  onClick?: (MouseEvent) => mixed,
   $size?: string,
   $isHighlighted?: boolean,
   $disabled?: boolean,

package/list/utils.js.flow

@@ -6,13 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {ARTWORK_SIZES} from './constants.js';
-import type {ArtworkSizesT} from './types.js';
+import { ARTWORK_SIZES } from './constants.js';
+import type { ArtworkSizesT } from './types.js';
 
-export function artworkSizeToValue(
-  artworkSize: ArtworkSizesT,
-  isSublist: boolean,
-) {
+export function artworkSizeToValue(artworkSize: ArtworkSizesT, isSublist: boolean) {
   if (isSublist) {
     switch (artworkSize) {
       case ARTWORK_SIZES.LARGE:

package/locale/es_AR.js.flow

@@ -30,8 +30,7 @@ export default {
     screenReaderMessageInput:
       'Presione la tecla de flecha hacia abajo para interactuar con el calendario y seleccione una fecha. Presione el botón de escape para cerrar el calendario.',
     selectedDate: 'La fecha seleccionada es ${date}.',
-    selectedDateRange:
-      'El rango de fecha seleccionado es desde ${startDate} hasta ${endDate}.',
+    selectedDateRange: 'El rango de fecha seleccionado es desde ${startDate} hasta ${endDate}.',
     selectSecondDatePrompt: 'Selecciona la segunda fecha.',
     quickSelectLabel: 'Selecciona un rango de fechas.',
     quickSelectAriaLabel: 'Selecciona un rango de fechas.',

package/locale/index.js.flow

@@ -8,27 +8,22 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import extend from 'just-extend';
 
-import type {LocaleT} from './types.js';
+import type { LocaleT } from './types.js';
 import en_US from './en_US.js';
 
 export const LocaleContext: React.Context<LocaleT> = React.createContext(en_US);
 
-const LocaleProvider = (props: {
-  locale: $Shape<LocaleT>,
-  children: ?React.Node,
-}) => {
-  const {locale, children} = props;
+const LocaleProvider = (props: { locale: $Shape<LocaleT>, children: ?React.Node }) => {
+  const { locale, children } = props;
   if (__DEV__) {
     if (locale.datepicker && locale.datepicker.timePickerAriaLabel) {
       console.warn(
-        '`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead',
+        '`timePickerAriaLabel` will be removed in v11 - please use timePickerAriaLabel12Hour and timePickerAriaLabel24Hour instead'
       );
     }
   }
   return (
-    <LocaleContext.Provider value={extend({}, en_US, locale)}>
-      {children}
-    </LocaleContext.Provider>
+    <LocaleContext.Provider value={extend({}, en_US, locale)}>{children}</LocaleContext.Provider>
   );
 };
 

package/locale/types.js.flow

@@ -6,18 +6,18 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {AccordionLocaleT} from '../accordion/locale.js';
-import type {BreadcrumbLocaleT} from '../breadcrumbs/locale.js';
-import type {DatepickerLocaleT} from '../datepicker/locale.js';
-import type {DataTableLocaleT} from '../data-table/locale.js';
-import type {ButtonGroupLocaleT} from '../button-group/locale.js';
-import type {FileUploaderLocaleT} from '../file-uploader/locale.js';
-import type {MenuLocaleT} from '../menu/locale.js';
-import type {ModalLocaleT} from '../modal/locale.js';
-import type {DrawerLocaleT} from '../drawer/locale.js';
-import type {PaginationLocaleT} from '../pagination/locale.js';
-import type {SelectLocaleT} from '../select/locale.js';
-import type {ToastLocaleT} from '../toast/locale.js';
+import type { AccordionLocaleT } from '../accordion/locale.js';
+import type { BreadcrumbLocaleT } from '../breadcrumbs/locale.js';
+import type { DatepickerLocaleT } from '../datepicker/locale.js';
+import type { DataTableLocaleT } from '../data-table/locale.js';
+import type { ButtonGroupLocaleT } from '../button-group/locale.js';
+import type { FileUploaderLocaleT } from '../file-uploader/locale.js';
+import type { MenuLocaleT } from '../menu/locale.js';
+import type { ModalLocaleT } from '../modal/locale.js';
+import type { DrawerLocaleT } from '../drawer/locale.js';
+import type { PaginationLocaleT } from '../pagination/locale.js';
+import type { SelectLocaleT } from '../select/locale.js';
+import type { ToastLocaleT } from '../toast/locale.js';
 
 export type LocaleT = {|
   accordion: AccordionLocaleT,

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

@@ -7,9 +7,9 @@ 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 type { BadgeEnhancerComponentT } from './types.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { StyledBadgeEnhancerRoot } from './styled-components.js';
 import {
   PINHEAD_TYPES,
   BADGE_ENHANCER_SIZES,
@@ -24,20 +24,12 @@ const BadgeEnhancer = ({
   badgeEnhancerContent: BadgeEnhancerContent,
   overrides = {},
 }: BadgeEnhancerComponentT) => {
-  if (
-    badgeEnhancerSize === null ||
-    badgeEnhancerSize == BADGE_ENHANCER_SIZES.none
-  ) {
+  if (badgeEnhancerSize === null || badgeEnhancerSize == BADGE_ENHANCER_SIZES.none) {
     return null;
   }
-  if (
-    badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall &&
-    !BadgeEnhancerContent
-  ) {
+  if (badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && !BadgeEnhancerContent) {
     if (__DEV__) {
-      console.warn(
-        `Badges (except for size ${BADGE_ENHANCER_SIZES.xSmall}) must contain content`,
-      );
+      console.warn(`Badges (except for size ${BADGE_ENHANCER_SIZES.xSmall}) must contain content`);
     }
     return null;
   }
@@ -52,7 +44,7 @@ const BadgeEnhancer = ({
   if (!position) {
     if (__DEV__) {
       console.warn(
-        `Badge size ${badgeEnhancerSize} cannot be rendered with pinhead size ${pinHeadSize}`,
+        `Badge size ${badgeEnhancerSize} cannot be rendered with pinhead size ${pinHeadSize}`
       );
     }
     return null;
@@ -60,21 +52,14 @@ const BadgeEnhancer = ({
 
   const [BadgeEnhancerRoot, badgeEnhancerRootProps] = getOverrides(
     overrides.BadgeEnhancer,
-    StyledBadgeEnhancerRoot,
+    StyledBadgeEnhancerRoot
   );
 
   return (
-    <BadgeEnhancerRoot
-      $size={badgeEnhancerSize}
-      $position={position}
-      {...badgeEnhancerRootProps}
-    >
-      {BadgeEnhancerContent &&
-        badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && (
-          <BadgeEnhancerContent
-            size={BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]}
-          />
-        )}
+    <BadgeEnhancerRoot $size={badgeEnhancerSize} $position={position} {...badgeEnhancerRootProps}>
+      {BadgeEnhancerContent && badgeEnhancerSize !== BADGE_ENHANCER_SIZES.xSmall && (
+        <BadgeEnhancerContent size={BADGE_ENHANCER_CONTENT_SIZE[badgeEnhancerSize]} />
+      )}
     </BadgeEnhancerRoot>
   );
 };

package/map-marker/constants.js.flow

@@ -44,9 +44,9 @@ export const PINHEAD_DIMENSIONS = Object.freeze({
   [PINHEAD_SIZES_SHAPES.xxSmallCircle]: xxSmallPinheadDimension,
   [PINHEAD_SIZES_SHAPES.xSmallSquare]: xSmallPinheadDimension,
   [PINHEAD_SIZES_SHAPES.xSmallCircle]: xSmallPinheadDimension,
-  [PINHEAD_SIZES_SHAPES.small]: {height: 24, icon: 16},
-  [PINHEAD_SIZES_SHAPES.medium]: {height: 36, icon: 16},
-  [PINHEAD_SIZES_SHAPES.large]: {height: 48, icon: 24},
+  [PINHEAD_SIZES_SHAPES.small]: { height: 24, icon: 16 },
+  [PINHEAD_SIZES_SHAPES.medium]: { height: 36, icon: 16 },
+  [PINHEAD_SIZES_SHAPES.large]: { height: 48, icon: 24 },
 });
 
 export const PINHEAD_TYPES = Object.freeze({

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

@@ -6,28 +6,17 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import {dragShadowWidth} from './constants.js';
-import {
-  StyledDragShadow,
-  StyledDragShadowContainer,
-} from './styled-components.js';
-import type {DragShadowPropsT} from './types.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { dragShadowWidth } from './constants.js';
+import { StyledDragShadow, StyledDragShadowContainer } from './styled-components.js';
+import type { DragShadowPropsT } from './types.js';
 
-const DragShadow = ({
-  background,
-  dragging,
-  height,
-  overrides = {},
-}: DragShadowPropsT) => {
+const DragShadow = ({ background, dragging, height, overrides = {} }: DragShadowPropsT) => {
   const [DragShadowContainer, dragShadowContainerProps] = getOverrides(
     overrides.DragShadowContainer,
-    StyledDragShadowContainer,
-  );
-  const [DragShadow, dragShadowProps] = getOverrides(
-    overrides.DragShadow,
-    StyledDragShadow,
+    StyledDragShadowContainer
   );
+  const [DragShadow, dragShadowProps] = getOverrides(overrides.DragShadow, StyledDragShadow);
 
   return (
     <DragShadowContainer
@@ -36,11 +25,7 @@ const DragShadow = ({
       $dragging={dragging}
       {...dragShadowContainerProps}
     >
-      <DragShadow
-        $width={dragShadowWidth}
-        $background={background}
-        {...dragShadowProps}
-      />
+      <DragShadow $width={dragShadowWidth} $background={background} {...dragShadowProps} />
     </DragShadowContainer>
   );
 };

package/map-marker/fixed-marker.js

@@ -120,6 +120,16 @@ var FixedMarker = function FixedMarker(_ref) {
     }
   }
 
+  var enhancers = {};
+
+  if (startEnhancer) {
+    enhancers.startEnhancer = startEnhancer;
+  }
+
+  if (endEnhancer) {
+    enhancers.endEnhancer = endEnhancer;
+  }
+
   return /*#__PURE__*/React.createElement(Root, _extends({
     "data-baseweb": "fixed-map-marker"
   }, rootProps), /*#__PURE__*/React.createElement(FixedMarkerDragContainer, _extends({
@@ -128,11 +138,7 @@ var FixedMarker = function FixedMarker(_ref) {
   }, fixedMarkerDragContainerProps), /*#__PURE__*/React.createElement(_pinHead.default, _extends({
     size: size,
     label: label
-  }, startEnhancer ? {
-    startEnhancer: startEnhancer
-  } : {}, endEnhancer ? {
-    endEnhancer: endEnhancer
-  } : {}, {
+  }, enhancers, {
     color: color,
     background: backgroundColor,
     type: _constants.PINHEAD_TYPES.fixed,

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

@@ -6,8 +6,8 @@ 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 { useStyletron, type ThemeT } from '../styles/index.js';
+import { getOverrides } from '../helpers/overrides.js';
 import {
   PINHEAD_TYPES,
   NEEDLE_SIZES,
@@ -20,11 +20,8 @@ import {
 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';
+import { StyledFixedMarkerDragContainer, StyledFixedMarkerRoot } from './styled-components.js';
+import type { FixedMarkerPropsT, KindT } from './types.js';
 
 type Colors = {
   color: string,
@@ -66,7 +63,7 @@ const FixedMarker = ({
   ...restProps
 }: FixedMarkerPropsT) => {
   const [, theme] = useStyletron();
-  const {color, backgroundColor} = getColors(kind, theme);
+  const { color, backgroundColor } = getColors(kind, theme);
 
   const doesPinHeadTransformOnDrag =
     needle !== NEEDLE_SIZES.none &&
@@ -74,32 +71,32 @@ const FixedMarker = ({
     size !== PINHEAD_SIZES_SHAPES.xxSmallSquare;
 
   const [Root, rootProps] = getOverrides(overrides.Root, StyledFixedMarkerRoot);
-  const [
-    FixedMarkerDragContainer,
-    fixedMarkerDragContainerProps,
-  ] = getOverrides(overrides.DragContainer, StyledFixedMarkerDragContainer);
+  const [FixedMarkerDragContainer, fixedMarkerDragContainerProps] = getOverrides(
+    overrides.DragContainer,
+    StyledFixedMarkerDragContainer
+  );
 
   const renderNeedle =
     needle !== NEEDLE_SIZES.none &&
-    ![
-      PINHEAD_SIZES_SHAPES.xxSmallCircle,
-      PINHEAD_SIZES_SHAPES.xxSmallSquare,
-    ].includes(size);
+    ![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)
+      [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`,
+        `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
@@ -110,8 +107,7 @@ const FixedMarker = ({
         <PinHead
           size={size}
           label={label}
-          {...(startEnhancer ? {startEnhancer} : {})}
-          {...(endEnhancer ? {endEnhancer} : {})}
+          {...enhancers}
           color={color}
           background={backgroundColor}
           type={PINHEAD_TYPES.fixed}
@@ -123,11 +119,7 @@ const FixedMarker = ({
           needle={needle}
         />
         {renderNeedle && (
-          <Needle
-            size={needle}
-            background={backgroundColor}
-            overrides={overrides}
-          />
+          <Needle size={needle} background={backgroundColor} overrides={overrides} />
         )}
       </FixedMarkerDragContainer>
       {doesPinHeadTransformOnDrag && (