@atlaskit/react-select 1.4.0 → 1.4.2

package/dist/es2019/components/group.js

@@ -6,13 +6,9 @@ import _extends from "@babel/runtime/helpers/extends";
 
 import { jsx } from '@emotion/react';
 import { cleanCommonProps, getStyleProps } from '../utils';
-export const groupCSS = ({
-  theme: {
-    spacing
-  }
-}) => ({
-  paddingBottom: spacing.baseUnit * 2,
-  paddingTop: spacing.baseUnit * 2
+export const groupCSS = ({}) => ({
+  paddingBottom: "var(--ds-space-100, 8px)",
+  paddingTop: "var(--ds-space-100, 8px)"
 });
 const Group = props => {
   const {
@@ -39,22 +35,18 @@ const Group = props => {
     cx: cx
   }), label), jsx("div", null, children));
 };
-export const groupHeadingCSS = ({
-  theme: {
-    colors,
-    spacing
-  }
-}) => ({
+export const groupHeadingCSS = ({}) => ({
   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)"} !important`,
+  textTransform: 'none'
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/indicators.js

@@ -51,25 +51,19 @@ jsx(Svg, _extends({
 // Dropdown & Clear Buttons
 // ==============================
 
-const baseCSS = ({
-  isFocused,
-  theme: {
-    spacing: {
-      baseUnit
-    },
-    colors
-  }
+export const dropdownIndicatorCSS = ({
+  isCompact,
+  isDisabled
 }) => ({
   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: `${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)"
   }
 });
-export const dropdownIndicatorCSS = baseCSS;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export const DropdownIndicator = props => {
@@ -82,7 +76,18 @@ export const DropdownIndicator = props => {
     'dropdown-indicator': true
   }), innerProps), children || jsx(DownChevron, null));
 };
-export const clearIndicatorCSS = baseCSS;
+export const clearIndicatorCSS = ({
+  isCompact
+}) => ({
+  label: 'indicatorContainer',
+  display: 'flex',
+  transition: 'color 150ms',
+  color: "var(--ds-text-subtlest, #626F86)",
+  padding: `${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
 export const ClearIndicator = props => {
@@ -101,20 +106,14 @@ export const ClearIndicator = props => {
 // ==============================
 
 export const indicatorSeparatorCSS = ({
-  isDisabled,
-  theme: {
-    spacing: {
-      baseUnit
-    },
-    colors
-  }
+  isDisabled
 }) => ({
   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)"
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -142,11 +141,9 @@ const loadingDotAnimations = keyframes({
 export const loadingIndicatorCSS = ({
   isFocused,
   size,
+  isCompact,
   theme: {
-    colors,
-    spacing: {
-      baseUnit
-    }
+    colors
   }
 }) => ({
   label: 'loadingIndicator',
@@ -159,7 +156,7 @@ export const loadingIndicatorCSS = ({
   textAlign: 'center',
   verticalAlign: 'middle',
   color: isFocused ? colors.neutral60 : colors.neutral20,
-  padding: baseUnit * 2
+  padding: `${isCompact ? 0 : "var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"}`
 });
 const LoadingDot = ({
   delay,

package/dist/es2019/components/input.js

@@ -22,7 +22,7 @@ export const inputCSS = ({
   margin: spacing.baseUnit / 2,
   paddingBottom: spacing.baseUnit / 2,
   paddingTop: spacing.baseUnit / 2,
-  color: colors.neutral80
+  color: "var(--ds-text, hsl(0, 0%, 20%))"
 });
 const spacingStyle = {
   gridArea: '1 / 2',

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

@@ -16,6 +16,8 @@ const styles = 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'
 });
 const A11yText = props => jsx("span", _extends({

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

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/platform/ensure-feature-flag-prefix */
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -168,8 +169,11 @@ const LiveRegion = props => {
   return jsx(Fragment, null, jsx(A11yText, {
     id: id
   }, isInitialFocus && ScreenReaderText), jsx(A11yText, {
-    "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": fg('design_system_select-a11y-improvement') ? undefined : 'false',
+    "aria-relevant": fg('design_system_select-a11y-improvement') ? undefined : 'additions text',
+    role: fg('design_system_select-a11y-improvement') ? 'status' : 'log'
   }, isFocused && !isInitialFocus && ScreenReaderText));
 };
 

package/dist/es2019/components/menu.js

@@ -200,11 +200,11 @@ export const menuCSS = ({
   position: 'absolute',
   width: '100%',
   zIndex: 1,
-  backgroundColor: colors.neutral0,
   borderRadius: borderRadius,
-  boxShadow: '0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1)',
   marginBottom: spacing.menuGutter,
-  marginTop: spacing.menuGutter
+  marginTop: spacing.menuGutter,
+  backgroundColor: "var(--ds-surface-overlay, white)",
+  boxShadow: "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"
 });
 const PortalPlacementContext = /*#__PURE__*/createContext(null);
 
@@ -281,20 +281,15 @@ export default Menu;
 // ==============================
 
 export const menuListCSS = ({
-  maxHeight,
-  theme: {
-    spacing: {
-      baseUnit
-    }
-  }
+  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)"
 });
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

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

@@ -5,57 +5,116 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { getStyleProps } from '../utils';
 import { CrossIcon } from './indicators';
 export const multiValueCSS = ({
+  isDisabled,
+  isFocused,
   theme: {
     spacing,
     borderRadius,
     colors
   }
-}) => ({
-  label: 'multiValue',
-  display: 'flex',
-  minWidth: 0,
-  // resolves flex/text-overflow bug
-  backgroundColor: colors.neutral10,
-  borderRadius: borderRadius / 2,
-  margin: spacing.baseUnit / 2
-});
+}) => {
+  let backgroundColor;
+  let 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 = 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 {
+    label: 'multiValue',
+    display: 'flex',
+    minWidth: 0,
+    // resolves flex/text-overflow bug
+    margin: "var(--ds-space-025, 2px)",
+    borderRadius: "var(--ds-border-radius-050, 2px)",
+    backgroundColor,
+    boxShadow: isFocused ? `0 0 0 2px ${"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,
+    ...(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)"
+    })
+  };
+};
 export const multiValueLabelCSS = ({
-  theme: {
-    borderRadius,
-    colors
-  },
-  cropWithEllipsis
+  cropWithEllipsis,
+  isDisabled
 }) => ({
   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)",
+  ...(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)"
+  })
 });
 export const multiValueRemoveCSS = ({
-  theme: {
-    spacing,
-    borderRadius,
-    colors
-  },
   isFocused
 }) => ({
   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: colors.dangerLight,
-    color: colors.danger
-  }
+    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)"
+  },
+  ...(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: "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
 export const MultiValueGeneric = ({

package/dist/es2019/components/option.js

@@ -5,31 +5,56 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import { jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { isAppleDevice } from '../accessibility/helpers';
 import { getStyleProps } from '../utils';
+import A11yText from './internal/a11y-text';
 export const optionCSS = ({
   isDisabled,
   isFocused,
-  isSelected,
-  theme: {
-    spacing,
-    colors
+  isSelected
+}) => {
+  let color = "var(--ds-text, #172B4D)";
+  if (isDisabled) {
+    color = "var(--ds-text-disabled, #091E424F)";
+  } else if (isSelected) {
+    color = "var(--ds-text-selected, #0C66E4)";
   }
-}) => ({
-  label: 'option',
-  cursor: 'default',
-  display: 'block',
-  fontSize: 'inherit',
-  width: '100%',
-  userSelect: 'none',
-  WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
-  backgroundColor: isSelected ? colors.primary : isFocused ? colors.primary25 : 'transparent',
-  color: isDisabled ? colors.neutral20 : isSelected ? colors.neutral0 : 'inherit',
-  padding: `${spacing.baseUnit * 2}px ${spacing.baseUnit * 3}px`,
-  // provide some affordance on touch devices
-  ':active': {
-    backgroundColor: !isDisabled ? isSelected ? colors.primary : colors.primary50 : undefined
+  let boxShadow;
+  let backgroundColor;
+  if (isDisabled) {
+    backgroundColor = undefined;
+  } else if (isSelected && isFocused) {
+    backgroundColor = "var(--ds-background-selected-hovered, #CCE0FF)";
+  } else if (isSelected) {
+    backgroundColor = "var(--ds-background-selected, #E9F2FF)";
+  } else if (isFocused) {
+    backgroundColor = "var(--ds-background-neutral-subtle-hovered, #091E420F)";
   }
-});
+  if (!isDisabled && (isFocused || isSelected)) {
+    boxShadow = `inset 2px 0px 0px ${"var(--ds-border-selected, #0C66E4)"}`;
+  }
+  const cursor = isDisabled ? 'not-allowed' : 'default';
+  return {
+    label: 'option',
+    display: 'block',
+    fontSize: 'inherit',
+    width: '100%',
+    userSelect: 'none',
+    WebkitTapHighlightColor: 'rgba(0, 0, 0, 0)',
+    padding: `${"var(--ds-space-075, 6px)"} ${"var(--ds-space-150, 12px)"}`,
+    backgroundColor,
+    color,
+    cursor,
+    boxShadow,
+    ':active': {
+      backgroundColor: !isDisabled ? isSelected ? "var(--ds-background-selected-pressed, #85B8FF)" : "var(--ds-background-neutral-subtle-pressed, #091E4224)" : undefined
+    },
+    '@media screen and (-ms-high-contrast: active)': {
+      borderLeft: !isDisabled && (isFocused || isSelected) ? '2px solid transparent' : ''
+    }
+  };
+};
 const Option = props => {
   const {
     children,
@@ -39,17 +64,18 @@ const Option = props => {
     innerRef,
     innerProps
   } = props;
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  const isVoiceOver = isAppleDevice() && fg('design_system_select-a11y-improvement');
   return jsx("div", _extends({}, getStyleProps(props, 'option', {
     option: true,
     'option--is-disabled': isDisabled,
     'option--is-focused': isFocused,
     'option--is-selected': isSelected
   }), {
-    ref: innerRef,
-    "aria-disabled": isDisabled
+    ref: innerRef
   }, innerProps, {
     tabIndex: -1
-  }), children);
+  }), children, isVoiceOver && (isSelected || isDisabled) && jsx(A11yText, null, `${isSelected ? ',selected' : ''}${isDisabled ? ',dimmed' : ''}`));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc

package/dist/es2019/components/placeholder.js

@@ -7,16 +7,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { getStyleProps } from '../utils';
 export const placeholderCSS = ({
-  theme: {
-    spacing,
-    colors
-  }
+  isDisabled
 }) => ({
   label: 'placeholder',
   gridArea: '1 / 1 / 2 / 3',
-  color: colors.neutral50,
-  marginLeft: spacing.baseUnit / 2,
-  marginRight: spacing.baseUnit / 2
+  margin: `0 ${"var(--ds-space-025, 2px)"}`,
+  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text-subtlest, #626F86)"
 });
 const Placeholder = props => {
   const {

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

@@ -9,8 +9,7 @@ import { getStyleProps } from '../utils';
 export const css = ({
   isDisabled,
   theme: {
-    spacing,
-    colors
+    spacing
   }
 }) => ({
   label: 'singleValue',
@@ -19,9 +18,8 @@ export const css = ({
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap',
-  color: isDisabled ? colors.neutral40 : colors.neutral80,
-  marginLeft: spacing.baseUnit / 2,
-  marginRight: spacing.baseUnit / 2
+  margin: `0 ${"var(--ds-space-025, 2px)"}`,
+  color: isDisabled ? "var(--ds-text-disabled, #091E424F)" : "var(--ds-text, #172B4D)"
 });
 const SingleValue = props => {
   const {