@atlaskit/menu 1.2.5 → 1.2.6

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/menu
 
+## 1.2.6
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+- [`27467f65f68`](https://bitbucket.org/atlassian/atlassian-frontend/commits/27467f65f68) - [ux] Update headingStyle to color that passes WCAG AA color contrast
+- [`2066efabc65`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2066efabc65) - A fix for the `StatelessCSSFn` type so that it now correctly accetps a void argument.
+- [`96cfc6c1c7f`](https://bitbucket.org/atlassian/atlassian-frontend/commits/96cfc6c1c7f) - Deprecates the `cssFn` and `overrides` APIs in '@atlaskit/menu'. These APIs are not performant and allow unbounded customisation of the Menu components. These APIs will be removed in a future release.
+- Updated dependencies
+
 ## 1.2.5
 
 ### Patch Changes

package/dist/cjs/internal/components/menu-item-primitive.js

@@ -21,7 +21,9 @@ var _typography = require("@atlaskit/theme/typography");
 
 /** @jsx jsx */
 var defaultRender = function defaultRender(Component, props) {
-  return (0, _core.jsx)(Component, props);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _core.jsx)(Component, props)
+  );
 };
 
 var gridSize = (0, _constants.gridSize)();

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

@@ -30,7 +30,7 @@ var itemHeadingContentHeight = _typography.headingSizes.h100.lineHeight;
 var itemHeadingFontSize = _typography.headingSizes.h100.size;
 var headingStyles = (0, _core.css)({
   padding: "0 ".concat(itemSidePadding, "px"),
-  color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
+  color: "var(--ds-text-subtle, ".concat(_colors.N300, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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

@@ -111,7 +111,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
       '--width': width
     },
     css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
+    cssFn()],
     "data-testid": testId
   });
 };

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

@@ -43,7 +43,8 @@ var MenuGroup = function MenuGroup(_ref) {
       maxHeight: maxHeight
     },
     css: groupStyles,
-    "data-testid": testId
+    "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

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

@@ -26,10 +26,12 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
       _ref$minWidth = _ref.minWidth,
       minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  return (0, _core.jsx)(_menuGroup.default, (0, _extends2.default)({
-    maxWidth: maxWidth,
-    minWidth: minWidth
-  }, rest));
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    (0, _core.jsx)(_menuGroup.default, (0, _extends2.default)({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
 };
 
 var _default = PopupMenuGroup;

package/dist/cjs/version.json

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

package/dist/es2019/internal/components/menu-item-primitive.js

@@ -6,7 +6,8 @@ import { N20, N200, N30 } from '@atlaskit/theme/colors';
 import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 
-const defaultRender = (Component, props) => jsx(Component, props);
+const defaultRender = (Component, props) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(Component, props);
 
 const gridSize = gridSizeFn();
 const fontSize = fontSizeFn();

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

@@ -4,7 +4,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { N200 } from '@atlaskit/theme/colors';
+import { N300 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 const gridSize = gridSizeFn();
@@ -13,7 +13,7 @@ const itemHeadingContentHeight = headingSizes.h100.lineHeight;
 const itemHeadingFontSize = headingSizes.h100.size;
 const headingStyles = css({
   padding: `0 ${itemSidePadding}px`,
-  color: `var(--ds-text-subtlest, ${N200})`,
+  color: `var(--ds-text-subtle, ${N300})`,
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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

@@ -97,7 +97,7 @@ const SkeletonItem = ({
     '--width': width
   },
   css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-  cssFn(undefined)],
+  cssFn()],
   "data-testid": testId
 });
 

package/dist/es2019/menu-section/menu-group.js

@@ -31,7 +31,8 @@ const MenuGroup = ({
     maxHeight
   },
   css: groupStyles,
-  "data-testid": testId
+  "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
 }, rest));
 
 export default MenuGroup;

package/dist/es2019/menu-section/popup-menu-group.js

@@ -11,7 +11,8 @@ const PopupMenuGroup = ({
   maxWidth = 800,
   minWidth = 320,
   ...rest
-}) => jsx(MenuGroup, _extends({
+}) => // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+jsx(MenuGroup, _extends({
   maxWidth: maxWidth,
   minWidth: minWidth
 }, rest));

package/dist/es2019/version.json

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

package/dist/esm/internal/components/menu-item-primitive.js

@@ -7,7 +7,9 @@ import { fontSize as fontSizeFn, gridSize as gridSizeFn } from '@atlaskit/theme/
 import { headingSizes } from '@atlaskit/theme/typography';
 
 var defaultRender = function defaultRender(Component, props) {
-  return jsx(Component, props);
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(Component, props)
+  );
 };
 
 var gridSize = gridSizeFn();

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

@@ -6,7 +6,7 @@ var _excluded = ["children", "testId", "id", "cssFn"];
 import { memo } from 'react';
 import { css, jsx } from '@emotion/core';
 import noop from '@atlaskit/ds-lib/noop';
-import { N200 } from '@atlaskit/theme/colors';
+import { N300 } from '@atlaskit/theme/colors';
 import { gridSize as gridSizeFn } from '@atlaskit/theme/constants';
 import { headingSizes } from '@atlaskit/theme/typography';
 var gridSize = gridSizeFn();
@@ -15,7 +15,7 @@ var itemHeadingContentHeight = headingSizes.h100.lineHeight;
 var itemHeadingFontSize = headingSizes.h100.size;
 var headingStyles = css({
   padding: "0 ".concat(itemSidePadding, "px"),
-  color: "var(--ds-text-subtlest, ".concat(N200, ")"),
+  color: "var(--ds-text-subtle, ".concat(N300, ")"),
   fontSize: itemHeadingFontSize,
   fontWeight: 700,
   lineHeight: itemHeadingContentHeight / itemHeadingFontSize,

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

@@ -98,7 +98,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
       '--width': width
     },
     css: [skeletonStyles, (hasAvatar || hasIcon) && beforeElementStyles, hasAvatar && avatarStyles, hasIcon && iconStyles, width ? customWidthStyles : defaultWidthStyles, // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    cssFn(undefined)],
+    cssFn()],
     "data-testid": testId
   });
 };

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

@@ -34,7 +34,8 @@ var MenuGroup = function MenuGroup(_ref) {
       maxHeight: maxHeight
     },
     css: groupStyles,
-    "data-testid": testId
+    "data-testid": testId // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+
   }, rest));
 };
 

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

@@ -16,10 +16,12 @@ var PopupMenuGroup = function PopupMenuGroup(_ref) {
       minWidth = _ref$minWidth === void 0 ? 320 : _ref$minWidth,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  return jsx(MenuGroup, _extends({
-    maxWidth: maxWidth,
-    minWidth: minWidth
-  }, rest));
+  return (// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+    jsx(MenuGroup, _extends({
+      maxWidth: maxWidth,
+      minWidth: minWidth
+    }, rest))
+  );
 };
 
 export default PopupMenuGroup;

package/dist/esm/version.json

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

package/dist/types/types.d.ts

@@ -3,6 +3,9 @@ import { CSSObject } from '@emotion/core';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
 }
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
 export interface TitleOverrides {
     render?: RenderFunction<{
         className?: string;
@@ -10,6 +13,9 @@ export interface TitleOverrides {
         'data-item-title': boolean;
     }>;
 }
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
 export interface Overrides {
     Title?: TitleOverrides;
 }
@@ -78,6 +84,9 @@ export interface SectionProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
     overrides?: {
         HeadingItem?: {
             /**
@@ -102,6 +111,9 @@ export interface MenuItemPrimitiveProps {
     description: React.ReactNode | undefined;
     iconAfter: React.ReactNode | undefined;
     iconBefore: React.ReactNode | undefined;
+    /**
+     * @deprecated This API is deprecated and will be removed in a future release. See DSP-2676 for more information.
+     */
     overrides: Overrides | undefined;
     shouldTitleWrap: boolean | undefined;
     shouldDescriptionWrap: boolean | undefined;
@@ -113,6 +125,8 @@ 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.
      */
     cssFn?: CSSFn;
     /**
@@ -158,6 +172,8 @@ 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.
      */
     overrides?: Overrides;
     /**
@@ -294,6 +310,8 @@ 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.
      */
     cssFn?: StatelessCSSFn;
     /**
@@ -333,6 +351,8 @@ export interface SkeletonHeadingItemProps {
     /**
      * 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.
      */
     cssFn?: StatelessCSSFn;
 }
@@ -346,8 +366,12 @@ export declare type ItemState = {
  * 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> {
+export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
     (currentState: TState): CSSObject | CSSObject[];
 }
-export declare type StatelessCSSFn = CSSFn<undefined>;
+/**
+ * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
+ */
+export declare type StatelessCSSFn = CSSFn<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.2.5",
+  "version": "1.2.6",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -35,8 +35,8 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/ds-lib": "^1.2.0",
-    "@atlaskit/focus-ring": "^0.2.4",
+    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/focus-ring": "^1.0.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",