@atlaskit/menu 7.0.0 → 8.0.0

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

@@ -1,5 +1,5 @@
 import { type ComponentType, type PropsWithChildren, type Ref } from 'react';
-import { type CSSObject } from '@emotion/react';
+import { StrictXCSSProp } from '@atlaskit/css';
 import type { SpacingMode } from './internal/components/menu-context';
 export interface RenderFunction<TProps = {}> {
     (Component: ComponentType | string, props: TProps): React.ReactNode;
@@ -318,10 +318,14 @@ export interface SkeletonItemProps {
      */
     isShimmering?: boolean;
     /**
-     * A function that overrides the styles of this component.
-     * It receives the current styles and returns a customized styles object.
+     * When `true`, the size/spacing of the skeleton size/spacing is adjusted to match the side navigation menu item.
+     * @deprecated This API exists to support functionality in `@atlaskit/side-navigation` and should not be used. Once the new navigation is fully rolled out, this prop will be removed.
+     */
+    isSideNavSkeleton?: boolean;
+    /**
+     * Bounded style overrides.
      */
-    cssFn?: StatelessCSSFn;
+    xcss?: StrictXCSSProp<'minHeight' | 'paddingBlock' | 'paddingInline' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', never>;
 }
 export interface HeadingItemProps {
     /**
@@ -364,29 +368,7 @@ export interface SkeletonHeadingItemProps {
      */
     isShimmering?: boolean;
     /**
-     * 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.
+     * Bounded style overrides.
      */
-    cssFn?: StatelessCSSFn;
-}
-export type ItemState = {
-    isSelected: boolean;
-    isDisabled: boolean;
-};
-/**
- * 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[];
+    xcss?: StrictXCSSProp<'paddingBlock' | 'paddingInline' | 'paddingBlockStart' | 'paddingBlockEnd' | 'paddingInlineStart' | 'paddingInlineEnd', never>;
 }
-/**
- * @deprecated This type is deprecated and will be removed in a future release. See DSP-2676 for more information.
- */
-export type StatelessCSSFn = CSSFn<void>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/menu",
-	"version": "7.0.0",
+	"version": "8.0.0",
 	"description": "A list of options to help users navigate, or perform actions.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -41,18 +41,17 @@
 		}
 	},
 	"dependencies": {
-		"@atlaskit/app-provider": "^2.1.0",
+		"@atlaskit/app-provider": "^2.2.0",
 		"@atlaskit/css": "^0.10.0",
 		"@atlaskit/ds-lib": "^4.0.0",
 		"@atlaskit/focus-ring": "^3.0.0",
 		"@atlaskit/interaction-context": "^3.0.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
-		"@atlaskit/primitives": "^14.7.0",
+		"@atlaskit/primitives": "^14.8.0",
 		"@atlaskit/theme": "^18.0.0",
-		"@atlaskit/tokens": "^4.8.0",
+		"@atlaskit/tokens": "^4.9.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^0.18.3",
-		"@emotion/react": "^11.7.1"
+		"@compiled/react": "^0.18.3"
 	},
 	"peerDependencies": {
 		"react": "^18.2.0",
@@ -62,12 +61,12 @@
 		"@af/accessibility-testing": "workspace:^",
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/button": "^23.0.0",
+		"@atlaskit/button": "^23.2.0",
 		"@atlaskit/docs": "^10.0.0",
-		"@atlaskit/icon": "^26.0.0",
+		"@atlaskit/icon": "^26.1.0",
 		"@atlaskit/icon-file-type": "^7.0.0",
 		"@atlaskit/icon-object": "^7.1.0",
-		"@atlaskit/link": "^3.1.0",
+		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/section-message": "^8.2.0",
 		"@atlaskit/visual-regression": "workspace:^",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",

package/dist/cjs/internal/components/skeleton-shimmer.js

@@ -1,73 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("@emotion/react");
-var _colors = require("@atlaskit/theme/colors");
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
-/**
- * These keyframes are mirrored in:
- * packages/design-system/theme/src/constants.tsx
- *
- * Please update both.
- */
-var shimmerKeyframes = (0, _react.keyframes)({
-  from: {
-    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")")
-  },
-  to: {
-    backgroundColor: "var(--ds-skeleton-subtle, ".concat(_colors.N30A, ")")
-  }
-});
-
-/**
- * These styles are mirrored in:
- * packages/design-system/theme/src/constants.tsx
- *
- * Please update both.
- */
-var shimmerStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before, ::after': {
-    animationDirection: 'alternate',
-    animationDuration: '1.5s',
-    animationIterationCount: 'infinite',
-    animationName: "".concat(shimmerKeyframes),
-    animationTimingFunction: 'linear',
-    backgroundColor: "var(--ds-skeleton, ".concat(_colors.N20A, ")")
-  }
-});
-
-/**
- * __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
- */
-var SkeletonShimmer = function SkeletonShimmer(_ref) {
-  var children = _ref.children,
-    _ref$isShimmering = _ref.isShimmering,
-    isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering;
-  return (0, _react.jsx)(_react.ClassNames, null, function (_ref2) {
-    var css = _ref2.css;
-    return children({
-      className: isShimmering ? css(shimmerStyles) : undefined
-    });
-  });
-};
-var _default = exports.default = SkeletonShimmer;

package/dist/es2019/internal/components/skeleton-shimmer.js

@@ -1,65 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { ClassNames, css, jsx, keyframes } from '@emotion/react';
-import { N20A, N30A } from '@atlaskit/theme/colors';
-/**
- * These keyframes are mirrored in:
- * packages/design-system/theme/src/constants.tsx
- *
- * Please update both.
- */
-const shimmerKeyframes = keyframes({
-  from: {
-    backgroundColor: `var(--ds-skeleton, ${N20A})`
-  },
-  to: {
-    backgroundColor: `var(--ds-skeleton-subtle, ${N30A})`
-  }
-});
-
-/**
- * These styles are mirrored in:
- * packages/design-system/theme/src/constants.tsx
- *
- * Please update both.
- */
-const shimmerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before, ::after': {
-    animationDirection: 'alternate',
-    animationDuration: '1.5s',
-    animationIterationCount: 'infinite',
-    animationName: `${shimmerKeyframes}`,
-    animationTimingFunction: 'linear',
-    backgroundColor: `var(--ds-skeleton, ${N20A})`
-  }
-});
-
-/**
- * __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
- */
-const SkeletonShimmer = ({
-  children,
-  isShimmering = false
-}) => {
-  return jsx(ClassNames, null, ({
-    css
-  }) => children({
-    className: isShimmering ? css(shimmerStyles) : undefined
-  }));
-};
-export default SkeletonShimmer;

package/dist/esm/internal/components/skeleton-shimmer.js

@@ -1,66 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-import { ClassNames, css, jsx, keyframes } from '@emotion/react';
-import { N20A, N30A } from '@atlaskit/theme/colors';
-/**
- * These keyframes are mirrored in:
- * packages/design-system/theme/src/constants.tsx
- *
- * Please update both.
- */
-var shimmerKeyframes = keyframes({
-  from: {
-    backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")")
-  },
-  to: {
-    backgroundColor: "var(--ds-skeleton-subtle, ".concat(N30A, ")")
-  }
-});
-
-/**
- * These styles are mirrored in:
- * packages/design-system/theme/src/constants.tsx
- *
- * Please update both.
- */
-var shimmerStyles = css({
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
-  '::before, ::after': {
-    animationDirection: 'alternate',
-    animationDuration: '1.5s',
-    animationIterationCount: 'infinite',
-    animationName: "".concat(shimmerKeyframes),
-    animationTimingFunction: 'linear',
-    backgroundColor: "var(--ds-skeleton, ".concat(N20A, ")")
-  }
-});
-
-/**
- * __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
- */
-var SkeletonShimmer = function SkeletonShimmer(_ref) {
-  var children = _ref.children,
-    _ref$isShimmering = _ref.isShimmering,
-    isShimmering = _ref$isShimmering === void 0 ? false : _ref$isShimmering;
-  return jsx(ClassNames, null, function (_ref2) {
-    var css = _ref2.css;
-    return children({
-      className: isShimmering ? css(shimmerStyles) : undefined
-    });
-  });
-};
-export default SkeletonShimmer;

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

@@ -1,27 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type 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/internal/components/skeleton-shimmer.d.ts

@@ -1,27 +0,0 @@
-/**
- * @jsxRuntime classic
- * @jsx jsx
- */
-import { type 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;