@atlaskit/dropdown-menu 10.1.8 → 11.0.2

package/dist/esm/components/DropdownMenuStateless.js

@@ -1,516 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
-/* eslint-disable react/no-array-index-key */
-import React, { Component, Fragment } from 'react';
-import { findDOMNode } from 'react-dom';
-import { createAndFireEvent, withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
-import Button from '@atlaskit/button/custom-theme-button';
-import Droplist, { Group, Item } from '@atlaskit/droplist';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import WidthConstrainer from '../styled/WidthConstrainer';
-import { KEY_DOWN, KEY_ENTER, KEY_SPACE } from '../util/keys';
-import DropdownItemClickManager from './context/DropdownItemClickManager';
-import DropdownItemFocusManager from './context/DropdownItemFocusManager';
-import DropdownItemSelectionCache from './context/DropdownItemSelectionCache';
-var packageName = "@atlaskit/dropdown-menu";
-var packageVersion = "10.1.8";
-export var DropdownMenuStateless = /*#__PURE__*/function (_Component) {
-  _inherits(DropdownMenuStateless, _Component);
-
-  var _super = _createSuper(DropdownMenuStateless);
-
-  function DropdownMenuStateless() {
-    var _this;
-
-    _classCallCheck(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));
-
-    _defineProperty(_assertThisInitialized(_this), "dropdownListPositioned", false);
-
-    _defineProperty(_assertThisInitialized(_this), "state", {
-      autoFocusDropdownItems: false
-    });
-
-    _defineProperty(_assertThisInitialized(_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();
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "componentDidUpdate", function (prevProp) {
-      if (_this.isUsingDeprecatedAPI() && _this.props.isOpen && !prevProp.isOpen) {
-        _this.focusFirstItem();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_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;
-    });
-
-    _defineProperty(_assertThisInitialized(_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;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusFirstItem", function () {
-      if (_this.sourceOfIsOpen === 'keydown') {
-        _this.focusItem(_this.getNextFocusable());
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusNextItem", function () {
-      _this.focusItem(_this.getNextFocusable(_this.focusedItem));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusPreviousItem", function () {
-      _this.focusItem(_this.getPrevFocusable(_this.focusedItem));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "focusItem", function (index) {
-      if (!_this.domItemsList || !index) {
-        return;
-      }
-
-      _this.focusedItem = index;
-
-      _this.domItemsList[_this.focusedItem].focus();
-    });
-
-    _defineProperty(_assertThisInitialized(_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 = findDOMNode(_assertThisInitialized(_this));
-      return isDroplistItem && thisDom ? thisDom.contains(target) : false;
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleKeyboardInteractionForClosed", function (event) {
-      if (_this.props.isOpen) {
-        return;
-      }
-
-      switch (event.key) {
-        case KEY_DOWN:
-        case KEY_SPACE:
-        case KEY_ENTER:
-          event.preventDefault();
-
-          _this.open({
-            event: event,
-            source: 'keydown'
-          });
-
-          break;
-
-        default:
-          break;
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_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 KEY_DOWN:
-          case KEY_SPACE:
-          case KEY_ENTER:
-            event.preventDefault();
-
-            _this.open({
-              event: event,
-              source: 'keydown'
-            });
-
-            break;
-
-          default:
-            break;
-        }
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "domMenuContainer", null);
-
-    _defineProperty(_assertThisInitialized(_this), "isUsingDeprecatedAPI", function () {
-      return Boolean(_this.props.items.length);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOpenChange", function (args) {
-      _this.props.onOpenChange(args);
-    });
-
-    _defineProperty(_assertThisInitialized(_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.createElement(ExpandIcon, {
-          size: "medium",
-          label: ""
-        });
-      }
-
-      return /*#__PURE__*/React.createElement(Button, _extends({}, defaultButtonProps, triggerProps, {
-        testId: testId && "".concat(testId, "--trigger")
-      }), insideTriggerContent);
-    });
-
-    _defineProperty(_assertThisInitialized(_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'
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "close", function (attrs) {
-      _this.sourceOfIsOpen = null;
-
-      _this.props.onOpenChange({
-        isOpen: false,
-        event: attrs.event
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "toggle", function (attrs) {
-      if (attrs.source === 'keydown') {
-        return;
-      }
-
-      if (_this.props.isOpen) {
-        _this.close(attrs);
-      } else {
-        _this.open(attrs);
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderTrigger", function () {
-      var triggerContent = _this.triggerContent();
-
-      return _this.isUsingDeprecatedAPI() ? triggerContent : /*#__PURE__*/React.createElement("div", {
-        ref: function ref(_ref) {
-          _this.triggerContainer = _ref;
-        }
-      }, triggerContent);
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderItems", function (items) {
-      return items.map(function (item, itemIndex) {
-        return /*#__PURE__*/React.createElement(Item, _extends({}, item, {
-          key: itemIndex,
-          onActivate: function onActivate(_ref2) {
-            var event = _ref2.event;
-
-            _this.props.onItemActivated({
-              item: item,
-              event: event
-            });
-          }
-        }), item.content);
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderGroups", function (groups) {
-      return groups.map(function (group, groupIndex) {
-        return /*#__PURE__*/React.createElement(Group, {
-          heading: group.heading,
-          elemAfter: group.elemAfter,
-          key: groupIndex
-        }, _this.renderItems(group.items));
-      });
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderDeprecated", function () {
-      var _this$props2 = _this.props,
-          items = _this$props2.items,
-          shouldFitContainer = _this$props2.shouldFitContainer;
-      return /*#__PURE__*/React.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));
-    });
-
-    _defineProperty(_assertThisInitialized(_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();
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "renderDropdownItems", function () {
-      if (_this.sourceOfIsOpen === 'keydown' && _this.dropdownListPositioned) {
-        return /*#__PURE__*/React.createElement(DropdownItemFocusManager, {
-          autoFocus: _this.state.autoFocusDropdownItems,
-          close: _this.close
-        }, _this.props.children);
-      }
-
-      return /*#__PURE__*/React.createElement(Fragment, null, _this.props.children);
-    });
-
-    return _this;
-  }
-
-  _createClass(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.createElement(DropdownItemSelectionCache, null, /*#__PURE__*/React.createElement(Droplist, _extends({
-        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.createElement(WidthConstrainer, {
-        role: "menu",
-        shouldFitContainer: shouldFitContainer
-      }, /*#__PURE__*/React.createElement(DropdownItemClickManager, {
-        onItemClicked: function onItemClicked(event) {
-          return onOpenChange({
-            isOpen: false,
-            event: event
-          });
-        }
-      }, this.renderDropdownItems()))));
-    }
-  }]);
-
-  return DropdownMenuStateless;
-}(Component);
-
-_defineProperty(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() {}
-});
-
-export { DropdownMenuStateless as DropdownMenuStatelessWithoutAnalytics };
-var createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-export default withAnalyticsContext({
-  componentName: 'dropdownMenu',
-  packageName: packageName,
-  packageVersion: packageVersion
-})(withAnalyticsEvents({
-  onOpenChange: createAndFireEventOnAtlaskit({
-    action: 'toggled',
-    actionSubject: 'dropdownMenu',
-    attributes: {
-      componentName: 'dropdownMenu',
-      packageName: packageName,
-      packageVersion: packageVersion
-    }
-  })
-})(DropdownMenuStateless));

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

@@ -1,59 +0,0 @@
-import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
-import _createClass from "@babel/runtime/helpers/createClass";
-import _assertThisInitialized from "@babel/runtime/helpers/assertThisInitialized";
-import _inherits from "@babel/runtime/helpers/inherits";
-import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
-import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(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; } }
-
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { clickManagerContext } from '../../util/contextNamespace';
-
-var DropdownItemClickManager = /*#__PURE__*/function (_Component) {
-  _inherits(DropdownItemClickManager, _Component);
-
-  var _super = _createSuper(DropdownItemClickManager);
-
-  function DropdownItemClickManager() {
-    var _this;
-
-    _classCallCheck(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));
-
-    _defineProperty(_assertThisInitialized(_this), "handleItemClicked", function (event) {
-      _this.props.onItemClicked(event);
-    });
-
-    return _this;
-  }
-
-  _createClass(DropdownItemClickManager, [{
-    key: "getChildContext",
-    value: function getChildContext() {
-      return _defineProperty({}, clickManagerContext, {
-        itemClicked: this.handleItemClicked
-      });
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      return this.props.children;
-    }
-  }]);
-
-  return DropdownItemClickManager;
-}(Component);
-
-_defineProperty(DropdownItemClickManager, "childContextTypes", _defineProperty({}, clickManagerContext, PropTypes.object));
-
-export { DropdownItemClickManager as default };