@atlaskit/react-select 1.5.1 → 1.6.0

package/dist/esm/components/indicators.js

@@ -1,8 +1,7 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size"],
-  _excluded2 = ["innerProps", "isRtl", "size"];
+import _extends from "@babel/runtime/helpers/extends";
+var _excluded = ["innerProps", "isRtl", "size"];
 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) { _defineProperty(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; }
 /**
@@ -10,63 +9,36 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 
-import { css, jsx, keyframes } from '@emotion/react';
+import { jsx } from '@emotion/react';
+import DownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import CrossIcon from '@atlaskit/icon/utility/migration/cross-circle--select-clear';
+import { Inline, Pressable, xcss } from '@atlaskit/primitives';
+import Spinner from '@atlaskit/spinner';
 import { getStyleProps } from '../utils';
 
 // ==============================
 // Dropdown & Clear Icons
 // ==============================
 
-var styles = css({
-  display: 'inline-block',
-  fill: 'currentColor',
-  lineHeight: 1,
-  stroke: 'currentColor',
-  strokeWidth: 0
+var iconContainerStyles = xcss({
+  all: 'unset',
+  outline: 'revert',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  padding: 'space.025'
+});
+var dropdownWrapperStyles = xcss({
+  padding: 'space.075'
 });
-var Svg = function Svg(_ref) {
-  var size = _ref.size,
-    props = _objectWithoutProperties(_ref, _excluded);
-  return jsx("svg", _extends({
-    height: size,
-    width: size,
-    viewBox: "0 0 20 20",
-    "aria-hidden": "true",
-    focusable: "false",
-    css: styles
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-  }, props));
-};
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var CrossIcon = function CrossIcon(props) {
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(Svg, _extends({
-      size: 20
-    }, props), jsx("path", {
-      d: "M14.348 14.849c-0.469 0.469-1.229 0.469-1.697 0l-2.651-3.030-2.651 3.029c-0.469 0.469-1.229 0.469-1.697 0-0.469-0.469-0.469-1.229 0-1.697l2.758-3.15-2.759-3.152c-0.469-0.469-0.469-1.228 0-1.697s1.228-0.469 1.697 0l2.652 3.031 2.651-3.031c0.469-0.469 1.228-0.469 1.697 0s0.469 1.229 0 1.697l-2.758 3.152 2.758 3.15c0.469 0.469 0.469 1.229 0 1.698z"
-    }))
-  );
-};
-// eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var DownChevron = function DownChevron(props) {
-  return (
-    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
-    jsx(Svg, _extends({
-      size: 20
-    }, props), jsx("path", {
-      d: "M4.516 7.548c0.436-0.446 1.043-0.481 1.576 0l3.908 3.747 3.908-3.747c0.533-0.481 1.141-0.446 1.574 0 0.436 0.445 0.408 1.197 0 1.615-0.406 0.418-4.695 4.502-4.695 4.502-0.217 0.223-0.502 0.335-0.787 0.335s-0.57-0.112-0.789-0.335c0 0-4.287-4.084-4.695-4.502s-0.436-1.17 0-1.615z"
-    }))
-  );
-};
 
 // ==============================
 // Dropdown & Clear Buttons
 // ==============================
 
-export var dropdownIndicatorCSS = function dropdownIndicatorCSS(_ref2) {
-  var isCompact = _ref2.isCompact,
-    isDisabled = _ref2.isDisabled;
+export var dropdownIndicatorCSS = function dropdownIndicatorCSS(_ref) {
+  var isCompact = _ref.isCompact,
+    isDisabled = _ref.isDisabled;
   return {
     label: 'indicatorContainer',
     display: 'flex',
@@ -81,15 +53,22 @@ export var dropdownIndicatorCSS = function dropdownIndicatorCSS(_ref2) {
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var DropdownIndicator = function DropdownIndicator(props) {
-  var children = props.children,
-    innerProps = props.innerProps;
+  var innerProps = props.innerProps,
+    children = props.children;
   return jsx("div", _extends({}, getStyleProps(props, 'dropdownIndicator', {
     indicator: true,
     'dropdown-indicator': true
-  }), innerProps), children || jsx(DownChevron, null));
+  }), innerProps), children ? children : jsx(Inline, {
+    as: "span",
+    xcss: dropdownWrapperStyles
+  }, jsx(DownIcon, {
+    color: "currentColor",
+    label: "open",
+    LEGACY_margin: "var(--ds-space-negative-075, -0.375rem)"
+  })));
 };
-export var clearIndicatorCSS = function clearIndicatorCSS(_ref3) {
-  var isCompact = _ref3.isCompact;
+export var clearIndicatorCSS = function clearIndicatorCSS(_ref2) {
+  var isCompact = _ref2.isCompact;
   return {
     label: 'indicatorContainer',
     display: 'flex',
@@ -104,35 +83,21 @@ export var clearIndicatorCSS = function clearIndicatorCSS(_ref3) {
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var ClearIndicator = function ClearIndicator(props) {
-  var children = props.children,
-    innerProps = props.innerProps;
+  var innerProps = props.innerProps,
+    _props$clearControlLa = props.clearControlLabel,
+    clearControlLabel = _props$clearControlLa === void 0 ? 'clear' : _props$clearControlLa;
   return jsx("div", _extends({}, getStyleProps(props, 'clearIndicator', {
     indicator: true,
     'clear-indicator': true
-  }), innerProps), children || jsx(CrossIcon, null));
-};
-
-// ==============================
-// Separator
-// ==============================
-
-export var indicatorSeparatorCSS = function indicatorSeparatorCSS(_ref4) {
-  var isDisabled = _ref4.isDisabled;
-  return {
-    label: 'indicatorSeparator',
-    alignSelf: 'stretch',
-    width: 1,
-    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
-export var IndicatorSeparator = function IndicatorSeparator(props) {
-  var innerProps = props.innerProps;
-  return jsx("span", _extends({}, innerProps, getStyleProps(props, 'indicatorSeparator', {
-    'indicator-separator': true
+  }), innerProps), jsx(Pressable, {
+    xcss: iconContainerStyles,
+    tabIndex: -1,
+    "aria-label": clearControlLabel
+  }, jsx(CrossIcon, {
+    label: "",
+    color: "currentColor",
+    LEGACY_size: "small",
+    LEGACY_margin: "var(--ds-space-negative-025, -0.125rem)"
   })));
 };
 
@@ -140,57 +105,20 @@ export var IndicatorSeparator = function IndicatorSeparator(props) {
 // Loading
 // ==============================
 
-var loadingDotAnimations = keyframes({
-  '0%, 80%, 100%': {
-    opacity: 0
-  },
-  '40%': {
-    opacity: 1
-  }
-});
-export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref5) {
-  var isFocused = _ref5.isFocused,
-    size = _ref5.size,
-    isCompact = _ref5.isCompact,
-    colors = _ref5.theme.colors;
+export var loadingIndicatorCSS = function loadingIndicatorCSS(_ref3) {
+  var isCompact = _ref3.isCompact;
   return {
     label: 'loadingIndicator',
-    display: 'flex',
-    transition: 'color 150ms',
-    alignSelf: 'center',
-    fontSize: size,
-    lineHeight: 1,
-    marginRight: size,
-    textAlign: 'center',
-    verticalAlign: 'middle',
-    color: isFocused ? colors.neutral60 : colors.neutral20,
     padding: "".concat(isCompact ? 0 : "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)")
   };
 };
-var LoadingDot = function LoadingDot(_ref6) {
-  var delay = _ref6.delay,
-    offset = _ref6.offset;
-  return jsx("span", {
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    css: {
-      animation: "".concat(loadingDotAnimations, " 1s ease-in-out ").concat(delay, "ms infinite;"),
-      backgroundColor: 'currentColor',
-      borderRadius: '1em',
-      display: 'inline-block',
-      marginLeft: offset ? '1em' : undefined,
-      height: '1em',
-      verticalAlign: 'top',
-      width: '1em'
-    }
-  });
-};
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
-export var LoadingIndicator = function LoadingIndicator(_ref7) {
-  var innerProps = _ref7.innerProps,
-    isRtl = _ref7.isRtl,
-    _ref7$size = _ref7.size,
-    size = _ref7$size === void 0 ? 4 : _ref7$size,
-    restProps = _objectWithoutProperties(_ref7, _excluded2);
+export var LoadingIndicator = function LoadingIndicator(_ref4) {
+  var innerProps = _ref4.innerProps,
+    isRtl = _ref4.isRtl,
+    _ref4$size = _ref4.size,
+    size = _ref4$size === void 0 ? 4 : _ref4$size,
+    restProps = _objectWithoutProperties(_ref4, _excluded);
   return jsx("div", _extends({}, getStyleProps(_objectSpread(_objectSpread({}, restProps), {}, {
     innerProps: innerProps,
     isRtl: isRtl,
@@ -198,14 +126,7 @@ export var LoadingIndicator = function LoadingIndicator(_ref7) {
   }), 'loadingIndicator', {
     indicator: true,
     'loading-indicator': true
-  }), innerProps), jsx(LoadingDot, {
-    delay: 0,
-    offset: isRtl
-  }), jsx(LoadingDot, {
-    delay: 160,
-    offset: true
-  }), jsx(LoadingDot, {
-    delay: 320,
-    offset: !isRtl
+  }), innerProps), jsx(Spinner, {
+    size: "small"
   }));
 };

package/dist/esm/components/input.js

@@ -13,20 +13,17 @@ import { jsx } from '@emotion/react';
 import { cleanCommonProps, getStyleProps } from '../utils';
 export var inputCSS = function inputCSS(_ref) {
   var isDisabled = _ref.isDisabled,
-    value = _ref.value,
-    _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    colors = _ref$theme.colors;
+    value = _ref.value;
   return _objectSpread(_objectSpread({
     visibility: isDisabled ? 'hidden' : 'visible',
     // force css to recompute when value change due to @emotion bug.
     // We can remove it whenever the bug is fixed.
     transform: value ? 'translateZ(0)' : ''
   }, containerStyle), {}, {
-    margin: spacing.baseUnit / 2,
-    paddingBottom: spacing.baseUnit / 2,
-    paddingTop: spacing.baseUnit / 2,
-    color: "var(--ds-text, hsl(0, 0%, 20%))"
+    margin: "var(--ds-space-025, 2px)",
+    paddingBottom: "var(--ds-space-025, 2px)",
+    paddingTop: "var(--ds-space-025, 2px)",
+    color: "var(--ds-text, #172B4D)"
   });
 };
 var spacingStyle = {

package/dist/esm/components/menu.js

@@ -1,4 +1,5 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+import _objectDestructuringEmpty from "@babel/runtime/helpers/objectDestructuringEmpty";
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
@@ -15,6 +16,8 @@ import { jsx } from '@emotion/react';
 import { autoUpdate } from '@floating-ui/dom';
 import { createPortal } from 'react-dom';
 import useLayoutEffect from 'use-isomorphic-layout-effect';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Text } from '@atlaskit/primitives';
 import { animatedScrollTo, getBoundingClientObj, getScrollParent, getScrollTop, getStyleProps, normalizedHeight, scrollTo } from '../utils';
 
 // ==============================
@@ -46,7 +49,8 @@ export function getMenuPlacement(_ref) {
   // we can't trust `scrollParent.scrollHeight` --> it may increase when
   // the menu is rendered
   var _scrollParent$getBoun = scrollParent.getBoundingClientRect(),
-    scrollHeight = _scrollParent$getBoun.height;
+    scrollHeight = _scrollParent$getBoun.height,
+    scrollParentTop = _scrollParent$getBoun.top;
   var _menuEl$getBoundingCl = menuEl.getBoundingClientRect(),
     menuBottom = _menuEl$getBoundingCl.bottom,
     menuHeight = _menuEl$getBoundingCl.height,
@@ -55,12 +59,14 @@ export function getMenuPlacement(_ref) {
     containerTop = _menuEl$offsetParent$.top;
   var viewHeight = isFixedPosition ? window.innerHeight : normalizedHeight(scrollParent);
   var scrollTop = getScrollTop(scrollParent);
+  // use menuTop - scrollParentTop for the actual top space of menu in the scroll container
+  var menuTopFromParent = fg('design-system-select-fix-placement') ? menuTop - scrollParentTop : menuTop;
   var marginBottom = parseInt(getComputedStyle(menuEl).marginBottom, 10);
   var marginTop = parseInt(getComputedStyle(menuEl).marginTop, 10);
   var viewSpaceAbove = containerTop - marginTop;
-  var viewSpaceBelow = viewHeight - menuTop;
+  var viewSpaceBelow = viewHeight - menuTopFromParent;
   var scrollSpaceAbove = viewSpaceAbove + scrollTop;
-  var scrollSpaceBelow = scrollHeight - scrollTop - menuTop;
+  var scrollSpaceBelow = scrollHeight - scrollTop - menuTopFromParent;
   var scrollDown = menuBottom - viewHeight + scrollTop + marginBottom;
   var scrollUp = scrollTop + menuTop - marginTop;
   var scrollDuration = 160;
@@ -193,15 +199,10 @@ var coercePlacement = function coercePlacement(p) {
   return p === 'auto' ? 'bottom' : p;
 };
 export var menuCSS = function menuCSS(_ref2) {
-  var _ref3;
-  var placement = _ref2.placement,
-    _ref2$theme = _ref2.theme,
-    borderRadius = _ref2$theme.borderRadius,
-    spacing = _ref2$theme.spacing,
-    colors = _ref2$theme.colors;
-  return _ref3 = {
+  var placement = _ref2.placement;
+  return _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({
     label: 'menu'
-  }, _defineProperty(_ref3, alignToControl(placement), '100%'), _defineProperty(_ref3, "position", 'absolute'), _defineProperty(_ref3, "width", '100%'), _defineProperty(_ref3, "zIndex", 1), _defineProperty(_ref3, "borderRadius", borderRadius), _defineProperty(_ref3, "marginBottom", spacing.menuGutter), _defineProperty(_ref3, "marginTop", spacing.menuGutter), _defineProperty(_ref3, "backgroundColor", "var(--ds-surface-overlay, white)"), _defineProperty(_ref3, "boxShadow", "var(--ds-shadow-overlay, 0 0 0 1px hsl(0deg 0% 0% / 10%), 0 4px 11px hsl(0deg 0% 0% / 10%))"), _ref3;
+  }, alignToControl(placement), '100%'), "position", 'absolute'), "width", '100%'), "zIndex", 1), "borderRadius", "var(--ds-border-radius, 4px)"), "marginBottom", "var(--ds-space-100, 8px)"), "marginTop", "var(--ds-space-100, 8px)"), "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%))");
 };
 var PortalPlacementContext = /*#__PURE__*/createContext(null);
 
@@ -213,8 +214,7 @@ export var MenuPlacer = function MenuPlacer(props) {
     maxMenuHeight = props.maxMenuHeight,
     menuPlacement = props.menuPlacement,
     menuPosition = props.menuPosition,
-    menuShouldScrollIntoView = props.menuShouldScrollIntoView,
-    theme = props.theme;
+    menuShouldScrollIntoView = props.menuShouldScrollIntoView;
   var _ref4 = useContext(PortalPlacementContext) || {},
     setPortalPlacement = _ref4.setPortalPlacement;
   var ref = useRef(null);
@@ -226,7 +226,8 @@ export var MenuPlacer = function MenuPlacer(props) {
     _useState4 = _slicedToArray(_useState3, 2),
     placement = _useState4[0],
     setPlacement = _useState4[1];
-  var controlHeight = theme.spacing.controlHeight;
+  // The minimum height of the control
+  var controlHeight = 38;
   useLayoutEffect(function () {
     var menuEl = ref.current;
     if (!menuEl) {
@@ -309,13 +310,10 @@ export var MenuList = function MenuList(props) {
 // ==============================
 
 var noticeCSS = function noticeCSS(_ref6) {
-  var _ref6$theme = _ref6.theme,
-    baseUnit = _ref6$theme.spacing.baseUnit,
-    colors = _ref6$theme.colors;
+  _objectDestructuringEmpty(_ref6);
   return {
     textAlign: 'center',
-    color: colors.neutral40,
-    padding: "".concat(baseUnit * 2, "px ").concat(baseUnit * 3, "px")
+    padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)")
   };
 };
 export var noOptionsMessageCSS = noticeCSS;
@@ -335,7 +333,9 @@ export var NoOptionsMessage = function NoOptionsMessage(_ref7) {
   }), {
     // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
     role: "option"
-  }, innerProps), children);
+  }, innerProps), jsx(Text, {
+    color: "color.text.subtle"
+  }, children));
 };
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
@@ -353,7 +353,9 @@ export var LoadingMessage = function LoadingMessage(_ref8) {
   }), innerProps, {
     // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
     role: "option"
-  }), children);
+  }), jsx(Text, {
+    color: "color.text.subtle"
+  }, children));
 };
 
 // ==============================

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

@@ -7,17 +7,15 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * @jsx jsx
  */
 
-import { jsx } from '@emotion/react';
+import { css, jsx } from '@emotion/react';
+import LegacySelectClearIcon from '@atlaskit/icon/glyph/select-clear';
+import CrossIcon from '@atlaskit/icon/utility/cross';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Inline, xcss } from '@atlaskit/primitives';
 import { getStyleProps } from '../utils';
-import { CrossIcon } from './indicators';
 export var multiValueCSS = function multiValueCSS(_ref) {
   var isDisabled = _ref.isDisabled,
-    isFocused = _ref.isFocused,
-    _ref$theme = _ref.theme,
-    spacing = _ref$theme.spacing,
-    borderRadius = _ref$theme.borderRadius,
-    colors = _ref$theme.colors;
+    isFocused = _ref.isFocused;
   var backgroundColor;
   var color;
   if (isDisabled) {
@@ -128,14 +126,52 @@ export var MultiValueContainer = MultiValueGeneric;
 
 // eslint-disable-next-line @repo/internal/react/require-jsdoc
 export var MultiValueLabel = MultiValueGeneric;
+var disabledStyles = css({
+  display: 'none'
+});
+var enabledStyles = css({
+  display: 'inherit'
+});
+var iconWrapperStyles = xcss({
+  padding: 'space.025'
+});
+var renderIcon = function renderIcon() {
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (fg('platform-component-visual-refresh')) {
+    return jsx(CrossIcon, {
+      label: "Clear",
+      color: "currentColor"
+    });
+  }
+
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+  if (fg('platform-visual-refresh-icons-legacy-facade')) {
+    return jsx(Inline, {
+      xcss: iconWrapperStyles
+    }, jsx(CrossIcon, {
+      label: "Clear",
+      color: "currentColor"
+    }));
+  }
+  return (
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    jsx(LegacySelectClearIcon, {
+      label: "Clear",
+      primaryColor: "transparent",
+      size: "small",
+      secondaryColor: "inherit"
+    })
+  );
+};
 export function MultiValueRemove(_ref5) {
-  var children = _ref5.children,
+  var isDisabled = _ref5.isDisabled,
     innerProps = _ref5.innerProps;
   return jsx("div", _extends({
     role: "button"
-  }, innerProps), children || jsx(CrossIcon, {
-    size: 14
-  }));
+  }, innerProps), jsx("div", {
+    css: isDisabled ? disabledStyles : enabledStyles,
+    "data-testid": isDisabled ? 'hide-clear-icon' : 'show-clear-icon'
+  }, renderIcon()));
 }
 var MultiValue = function MultiValue(props) {
   var children = props.children,
@@ -168,6 +204,7 @@ var MultiValue = function MultiValue(props) {
     })), {}, {
       'aria-label': "Remove ".concat(children || 'option')
     }, removeProps),
+    isDisabled: isDisabled,
     selectProps: selectProps
   }));
 };

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

@@ -7,8 +7,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { jsx } from '@emotion/react';
 import { getStyleProps } from '../utils';
 export var css = function css(_ref) {
-  var isDisabled = _ref.isDisabled,
-    spacing = _ref.theme.spacing;
+  var isDisabled = _ref.isDisabled;
   return {
     label: 'singleValue',
     gridArea: '1 / 1 / 2 / 3',

package/dist/esm/index.js

@@ -1,7 +1,6 @@
 import useStateManager from './use-state-manager';
 export { default } from './state-manager';
 export { mergeStyles } from './styles';
-export { defaultTheme } from './theme';
 export { createFilter } from './filters';
 export { components } from './components';
 export { useStateManager };