@atlaskit/link-picker 0.11.0 → 1.1.1

package/dist/cjs/ui/link-picker.js

@@ -1,604 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _typeof = require("@babel/runtime/helpers/typeof");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.RECENT_SEARCH_LIST_SIZE = exports.LinkPickerWithIntl = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
-
-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 _react2 = require("@emotion/react");
-
-var _reactIntlNext = require("react-intl-next");
-
-var _messages = require("../messages");
-
-var _textInput = _interopRequireDefault(require("./text-input"));
-
-var _linkSearchList = _interopRequireDefault(require("./link-search-list"));
-
-var _url = require("../url");
-
-var _styled = require("./styled");
-
-var _browser = require("../browser");
-
-var _transformTimeStamp = require("../transformTimeStamp");
-
-var _announcer = _interopRequireDefault(require("./announcer"));
-
-var _button = _interopRequireWildcard(require("@atlaskit/button"));
-
-var _form = require("@atlaskit/form");
-
-var _search = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/search"));
-
-var _visuallyHidden = _interopRequireDefault(require("@atlaskit/visually-hidden"));
-
-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(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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 RECENT_SEARCH_LIST_SIZE = 5;
-exports.RECENT_SEARCH_LIST_SIZE = RECENT_SEARCH_LIST_SIZE;
-
-var LinkPicker = /*#__PURE__*/function (_PureComponent) {
-  (0, _inherits2.default)(LinkPicker, _PureComponent);
-
-  var _super = _createSuper(LinkPicker);
-
-  function LinkPicker(props) {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, LinkPicker);
-    _this = _super.call(this, props);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "wrapperRef", /*#__PURE__*/_react.default.createRef());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "queryVersion", 0);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateInput", /*#__PURE__*/function () {
-      var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(input) {
-        return _regenerator.default.wrap(function _callee$(_context) {
-          while (1) {
-            switch (_context.prev = _context.next) {
-              case 0:
-                if (!(input.length && (0, _url.isSafeUrl)(input))) {
-                  _context.next = 2;
-                  break;
-                }
-
-                return _context.abrupt("return", _this.setState({
-                  url: input,
-                  selectedIndex: -1,
-                  items: [],
-                  isLoading: false,
-                  invalidUrl: null
-                }));
-
-              case 2:
-                return _context.abrupt("return", _this.setState({
-                  url: input,
-                  // Unset selection on any input change
-                  selectedIndex: -1,
-                  invalidUrl: null
-                }, function () {
-                  _this.updateResults();
-                }));
-
-              case 3:
-              case "end":
-                return _context.stop();
-            }
-          }
-        }, _callee);
-      }));
-
-      return function (_x) {
-        return _ref.apply(this, arguments);
-      };
-    }());
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "createClearHandler", function (field) {
-      return function () {
-        switch (field) {
-          case 'url':
-            {
-              _this.updateInput('');
-
-              break;
-            }
-
-          case 'displayText':
-            {
-              _this.setState((0, _defineProperty2.default)({}, field, ''));
-            }
-        }
-      };
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getScreenReaderText", function () {
-      var intl = _this.props.intl;
-      var _this$state = _this.state,
-          items = _this$state.items,
-          selectedIndex = _this$state.selectedIndex;
-
-      if (items.length && selectedIndex > -1) {
-        var _items$selectedIndex = items[selectedIndex],
-            name = _items$selectedIndex.name,
-            container = _items$selectedIndex.container,
-            lastUpdatedDate = _items$selectedIndex.lastUpdatedDate,
-            lastViewedDate = _items$selectedIndex.lastViewedDate;
-        var date = (0, _transformTimeStamp.transformTimeStamp)(intl, lastViewedDate, lastUpdatedDate);
-        var formattedDate = [date === null || date === void 0 ? void 0 : date.pageAction, date === null || date === void 0 ? void 0 : date.dateString, date === null || date === void 0 ? void 0 : date.timeSince].filter(Boolean).join(' ');
-        return [name, container, formattedDate].filter(Boolean).join(', ');
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isUrlPopulatedWithSelectedItem", function () {
-      /**
-       * When we use ArrowKey to navigate through result items,
-       * the URL field will be populated with the content of
-       * selected item.
-       * This function will check if the URL field is populated
-       * with selected item.
-       * It can be useful to detect whether we want to insert a
-       * smartlink or a hyperlink with customized title
-       */
-      var _this$state2 = _this.state,
-          items = _this$state2.items,
-          selectedIndex = _this$state2.selectedIndex,
-          url = _this$state2.url;
-      var selectedItem = items[selectedIndex];
-
-      if (selectedItem && selectedItem.url === url) {
-        return true;
-      }
-
-      return false;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSelected", function (objectId) {
-      var items = _this.state.items;
-      var selectedItem = items.find(function (item) {
-        return item.objectId === objectId;
-      });
-
-      if (selectedItem) {
-        var url = selectedItem.url,
-            name = selectedItem.name;
-
-        _this.handleInsert(url, name, 'typeAhead');
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleInsert", function (url, title, inputType) {
-      var onSubmit = _this.props.onSubmit;
-      var _this$state3 = _this.state,
-          rawUrl = _this$state3.url,
-          displayText = _this$state3.displayText;
-
-      if (onSubmit) {
-        onSubmit(_objectSpread({
-          url: url,
-          displayText: displayText || null,
-          title: title || null,
-          meta: {
-            inputMethod: inputType
-          }
-        }, inputType === 'manual' ? {
-          rawUrl: rawUrl
-        } : {}));
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseEnterResultItem", function (objectId) {
-      var items = _this.state.items;
-      var index = findIndex(items, function (item) {
-        return item.objectId === objectId;
-      });
-
-      _this.setState({
-        activeIndex: index
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleMouseLeaveResultItem", function (objectId) {
-      var _this$state4 = _this.state,
-          items = _this$state4.items,
-          activeIndex = _this$state4.activeIndex;
-      var index = findIndex(items, function (item) {
-        return item.objectId === objectId;
-      }); // This is to avoid updating index that was set by other mouseenter event
-
-      if (activeIndex === index) {
-        _this.setState({
-          activeIndex: -1
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleSubmit", function () {
-      var _this$state5 = _this.state,
-          url = _this$state5.url,
-          selectedIndex = _this$state5.selectedIndex,
-          items = _this$state5.items;
-      var selectedItem = items[selectedIndex];
-
-      if (_this.isUrlPopulatedWithSelectedItem()) {
-        _this.handleInsert(selectedItem.url, selectedItem.name, 'typeAhead');
-      } else if (url.length > 0) {
-        var normalized = (0, _url.normalizeUrl)(url);
-
-        if (normalized) {
-          _this.handleInsert(normalized, null, 'manual');
-        } else {
-          var intl = _this.props.intl;
-          var linkInvalid = intl.formatMessage(_messages.messages.linkInvalid);
-
-          _this.setState({
-            invalidUrl: linkInvalid
-          });
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyDown", function (event) {
-      var _this$state6 = _this.state,
-          items = _this$state6.items,
-          activeIndex = _this$state6.activeIndex;
-      var keyCode = event.keyCode;
-      var KEY_CODE_ARROW_DOWN = 40;
-      var KEY_CODE_ARROW_UP = 38;
-
-      if (!items || !items.length) {
-        return;
-      }
-
-      var updatedIndex = activeIndex;
-
-      switch (keyCode) {
-        case KEY_CODE_ARROW_DOWN:
-          // down
-          event.preventDefault();
-          updatedIndex = (activeIndex + 1) % items.length;
-          break;
-
-        case KEY_CODE_ARROW_UP:
-          // up
-          event.preventDefault();
-          updatedIndex = activeIndex > 0 ? activeIndex - 1 : items.length - 1;
-          break;
-      }
-
-      if ([KEY_CODE_ARROW_DOWN, KEY_CODE_ARROW_UP].includes(keyCode) && items[updatedIndex]) {
-        _this.setState({
-          activeIndex: updatedIndex,
-          selectedIndex: updatedIndex,
-          url: items[updatedIndex].url,
-          invalidUrl: null
-        });
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleCancel", function () {
-      var onCancel = _this.props.onCancel;
-
-      if (onCancel) {
-        onCancel();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "updateTextInput", function (displayText) {
-      _this.setState({
-        displayText: displayText
-      });
-    });
-    _this.state = {
-      selectedIndex: -1,
-      activeIndex: -1,
-      isLoading: false,
-      url: (0, _url.normalizeUrl)(props.url) || '',
-      displayText: props.displayText || '',
-      items: [],
-      invalidUrl: null
-    };
-    /* Cache functions */
-
-    _this.handleClearUrl = _this.createClearHandler('url');
-    _this.handleClearDisplayText = _this.createClearHandler('displayText');
-    return _this;
-  }
-
-  (0, _createClass2.default)(LinkPicker, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      this.loadInitialLinkSearchResult();
-    }
-  }, {
-    key: "loadInitialLinkSearchResult",
-    value: function loadInitialLinkSearchResult() {
-      var url = this.state.url;
-
-      if (!url) {
-        this.updateResults();
-      }
-    }
-  }, {
-    key: "getActivePlugin",
-    value: function getActivePlugin() {
-      if (!this.props.plugins || this.props.plugins.length === 0) {
-        return null;
-      }
-
-      return this.props.plugins[0];
-    }
-    /**
-     * Interface between link picker and plugins to update results
-     */
-
-  }, {
-    key: "updateResults",
-    value: function () {
-      var _updateResults = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee2() {
-        var queryVersion, activePlugin, updates, done, value, _result$done, result;
-
-        return _regenerator.default.wrap(function _callee2$(_context2) {
-          while (1) {
-            switch (_context2.prev = _context2.next) {
-              case 0:
-                queryVersion = ++this.queryVersion;
-                activePlugin = this.getActivePlugin();
-
-                if (activePlugin) {
-                  _context2.next = 4;
-                  break;
-                }
-
-                return _context2.abrupt("return");
-
-              case 4:
-                updates = activePlugin.resolve({
-                  query: this.state.url
-                });
-                this.setState({
-                  isLoading: true,
-                  items: []
-                });
-                _context2.prev = 6;
-
-              case 7:
-                if (!(queryVersion === this.queryVersion)) {
-                  _context2.next = 29;
-                  break;
-                }
-
-                done = false;
-                value = void 0;
-
-                if (!(updates instanceof Promise)) {
-                  _context2.next = 17;
-                  break;
-                }
-
-                done = true;
-                _context2.next = 14;
-                return updates;
-
-              case 14:
-                value = _context2.sent;
-                _context2.next = 22;
-                break;
-
-              case 17:
-                _context2.next = 19;
-                return updates.next();
-
-              case 19:
-                result = _context2.sent;
-                done = (_result$done = result.done) !== null && _result$done !== void 0 ? _result$done : false;
-                value = result.value;
-
-              case 22:
-                if (!(queryVersion !== this.queryVersion)) {
-                  _context2.next = 24;
-                  break;
-                }
-
-                return _context2.abrupt("return");
-
-              case 24:
-                this.setState({
-                  items: limit(value.data),
-                  isLoading: !done
-                });
-
-                if (!done) {
-                  _context2.next = 27;
-                  break;
-                }
-
-                return _context2.abrupt("return");
-
-              case 27:
-                _context2.next = 7;
-                break;
-
-              case 29:
-                _context2.next = 34;
-                break;
-
-              case 31:
-                _context2.prev = 31;
-                _context2.t0 = _context2["catch"](6);
-                this.setState({
-                  isLoading: false
-                });
-
-              case 34:
-              case "end":
-                return _context2.stop();
-            }
-          }
-        }, _callee2, this, [[6, 31]]);
-      }));
-
-      function updateResults() {
-        return _updateResults.apply(this, arguments);
-      }
-
-      return updateResults;
-    }()
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$state7 = this.state,
-          items = _this$state7.items,
-          isLoading = _this$state7.isLoading,
-          activeIndex = _this$state7.activeIndex,
-          selectedIndex = _this$state7.selectedIndex,
-          url = _this$state7.url,
-          displayText = _this$state7.displayText;
-      var formatMessage = this.props.intl.formatMessage;
-      var activePlugin = this.getActivePlugin();
-      var linkPlaceHolder = formatMessage(activePlugin ? _messages.messages.placeholder : _messages.messages.linkPlaceholder);
-      var linkLabel = formatMessage(_messages.messages.linkLabel);
-      var linkTextLabel = formatMessage(_messages.messages.linkTextLabel);
-      var linkTextPlaceHolder = formatMessage(_messages.messages.linkTextPlaceholder);
-      var screenReaderDescriptionId = 'search-recent-links-field-description';
-      var linkSearchListId = 'link-picker-search-list';
-      var ariaActiveDescendant = selectedIndex > -1 ? "link-search-list-item-".concat(selectedIndex) : ''; // Added workaround with a screen reader Announcer specifically for VoiceOver + Safari
-      // as the Aria design pattern for combobox does not work in this case
-      // for details: https://a11y-internal.atlassian.net/browse/AK-740
-
-      var screenReaderText = _browser.browser.safari && this.getScreenReaderText();
-      var searchIcon = activePlugin && (0, _react2.jsx)("span", {
-        css: _styled.searchIconStyles,
-        "data-testid": "link-picker-search-icon"
-      }, (0, _react2.jsx)(_search.default, {
-        size: "medium",
-        label: ''
-      }));
-      return (0, _react2.jsx)("div", {
-        "data-testid": "link-picker",
-        className: "recent-list",
-        css: _styled.recentListStyles
-      }, (0, _react2.jsx)("div", {
-        css: _styled.containerStyles,
-        ref: this.wrapperRef
-      }, screenReaderText && (0, _react2.jsx)(_announcer.default, {
-        ariaLive: "assertive",
-        text: screenReaderText,
-        ariaRelevant: "additions",
-        delay: 250
-      }), (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
-        "aria-hidden": "true",
-        id: screenReaderDescriptionId
-      }, formatMessage(_messages.messages.searchLinkAriaDescription))), (0, _react2.jsx)(_textInput.default, {
-        name: "link",
-        testId: "link-url",
-        role: "combobox",
-        label: linkLabel,
-        placeholder: linkPlaceHolder,
-        value: url,
-        autoFocus: true,
-        autoComplete: "off",
-        elemBeforeInput: searchIcon,
-        onSubmit: this.handleSubmit,
-        onChange: this.updateInput,
-        onKeyDown: this.handleKeyDown,
-        onClear: this.handleClearUrl,
-        error: this.state.invalidUrl,
-        clearLabel: formatMessage(_messages.messages.clearLink),
-        "aria-controls": linkSearchListId,
-        "aria-autocomplete": "list",
-        "aria-activedescendant": ariaActiveDescendant,
-        "aria-describedby": screenReaderDescriptionId,
-        "aria-expanded": true
-      }), (0, _react2.jsx)(_textInput.default, {
-        name: "link-text",
-        testId: "link-text",
-        autoComplete: "off",
-        label: linkTextLabel,
-        placeholder: linkTextPlaceHolder,
-        "aria-label": formatMessage(_messages.messages.linkAriaLabel),
-        value: displayText,
-        onSubmit: this.handleSubmit,
-        onKeyDown: this.handleKeyDown,
-        onChange: this.updateTextInput,
-        onClear: this.handleClearDisplayText,
-        clearLabel: formatMessage(_messages.messages.clearText)
-      }), !!items.length && (0, _react2.jsx)("div", {
-        css: _styled.listTitleStyles,
-        id: "link-picker-list-title",
-        "data-testid": "link-picker-list-title"
-      }, formatMessage(this.state.url ? _messages.messages.titleResults : _messages.messages.titleRecentlyViewed)), (0, _react2.jsx)(_visuallyHidden.default, null, (0, _react2.jsx)("span", {
-        "aria-live": "polite",
-        "aria-atomic": "true",
-        id: "fabric.smartcard.linkpicker.suggested.results"
-      }, url && formatMessage(_messages.messages.searchLinkResults, {
-        count: items.length
-      }))), (0, _react2.jsx)(_linkSearchList.default, {
-        ariaLabelledBy: "link-picker-list-title",
-        ariaControls: "fabric.smartcard.linkpicker.suggested.results",
-        id: linkSearchListId,
-        role: "listbox",
-        items: items,
-        isLoading: isLoading,
-        selectedIndex: selectedIndex,
-        activeIndex: activeIndex,
-        onSelect: this.handleSelected,
-        onMouseEnter: this.handleMouseEnterResultItem,
-        onMouseLeave: this.handleMouseLeaveResultItem
-      }), (0, _react2.jsx)(_form.FormFooter, {
-        align: "end"
-      }, (0, _react2.jsx)(_button.ButtonGroup, null, (0, _react2.jsx)(_button.default, {
-        appearance: "default",
-        onClick: this.handleCancel,
-        testId: "link-picker-cancel-button"
-      }, formatMessage(_messages.messages.cancelButton)), (0, _react2.jsx)(_button.default, {
-        type: "submit",
-        appearance: "primary",
-        onClick: this.handleSubmit,
-        testId: "link-picker-insert-button"
-      }, formatMessage(_messages.messages.insertButton))))));
-    }
-  }]);
-  return LinkPicker;
-}(_react.PureComponent);
-
-function findIndex(array, predicate) {
-  var index = -1;
-  array.some(function (item, i) {
-    if (predicate(item)) {
-      index = i;
-      return true;
-    }
-
-    return false;
-  });
-  return index;
-}
-
-function limit(items) {
-  return items.slice(0, RECENT_SEARCH_LIST_SIZE);
-}
-
-var LinkPickerWithIntl = (0, _reactIntlNext.injectIntl)(LinkPicker);
-exports.LinkPickerWithIntl = LinkPickerWithIntl;