@atlaskit/editor-common 76.9.0 → 76.9.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-common
 
+## 76.9.2
+
+### Patch Changes
+
+- [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650) [`46a9feaf8d0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/46a9feaf8d0) - Adjust keyboard shortcut position in the element list to support reverted @atlaskit/menu styles
+
+## 76.9.1
+
+### Patch Changes
+
+- [#40437](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40437) [`24a1d9ae0b6`](https://bitbucket.org/atlassian/atlassian-frontend/commits/24a1d9ae0b6) - [ux] Add visible labels for hyperlink input and text description input and remove placeholders because Placeholder text disappears when a user starts to type into the mentioned combobox field, thus users with cognitive impairments (such as dyslexia or attention disorders) and the elderly may face trouble remembering the purpose of the field if the label is not visible at all times as the place holder disappears as soon as users start typing.
+
 ## 76.9.0
 
 ### Minor Changes

package/dist/cjs/__tests_external__/page-objects/EditorSmartLink.js

@@ -30,7 +30,7 @@ var EditorSmartLinkPageObject = exports.EditorSmartLinkPageObject = /*#__PURE__*
       displayCardOption: 'block-appearance',
       displayEmbedOption: 'embed-appearance',
       linkUrl: 'link-url',
-      linkLabel: 'link-label'
+      linkLabel: 'link-text'
     });
     (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "ariaLabels", {
       editLink: 'Edit link',

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -233,7 +233,7 @@ var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
 });
 var elementItemsWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: ", ";\n    }\n  }\n"])), _constants2.ELEMENT_LIST_PADDING, _constants2.ELEMENT_LIST_PADDING, "var(--ds-border-focused, ".concat(_colors.B100, ")"), "var(--ds-space-050, 4px)");
 var elementItemWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    button {\n      height: 75px;\n      align-items: flex-start;\n      padding: ", " ", " 11px;\n    }\n  }\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
-var itemBody = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: -2px; // Fixes the Item Icon and text's alignment issue\n"])));
+var itemBody = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: ", "; // Fixes the Item Icon and text's alignment issue\n"])), "var(--ds-space-negative-025, -2px)");
 
 /*
  * -webkit-line-clamp is also supported by firefox 🎉
@@ -244,7 +244,7 @@ var itemDescription = (0, _react2.css)(_templateObject6 || (_templateObject6 = (
 var itemText = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: inherit;\n  white-space: initial;\n"])));
 var itemTitleWrapper = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block\n"])));
 var itemTitle = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
-var itemAfter = (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
+var itemAfter = (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n\n  // Prevents item from being cut off due to negative margin\n  padding-top: ", ";\n  margin-bottom: ", ";\n"])), "var(--ds-space-025, 2px)", "var(--ds-space-negative-025, -2px)");
 var itemIconStyle = (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  img {\n    height: 40px;\n    width: 40px;\n    object-fit: cover;\n  }\n"])));
 var MemoizedElementListWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
   component: 'ElementList'

package/dist/cjs/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -26,19 +26,17 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _ = _interopRequireDefault(require("@atlaskit/icon-object/glyph/page/16"));
 var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
-var _alignLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/align-left"));
-var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/link"));
 var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _analytics = require("../../../analytics");
-var _messages = require("../../../messages");
 var _ui = require("../../../ui");
 var _utils = require("../../../utils");
 var _LinkSearchList = _interopRequireDefault(require("../../LinkSearch/LinkSearchList"));
 var _ToolbarComponents = require("../../LinkSearch/ToolbarComponents");
 var _transformTimeStamp = require("../../LinkSearch/transformTimeStamp");
 var _utils2 = require("./utils");
-var _templateObject, _templateObject2, _templateObject3, _templateObject4;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 /** @jsx jsx */
 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; }
@@ -51,8 +49,11 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var visuallyHiddenStyles = exports.visuallyHiddenStyles = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  clip: rect(1px, 1px, 1px, 1px);\n  clip-path: inset(50%);\n  height: 1px;\n  width: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n"])));
 var RECENT_SEARCH_LIST_SIZE = exports.RECENT_SEARCH_LIST_SIZE = 5;
 var clearText = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  cursor: pointer;\n  padding: 0;\n  margin-right: ", ";\n  color: ", ";\n  background: transparent;\n  border: none;\n"])), "var(--ds-space-100, 8px)", "var(--ds-icon-subtle, ".concat(_colors.N90, ")"));
-var textInputWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n  border-top: 1px solid ", ";\n  border-bottom: 1px solid ", ";\n"])), _ToolbarComponents.inputWrapper, "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-border, ".concat(_colors.N30, ")"));
-var iconWrapper = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n  padding: ", " ", ";\n  width: 18px;\n"])), "var(--ds-icon-subtle, ".concat(_colors.N80, ")"), "var(--ds-space-050, 4px)", "var(--ds-space-100, 8px)");
+var clearTextWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  position: absolute;\n  right: 0;\n"])));
+var containerPadding = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  padding: ", " ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-100, 8px)");
+var textLabelMargin = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  margin-top: ", ";\n"])), "var(--ds-space-150, 12px)");
+var inputLabel = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  font-size: ", "px;\n  color: ", ";\n  font-weight: 500;\n  padding-bottom: ", ";\n"])), (0, _constants.fontSizeSmall)(), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
+var inputWrapperPosition = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  position: relative;\n"])));
 var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
   displayText: {
     id: 'fabric.editor.displayText',
@@ -79,10 +80,15 @@ var messages = exports.messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
     description: 'Announce search results for screen-reader users.'
   },
-  linkAriaLabel: {
-    id: 'fabric.editor.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkVisibleLabel: {
+    id: 'fabric.editor.hyperlink.linkVisibleLabel',
+    defaultMessage: 'Paste or search for link',
+    description: 'Visible label for link input in hyperlink floating control'
+  },
+  textVisibleLabel: {
+    id: 'fabric.editor.hyperlink.textVisibleLabel',
+    defaultMessage: 'Display text (optional)',
+    description: 'Visible label for text input in hyperlink floating control'
   }
 });
 var defaultIcon = (0, _react2.jsx)(_.default, {
@@ -801,14 +807,12 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
       var _this$props5 = this.props,
         formatMessage = _this$props5.intl.formatMessage,
         activityProvider = _this$props5.activityProvider;
-      var placeholder = formatMessage(activityProvider ? _messages.linkToolbarMessages.placeholder : _messages.linkToolbarMessages.linkPlaceholder);
-      var formatLinkAddressText = formatMessage(_messages.linkToolbarMessages.linkAddress);
       var formatClearLinkText = formatMessage(messages.clearLink);
-      var formatDisplayText = formatMessage(messages.displayText);
       var screenReaderDescriptionId = 'search-recent-links-field-description';
       var linkSearchListId = 'hyperlink-search-list';
       var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : '';
-
+      var linkSearchInputId = 'search-recent-links-field-id';
+      var displayTextInputId = 'display-text-filed-id';
       // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
       // as the Aria design pattern for combobox does not work in this case
       // for details: https://a11y-internal.atlassian.net/browse/AK-740
@@ -817,17 +821,14 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         "aria-label": "Hyperlink Edit",
         className: "recent-list"
       }, (0, _react2.jsx)("div", {
-        css: [_ToolbarComponents.container, !!activityProvider && _ToolbarComponents.containerWithProvider],
+        css: [_ToolbarComponents.container, !!activityProvider && _ToolbarComponents.containerWithProvider, containerPadding],
         ref: this.wrapperRef
-      }, (0, _react2.jsx)("div", {
-        css: _ToolbarComponents.inputWrapper
-      }, (0, _react2.jsx)("span", {
-        css: iconWrapper
-      }, (0, _react2.jsx)(_tooltip.default, {
-        content: formatLinkAddressText
-      }, (0, _react2.jsx)(_link.default, {
-        label: formatLinkAddressText
-      }))), screenReaderText && (0, _react2.jsx)(_ui.Announcer, {
+      }, (0, _react2.jsx)("label", {
+        htmlFor: linkSearchInputId,
+        css: inputLabel
+      }, formatMessage(messages.linkVisibleLabel)), (0, _react2.jsx)("div", {
+        css: [_ToolbarComponents.inputWrapper, inputWrapperPosition]
+      }, screenReaderText && (0, _react2.jsx)(_ui.Announcer, {
         ariaLive: "assertive",
         text: screenReaderText,
         ariaRelevant: "additions",
@@ -846,7 +847,6 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         ref: function ref(ele) {
           return _this2.urlInputContainer = ele;
         },
-        placeholder: placeholder,
         testId: 'link-url',
         onSubmit: this.handleSubmit,
         onChange: this.updateInput,
@@ -855,8 +855,11 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         },
         onCancel: this.handleCancel,
         defaultValue: displayUrl,
-        onKeyDown: this.handleKeyDown
-      }), displayUrl && (0, _react2.jsx)(_tooltip.default, {
+        onKeyDown: this.handleKeyDown,
+        inputId: linkSearchInputId
+      }), displayUrl && (0, _react2.jsx)("div", {
+        css: clearTextWrapper
+      }, (0, _react2.jsx)(_tooltip.default, {
         content: formatClearLinkText
       }, (0, _react2.jsx)("button", {
         type: "button",
@@ -865,27 +868,25 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         tabIndex: 0
       }, (0, _react2.jsx)(_crossCircle.default, {
         label: formatClearLinkText
-      })))), (0, _react2.jsx)("div", {
-        css: textInputWrapper
-      }, (0, _react2.jsx)("span", {
-        css: iconWrapper
-      }, (0, _react2.jsx)(_tooltip.default, {
-        content: formatDisplayText
-      }, (0, _react2.jsx)(_alignLeft.default, {
-        label: formatDisplayText
-      }))), (0, _react2.jsx)(_ui.PanelTextInput, {
+      }))))), (0, _react2.jsx)("label", {
+        htmlFor: displayTextInputId,
+        css: [inputLabel, textLabelMargin]
+      }, formatMessage(messages.textVisibleLabel)), (0, _react2.jsx)("div", {
+        css: [_ToolbarComponents.inputWrapper, inputWrapperPosition]
+      }, (0, _react2.jsx)(_ui.PanelTextInput, {
         ref: function ref(ele) {
           return _this2.displayTextInputContainer = ele;
         },
-        placeholder: formatDisplayText,
-        ariaLabel: formatMessage(messages.linkAriaLabel),
-        testId: 'link-label',
+        testId: 'link-text',
         onChange: this.updateTextInput,
         onCancel: this.handleCancel,
         defaultValue: displayText,
         onSubmit: this.handleSubmit,
-        onKeyDown: this.handleKeyDown
-      }), displayText && (0, _react2.jsx)(_tooltip.default, {
+        onKeyDown: this.handleKeyDown,
+        inputId: displayTextInputId
+      }), displayText && (0, _react2.jsx)("div", {
+        css: clearTextWrapper
+      }, (0, _react2.jsx)(_tooltip.default, {
         content: formatMessage(messages.clearText)
       }, (0, _react2.jsx)("button", {
         type: "button",
@@ -894,7 +895,7 @@ var HyperlinkLinkAddToolbar = exports.HyperlinkLinkAddToolbar = /*#__PURE__*/fun
         onKeyDown: this.handleClearTextKeyDown
       }, (0, _react2.jsx)(_crossCircle.default, {
         label: formatMessage(messages.clearText)
-      })))), (0, _react2.jsx)("div", {
+      }))))), (0, _react2.jsx)("div", {
         css: visuallyHiddenStyles,
         "aria-live": "polite",
         "aria-atomic": "true",

package/dist/cjs/link/LinkSearch/LinkSearchList.js

@@ -14,12 +14,13 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _colors = require("@atlaskit/theme/colors");
 var _LinkSearchListItem = _interopRequireDefault(require("./LinkSearchListItem"));
 var _templateObject, _templateObject2, _templateObject3;
 /** @jsx jsx */
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-var listContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n"])));
+var listContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  padding-top: 0;\n  margin-top: ", ";\n  border-top: 1px solid ", ";\n"])), "var(--ds-space-150, 12px)", "var(--ds-border, ".concat(_colors.N30, ")"));
 var spinnerContainer = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  text-align: center;\n  min-height: 80px;\n  margin-top: 30px;\n"])));
 var linkSearchList = exports.linkSearchList = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  padding: 0;\n  list-style: none;\n"])));
 var LinkSearchList = exports.default = /*#__PURE__*/function (_PureComponent) {

package/dist/cjs/monitoring/error.js

@@ -16,7 +16,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 var SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 var packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-var packageVersion = "76.9.0";
+var packageVersion = "76.9.2";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/cjs/ui/DropList/index.js

@@ -24,7 +24,7 @@ var _templateObject, _templateObject2, _templateObject3;
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } } /** @jsx jsx */
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "76.9.0";
+var packageVersion = "76.9.2";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 var DropList = /*#__PURE__*/function (_Component) {

package/dist/cjs/ui/PanelTextInput/index.js

@@ -119,7 +119,8 @@ var PanelTextInput = exports.default = /*#__PURE__*/function (_PureComponent) {
         ariaControls = _this$props2.ariaControls,
         ariaExpanded = _this$props2.ariaExpanded,
         ariaAutoComplete = _this$props2.ariaAutoComplete,
-        role = _this$props2.role;
+        role = _this$props2.role,
+        inputId = _this$props2.inputId;
       var value = this.state.value;
       return (0, _react2.jsx)("input", {
         css: [_styles.panelTextInput, width !== undefined && (0, _styles.panelTextInputWithCustomWidth)(width)],
@@ -139,7 +140,8 @@ var PanelTextInput = exports.default = /*#__PURE__*/function (_PureComponent) {
         onBlur: this.onBlur,
         ref: this.handleRef,
         maxLength: maxLength,
-        "aria-label": ariaLabel
+        "aria-label": ariaLabel,
+        id: inputId
       });
     }
   }, {

package/dist/cjs/ui/PanelTextInput/styles.js

@@ -11,7 +11,7 @@ var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
 var _colors = require("@atlaskit/theme/colors");
 var _templateObject, _templateObject2;
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
-var panelTextInput = exports.panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    background: transparent;\n    border: 0;\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: 0;\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-text-subtle, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
+var panelTextInput = exports.panelTextInput = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    background: transparent;\n    border: 2px solid ", ";\n    border-radius: 0;\n    box-sizing: content-box;\n    color: ", ";\n    flex-grow: 1;\n    font-size: ", ";\n    line-height: 20px;\n    padding: ", " ", "\n      ", " ", ";\n    min-width: 145px;\n\n    /* Hides IE10+ built-in [x] clear input button */\n    &::-ms-clear {\n      display: none;\n    }\n\n    &:focus {\n      outline: none;\n      border-color: ", ";\n    }\n\n    &::placeholder {\n      color: ", ";\n    }\n  }\n"])), "var(--ds-border, ".concat(_colors.N30, ")"), "var(--ds-text-subtle, ".concat(_colors.N400, ")"), (0, _editorSharedStyles.relativeFontSizeToBase16)(13), "var(--ds-space-075, 6px)", "var(--ds-space-400, 32px)", "var(--ds-space-075, 6px)", "var(--ds-space-100, 8px)", "var(--ds-border-focused, ".concat(_colors.B100, ")"), "var(--ds-text-subtlest, ".concat(_colors.N100, ")"));
 var panelTextInputWithCustomWidth = exports.panelTextInputWithCustomWidth = function panelTextInputWithCustomWidth(width) {
   return (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  input& {\n    width: ", "px;\n  }\n"])), width);
 };

package/dist/es2019/__tests_external__/page-objects/EditorSmartLink.js

@@ -12,7 +12,7 @@ export class EditorSmartLinkPageObject extends InProductTestPageObject {
       displayCardOption: 'block-appearance',
       displayEmbedOption: 'embed-appearance',
       linkUrl: 'link-url',
-      linkLabel: 'link-label'
+      linkLabel: 'link-text'
     });
     _defineProperty(this, "ariaLabels", {
       editLink: 'Edit link',

package/dist/es2019/element-browser/components/ElementList/ElementList.js

@@ -269,7 +269,7 @@ const itemBody = css`
   line-height: 1.4;
   width: 100%;
 
-  margin-top: -2px; // Fixes the Item Icon and text's alignment issue
+  margin-top: ${"var(--ds-space-negative-025, -2px)"}; // Fixes the Item Icon and text's alignment issue
 `;
 
 /*
@@ -306,6 +306,10 @@ const itemTitle = css`
 `;
 const itemAfter = css`
   flex: 0 0 auto;
+
+  // Prevents item from being cut off due to negative margin
+  padding-top: ${"var(--ds-space-025, 2px)"};
+  margin-bottom: ${"var(--ds-space-negative-025, -2px)"};
 `;
 const itemIconStyle = css`
   img {

package/dist/es2019/link/LinkPicker/HyperlinkAddToolbar/HyperlinkAddToolbar.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
+
 import React, { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import debounce from 'lodash/debounce';
@@ -8,12 +9,10 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import Page16Icon from '@atlaskit/icon-object/glyph/page/16';
 import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import EditorAlignLeftIcon from '@atlaskit/icon/glyph/editor/align-left';
-import LinkIcon from '@atlaskit/icon/glyph/link';
-import { N30, N80, N90 } from '@atlaskit/theme/colors';
+import { N200, N90 } from '@atlaskit/theme/colors';
+import { fontSizeSmall } from '@atlaskit/theme/constants';
 import Tooltip from '@atlaskit/tooltip';
 import { ACTION, ACTION_SUBJECT, ACTION_SUBJECT_ID, EVENT_TYPE, fireAnalyticsEvent, INPUT_METHOD } from '../../../analytics';
-import { linkToolbarMessages as linkToolbarCommonMessages } from '../../../messages';
 import { Announcer, PanelTextInput } from '../../../ui';
 import { browser, normalizeUrl } from '../../../utils';
 import LinkSearchList from '../../LinkSearch/LinkSearchList';
@@ -44,15 +43,24 @@ const clearText = css`
   background: transparent;
   border: none;
 `;
-const textInputWrapper = css`
-  ${inputWrapper};
-  border-top: 1px solid ${`var(--ds-border, ${N30})`};
-  border-bottom: 1px solid ${`var(--ds-border, ${N30})`};
+const clearTextWrapper = css`
+  position: absolute;
+  right: 0;
+`;
+const containerPadding = css`
+  padding: ${"var(--ds-space-150, 12px)"} ${"var(--ds-space-100, 8px)"};
 `;
-const iconWrapper = css`
-  color: ${`var(--ds-icon-subtle, ${N80})`};
-  padding: ${"var(--ds-space-050, 4px)"} ${"var(--ds-space-100, 8px)"};
-  width: 18px;
+const textLabelMargin = css`
+  margin-top: ${"var(--ds-space-150, 12px)"};
+`;
+const inputLabel = css`
+  font-size: ${fontSizeSmall()}px;
+  color: ${`var(--ds-text-subtlest, ${N200})`};
+  font-weight: 500;
+  padding-bottom: ${"var(--ds-space-050, 4px)"};
+`;
+const inputWrapperPosition = css`
+  position: relative;
 `;
 export const messages = defineMessages({
   displayText: {
@@ -80,10 +88,15 @@ export const messages = defineMessages({
     defaultMessage: '{count, plural, =0 {no results} one {# result} other {# results}} found',
     description: 'Announce search results for screen-reader users.'
   },
-  linkAriaLabel: {
-    id: 'fabric.editor.hyperlink.linkAriaLabel',
-    defaultMessage: 'Link label',
-    description: 'aria label for a link'
+  linkVisibleLabel: {
+    id: 'fabric.editor.hyperlink.linkVisibleLabel',
+    defaultMessage: 'Paste or search for link',
+    description: 'Visible label for link input in hyperlink floating control'
+  },
+  textVisibleLabel: {
+    id: 'fabric.editor.hyperlink.textVisibleLabel',
+    defaultMessage: 'Display text (optional)',
+    description: 'Visible label for text input in hyperlink floating control'
   }
 });
 const defaultIcon = jsx(Page16Icon, {
@@ -663,14 +676,12 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       },
       activityProvider
     } = this.props;
-    const placeholder = formatMessage(activityProvider ? linkToolbarCommonMessages.placeholder : linkToolbarCommonMessages.linkPlaceholder);
-    const formatLinkAddressText = formatMessage(linkToolbarCommonMessages.linkAddress);
     const formatClearLinkText = formatMessage(messages.clearLink);
-    const formatDisplayText = formatMessage(messages.displayText);
     const screenReaderDescriptionId = 'search-recent-links-field-description';
     const linkSearchListId = 'hyperlink-search-list';
     const ariaActiveDescendant = selectedIndex > -1 ? `link-search-list-item-${selectedIndex}` : '';
-
+    const linkSearchInputId = 'search-recent-links-field-id';
+    const displayTextInputId = 'display-text-filed-id';
     // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
     // as the Aria design pattern for combobox does not work in this case
     // for details: https://a11y-internal.atlassian.net/browse/AK-740
@@ -679,17 +690,14 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       "aria-label": "Hyperlink Edit",
       className: "recent-list"
     }, jsx("div", {
-      css: [container, !!activityProvider && containerWithProvider],
+      css: [container, !!activityProvider && containerWithProvider, containerPadding],
       ref: this.wrapperRef
-    }, jsx("div", {
-      css: inputWrapper
-    }, jsx("span", {
-      css: iconWrapper
-    }, jsx(Tooltip, {
-      content: formatLinkAddressText
-    }, jsx(LinkIcon, {
-      label: formatLinkAddressText
-    }))), screenReaderText && jsx(Announcer, {
+    }, jsx("label", {
+      htmlFor: linkSearchInputId,
+      css: inputLabel
+    }, formatMessage(messages.linkVisibleLabel)), jsx("div", {
+      css: [inputWrapper, inputWrapperPosition]
+    }, screenReaderText && jsx(Announcer, {
       ariaLive: "assertive",
       text: screenReaderText,
       ariaRelevant: "additions",
@@ -706,7 +714,6 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       ariaAutoComplete: true,
       describedById: screenReaderDescriptionId,
       ref: ele => this.urlInputContainer = ele,
-      placeholder: placeholder,
       testId: 'link-url',
       onSubmit: this.handleSubmit,
       onChange: this.updateInput,
@@ -715,8 +722,11 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       },
       onCancel: this.handleCancel,
       defaultValue: displayUrl,
-      onKeyDown: this.handleKeyDown
-    }), displayUrl && jsx(Tooltip, {
+      onKeyDown: this.handleKeyDown,
+      inputId: linkSearchInputId
+    }), displayUrl && jsx("div", {
+      css: clearTextWrapper
+    }, jsx(Tooltip, {
       content: formatClearLinkText
     }, jsx("button", {
       type: "button",
@@ -725,25 +735,23 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       tabIndex: 0
     }, jsx(CrossCircleIcon, {
       label: formatClearLinkText
-    })))), jsx("div", {
-      css: textInputWrapper
-    }, jsx("span", {
-      css: iconWrapper
-    }, jsx(Tooltip, {
-      content: formatDisplayText
-    }, jsx(EditorAlignLeftIcon, {
-      label: formatDisplayText
-    }))), jsx(PanelTextInput, {
+    }))))), jsx("label", {
+      htmlFor: displayTextInputId,
+      css: [inputLabel, textLabelMargin]
+    }, formatMessage(messages.textVisibleLabel)), jsx("div", {
+      css: [inputWrapper, inputWrapperPosition]
+    }, jsx(PanelTextInput, {
       ref: ele => this.displayTextInputContainer = ele,
-      placeholder: formatDisplayText,
-      ariaLabel: formatMessage(messages.linkAriaLabel),
-      testId: 'link-label',
+      testId: 'link-text',
       onChange: this.updateTextInput,
       onCancel: this.handleCancel,
       defaultValue: displayText,
       onSubmit: this.handleSubmit,
-      onKeyDown: this.handleKeyDown
-    }), displayText && jsx(Tooltip, {
+      onKeyDown: this.handleKeyDown,
+      inputId: displayTextInputId
+    }), displayText && jsx("div", {
+      css: clearTextWrapper
+    }, jsx(Tooltip, {
       content: formatMessage(messages.clearText)
     }, jsx("button", {
       type: "button",
@@ -752,7 +760,7 @@ export class HyperlinkLinkAddToolbar extends PureComponent {
       onKeyDown: this.handleClearTextKeyDown
     }, jsx(CrossCircleIcon, {
       label: formatMessage(messages.clearText)
-    })))), jsx("div", {
+    }))))), jsx("div", {
       css: visuallyHiddenStyles,
       "aria-live": "polite",
       "aria-atomic": "true",

package/dist/es2019/link/LinkSearch/LinkSearchList.js

@@ -2,9 +2,12 @@
 import { PureComponent } from 'react';
 import { css, jsx } from '@emotion/react';
 import Spinner from '@atlaskit/spinner';
+import { N30 } from '@atlaskit/theme/colors';
 import LinkSearchListItem from './LinkSearchListItem';
 const listContainer = css`
   padding-top: 0;
+  margin-top: ${"var(--ds-space-150, 12px)"};
+  border-top: 1px solid ${`var(--ds-border, ${N30})`};
 `;
 const spinnerContainer = css`
   text-align: center;

package/dist/es2019/monitoring/error.js

@@ -1,6 +1,6 @@
 const SENTRY_DSN = 'https://0b10c8e02fb44d8796c047b102c9bee8@o55978.ingest.sentry.io/4505129224110080';
 const packageName = 'editor-common'; // Sentry doesn't accept '/' in its releases https://docs.sentry.io/platforms/javascript/configuration/releases/
-const packageVersion = "76.9.0";
+const packageVersion = "76.9.2";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // TODO: Sanitise the URL instead of just removing it

package/dist/es2019/ui/DropList/index.js

@@ -9,7 +9,7 @@ import { themed } from '@atlaskit/theme/components';
 import { borderRadius } from '@atlaskit/theme/constants';
 import Layer from '../Layer';
 const packageName = "@atlaskit/editor-common";
-const packageVersion = "76.9.0";
+const packageVersion = "76.9.2";
 const halfFocusRing = 1;
 const dropOffset = '0, 8';
 class DropList extends Component {

package/dist/es2019/ui/PanelTextInput/index.js

@@ -1,5 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 /** @jsx jsx */
+
 import { PureComponent } from 'react';
 import { jsx } from '@emotion/react';
 import { browser } from '../../utils';
@@ -98,7 +99,8 @@ export default class PanelTextInput extends PureComponent {
       ariaControls,
       ariaExpanded,
       ariaAutoComplete,
-      role
+      role,
+      inputId
     } = this.props;
     const {
       value
@@ -121,7 +123,8 @@ export default class PanelTextInput extends PureComponent {
       onBlur: this.onBlur,
       ref: this.handleRef,
       maxLength: maxLength,
-      "aria-label": ariaLabel
+      "aria-label": ariaLabel,
+      id: inputId
     });
   }
   focus() {

package/dist/es2019/ui/PanelTextInput/styles.js

@@ -1,18 +1,19 @@
 import { css } from '@emotion/react';
 import { relativeFontSizeToBase16 } from '@atlaskit/editor-shared-styles';
-import { N100, N400 } from '@atlaskit/theme/colors';
+import { B100, N100, N30, N400 } from '@atlaskit/theme/colors';
 // Normal .className gets overridden by input[type=text] hence this hack to produce input.className
 export const panelTextInput = css`
   input& {
     background: transparent;
-    border: 0;
+    border: 2px solid ${`var(--ds-border, ${N30})`};
     border-radius: 0;
     box-sizing: content-box;
     color: ${`var(--ds-text-subtle, ${N400})`};
     flex-grow: 1;
     font-size: ${relativeFontSizeToBase16(13)};
     line-height: 20px;
-    padding: 0;
+    padding: ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-400, 32px)"}
+      ${"var(--ds-space-075, 6px)"} ${"var(--ds-space-100, 8px)"};
     min-width: 145px;
 
     /* Hides IE10+ built-in [x] clear input button */
@@ -22,6 +23,7 @@ export const panelTextInput = css`
 
     &:focus {
       outline: none;
+      border-color: ${`var(--ds-border-focused, ${B100})`};
     }
 
     &::placeholder {

package/dist/esm/__tests_external__/page-objects/EditorSmartLink.js

@@ -24,7 +24,7 @@ export var EditorSmartLinkPageObject = /*#__PURE__*/function (_InProductTestPage
       displayCardOption: 'block-appearance',
       displayEmbedOption: 'embed-appearance',
       linkUrl: 'link-url',
-      linkLabel: 'link-label'
+      linkLabel: 'link-text'
     });
     _defineProperty(_assertThisInitialized(_this), "ariaLabels", {
       editLink: 'Edit link',