@atlaskit/select 18.5.2 → 18.6.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/select
 
+## 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
+
+- [#167181](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/167181)
+  [`5bc9dc0796474`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5bc9dc0796474) -
+  Remove `react-focus-lock-next` dependency
+- Updated dependencies
+
 ## 18.5.2
 
 ### Patch Changes

package/dist/cjs/PopupSelect/PopupSelect.js

@@ -19,11 +19,9 @@ var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _reactDom = require("react-dom");
 var _reactFocusLock = _interopRequireDefault(require("react-focus-lock"));
-var _reactFocusLockNext = _interopRequireDefault(require("react-focus-lock-next"));
 var _reactPopper = require("react-popper");
 var _shallowEqual = require("shallow-equal");
 var _useId = require("@atlaskit/ds-lib/use-id");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _reactSelect = require("@atlaskit/react-select");
 var _colors = require("@atlaskit/theme/colors");
 var _Select = _interopRequireDefault(require("../Select"));
@@ -52,7 +50,6 @@ var canUseDOM = function canUseDOM() {
 // Class
 // ==============================
 
-var FocusLock = (0, _platformFeatureFlags.fg)('platform_dst_select-bump-react-focus-lock') ? _reactFocusLockNext.default : _reactFocusLock.default;
 var modifiers = [{
   name: 'offset',
   options: {
@@ -419,7 +416,7 @@ var PopupSelect = exports.default = /*#__PURE__*/function (_PureComponent) {
           id: id,
           testId: testId,
           ref: _this.resolveMenuRef(ref)
-        }, /*#__PURE__*/_react.default.createElement(FocusLock, {
+        }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, {
           disabled: !focusLockEnabled,
           returnFocus: true
         }, /*#__PURE__*/_react.default.createElement(_Select.default, (0, _extends2.default)({

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.2";
+var packageVersion = "18.6.0";
 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/es2019/PopupSelect/PopupSelect.js

@@ -4,12 +4,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { PureComponent } from 'react';
 import { bind } from 'bind-event-listener';
 import { createPortal } from 'react-dom';
-import FocusLockOld from 'react-focus-lock';
-import FocusLockNext from 'react-focus-lock-next';
+import FocusLock from 'react-focus-lock';
 import { Manager, Popper, Reference } from 'react-popper';
 import { shallowEqualObjects } from 'shallow-equal';
 import { IdProvider } from '@atlaskit/ds-lib/use-id';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
 import Select from '../Select';
@@ -29,7 +27,6 @@ const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document
 // Class
 // ==============================
 
-const FocusLock = fg('platform_dst_select-bump-react-focus-lock') ? FocusLockNext : FocusLockOld;
 const modifiers = [{
   name: 'offset',
   options: {

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.2";
+const packageVersion = "18.6.0";
 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/esm/PopupSelect/PopupSelect.js

@@ -16,12 +16,10 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 import React, { PureComponent } from 'react';
 import { bind } from 'bind-event-listener';
 import { createPortal } from 'react-dom';
-import FocusLockOld from 'react-focus-lock';
-import FocusLockNext from 'react-focus-lock-next';
+import FocusLock from 'react-focus-lock';
 import { Manager, Popper, Reference } from 'react-popper';
 import { shallowEqualObjects } from 'shallow-equal';
 import { IdProvider } from '@atlaskit/ds-lib/use-id';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { mergeStyles } from '@atlaskit/react-select';
 import { N80 } from '@atlaskit/theme/colors';
 import Select from '../Select';
@@ -43,7 +41,6 @@ var canUseDOM = function canUseDOM() {
 // Class
 // ==============================
 
-var FocusLock = fg('platform_dst_select-bump-react-focus-lock') ? FocusLockNext : FocusLockOld;
 var modifiers = [{
   name: 'offset',
   options: {

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.2";
+var packageVersion = "18.6.0";
 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/types/PopupSelect/PopupSelect.d.ts

@@ -110,10 +110,6 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
-            /**
-             * The maximum width for the popup menu. Can be a number, representing the width in pixels,
-             * or a string containing a CSS length datatype.
-             */
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
             DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
             Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;

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

@@ -110,10 +110,6 @@ export default class PopupSelect<Option = OptionType, IsMulti extends boolean =
         focusLockEnabled: boolean;
         isOpen: boolean;
         mergedComponents: {
-            /**
-             * The maximum width for the popup menu. Can be a number, representing the width in pixels,
-             * or a string containing a CSS length datatype.
-             */
             Control: React.FC<import("../types").ControlProps<OptionType, boolean>>;
             DropdownIndicator: () => import("@emotion/react").jsx.JSX.Element;
             Menu: ({ children, innerProps }: import("../types").MenuProps<OptionType, boolean>) => import("@emotion/react").jsx.JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/select",
-	"version": "18.5.2",
+	"version": "18.6.0",
 	"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,20 +42,19 @@
 	"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.3.0",
+		"@atlaskit/react-select": "^1.4.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.3.0",
 		"@atlaskit/visually-hidden": "^1.5.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"@popperjs/core": "^2.11.8",
 		"bind-event-listener": "^3.0.0",
 		"react-focus-lock": "^2.9.5",
-		"react-focus-lock-next": "npm:react-focus-lock@^2.13.2",
 		"react-node-resolver": "^1.0.1",
 		"react-popper": "^2.3.0",
 		"shallow-equal": "^3.1.0"
@@ -70,7 +69,7 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/checkbox": "^15.1.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": "*",
@@ -106,12 +105,15 @@
 		"platform-visual-refresh-icons-legacy-facade": {
 			"type": "boolean"
 		},
-		"platform_dst_select-bump-react-focus-lock": {
-			"type": "boolean"
-		},
 		"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/"