@atlaskit/primitives 7.0.0 → 7.0.2

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

@@ -2,33 +2,28 @@ import { type ReactNode } from 'react';
 
 import { type BasePrimitiveProps } from '../src/components/types';
 
-type Space =
-  | 'space.025'
-  | 'space.050'
-  | 'space.100'
-  | 'space.150'
-  | 'space.200';
+type Space = 'space.025' | 'space.050' | 'space.100' | 'space.150' | 'space.200';
 
 type BleedProps = {
-  /**
-   * Elements to be rendered inside the Flex.
-   */
-  children: ReactNode;
+	/**
+	 * Elements to be rendered inside the Flex.
+	 */
+	children: ReactNode;
 
-  /**
-   * Bleed along both axes.
-   */
-  all?: Space;
+	/**
+	 * Bleed along both axes.
+	 */
+	all?: Space;
 
-  /**
-   * Bleed along the inline axis.
-   */
-  inline?: Space;
+	/**
+	 * Bleed along the inline axis.
+	 */
+	inline?: Space;
 
-  /**
-   * Bleed along the block axis.
-   */
-  block?: Space;
+	/**
+	 * Bleed along the block axis.
+	 */
+	block?: Space;
 } & BasePrimitiveProps;
 
 export default function Bleed(_: BleedProps) {}

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

@@ -1,92 +1,89 @@
 // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
 import type { ComponentPropsWithRef, ElementType, ReactNode } from 'react';
 
-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 Box(
-  _: {
-    /**
-     * The DOM element to render as the Box. Defaults to `div`.
-     */
-    as?: ElementType;
+	_: {
+		/**
+		 * The DOM element to render as the Box. Defaults to `div`.
+		 */
+		as?: ElementType;
 
-    /**
-     * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
-     */
-    padding?: Space;
+		/**
+		 * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
+		 */
+		padding?: Space;
 
-    /**
-     * Tokens representing CSS shorthand `paddingBlock`.
-     */
-    paddingBlock?: Space;
+		/**
+		 * Tokens representing CSS shorthand `paddingBlock`.
+		 */
+		paddingBlock?: Space;
 
-    /**
-     * Tokens representing CSS `paddingBlockStart`.
-     */
-    paddingBlockStart?: Space;
+		/**
+		 * Tokens representing CSS `paddingBlockStart`.
+		 */
+		paddingBlockStart?: Space;
 
-    /**
-     * Tokens representing CSS `paddingBlockEnd`.
-     */
-    paddingBlockEnd?: Space;
+		/**
+		 * Tokens representing CSS `paddingBlockEnd`.
+		 */
+		paddingBlockEnd?: Space;
 
-    /**
-     * Tokens representing CSS shorthand `paddingInline`.
-     */
-    paddingInline?: Space;
+		/**
+		 * Tokens representing CSS shorthand `paddingInline`.
+		 */
+		paddingInline?: Space;
 
-    /**
-     * Tokens representing CSS `paddingInlineStart`.
-     */
-    paddingInlineStart?: Space;
+		/**
+		 * Tokens representing CSS `paddingInlineStart`.
+		 */
+		paddingInlineStart?: Space;
 
-    /**
-     * Tokens representing CSS `paddingInlineEnd`.
-     */
-    paddingInlineEnd?: Space;
+		/**
+		 * Tokens representing CSS `paddingInlineEnd`.
+		 */
+		paddingInlineEnd?: Space;
 
-    /**
-     * A token alias for background color. See:<br>
-     * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
-     * 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 Box styles.
-     */
-    backgroundColor?: Token.BackgroundColor;
+		/**
+		 * A token alias for background color. See:<br>
+		 * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
+		 * 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 Box styles.
+		 */
+		backgroundColor?: Token.BackgroundColor;
 
-    /**
-     * Elements to be rendered inside the primitive.
-     */
-    children?: ReactNode;
+		/**
+		 * Elements to be rendered inside the primitive.
+		 */
+		children?: ReactNode;
 
-    /**
-     * Forwarded ref element.
-     */
-    ref?: ComponentPropsWithRef<ElementType>['ref'];
-  } & BasePrimitiveProps &
-    StyleProp,
+		/**
+		 * Forwarded ref element.
+		 */
+		ref?: ComponentPropsWithRef<ElementType>['ref'];
+	} & BasePrimitiveProps &
+		StyleProp,
 ) {}

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

@@ -3,78 +3,78 @@ import { type ElementType, type ReactNode } from 'react';
 import { type BasePrimitiveProps } 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 FlexProps<T extends ElementType = 'div'> = {
-  /**
-   * The DOM element to render as the Flex. Defaults to `div`.
-   */
-  as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
+	/**
+	 * The DOM element to render as the Flex. Defaults to `div`.
+	 */
+	as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
 
-  /**
-   * Used to align children along the main axis.
-   */
-  justifyContent?:
-    | 'start'
-    | 'center'
-    | 'end'
-    | 'space-between'
-    | 'space-around'
-    | 'space-evenly'
-    | 'stretch';
+	/**
+	 * Used to align children along the main axis.
+	 */
+	justifyContent?:
+		| 'start'
+		| 'center'
+		| 'end'
+		| 'space-between'
+		| 'space-around'
+		| 'space-evenly'
+		| 'stretch';
 
-  /**
-   * Used to align children along the cross axis.
-   */
-  alignItems?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+	/**
+	 * Used to align children along the cross axis.
+	 */
+	alignItems?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
 
-  /**
-   * Represents the space between each child.
-   */
-  columnGap?: Space;
+	/**
+	 * Represents the space between each child.
+	 */
+	columnGap?: Space;
 
-  /**
-   * Represents the space between each child.
-   */
-  gap?: Space;
+	/**
+	 * Represents the space between each child.
+	 */
+	gap?: Space;
 
-  /**
-   * Represents the space between each child.
-   */
-  rowGap?: Space;
+	/**
+	 * Represents the space between each child.
+	 */
+	rowGap?: Space;
 
-  /**
-   * Represents the flex direction property of CSS flexbox.
-   */
-  direction?: 'row' | 'column';
+	/**
+	 * Represents the flex direction property of CSS flexbox.
+	 */
+	direction?: 'row' | 'column';
 
-  /**
-   * Represents the flex wrap property of CSS flexbox.
-   */
-  wrap?: 'wrap' | 'nowrap';
+	/**
+	 * Represents the flex wrap property of CSS flexbox.
+	 */
+	wrap?: 'wrap' | 'nowrap';
 
-  /**
-   * Elements to be rendered inside the Flex.
-   */
-  children: ReactNode;
+	/**
+	 * Elements to be rendered inside the Flex.
+	 */
+	children: ReactNode;
 
-  /**
-   * Forwarded ref element
-   */
-  ref?: React.ComponentPropsWithRef<T>['ref'];
+	/**
+	 * Forwarded ref element
+	 */
+	ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
 export default function Flex(_: FlexProps) {}

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

@@ -3,100 +3,100 @@ import { type ElementType, type ReactNode } from 'react';
 import { type BasePrimitiveProps } 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 GridProps<T extends ElementType = 'div'> = {
-  /**
-   * The DOM element to render as the Flex. Defaults to `div`.
-   */
-  as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
-
-  /**
-   * Used to align children along the main axis.
-   */
-  justifyContent?:
-    | 'start'
-    | 'center'
-    | 'end'
-    | 'space-between'
-    | 'space-around'
-    | 'space-evenly'
-    | 'stretch';
-
-  /**
-   * Used to align children along the cross axis.
-   */
-  alignItems?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
-
-  /**
-   * Represents the space between each child.
-   */
-  columnGap?: Space;
-
-  /**
-   * Represents the space between each child.
-   */
-  gap?: Space;
-
-  /**
-   * Represents the space between each child.
-   */
-  rowGap?: Space;
-
-  /**
-   * Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
-   */
-  autoFlow?: string;
-
-  /**
-   * CSS `grid-template-rows`.
-   */
-  templateRows?: string;
-
-  /**
-   * CSS `grid-template-columns`.
-   */
-  templateColumns?: string;
-
-  /**
-   * CSS `grid-template-areas`.
-   *
-   * Each item in the passed array is a grid row.
-   */
-  templateAreas?: string[];
-
-  /**
-   * Represents the flex direction property of CSS flexbox.
-   */
-  direction?: 'row' | 'column';
-
-  /**
-   * Represents the flex wrap property of CSS flexbox.
-   */
-  wrap?: 'wrap' | 'nowrap';
-
-  /**
-   * Elements to be rendered inside the Flex.
-   */
-  children: ReactNode;
-
-  /**
-   * Forwarded ref element
-   */
-  ref?: React.ComponentPropsWithRef<T>['ref'];
+	/**
+	 * The DOM element to render as the Flex. Defaults to `div`.
+	 */
+	as?: 'div' | 'span' | 'ul' | 'ol' | 'li';
+
+	/**
+	 * Used to align children along the main axis.
+	 */
+	justifyContent?:
+		| 'start'
+		| 'center'
+		| 'end'
+		| 'space-between'
+		| 'space-around'
+		| 'space-evenly'
+		| 'stretch';
+
+	/**
+	 * Used to align children along the cross axis.
+	 */
+	alignItems?: 'start' | 'center' | 'end' | 'baseline' | 'stretch';
+
+	/**
+	 * Represents the space between each child.
+	 */
+	columnGap?: Space;
+
+	/**
+	 * Represents the space between each child.
+	 */
+	gap?: Space;
+
+	/**
+	 * Represents the space between each child.
+	 */
+	rowGap?: Space;
+
+	/**
+	 * Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
+	 */
+	autoFlow?: string;
+
+	/**
+	 * CSS `grid-template-rows`.
+	 */
+	templateRows?: string;
+
+	/**
+	 * CSS `grid-template-columns`.
+	 */
+	templateColumns?: string;
+
+	/**
+	 * CSS `grid-template-areas`.
+	 *
+	 * Each item in the passed array is a grid row.
+	 */
+	templateAreas?: string[];
+
+	/**
+	 * Represents the flex direction property of CSS flexbox.
+	 */
+	direction?: 'row' | 'column';
+
+	/**
+	 * Represents the flex wrap property of CSS flexbox.
+	 */
+	wrap?: 'wrap' | 'nowrap';
+
+	/**
+	 * Elements to be rendered inside the Flex.
+	 */
+	children: ReactNode;
+
+	/**
+	 * Forwarded ref element
+	 */
+	ref?: React.ComponentPropsWithRef<T>['ref'];
 } & BasePrimitiveProps;
 
 export default function Grid(_: GridProps) {}

package/extract-react-types/hide-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 ResponsiveHideProps = {
-  /**
-   * 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 hide 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 hide 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 hide 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 hide 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 Hide(_: ResponsiveHideProps) {}