baseui 10.10.0 → 10.12.0

package/progress-steps/types.js.flow

@@ -7,8 +7,8 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import type {Node} from 'react';
-import type {OverrideT} from '../helpers/overrides.js';
+import type { Node } from 'react';
+import type { OverrideT } from '../helpers/overrides.js';
 
 export type ProgressStepsOverridesT = {
   Root?: OverrideT,

package/radio/index.js.flow

@@ -6,9 +6,9 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 
-export {default as StatefulRadioGroup} from './stateful-radiogroup.js';
-export {default as StatefulContainer} from './stateful-radiogroup-container.js';
-export {default as RadioGroup} from './radiogroup.js';
+export { default as StatefulRadioGroup } from './stateful-radiogroup.js';
+export { default as StatefulContainer } from './stateful-radiogroup-container.js';
+export { default as RadioGroup } from './radiogroup.js';
 // Styled elements
 export {
   Root as StyledRoot,
@@ -19,9 +19,9 @@ export {
   RadioMarkOuter as StyledRadioMarkOuter,
   RadioGroupRoot as StyledRadioGroupRoot,
 } from './styled-components.js';
-export {default as Radio} from './radio.js';
+export { default as Radio } from './radio.js';
 export type * from './types.js';
-export {ALIGN} from './constants.js';
+export { ALIGN } from './constants.js';
 
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;

package/radio/radio.js

@@ -124,7 +124,9 @@ var Radio = /*#__PURE__*/function (_React$Component) {
   _createClass(Radio, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      if (this.props.autoFocus && this.props.inputRef.current) {
+      var _this$props$inputRef;
+
+      if (this.props.autoFocus && (_this$props$inputRef = this.props.inputRef) !== null && _this$props$inputRef !== void 0 && _this$props$inputRef.current) {
         this.props.inputRef.current.focus();
       }
 

package/radio/radio.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 
 import {
   Root as StyledRoot,
@@ -18,7 +18,7 @@ import {
   RadioMarkOuter as StyledRadioMarkOuter,
   Description as StyledDescription,
 } from './styled-components.js';
-import type {RadioPropsT, RadioStateT} from './types.js';
+import type { RadioPropsT, RadioStateT } from './types.js';
 
 function isLabelTopLeft(labelPlacement) {
   return labelPlacement === 'top' || labelPlacement === 'left';
@@ -28,16 +28,16 @@ function isLabelBottomRight(labelPlacement) {
   return labelPlacement === 'bottom' || labelPlacement === 'right';
 }
 
-const stopPropagation = e => e.stopPropagation();
+const stopPropagation = (e) => e.stopPropagation();
 
 class Radio extends React.Component<RadioPropsT, RadioStateT> {
-  static defaultProps: $Shape<RadioPropsT> = {
+  static defaultProps = {
     overrides: {},
     containsInteractiveElement: false,
     checked: false,
     disabled: false,
     autoFocus: false,
-    inputRef: React.createRef(),
+    inputRef: React.createRef<HTMLInputElement>(),
     align: 'vertical',
     isError: false,
     error: false,
@@ -56,52 +56,49 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
   };
 
   componentDidMount() {
-    if (this.props.autoFocus && this.props.inputRef.current) {
+    if (this.props.autoFocus && this.props.inputRef?.current) {
       this.props.inputRef.current.focus();
     }
     if (__DEV__ && this.props.isError) {
       console.warn(
-        'baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.',
+        'baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.'
       );
     }
   }
 
   onMouseEnter = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isHovered: true});
+    this.setState({ isHovered: true });
     this.props.onMouseEnter && this.props.onMouseEnter(e);
   };
 
   onMouseLeave = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isHovered: false});
+    this.setState({ isHovered: false });
     this.props.onMouseLeave && this.props.onMouseLeave(e);
   };
 
   onMouseDown = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isActive: true});
+    this.setState({ isActive: true });
     this.props.onMouseDown && this.props.onMouseDown(e);
   };
 
   onMouseUp = (e: SyntheticInputEvent<HTMLInputElement>) => {
-    this.setState({isActive: false});
+    this.setState({ isActive: false });
     this.props.onMouseUp && this.props.onMouseUp(e);
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [Root, rootProps] = getOverrides(overrides.Root, StyledRoot);
     const [Label, labelProps] = getOverrides(overrides.Label, StyledLabel);
     const [Input, inputProps] = getOverrides(overrides.Input, StyledInput);
-    const [Description, descriptionProps] = getOverrides(
-      overrides.Description,
-      StyledDescription,
-    );
+    const [Description, descriptionProps] = getOverrides(overrides.Description, StyledDescription);
     const [RadioMarkInner, radioMarkInnerProps] = getOverrides(
       overrides.RadioMarkInner,
-      StyledRadioMarkInner,
+      StyledRadioMarkInner
     );
     const [RadioMarkOuter, radioMarkOuterProps] = getOverrides(
       overrides.RadioMarkOuter,
-      StyledRadioMarkOuter,
+      StyledRadioMarkOuter
     );
 
     const sharedProps = {
@@ -125,7 +122,7 @@ class Radio extends React.Component<RadioPropsT, RadioStateT> {
         {this.props.containsInteractiveElement ? (
           // Prevents the event from bubbling up to the label and moving focus to the radio button
           // eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions
-          <div onClick={e => e.preventDefault()}>{this.props.children}</div>
+          <div onClick={(e) => e.preventDefault()}>{this.props.children}</div>
         ) : (
           this.props.children
         )}

package/radio/radiogroup.js

@@ -134,7 +134,7 @@ var StatelessRadioGroup = /*#__PURE__*/function (_React$Component) {
       if (process.env.NODE_ENV !== "production") {
         var overrideKeys = Object.keys(overrides); // TODO(v11)
 
-        if (overrideKeys.length && !overrideKeys.includes('RadioGroupRoot')) {
+        if (Boolean(overrideKeys.length) && !overrideKeys.includes('RadioGroupRoot')) {
           // eslint-disable-next-line no-console
           console.warn("All overrides beside 'RadioGroupRoot' will be deprecated in the next major version update.\n          Pass other overrides to the 'Radio' children instead.\n        ");
         }

package/radio/radiogroup.js.flow

@@ -7,11 +7,11 @@ LICENSE file in the root directory of this source tree.
 // @flow
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
+import { getOverrides } from '../helpers/overrides.js';
 
-import {RadioGroupRoot as StyledRadioGroupRoot} from './styled-components.js';
-import type {PropsT, DefaultPropsT, StatelessStateT} from './types.js';
-import {isFocusVisible} from '../utils/focusVisible.js';
+import { RadioGroupRoot as StyledRadioGroupRoot } from './styled-components.js';
+import type { PropsT, DefaultPropsT, StatelessStateT } from './types.js';
+import { isFocusVisible } from '../utils/focusVisible.js';
 
 class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
   static defaultProps: DefaultPropsT = {
@@ -32,49 +32,43 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
     overrides: {},
   };
 
-  state = {isFocusVisible: false, focusedRadioIndex: -1};
+  state = { isFocusVisible: false, focusedRadioIndex: -1 };
 
   componentDidMount() {
     if (__DEV__ && this.props.isError) {
       console.warn(
-        'baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.',
+        'baseui:Radio Property "isError" will be removed in the next major version. Use "error" property instead.'
       );
     }
   }
 
-  handleFocus = (
-    event: SyntheticInputEvent<HTMLInputElement>,
-    index: number,
-  ) => {
+  handleFocus = (event: SyntheticInputEvent<HTMLInputElement>, index: number) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisible: true});
+      this.setState({ isFocusVisible: true });
     }
-    this.setState({focusedRadioIndex: index});
+    this.setState({ focusedRadioIndex: index });
     this.props.onFocus && this.props.onFocus(event);
   };
 
-  handleBlur = (
-    event: SyntheticInputEvent<HTMLInputElement>,
-    index: number,
-  ) => {
+  handleBlur = (event: SyntheticInputEvent<HTMLInputElement>, index: number) => {
     if (this.state.isFocusVisible !== false) {
-      this.setState({isFocusVisible: false});
+      this.setState({ isFocusVisible: false });
     }
-    this.setState({focusedRadioIndex: -1});
+    this.setState({ focusedRadioIndex: -1 });
     this.props.onBlur && this.props.onBlur(event);
   };
 
   render() {
-    const {overrides = {}} = this.props;
+    const { overrides = {} } = this.props;
     const [RadioGroupRoot, radioGroupRootProps] = getOverrides(
       overrides.RadioGroupRoot,
-      StyledRadioGroupRoot,
+      StyledRadioGroupRoot
     );
 
     if (__DEV__) {
       const overrideKeys = Object.keys(overrides);
       // TODO(v11)
-      if (overrideKeys.length && !overrideKeys.includes('RadioGroupRoot')) {
+      if (Boolean(overrideKeys.length) && !overrideKeys.includes('RadioGroupRoot')) {
         // eslint-disable-next-line no-console
         console.warn(`All overrides beside 'RadioGroupRoot' will be deprecated in the next major version update.
           Pass other overrides to the 'Radio' children instead.
@@ -112,19 +106,16 @@ class StatelessRadioGroup extends React.Component<PropsT, StatelessStateT> {
             error: this.props.error,
             isFocused: this.state.focusedRadioIndex === index,
             isFocusVisible: this.state.isFocusVisible,
-            tabIndex:
-              (index === 0 && !this.props.value) || checked ? '0' : '-1',
+            tabIndex: (index === 0 && !this.props.value) || checked ? '0' : '-1',
             labelPlacement: this.props.labelPlacement,
             name: this.props.name,
-            onBlur: (e: SyntheticInputEvent<HTMLInputElement>) =>
-              this.handleBlur(e, index),
-            onFocus: (e: SyntheticInputEvent<HTMLInputElement>) =>
-              this.handleFocus(e, index),
+            onBlur: (e: SyntheticInputEvent<HTMLInputElement>) => this.handleBlur(e, index),
+            onFocus: (e: SyntheticInputEvent<HTMLInputElement>) => this.handleFocus(e, index),
             onChange: this.props.onChange,
             onMouseEnter: this.props.onMouseEnter,
             onMouseLeave: this.props.onMouseLeave,
             // will need to remove overrides pass-through on next major version
-            overrides: {...this.props.overrides, ...child.props.overrides},
+            overrides: { ...this.props.overrides, ...child.props.overrides },
           });
         })}
       </RadioGroupRoot>

package/radio/stateful-radiogroup-container.js.flow

@@ -6,7 +6,7 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_TYPE} from './constants.js';
+import { STATE_TYPE } from './constants.js';
 import type {
   StatefulContainerPropsT,
   StateReducerT,
@@ -16,10 +16,7 @@ import type {
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
-class StatefulRadioGroupContainer extends React.Component<
-  StatefulContainerPropsT,
-  StateT,
-> {
+class StatefulRadioGroupContainer extends React.Component<StatefulContainerPropsT, StateT> {
   static defaultProps: DefaultStatefulPropsT = {
     initialState: {
       value: '',
@@ -30,7 +27,7 @@ class StatefulRadioGroupContainer extends React.Component<
 
   constructor(props: StatefulContainerPropsT) {
     super(props);
-    const {initialState} = this.props;
+    const { initialState } = this.props;
     this.state = {
       ...initialState,
     };
@@ -38,15 +35,15 @@ class StatefulRadioGroupContainer extends React.Component<
 
   onChange = (e: SyntheticInputEvent<HTMLInputElement>) => {
     this.stateReducer(STATE_TYPE.change, e);
-    const {onChange} = this.props;
+    const { onChange } = this.props;
     onChange && onChange(e);
   };
 
   stateReducer = (type: string, e: SyntheticInputEvent<HTMLInputElement>) => {
     let nextState = {};
-    const {stateReducer} = this.props;
+    const { stateReducer } = this.props;
     if (type === STATE_TYPE.change) {
-      nextState = {value: e.target.value};
+      nextState = { value: e.target.value };
     }
     const newState = stateReducer(type, nextState, this.state, e);
     this.setState(newState);
@@ -59,7 +56,7 @@ class StatefulRadioGroupContainer extends React.Component<
       stateReducer, // eslint-disable-line no-unused-vars
       ...restProps
     } = this.props;
-    const {onChange} = this;
+    const { onChange } = this;
     return children({
       ...restProps,
       value: this.state.value,

package/radio/stateful-radiogroup.js.flow

@@ -10,16 +10,14 @@ import * as React from 'react';
 import StatefulContainer from './stateful-radiogroup-container.js';
 // eslint-disable-next-line import/no-named-default
 import RadioGroup from './radiogroup.js';
-import type {PropsT, StatefulRadioGroupPropsT} from './types.js';
+import type { PropsT, StatefulRadioGroupPropsT } from './types.js';
 // Styled elements
 
-const StatefulRadioGroup = function(props: StatefulRadioGroupPropsT) {
-  const {children, ...restProps} = props;
+const StatefulRadioGroup = function (props: StatefulRadioGroupPropsT) {
+  const { children, ...restProps } = props;
   return (
     <StatefulContainer {...restProps}>
-      {(childrenProps: PropsT) => (
-        <RadioGroup {...childrenProps}>{children}</RadioGroup>
-      )}
+      {(childrenProps: PropsT) => <RadioGroup {...childrenProps}>{children}</RadioGroup>}
     </StatefulContainer>
   );
 };

package/radio/styled-components.js.flow

@@ -5,8 +5,8 @@ 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 type {StylePropsT} from './types.js';
+import { styled } from '../styles/index.js';
+import type { StylePropsT } from './types.js';
 
 const DEFAULT = 0;
 const HOVERED = 1;
@@ -21,7 +21,7 @@ function getState(props): State {
 
 function getOuterColor(props) {
   const {
-    $theme: {colors},
+    $theme: { colors },
     $disabled,
     $checked,
     $isFocusVisible,
@@ -59,7 +59,7 @@ function getOuterColor(props) {
 }
 
 function getInnerColor(props) {
-  const {colors} = props.$theme;
+  const { colors } = props.$theme;
 
   if (props.$disabled) {
     return colors.tickMarkFillDisabled;
@@ -91,7 +91,7 @@ function getInnerColor(props) {
 }
 
 function getLabelPadding(props) {
-  const {$labelPlacement = '', $theme} = props;
+  const { $labelPlacement = '', $theme } = props;
   let paddingDirection;
   switch ($labelPlacement) {
     case 'top':
@@ -108,24 +108,24 @@ function getLabelPadding(props) {
       paddingDirection = $theme.direction === 'rtl' ? 'Right' : 'Left';
       break;
   }
-  const {sizing} = $theme;
-  const {scale300} = sizing;
+  const { sizing } = $theme;
+  const { scale300 } = sizing;
   return {
     [`padding${paddingDirection}`]: scale300,
   };
 }
 
 function getLabelColor(props) {
-  const {$disabled, $theme} = props;
-  const {colors} = $theme;
+  const { $disabled, $theme } = props;
+  const { colors } = $theme;
   return $disabled ? colors.contentSecondary : colors.contentPrimary;
 }
 
 export const RadioGroupRoot = styled<StylePropsT>(
   'div',
   // $FlowFixMe - suppressing due to webkit property
-  props => {
-    const {$disabled, $align} = props;
+  (props) => {
+    const { $disabled, $align } = props;
     return {
       display: 'flex',
       flexWrap: 'wrap',
@@ -134,20 +134,17 @@ export const RadioGroupRoot = styled<StylePropsT>(
       cursor: $disabled ? 'not-allowed' : 'pointer',
       '-webkit-tap-highlight-color': 'transparent',
     };
-  },
+  }
 );
 
-export const Root = styled<StylePropsT>('label', props => {
-  const {$disabled, $hasDescription, $labelPlacement, $theme, $align} = props;
-  const {sizing} = $theme;
+export const Root = styled<StylePropsT>('label', (props) => {
+  const { $disabled, $hasDescription, $labelPlacement, $theme, $align } = props;
+  const { sizing } = $theme;
   const isHorizontal = $align === 'horizontal';
 
   const marginAfter = $theme.direction === 'rtl' ? 'Left' : 'Right';
   return ({
-    flexDirection:
-      $labelPlacement === 'top' || $labelPlacement === 'bottom'
-        ? 'column'
-        : 'row',
+    flexDirection: $labelPlacement === 'top' || $labelPlacement === 'bottom' ? 'column' : 'row',
     display: 'flex',
     alignItems: 'center',
     cursor: $disabled ? 'not-allowed' : 'pointer',
@@ -157,8 +154,8 @@ export const Root = styled<StylePropsT>('label', props => {
   }: {});
 });
 
-export const RadioMarkInner = styled<StylePropsT>('div', props => {
-  const {animation, sizing} = props.$theme;
+export const RadioMarkInner = styled<StylePropsT>('div', (props) => {
+  const { animation, sizing } = props.$theme;
 
   return {
     backgroundColor: getInnerColor(props),
@@ -173,8 +170,8 @@ export const RadioMarkInner = styled<StylePropsT>('div', props => {
   };
 });
 
-export const RadioMarkOuter = styled<StylePropsT>('div', props => {
-  const {animation, sizing} = props.$theme;
+export const RadioMarkOuter = styled<StylePropsT>('div', (props) => {
+  const { animation, sizing } = props.$theme;
 
   return ({
     alignItems: 'center',
@@ -184,9 +181,7 @@ export const RadioMarkOuter = styled<StylePropsT>('div', props => {
     borderBottomRightRadius: '50%',
     borderBottomLeftRadius: '50%',
     boxShadow:
-      props.$isFocusVisible && props.$checked
-        ? `0 0 0 3px ${props.$theme.colors.accent}`
-        : 'none',
+      props.$isFocusVisible && props.$checked ? `0 0 0 3px ${props.$theme.colors.accent}` : 'none',
     display: 'flex',
     height: sizing.scale700,
     justifyContent: 'center',
@@ -203,9 +198,9 @@ export const RadioMarkOuter = styled<StylePropsT>('div', props => {
   }: {});
 });
 
-export const Label = styled<StylePropsT>('div', props => {
+export const Label = styled<StylePropsT>('div', (props) => {
   const {
-    $theme: {typography},
+    $theme: { typography },
   } = props;
   return {
     verticalAlign: 'middle',
@@ -231,8 +226,8 @@ export const Input = styled('input', {
   position: 'absolute',
 });
 
-export const Description = styled<StylePropsT>('div', props => {
-  const {$theme, $align} = props;
+export const Description = styled<StylePropsT>('div', (props) => {
+  const { $theme, $align } = props;
   const isHorizontal = $align === 'horizontal';
   const marginBefore = $theme.direction === 'rtl' ? 'Right' : 'Left';
   const marginAfter = $theme.direction === 'rtl' ? 'Left' : 'Right';
@@ -240,8 +235,7 @@ export const Description = styled<StylePropsT>('div', props => {
     ...$theme.typography.ParagraphSmall,
     color: $theme.colors.contentSecondary,
     cursor: 'auto',
-    [`margin${marginBefore}`]:
-      $align === 'horizontal' ? null : $theme.sizing.scale900,
+    [`margin${marginBefore}`]: $align === 'horizontal' ? null : $theme.sizing.scale900,
     [`margin${marginAfter}`]: isHorizontal ? $theme.sizing.scale200 : null,
     maxWidth: '240px',
   };

package/radio/types.js.flow

@@ -8,11 +8,12 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import type {OverrideT} from '../helpers/overrides.js';
-import {ALIGN} from './constants.js';
+import type { OverrideT } from '../helpers/overrides.js';
+import { ALIGN } from './constants.js';
 
 export type LabelPlacementT = 'top' | 'right' | 'bottom' | 'left';
 export type AlignT = $Keys<typeof ALIGN>;
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type RadioOverridesT = {
   RadioMarkInner?: OverrideT,
@@ -113,7 +114,7 @@ export type RadioPropsT = {
   /** Disable the checkbox from being changed. */
   disabled?: boolean,
   /** Used to get a ref to the input element. Useful for programmatically focusing the input */
-  inputRef: React.ElementRef<*>,
+  inputRef?: ReactRefT<HTMLInputElement>,
   /** Renders checkbox in errored state. */
   error?: boolean,
   /** You should use the error prop instead. */
@@ -158,7 +159,7 @@ export type StateReducerT = (
   stateType: string,
   nextState: StateT,
   currentState: StateT,
-  event: SyntheticInputEvent<HTMLInputElement>,
+  event: SyntheticInputEvent<HTMLInputElement>
 ) => StateT;
 
 export type StatelessStateT = {

package/rating/emoticon-rating.js

@@ -139,7 +139,7 @@ var EmoticonRating = /*#__PURE__*/function (_React$Component) {
         refs.push(starRef);
         ratings.push( /*#__PURE__*/React.createElement(Emoticon, _extends({
           key: x,
-          role: "radio" // eslint-disable-next-line flowtype/no-weak-types
+          role: "radio" // flowlint-next-line unclear-type:off
           ,
           ref: starRef,
           tabIndex: isFocusable ? '0' : '-1',