baseui 12.2.0 → 13.0.0

package/es/modal/styled-components.js

@@ -10,12 +10,14 @@ import { SIZE, SIZE_WIDTHS } from './constants';
 function getSizeStyles($size) {
   const styles = {
     maxWidth: '100%',
+    // @ts-ignore
     width: null
   };
 
   if (typeof $size === 'number') {
-    styles.width = `${$size}px`;
+    styles.width = `${$size}px`; // @ts-ignore
   } else if (SIZE[$size]) {
+    // @ts-ignore
     styles.width = SIZE_WIDTHS[$size];
   } else if (typeof $size === 'string') {
     styles.width = $size;
@@ -200,4 +202,9 @@ export const ModalFooter = styled('div', ({
   textAlign: $theme.direction === 'rtl' ? 'left' : 'right'
 }));
 ModalFooter.displayName = "ModalFooter";
-ModalFooter.displayName = 'ModalFooter';
+ModalFooter.displayName = 'ModalFooter';
+export const Hidden = styled('div', {
+  display: 'none'
+});
+Hidden.displayName = "Hidden";
+Hidden.displayName = 'Hidden';

package/es/page-control/constants.js

@@ -0,0 +1,17 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export const SIZE = Object.freeze({
+  large: 'large',
+  medium: 'medium',
+  small: 'small'
+});
+export const KIND = Object.freeze({
+  default: 'default',
+  backgroundProtection: 'backgroundProtection',
+  inverse: 'inverse',
+  alwaysLight: 'alwaysLight',
+  alwaysDark: 'alwaysDark'
+});

package/es/page-control/index.js

@@ -0,0 +1,9 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+export { default as PageControl } from './page-control';
+export * from './styled-components';
+export { KIND } from './constants';
+export * from './types';

package/es/page-control/page-control.js

@@ -0,0 +1,114 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import * as React from 'react';
+import { getOverrides } from '../helpers/overrides';
+import { StyledRoot, StyledDot } from './styled-components';
+import { SIZE, KIND } from './constants';
+const MAX_DOTS = 5;
+
+const PageControl = ({
+  currentPage,
+  numPages,
+  onPageChange,
+  kind = KIND.default,
+  disabled = false,
+  'aria-label': ariaLabel,
+  overrides = {}
+}) => {
+  const [Root, RootProps] = getOverrides(overrides.Root, StyledRoot);
+  const [Dot, DotProps] = getOverrides(overrides.Dot, StyledDot);
+  const isOverflow = numPages > MAX_DOTS;
+
+  function isActive(page) {
+    return page === currentPage;
+  }
+
+  function isVisible(page) {
+    if (!isOverflow) return true; // if current page is one of first three pages, first five page dots are visible
+
+    if (currentPage <= 3) {
+      return page <= 5;
+    } // if current page is one of last three pages, last five page dots are visible
+
+
+    if (numPages - currentPage < 3) {
+      return page > numPages - 5;
+    } // otherwise, page must be within 2 of the current page for dot to be visible
+
+
+    return page >= currentPage - 2 && page <= currentPage + 2;
+  }
+
+  function getSize(page) {
+    if (!isOverflow) return SIZE.large;
+
+    if (currentPage <= 3) {
+      if (page <= 3) {
+        return SIZE.large;
+      }
+
+      if (page === 4) {
+        return SIZE.medium;
+      }
+
+      return SIZE.small;
+    }
+
+    if (numPages - currentPage < 3) {
+      if (page > numPages - 3) {
+        return SIZE.large;
+      }
+
+      if (page === numPages - 3) {
+        return SIZE.medium;
+      }
+
+      return SIZE.small;
+    }
+
+    if (page >= currentPage - 1 && page <= currentPage + 1) {
+      return SIZE.large;
+    }
+
+    if (page === currentPage - 2 || page === currentPage + 2) {
+      return SIZE.medium;
+    }
+
+    return SIZE.small;
+  }
+
+  const name = React.useId();
+  return /*#__PURE__*/React.createElement(Root, _extends({
+    $kind: kind,
+    role: "radiogroup",
+    "aria-label": ariaLabel || 'page control'
+  }, RootProps), Array.from({
+    length: numPages
+  }, (_, i) => {
+    const page = i + 1;
+    return /*#__PURE__*/React.createElement(Dot, _extends({
+      $active: isActive(page),
+      $kind: kind,
+      $disabled: disabled,
+      $isVisible: isVisible(page),
+      $size: getSize(page),
+      checked: isActive(page),
+      key: page,
+      "aria-label": `page ${page}`,
+      name: name,
+      onChange: () => onPageChange({
+        nextPage: page
+      }),
+      tabIndex: isActive(page) ? 0 : -1,
+      type: "radio"
+    }, DotProps));
+  }));
+};
+
+export default PageControl;

package/es/page-control/styled-components.js

@@ -0,0 +1,99 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { styled, hexToRgb } from '../styles';
+import { SIZE, KIND } from './constants';
+export const StyledRoot = styled('div', ({
+  $kind,
+  $theme
+}) => ({
+  display: 'flex',
+  alignItems: 'center',
+  gap: $theme.sizing.scale300,
+  width: 'fit-content',
+  paddingTop: $theme.sizing.scale100,
+  paddingRight: $theme.sizing.scale500,
+  paddingBottom: $theme.sizing.scale100,
+  paddingLeft: $theme.sizing.scale500,
+  borderRadius: $theme.borders.radius500,
+  backgroundColor: $kind === KIND.backgroundProtection ? $theme.colors.backgroundPrimary : 'transparent'
+}));
+StyledRoot.displayName = "StyledRoot";
+StyledRoot.displayName = 'StyledRoot';
+export const StyledDot = styled('input', ({
+  $active,
+  $kind,
+  $size,
+  $disabled,
+  $isVisible,
+  $theme
+}) => {
+  const sizes = {
+    [SIZE.large]: {
+      height: $theme.sizing.scale300,
+      width: $theme.sizing.scale300
+    },
+    [SIZE.medium]: {
+      height: $theme.sizing.scale200,
+      width: $theme.sizing.scale200,
+      marginTop: '1px',
+      marginRight: '1px',
+      marginBottom: '1px',
+      marginLeft: '1px'
+    },
+    [SIZE.small]: {
+      height: $theme.sizing.scale100,
+      width: $theme.sizing.scale100,
+      marginTop: $theme.sizing.scale0,
+      marginRight: $theme.sizing.scale0,
+      marginBottom: $theme.sizing.scale0,
+      marginLeft: $theme.sizing.scale0
+    }
+  };
+  const colors = {
+    [KIND.default]: {
+      active: $theme.colors.contentPrimary,
+      inactive: $theme.colors.backgroundTertiary
+    },
+    [KIND.backgroundProtection]: {
+      active: $theme.colors.contentPrimary,
+      inactive: $theme.colors.backgroundTertiary
+    },
+    [KIND.inverse]: {
+      active: $theme.colors.contentInversePrimary,
+      inactive: $theme.colors.backgroundInversePrimary
+    },
+    [KIND.alwaysLight]: {
+      active: $theme.colors.contentOnColorInverse,
+      inactive: hexToRgb($theme.colors.backgroundAlwaysDark, '0.12')
+    },
+    [KIND.alwaysDark]: {
+      active: $theme.colors.contentOnColor,
+      inactive: hexToRgb($theme.colors.backgroundAlwaysLight, '0.24')
+    }
+  };
+  return {
+    // reset default input styles
+    appearance: 'none',
+    margin: 0,
+    // base web styles
+    ...sizes[$size],
+    borderRadius: '50%',
+    backgroundColor: $disabled ? $theme.colors.contentStateDisabled : $active ? colors[$kind].active : colors[$kind].inactive,
+    ...(!$isVisible ? {
+      // https://www.nomensa.com/blog/how-improve-web-accessibility-hiding-elements
+      border: 0,
+      clip: 'rect(1px, 1px, 1px, 1px)',
+      height: '1px',
+      margin: '-1px',
+      overflow: 'hidden',
+      padding: 0,
+      position: 'absolute',
+      width: '1px'
+    } : {})
+  };
+});
+StyledDot.displayName = "StyledDot";
+StyledDot.displayName = 'StyledDot';

package/es/page-control/types.js

@@ -0,0 +1 @@
+export {};

package/es/pagination/pagination.js

@@ -8,7 +8,8 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-import * as React from 'react';
+import * as React from 'react'; // @ts-ignore
+
 import memoize from 'memoize-one'; // Files
 
 import { LocaleContext } from '../locale';
@@ -18,7 +19,7 @@ import { Button, KIND } from '../button';
 import { StyledRoot, StyledMaxLabel, StyledDropdownContainer } from './styled-components';
 import ChevronLeft from '../icon/chevron-left';
 import ChevronRight from '../icon/chevron-right';
-import { getOverrides } from '../helpers/overrides';
+import { getOverrides, mergeOverrides } from '../helpers/overrides';
 import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible';
 export default class Pagination extends React.PureComponent {
   constructor(...args) {
@@ -48,6 +49,7 @@ export default class Pagination extends React.PureComponent {
       const menuOptions = [];
 
       for (let i = 1; i <= numPages; i++) {
+        // @ts-ignore
         menuOptions.push({
           label: i
         });
@@ -131,6 +133,63 @@ export default class Pagination extends React.PureComponent {
     const [MaxLabel, maxLabelProps] = getOverrides(overrides.MaxLabel, StyledMaxLabel);
     const [DropdownContainer, dropdownContainerProps] = getOverrides(overrides.DropdownContainer, StyledDropdownContainer);
     const [Select, selectProps] = getOverrides(overrides.Select, BaseSelect);
+    const defaultSelectOverrides = {
+      ControlContainer: {
+        // @ts-ignore
+        style: ({
+          $theme,
+          $disabled,
+          $isOpen,
+          $error
+        }) => ({
+          borderLeftColor: 'transparent',
+          borderRightColor: 'transparent',
+          borderTopColor: 'transparent',
+          borderBottomColor: 'transparent',
+          boxShadow: 'none',
+          backgroundColor: $disabled ? $theme.colors.buttonDisabledFill : $isOpen ? $theme.colors.buttonTertiaryHover : $error ? $theme.colors.negative50 : $theme.colors.buttonTertiaryFill,
+          ':hover': {
+            backgroundColor: $theme.colors.buttonTertiaryHover
+          }
+        })
+      },
+      InputContainer: {
+        style: {
+          marginLeft: 0
+        }
+      },
+      ValueContainer: {
+        style: {
+          flexBasis: 'auto'
+        }
+      },
+      SingleValue: {
+        // @ts-ignore
+        style: ({
+          $theme
+        }) => ({
+          position: 'relative',
+          paddingTop: '0',
+          paddingBottom: '0',
+          paddingLeft: $theme.sizing.scale200,
+          paddingRight: $theme.sizing.scale500,
+          color: $theme.colors.buttonTertiaryText,
+          ...$theme.typography.font350,
+          lineHeight: 'unset'
+        })
+      },
+      SelectArrow: {
+        // @ts-ignore
+        style: ({
+          $theme
+        }) => ({
+          width: '24px',
+          height: '24px',
+          color: $theme.colors.buttonTertiaryText
+        })
+      }
+    };
+    selectProps.overrides = mergeOverrides(defaultSelectOverrides, selectProps.overrides);
     const options = this.getMenuOptions(numPages);
     return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, theme => /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "pagination"
@@ -169,60 +228,7 @@ export default class Pagination extends React.PureComponent {
         label: currentPage
       }],
       maxDropdownHeight: "200px",
-      size: size,
-      overrides: {
-        ControlContainer: {
-          style: ({
-            $theme,
-            $disabled,
-            $isOpen,
-            $error
-          }) => ({
-            borderLeftColor: 'transparent',
-            borderRightColor: 'transparent',
-            borderTopColor: 'transparent',
-            borderBottomColor: 'transparent',
-            boxShadow: 'none',
-            backgroundColor: $disabled ? $theme.colors.buttonDisabledFill : $isOpen ? $theme.colors.buttonTertiaryHover : $error ? $theme.colors.negative50 : $theme.colors.buttonTertiaryFill,
-            ':hover': {
-              backgroundColor: $theme.colors.buttonTertiaryHover
-            }
-          })
-        },
-        InputContainer: {
-          style: {
-            marginLeft: 0
-          }
-        },
-        ValueContainer: {
-          style: {
-            flexBasis: 'auto'
-          }
-        },
-        SingleValue: {
-          style: ({
-            $theme
-          }) => ({
-            position: 'relative',
-            paddingTop: '0',
-            paddingBottom: '0',
-            paddingLeft: $theme.sizing.scale200,
-            paddingRight: $theme.sizing.scale500,
-            color: $theme.colors.buttonTertiaryText,
-            ...$theme.typography.font350,
-            lineHeight: 'unset'
-          })
-        },
-        SelectArrow: {
-          style: ({
-            $theme
-          }) => ({
-            width: '24px',
-            height: '24px',
-            color: $theme.colors.buttonTertiaryText
-          })
-        }
-      }
+      size: size
     }, selectProps))), /*#__PURE__*/React.createElement(MaxLabel, _extends({}, maxLabelProps, {
       "aria-hidden": true
     }), `${labels && labels.preposition ? labels.preposition : locale.pagination.preposition || ''} ${numPages}`), /*#__PURE__*/React.createElement(Button, {

package/es/payment-card/payment-card.js

@@ -81,7 +81,8 @@ class PaymentCard extends React.Component {
     if (validatedValue.card) {
       gaps = validatedValue.card.gaps || [];
       type = validatedValue.card.type;
-    }
+    } // @ts-ignore
+
 
     const getBeforeComponent = theme => {
       const iconSize = {
@@ -109,7 +110,8 @@ class PaymentCard extends React.Component {
         Before: getBeforeComponent(theme)
       }),
       onChange: e => {
-        const [position, value] = getCaretPosition(e.target.value, this.props.value ? String(this.props.value) : '', e.target.selectionStart); // @ts-expect-error todo(flow->ts): looks dangerous
+        const [position, value] = getCaretPosition(e.target.value, this.props.value ? String(this.props.value) : '', // @ts-ignore
+        e.target.selectionStart); // @ts-expect-error todo(flow->ts): looks dangerous
 
         this.caretPosition = position;
         this.inRef = e.target; // @ts-expect-error todo(flow->ts): looks dangerous
@@ -134,7 +136,9 @@ _defineProperty(PaymentCard, "defaultProps", {
   overrides: {},
   required: false,
   size: 'default',
+  // @ts-ignore
   startEnhancer: null,
+  // @ts-ignore
   endEnhancer: null
 });
 

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

@@ -36,7 +36,7 @@ const DropdownListItem = /*#__PURE__*/React.forwardRef((props, ref) => {
     ref: ref
   }, rest), props.children);
 });
-DropdownListItem.displayName = 'DropdownListItem';
+DropdownListItem.displayName = 'DropdownListItem'; // @ts-ignore
 
 function DropdownOptionContent(props) {
   return /*#__PURE__*/React.createElement(React.Fragment, null, props.children);
@@ -94,6 +94,7 @@ export default function CountryPicker(props) {
     },
     StatefulMenu: {
       props: {
+        // @ts-ignore
         stateReducer: (type, nextState) => {
           const next = { ...nextState,
             highlightedIndex: resetScrollIndex ? 0 : nextState.highlightedIndex
@@ -154,6 +155,7 @@ export default function CountryPicker(props) {
   return /*#__PURE__*/React.createElement(Select, _extends({
     clearable: false,
     disabled: disabled // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    // @ts-ignore
     ,
     getOptionLabel: ({
       option,
@@ -173,7 +175,8 @@ export default function CountryPicker(props) {
       }, sharedProps, flagContainerProps), iso2FlagEmoji(iso));
     },
     error: error,
-    maxDropdownHeight: maxDropdownHeight,
+    maxDropdownHeight: maxDropdownHeight // @ts-ignore
+    ,
     onChange: event => {
       if (typeof onCountryChange === 'function') {
         onCountryChange(event);

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

@@ -31,6 +31,7 @@ export default function CountryPicker(props) {
   } = props;
   const baseSelectOverrides = {
     Root: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,
@@ -45,6 +46,7 @@ export default function CountryPicker(props) {
       }
     },
     ControlContainer: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,
@@ -67,7 +69,9 @@ export default function CountryPicker(props) {
         const padStartDir = direction === 'rtl' ? 'paddingRight' : 'paddingLeft';
         const padEndDir = direction === 'rtl' ? 'paddingLeft' : 'paddingRight';
         const styleOverride = {
+          // @ts-ignore
           [padStartDir]: sizeToLeftPadding[props.$size || SIZE.default],
+          // @ts-ignore
           [padEndDir]: sizeToRightPadding[props.$size || SIZE.default]
         }; // do not add positive and error color borders when not focused
 
@@ -92,6 +96,7 @@ export default function CountryPicker(props) {
   selectProps.overrides = mergeOverrides(selectOverrides, selectProps.overrides);
   const baseOverrides = {
     FlagContainer: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,
@@ -107,11 +112,13 @@ export default function CountryPicker(props) {
         };
         const marginDir = direction === 'rtl' ? 'marginLeft' : 'marginRight';
         return {
+          // @ts-ignore
           [marginDir]: sizeToMargin[props.$size || SIZE.default]
         };
       }
     },
     DialCode: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,

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

@@ -49,6 +49,7 @@ export default function CountrySelect(props) {
   };
   const baseSelectOverrides = {
     ControlContainer: {
+      // @ts-ignore
       style: props => {
         if (!props.$isFocused && !props.$isPseudoFocused) {
           return {

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

@@ -7,7 +7,9 @@ LICENSE file in the root directory of this source tree.
 import { SIZE, DEFAULT_MAX_DROPDOWN_HEIGHT, DEFAULT_MAX_DROPDOWN_WIDTH } from './constants';
 const defaultProps = {
   'aria-label': 'Please enter a phone number without the country dial code.',
+  // @ts-ignore
   'aria-describedby': null,
+  // @ts-ignore
   'aria-labelledby': null,
   clearable: true,
   focusLock: false,
@@ -18,9 +20,11 @@ const defaultProps = {
   },
   disabled: false,
   error: false,
+  // @ts-ignore
   id: null,
   maxDropdownHeight: DEFAULT_MAX_DROPDOWN_HEIGHT,
   maxDropdownWidth: DEFAULT_MAX_DROPDOWN_WIDTH,
+  // @ts-ignore
   name: null,
   onCountryChange: () => {},
   onTextChange: () => {},

package/es/phone-input/flag.js

@@ -17,7 +17,8 @@ export default function Flag(props) {
     width = '16px',
     ...restProps
   } = props;
-  const iso = oldIsoProp || $iso;
+  const iso = oldIsoProp || $iso; // @ts-ignore
+
   const FlagComponent = flags[`Flag${iso.toUpperCase()}`]; //$FlowExpectedError[cannot-spread-inexact]
 
   return /*#__PURE__*/React.createElement(FlagComponent, _extends({

package/es/phone-input/phone-input-lite.js

@@ -41,6 +41,7 @@ export default function PhoneInputLite(props) {
   const inputRef = useRef(null);
   const baseDialCodeOverride = {
     component: StyledDialCode,
+    // @ts-ignore
     style: ({
       $theme: {
         direction,
@@ -63,6 +64,7 @@ export default function PhoneInputLite(props) {
   });
   const baseOverrides = {
     Input: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,

package/es/phone-input/phone-input-next.js

@@ -45,6 +45,7 @@ export default function PhoneInputNext(props) {
   const inputRef = useRef(null);
   const baseDialCodeOverride = {
     component: StyledDialCode,
+    // @ts-ignore
     style: ({
       $theme: {
         direction,
@@ -67,6 +68,7 @@ export default function PhoneInputNext(props) {
   });
   const baseOverrides = {
     Input: {
+      // @ts-ignore
       style: ({
         $theme: {
           direction,

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

@@ -40,6 +40,7 @@ export default class StatefulPhoneInputContainer extends React.Component {
 
       if (event.option && event.option.id) {
         this.internalSetState(STATE_CHANGE_TYPE.countryChange, {
+          // @ts-ignore
           country: COUNTRIES[event.option.id]
         });
       }

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

@@ -7,13 +7,17 @@ LICENSE file in the root directory of this source tree.
 import { SIZE } from '../input';
 const defaultProps = {
   'aria-label': 'Please enter your pin code',
+  // @ts-ignore
   'aria-labelledby': null,
+  // @ts-ignore
   'aria-describedby': null,
   autoComplete: 'one-time-code',
   autoFocus: false,
   disabled: false,
   error: false,
+  // @ts-ignore
   id: null,
+  // @ts-ignore
   name: null,
   onChange: () => {},
   overrides: {},

package/es/pin-code/pin-code.js

@@ -76,7 +76,8 @@ export default class PinCode extends React.Component {
         }),
         onFocus: () => this.setState({
           hasFocus: true
-        }),
+        }) // @ts-ignore
+        ,
         onChange: event => {
           const eventValue = event.target.value; // in the case of an autocomplete or copy and paste
 
@@ -128,7 +129,8 @@ export default class PinCode extends React.Component {
               if (inputRef && inputRef.focus) inputRef.focus();
             }
           }
-        },
+        } // @ts-ignore
+        ,
         onKeyDown: event => {
           // if we see a backspace/delete and the input is empty, transfer focus backward
           if (this.props.manageFocus && event.key === 'Backspace' && this.props.values[i] === '' && i > 0) {