baseui 10.10.0 → 10.11.0

package/timezonepicker/update-tzdata.js

@@ -121,9 +121,7 @@ function _main() {
 
           case 34:
             file = [];
-            file.push('/* eslint-disable header/header */');
-            file.push('// @flow');
-            file.push('');
+            file.push("/*\nCopyright (c) Uber Technologies, Inc.\n\nThis source code is licensed under the MIT license found in the\nLICENSE file in the root directory of this source tree.\n*/\n// @flow\n");
             file.push('export const zones = [');
 
             for (_i = 0, _zones = zones; _i < _zones.length; _i++) {
@@ -131,32 +129,32 @@ function _main() {
               file.push("  '".concat(zone, "',"));
             }
 
-            file.push('];');
+            file.push('];\n');
             tzdataPath = path.join(__dirname, 'tzdata.js');
-            _context.next = 44;
+            _context.next = 42;
             return fs.promises.writeFile(tzdataPath, file.join('\n'));
 
-          case 44:
-            _context.next = 46;
+          case 42:
+            _context.next = 44;
             return fs.promises.rmdir(tmpDir, {
               recursive: true
             });
 
-          case 46:
-            _context.next = 51;
+          case 44:
+            _context.next = 49;
             break;
 
-          case 48:
-            _context.prev = 48;
+          case 46:
+            _context.prev = 46;
             _context.t1 = _context["catch"](0);
             console.error(_context.t1);
 
-          case 51:
+          case 49:
           case "end":
             return _context.stop();
         }
       }
-    }, _callee, null, [[0, 48], [16, 28, 31, 34]]);
+    }, _callee, null, [[0, 46], [16, 28, 31, 34]]);
   }));
   return _main.apply(this, arguments);
 }

package/timezonepicker/update-tzdata.js.flow

@@ -21,7 +21,7 @@ async function main() {
   try {
     const tmpDir = path.join(__dirname, 'tmp');
     // $FlowFixMe - flow is not aware of recursive option
-    await fs.promises.rmdir(tmpDir, {recursive: true});
+    await fs.promises.rmdir(tmpDir, { recursive: true });
     await fs.promises.mkdir(tmpDir);
 
     const src = `https://www.iana.org/time-zones/repository/tzdata-latest.tar.gz`;
@@ -44,20 +44,25 @@ async function main() {
     }
 
     const file = [];
-    file.push('/* eslint-disable header/header */');
-    file.push('// @flow');
-    file.push('');
+    file.push(`/*
+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.
+*/
+// @flow
+`);
     file.push('export const zones = [');
     for (const zone of zones) {
       file.push(`  '${zone}',`);
     }
-    file.push('];');
+    file.push('];\n');
 
     const tzdataPath = path.join(__dirname, 'tzdata.js');
     await fs.promises.writeFile(tzdataPath, file.join('\n'));
 
     // $FlowFixMe - flow is not aware of recursive option
-    await fs.promises.rmdir(tmpDir, {recursive: true});
+    await fs.promises.rmdir(tmpDir, { recursive: true });
   } catch (error) {
     console.error(error);
   }

package/toast/index.js.flow

@@ -5,10 +5,10 @@ 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 toaster, ToasterContainer} from './toaster.js';
-export {default as Toast} from './toast.js';
+export { default as toaster, ToasterContainer } from './toaster.js';
+export { default as Toast } from './toast.js';
 // Constants
-export {KIND, PLACEMENT, TYPE} from './constants.js';
+export { KIND, PLACEMENT, TYPE } from './constants.js';
 // Styled elements
 export {
   Root as StyledRoot,

package/toast/styled-components.js

@@ -12,6 +12,8 @@ var _styledComponents = require("../icon/styled-components.js");
 
 var _constants = require("./constants.js");
 
+function _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure undefined"); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
@@ -73,12 +75,11 @@ function getPlacement(placement) {
     justifyContent: 'flex-end',
     flexDirection: 'column-reverse'
   }), _PLACEMENT$topLeft$PL)[placement];
-} // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+}
 
-var Root = (0, _index.styled)('div', function (props) {
-  var $placement = props.$placement,
-      $theme = props.$theme;
+var Root = (0, _index.styled)('div', function (_ref) {
+  var $placement = _ref.$placement,
+      $theme = _ref.$theme;
   return _objectSpread({
     pointerEvents: 'none',
     position: 'fixed',
@@ -90,19 +91,22 @@ var Root = (0, _index.styled)('div', function (props) {
     marginLeft: $theme.sizing.scale600,
     marginRight: $theme.sizing.scale600
   }, getPlacement($placement));
-}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+});
 exports.Root = Root;
 Root.displayName = "Root";
-var InnerContainer = (0, _index.styled)('div', {}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
+var InnerContainer = (0, _index.styled)('div', // eslint-disable-next-line no-empty-pattern
+function (_ref2) {
+  _objectDestructuringEmpty(_ref2);
 
+  return {};
+});
 exports.InnerContainer = InnerContainer;
 InnerContainer.displayName = "InnerContainer";
-var Body = (0, _index.styled)('div', function (props) {
-  var $isVisible = props.$isVisible,
-      $kind = props.$kind,
-      $type = props.$type,
-      $theme = props.$theme;
+var Body = (0, _index.styled)('div', function (_ref3) {
+  var $isVisible = _ref3.$isVisible,
+      $kind = _ref3.$kind,
+      $type = _ref3.$type,
+      $theme = _ref3.$theme;
   var isInline = $type === _constants.TYPE.inline;
   return _objectSpread(_objectSpread({}, $theme.typography.font300), {}, {
     pointerEvents: 'auto',
@@ -128,16 +132,23 @@ var Body = (0, _index.styled)('div', function (props) {
     display: 'flex',
     justifyContent: 'space-between'
   });
-}); // $FlowFixMe https://github.com/facebook/flow/issues/7745
-
+});
 exports.Body = Body;
 Body.displayName = "Body";
-var CloseIconSvg = (0, _index.styled)('svg', function (props) {
-  return _objectSpread(_objectSpread({}, (0, _styledComponents.getSvgStyles)(props)), {}, {
+var CloseIconSvg = (0, _index.styled)('svg', function (_ref4) {
+  var $theme = _ref4.$theme,
+      $size = _ref4.$size,
+      $color = _ref4.$color,
+      $isFocusVisible = _ref4.$isFocusVisible;
+  return _objectSpread(_objectSpread({}, (0, _styledComponents.getSvgStyles)({
+    $theme: $theme,
+    $size: $size,
+    $color: $color
+  })), {}, {
     cursor: 'pointer',
-    width: props.$size || '16px',
+    width: $size || '16px',
     flexShrink: 0,
-    outline: props.$isFocusVisible ? "3px solid ".concat(props.$theme.colors.accent) : 'none'
+    outline: $isFocusVisible ? "3px solid ".concat($theme.colors.accent) : 'none'
   });
 });
 exports.CloseIconSvg = CloseIconSvg;

package/toast/styled-components.js.flow

@@ -6,23 +6,20 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-import {styled} from '../styles/index.js';
-import {getSvgStyles} from '../icon/styled-components.js';
-import {KIND, PLACEMENT, TYPE} from './constants.js';
-import type {
-  SharedStylePropsArgT,
-  ToasterSharedStylePropsArgT,
-  KindTypeT,
-  NotificationTypeT,
-  PlacementTypeT,
+import { styled } from '../styles/index.js';
+import { getSvgStyles } from '../icon/styled-components.js';
+import { KIND, PLACEMENT, TYPE } from './constants.js';
+import {
+  type SharedStylePropsArgT,
+  type ToasterSharedStylePropsArgT,
+  type KindTypeT,
+  type NotificationTypeT,
+  type PlacementTypeT,
 } from './types.js';
-import type {ThemeT} from '../styles/types.js';
+import type { ThemeT } from '../styles/types.js';
+import type { StyleObject } from 'styletron-standard';
 
-function getBackgroundColor(
-  kind: KindTypeT,
-  type: NotificationTypeT,
-  theme: ThemeT,
-) {
+function getBackgroundColor(kind: KindTypeT, type: NotificationTypeT, theme: ThemeT) {
   const isInline = type === TYPE.inline;
   return {
     [KIND.info]: isInline
@@ -100,70 +97,86 @@ export function getPlacement(placement: PlacementTypeT) {
   }[placement];
 }
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
-export const Root = styled<ToasterSharedStylePropsArgT>('div', props => {
-  const {$placement, $theme} = props;
-  return {
-    pointerEvents: 'none',
-    position: 'fixed',
-    right: 0,
-    left: 0,
-    display: 'flex',
-    marginTop: $theme.sizing.scale300,
-    marginBottom: $theme.sizing.scale300,
-    marginLeft: $theme.sizing.scale600,
-    marginRight: $theme.sizing.scale600,
-    ...getPlacement($placement),
-  };
-});
+export const Root = styled<ToasterSharedStylePropsArgT>(
+  'div',
+  ({ $placement, $theme }: ToasterSharedStylePropsArgT & { $theme: ThemeT }) => {
+    return {
+      pointerEvents: 'none',
+      position: 'fixed',
+      right: 0,
+      left: 0,
+      display: 'flex',
+      marginTop: $theme.sizing.scale300,
+      marginBottom: $theme.sizing.scale300,
+      marginLeft: $theme.sizing.scale600,
+      marginRight: $theme.sizing.scale600,
+      ...getPlacement($placement),
+    };
+  }
+);
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
-export const InnerContainer = styled<SharedStylePropsArgT>('div', {});
+export const InnerContainer = styled<SharedStylePropsArgT>(
+  'div',
+  // eslint-disable-next-line no-empty-pattern
+  ({}: SharedStylePropsArgT & { $theme: ThemeT }) => ({})
+);
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
-export const Body = styled<SharedStylePropsArgT>('div', props => {
-  const {$isVisible, $kind, $type, $theme} = props;
-  const isInline = $type === TYPE.inline;
-  return {
-    ...$theme.typography.font300,
-    pointerEvents: 'auto',
-    color: getFontColor($kind, $type, $theme),
-    height: 'auto',
-    width: '288px',
-    paddingTop: $theme.sizing.scale600,
-    paddingRight: $theme.sizing.scale600,
-    paddingBottom: $theme.sizing.scale600,
-    paddingLeft: $theme.sizing.scale600,
-    marginTop: $theme.sizing.scale300,
-    marginBottom: $theme.sizing.scale300,
-    backgroundColor:
-      getBackgroundColor($kind, $type, $theme) || $theme.colors.accent,
-    borderTopLeftRadius: $theme.borders.radius400,
-    borderTopRightRadius: $theme.borders.radius400,
-    borderBottomRightRadius: $theme.borders.radius400,
-    borderBottomLeftRadius: $theme.borders.radius400,
-    boxShadow: isInline ? 'none' : $theme.lighting.shadow600,
-    opacity: $isVisible ? 1 : 0,
-    transitionProperty: 'all',
-    transitionDuration: $theme.animation.timing200,
-    transitionTimingFunction: $theme.animation.easeInOutCurve,
-    display: 'flex',
-    justifyContent: 'space-between',
-  };
-});
+export const Body = styled<SharedStylePropsArgT>(
+  'div',
+  ({ $isVisible, $kind, $type, $theme }: SharedStylePropsArgT & { $theme: ThemeT }) => {
+    const isInline = $type === TYPE.inline;
+    return {
+      ...$theme.typography.font300,
+      pointerEvents: 'auto',
+      color: getFontColor($kind, $type, $theme),
+      height: 'auto',
+      width: '288px',
+      paddingTop: $theme.sizing.scale600,
+      paddingRight: $theme.sizing.scale600,
+      paddingBottom: $theme.sizing.scale600,
+      paddingLeft: $theme.sizing.scale600,
+      marginTop: $theme.sizing.scale300,
+      marginBottom: $theme.sizing.scale300,
+      backgroundColor: getBackgroundColor($kind, $type, $theme) || $theme.colors.accent,
+      borderTopLeftRadius: $theme.borders.radius400,
+      borderTopRightRadius: $theme.borders.radius400,
+      borderBottomRightRadius: $theme.borders.radius400,
+      borderBottomLeftRadius: $theme.borders.radius400,
+      boxShadow: isInline ? 'none' : $theme.lighting.shadow600,
+      opacity: $isVisible ? 1 : 0,
+      transitionProperty: 'all',
+      transitionDuration: $theme.animation.timing200,
+      transitionTimingFunction: $theme.animation.easeInOutCurve,
+      display: 'flex',
+      justifyContent: 'space-between',
+    };
+  }
+);
 
-// $FlowFixMe https://github.com/facebook/flow/issues/7745
-export const CloseIconSvg = styled<SharedStylePropsArgT>('svg', props => {
-  return {
-    ...getSvgStyles(props),
+export const CloseIconSvg = styled<{
+  ...SharedStylePropsArgT,
+  $size: number | string,
+  $color: string,
+}>(
+  'svg',
+  ({
+    $theme,
+    $size,
+    $color,
+    $isFocusVisible,
+  }: SharedStylePropsArgT & {
+    // flowlint-next-line unclear-type:off
+    $size: any,
+    $color: string,
+    $theme: ThemeT,
+  }): StyleObject => ({
+    ...getSvgStyles({ $theme, $size, $color }),
     cursor: 'pointer',
-    width: props.$size || '16px',
+    width: $size || '16px',
     flexShrink: 0,
-    outline: props.$isFocusVisible
-      ? `3px solid ${props.$theme.colors.accent}`
-      : 'none',
-  };
-});
+    outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
+  })
+);
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/toast/toast.js.flow

@@ -7,15 +7,15 @@ LICENSE file in the root directory of this source tree.
 // @flow
 /* global document */
 import * as React from 'react';
-import {getOverrides, mergeOverrides} from '../helpers/overrides.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import DeleteIcon from '../icon/delete.js';
 import {
   Body as StyledBody,
   CloseIconSvg as StyledCloseIcon,
   InnerContainer as StyledInnerContainer,
 } from './styled-components.js';
-import {KIND, TYPE} from './constants.js';
-import {LocaleContext} from '../locale/index.js';
+import { KIND, TYPE } from './constants.js';
+import { LocaleContext } from '../locale/index.js';
 
 import type {
   ToastPropsT,
@@ -23,8 +23,8 @@ import type {
   ToastPrivateStateT,
   SharedStylePropsArgT,
 } from './types.js';
-import type {OverridesT} from '../icon/index.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import type { OverridesT } from '../icon/index.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   static defaultProps: ToastPropsShapeT = {
@@ -46,7 +46,7 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   autoHideTimeout: ?TimeoutID;
   animateInTimer: ?TimeoutID;
   animateOutCompleteTimer: ?TimeoutID;
-  closeRef: ?{current: ?mixed};
+  closeRef: ?{ current: ?mixed };
   previouslyFocusedElement: ?HTMLElement;
 
   state = {
@@ -75,7 +75,7 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
       this.previouslyFocusedElement = document.activeElement;
       // $FlowFixMe: CloseIcon is `mixed` type so doesn't like `focus` call.
       this.closeRef.current.focus();
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
   }
 
@@ -94,13 +94,13 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
 
   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 });
     }
   };
 
@@ -109,19 +109,12 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
       if (this.autoHideTimeout) {
         clearTimeout(this.autoHideTimeout);
       }
-      this.autoHideTimeout = setTimeout(
-        this.dismiss,
-        this.props.autoHideDuration,
-      );
+      this.autoHideTimeout = setTimeout(this.dismiss, this.props.autoHideDuration);
     }
   }
 
   clearTimeout() {
-    [
-      this.autoHideTimeout,
-      this.animateInTimer,
-      this.animateOutCompleteTimer,
-    ].forEach(timerId => {
+    [this.autoHideTimeout, this.animateInTimer, this.animateOutCompleteTimer].forEach((timerId) => {
       if (timerId) {
         clearTimeout(timerId);
       }
@@ -131,15 +124,15 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   animateIn = () => {
     // Defer to next event loop
     this.animateInTimer = setTimeout(() => {
-      this.setState({isVisible: true});
+      this.setState({ isVisible: true });
     }, 0);
   };
 
   animateOut = (callback: () => mixed = () => {}) => {
-    this.setState({isVisible: false});
+    this.setState({ isVisible: false });
     // Remove the toast from the DOM after animation finishes
     this.animateOutCompleteTimer = setTimeout(() => {
-      this.setState({isRendered: false});
+      this.setState({ isRendered: false });
       callback();
     }, 600);
   };
@@ -176,8 +169,8 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   };
 
   getSharedProps(): $Shape<SharedStylePropsArgT> {
-    const {kind, notificationType, closeable} = this.props;
-    const {isRendered, isVisible} = this.state;
+    const { kind, notificationType, closeable } = this.props;
+    const { isRendered, isVisible } = this.state;
     return {
       $kind: kind,
       $type: notificationType,
@@ -188,8 +181,8 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
   }
 
   render() {
-    const {children, closeable} = this.props;
-    const {isRendered} = this.state;
+    const { children, closeable } = this.props;
+    const { isRendered } = this.state;
     const {
       Body: BodyOverride,
       CloseIcon: CloseIconOverride,
@@ -200,18 +193,15 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
 
     const [InnerContainer, innerContainerProps] = getOverrides(
       InnerContainerOverride,
-      StyledInnerContainer,
+      StyledInnerContainer
     );
 
-    const [CloseIcon, closeIconProps] = getOverrides(
-      CloseIconOverride,
-      StyledCloseIcon,
-    );
+    const [CloseIcon, closeIconProps] = getOverrides(CloseIconOverride, StyledCloseIcon);
 
     const closeIconOverrides: OverridesT = mergeOverrides(
-      {Svg: {component: CloseIcon}},
+      { Svg: { component: CloseIcon } },
       // $FlowFixMe
-      {Svg: CloseIconOverride},
+      { Svg: CloseIconOverride }
     );
 
     const sharedProps = this.getSharedProps();
@@ -221,7 +211,7 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
     }
     return (
       <LocaleContext.Consumer>
-        {locale => (
+        {(locale) => (
           <Body
             role="alert"
             data-baseweb={this.props['data-baseweb'] || 'toast'}
@@ -234,9 +224,7 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
             onMouseLeave={this.onMouseLeave}
           >
             <InnerContainer {...sharedProps} {...innerContainerProps}>
-              {typeof children === 'function'
-                ? children({dismiss: this.dismiss})
-                : children}
+              {typeof children === 'function' ? children({ dismiss: this.dismiss }) : children}
             </InnerContainer>
             {closeable ? (
               <DeleteIcon
@@ -245,7 +233,7 @@ class Toast extends React.Component<ToastPropsT, ToastPrivateStateT> {
                 tabIndex={0}
                 $isFocusVisible={this.state.isFocusVisible}
                 onClick={this.dismiss}
-                onKeyPress={event => {
+                onKeyPress={(event) => {
                   if (event.key === 'Enter') {
                     this.dismiss();
                   }

package/toast/toaster.js

@@ -213,11 +213,10 @@ var ToasterContainer = /*#__PURE__*/function (_React$Component) {
         Body: _styledComponents.Body,
         CloseIcon: _styledComponents.CloseIconSvg,
         InnerContainer: _styledComponents.InnerContainer
-      }, // $FlowFixMe
-      {
-        Body: BodyOverride,
-        CloseIcon: CloseIconOverride,
-        InnerContainer: InnerContainerOverride
+      }, {
+        Body: BodyOverride || {},
+        CloseIcon: CloseIconOverride || {},
+        InnerContainer: InnerContainerOverride || {}
       });
       var toastOverrides = (0, _overrides.mergeOverrides)(globalToastOverrides, toastProps.overrides);
       return /*#__PURE__*/React.createElement(_toast.default, _extends({}, restProps, {
@@ -275,8 +274,7 @@ var ToasterContainer = /*#__PURE__*/function (_React$Component) {
       }, sharedProps, rootProps), toastsToRender); //Only render the portal in the browser, otherwise render the toasts and children
 
       if (this.state.isMounted) {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.usePortal && typeof document !== 'undefined' ? /*#__PURE__*/_reactDom.default.createPortal(root, // $FlowFixMe
-        document.body) : root, this.props.children);
+        return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.usePortal && typeof document !== 'undefined' && document.body ? /*#__PURE__*/_reactDom.default.createPortal(root, document.body) : root, this.props.children);
       } else {
         return /*#__PURE__*/React.createElement(React.Fragment, null, this.props.children);
       }