@atlaskit/primitives 8.2.0 → 9.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 (12) hide show
  1. package/CHANGELOG.md +20 -0
  2. package/dist/cjs/components/anchor.js +85 -55
  3. package/dist/cjs/components/pressable.js +81 -54
  4. package/dist/es2019/components/anchor.js +87 -51
  5. package/dist/es2019/components/pressable.js +83 -50
  6. package/dist/esm/components/anchor.js +87 -53
  7. package/dist/esm/components/pressable.js +83 -52
  8. package/dist/types/components/anchor.d.ts +73 -10
  9. package/dist/types/components/pressable.d.ts +8 -4
  10. package/dist/types-ts4.5/components/anchor.d.ts +73 -10
  11. package/dist/types-ts4.5/components/pressable.d.ts +8 -4
  12. package/package.json +1 -1
package/dist/es2019/components/pressable.js CHANGED
@@ -1,32 +1,49 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
- import React, { forwardRef, useCallback, useContext } from 'react';
2
+ /**
3
+ * @jsxRuntime classic
4
+ */
5
+ /** @jsx jsx */
6
+ import { forwardRef, useCallback, useContext } from 'react';
7
+
8
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
+ import { css, jsx } from '@emotion/react';
3
10
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
4
11
  import noop from '@atlaskit/ds-lib/noop';
5
12
  import InteractionContext from '@atlaskit/interaction-context';
6
- import { xcss } from '../xcss/xcss';
7
- import Box from './box';
8
- // TODO: Duplicated FocusRing styles due to lack of `xcss` support
9
- // and to prevent additional dependency
10
- const baseFocusRingStyles = {
11
- outlineColor: 'color.border.focused',
12
- outlineWidth: 'border.width.outline',
13
- outlineStyle: 'solid',
14
- outlineOffset: 'space.025'
15
- };
16
- const focusRingStyles = xcss({
17
- // Focus styles used when :focus-visible isn't supported
18
- ':focus': baseFocusRingStyles,
19
- // Remove default focus styles for mouse interactions if :focus-visible is supported
20
- ':focus:not(:focus-visible)': {
13
+ import { backgroundColorStylesMap, borderColorMap, borderWidthMap, paddingStylesMap, positiveSpaceMap } from '../xcss/style-maps.partial';
14
+ import { parseXcss } from '../xcss/xcss';
15
+ // This duplicates FocusRing styles from `@atlaskit/focus-ring`.
16
+ const focusRingStyles = css({
17
+ '&:focus, &:focus-visible': {
18
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
19
+ outlineColor: borderColorMap['color.border.focused'],
20
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
21
+ outlineOffset: positiveSpaceMap['space.025'],
22
+ outlineStyle: 'solid',
23
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
24
+ outlineWidth: borderWidthMap['border.width.outline']
25
+ },
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
27
+ '&:focus:not(:focus-visible)': {
21
28
  outline: 'none'
22
29
  },
23
- ':focus-visible': baseFocusRingStyles,
24
30
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
25
- ':focus-visible': {
31
+ '&:focus-visible': {
26
32
  outline: '1px solid'
27
33
  }
28
34
  }
29
35
  });
36
+ const baseStyles = css({
37
+ boxSizing: 'border-box',
38
+ appearance: 'none',
39
+ border: 'none'
40
+ });
41
+ const enabledStyles = css({
42
+ cursor: 'pointer'
43
+ });
44
+ const disabledStyles = css({
45
+ cursor: 'not-allowed'
46
+ });
30
47
 
31
48
  /**
32
49
  * __Pressable__
@@ -49,12 +66,13 @@ const Pressable = /*#__PURE__*/forwardRef(({
49
66
  paddingInlineEnd,
50
67
  isDisabled,
51
68
  type = 'button',
52
- testId,
53
- xcss: xcssStyles,
54
69
  onClick: providedOnClick = noop,
55
70
  interactionName,
56
71
  componentName,
57
72
  analyticsContext,
73
+ style,
74
+ testId,
75
+ xcss,
58
76
  ...htmlAttributes
59
77
  }, ref) => {
60
78
  const interactionContext = useContext(InteractionContext);
@@ -67,39 +85,54 @@ const Pressable = /*#__PURE__*/forwardRef(({
67
85
  action: 'clicked',
68
86
  componentName: componentName || 'Pressable',
69
87
  packageName: "@atlaskit/primitives",
70
- packageVersion: "8.2.0",
88
+ packageVersion: "9.0.0",
71
89
  analyticsData: analyticsContext,
72
90
  actionSubject: 'button'
73
91
  });
74
92
 
75
- // Combine default styles with supplied styles. XCSS does not support deep nested arrays
76
- let styles = [xcss({
77
- cursor: isDisabled ? 'not-allowed' : 'pointer'
78
- }), focusRingStyles];
79
-
80
- // We're type coercing this as Compiled styles in an array isn't supported by the types
81
- // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
82
- // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
83
- styles = Array.isArray(xcssStyles) ? [...styles, ...xcssStyles] : [...styles, xcssStyles];
84
- return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
85
- // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
86
- as: "button",
87
- ref: ref,
88
- testId: testId,
89
- type: type,
90
- onClick: onClick,
91
- backgroundColor: backgroundColor,
92
- padding: padding,
93
- paddingBlock: paddingBlock,
94
- paddingBlockStart: paddingBlockStart,
95
- paddingBlockEnd: paddingBlockEnd,
96
- paddingInline: paddingInline,
97
- paddingInlineStart: paddingInlineStart,
98
- paddingInlineEnd: paddingInlineEnd
99
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
100
- ,
101
- xcss: styles,
102
- disabled: isDisabled
103
- }), children);
93
+ // This is to remove className from safeHtmlAttributes
94
+ // @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
95
+ const {
96
+ className: _spreadClass,
97
+ ...safeHtmlAttributes
98
+ } = htmlAttributes;
99
+ const resolvedStyles = parseXcss(xcss);
100
+ return (
101
+ // eslint-disable-next-line @atlaskit/design-system/no-html-button
102
+ jsx("button", _extends({
103
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
104
+ style: style,
105
+ ref: ref
106
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
107
+ ,
108
+ className: resolvedStyles.static
109
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
110
+ }, safeHtmlAttributes, {
111
+ // eslint-disable-next-line react/button-has-type
112
+ type: type,
113
+ onClick: onClick,
114
+ disabled: isDisabled,
115
+ css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
116
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
117
+ backgroundColor && backgroundColorStylesMap[backgroundColor],
118
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
119
+ padding && paddingStylesMap.padding[padding],
120
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
121
+ paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
122
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
123
+ paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
124
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
125
+ paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
126
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
127
+ paddingInline && paddingStylesMap.paddingInline[paddingInline],
128
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
129
+ paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
131
+ paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
132
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
133
+ resolvedStyles.emotion],
134
+ "data-testid": testId
135
+ }), children)
136
+ );
104
137
  });
105
138
  export default Pressable;
package/dist/esm/components/anchor.js CHANGED
@@ -1,9 +1,16 @@
1
1
  import _extends from "@babel/runtime/helpers/extends";
2
2
  import _typeof from "@babel/runtime/helpers/typeof";
3
- import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
4
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
5
- var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby"];
6
- import React, { forwardRef, useCallback, useContext } from 'react';
4
+ var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
5
+ _excluded2 = ["className"];
6
+ /**
7
+ * @jsxRuntime classic
8
+ */
9
+ /** @jsx jsx */
10
+ import { forwardRef, useCallback, useContext } from 'react';
11
+
12
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
13
+ import { css, jsx } from '@emotion/react';
7
14
  import { uid } from 'react-uid';
8
15
  import invariant from 'tiny-invariant';
9
16
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
@@ -11,36 +18,46 @@ import { useRouterLink } from '@atlaskit/app-provider';
11
18
  import noop from '@atlaskit/ds-lib/noop';
12
19
  import InteractionContext from '@atlaskit/interaction-context';
13
20
  import VisuallyHidden from '@atlaskit/visually-hidden';
14
- import { xcss } from '../xcss/xcss';
15
- import Box from './box';
16
- // TODO: Duplicated FocusRing styles due to lack of `xcss` support
17
- // and to prevent additional dependency
18
- var baseFocusRingStyles = {
19
- outlineColor: 'color.border.focused',
20
- outlineWidth: 'border.width.outline',
21
- outlineStyle: 'solid',
22
- outlineOffset: 'space.025'
23
- };
24
- var defaultStyles = xcss({
25
- textDecoration: 'underline'
26
- });
27
- var focusRingStyles = xcss({
28
- // Focus styles used when :focus-visible isn't supported
29
- ':focus': baseFocusRingStyles,
30
- // Remove default focus styles for mouse interactions if :focus-visible is supported
31
- ':focus:not(:focus-visible)': {
21
+ import { backgroundColorStylesMap, borderColorMap, borderWidthMap, paddingStylesMap, positiveSpaceMap } from '../xcss/style-maps.partial';
22
+ import { parseXcss } from '../xcss/xcss';
23
+ // TODO: duplicates FocusRing styles from `@atlaskit/focus-ring`.
24
+ var focusRingStyles = css({
25
+ '&:focus, &:focus-visible': {
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
27
+ outlineColor: borderColorMap['color.border.focused'],
28
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
29
+ outlineOffset: positiveSpaceMap['space.025'],
30
+ outlineStyle: 'solid',
31
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
32
+ outlineWidth: borderWidthMap['border.width.outline']
33
+ },
34
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
35
+ '&:focus:not(:focus-visible)': {
32
36
  outline: 'none'
33
37
  },
34
- ':focus-visible': baseFocusRingStyles,
35
38
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
36
- ':focus-visible': {
39
+ '&:focus-visible': {
37
40
  outline: '1px solid'
38
41
  }
39
42
  }
40
43
  });
44
+ var baseStyles = css({
45
+ boxSizing: 'border-box',
46
+ textDecoration: 'underline'
47
+ });
41
48
  var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
42
49
  var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
43
50
  var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
51
+
52
+ /**
53
+ * __Anchor__
54
+ *
55
+ * A primitive for building custom anchor links.
56
+ *
57
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
58
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
59
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
60
+ */
44
61
  var AnchorNoRef = function AnchorNoRef(_ref, ref) {
45
62
  var href = _ref.href,
46
63
  children = _ref.children,
@@ -52,9 +69,6 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
52
69
  paddingInline = _ref.paddingInline,
53
70
  paddingInlineStart = _ref.paddingInlineStart,
54
71
  paddingInlineEnd = _ref.paddingInlineEnd,
55
- testId = _ref.testId,
56
- xcssStyles = _ref.xcss,
57
- target = _ref.target,
58
72
  _ref$onClick = _ref.onClick,
59
73
  providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
60
74
  interactionName = _ref.interactionName,
@@ -62,12 +76,17 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
62
76
  analyticsContext = _ref.analyticsContext,
63
77
  ariaLabel = _ref['aria-label'],
64
78
  ariaLabelledBy = _ref['aria-labelledby'],
79
+ style = _ref.style,
80
+ target = _ref.target,
81
+ testId = _ref.testId,
82
+ xcss = _ref.xcss,
65
83
  htmlAttributes = _objectWithoutProperties(_ref, _excluded);
66
84
  var interactionContext = useContext(InteractionContext);
67
85
  var handleClick = useCallback(function (e, analyticsEvent) {
68
86
  interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
69
87
  providedOnClick(e, analyticsEvent);
70
88
  }, [providedOnClick, interactionContext, interactionName]);
89
+
71
90
  // TODO: Use React 18's useId() hook when we update.
72
91
  // eslint-disable-next-line @repo/internal/react/disallow-unstable-values
73
92
  var opensNewWindowLabelId = uid({
@@ -78,16 +97,17 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
78
97
  action: 'clicked',
79
98
  componentName: componentName || 'Anchor',
80
99
  packageName: "@atlaskit/primitives",
81
- packageVersion: "8.2.0",
100
+ packageVersion: "9.0.0",
82
101
  analyticsData: analyticsContext,
83
102
  actionSubject: 'link'
84
103
  });
85
- var RouterLink = useRouterLink();
86
104
 
87
- // We're type coercing this as Compiled styles in an array isn't supported by the types
88
- // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
89
- // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
90
- var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat(_toConsumableArray(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
105
+ // This is to remove className from safeHtmlAttributes
106
+ // @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
107
+ var _spreadClass = htmlAttributes.className,
108
+ safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
109
+ var resolvedStyles = parseXcss(xcss);
110
+ var RouterLink = useRouterLink();
91
111
  var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
92
112
  var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
93
113
 
@@ -101,31 +121,45 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
101
121
  var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
102
122
  var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && _typeof(href) === 'object';
103
123
  invariant(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
104
- return /*#__PURE__*/React.createElement(Box
105
- // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
106
- , _extends({}, htmlAttributes, {
107
- // @ts-expect-error (TODO: Box doesn't allow `as` components)
108
- as: isRouterLink ? RouterLink : 'a',
109
- ref: ref,
110
- testId: testId,
111
- "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
124
+ var Component = isRouterLink ? RouterLink : 'a';
125
+ return jsx(Component
126
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
127
+ , _extends({
128
+ style: style,
129
+ ref: ref
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
131
+ ,
132
+ className: resolvedStyles.static
133
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
134
+ }, safeHtmlAttributes, {
135
+ // @ts-expect-error
112
136
  href: !isRouterLink && typeof href !== 'string' ? undefined : href,
113
137
  target: target,
114
- backgroundColor: backgroundColor,
115
- padding: padding,
116
- paddingBlock: paddingBlock,
117
- paddingBlockStart: paddingBlockStart,
118
- paddingBlockEnd: paddingBlockEnd,
119
- paddingInline: paddingInline,
120
- paddingInlineStart: paddingInlineStart,
121
- paddingInlineEnd: paddingInlineEnd,
122
138
  onClick: onClick,
123
139
  "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel,
124
- "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy
125
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
126
- ,
127
- xcss: styles
128
- }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && /*#__PURE__*/React.createElement(VisuallyHidden, {
140
+ "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
141
+ css: [baseStyles, focusRingStyles,
142
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
143
+ backgroundColor && backgroundColorStylesMap[backgroundColor],
144
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
145
+ padding && paddingStylesMap.padding[padding],
146
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
147
+ paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
148
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
149
+ paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
150
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
151
+ paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
152
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
153
+ paddingInline && paddingStylesMap.paddingInline[paddingInline],
154
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
155
+ paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
156
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
157
+ paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
158
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
159
+ resolvedStyles.emotion],
160
+ "data-testid": testId,
161
+ "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
162
+ }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
129
163
  id: opensNewWindowLabelId
130
164
  }, OPENS_NEW_WINDOW_LABEL));
131
165
  };
package/dist/esm/components/pressable.js CHANGED
@@ -1,35 +1,52 @@
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", "testId", "xcss", "onClick", "interactionName", "componentName", "analyticsContext"];
5
- import React, { forwardRef, useCallback, useContext } from 'react';
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 { xcss } from '../xcss/xcss';
10
- import Box from './box';
11
- // TODO: Duplicated FocusRing styles due to lack of `xcss` support
12
- // and to prevent additional dependency
13
- var baseFocusRingStyles = {
14
- outlineColor: 'color.border.focused',
15
- outlineWidth: 'border.width.outline',
16
- outlineStyle: 'solid',
17
- outlineOffset: 'space.025'
18
- };
19
- var focusRingStyles = xcss({
20
- // Focus styles used when :focus-visible isn't supported
21
- ':focus': baseFocusRingStyles,
22
- // Remove default focus styles for mouse interactions if :focus-visible is supported
23
- ':focus:not(:focus-visible)': {
16
+ import { backgroundColorStylesMap, borderColorMap, borderWidthMap, paddingStylesMap, positiveSpaceMap } from '../xcss/style-maps.partial';
17
+ import { parseXcss } from '../xcss/xcss';
18
+ // This duplicates FocusRing styles from `@atlaskit/focus-ring`.
19
+ var focusRingStyles = css({
20
+ '&:focus, &:focus-visible': {
21
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
22
+ outlineColor: borderColorMap['color.border.focused'],
23
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
24
+ outlineOffset: positiveSpaceMap['space.025'],
25
+ outlineStyle: 'solid',
26
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
27
+ outlineWidth: borderWidthMap['border.width.outline']
28
+ },
29
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
30
+ '&:focus:not(:focus-visible)': {
24
31
  outline: 'none'
25
32
  },
26
- ':focus-visible': baseFocusRingStyles,
27
33
  '@media screen and (forced-colors: active), screen and (-ms-high-contrast: active)': {
28
- ':focus-visible': {
34
+ '&:focus-visible': {
29
35
  outline: '1px solid'
30
36
  }
31
37
  }
32
38
  });
39
+ var baseStyles = css({
40
+ boxSizing: 'border-box',
41
+ appearance: 'none',
42
+ border: 'none'
43
+ });
44
+ var enabledStyles = css({
45
+ cursor: 'pointer'
46
+ });
47
+ var disabledStyles = css({
48
+ cursor: 'not-allowed'
49
+ });
33
50
 
34
51
  /**
35
52
  * __Pressable__
@@ -53,13 +70,14 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
53
70
  isDisabled = _ref.isDisabled,
54
71
  _ref$type = _ref.type,
55
72
  type = _ref$type === void 0 ? 'button' : _ref$type,
56
- testId = _ref.testId,
57
- xcssStyles = _ref.xcss,
58
73
  _ref$onClick = _ref.onClick,
59
74
  providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
60
75
  interactionName = _ref.interactionName,
61
76
  componentName = _ref.componentName,
62
77
  analyticsContext = _ref.analyticsContext,
78
+ style = _ref.style,
79
+ testId = _ref.testId,
80
+ xcss = _ref.xcss,
63
81
  htmlAttributes = _objectWithoutProperties(_ref, _excluded);
64
82
  var interactionContext = useContext(InteractionContext);
65
83
  var handleClick = useCallback(function (e, analyticsEvent) {
@@ -71,39 +89,52 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
71
89
  action: 'clicked',
72
90
  componentName: componentName || 'Pressable',
73
91
  packageName: "@atlaskit/primitives",
74
- packageVersion: "8.2.0",
92
+ packageVersion: "9.0.0",
75
93
  analyticsData: analyticsContext,
76
94
  actionSubject: 'button'
77
95
  });
78
96
 
79
- // Combine default styles with supplied styles. XCSS does not support deep nested arrays
80
- var styles = [xcss({
81
- cursor: isDisabled ? 'not-allowed' : 'pointer'
82
- }), focusRingStyles];
83
-
84
- // We're type coercing this as Compiled styles in an array isn't supported by the types
85
- // But the runtime accepts it none-the-wiser. We can remove this entire block and replace
86
- // it with cx(defaultStyles, focusRingStyles, xcssStyles) when we've moved away from Emotion.
87
- styles = Array.isArray(xcssStyles) ? [].concat(_toConsumableArray(styles), _toConsumableArray(xcssStyles)) : [].concat(_toConsumableArray(styles), [xcssStyles]);
88
- return /*#__PURE__*/React.createElement(Box, _extends({}, htmlAttributes, {
89
- // @ts-expect-error - `as` is not compatible with Box. Pressable will be rewritten to diverge from Box soon.
90
- as: "button",
91
- ref: ref,
92
- testId: testId,
93
- type: type,
94
- onClick: onClick,
95
- backgroundColor: backgroundColor,
96
- padding: padding,
97
- paddingBlock: paddingBlock,
98
- paddingBlockStart: paddingBlockStart,
99
- paddingBlockEnd: paddingBlockEnd,
100
- paddingInline: paddingInline,
101
- paddingInlineStart: paddingInlineStart,
102
- paddingInlineEnd: paddingInlineEnd
103
- // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
104
- ,
105
- xcss: styles,
106
- disabled: isDisabled
107
- }), children);
97
+ // This is to remove className from safeHtmlAttributes
98
+ // @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
99
+ var _spreadClass = htmlAttributes.className,
100
+ safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
101
+ var resolvedStyles = parseXcss(xcss);
102
+ return (
103
+ // eslint-disable-next-line @atlaskit/design-system/no-html-button
104
+ jsx("button", _extends({
105
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
106
+ style: style,
107
+ ref: ref
108
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
109
+ ,
110
+ className: resolvedStyles.static
111
+ // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
112
+ }, safeHtmlAttributes, {
113
+ // eslint-disable-next-line react/button-has-type
114
+ type: type,
115
+ onClick: onClick,
116
+ disabled: isDisabled,
117
+ css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
118
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
119
+ backgroundColor && backgroundColorStylesMap[backgroundColor],
120
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
121
+ padding && paddingStylesMap.padding[padding],
122
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
123
+ paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
124
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
125
+ paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
126
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
127
+ paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
128
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
129
+ paddingInline && paddingStylesMap.paddingInline[paddingInline],
130
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
131
+ paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
132
+ // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
133
+ paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
134
+ // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
135
+ resolvedStyles.emotion],
136
+ "data-testid": testId
137
+ }), children)
138
+ );
108
139
  });
109
140
  export default Pressable;