@atlaskit/react-select 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 1.3.1
+
+### Patch Changes
+
+- [#162105](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/162105)
+  [`4edf9a851c491`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4edf9a851c491) -
+  Improve the aria live for searching and reduce the live message when menu is open
+
+## 1.3.0
+
+### Minor Changes
+
+- [#160447](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/160447)
+  [`515ed7a31a9fb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/515ed7a31a9fb) -
+  Make async select by default in select
+
 ## 1.2.0
 
 ### Minor Changes

package/dist/cjs/accessibility/index.js

@@ -53,15 +53,14 @@ var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
       selectValue = props.selectValue,
       isMulti = props.isMulti,
       isDisabled = props.isDisabled,
-      isSelected = props.isSelected,
-      isAppleDevice = props.isAppleDevice;
+      isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
       return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
     };
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
-    if (context === 'menu' && isAppleDevice) {
+    if (context === 'menu') {
       var disabled = isDisabled ? ' disabled' : '';
       // don't announce not selected for single selection
       var notSelectedStatus = !isMulti && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? '' : ' not selected';

package/dist/cjs/async.js

@@ -20,8 +20,12 @@ var _useStateManager = _interopRequireDefault(require("./use-state-manager"));
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 var AsyncSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
+  // when isAsync is true, options are not provided and async props are used, we will enable async
+  var isAsyncEnabledInBaseSelect = props.isAsync && !props.options && (!!props.loadOptions || !!props.defaultOptions);
   var stateManagedProps = (0, _useAsync.default)(props);
-  var selectProps = (0, _useStateManager.default)(stateManagedProps);
+  // when isAsync is falsy or isAsyncEnabledInBaseSelect is true, we use async props, otherwise we use base props
+  var selectAsyncProps = !props.isAsync || isAsyncEnabledInBaseSelect ? stateManagedProps : props;
+  var selectProps = (0, _useStateManager.default)(selectAsyncProps);
   return /*#__PURE__*/_react.default.createElement(_select.default, (0, _extends2.default)({
     ref: ref
   }, selectProps));

package/dist/cjs/components/live-region.js

@@ -57,6 +57,10 @@ var LiveRegion = function LiveRegion(props) {
   // Update aria live selected option when prop changes
   var ariaSelected = (0, _react.useMemo)(function () {
     var message = '';
+    if (isA11yImprovementEnabled && menuIsOpen) {
+      // we don't need to have selected message when the menu is open
+      return '';
+    }
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option,
         selectedOptions = ariaSelection.options,
@@ -75,6 +79,10 @@ var LiveRegion = function LiveRegion(props) {
       // If there are multiple items from the action then return an array of labels
       var multiSelected = selectedOptions || removedValues || undefined;
       var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
+      if (isA11yImprovementEnabled && !_label && !labels.length) {
+        // return empty string if no labels provided
+        return '';
+      }
       var onChangeProps = _objectSpread({
         // multiSelected items are usually items that have already been selected
         // or set by the user as a default value so we assume they are not disabled
@@ -85,18 +93,17 @@ var LiveRegion = function LiveRegion(props) {
       message = messages.onChange(onChangeProps);
     }
     return message;
-  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
   var prevInputValue = (0, _react.useRef)('');
   var ariaFocused = (0, _react.useMemo)(function () {
     var focusMsg = '';
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
-    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
-      // only announce focus option when searching when ff is on,
+    if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on and the input value changed
       // for safari, we will announce for all
       return '';
     }
-    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
       var onFocusProps = {
         focused: focused,
@@ -106,13 +113,13 @@ var LiveRegion = function LiveRegion(props) {
         options: focusableOptions,
         context: focused === focusedOption ? 'menu' : 'value',
         selectValue: selectValue,
-        isAppleDevice: isAppleDevice,
         isMulti: isMulti
       };
       focusMsg = messages.onFocus(onFocusProps);
     }
+    prevInputValue.current = inputValue;
     return focusMsg;
-  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
   var ariaResults = (0, _react.useMemo)(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {

package/dist/es2019/accessibility/index.js

@@ -50,14 +50,13 @@ export const defaultAriaLiveMessages = {
       selectValue,
       isMulti,
       isDisabled,
-      isSelected,
-      isAppleDevice
+      isSelected
     } = props;
     const getArrayIndex = (arr, item) => arr && arr.length ? `(${arr.indexOf(item) + 1} of ${arr.length})` : '';
     if (context === 'value' && selectValue) {
       return `value ${label} focused, ${getArrayIndex(selectValue, focused)}.`;
     }
-    if (context === 'menu' && isAppleDevice) {
+    if (context === 'menu') {
       const disabled = isDisabled ? ' disabled' : '';
       // don't announce not selected for single selection
       const notSelectedStatus = !isMulti && fg('design_system_select-a11y-improvement') ? '' : ' not selected';

package/dist/es2019/async.js

@@ -4,8 +4,12 @@ import Select from './select';
 import useAsync from './use-async';
 import useStateManager from './use-state-manager';
 const AsyncSelect = /*#__PURE__*/forwardRef((props, ref) => {
+  // when isAsync is true, options are not provided and async props are used, we will enable async
+  const isAsyncEnabledInBaseSelect = props.isAsync && !props.options && (!!props.loadOptions || !!props.defaultOptions);
   const stateManagedProps = useAsync(props);
-  const selectProps = useStateManager(stateManagedProps);
+  // when isAsync is falsy or isAsyncEnabledInBaseSelect is true, we use async props, otherwise we use base props
+  let selectAsyncProps = !props.isAsync || isAsyncEnabledInBaseSelect ? stateManagedProps : props;
+  const selectProps = useStateManager(selectAsyncProps);
   return /*#__PURE__*/React.createElement(Select, _extends({
     ref: ref
   }, selectProps));

package/dist/es2019/components/live-region.js

@@ -54,6 +54,10 @@ const LiveRegion = props => {
   // Update aria live selected option when prop changes
   const ariaSelected = useMemo(() => {
     let message = '';
+    if (isA11yImprovementEnabled && menuIsOpen) {
+      // we don't need to have selected message when the menu is open
+      return '';
+    }
     if (ariaSelection && messages.onChange) {
       const {
         option,
@@ -72,6 +76,10 @@ const LiveRegion = props => {
       // If there are multiple items from the action then return an array of labels
       const multiSelected = selectedOptions || removedValues || undefined;
       const labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
+      if (isA11yImprovementEnabled && !label && !labels.length) {
+        // return empty string if no labels provided
+        return '';
+      }
       const onChangeProps = {
         // multiSelected items are usually items that have already been selected
         // or set by the user as a default value so we assume they are not disabled
@@ -83,18 +91,17 @@ const LiveRegion = props => {
       message = messages.onChange(onChangeProps);
     }
     return message;
-  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
   const prevInputValue = useRef('');
   const ariaFocused = useMemo(() => {
     let focusMsg = '';
     const focused = focusedOption || focusedValue;
     const isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
-    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
-      // only announce focus option when searching when ff is on,
+    if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on and the input value changed
       // for safari, we will announce for all
       return '';
     }
-    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
       const onFocusProps = {
         focused,
@@ -104,13 +111,13 @@ const LiveRegion = props => {
         options: focusableOptions,
         context: focused === focusedOption ? 'menu' : 'value',
         selectValue,
-        isAppleDevice,
         isMulti
       };
       focusMsg = messages.onFocus(onFocusProps);
     }
+    prevInputValue.current = inputValue;
     return focusMsg;
-  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
   const ariaResults = useMemo(() => {
     let resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {

package/dist/esm/accessibility/index.js

@@ -47,15 +47,14 @@ export var defaultAriaLiveMessages = {
       selectValue = props.selectValue,
       isMulti = props.isMulti,
       isDisabled = props.isDisabled,
-      isSelected = props.isSelected,
-      isAppleDevice = props.isAppleDevice;
+      isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
       return arr && arr.length ? "(".concat(arr.indexOf(item) + 1, " of ").concat(arr.length, ")") : '';
     };
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
-    if (context === 'menu' && isAppleDevice) {
+    if (context === 'menu') {
       var disabled = isDisabled ? ' disabled' : '';
       // don't announce not selected for single selection
       var notSelectedStatus = !isMulti && fg('design_system_select-a11y-improvement') ? '' : ' not selected';

package/dist/esm/async.js

@@ -4,8 +4,12 @@ import Select from './select';
 import useAsync from './use-async';
 import useStateManager from './use-state-manager';
 var AsyncSelect = /*#__PURE__*/forwardRef(function (props, ref) {
+  // when isAsync is true, options are not provided and async props are used, we will enable async
+  var isAsyncEnabledInBaseSelect = props.isAsync && !props.options && (!!props.loadOptions || !!props.defaultOptions);
   var stateManagedProps = useAsync(props);
-  var selectProps = useStateManager(stateManagedProps);
+  // when isAsync is falsy or isAsyncEnabledInBaseSelect is true, we use async props, otherwise we use base props
+  var selectAsyncProps = !props.isAsync || isAsyncEnabledInBaseSelect ? stateManagedProps : props;
+  var selectProps = useStateManager(selectAsyncProps);
   return /*#__PURE__*/React.createElement(Select, _extends({
     ref: ref
   }, selectProps));

package/dist/esm/components/live-region.js

@@ -52,6 +52,10 @@ var LiveRegion = function LiveRegion(props) {
   // Update aria live selected option when prop changes
   var ariaSelected = useMemo(function () {
     var message = '';
+    if (isA11yImprovementEnabled && menuIsOpen) {
+      // we don't need to have selected message when the menu is open
+      return '';
+    }
     if (ariaSelection && messages.onChange) {
       var option = ariaSelection.option,
         selectedOptions = ariaSelection.options,
@@ -70,6 +74,10 @@ var LiveRegion = function LiveRegion(props) {
       // If there are multiple items from the action then return an array of labels
       var multiSelected = selectedOptions || removedValues || undefined;
       var labels = multiSelected ? multiSelected.map(getOptionLabel) : [];
+      if (isA11yImprovementEnabled && !_label && !labels.length) {
+        // return empty string if no labels provided
+        return '';
+      }
       var onChangeProps = _objectSpread({
         // multiSelected items are usually items that have already been selected
         // or set by the user as a default value so we assume they are not disabled
@@ -80,18 +88,17 @@ var LiveRegion = function LiveRegion(props) {
       message = messages.onChange(onChangeProps);
     }
     return message;
-  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel]);
+  }, [ariaSelection, messages, isOptionDisabled, selectValue, getOptionLabel, isA11yImprovementEnabled, menuIsOpen]);
   var prevInputValue = useRef('');
   var ariaFocused = useMemo(function () {
     var focusMsg = '';
     var focused = focusedOption || focusedValue;
     var isSelected = !!(focusedOption && selectValue && selectValue.includes(focusedOption));
-    if ((!inputValue || inputValue === prevInputValue.current) && isA11yImprovementEnabled) {
-      // only announce focus option when searching when ff is on,
+    if (inputValue === prevInputValue.current && isA11yImprovementEnabled) {
+      // only announce focus option when searching when ff is on and the input value changed
       // for safari, we will announce for all
       return '';
     }
-    prevInputValue.current = inputValue;
     if (focused && messages.onFocus) {
       var onFocusProps = {
         focused: focused,
@@ -101,13 +108,13 @@ var LiveRegion = function LiveRegion(props) {
         options: focusableOptions,
         context: focused === focusedOption ? 'menu' : 'value',
         selectValue: selectValue,
-        isAppleDevice: isAppleDevice,
         isMulti: isMulti
       };
       focusMsg = messages.onFocus(onFocusProps);
     }
+    prevInputValue.current = inputValue;
     return focusMsg;
-  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isAppleDevice, isA11yImprovementEnabled, isMulti]);
+  }, [inputValue, focusedOption, focusedValue, getOptionLabel, isOptionDisabled, messages, focusableOptions, selectValue, isA11yImprovementEnabled, isMulti]);
   var ariaResults = useMemo(function () {
     var resultsMsg = '';
     if (menuIsOpen && options.length && !isLoading && messages.onFilter) {

package/dist/types/accessibility/index.d.ts

@@ -90,10 +90,6 @@ export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
      * selected option(s) of the Select
      */
     selectValue: Options<Option>;
-    /**
-     * Boolean indicating whether user uses Apple device
-     */
-    isAppleDevice: boolean;
     /**
      * Boolean value of selectProp isMulti
      */

package/dist/types-ts4.5/accessibility/index.d.ts

@@ -90,10 +90,6 @@ export interface AriaOnFocusProps<Option, Group extends GroupBase<Option>> {
      * selected option(s) of the Select
      */
     selectValue: Options<Option>;
-    /**
-     * Boolean indicating whether user uses Apple device
-     */
-    isAppleDevice: boolean;
     /**
      * Boolean value of selectProp isMulti
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.2.0",
+	"version": "1.3.1",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",