baseui 10.11.1 → 11.0.0

package/radio/types.js.flow

@@ -28,15 +28,9 @@ export type RadioGroupOverridesT = {
   RadioGroupRoot?: OverrideT,
 };
 
-export type OverridesT = {
-  ...$Exact<RadioOverridesT>,
-  ...$Exact<RadioGroupOverridesT>,
-};
-
 export type DefaultPropsT = {
   value: string,
   disabled: boolean,
-  isError: boolean,
   error: boolean,
   autoFocus: boolean,
   labelPlacement: LabelPlacementT,
@@ -59,7 +53,7 @@ export type PropsT = {
    */
   'aria-labelledby'?: string,
   // This prop will be deprecated in the next major update. Pass overrides to the 'Radio' component instead.
-  overrides?: OverridesT,
+  overrides?: RadioGroupOverridesT,
   /** As `children` in React native approach represents radio buttons inside of Radio Group. Can use `Radio` from this package. */
   children?: Array<React.Node>,
   /** The value of radio button, which is preselected. */
@@ -70,8 +64,6 @@ export type PropsT = {
   required?: boolean,
   /** Sets radio group into error state. */
   error?: boolean,
-  /** You should use the error prop instead. */
-  isError?: boolean,
   /** Set to be focused (active) on selected\checked radio. */
   autoFocus?: boolean,
   /** How to position radio buttons in the group. */
@@ -117,8 +109,6 @@ export type RadioPropsT = {
   inputRef?: ReactRefT<HTMLInputElement>,
   /** Renders checkbox in errored state. */
   error?: boolean,
-  /** You should use the error prop instead. */
-  isError?: boolean,
   /** Is radio focused / active? */
   isFocused?: boolean,
   /** Is parent RadioGroup focused by keyboard? */
@@ -141,7 +131,7 @@ export type RadioPropsT = {
   onMouseDown?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
   /** Handler for mouseup events on trigger element. */
   onMouseUp?: (e: SyntheticInputEvent<HTMLInputElement>) => mixed,
-  overrides?: OverridesT,
+  overrides?: RadioOverridesT,
   /** Marks the checkbox as required. */
   required?: boolean,
   /** Passed to the input element value attribute */
@@ -175,7 +165,7 @@ export type DefaultStatefulPropsT = {
 };
 
 export type StatefulContainerPropsT = {
-  overrides?: OverridesT,
+  overrides?: RadioGroupOverridesT,
   /** Should return `RadioGroup` instance with standard or customized inner elements. */
   children?: (props: PropsT) => React.Node,
   /** Initial state populated into the component */
@@ -189,7 +179,7 @@ export type StatefulContainerPropsT = {
 };
 
 export type StatefulRadioGroupPropsT = {
-  overrides?: OverridesT,
+  overrides?: RadioGroupOverridesT,
   /** A list of `Radio` components. */
   children?: Array<React.Node>,
   /** Initial state populated into the component */
@@ -206,7 +196,6 @@ export type StylePropsT = {
   $disabled: boolean,
   $hasDescription: boolean,
   $isActive: boolean,
-  $isError: boolean,
   $error: boolean,
   $isFocused: boolean,
   $isFocusVisible: boolean,

package/rating/styled-components.js

@@ -48,11 +48,11 @@ var StyledStar = (0, _index.styled)('li', function (_ref2) {
   var prePartialStarFill;
 
   if ($isActive) {
-    starStroke = starFill = $theme.colors.rating400;
+    starStroke = starFill = $theme.colors.warning400;
   }
 
   if ($isPartialActive && !$isActive) {
-    prePartialStarStroke = prePartialStarFill = $theme.colors.rating400;
+    prePartialStarStroke = prePartialStarFill = $theme.colors.warning400;
   }
 
   var styles = {
@@ -110,7 +110,7 @@ var StyledEmoticon = (0, _index.styled)('li', function (_ref3) {
   var emoticonFill = $theme.colors.ratingInactiveFill;
 
   if ($isActive) {
-    emoticonFill = $theme.colors.rating400;
+    emoticonFill = $theme.colors.warning400;
   }
 
   var ratingIcons = [(0, _svgIcons.angryRatingSVG)(emoticonFill, $size), (0, _svgIcons.sadRatingSVG)(emoticonFill, $size), (0, _svgIcons.neutralRatingSVG)(emoticonFill, $size), (0, _svgIcons.happyRatingSVG)(emoticonFill, $size), (0, _svgIcons.veryHappyRatingSVG)(emoticonFill, $size)];

package/rating/styled-components.js.flow

@@ -44,10 +44,10 @@ export const StyledStar = styled<StyledRatingItemPropsT>(
     let prePartialStarFill;
 
     if ($isActive) {
-      starStroke = starFill = $theme.colors.rating400;
+      starStroke = starFill = $theme.colors.warning400;
     }
     if ($isPartialActive && !$isActive) {
-      prePartialStarStroke = prePartialStarFill = $theme.colors.rating400;
+      prePartialStarStroke = prePartialStarFill = $theme.colors.warning400;
     }
 
     const styles = {
@@ -106,7 +106,7 @@ export const StyledEmoticon = styled<StyledRatingItemPropsT>(
     let emoticonFill = $theme.colors.ratingInactiveFill;
 
     if ($isActive) {
-      emoticonFill = $theme.colors.rating400;
+      emoticonFill = $theme.colors.warning400;
     }
 
     const ratingIcons = [

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;
@@ -312,8 +319,6 @@ export const StyledIconsContainer: StyletronComponent<any>;
 export const StyledSelectArrow: StyletronComponent<any>;
 export const StyledClearIcon: StyletronComponent<any>;
 export const StyledSearchIconContainer: StyletronComponent<any>;
-// TODO(v11): remove StyledSearchIcon
-export const StyledSearchIcon: StyletronComponent<any>;
 export const StyledDropdownContainer: StyletronComponent<any>;
 export const StyledDropdown: StyletronComponent<any>;
 export const StyledDropdownListItem: StyletronComponent<any>;

package/select/index.js

@@ -123,12 +123,6 @@ Object.defineProperty(exports, "StyledClearIcon", {
     return _styledComponents.StyledClearIcon;
   }
 });
-Object.defineProperty(exports, "StyledSearchIcon", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.StyledSearchIconContainer;
-  }
-});
 Object.defineProperty(exports, "StyledSearchIconContainer", {
   enumerable: true,
   get: function get() {

package/select/index.js.flow

@@ -27,8 +27,6 @@ export {
   StyledIconsContainer,
   StyledSelectArrow,
   StyledClearIcon,
-  // TODO(v11): remove StyledSearchIconContainer as StyledSearchIcon
-  StyledSearchIconContainer as StyledSearchIcon,
   StyledSearchIconContainer,
   StyledDropdownContainer,
   StyledDropdown,

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.
 
@@ -1003,14 +1022,10 @@ var Select = /*#__PURE__*/function (_React$Component) {
           searchIconProps = _getOverrides12[1];
 
       var sharedProps = this.getSharedProps();
-      return (
-        /*#__PURE__*/
-        // TODO(v11): remove searchIconProps from SearchIconContainer
-        React.createElement(SearchIconContainer, _extends({}, sharedProps, searchIconProps, searchIconContainerProps), /*#__PURE__*/React.createElement(SearchIcon, _extends({
-          size: 16,
-          title: 'search'
-        }, searchIconProps)))
-      );
+      return /*#__PURE__*/React.createElement(SearchIconContainer, _extends({}, sharedProps, searchIconContainerProps), /*#__PURE__*/React.createElement(SearchIcon, _extends({
+        size: 16,
+        title: 'search'
+      }, sharedProps, searchIconProps)));
     }
   }, {
     key: "filterOptions",

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);
     }
   };
 
@@ -823,9 +840,8 @@ class Select extends React.Component<PropsT, SelectStateT> {
     const sharedProps = this.getSharedProps();
 
     return (
-      // TODO(v11): remove searchIconProps from SearchIconContainer
-      <SearchIconContainer {...sharedProps} {...searchIconProps} {...searchIconContainerProps}>
-        <SearchIcon size={16} title={'search'} {...searchIconProps} />
+      <SearchIconContainer {...sharedProps} {...searchIconContainerProps}>
+        <SearchIcon size={16} title={'search'} {...sharedProps} {...searchIconProps} />
       </SearchIconContainer>
     );
   }

package/select/styled-components.js

@@ -111,10 +111,10 @@ function getControlContainerColors($disabled, $isFocused, $isPseudoFocused, $pos
   if ($isFocused || $isPseudoFocused) {
     return {
       color: colors.contentPrimary,
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive
     };
   }

package/select/styled-components.js.flow

@@ -135,10 +135,10 @@ function getControlContainerColors(
   if ($isFocused || $isPseudoFocused) {
     return {
       color: colors.contentPrimary,
-      borderLeftColor: colors.borderFocus,
-      borderRightColor: colors.borderFocus,
-      borderTopColor: colors.borderFocus,
-      borderBottomColor: colors.borderFocus,
+      borderLeftColor: colors.borderSelected,
+      borderRightColor: colors.borderSelected,
+      borderTopColor: colors.borderSelected,
+      borderBottomColor: colors.borderSelected,
       backgroundColor: colors.inputFillActive,
     };
   }

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,

package/snackbar/styled-components.js

@@ -51,7 +51,7 @@ var StyledStartEnhancerContainer = (0, _index2.styled)('span', function (_ref2)
 });
 exports.StyledStartEnhancerContainer = StyledStartEnhancerContainer;
 StyledStartEnhancerContainer.displayName = "StyledStartEnhancerContainer";
-var StyledSpinner = (0, _index2.withStyle)(_index.StyledSpinnerNext, function (_ref4) {
+var StyledSpinner = (0, _index2.withStyle)(_index.Spinner, function (_ref4) {
   var $height = _ref4.$height,
       $width = _ref4.$width;
   return {

package/snackbar/styled-components.js.flow

@@ -7,7 +7,7 @@ LICENSE file in the root directory of this source tree.
 
 // @flow
 
-import { StyledSpinnerNext } from '../spinner/index.js';
+import { Spinner } from '../spinner/index.js';
 import { styled, withStyle } from '../styles/index.js';
 
 import { PLACEMENT } from './constants.js';
@@ -43,16 +43,16 @@ export const StyledStartEnhancerContainer = styled<{}>('span', ({ $theme }) => {
   };
 });
 
-export const StyledSpinner = withStyle<
-  typeof StyledSpinnerNext,
-  { $height: number, $width: number }
->(StyledSpinnerNext, ({ $height, $width }) => {
-  return {
-    boxSizing: 'border-box',
-    height: `${$height}px`,
-    width: `${$width}px`,
-  };
-});
+export const StyledSpinner = withStyle<typeof Spinner, { $height: number, $width: number }>(
+  Spinner,
+  ({ $height, $width }) => {
+    return {
+      boxSizing: 'border-box',
+      height: `${$height}px`,
+      width: `${$width}px`,
+    };
+  }
+);
 
 export const StyledMessage = styled<{ $hasSuffix: boolean }>(
   'p',

package/spinner/index.d.ts

@@ -1,6 +1,5 @@
-import * as React from 'react';
 import {StyletronComponent} from 'styletron-react';
-import {Override} from '../overrides';
+import {Sizing} from '../theme.ts';
 
 export enum SIZE {
   small = 'small',
@@ -8,22 +7,10 @@ export enum SIZE {
   large = 'large',
 }
 
-export interface SpinnerOverrides {
-  Svg?: Override<any>;
-  ActivePath?: Override<any>;
-  TrackPath?: Override<any>;
-}
-
 export interface SpinnerProps {
-  'aria-label'?: string;
-  size?: number | string;
-  color?: string;
-  title?: string;
-  overrides?: SpinnerOverrides;
+  $color?: string;
+  $borderWidth?: number | string | SIZE | Sizing;
+  $size?: number | string | SIZE | Sizing;
 }
-export class Spinner extends React.Component<SpinnerProps> {}
 
-export const StyledSvg: StyletronComponent<any>;
-export const StyledTrackPath: StyletronComponent<any>;
-export const StyledActivePath: StyletronComponent<any>;
-export const StyledSpinnerNext: StyletronComponent<any>;
+export const Spinner: StyletronComponent<SpinnerProps>;

package/spinner/index.js

@@ -3,70 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "SpinnerDeterminate", {
-  enumerable: true,
-  get: function get() {
-    return _index.ProgressBarRounded;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateRoot", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedRoot;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateSvg", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedSvg;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateText", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedText;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateTrackBackground", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedTrackBackground;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerDeterminateTrackForeground", {
-  enumerable: true,
-  get: function get() {
-    return _index.StyledProgressBarRoundedTrackForeground;
-  }
-});
 Object.defineProperty(exports, "Spinner", {
   enumerable: true,
   get: function get() {
-    return _spinner.default;
-  }
-});
-Object.defineProperty(exports, "StyledSvg", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.Svg;
-  }
-});
-Object.defineProperty(exports, "StyledTrackPath", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.StyledTrackPath;
-  }
-});
-Object.defineProperty(exports, "StyledActivePath", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.StyledActivePath;
-  }
-});
-Object.defineProperty(exports, "StyledSpinnerNext", {
-  enumerable: true,
-  get: function get() {
-    return _styledComponents.StyledSpinnerNext;
+    return _styledComponents.StyledSpinner;
   }
 });
 Object.defineProperty(exports, "SIZE", {
@@ -76,12 +16,6 @@ Object.defineProperty(exports, "SIZE", {
   }
 });
 
-var _index = require("../progress-bar/index.js");
-
-var _spinner = _interopRequireDefault(require("./spinner.js"));
-
 var _styledComponents = require("./styled-components.js");
 
-var _constants = require("./constants.js");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var _constants = require("./constants.js");

package/spinner/index.js.flow

@@ -5,38 +5,13 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 // @flow
-import {
-  ProgressBarRounded,
-  StyledProgressBarRoundedRoot,
-  StyledProgressBarRoundedSvg,
-  StyledProgressBarRoundedText,
-  StyledProgressBarRoundedTrackBackground,
-  StyledProgressBarRoundedTrackForeground,
-} from '../progress-bar/index.js';
+import { StyledSpinner } from './styled-components.js';
 
-export { default as Spinner } from './spinner.js';
-// Styled elements
-export {
-  Svg as StyledSvg,
-  StyledTrackPath,
-  StyledActivePath,
-  StyledSpinnerNext,
-} from './styled-components.js';
+export { StyledSpinner as Spinner };
 export { SIZE } from './constants.js';
 // Flow
 export type * from './types.js';
 
-// Backward compatibility with SpinnerDeterminate
-// Deprecated
-export {
-  ProgressBarRounded as SpinnerDeterminate,
-  StyledProgressBarRoundedRoot as StyledSpinnerDeterminateRoot,
-  StyledProgressBarRoundedSvg as StyledSpinnerDeterminateSvg,
-  StyledProgressBarRoundedTrackBackground as StyledSpinnerDeterminateTrackBackground,
-  StyledProgressBarRoundedTrackForeground as StyledSpinnerDeterminateTrackForeground,
-  StyledProgressBarRoundedText as StyledSpinnerDeterminateText,
-};
-
 declare var __DEV__: boolean;
 declare var __NODE__: boolean;
 declare var __BROWSER__: boolean;