@atlaskit/react-select 3.16.1 → 4.0.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/react-select
 
+## 4.0.0
+
+### Major Changes
+
+- [`f2dc9097319f0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f2dc9097319f0) - ###
+  Dropped support for _legacy_ Typescript 4 types. **Typescript 5 is now the new minimum**.
+
+  Removes the `typesVersions` property and `dist/types-ts4.5` directory from the dist.
+
+  Types are now exclusively via the `"types": "dist/types/index.d.ts"` property.
+
+  ```diff
+  - "typesVersions": {
+  -    ">=4.5 <4.9": {
+  -        "*": [
+  -            "dist/types-ts4.5/*",
+  -            "dist/types-ts4.5/index.d.ts"
+  -        ]
+  -    }
+  - },
+  ```
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/accessibility/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/accessibility.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/accessibility.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/accessibility.d.ts"
 }

package/async/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/async.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/async.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/async.d.ts"
 }

package/async-creatable/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/async-creatable.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/async-creatable.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/async-creatable.d.ts"
 }

package/base/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/base.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/base.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/base.d.ts"
 }

package/clear-indicator/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/clear-indicator.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/clear-indicator.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/clear-indicator.d.ts"
 }

package/components/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/components.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/components.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/components.d.ts"
 }

package/control/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/control.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/control.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/control.d.ts"
 }

package/creatable/package.json

@@ -6,12 +6,5 @@
   "sideEffects": [
     "**/*.compiled.css"
   ],
-  "types": "../dist/types/entry-points/creatable.d.ts",
-  "typesVersions": {
-    ">=4.5 <5.9": {
-      "*": [
-        "../dist/types-ts4.5/entry-points/creatable.d.ts"
-      ]
-    }
-  }
+  "types": "../dist/types/entry-points/creatable.d.ts"
 }

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

@@ -4,10 +4,10 @@
 ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
+._1h6d187o{border-color:var(--ds-background-disabled,#0515240f)}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
-._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
 ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}._123byq51:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}
 ._12ji1r31{outline-color:currentColor}
 ._12y3idpf{outline-width:0}
@@ -25,9 +25,9 @@
 ._4cvr1h6o{align-items:center}
 ._80om73ad{cursor:default}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
@@ -35,8 +35,8 @@
 ._kqswh2mm{position:relative}
 ._lcxvglyw{pointer-events:none}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1u6l1s3b:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-background-disabled,#17171708)}
 ._1u6l3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._1u6lfrlt:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-background-disabled,#0515240f)}
 ._1u6lizbr:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
 ._1u6luvb6:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-input,#8c8f97)}
 ._1u6lvyy1:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}

package/dist/cjs/components/control.js

@@ -22,7 +22,7 @@ var styles = {
   compact: "_1tkezwfg",
   invalid: "_1h6d1bqt _16qsizbr _1u6lizbr _4cvx1bqt",
   focusedInvalid: "_16qsvyy1",
-  disabled: "_1h6dby5v _lcxvglyw _bfhkby5v _1u6l1s3b",
+  disabled: "_1h6d187o _lcxvglyw _bfhk187o _1u6lfrlt",
   focused: "_1h6d1v1w _bfhkr01l _16qsvyy1 _1u6lvyy1 _4cvx1v1w _irr3r01l",
   subtle: "_1h6d1j28 _bfhk1j28 _1u6l3sij",
   subtleFocused: "_bfhkvuon",

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/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/es2019/components/control.compiled.css

@@ -4,10 +4,10 @@
 ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
+._1h6d187o{border-color:var(--ds-background-disabled,#0515240f)}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
-._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
 ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}._123byq51:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}
 ._12ji1r31{outline-color:currentColor}
 ._12y3idpf{outline-width:0}
@@ -25,9 +25,9 @@
 ._4cvr1h6o{align-items:center}
 ._80om73ad{cursor:default}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
@@ -35,8 +35,8 @@
 ._kqswh2mm{position:relative}
 ._lcxvglyw{pointer-events:none}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1u6l1s3b:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-background-disabled,#17171708)}
 ._1u6l3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._1u6lfrlt:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-background-disabled,#0515240f)}
 ._1u6lizbr:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
 ._1u6luvb6:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-input,#8c8f97)}
 ._1u6lvyy1:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}

package/dist/es2019/components/control.js

@@ -14,7 +14,7 @@ const styles = {
   compact: "_1tkezwfg",
   invalid: "_1h6d1bqt _16qsizbr _1u6lizbr _4cvx1bqt",
   focusedInvalid: "_16qsvyy1",
-  disabled: "_1h6dby5v _lcxvglyw _bfhkby5v _1u6l1s3b",
+  disabled: "_1h6d187o _lcxvglyw _bfhk187o _1u6lfrlt",
   focused: "_1h6d1v1w _bfhkr01l _16qsvyy1 _1u6lvyy1 _4cvx1v1w _irr3r01l",
   subtle: "_1h6d1j28 _bfhk1j28 _1u6l3sij",
   subtleFocused: "_bfhkvuon",

package/dist/es2019/components/index.js

@@ -47,6 +47,7 @@ export const components = {
   SingleValue: SingleValue,
   ValueContainer: ValueContainer
 };
+// eslint-disable-next-line @atlaskit/volt-strict-mode/no-multiple-exports
 export const defaultComponents = props => ({
   ...components,
   ...props.components

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

@@ -7,6 +7,7 @@ import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
 import { getStyleProps } from '../get-style-props';
+import { useSelectGetStyles } from '../internal/use-select-get-styles';
 import { MultiValueLabel } from './multi-value-label';
 const multiValueTagWrapperStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
@@ -86,8 +87,18 @@ const MultiValue = props => {
     'multi-value__remove': true
   });
   const hasCustomLabel = Label !== MultiValueLabel;
-  // Plain labels: use Tag with fillContainer so it truncates like tag-like structure.
-  if (ffTagUplifts && isPlainLabel && !hasCustomLabel) {
+  const selectStyles = selectProps.styles;
+  const 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));
+  const selectClassNames = selectProps.classNames;
+  const 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.
+  const selectGetStyles = useSelectGetStyles();
+  const hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
+  const hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
     const {
       elemBefore,
       color: tagColor

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

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+import { createContext } from 'react';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const SelectGetStylesContext = /*#__PURE__*/createContext(undefined);

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

@@ -0,0 +1,10 @@
+/**
+ * Hook to consume the SelectGetStylesContext.
+ *
+ * @internal — not part of the public API
+ */
+import { useContext } from 'react';
+import { SelectGetStylesContext } from './select-get-styles-context';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export const useSelectGetStyles = () => useContext(SelectGetStylesContext);

package/dist/es2019/select.js

@@ -22,6 +22,7 @@ import { NotifyOpenLayerObserver } from './internal/notify-open-layer-observer';
 import RequiredInput from './internal/required-input';
 import ScrollManager from './internal/scroll-manager';
 import { scrollTo } from './internal/scroll-to';
+import { SelectGetStylesContext } from './internal/select-get-styles-context';
 import { singleValueAsValue } from './internal/single-value-as-value';
 import { valueTernary } from './internal/value-ternary';
 const noop = __noop;
@@ -281,7 +282,7 @@ const shouldHideSelectedOptions = props => {
 };
 let 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
 export default class Select extends Component {
   // Lifecycle
   // ------------------------------
@@ -1989,7 +1990,9 @@ export default class Select extends Component {
     } = this.state;
     const commonProps = this.commonProps = this.getCommonProps();
     const isCompact = spacing === 'compact';
-    return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
+    return /*#__PURE__*/React.createElement(SelectGetStylesContext.Provider, {
+      value: this.getStyles
+    }, /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
       className: className,
       innerProps: {
@@ -2040,7 +2043,7 @@ export default class Select extends Component {
     }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
       isOpen: this.props.menuIsOpen,
       onClose: this.handleOpenLayerObserverCloseSignal
-    }));
+    })));
   }
 }
 _defineProperty(Select, "defaultProps", defaultProps);

package/dist/esm/components/control.compiled.css

@@ -4,10 +4,10 @@
 ._v564r5cv{transition:background-color .2s ease-in-out,border-color .2s ease-in-out}
 ._189ee4h9{border-width:var(--ds-border-width,1px)}
 ._1dqonqa1{border-style:solid}
+._1h6d187o{border-color:var(--ds-background-disabled,#0515240f)}
 ._1h6d1bqt{border-color:var(--ds-border-danger,#e2483d)}
 ._1h6d1j28{border-color:transparent}
 ._1h6d1v1w{border-color:var(--ds-border-focused,#4688ec)}
-._1h6dby5v{border-color:var(--ds-background-disabled,#17171708)}
 ._1h6drsbi{border-color:var(--ds-border-input,#8c8f97)}._123byq51:hover::-webkit-scrollbar-thumb{background-color:rgba(0,0,0,.2)}
 ._12ji1r31{outline-color:currentColor}
 ._12y3idpf{outline-width:0}
@@ -25,9 +25,9 @@
 ._4cvr1h6o{align-items:center}
 ._80om73ad{cursor:default}
 ._85i5ze3t{padding-block-end:var(--ds-space-0,0)}
+._bfhk187o{background-color:var(--ds-background-disabled,#0515240f)}
 ._bfhk1j28{background-color:transparent}
 ._bfhk1j9a{background-color:var(--ds-background-input,#fff)}
-._bfhkby5v{background-color:var(--ds-background-disabled,#17171708)}
 ._bfhkr01l{background-color:var(--ds-background-input-pressed,#fff)}
 ._bfhkvuon{background-color:var(--ds-surface,#fff)}
 ._bozgze3t{padding-inline-start:var(--ds-space-0,0)}
@@ -35,8 +35,8 @@
 ._kqswh2mm{position:relative}
 ._lcxvglyw{pointer-events:none}
 ._y4tize3t{padding-inline-end:var(--ds-space-0,0)}
-._1u6l1s3b:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-background-disabled,#17171708)}
 ._1u6l3sij:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) transparent}
+._1u6lfrlt:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-background-disabled,#0515240f)}
 ._1u6lizbr:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-danger,#e2483d)}
 ._1u6luvb6:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-input,#8c8f97)}
 ._1u6lvyy1:focus-within{box-shadow:inset 0 0 0 var(--ds-border-width,1px) var(--ds-border-focused,#4688ec)}

package/dist/esm/components/control.js

@@ -14,7 +14,7 @@ var styles = {
   compact: "_1tkezwfg",
   invalid: "_1h6d1bqt _16qsizbr _1u6lizbr _4cvx1bqt",
   focusedInvalid: "_16qsvyy1",
-  disabled: "_1h6dby5v _lcxvglyw _bfhkby5v _1u6l1s3b",
+  disabled: "_1h6d187o _lcxvglyw _bfhk187o _1u6lfrlt",
   focused: "_1h6d1v1w _bfhkr01l _16qsvyy1 _1u6lvyy1 _4cvx1v1w _irr3r01l",
   subtle: "_1h6d1j28 _bfhk1j28 _1u6l3sij",
   subtleFocused: "_bfhkvuon",

package/dist/esm/components/index.js

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

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

@@ -10,6 +10,7 @@ import { cx } from '@compiled/react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Tag from '@atlaskit/tag';
 import { getStyleProps } from '../get-style-props';
+import { useSelectGetStyles } from '../internal/use-select-get-styles';
 import { MultiValueLabel } from './multi-value-label';
 var multiValueTagWrapperStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
@@ -82,8 +83,18 @@ var MultiValue = function MultiValue(props) {
     removeCss = _getStyleProps3.css,
     removeClassName = _getStyleProps3.className;
   var hasCustomLabel = Label !== 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 = 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/esm/internal/select-get-styles-context.js

@@ -0,0 +1,14 @@
+/**
+ * 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
+ */
+import { createContext } from 'react';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var SelectGetStylesContext = /*#__PURE__*/createContext(undefined);

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

@@ -0,0 +1,12 @@
+/**
+ * Hook to consume the SelectGetStylesContext.
+ *
+ * @internal — not part of the public API
+ */
+import { useContext } from 'react';
+import { SelectGetStylesContext } from './select-get-styles-context';
+
+// eslint-disable-next-line @repo/internal/react/require-jsdoc
+export var useSelectGetStyles = function useSelectGetStyles() {
+  return useContext(SelectGetStylesContext);
+};

package/dist/esm/select.js

@@ -34,6 +34,7 @@ import { NotifyOpenLayerObserver } from './internal/notify-open-layer-observer';
 import RequiredInput from './internal/required-input';
 import ScrollManager from './internal/scroll-manager';
 import { scrollTo } from './internal/scroll-to';
+import { SelectGetStylesContext } from './internal/select-get-styles-context';
 import { singleValueAsValue } from './internal/single-value-as-value';
 import { valueTernary } from './internal/value-ternary';
 var noop = __noop;
@@ -303,7 +304,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 = /*#__PURE__*/function (_Component) {
   // Lifecycle
   // ------------------------------
@@ -1957,7 +1958,9 @@ var Select = /*#__PURE__*/function (_Component) {
       var isFocused = this.state.isFocused;
       var commonProps = this.commonProps = this.getCommonProps();
       var isCompact = spacing === 'compact';
-      return /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
+      return /*#__PURE__*/React.createElement(SelectGetStylesContext.Provider, {
+        value: this.getStyles
+      }, /*#__PURE__*/React.createElement(SelectContainer, _extends({}, commonProps, {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop
         className: className,
         innerProps: _objectSpread({
@@ -2001,7 +2004,7 @@ var Select = /*#__PURE__*/function (_Component) {
       }), this.renderClearIndicator(), this.renderLoadingIndicator(), this.renderDropdownIndicator())), this.renderMenu(), this.renderFormField(), /*#__PURE__*/React.createElement(NotifyOpenLayerObserver, {
         isOpen: this.props.menuIsOpen,
         onClose: this.handleOpenLayerObserverCloseSignal
-      }));
+      })));
     }
   }], [{
     key: "getDerivedStateFromProps",

package/dist/types/internal/select-get-styles-context.d.ts

@@ -0,0 +1,12 @@
+/**
+ * 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
+ */
+import { type Context } from 'react';
+export declare const SelectGetStylesContext: Context<Function | undefined>;

package/dist/types/internal/use-select-get-styles.d.ts

@@ -0,0 +1 @@
+export declare const useSelectGetStyles: () => Function | undefined;