@atlaskit/react-select 1.4.2 → 1.5.1

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @atlaskit/react-select
 
+## 1.5.1
+
+### Patch Changes
+
+- [#174296](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/174296)
+  [`b9f79083be192`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b9f79083be192) -
+  Adding extra semantics to listbox
+
+## 1.5.0
+
+### Minor Changes
+
+- [#173737](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/173737)
+  [`667640085e5c7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/667640085e5c7) -
+  Update the font size for the textarea and select components at the `xs` breakpoint. The font size
+  will be increased to 16px to prevent IOS Safari from zooming in on the text field when it is
+  focused. Styles for larger breakpoints will remain unchanged.
+
+  Apply a fix to the textfield component to ensure monospace is correctly applied to the input at
+  the `media.above.xs` breakpoint.
+
+  These changes are currently behind a feature gate and will be evaluated for effectiveness. If
+  successful, they will be included in a future release.
+
 ## 1.4.2
 
 ### Patch Changes

package/dist/cjs/components/containers.js

@@ -6,7 +6,10 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.valueContainerCSS = exports.indicatorsContainerCSS = exports.containerCSS = exports.ValueContainer = exports.SelectContainer = exports.IndicatorsContainer = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _utils = require("../utils");
 /**
  * @jsxRuntime classic
@@ -20,14 +23,16 @@ var _utils = require("../utils");
 var containerCSS = exports.containerCSS = function containerCSS(_ref) {
   var isDisabled = _ref.isDisabled,
     isRtl = _ref.isRtl;
-  return {
+  return (0, _defineProperty2.default)({
     label: 'container',
     direction: isRtl ? 'rtl' : undefined,
     position: 'relative',
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     pointerEvents: 'all',
     cursor: isDisabled ? 'not-allowed' : undefined
-  };
+  }, "".concat(_primitives.media.above.xs), {
+    font: (0, _platformFeatureFlags.fg)('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
+  });
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -46,11 +51,11 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
 // Value Container
 // ==============================
 
-var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(_ref2) {
-  var isMulti = _ref2.isMulti,
-    hasValue = _ref2.hasValue,
-    isCompact = _ref2.isCompact,
-    controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
+var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(_ref3) {
+  var isMulti = _ref3.isMulti,
+    hasValue = _ref3.hasValue,
+    isCompact = _ref3.isCompact,
+    controlShouldRenderValue = _ref3.selectProps.controlShouldRenderValue;
   return {
     alignItems: 'center',
     display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',

package/dist/cjs/select.js

@@ -1641,6 +1641,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
+          var _this4$inputRef;
           return /*#__PURE__*/_react.default.createElement(MenuList, (0, _extends2.default)({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1652,7 +1653,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') && {
               'aria-label': label,
-              'aria-labelledby': "".concat(labelId || _this4.getElementId('input'), " ").concat(commonProps.isMulti && (0, _helpers.isSafari)() ? _this4.getElementId('multi-message') : '')
+              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'), " ").concat(commonProps.isMulti && (0, _helpers.isSafari)() ? _this4.getElementId('multi-message') : '')
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,

package/dist/es2019/components/containers.js

@@ -5,6 +5,8 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { media } from '@atlaskit/primitives';
 import { getStyleProps } from '../utils';
 
 // ==============================
@@ -18,9 +20,12 @@ export const containerCSS = ({
   label: 'container',
   direction: isRtl ? 'rtl' : undefined,
   position: 'relative',
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+  font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
   pointerEvents: 'all',
-  cursor: isDisabled ? 'not-allowed' : undefined
+  cursor: isDisabled ? 'not-allowed' : undefined,
+  [`${media.above.xs}`]: {
+    font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
+  }
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/select.js

@@ -1670,25 +1670,28 @@ export default class Select extends Component {
       onTopArrive: onMenuScrollToTop,
       onBottomArrive: onMenuScrollToBottom,
       lockEnabled: menuShouldBlockScroll
-    }, scrollTargetRef => /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
-      innerRef: instance => {
-        this.getMenuListRef(instance);
-        scrollTargetRef(instance);
-      },
-      innerProps: {
-        role: 'listbox',
-        'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
-        id: this.getElementId('listbox'),
-        // add aditional label on listbox when ff is on
-        ...(fg('design_system_select-a11y-improvement') && {
-          'aria-label': label,
-          'aria-labelledby': `${labelId || this.getElementId('input')} ${commonProps.isMulti && isSafari() ? this.getElementId('multi-message') : ''}`
-        })
-      },
-      isLoading: isLoading,
-      maxHeight: maxHeight,
-      focusedOption: focusedOption
-    }), menuUI))));
+    }, scrollTargetRef => {
+      var _this$inputRef;
+      return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
+        innerRef: instance => {
+          this.getMenuListRef(instance);
+          scrollTargetRef(instance);
+        },
+        innerProps: {
+          role: 'listbox',
+          'aria-multiselectable': (this.isVoiceOver || !commonProps.isMulti) && fg('design_system_select-a11y-improvement') ? undefined : commonProps.isMulti,
+          id: this.getElementId('listbox'),
+          // add aditional label on listbox when ff is on
+          ...(fg('design_system_select-a11y-improvement') && {
+            'aria-label': label,
+            'aria-labelledby': `${labelId || ((_this$inputRef = this.inputRef) === null || _this$inputRef === void 0 ? void 0 : _this$inputRef.id) || this.getElementId('input')} ${commonProps.isMulti && isSafari() ? this.getElementId('multi-message') : ''}`
+          })
+        },
+        isLoading: isLoading,
+        maxHeight: maxHeight,
+        focusedOption: focusedOption
+      }), menuUI);
+    })));
 
     // positioning behaviour is almost identical for portalled and fixed,
     // so we use the same component. the actual portalling logic is forked

package/dist/esm/components/containers.js

@@ -1,10 +1,13 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /**
  * @jsxRuntime classic
  * @jsx jsx
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { media } from '@atlaskit/primitives';
 import { getStyleProps } from '../utils';
 
 // ==============================
@@ -14,14 +17,16 @@ import { getStyleProps } from '../utils';
 export var containerCSS = function containerCSS(_ref) {
   var isDisabled = _ref.isDisabled,
     isRtl = _ref.isRtl;
-  return {
+  return _defineProperty({
     label: 'container',
     direction: isRtl ? 'rtl' : undefined,
     position: 'relative',
-    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body-large, normal 400 16px/24px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
     pointerEvents: 'all',
     cursor: isDisabled ? 'not-allowed' : undefined
-  };
+  }, "".concat(media.above.xs), {
+    font: fg('platform_design_system_team_safari_input_fix') ? "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)" : undefined
+  });
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -40,11 +45,11 @@ export var SelectContainer = function SelectContainer(props) {
 // Value Container
 // ==============================
 
-export var valueContainerCSS = function valueContainerCSS(_ref2) {
-  var isMulti = _ref2.isMulti,
-    hasValue = _ref2.hasValue,
-    isCompact = _ref2.isCompact,
-    controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
+export var valueContainerCSS = function valueContainerCSS(_ref3) {
+  var isMulti = _ref3.isMulti,
+    hasValue = _ref3.hasValue,
+    isCompact = _ref3.isCompact,
+    controlShouldRenderValue = _ref3.selectProps.controlShouldRenderValue;
   return {
     alignItems: 'center',
     display: isMulti && hasValue && controlShouldRenderValue ? 'flex' : 'grid',

package/dist/esm/select.js

@@ -1632,6 +1632,7 @@ var Select = /*#__PURE__*/function (_Component) {
           onBottomArrive: onMenuScrollToBottom,
           lockEnabled: menuShouldBlockScroll
         }, function (scrollTargetRef) {
+          var _this4$inputRef;
           return /*#__PURE__*/React.createElement(MenuList, _extends({}, commonProps, {
             innerRef: function innerRef(instance) {
               _this4.getMenuListRef(instance);
@@ -1643,7 +1644,7 @@ var Select = /*#__PURE__*/function (_Component) {
               id: _this4.getElementId('listbox')
             }, fg('design_system_select-a11y-improvement') && {
               'aria-label': label,
-              'aria-labelledby': "".concat(labelId || _this4.getElementId('input'), " ").concat(commonProps.isMulti && isSafari() ? _this4.getElementId('multi-message') : '')
+              'aria-labelledby': "".concat(labelId || ((_this4$inputRef = _this4.inputRef) === null || _this4$inputRef === void 0 ? void 0 : _this4$inputRef.id) || _this4.getElementId('input'), " ").concat(commonProps.isMulti && isSafari() ? _this4.getElementId('multi-message') : '')
             }),
             isLoading: isLoading,
             maxHeight: maxHeight,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "1.4.2",
+	"version": "1.5.1",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,6 +30,7 @@
 	"dependencies": {
 		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
@@ -59,6 +60,9 @@
 		},
 		"platform-component-visual-refresh": {
 			"type": "boolean"
+		},
+		"platform_design_system_team_safari_input_fix": {
+			"type": "boolean"
 		}
 	},
 	"techstack": {