@atlaskit/menu 1.3.4 → 1.3.7

package/CHANGELOG.md

@@ -1,5 +1,24 @@
 # @atlaskit/menu
 
+## 1.3.7
+
+### Patch Changes
+
+- [`8a5bdb3c844`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8a5bdb3c844) - Upgrading internal dependency (bind-event-listener) for improved internal types
+
+## 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
+
+- [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
+
 ## 1.3.4
 
 ### 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.4",
+	"version": "1.3.7",
 	"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.4",
+	"version": "1.3.7",
 	"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.4",
+	"version": "1.3.7",
 	"sideEffects": false
 }

package/dist/types/types.d.ts

@@ -94,7 +94,7 @@ export interface SectionProps {
     overrides?: {
         HeadingItem?: {
             /**
-             * A function that can be used to override the styles of the component.
+             * A function that overrides the styles of the component.
              * It receives the current styles and state and expects a styles object.
              */
             cssFn?: StatelessCSSFn;
@@ -127,10 +127,10 @@ export interface MenuItemPrimitiveProps {
 }
 export interface MenuItemProps {
     /**
-     * A function that can be used to override the styles of the component.
-     * It receives the current styles and state and expects a styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+      A function that overrides the styles of the component.
+      It receives the current styles and state and expects a styles object.
+  
+      @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     cssFn?: CSSFn;
     /**
@@ -175,9 +175,9 @@ export interface MenuItemProps {
      */
     testId?: string;
     /**
-     * Custom overrides for the composed components.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+      Custom overrides for the composed components.
+  
+      @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
      */
     overrides?: Overrides;
     /**
@@ -266,14 +266,16 @@ export interface CustomItemComponentProps {
 }
 export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProps> extends MenuItemProps {
     /**
-     * Custom component to render as an item.
-     * This can be both a functional component or a class component.
-     * __Will return `null` if no component is defined.__
-     * If using TypeScript and this has typed props it will make its props available to the root custom item component for type safety,
-     * which allows you to pass the custom component's props via the root custom item component props.
-     * e.g. `<CustomItem to="/link" component={RouterLink} />`
-     *
-     * __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
+      Custom component to render as an item. This can be both a functional component or a class component.
+  
+      __Will return `null` if no component is defined.__
+  
+      Props passed to `CustomItem` will be passed down to this component. If the props for `component` have TypeScript types,
+      CustomItem will extend them, providing type safety for your custom item.
+  
+      e.g. `<CustomItem to="/link" component={RouterLink} />`
+  
+      __NOTE:__ Make sure the reference for this component does not change between renders else undefined behavior may happen.
      */
     component?: React.ComponentType<TCustomComponentProps>;
 }
@@ -305,17 +307,17 @@ export interface SkeletonItemProps {
      */
     isShimmering?: boolean;
     /**
-     * A function that can be used to override the styles of this component.
+     * A function that overrides the styles of this component.
      * It receives the current styles and returns a customized styles object.
      */
     cssFn?: StatelessCSSFn;
 }
 export interface HeadingItemProps {
     /**
-     * A function that can be used to override the styles.
-     * It receives the current styles and returns a customised styles object.
-     *
-     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     A function that overrides the styles.
+     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.
      */
     cssFn?: StatelessCSSFn;
     /**
@@ -353,10 +355,10 @@ export interface SkeletonHeadingItemProps {
      */
     isShimmering?: boolean;
     /**
-     * A function that can be used to override 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.
+      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.
      */
     cssFn?: StatelessCSSFn;
 }
@@ -365,12 +367,12 @@ export declare type ItemState = {
     isDisabled: boolean;
 };
 /**
- * A function that can be used to override 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.
+  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[];

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.3.4",
+  "version": "1.3.7",
   "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.1",
     "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": [