@atlaskit/select 16.4.0 → 16.5.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.5.1
+
+### Patch Changes
+
+- [`e7ea6832ad2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/e7ea6832ad2) - Bans the use of React.FC/React.FunctionComponent type in ADS components as part of the React 18 migration work. The change is internal only and should not introduce any changes for the component consumers.
+
+## 16.5.0
+
+### Minor Changes
+
+- [`3c38b01cfd9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3c38b01cfd9) - Added screen reader text to announce multi selects support multiple options. This will be announced prior to any placeholder text.
+
 ## 16.4.0
 
 ### Minor 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.4.0";
+var packageVersion = "16.5.1";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/createSelect.js

@@ -19,6 +19,7 @@ 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"];
@@ -90,7 +91,14 @@ function createSelect(WrappedComponent) {
           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)
+          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...')
         }));
       }
     }]);

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.4.0",
+	"version": "16.5.1",
 	"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.4.0";
+const packageVersion = "16.5.1";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/createSelect.js

@@ -4,6 +4,7 @@ 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';
 export default function createSelect(WrappedComponent) {
@@ -59,7 +60,14 @@ export default function createSelect(WrappedComponent) {
         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)
+        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...')
       }));
     }
   }, _defineProperty(_class, "defaultProps", {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.4.0",
+	"version": "16.5.1",
 	"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.4.0";
+var packageVersion = "16.5.1";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/createSelect.js

@@ -16,6 +16,7 @@ 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';
 export default function createSelect(WrappedComponent) {
@@ -80,7 +81,14 @@ export default function createSelect(WrappedComponent) {
           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)
+          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...')
         }));
       }
     }]);

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.4.0",
+  "version": "16.5.1",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -43,7 +43,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.4.0",
+    "@atlaskit/tokens": "^1.5.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",