@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
189 lines (185 loc) • 9.38 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactIntl = require("react-intl");
var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
var _search = _interopRequireDefault(require("@atlaskit/icon/core/search"));
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
var _constants = require("../constants");
var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
var _messages = _interopRequireDefault(require("../messages"));
var _types = require("../types");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
function ElementSearch(_ref) {
var onSearch = _ref.onSearch,
mode = _ref.mode,
formatMessage = _ref.intl.formatMessage,
focus = _ref.focus,
onClick = _ref.onClick,
onKeyDown = _ref.onKeyDown,
searchTerm = _ref.searchTerm,
items = _ref.items,
selectedItemIndex = _ref.selectedItemIndex,
ariaControlsId = _ref.ariaControlsId;
var ref = (0, _useFocus.default)(focus);
var assistiveTextRef = (0, _react.useRef)(null);
var _useState = (0, _react.useState)(false),
_useState2 = (0, _slicedToArray2.default)(_useState, 2),
inputFocused = _useState2[0],
setInputFocused = _useState2[1];
(0, _react.useLayoutEffect)(function () {
if (assistiveTextRef) {
var assistiveDiv = assistiveTextRef.current;
/**
* We need to remove and set attributes, for the proper working of screen readers.
*/
assistiveDiv === null || assistiveDiv === void 0 || assistiveDiv.removeAttribute('aria-live');
assistiveDiv === null || assistiveDiv === void 0 || assistiveDiv.setAttribute('aria-live', 'polite');
}
}, [items, formatMessage]);
var onChange = function onChange(_ref2) {
var value = _ref2.target.value;
onSearch(value);
};
var onFocus = function onFocus(_e) {
setInputFocused(true);
};
var onBlur = function onBlur(_e) {
setInputFocused(false);
};
var getFormattedMessage = function getFormattedMessage(itemsCount) {
if (searchTerm === '') {
return "".concat(formatMessage(_messages.default.assistiveTextDefault, {
count: itemsCount
}));
}
if (itemsCount > 1) {
return "".concat(formatMessage(_messages.default.assistiveTextResult, {
count: itemsCount
}));
}
if (itemsCount === 1) {
return "".concat(formatMessage(_messages.default.assistiveTextResult, {
count: itemsCount
}));
}
return formatMessage(_messages.default.assistiveTextResult, {
count: itemsCount
});
};
var assistiveMessage = getFormattedMessage(items === null || items === void 0 ? void 0 : items.length);
var isInputNotFocusedAndItemSelected = !inputFocused && selectedItemIndex !== undefined;
var ariaActiveDescendant = isInputNotFocusedAndItemSelected ? "searched-item-".concat(selectedItemIndex) : undefined;
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: [wrapper, mode === _types.Modes.inline && wrapperInline]
}, (0, _react2.jsx)(_textfield.default, {
ref: ref,
onChange: onChange,
onClick: onClick,
onFocus: onFocus,
onKeyDown: onKeyDown,
onBlur: onBlur,
elemBeforeInput: (0, _react2.jsx)("div", {
css: elementBeforeInput,
"data-testid": "element_search__element_before_input",
"aria-hidden": "true"
}, (0, _react2.jsx)(_search.default, {
spacing: "spacious",
label: "Advanced search",
color: "var(--ds-icon-subtle, #505258)"
})),
elemAfterInput: (0, _react2.jsx)("div", {
css: elementAfterInput,
"data-testid": "element_search__element_after_input"
}, (0, _react2.jsx)("div", {
css: styledShortcut
}, "\u23CE ", formatMessage(_messages.default.elementAfterInputMessage))),
placeholder: formatMessage(_messages.default.placeHolderMessage),
"aria-label": formatMessage((0, _platformFeatureFlags.fg)('ally_30205_accessibility_label_fix') ? _messages.default.searchAriaLabelNew : _messages.default.searchAriaLabel),
"aria-labelledby": (0, _platformFeatureFlags.fg)('platform_editor_ally_remove_role_tabpanel') ? undefined : 'search-assistive',
"aria-describedby": (0, _platformFeatureFlags.fg)('platform_editor_ally_remove_role_tabpanel') ? 'search-assistive' : undefined
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "js-search-input",
role: "combobox",
"aria-expanded": "true",
"aria-controls": ariaControlsId,
"aria-activedescendant": ariaActiveDescendant,
value: searchTerm
}), (0, _react2.jsx)("span", {
id: "search-assistive",
ref: assistiveTextRef,
"aria-live": "polite",
"aria-atomic": "true"
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
,
className: "assistive"
}, assistiveMessage))
);
}
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var styledShortcut = (0, _react2.css)(_shortcut.shortcutStyle, {
padding: "var(--ds-space-050, 4px)".concat(" ", "var(--ds-space-100, 8px)"),
width: "var(--ds-space-600, 48px)"
});
var wrapper = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > [data-ds--text-field--container]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: "".concat(_constants.GRID_SIZE * 6, "px"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
borderRadius: "".concat(_constants.GRID_SIZE, "px"),
flex: '1 1 100%',
overflow: 'visible',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > [data-ds--text-field--input]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
fontSize: (0, _editorSharedStyles.relativeFontSizeToBase16)(14),
padding: "var(--ds-space-100, 8px)".concat(" ", "var(--ds-space-075, 6px)", " ", "var(--ds-space-100, 8px)", " 0")
}
}
});
var wrapperInline = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'& > [data-ds--text-field--container]': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: "40px",
flex: 'none',
overflow: 'revert'
}
});
var elementBeforeInput = (0, _react2.css)({
margin: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-075, 6px)", " 0 ", "var(--ds-space-100, 8px)"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'span, svg': {
height: '20px',
width: '20px'
}
});
var elementAfterInput = (0, _react2.css)({
margin: "0 ".concat("var(--ds-space-100, 8px)"),
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
height: _constants.SEARCH_ITEM_HEIGHT_WIDTH,
textAlign: 'center'
});
var MemoizedElementSearchWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _withAnalyticsContext.default)({
component: 'Searchbar'
})((0, _reactIntl.injectIntl)(ElementSearch)));
var _default = exports.default = MemoizedElementSearchWithAnalytics;