baseui 0.0.0-next-2aecb6f → 0.0.0-next-aad2baf

package/phone-input/stateful-phone-input-container.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import React from 'react';
 // needs to be removed from here
-import {COUNTRIES, STATE_CHANGE_TYPE} from './constants.js';
+import { COUNTRIES, STATE_CHANGE_TYPE } from './constants.js';
 import type {
   StatefulPhoneInputContainerPropsT,
   StateT,
@@ -15,13 +15,13 @@ import type {
   StateChangeT,
 } from './types.js';
 import defaultProps from './default-props.js';
-import type {OnChangeParamsT} from '../select/types.js';
+import type { OnChangeParamsT } from '../select/types.js';
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
 export default class StatefulPhoneInputContainer extends React.Component<
   StatefulPhoneInputContainerPropsT,
-  StateT,
+  StateT
 > {
   static defaultProps = {
     initialState: {
@@ -34,7 +34,7 @@ export default class StatefulPhoneInputContainer extends React.Component<
     overrides: {},
   };
 
-  state = {text: '', country: COUNTRIES.US, ...this.props.initialState};
+  state = { text: '', country: COUNTRIES.US, ...this.props.initialState };
 
   internalSetState = (type: StateChangeT, nextState: $Shape<StateT>) => {
     this.setState(this.props.stateReducer(type, nextState, this.state));

package/phone-input/stateful-phone-input-next.js.flow

@@ -9,13 +9,11 @@ import React from 'react';
 import StatefulPhoneInputContainer from './stateful-phone-input-container.js';
 import PhoneInputNext from './phone-input-next.js';
 import defaultProps from './default-props.js';
-import type {PropsT, StatefulPhoneInputPropsT} from './types.js';
+import type { PropsT, StatefulPhoneInputPropsT } from './types.js';
 
-StatefulPhoneInputNext.defaultProps = {...defaultProps, clearable: true};
+StatefulPhoneInputNext.defaultProps = { ...defaultProps, clearable: true };
 
-export default function StatefulPhoneInputNext(
-  props: StatefulPhoneInputPropsT,
-) {
+export default function StatefulPhoneInputNext(props: StatefulPhoneInputPropsT) {
   return (
     <StatefulPhoneInputContainer {...props}>
       {(childrenProps: PropsT) => <PhoneInputNext {...childrenProps} />}

package/phone-input/stateful-phone-input.js.flow

@@ -9,7 +9,7 @@ import React from 'react';
 import StatefulPhoneInputContainer from './stateful-phone-input-container.js';
 import PhoneInput from './phone-input.js';
 import defaultProps from './default-props.js';
-import type {PropsT, StatefulPhoneInputPropsT} from './types.js';
+import type { PropsT, StatefulPhoneInputPropsT } from './types.js';
 
 StatefulPhoneInput.defaultProps = defaultProps;
 

package/phone-input/styled-components.js.flow

@@ -6,27 +6,24 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {SIZE} from './constants.js';
-import {styled, withStyle, withWrapper} from '../styles/index.js';
-import {StyledList} from '../menu/index.js';
-import {
-  StyledDropdownListItem,
-  StyledRoot as SelectStyledRoot,
-} from '../select/index.js';
+import { SIZE } from './constants.js';
+import { styled, withStyle, withWrapper } from '../styles/index.js';
+import { StyledList } from '../menu/index.js';
+import { StyledDropdownListItem, StyledRoot as SelectStyledRoot } from '../select/index.js';
 import defaultProps from '../select/default-props.js';
-import type {SizeT} from './types.js';
+import type { SizeT } from './types.js';
 
 type SizeStyleProps = {
   $size?: SizeT,
 };
-type HeightStyleProps = {$height: string};
+type HeightStyleProps = { $height: string };
 
 // The root element of the PhoneInputNext
-export const StyledPhoneInputRoot = styled('div', {display: 'flex'});
+export const StyledPhoneInputRoot = styled('div', { display: 'flex' });
 
 export const StyledFlagContainer = styled<SizeStyleProps>(
   'span',
-  ({$size = SIZE.default, $theme: {sizing}}) => {
+  ({ $size = SIZE.default, $theme: { sizing } }) => {
     const sizeToFont = {
       [SIZE.mini]: sizing.scale700,
       [SIZE.compact]: sizing.scale800,
@@ -36,7 +33,7 @@ export const StyledFlagContainer = styled<SizeStyleProps>(
     return {
       fontSize: sizeToFont[$size],
     };
-  },
+  }
 );
 
 // An override component for the Select's Root styled element
@@ -55,95 +52,88 @@ export const StyledRoot = withStyle<typeof SelectStyledRoot, SizeStyleProps>(
       width: sizeToWidth[props.$size || SIZE.default],
       display: 'inline-block',
     };
-  },
+  }
 );
 
-export const StyledDialCode = styled<{}>(
-  'div',
-  ({$theme: {direction, sizing}}) => {
-    const marginDir: string =
-      direction === 'rtl' ? 'marginRight' : 'marginLeft';
-    return {
-      [marginDir]: sizing.scale100,
-      display: 'flex',
-      alignItems: 'center',
-    };
-  },
-);
+export const StyledDialCode = styled<{}>('div', ({ $theme: { direction, sizing } }) => {
+  const marginDir: string = direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  return {
+    [marginDir]: sizing.scale100,
+    display: 'flex',
+    alignItems: 'center',
+  };
+});
 
 export const StyledCountrySelectContainer = styled('div', {
   display: 'flex',
   alignItems: 'center',
 });
 
-export const StyledCountrySelectDropdownContainer = withStyle<
-  typeof StyledList,
-  HeightStyleProps,
->(StyledList, (props) => {
-  const {$height = defaultProps.maxDropdownHeight} = props;
-  return {
-    height: $height,
+export const StyledCountrySelectDropdownContainer = withStyle<typeof StyledList, HeightStyleProps>(
+  StyledList,
+  (props) => {
+    const { $height = defaultProps.maxDropdownHeight } = props;
+    return {
+      height: $height,
+      paddingTop: 0,
+      paddingBottom: 0,
+    };
+  }
+);
+
+export const StyledCountrySelectDropdownListItemElement = withStyle<typeof StyledDropdownListItem>(
+  StyledDropdownListItem,
+  {
     paddingTop: 0,
     paddingBottom: 0,
-  };
-});
-
-export const StyledCountrySelectDropdownListItemElement = withStyle<
-  typeof StyledDropdownListItem,
->(StyledDropdownListItem, {
-  paddingTop: 0,
-  paddingBottom: 0,
-  paddingLeft: 0,
-  paddingRight: 0,
-  display: 'flex',
-  alignItems: 'center',
-  height: '42px',
-});
+    paddingLeft: 0,
+    paddingRight: 0,
+    display: 'flex',
+    alignItems: 'center',
+    height: '42px',
+  }
+);
 
 export const StyledCountrySelectDropdownListItem = withWrapper(
   StyledCountrySelectDropdownListItemElement,
   (Styled) =>
-    function StyledCountrySelectDropdownListItem({item, ...restProps}) {
+    function StyledCountrySelectDropdownListItem({ item, ...restProps }) {
       return <Styled {...restProps} />;
-    },
+    }
 );
 
 export const StyledCountrySelectDropdownFlagColumn = styled<{}>(
   'div',
-  ({$theme: {direction, sizing}}) => {
-    const paddingDir: string =
-      direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+  ({ $theme: { direction, sizing } }) => {
+    const paddingDir: string = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
     return {
       [paddingDir]: sizing.scale600,
       display: 'flex',
       alignItems: 'center',
     };
-  },
+  }
 );
 
 export const StyledCountrySelectDropdownNameColumn = styled<{}>(
   'div',
-  ({$theme: {direction, sizing}}) => {
-    const paddingDir: string =
-      direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+  ({ $theme: { direction, sizing } }) => {
+    const paddingDir: string = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
     return {
       [paddingDir]: sizing.scale600,
     };
-  },
+  }
 );
 
 export const StyledCountrySelectDropdownDialcodeColumn = styled<{}>(
   'div',
-  ({$theme: {direction, sizing}}) => {
-    const paddingDir: string =
-      direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
-    const marginDir: string =
-      direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  ({ $theme: { direction, sizing } }) => {
+    const paddingDir: string = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+    const marginDir: string = direction === 'rtl' ? 'marginRight' : 'marginLeft';
     return {
       [paddingDir]: sizing.scale600,
       [marginDir]: 'auto',
     };
-  },
+  }
 );
 
 declare var __DEV__: boolean;

package/phone-input/types.js.flow

@@ -6,11 +6,11 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_CHANGE_TYPE, SIZE, COUNTRIES} from './constants.js';
-import type {OverrideT} from '../helpers/overrides.js';
-import type {OnChangeParamsT} from '../select/types.js';
+import { STATE_CHANGE_TYPE, SIZE, COUNTRIES } from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import type { OnChangeParamsT } from '../select/types.js';
 
-export type ReactRefT<T> = {current: null | T};
+export type ReactRefT<T> = { current: null | T };
 export type SizeT = $Keys<typeof SIZE>;
 export type CountryIsoT = $Keys<typeof COUNTRIES>;
 export type CountriesT = $ReadOnly<CountryT>;
@@ -28,11 +28,7 @@ export type StateT = {
 
 export type StateChangeT = $Keys<typeof STATE_CHANGE_TYPE>;
 
-export type StateReducerT = (
-  type: StateChangeT,
-  nextState: StateT,
-  currentState: StateT,
-) => StateT;
+export type StateReducerT = (type: StateChangeT, nextState: StateT, currentState: StateT) => StateT;
 
 export type mapIsoToLabelT = (iso: string) => string;
 
@@ -58,7 +54,7 @@ export type CountrySelectDropdownPropsT = {
 };
 
 export type CountrySelectPropsT = {
-  countries: {[string]: CountryT},
+  countries: { [string]: CountryT },
   country: CountryT,
   disabled: boolean,
   error: boolean,
@@ -139,7 +135,7 @@ export type PropsT = {
 
 export type LitePropsT = {
   ...$Exact<PropsT>,
-  countries: {[string]: CountryT},
+  countries: { [string]: CountryT },
 };
 
 export type StatefulPhoneInputContainerPropsT = {

package/phone-input/utils.js.flow

@@ -18,14 +18,12 @@ export function iso2FlagEmoji(iso: string) {
       console.warn(
         `iso argument must be an ISO 3166-1 alpha-2 string, but got '${
           type === 'string' ? iso : type
-        }' instead.`,
+        }' instead.`
       );
     }
     return;
   }
-  const chars = Array.from(iso.toUpperCase()).map(
-    (char) => char.charCodeAt(0) + OFFSET,
-  );
+  const chars = Array.from(iso.toUpperCase()).map((char) => char.charCodeAt(0) + OFFSET);
   return String.fromCodePoint(...chars);
 }
 

package/pin-code/default-props.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {SIZE} from '../input/index.js';
+import { SIZE } from '../input/index.js';
 
 const defaultProps = {
   'aria-label': 'Please enter your pin code',

package/pin-code/index.js.flow

@@ -6,10 +6,10 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as PinCode} from './pin-code.js';
-export {default as StatefulPinCodeContainer} from './stateful-pin-code-container.js';
-export {default as StatefulPinCode} from './stateful-pin-code.js';
-export {SIZE} from '../input/constants.js';
+export { default as PinCode } from './pin-code.js';
+export { default as StatefulPinCodeContainer } from './stateful-pin-code-container.js';
+export { default as StatefulPinCode } from './stateful-pin-code.js';
+export { SIZE } from '../input/constants.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/pin-code/pin-code.js.flow

@@ -14,9 +14,9 @@ import {
   StyledInputOverrideRoot,
   StyledInputOverrideInput,
 } from './styled-components.js';
-import type {PropsT, StateT} from './types.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
-import {Input as DefaultInput} from '../input/index.js';
+import type { PropsT, StateT } from './types.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
+import { Input as DefaultInput } from '../input/index.js';
 
 export default class PinCode extends React.Component<PropsT, StateT> {
   static defaultProps = defaultProps;
@@ -43,23 +43,14 @@ export default class PinCode extends React.Component<PropsT, StateT> {
   }
 
   render() {
-    const [Root, rootProps] = getOverrides(
-      this.props.overrides.Root,
-      StyledRoot,
-    );
-    const [Input, inputProps] = getOverrides(
-      this.props.overrides.Input,
-      DefaultInput,
-    );
+    const [Root, rootProps] = getOverrides(this.props.overrides.Root, StyledRoot);
+    const [Input, inputProps] = getOverrides(this.props.overrides.Input, DefaultInput);
     const baseOverrides = {
-      Root: {component: StyledInputOverrideRoot},
+      Root: { component: StyledInputOverrideRoot },
       Input: {
         component: StyledInputOverrideInput,
         props: {
-          type:
-            typeof this.props.mask === 'boolean' && this.props.mask
-              ? 'password'
-              : 'text',
+          type: typeof this.props.mask === 'boolean' && this.props.mask ? 'password' : 'text',
         },
       },
     };
@@ -80,8 +71,8 @@ export default class PinCode extends React.Component<PropsT, StateT> {
               inputRef={this._inputRefs.ref(i)}
               key={i}
               name={this.props.name}
-              onBlur={() => this.setState({hasFocus: false})}
-              onFocus={() => this.setState({hasFocus: true})}
+              onBlur={() => this.setState({ hasFocus: false })}
+              onFocus={() => this.setState({ hasFocus: true })}
               onChange={(event) => {
                 const eventValue = event.target.value;
                 // in the case of an autocomplete or copy and paste
@@ -91,7 +82,7 @@ export default class PinCode extends React.Component<PropsT, StateT> {
                     eventValue.length === this.props.values.length &&
                     eventValue.match(/^[0-9]+$/)
                   ) {
-                    this.props.onChange({values: eventValue.split(''), event});
+                    this.props.onChange({ values: eventValue.split(''), event });
                   }
                   return;
                 }
@@ -99,7 +90,7 @@ export default class PinCode extends React.Component<PropsT, StateT> {
                 if (eventValue === '') {
                   const newValues = this.props.values.slice();
                   newValues[i] = '';
-                  this.props.onChange({values: newValues, event});
+                  this.props.onChange({ values: newValues, event });
                   return;
                 }
                 // we want to override the input value with the last digit typed
@@ -114,12 +105,9 @@ export default class PinCode extends React.Component<PropsT, StateT> {
                 if (newValue.match(/^[0-9]$/)) {
                   const newValues = this.props.values.slice();
                   newValues[i] = newValue;
-                  this.props.onChange({values: newValues, event});
+                  this.props.onChange({ values: newValues, event });
                   // tab to next pin code input if we aren't at end already
-                  if (
-                    this.props.manageFocus &&
-                    i < this.props.values.length - 1
-                  ) {
+                  if (this.props.manageFocus && i < this.props.values.length - 1) {
                     const inputRef = this._inputRefs.map.get(i + 1);
                     if (inputRef && inputRef.focus) inputRef.focus();
                   }

package/pin-code/stateful-pin-code-container.js.flow

@@ -15,29 +15,25 @@ import type {
   StateReducerT,
 } from './types.js';
 import defaultProps from './default-props.js';
-import {STATE_CHANGE_TYPE} from '../input/index.js';
+import { STATE_CHANGE_TYPE } from '../input/index.js';
 
 const stateReducer: StateReducerT = (type, nextState) => nextState;
 
 export default class StatefulPinCodeContainer extends React.Component<
   StatefulPinCodeContainerPropsT,
-  StatefulPinCodeContainerStateT,
+  StatefulPinCodeContainerStateT
 > {
   static defaultProps = {
-    initialState: {values: defaultProps.values},
+    initialState: { values: defaultProps.values },
     stateReducer,
     onChange: defaultProps.onChange,
   };
 
   state = this.props.initialState;
 
-  handleChange = ({values, event}: ChangeEventT) => {
-    this.props.onChange({values, event});
-    const nextState = this.props.stateReducer(
-      STATE_CHANGE_TYPE.change,
-      {values},
-      this.state,
-    );
+  handleChange = ({ values, event }: ChangeEventT) => {
+    this.props.onChange({ values, event });
+    const nextState = this.props.stateReducer(STATE_CHANGE_TYPE.change, { values }, this.state);
     this.setState(nextState);
   };
 

package/pin-code/stateful-pin-code.js.flow

@@ -10,7 +10,7 @@ import React from 'react';
 import defaultProps from './default-props.js';
 import PinCode from './pin-code.js';
 import StatefulPinCodeContainer from './stateful-pin-code-container.js';
-import type {PropsT, StatefulPinCodePropsT} from './types.js';
+import type { PropsT, StatefulPinCodePropsT } from './types.js';
 
 StatefulPinCode.defaultProps = defaultProps;
 

package/pin-code/styled-components.js.flow

@@ -6,34 +6,31 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled, withStyle} from '../styles/index.js';
-import {
-  Root as StyledInputRoot,
-  Input as StyledInputInput,
-} from '../input/styled-components.js';
-import type {SizeT} from '../input/types.js';
-import {SIZE} from '../input/constants.js';
+import { styled, withStyle } from '../styles/index.js';
+import { Root as StyledInputRoot, Input as StyledInputInput } from '../input/styled-components.js';
+import type { SizeT } from '../input/types.js';
+import { SIZE } from '../input/constants.js';
 
 export const StyledRoot = styled('div', {
   display: 'flex',
   alignItems: 'center',
 });
 
-export const StyledInputOverrideRoot = withStyle<
-  typeof StyledInputRoot,
-  {$size: SizeT},
->(StyledInputRoot, ({$size = SIZE.default}) => {
-  const width = {
-    [SIZE.mini]: '32px',
-    [SIZE.compact]: '36px',
-    [SIZE.default]: '48px',
-    [SIZE.large]: '56px',
-  }[$size];
-  return {
-    width,
-    marginRight: '8px',
-  };
-});
+export const StyledInputOverrideRoot = withStyle<typeof StyledInputRoot, { $size: SizeT }>(
+  StyledInputRoot,
+  ({ $size = SIZE.default }) => {
+    const width = {
+      [SIZE.mini]: '32px',
+      [SIZE.compact]: '36px',
+      [SIZE.default]: '48px',
+      [SIZE.large]: '56px',
+    }[$size];
+    return {
+      width,
+      marginRight: '8px',
+    };
+  }
+);
 
 export const StyledInputOverrideInput = withStyle(StyledInputInput, {
   textAlign: 'center',

package/pin-code/types.js.flow

@@ -7,10 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {SIZE, STATE_CHANGE_TYPE} from '../input/index.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { SIZE, STATE_CHANGE_TYPE } from '../input/index.js';
 
-export type ChangeEventT = {values: string[], event: InputEvent};
+export type ChangeEventT = { values: string[], event: InputEvent };
 
 export type PropsT = {
   /** Sets aria-label attribute for each input element. */
@@ -68,7 +68,7 @@ export type StateChangeT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type StateReducerT = (
   type: StateChangeT,
   nextState: StatefulPinCodeContainerStateT,
-  currentState: StatefulPinCodeContainerStateT,
+  currentState: StatefulPinCodeContainerStateT
 ) => StatefulPinCodeContainerStateT;
 
 export type StatefulPinCodePropsT = PropsT & {

package/popover/default-props.js.flow

@@ -5,8 +5,8 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE} from './constants.js';
-import type {BasePopoverPropsT} from './types.js';
+import { ACCESSIBILITY_TYPE, PLACEMENT, TRIGGER_TYPE } from './constants.js';
+import type { BasePopoverPropsT } from './types.js';
 
 const baseDefaultProps: $Shape<BasePopoverPropsT> = {
   accessibilityType: ACCESSIBILITY_TYPE.menu,

package/popover/index.js.flow

@@ -5,9 +5,9 @@ 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 StatefulPopover} from './stateful-popover.js';
-export {default as StatefulContainer} from './stateful-container.js';
-export {default as Popover} from './popover.js';
+export { default as StatefulPopover } from './stateful-popover.js';
+export { default as StatefulContainer } from './stateful-container.js';
+export { default as Popover } from './popover.js';
 // Constants
 export {
   ACCESSIBILITY_TYPE,

package/popover/popover.js

@@ -557,10 +557,11 @@ var PopoverInner = /*#__PURE__*/function (_React$Component) {
 _defineProperty(PopoverInner, "defaultProps", _defaultProps.default);
 
 var Popover = function Popover(props) {
-  var innerRef = props.innerRef; //$FlowExpectedError[cannot-spread-inexact]
+  var innerRef = props.innerRef;
+  var gID = (0, _reactUid.useUID)(); //$FlowExpectedError[cannot-spread-inexact]
 
   return /*#__PURE__*/React.createElement(PopoverInner, _extends({
-    id: props.id || (0, _reactUid.useUID)(),
+    id: props.id || gID,
     ref: innerRef
   }, props));
 };