@atlaskit/editor-plugin-status
Version:
Status plugin for @atlaskit/editor-core
578 lines (572 loc) • 27.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = exports.closingMethods = exports.StatusPickerWithoutAnalytcs = exports.InputMethod = void 0;
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _withAnalyticsEvents = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsEvents"));
var _browserApis = require("@atlaskit/browser-apis");
var _messages = require("@atlaskit/editor-common/messages");
var _ui = require("@atlaskit/editor-common/ui");
var _uiReact = require("@atlaskit/editor-common/ui-react");
var _userIntent = require("@atlaskit/editor-common/user-intent");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _isExperimentEnabled = require("@atlaskit/platform-feature-experiments/is-experiment-enabled");
var _unsafeExpValNoExposure = require("@atlaskit/platform-feature-experiments/unsafe-exp-val-no-exposure");
var _fg = require("@atlaskit/platform-feature-flags/fg");
var _element = require("@atlaskit/status/element");
var _picker = require("@atlaskit/status/picker");
var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden/visually-hidden"));
var _createStatusNode = require("../utils/createStatusNode");
var _analytics = require("./analytics");
function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(t).constructor) : o.apply(t, e)); }
function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); } /**
* @jsxRuntime classic
* @jsx jsx
*/ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
var PopupWithListeners = (0, _uiReact.withReactEditorViewOuterListeners)(_ui.Popup);
var InputMethod = exports.InputMethod = /*#__PURE__*/function (InputMethod) {
InputMethod["blur"] = "blur";
InputMethod["escKey"] = "escKey";
InputMethod["enterKey"] = "enterKey";
return InputMethod;
}({});
var closingMethods = exports.closingMethods = /*#__PURE__*/function (closingMethods) {
closingMethods["ArrowLeft"] = "arrowLeft";
closingMethods["ArrowRight"] = "arrowRight";
return closingMethods;
}({});
var pickerContainerStyles = (0, _react2.css)({
background: "var(--ds-surface-overlay, #FFFFFF)",
padding: "var(--ds-space-100, 8px)".concat(" 0"),
borderRadius: "var(--ds-radius-small, 3px)",
boxShadow: "var(--ds-shadow-overlay, 0px 8px 12px #1E1F2126, 0px 0px 1px #1E1F214f)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
':focus': {
outline: 'none'
},
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
input: {
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
textTransform: 'uppercase'
}
});
var pickerContainerStylesTeam26 = (0, _react2.css)({
background: "var(--ds-surface-overlay, #FFFFFF)",
padding: "var(--ds-space-100, 8px)".concat(" 0"),
borderRadius: "var(--ds-radius-small, 3px)",
boxShadow: "var(--ds-shadow-overlay, 0 0 1px rgba(9, 30, 66, 0.31), 0 4px 8px -2px rgba(9, 30, 66, 0.25))",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-selectors
':focus': {
outline: 'none'
}
});
var suggestedStatusesContainerStyles = (0, _react2.css)({
display: 'flex',
flexDirection: 'column',
gap: "var(--ds-space-100, 8px)",
margin: 0,
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-150, 12px)", " ", "var(--ds-space-050, 4px)")
});
// Fixed input plus capped scrolling color controls and suggestions. The ten-color picker is
// taller because it carries a second swatch row.
var STATUS_PICKER_FIT_HEIGHT = 288;
var STATUS_PICKER_TEN_COLOR_FIT_HEIGHT = 292;
// Seven suggestions fit below the color palette before the content starts scrolling.
var MAX_SUGGESTIONS_WITHOUT_SCROLLBAR = 7;
// ColorPalette: swatches per row * 32px slot + 16px inline margin.
var STATUS_PICKER_CONTENT_WIDTH = 208; // 6 * 32 + 16
var STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH = 176; // 5 * 32 + 16
var STATUS_PICKER_SCROLLBAR_WIDTH = 16;
var statusPickerWidthStylesOld = (0, _react2.css)({
width: "".concat(STATUS_PICKER_CONTENT_WIDTH, "px")
});
var statusPickerWidthStyles = (0, _react2.css)({
width: "".concat(STATUS_PICKER_TEN_COLOR_CONTENT_WIDTH, "px")
});
var statusPickerWithScrollbarWidthStylesOld = (0, _react2.css)({
// Reserve space for the native scrollbar without reducing the picker content width.
width: "".concat(STATUS_PICKER_CONTENT_WIDTH + STATUS_PICKER_SCROLLBAR_WIDTH, "px")
});
// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
// `suggestedStatusesContainerStyles` and remove its conditional style array.
var suggestedStatusesContainerPatchStyles = (0, _react2.css)({
gap: "var(--ds-space-050, 4px)",
paddingLeft: "var(--ds-space-100, 8px)"
});
var suggestedStatusButtonStyles = (0, _react2.css)({
background: 'transparent',
border: 0,
borderRadius: "var(--ds-radius-small, 3px)",
cursor: 'pointer',
justifyContent: 'flex-start',
padding: 0,
'&:focus-visible': {
outline: "2px solid ".concat("var(--ds-border-focused, #0C66E4)"),
outlineOffset: "var(--ds-space-025, 2px)"
}
});
// Remove when cleaning up `platform_editor_status_popup_suggestions_patch_1`.
var suggestedStatusButtonOldStyles = (0, _react2.css)({
display: 'flex',
width: '100%'
});
var suggestedStatusButtonWrapperStyles = (0, _react2.css)({
alignSelf: 'flex-start',
borderWidth: "var(--ds-border-width, 1px)",
borderStyle: 'solid',
borderColor: 'transparent',
borderRadius: "var(--ds-space-075, 6px)",
// Keeps the border and padding inside `maxWidth`, so a full-width suggestion ends level
// with the last swatch.
boxSizing: 'border-box',
display: 'flex',
marginLeft: "var(--ds-space-025, 2px)",
maxWidth: '100%',
paddingBlock: "var(--ds-border-width, 1px)",
paddingInline: "var(--ds-border-width, 1px)",
'&:hover': {
borderColor: "var(--ds-border, #091E4224)"
}
});
// When cleaning up `platform_editor_status_popup_suggestions_patch_1`, merge this into
// `suggestedStatusButtonStyles` and remove its conditional style array.
var suggestedStatusButtonPatchStyles = (0, _react2.css)({
// Allow this flex item to shrink so long statuses can truncate.
minWidth: 0
});
// eslint-disable-next-line @repo/internal/react/no-class-components
var StatusPickerWithIntl = /*#__PURE__*/function (_React$Component) {
function StatusPickerWithIntl(props) {
var _this;
(0, _classCallCheck2.default)(this, StatusPickerWithIntl);
_this = _callSuper(this, StatusPickerWithIntl, [props]);
(0, _defineProperty2.default)(_this, "handleClickOutside", function (event) {
event.preventDefault();
_this.inputMethod = InputMethod.blur;
var selectedText = window.getSelection();
if (!selectedText) {
_this.props.closeStatusPicker();
}
});
(0, _defineProperty2.default)(_this, "handleEscapeKeydown", function (event) {
event.preventDefault();
_this.inputMethod = InputMethod.escKey;
_this.props.onEnter(_this.state);
});
(0, _defineProperty2.default)(_this, "handleTabPress", function (event) {
var _getDocument2;
if (!(0, _unsafeExpValNoExposure.UNSAFE_expValNoExposure)('platform_editor_status_popup_suggestions', 'isEnabled', false)) {
var _getDocument;
/* original tab-navigation behaviour: cycle between color buttons and the input field */
var _colorButtons = event.currentTarget.querySelectorAll('button');
var _inputField = event.currentTarget.querySelector('input');
var _activeElement = (_getDocument = (0, _browserApis.getDocument)()) === null || _getDocument === void 0 ? void 0 : _getDocument.activeElement;
var _isInputFocussed = _activeElement === _inputField;
var _isButtonFocussed = Array.from(_colorButtons).some(function (buttonElement) {
return _activeElement === buttonElement;
});
if (event !== null && event !== void 0 && event.shiftKey) {
/* shift + tab */
if (_isInputFocussed) {
_colorButtons[0].focus();
event.preventDefault();
}
/* After the user presses shift + tab the color-palette component updates tab index for the first color to be 0.
To correctly set focus to the input field instead of the first color button we need to set focus manually
*/
if (_isButtonFocussed) {
_inputField === null || _inputField === void 0 || _inputField.focus();
event.preventDefault();
}
} else {
/* tab */
if (_isButtonFocussed) {
_inputField === null || _inputField === void 0 || _inputField.focus();
event.preventDefault();
}
}
return;
}
var colorButtons = event.currentTarget.querySelectorAll('button:not([data-suggested-status-button])');
var suggestedStatusButtons = event.currentTarget.querySelectorAll('button[data-suggested-status-button]');
var inputField = event.currentTarget.querySelector('input');
var activeElement = (_getDocument2 = (0, _browserApis.getDocument)()) === null || _getDocument2 === void 0 ? void 0 : _getDocument2.activeElement;
var isInputFocussed = activeElement === inputField;
var isButtonFocussed = Array.from(colorButtons).some(function (buttonElement) {
return activeElement === buttonElement;
});
var isSuggestedStatusButtonFocussed = Array.from(suggestedStatusButtons).some(function (buttonElement) {
return activeElement === buttonElement;
});
if (event !== null && event !== void 0 && event.shiftKey) {
/* shift + tab */
if (isInputFocussed) {
if (suggestedStatusButtons.length > 0) {
suggestedStatusButtons[suggestedStatusButtons.length - 1].focus();
} else {
var _colorButtons$;
(_colorButtons$ = colorButtons[0]) === null || _colorButtons$ === void 0 || _colorButtons$.focus();
}
event.preventDefault();
}
/* After the user presses shift + tab the color-palette component updates tab index for the first color to be 0.
To correctly set focus to the input field instead of the first color button we need to set focus manually
*/
if (isButtonFocussed) {
inputField === null || inputField === void 0 || inputField.focus();
event.preventDefault();
}
if (isSuggestedStatusButtonFocussed) {
var _colorButtons2;
(_colorButtons2 = colorButtons[colorButtons.length - 1]) === null || _colorButtons2 === void 0 || _colorButtons2.focus();
event.preventDefault();
}
} else {
/* tab */
if (isButtonFocussed) {
if (suggestedStatusButtons.length > 0) {
suggestedStatusButtons[0].focus();
} else {
inputField === null || inputField === void 0 || inputField.focus();
}
event.preventDefault();
}
if (isSuggestedStatusButtonFocussed) {
inputField === null || inputField === void 0 || inputField.focus();
event.preventDefault();
}
}
});
(0, _defineProperty2.default)(_this, "handleArrow", function (event, closingMethod) {
var _getDocument3;
var activeElement = (_getDocument3 = (0, _browserApis.getDocument)()) === null || _getDocument3 === void 0 ? void 0 : _getDocument3.activeElement;
if (activeElement === _this.popupBodyWrapper.current) {
var _this$popupBodyWrappe;
event.preventDefault();
(_this$popupBodyWrappe = _this.popupBodyWrapper) === null || _this$popupBodyWrappe === void 0 || (_this$popupBodyWrappe = _this$popupBodyWrappe.current) === null || _this$popupBodyWrappe === void 0 || _this$popupBodyWrappe.blur();
_this.props.closeStatusPicker({
closingMethod: closingMethod
});
}
});
(0, _defineProperty2.default)(_this, "onKeyDown", function (event) {
var isTabPressed = event.key === 'Tab';
if (isTabPressed) {
return _this.handleTabPress(event);
}
if (event.key in closingMethods) {
return _this.handleArrow(event, closingMethods[event.key]);
}
});
(0, _defineProperty2.default)(_this, "onColorHover", function (color) {
_this.createStatusAnalyticsAndFireFunc({
action: 'hovered',
actionSubject: 'statusColorPicker',
attributes: {
color: color,
localId: _this.state.localId,
state: (0, _analytics.analyticsState)(_this.props.isNew)
}
});
});
(0, _defineProperty2.default)(_this, "onColorClick", function (color) {
var _this$state = _this.state,
text = _this$state.text,
localId = _this$state.localId;
if (color === _this.state.color) {
_this.createStatusAnalyticsAndFireFunc({
action: 'clicked',
actionSubject: 'statusColorPicker',
attributes: {
color: color,
localId: localId,
state: (0, _analytics.analyticsState)(_this.props.isNew)
}
});
// closes status box and commits colour
_this.onEnter();
} else {
_this.setState({
color: color
});
_this.props.onSelect({
text: text,
color: color,
localId: localId
});
}
});
(0, _defineProperty2.default)(_this, "onTextChanged", function (text) {
var _this$state2 = _this.state,
color = _this$state2.color,
localId = _this$state2.localId;
_this.setState({
text: text
});
_this.props.onTextChanged({
text: text,
color: color,
localId: localId
}, !!_this.props.isNew);
});
(0, _defineProperty2.default)(_this, "onEnter", function () {
_this.inputMethod = InputMethod.enterKey;
_this.props.onEnter(_this.state);
});
(0, _defineProperty2.default)(_this, "onSuggestedStatusClick", function (status, position) {
_this.fireSuggestedStatusClickedAnalytics(status, position);
_this.props.onSuggestedStatusClick(status);
});
(0, _defineProperty2.default)(_this, "handleSuggestedStatusKeyDown", function (event) {
// Selection (Enter/Space) is handled natively via the button's onClick.
// Keydown only drives ArrowUp/ArrowDown navigation between suggestions.
if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
event.preventDefault();
event.stopPropagation();
_this.focusAdjacentSuggestedStatus(event.currentTarget, event.key === 'ArrowDown' ? 1 : -1);
}
});
// cancel bubbling to fix clickOutside logic:
// popup re-renders its content before the click event bubbles up to the document
// therefore click target element would be different from the popup content
(0, _defineProperty2.default)(_this, "handlePopupClick", function (event) {
return event.nativeEvent.stopImmediatePropagation();
});
_this.state = _this.extractStateFromProps(props);
_this.createStatusAnalyticsAndFireFunc = (0, _analytics.createStatusAnalyticsAndFire)(props.createAnalyticsEvent);
_this.popupBodyWrapper = /*#__PURE__*/_react.default.createRef();
return _this;
}
(0, _inherits2.default)(StatusPickerWithIntl, _React$Component);
return (0, _createClass2.default)(StatusPickerWithIntl, [{
key: "fireStatusPopupOpenedAnalytics",
value: function fireStatusPopupOpenedAnalytics(state) {
var color = state.color,
text = state.text,
localId = state.localId,
isNew = state.isNew;
this.startTime = Date.now();
this.createStatusAnalyticsAndFireFunc({
action: 'opened',
actionSubject: 'statusPopup',
attributes: {
textLength: text ? text.length : 0,
selectedColor: color,
localId: localId,
state: (0, _analytics.analyticsState)(isNew)
}
});
}
}, {
key: "fireStatusPopupClosedAnalytics",
value: function fireStatusPopupClosedAnalytics(state) {
var color = state.color,
text = state.text,
localId = state.localId,
isNew = state.isNew;
this.createStatusAnalyticsAndFireFunc({
action: 'closed',
actionSubject: 'statusPopup',
attributes: {
inputMethod: this.inputMethod,
duration: Date.now() - this.startTime,
textLength: text ? text.length : 0,
selectedColor: color,
localId: localId,
state: (0, _analytics.analyticsState)(isNew)
}
});
}
}, {
key: "reset",
value: function reset() {
this.startTime = Date.now();
this.inputMethod = InputMethod.blur;
}
}, {
key: "componentDidMount",
value: function componentDidMount() {
this.reset();
this.fireStatusPopupOpenedAnalytics(this.state);
}
}, {
key: "componentWillUnmount",
value: function componentWillUnmount() {
this.focusTimeout && cancelAnimationFrame(this.focusTimeout);
this.fireStatusPopupClosedAnalytics(this.state);
this.startTime = 0;
}
}, {
key: "componentDidUpdate",
value: function componentDidUpdate(prevProps, prevState) {
var element = this.props.target;
if (prevProps.target !== element) {
var newState = this.extractStateFromProps(this.props);
this.setState(newState);
this.fireStatusPopupClosedAnalytics(prevState);
this.reset();
this.fireStatusPopupOpenedAnalytics(newState);
}
}
}, {
key: "extractStateFromProps",
value: function extractStateFromProps(props) {
var defaultColor = props.defaultColor,
defaultText = props.defaultText,
defaultLocalId = props.defaultLocalId,
isNew = props.isNew;
return {
color: defaultColor || _createStatusNode.DEFAULT_STATUS.color,
text: defaultText || _createStatusNode.DEFAULT_STATUS.text,
localId: defaultLocalId,
isNew: isNew
};
}
}, {
key: "setRef",
value: function setRef(setOutsideClickTargetRef) {
var _this2 = this;
return function (ref) {
setOutsideClickTargetRef(ref);
_this2.popupBodyWrapper.current = ref;
};
}
}, {
key: "renderWithSetOutsideClickTargetRef",
value: function renderWithSetOutsideClickTargetRef(setOutsideClickTargetRef) {
var _this3 = this,
_suggestedStatuses$le;
var _this$props = this.props,
isNew = _this$props.isNew,
focusStatusInput = _this$props.focusStatusInput,
api = _this$props.api,
suggestedStatuses = _this$props.suggestedStatuses;
var _this$state3 = this.state,
color = _this$state3.color,
text = _this$state3.text;
var suggestionsPatchEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') && (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1');
var isUpdateStatusColorsEnabled = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors');
var suggestedStatusList = suggestedStatuses !== null && suggestedStatuses !== void 0 && suggestedStatuses.length && (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') ? (0, _react2.jsx)("div", {
css: [suggestedStatusesContainerStyles, suggestionsPatchEnabled ? suggestedStatusesContainerPatchStyles : undefined],
"data-suggested-status-list": true
}, suggestedStatuses.map(function (suggestedStatus, index) {
return (0, _react2.jsx)("div", {
css: suggestionsPatchEnabled ? suggestedStatusButtonWrapperStyles : undefined,
key: "".concat(suggestedStatus.color, ":").concat(suggestedStatus.text)
}, (0, _react2.jsx)("button", {
type: "button",
css: [suggestedStatusButtonStyles, suggestionsPatchEnabled ? suggestedStatusButtonPatchStyles : suggestedStatusButtonOldStyles],
onClick: function onClick() {
return _this3.onSuggestedStatusClick(suggestedStatus, index + 1);
},
onKeyDown: _this3.handleSuggestedStatusKeyDown,
"aria-label": suggestedStatus.displayText,
"data-suggested-status-button": true
}, (0, _react2.jsx)(_element.Status, {
color: suggestedStatus.color,
isConstrainedToParent: true,
text: suggestedStatus.displayText
})));
})) : null;
var pickerContent = (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_picker.StatusPicker, {
autoFocus: isNew || focusStatusInput,
selectedColor: color,
text: text,
onColorClick: this.onColorClick,
onColorHover: this.onColorHover,
onTextChanged: this.onTextChanged,
onEnter: this.onEnter,
palette: isUpdateStatusColorsEnabled ? 'extended' : 'default',
scrollableContent: suggestionsPatchEnabled ? suggestedStatusList : undefined
}), suggestionsPatchEnabled ? null : suggestedStatusList);
return (0, _react2.jsx)(_userIntent.UserIntentPopupWrapper, {
api: api,
userIntent: "statusPickerOpen"
}, (0, _react2.jsx)("div", {
css: [(0, _fg.fg)('platform-dst-lozenge-tag-badge-visual-uplifts') ? pickerContainerStylesTeam26 : pickerContainerStyles, suggestionsPatchEnabled && isUpdateStatusColorsEnabled ? statusPickerWidthStyles : undefined, suggestionsPatchEnabled && !isUpdateStatusColorsEnabled ? statusPickerWidthStylesOld : undefined, suggestionsPatchEnabled && !(0, _fg.fg)('platform_editor_status_popup_suggestions_patch_2') && !isUpdateStatusColorsEnabled && ((_suggestedStatuses$le = suggestedStatuses === null || suggestedStatuses === void 0 ? void 0 : suggestedStatuses.length) !== null && _suggestedStatuses$le !== void 0 ? _suggestedStatuses$le : 0) > MAX_SUGGESTIONS_WITHOUT_SCROLLBAR ? statusPickerWithScrollbarWidthStylesOld : undefined],
role: "none",
ref: this.setRef(setOutsideClickTargetRef),
onClick: this.handlePopupClick,
onKeyDown: this.onKeyDown
}, pickerContent));
}
}, {
key: "render",
value: function render() {
var _this$props2 = this.props,
target = _this$props2.target,
mountTo = _this$props2.mountTo,
boundariesElement = _this$props2.boundariesElement,
scrollableElement = _this$props2.scrollableElement,
editorView = _this$props2.editorView,
intl = _this$props2.intl;
if (!(editorView !== null && editorView !== void 0 && editorView.editable)) {
return null;
}
var fitHeight = (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_update_status_colors') ? STATUS_PICKER_TEN_COLOR_FIT_HEIGHT : STATUS_PICKER_FIT_HEIGHT;
return target && (0, _react2.jsx)(PopupWithListeners, {
ariaLabel: intl.formatMessage(_messages.statusMessages.statusEditorLabel),
target: target
// eslint-disable-next-line @atlassian/perf-linting/no-unstable-inline-props -- Ignored via go/ees017 (to be fixed)
,
offset: [0, 8],
handleClickOutside: this.handleClickOutside,
handleEscapeKeydown: this.handleEscapeKeydown,
zIndex: _editorSharedStyles.akEditorFloatingDialogZIndex,
fitHeight: (0, _isExperimentEnabled.isExperimentEnabled)('platform_editor_status_popup_suggestions') && (0, _fg.fg)('platform_editor_status_popup_suggestions_patch_1') ? fitHeight : 40,
mountTo: mountTo,
boundariesElement: boundariesElement,
scrollableElement: scrollableElement,
closeOnTab: false
}, (0, _react2.jsx)(_visuallyHidden.default, {
"aria-atomic": true,
role: "alert"
}, intl.formatMessage(_messages.statusMessages.statusPickerOpenedAlert)), (0, _react2.jsx)(_uiReact.OutsideClickTargetRefContext.Consumer, null, this.renderWithSetOutsideClickTargetRef.bind(this)));
}
}, {
key: "fireSuggestedStatusClickedAnalytics",
value: function fireSuggestedStatusClickedAnalytics(status, position) {
var _this$props$suggested, _this$props$suggested2;
this.createStatusAnalyticsAndFireFunc({
action: 'clicked',
actionSubject: 'statusSuggestion',
attributes: {
color: status.color,
localId: this.state.localId,
position: position,
state: (0, _analytics.analyticsState)(this.props.isNew),
textLength: status.text ? status.text.length : 0,
totalSuggestions: (_this$props$suggested = (_this$props$suggested2 = this.props.suggestedStatuses) === null || _this$props$suggested2 === void 0 ? void 0 : _this$props$suggested2.length) !== null && _this$props$suggested !== void 0 ? _this$props$suggested : 0
}
});
}
}, {
key: "focusAdjacentSuggestedStatus",
value: function focusAdjacentSuggestedStatus(currentButton, direction) {
var _this$popupBodyWrappe2, _suggestedStatusButto;
var suggestedStatusButtons = (_this$popupBodyWrappe2 = this.popupBodyWrapper.current) === null || _this$popupBodyWrappe2 === void 0 ? void 0 : _this$popupBodyWrappe2.querySelectorAll('button[data-suggested-status-button]');
if (!(suggestedStatusButtons !== null && suggestedStatusButtons !== void 0 && suggestedStatusButtons.length)) {
return;
}
var currentIndex = Array.from(suggestedStatusButtons).indexOf(currentButton);
if (currentIndex < 0) {
return;
}
var nextIndex = (currentIndex + direction + suggestedStatusButtons.length) % suggestedStatusButtons.length;
(_suggestedStatusButto = suggestedStatusButtons[nextIndex]) === null || _suggestedStatusButto === void 0 || _suggestedStatusButto.focus();
}
}]);
}(_react.default.Component); // eslint-disable-next-line @typescript-eslint/no-restricted-types
var StatusPickerWithoutAnalytcs = exports.StatusPickerWithoutAnalytcs = (0, _reactIntl.injectIntl)(StatusPickerWithIntl);
var _default_1 = (0, _withAnalyticsEvents.default)()(StatusPickerWithoutAnalytcs);
var _default = exports.default = _default_1;