@carbon/react 0.17.0 → 1.0.0-rc.0

package/es/internal/ClickListener.js

@@ -0,0 +1,101 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, assertThisInitialized as _assertThisInitialized, createClass as _createClass, defineProperty as _defineProperty } from '../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+
+/**
+ * Generic component used for reacting to a click event happening outside of a
+ * given `children` element.
+ */
+
+var ClickListener = /*#__PURE__*/function (_React$Component) {
+  _inherits(ClickListener, _React$Component);
+
+  var _super = _createSuper(ClickListener);
+
+  function ClickListener(props) {
+    var _this;
+
+    _classCallCheck(this, ClickListener);
+
+    _this = _super.call(this, props); // We manually bind handlers in this Component, versus using class
+    // properties, so that we can properly test the `handleRef` handler with
+    // enzyme.
+
+    _this.handleRef = _this.handleRef.bind(_assertThisInitialized(_this));
+    _this.handleDocumentClick = _this.handleDocumentClick.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(ClickListener, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      document.addEventListener('click', this.handleDocumentClick);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('click', this.handleDocumentClick);
+    }
+  }, {
+    key: "handleDocumentClick",
+    value: function handleDocumentClick(evt) {
+      if (this.element) {
+        if (this.element.contains && !this.element.contains(ClickListener.getEventTarget(evt))) {
+          this.props.onClickOutside(evt);
+        }
+      }
+    }
+  }, {
+    key: "handleRef",
+    value: function handleRef(el) {
+      var children = this.props.children;
+      this.element = el;
+      /**
+       * One important note, `children.ref` corresponds to a `ref` prop passed in
+       * directly to the child, not necessarily a `ref` defined in the component.
+       * This means that here we target the following `ref` location:
+       *
+       * <ClickListener onClickOutside={() => {}}>
+       *   <Child ref={targetedRefHere} />
+       * </ClickListener>
+       */
+
+      if (children.ref && typeof children.ref === 'function') {
+        children.ref(el);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/React__default.cloneElement(this.props.children, {
+        ref: this.handleRef
+      });
+    }
+  }], [{
+    key: "getEventTarget",
+    value: function getEventTarget(evt) {
+      // support Shadow DOM
+      if (evt.composed && typeof evt.composedPath === 'function') {
+        return evt.composedPath()[0];
+      }
+
+      return evt.target;
+    }
+  }]);
+
+  return ClickListener;
+}(React__default.Component);
+
+_defineProperty(ClickListener, "propTypes", {
+  children: PropTypes.element.isRequired,
+  onClickOutside: PropTypes.func.isRequired
+});
+
+export { ClickListener as default };

package/es/internal/ComponentToggle.js

@@ -0,0 +1,42 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { objectSpread2 as _objectSpread2 } from '../_virtual/_rollupPluginBabelHelpers.js';
+import React__default from 'react';
+import { useFeatureFlag } from '../components/FeatureFlags/index.js';
+
+function createComponentToggle(spec) {
+  var name = spec.name,
+      _spec$flag = spec.flag,
+      flag = _spec$flag === void 0 ? 'enable-v11-release' : _spec$flag,
+      next = spec.next,
+      classic = spec.classic;
+
+  function ComponentToggle(props, ref) {
+    var enabled = useFeatureFlag(flag);
+
+    if (enabled) {
+      if (next) {
+        return /*#__PURE__*/React__default.createElement(next, _objectSpread2(_objectSpread2({}, props), {}, {
+          ref: ref
+        }));
+      }
+
+      return null;
+    }
+
+    return /*#__PURE__*/React__default.createElement(classic, _objectSpread2(_objectSpread2({}, props), {}, {
+      ref: ref
+    }));
+  }
+
+  var wrappedComponent = /*#__PURE__*/React__default.forwardRef(ComponentToggle);
+  wrappedComponent.displayName = "FeatureToggle(".concat(name, ")");
+  return wrappedComponent;
+}
+
+export { createComponentToggle };

package/es/internal/FeatureFlags.js

@@ -0,0 +1,52 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { enabled } from '@carbon/feature-flags';
+
+/**
+ * This file contains the list of the default values of compile-time feature flags.
+ *
+ * Build toolchain can replace variable here and/or the references
+ * in order to apply non-default values to those feature flags.
+ *
+ * @example Render `foo` if `aFeatureFlag` is `true`, render `bar` otherwise.
+ * import { aFeatureFlag } from '/path/to/FeatureFlags';
+ * ...
+ * const MyComponent = props => (<div {...props}>{aFeatureFlag ? 'foo' : 'bar'}</div>);
+ */
+
+/**
+ * With this flag, certain components will be created in either a controlled or controlled
+ * mode based on the existence of a value prop.
+ *
+ * The following components will have the significance of their props slightly altered as outlined below.
+ *
+ * Components: `<NumberInput>`
+ *
+ * * `value` → when provided, enables controlled mode.
+ *   For the rest of the component's lifecycle, it will be controlled by this prop as it's single source of truth.
+ * * `defaultValue` → Optional starting value, used for for uncontrolled mode only (no value prop).
+ *   The value prop takes precedence over defaultValue.
+ * * `onChange` → Optional event handler.
+ *   However, if value is provided and a handler is not, we'll throw a warning indicating the component is now read-only
+ * * `readOnly` → silences the above warning, acknowledging the read-only state of the component
+ *
+ * This flag also disables prop -> state sync in several components, notably `<NumberInput>`.
+ *
+ * This flag also updates event handlers to pass an up-to-date value in the second parameter,
+ * so applications can use it in both controlled and uncontrolled components.
+ *
+ * * _With_ this feature flag, the signature of the event handler will be altered to provide additional context in the second parameter: `onChange(event, { value, ...rest })` where:
+ *   * `event` is the (React) raw event
+ *   * `value` is the new value
+ *   * `rest` tells you additional information based on the source component
+ * * _Without_ this feature flag the event handler has component-specific signature, e.g. `onChange(event, direction)`.
+ */
+
+var useControlledStateWithValue = enabled('enable-use-controlled-state-with-value');
+
+export { useControlledStateWithValue };

package/es/internal/FloatingMenu.js

@@ -0,0 +1,483 @@
+/**
+ * Copyright IBM Corp. 2016, 2021
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { inherits as _inherits, createSuper as _createSuper, classCallCheck as _classCallCheck, defineProperty as _defineProperty, assertThisInitialized as _assertThisInitialized, objectSpread2 as _objectSpread2, createClass as _createClass, typeof as _typeof } from '../_virtual/_rollupPluginBabelHelpers.js';
+import PropTypes from 'prop-types';
+import React__default from 'react';
+import ReactDOM from 'react-dom';
+import window from 'window-or-global';
+import OptimizedResize from './OptimizedResize.js';
+import { selectorTabbable, selectorFocusable } from './keyboard/navigation.js';
+import { warning } from './warning.js';
+import wrapFocus from './wrapFocus.js';
+import { PrefixContext } from './usePrefix.js';
+
+/**
+ * The structure for the position of floating menu.
+ * @typedef {object} FloatingMenu~position
+ * @property {number} left The left position.
+ * @property {number} top The top position.
+ * @property {number} right The right position.
+ * @property {number} bottom The bottom position.
+ */
+
+/**
+ * The structure for the size of floating menu.
+ * @typedef {object} FloatingMenu~size
+ * @property {number} width The width.
+ * @property {number} height The height.
+ */
+
+/**
+ * The structure for the position offset of floating menu.
+ * @typedef {object} FloatingMenu~offset
+ * @property {number} top The top position.
+ * @property {number} left The left position.
+ */
+
+/**
+ * The structure for the target container.
+ * @typedef {object} FloatingMenu~container
+ * @property {DOMRect} rect Return of element.getBoundingClientRect()
+ * @property {string} position Position style (static, absolute, relative...)
+ */
+
+var DIRECTION_LEFT = 'left';
+var DIRECTION_TOP = 'top';
+var DIRECTION_RIGHT = 'right';
+var DIRECTION_BOTTOM = 'bottom';
+/**
+ * @param {FloatingMenu~offset} [oldMenuOffset={}] The old value.
+ * @param {FloatingMenu~offset} [menuOffset={}] The new value.
+ * @returns `true` if the parent component wants to change in the adjustment of the floating menu position.
+ * @private
+ */
+
+var hasChangeInOffset = function hasChangeInOffset() {
+  var oldMenuOffset = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var menuOffset = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+
+  if (_typeof(oldMenuOffset) !== _typeof(menuOffset)) {
+    return true;
+  }
+
+  if (Object(menuOffset) === menuOffset && typeof menuOffset !== 'function') {
+    return oldMenuOffset.top !== menuOffset.top || oldMenuOffset.left !== menuOffset.left;
+  }
+
+  return oldMenuOffset !== menuOffset;
+};
+/**
+ * @param {object} params The parameters.
+ * @param {FloatingMenu~size} params.menuSize The size of the menu.
+ * @param {FloatingMenu~position} params.refPosition The position of the triggering element.
+ * @param {FloatingMenu~offset} [params.offset={ left: 0, top: 0 }] The position offset of the menu.
+ * @param {string} [params.direction=bottom] The menu direction.
+ * @param {number} [params.scrollX=0] The scroll position of the viewport.
+ * @param {number} [params.scrollY=0] The scroll position of the viewport.
+ * @param {FloatingMenu~container} [params.container] The size and position type of target element.
+ * @returns {FloatingMenu~offset} The position of the menu, relative to the top-left corner of the viewport.
+ * @private
+ */
+
+
+var getFloatingPosition = function getFloatingPosition(_ref) {
+  var _DIRECTION_LEFT$DIREC;
+
+  var menuSize = _ref.menuSize,
+      _ref$refPosition = _ref.refPosition,
+      refPosition = _ref$refPosition === void 0 ? {} : _ref$refPosition,
+      _ref$offset = _ref.offset,
+      offset = _ref$offset === void 0 ? {} : _ref$offset,
+      _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? DIRECTION_BOTTOM : _ref$direction,
+      _ref$scrollX = _ref.scrollX,
+      pageXOffset = _ref$scrollX === void 0 ? 0 : _ref$scrollX,
+      _ref$scrollY = _ref.scrollY,
+      pageYOffset = _ref$scrollY === void 0 ? 0 : _ref$scrollY,
+      container = _ref.container;
+  var _refPosition$left = refPosition.left,
+      refLeft = _refPosition$left === void 0 ? 0 : _refPosition$left,
+      _refPosition$top = refPosition.top,
+      refTop = _refPosition$top === void 0 ? 0 : _refPosition$top,
+      _refPosition$right = refPosition.right,
+      refRight = _refPosition$right === void 0 ? 0 : _refPosition$right,
+      _refPosition$bottom = refPosition.bottom,
+      refBottom = _refPosition$bottom === void 0 ? 0 : _refPosition$bottom;
+  var scrollX = container.position !== 'static' ? 0 : pageXOffset;
+  var scrollY = container.position !== 'static' ? 0 : pageYOffset;
+  var relativeDiff = {
+    top: container.position !== 'static' ? container.rect.top : 0,
+    left: container.position !== 'static' ? container.rect.left : 0
+  };
+  var width = menuSize.width,
+      height = menuSize.height;
+  var _offset$top = offset.top,
+      top = _offset$top === void 0 ? 0 : _offset$top,
+      _offset$left = offset.left,
+      left = _offset$left === void 0 ? 0 : _offset$left;
+  var refCenterHorizontal = (refLeft + refRight) / 2;
+  var refCenterVertical = (refTop + refBottom) / 2;
+  return (_DIRECTION_LEFT$DIREC = {}, _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_LEFT, function () {
+    return {
+      left: refLeft - width + scrollX - left - relativeDiff.left,
+      top: refCenterVertical - height / 2 + scrollY + top - 9 - relativeDiff.top
+    };
+  }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_TOP, function () {
+    return {
+      left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
+      top: refTop - height + scrollY - top - relativeDiff.top
+    };
+  }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_RIGHT, function () {
+    return {
+      left: refRight + scrollX + left - relativeDiff.left,
+      top: refCenterVertical - height / 2 + scrollY + top + 3 - relativeDiff.top
+    };
+  }), _defineProperty(_DIRECTION_LEFT$DIREC, DIRECTION_BOTTOM, function () {
+    return {
+      left: refCenterHorizontal - width / 2 + scrollX + left - relativeDiff.left,
+      top: refBottom + scrollY + top - relativeDiff.top
+    };
+  }), _DIRECTION_LEFT$DIREC)[direction]();
+};
+/**
+ * A menu that is detached from the triggering element.
+ * Useful when the container of the triggering element cannot have `overflow:visible` style, etc.
+ */
+
+
+var FloatingMenu = /*#__PURE__*/function (_React$Component) {
+  _inherits(FloatingMenu, _React$Component);
+
+  var _super = _createSuper(FloatingMenu);
+
+  function FloatingMenu() {
+    var _this;
+
+    _classCallCheck(this, FloatingMenu);
+
+    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), "_placeInProgress", false);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      /**
+       * The position of the menu, relative to the top-left corner of the viewport.
+       * @type {FloatingMenu~offset}
+       */
+      floatingPosition: undefined
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_menuContainer", null);
+
+    _defineProperty(_assertThisInitialized(_this), "_menuBody", null);
+
+    _defineProperty(_assertThisInitialized(_this), "startSentinel", /*#__PURE__*/React__default.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "endSentinel", /*#__PURE__*/React__default.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "_updateMenuSize", function () {
+      var prevProps = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+      var isAdjustment = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
+      var menuBody = _this._menuBody;
+      process.env.NODE_ENV !== "production" ? warning(menuBody, 'The DOM node for menu body for calculating its position is not available. Skipping...') : void 0;
+
+      if (!menuBody) {
+        return;
+      }
+
+      var _prevProps$menuOffset = prevProps.menuOffset,
+          oldMenuOffset = _prevProps$menuOffset === void 0 ? {} : _prevProps$menuOffset,
+          oldMenuDirection = prevProps.menuDirection;
+      var _this$props = _this.props,
+          _this$props$menuOffse = _this$props.menuOffset,
+          menuOffset = _this$props$menuOffse === void 0 ? {} : _this$props$menuOffse,
+          menuDirection = _this$props.menuDirection;
+
+      if (hasChangeInOffset(oldMenuOffset, menuOffset) || oldMenuDirection !== menuDirection || isAdjustment) {
+        var _this$props2 = _this.props,
+            flipped = _this$props2.flipped,
+            triggerRef = _this$props2.triggerRef,
+            updateOrientation = _this$props2.updateOrientation;
+        var triggerEl = triggerRef.current;
+        var menuSize = menuBody.getBoundingClientRect();
+        var refPosition = triggerEl && triggerEl.getBoundingClientRect();
+        var offset = typeof menuOffset !== 'function' ? menuOffset : menuOffset(menuBody, menuDirection, triggerEl, flipped); // Optional function to allow parent component to check
+        // if the orientation needs to be changed based on params
+
+        if (updateOrientation) {
+          updateOrientation({
+            menuSize: menuSize,
+            refPosition: refPosition,
+            direction: menuDirection,
+            offset: offset,
+            scrollX: window.pageXOffset,
+            scrollY: window.pageYOffset,
+            container: {
+              rect: _this.props.target().getBoundingClientRect(),
+              position: getComputedStyle(_this.props.target()).position
+            }
+          });
+        } // Skips if either in the following condition:
+        // a) Menu body has `display:none`
+        // b) `menuOffset` as a callback returns `undefined` (The callback saw that it couldn't calculate the value)
+
+
+        if (menuSize.width > 0 && menuSize.height > 0 || !offset) {
+          _this.setState({
+            floatingPosition: getFloatingPosition({
+              menuSize: menuSize,
+              refPosition: refPosition,
+              direction: menuDirection,
+              offset: offset,
+              scrollX: window.pageXOffset,
+              scrollY: window.pageYOffset,
+              container: {
+                rect: _this.props.target().getBoundingClientRect(),
+                position: getComputedStyle(_this.props.target()).position
+              }
+            })
+          }, function () {
+            if (!isAdjustment) {
+              var newMenuSize = menuBody.getBoundingClientRect();
+
+              if (newMenuSize !== menuSize) {
+                _this._updateMenuSize(_this.props, true);
+              }
+            }
+          });
+        }
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_focusMenuContent", function (menuBody) {
+      var primaryFocusNode = menuBody.querySelector(_this.props.selectorPrimaryFocus || null);
+      var tabbableNode = menuBody.querySelector(selectorTabbable);
+      var focusableNode = menuBody.querySelector(selectorFocusable);
+      var focusTarget = primaryFocusNode || // User defined focusable node
+      tabbableNode || // First sequentially focusable node
+      focusableNode || // First programmatic focusable node
+      menuBody;
+
+      if (_this.props.focusTrap) {
+        focusTarget.focus();
+      }
+
+      if (focusTarget === menuBody && process.env.NODE_ENV !== "production") {
+        process.env.NODE_ENV !== "production" ? warning(focusableNode === null, 'Floating Menus must have at least a programmatically focusable child. ' + 'This can be accomplished by adding tabIndex="-1" to the content element.') : void 0;
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_menuRef", function (menuBody) {
+      var menuRef = _this.props.menuRef;
+      _this._placeInProgress = !!menuBody;
+      menuRef && menuRef(_this._menuBody = menuBody);
+
+      if (menuBody) {
+        _this._updateMenuSize();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_getChildrenWithProps", function () {
+      var _this$props3 = _this.props,
+          styles = _this$props3.styles,
+          children = _this$props3.children;
+      var pos = _this.state.floatingPosition; // If no pos available, we need to hide the element (offscreen to the left)
+      // This is done so we can measure the content before positioning it correctly.
+
+      var positioningStyle = pos ? {
+        left: "".concat(pos.left, "px"),
+        top: "".concat(pos.top, "px"),
+        right: 'auto'
+      } : {
+        visibility: 'hidden',
+        top: '0px'
+      };
+      return /*#__PURE__*/React__default.cloneElement(children, {
+        ref: _this._menuRef,
+        style: _objectSpread2(_objectSpread2(_objectSpread2({}, styles), positioningStyle), {}, {
+          position: 'absolute',
+          opacity: 1
+        })
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "handleBlur", function (_ref2) {
+      var oldActiveNode = _ref2.target,
+          currentActiveNode = _ref2.relatedTarget;
+
+      if (currentActiveNode && oldActiveNode) {
+        var startSentinelNode = _this.startSentinel.current;
+        var endSentinelNode = _this.endSentinel.current;
+        wrapFocus({
+          bodyNode: _this._menuBody,
+          startSentinelNode: startSentinelNode,
+          endSentinelNode: endSentinelNode,
+          currentActiveNode: currentActiveNode,
+          oldActiveNode: oldActiveNode
+        });
+      }
+    });
+
+    return _this;
+  }
+
+  _createClass(FloatingMenu, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this.hResize.release();
+    }
+  }, {
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this2 = this;
+
+      this.hResize = OptimizedResize.add(function () {
+        _this2._updateMenuSize();
+      });
+    }
+    /**
+     * Set focus on floating menu content after menu placement.
+     * @param {Element} menuBody The DOM element of the menu body.
+     * @private
+     */
+
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      this._updateMenuSize(prevProps);
+
+      var onPlace = this.props.onPlace;
+
+      if (this._placeInProgress && this.state.floatingPosition) {
+        if (this._menuBody && !this._menuBody.contains(document.activeElement)) {
+          this._focusMenuContent(this._menuBody);
+        }
+
+        if (typeof onPlace === 'function') {
+          onPlace(this._menuBody);
+          this._placeInProgress = false;
+        }
+      }
+    }
+    /**
+     * A callback for called when menu body is mounted or unmounted.
+     * @param {Element} menuBody The menu body being mounted. `null` if the menu body is being unmounted.
+     */
+
+  }, {
+    key: "render",
+    value: function render() {
+      var prefix = this.context;
+
+      if (typeof document !== 'undefined') {
+        var _this$props4 = this.props,
+            focusTrap = _this$props4.focusTrap,
+            target = _this$props4.target;
+        return /*#__PURE__*/ReactDOM.createPortal( /*#__PURE__*/React__default.createElement("div", {
+          onBlur: focusTrap ? this.handleBlur : null
+        }, /*#__PURE__*/React__default.createElement("span", {
+          ref: this.startSentinel,
+          tabIndex: "0",
+          role: "link",
+          className: "".concat(prefix, "--visually-hidden")
+        }, "Focus sentinel"), this._getChildrenWithProps(), /*#__PURE__*/React__default.createElement("span", {
+          ref: this.endSentinel,
+          tabIndex: "0",
+          role: "link",
+          className: "".concat(prefix, "--visually-hidden")
+        }, "Focus sentinel")), !target ? document.body : target());
+      }
+
+      return null;
+    }
+  }]);
+
+  return FloatingMenu;
+}(React__default.Component);
+
+_defineProperty(FloatingMenu, "contextType", PrefixContext);
+
+_defineProperty(FloatingMenu, "propTypes", {
+  /**
+   * Contents to put into the floating menu.
+   */
+  children: PropTypes.object,
+
+  /**
+   * `true` if the menu alignment should be flipped.
+   */
+  flipped: PropTypes.bool,
+
+  /**
+   * Enable or disable focus trap behavior
+   */
+  focusTrap: PropTypes.bool,
+
+  /**
+   * Where to put the tooltip, relative to the trigger button.
+   */
+  menuDirection: PropTypes.oneOf([DIRECTION_LEFT, DIRECTION_TOP, DIRECTION_RIGHT, DIRECTION_BOTTOM]),
+
+  /**
+   * The adjustment of the floating menu position, considering the position of dropdown arrow, etc.
+   */
+  menuOffset: PropTypes.oneOfType([PropTypes.shape({
+    top: PropTypes.number,
+    left: PropTypes.number
+  }), PropTypes.func]),
+
+  /**
+   * The callback called when the menu body has been mounted to/will be unmounted from the DOM.
+   */
+  menuRef: PropTypes.func,
+
+  /**
+   * The callback called when the menu body has been mounted and positioned.
+   */
+  onPlace: PropTypes.func,
+
+  /**
+   * Specify a CSS selector that matches the DOM element that should
+   * be focused when the Modal opens
+   */
+  selectorPrimaryFocus: PropTypes.string,
+
+  /**
+   * The additional styles to put to the floating menu.
+   */
+  styles: PropTypes.object,
+
+  /**
+   * The query selector indicating where the floating menu body should be placed.
+   */
+  target: PropTypes.func,
+
+  /**
+   * The element ref of the tooltip's trigger button.
+   */
+  triggerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({
+    current: PropTypes.any
+  })]),
+
+  /**
+   * Optional function to change orientation of tooltip based on parent
+   */
+  updateOrientation: PropTypes.func
+});
+
+_defineProperty(FloatingMenu, "defaultProps", {
+  menuOffset: {},
+  menuDirection: DIRECTION_BOTTOM,
+  updateOrientation: null
+});
+
+export { DIRECTION_BOTTOM, DIRECTION_LEFT, DIRECTION_RIGHT, DIRECTION_TOP, FloatingMenu as default };