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