@atlaskit/dropdown-menu 11.9.2 → 11.9.4

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/dropdown-menu
 
+## 11.9.4
+
+### Patch Changes
+
+- [`296683f5adc`](https://bitbucket.org/atlassian/atlassian-frontend/commits/296683f5adc) - Update DropdownItemCheckbox and DropdownItemRadio icon color and add a border to these icons to be consistent within our design system.
+
+## 11.9.3
+
+### Patch Changes
+
+- [`f42d723da8c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f42d723da8c) - always render role="menuitemcheckbox"
+
 ## 11.9.2
 
 ### Patch Changes

package/dist/cjs/checkbox/dropdown-item-checkbox.js

@@ -11,12 +11,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _checkbox = _interopRequireDefault(require("@atlaskit/icon/glyph/checkbox"));
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
+var _checkboxIcon = _interopRequireDefault(require("../internal/components/checkbox-icon"));
 var _useCheckboxState3 = _interopRequireDefault(require("../internal/hooks/use-checkbox-state"));
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
-var _getIconColors = _interopRequireDefault(require("../internal/utils/get-icon-colors"));
-var _isVoiceOverSupported = _interopRequireDefault(require("../internal/utils/is-voice-over-supported"));
 var _excluded = ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"];
 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; }
@@ -52,32 +50,22 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
     _useCheckboxState2 = (0, _slicedToArray2.default)(_useCheckboxState, 2),
     selected = _useCheckboxState2[0],
     setSelected = _useCheckboxState2[1];
-  var _useState = (0, _react.useState)((0, _getIconColors.default)(defaultSelected)),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    iconColors = _useState2[0],
-    setIconColors = _useState2[1];
   var onClickHandler = (0, _react.useCallback)(function (event) {
     setSelected(function (selected) {
       return !selected;
     });
     providedOnClick(event);
   }, [providedOnClick, setSelected]);
-  (0, _react.useEffect)(function () {
-    setIconColors((0, _getIconColors.default)(selected));
-  }, [selected]);
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
     id: id,
     onClick: onClickHandler,
-    role: (0, _isVoiceOverSupported.default)() ? 'checkbox' : 'menuitemcheckbox',
+    role: "menuitemcheckbox",
     "aria-checked": selected,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_checkbox.default, {
-      label: "",
-      size: "medium",
-      primaryColor: iconColors.primary,
-      secondaryColor: iconColors.secondary
+    iconBefore: /*#__PURE__*/_react.default.createElement(_checkboxIcon.default, {
+      checked: selected
     }),
     ref: itemRef
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/cjs/internal/components/checkbox-icon.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+var _colors = require("@atlaskit/theme/colors");
+/**
+ * __Checkbox icon__
+ *
+ * Used to visually represent the selected state in DropdownItemCheckbox
+ *
+ * @internal
+ */
+var CheckboxIcon = function CheckboxIcon(_ref) {
+  var checked = _ref.checked;
+  return /*#__PURE__*/_react.default.createElement(_svg.default, {
+    label: "",
+    size: "medium",
+    primaryColor: checked ? "var(--ds-background-selected-bold, ".concat(_colors.B400, ")") : "var(--ds-background-input, ".concat(_colors.N10, ")"),
+    secondaryColor: checked ? "var(--ds-icon-inverse, ".concat(_colors.N10, ")") : 'transparent'
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("rect", {
+    fill: "currentColor",
+    x: "6",
+    y: "6",
+    width: "12",
+    height: "12",
+    rx: "2",
+    stroke: checked ? "var(--ds-border-selected, ".concat(_colors.B400, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
+    strokeWidth: 2
+  }), /*#__PURE__*/_react.default.createElement("path", {
+    d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
+    fill: "inherit"
+  })));
+};
+var _default = CheckboxIcon;
+exports.default = _default;

package/dist/cjs/internal/components/radio-icon.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+var _colors = require("@atlaskit/theme/colors");
+/**
+ * __Radio icon__
+ *
+ * Used to visually represent the selected state in DropdownItemRadio
+ *
+ * @internal
+ */
+var RadioIcon = function RadioIcon(_ref) {
+  var checked = _ref.checked;
+  return /*#__PURE__*/_react.default.createElement(_svg.default, {
+    label: "",
+    size: "medium",
+    primaryColor: checked ? "var(--ds-background-selected-bold, ".concat(_colors.B400, ")") : "var(--ds-background-input, ".concat(_colors.N10, ")"),
+    secondaryColor: checked ? "var(--ds-icon-inverse, ".concat(_colors.N10, ")") : 'transparent'
+  }, /*#__PURE__*/_react.default.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/_react.default.createElement("circle", {
+    fill: "currentColor",
+    cx: "12",
+    cy: "12",
+    r: "6",
+    stroke: checked ? "var(--ds-border-selected, ".concat(_colors.B400, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
+    strokeWidth: 2
+  }), /*#__PURE__*/_react.default.createElement("circle", {
+    fill: "inherit",
+    cx: "12",
+    cy: "12",
+    r: "2"
+  })));
+};
+var _default = RadioIcon;
+exports.default = _default;

package/dist/cjs/radio/dropdown-item-radio.js

@@ -11,11 +11,10 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _radio = _interopRequireDefault(require("@atlaskit/icon/glyph/radio"));
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
+var _radioIcon = _interopRequireDefault(require("../internal/components/radio-icon"));
 var _useRadioState3 = _interopRequireDefault(require("../internal/hooks/use-radio-state"));
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("../internal/hooks/use-register-item-with-focus-manager"));
-var _getIconColors = _interopRequireDefault(require("../internal/utils/get-icon-colors"));
 var _isVoiceOverSupported = _interopRequireDefault(require("../internal/utils/is-voice-over-supported"));
 var _excluded = ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"];
 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); }
@@ -52,19 +51,12 @@ var DropdownItemRadio = function DropdownItemRadio(props) {
     _useRadioState2 = (0, _slicedToArray2.default)(_useRadioState, 2),
     selected = _useRadioState2[0],
     setSelected = _useRadioState2[1];
-  var _useState = (0, _react.useState)((0, _getIconColors.default)(defaultSelected)),
-    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-    iconColors = _useState2[0],
-    setIconColors = _useState2[1];
   var onClickHandler = (0, _react.useCallback)(function (event) {
     setSelected(function (selected) {
       return !selected;
     });
     providedOnClick(event);
   }, [providedOnClick, setSelected]);
-  (0, _react.useEffect)(function () {
-    setIconColors((0, _getIconColors.default)(selected));
-  }, [selected]);
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
   return /*#__PURE__*/_react.default.createElement(_buttonItem.default, (0, _extends2.default)({
     id: id,
@@ -73,11 +65,8 @@ var DropdownItemRadio = function DropdownItemRadio(props) {
     "aria-checked": selected,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
-    iconBefore: /*#__PURE__*/_react.default.createElement(_radio.default, {
-      label: "",
-      size: "medium",
-      primaryColor: iconColors.primary,
-      secondaryColor: iconColors.secondary
+    iconBefore: /*#__PURE__*/_react.default.createElement(_radioIcon.default, {
+      checked: selected
     }),
     ref: itemRef
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.9.2",
+	"version": "11.9.4",
 	"sideEffects": false
 }

package/dist/es2019/checkbox/dropdown-item-checkbox.js

@@ -1,12 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import ButtonItem from '@atlaskit/menu/button-item';
+import CheckboxIcon from '../internal/components/checkbox-icon';
 import useCheckboxState from '../internal/hooks/use-checkbox-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
-import getIconColors from '../internal/utils/get-icon-colors';
-import isVoiceOverSupported from '../internal/utils/is-voice-over-supported';
 /**
  * __Dropdown item checkbox__
  *
@@ -35,27 +33,20 @@ const DropdownItemCheckbox = props => {
     isSelected,
     defaultSelected
   });
-  const [iconColors, setIconColors] = useState(getIconColors(defaultSelected));
   const onClickHandler = useCallback(event => {
     setSelected(selected => !selected);
     providedOnClick(event);
   }, [providedOnClick, setSelected]);
-  useEffect(() => {
-    setIconColors(getIconColors(selected));
-  }, [selected]);
   const itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
     id: id,
     onClick: onClickHandler,
-    role: isVoiceOverSupported() ? 'checkbox' : 'menuitemcheckbox',
+    role: "menuitemcheckbox",
     "aria-checked": selected,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
     iconBefore: /*#__PURE__*/React.createElement(CheckboxIcon, {
-      label: "",
-      size: "medium",
-      primaryColor: iconColors.primary,
-      secondaryColor: iconColors.secondary
+      checked: selected
     }),
     ref: itemRef
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/es2019/internal/components/checkbox-icon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import SVGIcon from '@atlaskit/icon/svg';
+import { B400, N10, N40 } from '@atlaskit/theme/colors';
+/**
+ * __Checkbox icon__
+ *
+ * Used to visually represent the selected state in DropdownItemCheckbox
+ *
+ * @internal
+ */
+const CheckboxIcon = ({
+  checked
+}) => {
+  return /*#__PURE__*/React.createElement(SVGIcon, {
+    label: "",
+    size: "medium",
+    primaryColor: checked ? `var(--ds-background-selected-bold, ${B400})` : `var(--ds-background-input, ${N10})`,
+    secondaryColor: checked ? `var(--ds-icon-inverse, ${N10})` : 'transparent'
+  }, /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "currentColor",
+    x: "6",
+    y: "6",
+    width: "12",
+    height: "12",
+    rx: "2",
+    stroke: checked ? `var(--ds-border-selected, ${B400})` : `var(--ds-border-input, ${N40})`,
+    strokeWidth: 2
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
+    fill: "inherit"
+  })));
+};
+export default CheckboxIcon;

package/dist/es2019/internal/components/radio-icon.js

@@ -0,0 +1,35 @@
+import React from 'react';
+import SVGIcon from '@atlaskit/icon/svg';
+import { B400, N10, N40 } from '@atlaskit/theme/colors';
+/**
+ * __Radio icon__
+ *
+ * Used to visually represent the selected state in DropdownItemRadio
+ *
+ * @internal
+ */
+const RadioIcon = ({
+  checked
+}) => {
+  return /*#__PURE__*/React.createElement(SVGIcon, {
+    label: "",
+    size: "medium",
+    primaryColor: checked ? `var(--ds-background-selected-bold, ${B400})` : `var(--ds-background-input, ${N10})`,
+    secondaryColor: checked ? `var(--ds-icon-inverse, ${N10})` : 'transparent'
+  }, /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("circle", {
+    fill: "currentColor",
+    cx: "12",
+    cy: "12",
+    r: "6",
+    stroke: checked ? `var(--ds-border-selected, ${B400})` : `var(--ds-border-input, ${N40})`,
+    strokeWidth: 2
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "inherit",
+    cx: "12",
+    cy: "12",
+    r: "2"
+  })));
+};
+export default RadioIcon;

package/dist/es2019/radio/dropdown-item-radio.js

@@ -1,11 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import RadioIcon from '@atlaskit/icon/glyph/radio';
 import ButtonItem from '@atlaskit/menu/button-item';
+import RadioIcon from '../internal/components/radio-icon';
 import useRadioState from '../internal/hooks/use-radio-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
-import getIconColors from '../internal/utils/get-icon-colors';
 import isVoiceOverSupported from '../internal/utils/is-voice-over-supported';
 /**
  * __Dropdown item radio__
@@ -35,14 +34,10 @@ const DropdownItemRadio = props => {
     isSelected,
     defaultSelected
   });
-  const [iconColors, setIconColors] = useState(getIconColors(defaultSelected));
   const onClickHandler = useCallback(event => {
     setSelected(selected => !selected);
     providedOnClick(event);
   }, [providedOnClick, setSelected]);
-  useEffect(() => {
-    setIconColors(getIconColors(selected));
-  }, [selected]);
   const itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
     id: id,
@@ -52,10 +47,7 @@ const DropdownItemRadio = props => {
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
     iconBefore: /*#__PURE__*/React.createElement(RadioIcon, {
-      label: "",
-      size: "medium",
-      primaryColor: iconColors.primary,
-      secondaryColor: iconColors.secondary
+      checked: selected
     }),
     ref: itemRef
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.9.2",
+	"version": "11.9.4",
 	"sideEffects": false
 }

package/dist/esm/checkbox/dropdown-item-checkbox.js

@@ -2,14 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"];
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
 import ButtonItem from '@atlaskit/menu/button-item';
+import CheckboxIcon from '../internal/components/checkbox-icon';
 import useCheckboxState from '../internal/hooks/use-checkbox-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
-import getIconColors from '../internal/utils/get-icon-colors';
-import isVoiceOverSupported from '../internal/utils/is-voice-over-supported';
 /**
  * __Dropdown item checkbox__
  *
@@ -42,32 +40,22 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
     _useCheckboxState2 = _slicedToArray(_useCheckboxState, 2),
     selected = _useCheckboxState2[0],
     setSelected = _useCheckboxState2[1];
-  var _useState = useState(getIconColors(defaultSelected)),
-    _useState2 = _slicedToArray(_useState, 2),
-    iconColors = _useState2[0],
-    setIconColors = _useState2[1];
   var onClickHandler = useCallback(function (event) {
     setSelected(function (selected) {
       return !selected;
     });
     providedOnClick(event);
   }, [providedOnClick, setSelected]);
-  useEffect(function () {
-    setIconColors(getIconColors(selected));
-  }, [selected]);
   var itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
     id: id,
     onClick: onClickHandler,
-    role: isVoiceOverSupported() ? 'checkbox' : 'menuitemcheckbox',
+    role: "menuitemcheckbox",
     "aria-checked": selected,
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
     iconBefore: /*#__PURE__*/React.createElement(CheckboxIcon, {
-      label: "",
-      size: "medium",
-      primaryColor: iconColors.primary,
-      secondaryColor: iconColors.secondary
+      checked: selected
     }),
     ref: itemRef
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/esm/internal/components/checkbox-icon.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import SVGIcon from '@atlaskit/icon/svg';
+import { B400, N10, N40 } from '@atlaskit/theme/colors';
+/**
+ * __Checkbox icon__
+ *
+ * Used to visually represent the selected state in DropdownItemCheckbox
+ *
+ * @internal
+ */
+var CheckboxIcon = function CheckboxIcon(_ref) {
+  var checked = _ref.checked;
+  return /*#__PURE__*/React.createElement(SVGIcon, {
+    label: "",
+    size: "medium",
+    primaryColor: checked ? "var(--ds-background-selected-bold, ".concat(B400, ")") : "var(--ds-background-input, ".concat(N10, ")"),
+    secondaryColor: checked ? "var(--ds-icon-inverse, ".concat(N10, ")") : 'transparent'
+  }, /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("rect", {
+    fill: "currentColor",
+    x: "6",
+    y: "6",
+    width: "12",
+    height: "12",
+    rx: "2",
+    stroke: checked ? "var(--ds-border-selected, ".concat(B400, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+    strokeWidth: 2
+  }), /*#__PURE__*/React.createElement("path", {
+    d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
+    fill: "inherit"
+  })));
+};
+export default CheckboxIcon;

package/dist/esm/internal/components/radio-icon.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import SVGIcon from '@atlaskit/icon/svg';
+import { B400, N10, N40 } from '@atlaskit/theme/colors';
+/**
+ * __Radio icon__
+ *
+ * Used to visually represent the selected state in DropdownItemRadio
+ *
+ * @internal
+ */
+var RadioIcon = function RadioIcon(_ref) {
+  var checked = _ref.checked;
+  return /*#__PURE__*/React.createElement(SVGIcon, {
+    label: "",
+    size: "medium",
+    primaryColor: checked ? "var(--ds-background-selected-bold, ".concat(B400, ")") : "var(--ds-background-input, ".concat(N10, ")"),
+    secondaryColor: checked ? "var(--ds-icon-inverse, ".concat(N10, ")") : 'transparent'
+  }, /*#__PURE__*/React.createElement("g", {
+    fillRule: "evenodd"
+  }, /*#__PURE__*/React.createElement("circle", {
+    fill: "currentColor",
+    cx: "12",
+    cy: "12",
+    r: "6",
+    stroke: checked ? "var(--ds-border-selected, ".concat(B400, ")") : "var(--ds-border-input, ".concat(N40, ")"),
+    strokeWidth: 2
+  }), /*#__PURE__*/React.createElement("circle", {
+    fill: "inherit",
+    cx: "12",
+    cy: "12",
+    r: "2"
+  })));
+};
+export default RadioIcon;

package/dist/esm/radio/dropdown-item-radio.js

@@ -2,13 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"];
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
-import RadioIcon from '@atlaskit/icon/glyph/radio';
 import ButtonItem from '@atlaskit/menu/button-item';
+import RadioIcon from '../internal/components/radio-icon';
 import useRadioState from '../internal/hooks/use-radio-state';
 import useRegisterItemWithFocusManager from '../internal/hooks/use-register-item-with-focus-manager';
-import getIconColors from '../internal/utils/get-icon-colors';
 import isVoiceOverSupported from '../internal/utils/is-voice-over-supported';
 /**
  * __Dropdown item radio__
@@ -42,19 +41,12 @@ var DropdownItemRadio = function DropdownItemRadio(props) {
     _useRadioState2 = _slicedToArray(_useRadioState, 2),
     selected = _useRadioState2[0],
     setSelected = _useRadioState2[1];
-  var _useState = useState(getIconColors(defaultSelected)),
-    _useState2 = _slicedToArray(_useState, 2),
-    iconColors = _useState2[0],
-    setIconColors = _useState2[1];
   var onClickHandler = useCallback(function (event) {
     setSelected(function (selected) {
       return !selected;
     });
     providedOnClick(event);
   }, [providedOnClick, setSelected]);
-  useEffect(function () {
-    setIconColors(getIconColors(selected));
-  }, [selected]);
   var itemRef = useRegisterItemWithFocusManager();
   return /*#__PURE__*/React.createElement(ButtonItem, _extends({
     id: id,
@@ -64,10 +56,7 @@ var DropdownItemRadio = function DropdownItemRadio(props) {
     shouldTitleWrap: shouldTitleWrap,
     shouldDescriptionWrap: shouldDescriptionWrap,
     iconBefore: /*#__PURE__*/React.createElement(RadioIcon, {
-      label: "",
-      size: "medium",
-      primaryColor: iconColors.primary,
-      secondaryColor: iconColors.secondary
+      checked: selected
     }),
     ref: itemRef
     // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "11.9.2",
+	"version": "11.9.4",
 	"sideEffects": false
 }

package/dist/types/internal/components/checkbox-icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * __Checkbox icon__
+ *
+ * Used to visually represent the selected state in DropdownItemCheckbox
+ *
+ * @internal
+ */
+declare const CheckboxIcon: ({ checked }: {
+    checked: boolean;
+}) => JSX.Element;
+export default CheckboxIcon;

package/dist/types/internal/components/radio-icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * __Radio icon__
+ *
+ * Used to visually represent the selected state in DropdownItemRadio
+ *
+ * @internal
+ */
+declare const RadioIcon: ({ checked }: {
+    checked: boolean;
+}) => JSX.Element;
+export default RadioIcon;

package/dist/types-ts4.5/internal/components/checkbox-icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * __Checkbox icon__
+ *
+ * Used to visually represent the selected state in DropdownItemCheckbox
+ *
+ * @internal
+ */
+declare const CheckboxIcon: ({ checked }: {
+    checked: boolean;
+}) => JSX.Element;
+export default CheckboxIcon;

package/dist/types-ts4.5/internal/components/radio-icon.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+/**
+ * __Radio icon__
+ *
+ * Used to visually represent the selected state in DropdownItemRadio
+ *
+ * @internal
+ */
+declare const RadioIcon: ({ checked }: {
+    checked: boolean;
+}) => JSX.Element;
+export default RadioIcon;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.9.2",
+  "version": "11.9.4",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -55,7 +55,7 @@
     "@atlaskit/ds-explorations": "^2.2.0",
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/lozenge": "11.4.2",
-    "@atlaskit/modal-dialog": "^12.5.0",
+    "@atlaskit/modal-dialog": "^12.6.0",
     "@atlaskit/primitives": "^0.9.0",
     "@atlaskit/section-message": "^6.4.0",
     "@atlaskit/ssr": "*",

package/dist/cjs/internal/utils/get-icon-colors.js

@@ -1,21 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _colors = require("@atlaskit/theme/colors");
-var getIconColors = function getIconColors(isSelected) {
-  if (isSelected) {
-    return {
-      primary: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
-      secondary: "var(--ds-icon-inverse, ".concat(_colors.N40, ")")
-    };
-  }
-  return {
-    primary: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
-    secondary: "var(--ds-UNSAFE-transparent, ".concat(_colors.N40, ")")
-  };
-};
-var _default = getIconColors;
-exports.default = _default;

package/dist/es2019/internal/utils/get-icon-colors.js

@@ -1,14 +0,0 @@
-import { B400, N40 } from '@atlaskit/theme/colors';
-const getIconColors = isSelected => {
-  if (isSelected) {
-    return {
-      primary: `var(--ds-background-brand-bold, ${B400})`,
-      secondary: `var(--ds-icon-inverse, ${N40})`
-    };
-  }
-  return {
-    primary: `var(--ds-background-neutral, ${N40})`,
-    secondary: `var(--ds-UNSAFE-transparent, ${N40})`
-  };
-};
-export default getIconColors;

package/dist/esm/internal/utils/get-icon-colors.js

@@ -1,14 +0,0 @@
-import { B400, N40 } from '@atlaskit/theme/colors';
-var getIconColors = function getIconColors(isSelected) {
-  if (isSelected) {
-    return {
-      primary: "var(--ds-background-brand-bold, ".concat(B400, ")"),
-      secondary: "var(--ds-icon-inverse, ".concat(N40, ")")
-    };
-  }
-  return {
-    primary: "var(--ds-background-neutral, ".concat(N40, ")"),
-    secondary: "var(--ds-UNSAFE-transparent, ".concat(N40, ")")
-  };
-};
-export default getIconColors;

package/dist/types/internal/utils/get-icon-colors.d.ts

@@ -1,8 +0,0 @@
-declare const getIconColors: (isSelected: boolean | undefined) => {
-    primary: "var(--ds-background-brand-bold)";
-    secondary: "var(--ds-icon-inverse)";
-} | {
-    primary: "var(--ds-background-neutral)";
-    secondary: "var(--ds-UNSAFE-transparent)";
-};
-export default getIconColors;

package/dist/types-ts4.5/internal/utils/get-icon-colors.d.ts

@@ -1,8 +0,0 @@
-declare const getIconColors: (isSelected: boolean | undefined) => {
-    primary: "var(--ds-background-brand-bold)";
-    secondary: "var(--ds-icon-inverse)";
-} | {
-    primary: "var(--ds-background-neutral)";
-    secondary: "var(--ds-UNSAFE-transparent)";
-};
-export default getIconColors;