@atlaskit/react-select 3.16.0 → 3.16.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/react-select
 
+## 3.16.2
+
+### Patch Changes
+
+- [`6622a9a9710ad`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/6622a9a9710ad) -
+  [ux] Fix for select not detecting a case of custom styling and overwriting styles behind a ff.
+
+## 3.16.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 3.16.0
 
 ### Minor Changes

package/dist/cjs/async.js

@@ -6,12 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-Object.defineProperty(exports, "useAsync", {
-  enumerable: true,
-  get: function get() {
-    return _useAsync.default;
-  }
-});
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _select = _interopRequireDefault(require("./select"));
@@ -29,5 +23,6 @@ var AsyncSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
     ref: ref
   }, selectProps));
 });
+
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = AsyncSelect;

package/dist/cjs/compiled/components/indicators-container.compiled.css

@@ -0,0 +1,5 @@
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1wpz1fhb{align-self:stretch}
+._4cvr1h6o{align-items:center}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

package/dist/cjs/compiled/components/indicators-container.js

@@ -0,0 +1,40 @@
+/* indicators-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.IndicatorsContainer = void 0;
+require("./indicators-container.compiled.css");
+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 _getStyleProps2 = require("../../get-style-props");
+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); }
+// ==============================
+// Indicator Container
+// ==============================
+
+var indicatorContainerStyles = null;
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var IndicatorsContainer = exports.IndicatorsContainer = function IndicatorsContainer(props) {
+  var children = props.children,
+    innerProps = props.innerProps,
+    xcss = props.xcss;
+  var _getStyleProps = (0, _getStyleProps2.getStyleProps)(props, 'indicatorsContainer', {
+      indicators: true
+    }),
+    css = _getStyleProps.css,
+    className = _getStyleProps.className;
+  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: css
+    // 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)(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", (0, _react2.cx)(className, xcss, '-IndicatorsContainer')])
+  }, innerProps), children);
+};

package/dist/cjs/compiled/components/select-container.compiled.css

@@ -0,0 +1,6 @@
+._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1eim1xrj{direction:rtl}
+._80om13gf{cursor:not-allowed}
+._kqswh2mm{position:relative}
+._lcxv1rj4{pointer-events:all}
+@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}

package/dist/cjs/compiled/components/select-container.js

@@ -0,0 +1,52 @@
+/* select-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectContainer = void 0;
+require("./select-container.compiled.css");
+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 _getStyleProps2 = require("../../get-style-props");
+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); }
+// ==============================
+// Root Container
+// ==============================
+
+// 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: "_11c81d4k _kqswh2mm _lcxv1rj4 _1tn2fhey",
+  rtl: "_1eim1xrj",
+  disabled: "_80om13gf"
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var SelectContainer = exports.SelectContainer = function SelectContainer(props) {
+  var children = props.children,
+    innerProps = props.innerProps,
+    isDisabled = props.isDisabled,
+    isRtl = props.isRtl,
+    xcss = props.xcss;
+  var _getStyleProps = (0, _getStyleProps2.getStyleProps)(props, 'container', {
+      '--is-disabled': isDisabled,
+      '--is-rtl': isRtl
+    }),
+    className = _getStyleProps.className,
+    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, _react2.cx)(className, xcss, '-container')])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: css
+  }, innerProps), children);
+};

package/dist/cjs/compiled/components/value-container.compiled.css

@@ -0,0 +1,20 @@
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1e0c11p5{display:grid}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._8am5i4x0{-webkit-overflow-scrolling:touch}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}

package/dist/cjs/compiled/components/{containers.js → value-container.js}

@@ -1,4 +1,4 @@
-/* containers.tsx generated by @compiled/babel-plugin v0.39.1 */
+/* value-container.tsx generated by @compiled/babel-plugin v0.39.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,52 +6,15 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ValueContainer = exports.SelectContainer = exports.IndicatorsContainer = void 0;
-require("./containers.compiled.css");
+exports.ValueContainer = void 0;
+require("./value-container.compiled.css");
 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 _getStyleProps4 = require("../../get-style-props");
+var _getStyleProps2 = require("../../get-style-props");
 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); }
-// ==============================
-// Root Container
-// ==============================
-
-// 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: "_11c81d4k _kqswh2mm _lcxv1rj4 _1tn2fhey",
-  rtl: "_1eim1xrj",
-  disabled: "_80om13gf"
-};
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-var SelectContainer = exports.SelectContainer = function SelectContainer(props) {
-  var children = props.children,
-    innerProps = props.innerProps,
-    isDisabled = props.isDisabled,
-    isRtl = props.isRtl,
-    xcss = props.xcss;
-  var _getStyleProps = (0, _getStyleProps4.getStyleProps)(props, 'container', {
-      '--is-disabled': isDisabled,
-      '--is-rtl': isRtl
-    }),
-    className = _getStyleProps.className,
-    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, _react2.cx)(className, xcss, '-container')])
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    ,
-    style: css
-  }, innerProps), children);
-};
-
 // ==============================
 // Value Container
 // ==============================
@@ -75,13 +38,13 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
     isCompact = props.isCompact,
     xcss = props.xcss,
     controlShouldRenderValue = props.selectProps.controlShouldRenderValue;
-  var _getStyleProps2 = (0, _getStyleProps4.getStyleProps)(props, 'valueContainer', {
+  var _getStyleProps = (0, _getStyleProps2.getStyleProps)(props, 'valueContainer', {
       'value-container': true,
       'value-container--is-multi': isMulti,
       'value-container--has-value': hasValue
     }),
-    css = _getStyleProps2.css,
-    className = _getStyleProps2.className;
+    css = _getStyleProps.css,
+    className = _getStyleProps.className;
   var ffTagUplifts = (0, _platformFeatureFlags.fg)('platform-dst-lozenge-tag-badge-visual-uplifts');
   var tagUpliftMultiVertical = ffTagUplifts && isMulti;
   var tagUpliftChipRow = ffTagUplifts && isMulti && hasValue && controlShouldRenderValue;
@@ -92,29 +55,4 @@ var ValueContainer = exports.ValueContainer = function ValueContainer(props) {
     ,
     style: css
   }, innerProps), children);
-};
-
-// ==============================
-// Indicator Container
-// ==============================
-
-var indicatorContainerStyles = null;
-
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-var IndicatorsContainer = exports.IndicatorsContainer = function IndicatorsContainer(props) {
-  var children = props.children,
-    innerProps = props.innerProps,
-    xcss = props.xcss;
-  var _getStyleProps3 = (0, _getStyleProps4.getStyleProps)(props, 'indicatorsContainer', {
-      indicators: true
-    }),
-    css = _getStyleProps3.css,
-    className = _getStyleProps3.className;
-  return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
-    style: css
-    // 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)(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", (0, _react2.cx)(className, xcss, '-IndicatorsContainer')])
-  }, innerProps), children);
 };

package/dist/cjs/components/index.js

@@ -56,6 +56,7 @@ var components = exports.components = {
   SingleValue: _singleValue.default,
   ValueContainer: _valueContainer.ValueContainer
 };
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 var defaultComponents = exports.defaultComponents = function defaultComponents(props) {
   return _objectSpread(_objectSpread({}, components), props.components);
 };

package/dist/cjs/components/multi-value.js

@@ -16,6 +16,7 @@ var _react2 = require("@compiled/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _tag = _interopRequireDefault(require("@atlaskit/tag"));
 var _getStyleProps4 = require("../get-style-props");
+var _useSelectGetStyles = require("../internal/use-select-get-styles");
 var _multiValueLabel = require("./multi-value-label");
 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); }
 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; }
@@ -91,8 +92,18 @@ var MultiValue = function MultiValue(props) {
     removeCss = _getStyleProps3.css,
     removeClassName = _getStyleProps3.className;
   var hasCustomLabel = Label !== _multiValueLabel.MultiValueLabel;
-  // Plain labels: use Tag with fillContainer so it truncates like tag-like structure.
-  if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
+  var selectStyles = selectProps.styles;
+  var hasCustomMultiValueStyles = Boolean((selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValue) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueLabel) || (selectStyles === null || selectStyles === void 0 ? void 0 : selectStyles.multiValueRemove));
+  var selectClassNames = selectProps.classNames;
+  var hasCustomMultiValueClassNames = Boolean((selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValue) || (selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValueLabel) || (selectClassNames === null || selectClassNames === void 0 ? void 0 : selectClassNames.multiValueRemove));
+  // Detect if getStyles was overridden directly on this component instance (e.g. via the
+  // components prop wrapper passing a custom getStyles). The context holds the original
+  // Select instance's getStyles — a reference inequality means a custom override was passed.
+  // When context is absent (e.g. in mocked/test contexts), assume no override.
+  var selectGetStyles = (0, _useSelectGetStyles.useSelectGetStyles)();
+  var hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
+  var hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
     var _ref = data !== null && data !== void 0 ? data : {},
       elemBefore = _ref.elemBefore,
       tagColor = _ref.color;

package/dist/cjs/creatable.js

@@ -6,12 +6,6 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-Object.defineProperty(exports, "useCreatable", {
-  enumerable: true,
-  get: function get() {
-    return _useCreatable.default;
-  }
-});
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 var _react = _interopRequireWildcard(require("react"));
 var _select = _interopRequireDefault(require("./select"));
@@ -25,5 +19,6 @@ var CreatableSelect = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref)
     ref: ref
   }, selectProps));
 });
+
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var _default = exports.default = CreatableSelect;

package/dist/cjs/entry-points/async.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,8 +13,8 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "useAsync", {
   enumerable: true,
   get: function get() {
-    return _async.useAsync;
+    return _useAsync.default;
   }
 });
-var _async = _interopRequireWildcard(require("../async"));
-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); }
+var _useAsync = _interopRequireDefault(require("../use-async"));
+var _async = _interopRequireDefault(require("../async"));

package/dist/cjs/entry-points/creatable.js

@@ -1,6 +1,6 @@
 "use strict";
 
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -13,8 +13,8 @@ Object.defineProperty(exports, "default", {
 Object.defineProperty(exports, "useCreatable", {
   enumerable: true,
   get: function get() {
-    return _creatable.useCreatable;
+    return _useCreatable.default;
   }
 });
-var _creatable = _interopRequireWildcard(require("../creatable"));
-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); }
+var _useCreatable = _interopRequireDefault(require("../use-creatable"));
+var _creatable = _interopRequireDefault(require("../creatable"));

package/dist/cjs/internal/select-get-styles-context.js

@@ -0,0 +1,20 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SelectGetStylesContext = void 0;
+var _react = require("react");
+/**
+ * Internal context used to pass the original Select instance's getStyles function
+ * down to components like MultiValue, without polluting the public CommonProps API.
+ *
+ * This allows MultiValue to detect whether getStyles has been overridden on a
+ * component instance (e.g. via a custom component wrapper passing a different
+ * getStyles prop), by comparing props.getStyles against the original.
+ *
+ * @internal — not part of the public API
+ */
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var SelectGetStylesContext = exports.SelectGetStylesContext = /*#__PURE__*/(0, _react.createContext)(undefined);

package/dist/cjs/internal/use-select-get-styles.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useSelectGetStyles = void 0;
+var _react = require("react");
+var _selectGetStylesContext = require("./select-get-styles-context");
+/**
+ * Hook to consume the SelectGetStylesContext.
+ *
+ * @internal — not part of the public API
+ */
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+var useSelectGetStyles = exports.useSelectGetStyles = function useSelectGetStyles() {
+  return (0, _react.useContext)(_selectGetStylesContext.SelectGetStylesContext);
+};

package/dist/cjs/select.js

@@ -38,6 +38,7 @@ var _notifyOpenLayerObserver = require("./internal/notify-open-layer-observer");
 var _requiredInput = _interopRequireDefault(require("./internal/required-input"));
 var _scrollManager = _interopRequireDefault(require("./internal/scroll-manager"));
 var _scrollTo = require("./internal/scroll-to");
+var _selectGetStylesContext = require("./internal/select-get-styles-context");
 var _singleValueAsValue = require("./internal/single-value-as-value");
 var _valueTernary = require("./internal/value-ternary");
 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" != _typeof3(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); }
@@ -312,7 +313,7 @@ var shouldHideSelectedOptions = function shouldHideSelectedOptions(props) {
 };
 var instanceId = 1;
 
-// eslint-disable-next-line @repo/internal/react/no-class-components
+// eslint-disable-next-line @repo/internal/react/no-class-components, @atlaskit/volt-strict-mode/no-multiple-exports
 var Select = exports.default = /*#__PURE__*/function (_Component) {
   // Lifecycle
   // ------------------------------
@@ -1966,7 +1967,9 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
       var isCompact = spacing === 'compact';
-      return /*#__PURE__*/_react.default.createElement(SelectContainer, (0, _extends2.default)({}, commonProps, {
+      return /*#__PURE__*/_react.default.createElement(_selectGetStylesContext.SelectGetStylesContext.Provider, {
+        value: this.getStyles
+      }, /*#__PURE__*/_react.default.createElement(SelectContainer, (0, _extends2.default)({}, commonProps, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
         className: className,
         innerProps: _objectSpread({
@@ -2010,7 +2013,7 @@ var Select = exports.default = /*#__PURE__*/function (_Component) {
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/_react.default.createElement(_notifyOpenLayerObserver.NotifyOpenLayerObserver, {
         isOpen: this.props.menuIsOpen,
         onClose: this.handleOpenLayerObserverCloseSignal
-      }));
+      })));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/cjs/theme.js

@@ -9,9 +9,8 @@ Object.defineProperty(exports, "colors", {
     return _colors.colors;
   }
 });
-exports.spacing = exports.defaultTheme = void 0;
+exports.spacing = void 0;
 var _colors = require("./colors");
-var borderRadius = 4;
 // Used to calculate consistent margin/padding on elements
 var baseUnit = 4;
 // The minimum height of the control
@@ -22,9 +21,4 @@ var spacing = exports.spacing = {
   baseUnit: baseUnit,
   controlHeight: controlHeight,
   menuGutter: menuGutter
-};
-var defaultTheme = exports.defaultTheme = {
-  borderRadius: borderRadius,
-  colors: _colors.colors,
-  spacing: spacing
 };

package/dist/es2019/async.js

@@ -14,7 +14,6 @@ const AsyncSelect = /*#__PURE__*/forwardRef((props, ref) => {
     ref: ref
   }, selectProps));
 });
-export { useAsync };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export default AsyncSelect;

package/dist/es2019/compiled/components/indicators-container.compiled.css

@@ -0,0 +1,5 @@
+._1e0c1txw{display:flex}
+._1o9zidpf{flex-shrink:0}
+._1wpz1fhb{align-self:stretch}
+._4cvr1h6o{align-items:center}
+._y4ti1b66{padding-inline-end:var(--ds-space-050,4px)}

package/dist/es2019/compiled/components/indicators-container.js

@@ -0,0 +1,35 @@
+/* indicators-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./indicators-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+import { getStyleProps } from '../../get-style-props';
+
+// ==============================
+// Indicator Container
+// ==============================
+
+const indicatorContainerStyles = null;
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const IndicatorsContainer = props => {
+  const {
+    children,
+    innerProps,
+    xcss
+  } = props;
+  const {
+    css,
+    className
+  } = getStyleProps(props, 'indicatorsContainer', {
+    indicators: true
+  });
+  return /*#__PURE__*/React.createElement("div", _extends({
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    style: css
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop, @atlaskit/ui-styling-standard/local-cx-xcss, @compiled/local-cx-xcss
+    ,
+    className: ax(["_1e0c1txw _4cvr1h6o _1o9zidpf _1wpz1fhb _y4ti1b66", cx(className, xcss, '-IndicatorsContainer')])
+  }, innerProps), children);
+};

package/dist/es2019/compiled/components/select-container.compiled.css

@@ -0,0 +1,6 @@
+._11c81d4k{font:var(--ds-font-body-large,normal 400 1pc/24px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._1eim1xrj{direction:rtl}
+._80om13gf{cursor:not-allowed}
+._kqswh2mm{position:relative}
+._lcxv1rj4{pointer-events:all}
+@media (min-width:30rem){._1tn2fhey{font:var(--ds-font-body,normal 400 14px/20px "Atlassian Sans",ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}}

package/dist/es2019/compiled/components/select-container.js

@@ -0,0 +1,47 @@
+/* select-container.tsx generated by @compiled/babel-plugin v0.39.1 */
+import _extends from "@babel/runtime/helpers/extends";
+import "./select-container.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+import { cx } from '@compiled/react';
+import { getStyleProps } from '../../get-style-props';
+
+// ==============================
+// Root Container
+// ==============================
+
+// 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: "_11c81d4k _kqswh2mm _lcxv1rj4 _1tn2fhey",
+  rtl: "_1eim1xrj",
+  disabled: "_80om13gf"
+};
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const SelectContainer = props => {
+  const {
+    children,
+    innerProps,
+    isDisabled,
+    isRtl,
+    xcss
+  } = props;
+  const {
+    className,
+    css
+  } = getStyleProps(props, 'container', {
+    '--is-disabled': isDisabled,
+    '--is-rtl': isRtl
+  });
+  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, cx(className, xcss, '-container')])
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop
+    ,
+    style: css
+  }, innerProps), children);
+};

package/dist/es2019/compiled/components/value-container.compiled.css

@@ -0,0 +1,20 @@
+
+._zulp1b66{gap:var(--ds-space-050,4px)}._16jlkb7n{flex-grow:1}
+._18m915vq{overflow-y:hidden}
+._1e0c11p5{display:grid}
+._1e0c1txw{display:flex}
+._1n261g80{flex-wrap:wrap}
+._1o9zkb7n{flex-shrink:1}
+._1q511b66{padding-block-start:var(--ds-space-050,4px)}
+._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
+._1q51ze3t{padding-block-start:var(--ds-space-0,0)}
+._1reo15vq{overflow-x:hidden}
+._4cvr1h6o{align-items:center}
+._85i51b66{padding-block-end:var(--ds-space-050,4px)}
+._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
+._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._8am5i4x0{-webkit-overflow-scrolling:touch}
+._bozg12x7{padding-inline-start:var(--ds-space-075,6px)}
+._i0dlf1ug{flex-basis:0%}
+._kqswh2mm{position:relative}
+._y4ti12x7{padding-inline-end:var(--ds-space-075,6px)}