@atlaskit/smart-card 21.0.3 → 21.0.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @atlaskit/smart-card
 
+## 21.0.4
+
+### Patch Changes
+
+- [`4347099f4ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/4347099f4ba) - [ux] Blue highlight is removed for when a user right-clicks on a Flex UI Smart Link
+
 ## 21.0.3
 
 ### Patch Changes

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "21.0.3",
+	"version": "21.0.4",
 	"sideEffects": false
 }

package/dist/cjs/view/FlexibleCard/components/blocks/block/index.js

@@ -20,7 +20,7 @@ var _utils = require("../utils");
 var _templateObject;
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
+  return (0, _core.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), (0, _utils.getBaseStyles)(direction, size), _utils.highlightRemoveStyles, (0, _utils.getGapSize)(size), _constants.ElementName.SourceBranch, _constants.ElementName.TargetBranch, _constants.ElementName.TargetBranch, _constants.ElementName.SourceBranch);
 };
 /**
  * A block represents a collection of elements and actions that are arranged

package/dist/cjs/view/FlexibleCard/components/blocks/utils.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
+exports.renderElementItems = exports.renderChildren = exports.renderActionItems = exports.highlightRemoveStyles = exports.getGapSize = exports.getBaseStyles = exports.ElementDisplaySchema = void 0;
 
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 
@@ -38,7 +38,7 @@ var _elementGroup = _interopRequireDefault(require("./element-group"));
 var _excluded = ["name"],
     _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
 
-var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
+var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 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); }
 
@@ -86,6 +86,8 @@ var getBaseStyles = function getBaseStyles(direction, size) {
 };
 
 exports.getBaseStyles = getBaseStyles;
+var highlightRemoveStyles = (0, _core.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  outline: none !important;\n  outline-color: inherit;\n  color: inherit;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
+exports.highlightRemoveStyles = highlightRemoveStyles;
 
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/_react.default.isValidElement(node) && node.type === _actionGroup.default;

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "21.0.3",
+	"version": "21.0.4",
 	"sideEffects": false
 }

package/dist/es2019/view/FlexibleCard/components/blocks/block/index.js

@@ -2,10 +2,11 @@
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
-import { getBaseStyles, getGapSize, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
 
 const getBlockStyles = (direction, size) => css`
   ${getBaseStyles(direction, size)}
+  ${highlightRemoveStyles}
   justify-content: flex-start;
   [data-separator] + [data-separator]:before {
     content: '•';

package/dist/es2019/view/FlexibleCard/components/blocks/utils.js

@@ -84,6 +84,17 @@ export const getBaseStyles = (direction, size) => css`
     min-width: fit-content;
   }
 `;
+export const highlightRemoveStyles = css`
+  outline: none !important;
+  outline-color: inherit;
+  color: inherit;
+  -webkit-tap-highlight-color: transparent;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+`;
 
 const isActionGroup = node => /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;
 

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/smart-card",
-	"version": "21.0.3",
+	"version": "21.0.4",
 	"sideEffects": false
 }

package/dist/esm/view/FlexibleCard/components/blocks/block/index.js

@@ -6,10 +6,10 @@ var _templateObject;
 import React from 'react';
 import { css, jsx } from '@emotion/core';
 import { ElementName, SmartLinkDirection, SmartLinkSize } from '../../../../../constants';
-import { getBaseStyles, getGapSize, renderChildren } from '../utils';
+import { getBaseStyles, getGapSize, highlightRemoveStyles, renderChildren } from '../utils';
 
 var getBlockStyles = function getBlockStyles(direction, size) {
-  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), getBaseStyles(direction, size), getGapSize(size), ElementName.SourceBranch, ElementName.TargetBranch, ElementName.TargetBranch, ElementName.SourceBranch);
+  return css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  ", "\n  ", "\n  justify-content: flex-start;\n  [data-separator] + [data-separator]:before {\n    content: '\u2022';\n    margin-right: ", "rem;\n  }\n  // Pull request elements: source branch \u2192 target branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2192';\n  }\n  // Pull request elements: target branch \u2190 source branch\n  [data-smart-element='", "']\n    + [data-smart-element='", "']:before {\n    content: '\u2190';\n  }\n"])), getBaseStyles(direction, size), highlightRemoveStyles, getGapSize(size), ElementName.SourceBranch, ElementName.TargetBranch, ElementName.TargetBranch, ElementName.SourceBranch);
 };
 /**
  * A block represents a collection of elements and actions that are arranged

package/dist/esm/view/FlexibleCard/components/blocks/utils.js

@@ -6,7 +6,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 var _excluded = ["name"],
     _excluded2 = ["name", "hideContent", "hideIcon", "onClick"];
 
-var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3;
+var _ElementDisplaySchema, _templateObject, _templateObject2, _templateObject3, _templateObject4;
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 
@@ -52,6 +52,7 @@ export var getGapSize = function getGapSize(size) {
 export var getBaseStyles = function getBaseStyles(direction, size) {
   return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n  align-items: center;\n  display: flex;\n  gap: ", "rem;\n  line-height: 1rem;\n  min-width: 0;\n  overflow: hidden;\n  ", ";\n  &:empty {\n    display: none;\n  }\n  & > * {\n    min-width: 0;\n  }\n  & > [data-fit-to-content] {\n    min-width: fit-content;\n  }\n"])), getGapSize(size), getDirectionStyles(direction));
 };
+export var highlightRemoveStyles = css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n  outline: none !important;\n  outline-color: inherit;\n  color: inherit;\n  -webkit-tap-highlight-color: transparent;\n  -webkit-touch-callout: none;\n  -webkit-user-select: none;\n  -moz-user-select: none;\n  -ms-user-select: none;\n  user-select: none;\n"])));
 
 var isActionGroup = function isActionGroup(node) {
   return /*#__PURE__*/React.isValidElement(node) && node.type === ActionGroup;

package/dist/types/view/FlexibleCard/components/blocks/utils.d.ts

@@ -7,6 +7,7 @@ export declare type ElementDisplaySchemaType = 'inline' | 'block';
 export declare const ElementDisplaySchema: Record<ElementName, ElementDisplaySchemaType[]>;
 export declare const getGapSize: (size: SmartLinkSize) => number;
 export declare const getBaseStyles: (direction: SmartLinkDirection, size: SmartLinkSize) => SerializedStyles;
+export declare const highlightRemoveStyles: SerializedStyles;
 export declare const renderChildren: (children: React.ReactNode, size: SmartLinkSize) => React.ReactNode;
 export declare const renderElementItems: (items?: ElementItem[], display?: ElementDisplaySchemaType) => React.ReactNode | undefined;
 export declare const renderActionItems: (items?: ActionItem[], size?: SmartLinkSize, appearance?: Appearance | undefined, asDropDownItems?: boolean | undefined, onActionItemClick?: (() => void) | undefined) => React.ReactNode | undefined;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/smart-card",
-  "version": "21.0.3",
+  "version": "21.0.4",
   "description": "Smart card component",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"