baseui 10.9.2 → 10.11.1

package/input/styled-components.js.flow

@@ -5,17 +5,19 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {styled} from '../styles/index.js';
-import type {ThemeT} from '../styles/types.js';
-import {ADJOINED, SIZE} from './constants.js';
-import type {SharedPropsT, SizeT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { ThemeT, Font } from '../styles/types.js';
+import type { StyleObject } from 'styletron-standard';
+import { ADJOINED, SIZE } from './constants.js';
+import type { SharedPropsT, SizeT } from './types.js';
+import type { SharedStylePropsT } from '../textarea/types.js';
 import DeleteAlt from '../icon/delete-alt.js';
 
 export const StyledMaskToggleButton = styled<{
   $size: SizeT,
   $isFocusVisible: boolean,
   $theme: ThemeT,
-}>('button', ({$theme, $size, $isFocusVisible}) => {
+}>('button', ({ $theme, $size, $isFocusVisible }) => {
   const pad = {
     [SIZE.mini]: $theme.sizing.scale400,
     [SIZE.compact]: $theme.sizing.scale400,
@@ -42,7 +44,7 @@ export const StyledClearIconContainer = styled<{
   $size: SizeT,
   $alignTop: boolean,
   $theme: ThemeT,
-}>('div', ({$alignTop = false, $size, $theme}) => {
+}>('div', ({ $alignTop = false, $size, $theme }) => {
   const pad = {
     [SIZE.mini]: $theme.sizing.scale200,
     [SIZE.compact]: $theme.sizing.scale200,
@@ -60,15 +62,23 @@ export const StyledClearIconContainer = styled<{
   };
 });
 
-export const StyledClearIcon = styled<
-  typeof DeleteAlt,
-  {$isFocusVisible: boolean},
->(DeleteAlt, ({$theme, $isFocusVisible}) => ({
-  cursor: 'pointer',
-  outline: $isFocusVisible ? `solid 3px ${$theme.colors.accent}` : 'none',
-}));
+export const StyledClearIcon = styled<typeof DeleteAlt, { $isFocusVisible: boolean }>(
+  DeleteAlt,
+  ({ $theme, $isFocusVisible }) => ({
+    cursor: 'pointer',
+    outline: $isFocusVisible ? `solid 3px ${$theme.colors.accent}` : 'none',
+  })
+);
 
-function getInputPadding(size, sizing) {
+function getInputPadding(
+  size,
+  sizing
+): {|
+  paddingTop: string,
+  paddingBottom: string,
+  paddingLeft: string,
+  paddingRight: string,
+|} {
   return {
     [SIZE.mini]: {
       paddingTop: sizing.scale100,
@@ -97,7 +107,13 @@ function getInputPadding(size, sizing) {
   }[size];
 }
 
-function getRootPadding(adjoined, size, sizing, direction, hasIconTrailing) {
+function getRootPadding(
+  adjoined,
+  size,
+  sizing,
+  direction,
+  hasIconTrailing
+): {| paddingLeft: string, paddingRight: string |} {
   let ifLeftPad =
     adjoined === ADJOINED.both ||
     (adjoined === ADJOINED.left && direction !== 'rtl') ||
@@ -114,7 +130,7 @@ function getRootPadding(adjoined, size, sizing, direction, hasIconTrailing) {
   };
 }
 
-function getFont(size, typography) {
+function getFont(size, typography): Font {
   return {
     [SIZE.mini]: typography.font100,
     [SIZE.compact]: typography.font200,
@@ -123,7 +139,19 @@ function getFont(size, typography) {
   }[size];
 }
 
-function getRootColors($disabled, $isFocused, $error, $positive, colors) {
+function getRootColors(
+  $disabled,
+  $isFocused,
+  $error,
+  $positive = false,
+  colors
+): {|
+  borderLeftColor: string,
+  borderRightColor: string,
+  borderTopColor: string,
+  borderBottomColor: string,
+  backgroundColor: string,
+|} {
   if ($disabled) {
     return {
       borderLeftColor: colors.inputFillDisabled,
@@ -173,7 +201,12 @@ function getRootColors($disabled, $isFocused, $error, $positive, colors) {
   };
 }
 
-function getRootBorderRadius(radius) {
+function getRootBorderRadius(radius): {|
+  borderTopLeftRadius: string,
+  borderBottomLeftRadius: string,
+  borderTopRightRadius: string,
+  borderBottomRightRadius: string,
+|} {
   return {
     borderTopLeftRadius: radius,
     borderBottomLeftRadius: radius,
@@ -200,7 +233,7 @@ export const getRootStyles = (props: {
     $positive,
     $size,
     $theme,
-    $theme: {borders, colors, sizing, typography, animation},
+    $theme: { borders, colors, sizing, typography, animation },
     $hasIconTrailing,
   } = props;
   return {
@@ -222,13 +255,7 @@ export const getRootStyles = (props: {
     ...getRootBorderRadius(borders.inputBorderRadius),
     ...getFont($size, typography),
     ...getRootColors($disabled, $isFocused, $error, $positive, colors),
-    ...getRootPadding(
-      $adjoined,
-      $size,
-      sizing,
-      $theme.direction,
-      $hasIconTrailing,
-    ),
+    ...getRootPadding($adjoined, $size, sizing, $theme.direction, $hasIconTrailing),
   };
 };
 
@@ -261,13 +288,7 @@ function getInputEnhancerPadding($size, sizing): InputEnhancerStyles {
   }[$size];
 }
 
-function getInputEnhancerColors(
-  $disabled,
-  $isFocused,
-  $error,
-  $positive,
-  colors,
-) {
+function getInputEnhancerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
     return {
       color: colors.inputEnhancerTextDisabled,
@@ -302,14 +323,14 @@ function getInputEnhancerColors(
   };
 }
 
-export const InputEnhancer = styled<SharedPropsT>('div', props => {
+export const InputEnhancer = styled<SharedPropsT>('div', (props) => {
   const {
     $size,
     $disabled,
     $isFocused,
     $error,
     $positive,
-    $theme: {colors, sizing, typography, animation},
+    $theme: { colors, sizing, typography, animation },
   } = props;
   return {
     display: 'flex',
@@ -326,13 +347,7 @@ export const InputEnhancer = styled<SharedPropsT>('div', props => {
 
 // InputContainer
 
-function getInputContainerColors(
-  $disabled,
-  $isFocused,
-  $error,
-  $positive,
-  colors,
-) {
+function getInputContainerColors($disabled, $isFocused, $error, $positive, colors) {
   if ($disabled) {
     return {
       color: colors.inputTextDisabled,
@@ -381,7 +396,7 @@ export const getInputContainerStyles = (props: {
     $disabled,
     $positive,
     $size,
-    $theme: {colors, typography, animation},
+    $theme: { colors, typography, animation },
   } = props;
   return {
     display: 'flex',
@@ -390,31 +405,32 @@ export const getInputContainerStyles = (props: {
     transitionDuration: animation.timing200,
     transitionTimingFunction: animation.easeOutCurve,
     ...getFont($size, typography),
-    ...getInputContainerColors(
-      $disabled,
-      $isFocused,
-      $error,
-      $positive,
-      colors,
-    ),
+    ...getInputContainerColors($disabled, $isFocused, $error, $positive, colors),
   };
 };
 
-export const InputContainer = styled<SharedPropsT>(
-  'div',
-  getInputContainerStyles,
-);
+export const InputContainer = styled<SharedPropsT>('div', getInputContainerStyles);
 
-function getInputColors($disabled, $isFocused, $error, colors) {
+function getInputColors(
+  $disabled,
+  $isFocused,
+  $error,
+  colors
+): {|
+  color: string,
+  '-webkit-text-fill-color'?: string,
+  caretColor: string,
+  '::placeholder': {| color: string |},
+|} {
   if ($disabled) {
-    return ({
+    return {
       color: colors.inputTextDisabled,
       '-webkit-text-fill-color': colors.inputTextDisabled,
       caretColor: colors.contentPrimary,
       '::placeholder': {
         color: colors.inputPlaceholderDisabled,
       },
-    }: {});
+    };
   }
 
   return {
@@ -426,14 +442,17 @@ function getInputColors($disabled, $isFocused, $error, colors) {
   };
 }
 
-export const getInputStyles = (props: SharedPropsT & {$theme: ThemeT}) => {
+export const getInputStyles = (
+  props: (SharedPropsT & { $theme: ThemeT }) | (SharedStylePropsT & { $theme: ThemeT })
+): StyleObject => {
   const {
     $disabled,
     $isFocused,
     $error,
     $size,
-    $theme: {colors, sizing, typography},
+    $theme: { colors, sizing, typography },
   } = props;
+  //$FlowFixMe
   return {
     boxSizing: 'border-box',
     backgroundColor: 'transparent',

package/input/types.js.flow

@@ -6,19 +6,13 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {
-  STATE_CHANGE_TYPE,
-  ADJOINED,
-  SIZE,
-  ENHANCER_POSITION,
-} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constants.js';
 
 export type AdjoinedT = $Keys<typeof ADJOINED>;
-
 export type SizeT = $Keys<typeof SIZE>;
-
 export type StateTypeT = $Keys<typeof STATE_CHANGE_TYPE>;
+export type ReactRefT<T> = {| current: null | T |} | { current: null | T };
 
 export type InternalStateT = {
   /** Renders UI in 'focus' state */
@@ -38,7 +32,7 @@ export type StateT = {
 export type StateReducerT = (
   stateType: StateTypeT,
   nextState: StateT,
-  currentState: StateT,
+  currentState: StateT
 ) => StateT;
 
 export type SharedPropsT = {|
@@ -61,8 +55,6 @@ export type SharedPropsT = {|
   $hasIconTrailing: boolean,
 |};
 
-export type PropsT = *;
-
 export type BaseInputComponentsT = {|
   InputContainer?: OverrideT,
   Input?: OverrideT,
@@ -116,7 +108,7 @@ export type BaseInputPropsT<T> = {|
   /** A  hint as to the type of data that might be entered by the user while editing the element or its contents. */
   inputMode?: string,
   /** A ref to access an input element. */
-  inputRef?: React.ElementRef<*>,
+  inputRef?: ReactRefT<T>,
   name: string,
   onBlur: (e: SyntheticFocusEvent<T>) => mixed,
   onChange?: (e: SyntheticInputEvent<T>) => mixed,
@@ -148,16 +140,16 @@ export type BaseInputPropsT<T> = {|
   /** max value when used as input type=number */
   max?: number,
   /** step value when used as input type=number */
-  step?: number,
+  step?: number | 'any',
 |};
 
 export type InputPropsT = {|
   ...BaseInputPropsT<HTMLInputElement>,
   overrides: InputComponentsT,
   /** An input helper rendered before and attached to the input field. */
-  startEnhancer: ?(React.Node | ((props: PropsT) => React.Node)),
+  startEnhancer: ?(React.Node | ((props: SharedPropsT) => React.Node)),
   /** An input helper rendered after and attached to the input field. */
-  endEnhancer: ?(React.Node | ((props: PropsT) => React.Node)),
+  endEnhancer: ?(React.Node | ((props: SharedPropsT) => React.Node)),
   /** Handler for the `focus` event. */
   onFocus: (e: SyntheticFocusEvent<HTMLInputElement>) => mixed,
   /** Handler for the `blur` event. */
@@ -172,8 +164,15 @@ export type MaskedInputPropsT = $Shape<{|
   maskChar?: string,
 |}>;
 
+export type StatefulContainerChildrenPropsT<T> = {|
+  onChange: (e: SyntheticInputEvent<T>) => mixed,
+  /** If true, adds a clear value icon button to the end of the input container. */
+  clearable?: boolean,
+  ...StatefulInputPropsT,
+|};
+
 export type StatefulContainerPropsT<T> = {|
-  children: (props: PropsT) => React.Node,
+  children: (props: StatefulContainerChildrenPropsT<T>) => React.Node,
   /** Initial state of an uncontrolled input component. */
   initialState?: StateT,
   /** A state change handler. Used to override default state transitions. */
@@ -186,7 +185,7 @@ export type StatefulContainerPropsT<T> = {|
 
 type OmitPropsT = {
   overrides: InputComponentsT,
-  children: ?(props: *) => React.Node,
+  children: ?(props: StatefulContainerChildrenPropsT<HTMLInputElement>) => React.Node,
 };
 
 type FullStPropsT = InputPropsT & StatefulContainerPropsT<HTMLInputElement>;

package/input/utils.js.flow

@@ -5,14 +5,14 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import type {InputPropsT, BaseInputPropsT, InternalStateT} from './types.js';
+import type { InputPropsT, BaseInputPropsT, InternalStateT, SharedPropsT } from './types.js';
 
 export function getSharedProps<T>(
   props: BaseInputPropsT<T> | InputPropsT,
-  state: InternalStateT,
-) {
-  const {disabled, error, positive, adjoined, size, required} = props;
-  const {isFocused} = state;
+  state: InternalStateT
+): $Shape<SharedPropsT> {
+  const { disabled, error, positive, adjoined, size, required } = props;
+  const { isFocused } = state;
   return {
     $isFocused: isFocused,
     $disabled: disabled,

package/layer/index.js.flow

@@ -5,10 +5,10 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-export {default as LayersManager, LayersContext} from './layers-manager.js';
-export {default as Layer} from './layer.js';
-export {default as TetherBehavior} from './tether.js';
-export {TETHER_PLACEMENT} from './constants.js';
+export { default as LayersManager, LayersContext } from './layers-manager.js';
+export { default as Layer } from './layer.js';
+export { default as TetherBehavior } from './tether.js';
+export { TETHER_PLACEMENT } from './constants.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/layer/layer.js

@@ -207,9 +207,10 @@ var LayerComponent = /*#__PURE__*/function (_React$Component) {
       }, children) : children;
 
       if (typeof document !== 'undefined') {
-        if (mountNode || container) {
-          // $FlowFixMe
-          return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, mountNode || container);
+        var portalContainer = mountNode || container;
+
+        if (portalContainer) {
+          return /*#__PURE__*/_reactDom.default.createPortal(childrenToRender, portalContainer);
         }
 
         return null;

package/layer/layer.js.flow

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 /* global document */
 import * as React from 'react';
 import ReactDOM from 'react-dom';
-import {styled} from '../styles/index.js';
-import {LayersContext, Consumer} from './layers-manager.js';
-import type {LayerPropsT, LayerComponentPropsT, LayerStateT} from './types.js';
+import { styled } from '../styles/index.js';
+import { LayersContext, Consumer } from './layers-manager.js';
+import type { LayerPropsT, LayerComponentPropsT, LayerStateT } from './types.js';
 
-const Container = styled<{$zIndex?: number}>('div', ({$zIndex}) => ({
+const Container = styled<{ $zIndex?: number }>('div', ({ $zIndex }) => ({
   position: 'absolute',
   top: 0,
   left: 0,
@@ -20,13 +20,10 @@ const Container = styled<{$zIndex?: number}>('div', ({$zIndex}) => ({
   zIndex: $zIndex || null,
 }));
 
-class LayerComponent extends React.Component<
-  LayerComponentPropsT,
-  LayerStateT,
-> {
+class LayerComponent extends React.Component<LayerComponentPropsT, LayerStateT> {
   static contextType: typeof LayersContext = LayersContext;
 
-  state = {container: null};
+  state = { container: null };
 
   componentDidMount() {
     this.context.addEscapeHandler(this.onEscape);
@@ -34,7 +31,7 @@ class LayerComponent extends React.Component<
       this.context.addDocClickHandler(this.onDocumentClick);
     }
 
-    const {onMount, mountNode, host: layersManagerHost} = this.props;
+    const { onMount, mountNode, host: layersManagerHost } = this.props;
     if (mountNode) {
       onMount && onMount();
       return;
@@ -46,7 +43,7 @@ class LayerComponent extends React.Component<
     if (__DEV__) {
       if (!hasLayersManager) {
         console.warn(
-          '`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information',
+          '`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information'
         );
       }
     }
@@ -57,7 +54,7 @@ class LayerComponent extends React.Component<
   }
 
   componentDidUpdate(prevProps) {
-    const {host, mountNode} = this.props;
+    const { host, mountNode } = this.props;
     if (mountNode) {
       return;
     }
@@ -105,7 +102,7 @@ class LayerComponent extends React.Component<
   };
 
   addContainer(host) {
-    const {index, mountNode, onMount} = this.props;
+    const { index, mountNode, onMount } = this.props;
     // Do nothing if mountNode is provided
     if (mountNode) {
       return;
@@ -114,28 +111,22 @@ class LayerComponent extends React.Component<
       const container = host.ownerDocument.createElement('div');
       // `host` is an DOM node, but not a React component
       const sibling = typeof index === 'number' ? host.children[index] : null;
-      sibling
-        ? host.insertBefore(container, sibling)
-        : host.appendChild(container);
-      this.setState({container}, () => {
+      sibling ? host.insertBefore(container, sibling) : host.appendChild(container);
+      this.setState({ container }, () => {
         onMount && onMount();
       });
     }
   }
 
   render() {
-    const {container} = this.state;
-    const {children, mountNode, zIndex} = this.props;
+    const { container } = this.state;
+    const { children, mountNode, zIndex } = this.props;
     // Only adding an additional wrapper when a layer has z-index to be set
-    const childrenToRender = zIndex ? (
-      <Container $zIndex={zIndex}>{children}</Container>
-    ) : (
-      children
-    );
+    const childrenToRender = zIndex ? <Container $zIndex={zIndex}>{children}</Container> : children;
     if (__BROWSER__) {
-      if (mountNode || container) {
-        // $FlowFixMe
-        return ReactDOM.createPortal(childrenToRender, mountNode || container);
+      const portalContainer = mountNode || container;
+      if (portalContainer) {
+        return ReactDOM.createPortal(childrenToRender, portalContainer);
       }
       return null;
     }
@@ -146,9 +137,7 @@ class LayerComponent extends React.Component<
 export default function Layer(props: LayerPropsT) {
   return (
     <Consumer>
-      {({host, zIndex}) => (
-        <LayerComponent {...props} host={host} zIndex={zIndex} />
-      )}
+      {({ host, zIndex }) => <LayerComponent {...props} host={host} zIndex={zIndex} />}
     </Consumer>
   );
 }

package/layer/layers-manager.js.flow

@@ -6,14 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {styled} from '../styles/index.js';
-import {getOverrides} from '../helpers/overrides.js';
-import type {
-  LayersManagerPropsT,
-  LayersManagerStateT,
-  LayersContextT,
-} from './types.js';
-import {initFocusVisible} from '../utils/focusVisible.js';
+import { styled } from '../styles/index.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { LayersManagerPropsT, LayersManagerStateT, LayersContextT } from './types.js';
+import { initFocusVisible } from '../utils/focusVisible.js';
 
 const StyledAppContainer = styled('div', {});
 const StyledLayersContainer = styled('div', {});
@@ -21,7 +17,7 @@ const StyledLayersContainer = styled('div', {});
 function defaultEventHandlerFn() {
   if (__DEV__) {
     console.warn(
-      '`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information',
+      '`LayersManager` was not found. This occurs if you are attempting to use a component requiring `Layer` without using the `BaseProvider` at the root of your app. Please visit https://baseweb.design/components/base-provider/ for more information'
     );
   }
 }
@@ -39,21 +35,21 @@ export const Consumer = LayersContext.Consumer;
 
 export default class LayersManager extends React.Component<
   LayersManagerPropsT,
-  LayersManagerStateT,
+  LayersManagerStateT
 > {
   host: {
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     current: React.ElementRef<any> | null,
   } = React.createRef();
 
   containerRef: {
-    // eslint-disable-next-line flowtype/no-weak-types
+    // flowlint-next-line unclear-type:off
     current: React.ElementRef<any> | null,
   } = React.createRef();
 
   constructor(props: LayersManagerPropsT) {
     super(props);
-    this.state = {escapeKeyHandlers: [], docClickHandlers: []};
+    this.state = { escapeKeyHandlers: [], docClickHandlers: [] };
   }
 
   componentDidMount() {
@@ -75,9 +71,7 @@ export default class LayersManager extends React.Component<
   }
 
   onDocumentClick = (event: MouseEvent) => {
-    const docClickHandler = this.state.docClickHandlers[
-      this.state.docClickHandlers.length - 1
-    ];
+    const docClickHandler = this.state.docClickHandlers[this.state.docClickHandlers.length - 1];
     if (docClickHandler) {
       docClickHandler(event);
     }
@@ -85,9 +79,8 @@ export default class LayersManager extends React.Component<
 
   onKeyUp = (event: KeyboardEvent) => {
     if (event.key === 'Escape') {
-      const escapeKeyHandler = this.state.escapeKeyHandlers[
-        this.state.escapeKeyHandlers.length - 1
-      ];
+      const escapeKeyHandler =
+        this.state.escapeKeyHandlers[this.state.escapeKeyHandlers.length - 1];
       if (escapeKeyHandler) {
         escapeKeyHandler();
       }
@@ -95,55 +88,51 @@ export default class LayersManager extends React.Component<
   };
 
   onAddEscapeHandler = (escapeKeyHandler: () => mixed) => {
-    this.setState(prev => {
-      return {escapeKeyHandlers: [...prev.escapeKeyHandlers, escapeKeyHandler]};
+    this.setState((prev) => {
+      return { escapeKeyHandlers: [...prev.escapeKeyHandlers, escapeKeyHandler] };
     });
   };
 
   onRemoveEscapeHandler = (escapeKeyHandler: () => mixed) => {
-    this.setState(prev => {
+    this.setState((prev) => {
       return {
-        escapeKeyHandlers: prev.escapeKeyHandlers.filter(
-          handler => handler !== escapeKeyHandler,
-        ),
+        escapeKeyHandlers: prev.escapeKeyHandlers.filter((handler) => handler !== escapeKeyHandler),
       };
     });
   };
 
   onAddDocClickHandler = (docClickHandler: (event: MouseEvent) => mixed) => {
-    this.setState(prev => {
-      return {docClickHandlers: [...prev.docClickHandlers, docClickHandler]};
+    this.setState((prev) => {
+      return { docClickHandlers: [...prev.docClickHandlers, docClickHandler] };
     });
   };
 
   onRemoveDocClickHandler = (docClickHandler: (event: MouseEvent) => mixed) => {
-    this.setState(prev => {
+    this.setState((prev) => {
       return {
-        docClickHandlers: prev.docClickHandlers.filter(
-          handler => handler !== docClickHandler,
-        ),
+        docClickHandlers: prev.docClickHandlers.filter((handler) => handler !== docClickHandler),
       };
     });
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [AppContainer, appContainerProps] = getOverrides(
       overrides.AppContainer,
-      StyledAppContainer,
+      StyledAppContainer
     );
     const [LayersContainer, layersContainerProps] = getOverrides(
       overrides.LayersContainer,
-      StyledLayersContainer,
+      StyledLayersContainer
     );
     return (
       <Consumer>
-        {({host}) => {
+        {({ host }) => {
           if (__DEV__) {
             if (host !== undefined) {
               // eslint-disable-next-line no-console
               console.warn(
-                'There is a LayersManager already exists in your application. It is not recommended to have more than one LayersManager in an application.',
+                'There is a LayersManager already exists in your application. It is not recommended to have more than one LayersManager in an application.'
               );
             }
           }