@atlaskit/select 16.5.3 → 16.5.5

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/select
 
+## 16.5.5
+
+### Patch Changes
+
+- [`96ac277d0d7`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96ac277d0d7) - [ux] - created custom onFocus function, which overwrites built in onFocus method for ariaLiveMessages;
+
+  - function is conditionally invoked only for grouped select options to enable group label announcement with it's group options;
+
+## 16.5.4
+
+### Patch Changes
+
+- [`8f436f0c301`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8f436f0c301) - extend border contrast feature flag to support confluence
+
 ## 16.5.3
 
 ### Patch Changes

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.3";
+var packageVersion = "16.5.5";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/createSelect.js

@@ -19,10 +19,10 @@ var _react = _interopRequireWildcard(require("react"));
 var _reactSelect = require("react-select");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _reactFastCompare = _interopRequireDefault(require("react-fast-compare"));
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var defaultComponents = _interopRequireWildcard(require("./components"));
 var _styles = _interopRequireDefault(require("./styles"));
-var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance"];
+var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
+var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance", "ariaLiveMessages"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function 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; }
@@ -79,6 +79,7 @@ function createSelect(WrappedComponent) {
           spacing = _this$props.spacing,
           isMulti = _this$props.isMulti,
           appearance = _this$props.appearance,
+          ariaLiveMessages = _this$props.ariaLiveMessages,
           props = (0, _objectWithoutProperties2.default)(_this$props, _excluded);
         var isCompact = spacing === 'compact';
 
@@ -86,19 +87,15 @@ function createSelect(WrappedComponent) {
         return /*#__PURE__*/_react.default.createElement(WrappedComponent, (0, _extends2.default)({
           ref: this.onSelectRef,
           isMulti: isMulti,
-          "aria-live": "assertive"
+          "aria-live": "assertive",
+          ariaLiveMessages: (0, _groupedOptionsAnnouncement.isOptionsGrouped)(this.props.options) ? _objectSpread({
+            onFocus: _groupedOptionsAnnouncement.onFocus
+          }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
         }, props, {
           components: this.components,
           styles: (0, _reactSelect.mergeStyles)((0, _styles.default)(
           // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles),
-          placeholder: /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, isMulti &&
-          /*#__PURE__*/
-          // NOTE: This has been added because react-select does not announce to screen readers that multiple options can be selected.
-          // Here we hijack the placeholder to include more info.
-          // The placeholder is used as the `aria-describedby` for the input, and gets rendered in a div rather than a native input placeholder.
-          // Ideally react-select should make use of the aria-multiselectable attribute.
-          _react.default.createElement(_visuallyHidden.default, null, "Multiple options can be selected."), props.placeholder !== undefined ? props.placeholder : 'Select...')
+          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);

package/dist/cjs/styles.js

@@ -36,7 +36,7 @@ function baseStyles(validationState) {
     control: function control(css, _ref2) {
       var isFocused = _ref2.isFocused,
         isDisabled = _ref2.isDisabled;
-      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N20, ")");
+      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N20, ")");
       var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")");
       var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")");
       if (isDisabled) {
@@ -49,7 +49,7 @@ function baseStyles(validationState) {
       if (validationState === 'success') {
         borderColor = "var(--ds-border-success, ".concat(_colors.G400, ")");
       }
-      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N30, ")");
+      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N30, ")");
       if (validationState === 'error') {
         borderColorHover = "var(--ds-border-danger, ".concat(_colors.R400, ")");
       }
@@ -74,10 +74,10 @@ function baseStyles(validationState) {
         backgroundColor: backgroundColor,
         borderColor: borderColor,
         borderStyle: 'solid',
-        borderRadius: "var(--ds-radius-100, 3px)",
-        borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
+        borderRadius: "var(--ds-border-radius-100, 3px)",
+        borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width-050, 1px)" : "var(--ds-border-width-100, 2px)",
         boxShadow: 'none'
-      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') && {
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') && {
         '&:focus-within': {
           boxShadow: "inset 0 0 0 1px ".concat(borderColor)
         }
@@ -239,7 +239,7 @@ function baseStyles(validationState) {
         color = "var(--ds-text, hsl(0, 0%, 20%))";
       }
       return _objectSpread(_objectSpread({}, css), {}, {
-        borderRadius: "var(--ds-radius-050, 2px)",
+        borderRadius: "var(--ds-border-radius-050, 2px)",
         backgroundColor: backgroundColor,
         boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',

package/dist/cjs/utils/grouped-options-announcement.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.isOptionsGrouped = void 0;
+exports.onFocus = onFocus;
+// Used for overwriting ariaLiveMessages builtin onFocus method.
+// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
+function onFocus(props) {
+  var _groupData$options$fi;
+  var focused = props.focused,
+    options = props.options;
+  var isOptionFocused = function isOptionFocused(option) {
+    return option === focused;
+  };
+  var groupData = options === null || options === void 0 ? void 0 : options.find(function (option) {
+    var _option$options;
+    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
+  });
+  var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
+  return "Option ".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
+}
+
+// Helper function which identifies if options are grouped.
+var isOptionsGrouped = function isOptionsGrouped(arr) {
+  return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
+    return obj.hasOwnProperty('options');
+  });
+};
+exports.isOptionsGrouped = isOptionsGrouped;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.5.3",
+	"version": "16.5.5",
 	"sideEffects": false
 }

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.3";
+const packageVersion = "16.5.5";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/createSelect.js

@@ -4,9 +4,9 @@ import React, { Component } from 'react';
 import { mergeStyles } from 'react-select';
 import memoizeOne from 'memoize-one';
 import isEqual from 'react-fast-compare';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import * as defaultComponents from './components';
 import baseStyles from './styles';
+import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
 export default function createSelect(WrappedComponent) {
   var _class;
   return _class = class AtlaskitSelect extends Component {
@@ -47,6 +47,7 @@ export default function createSelect(WrappedComponent) {
         spacing,
         isMulti,
         appearance,
+        ariaLiveMessages,
         ...props
       } = this.props;
       const isCompact = spacing === 'compact';
@@ -55,19 +56,18 @@ export default function createSelect(WrappedComponent) {
       return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
         ref: this.onSelectRef,
         isMulti: isMulti,
-        "aria-live": "assertive"
+        "aria-live": "assertive",
+        ariaLiveMessages: isOptionsGrouped(this.props.options) ? {
+          onFocus,
+          ...ariaLiveMessages
+        } : {
+          ...ariaLiveMessages
+        }
       }, props, {
         components: this.components,
         styles: mergeStyles(baseStyles(
         // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-        typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles),
-        placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, isMulti &&
-        /*#__PURE__*/
-        // NOTE: This has been added because react-select does not announce to screen readers that multiple options can be selected.
-        // Here we hijack the placeholder to include more info.
-        // The placeholder is used as the `aria-describedby` for the input, and gets rendered in a div rather than a native input placeholder.
-        // Ideally react-select should make use of the aria-multiselectable attribute.
-        React.createElement(VisuallyHidden, null, "Multiple options can be selected."), props.placeholder !== undefined ? props.placeholder : 'Select...')
+        typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
       }));
     }
   }, _defineProperty(_class, "defaultProps", {

package/dist/es2019/styles.js

@@ -25,7 +25,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isFocused,
       isDisabled
     }) => {
-      let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N20})`;
+      let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N20})`;
       let backgroundColor = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input, ${N20})`;
       let backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
       if (isDisabled) {
@@ -38,7 +38,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       if (validationState === 'success') {
         borderColor = `var(--ds-border-success, ${G400})`;
       }
-      let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N30})`;
+      let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N30})`;
       if (validationState === 'error') {
         borderColorHover = `var(--ds-border-danger, ${R400})`;
       }
@@ -64,10 +64,10 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         backgroundColor,
         borderColor,
         borderStyle: 'solid',
-        borderRadius: "var(--ds-radius-100, 3px)",
-        borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
+        borderRadius: "var(--ds-border-radius-100, 3px)",
+        borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width-050, 1px)" : "var(--ds-border-width-100, 2px)",
         boxShadow: 'none',
-        ...(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && {
+        ...(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && {
           '&:focus-within': {
             boxShadow: `inset 0 0 0 1px ${borderColor}`
           }
@@ -230,7 +230,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       }
       return {
         ...css,
-        borderRadius: "var(--ds-radius-050, 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%',

package/dist/es2019/utils/grouped-options-announcement.js

@@ -0,0 +1,23 @@
+// Used for overwriting ariaLiveMessages builtin onFocus method.
+// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
+export function onFocus(props) {
+  var _groupData$options$fi;
+  const {
+    focused,
+    options
+  } = props;
+  const isOptionFocused = option => {
+    return option === focused;
+  };
+  const groupData = options === null || options === void 0 ? void 0 : options.find(option => {
+    var _option$options;
+    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
+  });
+  const groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
+  return `Option ${focused.label}, ${groupData === null || groupData === void 0 ? void 0 : groupData.label} group, item ${groupOptionIndex + 1} out of ${groupData === null || groupData === void 0 ? void 0 : groupData.options.length}. All in all `;
+}
+
+// Helper function which identifies if options are grouped.
+export const isOptionsGrouped = arr => {
+  return arr === null || arr === void 0 ? void 0 : arr.every(obj => obj.hasOwnProperty('options'));
+};

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.5.3",
+	"version": "16.5.5",
 	"sideEffects": false
 }

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.3";
+var packageVersion = "16.5.5";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/createSelect.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance"];
+var _excluded = ["styles", "validationState", "isInvalid", "spacing", "isMulti", "appearance", "ariaLiveMessages"];
 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; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -16,9 +16,9 @@ import React, { Component } from 'react';
 import { mergeStyles } from 'react-select';
 import memoizeOne from 'memoize-one';
 import isEqual from 'react-fast-compare';
-import VisuallyHidden from '@atlaskit/visually-hidden';
 import * as defaultComponents from './components';
 import baseStyles from './styles';
+import { onFocus, isOptionsGrouped } from './utils/grouped-options-announcement';
 export default function createSelect(WrappedComponent) {
   var _class;
   return _class = /*#__PURE__*/function (_Component) {
@@ -69,6 +69,7 @@ export default function createSelect(WrappedComponent) {
           spacing = _this$props.spacing,
           isMulti = _this$props.isMulti,
           appearance = _this$props.appearance,
+          ariaLiveMessages = _this$props.ariaLiveMessages,
           props = _objectWithoutProperties(_this$props, _excluded);
         var isCompact = spacing === 'compact';
 
@@ -76,19 +77,15 @@ export default function createSelect(WrappedComponent) {
         return /*#__PURE__*/React.createElement(WrappedComponent, _extends({
           ref: this.onSelectRef,
           isMulti: isMulti,
-          "aria-live": "assertive"
+          "aria-live": "assertive",
+          ariaLiveMessages: isOptionsGrouped(this.props.options) ? _objectSpread({
+            onFocus: onFocus
+          }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages)
         }, props, {
           components: this.components,
           styles: mergeStyles(baseStyles(
           // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles),
-          placeholder: /*#__PURE__*/React.createElement(React.Fragment, null, isMulti &&
-          /*#__PURE__*/
-          // NOTE: This has been added because react-select does not announce to screen readers that multiple options can be selected.
-          // Here we hijack the placeholder to include more info.
-          // The placeholder is used as the `aria-describedby` for the input, and gets rendered in a div rather than a native input placeholder.
-          // Ideally react-select should make use of the aria-multiselectable attribute.
-          React.createElement(VisuallyHidden, null, "Multiple options can be selected."), props.placeholder !== undefined ? props.placeholder : 'Select...')
+          typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, this.props.appearance || 'default'), styles)
         }));
       }
     }]);

package/dist/esm/styles.js

@@ -30,7 +30,7 @@ export default function baseStyles(validationState) {
     control: function control(css, _ref2) {
       var isFocused = _ref2.isFocused,
         isDisabled = _ref2.isDisabled;
-      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N20, ")");
+      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N20, ")");
       var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input, ".concat(N20, ")");
       var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")");
       if (isDisabled) {
@@ -43,7 +43,7 @@ export default function baseStyles(validationState) {
       if (validationState === 'success') {
         borderColor = "var(--ds-border-success, ".concat(G400, ")");
       }
-      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N30, ")");
+      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N30, ")");
       if (validationState === 'error') {
         borderColorHover = "var(--ds-border-danger, ".concat(R400, ")");
       }
@@ -68,10 +68,10 @@ export default function baseStyles(validationState) {
         backgroundColor: backgroundColor,
         borderColor: borderColor,
         borderStyle: 'solid',
-        borderRadius: "var(--ds-radius-100, 3px)",
-        borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
+        borderRadius: "var(--ds-border-radius-100, 3px)",
+        borderWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? "var(--ds-border-width-050, 1px)" : "var(--ds-border-width-100, 2px)",
         boxShadow: 'none'
-      }, getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && {
+      }, getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') && {
         '&:focus-within': {
           boxShadow: "inset 0 0 0 1px ".concat(borderColor)
         }
@@ -233,7 +233,7 @@ export default function baseStyles(validationState) {
         color = "var(--ds-text, hsl(0, 0%, 20%))";
       }
       return _objectSpread(_objectSpread({}, css), {}, {
-        borderRadius: "var(--ds-radius-050, 2px)",
+        borderRadius: "var(--ds-border-radius-050, 2px)",
         backgroundColor: backgroundColor,
         boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
         maxWidth: '100%',

package/dist/esm/utils/grouped-options-announcement.js

@@ -0,0 +1,23 @@
+// Used for overwriting ariaLiveMessages builtin onFocus method.
+// Returns custom built string while focusing each group option. This string is used for screen reader announcement.
+export function onFocus(props) {
+  var _groupData$options$fi;
+  var focused = props.focused,
+    options = props.options;
+  var isOptionFocused = function isOptionFocused(option) {
+    return option === focused;
+  };
+  var groupData = options === null || options === void 0 ? void 0 : options.find(function (option) {
+    var _option$options;
+    return (_option$options = option.options) === null || _option$options === void 0 ? void 0 : _option$options.some(isOptionFocused);
+  });
+  var groupOptionIndex = (_groupData$options$fi = groupData === null || groupData === void 0 ? void 0 : groupData.options.findIndex(isOptionFocused)) !== null && _groupData$options$fi !== void 0 ? _groupData$options$fi : 0;
+  return "Option ".concat(focused.label, ", ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.label, " group, item ").concat(groupOptionIndex + 1, " out of ").concat(groupData === null || groupData === void 0 ? void 0 : groupData.options.length, ". All in all ");
+}
+
+// Helper function which identifies if options are grouped.
+export var isOptionsGrouped = function isOptionsGrouped(arr) {
+  return arr === null || arr === void 0 ? void 0 : arr.every(function (obj) {
+    return obj.hasOwnProperty('options');
+  });
+};

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.5.3",
+	"version": "16.5.5",
 	"sideEffects": false
 }

package/dist/types/createSelect.d.ts

@@ -1,12 +1,12 @@
 import React, { ComponentType } from 'react';
 import BaseSelect from 'react-select/base';
-import { SelectProps, SelectComponentsConfig, OptionType, AsyncSelectProps, CreatableSelectProps } from './types';
+import { SelectProps, SelectComponentsConfig, OptionType, AsyncSelectProps, CreatableSelectProps, GroupType } from './types';
 export default function createSelect(WrappedComponent: ComponentType<any>): {
     new <Option = OptionType, IsMulti extends boolean = false>(props: SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
+        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupType<Option>>>;
         select: BaseSelect | null;
         UNSAFE_componentWillReceiveProps(nextProps: SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
+        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupType<Option>>>) => void;
         focus(): void;
         blur(): void;
         onSelectRef: (ref: BaseSelect) => void;

package/dist/types/utils/grouped-options-announcement.d.ts

@@ -0,0 +1,4 @@
+import { AriaOnFocusProps, GroupBase, OptionsOrGroups } from 'react-select';
+import { GroupType, OptionType } from '../types';
+export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
+export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>>) => boolean;

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

@@ -1,12 +1,12 @@
 import React, { ComponentType } from 'react';
 import BaseSelect from 'react-select/base';
-import { SelectProps, SelectComponentsConfig, OptionType, AsyncSelectProps, CreatableSelectProps } from './types';
+import { SelectProps, SelectComponentsConfig, OptionType, AsyncSelectProps, CreatableSelectProps, GroupType } from './types';
 export default function createSelect(WrappedComponent: ComponentType<any>): {
     new <Option = OptionType, IsMulti extends boolean = false>(props: SelectProps<Option, IsMulti>): {
-        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>;
+        components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupType<Option>>>;
         select: BaseSelect | null;
         UNSAFE_componentWillReceiveProps(nextProps: SelectProps<Option, IsMulti>): void;
-        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, import("react-select").GroupBase<Option>>>) => void;
+        cacheComponents: (components: Partial<import("react-select/dist/declarations/src/components").SelectComponents<Option, IsMulti, GroupType<Option>>>) => void;
         focus(): void;
         blur(): void;
         onSelectRef: (ref: BaseSelect) => void;

package/dist/types-ts4.5/utils/grouped-options-announcement.d.ts

@@ -0,0 +1,4 @@
+import { AriaOnFocusProps, GroupBase, OptionsOrGroups } from 'react-select';
+import { GroupType, OptionType } from '../types';
+export declare function onFocus(props: AriaOnFocusProps<OptionType, GroupBase<OptionType>>): string;
+export declare const isOptionsGrouped: (arr: OptionsOrGroups<OptionType, GroupType<OptionType>>) => boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.5.3",
+  "version": "16.5.5",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -24,7 +24,7 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "releaseModel": "scheduled",
+    "releaseModel": "continuous",
     "website": {
       "name": "Select",
       "category": "Components"
@@ -43,7 +43,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.5.0",
+    "@atlaskit/tokens": "^1.9.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -63,7 +63,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/button": "^16.7.0",
+    "@atlaskit/button": "^16.8.0",
     "@atlaskit/checkbox": "^12.6.0",
     "@atlaskit/docs": "*",
     "@atlaskit/drawer": "^7.5.0",
@@ -101,7 +101,7 @@
     }
   },
   "platform-feature-flags": {
-    "platform.design-system-team.update-border-input_ff9l1": {
+    "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     },
     "platform.design-system-team.popup-select-render-perf_i0s6m": {