baseui 10.9.1 → 10.11.0

package/pagination/pagination.js.flow

@@ -8,21 +8,17 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import memoize from 'memoize-one';
 // Files
-import {LocaleContext} from '../locale/index.js';
-import {ThemeContext} from '../styles/theme-provider.js';
-import {Select as BaseSelect} from '../select/index.js';
-import {Button, KIND} from '../button/index.js';
-import {
-  StyledRoot,
-  StyledMaxLabel,
-  StyledDropdownContainer,
-} from './styled-components.js';
+import { LocaleContext } from '../locale/index.js';
+import { ThemeContext } from '../styles/theme-provider.js';
+import { Select as BaseSelect } from '../select/index.js';
+import { Button, KIND } from '../button/index.js';
+import { StyledRoot, StyledMaxLabel, StyledDropdownContainer } from './styled-components.js';
 import ChevronLeft from '../icon/chevron-left.js';
 import ChevronRight from '../icon/chevron-right.js';
-import {getOverrides} from '../helpers/overrides.js';
-import type {PaginationPropsT} from './types.js';
-import type {LocaleT} from '../locale/types.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { PaginationPropsT } from './types.js';
+import type { LocaleT } from '../locale/types.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 type PageOptionT = {
   label: number,
@@ -30,89 +26,80 @@ type PageOptionT = {
 
 export default class Pagination extends React.PureComponent<
   PaginationPropsT,
-  {isFocusVisible: boolean},
+  { isFocusVisible: boolean }
 > {
   static defaultProps = {
     labels: {},
     overrides: {},
   };
 
-  state = {isFocusVisible: false};
+  state = { isFocusVisible: false };
   handleFocus = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   };
 
   handleBlur = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
   };
 
   getMenuOptions = memoize((numPages: number) => {
     const menuOptions = [];
     for (let i = 1; i <= numPages; i++) {
-      menuOptions.push({label: i});
+      menuOptions.push({ label: i });
     }
     return menuOptions;
   });
 
-  onMenuItemSelect = (data: {value: $ReadOnlyArray<PageOptionT>}) => {
+  onMenuItemSelect = (data: { value: $ReadOnlyArray<PageOptionT> }) => {
     const item = data.value[0];
-    const {onPageChange, currentPage} = this.props;
+    const { onPageChange, currentPage } = this.props;
     const page = item.label;
     if (page !== currentPage) {
-      onPageChange && onPageChange({nextPage: page, prevPage: currentPage});
+      onPageChange && onPageChange({ nextPage: page, prevPage: currentPage });
     }
   };
 
   onPrevClick = (event: SyntheticEvent<>) => {
-    const {currentPage, onPageChange, onPrevClick} = this.props;
+    const { currentPage, onPageChange, onPrevClick } = this.props;
     if (currentPage > 1) {
-      onPageChange &&
-        onPageChange({nextPage: currentPage - 1, prevPage: currentPage});
-      onPrevClick && onPrevClick({event});
+      onPageChange && onPageChange({ nextPage: currentPage - 1, prevPage: currentPage });
+      onPrevClick && onPrevClick({ event });
     }
   };
 
   onNextClick = (event: SyntheticEvent<>) => {
-    const {currentPage, numPages, onPageChange, onNextClick} = this.props;
+    const { currentPage, numPages, onPageChange, onNextClick } = this.props;
     if (currentPage < numPages) {
-      onPageChange &&
-        onPageChange({nextPage: currentPage + 1, prevPage: currentPage});
-      onNextClick && onNextClick({event});
+      onPageChange && onPageChange({ nextPage: currentPage + 1, prevPage: currentPage });
+      onNextClick && onNextClick({ event });
     }
   };
 
   constructAriaWayfinderLabel = (locale: LocaleT, prefix: string) => {
-    const {currentPage, numPages, labels} = this.props;
+    const { currentPage, numPages, labels } = this.props;
     return (
       prefix +
       ' ' +
       currentPage +
       ' ' +
-      `${
-        labels && labels.preposition
-          ? labels.preposition
-          : locale.pagination.preposition
-      }` +
+      `${labels && labels.preposition ? labels.preposition : locale.pagination.preposition}` +
       ' ' +
       numPages
     );
   };
 
   render() {
-    const {overrides = {}, currentPage, labels, numPages, size} = this.props;
+    const { overrides = {}, currentPage, labels, numPages, size } = this.props;
 
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
-    const [MaxLabel, maxLabelProps] = getOverrides(
-      overrides.MaxLabel,
-      StyledMaxLabel,
-    );
+    const [MaxLabel, maxLabelProps] = getOverrides(overrides.MaxLabel, StyledMaxLabel);
     const [DropdownContainer, dropdownContainerProps] = getOverrides(
       overrides.DropdownContainer,
-      StyledDropdownContainer,
+      StyledDropdownContainer
     );
     const [Select, selectProps] = getOverrides(overrides.Select, BaseSelect);
 
@@ -120,14 +107,14 @@ export default class Pagination extends React.PureComponent<
 
     return (
       <ThemeContext.Consumer>
-        {theme => (
+        {(theme) => (
           <LocaleContext.Consumer>
-            {locale => (
+            {(locale) => (
               <Root data-baseweb="pagination" {...rootProps}>
                 <Button
                   aria-label={this.constructAriaWayfinderLabel(
                     locale,
-                    'previous page. current page',
+                    'previous page. current page'
                   )}
                   disabled={currentPage <= 1}
                   onClick={this.onPrevClick}
@@ -144,9 +131,7 @@ export default class Pagination extends React.PureComponent<
                   }}
                   size={size}
                 >
-                  {labels && labels.prevButton
-                    ? labels.prevButton
-                    : locale.pagination.prev}
+                  {labels && labels.prevButton ? labels.prevButton : locale.pagination.prev}
                 </Button>
                 <DropdownContainer
                   $isFocusVisible={this.state.isFocusVisible}
@@ -155,22 +140,19 @@ export default class Pagination extends React.PureComponent<
                   onBlur={forkBlur(dropdownContainerProps, this.handleBlur)}
                 >
                   <Select
-                    aria-label={this.constructAriaWayfinderLabel(
-                      locale,
-                      'page',
-                    )}
+                    aria-label={this.constructAriaWayfinderLabel(locale, 'page')}
                     options={options}
                     labelKey="label"
                     valueKey="label"
                     onChange={this.onMenuItemSelect}
                     searchable={false}
                     clearable={false}
-                    value={[{label: currentPage}]}
+                    value={[{ label: currentPage }]}
                     maxDropdownHeight="200px"
                     size={size}
                     overrides={{
                       ControlContainer: {
-                        style: ({$theme, $disabled, $isOpen, $error}) => ({
+                        style: ({ $theme, $disabled, $isOpen, $error }) => ({
                           borderLeftColor: 'transparent',
                           borderRightColor: 'transparent',
                           borderTopColor: 'transparent',
@@ -199,7 +181,7 @@ export default class Pagination extends React.PureComponent<
                         },
                       },
                       SingleValue: {
-                        style: ({$theme}) => ({
+                        style: ({ $theme }) => ({
                           position: 'relative',
                           paddingTop: '0',
                           paddingBottom: '0',
@@ -211,7 +193,7 @@ export default class Pagination extends React.PureComponent<
                         }),
                       },
                       SelectArrow: {
-                        style: ({$theme}) => ({
+                        style: ({ $theme }) => ({
                           width: '24px',
                           height: '24px',
                           color: $theme.colors.buttonTertiaryText,
@@ -229,10 +211,7 @@ export default class Pagination extends React.PureComponent<
                   } ${numPages}`}
                 </MaxLabel>
                 <Button
-                  aria-label={this.constructAriaWayfinderLabel(
-                    locale,
-                    'next page. current page',
-                  )}
+                  aria-label={this.constructAriaWayfinderLabel(locale, 'next page. current page')}
                   disabled={currentPage >= numPages}
                   onClick={this.onNextClick}
                   endEnhancer={() => {
@@ -248,9 +227,7 @@ export default class Pagination extends React.PureComponent<
                   }}
                   size={size}
                 >
-                  {labels && labels.nextButton
-                    ? labels.nextButton
-                    : locale.pagination.next}
+                  {labels && labels.nextButton ? labels.nextButton : locale.pagination.next}
                 </Button>
               </Root>
             )}

package/pagination/stateful-container.js

@@ -115,6 +115,7 @@ exports.default = PaginationStatefulContainer;
 
 _defineProperty(PaginationStatefulContainer, "defaultProps", {
   initialState: initialState,
+  //flowlint-next-line unclear-type:off
   stateReducer: function stateReducer(changeType, changes) {
     return changes;
   }

package/pagination/stateful-container.js.flow

@@ -7,13 +7,10 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 // Files
-import {STATE_CHANGE_TYPE} from './constants.js';
-import {clamp} from './utils.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
+import { clamp } from './utils.js';
 // Types
-import type {
-  StatefulContainerPropsT,
-  StatefulContainerStateT,
-} from './types.js';
+import type { StatefulContainerPropsT, StatefulContainerStateT } from './types.js';
 
 const initialState = {
   currentPage: 1,
@@ -21,21 +18,18 @@ const initialState = {
 
 export default class PaginationStatefulContainer extends React.Component<
   StatefulContainerPropsT,
-  StatefulContainerStateT,
+  StatefulContainerStateT
 > {
   static defaultProps = {
-    initialState,
-    stateReducer: (changeType: *, changes: *) => changes,
+    initialState, //flowlint-next-line unclear-type:off
+    stateReducer: (changeType: any, changes: any) => changes,
   };
 
   state = this.props.initialState || initialState;
 
   // Internal set state function that will also invoke stateReducer
-  internalSetState(
-    changeType: $Keys<typeof STATE_CHANGE_TYPE>,
-    changes: StatefulContainerStateT,
-  ) {
-    const {stateReducer} = this.props;
+  internalSetState(changeType: $Keys<typeof STATE_CHANGE_TYPE>, changes: StatefulContainerStateT) {
+    const { stateReducer } = this.props;
     if (stateReducer) {
       this.setState(stateReducer(changeType, changes, this.state));
     } else {
@@ -43,14 +37,12 @@ export default class PaginationStatefulContainer extends React.Component<
     }
   }
 
-  onPageChange: $PropertyType<StatefulContainerPropsT, 'onPageChange'> = ({
-    nextPage,
-  }) => {
-    const {numPages, onPageChange} = this.props;
-    const {currentPage} = this.state;
+  onPageChange: $PropertyType<StatefulContainerPropsT, 'onPageChange'> = ({ nextPage }) => {
+    const { numPages, onPageChange } = this.props;
+    const { currentPage } = this.state;
     const clamped = clamp(nextPage, 1, numPages);
     if (clamped !== currentPage) {
-      onPageChange && onPageChange({nextPage: clamped, prevPage: currentPage});
+      onPageChange && onPageChange({ nextPage: clamped, prevPage: currentPage });
       this.internalSetState(STATE_CHANGE_TYPE.changePage, {
         currentPage: clamped,
       });
@@ -58,8 +50,8 @@ export default class PaginationStatefulContainer extends React.Component<
   };
 
   render() {
-    const {currentPage} = this.state;
-    const {children} = this.props;
+    const { currentPage } = this.state;
+    const { children } = this.props;
     return children({
       currentPage,
       onPageChange: this.onPageChange,

package/pagination/stateful-pagination.js

@@ -48,6 +48,7 @@ StatefulPagination.defaultProps = {
   initialState: {
     currentPage: 1
   },
+  //flowlint-next-line unclear-type:off
   stateReducer: function stateReducer(changeType, changes) {
     return changes;
   },

package/pagination/stateful-pagination.js.flow

@@ -9,7 +9,7 @@ import * as React from 'react';
 
 import Pagination from './pagination.js';
 import StatefulContainer from './stateful-container.js';
-import type {StatefulPaginationPropsT} from './types.js';
+import type { StatefulPaginationPropsT } from './types.js';
 
 export default function StatefulPagination({
   numPages,
@@ -25,9 +25,7 @@ export default function StatefulPagination({
       stateReducer={stateReducer}
       onPageChange={onPageChange}
     >
-      {renderProps => (
-        <Pagination numPages={numPages} {...renderProps} {...props} />
-      )}
+      {(renderProps) => <Pagination numPages={numPages} {...renderProps} {...props} />}
     </StatefulContainer>
   );
 }
@@ -35,8 +33,8 @@ export default function StatefulPagination({
 StatefulPagination.defaultProps = {
   initialState: {
     currentPage: 1,
-  },
-  stateReducer: (changeType: *, changes: *) => changes,
+  }, //flowlint-next-line unclear-type:off
+  stateReducer: (changeType: any, changes: any) => changes,
   overrides: {},
 };
 

package/pagination/styled-components.js.flow

@@ -5,33 +5,29 @@ 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 { styled } from '../styles/index.js';
 
-export const StyledRoot = styled<{}>('div', ({$theme}) => ({
+export const StyledRoot = styled<{}>('div', ({ $theme }) => ({
   display: 'flex',
   alignItems: 'center',
   color: $theme.colors.backgroundInversePrimary,
   ...$theme.typography.font350,
 }));
 
-export const StyledMaxLabel = styled<{}>('span', ({$theme}) => {
-  const marginStartDir: string =
-    $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
-  const marginEndDir: string =
-    $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
+export const StyledMaxLabel = styled<{}>('span', ({ $theme }) => {
+  const marginStartDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+  const marginEndDir: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
   return {
     [marginStartDir]: $theme.sizing.scale300,
     [marginEndDir]: $theme.sizing.scale600,
   };
 });
 
-export const StyledDropdownContainer = styled<{$isFocusVisible: boolean}>(
+export const StyledDropdownContainer = styled<{ $isFocusVisible: boolean }>(
   'div',
-  ({$theme, $isFocusVisible}) => {
-    const marginStartDir: string =
-      $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
-    const marginEndDir: string =
-      $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
+  ({ $theme, $isFocusVisible }) => {
+    const marginStartDir: string = $theme.direction === 'rtl' ? 'marginRight' : 'marginLeft';
+    const marginEndDir: string = $theme.direction === 'rtl' ? 'marginLeft' : 'marginRight';
 
     return {
       position: 'relative',
@@ -39,7 +35,7 @@ export const StyledDropdownContainer = styled<{$isFocusVisible: boolean}>(
       [marginStartDir]: $theme.sizing.scale600,
       [marginEndDir]: $theme.sizing.scale300,
     };
-  },
+  }
 );
 
 declare var __DEV__: boolean;

package/pagination/types.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
-import type {OverrideT} from '../helpers/overrides.js';
-import {STATE_CHANGE_TYPE} from './constants.js';
-import {SIZE} from '../input/constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
+import { SIZE } from '../input/constants.js';
 
 export type LabelsT = {
   prevButton?: string,
@@ -19,17 +19,20 @@ export type SizeT = $Keys<typeof SIZE>;
 
 export type CallbacksT = {
   /** Callback for prev button click. */
-  onPrevClick?: ({event: *}) => *,
+  //flowlint-next-line unclear-type:off
+  onPrevClick?: ({ event: any }) => any,
   /** Callback for next button click. */
-  onNextClick?: ({event: *}) => *,
+  //flowlint-next-line unclear-type:off
+  onNextClick?: ({ event: any }) => any,
   /** Callback for when page changes. */
-  onPageChange?: ({nextPage: number, prevPage: number}) => *,
+  //flowlint-next-line unclear-type:off
+  onPageChange?: ({ nextPage: number, prevPage: number }) => any,
 };
 
 export type StateReducerFnT = (
   changeType: $Keys<typeof STATE_CHANGE_TYPE>,
   changes: StatefulContainerStateT,
-  currentState: StatefulContainerStateT,
+  currentState: StatefulContainerStateT
 ) => StatefulContainerStateT;
 
 export type OverridesT = {
@@ -65,7 +68,8 @@ export type StatefulPaginationPropsT = CallbacksT & {
 };
 
 export type StatefulContainerPropsT = {
-  children: *,
+  //flowlint-next-line unclear-type:off
+  children: any,
   numPages: number,
   /** Reducer function to manipulate internal state updates. */
   stateReducer?: StateReducerFnT,

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const Amex = ({size}: {size: string}) => (
+const Amex = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}
@@ -26,10 +26,7 @@ const Amex = ({size}: {size: string}) => (
         d="M11.9926 11.6554H10.5081L12.6995 6.70691H14.4315L16.6053 11.5847V6.70691H18.7084L19.8218 9.76435L20.9175 6.70691H23.0029V11.6554H21.6598V8.24446L20.3873 11.6554H19.1855L17.9484 8.24446V11.6554H15.103L14.6612 10.6833H12.3991L11.9926 11.6554Z"
         fill="#1071CC"
       />
-      <path
-        d="M14.2018 9.55227L13.5302 7.97937L12.8586 9.55227H14.2018Z"
-        fill="#fff"
-      />
+      <path d="M14.2018 9.55227L13.5302 7.97937L12.8586 9.55227H14.2018Z" fill="#fff" />
       <path
         d="M12.3992 17.3108V12.3623H18.3903L19.8042 13.9529L21.2534 12.3623H23.003L20.6702 14.8365L23.003 17.3108H21.2357L19.7688 15.7379L18.3373 17.3108H12.3992Z"
         fill="#1071CC"

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const DinersClub = ({size}: {size: string}) => (
+const DinersClub = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const Discover = ({size}: {size: string}) => (
+const Discover = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const Elo = ({size}: {size: string}) => (
+const Elo = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const Generic = ({size}: {size: string}) => (
+const Generic = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const Jcb = ({size}: {size: string}) => (
+const Jcb = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}
@@ -16,18 +16,9 @@ const Jcb = ({size}: {size: string}) => (
     fill="none"
     xmlns="http://www.w3.org/2000/svg"
   >
-    <path
-      d="M13 4H15V16C15 18.21 13.21 20 11 20H9V8C9 5.79 10.79 4 13 4Z"
-      fill="#BF2240"
-    />
-    <path
-      d="M8 4V16C8 18.21 6.21 20 4 20H1V8C1 5.79 2.79 4 5 4H8Z"
-      fill="#1061A7"
-    />
-    <path
-      d="M23 4V16C23 18.21 21.21 20 19 20H16V8C16 5.79 17.79 4 20 4H23Z"
-      fill="#43A946"
-    />
+    <path d="M13 4H15V16C15 18.21 13.21 20 11 20H9V8C9 5.79 10.79 4 13 4Z" fill="#BF2240" />
+    <path d="M8 4V16C8 18.21 6.21 20 4 20H1V8C1 5.79 2.79 4 5 4H8Z" fill="#1061A7" />
+    <path d="M23 4V16C23 18.21 21.21 20 19 20H16V8C16 5.79 17.79 4 20 4H23Z" fill="#43A946" />
     <path
       d="M1 12.47C1.22 12.61 2.3 12.96 2.74 12.99C3.69 13.06 4.28 12.74 4.37 11.95V9.01001H6.47V11.89C6.36 13.54 4.91 13.87 2.71 13.76C2.14 13.73 1.37 13.58 1 13.49V12.47Z"
       fill="white"

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const Maestro = ({size}: {size: string}) => (
+const Maestro = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const Mastercard = ({size}: {size: string}) => (
+const Mastercard = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const UnionPay = ({size}: {size: string}) => (
+const UnionPay = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}

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

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-const Visa = ({size}: {size: string}) => (
+const Visa = ({ size }: { size: string }) => (
   <svg
     width={size}
     height={size}

package/payment-card/index.js.flow

@@ -5,13 +5,13 @@ 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 StatefulPaymentCard} from './stateful-payment-card.js';
-export {default as StatefulContainer} from '../input/stateful-container.js';
-export {default as PaymentCard} from './payment-card.js';
-export {default as valid} from 'card-validator';
-export {SIZE} from '../input/index.js';
+export { default as StatefulPaymentCard } from './stateful-payment-card.js';
+export { default as StatefulContainer } from '../input/stateful-container.js';
+export { default as PaymentCard } from './payment-card.js';
+export { default as valid } from 'card-validator';
+export { SIZE } from '../input/index.js';
 // Styled elements
-export {IconWrapper as StyledIconWrapper} from './styled-components.js';
+export { IconWrapper as StyledIconWrapper } from './styled-components.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;