@atlaskit/primitives 8.2.0 → 8.2.1
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 +9 -0
- package/dist/cjs/components/anchor.js +91 -55
- package/dist/cjs/components/pressable.js +83 -51
- package/dist/es2019/components/anchor.js +93 -51
- package/dist/es2019/components/pressable.js +85 -47
- package/dist/esm/components/anchor.js +93 -53
- package/dist/esm/components/pressable.js +85 -49
- package/dist/types/components/anchor.d.ts +73 -10
- package/dist/types/components/pressable.d.ts +8 -4
- package/dist/types-ts4.5/components/anchor.d.ts +73 -10
- package/dist/types-ts4.5/components/pressable.d.ts +8 -4
- package/package.json +1 -1
|
@@ -1,35 +1,53 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
-
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
|
|
3
2
|
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
|
|
4
|
-
var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "
|
|
5
|
-
|
|
3
|
+
var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss"],
|
|
4
|
+
_excluded2 = ["className"];
|
|
5
|
+
/**
|
|
6
|
+
* @jsxRuntime classic
|
|
7
|
+
*/
|
|
8
|
+
/** @jsx jsx */
|
|
9
|
+
import { forwardRef, useCallback, useContext } from 'react';
|
|
10
|
+
|
|
11
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
12
|
+
import { css, jsx } from '@emotion/react';
|
|
6
13
|
import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
|
|
7
14
|
import noop from '@atlaskit/ds-lib/noop';
|
|
8
15
|
import InteractionContext from '@atlaskit/interaction-context';
|
|
9
|
-
import {
|
|
10
|
-
import
|
|
11
|
-
|
|
12
|
-
//
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
16
|
+
import { backgroundColorStylesMap, borderColorMap, borderWidthMap, isSurfaceColorToken, paddingStylesMap, positiveSpaceMap, surfaceColorStylesMap } from '../xcss/style-maps.partial';
|
|
17
|
+
import { parseXcss } from '../xcss/xcss';
|
|
18
|
+
import { SurfaceContext } from './internal/surface-provider';
|
|
19
|
+
// This duplicates FocusRing styles from `@atlaskit/focus-ring`.
|
|
20
|
+
var focusRingStyles = css({
|
|
21
|
+
'&:focus, &:focus-visible': {
|
|
22
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
23
|
+
outlineColor: borderColorMap['color.border.focused'],
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
25
|
+
outlineOffset: positiveSpaceMap['space.025'],
|
|
26
|
+
outlineStyle: 'solid',
|
|
27
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
|
|
28
|
+
outlineWidth: borderWidthMap['border.width.outline']
|
|
29
|
+
},
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
|
|
31
|
+
'&:focus:not(:focus-visible)': {
|
|
24
32
|
outline: 'none'
|
|
25
33
|
},
|
|
26
|
-
':focus-visible': baseFocusRingStyles,
|
|
27
34
|
'@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
|
|
28
|
-
'
|
|
35
|
+
'&:focus-visible': {
|
|
29
36
|
outline: '1px solid'
|
|
30
37
|
}
|
|
31
38
|
}
|
|
32
39
|
});
|
|
40
|
+
var baseStyles = css({
|
|
41
|
+
boxSizing: 'border-box',
|
|
42
|
+
appearance: 'none',
|
|
43
|
+
border: 'none'
|
|
44
|
+
});
|
|
45
|
+
var enabledStyles = css({
|
|
46
|
+
cursor: 'pointer'
|
|
47
|
+
});
|
|
48
|
+
var disabledStyles = css({
|
|
49
|
+
cursor: 'not-allowed'
|
|
50
|
+
});
|
|
33
51
|
|
|
34
52
|
/**
|
|
35
53
|
* __Pressable__
|
|
@@ -53,13 +71,14 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
53
71
|
isDisabled = _ref.isDisabled,
|
|
54
72
|
_ref$type = _ref.type,
|
|
55
73
|
type = _ref$type === void 0 ? 'button' : _ref$type,
|
|
56
|
-
testId = _ref.testId,
|
|
57
|
-
xcssStyles = _ref.xcss,
|
|
58
74
|
_ref$onClick = _ref.onClick,
|
|
59
75
|
providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
|
|
60
76
|
interactionName = _ref.interactionName,
|
|
61
77
|
componentName = _ref.componentName,
|
|
62
78
|
analyticsContext = _ref.analyticsContext,
|
|
79
|
+
style = _ref.style,
|
|
80
|
+
testId = _ref.testId,
|
|
81
|
+
xcss = _ref.xcss,
|
|
63
82
|
htmlAttributes = _objectWithoutProperties(_ref, _excluded);
|
|
64
83
|
var interactionContext = useContext(InteractionContext);
|
|
65
84
|
var handleClick = useCallback(function (e, analyticsEvent) {
|
|
@@ -71,39 +90,56 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
71
90
|
action: 'clicked',
|
|
72
91
|
componentName: componentName || 'Pressable',
|
|
73
92
|
packageName: "@atlaskit/primitives",
|
|
74
|
-
packageVersion: "8.2.
|
|
93
|
+
packageVersion: "8.2.1",
|
|
75
94
|
analyticsData: analyticsContext,
|
|
76
95
|
actionSubject: 'button'
|
|
77
96
|
});
|
|
78
97
|
|
|
79
|
-
//
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
//
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
98
|
+
// This is to remove className from safeHtmlAttributes
|
|
99
|
+
// @ts-expect-error className doesn't exist in the prop definition but we want to ensure it cannot be applied even if types are bypassed
|
|
100
|
+
var _spreadClass = htmlAttributes.className,
|
|
101
|
+
safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
|
|
102
|
+
var resolvedStyles = parseXcss(xcss);
|
|
103
|
+
var node =
|
|
104
|
+
// eslint-disable-next-line @atlaskit/design-system/no-html-button
|
|
105
|
+
jsx("button", _extends({
|
|
106
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
107
|
+
style: style,
|
|
108
|
+
ref: ref
|
|
109
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
110
|
+
,
|
|
111
|
+
className: resolvedStyles.static
|
|
112
|
+
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
113
|
+
}, safeHtmlAttributes, {
|
|
114
|
+
// eslint-disable-next-line react/button-has-type
|
|
93
115
|
type: type,
|
|
94
116
|
onClick: onClick,
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
// eslint-disable-next-line @atlaskit/
|
|
104
|
-
,
|
|
105
|
-
|
|
106
|
-
|
|
117
|
+
disabled: isDisabled,
|
|
118
|
+
css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
|
|
119
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
120
|
+
backgroundColor && backgroundColorStylesMap[backgroundColor],
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
122
|
+
isSurfaceColorToken(backgroundColor) && surfaceColorStylesMap[backgroundColor],
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
124
|
+
padding && paddingStylesMap.padding[padding],
|
|
125
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
126
|
+
paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
|
|
127
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
128
|
+
paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
|
|
129
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
130
|
+
paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
|
|
131
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
132
|
+
paddingInline && paddingStylesMap.paddingInline[paddingInline],
|
|
133
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
134
|
+
paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
135
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
136
|
+
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
|
|
137
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
138
|
+
resolvedStyles.emotion],
|
|
139
|
+
"data-testid": testId
|
|
107
140
|
}), children);
|
|
141
|
+
return backgroundColor ? jsx(SurfaceContext.Provider, {
|
|
142
|
+
value: backgroundColor
|
|
143
|
+
}, node) : node;
|
|
108
144
|
});
|
|
109
145
|
export default Pressable;
|
|
@@ -1,28 +1,91 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
4
|
+
/** @jsx jsx */
|
|
5
|
+
import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
|
|
6
|
+
import { jsx } from '@emotion/react';
|
|
2
7
|
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
8
|
import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
|
|
4
|
-
import { type
|
|
5
|
-
|
|
9
|
+
import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
|
|
10
|
+
import type { BasePrimitiveProps, StyleProp } from './types';
|
|
11
|
+
type BaseAnchorProps = {
|
|
12
|
+
/**
|
|
13
|
+
* Elements to be rendered inside the Anchor.
|
|
14
|
+
*/
|
|
15
|
+
children?: ReactNode;
|
|
6
16
|
/**
|
|
7
|
-
* Handler called on click. The second argument can be
|
|
17
|
+
* 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.
|
|
8
18
|
*/
|
|
9
19
|
onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
10
20
|
/**
|
|
11
|
-
* An optional name used to identify
|
|
12
|
-
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
|
|
21
|
+
* 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).
|
|
13
22
|
*/
|
|
14
23
|
interactionName?: string;
|
|
15
24
|
/**
|
|
16
|
-
* An optional component name used to identify this component
|
|
17
|
-
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
|
|
25
|
+
* 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 'Anchor'.
|
|
18
26
|
*/
|
|
19
27
|
componentName?: string;
|
|
20
28
|
/**
|
|
21
|
-
* Additional information to be included in the `context` of analytics events that come from anchor.
|
|
29
|
+
* Additional information to be included in the `context` of Atlaskit analytics events that come from anchor.
|
|
22
30
|
*/
|
|
23
31
|
analyticsContext?: Record<string, any>;
|
|
32
|
+
/**
|
|
33
|
+
* Token representing background color with a built-in fallback value.
|
|
34
|
+
*/
|
|
35
|
+
backgroundColor?: BackgroundColor;
|
|
36
|
+
/**
|
|
37
|
+
* Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
|
|
38
|
+
*
|
|
39
|
+
* @see paddingBlock
|
|
40
|
+
* @see paddingInline
|
|
41
|
+
*/
|
|
42
|
+
padding?: Space;
|
|
43
|
+
/**
|
|
44
|
+
* Tokens representing CSS shorthand `paddingBlock`.
|
|
45
|
+
*
|
|
46
|
+
* @see paddingBlockStart
|
|
47
|
+
* @see paddingBlockEnd
|
|
48
|
+
*/
|
|
49
|
+
paddingBlock?: Space;
|
|
50
|
+
/**
|
|
51
|
+
* Tokens representing CSS `paddingBlockStart`.
|
|
52
|
+
*/
|
|
53
|
+
paddingBlockStart?: Space;
|
|
54
|
+
/**
|
|
55
|
+
* Tokens representing CSS `paddingBlockEnd`.
|
|
56
|
+
*/
|
|
57
|
+
paddingBlockEnd?: Space;
|
|
58
|
+
/**
|
|
59
|
+
* Tokens representing CSS shorthand `paddingInline`.
|
|
60
|
+
*
|
|
61
|
+
* @see paddingInlineStart
|
|
62
|
+
* @see paddingInlineEnd
|
|
63
|
+
*/
|
|
64
|
+
paddingInline?: Space;
|
|
65
|
+
/**
|
|
66
|
+
* Tokens representing CSS `paddingInlineStart`.
|
|
67
|
+
*/
|
|
68
|
+
paddingInlineStart?: Space;
|
|
69
|
+
/**
|
|
70
|
+
* Tokens representing CSS `paddingInlineEnd`.
|
|
71
|
+
*/
|
|
72
|
+
paddingInlineEnd?: Space;
|
|
73
|
+
/**
|
|
74
|
+
* Forwarded ref.
|
|
75
|
+
*/
|
|
76
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
24
77
|
};
|
|
25
|
-
|
|
78
|
+
export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BaseAnchorProps;
|
|
79
|
+
/**
|
|
80
|
+
* __Anchor__
|
|
81
|
+
*
|
|
82
|
+
* A primitive for building custom anchor links.
|
|
83
|
+
*
|
|
84
|
+
* - [Examples](https://atlassian.design/components/primitives/anchor/examples)
|
|
85
|
+
* - [Code](https://atlassian.design/components/primitives/anchor/code)
|
|
86
|
+
* - [Usage](https://atlassian.design/components/primitives/anchor/usage)
|
|
87
|
+
*/
|
|
88
|
+
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
|
|
26
89
|
/**
|
|
27
90
|
* __Anchor__
|
|
28
91
|
*
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
4
|
+
/** @jsx jsx */
|
|
5
|
+
import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
|
|
2
6
|
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
7
|
import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
|
|
4
8
|
import type { BasePrimitiveProps, StyleProp } from './types';
|
|
5
9
|
type BasePressableProps = {
|
|
6
10
|
/**
|
|
7
|
-
* Elements to be rendered inside the
|
|
11
|
+
* Elements to be rendered inside the Pressable.
|
|
8
12
|
*/
|
|
9
13
|
children?: ReactNode;
|
|
10
14
|
/**
|
|
@@ -71,7 +75,7 @@ type BasePressableProps = {
|
|
|
71
75
|
/**
|
|
72
76
|
* Forwarded ref.
|
|
73
77
|
*/
|
|
74
|
-
ref?:
|
|
78
|
+
ref?: Ref<HTMLButtonElement>;
|
|
75
79
|
};
|
|
76
80
|
export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BasePressableProps;
|
|
77
81
|
/**
|
|
@@ -83,5 +87,5 @@ export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled'
|
|
|
83
87
|
* - [Code](https://atlassian.design/components/primitives/pressable/code)
|
|
84
88
|
* - [Usage](https://atlassian.design/components/primitives/pressable/usage)
|
|
85
89
|
*/
|
|
86
|
-
declare const Pressable:
|
|
90
|
+
declare const Pressable: import("react").ForwardRefExoticComponent<Pick<Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "style" | "disabled" | "className" | "onClick"> & BasePrimitiveProps & StyleProp & BasePressableProps, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "style" | "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" | keyof BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
87
91
|
export default Pressable;
|
|
@@ -1,28 +1,91 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
4
|
+
/** @jsx jsx */
|
|
5
|
+
import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
|
|
6
|
+
import { jsx } from '@emotion/react';
|
|
2
7
|
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
8
|
import { type RouterLinkComponentProps } from '@atlaskit/app-provider';
|
|
4
|
-
import { type
|
|
5
|
-
|
|
9
|
+
import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
|
|
10
|
+
import type { BasePrimitiveProps, StyleProp } from './types';
|
|
11
|
+
type BaseAnchorProps = {
|
|
12
|
+
/**
|
|
13
|
+
* Elements to be rendered inside the Anchor.
|
|
14
|
+
*/
|
|
15
|
+
children?: ReactNode;
|
|
6
16
|
/**
|
|
7
|
-
* Handler called on click. The second argument can be
|
|
17
|
+
* 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.
|
|
8
18
|
*/
|
|
9
19
|
onClick?: (e: React.MouseEvent<HTMLAnchorElement>, analyticsEvent: UIAnalyticsEvent) => void;
|
|
10
20
|
/**
|
|
11
|
-
* An optional name used to identify
|
|
12
|
-
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
|
|
21
|
+
* 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).
|
|
13
22
|
*/
|
|
14
23
|
interactionName?: string;
|
|
15
24
|
/**
|
|
16
|
-
* An optional component name used to identify this component
|
|
17
|
-
* see [UFO integration into Design System components](https://go.atlassian.com/react-ufo-dst-integration).
|
|
25
|
+
* 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 'Anchor'.
|
|
18
26
|
*/
|
|
19
27
|
componentName?: string;
|
|
20
28
|
/**
|
|
21
|
-
* Additional information to be included in the `context` of analytics events that come from anchor.
|
|
29
|
+
* Additional information to be included in the `context` of Atlaskit analytics events that come from anchor.
|
|
22
30
|
*/
|
|
23
31
|
analyticsContext?: Record<string, any>;
|
|
32
|
+
/**
|
|
33
|
+
* Token representing background color with a built-in fallback value.
|
|
34
|
+
*/
|
|
35
|
+
backgroundColor?: BackgroundColor;
|
|
36
|
+
/**
|
|
37
|
+
* Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
|
|
38
|
+
*
|
|
39
|
+
* @see paddingBlock
|
|
40
|
+
* @see paddingInline
|
|
41
|
+
*/
|
|
42
|
+
padding?: Space;
|
|
43
|
+
/**
|
|
44
|
+
* Tokens representing CSS shorthand `paddingBlock`.
|
|
45
|
+
*
|
|
46
|
+
* @see paddingBlockStart
|
|
47
|
+
* @see paddingBlockEnd
|
|
48
|
+
*/
|
|
49
|
+
paddingBlock?: Space;
|
|
50
|
+
/**
|
|
51
|
+
* Tokens representing CSS `paddingBlockStart`.
|
|
52
|
+
*/
|
|
53
|
+
paddingBlockStart?: Space;
|
|
54
|
+
/**
|
|
55
|
+
* Tokens representing CSS `paddingBlockEnd`.
|
|
56
|
+
*/
|
|
57
|
+
paddingBlockEnd?: Space;
|
|
58
|
+
/**
|
|
59
|
+
* Tokens representing CSS shorthand `paddingInline`.
|
|
60
|
+
*
|
|
61
|
+
* @see paddingInlineStart
|
|
62
|
+
* @see paddingInlineEnd
|
|
63
|
+
*/
|
|
64
|
+
paddingInline?: Space;
|
|
65
|
+
/**
|
|
66
|
+
* Tokens representing CSS `paddingInlineStart`.
|
|
67
|
+
*/
|
|
68
|
+
paddingInlineStart?: Space;
|
|
69
|
+
/**
|
|
70
|
+
* Tokens representing CSS `paddingInlineEnd`.
|
|
71
|
+
*/
|
|
72
|
+
paddingInlineEnd?: Space;
|
|
73
|
+
/**
|
|
74
|
+
* Forwarded ref.
|
|
75
|
+
*/
|
|
76
|
+
ref?: Ref<HTMLAnchorElement>;
|
|
24
77
|
};
|
|
25
|
-
|
|
78
|
+
export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> = RouterLinkComponentProps<RouterLinkConfig> & Omit<ComponentPropsWithoutRef<'a'>, 'href' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BaseAnchorProps;
|
|
79
|
+
/**
|
|
80
|
+
* __Anchor__
|
|
81
|
+
*
|
|
82
|
+
* A primitive for building custom anchor links.
|
|
83
|
+
*
|
|
84
|
+
* - [Examples](https://atlassian.design/components/primitives/anchor/examples)
|
|
85
|
+
* - [Code](https://atlassian.design/components/primitives/anchor/code)
|
|
86
|
+
* - [Usage](https://atlassian.design/components/primitives/anchor/usage)
|
|
87
|
+
*/
|
|
88
|
+
declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
|
|
26
89
|
/**
|
|
27
90
|
* __Anchor__
|
|
28
91
|
*
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
4
|
+
/** @jsx jsx */
|
|
5
|
+
import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from 'react';
|
|
2
6
|
import { type UIAnalyticsEvent } from '@atlaskit/analytics-next';
|
|
3
7
|
import { type BackgroundColor, type Space } from '../xcss/style-maps.partial';
|
|
4
8
|
import type { BasePrimitiveProps, StyleProp } from './types';
|
|
5
9
|
type BasePressableProps = {
|
|
6
10
|
/**
|
|
7
|
-
* Elements to be rendered inside the
|
|
11
|
+
* Elements to be rendered inside the Pressable.
|
|
8
12
|
*/
|
|
9
13
|
children?: ReactNode;
|
|
10
14
|
/**
|
|
@@ -71,7 +75,7 @@ type BasePressableProps = {
|
|
|
71
75
|
/**
|
|
72
76
|
* Forwarded ref.
|
|
73
77
|
*/
|
|
74
|
-
ref?:
|
|
78
|
+
ref?: Ref<HTMLButtonElement>;
|
|
75
79
|
};
|
|
76
80
|
export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled' | 'onClick' | 'style' | 'className'> & BasePrimitiveProps & StyleProp & BasePressableProps;
|
|
77
81
|
/**
|
|
@@ -83,5 +87,5 @@ export type PressableProps = Omit<ComponentPropsWithoutRef<'button'>, 'disabled'
|
|
|
83
87
|
* - [Code](https://atlassian.design/components/primitives/pressable/code)
|
|
84
88
|
* - [Usage](https://atlassian.design/components/primitives/pressable/usage)
|
|
85
89
|
*/
|
|
86
|
-
declare const Pressable:
|
|
90
|
+
declare const Pressable: import("react").ForwardRefExoticComponent<Pick<Omit<Pick<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "key" | keyof import("react").ButtonHTMLAttributes<HTMLButtonElement>>, "style" | "disabled" | "className" | "onClick"> & BasePrimitiveProps & StyleProp & BasePressableProps, "padding" | "paddingBlock" | "paddingBlockStart" | "paddingBlockEnd" | "paddingInline" | "paddingInlineStart" | "paddingInlineEnd" | "backgroundColor" | "color" | "translate" | "hidden" | "key" | "value" | "style" | "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" | keyof BasePrimitiveProps | "isDisabled" | "interactionName" | "componentName" | "analyticsContext"> & import("react").RefAttributes<HTMLButtonElement>>;
|
|
87
91
|
export default Pressable;
|