@atlaskit/primitives 1.7.0 → 1.9.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/primitives
 
+## 1.9.0
+
+### Minor Changes
+
+- [#42494](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42494) [`8cc2926465e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8cc2926465e) - Removed the ability to use the `style` prop on primitives such as Inline, Stack, and Flex. This prop previously had no effect on these components and is now only allowed on Box.
+
+## 1.8.0
+
+### Minor Changes
+
+- [#42305](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42305) [`4c9d4a7be34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c9d4a7be34) - - Link primitive will now throw an error if a router link configuration object is passed to the `href` prop when there is not a router link component set in the AppProvider
+
+### Patch Changes
+
+- [#42305](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/42305) [`4c9d4a7be34`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4c9d4a7be34) - - Fixes a bug where Link primitive was not passing through router link configuration objects
+- Updated dependencies
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/components/link.js

@@ -1,21 +1,23 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-var _typeof = require("@babel/runtime/helpers/typeof");
+var _typeof3 = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _appProvider = require("@atlaskit/app-provider");
 var _xcss = require("../xcss/xcss");
 var _box = _interopRequireDefault(require("./box"));
 var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
 // and to prevent additional dependency
 var baseFocusRingStyles = {
@@ -37,20 +39,7 @@ var focusRingStyles = (0, _xcss.xcss)({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-
-/**
- * __UNSAFE_LINK__
- *
- * @internal Still under development. Do not use.
- *
- * A Link is a primitive component that renders a `<a>` anchor. It utilizes
- * the configured link component in the AppProvider if set.
- *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
- */
-var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var Link = function Link(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -80,14 +69,17 @@ var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
    * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
-  return /*#__PURE__*/_react.default.createElement(_box.default, (0, _extends2.default)({}, htmlAttributes, {
-    // TODO: Box doesn't allow `as` components
-    // @ts-expect-error
+  var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
+  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
+  return /*#__PURE__*/_react.default.createElement(_box.default
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , (0, _extends2.default)({}, htmlAttributes, {
+    // @ts-expect-error (TODO: Box doesn't allow `as` components)
     as: isRouterLink ? RouterLink : 'a',
     ref: ref,
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
-    href: typeof href === 'string' ? href : undefined,
+    href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: isExternal && target === undefined ? '_blank' : target,
     rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
     backgroundColor: backgroundColor,
@@ -102,5 +94,20 @@ var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ,
     xcss: styles
   }), children);
-});
+};
+
+// Workarounds to support generic types with forwardRef
+/**
+ * __UNSAFE_LINK__
+ *
+ * @internal Still under development. Do not use.
+ *
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
+ * the configured router link component in the AppProvider if set.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
+ * - [Code](https://atlassian.design/components/primitives/link/code)
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ */
+var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(Link);
 var _default = exports.default = UNSAFE_LINK;

package/dist/es2019/components/link.js

@@ -1,5 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { forwardRef } from 'react';
+import invariant from 'tiny-invariant';
 import { useRouterLink } from '@atlaskit/app-provider';
 import { xcss } from '../xcss/xcss';
 import Box from './box';
@@ -24,20 +25,7 @@ const focusRingStyles = xcss({
 });
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-
-/**
- * __UNSAFE_LINK__
- *
- * @internal Still under development. Do not use.
- *
- * A Link is a primitive component that renders a `<a>` anchor. It utilizes
- * the configured link component in the AppProvider if set.
- *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
- */
-const UNSAFE_LINK = /*#__PURE__*/forwardRef(({
+const Link = ({
   href,
   children,
   backgroundColor,
@@ -68,14 +56,17 @@ const UNSAFE_LINK = /*#__PURE__*/forwardRef(({
    * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
    */
   const isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
-  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
-    // TODO: Box doesn't allow `as` components
-    // @ts-expect-error
+  const hrefObjectUsedWithoutRouterLink = RouterLink === undefined && typeof href === 'object';
+  invariant(!hrefObjectUsedWithoutRouterLink, `@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider`);
+  return /*#__PURE__*/React.createElement(Box
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, htmlAttributes, {
+    // @ts-expect-error (TODO: Box doesn't allow `as` components)
     as: isRouterLink ? RouterLink : 'a',
     ref: ref,
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
-    href: typeof href === 'string' ? href : undefined,
+    href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: isExternal && target === undefined ? '_blank' : target,
     rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
     backgroundColor: backgroundColor,
@@ -90,5 +81,20 @@ const UNSAFE_LINK = /*#__PURE__*/forwardRef(({
     ,
     xcss: styles
   }), children);
-});
+};
+
+// Workarounds to support generic types with forwardRef
+/**
+ * __UNSAFE_LINK__
+ *
+ * @internal Still under development. Do not use.
+ *
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
+ * the configured router link component in the AppProvider if set.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
+ * - [Code](https://atlassian.design/components/primitives/link/code)
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ */
+const UNSAFE_LINK = /*#__PURE__*/forwardRef(Link);
 export default UNSAFE_LINK;

package/dist/esm/components/link.js

@@ -1,8 +1,10 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _typeof from "@babel/runtime/helpers/typeof";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"];
 import React, { forwardRef } from 'react';
+import invariant from 'tiny-invariant';
 import { useRouterLink } from '@atlaskit/app-provider';
 import { xcss } from '../xcss/xcss';
 import Box from './box';
@@ -27,20 +29,7 @@ var focusRingStyles = xcss({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-
-/**
- * __UNSAFE_LINK__
- *
- * @internal Still under development. Do not use.
- *
- * A Link is a primitive component that renders a `<a>` anchor. It utilizes
- * the configured link component in the AppProvider if set.
- *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
- */
-var UNSAFE_LINK = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var Link = function Link(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -70,14 +59,17 @@ var UNSAFE_LINK = /*#__PURE__*/forwardRef(function (_ref, ref) {
    * - it's not a non-HTTP-based link (e.g. emails, phone numbers, hash links etc.)
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
-  return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
-    // TODO: Box doesn't allow `as` components
-    // @ts-expect-error
+  var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';
+  invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
+  return /*#__PURE__*/React.createElement(Box
+  // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+  , _extends({}, htmlAttributes, {
+    // @ts-expect-error (TODO: Box doesn't allow `as` components)
     as: isRouterLink ? RouterLink : 'a',
     ref: ref,
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
-    href: typeof href === 'string' ? href : undefined,
+    href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: isExternal && target === undefined ? '_blank' : target,
     rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
     backgroundColor: backgroundColor,
@@ -92,5 +84,20 @@ var UNSAFE_LINK = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ,
     xcss: styles
   }), children);
-});
+};
+
+// Workarounds to support generic types with forwardRef
+/**
+ * __UNSAFE_LINK__
+ *
+ * @internal Still under development. Do not use.
+ *
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
+ * the configured router link component in the AppProvider if set.
+ *
+ * - [Examples](https://atlassian.design/components/primitives/link/examples)
+ * - [Code](https://atlassian.design/components/primitives/link/code)
+ * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ */
+var UNSAFE_LINK = /*#__PURE__*/forwardRef(Link);
 export default UNSAFE_LINK;

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

@@ -2,12 +2,12 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { SVGElements } from './internal/types';
-import type { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps, StyleProp } from './types';
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 type BaseBoxProps<T extends CustomElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.

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

@@ -1,24 +1,31 @@
-import { type ReactElement, type ReactNode } from 'react';
+import React, { type ReactNode, type Ref } from 'react';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
-export type LinkProps<LinkConfig extends {} = {}> = RouterLinkComponentProps<LinkConfig> & Omit<BoxProps<'a'>, 'as' | 'children' | 'style'> & {
+export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & {
     /**
      * `children` should be defined to ensure links have text
      */
     children: ReactNode;
 };
-type LinkComponent = (props: LinkProps, displayName: string) => ReactElement | null;
+declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __UNSAFE_LINK__
  *
  * @internal Still under development. Do not use.
  *
- * A Link is a primitive component that renders a `<a>` anchor. It utilizes
- * the configured link component in the AppProvider if set.
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
+ * the configured router link component in the AppProvider if set.
  *
  * - [Examples](https://atlassian.design/components/primitives/link/examples)
  * - [Code](https://atlassian.design/components/primitives/link/code)
  * - [Usage](https://atlassian.design/components/primitives/link/usage)
  */
-declare const UNSAFE_LINK: LinkComponent;
+declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & {
+    /**
+     * `children` should be defined to ensure links have text
+     */
+    children: ReactNode;
+} & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => ReturnType<typeof Link>;
 export default UNSAFE_LINK;

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

@@ -5,11 +5,6 @@ export type BasePrimitiveProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
-     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
-     */
-    style?: CSSProperties;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
@@ -19,6 +14,13 @@ export type BasePrimitiveProps = {
      */
     role?: string;
 };
+export type StyleProp = {
+    /**
+     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
+     */
+    style?: CSSProperties;
+};
 export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
 export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type Spread = 'space-between';

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

@@ -2,12 +2,12 @@
 import { ComponentPropsWithoutRef, ComponentPropsWithRef, ReactElement, ReactNode } from 'react';
 import { BackgroundColor, type Space } from '../xcss/style-maps.partial';
 import { SVGElements } from './internal/types';
-import type { BasePrimitiveProps } from './types';
+import type { BasePrimitiveProps, StyleProp } from './types';
 type AllowedElements = Exclude<keyof JSX.IntrinsicElements, SVGElements>;
 type CustomElementType<P = any> = {
     [K in AllowedElements]: P extends JSX.IntrinsicElements[K] ? K : never;
 }[AllowedElements];
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 type BaseBoxProps<T extends CustomElementType> = {
     /**
      * The DOM element to render as the Box. Defaults to `div`.

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

@@ -1,24 +1,31 @@
-import { type ReactElement, type ReactNode } from 'react';
+import React, { type ReactNode, type Ref } from 'react';
 import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
 import { type BoxProps } from './box';
-export type LinkProps<LinkConfig extends {} = {}> = RouterLinkComponentProps<LinkConfig> & Omit<BoxProps<'a'>, 'as' | 'children' | 'style'> & {
+export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & {
     /**
      * `children` should be defined to ensure links have text
      */
     children: ReactNode;
 };
-type LinkComponent = (props: LinkProps, displayName: string) => ReactElement | null;
+declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __UNSAFE_LINK__
  *
  * @internal Still under development. Do not use.
  *
- * A Link is a primitive component that renders a `<a>` anchor. It utilizes
- * the configured link component in the AppProvider if set.
+ * A Link is a primitive component that renders an `<a>` anchor. It utilizes
+ * the configured router link component in the AppProvider if set.
  *
  * - [Examples](https://atlassian.design/components/primitives/link/examples)
  * - [Code](https://atlassian.design/components/primitives/link/code)
  * - [Usage](https://atlassian.design/components/primitives/link/usage)
  */
-declare const UNSAFE_LINK: LinkComponent;
+declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & {
+    /**
+     * `children` should be defined to ensure links have text
+     */
+    children: ReactNode;
+} & {
+    ref?: React.Ref<HTMLAnchorElement> | undefined;
+}) => ReturnType<typeof Link>;
 export default UNSAFE_LINK;

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

@@ -5,11 +5,6 @@ export type BasePrimitiveProps = {
      * A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
      */
     testId?: string;
-    /**
-     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
-     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
-     */
-    style?: CSSProperties;
     /**
      * Apply a subset of permitted styles, powered by Atlassian Design System tokens.
      */
@@ -19,6 +14,13 @@ export type BasePrimitiveProps = {
      */
     role?: string;
 };
+export type StyleProp = {
+    /**
+     * Inline styles to be applied to the primitive. Only apply as a last resort, or where
+     * styles cannot otherwise be calculated outside of the runtime of the component they're applied.
+     */
+    style?: CSSProperties;
+};
 export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
 export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 export type Spread = 'space-between';

package/extract-react-types/box-props.tsx

@@ -1,7 +1,7 @@
 // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
 import React, { ElementType, ReactNode } from 'react';
 
-import { BasePrimitiveProps } from '../src/components/types';
+import { BasePrimitiveProps, StyleProp } from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 namespace Token {
@@ -84,5 +84,6 @@ export default function Box(
      * Forwarded ref element.
      */
     ref?: React.ComponentPropsWithRef<ElementType>['ref'];
-  } & BasePrimitiveProps,
+  } & BasePrimitiveProps &
+    StyleProp,
 ) {}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "1.7.0",
+  "version": "1.9.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -125,7 +125,7 @@
     "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
   },
   "dependencies": {
-    "@atlaskit/app-provider": "^0.3.0",
+    "@atlaskit/app-provider": "^0.4.0",
     "@atlaskit/tokens": "^1.28.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",

package/report.api.md

@@ -313,7 +313,6 @@ type BaseBoxProps<T extends CustomElementType> = {
 // @public (undocumented)
 type BasePrimitiveProps = {
   testId?: string;
-  style?: CSSProperties;
   xcss?: Array<XCSS | false | undefined> | XCSS;
   role?: string;
 };
@@ -407,6 +406,7 @@ export type BoxProps<T extends CustomElementType> = Omit<
   'as' | 'className'
 > &
   BasePrimitiveProps &
+  StyleProp &
   BaseBoxProps<T>;
 
 // @public
@@ -974,6 +974,11 @@ export type StackProps<T extends ElementType = 'div'> = {
   ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type StyleProp = {
+  style?: CSSProperties;
+};
+
 // @public (undocumented)
 type SVGElements =
   | 'animate'

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

@@ -297,7 +297,6 @@ type BaseBoxProps<T extends CustomElementType> = {
 // @public (undocumented)
 type BasePrimitiveProps = {
     testId?: string;
-    style?: CSSProperties;
     xcss?: Array<XCSS | false | undefined> | XCSS;
     role?: string;
 };
@@ -375,7 +374,7 @@ export const Box: BoxComponent;
 type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
 
 // @public (undocumented)
-export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & BaseBoxProps<T>;
+export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
 
 // @public
 export type Breakpoint = 'lg' | 'md' | 'sm' | 'xl' | 'xs' | 'xxs';
@@ -687,6 +686,11 @@ export type StackProps<T extends ElementType = 'div'> = {
     ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
+// @public (undocumented)
+type StyleProp = {
+    style?: CSSProperties;
+};
+
 // @public (undocumented)
 type SVGElements = 'animate' | 'animateMotion' | 'animateTransform' | 'circle' | 'clipPath' | 'defs' | 'desc' | 'ellipse' | 'feBlend' | 'feColorMatrix' | 'feComponentTransfer' | 'feComposite' | 'feConvolveMatrix' | 'feDiffuseLighting' | 'feDisplacementMap' | 'feDistantLight' | 'feDropShadow' | 'feFlood' | 'feFuncA' | 'feFuncB' | 'feFuncG' | 'feFuncR' | 'feGaussianBlur' | 'feImage' | 'feMerge' | 'feMergeNode' | 'feMorphology' | 'feOffset' | 'fePointLight' | 'feSpecularLighting' | 'feSpotLight' | 'feTile' | 'feTurbulence' | 'filter' | 'foreignObject' | 'g' | 'image' | 'line' | 'linearGradient' | 'marker' | 'mask' | 'metadata' | 'mpath' | 'path' | 'pattern' | 'polygon' | 'polyline' | 'radialGradient' | 'rect' | 'stop' | 'svg' | 'switch' | 'symbol' | 'text' | 'textPath' | 'tspan' | 'use' | 'view';