@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
825 lines (818 loc) • 34.9 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.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 _react = _interopRequireWildcard(require("react"));
var _react2 = require("@emotion/react");
var _reactVirtualized = require("react-virtualized");
var _AutoSizer = require("react-virtualized/dist/commonjs/AutoSizer");
var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
var _withAnalyticsContext = _interopRequireDefault(require("@atlaskit/analytics-next/withAnalyticsContext"));
var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
var _menu = require("@atlaskit/menu");
var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
var _primitives = require("@atlaskit/primitives");
var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
var _analytics = require("../../../analytics");
var _quickInsert = require("../../../quick-insert");
var _constants = require("../../constants");
var _useContainerWidth3 = _interopRequireDefault(require("../../hooks/use-container-width"));
var _useFocus = _interopRequireDefault(require("../../hooks/use-focus"));
var _types = require("../../types");
var _EmptyState = _interopRequireDefault(require("./EmptyState"));
var _utils = require("./utils");
var _excluded = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "columnCount", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "selectedCategoryIndex", "searchTerm", "setFocusedCategoryIndex", "setFocusedItemIndex"],
_excluded2 = ["items", "mode", "selectedItemIndex", "focusedItemIndex", "columnCount", "setColumnCount", "createAnalyticsEvent", "emptyStateHandler", "selectedCategory", "selectedCategoryIndex", "searchTerm", "setFocusedCategoryIndex", "setFocusedItemIndex"];
/**
* @jsxRuntime classic
* @jsx jsx
*/
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
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 && {}.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; }
var ICON_HEIGHT = exports.ICON_HEIGHT = 40;
var ICON_WIDTH = exports.ICON_WIDTH = 40;
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
var itemIcon = exports.itemIcon = (0, _react2.css)({
width: "".concat(ICON_WIDTH, "px"),
height: "".concat(ICON_HEIGHT, "px"),
overflow: 'hidden',
border: "1px solid ".concat("var(--ds-border, rgba(223, 225, 229, 0.5))"),
// 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: "var(--ds-border-radius, 3px)",
boxSizing: 'border-box',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
div: {
width: "".concat(ICON_WIDTH, "px"),
height: "".concat(ICON_HEIGHT, "px")
}
});
function ElementListOld(_ref) {
var items = _ref.items,
mode = _ref.mode,
selectedItemIndex = _ref.selectedItemIndex,
focusedItemIndex = _ref.focusedItemIndex,
columnCount = _ref.columnCount,
setColumnCount = _ref.setColumnCount,
createAnalyticsEvent = _ref.createAnalyticsEvent,
emptyStateHandler = _ref.emptyStateHandler,
selectedCategory = _ref.selectedCategory,
selectedCategoryIndex = _ref.selectedCategoryIndex,
searchTerm = _ref.searchTerm,
setFocusedCategoryIndex = _ref.setFocusedCategoryIndex,
setFocusedItemIndex = _ref.setFocusedItemIndex,
props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
var _useContainerWidth = (0, _useContainerWidth3.default)(),
containerWidth = _useContainerWidth.containerWidth,
ContainerWidthMonitor = _useContainerWidth.ContainerWidthMonitor;
var _useState = (0, _react.useState)(_constants.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 cache = (0, _react.useMemo)(function () {
return new _CellMeasurer.CellMeasurerCache({
fixedWidth: true,
defaultHeight: 75,
minHeight: 75
});
}, []);
var columnWidth = (containerWidth - _constants.ELEMENT_ITEM_PADDING * 2) / columnCount;
var rowCount = Math.ceil(items.length / columnCount);
var rowHeight = function rowHeight(_ref2) {
var index = _ref2.index;
return cache.rowHeight({
index: index
}) <= 75 ? 75 : cache.rowHeight({
index: index
}) + _constants.ELEMENT_ITEM_PADDING * 2;
};
var cellRenderer = (0, _react.useMemo)(function () {
return function (_ref3) {
var columnIndex = _ref3.columnIndex,
key = _ref3.key,
parent = _ref3.parent,
rowIndex = _ref3.rowIndex,
style = _ref3.style;
var index = rowIndex * columnCount + columnIndex;
if (items[index] == null) {
return;
}
return index > items.length - 1 ? null : (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
cache: cache,
key: key,
rowIndex: rowIndex,
columnIndex: columnIndex,
parent: parent
}, (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: style,
key: key
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
,
className: "element-item-wrapper",
css: elementItemWrapper,
onKeyDown: function onKeyDown(e) {
if (e.key === 'Tab') {
if (e.shiftKey && index === 0) {
if (setFocusedCategoryIndex) {
if (!!selectedCategoryIndex) {
setFocusedCategoryIndex(selectedCategoryIndex);
} else {
setFocusedCategoryIndex(0);
}
e.preventDefault();
}
}
// before focus jumps from elements list we need to rerender react-virtualized grid.
// Otherwise on the next render 'scrollToCell' will have same cached value
// and grid will not be scrolled to top.
// So Tab press on category will not work anymore due to invisible 1-t element.
else if (index === items.length - 2) {
setFocusedItemIndex(items.length - 1);
}
}
}
}, (0, _react2.jsx)(MemoizedElementItem, (0, _extends2.default)({
inlineMode: !fullMode,
index: index,
item: items[index],
selected: selectedItemIndex === index,
focus: focusedItemIndex === index,
setFocusedItemIndex: setFocusedItemIndex
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props))));
};
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[cache, items, fullMode, selectedItemIndex, columnCount, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), (0, _react2.jsx)("div", {
css: elementItemsWrapper,
"data-testid": "element-items",
id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
"aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
role: "tabpanel",
tabIndex: items.length === 0 ? 0 : undefined
}, !items.length ? emptyStateHandler ? emptyStateHandler({
mode: mode,
selectedCategory: selectedCategory,
searchTerm: searchTerm
}) : (0, _react2.jsx)(_EmptyState.default, {
onExternalLinkClick: onExternalLinkClick
}) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
disableWidth: true
}, function (_ref4) {
var height = _ref4.height;
return (0, _react2.jsx)(_reactVirtualized.Grid, (0, _extends2.default)({
cellRenderer: cellRenderer,
height: height,
width: containerWidth - _constants.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
/**
* Refresh Grid 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,
rowHeight: rowHeight,
rowCount: rowCount,
columnCount: columnCount,
columnWidth: columnWidth,
deferredMeasurementCache: cache
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, selectedItemIndex !== undefined && {
scrollToRow: Math.floor(selectedItemIndex / columnCount)
}));
}))));
}
function ElementListNew(_ref5) {
var items = _ref5.items,
mode = _ref5.mode,
selectedItemIndex = _ref5.selectedItemIndex,
focusedItemIndex = _ref5.focusedItemIndex,
columnCount = _ref5.columnCount,
setColumnCount = _ref5.setColumnCount,
createAnalyticsEvent = _ref5.createAnalyticsEvent,
emptyStateHandler = _ref5.emptyStateHandler,
selectedCategory = _ref5.selectedCategory,
selectedCategoryIndex = _ref5.selectedCategoryIndex,
searchTerm = _ref5.searchTerm,
setFocusedCategoryIndex = _ref5.setFocusedCategoryIndex,
setFocusedItemIndex = _ref5.setFocusedItemIndex,
cache = _ref5.cache,
onInsertItem = _ref5.onInsertItem;
var _useContainerWidth2 = (0, _useContainerWidth3.default)(),
containerWidth = _useContainerWidth2.containerWidth,
ContainerWidthMonitor = _useContainerWidth2.ContainerWidthMonitor;
var _useState3 = (0, _react.useState)(_constants.SCROLLBAR_WIDTH),
_useState4 = (0, _slicedToArray2.default)(_useState3, 2),
scrollbarWidth = _useState4[0],
setScrollbarWidth = _useState4[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 listCache = (0, _react.useMemo)(function () {
return cache !== null && cache !== void 0 ? cache : new _CellMeasurer.CellMeasurerCache({
fixedWidth: true,
defaultHeight: _constants.ELEMENT_ITEM_HEIGHT,
minHeight: _constants.ELEMENT_ITEM_HEIGHT
});
}, [cache]);
(0, _react.useEffect)(function () {
// need to recalculate values if we have the same items, but they're reordered
listCache.clearAll();
}, [listCache, searchTerm]);
var rowHeight = function rowHeight(_ref6) {
var index = _ref6.index;
return listCache.rowHeight({
index: index
});
};
return (0, _react2.jsx)(_react.Fragment, null, (0, _react2.jsx)(ContainerWidthMonitor, null), (0, _react2.jsx)("div", {
css: elementItemsWrapper,
"data-testid": "element-items",
id: selectedCategory ? "browse-category-".concat(selectedCategory, "-tab") : 'browse-category-tab',
"aria-labelledby": selectedCategory ? "browse-category--".concat(selectedCategory, "-button") : 'browse-category-button',
role: "tabpanel",
tabIndex: items.length === 0 ? 0 : undefined
}, !items.length ? emptyStateHandler ? emptyStateHandler({
mode: mode,
selectedCategory: selectedCategory,
searchTerm: searchTerm
}) : (0, _react2.jsx)(_EmptyState.default, {
onExternalLinkClick: onExternalLinkClick
}) : (0, _react2.jsx)(_react.Fragment, null, containerWidth > 0 && (0, _react2.jsx)(_AutoSizer.AutoSizer, {
disableWidth: true
}, function (_ref7) {
var height = _ref7.height;
return columnCount === 1 ? (0, _react2.jsx)(ElementListSingleColumn, {
cache: listCache,
setFocusedCategoryIndex: setFocusedCategoryIndex,
selectedCategoryIndex: selectedCategoryIndex,
items: items,
setFocusedItemIndex: setFocusedItemIndex,
fullMode: fullMode,
selectedItemIndex: selectedItemIndex,
focusedItemIndex: focusedItemIndex,
rowHeight: rowHeight,
containerWidth: containerWidth,
height: height,
onInsertItem: onInsertItem
}) : (0, _react2.jsx)(ElementListMultipleColumns, {
columnCount: columnCount,
cache: listCache,
setFocusedCategoryIndex: setFocusedCategoryIndex,
selectedCategoryIndex: selectedCategoryIndex,
items: items,
setFocusedItemIndex: setFocusedItemIndex,
fullMode: fullMode,
selectedItemIndex: selectedItemIndex,
focusedItemIndex: focusedItemIndex,
rowHeight: rowHeight,
containerWidth: containerWidth,
height: height,
onInsertItem: onInsertItem
});
}))));
}
var ElementListSingleColumn = function ElementListSingleColumn(props) {
var items = props.items,
fullMode = props.fullMode,
setFocusedItemIndex = props.setFocusedItemIndex,
rowHeight = props.rowHeight,
containerWidth = props.containerWidth,
height = props.height,
onInsertItem = props.onInsertItem,
cache = props.cache,
focusedItemIndex = props.focusedItemIndex,
setFocusedCategoryIndex = props.setFocusedCategoryIndex,
selectedCategoryIndex = props.selectedCategoryIndex,
selectedItemIndex = props.selectedItemIndex;
var rowRenderer = (0, _react.useMemo)(function () {
return function (_ref8) {
var index = _ref8.index,
key = _ref8.key,
style = _ref8.style,
parent = _ref8.parent;
return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
key: key,
cache: cache,
parent: parent,
columnIndex: 0,
rowIndex: index
}, (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: style,
key: key
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
,
className: "element-item-wrapper",
css: elementItemWrapperSingle,
onKeyDown: function onKeyDown(e) {
if (e.key === 'Tab') {
if (e.shiftKey && index === 0) {
if (setFocusedCategoryIndex) {
if (!!selectedCategoryIndex) {
setFocusedCategoryIndex(selectedCategoryIndex);
} else {
setFocusedCategoryIndex(0);
}
e.preventDefault();
}
}
// before focus jumps from elements list we need to rerender react-virtualized grid.
// Otherwise on the next render 'scrollToCell' will have same cached value
// and grid will not be scrolled to top.
// So Tab press on category will not work anymore due to invisible 1-t element.
else if (index === items.length - 2) {
setFocusedItemIndex(items.length - 1);
}
}
}
}, (0, _react2.jsx)(MemoizedElementItem, {
inlineMode: !fullMode,
index: index,
item: items[index],
selected: selectedItemIndex === index,
focus: focusedItemIndex === index,
setFocusedItemIndex: setFocusedItemIndex,
onInsertItem: onInsertItem
})));
};
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[cache, items, fullMode, selectedItemIndex, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
return (0, _react2.jsx)(_reactVirtualized.List, (0, _extends2.default)({
rowRenderer: rowRenderer,
rowCount: items.length,
rowHeight: rowHeight,
width: containerWidth - _constants.ELEMENT_LIST_PADDING * 2,
height: height,
overscanRowCount: 3,
containerRole: "presentation",
role: "listbox"
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, selectedItemIndex !== undefined && {
scrollToIndex: selectedItemIndex
}));
};
var ElementListMultipleColumns = function ElementListMultipleColumns(props) {
var columnCount = props.columnCount,
items = props.items,
fullMode = props.fullMode,
setFocusedItemIndex = props.setFocusedItemIndex,
rowHeight = props.rowHeight,
containerWidth = props.containerWidth,
height = props.height,
onInsertItem = props.onInsertItem,
cache = props.cache,
focusedItemIndex = props.focusedItemIndex,
setFocusedCategoryIndex = props.setFocusedCategoryIndex,
selectedCategoryIndex = props.selectedCategoryIndex,
selectedItemIndex = props.selectedItemIndex;
var columnWidth = (containerWidth - _constants.ELEMENT_ITEM_PADDING * 2) / columnCount;
var rowCount = Math.ceil(items.length / columnCount);
var cellRenderer = (0, _react.useMemo)(function () {
return function (_ref9) {
var columnIndex = _ref9.columnIndex,
key = _ref9.key,
parent = _ref9.parent,
rowIndex = _ref9.rowIndex,
style = _ref9.style;
var index = rowIndex * columnCount + columnIndex;
if (items[index] == null) {
return;
}
return index > items.length - 1 ? null : (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
cache: cache,
key: key,
rowIndex: rowIndex,
columnIndex: columnIndex,
parent: parent
}, (0, _react2.jsx)("div", {
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
style: style,
key: key
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766 -- Ignored via go/DSP-18766
,
className: "element-item-wrapper",
css: elementItemWrapper,
onKeyDown: function onKeyDown(e) {
if (e.key === 'Tab') {
if (e.shiftKey && index === 0) {
if (setFocusedCategoryIndex) {
if (!!selectedCategoryIndex) {
setFocusedCategoryIndex(selectedCategoryIndex);
} else {
setFocusedCategoryIndex(0);
}
e.preventDefault();
}
}
// before focus jumps from elements list we need to rerender react-virtualized grid.
// Otherwise on the next render 'scrollToCell' will have same cached value
// and grid will not be scrolled to top.
// So Tab press on category will not work anymore due to invisible 1-t element.
else if (index === items.length - 2) {
setFocusedItemIndex(items.length - 1);
}
}
}
}, (0, _react2.jsx)(MemoizedElementItem, {
inlineMode: !fullMode,
index: index,
item: items[index],
selected: selectedItemIndex === index,
focus: focusedItemIndex === index,
setFocusedItemIndex: setFocusedItemIndex,
onInsertItem: onInsertItem
})));
};
},
// eslint-disable-next-line react-hooks/exhaustive-deps
[cache, items, fullMode, selectedItemIndex, columnCount, focusedItemIndex, selectedCategoryIndex, setFocusedCategoryIndex, setFocusedItemIndex, props]);
return (0, _react2.jsx)(_reactVirtualized.Grid, (0, _extends2.default)({
cellRenderer: cellRenderer,
height: height,
width: containerWidth - _constants.ELEMENT_LIST_PADDING * 2 // containerWidth - padding on Left/Right (for focus outline)
/**
* Refresh Grid 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,
rowHeight: rowHeight,
rowCount: rowCount,
columnCount: columnCount,
columnWidth: columnWidth,
deferredMeasurementCache: cache
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, selectedItemIndex !== undefined && {
scrollToRow: Math.floor(selectedItemIndex / columnCount)
}));
};
var MemoizedElementItem = /*#__PURE__*/(0, _react.memo)(ElementItem);
MemoizedElementItem.displayName = 'MemoizedElementItem';
function ElementItem(_ref10) {
var inlineMode = _ref10.inlineMode,
selected = _ref10.selected,
item = _ref10.item,
index = _ref10.index,
onInsertItem = _ref10.onInsertItem,
focus = _ref10.focus,
setFocusedItemIndex = _ref10.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,
isDisabled = item.isDisabled;
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),
id: "searched-item-".concat(index),
isDisabled: isDisabled
}, (0, _react2.jsx)(ItemContent
// eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
, {
style: inlineMode ? null : itemStyleOverrides,
tabIndex: 0,
title: title,
description: description,
keyshortcut: keyshortcut,
isDisabled: isDisabled
})));
}
/**
* Inline mode should use the existing Align-items:center value.
*/
var itemStyleOverrides = {
alignItems: 'flex-start'
};
var ElementBefore = /*#__PURE__*/(0, _react.memo)(function (_ref11) {
var icon = _ref11.icon;
return (0, _react2.jsx)("div", {
css: [itemIcon, itemIconStyle]
}, icon ? icon() : (0, _react2.jsx)(_quickInsert.IconFallback, null));
});
var ItemContent = /*#__PURE__*/(0, _react.memo)(function (_ref12) {
var title = _ref12.title,
description = _ref12.description,
keyshortcut = _ref12.keyshortcut,
isDisabled = _ref12.isDisabled;
if ((0, _platformFeatureFlags.fg)('platform_editor_typography_ugc')) {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
(0, _react2.jsx)("div", {
css: itemBody,
className: "item-body"
}, (0, _react2.jsx)("div", {
css: itemText
}, (0, _react2.jsx)(_primitives.Stack, {
space: "space.025"
}, (0, _react2.jsx)("div", {
css: itemTitleWrapper
}, (0, _react2.jsx)(_primitives.Text, {
color: isDisabled ? 'color.text.disabled' : undefined,
maxLines: 1
}, title), (0, _react2.jsx)("div", {
css: itemAfter
}, keyshortcut && (0, _react2.jsx)("div", {
css: _shortcut.shortcutStyle
}, keyshortcut))), description && (0, _react2.jsx)(_primitives.Text, {
color: isDisabled ? 'color.text.disabled' : 'color.text.subtle',
size: "small",
maxLines: 2
}, description))))
);
} else {
return (
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
(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: isDisabled ? itemTitleDisabled : itemTitle
}, title), (0, _react2.jsx)("div", {
css: itemAfter
}, keyshortcut && (0, _react2.jsx)("div", {
css: _shortcut.shortcutStyle
}, keyshortcut))), description &&
// eslint-disable-next-line @atlaskit/design-system/use-primitives-text
(0, _react2.jsx)("p", {
css: isDisabled ? itemDescriptionDisabled : itemDescription
}, description)))
);
}
});
var elementItemsWrapper = (0, _react2.css)({
flex: 1,
flexFlow: 'row wrap',
alignItems: 'flex-start',
justifyContent: 'flex-start',
overflow: 'hidden',
padding: "var(--ds-space-025, 2px)",
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.ReactVirtualized__Grid': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
borderRadius: '3px',
outline: 'none',
'&:focus': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
boxShadow: "0 0 0 ".concat(_constants.ELEMENT_LIST_PADDING, "px ", "var(--ds-border-focused, #388BFF)")
}
},
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
'.ReactVirtualized__Grid__innerScrollContainer': {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
"div[class='element-item-wrapper']:last-child": {
paddingBottom: "var(--ds-space-050, 4px)"
}
}
});
var elementItemWrapperSingle = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
div: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
button: {
minHeight: '60px',
alignItems: 'flex-start',
padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 11px")
}
}
});
var elementItemWrapper = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
div: {
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
button: {
minHeight: '75px',
alignItems: 'flex-start',
padding: "var(--ds-space-150, 12px)".concat(" ", "var(--ds-space-150, 12px)", " 11px")
}
}
});
var itemBody = (0, _react2.css)({
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
justifyContent: 'space-between',
// eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
lineHeight: 1.4,
width: '100%',
marginTop: "var(--ds-space-negative-025, -2px)"
});
/*
* -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)({
display: '-webkit-box',
WebkitLineClamp: 2,
WebkitBoxOrient: 'vertical'
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var itemDescription = (0, _react2.css)(multilineStyle, {
overflow: 'hidden',
// 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)(11.67),
color: "var(--ds-text-subtle, #44546F)",
marginTop: "var(--ds-space-025, 2px)"
});
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var itemDescriptionDisabled = (0, _react2.css)(multilineStyle, {
overflow: 'hidden',
// 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)(11.67),
color: "var(--ds-text-disabled, #091E424F)",
marginTop: "var(--ds-space-025, 2px)"
});
var itemText = (0, _react2.css)({
width: 'inherit',
whiteSpace: 'initial'
});
var itemTitleWrapper = (0, _react2.css)({
display: 'flex',
justifyContent: 'space-between'
});
var itemTitle = (0, _react2.css)({
width: '100%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis'
});
var itemTitleDisabled = (0, _react2.css)({
width: '100%',
overflow: 'hidden',
whiteSpace: 'nowrap',
textOverflow: 'ellipsis',
color: "var(--ds-text-disabled, #091E424F)"
});
var itemAfter = (0, _react2.css)({
flex: '0 0 auto',
paddingTop: "var(--ds-space-025, 2px)",
marginBottom: "var(--ds-space-negative-025, -2px)"
});
var itemIconStyle = (0, _react2.css)({
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
img: {
height: '40px',
width: '40px',
objectFit: 'cover'
}
});
function ElementList(_ref13) {
var items = _ref13.items,
mode = _ref13.mode,
selectedItemIndex = _ref13.selectedItemIndex,
focusedItemIndex = _ref13.focusedItemIndex,
columnCount = _ref13.columnCount,
setColumnCount = _ref13.setColumnCount,
createAnalyticsEvent = _ref13.createAnalyticsEvent,
emptyStateHandler = _ref13.emptyStateHandler,
selectedCategory = _ref13.selectedCategory,
selectedCategoryIndex = _ref13.selectedCategoryIndex,
searchTerm = _ref13.searchTerm,
setFocusedCategoryIndex = _ref13.setFocusedCategoryIndex,
setFocusedItemIndex = _ref13.setFocusedItemIndex,
props = (0, _objectWithoutProperties2.default)(_ref13, _excluded2);
if ((0, _platformFeatureFlags.fg)('platform_editor_reduce_element_browser_padding')) {
return (0, _react2.jsx)(ElementListNew, (0, _extends2.default)({
items: items,
mode: mode,
selectedItemIndex: selectedItemIndex,
focusedItemIndex: focusedItemIndex,
columnCount: columnCount,
setColumnCount: setColumnCount,
createAnalyticsEvent: createAnalyticsEvent,
emptyStateHandler: emptyStateHandler,
selectedCategory: selectedCategory,
selectedCategoryIndex: selectedCategoryIndex,
searchTerm: searchTerm,
setFocusedCategoryIndex: setFocusedCategoryIndex,
setFocusedItemIndex: setFocusedItemIndex
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props));
}
return (0, _react2.jsx)(ElementListOld, (0, _extends2.default)({
items: items,
mode: mode,
selectedItemIndex: selectedItemIndex,
focusedItemIndex: focusedItemIndex,
columnCount: columnCount,
setColumnCount: setColumnCount,
createAnalyticsEvent: createAnalyticsEvent,
emptyStateHandler: emptyStateHandler,
selectedCategory: selectedCategory,
selectedCategoryIndex: selectedCategoryIndex,
searchTerm: searchTerm,
setFocusedCategoryIndex: setFocusedCategoryIndex,
setFocusedItemIndex: setFocusedItemIndex
// Ignored via go/ees005
// eslint-disable-next-line react/jsx-props-no-spreading
}, props));
}
var MemoizedElementListWithAnalytics = /*#__PURE__*/(0, _react.memo)((0, _withAnalyticsContext.default)({
component: 'ElementList'
})(ElementList));
var _default = exports.default = MemoizedElementListWithAnalytics;