@atlaskit/select 16.2.3 → 16.3.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/select
 
+## 16.3.1
+
+### Patch Changes
+
+- [`1cd0d824b3c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1cd0d824b3c) - NO-ISSUE Add basic memoization on CheckboxSelect and RadioSelect to avoid unnecessary re-renders with otherwise static references.
+
+## 16.3.0
+
+### Minor Changes
+
+- [`6e51e0d5358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6e51e0d5358) - [ux] update border width from 2px to 1px and add 1px box-shadow when focus or error
+
 ## 16.2.3
 
 ### Patch Changes

package/dist/cjs/CheckboxSelect.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,24 +9,29 @@ exports.default = void 0;
 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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Select = _interopRequireDefault(require("./Select"));
 var _inputOptions = require("./components/input-options");
 var _excluded = ["components"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var CheckboxSelect = function CheckboxSelect(_ref) {
+var CheckboxSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
   var components = _ref.components,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var temp = _objectSpread(_objectSpread({}, components), {}, {
-    Option: _inputOptions.CheckboxOption
-  });
+  var mergedComponents = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, components), {}, {
+      Option: _inputOptions.CheckboxOption
+    });
+  }, [components]);
   return /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
-    isMulti: true,
-    components: temp
-  }, props));
-};
+    isMulti: true
+  }, props, {
+    components: mergedComponents
+  }));
+});
 var _default = CheckboxSelect;
 exports.default = _default;

package/dist/cjs/RadioSelect.js

@@ -1,6 +1,7 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -8,21 +9,26 @@ exports.default = void 0;
 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 = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _Select = _interopRequireDefault(require("./Select"));
 var _inputOptions = require("./components/input-options");
 var _excluded = ["components"];
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-var RadioSelect = function RadioSelect(_ref) {
+var RadioSelect = /*#__PURE__*/_react.default.memo(function (_ref) {
   var components = _ref.components,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var mergedComponents = (0, _react.useMemo)(function () {
+    return _objectSpread(_objectSpread({}, components), {}, {
+      Option: _inputOptions.RadioOption
+    });
+  }, [components]);
   return /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({}, props, {
     isMulti: false,
-    components: _objectSpread(_objectSpread({}, components), {}, {
-      Option: _inputOptions.RadioOption
-    })
+    components: mergedComponents
   }));
-};
+});
 var _default = RadioSelect;
 exports.default = _default;

package/dist/cjs/Select.js

@@ -9,7 +9,7 @@ var _reactSelect = _interopRequireDefault(require("react-select"));
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _createSelect = _interopRequireDefault(require("./createSelect"));
 var packageName = "@atlaskit/select";
-var packageVersion = "16.2.3";
+var packageVersion = "16.3.1";
 var SelectWithoutAnalytics = (0, _createSelect.default)(_reactSelect.default);
 exports.SelectWithoutAnalytics = SelectWithoutAnalytics;
 var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');

package/dist/cjs/styles.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = baseStyles;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _constants = require("@atlaskit/theme/constants");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; } // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
@@ -35,7 +36,7 @@ function baseStyles(validationState) {
     control: function control(css, _ref2) {
       var isFocused = _ref2.isFocused,
         isDisabled = _ref2.isDisabled;
-      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N20, ")");
+      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N20, ")");
       var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input, ".concat(_colors.N20, ")");
       var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(_colors.N0, ")") : "var(--ds-background-input-hovered, ".concat(_colors.N30, ")");
       if (isDisabled) {
@@ -48,7 +49,7 @@ function baseStyles(validationState) {
       if (validationState === 'success') {
         borderColor = "var(--ds-border-success, ".concat(_colors.G400, ")");
       }
-      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat(_colors.N30, ")");
+      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(_colors.B100, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N30, ")");
       if (validationState === 'error') {
         borderColorHover = "var(--ds-border-danger, ".concat(_colors.R400, ")");
       }
@@ -67,15 +68,20 @@ function baseStyles(validationState) {
         backgroundColorHover = 'transparent';
         borderColorHover = 'transparent';
       }
-      return _objectSpread(_objectSpread({}, css), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, css), {}, {
         // 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',
         borderRadius: "var(--ds-radius-100, 3px)",
-        borderWidth: "var(--ds-width-100, 2px)",
-        boxShadow: 'none',
+        borderWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
+        boxShadow: 'none'
+      }, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') && {
+        '&:focus-within': {
+          boxShadow: "inset 0 0 0 1px ".concat(borderColor)
+        }
+      }), {}, {
         minHeight: isCompact ? (0, _constants.gridSize)() * 4 : (0, _constants.gridSize)() * 5,
         padding: 0,
         transition: "background-color ".concat(transitionDuration, " ease-in-out,\n        border-color ").concat(transitionDuration, " ease-in-out"),

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.2.3",
+	"version": "16.3.1",
 	"sideEffects": false
 }

package/dist/es2019/CheckboxSelect.js

@@ -1,20 +1,21 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import Select from './Select';
 import { CheckboxOption } from './components/input-options';
-const CheckboxSelect = ({
+const CheckboxSelect = /*#__PURE__*/React.memo(({
   components,
   ...props
 }) => {
-  const temp = {
+  const mergedComponents = useMemo(() => ({
     ...components,
     Option: CheckboxOption
-  };
+  }), [components]);
   return /*#__PURE__*/React.createElement(Select, _extends({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
-    isMulti: true,
-    components: temp
-  }, props));
-};
+    isMulti: true
+  }, props, {
+    components: mergedComponents
+  }));
+});
 export default CheckboxSelect;

package/dist/es2019/RadioSelect.js

@@ -1,15 +1,18 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React from 'react';
+import React, { useMemo } from 'react';
 import Select from './Select';
 import { RadioOption } from './components/input-options';
-const RadioSelect = ({
+const RadioSelect = /*#__PURE__*/React.memo(({
   components,
   ...props
-}) => /*#__PURE__*/React.createElement(Select, _extends({}, props, {
-  isMulti: false,
-  components: {
+}) => {
+  const mergedComponents = useMemo(() => ({
     ...components,
     Option: RadioOption
-  }
-}));
+  }), [components]);
+  return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
+    isMulti: false,
+    components: mergedComponents
+  }));
+});
 export default RadioSelect;

package/dist/es2019/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 const packageName = "@atlaskit/select";
-const packageVersion = "16.2.3";
+const packageVersion = "16.3.1";
 export const SelectWithoutAnalytics = createSelect(Select);
 const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/es2019/styles.js

@@ -1,6 +1,7 @@
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize, fontFamily } from '@atlaskit/theme/constants';
-import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
 const BORDER_WIDTH = 2;
 const ICON_PADDING = 2;
 const paddingExcludingBorder = gridSize() - BORDER_WIDTH;
@@ -24,7 +25,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       isFocused,
       isDisabled
     }) => {
-      let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N20})`;
+      let borderColor = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N20})`;
       let backgroundColor = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input, ${N20})`;
       let backgroundColorHover = isFocused ? `var(--ds-background-input-pressed, ${N0})` : `var(--ds-background-input-hovered, ${N30})`;
       if (isDisabled) {
@@ -37,7 +38,7 @@ export default function baseStyles(validationState, isCompact = false, appearanc
       if (validationState === 'success') {
         borderColor = `var(--ds-border-success, ${G400})`;
       }
-      let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${N30})`;
+      let borderColorHover = isFocused ? `var(--ds-border-focused, ${B100})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N30})`;
       if (validationState === 'error') {
         borderColorHover = `var(--ds-border-danger, ${R400})`;
       }
@@ -64,8 +65,13 @@ export default function baseStyles(validationState, isCompact = false, appearanc
         borderColor,
         borderStyle: 'solid',
         borderRadius: "var(--ds-radius-100, 3px)",
-        borderWidth: "var(--ds-width-100, 2px)",
+        borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
         boxShadow: 'none',
+        ...(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && {
+          '&:focus-within': {
+            boxShadow: `inset 0 0 0 1px ${borderColor}`
+          }
+        }),
         minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
         padding: 0,
         transition: `background-color ${transitionDuration} ease-in-out,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.2.3",
+	"version": "16.3.1",
 	"sideEffects": false
 }

package/dist/esm/CheckboxSelect.js

@@ -4,20 +4,23 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["components"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
+import React, { useMemo } from 'react';
 import Select from './Select';
 import { CheckboxOption } from './components/input-options';
-var CheckboxSelect = function CheckboxSelect(_ref) {
+var CheckboxSelect = /*#__PURE__*/React.memo(function (_ref) {
   var components = _ref.components,
     props = _objectWithoutProperties(_ref, _excluded);
-  var temp = _objectSpread(_objectSpread({}, components), {}, {
-    Option: CheckboxOption
-  });
+  var mergedComponents = useMemo(function () {
+    return _objectSpread(_objectSpread({}, components), {}, {
+      Option: CheckboxOption
+    });
+  }, [components]);
   return /*#__PURE__*/React.createElement(Select, _extends({
     closeMenuOnSelect: false,
     hideSelectedOptions: false,
-    isMulti: true,
-    components: temp
-  }, props));
-};
+    isMulti: true
+  }, props, {
+    components: mergedComponents
+  }));
+});
 export default CheckboxSelect;

package/dist/esm/RadioSelect.js

@@ -4,17 +4,20 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProper
 var _excluded = ["components"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-import React from 'react';
+import React, { useMemo } from 'react';
 import Select from './Select';
 import { RadioOption } from './components/input-options';
-var RadioSelect = function RadioSelect(_ref) {
+var RadioSelect = /*#__PURE__*/React.memo(function (_ref) {
   var components = _ref.components,
     props = _objectWithoutProperties(_ref, _excluded);
+  var mergedComponents = useMemo(function () {
+    return _objectSpread(_objectSpread({}, components), {}, {
+      Option: RadioOption
+    });
+  }, [components]);
   return /*#__PURE__*/React.createElement(Select, _extends({}, props, {
     isMulti: false,
-    components: _objectSpread(_objectSpread({}, components), {}, {
-      Option: RadioOption
-    })
+    components: mergedComponents
   }));
-};
+});
 export default RadioSelect;

package/dist/esm/Select.js

@@ -2,7 +2,7 @@ import Select from 'react-select';
 import { withAnalyticsEvents, withAnalyticsContext, createAndFireEvent } from '@atlaskit/analytics-next';
 import createSelect from './createSelect';
 var packageName = "@atlaskit/select";
-var packageVersion = "16.2.3";
+var packageVersion = "16.3.1";
 export var SelectWithoutAnalytics = createSelect(Select);
 var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
 export default withAnalyticsContext({

package/dist/esm/styles.js

@@ -3,7 +3,8 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize, fontFamily } from '@atlaskit/theme/constants';
-import { B100, B400, B50, G400, N0, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B400, B50, G400, N0, N100, N20, N200, N30, N300, N40, N500, N70, N800, R400, R75 } from '@atlaskit/theme/colors';
 var BORDER_WIDTH = 2;
 var ICON_PADDING = 2;
 var paddingExcludingBorder = gridSize() - BORDER_WIDTH;
@@ -29,7 +30,7 @@ export default function baseStyles(validationState) {
     control: function control(css, _ref2) {
       var isFocused = _ref2.isFocused,
         isDisabled = _ref2.isDisabled;
-      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N20, ")");
+      var borderColor = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N20, ")");
       var backgroundColor = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input, ".concat(N20, ")");
       var backgroundColorHover = isFocused ? "var(--ds-background-input-pressed, ".concat(N0, ")") : "var(--ds-background-input-hovered, ".concat(N30, ")");
       if (isDisabled) {
@@ -42,7 +43,7 @@ export default function baseStyles(validationState) {
       if (validationState === 'success') {
         borderColor = "var(--ds-border-success, ".concat(G400, ")");
       }
-      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(N30, ")");
+      var borderColorHover = isFocused ? "var(--ds-border-focused, ".concat(B100, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N30, ")");
       if (validationState === 'error') {
         borderColorHover = "var(--ds-border-danger, ".concat(R400, ")");
       }
@@ -61,15 +62,20 @@ export default function baseStyles(validationState) {
         backgroundColorHover = 'transparent';
         borderColorHover = 'transparent';
       }
-      return _objectSpread(_objectSpread({}, css), {}, {
+      return _objectSpread(_objectSpread(_objectSpread({}, css), {}, {
         // 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',
         borderRadius: "var(--ds-radius-100, 3px)",
-        borderWidth: "var(--ds-width-100, 2px)",
-        boxShadow: 'none',
+        borderWidth: getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? "var(--ds-width-050, 1px)" : "var(--ds-width-100, 2px)",
+        boxShadow: 'none'
+      }, getBooleanFF('platform.design-system-team.update-border-input_ff9l1') && {
+        '&:focus-within': {
+          boxShadow: "inset 0 0 0 1px ".concat(borderColor)
+        }
+      }), {}, {
         minHeight: isCompact ? gridSize() * 4 : gridSize() * 5,
         padding: 0,
         transition: "background-color ".concat(transitionDuration, " ease-in-out,\n        border-color ").concat(transitionDuration, " ease-in-out"),

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/select",
-	"version": "16.2.3",
+	"version": "16.3.1",
 	"sideEffects": false
 }

package/dist/types/CheckboxSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SelectProps, OptionType } from './types';
-declare const CheckboxSelect: ({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element;
+declare const CheckboxSelect: React.MemoExoticComponent<({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element>;
 export default CheckboxSelect;

package/dist/types/RadioSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SelectProps, OptionType } from './types';
-declare const RadioSelect: ({ components, ...props }: SelectProps<OptionType>) => JSX.Element;
+declare const RadioSelect: React.MemoExoticComponent<({ components, ...props }: SelectProps<OptionType>) => JSX.Element>;
 export default RadioSelect;

package/dist/types-ts4.5/CheckboxSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SelectProps, OptionType } from './types';
-declare const CheckboxSelect: ({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element;
+declare const CheckboxSelect: React.MemoExoticComponent<({ components, ...props }: SelectProps<OptionType, true>) => JSX.Element>;
 export default CheckboxSelect;

package/dist/types-ts4.5/RadioSelect.d.ts

@@ -1,4 +1,4 @@
-/// <reference types="react" />
+import React from 'react';
 import { SelectProps, OptionType } from './types';
-declare const RadioSelect: ({ components, ...props }: SelectProps<OptionType>) => JSX.Element;
+declare const RadioSelect: React.MemoExoticComponent<({ components, ...props }: SelectProps<OptionType>) => JSX.Element>;
 export default RadioSelect;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/select",
-  "version": "16.2.3",
+  "version": "16.3.1",
   "description": "Select allows users to make a single selection or multiple selections from a list of options.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,6 +40,7 @@
   "dependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/icon": "^21.12.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.4.0",
@@ -69,13 +70,13 @@
     "@atlaskit/form": "^8.11.0",
     "@atlaskit/logo": "^13.14.0",
     "@atlaskit/modal-dialog": "^12.5.0",
-    "@atlaskit/radio": "^5.5.0",
+    "@atlaskit/radio": "^5.6.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/tooltip": "^17.8.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@emotion/styled": "^11.0.0",
     "@testing-library/react": "^12.1.5",
     "@testing-library/user-event": "^14.4.3",
@@ -99,6 +100,11 @@
       ]
     }
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.update-border-input_ff9l1": {
+      "type": "boolean"
+    }
+  },
   "homepage": "https://atlassian.design/components/select/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }