@atlaskit/primitives 5.2.0 → 5.4.0

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/primitives
 
+## 5.4.0
+
+### Minor Changes
+
+- [#85745](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/85745) [`0e9c8c15ef86`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0e9c8c15ef86) - Extends XCSS selector types to allow up to two CSS psuedos to be used in combination. For example: `:visited:hover {}`.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 5.3.0
+
+### Minor Changes
+
+- [#86400](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/86400) [`92f574fd392d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/92f574fd392d) - - Anchor now suffixes the accessible label with visually hidden text "(opens new window)" when `target` is set to `_blank`. This improves accessibility for screen readers.
+  - Anchor no longer automatically opens external links in new windows, which is a poor usability and accessibility practice. Previously this involved applying default attributes `rel="noopener noreferrer"` and `target="_blank"` when the link was detected to link externally.
+
 ## 5.2.0
 
 ### Minor Changes

package/constellation/pressable/examples.mdx

@@ -5,7 +5,9 @@ order: 0
 ---
 
 import PressableDefault from '../../examples/constellation/pressable/default';
+import PressableBasic from '../../examples/constellation/pressable/basic';
 import PressableStyled from '../../examples/constellation/pressable/styled';
+import PressableDisabled from '../../examples/constellation/pressable/disabled';
 
 import { CodeDocsHeader } from '@af/design-system-docs-ui';
 import SectionMessage from '@atlaskit/section-message';
@@ -18,22 +20,45 @@ import SectionMessage from '@atlaskit/section-message';
 
 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.
+Only use Pressable when [the Button component](/components/button/examples) is unsuitable and unable to be customized with [XCSS](/components/primitives/xcss/usage).
 
 ## Default
 
-Pressable comes unstyled, ready for styles to be applied.
+Pressable is unstyled by default.
 
 <Example
   Component={PressableDefault}
   packageName="@atlaskit/primitives/pressable"
 />
 
-## Styling
+## Basic styling with XCSS
 
-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.
+Pressable can be styled using XCSS. Ensure styling indicates the interaction state using `:hover` and `:active` pseudo-classes.
+
+By default, pressable includes consistent Atlassian Design System `:focus` styles so it's not necessary to add your own.
+
+For more information on XCSS, see the dedicated [XCSS documentation](/components/primitives/xcss).
+
+<Example
+  Component={PressableBasic}
+  packageName="@atlaskit/primitives/pressable"
+/>
+
+## Disabled
+
+Pressable can be disabled using the `isDisabled` prop. Disabled styles should be conditionally applied and defined using XCSS.
+
+<Example
+  Component={PressableDisabled}
+  packageName="@atlaskit/primitives/pressable"
+/>
+
+## Advanced styling
+
+Advanced styling can be achieved using a combination of XCSS and other primitives.
 
 <Example
   Component={PressableStyled}
   packageName="@atlaskit/primitives/pressable"
+  backgroundColor="white"
 />

package/constellation/pressable/usage.mdx

@@ -4,20 +4,97 @@ description: A pressable is a primitive used for building custom buttons.
 order: 2
 ---
 
-## When not to use pressable
+import pressablePrimaryDo from './images/pressable-01a-do.png';
+import pressablePrimaryDont from './images/pressable-01b-dont.png';
 
-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).
+Pressable is a button with consistent focus styles and analytics built in. Pressable works with design tokens to make it easy to compose Atlassian-styled clickable elements that aren't possible using existing [buttons](/components/button/examples), [menus](/components/menu/examples), or other existing design system components.
 
-Do not use Pressable for links (anchor tags). Use the equivalent [Anchor primitive](/components/primitives/anchor/usage) instead.
+![Pressable anatomy](./images/pressable-anatomy.png)
 
-## Styling
+1. **Pressable area:** For accessibility this should be a minimum of 24 by 24 pixels, unless exempt from [Target Size (Minimum) (Level AA)](https://www.w3.org/WAI/WCAG22/Understanding/target-size-minimum.html).
+2. **Focus ring**: This is included in pressable and appears on keyboard focus.
+3. **Accessible label:** Pressable should always include a clear label for accessibility. Use this to communicate the action that occurs when the button is pressed.
 
-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.
+## Use pressable when there aren't existing components that work for your experience
+
+Only use pressable when existing components such as [the button component](/components/button/examples), menus, or other existing design system components can't be customized to fit your case. Using existing components with safe customizations will prevent inconsistency as Atlassian UI evolves.
+
+<DoDont
+  type="do"
+  image={{
+    url: pressablePrimaryDo,
+    alt: "A set of custom buttons built with pressable that aren't possible using existing design system components",
+  }}
+>
+  Use pressable to create buttons when there isn't an existing design system
+  component to achieve your use case.
+</DoDont>
+
+<DoDont
+  type="dont"
+  image={{
+    url: pressablePrimaryDont,
+    alt: 'A custom button build with Pressable that looks similar to Button, an existing design system component',
+  }}
+>
+  Don't use pressable in place of an element that already has a design system
+  representation, such as{' '}
+  <a href="/components/button/examples">the button component</a>. This can cause
+  visual and behavioral inconsistencies in Atlassian products.
+</DoDont>
+
+## Accessibility
+
+### Use clear labels for assistive technology
+
+Pressable should always announce what action will happen once pressed.
+
+![Pressable labels](./images/pressable-labels.png)
+
+#### When no visible label is present
+
+- Ensure an accessible label is still available by using [the visually hidden component](/components/visually-hidden/examples) which will render hidden text inside the button. This is preferable over the `aria-label` attribute because not all screen readers translate this between languages.
+- Use [a tooltip](/components/tooltip/examples) to provide sighted users with the same information.
+
+### Focus ring behavior
+
+Pressable creates buttons that are available in focus order, and provides a visual ring to clarify what is in focus. Adding additional focus styles is unnecessary.
+
+### Avoid disabling buttons
+
+Disabled buttons can cause accessibility problems. Avoid disabling buttons and [follow our disabled and tooltip button guidance](/components/button/button-new/usage#avoid-disabling-buttons).
+
+## Best practices
+
+### Make it clear what can be pressed
+
+Custom buttons should be obviously interactable. Make sure they are clearly identifiable through styles, surrounding context, labels, or other cues.
+
+### Don't use pressable for navigation
+
+Pressable is meant for on-page actions such as opening modals, or submitting forms. If you're making something that navigates to a new page, use a component that renders a semantically correct HTML `<a>` element such as:
+
+- The [link](/components/primitives/link/examples) component (coming soon) for standard text links.
+- The [anchor](/components/primitives/anchor/examples) primitive (coming soon) to create custom links.
+
+## Content guidelines
+
+### Use sentence case capitalization
+
+Use sentence case capitalization, only capitalizing the first letter of the label and any proper nouns. Other forms of capitalization should be only applied through styling with `text-transform`.
+
+### Make it clear what pressing the button does
+
+Make sure labels are concise, active, and clear about what pressing the button does.
+
+For example, _Change issue color to yellow_ instead of _yellow_.
+
+### Follow other label and UI content guidance
+
+Follow label and content guidelines for [buttons](/components/button/button-new/usage#content-guidelines). Review our [general UI text guidance](/foundations/accessibility/#meaningful-text) for specific question.
 
 ## 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)
+- Use [existing buttons](/components/button/examples) or [menus](/components/button/examples) for most actions in Atlassian products.
+- If you must create a custom component, consider using an existing component with [XCSS](/components/primitives/xcss) (coming soon).
+- Pressable is built on the same API as [box](/components/primitives/box/usage). Use available props or [XCSS](/components/primitives/xcss/usage) to customize padding options, background color, and other styles.

package/dist/cjs/components/anchor.js

@@ -16,9 +16,10 @@ 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 _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 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", "onClick", "interactionName", "componentName", "analyticsContext"];
+var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext"];
 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); }
 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; }
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
@@ -59,7 +60,6 @@ var Anchor = function Anchor(_ref, ref) {
     testId = _ref.testId,
     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,
@@ -76,7 +76,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.2.0",
+    packageVersion: "5.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -108,8 +108,7 @@ var Anchor = function Anchor(_ref, ref) {
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
-    target: isExternal && target === undefined ? '_blank' : target,
-    rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
+    target: target,
     backgroundColor: backgroundColor,
     padding: padding,
     paddingBlock: paddingBlock,
@@ -122,7 +121,7 @@ var Anchor = function Anchor(_ref, ref) {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
-  }), children);
+  }), children, target === '_blank' && /*#__PURE__*/_react.default.createElement(_visuallyHidden.default, null, "(opens new window)"));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/cjs/components/pressable.js

@@ -80,7 +80,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.2.0",
+    packageVersion: "5.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/cjs/xcss/style-maps.partial.js

@@ -73,10 +73,10 @@ var allSpaceMap = exports.allSpaceMap = _objectSpread(_objectSpread({}, positive
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::7e2103695ffbc3573276b7ef3408c91b>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 var inverseColorMap = exports.inverseColorMap = {
   'color.background.neutral.bold': 'color.text.inverse',
@@ -114,11 +114,11 @@ var inverseColorMap = exports.inverseColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::b219b05d38339a7cd427cbf5de4ad327>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 var opacityMap = exports.opacityMap = {
   'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -149,11 +149,11 @@ var surfaceColorMap = exports.surfaceColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::75cecbb153ddd5bdd2cb0c5e9a07107d>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 var borderColorMap = exports.borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -413,7 +413,8 @@ var textColorMap = exports.textColorMap = {
   'color.text.subtle': "var(--ds-text-subtle, #42526E)",
   'color.link': "var(--ds-link, #0052CC)",
   'color.link.pressed': "var(--ds-link-pressed, #0747A6)",
-  'color.link.visited': "var(--ds-link-visited, #403294)"
+  'color.link.visited': "var(--ds-link-visited, #403294)",
+  'color.link.visited.pressed': "var(--ds-link-visited-pressed, #403294)"
 };
 var fillMap = exports.fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",

package/dist/cjs/xcss/xcss.js

@@ -212,6 +212,8 @@ var parseXcss = exports.parseXcss = function parseXcss(args) {
 
 // Media queries should not contain nested media queries
 
+// Allow chained pseudos, e.g. `:visited:hover`
+
 // Pseudos should not contain nested pseudos, or media queries
 
 /**

package/dist/es2019/components/anchor.js

@@ -5,6 +5,7 @@ import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useRouterLink } from '@atlaskit/app-provider';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { xcss } from '../xcss/xcss';
 import Box from './box';
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
@@ -45,7 +46,6 @@ const Anchor = ({
   testId,
   xcss: xcssStyles,
   target,
-  rel,
   onClick: providedOnClick = noop,
   interactionName,
   componentName,
@@ -62,7 +62,7 @@ const Anchor = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.2.0",
+    packageVersion: "5.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -94,8 +94,7 @@ const Anchor = ({
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
-    target: isExternal && target === undefined ? '_blank' : target,
-    rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
+    target: target,
     backgroundColor: backgroundColor,
     padding: padding,
     paddingBlock: paddingBlock,
@@ -108,7 +107,7 @@ const Anchor = ({
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
-  }), children);
+  }), children, target === '_blank' && /*#__PURE__*/React.createElement(VisuallyHidden, null, "(opens new window)"));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/es2019/components/pressable.js

@@ -66,7 +66,7 @@ const UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.2.0",
+    packageVersion: "5.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/xcss/style-maps.partial.js

@@ -67,10 +67,10 @@ export const allSpaceMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::7e2103695ffbc3573276b7ef3408c91b>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export const inverseColorMap = {
   'color.background.neutral.bold': 'color.text.inverse',
@@ -108,11 +108,11 @@ export const inverseColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::b219b05d38339a7cd427cbf5de4ad327>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export const opacityMap = {
   'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -143,11 +143,11 @@ export const surfaceColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::75cecbb153ddd5bdd2cb0c5e9a07107d>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export const borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -407,7 +407,8 @@ export const textColorMap = {
   'color.text.subtle': "var(--ds-text-subtle, #42526E)",
   'color.link': "var(--ds-link, #0052CC)",
   'color.link.pressed': "var(--ds-link-pressed, #0747A6)",
-  'color.link.visited': "var(--ds-link-visited, #403294)"
+  'color.link.visited': "var(--ds-link-visited, #403294)",
+  'color.link.visited.pressed': "var(--ds-link-visited-pressed, #403294)"
 };
 export const fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",

package/dist/es2019/xcss/xcss.js

@@ -190,6 +190,8 @@ export const parseXcss = args => {
 
 // Media queries should not contain nested media queries
 
+// Allow chained pseudos, e.g. `:visited:hover`
+
 // Pseudos should not contain nested pseudos, or media queries
 
 /**

package/dist/esm/components/anchor.js

@@ -2,13 +2,14 @@ import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "rel", "onClick", "interactionName", "componentName", "analyticsContext"];
+var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "testId", "xcss", "target", "onClick", "interactionName", "componentName", "analyticsContext"];
 import React, { forwardRef, useCallback, useContext } from 'react';
 import invariant from 'tiny-invariant';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import { useRouterLink } from '@atlaskit/app-provider';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
+import VisuallyHidden from '@atlaskit/visually-hidden';
 import { xcss } from '../xcss/xcss';
 import Box from './box';
 // TODO: Duplicated FocusRing styles due to lack of `xcss` support
@@ -49,7 +50,6 @@ var Anchor = function Anchor(_ref, ref) {
     testId = _ref.testId,
     xcssStyles = _ref.xcss,
     target = _ref.target,
-    rel = _ref.rel,
     _ref$onClick = _ref.onClick,
     providedOnClick = _ref$onClick === void 0 ? noop : _ref$onClick,
     interactionName = _ref.interactionName,
@@ -66,7 +66,7 @@ var Anchor = function Anchor(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.2.0",
+    packageVersion: "5.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -98,8 +98,7 @@ var Anchor = function Anchor(_ref, ref) {
     testId: testId,
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined,
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
-    target: isExternal && target === undefined ? '_blank' : target,
-    rel: isExternal && rel === undefined ? 'noopener noreferrer' : rel,
+    target: target,
     backgroundColor: backgroundColor,
     padding: padding,
     paddingBlock: paddingBlock,
@@ -112,7 +111,7 @@ var Anchor = function Anchor(_ref, ref) {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
     ,
     xcss: styles
-  }), children);
+  }), children, target === '_blank' && /*#__PURE__*/React.createElement(VisuallyHidden, null, "(opens new window)"));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/esm/components/pressable.js

@@ -70,7 +70,7 @@ var UNSAFE_PRESSABLE = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "5.2.0",
+    packageVersion: "5.4.0",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/esm/xcss/style-maps.partial.js

@@ -67,10 +67,10 @@ export var allSpaceMap = _objectSpread(_objectSpread({}, positiveSpaceMap), nega
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::7e2103695ffbc3573276b7ef3408c91b>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export var inverseColorMap = {
   'color.background.neutral.bold': 'color.text.inverse',
@@ -108,11 +108,11 @@ export var inverseColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::b219b05d38339a7cd427cbf5de4ad327>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export var opacityMap = {
   'opacity.disabled': "var(--ds-opacity-disabled, 0.4)",
@@ -143,11 +143,11 @@ export var surfaceColorMap = {
 
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::75cecbb153ddd5bdd2cb0c5e9a07107d>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export var borderColorMap = {
   'color.border': "var(--ds-border, #091e4221)",
@@ -407,7 +407,8 @@ export var textColorMap = {
   'color.text.subtle': "var(--ds-text-subtle, #42526E)",
   'color.link': "var(--ds-link, #0052CC)",
   'color.link.pressed': "var(--ds-link-pressed, #0747A6)",
-  'color.link.visited': "var(--ds-link-visited, #403294)"
+  'color.link.visited': "var(--ds-link-visited, #403294)",
+  'color.link.visited.pressed': "var(--ds-link-visited-pressed, #403294)"
 };
 export var fillMap = {
   'color.icon': "var(--ds-icon, #505F79)",

package/dist/esm/xcss/xcss.js

@@ -208,6 +208,8 @@ export var parseXcss = function parseXcss(args) {
 
 // Media queries should not contain nested media queries
 
+// Allow chained pseudos, e.g. `:visited:hover`
+
 // Pseudos should not contain nested pseudos, or media queries
 
 /**

package/dist/types/components/anchor.d.ts

@@ -26,7 +26,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
      */
     analyticsContext?: Record<string, any>;
 };
-declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __UNSAFE_ANCHOR__
  *

package/dist/types/xcss/style-maps.partial.d.ts

@@ -88,10 +88,10 @@ export type AllSpace = keyof typeof allSpaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::7e2103695ffbc3573276b7ef3408c91b>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export declare const inverseColorMap: {
     readonly 'color.background.neutral.bold': "color.text.inverse";
@@ -127,11 +127,11 @@ export declare const inverseColorMap: {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::b219b05d38339a7cd427cbf5de4ad327>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export declare const opacityMap: {
     readonly 'opacity.disabled': "var(--ds-opacity-disabled)";
@@ -164,11 +164,11 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::75cecbb153ddd5bdd2cb0c5e9a07107d>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -431,6 +431,7 @@ export declare const textColorMap: {
     readonly 'color.link': "var(--ds-link)";
     readonly 'color.link.pressed': "var(--ds-link-pressed)";
     readonly 'color.link.visited': "var(--ds-link-visited)";
+    readonly 'color.link.visited.pressed': "var(--ds-link-visited-pressed)";
 };
 export type TextColor = keyof typeof textColorMap;
 export declare const fillMap: {

package/dist/types/xcss/xcss.d.ts

@@ -702,6 +702,7 @@ export declare const tokensMap: {
         readonly 'color.link': "var(--ds-link)";
         readonly 'color.link.pressed': "var(--ds-link-pressed)";
         readonly 'color.link.visited': "var(--ds-link-visited)";
+        readonly 'color.link.visited.pressed': "var(--ds-link-visited-pressed)";
     };
     readonly columnGap: {
         'space.0': "var(--ds-space-0)";
@@ -1642,8 +1643,9 @@ type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen
 type CSSMediaQueries = {
     [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
 };
+type ChainedCSSPseudos = `${CSS.Pseudos}${CSS.Pseudos}`;
 type CSSPseudos = {
-    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
+    [Pseudo in CSS.Pseudos | ChainedCSSPseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
 };
 type AtRulesWithoutMedia = Exclude<CSS.AtRules, '@media'>;
 type CSSAtRules = {

package/dist/types-ts4.5/components/anchor.d.ts

@@ -26,7 +26,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
      */
     analyticsContext?: Record<string, any>;
 };
-declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, rel, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
+declare const Anchor: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, testId, xcss: xcssStyles, target, onClick: providedOnClick, interactionName, componentName, analyticsContext, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref: Ref<HTMLAnchorElement>) => JSX.Element;
 /**
  * __UNSAFE_ANCHOR__
  *

package/dist/types-ts4.5/xcss/style-maps.partial.d.ts

@@ -88,10 +88,10 @@ export type AllSpace = keyof typeof allSpaceMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::fcf1cfc01cda3c278e69b0b564c7746d>>
+ * @codegen <<SignedSource::7e2103695ffbc3573276b7ef3408c91b>>
  * @codegenId inverse-colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export declare const inverseColorMap: {
     readonly 'color.background.neutral.bold': "color.text.inverse";
@@ -127,11 +127,11 @@ export declare const inverseColorMap: {
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::8c10abde8168de6260b5aa120dd948bc>>
+ * @codegen <<SignedSource::b219b05d38339a7cd427cbf5de4ad327>>
  * @codegenId elevation
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["opacity", "shadow", "surface"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export declare const opacityMap: {
     readonly 'opacity.disabled': "var(--ds-opacity-disabled)";
@@ -164,11 +164,11 @@ export type SurfaceColor = keyof typeof surfaceColorMap;
  */
 /**
  * THIS SECTION WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0f7982208166d5dae0e25517d29aeaef>>
+ * @codegen <<SignedSource::75cecbb153ddd5bdd2cb0c5e9a07107d>>
  * @codegenId colors
  * @codegenCommand yarn workspace @atlaskit/primitives codegen-styles
  * @codegenParams ["border", "background", "text", "fill"]
- * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::f1021f8d47ab63374e371ce18db72a1c>>
+ * @codegenDependency ../../../tokens/src/artifacts/tokens-raw/atlassian-light.tsx <<SignedSource::eface03157c2df5c1b3b305911d3ed4d>>
  */
 export declare const borderColorMap: {
     readonly 'color.border': "var(--ds-border)";
@@ -431,6 +431,7 @@ export declare const textColorMap: {
     readonly 'color.link': "var(--ds-link)";
     readonly 'color.link.pressed': "var(--ds-link-pressed)";
     readonly 'color.link.visited': "var(--ds-link-visited)";
+    readonly 'color.link.visited.pressed': "var(--ds-link-visited-pressed)";
 };
 export type TextColor = keyof typeof textColorMap;
 export declare const fillMap: {

package/dist/types-ts4.5/xcss/xcss.d.ts

@@ -702,6 +702,7 @@ export declare const tokensMap: {
         readonly 'color.link': "var(--ds-link)";
         readonly 'color.link.pressed': "var(--ds-link-pressed)";
         readonly 'color.link.visited': "var(--ds-link-visited)";
+        readonly 'color.link.visited.pressed': "var(--ds-link-visited-pressed)";
     };
     readonly columnGap: {
         'space.0': "var(--ds-space-0)";
@@ -1642,8 +1643,9 @@ type AllMedia = MediaQuery | '@media screen and (forced-colors: active), screen
 type CSSMediaQueries = {
     [MQ in AllMedia]?: Omit<SafeCSSObject, AllMedia>;
 };
+type ChainedCSSPseudos = `${CSS.Pseudos}${CSS.Pseudos}`;
 type CSSPseudos = {
-    [Pseudo in CSS.Pseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
+    [Pseudo in CSS.Pseudos | ChainedCSSPseudos]?: Omit<SafeCSSObject, CSS.Pseudos | AllMedia>;
 };
 type AtRulesWithoutMedia = Exclude<CSS.AtRules, '@media'>;
 type CSSAtRules = {

package/extract-react-types/pressable-props.tsx

@@ -1,6 +1,8 @@
 // TODO: Switch from ERT to ts-morph when this is completed and has reasonable adoption: https://product-fabric.atlassian.net/browse/DSP-10364
 import React, { ReactNode } from 'react';
 
+import { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
 import { BasePrimitiveProps, StyleProp } from '../src/components/types';
 
 // eslint-disable-next-line @typescript-eslint/no-namespace
@@ -73,13 +75,35 @@ export default function Pressable(
     paddingInlineEnd?: Space;
 
     /**
-     * A token alias for background color. See:<br>
-     * [https://atlassian.design/components/tokens/all-tokens#color-background](https://atlassian.design/components/tokens/all-tokens#color-background)<br>
+     * A token alias for background color. See [https://atlassian.design/components/tokens/all-tokens#color-background](background tokens) for a list of options.
      * When the background color is set to a [surface token](/components/tokens/all-tokens#elevation-surface),
-     * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Box styles.
+     * the [current surface](/components/tokens/code#current-surface-color) CSS variable will also be set to this value in the Pressable styles.
      */
     backgroundColor?: Token.BackgroundColor;
 
+    /**
+     * Handler to be called on click. The second argument can be used to track analytics data. See the tutorial in the analytics-next package for details.
+     */
+    onClick?: (
+      e: React.MouseEvent<HTMLButtonElement>,
+      analyticsEvent: UIAnalyticsEvent,
+    ) => void;
+
+    /**
+     * An optional name used to identify the interaction type to analytics press listeners.
+     */
+    interactionName?: string;
+
+    /**
+     * An optional component name used to identify this component to analytics press listeners. This can be altered if a parent component's name is preferred rather than the default 'Pressable'.
+     */
+    componentName?: string;
+
+    /**
+     * Additional information to be included in the `context` of analytics events that come from Pressable.
+     */
+    analyticsContext?: Record<string, any>;
+
     /**
      * Elements to be rendered inside the primitive.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/primitives",
-  "version": "5.2.0",
+  "version": "5.4.0",
   "description": "Primitives are token-backed low-level building blocks.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -103,7 +103,7 @@
           "slug": "primitives/pressable",
           "id": "@atlaskit/primitives/pressable",
           "status": {
-            "type": "alpha"
+            "type": "closed-beta"
           }
         },
         {
@@ -123,11 +123,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^9.2.0",
-    "@atlaskit/app-provider": "^1.0.0",
+    "@atlaskit/app-provider": "^1.1.0",
     "@atlaskit/css": "^0.0.5",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/interaction-context": "^2.1.0",
-    "@atlaskit/tokens": "^1.42.0",
+    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/visually-hidden": "^1.2.4",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "@emotion/serialize": "^1.1.0",

package/scripts/__tests__/__snapshots__/codegen.test.tsx.snap

@@ -945,6 +945,7 @@ exports[`@atlaskit/primitives text styles are generated correctly 1`] = `
   'color.link': token('color.link', '#0052CC'),
   'color.link.pressed': token('color.link.pressed', '#0747A6'),
   'color.link.visited': token('color.link.visited', '#403294'),
+  'color.link.visited.pressed': token('color.link.visited.pressed', '#403294'),
 } as const;
 
 export type TextColor = keyof typeof textColorMap;