@atlaskit/menu 1.11.0 → 2.0.0

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

@@ -27,14 +27,13 @@ var skeletonStyles = css({
   pointerEvents: 'none',
   '::after': {
     height: skeletonContentHeight,
+    backgroundColor: skeletonColor,
+    borderRadius: skeletonTextBorderRadius,
+    content: '""',
     // This is a little bespoke but we need to push everything down 1px
     // because the skeleton content should align to the bottom of the text.
     // Confirm VR test failures before accepting a change.
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginTop: 1,
-    backgroundColor: skeletonColor,
-    borderRadius: skeletonTextBorderRadius,
-    content: '""'
+    marginBlockStart: 1
   }
 });
 var defaultWidthStyles = css({
@@ -66,13 +65,11 @@ var beforeElementStyles = css({
   '::before': {
     width: skeletonItemElemSize,
     height: skeletonItemElemSize,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginRight: itemElemSpacing + itemElemSkeletonOffset,
-    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-    marginLeft: itemElemSkeletonOffset,
     flexShrink: 0,
     backgroundColor: skeletonColor,
-    content: '""'
+    content: '""',
+    marginInlineEnd: itemElemSpacing + itemElemSkeletonOffset,
+    marginInlineStart: "var(--ds-space-025, 2px)"
   }
 });
 var avatarStyles = css({
@@ -103,7 +100,7 @@ var SkeletonItem = function SkeletonItem(_ref) {
     width = _ref.width,
     _ref$cssFn = _ref.cssFn,
     cssFn = _ref$cssFn === void 0 ? noop : _ref$cssFn;
-  propDeprecationWarning("@atlaskit/menu", 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'cssFn', cssFn !== noop, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var UNSAFE_overrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : css(cssFn());

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

@@ -34,18 +34,18 @@ var sectionStyles = css({
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& [data-ds--menu--heading-item]': {
-    marginTop: itemHeadingTopMargin,
-    marginBottom: itemHeadingBottomMargin,
+    marginBlockEnd: itemHeadingBottomMargin,
+    marginBlockStart: itemHeadingTopMargin,
     '&:first-of-type': {
-      marginTop: itemHeadingTopMargin - sectionPaddingTopBottom
+      marginBlockStart: itemHeadingTopMargin - sectionPaddingTopBottom
     }
   },
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '& [data-ds--menu--skeleton-heading-item]': {
-    marginTop: skeletonHeadingTopMargin,
-    marginBottom: skeletonHeadingBottomMargin,
+    marginBlockEnd: skeletonHeadingBottomMargin,
+    marginBlockStart: skeletonHeadingTopMargin,
     '&:first-of-type': {
-      marginTop: skeletonHeadingTopMargin - sectionPaddingTopBottom
+      marginBlockStart: skeletonHeadingTopMargin - sectionPaddingTopBottom
     }
   },
   '&:focus': {
@@ -64,13 +64,13 @@ var unscrollableStyles = css({
   flexShrink: 0
 });
 var separatorStyles = css({
-  borderTop: "2px solid var(".concat(VAR_SEPARATOR_COLOR, ", ", "var(--ds-border, ".concat(N30A, ")"), ")")
+  borderBlockStart: "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.
   // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
   '[data-section] + &': {
-    marginTop: -6
+    marginBlockStart: -6
   }
 });
 
@@ -94,7 +94,7 @@ var Section = /*#__PURE__*/forwardRef(function (_ref, ref) {
     isList = _ref$isList === void 0 ? false : _ref$isList,
     UNSAFE_className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  propDeprecationWarning("@atlaskit/menu", 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
+  propDeprecationWarning("@atlaskit/menu" || '', 'overrides', overrides !== undefined, '' // TODO: Create DAC post when primitives/xcss are available as alternatives
   );
 
   var UNSAFE_headingOverrides = getBooleanFF('platform.design-system-team.unsafe-overrides-killswitch_c8j9m') ? undefined : overrides && overrides.HeadingItem && overrides.HeadingItem.cssFn;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/menu",
-  "version": "1.11.0",
+  "version": "2.0.0",
   "description": "A collection of composable menu components that can be used anywhere.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -104,9 +104,6 @@
     ".": "./src/index.tsx"
   },
   "platform-feature-flags": {
-    "platform.design-system-team.menu-selected-state-change_0see9": {
-      "type": "boolean"
-    },
     "platform.design-system-team.unsafe-overrides-killswitch_c8j9m": {
       "type": "boolean"
     }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,11 +0,0 @@
-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

@@ -1,18 +0,0 @@
-/// <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

@@ -1,18 +0,0 @@
-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, }: MenuItemPrimitiveProps) => jsx.JSX.Element;
-export default MenuItemPrimitive;

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

@@ -1,24 +0,0 @@
-/** @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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,18 +0,0 @@
-/// <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

@@ -1,13 +0,0 @@
-/// <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

@@ -1,12 +0,0 @@
-/// <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

@@ -1,12 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,13 +0,0 @@
-/** @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

@@ -1,8 +0,0 @@
-/** @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

@@ -1,12 +0,0 @@
-/// <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;