@atlaskit/react-select 2.7.5 → 3.0.0

package/dist/esm/components/option.js

@@ -1,13 +1,11 @@
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import CompiledOption, { optionCSS as compiledOptionCSS } from '../compiled/components/option';
-import EmotionOption, { optionCSS as emotionOptionCSS } from '../emotion/components/option';
 export var optionCSS = function optionCSS(props) {
-  return fg('compiled-react-select') ? compiledOptionCSS() : emotionOptionCSS(props);
+  return compiledOptionCSS();
 };
 var Option = function Option(props) {
-  return fg('compiled-react-select') ? /*#__PURE__*/React.createElement(CompiledOption, props) : /*#__PURE__*/React.createElement(EmotionOption, props);
+  return /*#__PURE__*/React.createElement(CompiledOption, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/placeholder.js

@@ -1,13 +1,11 @@
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Compiled, { placeholderCSS as compiledPlaceholderCSS } from '../compiled/components/placeholder';
-import Emotion, { placeholderCSS as emotionPlaceholderCSS } from '../emotion/components/placeholder';
 export var placeholderCSS = function placeholderCSS(props) {
-  return fg('compiled-react-select') ? compiledPlaceholderCSS() : emotionPlaceholderCSS(props);
+  return compiledPlaceholderCSS();
 };
 var Placeholder = function Placeholder(props) {
-  return fg('compiled-react-select') ? /*#__PURE__*/React.createElement(Compiled, props) : /*#__PURE__*/React.createElement(Emotion, props);
+  return /*#__PURE__*/React.createElement(Compiled, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/esm/components/single-value.js

@@ -1,13 +1,11 @@
 /* eslint-disable @repo/internal/react/no-unsafe-spread-props */
 import React from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Compiled, { css as compiledCSS } from '../compiled/components/single-value';
-import Emotion, { css as emotionCSS } from '../emotion/components/single-value';
 export var css = function css(props) {
-  return fg('compiled-react-select') ? compiledCSS() : emotionCSS(props);
+  return compiledCSS();
 };
 var SingleValue = function SingleValue(props) {
-  return fg('compiled-react-select') ? /*#__PURE__*/React.createElement(Compiled, props) : /*#__PURE__*/React.createElement(Emotion, props);
+  return /*#__PURE__*/React.createElement(Compiled, props);
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -36,10 +36,14 @@ export var SelectContainer = function SelectContainer(props) {
     innerProps = props.innerProps,
     isDisabled = props.isDisabled,
     isRtl = props.isRtl;
-  return jsx("div", _extends({}, getStyleProps(props, 'container', {
+  var styles = getStyleProps(props, 'container', {
     '--is-disabled': isDisabled,
     '--is-rtl': isRtl
-  }), innerProps), children);
+  });
+  return jsx("div", _extends({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-container'
+  }, innerProps), children);
 };
 
 // ==============================
@@ -78,7 +82,7 @@ export var ValueContainer = function ValueContainer(props) {
     css: styles.css
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
     ,
-    className: styles.className || 'value-container'
+    className: styles.className || '-ValueContainer'
   }, innerProps), children);
 };
 

package/dist/esm/emotion/components/menu.js

@@ -261,9 +261,12 @@ var Menu = function Menu(props) {
   var children = props.children,
     innerRef = props.innerRef,
     innerProps = props.innerProps;
-  return jsx("div", _extends({}, getStyleProps(props, 'menu', {
+  var styles = getStyleProps(props, 'menu', {
     menu: true
-  }), {
+  });
+  return jsx("div", _extends({}, styles, {
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
+    className: styles.className || '-menu',
     ref: innerRef
   }, innerProps), children);
 };

package/dist/esm/select.js

@@ -396,7 +396,7 @@ var Select = /*#__PURE__*/function (_Component) {
       if (!custom) {
         return base;
       }
-      var customStyles = fg('compiled-react-select') ? filterUnsupportedSelectors(custom(base, props)) : custom(base, props);
+      var customStyles = filterUnsupportedSelectors(custom(base, props));
       return customStyles;
     });
     _defineProperty(_this, "getClassNames", function (key, props) {

package/dist/types/select.d.ts

@@ -119,11 +119,9 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * This complex object includes all the compositional components that are used
      * in `react-select`. If you wish to overwrite a component, pass in an object
-     * with the appropriate namespace.
+     * with the appropriate namespace. If you wish to restyle a component, we recommend
+     * using this prop with the `xcss` prop.
      *
-     * If you only wish to restyle a component, we recommend using the `styles` prop
-     * instead. For a list of the components that can be passed in, and the shape
-     * that will be passed to them, see [the components docs](/components)
      */
     components: SelectComponentsConfig<Option, IsMulti, Group>;
     /**

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

@@ -119,11 +119,9 @@ export interface SelectProps<Option, IsMulti extends boolean, Group extends Grou
     /**
      * This complex object includes all the compositional components that are used
      * in `react-select`. If you wish to overwrite a component, pass in an object
-     * with the appropriate namespace.
+     * with the appropriate namespace. If you wish to restyle a component, we recommend
+     * using this prop with the `xcss` prop.
      *
-     * If you only wish to restyle a component, we recommend using the `styles` prop
-     * instead. For a list of the components that can be passed in, and the shape
-     * that will be passed to them, see [the components docs](/components)
      */
     components: SelectComponentsConfig<Option, IsMulti, Group>;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "2.7.5",
+	"version": "3.0.0",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -30,7 +30,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^27.0.0",
+		"@atlaskit/icon": "^27.2.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.9.0",