@atlaskit/dropdown-menu 10.1.8 → 11.0.2

package/dist/es2019/components/DropdownMenuStateless.js

@@ -1,459 +0,0 @@
-import _extends from "@babel/runtime/helpers/extends";
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-
-/* 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';
-const packageName = "@atlaskit/dropdown-menu";
-const packageVersion = "10.1.8";
-export class DropdownMenuStateless extends Component {
-  constructor(..._args) {
-    super(..._args);
-
-    _defineProperty(this, "dropdownListPositioned", false);
-
-    _defineProperty(this, "state", {
-      autoFocusDropdownItems: false
-    });
-
-    _defineProperty(this, "componentDidMount", () => {
-      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(this, "componentDidUpdate", prevProp => {
-      if (this.isUsingDeprecatedAPI() && this.props.isOpen && !prevProp.isOpen) {
-        this.focusFirstItem();
-      }
-    });
-
-    _defineProperty(this, "getNextFocusable", (indexItem, available) => {
-      if (!this.domItemsList) {
-        return null;
-      }
-
-      let currentItem = typeof indexItem !== 'number' ? -1 : indexItem;
-      const 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(this, "getPrevFocusable", (indexItem, available) => {
-      if (!this.domItemsList) {
-        return null;
-      }
-
-      let currentItem = typeof indexItem !== 'number' ? -1 : indexItem;
-      const 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(this, "focusFirstItem", () => {
-      if (this.sourceOfIsOpen === 'keydown') {
-        this.focusItem(this.getNextFocusable());
-      }
-    });
-
-    _defineProperty(this, "focusNextItem", () => {
-      this.focusItem(this.getNextFocusable(this.focusedItem));
-    });
-
-    _defineProperty(this, "focusPreviousItem", () => {
-      this.focusItem(this.getPrevFocusable(this.focusedItem));
-    });
-
-    _defineProperty(this, "focusItem", index => {
-      if (!this.domItemsList || !index) {
-        return;
-      }
-
-      this.focusedItem = index;
-      this.domItemsList[this.focusedItem].focus();
-    });
-
-    _defineProperty(this, "isTargetChildItem", target => {
-      if (!target) {
-        return false;
-      }
-
-      const isDroplistItem = target.getAttribute('data-role') === 'droplistItem'; // eslint-disable-next-line react/no-find-dom-node
-
-      const thisDom = findDOMNode(this);
-      return isDroplistItem && thisDom ? thisDom.contains(target) : false;
-    });
-
-    _defineProperty(this, "handleKeyboardInteractionForClosed", event => {
-      if (this.props.isOpen) {
-        return;
-      }
-
-      switch (event.key) {
-        case KEY_DOWN:
-        case KEY_SPACE:
-        case KEY_ENTER:
-          event.preventDefault();
-          this.open({
-            event,
-            source: 'keydown'
-          });
-          break;
-
-        default:
-          break;
-      }
-    });
-
-    _defineProperty(this, "handleKeyboardInteractionsDeprecated", 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
-              });
-              break;
-
-            default:
-              break;
-          }
-        } else if (event.key === 'ArrowDown') {
-          this.sourceOfIsOpen = 'keydown';
-          this.focusFirstItem();
-        } else if (event.key === 'Tab') {
-          this.close({
-            event
-          });
-        }
-      } else {
-        switch (event.key) {
-          case KEY_DOWN:
-          case KEY_SPACE:
-          case KEY_ENTER:
-            event.preventDefault();
-            this.open({
-              event,
-              source: 'keydown'
-            });
-            break;
-
-          default:
-            break;
-        }
-      }
-    });
-
-    _defineProperty(this, "domMenuContainer", null);
-
-    _defineProperty(this, "isUsingDeprecatedAPI", () => Boolean(this.props.items.length));
-
-    _defineProperty(this, "handleOpenChange", args => {
-      this.props.onOpenChange(args);
-    });
-
-    _defineProperty(this, "triggerContent", () => {
-      const {
-        children,
-        trigger,
-        isOpen,
-        triggerButtonProps,
-        triggerType,
-        testId
-      } = this.props;
-      const 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
-
-
-      const triggerProps = Object.assign({}, triggerButtonProps);
-      const 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 && `${testId}--trigger`
-      }), insideTriggerContent);
-    });
-
-    _defineProperty(this, "open", 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(this, "close", attrs => {
-      this.sourceOfIsOpen = null;
-      this.props.onOpenChange({
-        isOpen: false,
-        event: attrs.event
-      });
-    });
-
-    _defineProperty(this, "toggle", attrs => {
-      if (attrs.source === 'keydown') {
-        return;
-      }
-
-      if (this.props.isOpen) {
-        this.close(attrs);
-      } else {
-        this.open(attrs);
-      }
-    });
-
-    _defineProperty(this, "renderTrigger", () => {
-      const triggerContent = this.triggerContent();
-      return this.isUsingDeprecatedAPI() ? triggerContent : /*#__PURE__*/React.createElement("div", {
-        ref: ref => {
-          this.triggerContainer = ref;
-        }
-      }, triggerContent);
-    });
-
-    _defineProperty(this, "renderItems", items => items.map((item, itemIndex) => /*#__PURE__*/React.createElement(Item, _extends({}, item, {
-      key: itemIndex,
-      onActivate: ({
-        event
-      }) => {
-        this.props.onItemActivated({
-          item,
-          event
-        });
-      }
-    }), item.content)));
-
-    _defineProperty(this, "renderGroups", groups => groups.map((group, groupIndex) => /*#__PURE__*/React.createElement(Group, {
-      heading: group.heading,
-      elemAfter: group.elemAfter,
-      key: groupIndex
-    }, this.renderItems(group.items))));
-
-    _defineProperty(this, "renderDeprecated", () => {
-      const {
-        items,
-        shouldFitContainer
-      } = this.props;
-      return /*#__PURE__*/React.createElement("div", {
-        ref: ref => {
-          this.domMenuContainer = ref;
-          this.domItemsList = ref ? ref.querySelectorAll('[data-role="droplistItem"]') : null;
-        },
-        role: "menu",
-        style: shouldFitContainer ? undefined : {
-          maxWidth: 300
-        }
-      }, this.renderGroups(items));
-    });
-
-    _defineProperty(this, "onDroplistPositioned", () => {
-      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(this, "renderDropdownItems", () => {
-      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);
-    });
-  }
-
-  handleClickDeprecated(event) {
-    const menuContainer = this.domMenuContainer;
-
-    if (!menuContainer || menuContainer && !menuContainer.contains(event.target)) {
-      this.toggle({
-        source: 'click',
-        event
-      });
-    }
-  }
-
-  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) {
-      const {
-        isOpen
-      } = this.props;
-      this.sourceOfIsOpen = 'mouse';
-      this.props.onOpenChange({
-        isOpen: !isOpen,
-        event
-      });
-    }
-  }
-
-  render() {
-    const {
-      appearance,
-      boundariesElement,
-      isLoading,
-      isOpen,
-      onOpenChange,
-      position,
-      isMenuFixed,
-      shouldAllowMultilineItems,
-      shouldFitContainer,
-      shouldFlip,
-      testId
-    } = this.props;
-    const isDeprecated = this.isUsingDeprecatedAPI();
-    const deprecatedProps = isDeprecated ? {
-      onKeyDown: this.handleKeyboardInteractionsDeprecated,
-      shouldAllowMultilineItems
-    } : {
-      onKeyDown: this.handleKeyboardInteractionForClosed
-    };
-    return /*#__PURE__*/React.createElement(DropdownItemSelectionCache, null, /*#__PURE__*/React.createElement(Droplist, _extends({
-      appearance: appearance,
-      boundariesElement: boundariesElement,
-      isLoading: isLoading,
-      isOpen: isOpen,
-      onClick: e => this.handleClick(e),
-      onOpenChange: this.handleOpenChange,
-      position: position,
-      isMenuFixed: isMenuFixed,
-      shouldFitContainer: shouldFitContainer,
-      shouldFlip: shouldFlip,
-      trigger: this.renderTrigger(),
-      onPositioned: this.onDroplistPositioned
-    }, deprecatedProps, {
-      analyticsContext: {
-        componentName: 'dropdownMenu',
-        packageName,
-        packageVersion
-      },
-      testId: testId
-    }), isDeprecated ? this.renderDeprecated() : /*#__PURE__*/React.createElement(WidthConstrainer, {
-      role: "menu",
-      shouldFitContainer: shouldFitContainer
-    }, /*#__PURE__*/React.createElement(DropdownItemClickManager, {
-      onItemClicked: event => onOpenChange({
-        isOpen: false,
-        event
-      })
-    }, this.renderDropdownItems()))));
-  }
-
-}
-
-_defineProperty(DropdownMenuStateless, "defaultProps", {
-  appearance: 'default',
-  boundariesElement: 'viewport',
-  isLoading: false,
-  isOpen: false,
-  items: [],
-  onItemActivated: () => {},
-  onOpenChange: () => {},
-  position: 'bottom left',
-  isMenuFixed: false,
-  shouldAllowMultilineItems: false,
-  shouldFitContainer: false,
-  shouldFlip: true,
-  triggerType: 'default',
-  onPositioned: () => {}
-});
-
-export { DropdownMenuStateless as DropdownMenuStatelessWithoutAnalytics };
-const createAndFireEventOnAtlaskit = createAndFireEvent('atlaskit');
-export default withAnalyticsContext({
-  componentName: 'dropdownMenu',
-  packageName,
-  packageVersion
-})(withAnalyticsEvents({
-  onOpenChange: createAndFireEventOnAtlaskit({
-    action: 'toggled',
-    actionSubject: 'dropdownMenu',
-    attributes: {
-      componentName: 'dropdownMenu',
-      packageName,
-      packageVersion
-    }
-  })
-})(DropdownMenuStateless));

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

@@ -1,31 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import { Component } from 'react';
-import PropTypes from 'prop-types';
-import { clickManagerContext } from '../../util/contextNamespace';
-export default class DropdownItemClickManager extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "handleItemClicked", event => {
-      this.props.onItemClicked(event);
-    });
-  }
-
-  getChildContext() {
-    return {
-      [clickManagerContext]: {
-        itemClicked: this.handleItemClicked
-      }
-    };
-  }
-
-  render() {
-    return this.props.children;
-  }
-
-}
-
-_defineProperty(DropdownItemClickManager, "childContextTypes", {
-  // eslint-disable-next-line react/forbid-prop-types
-  [clickManagerContext]: PropTypes.object
-});

package/dist/es2019/components/context/DropdownItemFocusManager.js

@@ -1,134 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { focusManagerContext } from '../../util/contextNamespace';
-import { KEY_DOWN, KEY_TAB, KEY_UP } from '../../util/keys';
-export default class DropdownItemFocusManager extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "registeredItems", []);
-
-    _defineProperty(this, "handleItemRegistered", (itemId, itemNode) => {
-      this.registeredItems.push({
-        itemId,
-        itemNode
-      });
-
-      if (this.props.autoFocus && this.registeredItems.length === 1) {
-        this.focusedItemId = itemId;
-        itemNode.focus();
-      }
-    });
-
-    _defineProperty(this, "handleItemDeregistered", itemId => {
-      this.registeredItems = this.registeredItems.filter(item => item.itemId !== itemId);
-    });
-
-    _defineProperty(this, "handleItemFocused", itemId => {
-      this.focusedItemId = itemId;
-    });
-
-    _defineProperty(this, "handleItemUpdated", (itemId, itemNode) => {
-      let matchingIndex = -1;
-
-      for (let i = 0; i < this.registeredItems.length; i++) {
-        if (this.registeredItems[i].itemId === itemId) {
-          matchingIndex = i;
-          break;
-        }
-      }
-
-      if (matchingIndex === -1) {
-        this.handleItemRegistered(itemId, itemNode);
-        return;
-      }
-
-      this.registeredItems[matchingIndex].itemNode = itemNode;
-
-      if (this.focusedItemIndex() === matchingIndex) {
-        itemNode.focus();
-      }
-    });
-
-    _defineProperty(this, "focusedItemIndex", () => {
-      const {
-        focusedItemId,
-        registeredItems
-      } = this;
-
-      for (let i = 0; i < registeredItems.length; i++) {
-        if (registeredItems[i].itemId === focusedItemId) {
-          return i;
-        }
-      }
-
-      return -1;
-    });
-
-    _defineProperty(this, "handleKeyboard", event => {
-      const {
-        key,
-        shiftKey
-      } = event;
-      const focusedItemIndex = this.focusedItemIndex();
-
-      if (key === KEY_UP || key === KEY_DOWN) {
-        // We prevent default here to avoid page scrolling when up/down
-        // pressed while dropdown is focused.
-        event.preventDefault();
-
-        if (focusedItemIndex < 0) {
-          return;
-        }
-
-        const nextItemIndex = key === KEY_UP ? Math.max(0, focusedItemIndex - 1) : Math.min(this.registeredItems.length - 1, focusedItemIndex + 1);
-        this.registeredItems[nextItemIndex].itemNode.focus();
-      }
-
-      if (key === KEY_TAB) {
-        if (!shiftKey && focusedItemIndex === this.registeredItems.length - 1) {
-          if (this.props.close) {
-            this.props.close({
-              event,
-              source: 'keydown'
-            });
-          }
-        }
-
-        if (shiftKey && focusedItemIndex === 0) {
-          if (this.props.close) {
-            this.props.close({
-              event,
-              source: 'keydown'
-            });
-          }
-        }
-      }
-    });
-  }
-
-  getChildContext() {
-    return {
-      [focusManagerContext]: {
-        itemFocused: this.handleItemFocused,
-        registerItem: this.handleItemRegistered,
-        deregisterItem: this.handleItemDeregistered,
-        updateItem: this.handleItemUpdated
-      }
-    };
-  }
-
-  render() {
-    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
-    return /*#__PURE__*/React.createElement("div", {
-      onKeyDown: this.handleKeyboard
-    }, this.props.children);
-  }
-
-}
-
-_defineProperty(DropdownItemFocusManager, "childContextTypes", {
-  // eslint-disable-next-line react/forbid-prop-types
-  [focusManagerContext]: PropTypes.object
-});

package/dist/es2019/components/context/DropdownItemSelectionCache.js

@@ -1,68 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
-import find from 'array-find';
-import PropTypes from 'prop-types';
-import { selectionCacheContext } from '../../util/contextNamespace';
-
-const isItemInList = (itemList, itemId, groupId) => Boolean(find(itemList, item => item.id === itemId && item.groupId === groupId));
-
-export default class DropdownItemSelectionCache extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "state", {
-      lastCacheUpdate: 0
-    });
-
-    _defineProperty(this, "selectedItems", []);
-
-    _defineProperty(this, "alreadyDefaultedItems", []);
-
-    _defineProperty(this, "handleItemSelectionsChanged", (groupId, newGroupSelections) => {
-      const newSelectedItems = [...this.selectedItems.filter(item => item.groupId !== groupId), ...newGroupSelections];
-      this.selectedItems = newSelectedItems; // We store selectedItems in an instance variable (this.selectedItems) instead of state,
-      // because if multiple children update the cache at the same time it causes unexpected
-      // behaviour due to the asynchronous behaviour of setState. So we need to trigger setState
-      // with a different value to cause the children to be updated with their new selection values.
-
-      this.setState({
-        lastCacheUpdate: Date.now()
-      });
-    });
-  }
-
-  // eslint-disable-line react/sort-comp
-  getChildContext() {
-    return {
-      [selectionCacheContext]: {
-        // This function returns true/false describing whether the supplied navigation item
-        // (which must have a unique item and group ID) is currently selected - this is used
-        // by radio and checkbox dropdown items to retreive their 'selected' state when they
-        // re-mount, which happens when the dropdown is closed and then re-opened.
-        isItemSelected: (groupId, itemId) => isItemInList(this.selectedItems, itemId, groupId),
-        itemsInGroup: groupId => this.selectedItems.filter(item => item.groupId === groupId),
-        itemSelectionsChanged: this.handleItemSelectionsChanged,
-        hasItemAlreadyHadDefaultSelectedApplied: (groupId, itemId) => isItemInList(this.alreadyDefaultedItems, itemId, groupId),
-        markItemAsDefaultApplied: (groupId, itemId) => {
-          this.alreadyDefaultedItems.push({
-            id: itemId,
-            groupId
-          });
-        }
-      }
-    };
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.children);
-  }
-
-}
-
-_defineProperty(DropdownItemSelectionCache, "childContextTypes", {
-  [selectionCacheContext]: PropTypes.shape({
-    isItemSelected: PropTypes.func,
-    itemsInGroup: PropTypes.func,
-    itemSelectionsChanged: PropTypes.func
-  })
-});