@atlaskit/react-select 4.0.0 → 4.0.1

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 4.0.1
+
+### Patch Changes
+
+- [`0f8f79a02f3d5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0f8f79a02f3d5) -
+  Fix `MultiValueContainer` component override being silently ignored when the
+  `platform-dst-lozenge-tag-badge-visual-uplifts` feature gate is enabled.
+
+  When the gate is on, `MultiValue` previously bypassed the `Container` (i.e. `MultiValueContainer`)
+  component entirely and rendered a `<Tag>` or tag-like `<div>` directly, causing consumers who use
+  `MultiValueContainer: () => null` to suppress selected tag display to see broken dropdown
+  positioning.
+
+  The fix detects when `Container` has been overridden and falls back to the default
+  `Container`-based render path, restoring the expected suppression behaviour.
+
 ## 4.0.0
 
 ### Major Changes

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

@@ -17,6 +17,7 @@ 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 _multiValueContainer = require("./containers/multi-value-container");
 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; }
@@ -92,6 +93,7 @@ var MultiValue = function MultiValue(props) {
     removeCss = _getStyleProps3.css,
     removeClassName = _getStyleProps3.className;
   var hasCustomLabel = Label !== _multiValueLabel.MultiValueLabel;
+  var hasCustomContainer = Container !== _multiValueContainer.MultiValueContainer;
   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;
@@ -103,7 +105,7 @@ var MultiValue = function MultiValue(props) {
   var selectGetStyles = (0, _useSelectGetStyles.useSelectGetStyles)();
   var hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
   var hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
-  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainer && !hasCustomContainerStyles) {
     var _ref = data !== null && data !== void 0 ? data : {},
       elemBefore = _ref.elemBefore,
       tagColor = _ref.color;
@@ -126,7 +128,7 @@ var MultiValue = function MultiValue(props) {
   }
 
   // FF on + custom content → tag-like path
-  if (ffTagUplifts) {
+  if (ffTagUplifts && !hasCustomContainer) {
     var colorKey = data === null || data === void 0 ? void 0 : data.color;
     return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
       "data-multi-value-tag-like": "true"

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

@@ -8,6 +8,7 @@ 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 { MultiValueContainer as DefaultMultiValueContainer } from './containers/multi-value-container';
 import { MultiValueLabel } from './multi-value-label';
 const multiValueTagWrapperStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
@@ -87,6 +88,7 @@ const MultiValue = props => {
     'multi-value__remove': true
   });
   const hasCustomLabel = Label !== MultiValueLabel;
+  const hasCustomContainer = Container !== DefaultMultiValueContainer;
   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;
@@ -98,7 +100,7 @@ const MultiValue = props => {
   const selectGetStyles = useSelectGetStyles();
   const hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
   const hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
-  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainer && !hasCustomContainerStyles) {
     const {
       elemBefore,
       color: tagColor
@@ -122,7 +124,7 @@ const MultiValue = props => {
   }
 
   // FF on + custom content → tag-like path
-  if (ffTagUplifts) {
+  if (ffTagUplifts && !hasCustomContainer) {
     const colorKey = data === null || data === void 0 ? void 0 : data.color;
     return /*#__PURE__*/React.createElement("div", _extends({
       "data-multi-value-tag-like": "true"

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

@@ -11,6 +11,7 @@ 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 { MultiValueContainer as DefaultMultiValueContainer } from './containers/multi-value-container';
 import { MultiValueLabel } from './multi-value-label';
 var multiValueTagWrapperStyles = {
   root: "_16jlidpf _1o9zkb7n _i0dl1wug _1mouze3t _195gze3t _4cvr1h6o _1e0c1txw _1ul9ze3t _zdxokb7n _v5ynkb7n _13lsf1ug _3pxh1h6o _d0dz1txw _1ouwze3t"
@@ -83,6 +84,7 @@ var MultiValue = function MultiValue(props) {
     removeCss = _getStyleProps3.css,
     removeClassName = _getStyleProps3.className;
   var hasCustomLabel = Label !== MultiValueLabel;
+  var hasCustomContainer = Container !== DefaultMultiValueContainer;
   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;
@@ -94,7 +96,7 @@ var MultiValue = function MultiValue(props) {
   var selectGetStyles = useSelectGetStyles();
   var hasOverriddenGetStyles = selectGetStyles !== undefined && props.getStyles !== selectGetStyles;
   var hasCustomContainerStyles = hasCustomMultiValueStyles || hasCustomMultiValueClassNames || hasOverriddenGetStyles;
-  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainerStyles) {
+  if (ffTagUplifts && isPlainLabel && !hasCustomLabel && !hasCustomContainer && !hasCustomContainerStyles) {
     var _ref = data !== null && data !== void 0 ? data : {},
       elemBefore = _ref.elemBefore,
       tagColor = _ref.color;
@@ -117,7 +119,7 @@ var MultiValue = function MultiValue(props) {
   }
 
   // FF on + custom content → tag-like path
-  if (ffTagUplifts) {
+  if (ffTagUplifts && !hasCustomContainer) {
     var colorKey = data === null || data === void 0 ? void 0 : data.color;
     return /*#__PURE__*/React.createElement("div", _extends({
       "data-multi-value-tag-like": "true"

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/react-select",
-	"version": "4.0.0",
+	"version": "4.0.1",
 	"description": "A forked version of react-select to only be used in atlaskit/select",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",