Gazebo_simulation-Frontend/node_modules/react-overlays/esm/Dropdown.js
2020-12-21 10:29:31 -05:00

249 lines
7.7 KiB
JavaScript

import matches from 'dom-helpers/matches';
import qsa from 'dom-helpers/querySelectorAll';
import React, { useCallback, useRef, useEffect, useMemo } from 'react';
import PropTypes from 'prop-types';
import { useUncontrolled } from 'uncontrollable';
import usePrevious from '@restart/hooks/usePrevious';
import useCallbackRef from '@restart/hooks/useCallbackRef';
import useForceUpdate from '@restart/hooks/useForceUpdate';
import useEventCallback from '@restart/hooks/useEventCallback';
import DropdownContext from './DropdownContext';
import DropdownMenu from './DropdownMenu';
import DropdownToggle from './DropdownToggle';
var propTypes = {
/**
* A render prop that returns the root dropdown element. The `props`
* argument should spread through to an element containing _both_ the
* menu and toggle in order to handle keyboard events for focus management.
*
* @type {Function ({
* props: {
* onKeyDown: (SyntheticEvent) => void,
* },
* }) => React.Element}
*/
children: PropTypes.func.isRequired,
/**
* Determines the direction and location of the Menu in relation to it's Toggle.
*/
drop: PropTypes.oneOf(['up', 'left', 'right', 'down']),
/**
* Controls the focus behavior for when the Dropdown is opened. Set to
* `true` to always focus the first menu item, `keyboard` to focus only when
* navigating via the keyboard, or `false` to disable completely
*
* The Default behavior is `false` **unless** the Menu has a `role="menu"`
* where it will default to `keyboard` to match the recommended [ARIA Authoring practices](https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton).
*/
focusFirstItemOnShow: PropTypes.oneOf([false, true, 'keyboard']),
/**
* A css slector string that will return __focusable__ menu items.
* Selectors should be relative to the menu component:
* e.g. ` > li:not('.disabled')`
*/
itemSelector: PropTypes.string.isRequired,
/**
* Align the menu to the 'end' side of the placement side of the Dropdown toggle. The default placement is `top-start` or `bottom-start`.
*/
alignEnd: PropTypes.bool,
/**
* Whether or not the Dropdown is visible.
*
* @controllable onToggle
*/
show: PropTypes.bool,
/**
* Sets the initial show position of the Dropdown.
*/
defaultShow: PropTypes.bool,
/**
* A callback fired when the Dropdown wishes to change visibility. Called with the requested
* `show` value, the DOM event, and the source that fired it: `'click'`,`'keydown'`,`'rootClose'`, or `'select'`.
*
* ```js
* function(
* isOpen: boolean,
* event: SyntheticEvent,
* ): void
* ```
*
* @controllable show
*/
onToggle: PropTypes.func
};
var defaultProps = {
itemSelector: '* > *'
};
/**
* `Dropdown` is set of structural components for building, accessible dropdown menus with close-on-click,
* keyboard navigation, and correct focus handling. As with all the react-overlay's
* components its BYOS (bring your own styles). Dropdown is primarily
* built from three base components, you should compose to build your Dropdowns.
*
* - `Dropdown`, which wraps the menu and toggle, and handles keyboard navigation
* - `Dropdown.Toggle` generally a button that triggers the menu opening
* - `Dropdown.Menu` The overlaid, menu, positioned to the toggle with PopperJs
*/
function Dropdown(_ref) {
var drop = _ref.drop,
alignEnd = _ref.alignEnd,
defaultShow = _ref.defaultShow,
rawShow = _ref.show,
rawOnToggle = _ref.onToggle,
itemSelector = _ref.itemSelector,
focusFirstItemOnShow = _ref.focusFirstItemOnShow,
children = _ref.children;
var forceUpdate = useForceUpdate();
var _useUncontrolled = useUncontrolled({
defaultShow: defaultShow,
show: rawShow,
onToggle: rawOnToggle
}, {
show: 'onToggle'
}),
show = _useUncontrolled.show,
onToggle = _useUncontrolled.onToggle;
var _useCallbackRef = useCallbackRef(),
toggleElement = _useCallbackRef[0],
setToggle = _useCallbackRef[1]; // We use normal refs instead of useCallbackRef in order to populate the
// the value as quickly as possible, otherwise the effect to focus the element
// may run before the state value is set
var menuRef = useRef();
var menuElement = menuRef.current;
var setMenu = useCallback(function (ref) {
menuRef.current = ref; // ensure that a menu set triggers an update for consumers
forceUpdate();
}, [forceUpdate]);
var lastShow = usePrevious(show);
var lastSourceEvent = useRef(null);
var focusInDropdown = useRef(false);
var toggle = useCallback(function (event) {
onToggle(!show, event);
}, [onToggle, show]);
var context = useMemo(function () {
return {
toggle: toggle,
drop: drop,
show: show,
alignEnd: alignEnd,
menuElement: menuElement,
toggleElement: toggleElement,
setMenu: setMenu,
setToggle: setToggle
};
}, [toggle, drop, show, alignEnd, menuElement, toggleElement, setMenu, setToggle]);
if (menuElement && lastShow && !show) {
focusInDropdown.current = menuElement.contains(document.activeElement);
}
var focusToggle = useEventCallback(function () {
if (toggleElement && toggleElement.focus) {
toggleElement.focus();
}
});
var maybeFocusFirst = useEventCallback(function () {
var type = lastSourceEvent.current;
var focusType = focusFirstItemOnShow;
if (focusType == null) {
focusType = menuRef.current && matches(menuRef.current, '[role=menu]') ? 'keyboard' : false;
}
if (focusType === false || focusType === 'keyboard' && !/^key.+$/.test(type)) {
return;
}
var first = qsa(menuRef.current, itemSelector)[0];
if (first && first.focus) first.focus();
});
useEffect(function () {
if (show) maybeFocusFirst();else if (focusInDropdown.current) {
focusInDropdown.current = false;
focusToggle();
} // only `show` should be changing
}, [show, focusInDropdown, focusToggle, maybeFocusFirst]);
useEffect(function () {
lastSourceEvent.current = null;
});
var getNextFocusedChild = function getNextFocusedChild(current, offset) {
if (!menuRef.current) return null;
var items = qsa(menuRef.current, itemSelector);
var index = items.indexOf(current) + offset;
index = Math.max(0, Math.min(index, items.length));
return items[index];
};
var handleKeyDown = function handleKeyDown(event) {
var key = event.key,
target = event.target; // Second only to https://github.com/twbs/bootstrap/blob/8cfbf6933b8a0146ac3fbc369f19e520bd1ebdac/js/src/dropdown.js#L400
// in inscrutability
var isInput = /input|textarea/i.test(target.tagName);
if (isInput && (key === ' ' || key !== 'Escape' && menuRef.current && menuRef.current.contains(target))) {
return;
}
lastSourceEvent.current = event.type;
switch (key) {
case 'ArrowUp':
{
var next = getNextFocusedChild(target, -1);
if (next && next.focus) next.focus();
event.preventDefault();
return;
}
case 'ArrowDown':
event.preventDefault();
if (!show) {
toggle(event);
} else {
var _next = getNextFocusedChild(target, 1);
if (_next && _next.focus) _next.focus();
}
return;
case 'Escape':
case 'Tab':
onToggle(false, event);
break;
default:
}
};
return React.createElement(DropdownContext.Provider, {
value: context
}, children({
props: {
onKeyDown: handleKeyDown
}
}));
}
Dropdown.displayName = 'ReactOverlaysDropdown';
Dropdown.propTypes = propTypes;
Dropdown.defaultProps = defaultProps;
Dropdown.Menu = DropdownMenu;
Dropdown.Toggle = DropdownToggle;
export default Dropdown;