baseui 11.0.2 → 11.1.1

package/select/index.d.ts

@@ -7,15 +7,15 @@ import { Locale } from '../locale';
 
 export { SIZE } from '../input';
 
-export interface TYPE {
+export declare const TYPE: {
   select: 'select';
   search: 'search';
-}
-export interface STATE_CHANGE_TYPE {
+};
+export declare const STATE_CHANGE_TYPE: {
   select: 'select';
   remove: 'remove';
   clear: 'clear';
-}
+};
 
 export interface Option {
   readonly id?: string | number;
@@ -111,6 +111,7 @@ export interface SelectProps {
   }) => React.ReactNode;
   getValueLabel?: (args: { option: Option }) => React.ReactNode;
   id?: string;
+  inputRef?: React.Ref<any>;
   controlRef?: React.Ref<ImperativeMethods>;
   isLoading?: boolean;
   labelKey?: string;
@@ -133,8 +134,8 @@ export interface SelectProps {
   placeholder?: React.ReactNode;
   required?: boolean;
   searchable?: boolean;
-  size?: SIZE[keyof SIZE];
-  type?: TYPE[keyof TYPE];
+  size?: typeof SIZE[keyof typeof SIZE];
+  type?: typeof TYPE[keyof typeof TYPE];
   value?: Value;
   valueKey?: string;
   mountNode?: HTMLElement;
@@ -201,13 +202,13 @@ export class Select extends React.Component<SelectProps, SelectState> {
     $multi: boolean;
     $required: boolean;
     $searchable: boolean;
-    $size: SIZE[keyof SIZE];
-    $type: TYPE[keyof TYPE];
+    $size: typeof SIZE[keyof typeof SIZE];
+    $type: typeof TYPE[keyof typeof TYPE];
   };
 }
 
-export const SingleValue: React.FC<any>;
-export const MultiValue: React.FC<any>;
+export declare const SingleValue: React.FC<any>;
+export declare const MultiValue: React.FC<any>;
 
 export interface AutosizeInputOverrides {
   Input?: Override<any>;
@@ -217,7 +218,7 @@ export interface AutosizeInputProps {
   defaultValue?: string;
   inputRef?: React.Ref<any>;
   overrides?: AutosizeInputOverrides;
-  $size?: SIZE[keyof SIZE];
+  $size?: typeof SIZE[keyof typeof SIZE];
 }
 export interface AutosizeInputState {
   inputWidth: number;
@@ -258,8 +259,8 @@ export interface DropdownProps {
   overrides?: DropdownOverrides;
   required?: boolean;
   searchable?: boolean;
-  size?: SIZE[keyof SIZE];
-  type?: TYPE[keyof TYPE];
+  size?: typeof SIZE[keyof typeof SIZE];
+  type?: typeof TYPE[keyof typeof TYPE];
   value?: Value;
   valueKey?: string;
   width?: number;
@@ -272,8 +273,8 @@ export class SelectDropdown extends React.Component<DropdownProps> {
     $multi: boolean;
     $required: boolean;
     $searchable: boolean;
-    $size: SIZE[keyof SIZE];
-    $type: TYPE[keyof TYPE];
+    $size: typeof SIZE[keyof typeof SIZE];
+    $type: typeof TYPE[keyof typeof TYPE];
     $width: number;
   };
   getItemLabel(option: { [key: string]: any }): React.ReactNode;
@@ -287,13 +288,13 @@ export type StateReducer = (stateType: string, nextState: State, currentState: S
 export interface OnChangeParams {
   value: Value;
   option?: Option;
-  type?: STATE_CHANGE_TYPE[keyof STATE_CHANGE_TYPE];
+  type?: typeof STATE_CHANGE_TYPE[keyof typeof STATE_CHANGE_TYPE];
 }
 export type StatefulSelectProps = SelectProps & {
   initialState?: State;
   stateReducer?: StateReducer;
 };
-export const StatefulSelect: React.FC<StatefulSelectProps>;
+export declare const StatefulSelect: React.FC<StatefulSelectProps>;
 
 export interface StatefulContainerProps {
   overrides?: SelectOverrides;
@@ -307,22 +308,19 @@ export class StatefulSelectContainer extends React.Component<StatefulContainerPr
   internalSetState(params: OnChangeParams): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledControlContainer: StyletronComponent<any>;
-export const StyledValueContainer: StyletronComponent<any>;
-export const StyledPlaceholder: StyletronComponent<any>;
-export const StyledSingleValue: StyletronComponent<any>;
-export const StyledInputContainer: StyletronComponent<any>;
-export const StyledInput: StyletronComponent<any>;
-export const StyledInputSizer: StyletronComponent<any>;
-export const StyledIconsContainer: StyletronComponent<any>;
-export const StyledSelectArrow: StyletronComponent<any>;
-export const StyledClearIcon: StyletronComponent<any>;
-export const StyledSearchIconContainer: StyletronComponent<any>;
-export const StyledDropdownContainer: StyletronComponent<any>;
-export const StyledDropdown: StyletronComponent<any>;
-export const StyledDropdownListItem: StyletronComponent<any>;
-export const StyledOptionContent: StyletronComponent<any>;
-
-export const TYPE: TYPE;
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledControlContainer: StyletronComponent<any>;
+export declare const StyledValueContainer: StyletronComponent<any>;
+export declare const StyledPlaceholder: StyletronComponent<any>;
+export declare const StyledSingleValue: StyletronComponent<any>;
+export declare const StyledInputContainer: StyletronComponent<any>;
+export declare const StyledInput: StyletronComponent<any>;
+export declare const StyledInputSizer: StyletronComponent<any>;
+export declare const StyledIconsContainer: StyletronComponent<any>;
+export declare const StyledSelectArrow: StyletronComponent<any>;
+export declare const StyledClearIcon: StyletronComponent<any>;
+export declare const StyledSearchIconContainer: StyletronComponent<any>;
+export declare const StyledDropdownContainer: StyletronComponent<any>;
+export declare const StyledDropdown: StyletronComponent<any>;
+export declare const StyledDropdownListItem: StyletronComponent<any>;
+export declare const StyledOptionContent: StyletronComponent<any>;

package/select/select-component.js

@@ -42,6 +42,10 @@ function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return
 
 function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
@@ -530,6 +534,12 @@ var Select = /*#__PURE__*/function (_React$Component) {
     _defineProperty(_assertThisInitialized(_this), "handleInputRef", function (input) {
       _this.input = input;
 
+      if (typeof _this.props.inputRef === 'function') {
+        _this.props.inputRef(input);
+      } else if (_this.props.inputRef) {
+        _this.props.inputRef.current = input;
+      }
+
       if (_this.props.controlRef && typeof _this.props.controlRef === 'function') {
         _this.props.controlRef(input);
       }
@@ -687,6 +697,8 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "componentDidUpdate",
     value: function componentDidUpdate(prevProps, prevState) {
+      var _this2 = this;
+
       if (typeof document !== 'undefined') {
         if (prevState.isOpen !== this.state.isOpen) {
           if (this.state.isOpen) {
@@ -699,7 +711,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
         }
 
         if (!prevState.isFocused && this.state.isFocused) {
-          document.addEventListener('click', this.handleClickOutside);
+          setTimeout(function () {
+            return document.addEventListener('click', _this2.handleClickOutside);
+          }, 0);
         }
       }
     }
@@ -768,7 +782,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
      * Extends the value into an array from the given options
      */
     function getValueArray(value) {
-      var _this2 = this;
+      var _this3 = this;
 
       if (!Array.isArray(value)) {
         if (value === null || value === undefined) return [];
@@ -776,7 +790,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       }
 
       return value.map(function (value) {
-        return (0, _index3.expandValue)(value, _this2.props);
+        return (0, _index3.expandValue)(value, _this3.props);
       });
     }
   }, {
@@ -821,7 +835,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderValue",
     value: function renderValue(valueArray, isOpen, locale) {
-      var _this3 = this;
+      var _this4 = this;
 
       var _this$props$overrides2 = this.props.overrides,
           overrides = _this$props$overrides2 === void 0 ? {} : _this$props$overrides2;
@@ -838,9 +852,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
           var disabled = sharedProps.$disabled || value.clearableValue === false;
           return /*#__PURE__*/React.createElement(Value, _extends({
             value: value,
-            key: "value-".concat(i, "-").concat(value[_this3.props.valueKey]),
+            key: "value-".concat(i, "-").concat(value[_this4.props.valueKey]),
             removeValue: function removeValue() {
-              return _this3.removeValue(value);
+              return _this4.removeValue(value);
             },
             disabled: disabled,
             overrides: {
@@ -869,7 +883,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderInput",
     value: function renderInput(listboxId) {
-      var _this4 = this;
+      var _this5 = this;
 
       var _this$props$overrides3 = this.props.overrides,
           overrides = _this$props$overrides3 === void 0 ? {} : _this$props$overrides3;
@@ -882,7 +896,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
       var sharedProps = this.getSharedProps();
       var isOpen = this.state.isOpen;
       var selected = this.getValueArray(this.props.value).map(function (v) {
-        return v[_this4.props.labelKey];
+        return v[_this5.props.labelKey];
       }).join(', ');
       var selectedLabel = selected.length ? "Selected ".concat(selected, ". ") : '';
       var label = "".concat(selectedLabel).concat(this.props['aria-label'] || '');
@@ -946,13 +960,18 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "renderClear",
     value: function renderClear() {
+      var _sizes;
+
       var isValueEntered = Boolean(this.props.value && this.props.value.length || this.state.inputValue);
 
       if (!this.props.clearable || this.props.disabled || this.props.isLoading || !isValueEntered) {
         return;
       }
 
-      var sharedProps = this.getSharedProps();
+      var _this$getSharedProps = this.getSharedProps(),
+          $size = _this$getSharedProps.$size,
+          sharedProps = _objectWithoutProperties(_this$getSharedProps, ["$size"]);
+
       var _this$props$overrides4 = this.props.overrides,
           overrides = _this$props$overrides4 === void 0 ? {} : _this$props$overrides4;
 
@@ -962,27 +981,28 @@ var Select = /*#__PURE__*/function (_React$Component) {
           clearIconProps = _getOverrides6[1];
 
       var ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+      var sizes = (_sizes = {}, _defineProperty(_sizes, _constants.SIZE.mini, 15), _defineProperty(_sizes, _constants.SIZE.compact, 15), _defineProperty(_sizes, _constants.SIZE.default, 18), _defineProperty(_sizes, _constants.SIZE.large, 22), _sizes);
       return /*#__PURE__*/React.createElement(ClearIcon, _extends({
         title: ariaLabel,
         "aria-label": ariaLabel,
         onClick: this.clearValue,
         role: "button",
-        overrides: {
-          Svg: {
-            component: _styledComponents.StyledClearIcon,
-            props: overrides.ClearIcon && overrides.ClearIcon.props ? overrides.ClearIcon.props : {},
-            style: overrides.ClearIcon && overrides.ClearIcon.style ? overrides.ClearIcon.style : {}
-          }
-        }
+        size: sizes[this.props.size] || sizes[_constants.SIZE.default]
       }, sharedProps, clearIconProps));
     }
   }, {
     key: "renderArrow",
     value: function renderArrow() {
+      var _sizes2;
+
       if (this.props.type !== _constants.TYPE.select) {
         return null;
       }
 
+      var _this$getSharedProps2 = this.getSharedProps(),
+          $size = _this$getSharedProps2.$size,
+          sharedProps = _objectWithoutProperties(_this$getSharedProps2, ["$size"]);
+
       var _this$props$overrides5 = this.props.overrides,
           overrides = _this$props$overrides5 === void 0 ? {} : _this$props$overrides5;
 
@@ -991,17 +1011,21 @@ var Select = /*#__PURE__*/function (_React$Component) {
           SelectArrow = _getOverrides8[0],
           selectArrowProps = _getOverrides8[1];
 
-      var sharedProps = this.getSharedProps();
-      return /*#__PURE__*/React.createElement(SelectArrow, _extends({
-        size: 16,
-        title: 'open',
-        overrides: {
-          Svg: {
-            component: _styledComponents.StyledSelectArrow,
-            props: overrides.SelectArrow && overrides.SelectArrow.props ? overrides.SelectArrow.props : {},
-            style: overrides.SelectArrow && overrides.SelectArrow.style ? overrides.SelectArrow.style : {}
+      selectArrowProps.overrides = (0, _overrides.mergeOverrides)({
+        Svg: {
+          style: function style(_ref4) {
+            var $theme = _ref4.$theme,
+                $disabled = _ref4.$disabled;
+            return {
+              color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary
+            };
           }
         }
+      }, selectArrowProps.overrides);
+      var sizes = (_sizes2 = {}, _defineProperty(_sizes2, _constants.SIZE.mini, 16), _defineProperty(_sizes2, _constants.SIZE.compact, 16), _defineProperty(_sizes2, _constants.SIZE.default, 20), _defineProperty(_sizes2, _constants.SIZE.large, 24), _sizes2);
+      return /*#__PURE__*/React.createElement(SelectArrow, _extends({
+        size: sizes[this.props.size] || sizes[_constants.SIZE.default],
+        title: 'open'
       }, sharedProps, selectArrowProps));
     }
   }, {
@@ -1033,7 +1057,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "filterOptions",
     value: function filterOptions(excludeOptions) {
-      var _this5 = this;
+      var _this6 = this;
 
       var filterValue = this.state.inputValue.trim(); // apply filter function
 
@@ -1046,9 +1070,9 @@ var Select = /*#__PURE__*/function (_React$Component) {
 
 
       var filterDoesNotMatchOption = this.props.ignoreCase ? function (opt) {
-        return opt[_this5.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
+        return opt[_this6.props.labelKey].toLowerCase() !== filterValue.toLowerCase().trim();
       } : function (opt) {
-        return opt[_this5.props.labelKey] !== filterValue.trim();
+        return opt[_this6.props.labelKey] !== filterValue.trim();
       };
 
       if (filterValue && this.props.creatable && this.options.concat(this.props.value).every(filterDoesNotMatchOption)) {
@@ -1103,7 +1127,7 @@ var Select = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
-      var _this6 = this;
+      var _this7 = this;
 
       this.options = (0, _index3.normalizeOptions)(this.props.options);
       var _this$props2 = this.props,
@@ -1175,55 +1199,55 @@ var Select = /*#__PURE__*/function (_React$Component) {
           , _extends({
             innerRef: function innerRef(ref) {
               if (!ref) return;
-              _this6.anchor = ref.anchorRef;
+              _this7.anchor = ref.anchorRef;
             },
             autoFocus: false,
             focusLock: false,
-            mountNode: _this6.props.mountNode,
+            mountNode: _this7.props.mountNode,
             onEsc: function onEsc() {
-              return _this6.closeMenu();
+              return _this7.closeMenu();
             },
             isOpen: isOpen,
             popoverMargin: 0,
             content: function content() {
               var dropdownProps = {
-                error: _this6.props.error,
-                positive: _this6.props.positive,
-                getOptionLabel: _this6.props.getOptionLabel || _this6.getOptionLabel.bind(_this6, locale),
+                error: _this7.props.error,
+                positive: _this7.props.positive,
+                getOptionLabel: _this7.props.getOptionLabel || _this7.getOptionLabel.bind(_this7, locale),
                 id: listboxId,
-                isLoading: _this6.props.isLoading,
-                labelKey: _this6.props.labelKey,
-                maxDropdownHeight: _this6.props.maxDropdownHeight,
+                isLoading: _this7.props.isLoading,
+                labelKey: _this7.props.labelKey,
+                maxDropdownHeight: _this7.props.maxDropdownHeight,
                 multi: multi,
                 noResultsMsg: noResultsMsg,
-                onActiveDescendantChange: _this6.handleActiveDescendantChange,
-                onItemSelect: _this6.selectValue,
+                onActiveDescendantChange: _this7.handleActiveDescendantChange,
+                onItemSelect: _this7.selectValue,
                 options: options,
                 overrides: overrides,
-                required: _this6.props.required,
-                searchable: _this6.props.searchable,
-                size: _this6.props.size,
+                required: _this7.props.required,
+                searchable: _this7.props.searchable,
+                size: _this7.props.size,
                 type: type,
                 value: valueArray,
-                valueKey: _this6.props.valueKey,
-                width: _this6.anchor.current ? _this6.anchor.current.clientWidth : null,
-                keyboardControlNode: _this6.anchor
+                valueKey: _this7.props.valueKey,
+                width: _this7.anchor.current ? _this7.anchor.current.clientWidth : null,
+                keyboardControlNode: _this7.anchor
               };
               return /*#__PURE__*/React.createElement(_dropdown.default, _extends({
-                innerRef: _this6.dropdown
+                innerRef: _this7.dropdown
               }, dropdownProps));
             },
             placement: _index2.PLACEMENT.bottom
           }, popoverProps), /*#__PURE__*/React.createElement(Root, _extends({
-            onBlur: _this6.handleBlur,
+            onBlur: _this7.handleBlur,
             "data-baseweb": "select"
           }, sharedProps, rootProps), /*#__PURE__*/React.createElement(ControlContainer, _extends({
-            onKeyDown: _this6.handleKeyDown,
-            onClick: _this6.handleClick,
-            onTouchEnd: _this6.handleTouchEnd,
-            onTouchMove: _this6.handleTouchMove,
-            onTouchStart: _this6.handleTouchStart
-          }, sharedProps, controlContainerProps), type === _constants.TYPE.search ? _this6.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this6.renderValue(valueArray, isOpen, locale), _this6.renderInput(listboxId), _this6.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this6.props.placeholder !== 'undefined' ? _this6.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this6.renderLoading(), _this6.renderClear(), type === _constants.TYPE.select ? _this6.renderArrow() : null))));
+            onKeyDown: _this7.handleKeyDown,
+            onClick: _this7.handleClick,
+            onTouchEnd: _this7.handleTouchEnd,
+            onTouchMove: _this7.handleTouchMove,
+            onTouchStart: _this7.handleTouchStart
+          }, sharedProps, controlContainerProps), type === _constants.TYPE.search ? _this7.renderSearch() : null, /*#__PURE__*/React.createElement(ValueContainer, _extends({}, sharedProps, valueContainerProps), _this7.renderValue(valueArray, isOpen, locale), _this7.renderInput(listboxId), _this7.shouldShowPlaceholder() ? /*#__PURE__*/React.createElement(Placeholder, _extends({}, sharedProps, placeholderProps), typeof _this7.props.placeholder !== 'undefined' ? _this7.props.placeholder : locale.select.placeholder) : null), /*#__PURE__*/React.createElement(IconsContainer, _extends({}, sharedProps, iconsContainerProps), _this7.renderLoading(), _this7.renderClear(), type === _constants.TYPE.select ? _this7.renderArrow() : null))));
         });
       });
     }

package/select/select-component.js.flow

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 /* eslint-disable cup/no-undef */
 import * as React from 'react';
 
-import { getOverrides } from '../helpers/overrides.js';
+import { getOverrides, mergeOverrides } from '../helpers/overrides.js';
 import DeleteAlt from '../icon/delete-alt.js';
 import TriangleDownIcon from '../icon/triangle-down.js';
 import SearchIconComponent from '../icon/search.js';
@@ -18,7 +18,7 @@ import { Popover, PLACEMENT } from '../popover/index.js';
 import { UIDConsumer } from 'react-uid';
 
 import AutosizeInput from './autosize-input.js';
-import { TYPE, STATE_CHANGE_TYPE } from './constants.js';
+import { TYPE, STATE_CHANGE_TYPE, SIZE } from './constants.js';
 import defaultProps from './default-props.js';
 import SelectDropdown from './dropdown.js';
 import {
@@ -28,8 +28,6 @@ import {
   StyledValueContainer,
   StyledInputContainer,
   StyledIconsContainer,
-  StyledSelectArrow,
-  StyledClearIcon,
   StyledSearchIconContainer,
   StyledLoadingIndicator,
 } from './styled-components.js';
@@ -144,7 +142,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
       }
 
       if (!prevState.isFocused && this.state.isFocused) {
-        document.addEventListener('click', this.handleClickOutside);
+        setTimeout(() => document.addEventListener('click', this.handleClickOutside), 0);
       }
     }
   }
@@ -497,11 +495,16 @@ 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 (typeof this.props.inputRef === 'function') {
+      this.props.inputRef(input);
+    } else if (this.props.inputRef) {
+      this.props.inputRef.current = input;
+    }
+
     if (this.props.controlRef && typeof this.props.controlRef === 'function') {
       this.props.controlRef(input);
     }
@@ -783,10 +786,17 @@ class Select extends React.Component<PropsT, SelectStateT> {
       return;
     }
 
-    const sharedProps = this.getSharedProps();
+    const { $size, ...sharedProps } = this.getSharedProps();
     const { overrides = {} } = this.props;
     const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
+
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
+    const sizes = {
+      [SIZE.mini]: 15,
+      [SIZE.compact]: 15,
+      [SIZE.default]: 18,
+      [SIZE.large]: 22,
+    };
 
     return (
       <ClearIcon
@@ -794,15 +804,7 @@ class Select extends React.Component<PropsT, SelectStateT> {
         aria-label={ariaLabel}
         onClick={this.clearValue}
         role="button"
-        overrides={{
-          Svg: {
-            component: StyledClearIcon,
-            props:
-              overrides.ClearIcon && overrides.ClearIcon.props ? overrides.ClearIcon.props : {},
-            style:
-              overrides.ClearIcon && overrides.ClearIcon.style ? overrides.ClearIcon.style : {},
-          },
-        }}
+        size={sizes[this.props.size] || sizes[SIZE.default]}
         {...sharedProps}
         {...clearIconProps}
       />
@@ -813,26 +815,34 @@ class Select extends React.Component<PropsT, SelectStateT> {
     if (this.props.type !== TYPE.select) {
       return null;
     }
+
+    const { $size, ...sharedProps } = this.getSharedProps();
     const { overrides = {} } = this.props;
     const [SelectArrow, selectArrowProps] = getOverrides(overrides.SelectArrow, TriangleDownIcon);
-    const sharedProps = this.getSharedProps();
+    selectArrowProps.overrides = mergeOverrides(
+      {
+        Svg: {
+          style: ({ $theme, $disabled }) => {
+            return {
+              color: $disabled ? $theme.colors.inputTextDisabled : $theme.colors.contentPrimary,
+            };
+          },
+        },
+      },
+      selectArrowProps.overrides
+    );
+
+    const sizes = {
+      [SIZE.mini]: 16,
+      [SIZE.compact]: 16,
+      [SIZE.default]: 20,
+      [SIZE.large]: 24,
+    };
+
     return (
       <SelectArrow
-        size={16}
+        size={sizes[this.props.size] || sizes[SIZE.default]}
         title={'open'}
-        overrides={{
-          Svg: {
-            component: StyledSelectArrow,
-            props:
-              overrides.SelectArrow && overrides.SelectArrow.props
-                ? overrides.SelectArrow.props
-                : {},
-            style:
-              overrides.SelectArrow && overrides.SelectArrow.style
-                ? overrides.SelectArrow.style
-                : {},
-          },
-        }}
         {...sharedProps}
         {...selectArrowProps}
       />

package/select/types.js.flow

@@ -138,6 +138,7 @@ export type PropsT = {
   id?: string,
   /** Defines if the comparison for a new creatable value should be case-insensitive. */
   ignoreCase?: boolean,
+  inputRef?: ReactRefT<HTMLInputElement>,
   /** An imperative handle exposing internal methods. */
   controlRef?: ControlRefT,
   /** Defines if the select is in a loading (async) state. */

package/select/utils/default-filter-options.js

@@ -50,7 +50,7 @@ var filterOptions = function filterOptions(options, filterValue, excludeOptions,
     acc.add(option[props.valueKey]);
     return acc;
   }, new Set());
-  var re = new RegExp("".concat(props.matchPos === 'start' ? '$' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
+  var re = new RegExp("".concat(props.matchPos === 'start' ? '^' : '').concat(escapeRegExp(filterValue)), props.ignoreCase ? 'i' : ''); // $FlowFixMe
 
   return options.filter(function (option) {
     if (excludeValues.has(option[props.valueKey])) return false;

package/select/utils/default-filter-options.js.flow

@@ -58,7 +58,7 @@ const filterOptions = (
   }, new Set());
 
   const re = new RegExp(
-    `${props.matchPos === 'start' ? '$' : ''}${escapeRegExp(filterValue)}`,
+    `${props.matchPos === 'start' ? '^' : ''}${escapeRegExp(filterValue)}`,
     props.ignoreCase ? 'i' : ''
   );
 

package/side-navigation/index.d.ts

@@ -1,10 +1,10 @@
 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 STATE_CHANGE_TYPE {
+export declare const STATE_CHANGE_TYPE: {
   change: 'change';
-}
+};
 
 export interface Item {
   title: React.ReactNode;
@@ -25,7 +25,7 @@ export interface NavigationProps {
   activeItemId: string;
   activePredicate?: (item: any, activeItemId: string) => boolean;
   items?: Item[];
-  onChange?: (args: {item: any; event: React.SyntheticEvent<any>}) => any;
+  onChange?: (args: { item: any; event: React.SyntheticEvent<any> }) => any;
   overrides?: NavigationOverrides;
   mapItem?: (item: Item) => Item;
 }
@@ -44,7 +44,7 @@ export interface NavItemProps {
   $level?: number;
   $selectable?: boolean;
   item: Item;
-  onSelect?: (args: {item: any; event: Event | KeyboardEvent}) => any;
+  onSelect?: (args: { item: any; event: Event | KeyboardEvent }) => any;
   overrides?: NavItemOverrides;
 }
 
@@ -53,10 +53,8 @@ export class NavItem extends React.Component<NavItemProps> {
   handleKeyDown(event: React.KeyboardEvent): void;
 }
 
-export const StyledRoot: StyletronComponent<any>;
-export const StyledNavItemContainer: StyletronComponent<any>;
-export const StyledNavLink: StyletronComponent<any>;
-export const StyledNavItem: StyletronComponent<any>;
-export const StyledSubNavContainer: StyletronComponent<any>;
-
-export const STATE_CHANGE_TYPE: STATE_CHANGE_TYPE;
+export declare const StyledRoot: StyletronComponent<any>;
+export declare const StyledNavItemContainer: StyletronComponent<any>;
+export declare const StyledNavLink: StyletronComponent<any>;
+export declare const StyledNavItem: StyletronComponent<any>;
+export declare const StyledSubNavContainer: StyletronComponent<any>;

package/skeleton/index.d.ts

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import {Override} from '../overrides';
+import { Override } from '../overrides';
 
 export type SkeletonOverrides = {
   Root?: Override<any>;