@atlaskit/dropdown-menu 15.2.1 → 16.0.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/dropdown-menu
 
+## 16.0.0
+
+### Major Changes
+
+- [#158490](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/158490)
+  [`71137cb330a17`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/71137cb330a17) -
+  Migrated from @emotion/react to @compiled/react in order to improve performance, align with the
+  rest of the Atlaskit techstack, and support React 18 Streaming SSR.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 15.2.1
 
 ### Patch Changes

package/dist/cjs/internal/components/group-title.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}

package/dist/cjs/internal/components/group-title.js

@@ -1,3 +1,4 @@
+/* group-title.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -5,14 +6,13 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./group-title.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireDefault(require("react"));
-var _primitives = require("@atlaskit/primitives");
-var headingStyles = (0, _primitives.xcss)({
-  color: 'color.text.subtle',
-  font: 'font.heading.xxsmall',
-  paddingBlock: 'space.0',
-  paddingInline: 'space.200'
-});
+var _compiled = require("@atlaskit/primitives/compiled");
+var styles = {
+  heading: "_11c81vhk _1rjcze3t _18zrpxbi _syaz1gjq"
+};
 
 /**
  * __Group title__
@@ -24,12 +24,12 @@ var headingStyles = (0, _primitives.xcss)({
 var GroupTitle = function GroupTitle(_ref) {
   var id = _ref.id,
     title = _ref.title;
-  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     "data-ds--menu--heading-item": true,
     role: "menuitem",
     id: id,
     "aria-hidden": "true",
-    xcss: headingStyles
+    xcss: styles.heading
   }, title);
 };
 var _default = exports.default = GroupTitle;

package/dist/cjs/internal/components/menu-wrapper.compiled.css

@@ -0,0 +1,7 @@
+._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1ul91lit{min-width:10pc}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

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

@@ -1,39 +1,35 @@
+/* menu-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("react");
-var _react2 = require("@emotion/react");
+require("./menu-wrapper.compiled.css");
+var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
-var _primitives = require("@atlaskit/primitives");
+var _compiled = require("@atlaskit/primitives/compiled");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"));
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
 var _focusManager = require("./focus-manager");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var spinnerContainerStyles = (0, _primitives.xcss)({
-  display: 'flex',
-  minWidth: '160px',
-  padding: 'space.250',
-  justifyContent: 'center'
-});
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  spinnerContainer: "_1e0c1txw _1ul91lit _1bah1h6o _ca0qv47k _u5f3v47k _n3tdv47k _19bvv47k"
+};
 var LoadingIndicator = function LoadingIndicator(_ref) {
   var _ref$statusLabel = _ref.statusLabel,
     statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel,
     testId = _ref.testId;
-  return (0, _react2.jsx)(_primitives.Box, {
-    xcss: spinnerContainerStyles,
+  return /*#__PURE__*/React.createElement(_compiled.Box, {
+    xcss: styles.spinnerContainer,
     role: "menuitem"
-  }, (0, _react2.jsx)(_spinner.default, {
+  }, /*#__PURE__*/React.createElement(_spinner.default, {
     size: "small",
     label: statusLabel,
     testId: testId
@@ -100,7 +96,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     }
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);
-  return (0, _react2.jsx)(_menuGroup.default, {
+  return /*#__PURE__*/React.createElement(_menuGroup.default, {
     isLoading: isLoading,
     maxHeight: maxHeight,
     maxWidth: maxWidth,
@@ -108,7 +104,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     role: "menu",
     spacing: spacing,
     testId: testId && "".concat(testId, "--menu-group")
-  }, isLoading ? (0, _react2.jsx)(LoadingIndicator, {
+  }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && "".concat(testId, "--loading-indicator")
   }) : children);

package/dist/es2019/internal/components/group-title.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}

package/dist/es2019/internal/components/group-title.js

@@ -1,11 +1,11 @@
+/* group-title.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./group-title.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box, xcss } from '@atlaskit/primitives';
-const headingStyles = xcss({
-  color: 'color.text.subtle',
-  font: 'font.heading.xxsmall',
-  paddingBlock: 'space.0',
-  paddingInline: 'space.200'
-});
+import { Box } from '@atlaskit/primitives/compiled';
+const styles = {
+  heading: "_11c81vhk _1rjcze3t _18zrpxbi _syaz1gjq"
+};
 
 /**
  * __Group title__
@@ -22,6 +22,6 @@ const GroupTitle = ({
   role: "menuitem",
   id: id,
   "aria-hidden": "true",
-  xcss: headingStyles
+  xcss: styles.heading
 }, title);
 export default GroupTitle;

package/dist/es2019/internal/components/menu-wrapper.compiled.css

@@ -0,0 +1,7 @@
+._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1ul91lit{min-width:10pc}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

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

@@ -1,30 +1,24 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* menu-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./menu-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useLayoutEffect } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
 import { FocusManagerContext } from './focus-manager';
-const spinnerContainerStyles = xcss({
-  display: 'flex',
-  minWidth: '160px',
-  padding: 'space.250',
-  justifyContent: 'center'
-});
+const styles = {
+  spinnerContainer: "_1e0c1txw _1ul91lit _1bah1h6o _ca0qv47k _u5f3v47k _n3tdv47k _19bvv47k"
+};
 const LoadingIndicator = ({
   statusLabel = 'Loading',
   testId
-}) => jsx(Box, {
-  xcss: spinnerContainerStyles,
+}) => /*#__PURE__*/React.createElement(Box, {
+  xcss: styles.spinnerContainer,
   role: "menuitem"
-}, jsx(Spinner, {
+}, /*#__PURE__*/React.createElement(Spinner, {
   size: "small",
   label: statusLabel,
   testId: testId
@@ -91,7 +85,7 @@ const MenuWrapper = ({
     }
     setInitialFocusRef === null || setInitialFocusRef === void 0 ? void 0 : setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);
-  return jsx(MenuGroup, {
+  return /*#__PURE__*/React.createElement(MenuGroup, {
     isLoading: isLoading,
     maxHeight: maxHeight,
     maxWidth: maxWidth,
@@ -99,7 +93,7 @@ const MenuWrapper = ({
     role: "menu",
     spacing: spacing,
     testId: testId && `${testId}--menu-group`
-  }, isLoading ? jsx(LoadingIndicator, {
+  }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && `${testId}--loading-indicator`
   }) : children);

package/dist/esm/internal/components/group-title.compiled.css

@@ -0,0 +1,4 @@
+._11c81vhk{font:var(--ds-font-heading-xxsmall,normal 600 9pt/1pc ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._syaz1gjq{color:var(--ds-text-subtle,#44546f)}

package/dist/esm/internal/components/group-title.js

@@ -1,11 +1,11 @@
+/* group-title.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./group-title.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
-import { Box, xcss } from '@atlaskit/primitives';
-var headingStyles = xcss({
-  color: 'color.text.subtle',
-  font: 'font.heading.xxsmall',
-  paddingBlock: 'space.0',
-  paddingInline: 'space.200'
-});
+import { Box } from '@atlaskit/primitives/compiled';
+var styles = {
+  heading: "_11c81vhk _1rjcze3t _18zrpxbi _syaz1gjq"
+};
 
 /**
  * __Group title__
@@ -22,7 +22,7 @@ var GroupTitle = function GroupTitle(_ref) {
     role: "menuitem",
     id: id,
     "aria-hidden": "true",
-    xcss: headingStyles
+    xcss: styles.heading
   }, title);
 };
 export default GroupTitle;

package/dist/esm/internal/components/menu-wrapper.compiled.css

@@ -0,0 +1,7 @@
+._19bvv47k{padding-left:var(--ds-space-250,20px)}
+._1bah1h6o{justify-content:center}
+._1e0c1txw{display:flex}
+._1ul91lit{min-width:10pc}
+._ca0qv47k{padding-top:var(--ds-space-250,20px)}
+._n3tdv47k{padding-bottom:var(--ds-space-250,20px)}
+._u5f3v47k{padding-right:var(--ds-space-250,20px)}

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

@@ -1,31 +1,25 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
+/* menu-wrapper.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./menu-wrapper.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
 import { useContext, useEffect, useLayoutEffect } from 'react';
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
-import { Box, xcss } from '@atlaskit/primitives';
+import { Box } from '@atlaskit/primitives/compiled';
 import Spinner from '@atlaskit/spinner';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
 import { FocusManagerContext } from './focus-manager';
-var spinnerContainerStyles = xcss({
-  display: 'flex',
-  minWidth: '160px',
-  padding: 'space.250',
-  justifyContent: 'center'
-});
+var styles = {
+  spinnerContainer: "_1e0c1txw _1ul91lit _1bah1h6o _ca0qv47k _u5f3v47k _n3tdv47k _19bvv47k"
+};
 var LoadingIndicator = function LoadingIndicator(_ref) {
   var _ref$statusLabel = _ref.statusLabel,
     statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel,
     testId = _ref.testId;
-  return jsx(Box, {
-    xcss: spinnerContainerStyles,
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.spinnerContainer,
     role: "menuitem"
-  }, jsx(Spinner, {
+  }, /*#__PURE__*/React.createElement(Spinner, {
     size: "small",
     label: statusLabel,
     testId: testId
@@ -92,7 +86,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     }
     setInitialFocusRef === null || setInitialFocusRef === void 0 || setInitialFocusRef(firstFocusableRef);
   }, [menuItemRefs, setInitialFocusRef, autoFocus, shouldRenderToParent, isTriggeredUsingKeyboard]);
-  return jsx(MenuGroup, {
+  return /*#__PURE__*/React.createElement(MenuGroup, {
     isLoading: isLoading,
     maxHeight: maxHeight,
     maxWidth: maxWidth,
@@ -100,7 +94,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
     role: "menu",
     spacing: spacing,
     testId: testId && "".concat(testId, "--menu-group")
-  }, isLoading ? jsx(LoadingIndicator, {
+  }, isLoading ? /*#__PURE__*/React.createElement(LoadingIndicator, {
     statusLabel: statusLabel,
     testId: testId && "".concat(testId, "--loading-indicator")
   }) : children);

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

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type MenuWrapperProps } from '../../types';
 /**
  *
@@ -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.JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, }: MenuWrapperProps) => JSX.Element;
 export default MenuWrapper;

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

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import { type MenuWrapperProps } from '../../types';
 /**
  *
@@ -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.JSX.Element;
+declare const MenuWrapper: ({ children, isLoading, maxHeight, maxWidth, onClose, onUpdate, statusLabel, setInitialFocusRef, shouldRenderToParent, spacing, testId, isTriggeredUsingKeyboard, autoFocus, }: MenuWrapperProps) => JSX.Element;
 export default MenuWrapper;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "15.2.1",
+	"version": "16.0.0",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -27,6 +27,7 @@
 	"dependencies": {
 		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
+		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/icon": "^26.1.0",
 		"@atlaskit/layering": "^2.1.0",
@@ -38,7 +39,6 @@
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
-		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0"
 	},
 	"peerDependencies": {
@@ -115,7 +115,7 @@
 			],
 			"styling": [
 				"static",
-				"emotion"
+				"compiled"
 			],
 			"analytics": "analytics-next",
 			"deprecation": "no-deprecated-imports"