baseui 10.10.0 → 10.11.0

package/payment-card/payment-card.js

@@ -181,27 +181,31 @@ var PaymentCard = /*#__PURE__*/function (_React$Component) {
       };
 
       return /*#__PURE__*/React.createElement(_themeProvider.ThemeContext.Consumer, null, function (theme) {
-        return /*#__PURE__*/React.createElement(_index.Input, _extends({
-          size: size,
-          "aria-label": ariaLabel,
-          "data-baseweb": "payment-card-input",
-          inputMode: "numeric",
-          overrides: Object.freeze(_objectSpread(_objectSpread({}, restOverrides), {}, {
-            Before: getBeforeComponent(theme)
-          })),
-          onChange: function onChange(e) {
-            var _getCaretPosition = (0, _utils.getCaretPosition)(e.target.value, _this2.props.value ? String(_this2.props.value) : '', e.target.selectionStart),
-                _getCaretPosition2 = _slicedToArray(_getCaretPosition, 2),
-                position = _getCaretPosition2[0],
-                value = _getCaretPosition2[1];
-
-            _this2.caretPosition = position;
-            _this2.inRef = e.target;
-            e.target.value = value;
-            _onChange && _onChange(e);
-          },
-          value: (0, _utils.addGaps)(gaps, String(value) || '')
-        }, restProps));
+        return (
+          /*#__PURE__*/
+          //$FlowExpectedError[cannot-spread-inexact]
+          React.createElement(_index.Input, _extends({
+            size: size,
+            "aria-label": ariaLabel,
+            "data-baseweb": "payment-card-input",
+            inputMode: "numeric",
+            overrides: Object.freeze(_objectSpread(_objectSpread({}, restOverrides), {}, {
+              Before: getBeforeComponent(theme)
+            })),
+            onChange: function onChange(e) {
+              var _getCaretPosition = (0, _utils.getCaretPosition)(e.target.value, _this2.props.value ? String(_this2.props.value) : '', e.target.selectionStart),
+                  _getCaretPosition2 = _slicedToArray(_getCaretPosition, 2),
+                  position = _getCaretPosition2[0],
+                  value = _getCaretPosition2[1];
+
+              _this2.caretPosition = position;
+              _this2.inRef = e.target;
+              e.target.value = value;
+              _onChange && _onChange(e);
+            },
+            value: (0, _utils.addGaps)(gaps, String(value) || '')
+          }, restProps))
+        );
       });
     }
   }]);

package/payment-card/payment-card.js.flow

@@ -8,11 +8,11 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import * as valid from 'card-validator';
 
-import {addGaps, getCaretPosition} from './utils.js';
+import { addGaps, getCaretPosition } from './utils.js';
 
-import {getOverrides} from '../helpers/overrides.js';
-import {Input, SIZE} from '../input/index.js';
-import {ThemeContext} from '../styles/theme-provider.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { Input, SIZE } from '../input/index.js';
+import { ThemeContext } from '../styles/theme-provider.js';
 
 import AmexIcon from './icons/amex.js';
 import DinersClubIcon from './icons/dinersclub.js';
@@ -25,9 +25,9 @@ import MastercardIcon from './icons/mastercard.js';
 import UnionPayIcon from './icons/unionpay.js';
 import VisaIcon from './icons/visa.js';
 
-import {IconWrapper as StyledIconWrapper} from './styled-components.js';
+import { IconWrapper as StyledIconWrapper } from './styled-components.js';
 
-import type {PaymentCardPropsT} from './types.js';
+import type { PaymentCardPropsT } from './types.js';
 
 const CardTypeToComponent = {
   visa: VisaIcon,
@@ -76,11 +76,8 @@ class PaymentCard extends React.Component<PaymentCardPropsT> {
       ...restProps
     } = this.props;
 
-    const {IconWrapper: IconWrapperOverride, ...restOverrides} = overrides;
-    const [IconWrapper, iconWrapperProps] = getOverrides(
-      IconWrapperOverride,
-      StyledIconWrapper,
-    );
+    const { IconWrapper: IconWrapperOverride, ...restOverrides } = overrides;
+    const [IconWrapper, iconWrapperProps] = getOverrides(IconWrapperOverride, StyledIconWrapper);
 
     const validatedValue = valid.number(value);
     let gaps: number[] = [];
@@ -90,7 +87,7 @@ class PaymentCard extends React.Component<PaymentCardPropsT> {
       type = validatedValue.card.type;
     }
 
-    const getBeforeComponent = theme => {
+    const getBeforeComponent = (theme) => {
       const iconSize = {
         [SIZE.mini]: theme.sizing.scale600,
         [SIZE.compact]: theme.sizing.scale800,
@@ -99,19 +96,17 @@ class PaymentCard extends React.Component<PaymentCardPropsT> {
       };
       return () => (
         <IconWrapper $size={size} {...iconWrapperProps}>
-          {React.createElement(
-            CardTypeToComponent[type || 'generic'] || GenericIcon,
-            {
-              size: iconSize[size],
-            },
-          )}
+          {React.createElement(CardTypeToComponent[type || 'generic'] || GenericIcon, {
+            size: iconSize[size],
+          })}
         </IconWrapper>
       );
     };
 
     return (
       <ThemeContext.Consumer>
-        {theme => (
+        {(theme) => (
+          //$FlowExpectedError[cannot-spread-inexact]
           <Input
             size={size}
             aria-label={ariaLabel}
@@ -121,11 +116,11 @@ class PaymentCard extends React.Component<PaymentCardPropsT> {
               ...restOverrides,
               Before: getBeforeComponent(theme),
             })}
-            onChange={e => {
+            onChange={(e) => {
               const [position, value] = getCaretPosition(
                 e.target.value,
                 this.props.value ? String(this.props.value) : '',
-                e.target.selectionStart,
+                e.target.selectionStart
               );
               this.caretPosition = position;
               this.inRef = e.target;

package/payment-card/stateful-payment-card.js.flow

@@ -8,12 +8,13 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulContainer from '../input/stateful-container.js';
 import PaymentCard from './payment-card.js';
-import type {StatefulPaymentCardPropsT} from './types.js';
+import type { StatefulPaymentCardPropsT } from './types.js';
 
 export default function StatefulPaymentCard(props: StatefulPaymentCardPropsT) {
   return (
     <StatefulContainer {...props}>
-      {(childrenProps: *) => <PaymentCard {...childrenProps} />}
+      {/* flowlint-next-line unclear-type:off */}
+      {(childrenProps: any) => <PaymentCard {...childrenProps} />}
     </StatefulContainer>
   );
 }

package/payment-card/styled-components.js.flow

@@ -5,11 +5,11 @@ 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 {SIZE} from '../input/index.js';
+import { styled } from '../styles/index.js';
+import { SIZE, type SizeT } from '../input/index.js';
 
-export const IconWrapper = styled<{$size: typeof SIZE}>('div', props => {
-  const {$size, $theme} = props;
+export const IconWrapper = styled<{ $size: SizeT }>('div', (props) => {
+  const { $size, $theme } = props;
   const margin = {
     [SIZE.mini]: $theme.sizing.scale300,
     [SIZE.compact]: $theme.sizing.scale500,
@@ -17,8 +17,7 @@ export const IconWrapper = styled<{$size: typeof SIZE}>('div', props => {
     [SIZE.large]: $theme.sizing.scale700,
   };
   return {
-    //$FlowFixMe
-    [$theme.direction === 'rtl' ? 'marginRight' : 'marginLeft']: margin[$size],
+    [(($theme.direction === 'rtl' ? 'marginRight' : 'marginLeft'): string)]: margin[$size],
     height: '100%',
     display: 'flex',
     alignItems: 'center',

package/payment-card/types.js.flow

@@ -6,12 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import type {
-  InputComponentsT,
-  InputPropsT,
-  StInputPropsDiffT,
-} from '../input/types.js';
-import type {OverrideT} from '../helpers/overrides.js';
+import type { InputComponentsT, InputPropsT, StInputPropsDiffT } from '../input/types.js';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type PaymentCardComponentsT = {
   ...InputComponentsT,

package/payment-card/utils.js.flow

@@ -10,29 +10,21 @@ import * as valid from 'card-validator';
 
 export const addGaps = (gaps: number[], value: string) =>
   gaps.reduce(
-    (prev, gap, index) =>
-      `${prev.slice(0, gap + index)} ${prev.slice(gap + index)}`.trim(),
-    `${value}`,
+    (prev, gap, index) => `${prev.slice(0, gap + index)} ${prev.slice(gap + index)}`.trim(),
+    `${value}`
   );
 
 export const sanitizeNumber = (input: string) => {
   const number = input.replace(/[^0-9]/gi, '');
   const validatedValue = valid.number(number);
   if (validatedValue.card && Array.isArray(validatedValue.card.lengths)) {
-    return number.slice(
-      0,
-      validatedValue.card.lengths[validatedValue.card.lengths.length - 1],
-    );
+    return number.slice(0, validatedValue.card.lengths[validatedValue.card.lengths.length - 1]);
   }
   // CC number NEVER can have more than 19 digits
   return number.slice(0, 19);
 };
 
-export const getCaretPosition = (
-  value: string,
-  prevValue: string,
-  position: number,
-) => {
+export const getCaretPosition = (value: string, prevValue: string, position: number) => {
   const cleanValue = sanitizeNumber(value);
   const validatedValue = valid.number(cleanValue);
 
@@ -40,10 +32,7 @@ export const getCaretPosition = (
   if (validatedValue.card && Array.isArray(validatedValue.card.gaps)) {
     const gaps = validatedValue.card.gaps;
     const valueWithGaps = addGaps(gaps, cleanValue);
-    if (
-      cleanValue.length > prevValue.length &&
-      valueWithGaps[position - 1] === ' '
-    ) {
+    if (cleanValue.length > prevValue.length && valueWithGaps[position - 1] === ' ') {
       return [position + 1, cleanValue];
     }
   }
@@ -54,8 +43,7 @@ export const getCaretPosition = (
     const gaps = prevValidatedValue.card.gaps;
     const valueWithGaps = addGaps(gaps, prevValue);
     if (prevValue === cleanValue && valueWithGaps.length > value.length) {
-      const newValue =
-        valueWithGaps.slice(0, position - 1) + valueWithGaps.slice(position);
+      const newValue = valueWithGaps.slice(0, position - 1) + valueWithGaps.slice(position);
       return [position - 1, sanitizeNumber(newValue)];
     }
   }

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

@@ -74,6 +74,8 @@ var DropdownListItem = /*#__PURE__*/_react.default.forwardRef(function (props, r
   }, rest), props.children);
 });
 
+DropdownListItem.displayName = 'DropdownListItem';
+
 function DropdownOptionContent(props) {
   return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, props.children);
 }
@@ -188,16 +190,13 @@ function CountryPicker(props) {
   var _getOverrides = (0, _overrides.getOverrides)(overrides.CountrySelect, _index.SingleSelect),
       _getOverrides2 = _slicedToArray(_getOverrides, 2),
       Select = _getOverrides2[0],
-      selectProps = _getOverrides2[1]; // $FlowFixMe
-
+      selectProps = _getOverrides2[1];
 
   var selectOverrides = (0, _overrides.mergeOverrides)(baseSelectOverrides, {
-    Dropdown: overrides.CountrySelectDropdown,
-    DropdownListItem: overrides.CountrySelectDropdownListItem
-  }); // $FlowFixMe
-
-  selectProps.overrides = (0, _overrides.mergeOverrides)(selectOverrides, // $FlowFixMe
-  selectProps.overrides);
+    Dropdown: overrides.CountrySelectDropdown || {},
+    DropdownListItem: overrides.CountrySelectDropdownListItem || {}
+  });
+  selectProps.overrides = (0, _overrides.mergeOverrides)(selectOverrides, selectProps.overrides);
 
   var _getOverrides3 = (0, _overrides.getOverrides)(overrides.CountrySelectDropdownFlagColumn, _styledComponents.StyledCountrySelectDropdownFlagColumn),
       _getOverrides4 = _slicedToArray(_getOverrides3, 2),

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

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import React, {useState} from 'react';
+import React, { useState } from 'react';
 
 import {
   StyledRoot,
@@ -16,17 +16,17 @@ import {
   StyledCountrySelectDropdownNameColumn as DefaultNameColumn,
   StyledCountrySelectDropdownDialcodeColumn as DefaultDialcodeColumn,
 } from './styled-components.js';
-import {SingleSelect as DefaultSelect} from '../select/index.js';
-import {PLACEMENT} from '../popover/index.js';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { SingleSelect as DefaultSelect } from '../select/index.js';
+import { PLACEMENT } from '../popover/index.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import defaultProps from './default-props.js';
-import {iso2FlagEmoji} from './utils.js';
+import { iso2FlagEmoji } from './utils.js';
 
-import type {CountryT, CountrySelectPropsT} from './types.js';
+import type { CountryT, CountrySelectPropsT } from './types.js';
 
 CountryPicker.defaultProps = {
   disabled: defaultProps.disabled,
-  inputRef: {current: null},
+  inputRef: { current: null },
   maxDropdownHeight: defaultProps.maxDropdownHeight,
   maxDropdownWidth: defaultProps.maxDropdownWidth,
   overrides: {},
@@ -37,13 +37,14 @@ CountryPicker.defaultProps = {
 };
 
 const DropdownListItem = React.forwardRef((props, ref) => {
-  const {children, ...rest} = props;
+  const { children, ...rest } = props;
   return (
     <DefaultListItem ref={ref} {...rest}>
       {props.children}
     </DefaultListItem>
   );
 });
+DropdownListItem.displayName = 'DropdownListItem';
 
 function DropdownOptionContent(props) {
   return <>{props.children}</>;
@@ -74,7 +75,7 @@ export default function CountryPicker(props: CountrySelectPropsT) {
   };
   const options = Object.values(props.countries);
   // $FlowFixMe
-  const scrollIndex = options.findIndex(opt => opt.id === country.id);
+  const scrollIndex = options.findIndex((opt) => opt.id === country.id);
   const baseSelectOverrides = {
     Root: {
       component: StyledRoot,
@@ -129,14 +130,10 @@ export default function CountryPicker(props: CountrySelectPropsT) {
         $mapIsoToLabel: mapIsoToLabel,
         $overrides: {
           CountrySelectDropdown: overrides.CountrySelectDropdown,
-          CountrySelectDropdownListItem:
-            overrides.CountrySelectDropdownListItem,
-          CountrySelectDropdownFlagColumn:
-            overrides.CountrySelectDropdownFlagColumn,
-          CountrySelectDropdownNameColumn:
-            overrides.CountrySelectDropdownNameColumn,
-          CountrySelectDropdownDialcodeColumn:
-            overrides.CountrySelectDropdownDialcodeColumn,
+          CountrySelectDropdownListItem: overrides.CountrySelectDropdownListItem,
+          CountrySelectDropdownFlagColumn: overrides.CountrySelectDropdownFlagColumn,
+          CountrySelectDropdownNameColumn: overrides.CountrySelectDropdownNameColumn,
+          CountrySelectDropdownDialcodeColumn: overrides.CountrySelectDropdownDialcodeColumn,
           FlagContainer: overrides.FlagContainer,
         },
       },
@@ -155,44 +152,35 @@ export default function CountryPicker(props: CountrySelectPropsT) {
     },
   };
 
-  const [Select, selectProps] = getOverrides(
-    overrides.CountrySelect,
-    DefaultSelect,
-  );
-  // $FlowFixMe
+  const [Select, selectProps] = getOverrides(overrides.CountrySelect, DefaultSelect);
   const selectOverrides = mergeOverrides(baseSelectOverrides, {
-    Dropdown: overrides.CountrySelectDropdown,
-    DropdownListItem: overrides.CountrySelectDropdownListItem,
+    Dropdown: overrides.CountrySelectDropdown || {},
+    DropdownListItem: overrides.CountrySelectDropdownListItem || {},
   });
-  // $FlowFixMe
-  selectProps.overrides = mergeOverrides(
-    selectOverrides,
-    // $FlowFixMe
-    selectProps.overrides,
-  );
+  selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
 
   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,
+    DefaultDialcodeColumn
   );
 
   return (
     <Select
       clearable={false}
       disabled={disabled}
-      getOptionLabel={({option, optionState}) => {
+      getOptionLabel={({ option, optionState }) => {
         const iso = option.id;
         return (
           <>
@@ -208,29 +196,24 @@ export default function CountryPicker(props: CountrySelectPropsT) {
           </>
         );
       }}
-      getValueLabel={(value: {option: CountryT}) => {
+      getValueLabel={(value: { option: CountryT }) => {
         const iso = value.option.id;
         return (
-          <FlagContainer
-            $iso={iso}
-            data-iso={iso}
-            {...sharedProps}
-            {...flagContainerProps}
-          >
+          <FlagContainer $iso={iso} data-iso={iso} {...sharedProps} {...flagContainerProps}>
             {iso2FlagEmoji(iso)}
           </FlagContainer>
         );
       }}
       error={error}
       maxDropdownHeight={maxDropdownHeight}
-      onChange={event => {
+      onChange={(event) => {
         if (typeof onCountryChange === 'function') {
           onCountryChange(event);
         } else if (__DEV__) {
           console.warn(
             'CountryPicker component is controlled (or stateless) ' +
               'and requires an `onCountryChange` handler to be passed in ' +
-              'that handles the `country` prop value update.',
+              'that handles the `country` prop value update.'
           );
         }
         // After choosing a country, shift focus to the text input