@atlaskit/react-select 1.3.0 → 1.3.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 1.3.2
+
+### Patch Changes
+
+- [#163217](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/163217)
+  [`560d23ab4dfbe`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/560d23ab4dfbe) -
+  Add null check on safari for SSR
+
+## 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

package/dist/cjs/accessibility/helpers.js

@@ -19,8 +19,12 @@ function isIPhone() {
   return testPlatform(/^iPhone/i);
 }
 function isSafari() {
-  var ua = navigator.userAgent.toLowerCase();
-  return ua.includes('safari') && !ua.includes('chrome');
+  if (typeof window !== 'undefined' && window.navigator != null) {
+    var _window$navigator$use2;
+    var ua = (_window$navigator$use2 = window.navigator.userAgent) === null || _window$navigator$use2 === void 0 ? void 0 : _window$navigator$use2.toLowerCase();
+    return ua ? ua.includes('safari') && !ua.includes('chrome') : false;
+  }
+  return false;
 }
 function isMac() {
   return testPlatform(/^Mac/i);

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/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/helpers.js

@@ -8,8 +8,12 @@ export function isIPhone() {
   return testPlatform(/^iPhone/i);
 }
 export function isSafari() {
-  const ua = navigator.userAgent.toLowerCase();
-  return ua.includes('safari') && !ua.includes('chrome');
+  if (typeof window !== 'undefined' && window.navigator != null) {
+    var _window$navigator$use2;
+    const ua = (_window$navigator$use2 = window.navigator.userAgent) === null || _window$navigator$use2 === void 0 ? void 0 : _window$navigator$use2.toLowerCase();
+    return ua ? ua.includes('safari') && !ua.includes('chrome') : false;
+  }
+  return false;
 }
 export function isMac() {
   return testPlatform(/^Mac/i);

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/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/helpers.js

@@ -8,8 +8,12 @@ export function isIPhone() {
   return testPlatform(/^iPhone/i);
 }
 export function isSafari() {
-  var ua = navigator.userAgent.toLowerCase();
-  return ua.includes('safari') && !ua.includes('chrome');
+  if (typeof window !== 'undefined' && window.navigator != null) {
+    var _window$navigator$use2;
+    var ua = (_window$navigator$use2 = window.navigator.userAgent) === null || _window$navigator$use2 === void 0 ? void 0 : _window$navigator$use2.toLowerCase();
+    return ua ? ua.includes('safari') && !ua.includes('chrome') : false;
+  }
+  return false;
 }
 export function isMac() {
   return testPlatform(/^Mac/i);

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/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/index.d.ts

@@ -4,7 +4,7 @@ import useStateManager from './use-state-manager';
 export { default } from './state-manager';
 export { mergeStyles } from './styles';
 export { defaultTheme } from './theme';
-export { createFilter } from './filters';
+export { createFilter, type FilterOptionOption } from './filters';
 export { components } from './components';
 export type SelectInstance<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Select<Option, IsMulti, Group>;
 export type { StateManagerProps as Props } from './use-state-manager';

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/dist/types-ts4.5/index.d.ts

@@ -4,7 +4,7 @@ import useStateManager from './use-state-manager';
 export { default } from './state-manager';
 export { mergeStyles } from './styles';
 export { defaultTheme } from './theme';
-export { createFilter } from './filters';
+export { createFilter, type FilterOptionOption } from './filters';
 export { components } from './components';
 export type SelectInstance<Option = unknown, IsMulti extends boolean = false, Group extends GroupBase<Option> = GroupBase<Option>> = Select<Option, IsMulti, Group>;
 export type { StateManagerProps as Props } from './use-state-manager';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.3.0",
+	"version": "1.3.2",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -26,7 +26,7 @@
 		"./async-creatable": "./src/async-creatable.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/ds-lib": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",