baseui 10.11.0 → 10.12.1

package/button/types.js.flow

@@ -10,7 +10,7 @@ import * as React from 'react';
 import { KIND, SIZE, SHAPE } from './constants.js';
 import type { OverrideT } from '../helpers/overrides.js';
 
-export type ReactRefT<T> = {| current: null | T |};
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type OverridesT = {
   Root?: OverrideT,

package/checkbox/types.js.flow

@@ -11,7 +11,7 @@ import { STYLE_TYPE } from './constants.js';
 
 export type LabelPlacementT = 'top' | 'right' | 'bottom' | 'left';
 export type StyleTypeT = $Keys<typeof STYLE_TYPE>;
-export type ReactRefT<T> = {| current: null | T |};
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type OverridesT = {
   Checkmark?: OverrideT,

package/combobox/types.js.flow

@@ -11,7 +11,7 @@ import * as React from 'react';
 import type { OverrideT } from '../helpers/overrides.js';
 import { SIZE } from '../input/index.js';
 
-export type ReactRefT<T> = {| current: null | T |};
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type PropsT<OptionT = mixed> = {|
   // Controls if the input value will be updated while keyboard navigating. Defaults to true.

package/es/radio/radio.js

@@ -61,7 +61,7 @@ class Radio extends React.Component {
   }
 
   componentDidMount() {
-    if (this.props.autoFocus && this.props.inputRef.current) {
+    if (this.props.autoFocus && this.props.inputRef?.current) {
       this.props.inputRef.current.focus();
     }
 

package/es/select/select-component.js

@@ -437,12 +437,8 @@ class Select extends React.Component {
     _defineProperty(this, "handleInputRef", input => {
       this.input = input;
 
-      if (this.props.controlRef) {
-        if (typeof this.props.controlRef === 'function') {
-          this.props.controlRef(input);
-        } else {
-          this.props.controlRef.current = input;
-        }
+      if (this.props.controlRef && typeof this.props.controlRef === 'function') {
+        this.props.controlRef(input);
       }
     });
 
@@ -561,13 +557,19 @@ class Select extends React.Component {
     }
 
     this.isItMounted = true;
+    const {
+      controlRef
+    } = this.props;
 
-    if (this.props.methodsRef) {
-      const {
-        methodsRef
-      } = this.props;
-      methodsRef.current = {
-        setDropdownOpen: this.handleDropdownOpen.bind(this)
+    if (controlRef && typeof controlRef !== 'function') {
+      controlRef.current = {
+        setDropdownOpen: this.handleDropdownOpen.bind(this),
+        setInputValue: this.handleSetInputValue.bind(this),
+        setInputFocus: this.handleSetInputFocus.bind(this),
+        setInputBlur: this.handleSetInputBlur.bind(this),
+        // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+        focus: this.handleSetInputFocus.bind(this),
+        blur: this.handleSetInputBlur.bind(this)
       };
     }
   }
@@ -608,6 +610,20 @@ class Select extends React.Component {
     this.setState({
       isOpen: nextOpenState
     });
+  }
+
+  handleSetInputValue(newInputValue) {
+    this.setState({
+      inputValue: newInputValue
+    });
+  }
+
+  handleSetInputFocus() {
+    this.input.focus();
+  }
+
+  handleSetInputBlur() {
+    this.input.blur();
   } // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
 

package/esm/radio/radio.js

@@ -117,7 +117,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/esm/select/select-component.js

@@ -512,12 +512,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
       _this.input = input;
 
-      if (_this.props.controlRef) {
-        if (typeof _this.props.controlRef === 'function') {
-          _this.props.controlRef(input);
-        } else {
-          _this.props.controlRef.current = input;
-        }
+      if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
+        _this.props.controlRef(input);
       }
     });
 
@@ -656,11 +652,17 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }
 
       this.isItMounted = true;
-
-      if (this.props.methodsRef) {
-        var methodsRef = this.props.methodsRef;
-        methodsRef.current = {
-          setDropdownOpen: this.handleDropdownOpen.bind(this)
+      var controlRef = this.props.controlRef;
+
+      if (controlRef && typeof controlRef !== 'function') {
+        controlRef.current = {
+          setDropdownOpen: this.handleDropdownOpen.bind(this),
+          setInputValue: this.handleSetInputValue.bind(this),
+          setInputFocus: this.handleSetInputFocus.bind(this),
+          setInputBlur: this.handleSetInputBlur.bind(this),
+          // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+          focus: this.handleSetInputFocus.bind(this),
+          blur: this.handleSetInputBlur.bind(this)
         };
       }
     }
@@ -705,6 +707,23 @@ var Select = /*#__PURE__*/function (_React$Component) {
       this.setState({
         isOpen: nextOpenState
       });
+    }
+  }, {
+    key: "handleSetInputValue",
+    value: function handleSetInputValue(newInputValue) {
+      this.setState({
+        inputValue: newInputValue
+      });
+    }
+  }, {
+    key: "handleSetInputFocus",
+    value: function handleSetInputFocus() {
+      this.input.focus();
+    }
+  }, {
+    key: "handleSetInputBlur",
+    value: function handleSetInputBlur() {
+      this.input.blur();
     } // Handle touch outside on mobile to dismiss menu, ensures that the
     // touch target is not within the anchor DOM node.
 

package/input/base-input.js.flow

@@ -27,7 +27,10 @@ import { isFocusVisible, forkFocus, forkBlur } from '../utils/focusVisible.js';
 
 const NullComponent = () => null;
 
-class BaseInput<T: EventTarget> extends React.Component<BaseInputPropsT<T>, InternalStateT> {
+class BaseInput<T: HTMLInputElement | HTMLTextAreaElement> extends React.Component<
+  BaseInputPropsT<T>,
+  InternalStateT
+> {
   static defaultProps = {
     'aria-activedescendant': null,
     'aria-autocomplete': null,
@@ -63,8 +66,7 @@ class BaseInput<T: EventTarget> extends React.Component<BaseInputPropsT<T>, Inte
     type: 'text',
   };
 
-  // flowlint-next-line unclear-type:off
-  inputRef = this.props.inputRef || React.createRef<any>();
+  inputRef = this.props.inputRef || React.createRef<T>();
 
   state = {
     isFocused: this.props.autoFocus || false,

package/input/masked-input.js.flow

@@ -13,7 +13,7 @@ import Input from './input.js';
 import { Input as StyledInput } from './styled-components.js';
 import type { MaskedInputPropsT } from './types.js';
 
-const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLElement>(
+const MaskOverride = React.forwardRef<MaskedInputPropsT, HTMLInputElement>(
   (
     {
       // do nothing with these - we just don't want to pass it to the InputMask, as

package/input/types.js.flow

@@ -12,7 +12,7 @@ import { STATE_CHANGE_TYPE, ADJOINED, SIZE, ENHANCER_POSITION } from './constant
 export type AdjoinedT = $Keys<typeof ADJOINED>;
 export type SizeT = $Keys<typeof SIZE>;
 export type StateTypeT = $Keys<typeof STATE_CHANGE_TYPE>;
-export type ReactRefT<T> = {| current: null | T |};
+export type ReactRefT<T> = {| current: null | T |} | { current: null | T };
 
 export type InternalStateT = {
   /** Renders UI in 'focus' state */
@@ -108,7 +108,7 @@ export type BaseInputPropsT<T> = {|
   /** A  hint as to the type of data that might be entered by the user while editing the element or its contents. */
   inputMode?: string,
   /** A ref to access an input element. */
-  inputRef?: ReactRefT<HTMLElement>,
+  inputRef?: ReactRefT<T>,
   name: string,
   onBlur: (e: SyntheticFocusEvent<T>) => mixed,
   onChange?: (e: SyntheticInputEvent<T>) => mixed,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.11.0",
+  "version": "10.12.1",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",
@@ -81,13 +81,13 @@
     "@commitlint/config-conventional": "^8.0.0",
     "@date-io/luxon": "^2.7.0",
     "@date-io/moment": "^2.7.0",
-    "@ladle/react": "^0.8.2",
+    "@ladle/react": "^0.10.2",
     "@mdx-js/tag": "^0.20.0",
     "@octokit/rest": "^16.33.1",
     "@svgr/cli": "^4.3.2",
-    "@testing-library/jest-dom": "^5.11.5",
-    "@testing-library/react": "^11.1.0",
-    "@testing-library/user-event": "^12.1.10",
+    "@testing-library/jest-dom": "^5.16.3",
+    "@testing-library/react": "^12.1.4",
+    "@testing-library/user-event": "^13.5.0",
     "@types/babel__code-frame": "^7.0.1",
     "@types/babel__core": "^7.1.3",
     "@types/babel__generator": "^7.0.2",
@@ -168,10 +168,10 @@
     "puppeteer": "^9.1.1",
     "query-string": "^6.14.0",
     "raw-loader": "^3.1.0",
-    "react": "^16.9.0",
+    "react": "^17.0.2",
     "react-codesandboxer": "^3.1.5",
     "react-compare-image": "^2.0.3",
-    "react-dom": "^16.9.0",
+    "react-dom": "^17.0.2",
     "react-hook-form": "^7.9.0",
     "react-icons": "^3.8.0",
     "react-map-gl": "^5.3.19",
@@ -220,8 +220,8 @@
     "resize-observer-polyfill": "^1.5.1"
   },
   "peerDependencies": {
-    "react": ">= 16.8.0 < 18",
-    "react-dom": ">= 16.8.0 < 18",
+    "react": ">= 16.8.0 < 19",
+    "react-dom": ">= 16.8.0 < 19",
     "styletron-react": ">=5.2.2 < 7"
   },
   "resolutions": {

package/phone-input/types.js.flow

@@ -10,7 +10,7 @@ import { STATE_CHANGE_TYPE, SIZE, COUNTRIES } from './constants.js';
 import type { OverrideT } from '../helpers/overrides.js';
 import type { OnChangeParamsT } from '../select/types.js';
 
-export type ReactRefT<T> = { current: null | T };
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 export type SizeT = $Keys<typeof SIZE>;
 export type CountryIsoT = $Keys<typeof COUNTRIES>;
 export type CountriesT = $ReadOnly<CountryT>;

package/popover/types.js.flow

@@ -16,7 +16,7 @@ export type { PopperDataObjectT, PopperOffsetT, PopperOptionsT } from '../layer/
 export type PopoverPlacementT = TetherPlacementT;
 export type TriggerTypeT = $Keys<typeof TRIGGER_TYPE>;
 export type AccessibilityTypeT = $Keys<typeof ACCESSIBILITY_TYPE>;
-export type ReactRefT<T> = {| current: null | T |};
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type StateT = {
   isOpen: boolean,

package/progress-bar/index.d.ts

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import { StyletronComponent } from 'styletron-react';
+import { Override } from '../overrides';
 
 export interface SIZE {
   small: 'small';
@@ -27,7 +27,7 @@ export interface ProgressBarProps {
   steps?: number;
   successValue?: number;
   minValue?: number;
-  mxaValue?: number;
+  maxValue?: number;
   value?: number;
 }
 export class ProgressBar extends React.Component<ProgressBarProps> {}

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

@@ -56,7 +56,7 @@ 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) {

package/radio/types.js.flow

@@ -13,7 +13,7 @@ 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 |};
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type RadioOverridesT = {
   RadioMarkInner?: OverrideT,
@@ -114,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: ReactRefT<HTMLInputElement>,
+  inputRef?: ReactRefT<HTMLInputElement>,
   /** Renders checkbox in errored state. */
   error?: boolean,
   /** You should use the error prop instead. */

package/select/index.d.ts

@@ -1,11 +1,11 @@
 import * as React from 'react';
-import {StyletronComponent} from 'styletron-react';
-import {SIZE} from '../input';
-import {OnItemSelect} from '../menu';
-import {Override} from '../overrides';
-import {Locale} from '../locale';
+import { StyletronComponent } from 'styletron-react';
+import { SIZE } from '../input';
+import { OnItemSelect } from '../menu';
+import { Override } from '../overrides';
+import { Locale } from '../locale';
 
-export {SIZE} from '../input';
+export { SIZE } from '../input';
 
 export interface TYPE {
   select: 'select';
@@ -27,7 +27,7 @@ export interface Option {
   [others: string]: any;
 }
 export type Value = ReadonlyArray<Option>;
-export type OptgroupsT = {__ungrouped: Value; [key: string]: Value};
+export type OptgroupsT = { __ungrouped: Value; [key: string]: Value };
 export type OptionsT = Value | OptgroupsT;
 
 export type ChangeAction = () => any;
@@ -44,9 +44,16 @@ export type filterOptions = (
     matchProp?: 'any' | 'label' | 'value';
     trimFilter?: boolean;
     valueKey?: string;
-  },
+  }
 ) => Value;
 
+export interface ImperativeMethods {
+  setInputFocus: () => void;
+  setInputBlur: () => void;
+  setDropdownOpen: (d: boolean) => void;
+  setInputValue: (s: string) => void;
+}
+
 export interface SelectOverrides {
   Root?: Override<any>;
   ControlContainer?: Override<any>;
@@ -91,7 +98,7 @@ export interface SelectProps {
     options: Value,
     filterValue: string,
     excludeOptions?: Value,
-    newProps?: {valueKey: string; labelKey: string},
+    newProps?: { valueKey: string; labelKey: string }
   ) => Value;
   filterOutSelected?: boolean;
   getOptionLabel?: (args: {
@@ -102,9 +109,9 @@ export interface SelectProps {
       $isHighlighted?: boolean;
     };
   }) => React.ReactNode;
-  getValueLabel?: (args: {option: Option}) => React.ReactNode;
+  getValueLabel?: (args: { option: Option }) => React.ReactNode;
   id?: string;
-  controlRef?: React.Ref<HTMLInputElement | HTMLDivElement>;
+  controlRef?: React.Ref<ImperativeMethods>;
   isLoading?: boolean;
   labelKey?: string;
   startOpen?: boolean;
@@ -164,22 +171,18 @@ export class Select extends React.Component<SelectProps, SelectState> {
         $disabled: boolean;
         $isHighlighted: boolean;
       };
-    },
+    }
   ): React.ReactNode;
-  getValueLabel({option}: {option: Option}): React.ReactNode;
+  getValueLabel({ option }: { option: Option }): React.ReactNode;
   getValueArray(value: Value): Option[];
   setValue(value: Value, option: Option, type: ChangeAction): void;
-  selectValue({item}: {item: Option}): void;
+  selectValue({ item }: { item: Option }): void;
   addValue(item: Option): void;
   popValue(): void;
   removeValue(item: Option): void;
   clearValue(event: KeyboardEvent | MouseEvent | TouchEvent): void;
   renderLoading(): React.ReactNode;
-  renderValue(
-    valueArray: Value,
-    isOpen: boolean,
-    locale: Locale,
-  ): React.ReactNode;
+  renderValue(valueArray: Value, isOpen: boolean, locale: Locale): React.ReactNode;
   renderInput(): React.ReactNode;
   renderClear(): React.ReactNode;
   renderArrow(): React.ReactNode;
@@ -219,10 +222,7 @@ export interface AutosizeInputProps {
 export interface AutosizeInputState {
   inputWidth: number;
 }
-export class AutosizeInput extends React.Component<
-  AutosizeInputProps,
-  AutosizeInputState
-> {
+export class AutosizeInput extends React.Component<AutosizeInputProps, AutosizeInputState> {
   sizerRef(el?: HTMLElement): void;
   updateInputWidth(): void;
 }
@@ -276,18 +276,14 @@ export class SelectDropdown extends React.Component<DropdownProps> {
     $type: TYPE[keyof TYPE];
     $width: number;
   };
-  getItemLabel(option: {[key: string]: any}): React.ReactNode;
+  getItemLabel(option: { [key: string]: any }): React.ReactNode;
   onMouseDown(e: Event): void;
 }
 
 export interface State {
   value: Value;
 }
-export type StateReducer = (
-  stateType: string,
-  nextState: State,
-  currentState: State,
-) => State;
+export type StateReducer = (stateType: string, nextState: State, currentState: State) => State;
 export interface OnChangeParams {
   value: Value;
   option?: Option;
@@ -306,10 +302,7 @@ export interface StatefulContainerProps {
   stateReducer?: StateReducer;
   onChange?: (params: OnChangeParams) => any;
 }
-export class StatefulSelectContainer extends React.Component<
-  StatefulContainerProps,
-  State
-> {
+export class StatefulSelectContainer extends React.Component<StatefulContainerProps, State> {
   onChange(params: OnChangeParams): void;
   internalSetState(params: OnChangeParams): void;
 }

package/select/select-component.js

@@ -532,12 +532,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
       _this.input = input;
 
-      if (_this.props.controlRef) {
-        if (typeof _this.props.controlRef === 'function') {
-          _this.props.controlRef(input);
-        } else {
-          _this.props.controlRef.current = input;
-        }
+      if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
+        _this.props.controlRef(input);
       }
     });
 
@@ -676,11 +672,17 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }
 
       this.isItMounted = true;
-
-      if (this.props.methodsRef) {
-        var methodsRef = this.props.methodsRef;
-        methodsRef.current = {
-          setDropdownOpen: this.handleDropdownOpen.bind(this)
+      var controlRef = this.props.controlRef;
+
+      if (controlRef && typeof controlRef !== 'function') {
+        controlRef.current = {
+          setDropdownOpen: this.handleDropdownOpen.bind(this),
+          setInputValue: this.handleSetInputValue.bind(this),
+          setInputFocus: this.handleSetInputFocus.bind(this),
+          setInputBlur: this.handleSetInputBlur.bind(this),
+          // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+          focus: this.handleSetInputFocus.bind(this),
+          blur: this.handleSetInputBlur.bind(this)
         };
       }
     }
@@ -725,6 +727,23 @@ var Select = /*#__PURE__*/function (_React$Component) {
       this.setState({
         isOpen: nextOpenState
       });
+    }
+  }, {
+    key: "handleSetInputValue",
+    value: function handleSetInputValue(newInputValue) {
+      this.setState({
+        inputValue: newInputValue
+      });
+    }
+  }, {
+    key: "handleSetInputFocus",
+    value: function handleSetInputFocus() {
+      this.input.focus();
+    }
+  }, {
+    key: "handleSetInputBlur",
+    value: function handleSetInputBlur() {
+      this.input.blur();
     } // Handle touch outside on mobile to dismiss menu, ensures that the
     // touch target is not within the anchor DOM node.
 

package/select/select-component.js.flow

@@ -118,11 +118,16 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
     this.isItMounted = true;
 
-    if (this.props.methodsRef) {
-      const { methodsRef } = this.props;
-
-      methodsRef.current = {
+    const { controlRef } = this.props;
+    if (controlRef && typeof controlRef !== 'function') {
+      controlRef.current = {
         setDropdownOpen: this.handleDropdownOpen.bind(this),
+        setInputValue: this.handleSetInputValue.bind(this),
+        setInputFocus: this.handleSetInputFocus.bind(this),
+        setInputBlur: this.handleSetInputBlur.bind(this),
+        // `focus` & `blur` below are for backwards compatibility and may be removed. Use setInputFocus and setInputBlur instead.
+        focus: this.handleSetInputFocus.bind(this),
+        blur: this.handleSetInputBlur.bind(this),
       };
     }
   }
@@ -164,6 +169,20 @@ class Select extends React.Component<PropsT, SelectStateT> {
     });
   }
 
+  handleSetInputValue(newInputValue: string) {
+    this.setState({
+      inputValue: newInputValue,
+    });
+  }
+
+  handleSetInputFocus() {
+    this.input.focus();
+  }
+
+  handleSetInputBlur() {
+    this.input.blur();
+  }
+
   // Handle touch outside on mobile to dismiss menu, ensures that the
   // touch target is not within the anchor DOM node.
   handleTouchOutside = (event: TouchEvent) => {
@@ -479,15 +498,13 @@ class Select extends React.Component<PropsT, SelectStateT> {
     }
   };
 
+  // This method is to preserve backwards compatibility for users using controlRef to directly
+  // access the input element. This capability is not documented, and may be removed in the future.
   //flowlint-next-line unclear-type:off
   handleInputRef = (input: React.ElementRef<any>) => {
     this.input = input;
-    if (this.props.controlRef) {
-      if (typeof this.props.controlRef === 'function') {
-        this.props.controlRef(input);
-      } else {
-        this.props.controlRef.current = input;
-      }
+    if (this.props.controlRef && typeof this.props.controlRef === 'function') {
+      this.props.controlRef(input);
     }
   };
 

package/select/types.js.flow

@@ -15,7 +15,7 @@ import type { OnItemSelectFnT } from '../menu/types.js';
 export type ChangeActionT = $Keys<typeof STATE_CHANGE_TYPE>;
 export type SizeT = $Keys<typeof SIZE>;
 export type TypeT = $Keys<typeof TYPE>;
-export type ReactRefT<T> = {| current: null | T |};
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type OptionT = $ReadOnly<{
   id?: string | number,
@@ -73,11 +73,17 @@ export type OverridesDropdownT = {
   StatefulMenu?: OverrideT,
 };
 
-type ImperativeFnsT = {|
+type ImperativeMethodsT = {|
   setDropdownOpen: (boolean) => mixed,
+  setInputValue: (string) => void,
+  setInputFocus: () => void,
+  setInputBlur: () => void,
+  // these below are for backwards compatibility and may be removed. Don't use them.
+  focus: () => void,
+  blur: () => void,
 |};
-export type MethodsRefT = {
-  current: ImperativeFnsT | null,
+export type ControlRefT = {
+  current: ImperativeMethodsT | null,
 };
 
 export type PropsT = {
@@ -132,8 +138,8 @@ export type PropsT = {
   id?: string,
   /** Defines if the comparison for a new creatable value should be case-insensitive. */
   ignoreCase?: boolean,
-  /** A ref to access the input element powering the select if it's a search select, or the container div if it isn't. */
-  controlRef?: ReactRefT<HTMLElement>,
+  /** An imperative handle exposing internal methods. */
+  controlRef?: ControlRefT,
   /** Defines if the select is in a loading (async) state. */
   isLoading: boolean,
   /** Defines an option key for a default label value. */
@@ -142,8 +148,6 @@ export type PropsT = {
   maxDropdownHeight: string,
   /** Defines if multiple options can be selected. */
   multi: boolean,
-  /** Handle for accessing internal methods. */
-  methodsRef?: MethodsRefT,
   /** Message to be displayed if no options is found for a search query. */
   noResultsMsg?: React.Node,
   onBlur: (e: Event) => mixed,

package/tree-view/types.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 import * as React from 'react';
 import type { OverrideT } from '../helpers/overrides.js';
 
-export type ReactRefT<T> = {| current: null | T |};
+export type ReactRefT<T> = { current: null | T } | {| current: null | T |};
 
 export type TreeLabelOverridesT = {
   TreeItemContent?: OverrideT,