@atlaskit/primitives 2.0.3 → 3.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.
Files changed (34) hide show
  1. package/CHANGELOG.md +23 -0
  2. package/anchor/package.json +15 -0
  3. package/constellation/anchor/code.mdx +21 -0
  4. package/constellation/anchor/examples.mdx +33 -0
  5. package/constellation/anchor/usage.mdx +47 -0
  6. package/constellation/box/examples.mdx +5 -3
  7. package/constellation/pressable/code.mdx +21 -0
  8. package/constellation/pressable/examples.mdx +39 -0
  9. package/constellation/pressable/usage.mdx +23 -0
  10. package/constellation/xcss/examples.mdx +1 -1
  11. package/dist/cjs/components/{link.js → anchor.js} +40 -13
  12. package/dist/cjs/components/pressable.js +25 -1
  13. package/dist/cjs/components/text.js +12 -33
  14. package/dist/cjs/index.js +14 -0
  15. package/dist/es2019/components/{link.js → anchor.js} +39 -13
  16. package/dist/es2019/components/pressable.js +24 -1
  17. package/dist/es2019/components/text.js +4 -21
  18. package/dist/es2019/index.js +2 -0
  19. package/dist/esm/components/{link.js → anchor.js} +41 -14
  20. package/dist/esm/components/pressable.js +26 -2
  21. package/dist/esm/components/text.js +4 -24
  22. package/dist/esm/index.js +2 -0
  23. package/dist/types/components/anchor.d.ts +69 -0
  24. package/dist/types/components/pressable.d.ts +47 -4
  25. package/dist/types/index.d.ts +4 -0
  26. package/dist/types-ts4.5/components/anchor.d.ts +69 -0
  27. package/dist/types-ts4.5/components/pressable.d.ts +47 -4
  28. package/dist/types-ts4.5/index.d.ts +4 -0
  29. package/extract-react-types/anchor-props.tsx +103 -0
  30. package/extract-react-types/pressable-props.tsx +94 -0
  31. package/package.json +23 -3
  32. package/dist/types/components/link.d.ts +0 -31
  33. package/dist/types-ts4.5/components/link.d.ts +0 -31
  34. package/link/package.json +0 -15
@@ -0,0 +1,69 @@
1
+ import React, { type ReactNode, type Ref } from 'react';
2
+ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
3
+ import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
4
+ import { type BoxProps } from './box';
5
+ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style' | 'onClick'> & {
6
+ /**
7
+ * `children` should be defined to ensure links have text.
8
+ */
9
+ children: ReactNode;
10
+ /**
11
+ * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
12
+ */
13
+ onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
14
+ /**
15
+ * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
16
+ * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
17
+ */
18
+ interactionName?: string;
19
+ /**
20
+ * An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information,
21
+ * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
22
+ */
23
+ componentName?: string;
24
+ /**
25
+ * Additional information to be included in the `context` of analytics events that come from anchor.
26
+ */
27
+ analyticsContext?: Record<string, any>;
28
+ };
29
+ declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
30
+ /**
31
+ * __UNSAFE_ANCHOR__
32
+ *
33
+ * @internal Still under development. Do not use.
34
+ *
35
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
36
+ *
37
+ * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
38
+ *
39
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
40
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
41
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
42
+ */
43
+ declare const UNSAFE_ANCHOR: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "onClick" | "href"> & {
44
+ /**
45
+ * `children` should be defined to ensure links have text.
46
+ */
47
+ children: ReactNode;
48
+ /**
49
+ * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
50
+ */
51
+ onClick?: ((e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
52
+ /**
53
+ * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
54
+ * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
55
+ */
56
+ interactionName?: string | undefined;
57
+ /**
58
+ * An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information,
59
+ * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
60
+ */
61
+ componentName?: string | undefined;
62
+ /**
63
+ * Additional information to be included in the `context` of analytics events that come from anchor.
64
+ */
65
+ analyticsContext?: Record<string, any> | undefined;
66
+ } & {
67
+ ref?: React.Ref<HTMLAnchorElement> | undefined;
68
+ }) => ReturnType<typeof Anchor>;
69
+ export default UNSAFE_ANCHOR;
@@ -1,14 +1,32 @@
1
- import { type ReactElement, type ReactNode } from 'react';
1
+ import React, { type ReactNode } from 'react';
2
+ import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
2
3
  import { type BoxProps } from './box';
3
- export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style'> & {
4
+ export type PressableProps = Omit<BoxProps<'button'>, 'disabled' | 'as' | 'children' | 'role' | 'style' | 'onClick'> & {
4
5
  /**
5
6
  * `children` should be defined to ensure buttons are not empty,
6
7
  * because they should have labels.
7
8
  */
8
9
  children: ReactNode;
9
10
  isDisabled?: boolean;
11
+ /**
12
+ * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
13
+ */
14
+ onClick?: (e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void;
15
+ /**
16
+ * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
17
+ * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
18
+ */
19
+ interactionName?: string;
20
+ /**
21
+ * An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information,
22
+ * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
23
+ */
24
+ componentName?: string;
25
+ /**
26
+ * Additional information to be included in the `context` of analytics events that come from pressable.
27
+ */
28
+ analyticsContext?: Record<string, any>;
10
29
  };
11
- type PressableComponent = (props: PressableProps, displayName: string) => ReactElement | null;
12
30
  /**
13
31
  * __UNSAFE_PRESSABLE__
14
32
  *
@@ -20,5 +38,30 @@ type PressableComponent = (props: PressableProps, displayName: string) => ReactE
20
38
  * - [Code](https://atlassian.design/components/primitives/pressable/code)
21
39
  * - [Usage](https://atlassian.design/components/primitives/pressable/usage)
22
40
  */
23
- declare const UNSAFE_PRESSABLE: PressableComponent;
41
+ declare const UNSAFE_PRESSABLE: React.ForwardRefExoticComponent<Pick<Omit<BoxProps<"button">, "style" | "disabled" | "children" | "as" | "role" | "onClick"> & {
42
+ /**
43
+ * `children` should be defined to ensure buttons are not empty,
44
+ * because they should have labels.
45
+ */
46
+ children: ReactNode;
47
+ isDisabled?: boolean | undefined;
48
+ /**
49
+ * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
50
+ */
51
+ onClick?: ((e: React.MouseEvent<HTMLButtonElement>, analyticsEvent: UIAnalyticsEvent) => void) | undefined;
52
+ /**
53
+ * An optional name used to identify the interaction type to press listeners. For example, interaction tracing. For more information,
54
+ * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
55
+ */
56
+ interactionName?: string | undefined;
57
+ /**
58
+ * An optional component name used to identify this component to press listeners. This can be used if a parent component's name is preferred. For example, interaction tracing. For more information,
59
+ * see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
60
+ */
61
+ componentName?: string | undefined;
62
+ /**
63
+ * Additional information to be included in the `context` of analytics events that come from pressable.
64
+ */
65
+ analyticsContext?: Record<string, any> | undefined;
66
+ }, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "key" | "value" | "hidden" | "children" | "form" | "slot" | "title" | "name" | "type" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "id" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "radioGroup" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "autoFocus" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "testId" | "xcss" | "data-testid" | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & React.RefAttributes<HTMLButtonElement>>;
24
67
  export default UNSAFE_PRESSABLE;
@@ -15,5 +15,9 @@ export { default as Bleed } from './components/bleed';
15
15
  export type { BleedProps } from './components/bleed';
16
16
  export { default as Text } from './components/text';
17
17
  export type { TextProps } from './components/text';
18
+ export { default as UNSAFE_PRESSABLE } from './components/pressable';
19
+ export type { PressableProps as UNSAFE_PressableProps } from './components/pressable';
20
+ export { default as UNSAFE_ANCHOR } from './components/anchor';
21
+ export type { AnchorProps as UNSAFE_AnchorProps } from './components/anchor';
18
22
  export { media, UNSAFE_media, UNSAFE_BREAKPOINTS_CONFIG } from './responsive';
19
23
  export type { Breakpoint, MediaQuery } from './responsive';
@@ -0,0 +1,103 @@
1
+ // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
2
+ import React, { ReactNode } from 'react';
3
+
4
+ import { BasePrimitiveProps, StyleProp } from '../src/components/types';
5
+
6
+ // eslint-disable-next-line @typescript-eslint/no-namespace
7
+ namespace Token {
8
+ // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
9
+ export type BackgroundColor = 'BackgroundColor';
10
+ }
11
+
12
+ type Space =
13
+ | 'space.0'
14
+ | 'space.025'
15
+ | 'space.050'
16
+ | 'space.075'
17
+ | 'space.100'
18
+ | 'space.150'
19
+ | 'space.200'
20
+ | 'space.250'
21
+ | 'space.300'
22
+ | 'space.400'
23
+ | 'space.500'
24
+ | 'space.600'
25
+ | 'space.800'
26
+ | 'space.1000';
27
+
28
+ export default function Anchor<
29
+ RouterLinkConfig extends Record<string, any> = never,
30
+ >(
31
+ _: {
32
+ /**
33
+ * A link can be provided as a string. If a router link configuration is set
34
+ * it can be mapped to the underlying router link component,
35
+ * or optionally a custom object defined in the generic type for advanced use.
36
+ */
37
+ href: string | RouterLinkConfig;
38
+
39
+ /**
40
+ * The `target` attribute of the anchor HTML element. Defaults to `_blank` for external links.
41
+ */
42
+ target?: React.AnchorHTMLAttributes<HTMLAnchorElement>['target'];
43
+
44
+ /**
45
+ * The `rel` attribute of the anchor HTML element. Defaults to `noopener noreferrer` for external links.
46
+ */
47
+ rel?: React.AnchorHTMLAttributes<HTMLAnchorElement>['rel'];
48
+
49
+ /**
50
+ * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
51
+ */
52
+ padding?: Space;
53
+
54
+ /**
55
+ * Tokens representing CSS shorthand `paddingBlock`.
56
+ */
57
+ paddingBlock?: Space;
58
+
59
+ /**
60
+ * Tokens representing CSS `paddingBlockStart`.
61
+ */
62
+ paddingBlockStart?: Space;
63
+
64
+ /**
65
+ * Tokens representing CSS `paddingBlockEnd`.
66
+ */
67
+ paddingBlockEnd?: Space;
68
+
69
+ /**
70
+ * Tokens representing CSS shorthand `paddingInline`.
71
+ */
72
+ paddingInline?: Space;
73
+
74
+ /**
75
+ * Tokens representing CSS `paddingInlineStart`.
76
+ */
77
+ paddingInlineStart?: Space;
78
+
79
+ /**
80
+ * Tokens representing CSS `paddingInlineEnd`.
81
+ */
82
+ paddingInlineEnd?: Space;
83
+
84
+ /**
85
+ * A token alias for background color. See:<br>
86
+ * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
87
+ * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
88
+ * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Box styles.
89
+ */
90
+ backgroundColor?: Token.BackgroundColor;
91
+
92
+ /**
93
+ * Elements to be rendered inside the primitive.
94
+ */
95
+ children: ReactNode;
96
+
97
+ /**
98
+ * Forwarded ref element.
99
+ */
100
+ ref?: React.ComponentPropsWithRef<'a'>['ref'];
101
+ } & BasePrimitiveProps &
102
+ StyleProp,
103
+ ) {}
@@ -0,0 +1,94 @@
1
+ // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
2
+ import React, { ReactNode } from 'react';
3
+
4
+ import { BasePrimitiveProps, StyleProp } from '../src/components/types';
5
+
6
+ // eslint-disable-next-line @typescript-eslint/no-namespace
7
+ namespace Token {
8
+ // BoxProps['backgroundColor'] uses keyof, which ERT does not understand
9
+ export type BackgroundColor = 'BackgroundColor';
10
+ }
11
+
12
+ type Space =
13
+ | 'space.0'
14
+ | 'space.025'
15
+ | 'space.050'
16
+ | 'space.075'
17
+ | 'space.100'
18
+ | 'space.150'
19
+ | 'space.200'
20
+ | 'space.250'
21
+ | 'space.300'
22
+ | 'space.400'
23
+ | 'space.500'
24
+ | 'space.600'
25
+ | 'space.800'
26
+ | 'space.1000';
27
+
28
+ export default function Pressable(
29
+ _: {
30
+ /**
31
+ * Controls whether the button is disabled.
32
+ */
33
+ isDisabled?: boolean;
34
+
35
+ /**
36
+ * The `type` attribute of the Button HTML element. Defaults to `button`.
37
+ */
38
+ type?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
39
+
40
+ /**
41
+ * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
42
+ */
43
+ padding?: Space;
44
+
45
+ /**
46
+ * Tokens representing CSS shorthand `paddingBlock`.
47
+ */
48
+ paddingBlock?: Space;
49
+
50
+ /**
51
+ * Tokens representing CSS `paddingBlockStart`.
52
+ */
53
+ paddingBlockStart?: Space;
54
+
55
+ /**
56
+ * Tokens representing CSS `paddingBlockEnd`.
57
+ */
58
+ paddingBlockEnd?: Space;
59
+
60
+ /**
61
+ * Tokens representing CSS shorthand `paddingInline`.
62
+ */
63
+ paddingInline?: Space;
64
+
65
+ /**
66
+ * Tokens representing CSS `paddingInlineStart`.
67
+ */
68
+ paddingInlineStart?: Space;
69
+
70
+ /**
71
+ * Tokens representing CSS `paddingInlineEnd`.
72
+ */
73
+ paddingInlineEnd?: Space;
74
+
75
+ /**
76
+ * A token alias for background color. See:<br>
77
+ * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
78
+ * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
79
+ * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Box styles.
80
+ */
81
+ backgroundColor?: Token.BackgroundColor;
82
+
83
+ /**
84
+ * Elements to be rendered inside the primitive.
85
+ */
86
+ children: ReactNode;
87
+
88
+ /**
89
+ * Forwarded ref element.
90
+ */
91
+ ref?: React.ComponentPropsWithRef<'button'>['ref'];
92
+ } & BasePrimitiveProps &
93
+ StyleProp,
94
+ ) {}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/primitives",
3
- "version": "2.0.3",
3
+ "version": "3.0.0",
4
4
  "description": "Primitives are token-backed low-level building blocks.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -96,6 +96,24 @@
96
96
  "status": {
97
97
  "type": "closed-beta"
98
98
  }
99
+ },
100
+ {
101
+ "title": "Pressable",
102
+ "folder": "pressable",
103
+ "slug": "primitives/pressable",
104
+ "id": "@atlaskit/primitives/pressable",
105
+ "status": {
106
+ "type": "alpha"
107
+ }
108
+ },
109
+ {
110
+ "title": "Anchor",
111
+ "folder": "anchor",
112
+ "slug": "primitives/anchor",
113
+ "id": "@atlaskit/primitives/anchor",
114
+ "status": {
115
+ "type": "alpha"
116
+ }
99
117
  }
100
118
  ]
101
119
  }
@@ -104,7 +122,10 @@
104
122
  "codegen-styles": "ts-node -r tsconfig-paths/register ./scripts/codegen-styles.tsx"
105
123
  },
106
124
  "dependencies": {
125
+ "@atlaskit/analytics-next": "^9.2.0",
107
126
  "@atlaskit/app-provider": "^1.0.0",
127
+ "@atlaskit/ds-lib": "^2.2.0",
128
+ "@atlaskit/interaction-context": "^2.1.0",
108
129
  "@atlaskit/tokens": "^1.38.0",
109
130
  "@babel/runtime": "^7.0.0",
110
131
  "@emotion/react": "^11.7.1",
@@ -117,7 +138,6 @@
117
138
  },
118
139
  "devDependencies": {
119
140
  "@af/accessibility-testing": "*",
120
- "@atlaskit/ds-lib": "*",
121
141
  "@atlaskit/ssr": "*",
122
142
  "@atlaskit/visual-regression": "*",
123
143
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -172,7 +192,7 @@
172
192
  "./inline": "./src/components/inline.tsx",
173
193
  "./text": "./src/components/text.tsx",
174
194
  "./pressable": "./src/components/pressable.tsx",
175
- "./link": "./src/components/link.tsx",
195
+ "./anchor": "./src/components/anchor.tsx",
176
196
  "./responsive": "./src/responsive/index.tsx"
177
197
  },
178
198
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.0"
@@ -1,31 +0,0 @@
1
- import React, { type ReactNode, type Ref } from 'react';
2
- import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
3
- import { type BoxProps } from './box';
4
- export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & {
5
- /**
6
- * `children` should be defined to ensure links have text.
7
- */
8
- children: ReactNode;
9
- };
10
- declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
11
- /**
12
- * __UNSAFE_LINK__
13
- *
14
- * @internal Still under development. Do not use.
15
- *
16
- * A Link is a primitive component that renders an `<a>` anchor. It utilizes
17
- * the configured router link component in the AppProvider if set.
18
- *
19
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
20
- * - [Code](https://atlassian.design/components/primitives/link/code)
21
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
22
- */
23
- declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & {
24
- /**
25
- * `children` should be defined to ensure links have text.
26
- */
27
- children: ReactNode;
28
- } & {
29
- ref?: React.Ref<HTMLAnchorElement> | undefined;
30
- }) => ReturnType<typeof Link>;
31
- export default UNSAFE_LINK;
@@ -1,31 +0,0 @@
1
- import React, { type ReactNode, type Ref } from 'react';
2
- import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
3
- import { type BoxProps } from './box';
4
- export type LinkProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<'a'>, 'href' | 'as' | 'children' | 'style'> & {
5
- /**
6
- * `children` should be defined to ensure links have text.
7
- */
8
- children: ReactNode;
9
- };
10
- declare const Link: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, ...htmlAttributes }: LinkProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
11
- /**
12
- * __UNSAFE_LINK__
13
- *
14
- * @internal Still under development. Do not use.
15
- *
16
- * A Link is a primitive component that renders an `<a>` anchor. It utilizes
17
- * the configured router link component in the AppProvider if set.
18
- *
19
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
20
- * - [Code](https://atlassian.design/components/primitives/link/code)
21
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
22
- */
23
- declare const UNSAFE_LINK: <RouterLinkConfig extends Record<string, any> = never>(props: RouterLinkComponentProps<RouterLinkConfig> & Omit<BoxProps<"a">, "style" | "children" | "as" | "href"> & {
24
- /**
25
- * `children` should be defined to ensure links have text.
26
- */
27
- children: ReactNode;
28
- } & {
29
- ref?: React.Ref<HTMLAnchorElement> | undefined;
30
- }) => ReturnType<typeof Link>;
31
- export default UNSAFE_LINK;
package/link/package.json DELETED
@@ -1,15 +0,0 @@
1
- {
2
- "name": "@atlaskit/primitives/link",
3
- "main": "../dist/cjs/components/link.js",
4
- "module": "../dist/esm/components/link.js",
5
- "module:es2019": "../dist/es2019/components/link.js",
6
- "sideEffects": false,
7
- "types": "../dist/types/components/link.d.ts",
8
- "typesVersions": {
9
- ">=4.5 <4.9": {
10
- "*": [
11
- "../dist/types-ts4.5/components/link.d.ts"
12
- ]
13
- }
14
- }
15
- }