@atlaskit/dropdown-menu 16.1.4 → 16.2.1

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/dropdown-menu
 
+## 16.2.1
+
+### Patch Changes
+
+- [#188621](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/188621)
+  [`94981059e9ba8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/94981059e9ba8) -
+  Added accessible label for MenuGroup in DropdownMenu
+- Updated dependencies
+
+## 16.2.0
+
+### Minor Changes
+
+- [#187681](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/187681)
+  [`64c917433bf89`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/64c917433bf89) -
+  Cleans up `platform_dst_dropdown_radio_default_selected_fix` feature gate. Default selected items
+  for radio group dropdowns are now correctly persisted.
+
 ## 16.1.4
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -101,7 +101,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     zIndex = _ref$zIndex === void 0 ? _constants.layers.modal() : _ref$zIndex,
     label = _ref.label,
     interactionName = _ref.interactionName,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    menuLabel = _ref.menuLabel;
   var _useControlledState = (0, _useControlled.default)(isOpen, function () {
       return defaultOpen;
     }),
@@ -331,7 +332,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
         shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
         isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
         autoFocus: autoFocus,
-        testId: testId && "".concat(testId, "--menu-wrapper")
+        testId: testId && "".concat(testId, "--menu-wrapper"),
+        menuLabel: menuLabel
       }, children));
     }
   })));

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

@@ -54,7 +54,8 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     spacing = _ref2.spacing,
     testId = _ref2.testId,
     isTriggeredUsingKeyboard = _ref2.isTriggeredUsingKeyboard,
-    autoFocus = _ref2.autoFocus;
+    autoFocus = _ref2.autoFocus,
+    menuLabel = _ref2.menuLabel;
   var _useContext = (0, _react.useContext)(_focusManager.FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
@@ -102,7 +103,8 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     onClick: closeOnMenuItemClick,
     role: "menu",
     spacing: spacing,
-    testId: testId && "".concat(testId, "--menu-group")
+    testId: testId && "".concat(testId, "--menu-group"),
+    menuLabel: menuLabel
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && "".concat(testId, "--loading-indicator")

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

@@ -8,10 +8,8 @@ exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _dropdownItemRadioGroup = require("../../radio/dropdown-item-radio-group");
 var _selectionStore = require("../context/selection-store");
-var _resetOptionsInGroup = _interopRequireDefault(require("../utils/reset-options-in-group"));
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function useRadioState(_ref) {
@@ -63,9 +61,7 @@ function useRadioState(_ref) {
    */
   if (persistedIsSelected === undefined) {
     var existing = getGroupState(group);
-    var newGroupState = (0, _platformFeatureFlags.fg)('platform_dst_dropdown_radio_default_selected_fix') ? // FF on: only the current is changed
-    _objectSpread(_objectSpread({}, existing), {}, (0, _defineProperty2.default)({}, id, defaultSelected || false)) : // FF off: everything else also gets set to false
-    _objectSpread(_objectSpread({}, (0, _resetOptionsInGroup.default)(existing || {})), {}, (0, _defineProperty2.default)({}, id, defaultSelected || false));
+    var newGroupState = _objectSpread(_objectSpread({}, existing), {}, (0, _defineProperty2.default)({}, id, defaultSelected || false));
     setGroupState(group, newGroupState);
   }
   return [localIsSelected, setLocalState];

package/dist/es2019/dropdown-menu.js

@@ -78,7 +78,8 @@ const DropdownMenu = ({
   zIndex = layers.modal(),
   label,
   interactionName,
-  strategy
+  strategy,
+  menuLabel
 }) => {
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
   const triggerRef = useRef(null);
@@ -303,7 +304,8 @@ const DropdownMenu = ({
       shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
       isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
       autoFocus: autoFocus,
-      testId: testId && `${testId}--menu-wrapper`
+      testId: testId && `${testId}--menu-wrapper`,
+      menuLabel: menuLabel
     }, children))
   })));
 };

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

@@ -43,7 +43,8 @@ const MenuWrapper = ({
   spacing,
   testId,
   isTriggeredUsingKeyboard,
-  autoFocus
+  autoFocus,
+  menuLabel
 }) => {
   const {
     menuItemRefs
@@ -92,7 +93,8 @@ const MenuWrapper = ({
     onClick: closeOnMenuItemClick,
     role: "menu",
     spacing: spacing,
-    testId: testId && `${testId}--menu-group`
+    testId: testId && `${testId}--menu-group`,
+    menuLabel: menuLabel
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && `${testId}--loading-indicator`

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

@@ -1,8 +1,6 @@
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { RadioGroupContext } from '../../radio/dropdown-item-radio-group';
 import { SelectionStoreContext } from '../context/selection-store';
-import resetOptionsInGroup from '../utils/reset-options-in-group';
 function useRadioState({
   id,
   isSelected,
@@ -48,16 +46,9 @@ function useRadioState({
    */
   if (persistedIsSelected === undefined) {
     const existing = getGroupState(group);
-    const newGroupState = fg('platform_dst_dropdown_radio_default_selected_fix') ?
-    // FF on: only the current is changed
-    {
+    const newGroupState = {
       ...existing,
       [id]: defaultSelected || false
-    } :
-    // FF off: everything else also gets set to false
-    {
-      ...resetOptionsInGroup(existing || {}),
-      [id]: defaultSelected || false
     };
     setGroupState(group, newGroupState);
   }

package/dist/esm/dropdown-menu.js

@@ -93,7 +93,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
     zIndex = _ref$zIndex === void 0 ? layers.modal() : _ref$zIndex,
     label = _ref.label,
     interactionName = _ref.interactionName,
-    strategy = _ref.strategy;
+    strategy = _ref.strategy,
+    menuLabel = _ref.menuLabel;
   var _useControlledState = useControlledState(isOpen, function () {
       return defaultOpen;
     }),
@@ -323,7 +324,8 @@ var DropdownMenu = function DropdownMenu(_ref) {
         shouldRenderToParent: shouldRenderToParent || shouldFitContainer,
         isTriggeredUsingKeyboard: isTriggeredUsingKeyboard,
         autoFocus: autoFocus,
-        testId: testId && "".concat(testId, "--menu-wrapper")
+        testId: testId && "".concat(testId, "--menu-wrapper"),
+        menuLabel: menuLabel
       }, children));
     }
   })));

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

@@ -45,7 +45,8 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     spacing = _ref2.spacing,
     testId = _ref2.testId,
     isTriggeredUsingKeyboard = _ref2.isTriggeredUsingKeyboard,
-    autoFocus = _ref2.autoFocus;
+    autoFocus = _ref2.autoFocus,
+    menuLabel = _ref2.menuLabel;
   var _useContext = useContext(FocusManagerContext),
     menuItemRefs = _useContext.menuItemRefs;
   var closeOnMenuItemClick = function closeOnMenuItemClick(e) {
@@ -93,7 +94,8 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     onClick: closeOnMenuItemClick,
     role: "menu",
     spacing: spacing,
-    testId: testId && "".concat(testId, "--menu-group")
+    testId: testId && "".concat(testId, "--menu-group"),
+    menuLabel: menuLabel
   }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && "".concat(testId, "--loading-indicator")

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

@@ -3,10 +3,8 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 import { useCallback, useContext, useEffect, useState } from 'react';
-import { fg } from '@atlaskit/platform-feature-flags';
 import { RadioGroupContext } from '../../radio/dropdown-item-radio-group';
 import { SelectionStoreContext } from '../context/selection-store';
-import resetOptionsInGroup from '../utils/reset-options-in-group';
 function useRadioState(_ref) {
   var id = _ref.id,
     isSelected = _ref.isSelected,
@@ -56,9 +54,7 @@ function useRadioState(_ref) {
    */
   if (persistedIsSelected === undefined) {
     var existing = getGroupState(group);
-    var newGroupState = fg('platform_dst_dropdown_radio_default_selected_fix') ? // FF on: only the current is changed
-    _objectSpread(_objectSpread({}, existing), {}, _defineProperty({}, id, defaultSelected || false)) : // FF off: everything else also gets set to false
-    _objectSpread(_objectSpread({}, resetOptionsInGroup(existing || {})), {}, _defineProperty({}, id, defaultSelected || false));
+    var newGroupState = _objectSpread(_objectSpread({}, existing), {}, _defineProperty({}, id, defaultSelected || false));
     setGroupState(group, newGroupState);
   }
   return [localIsSelected, setLocalState];

package/dist/types/dropdown-menu.d.ts

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, }: DropdownMenuProps<T>) => React.JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, menuLabel, }: DropdownMenuProps<T>) => React.JSX.Element;
 export default DropdownMenu;

package/dist/types/internal/components/menu-wrapper.d.ts

@@ -7,5 +7,5 @@ import { type MenuWrapperProps } from '../../types';
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, }: MenuWrapperProps) => JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, menuLabel, }: MenuWrapperProps) => JSX.Element;
 export default MenuWrapper;

package/dist/types/types.d.ts

@@ -181,6 +181,10 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * The default is `fixed`.
      */
     strategy?: 'absolute' | 'fixed';
+    /**
+     * Provide an accessible label for the menu element for assistive technology.
+     */
+    menuLabel?: string;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;

package/dist/types-ts4.5/dropdown-menu.d.ts

@@ -9,5 +9,5 @@ import type { DropdownMenuProps } from './types';
  * - [Code](https://atlassian.design/components/dropdown-menu/code)
  * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
  */
-declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, }: DropdownMenuProps<T>) => React.JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = any>({ autoFocus, children, defaultOpen, isLoading, isOpen, onOpenChange, placement, shouldFitContainer, shouldFlip, shouldRenderToParent, returnFocusRef, spacing, statusLabel, testId, trigger, zIndex, label, interactionName, strategy, menuLabel, }: DropdownMenuProps<T>) => React.JSX.Element;
 export default DropdownMenu;

package/dist/types-ts4.5/internal/components/menu-wrapper.d.ts

@@ -7,5 +7,5 @@ import { type MenuWrapperProps } from '../../types';
  * if a CheckboxItem or RadioItem is clicked.
  * It also sets focus to the first menu item when opened.
  */
-declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, }: MenuWrapperProps) => JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, menuLabel, }: MenuWrapperProps) => JSX.Element;
 export default MenuWrapper;

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

@@ -181,6 +181,10 @@ interface InternalDropdownMenuProps<TriggerElement extends HTMLElement = any> {
      * The default is `fixed`.
      */
     strategy?: 'absolute' | 'fixed';
+    /**
+     * Provide an accessible label for the menu element for assistive technology.
+     */
+    menuLabel?: string;
 }
 type StandardDropdownMenuProps<TriggerElement extends HTMLElement = any> = InternalDropdownMenuProps<TriggerElement> & {
     shouldFitContainer?: false;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "16.1.4",
+	"version": "16.2.1",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -26,8 +26,8 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/css": "^0.12.0",
-		"@atlaskit/ds-lib": "^4.0.0",
-		"@atlaskit/icon": "^27.3.0",
+		"@atlaskit/ds-lib": "^4.1.0",
+		"@atlaskit/icon": "^27.5.0",
 		"@atlaskit/layering": "^3.0.0",
 		"@atlaskit/menu": "^8.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
@@ -35,7 +35,7 @@
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^19.0.0",
-		"@atlaskit/tokens": "^5.4.0",
+		"@atlaskit/tokens": "^5.6.0",
 		"@atlaskit/visually-hidden": "^3.0.0",
 		"@babel/runtime": "^7.0.0",
 		"bind-event-listener": "^3.0.0"
@@ -57,7 +57,7 @@
 		"@atlaskit/heading": "^5.2.0",
 		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/lozenge": "^13.0.0",
-		"@atlaskit/modal-dialog": "^14.2.0",
+		"@atlaskit/modal-dialog": "^14.3.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/textfield": "^8.0.0",
 		"@atlaskit/toggle": "^15.0.0",
@@ -91,9 +91,6 @@
 		},
 		"platform_design_system_team_dropdown_return_focus": {
 			"type": "boolean"
-		},
-		"platform_dst_dropdown_radio_default_selected_fix": {
-			"type": "boolean"
 		}
 	},
 	"techstack": {