@atlaskit/react-select 1.4.0 → 1.4.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/react-select
 
+## 1.4.2
+
+### Patch Changes
+
+- [#172260](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/172260)
+  [`9934fe89f1e6a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/9934fe89f1e6a) -
+  Improving assisstive technology support by adding better semantics and reducing live region usage
+
+## 1.4.1
+
+### Patch Changes
+
+- [#167336](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167336)
+  [`ddb0846c39a88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ddb0846c39a88) -
+  Integrate styles of select and react-select in a single place
+
 ## 1.4.0
 
 ### Minor Changes

package/dist/cjs/accessibility/index.js

@@ -5,6 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.defaultAriaLiveMessages = void 0;
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
+
 var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
   guidance: function guidance(props) {
     var isSearchable = props.isSearchable,
@@ -33,11 +35,12 @@ var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
       case 'deselect-option':
       case 'pop-value':
       case 'remove-value':
-        return "option ".concat(label, ", deselected.");
+        return label.length && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "option ".concat(label, ", deselected") : '';
+      // TODO: this should be handled on backspace|delete if no value, but doing it here first
       case 'clear':
         return 'All selected options have been cleared.';
       case 'initial-input-focus':
-        return "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.");
+        return label.length && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') || !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? "option".concat(labels.length > 1 ? 's' : '', " ").concat(labels.join(','), ", selected.") : '';
       case 'select-option':
         return isDisabled ? "option ".concat(label, " is disabled. Select another option.") : "option ".concat(label, ", selected.");
       default:
@@ -51,7 +54,6 @@ var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
       _props$label2 = props.label,
       label = _props$label2 === void 0 ? '' : _props$label2,
       selectValue = props.selectValue,
-      isMulti = props.isMulti,
       isDisabled = props.isDisabled,
       isSelected = props.isSelected;
     var getArrayIndex = function getArrayIndex(arr, item) {
@@ -60,11 +62,11 @@ var defaultAriaLiveMessages = exports.defaultAriaLiveMessages = {
     if (context === 'value' && selectValue) {
       return "value ".concat(label, " focused, ").concat(getArrayIndex(selectValue, focused), ".");
     }
-    if (context === 'menu') {
+
+    // No longer needed after fg('design_system_select-a11y-improvement') is cleaned up
+    if (context === 'menu' && !(0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement')) {
       var disabled = isDisabled ? ' disabled' : '';
-      // don't announce not selected for single selection
-      var notSelectedStatus = !isMulti && (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? '' : ' not selected';
-      var status = "".concat(isSelected ? ' selected' : notSelectedStatus).concat(disabled);
+      var status = "".concat(isSelected ? ' selected' : ' not selected').concat(disabled);
       return "".concat(label).concat(status, ", ").concat(getArrayIndex(options, focused), ", completion selected");
     }
     return '';

package/dist/cjs/components/containers.js

@@ -23,9 +23,10 @@ var containerCSS = exports.containerCSS = function containerCSS(_ref) {
   return {
     label: 'container',
     direction: isRtl ? 'rtl' : undefined,
-    pointerEvents: isDisabled ? 'none' : undefined,
-    // cancel mouse events when disabled
-    position: 'relative'
+    position: 'relative',
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    pointerEvents: 'all',
+    cursor: isDisabled ? 'not-allowed' : undefined
   };
 };
 
@@ -46,9 +47,9 @@ var SelectContainer = exports.SelectContainer = function SelectContainer(props)
 // ==============================
 
 var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(_ref2) {
-  var spacing = _ref2.theme.spacing,
-    isMulti = _ref2.isMulti,
+  var isMulti = _ref2.isMulti,
     hasValue = _ref2.hasValue,
+    isCompact = _ref2.isCompact,
     controlShouldRenderValue = _ref2.selectProps.controlShouldRenderValue;
   return {
     alignItems: 'center',
@@ -58,7 +59,7 @@ var valueContainerCSS = exports.valueContainerCSS = function valueContainerCSS(_
     WebkitOverflowScrolling: 'touch',
     position: 'relative',
     overflow: 'hidden',
-    padding: "".concat(spacing.baseUnit / 2, "px ").concat(spacing.baseUnit * 2, "px")
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-025, 2px)", " ", "var(--ds-space-075, 6px)")
   };
 };
 
@@ -90,7 +91,8 @@ var indicatorsContainerCSS = exports.indicatorsContainerCSS = function indicator
     alignItems: 'center',
     alignSelf: 'stretch',
     display: 'flex',
-    flexShrink: 0
+    flexShrink: 0,
+    paddingRight: "var(--ds-space-050, 4px)"
   };
 };
 

package/dist/cjs/components/control.js

@@ -16,10 +16,33 @@ var _utils = require("../utils");
 var css = exports.css = function css(_ref) {
   var isDisabled = _ref.isDisabled,
     isFocused = _ref.isFocused,
-    _ref$theme = _ref.theme,
-    colors = _ref$theme.colors,
-    borderRadius = _ref$theme.borderRadius,
-    spacing = _ref$theme.spacing;
+    isInvalid = _ref.isInvalid,
+    isCompact = _ref.isCompact,
+    appearance = _ref.appearance;
+  var borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  var backgroundColor = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input, #FFFFFF)";
+  var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  var borderColorHover = isFocused ? "var(--ds-border-focused, #388BFF)" : "var(--ds-border-input, #8590A2)";
+  if (isDisabled) {
+    backgroundColor = "var(--ds-background-disabled, #091E4208)";
+    borderColor = "var(--ds-background-disabled, #091E4208)";
+  }
+  if (isInvalid) {
+    borderColor = "var(--ds-border-danger, #E2483D)";
+    borderColorHover = "var(--ds-border-danger, #E2483D)";
+  }
+  var transitionDuration = '200ms';
+  if (appearance === 'subtle') {
+    borderColor = isFocused ? "var(--ds-border-focused, #388BFF)" : 'transparent';
+    backgroundColor = isFocused ? "var(--ds-surface, #FFFFFF)" : 'transparent';
+    backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, #FFFFFF)" : "var(--ds-background-input-hovered, #F7F8F9)";
+  }
+  if (appearance === 'none') {
+    borderColor = 'transparent';
+    backgroundColor = 'transparent';
+    backgroundColorHover = 'transparent';
+    borderColorHover = 'transparent';
+  }
   return {
     label: 'control',
     alignItems: 'center',
@@ -27,18 +50,40 @@ var css = exports.css = function css(_ref) {
     display: 'flex',
     flexWrap: 'wrap',
     justifyContent: 'space-between',
-    minHeight: spacing.controlHeight,
     outline: '0 !important',
     position: 'relative',
-    transition: 'all 100ms',
-    backgroundColor: isDisabled ? colors.neutral5 : colors.neutral0,
-    borderColor: isDisabled ? colors.neutral10 : isFocused ? colors.primary : colors.neutral20,
-    borderRadius: borderRadius,
+    // Turn pointer events off when disabled - this makes it so hover etc don't work.
+    pointerEvents: isDisabled ? 'none' : undefined,
+    backgroundColor: backgroundColor,
+    borderColor: borderColor,
     borderStyle: 'solid',
-    borderWidth: 1,
-    boxShadow: isFocused ? "0 0 0 1px ".concat(colors.primary) : undefined,
-    '&:hover': {
-      borderColor: isFocused ? colors.primary : colors.neutral30
+    borderRadius: "var(--ds-border-radius-100, 3px)",
+    borderWidth: "var(--ds-border-width, 1px)",
+    boxShadow: isInvalid ? "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor) : 'none',
+    '&:focus-within': {
+      boxShadow: "inset 0 0 0 ".concat("var(--ds-border-width, 1px)", " ", borderColor)
+    },
+    minHeight: isCompact ? 32 : 40,
+    padding: 0,
+    transition: "background-color ".concat(transitionDuration, " ease-in-out,\nborder-color ").concat(transitionDuration, " ease-in-out"),
+    '::-webkit-scrollbar': {
+      height: 8,
+      width: 8
+    },
+    '::-webkit-scrollbar-corner': {
+      display: 'none'
+    },
+    ':hover': {
+      '::-webkit-scrollbar-thumb': {
+        // scrollbars occur only if the user passes in a custom component with overflow: scroll
+        backgroundColor: 'rgba(0,0,0,0.2)'
+      },
+      cursor: 'pointer',
+      backgroundColor: backgroundColorHover,
+      borderColor: borderColorHover
+    },
+    '::-webkit-scrollbar-thumb:hover': {
+      backgroundColor: 'rgba(0,0,0,0.4)'
     }
   };
 };

package/dist/cjs/components/group.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.groupHeadingCSS = exports.groupCSS = exports.default = exports.GroupHeading = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectDestructuringEmpty2 = _interopRequireDefault(require("@babel/runtime/helpers/objectDestructuringEmpty"));
 var _react = require("@emotion/react");
 var _utils = require("../utils");
 var _excluded = ["data"];
@@ -15,10 +16,10 @@ var _excluded = ["data"];
  * @jsx jsx
  */
 var groupCSS = exports.groupCSS = function groupCSS(_ref) {
-  var spacing = _ref.theme.spacing;
+  (0, _objectDestructuringEmpty2.default)(_ref);
   return {
-    paddingBottom: spacing.baseUnit * 2,
-    paddingTop: spacing.baseUnit * 2
+    paddingBottom: "var(--ds-space-100, 8px)",
+    paddingTop: "var(--ds-space-100, 8px)"
   };
 };
 var Group = function Group(props) {
@@ -45,20 +46,19 @@ var Group = function Group(props) {
   }), label), (0, _react.jsx)("div", null, children));
 };
 var groupHeadingCSS = exports.groupHeadingCSS = function groupHeadingCSS(_ref2) {
-  var _ref2$theme = _ref2.theme,
-    colors = _ref2$theme.colors,
-    spacing = _ref2$theme.spacing;
+  (0, _objectDestructuringEmpty2.default)(_ref2);
   return {
     label: 'group',
     cursor: 'default',
     display: 'block',
-    color: colors.neutral40,
     fontSize: '75%',
-    fontWeight: 500,
     marginBottom: '0.25em',
-    paddingLeft: spacing.baseUnit * 3,
-    paddingRight: spacing.baseUnit * 3,
-    textTransform: 'uppercase'
+    paddingLeft: "var(--ds-space-150, 12px)",
+    paddingRight: "var(--ds-space-150, 12px)",
+    font: "var(--ds-font-body-small, normal 400 11px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    color: "var(--ds-text-subtle, #44546F)",
+    fontWeight: "var(--ds-font-weight-bold, 700)".concat(" !important"),
+    textTransform: 'none'
   };
 };
 

package/dist/cjs/components/indicators.js

@@ -69,23 +69,20 @@ var DownChevron = exports.DownChevron = function DownChevron(props) {
 // Dropdown & Clear Buttons
 // ==============================
 
-var baseCSS = function baseCSS(_ref2) {
-  var isFocused = _ref2.isFocused,
-    _ref2$theme = _ref2.theme,
-    baseUnit = _ref2$theme.spacing.baseUnit,
-    colors = _ref2$theme.colors;
+var dropdownIndicatorCSS = exports.dropdownIndicatorCSS = function dropdownIndicatorCSS(_ref2) {
+  var isCompact = _ref2.isCompact,
+    isDisabled = _ref2.isDisabled;
   return {
     label: 'indicatorContainer',
     display: 'flex',
     transition: 'color 150ms',
-    color: isFocused ? colors.neutral60 : colors.neutral20,
-    padding: baseUnit * 2,
+    color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtle, #44546F)",
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-025, 2px)"),
     ':hover': {
-      color: isFocused ? colors.neutral80 : colors.neutral40
+      color: "var(--ds-text-subtle, #44546F)"
     }
   };
 };
-var dropdownIndicatorCSS = exports.dropdownIndicatorCSS = baseCSS;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(props) {
@@ -96,7 +93,19 @@ var DropdownIndicator = exports.DropdownIndicator = function DropdownIndicator(p
     'dropdown-indicator': true
   }), innerProps), children || (0, _react.jsx)(DownChevron, null));
 };
-var clearIndicatorCSS = exports.clearIndicatorCSS = baseCSS;
+var clearIndicatorCSS = exports.clearIndicatorCSS = function clearIndicatorCSS(_ref3) {
+  var isCompact = _ref3.isCompact;
+  return {
+    label: 'indicatorContainer',
+    display: 'flex',
+    transition: 'color 150ms',
+    color: "var(--ds-text-subtlest, #626F86)",
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-025, 2px)"),
+    ':hover': {
+      color: "var(--ds-text-subtle, #44546F)"
+    }
+  };
+};
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
@@ -112,18 +121,15 @@ var ClearIndicator = exports.ClearIndicator = function ClearIndicator(props) {
 // Separator
 // ==============================
 
-var indicatorSeparatorCSS = exports.indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref3) {
-  var isDisabled = _ref3.isDisabled,
-    _ref3$theme = _ref3.theme,
-    baseUnit = _ref3$theme.spacing.baseUnit,
-    colors = _ref3$theme.colors;
+var indicatorSeparatorCSS = exports.indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4) {
+  var isDisabled = _ref4.isDisabled;
   return {
     label: 'indicatorSeparator',
     alignSelf: 'stretch',
     width: 1,
-    backgroundColor: isDisabled ? colors.neutral10 : colors.neutral20,
-    marginBottom: baseUnit * 2,
-    marginTop: baseUnit * 2
+    backgroundColor: isDisabled ? "var(--ds-border-disabled, #091E420F)" : "var(--ds-border, #091E4224)",
+    marginBottom: "var(--ds-space-100, 8px)",
+    marginTop: "var(--ds-space-100, 8px)"
   };
 };
 
@@ -147,12 +153,11 @@ var loadingDotAnimations = (0, _react.keyframes)({
     opacity: 1
   }
 });
-var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicatorCSS(_ref4) {
-  var isFocused = _ref4.isFocused,
-    size = _ref4.size,
-    _ref4$theme = _ref4.theme,
-    colors = _ref4$theme.colors,
-    baseUnit = _ref4$theme.spacing.baseUnit;
+var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicatorCSS(_ref5) {
+  var isFocused = _ref5.isFocused,
+    size = _ref5.size,
+    isCompact = _ref5.isCompact,
+    colors = _ref5.theme.colors;
   return {
     label: 'loadingIndicator',
     display: 'flex',
@@ -164,12 +169,12 @@ var loadingIndicatorCSS = exports.loadingIndicatorCSS = function loadingIndicato
     textAlign: 'center',
     verticalAlign: 'middle',
     color: isFocused ? colors.neutral60 : colors.neutral20,
-    padding: baseUnit * 2
+    padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)")
   };
 };
-var LoadingDot = function LoadingDot(_ref5) {
-  var delay = _ref5.delay,
-    offset = _ref5.offset;
+var LoadingDot = function LoadingDot(_ref6) {
+  var delay = _ref6.delay,
+    offset = _ref6.offset;
   return (0, _react.jsx)("span", {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     css: {
@@ -185,12 +190,12 @@ var LoadingDot = function LoadingDot(_ref5) {
   });
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(_ref6) {
-  var innerProps = _ref6.innerProps,
-    isRtl = _ref6.isRtl,
-    _ref6$size = _ref6.size,
-    size = _ref6$size === void 0 ? 4 : _ref6$size,
-    restProps = (0, _objectWithoutProperties2.default)(_ref6, _excluded2);
+var LoadingIndicator = exports.LoadingIndicator = function LoadingIndicator(_ref7) {
+  var innerProps = _ref7.innerProps,
+    isRtl = _ref7.isRtl,
+    _ref7$size = _ref7.size,
+    size = _ref7$size === void 0 ? 4 : _ref7$size,
+    restProps = (0, _objectWithoutProperties2.default)(_ref7, _excluded2);
   return (0, _react.jsx)("div", (0, _extends2.default)({}, (0, _utils.getStyleProps)(_objectSpread(_objectSpread({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,

package/dist/cjs/components/input.js

@@ -31,7 +31,7 @@ var inputCSS = exports.inputCSS = function inputCSS(_ref) {
     margin: spacing.baseUnit / 2,
     paddingBottom: spacing.baseUnit / 2,
     paddingTop: spacing.baseUnit / 2,
-    color: colors.neutral80
+    color: "var(--ds-text, hsl(0, 0%, 20%))"
   });
 };
 var spacingStyle = {

package/dist/cjs/components/internal/a11y-text.js

@@ -23,6 +23,8 @@ var styles = (0, _react.css)({
   clip: 'rect(1px, 1px, 1px, 1px)',
   label: 'a11yText',
   overflow: 'hidden',
+  userSelect: 'none',
+  // while hidden text is sitting in the DOM, it should not be selectable
   whiteSpace: 'nowrap'
 });
 var A11yText = function A11yText(props) {

package/dist/cjs/components/live-region.js

@@ -12,7 +12,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _accessibility = require("../accessibility");
 var _a11yText = _interopRequireDefault(require("./internal/a11y-text"));
 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; } /**
+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 @atlaskit/platform/ensure-feature-flag-prefix */ /**
  * @jsxRuntime classic
  * @jsx jsx
  */
@@ -170,8 +170,11 @@ var LiveRegion = function LiveRegion(props) {
   return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(_a11yText.default, {
     id: id
   }, isInitialFocus && ScreenReaderText), (0, _react2.jsx)(_a11yText.default, {
-    "aria-live": isA11yImprovementEnabled ? 'polite' : ariaLive,
-    role: isA11yImprovementEnabled ? 'status' : 'log'
+    "aria-live": ariaLive // Should be undefined by default unless a specific use case requires it
+    ,
+    "aria-atomic": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'false',
+    "aria-relevant": (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? undefined : 'additions text',
+    role: (0, _platformFeatureFlags.fg)('design_system_select-a11y-improvement') ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/cjs/components/menu.js

@@ -208,7 +208,7 @@ var menuCSS = exports.menuCSS = function menuCSS(_ref2) {
     colors = _ref2$theme.colors;
   return _ref3 = {
     label: 'menu'
-  }, (0, _defineProperty2.default)(_ref3, alignToControl(placement), '100%'), (0, _defineProperty2.default)(_ref3, "position", 'absolute'), (0, _defineProperty2.default)(_ref3, "width", '100%'), (0, _defineProperty2.default)(_ref3, "zIndex", 1), (0, _defineProperty2.default)(_ref3, "backgroundColor", colors.neutral0), (0, _defineProperty2.default)(_ref3, "borderRadius", borderRadius), (0, _defineProperty2.default)(_ref3, "boxShadow", '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)'), (0, _defineProperty2.default)(_ref3, "marginBottom", spacing.menuGutter), (0, _defineProperty2.default)(_ref3, "marginTop", spacing.menuGutter), _ref3;
+  }, (0, _defineProperty2.default)(_ref3, alignToControl(placement), '100%'), (0, _defineProperty2.default)(_ref3, "position", 'absolute'), (0, _defineProperty2.default)(_ref3, "width", '100%'), (0, _defineProperty2.default)(_ref3, "zIndex", 1), (0, _defineProperty2.default)(_ref3, "borderRadius", borderRadius), (0, _defineProperty2.default)(_ref3, "marginBottom", spacing.menuGutter), (0, _defineProperty2.default)(_ref3, "marginTop", spacing.menuGutter), (0, _defineProperty2.default)(_ref3, "backgroundColor", "var(--ds-surface-overlay, white)"), (0, _defineProperty2.default)(_ref3, "boxShadow", "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"), _ref3;
 };
 var PortalPlacementContext = /*#__PURE__*/(0, _react.createContext)(null);
 
@@ -280,16 +280,15 @@ var _default = exports.default = Menu; // ==============================
 // Menu List
 // ==============================
 var menuListCSS = exports.menuListCSS = function menuListCSS(_ref5) {
-  var maxHeight = _ref5.maxHeight,
-    baseUnit = _ref5.theme.spacing.baseUnit;
+  var maxHeight = _ref5.maxHeight;
   return {
     maxHeight: maxHeight,
     overflowY: 'auto',
     position: 'relative',
     // required for offset[Height, Top] > keyboard scroll
     WebkitOverflowScrolling: 'touch',
-    paddingBottom: baseUnit,
-    paddingTop: baseUnit
+    paddingTop: "var(--ds-space-100, 8px)",
+    paddingBottom: "var(--ds-space-100, 8px)"
   };
 };
 

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

@@ -7,9 +7,10 @@ Object.defineProperty(exports, "__esModule", {
 exports.MultiValueLabel = exports.MultiValueGeneric = exports.MultiValueContainer = void 0;
 exports.MultiValueRemove = MultiValueRemove;
 exports.multiValueRemoveCSS = exports.multiValueLabelCSS = exports.multiValueCSS = exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 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 _utils = require("../utils");
 var _indicators = require("./indicators");
 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; }
@@ -18,54 +19,109 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 var multiValueCSS = exports.multiValueCSS = function multiValueCSS(_ref) {
-  var _ref$theme = _ref.theme,
+  var isDisabled = _ref.isDisabled,
+    isFocused = _ref.isFocused,
+    _ref$theme = _ref.theme,
     spacing = _ref$theme.spacing,
     borderRadius = _ref$theme.borderRadius,
     colors = _ref$theme.colors;
-  return {
+  var backgroundColor;
+  var color;
+  if (isDisabled) {
+    // Use the basic neutral background so it is slightly separate from the
+    // field's background
+    backgroundColor = "var(--ds-background-neutral, #091E420F)";
+    color = "var(--ds-text-disabled, #091E424F)";
+  } else if (isFocused) {
+    backgroundColor = "var(--ds-background-selected, #E9F2FF)";
+    color = "var(--ds-text-selected, hsl(0, 0%, 20%))";
+  } else {
+    backgroundColor = (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') ? "var(--ds-background-neutral-subtle-hovered, #091E420F)" : "var(--ds-background-neutral, #091E420F)";
+    color = "var(--ds-text, hsl(0, 0%, 20%))";
+  }
+  return _objectSpread({
     label: 'multiValue',
     display: 'flex',
     minWidth: 0,
     // resolves flex/text-overflow bug
-    backgroundColor: colors.neutral10,
-    borderRadius: borderRadius / 2,
-    margin: spacing.baseUnit / 2
-  };
+    margin: "var(--ds-space-025, 2px)",
+    borderRadius: "var(--ds-border-radius-050, 2px)",
+    backgroundColor: backgroundColor,
+    boxShadow: isFocused ? "0 0 0 2px ".concat("var(--ds-surface, transparent)", ", 0 0 0 4px ", "var(--ds-border-focused, transparent)") : 'none',
+    maxWidth: '100%',
+    '@media screen and (-ms-high-contrast: active)': {
+      border: isFocused ? '1px solid transparent' : 'none'
+    },
+    color: color
+  }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
+    borderRadius: "var(--ds-border-radius-100, 4px)",
+    // Hardcode this color for visual refresh as there is no token color yet
+    borderColor: '#B7B9BE',
+    borderWidth: "var(--ds-border-width, 1px)",
+    borderStyle: 'solid',
+    backgroundColor: "var(--ds-background-input, #FFFFFF)"
+  });
 };
 var multiValueLabelCSS = exports.multiValueLabelCSS = function multiValueLabelCSS(_ref2) {
-  var _ref2$theme = _ref2.theme,
-    borderRadius = _ref2$theme.borderRadius,
-    colors = _ref2$theme.colors,
-    cropWithEllipsis = _ref2.cropWithEllipsis;
-  return {
+  var cropWithEllipsis = _ref2.cropWithEllipsis,
+    isDisabled = _ref2.isDisabled;
+  return _objectSpread({
     overflow: 'hidden',
     textOverflow: cropWithEllipsis || cropWithEllipsis === undefined ? 'ellipsis' : undefined,
     whiteSpace: 'nowrap',
-    borderRadius: borderRadius / 2,
-    color: colors.neutral80,
+    borderRadius: "var(--ds-border-radius-050, 2px)",
     fontSize: '85%',
-    padding: 3,
-    paddingLeft: 6
-  };
+    font: "var(--ds-font-body-UNSAFE_small, normal 400 12px/16px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    padding: "var(--ds-space-025, 2px)",
+    color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : 'inherit',
+    paddingLeft: "var(--ds-space-075, 6px)"
+  }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
+    font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
+    paddingTop: 0,
+    paddingBottom: 0,
+    paddingLeft: "var(--ds-space-050, 4px)"
+  });
 };
 var multiValueRemoveCSS = exports.multiValueRemoveCSS = function multiValueRemoveCSS(_ref3) {
-  var _ref3$theme = _ref3.theme,
-    spacing = _ref3$theme.spacing,
-    borderRadius = _ref3$theme.borderRadius,
-    colors = _ref3$theme.colors,
-    isFocused = _ref3.isFocused;
-  return {
+  var isFocused = _ref3.isFocused;
+  return _objectSpread({
     alignItems: 'center',
     display: 'flex',
-    borderRadius: borderRadius / 2,
-    backgroundColor: isFocused ? colors.dangerLight : undefined,
-    paddingLeft: spacing.baseUnit,
-    paddingRight: spacing.baseUnit,
+    backgroundColor: isFocused ? "var(--ds-UNSAFE-transparent, transparent)" : undefined,
+    fill: isFocused ? "var(--ds-text-selected, #000)" : "var(--ds-text, #000)",
+    paddingLeft: "var(--ds-space-025, 2px)",
+    paddingRight: "var(--ds-space-025, 2px)",
+    borderRadius: '0px 2px 2px 0px',
+    // DSP-6470 we should style like Tag once we have the :has selector
+    ':hover': {
+      backgroundColor: "var(--ds-background-danger-hovered, #FFD5D2)",
+      fill: "var(--ds-text-danger, #000)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-danger-pressed, #FD9891)",
+      fill: "var(--ds-text-danger, #000)"
+    }
+  }, (0, _platformFeatureFlags.fg)('platform-component-visual-refresh') && {
+    backgroundColor: "var(--ds-background-neutral-subtle, #00000000)",
+    border: 'none',
+    alignItems: 'center',
+    justifyContent: 'center',
+    alignSelf: 'center',
+    appearance: 'none',
+    borderRadius: "var(--ds-border-radius, 4px)",
+    color: "var(--ds-text, #172B4D)",
+    padding: "var(--ds-space-025, 2px)",
+    marginRight: "var(--ds-space-025, 2px)",
+    ':focus-visible': {
+      outlineOffset: "var(--ds-space-negative-025, -2px)"
+    },
     ':hover': {
-      backgroundColor: colors.dangerLight,
-      color: colors.danger
+      backgroundColor: "var(--ds-background-neutral-subtle-hovered, #091E420F)"
+    },
+    ':active': {
+      backgroundColor: "var(--ds-background-neutral-subtle-pressed, #091E4224)"
     }
-  };
+  });
 };
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 var MultiValueGeneric = exports.MultiValueGeneric = function MultiValueGeneric(_ref4) {