@atlaskit/menu 2.0.0 → 2.1.0

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

@@ -23,34 +23,22 @@ const contentStyles = css({
   flexGrow: 1,
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  textAlign: 'left',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  overflow: 'hidden',
+  textAlign: 'left'
 });
 const truncateStyles = css({
   display: 'block',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 const wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 const descriptionStyles = css({
+  marginTop: "var(--ds-space-050, 4px)",
   color: `var(--ds-text-subtlest, ${N200})`,
-  fontSize: "var(--ds-font-size-075, 12px)",
-  marginBlockStart: "var(--ds-space-050, 4px)"
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 const disabledDescriptionStyles = css({
   color: `var(--ds-text-disabled, ${N200})`
@@ -120,23 +108,23 @@ const selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
+    content: '""'
   }
 });
 const selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: `0 ${"var(--ds-border-radius, 4px)"} ${"var(--ds-border-radius, 4px)"} 0`,
-    content: '""',
-    insetBlockEnd: "var(--ds-space-150, 12px)",
-    insetBlockStart: "var(--ds-space-150, 12px)",
-    insetInlineStart: 0
+    content: '""'
   }
 });
 const selectedStyles = css({
@@ -185,7 +173,8 @@ const MenuItemPrimitive = ({
   shouldTitleWrap = false,
   shouldDescriptionWrap = false,
   isDisabled = false,
-  isSelected = false
+  isSelected = false,
+  testId
 }) => {
   propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
@@ -207,10 +196,12 @@ const MenuItemPrimitive = ({
         spread: "space-between",
         alignBlock: "center",
         space: gapMap[spacing],
-        grow: "fill"
+        grow: "fill",
+        testId: testId && `${testId}--container`
       }, iconBefore && jsx("span", {
         "data-item-elem-before": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && `${testId}--icon-before`
       }, iconBefore), title && jsx("span", {
         css: contentStyles
       }, renderTitle('span', {
@@ -222,7 +213,8 @@ const MenuItemPrimitive = ({
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && `${testId}--icon-after`
       }, iconAfter))
     }));
   });

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

@@ -63,7 +63,8 @@ const ButtonItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
     cssFn({
       isSelected,
       isDisabled
-    })
+    }),
+    testId: testId && `${testId}--primitive`
   }), ({
     children,
     className

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

@@ -68,7 +68,8 @@ const CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
     css: css(cssFn({
       isDisabled,
       isSelected
-    }))
+    })),
+    testId: testId && `${testId}--primitive`
   }), ({
     children,
     className

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

@@ -68,7 +68,8 @@ const LinkItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(
       isSelected,
       isDisabled
     }),
-    title: children
+    title: children,
+    testId: testId && `${testId}--primitive`
   }), ({
     children,
     className

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

@@ -26,34 +26,22 @@ var contentStyles = css({
   flexGrow: 1,
   lineHeight: "var(--ds-font-lineHeight-100, 16px)",
   outline: 'none',
-  textAlign: 'left',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  overflow: 'hidden',
+  textAlign: 'left'
 });
 var truncateStyles = css({
   display: 'block',
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports not (overflow-x: clip)': {
-    overflow: 'hidden'
-  },
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  }
+  whiteSpace: 'nowrap'
 });
 var wordBreakStyles = css({
   wordBreak: 'break-word'
 });
 var descriptionStyles = css({
+  marginTop: "var(--ds-space-050, 4px)",
   color: "var(--ds-text-subtlest, ".concat(N200, ")"),
-  fontSize: "var(--ds-font-size-075, 12px)",
-  marginBlockStart: "var(--ds-space-050, 4px)"
+  fontSize: "var(--ds-font-size-075, 12px)"
 });
 var disabledDescriptionStyles = css({
   color: "var(--ds-text-disabled, ".concat(N200, ")")
@@ -123,23 +111,23 @@ var selectedBorderStyles = css({
   '&::before': {
     width: 2,
     position: 'absolute',
+    top: 0,
+    bottom: 0,
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
-    content: '""',
-    insetBlockEnd: 0,
-    insetBlockStart: 0,
-    insetInlineStart: 0
+    content: '""'
   }
 });
 var selectedNotchStyles = css({
   '&::before': {
     width: 4,
     position: 'absolute',
+    top: "var(--ds-space-150, 12px)",
+    bottom: "var(--ds-space-150, 12px)",
+    left: 0,
     background: "var(--ds-border-selected, transparent)",
     borderRadius: "0 ".concat("var(--ds-border-radius, 4px)", " ", "var(--ds-border-radius, 4px)", " 0"),
-    content: '""',
-    insetBlockEnd: "var(--ds-space-150, 12px)",
-    insetBlockStart: "var(--ds-space-150, 12px)",
-    insetInlineStart: 0
+    content: '""'
   }
 });
 var selectedStyles = css({
@@ -192,7 +180,8 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
     _ref$isDisabled = _ref.isDisabled,
     isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
     _ref$isSelected = _ref.isSelected,
-    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected;
+    isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
+    testId = _ref.testId;
   propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
@@ -212,10 +201,12 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         spread: "space-between",
         alignBlock: "center",
         space: gapMap[spacing],
-        grow: "fill"
+        grow: "fill",
+        testId: testId && "".concat(testId, "--container")
       }, iconBefore && jsx("span", {
         "data-item-elem-before": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && "".concat(testId, "--icon-before")
       }, iconBefore), title && jsx("span", {
         css: contentStyles
       }, renderTitle('span', {
@@ -227,7 +218,8 @@ var MenuItemPrimitive = function MenuItemPrimitive(_ref) {
         css: [descriptionStyles, isDisabled && disabledDescriptionStyles, shouldDescriptionWrap ? wordBreakStyles : truncateStyles]
       }, description)), iconAfter && jsx("span", {
         "data-item-elem-after": true,
-        css: beforeAfterElementStyles
+        css: beforeAfterElementStyles,
+        "data-testid": testId && "".concat(testId, "--icon-after")
       }, iconAfter))
     }));
   });

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

@@ -62,7 +62,8 @@ function (props, ref) {
     cssFn({
       isSelected: isSelected,
       isDisabled: isDisabled
-    })
+    }),
+    testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;

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

@@ -68,7 +68,8 @@ var CustomItem = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref)
     css: css(cssFn({
       isDisabled: isDisabled,
       isSelected: isSelected
-    }))
+    })),
+    testId: testId && "".concat(testId, "--primitive")
   }), function (_ref2) {
     var children = _ref2.children,
       className = _ref2.className;

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

@@ -67,7 +67,8 @@ function (props, ref) {
       isSelected: isSelected,
       isDisabled: isDisabled
     }),
-    title: children
+    title: children,
+    testId: testId && "".concat(testId, "--primitive")
   }), function (_ref) {
     var children = _ref.children,
       className = _ref.className;

package/dist/types/internal/components/menu-item-primitive.d.ts

@@ -14,5 +14,5 @@ import type { MenuItemPrimitiveProps } from '../../types';
  * </MenuItemPrimitive>
  * ```
  */
-declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
 export default MenuItemPrimitive;

package/dist/types/types.d.ts

@@ -137,6 +137,7 @@ export interface MenuItemPrimitiveProps {
     isDisabled: boolean | undefined;
     isSelected: boolean | undefined;
     className?: string;
+    testId?: string;
 }
 export interface MenuItemProps {
     /**

package/dist/types-ts4.5/entry-points/menu-item/button-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/button-item';

package/dist/types-ts4.5/entry-points/menu-item/custom-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/custom-item';

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

@@ -0,0 +1 @@
+export { default } from '../../menu-item/heading-item';

package/dist/types-ts4.5/entry-points/menu-item/link-item.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-item/link-item';

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

@@ -0,0 +1 @@
+export { default } from '../../menu-item/skeleton-heading-item';

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

@@ -0,0 +1 @@
+export { default } from '../../menu-item/skeleton-item';

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

@@ -0,0 +1 @@
+export { default } from '../../menu-section/menu-group';

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

@@ -0,0 +1 @@
+export { default } from '../../menu-section/popup-menu-group';

package/dist/types-ts4.5/entry-points/menu-section/section.d.ts

@@ -0,0 +1 @@
+export { default } from '../../menu-section/section';

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

@@ -0,0 +1,11 @@
+export { default as ButtonItem } from './menu-item/button-item';
+export { default as LinkItem } from './menu-item/link-item';
+export { default as CustomItem } from './menu-item/custom-item';
+export { default as SkeletonItem } from './menu-item/skeleton-item';
+export { SpacingContext, SELECTION_STYLE_CONTEXT_DO_NOT_USE, } from './internal/components/menu-context';
+export { default as HeadingItem } from './menu-item/heading-item';
+export { default as SkeletonHeadingItem } from './menu-item/skeleton-heading-item';
+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, Overrides, MenuGroupSizing, RenderFunction, SectionProps as SectionBaseProps, TitleOverrides, } from './types';

package/dist/types-ts4.5/internal/components/menu-context.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+export type SpacingMode = 'compact' | 'cozy';
+/**
+ * __Spacing context__
+ *
+ *  The spacing context is used to provide spacing values to menu item primitives.
+ *
+ * @internal Do not use directly.
+ */
+export declare const SpacingContext: import("react").Context<SpacingMode>;
+/**
+ * __Selection context__
+ *
+ * The selection context is used to set what selection mode the menu items display as.
+ *
+ * @internal Do not use directly.
+ */
+export declare const SELECTION_STYLE_CONTEXT_DO_NOT_USE: import("react").Context<"notch" | "border" | "none">;

package/dist/types-ts4.5/internal/components/menu-item-primitive.d.ts

@@ -0,0 +1,18 @@
+import { jsx } from '@emotion/react';
+import type { MenuItemPrimitiveProps } from '../../types';
+/**
+ * __Menu item primitive__
+ *
+ * Menu item primitive contains all the styles for menu items,
+ * including support for selected, disabled, and interaction states.
+ *
+ * Using children as function prop you wire up this to your own host element.
+ *
+ * ```jsx
+ * <MenuItemPrimitive>
+ *   {({ children, ...props }) => <button {...props}>{children}</button>}
+ * </MenuItemPrimitive>
+ * ```
+ */
+declare const MenuItemPrimitive: ({ children, title, description, iconAfter, iconBefore, overrides, className: UNSAFE_externalClassName, shouldTitleWrap, shouldDescriptionWrap, isDisabled, isSelected, testId, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
+export default MenuItemPrimitive;

package/dist/types-ts4.5/internal/components/skeleton-shimmer.d.ts

@@ -0,0 +1,24 @@
+/** @jsx jsx */
+import { ReactNode } from 'react';
+import { jsx } from '@emotion/react';
+type SkeletonShimmerProps = {
+    children: ({ className }: {
+        className?: string;
+    }) => ReactNode;
+    isShimmering?: boolean;
+};
+/**
+ * __Skeleton shimmer__
+ *
+ * A skeleton shimmer is the animation shown on loading skeletons for
+ * perceived performance and user satisfaction.
+ *
+ * This component provides a `className` through render props. This value will
+ * have type:
+ * + `string`, when `isShimmering={true}`.
+ * + `undefined`, when `isShimmering={false}`.
+ *
+ * @internal
+ */
+declare const SkeletonShimmer: ({ children, isShimmering, }: SkeletonShimmerProps) => jsx.JSX.Element;
+export default SkeletonShimmer;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { ButtonItemProps } from '../types';
+/**
+ * __Button item__
+ *
+ * A button item is used to populate a menu with items that are buttons.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/button-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const ButtonItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<ButtonItemProps & import("react").RefAttributes<HTMLElement>>>;
+export default ButtonItem;

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

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+/** @jsx jsx */
+import type { CustomItemComponentProps, CustomItemProps } from '../types';
+interface CustomItemTypeGenericHackProps {
+    <TComponentProps>(props: CustomItemProps<TComponentProps> & {
+        ref?: any;
+    } & Omit<TComponentProps, keyof CustomItemComponentProps>): JSX.Element | null;
+}
+/**
+ * __Custom item__
+ *
+ * A custom item is used to populate a menu with items that can be any element.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/custom-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const CustomItem: CustomItemTypeGenericHackProps;
+export default CustomItem;

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

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { jsx } from '@emotion/react';
+import type { HeadingItemProps } from '../types';
+/**
+ * __Heading item__
+ *
+ * A heading item is used to describe sibling menu items.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/heading-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const HeadingItem: import("react").MemoExoticComponent<({ children, testId, id, cssFn, className: UNSAFE_className, ...rest }: HeadingItemProps) => jsx.JSX.Element>;
+export default HeadingItem;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { LinkItemProps } from '../types';
+/**
+ * __Link item__
+ *
+ * A link item is used to populate a menu with items that are links.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/link-item)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const LinkItem: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<LinkItemProps & import("react").RefAttributes<HTMLElement>>>;
+export default LinkItem;

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

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import type { SkeletonHeadingItemProps } from '../types';
+/**
+ * __Skeleton heading item__
+ *
+ * A skeleton heading item is used in place of a heading item when its contents it not ready.
+ *
+ * - [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;
+export default SkeletonHeadingItem;

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

@@ -0,0 +1,12 @@
+import { jsx } from '@emotion/react';
+import type { SkeletonItemProps } from '../types';
+/**
+ * __Skeleton item__
+ *
+ * A skeleton item is used in place of an item when its contents it not ready.
+ *
+ * - [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;
+export default SkeletonItem;

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

@@ -0,0 +1,13 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { MenuGroupProps } from '../types';
+/**
+ * __Menu group__
+ *
+ * A menu group includes all the actions or items in a menu.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/menu-group)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const MenuGroup: ({ isLoading, maxWidth, minWidth, minHeight, maxHeight, testId, role, spacing, className: UNSAFE_className, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+export default MenuGroup;

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

@@ -0,0 +1,8 @@
+/** @jsx jsx */
+import { jsx } from '@emotion/react';
+import type { MenuGroupProps } from '../types';
+/**
+ * @deprecated
+ */
+declare const PopupMenuGroup: ({ maxWidth, minWidth, ...rest }: MenuGroupProps) => jsx.JSX.Element;
+export default PopupMenuGroup;

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

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { SectionProps } from '../types';
+/**
+ * __Section__
+ *
+ * A section includes related actions or items in a menu.
+ *
+ * - [Examples](https://atlaskit.atlassian.com/packages/design-system/menu/docs/section)
+ * - [Code](https://atlaskit.atlassian.com/packages/design-system/menu)
+ */
+declare const Section: import("react").ForwardRefExoticComponent<SectionProps & import("react").RefAttributes<HTMLElement>>;
+export default Section;