@atlaskit/primitives 2.0.3 → 3.0.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # @atlaskit/primitives
 
+## 3.0.0
+
+### Major Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`a45d2049a22c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a45d2049a22c) - The "Link" primitive has been renamed to "Anchor" to avoid confusion with the upcoming "Link" component. Since Link is still in Alpha this should not cause any upgrade friction.
+
+### Minor Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`75b2ade8b254`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/75b2ade8b254) - Both the Pressable and Anchor primitives now support analytics tracking by default.
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`39f3c929f0c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/39f3c929f0c4) - Add Pressable and Anchor primitives (in Alpha) to root export as `UNSAFE_PRESSABLE` and `UNSAFE_LINK`.
+
+### Patch Changes
+
+- [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`4951390bc0ae`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4951390bc0ae) - [ux] Adds a default underline style to the Anchor primitive (Alpha)
+
+## 2.1.0
+
+### Minor Changes
+
+- [#74930](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/74930) [`707a8fee2aee`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/707a8fee2aee) - Both the Pressable and Anchor primitives (in Alpha) now support analytics tracking in the same fashion as `@atlaskit/button`. An additional prop `componentName` allows analytics to be configured if a parent component name is desired to be tracked rather than the primitive names. For the time being this tracking is opt-in via use of the `componentName` prop. This will be made default behavior in an upcoming release once tracking is removed in the new Buttons, and `@atlaskit/button` is bumped to use the latest version of `@atlaskit/primitives`
+- [#75221](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/75221) [`c15d58bff276`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c15d58bff276) - `Text` inherits color by default if `color` prop is not provided.
+  Removed auto-collapsing behaviour of `Text`
+
 ## 2.0.3
 
 ### Patch Changes

package/anchor/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/primitives/anchor",
+  "main": "../dist/cjs/components/anchor.js",
+  "module": "../dist/esm/components/anchor.js",
+  "module:es2019": "../dist/es2019/components/anchor.js",
+  "sideEffects": false,
+  "types": "../dist/types/components/anchor.d.ts",
+  "typesVersions": {
+    ">=4.5 <4.9": {
+      "*": [
+        "../dist/types-ts4.5/components/anchor.d.ts"
+      ]
+    }
+  }
+}

package/constellation/anchor/code.mdx

@@ -0,0 +1,21 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import ERTAnchor from '!!extract-react-types-loader!../../extract-react-types/anchor-props';
+
+## Props
+
+Anchor also supports all valid `HTMLAnchorElement` props.
+
+<PropsTable heading="" props={ERTAnchor} />

package/constellation/anchor/examples.mdx

@@ -0,0 +1,33 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 0
+---
+
+import AnchorDefault from '../../examples/constellation/anchor/default';
+import AnchorStyled from '../../examples/constellation/anchor/styled';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+import SectionMessage from '@atlaskit/section-message';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+Anchor is a primitive used for building custom anchor links, with support for client-side routing and Atlassian Design System styling. This component is used by other design system components, such as the [Link component](/components/link/examples).
+
+For most links, use the [Link component](/components/link/examples) wherever possible, and use [XCSS](/components/primitives/xcss/usage) for any necessary customization. Only use Anchor if you aren't able to use Link.
+
+## Default
+
+Anchor comes unstyled, ready for styles to be applied. Note if you are using the [CSS reset](/components/css-reset/examples), anchor will inherit some default styles.
+
+<Example Component={AnchorDefault} packageName="@atlaskit/primitives/anchor" />
+
+## Styling
+
+Anchor consumes the Box primitive to provide a consistent styling API that supports design tokens. See [Box](/components/primitives/box/examples) for complete styling documentation and examples.
+
+<Example Component={AnchorStyled} packageName="@atlaskit/primitives/anchor" />

package/constellation/anchor/usage.mdx

@@ -0,0 +1,47 @@
+---
+title: Anchor
+description: An anchor is a primitive for building custom links.
+order: 2
+---
+
+## When not to use Anchor
+
+The [Link component](/components/link/usage) should be used whenever possible for links to maintain visual consistency. Only use Anchor when building custom links beyond the capabilities of the Link component. The decision to use Anchor should involve checking if the Link component can be customized to fit your needs using [XCSS](/components/primitives/XCSS/usage).
+
+Do not use Anchor for buttons that perform actions rather than navigation. Use the equivalent [Pressable primitive](/components/primitives/pressable/usage) instead.
+
+## Link types
+
+External links starting with `http://` or `https://` will automatically render with `target="_blank"` and `rel="noopener noreferrer"` attributes.
+
+### Router links
+
+Anchor supports automatic consumption of configured router link components through the [App Provider](/components/app-provider/examples#router-links). If an App Provider is not present or a router link component is not configured, the link will render as a standard anchor link.
+
+External links and non-HTTP-based links such as `tel:` and `mailto:` will not use router links and always render as standard anchor links.
+
+Anchor accepts a generic type object matching the router link configuration, allowing advanced usage of `href` prop. These values can be mapped to the underlying router link component in the App Provider.
+
+```jsx
+<Anchor<MyRouterLinkConfig>
+  href={{
+    to: '/home',
+    replace: true
+  }}
+>
+  Home
+</Anchor>
+```
+
+## Styling
+
+Display behavior follows the same patterns as [Box](/components/primitives/box/usage). Use available props or [XCSS](/components/primitives/xcss/usage) to customize padding options, background color, and other styles.
+
+## Related
+
+- [Configuring router link components with AppProvider](/components/app-provider/examples#router-links)
+- [The underlying box component](/components/primitives/box/usage)
+- [Counterpart pressable primitive for button tags](/components/primitives/button/usage)
+- [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
+- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
+- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)

package/constellation/box/examples.mdx

@@ -53,13 +53,15 @@ For more information on XCSS, see the dedicated [XCSS documentation](/components
 
 ## Conditional styles
 
-To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.
+To achieve conditional styles, we suggest composing conditional styles via the `props.xcss` API rather than applying conditional behaviour to individual props.
 
 <Example Component={BoxConditional} packageName="@atlaskit/primitives/box" />
 
-## Practical use case
+## Practical card example
 
-Box is designed to be used in conjunction with the inline and stack components to create layouts. This example demonstrates how these can be used to create familiar components and patterns.
+Box is designed to be composed with inline, stack, and other components to create layouts.
+
+Atlassian uses dozens of distinct card-like components across products. Therefore, rather than providing a strict component, the Atlassian Design System empowers and supports you to build your own card components in ways that are consistent and will scale over time.
 
 <Example
   Component={BoxPracticalUseCase}

package/constellation/pressable/code.mdx

@@ -0,0 +1,21 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 1
+---
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+import ERTPressable from '!!extract-react-types-loader!../../extract-react-types/pressable-props';
+
+## Props
+
+Pressable also supports all valid `HTMLButtonElement` props, except for `disabled` which is replaced by the `isDisabled` prop.
+
+<PropsTable heading="" props={ERTPressable} />

package/constellation/pressable/examples.mdx

@@ -0,0 +1,39 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 0
+---
+
+import PressableDefault from '../../examples/constellation/pressable/default';
+import PressableStyled from '../../examples/constellation/pressable/styled';
+
+import { CodeDocsHeader } from '@af/design-system-docs-ui';
+import SectionMessage from '@atlaskit/section-message';
+
+<CodeDocsHeader
+  name="@atlaskit/primitives"
+  repository="https://bitbucket.org/atlassian/atlassian-frontend-mirror"
+  directoryName="primitives"
+/>
+
+Pressable is a primitive used for building custom buttons with Atlassian Design System styling. This component is used by other design system components, such as the [Button component](/components/button/examples).
+
+For most buttons, use the [Button component](/components/button/examples) wherever possible, and use [XCSS](/components/primitives/xcss/usage) for any necessary customization. Only use pressable if you aren't able to use the button component.
+
+## Default
+
+Pressable comes unstyled, ready for styles to be applied.
+
+<Example
+  Component={PressableDefault}
+  packageName="@atlaskit/primitives/pressable"
+/>
+
+## Styling
+
+Pressable consumes the Box primitive to provide a consistent styling API that supports design tokens. See [Box](/components/primitives/box/examples) for complete styling documentation and examples.
+
+<Example
+  Component={PressableStyled}
+  packageName="@atlaskit/primitives/pressable"
+/>

package/constellation/pressable/usage.mdx

@@ -0,0 +1,23 @@
+---
+title: Pressable
+description: A pressable is a primitive used for building custom buttons.
+order: 2
+---
+
+## When not to use pressable
+
+The [Button component](/components/button/usage) should be used whenever possible for buttons to maintain visual consistency. Only use pressable when building custom buttons beyond the capabilities of the button component. The decision to use pressable should involve checking if the button component can be customized to fit your needs using [XCSS](/components/primitives/XCSS/usage).
+
+Do not use Pressable for links (anchor tags). Use the equivalent [Anchor primitive](/components/primitives/anchor/usage) instead.
+
+## Styling
+
+Display behavior follows the same patterns as [Box](/components/primitives/box/usage). Use available props or [XCSS](/components/primitives/xcss/usage) to customize padding options, background color, and other styles.
+
+## Related
+
+- [The underlying box component](/components/primitives/box/usage)
+- [Counterpart anchor primitive for anchor tags](/components/primitives/anchor/usage)
+- [Manage horizontal layout using an inline component](/components/primitives/inline/usage)
+- [Manage vertical layout using a stack component](/components/primitives/stack/usage)
+- [Use design tokens in code with XCSS](/components/primitives/XCSS/usage)

package/constellation/xcss/examples.mdx

@@ -37,6 +37,6 @@ XCSS also accepts a subset of media queries at [predefined breakpoints](/compone
 
 ## Conditional styles
 
-To achieve conditional styles, it is usually simpler to apply conditional behavior at the `xcss` object level, rather than applying conditional behavior to individual properties.
+For conditional styles, try composing styles together via the array with ternary or boolean operators.
 
 <Example Component={xcssConditional} packageName="@atlaskit/primitives/xcss" />

package/dist/cjs/components/{link.js → anchor.js}

@@ -12,10 +12,13 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
+var _analyticsNext = require("@atlaskit/analytics-next");
 var _appProvider = require("@atlaskit/app-provider");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _xcss = require("../xcss/xcss");
 var _box = _interopRequireDefault(require("./box"));
-var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel"];
+var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel", "onClick", "interactionName", "componentName", "analyticsContext"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof3(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
@@ -26,6 +29,9 @@ var baseFocusRingStyles = {
   outlineStyle: 'solid',
   outlineOffset: 'space.025'
 };
+var defaultStyles = (0, _xcss.xcss)({
+  textDecoration: 'underline'
+});
 var focusRingStyles = (0, _xcss.xcss)({
   ':focus-visible': baseFocusRingStyles,
   '@supports not selector(*:focus-visible)': {
@@ -39,7 +45,7 @@ var focusRingStyles = (0, _xcss.xcss)({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
-var Link = function Link(_ref, ref) {
+var Anchor = function Anchor(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
@@ -54,11 +60,30 @@ var Link = function Link(_ref, ref) {
     xcssStyles = _ref.xcss,
     target = _ref.target,
     rel = _ref.rel,
+    _ref$onClick = _ref.onClick,
+    providedOnClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
+    interactionName = _ref.interactionName,
+    componentName = _ref.componentName,
+    analyticsContext = _ref.analyticsContext,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: handleClick,
+    action: 'clicked',
+    componentName: componentName || 'Anchor',
+    packageName: "@atlaskit/primitives",
+    packageVersion: "3.0.0",
+    analyticsData: analyticsContext,
+    actionSubject: 'link'
+  });
   var RouterLink = (0, _appProvider.useRouterLink)();
 
   // Combine default styles with supplied styles. XCSS does not support deep nested arrays
-  var styles = Array.isArray(xcssStyles) ? [focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [focusRingStyles, xcssStyles];
+  var styles = Array.isArray(xcssStyles) ? [defaultStyles, focusRingStyles].concat((0, _toConsumableArray2.default)(xcssStyles)) : [defaultStyles, focusRingStyles, xcssStyles];
   var isExternal = typeof href === 'string' && IS_EXTERNAL_LINK_REGEX.test(href);
   var isNonHttpBased = typeof href === 'string' && IS_NON_HTTP_BASED.test(href);
 
@@ -71,7 +96,7 @@ var Link = function Link(_ref, ref) {
    */
   var isRouterLink = RouterLink && !isExternal && !isNonHttpBased;
   var hrefObjectUsedWithoutRouterLink = RouterLink === undefined && (0, _typeof2.default)(href) === 'object';
-  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Link primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
+  (0, _tinyInvariant.default)(!hrefObjectUsedWithoutRouterLink, "@atlaskit/primitives: Anchor primitive cannot pass an object to 'href' unless a router link is configured in the AppProvider");
   return /*#__PURE__*/_react.default.createElement(_box.default
   // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
   , (0, _extends2.default)({}, htmlAttributes, {
@@ -90,7 +115,8 @@ var Link = function Link(_ref, ref) {
     paddingBlockEnd: paddingBlockEnd,
     paddingInline: paddingInline,
     paddingInlineStart: paddingInlineStart,
-    paddingInlineEnd: paddingInlineEnd
+    paddingInlineEnd: paddingInlineEnd,
+    onClick: onClick
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
@@ -99,16 +125,17 @@ var Link = function Link(_ref, ref) {
 
 // Workarounds to support generic types with forwardRef
 /**
- * __UNSAFE_LINK__
+ * __UNSAFE_ANCHOR__
  *
  * @internal Still under development. Do not use.
  *
- * A Link is a primitive component that renders an `<a>` anchor. It utilizes
- * the configured router link component in the AppProvider if set.
+ * Anchor is a primitive for building custom anchor links. It's a wrapper around the HTML `<a>` element that provides a consistent API for handling client-side routing and Atlassian Design System styling.
+ *
+ * This component is mostly used by other design system components, such as the [link component](/components/link/usage).
  *
- * - [Examples](https://atlassian.design/components/primitives/link/examples)
- * - [Code](https://atlassian.design/components/primitives/link/code)
- * - [Usage](https://atlassian.design/components/primitives/link/usage)
+ * - [Examples](https://atlassian.design/components/primitives/anchor/examples)
+ * - [Code](https://atlassian.design/components/primitives/anchor/code)
+ * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-var UNSAFE_LINK = /*#__PURE__*/(0, _react.forwardRef)(Link);
-var _default = exports.default = UNSAFE_LINK;
+var UNSAFE_ANCHOR = /*#__PURE__*/(0, _react.forwardRef)(Anchor);
+var _default = exports.default = UNSAFE_ANCHOR;

package/dist/cjs/components/pressable.js

@@ -10,9 +10,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _xcss = require("../xcss/xcss");
 var _box = _interopRequireDefault(require("./box"));
-var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss"];
+var _excluded = ["children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "isDisabled", "type", "testId", "xcss", "onClick", "interactionName", "componentName", "analyticsContext"];
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
@@ -61,7 +64,27 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     type = _ref$type === void 0 ? 'button' : _ref$type,
     testId = _ref.testId,
     xcssStyles = _ref.xcss,
+    _ref$onClick = _ref.onClick,
+    providedOnClick = _ref$onClick === void 0 ? _noop.default : _ref$onClick,
+    interactionName = _ref.interactionName,
+    componentName = _ref.componentName,
+    analyticsContext = _ref.analyticsContext,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var interactionContext = (0, _react.useContext)(_interactionContext.default);
+  var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
+    interactionContext && interactionContext.tracePress(interactionName, e.timeStamp);
+    providedOnClick(e, analyticsEvent);
+  }, [providedOnClick, interactionContext, interactionName]);
+  var onClick = (0, _analyticsNext.usePlatformLeafEventHandler)({
+    fn: handleClick,
+    action: 'clicked',
+    componentName: componentName || 'Pressable',
+    packageName: "@atlaskit/primitives",
+    packageVersion: "3.0.0",
+    analyticsData: analyticsContext,
+    actionSubject: 'button'
+  });
+
   // Combine default styles with supplied styles. XCSS does not support deep nested arrays
   var styles = [(0, _xcss.xcss)({
     cursor: isDisabled ? 'not-allowed' : 'pointer'
@@ -72,6 +95,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     ref: ref,
     testId: testId,
     type: type,
+    onClick: onClick,
     backgroundColor: backgroundColor,
     padding: padding,
     paddingBlock: paddingBlock,

package/dist/cjs/components/text.js

@@ -7,8 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _react = require("react");
-var _react2 = require("@emotion/react");
+var _react = require("@emotion/react");
 var _tinyInvariant = _interopRequireDefault(require("tiny-invariant"));
 var _styleMaps = require("../xcss/style-maps.partial");
 var _surfaceProvider = require("./internal/surface-provider");
@@ -19,34 +18,34 @@ var asAllowlist = ['span', 'p', 'strong', 'em'];
 // We're doing this because our CSS reset can add top margins to elements such as `p` which is totally insane.
 // Long term we should remove those instances from the reset - it should be a reset to 0.
 // For now, at least we know <Text> will be unaffected by this.
-var resetStyles = (0, _react2.css)({
+var resetStyles = (0, _react.css)({
   margin: 0
 });
 var variantStyles = _objectSpread(_objectSpread({}, _styleMaps.bodyTextStylesMap), _styleMaps.uiTextStylesMap);
-var strongStyles = (0, _react2.css)({
+var strongStyles = (0, _react.css)({
   fontWeight: 'bold'
 });
-var emStyles = (0, _react2.css)({
+var emStyles = (0, _react.css)({
   fontStyle: 'italic'
 });
 var textAlignMap = {
-  center: (0, _react2.css)({
+  center: (0, _react.css)({
     textAlign: 'center'
   }),
-  end: (0, _react2.css)({
+  end: (0, _react.css)({
     textAlign: 'end'
   }),
-  start: (0, _react2.css)({
+  start: (0, _react.css)({
     textAlign: 'start'
   })
 };
-var truncationStyles = (0, _react2.css)({
+var truncationStyles = (0, _react.css)({
   display: '-webkit-box',
   overflow: 'hidden',
   WebkitBoxOrient: 'vertical'
 });
 var wordBreakMap = {
-  breakAll: (0, _react2.css)({
+  breakAll: (0, _react.css)({
     wordBreak: 'break-all'
   })
 };
@@ -56,19 +55,14 @@ var wordBreakMap = {
  */
 var useColor = function useColor(colorProp) {
   var surface = (0, _surfaceProvider.useSurface)();
-  var inverseTextColor = _styleMaps.inverseColorMap[surface];
 
   /**
    * Where the color of the surface is inverted we override the user choice
    * as there is no valid choice that is not covered by the override.
    */
-  var color = inverseTextColor !== null && inverseTextColor !== void 0 ? inverseTextColor : colorProp;
+  var color = _styleMaps.inverseColorMap.hasOwnProperty(surface) ? _styleMaps.inverseColorMap[surface] : colorProp;
   return color;
 };
-var HasTextAncestorContext = /*#__PURE__*/(0, _react.createContext)(false);
-var useHasTextAncestor = function useHasTextAncestor() {
-  return (0, _react.useContext)(HasTextAncestorContext);
-};
 
 /**
  * __Text__
@@ -83,8 +77,7 @@ var Text = function Text(_ref) {
   var children = _ref.children,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var asElement = props.as,
-    _props$color = props.color,
-    colorProp = _props$color === void 0 ? 'color.text' : _props$color,
+    colorProp = props.color,
     textAlign = props.textAlign,
     testId = props.testId,
     id = props.id,
@@ -103,16 +96,7 @@ var Text = function Text(_ref) {
     maxLines = props.maxLines;
   }
   var color = useColor(colorProp);
-  var isWrapped = useHasTextAncestor();
-
-  /**
-   * If the text is already wrapped and applies no props we can just
-   * render the children directly as a fragment.
-   */
-  if (isWrapped && Object.keys(props).length === 0) {
-    return (0, _react2.jsx)(_react.Fragment, null, children);
-  }
-  var component = (0, _react2.jsx)(Component, {
+  return (0, _react.jsx)(Component, {
     css: [resetStyles, variant && variantStyles[variant], color && _styleMaps.textColorStylesMap[color], maxLines && truncationStyles, maxLines === 1 && wordBreakMap.breakAll, textAlign && textAlignMap[textAlign], weight && _styleMaps.fontWeightStylesMap[weight], asElement === 'em' && emStyles, asElement === 'strong' && strongStyles],
     style: {
       WebkitLineClamp: maxLines
@@ -120,10 +104,5 @@ var Text = function Text(_ref) {
     "data-testid": testId,
     id: id
   }, children);
-  return isWrapped ?
-  // no need to re-apply context if the text is already wrapped
-  component : (0, _react2.jsx)(HasTextAncestorContext.Provider, {
-    value: true
-  }, component);
 };
 var _default = exports.default = Text;

package/dist/cjs/index.js

@@ -46,12 +46,24 @@ Object.defineProperty(exports, "Text", {
     return _text.default;
   }
 });
+Object.defineProperty(exports, "UNSAFE_ANCHOR", {
+  enumerable: true,
+  get: function get() {
+    return _anchor.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_BREAKPOINTS_CONFIG", {
   enumerable: true,
   get: function get() {
     return _responsive.UNSAFE_BREAKPOINTS_CONFIG;
   }
 });
+Object.defineProperty(exports, "UNSAFE_PRESSABLE", {
+  enumerable: true,
+  get: function get() {
+    return _pressable.default;
+  }
+});
 Object.defineProperty(exports, "UNSAFE_media", {
   enumerable: true,
   get: function get() {
@@ -84,4 +96,6 @@ var _flex = _interopRequireDefault(require("./components/flex"));
 var _grid = _interopRequireDefault(require("./components/grid"));
 var _bleed = _interopRequireDefault(require("./components/bleed"));
 var _text = _interopRequireDefault(require("./components/text"));
+var _pressable = _interopRequireDefault(require("./components/pressable"));
+var _anchor = _interopRequireDefault(require("./components/anchor"));
 var _responsive = require("./responsive");