@atlaskit/dropdown-menu 11.5.3 → 11.5.5

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/dropdown-menu
 
+## 11.5.5
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.5.4
+
+### Patch Changes
+
+- [`ab6ea02a97e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/ab6ea02a97e) - Align internal implementation with current linting rules. There should be no change for consumers.
+
+## 11.5.4
+
+### Patch Changes
+
+- [`a5fa14318a8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a5fa14318a8) - Improve examples and visual regression test coverage.
+
 ## 11.5.3
 
 ### Patch Changes

package/codemods/utils/create-rename-import.tsx

@@ -1,41 +1,44 @@
 import core from 'jscodeshift';
 import { Collection } from 'jscodeshift/src/Collection';
 
-export const createRenameImportFor = ({
-  componentName,
-  newComponentName,
-  packagePath,
-  isDefaultImport,
-}: {
-  componentName: string;
-  newComponentName: string;
-  packagePath: string;
-  isDefaultImport: boolean;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  source
-    .find(j.ImportDeclaration)
-    .filter((path) => path.node.source.value === packagePath)
-    .find(j.ImportSpecifier)
-    .filter((path) => path.node.imported.name === componentName)
-    .replaceWith((importSpecifier) => {
-      const specifier = j.identifier(newComponentName);
+export const createRenameImportFor =
+  ({
+    componentName,
+    newComponentName,
+    packagePath,
+    isDefaultImport,
+  }: {
+    componentName: string;
+    newComponentName: string;
+    packagePath: string;
+    isDefaultImport: boolean;
+  }) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    source
+      .find(j.ImportDeclaration)
+      .filter((path) => path.node.source.value === packagePath)
+      .find(j.ImportSpecifier)
+      .filter((path) => path.node.imported.name === componentName)
+      .replaceWith((importSpecifier) => {
+        const specifier = j.identifier(newComponentName);
 
-      let importAlias;
-      if (
-        importSpecifier &&
-        importSpecifier.node &&
-        importSpecifier.node.local
-      ) {
-        importAlias =
-          importSpecifier.node.local.name !== importSpecifier.node.imported.name
-            ? j.identifier(importSpecifier.node.local.name)
-            : null;
-      }
+        let importAlias;
+        if (
+          importSpecifier &&
+          importSpecifier.node &&
+          importSpecifier.node.local
+        ) {
+          importAlias =
+            importSpecifier.node.local.name !==
+            importSpecifier.node.imported.name
+              ? j.identifier(importSpecifier.node.local.name)
+              : null;
+        }
 
-      return isDefaultImport
-        ? j.importDefaultSpecifier(importAlias || specifier)
-        : j.importSpecifier(specifier, importAlias);
-    });
+        return isDefaultImport
+          ? j.importDefaultSpecifier(importAlias || specifier)
+          : j.importSpecifier(specifier, importAlias);
+      });
 
-  return source.toSource();
-};
+    return source.toSource();
+  };

package/codemods/utils/create-update-callsite.tsx

@@ -1,32 +1,34 @@
 import core from 'jscodeshift';
 import { Collection } from 'jscodeshift/src/Collection';
 
-export const createUpdateCallsite = ({
-  componentName,
-  newComponentName,
-  packagePath,
-}: {
-  componentName: string;
-  newComponentName: string;
-  packagePath: string;
-}) => (j: core.JSCodeshift, source: Collection<Node>) => {
-  source
-    .find(j.JSXElement)
-    // @ts-ignore
-    .filter((path) => path.node.openingElement.name.name === componentName)
-    .replaceWith((element) => {
-      const elementName = j.jsxIdentifier(newComponentName);
-      const newComponent = j.jsxElement(
-        j.jsxOpeningElement(
-          elementName,
-          element.node.openingElement.attributes,
-        ),
-        j.jsxClosingElement(elementName),
-        element.node.children,
-      );
+export const createUpdateCallsite =
+  ({
+    componentName,
+    newComponentName,
+    packagePath,
+  }: {
+    componentName: string;
+    newComponentName: string;
+    packagePath: string;
+  }) =>
+  (j: core.JSCodeshift, source: Collection<Node>) => {
+    source
+      .find(j.JSXElement)
+      // @ts-ignore
+      .filter((path) => path.node.openingElement.name.name === componentName)
+      .replaceWith((element) => {
+        const elementName = j.jsxIdentifier(newComponentName);
+        const newComponent = j.jsxElement(
+          j.jsxOpeningElement(
+            elementName,
+            element.node.openingElement.attributes,
+          ),
+          j.jsxClosingElement(elementName),
+          element.node.children,
+        );
 
-      return newComponent;
-    });
+        return newComponent;
+      });
 
-  return source.toSource();
-};
+    return source.toSource();
+  };

package/dist/cjs/dropdown-menu.js

@@ -2,6 +2,8 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
+var _typeof = require("@babel/runtime/helpers/typeof");
+
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -15,9 +17,7 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
-var _react = require("react");
-
-var _react2 = require("@emotion/react");
+var _react = _interopRequireWildcard(require("react"));
 
 var _bindEventListener = require("bind-event-listener");
 
@@ -47,6 +47,10 @@ var _useGeneratedId = _interopRequireDefault(require("./internal/utils/use-gener
 
 var _excluded = ["ref"];
 
+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; }
+
 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) { (0, _defineProperty2.default)(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; }
@@ -189,7 +193,7 @@ var DropdownMenu = function DropdownMenu(props) {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   var id = (0, _useGeneratedId.default)();
-  return (0, _react2.jsx)(_selectionStore.default, null, (0, _react2.jsx)(_popup.default, {
+  return /*#__PURE__*/_react.default.createElement(_selectionStore.default, null, /*#__PURE__*/_react.default.createElement(_popup.default, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -211,13 +215,13 @@ var DropdownMenu = function DropdownMenu(props) {
         }));
       }
 
-      return (0, _react2.jsx)(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
+      return /*#__PURE__*/_react.default.createElement(_standardButton.default, (0, _extends2.default)({}, bindFocus, {
         ref: triggerProps.ref,
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
         isSelected: isLocalOpen,
-        iconAfter: (0, _react2.jsx)(_chevronDown.default, {
+        iconAfter: /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
           size: "medium",
           label: ""
         }),
@@ -228,7 +232,7 @@ var DropdownMenu = function DropdownMenu(props) {
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
           update = _ref.update;
-      return (0, _react2.jsx)(_focusManager.default, null, (0, _react2.jsx)(_menuWrapper.default, {
+      return /*#__PURE__*/_react.default.createElement(_focusManager.default, null, /*#__PURE__*/_react.default.createElement(_menuWrapper.default, {
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
         onClose: handleOnClose,

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

@@ -19,8 +19,6 @@ var _menuGroup = _interopRequireDefault(require("@atlaskit/menu/menu-group"));
 
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 
-var _constants = require("@atlaskit/theme/constants");
-
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 
 var _focusManager = require("../components/focus-manager");
@@ -30,24 +28,25 @@ var _isCheckboxItem = _interopRequireDefault(require("../utils/is-checkbox-item"
 var _isRadioItem = _interopRequireDefault(require("../utils/is-radio-item"));
 
 var _excluded = ["onClose", "onUpdate", "isLoading", "statusLabel", "setInitialFocusRef", "children"];
-var gridSize = (0, _constants.gridSize)();
 var spinnerContainerStyles = (0, _react2.css)({
   display: 'flex',
-  minWidth: "".concat(gridSize * 20, "px"),
-  padding: "".concat(gridSize * 2.5, "px"),
+  minWidth: '160px',
+  padding: "var(--ds-scale-250, 20px)",
   justifyContent: 'center'
 });
 
 var LoadingIndicator = function LoadingIndicator(_ref) {
   var _ref$statusLabel = _ref.statusLabel,
       statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel;
-  return (0, _react2.jsx)("div", {
-    css: spinnerContainerStyles
-  }, (0, _react2.jsx)(_spinner.default, {
-    size: "small"
-  }), (0, _react2.jsx)(_visuallyHidden.default, {
-    role: "status"
-  }, statusLabel));
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    (0, _react2.jsx)("div", {
+      css: spinnerContainerStyles
+    }, (0, _react2.jsx)(_spinner.default, {
+      size: "small"
+    }), (0, _react2.jsx)(_visuallyHidden.default, {
+      role: "status"
+    }, statusLabel))
+  );
 };
 /**
  *
@@ -75,7 +74,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
       var isCheckboxOrRadio = (0, _isCheckboxItem.default)(menuItem) || (0, _isRadioItem.default)(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     }); // Close menu if the click is triggered from a MenuItem or
-    // its decendant. Don't close the menu if the click is triggered
+    // its descendant. Don't close the menu if the click is triggered
     // from a MenuItemRadio or MenuItemCheckbox so that the user can
     // select multiple items.
 

package/dist/cjs/version.json

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

package/dist/es2019/dropdown-menu.js

@@ -1,8 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
-
-/** @jsx jsx */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { jsx } from '@emotion/react';
+import React, { useCallback, 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';
@@ -137,7 +134,7 @@ const DropdownMenu = props => {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   const id = useGeneratedId();
-  return jsx(SelectionStore, null, jsx(Popup, {
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -162,13 +159,13 @@ const DropdownMenu = props => {
         });
       }
 
-      return jsx(Button, _extends({}, bindFocus, {
+      return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
         ref: triggerProps.ref,
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
         isSelected: isLocalOpen,
-        iconAfter: jsx(ExpandIcon, {
+        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
           size: "medium",
           label: ""
         }),
@@ -179,7 +176,7 @@ const DropdownMenu = props => {
     content: ({
       setInitialFocusRef,
       update
-    }) => jsx(FocusManager, null, jsx(MenuWrapper, {
+    }) => /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
       maxHeight: MAX_HEIGHT,
       maxWidth: 800,
       onClose: handleOnClose,

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

@@ -5,22 +5,21 @@ import { useContext, useLayoutEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import Spinner from '@atlaskit/spinner';
-import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { FocusManagerContext } from '../components/focus-manager';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
-const gridSize = gridSizeFn();
 const spinnerContainerStyles = css({
   display: 'flex',
-  minWidth: `${gridSize * 20}px`,
-  padding: `${gridSize * 2.5}px`,
+  minWidth: '160px',
+  padding: "var(--ds-scale-250, 20px)",
   justifyContent: 'center'
 });
 
 const LoadingIndicator = ({
   statusLabel = 'Loading'
-}) => jsx("div", {
+}) => // eslint-disable-next-line @repo/internal/react/use-primitives
+jsx("div", {
   css: spinnerContainerStyles
 }, jsx(Spinner, {
   size: "small"
@@ -54,7 +53,7 @@ const MenuWrapper = ({
       const isCheckboxOrRadio = isCheckboxItem(menuItem) || isRadioItem(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     }); // Close menu if the click is triggered from a MenuItem or
-    // its decendant. Don't close the menu if the click is triggered
+    // its descendant. Don't close the menu if the click is triggered
     // from a MenuItemRadio or MenuItemCheckbox so that the user can
     // select multiple items.
 

package/dist/es2019/version.json

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

package/dist/esm/dropdown-menu.js

@@ -8,9 +8,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 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; }
 
-/** @jsx jsx */
-import { useCallback, useEffect, useMemo, useState } from 'react';
-import { jsx } from '@emotion/react';
+import React, { useCallback, 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';
@@ -162,7 +160,7 @@ var DropdownMenu = function DropdownMenu(props) {
     });
   }, [isFocused, isLocalOpen, handleTriggerClicked]);
   var id = useGeneratedId();
-  return jsx(SelectionStore, null, jsx(Popup, {
+  return /*#__PURE__*/React.createElement(SelectionStore, null, /*#__PURE__*/React.createElement(Popup, {
     id: isLocalOpen ? id : undefined,
     shouldFlip: shouldFlip,
     isOpen: isLocalOpen,
@@ -185,13 +183,13 @@ var DropdownMenu = function DropdownMenu(props) {
         }));
       }
 
-      return jsx(Button, _extends({}, bindFocus, {
+      return /*#__PURE__*/React.createElement(Button, _extends({}, bindFocus, {
         ref: triggerProps.ref,
         "aria-controls": triggerProps['aria-controls'],
         "aria-expanded": triggerProps['aria-expanded'],
         "aria-haspopup": triggerProps['aria-haspopup'],
         isSelected: isLocalOpen,
-        iconAfter: jsx(ExpandIcon, {
+        iconAfter: /*#__PURE__*/React.createElement(ExpandIcon, {
           size: "medium",
           label: ""
         }),
@@ -202,7 +200,7 @@ var DropdownMenu = function DropdownMenu(props) {
     content: function content(_ref) {
       var setInitialFocusRef = _ref.setInitialFocusRef,
           update = _ref.update;
-      return jsx(FocusManager, null, jsx(MenuWrapper, {
+      return /*#__PURE__*/React.createElement(FocusManager, null, /*#__PURE__*/React.createElement(MenuWrapper, {
         maxHeight: MAX_HEIGHT,
         maxWidth: 800,
         onClose: handleOnClose,

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

@@ -7,29 +7,29 @@ import { useContext, useLayoutEffect } from 'react';
 import { css, jsx } from '@emotion/react';
 import MenuGroup from '@atlaskit/menu/menu-group';
 import Spinner from '@atlaskit/spinner';
-import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import VisuallyHidden from '@atlaskit/visually-hidden';
 import { FocusManagerContext } from '../components/focus-manager';
 import isCheckboxItem from '../utils/is-checkbox-item';
 import isRadioItem from '../utils/is-radio-item';
-var gridSize = gridSizeFn();
 var spinnerContainerStyles = css({
   display: 'flex',
-  minWidth: "".concat(gridSize * 20, "px"),
-  padding: "".concat(gridSize * 2.5, "px"),
+  minWidth: '160px',
+  padding: "var(--ds-scale-250, 20px)",
   justifyContent: 'center'
 });
 
 var LoadingIndicator = function LoadingIndicator(_ref) {
   var _ref$statusLabel = _ref.statusLabel,
       statusLabel = _ref$statusLabel === void 0 ? 'Loading' : _ref$statusLabel;
-  return jsx("div", {
-    css: spinnerContainerStyles
-  }, jsx(Spinner, {
-    size: "small"
-  }), jsx(VisuallyHidden, {
-    role: "status"
-  }, statusLabel));
+  return (// eslint-disable-next-line @repo/internal/react/use-primitives
+    jsx("div", {
+      css: spinnerContainerStyles
+    }, jsx(Spinner, {
+      size: "small"
+    }), jsx(VisuallyHidden, {
+      role: "status"
+    }, statusLabel))
+  );
 };
 /**
  *
@@ -57,7 +57,7 @@ var MenuWrapper = function MenuWrapper(_ref2) {
       var isCheckboxOrRadio = isCheckboxItem(menuItem) || isRadioItem(menuItem);
       return menuItem.contains(e.target) && !isCheckboxOrRadio;
     }); // Close menu if the click is triggered from a MenuItem or
-    // its decendant. Don't close the menu if the click is triggered
+    // its descendant. Don't close the menu if the click is triggered
     // from a MenuItemRadio or MenuItemCheckbox so that the user can
     // select multiple items.
 

package/dist/esm/version.json

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

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

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { DropdownMenuProps } from './types';
 /**
  * __Dropdown menu__
@@ -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 = HTMLElement>(props: DropdownMenuProps<T>) => jsx.JSX.Element;
+declare const DropdownMenu: <T extends HTMLElement = HTMLElement>(props: DropdownMenuProps<T>) => JSX.Element;
 export default DropdownMenu;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/dropdown-menu",
-  "version": "11.5.3",
+  "version": "11.5.5",
   "description": "A dropdown menu displays a list of actions or options to a user.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,19 +12,11 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*",
-        "dist/types-ts4.0/index.d.ts"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "disableProductCI": true,
     "team": "Design System Team",
+    "disableProductCI": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Dropdown menu",
@@ -40,7 +32,7 @@
     "@atlaskit/popup": "^1.5.0",
     "@atlaskit/spinner": "^15.2.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@atlaskit/visually-hidden": "^1.1.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
@@ -53,7 +45,9 @@
   "devDependencies": {
     "@atlaskit/avatar": "^21.1.0",
     "@atlaskit/docs": "*",
-    "@atlaskit/lozenge": "11.3.0",
+    "@atlaskit/ds-explorations": "^1.0.0",
+    "@atlaskit/heading": "^1.0.0",
+    "@atlaskit/lozenge": "11.3.1",
     "@atlaskit/modal-dialog": "^12.4.0",
     "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
@@ -82,9 +76,14 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "primitives",
+        "lite-mode"
+      ],
       "design-system": "v1",
-      "design-tokens": "spacing",
+      "design-tokens": [
+        "spacing"
+      ],
       "styling": [
         "static",
         "emotion"

package/report.api.md

@@ -25,7 +25,7 @@ import type { TriggerProps } from '@atlaskit/popup/types';
 
 // @public (undocumented)
 export interface CustomTriggerProps<
-  TriggerElement extends HTMLElement = HTMLElement
+  TriggerElement extends HTMLElement = HTMLElement,
 > extends Omit<TriggerProps, 'ref'> {
   isSelected?: boolean;
   onClick?: (e: MouseEvent_2 | KeyboardEvent_2) => void;
@@ -127,7 +127,7 @@ export interface DropdownMenuGroupProps extends SectionProps_2 {}
 
 // @public (undocumented)
 export interface DropdownMenuProps<
-  TriggerElement extends HTMLElement = HTMLElement
+  TriggerElement extends HTMLElement = HTMLElement,
 > {
   appearance?: 'default' | 'tall';
   autoFocus?: boolean;

package/dist/types-ts4.0/checkbox/dropdown-item-checkbox-group.d.ts

@@ -1,16 +0,0 @@
-/// <reference types="react" />
-import type { SectionProps } from '@atlaskit/menu';
-interface DropdownItemCheckboxGroupProps extends SectionProps {
-    /**
-     * Unique identifier for the checkbox group.
-     */
-    id: string;
-}
-/**
- * __Dropdown item checkbox group__
- *
- * A wrapping element for dropdown menu checkbox items.
- *
- */
-declare const DropdownItemCheckboxGroup: (props: DropdownItemCheckboxGroupProps) => JSX.Element;
-export default DropdownItemCheckboxGroup;

package/dist/types-ts4.0/checkbox/dropdown-item-checkbox.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { DropdownItemCheckboxProps } from '../types';
-/**
- * __Dropdown item checkbox__
- *
- * A dropdown item checkbox creates groups that have multiple selections.
- *
- * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/examples)
- * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/code)
- * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-checkbox/usage)
- */
-declare const DropdownItemCheckbox: (props: DropdownItemCheckboxProps) => JSX.Element;
-export default DropdownItemCheckbox;

package/dist/types-ts4.0/dropdown-menu-item-group.d.ts

@@ -1,11 +0,0 @@
-/**
- * __Section__
- *
- * A dropdown item group includes all the actions or items in a dropdown menu.
- *
- * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-group/examples)
- * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-group/code)
- * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-group/usage)
- */
-import Section from '@atlaskit/menu/section';
-export default Section;

package/dist/types-ts4.0/dropdown-menu-item.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { DropdownItemProps } from './types';
-/**
- * __Dropdown menu item__
- *
- * A dropdown item populates the dropdown menu with items. Every item should be inside a dropdown item group.
- *
- * - [Examples](https://atlassian.design/components/dropdown-item/examples)
- * - [Code](https://atlassian.design/components/dropdown-item/code)
- * - [Usage](https://atlassian.design/components/dropdown-item/usage)
- */
-declare const DropdownMenuItem: (props: DropdownItemProps) => JSX.Element;
-export default DropdownMenuItem;

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

@@ -1,13 +0,0 @@
-import { jsx } from '@emotion/react';
-import type { DropdownMenuProps } from './types';
-/**
- * __Dropdown menu__
- *
- * A dropdown menu displays a list of actions or options to a user.
- *
- * - [Examples](https://atlassian.design/components/dropdown-menu/examples)
- * - [Code](https://atlassian.design/components/dropdown-menu/code)
- * - [Usage](https://atlassian.design/components/dropdown-menu/usage)
- */
-declare const DropdownMenu: <T extends HTMLElement = HTMLElement>(props: DropdownMenuProps<T>) => jsx.JSX.Element;
-export default DropdownMenu;

package/dist/types-ts4.0/index.d.ts

@@ -1,8 +0,0 @@
-export { default } from './dropdown-menu';
-export { default as DropdownItemGroup } from './dropdown-menu-item-group';
-export { default as DropdownItem } from './dropdown-menu-item';
-export { default as DropdownItemCheckbox } from './checkbox/dropdown-item-checkbox';
-export { default as DropdownItemCheckboxGroup } from './checkbox/dropdown-item-checkbox-group';
-export { default as DropdownItemRadio } from './radio/dropdown-item-radio';
-export { default as DropdownItemRadioGroup } from './radio/dropdown-item-radio-group';
-export type { DropdownMenuProps, DropdownMenuGroupProps, DropdownItemProps, OnOpenChangeArgs, CustomTriggerProps, } from './types';

package/dist/types-ts4.0/internal/components/focus-manager.d.ts

@@ -1,19 +0,0 @@
-import React, { FC } from 'react';
-import { FocusableElement } from '../../types';
-/**
- *
- *
- * Context provider which maintains the list of focusable elements and a method to
- * register new menu items.
- * This list drives the keyboard navgation of the menu.
- *
- */
-export declare const FocusManagerContext: React.Context<{
-    menuItemRefs: FocusableElement[];
-    registerRef: (ref: FocusableElement) => void;
-}>;
-/**
- * Focus manager logic
- */
-declare const FocusManager: FC;
-export default FocusManager;

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

@@ -1,11 +0,0 @@
-import { jsx } from '@emotion/react';
-import { MenuWrapperProps } from '../../types';
-/**
- *
- * MenuWrapper wraps all the menu items.
- * It handles the logic to close the menu when a MenuItem is clicked, but leaves it open
- * if a CheckboxItem or RadioItem is clicked.
- * It also sets focus to the first menu item when opened.
- */
-declare const MenuWrapper: ({ onClose, onUpdate, isLoading, statusLabel, setInitialFocusRef, children, ...props }: MenuWrapperProps) => jsx.JSX.Element;
-export default MenuWrapper;

package/dist/types-ts4.0/internal/context/checkbox-group-context.d.ts

@@ -1,5 +0,0 @@
-/// <reference types="react" />
-/**
- * Holds the unique identifier for the checkbox group.
- */
-export declare const CheckboxGroupContext: import("react").Context<string>;

package/dist/types-ts4.0/internal/context/selection-store.d.ts

@@ -1,27 +0,0 @@
-import React from 'react';
-declare type OptionsInGroup = {
-    [key: string]: boolean | undefined;
-};
-declare type SelectionStoreContextProps = {
-    setItemState: (group: string, id: string, value: boolean | undefined) => void;
-    getItemState: (group: string, id: string) => boolean | undefined;
-    setGroupState: (group: string, value: OptionsInGroup) => void;
-    getGroupState: (group: string) => OptionsInGroup;
-};
-/**
- *
- * SelectionStoreContext maintains the state of the selected items
- * and getter setters.
- *
- */
-export declare const SelectionStoreContext: React.Context<SelectionStoreContextProps>;
-declare type SelectionStoreProps = {
-    children: React.ReactNode;
-};
-/**
- * Selection store will persist data as long as it remains mounted.
- * It handles the uncontrolled story for dropdown menu when the menu
- * items can be mounted/unmounted depending if the menu is open or closed.
- */
-declare const SelectionStore: (props: SelectionStoreProps) => JSX.Element;
-export default SelectionStore;

package/dist/types-ts4.0/internal/hooks/use-checkbox-state.d.ts

@@ -1,17 +0,0 @@
-declare type CheckboxStateArgs = {
-    id: string;
-    isSelected: boolean | undefined;
-    defaultSelected: boolean | undefined;
-};
-declare type SetStateCallback = (value: boolean | undefined) => boolean;
-declare type CheckboxStateValue = [
-    boolean,
-    (newValue: SetStateCallback) => void
-];
-/**
- * Custom hook to handle checkbox state for dropdown menu.
- * It works in tandem with the selection store context when the
- * component is uncontrolled.
- */
-declare const useCheckboxState: ({ isSelected, id, defaultSelected, }: CheckboxStateArgs) => CheckboxStateValue;
-export default useCheckboxState;

package/dist/types-ts4.0/internal/hooks/use-radio-state.d.ts

@@ -1,12 +0,0 @@
-declare type RadioStateArgs = {
-    id: string;
-    isSelected: boolean | undefined;
-    defaultSelected: boolean | undefined;
-};
-declare type SetStateCallback = (value: boolean | undefined) => boolean;
-declare type RadioStateValue = [
-    boolean,
-    (newValue: SetStateCallback) => void
-];
-declare function useRadioState({ id, isSelected, defaultSelected, }: RadioStateArgs): RadioStateValue;
-export default useRadioState;

package/dist/types-ts4.0/internal/hooks/use-register-item-with-focus-manager.d.ts

@@ -1,4 +0,0 @@
-/// <reference types="react" />
-import { FocusableElement } from '../../types';
-declare function useRegisterItemWithFocusManager(): import("react").RefObject<FocusableElement>;
-export default useRegisterItemWithFocusManager;

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

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

package/dist/types-ts4.0/internal/utils/handle-focus.d.ts

@@ -1,2 +0,0 @@
-import { FocusableElement } from '../../types';
-export default function handleFocus(refs: Array<FocusableElement>): (e: KeyboardEvent) => void;

package/dist/types-ts4.0/internal/utils/is-checkbox-item.d.ts

@@ -1 +0,0 @@
-export default function isCheckboxItem(element: HTMLElement): boolean;

package/dist/types-ts4.0/internal/utils/is-radio-item.d.ts

@@ -1 +0,0 @@
-export default function isCheckboxItem(element: HTMLElement): boolean;

package/dist/types-ts4.0/internal/utils/is-voice-over-supported.d.ts

@@ -1,2 +0,0 @@
-declare const isVoiceOverSupported: () => boolean;
-export default isVoiceOverSupported;

package/dist/types-ts4.0/internal/utils/reset-options-in-group.d.ts

@@ -1,4 +0,0 @@
-declare const resetOptionsInGroup: (group: {
-    [key: string]: boolean | undefined;
-}) => {};
-export default resetOptionsInGroup;

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

@@ -1,5 +0,0 @@
-/**
- * useGeneratedId generates a random string which remains constant across
- * renders when called without any parameter.
- */
-export default function useGeneratedId(): string;

package/dist/types-ts4.0/radio/dropdown-item-radio-group.d.ts

@@ -1,25 +0,0 @@
-import React from 'react';
-import type { SectionProps } from '@atlaskit/menu';
-interface DropdownItemRadioGroupProps extends SectionProps {
-    id: string;
-}
-interface RadioGroupContextProps {
-    id: string;
-    radioGroupState: {
-        [key: string]: boolean | undefined;
-    };
-    selectRadioItem: (id: string, value: boolean) => void;
-}
-/**
- * __Radio group context__
- * Context provider that wraps each DropdownItemRadioGroup
- */
-export declare const RadioGroupContext: React.Context<RadioGroupContextProps>;
-/**
- * __Dropdown item radio group__
- *  Store which manages the selection state for each DropdownItemRadio
- *  across mount and unmounts.
- *
- */
-declare const DropdownItemRadioGroup: (props: DropdownItemRadioGroupProps) => JSX.Element;
-export default DropdownItemRadioGroup;

package/dist/types-ts4.0/radio/dropdown-item-radio.d.ts

@@ -1,13 +0,0 @@
-/// <reference types="react" />
-import { DropdownItemRadioProps } from '../types';
-/**
- * __Dropdown item radio__
- *
- * A dropdown item radio displays groups that have a single selection.
- *
- * - [Examples](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/examples)
- * - [Code](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/code)
- * - [Usage](https://atlassian.design/components/dropdown-menu/dropdown-item-radio/usage)
- */
-declare const DropdownItemRadio: (props: DropdownItemRadioProps) => JSX.Element;
-export default DropdownItemRadio;

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

@@ -1,292 +0,0 @@
-import { KeyboardEvent, MouseEvent, ReactElement, ReactNode, Ref } from 'react';
-import type { CustomItemProps, MenuGroupProps, SectionProps } from '@atlaskit/menu/types';
-import type { ContentProps, TriggerProps } from '@atlaskit/popup/types';
-export declare type FocusableElement = HTMLAnchorElement | HTMLButtonElement;
-export declare type Action = 'next' | 'prev' | 'first' | 'last';
-export declare type Placement = 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start';
-export declare type ItemId = string;
-export declare type GroupId = string;
-export declare type CachedItem = {
-    id: ItemId;
-    groupId: GroupId;
-};
-export declare type FocusItem = {
-    itemId: ItemId;
-    itemNode: HTMLElement;
-};
-export declare type Behaviors = 'checkbox' | 'radio' | 'menuitemcheckbox' | 'menuitemradio';
-export interface CustomTriggerProps<TriggerElement extends HTMLElement = HTMLElement> extends Omit<TriggerProps, 'ref'> {
-    /**
-     * Ref that should be applied to the trigger. This is used to calculate the menu position.
-     */
-    triggerRef: Ref<TriggerElement>;
-    /**
-     * Makes the trigger appear selected.
-     */
-    isSelected?: boolean;
-    /**
-     * Event that is triggered when the element is clicked.
-     */
-    onClick?: (e: MouseEvent | KeyboardEvent) => void;
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     *
-     * As dropdown-menu is composed of different components, we passed down the testId to the sub component you want to test:
-     * - `testId--trigger` to get the menu trigger.
-     * - `testId--content` to get the dropdown content trigger.
-     */
-    testId?: string;
-}
-export interface OnOpenChangeArgs {
-    isOpen: boolean;
-    event: MouseEvent | KeyboardEvent;
-}
-export interface MenuWrapperProps extends MenuGroupProps {
-    setInitialFocusRef?: ContentProps['setInitialFocusRef'];
-    onClose?: ContentProps['onClose'];
-    onUpdate: ContentProps['update'];
-    isLoading?: DropdownMenuProps['isLoading'];
-    statusLabel?: DropdownMenuProps['statusLabel'];
-}
-export interface DropdownMenuGroupProps extends SectionProps {
-}
-export interface DropdownMenuProps<TriggerElement extends HTMLElement = HTMLElement> {
-    /**
-     * Controls the appearance of the menu.
-     * Default menu has scroll after its height exceeds the pre-defined amount.
-     * Tall menu has no scroll until the height exceeds the height of the viewport.
-     */
-    appearance?: 'default' | 'tall';
-    /**
-     * Controls if the first menu item receives focus when menu is opened. Note that the menu has a focus lock
-     * which traps the focus within the menu. Also, the first item gets fouced automatically
-     * if the menu is triggered using the keyboard.
-     *
-     */
-    autoFocus?: boolean;
-    /**
-     * Content that will be rendered inside the layer element. Should typically be
-     * `DropdownItemGroup` or `DropdownItem`, or checkbox / radio variants of those.
-     */
-    children?: ReactNode;
-    /**
-     * If true, a Spinner is rendered instead of the items
-     */
-    isLoading?: boolean;
-    /**
-     * Text to be used as status for assistive technologies. Defaults to "Loading".
-     */
-    statusLabel?: string;
-    /**
-     * Controls the open state of the dropdown.
-     */
-    isOpen?: boolean;
-    /**
-     * Position of the menu.
-     */
-    placement?: Placement;
-    /**
-     * Allows the dropdown menu to be placed on the opposite side of its trigger if it does not
-     * fit in the viewport.
-     */
-    shouldFlip?: boolean;
-    /**
-     * Content which will trigger the dropdown menu to open and close. Use with `triggerType`
-     * to easily get a button trigger.
-     */
-    trigger?: string | ((triggerButtonProps: CustomTriggerProps<TriggerElement>) => ReactElement);
-    /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     *
-     * As dropdown-menu is composed of different components, we passed down the testId to the sub component you want to test:
-     * - `testId--trigger` to get the menu trigger.
-     * - `testId--content` to get the dropdown content trigger.
-     */
-    testId?: string;
-    /**
-     * Controls the initial open state of the dropdown. If provided, the component is considered to be controlled
-     * which means that the user is responsible for managing the open and close state of the menu.
-     */
-    defaultOpen?: boolean;
-    /**
-     * Called when the menu should be open/closed. Receives an object with `isOpen` state.
-     */
-    onOpenChange?: (args: OnOpenChangeArgs) => void;
-    /**
-     * Z-index that the popup should be displayed in.
-     * This is passed to the portal component.
-     * Defaults to `layers.modal()` from `@atlaskit/theme` which is 510.
-     */
-    zIndex?: number;
-}
-export interface DropdownItemProps {
-    /**
-     * Primary content for the item.
-     */
-    children: React.ReactNode;
-    /**
-     * Custom component to render as an item.
-     */
-    component?: CustomItemProps['component'];
-    /**
-     * Description of the item.
-     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
-     */
-    description?: string | JSX.Element;
-    /**
-     * Makes the element appear disabled as well as removing interactivity.
-     */
-    isDisabled?: boolean;
-    /**
-     * When `true` the title of the item will wrap multiple lines if it's long enough.
-     */
-    shouldTitleWrap?: boolean;
-    /**
-     * When `true` the description of the item will wrap multiple lines if it's long enough.
-     */
-    shouldDescriptionWrap?: boolean;
-    /**
-     * Event that is triggered when the element is clicked.
-     */
-    onClick?: (e: MouseEvent | KeyboardEvent) => void;
-    /**
-     * Makes the element appear selected.
-     */
-    isSelected?: boolean;
-    /**
-     * Link to another page.
-     */
-    href?: string;
-    /**
-     * Where to display the linked URL,
-     * see [anchor information](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a) on mdn for more information.
-     */
-    target?: string;
-    /**
-     * Adds a title attribute to the root item element.
-     */
-    title?: string;
-    /**
-     * Element to render before the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
-     */
-    elemBefore?: React.ReactNode;
-    /**
-     * Element to render after the item text.
-     * Generally should be an [icon](https://atlaskit.atlassian.com/packages/design-system/icon) component.
-     */
-    elemAfter?: React.ReactNode;
-    /**
-     * The relationship of the linked URL as space-separated link types.
-     * Generally you'll want to set this to "noopener noreferrer" when `target` is "_blank".
-     */
-    rel?: string;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-}
-export interface DropdownItemCheckboxProps {
-    /**
-     * Primary content for the item.
-     */
-    children: React.ReactNode;
-    /**
-     * Description of the item.
-     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
-     */
-    description?: string | JSX.Element;
-    /**
-     * Makes the checkbox appear disabled as well as removing interactivity.
-     */
-    isDisabled?: boolean;
-    /**
-     * When `true` the title of the item will wrap multiple lines if it's long enough.
-     */
-    shouldTitleWrap?: boolean;
-    /**
-     * When `true` the description of the item will wrap multiple lines if it's long enough.
-     */
-    shouldDescriptionWrap?: boolean;
-    /**
-     * Event that is triggered when the checkbox is clicked.
-     */
-    onClick?: (e: MouseEvent | KeyboardEvent) => void;
-    /**
-     * Sets whether the checkbox is checked or unchecked.
-     */
-    isSelected?: boolean;
-    /**
-     * Sets whether the checkbox begins selected.
-     */
-    defaultSelected?: boolean;
-    /**
-     * Unique id of a checkbox
-     */
-    id: string;
-    /**
-     * Adds a title attribute to the root item element.
-     */
-    title?: string;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-}
-export interface DropdownItemRadioProps {
-    /**
-     * Primary content for the item.
-     */
-    children: React.ReactNode;
-    /**
-     * Description of the item.
-     * This will render smaller text below the primary text of the item as well as slightly increasing the height of the item.
-     */
-    description?: string | JSX.Element;
-    /**
-     * Makes the checkbox appear disabled as well as removing interactivity.
-     */
-    isDisabled?: boolean;
-    /**
-     * When `true` the title of the item will wrap multiple lines if it's long enough.
-     */
-    shouldTitleWrap?: boolean;
-    /**
-     * When `true` the description of the item will wrap multiple lines if it's long enough.
-     */
-    shouldDescriptionWrap?: boolean;
-    /**
-     * Event that is triggered when the checkbox is clicked.
-     */
-    onClick?: (e: MouseEvent | KeyboardEvent) => void;
-    /**
-     * Sets whether the checkbox is checked or unchecked.
-     */
-    isSelected?: boolean;
-    /**
-     * Sets whether the checkbox begins selected.
-     */
-    defaultSelected?: boolean;
-    /**
-     * Unique id of a checkbox
-     */
-    id: string;
-    /**
-     * Adds a title attribute to the root item element.
-     */
-    title?: string;
-    /**
-     * A `testId` prop is provided for specified elements,
-     * which is a unique string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     */
-    testId?: string;
-}