@atlaskit/select 19.0.0 → 20.0.0

package/CHANGELOG.md

@@ -1,5 +1,27 @@
 # @atlaskit/select
 
+## 20.0.0
+
+### Major Changes
+
+- [#110498](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/110498)
+  [`53ad7ff63b09a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/53ad7ff63b09a) -
+  Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
+  the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
+  use this version of `@atlaskit/select`, you will need to ensure that your bundler is configured to
+  handle `.css` imports correctly.
+
+  Most bundlers come with built-in support for `.css` imports, so you may not need to do anything.
+  If you are using a different bundler, please refer to the documentation for that bundler to
+  understand how to handle `.css` imports. For more information on the migration, please refer to
+  [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
+
+### Patch Changes
+
+- [#119843](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/119843)
+  [`7bd0d851d1c39`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/7bd0d851d1c39) -
+  [ux] Clean up ARIA props that are no longer needed
+
 ## 19.0.0
 
 ### Major Changes

package/dist/cjs/CountrySelect.compiled.css

@@ -0,0 +1,5 @@
+._12l2u2gc{margin-inline-end:var(--ds-space-100,8px)}
+._1e0c1txw{display:flex}
+._1wyb1cby{font-size:1.125rem}
+._4cvr1h6o{align-items:center}
+._vwz4cjiy{line-height:1.2}

package/dist/cjs/CountrySelect.js

@@ -1,43 +1,36 @@
+/* CountrySelect.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./CountrySelect.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
 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 _countries = require("./data/countries");
 var _Select = _interopRequireDefault(require("./Select"));
 var _countryGroupsAnnouncement = require("./utils/country-groups-announcement");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @repo/internal/fs/filename-pattern-match */ /**
- * @jsxRuntime classic
- * @jsx jsx
- */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /* eslint-disable @repo/internal/fs/filename-pattern-match */
 // custom option renderer
-var labelStyles = (0, _react.css)({
-  display: 'flex',
-  alignItems: 'center',
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  lineHeight: 1.2
-});
-var flagStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
-  fontSize: '1.125rem',
-  // emoji size
-  marginInlineEnd: "var(--ds-space-100, 8px)"
-});
+var labelStyles = null;
+var flagStyles = null;
 var Opt = function Opt(_ref) {
   var children = _ref.children,
     icon = _ref.icon;
-  return (0, _react.jsx)("div", {
-    css: labelStyles
-  }, (0, _react.jsx)("span", {
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1e0c1txw _4cvr1h6o _vwz4cjiy"])
+  }, /*#__PURE__*/React.createElement("span", {
     "aria-hidden": "true",
-    css: flagStyles
+    className: (0, _runtime.ax)(["_1wyb1cby _12l2u2gc"])
   }, icon), children);
 };
 
@@ -56,7 +49,7 @@ var getOptionValue = function getOptionValue(opt) {
 
 // the text node of the control
 var controlLabel = function controlLabel(opt) {
-  return (0, _react.jsx)(Opt, {
+  return /*#__PURE__*/React.createElement(Opt, {
     icon: opt.icon
   }, opt.abbr.toUpperCase());
 };
@@ -66,7 +59,7 @@ var optionLabel = function optionLabel(_ref3) {
     code = _ref3.code,
     icon = _ref3.icon,
     name = _ref3.name;
-  return (0, _react.jsx)(Opt, {
+  return /*#__PURE__*/React.createElement(Opt, {
     icon: icon
   }, getOptionLabel({
     abbr: abbr,
@@ -86,7 +79,7 @@ var CountrySelect = function CountrySelect(props) {
   var ariaLiveMessages = props.ariaLiveMessages,
     options = props.options;
   var countryOptions = options || _countries.groupedCountries;
-  return (0, _react.jsx)(_Select.default, (0, _extends2.default)({
+  return /*#__PURE__*/React.createElement(_Select.default, (0, _extends2.default)({
     isClearable: false,
     formatOptionLabel: formatOptionLabel,
     getOptionLabel: getOptionLabel,

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -405,12 +405,14 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           ref = _ref2.ref,
           style = _ref2.style;
         return /*#__PURE__*/_react.default.createElement(_components.MenuDialog
+        // There is not a limited amount of values for the widths, so they need to remain dynamic.
         // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
         , {
-          style: style,
+          style: _objectSpread(_objectSpread({}, style), {}, {
+            maxWidth: maxMenuWidth,
+            minWidth: minMenuWidth
+          }),
           "data-placement": placement,
-          minWidth: minMenuWidth,
-          maxWidth: maxMenuWidth,
           id: id,
           testId: testId,
           ref: _this.resolveMenuRef(ref)

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

@@ -0,0 +1,11 @@
+
+._2rkoiti9{border-radius:var(--ds-border-radius-100,4px)}._12l2v77o{margin-inline-end:var(--ds-space-025,2px)}
+._16qsu838{box-shadow:var(--_z6sjud)}
+._1bsbzwfg{width:2pc}
+._1pby16oo{z-index:510}
+._1q51u2gc{padding-block-start:var(--ds-space-100,8px)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhk1bhr{background-color:var(--ds-surface-overlay,#fff)}
+._bozgu2gc{padding-inline-start:var(--ds-space-100,8px)}
+._y3gn1h6o{text-align:center}
+._y4tiu2gc{padding-inline-end:var(--ds-space-100,8px)}

package/dist/cjs/PopupSelect/components.js

@@ -1,63 +1,52 @@
+/* components.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.defaultComponents = exports.MenuDialog = exports.DummyControl = void 0;
+require("./components.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _searchEditorSearch = _interopRequireDefault(require("@atlaskit/icon/core/migration/search--editor-search"));
 var _reactSelect = require("@atlaskit/react-select");
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _excluded = ["innerRef", "innerProps"];
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 // ==============================
 // Styled Components
 // ==============================
 
-var menuDialogStyles = (0, _react2.css)({
-  zIndex: _constants.layers.modal(),
-  backgroundColor: "var(--ds-surface-overlay, white)",
-  borderRadius: "var(--ds-border-radius-100, 4px)",
-  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")")
-});
+var menuDialogStyles = null;
 
 /**
  * __Menu dialog__
  * Wrapper for PopupSelect component.
- *
  */
 var MenuDialog = exports.MenuDialog = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
-  var maxWidth = _ref.maxWidth,
-    minWidth = _ref.minWidth,
-    children = _ref.children,
+  var children = _ref.children,
     id = _ref.id,
     style = _ref.style,
     testId = _ref.testId;
-  return (0, _react2.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: ref,
-    css: [menuDialogStyles,
-    // There is not a limited amount of values for the widths, so they need
-    // to remain dynamic.
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    {
-      maxWidth: maxWidth,
-      minWidth: minWidth
-    }]
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
-    ,
-    style: style,
     id: id,
-    "data-testid": testId && "".concat(testId, "--menu")
+    "data-testid": testId && "".concat(testId, "--menu"),
+    className: (0, _runtime.ax)(["_2rkoiti9 _1pby16oo _bfhk1bhr _16qsu838"]),
+    style: _objectSpread(_objectSpread({}, style), {}, {
+      "--_z6sjud": (0, _runtime.ix)("var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N40A, ", 0 4px 11px ").concat(_colors.N40A), ")"))
+    })
   }, children);
 });
 
@@ -65,30 +54,24 @@ var MenuDialog = exports.MenuDialog = /*#__PURE__*/(0, _react.forwardRef)(functi
 // Custom Components
 // ==============================
 
-var dropdownStyles = (0, _react2.css)({
-  width: 32,
-  marginInlineEnd: "var(--ds-space-025, 2px)",
-  textAlign: 'center'
-});
+var dropdownStyles = null;
 var DropdownIndicator = function DropdownIndicator() {
-  return (0, _react2.jsx)("div", {
-    css: dropdownStyles
-  }, (0, _react2.jsx)(_searchEditorSearch.default, {
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)(["_1bsbzwfg _12l2v77o _y3gn1h6o"])
+  }, /*#__PURE__*/React.createElement(_searchEditorSearch.default, {
     color: "currentColor",
     label: ""
   }));
 };
-var controlStyles = (0, _react2.css)({
-  padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-100, 8px)", " ", "var(--ds-space-050, 4px)")
-});
+var controlStyles = null;
 var Control = function Control(_ref2) {
   var innerRef = _ref2.innerRef,
     innerProps = _ref2.innerProps,
     props = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
-  return (0, _react2.jsx)("div", {
+  return /*#__PURE__*/React.createElement("div", {
     ref: innerRef,
-    css: controlStyles
-  }, (0, _react2.jsx)(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
+    className: (0, _runtime.ax)(["_85i51b66 _1q51u2gc _y4tiu2gc _bozgu2gc"])
+  }, /*#__PURE__*/React.createElement(_reactSelect.components.Control, (0, _extends2.default)({}, props, {
     innerProps: innerProps
   })));
 };
@@ -98,20 +81,26 @@ var Control = function Control(_ref2) {
  * Overrides the default DummyControl component in Select.
  */
 var DummyControl = exports.DummyControl = function DummyControl(props) {
-  return (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)(_reactSelect.components.Control, props));
+  return /*#__PURE__*/React.createElement(_visuallyHidden.default, null, /*#__PURE__*/React.createElement(_reactSelect.components.Control, props));
 };
 
 // NOTE `props` intentionally omitted from `Fragment`
 var Menu = function Menu(_ref3) {
   var children = _ref3.children,
     innerProps = _ref3.innerProps;
-  return (0, _react2.jsx)("div", innerProps, children);
+  return /*#__PURE__*/React.createElement("div", innerProps, children);
 };
+
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 var ClearIndicator = function ClearIndicator(props) {
-  return (0, _react2.jsx)(_reactSelect.components.ClearIndicator, props);
+  return /*#__PURE__*/React.createElement(_reactSelect.components.ClearIndicator, props);
 };
 var MultiValueRemove = function MultiValueRemove(props) {
-  return (0, _react2.jsx)(_reactSelect.components.MultiValueRemove, props);
+  return (
+    /*#__PURE__*/
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    React.createElement(_reactSelect.components.MultiValueRemove, props)
+  );
 };
 var defaultComponents = exports.defaultComponents = {
   Control: Control,

package/dist/cjs/Select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "19.0.0";
+var packageVersion = "20.0.0";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/input-options.compiled.css

@@ -0,0 +1,28 @@
+._16cu892t svg circle:first-of-type, ._1xci892t svg rect{stroke-linejoin:round}
+._16jlkb7n{flex-grow:1}
+._16qs1kw7{box-shadow:inherit}
+._16qsn8hf{box-shadow:inset 2px 0 0 var(--ds-border-focused,#388bff)}
+._18ql1j7p{-webkit-tap-highlight-color:rgba(0,0,0,0)}
+._1bsb1osq{width:100%}
+._1bto1l2s{text-overflow:ellipsis}
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1reo15vq{overflow-x:hidden}
+._1u9j1elr svg circle:first-of-type, ._1gqp1elr svg rect{stroke:var(--ds-border-input,#8590a2)}
+._1u9j1r31 svg circle:first-of-type, ._1gqp1r31 svg rect{stroke:currentColor}
+._4cvr1h6o{align-items:center}
+._59qxe4h9 svg circle:first-of-type, ._8y3xe4h9 svg rect{stroke-width:var(--ds-border-width,1px)}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._bfhk166n{background-color:var(--ds-background-neutral-subtle-hovered,#091e420f)}
+._bfhk1j28{background-color:transparent}
+._bozgpxbi{padding-inline-start:var(--ds-space-200,1pc)}
+._o5721q9c{white-space:nowrap}
+._syaz15gi{color:var(--ds-text-disabled,inherit)}
+._syaz1kw7{color:inherit}
+._uiztglyw{-webkit-user-select:none;-ms-user-select:none;user-select:none}
+._vchhusvi{box-sizing:border-box}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}
+._y4tiutpp{padding-inline-end:var(--ds-space-150,9pt)}
+._1di61dty:active{background-color:var(--ds-background-neutral-subtle-pressed,#091e4224)}
+@media screen and (-ms-high-contrast:active){._112e1vrj{border-inline-start:2px solid transparent}}