@atlaskit/react-select 3.8.9 → 3.9.1

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/react-select
 
+## 3.9.1
+
+### Patch Changes
+
+- [`062b55b337dd8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/062b55b337dd8) -
+  aria-autocomplete is omitted when isSearchable is false.
+
+## 3.9.0
+
+### Minor Changes
+
+- [`2568622464f45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2568622464f45) -
+  release previously feature-gated change to textfield, textarea, and select to increase font size
+  to 16px on mobile
+
 ## 3.8.9
 
 ### Patch Changes

package/dist/cjs/compiled/components/containers.compiled.css

@@ -1,5 +1,4 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}

package/dist/cjs/compiled/components/containers.js

@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react2 = require("@compiled/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../../utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // ==============================
@@ -22,11 +21,16 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
 var containerCSS = exports.containerCSS = function containerCSS() {
   return {};
 };
+
+// iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
+// To prevent this zoom behaviour on mobile devices, the select container uses font.body.large (16px) by default,
+// then switches to the smaller font.body on screens wider than 30rem (desktop).
+// @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
+
 var containerStyles = {
-  default: "_11c82smr _kqswh2mm _lcxv1rj4",
+  default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
   rtl: "_1eim1xrj",
-  disabled: "_80om13gf",
-  ff_safari_input_fix: "_11c81ixg _1tn22smr"
+  disabled: "_80om13gf"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -44,7 +48,7 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
     css = _getStyleProps.css;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, (0, _react2.cx)(className, xcss, '-container')])
+    className: (0, _runtime.ax)([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, (0, _react2.cx)(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/cjs/components/containers.compiled.css

@@ -1,5 +1,4 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}

package/dist/cjs/components/containers.js

@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
 var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react2 = require("@compiled/react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _utils = require("../utils");
 function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
 // ==============================
@@ -23,10 +22,9 @@ var containerCSS = exports.containerCSS = function containerCSS() {
   return {};
 };
 var containerStyles = {
-  default: "_11c82smr _kqswh2mm _lcxv1rj4",
+  default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
   rtl: "_1eim1xrj",
-  disabled: "_80om13gf",
-  ff_safari_input_fix: "_11c81ixg _1tn22smr"
+  disabled: "_80om13gf"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -44,7 +42,7 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
     css = _getStyleProps.css;
   return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: (0, _runtime.ax)([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, (0, _react2.cx)(className, xcss, '-container')])
+    className: (0, _runtime.ax)([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, (0, _react2.cx)(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/cjs/select.js

@@ -1342,8 +1342,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var id = inputId || this.getElementId('input');
 
       // aria attributes makes the JSX "noisy", separated for clarity
-      var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
-        'aria-autocomplete': 'both',
+      var ariaAttributes = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, !this.props.isSearchable && (0, _platformFeatureFlags.fg)('platform_fix_autocomplete_aria_for_select') ? {} : {
+        'aria-autocomplete': 'both'
+      }), {}, {
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat

package/dist/es2019/compiled/components/containers.compiled.css

@@ -1,5 +1,4 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}

package/dist/es2019/compiled/components/containers.js

@@ -4,7 +4,6 @@ import "./containers.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../utils';
 
 // ==============================
@@ -12,11 +11,16 @@ import { getStyleProps } from '../../utils';
 // ==============================
 
 export const containerCSS = () => ({});
+
+// iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
+// To prevent this zoom behaviour on mobile devices, the select container uses font.body.large (16px) by default,
+// then switches to the smaller font.body on screens wider than 30rem (desktop).
+// @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
+
 const containerStyles = {
-  default: "_11c82smr _kqswh2mm _lcxv1rj4",
+  default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
   rtl: "_1eim1xrj",
-  disabled: "_80om13gf",
-  ff_safari_input_fix: "_11c81ixg _1tn22smr"
+  disabled: "_80om13gf"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -37,7 +41,7 @@ export const SelectContainer = props => {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, fg('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, cx(className, xcss, '-container')])
+    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/es2019/components/containers.compiled.css

@@ -1,5 +1,4 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}

package/dist/es2019/components/containers.js

@@ -4,7 +4,6 @@ import "./containers.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../utils';
 
 // ==============================
@@ -13,10 +12,9 @@ import { getStyleProps } from '../utils';
 
 export const containerCSS = () => ({});
 const containerStyles = {
-  default: "_11c82smr _kqswh2mm _lcxv1rj4",
+  default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
   rtl: "_1eim1xrj",
-  disabled: "_80om13gf",
-  ff_safari_input_fix: "_11c81ixg _1tn22smr"
+  disabled: "_80om13gf"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -37,7 +35,7 @@ export const SelectContainer = props => {
   });
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, fg('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, cx(className, xcss, '-container')])
+    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/es2019/select.js

@@ -1345,7 +1345,9 @@ export default class Select extends Component {
 
     // aria attributes makes the JSX "noisy", separated for clarity
     const ariaAttributes = {
-      'aria-autocomplete': 'both',
+      ...(!this.props.isSearchable && fg('platform_fix_autocomplete_aria_for_select') ? {} : {
+        'aria-autocomplete': 'both'
+      }),
       'aria-errormessage': this.props['aria-errormessage'],
       'aria-expanded': menuIsOpen,
       // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat

package/dist/esm/compiled/components/containers.compiled.css

@@ -1,5 +1,4 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}

package/dist/esm/compiled/components/containers.js

@@ -4,7 +4,6 @@ import "./containers.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../../utils';
 
 // ==============================
@@ -14,11 +13,16 @@ import { getStyleProps } from '../../utils';
 export var containerCSS = function containerCSS() {
   return {};
 };
+
+// iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
+// To prevent this zoom behaviour on mobile devices, the select container uses font.body.large (16px) by default,
+// then switches to the smaller font.body on screens wider than 30rem (desktop).
+// @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
+
 var containerStyles = {
-  default: "_11c82smr _kqswh2mm _lcxv1rj4",
+  default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
   rtl: "_1eim1xrj",
-  disabled: "_80om13gf",
-  ff_safari_input_fix: "_11c81ixg _1tn22smr"
+  disabled: "_80om13gf"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -36,7 +40,7 @@ export var SelectContainer = function SelectContainer(props) {
     css = _getStyleProps.css;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, fg('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, cx(className, xcss, '-container')])
+    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/esm/components/containers.compiled.css

@@ -1,5 +1,4 @@
 ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
-._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._16jlkb7n{flex-grow:1}
 ._18m915vq{overflow-y:hidden}
 ._19bv12x7{padding-left:var(--ds-space-075,6px)}

package/dist/esm/components/containers.js

@@ -4,7 +4,6 @@ import "./containers.compiled.css";
 import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
 import { cx } from '@compiled/react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../utils';
 
 // ==============================
@@ -15,10 +14,9 @@ export var containerCSS = function containerCSS() {
   return {};
 };
 var containerStyles = {
-  default: "_11c82smr _kqswh2mm _lcxv1rj4",
+  default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
   rtl: "_1eim1xrj",
-  disabled: "_80om13gf",
-  ff_safari_input_fix: "_11c81ixg _1tn22smr"
+  disabled: "_80om13gf"
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -36,7 +34,7 @@ export var SelectContainer = function SelectContainer(props) {
     css = _getStyleProps.css;
   return /*#__PURE__*/React.createElement("div", _extends({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
-    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, fg('platform_design_system_team_safari_input_fix') && containerStyles.ff_safari_input_fix, cx(className, xcss, '-container')])
+    className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
     ,
     style: css

package/dist/esm/select.js

@@ -1333,8 +1333,9 @@ var Select = /*#__PURE__*/function (_Component) {
       var id = inputId || this.getElementId('input');
 
       // aria attributes makes the JSX "noisy", separated for clarity
-      var ariaAttributes = _objectSpread(_objectSpread(_objectSpread({
-        'aria-autocomplete': 'both',
+      var ariaAttributes = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, !this.props.isSearchable && fg('platform_fix_autocomplete_aria_for_select') ? {} : {
+        'aria-autocomplete': 'both'
+      }), {}, {
         'aria-errormessage': this.props['aria-errormessage'],
         'aria-expanded': menuIsOpen,
         // TODO: aria-haspopup is implied as listbox with role="combobox" and was deprecated for aria 1.2, we still might need to keep it for back compat

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "3.8.9",
+	"version": "3.9.1",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,11 +22,11 @@
 	"dependencies": {
 		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/icon": "^29.0.0",
-		"@atlaskit/layering": "^3.2.0",
+		"@atlaskit/layering": "^3.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^16.1.0",
+		"@atlaskit/primitives": "^16.2.0",
 		"@atlaskit/spinner": "^19.0.0",
-		"@atlaskit/tokens": "^8.0.0",
+		"@atlaskit/tokens": "^8.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.18.6",
 		"@floating-ui/dom": "^1.0.1",
@@ -49,14 +49,14 @@
 		"custom-interactive-elements-not-keyboard-focusable": {
 			"type": "boolean"
 		},
-		"platform_design_system_team_safari_input_fix": {
-			"type": "boolean"
-		},
 		"platform_dst_select_menu_close_on_blur": {
 			"type": "boolean"
 		},
 		"platform_do_not_clear_input_for_multiselect": {
 			"type": "boolean"
+		},
+		"platform_fix_autocomplete_aria_for_select": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {