@atlaskit/menu 7.1.0 → 8.0.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/menu
 
+## 8.0.0
+
+### Major Changes
+
+- [#157531](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/157531)
+  [`dd1068010784d`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/dd1068010784d) -
+  Migrated `SkeletonItem` and `SkeletonHeadingItem` components from @emotion/react to
+  @compiled/react in order toimprove performance, align with the rest of the Atlaskit techstack, and
+  support React 18 StreamingSSR.
+
+  Removed the `cssFn` prop from the `SkeletonItem` and `SkeletonHeadingItem` components.
+  Customization can now be applied via the new `xcss` prop. This allows for safe/bounded style
+  overrides.
+
+  Removed the following types related to the `cssFn` prop: `CSSFn`, `StatelessCSSFn`, `ItemState`.
+
 ## 7.1.0
 
 ### Minor Changes

package/dist/cjs/menu-item/skeleton-heading-item.compiled.css

@@ -0,0 +1,16 @@
+._14mj53f4:after{border-radius:75pt}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
+._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
+._19oh1hno:after, ._10881hno:before{animation-name:k1mc5q4v}
+._1hfk3yfp:after, ._1rus3yfp:before{background-color:var(--_1j9jaml)}
+._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1qdgu2gc:after{height:var(--ds-space-100,8px)}
+._1ywu1ule:after{display:block}
+._aetrb3bt:after{content:""}
+._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
+._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+._z0ai1r5k:after{width:30%}
+._z0airzut:after{width:var(--width)}
+@keyframes k1mc5q4v{0%{background-color:var(--_1j9jaml)}to{background-color:var(--_wb902m)}}

package/dist/cjs/menu-item/skeleton-heading-item.js

@@ -1,47 +1,41 @@
+/* skeleton-heading-item.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("@emotion/react");
-var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
-var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _colors = require("@atlaskit/theme/colors");
-var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
+require("./skeleton-heading-item.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var N20A = 'rgba(9, 30, 66, 0.04)';
+var N30A = 'rgba(9, 30, 66, 0.08)';
+var styles = {
+  skeleton: "_1rjcze3t _18zrpxbi _14mj53f4 _1ywu1ule _z0ai1r5k _1qdgu2gc _1hfklbf8 _aetrb3bt",
+  customWidth: "_z0airzut"
+};
+
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * These styles are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ * packages/design-system/menu/src/menu-item/skeleton-item.tsx
+ *
+ * Please update both.
  */
+var shimmerKeyframes = null;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var skeletonStyles = (0, _react.css)({
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    display: 'block',
-    width: '30%',
-    height: "var(--ds-space-100, 8px)",
-    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
-    borderRadius: 100,
-    content: '""'
-  }
-});
-var defaultWidthStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    width: '30%'
-  }
-});
-var customWidthStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    width: 'var(--width)'
-  }
-});
+/**
+ * These styles are defined using `css` rather than `cssMap` as there is a
+ * bug when using `cssMap` that causes a build failure due to the use of keyframes.
+ */
+var shimmerStyles = null;
 
 /**
  * __Skeleton heading item__
@@ -56,29 +50,17 @@ var SkeletonHeadingItem = function SkeletonHeadingItem(_ref) {
     isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
     testId = _ref.testId,
     width = _ref.width,
-    _ref$cssFn = _ref.cssFn,
-    cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var UNSAFE_overrides = (0, _react.css)(cssFn(undefined));
-  return (0, _react.jsx)(_skeletonShimmer.default, {
-    isShimmering: isShimmering
-  }, function (_ref2) {
-    var className = _ref2.className;
-    return (0, _react.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: className,
-      style: {
-        '--width': width
-      },
-      css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      UNSAFE_overrides],
-      "data-ds--menu--skeleton-heading-item": true,
-      "data-testid": testId
-    });
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.skeleton, width && styles.customWidth, isShimmering && "", isShimmering && "_unfq1yy8 _9nev1yy8 _kwc012o8 _joxl12o8 _18f312c5 _evp612c5 _19oh1hno _10881hno _18lgp3kn _zo24p3kn _1hfk3yfp _1rus3yfp", xcss]),
+    "data-ds--menu--skeleton-heading-item": true,
+    "data-testid": testId,
+    style: _objectSpread(_objectSpread({}, {
+      '--width': width
+    }), {}, {
+      "--_1j9jaml": (0, _runtime.ix)("var(--ds-skeleton, ".concat(N20A, ")")),
+      "--_wb902m": (0, _runtime.ix)("var(--ds-skeleton-subtle, ".concat(N30A, ")"))
+    })
   });
 };
 var _default = exports.default = SkeletonHeadingItem;

package/dist/cjs/menu-item/skeleton-item.compiled.css

@@ -0,0 +1,38 @@
+
+._14mj53f4:after{border-radius:75pt}
+._rfx31l7b:before{border-radius:3px}
+._rfx31osq:before{border-radius:100%}
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._18zrv47k{padding-inline:var(--ds-space-250,20px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._11w8rzut:after{flex-basis:var(--width)}
+._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
+._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
+._19oh1hno:after, ._10881hno:before{animation-name:k1mc5q4v}
+._1e0c1txw{display:flex}
+._1hfk3yfp:after, ._1rus3yfp:before{background-color:var(--_1j9jaml)}
+._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1kt9b3bt:before{content:""}
+._1mbqdlk8:before{margin-inline-end:14px}
+._1mbqpxbi:before{margin-inline-end:var(--ds-space-200,1pc)}
+._1mp41k8s:before{width:1.5rem}
+._1mp4gktf:before{width:20px}
+._1qdgrdoj:after{height:9px}
+._1rhxv77o:before{margin-inline-start:var(--ds-space-025,2px)}
+._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1tke1ylp{min-height:40px}
+._3mxot94y:after{margin-block-start:1px}
+._4cvr1h6o{align-items:center}
+._4rfy1ssb:nth-of-type(2n):after{flex-basis:50%}
+._69tq19wn:nth-of-type(5n):after{flex-basis:35%}
+._7bjqidpf:before{flex-shrink:0}
+._aetrb3bt:after{content:""}
+._baud1nrf:nth-of-type(3n):after{flex-basis:60%}
+._kfgt1k8s:before{height:1.5rem}
+._kfgtgktf:before{height:20px}
+._kt4d1n05:nth-of-type(6n):after{flex-basis:77%}
+._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
+._lcxvglyw{pointer-events:none}
+._mr7o1vuk:nth-of-type(4n):after{flex-basis:90%}
+._sf1e1n8h:nth-of-type(1n):after{flex-basis:70%}
+._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+@keyframes k1mc5q4v{0%{background-color:var(--_1j9jaml)}to{background-color:var(--_wb902m)}}

package/dist/cjs/menu-item/skeleton-item.js

@@ -1,112 +1,47 @@
+/* skeleton-item.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("@emotion/react");
-var _deprecationWarning = require("@atlaskit/ds-lib/deprecation-warning");
-var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
-var _skeletonShimmer = _interopRequireDefault(require("../internal/components/skeleton-shimmer"));
+require("./skeleton-item.compiled.css");
+var React = _interopRequireWildcard(require("react"));
+var _runtime = require("@compiled/react/runtime");
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var skeletonItemElemSize = 20;
+var N20A = 'rgba(9, 30, 66, 0.04)';
+var N30A = 'rgba(9, 30, 66, 0.08)';
+var styles = {
+  root: "_1rjcze3t _18zrv47k _1e0c1txw _1tke1ylp _4cvr1h6o _lcxvglyw _14mj53f4 _1qdgrdoj _1hfklbf8 _aetrb3bt _3mxot94y",
+  defaultWidth: "_sf1e1n8h _4rfy1ssb _baud1nrf _mr7o1vuk _69tq19wn _kt4d1n05",
+  customWidth: "_11w8rzut",
+  beforeElement: "_1mp4gktf _kfgtgktf _7bjqidpf _1ruslbf8 _1kt9b3bt _1mbqdlk8 _1rhxv77o",
+  avatar: "_rfx31osq",
+  icon: "_rfx31l7b",
+  sideNavSkeleton: "_18zru2gc _kfgt1k8s _1mbqpxbi _1mp41k8s"
+};
+
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * These styles are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ * packages/design-system/menu/src/menu-item/skeleton-heading-item.tsx
+ *
+ * Please update both.
  */
+var shimmerKeyframes = null;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-var gridSize = (0, _constants.gridSize)();
-var borderRadius = (0, _constants.borderRadius)();
-var itemElemSpacing = gridSize * 1.5;
-var itemExpectedElemSize = gridSize * 3;
-var itemMinHeight = gridSize * 5;
-var skeletonItemElemSize = gridSize * 2.5;
-var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
-var skeletonTextBorderRadius = 100;
-var skeletonContentHeight = 9;
-var skeletonColor = "var(--ds-skeleton, ".concat(_colors.N20A, ")");
-var skeletonStyles = (0, _react.css)({
-  display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  minHeight: itemMinHeight,
-  padding: "0 ".concat("var(--ds-space-250, 20px)"),
-  alignItems: 'center',
-  pointerEvents: 'none',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    height: skeletonContentHeight,
-    backgroundColor: skeletonColor,
-    borderRadius: skeletonTextBorderRadius,
-    content: '""',
-    // This is a little bespoke but we need to push everything down 1px
-    // because the skeleton content should align to the bottom of the text.
-    // Confirm VR test failures before accepting a change.
-    marginBlockStart: 1
-  }
-});
-var defaultWidthStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-of-type(1n)::after': {
-    flexBasis: '70%'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-of-type(2n)::after': {
-    flexBasis: '50%'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-of-type(3n)::after': {
-    flexBasis: '60%'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-of-type(4n)::after': {
-    flexBasis: '90%'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-of-type(5n)::after': {
-    flexBasis: '35%'
-  },
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  ':nth-of-type(6n)::after': {
-    flexBasis: '77%'
-  }
-});
-var customWidthStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    flexBasis: 'var(--width)'
-  }
-});
-var beforeElementStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    width: skeletonItemElemSize,
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    height: skeletonItemElemSize,
-    flexShrink: 0,
-    backgroundColor: skeletonColor,
-    content: '""',
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    marginInlineEnd: itemElemSpacing + itemElemSkeletonOffset,
-    marginInlineStart: "var(--ds-space-025, 2px)"
-  }
-});
-var avatarStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    borderRadius: '100%'
-  }
-});
-var iconStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-    borderRadius: borderRadius
-  }
-});
+/**
+ * These styles are defined using `css` rather than `cssMap` as there is a bug when using
+ * `cssMap` that causes a build failure due to the use of keyframes within this pseudo-element.
+ */
+var shimmerStyles = null;
 
 /**
  * __Skeleton item__
@@ -121,30 +56,20 @@ var SkeletonItem = function SkeletonItem(_ref) {
     hasIcon = _ref.hasIcon,
     _ref$isShimmering = _ref.isShimmering,
     isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering,
+    _ref$isSideNavSkeleto = _ref.isSideNavSkeleton,
+    isSideNavSkeleton = _ref$isSideNavSkeleto === void 0 ? false : _ref$isSideNavSkeleto,
     testId = _ref.testId,
     width = _ref.width,
-    _ref$cssFn = _ref.cssFn,
-    cssFn = _ref$cssFn === void 0 ? _noop.default : _ref$cssFn;
-  (0, _deprecationWarning.propDeprecationWarning)("@atlaskit/menu" || '', 'cssFn', cssFn !== _noop.default, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  var UNSAFE_overrides = (0, _react.css)(cssFn());
-  return (0, _react.jsx)(_skeletonShimmer.default, {
-    isShimmering: isShimmering
-  }, function (_ref2) {
-    var className = _ref2.className;
-    return (0, _react.jsx)("div", {
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-      className: className,
-      style: {
-        '--width': width
-      },
-      css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles,
-      // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-      UNSAFE_overrides],
-      "data-testid": testId
-    });
+    xcss = _ref.xcss;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([styles.root, (hasAvatar || hasIcon) && styles.beforeElement, hasAvatar && styles.avatar, hasIcon && styles.icon, width ? styles.customWidth : styles.defaultWidth, isSideNavSkeleton && styles.sideNavSkeleton, isShimmering && "", isShimmering && "_unfq1yy8 _9nev1yy8 _kwc012o8 _joxl12o8 _18f312c5 _evp612c5 _19oh1hno _10881hno _18lgp3kn _zo24p3kn _1hfk3yfp _1rus3yfp", xcss]),
+    "data-testid": testId,
+    style: _objectSpread(_objectSpread({}, {
+      '--width': width
+    }), {}, {
+      "--_1j9jaml": (0, _runtime.ix)("var(--ds-skeleton, ".concat(N20A, ")")),
+      "--_wb902m": (0, _runtime.ix)("var(--ds-skeleton-subtle, ".concat(N30A, ")"))
+    })
   });
 };
 var _default = exports.default = SkeletonItem;

package/dist/es2019/menu-item/skeleton-heading-item.compiled.css

@@ -0,0 +1,16 @@
+._14mj53f4:after{border-radius:75pt}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}
+._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
+._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
+._19oh1qxh:after, ._10881qxh:before{animation-name:kiz0l3k}
+._1hfklbf8:after, ._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1qdgu2gc:after{height:var(--ds-space-100,8px)}
+._1ywu1ule:after{display:block}
+._aetrb3bt:after{content:""}
+._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
+._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+._z0ai1r5k:after{width:30%}
+._z0airzut:after{width:var(--width)}
+@keyframes kiz0l3k{0%{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}to{background-color:var(--ds-skeleton-subtle,rgba(9,30,66,.08))}}

package/dist/es2019/menu-item/skeleton-heading-item.js

@@ -1,39 +1,28 @@
+/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./skeleton-heading-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const N20A = 'rgba(9, 30, 66, 0.04)';
+const N30A = 'rgba(9, 30, 66, 0.08)';
+const styles = {
+  skeleton: "_1rjcze3t _18zrpxbi _14mj53f4 _1ywu1ule _z0ai1r5k _1qdgu2gc _1hfklbf8 _aetrb3bt",
+  customWidth: "_z0airzut"
+};
+
 /**
- * @jsxRuntime classic
- * @jsx jsx
+ * These styles are mirrored in:
+ * packages/design-system/theme/src/constants.tsx
+ * packages/design-system/menu/src/menu-item/skeleton-item.tsx
+ *
+ * Please update both.
  */
+const shimmerKeyframes = null;
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { css, jsx } from '@emotion/react';
-import { propDeprecationWarning } from '@atlaskit/ds-lib/deprecation-warning';
-import noop from '@atlaskit/ds-lib/noop';
-import { N20A } from '@atlaskit/theme/colors';
-import SkeletonShimmer from '../internal/components/skeleton-shimmer';
-const skeletonStyles = css({
-  paddingBlock: "var(--ds-space-0, 0px)",
-  paddingInline: "var(--ds-space-200, 16px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    display: 'block',
-    width: '30%',
-    height: "var(--ds-space-100, 8px)",
-    backgroundColor: `var(--ds-skeleton, ${N20A})`,
-    borderRadius: 100,
-    content: '""'
-  }
-});
-const defaultWidthStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    width: '30%'
-  }
-});
-const customWidthStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    width: 'var(--width)'
-  }
-});
+/**
+ * These styles are defined using `css` rather than `cssMap` as there is a
+ * bug when using `cssMap` that causes a build failure due to the use of keyframes.
+ */
+const shimmerStyles = null;
 
 /**
  * __Skeleton heading item__
@@ -47,28 +36,15 @@ const SkeletonHeadingItem = ({
   isShimmering = false,
   testId,
   width,
-  cssFn = noop
+  xcss
 }) => {
-  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
-  );
-
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  const UNSAFE_overrides = css(cssFn(undefined));
-  return jsx(SkeletonShimmer, {
-    isShimmering: isShimmering
-  }, ({
-    className
-  }) => jsx("div", {
-    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
-    className: className,
+  return /*#__PURE__*/React.createElement("div", {
+    className: ax([styles.skeleton, width && styles.customWidth, isShimmering && "", isShimmering && "_unfq1yy8 _9nev1yy8 _kwc012o8 _joxl12o8 _18f312c5 _evp612c5 _19oh1qxh _10881qxh _18lgp3kn _zo24p3kn _1hfklbf8 _1ruslbf8", xcss]),
     style: {
       '--width': width
     },
-    css: [skeletonStyles, width ? customWidthStyles : defaultWidthStyles,
-    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
-    UNSAFE_overrides],
     "data-ds--menu--skeleton-heading-item": true,
     "data-testid": testId
-  }));
+  });
 };
 export default SkeletonHeadingItem;

package/dist/es2019/menu-item/skeleton-item.compiled.css

@@ -0,0 +1,38 @@
+
+._14mj53f4:after{border-radius:75pt}
+._rfx31l7b:before{border-radius:3px}
+._rfx31osq:before{border-radius:100%}
+._18zru2gc{padding-inline:var(--ds-space-100,8px)}
+._18zrv47k{padding-inline:var(--ds-space-250,20px)}
+._1rjcze3t{padding-block:var(--ds-space-0,0)}._11w8rzut:after{flex-basis:var(--width)}
+._18f312c5:after, ._evp612c5:before{animation-iteration-count:infinite}
+._18lgp3kn:after, ._zo24p3kn:before{animation-timing-function:linear}
+._19oh1qxh:after, ._10881qxh:before{animation-name:kiz0l3k}
+._1e0c1txw{display:flex}
+._1hfklbf8:after, ._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1hfklbf8:after{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1kt9b3bt:before{content:""}
+._1mbqdlk8:before{margin-inline-end:14px}
+._1mbqpxbi:before{margin-inline-end:var(--ds-space-200,1pc)}
+._1mp41k8s:before{width:1.5rem}
+._1mp4gktf:before{width:20px}
+._1qdgrdoj:after{height:9px}
+._1rhxv77o:before{margin-inline-start:var(--ds-space-025,2px)}
+._1ruslbf8:before{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}
+._1tke1ylp{min-height:40px}
+._3mxot94y:after{margin-block-start:1px}
+._4cvr1h6o{align-items:center}
+._4rfy1ssb:nth-of-type(2n):after{flex-basis:50%}
+._69tq19wn:nth-of-type(5n):after{flex-basis:35%}
+._7bjqidpf:before{flex-shrink:0}
+._aetrb3bt:after{content:""}
+._baud1nrf:nth-of-type(3n):after{flex-basis:60%}
+._kfgt1k8s:before{height:1.5rem}
+._kfgtgktf:before{height:20px}
+._kt4d1n05:nth-of-type(6n):after{flex-basis:77%}
+._kwc012o8:after, ._joxl12o8:before{animation-duration:1.5s}
+._lcxvglyw{pointer-events:none}
+._mr7o1vuk:nth-of-type(4n):after{flex-basis:90%}
+._sf1e1n8h:nth-of-type(1n):after{flex-basis:70%}
+._unfq1yy8:after, ._9nev1yy8:before{animation-direction:alternate}
+@keyframes kiz0l3k{0%{background-color:var(--ds-skeleton,rgba(9,30,66,.04))}to{background-color:var(--ds-skeleton-subtle,rgba(9,30,66,.08))}}