@atlaskit/primitives 20.1.0 → 20.2.1

package/CHANGELOG.md

@@ -1,5 +1,25 @@
 # @atlaskit/primitives
 
+## 20.2.1
+
+### Patch Changes
+
+- [`86c21c639404f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/86c21c639404f) -
+  Run `scoped-jsx` codemod, migrating atlaskit components and examples to import the JSX type from
+  React and use logical CSS properties. The change is required for components to be compatible with
+  React 19 version, which removed JSX from global scope.
+
+## 20.2.0
+
+### Minor Changes
+
+- [`a02bbdc5849e2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a02bbdc5849e2) -
+  Promote compiled Flex and Grid primitives to general availability.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 20.1.0
 
 ### Minor Changes

package/constellation/flex/examples.mdx

@@ -24,24 +24,24 @@ richly-configured `Inline` or `Stack`. Like Stack and Inline, `Flex` exclusively
 token-backed `gap` properties to ensure layouts using `Flex` match the Atlassian Design System
 spacing scale.
 
-<Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/flex" />
+<Example Component={FlexJustifyContent} packageName="@atlaskit/primitives/compiled/flex" />
 
 ## Align items and justify content
 
 `Flex` applies the `alignItems` and `justifyContent` properties to align content along its cross and
 main axes respectively.
 
-<Example Component={FlexAlignItems} packageName="@atlaskit/primitives/flex" />
+<Example Component={FlexAlignItems} packageName="@atlaskit/primitives/compiled/flex" />
 
 ## Wrap
 
 Flex-prefixed properties in CSS do not have this prefix in the component API. For example,
 `flex-wrap` is instead applied as the `wrap` property.
 
-<Example Component={FlexWrap} packageName="@atlaskit/primitives/flex" />
+<Example Component={FlexWrap} packageName="@atlaskit/primitives/compiled/flex" />
 
 ## Direction
 
 Flex direction is applied via the `direction` property.
 
-<Example Component={FlexDirection} packageName="@atlaskit/primitives/flex" />
+<Example Component={FlexDirection} packageName="@atlaskit/primitives/compiled/flex" />

package/constellation/grid/examples.mdx

@@ -26,14 +26,14 @@ The `Grid` component is designed as a very basic mapping to the CSS Grid API. It
 alternative to [Flex](/components/primitives/flex), [Inline](/components/primitives/inline) or
 [Stack](/components/primitives/stack).
 
-<Example Component={GridBasic} packageName="@atlaskit/primitives/grid" />
+<Example Component={GridBasic} packageName="@atlaskit/primitives/compiled/grid" />
 
 ## Gap properties
 
 Gap properties `rowGap`, `columnGap` and `gap` only allow token-backed values. This is to aid
 ergonomics and keep the whitespace of the grid harmonious with the spacing system.
 
-<Example Component={GridGap} packageName="@atlaskit/primitives/grid" />
+<Example Component={GridGap} packageName="@atlaskit/primitives/compiled/grid" />
 
 ## Template syntax
 
@@ -45,33 +45,33 @@ properties.
 
 Template columns enables grid to declare the way columns are applied in the template.
 
-<Example Component={GridTemplate} packageName="@atlaskit/primitives/grid" />
+<Example Component={GridTemplate} packageName="@atlaskit/primitives/compiled/grid" />
 
 ### Template rows
 
 Template rows enables grid to declare the way row are applied in the template.
 
-<Example Component={GridTemplateRow} packageName="@atlaskit/primitives/grid" />
+<Example Component={GridTemplateRow} packageName="@atlaskit/primitives/compiled/grid" />
 
 ### Template areas
 
 Template areas enables grid to declare the grid areas are applied in the template.
 
-<Example Component={GridTemplateArea} packageName="@atlaskit/primitives/grid" />
+<Example Component={GridTemplateArea} packageName="@atlaskit/primitives/compiled/grid" />
 
 ## Autoflow syntax
 
 Grid-prefixed properties in CSS do not have this prefix in the component API. `grid-auto-flow` is
 instead applied via `autoFlow`.
 
-<Example Component={GridAutoFlow} packageName="@atlaskit/primitives/grid" />
+<Example Component={GridAutoFlow} packageName="@atlaskit/primitives/compiled/grid" />
 
 ## Responsive grid
 
 Here, we construct a grid layout that adapts from a single column to a four-column layout depending
 on the viewport size.
 
-<Example Component={ResponsiveGrid} packageName="@atlaskit/primitives/grid" />
+<Example Component={ResponsiveGrid} packageName="@atlaskit/primitives/compiled/grid" />
 
 You may also be looking for:
 

package/dist/cjs/compiled/components/anchor.js

@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/compiled/components/flex.js

@@ -85,8 +85,8 @@ var styles = {
  *
  * @example
  * ```tsx
- * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
- * import { Flex, Box } from '@atlaskit/primitives'
+ * import { Box } from '@atlaskit/primitives/compiled'
+ * import { Flex } from '@atlaskit/primitives/compiled/flex'
  *
  * const Component = () => (
  *   <Flex direction="column">

package/dist/cjs/compiled/components/grid.js

@@ -89,7 +89,8 @@ var gridAutoFlowMap = {
  *
  * @example
  * ```tsx
- * import { Grid, Box } from '@atlaskit/primitives'
+ * import { Box } from '@atlaskit/primitives/compiled'
+ * import { Grid } from '@atlaskit/primitives/compiled/grid'
  *
  * const Component = () => (
  *   <Grid gap="space.100" gridColumns="1fr 1fr">

package/dist/cjs/compiled/components/pressable.js

@@ -61,7 +61,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/components/anchor.js

@@ -105,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/components/pressable.js

@@ -97,7 +97,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/compiled/components/anchor.js

@@ -56,7 +56,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/compiled/components/flex.js

@@ -74,8 +74,8 @@ const styles = {
  *
  * @example
  * ```tsx
- * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
- * import { Flex, Box } from '@atlaskit/primitives'
+ * import { Box } from '@atlaskit/primitives/compiled'
+ * import { Flex } from '@atlaskit/primitives/compiled/flex'
  *
  * const Component = () => (
  *   <Flex direction="column">

package/dist/es2019/compiled/components/grid.js

@@ -81,7 +81,8 @@ const gridAutoFlowMap = {
  *
  * @example
  * ```tsx
- * import { Grid, Box } from '@atlaskit/primitives'
+ * import { Box } from '@atlaskit/primitives/compiled'
+ * import { Grid } from '@atlaskit/primitives/compiled/grid'
  *
  * const Component = () => (
  *   <Grid gap="space.100" gridColumns="1fr 1fr">

package/dist/es2019/compiled/components/pressable.js

@@ -48,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/components/anchor.js

@@ -94,7 +94,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

@@ -86,7 +86,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/compiled/components/anchor.js

@@ -61,7 +61,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/compiled/components/flex.js

@@ -76,8 +76,8 @@ var styles = {
  *
  * @example
  * ```tsx
- * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
- * import { Flex, Box } from '@atlaskit/primitives'
+ * import { Box } from '@atlaskit/primitives/compiled'
+ * import { Flex } from '@atlaskit/primitives/compiled/flex'
  *
  * const Component = () => (
  *   <Flex direction="column">

package/dist/esm/compiled/components/grid.js

@@ -81,7 +81,8 @@ var gridAutoFlowMap = {
  *
  * @example
  * ```tsx
- * import { Grid, Box } from '@atlaskit/primitives'
+ * import { Box } from '@atlaskit/primitives/compiled'
+ * import { Grid } from '@atlaskit/primitives/compiled/grid'
  *
  * const Component = () => (
  *   <Grid gap="space.100" gridColumns="1fr 1fr">

package/dist/esm/compiled/components/pressable.js

@@ -52,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/components/anchor.js

@@ -99,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/components/pressable.js

@@ -91,7 +91,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "20.0.1",
+    packageVersion: "20.2.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/types/compiled/components/anchor.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
+import { type ComponentPropsWithoutRef, type JSX, type ReactNode, type Ref } from 'react';
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import type { BasePrimitiveProps, StyleProp } from './types';

package/dist/types/compiled/components/bleed.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import React, { type ReactNode } from 'react';
+import React, { type JSX, type ReactNode } from 'react';
 import type { BasePrimitiveProps, BleedSpaceToken } from './types';
 export type BleedProps = {
     /**

package/dist/types/compiled/components/box.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactElement, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type JSX, type ReactElement, type ReactNode } from 'react';
 import { type StrictXCSSProp, type XCSSAllProperties, type XCSSAllPseudos } from '@atlaskit/css';
 import type { BackgroundColorToken, SVGElements } from '../../utils/types';
 import type { BasePrimitiveProps, PaddingToken, StyleProp, SurfaceColorToken } from './types';

package/dist/types/compiled/components/flex.d.ts

@@ -56,8 +56,8 @@ export type FlexProps<T extends ElementType = 'div'> = {
  *
  * @example
  * ```tsx
- * // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
- * import { Flex, Box } from '@atlaskit/primitives'
+ * import { Box } from '@atlaskit/primitives/compiled'
+ * import { Flex } from '@atlaskit/primitives/compiled/flex'
  *
  * const Component = () => (
  *   <Flex direction="column">

package/dist/types/compiled/components/focusable.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactElement, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type JSX, type ReactElement, type ReactNode } from 'react';
 import type { BasePrimitiveProps, StyleProp } from '../components/types';
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, 'button' | 'a'>;
 type CustomElement<P = any> = {

package/dist/types/compiled/components/grid.d.ts

@@ -66,7 +66,8 @@ export type GridProps<T extends ElementType = 'div'> = {
  *
  * @example
  * ```tsx
- * import { Grid, Box } from '@atlaskit/primitives'
+ * import { Box } from '@atlaskit/primitives/compiled'
+ * import { Grid } from '@atlaskit/primitives/compiled/grid'
  *
  * const Component = () => (
  *   <Grid gap="space.100" gridColumns="1fr 1fr">

package/dist/types/compiled/responsive/hide.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ReactNode } from 'react';
+import { type JSX, type ReactNode } from 'react';
 import { type BasePrimitiveProps } from '../components/types';
 import type { Breakpoint, ComponentAs } from './types';
 type ResponsiveHideProps = {

package/dist/types/compiled/responsive/show.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ReactNode } from 'react';
+import { type JSX, type ReactNode } from 'react';
 import { type BasePrimitiveProps } from '../components/types';
 import type { Breakpoint, ComponentAs } from './types';
 type ResponsiveShowProps = {

package/dist/types/components/box.d.ts

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  * @jsx jsx
  */
-import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type ReactElement, type ReactNode } from 'react';
+import { type ComponentPropsWithoutRef, type ComponentPropsWithRef, type JSX, type ReactElement, type ReactNode } from 'react';
 import { type SVGElements } from '../utils/types';
 import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import type { BasePrimitiveProps, StyleProp } from './types';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "20.1.0",
+	"version": "20.2.1",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -60,19 +60,13 @@
 					"title": "Flex",
 					"folder": "flex",
 					"slug": "primitives/flex",
-					"id": "@atlaskit/primitives/flex",
-					"status": {
-						"type": "beta"
-					}
+					"id": "@atlaskit/primitives/compiled/flex"
 				},
 				{
 					"title": "Grid",
 					"folder": "grid",
 					"slug": "primitives/grid",
-					"id": "@atlaskit/primitives/grid",
-					"status": {
-						"type": "beta"
-					}
+					"id": "@atlaskit/primitives/compiled/grid"
 				},
 				{
 					"title": "Bleed",
@@ -145,7 +139,7 @@
 		"@atlaskit/ds-lib": "^8.0.0",
 		"@atlaskit/interaction-context": "^4.0.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/tokens": "^15.1.0",
+		"@atlaskit/tokens": "^15.2.0",
 		"@atlaskit/visually-hidden": "^4.1.0",
 		"@babel/runtime": "^7.0.0",
 		"@compiled/react": "^0.20.0",
@@ -163,7 +157,7 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/visual-regression": "workspace:^",
 		"@atlaskit/avatar": "^26.1.0",
-		"@atlaskit/button": "^24.2.0",
+		"@atlaskit/button": "^24.3.0",
 		"@atlaskit/checkbox": "^18.1.0",
 		"@atlaskit/code": "^18.2.0",
 		"@atlaskit/docs": "^12.0.0",
@@ -174,7 +168,7 @@
 		"@atlaskit/icon": "^36.1.0",
 		"@atlaskit/image": "^4.1.0",
 		"@atlaskit/link": "^4.1.0",
-		"@atlaskit/logo": "^21.2.0",
+		"@atlaskit/logo": "^21.3.0",
 		"@atlaskit/lozenge": "^14.1.0",
 		"@atlaskit/motion": "^7.2.0",
 		"@atlaskit/object": "^2.1.0",

package/primitives.docs.tsx

@@ -113,7 +113,7 @@ const documentation: StructuredContentSource = {
 		{
 			name: 'Flex',
 			description: 'A primitive Flex component for flexbox layout with compiled styling support.',
-			status: 'open-beta',
+			status: 'general-availability',
 			import: {
 				name: 'Flex',
 				package: '@atlaskit/primitives/compiled',
@@ -193,7 +193,7 @@ const documentation: StructuredContentSource = {
 		{
 			name: 'Grid',
 			description: 'A primitive Grid component for CSS Grid layout with compiled styling support.',
-			status: 'open-beta',
+			status: 'general-availability',
 			import: {
 				name: 'Grid',
 				package: '@atlaskit/primitives/compiled',