@atlaskit/dropdown-menu 12.20.4 → 12.21.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/dropdown-menu
 
+## 12.21.1
+
+### Patch Changes
+
+- [#157534](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/157534)
+  [`ca0824645f3a5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ca0824645f3a5) -
+  Remove the use of Math.random for the generation of IDs
+
+## 12.21.0
+
+### Minor Changes
+
+- [#155054](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/155054)
+  [`5e7c49fc3d545`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5e7c49fc3d545) -
+  Updated group title styles to use modernized typography.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.20.4
 
 ### Patch Changes

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

@@ -1,31 +1,17 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-var _typography = require("@atlaskit/theme/typography");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
-var itemHeadingFontSize = _typography.headingSizes.h100.size;
-var headingStyles = (0, _react.css)({
-  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: itemHeadingFontSize,
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)",
-  textTransform: 'uppercase'
+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'
 });
 
 /**
@@ -38,12 +24,12 @@ var headingStyles = (0, _react.css)({
 var GroupTitle = function GroupTitle(_ref) {
   var id = _ref.id,
     title = _ref.title;
-  return (0, _react.jsx)("div", {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     "data-ds--menu--heading-item": true,
     role: "menuitem",
     id: id,
     "aria-hidden": "true",
-    css: headingStyles
+    xcss: headingStyles
   }, title);
 };
 var _default = exports.default = GroupTitle;

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

@@ -5,22 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.PREFIX = void 0;
 exports.default = useGeneratedId;
-var _react = require("react");
+var _useId = require("@atlaskit/ds-lib/use-id");
 var PREFIX = exports.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
-    // between server and client generated markup.
-    // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-    "".concat(PREFIX).concat(Math.random().toString(16).substr(2, 8))
-  );
-};
 
 /**
  * useGeneratedId generates a random string which remains constant across
  * renders when called without any parameter.
  */
 function useGeneratedId() {
-  var cachedId = (0, _react.useRef)(generateRandomString());
-  return cachedId.current;
+  var id = (0, _useId.useId)();
+  return "".concat(PREFIX).concat(id);
 }

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

@@ -1,24 +1,10 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { N300 } from '@atlaskit/theme/colors';
-import { headingSizes } from '@atlaskit/theme/typography';
-const itemHeadingContentHeight = headingSizes.h100.lineHeight;
-const itemHeadingFontSize = headingSizes.h100.size;
-const headingStyles = css({
-  color: `var(--ds-text-subtle, ${N300})`,
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: itemHeadingFontSize,
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)",
-  textTransform: 'uppercase'
+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'
 });
 
 /**
@@ -31,11 +17,11 @@ const headingStyles = css({
 const GroupTitle = ({
   id,
   title
-}) => jsx("div", {
+}) => /*#__PURE__*/React.createElement(Box, {
   "data-ds--menu--heading-item": true,
   role: "menuitem",
   id: id,
   "aria-hidden": "true",
-  css: headingStyles
+  xcss: headingStyles
 }, title);
 export default GroupTitle;

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

@@ -1,17 +1,11 @@
-import { useRef } from 'react';
+import { useId } from '@atlaskit/ds-lib/use-id';
 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
-// between server and client generated markup.
-// eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-`${PREFIX}${Math.random().toString(16).substr(2, 8)}`;
 
 /**
  * useGeneratedId generates a random string which remains constant across
  * renders when called without any parameter.
  */
 export default function useGeneratedId() {
-  const cachedId = useRef(generateRandomString());
-  return cachedId.current;
+  const id = useId();
+  return `${PREFIX}${id}`;
 }

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

@@ -1,24 +1,10 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { N300 } from '@atlaskit/theme/colors';
-import { headingSizes } from '@atlaskit/theme/typography';
-var itemHeadingContentHeight = headingSizes.h100.lineHeight;
-var itemHeadingFontSize = headingSizes.h100.size;
-var headingStyles = css({
-  color: "var(--ds-text-subtle, ".concat(N300, ")"),
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  fontSize: itemHeadingFontSize,
-  fontWeight: "var(--ds-font-weight-bold, 700)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  lineHeight: itemHeadingContentHeight / itemHeadingFontSize,
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)",
-  textTransform: 'uppercase'
+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'
 });
 
 /**
@@ -31,12 +17,12 @@ var headingStyles = css({
 var GroupTitle = function GroupTitle(_ref) {
   var id = _ref.id,
     title = _ref.title;
-  return jsx("div", {
+  return /*#__PURE__*/React.createElement(Box, {
     "data-ds--menu--heading-item": true,
     role: "menuitem",
     id: id,
     "aria-hidden": "true",
-    css: headingStyles
+    xcss: headingStyles
   }, title);
 };
 export default GroupTitle;

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

@@ -1,19 +1,11 @@
-import { useRef } from 'react';
+import { useId } from '@atlaskit/ds-lib/use-id';
 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
-    // between server and client generated markup.
-    // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
-    "".concat(PREFIX).concat(Math.random().toString(16).substr(2, 8))
-  );
-};
 
 /**
  * useGeneratedId generates a random string which remains constant across
  * renders when called without any parameter.
  */
 export default function useGeneratedId() {
-  var cachedId = useRef(generateRandomString());
-  return cachedId.current;
+  var id = useId();
+  return "".concat(PREFIX).concat(id);
 }

package/dist/types/internal/components/group-title.d.ts

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 /**
  * __Group title__
  *
@@ -13,5 +9,5 @@ import { jsx } from '@emotion/react';
 declare const GroupTitle: ({ id, title }: {
     id: string;
     title: string;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 export default GroupTitle;

package/dist/types-ts4.5/internal/components/group-title.d.ts

@@ -1,8 +1,4 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 /**
  * __Group title__
  *
@@ -13,5 +9,5 @@ import { jsx } from '@emotion/react';
 declare const GroupTitle: ({ id, title }: {
     id: string;
     title: string;
-}) => jsx.JSX.Element;
+}) => JSX.Element;
 export default GroupTitle;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/dropdown-menu",
-	"version": "12.20.4",
+	"version": "12.21.1",
 	"description": "A dropdown menu displays a list of actions or options to a user.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -23,14 +23,14 @@
 		"runReact18": true
 	},
 	"dependencies": {
-		"@atlaskit/button": "^20.2.0",
+		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/ds-lib": "^3.1.0",
-		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/icon": "^22.24.0",
 		"@atlaskit/layering": "^0.7.0",
 		"@atlaskit/menu": "^2.13.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/popup": "^1.28.0",
+		"@atlaskit/popup": "^1.29.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/spinner": "^16.3.0",
 		"@atlaskit/theme": "^14.0.0",