@atlaskit/primitives 11.0.0 → 11.0.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/primitives
 
+## 11.0.2
+
+### Patch Changes
+
+- [#120336](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/120336)
+  [`62381baf0d2e1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/62381baf0d2e1) -
+  Update 'opens new window' for anchor and link with a nicer AT announcement
+
+## 11.0.1
+
+### Patch Changes
+
+- [#119548](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/119548)
+  [`c99cce707b5cb`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c99cce707b5cb) -
+  The separator prop in the inline component has had its type expanded to `ReactNode`.
+- Updated dependencies
+
 ## 11.0.0
 
 ### Major Changes

package/dist/cjs/components/anchor.js

@@ -19,7 +19,7 @@ var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-
 var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
 var _styleMaps = require("../xcss/style-maps.partial");
 var _xcss = require("../xcss/xcss");
-var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
+var _excluded = ["href", "children", "backgroundColor", "newWindowLabel", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
   _excluded2 = ["className"];
 /**
  * @jsxRuntime classic
@@ -53,6 +53,7 @@ var baseStyles = (0, _react2.css)({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
+// Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
 var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
 
 /**
@@ -68,6 +69,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
+    newWindowLabel = _ref.newWindowLabel,
     padding = _ref.padding,
     paddingBlock = _ref.paddingBlock,
     paddingBlockStart = _ref.paddingBlockStart,
@@ -103,7 +105,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "11.0.0",
+    packageVersion: "11.0.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -142,7 +144,8 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: target,
     onClick: onClick,
-    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel,
+    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? //`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
+    "".concat(ariaLabel, " , ").concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL) : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
     css: [baseStyles, focusRingStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -167,7 +170,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && (0, _react2.jsx)(_visuallyHidden.default, {
     id: opensNewWindowLabelId
-  }, OPENS_NEW_WINDOW_LABEL));
+  }, ", ".concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL)));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/cjs/components/inline.js

@@ -1,15 +1,18 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-var _react = require("react");
+var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@emotion/react");
 var _xcss = require("../xcss/xcss");
 var _flex = _interopRequireDefault(require("./flex"));
+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" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
 /* eslint-disable @repo/internal/styles/no-exported-styles */
 /**
  * @jsxRuntime classic

package/dist/cjs/components/pressable.js

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

package/dist/es2019/components/anchor.js

@@ -43,6 +43,7 @@ const baseStyles = css({
 });
 const IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 const IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
+// Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
 const OPENS_NEW_WINDOW_LABEL = '(opens new window)';
 
 /**
@@ -58,6 +59,7 @@ const AnchorNoRef = ({
   href,
   children,
   backgroundColor,
+  newWindowLabel,
   padding,
   paddingBlock,
   paddingBlockStart,
@@ -93,7 +95,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "11.0.0",
+    packageVersion: "11.0.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -134,7 +136,9 @@ const AnchorNoRef = ({
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: target,
     onClick: onClick,
-    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? `${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}` : ariaLabel,
+    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ?
+    //`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
+    `${ariaLabel} , ${newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL}` : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? `${ariaLabelledBy} ${opensNewWindowLabelId}` : ariaLabelledBy,
     css: [baseStyles, focusRingStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -159,7 +163,7 @@ const AnchorNoRef = ({
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
     id: opensNewWindowLabelId
-  }, OPENS_NEW_WINDOW_LABEL));
+  }, `, ${newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL}`));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/es2019/components/inline.js

@@ -3,7 +3,7 @@
  * @jsxRuntime classic
  */
 /** @jsx jsx */
-import { Children, forwardRef, Fragment, memo } from 'react';
+import React, { Children, forwardRef, Fragment, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/components/pressable.js

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

package/dist/esm/components/anchor.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _typeof from "@babel/runtime/helpers/typeof";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["href", "children", "backgroundColor", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
+var _excluded = ["href", "children", "backgroundColor", "newWindowLabel", "padding", "paddingBlock", "paddingBlockStart", "paddingBlockEnd", "paddingInline", "paddingInlineStart", "paddingInlineEnd", "onClick", "interactionName", "componentName", "analyticsContext", "aria-label", "aria-labelledby", "style", "target", "testId", "xcss"],
   _excluded2 = ["className"];
 /**
  * @jsxRuntime classic
@@ -47,6 +47,7 @@ var baseStyles = css({
 });
 var IS_EXTERNAL_LINK_REGEX = /^(?:(http|https):\/\/)/;
 var IS_NON_HTTP_BASED = /^(((mailto|tel|sms):)|(#))/;
+// Comma is added here to add a slight pause between announcing the anchor label and "opens in new window"
 var OPENS_NEW_WINDOW_LABEL = '(opens new window)';
 
 /**
@@ -62,6 +63,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
   var href = _ref.href,
     children = _ref.children,
     backgroundColor = _ref.backgroundColor,
+    newWindowLabel = _ref.newWindowLabel,
     padding = _ref.padding,
     paddingBlock = _ref.paddingBlock,
     paddingBlockStart = _ref.paddingBlockStart,
@@ -97,7 +99,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "11.0.0",
+    packageVersion: "11.0.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });
@@ -136,7 +138,8 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     href: !isRouterLink && typeof href !== 'string' ? undefined : href,
     target: target,
     onClick: onClick,
-    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? "".concat(ariaLabel, " ").concat(OPENS_NEW_WINDOW_LABEL) : ariaLabel,
+    "aria-label": ariaLabel && target === '_blank' && !ariaLabelledBy ? //`${ariaLabel} ${OPENS_NEW_WINDOW_LABEL}`
+    "".concat(ariaLabel, " , ").concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL) : ariaLabel,
     "aria-labelledby": ariaLabelledBy && target === '_blank' ? "".concat(ariaLabelledBy, " ").concat(opensNewWindowLabelId) : ariaLabelledBy,
     css: [baseStyles, focusRingStyles,
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
@@ -161,7 +164,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     "data-is-router-link": testId ? isRouterLink ? 'true' : 'false' : undefined
   }), children, target === '_blank' && (children && !ariaLabel && !ariaLabelledBy || ariaLabelledBy) && jsx(VisuallyHidden, {
     id: opensNewWindowLabelId
-  }, OPENS_NEW_WINDOW_LABEL));
+  }, ", ".concat(newWindowLabel ? newWindowLabel : OPENS_NEW_WINDOW_LABEL)));
 };
 
 // Workarounds to support generic types with forwardRef

package/dist/esm/components/inline.js

@@ -4,7 +4,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  * @jsxRuntime classic
  */
 /** @jsx jsx */
-import { Children, forwardRef, Fragment, memo } from 'react';
+import React, { Children, forwardRef, Fragment, memo } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/components/pressable.js

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

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

@@ -33,6 +33,10 @@ type BaseAnchorProps = {
      * Token representing background color with a built-in fallback value.
      */
     backgroundColor?: BackgroundColor;
+    /**
+     * Use this to set a label for assistive technology that describes the link as opening in a new window. The default label is "(opens new window)".
+     */
+    newWindowLabel?: string;
     /**
      * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
      *
@@ -85,7 +89,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
+declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, newWindowLabel, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
 /**
  * __Anchor__
  *

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  */
 /** @jsx jsx */
-import { type ElementType, type ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type InlineProps<T extends ElementType = 'div'> = {
@@ -42,7 +42,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
     /**
      * Renders a separator string between each child.
      */
-    separator?: string;
+    separator?: React.ReactNode;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -66,7 +66,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
  * ```
  *
  */
-declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+declare const Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
     /**
      * The DOM element to render as the Inline. Defaults to `div`.
      */
@@ -103,7 +103,7 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
     /**
      * Renders a separator string between each child.
      */
-    separator?: string | undefined;
+    separator?: React.ReactNode;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -112,5 +112,5 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      * Forwarded ref element.
      */
     ref?: any;
-} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & React.RefAttributes<any>>>;
 export default Inline;

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

@@ -33,6 +33,10 @@ type BaseAnchorProps = {
      * Token representing background color with a built-in fallback value.
      */
     backgroundColor?: BackgroundColor;
+    /**
+     * Use this to set a label for assistive technology that describes the link as opening in a new window. The default label is "(opens new window)".
+     */
+    newWindowLabel?: string;
     /**
      * Tokens representing CSS shorthand for `paddingBlock` and `paddingInline` together.
      *
@@ -85,7 +89,7 @@ export type AnchorProps<RouterLinkConfig extends Record<string, any> = never> =
  * - [Code](https://atlassian.design/components/primitives/anchor/code)
  * - [Usage](https://atlassian.design/components/primitives/anchor/usage)
  */
-declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
+declare const AnchorNoRef: <RouterLinkConfig extends Record<string, any> = never>({ href, children, backgroundColor, newWindowLabel, padding, paddingBlock, paddingBlockStart, paddingBlockEnd, paddingInline, paddingInlineStart, paddingInlineEnd, onClick: providedOnClick, interactionName, componentName, analyticsContext, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, style, target, testId, xcss, ...htmlAttributes }: AnchorProps<RouterLinkConfig>, ref?: Ref<HTMLAnchorElement>) => jsx.JSX.Element;
 /**
  * __Anchor__
  *

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

@@ -2,7 +2,7 @@
  * @jsxRuntime classic
  */
 /** @jsx jsx */
-import { type ElementType, type ReactNode } from 'react';
+import React, { type ElementType, type ReactNode } from 'react';
 import { type Space } from '../xcss/style-maps.partial';
 import type { AlignBlock, AlignInline, BasePrimitiveProps, Grow, Spread } from './types';
 export type InlineProps<T extends ElementType = 'div'> = {
@@ -42,7 +42,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
     /**
      * Renders a separator string between each child.
      */
-    separator?: string;
+    separator?: React.ReactNode;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -66,7 +66,7 @@ export type InlineProps<T extends ElementType = 'div'> = {
  * ```
  *
  */
-declare const Inline: import("react").MemoExoticComponent<import("react").ForwardRefExoticComponent<Pick<{
+declare const Inline: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<{
     /**
      * The DOM element to render as the Inline. Defaults to `div`.
      */
@@ -103,7 +103,7 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
     /**
      * Renders a separator string between each child.
      */
-    separator?: string | undefined;
+    separator?: React.ReactNode;
     /**
      * Elements to be rendered inside the Inline.
      */
@@ -112,5 +112,5 @@ declare const Inline: import("react").MemoExoticComponent<import("react").Forwar
      * Forwarded ref element.
      */
     ref?: any;
-} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & import("react").RefAttributes<any>>>;
+} & BasePrimitiveProps, "space" | "separator" | "children" | "as" | keyof BasePrimitiveProps | "alignInline" | "alignBlock" | "shouldWrap" | "spread" | "grow" | "rowSpace"> & React.RefAttributes<any>>>;
 export default Inline;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "11.0.0",
+	"version": "11.0.2",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -128,7 +128,7 @@
 		"@atlaskit/css": "^0.3.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/interaction-context": "^2.1.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.54.0",
 		"@atlaskit/visually-hidden": "^1.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",