@atlaskit/editor-common 74.57.0 → 74.58.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/editor-common
 
+## 74.58.0
+
+### Minor Changes
+
+- [`c06bb97591a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c06bb97591a) - [ED-19023] Add distorted duration to TTI event (tracking tab visibility)
+- [`d4cbb84052d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/d4cbb84052d) - Move element-browser to `editor-common` to decouple quick-insert plugin.
+
 ## 74.57.0
 
 ### Minor Changes

package/dist/cjs/element-browser/ElementBrowser.js

@@ -0,0 +1,152 @@
+"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 _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));
+var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _react = _interopRequireWildcard(require("react"));
+var _StatelessElementBrowser = _interopRequireDefault(require("./components/StatelessElementBrowser"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = (0, _getPrototypeOf2.default)(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = (0, _getPrototypeOf2.default)(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return (0, _possibleConstructorReturn2.default)(this, result); }; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+var ElementBrowser = /*#__PURE__*/function (_PureComponent) {
+  (0, _inherits2.default)(ElementBrowser, _PureComponent);
+  var _super = _createSuper(ElementBrowser);
+  function ElementBrowser() {
+    var _this;
+    (0, _classCallCheck2.default)(this, ElementBrowser);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
+      categories: [],
+      items: [],
+      searchTerm: '',
+      selectedCategory: _this.props.defaultCategory
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getCategories", function () {
+      var items = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _this.fetchItems();
+      return (
+        // NOTE: we fetch all items to determine available categories.
+        _this.filterCategories(items, _this.props.categories)
+      );
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "filterCategories", function (items) {
+      var categories = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
+      var showCategories = _this.props.showCategories;
+      if (!showCategories) {
+        return [];
+      }
+      return categories.filter(function (category) {
+        return category.name === 'all' || items.some(function (item) {
+          return (item.categories || []).includes(category.name);
+        });
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "fetchItems", function (query, category) {
+      return _this.props.getItems(query, category);
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSearch", function (searchTerm) {
+      var defaultCategory = _this.props.defaultCategory;
+      _this.setState({
+        searchTerm: searchTerm,
+        selectedCategory: defaultCategory
+      });
+    });
+    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCategorySelection", function (clickedCategory) {
+      var stateCategoryValue = _this.state.selectedCategory;
+
+      /**
+       * Reset selection if clicked on the same category twice.
+       */
+      if (stateCategoryValue === clickedCategory.name) {
+        return _this.setState({
+          selectedCategory: _this.props.defaultCategory
+        });
+      }
+      _this.setState({
+        selectedCategory: clickedCategory.name,
+        searchTerm: ''
+      });
+    });
+    return _this;
+  }
+  (0, _createClass2.default)(ElementBrowser, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var items = this.fetchItems();
+      this.setState({
+        items: items,
+        categories: this.getCategories(items)
+      });
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$state = this.state,
+        searchTerm = _this$state.searchTerm,
+        selectedCategory = _this$state.selectedCategory;
+
+      // Update both items and categories when there's a new getItems
+      if (this.props.getItems !== prevProps.getItems) {
+        this.setState({
+          categories: this.getCategories(),
+          items: this.fetchItems(searchTerm, selectedCategory)
+        });
+      } else if (searchTerm !== prevState.searchTerm || selectedCategory !== prevState.selectedCategory) {
+        this.setState({
+          items: this.fetchItems(searchTerm, selectedCategory)
+        });
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+        onInsertItem = _this$props.onInsertItem,
+        onSelectItem = _this$props.onSelectItem,
+        showSearch = _this$props.showSearch,
+        showCategories = _this$props.showCategories,
+        mode = _this$props.mode,
+        emptyStateHandler = _this$props.emptyStateHandler,
+        viewMoreItem = _this$props.viewMoreItem;
+      var _this$state2 = this.state,
+        categories = _this$state2.categories,
+        searchTerm = _this$state2.searchTerm,
+        selectedCategory = _this$state2.selectedCategory,
+        items = _this$state2.items;
+      return /*#__PURE__*/_react.default.createElement(_StatelessElementBrowser.default, {
+        items: items,
+        categories: categories,
+        onSearch: this.handleSearch,
+        onSelectCategory: this.handleCategorySelection,
+        onSelectItem: onSelectItem,
+        onInsertItem: onInsertItem,
+        selectedCategory: selectedCategory,
+        showSearch: showSearch,
+        showCategories: showCategories,
+        mode: mode,
+        searchTerm: searchTerm,
+        emptyStateHandler: emptyStateHandler,
+        viewMoreItem: viewMoreItem
+      });
+    }
+  }]);
+  return ElementBrowser;
+}(_react.PureComponent);
+exports.default = ElementBrowser;
+(0, _defineProperty2.default)(ElementBrowser, "defaultProps", {
+  defaultCategory: 'all',
+  onInsertItem: function onInsertItem() {}
+});

package/dist/cjs/element-browser/ViewMore.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ViewMore = void 0;
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = require("react");
+var _react2 = require("@emotion/react");
+var _menu = require("@atlaskit/menu");
+var _templateObject, _templateObject2;
+/** @jsx jsx */
+var itemBefore = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: 40px;\n  height: 40px;\n  box-sizing: border-box;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
+var ViewMore = function ViewMore(_ref) {
+  var item = _ref.item,
+    focus = _ref.focus;
+  var ref = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (ref.current && focus) {
+      ref.current.focus();
+    }
+  }, [focus]);
+  return (0, _react2.jsx)(_menu.Section, {
+    hasSeparator: true
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
+    onClick: item.action,
+    iconBefore: (0, _react2.jsx)("div", {
+      css: itemBefore
+    }, item.icon()),
+    "aria-describedby": item.title,
+    "data-testid": "view-more-elements-item"
+    // @ts-ignore Overriding Menu styles is not supported
+    ,
+    css: (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n          padding: 0px ", ";\n        "])), "var(--ds-space-150, 12px)"),
+    ref: ref
+  }, item.title));
+};
+exports.ViewMore = ViewMore;

package/dist/cjs/element-browser/components/CategoryList.js

@@ -0,0 +1,115 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
+var _colors = require("@atlaskit/theme/colors");
+var _analytics = require("../../analytics");
+var _constants = require("../constants");
+var _useFocus = _interopRequireDefault(require("../hooks/use-focus"));
+var _templateObject;
+var _excluded = ["categories"],
+  _excluded2 = ["buttonStyles"];
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+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; }
+function CategoryList(_ref) {
+  var _ref$categories = _ref.categories,
+    categories = _ref$categories === void 0 ? [] : _ref$categories,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _React$useState = _react.default.useState(null),
+    _React$useState2 = (0, _slicedToArray2.default)(_React$useState, 2),
+    focusedCategoryIndex = _React$useState2[0],
+    setFocusedCategoryIndex = _React$useState2[1];
+  return (0, _react2.jsx)(_react.Fragment, null, categories.map(function (category, index) {
+    return (0, _react2.jsx)(CategoryListItem, (0, _extends2.default)({
+      key: category.title,
+      index: index,
+      category: category,
+      focus: focusedCategoryIndex === index,
+      setFocusedCategoryIndex: setFocusedCategoryIndex
+    }, props));
+  }));
+}
+function CategoryListItem(_ref2) {
+  var category = _ref2.category,
+    onSelectCategory = _ref2.onSelectCategory,
+    selectedCategory = _ref2.selectedCategory,
+    index = _ref2.index,
+    focus = _ref2.focus,
+    setFocusedCategoryIndex = _ref2.setFocusedCategoryIndex,
+    createAnalyticsEvent = _ref2.createAnalyticsEvent;
+  var ref = (0, _useFocus.default)(focus);
+  var onClick = (0, _react.useCallback)(function () {
+    onSelectCategory(category);
+
+    /**
+     * When user double clicks on same category, focus on first item.
+     */
+    if (selectedCategory === category.name) {
+      setFocusedCategoryIndex(0);
+    } else {
+      setFocusedCategoryIndex(index);
+    }
+    (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
+      payload: {
+        action: _analytics.ACTION.CLICKED,
+        actionSubject: _analytics.ACTION_SUBJECT.BUTTON,
+        actionSubjectId: _analytics.ACTION_SUBJECT_ID.BUTTON_CATEGORY,
+        eventType: _analytics.EVENT_TYPE.TRACK
+      }
+    });
+  }, [onSelectCategory, category, index, selectedCategory, setFocusedCategoryIndex, createAnalyticsEvent]);
+  var onFocus = (0, _react.useCallback)(function () {
+    if (!focus) {
+      setFocusedCategoryIndex(index);
+    }
+  }, [focus, index, setFocusedCategoryIndex]);
+  var getTheme = (0, _react.useCallback)(function (currentTheme, themeProps) {
+    var _currentTheme = currentTheme(themeProps),
+      buttonStyles = _currentTheme.buttonStyles,
+      rest = (0, _objectWithoutProperties2.default)(_currentTheme, _excluded2);
+    return _objectSpread({
+      buttonStyles: _objectSpread(_objectSpread({}, buttonStyles), {}, {
+        textAlign: 'start',
+        marginLeft: "var(--ds-space-025, 2px)",
+        height: '100%',
+        width: '100%',
+        color: category.name !== selectedCategory ? "var(--ds-text, ".concat(_colors.N800, ")") : "var(--ds-text-selected, ".concat(_colors.B400, ")")
+      }, category.name === selectedCategory && {
+        background: "var(--ds-background-selected, ".concat(_colors.B50, ")")
+      })
+    }, rest);
+  }, [category.name, selectedCategory]);
+  return (0, _react2.jsx)("div", {
+    css: buttonWrapper
+  }, (0, _react2.jsx)(_customThemeButton.default, {
+    appearance: "subtle",
+    isSelected: selectedCategory === category.name,
+    onClick: onClick,
+    onFocus: onFocus,
+    theme: getTheme,
+    ref: ref,
+    testId: "element-browser-category-item"
+  }, category.title));
+}
+var buttonWrapper = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  height: ", "px;\n  margin: ", " ", "\n    ", " 0;\n\n  @media (min-width: ", "px) {\n    :not(:last-child) {\n      margin-bottom: 0;\n    }\n  }\n"])), _constants.GRID_SIZE * 4, "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", "var(--ds-space-050, 4px)", _constants.DEVICE_BREAKPOINT_NUMBERS.medium);
+var MemoizedCategoryListWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
+  component: 'CategoryList'
+})(CategoryList));
+var _default = MemoizedCategoryListWithAnalytics;
+exports.default = _default;

package/dist/cjs/element-browser/components/ElementBrowserLoader.js

@@ -0,0 +1,36 @@
+"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 _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _reactLoadable = _interopRequireDefault(require("react-loadable"));
+var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
+var _templateObject;
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var spinnerContainer = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  height: 100%;\n  width: 100%;\n"])));
+var ElementBrowserLoader = (0, _reactLoadable.default)({
+  loader: function loader() {
+    return Promise.resolve().then(function () {
+      return _interopRequireWildcard(require( /* webpackChunkName: "@atlaskit-internal_editor-element-browser" */'../ElementBrowser'));
+    }).then(function (module) {
+      return module.default;
+    });
+  },
+  loading: function loading() {
+    return (0, _react2.jsx)("div", {
+      css: spinnerContainer
+    }, (0, _react2.jsx)(_spinner.default, {
+      size: "medium"
+    }));
+  }
+});
+var _default = ElementBrowserLoader;
+exports.default = _default;

package/dist/cjs/element-browser/components/ElementList/ElementList.js

@@ -0,0 +1,256 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ElementItem = ElementItem;
+exports.itemIcon = exports.default = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _AutoSizer = require("react-virtualized/dist/commonjs/AutoSizer");
+var _Collection = require("react-virtualized/dist/commonjs/Collection");
+var _analyticsNext = require("@atlaskit/analytics-next");
+var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
+var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _menu = require("@atlaskit/menu");
+var _colors = require("@atlaskit/theme/colors");
+var _constants = require("@atlaskit/theme/constants");
+var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
+var _analytics = require("../../../analytics");
+var _quickInsert = require("../../../quick-insert");
+var _constants2 = require("../../constants");
+var _useContainerWidth2 = _interopRequireDefault(require("../../hooks/use-container-width"));
+var _useFocus = _interopRequireDefault(require("../../hooks/use-focus"));
+var _types = require("../../types");
+var _cellSizeAndPositionGetter = _interopRequireDefault(require("./cellSizeAndPositionGetter"));
+var _EmptyState = _interopRequireDefault(require("./EmptyState"));
+var _utils = require("./utils");
+var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "searchTerm"];
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
+/** @jsx jsx */
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var ICON_HEIGHT = 40;
+exports.ICON_HEIGHT = ICON_HEIGHT;
+var ICON_WIDTH = 40;
+exports.ICON_WIDTH = ICON_WIDTH;
+var itemIcon = (0, _react2.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  width: ", "px;\n  height: ", "px;\n  overflow: hidden;\n  border: 1px solid ", "; /* N60 at 50% */\n  border-radius: ", "px;\n  box-sizing: border-box;\n\n  display: flex;\n  justify-content: center;\n  align-items: center;\n\n  div {\n    width: ", "px;\n    height: ", "px;\n  }\n"])), ICON_WIDTH, ICON_HEIGHT, "var(--ds-border, rgba(223, 225, 229, 0.5))", (0, _constants.borderRadius)(), ICON_WIDTH, ICON_HEIGHT);
+exports.itemIcon = itemIcon;
+function ElementList(_ref) {
+  var items = _ref.items,
+    mode = _ref.mode,
+    selectedItemIndex = _ref.selectedItemIndex,
+    focusedItemIndex = _ref.focusedItemIndex,
+    setColumnCount = _ref.setColumnCount,
+    createAnalyticsEvent = _ref.createAnalyticsEvent,
+    emptyStateHandler = _ref.emptyStateHandler,
+    selectedCategory = _ref.selectedCategory,
+    searchTerm = _ref.searchTerm,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var _useContainerWidth = (0, _useContainerWidth2.default)(),
+    containerWidth = _useContainerWidth.containerWidth,
+    ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
+  var _useState = (0, _react.useState)(_constants2.SCROLLBAR_WIDTH),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    scrollbarWidth = _useState2[0],
+    setScrollbarWidth = _useState2[1];
+  var fullMode = mode === _types.Modes.full;
+  (0, _react.useEffect)(function () {
+    /**
+     * More of an optimization condition.
+     * Initially the containerWidths are reported 0 twice.
+     **/
+    if (fullMode && containerWidth > 0) {
+      setColumnCount((0, _utils.getColumnCount)(containerWidth));
+      var updatedScrollbarWidth = (0, _utils.getScrollbarWidth)();
+      if (updatedScrollbarWidth > 0) {
+        setScrollbarWidth(updatedScrollbarWidth);
+      }
+    }
+  }, [fullMode, containerWidth, setColumnCount, scrollbarWidth]);
+  var onExternalLinkClick = (0, _react.useCallback)(function () {
+    (0, _analytics.fireAnalyticsEvent)(createAnalyticsEvent)({
+      payload: {
+        action: _analytics.ACTION.VISITED,
+        actionSubject: _analytics.ACTION_SUBJECT.SMART_LINK,
+        eventType: _analytics.EVENT_TYPE.TRACK
+      }
+    });
+  }, [createAnalyticsEvent]);
+  var cellRenderer = (0, _react.useMemo)(function () {
+    return function (_ref2) {
+      var index = _ref2.index,
+        key = _ref2.key,
+        style = _ref2.style;
+      if (items[index] == null) {
+        return;
+      }
+      return (0, _react2.jsx)("div", {
+        style: style,
+        key: key,
+        className: "element-item-wrapper",
+        css: elementItemWrapper
+      }, (0, _react2.jsx)(MemoizedElementItem, (0, _extends2.default)({
+        inlineMode: !fullMode,
+        index: index,
+        item: items[index],
+        selected: selectedItemIndex === index,
+        focus: focusedItemIndex === index
+      }, props)));
+    };
+  }, [items, fullMode, selectedItemIndex, focusedItemIndex, props]);
+  return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), !items.length ? emptyStateHandler ? emptyStateHandler({
+    mode: mode,
+    selectedCategory: selectedCategory,
+    searchTerm: searchTerm
+  }) : (0, _react2.jsx)(_EmptyState.default, {
+    onExternalLinkClick: onExternalLinkClick
+  }) : (0, _react2.jsx)("div", {
+    css: elementItemsWrapper,
+    "data-testid": "element-items"
+  }, (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
+    disableWidth: true
+  }, function (_ref3) {
+    var height = _ref3.height;
+    return (0, _react2.jsx)(_Collection.Collection, {
+      cellCount: items.length,
+      cellRenderer: cellRenderer,
+      cellSizeAndPositionGetter: (0, _cellSizeAndPositionGetter.default)(containerWidth - _constants2.ELEMENT_LIST_PADDING * 2, scrollbarWidth),
+      height: height,
+      width: containerWidth - _constants2.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
+      /**
+       * Refresh Collection on WidthObserver value change.
+       * Length of the items used to force re-render to solve Firefox bug with react-virtualized retaining
+       * scroll position after updating the data. If new data has different number of cells, a re-render
+       * is forced to prevent the scroll position render bug.
+       */,
+      key: containerWidth + items.length,
+      scrollToCell: selectedItemIndex
+    });
+  }))));
+}
+var MemoizedElementItem = /*#__PURE__*/(0, _react.memo)(ElementItem);
+MemoizedElementItem.displayName = 'MemoizedElementItem';
+function ElementItem(_ref4) {
+  var inlineMode = _ref4.inlineMode,
+    selected = _ref4.selected,
+    item = _ref4.item,
+    index = _ref4.index,
+    onInsertItem = _ref4.onInsertItem,
+    focus = _ref4.focus,
+    setFocusedItemIndex = _ref4.setFocusedItemIndex;
+  var ref = (0, _useFocus.default)(focus);
+
+  /**
+   * Note: props.onSelectItem(item) is not called here as the StatelessElementBrowser's
+   * useEffect would trigger it on selectedItemIndex change. (Line 106-110)
+   * This implementation was changed for keyboard/click selection to work with `onInsertItem`.
+   */
+  var onClick = (0, _react.useCallback)(function (e) {
+    e.preventDefault();
+    e.stopPropagation();
+    setFocusedItemIndex(index);
+    switch (e.nativeEvent.detail) {
+      case 0:
+        onInsertItem(item);
+        break;
+      case 1:
+        if (inlineMode) {
+          onInsertItem(item);
+        }
+        break;
+      case 2:
+        if (!inlineMode) {
+          onInsertItem(item);
+        }
+        break;
+      default:
+        return;
+    }
+  }, [index, inlineMode, item, onInsertItem, setFocusedItemIndex]);
+  var icon = item.icon,
+    title = item.title,
+    description = item.description,
+    keyshortcut = item.keyshortcut;
+  return (0, _react2.jsx)(_tooltip.default, {
+    content: description,
+    testId: "element-item-tooltip-".concat(index)
+  }, (0, _react2.jsx)(_menu.ButtonItem, {
+    onClick: onClick,
+    iconBefore: (0, _react2.jsx)(ElementBefore, {
+      icon: icon,
+      title: title
+    }),
+    isSelected: selected,
+    "aria-describedby": title,
+    ref: ref,
+    testId: "element-item-".concat(index)
+  }, (0, _react2.jsx)(ItemContent, {
+    style: inlineMode ? null : itemStyleOverrides,
+    tabIndex: 0,
+    title: title,
+    description: description,
+    keyshortcut: keyshortcut
+  })));
+}
+
+/**
+ * Inline mode should use the existing Align-items:center value.
+ */
+var itemStyleOverrides = {
+  alignItems: 'flex-start'
+};
+var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (_ref5) {
+  var icon = _ref5.icon,
+    title = _ref5.title;
+  return (0, _react2.jsx)("div", {
+    css: [itemIcon, itemIconStyle]
+  }, icon ? icon() : (0, _react2.jsx)(_quickInsert.IconFallback, null));
+});
+var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref6) {
+  var title = _ref6.title,
+    description = _ref6.description,
+    keyshortcut = _ref6.keyshortcut;
+  return (0, _react2.jsx)("div", {
+    css: itemBody,
+    className: "item-body"
+  }, (0, _react2.jsx)("div", {
+    css: itemText
+  }, (0, _react2.jsx)("div", {
+    css: itemTitleWrapper
+  }, (0, _react2.jsx)("p", {
+    css: itemTitle
+  }, title), (0, _react2.jsx)("div", {
+    css: itemAfter
+  }, keyshortcut && (0, _react2.jsx)("div", {
+    css: _shortcut.shortcutStyle
+  }, keyshortcut))), description && (0, _react2.jsx)("p", {
+    css: itemDescription
+  }, description)));
+});
+var elementItemsWrapper = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 1;\n  flex-flow: row wrap;\n  align-items: flex-start;\n  justify-content: flex-start;\n  overflow: hidden;\n  padding: ", "px; // For Focus outline\n\n  .ReactVirtualized__Collection {\n    border-radius: 3px; // Standard border-radius across other components like Search or Item.\n    outline: none;\n\n    :focus {\n      box-shadow: 0 0 0 ", "px\n        ", ";\n    }\n  }\n  .ReactVirtualized__Collection__innerScrollContainer {\n    div[class='element-item-wrapper']:last-child {\n      padding-bottom: ", ";\n    }\n  }\n"])), _constants2.ELEMENT_LIST_PADDING, _constants2.ELEMENT_LIST_PADDING, "var(--ds-border-focused, ".concat(_colors.B100, ")"), "var(--ds-space-050, 4px)");
+var elementItemWrapper = (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  div {\n    button {\n      height: 75px;\n      align-items: flex-start;\n      padding: ", " ", " 11px;\n    }\n  }\n"])), "var(--ds-space-150, 12px)", "var(--ds-space-150, 12px)");
+var itemBody = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n  line-height: 1.4;\n  width: 100%;\n\n  margin-top: -2px; // Fixes the Item Icon and text's alignment issue\n"])));
+
+/*
+ * -webkit-line-clamp is also supported by firefox 🎉
+ * https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/68#CSS
+ */
+var multilineStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  display: -webkit-box;\n  -webkit-line-clamp: 2;\n  -webkit-box-orient: vertical;\n"])));
+var itemDescription = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  ", ";\n\n  overflow: hidden;\n  font-size: ", ";\n  color: ", ";\n  margin-top: ", ";\n"])), multilineStyle, (0, _editorSharedStyles.relativeFontSizeToBase16)(11.67), "var(--ds-text-subtle, ".concat(_colors.N200, ")"), "var(--ds-space-025, 2px)");
+var itemText = (0, _react2.css)(_templateObject7 || (_templateObject7 = (0, _taggedTemplateLiteral2.default)(["\n  width: inherit;\n  white-space: initial;\n"])));
+var itemTitleWrapper = (0, _react2.css)(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  justify-content: space-between; // Title and keyboardshortcut are rendered in the same block\n"])));
+var itemTitle = (0, _react2.css)(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2.default)(["\n  width: 100%;\n  overflow: hidden;\n\n  white-space: nowrap;\n  text-overflow: ellipsis;\n"])));
+var itemAfter = (0, _react2.css)(_templateObject10 || (_templateObject10 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
+var itemIconStyle = (0, _react2.css)(_templateObject11 || (_templateObject11 = (0, _taggedTemplateLiteral2.default)(["\n  img {\n    height: 40px;\n    width: 40px;\n    object-fit: cover;\n  }\n"])));
+var MemoizedElementListWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _analyticsNext.withAnalyticsContext)({
+  component: 'ElementList'
+})(ElementList));
+var _default = MemoizedElementListWithAnalytics;
+exports.default = _default;