@atlaskit/primitives 14.7.0 → 14.7.2

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/primitives
 
+## 14.7.2
+
+### Patch Changes
+
+- [#152840](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/152840)
+  [`c6830ce5e4911`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c6830ce5e4911) -
+  Fix bug in `compiled-fork-stage1` codemod in which deprecated Pressable props were not being moved
+  into the `xcss` prop.
+
+## 14.7.1
+
+### Patch Changes
+
+- [#148964](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/148964)
+  [`79dddcb8a67c0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/79dddcb8a67c0) -
+  Add tabindex="0" to Pressable for Safari so that click events are fired
+- Updated dependencies
+
 ## 14.7.0
 
 ### Minor Changes

package/codemods/compiled-fork-stage1/transform.tsx

@@ -1,6 +1,6 @@
 import type { API, FileInfo, JSXAttribute } from 'jscodeshift';
 
-const ANCHOR_XCSS_PROPS = [
+const ANCHOR_PRESSABLE_XCSS_PROPS = [
 	'backgroundColor',
 	'padding',
 	'paddingBlock',
@@ -56,21 +56,21 @@ function transform(file: FileInfo, { jscodeshift: j }: API) {
 		}
 	}
 
-	// Find JSX elements for Grid and Anchor
+	// Find JSX elements for Grid, Anchor and Pressable
 	root.find(j.JSXElement).forEach((path) => {
 		if (!j.JSXIdentifier.check(path.node.openingElement.name)) {
 			return;
 		}
 
 		const elementName = path.node.openingElement.name.name;
-		if (elementName !== 'Grid' && elementName !== 'Anchor') {
+		if (elementName !== 'Grid' && elementName !== 'Anchor' && elementName !== 'Pressable') {
 			return;
 		}
 
 		const attributes = path.node.openingElement.attributes || [];
 		const props = attributes.filter((attr) => j.JSXAttribute.check(attr)) as Array<JSXAttribute>;
 
-		const xcssProps = elementName === 'Grid' ? GRID_XCSS_PROPS : ANCHOR_XCSS_PROPS;
+		const xcssProps = elementName === 'Grid' ? GRID_XCSS_PROPS : ANCHOR_PRESSABLE_XCSS_PROPS;
 		const propsToTransform = props.filter(
 			(prop) => j.JSXIdentifier.check(prop.name) && xcssProps.includes(prop.name.name),
 		);

package/dist/cjs/compiled/components/anchor.js

@@ -70,7 +70,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/cjs/compiled/components/pressable.js

@@ -15,10 +15,11 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react2 = require("@compiled/react");
 var _analyticsNext = require("@atlaskit/analytics-next");
+var _deviceCheck = require("@atlaskit/ds-lib/device-check");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _interactionContext = _interopRequireDefault(require("@atlaskit/interaction-context"));
 var _focusable = _interopRequireDefault(require("./focusable"));
-var _excluded = ["children", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss"],
+var _excluded = ["children", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss", "tabIndex"],
   _excluded2 = ["className"];
 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 && {}.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; }
@@ -49,6 +50,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     style = _ref.style,
     testId = _ref.testId,
     xcss = _ref.xcss,
+    tabIndex = _ref.tabIndex,
     htmlAttributes = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var interactionContext = (0, _react.useContext)(_interactionContext.default);
   var handleClick = (0, _react.useCallback)(function (e, analyticsEvent) {
@@ -60,7 +62,7 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -73,6 +75,11 @@ var Pressable = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
   , (0, _extends2.default)({
     as: "button"
+    // Safari does not apply focus to buttons on click like other browsers, which means click events will not be fired.
+    // Adding a tabIndex of 0 to the button will allow it to be focused on click.
+    // This is a known issue in Safari that is meant to be "intended", see https://bugs.webkit.org/show_bug.cgi?id=22261
+    ,
+    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : (0, _deviceCheck.isSafari)() && !isDisabled ? 0 : undefined
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style

package/dist/cjs/components/anchor.js

@@ -100,7 +100,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

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: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/dist/es2019/compiled/components/anchor.js

@@ -55,7 +55,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/compiled/components/pressable.js

@@ -6,6 +6,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext } from 'react';
 import { cx } from '@compiled/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { isSafari } from '@atlaskit/ds-lib/device-check';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import Focusable from './focusable';
@@ -34,6 +35,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
   style,
   testId,
   xcss,
+  tabIndex,
   ...htmlAttributes
 }, ref) => {
   const interactionContext = useContext(InteractionContext);
@@ -46,7 +48,7 @@ const Pressable = /*#__PURE__*/forwardRef(({
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -61,6 +63,11 @@ const Pressable = /*#__PURE__*/forwardRef(({
   // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
   , _extends({
     as: "button"
+    // Safari does not apply focus to buttons on click like other browsers, which means click events will not be fired.
+    // Adding a tabIndex of 0 to the button will allow it to be focused on click.
+    // This is a known issue in Safari that is meant to be "intended", see https://bugs.webkit.org/show_bug.cgi?id=22261
+    ,
+    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : isSafari() && !isDisabled ? 0 : undefined
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style

package/dist/es2019/components/anchor.js

@@ -90,7 +90,7 @@ const AnchorNoRef = ({
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/es2019/components/pressable.js

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

package/dist/esm/compiled/components/anchor.js

@@ -60,7 +60,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

package/dist/esm/compiled/components/pressable.js

@@ -1,7 +1,7 @@
 /* pressable.tsx generated by @compiled/babel-plugin v0.36.1 */
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss"],
+var _excluded = ["children", "isDisabled", "type", "onClick", "interactionName", "componentName", "analyticsContext", "style", "testId", "xcss", "tabIndex"],
   _excluded2 = ["className"];
 import "./pressable.compiled.css";
 import * as React from 'react';
@@ -9,6 +9,7 @@ import { ax, ix } from "@compiled/react/runtime";
 import { forwardRef, useCallback, useContext } from 'react';
 import { cx } from '@compiled/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import { isSafari } from '@atlaskit/ds-lib/device-check';
 import noop from '@atlaskit/ds-lib/noop';
 import InteractionContext from '@atlaskit/interaction-context';
 import Focusable from './focusable';
@@ -39,6 +40,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style = _ref.style,
     testId = _ref.testId,
     xcss = _ref.xcss,
+    tabIndex = _ref.tabIndex,
     htmlAttributes = _objectWithoutProperties(_ref, _excluded);
   var interactionContext = useContext(InteractionContext);
   var handleClick = useCallback(function (e, analyticsEvent) {
@@ -50,7 +52,7 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Pressable',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });
@@ -63,6 +65,11 @@ var Pressable = /*#__PURE__*/forwardRef(function (_ref, ref) {
   // @ts-expect-error we don't allow `button` on Focusable for makers as they should use Pressable instead
   , _extends({
     as: "button"
+    // Safari does not apply focus to buttons on click like other browsers, which means click events will not be fired.
+    // Adding a tabIndex of 0 to the button will allow it to be focused on click.
+    // This is a known issue in Safari that is meant to be "intended", see https://bugs.webkit.org/show_bug.cgi?id=22261
+    ,
+    tabIndex: tabIndex !== null && tabIndex !== void 0 ? tabIndex : isSafari() && !isDisabled ? 0 : undefined
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- TODO: Properly type this and allow pass-through if we can determine the type
     ,
     style: style

package/dist/esm/components/anchor.js

@@ -94,7 +94,7 @@ var AnchorNoRef = function AnchorNoRef(_ref, ref) {
     action: 'clicked',
     componentName: componentName || 'Anchor',
     packageName: "@atlaskit/primitives",
-    packageVersion: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'link'
   });

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: "14.7.0",
+    packageVersion: "14.7.2",
     analyticsData: analyticsContext,
     actionSubject: 'button'
   });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/primitives",
-	"version": "14.7.0",
+	"version": "14.7.2",
 	"description": "Primitives are token-backed low-level building blocks.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -155,7 +155,7 @@
 		"@atlaskit/flag": "^17.1.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^25.6.0",
+		"@atlaskit/icon": "^26.0.0",
 		"@atlaskit/icon-object": "^7.1.0",
 		"@atlaskit/image": "^3.0.0",
 		"@atlaskit/link": "^3.1.0",
@@ -173,6 +173,7 @@
 		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
 		"@testing-library/react-hooks": "^8.0.1",
+		"@testing-library/user-event": "^14.4.3",
 		"csstype": "^3.1.0",
 		"jscodeshift": "^17.0.0",
 		"react-dom": "^18.2.0",