@atlaskit/menu 1.3.5 → 1.3.6

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/menu
 
+## 1.3.6
+
+### Patch Changes
+
+- [`c8145459eb5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c8145459eb5) - [ux] Updating skeleton token in @atlakist/menu, @atlaskit/theme
+- Updated dependencies
+
 ## 1.3.5
 
 ### Patch Changes

package/__perf__/utils/example-runner.tsx

@@ -1,5 +1,7 @@
 import React, { useLayoutEffect, useRef, useState } from 'react';
 
+import { bindAll } from 'bind-event-listener';
+
 type ItemComponentProps =
   | React.ComponentType<React.AllHTMLAttributes<HTMLElement>>
   | React.ElementType;
@@ -28,13 +30,16 @@ export default function Example({
       throw new Error('Could not find button ref');
     }
 
-    el.addEventListener('toggle-select', toggleSelect);
-    el.addEventListener('toggle-disabled', toggleDisabled);
-
-    return () => {
-      el.removeEventListener('toggle-select', toggleSelect);
-      el.removeEventListener('toggle-disabled', toggleDisabled);
-    };
+    return bindAll(el, [
+      {
+        type: 'toggle-select',
+        listener: toggleSelect,
+      },
+      {
+        type: 'toggle-disabled',
+        listener: toggleDisabled,
+      },
+    ]);
   }, []);
 
   return (

package/dist/cjs/internal/components/skeleton-shimmer.js

@@ -11,26 +11,18 @@ var _colors = require("@atlaskit/theme/colors");
 
 /** @jsx jsx */
 
-/**
- * This color is mirrored in:
- * packages/design-system/theme/src/colors.tsx
- *
- * Please update both.
- */
-var skeletonColor = "var(--ds-background-neutral, ".concat(_colors.N20A, ")");
 /**
  * These keyframes are mirrored in:
  * packages/design-system/theme/src/constants.tsx
  *
  * Please update both.
  */
-
 var shimmerKeyframes = (0, _core.keyframes)({
   from: {
-    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColor, ")")
+    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")")
   },
   to: {
-    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(_colors.N30A, ")")
+    backgroundColor: "var(--ds-skeleton-subtle, ".concat(_colors.N30A, ")")
   }
 });
 /**
@@ -47,7 +39,7 @@ var shimmerStyles = (0, _core.css)({
     animationIterationCount: 'infinite',
     animationName: "".concat(shimmerKeyframes),
     animationTimingFunction: 'linear',
-    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColor, ")")
+    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")")
   }
 });
 /**

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

@@ -24,7 +24,7 @@ var skeletonStyles = (0, _core.css)({
     display: 'block',
     width: '30%',
     height: (0, _constants.gridSize)(),
-    backgroundColor: "var(--ds-background-neutral, ".concat((0, _colors.skeleton)(), ")"),
+    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")"),
     borderRadius: 100,
     content: '""'
   }

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

@@ -28,7 +28,7 @@ var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
-var skeletonColor = "var(--ds-background-neutral, ".concat((0, _colors.skeleton)(), ")");
+var skeletonColor = "var(--ds-skeleton, ".concat(_colors.N20A, ")");
 var skeletonStyles = (0, _core.css)({
   display: 'flex',
   minHeight: itemMinHeight,

package/dist/cjs/menu-section/section.js

@@ -76,7 +76,7 @@ var unscrollableStyles = (0, _core.css)({
   flexShrink: 0
 });
 var separatorStyles = (0, _core.css)({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(_colors.N30A, ")"), ")")
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
 });
 var noSeparatorStyles = (0, _core.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.3.5",
+	"version": "1.3.6",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/skeleton-shimmer.js

@@ -2,26 +2,18 @@
 import { ClassNames, css, jsx, keyframes } from '@emotion/core';
 import { N20A, N30A } from '@atlaskit/theme/colors';
 
-/**
- * This color is mirrored in:
- * packages/design-system/theme/src/colors.tsx
- *
- * Please update both.
- */
-const skeletonColor = `var(--ds-background-neutral, ${N20A})`;
 /**
  * These keyframes are mirrored in:
  * packages/design-system/theme/src/constants.tsx
  *
  * Please update both.
  */
-
 const shimmerKeyframes = keyframes({
   from: {
-    backgroundColor: `var(--ds-background-neutral, ${skeletonColor})`
+    backgroundColor: `var(--ds-skeleton, ${N20A})`
   },
   to: {
-    backgroundColor: `var(--ds-background-neutral-hovered, ${N30A})`
+    backgroundColor: `var(--ds-skeleton-subtle, ${N30A})`
   }
 });
 /**
@@ -38,7 +30,7 @@ const shimmerStyles = css({
     animationIterationCount: 'infinite',
     animationName: `${shimmerKeyframes}`,
     animationTimingFunction: 'linear',
-    backgroundColor: `var(--ds-background-neutral, ${skeletonColor})`
+    backgroundColor: `var(--ds-skeleton, ${N20A})`
   }
 });
 /**

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
+import { N20A } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 const skeletonStyles = css({
@@ -10,7 +10,7 @@ const skeletonStyles = css({
     display: 'block',
     width: '30%',
     height: gridSize(),
-    backgroundColor: `var(--ds-background-neutral, ${skeletonColorFn()})`,
+    backgroundColor: `var(--ds-skeleton, ${N20A})`,
     borderRadius: 100,
     content: '""'
   }

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
+import { N20A } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 const gridSize = gridSizeFn();
@@ -14,7 +14,7 @@ const skeletonItemElemSize = gridSize * 2.5;
 const itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 const skeletonTextBorderRadius = 100;
 const skeletonContentHeight = 9;
-const skeletonColor = `var(--ds-background-neutral, ${skeletonColorFn()})`;
+const skeletonColor = `var(--ds-skeleton, ${N20A})`;
 const skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.3.5",
+	"version": "1.3.6",
 	"sideEffects": false
 }

package/dist/esm/internal/components/skeleton-shimmer.js

@@ -2,26 +2,18 @@
 import { ClassNames, css, jsx, keyframes } from '@emotion/core';
 import { N20A, N30A } from '@atlaskit/theme/colors';
 
-/**
- * This color is mirrored in:
- * packages/design-system/theme/src/colors.tsx
- *
- * Please update both.
- */
-var skeletonColor = "var(--ds-background-neutral, ".concat(N20A, ")");
 /**
  * These keyframes are mirrored in:
  * packages/design-system/theme/src/constants.tsx
  *
  * Please update both.
  */
-
 var shimmerKeyframes = keyframes({
   from: {
-    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColor, ")")
+    backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")")
   },
   to: {
-    backgroundColor: "var(--ds-background-neutral-hovered, ".concat(N30A, ")")
+    backgroundColor: "var(--ds-skeleton-subtle, ".concat(N30A, ")")
   }
 });
 /**
@@ -38,7 +30,7 @@ var shimmerStyles = css({
     animationIterationCount: 'infinite',
     animationName: "".concat(shimmerKeyframes),
     animationTimingFunction: 'linear',
-    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColor, ")")
+    backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")")
   }
 });
 /**

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
+import { N20A } from '@atlaskit/theme/colors';
 import { gridSize } from '@atlaskit/theme/constants';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 var skeletonStyles = css({
@@ -10,7 +10,7 @@ var skeletonStyles = css({
     display: 'block',
     width: '30%',
     height: gridSize(),
-    backgroundColor: "var(--ds-background-neutral, ".concat(skeletonColorFn(), ")"),
+    backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")"),
     borderRadius: 100,
     content: '""'
   }

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

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { skeleton as skeletonColorFn } from '@atlaskit/theme/colors';
+import { N20A } from '@atlaskit/theme/colors';
 import { borderRadius as borderRadiusFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import SkeletonShimmer from '../internal/components/skeleton-shimmer';
 var gridSize = gridSizeFn();
@@ -14,7 +14,7 @@ var skeletonItemElemSize = gridSize * 2.5;
 var itemElemSkeletonOffset = (itemExpectedElemSize - skeletonItemElemSize) / 2;
 var skeletonTextBorderRadius = 100;
 var skeletonContentHeight = 9;
-var skeletonColor = "var(--ds-background-neutral, ".concat(skeletonColorFn(), ")");
+var skeletonColor = "var(--ds-skeleton, ".concat(N20A, ")");
 var skeletonStyles = css({
   display: 'flex',
   minHeight: itemMinHeight,

package/dist/esm/menu-section/section.js

@@ -61,7 +61,7 @@ var unscrollableStyles = css({
   flexShrink: 0
 });
 var separatorStyles = css({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ").concat("var(--ds-border, ".concat(N30A, ")"), ")")
+  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
 });
 var noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "1.3.5",
+	"version": "1.3.6",
 	"sideEffects": false
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -18,7 +18,8 @@
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Menu"
+      "name": "Menu",
+      "category": "Components"
     }
   },
   "af:exports": {
@@ -35,7 +36,7 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/ds-lib": "^2.0.0",
     "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -47,7 +48,7 @@
     "react-dom": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/avatar": "^20.5.0",
+    "@atlaskit/avatar": "^21.0.0",
     "@atlaskit/button": "^16.3.0",
     "@atlaskit/docs": "*",
     "@atlaskit/icon": "^21.10.0",
@@ -61,6 +62,7 @@
     "@testing-library/react": "^8.0.1",
     "@types/react-router-dom": "^4.3.1",
     "ast-types": "^0.13.3",
+    "bind-event-listener": "^2.1.0",
     "jest-axe": "^4.0.0",
     "jest-emotion": "^10.0.32",
     "jscodeshift": "^0.13.0",
@@ -78,6 +80,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "design-system": "v1",
       "styling": [