@atlaskit/primitives 11.0.2 → 11.1.0

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

@@ -1,89 +0,0 @@
-// 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';
-
-// eslint-disable-next-line @typescript-eslint/no-namespace
-namespace Token {
-	// 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';
-
-export default function Box(
-	_: {
-		/**
-		 * 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 `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:<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;
-
-		/**
-		 * Forwarded ref element.
-		 */
-		ref?: ComponentPropsWithRef<ElementType>['ref'];
-	} & BasePrimitiveProps &
-		StyleProp,
-) {}

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

@@ -1,80 +0,0 @@
-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';
-
-type FlexProps<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;
-
-	/**
-	 * 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 Flex(_: FlexProps) {}

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

@@ -1,102 +0,0 @@
-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';
-
-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'];
-} & BasePrimitiveProps;
-
-export default function Grid(_: GridProps) {}

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

@@ -1,48 +0,0 @@
-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';
-
-type ResponsiveHideProps = {
-	/**
-	 * The DOM element to render as the Box. Defaults to `div`.
-	 */
-	as?: As;
-
-	/**
-	 * 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 **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) {}

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

@@ -1,89 +0,0 @@
-import { type ElementType, type ReactNode } from 'react';
-
-import type {
-	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';
-
-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;
-
-	/**
-	 * 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 distribute the children along the main axis.
-	 */
-	spread?: Spread;
-
-	/**
-	 * 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 rows when content wraps.
-	 * Used to override the `space` value in between rows.
-	 */
-	rowSpace?: Space;
-
-	/**
-	 * 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;
-
-	/**
-	 * Elements to be rendered inside the Inline.
-	 */
-	children: ReactNode;
-
-	/**
-	 * Forwarded ref element
-	 */
-	ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
-
-export default function Inline(_: InlineProps) {}

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

@@ -1,115 +0,0 @@
-// 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 React from 'react';
-
-import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
-
-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';
-}
-
-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';
-
-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,
-) {}

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

@@ -1,48 +0,0 @@
-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';
-
-type ResponsiveShowProps = {
-	/**
-	 * The DOM element to render as the Box. Defaults to `div`.
-	 */
-	as?: As;
-
-	/**
-	 * 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 **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 +0,0 @@
-import { type ElementType, type ReactNode } from 'react';
-
-import type {
-	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';
-
-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'>;
-
-	/**
-	 * Used to align children along the cross axis.
-	 */
-	alignInline?: AlignInline;
-
-	/**
-	 * 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;
-
-	/**
-	 * 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;
-
-	/**
-	 * Elements to be rendered inside the Stack.
-	 */
-	children: ReactNode;
-
-	/**
-	 * Forwarded ref element
-	 */
-	ref?: React.ComponentPropsWithRef<T>['ref'];
-} & BasePrimitiveProps;
-
-export default function Stack(_: StackProps) {}