@atlaskit/select 18.5.3 → 18.6.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/select
 
+## 18.6.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
+
+## 18.6.0
+
+### Minor Changes
+
+- [#167480](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167480)
+  [`e78013c5d716b`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e78013c5d716b) -
+  Update checkbox and radio select to match new icon styles behind feature flag.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 18.5.3
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -25,7 +25,6 @@ var _useId = require("@atlaskit/ds-lib/use-id");
 var _reactSelect = require("@atlaskit/react-select");
 var _colors = require("@atlaskit/theme/colors");
 var _Select = _interopRequireDefault(require("../Select"));
-var _styles = _interopRequireDefault(require("../styles"));
 var _groupedOptionsAnnouncement = require("../utils/grouped-options-announcement");
 var _components = require("./components");
 var _excluded = ["footer", "label", "maxMenuWidth", "minMenuWidth", "placeholder", "target", "testId", "onMenuOpen", "onMenuClose"];
@@ -90,13 +89,13 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "targetRef", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowClick", null);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "unbindWindowKeydown", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", (0, _reactSelect.mergeStyles)((0, _styles.default)(_this.props.validationState || (_this.props.isInvalid ? 'error' : 'default'), _this.props.spacing === 'compact', 'default'), {
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultStyles", {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(_colors.N80, ")")
         });
       }
-    }));
+    });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isOpenControlled", _this.props.isOpen !== undefined);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {

package/dist/cjs/Select.js

@@ -11,7 +11,7 @@ var _createSelect = _interopRequireDefault(require("./createSelect"));
 /* eslint-disable @repo/internal/react/require-jsdoc */
 
 var packageName = "@atlaskit/select";
-var packageVersion = "18.5.3";
+var packageVersion = "18.6.1";
 var SelectWithoutAnalytics = exports.SelectWithoutAnalytics = (0, _createSelect.default)(_async.default);
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
 var Select = (0, _analyticsNext.withAnalyticsContext)({

package/dist/cjs/components/input-options.js

@@ -19,6 +19,8 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
 var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
+var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["getStyles", "Icon", "children", "innerProps", "innerRef"];
 function _createSuper(t) { var r = _isNativeReflectConstruct(); return function () { var e, o = (0, _getPrototypeOf2.default)(t); if (r) { var s = (0, _getPrototypeOf2.default)(this).constructor; e = Reflect.construct(o, arguments, s); } else e = o.apply(this, arguments); return (0, _possibleConstructorReturn2.default)(this, e); }; }
@@ -238,15 +240,59 @@ var ControlOption = /*#__PURE__*/function (_Component) {
   }]);
   return ControlOption;
 }(_react.Component);
+var NewCheckboxIcon = function NewCheckboxIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react2.jsx)(_svg.default, props, (0, _react2.jsx)("g", {
+      fillRule: "evenodd"
+    }, (0, _react2.jsx)("rect", {
+      x: "5.5",
+      y: "5.5",
+      width: "13",
+      height: "13",
+      rx: "1.5",
+      fill: "currentColor"
+    }), (0, _react2.jsx)("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
+      fill: "inherit"
+    })))
+  );
+};
+var NewRadioIcon = function NewRadioIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _react2.jsx)(_svg.default, props, (0, _react2.jsx)("g", {
+      fillRule: "evenodd"
+    }, (0, _react2.jsx)("circle", {
+      cx: "12",
+      cy: "12",
+      r: "6.75",
+      fill: "currentColor",
+      strokeWidth: "1.5"
+    }), (0, _react2.jsx)("circle", {
+      cx: "12",
+      cy: "12",
+      r: "3",
+      fill: "inherit"
+    })))
+  );
+};
+
 /**
  * __Checkbox option__
  */
 var CheckboxOption = exports.CheckboxOption = function CheckboxOption(props
-// TODO https://product-fabric.atlassian.net/browse/DSP-20768
-// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
+// ): JSX.Element => <ControlOption<OptionT, true> Icon={CheckboxIcon} {...props} />;
 ) {
   return (0, _react2.jsx)(ControlOption, (0, _extends2.default)({
-    Icon: _checkbox.default
+    Icon:
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+    (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? NewCheckboxIcon :
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    _checkbox.default
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
 
@@ -258,7 +304,12 @@ var RadioOption = exports.RadioOption = function RadioOption(props) {
     // TODO https://product-fabric.atlassian.net/browse/DSP-20769
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
     (0, _react2.jsx)(ControlOption, (0, _extends2.default)({
-      Icon: _radio.default
+      Icon:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+      (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && (0, _platformFeatureFlags.fg)('platform-icon-control-migration') ? NewRadioIcon :
+      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+      _radio.default
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, props))
   );
 };

package/dist/cjs/createSelect.js

@@ -10,29 +10,22 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
-var _reactSelect = require("@atlaskit/react-select");
 var _components = require("./components");
 var _inputAriaDescribedby = require("./components/input-aria-describedby");
 var _noOptions = require("./components/no-options");
-var _styles = _interopRequireDefault(require("./styles"));
 var _groupedOptionsAnnouncement = require("./utils/grouped-options-announcement");
-var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"]; // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+var _excluded = ["ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"]; // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 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 createSelect(WrappedComponent) {
   var AtlaskitSelect = /*#__PURE__*/(0, _react.forwardRef)(function AtlaskitSelect(props, forwardedRef) {
-    var appearance = props.appearance,
-      ariaLiveMessages = props.ariaLiveMessages,
+    var ariaLiveMessages = props.ariaLiveMessages,
       componentsProp = props.components,
       isInvalid = props.isInvalid,
       _props$onClickPrevent = props.onClickPreventDefault,
       onClickPreventDefault = _props$onClickPrevent === void 0 ? true : _props$onClickPrevent,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
-      _props$styles = props.styles,
-      styles = _props$styles === void 0 ? {} : _props$styles,
       _props$tabSelectsValu = props.tabSelectsValue,
       tabSelectsValue = _props$tabSelectsValu === void 0 ? false : _props$tabSelectsValu,
       _props$validationStat = props.validationState,
@@ -64,7 +57,6 @@ function createSelect(WrappedComponent) {
         }
       }
     }, [descriptionId, isSearchable]);
-    var isCompact = spacing === 'compact';
 
     /**
      * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
@@ -96,16 +88,9 @@ function createSelect(WrappedComponent) {
       }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
       tabSelectsValue: tabSelectsValue,
       onClickPreventDefault: onClickPreventDefault,
-      isInvalid: isInvalid
+      isInvalid: isInvalid || validationState === 'error'
     }, restProps, {
       components: components
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      styles: (0, _reactSelect.mergeStyles)(
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      (0, _styles.default)(
-      // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-      typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
       // indicates react-select to be async by default using the base Select component
       // so that makers can pass all async props on the base select to async load options.
       ,

package/dist/es2019/PopupSelect/PopupSelect.js

@@ -11,7 +11,6 @@ import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
 import Select from '../Select';
-import baseStyles from '../styles';
 import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
 import { defaultComponents, DummyControl, MenuDialog } from './components';
 /**
@@ -58,12 +57,12 @@ export default class PopupSelect extends PureComponent {
     _defineProperty(this, "targetRef", null);
     _defineProperty(this, "unbindWindowClick", null);
     _defineProperty(this, "unbindWindowKeydown", null);
-    _defineProperty(this, "defaultStyles", mergeStyles(baseStyles(this.props.validationState || (this.props.isInvalid ? 'error' : 'default'), this.props.spacing === 'compact', 'default'), {
+    _defineProperty(this, "defaultStyles", {
       groupHeading: provided => ({
         ...provided,
         color: `var(--ds-text-subtlest, ${N80})`
       })
-    }));
+    });
     _defineProperty(this, "isOpenControlled", this.props.isOpen !== undefined);
     _defineProperty(this, "defaultOpenState", this.isOpenControlled ? this.props.isOpen : this.props.defaultIsOpen);
     _defineProperty(this, "state", {

package/dist/es2019/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "18.5.3";
+const packageVersion = "18.6.1";
 export const SelectWithoutAnalytics = createSelect(AsyncSelect);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 const Select = withAnalyticsContext({

package/dist/es2019/components/input-options.js

@@ -9,6 +9,8 @@ import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
+import PrimitiveSVGIcon from '@atlaskit/icon/svg';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
 const getPrimitiveStyles = props => {
   const {
@@ -221,15 +223,52 @@ class ControlOption extends Component {
     );
   }
 }
+const NewCheckboxIcon = props =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(PrimitiveSVGIcon, props, jsx("g", {
+  fillRule: "evenodd"
+}, jsx("rect", {
+  x: "5.5",
+  y: "5.5",
+  width: "13",
+  height: "13",
+  rx: "1.5",
+  fill: "currentColor"
+}), jsx("path", {
+  fillRule: "evenodd",
+  clipRule: "evenodd",
+  d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
+  fill: "inherit"
+})));
+const NewRadioIcon = props =>
+// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(PrimitiveSVGIcon, props, jsx("g", {
+  fillRule: "evenodd"
+}, jsx("circle", {
+  cx: "12",
+  cy: "12",
+  r: "6.75",
+  fill: "currentColor",
+  strokeWidth: "1.5"
+}), jsx("circle", {
+  cx: "12",
+  cy: "12",
+  r: "3",
+  fill: "inherit"
+})));
 
 /**
  * __Checkbox option__
  */
 export const CheckboxOption = (props
-// TODO https://product-fabric.atlassian.net/browse/DSP-20768
-// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
+// ): JSX.Element => <ControlOption<OptionT, true> Icon={CheckboxIcon} {...props} />;
 ) => jsx(ControlOption, _extends({
-  Icon: CheckboxIcon
+  Icon:
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+  fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewCheckboxIcon :
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+  CheckboxIcon
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));
 
 /**
@@ -239,5 +278,10 @@ export const RadioOption = props =>
 // TODO https://product-fabric.atlassian.net/browse/DSP-20769
 // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
 jsx(ControlOption, _extends({
-  Icon: RadioIcon
+  Icon:
+  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+  fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewRadioIcon :
+  // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+  RadioIcon
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
 }, props));

package/dist/es2019/createSelect.js

@@ -1,23 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { mergeStyles } from '@atlaskit/react-select';
 import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';
-import baseStyles from './styles';
 import { isOptionsGrouped, onFocus } from './utils/grouped-options-announcement';
 export default function createSelect(WrappedComponent) {
   const AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
     const {
-      appearance,
       ariaLiveMessages,
       components: componentsProp,
       isInvalid,
       // TODO: set to true when cleaning up validationState prop so it has a default value
       onClickPreventDefault = true,
-      spacing = 'default',
-      styles = {},
       tabSelectsValue = false,
       validationState = 'default',
       ...restProps
@@ -47,7 +42,6 @@ export default function createSelect(WrappedComponent) {
         }
       }
     }, [descriptionId, isSearchable]);
-    const isCompact = spacing === 'compact';
 
     /**
      * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
@@ -78,16 +72,9 @@ export default function createSelect(WrappedComponent) {
       },
       tabSelectsValue: tabSelectsValue,
       onClickPreventDefault: onClickPreventDefault,
-      isInvalid: isInvalid
+      isInvalid: isInvalid || validationState === 'error'
     }, restProps, {
       components: components
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      styles: mergeStyles(
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      baseStyles(
-      // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-      typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
       // indicates react-select to be async by default using the base Select component
       // so that makers can pass all async props on the base select to async load options.
       ,

package/dist/esm/PopupSelect/PopupSelect.js

@@ -23,7 +23,6 @@ import { IdProvider } from '@atlaskit/ds-lib/use-id';
 import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
 import Select from '../Select';
-import baseStyles from '../styles';
 import { countAllOptions, isOptionsGrouped, onFocus } from '../utils/grouped-options-announcement';
 import { defaultComponents, DummyControl, MenuDialog } from './components';
 /**
@@ -81,13 +80,13 @@ var PopupSelect = /*#__PURE__*/function (_PureComponent) {
     _defineProperty(_assertThisInitialized(_this), "targetRef", null);
     _defineProperty(_assertThisInitialized(_this), "unbindWindowClick", null);
     _defineProperty(_assertThisInitialized(_this), "unbindWindowKeydown", null);
-    _defineProperty(_assertThisInitialized(_this), "defaultStyles", mergeStyles(baseStyles(_this.props.validationState || (_this.props.isInvalid ? 'error' : 'default'), _this.props.spacing === 'compact', 'default'), {
+    _defineProperty(_assertThisInitialized(_this), "defaultStyles", {
       groupHeading: function groupHeading(provided) {
         return _objectSpread(_objectSpread({}, provided), {}, {
           color: "var(--ds-text-subtlest, ".concat(N80, ")")
         });
       }
-    }));
+    });
     _defineProperty(_assertThisInitialized(_this), "isOpenControlled", _this.props.isOpen !== undefined);
     _defineProperty(_assertThisInitialized(_this), "defaultOpenState", _this.isOpenControlled ? _this.props.isOpen : _this.props.defaultIsOpen);
     _defineProperty(_assertThisInitialized(_this), "state", {

package/dist/esm/Select.js

@@ -3,7 +3,7 @@ import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@
 import AsyncSelect from '@atlaskit/react-select/async';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "18.5.3";
+var packageVersion = "18.6.1";
 export var SelectWithoutAnalytics = createSelect(AsyncSelect);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 var Select = withAnalyticsContext({

package/dist/esm/components/input-options.js

@@ -22,6 +22,8 @@ import { Component } from 'react';
 import { css, jsx } from '@emotion/react';
 import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import RadioIcon from '@atlaskit/icon/glyph/radio';
+import PrimitiveSVGIcon from '@atlaskit/icon/svg';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B300, B400, B75, N0, N100, N20, N20A, N30, N70 } from '@atlaskit/theme/colors';
 var getPrimitiveStyles = function getPrimitiveStyles(props) {
   var cx = props.cx,
@@ -233,15 +235,59 @@ var ControlOption = /*#__PURE__*/function (_Component) {
   }]);
   return ControlOption;
 }(Component);
+var NewCheckboxIcon = function NewCheckboxIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(PrimitiveSVGIcon, props, jsx("g", {
+      fillRule: "evenodd"
+    }, jsx("rect", {
+      x: "5.5",
+      y: "5.5",
+      width: "13",
+      height: "13",
+      rx: "1.5",
+      fill: "currentColor"
+    }), jsx("path", {
+      fillRule: "evenodd",
+      clipRule: "evenodd",
+      d: "M16.3262 9.48011L15.1738 8.51984L10.75 13.8284L8.82616 11.5198L7.67383 12.4801L10.1738 15.4801C10.3163 15.6511 10.5274 15.75 10.75 15.75C10.9726 15.75 11.1837 15.6511 11.3262 15.4801L16.3262 9.48011Z",
+      fill: "inherit"
+    })))
+  );
+};
+var NewRadioIcon = function NewRadioIcon(props) {
+  return (
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(PrimitiveSVGIcon, props, jsx("g", {
+      fillRule: "evenodd"
+    }, jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "6.75",
+      fill: "currentColor",
+      strokeWidth: "1.5"
+    }), jsx("circle", {
+      cx: "12",
+      cy: "12",
+      r: "3",
+      fill: "inherit"
+    })))
+  );
+};
+
 /**
  * __Checkbox option__
  */
 export var CheckboxOption = function CheckboxOption(props
-// TODO https://product-fabric.atlassian.net/browse/DSP-20768
-// eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
+// ): JSX.Element => <ControlOption<OptionT, true> Icon={CheckboxIcon} {...props} />;
 ) {
   return jsx(ControlOption, _extends({
-    Icon: CheckboxIcon
+    Icon:
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+    fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewCheckboxIcon :
+    // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+    CheckboxIcon
+    // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   }, props));
 };
 
@@ -253,7 +299,12 @@ export var RadioOption = function RadioOption(props) {
     // TODO https://product-fabric.atlassian.net/browse/DSP-20769
     // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons, @repo/internal/react/no-unsafe-spread-props
     jsx(ControlOption, _extends({
-      Icon: RadioIcon
+      Icon:
+      // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix, @atlaskit/platform/no-preconditioning
+      fg('platform-visual-refresh-icons') && fg('platform-icon-control-migration') ? NewRadioIcon :
+      // eslint-disable-next-line @atlaskit/design-system/no-legacy-icons
+      RadioIcon
+      // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
     }, props))
   );
 };

package/dist/esm/createSelect.js

@@ -1,29 +1,22 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["appearance", "ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "spacing", "styles", "tabSelectsValue", "validationState"];
+var _excluded = ["ariaLiveMessages", "components", "isInvalid", "onClickPreventDefault", "tabSelectsValue", "validationState"];
 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; }
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef } from 'react';
-import { mergeStyles } from '@atlaskit/react-select';
 import { ClearIndicator, DropdownIndicator, IndicatorSeparator, LoadingIndicator, MultiValueRemove } from './components';
 import { Input } from './components/input-aria-describedby';
 import { NoOptionsMessage } from './components/no-options';
-import baseStyles from './styles';
 import { isOptionsGrouped, onFocus as _onFocus } from './utils/grouped-options-announcement';
 export default function createSelect(WrappedComponent) {
   var AtlaskitSelect = /*#__PURE__*/forwardRef(function AtlaskitSelect(props, forwardedRef) {
-    var appearance = props.appearance,
-      ariaLiveMessages = props.ariaLiveMessages,
+    var ariaLiveMessages = props.ariaLiveMessages,
       componentsProp = props.components,
       isInvalid = props.isInvalid,
       _props$onClickPrevent = props.onClickPreventDefault,
       onClickPreventDefault = _props$onClickPrevent === void 0 ? true : _props$onClickPrevent,
-      _props$spacing = props.spacing,
-      spacing = _props$spacing === void 0 ? 'default' : _props$spacing,
-      _props$styles = props.styles,
-      styles = _props$styles === void 0 ? {} : _props$styles,
       _props$tabSelectsValu = props.tabSelectsValue,
       tabSelectsValue = _props$tabSelectsValu === void 0 ? false : _props$tabSelectsValu,
       _props$validationStat = props.validationState,
@@ -55,7 +48,6 @@ export default function createSelect(WrappedComponent) {
         }
       }
     }, [descriptionId, isSearchable]);
-    var isCompact = spacing === 'compact';
 
     /**
      * The following `useImperativeHandle` hook exists for the sake of backwards compatibility.
@@ -87,16 +79,9 @@ export default function createSelect(WrappedComponent) {
       }, ariaLiveMessages) : _objectSpread({}, ariaLiveMessages),
       tabSelectsValue: tabSelectsValue,
       onClickPreventDefault: onClickPreventDefault,
-      isInvalid: isInvalid
+      isInvalid: isInvalid || validationState === 'error'
     }, restProps, {
       components: components
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      ,
-      styles: mergeStyles(
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      baseStyles(
-      // This will cover both props for invalid state while giving priority to isInvalid. When cleaning up validationState, we can just keep the inner condition.
-      typeof isInvalid !== 'undefined' ? isInvalid ? 'error' : 'default' : validationState, isCompact, appearance || 'default'), styles)
       // indicates react-select to be async by default using the base Select component
       // so that makers can pass all async props on the base select to async load options.
       ,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "18.5.3",
+	"version": "18.6.1",
 	"description": "Select allows users to make a single selection or multiple selections from a list of options.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Select",
-			"category": "Components"
+			"category": "Forms and input"
 		},
 		"runReact18": true
 	},
@@ -42,7 +42,7 @@
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/ds-lib": "^3.2.0",
-		"@atlaskit/icon": "^22.24.0",
+		"@atlaskit/icon": "^22.26.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^13.2.0",
 		"@atlaskit/react-select": "^1.4.0",
@@ -67,9 +67,9 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@af/visual-regression": "*",
-		"@atlaskit/checkbox": "^15.1.0",
+		"@atlaskit/checkbox": "^15.2.0",
 		"@atlaskit/modal-dialog": "^12.17.0",
-		"@atlaskit/radio": "^6.5.0",
+		"@atlaskit/radio": "^6.6.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
@@ -108,6 +108,12 @@
 		"design_system_select-a11y-improvement": {
 			"type": "boolean",
 			"referenceOnly": true
+		},
+		"platform-visual-refresh-icons": {
+			"type": "boolean"
+		},
+		"platform-icon-control-migration": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/select/"