baseui 10.10.0 → 10.11.0

package/menu/stateful-menu.js

@@ -66,11 +66,15 @@ var StatefulMenu = /*#__PURE__*/function (_React$PureComponent) {
           props = _objectWithoutProperties(_this$props, ["overrides"]);
 
       return /*#__PURE__*/React.createElement(_nestedMenus.NestedMenuContext.Consumer, null, function (ctx) {
-        return /*#__PURE__*/React.createElement(_statefulContainer.default, _extends({}, ctx, props), function (renderProps) {
-          return /*#__PURE__*/React.createElement(_menu.default, _extends({}, renderProps, {
-            overrides: overrides
-          }));
-        });
+        return (
+          /*#__PURE__*/
+          //$FlowExpectedError[cannot-spread-inexact]
+          React.createElement(_statefulContainer.default, _extends({}, ctx, props), function (renderProps) {
+            return /*#__PURE__*/React.createElement(_menu.default, _extends({}, renderProps, {
+              overrides: overrides
+            }));
+          })
+        );
       });
     }
   }]);

package/menu/stateful-menu.js.flow

@@ -9,19 +9,20 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 
 import Menu from './menu.js';
-import {NestedMenuContext} from './nested-menus.js';
+import { NestedMenuContext } from './nested-menus.js';
 import StatefulContainer from './stateful-container.js';
 
-import type {StatefulMenuPropsT} from './types.js';
+import type { StatefulMenuPropsT } from './types.js';
 
 export default class StatefulMenu extends React.PureComponent<StatefulMenuPropsT> {
   render() {
-    const {overrides, ...props} = this.props;
+    const { overrides, ...props } = this.props;
     return (
       <NestedMenuContext.Consumer>
-        {ctx => (
+        {(ctx) => (
+          //$FlowExpectedError[cannot-spread-inexact]
           <StatefulContainer {...ctx} {...props}>
-            {renderProps => <Menu {...renderProps} overrides={overrides} />}
+            {(renderProps) => <Menu {...renderProps} overrides={overrides} />}
           </StatefulContainer>
         )}
       </NestedMenuContext.Consumer>

package/menu/styled-components.js.flow

@@ -6,8 +6,8 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {styled, withWrapper} from '../styles/index.js';
-import {OPTION_LIST_SIZE} from './constants.js';
+import { styled, withWrapper } from '../styles/index.js';
+import { OPTION_LIST_SIZE } from './constants.js';
 
 type StyledPropsT = {
   $disabled?: boolean,
@@ -17,32 +17,29 @@ type StyledPropsT = {
   $size?: $Keys<typeof OPTION_LIST_SIZE>,
 };
 
-export const StyledList = styled<StyledPropsT>(
-  'ul',
-  ({$theme, $isFocusVisible}) => {
-    return {
-      backgroundColor: $theme.colors.menuFill,
-      position: 'relative',
-      marginTop: 0,
-      marginBottom: 0,
-      marginLeft: 0,
-      marginRight: 0,
-      paddingTop: $theme.sizing.scale300,
-      paddingBottom: $theme.sizing.scale300,
-      paddingLeft: 0,
-      paddingRight: 0,
-      borderTopLeftRadius: $theme.borders.popoverBorderRadius,
-      borderTopRightRadius: $theme.borders.popoverBorderRadius,
-      borderBottomRightRadius: $theme.borders.popoverBorderRadius,
-      borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
-      boxShadow: $theme.lighting.shadow600,
-      overflow: 'auto',
-      ':focus': {
-        outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
-      },
-    };
-  },
-);
+export const StyledList = styled<StyledPropsT>('ul', ({ $theme, $isFocusVisible }) => {
+  return {
+    backgroundColor: $theme.colors.menuFill,
+    position: 'relative',
+    marginTop: 0,
+    marginBottom: 0,
+    marginLeft: 0,
+    marginRight: 0,
+    paddingTop: $theme.sizing.scale300,
+    paddingBottom: $theme.sizing.scale300,
+    paddingLeft: 0,
+    paddingRight: 0,
+    borderTopLeftRadius: $theme.borders.popoverBorderRadius,
+    borderTopRightRadius: $theme.borders.popoverBorderRadius,
+    borderBottomRightRadius: $theme.borders.popoverBorderRadius,
+    borderBottomLeftRadius: $theme.borders.popoverBorderRadius,
+    boxShadow: $theme.lighting.shadow600,
+    overflow: 'auto',
+    ':focus': {
+      outline: $isFocusVisible ? `3px solid ${$theme.colors.accent}` : 'none',
+    },
+  };
+});
 
 function getFontColor(props) {
   if (props.$disabled) {
@@ -72,12 +69,10 @@ function getBackgroundColor(props) {
   return 'transparent';
 }
 
-export const StyledEmptyState = styled<StyledPropsT>('li', props => {
-  const {$theme, $size} = props;
+export const StyledEmptyState = styled<StyledPropsT>('li', (props) => {
+  const { $theme, $size } = props;
   return {
-    ...($size === OPTION_LIST_SIZE.compact
-      ? $theme.typography.font100
-      : $theme.typography.font200),
+    ...($size === OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200),
     position: 'relative',
     display: 'block',
     color: $theme.colors.menuFontDisabled,
@@ -92,7 +87,7 @@ export const StyledEmptyState = styled<StyledPropsT>('li', props => {
   };
 });
 
-export const StyledOptgroupHeader = styled<{}>('li', props => {
+export const StyledOptgroupHeader = styled<{}>('li', (props) => {
   const paddingX = props.$theme.sizing.scale300;
   const paddingY = props.$theme.sizing.scale200;
   return {
@@ -104,18 +99,16 @@ export const StyledOptgroupHeader = styled<{}>('li', props => {
     paddingLeft: paddingX,
   };
 });
-export const StyledListItemAnchor = styled<StyledPropsT>('a', props => {
+export const StyledListItemAnchor = styled<StyledPropsT>('a', (props) => {
   return {
     display: 'block',
     color: getFontColor(props),
   };
 });
-export const StyledListItemElement = styled<StyledPropsT>('li', props => {
-  const {$disabled, $theme, $size} = props;
+export const StyledListItemElement = styled<StyledPropsT>('li', (props) => {
+  const { $disabled, $theme, $size } = props;
   return {
-    ...($size === OPTION_LIST_SIZE.compact
-      ? $theme.typography.font100
-      : $theme.typography.font200),
+    ...($size === OPTION_LIST_SIZE.compact ? $theme.typography.font100 : $theme.typography.font200),
     position: 'relative',
     display: 'block',
     color: getFontColor(props),
@@ -126,21 +119,13 @@ export const StyledListItemElement = styled<StyledPropsT>('li', props => {
     transitionTimingFunction: $theme.animation.easeOutCurve,
     marginBottom: 0,
     paddingTop:
-      $size === OPTION_LIST_SIZE.compact
-        ? $theme.sizing.scale100
-        : $theme.sizing.scale300,
+      $size === OPTION_LIST_SIZE.compact ? $theme.sizing.scale100 : $theme.sizing.scale300,
     paddingBottom:
-      $size === OPTION_LIST_SIZE.compact
-        ? $theme.sizing.scale100
-        : $theme.sizing.scale300,
+      $size === OPTION_LIST_SIZE.compact ? $theme.sizing.scale100 : $theme.sizing.scale300,
     paddingRight:
-      $size === OPTION_LIST_SIZE.compact
-        ? $theme.sizing.scale900
-        : $theme.sizing.scale600,
+      $size === OPTION_LIST_SIZE.compact ? $theme.sizing.scale900 : $theme.sizing.scale600,
     paddingLeft:
-      $size === OPTION_LIST_SIZE.compact
-        ? $theme.sizing.scale900
-        : $theme.sizing.scale600,
+      $size === OPTION_LIST_SIZE.compact ? $theme.sizing.scale900 : $theme.sizing.scale600,
     ':focus': {
       outline: 'none',
     },
@@ -149,13 +134,13 @@ export const StyledListItemElement = styled<StyledPropsT>('li', props => {
 
 export const StyledListItem = withWrapper(
   StyledListItemElement,
-  Styled =>
-    function StyledListItem({item, ...restProps}) {
+  (Styled) =>
+    function StyledListItem({ item, ...restProps }) {
       return <Styled {...restProps} />;
-    },
+    }
 );
 
-export const StyledListItemProfile = styled<StyledPropsT>('li', ({$theme}) => ({
+export const StyledListItemProfile = styled<StyledPropsT>('li', ({ $theme }) => ({
   position: 'relative',
   display: 'flex',
   alignItems: 'center',
@@ -191,17 +176,15 @@ export const StyledProfileImg = styled('img', {
 
 export const StyledProfileLabelsContainer = styled<StyledPropsT>(
   'div',
-  ({$theme: {direction, sizing}}) => ({
+  ({ $theme: { direction, sizing } }) => ({
     alignSelf: direction === 'rtl' ? 'flex-end' : 'flex-start',
     display: 'flex',
     flexDirection: 'column',
-    ...(direction === 'rtl'
-      ? {marginRight: sizing.scale600}
-      : {marginLeft: sizing.scale600}),
-  }),
+    ...(direction === 'rtl' ? { marginRight: sizing.scale600 } : { marginLeft: sizing.scale600 }),
+  })
 );
 
-export const StyledProfileTitle = styled<StyledPropsT>('h6', ({$theme}) => ({
+export const StyledProfileTitle = styled<StyledPropsT>('h6', ({ $theme }) => ({
   ...$theme.typography.font350,
   color: $theme.colors.contentPrimary,
   marginTop: 0,
@@ -210,7 +193,7 @@ export const StyledProfileTitle = styled<StyledPropsT>('h6', ({$theme}) => ({
   marginRight: 0,
 }));
 
-export const StyledProfileSubtitle = styled<StyledPropsT>('p', ({$theme}) => ({
+export const StyledProfileSubtitle = styled<StyledPropsT>('p', ({ $theme }) => ({
   ...$theme.typography.font200,
   color: $theme.colors.contentPrimary,
   marginTop: 0,
@@ -219,7 +202,7 @@ export const StyledProfileSubtitle = styled<StyledPropsT>('p', ({$theme}) => ({
   marginRight: 0,
 }));
 
-export const StyledProfileBody = styled<StyledPropsT>('p', ({$theme}) => ({
+export const StyledProfileBody = styled<StyledPropsT>('p', ({ $theme }) => ({
   ...$theme.typography.font100,
   color: $theme.colors.contentPrimary,
   marginTop: 0,

package/menu/types.js.flow

@@ -7,33 +7,32 @@ LICENSE file in the root directory of this source tree.
 // @flow
 
 import * as React from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
-import {STATE_CHANGE_TYPES, OPTION_LIST_SIZE} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { STATE_CHANGE_TYPES, OPTION_LIST_SIZE } from './constants.js';
 
-export type ItemT = *;
+// flowlint-next-line unclear-type:off
+export type ItemT = any;
 export type ArrayItemsT = $ReadOnlyArray<ItemT>;
-export type GroupedItemsT = {__ungrouped: ArrayItemsT, [string]: ArrayItemsT};
+export type GroupedItemsT = { __ungrouped: ArrayItemsT, [string]: ArrayItemsT };
 export type ItemsT = ArrayItemsT | GroupedItemsT;
 
 export type GetItemLabelFnT = (item: ItemT) => React.Node;
 
-export type GetProfileItemLabelsFnT = (
-  item: ItemT,
-) => {
+export type GetProfileItemLabelsFnT = (item: ItemT) => {
   title?: string,
   subtitle?: string,
   body?: string,
 };
 
 export type GetProfileItemImgFnT = (
-  item: ItemT,
-) => string | React.ComponentType<*>;
+  item: ItemT // flowlint-next-line unclear-type:off
+) => string | React.ComponentType<any>;
 
 export type GetProfileItemImgTextFnT = (item: ItemT) => string;
 
-export type SetRootRefFnT = (ref: React$ElementRef<*>) => void;
+export type SetRootRefFnT = (ref: React.ElementRef<typeof HTMLElement>) => void;
 
-export type RootRefT = React$ElementRef<*>;
+export type RootRefT = { current: null | HTMLElement };
 
 export type OnItemSelectFnT = ({
   item: ItemT,
@@ -53,7 +52,7 @@ export type ProfileOverridesT = {
 
 export type RenderItemPropsT = {
   disabled?: boolean,
-  ref?: React$ElementRef<*>,
+  ref?: React.ElementRef<typeof HTMLElement>,
   id?: ?string,
   isFocused?: boolean,
   // indicates when the item is visually focused
@@ -63,15 +62,12 @@ export type RenderItemPropsT = {
   resetMenu?: () => mixed,
 };
 
-export type GetRequiredItemPropsFnT = (
-  item: ItemT,
-  index: number,
-) => $Shape<RenderItemPropsT>;
+export type GetRequiredItemPropsFnT = (item: ItemT, index: number) => $Shape<RenderItemPropsT>;
 
 export type StateReducerFnT = (
   changeType: ?$Keys<typeof STATE_CHANGE_TYPES>,
   changes: StatefulContainerStateT,
-  currentState: StatefulContainerStateT,
+  currentState: StatefulContainerStateT
 ) => StatefulContainerStateT;
 
 export type StatefulContainerStateT = {
@@ -123,21 +119,21 @@ export type StatefulContainerPropsT = {
   /** Ref for the menu container element. Used to capture key events for navigation */
   rootRef?: RootRefT,
   /** Node for menu's keyboard listener. Default is null and keyboard handlers will listen on menu root. */
-  keyboardControlNode: React$ElementRef<*>,
+  keyboardControlNode: { current: HTMLElement | null },
   /** whether has keyboard type-ahead function */
   typeAhead: boolean,
   /** Child as function pattern. */
-  children: RenderPropsT => React.Node,
-  addMenuToNesting?: (ref: {current: HTMLElement | null}) => void,
-  removeMenuFromNesting?: (ref: {current: HTMLElement | null}) => void,
-  getParentMenu?: (ref: {current: HTMLElement | null}) => ?{
+  children: (RenderPropsT) => React.Node,
+  addMenuToNesting?: (ref: { current: HTMLElement | null }) => void,
+  removeMenuFromNesting?: (ref: { current: HTMLElement | null }) => void,
+  getParentMenu?: (ref: { current: HTMLElement | null }) => ?{
     current: HTMLElement | null,
   },
-  getChildMenu?: (ref: {current: HTMLElement | null}) => ?{
+  getChildMenu?: (ref: { current: HTMLElement | null }) => ?{
     current: HTMLElement | null,
   },
   nestedMenuHoverIndex?: number,
-  isNestedMenuVisible?: (ref: {current: HTMLElement | null}) => boolean,
+  isNestedMenuVisible?: (ref: { current: HTMLElement | null }) => boolean,
   forceHighlight: boolean,
 };
 
@@ -170,7 +166,7 @@ export type SharedStatelessPropsT = {
    * bindings to work properly. Every rendered item should call this.
    */
   /** Passed to the top level menu element. */
-  ariaLabel?: string,
+  'aria-label'?: string,
   getRequiredItemProps?: GetRequiredItemPropsFnT,
   isFocused?: boolean,
   handleMouseLeave?: (event: SyntheticMouseEvent<HTMLElement>) => mixed,
@@ -206,28 +202,26 @@ export type StatefulMenuPropsT = {
   /** Ref for the menu container element. Used to capture key events for navigation */
   rootRef?: RootRefT,
   /** Child as function pattern. */
-  children?: RenderPropsT => React.Node,
+  children?: (RenderPropsT) => React.Node,
   /** whether has keyboard type-ahead function */
   typeAhead?: boolean,
-  addMenuToNesting?: (ref: {current: HTMLElement | null}) => void,
-  removeMenuFromNesting?: (ref: {current: HTMLElement | null}) => void,
-  getParentMenu?: (ref: {current: HTMLElement | null}) => ?{
+  addMenuToNesting?: (ref: { current: HTMLElement | null }) => void,
+  removeMenuFromNesting?: (ref: { current: HTMLElement | null }) => void,
+  getParentMenu?: (ref: { current: HTMLElement | null }) => ?{
     current: HTMLElement | null,
   },
-  getChildMenu?: (ref: {current: HTMLElement | null}) => ?{
+  getChildMenu?: (ref: { current: HTMLElement | null }) => ?{
     current: HTMLElement | null,
   },
   nestedMenuHoverIndex?: number,
-  isNestedMenuVisible?: (ref: {current: HTMLElement | null}) => boolean,
+  isNestedMenuVisible?: (ref: { current: HTMLElement | null }) => boolean,
 } & MenuPropsT;
 
-export type StatefulMenuProfilePropsT = StatefulContainerPropsT &
-  MenuProfilePropsT;
+export type StatefulMenuProfilePropsT = StatefulContainerPropsT & MenuProfilePropsT;
 
 export type StatelessMenuPropsT = SharedStatelessPropsT & MenuPropsT;
 
-export type StatelessMenuProfilePropsT = SharedStatelessPropsT &
-  MenuProfilePropsT;
+export type StatelessMenuProfilePropsT = SharedStatelessPropsT & MenuProfilePropsT;
 
 export type OptionListPropsT = {
   /** Item to parse and render. */
@@ -298,7 +292,7 @@ export type OptionProfilePropsT = {
   renderAll?: boolean,
 };
 
-export type NestedMenuRefT = {current: HTMLElement | null};
+export type NestedMenuRefT = { current: HTMLElement | null };
 export type NestedMenuContextT = {|
   addMenuToNesting: (ref: NestedMenuRefT) => void,
   removeMenuFromNesting: (ref: NestedMenuRefT) => void,

package/menu/utils.js.flow

@@ -22,7 +22,7 @@ export function scrollItemIntoView(
   parent: HTMLElement,
   isFirst?: boolean,
   isLast?: boolean,
-  scrollAlignInView?: 'auto' | 'center' = 'auto',
+  scrollAlignInView?: 'auto' | 'center' = 'auto'
 ) {
   if (!child) return;
 

package/modal/close-icon.js.flow

@@ -14,14 +14,10 @@ export function CloseIcon() {
       width="10"
       height="10"
       viewBox="0 0 10 10"
-      style={{stroke: 'currentColor'}}
+      style={{ stroke: 'currentColor' }}
       xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-        d="M9 1L5 5M1 9L5 5M5 5L1 1M5 5L9 9"
-        strokeWidth="2"
-        strokeLinecap="round"
-      />
+      <path d="M9 1L5 5M1 9L5 5M5 5L1 1M5 5L9 9" strokeWidth="2" strokeLinecap="round" />
     </svg>
   );
 }

package/modal/focus-once.js.flow

@@ -18,7 +18,7 @@ type Props = {
 export default function FocusOnce(props: Props) {
   const [tabIndex, setTabIndex] = React.useState('0');
   const child = React.Children.only(props.children);
-  return React.cloneElement(child, {tabIndex, onBlur: () => setTabIndex(null)});
+  return React.cloneElement(child, { tabIndex, onBlur: () => setTabIndex(null) });
 }
 
 declare var __DEV__: boolean;

package/modal/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 Modal} from './modal.js';
-export {default as ModalButton} from './modal-button.js';
-export {default as FocusOnce} from './focus-once.js';
-export {SIZE, ROLE, CLOSE_SOURCE} from './constants.js';
+export { default as Modal } from './modal.js';
+export { default as ModalButton } from './modal-button.js';
+export { default as FocusOnce } from './focus-once.js';
+export { SIZE, ROLE, CLOSE_SOURCE } from './constants.js';
 export {
   Root as StyledRoot,
   Backdrop as StyledBackdrop,

package/modal/modal-button.js

@@ -34,11 +34,16 @@ var overrides = {
   }
 };
 var ModalButton = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  return /*#__PURE__*/React.createElement(_index.Button, _extends({
-    ref: ref
-  }, props, {
-    overrides: (0, _overrides.mergeOverrides)(overrides, props.overrides)
-  }));
+  return (
+    /*#__PURE__*/
+    //$FlowExpectedError[cannot-spread-inexact]
+    React.createElement(_index.Button, _extends({
+      ref: ref
+    }, props, {
+      overrides: (0, _overrides.mergeOverrides)(overrides, props.overrides)
+    }))
+  );
 });
+ModalButton.displayName = 'ModalButton';
 var _default = ModalButton;
 exports.default = _default;

package/modal/modal-button.js.flow

@@ -6,16 +6,15 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {Button} from '../button/index.js';
-import type {ButtonPropsT} from '../button/types.js';
-import {mergeOverrides} from '../helpers/overrides.js';
+import { Button } from '../button/index.js';
+import type { ButtonPropsT } from '../button/types.js';
+import { mergeOverrides } from '../helpers/overrides.js';
 
 // ModalButtons should have some margin pre-applied
 const overrides = {
   BaseButton: {
-    style: ({$theme}) => {
-      const marginInlineEnd: string =
-        $theme.direction !== 'rtl' ? 'marginRight' : 'marginLeft';
+    style: ({ $theme }) => {
+      const marginInlineEnd: string = $theme.direction !== 'rtl' ? 'marginRight' : 'marginLeft';
       return {
         ':not(:last-child)': {
           [marginInlineEnd]: $theme.sizing.scale500,
@@ -25,15 +24,11 @@ const overrides = {
   },
 };
 
-const ModalButton = React.forwardRef<ButtonPropsT, HTMLElement>(
-  (props, ref) => (
-    <Button
-      ref={ref}
-      {...props}
-      overrides={mergeOverrides(overrides, props.overrides)}
-    />
-  ),
-);
+const ModalButton = React.forwardRef<ButtonPropsT, HTMLElement>((props, ref) => (
+  //$FlowExpectedError[cannot-spread-inexact]
+  <Button ref={ref} {...props} overrides={mergeOverrides(overrides, props.overrides)} />
+));
+ModalButton.displayName = 'ModalButton';
 
 export default ModalButton;
 

package/modal/modal.js

@@ -298,7 +298,7 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       if (mountNode) {
         return mountNode;
       } // Flow thinks body could be null (cast through any)
-      // eslint-disable-next-line flowtype/no-weak-types
+      // flowlint-next-line unclear-type:off
 
 
       return document.body;
@@ -370,11 +370,9 @@ var Modal = /*#__PURE__*/function (_React$Component) {
       if (autofocus === false && process.env.NODE_ENV !== "production") {
         console.warn("The prop \"autofocus\" is deprecated in favor of \"autoFocus\" to be consistent across the project.\n        The property \"autofocus\" will be removed in a future major version.");
       } // Handles backdrop click when `unstable_ModalBackdropScroll` is set to true
-      // $FlowFixMe
 
 
       if (dialogContainerProps.ref) {
-        // $FlowFixMe
         this._refs.DialogContainer = dialogContainerProps.ref;
       }