@atlaskit/dropdown-menu 10.1.6 → 11.0.0

package/dist/cjs/components/DropdownMenuStateless.js

@@ -1,519 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.DropdownMenuStatelessWithoutAnalytics = exports.DropdownMenuStateless = void 0;
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-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 _reactDom = require("react-dom");
-
-var _analyticsNext = require("@atlaskit/analytics-next");
-
-var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-
-var _droplist = _interopRequireWildcard(require("@atlaskit/droplist"));
-
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-
-var _WidthConstrainer = _interopRequireDefault(require("../styled/WidthConstrainer"));
-
-var _keys = require("../util/keys");
-
-var _DropdownItemClickManager = _interopRequireDefault(require("./context/DropdownItemClickManager"));
-
-var _DropdownItemFocusManager = _interopRequireDefault(require("./context/DropdownItemFocusManager"));
-
-var _DropdownItemSelectionCache = _interopRequireDefault(require("./context/DropdownItemSelectionCache"));
-
-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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var packageName = "@atlaskit/dropdown-menu";
-var packageVersion = "10.1.6";
-
-var DropdownMenuStateless = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(DropdownMenuStateless, _Component);
-
-  var _super = _createSuper(DropdownMenuStateless);
-
-  function DropdownMenuStateless() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, DropdownMenuStateless);
-
-    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), "dropdownListPositioned", false);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "state", {
-      autoFocusDropdownItems: false
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidMount", function () {
-      if (_this.isUsingDeprecatedAPI()) {
-        if (process.env.NODE_ENV !== 'test' && process.env.NODE_ENV !== 'production' && !process.env.CI) {
-          // eslint-disable-next-line no-console
-          console.log('DropdownMenu.items is deprecated. Please switch to the declarative API.');
-        }
-
-        if (_this.domItemsList) {
-          _this.focusFirstItem();
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "componentDidUpdate", function (prevProp) {
-      if (_this.isUsingDeprecatedAPI() && _this.props.isOpen && !prevProp.isOpen) {
-        _this.focusFirstItem();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getNextFocusable", function (indexItem, available) {
-      if (!_this.domItemsList) {
-        return null;
-      }
-
-      var currentItem = typeof indexItem !== 'number' ? -1 : indexItem;
-      var latestAvailable = typeof available !== 'number' ? currentItem : available;
-
-      if (currentItem < _this.domItemsList.length - 1) {
-        currentItem++;
-
-        if (_this.domItemsList[currentItem].getAttribute('aria-hidden') !== 'true') {
-          return currentItem;
-        }
-
-        return _this.getNextFocusable(currentItem, latestAvailable);
-      }
-
-      return latestAvailable;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "getPrevFocusable", function (indexItem, available) {
-      if (!_this.domItemsList) {
-        return null;
-      }
-
-      var currentItem = typeof indexItem !== 'number' ? -1 : indexItem;
-      var latestAvailable = typeof available !== 'number' ? currentItem : available;
-
-      if (currentItem && currentItem > 0) {
-        currentItem--;
-
-        if (_this.domItemsList[currentItem].getAttribute('aria-hidden') !== 'true') {
-          return currentItem;
-        }
-
-        return _this.getPrevFocusable(currentItem, latestAvailable);
-      }
-
-      return latestAvailable || currentItem;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusFirstItem", function () {
-      if (_this.sourceOfIsOpen === 'keydown') {
-        _this.focusItem(_this.getNextFocusable());
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusNextItem", function () {
-      _this.focusItem(_this.getNextFocusable(_this.focusedItem));
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusPreviousItem", function () {
-      _this.focusItem(_this.getPrevFocusable(_this.focusedItem));
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "focusItem", function (index) {
-      if (!_this.domItemsList || !index) {
-        return;
-      }
-
-      _this.focusedItem = index;
-
-      _this.domItemsList[_this.focusedItem].focus();
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isTargetChildItem", function (target) {
-      if (!target) {
-        return false;
-      }
-
-      var isDroplistItem = target.getAttribute('data-role') === 'droplistItem'; // eslint-disable-next-line react/no-find-dom-node
-
-      var thisDom = (0, _reactDom.findDOMNode)((0, _assertThisInitialized2.default)(_this));
-      return isDroplistItem && thisDom ? thisDom.contains(target) : false;
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyboardInteractionForClosed", function (event) {
-      if (_this.props.isOpen) {
-        return;
-      }
-
-      switch (event.key) {
-        case _keys.KEY_DOWN:
-        case _keys.KEY_SPACE:
-        case _keys.KEY_ENTER:
-          event.preventDefault();
-
-          _this.open({
-            event: event,
-            source: 'keydown'
-          });
-
-          break;
-
-        default:
-          break;
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleKeyboardInteractionsDeprecated", function (event) {
-      if (_this.props.isOpen) {
-        if (_this.isTargetChildItem(event.target)) {
-          switch (event.key) {
-            case 'ArrowUp':
-              event.preventDefault();
-
-              _this.focusPreviousItem();
-
-              break;
-
-            case 'ArrowDown':
-              event.preventDefault();
-
-              _this.focusNextItem();
-
-              break;
-
-            case 'Tab':
-              event.preventDefault();
-
-              _this.close({
-                event: event
-              });
-
-              break;
-
-            default:
-              break;
-          }
-        } else if (event.key === 'ArrowDown') {
-          _this.sourceOfIsOpen = 'keydown';
-
-          _this.focusFirstItem();
-        } else if (event.key === 'Tab') {
-          _this.close({
-            event: event
-          });
-        }
-      } else {
-        switch (event.key) {
-          case _keys.KEY_DOWN:
-          case _keys.KEY_SPACE:
-          case _keys.KEY_ENTER:
-            event.preventDefault();
-
-            _this.open({
-              event: event,
-              source: 'keydown'
-            });
-
-            break;
-
-          default:
-            break;
-        }
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "domMenuContainer", null);
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "isUsingDeprecatedAPI", function () {
-      return Boolean(_this.props.items.length);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "handleOpenChange", function (args) {
-      _this.props.onOpenChange(args);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "triggerContent", function () {
-      var _this$props = _this.props,
-          children = _this$props.children,
-          trigger = _this$props.trigger,
-          isOpen = _this$props.isOpen,
-          triggerButtonProps = _this$props.triggerButtonProps,
-          triggerType = _this$props.triggerType,
-          testId = _this$props.testId;
-      var insideTriggerContent = _this.isUsingDeprecatedAPI() ? children : trigger;
-
-      if (triggerType !== 'button') {
-        return insideTriggerContent;
-      } // we probably don't need to object copying
-      // ts doesn't like destructuring copy - so converting to object.assign
-
-
-      var triggerProps = Object.assign({}, triggerButtonProps);
-      var defaultButtonProps = {
-        'aria-expanded': isOpen,
-        'aria-haspopup': true,
-        isSelected: isOpen
-      };
-
-      if (!triggerProps.iconAfter && !triggerProps.iconBefore) {
-        triggerProps.iconAfter = /*#__PURE__*/_react.default.createElement(_chevronDown.default, {
-          size: "medium",
-          label: ""
-        });
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({}, defaultButtonProps, triggerProps, {
-        testId: testId && "".concat(testId, "--trigger")
-      }), insideTriggerContent);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "open", function (attrs) {
-      _this.sourceOfIsOpen = attrs.source;
-
-      _this.props.onOpenChange({
-        isOpen: true,
-        event: attrs.event
-      }); // Dropdown opened via keyboard gets auto focussed
-
-
-      _this.setState({
-        autoFocusDropdownItems: _this.sourceOfIsOpen === 'keydown'
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "close", function (attrs) {
-      _this.sourceOfIsOpen = null;
-
-      _this.props.onOpenChange({
-        isOpen: false,
-        event: attrs.event
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "toggle", function (attrs) {
-      if (attrs.source === 'keydown') {
-        return;
-      }
-
-      if (_this.props.isOpen) {
-        _this.close(attrs);
-      } else {
-        _this.open(attrs);
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderTrigger", function () {
-      var triggerContent = _this.triggerContent();
-
-      return _this.isUsingDeprecatedAPI() ? triggerContent : /*#__PURE__*/_react.default.createElement("div", {
-        ref: function ref(_ref) {
-          _this.triggerContainer = _ref;
-        }
-      }, triggerContent);
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderItems", function (items) {
-      return items.map(function (item, itemIndex) {
-        return /*#__PURE__*/_react.default.createElement(_droplist.Item, (0, _extends2.default)({}, item, {
-          key: itemIndex,
-          onActivate: function onActivate(_ref2) {
-            var event = _ref2.event;
-
-            _this.props.onItemActivated({
-              item: item,
-              event: event
-            });
-          }
-        }), item.content);
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderGroups", function (groups) {
-      return groups.map(function (group, groupIndex) {
-        return /*#__PURE__*/_react.default.createElement(_droplist.Group, {
-          heading: group.heading,
-          elemAfter: group.elemAfter,
-          key: groupIndex
-        }, _this.renderItems(group.items));
-      });
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDeprecated", function () {
-      var _this$props2 = _this.props,
-          items = _this$props2.items,
-          shouldFitContainer = _this$props2.shouldFitContainer;
-      return /*#__PURE__*/_react.default.createElement("div", {
-        ref: function ref(_ref3) {
-          _this.domMenuContainer = _ref3;
-          _this.domItemsList = _ref3 ? _ref3.querySelectorAll('[data-role="droplistItem"]') : null;
-        },
-        role: "menu",
-        style: shouldFitContainer ? undefined : {
-          maxWidth: 300
-        }
-      }, _this.renderGroups(items));
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "onDroplistPositioned", function () {
-      _this.dropdownListPositioned = true; // Trigger render so item focus manager can auto focus for keyboard trigger
-
-      _this.setState({
-        autoFocusDropdownItems: _this.sourceOfIsOpen === 'keydown'
-      });
-
-      if (_this.props.onPositioned) {
-        _this.props.onPositioned();
-      }
-    });
-    (0, _defineProperty2.default)((0, _assertThisInitialized2.default)(_this), "renderDropdownItems", function () {
-      if (_this.sourceOfIsOpen === 'keydown' && _this.dropdownListPositioned) {
-        return /*#__PURE__*/_react.default.createElement(_DropdownItemFocusManager.default, {
-          autoFocus: _this.state.autoFocusDropdownItems,
-          close: _this.close
-        }, _this.props.children);
-      }
-
-      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, _this.props.children);
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(DropdownMenuStateless, [{
-    key: "handleClickDeprecated",
-    value: function handleClickDeprecated(event) {
-      var menuContainer = this.domMenuContainer;
-
-      if (!menuContainer || menuContainer && !menuContainer.contains(event.target)) {
-        this.toggle({
-          source: 'click',
-          event: event
-        });
-      }
-    }
-  }, {
-    key: "handleClick",
-    value: function handleClick(event) {
-      // For any clicks we don't want autofocus
-      this.setState({
-        autoFocusDropdownItems: false
-      });
-
-      if (this.isUsingDeprecatedAPI()) {
-        this.handleClickDeprecated(event);
-        return;
-      }
-
-      if (this.triggerContainer && this.triggerContainer.contains(event.target) && event.target.disabled !== true) {
-        var isOpen = this.props.isOpen;
-        this.sourceOfIsOpen = 'mouse';
-        this.props.onOpenChange({
-          isOpen: !isOpen,
-          event: event
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this2 = this;
-
-      var _this$props3 = this.props,
-          appearance = _this$props3.appearance,
-          boundariesElement = _this$props3.boundariesElement,
-          isLoading = _this$props3.isLoading,
-          isOpen = _this$props3.isOpen,
-          onOpenChange = _this$props3.onOpenChange,
-          position = _this$props3.position,
-          isMenuFixed = _this$props3.isMenuFixed,
-          shouldAllowMultilineItems = _this$props3.shouldAllowMultilineItems,
-          shouldFitContainer = _this$props3.shouldFitContainer,
-          shouldFlip = _this$props3.shouldFlip,
-          testId = _this$props3.testId;
-      var isDeprecated = this.isUsingDeprecatedAPI();
-      var deprecatedProps = isDeprecated ? {
-        onKeyDown: this.handleKeyboardInteractionsDeprecated,
-        shouldAllowMultilineItems: shouldAllowMultilineItems
-      } : {
-        onKeyDown: this.handleKeyboardInteractionForClosed
-      };
-      return /*#__PURE__*/_react.default.createElement(_DropdownItemSelectionCache.default, null, /*#__PURE__*/_react.default.createElement(_droplist.default, (0, _extends2.default)({
-        appearance: appearance,
-        boundariesElement: boundariesElement,
-        isLoading: isLoading,
-        isOpen: isOpen,
-        onClick: function onClick(e) {
-          return _this2.handleClick(e);
-        },
-        onOpenChange: this.handleOpenChange,
-        position: position,
-        isMenuFixed: isMenuFixed,
-        shouldFitContainer: shouldFitContainer,
-        shouldFlip: shouldFlip,
-        trigger: this.renderTrigger(),
-        onPositioned: this.onDroplistPositioned
-      }, deprecatedProps, {
-        analyticsContext: {
-          componentName: 'dropdownMenu',
-          packageName: packageName,
-          packageVersion: packageVersion
-        },
-        testId: testId
-      }), isDeprecated ? this.renderDeprecated() : /*#__PURE__*/_react.default.createElement(_WidthConstrainer.default, {
-        role: "menu",
-        shouldFitContainer: shouldFitContainer
-      }, /*#__PURE__*/_react.default.createElement(_DropdownItemClickManager.default, {
-        onItemClicked: function onItemClicked(event) {
-          return onOpenChange({
-            isOpen: false,
-            event: event
-          });
-        }
-      }, this.renderDropdownItems()))));
-    }
-  }]);
-  return DropdownMenuStateless;
-}(_react.Component);
-
-exports.DropdownMenuStatelessWithoutAnalytics = exports.DropdownMenuStateless = DropdownMenuStateless;
-(0, _defineProperty2.default)(DropdownMenuStateless, "defaultProps", {
-  appearance: 'default',
-  boundariesElement: 'viewport',
-  isLoading: false,
-  isOpen: false,
-  items: [],
-  onItemActivated: function onItemActivated() {},
-  onOpenChange: function onOpenChange() {},
-  position: 'bottom left',
-  isMenuFixed: false,
-  shouldAllowMultilineItems: false,
-  shouldFitContainer: false,
-  shouldFlip: true,
-  triggerType: 'default',
-  onPositioned: function onPositioned() {}
-});
-var createAndFireEventOnAtlaskit = (0, _analyticsNext.createAndFireEvent)('atlaskit');
-
-var _default = (0, _analyticsNext.withAnalyticsContext)({
-  componentName: 'dropdownMenu',
-  packageName: packageName,
-  packageVersion: packageVersion
-})((0, _analyticsNext.withAnalyticsEvents)({
-  onOpenChange: createAndFireEventOnAtlaskit({
-    action: 'toggled',
-    actionSubject: 'dropdownMenu',
-    attributes: {
-      componentName: 'dropdownMenu',
-      packageName: packageName,
-      packageVersion: packageVersion
-    }
-  })
-})(DropdownMenuStateless));
-
-exports.default = _default;

package/dist/cjs/components/context/DropdownItemClickManager.js

@@ -1,72 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-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 _defineProperty3 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-
-var _react = require("react");
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _contextNamespace = require("../../util/contextNamespace");
-
-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 { Date.prototype.toString.call(Reflect.construct(Date, [], function () {})); return true; } catch (e) { return false; } }
-
-var DropdownItemClickManager = /*#__PURE__*/function (_Component) {
-  (0, _inherits2.default)(DropdownItemClickManager, _Component);
-
-  var _super = _createSuper(DropdownItemClickManager);
-
-  function DropdownItemClickManager() {
-    var _this;
-
-    (0, _classCallCheck2.default)(this, DropdownItemClickManager);
-
-    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, _defineProperty3.default)((0, _assertThisInitialized2.default)(_this), "handleItemClicked", function (event) {
-      _this.props.onItemClicked(event);
-    });
-    return _this;
-  }
-
-  (0, _createClass2.default)(DropdownItemClickManager, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return (0, _defineProperty3.default)({}, _contextNamespace.clickManagerContext, {
-        itemClicked: this.handleItemClicked
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children;
-    }
-  }]);
-  return DropdownItemClickManager;
-}(_react.Component);
-
-exports.default = DropdownItemClickManager;
-(0, _defineProperty3.default)(DropdownItemClickManager, "childContextTypes", (0, _defineProperty3.default)({}, _contextNamespace.clickManagerContext, _propTypes.default.object));