baseui 10.10.0 → 10.11.0

package/input/base-input.js.flow

@@ -9,8 +9,8 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from 'react';
 
-import {getOverrides} from '../helpers/overrides.js';
-import {ADJOINED, SIZE, CUSTOM_INPUT_TYPE} from './constants.js';
+import { getOverrides } from '../helpers/overrides.js';
+import { ADJOINED, SIZE, CUSTOM_INPUT_TYPE } from './constants.js';
 import {
   InputContainer as StyledInputContainer,
   Input as StyledInput,
@@ -18,19 +18,16 @@ import {
   StyledClearIconContainer,
   StyledMaskToggleButton,
 } from './styled-components.js';
-import type {BaseInputPropsT, InternalStateT} from './types.js';
-import {getSharedProps} from './utils.js';
+import type { BaseInputPropsT, InternalStateT } from './types.js';
+import { getSharedProps } from './utils.js';
 import Hide from '../icon/hide.js';
 import Show from '../icon/show.js';
 import createEvent from '../utils/create-event.js';
-import {isFocusVisible, forkFocus, forkBlur} from '../utils/focusVisible.js';
+import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 const NullComponent = () => null;
 
-class BaseInput<T: EventTarget> extends React.Component<
-  BaseInputPropsT<T>,
-  InternalStateT,
-> {
+class BaseInput<T: EventTarget> extends React.Component<BaseInputPropsT<T>, InternalStateT> {
   static defaultProps = {
     'aria-activedescendant': null,
     'aria-autocomplete': null,
@@ -66,7 +63,7 @@ class BaseInput<T: EventTarget> extends React.Component<
     type: 'text',
   };
 
-  // eslint-disable-next-line flowtype/no-weak-types
+  // flowlint-next-line unclear-type:off
   inputRef = this.props.inputRef || React.createRef<any>();
 
   state = {
@@ -78,7 +75,7 @@ class BaseInput<T: EventTarget> extends React.Component<
   };
 
   componentDidMount() {
-    const {autoFocus, clearable} = this.props;
+    const { autoFocus, clearable } = this.props;
     if (this.inputRef.current) {
       if (autoFocus) {
         this.inputRef.current.focus();
@@ -90,7 +87,7 @@ class BaseInput<T: EventTarget> extends React.Component<
   }
 
   componentWillUnmount() {
-    const {clearable} = this.props;
+    const { clearable } = this.props;
     if (clearable && this.inputRef.current) {
       this.inputRef.current.removeEventListener('keydown', this.onInputKeyDown);
     }
@@ -104,7 +101,7 @@ class BaseInput<T: EventTarget> extends React.Component<
         this.props.type === CUSTOM_INPUT_TYPE.textarea
           ? window.HTMLTextAreaElement.prototype
           : window.HTMLInputElement.prototype,
-        'value',
+        'value'
       );
       if (nativeInputValue) {
         const nativeInputValueSetter = nativeInputValue.set;
@@ -118,11 +115,7 @@ class BaseInput<T: EventTarget> extends React.Component<
   }
 
   onInputKeyDown = (e: KeyboardEvent) => {
-    if (
-      this.props.clearOnEscape &&
-      e.key === 'Escape' &&
-      this.inputRef.current
-    ) {
+    if (this.props.clearOnEscape && e.key === 'Escape' && this.inputRef.current) {
       this.clearValue();
       // prevent event from closing modal or doing something unexpected
       e.stopPropagation();
@@ -136,12 +129,12 @@ class BaseInput<T: EventTarget> extends React.Component<
   };
 
   onFocus = (e: SyntheticFocusEvent<T>) => {
-    this.setState({isFocused: true});
+    this.setState({ isFocused: true });
     this.props.onFocus(e);
   };
 
   onBlur = (e: SyntheticFocusEvent<T>) => {
-    this.setState({isFocused: false});
+    this.setState({ isFocused: false });
     this.props.onBlur(e);
   };
 
@@ -158,13 +151,13 @@ class BaseInput<T: EventTarget> extends React.Component<
 
   handleFocusForMaskToggle = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisibleForMaskToggle: true});
+      this.setState({ isFocusVisibleForMaskToggle: true });
     }
   };
 
   handleBlurForMaskToggle = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisibleForMaskToggle !== false) {
-      this.setState({isFocusVisibleForMaskToggle: false});
+      this.setState({ isFocusVisibleForMaskToggle: false });
     }
   };
 
@@ -173,19 +166,17 @@ class BaseInput<T: EventTarget> extends React.Component<
 
     const [MaskToggleButton, maskToggleButtonProps] = getOverrides(
       this.props.overrides.MaskToggleButton,
-      StyledMaskToggleButton,
+      StyledMaskToggleButton
     );
     const [MaskToggleShowIcon, maskToggleIconShowProps] = getOverrides(
       this.props.overrides.MaskToggleShowIcon,
-      Show,
+      Show
     );
     const [MaskToggleHideIcon, maskToggleIconHideProps] = getOverrides(
       this.props.overrides.MaskToggleHideIcon,
-      Hide,
+      Hide
     );
-    const label = this.state.isMasked
-      ? 'Show password text'
-      : 'Hide password text';
+    const label = this.state.isMasked ? 'Show password text' : 'Hide password text';
     const iconSize = {
       [SIZE.mini]: '12px',
       [SIZE.compact]: '16px',
@@ -197,28 +188,17 @@ class BaseInput<T: EventTarget> extends React.Component<
         $size={this.props.size}
         $isFocusVisible={this.state.isFocusVisibleForMaskToggle}
         aria-label={label}
-        onClick={() => this.setState(state => ({isMasked: !state.isMasked}))}
+        onClick={() => this.setState((state) => ({ isMasked: !state.isMasked }))}
         title={label}
         type="button"
         {...maskToggleButtonProps}
-        onFocus={forkFocus(
-          maskToggleButtonProps,
-          this.handleFocusForMaskToggle,
-        )}
+        onFocus={forkFocus(maskToggleButtonProps, this.handleFocusForMaskToggle)}
         onBlur={forkBlur(maskToggleButtonProps, this.handleBlurForMaskToggle)}
       >
         {this.state.isMasked ? (
-          <MaskToggleShowIcon
-            size={iconSize}
-            title={label}
-            {...maskToggleIconShowProps}
-          />
+          <MaskToggleShowIcon size={iconSize} title={label} {...maskToggleIconShowProps} />
         ) : (
-          <MaskToggleHideIcon
-            size={iconSize}
-            title={label}
-            {...maskToggleIconHideProps}
-          />
+          <MaskToggleHideIcon size={iconSize} title={label} {...maskToggleIconHideProps} />
         )}
       </MaskToggleButton>
     );
@@ -226,18 +206,18 @@ class BaseInput<T: EventTarget> extends React.Component<
 
   handleFocusForClear = (event: SyntheticEvent<>) => {
     if (isFocusVisible(event)) {
-      this.setState({isFocusVisibleForClear: true});
+      this.setState({ isFocusVisibleForClear: true });
     }
   };
 
   handleBlurForClear = (event: SyntheticEvent<>) => {
     if (this.state.isFocusVisibleForClear !== false) {
-      this.setState({isFocusVisibleForClear: false});
+      this.setState({ isFocusVisibleForClear: false });
     }
   };
 
   renderClear() {
-    const {clearable, value, disabled, overrides = {}} = this.props;
+    const { clearable, value, disabled, overrides = {} } = this.props;
     if (
       disabled ||
       !clearable ||
@@ -249,12 +229,9 @@ class BaseInput<T: EventTarget> extends React.Component<
 
     const [ClearIconContainer, clearIconContainerProps] = getOverrides(
       overrides.ClearIconContainer,
-      StyledClearIconContainer,
-    );
-    const [ClearIcon, clearIconProps] = getOverrides(
-      overrides.ClearIcon,
-      StyledClearIcon,
+      StyledClearIconContainer
     );
+    const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, StyledClearIcon);
     const ariaLabel = 'Clear value';
     const sharedProps = getSharedProps(this.props, this.state);
     const iconSize = {
@@ -275,7 +252,7 @@ class BaseInput<T: EventTarget> extends React.Component<
           title={ariaLabel}
           aria-label={ariaLabel}
           onClick={this.onClearIconClick}
-          onKeyDown={event => {
+          onKeyDown={(event) => {
             if (event.key && (event.key === 'Enter' || event.key === ' ')) {
               event.preventDefault();
               this.onClearIconClick();
@@ -315,7 +292,7 @@ class BaseInput<T: EventTarget> extends React.Component<
 
     const [InputContainer, inputContainerProps] = getOverrides(
       InputContainerOverride,
-      StyledInputContainer,
+      StyledInputContainer
     );
     const [Input, inputProps] = getOverrides(InputOverride, StyledInput);
     const [Before, beforeProps] = getOverrides(BeforeOverride, NullComponent);
@@ -360,11 +337,7 @@ class BaseInput<T: EventTarget> extends React.Component<
           min={this.props.min}
           max={this.props.max}
           step={this.props.step}
-          rows={
-            this.props.type === CUSTOM_INPUT_TYPE.textarea
-              ? this.props.rows
-              : null
-          }
+          rows={this.props.type === CUSTOM_INPUT_TYPE.textarea ? this.props.rows : null}
           {...sharedProps}
           {...inputProps}
         >

package/input/index.d.ts

@@ -69,7 +69,7 @@ export interface BaseInputProps<T> {
   rows?: number;
   min?: number;
   max?: number;
-  step?: number;
+  step?: number | 'any';
 }
 
 export interface State {

package/input/index.js.flow

@@ -5,11 +5,11 @@ 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 StatefulInput} from './stateful-input.js';
-export {default as StatefulContainer} from './stateful-container.js';
-export {default as Input} from './input.js';
-export {default as BaseInput} from './base-input.js';
-export {default as MaskedInput} from './masked-input.js';
+export { default as StatefulInput } from './stateful-input.js';
+export { default as StatefulContainer } from './stateful-container.js';
+export { default as Input } from './input.js';
+export { default as BaseInput } from './base-input.js';
+export { default as MaskedInput } from './masked-input.js';
 // Styled elements
 export {
   Root as StyledRoot,
@@ -20,12 +20,7 @@ export {
   Input as StyledInput,
 } from './styled-components.js';
 
-export {
-  STATE_CHANGE_TYPE,
-  ADJOINED,
-  SIZE,
-  CUSTOM_INPUT_TYPE,
-} from './constants.js';
+export { STATE_CHANGE_TYPE, ADJOINED, SIZE, CUSTOM_INPUT_TYPE } from './constants.js';
 export type * from './types.js';
 
 declare var __DEV__: boolean;

package/input/input.js.flow

@@ -6,15 +6,12 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {getOverrides} from '../helpers/overrides.js';
-import type {InputPropsT, InternalStateT, AdjoinedT} from './types.js';
-import {getSharedProps} from './utils.js';
+import { getOverrides } from '../helpers/overrides.js';
+import type { InputPropsT, InternalStateT, AdjoinedT } from './types.js';
+import { getSharedProps } from './utils.js';
 import BaseInput from './base-input.js';
-import {
-  Root as StyledRoot,
-  InputEnhancer as StyledInputEnhancer,
-} from './styled-components.js';
-import {SIZE, ADJOINED, ENHANCER_POSITION} from './constants.js';
+import { Root as StyledRoot, InputEnhancer as StyledInputEnhancer } from './styled-components.js';
+import { SIZE, ADJOINED, ENHANCER_POSITION } from './constants.js';
 
 class Input extends React.Component<InputPropsT, InternalStateT> {
   static defaultProps = {
@@ -42,12 +39,12 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
   };
 
   onFocus = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    this.setState({isFocused: true});
+    this.setState({ isFocused: true });
     this.props.onFocus(e);
   };
 
   onBlur = (e: SyntheticFocusEvent<HTMLInputElement>) => {
-    this.setState({isFocused: false});
+    this.setState({ isFocused: false });
     this.props.onBlur(e);
   };
 
@@ -67,12 +64,9 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
     const [Root, rootProps] = getOverrides(RootOverride, StyledRoot);
     const [StartEnhancer, startEnhancerProps] = getOverrides(
       StartEnhancerOverride,
-      StyledInputEnhancer,
-    );
-    const [EndEnhancer, endEnhancerProps] = getOverrides(
-      EndEnhancerOverride,
-      StyledInputEnhancer,
+      StyledInputEnhancer
     );
+    const [EndEnhancer, endEnhancerProps] = getOverrides(EndEnhancerOverride, StyledInputEnhancer);
 
     const sharedProps = getSharedProps(this.props, this.state);
 
@@ -80,7 +74,7 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
       if (this.props.error && this.props.positive) {
         // eslint-disable-next-line no-console
         console.warn(
-          `[Input] \`error\` and \`positive\` are both set to \`true\`. \`error\` will take precedence but this may not be what you want.`,
+          `[Input] \`error\` and \`positive\` are both set to \`true\`. \`error\` will take precedence but this may not be what you want.`
         );
       }
     }
@@ -99,9 +93,7 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
             {...startEnhancerProps}
             $position={ENHANCER_POSITION.start}
           >
-            {typeof startEnhancer === 'function'
-              ? startEnhancer(sharedProps)
-              : startEnhancer}
+            {typeof startEnhancer === 'function' ? startEnhancer(sharedProps) : startEnhancer}
           </StartEnhancer>
         )}
         <BaseInput
@@ -112,14 +104,8 @@ class Input extends React.Component<InputPropsT, InternalStateT> {
           onBlur={this.onBlur}
         />
         {isEnhancer(endEnhancer) && (
-          <EndEnhancer
-            {...sharedProps}
-            {...endEnhancerProps}
-            $position={ENHANCER_POSITION.end}
-          >
-            {typeof endEnhancer === 'function'
-              ? endEnhancer(sharedProps)
-              : endEnhancer}
+          <EndEnhancer {...sharedProps} {...endEnhancerProps} $position={ENHANCER_POSITION.end}>
+            {typeof endEnhancer === 'function' ? endEnhancer(sharedProps) : endEnhancer}
           </EndEnhancer>
         )}
       </Root>

package/input/masked-input.js

@@ -62,6 +62,7 @@ var MaskOverride = /*#__PURE__*/React.forwardRef(function (_ref, ref) {
     }, props));
   });
 });
+MaskOverride.displayName = 'MaskOverride';
 
 function MaskedInput(_ref2) {
   var mask = _ref2.mask,

package/input/masked-input.js.flow

@@ -10,8 +10,8 @@ import * as React from 'react';
 import InputMask from 'react-input-mask';
 
 import Input from './input.js';
-import {Input as StyledInput} from './styled-components.js';
-import type {MaskedInputPropsT} from './types.js';
+import { Input as StyledInput } from './styled-components.js';
+import type { MaskedInputPropsT } from './types.js';
 
 const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLElement>(
   (
@@ -30,7 +30,7 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLElement>(
       disabled,
       ...restProps
     }: MaskedInputPropsT,
-    ref,
+    ref
   ) => {
     return (
       <InputMask
@@ -41,7 +41,7 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLElement>(
         disabled={disabled}
         {...restProps}
       >
-        {props => (
+        {(props) => (
           <StyledInput
             ref={ref}
             onChange={onChange}
@@ -54,13 +54,14 @@ const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLElement>(
         )}
       </InputMask>
     );
-  },
+  }
 );
+MaskOverride.displayName = 'MaskOverride';
 
 export default function MaskedInput({
   mask,
   maskChar,
-  overrides: {Input: inputOverride = {}, ...restOverrides} = {},
+  overrides: { Input: inputOverride = {}, ...restOverrides } = {},
   ...restProps
 }: MaskedInputPropsT) {
   let componentOverride = MaskOverride;

package/input/stateful-container.js

@@ -91,7 +91,6 @@ var StatefulContainer = /*#__PURE__*/function (_React$Component) {
   _createClass(StatefulContainer, [{
     key: "render",
     value: function render() {
-      // eslint-disable-next-line no-unused-vars
       var _this$props = this.props,
           children = _this$props.children,
           initialState = _this$props.initialState,

package/input/stateful-container.js.flow

@@ -6,19 +6,14 @@ LICENSE file in the root directory of this source tree.
 */
 // @flow
 import * as React from 'react';
-import {STATE_CHANGE_TYPE} from './constants.js';
-import type {
-  StatefulContainerPropsT,
-  StateT,
-  StateReducerT,
-  StateTypeT,
-} from './types.js';
+import { STATE_CHANGE_TYPE } from './constants.js';
+import type { StatefulContainerPropsT, StateT, StateReducerT, StateTypeT } from './types.js';
 
 const defaultStateReducer: StateReducerT = (type, nextState) => nextState;
 
 class StatefulContainer<T: EventTarget> extends React.Component<
   StatefulContainerPropsT<T>,
-  StateT,
+  StateT
 > {
   static defaultProps = {
     initialState: {},
@@ -33,7 +28,7 @@ class StatefulContainer<T: EventTarget> extends React.Component<
   };
 
   onChange = (e: SyntheticInputEvent<T>) => {
-    const nextState = {value: e.target.value};
+    const nextState = { value: e.target.value };
     this.internalSetState(STATE_CHANGE_TYPE.change, nextState);
     this.props.onChange(e);
   };
@@ -44,9 +39,8 @@ class StatefulContainer<T: EventTarget> extends React.Component<
   };
 
   render() {
-    // eslint-disable-next-line no-unused-vars
-    const {children, initialState, stateReducer, ...restProps} = this.props;
-    const {onChange} = this;
+    const { children, initialState, stateReducer, ...restProps } = this.props;
+    const { onChange } = this;
     return children({
       ...restProps,
       ...this.state,

package/input/stateful-input.js.flow

@@ -8,12 +8,12 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import StatefulContainer from './stateful-container.js';
 import Input from './input.js';
-import type {StatefulInputPropsT} from './types.js';
+import type { InputPropsT, StatefulInputPropsT } from './types.js';
 
 export default function StatefulInput(props: StatefulInputPropsT) {
   return (
     <StatefulContainer {...props}>
-      {(childrenProps: *) => <Input {...childrenProps} />}
+      {(childrenProps: InputPropsT) => <Input {...childrenProps} />}
     </StatefulContainer>
   );
 }

package/input/styled-components.js

@@ -113,7 +113,10 @@ function getFont(size, typography) {
   return (_SIZE$mini$SIZE$compa4 = {}, _defineProperty(_SIZE$mini$SIZE$compa4, _constants.SIZE.mini, typography.font100), _defineProperty(_SIZE$mini$SIZE$compa4, _constants.SIZE.compact, typography.font200), _defineProperty(_SIZE$mini$SIZE$compa4, _constants.SIZE.default, typography.font300), _defineProperty(_SIZE$mini$SIZE$compa4, _constants.SIZE.large, typography.font400), _SIZE$mini$SIZE$compa4)[size];
 }
 
-function getRootColors($disabled, $isFocused, $error, $positive, colors) {
+function getRootColors($disabled, $isFocused, $error) {
+  var $positive = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : false;
+  var colors = arguments.length > 4 ? arguments[4] : undefined;
+
   if ($disabled) {
     return {
       borderLeftColor: colors.inputFillDisabled,
@@ -377,7 +380,8 @@ var getInputStyles = function getInputStyles(props) {
       _props$$theme4 = props.$theme,
       colors = _props$$theme4.colors,
       sizing = _props$$theme4.sizing,
-      typography = _props$$theme4.typography;
+      typography = _props$$theme4.typography; //$FlowFixMe
+
   return _objectSpread(_objectSpread(_objectSpread({
     boxSizing: 'border-box',
     backgroundColor: 'transparent',