@atlaskit/select 16.5.10 → 16.5.11

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/select
 
+## 16.5.11
+
+### Patch Changes
+
+- [`479e6a92e33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/479e6a92e33) - Move css styles out to top-level scope for more consistency.
+
 ## 16.5.10
 
 ### Patch Changes

package/dist/cjs/PopupSelect/components.js

@@ -19,7 +19,12 @@ var _excluded = ["innerRef", "innerProps"],
 // ==============================
 // Styled Components
 // ==============================
-
+var menuDialogStyles = (0, _react.css)({
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
+  zIndex: _constants.layers.modal()
+});
 var MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
@@ -27,16 +32,14 @@ var MenuDialog = function MenuDialog(_ref) {
     id = _ref.id,
     style = _ref.style;
   return (0, _react.jsx)("div", {
-    // TODO: Make these use proper dynamic styling (DSP-12490)
+    css: [menuDialogStyles,
+    // There is not a limited amount of values for the widths, so they need
+    // to remain dynamic.
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: {
-      backgroundColor: "var(--ds-surface-overlay, white)",
-      borderRadius: 4,
-      boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"),
+    {
       maxWidth: maxWidth,
-      minWidth: minWidth,
-      zIndex: _constants.layers.modal()
-    },
+      minWidth: minWidth
+    }],
     style: style,
     id: id
   }, children);
@@ -46,31 +49,28 @@ var MenuDialog = function MenuDialog(_ref) {
 // Custom Components
 // ==============================
 exports.MenuDialog = MenuDialog;
+var dropdownStyles = (0, _react.css)({
+  marginRight: "var(--ds-space-025, 2px)",
+  textAlign: 'center',
+  width: 32
+});
 var DropdownIndicator = function DropdownIndicator() {
   return (0, _react.jsx)("div", {
-    // TODO: Make these use proper dynamic styling (DSP-12490)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: {
-      marginRight: "var(--ds-space-025, 2px)",
-      textAlign: 'center',
-      width: 32
-    }
+    css: dropdownStyles
   }, (0, _react.jsx)(_search.default, {
     label: "open"
   }));
 };
+var controlStyles = (0, _react.css)({
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
+});
 var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
     innerProps = _ref2.innerProps,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
   return (0, _react.jsx)("div", {
-    ref: innerRef
-    // TODO: Make these use proper dynamic styling (DSP-12490)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: {
-      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
-    }
+    ref: innerRef,
+    css: controlStyles
   }, (0, _react.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
     innerProps: innerProps
   })));

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "16.5.10";
+var packageVersion = "16.5.11";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/components/input-options.js

@@ -36,7 +36,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     isDisabled = props.isDisabled,
     isFocused = props.isFocused,
     isSelected = props.isSelected;
-  var styles = {
+  var baseStyles = {
     alignItems: 'center',
     backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(_colors.N20, ")") : 'transparent',
     color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
@@ -44,7 +44,9 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     paddingBottom: "var(--ds-space-050, 4px)",
     paddingLeft: "var(--ds-space-200, 16px)",
     paddingTop: "var(--ds-space-050, 4px)",
-    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(_colors.B400, ")"), ";") : '',
+    // This 'none' needs to be present to ensure that style is not applied when
+    // the option is selected but not focused.
+    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(_colors.B400, ")")) : 'none',
     ':active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(_colors.N30, ")")
     },
@@ -52,7 +54,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
       borderLeft: isFocused ? '2px solid transparent' : ''
     }
   };
-  var augmentedStyles = _objectSpread(_objectSpread({}, getStyles('option', props)), styles);
+  var augmentedStyles = (0, _react.css)(_objectSpread(_objectSpread({}, getStyles('option', props)), baseStyles));
   var bemClasses = {
     option: true,
     'option--is-disabled': isDisabled,
@@ -173,6 +175,26 @@ var getBorderColor = function getBorderColor(_ref3) {
   }
   return "var(--ds-border-input, ".concat(_colors.N100, ")");
 };
+var baseIconStyles = (0, _react.css)({
+  alignItems: 'center',
+  display: 'flex ',
+  flexShrink: 0,
+  paddingRight: "var(--ds-space-050, 4px)",
+  // Here we are adding a border to the Checkbox and Radio SVG icons
+  // This is an a11y fix for Select only for now but it may be rolled
+  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& svg rect, & svg circle:first-of-type': {
+    strokeWidth: "var(--ds-border-width-outline, 2px)",
+    strokeLinejoin: 'round'
+  }
+});
+var baseOptionStyles = (0, _react.css)({
+  textOverflow: 'ellipsis',
+  overflowX: 'hidden',
+  flexGrow: 1,
+  whiteSpace: 'nowrap'
+});
 var ControlOption = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ControlOption, _Component);
   var _super = _createSuper(ControlOption);
@@ -227,47 +249,36 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         styles = _getPrimitiveStyles2[0],
         classes = _getPrimitiveStyles2[1];
       return (
-        /**
-         * TODO Fix this type error
-         * @see https://product-fabric.atlassian.net/browse/DSP-6063
-         */
-        // @ts-ignore
-        // TODO: Make these use proper dynamic styling (DSP-12490)
+        // These need to remain this way because `react-select` passes props with
+        // styles inside, and that must be done dynamically.
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
         (0, _react.jsx)("div", (0, _extends2.default)({
           css: styles,
           className: classes,
           ref: innerRef
         }, props), (0, _react.jsx)("div", {
-          // TODO: Make these use proper dynamic styling (DSP-12490)
+          css: [baseIconStyles,
+          // Here we are adding a border to the Checkbox and Radio SVG icons
+          // This is an a11y fix for Select only for now but it may be rolled
+          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-          css: {
-            alignItems: 'center',
-            display: 'flex ',
-            flexShrink: 0,
-            paddingRight: "var(--ds-space-050, 4px)",
-            // Here we are adding a border to the Checkbox and Radio SVG icons
-            // This is an a11y fix for Select only for now but it may be rolled
-            // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+          {
+            // This can eventually be changed to static styles that are
+            // applied conditionally (e.g. `isActive && activeBorderStyles`),
+            // but considering there are multiple instances of `react-select`
+            // requiring styles to be generated dynamically, it seemed like a
+            // low priority.
+            // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
             '& svg rect, & svg circle:first-of-type': {
-              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-              strokeWidth: '2px',
-              strokeLinejoin: 'round'
+              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state))
             }
-          }
+          }]
         }, !!Icon ? (0, _react.jsx)(Icon, {
           label: "",
           primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
           secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
         }) : null), (0, _react.jsx)("div", {
-          // TODO: Make these use proper dynamic styling (DSP-12490)
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-          css: {
-            textOverflow: 'ellipsis',
-            overflowX: 'hidden',
-            flexGrow: 1,
-            whiteSpace: 'nowrap'
-          }
+          css: baseOptionStyles
         }, children))
       );
     }

package/dist/cjs/styles.js

@@ -95,7 +95,6 @@ function baseStyles(validationState) {
         ':hover': {
           '::-webkit-scrollbar-thumb': {
             // scrollbars occur only if the user passes in a custom component with overflow: scroll
-            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
             backgroundColor: 'rgba(0,0,0,0.2)'
           },
           cursor: 'pointer',
@@ -103,7 +102,6 @@ function baseStyles(validationState) {
           borderColor: borderColorHover
         },
         '::-webkit-scrollbar-thumb:hover': {
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           backgroundColor: 'rgba(0,0,0,0.4)'
         }
       });

package/dist/es2019/PopupSelect/components.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 
 import { components } from 'react-select';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
@@ -11,6 +11,12 @@ import { N40A } from '@atlaskit/theme/colors';
 // ==============================
 // Styled Components
 // ==============================
+const menuDialogStyles = css({
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`,
+  zIndex: layers.modal()
+});
 export const MenuDialog = ({
   maxWidth,
   minWidth,
@@ -18,16 +24,14 @@ export const MenuDialog = ({
   id,
   style
 }) => jsx("div", {
-  // TODO: Make these use proper dynamic styling (DSP-12490)
+  css: [menuDialogStyles,
+  // There is not a limited amount of values for the widths, so they need
+  // to remain dynamic.
   // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-  css: {
-    backgroundColor: "var(--ds-surface-overlay, white)",
-    borderRadius: 4,
-    boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N40A}, 0 4px 11px ${N40A}`})`,
+  {
     maxWidth,
-    minWidth,
-    zIndex: layers.modal()
-  },
+    minWidth
+  }],
   style: style,
   id: id
 }, children);
@@ -36,29 +40,26 @@ export const MenuDialog = ({
 // Custom Components
 // ==============================
 
+const dropdownStyles = css({
+  marginRight: "var(--ds-space-025, 2px)",
+  textAlign: 'center',
+  width: 32
+});
 const DropdownIndicator = () => jsx("div", {
-  // TODO: Make these use proper dynamic styling (DSP-12490)
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-  css: {
-    marginRight: "var(--ds-space-025, 2px)",
-    textAlign: 'center',
-    width: 32
-  }
+  css: dropdownStyles
 }, jsx(SearchIcon, {
   label: "open"
 }));
+const controlStyles = css({
+  padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`
+});
 const Control = ({
   innerRef,
   innerProps,
   ...props
 }) => jsx("div", {
-  ref: innerRef
-  // TODO: Make these use proper dynamic styling (DSP-12490)
-  // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-  ,
-  css: {
-    padding: `${"var(--ds-space-100, 8px)"} ${"var(--ds-space-100, 8px)"} ${"var(--ds-space-050, 4px)"}`
-  }
+  ref: innerRef,
+  css: controlStyles
 }, jsx(components.Control, _extends({}, props, {
   innerProps: innerProps
 })));

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "16.5.10";
+const packageVersion = "16.5.11";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/components/input-options.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
@@ -16,7 +16,7 @@ const getPrimitiveStyles = props => {
     isFocused,
     isSelected
   } = props;
-  const styles = {
+  const baseStyles = {
     alignItems: 'center',
     backgroundColor: isFocused ? `var(--ds-background-neutral-subtle-hovered, ${N20})` : 'transparent',
     color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
@@ -24,7 +24,9 @@ const getPrimitiveStyles = props => {
     paddingBottom: "var(--ds-space-050, 4px)",
     paddingLeft: "var(--ds-space-200, 16px)",
     paddingTop: "var(--ds-space-050, 4px)",
-    boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`};` : '',
+    // This 'none' needs to be present to ensure that style is not applied when
+    // the option is selected but not focused.
+    boxShadow: isFocused ? `inset 2px 0px 0px ${`var(--ds-border-focused, ${B400})`}` : 'none',
     ':active': {
       backgroundColor: `var(--ds-background-neutral-subtle-pressed, ${N30})`
     },
@@ -32,10 +34,10 @@ const getPrimitiveStyles = props => {
       borderLeft: isFocused ? '2px solid transparent' : ''
     }
   };
-  const augmentedStyles = {
+  const augmentedStyles = css({
     ...getStyles('option', props),
-    ...styles
-  };
+    ...baseStyles
+  });
   const bemClasses = {
     option: true,
     'option--is-disabled': isDisabled,
@@ -159,6 +161,26 @@ const getBorderColor = ({
   }
   return `var(--ds-border-input, ${N100})`;
 };
+const baseIconStyles = css({
+  alignItems: 'center',
+  display: 'flex ',
+  flexShrink: 0,
+  paddingRight: "var(--ds-space-050, 4px)",
+  // Here we are adding a border to the Checkbox and Radio SVG icons
+  // This is an a11y fix for Select only for now but it may be rolled
+  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& svg rect, & svg circle:first-of-type': {
+    strokeWidth: "var(--ds-border-width-outline, 2px)",
+    strokeLinejoin: 'round'
+  }
+});
+const baseOptionStyles = css({
+  textOverflow: 'ellipsis',
+  overflowX: 'hidden',
+  flexGrow: 1,
+  whiteSpace: 'nowrap'
+});
 class ControlOption extends Component {
   constructor(...args) {
     super(...args);
@@ -197,37 +219,33 @@ class ControlOption extends Component {
       ...rest
     });
     return (
-      /**
-       * TODO Fix this type error
-       * @see https://product-fabric.atlassian.net/browse/DSP-6063
-       */
-      // @ts-ignore
-      // TODO: Make these use proper dynamic styling (DSP-12490)
+      // These need to remain this way because `react-select` passes props with
+      // styles inside, and that must be done dynamically.
       // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
       jsx("div", _extends({
         css: styles,
         className: classes,
         ref: innerRef
       }, props), jsx("div", {
-        // TODO: Make these use proper dynamic styling (DSP-12490)
+        css: [baseIconStyles,
+        // Here we are adding a border to the Checkbox and Radio SVG icons
+        // This is an a11y fix for Select only for now but it may be rolled
+        // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        css: {
-          alignItems: 'center',
-          display: 'flex ',
-          flexShrink: 0,
-          paddingRight: "var(--ds-space-050, 4px)",
-          // Here we are adding a border to the Checkbox and Radio SVG icons
-          // This is an a11y fix for Select only for now but it may be rolled
-          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+        {
+          // This can eventually be changed to static styles that are
+          // applied conditionally (e.g. `isActive && activeBorderStyles`),
+          // but considering there are multiple instances of `react-select`
+          // requiring styles to be generated dynamically, it seemed like a
+          // low priority.
+          // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
           '& svg rect, & svg circle:first-of-type': {
             stroke: getBorderColor({
               ...this.props,
               ...this.state
-            }),
-            strokeWidth: '2px',
-            strokeLinejoin: 'round'
+            })
           }
-        }
+        }]
       }, !!Icon ? jsx(Icon, {
         label: "",
         primaryColor: getPrimaryColor({
@@ -239,14 +257,7 @@ class ControlOption extends Component {
           ...this.state
         })
       }) : null), jsx("div", {
-        // TODO: Make these use proper dynamic styling (DSP-12490)
-        // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-        css: {
-          textOverflow: 'ellipsis',
-          overflowX: 'hidden',
-          flexGrow: 1,
-          whiteSpace: 'nowrap'
-        }
+        css: baseOptionStyles
       }, children))
     );
   }

package/dist/es2019/styles.js

@@ -86,7 +86,6 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         ':hover': {
           '::-webkit-scrollbar-thumb': {
             // scrollbars occur only if the user passes in a custom component with overflow: scroll
-            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
             backgroundColor: 'rgba(0,0,0,0.2)'
           },
           cursor: 'pointer',
@@ -94,7 +93,6 @@ export default function baseStyles(validationState, isCompact = false, appearanc
           borderColor: borderColorHover
         },
         '::-webkit-scrollbar-thumb:hover': {
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           backgroundColor: 'rgba(0,0,0,0.4)'
         }
       };

package/dist/esm/PopupSelect/components.js

@@ -5,7 +5,7 @@ var _excluded = ["innerRef", "innerProps"],
 /** @jsx jsx */
 
 import { components } from 'react-select';
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import SearchIcon from '@atlaskit/icon/glyph/editor/search';
 import { layers } from '@atlaskit/theme/constants';
@@ -14,6 +14,12 @@ import { N40A } from '@atlaskit/theme/colors';
 // ==============================
 // Styled Components
 // ==============================
+var menuDialogStyles = css({
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  borderRadius: "var(--ds-border-radius-100, 4px)",
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N40A, ", 0 4px 11px ").concat(N40A), ")"),
+  zIndex: layers.modal()
+});
 export var MenuDialog = function MenuDialog(_ref) {
   var maxWidth = _ref.maxWidth,
     minWidth = _ref.minWidth,
@@ -21,16 +27,14 @@ export var MenuDialog = function MenuDialog(_ref) {
     id = _ref.id,
     style = _ref.style;
   return jsx("div", {
-    // TODO: Make these use proper dynamic styling (DSP-12490)
+    css: [menuDialogStyles,
+    // There is not a limited amount of values for the widths, so they need
+    // to remain dynamic.
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: {
-      backgroundColor: "var(--ds-surface-overlay, white)",
-      borderRadius: 4,
-      boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N40A, ", 0 4px 11px ").concat(N40A), ")"),
+    {
       maxWidth: maxWidth,
-      minWidth: minWidth,
-      zIndex: layers.modal()
-    },
+      minWidth: minWidth
+    }],
     style: style,
     id: id
   }, children);
@@ -40,31 +44,28 @@ export var MenuDialog = function MenuDialog(_ref) {
 // Custom Components
 // ==============================
 
+var dropdownStyles = css({
+  marginRight: "var(--ds-space-025, 2px)",
+  textAlign: 'center',
+  width: 32
+});
 var DropdownIndicator = function DropdownIndicator() {
   return jsx("div", {
-    // TODO: Make these use proper dynamic styling (DSP-12490)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: {
-      marginRight: "var(--ds-space-025, 2px)",
-      textAlign: 'center',
-      width: 32
-    }
+    css: dropdownStyles
   }, jsx(SearchIcon, {
     label: "open"
   }));
 };
+var controlStyles = css({
+  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
+});
 var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
     innerProps = _ref2.innerProps,
     props = _objectWithoutProperties(_ref2, _excluded);
   return jsx("div", {
-    ref: innerRef
-    // TODO: Make these use proper dynamic styling (DSP-12490)
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    ,
-    css: {
-      padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
-    }
+    ref: innerRef,
+    css: controlStyles
   }, jsx(components.Control, _extends({}, props, {
     innerProps: innerProps
   })));

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "16.5.10";
+var packageVersion = "16.5.11";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/components/input-options.js

@@ -17,7 +17,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 /** @jsx jsx */
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
 import { Component } from 'react';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
@@ -30,7 +30,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     isDisabled = props.isDisabled,
     isFocused = props.isFocused,
     isSelected = props.isSelected;
-  var styles = {
+  var baseStyles = {
     alignItems: 'center',
     backgroundColor: isFocused ? "var(--ds-background-neutral-subtle-hovered, ".concat(N20, ")") : 'transparent',
     color: isDisabled ? "var(--ds-text-disabled, inherit)" : 'inherit',
@@ -38,7 +38,9 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
     paddingBottom: "var(--ds-space-050, 4px)",
     paddingLeft: "var(--ds-space-200, 16px)",
     paddingTop: "var(--ds-space-050, 4px)",
-    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(B400, ")"), ";") : '',
+    // This 'none' needs to be present to ensure that style is not applied when
+    // the option is selected but not focused.
+    boxShadow: isFocused ? "inset 2px 0px 0px ".concat("var(--ds-border-focused, ".concat(B400, ")")) : 'none',
     ':active': {
       backgroundColor: "var(--ds-background-neutral-subtle-pressed, ".concat(N30, ")")
     },
@@ -46,7 +48,7 @@ var getPrimitiveStyles = function getPrimitiveStyles(props) {
       borderLeft: isFocused ? '2px solid transparent' : ''
     }
   };
-  var augmentedStyles = _objectSpread(_objectSpread({}, getStyles('option', props)), styles);
+  var augmentedStyles = css(_objectSpread(_objectSpread({}, getStyles('option', props)), baseStyles));
   var bemClasses = {
     option: true,
     'option--is-disabled': isDisabled,
@@ -167,6 +169,26 @@ var getBorderColor = function getBorderColor(_ref3) {
   }
   return "var(--ds-border-input, ".concat(N100, ")");
 };
+var baseIconStyles = css({
+  alignItems: 'center',
+  display: 'flex ',
+  flexShrink: 0,
+  paddingRight: "var(--ds-space-050, 4px)",
+  // Here we are adding a border to the Checkbox and Radio SVG icons
+  // This is an a11y fix for Select only for now but it may be rolled
+  // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  '& svg rect, & svg circle:first-of-type': {
+    strokeWidth: "var(--ds-border-width-outline, 2px)",
+    strokeLinejoin: 'round'
+  }
+});
+var baseOptionStyles = css({
+  textOverflow: 'ellipsis',
+  overflowX: 'hidden',
+  flexGrow: 1,
+  whiteSpace: 'nowrap'
+});
 var ControlOption = /*#__PURE__*/function (_Component) {
   _inherits(ControlOption, _Component);
   var _super = _createSuper(ControlOption);
@@ -221,47 +243,36 @@ var ControlOption = /*#__PURE__*/function (_Component) {
         styles = _getPrimitiveStyles2[0],
         classes = _getPrimitiveStyles2[1];
       return (
-        /**
-         * TODO Fix this type error
-         * @see https://product-fabric.atlassian.net/browse/DSP-6063
-         */
-        // @ts-ignore
-        // TODO: Make these use proper dynamic styling (DSP-12490)
+        // These need to remain this way because `react-select` passes props with
+        // styles inside, and that must be done dynamically.
         // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
         jsx("div", _extends({
           css: styles,
           className: classes,
           ref: innerRef
         }, props), jsx("div", {
-          // TODO: Make these use proper dynamic styling (DSP-12490)
+          css: [baseIconStyles,
+          // Here we are adding a border to the Checkbox and Radio SVG icons
+          // This is an a11y fix for Select only for now but it may be rolled
+          // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
           // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-          css: {
-            alignItems: 'center',
-            display: 'flex ',
-            flexShrink: 0,
-            paddingRight: "var(--ds-space-050, 4px)",
-            // Here we are adding a border to the Checkbox and Radio SVG icons
-            // This is an a11y fix for Select only for now but it may be rolled
-            // into the `@atlaskit/icon` package's Checkbox and Radio SVGs later
+          {
+            // This can eventually be changed to static styles that are
+            // applied conditionally (e.g. `isActive && activeBorderStyles`),
+            // but considering there are multiple instances of `react-select`
+            // requiring styles to be generated dynamically, it seemed like a
+            // low priority.
+            // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
             '& svg rect, & svg circle:first-of-type': {
-              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state)),
-              strokeWidth: '2px',
-              strokeLinejoin: 'round'
+              stroke: getBorderColor(_objectSpread(_objectSpread({}, this.props), this.state))
             }
-          }
+          }]
         }, !!Icon ? jsx(Icon, {
           label: "",
           primaryColor: getPrimaryColor(_objectSpread(_objectSpread({}, this.props), this.state)),
           secondaryColor: getSecondaryColor(_objectSpread(_objectSpread({}, this.props), this.state))
         }) : null), jsx("div", {
-          // TODO: Make these use proper dynamic styling (DSP-12490)
-          // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-          css: {
-            textOverflow: 'ellipsis',
-            overflowX: 'hidden',
-            flexGrow: 1,
-            whiteSpace: 'nowrap'
-          }
+          css: baseOptionStyles
         }, children))
       );
     }

package/dist/esm/styles.js

@@ -89,7 +89,6 @@ export default function baseStyles(validationState) {
         ':hover': {
           '::-webkit-scrollbar-thumb': {
             // scrollbars occur only if the user passes in a custom component with overflow: scroll
-            // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
             backgroundColor: 'rgba(0,0,0,0.2)'
           },
           cursor: 'pointer',
@@ -97,7 +96,6 @@ export default function baseStyles(validationState) {
           borderColor: borderColorHover
         },
         '::-webkit-scrollbar-thumb:hover': {
-          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
           backgroundColor: 'rgba(0,0,0,0.4)'
         }
       });

package/dist/types/AsyncCreatableSelect.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;

package/dist/types/AsyncSelect.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;

package/dist/types/CreatableSelect.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;

package/dist/types/Select.d.ts

@@ -11,7 +11,7 @@ export declare const SelectWithoutAnalytics: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;
@@ -53,7 +53,7 @@ declare const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;

package/dist/types/createSelect.d.ts

@@ -13,7 +13,7 @@ export default function createSelect(WrappedComponent: ComponentType<any>): {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: React.ReactNode;
         }>;

package/dist/types-ts4.5/AsyncCreatableSelect.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;

package/dist/types-ts4.5/AsyncSelect.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;

package/dist/types-ts4.5/CreatableSelect.d.ts

@@ -11,7 +11,7 @@ declare const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;

package/dist/types-ts4.5/Select.d.ts

@@ -11,7 +11,7 @@ export declare const SelectWithoutAnalytics: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;
@@ -53,7 +53,7 @@ declare const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<import("./types").SelectProps<Option, IsMulti> | import("./types").AsyncSelectProps<Option, IsMulti> | import("./types").CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: import("react").ReactNode;
         }>;

package/dist/types-ts4.5/createSelect.d.ts

@@ -13,7 +13,7 @@ export default function createSelect(WrappedComponent: ComponentType<any>): {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: {} | ((prevState: Readonly<{}>, props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>>) => {} | Pick<{}, K> | null) | Pick<{}, K> | null, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<SelectProps<Option, IsMulti> | AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>> & Readonly<{
             children?: React.ReactNode;
         }>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.5.10",
+  "version": "16.5.11",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -63,6 +63,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
+    "@af/accessibility-testing": "*",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",

package/report.api.md

@@ -112,7 +112,7 @@ export const AsyncCreatableSelect: {
         | {},
       callback?: (() => void) | undefined,
     ): void;
-    forceUpdate(callBack?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
     readonly props: Readonly<
       | AsyncSelectProps<Option, IsMulti>
       | CreatableSelectProps<Option, IsMulti>
@@ -227,7 +227,7 @@ export const AsyncSelect: {
         | {},
       callback?: (() => void) | undefined,
     ): void;
-    forceUpdate(callBack?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
     readonly props: Readonly<
       | AsyncSelectProps<Option, IsMulti>
       | CreatableSelectProps<Option, IsMulti>
@@ -385,7 +385,7 @@ export const CreatableSelect: {
         | {},
       callback?: (() => void) | undefined,
     ): void;
-    forceUpdate(callBack?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
     readonly props: Readonly<
       | AsyncSelectProps<Option, IsMulti>
       | CreatableSelectProps<Option, IsMulti>
@@ -517,7 +517,7 @@ const _default: {
         | {},
       callback?: (() => void) | undefined,
     ): void;
-    forceUpdate(callBack?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
     readonly props: Readonly<
       | AsyncSelectProps<Option, IsMulti>
       | CreatableSelectProps<Option, IsMulti>
@@ -1223,7 +1223,7 @@ export const SelectWithoutAnalytics: {
         | {},
       callback?: (() => void) | undefined,
     ): void;
-    forceUpdate(callBack?: (() => void) | undefined): void;
+    forceUpdate(callback?: (() => void) | undefined): void;
     readonly props: Readonly<
       | AsyncSelectProps<Option, IsMulti>
       | CreatableSelectProps<Option, IsMulti>

package/tmp/api-report-tmp.d.ts

@@ -81,7 +81,7 @@ export const AsyncCreatableSelect: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> >) => Pick<{}, K> | null | {}) | Pick<{}, K> | null | {}, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> > & Readonly<{
             children?: ReactNode;
         }>;
@@ -125,7 +125,7 @@ export const AsyncSelect: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> >) => Pick<{}, K> | null | {}) | Pick<{}, K> | null | {}, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> > & Readonly<{
             children?: ReactNode;
         }>;
@@ -206,7 +206,7 @@ export const CreatableSelect: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> >) => Pick<{}, K> | null | {}) | Pick<{}, K> | null | {}, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> > & Readonly<{
             children?: ReactNode;
         }>;
@@ -266,7 +266,7 @@ const _default: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> >) => Pick<{}, K> | null | {}) | Pick<{}, K> | null | {}, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> > & Readonly<{
             children?: ReactNode;
         }>;
@@ -620,7 +620,7 @@ export const SelectWithoutAnalytics: {
         render(): JSX.Element;
         context: any;
         setState<K extends never>(state: ((prevState: Readonly<{}>, props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> >) => Pick<{}, K> | null | {}) | Pick<{}, K> | null | {}, callback?: (() => void) | undefined): void;
-        forceUpdate(callBack?: (() => void) | undefined): void;
+        forceUpdate(callback?: (() => void) | undefined): void;
         readonly props: Readonly<AsyncSelectProps<Option, IsMulti> | CreatableSelectProps<Option, IsMulti>| SelectProps<Option, IsMulti> > & Readonly<{
             children?: ReactNode;
         }>;