baseui 10.11.0 → 10.11.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/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/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.11.1",
   "description": "A React Component library implementing the Base design language",
   "keywords": [
     "react",

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/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,7 +44,7 @@ export type filterOptions = (
     matchProp?: 'any' | 'label' | 'value';
     trimFilter?: boolean;
     valueKey?: string;
-  },
+  }
 ) => Value;
 
 export interface SelectOverrides {
@@ -91,7 +91,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 +102,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<HTMLInputElement>;
   isLoading?: boolean;
   labelKey?: string;
   startOpen?: boolean;
@@ -164,22 +164,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 +215,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 +269,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 +295,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/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,
@@ -133,7 +133,7 @@ export type PropsT = {
   /** 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>,
+  controlRef?: ReactRefT<HTMLInputElement>,
   /** Defines if the select is in a loading (async) state. */
   isLoading: boolean,
   /** Defines an option key for a default label value. */

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,