@atlaskit/menu 7.0.0 → 8.0.0

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

@@ -1,106 +1,34 @@
+/* skeleton-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+import "./skeleton-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+const skeletonItemElemSize = 20;
+const N20A = 'rgba(9, 30, 66, 0.04)';
+const N30A = 'rgba(9, 30, 66, 0.08)';
+const 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.
  */
+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 { borderRadius as borderRadiusFn,
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import SkeletonShimmer from '../internal/components/skeleton-shimmer';
-const gridSize = gridSizeFn();
-const borderRadius = borderRadiusFn();
-const itemElemSpacing = gridSize * 1.5;
-const itemExpectedElemSize = gridSize * 3;
-const itemMinHeight = gridSize * 5;
-const skeletonItemElemSize = gridSize * 2.5;
-const itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
-const skeletonTextBorderRadius = 100;
-const skeletonContentHeight = 9;
-const skeletonColor = `var(--ds-skeleton, ${N20A})`;
-const skeletonStyles = css({
-  display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  minHeight: itemMinHeight,
-  padding: `0 ${"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
-  }
-});
-const defaultWidthStyles = 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%'
-  }
-});
-const customWidthStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    flexBasis: 'var(--width)'
-  }
-});
-const beforeElementStyles = 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)"
-  }
-});
-const avatarStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    borderRadius: '100%'
-  }
-});
-const iconStyles = 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
-  }
-});
+/**
+ * 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.
+ */
+const shimmerStyles = null;
 
 /**
  * __Skeleton item__
@@ -114,29 +42,17 @@ const SkeletonItem = ({
   hasAvatar,
   hasIcon,
   isShimmering = false,
+  isSideNavSkeleton = 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());
-  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.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 _19oh1qxh _10881qxh _18lgp3kn _zo24p3kn _1hfklbf8 _1ruslbf8", xcss]),
     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
-  }));
+  });
 };
 export default SkeletonItem;

package/dist/esm/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/esm/menu-item/skeleton-heading-item.js

@@ -1,39 +1,31 @@
+/* skeleton-heading-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./skeleton-heading-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(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
-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';
-var 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, ".concat(N20A, ")"),
-    borderRadius: 100,
-    content: '""'
-  }
-});
-var defaultWidthStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    width: '30%'
-  }
-});
-var 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.
+ */
+var shimmerStyles = null;
 
 /**
  * __Skeleton heading item__
@@ -48,29 +40,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 : _ref$cssFn;
-  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
-  var UNSAFE_overrides = css(cssFn(undefined));
-  return jsx(SkeletonShimmer, {
-    isShimmering: isShimmering
-  }, function (_ref2) {
-    var className = _ref2.className;
-    return 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: 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": ix("var(--ds-skeleton, ".concat(N20A, ")")),
+      "--_wb902m": ix("var(--ds-skeleton-subtle, ".concat(N30A, ")"))
+    })
   });
 };
 export default SkeletonHeadingItem;

package/dist/esm/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/esm/menu-item/skeleton-item.js

@@ -1,106 +1,37 @@
+/* skeleton-item.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import "./skeleton-item.compiled.css";
+import * as React from 'react';
+import { ax, ix } from "@compiled/react/runtime";
+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) { _defineProperty(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
-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 { borderRadius as borderRadiusFn,
-// eslint-disable-next-line @atlaskit/design-system/no-deprecated-imports
-gridSize as gridSizeFn } from '@atlaskit/theme/constants';
-import SkeletonShimmer from '../internal/components/skeleton-shimmer';
-var gridSize = gridSizeFn();
-var borderRadius = borderRadiusFn();
-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(N20A, ")");
-var skeletonStyles = 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 = 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 = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::after': {
-    flexBasis: 'var(--width)'
-  }
-});
-var beforeElementStyles = 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 = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before': {
-    borderRadius: '100%'
-  }
-});
-var iconStyles = 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__
@@ -115,30 +46,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 : _ref$cssFn;
-  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
-  var UNSAFE_overrides = css(cssFn());
-  return jsx(SkeletonShimmer, {
-    isShimmering: isShimmering
-  }, function (_ref2) {
-    var className = _ref2.className;
-    return 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: 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": ix("var(--ds-skeleton, ".concat(N20A, ")")),
+      "--_wb902m": ix("var(--ds-skeleton-subtle, ".concat(N30A, ")"))
+    })
   });
 };
 export default SkeletonItem;

package/dist/types/index.d.ts

@@ -8,4 +8,4 @@ export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-ite
 export { default as Section } from './menu-section/section';
 export { default as MenuGroup } from './menu-section/menu-group';
 export { default as PopupMenuGroup } from './menu-section/popup-menu-group';
-export type { ButtonItemProps, CSSFn, StatelessCSSFn, CustomItemComponentProps, CustomItemProps, HeadingItemProps, ItemState, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, } from './types';
+export type { ButtonItemProps, CustomItemComponentProps, CustomItemProps, HeadingItemProps, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, } from './types';

package/dist/types/menu-item/skeleton-heading-item.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { SkeletonHeadingItemProps } from '../types';
 /**
  * __Skeleton heading item__
@@ -8,5 +8,5 @@ import type { SkeletonHeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, xcss, }: SkeletonHeadingItemProps) => JSX.Element;
 export default SkeletonHeadingItem;

package/dist/types/menu-item/skeleton-item.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { SkeletonItemProps } from '../types';
 /**
  * __Skeleton item__
@@ -8,5 +8,5 @@ import type { SkeletonItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, isSideNavSkeleton, testId, width, xcss, }: SkeletonItemProps) => JSX.Element;
 export default SkeletonItem;

package/dist/types/types.d.ts

@@ -1,5 +1,5 @@
 import { type ComponentType, type PropsWithChildren, type Ref } from 'react';
-import { type CSSObject } from '@emotion/react';
+import { StrictXCSSProp } from '@atlaskit/css';
 import type { SpacingMode } from './internal/components/menu-context';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
@@ -318,10 +318,14 @@ export interface SkeletonItemProps {
      */
     isShimmering?: boolean;
     /**
-     * A function that overrides the styles of this component.
-     * It receives the current styles and returns a customized styles object.
+     * When `true`, the size/spacing of the skeleton size/spacing is adjusted to match the side navigation menu item.
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isSideNavSkeleton?: boolean;
+    /**
+     * Bounded style overrides.
      */
-    cssFn?: StatelessCSSFn;
+    xcss?: StrictXCSSProp<'minHeight' | 'paddingBlock' | 'paddingInline' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', never>;
 }
 export interface HeadingItemProps {
     /**
@@ -364,29 +368,7 @@ export interface SkeletonHeadingItemProps {
      */
     isShimmering?: boolean;
     /**
-     * A function that overrides the styles of this component.
-     * It receives the current styles and returns a customized styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     * Bounded style overrides.
      */
-    cssFn?: StatelessCSSFn;
-}
-export type ItemState = {
-    isSelected: boolean;
-    isDisabled: boolean;
-};
-/**
- * A function that overrides the styles of
- * menu components. It receives the current state
- * and should return a CSSObject.
- *
- * @see @atlaskit/menu/docs/85-overriding-item-styles
- * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
- */
-export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
-    (currentState: TState): CSSObject | CSSObject[];
+    xcss?: StrictXCSSProp<'paddingBlock' | 'paddingInline' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', never>;
 }
-/**
- * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
- */
-export type StatelessCSSFn = CSSFn<void>;

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

@@ -8,4 +8,4 @@ export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-ite
 export { default as Section } from './menu-section/section';
 export { default as MenuGroup } from './menu-section/menu-group';
 export { default as PopupMenuGroup } from './menu-section/popup-menu-group';
-export type { ButtonItemProps, CSSFn, StatelessCSSFn, CustomItemComponentProps, CustomItemProps, HeadingItemProps, ItemState, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, } from './types';
+export type { ButtonItemProps, CustomItemComponentProps, CustomItemProps, HeadingItemProps, LinkItemProps, MenuGroupProps, SectionProps, SkeletonHeadingItemProps, SkeletonItemProps, Dimension, MenuItemProps as BaseItemProps, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, } from './types';

package/dist/types-ts4.5/menu-item/skeleton-heading-item.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { SkeletonHeadingItemProps } from '../types';
 /**
  * __Skeleton heading item__
@@ -8,5 +8,5 @@ import type { SkeletonHeadingItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-heading-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
+declare const SkeletonHeadingItem: ({ isShimmering, testId, width, xcss, }: SkeletonHeadingItemProps) => JSX.Element;
 export default SkeletonHeadingItem;

package/dist/types-ts4.5/menu-item/skeleton-item.d.ts

@@ -1,4 +1,4 @@
-import { jsx } from '@emotion/react';
+/// <reference types="react" />
 import type { SkeletonItemProps } from '../types';
 /**
  * __Skeleton item__
@@ -8,5 +8,5 @@ import type { SkeletonItemProps } from '../types';
  * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/skeleton-item)
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
  */
-declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
+declare const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, isSideNavSkeleton, testId, width, xcss, }: SkeletonItemProps) => JSX.Element;
 export default SkeletonItem;