@atlaskit/dropdown-menu 11.5.11 → 11.6.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/dropdown-menu
 
+## 11.6.0
+
+### Minor Changes
+
+- [`814e6ed4e14`](https://bitbucket.org/atlassian/atlassian-frontend/commits/814e6ed4e14) - [ux] Adds a new spacing prop on the `DropdownMenu` component to support information density.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.5.12
+
+### Patch Changes
+
+- [`22b754d311f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/22b754d311f) - Updates usage of removed design token `utilities.UNSAFE_util.transparent` in favour of its replacement `utilities.UNSAFE.transparent`
+- Updated dependencies
+
 ## 11.5.11
 
 ### Patch Changes

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

@@ -40,7 +40,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
     _props$shouldDescript = props.shouldDescriptionWrap,
     shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
     console.warn("[DropdownItemCheckbox] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
   }

package/dist/cjs/dropdown-menu.js

@@ -78,6 +78,7 @@ var DropdownMenu = function DropdownMenu(props) {
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
     _trigger = props.trigger,
+    spacing = props.spacing,
     _props$shouldFlip = props.shouldFlip,
     shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
     _props$isLoading = props.isLoading,
@@ -201,6 +202,7 @@ var DropdownMenu = function DropdownMenu(props) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
         update = _ref.update;
       return /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
+        spacing: spacing,
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
         onClose: handleOnClose,

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

@@ -14,7 +14,7 @@ var getIconColors = function getIconColors(isSelected) {
   }
   return {
     primary: "var(--ds-background-neutral, ".concat(_colors.N40, ")"),
-    secondary: "var(--ds-UNSAFE_util-transparent, ".concat(_colors.N40, ")")
+    secondary: "var(--ds-UNSAFE-transparent, ".concat(_colors.N40, ")")
   };
 };
 var _default = getIconColors;

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

@@ -40,7 +40,7 @@ var DropdownItemRadio = function DropdownItemRadio(props) {
     _props$shouldDescript = props.shouldDescriptionWrap,
     shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
-  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
     console.warn("[DropdownItemRadio] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
   }

package/dist/cjs/version.json

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

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

@@ -26,7 +26,7 @@ const DropdownItemCheckbox = props => {
     shouldDescriptionWrap = true,
     ...rest
   } = props;
-  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
     console.warn("[DropdownItemCheckbox] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
   }

package/dist/es2019/dropdown-menu.js

@@ -60,6 +60,7 @@ const DropdownMenu = props => {
     children,
     placement = 'bottom-start',
     trigger,
+    spacing,
     shouldFlip = true,
     isLoading = false,
     autoFocus = false,
@@ -177,6 +178,7 @@ const DropdownMenu = props => {
       setInitialFocusRef,
       update
     }) => /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
+      spacing: spacing,
       maxHeight: MAX_HEIGHT,
       maxWidth: 800,
       onClose: handleOnClose,

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

@@ -8,7 +8,7 @@ const getIconColors = isSelected => {
   }
   return {
     primary: `var(--ds-background-neutral, ${N40})`,
-    secondary: `var(--ds-UNSAFE_util-transparent, ${N40})`
+    secondary: `var(--ds-UNSAFE-transparent, ${N40})`
   };
 };
 export default getIconColors;

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

@@ -26,7 +26,7 @@ const DropdownItemRadio = props => {
     shouldDescriptionWrap = true,
     ...rest
   } = props;
-  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
     console.warn("[DropdownItemRadio] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
   }

package/dist/es2019/version.json

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

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

@@ -30,7 +30,7 @@ var DropdownItemCheckbox = function DropdownItemCheckbox(props) {
     _props$shouldDescript = props.shouldDescriptionWrap,
     shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
     rest = _objectWithoutProperties(props, _excluded);
-  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
     console.warn("[DropdownItemCheckbox] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
   }

package/dist/esm/dropdown-menu.js

@@ -68,6 +68,7 @@ var DropdownMenu = function DropdownMenu(props) {
     _props$placement = props.placement,
     placement = _props$placement === void 0 ? 'bottom-start' : _props$placement,
     _trigger = props.trigger,
+    spacing = props.spacing,
     _props$shouldFlip = props.shouldFlip,
     shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
     _props$isLoading = props.isLoading,
@@ -191,6 +192,7 @@ var DropdownMenu = function DropdownMenu(props) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
         update = _ref.update;
       return /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
+        spacing: spacing,
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
         onClose: handleOnClose,

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

@@ -8,7 +8,7 @@ var getIconColors = function getIconColors(isSelected) {
   }
   return {
     primary: "var(--ds-background-neutral, ".concat(N40, ")"),
-    secondary: "var(--ds-UNSAFE_util-transparent, ".concat(N40, ")")
+    secondary: "var(--ds-UNSAFE-transparent, ".concat(N40, ")")
   };
 };
 export default getIconColors;

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

@@ -30,7 +30,7 @@ var DropdownItemRadio = function DropdownItemRadio(props) {
     _props$shouldDescript = props.shouldDescriptionWrap,
     shouldDescriptionWrap = _props$shouldDescript === void 0 ? true : _props$shouldDescript,
     rest = _objectWithoutProperties(props, _excluded);
-  if (process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
+  if (typeof process !== 'undefined' && process.env.NODE_ENV !== 'production' && typeof isSelected !== 'undefined' && typeof defaultSelected !== 'undefined') {
     // eslint-disable-next-line no-console
     console.warn("[DropdownItemRadio] You've used both `defaultSelected` and `isSelected` props. This is dangerous and can lead to unexpected results. Use one or the other depending if you want to control the components state yourself.");
   }

package/dist/esm/version.json

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

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

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

package/dist/types/types.d.ts

@@ -92,6 +92,10 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      * fit in the viewport.
      */
     shouldFlip?: boolean;
+    /**
+     * Controls the spacing density of the menu.
+     */
+    spacing?: Extract<MenuGroupProps['spacing'], 'cozy' | 'compact'>;
     /**
      * Content which will trigger the dropdown menu to open and close. Use with `triggerType`
      * to easily get a button trigger.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.5.11",
+  "version": "11.6.0",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -28,11 +28,11 @@
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/icon": "^21.11.0",
-    "@atlaskit/menu": "^1.4.0",
+    "@atlaskit/menu": "^1.5.0",
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/spinner": "^15.3.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.13.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -47,7 +47,7 @@
     "@atlaskit/docs": "*",
     "@atlaskit/ds-explorations": "^2.0.0",
     "@atlaskit/heading": "^1.1.0",
-    "@atlaskit/lozenge": "11.3.6",
+    "@atlaskit/lozenge": "11.3.7",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
@@ -82,6 +82,7 @@
       ],
       "design-system": "v1",
       "design-tokens": [
+        "color",
         "spacing"
       ],
       "styling": [
@@ -89,8 +90,7 @@
         "emotion"
       ],
       "analytics": "analytics-next",
-      "deprecation": "no-deprecated-imports",
-      "theming": "tokens"
+      "deprecation": "no-deprecated-imports"
     }
   },
   "af:exports": {