@atlaskit/dropdown-menu 11.14.5 → 12.1.0

package/CHANGELOG.md

@@ -1,5 +1,35 @@
 # @atlaskit/dropdown-menu
 
+## 12.1.0
+
+### Minor Changes
+
+- [#41586](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41586) [`ef0466f92d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ef0466f92d9) - We are removing previously added feature flag and unsafe entry point usage of the new Button inside DropdownMenu.
+
+## 12.0.0
+
+### Major Changes
+
+- [#41355](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41355) [`cd1c813da18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cd1c813da18) - Menu items now have a secondary selected state (border or notch), this was previously feature flagged for Atlassian experiences and is now available for everyone.
+
+  This change makes all menu items are now relatively positioned, if you had any child elements that leaned on this behaviour your experiences will now be broken!
+
+  For example the below code code previously the `div` would be positioned relatively to the menu group element. Now, it is positioned relatively to the button item element.
+
+  ```jsx
+  <MenuGroup>
+    <ButtonItem>
+      <div style={{ position: 'absolute', top: '100%' }} />
+    </ButtonItem>
+  </MenuGroup>
+  ```
+
+  As a path forward you should not be leaning on this behaviour. If you need a popup experience use `@atlaskit/dropdown-menu` or `@atlaskit/popup`.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.14.5
 
 ### Patch Changes

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

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _menu = require("@atlaskit/menu");
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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"));
@@ -69,7 +68,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     }),
     id: id,
     isDisabled: isDisabled,
-    isSelected: selected && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9'),
+    isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
     role: "menuitemcheckbox",

package/dist/cjs/dropdown-menu.js

@@ -12,14 +12,12 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _bindEventListener = require("bind-event-listener");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
-var _unsafe = require("@atlaskit/button/unsafe");
 var _keycodes = require("@atlaskit/ds-lib/keycodes");
 var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _useControlled = _interopRequireDefault(require("@atlaskit/ds-lib/use-controlled"));
 var _useFocusEvent = _interopRequireDefault(require("@atlaskit/ds-lib/use-focus-event"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
 var _constants = require("@atlaskit/theme/constants");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
@@ -201,21 +199,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
           testId: testId && "".concat(testId, "--trigger")
         }));
       }
-      return (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/_react.default.createElement(_unsafe.UNSAFE_BUTTON, {
-        iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-          size: "medium",
-          label: ""
-        }),
-        onFocus: bindFocus.onFocus,
-        onBlur: bindFocus.onBlur,
-        ref: (0, _mergeRefs.default)([ref, itemRef]),
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
-      }, _trigger) : /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
+      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
         ref: (0, _mergeRefs.default)([ref, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,

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

@@ -11,7 +11,6 @@ var _react = _interopRequireWildcard(require("react"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _menu = require("@atlaskit/menu");
 var _buttonItem = _interopRequireDefault(require("@atlaskit/menu/button-item"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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"));
@@ -72,7 +71,7 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     }),
     id: id,
     isDisabled: isDisabled,
-    isSelected: selected && (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.menu-selected-state-change_0see9'),
+    isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
     role: (0, _isVoiceOverSupported.default)() ? 'radio' : 'menuitemradio',

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

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 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';
@@ -51,7 +50,7 @@ const DropdownItemCheckbox = ({
     }),
     id: id,
     isDisabled: isDisabled,
-    isSelected: selected && getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9'),
+    isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
     role: "menuitemcheckbox",

package/dist/es2019/dropdown-menu.js

@@ -2,14 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
-import { UNSAFE_BUTTON } from '@atlaskit/button/unsafe';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
@@ -175,21 +173,7 @@ const DropdownMenu = ({
           testId: testId && `${testId}--trigger`
         });
       }
-      return getBooleanFF('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/React.createElement(UNSAFE_BUTTON, {
-        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
-          size: "medium",
-          label: ""
-        }),
-        onFocus: bindFocus.onFocus,
-        onBlur: bindFocus.onBlur,
-        ref: mergeRefs([ref, itemRef]),
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && `${testId}--trigger`
-      }, trigger) : /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
+      return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
         ref: mergeRefs([ref, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,

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

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 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';
@@ -54,7 +53,7 @@ const DropdownItemRadio = ({
     }),
     id: id,
     isDisabled: isDisabled,
-    isSelected: selected && getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9'),
+    isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
     role: isVoiceOverSupported() ? 'radio' : 'menuitemradio',

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

@@ -3,7 +3,6 @@ import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 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';
@@ -59,7 +58,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(_ref) {
     }),
     id: id,
     isDisabled: isDisabled,
-    isSelected: selected && getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9'),
+    isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
     role: "menuitemcheckbox",

package/dist/esm/dropdown-menu.js

@@ -6,14 +6,12 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
-import { UNSAFE_BUTTON } from '@atlaskit/button/unsafe';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import noop from '@atlaskit/ds-lib/noop';
 import useControlledState from '@atlaskit/ds-lib/use-controlled';
 import useFocus from '@atlaskit/ds-lib/use-focus-event';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
 // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
@@ -192,21 +190,7 @@ var DropdownMenu = function DropdownMenu(_ref) {
           testId: testId && "".concat(testId, "--trigger")
         }));
       }
-      return getBooleanFF('platform.design-system-team.new-button-adoption-in-dropdown_p8sn4') ? /*#__PURE__*/React.createElement(UNSAFE_BUTTON, {
-        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
-          size: "medium",
-          label: ""
-        }),
-        onFocus: bindFocus.onFocus,
-        onBlur: bindFocus.onBlur,
-        ref: mergeRefs([ref, itemRef]),
-        "aria-controls": ariaControls,
-        "aria-expanded": ariaExpanded,
-        "aria-haspopup": ariaHasPopup,
-        isSelected: isLocalOpen,
-        onClick: handleTriggerClicked,
-        testId: testId && "".concat(testId, "--trigger")
-      }, _trigger) : /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
+      return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
         ref: mergeRefs([ref, itemRef]),
         "aria-controls": ariaControls,
         "aria-expanded": ariaExpanded,

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

@@ -3,7 +3,6 @@ import React, { useCallback } from 'react';
 import noop from '@atlaskit/ds-lib/noop';
 import { SELECTION_STYLE_CONTEXT_DO_NOT_USE } from '@atlaskit/menu';
 import ButtonItem from '@atlaskit/menu/button-item';
-import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 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';
@@ -62,7 +61,7 @@ var DropdownItemRadio = function DropdownItemRadio(_ref) {
     }),
     id: id,
     isDisabled: isDisabled,
-    isSelected: selected && getBooleanFF('platform.design-system-team.menu-selected-state-change_0see9'),
+    isSelected: selected,
     onClick: onClickHandler,
     ref: itemRef,
     role: isVoiceOverSupported() ? 'radio' : 'menuitemradio',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.14.5",
+  "version": "12.1.0",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,14 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.5 <4.9": {
-      "*": [
-        "dist/types-ts4.5/*",
-        "dist/types-ts4.5/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -36,13 +28,13 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/layering": "^0.2.0",
-    "@atlaskit/menu": "^1.11.0",
+    "@atlaskit/menu": "^2.0.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
-    "@atlaskit/popup": "^1.10.0",
+    "@atlaskit/popup": "^1.11.0",
     "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/spinner": "^15.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.26.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1"
@@ -53,6 +45,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -96,20 +89,22 @@
       "deprecation": "no-deprecated-imports"
     }
   },
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "dist/types-ts4.5/*",
+        "dist/types-ts4.5/index.d.ts"
+      ]
+    }
+  },
   "af:exports": {
     ".": "./src/index.tsx",
     "./types": "./src/types.tsx"
   },
   "platform-feature-flags": {
-    "platform.design-system-team.menu-selected-state-change_0see9": {
-      "type": "boolean"
-    },
     "platform.design-system-team.border-checkbox_nyoiu": {
       "type": "boolean"
     },
-    "platform.design-system-team.new-button-adoption-in-dropdown_p8sn4": {
-      "type": "boolean"
-    },
     "platform.design-system-team.icon-button-spacing-fix_o1zc5": {
       "type": "boolean",
       "referenceOnly": "true"