@atlaskit/react-select 3.8.9 → 3.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/cjs/compiled/components/containers.compiled.css +0 -1
  3. package/dist/cjs/compiled/components/containers.js +9 -5
  4. package/dist/cjs/components/containers.compiled.css +0 -1
  5. package/dist/cjs/components/containers.js +3 -5
  6. package/dist/es2019/compiled/components/containers.compiled.css +0 -1
  7. package/dist/es2019/compiled/components/containers.js +9 -5
  8. package/dist/es2019/components/containers.compiled.css +0 -1
  9. package/dist/es2019/components/containers.js +3 -5
  10. package/dist/esm/compiled/components/containers.compiled.css +0 -1
  11. package/dist/esm/compiled/components/containers.js +9 -5
  12. package/dist/esm/components/containers.compiled.css +0 -1
  13. package/dist/esm/components/containers.js +3 -5
  14. package/package.json +2 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,13 @@
1
1
  # @atlaskit/react-select
2
2
 
3
+ ## 3.9.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`2568622464f45`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/2568622464f45) -
8
+ release previously feature-gated change to textfield, textarea, and select to increase font size
9
+ to 16px on mobile
10
+
3
11
  ## 3.8.9
4
12
 
5
13
  ### Patch Changes
package/dist/cjs/compiled/components/containers.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
2
  ._16jlkb7n{flex-grow:1}
4
3
  ._18m915vq{overflow-y:hidden}
5
4
  ._19bv12x7{padding-left:var(--ds-space-075,6px)}
package/dist/cjs/compiled/components/containers.js CHANGED
@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
12
12
  var _runtime = require("@compiled/react/runtime");
13
13
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
14
14
  var _react2 = require("@compiled/react");
15
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
15
  var _utils = require("../../utils");
17
16
  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); }
18
17
  // ==============================
@@ -22,11 +21,16 @@ function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r
22
21
  var containerCSS = exports.containerCSS = function containerCSS() {
23
22
  return {};
24
23
  };
24
+
25
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
26
+ // To prevent this zoom behaviour on mobile devices, the select container uses font.body.large (16px) by default,
27
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
28
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
29
+
25
30
  var containerStyles = {
26
- default: "_11c82smr _kqswh2mm _lcxv1rj4",
31
+ default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
27
32
  rtl: "_1eim1xrj",
28
- disabled: "_80om13gf",
29
- ff_safari_input_fix: "_11c81ixg _1tn22smr"
33
+ disabled: "_80om13gf"
30
34
  };
31
35
 
32
36
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -44,7 +48,7 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
44
48
  css = _getStyleProps.css;
45
49
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
46
50
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
47
- 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')])
51
+ className: (0, _runtime.ax)([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, (0, _react2.cx)(className, xcss, '-container')])
48
52
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
49
53
  ,
50
54
  style: css
package/dist/cjs/components/containers.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
2
  ._16jlkb7n{flex-grow:1}
4
3
  ._18m915vq{overflow-y:hidden}
5
4
  ._19bv12x7{padding-left:var(--ds-space-075,6px)}
package/dist/cjs/components/containers.js CHANGED
@@ -12,7 +12,6 @@ var React = _interopRequireWildcard(require("react"));
12
12
  var _runtime = require("@compiled/react/runtime");
13
13
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
14
14
  var _react2 = require("@compiled/react");
15
- var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
15
  var _utils = require("../utils");
17
16
  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); }
18
17
  // ==============================
@@ -23,10 +22,9 @@ var containerCSS = exports.containerCSS = function containerCSS() {
23
22
  return {};
24
23
  };
25
24
  var containerStyles = {
26
- default: "_11c82smr _kqswh2mm _lcxv1rj4",
25
+ default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
27
26
  rtl: "_1eim1xrj",
28
- disabled: "_80om13gf",
29
- ff_safari_input_fix: "_11c81ixg _1tn22smr"
27
+ disabled: "_80om13gf"
30
28
  };
31
29
 
32
30
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -44,7 +42,7 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
44
42
  css = _getStyleProps.css;
45
43
  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
46
44
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
47
- 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')])
45
+ className: (0, _runtime.ax)([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, (0, _react2.cx)(className, xcss, '-container')])
48
46
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
49
47
  ,
50
48
  style: css
package/dist/es2019/compiled/components/containers.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
2
  ._16jlkb7n{flex-grow:1}
4
3
  ._18m915vq{overflow-y:hidden}
5
4
  ._19bv12x7{padding-left:var(--ds-space-075,6px)}
package/dist/es2019/compiled/components/containers.js CHANGED
@@ -4,7 +4,6 @@ import "./containers.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { cx } from '@compiled/react';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
7
  import { getStyleProps } from '../../utils';
9
8
 
10
9
  // ==============================
@@ -12,11 +11,16 @@ import { getStyleProps } from '../../utils';
12
11
  // ==============================
13
12
 
14
13
  export const containerCSS = () => ({});
14
+
15
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
16
+ // To prevent this zoom behaviour on mobile devices, the select container uses font.body.large (16px) by default,
17
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
18
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
19
+
15
20
  const containerStyles = {
16
- default: "_11c82smr _kqswh2mm _lcxv1rj4",
21
+ default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
17
22
  rtl: "_1eim1xrj",
18
- disabled: "_80om13gf",
19
- ff_safari_input_fix: "_11c81ixg _1tn22smr"
23
+ disabled: "_80om13gf"
20
24
  };
21
25
 
22
26
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -37,7 +41,7 @@ export const SelectContainer = props => {
37
41
  });
38
42
  return /*#__PURE__*/React.createElement("div", _extends({
39
43
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
40
- 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')])
44
+ className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
41
45
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
42
46
  ,
43
47
  style: css
package/dist/es2019/components/containers.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
2
  ._16jlkb7n{flex-grow:1}
4
3
  ._18m915vq{overflow-y:hidden}
5
4
  ._19bv12x7{padding-left:var(--ds-space-075,6px)}
package/dist/es2019/components/containers.js CHANGED
@@ -4,7 +4,6 @@ import "./containers.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { cx } from '@compiled/react';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
7
  import { getStyleProps } from '../utils';
9
8
 
10
9
  // ==============================
@@ -13,10 +12,9 @@ import { getStyleProps } from '../utils';
13
12
 
14
13
  export const containerCSS = () => ({});
15
14
  const containerStyles = {
16
- default: "_11c82smr _kqswh2mm _lcxv1rj4",
15
+ default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
17
16
  rtl: "_1eim1xrj",
18
- disabled: "_80om13gf",
19
- ff_safari_input_fix: "_11c81ixg _1tn22smr"
17
+ disabled: "_80om13gf"
20
18
  };
21
19
 
22
20
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -37,7 +35,7 @@ export const SelectContainer = props => {
37
35
  });
38
36
  return /*#__PURE__*/React.createElement("div", _extends({
39
37
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
40
- 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')])
38
+ className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
41
39
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
42
40
  ,
43
41
  style: css
package/dist/esm/compiled/components/containers.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
2
  ._16jlkb7n{flex-grow:1}
4
3
  ._18m915vq{overflow-y:hidden}
5
4
  ._19bv12x7{padding-left:var(--ds-space-075,6px)}
package/dist/esm/compiled/components/containers.js CHANGED
@@ -4,7 +4,6 @@ import "./containers.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { cx } from '@compiled/react';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
7
  import { getStyleProps } from '../../utils';
9
8
 
10
9
  // ==============================
@@ -14,11 +13,16 @@ import { getStyleProps } from '../../utils';
14
13
  export var containerCSS = function containerCSS() {
15
14
  return {};
16
15
  };
16
+
17
+ // iOS Safari automatically zooms into form inputs on focus when the font size is less than 16px.
18
+ // To prevent this zoom behaviour on mobile devices, the select container uses font.body.large (16px) by default,
19
+ // then switches to the smaller font.body on screens wider than 30rem (desktop).
20
+ // @see: https://medium.com/@rares.popescu/2-ways-to-avoid-the-automatic-zoom-in-on-input-fields-8a71479e542e
21
+
17
22
  var containerStyles = {
18
- default: "_11c82smr _kqswh2mm _lcxv1rj4",
23
+ default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
19
24
  rtl: "_1eim1xrj",
20
- disabled: "_80om13gf",
21
- ff_safari_input_fix: "_11c81ixg _1tn22smr"
25
+ disabled: "_80om13gf"
22
26
  };
23
27
 
24
28
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -36,7 +40,7 @@ export var SelectContainer = function SelectContainer(props) {
36
40
  css = _getStyleProps.css;
37
41
  return /*#__PURE__*/React.createElement("div", _extends({
38
42
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
39
- 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')])
43
+ className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
40
44
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
41
45
  ,
42
46
  style: css
package/dist/esm/components/containers.compiled.css CHANGED
@@ -1,5 +1,4 @@
1
1
  ._11c81ixg{font:var(--ds-font-body-large,normal 400 1pc/24px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
2
- ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
2
  ._16jlkb7n{flex-grow:1}
4
3
  ._18m915vq{overflow-y:hidden}
5
4
  ._19bv12x7{padding-left:var(--ds-space-075,6px)}
package/dist/esm/components/containers.js CHANGED
@@ -4,7 +4,6 @@ import "./containers.compiled.css";
4
4
  import * as React from 'react';
5
5
  import { ax, ix } from "@compiled/react/runtime";
6
6
  import { cx } from '@compiled/react';
7
- import { fg } from '@atlaskit/platform-feature-flags';
8
7
  import { getStyleProps } from '../utils';
9
8
 
10
9
  // ==============================
@@ -15,10 +14,9 @@ export var containerCSS = function containerCSS() {
15
14
  return {};
16
15
  };
17
16
  var containerStyles = {
18
- default: "_11c82smr _kqswh2mm _lcxv1rj4",
17
+ default: "_11c81ixg _kqswh2mm _lcxv1rj4 _1tn22smr",
19
18
  rtl: "_1eim1xrj",
20
- disabled: "_80om13gf",
21
- ff_safari_input_fix: "_11c81ixg _1tn22smr"
19
+ disabled: "_80om13gf"
22
20
  };
23
21
 
24
22
  // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -36,7 +34,7 @@ export var SelectContainer = function SelectContainer(props) {
36
34
  css = _getStyleProps.css;
37
35
  return /*#__PURE__*/React.createElement("div", _extends({
38
36
  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
39
- 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')])
37
+ className: ax([containerStyles.default, isRtl && containerStyles.rtl, isDisabled && containerStyles.disabled, cx(className, xcss, '-container')])
40
38
  // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
41
39
  ,
42
40
  style: css
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/react-select",
3
- "version": "3.8.9",
3
+ "version": "3.9.0",
4
4
  "description": "A forked version of react-select to only be used in atlaskit/select",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
@@ -22,7 +22,7 @@
22
22
  "dependencies": {
23
23
  "@atlaskit/ds-lib": "^5.2.0",
24
24
  "@atlaskit/icon": "^29.0.0",
25
- "@atlaskit/layering": "^3.2.0",
25
+ "@atlaskit/layering": "^3.3.0",
26
26
  "@atlaskit/platform-feature-flags": "^1.1.0",
27
27
  "@atlaskit/primitives": "^16.1.0",
28
28
  "@atlaskit/spinner": "^19.0.0",
@@ -49,9 +49,6 @@
49
49
  "custom-interactive-elements-not-keyboard-focusable": {
50
50
  "type": "boolean"
51
51
  },
52
- "platform_design_system_team_safari_input_fix": {
53
- "type": "boolean"
54
- },
55
52
  "platform_dst_select_menu_close_on_blur": {
56
53
  "type": "boolean"
57
54
  },