@atlaskit/primitives 7.0.0 → 7.0.2

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

@@ -1,89 +1,89 @@
 import { type ElementType, type ReactNode } from 'react';
 
 import type {
-  AlignBlock,
-  AlignInline,
-  BasePrimitiveProps,
-  Grow,
-  Spread,
+	AlignBlock,
+	AlignInline,
+	BasePrimitiveProps,
+	Grow,
+	Spread,
 } from '../src/components/types';
 
 type Space =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800'
-  | 'space.1000';
+	| 'space.0'
+	| 'space.025'
+	| 'space.050'
+	| 'space.075'
+	| 'space.100'
+	| 'space.150'
+	| 'space.200'
+	| 'space.250'
+	| 'space.300'
+	| 'space.400'
+	| 'space.500'
+	| 'space.600'
+	| 'space.800'
+	| 'space.1000';
 
 type InlineProps<T extends ElementType = 'div'> = {
-  /**
-   * The DOM element to render as the Inline. Defaults to `div`.
-   */
-  as?: 'div' | 'span' | 'ul' | 'ol';
-  /**
-   * Used to align children along the main axis.
-   */
-  alignBlock?: AlignBlock;
+	/**
+	 * The DOM element to render as the Inline. Defaults to `div`.
+	 */
+	as?: 'div' | 'span' | 'ul' | 'ol';
+	/**
+	 * Used to align children along the main axis.
+	 */
+	alignBlock?: AlignBlock;
 
-  /**
-   * Used to align children along the cross axis.
-   */
-  alignInline?: AlignInline;
+	/**
+	 * Used to align children along the cross axis.
+	 */
+	alignInline?: AlignInline;
 
-  /**
-   * Used to set whether children are forced onto one line or will wrap onto multiple lines.
-   */
-  shouldWrap?: boolean;
+	/**
+	 * Used to set whether children are forced onto one line or will wrap onto multiple lines.
+	 */
+	shouldWrap?: boolean;
 
-  /**
-   * Used to distribute the children along the main axis.
-   */
-  spread?: Spread;
+	/**
+	 * Used to distribute the children along the main axis.
+	 */
+	spread?: Spread;
 
-  /**
-   * Used to set whether the container should grow to fill the available space.
-   */
-  grow?: Grow;
+	/**
+	 * Used to set whether the container should grow to fill the available space.
+	 */
+	grow?: Grow;
 
-  /**
-   * Represents the space between each child.
-   */
-  space?: Space;
+	/**
+	 * Represents the space between each child.
+	 */
+	space?: Space;
 
-  /**
-   * Represents the space between rows when content wraps.
-   * Used to override the `space` value in between rows.
-   */
-  rowSpace?: Space;
+	/**
+	 * Represents the space between rows when content wraps.
+	 * Used to override the `space` value in between rows.
+	 */
+	rowSpace?: Space;
 
-  /**
-   * Renders a separator string between each child.
-   */
-  separator?: string;
+	/**
+	 * Renders a separator string between each child.
+	 */
+	separator?: string;
 
-  /**
-   * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
-   */
-  testId?: string;
+	/**
+	 * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+	 */
+	testId?: string;
 
-  /**
-   * Elements to be rendered inside the Inline.
-   */
-  children: ReactNode;
+	/**
+	 * Elements to be rendered inside the Inline.
+	 */
+	children: ReactNode;
 
-  /**
-   * Forwarded ref element
-   */
-  ref?: React.ComponentPropsWithRef<T>['ref'];
+	/**
+	 * Forwarded ref element
+	 */
+	ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
 export default function Inline(_: InlineProps) {}

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

@@ -3,119 +3,113 @@ import type React from 'react';
 
 import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
 
-import {
-  type BasePrimitiveProps,
-  type StyleProp,
-} from '../src/components/types';
+import { type BasePrimitiveProps, type StyleProp } from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
 namespace Token {
-  // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
-  export type BackgroundColor = 'BackgroundColor';
+	// BoxProps['backgroundColor'] uses keyof, which ERT does not understand
+	export type BackgroundColor = 'BackgroundColor';
 }
 
 type Space =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800'
-  | 'space.1000';
+	| 'space.0'
+	| 'space.025'
+	| 'space.050'
+	| 'space.075'
+	| 'space.100'
+	| 'space.150'
+	| 'space.200'
+	| 'space.250'
+	| 'space.300'
+	| 'space.400'
+	| 'space.500'
+	| 'space.600'
+	| 'space.800'
+	| 'space.1000';
 
 export default function Pressable(
-  _: {
-    /**
-     * Controls whether the button is disabled.
-     */
-    isDisabled?: boolean;
-
-    /**
-     * The `type` attribute of the Button HTML element. Defaults to `button`.
-     */
-    type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
-
-    /**
-     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
-     */
-    padding?: Space;
-
-    /**
-     * Tokens representing CSS shorthand `paddingBlock`.
-     */
-    paddingBlock?: Space;
-
-    /**
-     * Tokens representing CSS `paddingBlockStart`.
-     */
-    paddingBlockStart?: Space;
-
-    /**
-     * Tokens representing CSS `paddingBlockEnd`.
-     */
-    paddingBlockEnd?: Space;
-
-    /**
-     * Tokens representing CSS shorthand `paddingInline`.
-     */
-    paddingInline?: Space;
-
-    /**
-     * Tokens representing CSS `paddingInlineStart`.
-     */
-    paddingInlineStart?: Space;
-
-    /**
-     * Tokens representing CSS `paddingInlineEnd`.
-     */
-    paddingInlineEnd?: Space;
-
-    /**
-     * A token alias for background color. See [https://atlassian.design/components/tokens/all-tokens#color-background](background tokens) for a list of options.
-     * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
-     * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Pressable styles.
-     */
-    backgroundColor?: Token.BackgroundColor;
-
-    /**
-     * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
-     */
-    onClick?: (
-      e: React.MouseEvent<HTMLButtonElement>,
-      analyticsEvent: UIAnalyticsEvent,
-    ) => void;
-
-    /**
-     * An optional component name used to identify this component to Atlaskit analytics press listeners. This can be altered if a parent component's name is preferred rather than the default 'Pressable'. See [the code example](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) for more information.
-     */
-    componentName?: string;
-
-    /**
-     * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable. See [the code example](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) for more information.
-     */
-    analyticsContext?: Record<string, any>;
-
-    /**
-     * An optional name used to identify the pressable to interaction content listeners. By default, pressable fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the code example](https://atlassian.design/components/primitives/pressable/examples#react-ufo-press-interactions) for more information.
-     */
-    interactionName?: string;
-
-    /**
-     * Elements to be rendered inside the primitive.
-     */
-    children: React.ReactNode;
-
-    /**
-     * Forwarded ref element.
-     */
-    ref?: React.ComponentPropsWithRef<'button'>['ref'];
-  } & BasePrimitiveProps &
-    StyleProp,
+	_: {
+		/**
+		 * Controls whether the button is disabled.
+		 */
+		isDisabled?: boolean;
+
+		/**
+		 * The `type` attribute of the Button HTML element. Defaults to `button`.
+		 */
+		type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+
+		/**
+		 * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+		 */
+		padding?: Space;
+
+		/**
+		 * Tokens representing CSS shorthand `paddingBlock`.
+		 */
+		paddingBlock?: Space;
+
+		/**
+		 * Tokens representing CSS `paddingBlockStart`.
+		 */
+		paddingBlockStart?: Space;
+
+		/**
+		 * Tokens representing CSS `paddingBlockEnd`.
+		 */
+		paddingBlockEnd?: Space;
+
+		/**
+		 * Tokens representing CSS shorthand `paddingInline`.
+		 */
+		paddingInline?: Space;
+
+		/**
+		 * Tokens representing CSS `paddingInlineStart`.
+		 */
+		paddingInlineStart?: Space;
+
+		/**
+		 * Tokens representing CSS `paddingInlineEnd`.
+		 */
+		paddingInlineEnd?: Space;
+
+		/**
+		 * A token alias for background color. See [https://atlassian.design/components/tokens/all-tokens#color-background](background tokens) for a list of options.
+		 * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
+		 * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Pressable styles.
+		 */
+		backgroundColor?: Token.BackgroundColor;
+
+		/**
+		 * Handler called on click. You can use the second argument to fire Atlaskit analytics events on custom channels. They could then be routed to GASv3 analytics. See the code examples for information on [firing Atlaskit analytics events](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) or [routing these to GASv3 analytics](https://atlassian.design/components/primitives/pressable/examples#gasv3-analytics).
+		 */
+		onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
+
+		/**
+		 * An optional component name used to identify this component to Atlaskit analytics press listeners. This can be altered if a parent component's name is preferred rather than the default 'Pressable'. See [the code example](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) for more information.
+		 */
+		componentName?: string;
+
+		/**
+		 * Additional information to be included in the `context` of Atlaskit analytics events that come from pressable. See [the code example](https://atlassian.design/components/primitives/pressable/examples#atlaskit-analytics) for more information.
+		 */
+		analyticsContext?: Record<string, any>;
+
+		/**
+		 * An optional name used to identify the pressable to interaction content listeners. By default, pressable fires React UFO (Unified Frontend Observability) press interactions for available listeners. This helps Atlassian measure performance and reliability. See [the code example](https://atlassian.design/components/primitives/pressable/examples#react-ufo-press-interactions) for more information.
+		 */
+		interactionName?: string;
+
+		/**
+		 * Elements to be rendered inside the primitive.
+		 */
+		children: React.ReactNode;
+
+		/**
+		 * Forwarded ref element.
+		 */
+		ref?: React.ComponentPropsWithRef<'button'>['ref'];
+	} & BasePrimitiveProps &
+		StyleProp,
 ) {}

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

@@ -3,46 +3,46 @@ import { type ReactNode } from 'react';
 import { type Breakpoint } from '../src/responsive/types';
 
 type As =
-  | 'article'
-  | 'aside'
-  | 'dialog'
-  | 'div'
-  | 'footer'
-  | 'header'
-  | 'li'
-  | 'main'
-  | 'nav'
-  | 'ol'
-  | 'section'
-  | 'span'
-  | 'ul';
+	| 'article'
+	| 'aside'
+	| 'dialog'
+	| 'div'
+	| 'footer'
+	| 'header'
+	| 'li'
+	| 'main'
+	| 'nav'
+	| 'ol'
+	| 'section'
+	| 'span'
+	| 'ul';
 
 type ResponsiveShowProps = {
-  /**
-   * The DOM element to render as the Box. Defaults to `div`.
-   */
-  as?: As;
+	/**
+	 * The DOM element to render as the Box. Defaults to `div`.
+	 */
+	as?: As;
 
-  /**
-   * Elements to be rendered inside the primitive.
-   */
-  children: ReactNode;
+	/**
+	 * Elements to be rendered inside the primitive.
+	 */
+	children: ReactNode;
 
-  /**
-   * Apply CSS to show this specifically **above** this breakpoint.
-   * The smallest breakpoint is not included as it would always be shown and this would not be performant.
-   *
-   * @important do not mix `above` and `below` (TypeScript should prevent this)
-   */
-  above?: Exclude<Breakpoint, 'xxs'>;
+	/**
+	 * Apply CSS to show this specifically **above** this breakpoint.
+	 * The smallest breakpoint is not included as it would always be shown and this would not be performant.
+	 *
+	 * @important do not mix `above` and `below` (TypeScript should prevent this)
+	 */
+	above?: Exclude<Breakpoint, 'xxs'>;
 
-  /**
-   * Apply CSS to show this specifically **below** this breakpoint.
-   * The smallest breakpoint is not included as it would never be shown and this would not be performant.
-   *
-   * @important do not mix `above` and `below` (TypeScript should prevent this)
-   */
-  below?: Exclude<Breakpoint, 'xxs'>;
+	/**
+	 * Apply CSS to show this specifically **below** this breakpoint.
+	 * The smallest breakpoint is not included as it would never be shown and this would not be performant.
+	 *
+	 * @important do not mix `above` and `below` (TypeScript should prevent this)
+	 */
+	below?: Exclude<Breakpoint, 'xxs'>;
 };
 
 export default function Show(_: ResponsiveShowProps) {}

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

@@ -1,73 +1,73 @@
 import { type ElementType, type ReactNode } from 'react';
 
 import type {
-  AlignBlock,
-  AlignInline,
-  BasePrimitiveProps,
-  Grow,
-  Spread,
+	AlignBlock,
+	AlignInline,
+	BasePrimitiveProps,
+	Grow,
+	Spread,
 } from '../src/components/types';
 
 type Space =
-  | 'space.0'
-  | 'space.025'
-  | 'space.050'
-  | 'space.075'
-  | 'space.100'
-  | 'space.150'
-  | 'space.200'
-  | 'space.250'
-  | 'space.300'
-  | 'space.400'
-  | 'space.500'
-  | 'space.600'
-  | 'space.800'
-  | 'space.1000';
+	| 'space.0'
+	| 'space.025'
+	| 'space.050'
+	| 'space.075'
+	| 'space.100'
+	| 'space.150'
+	| 'space.200'
+	| 'space.250'
+	| 'space.300'
+	| 'space.400'
+	| 'space.500'
+	| 'space.600'
+	| 'space.800'
+	| 'space.1000';
 
 type StackProps<T extends ElementType = 'div'> = {
-  /**
-   * The DOM element to render as the Stack. Defaults to `div`.
-   */
-  as?: 'div' | 'span' | 'ul' | 'ol';
-  /**
-   * Used to align children along the main axis.
-   */
-  alignBlock?: Exclude<AlignBlock, 'baseline'>;
+	/**
+	 * The DOM element to render as the Stack. Defaults to `div`.
+	 */
+	as?: 'div' | 'span' | 'ul' | 'ol';
+	/**
+	 * Used to align children along the main axis.
+	 */
+	alignBlock?: Exclude<AlignBlock, 'baseline'>;
 
-  /**
-   * Used to align children along the cross axis.
-   */
-  alignInline?: AlignInline;
+	/**
+	 * Used to align children along the cross axis.
+	 */
+	alignInline?: AlignInline;
 
-  /**
-   * Used to distribute the children along the main axis.
-   */
-  spread?: Spread;
+	/**
+	 * Used to distribute the children along the main axis.
+	 */
+	spread?: Spread;
 
-  /**
-   * Used to set whether the container should grow to fill the available space.
-   */
-  grow?: Grow;
+	/**
+	 * Used to set whether the container should grow to fill the available space.
+	 */
+	grow?: Grow;
 
-  /**
-   * Represents the space between each child.
-   */
-  space?: Space;
+	/**
+	 * Represents the space between each child.
+	 */
+	space?: Space;
 
-  /**
-   * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
-   */
-  testId?: string;
+	/**
+	 * A unique string that appears as data attribute data-testid in the rendered code, serving as a hook for automated tests.
+	 */
+	testId?: string;
 
-  /**
-   * Elements to be rendered inside the Stack.
-   */
-  children: ReactNode;
+	/**
+	 * Elements to be rendered inside the Stack.
+	 */
+	children: ReactNode;
 
-  /**
-   * Forwarded ref element
-   */
-  ref?: React.ComponentPropsWithRef<T>['ref'];
+	/**
+	 * Forwarded ref element
+	 */
+	ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
 export default function Stack(_: StackProps) {}

package/package.json

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