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

package/phone-input/country-picker.js.flow

@@ -8,15 +8,15 @@ LICENSE file in the root directory of this source tree.
 
 import React from 'react';
 import BaseCountryPicker from './base-country-picker.js';
-import {SIZE} from './constants.js';
-import {SingleSelect as DefaultSelect} from '../select/index.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { SIZE } from './constants.js';
+import { SingleSelect as DefaultSelect } from '../select/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import defaultProps from './default-props.js';
-import type {CountrySelectPropsT} from './types.js';
+import type { CountrySelectPropsT } from './types.js';
 
 CountryPicker.defaultProps = {
   disabled: defaultProps.disabled,
-  inputRef: {current: null},
+  inputRef: { current: null },
   maxDropdownHeight: defaultProps.maxDropdownHeight,
   maxDropdownWidth: defaultProps.maxDropdownWidth,
   overrides: {},
@@ -27,12 +27,11 @@ CountryPicker.defaultProps = {
 };
 
 export default function CountryPicker(props: CountrySelectPropsT) {
-  const {overrides} = props;
+  const { overrides } = props;
   const baseSelectOverrides = {
     Root: {
-      style: ({$theme: {direction, sizing}}) => {
-        const marginDir: string =
-          direction === 'rtl' ? 'marginLeft' : 'marginRight';
+      style: ({ $theme: { direction, sizing } }) => {
+        const marginDir: string = direction === 'rtl' ? 'marginLeft' : 'marginRight';
         return {
           [marginDir]: sizing.scale300,
           width: 'auto',
@@ -40,7 +39,7 @@ export default function CountryPicker(props: CountrySelectPropsT) {
       },
     },
     ControlContainer: {
-      style: ({$theme: {direction, sizing}, ...props}) => {
+      style: ({ $theme: { direction, sizing }, ...props }) => {
         const sizeToLeftPadding = {
           [SIZE.mini]: '0',
           [SIZE.compact]: sizing.scale0,
@@ -53,10 +52,8 @@ export default function CountryPicker(props: CountrySelectPropsT) {
           [SIZE.default]: sizing.scale600,
           [SIZE.large]: sizing.scale700,
         };
-        const padStartDir: string =
-          direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
-        const padEndDir: string =
-          direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
+        const padStartDir: string = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
+        const padEndDir: string = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
         const styleOverride = {
           [padStartDir]: sizeToLeftPadding[props.$size || SIZE.default],
           [padEndDir]: sizeToRightPadding[props.$size || SIZE.default],
@@ -76,39 +73,31 @@ export default function CountryPicker(props: CountrySelectPropsT) {
     },
   };
 
-  const [Select, selectProps] = getOverrides(
-    overrides.CountrySelect,
-    DefaultSelect,
-  );
+  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect);
   const selectOverrides = mergeOverrides(baseSelectOverrides, {
     Dropdown: overrides.CountrySelectDropdown || {},
     DropdownListItem: overrides.CountrySelectDropdownListItem || {},
   });
-  selectProps.overrides = mergeOverrides(
-    selectOverrides,
-    selectProps.overrides,
-  );
+  selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
 
   const baseOverrides = {
     FlagContainer: {
-      style: ({$theme: {direction, sizing}, ...props}) => {
+      style: ({ $theme: { direction, sizing }, ...props }) => {
         const sizeToMargin = {
           [SIZE.mini]: sizing.scale200,
           [SIZE.compact]: sizing.scale300,
           [SIZE.default]: sizing.scale400,
           [SIZE.large]: sizing.scale500,
         };
-        const marginDir: string =
-          direction === 'rtl' ? 'marginLeft' : 'marginRight';
+        const marginDir: string = direction === 'rtl' ? 'marginLeft' : 'marginRight';
         return {
           [marginDir]: sizeToMargin[props.$size || SIZE.default],
         };
       },
     },
     DialCode: {
-      style: ({$theme: {direction, sizing}}) => {
-        const marginDir: string =
-          direction === 'rtl' ? 'marginRight' : 'marginLeft';
+      style: ({ $theme: { direction, sizing } }) => {
+        const marginDir: string = direction === 'rtl' ? 'marginRight' : 'marginLeft';
         return {
           [marginDir]: sizing.scale600,
         };

package/phone-input/country-select-dropdown.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import {List, AutoSizer} from 'react-virtualized';
+import { List, AutoSizer } from 'react-virtualized';
 import defaultProps from './default-props.js';
 import {
   StyledFlagContainer,
@@ -17,13 +17,13 @@ import {
   StyledCountrySelectDropdownNameColumn as DefaultNameColumn,
   StyledCountrySelectDropdownDialcodeColumn as DefaultDialcodeColumn,
 } from './styled-components.js';
-import {LocaleContext} from '../locale/index.js';
-import {StyledEmptyState} from '../menu/styled-components.js';
-import {getOverrides} from '../helpers/overrides.js';
-import {iso2FlagEmoji} from './utils.js';
+import { LocaleContext } from '../locale/index.js';
+import { StyledEmptyState } from '../menu/styled-components.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { iso2FlagEmoji } from './utils.js';
 
-import type {CountrySelectDropdownPropsT, ReactRefT} from './types.js';
-import type {LocaleT} from '../locale/types.js';
+import type { CountrySelectDropdownPropsT, ReactRefT } from './types.js';
+import type { LocaleT } from '../locale/types.js';
 
 CountrySelectDropdown.defaultProps = {
   maxDropdownHeight: defaultProps.maxDropdownHeight,
@@ -33,7 +33,7 @@ CountrySelectDropdown.defaultProps = {
 function CountrySelectDropdown(
   props: CountrySelectDropdownPropsT & {
     $forwardedRef: ReactRefT<HTMLElement> | ((null | HTMLElement) => mixed),
-  },
+  }
 ) {
   const {
     $country: country,
@@ -46,41 +46,36 @@ function CountrySelectDropdown(
 
   const [Container, containerProps] = getOverrides(
     overrides.CountrySelectDropdown,
-    DefaultContainer,
+    DefaultContainer
   );
   const [ListItem, listItemProps] = getOverrides(
     overrides.CountrySelectDropdownListItem,
-    DefaultListItem,
+    DefaultListItem
   );
   const [FlagColumn, flagColumnProps] = getOverrides(
     overrides.CountrySelectDropdownFlagColumn,
-    DefaultFlagColumn,
+    DefaultFlagColumn
   );
   const [FlagContainer, flagContainerProps] = getOverrides(
     overrides.FlagContainer,
-    StyledFlagContainer,
+    StyledFlagContainer
   );
   const [NameColumn, nameColumnProps] = getOverrides(
     overrides.CountrySelectDropdownNameColumn,
-    DefaultNameColumn,
+    DefaultNameColumn
   );
   const [Dialcode, dialcodeProps] = getOverrides(
     overrides.CountrySelectDropdownDialcodeColumn,
-    DefaultDialcodeColumn,
-  );
-  const [EmptyState, emptyStateProps] = getOverrides(
-    overrides.EmptyState,
-    StyledEmptyState,
+    DefaultDialcodeColumn
   );
+  const [EmptyState, emptyStateProps] = getOverrides(overrides.EmptyState, StyledEmptyState);
 
   // Handle no results, likely from filtering
   if (!props.children.length) {
     return (
       <LocaleContext.Consumer>
         {(locale: LocaleT) => (
-          <EmptyState {...emptyStateProps}>
-            {noResultsMsg || locale.menu.noResultsMsg}
-          </EmptyState>
+          <EmptyState {...emptyStateProps}>{noResultsMsg || locale.menu.noResultsMsg}</EmptyState>
         )}
       </LocaleContext.Consumer>
     );
@@ -89,16 +84,12 @@ function CountrySelectDropdown(
   const children = React.Children.toArray(props.children);
   const scrollIndex = Math.min(
     children.findIndex((opt) => opt.props.item.id === country.id) + 5,
-    children.length - 1,
+    children.length - 1
   );
   return (
-    <Container
-      ref={forwardedRef}
-      $height={maxDropdownHeight}
-      {...containerProps}
-    >
+    <Container ref={forwardedRef} $height={maxDropdownHeight} {...containerProps}>
       <AutoSizer>
-        {({height, width}) => {
+        {({ height, width }) => {
           return (
             <List
               role="listbox"
@@ -107,11 +98,10 @@ function CountrySelectDropdown(
               rowCount={children.length}
               rowHeight={42}
               scrollToIndex={scrollIndex}
-              rowRenderer={({index, key, style}) => {
+              rowRenderer={({ index, key, style }) => {
                 // resetMenu and getItemLabel should not end up on native html elements
-                const {item, resetMenu, getItemLabel, ...rest} =
-                  children[index].props;
-                const {id: iso, label, dialCode} = item;
+                const { item, resetMenu, getItemLabel, ...rest } = children[index].props;
+                const { id: iso, label, dialCode } = item;
                 return (
                   <ListItem
                     key={key}
@@ -122,11 +112,7 @@ function CountrySelectDropdown(
                     data-iso={iso}
                   >
                     <FlagColumn {...flagColumnProps}>
-                      <FlagContainer
-                        $iso={iso}
-                        data-iso={iso}
-                        {...flagContainerProps}
-                      >
+                      <FlagContainer $iso={iso} data-iso={iso} {...flagContainerProps}>
                         {iso2FlagEmoji(iso)}
                       </FlagContainer>
                     </FlagColumn>
@@ -145,10 +131,9 @@ function CountrySelectDropdown(
   );
 }
 
-const CountrySelectDropdownFwd = React.forwardRef<
-  CountrySelectDropdownPropsT,
-  HTMLElement,
->((props, ref) => <CountrySelectDropdown {...props} $forwardedRef={ref} />);
+const CountrySelectDropdownFwd = React.forwardRef<CountrySelectDropdownPropsT, HTMLElement>(
+  (props, ref) => <CountrySelectDropdown {...props} $forwardedRef={ref} />
+);
 CountrySelectDropdownFwd.displayName = 'CountrySelectDropdownFwd';
 export default CountrySelectDropdownFwd;
 

package/phone-input/country-select.js.flow

@@ -12,20 +12,17 @@ LICENSE file in the root directory of this source tree.
 // The `DialCode` rendering should be a part of the composed
 // non-split phone input.
 import React from 'react';
-import {
-  StyledDialCode,
-  StyledCountrySelectContainer,
-} from './styled-components.js';
+import { StyledDialCode, StyledCountrySelectContainer } from './styled-components.js';
 import BaseCountryPicker from './base-country-picker.js';
-import {SingleSelect as DefaultSelect} from '../select/index.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { SingleSelect as DefaultSelect } from '../select/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import defaultProps from './default-props.js';
 
-import type {CountrySelectPropsT} from './types.js';
+import type { CountrySelectPropsT } from './types.js';
 
 CountrySelect.defaultProps = {
   disabled: defaultProps.disabled,
-  inputRef: {current: null},
+  inputRef: { current: null },
   maxDropdownHeight: defaultProps.maxDropdownHeight,
   maxDropdownWidth: defaultProps.maxDropdownWidth,
   overrides: {},
@@ -36,7 +33,7 @@ CountrySelect.defaultProps = {
 };
 
 export default function CountrySelect(props: CountrySelectPropsT) {
-  const {country, disabled, error, overrides, positive, required, size} = props;
+  const { country, disabled, error, overrides, positive, required, size } = props;
   const sharedProps = {
     $disabled: disabled,
     $error: error,
@@ -60,28 +57,19 @@ export default function CountrySelect(props: CountrySelectPropsT) {
     },
   };
 
-  const [Select, selectProps] = getOverrides(
-    overrides.CountrySelect,
-    DefaultSelect,
-  );
+  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect);
   const selectOverrides = mergeOverrides(baseSelectOverrides, {
     Dropdown: overrides.CountrySelectDropdown || {},
     DropdownListItem: overrides.CountrySelectDropdownListItem || {},
   });
-  selectProps.overrides = mergeOverrides(
-    selectOverrides,
-    selectProps.overrides,
-  );
+  selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
 
   const [CountrySelectContainer, countrySelectContainerProps] = getOverrides(
     overrides.CountrySelectContainer,
-    StyledCountrySelectContainer,
+    StyledCountrySelectContainer
   );
 
-  const [DialCode, dialCodeProps] = getOverrides(
-    overrides.DialCode,
-    StyledDialCode,
-  );
+  const [DialCode, dialCodeProps] = getOverrides(overrides.DialCode, StyledDialCode);
 
   return (
     <CountrySelectContainer {...countrySelectContainerProps}>

package/phone-input/default-props.js.flow

@@ -5,11 +5,7 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {
-  SIZE,
-  DEFAULT_MAX_DROPDOWN_HEIGHT,
-  DEFAULT_MAX_DROPDOWN_WIDTH,
-} from './constants.js';
+import { SIZE, DEFAULT_MAX_DROPDOWN_HEIGHT, DEFAULT_MAX_DROPDOWN_WIDTH } from './constants.js';
 
 const defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
@@ -17,7 +13,7 @@ const defaultProps = {
   'aria-labelledby': null,
   clearable: false,
   focusLock: false,
-  country: {label: 'United States', id: 'US', dialCode: '+1'},
+  country: { label: 'United States', id: 'US', dialCode: '+1' },
   disabled: false,
   error: false,
   id: null,

package/phone-input/flag.js.flow

@@ -9,9 +9,9 @@ LICENSE file in the root directory of this source tree.
 import React from 'react';
 
 import * as flags from './flags/index.js';
-import {styled} from '../styles/index.js';
-import {SIZE} from './constants.js';
-import type {CountryIsoT, SizeT} from './types.js';
+import { styled } from '../styles/index.js';
+import { SIZE } from './constants.js';
+import type { CountryIsoT, SizeT } from './types.js';
 
 type SizeStyleProps = {
   $size?: SizeT,
@@ -23,7 +23,7 @@ export default function Flag(props: {
   iso?: CountryIsoT,
   width?: string,
 }) {
-  const {$iso, iso: oldIsoProp, width = '16px', ...restProps} = props;
+  const { $iso, iso: oldIsoProp, width = '16px', ...restProps } = props;
   const iso: CountryIsoT = oldIsoProp || $iso;
   const FlagComponent = flags[`Flag${iso.toUpperCase()}`];
   //$FlowExpectedError[cannot-spread-inexact]
@@ -32,7 +32,7 @@ export default function Flag(props: {
 
 export const StyledFlag = styled<typeof Flag, SizeStyleProps>(
   Flag,
-  ({$size = SIZE.default, $theme: {sizing}}) => {
+  ({ $size = SIZE.default, $theme: { sizing } }) => {
     const sizeToWidth = {
       [SIZE.mini]: sizing.scale700,
       [SIZE.compact]: sizing.scale800,
@@ -42,7 +42,7 @@ export const StyledFlag = styled<typeof Flag, SizeStyleProps>(
     return {
       width: sizeToWidth[$size],
     };
-  },
+  }
 );
 
 declare var __DEV__: boolean;