@atlaskit/editor-common 103.11.0 → 103.12.0

package/CHANGELOG.md

@@ -1,5 +1,37 @@
 # @atlaskit/editor-common
 
+## 103.12.0
+
+### Minor Changes
+
+- [#142852](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142852)
+  [`ca0f841e860ab`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/ca0f841e860ab) -
+  [ux] [ED-27466] When table option in quick insert typeahead is selected, shows table size picker
+  allow user selecting the table size before inserting
+
+### Patch Changes
+
+- [#142798](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/142798)
+  [`9dd2803c4c1dc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9dd2803c4c1dc) -
+  Preserved the previously set value for width provider
+
+## 103.11.2
+
+### Patch Changes
+
+- [#143960](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/143960)
+  [`e1bf8964b3cf8`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/e1bf8964b3cf8) -
+  Adding press interaction performance tracking to Comment action in floating toolbar. No UI change.
+- Updated dependencies
+
+## 103.11.1
+
+### Patch Changes
+
+- [#140969](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/140969)
+  [`b4ac22e73d43c`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/b4ac22e73d43c) -
+  [ux] [ED-27253] hide selection states until editor has been interacted with
+
 ## 103.11.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -143,6 +143,9 @@
         {
             "path": "../../../design-system/textfield/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../../design-system/theme/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../tmp-editor-statsig/afm-cc/tsconfig.json"
         },

package/dist/cjs/analytics/types/enums.js

@@ -433,6 +433,7 @@ var ACTION_SUBJECT_ID = exports.ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTIO
   ACTION_SUBJECT_ID["PICKER_MEDIA"] = "mediaPicker";
   ACTION_SUBJECT_ID["PICKER_COLOR"] = "colorPicker";
   ACTION_SUBJECT_ID["PICKER_EMOJI"] = "emojiPicker";
+  ACTION_SUBJECT_ID["PICKER_TABLE_SIZE"] = "tableSizePicker";
   ACTION_SUBJECT_ID["DOCKED_PRIMARY_TOOLBAR"] = "dockedPrimaryToolbar";
   ACTION_SUBJECT_ID["PLACEHOLDER_TEXT"] = "placeholderText";
   ACTION_SUBJECT_ID["POST_QUERY_SEARCH_RESULTS"] = "postQuerySearchResults";

package/dist/cjs/monitoring/error.js

@@ -17,7 +17,7 @@ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return
 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; }
 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 = "103.11.0";
+var packageVersion = "103.12.0";
 var sanitiseSentryEvents = function sanitiseSentryEvents(data, _hint) {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/cjs/styles/shared/resizer.js

@@ -27,4 +27,4 @@ var handleWrapperClass = exports.handleWrapperClass = 'resizer-handle-wrapper';
 var resizerHandleZIndex = exports.resizerHandleZIndex = 1;
 
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766, Seems perfectly safe to autofix, but comments would be lost…
-var resizerStyles = exports.resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\twill-change: width;\n\n\t\t&:hover,\n\t\t&.display-handle {\n\t\t\t& > .", " > .", " {\n\t\t\t\tvisibility: visible;\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\n\t\t&.is-resizing {\n\t\t\t& .", " {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t& .", " {\n\t\t\t\ttransition: none;\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\t\tvisibility: hidden;\n\t\topacity: 0;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 7px;\n\t\ttransition:\n\t\t\tvisibility 0.2s,\n\t\t\topacity 0.2s;\n\n\t\t/*\n      NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n      into the tooltip\n    */\n\t\t& div[role='presentation'] {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tmargin-top: ", ";\n\t\t\twhite-space: normal;\n\t\t}\n\n\t\t/*\n      Handle Positions\n    */\n\t\t&.left {\n\t\t\talign-items: flex-start;\n\t\t}\n\t\t&.right {\n\t\t\talign-items: flex-end;\n\t\t}\n\n\t\t/*\n      Handle Sizing\n    */\n\t\t&.small {\n\t\t\t& .", " {\n\t\t\t\theight: 43px;\n\t\t\t}\n\t\t}\n\t\t&.medium {\n\t\t\t& .", " {\n\t\t\t\theight: 64px;\n\t\t\t}\n\t\t}\n\t\t&.large {\n\t\t\t& .", " {\n\t\t\t\theight: 96px;\n\t\t\t}\n\t\t}\n\t\t&.clamped {\n\t\t\t& .", " {\n\t\t\t\theight: clamp(43px, calc(100% - 32px), 96px);\n\t\t\t}\n\t\t}\n\n\t\t/*\n      Handle Alignment\n    */\n\t\t&.sticky {\n\t\t\t& .", " {\n\t\t\t\tposition: sticky;\n\t\t\t\ttop: ", ";\n\t\t\t\tbottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t& .", " {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\n\t\t\t& .", " {\n\t\t\t\tvisibility: visible;\n\t\t\t\topacity: 0.5;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tcontent: ' ';\n\t\tdisplay: flex;\n\t\twidth: 3px;\n\t\tmargin: 0 ", ";\n\t\theight: 64px;\n\t\ttransition: background-color 0.2s;\n\t\tborder-radius: 6px;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tz-index: 2;\n\t\toutline: none;\n\t\tmin-height: 24px;\n\t\tbackground: ", ";\n\n\t\t&:hover {\n\t\t\tcursor: col-resize;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground: ", ";\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: ", ";\n\t\t\t\tright: ", ";\n\t\t\t\tbottom: ", ";\n\t\t\t\tleft: ", ";\n\t\t\t\tborder: 2px solid ", ";\n\t\t\t\tborder-radius: inherit;\n\t\t\t\tz-index: -1;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tvisibility: hidden;\n\t\tposition: absolute;\n\t\twidth: 7px;\n\t\theight: calc(100% - 40px);\n\t\tborder-radius: 4px;\n\t\topacity: 0;\n\t\ttransition:\n\t\t\tbackground-color 0.2s,\n\t\t\tvisibility 0.2s,\n\t\t\topacity 0.2s;\n\n\t\t&.none {\n\t\t\tbackground: none;\n\t\t}\n\n\t\t&.shadow {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t&.full-height {\n\t\t\tbackground: ", ";\n\t\t\theight: 100%;\n\t\t\tmin-height: 36px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t& .", " {\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n\t.", " {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\twidth: 100%;\n\n\t\t&.", " {\n\t\t\tpadding: 0 ", ";\n\t\t\tleft: ", ";\n\t\t}\n\t}\n\n\t// This below style is here to make sure the image width is correct when nested in a table\n\ttable .", ", table .", ".", " {\n\t\tpadding: unset;\n\t\tleft: unset;\n\t}\n"])), resizerItemClassName, handleWrapperClass, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, #388BFF)", resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), resizerHandleClassName, "var(--ds-space-negative-200, -16px)", resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, #388BFF)", resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-space-025, 2px)", "var(--ds-border, #091E4224)", "var(--ds-border-selected, #0C66E4)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-border-focused, #388BFF)", resizerHandleTrackClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-background-selected, #E9F2FF)", akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, #388BFF)", resizerHoverZoneClassName, resizerExtendedZone, "var(--ds-space-150, 12px)", "var(--ds-space-negative-150, -12px)", resizerHoverZoneClassName, resizerHoverZoneClassName, resizerExtendedZone);
+var resizerStyles = exports.resizerStyles = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n\t.", " {\n\t\twill-change: width;\n\n\t\t&:hover,\n\t\t&.display-handle {\n\t\t\t& > .", " > .", " {\n\t\t\t\tvisibility: visible;\n\t\t\t\topacity: 1;\n\t\t\t}\n\t\t}\n\n\t\t&.is-resizing {\n\t\t\t& .", " {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&.", " {\n\t\t\t& .", " {\n\t\t\t\ttransition: none;\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tdisplay: flex;\n\t\tvisibility: hidden;\n\t\topacity: 0;\n\t\tflex-direction: column;\n\t\tjustify-content: center;\n\t\talign-items: center;\n\t\twidth: 7px;\n\t\ttransition:\n\t\t\tvisibility 0.2s,\n\t\t\topacity 0.2s;\n\n\t\t/*\n      NOTE: The below style is targeted at the div element added by the tooltip. We don't have any means of injecting styles\n      into the tooltip\n    */\n\t\t& div[role='presentation'] {\n\t\t\twidth: 100%;\n\t\t\theight: 100%;\n\t\t\tdisplay: flex;\n\t\t\tflex-direction: column;\n\t\t\tjustify-content: center;\n\t\t\talign-items: center;\n\t\t\tmargin-top: ", ";\n\t\t\twhite-space: normal;\n\t\t}\n\n\t\t/*\n      Handle Positions\n    */\n\t\t&.left {\n\t\t\talign-items: flex-start;\n\t\t}\n\t\t&.right {\n\t\t\talign-items: flex-end;\n\t\t}\n\n\t\t/*\n      Handle Sizing\n    */\n\t\t&.small {\n\t\t\t& .", " {\n\t\t\t\theight: 43px;\n\t\t\t}\n\t\t}\n\t\t&.medium {\n\t\t\t& .", " {\n\t\t\t\theight: 64px;\n\t\t\t}\n\t\t}\n\t\t&.large {\n\t\t\t& .", " {\n\t\t\t\theight: 96px;\n\t\t\t}\n\t\t}\n\t\t&.clamped {\n\t\t\t& .", " {\n\t\t\t\theight: clamp(43px, calc(100% - 32px), 96px);\n\t\t\t}\n\t\t}\n\n\t\t/*\n      Handle Alignment\n    */\n\t\t&.sticky {\n\t\t\t& .", " {\n\t\t\t\tposition: sticky;\n\t\t\t\ttop: ", ";\n\t\t\t\tbottom: ", ";\n\t\t\t}\n\t\t}\n\n\t\t&:hover {\n\t\t\t& .", " {\n\t\t\t\tbackground: ", ";\n\t\t\t}\n\n\t\t\t& .", " {\n\t\t\t\tvisibility: visible;\n\t\t\t\topacity: 0.5;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tcontent: ' ';\n\t\tdisplay: flex;\n\t\twidth: 3px;\n\t\tmargin: 0 ", ";\n\t\theight: 64px;\n\t\ttransition: background-color 0.2s;\n\t\tborder-radius: 6px;\n\t\tborder: 0;\n\t\tpadding: 0;\n\t\tz-index: 2;\n\t\toutline: none;\n\t\tmin-height: 24px;\n\t\tbackground: ", ";\n\n\t\t&:hover {\n\t\t\tcursor: col-resize;\n\t\t}\n\n\t\t&:focus {\n\t\t\tbackground: ", ";\n\n\t\t\t&::after {\n\t\t\t\tcontent: '';\n\t\t\t\tposition: absolute;\n\t\t\t\ttop: ", ";\n\t\t\t\tright: ", ";\n\t\t\t\tbottom: ", ";\n\t\t\t\tleft: ", ";\n\t\t\t\tborder: 2px solid ", ";\n\t\t\t\tborder-radius: inherit;\n\t\t\t\tz-index: -1;\n\t\t\t}\n\t\t}\n\t}\n\n\t.", " {\n\t\tvisibility: hidden;\n\t\tposition: absolute;\n\t\twidth: 7px;\n\t\theight: calc(100% - 40px);\n\t\tborder-radius: 4px;\n\t\topacity: 0;\n\t\ttransition:\n\t\t\tbackground-color 0.2s,\n\t\t\tvisibility 0.2s,\n\t\t\topacity 0.2s;\n\n\t\t&.none {\n\t\t\tbackground: none;\n\t\t}\n\n\t\t&.shadow {\n\t\t\tbackground: ", ";\n\t\t}\n\n\t\t&.full-height {\n\t\t\tbackground: ", ";\n\t\t\theight: 100%;\n\t\t\tmin-height: 36px;\n\t\t}\n\t}\n\n\t.", " {\n\t\t& .", " {\n\t\t\tbackground: ", ";\n\t\t}\n\t}\n\n\t.ak-editor-no-interaction\n\t\t.", "\n\t\t.", ":not(:hover)\n\t\t.", " {\n\t\tbackground: ", ";\n\t}\n\n\t.", " {\n\t\tposition: relative;\n\t\tdisplay: inline-block;\n\t\twidth: 100%;\n\n\t\t&.", " {\n\t\t\tpadding: 0 ", ";\n\t\t\tleft: ", ";\n\t\t}\n\t}\n\n\t// This below style is here to make sure the image width is correct when nested in a table\n\ttable .", ", table .", ".", " {\n\t\tpadding: unset;\n\t\tleft: unset;\n\t}\n"])), resizerItemClassName, handleWrapperClass, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border-focused, #388BFF)", resizerDangerClassName, resizerHandleThumbClassName, "var(--ds-icon-danger, ".concat(_editorSharedStyles.akEditorDeleteIconColor, ")"), resizerHandleClassName, "var(--ds-space-negative-200, -16px)", resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, resizerHandleThumbClassName, "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)", resizerHandleThumbClassName, "var(--ds-border-focused, #388BFF)", resizerHandleTrackClassName, resizerHandleThumbClassName, "var(--ds-space-025, 2px)", "var(--ds-border, #091E4224)", "var(--ds-border-selected, #0C66E4)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-space-negative-050, -4px)", "var(--ds-border-focused, #388BFF)", resizerHandleTrackClassName, "var(--ds-background-selected, #E9F2FF)", "var(--ds-background-selected, #E9F2FF)", akEditorSelectedNodeClassName, resizerHandleThumbClassName, "var(--ds-border-focused, #388BFF)", akEditorSelectedNodeClassName, resizerHandleClassName, resizerHandleThumbClassName, "var(--ds-border, #091E4224)", resizerHoverZoneClassName, resizerExtendedZone, "var(--ds-space-150, 12px)", "var(--ds-space-negative-150, -12px)", resizerHoverZoneClassName, resizerHoverZoneClassName, resizerExtendedZone);

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

@@ -23,7 +23,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/editor-common";
-var packageVersion = "103.11.0";
+var packageVersion = "103.12.0";
 var halfFocusRing = 1;
 var dropOffset = '0, 8';
 // Ignored via go/ees005

package/dist/cjs/ui/FloatingToolbar/Button.js

@@ -49,6 +49,7 @@ var _default = exports.default = function _default(_ref) {
     tooltipContent = _ref.tooltipContent,
     tooltipStyle = _ref.tooltipStyle,
     testId = _ref.testId,
+    interactionName = _ref.interactionName,
     _ref$hideTooltipOnCli = _ref.hideTooltipOnClick,
     hideTooltipOnClick = _ref$hideTooltipOnCli === void 0 ? true : _ref$hideTooltipOnCli,
     ariaHasPopup = _ref.ariaHasPopup,
@@ -132,6 +133,7 @@ var _default = exports.default = function _default(_ref) {
     isSelected: selected,
     isDisabled: disabled,
     testId: testId,
+    interactionName: interactionName,
     onFocus: onFocus,
     onBlur: onBlur
     // @ts-ignore

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

@@ -0,0 +1,270 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TableSelectorPopup = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _bindEventListener = require("bind-event-listener");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _uiReact = require("../../ui-react");
+var _Popup = _interopRequireDefault(require("../Popup"));
+var _tableSelector = _interopRequireWildcard(require("./table-selector"));
+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; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+var TABLE_SELECTOR_PADDING_TOP = 8;
+var TABLE_SELECTOR_PADDING_SIDE = 10;
+var DEFAULT_TABLE_SELECTOR_ROWS = 5;
+var DEFAULT_TABLE_SELECTOR_COLS = 10;
+var DEFAULT_TABLE_SELECTOR_SELECTION_SIZE = 1;
+var DEFAULT_MAX_TABLE_SELECTOR_ROWS = 10;
+var TableSelectorWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_tableSelector.default);
+var initialSizeState = {
+  col: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  row: DEFAULT_TABLE_SELECTOR_SELECTION_SIZE,
+  maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+  maxRow: DEFAULT_TABLE_SELECTOR_ROWS
+};
+var tableSelectorPopupWrapperStyles = (0, _react2.css)({
+  borderRadius: "var(--ds-border-radius, 3px)",
+  backgroundColor: "var(--ds-surface-overlay, ".concat(_colors.N0, ")"),
+  boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")"),
+  padding: "".concat("var(--ds-space-100, ".concat("".concat(TABLE_SELECTOR_PADDING_TOP, "px"), ")"), " ", TABLE_SELECTOR_PADDING_SIDE, "px")
+});
+var TableSelectorPopup = exports.TableSelectorPopup = function TableSelectorPopup(props) {
+  var _useState = (0, _react.useState)(_objectSpread(_objectSpread({}, initialSizeState), props.defaultSize)),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    size = _useState2[0],
+    setSize = _useState2[1];
+  var tablePopupRef = (0, _react.useRef)(null);
+  // If popup opened by keyboard enable keyboard mode
+  var isKeyboardMode = (0, _react.useRef)(props.isOpenedByKeyboard);
+  var enableKeyboardMode = (0, _react.useCallback)(function () {
+    if (!isKeyboardMode.current) {
+      isKeyboardMode.current = true;
+    }
+  }, [isKeyboardMode]);
+  var disableKeyboardMode = (0, _react.useCallback)(function () {
+    if (isKeyboardMode.current) {
+      isKeyboardMode.current = false;
+    }
+  }, [isKeyboardMode]);
+
+  // Mouse move is used to allow selection changes outside of the popup and is more reactive to changes.
+  var handleMouseMove = (0, _react.useCallback)(function (e) {
+    if (!tablePopupRef.current) {
+      return;
+    }
+    disableKeyboardMode();
+    var tablePopup = tablePopupRef.current;
+    var _tablePopup$getBoundi = tablePopup.getBoundingClientRect(),
+      left = _tablePopup$getBoundi.left,
+      top = _tablePopup$getBoundi.top;
+
+    // Mouse position on popup
+    var selectedWidth = e.clientX - left;
+    var selectedHeight = e.clientY - top;
+
+    // Calculate number grid cells selected
+    var selectedGridCols = Math.ceil((selectedWidth - TABLE_SELECTOR_PADDING_SIDE + _tableSelector.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelector.TABLE_SELECTOR_BUTTON_GAP + _tableSelector.TABLE_SELECTOR_BUTTON_SIZE));
+    var selectedGridRows = Math.ceil((selectedHeight - TABLE_SELECTOR_PADDING_TOP + _tableSelector.TABLE_SELECTOR_BUTTON_GAP) / (_tableSelector.TABLE_SELECTOR_BUTTON_GAP + _tableSelector.TABLE_SELECTOR_BUTTON_SIZE));
+    // Keep the selected rows and columns within the defined bounds
+    var gridRows = DEFAULT_TABLE_SELECTOR_ROWS;
+    if (selectedGridCols < 1) {
+      selectedGridCols = 1;
+    }
+    if (selectedGridCols > size.maxCol) {
+      selectedGridCols = size.maxCol;
+    }
+    if (selectedGridRows < 1) {
+      selectedGridRows = 1;
+    }
+
+    // Expand grid when row selection is greater than the default grid size
+    if (selectedGridRows >= DEFAULT_TABLE_SELECTOR_ROWS && selectedGridRows < DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+      gridRows = selectedGridRows + 1;
+    }
+    if (selectedGridRows >= DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+      selectedGridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+      gridRows = DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+    }
+    if (selectedGridCols !== size.col || selectedGridRows !== size.row) {
+      setSize({
+        col: selectedGridCols,
+        row: selectedGridRows,
+        maxCol: DEFAULT_TABLE_SELECTOR_COLS,
+        maxRow: gridRows
+      });
+    }
+  }, [disableKeyboardMode, size, setSize]);
+  var decreasingSequence = function decreasingSequence(maxNumber, prevNumber) {
+    var nextNumber = prevNumber - 1;
+    if (prevNumber === 1) {
+      nextNumber = maxNumber;
+    }
+    return nextNumber;
+  };
+  var getMaxRow = function getMaxRow(prevSize, eventKey) {
+    switch (eventKey) {
+      case 'ArrowDown':
+        // Expand the grid size when last row selected
+        if (prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.row >= DEFAULT_TABLE_SELECTOR_ROWS - 1) {
+          return prevSize.maxRow + 1;
+        }
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+        }
+        return prevSize.maxRow;
+      case 'ArrowLeft':
+        var moveToPrevRow = prevSize.col === 1 && prevSize.row > 1;
+        var moveToLastRow = prevSize.row === 1 && prevSize.col === 1;
+        // Expand the popup to max size when selected row wraps around to last row
+        if (moveToLastRow) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+        }
+        // Decrease the popup when decreased row selection
+        if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS && moveToPrevRow) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowUp':
+        if (prevSize.row === 1) {
+          return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (prevSize.maxRow > DEFAULT_TABLE_SELECTOR_ROWS) {
+          return prevSize.row;
+        }
+        return prevSize.maxRow;
+      case 'ArrowRight':
+        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        var increaseMaxRow = prevSize.maxRow < DEFAULT_MAX_TABLE_SELECTOR_ROWS && moveToNextRow && prevSize.row + 1 === prevSize.maxRow;
+
+        // Decrease popup size for wrap around to selection 1 x 1
+        if (prevSize.row === DEFAULT_MAX_TABLE_SELECTOR_ROWS && prevSize.col === DEFAULT_TABLE_SELECTOR_COLS) {
+          return DEFAULT_TABLE_SELECTOR_ROWS;
+          // Decrease the popup size when decreased row selection
+        } else if (increaseMaxRow) {
+          return prevSize.maxRow + 1;
+        }
+        return prevSize.maxRow;
+      default:
+        return prevSize.maxRow;
+    }
+  };
+  var handleInitialButtonFocus = (0, _react.useCallback)(function () {
+    if (isKeyboardMode.current !== true) {
+      enableKeyboardMode();
+      setSize(initialSizeState);
+    }
+  }, [enableKeyboardMode, setSize]);
+  var handleKeyDown = (0, _react.useCallback)(
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  function (event) {
+    if (event.key === 'ArrowDown') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          row: prevSize.row % prevSize.maxRow + 1,
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker')) {
+        event.preventDefault();
+      }
+    }
+    if (event.key === 'ArrowRight') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var moveToNextRow = prevSize.col === DEFAULT_TABLE_SELECTOR_COLS;
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          col: prevSize.col % DEFAULT_TABLE_SELECTOR_COLS + 1,
+          row: moveToNextRow ? prevSize.row % prevSize.maxRow + 1 : prevSize.row,
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+    if (event.key === 'ArrowLeft') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var getRow = function getRow(prevRow, prevCol) {
+          var row = prevRow;
+          // Move to previous row for wrap around
+          if (prevSize.col === 1 && prevSize.row > 1) {
+            return prevRow - 1;
+            // Increase the selection to max size when selected row and column wraps around
+          } else if (prevRow === 1 && prevCol === 1) {
+            return DEFAULT_MAX_TABLE_SELECTOR_ROWS;
+          }
+          return row;
+        };
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          col: decreasingSequence(prevSize.maxCol, prevSize.col),
+          row: getRow(prevSize.row, prevSize.col),
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+    }
+    if (event.key === 'ArrowUp') {
+      enableKeyboardMode();
+      setSize(function (prevSize) {
+        var moveToLastRow = prevSize.row === 1;
+        return _objectSpread(_objectSpread({}, prevSize), {}, {
+          row: moveToLastRow ? DEFAULT_MAX_TABLE_SELECTOR_ROWS : decreasingSequence(prevSize.maxRow, prevSize.row),
+          maxRow: getMaxRow(prevSize, event.key)
+        });
+      });
+      if ((0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker')) {
+        event.preventDefault();
+      }
+    }
+  }, [enableKeyboardMode, setSize]);
+  (0, _react.useEffect)(function () {
+    var unbind;
+    var target = props.allowOutsideSelection ? window : tablePopupRef.current;
+    if (target) {
+      unbind = (0, _bindEventListener.bind)(target, {
+        type: 'mousemove',
+        listener: handleMouseMove
+      });
+    }
+    return unbind;
+  }, [handleMouseMove, props.allowOutsideSelection, tablePopupRef]);
+  return (0, _react2.jsx)(_Popup.default, {
+    target: props.target,
+    offset: [0, 3],
+    mountTo: props.popupsMountPoint,
+    boundariesElement: props.popupsBoundariesElement,
+    scrollableElement: props.popupsScrollableElement,
+    focusTrap: true,
+    onUnmount: props.onUnmount,
+    zIndex: _editorSharedStyles.akEditorMenuZIndex
+  }, (0, _react2.jsx)("div", {
+    css: tableSelectorPopupWrapperStyles,
+    ref: tablePopupRef
+  }, (0, _react2.jsx)(TableSelectorWithListeners, {
+    handleClickOutside: props.handleClickOutside,
+    handleEscapeKeydown: props.handleEscapeKeydown,
+    maxCols: size.maxCol,
+    maxRows: size.maxRow,
+    onSelection: props.onSelection,
+    selectedCol: size.col,
+    selectedRow: size.row,
+    onKeyDown: handleKeyDown,
+    isFocused: isKeyboardMode.current,
+    handleInitialButtonFocus: handleInitialButtonFocus
+  })));
+};
+var _default = exports.default = TableSelectorPopup;

package/dist/cjs/ui/TableSelector/table-selector.js

@@ -0,0 +1,162 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.TABLE_SELECTOR_BUTTON_SIZE = exports.TABLE_SELECTOR_BUTTON_GAP = void 0;
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _reactIntlNext = require("react-intl-next");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
+var _colors = require("@atlaskit/theme/colors");
+var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
+var _messages = require("../../messages");
+var _uiReact = require("../../ui-react");
+/**
+ * @jsxRuntime classic
+ * @jsx jsx
+ */
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+
+var TABLE_SELECTOR_BUTTON_GAP = exports.TABLE_SELECTOR_BUTTON_GAP = 2;
+var TABLE_SELECTOR_BUTTON_SIZE = exports.TABLE_SELECTOR_BUTTON_SIZE = 17;
+var selectedButtonStyles = (0, _react2.css)({
+  backgroundColor: "var(--ds-background-accent-blue-subtlest, #579DFF)",
+  border: "1px solid ".concat("var(--ds-background-accent-blue-subtle, #579DFF)")
+});
+var buttonStyles = (0, _react2.css)({
+  height: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
+  width: "".concat(TABLE_SELECTOR_BUTTON_SIZE, "px"),
+  border: "1px solid ".concat("var(--ds-border, #091e4224)"),
+  backgroundColor: "var(--ds-background-input, #ffffff)",
+  borderRadius: '3px',
+  cursor: 'pointer',
+  display: 'block',
+  '&:focus': {
+    outline: 'none',
+    border: "1px solid ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
+    boxShadow: "0 0 0 0.5px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")"))
+  }
+});
+var selectionSizeTextStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
+  lineHeight: '14px',
+  display: 'flex',
+  justifyContent: 'center',
+  marginTop: "var(--ds-space-075, 5px)",
+  padding: "var(--ds-space-075, 10px)"
+});
+var TableSelectorButton = function TableSelectorButton(_ref) {
+  var row = _ref.row,
+    col = _ref.col,
+    isActive = _ref.isActive,
+    _onClick = _ref.onClick,
+    label = _ref.label,
+    onKeyDown = _ref.onKeyDown,
+    isFocused = _ref.isFocused,
+    handleInitialButtonFocus = _ref.handleInitialButtonFocus;
+  var btnRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (btnRef.current) {
+      if (isFocused) {
+        btnRef.current.focus({
+          preventScroll: (0, _experiments.editorExperiment)('platform_editor_controls', 'variant1') && (0, _platformFeatureFlags.fg)('platform_editor_controls_table_picker') ? true : undefined
+        });
+      } else {
+        btnRef.current.blur();
+      }
+    }
+  }, [isFocused, btnRef]);
+  var handleFocus = col === 1 && row === 1 ? function () {
+    return handleInitialButtonFocus();
+  } : undefined;
+  return (0, _react2.jsx)("button", {
+    type: "button",
+    css: [buttonStyles, isActive ? selectedButtonStyles : undefined],
+    onClick: function onClick() {
+      return _onClick(row, col);
+    },
+    "aria-label": label,
+    onKeyDown: onKeyDown,
+    ref: btnRef,
+    onFocus: handleFocus
+  });
+};
+var createArray = function createArray(maxCols, maxRows) {
+  var arr = [];
+  for (var i = 1; i < maxRows + 1; i++) {
+    for (var j = 1; j < maxCols + 1; j++) {
+      arr.push({
+        col: j,
+        row: i
+      });
+    }
+  }
+  return arr;
+};
+var gridWrapperStyles = function gridWrapperStyles(_ref2) {
+  var maxCols = _ref2.maxCols,
+    maxRows = _ref2.maxRows;
+  return (0, _react2.css)({
+    display: 'grid',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gridTemplateColumns: "repeat(".concat(maxCols, ", 1fr)"),
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+    gridTemplateRows: "repeat(".concat(maxRows, ", 1fr)"),
+    gap: "".concat("var(--ds-space-025, ".concat("".concat(TABLE_SELECTOR_BUTTON_GAP, "px"), ")"))
+  });
+};
+var TableSelectorPopup = function TableSelectorPopup(_ref3) {
+  var maxCols = _ref3.maxCols,
+    maxRows = _ref3.maxRows,
+    onSelection = _ref3.onSelection,
+    selectedCol = _ref3.selectedCol,
+    selectedRow = _ref3.selectedRow,
+    onKeyDown = _ref3.onKeyDown,
+    isFocused = _ref3.isFocused,
+    handleInitialButtonFocus = _ref3.handleInitialButtonFocus,
+    formatMessage = _ref3.intl.formatMessage;
+  var buttons = (0, _react.useMemo)(function () {
+    return createArray(maxCols, maxRows);
+  }, [maxCols, maxRows]);
+  var setOutsideClickTargetRef = (0, _react.useContext)(_uiReact.OutsideClickTargetRefContext);
+  return (0, _react2.jsx)(_primitives.Stack, {
+    ref: setOutsideClickTargetRef
+  }, (0, _react2.jsx)("div", {
+    "aria-label": "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorPopup)),
+    css:
+    // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
+    gridWrapperStyles({
+      maxCols: maxCols,
+      maxRows: maxRows
+    })
+  }, buttons.map(function (_ref4, index) {
+    var col = _ref4.col,
+      row = _ref4.row;
+    var isCurrentFocused = isFocused && selectedCol === col && selectedRow === row;
+    var isActive = selectedCol >= col && selectedRow >= row ? true : false;
+    return (0, _react2.jsx)(TableSelectorButton
+    // Ignored via go/ees005
+    // eslint-disable-next-line react/no-array-index-key
+    , {
+      key: index,
+      isActive: isActive,
+      col: col,
+      row: row,
+      onClick: onSelection,
+      label: "".concat(formatMessage(_messages.toolbarInsertBlockMessages.tableSizeSelectorButton, {
+        numberOfColumns: col,
+        numberOfRows: row
+      })),
+      onKeyDown: onKeyDown,
+      isFocused: isCurrentFocused,
+      handleInitialButtonFocus: handleInitialButtonFocus
+    });
+  })), (0, _react2.jsx)("span", {
+    css: selectionSizeTextStyles,
+    "aria-hidden": true
+  }, "".concat(selectedCol, " x ").concat(selectedRow)));
+};
+var _default = exports.default = (0, _reactIntlNext.injectIntl)(TableSelectorPopup);

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

@@ -93,6 +93,7 @@ var WidthProvider = exports.WidthProvider = function WidthProvider(_ref) {
       if (!isMountedRef.current) {
         return;
       }
+      widthRef.current = nextWidth;
       setWidth(nextWidth);
     });
   }, []);

package/dist/cjs/ui/index.js

@@ -203,6 +203,12 @@ Object.defineProperty(exports, "SmallerEditIcon", {
     return _SmallerEditIcon.SmallerEditIcon;
   }
 });
+Object.defineProperty(exports, "TableSelectorPopup", {
+  enumerable: true,
+  get: function get() {
+    return _TableSelector.default;
+  }
+});
 Object.defineProperty(exports, "ToolbarButtonGroup", {
   enumerable: true,
   get: function get() {
@@ -485,5 +491,6 @@ var _ExpandIcon = require("./Toolbar/ExpandIcon");
 var _Separator2 = require("./Toolbar/Separator");
 var _DropList = _interopRequireDefault(require("./DropList"));
 var _MultiBodiedExtension = require("./MultiBodiedExtension");
+var _TableSelector = _interopRequireDefault(require("./TableSelector"));
 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; }

package/dist/cjs/utils/get-dom-ref-from-selection.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getDomRefFromSelection = void 0;
+var _utils = require("@atlaskit/editor-prosemirror/utils");
+var _analytics = require("../analytics");
+var getDomRefFromSelection = exports.getDomRefFromSelection = function getDomRefFromSelection(view, actionSubjectId, dispatchAnalyticsEvent) {
+  try {
+    var domRef = (0, _utils.findDomRefAtPos)(view.state.selection.from, view.domAtPos.bind(view));
+    if (domRef instanceof HTMLElement) {
+      // If element is not a paragraph, we need to find the closest paragraph parent
+      if (domRef.nodeName !== 'P') {
+        var paragraphRef = domRef.closest('p');
+        if (paragraphRef) {
+          return paragraphRef;
+        }
+      }
+      return domRef;
+    } else {
+      throw new Error('Invalid DOM reference');
+    }
+  } catch (error) {
+    if (dispatchAnalyticsEvent) {
+      var payload = {
+        action: _analytics.ACTION.ERRORED,
+        actionSubject: _analytics.ACTION_SUBJECT.PICKER,
+        actionSubjectId: actionSubjectId,
+        eventType: _analytics.EVENT_TYPE.OPERATIONAL,
+        attributes: {
+          error: 'Error getting DOM reference from selection'
+        }
+      };
+      dispatchAnalyticsEvent(payload);
+    }
+  }
+};

package/dist/es2019/analytics/types/enums.js

@@ -427,6 +427,7 @@ export let ACTION_SUBJECT_ID = /*#__PURE__*/function (ACTION_SUBJECT_ID) {
   ACTION_SUBJECT_ID["PICKER_MEDIA"] = "mediaPicker";
   ACTION_SUBJECT_ID["PICKER_COLOR"] = "colorPicker";
   ACTION_SUBJECT_ID["PICKER_EMOJI"] = "emojiPicker";
+  ACTION_SUBJECT_ID["PICKER_TABLE_SIZE"] = "tableSizePicker";
   ACTION_SUBJECT_ID["DOCKED_PRIMARY_TOOLBAR"] = "dockedPrimaryToolbar";
   ACTION_SUBJECT_ID["PLACEHOLDER_TEXT"] = "placeholderText";
   ACTION_SUBJECT_ID["POST_QUERY_SEARCH_RESULTS"] = "postQuerySearchResults";

package/dist/es2019/monitoring/error.js

@@ -1,7 +1,7 @@
 import { isFedRamp } from './environment';
 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 = "103.11.0";
+const packageVersion = "103.12.0";
 const sanitiseSentryEvents = (data, _hint) => {
   // Remove URL as it has UGC
   // Ignored via go/ees007

package/dist/es2019/styles/shared/resizer.js

@@ -198,6 +198,13 @@ export const resizerStyles = css`
 		}
 	}
 
+	.ak-editor-no-interaction
+		.${akEditorSelectedNodeClassName}
+		.${resizerHandleClassName}:not(:hover)
+		.${resizerHandleThumbClassName} {
+		background: ${"var(--ds-border, #091E4224)"};
+	}
+
 	.${resizerHoverZoneClassName} {
 		position: relative;
 		display: inline-block;