baseui 10.5.0 → 10.6.0

package/drawer/drawer.js

@@ -342,7 +342,8 @@ var Drawer = /*#__PURE__*/function (_React$Component) {
       return /*#__PURE__*/React.createElement(_index.LocaleContext.Consumer, null, function (locale) {
         return /*#__PURE__*/React.createElement(_reactFocusLock.default, {
           returnFocus: true,
-          autoFocus: autoFocus
+          autoFocus: autoFocus,
+          noFocusGuards: true
         }, /*#__PURE__*/React.createElement(Root, _extends({
           "data-baseweb": "drawer",
           ref: _this3.getRef('Root')

package/drawer/drawer.js.flow

@@ -253,7 +253,7 @@ class Drawer extends React.Component<DrawerPropsT, DrawerStateT> {
       <LocaleContext.Consumer>
         {locale => {
           return (
-            <FocusLock returnFocus autoFocus={autoFocus}>
+            <FocusLock returnFocus autoFocus={autoFocus} noFocusGuards={true}>
               <Root
                 data-baseweb="drawer"
                 ref={this.getRef('Root')}

package/es/button/styled-components.js

@@ -39,7 +39,7 @@ export const BaseButton = styled('button', ({
   cursor: 'pointer',
   ':disabled': {
     cursor: 'not-allowed',
-    backgroundColor: $theme.colors.buttonDisabledFill,
+    backgroundColor: $kind === KIND.minimal || $kind === KIND.tertiary ? 'transparent' : $theme.colors.buttonDisabledFill,
     color: $theme.colors.buttonDisabledText
   },
   marginLeft: 0,

package/es/datepicker/calendar-header.js

@@ -9,11 +9,12 @@ This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
 import * as React from 'react';
-import ArrowRight from '../icon/arrow-right.js';
-import ArrowLeft from '../icon/arrow-left.js';
-import TriangleDown from '../icon/triangle-down.js';
+import ChevronRight from '../icon/chevron-right.js';
+import ChevronLeft from '../icon/chevron-left.js';
+import ChevronDown from '../icon/chevron-down.js';
 import dateFnsAdapter from './utils/date-fns-adapter.js';
 import DateHelpers from './utils/date-helpers.js';
+import { getFilteredMonthItems } from './utils/calendar-header-helpers.js';
 import { StatefulMenu } from '../menu/index.js';
 import { Popover } from '../popover/index.js';
 import { LocaleContext } from '../locale/index.js';
@@ -38,10 +39,6 @@ const DIRECTION = {
   PREVIOUS: 'previous'
 };
 
-function yearMonthToId(year, month) {
-  return `${year}-${month}`;
-}
-
 function idToYearMonth(id) {
   return id.split('-').map(Number);
 }
@@ -52,14 +49,13 @@ export default class CalendarHeader extends React.Component {
 
     _defineProperty(this, "dateHelpers", void 0);
 
-    _defineProperty(this, "items", void 0);
+    _defineProperty(this, "monthItems", void 0);
 
-    _defineProperty(this, "minYear", void 0);
-
-    _defineProperty(this, "maxYear", void 0);
+    _defineProperty(this, "yearItems", void 0);
 
     _defineProperty(this, "state", {
-      isMonthYearDropdownOpen: false,
+      isMonthDropdownOpen: false,
+      isYearDropdownOpen: false,
       isFocusVisible: false
     });
 
@@ -67,17 +63,73 @@ export default class CalendarHeader extends React.Component {
       return this.props.date || this.dateHelpers.date();
     });
 
-    _defineProperty(this, "handleYearChange", ({
-      value
-    }) => {
-      if (this.props.onYearChange) {
-        // $FlowFixMe
-        this.props.onYearChange({
-          date: this.dateHelpers.setYear(this.getDateProp(), value[0].id)
-        });
+    _defineProperty(this, "getYearItems", () => {
+      const date = this.getDateProp();
+      const maxDate = this.props.maxDate;
+      const minDate = this.props.minDate;
+      const maxYear = maxDate ? this.dateHelpers.getYear(maxDate) : MAX_YEAR;
+      const minYear = minDate ? this.dateHelpers.getYear(minDate) : MIN_YEAR;
+      const selectedMonth = this.dateHelpers.getMonth(date); // TODO: this logic can be optimized to only run when minDate / maxDate change
+
+      this.yearItems = Array.from({
+        length: maxYear - minYear + 1
+      }, (_, i) => minYear + i).map(year => ({
+        id: year.toString(),
+        label: year.toString()
+      }));
+      const monthOfMaxDate = maxDate ? this.dateHelpers.getMonth(maxDate) : MAX_MONTH;
+      const monthOfMinDate = minDate ? this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [0,1,.... monthOfMaxDate]
+
+      const maxYearMonths = Array.from({
+        length: monthOfMaxDate + 1
+      }, (x, i) => i); // Generates array like [monthOfMinDate, ...., 10, 11]
+
+      const minYearMonths = Array.from({
+        length: 12 - monthOfMinDate
+      }, (x, i) => i + monthOfMinDate);
+
+      if (selectedMonth > maxYearMonths[maxYearMonths.length - 1]) {
+        const lastIdx = this.yearItems.length - 1;
+        this.yearItems[lastIdx] = { ...this.yearItems[lastIdx],
+          disabled: true
+        };
+      }
+
+      if (selectedMonth < minYearMonths[0]) {
+        this.yearItems[0] = { ...this.yearItems[0],
+          disabled: true
+        };
       }
     });
 
+    _defineProperty(this, "getMonthItems", () => {
+      const date = this.getDateProp();
+      const year = this.dateHelpers.getYear(date);
+      const maxDate = this.props.maxDate;
+      const minDate = this.props.minDate;
+      const maxYear = maxDate ? this.dateHelpers.getYear(maxDate) : MAX_YEAR;
+      const minYear = minDate ? this.dateHelpers.getYear(minDate) : MIN_YEAR;
+      const monthOfMaxDate = maxDate ? this.dateHelpers.getMonth(maxDate) : MAX_MONTH; // Generates array like [0,1,.... monthOfMaxDate]
+
+      const maxYearMonths = Array.from({
+        length: monthOfMaxDate + 1
+      }, (x, i) => i);
+      const monthOfMinDate = minDate ? this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [monthOfMinDate, ...., 10, 11]
+
+      const minYearMonths = Array.from({
+        length: 12 - monthOfMinDate
+      }, (x, i) => i + monthOfMinDate);
+      const maxMinYearMonthsIntersection = maxYearMonths.filter(year => minYearMonths.includes(year));
+      const filterMonthsList = year === maxYear && year === minYear ? maxMinYearMonthsIntersection : year === maxYear ? maxYearMonths : year === minYear ? minYearMonths : null;
+
+      const formatMonthLabel = month => this.dateHelpers.getMonthInLocale(month, this.props.locale);
+
+      this.monthItems = getFilteredMonthItems({
+        filterMonthsList,
+        formatMonthLabel
+      });
+    });
+
     _defineProperty(this, "increaseMonth", () => {
       if (this.props.onMonthChange) {
         // $FlowFixMe
@@ -176,7 +228,7 @@ export default class CalendarHeader extends React.Component {
       }
 
       const [PrevButton, prevButtonProps] = getOverrides(overrides.PrevButton, StyledPrevButton);
-      const [PrevButtonIcon, prevButtonIconProps] = getOverrides(overrides.PrevButtonIcon, theme.direction === 'rtl' ? ArrowRight : ArrowLeft);
+      const [PrevButtonIcon, prevButtonIconProps] = getOverrides(overrides.PrevButtonIcon, theme.direction === 'rtl' ? ChevronRight : ChevronLeft);
       let clickHandler = this.decreaseMonth;
 
       if (allPrevDaysDisabled) {
@@ -231,7 +283,7 @@ export default class CalendarHeader extends React.Component {
       }
 
       const [NextButton, nextButtonProps] = getOverrides(overrides.NextButton, StyledNextButton);
-      const [NextButtonIcon, nextButtonIconProps] = getOverrides(overrides.NextButtonIcon, theme.direction === 'rtl' ? ArrowLeft : ArrowRight);
+      const [NextButtonIcon, nextButtonIconProps] = getOverrides(overrides.NextButtonIcon, theme.direction === 'rtl' ? ChevronLeft : ChevronRight);
       let clickHandler = this.increaseMonth; // The other option is to always provide a click handler and let customers
       // override its functionality based on the `$allPrevDaysDisabled` prop
       // in a custom NextButton component override
@@ -262,7 +314,7 @@ export default class CalendarHeader extends React.Component {
     });
 
     _defineProperty(this, "canArrowsOpenDropdown", event => {
-      if (!this.state.isMonthYearDropdownOpen) {
+      if (!this.state.isMonthDropdownOpen && !this.state.isYearDropdownOpen) {
         if (event.key === 'ArrowUp' || event.key === 'ArrowDown') {
           return true;
         }
@@ -273,10 +325,10 @@ export default class CalendarHeader extends React.Component {
 
     _defineProperty(this, "renderMonthYearDropdown", () => {
       const date = this.getDateProp();
+      const month = this.dateHelpers.getMonth(date);
+      const year = this.dateHelpers.getYear(date);
       const {
         locale,
-        maxDate,
-        minDate,
         overrides = {}
       } = this.props;
       const [MonthYearSelectButton, monthYearSelectButtonProps] = getOverrides(overrides.MonthYearSelectButton, StyledMonthYearSelectButton);
@@ -294,79 +346,38 @@ export default class CalendarHeader extends React.Component {
       menuProps && menuProps.overrides); // $FlowFixMe
 
       menuProps.overrides = menuOverrides;
-      const defaultMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];
-      const maxYear = maxDate ? this.dateHelpers.getYear(maxDate) : MAX_YEAR;
-      const minYear = minDate ? this.dateHelpers.getYear(minDate) : MIN_YEAR;
-      const maxDateMonth = maxDate ? this.dateHelpers.getMonth(maxDate) : MAX_MONTH; // Generates array like [0,1,.... maxDateMonth]
-
-      const maxYearMonths = Array.from({
-        length: maxDateMonth + 1
-      }, (x, i) => i);
-      const minDateMonth = minDate ? this.dateHelpers.getMonth(minDate) : MIN_MONTH; // Generates array like [minDateMonth, ...., 10, 11]
-
-      const minYearMonths = Array.from({
-        length: 12 - minDateMonth
-      }, (x, i) => i + minDateMonth);
-
-      if (this.maxYear !== maxYear || this.minYear !== minYear) {
-        this.maxYear = maxYear;
-        this.minYear = minYear;
-        this.items = [];
-
-        for (let i = minYear; i <= maxYear; i++) {
-          let months;
-
-          if (i === minYear && i === maxYear) {
-            months = maxYearMonths.filter(month => minYearMonths.includes(month));
-          } else if (i === minYear) {
-            months = minYearMonths;
-          } else if (i === maxYear) {
-            months = maxYearMonths;
-          } else {
-            months = defaultMonths;
-          }
-
-          months.forEach(month => {
-            this.items.push({
-              id: yearMonthToId(i, month),
-              label: `${this.dateHelpers.getMonthInLocale(month, locale)} ${i}`
-            });
-          });
-        }
-      }
-
-      const initialIndex = this.items.findIndex(item => {
-        return item.id === yearMonthToId(this.dateHelpers.getYear(date), this.dateHelpers.getMonth(date));
-      });
-      const monthYearTitle = `${this.dateHelpers.getMonthInLocale(this.dateHelpers.getMonth(date), locale)} ${this.dateHelpers.getYear(date)}`;
-      return this.isMultiMonthHorizontal() ? /*#__PURE__*/React.createElement("div", null, monthYearTitle) : /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+      const initialMonthIndex = this.monthItems.findIndex(month => month.id === this.dateHelpers.getMonth(date).toString());
+      const initialYearIndex = this.yearItems.findIndex(year => year.id === this.dateHelpers.getYear(date).toString());
+      const monthTitle = `${this.dateHelpers.getMonthInLocale(this.dateHelpers.getMonth(date), locale)}`;
+      const yearTitle = `${this.dateHelpers.getYear(date)}`;
+      return this.isMultiMonthHorizontal() ? /*#__PURE__*/React.createElement("div", null, `${monthTitle} ${yearTitle}`) : /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
         placement: "bottom",
         autoFocus: true,
         focusLock: true,
-        isOpen: this.state.isMonthYearDropdownOpen,
+        isOpen: this.state.isMonthDropdownOpen,
         onClick: () => {
           this.setState(prev => ({
-            isMonthYearDropdownOpen: !prev.isMonthYearDropdownOpen
+            isMonthDropdownOpen: !prev.isMonthDropdownOpen
           }));
         },
         onClickOutside: () => this.setState({
-          isMonthYearDropdownOpen: false
+          isMonthDropdownOpen: false
         }),
         onEsc: () => this.setState({
-          isMonthYearDropdownOpen: false
+          isMonthDropdownOpen: false
         }),
         content: () => /*#__PURE__*/React.createElement(OverriddenStatefulMenu, _extends({
           initialState: {
-            highlightedIndex: initialIndex,
+            highlightedIndex: initialMonthIndex,
             isFocused: true
           },
-          items: this.items,
+          items: this.monthItems,
           onItemSelect: ({
             item,
             event
           }) => {
             event.preventDefault();
-            const [year, month] = idToYearMonth(item.id);
+            const month = idToYearMonth(item.id);
             const updatedDate = this.dateHelpers.set(date, {
               year,
               month
@@ -374,11 +385,79 @@ export default class CalendarHeader extends React.Component {
             this.props.onMonthChange && this.props.onMonthChange({
               date: updatedDate
             });
+            this.setState({
+              isMonthDropdownOpen: false
+            });
+          }
+        }, menuProps))
+      }, popoverProps), /*#__PURE__*/React.createElement(MonthYearSelectButton, _extends({
+        "aria-live": "polite",
+        type: "button",
+        $isFocusVisible: this.state.isFocusVisible,
+        onKeyUp: event => {
+          if (this.canArrowsOpenDropdown(event)) {
+            this.setState({
+              isMonthDropdownOpen: true
+            });
+          }
+        },
+        onKeyDown: event => {
+          if (this.canArrowsOpenDropdown(event)) {
+            // disables page scroll
+            event.preventDefault();
+          }
+
+          if (event.key === 'Tab') {
+            this.setState({
+              isMonthDropdownOpen: false
+            });
+          }
+        }
+      }, monthYearSelectButtonProps), monthTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
+        title: "",
+        overrides: {
+          Svg: {
+            props: {
+              role: 'presentation'
+            }
+          }
+        }
+      })))), /*#__PURE__*/React.createElement(OverriddenPopover, _extends({
+        placement: "bottom",
+        focusLock: true,
+        isOpen: this.state.isYearDropdownOpen,
+        onClick: () => {
+          this.setState(prev => ({
+            isYearDropdownOpen: !prev.isYearDropdownOpen
+          }));
+        },
+        onClickOutside: () => this.setState({
+          isYearDropdownOpen: false
+        }),
+        onEsc: () => this.setState({
+          isYearDropdownOpen: false
+        }),
+        content: () => /*#__PURE__*/React.createElement(OverriddenStatefulMenu, _extends({
+          initialState: {
+            highlightedIndex: initialYearIndex,
+            isFocused: true
+          },
+          items: this.yearItems,
+          onItemSelect: ({
+            item,
+            event
+          }) => {
+            event.preventDefault();
+            const year = idToYearMonth(item.id);
+            const updatedDate = this.dateHelpers.set(date, {
+              year,
+              month
+            });
             this.props.onYearChange && this.props.onYearChange({
               date: updatedDate
             });
             this.setState({
-              isMonthYearDropdownOpen: false
+              isYearDropdownOpen: false
             });
           }
         }, menuProps))
@@ -389,7 +468,7 @@ export default class CalendarHeader extends React.Component {
         onKeyUp: event => {
           if (this.canArrowsOpenDropdown(event)) {
             this.setState({
-              isMonthYearDropdownOpen: true
+              isYearDropdownOpen: true
             });
           }
         },
@@ -401,11 +480,11 @@ export default class CalendarHeader extends React.Component {
 
           if (event.key === 'Tab') {
             this.setState({
-              isMonthYearDropdownOpen: false
+              isYearDropdownOpen: false
             });
           }
         }
-      }, monthYearSelectButtonProps), monthYearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(TriangleDown, {
+      }, monthYearSelectButtonProps), yearTitle, /*#__PURE__*/React.createElement(MonthYearSelectIconContainer, monthYearSelectIconContainerProps, /*#__PURE__*/React.createElement(ChevronDown, {
         title: "",
         overrides: {
           Svg: {
@@ -414,11 +493,32 @@ export default class CalendarHeader extends React.Component {
             }
           }
         }
-      }))));
+      })))));
     });
 
     this.dateHelpers = new DateHelpers(props.adapter);
-    this.items = [];
+    this.monthItems = [];
+    this.yearItems = [];
+  }
+
+  componentDidMount() {
+    this.getYearItems();
+    this.getMonthItems();
+  }
+
+  componentDidUpdate(prevProps) {
+    const selectedMonthDidChange = this.dateHelpers.getMonth(this.props.date) !== this.dateHelpers.getMonth(prevProps.date);
+    const selectedYearDidChange = this.dateHelpers.getYear(this.props.date) !== this.dateHelpers.getYear(prevProps.date);
+
+    if (selectedMonthDidChange) {
+      // re-calculate yearItems
+      this.getYearItems();
+    }
+
+    if (selectedYearDidChange) {
+      // re-calculate monthItems
+      this.getMonthItems();
+    }
   }
 
   render() {

package/es/datepicker/constants.js

@@ -20,4 +20,5 @@ export const STATE_CHANGE_TYPE = Object.freeze({
   mouseOver: 'mouseOver',
   mouseLeave: 'mouseLeave'
 });
-export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+export const WEEKDAYS = [0, 1, 2, 3, 4, 5, 6];
+export const DEFAULT_MONTHS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11];

package/es/datepicker/day.js

@@ -292,6 +292,7 @@ export default class Day extends React.Component {
       $isFocusVisible: this.state.isFocusVisible,
       $startOfMonth: this.dateHelpers.isStartOfMonth(date),
       $endOfMonth: this.dateHelpers.isEndOfMonth(date),
+      $month: this.getMonthProp(),
       $outsideMonth,
       $outsideMonthWithinRange,
       $peekNextMonth: this.props.peekNextMonth,

package/es/datepicker/utils/calendar-header-helpers.js

@@ -0,0 +1,34 @@
+/*
+Copyright (c) Uber Technologies, Inc.
+
+This source code is licensed under the MIT license found in the
+LICENSE file in the root directory of this source tree.
+*/
+import { DEFAULT_MONTHS } from '../constants.js';
+
+const getDefaultMonthItems = formatMonthLabel => DEFAULT_MONTHS.map(month => ({
+  id: month.toString(),
+  label: formatMonthLabel(month)
+}));
+
+export const filterMonthItems = (monthItems, filterList) => monthItems.map(month => {
+  if (!filterList.includes(Number(month.id))) {
+    return { ...month,
+      disabled: true
+    };
+  }
+
+  return month;
+});
+export const getFilteredMonthItems = ({
+  filterMonthsList,
+  formatMonthLabel
+}) => {
+  let monthItems = getDefaultMonthItems(formatMonthLabel);
+
+  if (filterMonthsList) {
+    monthItems = filterMonthItems(monthItems, filterMonthsList);
+  }
+
+  return monthItems;
+};

package/es/dnd-list/index.js

@@ -4,7 +4,8 @@ Copyright (c) Uber Technologies, Inc.
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 */
-export { arrayMove, arrayRemove } from 'react-movable';
+import { arrayMove, arrayRemove } from 'react-movable';
+export { arrayMove, arrayRemove };
 export { default as StatefulList } from './stateful-list.js';
 export { default as StatefulListContainer } from './stateful-list-container.js';
 export { default as List } from './list.js'; // Constants

package/es/drawer/drawer.js

@@ -252,7 +252,8 @@ class Drawer extends React.Component {
     return /*#__PURE__*/React.createElement(LocaleContext.Consumer, null, locale => {
       return /*#__PURE__*/React.createElement(FocusLock, {
         returnFocus: true,
-        autoFocus: autoFocus
+        autoFocus: autoFocus,
+        noFocusGuards: true
       }, /*#__PURE__*/React.createElement(Root, _extends({
         "data-baseweb": "drawer",
         ref: this.getRef('Root')

package/es/popover/stateful-container.js

@@ -25,6 +25,10 @@ class StatefulContainer extends React.Component {
         this.props.onBlur(e);
       }
 
+      if (this.props.focusLock || this.props.autoFocus) {
+        return;
+      }
+
       this.close();
     });
 

package/es/rating/emoticon-rating.js

@@ -144,7 +144,9 @@ class EmoticonRating extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "emoticon-rating",
       role: "radiogroup",
-      onBlur: () => this.updatePreview(undefined),
+      onBlur: e => {
+        if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
+      },
       onMouseLeave: () => this.updatePreview(undefined)
     }, rootProps), this.renderRatingContents());
   }

package/es/rating/star-rating.js

@@ -147,7 +147,9 @@ class StarRating extends React.Component {
     return /*#__PURE__*/React.createElement(Root, _extends({
       "data-baseweb": "star-rating",
       role: "radiogroup",
-      onBlur: () => this.updatePreview(undefined),
+      onBlur: e => {
+        if (!e.currentTarget.contains(e.relatedTarget)) this.updatePreview(undefined);
+      },
       onMouseLeave: () => this.updatePreview(undefined)
     }, rootProps), this.renderRatingContents());
   }

package/es/select/select-component.js

@@ -105,7 +105,7 @@ class Select extends React.Component {
       isPseudoFocused: false
     });
 
-    _defineProperty(this, "isMounted", false);
+    _defineProperty(this, "isItMounted", false);
 
     _defineProperty(this, "handleTouchOutside", event => {
       if (containsNode(this.dropdown.current, event.target)) return;
@@ -238,7 +238,7 @@ class Select extends React.Component {
         this.props.onBlur(event);
       }
 
-      if (this.isMounted) {
+      if (this.isItMounted) {
         this.setState({
           isFocused: false,
           isOpen: false,
@@ -565,7 +565,7 @@ class Select extends React.Component {
       this.focus();
     }
 
-    this.isMounted = true;
+    this.isItMounted = true;
 
     if (this.props.methodsRef) {
       const {
@@ -601,7 +601,7 @@ class Select extends React.Component {
       document.removeEventListener('click', this.handleClickOutside);
     }
 
-    this.isMounted = false;
+    this.isItMounted = false;
   }
 
   focus() {
@@ -797,7 +797,6 @@ class Select extends React.Component {
     const [ClearIcon, clearIconProps] = getOverrides(overrides.ClearIcon, DeleteAlt);
     const ariaLabel = this.props.multi ? 'Clear all' : 'Clear value';
     return /*#__PURE__*/React.createElement(ClearIcon, _extends({
-      size: 16,
       title: ariaLabel,
       "aria-label": ariaLabel,
       onClick: this.clearValue,

package/es/select/styled-components.js

@@ -375,31 +375,61 @@ function getSvgStyles({
 export const StyledSelectArrow = styled('svg', props => {
   const {
     $theme,
-    $disabled
+    $disabled,
+    $size
   } = props;
   const {
     colors
   } = $theme;
+  const sizes = {
+    [SIZE.mini]: 16,
+    [SIZE.compact]: 16,
+    [SIZE.default]: 20,
+    [SIZE.large]: 24
+  };
+  let size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return { ...getSvgStyles({
       $theme
     }),
     color: $disabled ? colors.inputTextDisabled : colors.contentPrimary,
-    cursor: $disabled ? 'not-allowed' : 'pointer'
+    cursor: $disabled ? 'not-allowed' : 'pointer',
+    height: `${size}px`,
+    width: `${size}px`
   };
 });
 StyledSelectArrow.displayName = "StyledSelectArrow";
 export const StyledClearIcon = styled('svg', props => {
   const {
-    $theme
+    $theme,
+    $size
   } = props;
   const {
     colors
   } = $theme;
+  const sizes = {
+    [SIZE.mini]: 15,
+    [SIZE.compact]: 15,
+    [SIZE.default]: 18,
+    [SIZE.large]: 22
+  };
+  let size = sizes[SIZE.default];
+
+  if ($size) {
+    size = sizes[$size];
+  }
+
   return { ...getSvgStyles({
       $theme
     }),
     color: colors.contentPrimary,
-    cursor: 'pointer'
+    cursor: 'pointer',
+    height: `${size}px`,
+    width: `${size}px`
   };
 });
 StyledClearIcon.displayName = "StyledClearIcon";