@atlaskit/editor-common/dist/cjs/element-browser/components/ElementSearch.js

A package that contains common classes and components for editor and renderer

"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 _reactIntlNext = require("react-intl-next");
var _analyticsNext = require("@atlaskit/analytics-next");
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/search"));
var _textfield = _interopRequireDefault(require("@atlaskit/textfield"));
var _colors = require("@atlaskit/theme/colors");
var _constants = require("../constants");
var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
var _messages = _interopRequireDefault(require("../messages"));
var _types = require("../types");
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 && Object.prototype.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; }
/** @jsx jsx */

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;
  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 (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, {
      size: "medium",
      label: "Advanced search",
      primaryColor: "inherit"
    })),
    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": "search",
    "aria-labelledby": "search-assistive",
    className: "js-search-input",
    role: "combobox",
    "aria-activedescendant": ariaActiveDescendant,
    value: searchTerm
  }), (0, _react2.jsx)("span", {
    id: "search-assistive",
    ref: assistiveTextRef,
    "aria-live": "polite",
    "aria-atomic": "true",
    className: "assistive"
  }, assistiveMessage));
}
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)({
  '& > [data-ds--text-field--container]': {
    height: "".concat(_constants.GRID_SIZE * 6, "px"),
    borderRadius: "".concat(_constants.GRID_SIZE, "px"),
    flex: '1 1 100%',
    overflow: 'visible',
    '& > [data-ds--text-field--input]': {
      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)({
  '& > [data-ds--text-field--container]': {
    height: "".concat(_constants.GRID_SIZE * 5, "px"),
    flex: 'none',
    overflow: 'revert'
  }
});
var elementBeforeInput = (0, _react2.css)({
  margin: "1px ".concat("var(--ds-space-075, 6px)", " 0 ", "var(--ds-space-100, 8px)"),
  color: "var(--ds-icon, ".concat(_colors.N200, ")"),
  'span, svg': {
    height: '20px',
    width: '20px'
  }
});
var elementAfterInput = (0, _react2.css)({
  margin: "0 ".concat("var(--ds-space-100, 8px)"),
  height: _constants.SEARCH_ITEM_HEIGHT_WIDTH,
  textAlign: 'center'
});
var MemoizedElementSearchWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
  component: 'Searchbar'
})((0, _reactIntlNext.injectIntl)(ElementSearch)));
var _default = exports.default = MemoizedElementSearchWithAnalytics;