baseui 10.11.1 → 10.12.0

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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "baseui",
-  "version": "10.11.1",
+  "version": "10.12.0",
   "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/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/select/index.d.ts

@@ -47,6 +47,13 @@ export type filterOptions = (
   }
 ) => 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>;
@@ -104,7 +111,7 @@ export interface SelectProps {
   }) => React.ReactNode;
   getValueLabel?: (args: { option: Option }) => React.ReactNode;
   id?: string;
-  controlRef?: React.Ref<HTMLInputElement>;
+  controlRef?: React.Ref<ImperativeMethods>;
   isLoading?: boolean;
   labelKey?: string;
   startOpen?: boolean;

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

@@ -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<HTMLInputElement>,
+  /** 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,