@atlaskit/dropdown-menu 11.11.0 → 11.11.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/dropdown-menu
 
+## 11.11.2
+
+### Patch Changes
+
+- [`1ed303de3e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1ed303de3e8) - Updated dependencies
+
+## 11.11.1
+
+### Patch Changes
+
+- [`fd493dc2358`](https://bitbucket.org/atlassian/atlassian-frontend/commits/fd493dc2358) - [ux] support nested dropdown menu
+
 ## 11.11.0
 
 ### Minor Changes

package/dist/cjs/dropdown-menu.js

@@ -24,7 +24,7 @@ var _constants = require("@atlaskit/theme/constants");
 var _focusManager = _interopRequireDefault(require("./internal/components/focus-manager"));
 var _menuWrapper = _interopRequireDefault(require("./internal/components/menu-wrapper"));
 var _selectionStore = _interopRequireDefault(require("./internal/context/selection-store"));
-var _useGeneratedId = _interopRequireDefault(require("./internal/utils/use-generated-id"));
+var _useGeneratedId = _interopRequireWildcard(require("./internal/utils/use-generated-id"));
 var _excluded = ["ref"]; // eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
 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; }
@@ -59,6 +59,7 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
     return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
   }
 };
+var NestedContext = /*#__PURE__*/(0, _react.createContext)(false);
 
 /**
  * __Dropdown menu__
@@ -96,6 +97,7 @@ var DropdownMenu = function DropdownMenu(props) {
     _useControlledState2 = (0, _slicedToArray2.default)(_useControlledState, 2),
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
+  var isNested = (0, _react.useContext)(NestedContext);
   var _useState = (0, _react.useState)(false),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -128,6 +130,11 @@ var DropdownMenu = function DropdownMenu(props) {
     });
   }, [onOpenChange, isLocalOpen, setLocalIsOpen]);
   var handleOnClose = (0, _react.useCallback)(function (event) {
+    if (event.key !== 'Escape' && event.target.closest("[id^=".concat(_useGeneratedId.PREFIX, "] [aria-haspopup]"))) {
+      // Check if it is within dropdown and it is a trigger button
+      // if it is a nested dropdown, clicking trigger won't close the dropdown
+      return;
+    }
     var newValue = false;
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -168,7 +175,8 @@ var DropdownMenu = function DropdownMenu(props) {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
-    onClose: handleOnClose,
+    onClose: isNested ? undefined : handleOnClose // only outmost parent needs onCloseHandler
+    ,
     zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
@@ -212,7 +220,9 @@ var DropdownMenu = function DropdownMenu(props) {
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-      }, children));
+      }, isNested ? children : /*#__PURE__*/_react.default.createElement(NestedContext.Provider, {
+        value: true
+      }, children)));
     }
   }));
 };

package/dist/cjs/internal/utils/use-generated-id.js

@@ -3,9 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+exports.PREFIX = void 0;
 exports.default = useGeneratedId;
 var _react = require("react");
 var PREFIX = 'ds--dropdown--';
+exports.PREFIX = PREFIX;
 var generateRandomString = function generateRandomString() {
   return (// This string is used only on client side usually triggered after a user interaction.
     // Therefore, so there is no risk of mismatch

package/dist/cjs/version.json

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

package/dist/es2019/dropdown-menu.js

@@ -1,5 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
@@ -14,7 +14,7 @@ import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
 import SelectionStore from './internal/context/selection-store';
-import useGeneratedId from './internal/utils/use-generated-id';
+import useGeneratedId, { PREFIX } from './internal/utils/use-generated-id';
 const gridSize = gridSizeFn();
 const MAX_HEIGHT = `calc(100vh - ${gridSize * 2}px)`;
 const opposites = {
@@ -44,6 +44,7 @@ const getFallbackPlacements = placement => {
     return [`${mainAxis}-start`, `${mainAxis}-end`, `${opposites[mainAxis]}`, `${opposites[mainAxis]}-start`, `${opposites[mainAxis]}-end`, `auto`];
   }
 };
+const NestedContext = /*#__PURE__*/createContext(false);
 
 /**
  * __Dropdown menu__
@@ -71,6 +72,7 @@ const DropdownMenu = props => {
     zIndex = layers.modal()
   } = props;
   const [isLocalOpen, setLocalIsOpen] = useControlledState(isOpen, () => defaultOpen);
+  const isNested = useContext(NestedContext);
   const [isTriggeredUsingKeyboard, setTriggeredUsingKeyboard] = useState(false);
   const fallbackPlacements = useMemo(() => getFallbackPlacements(placement), [placement]);
   const handleTriggerClicked = useCallback(
@@ -100,6 +102,11 @@ const DropdownMenu = props => {
     });
   }, [onOpenChange, isLocalOpen, setLocalIsOpen]);
   const handleOnClose = useCallback(event => {
+    if (event.key !== 'Escape' && event.target.closest(`[id^=${PREFIX}] [aria-haspopup]`)) {
+      // Check if it is within dropdown and it is a trigger button
+      // if it is a nested dropdown, clicking trigger won't close the dropdown
+      return;
+    }
     const newValue = false;
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -141,7 +148,8 @@ const DropdownMenu = props => {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
-    onClose: handleOnClose,
+    onClose: isNested ? undefined : handleOnClose // only outmost parent needs onCloseHandler
+    ,
     zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
@@ -189,7 +197,9 @@ const DropdownMenu = props => {
       isLoading: isLoading,
       statusLabel: statusLabel,
       setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-    }, children))
+    }, isNested ? children : /*#__PURE__*/React.createElement(NestedContext.Provider, {
+      value: true
+    }, children)))
   }));
 };
 export default DropdownMenu;

package/dist/es2019/internal/utils/use-generated-id.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-const PREFIX = 'ds--dropdown--';
+export const PREFIX = 'ds--dropdown--';
 const generateRandomString = () =>
 // This string is used only on client side usually triggered after a user interaction.
 // Therefore, so there is no risk of mismatch

package/dist/es2019/version.json

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

package/dist/esm/dropdown-menu.js

@@ -5,7 +5,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 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) { _defineProperty(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; }
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { createContext, useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { bind } from 'bind-event-listener';
 import Button from '@atlaskit/button/standard-button';
 import { KEY_DOWN } from '@atlaskit/ds-lib/keycodes';
@@ -20,7 +20,7 @@ import { gridSize as gridSizeFn, layers } from '@atlaskit/theme/constants';
 import FocusManager from './internal/components/focus-manager';
 import MenuWrapper from './internal/components/menu-wrapper';
 import SelectionStore from './internal/context/selection-store';
-import useGeneratedId from './internal/utils/use-generated-id';
+import useGeneratedId, { PREFIX } from './internal/utils/use-generated-id';
 var gridSize = gridSizeFn();
 var MAX_HEIGHT = "calc(100vh - ".concat(gridSize * 2, "px)");
 var opposites = {
@@ -50,6 +50,7 @@ var getFallbackPlacements = function getFallbackPlacements(placement) {
     return ["".concat(mainAxis, "-start"), "".concat(mainAxis, "-end"), "".concat(opposites[mainAxis]), "".concat(opposites[mainAxis], "-start"), "".concat(opposites[mainAxis], "-end"), "auto"];
   }
 };
+var NestedContext = /*#__PURE__*/createContext(false);
 
 /**
  * __Dropdown menu__
@@ -87,6 +88,7 @@ var DropdownMenu = function DropdownMenu(props) {
     _useControlledState2 = _slicedToArray(_useControlledState, 2),
     isLocalOpen = _useControlledState2[0],
     setLocalIsOpen = _useControlledState2[1];
+  var isNested = useContext(NestedContext);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isTriggeredUsingKeyboard = _useState2[0],
@@ -119,6 +121,11 @@ var DropdownMenu = function DropdownMenu(props) {
     });
   }, [onOpenChange, isLocalOpen, setLocalIsOpen]);
   var handleOnClose = useCallback(function (event) {
+    if (event.key !== 'Escape' && event.target.closest("[id^=".concat(PREFIX, "] [aria-haspopup]"))) {
+      // Check if it is within dropdown and it is a trigger button
+      // if it is a nested dropdown, clicking trigger won't close the dropdown
+      return;
+    }
     var newValue = false;
     setLocalIsOpen(newValue);
     onOpenChange({
@@ -159,7 +166,8 @@ var DropdownMenu = function DropdownMenu(props) {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
-    onClose: handleOnClose,
+    onClose: isNested ? undefined : handleOnClose // only outmost parent needs onCloseHandler
+    ,
     zIndex: zIndex,
     placement: placement,
     fallbackPlacements: fallbackPlacements,
@@ -203,7 +211,9 @@ var DropdownMenu = function DropdownMenu(props) {
         isLoading: isLoading,
         statusLabel: statusLabel,
         setInitialFocusRef: isTriggeredUsingKeyboard || autoFocus ? setInitialFocusRef : undefined
-      }, children));
+      }, isNested ? children : /*#__PURE__*/React.createElement(NestedContext.Provider, {
+        value: true
+      }, children)));
     }
   }));
 };

package/dist/esm/internal/utils/use-generated-id.js

@@ -1,5 +1,5 @@
 import { useRef } from 'react';
-var PREFIX = 'ds--dropdown--';
+export var PREFIX = 'ds--dropdown--';
 var generateRandomString = function generateRandomString() {
   return (// This string is used only on client side usually triggered after a user interaction.
     // Therefore, so there is no risk of mismatch

package/dist/esm/version.json

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

package/dist/types/internal/utils/use-generated-id.d.ts

@@ -1,3 +1,4 @@
+export declare const PREFIX = "ds--dropdown--";
 /**
  * useGeneratedId generates a random string which remains constant across
  * renders when called without any parameter.

package/dist/types-ts4.5/internal/utils/use-generated-id.d.ts

@@ -1,3 +1,4 @@
+export declare const PREFIX = "ds--dropdown--";
 /**
  * useGeneratedId generates a random string which remains constant across
  * renders when called without any parameter.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.11.0",
+  "version": "11.11.2",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "team": "Design System Team",
+    "team": "Design System Maker Experience",
     "releaseModel": "continuous",
     "website": {
       "name": "Dropdown menu",
@@ -38,7 +38,7 @@
     "@atlaskit/menu": "^1.9.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/popup": "^1.9.0",
-    "@atlaskit/primitives": "^1.0.0",
+    "@atlaskit/primitives": "^1.0.6",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
     "@atlaskit/tokens": "^1.13.0",