@atlaskit/dropdown-menu 11.11.5 → 11.12.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/dropdown-menu
 
+## 11.12.0
+
+### Minor Changes
+
+- [`b66fdec7fd1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b66fdec7fd1) - Add a new prop `shouldRenderToParent` to allow render content into a DOM node within the parent DOM hierarchy instead of React portal.
+
+## 11.11.6
+
+### Patch Changes
+
+- [`d420deeebe5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d420deeebe5) - Fix checkbox and radio item color contrast issue under feature flag
+
 ## 11.11.5
 
 ### Patch Changes

package/dist/cjs/dropdown-menu.js

@@ -85,6 +85,8 @@ var DropdownMenu = function DropdownMenu(props) {
     spacing = props.spacing,
     _props$shouldFlip = props.shouldFlip,
     shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
+    _props$shouldRenderTo = props.shouldRenderToParent,
+    shouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
     _props$isLoading = props.isLoading,
     isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
     _props$autoFocus = props.autoFocus,
@@ -186,7 +188,7 @@ var DropdownMenu = function DropdownMenu(props) {
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
     shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') ? true : undefined,
+    shouldRenderToParent: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent : undefined,
     trigger: function trigger(triggerProps) {
       if (typeof _trigger === 'function') {
         var ref = triggerProps.ref,

package/dist/cjs/internal/components/checkbox-icon.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 /**
  * __Checkbox icon__
@@ -31,8 +32,8 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
     width: "12",
     height: "12",
     rx: "2",
-    stroke: checked ? "var(--ds-border-selected, ".concat(_colors.B400, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
-    strokeWidth: 2
+    stroke: checked ? "var(--ds-border-selected, ".concat(_colors.B400, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
+    strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
   }), /*#__PURE__*/_react.default.createElement("path", {
     d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
     fill: "inherit"

package/dist/cjs/internal/components/radio-icon.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _svg = _interopRequireDefault(require("@atlaskit/icon/svg"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 /**
  * __Radio icon__
@@ -29,8 +30,8 @@ var RadioIcon = function RadioIcon(_ref) {
     cx: "12",
     cy: "12",
     r: "6",
-    stroke: checked ? "var(--ds-border-selected, ".concat(_colors.B400, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
-    strokeWidth: 2
+    stroke: checked ? "var(--ds-border-selected, ".concat(_colors.B400, ")") : "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? _colors.N100 : _colors.N40, ")"),
+    strokeWidth: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
   }), /*#__PURE__*/_react.default.createElement("circle", {
     fill: "inherit",
     cx: "12",

package/dist/es2019/dropdown-menu.js

@@ -67,6 +67,7 @@ const DropdownMenu = props => {
     trigger,
     spacing,
     shouldFlip = true,
+    shouldRenderToParent = false,
     isLoading = false,
     autoFocus = false,
     testId,
@@ -159,7 +160,7 @@ const DropdownMenu = props => {
     fallbackPlacements: fallbackPlacements,
     testId: testId && `${testId}--content`,
     shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? true : undefined,
+    shouldRenderToParent: getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent : undefined,
     trigger: triggerProps => {
       if (typeof trigger === 'function') {
         const {

package/dist/es2019/internal/components/checkbox-icon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SVGIcon from '@atlaskit/icon/svg';
-import { B400, N10, N40 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B400, N10, N100, N40 } from '@atlaskit/theme/colors';
 /**
  * __Checkbox icon__
  *
@@ -25,8 +26,8 @@ const CheckboxIcon = ({
     width: "12",
     height: "12",
     rx: "2",
-    stroke: checked ? `var(--ds-border-selected, ${B400})` : `var(--ds-border-input, ${N40})`,
-    strokeWidth: 2
+    stroke: checked ? `var(--ds-border-selected, ${B400})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+    strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
   }), /*#__PURE__*/React.createElement("path", {
     d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
     fill: "inherit"

package/dist/es2019/internal/components/radio-icon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SVGIcon from '@atlaskit/icon/svg';
-import { B400, N10, N40 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B400, N10, N100, N40 } from '@atlaskit/theme/colors';
 /**
  * __Radio icon__
  *
@@ -23,8 +24,8 @@ const RadioIcon = ({
     cx: "12",
     cy: "12",
     r: "6",
-    stroke: checked ? `var(--ds-border-selected, ${B400})` : `var(--ds-border-input, ${N40})`,
-    strokeWidth: 2
+    stroke: checked ? `var(--ds-border-selected, ${B400})` : `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40})`,
+    strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
   }), /*#__PURE__*/React.createElement("circle", {
     fill: "inherit",
     cx: "12",

package/dist/esm/dropdown-menu.js

@@ -76,6 +76,8 @@ var DropdownMenu = function DropdownMenu(props) {
     spacing = props.spacing,
     _props$shouldFlip = props.shouldFlip,
     shouldFlip = _props$shouldFlip === void 0 ? true : _props$shouldFlip,
+    _props$shouldRenderTo = props.shouldRenderToParent,
+    shouldRenderToParent = _props$shouldRenderTo === void 0 ? false : _props$shouldRenderTo,
     _props$isLoading = props.isLoading,
     isLoading = _props$isLoading === void 0 ? false : _props$isLoading,
     _props$autoFocus = props.autoFocus,
@@ -177,7 +179,7 @@ var DropdownMenu = function DropdownMenu(props) {
     fallbackPlacements: fallbackPlacements,
     testId: testId && "".concat(testId, "--content"),
     shouldUseCaptureOnOutsideClick: true,
-    shouldRenderToParent: getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? true : undefined,
+    shouldRenderToParent: getBooleanFF('platform.design-system-team.render-popup-in-parent_f73ij') ? shouldRenderToParent : undefined,
     trigger: function trigger(triggerProps) {
       if (typeof _trigger === 'function') {
         var ref = triggerProps.ref,

package/dist/esm/internal/components/checkbox-icon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SVGIcon from '@atlaskit/icon/svg';
-import { B400, N10, N40 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B400, N10, N100, N40 } from '@atlaskit/theme/colors';
 /**
  * __Checkbox icon__
  *
@@ -24,8 +25,8 @@ var CheckboxIcon = function CheckboxIcon(_ref) {
     width: "12",
     height: "12",
     rx: "2",
-    stroke: checked ? "var(--ds-border-selected, ".concat(B400, ")") : "var(--ds-border-input, ".concat(N40, ")"),
-    strokeWidth: 2
+    stroke: checked ? "var(--ds-border-selected, ".concat(B400, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+    strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
   }), /*#__PURE__*/React.createElement("path", {
     d: "M9.707 11.293a1 1 0 10-1.414 1.414l2 2a1 1 0 001.414 0l4-4a1 1 0 10-1.414-1.414L11 12.586l-1.293-1.293z",
     fill: "inherit"

package/dist/esm/internal/components/radio-icon.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import SVGIcon from '@atlaskit/icon/svg';
-import { B400, N10, N40 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B400, N10, N100, N40 } from '@atlaskit/theme/colors';
 /**
  * __Radio icon__
  *
@@ -22,8 +23,8 @@ var RadioIcon = function RadioIcon(_ref) {
     cx: "12",
     cy: "12",
     r: "6",
-    stroke: checked ? "var(--ds-border-selected, ".concat(B400, ")") : "var(--ds-border-input, ".concat(N40, ")"),
-    strokeWidth: 2
+    stroke: checked ? "var(--ds-border-selected, ".concat(B400, ")") : "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? N100 : N40, ")"),
+    strokeWidth: getBooleanFF('platform.design-system-team.border-checkbox_nyoiu') ? 1 : 2
   }), /*#__PURE__*/React.createElement("circle", {
     fill: "inherit",
     cx: "12",

package/dist/types/types.d.ts

@@ -92,6 +92,12 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      * fit in the viewport.
      */
     shouldFlip?: boolean;
+    /**
+     * The root element where the DropdownMenu content should be rendered.
+     * `true` - rendering in the DOM node closest to the trigger. `false` - rendering in React.Portal.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
     /**
      * Controls the spacing density of the menu.
      */

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

@@ -92,6 +92,12 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
      * fit in the viewport.
      */
     shouldFlip?: boolean;
+    /**
+     * The root element where the DropdownMenu content should be rendered.
+     * `true` - rendering in the DOM node closest to the trigger. `false` - rendering in React.Portal.
+     * Defaults to `false`.
+     */
+    shouldRenderToParent?: boolean;
     /**
      * Controls the spacing density of the menu.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.11.5",
+  "version": "11.12.0",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -31,17 +31,17 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.8.0",
+    "@atlaskit/button": "^16.9.0",
     "@atlaskit/codemod-utils": "^4.2.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/menu": "^1.9.0",
+    "@atlaskit/menu": "^1.10.0",
     "@atlaskit/platform-feature-flags": "^0.2.2",
     "@atlaskit/popup": "^1.9.0",
-    "@atlaskit/primitives": "^1.0.6",
+    "@atlaskit/primitives": "^1.2.0",
     "@atlaskit/spinner": "^15.5.0",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.14.0",
+    "@atlaskit/tokens": "^1.17.0",
     "@atlaskit/visually-hidden": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -60,6 +60,7 @@
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "jest-in-case": "^1.0.2",
     "jscodeshift": "^0.13.0",
     "raf-stub": "^2.0.1",
     "react-dom": "^16.8.0",
@@ -105,6 +106,9 @@
     },
     "platform.design-system-team.render-popup-in-parent_f73ij": {
       "type": "boolean"
+    },
+    "platform.design-system-team.border-checkbox_nyoiu": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/dropdown-menu/",

package/report.api.md

@@ -147,6 +147,7 @@ export interface DropdownMenuProps<
   onOpenChange?: (args: OnOpenChangeArgs) => void;
   placement?: Placement;
   shouldFlip?: boolean;
+  shouldRenderToParent?: boolean;
   spacing?: Extract<MenuGroupProps['spacing'], 'compact' | 'cozy'>;
   statusLabel?: string;
   testId?: string;

package/tmp/api-report-tmp.d.ts

@@ -123,6 +123,7 @@ export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElem
     onOpenChange?: (args: OnOpenChangeArgs) => void;
     placement?: Placement;
     shouldFlip?: boolean;
+    shouldRenderToParent?: boolean;
     spacing?: Extract<MenuGroupProps['spacing'], 'compact' | 'cozy'>;
     statusLabel?: string;
     testId?: string;

package/dist/cjs/version.json

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

package/dist/es2019/version.json

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

package/dist/esm/version.json

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