@atlaskit/react-select 3.8.8 → 3.9.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/react-select
 
+## 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
+
+- [`7264c5e8ee76b`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7264c5e8ee76b) -
+  export additional type
+
 ## 3.8.8
 
 ### 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/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/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/types/index.d.ts

@@ -14,7 +14,7 @@ export type { ControlProps } from './components/control';
 export type { GroupProps, GroupHeadingProps } from './components/group';
 export type { ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps, } from './components/indicators';
 export type { InputProps } from './components/input';
-export type { MenuListProps, MenuProps, NoticeProps } from './components/menu';
+export type { MenuListProps, MenuProps, NoticeProps, MenuPortalProps } from './components/menu';
 export type { MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, } from './components/multi-value';
 export type { OptionProps } from './components/option';
 export type { PlaceholderProps } from './components/placeholder';

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

@@ -14,7 +14,7 @@ export type { ControlProps } from './components/control';
 export type { GroupProps, GroupHeadingProps } from './components/group';
 export type { ClearIndicatorProps, DropdownIndicatorProps, LoadingIndicatorProps, } from './components/indicators';
 export type { InputProps } from './components/input';
-export type { MenuListProps, MenuProps, NoticeProps } from './components/menu';
+export type { MenuListProps, MenuProps, NoticeProps, MenuPortalProps } from './components/menu';
 export type { MultiValueGenericProps, MultiValueProps, MultiValueRemoveProps, } from './components/multi-value';
 export type { OptionProps } from './components/option';
 export type { PlaceholderProps } from './components/placeholder';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "3.8.8",
+	"version": "3.9.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -22,7 +22,7 @@
 	"dependencies": {
 		"@atlaskit/ds-lib": "^5.2.0",
 		"@atlaskit/icon": "^29.0.0",
-		"@atlaskit/layering": "^3.2.0",
+		"@atlaskit/layering": "^3.3.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^16.1.0",
 		"@atlaskit/spinner": "^19.0.0",
@@ -49,9 +49,6 @@
 		"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"
 		},