@atlaskit/editor-plugin-quick-insert/dist/esm/ui/RegistryElementBrowser/RegistryElementBrowserCategories.js

Quick insert plugin for @atlaskit/editor-core

/* RegistryElementBrowserCategories.tsx generated by @compiled/babel-plugin v3.0.2 */
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import "./RegistryElementBrowserCategories.compiled.css";
import { ax, ix } from "@compiled/react/runtime";
import React, { useCallback } from 'react';
import { useIntl } from 'react-intl';
import Button from '@atlaskit/button/default/button';
import { BLOCK_TEMPLATES_SECTION, CREATE_SECTION, DATA_AND_CHARTS_SECTION, EMBED_SECTION, MEDIA_SECTION, OTHER_SECTION, ROVO_SECTION, STRUCTURE_SECTION, TEXT_FORMATTING_SECTION } from '@atlaskit/editor-common/quick-insert/keys';
import { messages } from '@atlaskit/editor-common/quick-insert/messages';
import { Text } from '@atlaskit/primitives/compiled/text';
var sectionMessages = _defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty(_defineProperty({}, BLOCK_TEMPLATES_SECTION.key, messages.categoryBlockTemplates), CREATE_SECTION.key, messages.categoryCreate), DATA_AND_CHARTS_SECTION.key, messages.categoryDataAndCharts), EMBED_SECTION.key, messages.categoryEmbed), MEDIA_SECTION.key, messages.categoryMedia), OTHER_SECTION.key, messages.categoryOther), ROVO_SECTION.key, messages.categoryRovo), STRUCTURE_SECTION.key, messages.categoryStructure), TEXT_FORMATTING_SECTION.key, messages.categoryTextFormatting);
var categoryGridStyles = null;
export var RegistryElementBrowserCategories = function RegistryElementBrowserCategories(_ref) {
  var section = _ref.section,
    sections = _ref.sections,
    onSectionClick = _ref.onSectionClick,
    selectedButtonRef = _ref.selectedButtonRef;
  var _useIntl = useIntl(),
    formatMessage = _useIntl.formatMessage;
  var isAllSelected = section === undefined;
  var onCategoryKeyDown = useCallback(function (event) {
    var _event$currentTarget$, _event$currentTarget$2, _event$currentTarget$3, _event$currentTarget$4;
    if (!['ArrowDown', 'ArrowUp', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
      return;
    }
    var isForward = event.key === 'ArrowDown' || event.key === 'ArrowRight';
    var nextButton = isForward ? (_event$currentTarget$ = event.currentTarget.nextElementSibling) !== null && _event$currentTarget$ !== void 0 ? _event$currentTarget$ : (_event$currentTarget$2 = event.currentTarget.parentElement) === null || _event$currentTarget$2 === void 0 ? void 0 : _event$currentTarget$2.firstElementChild : (_event$currentTarget$3 = event.currentTarget.previousElementSibling) !== null && _event$currentTarget$3 !== void 0 ? _event$currentTarget$3 : (_event$currentTarget$4 = event.currentTarget.parentElement) === null || _event$currentTarget$4 === void 0 ? void 0 : _event$currentTarget$4.lastElementChild;
    if (nextButton) {
      event.preventDefault();
      nextButton.focus();
      nextButton.click();
    }
  }, []);
  return /*#__PURE__*/React.createElement("div", {
    "aria-label": formatMessage({
      defaultMessage: 'Element categories',
      id: 'editor.quick-insert.categories-label'
    }),
    "data-testid": "registry-element-browser-categories",
    role: "group",
    className: ax(["_zulpu2gc _1rjc1b66 _18zr1b66 _ae4vv2br _1wpzv2br _1e0c11p5 _yv0ei47z _1ul9idpf _kqsw1if8 _154iidpf _j6eb1bhr _1vkb1ris _ttrw1bp4 _1ikaglyw _jtyui47z _ysu51wug _1hmw15vq _1g771osq _lmrjkb7n"])
  }, /*#__PURE__*/React.createElement(Button, {
    appearance: 'subtle',
    "aria-pressed": isAllSelected,
    "data-section": "",
    onClick: onSectionClick,
    onKeyDown: onCategoryKeyDown,
    ref: isAllSelected ? selectedButtonRef : undefined,
    isSelected: isAllSelected,
    shouldFitContainer: true,
    tabIndex: isAllSelected ? 0 : -1
  }, /*#__PURE__*/React.createElement(Text, {
    align: "start",
    color: "inherit",
    maxLines: 1,
    weight: "medium"
  }, formatMessage({
    defaultMessage: 'All',
    id: 'editor.quick-insert.all'
  }))), sections.map(function (entry) {
    var _sectionMessages2;
    return /*#__PURE__*/React.createElement(Button, {
      appearance: 'subtle',
      "aria-pressed": section === entry.key,
      "data-section": entry.key,
      key: entry.key,
      onClick: onSectionClick,
      onKeyDown: onCategoryKeyDown,
      ref: section === entry.key ? selectedButtonRef : undefined,
      isSelected: section === entry.key,
      shouldFitContainer: true,
      tabIndex: section === entry.key ? 0 : -1
    }, /*#__PURE__*/React.createElement(Text, {
      align: "start",
      color: "inherit",
      maxLines: 1,
      weight: "medium"
    }, formatMessage((_sectionMessages2 = sectionMessages[entry.key]) !== null && _sectionMessages2 !== void 0 ? _sectionMessages2 : messages.categoryOther)));
  }));
};