@atlaskit/editor-core 178.1.1 → 178.1.2

package/dist/cjs/plugins/type-ahead/ui/TypeAheadList.js

@@ -1,77 +1,54 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.TypeAheadList = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _menu = require("@atlaskit/menu");
-
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
-
 var _CellMeasurer = require("react-virtualized/dist/commonjs/CellMeasurer");
-
 var _List = require("react-virtualized/dist/commonjs/List");
-
 var _TypeAheadListItem = require("./TypeAheadListItem");
-
 var _reactIntlNext = require("react-intl-next");
-
 var _messages = require("../messages");
-
 var _utils = require("../utils");
-
 var _updateSelectedIndex = require("../commands/update-selected-index");
-
 var _AssistiveText = require("./AssistiveText");
-
 var _constants = require("../constants");
-
 var _templateObject;
-
 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 LIST_ITEM_ESTIMATED_HEIGHT = _TypeAheadListItem.ICON_HEIGHT + _TypeAheadListItem.ITEM_PADDING * 2;
 var LIST_WIDTH = 320;
-
 var TypeaheadAssistiveTextPureComponent = /*#__PURE__*/_react.default.memo(function (_ref) {
   var numberOfResults = _ref.numberOfResults;
   var intl = (0, _reactIntlNext.useIntl)();
   return (0, _react2.jsx)(_AssistiveText.AssistiveText, {
     assistiveText: intl.formatMessage(_messages.typeAheadListMessages.searchResultsLabel, {
       itemsLength: numberOfResults
-    }) // when the popup is open its always in focus
+    })
+    // when the popup is open its always in focus
     ,
     isInFocus: true,
     id: _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID + '__popup'
   });
 });
-
 var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var _decorationElement$qu2;
-
   var items = _ref2.items,
-      selectedIndex = _ref2.selectedIndex,
-      editorView = _ref2.editorView,
-      onItemClick = _ref2.onItemClick,
-      intl = _ref2.intl,
-      fitHeight = _ref2.fitHeight,
-      decorationElement = _ref2.decorationElement,
-      triggerHandler = _ref2.triggerHandler;
+    selectedIndex = _ref2.selectedIndex,
+    editorView = _ref2.editorView,
+    onItemClick = _ref2.onItemClick,
+    intl = _ref2.intl,
+    fitHeight = _ref2.fitHeight,
+    decorationElement = _ref2.decorationElement,
+    triggerHandler = _ref2.triggerHandler;
   var listRef = (0, _react.useRef)();
   var listContainerRef = (0, _react.useRef)(null);
   var lastVisibleIndexes = (0, _react.useRef)({
@@ -81,20 +58,17 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     stopIndex: 0
   });
   var estimatedHeight = items.length * LIST_ITEM_ESTIMATED_HEIGHT;
-
   var _useState = (0, _react.useState)(Math.min(estimatedHeight, fitHeight)),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      height = _useState2[0],
-      setHeight = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    height = _useState2[0],
+    setHeight = _useState2[1];
   var _useState3 = (0, _react.useState)(new _CellMeasurer.CellMeasurerCache({
-    fixedWidth: true,
-    defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
-  })),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      cache = _useState4[0],
-      setCache = _useState4[1];
-
+      fixedWidth: true,
+      defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
+    })),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    cache = _useState4[0],
+    setCache = _useState4[1];
   var onItemsRendered = (0, _react.useCallback)(function (props) {
     lastVisibleIndexes.current = props;
   }, []);
@@ -103,14 +77,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       onItemClick: onItemClick
     };
   }, [onItemClick]);
-
   var isNavigationKey = function isNavigationKey(event) {
     return ['ArrowDown', 'ArrowUp', 'Tab', 'Enter'].includes(event.key);
   };
-
   var focusTargetElement = (0, _react.useCallback)(function () {
     var _decorationElement$qu;
-
     //To reset the selected index
     (0, _updateSelectedIndex.updateSelectedIndex)(-1)(editorView.state, editorView.dispatch);
     listRef.current.scrollToRow(0);
@@ -132,10 +103,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
   var lastVisibleStopIndex = lastVisibleIndexes.current.stopIndex;
   var onScroll = (0, _react.useCallback)(function (_ref3) {
     var scrollUpdateWasRequested = _ref3.scrollUpdateWasRequested;
-
     if (!scrollUpdateWasRequested) {
       return;
-    } // In case the user scroll to a non-visible item like press ArrowUp from the first index
+    }
+
+    // In case the user scroll to a non-visible item like press ArrowUp from the first index
     // We will force the scroll calling the scrollToItem in the useEffect hook
     // When the scroll happens and we render the elements,
     // we still need calculate the items height and re-draw the List.
@@ -145,12 +117,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     //
     // We can't do this check in the first frame because that frame is being used by the resetScreenThrottled
     // to calculate each height. THen, we can schedule a new frame when this one finishs.
-
-
     requestAnimationFrame(function () {
       requestAnimationFrame(function () {
-        var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
+        var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
 
+        //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
         if (!isSelectedItemVisible && selectedIndex !== -1) {
           listRef.current.scrollToRow(selectedIndex);
         } else if (selectedIndex === -1) {
@@ -163,9 +134,9 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     if (!listRef.current) {
       return;
     }
+    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex;
 
-    var isSelectedItemVisible = selectedIndex >= lastVisibleStartIndex && selectedIndex <= lastVisibleStopIndex; //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
-
+    //Should scroll to the list item only when the selectedIndex >= 0 and item is not visible
     if (!isSelectedItemVisible && selectedIndex !== -1) {
       listRef.current.scrollToRow(selectedIndex);
     } else if (selectedIndex === -1) {
@@ -176,12 +147,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     setCache(new _CellMeasurer.CellMeasurerCache({
       fixedWidth: true,
       defaultHeight: LIST_ITEM_ESTIMATED_HEIGHT
-    })); // When query is updated, sometimes the scroll position of the menu is not at the top
+    }));
+    // When query is updated, sometimes the scroll position of the menu is not at the top
     // Scrolling back to top for consistency
-
     requestAnimationFrame(function () {
       var _listContainerRef$cur;
-
       if ((_listContainerRef$cur = listContainerRef.current) !== null && _listContainerRef$cur !== void 0 && _listContainerRef$cur.firstChild) {
         listContainerRef.current.firstChild.scrollTo(0, 0);
       }
@@ -199,13 +169,11 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     if (!listContainerRef.current) {
       return;
     }
-
     var element = listContainerRef.current;
     /**
      * To handle the key events on the list
      * @param event
      */
-
     var handleKeyDown = function handleKeyDown(event) {
       if (isNavigationKey(event)) {
         switch (event.key) {
@@ -213,27 +181,22 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
             selectNextItem();
             event.preventDefault();
             break;
-
           case 'ArrowUp':
             selectPreviousItem();
             event.preventDefault();
             break;
-
           case 'Tab':
             //Tab key quick inserts the selected item.
             onItemClick(_typeAhead.SelectItemMode.TAB, selectedIndex);
             event.preventDefault();
             break;
-
           case 'Enter':
             //Enter key quick inserts the selected item.
             if (!event.isComposing || event.which !== 229 && event.keyCode !== 229) {
               onItemClick(event.shiftKey ? _typeAhead.SelectItemMode.SHIFT_ENTER : _typeAhead.SelectItemMode.ENTER, selectedIndex);
               event.preventDefault();
             }
-
             break;
-
           default:
             event.preventDefault();
         }
@@ -242,18 +205,16 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
         focusTargetElement();
       }
     };
-
     element === null || element === void 0 ? void 0 : element.addEventListener('keydown', handleKeyDown);
     return function () {
       element === null || element === void 0 ? void 0 : element.removeEventListener('keydown', handleKeyDown);
     };
   }, [editorView.state, focusTargetElement, selectNextItem, selectPreviousItem, selectedIndex, onItemClick, items.length]);
-
   var renderRow = function renderRow(_ref4) {
     var index = _ref4.index,
-        key = _ref4.key,
-        style = _ref4.style,
-        parent = _ref4.parent;
+      key = _ref4.key,
+      style = _ref4.style,
+      parent = _ref4.parent;
     var currentItem = items[index];
     return (0, _react2.jsx)(_CellMeasurer.CellMeasurer, {
       key: key,
@@ -276,13 +237,10 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
       ariaLabel: (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl, currentItem).listItemAriaLabel
     }))));
   };
-
   var popupAriaLabel = (0, _utils.getTypeAheadListAriaLabels)(triggerHandler === null || triggerHandler === void 0 ? void 0 : triggerHandler.trigger, intl).popupAriaLabel;
-
   if (!Array.isArray(items)) {
     return null;
   }
-
   var menuGroupId = ((_decorationElement$qu2 = decorationElement.querySelector("[role='combobox']")) === null || _decorationElement$qu2 === void 0 ? void 0 : _decorationElement$qu2.getAttribute('aria-controls')) || _constants.TYPE_AHEAD_DECORATION_ELEMENT_ID;
   return (0, _react2.jsx)(_menu.MenuGroup, {
     "aria-label": popupAriaLabel,
@@ -307,7 +265,6 @@ var TypeAheadListComponent = /*#__PURE__*/_react.default.memo(function (_ref2) {
     numberOfResults: items.length.toString()
   })));
 });
-
 var TypeAheadList = (0, _reactIntlNext.injectIntl)(TypeAheadListComponent);
 exports.TypeAheadList = TypeAheadList;
 TypeAheadList.displayName = 'TypeAheadList';

package/dist/cjs/plugins/type-ahead/ui/TypeAheadListItem.js

@@ -1,46 +1,27 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.itemIcon = exports.TypeAheadListItem = exports.ITEM_PADDING = exports.ICON_WIDTH = exports.ICON_HEIGHT = void 0;
-
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
 var _react = _interopRequireWildcard(require("react"));
-
 var _react2 = require("@emotion/react");
-
 var _colors = require("@atlaskit/theme/colors");
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("@atlaskit/theme/constants");
-
 var _menu = require("@atlaskit/menu");
-
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-
 var _fallback = _interopRequireDefault(require("../../quick-insert/assets/fallback"));
-
 var _styles = require("../../../ui/styles");
-
 var _typeAhead = require("@atlaskit/editor-common/type-ahead");
-
 var _reactIntlNext = require("react-intl-next");
-
 var _messages = require("../messages");
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
-
 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;
@@ -50,22 +31,20 @@ exports.ITEM_PADDING = ITEM_PADDING;
 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;
 var itemBody = (0, _react2.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  flex-direction: row;\n  flex-wrap: nowrap;\n  justify-content: space-between;\n"])));
-
 var itemText = function itemText(theme) {
   return (0, _react2.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  white-space: initial;\n  color: ", ";\n  .item-title {\n    line-height: 1.4;\n  }\n  .item-description {\n    font-size: ", ";\n    color: ", ";\n    margin-top: 3px;\n  }\n"])), (0, _components.themed)({
     light: "var(--ds-text, ".concat(_colors.N800, ")"),
     dark: "var(--ds-text, ".concat(_colors.DN600, ")")
   })(theme), (0, _editorSharedStyles.relativeFontSizeToBase16)(12), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"));
 };
-
 var itemAfter = (0, _react2.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  flex: 0 0 auto;\n"])));
 var customRenderItemDivStyle = (0, _react2.css)(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2.default)(["\n  overflow: hidden;\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    box-shadow: inset 0px 0px 0px 2px ", ";\n    outline: none;\n  }\n"])), "var(--ds-background-selected, ".concat(_colors.N30, ")"), "var(--ds-border-focused, ".concat(_colors.B100, ")"));
+
 /**
  * This CSS emulates the desired behaviour with :focus-visible for firefox.
  * Firefox unfortunately does not register keyboard focus if user mouseDown and drag a typeahead item
  * resulting in focus-visible style not drawn.
  */
-
 var selectionFrame = {
   '& > button:focus': {
     boxShadow: "inset 0px 0px 0px 2px ".concat("var(--ds-border-focused, ".concat(_colors.B100, ")")),
@@ -76,18 +55,15 @@ var selectionFrame = {
   }
 };
 var selectedStyle = (0, _react2.css)(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2.default)(["\n  background-color: ", ";\n"])), "var(--ds-background-selected, ".concat(_colors.N30, ")"));
-
 var FallbackIcon = /*#__PURE__*/_react.default.memo(function (_ref) {
   var label = _ref.label;
   return (0, _react2.jsx)(_fallback.default, null);
 });
-
 var noop = function noop() {};
-
 var AssistiveText = function AssistiveText(_ref2) {
   var title = _ref2.title,
-      description = _ref2.description,
-      shortcut = _ref2.shortcut;
+    description = _ref2.description,
+    shortcut = _ref2.shortcut;
   var intl = (0, _reactIntlNext.useIntl)();
   var descriptionText = description ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.descriptionLabel), " ").concat(description, ".") : '';
   var shortcutText = shortcut ? " ".concat(intl.formatMessage(_messages.typeAheadListMessages.shortcutLabel), " ").concat(shortcut, ".") : '';
@@ -95,23 +71,21 @@ var AssistiveText = function AssistiveText(_ref2) {
     className: "assistive"
   }, "".concat(title, ". ").concat(descriptionText, " ").concat(shortcutText));
 };
-
 var TypeAheadListItem = function TypeAheadListItem(_ref3) {
   var item = _ref3.item,
-      itemsLength = _ref3.itemsLength,
-      selectedIndex = _ref3.selectedIndex,
-      onItemClick = _ref3.onItemClick,
-      itemIndex = _ref3.itemIndex,
-      ariaLabel = _ref3.ariaLabel;
-
+    itemsLength = _ref3.itemsLength,
+    selectedIndex = _ref3.selectedIndex,
+    onItemClick = _ref3.onItemClick,
+    itemIndex = _ref3.itemIndex,
+    ariaLabel = _ref3.ariaLabel;
   /**
    * To select and highlight the first Item when no item is selected
    * However selectedIndex remains -1, So that user does not skip the first item when down arrow key is used from typeahead query(inputQuery.tsx)
    */
   var isSelected = itemIndex === selectedIndex || selectedIndex === -1 && itemIndex === 0;
   var icon = item.icon,
-      title = item.title,
-      customRenderItem = item.render;
+    title = item.title,
+    customRenderItem = item.render;
   var elementIcon = (0, _react.useMemo)(function () {
     return (0, _react2.jsx)("div", {
       css: itemIcon
@@ -122,23 +96,18 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
   var insertSelectedItem = (0, _react.useCallback)(function () {
     onItemClick(_typeAhead.SelectItemMode.SELECTED, itemIndex);
   }, [onItemClick, itemIndex]);
-
   var customItemRef = /*#__PURE__*/_react.default.createRef();
-
   var buttonItemRef = /*#__PURE__*/_react.default.createRef();
-
   var shouldUpdateFocus = selectedIndex === itemIndex;
   (0, _react.useLayoutEffect)(function () {
     if (shouldUpdateFocus) {
       var _customItemRef$curren;
-
       customItemRef === null || customItemRef === void 0 ? void 0 : (_customItemRef$curren = customItemRef.current) === null || _customItemRef$curren === void 0 ? void 0 : _customItemRef$curren.focus();
     }
   }, [customItemRef, shouldUpdateFocus]);
   (0, _react.useLayoutEffect)(function () {
     if (shouldUpdateFocus) {
       var _buttonItemRef$curren;
-
       buttonItemRef === null || buttonItemRef === void 0 ? void 0 : (_buttonItemRef$curren = buttonItemRef.current) === null || _buttonItemRef$curren === void 0 ? void 0 : _buttonItemRef$curren.focus();
     }
   }, [buttonItemRef, shouldUpdateFocus]);
@@ -146,7 +115,6 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
     if (!customRenderItem) {
       return null;
     }
-
     var Comp = customRenderItem;
     var listItemClasses = [customRenderItemDivStyle, isSelected && selectedStyle];
     return (0, _react2.jsx)("div", {
@@ -156,7 +124,8 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
       "aria-setsize": itemsLength,
       tabIndex: 0,
       css: listItemClasses,
-      className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '') //CSS classes added for test cases purpose
+      className: "ak-typeahead-item ".concat(isSelected ? 'typeahead-selected-item' : '')
+      //CSS classes added for test cases purpose
       ,
       ref: customItemRef
     }, (0, _react2.jsx)("div", {
@@ -168,11 +137,9 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
       onHover: noop
     })));
   }, [customRenderItem, isSelected, ariaLabel, itemsLength, customItemRef, insertSelectedItem]);
-
   if (customItem) {
     return customItem;
   }
-
   return (0, _react2.jsx)("span", {
     css: selectionFrame
   }, (0, _react2.jsx)(_menu.ButtonItem, {
@@ -204,5 +171,4 @@ var TypeAheadListItem = function TypeAheadListItem(_ref3) {
     shortcut: item.keyshortcut
   })));
 };
-
 exports.TypeAheadListItem = TypeAheadListItem;