@atlaskit/menu 2.1.1 → 2.1.3

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/menu
 
+## 2.1.3
+
+### Patch Changes
+
+- [#58188](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58188) [`e15a2a9480ee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e15a2a9480ee) - update deprecation guidance for PopupMenuGroup
+
+## 2.1.2
+
+### Patch Changes
+
+- [#42474](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42474) [`d7400cb1aa2`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d7400cb1aa2) - Adds a platform feature flag to adjust Menu Section seperator border widths from 2px to 1px.
+- Updated dependencies
+
 ## 2.1.1
 
 ### Patch Changes

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

@@ -12,7 +12,7 @@ var _menuGroup = _interopRequireDefault(require("./menu-group"));
 var _excluded = ["maxWidth", "minWidth"];
 /** @jsx jsx */
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 var PopupMenuGroup = function PopupMenuGroup(_ref) {
   var _ref$maxWidth = _ref.maxWidth,

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

@@ -70,9 +70,12 @@ var scrollableStyles = (0, _react2.css)({
 var unscrollableStyles = (0, _react2.css)({
   flexShrink: 0
 });
-var separatorStyles = (0, _react2.css)({
+var thickSeparatorStyles = (0, _react2.css)({
   borderBlockStart: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
 });
+var thinSeparatorStyles = (0, _react2.css)({
+  borderBlockStart: "1px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(_colors.N30A, ")"), ")")
+});
 var noSeparatorStyles = (0, _react2.css)({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -133,7 +136,7 @@ var Section = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

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

@@ -4,7 +4,7 @@ import { jsx } from '@emotion/react';
 import MenuGroup from './menu-group';
 
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 const PopupMenuGroup = ({
   maxWidth = 800,

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

@@ -61,9 +61,12 @@ const scrollableStyles = css({
 const unscrollableStyles = css({
   flexShrink: 0
 });
-const separatorStyles = css({
+const thickSeparatorStyles = css({
   borderBlockStart: `2px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
 });
+const thinSeparatorStyles = css({
+  borderBlockStart: `1px solid var(${VAR_SEPARATOR_COLOR}, ${`var(--ds-border, ${N30A})`})`
+});
 const noSeparatorStyles = css({
   // this is to ensure that adjacent sections without separators don't get additional margins.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -126,7 +129,7 @@ const Section = /*#__PURE__*/forwardRef(({
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

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

@@ -6,7 +6,7 @@ import { jsx } from '@emotion/react';
 import MenuGroup from './menu-group';
 
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 var PopupMenuGroup = function PopupMenuGroup(_ref) {
   var _ref$maxWidth = _ref.maxWidth,

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

@@ -63,9 +63,12 @@ var scrollableStyles = css({
 var unscrollableStyles = css({
   flexShrink: 0
 });
-var separatorStyles = css({
+var thickSeparatorStyles = css({
   borderBlockStart: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
 });
+var thinSeparatorStyles = css({
+  borderBlockStart: "1px 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.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
@@ -126,7 +129,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     // NOTE: Firefox allows elements that have "overflow: auto" to gain focus (as if it had tab-index="0")
     // We have made a deliberate choice to leave this behaviour as is.
     ,
-    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? separatorStyles : noSeparatorStyles],
+    css: [sectionStyles, isScrollable ? scrollableStyles : unscrollableStyles, hasSeparator ? getBooleanFF('platform.design-system-team.section-1px-seperator-borders') ? thinSeparatorStyles : thickSeparatorStyles : noSeparatorStyles],
     "aria-label": title,
     "data-testid": testId,
     role: "group",

package/dist/types/menu-section/popup-menu-group.d.ts

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default PopupMenuGroup;

package/dist/types-ts4.5/menu-section/popup-menu-group.d.ts

@@ -2,7 +2,7 @@
 import { jsx } from '@emotion/react';
 import type { MenuGroupProps } from '../types';
 /**
- * @deprecated
+ * @deprecated refer to MenuGroup, explicitly set maxWidth and minWidth
  */
 declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
 export default PopupMenuGroup;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "2.1.1",
+  "version": "2.1.3",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -22,6 +22,22 @@
     "releaseModel": "continuous",
     "website": {
       "name": "Menu",
+      "subPages": [
+        {
+          "title": "Popup menu group",
+          "id": "popup-menu-group",
+          "status": {
+            "type": "deprecated",
+            "description": "PopupMenuGroup has been deprecated. We recommend using the MenuGroup component instead.",
+            "actions": [
+              {
+                "text": "View MenuGroup documentation",
+                "href": "https://atlassian.design/components/menu/menu-group/examples"
+              }
+            ]
+          }
+        }
+      ],
       "category": "Components"
     }
   },
@@ -29,9 +45,9 @@
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
     "@atlaskit/platform-feature-flags": "^0.2.0",
-    "@atlaskit/primitives": "^1.6.0",
+    "@atlaskit/primitives": "^1.13.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.29.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -41,6 +57,7 @@
   },
   "devDependencies": {
     "@af/accessibility-testing": "*",
+    "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -106,6 +123,9 @@
   "platform-feature-flags": {
     "platform.design-system-team.unsafe-overrides-killswitch_c8j9m": {
       "type": "boolean"
+    },
+    "platform.design-system-team.section-1px-seperator-borders": {
+      "type": "boolean"
     }
   },
   "homepage": "https://atlassian.design/components/menu/",

package/tmp/api-report-tmp.d.ts

@@ -1,222 +0,0 @@
-## API Report File for "@atlaskit/menu"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { ComponentType } from 'react';
-import { Context } from 'react';
-import { CSSObject } from '@emotion/react';
-import { ForwardRefExoticComponent } from 'react';
-import { jsx } from '@emotion/react';
-import { MemoExoticComponent } from 'react';
-import { ReactNode } from 'react';
-import { Ref } from 'react';
-import { RefAttributes } from 'react';
-
-// @public (undocumented)
-export interface BaseItemProps {
-    children?: React.ReactNode;
-    // @deprecated
-    cssFn?: CSSFn;
-    description?: JSX.Element | string;
-    iconAfter?: React.ReactNode;
-    iconBefore?: React.ReactNode;
-    isDisabled?: boolean;
-    isSelected?: boolean;
-    onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
-    onMouseDown?: React.MouseEventHandler;
-    // @deprecated
-    overrides?: Overrides;
-    shouldDescriptionWrap?: boolean;
-    shouldTitleWrap?: boolean;
-    testId?: string;
-}
-
-// @public
-export const ButtonItem: MemoExoticComponent<ForwardRefExoticComponent<ButtonItemProps & RefAttributes<HTMLElement>>>;
-
-// @public (undocumented)
-export interface ButtonItemProps extends BaseItemProps {
-    id?: string;
-    role?: string;
-}
-
-// @public @deprecated
-export interface CSSFn<TState = ItemState extends void ? void : ItemState> {
-    // (undocumented)
-    (currentState: TState): CSSObject | CSSObject[];
-}
-
-// @public
-export const CustomItem: CustomItemTypeGenericHackProps;
-
-// @public (undocumented)
-export interface CustomItemComponentProps {
-    'data-testid'?: string;
-    children: React.ReactNode;
-    className: string;
-    disabled?: boolean;
-    draggable: boolean;
-    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
-    onDragStart?: (event: React.DragEvent) => void;
-    onMouseDown?: (event: React.MouseEvent<HTMLElement>) => void;
-    ref?: Ref<any>;
-    tabIndex?: number;
-}
-
-// @public (undocumented)
-export interface CustomItemProps<TCustomComponentProps = CustomItemComponentProps> extends BaseItemProps {
-    component?: React.ComponentType<TCustomComponentProps>;
-}
-
-// @public (undocumented)
-interface CustomItemTypeGenericHackProps {
-    // (undocumented)
-    <TComponentProps>(props: CustomItemProps<TComponentProps> & {
-        ref?: any;
-    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
-}
-
-// @public (undocumented)
-export type Dimension = number | string;
-
-// @public
-export const HeadingItem: MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
-
-// @public (undocumented)
-export interface HeadingItemProps {
-    children: React.ReactNode;
-    // @deprecated
-    cssFn?: StatelessCSSFn;
-    id?: string;
-    testId?: string;
-}
-
-// @public (undocumented)
-export type ItemState = {
-    isSelected: boolean;
-    isDisabled: boolean;
-};
-
-// @public
-export const LinkItem: MemoExoticComponent<ForwardRefExoticComponent<LinkItemProps & RefAttributes<HTMLElement>>>;
-
-// @public (undocumented)
-export interface LinkItemProps extends BaseItemProps {
-    href?: string;
-    rel?: string;
-    role?: string;
-    target?: string;
-}
-
-// @public
-export const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface MenuGroupProps extends MenuGroupSizing {
-    children: React.ReactNode;
-    isLoading?: boolean;
-    onClick?: (event: React.KeyboardEvent | React.MouseEvent) => void;
-    role?: string;
-    spacing?: SpacingMode;
-    testId?: string;
-}
-
-// @public (undocumented)
-export interface MenuGroupSizing {
-    maxHeight?: Dimension;
-    maxWidth?: Dimension;
-    minHeight?: Dimension;
-    minWidth?: Dimension;
-}
-
-// @public @deprecated (undocumented)
-export interface Overrides {
-    // (undocumented)
-    Title?: TitleOverrides;
-}
-
-// @public @deprecated (undocumented)
-export const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface RenderFunction<TProps = {}> {
-    // (undocumented)
-    (Component: ComponentType | string, props: TProps): React.ReactNode;
-}
-
-// @public
-export const Section: ForwardRefExoticComponent<SectionProps & RefAttributes<HTMLElement>>;
-
-// @public (undocumented)
-interface SectionProps {
-    children: React.ReactNode;
-    hasSeparator?: boolean;
-    id?: string;
-    isList?: boolean;
-    isScrollable?: boolean;
-    // @deprecated (undocumented)
-    overrides?: {
-        HeadingItem?: {
-            cssFn?: StatelessCSSFn;
-        };
-    };
-    testId?: string;
-    title?: string;
-}
-export { SectionProps as SectionBaseProps }
-export { SectionProps }
-
-// @internal
-export const SELECTION_STYLE_CONTEXT_DO_NOT_USE: Context<"border" | "none" | "notch">;
-
-// @public
-export const SkeletonHeadingItem: ({ isShimmering, testId, width, cssFn, }: SkeletonHeadingItemProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface SkeletonHeadingItemProps {
-    // @deprecated
-    cssFn?: StatelessCSSFn;
-    isShimmering?: boolean;
-    testId?: string;
-    width?: Dimension;
-}
-
-// @public
-export const SkeletonItem: ({ hasAvatar, hasIcon, isShimmering, testId, width, cssFn, }: SkeletonItemProps) => jsx.JSX.Element;
-
-// @public (undocumented)
-export interface SkeletonItemProps {
-    cssFn?: StatelessCSSFn;
-    hasAvatar?: boolean;
-    hasIcon?: boolean;
-    isShimmering?: boolean;
-    testId?: string;
-    width?: Dimension;
-}
-
-// @internal
-export const SpacingContext: Context<SpacingMode>;
-
-// @public (undocumented)
-type SpacingMode = 'compact' | 'cozy';
-
-// @public @deprecated (undocumented)
-export type StatelessCSSFn = CSSFn<void>;
-
-// @public @deprecated (undocumented)
-export interface TitleOverrides {
-    // (undocumented)
-    render?: RenderFunction<{
-        className?: string;
-        children: ReactNode;
-        'data-item-title': boolean;
-    }>;
-}
-
-// (No @packageDocumentation comment for this package)
-
-```