@atlaskit/react-select 1.3.3 → 1.4.1

package/dist/es2019/components/group.js

@@ -6,14 +6,10 @@ import _extends from "@babel/runtime/helpers/extends";
 
 import { jsx } from '@emotion/react';
 import { cleanCommonProps, getStyleProps } from '../utils';
-export const groupCSS = ({
-  theme: {
-    spacing
-  }
-}, unstyled) => unstyled ? {} : {
-  paddingBottom: spacing.baseUnit * 2,
-  paddingTop: spacing.baseUnit * 2
-};
+export const groupCSS = ({}) => ({
+  paddingBottom: "var(--ds-space-100, 8px)",
+  paddingTop: "var(--ds-space-100, 8px)"
+});
 const Group = props => {
   const {
     children,
@@ -39,24 +35,18 @@ const Group = props => {
     cx: cx
   }), label), jsx("div", null, children));
 };
-export const groupHeadingCSS = ({
-  theme: {
-    colors,
-    spacing
-  }
-}, unstyled) => ({
+export const groupHeadingCSS = ({}) => ({
   label: 'group',
   cursor: 'default',
   display: 'block',
-  ...(unstyled ? {} : {
-    color: colors.neutral40,
-    fontSize: '75%',
-    fontWeight: 500,
-    marginBottom: '0.25em',
-    paddingLeft: spacing.baseUnit * 3,
-    paddingRight: spacing.baseUnit * 3,
-    textTransform: 'uppercase'
-  })
+  fontSize: '75%',
+  marginBottom: '0.25em',
+  paddingLeft: "var(--ds-space-150, 12px)",
+  paddingRight: "var(--ds-space-150, 12px)",
+  font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  color: "var(--ds-text-subtle, #44546F)",
+  fontWeight: `${"var(--ds-font-weight-bold, 700)"} !important`,
+  textTransform: 'none'
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/indicators.js

@@ -51,27 +51,19 @@ jsx(Svg, _extends({
 // Dropdown & Clear Buttons
 // ==============================
 
-const baseCSS = ({
-  isFocused,
-  theme: {
-    spacing: {
-      baseUnit
-    },
-    colors
-  }
-}, unstyled) => ({
+export const dropdownIndicatorCSS = ({
+  isCompact,
+  isDisabled
+}) => ({
   label: 'indicatorContainer',
   display: 'flex',
   transition: 'color 150ms',
-  ...(unstyled ? {} : {
-    color: isFocused ? colors.neutral60 : colors.neutral20,
-    padding: baseUnit * 2,
-    ':hover': {
-      color: isFocused ? colors.neutral80 : colors.neutral40
-    }
-  })
+  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtle, #44546F)",
+  padding: `${isCompact ? 0 : "var(--ds-space-075, 6px)"} ${"var(--ds-space-025, 2px)"}`,
+  ':hover': {
+    color: "var(--ds-text-subtle, #44546F)"
+  }
 });
-export const dropdownIndicatorCSS = baseCSS;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const DropdownIndicator = props => {
@@ -84,7 +76,18 @@ export const DropdownIndicator = props => {
     'dropdown-indicator': true
   }), innerProps), children || jsx(DownChevron, null));
 };
-export const clearIndicatorCSS = baseCSS;
+export const clearIndicatorCSS = ({
+  isCompact
+}) => ({
+  label: 'indicatorContainer',
+  display: 'flex',
+  transition: 'color 150ms',
+  color: "var(--ds-text-subtlest, #626F86)",
+  padding: `${isCompact ? 0 : "var(--ds-space-075, 6px)"} ${"var(--ds-space-025, 2px)"}`,
+  ':hover': {
+    color: "var(--ds-text-subtle, #44546F)"
+  }
+});
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const ClearIndicator = props => {
@@ -103,22 +106,14 @@ export const ClearIndicator = props => {
 // ==============================
 
 export const indicatorSeparatorCSS = ({
-  isDisabled,
-  theme: {
-    spacing: {
-      baseUnit
-    },
-    colors
-  }
-}, unstyled) => ({
+  isDisabled
+}) => ({
   label: 'indicatorSeparator',
   alignSelf: 'stretch',
   width: 1,
-  ...(unstyled ? {} : {
-    backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
-    marginBottom: baseUnit * 2,
-    marginTop: baseUnit * 2
-  })
+  backgroundColor: isDisabled ? "var(--ds-border-disabled, #091E420F)" : "var(--ds-border, #091E4224)",
+  marginBottom: "var(--ds-space-100, 8px)",
+  marginTop: "var(--ds-space-100, 8px)"
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -146,13 +141,11 @@ const loadingDotAnimations = keyframes({
 export const loadingIndicatorCSS = ({
   isFocused,
   size,
+  isCompact,
   theme: {
-    colors,
-    spacing: {
-      baseUnit
-    }
+    colors
   }
-}, unstyled) => ({
+}) => ({
   label: 'loadingIndicator',
   display: 'flex',
   transition: 'color 150ms',
@@ -162,10 +155,8 @@ export const loadingIndicatorCSS = ({
   marginRight: size,
   textAlign: 'center',
   verticalAlign: 'middle',
-  ...(unstyled ? {} : {
-    color: isFocused ? colors.neutral60 : colors.neutral20,
-    padding: baseUnit * 2
-  })
+  color: isFocused ? colors.neutral60 : colors.neutral20,
+  padding: `${isCompact ? 0 : "var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"}`
 });
 const LoadingDot = ({
   delay,

package/dist/es2019/components/input.js

@@ -13,18 +13,16 @@ export const inputCSS = ({
     spacing,
     colors
   }
-}, unstyled) => ({
+}) => ({
   visibility: isDisabled ? 'hidden' : 'visible',
   // force css to recompute when value change due to @emotion bug.
   // We can remove it whenever the bug is fixed.
   transform: value ? 'translateZ(0)' : '',
   ...containerStyle,
-  ...(unstyled ? {} : {
-    margin: spacing.baseUnit / 2,
-    paddingBottom: spacing.baseUnit / 2,
-    paddingTop: spacing.baseUnit / 2,
-    color: colors.neutral80
-  })
+  margin: spacing.baseUnit / 2,
+  paddingBottom: spacing.baseUnit / 2,
+  paddingTop: spacing.baseUnit / 2,
+  color: "var(--ds-text, hsl(0, 0%, 20%))"
 });
 const spacingStyle = {
   gridArea: '1 / 2',

package/dist/es2019/components/menu.js

@@ -194,19 +194,17 @@ export const menuCSS = ({
     spacing,
     colors
   }
-}, unstyled) => ({
+}) => ({
   label: 'menu',
   [alignToControl(placement)]: '100%',
   position: 'absolute',
   width: '100%',
   zIndex: 1,
-  ...(unstyled ? {} : {
-    backgroundColor: colors.neutral0,
-    borderRadius: borderRadius,
-    boxShadow: '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
-    marginBottom: spacing.menuGutter,
-    marginTop: spacing.menuGutter
-  })
+  borderRadius: borderRadius,
+  marginBottom: spacing.menuGutter,
+  marginTop: spacing.menuGutter,
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
 });
 const PortalPlacementContext = /*#__PURE__*/createContext(null);
 
@@ -283,22 +281,15 @@ export default Menu;
 // ==============================
 
 export const menuListCSS = ({
-  maxHeight,
-  theme: {
-    spacing: {
-      baseUnit
-    }
-  }
-}, unstyled) => ({
+  maxHeight
+}) => ({
   maxHeight,
   overflowY: 'auto',
   position: 'relative',
   // required for offset[Height, Top] > keyboard scroll
   WebkitOverflowScrolling: 'touch',
-  ...(unstyled ? {} : {
-    paddingBottom: baseUnit,
-    paddingTop: baseUnit
-  })
+  paddingTop: "var(--ds-space-100, 8px)",
+  paddingBottom: "var(--ds-space-100, 8px)"
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -330,12 +321,10 @@ const noticeCSS = ({
     },
     colors
   }
-}, unstyled) => ({
+}) => ({
   textAlign: 'center',
-  ...(unstyled ? {} : {
-    color: colors.neutral40,
-    padding: `${baseUnit * 2}px ${baseUnit * 3}px`
-  })
+  color: colors.neutral40,
+  padding: `${baseUnit * 2}px ${baseUnit * 3}px`
 });
 export const noOptionsMessageCSS = noticeCSS;
 export const loadingMessageCSS = noticeCSS;

package/dist/es2019/components/multi-value.js

@@ -5,61 +5,114 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../utils';
 import { CrossIcon } from './indicators';
 export const multiValueCSS = ({
+  isDisabled,
+  isFocused,
   theme: {
     spacing,
     borderRadius,
     colors
   }
-}, unstyled) => ({
-  label: 'multiValue',
-  display: 'flex',
-  minWidth: 0,
-  // resolves flex/text-overflow bug
-  ...(unstyled ? {} : {
-    backgroundColor: colors.neutral10,
-    borderRadius: borderRadius / 2,
-    margin: spacing.baseUnit / 2
-  })
-});
+}) => {
+  let backgroundColor;
+  let color;
+  if (isDisabled) {
+    // Use the basic neutral background so it is slightly separate from the
+    // field's background
+    backgroundColor = "var(--ds-background-neutral, #091E420F)";
+    color = "var(--ds-text-disabled, #091E424F)";
+  } else if (isFocused) {
+    backgroundColor = "var(--ds-background-selected, #E9F2FF)";
+    color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
+  } else {
+    backgroundColor = fg('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, #091E420F)";
+    color = "var(--ds-text, hsl(0, 0%, 20%))";
+  }
+  return {
+    label: 'multiValue',
+    display: 'flex',
+    minWidth: 0,
+    // resolves flex/text-overflow bug
+    margin: "var(--ds-space-025, 2px)",
+    borderRadius: "var(--ds-border-radius-050, 2px)",
+    backgroundColor,
+    boxShadow: isFocused ? `0 0 0 2px ${"var(--ds-surface, transparent)"}, 0 0 0 4px ${"var(--ds-border-focused, transparent)"}` : 'none',
+    maxWidth: '100%',
+    '@media screen and (-ms-high-contrast: active)': {
+      border: isFocused ? '1px solid transparent' : 'none'
+    },
+    color,
+    ...(fg('platform-component-visual-refresh') && {
+      borderRadius: "var(--ds-border-radius-100, 4px)",
+      // Hardcode this color for visual refresh as there is no token color yet
+      borderColor: '#B7B9BE',
+      borderWidth: "var(--ds-border-width, 1px)",
+      borderStyle: 'solid',
+      backgroundColor: "var(--ds-background-input, #FFFFFF)"
+    })
+  };
+};
 export const multiValueLabelCSS = ({
-  theme: {
-    borderRadius,
-    colors
-  },
-  cropWithEllipsis
-}, unstyled) => ({
+  cropWithEllipsis,
+  isDisabled
+}) => ({
   overflow: 'hidden',
   textOverflow: cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
   whiteSpace: 'nowrap',
-  ...(unstyled ? {} : {
-    borderRadius: borderRadius / 2,
-    color: colors.neutral80,
-    fontSize: '85%',
-    padding: 3,
-    paddingLeft: 6
+  borderRadius: "var(--ds-border-radius-050, 2px)",
+  fontSize: '85%',
+  font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  padding: "var(--ds-space-025, 2px)",
+  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : 'inherit',
+  paddingLeft: "var(--ds-space-075, 6px)",
+  ...(fg('platform-component-visual-refresh') && {
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: "var(--ds-space-050, 4px)"
   })
 });
 export const multiValueRemoveCSS = ({
-  theme: {
-    spacing,
-    borderRadius,
-    colors
-  },
   isFocused
-}, unstyled) => ({
+}) => ({
   alignItems: 'center',
   display: 'flex',
-  ...(unstyled ? {} : {
-    borderRadius: borderRadius / 2,
-    backgroundColor: isFocused ? colors.dangerLight : undefined,
-    paddingLeft: spacing.baseUnit,
-    paddingRight: spacing.baseUnit,
+  backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, transparent)" : undefined,
+  fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
+  paddingLeft: "var(--ds-space-025, 2px)",
+  paddingRight: "var(--ds-space-025, 2px)",
+  borderRadius: '0px 2px 2px 0px',
+  // DSP-6470 we should style like Tag once we have the :has selector
+  ':hover': {
+    backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)",
+    fill: "var(--ds-text-danger, #000)"
+  },
+  ':active': {
+    backgroundColor: "var(--ds-background-danger-pressed, #FD9891)",
+    fill: "var(--ds-text-danger, #000)"
+  },
+  ...(fg('platform-component-visual-refresh') && {
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    border: 'none',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    appearance: 'none',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    color: "var(--ds-text, #172B4D)",
+    padding: "var(--ds-space-025, 2px)",
+    marginRight: "var(--ds-space-025, 2px)",
+    ':focus-visible': {
+      outlineOffset: "var(--ds-space-negative-025, -2px)"
+    },
     ':hover': {
-      backgroundColor: colors.dangerLight,
-      color: colors.danger
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
     }
   })
 });

package/dist/es2019/components/option.js

@@ -9,29 +9,49 @@ import { getStyleProps } from '../utils';
 export const optionCSS = ({
   isDisabled,
   isFocused,
-  isSelected,
-  theme: {
-    spacing,
-    colors
+  isSelected
+}) => {
+  let color = "var(--ds-text, #172B4D)";
+  if (isDisabled) {
+    color = "var(--ds-text-disabled, #091E424F)";
+  } else if (isSelected) {
+    color = "var(--ds-text-selected, #0C66E4)";
   }
-}, unstyled) => ({
-  label: 'option',
-  cursor: 'default',
-  display: 'block',
-  fontSize: 'inherit',
-  width: '100%',
-  userSelect: 'none',
-  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-  ...(unstyled ? {} : {
-    backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
-    color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
-    padding: `${spacing.baseUnit * 2}px ${spacing.baseUnit * 3}px`,
-    // provide some affordance on touch devices
+  let boxShadow;
+  let backgroundColor;
+  if (isDisabled) {
+    backgroundColor = undefined;
+  } else if (isSelected && isFocused) {
+    backgroundColor = "var(--ds-background-selected-hovered, #CCE0FF)";
+  } else if (isSelected) {
+    backgroundColor = "var(--ds-background-selected, #E9F2FF)";
+  } else if (isFocused) {
+    backgroundColor = "var(--ds-background-neutral-subtle-hovered, #091E420F)";
+  }
+  if (!isDisabled && (isFocused || isSelected)) {
+    boxShadow = `inset 2px 0px 0px ${"var(--ds-border-selected, #0C66E4)"}`;
+  }
+  const cursor = isDisabled ? 'not-allowed' : 'default';
+  return {
+    label: 'option',
+    display: 'block',
+    fontSize: 'inherit',
+    width: '100%',
+    userSelect: 'none',
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"}`,
+    backgroundColor,
+    color,
+    cursor,
+    boxShadow,
     ':active': {
-      backgroundColor: !isDisabled ? isSelected ? colors.primary : colors.primary50 : undefined
+      backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, #85B8FF)" : "var(--ds-background-neutral-subtle-pressed, #091E4224)" : undefined
+    },
+    '@media screen and (-ms-high-contrast: active)': {
+      borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
     }
-  })
-});
+  };
+};
 const Option = props => {
   const {
     children,

package/dist/es2019/components/placeholder.js

@@ -7,18 +7,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { getStyleProps } from '../utils';
 export const placeholderCSS = ({
-  theme: {
-    spacing,
-    colors
-  }
-}, unstyled) => ({
+  isDisabled
+}) => ({
   label: 'placeholder',
   gridArea: '1 / 1 / 2 / 3',
-  ...(unstyled ? {} : {
-    color: colors.neutral50,
-    marginLeft: spacing.baseUnit / 2,
-    marginRight: spacing.baseUnit / 2
-  })
+  margin: `0 ${"var(--ds-space-025, 2px)"}`,
+  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtlest, #626F86)"
 });
 const Placeholder = props => {
   const {

package/dist/es2019/components/single-value.js

@@ -9,21 +9,17 @@ import { getStyleProps } from '../utils';
 export const css = ({
   isDisabled,
   theme: {
-    spacing,
-    colors
+    spacing
   }
-}, unstyled) => ({
+}) => ({
   label: 'singleValue',
   gridArea: '1 / 1 / 2 / 3',
   maxWidth: '100%',
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  ...(unstyled ? {} : {
-    color: isDisabled ? colors.neutral40 : colors.neutral80,
-    marginLeft: spacing.baseUnit / 2,
-    marginRight: spacing.baseUnit / 2
-  })
+  margin: `0 ${"var(--ds-space-025, 2px)"}`,
+  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text, #172B4D)"
 });
 const SingleValue = props => {
   const {

package/dist/es2019/select.js

@@ -52,8 +52,7 @@ export const defaultProps = {
   }) => `${count} result${count !== 1 ? 's' : ''} available`,
   styles: {},
   tabIndex: 0,
-  tabSelectsValue: true,
-  unstyled: false
+  tabSelectsValue: true
 };
 function toCategorizedOption(props, option, selectValue, index) {
   const isDisabled = isOptionDisabled(props, option, selectValue);
@@ -370,10 +369,7 @@ export default class Select extends Component {
       return getOptionValue(this.props, data);
     });
     _defineProperty(this, "getStyles", (key, props) => {
-      const {
-        unstyled
-      } = this.props;
-      const base = defaultStyles[key](props, unstyled);
+      const base = defaultStyles[key](props);
       base.boxSizing = 'border-box';
       const custom = this.props.styles[key];
       return custom ? custom(base, props) : base;
@@ -1393,7 +1389,8 @@ export default class Select extends Component {
     const {
       clearControlLabel,
       isDisabled,
-      isLoading
+      isLoading,
+      spacing
     } = this.props;
     const {
       isFocused
@@ -1406,11 +1403,13 @@ export default class Select extends Component {
       onTouchEnd: this.onClearIndicatorTouchEnd,
       'aria-hidden': 'true'
     };
+    const isCompact = spacing === 'compact';
     return /*#__PURE__*/React.createElement(ClearIndicator, _extends({
       clearControlLabel: clearControlLabel
     }, commonProps, {
       innerProps: innerProps,
-      isFocused: isFocused
+      isFocused: isFocused,
+      isCompact: isCompact
     }));
   }
   renderLoadingIndicator() {
@@ -1422,7 +1421,8 @@ export default class Select extends Component {
     } = this;
     const {
       isDisabled,
-      isLoading
+      isLoading,
+      spacing
     } = this.props;
     const {
       isFocused
@@ -1430,13 +1430,15 @@ export default class Select extends Component {
     if (!LoadingIndicator || !isLoading) {
       return null;
     }
+    const isCompact = spacing === 'compact';
     const innerProps = {
       'aria-hidden': 'true'
     };
     return /*#__PURE__*/React.createElement(LoadingIndicator, _extends({}, commonProps, {
       innerProps: innerProps,
       isDisabled: isDisabled,
-      isFocused: isFocused
+      isFocused: isFocused,
+      isCompact: isCompact
     }));
   }
   renderIndicatorSeparator() {
@@ -1474,11 +1476,13 @@ export default class Select extends Component {
       commonProps
     } = this;
     const {
-      isDisabled
+      isDisabled,
+      spacing
     } = this.props;
     const {
       isFocused
     } = this.state;
+    const isCompact = spacing === 'compact';
     const innerProps = {
       onMouseDown: this.onDropdownIndicatorMouseDown,
       onTouchEnd: this.onDropdownIndicatorTouchEnd,
@@ -1487,7 +1491,8 @@ export default class Select extends Component {
     return /*#__PURE__*/React.createElement(DropdownIndicator, _extends({}, commonProps, {
       innerProps: innerProps,
       isDisabled: isDisabled,
-      isFocused: isFocused
+      isFocused: isFocused,
+      isCompact: isCompact
     }));
   }
   renderMenu() {
@@ -1752,12 +1757,16 @@ export default class Select extends Component {
       className,
       id,
       isDisabled,
-      menuIsOpen
+      menuIsOpen,
+      isInvalid,
+      appearance = 'default',
+      spacing = 'default'
     } = this.props;
     const {
       isFocused
     } = this.state;
     const commonProps = this.commonProps = this.getCommonProps();
+    const isCompact = spacing === 'compact';
     return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: className,
@@ -1773,11 +1782,15 @@ export default class Select extends Component {
         onMouseDown: this.onControlMouseDown,
         onTouchEnd: this.onControlTouchEnd
       },
+      appearance: appearance,
+      isInvalid: isInvalid,
       isDisabled: isDisabled,
       isFocused: isFocused,
-      menuIsOpen: menuIsOpen
+      menuIsOpen: menuIsOpen,
+      isCompact: isCompact
     }), /*#__PURE__*/React.createElement(ValueContainer, _extends({}, commonProps, {
-      isDisabled: isDisabled
+      isDisabled: isDisabled,
+      isCompact: isCompact
     }), this.renderPlaceholderOrValue(), this.renderInput()), /*#__PURE__*/React.createElement(IndicatorsContainer, _extends({}, commonProps, {
       isDisabled: isDisabled
     }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderIndicatorSeparator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField());