@atlaskit/select 16.5.4 → 16.5.5

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @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

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.4";
+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/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.4",
+	"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.4";
+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/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.4",
+	"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.4";
+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/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.4",
+	"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.4",
+  "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/"
@@ -43,7 +43,7 @@
     "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.8.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",