@atlaskit/primitives 19.0.2 → 20.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +26 -0
- package/anchor/package.json +1 -8
- package/bleed/package.json +1 -8
- package/box/package.json +1 -8
- package/compiled/anchor/package.json +1 -8
- package/compiled/bleed/package.json +1 -8
- package/compiled/box/package.json +1 -8
- package/compiled/components/types/package.json +1 -8
- package/compiled/flex/package.json +1 -8
- package/compiled/focusable/package.json +1 -8
- package/compiled/grid/package.json +1 -8
- package/compiled/hide/package.json +1 -8
- package/compiled/inline/package.json +1 -8
- package/compiled/media-helper/package.json +1 -8
- package/compiled/metric-text/package.json +1 -8
- package/compiled/package.json +1 -8
- package/compiled/pressable/package.json +1 -8
- package/compiled/show/package.json +1 -8
- package/compiled/stack/package.json +1 -8
- package/compiled/surface-provider/package.json +1 -8
- package/compiled/text/package.json +1 -8
- package/compiled/types/package.json +1 -8
- package/compiled/use-media-query/package.json +1 -8
- package/compiled/utils/types/package.json +1 -8
- package/components/flex/package.json +1 -8
- package/constants/package.json +1 -8
- package/constellation/pressable/examples.mdx +15 -9
- package/dist/cjs/compiled/components/anchor.js +1 -1
- package/dist/cjs/compiled/components/pressable.js +1 -1
- package/dist/cjs/components/anchor.js +1 -1
- package/dist/cjs/components/pressable.js +1 -1
- package/dist/cjs/xcss/style-maps.partial.js +18 -10
- package/dist/es2019/compiled/components/anchor.js +1 -1
- package/dist/es2019/compiled/components/pressable.js +1 -1
- package/dist/es2019/components/anchor.js +1 -1
- package/dist/es2019/components/pressable.js +1 -1
- package/dist/es2019/xcss/style-maps.partial.js +18 -10
- package/dist/esm/compiled/components/anchor.js +1 -1
- package/dist/esm/compiled/components/pressable.js +1 -1
- package/dist/esm/components/anchor.js +1 -1
- package/dist/esm/components/pressable.js +1 -1
- package/dist/esm/xcss/style-maps.partial.js +18 -10
- package/dist/types/compiled/components/types.d.ts +1 -1
- package/dist/types/utils/types.d.ts +1 -1
- package/dist/types/xcss/style-maps.partial.d.ts +16 -8
- package/flex/package.json +1 -8
- package/grid/package.json +1 -8
- package/inline/package.json +1 -8
- package/media-helper/package.json +1 -8
- package/metric-text/package.json +1 -8
- package/package.json +30 -38
- package/pressable/package.json +1 -8
- package/responsive/build-media-query-css/package.json +1 -8
- package/responsive/constants/package.json +1 -8
- package/responsive/hide/package.json +1 -8
- package/responsive/media-helper/package.json +1 -8
- package/responsive/package.json +1 -8
- package/responsive/show/package.json +1 -8
- package/responsive/types/package.json +1 -8
- package/responsive/use-media-query/package.json +1 -8
- package/scripts/color-codegen-template.tsx +2 -1
- package/stack/package.json +1 -8
- package/surface-provider/package.json +1 -8
- package/text/package.json +1 -8
- package/types/package.json +1 -8
- package/xcss/package.json +1 -8
- package/dist/types-ts4.5/compiled/components/anchor.d.ts +0 -63
- package/dist/types-ts4.5/compiled/components/bleed.d.ts +0 -34
- package/dist/types-ts4.5/compiled/components/box.d.ts +0 -109
- package/dist/types-ts4.5/compiled/components/flex.d.ts +0 -71
- package/dist/types-ts4.5/compiled/components/focusable.d.ts +0 -36
- package/dist/types-ts4.5/compiled/components/grid.d.ts +0 -80
- package/dist/types-ts4.5/compiled/components/inline.d.ts +0 -70
- package/dist/types-ts4.5/compiled/components/metric-text.d.ts +0 -49
- package/dist/types-ts4.5/compiled/components/pressable.d.ts +0 -49
- package/dist/types-ts4.5/compiled/components/stack.d.ts +0 -57
- package/dist/types-ts4.5/compiled/components/text.d.ts +0 -101
- package/dist/types-ts4.5/compiled/components/types.d.ts +0 -45
- package/dist/types-ts4.5/compiled/index.d.ts +0 -16
- package/dist/types-ts4.5/compiled/responsive/hide.d.ts +0 -39
- package/dist/types-ts4.5/compiled/responsive/index.d.ts +0 -5
- package/dist/types-ts4.5/compiled/responsive/media-helper.d.ts +0 -35
- package/dist/types-ts4.5/compiled/responsive/show.d.ts +0 -39
- package/dist/types-ts4.5/compiled/responsive/types.d.ts +0 -10
- package/dist/types-ts4.5/compiled/responsive/use-media-query.d.ts +0 -23
- package/dist/types-ts4.5/components/anchor.d.ts +0 -106
- package/dist/types-ts4.5/components/bleed.d.ts +0 -36
- package/dist/types-ts4.5/components/box.d.ts +0 -85
- package/dist/types-ts4.5/components/flex.d.ts +0 -105
- package/dist/types-ts4.5/components/grid.d.ts +0 -137
- package/dist/types-ts4.5/components/inline.d.ts +0 -74
- package/dist/types-ts4.5/components/metric-text.d.ts +0 -16
- package/dist/types-ts4.5/components/pressable.d.ts +0 -92
- package/dist/types-ts4.5/components/stack.d.ts +0 -61
- package/dist/types-ts4.5/components/text.d.ts +0 -75
- package/dist/types-ts4.5/components/types.d.ts +0 -33
- package/dist/types-ts4.5/constants.d.ts +0 -12
- package/dist/types-ts4.5/entry-points/anchor.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/bleed.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/box.d.ts +0 -3
- package/dist/types-ts4.5/entry-points/compiled-anchor.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-bleed.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-box.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-components-types.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/compiled-flex.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-focusable.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-grid.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-hide.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/compiled-inline.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-media-helper.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/compiled-metric-text.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-pressable.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-show.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/compiled-stack.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-surface-provider.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/compiled-text.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/compiled-types.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/compiled-use-media-query.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/compiled-utils-types.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/constants.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/flex.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/grid.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/inline.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/media-helper.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/metric-text.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/pressable.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/responsive-build-media-query-css.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/responsive-constants.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/responsive-hide.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/responsive-media-helper.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/responsive-show.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/responsive-types.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/responsive-use-media-query.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/stack.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/surface-provider.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/text.d.ts +0 -2
- package/dist/types-ts4.5/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.5/entry-points/xcss.d.ts +0 -2
- package/dist/types-ts4.5/index.d.ts +0 -27
- package/dist/types-ts4.5/responsive/build-media-query-css.d.ts +0 -2
- package/dist/types-ts4.5/responsive/constants.d.ts +0 -67
- package/dist/types-ts4.5/responsive/hide.d.ts +0 -41
- package/dist/types-ts4.5/responsive/index.d.ts +0 -7
- package/dist/types-ts4.5/responsive/media-helper.d.ts +0 -29
- package/dist/types-ts4.5/responsive/media.d.ts +0 -25
- package/dist/types-ts4.5/responsive/show.d.ts +0 -40
- package/dist/types-ts4.5/responsive/types.d.ts +0 -32
- package/dist/types-ts4.5/responsive/unsafe-build-above-media-query-css.d.ts +0 -33
- package/dist/types-ts4.5/responsive/unsafe-build-below-media-query-css.d.ts +0 -32
- package/dist/types-ts4.5/responsive/use-media-query.d.ts +0 -23
- package/dist/types-ts4.5/utils/has-text-ancestor-context.d.ts +0 -9
- package/dist/types-ts4.5/utils/surface-context.d.ts +0 -8
- package/dist/types-ts4.5/utils/surface-provider.d.ts +0 -10
- package/dist/types-ts4.5/utils/types.d.ts +0 -6
- package/dist/types-ts4.5/xcss/style-maps.partial.d.ts +0 -793
- package/dist/types-ts4.5/xcss/xcss.d.ts +0 -143
|
@@ -1,105 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ElementType, type ForwardRefExoticComponent, type MemoExoticComponent, type ReactNode, type RefAttributes } from 'react';
|
|
6
|
-
import { type SerializedStyles } from '@emotion/react';
|
|
7
|
-
import { type Space } from '../xcss/style-maps.partial';
|
|
8
|
-
import type { BasePrimitiveProps } from './types';
|
|
9
|
-
export type FlexProps<T extends ElementType = 'div'> = {
|
|
10
|
-
/**
|
|
11
|
-
* The DOM element to render as the Flex. Defaults to `div`.
|
|
12
|
-
*/
|
|
13
|
-
as?: 'div' | 'span' | 'ul' | 'ol' | 'li' | 'dl';
|
|
14
|
-
/**
|
|
15
|
-
* Used to align children along the main axis.
|
|
16
|
-
*/
|
|
17
|
-
justifyContent?: JustifyContent;
|
|
18
|
-
/**
|
|
19
|
-
* Used to align children along the cross axis.
|
|
20
|
-
*/
|
|
21
|
-
alignItems?: AlignItems;
|
|
22
|
-
/**
|
|
23
|
-
* Represents the space between each child.
|
|
24
|
-
*/
|
|
25
|
-
columnGap?: Space;
|
|
26
|
-
/**
|
|
27
|
-
* Represents the space between each child.
|
|
28
|
-
*/
|
|
29
|
-
gap?: Space;
|
|
30
|
-
/**
|
|
31
|
-
* Represents the space between each child.
|
|
32
|
-
*/
|
|
33
|
-
rowGap?: Space;
|
|
34
|
-
/**
|
|
35
|
-
* Represents the flex direction property of CSS flexbox.
|
|
36
|
-
*/
|
|
37
|
-
direction?: Direction;
|
|
38
|
-
/**
|
|
39
|
-
* Represents the flex wrap property of CSS flexbox.
|
|
40
|
-
*/
|
|
41
|
-
wrap?: Wrap;
|
|
42
|
-
/**
|
|
43
|
-
* Elements to be rendered inside the Flex.
|
|
44
|
-
*/
|
|
45
|
-
children: ReactNode;
|
|
46
|
-
/**
|
|
47
|
-
* The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
|
|
48
|
-
*/
|
|
49
|
-
id?: string;
|
|
50
|
-
/**
|
|
51
|
-
* Forwarded ref element.
|
|
52
|
-
*/
|
|
53
|
-
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
54
|
-
} & BasePrimitiveProps;
|
|
55
|
-
type AlignItems = keyof typeof alignItemsMap;
|
|
56
|
-
type JustifyContent = keyof typeof justifyContentMap;
|
|
57
|
-
type Direction = keyof typeof flexDirectionMap;
|
|
58
|
-
type Wrap = keyof typeof flexWrapMap;
|
|
59
|
-
declare const justifyContentMap: {
|
|
60
|
-
readonly start: SerializedStyles;
|
|
61
|
-
readonly center: SerializedStyles;
|
|
62
|
-
readonly end: SerializedStyles;
|
|
63
|
-
readonly 'space-between': SerializedStyles;
|
|
64
|
-
readonly 'space-around': SerializedStyles;
|
|
65
|
-
readonly 'space-evenly': SerializedStyles;
|
|
66
|
-
readonly stretch: SerializedStyles;
|
|
67
|
-
};
|
|
68
|
-
declare const flexDirectionMap: {
|
|
69
|
-
readonly column: SerializedStyles;
|
|
70
|
-
readonly row: SerializedStyles;
|
|
71
|
-
};
|
|
72
|
-
declare const flexWrapMap: {
|
|
73
|
-
readonly wrap: SerializedStyles;
|
|
74
|
-
readonly nowrap: SerializedStyles;
|
|
75
|
-
};
|
|
76
|
-
declare const alignItemsMap: {
|
|
77
|
-
readonly start: SerializedStyles;
|
|
78
|
-
readonly center: SerializedStyles;
|
|
79
|
-
readonly baseline: SerializedStyles;
|
|
80
|
-
readonly end: SerializedStyles;
|
|
81
|
-
readonly stretch: SerializedStyles;
|
|
82
|
-
};
|
|
83
|
-
/**
|
|
84
|
-
* __Flex__
|
|
85
|
-
*
|
|
86
|
-
* `Flex` is a primitive component that implements the CSS Flexbox API.
|
|
87
|
-
*
|
|
88
|
-
* - [Examples](https://atlassian.design/components/primitives/flex/examples)
|
|
89
|
-
* - [Code](https://atlassian.design/components/primitives/flex/code)
|
|
90
|
-
*
|
|
91
|
-
* @example
|
|
92
|
-
* ```tsx
|
|
93
|
-
* // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
94
|
-
* import { Flex, Box } from '@atlaskit/primitives'
|
|
95
|
-
*
|
|
96
|
-
* const Component = () => (
|
|
97
|
-
* <Flex direction="column">
|
|
98
|
-
* <Box padding="space.100" backgroundColor="neutral"></Box>
|
|
99
|
-
* <Box padding="space.100" backgroundColor="neutral"></Box>
|
|
100
|
-
* </Flex>
|
|
101
|
-
* )
|
|
102
|
-
* ```
|
|
103
|
-
*/
|
|
104
|
-
declare const Flex: MemoExoticComponent<ForwardRefExoticComponent<Omit<FlexProps<ElementType>, 'ref'> & RefAttributes<any>>>;
|
|
105
|
-
export default Flex;
|
|
@@ -1,137 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ElementType, type ForwardRefExoticComponent, type MemoExoticComponent, type ReactNode, type RefAttributes } from 'react';
|
|
6
|
-
import { type SerializedStyles } from '@emotion/react';
|
|
7
|
-
import { type Space } from '../xcss/style-maps.partial';
|
|
8
|
-
import type { BasePrimitiveProps } from './types';
|
|
9
|
-
export type GridProps<T extends ElementType = 'div'> = {
|
|
10
|
-
/**
|
|
11
|
-
* The DOM element to render as the Grid. Defaults to `div`.
|
|
12
|
-
*/
|
|
13
|
-
as?: 'div' | 'span' | 'ul' | 'ol';
|
|
14
|
-
/**
|
|
15
|
-
* Used to align children along the inline axis.
|
|
16
|
-
*/
|
|
17
|
-
justifyContent?: JustifyContent;
|
|
18
|
-
/**
|
|
19
|
-
* Used to align the grid along the inline axis.
|
|
20
|
-
*/
|
|
21
|
-
justifyItems?: JustifyItems;
|
|
22
|
-
/**
|
|
23
|
-
* Used to align children along the block axis.
|
|
24
|
-
*/
|
|
25
|
-
alignItems?: AlignItems;
|
|
26
|
-
/**
|
|
27
|
-
* Used to align the grid along the block axis.
|
|
28
|
-
*/
|
|
29
|
-
alignContent?: AlignContent;
|
|
30
|
-
/**
|
|
31
|
-
* Represents the space between each column.
|
|
32
|
-
*/
|
|
33
|
-
columnGap?: Space;
|
|
34
|
-
/**
|
|
35
|
-
* Represents the space between each child across both axes.
|
|
36
|
-
*/
|
|
37
|
-
gap?: Space;
|
|
38
|
-
/**
|
|
39
|
-
* Represents the space between each row.
|
|
40
|
-
*/
|
|
41
|
-
rowGap?: Space;
|
|
42
|
-
/**
|
|
43
|
-
* Specifies how auto-placed items get flowed into the grid. CSS `grid-auto-flow`.
|
|
44
|
-
*/
|
|
45
|
-
autoFlow?: AutoFlow;
|
|
46
|
-
/**
|
|
47
|
-
* CSS `grid-template-rows`.
|
|
48
|
-
*/
|
|
49
|
-
templateRows?: string;
|
|
50
|
-
/**
|
|
51
|
-
* CSS `grid-template-columns`.
|
|
52
|
-
*/
|
|
53
|
-
templateColumns?: string;
|
|
54
|
-
/**
|
|
55
|
-
* CSS `grid-template-areas`.
|
|
56
|
-
*
|
|
57
|
-
* Each item in the passed array is a grid row.
|
|
58
|
-
*/
|
|
59
|
-
templateAreas?: string[];
|
|
60
|
-
/**
|
|
61
|
-
* Elements to be rendered inside the grid. Required as a grid without children should not be a grid.
|
|
62
|
-
*/
|
|
63
|
-
children: ReactNode;
|
|
64
|
-
/**
|
|
65
|
-
* HTML id attrubute.
|
|
66
|
-
*/
|
|
67
|
-
id?: string;
|
|
68
|
-
/**
|
|
69
|
-
* Forwarded ref element.
|
|
70
|
-
*/
|
|
71
|
-
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
72
|
-
} & BasePrimitiveProps;
|
|
73
|
-
type JustifyContent = keyof typeof justifyContentMap;
|
|
74
|
-
type JustifyItems = keyof typeof justifyItemsMap;
|
|
75
|
-
type AlignItems = keyof typeof alignItemsMap;
|
|
76
|
-
type AlignContent = keyof typeof alignContentMap;
|
|
77
|
-
declare const justifyContentMap: {
|
|
78
|
-
readonly start: SerializedStyles;
|
|
79
|
-
readonly center: SerializedStyles;
|
|
80
|
-
readonly end: SerializedStyles;
|
|
81
|
-
readonly 'space-between': SerializedStyles;
|
|
82
|
-
readonly 'space-around': SerializedStyles;
|
|
83
|
-
readonly 'space-evenly': SerializedStyles;
|
|
84
|
-
readonly stretch: SerializedStyles;
|
|
85
|
-
};
|
|
86
|
-
declare const justifyItemsMap: {
|
|
87
|
-
readonly start: SerializedStyles;
|
|
88
|
-
readonly center: SerializedStyles;
|
|
89
|
-
readonly end: SerializedStyles;
|
|
90
|
-
readonly stretch: SerializedStyles;
|
|
91
|
-
};
|
|
92
|
-
declare const alignContentMap: {
|
|
93
|
-
readonly start: SerializedStyles;
|
|
94
|
-
readonly center: SerializedStyles;
|
|
95
|
-
readonly end: SerializedStyles;
|
|
96
|
-
readonly 'space-between': SerializedStyles;
|
|
97
|
-
readonly 'space-around': SerializedStyles;
|
|
98
|
-
readonly 'space-evenly': SerializedStyles;
|
|
99
|
-
readonly stretch: SerializedStyles;
|
|
100
|
-
};
|
|
101
|
-
declare const alignItemsMap: {
|
|
102
|
-
readonly start: SerializedStyles;
|
|
103
|
-
readonly center: SerializedStyles;
|
|
104
|
-
readonly baseline: SerializedStyles;
|
|
105
|
-
readonly end: SerializedStyles;
|
|
106
|
-
};
|
|
107
|
-
type AutoFlow = keyof typeof gridAutoFlowMap;
|
|
108
|
-
declare const gridAutoFlowMap: {
|
|
109
|
-
readonly row: SerializedStyles;
|
|
110
|
-
readonly column: SerializedStyles;
|
|
111
|
-
readonly dense: SerializedStyles;
|
|
112
|
-
readonly 'row dense': SerializedStyles;
|
|
113
|
-
readonly 'column dense': SerializedStyles;
|
|
114
|
-
};
|
|
115
|
-
/**
|
|
116
|
-
* __Grid__
|
|
117
|
-
*
|
|
118
|
-
* `Grid` is a primitive component that implements the CSS Grid API.
|
|
119
|
-
*
|
|
120
|
-
* - [Examples](https://atlassian.design/components/primitives/grid/examples)
|
|
121
|
-
* - [Code](https://atlassian.design/components/primitives/grid/code)
|
|
122
|
-
*
|
|
123
|
-
* @example
|
|
124
|
-
* ```tsx
|
|
125
|
-
* // eslint-disable-next-line @atlaskit/design-system/no-emotion-primitives -- to be migrated to @atlaskit/primitives/compiled – go/akcss
|
|
126
|
-
* import { Grid, Box } from '@atlaskit/primitives'
|
|
127
|
-
*
|
|
128
|
-
* const Component = () => (
|
|
129
|
-
* <Grid gap="space.100" gridColumns="1fr 1fr">
|
|
130
|
-
* <Box padding="space.100" backgroundColor="neutral"></Box>
|
|
131
|
-
* <Box padding="space.100" backgroundColor="neutral"></Box>
|
|
132
|
-
* </Grid>
|
|
133
|
-
* )
|
|
134
|
-
* ```
|
|
135
|
-
*/
|
|
136
|
-
declare const Grid: MemoExoticComponent<ForwardRefExoticComponent<Omit<GridProps<ElementType>, 'ref'> & RefAttributes<any>>>;
|
|
137
|
-
export default Grid;
|
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import React, { type ElementType, type ReactNode } from 'react';
|
|
6
|
-
import { type Space } from '../xcss/style-maps.partial';
|
|
7
|
-
import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
|
|
8
|
-
export type InlineProps<T extends ElementType = 'div'> = {
|
|
9
|
-
/**
|
|
10
|
-
* The DOM element to render as the Inline. Defaults to `div`.
|
|
11
|
-
*/
|
|
12
|
-
as?: 'div' | 'span' | 'ul' | 'ol' | 'li' | 'dl';
|
|
13
|
-
/**
|
|
14
|
-
* Used to align children along the block axis (typically vertical).
|
|
15
|
-
*/
|
|
16
|
-
alignBlock?: AlignBlock;
|
|
17
|
-
/**
|
|
18
|
-
* Used to align children along the inline axis (typically horizontal).
|
|
19
|
-
*/
|
|
20
|
-
alignInline?: AlignInline;
|
|
21
|
-
/**
|
|
22
|
-
* Used to set whether children are forced onto one line or will wrap onto multiple lines.
|
|
23
|
-
*/
|
|
24
|
-
shouldWrap?: boolean;
|
|
25
|
-
/**
|
|
26
|
-
* Used to distribute the children along the main axis.
|
|
27
|
-
*/
|
|
28
|
-
spread?: Spread;
|
|
29
|
-
/**
|
|
30
|
-
* Used to set whether the container should grow to fill the available space.
|
|
31
|
-
*/
|
|
32
|
-
grow?: Grow;
|
|
33
|
-
/**
|
|
34
|
-
* Represents the space between each child.
|
|
35
|
-
*/
|
|
36
|
-
space?: Space;
|
|
37
|
-
/**
|
|
38
|
-
* Represents the space between rows when content wraps.
|
|
39
|
-
* Used to override the `space` value in between rows.
|
|
40
|
-
*/
|
|
41
|
-
rowSpace?: Space;
|
|
42
|
-
/**
|
|
43
|
-
* Renders a separator string between each child. Avoid using `separator="•"` when `as="ul" | "ol" | "dl"` to preserve proper list semantics.
|
|
44
|
-
*/
|
|
45
|
-
separator?: React.ReactNode;
|
|
46
|
-
/**
|
|
47
|
-
* Elements to be rendered inside the Inline.
|
|
48
|
-
*/
|
|
49
|
-
children: ReactNode;
|
|
50
|
-
/**
|
|
51
|
-
* The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
|
|
52
|
-
*/
|
|
53
|
-
id?: string;
|
|
54
|
-
/**
|
|
55
|
-
* Forwarded ref element.
|
|
56
|
-
*/
|
|
57
|
-
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
58
|
-
} & BasePrimitiveProps;
|
|
59
|
-
/**
|
|
60
|
-
* __Inline__
|
|
61
|
-
*
|
|
62
|
-
* Inline is a primitive component based on CSS Flexbox that manages the horizontal layout of direct children.
|
|
63
|
-
*
|
|
64
|
-
* @example
|
|
65
|
-
* ```tsx
|
|
66
|
-
* <Inline>
|
|
67
|
-
* <Box padding="space.100" backgroundColor="neutral"></Box>
|
|
68
|
-
* <Box padding="space.100" backgroundColor="neutral"></Box>
|
|
69
|
-
* </Inline>
|
|
70
|
-
* ```
|
|
71
|
-
*
|
|
72
|
-
*/
|
|
73
|
-
declare const Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Omit<InlineProps<React.ElementType>, 'ref'> & React.RefAttributes<any>>>;
|
|
74
|
-
export default Inline;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* IMPORTANT: This is a temporary mapping to avoid breaking changes.
|
|
3
|
-
* We will remove this once we have migrated all the components to @atlaskit/primitives/compiled.
|
|
4
|
-
*/
|
|
5
|
-
/**
|
|
6
|
-
* __Metric text comp__
|
|
7
|
-
*
|
|
8
|
-
* A metric text comp {description}.
|
|
9
|
-
*
|
|
10
|
-
* - [Examples](https://atlassian.design/components/{packageName}/examples)
|
|
11
|
-
* - [Code](https://atlassian.design/components/{packageName}/code)
|
|
12
|
-
* - [Usage](https://atlassian.design/components/{packageName}/usage)
|
|
13
|
-
*/
|
|
14
|
-
import MetricText, { type MetricTextProps } from '../compiled/components/metric-text';
|
|
15
|
-
export type { MetricTextProps };
|
|
16
|
-
export default MetricText;
|
|
@@ -1,92 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
|
|
6
|
-
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
7
|
-
import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
|
|
8
|
-
import type { BasePrimitiveProps, StyleProp } from './types';
|
|
9
|
-
type BasePressableProps = {
|
|
10
|
-
/**
|
|
11
|
-
* Elements to be rendered inside the Pressable.
|
|
12
|
-
*/
|
|
13
|
-
children?: ReactNode;
|
|
14
|
-
/**
|
|
15
|
-
* Handler called on click. The second argument provides an Atlaskit UI analytics event that can be fired to a listening channel. See the ['analytics-next' package](https://atlaskit.atlassian.com/packages/analytics/analytics-next) documentation for more information.
|
|
16
|
-
*/
|
|
17
|
-
onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
18
|
-
/**
|
|
19
|
-
* Whether the button is disabled.
|
|
20
|
-
*/
|
|
21
|
-
isDisabled?: boolean;
|
|
22
|
-
/**
|
|
23
|
-
* An optional name used to identify events for [React UFO (Unified Frontend Observability) press interactions](https://developer.atlassian.com/platform/ufo/react-ufo/react-ufo/getting-started/#quick-start--press-interactions). For more information, see [React UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
|
|
24
|
-
*/
|
|
25
|
-
interactionName?: string;
|
|
26
|
-
/**
|
|
27
|
-
* An optional component name used to identify this component in Atlaskit analytics events. This can be used if a parent component's name is preferred over the default 'Pressable'.
|
|
28
|
-
*/
|
|
29
|
-
componentName?: string;
|
|
30
|
-
/**
|
|
31
|
-
* Additional information to be included in the `context` of Atlaskit analytics events that come from pressable.
|
|
32
|
-
*/
|
|
33
|
-
analyticsContext?: Record<string, any>;
|
|
34
|
-
/**
|
|
35
|
-
* Token representing background color with a built-in fallback value.
|
|
36
|
-
* @deprecated Please pass via `props.xcss`, eg. `xcss({ backgroundColor: '…' })` instead and include states such as hover values as well.
|
|
37
|
-
*/
|
|
38
|
-
backgroundColor?: BackgroundColor;
|
|
39
|
-
/**
|
|
40
|
-
* Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
|
|
41
|
-
*
|
|
42
|
-
* @see paddingBlock
|
|
43
|
-
* @see paddingInline
|
|
44
|
-
*/
|
|
45
|
-
padding?: Space;
|
|
46
|
-
/**
|
|
47
|
-
* Tokens representing CSS shorthand `paddingBlock`.
|
|
48
|
-
*
|
|
49
|
-
* @see paddingBlockStart
|
|
50
|
-
* @see paddingBlockEnd
|
|
51
|
-
*/
|
|
52
|
-
paddingBlock?: Space;
|
|
53
|
-
/**
|
|
54
|
-
* Tokens representing CSS `paddingBlockStart`.
|
|
55
|
-
*/
|
|
56
|
-
paddingBlockStart?: Space;
|
|
57
|
-
/**
|
|
58
|
-
* Tokens representing CSS `paddingBlockEnd`.
|
|
59
|
-
*/
|
|
60
|
-
paddingBlockEnd?: Space;
|
|
61
|
-
/**
|
|
62
|
-
* Tokens representing CSS shorthand `paddingInline`.
|
|
63
|
-
*
|
|
64
|
-
* @see paddingInlineStart
|
|
65
|
-
* @see paddingInlineEnd
|
|
66
|
-
*/
|
|
67
|
-
paddingInline?: Space;
|
|
68
|
-
/**
|
|
69
|
-
* Tokens representing CSS `paddingInlineStart`.
|
|
70
|
-
*/
|
|
71
|
-
paddingInlineStart?: Space;
|
|
72
|
-
/**
|
|
73
|
-
* Tokens representing CSS `paddingInlineEnd`.
|
|
74
|
-
*/
|
|
75
|
-
paddingInlineEnd?: Space;
|
|
76
|
-
/**
|
|
77
|
-
* Forwarded ref.
|
|
78
|
-
*/
|
|
79
|
-
ref?: Ref<HTMLButtonElement>;
|
|
80
|
-
};
|
|
81
|
-
export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BasePressableProps;
|
|
82
|
-
/**
|
|
83
|
-
* __Pressable__
|
|
84
|
-
*
|
|
85
|
-
* A primitive for building custom buttons.
|
|
86
|
-
*
|
|
87
|
-
* - [Examples](https://atlassian.design/components/primitives/pressable/examples)
|
|
88
|
-
* - [Code](https://atlassian.design/components/primitives/pressable/code)
|
|
89
|
-
* - [Usage](https://atlassian.design/components/primitives/pressable/usage)
|
|
90
|
-
*/
|
|
91
|
-
declare const Pressable: React.ForwardRefExoticComponent<React.PropsWithoutRef<PressableProps> & React.RefAttributes<HTMLButtonElement>>;
|
|
92
|
-
export default Pressable;
|
|
@@ -1,61 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ElementType, type ForwardRefExoticComponent, type MemoExoticComponent, type ReactNode, type RefAttributes } from 'react';
|
|
6
|
-
import { type Space } from '../xcss/style-maps.partial';
|
|
7
|
-
import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
|
|
8
|
-
export type StackProps<T extends ElementType = 'div'> = {
|
|
9
|
-
/**
|
|
10
|
-
* The DOM element to render as the Stack. Defaults to `div`.
|
|
11
|
-
*/
|
|
12
|
-
as?: 'div' | 'span' | 'ul' | 'ol' | 'dl';
|
|
13
|
-
/**
|
|
14
|
-
* Used to align children along the block axis (typically vertical).
|
|
15
|
-
*/
|
|
16
|
-
alignBlock?: Exclude<AlignBlock, 'baseline'>;
|
|
17
|
-
/**
|
|
18
|
-
* Used to align children along the inline axis (typically horizontal).
|
|
19
|
-
*/
|
|
20
|
-
alignInline?: AlignInline;
|
|
21
|
-
/**
|
|
22
|
-
* Used to distribute the children along the main axis.
|
|
23
|
-
*/
|
|
24
|
-
spread?: Spread;
|
|
25
|
-
/**
|
|
26
|
-
* Used to set whether the container should grow to fill the available space.
|
|
27
|
-
*/
|
|
28
|
-
grow?: Grow;
|
|
29
|
-
/**
|
|
30
|
-
* Represents the space between each child.
|
|
31
|
-
*/
|
|
32
|
-
space?: Space;
|
|
33
|
-
/**
|
|
34
|
-
* Elements to be rendered inside the Stack.
|
|
35
|
-
*/
|
|
36
|
-
children: ReactNode;
|
|
37
|
-
/**
|
|
38
|
-
* The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
|
|
39
|
-
*/
|
|
40
|
-
id?: string;
|
|
41
|
-
/**
|
|
42
|
-
* Forwarded ref element.
|
|
43
|
-
*/
|
|
44
|
-
ref?: React.ComponentPropsWithRef<T>['ref'];
|
|
45
|
-
} & BasePrimitiveProps;
|
|
46
|
-
/**
|
|
47
|
-
* __Stack__
|
|
48
|
-
*
|
|
49
|
-
* Stack is a primitive component based on flexbox that manages the block layout of direct children.
|
|
50
|
-
*
|
|
51
|
-
* @example
|
|
52
|
-
* ```tsx
|
|
53
|
-
* <Stack>
|
|
54
|
-
* <Box padding="space.100" backgroundColor="neutral"></Box>
|
|
55
|
-
* <Box padding="space.100" backgroundColor="neutral"></Box>
|
|
56
|
-
* </Stack>
|
|
57
|
-
* ```
|
|
58
|
-
*
|
|
59
|
-
*/
|
|
60
|
-
declare const Stack: MemoExoticComponent<ForwardRefExoticComponent<Omit<StackProps<ElementType>, 'ref'> & RefAttributes<any>>>;
|
|
61
|
-
export default Stack;
|
|
@@ -1,75 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @jsxRuntime classic
|
|
3
|
-
* @jsx jsx
|
|
4
|
-
*/
|
|
5
|
-
import { type ComponentPropsWithRef, type ElementType, type ReactNode } from 'react';
|
|
6
|
-
import { type SerializedStyles } from '@emotion/react';
|
|
7
|
-
import { type TextColor, type TextSize, type TextWeight } from '../xcss/style-maps.partial';
|
|
8
|
-
import type { BasePrimitiveProps } from './types';
|
|
9
|
-
declare const asAllowlist: readonly [
|
|
10
|
-
"span",
|
|
11
|
-
"p",
|
|
12
|
-
"strong",
|
|
13
|
-
"em"
|
|
14
|
-
];
|
|
15
|
-
type AsElement = (typeof asAllowlist)[number];
|
|
16
|
-
type TextPropsBase<T extends ElementType = 'span'> = {
|
|
17
|
-
/**
|
|
18
|
-
* HTML tag to be rendered. Defaults to `span`.
|
|
19
|
-
*/
|
|
20
|
-
as?: AsElement;
|
|
21
|
-
/**
|
|
22
|
-
* Elements rendered within the Text element.
|
|
23
|
-
*/
|
|
24
|
-
children: ReactNode;
|
|
25
|
-
/**
|
|
26
|
-
* Token representing text color with a built-in fallback value.
|
|
27
|
-
* Will apply inverse text color automatically if placed within a Box with bold background color.
|
|
28
|
-
* Defaults to `color.text` if not nested in other Text components.
|
|
29
|
-
*/
|
|
30
|
-
color?: TextColor | 'inherit';
|
|
31
|
-
/**
|
|
32
|
-
* The [HTML `id` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
|
|
33
|
-
*/
|
|
34
|
-
id?: string;
|
|
35
|
-
/**
|
|
36
|
-
* The number of lines to limit the provided text to. Text will be truncated with an ellipsis.
|
|
37
|
-
*
|
|
38
|
-
* When `maxLines={1}`, `wordBreak` defaults to `break-all` to match the behaviour of `text-overflow: ellipsis`.
|
|
39
|
-
*/
|
|
40
|
-
maxLines?: number;
|
|
41
|
-
/**
|
|
42
|
-
* Text alignment.
|
|
43
|
-
*/
|
|
44
|
-
align?: TextAlign;
|
|
45
|
-
/**
|
|
46
|
-
* Text size.
|
|
47
|
-
*/
|
|
48
|
-
size?: TextSize;
|
|
49
|
-
/**
|
|
50
|
-
* Font weight.
|
|
51
|
-
*/
|
|
52
|
-
weight?: TextWeight;
|
|
53
|
-
/**
|
|
54
|
-
* Forwarded ref.
|
|
55
|
-
*/
|
|
56
|
-
ref?: ComponentPropsWithRef<T>['ref'];
|
|
57
|
-
};
|
|
58
|
-
export type TextProps<T extends ElementType = 'span'> = TextPropsBase<T> & Omit<BasePrimitiveProps, 'xcss'>;
|
|
59
|
-
type TextAlign = keyof typeof textAlignMap;
|
|
60
|
-
declare const textAlignMap: {
|
|
61
|
-
center: SerializedStyles;
|
|
62
|
-
end: SerializedStyles;
|
|
63
|
-
start: SerializedStyles;
|
|
64
|
-
};
|
|
65
|
-
/**
|
|
66
|
-
* __Text__
|
|
67
|
-
*
|
|
68
|
-
* Text is a primitive component that has the Atlassian Design System's design guidelines baked in.
|
|
69
|
-
* This includes considerations for text attributes such as color, font size, font weight, and line height.
|
|
70
|
-
* It renders a `span` by default.
|
|
71
|
-
*
|
|
72
|
-
* @internal
|
|
73
|
-
*/
|
|
74
|
-
declare const Text: React.ForwardRefExoticComponent<React.PropsWithoutRef<TextProps<ElementType>> & React.RefAttributes<any>>;
|
|
75
|
-
export default Text;
|
|
@@ -1,33 +0,0 @@
|
|
|
1
|
-
import type { CSSProperties } from 'react';
|
|
2
|
-
import type { StrictXCSSProp, XCSSAllProperties, XCSSAllPseudos } from '@atlaskit/css';
|
|
3
|
-
import type { XCSS } from '../xcss/xcss';
|
|
4
|
-
export type BasePrimitiveProps = {
|
|
5
|
-
/**
|
|
6
|
-
* A unique string that appears as data attribute `data-testid` in the rendered code, serving as a hook for automated tests.
|
|
7
|
-
*/
|
|
8
|
-
testId?: string;
|
|
9
|
-
/**
|
|
10
|
-
* `data-testid` is strictly controlled through the `testId` prop.
|
|
11
|
-
* This lets consumers know that this data attribute will not be applied.
|
|
12
|
-
*/
|
|
13
|
-
'data-testid'?: never;
|
|
14
|
-
/**
|
|
15
|
-
* Apply a subset of permitted styles powered by Atlassian Design System design tokens.
|
|
16
|
-
*/
|
|
17
|
-
xcss?: XCSS | Array<XCSS | false | undefined> | StrictXCSSProp<XCSSAllProperties, XCSSAllPseudos>;
|
|
18
|
-
/**
|
|
19
|
-
* Accessible role.
|
|
20
|
-
*/
|
|
21
|
-
role?: string;
|
|
22
|
-
};
|
|
23
|
-
export type StyleProp = {
|
|
24
|
-
/**
|
|
25
|
-
* Inline styles to be applied to the primitive. Only apply as a last resort, or where
|
|
26
|
-
* styles cannot otherwise be calculated outside of the runtime of the component they're applied.
|
|
27
|
-
*/
|
|
28
|
-
style?: CSSProperties;
|
|
29
|
-
};
|
|
30
|
-
export type AlignInline = 'start' | 'center' | 'end' | 'stretch';
|
|
31
|
-
export type AlignBlock = 'start' | 'center' | 'end' | 'baseline' | 'stretch';
|
|
32
|
-
export type Spread = 'space-between';
|
|
33
|
-
export type Grow = 'hug' | 'fill';
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export declare const LAYERS: {
|
|
2
|
-
readonly card: 100;
|
|
3
|
-
readonly navigation: 200;
|
|
4
|
-
readonly dialog: 300;
|
|
5
|
-
readonly layer: 400;
|
|
6
|
-
readonly blanket: 500;
|
|
7
|
-
readonly modal: 510;
|
|
8
|
-
readonly flag: 600;
|
|
9
|
-
readonly spotlight: 700;
|
|
10
|
-
readonly tooltip: 800;
|
|
11
|
-
};
|
|
12
|
-
export type Layer = keyof typeof LAYERS;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { PositiveSpaceToken as Space, TextColor } from '../compiled/components/types';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Hide } from '../compiled/responsive/hide';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { media } from '../compiled/responsive/media-helper';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { Show } from '../compiled/responsive/show';
|