@atlaskit/primitives 10.1.0 → 11.0.1

package/CHANGELOG.md

@@ -1,5 +1,77 @@
 # @atlaskit/primitives
 
+## 11.0.1
+
+### Patch Changes
+
+- [#119548](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119548)
+  [`c99cce707b5cb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c99cce707b5cb) -
+  The separator prop in the inline component has had its type expanded to `ReactNode`.
+- Updated dependencies
+
+## 11.0.0
+
+### Major Changes
+
+- [#119014](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119014)
+  [`80c46fcb18957`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/80c46fcb18957) -
+  Increased type safety for `xcss`. In general, non-token values for the following properties are no
+  longer allowed:
+
+  - `margin`
+  - `marginBlock`
+  - `marginBlockEnd`
+  - `marginBlockStart`
+  - `marginBottom`
+  - `marginInline`
+  - `marginInlineEnd`
+  - `marginInlineStart`
+  - `marginLeft`
+  - `marginRight`
+  - `marginTop`
+  - `paddingBottom`
+  - `paddingLeft`
+  - `paddingRight`
+  - `paddingTop`
+
+  Note: Logical properties for `padding`, e.g. `paddingInline`, already prohibit non-token values.
+
+  For example:
+
+  ```typescript
+  const styles = xcss({
+    padding: '8px', //  <-- Type Error
+             ^^^^^
+  });
+  ```
+
+  A few additional non-token values are still accepted:
+
+  - `margin`: `'0 auto'` | `'auto'` | `'0'`
+  - `marginBlock`: `'auto'` | `'0'`
+  - `marginBlockEnd`: `'auto'` | `'0'`
+  - `marginBlockStart`: `'auto'` | `'0'`
+  - `marginBottom`: `'auto'` | `'0'`
+  - `marginInline`: `'auto'` | `'0'`
+  - `marginInlineEnd`: `'auto'` | `'0'`
+  - `marginInlineStart`: `'auto'` | `'0'`
+  - `marginLeft`: `'auto'` | `'0'`
+  - `marginRight`: `'auto'` | `'0'`
+  - `marginTop`: `'auto'` | `'0'`
+  - `paddingBlock`: `'0'`
+  - `paddingBlockEnd`: `'0'`
+  - `paddingBlockStart`: `'0'`
+  - `paddingBottom`: `'0'`
+  - `paddingInline`: `'0'`
+  - `paddingInlineEnd`: `'0'`
+  - `paddingInlineStart`: `'0'`
+  - `paddingLeft`: `'0'`
+  - `paddingRight`: `'0'`
+  - `paddingTop`: `'0'`
+
+  as well as global CSS properties: `'inherit'` | `'initial'` | `'revert'` | `'revert-layer'` |
+  `'unset'`
+
 ## 10.1.0
 
 ### Minor Changes

package/dist/cjs/components/anchor.js

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

package/dist/cjs/components/inline.js

@@ -1,15 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _xcss = require("../xcss/xcss");
 var _flex = _interopRequireDefault(require("./flex"));
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /**
  * @jsxRuntime classic

package/dist/cjs/components/pressable.js

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

package/dist/cjs/xcss/style-maps.partial.js

@@ -530,6 +530,8 @@ var fontFamilyMap = exports.fontFamilyMap = {
  * @codegenEnd
  */
 
+// Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
+
 // Generate maps for Box props. backgroundColor, padding, etc
 var spacingProperties = [
 // Used by Box

package/dist/es2019/components/anchor.js

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

package/dist/es2019/components/inline.js

@@ -3,7 +3,7 @@
  * @jsxRuntime classic
  */
 /** @jsx jsx */
-import { Children, forwardRef, Fragment, memo } from 'react';
+import React, { Children, forwardRef, Fragment, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/components/pressable.js

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

package/dist/es2019/xcss/style-maps.partial.js

@@ -525,6 +525,8 @@ export const fontFamilyMap = {
  * @codegenEnd
  */
 
+// Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
+
 // Generate maps for Box props. backgroundColor, padding, etc
 const spacingProperties = [
 // Used by Box

package/dist/esm/components/anchor.js

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

package/dist/esm/components/inline.js

@@ -4,7 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  * @jsxRuntime classic
  */
 /** @jsx jsx */
-import { Children, forwardRef, Fragment, memo } from 'react';
+import React, { Children, forwardRef, Fragment, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/components/pressable.js

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

package/dist/esm/xcss/style-maps.partial.js

@@ -525,6 +525,8 @@ export var fontFamilyMap = {
  * @codegenEnd
  */
 
+// Margin needs some bespoke types: https://atlassian.slack.com/archives/CKRHB23K8/p1712623192772909
+
 // Generate maps for Box props. backgroundColor, padding, etc
 var spacingProperties = [
 // Used by Box

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  */
 /** @jsx jsx */
-import { type ElementType, type ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type InlineProps<T extends ElementType = 'div'> = {
@@ -42,7 +42,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
     /**
      * Renders a separator string between each child.
      */
-    separator?: string;
+    separator?: React.ReactNode;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -66,7 +66,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
  * ```
  *
  */
-declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+declare const Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
     /**
      * The DOM element to render as the Inline. Defaults to `div`.
      */
@@ -103,7 +103,7 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
     /**
      * Renders a separator string between each child.
      */
-    separator?: string | undefined;
+    separator?: React.ReactNode;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -112,5 +112,5 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      * Forwarded ref element.
      */
     ref?: any;
-} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & React.RefAttributes<any>>>;
 export default Inline;

package/dist/types/xcss/style-maps.partial.d.ts

@@ -550,7 +550,9 @@ export type FontFamily = keyof typeof fontFamilyMap;
 /**
  * @codegenEnd
  */
-type MarginSpace = AllSpace | 'auto';
+type MarginSpace = AllSpace | 'auto' | '0';
+type PaddingSpace = Space | '0';
+type GlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
 type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
     backgroundColor?: BackgroundColor;
@@ -601,17 +603,17 @@ export type TokenisedProps = {
     insetInlineEnd?: AutoComplete<AllSpace>;
     insetInlineStart?: AutoComplete<AllSpace>;
     left?: AutoComplete<AllSpace>;
-    margin?: AutoComplete<MarginSpace>;
-    marginBlock?: AutoComplete<MarginSpace>;
-    marginBlockEnd?: AutoComplete<MarginSpace>;
-    marginBlockStart?: AutoComplete<MarginSpace>;
-    marginBottom?: AutoComplete<MarginSpace>;
-    marginInline?: AutoComplete<MarginSpace>;
-    marginInlineEnd?: AutoComplete<MarginSpace>;
-    marginInlineStart?: AutoComplete<MarginSpace>;
-    marginLeft?: AutoComplete<MarginSpace>;
-    marginRight?: AutoComplete<MarginSpace>;
-    marginTop?: AutoComplete<MarginSpace>;
+    margin?: MarginSpace | '0 auto' | GlobalValue;
+    marginBlock?: MarginSpace | GlobalValue;
+    marginInline?: MarginSpace | GlobalValue;
+    marginBlockEnd?: MarginSpace | GlobalValue;
+    marginBlockStart?: MarginSpace | GlobalValue;
+    marginBottom?: MarginSpace | GlobalValue;
+    marginInlineEnd?: MarginSpace | GlobalValue;
+    marginInlineStart?: MarginSpace | GlobalValue;
+    marginLeft?: MarginSpace | GlobalValue;
+    marginRight?: MarginSpace | GlobalValue;
+    marginTop?: MarginSpace | GlobalValue;
     maxBlockSize?: Dimension | string;
     maxHeight?: Dimension | string;
     maxInlineSize?: Dimension | string;
@@ -624,17 +626,17 @@ export type TokenisedProps = {
     outlineColor?: BorderColor;
     outlineOffset?: AllSpace;
     outlineWidth?: BorderWidth | string;
-    padding?: Space;
-    paddingBlock?: Space;
-    paddingBlockEnd?: Space;
-    paddingBlockStart?: Space;
-    paddingBottom?: AutoComplete<Space>;
-    paddingInline?: Space;
-    paddingInlineEnd?: Space;
-    paddingInlineStart?: Space;
-    paddingLeft?: AutoComplete<Space>;
-    paddingRight?: AutoComplete<Space>;
-    paddingTop?: AutoComplete<Space>;
+    padding?: PaddingSpace | GlobalValue;
+    paddingBlock?: PaddingSpace | GlobalValue;
+    paddingBlockEnd?: PaddingSpace | GlobalValue;
+    paddingBlockStart?: PaddingSpace | GlobalValue;
+    paddingBottom?: PaddingSpace | GlobalValue;
+    paddingInline?: PaddingSpace | GlobalValue;
+    paddingInlineEnd?: PaddingSpace | GlobalValue;
+    paddingInlineStart?: PaddingSpace | GlobalValue;
+    paddingLeft?: PaddingSpace | GlobalValue;
+    paddingRight?: PaddingSpace | GlobalValue;
+    paddingTop?: PaddingSpace | GlobalValue;
     right?: AutoComplete<AllSpace>;
     rowGap?: Space;
     top?: AutoComplete<AllSpace>;

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  */
 /** @jsx jsx */
-import { type ElementType, type ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type InlineProps<T extends ElementType = 'div'> = {
@@ -42,7 +42,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
     /**
      * Renders a separator string between each child.
      */
-    separator?: string;
+    separator?: React.ReactNode;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -66,7 +66,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
  * ```
  *
  */
-declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+declare const Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
     /**
      * The DOM element to render as the Inline. Defaults to `div`.
      */
@@ -103,7 +103,7 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
     /**
      * Renders a separator string between each child.
      */
-    separator?: string | undefined;
+    separator?: React.ReactNode;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -112,5 +112,5 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      * Forwarded ref element.
      */
     ref?: any;
-} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & React.RefAttributes<any>>>;
 export default Inline;

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -550,7 +550,9 @@ export type FontFamily = keyof typeof fontFamilyMap;
 /**
  * @codegenEnd
  */
-type MarginSpace = AllSpace | 'auto';
+type MarginSpace = AllSpace | 'auto' | '0';
+type PaddingSpace = Space | '0';
+type GlobalValue = 'inherit' | 'initial' | 'revert' | 'revert-layer' | 'unset';
 type AutoComplete<T extends string> = T | Omit<string, T>;
 export type TokenisedProps = {
     backgroundColor?: BackgroundColor;
@@ -601,17 +603,17 @@ export type TokenisedProps = {
     insetInlineEnd?: AutoComplete<AllSpace>;
     insetInlineStart?: AutoComplete<AllSpace>;
     left?: AutoComplete<AllSpace>;
-    margin?: AutoComplete<MarginSpace>;
-    marginBlock?: AutoComplete<MarginSpace>;
-    marginBlockEnd?: AutoComplete<MarginSpace>;
-    marginBlockStart?: AutoComplete<MarginSpace>;
-    marginBottom?: AutoComplete<MarginSpace>;
-    marginInline?: AutoComplete<MarginSpace>;
-    marginInlineEnd?: AutoComplete<MarginSpace>;
-    marginInlineStart?: AutoComplete<MarginSpace>;
-    marginLeft?: AutoComplete<MarginSpace>;
-    marginRight?: AutoComplete<MarginSpace>;
-    marginTop?: AutoComplete<MarginSpace>;
+    margin?: MarginSpace | '0 auto' | GlobalValue;
+    marginBlock?: MarginSpace | GlobalValue;
+    marginInline?: MarginSpace | GlobalValue;
+    marginBlockEnd?: MarginSpace | GlobalValue;
+    marginBlockStart?: MarginSpace | GlobalValue;
+    marginBottom?: MarginSpace | GlobalValue;
+    marginInlineEnd?: MarginSpace | GlobalValue;
+    marginInlineStart?: MarginSpace | GlobalValue;
+    marginLeft?: MarginSpace | GlobalValue;
+    marginRight?: MarginSpace | GlobalValue;
+    marginTop?: MarginSpace | GlobalValue;
     maxBlockSize?: Dimension | string;
     maxHeight?: Dimension | string;
     maxInlineSize?: Dimension | string;
@@ -624,17 +626,17 @@ export type TokenisedProps = {
     outlineColor?: BorderColor;
     outlineOffset?: AllSpace;
     outlineWidth?: BorderWidth | string;
-    padding?: Space;
-    paddingBlock?: Space;
-    paddingBlockEnd?: Space;
-    paddingBlockStart?: Space;
-    paddingBottom?: AutoComplete<Space>;
-    paddingInline?: Space;
-    paddingInlineEnd?: Space;
-    paddingInlineStart?: Space;
-    paddingLeft?: AutoComplete<Space>;
-    paddingRight?: AutoComplete<Space>;
-    paddingTop?: AutoComplete<Space>;
+    padding?: PaddingSpace | GlobalValue;
+    paddingBlock?: PaddingSpace | GlobalValue;
+    paddingBlockEnd?: PaddingSpace | GlobalValue;
+    paddingBlockStart?: PaddingSpace | GlobalValue;
+    paddingBottom?: PaddingSpace | GlobalValue;
+    paddingInline?: PaddingSpace | GlobalValue;
+    paddingInlineEnd?: PaddingSpace | GlobalValue;
+    paddingInlineStart?: PaddingSpace | GlobalValue;
+    paddingLeft?: PaddingSpace | GlobalValue;
+    paddingRight?: PaddingSpace | GlobalValue;
+    paddingTop?: PaddingSpace | GlobalValue;
     right?: AutoComplete<AllSpace>;
     rowGap?: Space;
     top?: AutoComplete<AllSpace>;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "10.1.0",
+	"version": "11.0.1",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -128,7 +128,7 @@
 		"@atlaskit/css": "^0.3.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/interaction-context": "^2.1.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.54.0",
 		"@atlaskit/visually-hidden": "^1.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",