@atlaskit/primitives 14.4.0 → 14.5.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +10 -0
- package/constellation/anchor/examples.mdx +1 -0
- package/dist/cjs/compiled/components/anchor.js +1 -1
- package/dist/cjs/compiled/components/box.js +0 -1
- package/dist/cjs/compiled/components/pressable.js +1 -3
- package/dist/cjs/compiled/components/text.js +1 -3
- package/dist/cjs/components/anchor.js +2 -4
- package/dist/cjs/components/bleed.js +1 -3
- package/dist/cjs/components/box.js +1 -4
- package/dist/cjs/components/flex.js +1 -3
- package/dist/cjs/components/grid.js +1 -3
- package/dist/cjs/components/inline.js +0 -1
- package/dist/cjs/components/pressable.js +32 -38
- package/dist/cjs/components/stack.js +0 -1
- package/dist/cjs/xcss/xcss.js +1 -2
- package/dist/es2019/compiled/components/anchor.js +1 -1
- package/dist/es2019/compiled/components/box.js +0 -1
- package/dist/es2019/compiled/components/pressable.js +1 -3
- package/dist/es2019/compiled/components/text.js +1 -3
- package/dist/es2019/components/anchor.js +2 -4
- package/dist/es2019/components/bleed.js +1 -3
- package/dist/es2019/components/box.js +1 -4
- package/dist/es2019/components/flex.js +1 -3
- package/dist/es2019/components/grid.js +1 -3
- package/dist/es2019/components/inline.js +0 -1
- package/dist/es2019/components/pressable.js +32 -38
- package/dist/es2019/components/stack.js +0 -1
- package/dist/es2019/responsive/build-media-query-css.js +1 -1
- package/dist/es2019/xcss/xcss.js +0 -4
- package/dist/esm/compiled/components/anchor.js +1 -1
- package/dist/esm/compiled/components/box.js +0 -1
- package/dist/esm/compiled/components/pressable.js +1 -3
- package/dist/esm/compiled/components/text.js +1 -3
- package/dist/esm/components/anchor.js +2 -4
- package/dist/esm/components/bleed.js +1 -3
- package/dist/esm/components/box.js +1 -4
- package/dist/esm/components/flex.js +1 -3
- package/dist/esm/components/grid.js +1 -3
- package/dist/esm/components/inline.js +0 -1
- package/dist/esm/components/pressable.js +32 -38
- package/dist/esm/components/stack.js +0 -1
- package/dist/esm/xcss/xcss.js +0 -4
- package/dist/types/compiled/components/box.d.ts +8 -4
- package/dist/types/components/box.d.ts +5 -1
- package/dist/types-ts4.5/compiled/components/box.d.ts +8 -4
- package/dist/types-ts4.5/components/box.d.ts +5 -1
- package/package.json +12 -12
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,15 @@
|
|
|
1
1
|
# @atlaskit/primitives
|
|
2
2
|
|
|
3
|
+
## 14.5.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#148288](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148288)
|
|
8
|
+
[`c31c2fb751ae5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c31c2fb751ae5) -
|
|
9
|
+
Add `backgroundColor` back to `props.style` and `props.xcss` for `Box` from
|
|
10
|
+
`@atlaskit/primitives/compiled` to have a more iterative migration, but we still prefer the
|
|
11
|
+
`props.backgroundColor` value.
|
|
12
|
+
|
|
3
13
|
## 14.4.0
|
|
4
14
|
|
|
5
15
|
### Minor Changes
|
|
@@ -98,6 +98,7 @@ Anchor will only render a router link if:
|
|
|
98
98
|
Component={AnchorRouterLinkConfiguration}
|
|
99
99
|
packageName="@atlaskit/primitives/anchor"
|
|
100
100
|
appearance="source-only"
|
|
101
|
+
isCodeSandboxDisabled
|
|
101
102
|
/>
|
|
102
103
|
|
|
103
104
|
<Snippet name="primitives-event-tracking-header" variables={{ componentName: 'anchor' }} />
|
|
@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
70
70
|
action: 'clicked',
|
|
71
71
|
componentName: componentName || 'Anchor',
|
|
72
72
|
packageName: "@atlaskit/primitives",
|
|
73
|
-
packageVersion: "14.
|
|
73
|
+
packageVersion: "14.5.0",
|
|
74
74
|
analyticsData: analyticsContext,
|
|
75
75
|
actionSubject: 'link'
|
|
76
76
|
});
|
|
@@ -345,7 +345,6 @@ var Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
345
345
|
,
|
|
346
346
|
ref: ref,
|
|
347
347
|
className: (0, _runtime.ax)(["_19itglyw _vchhusvi _r06hglyw", backgroundColor && backgroundColorMap[backgroundColor], backgroundColor && isSurfaceToken(backgroundColor) && setSurfaceTokenMap[backgroundColor], paddingBlockStart && paddingBlockStartMap[paddingBlockStart], paddingBlockEnd && paddingBlockEndMap[paddingBlockEnd], paddingInlineStart && paddingInlineStartMap[paddingInlineStart], paddingInlineEnd && paddingInlineEndMap[paddingInlineEnd], xcss])
|
|
348
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
349
348
|
}, safeHtmlAttributes, {
|
|
350
349
|
"data-testid": testId
|
|
351
350
|
}), children);
|
|
@@ -60,7 +60,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
60
60
|
action: 'clicked',
|
|
61
61
|
componentName: componentName || 'Pressable',
|
|
62
62
|
packageName: "@atlaskit/primitives",
|
|
63
|
-
packageVersion: "14.
|
|
63
|
+
packageVersion: "14.5.0",
|
|
64
64
|
analyticsData: analyticsContext,
|
|
65
65
|
actionSubject: 'button'
|
|
66
66
|
});
|
|
@@ -76,9 +76,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
76
76
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
|
|
77
77
|
,
|
|
78
78
|
style: style
|
|
79
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
80
79
|
}, safeHtmlAttributes, {
|
|
81
|
-
// eslint-disable-next-line react/button-has-type
|
|
82
80
|
type: type,
|
|
83
81
|
onClick: onClick,
|
|
84
82
|
disabled: isDisabled,
|
|
@@ -155,9 +155,7 @@ var Text = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
155
155
|
size = 'medium';
|
|
156
156
|
}
|
|
157
157
|
var component = /*#__PURE__*/React.createElement(Component, {
|
|
158
|
-
id: id
|
|
159
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
160
|
-
,
|
|
158
|
+
id: id,
|
|
161
159
|
className: (0, _runtime.ax)([styles.root, size && fontSizeMap[size], color && textColorMap[color], maxLines && styles.truncation, maxLines === 1 && styles.breakAll, align && styles["textAlign.".concat(align)], weight && fontWeightMap[weight], Component === 'em' && styles['as.em'], Component === 'strong' && styles['as.strong'], xcss]),
|
|
162
160
|
style: {
|
|
163
161
|
WebkitLineClamp: maxLines
|
|
@@ -100,7 +100,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
100
100
|
action: 'clicked',
|
|
101
101
|
componentName: componentName || 'Anchor',
|
|
102
102
|
packageName: "@atlaskit/primitives",
|
|
103
|
-
packageVersion: "14.
|
|
103
|
+
packageVersion: "14.5.0",
|
|
104
104
|
analyticsData: analyticsContext,
|
|
105
105
|
actionSubject: 'link'
|
|
106
106
|
});
|
|
@@ -158,9 +158,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
158
158
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
159
159
|
paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
160
160
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
161
|
-
paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
|
|
162
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
163
|
-
resolvedStyles.emotion],
|
|
161
|
+
paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
164
162
|
"data-testid": testId,
|
|
165
163
|
"data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
|
|
166
164
|
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && (0, _react2.jsx)(_visuallyHidden.default, {
|
|
@@ -72,9 +72,7 @@ var Bleed = /*#__PURE__*/_react.default.memo(function (_ref) {
|
|
|
72
72
|
return (0, _react2.jsx)("div", {
|
|
73
73
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
74
74
|
className: resolvedStyles.static,
|
|
75
|
-
css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
|
|
76
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
77
|
-
resolvedStyles.emotion],
|
|
75
|
+
css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all], resolvedStyles.emotion],
|
|
78
76
|
"data-testid": testId
|
|
79
77
|
}, children);
|
|
80
78
|
});
|
|
@@ -67,7 +67,6 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
|
|
|
67
67
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
68
68
|
,
|
|
69
69
|
className: resolvedStyles.static
|
|
70
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
71
70
|
}, safeHtmlAttributes, {
|
|
72
71
|
css: [baseStyles,
|
|
73
72
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
@@ -87,9 +86,7 @@ var Box = exports.Box = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
|
|
|
87
86
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
88
87
|
paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
89
88
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
90
|
-
paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
|
|
91
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
92
|
-
resolvedStyles.emotion],
|
|
89
|
+
paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
93
90
|
"data-testid": testId
|
|
94
91
|
}), children);
|
|
95
92
|
return backgroundColor ? (0, _react2.jsx)(_surfaceProvider.SurfaceContext.Provider, {
|
|
@@ -122,9 +122,7 @@ var Flex = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
122
122
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
123
123
|
columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap],
|
|
124
124
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
125
|
-
rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
|
|
126
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
127
|
-
resolvedStyles.emotion],
|
|
125
|
+
rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap], resolvedStyles.emotion],
|
|
128
126
|
"data-testid": testId,
|
|
129
127
|
ref: ref
|
|
130
128
|
}, children);
|
|
@@ -187,9 +187,7 @@ var Grid = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(fu
|
|
|
187
187
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
188
188
|
columnGap && _styleMaps.spaceStylesMap.columnGap[columnGap],
|
|
189
189
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
190
|
-
rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
|
|
191
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
192
|
-
resolvedStyles.emotion],
|
|
190
|
+
rowGap && _styleMaps.spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow], resolvedStyles.emotion],
|
|
193
191
|
"data-testid": testId,
|
|
194
192
|
ref: ref
|
|
195
193
|
}, children);
|
|
@@ -13,7 +13,6 @@ var _xcss = require("../xcss/xcss");
|
|
|
13
13
|
var _flex = _interopRequireDefault(require("./flex"));
|
|
14
14
|
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); }
|
|
15
15
|
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 && {}.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; }
|
|
16
|
-
/* eslint-disable @repo/internal/styles/no-exported-styles */
|
|
17
16
|
/**
|
|
18
17
|
* @jsxRuntime classic
|
|
19
18
|
* @jsx jsx
|
|
@@ -95,7 +95,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
95
95
|
action: 'clicked',
|
|
96
96
|
componentName: componentName || 'Pressable',
|
|
97
97
|
packageName: "@atlaskit/primitives",
|
|
98
|
-
packageVersion: "14.
|
|
98
|
+
packageVersion: "14.5.0",
|
|
99
99
|
analyticsData: analyticsContext,
|
|
100
100
|
actionSubject: 'button'
|
|
101
101
|
});
|
|
@@ -105,42 +105,36 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
|
|
|
105
105
|
var _spreadClass = htmlAttributes.className,
|
|
106
106
|
safeHtmlAttributes = (0, _objectWithoutProperties2.default)(htmlAttributes, _excluded2);
|
|
107
107
|
var resolvedStyles = (0, _xcss.parseXcss)(xcss);
|
|
108
|
-
return (
|
|
109
|
-
// eslint-disable-next-line @atlaskit/
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
|
|
140
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
141
|
-
resolvedStyles.emotion],
|
|
142
|
-
"data-testid": testId
|
|
143
|
-
}), children)
|
|
144
|
-
);
|
|
108
|
+
return (0, _react2.jsx)("button", (0, _extends2.default)({
|
|
109
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
110
|
+
style: style,
|
|
111
|
+
ref: ref
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
113
|
+
,
|
|
114
|
+
className: resolvedStyles.static
|
|
115
|
+
}, safeHtmlAttributes, {
|
|
116
|
+
// eslint-disable-next-line react/button-has-type
|
|
117
|
+
type: type,
|
|
118
|
+
onClick: onClick,
|
|
119
|
+
disabled: isDisabled,
|
|
120
|
+
css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
122
|
+
backgroundColor && _styleMaps.backgroundColorStylesMap[backgroundColor],
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
124
|
+
padding && _styleMaps.paddingStylesMap.padding[padding],
|
|
125
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
126
|
+
paddingBlock && _styleMaps.paddingStylesMap.paddingBlock[paddingBlock],
|
|
127
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
128
|
+
paddingBlockStart && _styleMaps.paddingStylesMap.paddingBlockStart[paddingBlockStart],
|
|
129
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
130
|
+
paddingBlockEnd && _styleMaps.paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
|
|
131
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
132
|
+
paddingInline && _styleMaps.paddingStylesMap.paddingInline[paddingInline],
|
|
133
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
134
|
+
paddingInlineStart && _styleMaps.paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
135
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
136
|
+
paddingInlineEnd && _styleMaps.paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
137
|
+
"data-testid": testId
|
|
138
|
+
}), children);
|
|
145
139
|
});
|
|
146
140
|
var _default = exports.default = Pressable;
|
|
@@ -10,7 +10,6 @@ var _react = require("react");
|
|
|
10
10
|
var _react2 = require("@emotion/react");
|
|
11
11
|
var _xcss = require("../xcss/xcss");
|
|
12
12
|
var _flex = _interopRequireDefault(require("./flex"));
|
|
13
|
-
/* eslint-disable @repo/internal/styles/no-exported-styles */
|
|
14
13
|
/**
|
|
15
14
|
* @jsxRuntime classic
|
|
16
15
|
* @jsx jsx
|
package/dist/cjs/xcss/xcss.js
CHANGED
|
@@ -14,8 +14,7 @@ var _react = require("@emotion/react");
|
|
|
14
14
|
var _styleMaps = require("./style-maps.partial");
|
|
15
15
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
16
16
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
17
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
18
|
-
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
17
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
19
18
|
var tokensMap = exports.tokensMap = {
|
|
20
19
|
backgroundColor: _styleMaps.backgroundColorMap,
|
|
21
20
|
blockSize: _styleMaps.dimensionMap,
|
|
@@ -329,7 +329,6 @@ const Box = /*#__PURE__*/forwardRef(({
|
|
|
329
329
|
,
|
|
330
330
|
ref: ref,
|
|
331
331
|
className: ax(["_19itglyw _vchhusvi _r06hglyw", backgroundColor && backgroundColorMap[backgroundColor], backgroundColor && isSurfaceToken(backgroundColor) && setSurfaceTokenMap[backgroundColor], paddingBlockStart && paddingBlockStartMap[paddingBlockStart], paddingBlockEnd && paddingBlockEndMap[paddingBlockEnd], paddingInlineStart && paddingInlineStartMap[paddingInlineStart], paddingInlineEnd && paddingInlineEndMap[paddingInlineEnd], xcss])
|
|
332
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
333
332
|
}, safeHtmlAttributes, {
|
|
334
333
|
"data-testid": testId
|
|
335
334
|
}), children);
|
|
@@ -46,7 +46,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
46
46
|
action: 'clicked',
|
|
47
47
|
componentName: componentName || 'Pressable',
|
|
48
48
|
packageName: "@atlaskit/primitives",
|
|
49
|
-
packageVersion: "14.
|
|
49
|
+
packageVersion: "14.5.0",
|
|
50
50
|
analyticsData: analyticsContext,
|
|
51
51
|
actionSubject: 'button'
|
|
52
52
|
});
|
|
@@ -64,9 +64,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
64
64
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
|
|
65
65
|
,
|
|
66
66
|
style: style
|
|
67
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
68
67
|
}, safeHtmlAttributes, {
|
|
69
|
-
// eslint-disable-next-line react/button-has-type
|
|
70
68
|
type: type,
|
|
71
69
|
onClick: onClick,
|
|
72
70
|
disabled: isDisabled,
|
|
@@ -145,9 +145,7 @@ const Text = /*#__PURE__*/forwardRef(({
|
|
|
145
145
|
size = 'medium';
|
|
146
146
|
}
|
|
147
147
|
const component = /*#__PURE__*/React.createElement(Component, {
|
|
148
|
-
id: id
|
|
149
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
150
|
-
,
|
|
148
|
+
id: id,
|
|
151
149
|
className: ax([styles.root, size && fontSizeMap[size], color && textColorMap[color], maxLines && styles.truncation, maxLines === 1 && styles.breakAll, align && styles[`textAlign.${align}`], weight && fontWeightMap[weight], Component === 'em' && styles['as.em'], Component === 'strong' && styles['as.strong'], xcss]),
|
|
152
150
|
style: {
|
|
153
151
|
WebkitLineClamp: maxLines
|
|
@@ -90,7 +90,7 @@ const AnchorNoRef = ({
|
|
|
90
90
|
action: 'clicked',
|
|
91
91
|
componentName: componentName || 'Anchor',
|
|
92
92
|
packageName: "@atlaskit/primitives",
|
|
93
|
-
packageVersion: "14.
|
|
93
|
+
packageVersion: "14.5.0",
|
|
94
94
|
analyticsData: analyticsContext,
|
|
95
95
|
actionSubject: 'link'
|
|
96
96
|
});
|
|
@@ -151,9 +151,7 @@ const AnchorNoRef = ({
|
|
|
151
151
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
152
152
|
paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
153
153
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
154
|
-
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
|
|
155
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
156
|
-
resolvedStyles.emotion],
|
|
154
|
+
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
157
155
|
"data-testid": testId,
|
|
158
156
|
"data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
|
|
159
157
|
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
|
|
@@ -65,9 +65,7 @@ const Bleed = /*#__PURE__*/React.memo(({
|
|
|
65
65
|
return jsx("div", {
|
|
66
66
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
67
67
|
className: resolvedStyles.static,
|
|
68
|
-
css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
|
|
69
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
70
|
-
resolvedStyles.emotion],
|
|
68
|
+
css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all], resolvedStyles.emotion],
|
|
71
69
|
"data-testid": testId
|
|
72
70
|
}, children);
|
|
73
71
|
});
|
|
@@ -61,7 +61,6 @@ export const Box = /*#__PURE__*/forwardRef(({
|
|
|
61
61
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
62
62
|
,
|
|
63
63
|
className: resolvedStyles.static
|
|
64
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
65
64
|
}, safeHtmlAttributes, {
|
|
66
65
|
css: [baseStyles,
|
|
67
66
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
@@ -81,9 +80,7 @@ export const Box = /*#__PURE__*/forwardRef(({
|
|
|
81
80
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
82
81
|
paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
83
82
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
84
|
-
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
|
|
85
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
86
|
-
resolvedStyles.emotion],
|
|
83
|
+
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
87
84
|
"data-testid": testId
|
|
88
85
|
}), children);
|
|
89
86
|
return backgroundColor ? jsx(SurfaceContext.Provider, {
|
|
@@ -115,9 +115,7 @@ const Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
115
115
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
116
116
|
columnGap && spaceStylesMap.columnGap[columnGap],
|
|
117
117
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
118
|
-
rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
|
|
119
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
120
|
-
resolvedStyles.emotion],
|
|
118
|
+
rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap], resolvedStyles.emotion],
|
|
121
119
|
"data-testid": testId,
|
|
122
120
|
ref: ref
|
|
123
121
|
}, children);
|
|
@@ -179,9 +179,7 @@ const Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(({
|
|
|
179
179
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
180
180
|
columnGap && spaceStylesMap.columnGap[columnGap],
|
|
181
181
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
182
|
-
rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
|
|
183
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
184
|
-
resolvedStyles.emotion],
|
|
182
|
+
rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow], resolvedStyles.emotion],
|
|
185
183
|
"data-testid": testId,
|
|
186
184
|
ref: ref
|
|
187
185
|
}, children);
|
|
@@ -85,7 +85,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
85
85
|
action: 'clicked',
|
|
86
86
|
componentName: componentName || 'Pressable',
|
|
87
87
|
packageName: "@atlaskit/primitives",
|
|
88
|
-
packageVersion: "14.
|
|
88
|
+
packageVersion: "14.5.0",
|
|
89
89
|
analyticsData: analyticsContext,
|
|
90
90
|
actionSubject: 'button'
|
|
91
91
|
});
|
|
@@ -97,42 +97,36 @@ const Pressable = /*#__PURE__*/forwardRef(({
|
|
|
97
97
|
...safeHtmlAttributes
|
|
98
98
|
} = htmlAttributes;
|
|
99
99
|
const resolvedStyles = parseXcss(xcss);
|
|
100
|
-
return (
|
|
101
|
-
// eslint-disable-next-line @atlaskit/
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
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
|
-
);
|
|
100
|
+
return jsx("button", _extends({
|
|
101
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
|
|
102
|
+
style: style,
|
|
103
|
+
ref: ref
|
|
104
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
105
|
+
,
|
|
106
|
+
className: resolvedStyles.static
|
|
107
|
+
}, safeHtmlAttributes, {
|
|
108
|
+
// eslint-disable-next-line react/button-has-type
|
|
109
|
+
type: type,
|
|
110
|
+
onClick: onClick,
|
|
111
|
+
disabled: isDisabled,
|
|
112
|
+
css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
|
|
113
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
114
|
+
backgroundColor && backgroundColorStylesMap[backgroundColor],
|
|
115
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
116
|
+
padding && paddingStylesMap.padding[padding],
|
|
117
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
118
|
+
paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
|
|
119
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
120
|
+
paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
122
|
+
paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
124
|
+
paddingInline && paddingStylesMap.paddingInline[paddingInline],
|
|
125
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
126
|
+
paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
127
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
128
|
+
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
129
|
+
"data-testid": testId
|
|
130
|
+
}), children);
|
|
137
131
|
});
|
|
138
132
|
export default Pressable;
|
|
@@ -69,7 +69,7 @@ export const UNSAFE_buildBelowMediaQueryCSS = input => {
|
|
|
69
69
|
return {
|
|
70
70
|
...acc,
|
|
71
71
|
[breakpoint]: css({
|
|
72
|
-
// eslint-disable-next-line @atlaskit/
|
|
72
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
73
73
|
[UNSAFE_media.below[breakpoint]]: typeof input === 'function' ? input(breakpoint) : input
|
|
74
74
|
})
|
|
75
75
|
};
|
package/dist/es2019/xcss/xcss.js
CHANGED
|
@@ -1,9 +1,5 @@
|
|
|
1
|
-
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
2
1
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
2
|
import { css as cssEmotion } from '@emotion/react';
|
|
4
|
-
|
|
5
|
-
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
6
|
-
|
|
7
3
|
import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, fontFamilyMap, fontMap, fontWeightMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
|
|
8
4
|
export const tokensMap = {
|
|
9
5
|
backgroundColor: backgroundColorMap,
|
|
@@ -60,7 +60,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
60
60
|
action: 'clicked',
|
|
61
61
|
componentName: componentName || 'Anchor',
|
|
62
62
|
packageName: "@atlaskit/primitives",
|
|
63
|
-
packageVersion: "14.
|
|
63
|
+
packageVersion: "14.5.0",
|
|
64
64
|
analyticsData: analyticsContext,
|
|
65
65
|
actionSubject: 'link'
|
|
66
66
|
});
|
|
@@ -336,7 +336,6 @@ var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
336
336
|
,
|
|
337
337
|
ref: ref,
|
|
338
338
|
className: ax(["_19itglyw _vchhusvi _r06hglyw", backgroundColor && backgroundColorMap[backgroundColor], backgroundColor && isSurfaceToken(backgroundColor) && setSurfaceTokenMap[backgroundColor], paddingBlockStart && paddingBlockStartMap[paddingBlockStart], paddingBlockEnd && paddingBlockEndMap[paddingBlockEnd], paddingInlineStart && paddingInlineStartMap[paddingInlineStart], paddingInlineEnd && paddingInlineEndMap[paddingInlineEnd], xcss])
|
|
339
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
340
339
|
}, safeHtmlAttributes, {
|
|
341
340
|
"data-testid": testId
|
|
342
341
|
}), children);
|
|
@@ -50,7 +50,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
50
50
|
action: 'clicked',
|
|
51
51
|
componentName: componentName || 'Pressable',
|
|
52
52
|
packageName: "@atlaskit/primitives",
|
|
53
|
-
packageVersion: "14.
|
|
53
|
+
packageVersion: "14.5.0",
|
|
54
54
|
analyticsData: analyticsContext,
|
|
55
55
|
actionSubject: 'button'
|
|
56
56
|
});
|
|
@@ -66,9 +66,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
66
66
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
|
|
67
67
|
,
|
|
68
68
|
style: style
|
|
69
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
70
69
|
}, safeHtmlAttributes, {
|
|
71
|
-
// eslint-disable-next-line react/button-has-type
|
|
72
70
|
type: type,
|
|
73
71
|
onClick: onClick,
|
|
74
72
|
disabled: isDisabled,
|
|
@@ -145,9 +145,7 @@ var Text = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
145
145
|
size = 'medium';
|
|
146
146
|
}
|
|
147
147
|
var component = /*#__PURE__*/React.createElement(Component, {
|
|
148
|
-
id: id
|
|
149
|
-
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
150
|
-
,
|
|
148
|
+
id: id,
|
|
151
149
|
className: ax([styles.root, size && fontSizeMap[size], color && textColorMap[color], maxLines && styles.truncation, maxLines === 1 && styles.breakAll, align && styles["textAlign.".concat(align)], weight && fontWeightMap[weight], Component === 'em' && styles['as.em'], Component === 'strong' && styles['as.strong'], xcss]),
|
|
152
150
|
style: {
|
|
153
151
|
WebkitLineClamp: maxLines
|
|
@@ -94,7 +94,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
94
94
|
action: 'clicked',
|
|
95
95
|
componentName: componentName || 'Anchor',
|
|
96
96
|
packageName: "@atlaskit/primitives",
|
|
97
|
-
packageVersion: "14.
|
|
97
|
+
packageVersion: "14.5.0",
|
|
98
98
|
analyticsData: analyticsContext,
|
|
99
99
|
actionSubject: 'link'
|
|
100
100
|
});
|
|
@@ -152,9 +152,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
|
|
|
152
152
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
153
153
|
paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
154
154
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
155
|
-
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
|
|
156
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
157
|
-
resolvedStyles.emotion],
|
|
155
|
+
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
158
156
|
"data-testid": testId,
|
|
159
157
|
"data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
|
|
160
158
|
}), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
|
|
@@ -64,9 +64,7 @@ var Bleed = /*#__PURE__*/React.memo(function (_ref) {
|
|
|
64
64
|
return jsx("div", {
|
|
65
65
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
66
66
|
className: resolvedStyles.static,
|
|
67
|
-
css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all],
|
|
68
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
69
|
-
resolvedStyles.emotion],
|
|
67
|
+
css: [baseStyles, (inline || all) && inlineBleedMap[inline || all], (block || all) && blockBleedMap[block || all], resolvedStyles.emotion],
|
|
70
68
|
"data-testid": testId
|
|
71
69
|
}, children);
|
|
72
70
|
});
|
|
@@ -62,7 +62,6 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
62
62
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
|
|
63
63
|
,
|
|
64
64
|
className: resolvedStyles.static
|
|
65
|
-
// eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
|
|
66
65
|
}, safeHtmlAttributes, {
|
|
67
66
|
css: [baseStyles,
|
|
68
67
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
@@ -82,9 +81,7 @@ export var Box = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
82
81
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
83
82
|
paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
84
83
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
85
|
-
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd],
|
|
86
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
|
|
87
|
-
resolvedStyles.emotion],
|
|
84
|
+
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
88
85
|
"data-testid": testId
|
|
89
86
|
}), children);
|
|
90
87
|
return backgroundColor ? jsx(SurfaceContext.Provider, {
|
|
@@ -115,9 +115,7 @@ var Flex = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
115
115
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
116
116
|
columnGap && spaceStylesMap.columnGap[columnGap],
|
|
117
117
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
118
|
-
rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap],
|
|
119
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
120
|
-
resolvedStyles.emotion],
|
|
118
|
+
rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], direction && flexDirectionMap[direction], justifyContent && justifyContentMap[justifyContent], wrap && flexWrapMap[wrap], resolvedStyles.emotion],
|
|
121
119
|
"data-testid": testId,
|
|
122
120
|
ref: ref
|
|
123
121
|
}, children);
|
|
@@ -179,9 +179,7 @@ var Grid = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
179
179
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
180
180
|
columnGap && spaceStylesMap.columnGap[columnGap],
|
|
181
181
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
182
|
-
rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow],
|
|
183
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
184
|
-
resolvedStyles.emotion],
|
|
182
|
+
rowGap && spaceStylesMap.rowGap[rowGap], alignItems && alignItemsMap[alignItems], alignContent && alignContentMap[alignContent], justifyContent && justifyContentMap[justifyContent], autoFlow && gridAutoFlowMap[autoFlow], resolvedStyles.emotion],
|
|
185
183
|
"data-testid": testId,
|
|
186
184
|
ref: ref
|
|
187
185
|
}, children);
|
|
@@ -89,7 +89,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
89
89
|
action: 'clicked',
|
|
90
90
|
componentName: componentName || 'Pressable',
|
|
91
91
|
packageName: "@atlaskit/primitives",
|
|
92
|
-
packageVersion: "14.
|
|
92
|
+
packageVersion: "14.5.0",
|
|
93
93
|
analyticsData: analyticsContext,
|
|
94
94
|
actionSubject: 'button'
|
|
95
95
|
});
|
|
@@ -99,42 +99,36 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
|
|
|
99
99
|
var _spreadClass = htmlAttributes.className,
|
|
100
100
|
safeHtmlAttributes = _objectWithoutProperties(htmlAttributes, _excluded2);
|
|
101
101
|
var resolvedStyles = parseXcss(xcss);
|
|
102
|
-
return (
|
|
103
|
-
// eslint-disable-next-line @atlaskit/
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
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
|
-
);
|
|
102
|
+
return 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
|
+
}, safeHtmlAttributes, {
|
|
110
|
+
// eslint-disable-next-line react/button-has-type
|
|
111
|
+
type: type,
|
|
112
|
+
onClick: onClick,
|
|
113
|
+
disabled: isDisabled,
|
|
114
|
+
css: [baseStyles, focusRingStyles, isDisabled ? disabledStyles : enabledStyles,
|
|
115
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
116
|
+
backgroundColor && backgroundColorStylesMap[backgroundColor],
|
|
117
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
118
|
+
padding && paddingStylesMap.padding[padding],
|
|
119
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
120
|
+
paddingBlock && paddingStylesMap.paddingBlock[paddingBlock],
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
122
|
+
paddingBlockStart && paddingStylesMap.paddingBlockStart[paddingBlockStart],
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
124
|
+
paddingBlockEnd && paddingStylesMap.paddingBlockEnd[paddingBlockEnd],
|
|
125
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
126
|
+
paddingInline && paddingStylesMap.paddingInline[paddingInline],
|
|
127
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
128
|
+
paddingInlineStart && paddingStylesMap.paddingInlineStart[paddingInlineStart],
|
|
129
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
130
|
+
paddingInlineEnd && paddingStylesMap.paddingInlineEnd[paddingInlineEnd], resolvedStyles.emotion],
|
|
131
|
+
"data-testid": testId
|
|
132
|
+
}), children);
|
|
139
133
|
});
|
|
140
134
|
export default Pressable;
|
package/dist/esm/xcss/xcss.js
CHANGED
|
@@ -5,12 +5,8 @@ import _typeof from "@babel/runtime/helpers/typeof";
|
|
|
5
5
|
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
6
6
|
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
7
7
|
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
8
|
-
/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
|
|
9
8
|
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
9
|
import { css as cssEmotion } from '@emotion/react';
|
|
11
|
-
|
|
12
|
-
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
13
|
-
|
|
14
10
|
import { allSpaceMap, backgroundColorMap, borderColorMap, borderRadiusMap, borderWidthMap, dimensionMap, fontFamilyMap, fontMap, fontWeightMap, layerMap, opacityMap, positiveSpaceMap, shadowMap, textColorMap } from './style-maps.partial';
|
|
15
11
|
export var tokensMap = {
|
|
16
12
|
backgroundColor: backgroundColorMap,
|
|
@@ -13,7 +13,11 @@ type CustomElementType<P = any> = {
|
|
|
13
13
|
export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & Omit<BasePrimitiveProps, 'xcss' | 'style'> & BaseBoxProps<T>;
|
|
14
14
|
type BaseBoxProps<T extends CustomElementType> = {
|
|
15
15
|
/**
|
|
16
|
-
* The DOM element to render as the Box.
|
|
16
|
+
* The DOM element to render as the Box.
|
|
17
|
+
* - This cannot be any SVG-related element such as `'svg'`, `'animate', `'circle'`, and many more
|
|
18
|
+
* - This cannot be a `'a'` (use the `Anchor` primitive instead)
|
|
19
|
+
* - This cannot be a `'button'` (use the `Anchor` primitive instead)
|
|
20
|
+
* @default 'div'
|
|
17
21
|
*/
|
|
18
22
|
as?: T;
|
|
19
23
|
/**
|
|
@@ -83,12 +87,12 @@ type BaseBoxProps<T extends CustomElementType> = {
|
|
|
83
87
|
* Inline styles to be applied to the Box. Only apply as a last resort, or where
|
|
84
88
|
* styles cannot otherwise be calculated outside of the runtime of the component they're applied.
|
|
85
89
|
*/
|
|
86
|
-
style?: Omit<StyleProp['style'], 'backgroundColor'>;
|
|
90
|
+
style?: Omit<StyleProp['style'], 'background' | 'backgroundColor'>;
|
|
87
91
|
/**
|
|
88
92
|
* Apply a subset of permitted styles powered by Atlassian Design System design tokens.
|
|
89
|
-
*
|
|
93
|
+
* It's preferred you do not use `background` in `xcss` or `cssMap()` and instead use `props.backgroundColor` for surface awareness.
|
|
90
94
|
*/
|
|
91
|
-
xcss?: StrictXCSSProp<Exclude<XCSSAllProperties, 'background'
|
|
95
|
+
xcss?: StrictXCSSProp<Exclude<XCSSAllProperties, 'background'>, XCSSAllPseudos>;
|
|
92
96
|
};
|
|
93
97
|
type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
|
|
94
98
|
/**
|
|
@@ -13,7 +13,11 @@ type CustomElementType<P = any> = {
|
|
|
13
13
|
export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
|
|
14
14
|
type BaseBoxProps<T extends CustomElementType> = {
|
|
15
15
|
/**
|
|
16
|
-
* The DOM element to render as the Box.
|
|
16
|
+
* The DOM element to render as the Box.
|
|
17
|
+
* - This cannot be any SVG-related element such as `'svg'`, `'animate', `'circle'`, and many more
|
|
18
|
+
* - This cannot be a `'a'` (use the `Anchor` primitive instead)
|
|
19
|
+
* - This cannot be a `'button'` (use the `Anchor` primitive instead)
|
|
20
|
+
* @default 'div'
|
|
17
21
|
*/
|
|
18
22
|
as?: T;
|
|
19
23
|
/**
|
|
@@ -13,7 +13,11 @@ type CustomElementType<P = any> = {
|
|
|
13
13
|
export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & Omit<BasePrimitiveProps, 'xcss' | 'style'> & BaseBoxProps<T>;
|
|
14
14
|
type BaseBoxProps<T extends CustomElementType> = {
|
|
15
15
|
/**
|
|
16
|
-
* The DOM element to render as the Box.
|
|
16
|
+
* The DOM element to render as the Box.
|
|
17
|
+
* - This cannot be any SVG-related element such as `'svg'`, `'animate', `'circle'`, and many more
|
|
18
|
+
* - This cannot be a `'a'` (use the `Anchor` primitive instead)
|
|
19
|
+
* - This cannot be a `'button'` (use the `Anchor` primitive instead)
|
|
20
|
+
* @default 'div'
|
|
17
21
|
*/
|
|
18
22
|
as?: T;
|
|
19
23
|
/**
|
|
@@ -83,12 +87,12 @@ type BaseBoxProps<T extends CustomElementType> = {
|
|
|
83
87
|
* Inline styles to be applied to the Box. Only apply as a last resort, or where
|
|
84
88
|
* styles cannot otherwise be calculated outside of the runtime of the component they're applied.
|
|
85
89
|
*/
|
|
86
|
-
style?: Omit<StyleProp['style'], 'backgroundColor'>;
|
|
90
|
+
style?: Omit<StyleProp['style'], 'background' | 'backgroundColor'>;
|
|
87
91
|
/**
|
|
88
92
|
* Apply a subset of permitted styles powered by Atlassian Design System design tokens.
|
|
89
|
-
*
|
|
93
|
+
* It's preferred you do not use `background` in `xcss` or `cssMap()` and instead use `props.backgroundColor` for surface awareness.
|
|
90
94
|
*/
|
|
91
|
-
xcss?: StrictXCSSProp<Exclude<XCSSAllProperties, 'background'
|
|
95
|
+
xcss?: StrictXCSSProp<Exclude<XCSSAllProperties, 'background'>, XCSSAllPseudos>;
|
|
92
96
|
};
|
|
93
97
|
type BoxComponent = <T extends CustomElementType>(props: BoxProps<T>) => ReactElement | null;
|
|
94
98
|
/**
|
|
@@ -13,7 +13,11 @@ type CustomElementType<P = any> = {
|
|
|
13
13
|
export type BoxProps<T extends CustomElementType> = Omit<ComponentPropsWithoutRef<T>, 'as' | 'className'> & BasePrimitiveProps & StyleProp & BaseBoxProps<T>;
|
|
14
14
|
type BaseBoxProps<T extends CustomElementType> = {
|
|
15
15
|
/**
|
|
16
|
-
* The DOM element to render as the Box.
|
|
16
|
+
* The DOM element to render as the Box.
|
|
17
|
+
* - This cannot be any SVG-related element such as `'svg'`, `'animate', `'circle'`, and many more
|
|
18
|
+
* - This cannot be a `'a'` (use the `Anchor` primitive instead)
|
|
19
|
+
* - This cannot be a `'button'` (use the `Anchor` primitive instead)
|
|
20
|
+
* @default 'div'
|
|
17
21
|
*/
|
|
18
22
|
as?: T;
|
|
19
23
|
/**
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/primitives",
|
|
3
|
-
"version": "14.
|
|
3
|
+
"version": "14.5.0",
|
|
4
4
|
"description": "Primitives are token-backed low-level building blocks.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -129,7 +129,7 @@
|
|
|
129
129
|
"@atlaskit/css": "^0.10.0",
|
|
130
130
|
"@atlaskit/ds-lib": "^4.0.0",
|
|
131
131
|
"@atlaskit/interaction-context": "^3.0.0",
|
|
132
|
-
"@atlaskit/tokens": "^4.
|
|
132
|
+
"@atlaskit/tokens": "^4.8.0",
|
|
133
133
|
"@atlaskit/visually-hidden": "^3.0.0",
|
|
134
134
|
"@babel/runtime": "^7.0.0",
|
|
135
135
|
"@compiled/react": "^0.18.3",
|
|
@@ -142,21 +142,21 @@
|
|
|
142
142
|
"react": "^18.2.0"
|
|
143
143
|
},
|
|
144
144
|
"devDependencies": {
|
|
145
|
-
"@af/accessibility-testing": "
|
|
146
|
-
"@af/formatting": "
|
|
147
|
-
"@af/integration-testing": "
|
|
148
|
-
"@af/visual-regression": "
|
|
145
|
+
"@af/accessibility-testing": "workspace:^",
|
|
146
|
+
"@af/formatting": "workspace:^",
|
|
147
|
+
"@af/integration-testing": "workspace:^",
|
|
148
|
+
"@af/visual-regression": "workspace:^",
|
|
149
149
|
"@atlaskit/avatar": "^25.0.0",
|
|
150
150
|
"@atlaskit/button": "^23.0.0",
|
|
151
|
-
"@atlaskit/checkbox": "^17.
|
|
152
|
-
"@atlaskit/code": "^17.
|
|
151
|
+
"@atlaskit/checkbox": "^17.1.0",
|
|
152
|
+
"@atlaskit/code": "^17.1.0",
|
|
153
153
|
"@atlaskit/docs": "^10.0.0",
|
|
154
|
-
"@atlaskit/dropdown-menu": "^14.
|
|
154
|
+
"@atlaskit/dropdown-menu": "^14.1.0",
|
|
155
155
|
"@atlaskit/flag": "^17.1.0",
|
|
156
156
|
"@atlaskit/form": "^12.0.0",
|
|
157
157
|
"@atlaskit/heading": "^5.2.0",
|
|
158
|
-
"@atlaskit/icon": "^25.
|
|
159
|
-
"@atlaskit/icon-object": "^7.
|
|
158
|
+
"@atlaskit/icon": "^25.6.0",
|
|
159
|
+
"@atlaskit/icon-object": "^7.1.0",
|
|
160
160
|
"@atlaskit/image": "^3.0.0",
|
|
161
161
|
"@atlaskit/link": "^3.1.0",
|
|
162
162
|
"@atlaskit/logo": "^16.0.0",
|
|
@@ -167,7 +167,7 @@
|
|
|
167
167
|
"@atlaskit/textfield": "^8.0.0",
|
|
168
168
|
"@atlaskit/toggle": "^15.0.0",
|
|
169
169
|
"@atlaskit/tooltip": "^20.0.0",
|
|
170
|
-
"@atlaskit/visual-regression": "
|
|
170
|
+
"@atlaskit/visual-regression": "workspace:^",
|
|
171
171
|
"@atlassian/analytics-bridge": "^0.7.0",
|
|
172
172
|
"@atlassian/codegen": "^0.1.0",
|
|
173
173
|
"@atlassian/ssr-tests": "^0.2.0",
|