@atlaskit/dropdown-menu 11.0.0 → 11.1.0

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # @atlaskit/dropdown-menu
 
+## 11.1.0
+
+### Minor Changes
+
+- [`bb8a0f713e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/bb8a0f713e8) - Add zIndex prop to pass custom z-index for the menu if it clashes with other components on the screen
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+- [`94886036118`](https://bitbucket.org/atlassian/atlassian-frontend/commits/94886036118) - Internal refactor to properly use render props to avoid unwanted re-mounts and improve test coverage
+- Updated dependencies
+
+## 11.0.3
+
+### Patch Changes
+
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Updates usage of deprecated token names so they're aligned with the latest naming conventions. No UI or visual changes
+- [`19d72473dfb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/19d72473dfb) - Bump dependency tiny-invariant to latest"
+- Updated dependencies
+
+## 11.0.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.0.1
+
+### Patch Changes
+
+- [`c2dd770a743`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c2dd770a743) - Add new prop which controls is outside click should be bound using capture
+- Updated dependencies
+
 ## 11.0.0
 
 ### Major Changes

package/codemods/11.0.0-lite-mode.tsx

@@ -1,6 +1,11 @@
 import { createTransformer } from '@atlaskit/codemod-utils';
 
 import convertTriggerType from './migrates/convert-trigger-type';
+import deprecateAutoFocus from './migrates/deprecate-autoFocus';
+import deprecateboundariesElement from './migrates/deprecate-boundariesElement';
+import deprecateIsCompact from './migrates/deprecate-isCompact';
+import deprecateIsHidden from './migrates/deprecate-isHidden';
+import deprecateIsMenuFixed from './migrates/deprecate-isMenuFixed';
 import deprecateItems from './migrates/deprecate-items';
 import deprecateOnItemActivated from './migrates/deprecate-onItemActivated';
 import deprecateOnPositioned from './migrates/deprecate-onPositioned';
@@ -22,6 +27,13 @@ const transformer = createTransformer([
   deprecateOnItemActivated,
   deprecateOnPositioned,
   deprecateShouldFitContainer,
+  deprecateboundariesElement,
+  deprecateIsMenuFixed,
+
+  // props on *Items
+  ...deprecateAutoFocus(),
+  ...deprecateIsCompact(),
+  ...deprecateIsHidden(),
 
   replaceShouldAllowMultiline,
   updatePositionValue,

package/codemods/__tests__/11.0.0-lite-mode.test.tsx

@@ -12,7 +12,7 @@ describe('apply all needed codemods for version 11.0.0 major bump', () => {
     `
     import React from "react";
     import DropdownMenu, {
-      DropdownItemGroupCheckbox as MyComponent, DropdownItemCheckbox,
+      DropdownItemGroupCheckbox as MyComponent, DropdownItemCheckbox, DropdownItem, DropdownItemRadio,
     } from "@atlaskit/dropdown-menu";
 
     export default () => (
@@ -24,14 +24,31 @@ describe('apply all needed codemods for version 11.0.0 major bump', () => {
         onPositioned={() => {}}
         position="bottom left"
         shouldFitContainer={false}
+        boundariesElement={document.body}
+        isMenuFixed
         shouldAllowMultiline>
+        <DropdownItem
+            isHidden
+            autoFocus
+            isCompact
+          >Cut</DropdownItem>
+        <DropdownItemCheckbox
+          isHidden
+          autoFocus
+          isCompact
+        >Copy</DropdownItemCheckbox>
+        <DropdownItemRadio
+          isHidden
+          autoFocus
+          isCompact
+        >Paste</DropdownItemRadio>
       </DropdownMenu>
     );
     `,
     `
     import React from "react";
     import DropdownMenu, {
-      DropdownItemCheckboxGroup as MyComponent, DropdownItemCheckbox,
+      DropdownItemCheckboxGroup as MyComponent, DropdownItemCheckbox, DropdownItem, DropdownItemRadio,
     } from "@atlaskit/dropdown-menu";
 
     export default () => (
@@ -40,6 +57,9 @@ describe('apply all needed codemods for version 11.0.0 major bump', () => {
         placement="bottom-start"
         shouldTitleWrap
         shouldDescriptionWrap>
+        <DropdownItem>Cut</DropdownItem>
+        <DropdownItemCheckbox>Copy</DropdownItemCheckbox>
+        <DropdownItemRadio>Paste</DropdownItemRadio>
       </DropdownMenu>
     );
     `,

package/codemods/__tests__/convert-triggerType.test.tsx

@@ -66,7 +66,7 @@ describe('update position value', () => {
     import DropdownMenu from "@atlaskit/dropdown-menu";
 
     export default () => (
-      <DropdownMenu 
+      <DropdownMenu
       trigger={
         <div>
           &lt;button/&gt; trigger
@@ -81,20 +81,103 @@ describe('update position value', () => {
     import DropdownMenu from "@atlaskit/dropdown-menu";
 
     export default () => (
-      /* TODO: (from codemod) 
+      <DropdownMenu
+      /* TODO: (from codemod)
       The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
-      Since version 11.0.0, we simplified the API and lean towards to only use 'trigger' prop.
-      For more info please reach out to #help-design-system-code. */
-      (<DropdownMenu 
+      Since version 11.0.0, we have simplified the API and now only use the 'trigger' prop.
+      Please refer to https://hello.atlassian.net/wiki/spaces/DST/pages/1330997516/Dropdown+menu+upgrade+guide for more details.
+      And feel free to reach out to us on our support channel if you have more queries – #help-design-system. */
       trigger={
         <div>
           &lt;button/&gt; trigger
         </div>
       }
       triggerType="button">
-      </DropdownMenu>)
+      </DropdownMenu>
     );
     `,
     'should only add comments triggerType prop when trigger is an object',
   );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+
+    export default () => (
+      <DropdownMenu
+      trigger={
+        <div>
+          &lt;button/&gt; trigger
+        </div>
+      }>
+      </DropdownMenu>
+    );
+    `,
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+
+    export default () => (
+      <DropdownMenu
+      /* TODO: (from codemod)
+      The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
+      Since version 11.0.0, we have simplified the API and now only use the 'trigger' prop.
+      Please refer to https://hello.atlassian.net/wiki/spaces/DST/pages/1330997516/Dropdown+menu+upgrade+guide for more details.
+      And feel free to reach out to us on our support channel if you have more queries – #help-design-system. */
+      trigger={
+        <div>
+          &lt;button/&gt; trigger
+        </div>
+      }>
+      </DropdownMenu>
+    );
+    `,
+    'should only add comments triggerType prop when trigger is an object',
+  );
+
+  defineInlineTest(
+    { default: transformer, parser: 'tsx' },
+    {},
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+
+    export default () => (
+      <DropdownMenuWrapper>
+        <DropdownMenu
+        trigger={
+          <div>
+            &lt;button/&gt; trigger
+          </div>
+        }>
+        </DropdownMenu>
+      </DropdownMenuWrapper>
+    );
+    `,
+    `
+    import React from "react";
+    import DropdownMenu from "@atlaskit/dropdown-menu";
+
+    export default () => (
+      <DropdownMenuWrapper>
+        <DropdownMenu
+        /* TODO: (from codemod)
+        The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
+        Since version 11.0.0, we have simplified the API and now only use the 'trigger' prop.
+        Please refer to https://hello.atlassian.net/wiki/spaces/DST/pages/1330997516/Dropdown+menu+upgrade+guide for more details.
+        And feel free to reach out to us on our support channel if you have more queries – #help-design-system. */
+        trigger={
+          <div>
+            &lt;button/&gt; trigger
+          </div>
+        }>
+        </DropdownMenu>
+      </DropdownMenuWrapper>
+    );
+    `,
+    'should only add comments that do not appear on the DOM',
+  );
 });

package/codemods/migrates/convert-trigger-type.tsx

@@ -9,8 +9,9 @@ import {
 
 const comment = `
   The usage of the 'trigger', 'triggerType' and 'triggerButtonProps' prop in this component could not be transformed and requires manual intervention.
-  Since version 11.0.0, we simplified the API and lean towards to only use 'trigger' prop.
-  For more info please reach out to #help-design-system-code.
+  Since version 11.0.0, we have simplified the API and now only use the 'trigger' prop.
+  Please refer to https://hello.atlassian.net/wiki/spaces/DST/pages/1330997516/Dropdown+menu+upgrade+guide for more details.
+  And feel free to reach out to us on our support channel if you have more queries – #help-design-system.
   `;
 
 const convertTriggerType = (j: core.JSCodeshift, source: Collection<Node>) => {
@@ -30,8 +31,8 @@ const convertTriggerType = (j: core.JSCodeshift, source: Collection<Node>) => {
     const triggerTypeProp = getJSXAttributesByName(j, element, 'triggerType');
     const triggerProp = getJSXAttributesByName(j, element, 'trigger');
 
-    // just skip when triggerType or trigger is not defined
-    if (triggerTypeProp.length === 0 || triggerProp.length === 0) {
+    // just skip when trigger is not defined
+    if (triggerProp.length === 0) {
       return;
     }
 
@@ -49,7 +50,15 @@ const convertTriggerType = (j: core.JSCodeshift, source: Collection<Node>) => {
       });
     } else {
       // for anything else we left a inline message
-      addCommentBefore(j, elements, comment);
+      // Overriding the comment prefix to be 'TODO: (from codemod)'
+      // to avoid trailing spaces.
+      addCommentBefore(
+        j,
+        triggerProp,
+        comment,
+        'block',
+        'TODO: (from codemod)',
+      );
     }
   });
 };

package/codemods/migrates/deprecate-autoFocus.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncFor } from '@atlaskit/codemod-utils';
+
+const deprecateAutoFocus = () => [
+  createRemoveFuncFor('@atlaskit/dropdown-menu', 'DropdownItem', 'autoFocus'),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemCheckbox',
+    'autoFocus',
+  ),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemRadio',
+    'autoFocus',
+  ),
+];
+
+export default deprecateAutoFocus;

package/codemods/migrates/deprecate-boundariesElement.tsx

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncAddCommentFor } from '@atlaskit/codemod-utils';
+
+const deprecateItems = createRemoveFuncAddCommentFor(
+  '@atlaskit/dropdown-menu',
+  'boundariesElement',
+);
+
+export default deprecateItems;

package/codemods/migrates/deprecate-isCompact.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncFor } from '@atlaskit/codemod-utils';
+
+const deprecateIsCompact = () => [
+  createRemoveFuncFor('@atlaskit/dropdown-menu', 'DropdownItem', 'isCompact'),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemCheckbox',
+    'isCompact',
+  ),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemRadio',
+    'isCompact',
+  ),
+];
+
+export default deprecateIsCompact;

package/codemods/migrates/deprecate-isHidden.tsx

@@ -0,0 +1,18 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncFor } from '@atlaskit/codemod-utils';
+
+const deprecateIsHidden = () => [
+  createRemoveFuncFor('@atlaskit/dropdown-menu', 'DropdownItem', 'isHidden'),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemCheckbox',
+    'isHidden',
+  ),
+  createRemoveFuncFor(
+    '@atlaskit/dropdown-menu',
+    'DropdownItemRadio',
+    'isHidden',
+  ),
+];
+
+export default deprecateIsHidden;

package/codemods/migrates/deprecate-isMenuFixed.tsx

@@ -0,0 +1,9 @@
+// eslint-disable-next-line @repo/internal/fs/filename-pattern-match
+import { createRemoveFuncAddCommentFor } from '@atlaskit/codemod-utils';
+
+const deprecateItems = createRemoveFuncAddCommentFor(
+  '@atlaskit/dropdown-menu',
+  'isMenuFixed',
+);
+
+export default deprecateItems;

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

@@ -31,6 +31,8 @@ var _getIconColors = _interopRequireDefault(require("../internal/utils/get-icon-
 
 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; }
@@ -54,7 +56,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
       shouldTitleWrap = _props$shouldTitleWra === void 0 ? true : _props$shouldTitleWra,
       _props$shouldDescript = props.shouldDescriptionWrap,
       shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
-      rest = (0, _objectWithoutProperties2.default)(props, ["id", "isSelected", "defaultSelected", "onClick", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
@@ -98,7 +100,8 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
       primaryColor: iconColors.primary,
       secondaryColor: iconColors.secondary
     }),
-    ref: itemRef
+    ref: itemRef // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

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

@@ -19,6 +19,8 @@ var _linkItem = _interopRequireDefault(require("@atlaskit/menu/link-item"));
 
 var _useRegisterItemWithFocusManager = _interopRequireDefault(require("./internal/hooks/use-register-item-with-focus-manager"));
 
+var _excluded = ["elemBefore", "elemAfter", "href", "shouldTitleWrap", "shouldDescriptionWrap"];
+
 /**
  * __Dropdown menu item__
  *
@@ -36,7 +38,7 @@ var DropdownMenuItem = function DropdownMenuItem(props) {
       shouldTitleWrap = _props$shouldTitleWra === void 0 ? true : _props$shouldTitleWra,
       _props$shouldDescript = props.shouldDescriptionWrap,
       shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
-      rest = (0, _objectWithoutProperties2.default)(props, ["elemBefore", "elemAfter", "href", "shouldTitleWrap", "shouldDescriptionWrap"]);
+      rest = (0, _objectWithoutProperties2.default)(props, _excluded);
   var itemRef = (0, _useRegisterItemWithFocusManager.default)();
 
   if (href) {

package/dist/cjs/dropdown-menu.js

@@ -9,6 +9,8 @@ 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 _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
@@ -45,7 +47,14 @@ var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wr
 
 var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
 
-/** @jsx jsx */
+var _useGeneratedId = _interopRequireDefault(require("./internal/utils/use-generated-id"));
+
+var _excluded = ["ref"];
+
+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 gridSize = (0, _constants.gridSize)();
 var spinnerContainerStyles = (0, _core.css)({
   display: 'flex',
@@ -54,6 +63,7 @@ var spinnerContainerStyles = (0, _core.css)({
   justifyContent: 'center'
 });
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
+var fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
 /**
  * __Dropdown menu__
  *
@@ -73,7 +83,7 @@ var DropdownMenu = function DropdownMenu(props) {
       children = props.children,
       _props$placement = props.placement,
       placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
-      Trigger = props.trigger,
+      _trigger = props.trigger,
       _props$shouldFlip = props.shouldFlip,
       shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
       _props$isLoading = props.isLoading,
@@ -82,7 +92,9 @@ var DropdownMenu = function DropdownMenu(props) {
       autoFocus = _props$autoFocus === void 0 ? false : _props$autoFocus,
       testId = props.testId,
       _props$statusLabel = props.statusLabel,
-      statusLabel = _props$statusLabel === void 0 ? 'Loading' : _props$statusLabel;
+      statusLabel = _props$statusLabel === void 0 ? 'Loading' : _props$statusLabel,
+      _props$zIndex = props.zIndex,
+      zIndex = _props$zIndex === void 0 ? _constants.layers.modal() : _props$zIndex;
 
   var _useControlledState = (0, _useControlled.default)(isOpen, function () {
     return defaultOpen;
@@ -137,40 +149,43 @@ var DropdownMenu = function DropdownMenu(props) {
   };
 
   (0, _useKeydownEvent.default)(handleDownArrow, isFocused);
-
-  var renderTrigger = function renderTrigger(triggerProps) {
-    if (typeof Trigger === 'function') {
-      var ref = triggerProps.ref,
-          providedProps = (0, _objectWithoutProperties2.default)(triggerProps, ["ref"]);
-      return (0, _core.jsx)(Trigger, (0, _extends2.default)({}, providedProps, bindFocus, {
-        triggerRef: ref,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
-      }));
-    }
-
-    return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, triggerProps, bindFocus, {
-      isSelected: isLocalOpen,
-      iconAfter: (0, _core.jsx)(_chevronDown.default, {
-        size: "medium",
-        label: "expand"
-      }),
-      onClick: handleTriggerClicked,
-      testId: testId && "".concat(testId, "--trigger")
-    }), Trigger);
-  };
-
-  var fallbackPlacements = ['bottom', 'bottom-end', 'right-start', 'left-start', 'auto'];
+  var id = (0, _useGeneratedId.default)();
   return (0, _core.jsx)(_selectionStore.default, null, (0, _core.jsx)(_popup.default, {
+    id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
     onClose: handleOnClose,
-    zIndex: _constants.layers.modal(),
+    zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
-    trigger: renderTrigger,
+    shouldUseCaptureOnOutsideClick: true,
+    trigger: function trigger(triggerProps) {
+      if (typeof _trigger === 'function') {
+        var ref = triggerProps.ref,
+            providedProps = (0, _objectWithoutProperties2.default)(triggerProps, _excluded);
+        return _trigger(_objectSpread(_objectSpread(_objectSpread({}, providedProps), bindFocus), {}, {
+          triggerRef: ref,
+          isSelected: isLocalOpen,
+          onClick: handleTriggerClicked,
+          testId: testId && "".concat(testId, "--trigger")
+        }));
+      }
+
+      return (0, _core.jsx)(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
+        ref: triggerProps.ref,
+        "aria-controls": triggerProps['aria-controls'],
+        "aria-expanded": triggerProps['aria-expanded'],
+        "aria-haspopup": triggerProps['aria-haspopup'],
+        isSelected: isLocalOpen,
+        iconAfter: (0, _core.jsx)(_chevronDown.default, {
+          size: "medium",
+          label: "expand"
+        }),
+        onClick: handleTriggerClicked,
+        testId: testId && "".concat(testId, "--trigger")
+      }), _trigger);
+    },
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef;
       return (0, _core.jsx)(_focusManager.default, null, (0, _core.jsx)(_menuWrapper.default, {

package/dist/cjs/index.js

@@ -5,18 +5,6 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function get() {
-    return _dropdownMenu.default;
-  }
-});
-Object.defineProperty(exports, "DropdownItemGroup", {
-  enumerable: true,
-  get: function get() {
-    return _dropdownMenuItemGroup.default;
-  }
-});
 Object.defineProperty(exports, "DropdownItem", {
   enumerable: true,
   get: function get() {
@@ -35,6 +23,12 @@ Object.defineProperty(exports, "DropdownItemCheckboxGroup", {
     return _dropdownItemCheckboxGroup.default;
   }
 });
+Object.defineProperty(exports, "DropdownItemGroup", {
+  enumerable: true,
+  get: function get() {
+    return _dropdownMenuItemGroup.default;
+  }
+});
 Object.defineProperty(exports, "DropdownItemRadio", {
   enumerable: true,
   get: function get() {
@@ -47,6 +41,12 @@ Object.defineProperty(exports, "DropdownItemRadioGroup", {
     return _dropdownItemRadioGroup.default;
   }
 });
+Object.defineProperty(exports, "default", {
+  enumerable: true,
+  get: function get() {
+    return _dropdownMenu.default;
+  }
+});
 
 var _dropdownMenu = _interopRequireDefault(require("./dropdown-menu"));
 

package/dist/cjs/internal/components/menu-wrapper.js

@@ -23,6 +23,8 @@ var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"
 
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
 
+var _excluded = ["onClose", "setInitialFocusRef"];
+
 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; }
@@ -37,7 +39,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var MenuWrapper = function MenuWrapper(_ref) {
   var onClose = _ref.onClose,
       setInitialFocusRef = _ref.setInitialFocusRef,
-      props = (0, _objectWithoutProperties2.default)(_ref, ["onClose", "setInitialFocusRef"]);
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
 
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
       menuItemRefs = _useContext.menuItemRefs;
@@ -56,7 +58,8 @@ var MenuWrapper = function MenuWrapper(_ref) {
     }
   };
 
-  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]);
+  setInitialFocusRef && setInitialFocusRef(menuItemRefs[0]); // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   return /*#__PURE__*/_react.default.createElement(_menuGroup.default, (0, _extends2.default)({
     onClick: closeOnMenuItemClick
   }, props));

package/dist/cjs/internal/hooks/use-radio-state.js

@@ -19,9 +19,9 @@ var _selectionStore = require("../context/selection-store");
 
 var _resetOptionsInGroup = _interopRequireDefault(require("../utils/reset-options-in-group"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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; }
 
 function useRadioState(_ref) {
   var id = _ref.id,

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

@@ -10,13 +10,13 @@ var _colors = require("@atlaskit/theme/colors");
 var getIconColors = function getIconColors(isSelected) {
   if (isSelected) {
     return {
-      primary: "var(--ds-background-boldBrand-resting, ".concat(_colors.B400, ")"),
-      secondary: "var(--ds-background-default, ".concat(_colors.N40, ")")
+      primary: "var(--ds-background-brand-bold, ".concat(_colors.B400, ")"),
+      secondary: "var(--ds-surface, ".concat(_colors.N40, ")")
     };
   }
 
   return {
-    primary: "var(--ds-border-neutral, ".concat(_colors.N40, ")"),
+    primary: "var(--ds-border, ".concat(_colors.N40, ")"),
     secondary: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N40, ")")
   };
 };

package/dist/cjs/internal/utils/reset-options-in-group.js

@@ -9,9 +9,9 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+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 = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+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 resetOptionsInGroup = function resetOptionsInGroup(group) {
   return Object.keys(group || {}).reduce(function (accumulator, current) {