@atlaskit/dropdown-menu 10.1.8 → 11.0.2

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

@@ -1,140 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { selectionCacheContext, selectionManagerContext } from '../../util/contextNamespace';
-export default class DropdownItemSelectionManager extends Component {
-  constructor(...args) {
-    super(...args);
-
-    _defineProperty(this, "setItemSelected", (itemId, isSelected, defaultSelected) => {
-      const {
-        behavior,
-        groupId
-      } = this.props;
-
-      const setSelected = finalBool => {
-        if (behavior === 'checkbox' || behavior === 'menuitemcheckbox') {
-          this.setCheckboxItemSelected(itemId, finalBool);
-        } else if (behavior === 'radio' || behavior === 'menuitemradio') {
-          this.setRadioItemSelected(itemId, finalBool);
-        }
-      }; // If a radio or checkbox item has defaultSelected set on it, that it will try to set its
-      // selected state to true each time it mounts (which happens whenever the dropdown is re-
-      // opened by the user. The following check makes sure that the defaultSelected behaviour
-      // only applies on the first mount of the radio/checkbox.
-
-
-      if (typeof isSelected === 'boolean') {
-        // If isSelected is explicitly provided, set it to that
-        setSelected(isSelected);
-      } else if (defaultSelected) {
-        if (!this.hasAlreadyAppliedDefaultSelected(itemId)) {
-          // If using defaultSelected and this is first mount, select the item
-          setSelected(true);
-          this.context[selectionCacheContext].markItemAsDefaultApplied(groupId, itemId);
-        } else {
-          // If using defaultSelected and not first mount, set isSelected to cached value
-          setSelected(this.isItemSelectedInCache(itemId));
-        }
-      } else {
-        setSelected(this.isItemSelectedInCache(itemId));
-      }
-    });
-
-    _defineProperty(this, "setCheckboxItemSelected", (itemId, isSelected) => {
-      const {
-        [selectionCacheContext]: cache
-      } = this.context;
-      const alreadySelected = cache.itemsInGroup(this.props.groupId);
-      const isAlreadySelected = cache.isItemSelected(this.props.groupId, itemId);
-
-      if (isSelected && !isAlreadySelected) {
-        this.updateCacheContextWithSelections([...alreadySelected, {
-          id: itemId,
-          groupId: this.props.groupId
-        }]);
-      } else if (!isSelected && isAlreadySelected) {
-        const withoutCurrentItem = alreadySelected.filter(item => item.id !== itemId);
-        this.updateCacheContextWithSelections(withoutCurrentItem);
-      }
-    });
-
-    _defineProperty(this, "setRadioItemSelected", (itemId, isSelected) => {
-      const {
-        [selectionCacheContext]: cache
-      } = this.context;
-      const isAlreadySelected = cache.isItemSelected(this.props.groupId, itemId);
-
-      if (isAlreadySelected && !isSelected) {
-        this.updateCacheContextWithSelections([]);
-      } else if (!isAlreadySelected && isSelected) {
-        this.updateCacheContextWithSelections([{
-          id: itemId,
-          groupId: this.props.groupId
-        }]);
-      }
-    });
-
-    _defineProperty(this, "isItemSelectedInCache", itemId => this.context[selectionCacheContext].isItemSelected(this.props.groupId, itemId));
-
-    _defineProperty(this, "handleItemClicked", clickedItemId => {
-      const {
-        behavior
-      } = this.props;
-
-      if (behavior === 'checkbox' || behavior === 'menuitemcheckbox') {
-        this.handleCheckboxItemClicked(clickedItemId);
-      } else if (behavior === 'radio' || behavior === 'menuitemradio') {
-        this.handleRadioItemClicked(clickedItemId);
-      }
-    });
-
-    _defineProperty(this, "hasAlreadyAppliedDefaultSelected", itemId => this.context[selectionCacheContext].hasItemAlreadyHadDefaultSelectedApplied(this.props.groupId, itemId));
-
-    _defineProperty(this, "handleCheckboxItemClicked", clickedItemId => {
-      const {
-        [selectionCacheContext]: cache
-      } = this.context;
-      const itemsInGroup = cache.itemsInGroup(this.props.groupId);
-      const newSelections = cache.isItemSelected(this.props.groupId, clickedItemId) ? itemsInGroup.filter(item => item.id !== clickedItemId) : [...itemsInGroup, {
-        id: clickedItemId,
-        groupId: this.props.groupId
-      }];
-      this.updateCacheContextWithSelections(newSelections);
-    });
-
-    _defineProperty(this, "handleRadioItemClicked", clickedItemId => {
-      this.updateCacheContextWithSelections([{
-        id: clickedItemId,
-        groupId: this.props.groupId
-      }]);
-    });
-
-    _defineProperty(this, "updateCacheContextWithSelections", itemSelections => {
-      this.context[selectionCacheContext].itemSelectionsChanged(this.props.groupId, itemSelections);
-    });
-  }
-
-  getChildContext() {
-    return {
-      [selectionManagerContext]: {
-        isItemSelected: itemId => this.context[selectionCacheContext].isItemSelected(this.props.groupId, itemId),
-        itemClicked: this.handleItemClicked,
-        setItemSelected: this.setItemSelected
-      }
-    };
-  }
-
-  render() {
-    return /*#__PURE__*/React.createElement("div", null, this.props.children);
-  }
-
-}
-
-_defineProperty(DropdownItemSelectionManager, "childContextTypes", {
-  [selectionManagerContext]: PropTypes.object
-});
-
-_defineProperty(DropdownItemSelectionManager, "contextTypes", {
-  [selectionCacheContext]: PropTypes.object.isRequired
-});

package/dist/es2019/components/group/DropdownItemGroup.js

@@ -1,17 +0,0 @@
-import React, { Component } from 'react';
-import { ItemGroup } from '@atlaskit/item';
-export default class DropdownItemGroup extends Component {
-  render() {
-    const {
-      children,
-      elemAfter,
-      title
-    } = this.props;
-    return /*#__PURE__*/React.createElement(ItemGroup, {
-      elemAfter: elemAfter,
-      title: title,
-      role: "menu"
-    }, children);
-  }
-
-}

package/dist/es2019/components/group/DropdownItemGroupCheckbox.js

@@ -1,3 +0,0 @@
-import withItemSelectionManager from '../hoc/withItemSelectionManager';
-import DropdownItemGroup from './DropdownItemGroup';
-export default withItemSelectionManager(DropdownItemGroup, 'checkbox');

package/dist/es2019/components/group/DropdownItemGroupRadio.js

@@ -1,3 +0,0 @@
-import withItemSelectionManager from '../hoc/withItemSelectionManager';
-import DropdownItemGroup from './DropdownItemGroup';
-export default withItemSelectionManager(DropdownItemGroup, 'radio');

package/dist/es2019/components/group/ert-group-selection.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/es2019/components/hoc/withItemSelectionManager.js

@@ -1,20 +0,0 @@
-import React, { Component } from 'react';
-import DropdownItemSelectionManager from '../context/DropdownItemSelectionManager';
-
-// HOC that typically wraps @atlaskit/item/ItemGroup
-const withDropdownItemSelectionManager = (WrappedComponent, selectionBehavior) => class WithDropdownItemSelectionManager extends Component {
-  render() {
-    const {
-      children,
-      id,
-      ...otherProps
-    } = this.props;
-    return /*#__PURE__*/React.createElement(WrappedComponent, otherProps, /*#__PURE__*/React.createElement(DropdownItemSelectionManager, {
-      groupId: id,
-      behavior: selectionBehavior
-    }, children));
-  }
-
-};
-
-export default withDropdownItemSelectionManager;

package/dist/es2019/components/hoc/withToggleInteraction.js

@@ -1,119 +0,0 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import React, { Component } from 'react';
-import PropTypes from 'prop-types';
-import { B400, N40 } from '@atlaskit/theme/colors';
-import { selectionManagerContext } from '../../util/contextNamespace';
-import getDisplayName from '../../util/getDisplayName';
-import { KEY_ENTER, KEY_SPACE } from '../../util/keys';
-import safeContextCall from '../../util/safeContextCall';
-
-// HOC that typically wraps @atlaskit/item
-const withToggleInteraction = (WrappedComponent, SelectionIcon, getAriaRole) => {
-  var _class, _temp;
-
-  return _temp = _class = class WithToggleInteraction extends Component {
-    constructor(...args) {
-      super(...args);
-
-      _defineProperty(this, "getIconColors", (isSelected = false) => {
-        if (isSelected) {
-          return {
-            primary: B400,
-            secondary: N40
-          };
-        }
-
-        return {
-          primary: N40,
-          secondary: N40
-        };
-      });
-
-      _defineProperty(this, "warnIfUseControlledAndUncontrolledState", () => {
-        if (process.env.NODE_ENV !== 'production' && !process.env.CI) {
-          if (this.props.defaultSelected && this.props.isSelected) {
-            // eslint-disable-next-line no-console
-            console.warn('DropdownItem defaultSelected and isSelected props should not be used at the same time.');
-          }
-        }
-      });
-
-      _defineProperty(this, "callContextFn", safeContextCall(this, selectionManagerContext));
-
-      _defineProperty(this, "handleKeyboard", event => {
-        const {
-          key
-        } = event;
-
-        if (key === KEY_ENTER || key === KEY_SPACE) {
-          // We prevent default here to avoid page scroll
-          event.preventDefault();
-          this.handleItemActivated(event);
-        }
-      });
-
-      _defineProperty(this, "handleItemActivated", event => {
-        if (this.props.onClick) {
-          this.props.onClick(event);
-        }
-
-        this.callContextFn('itemClicked', this.props.id);
-      });
-
-      _defineProperty(this, "isSelectedInDropdown", () => this.callContextFn('isItemSelected', this.props.id));
-    }
-
-    componentDidMount() {
-      const {
-        defaultSelected,
-        isSelected,
-        id
-      } = this.props;
-      this.warnIfUseControlledAndUncontrolledState();
-      this.callContextFn('setItemSelected', id, isSelected, defaultSelected);
-    }
-
-    UNSAFE_componentWillReceiveProps(nextProps) {
-      const {
-        id,
-        defaultSelected,
-        isSelected
-      } = nextProps;
-
-      if (this.props.isSelected !== isSelected) {
-        this.callContextFn('setItemSelected', id, isSelected, defaultSelected);
-      }
-    }
-
-    render() {
-      const {
-        children,
-        ...otherProps
-      } = this.props;
-      const isSelected = this.isSelectedInDropdown();
-      const iconColors = this.getIconColors(!!isSelected);
-      const ariaRole = getAriaRole();
-      const wrappedCompProps = { ...otherProps,
-        role: ariaRole,
-        'aria-checked': isSelected,
-        isSelected: isSelected,
-        onClick: this.handleItemActivated,
-        onKeyDown: this.handleKeyboard,
-        elemBefore: /*#__PURE__*/React.createElement(SelectionIcon, {
-          primaryColor: iconColors.primary,
-          secondaryColor: iconColors.secondary,
-          size: "medium",
-          label: ""
-        })
-      };
-      return /*#__PURE__*/React.createElement(WrappedComponent, wrappedCompProps, children);
-    }
-
-  }, _defineProperty(_class, "displayName", `WithToggleInteraction(${getDisplayName(WrappedComponent)})`), _defineProperty(_class, "defaultProps", {
-    onClick: () => {}
-  }), _defineProperty(_class, "contextTypes", {
-    [selectionManagerContext]: PropTypes.object.isRequired
-  }), _temp;
-};
-
-export default withToggleInteraction;

package/dist/es2019/components/item/DropdownItem.js

@@ -1,3 +0,0 @@
-import Item, { withItemClick, withItemFocus } from '@atlaskit/item';
-// We need to type this with the above type - currently this component is has "any" for its props.
-export default withItemClick(withItemFocus(Item));

package/dist/es2019/components/item/DropdownItemCheckbox.js

@@ -1,5 +0,0 @@
-import CheckboxIcon from '@atlaskit/icon/glyph/checkbox';
-import Item, { withItemFocus } from '@atlaskit/item';
-import supportsVoiceover from '../../util/supportsVoiceover';
-import withToggleInteraction from '../hoc/withToggleInteraction';
-export default withToggleInteraction(withItemFocus(Item), CheckboxIcon, () => supportsVoiceover() ? 'checkbox' : 'menuitemcheckbox');

package/dist/es2019/components/item/DropdownItemRadio.js

@@ -1,5 +0,0 @@
-import RadioIcon from '@atlaskit/icon/glyph/radio';
-import Item, { withItemFocus } from '@atlaskit/item';
-import supportsVoiceover from '../../util/supportsVoiceover';
-import withToggleInteraction from '../hoc/withToggleInteraction';
-export default withToggleInteraction(withItemFocus(Item), RadioIcon, () => supportsVoiceover() ? 'radio' : 'menuitemradio');

package/dist/es2019/components/item/ert-item-checkbox.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/es2019/components/item/ert-item-radio.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/es2019/components/item/ert-item.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/es2019/styled/WidthConstrainer.js

@@ -1,6 +0,0 @@
-import styled from 'styled-components';
-export default styled.div`
-  ${({
-  shouldFitContainer
-}) => shouldFitContainer ? '' : 'max-width: 300px;'};
-`;

package/dist/es2019/util/contextNamespace.js

@@ -1,6 +0,0 @@
-const prefix = key => `@atlaskit-private-do-not-use/dropdown-menu:${key}`;
-
-export const focusManagerContext = prefix('focus-manager');
-export const selectionCacheContext = prefix('selection-cache');
-export const selectionManagerContext = prefix('selection-manager');
-export const clickManagerContext = prefix('click-manager');

package/dist/es2019/util/getDisplayName.js

@@ -1,4 +0,0 @@
-// from https://facebook.github.io/react/docs/higher-order-components.html
-const getDisplayName = WrappedComponent => WrappedComponent.displayName || WrappedComponent.name || 'Component';
-
-export default getDisplayName;

package/dist/es2019/util/keys.js

@@ -1,6 +0,0 @@
-export const KEY_UP = 'ArrowUp';
-export const KEY_DOWN = 'ArrowDown';
-export const KEY_SPACE = ' ';
-export const KEY_ENTER = 'Enter';
-export const KEY_TAB = 'Tab';
-export const KEY_ESC = 'Escape';

package/dist/es2019/util/safeContextCall.js

@@ -1,10 +0,0 @@
-// There are cases where the context is not available, such as when a dropdown item is used
-// inside @atlaskit/navigation. For this reason we have this helper function which safely calls
-// the context functions if they are available.
-export default ((instance, contextKey) => (fnToCall, ...args) => {
-  if (!instance.context[contextKey]) {
-    return null;
-  }
-
-  return instance.context[contextKey][fnToCall](...args);
-});

package/dist/es2019/util/supportsVoiceover.js

@@ -1,5 +0,0 @@
-const canUseDOM = () => Boolean(typeof window !== 'undefined' && window.document && window.document.createElement);
-
-const supportsVoiceOver = () => /Mac OS X/.test(canUseDOM() ? navigator.userAgent : '');
-
-export default supportsVoiceOver;

package/dist/esm/components/DropdownMenu.js

@@ -1,215 +0,0 @@
-import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
-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 React, { Component } from 'react';
-import StatelessMenu from './DropdownMenuStateless';
-
-var DropdownMenu = /*#__PURE__*/function (_Component) {
-  _inherits(DropdownMenu, _Component);
-
-  var _super = _createSuper(DropdownMenu);
-
-  function DropdownMenu() {
-    var _this;
-
-    _classCallCheck(this, DropdownMenu);
-
-    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), "state", {
-      isOpen: _this.props.defaultOpen,
-      items: _toConsumableArray(_this.props.items)
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "findActivatedGroup", function (item) {
-      return _this.state.items.filter(function (group) {
-        return group.items.indexOf(item) > -1;
-      })[0];
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleItemActivation", function (attrs) {
-      var activatedItem = attrs.item;
-
-      var activatedGroup = _this.findActivatedGroup(activatedItem);
-
-      var items = _toConsumableArray(_this.state.items);
-
-      switch (activatedItem.type) {
-        case 'checkbox':
-          activatedItem.isChecked = !activatedItem.isChecked;
-
-          _this.props.onItemActivated({
-            item: activatedItem
-          });
-
-          _this.setState({
-            items: items
-          });
-
-          break;
-
-        case 'radio':
-          activatedGroup.items.forEach(function (i) {
-            if (i === activatedItem) {
-              i.isChecked = true; // eslint-disable-line no-param-reassign
-            } else {
-              i.isChecked = false; // eslint-disable-line no-param-reassign
-            }
-          });
-
-          _this.props.onItemActivated({
-            item: activatedItem
-          });
-
-          _this.setState({
-            items: items
-          });
-
-          break;
-
-        case 'link':
-        default:
-          _this.props.onItemActivated({
-            item: activatedItem
-          });
-
-          _this.close();
-
-          break;
-      }
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "handleOpenChange", function (attrs) {
-      var _this$props;
-
-      if (_this.state.isOpen === attrs.isOpen) {
-        return;
-      }
-
-      _this.setState({
-        isOpen: attrs.isOpen
-      });
-
-      for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
-        args[_key2 - 1] = arguments[_key2];
-      }
-
-      (_this$props = _this.props).onOpenChange.apply(_this$props, [attrs].concat(args));
-    });
-
-    _defineProperty(_assertThisInitialized(_this), "close", function () {
-      var _this$props2;
-
-      if (_this.state.isOpen === false) {
-        return;
-      }
-
-      _this.setState({
-        isOpen: false
-      });
-
-      for (var _len3 = arguments.length, args = new Array(_len3), _key3 = 0; _key3 < _len3; _key3++) {
-        args[_key3] = arguments[_key3];
-      }
-
-      (_this$props2 = _this.props).onOpenChange.apply(_this$props2, [{
-        isOpen: false
-      }].concat(args));
-    });
-
-    return _this;
-  }
-
-  _createClass(DropdownMenu, [{
-    key: "UNSAFE_componentWillReceiveProps",
-    value: function UNSAFE_componentWillReceiveProps(nextProps) {
-      if (nextProps.items !== this.state.items) {
-        this.setState({
-          items: _toConsumableArray(nextProps.items)
-        });
-      }
-
-      if (nextProps.isOpen !== this.props.isOpen) {
-        this.setState({
-          isOpen: nextProps.isOpen
-        });
-      }
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var isOpen = this.state.isOpen;
-      var _this$props3 = this.props,
-          appearance = _this$props3.appearance,
-          boundariesElement = _this$props3.boundariesElement,
-          children = _this$props3.children,
-          isLoading = _this$props3.isLoading,
-          items = _this$props3.items,
-          position = _this$props3.position,
-          isMenuFixed = _this$props3.isMenuFixed,
-          shouldAllowMultilineItems = _this$props3.shouldAllowMultilineItems,
-          shouldFitContainer = _this$props3.shouldFitContainer,
-          shouldFlip = _this$props3.shouldFlip,
-          testId = _this$props3.testId,
-          trigger = _this$props3.trigger,
-          triggerButtonProps = _this$props3.triggerButtonProps,
-          triggerType = _this$props3.triggerType,
-          onPositioned = _this$props3.onPositioned;
-      return /*#__PURE__*/React.createElement(StatelessMenu, {
-        appearance: appearance,
-        boundariesElement: boundariesElement,
-        isOpen: isOpen,
-        isLoading: isLoading,
-        items: items,
-        onItemActivated: this.handleItemActivation,
-        onOpenChange: this.handleOpenChange,
-        position: position,
-        isMenuFixed: isMenuFixed,
-        shouldAllowMultilineItems: shouldAllowMultilineItems,
-        shouldFitContainer: shouldFitContainer,
-        shouldFlip: shouldFlip,
-        trigger: trigger,
-        triggerButtonProps: triggerButtonProps,
-        triggerType: triggerType,
-        onPositioned: onPositioned,
-        testId: testId
-      }, children);
-    }
-  }]);
-
-  return DropdownMenu;
-}(Component);
-
-_defineProperty(DropdownMenu, "defaultProps", {
-  appearance: 'default',
-  boundariesElement: 'viewport',
-  defaultOpen: false,
-  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 { DropdownMenu as default };